Eclipse コンポーネント用に Web ユーザー・インターフェースを実装する

Eclipse ベースのコンポーネントで RIA 技術を活用する

Dojo、Adobe Flex、OpenLaszlo など、Web 開発者が使用する技術を使って、Eclipse ベースのアプリケーションの魅力を引き立たせる方法を学んでください。さらに、この方法を学ぶことで、作成したアプリケーションをデスクトップ・アプリケーションからブラウザー・ベースのアプリケーションへと簡単に移行できるようになるため、デプロイメントの選択肢を複数、提供できるようになります。

Robert Ma, Staff Software Engineer, IBM

Robert MaRobert Ma は、IBM Toronto Software Lab に勤務するスタッフ・ソフトウェア・エンジニアです。WID (WebSphere Integration Developer) に組み込まれた Adobe Flex ベースの Eclipse エディター、Integration Solution View の設計および実装に関わった実績を持つ彼は、現在、WID の開発チームで主に統合ソリューションのサポートを担当しています。WID チームに加わる前は、WebSphere Message Broker Toolkit、Fortran Compiler、および Java JIT Compiler チームのメンバーでした。



2010年 2月 16日

はじめに

ここ数年の間に、Web は業界で最もよく使われているアプリケーション・ソフトウェア・プラットフォームの 1 つとなりました。Web アプリケーションが受け入れられている理由は、World Wide Web を利用することで優れたアクセシビリティーが提供できるからというだけではありません。Web アプリケーション・プラットフォームでは多種多様な優れたユーザー・インターフェース (UI) 技術を使用できることもその理由の 1 つです。例えば Dojo、Adobe Flex、OpenLaszlo などの技術を考えてみてください。これらの技術は魅力的なエフェクトによってインタラクティブなクライアントを実現し、ユーザー・エクスペリエンスを大幅に改善します。

その一方、Eclipse のようなデスクトップ・アプリケーションが主として重視するのは、ユーザビリティーに優れ、ユーザーの生産性を向上させる UI デザインをすることです。このことから、インタラクティブな UI を備えたデスクトップ・アプリケーションを見かけることはめったにありません。Eclipse には、UI を作成するための柔軟なツールキット Draw2D がありますが、このツールキットには数多くの制約があります。例えば、サポートする画像は JPG や GIF などの静的な画像のみで、SVG のような動的な画像はサポートしません。さらに、Draw2D でエフェクトやアニメーションを実装するのは難解なことで、開発者が楽しめるような作業ではないのが通常です。

この記事では、Eclipse アプリケーションの 1 つの UI パラダイムとして、Eclipse UI コンポーネントを Web ベースの UI 技術によって作成する方法を紹介します。


Web UI を Eclipse に統合する理由とは?

Eclipse は、今日最もよく使われている開発プラットフォームの 1 つです。Eclipse はその極めて拡張性に優れたフレームワークによって大きな人気を博し、今では数々のアプリケーションが Eclipse をベースに構築されています。Eclipse で UI を実装するときに一般的に使用されているフレームワークは、SWT (Standard Widget Toolkit)、JFace、および Draw2D です。この 3 つの UI フレームワークを使用すれば、ユーザーにとって使いやすく、同じ環境で使用している他のアプリケーションと同じようなルック・アンド・フィールを備えたアプリケーションを簡単に実装することができます。多くの場合、ユーザーにとって最適な UI を作成する上で、これらのフレームワークが有効に働きます。

しかし残念ながら、最高に見栄えが良く、最も直観的でユーザー・フレンドリーな UI となると、Eclipse に標準装備された UI フレームワークではそう簡単に実装することはできません。例えば、陰影を付けたり、色のグラデーションを付けたりといったアニメーションやエフェクトを実装するのは簡単なことではありません。さらに Eclipse のグラフィカル・ビュー/エディターでオブジェクトのサイズを変更 (ズーム) すると、オブジェクトに GIF または JPG 形式の画像が含まれる場合、その画像は粗くなってしまいます。これらの問題を解決するには、カスタム・レンダラーを作成して、UI のデザインと描画を制御しなければなりません。同じような経験をしたことのある開発者なら、カスタム・レンダラーを作成するのは厄介な作業であることを覚えているはずです。けれども、望ましいとまではいかない UI デザインで妥協すると、アプリケーションのユーザビリティーに影響が出てきます。

大抵の Web UI には、SVG のように状況に応じて動的にサイズが変化する画像や、アニメーションなどの、ハイ・エンドの表示機能のサポートが組み込まれています。したがって、これらのプラットフォームを使用すれば、開発者が望み通りの UI を簡単に実装することができます。

その上、Web インターフェース技術を使用して開発した Eclipse コンポーネントは、容易に World Wide Web にマイグレーションできるため、これらのコンポーネントを組み込む際にかなりの柔軟性がもたらされます。


Web UI を利用できる Eclipse のコンポーネントとは?

Eclipse の UI コンポーネントはどれでも Web ユーザー・インターフェースを使って実装することができます。図 1 に、「Java」パースペクティブでの典型的な Eclipse ワークベンチを示します。

図 1. 「Java」パースペクティブでの典型的な Eclipse ワークベンチ
Eclipse ワークベンチのスクリーン・ショット。各セクションが「View」または「Editor」というラベルによって識別されています。

理論上、すべてのビューとエディターを Web UI を使って実装することも可能ですが、Eclipse ベースのコンポーネントでは、Web UI 技術は UI を実装するためにだけ使用してください。コンポーネントのコア・ロジックについては、やはり Eclipse 環境によって実装するべきです。


Eclipse 内での Web UI の動作

すべての Web UI アプリケーションは、標準 Web ブラウザーで開くことができます。一例として、ある Adobe Flex アプリケーションの HTML ファイルに、Shockwave ファイル (.swf) がオブジェクトとして埋め込まれているとします。この Flex アプリケーションを開くには、ブラウザーで Flex アプリケーションの HTML ファイルの URL を指定することになります。

Eclipse では、SWT ブラウザー・ウィジェット (org.eclipse.swt.browser.Browser) を使用して任意の Web UI アプリケーションを開くことができます。このブラウザー・ウィジェットが、Web UI 技術による Eclipse コンポーネントの実装に役立ってきます。Web UI を備えた Eclipse コンポーネント (エディターまたはビュー) を実装するには、以下の手順を使用することができます。

  1. Web UI を任意の Web UI 技術で開発します。
  2. 開発した Web UI アプリケーションをパッケージ化して、そのアプリケーションを Eclipse が使用できるようにします。パッケージ化の方法は多数ありますが、通常は、Web アプリケーションを Eclipse プラグインに入れて、エディター・クラスがアクセスできるようにします。
  3. エディター・コードで SWT ブラウザー・ウィジェットをインスタンス化し、そのインスタンスを使用して Web UI アプリケーションを起動します。リスト 1 のコードは、EditorPart コントロールの createPartControl() メソッドでブラウザー・ウィジェットをインスタンス化し、ブラウザーで Web UI を開く方法を示しています。
リスト 1. Eclipse エディターでのブラウザー・ウィジェットのインスタンス化
	public void createPartControl(Composite parent) {
	 …
	 Browser browser = new Browser(parent, SWT.NONE);
	 …
	 browser.setUrl(“my.plugin.name\MyFirstWebUI.html”);
	 …
	}

Web UI アプリケーションを実行するブラウザー・ウィジェットの場合、ウィジェット階層は、「Eclipse Workbench (Eclipse ワークベンチ)」 > 「Eclipse Editor/View (Eclipse エディター/ビュー)」 > 「SWT Browser control (SWT ブラウザー・コントロール)」 > 「Web UI application (Web UI アプリケーション)」となります。


Web UI アプリケーションと Eclipse との間の通信方法

Web UI アプリケーションと Eclipse との間の通信チャネルは、どの Web UI 技術を使用しているかによって異なります。Adobe Flex、Dojo、OpenLaszlo など、使用可能な Web UI 技術のほとんどでは、JavaScript と HTTP リクエストのどちらでも使用することができます。これから、この 2 つの手法をそれぞれ検討します。

JavaScript による通信

JavaScript を使用した場合の Eclipse と Web UI アプリケーションとの間の通信方法は、通信する方向によって多少の違いがあります。まず、Eclipse から Web UI アプリケーションへの通信には、SWT ブラウザー・コントロールに API (Browser.execute(String string)) が用意されています。この API を使用して、ブラウザー内部で実行中の Web UI で JavaScript を実行することができます。リスト 2 とリスト 3 に、Eclipse が JavaScript を呼び出す方法、そして Web UI アプリケーションが JavaScript 呼び出しを処理する方法をそれぞれ示します。

最初に、Eclipse が JavaScript を呼び出します。この例では、ダイアログ・ボックスを開くように要求しています。

リスト 2. Eclipse による JavaScript の呼び出し
	Browser browser = new Browser(parent, SWT.NONE);
	…
	browser.execute(“openDialog();”);

HTML には JavaScript 関数が定義されています。上記の呼び出しによって、この関数が実行されます。

リスト 3. Web UI による JavaScript 呼び出しの受信
	function openDialog() {
	…
	 alert();
	…
	}

Web UI アプリケーションを実装するために使用している技術によっては、ブラウザー・コントロールで JavaScript を実行するだけで十分な場合もあります。一方、ブラウザー内部の別のコンテナー内で実行される技術を使用している場合には (例えば、Adobe Flex アプリケーションを Adobe Flash Player 内で実行するなど)、Web UI アプリケーションと Eclipse の間にプロキシーが必要です。

Adobe Flex を使用した例として、Eclipse ブラウザーから JavaScript を呼び出すと、HTML アプリケーションがその JavaScript 呼び出しを ActionScript に変換し、変換した ActionScript を Flex アプリケーションで呼び出すことにします。リスト 4、リスト 5、リスト 6 で、Eclipse が JavaScript と ActionScript の両方を使用して Flex アプリケーションと通信する例を説明します。

まず、前と同じく Eclipse が JavaScript を呼び出します。

リスト 4. Eclipse による Flex アプリケーションを対象とした JavaScript の呼び出し
	Browser browser = new Browser(parent, SWT.NONE);
	…
	browser.execute(“openDialog();”);

この場合には、JavaScript 関数が ActionScript 呼び出しを実際に作成し、それからその呼び出しが実行されます。

リスト 5. JavaScript による Flex アプリケーション用 ActionScript の作成
	var appName="MyFlexApp";
	
	function getFlexApp(appName) {
		if (navigator.appName.indexOf ("Microsoft") !=-1) {
			return window[appName];
		} else {
			return document[appName];
		}
	}
	function openDialog() {
	…
	 getFlexApp(appName).handleOpenDialog();
	…
	}

最後に、この ActionScript を Flex アプリケーションが受け取って実行します。

リスト 6. Flex アプリケーションによる ActionScript の受信
	…
	if (ExternalInterface.available) {
	 try {
	  ExternalInterface.addCallback("handleOpenDialog", handleOpenDialogInFlex);
	 }
	 catch (error:SecurityError) {} 
	 catch (error:Error) {}
	}
	…
	public function handleOpenDialogInFlex():void {
	 Alert.show(“hello world!”);
	}

Web UI アプリケーションから Eclipse への通信を容易にするには、少し異なる手法を使用して、ブラウザーのステータス行を利用します。基本的に、Web UI アプリケーションは (大抵は JavaScript を使用して) ブラウザーのステータス行を更新します。そこで、Eclipse ではステータス・テキスト行リスナーを Web UI アプリケーション用に作成したブラウザー・コントロールに接続します。これにより、ブラウザーのステータス行のあらゆる変更が、この接続されたリスナーに通知されることになります。ただし、ここで注意しなければならないのは、ブラウザーのステータス行を使用するのは、この Web UI アプリケーションだけではないことです。したがって、Eclipse のステータス行リスナーは、関係のないステータス行の更新をすべてフィルタリングして除外する必要があります。リスト 7 とリスト 8 に、この通信チャネル用に Web UI アプリケーションと Eclipse をセットアップする方法を示します。

Eclipse でブラウザーを開き、ステータス・テキスト行リスナーを設定します。リスナーは、Web UI が生成するはずの特定のテキストを探すように設定されていることに注目してください。

リスト 7. Eclipse でのリスナーの設定
	Browser browser = new Browser(parent, SWT.NONE);
	Browser.addStatusTextListener(new StatusTextListener() {
	 public void changed(StatusTextEvent event) {
	  String text = event.text;
	  if ( “fromWebApp:handleButtonPressed()”.equals(text) ) {
	   handleButtonPressed();
	  }  
	 }
	});
	
	public void handleButtonPressed() {…}

JavaScript でブラウザーのステータス行を変更する関数を定義した後、ステータス行の更新によって、その関数を呼び出します。この変更は、リスナーで待機している変更と同じであることに注意してください。

リスト 8. JavaScript によるブラウザーのステータス行の更新
	function changeStatusLine(status){
	 window.status = status;
	}
	…
	changeStatusLine(“fromWebApp:handleButtonPressed()”);

Web UI アプリケーションがブラウザー内部のコンテナー内で実行される場合も同様に、HTML アプリケーション層が Web UI アプリケーションと Eclipse との間でプロキシーとしての役割を果たすことができます。ここでも Adobe Flex を例に用いると、まず Flex アプリケーションが ExternalInterface クラスを使用して HTML コンテナー内部で JavaScript を呼び出し、続いて HTML コンテナーがステータス行を更新します (リスト 9 とリスト 10 を参照)。

JavaScript で、ステータス行を更新する関数を作成します。

リスト 9. ステータス行を更新する JavaScript 関数
	function changeStatusLine(status){
	 window.status = status;
	}

上記の外部 JavaScript 関数を呼び出して実行し、ステータス行を変更する関数を Flex で作成します。

リスト 10. Flex アプリケーションによるステータス行の更新
	public function changeStatusLineTo( text:String ) : void {
	 ExternalInterface.call("changeStatusLine", text);
	}
	…
	changeStatusLineTo(“fromWebApp:handleButtonPressed()”);

図 2 に、このセクションでこれまで考案した、Eclipse と Web UI アプリケーションとの間の通信チャネルの概要を示します。

図 2. JavaScript を使用した、Eclipse と Web UI アプリケーションとの間の通信チャネル
Eclipse アプリケーションが Browser.execute() を使用して Web UI の JavaScript インターフェースと通信する方法を示す図

HTTP による通信

Web UI アプリケーションと Eclipse との間のもう 1 つの通信手段として使えるのは、HTTP リクエストです。HTTP リクエストを使用した手法には、Web UI アプリケーション、Eclipse ワークベンチ、HTTP サーブレット (Eclipse 内部で実行) の 3 つが関与します。これはソフトウェア・エンジニアリングの世界で知られている、モデル・ビュー・コントローラー (MVC) デザイン・パターンと同様の手法です。この場合で言うと、Eclipse ワークベンチが「モデル」、Web UI アプリケーションが「ビュー」、そして HTTP サーブレットが「コントローラー」に相当します。

すべての Eclipse インストールはオープンソースの Jetty エンジンを組み込み、Eclipse ワークベンチで動作するこの Jetty エンジンが、HTTP サーバーとしての役割を果たします。Eclipse プラットフォームを使用している開発者は、Eclipse 外部からの HTTP リクエストを処理するサーブレットを簡単に登録することができます。また、HTTP サーブレットを Eclipse に登録するのも、拡張ポイント org.eclipse.equinox.http.registry.servlets および org.eclipse.equinox.http.registry.resources を使用して簡単に行えるようになっています。

Web UI アプリケーションと Eclipse との間に通信チャネルを設けるために、まず HTTP サーブレットを作成します。リスト 11 とリスト 12 で、上記の 2 つの拡張ポイントを使用して HTTP サーブレットを登録する方法を説明します。これらの拡張ポイントの詳細については、Eclipse API ドキュメントを参照してください。

plugin.xml ファイルに、HTTP サーバーが使用するための拡張ポイントを登録します。

リスト 11. XML での拡張ポイントの登録
	<extension point="org.eclipse.equinox.http.registry.resources">
	  <resource alias="/" base-name="/webContent" />
	</extension>
	<extension point="org.eclipse.equinox.http.registry.servlets">
	  <servlet alias="/rob"
	    class="rob.MyHTTPServlet">
	  </servlet>
	  
	</extension>

サーブレットは、Java 言語で定義します。

リスト 12. Java での拡張ポイントの登録
	public MyHTTPServlet extends HTTPServlet {
	 protected void doGet(HttpServletRequest httpServletRequest,  
	  HttpServletResponse httpServletResponse) throws ServletException,   
	  IOException {
	  …
	 }
	
	 protected void doPost(HttpServletRequest httpServletRequest, 
	  HttpServletResponse httpServletResponse) throws ServletException, 
	  IOException {
	  …
	 }
	}

HTTP サーブレットの登録が完了すると、このサーブレットは Eclipse 外部から送られてくるすべての HTTP リクエストを処理できるようになります。HTTP リクエストを生成する方法は、アプリケーションの実装に使用されている技術によって異なります。ただし、よく使用されている Web UI 技術であれば、HTTP リクエストを行うための API が用意されています。

Internet Explorer®、Mozilla、Safari、Opera などの一般的なブラウザーのほとんどは、JavaScript による HTTP リクエストの実行をサポートしています。例えば Internet Explorer では、ActiveXObject("Microsoft.XMLHTTP") を使用して HTTP リクエスト・オブジェクトを作成することができます。一方、Mozilla と Safari では XMLHttpRequest を使用することができます。JavaScript を使用して HTTP リクエストを作成する方法の例は、Web を調べると簡単に見つかります。

Web UI アプリケーションが Flash Player などのブラウザー内部のコンテナーで実行される場合も同じく、アプリケーションを実行するプラットフォームが、アプリケーションに代わって HTML リクエストを作成することができます。例えば Adobe Flex では、HTTPService というヘルパー・クラスがリクエスト・オブジェクトを作成して HTTP リクエストを送信します。Flex で HTTPService を使用する例についても、Web を調べれば簡単に見つかります。

通信チャネルの比較

上記で紹介した 2 つの通信手法は両方とも、大抵の場合、Eclipse ベースのアプリケーションに有効です。ただし、この Web UI アプリケーションを Eclipse ワークベンチ外部の Web でスタンドアロンのアプリケーションとして再利用するつもりであれば、JavaScript の手法は機能しません。その理由は、JavaScript の手法では、Eclipse コンポーネントにメッセージを通知するために Eclipse ブラウザー内のステータス・テキスト・リスナー・フレームワークを利用するからです。Web UI アプリケーションが Eclipse 外部のブラウザーから実行される場合、Eclipse とそのブラウザーが同じコンピューター上にあろうとなかろうと、ステータス・テキストの変更に関するイベントを Eclipse ワークベンチに渡す手段がありません。その一方、HTTP リクエストを使用する手法であれば、Web UI アプリケーションを外部ブラウザーで実行するために移植するのは簡単です。開発者が Web UI アプリケーションに採用する通信チャネルを選ぶ際には、この点に注意してください。

表 1 に、2 つの通信チャネルの主な相違点をまとめます。

表 1. 2 つの通信チャネルの比較
JavaScriptHTTP
パフォーマンス比較的軽量HTTP リクエストによるオーバーヘッド
結合性特定のブラウザー・コントロールにステータス・テキスト・リスナーが接続されている場合にのみ機能ブラウザー内外で機能
ソフトウェア・エンジニアリングアプリケーションと Eclipse 環境が密結合Eclipse と Web UI アプリケーションとが疎結合
MVC デザイン・パターンに準拠

Web UI を作成する前に考慮すべきその他の要素

Web UI 技術を使用して Eclipse コンポーネントを作成するには、この記事で学んだ知識があれば十分ですが、実際にアプリケーションの作成に取り掛かる前に、考慮すべき要素がいくつかあります。

アクセシビリティー

アクセシビリティーが特に重要視されるアプリケーションを開発している場合には、Web UI を慎重に実装する必要があります。考慮しなければならない点としては、以下の 4 つがあります。

  • ユーザーがキーボードを使用して、Web UI のすべてのアクションを呼び出すことができるか?
  • スクリーン・リーダーが Web UI コンポーネントを認識できるか?
  • Web UI が双方向 (BiDi) テキストをサポートするか?
  • Web UI が高コントラスト・ディスプレイ・モードを提供するか?

使用する技術が本質的にこれらのサポートを提供しないのであれば、Web UI アプリケーションに次善策を実装しなければならない場合があります。

ユーザビリティー

エフェクトとアニメーションは、デスクトップ・アプリケーションのユーザーにとってはありがた迷惑になる可能性があります。Eclipse コンポーネント用の Web UI をデザインするときには、ターゲットとするユーザーが何を期待しているかを考えてください。

文字列の各国語翻訳

Eclipse アプリケーションで文字列を多国語に翻訳しなければならない場合、文字列の各国語翻訳サポートが本来備わっている技術を選ぶようにしてください。そうでないと、この機能を自力で実装しなければならなくなります。

期待される Eclipse の振る舞い

Eclipse ユーザーの頭の中には、前提としている Eclipse UI の動作があります。この点を考慮に入れて、Web UI と Eclipse UI とが一貫性を持つようにしてください。例えば、選択操作が実行されるのは、マウス・ダウン・イベントのときなのか、それともマウス・アップ・イベントのときなのか?また別の例としては、マウスの右ボタンをクリックするとコンポーネントが選択されてコンテキスト・メニューが表示されるのか、それともコンテキスト・メニューが表示されるだけで、選択は更新されないのか?こういった点で一貫性を持つようにする必要があります。


まとめ

この記事では、Web UI 技術を使用して Eclipse コンポーネントの UI を作成するための新しいパラダイムを紹介しました。多くの Web UI 技術が趣向を凝らしたアニメーションとエフェクトを提供している一方、Eclipse のツールには同じような機能を簡単に実現する方法がありません。この記事で提供した基本的な知識があれば、既存のさまざまな Web UI 技術を利用することができます。ただし実際の実装に取り掛かる前に、アプリケーションの目標とターゲットとするユーザー、そしてアクセシビリティー、ユーザビリティーなどの要素を検討してください。

参考文献

学ぶために

製品や技術を入手するために

議論するために

  • Eclipse に関する質問を投じる最初の場所として、Eclipse Platform newsgroups があります (このリンクをクリックすると、デフォルト Usenet ニュース・リーダー・アプリケーションが起動され、eclipse.platform が開きます)。
  • Eclipse newsgroups には Eclipse を利用し、拡張することに関心を持つ人達のために、さまざまなリソースが用意されています。
  • developerWorks blogs から developerWorks コミュニティーに加わってください。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source
ArticleID=473881
ArticleTitle=Eclipse コンポーネント用に Web ユーザー・インターフェースを実装する
publish-date=02162010