iPhone5サイトの動画にWEBデザイナーが命削ってるぞ

欲しいな欲しいな~ってiPhone5のWEBサイトを眺めている人がこの瞬間にも10万人位いそうです( ^o^)/ ハイッ!

そのiPhoneのカテゴリー「デザイン」に、恐ろしく高度な技術が使われていました。

このページ。一見何でもない感じです。大きくiPhoneの写真が配置されてて、読み込みと同時に少しだけ画面が動きます。

アップル – iPhone 5 – iPhone 5を生み出した方法をご紹介します。

この数秒の動画、実はWEBデザイナーの執念とも言える動画で、約1MのJPEGファイルからJavaScriptで計算しまくってリアルタイムで動画を作っています。

なぜこのような方法が採用されたか

通常、WEBで動画を扱うのならYouTubeにアップしてiframeで呼び出すのが今の定石。回線もYouTubeが面倒見てくれるのでトラフィック考えなくても良いですから。それか自前でflvを作成しても可能です。

でも、これらの方法だとiPhoneから見れないんですよね。iPhoneとiPadはFlash使えないのでYouTubeの動画は専用アプリの全画面表示になります。iPhoneのセールスページですから、iPhoneの大きく美しい画面が、薄くスマートな端末の中でアニメーションする必要があるのです。( ー`дー´)キリッ

そうなると次に考えるのは動画GIFでしょうか。当ブログでも紹介している通り、かなりいい線まで狙えそうですが、同時発色数の制限があるので、フルカラーを表現するのに力不足になりそうです。

この動画GIFは1MB。

さて、どうしたものか。

以前の解決法

実はこの問題には歴史があり、以前のはMacBook Proの「特徴」ページにあります。MacBook Proが開く横長の動画です。

アップル – ノートパソコン – MacBook Pro Retinaディスプレイモデル – 特長

この2秒の動画の為に、5MB分のJPEGファイルを一枚一枚JSで紙芝居のように流し込んでいます。JPEGなので静止画として圧縮されてますが、動画圧縮されていないので当然重い。

そこで、今回の解決法。

JavaScriptに動画圧縮を担当させる

今回のiPhoneの動画で何が行われているかというと、動いている部分だけを細かく切りJPEGファイルに並べて、JSで動的に配置してアニメーションしています。これがJPEGファイル化された動画です(クリックで拡大 よく見ると部品が見えます)。

いわばMPEGやDivXなどの動画エンジンの仕事をJSで実現させたのです。おそらく自前のエンコーダも開発したのでしょう。

この方法により、あの大きなサイズのフルカラー動画を1MBで実現し、更にほとんどの端末で表示できます。そこまでする必要があるのか?と考えないでもないですが、さすがアップルといえるページ。と同時に、いまだ安定しないWEB環境にはガックシ。

最後にもう一度、この美しい動画を目に焼き付けて、iPhone欲しいなー。

アップル – iPhone 5 – iPhone 5を生み出した方法をご紹介します。

参考

iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas>

 

広告