Macromedia Flash と IBM Lotus Notes/Dominoの統合: Lotus Dominoベース・ソリューション用のFlashベースのユーザー・インターフェース

コンテンツ UIコンポーネントの作成 データ・プロバイダーの作成 データ・プロバイダーの割り当て Lotus Dominoビューからのコンテンツと設計の取得（XML形式） XMLオブジェクトの作成 ビューのコンテンツの取り出し DataGridへのビュー・コンテンツの埋め込み DataGridへのビュー設計の適用 新しいソリューションでのFlashNotesView.asの実装 FlashNotesViewソリューションのカスタマイズ セキュリティー まとめ ダウンロード リソース 筆者について（原文のまま）

Lotus DominoビューからMacromedia Flashベースのビューにコンテンツを受け渡し、設計を取り込みます。このソリューションでは、標準的なLotus DominoビューをWebユーザーに素早く表示し、Lotus NotesクライアントとWebクライアントの両方に使用できる単一のLotus Dominoビューの設計を簡単に更新できます。

この記事では、フラットなLotus Dominoビューに基づいた、IBM Lotus DominoビューのコンテンツをMacromedia Flashで表示する方法を説明します。この方法では、Lotus Dominoビューを変更するだけで、Lotus NotesとFlashのユーザー・インターフェース(UI)の両方で同じ設計とコンテンツを表示することができます。

このソリューションを利用すると、Lotus NotesのUIとFlashのUIでコンテンツの形式をそろえるために、追加のビューにインラインのHTMLまたはXMLを挿入する必要がなくなります。Lotus Dominoビューを1つ作成すると、そこに含まれる列ヘッダーや行に適用するフォーマット(フォントのサイズ、ファミリー、太さなど)が両方のUIで使用できます。この方法でWebクライアントにFlashを使用すると、Webクライアントで完全にレンダリングされる、Lotus Dominoビューの使用フォントをFlashムービーに埋め込むこともできます。

この記事で紹介するのは、FlashNotesViewという名前のFlashソリューションです。FlashNotesViewでは、単純なLotus Dominoビューからコンテンツと設計を読み取って、図1に示すFlash UIに適用します。この記事は、ActionScript言語の知識を持ち、Lotus Notes/Dominoアプリケーション開発に習熟した経験豊富なFlash開発者を対象としています。

メモ: この記事で扱うコードは、FlashNotesView.asという名前のActionScript外部ファイル内にあるので、Macromedia Flashをインストールしていない場合でもテキスト・エディターで参照できます。

UIコンポーネントの作成

Macromedia Flash Exchange(US) の詳細はこちら

ここで、フラットなLotus Notesビューに似た要素をMacromedia Flash内に作成するとします。これには、DataGridというUIコンポーネントを使用します。実行時にコンポーネントを生成するには、Flashムービーの冒頭で3つのUIコンポーネント用のクラスをインポートする必要があります。この3つのクラス、Label、List、DataGridをインポートするコマンドは次のとおりです。

import mx.controls.Label;
import mx.controls.List;
import mx.controls.DataGrid;

必要なクラスをインポートした後で、createClassObjectメソッドを使用して実行時に新しいクラス・インスタンスを生成するコードは次のとおりです。

lblSelectView = createClassObject(Label, "lblSelectView", 
			getNextHighestDepth()); lstSelectView= createClassObject(List,"lstSelectView", 
			getNextHighestDepth()); dgridView = createClassObject(DataGrid, "dgridView", 
			getNextHighestDepth());

上に戻る

データ・プロバイダーの作成

データ・プロバイダーとは、ListやDataGridなどのコンポーネント内で参照されるデータのモデルで、理論上は単なるオブジェクトの配列です。Arrayクラスのpushメソッドを使用すると、データ・プロバイダーに新しいオブジェクトを追加できます。配列内の各オブジェクトは、データ・プロバイダー内の1つのアイテムであり、それぞれがListまたはDataGridコンポーネント内の別々の行として表示されます。Listコンポーネントに表示するデータを定義するには、次のコードを記述します。

var arrSelectViewDP = new Array();
arrSelectViewDP.push({label:"IBM Lotus software: Lotus Documentation",
data:"http://www.lotus.com/ldd/notesua.nsf/Date"});

この記事では、Lotus developerWorksのLotus Documentationサイトのデータベース(notesua.nsf) (US) のLotus Dominoビューを使用します。

上に戻る

データ・プロバイダーの割り当て

Listコンポーネントのインスタンスには、dataProviderという名前のプロパティーがあります。データ・プロバイダー・モデルをListインスタンスに割り当てるには、次のコードを記述します。

lstSelectView.dataProvider = arrSelectViewDP;

このコマンドは、データ・プロバイダー・モデルのアイテムでListコンポーネントにデータを埋め込みます。ここで、Flashムービーを最初に実行するときにユーザーに表示するものをすべて設定します。以降のセクションでは、FlashムービーのListコンポーネントでユーザーが選択したLotus Dominoビューからコンテンツと設計を取り出すために必要なコードを追加します。(図1の「Select view(ビューを選択)」ボックスにListコンポーネントが表示されています。)

上に戻る

Lotus Dominoビューからのコンテンツと設計の取得（XML形式）

最初に、Lotus Dominoビューからコンテンツを取り出す必要があります。Lotus Dominoでこのタスクに使用できるURLコマンドが、?OpenView、?OpenDocument、?OpenPage、?ReadFormなどいくつかありますが、推奨されるURLコマンドは?ReadViewEntriesと?ReadDesignです。

Lotus Dominoビューからのコンテンツの取り出し

?ReadViewEntriesコマンドを使用すると、事前設定された形式の代わりにXML形式でビューのコンテンツを取り出すことができます。この取り出し操作のためのURLの構文は次のとおりです。

http://www.lotus.com/ldd/notesua.nsf/Date?ReadViewEntries

URLの結果を以下に示します。

<?xml version="1.0" encoding="UTF-8" ?>
<!-- Lotus-Domino (Release 7.0.1 - January 17, 2006 on Windows NT/Intel) --> 
<viewentries toplevelentries="690">
  <viewentry position="1" unid="E1EFAB2B58C8B68785257145005A41FC" noteid="86B6"
    siblings="690">
    <entrydata columnnumber="0" name="Date_Update">
      <datetime>20060403</datetime>
    </entrydata>
    <entrydata columnnumber="1" name="Titles">
      <text>Real-time access and data management for the intelligent
        enterprise</text>
    </entrydata>
    <entrydata columnnumber="2" name="Language">
      <text>English</text>
    </entrydata>
  </viewentry>
...
</viewentries>

Lotus Dominoビューの設計の取り出し

開発者向けの新情報です。資料にほとんど記載されていないURLコマンド?ReadDesignを使用すると、ビューのコンテンツではなくビューの設計(つまり、ビューの列ヘッダーと行がどのようなフォーマットであるかの情報)をXML形式で取り出せます。設計の取り出し操作のためのURLの構文は次のとおりです。

http://www.lotus.com/ldd/notesua.nsf/Date?ReadDesign

URLの結果を以下に示します。

<?xml version="1.0" encoding="UTF-8" ?>
<!-- Lotus-Domino (Release 7.0.1 - January 17, 2006 on Windows NT/Intel) --> 
<viewdesign rowlines="3" direction="0" spacing="1" columns="3"
    totalscolor="#808080">
    <column columnnumber="0" width="80" name="Date_Update" title="Last updated"
      sort="true" sortdescending="true" resortascending="true" format="2"
      listseparator="none">
      <cfont style="r" size="7" color="#000000" face="Helvetica" />
      <hfont style="b" size="7" color="#000000" face="Helvetica" />
      <numberformat digits="0" format="general" />
      <datetimeformat show="date" date="yearmonthday" time="hourminutesecond"
        zone="never" />
    </column>
...
</viewdesign>

Lotus Dominoビューの設計を取り出すと、Lotus Notesで外観を整えたビューやフォント設定などをFlash UIでも表示できます。

上に戻る

XMLオブジェクトの作成

Macromedia FlashでのXMLの取り扱い Macromedia Flash内でXMLクラスを使用し、XML内の空白を無視して、data.xmlファイルからのXMLコンテンツのロードが完了した時点でメッセージを表示することができます。これには、次のスクリプトを使用します。 var xml = new XML(); xml.ignoreWhite = true; xml.onLoad = function(success) { if(success) trace("XML has successfully been loaded."); } xml.load("data.xml");

Lotus Dominoビューから受け取ったXMLをMacromedia FlashのDataGridコンポーネントで使用する方法を説明します。まず、サーバーと通信し、サーバーに送られた要求からの応答を処理するXMLオブジェクトが必要です。xmlView XMLオブジェクトには、サーバーが応答に使用するXMLも含まれています。人間が読むためにはXML形式である必要はないため、このオブジェクトに空白を無視するよう指定します(囲み記事の『Macromedia FlashでのXMLの取り扱い』を参照)。

サーバーからXMLの出力結果を受け取るときに実行する関数も割り当てられています。

var xmlView = new XML();
xmlView.ignoreWhite = true;
xmlView.onLoad = onXMLViewLoad;

上に戻る

ビューのコンテンツの取り出し

ビューの設計の取り出し xmlViewDesignというxmlViewに似た追加のXMLオブジェクトを作成するコードを以下に示します。このオブジェクトには、選択したビューの設計から受け取ったXMLを保持します。 xmlViewDesign.load(strView+"?ReadDesign"); この行をXMLハンドラー関数xmlViewに追加すると、ビュー・コンテンツが正常にロードされた後に設計をロードします。

Macromedia FlashのUIのロード時には、ユーザーが選択したビューからのXMLコンテンツのロードを開始するXMLオブジェクトのloadメソッドを呼び出します。

現在選択されたビューに対応するURLはstrView変数に保持されます。

上に戻る

DataGridへのビュー・コンテンツの埋め込み

var arrView = arrViewRows=arrViewCols=[];

次のコード・リストはXMLノードの数だけ反復され、一時的なオブジェクトobjRowを作成します。このオブジェクトはLotus Dominoビューからの各行の列のコンテンツで埋められます。その後でobjRowオブジェクトは、DataGridコンポーネントのdataProviderプロパティーに付加されます。

arrViewRows = xmlView.firstChild.childNodes;
for (var row = 0; row<(arrViewRows.length); row++) {
  if (arrViewRows[row].nodeName == "viewentry") {
  arrViewCols = arrViewRows[row].childNodes;
  var objRow = new Object();
  for (var col = (arrViewCols.length); col>=0; col--) {
    if (arrViewCols[col].nodeName == "entrydata") {
    objRow[arrViewCols[col].attributes.columnnumber] =
      arrViewCols[col].firstChild.firstChild;
    }
  }
  arrView.push(objRow);
  }
}
dgridView.dataProvider = arrView;
// Clear datagrid column headers
for (var col = 0; col<(dgridView.columnCount); col++) {
  var column = dgridView.getColumnAt(col);
  column.headerText = "";
}

表示を整えるために、DataGridの列ヘッダーはここで消去し、後でビュー設計を適用するときに埋め込みます。

上に戻る

DataGridへのビュー設計の適用

ビューから取得した設計設定を適用するには、ここに示すコードをonXMLViewDesignLoad関数に追加する必要があります。このコードは?ReadDesignコマンドからコンテンツを受け取るときに実行されます。ここでも、出力結果を繰り返すときには、XMLノードを保持する一時的な配列を使用します。

var arrViewCols = [];
arrViewCols = xmlViewDesign.firstChild.childNodes;
for (var col = 0; col<(arrViewCols.length); col++) {
  if (arrViewCols[col].nodeName == "column") {
  var column = dgridView.getColumnAt(col);
  column.headerText = arrViewCols[col].attributes.title;
  column.width = int(arrViewCols[col].attributes.width);
  column.resizable = Boolean(arrViewCols[col].attributes.resize);
  column.setStyle("fontSize",
    int(arrViewCols[col].firstChild.nextSibling.attributes.size));
  column.setStyle("fontFamily",
    arrViewCols[col].firstChild.nextSibling.attributes.face);
  column.setStyle("color",
    arrViewCols[col].firstChild.nextSibling.attributes.color);
  }
}
dgridView.redraw();

このコードは、XMLに定義された列ごとに繰り返し、DataGridコンポーネントの該当の列に設定を適用します。setStyleプロパティーで適切なカスケーディング・スタイル・シート(CSS)の値を設定することによって実行します。

このコードがサポートするビュー設計のプロパティーは次のとおりです。

• 列ヘッダーのテキスト
  
• 列幅
  
• 列がサイズ変更可能かどうか
  
• 列のフォント・サイズ
  

コードを追加することで、サポートされるビュー設計のプロパティーをさらに拡張できます。

上に戻る

新しいソリューションでのFlashNotesView.asの実装

新規のFlashムービーを開始するときにFlashNotesView.asを使用するには(FlashNotesView_clean.flaに含まれている例のように)、Flashムービーの「Actions(アクション)」ペインの最初のフレームに次の行を追加します。

FlashNotesViewソリューションの制約事項 現在のところ、提供されているバージョンのFlashNotesViewでは、カテゴリー別のビューをサポートしていません。1つの解決策は、文書を階層状に表示するTreeListコンポーネントを使用することです。

次に、「Components(コンポーネント)」ペインからLabel、List、DataGridのインスタンスをステージ上にドラッグし、新たに作成されたインスタンスをステージから削除します。これにより、FlashファイルをコンパイルしてMacromedia Flash Playerで使用するShockWave Flash (SWF)形式にするときに、新たに追加されたコンポーネントを組み込むようにFlashムービーに通知します。実際のコードは外部のActionScriptファイルFlashNotesView.asであるため、Macromedia Flash内で実行する必要があるのはこれだけです。

上に戻る

FlashNotesViewソリューションのカスタマイズ

FlashNotesView.asを変更する場合を除き、Flash (FLA)ファイルをMacromedia Flash Player用のSWF FlashムービーにコンパイルするにはMacromedia Flashを使用する必要があります。まず、ユーザーが選択できるビューのリストのカスタマイズを試みます。このプロセスはコード内で簡単に変更できます。例えば、「Bob Balaban (Looseleaf) Forum」のビューを追加したい場合、最初にデータ・プロバイダーを定義する箇所に、次のコードを追加します。

メモ: URLには既存のURLコマンドを含んでいてはいけません。したがって、WebからURLをコピーするときに元のURLから?OpenViewを削除します。

このソリューションのカスタマイズに慣れたら、DataGridを拡張するカスタム・クラスを作成し、任意のメソッドとプロパティーを使用することも検討してください。

上に戻る

セキュリティー

サンプルとして提供しているFlashNotesView_final.swf Flashムービーのテスト中にセキュリティーに関するメッセージが表示される場合は、表示された指示に従ってローカルのSWFファイルが外部のアドレスと通信できるようにしてください。

Macromedia Flash Player 8のこのリリースではセキュリティー・レベルが上がり、Flashムービーが通信できるのは同じドメイン内のバックエンド・システムのみになりました。この問題を回避するには、バックエンド・サーバー上にテキスト・ファイル(ポリシー・ファイル)を作成し、このファイルを使用してFlashムービーが通信できるようにします。次に、現在のサーバーとの通信を許可するドメインをテキスト・ファイルに追加します。

次の例は、clienthost.comからの要求を受け入れる、backendhost.comに配置されたポリシー・ファイルです。

Security Changes in Flash Player 8(US) の記事はこちら

上に戻る

まとめ

リッチ・インターネット・アプリケーション(映像と音声を統合するデスクトップ・アプリケーションの機能を持つFlashベースのUI)は、Flash開発においてここ数年間注目を集めてきたトピックでした。一般にそのようなアプリケーションは、ユーザーにコンテンツを配信するバックエンド・システムとも結び付けられています。

FlashベースのUI用のバックエンド・システムとしてLotus Dominoサーバーを使用することで、Dominoデータベースが生成するHTMLファイルにFlashアプリケーションを埋め込み、さまざまなプラットフォーム上にあるクライアント・コンピューターからの利用が可能になります。Flashアプリケーションをコンパイルしてスタンドアロンの実行可能ファイルを作成し、CDに焼き付けて配布することもできます。CD上のFlashアプリケーションは、バックエンドのLotus Dominoサーバーへの接続情報を保持するため、クライアント・コンピューターからHTTP経由でアクセスできます。これは、Lotus Dominoベースのソリューションで独立したプレゼンテーション層としてMacromedia Flashを使用する強みの1つであり、必要に応じてFlashアプリケーションを追加のバックエンド・システムに容易に適用できます。

上に戻る

ダウンロード

	ダウンロード方法について(US)
	Adobe® Reader®が必要

上に戻る

参考資料

• developerWorksのLotus記事はこちらからご覧になれます。 IBM Lotus Domino用のPHPベースのUIを構築する
  
  
• developerWorksのLotus記事はこちらからご覧になれます。 Ajaxを使用したLotus Notes文書の操作
  
  
• Adobe社の記事は Security changes in Flash Player 8 からご覧になれます。
  

  Security changes in Flash Player 8 はこちら(US)

  
  

• developerWorksよりLotus Domino 7 serverの試用版がダウンロードできます。 試用版: Lotus Domino V7.0 (US)
  
  
• developerWorksよりLotus Notes 7 serverの試用版がダウンロードできます。 試用版: Lotus Notes, Domino Designer, and Domino Administrator clients V7.0 (US)
  
  
• Macromedia Flash Professionalの試用版は以下からダウンロードできます。
  

  Adobe Trial Downloads はこちら(US)

  
  
• Flashコンポーネント"Macromedia Flash Exchange"は以下からダウンロードできます。
  

  Adobe Exchange はこちら(US)

  
  

• ディスカッション・フォーラムにご参加ください。 Lotus Notes/Domino 6 and 7 Forum(US)
  
  
• developerWorksブログ(US) を通じて developerWorksのコミュニティー(US) にご参加ください。
  

上に戻る

筆者について（原文のまま）

		Jonas Israelsson is a Principal Domino Developer at Strand Interconnect, tasked with developing role-based portals. One of his fields of interests is merging rich, intuitive UIs with backend logic. You can reach Jonas at jonas.israelsson@strandinterconnect.se. You can also check out Jonas’ blog at http://www.israelsson.nu/blog/.

上に戻る