今回のテーマは「インタフェース」

WebサービスやWebアプリケーションを提供する際、そのサービスが成功するか否かは"ユーザインタフェース"が握っている。もちろんシステム面も重要ではあるが、それを利用するユーザにとっては内部的なものよりも、まずは見た目の印象に強く左右される。

最近ではCSSのテンプレート、各種CMS向けのテーマ集やアイコン集など、Webサイトを彩る要素を提供するサービスが数多くある。それらを組み合わせたり、自分のWebサービス向けにカスタマイズしたりすることで見栄えは相当良くなるだろう。

そして今回はそのようなインタフェースに関わる部分をオンラインで設計できるWebアプリケーションやオープンソース・ソフトウェア(OSS)をご紹介したい。HTMLをコーディングするだけでは難しい魅力的なインタフェースを作り上げるのに便利な情報がそろっているはずだ。

今回紹介するOSS・Webアプリ
『Produle』 Flashアプリケーションをオンライン作成
『Atlas』 iPhoneアプリも作れるオンラインInterface Builder
『Ajax Visual Builder』 Ajaxインタフェースをドラッグ&ドロップで作成
『AsWing GuiBuilder』 Adobe AIRでActionScript向けUIを設計


Flashアプリケーションをオンライン作成

名称 Produle
URL http://www.produle.com/

『Produle』はWebブラウザ上でFlashのインタフェースを設計してFlashアプリケーションを作ることができる。一般的なFlashと異なり、タイムライン方式で開発するわけではないが、エフェクトなどを指定することでインタラクティブなFlashアプリケーションの作成が可能になる。

「Produle」のトップ

外部URLへ情報を渡してその結果を受け取ることも可能で、Web APIを使って外部のサービスとも連携できる。入力、画像、ドラッグ&ドロップなどのコンポーネントは多数用意されており、ドラッグ&ドロップ操作だけでインタフェースをどんどん作っていける。

ドラッグ&ドロップでFlashアプリケーションを開発できる

作業中にはプレビューで画面を確認できるほか、作り込めばかなり高度なアプリケーションも開発できそうだ。Flashを買わずともFlashアプリケーションが作れてしまう、そんなスゴさを実感してほしい。



iPhoneアプリも作れるオンラインInterface Builder

名称 Atlas
URL http://280atlas.com/

『Atlas』は、Apple製プレゼンソフト「KeyNote」のWebアプリ版のようなサービス「280Slides」を提供している280Northによる新たなWebアプリケーションだ。現在(2009年3月10日の時点)はクローズド公開の状態で、実際に試すことは難しいが、公式サイトに行けばデモムービーやプレゼンテーションを行なった動画を視聴することができる。

「Atlas」の公式サイト。執筆時点ではまだ公開されていない

それを見るとAtlasがどのような可能性を持ったものなのかよくわかる。Mac OS Xには標準でアプリケーションのインタフェースを設計する「Interface Builder」が提供されているが、AtlasはそれをWebベースで提供するもの。Ajaxアプリケーションをドラッグ&ドロップ操作で開発できる。それも280Slidesと同様に美しいなインタフェースを持ったものだ。

画面にスプリッターを配置することで、インタラクティブにペインの幅を調整することができる。ボタンにアクションを定義したり、スライダをつけて値を受け取るような仕組みもできる。何より、開発したインタフェースをiPhoneのネイティブアプリケーションに変換することもできるようだ。

まるでローカルアプリケーションのような画面だが、Webブラウザ内で動作している

元々280Northでは、Objective-JというObjective-CをJavaScriptで実装した言語が開発されていた。そのためMac OS Xネイティブなアプリケーションもできるようにするのではと言われていたのだが、一歩先んじてiPhoneへ対応するようだ。このWebサービスは期待が持てそうだ。



Ajaxインタフェースをドラッグ&ドロップで作成

名称 Ajax Visual Builder
URL http://www.sigmawidgets.com/products/sigma_visual/

『Ajax Visual Builder』は、Webブラウザベースで動作するAjaxインタフェースビルダー。Windowsの開発環境である「Microsoft Visual Studio」のようにドラッグ&ドロップでWebアプリケーションの開発を行うことができる。プロパティやイベントの変更や、JavaScriptを使ったアクションの定義などが可能だ。

コンポーネントは多数用意。ドラッグ&ドロップで配置できる

HTMLの制約をほとんど感じることなく設計できる。コンポーネントも単なるHTMLのものだけに限らず、プログレスバーやカレンダー、テキストエディタ、日付ピッカーなどの特殊なコンポーネントもすぐに利用可能。これらを使えば凝ったインタフェースも簡単に構築できるはずだ。

カレンダーを貼り付けた例。その場ですぐに実行して動作確認ができる

デザインが終われば、あとはJavaScriptやHTMLのコードはそのまま実際のシステムで利用できる。Ajaxを使ったWebサービスはもちろん、業務システムの画面設計などでも便利に使えるソフトウェアだ。



Adobe AIRでActionScript向けUIを設計

名称 AsWing GuiBuilder
URL http://www.aswing.org/

ActionScriptの開発はFlashを買わずともFlex SDKを使って行うことができる。実際、いくつかのオープンソース・ソフトウェアではFlex SDKを使って開発されている。だが、インタフェースのないものであればよいが、大抵のFlashアプリケーションには画面が必要だ。その点、Flex SDKでは画面の設計はできず、ActionScriptで画面をデザインするのは難しい。

そこで使いたいのが『AsWing GuiBuilder』だ。Adobe AIRを使って提供されているオープンソース・ソフトウェアで、GUIの設計に必要なコンポーネントを用意。AsWing GuiBuilderを使えばリッチなインタフェースが簡単に提供できるようになる。

エクスポートされるコード。ActionScriptから呼び出して利用する

Adobe AIRとあって、Flashのインタフェースを使ってFlashの画面をデザインすることになる。そのため、できあがった画面も違和感なく使えるはずだ。結果はActionScriptとして出力されるので、Flex SDKなどで取り込んで利用することになる。Flashアプリケーション開発者は、これらを組み合わせることで無料でリッチなインタフェースをもった Flashを作成できるはずだ。

オブジェクトを配置してプロパティを変更する

いかがでしたか?

WebブラウザやFlash上で画面を設計するというのはとても面白い。とくにHTMLの制限を超えて、ただドラッグ&ドロップでコンポーネントを配置していくだけだったり、アクションも簡単に定義できたりと、簡単なシステムであればほとんど時間もかからずにできてしまいそうだ。

Webアプリケーションやサービスは見た目が重視される。しかし、凝ったデザインに仕上げたくても、そのセンスがないとうまくはいかないだろう。FlashなどはHTMLと違ってバイナリファイルになってしまうので作成や修正が容易ではなく、プログラマがおいそれと手を出しづらい。だが、使いこなせればきっとユーザビリティの高いリッチなアプリケーションが構築できるようになるはずだ。

ドラッグ&ドロップだけで作成できるとなれば、AjaxやFlashを使った高度なシステムを構築する気にもなる。サービスの質を一歩向上させるためにも今回紹介したWebアプリケーションやオープンソース・ソフトウェアを活用してほしい。

著者プロフィール:MOONGIFT 中津川 篤司(なかつがわ あつし)

1978年生まれ。オープンソース紹介サイト「MOONGIFT」管理人。プログラマ、SE、ITマネージャを経て、オープンソースのビジネス活用を推進する。現在は独立し、Webサービスのコンサルティング、プロデュースを行う。