Monthly Archives: October 2013

WebWorkerで爆速プリロード

HTMLで画像とか動画とかのリソースをページが表示される前にプリロードするパターンあるじゃないですか、あれでちょっと思いついたのがあるんでメモしときます。

以前やったPOOL inc.のトップページ、例のごとく最初にビデオをある程度プリロードしてから再生してるんですが、本数が40本程あって全部の読み込みを待つのさすがにダルいよねってことで2, 3本読み込んだら再生をはじめて、残りのビデオは裏で読みってやってみたんですが、この読み込みの処理がなかなかヘビーでして、再生してるビデオがコマ落ちしてまともに再生されないんです。

どうしよう、どうしようということで読み込み処理をビデオの再生とは別のスレッドにしてみたんです。HTML5のAPI、Web Workerで。すると狙いどおりビデオがコマ落ちすることなくバックグラウンドで読み込みができるようになりました。40本同時に並列でダウンロードしても処理落ちせず爆速です!(Workerが使えない環境の場合は同一スレッドで、しかもビデオの再生を邪魔しないように全部のビデオを読み込むのを待つようにしてるので段違いに遅い)

大量の画像をプリロードしてからはじまるサイトとかでもWorkerを使って分散すればずいぶん高速化できるんじゃないでしょうか。

ソースはこんな感じです。簡略化してるけど。main.coffeeから呼び出したPreload.coffeeまでが最初のスレッドで、Preload.coffeeがload.coffeeを別スレッドで実行してつつ読み込みが終わるのを待ってるという流れ。

※コード内のdefineはrequire.jsを使ってる想定

関連:
POOL inc. | blog.bouze.me

のめりこませる技術

61RjpnZfyUL._SS400_

最近移動中に読んでた「のめりこませる技術」が面白かった。

この本はいろいろなメディアやコンテンツが作られた背景を追いながら、人がなぜ物語にのめりこむのかを考察していくという内容。

映画が主流なメディアだった時代の名作から、ソーシャルメディアが台頭し始めた現代の名作を例にあげつつ、どのようにして人がその物語に没入していくのか、そして時代とともにその仕掛けがどのように変化してきているのかを解説している。

400ページを越える本書の中で取り上げられる事例は、スターウォーズやトロン、マトリックス、アバター、ダークナイト、トロン・レガシー、ディズニー、ロスト、スタートレックなどの映画やドラマから、Subservient Chickenやオールドスパイス、AXE、Nike+などの広告、そしてPongやシムピープル、メタルギア・ソリッド、グランド・セフト・オートなどのゲーム、さらにはBloggerやYouTube、Twitterなどのネットメディアまで様々。

マスメディアからソーシャルメディアに主戦場が移った近現代のメディアの変遷を、普段自分の持っている視点とは異なる「物語を作る」という少し大局的な視点から読めておもしろかった。

Amazon.co.jp: のめりこませる技術 ─誰が物語を操るのか: フランク・ローズ, 島内哲朗: 本

色のない世界

色のない世界

「ない世界」展にて展示された「色のない世界」という作品を制作しました。ウェブをゆっくりと白黒化させながら巡回する作品です。自動巡回機能をなくしたChromeの拡張機能版はこちらからダウンロードすることができます。

Planning + Art Direction: 阿部洋介
Design + Program: 西村斉輝

POOL inc.

POOL inc.

お仕事でPOOL inc.のポートフォリオサイトを制作しました。トップページではお馴染み岡崎さんのPOOLのLOOP映像が流れます。クレジット等、詳細はこちらで。

僕パートで言うと制作期間の6, 7割を文字がもじゃもじゃ動くエフェクトを作ってたわけですが、このへんの実装について。

当初は今どきっぽくcanvasで実装しようと思っていたのですが、文字を塗りつぶすほどの量の線をまともなフレームレートでアニメーションさせることができず、リアルタイムに描画することを諦めプリレンダリング路線に切り替えました。

アニメーションをプリレンダリングするために、モノクロの画像をほりこむとアニメーションが1コマづつ縦に並んだスプライト画像(こういうやつ)と、このスプライト画像のアニメーション兼配置用のsassが書きだされるジェネレーターをこしらえました。そしてサイト上ではこのスプライト画像のbackground-positionをjsで操作してアニメーションさせたりマウスオーバーに反応させたりしています。

↓もじゃもじゃジェネレーター
generator

そんな感じです。

関連:
WebWorkerで爆速プリロード | blog.bouze.me

Kazumiabe.com

kazumiabe.com

写真作家 阿部夏澄さんのポートフォリオサイトを制作しました。
URL: http://kazumiabe.com/