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

News, Startups


[読了時間: 2分]

screenshot_233

 動きのあるコンテンツといえば “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はいらない」


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

screenshot_231

複数ページで構成される絵本はマウスドラッグまたはタッチでめくることができる

screenshot_232

吹き出しが書かれた部分は適切なサイズで拡大される

IMG_1464

iPhoneでも(ちょっとサイズが小さ過ぎだが)問題なく動作する

 作り方は、ページの回転や画面のフィットの仕方など技術要素ごとにメカニズムや手順が丁寧に解説されており、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はまだ策定途中の仕様であり、この作者もまだ「ティッピングポイントはむかえていない」と言っているし、今全面移行するかどうかは慎重な判断が必要だが、スマホは今後もシェアを拡大していくと思うし流れはこちらにある。オープンな技術によってマルチデバイス対応のインタラクティブなコンテンツが開発できるようになるのは作り手にとってはよろこばしいことだと思うので歓迎したい。
著者プロフィール:TechWave副編集長・イマジニア 増田(maskin)真樹
 8才でプログラマ、12才で起業。18才でライター。道具としてIT/ネットを追求し、日米のIT/ネットをあれこれ見つつ、生み伝えることを生業として今ここに。1990年代はソフト/ハード開発&マーケティング→週刊アスキーなど多数のIT関連媒体で雑誌ライターとして疾走後、シリコンバレーで証券情報サービスベンチャーの起業に参画。帰国後、ネットエイジ等で複数のスタートアップに関与。関心空間、@cosme、ニフティやソニーなどのブログ&SNS国内展開に広く関与。坂本龍一氏などが参加するプロジェクトのブログ立ち上げなどを主導。 Rick Smolanの24hours in CyberSpaceの数少ない日本人被写体として現MITメディアラボ所長 伊藤穣一氏らと出演。TechWaveでは創出支援に注力。エレベーターピッチ絶賛受け付け中! (まずはAirTimeでどうぞ!)

メール maskin(at)metamix.com | 書籍情報・Twitter @maskincoffee-meeting | facebook 詳しいプロフィールはこちら


maskin
Follow me

maskin

Editor In Chief at TechWave.jp
1990年代初頭からソフトからハードまで50以上のスタートアップ立ち上げを国内外で経験。平行して雑誌ライターとして疾走。シリコンバレーでガレージベンチャーに参画後は、国内でネットエイジを筆頭にスタートアップに多数関与。ブログやSNSの国内啓蒙、ソニーの社内イノベーション事業など関与。通信キャリアのニュースポータルの立ち上げ期の編集デスクとして数億PV事業に育てた後、TechWaveにジョイン。世界最大のグローバルIT系メディアであるスペインの「Softonic」の元日本編集長
https://www.wantedly.com/users/24387
https://keybase.io/maskin
maskin
Follow me

最新情報をお届け

こっちはいろいろ

PAGE TOP
More in CSS3, HTML5, JavaScript, スマートフォン・タブレット
「スマホデザイン会議」6/28開催、企画経営層のためのDesign Thinking【増田 @maskin】

京都発「Mooklet」が仏コンテストで最優秀賞、HTML5フォトブックを書き出せるiPhone4アプリのここがすごい 【増田 @maskin】

あの「楽天市場」をスッキリとさせてしまう、Metro スタイル アプリの可能性 #wddjp @maskin

Close