やっとGoogle Cloud Strageの東京リージョンがオープンしました。 S3＋CloudFrontの組み合わせのように使えるので、配信にも便利かも知れません。
手順は以下の通り。
- バケットを作ります
- バケット単位でリージョンは選べますが、東京リージョンが選べるのは、Regionalというストレージクラスだけのようです。
- ファイルのアップロードはコンソールからできる
- S3でもそうですが、ブラウザからアップロードできます。
- フォルダのドラッグ＆ドロップでもアップロードできます。
- 一般公開はファイル単位
- フォルダ単位での公開ができません
- 「デフォルトのオブジェクトの権限の編集」はできますが、アップロードする前に設定する必要があります
そして、大量のjpegをアップロードして、パラパラ漫画にしてみた
画像を高速に切り替えてアニメーションにするというのは、CSSスプライトでよくやる手法ですが、今回は大きな画像でコマ数も多いので、そのままロードします。アニメーションが始まるちょっと前に、JavaScriptの中で、Image オブジェクトをnewして、srcにセットしておきます。あとは、setTimeoutで、ちょっとずつずらしながら、1個のimgタグのsrcを書き換えていくだけ。
デモ
https://storage.googleapis.com/yugoyamamoto/parapara/dance.html
1280pxの巨大な画像を24fpsで動かしてみましたよというデモです。この実装では、3割ほど画像がロードされたらアニメーションが動き始めるロジックにしています。あとは、ロードしながら追いかけてアニメーションします。一応スマホでも動きました。流石にこのサイズのimageオブジェクトが大量になると動きは怪しいですが、画像が一度キャッシュされるとスムーズにアニメーションします。（手元のGALAXY Note3での検証）
