IBM WebSphere Portal V6.1 には多数の新機能があり、改良された検索センター・ポートレットもその 1 つです。検索センター・ポートレットは、Dojo および AJAX (Asynchronous JavaScript™ and XML) ベースとなるよう再設計されました。また、「推奨されたリンク」のシナリオをサポートするために、他のコンテンツ・ソース (たとえば、外部検索エンジンと定義済み検索コレクションなど) からの検索結果を統合できる 2 つのポートレットが追加されました。

しかし、最も重要な変更が行われたのは検索センターのアーキテクチャーであり、この変更により、ユーザー特有のニーズに基づいて、検索に関連する追加アプリケーションを開発できるようになりました。既存の検索センター・ポートレットに拡張検索オプションなどの機能を追加する、独自のウィジェットを作成して表示を置換するといったことが可能です。この記事では、WebSphere Portal V6.1 の検索センター・ページの新しいカスタマイズ・オプションについて説明し、コード・スニペットを用いた詳細な例を示します。

前提条件

この記事を最大限に利用するには、ポートレット開発、JSP、および JavaScript を基本的に理解している必要があります。また、JSR 286 仕様の一部の機能も利用しています。検索結果の表示をカスタマイズするには、JavaScript を十分に理解し、Dojo ツールキットに習熟している必要があります。

また、検索センター・ポートレットをカスタマイズするにあたり、インストール済み WebSphere Portal サーバーへのアクセス権が必要となります。このサーバーでは、2 つの開発方法があります。1 つは、<installableApps> ディレクトリー下でポートレットを見つけ、そのコードを変更した後でポートレットを再インストールする方法です。もう 1 つは、サーバー上でインストール済みポートレットを直接変更し、将来の再デプロイメントのために、変更内容を <installableApps> ディレクトリー内のポートレットにコピーする方法です。ポートレットは、ディスク上の \wp_profile\installedApps\<node>\PA_Search_Center.ear\searchCenter.war にあります。

上に戻る

検索センターのアーキテクチャーを理解する

特定のカスタマイズ方法を説明する前に、検索センターのアーキテクチャーを見ていきましょう。この概要では、ページ上の異なるポートレット間の関係とポートレットの通信モデルについて説明します。また、中心となる検索ポートレットの内部構造、その内部 Dojo ウィジェット、およびウィジェット間の通信モデルについても詳述します。

検索センター・ポートレット

WebSphere Portal V6.1 の検索センター・ページは、表 1 に示す 3 つのポートレットで構成されています。

この 3 つのポートレットは Java™ Portlet Specification、バージョン 2.0 (JSR 286 とも呼ばれます) に適合します。ポートレットはこの仕様の新しい機能であるパブリック・レンダリング・パラメーターを使用して、ポートレット間で照会パラメーターを共有します。照会パラメーターの共有により、ユーザーは検索ボタンを 1 度クリックするだけで、3 つの異なるコンテンツ・ソースから同時に検索結果を受け取ることができます。

検索センター・ポートレット・アプリケーション (portlet.xml) のデプロイメント記述子には、このパブリック・レンダリング・パラメーターの定義が含まれています (リスト 1 参照)。

<public-render-parameter>
	<identifier>searchQuery</identifier>
	<qname xmlns:search="http://www.ibm.com/lotus/search">
search:query
</qname>
</public-render-parameter>

各ポートレットは、ポートレットの定義内で、このパブリック・レンダリング・パラメーターのサポートを宣言します。

<supported-public-render-parameter>
searchQuery
</supported-public-render-parameter>

ユーザーが照会を送信すると、検索センター・ポートレットで常に新規照会アクションが実行されます。そして、パブリック・レンダリング・パラメーター searchQuery の値に、ユーザーから送信された検索テキストが設定されます。次に、WebSphere Portal のポートレット・コンテナーによって、照会パラメーターが他のポートレットに配布されます。

検索センターの機能を拡張する明快な方法の 1 つとして、新しいポートレットを検索センター・ページに追加する方法があります。このポートレットは同じ照会イベントを listen し、より多くの検索結果または他の関連情報を返すことにより、検索エクスペリエンスを高めることができます。たとえば、他のユーザーから発行された類似の照会を表示するポートレットや、照会からの 1 つ以上の用語がタグ付けされたブックマークを表示するポートレットを開発できます。

検索センター・ウィジェット

検索センター・ページのすべてのポートレットは、AJAX を使用して検索バックエンド・システムから検索結果を取得します。このため、検索結果は、ポートレットのアクション・フェーズおよびレンダリング・フェーズでは取得されません。代わりに、ポートレットのレンダリングが完了した後、クライアントのブラウザーで実行されるポートレットの JavaScript コードから開始される追加の HTTP 要求を通じて、結果が取得されます。

たとえば、メインの結果セットは、WebSphere Portal 検索の Representational State Transfer (REST) サービスを通じて WebSphere Portal 検索エンジンから取得されます。これについては、developerWorks® の記事「Integrating IBM Lotus Sametime with the IBM Lotus Quickr Search REST service」を参照してください。AJAX の使用により、異なるシステムに対する検索が並行して実行されるため、ユーザー・エクスペリエンスが強化されます。また、システムから結果が得られると、その結果がただちに表示されます。

ウィジェットのアーキテクチャーを図 1 に示します。各ポートレットは、2 つのカスタム Dojo ウィジェットを初期化します。これらのウィジェットは、バックエンド・サーバーから結果を取り出し、その結果をユーザーに表示する役割を持っています。これらのウィジェットを順に、フェッチャー (fetcher) および表示機能 (displayer) と呼びます。この 2 つのウィジェットは、コンポーネント間の疎結合を可能にする通信形式の 1 つである Dojo トピックを使用して相互に通信します。各ウィジェットは、特定のトピックへのイベントのパブリッシュや、他のトピックからのイベントのサブスクライブが可能です。

ウィジェットの各ペアを同じページ上の他のウィジェットから分離するために、フェッチャー・ウィジェットと表示機能ウィジェットの各ペアは SearchService ウィジェットに含まれています。その唯一の目的は、2 つの子ウィジェット間の通信に使用されるトピックを定義することです。

フェッチャー・ウィジェットは AJAX 呼び出しをバックエンド・サーバーに送信するだけの非表示コンポーネントであるのに対し、表示機能ウィジェットは結果を画面に表示する役割を持っています。このアーキテクチャーにより、表示機能ウィジェットを置換するだけで、外観を変更できるようになります。フェッチャーと表示機能間で送受信される可能性があるトピック (イベント・メッセージ) を表 2 に示します。

上に戻る

検索センター・ポートレット

拡張検索は検索アプリケーションの一般的で役に立つ機能の 1 つであり、検索結果の洗練されたフィルタリングを有効にします。拡張検索のインプリメントで主に問題となるのは、拡張検索はコンテンツのメタデータに大きく依存し、すべての会社に適合するような統一された方法が存在しないことです。このセクションでは、数行のコードを操作するだけで、索引付けされたコンテンツ・メタデータに基づくフィルタリングを追加する方法を示します。

ここでは、拡張検索の例をいくつか示し (図 2、3 参照)、作成者とタイトルによるフィルターを追加するために必要なコードの変更手順をステップバイステップで説明します。

拡張検索の追加

WebSphere Portal V6.1 検索センターへの拡張検索オプションの追加は、1 つのJSP ファイルを操作するだけの簡単な作業です。このファイルは検索センターのメイン JSP ファイル SearchCenterPortletView.jsp で、次の場所にあります。

\wp_profile\installedApps\<node>\PA_Search_Center.ear\searchCenter.war.

まず、タイトルと作成者をパラメーターとして検索フォームに追加しましょう (リスト 2 の関連コード・スニペットを参照してください)。変更部分は太字のテキストで示されています。このコードは、「author」および「title」というラベルの 2 つのテキスト・ボックスを検索センターに追加します。これらのボックスには、2 つのポートレット・レンダリング・パラメーター searchByTitle_Render および searchByAuthor_Render から値が入力されます。

前述のように、ウィジェット間で Dojo Topic メッセージを送信する前に、ポートレットは検索オペレーションごとに更新し、関連するメッセージをページ上の他のすべてのポートレットに送信します。サーバーとのこの往復により、作成者およびタイトルに関する情報がポートレット・レンダリング・パラメーター内で管理され、更新後、ボックスに値が再生成されます。

<div dojoType="ibm.portal.search.widgets.ScopeSearchWidget"
id="<portlet:namespace/>searchCenterQueryForm" 
language="'<c:out value="${queryLang}"/>'"
	sourceContentNode="${param.sourceContentNode_Render}"
searchIcon="'<c:out 
       value='${pageContext.request.contextPath}'/>/icons/scope_search_submit.gif'"
searchMenuIcon="'<c:out 
       value='${pageContext.request.contextPath}'/>/icons/scope_search_menu.gif'"
	resourceBundle="search_taglib_ScopeSearchWidget_bundle"
submitUrl="<portlet:actionURL><portlet:param name="javax.portlet.action"
value="newQuery"/></portlet:actionURL>"
	searchFeedUrl="<searchmenu:generateSearchFeedUrl/>"
	timeStamp="<searchmenu:scopesLastUpdateTime/>">
<br/>
<label>Title: </label>
<input type="text" class="text" name="searchByTitle" value="<c:out
value='${param.searchByTitle_Render}'/>"></input>
<br/>
<br/>
   	<label>Author: </label>
<input type="text" class="text" name="searchByAuthor" value="<c:out
 value='${param.searchByAuthor_Render}'/>"></input>
</div>

ポートレットから強制的に新規レンダリング・パラメーターをパブリッシュさせるには、いくつかのポートレット・パラメーターを変更する必要があります。最初の変更は、2 つの新規アクション・パラメーター searchByTitle と searchByAuthor をポートレットに通知することです。アクション・パラメーターごとに、ポートレットは「_Render」という接尾辞を持つ新規レンダリング・パラメーターを作成します。たとえば、searchByTitle_Render と searchByAuthor_Render です。

searchByTitle と searchByAuthor をポートレット・パラメーター additionalQueryParams に追加する必要があります。このパラメーターは次のようになります。

scope,scopeId,sourceContentNode,searchByTitle,searchByAuthor

2 番目のコード変更は、タイトルと作成者の値を読み取り、照会の送信時に使用される JavaScript 照会オブジェクトにこれらの値を設定することです。関連するコードをリスト 3 に示します。変更部分は太字のテキストになっています。値は、テキスト・ボックスから直接読み取るのではなく、ポートレット・レンダリング・パラメーターから読み取ります。

function <portlet:namespace/>initSearch() {

..... (some code around scopes)

	var query = "<lwp:escape type="javascript"><c:out value=
"${param.searchQuery}" escapeXml="false"/></lwp:escape>";
	var queryObject = new ibm.portal.search.Query({
		text: query,
		language: "<c:out value="${queryLang}"/>",
		scope: scopeObj
	});
var titleSearchValue = "<lwp:escape type="javascript"><c:out 
value="${param.searchByTitle_Render}"
escapeXml="false"/></lwp:escape>";
var authorSearchValue = "<lwp:escape type="javascript"><c:out 
value="${param.searchByAuthor_Render}" 
escapeXml="false"/></lwp:escape>";	
	if (titleSearchValue.length > 0) {

		queryObject.addAdvancedQuery(<portlet:namespace/>createAdvancedQuery(
"title", titleSearchValue));
	}
	if (authorSearchValue.length > 0) {
		queryObject.addAdvancedQuery(<portlet:namespace/>createAdvancedQuery(
"author", authorSearchValue));
	}

	if (queryObject.getFullQueryText().length > 0) {
		dojo.publish(ibm.portal.search.NEW_QUERY_TOPIC, [queryObject]);
	}
}

initSearch メソッドで使用される新規メソッド createAdvancedQuery のコードをリスト 4 に示します。このメソッドは拡張照会で複数入力されたケースを処理し、OR で連結した複数のフィルターとして追加します。

function <portlet:namespace/>
createAdvancedQuery(/*String*/ field, /*String*/ value) {
	var words = value.split(" ");
	if (words.length == 1) {
		return "+" + field + ":" + value;
	}
	var buffer = [];
	buffer.push("+(");
	for (var i = 0; i < words.length; i++) {
		if (i != 0) {
			buffer.push(" OR ");
		}
		buffer.push(field);
		buffer.push(":");
		buffer.push(words[i]);
	}
	buffer.push(")");
	return buffer.join("");
}

この記事の「ダウンロード」セクションで、この例で必要なコード変更がすべて含まれている SearchCenterPortletView.jsp ファイルを入手できます。

上に戻る

検索結果表示の外観を再設計する

WebSphere Portal 検索センターのカスタマイズを考えるとき、最も一般的なニーズは検索結果表示のルック・アンド・フィールを変更または置換することです。WebSphere Portal の前のバージョンでこのタスクを行うには、独自のポートレットを記述する必要がありました。現在は、バージョン 6.1 の検索センターの新しいアーキテクチャーにより、表示ウィジェットを単に置き換えるだけで、検索結果を表示する役割を持つポートレット内のエリア全体を置換できます。

このセクションでは、結果表示ウィジェットを TreeMap 表示ウィジェットに置き換えた例を使用して、結果表示ウィジェットを置換するプロセスについて説明します。TreeMap は検索結果を表示するための推奨方法ではありませんが、検索結果に関する情報を次の 3 つの次元で表示する興味深いオプションです。

• サイズ : 検索結果ボックスのサイズは、結果のスコア (関連性) によって決められます。
• カラー: カラーは検索結果のソース、つまり WebSphere Portal コレクションまたは Web コレクションのいずれかを示します。
• 陰影 : 陰影は、結果の最終更新日によって決められます。明るいカラーは最近の更新日を示します。

図 4 に、TreeMap ウィジェットによって結果が表示された検索センターを示します。発行された照会は「ibm websphere」で、2 つのコレクションに対して実行されます。最初のコレクションは、システム内のすべてのポートレットを含む WebSphere Portal コレクションで、2 番目のコレクションは、IBM developerWorks サイトからの記事を含む Web コレクションです。TreeMap によって 21 件の検索結果が表示されます。WebSphere Portal からの検索結果は青色で左側に表示され、developerWorks からの検索結果は緑色で右側に表示されます。

検索結果表示ウィジェットの置換

ウィジェットを置換する最初のステップは、新しいウィジェットを記述することです。検索センター・ポートレットのすべての検索ウィジェットを保持するファイルは DisplayResultsWidgets.js ですが、ここでは新しいファイルを作成し、DisplayResultsTreeMap.js という名前を付けます。この新しい JavaScript ファイルは、他のファイルとは異なり、Dojo ウィジェット用サーバーの共有ロケーションにあるポートレットの一部としてパッケージ化する必要があります。このウィジェットは 1 つのポートレット、つまり検索センター・ポートレットだけにサービスを提供するため、ポートレットの一部としてパッケージ化します。

次に、この JavaScript ファイルをメインの JSP ファイルである SearchCenterPortletView.jsp にインポートし、ResultsDisplayWidget メソッドを新しい ResultsDisplayTreeMapWidge メソッドで置換します。関連するコード・スニペットとともに、詳細な手順を示します。

1. この記事の「ダウンロード」セクションに、TreeMap ウィジェットの完全なインプリメンテーションが含まれる DisplayResultsTreeMap.js ファイルと、その XSLT ファイルである resultsTreeMap.xsl があります。\wp_profile\installedApps\<node>\PA_Search_Center.ear\searchCenter.war の下に \Javascript\ibm\portal\search\ext ディレクトリーを作成し、これらのファイルをここにコピーします。
2. メインの JSP ファイル SearchCenterPortletView.jsp を開きます。リスト 5 に示す 2 行 (表示では 3 行になっています) のコードを追加します。このコードは、ディスク上の新規パスを JavaScript コード・パスに追加し、この新規 JavaScript ファイルからすべてのウィジェットをインポートします。
   
   
   
   リスト 5. SearchCenterPortletView JSP ファイルへの TreeMap ウィジェットのインポート
   

   dojo.registerModulePath("ibm.portal.search.ext", "<c:out value= '${pageContext.request.contextPath}'/>/Javascript/ibm/portal/search/ext"); dojo.require('ibm.portal.search.ext.DisplayResultsTreeMap');

   
   
3. 3. 「<div dojoType="ibm.portal.search.ext.ResultsDisplayWidget"…></div>」という行を見つけ、この行をリスト 6 に示すコードで置き換えることにより、結果表示に使用されるウィジェットを置換します。コードの大部分は、TreeMap ウィジェットで使用される新規スタイル定義で構成されていることに注目してください。
   
   
   
   リスト 6. SearchCenterPortletView JSP ファイルでの ResultsDisplayTreeMapWidget の使用
   

   <style> .contentCell { text-align: center; width: 100%; height: 100%; border: solid 1px #FFFFFF; vertical-align: middle; overflow: hidden; z-index: 0; cursor: pointer; } .mapFragment { position: absolute; top: 0px; left: 0px; } .container { position: relative; width: 100%; height: 400px; } span.contentLink { color:#FFFFFF; padding: 5px; } </style> <div dojoType="ibm.portal.search.ext.ResultsDisplayTreeMapWidget"></div>

   
   

TreeMap ウィジェットの動作

TreeMap ウィジェットは、ネストされた長方形を使用してツリー構造でデータを表示する手法です。1990 年代前半に Ben Shneiderman 教授によって考案されました。TreeMaps はデータの行を長方形のグループとして表示し、構成、サイズ、カラーを変更することで基礎となるデータ・パターンを図形的に明らかにします。この視覚的な手法により、他の方法では明らかにできない複雑なデータ関係を簡単に認識できます。

この記事で説明する TreeMap のインプリメンテーションは、完全に JavaScript に基づいています。これは Squarified Treemaps アルゴリズムをインプリメントし、正方形に近い長方形を使用して TreeMap を作成するため、横長の細い長方形よりも、比較および選択が容易になります。TreeMap ウィジェットの一般的なフローは次のとおりです。

1. サーバーから取得した検索結果の Atom フィードを JavaScript オブジェクトの配列に変換します。
2. それぞれの結果に、基本カラー (結果のカテゴリーに基づく)、重み (結果の関連性に基づく)、およびカラーの重み (結果の日付に基づく) を割り当てます。すべての重みは、0 から 1 の間で正規化されます。
3. 実際の TreeMap の作成は、次の 2 つのステップで行われます。
   
   • 最初に、異なるカテゴリーのハイレベルの TreeMap を作成します。各カテゴリーの重みは、そのカテゴリーに属するすべての結果の重みの合計です。
   • 次に、指定されたアルゴリズムを使用して、結果用の実際の TreeMap を作成します。アルゴリズムが完了すると、それぞれの検索結果に長方形のセルが割り当てられます。このセルのサイズは、結果の重みに比例します。
4. それぞれのセルにビューを作成します。各ビューには、実際の検索結果へのリンクを含めます。セルの正確なカラーは、基本カラーおよび各結果のカラーの重みに応じて決められます。フォント・サイズも、セルのサイズに比例して設定されます。

上に戻る

まとめ

カスタマイズを実行するときに、検索センター・ポートレット全体を書き換える必要はなくなりました。この記事では、WebSphere Portal V6.1 の検索センター・ページの新しいカスタマイズ方法について説明しました。この方法は、検索センター・ポートレットの再設計により可能になったものです。Dojo およびAJAX ベースの新しいアーキテクチャーにより、メインの検索ポートレットとシームレスに連携して機能する独自の検索関連アプリケーションを開発できます。また、JSP ファイルを操作して既存の検索センター・ポートレットに機能 (たとえば、拡張検索) を追加する方法、および独自のウィジェットを作成して表示を置換する方法について説明しました。

上に戻る

ダウンロード

ダウンロード形式について

参考文献

学ぶために

• Read the developerWorks article, "Unleashing the Power of WebSphere Portal V6 Search with the Portal Search Toolbox."
  
  
• Read the developerWorks article, "Integrating IBM Lotus Sametime with the IBM Lotus Quickr Search REST service."
  
  
• Read the developerWorks article, "IBM Search and Index APIs (SIAPI) for WebSphere Information Integrator OmniFind Edition."
  
  
• Read the IBM WebSphere Developer Technical Journal article, "Introducing the Search and Indexing API in WebSphere Portal V6.0."
  
  
• Refer to the developerWorks WebSphere zone.
  
  

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

• Download WebSphere Portal documentation.
  
  
• Download IBM Search and Index (SIAPI) V6.0 Javadoc.
  
  

議論するために

• ディスカッション・フォーラムに参加してください。
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• 前提条件
• 検索センターのアーキテクチャーを理解する
• 検索センター・ポートレット
• 検索結果表示の外観を再設計する
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント