Flashを使わない3D絵本の作り方、HTML5/CSS3時代のコンテンツ作りについての雑感 【増田 @maskin】

[読了時間: 2分]

　動きのあるコンテンツといえば “Flash” という時代が長らく続いたが、提供元のAdobe Systemsはスマーフォフォンの非対応を表明。ますます増加するである非PCデバイスのコンテンツ表現手段を模索する状態が続いている。

　Flashの代替の一つとして考えられるのがHTML5およびCSS3といった技術群であり、YouTubeを始め、北米を中心とした多くのサービスが実験を兼ねて移行の準備を進めている。

　冒頭の画面は、CSS3の機能で要素に2D/3D効果を加えられるCSS 3D Transformというを駆使した「Beercamp 2012」のデモ。画面上に表示される本をマウスやタッチでめくって読み進むことができる。CSS3対応の一部のウェブブラウザで使用できるため、PCのみならずiPhoneやiPadでも閲覧できる。

　3Dのペーパークラフト作品といえば以前紹介した「The Box」があるが、「Beercamp 2012」の絵本型デモは、いわゆるCSS 3Dの技術デモの類ではなく 作り方 も紹介されており、HTML5/CSS3時代のコンテンツの方向性を知るためにも有意義だと言えそうだ。

作者いわく「もう、Flashはいらない」

kobo Touch （ブラック） 価格：7,980円（税込、送料込） 楽天ブックスで詳細を見る

　「Beercamp 2012」のコンテンツは、先に述べた「The Box」のように3D表現のフレームワーク(特定の機能を実現するプログラム群) を使用しているわけではなく、CSS 3D Transform要素をJavaScriptでコントロールしている。

　作り方は、ページの回転や画面のフィットの仕方など技術要素ごとにメカニズムや手順が丁寧に解説されており、HTML/JavaScriptを理解している人であれば応用することができる内容になっているのでトライしてみてはいかがだろうか。

【関連URL】
・Beercamp 2012
http://2012.beercamp.com/
・Beercamp: An Experiment With CSS 3D
http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-with-css-3d/

蛇足：僕はこう思ったッス
HTML5/CSS3はまだ策定途中の仕様であり、この作者もまだ「ティッピングポイントはむかえていない」と言っているし、今全面移行するかどうかは慎重な判断が必要だが、スマホは今後もシェアを拡大していくと思うし流れはこちらにある。オープンな技術によってマルチデバイス対応のインタラクティブなコンテンツが開発できるようになるのは作り手にとってはよろこばしいことだと思うので歓迎したい。