AA(アスキーアート)を読みやすくする Chrome 拡張をつくりました

AAReadable という Chrome 拡張を作りました

急になるべくどうでも良いものが作りたくなってChrome拡張を作りました。
名前の通りの拡張でブラウザで開いているページあるいは、選択している部分のフォントを変更してアスキーアートを見やすくする拡張です。

フォントを別途インストールする必要が無いところと、閲覧中のページに適切なCSSが無くても動くとこなんかがポイントです。

フォントについては textar webfont(http://font.textar.tv/) さんが、IPA Font License Agreement v1.0(http://ossipedia.ipa.go.jp/ipafont/index.html#LicenseJP)でfontを配布していらっしゃるのでそれを利用させていただいています。

使い方

https://chrome.google.com/extensions/detail/omooelimgkbkdfnnciofhjoopichcbok?hl=ja
からインストール。

AAを選択して、右クリックすると AAReadable のメニューがあるので"選択範囲を変更"すると、選択範囲内のフォントが変更されます。

"画面全体を変更" を選択すると、選択範囲に関係なく画面全体のフォントを変更します。

技術的ポイントなど

webfont面白いけど日本語フォント配布するのは重いし chrome 拡張に突っ込んだら google がホスティングしてくれないカナーと思って作ってみました。

無事ホスティングしてもらえたわけですが、2つポイントがあって、

すべての 'ttf' が webfont に使えるわけではない

AA用のフォントというと、モナーフォント(TK)とか、IPAモナーフォントなどが有名なのですが、これらに含まれているttf はどちらも chrome では利用出来ませんでした。僕のかいたCSSが間違っている可能性もありますが、おなじCSSでも、美咲フォントの最新アウトライン版に含まれる MisakiGothic_Outline.ttf は使えるのに、古い misaki.ttf は使えなかったりとルールが全然わかりません。

ttf にも色々種類があるんだろうなと思いつつそこまで追いきれていません。

chrome 拡張でページのコンテンツにアクセスする

chrome拡張はBookmarkletやGreasemonkeyに比べると格段にセキュリティが意識されていて、メインとなる background_page から 現在開いているwebページのDOMに直接アクセスすることが出来ません。

しかし、

chrome.tabs.executeScript(null, {file:'file_name_of.js'}, function(){
      chrome.tabs.executeScript(null, {code:'functionInJs()'});
});

という感じのメソッドで、JS のファイルをアクティブなタブに読み込ませることはできるのでこいつがかなり便利です。第3引数のコールバック関数がなんのためにあるのか最初分からなかったのですが、これがかなり便利で、JSファイルの読み込みが終わったあとで呼ばれるのでJSファイルの中で定義している関数などが呼び出せます。逆にこう書かないで、chrome.tabs.executeScript を連続的に呼び出すとそれらは、非同期に実行されてしまうので、まえに読み込んだファイルにある関数を利用してというような事ができません。

という点ではまったりしたわけですが、chrome拡張は割と簡単につくれる上に色々使いではありそうなので、みなさんも何か作ってみてはいかがでしょうか。