imgcache.jsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。

画像の読み込みを速くする際にはキャッシュを使うのが有効です。最近であればeTagを付けたりすると思いますが、より高速化するために使ってみたいのがHTML5のFile APIを使ったimgcache.jsです。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.00.00_thumb.1371019192.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.00.00.1371019192.png)
インスペクタで見ると分かりますが、ファイルシステムへアクセスしています。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.00.06_thumb.1371019197.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.00.06.1371019197.png)
実際にアクセスしているURLを出力しています。httpの上にfilesystemが追加されています。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.00.30_thumb.1371019201.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.00.30.1371019201.png)
実際にキャッシュされているファイルの一覧も取れます。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.00.48_thumb.1371019206.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.00.48.1371019206.png)
同一ドメインの他、外部ファイルでもキャッシュさせられます。

imgcache.jsはリモートへのネットワーク接続も行われないため、オフラインでも利用できます。さらに高速です。ただしChromeのみで、かつ専用のフラグを立てて起動しなければ使えませんので注意が必要です。

MOONGIFTはこう見る

HTML5には元々オフラインキャッシュの機能が備わっていますが、あまり使い勝手が良くなく、かつローカルのファイルに対してしか使えないのが難点です。imgcache.jsは実用性という意味では疑問ですが、面白い試みと言えます。

ローカルファイルへのアクセスがもっと柔軟に行えるようになればWebアプリケーションをローカルで動作させる試みも広まっていきそうです。オフラインでも使えるローカルアプリケーション普及のためにも必須の技術と言えそうです。

chrisben/imgcache.js · GitHub