File APIを使ってソースを表示させるJavascriptベンチを作ってみた
File APIは、ブラウザから任意のローカルのファイルを開くことができるAPIです。現時点ではFirefoxとChromeしか対応していません。
また、ブラウザ上でソースコードを表示するスクリプトはいくつか存在します。その両者を組み合わせて、任意のソースをブラウザで表示させて見る事ができないかと思いスクリプトを書いてみました。あと、Javascriptベンチとしても使用できないかと言う思いがあります。
ソースコードを表示させるのは"google-code-prettify"を使います。軽くて非常に高い確率で色をコードに色をつけてくれます。これを直接読みます。
File APIでファイルを読み込んで、ソースをpreに貼り、google-code-prettifyで色づけします。
ファイルは何でも良いのですが、ベンチ的な意味合いを持たせるためにできるだけ大きいものを見せたほうがいいと思います。そこで、圧縮されていないjQuery UIあたりが面白いと思います。jQuery UIのフルの非圧縮版は"jquery-ui.js"にあります。URLにアクセスしてPC上に保存します。
"参照"もしくは"ファイルを選択"ボタンで保存したファイルを読み、"read"ボタンで読み込みます。そうすると"Source"以下に現れます。timeには、google-code-prettifyでソースに色をつけるのにかかる時間です。
Source:
Chrome 7で802ms、Firefox 3.6で2,153msぐらいかかります。11.4KLもあるソースですのでそれぐらいかかります。Opera、Safari、IEがFile APIに対応していないので、一般的なJavascriptベンチとして使用できません。
単独で動くファイルをソース置き場のfileapisourceviewer.zipにあります。Firefoxの場合はそのファイルをそのままローカルに持ってきても動きますが、Chromeは動きません。Chromeは"--allow-file-access-from-files"の引数で起動させないとローカルファイルのHTMLをどうさせることはできません。
【Javascript関連】
・SVGを使ってグラフを作ってみた～ちょっと動く～
・SVGを使ってグラフを作ってみた
・N-Queen問題をWeb Workersで解いてみた(Javascript関係)
・素数を Web Workersを作って計算してみた(Javascriptサンプル)
・File APIを使ってブラウザバージョンシェアの加工してみた(Javascriptサンプル)