Hatena::Groupsubtech

冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。

 | 

Apr 05, 2012 (Thu)

FlashAir の最新ファイルを表示するやつ 23:50 はてなブックマーク - 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 とかでも汚い感じにならないつもり (検証してないけど)。

 | 

スポンサード リンク

書いてる人

cho45 (佐藤広央) (www.lowreal.net)

Perl, JavaScript, Ruby, HTML, CSS, Web etc


スポンサード リンク