[速報]Adobe MAX 2010。HTML5とjQueryに対応したWebアニメーションツール「EDGE」などを発表

2010年10月26日

米アドビシステムズは、イベント「Adobe MAX 2010」を10月25日(日本時間25日深夜)からロサンゼルスで開催しています。

いま同社が力を入れているのがモバイルやテレビといった、さまざまなデバイスへの対応。これを同社は「マルチスクリーン対応」と呼んでいます。25日深夜に行われた基調講演では、iPadやAndroidなどさまざまなデバイスに対応したHTMLやFlash用の新しい開発ツールを披露しました。

その基調講演の内容を紹介しましょう。いちばんの注目は、HTMLやJavaScriptなどFlashを使わずにタイムラインを用いて簡単にアニメーションが作成できる「Edge」の発表です。従来Flashの領域だったインタラクティブな機能が徐々にHTML/CSS/JavaScriptへ置き換わろうとする一方で、Flash/AIRにはマルチデバイスに対するプラットフォームという役割が強調されようとしています。

モバイルデバイスの性能向上

アドビCTOのケビン・リンチ氏登場。

fig

PCの性能は18カ月ごとに倍になってきた、そしていま起きているのはモバイルデバイスの性能向上だ。

fig

性能だけではなく通信のバンド幅も広がっている。こうしたマルチデバイス、マルチスクリーンへの対応を紹介していきたい。

fig

マルチスクリーンへの対応

私たちのWebサイト「Flash Player Developer Center」は、CSS3の機能であるMedia Queryを用いて、Webブラウザの横幅に応じてコンテンツのレイアウトが変わるようになっている。

PCで見ると普通のWebサイトが、画面幅の狭いモバイルデバイスで見ると、コンテンツは1列になって縦スクロールだけでコンテンツが見られるようになっている。

fig

このように、マルチスクリーンへの対応では自動的なコンテンツの再フォーマットが必要で、アドビではこのためのオーサリングの強化をしている。

Dreamweaver CS5のアップデートバージョンでは、その新しい機能が反映されている。マルチスクリーンプレビューの画面で、複数の横幅のプレビュー表示ができる。この画面で横幅ごとにCSSを設定できる。

fig

設定後は、画面幅に応じてメニューの位置が変わったことがお分かりだろう。このように容易にマルチスクリーンに対応したWebサイトをデザインできるようになる。

fig

jQueryのコードを出力するアニメーションツール「Edge」

HTML5とCSSなどでWebのアニメーションを作るための、コードネーム「Edge」と呼ばれているプロジェクトも進行中だ。Edgeでは、アニメーションをタイムラインで設定することができる。

fig

タイムラインの最初の位置で、アニメーションのオブジェクトの位置を設定し、最後の位置でもオブジェクトの位置を設定すれば、途中は補完されて自動的にオブジェクトが最初から最後の位置へ移動するアニメーションが作れる。

アニメーションはJavaScriptライブラリのjQueryを使って実現しており、EdgeはCSSやjQueryのコードなどを出力する。

ログ分析ツールのSiteCatalystには「HTML5 Features」タブが新設される。これで、Webサイトの訪問者のどれくらいがHTML5(やCSS3)などの機能に対応しているのかを知ることができる。

fig

電子出版への対応

アドビは電子出版を出版社と協業して進めている。マーサ・スチュワート氏をステージに迎えよう。

fig

電子雑誌のマーサ・スチュワート・リビングをiPadでデモンストレーション。表紙の花が動画でゆっくりと開いていく。さまざまなタイプフェイスやインタラクティブ機能をデモ。

fig

続いてHTMLのデザインフィデリティ(デザインの忠実性)について。HTMLで作成された電子書籍の「Reader's Digest」。ページネーションもできている(注:EPUB製か?)。iPad、Andoroidなど大きさや縦横比の異なるデバイスでも忠実に表現することを実現している。

fig

さらに今、HTML用の「ダイナミックラッピング」というコードを開発中だ。これは、テキストが画像をよけてダイナミックにフローするレイアウトを実現できる。手で画像を移動すると、自動的にテキストフローのレイアウトが画像をよけて変化する。

fig

オープンソースのWebKitにこのコードを入れるつもりだ。これによりHTMLのデザインフィデリティを実現できる。

そしてInDesignをコアにした「Adobe Digital Publishing Suite」を発表する。これによりコンテンツの作成、電子書籍の作成、流通、販売、そしてログの分析までができる。

fig

このSite Catalystでは、電子書籍のページを読者が読んだ順番などまで解析できる。

fig

ベータ版は今日から開発者向けに公開する。

テレビにAdobe AIRが搭載

続いてはビデオだ。ここにあるのはGoogle TV。

このGoogle TVにはFlash Playerが搭載されており、Amazon Video on DemandのビデオライブラリからHDストリームをネット経由で受けて映画を見ることができる。

fig

さらに「AIR FOR TV」によって、テレビの上でAIRアプリケーションも動作する。このアプリケーションはテレビのリモコンでナビゲーションして、トレイラーを選択したり、映画そのものではなくさまざまな情報を見ることができる。

AIR FOR TVはテレビメーカー向けにリリースしており、サムソンが最初のバートナーだ。ブルーレイプレイヤーやテレビに組み込まれる。

fig

基調講演はこのあと、CMSベンダの「Day Software」を買収してCMS機能が追加されたLive Cycle Enterprise Suite 2.5、そしてFlash上でのゲームに関連してソーシャルゲームへの注力やFlash PlayerのGPU対応などについて紹介が行われました。

あわせて読みたい

HTML/CSS JavaScript Web技術 Adobe Adobe Air Adobe Flash




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本