検索ページのカスタマイズ
Sun Java System Web Server には、基本的な検索クエリーおよび検索結果ページを提供するデフォルトの検索アプリケーションが含まれています。これらの Web ページは、そのまま使用することも、ユーザーの特定の要求に合うようにカスタマイズすることもできます。そのようなカスタマイズには、別のロゴを使って Web ページのブランドを変更するような単純なものから、検索結果の表示順を変更するような複雑なものまであります。
デフォルトの検索アプリケーションは、検索タグライブラリを使ってカスタマイズされた検索インタフェースを構築する方法を示すサンプル JSP を提供しています。/bin/https/webapps/search に格納されているデフォルト検索アプリケーションを、カスタマイズ可能な検索タグの使用方法を示すサンプルアプリケーションとして参照することができます。
デフォルト検索インタフェースの主要コンポーネントは 4 つあります。ヘッダー、フッター、クエリーフォーム、および結果です。
これらの基本要素は、タグの属性の値を変更するだけで簡単にカスタマイズすることができます。より細かなカスタマイズは、タグライブラリを使用することで実現できます。
検索インタフェースのコンポーネント
検索インタフェースは次のコンポーネントから構成されています。
ヘッダー
ヘッダーにはロゴ、タイトル、および簡略説明が含まれます。
フッター
フッターには著作権情報が含まれます。
フォーム
クエリーフォームには、検索コレクションを表す一連のチェックボックス、クエリー入力ボックス、および送信ボタンとヘルプボタンが含まれます。
結果
結果はデフォルトで、1 ページに 10 レコードずつ表示されます。レコードごとに、タイトル、パセッジ、サイズ、作成日付、URL などの情報が表示されます。パセッジとはページの短い断片のことですが、そこでは一致した単語が強調表示されます。
検索クエリーページのカスタマイズ
クエリーフォームには、検索コレクションの一連のチェックボックス、クエリー入力ボックス、および送信ボタンが含まれます。フォームは、<s1ws:form> タグに加えて <collElem>、<queryBox>、<submitButton> の各タグ、およびそれらのデフォルト値を使って作成されます。
<s1ws:form>
<s1ws:collElem>
<s1ws:queryBox> <s1ws:submitButton>
</s1ws:form>
クエリーフォームは、ページの中央やサイドバー上など、ページ内の任意の場所に配置できます。また、コレクション選択ボックス、クエリー文字列入力ボックス、送信ボタンが水平方向に一直線に並ぶクロスバーや、コレクションがチェックボックスとして表示され、その下にクエリー入力ボックスと送信ボタンが配置されるブロックなど、さまざまな形式で表示することもできます。
次の各例は、<searchForm> タグセットを使ってさまざまな形式のクエリーフォームを作成する方法を示しています。
水平バー
次のサンプルコードは、すべてのコレクションの選択ボックス、クエリー入力ボックス、および送信ボタンがすべて 1 行に配置されたフォームを作成します。
<s1ws:form>
<table cellspacing="0" cellpadding="3" border="0">
<tr class="navBar">
<td class="navBar"><s1ws:collElem type=”select”></td>
<td class="navBar">
<s1ws:querybox size="30">
<s1ws:submitButton class="navBar" style="padding: 0px; margin: 0px; width: 50px">
</td>
</tr>
</table>
</s1ws:form>
サイドバーブロック
フォーム要素がサイドバーに配置され、サイドバーのほかの項目と同じ形式のタイトル「Search」を含むようなフォームブロックを作成できます。そのような配置の効果は、次の図に示すようになります。
フォーム要素がサイドバーに配置された、カスタマイズ後のクエリーページ
次に示すサンプルコードでは、フォームの本体部分に、選択可能な検索コレクションを表示するチェックボックスが 3 つ含まれており、それらは 1 列に並んでいます。クエリー入力ボックスと送信ボタンはその下に配置されています。
<s1ws:searchForm>
<table>
<!--... ほかのサイドバー項目 ... -->
<tr class="Title"><td>Search</td></tr>
<tr class="Body">
<td>
<table cellspacing="0" cellpadding="3" border="0">
<tr class="formBlock">
<td class="formBlock"> <s1ws:collElem type="checkbox" cols="1" values="1,0,1,0" /> </td>
</tr>
<tr class="formBlock">
<td class="formBlock"> <s1ws:querybox size="15" maxlength="50"> </td>
</tr>
<tr class="formBlock">
<td class="formBlock"> <s1ws:submitButton class="navBar" style="padding: 0px; margin: 0px; width: 50px"> </td>
</tr>
</table>
</td>
</tr>
</table>
</s1ws:searchForm>
検索結果ページのカスタマイズ
検索結果は次のようにして生成されます。
-
<formAction> タグがすべてのフォーム要素の値を取得し、基本的な検証処理を行う。
-
<search> タグ、<resultIteration> タグ、およびその他のタグが <formAction> タグの内側で発生し、すべてのフォーム要素の値にアクセスする。
-
<search> タグが <formAction> からのクエリー文字列とコレクションを使って検索を実行し、その検索結果を pageContext に保存する。
-
続いて、<resultIteration> タグが結果セットを取得し、繰り返し処理を行う。
タグの属性値を変更するだけで、検索結果ページをカスタマイズできます。
次のサンプルコードは、まずタイトルバーを表示し、次に指定された件数のレコードを表示し、最後にナビゲーションバーを表示します。タイトルバーには、検索に使用されたクエリー文字列と、1– 10 などのような、返されたレコード合計数の範囲が含まれます。レコードセクションにはレコードごとに、ファイルへのリンクを含むタイトル、キーワードが強調表示された最大 3 つのパセッジ、URL、作成日付、およびドキュメントのサイズが表示されます。
このセクションの末尾にあるナビゲーションバーは、前ページと次ページへのリンク、および現在のページの前後にある 8 つの追加ページへの直接のリンクを提供します。
<s1ws:formAction />
<s1ws:formSubmission success="true" >
<s1ws:search scope="page" />
<!--search results-->
(...html を省略...)
<s1ws:resultStat formId="test" type="total" /></b> Results Found, Sorted by Relevance</span></td><td>
<span class="body"><a href="/search/search.jsp?">Sort by Date</a></span></td>
<td align="right"><span class="body">
<s1ws:resultNav formId="test" type="previous" caption="<img border=0 src=\\"images/arrow-left.gif\\" alt=\\"Previous\\">" />
<s1ws:resultStat formId="test" type="range" />
<s1ws:resultNav formId="test" type="next" caption="<img border=0 src=\\"images/arrow-right.gif\\" alt=\\"Next\\">" />
<!img alt="Next" src="images/arrow-right.gif" border="0" WIDTH="13" HEIGHT="9">
(...html を省略...)
<table border=0>
<s1ws:resultIteration formId="test" start="1" results="15">
<tr class=body>
<td valign=top>
<s1ws:item property=’number’ />.
</td>
<td>
<b><a href="<s1ws:item property=’url’ />"><s1ws:item property=’title’ /></a></b>
<br>
<s1ws:item property=’passages’ />
<font color="#999999" size="-2">
<s1ws:item property=’url’ /> -
<s1ws:item property=’date’ /> -
<s1ws:item property=’size’ /> KB
</font><br><br>
</td>
</tr>
</s1ws:resultIteration>
</table>
(...html を省略...)
<s1ws:resultNav formId="test" type="previous" />
<s1ws:resultNav formId="test" type="full" offset="8" />
<s1ws:resultNav formId="test" type="next" />
(...html を省略...)
</s1ws:formSubmission>
次の図に、カスタマイズ後の検索結果ページを示します。
カスタマイズ後の検索結果ページ
この基本的な検索結果インタフェースは、タグの操作や HTML の変更を行うことで、簡単にカスタマイズすることができます。たとえば、ナビゲーションバーをコピーし、それを検索結果の前に配置することができます。また、検索レコードの任意のプロパティーの表示/非表示を選択することもできます。
<search>、<resultIterate>、およびその関連タグは、フォームと組み合わせて使用できるだけでなく、特定のトピックを一覧表示するために使用することもできます。次のサンプルコードは、あるサイト上で Java Web サービスに関する記事のトップ 10 を一覧表示します。
<s1ws:search collection="Articles" query="Java Web Services" /> <table cellspacing="0" cellpadding="3" border="0"> <tr class="Title"><td>Java Web Services</td></tr> </table> <table cellspacing="0" cellpadding="3" border="0"> <s1ws:resultIteration> <tr> <td><a href="<s1ws:item property=’URL’ />"> <s1ws:item property=’Title’/></a></td> </tr> </s1ws:resultIteration> </table>
フォームと結果をカスタマイズしてそれぞれ独立したページに格納する
フォームページと結果ページをそれぞれ独立させる必要がある場合、<form> タグセットを使ってフォームページを作成し、<formAction> タグセットを使って結果ページを作成する必要があります。
スムーズなページフローを実現できるよう、フォームページへのリンクを結果ページに追加する必要があります。
タグ規約
次のタグ規約に注意してください。
-
タグのクラスはパッケージ com.sun.web.search.taglibs に属する。
-
pageContext のすべての属性は、プレフィックス com.sun.web を持つ。たとえば、検索結果に対する属性は com.sun.web.searchresults.form_id である。ここで、form_id はフォームの名前である。
-
タグライブラリはプレフィックス s1ws を使って参照される。タグとその属性の名前は大文字と小文字の混在形式にする。具体的には、pageContext のように、名前に含まれる各単語の先頭文字を大文字にする。
タグの仕様
Sun Java System Web Server には、検索インタフェースの検索クエリーページと検索結果ページのカスタマイズに使用可能な一連の JSP タグが含まれています。
検索ページのカスタマイズに使用可能な JSP タグの完全な一覧については、『Sun Java System Web Server 7.0 Developer’s Guide to Web Applications』を参照してください。
- © 2010, Oracle Corporation and/or its affiliates