Tweet

連載インデックスへ

【Chrome+HTML5 Conferenceレポート 】
HTML5づくしの1日

グーグルとHTML5 Developers JPが開催した「Chrome+HTML5 Conference」の模様を紹介する

　グーグルとHTML5 Developers JPは、8月21日、六本木ヒルズ内にあるグーグルの東京オフィスにおいて、HTML5関連技術勉強会の第20回目記念カンファレンスとなる「Chrome+HTML5 Conference」を開催した。

　「Chrome+HTML5 Conference」は、ディベロッパーのみでなく、HTML5初心者〜中級のマークアップエンジニア・デザイナも対象としたイベントだ。

　HTML5をイチから学べる2トラック・合計12のセッションと、2つのハンズオンが実施された。

　また、「普段の勉強会は男性ばかりで参加しづらい……」という女性も気軽に参加できるよう、女性枠も用意された。

　ここでは、筆者が参加したセッション・ハンズオンを中心に、紹介しよう。

　基調講演

基調講演はHTML5 Developers JPの白石氏と、グーグル株式会社の及川氏が登壇

　HTML5 Developers JPの白石氏は、HTML5 Developers JPの活動紹介や、「世界のWebシーンを日本がリードする」という日をもたらすための名称変更などを発表した。

グーグル株式会社の及川氏はまず、国内におけるHTML5の状況について説明した

　国内ではHTML5関連書籍が多数出てきたが、HTML5を活用した有名サービスが多数出てきた海外とは違い、日本ではパッと思い浮かぶHTML5活用サービスがまだないと説明。しかしアップルのAppStoreに代表されるように、世界へ開かれたストアがあれば国内のアプリやサービスを海外で知ってもらい使ってもらうことも可能だとして、ぜひChrome Web Storeを活用して海外へ打って出てほしいとアピールした。

　Chrome Web Store入門

mixiのあんどう やすし氏によるセッション

　あんどうやすし氏はまず、Chrome Web Storeの概要説明から始まり、「Yahooも楽天も2chも、MOSAICのころのウェブページから大きくは変化していない。もし、現在のような高機能なウェブが初めから存在していたとしたら？ という視点に立ち、アプリごとに明確で主体的な目的を持ち、目的に応じた画一的ではないUIを持つべきなのではないか？」という考えを紹介した。

　また、ChromeにHosted Appをインストールしたとしても、特定のURLにすぐアクセスできるという技術的な仕組みの点ではブックマークと何ら変わりがないが、新規タブ画面からアイコンをクリックするだけで即座に呼び出せるという見た目・使い勝手からすると、一般ユーザーにとっては重要な意味を持つ仕組みだと指摘した。

　Debugging on Chrome Developer Tools

グーグル株式会社の北村氏による、Chrome Developer Toolsに関するセッション

　DevToolsは非常に速い進化を続けており、例としてGDD2010 Tokyoで出された3つのリクエストが既に実現されていることを紹介した。

　また、DevToolsの基本的な使い方を紹介しつつ、Elements PanelでCSSなどを変更すると、対応するファイルがResources Panelで自動的にバージョン管理される便利な機能などを紹介した。

　JavaScript初心者のSVG／Canvasアニメーション入門

羽田野氏によるSVG/Canvasに関するハンズオン

　まずはCanvasとSVGが生まれた経緯などを説明。そしてそれぞれの使い方、基本的なコーディング方法を解説した上で、その発展形を参加者が各自で作り込んでいく形式で進められた。

　羽田野氏によって示されたのは、１つのサークルが2秒程度の時間をかけて1回だけ拡大アニメーションするサンプル。このサンプルを基に、多数のサークルが同時に拡大アニメーションするスクリプトに改造するというお題が設定された。

　このハンズオンで筆者が作成したのが以下のCanvasアニメーション。

Canvasのサンプルをさわってみた

　同時に2000個のサークルを描画してみたが、それなりにスムーズに動いてしまう点に驚いた。Canvasのポテンシャルの高さを感じられるハンズオンとなった。

　CSS3のハンズオン

産経デジタルの一條氏によるハンズオン

　CSS3を使ってのUIパーツ作り、そして少量のJavaScriptで動きを出すコーディングの解説と練習といった内容のハンズオンだった。

　以下は、ハンズオンの中で紹介されたサンプルのスクリーンショット。

　いずれもCSS3+JavaScriptによる表現力の高さがうかがえる内容だった。

　ライトニングトーク大会

8組のライトニングトークが行われた

　発表者8名によるライトニングトーク大会。ここではその中からいくつかのトークを紹介する。

□　石本光明：緊急地震速報 by Extensionを開発して！

産経デジタルの一條氏によるハンズオン

　3月の震災が起こった際に「自分が作った何かで、人の役に立てるのではないか？」と考えたのが開発のキッカケになったことを紹介。

　内部の仕組みはWebSocketとWeb Notifications/Desktop Notificationsを使って実現したとのことだった。

□　小俣 博司：HTML5 for Mobile

　現在スマートフォン業界で行われているのとは逆の発想、すなわち、HTML5+CSS3+JavaScriptで作られたアプリをFlashに変換する仕組み「HTML5 for Mobile」を作ったとのこと。

　これからもone webを目指して頑張っていくので、「こんな機能が欲しい」「こんなデバイスで動かしてほしい」などの要望があれば、Facebookに意見を書き込んでほしいとのことだった。

　以下がそのファンページのアドレス。気になる方はぜひアクセスしてみてほしい。

　また、当日使われたスライドは以下のアドレスからチェックすることができる（HTML5 for Mobile）。

□　原田定治：学生向け会社説明会でHTML5をもてあそんでみた

　CanvasとWebSocketを使って、スマートフォンから手書き文字で回答できるクイズの仕組みを作った。

　今回のライトニングトークでも回答者用のアドレスをスライド内で紹介し、先着6名限定でミニクイズ大会が開催された。

　凝ったスライド、そして見ている人を楽しませる工夫で、非常に盛り上がったライトニングトークであった。

　まとめ

　デザイナ向けとエンジニア向けのセッションが用意されていたり、ハンズオンも開催されたりと、非常に充実した内容、まさに「HTML5尽くし」の1日であった。すべての資料がWebサイトに掲載されいてるので、興味のある方はぜひ参照してほしい。

　いくつかのセッションでも言及されていたが、ウェブアプリやHTML5が活用されていくにつれて、デザイナとエンジニアのコラボレーションの重要性はさらに高まっていくであろう。そういった意味で、今回のようなイベントが開催されることには大きな意義があるのではないかと感じた。

著者プロフィール akio0911 ハイパーなアプリクリエイターの皆さんに、アプリのメイキング話をインタビューしていく番組「ハイパーアプリクリエイターズ」の中の人。「拡張現実ライフ」というARに関する個人ブログもやっています。いまはSONYのNEX-5に夢中。

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード