SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

【デブサミ2012】セッションレポート(AD)

【デブサミ2012】16-C-4 レポート
HTML5で何がどう変わるのか。HTML5の可能性とWeb開発者に求められることを探る

  • このエントリーをはてなブックマークに追加

HTML5は「Native to Windows」に

 最後に紹介されたのは、「MOGUTARO eats files!」というFile APIのほか、Video、Audio、Drag&Dropなどのタグを使ったすべてアニメーション・アプリ。「さまざまなファイルを食べさせたときのエフェクトにかなりこだわった」と白石氏。

 MOGUTAROに画像を食べさせるデモを実施。すると画像を表示するだけではなく、その画像に使われている色を割り出し、その色で構成された虹を表示。「音楽ファイルを食べさせると、音楽を再生したり、動画の再生もできる」(白石氏)のだという。

 これが容易にできたのは「IE10がURL.createObjectURL()を実装していたから」と白石氏は語る。URL.createObjectURL()は動画を読み込み、動画に対する参照を文字列で返してくれる。そしてそのURLをvideoタグのSRC属性で指定すれば再生してくれるからである。

 このアプリを開発して「気づいたことが2点ある」と白石氏は言う。1点目は今回のようなアニメーションやゲーム開発では、Canvas、SVG、DOM+JS、DOM+JS+CSS3なのか、どの技術を使えばよりよくできるか、大きな影響を伴う設計判断が最初に必要になるということ。

 「MOGUTAROの場合、基本はDOM+JSで作り、虹の部分はCanvasを使った」と白石氏は明かす。春日井氏も「どの技術をどう使うか。これからのWeb開発者の力量を左右するポイントになる」と同調。

 またもう一つの気づきが、デザイナーとより協調して制作にあたる必要性が増すという点。通常、デザイナーは固定サイズでデザインする。しかしMOGUTAROはフルスクリーン。ブラウザによって雲の位置がずれたりするので、静止画と印象が変わってしまうこともあったという。そこでエンジニアとコミュニケーションを取り、画像を作っていったと、MOGUTAROのデザイナーは語る。白石氏も「インタラクティブなアニメーションを作るときは、デザイナーとの密なコミュニケーションは必須。やってみなければ分からないことも多かった」と付け加えた。

デザイナーと密にコミュニケーションが不可欠だと気づかされた「MOGUTARO eats files !」
デザイナーと密にコミュニケーションが不可欠だと気づかされた「MOGUTARO eats files !」

 「昨年3月、米国本社が開催したMIX12というイベントで『HTML5:Native to Windows』という発言があったように、HTML5はもはやIEに留まらない技術だ」と春日井氏。Windows 8ではMetroというタッチインターフェースを前提としたUIが搭載される。このMetroスタイルのアプリは、C++やXAMLといったWindowsの技術だけでなく、HTML5とJavaScriptでも開発できる。つまり、WindowsのネイティブアプリがWebの技術で開発できるようになるということなのだ。

 最後に春日井氏は「IE10 PPがダウンロードできるほか、HTML5やCSS3のソースコード、パフォーマンスの確認などができるWeb制作者向けの情報を提供する『IE Test Drive』、IEを含めWindowsで動作する主要ブラウザのHTML5の各要素の実装がどんな状況にあるのかが検証ができる『IE Testing Center』、時期尚早と判断されたAPIに関する情報を提供する『HTML5 Labs』などのサイトを用意。Webの開発者はぜひこれらのサイトを活用し、情報収集に努めてほしい」と語り、セッションを締めた。

次期OSWindows8ではHMTL5が本格的に実用技術となる
次期OSWindows8ではHMTL5が本格的に実用技術となる
お問い合わせ

日本マイクロソフト株式会社

マイクロソフト カスタマー インフォメーション センター

TEL:0120-41-6755(9:30~12:00、13:00~19:00、
土日祝日、弊社指定休業日を除きます)

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
【デブサミ2012】セッションレポート連載記事一覧

もっと読む

この記事の著者

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6455 2012/03/09 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング