このページの本文へ

UIデザインを効率化する「Thermo」に注目

【Adobe MAX 2007 Vol.4】RIAを支える新サービスが目白押し 基調講演Part.2

2007年10月03日 20時16分更新

文● 編集部 佐久間康仁

  • この記事をはてなブックマークに追加
  • 本文印刷

 2日(現地時間)の午前中に行なわれた「Adobe MAX 2007」の2回目の基調講演では、RIAを陰から支えるという3つのカテゴリー――サーバー、サービス、ツールが紹介された。特に最後に披露されたUI(ユーザーインターフェース)デザインツール「Thermo」(サーモ)は、デザイナー/開発者間でのやりとりにかかっていた時間を大きく短縮してくれそうだ。

講演を行なったCTOのケビン・リンチ氏 CEOのブルース・チゼン氏
2回目の基調講演も、司会進行は米アドビ システムズ(Adobe Systems)社のCTO(最高技術責任者)のケビン・リンチ(Kevin Lynch)氏(写真左)が務めた。この日はCEO(最高経営責任者)のブルース・チゼン(Bruce Chizen)氏も壇上に上がったが、4000人の観衆に挨拶するにとどまった

Photoshopのレイヤー構造/属性を
引き継いでUIをデザインするThermo

 Thermoとは、GUIベースでUIをデザインすると自動的にMXML(Flex用のXMLファイル)を生成してくれる、HTMLタグやXMLコードをなるべく編集したくないデザイナー向けのツールだ。それだけならすでに同様のツールが存在するし、例えばアドビ システムズ(株)の「Fireworks」と「Flex Builder」を組み合わせても同様のことができるだろう。

現在開発中のThermoの画面 現在開発中のThermoの画面

 しかしThermoでは、「Adobe Photoshop」や「Adobe Illustrator」などのデザインツールで作成した画像を、「下書き」としてレイヤー構造を直接読み込み、ボタンや検索窓などに割り当てたMXMLコードを生成できるというところが大きく異なる。

Photoshopで作成したウェブページのイメージ Photoshopで作成したウェブページのイメージ。画像ひとつずつがアルバムを購入するためのボタンの役割を果たし、右上には検索窓があるというシンプルなもの
このPSDファイルをThermoに読み込むと、レイヤー構造を自動的に判別し、背景に重ねた画像レイヤーをボタンとして登録する このPSDファイルをThermoに読み込むと、レイヤー構造を自動的に判別し、背景に重ねた画像レイヤーをボタンとして登録する。画面のダイアログボックスでチェックボックスを外せば、背景の一部として登録することもできる

 例えば、ボタンになる画像/デザインと背景をレイヤー構造で重ね合わせ、右上には検索窓としてダミーのネーム(「ここに文字を入力」など)をテキストレイヤーとして重ねたPSDファイル(Photoshopのネイティブファイル)を作成する。従来は、この画像をデザイナーと開発者が共有しながら、デザイナーは「この部分はボタンなので、マウスのロールオーバー(ポインターが重なった状態)ではボタンが反転したり文字列が表示される」などと説明し、それを受けて開発者がコーディングするというプロセスが必要だった。

入力した文字列をThermo上で編集できる テキストレイヤーについては、入力した文字列をThermo上で編集できる。Flash形式に書き出した後は、この部分を選択して任意の検索キーワードを入力する、という動作が行なえる
マウスポインターによる動作を、Flashと同様にタイムラインで設定できる 編集結果が自動的にMXMLコードとして生成される
マウスポインターを重ねた際にどう表現するのかを、Flashと同様にタイムラインで設定できる。画面はサムネイル画面とタイトル(文字列)を大きく表示し、タイトルにはドロップシャドーを付けるという設定だこれらの編集結果が自動的にMXMLコードとして生成される。プレビューしたい場合はSWF(Flashファイル)に書き出すこともできる

 Thermoでは、こうしたボタンの動きや文字列の入力枠などの設定まで、GUIベースで行なえる。作成結果はMXMLファイルのほかSWF(Flashファイル形式)で保存でき、ウェブブラウザーなどでプレビューも可能だ。つまり、デザイナー自身が動きのあるサンプルページを作成でき、開発者にデザインの意向・意志をより明確に伝えられるというわけだ。

2つのコミュニケーションツール
Pacifica&CoCoMo

 “伝える”ためのサービスとして、同社は2つのコミュニケーションツールを開発していることも明らかにした。ひとつはウェブブラウザーベースで1対1の通話・通信を行なう「Pacifica」(パシフィカ)。もうひとつは、現在「Adobe Acrobat Connect Professional」として提供している製品の上位版として開発中の「CoCoMo」(ココモ)だ。

 Pacificaは、同社がイチから作り始めたというコミュニケーションツールで、Flash Playerを組み込んだウェブブラウザーをクライアントに、汎用のSIP(Session Initiation Protocol)サーバー経由で接続する。NAT/ファイアウォールを超えてチャット、ボイスチャット、画像共有などが可能なほか、ビデオチャットやP2P(ファイル交換)の機能も実装する。AIRアプリケーションへの展開も予定している。今月中には関係者向けに先行して“プライベートβ版”を提供する予定だという。

 一方のCoCoMoは、Acrobat Connect Professionalの機能を柔軟に追加・拡張できるよう改良したものだ。Flex Builderを使ってMXMLコードを変更、コンパイルし、容易に機能を追加・変更できるという。講演ではまずビデオチャットで会話を始めて、途中からホワイトボード機能で画像やアプリケーションを共有するという手順をデモして見せた。

 このほかにも、RIA(Rich Internet Application)環境の開発を効率的に行なうために、参照・編集権限が設定可能なファイル共有サービス「Share」(同名のファイル共有ソフトとは別物)や、ソースコードを含むドキュメントの閲覧・編集権限や期限を管理できるサーバー製品群の総称「Adobe LiveCycle ES(Enterprice Suite)」などが紹介された。

LiveCycleは従来、PDF形式のビジネス文書を適切で安全に運用するソリューションとして提供されており、Adobe MAXのようなクリエイター向けイベントとは縁遠い製品と思われがちだった。しかし、PDFがファイルコンテナ機能を持ったことにより、画像やMXMLコードなどをまとめて管理・運用できることから、多人数が参加してのRIA開発プロジェクトなどにも活用してほしい、というのが同社の狙いだ。

「LiveCycle ES」を構成する機能を駆け足で紹介した 「LiveCycle ES」を構成する機能を駆け足で紹介した
「LiveCycle ES」を構成する機能を駆け足で紹介した。右の画面は、PDFファイルの閲覧権限を分かりやすく示したもので、LiveCycle ESで権限管理したPDFファイルをAdobe Readerなどで開こうとすると、まずそのユーザー(ID/パスワードで認証)に参照権限があるか、さらに参照可能な期間であるかを確認し、その上で権限がある場合のみ開ける。Adobe Acrobatシリーズのデモでは何度も見ているが、Adobe MAXでクリエイターに紹介するのは珍しいことだろう

 これら製品群の開発発表から、アドビ システムズが考えるAIRのビジネスモデルが多少見えてきたようだ。これについては次回レポートする。

カテゴリートップへ

注目ニュース

最新記事

ASCII.jp特設サイト

ASCII.jpメール デジタルMac/iPodマガジン

ASCII.jp RSS2.0 配信中

ピックアップ

富士通パソコンFMVの直販サイト富士通 WEB MART