RIA用JavaScriptフレームワーク×12
MOONGIFTでは技術コンサルティング、Webサイトプロデュース、テクニカルアドバイザリー、ITレポートサービスを承っております。ご用命、ご質問などはinfo@moongift.jpまでお気軽にどうぞ!
2000年当時のJavaScriptと言えば、文字を動かしたり簡単な入力チェックを行う程度のあくまでも補助的な代物に過ぎませんでした。その状況を一変したのがGmailであり、Web2.0と言われるWebアプリケーション群の登場です。WebアプリケーションはJavaScriptを多用し、Ajaxのような技術を組み合わせることでWebブラウザ上でローカルアプリケーションのような操作を可能にしました。さらにそうしたJavaScriptライブラリはJavaScriptにおける最大の問題であったWebブラウザごとに異なる動作を吸収し、開発者が容易に多数のブラウザに対応したWebアプリケーションを開発できるようにしました。最近のWebサイト開発でJavaScriptを使っていないサイトを探す方が難しいくらいです。
各種イフェクトやブラウザ間の誤差を吸収するライブラリは多数存在しますが、今回は特にWebアプリケーションを開発するためのライブラリをリストアップしてみます。Webアプリケーションを開発する上でAjaxやイフェクトを容易に開発できるのはもちろん大事ですが、それ以上にUI（ユーザインタフェース）がリッチである必要があります。それにより利用者が単なるWebサイトとは違う印象を受け、情報を発信するだけのWebサイトからツールとしてのWebアプリケーションへと進化することができるはずです。
YUI Library
http://developer.yahoo.com/yui/
YUIは米Yahoo!の開発しているUIライブラリです。薄いブルーが基調になっており、あまり派手なデザインの置き換えはしません。基本はHTMLの描画に、YUIのCSSを組み合わせつつ、JavaScriptでイフェクトを行うという仕組みになっています。そのためデザイナーの方にとっても使いやすいかと思います。Yahoo!らしく細かな点にも気が配られており、3ペインの画面構成を実現したり、その境になるフレームをドラッグで移動させることができます。カレンダーやスライダーと言ったコンポーネントも多数用意されているのも大きな利点です。
jQuery UI - Home
jQuery UIはJavaScriptライブラリとして有名なjQueryをベースにUI開発に特化したコンポーネントやテーマフレームワークを組み合わせたものになります。ドラッグアンドドロップ、リサイズ、ソートといったアクションを実装したり、ダイアログやスライダ、タブ、プログレスバーと言ったウィジェットも用意されています。イフェクトはjQueryの得意とする所で消す、表示する、クラスを追加するまたは削除すると言ったようなイフェクトが多数利用できます。もちろんjQueryのプラグインも使えますのでjQueryベースに開発されているWebアプリケーションの場合は最も導入が容易になりそうです。対応ブラウザもIE6以上、Firefox2以上、Safari3.1以上と幅広く対応しています。UIの細かな定義は用意されていませんが、コミュニティベースで開発されたテーマが多数登録されています。それによって容易にインタフェースを作り替えたり、ユーザにテーマセレクト機能を提供できるようになっています。
Home | The Dojo Toolkit
Ajaxフレームワークとして有名なDojoもまた、リッチユーザインタフェース開発のためのライブラリを提供しています。100%テーマ展開可能なライブラリとなっています。Dijitというネーミングになっています。メニューを角丸にしたり、タブ、ボタンメニュー、ツリー、プログレスバー、カラーピッカーなど多数のウィジェットが用意されています。よりWebアプリケーションを高機能にしたい場合はDojoXというライブラリを用いることもできます。こちらはグラフや3Dオブジェクトを扱うことができるようです。インタフェースはYUIに似た色合い、作りになっています。フレームを使えば3ペインのメーラーのような仕組みも開発できます。
qooxdoo » Home
qooxdooはRIA（リッチインターネットアプリケーション）を開発するためのフレームワークであり、まさにWebアプリケーションを作りたい場合に検討したいフレームワークです。テーブル表示、フォーム、ツリー、サーバ/クライアント間通信、テーマ、ローカライズ、ドラッグアンドドロップ、HTMLエディター等のウィジェットが用意されています。テーマはサポートされていますが、デフォルトのテーマはLinuxのX Window的な表示とアイコンになっています。色合いもグレーをベースにしているので、あまりWebアプリケーションという雰囲気がしません。本格的なWebアプリケーションを構築したい時に使えそうです。
JavaScript GUI Framework - Ample SDK
Ample SDKはWebベースのGUIフレームワークを標榜しています。GUIの構築として、他のライブラリのようにHTML+CSSを直接使うのではなくXULを用いているのが特徴です。XULはXMLベースの画面デザインマークアップ言語になります。開発はMozillaが行っています。そのためXULはFirefoxやThunderbirdといったMozillaのソフトウェアが使うものになるのですが、Ample SDKを使えばWebブラウザ上で使えるようになります。かつIEやSafariといったブラウザにも対応しています。その他SVGを非対応ブラウザでも表示できるようにしたり、SMILというアニメーションや動画、静止画といったマルチメディア定義用言語にも対応します。
Echo Web Framework
Echoはかなり大型なWebアプリケーション開発フレームワークで、JavaのSwingやEclipse SWTを参考に開発されています。大型であるためにWebアプリケーションフレームワークとしては若干動作が重たい部類になってしまいます。Webアプリケーションに留まらない、Web OSのようなものを構築される際には役立ちそうです。壁紙に対応していたり、メニュー、アコーディオン、WYSIWYGエディタ、タブなど多数の機能が提供されています。一つのWebアプリケーションを提供するには向きませんが、グループウェアや社内ポータルのような多数の小さなアプリケーションが組み合わさる複合的なWebアプリケーションを提供する際には役立ちそうです。
SproutCore
SproutCoreはMac OSX風インタフェースを実現するRIAフレームワークです。上品なインタフェースを開発できることもあり、Appleの提供するクラウドサービスMobileMeでも採用されています。Mac OSX風のWebアプリケーションを提供したいと考えるならば良い選択肢になるのではないでしょうか。MVCを考慮して開発されているので大型なWebアプリケーションを構築する際には良い選択肢になるのではないでしょうか。Appleでも採用されているというのはとても大きなアドバンテージになります。ただしApple風というのがAppleユーザ以外にとって使いやすい、または見慣れたインタフェースであるかというとちょっと違うので、その点は注意する必要があります。
SmartClient Ajax RIA System - Isomorphic Software
SmartClientは派手すぎず、とは言っても十分な機能とウィジェットが提供されたRIAフレームワークです。Googleカレンダーのような表示や、リッチなテーブル表示、データベースブラウザのような機能、バリデーション、ツリー表示、グラフ、ドロー機能など他のRIAでは見られないような機能も提供されています。テーマ機能もあります。プロジェクト管理や企業向けのシステム等で導入するとユーザビリティは高そうです。殆どローカルアプリケーションと同じように使いこなせるのではないでしょうか。
rialto
http://rialto.improve-technologies.com/wiki/
Rialtoはリッチなインタフェースを提供しますが、アイコンが大きめであったり、フレームの区切りが特徴的になっていてWebベースであるという雰囲気が感じられます。その意味ではWebアプリケーションに向いたフレームワークでもあります。あまりローカルOSに似せすぎるとローカルアプリケーションでは容易に実装できる機能が提供できないために逆に不自然さや使いにくさを感じてしまうことがありますが、Rialtoくらいの経ち位置であればそれほど不自然さは感じずにWebブラウザ上では便利な機能と感じられそうです。カレンダーの入力補助やツリービュー、タブ、スプリッター等のウィジェットが利用できます。
Google Web Toolkit
http://code.google.com/webtoolkit/
Google Web ToolkitはEclipseと連携して使うこともできるJava向けのWebアプリケーションフレームワークで、JavaScriptの記述なしにWebアプリケーションを開発できるフレームワークです。そのためJava開発においては最も利用しやすいRIAフレームワークと言えそうです。作りとしてはアコーディオンやフレーム、ツリー、テーブルといった機能が提供されていますのでメーラーくらいは十分に開発ができます。その他Google WaveをはじめとするGoogleプロジェクトでも活用されています。
Ext JS
Ext JSは薄いブルーを基調としておりYUIと似た雰囲気を感じさせます。メニューやタブ、ツリー、フレームのような機能が提供されていますので本格なWebアプリケーションを組むことも十分にできます。そのまま単独で使うこともできますが、Ext GWTを使えば上記のGoogle Web Toolkitと組み合わせて利用もできます。最新のMS Officeで使われているリボンのようなツールバーも提供できる等、高度なインタフェースを実装することも可能です。
Objective-J
CappccinoはMac OSXのアプリケーション風インタフェースを開発できるフレームワークです。その特徴としてはJavaScriptをラッピングしたオリジナル言語Objective-Jを使ってインタフェースを開発する点にあります。ネーミングからも分かる通り、Mac OSX向けのプログラミング言語Objective-Cと酷似しています。さらにMac OSX向けの開発環境インタフェースビルダーを使ってWebアプリケーションのインタフェースを構築することもできます。開発しているのは280 Northという企業で、元Appleの開発者が集まって作られた会社です。
各フレームワークの利点と欠点
Webアプリケーションを提供する際に重要なのは、ユーザビリティになります。ユーザはローカルアプリケーションの利用経験はあるので、違和感のない作りにすればユーザの感じるストレスや収得までにかかる教育コストは大幅に下げられるはずです。企業向けのシステムであればデータの視認性や一覧性、一つの画面における情報量を重視する傾向にあるのでWebアプリケーションフレームワークによって密な情報を分かりやすく提供できるメリットは大きくなります。
逆に公開されたサービスにおいてWebアプリケーションフレームワークを用いると、ローカルアプリケーションの使い勝手の悪さが顕著に感じられることが多いようです。フレームによる画面割りのせいでパーマネントリンクが使えなかったり、表示の柔軟性が損なわれるケースが多くなります。フレームワークを用いるとWebアプリケーションの開発が容易になりますが、逆にデザインや機能の柔軟性が失われるために自分のサイトにあった機能を提供しづらくなります。またドラッグアンドドロップのような操作は一般的なWebサイトでは提供されていないために操作に違和感を感じるユーザも少なくありません。
そこで考えたいのはWebアプリケーションとしての機能は備えつつも既存のWebユーザビリティにあったフレームワークの選定です。あまりがちがちにデザインを固定するものではなく、柔軟性を与えられたものを選択する必要があります。もちろんユーザの教育コストが低いと判断される場合は強力なフレームワークを選択するのも良いのではないでしょうか。次にWebアプリケーションのターゲットを考え、企業向けか否かで判断するというのも重要です。
まとめ
Web RIAフレームワークを用いれば、開発者単独であってもリッチなインタフェースを備えたWebアプリケーションを容易に構築できるようになります。その意味ではWebデザインを依託できるのが大きな利点になります。問題は自分の好きなように修正を行いたい時にできるか否かになります。ウィジェット（ローカルアプリケーションでいう所のコンポーネント）だけを利用できるタイプを選択したり、jQuery UIのように既存の資産を活かせるものを選ぶのも一つの手と考えられます。JavaScriptはWebサービス、Webアプリケーションを開発する際に用いるのが当たり前になっていますので、各種フレームワークの特性を予め知っておけばプロジェクトに合わせた最適なものを選べるようになるのではないでしょうか。
MOONGIFTでは技術コンサルティング、Webサイトプロデュース、テクニカルアドバイザリー、ITレポートサービスを承っております。ご用命、ご質問などはinfo@moongift.jpまでお気軽にどうぞ!
