• https://github.com/cho45/flashair

バグをとったり高速化したりしてある程度安定していい感じになった。

サムネを表示するためにいちいち FlashAir の thumbnail.cgi というのを叩いているのが不安なので、localStorage にキャッシュするようにした。この際、サムネ画像は 30kb 前後あって大きすぎるので、canvas で一旦縮小し (この際、少し画像周辺をカットすることで中央付近を拡大してる)、toDataURL('image/jpeg') で 5kb 前後までサイズを落としてる。

しかし Android 2.x 系だと toDataURL() が全く使えないので、JavaScript JPEG Encoder を使って toDataURL を実装しなおしている。速度でるのか？ と思ったけど、デカい画像というわけでもないので、気にするほどでもなかった。

キャッシュは LRU で勝手に消えていって欲しいので、lscache というのを使ってみた。memcached と同じ感じなので簡単です。

あとロード自体も前よりもうちょっと工夫して、画面サイズを考慮し、端数が出ないように調整しながらロードするようにしてある (このほうが心理的に高速に感じるっぽい)。つまり iPhone の場合、横に 3 つしか画像が入らないので、1つ画像をロード、2つ画像をロード (ここで横が揃う)、3つ画像をロード (揃ったまま)、6つ画像をロード (揃ったまま)、6つ画像をロード…… とロードしていく。画面が埋まるまでロードしたら一旦ロードを止め、スクロールするまで待つようにしてある (autopgerize 的な)。

iPad とかでも一覧性を保ってほしいので頑張ってリキッドレイアウトにしてある。うまくおさまるようにレイアウトをJSで調整している。また、window.devicePixelRate によってサムネのサイズを調整しているので、Retina とかでも汚い感じにならないつもり (検証してないけど)。