読者です 読者をやめる 読者になる 読者になる

山本ゆうごブログ

山本ゆうごの仕事メモ

Google Cloud Strage の東京リージョンができたので、巨大なパラパラ漫画を実装してみた

やっと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での検証)