Adobe Developer Connection(ADC)と連動する開発者向けイベント「ADC MEETUP ROUND3」では、General Sessionの他にHTML関連情報とFlash関連情報の2つのトラックが設けられた。HTMLトラックのSESSION2では、アドビ システムズ社のテクニカルエバンジェリスト太田禎一氏より、HTMLに関連したアドビの取り組みや新ツールの紹介が行われた。

1 HTML5に賭け金倍額!

HTML5のサポートが注目されているが、実際にはアドビはDreamweaverをはじめとした各種ツールで継続的にHTMLのサポートを行ってきた。つまり、HTMLとアドビの関係は今に始まったことではない。ではなぜここ最近で特にHTMLサポートを強くアピールするようになったのか。太田氏によれば、「これからHTMLに対してより多くのリソースをかけていく、という意気込みの表れ」だという。

図1.1 『賭け金倍額!』という強い意気込み (Photo : O Palsson http://www.flickr.com/people/opalsson/)

もちろん、このHTML5サポート強化にははっきりとした理由がある。その1つが、モバイル端末からのインターネットアクセスへの対応である。太田氏は、「AtatCounter Global Stats」や「When can I use...」などによる統計情報を見せながら、HTML5の普及状況を説明した。それによると、モバイル端末からインターネットにアクセスしているユーザの割合はまだ全体の5%弱ではあるものの、モバイル端末用のWebブラウザーのHTML5のサポート状況はすでに十分現実的な段階にきている。この状況のまま進めば、モバイルインターネットの世界はHTML5が主役になっていく可能性が高い。

モバイルだけでなく、デスクトップの世界でもHTML5への対応は急速に進んでいる。最近のモダンブラウザーが自動更新機能を備えているため、世代交代が順調に進んでいるのがその理由ではないかと太田氏は指摘する。つまり、コンテンツ制作者がデスクトップとモバイルの両方をサポートする上で、HTML5がよい選択肢になるというわけだ。

2 Web標準への提案:CSS ShadersとCSS Regions

さて、アドビが正式にHTML5に対応したツールをリリースし始めたのが2010年春頃からである。DreamwaverやIllustratorをはじめとするCreative Suite製品でHTML5対応の拡張を行ったほか、jQueryやWebKit、PhoneGapやTypeKitへのコミットメントを通して普及を後押ししている。それと並行して、Web標準へのコミットメントによる貢献も積極的に行っている。太田氏は、その一環として同社が提案している2つのCSS拡張規格を紹介した。

1つは画像や動画のコンテンツに対して紙のようなエフェクトをつけることができる「CSS Shaders」だ。これを使えば、JavaScriptや特別なプラグインを用いることなく、CSSの指定だけで、コンテンツを折り畳んだり、曲げたり、ひらひらと舞い落ちるように動かしたりといった表現が可能になるという。対象となるコンテンツに対する変更は一切必要なく、動画やSVGアニメーションなども再生したまま折り畳んだりすることができる。

CSS Shadersは、先進的な機能の実装を目的としたオープンソースブラウザーChromiumを使うことで試すことができる。また、アドビではCSS ShadersのコンテンツをGUIで作成し、CSSコードを生成する「The CSS Shaders Studio」なるツールの開発も進めているとのことだ。

もう1つのCSS規格は「CSS Regions」で、これはテキストの複雑な回り込みを表現できるようにするためのもの。多段構成や背景画像に合わせた回り込みなどを表現できるほか、画面サイズに合わせた自動調整にも対応する。これによって雑誌のような複雑なレイアウトをCSSだけで実現できるという。

Adobe LabsのCSS Regionsのページでは、プロトタイプやGoogle Chrome/WebKit用のサンプルファイルが公開されている。その他にもブラウザーベンダーで実装が進められているとのこと。アドビではWebブラウザーだけでなくInDesignなどのツールでもこの技術を利用していく予定だという。

3 HTML5/CSS3を活用する2つの新ツール

HTML5でのコンテンツ制作をサポートする新しいツールも登場している。太田氏はまずオーサリングツール「Adobe Edge」を使ったアニメーション作成のデモを紹介した。GUI操作だけでHTMLやJavaScriptによるインタラクティブなコンテンツを作成できるもので、現在Adobe Labsにてpreview 3が公開されている。この最新版では、jQueryやJavaScriptを使ってアクションを追加することができ、よりインタラクティブなコンテンツの作成を行えるようになった。

作成したアニメーションはJavaScriptとして組み込まれるため、HTMLの記述には影響させずに利用可能だという。読み込まれるライブラリは、jQueryライブラリや、そのEdge用拡張、独自のJavaScriptアニメーションエンジンなど。Edgeはまだ進化の途中であり、今後もパブリックプレビューを継続しながらユーザの視点を取り入れて発展させていくとのこと。正式リリースは2012年中を見込んでいる。

もう1つの注目ツールは、コードを記述することなくHTML5とCSS3によるWebサイトの構築を行える「Adobe Muse」だ。現在はAdobe Labsでbeta 4.1が公開されている。今のところは固定したレイアウトしか作ることはできないが、完全にCSSのみでレイアウトを表現できる点が大きな特徴。MuseはこのようにWebサイト作成ツールとして利用できるほかに、アドビのCMSサービスであるBusiness Catalystの画面制作ツールとして利用する方法もある。

Museのもう1つの特徴は、「プラン」->「デザイン」->「プレビュー」->「公開」という一連の流れでWebサイトを構築する点である。これはInDesignやIllustratorなどによるコンテンツ制作と同じメタファーであり、初めてでも違和感なく使うことができるのではないか、と太田氏は語っている。

4 Touch AppsとCreative Cloudの狙い

Webサイトの構築という観点では、MAX 2011でもう1つ興味深いツールが発表された。Adobe Touch Appsの1つ「Adobe Proto」だ。ProtoはタッチアクションでWebサイトのワイヤーフレームを作ることができるタブレット向けアプリケーション。成果物はCreative Cloudを経由してCeative Suiteの各種ツールに取り込むことができる。

Protoに限らず他のTouch Appsにも言えることだが、アドビは何もタブレット端末だけで全てを完結させようとしているわけではない。Touch Appsの狙いは、これまで家やオフィスに限定されていた作業環境を、タブレットによってカフェなどのオープンな場にも持ち出せるようにすることだと太田氏は説明する。そして制作したコンテンツを様々なツールで共有して活用していく、そういう世界観をCreative Cloudを中心として実現したいのだという。

関連記事

ADC MEETUP ROUND03 レポート