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

• About
• Latest Posts

maskin

Editor In Chief at TechWave.jp

1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。

Latest posts by maskin (see all)

• 「ソラコム」がスイングバイIPOを実現、東証グロース市場上場承認 - 2024-02-22
• （更新）結果速報 LAUNCHPAD SEED#IVS2023 #IVS #IVS @IVS_Official - 2023-03-09
• 「始動 Next Innovator 2022」締め切りは9月5日（月）正午ー経産省・JETRO主催のイノベーター育成プログラム #始動2022 - 2022-09-01

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