目次


Lotus Notes 8 プラグインでグラフィックコンテキストを利用する

グラフィック関数を使ったプラグインアプリケーションの開発

Comments

開発環境の準備

まず Lotus Notes 8 のプラグインアプリケーションを開発するに当たって、Eclipse(ないしは IBM Rational Application Developer)を使って、その開発環境を構築しておく必要があります。この具体的な作業についてはIBM Lotus Notes 8 技術解説を参照ください。またLotus Notes 8 の英語トライアル版がダウンロード可能になっています。IBM ID を登録(無償)する必要がありますが、まだお持ちでない方でこの機会に試して見たい方は是非体験してみてください。なおプラグインアプリケーションを開発するには Lotus Notes 8 の(Basic 版ではなく)Standard 版が必要になります。ダウンロードの際はご注意ください。

プラグインアプリケーションプロジェクトの作成

では実際にプラグインアプリケーションを作ってみます。Lotus Notes 8 のプラグインアプリケーション開発経験がある場合は普通に進めていただけると思いますが、経験がないと少し面倒な手順になりますので、確認の意味も含めてステップ・バイ・ステップで紹介していきます。

開発環境が構築された Eclipse(Rational Application Developer) を起動し、メニューから File - New - Project を選択します。図1.のようなウィザードのダイアログボックスが表示され、プロジェクトの種類を聞かれますので、プラグイン・プロジェクトを選択して Next ボタンをクリックします。

図 1. プラグイン・プロジェクトの選択
プラグイン・プロジェクトの選択
プラグイン・プロジェクトの選択

次にプロジェクトの名称を入力する画面になります。名称は他のプロジェクトと重複しない限り何でもいいのですが、ここでは最終的に作るアプリケーションの関係から Eyes と入力することにして、Next ボタンをクリックします。

図 2. プロジェクト名称の指定
プロジェクト名称の指定
プロジェクト名称の指定

次の画面はそのまま Next をクリックしても構いません。プラグインの作成元を明確にする必要がある場合は図3.のようにプラグイン・プロバイダー欄に入力しますが、ここは空欄でも構いません。

図 3. プラグイン・プロバイダーの指定(オプション)
プラグイン・プロバイダーの指定
プラグイン・プロバイダーの指定

続いてプラグインアプリケーションのテンプレートを指定します。ここでは図4.のように以下のテンプレートを使用してプラグインを作成にチェックが付いていることを確認して、ビュー付きプラグインを選択します。これで画面付きのプラグインアプリケーションがテンプレートから作成されることになります。更に Next ボタンをクリックします。

図 4. ビュー付きプラグインの指定
ビュー付きプラグインの指定
ビュー付きプラグインの指定

次の画面では指定したビュー付きプラグインの、そのビューに関する設定を行います。デフォルトのままでも動きますが、見た目の便宜もあるので図5.のように一部編集しておきます。ビュー・クラス名はファイル名に影響し、ビュー名は実行時のタイトル名に影響します。編集が済んだら Next ボタンをクリックします。

図 5. ビューの設定
ビューの設定
ビューの設定

ウィザードの最後にフィーチャーの指定を行います。が、今回は用意されているフィーチャーを使いませんので、全てのチェックを外します(図6)。この状態で Finish ボタンをクリックします。

図 6. フィーチャーの指定
フィーチャーの指定
フィーチャーの指定

ウィザードのダイアログボックスが消え、指定した Eyes プロジェクトが Eclipse のパッケージエクスプローラ(画面左上)に追加されたことを確認してください。

図 7. Eyes プロジェクトが追加された
プロジェクトが追加された

この後、このプロジェクトを改良していきますが、その前に最後の準備作業を行います。パッケージエクスプローラ内の plugin.xml ファイルをダブルクリックして開き、以下の太字部分(2箇所)を追加しておきます:

リスト 1. plugin.xml に追加する箇所
<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.2"?>
<plugin>

   <extension
         point="org.eclipse.ui.views">
      <category
            name="Eyes Category"
            id="Eyes">
      </category>
      <view
            name="Eyes"
            allowMultiple="true"
            icon="icons/sample.gif"
            category="Eyes"
            class="eyes.views.EyesView"
            id="eyes.views.EyesView">
      </view>
   </extension>
   
   <extension
         point="com.ibm.rcp.ui.shelfViews">
      <shelfView
            id="eyes.views.EyesView"
            region="TOP"
            showTitle="true"
            view="eyes.views.EyesView"/>
   </extension>
   
   <extension
         point="org.eclipse.ui.perspectiveExtensions">
   :
   :

allowMultiple="true" 属性の追加によってプラグインアプリケーションが(プロパティは受け取れませんが)コンポジットアプリケーションとして表示できるようになります。また "com.ibm.rcp.ui.shelfViews" の拡張ポイントを追加することで、このビューがサイドバーに表示されるようになるので、コンポジットアプリケーション化しなくても実行時の様子を確認することができるようになります。デバッグ段階では便利な設定です。

グラフィックコンテキストの取得

ここまでの手順でプラグインプロジェクト(のひな型)が作成できました。このプロジェクトのファイルをカスタマイズして実際のアプリケーション画面を作っていきます。特に今回はテキストフィールドなボタンなどの部品を配置していくのではなく、グラフィック関数を使ったアプリケーションを開発するのが目的です。そのためにまずはアプリケーション画面のグラフィック・コンテキスト(GC)にアクセスする必要があります。

というわけで、まずはアプリケーション画面の GC を取得する所までをコーディングしてみましょう。Eclipse のパッケージエクスプローラから EyesView.java をダブルクリックしてエディタ画面で開きます。ウィザードを使って作成したこともあり、初期状態でコメントやコードが含まれていますが、ここでは全て無視します(笑)。EyesView.java の内容が以下の内容になるよう編集します:

リスト 2. グラフィックコンテキストを取得するまで
package eyes.views;


import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.graphics.GC;
import org.eclipse.swt.graphics.RGB;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.ui.part.ViewPart;


public class EyesView extends ViewPart {
	//. Canvasオブジェクトと、GCオブジェクトを定義①
	private Canvas canvas = null;
	private GC gc = null;

	public EyesView() {
	}

	public void createPartControl(Composite parent) {
		//. 画面いっぱいに拡大②
		parent.setLayout( new FillLayout() );

		//. Canvas の取得③
		canvas = new Canvas( parent, SWT.NONE );
		canvas.setLayout( new FillLayout() );
		canvas.setBackground( new Color( canvas.getDisplay()
				, new RGB( 0, 0, 0 ) ) );
		
		//. GC の取得④
		gc = new GC( canvas );
	}

	public void setFocus() {
	}
}

この内容を解説します。①まずアプリケーション画面のエリアとなる Canvas クラスのオブジェクトと、その Canvas のグラフィックコンテキストとする GC クラスのオブジェクトを定義しておきます。

次にアプリケーション生成時に実行される createPartControl メソッド内でこれらのオブジェクトを初期化しておきます。②最初にアプリケーションのレイアウトを FillLayout に指定して、この後に配置する Canvas が画面いっぱいに配置されるよう指定しておきます。③次に Canvas オブジェクトを生成して、画面を黒く塗りつぶしておきます。

④最後に生成した Canvas オブジェクトの GC を取得しておきます。これだけですと取得した GC に対しては何も行いませんが、これでこの後に各種グラフィック関数が利用できるようになります。

とりあえず今回はここまでにしておきます。この状態でこのアプリケーションを実行すると以下のような画面になります。画面を黒く塗りつぶしているだけですが、とりあえず正しく動いている(?)様子が確認できます:

図 8. サイドバーアプリケーションとして実行
サイドバーアプリケーションとして実行
サイドバーアプリケーションとして実行

グラフィックを活用してアプリケーションを作成

ここまででプラグインアプリケーションの雛形が完成しており、またグラフィックコンテキストも取得できています。後はこの取得したグラフィックコンテキストと、各種グラフィック関数を活用してアプリケーション画面をよりリッチに描画していくだけです。もちろん、ここからは自由に画面を変更していただいて構わないのですが、最後のサンプルとして X Window ユーザーには懐かしい(若い人は知らない?)Eyes を甦らせてみます。Eyes とは環境アプリケーションの1つで、マウスポインタの位置がある方に目を向ける、というだけの機能を持っています。これを Lotus Notes 8 上に再現してみます。

改めてプロジェクト内の EyesView.java を開き、その内容を以下のように変更します(太字部分を追加します)。記載されているように setForeground/setBackground 関数で描画する際の色を指定したり、fillOval 関数で楕円を塗りつぶしで描画する、といったグラフィック関数を利用したプログラミングが可能になります:

リスト 3. GC を使って、マウスの動きに目玉の位置を合わせて描画
package eyes.views;


import org.eclipse.swt.SWT;
import org.eclipse.swt.events.MouseEvent;
import org.eclipse.swt.events.MouseMoveListener;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.graphics.GC;
import org.eclipse.swt.graphics.RGB;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.ui.part.ViewPart;


public class EyesView extends ViewPart {
	//. Canvasオブジェクトと、GCオブジェクトを定義①
	private Canvas canvas = null;
	private GC gc = null;
	
	//. 直前のマウス座標を記憶しておくための変数⑤
	private int mx = -1, my = -1;

	public EyesView() {
	}

	public void createPartControl(Composite parent) {
		//. 画面いっぱいに拡大②
		parent.setLayout( new FillLayout() );

		//. Canvas の取得③
		canvas = new Canvas( parent, SWT.NONE );
		canvas.setLayout( new FillLayout() );
		canvas.setBackground( new Color( canvas.getDisplay()
				, new RGB( 0, 0, 0 ) ) );
		
		//. GC の取得④
		gc = new GC( canvas );
		

		//. Canvas 上のマウス移動イベントをハンドリング⑥
		canvas.addMouseMoveListener( new MouseMoveListener(){
			public void mouseMove(MouseEvent e){
				//. マウス座標を保存
				mx = e.x;
				my = e.y;
				
				//. Canvas を再描画
				updateCanvas();
			}
		});
	}

	public void setFocus() {
	}
	
	
	
	//. GC を利用して Canvas を再描画する⑦
	private void updateCanvas(){
		//. マウス位置の方を向く両目玉を描画
		if( gc != null ){
		    int lx, ly, rx, ry;

		    //. キャンバスのサイズを取得
		    int sw = canvas.getSize().x;
		    int sh = canvas.getSize().y;

		    //. 計算用変数
		    int a = ( int )( sw / 2 * 0.35 );
		    int b = ( int )( sh * 0.35 );

		    //. 両目の白目部分を描画
		    gc.setForeground( new Color( null, 255, 255, 255 ) );
		    gc.setBackground( new Color( null, 255, 255, 255 ) );
		    gc.fillOval( ( int )( sw / 2 * 0.05 ), ( int )( sh * 0.05 ),
		        ( int )( sw / 2 * 0.9 ), ( int )( sh * 0.9 ) );
		    gc.fillOval( ( int )( sw / 2 * 1.05 ), ( int )( sh * 0.05 ),
		        ( int )( sw / 2 * 0.9 ), ( int )( sh * 0.9 ) );

			//. (以下略、詳細はサンプルファイルを参照)
		}
	}

}

このアプリケーションを実行すると以下のようになります。この Canvas 内だけの動きにはなりますが、マウスポインタを追って目が移動します。

図 9. サイドバー内で Eyes を実行
サイドバー内で Eyes を実行
サイドバー内で Eyes を実行

更にこのプラグインアプリケーションをコンポジットアプリケーション化するなどして、全画面表示するとこのようになります。

図 10. 全画面で Eyes を実行
全画面で Eyes を実行
全画面で Eyes を実行

まとめ

本技術記事では Lotus Notes 8 のプラグインアプリケーションにおいてグラフィックコンテキストを用いたグラフィカルなアプリケーションの開発手順(のさわり)を紹介しました。実際のアプリケーションにおいては更に色々なグラフィックメソッドを活用することで、より直感的なインターフェースを実装することが可能になります。Java の AWT や Swing のグラフィック関数を使ってアプレットやクライアントサイドのプログラミングをしていた方にとっては、その技術をほぼそのまま Lotus Notes 8 のプラグインアプリケーションでも応用できるようになります。

本技術記事で紹介した Eyes プラグインアプリケーションプロジェクトのサンプルコードと、ビルドした結果の更新サイトを用意しておきました。実際のコードを確認したり、動作を確認するなど、皆さんの理解のお役に立てばなによりです。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus, Web development
ArticleID=354810
ArticleTitle=Lotus Notes 8 プラグインでグラフィックコンテキストを利用する
publish-date=11182008