ADC MEETUP ROUND02 レポート SESSION1：The State of the Web

ADC MEETUPは、Adobe Developer Connection（ADC）と連動する開発者向けイベントだ。第2回目は、サンフランシスコで実施されている Adobe HTML5 Camp とのジョイント企画として、HTML5やCSS3、jQuery MobileなどのWeb標準技術をメインテーマに開催された。全6セッションの模様をスライドなどを交えて紹介していこう。

最初のセッションは、アドビ システムズ社のMike Chambers氏による「The State of the Web」。Chambers氏といえばFlashのエバンジェリストとして知られているが、今回のイベントのテーマはHTML5である。彼がどのような講演を行なうかに注目が集まる中、「今起きているWebの新しい動きについて、アドビが何を行なっているのか」という話からスタートした。

「『HTML5』という言葉は、当初の意味を超えて非常に広範囲を示す言葉として使われてしまっています」
単にHTML5仕様のことだけでなく、新しいものクールなものを示すキーワードとして使われたり、CSS3／SVG／メディアクエリーなどといった他の技術群でできることを含めた総称として使われたりと、現在HTML5という言葉が指し示すものは多いとChambers氏は語る。

HTML5が近年急速な変化を遂げている背景について、大きく2つの要素が関係しているという。1つ目の要素は、ブラウザーの競合だ。
「3年前はInternet Explorerが市場の70%を占め、Firefoxは随分差をつけられて2位という状況でした。しかし、今は Internet Explorer、Chrome、Firefoxの3種のブラウザーが地位を競い合っています。こうしたブラウザーの競合によって、次々と新しい革新が起きており、ここ1年半から1年くらいの間のモダンブラウザーの普及によってHTML5のサポート率も大幅に向上しました」

2つ目の要素は、モバイルデバイスの爆発的な増加だ。
「iPhone、スマートフォン、タブレットなど次々と新しいデバイスが登場しています。しかも、それらのデバイスに搭載されているブラウザーはWebKitベースのものが多く、幸いなことにHTML5もWebKitをベースにしています。つまり、多くのデバイスに対してコンテンツをクロスプラットフォームで提供できる基盤が整っていると言えます。様々なスマートフォンへの対応に迫られているデザイナーにとっては、良い状況となっています」

Chambers氏は続いて、数日前にアドビが公開したサイト「Expressive Web」について語った。Expressive Webでは、HTML5やCSS3の機能を使ったサンプルが12個あり、各機能に関する詳細な情報を提供している。ブラウザーのサポート状況、該当機能を利用した他の事例、チュートリアルや追加のリソース、フォールバック（代替手段）の情報も含まれている。

Chambers氏は、まだベータバージョンですがと前置きをした上で、このサイト制作を通じてアドビが学んだこととして、次のように語った。
「当たり前の話ではありますが、コンテンツが機能しないときどうするかという問題です。HTML5は、あらゆるブラウザーでサポートされているわけではないため、当然古いブラウザーで動かないことがあります。この問題を事前に考えておくことが大事だということです。制作プロセスの最後になってから、あわてて考えると大変なことになります」

実際、HTML5やCSS3はまだ仕様的にもブラウザー実装的にも完全ではない。Chambers氏は、例としてCSS3のトランスフォーム機能を挙げた。
「2Dのトランスフォームは約52%のブラウザーで閲覧が可能ですが、3Dのトランスフォームは約5%のブラウザーでしか見られないという現実があります」

こういった現実を踏まえた上で、どういったユーザーがコンテンツを見ることになるかを把握することが大事とのこと。つまり、新しい機能を使う場合は、開発の時間が必要となり、フォールバックをどうするか、クロスブラウザーの差分はどうするのか、どう実装するかといった問題を踏まえた上でコンテンツに組み込むことになる。場合によっては、まだ仕様がドラフトの段階かもしれない。そういった点を加味すると、あれもこれもと取り入れるのではなく、サイトにとって一番重要となる機能に絞り込む必要があるだろうとChambers氏は語る。

しかもリリース後は、高いレベルでのメンテナンスが要求されるのだ。今は機能していても、次のブラウザーのバージョンでは機能しなくなる可能性がある。実際にExpressive Webでは、ブラウザーのバージョンアップによって、動作していたものが動作しなくなったことがあったそうだ。

また、Expressive Webでのパフォーマンスにも触れられた。Chambers氏によると、HTML5を使ったサイトのパフォーマンスは、JavaScript側だけの問題ではないという。
「問題なのは、ユーザーの体感速度です。例えばCSSのアニメーションでは、レンダリングのスピードが問題になります。Expressive Webでは、画面遷移時のアニメーションを古いブラウザーやモバイルデバイスでは取り除いていくことで、パフォーマンスの向上を果たしました」

Expressive Webはモバイルにも対応しており、実際にAndroidやiPadで動いている様子が披露された。Chambers氏は、モバイルに対応したHTML5サイト開発のコツについて、次のように語る。
「モバイルをまず念頭において開発する必要があります。HTML5のアドバンテージの1つとして『あらゆるデバイスをカバーできる』という点が挙げられますが、これらのデバイスは解像度やインプットメソッド、パフォーマンスのプロファイルも違うのです。制限の多いデバイスでデザインを考えて、デスクトップのような高度なものにアップグレードしていく方が楽ではないでしょうか」

Chambers氏は、アドビのHTML5関連への取り組みとして、「ツール」と「表現力」の2つの側面から行なっているという。まず、HTML5に関する新しいツールだが、「Adobe Edge」と「Wallaby」というソフトウェアを開発中であるとのことだ。Adobe Edgeは、一見すると次のバージョンのFlashのように見えるが、HTML5のツールだという。モーショングラフィックスに強く、HTML5のアウトプット機能を持っている。

そもそも、現在使えるHTML5の開発ツールとブラウザーの能力には大きな分断があるとChambers氏は語る。例えば、HTML5のサイトでモーショングラフィックスなどを使う場合、現在のワークフローでは、既存ツールを使ってデザインをするが、それだけで完成には至らず、デベロッパーが非常に大きな役割を果たしているそうだ。

Expressive Webを作成する際、デザイナーがデザインツールを使って作成したコンテンツをJSON形式でインポートできるツールを作り、このJSONを通じてデザイナーとデベロッパーが役割分担をすることでかなりの効率化が図れたという。この経験やツールをベースに「Adobe Edge」が開発されているそうだ。
※Adobe Edgeの詳細はセッション6の記事へ

続いて紹介されたWallabyというのは、まだ実験中のソフトウェアだが、FlashのアウトプットをWeb標準技術に変換する機能を持っている。メインとなるターゲットは広告で、既に広告として使われているFlashをHTML5に変換するのに役立つとのことである。

他にもFlashをHTML5に変換するツールとして、Grant Skinner氏が開発した「Zoe」があり、Expressive WebのAudioコーナーでもこのツールを使っているという。会場では、ピザを取りにいくアニメーションをHTML5に変換するデモが行われた。仕組みとしては、Flashで作られた素材をスプライトシートという形でpng画像に変換し、canvas内でレンダリングしていくことで実現しているとのこと。

もう1つの取り組みである「表現力」として、まずjQuery Mobileへの取り組みについて語られた。jQueryは、JavaScriptのライブラリの中でスタンダードとも言える存在だ。アドビではjQuery専任のスタッフを置き、特にデータグリッドやモバイルでのタッチに関する開発に協力しているという。

最後にもう1つの「表現力」への取り組みとして、「CSS Regions」という技術が紹介され、カスタマイズされたWebKitを使って、CSSが自由な形状に沿って回り込むデモが行われた。
「アドビは、InDesignというソフトウェアを作っていますが、このソフトでは自由度の高いテキストレイアウトを実現できます。通常Webではこういう風にはいきません。リージョンが長方形で、制限が多く、コントロールがききません。そこで我々は、InDesignのように自由にテキストレイアウトを行なうための仕様であるCSS Regionsを開発し、W3Cに提案しました」

また、CSS Regionsには「リージョンリンキング」という仕組みがあり、各リージョンをリンクさせて、ウインドウサイズによる周り込みと、段組みを自動でコントロールすることができる。

CSS Regionsでは、回り込みの形式として「アービタリーテキストコンテナ（任意のテキスト領域）」と「アービタリーテキストエクスクルージョン（任意のテキスト排除領域）」という機能があるという。アービタリーテキストコンテナは、リージョンの形状を任意に定義する機能で、柔軟な回り込みを実現することができる。アービタリーテキストエクスクルージョンは、テキストが入らない領域を定義する機能で、長方形のリージョンの一部をテキストが侵入しないようにすることができる。デモではハート型のテキスト回り込みが実現できていた。

Adobe Labsでは、Adobe Edge、Wallaby、CSS Regionsを配布しているので、ぜひ試していただきたい。

• Adobe Edge
• Wallaby
• CSS Regions Prototype

• ADC MEETUP ROUND02 レポート
  • SESSION1：The State of the Web
  • SESSION2：Adobe Dreamweaver CS5.5 and HTML5 & jQuery Mobile
  • SESSION3：Dreamweaverと3つのビュー : HTML5時代の活用方法
  • SESSION4：Dreamweaver CS5.5で作るjQuery Mobileを組み込んだスマートフォンサイト制作
  • SESSION5：Chromeで変わるWebサイト開発：Developer Toolsのご紹介
  • SESSION6：Adobe Edge Demo