Application Builder での検索結果への埋め込み Ruby (ERB) の追加
カスタム検索結果を提供するために、エンティティー構成に埋め込み Ruby コード (ERB) を追加できます。
Application Builder で検索を実行すると、一致するエンティティーがユーザーに返されます。カスタム ERB を追加することによって、各エンティティー・タイプからの結果に固有のルック・アンド・フィールを指定できます。ERB を使用すると、結果にカスタム HTML や Ruby コードを追加できます。
ERB で Ruby コードを呼び出す場合、subject、entity、および current_user ヘルパー変数が使用可能です。これらの変数を使用して、ページ・コンテキスト、現行エンティティー、またはユーザーに固有のカスタム情報を作成できます。次の例は、検索結果に追加できるいくつかのカスタム ERB を示しています。各例は、完了したチュートリアル (チュートリアル: アプリケーションの作成) の book エンティティーに追加できます。
例 1: 基本的なエンティティー・リンク
この例では、このエンティティー・タイプの各結果に含まれるエンティティー・タイプが、そのエンティティー・タイプのリスト・ページへのリンクとしてリストされます。この例はどのエンティティーでも使用できます。
<B>Type: <%= link_to entity.type, entity.type %></B>
例 2: 複合外部リンク
この例では、エンティティーのタイトル (entity.title) および現在の照会 (subject.query) が使用され、頻度の高い Web 検索の照会へのリンクが作成されます。この例はどのエンティティーでも使用できます。
<HR/>
<B><%= link_to "Google it!", "http://google.com/search?q='" + entity.title + " " + subject.query + "'" %></B>
<BR/>
<HR/>
例 3: カスタム・レイアウトのエンティティー・フィールド
この例では、結果のフィールド (entity['field_name'].first) がテーブルで表示されます。次の例は、完了したチュートリアル (チュートリアル: アプリケーションの作成) の book エンティティーに変更なしで追加できます。<B class="custom_result_label">SALES:</B>
<HR/>
<table class="custom_result_table">
<tr>
<th>2008</th>
<th>2009</th>
<th>2010</th>n
<th>2011</th>
</tr>
<tr>
<td><%= entity['sales_2008'].first %></td>
<td><%= entity['sales_2009'].first %></td>
<td><%= entity['sales_2010'].first %></td>
<td><%= entity['sales_2011'].first %></td>
</tr>
</table>
この例の ERB では、それほど魅力的なテーブルは返されません。ユーザー・エクスペリエンスを向上させるために、アプリケーションにカスタム CSS を追加することを検討する場合があります。テーブルの外観を向上させるために、次のカスタム CSS をカスタム CSS フィールド (グローバル表示オプション) に追加できます。
.custom_result_label {
color:blue;
font-style:italic}
.custom_result_table th {
font-weight:bold;
color:white;
text-align:center;
padding-top:5px;
padding-bottom:4px;
background-color:#34a8da
}
.custom_result_table td
{
font-size:1em;
border:1px solid #34a8da;
padding:3px 20px 2px 20px;
}
例 4: エンティティー・フィールドのカスタム・チャート
次の例では、結果のフィールド (entity['field_name'].first) に基づいてチャートを作成するために Highcharts API v 3.0.6 が呼び出されます。チャートはカスタム div に追加されますが、これには、entity.title 変数を使用してエンティティーのタイトル値に基づいた ID が与えられます。次の例は、完了したチュートリアル (チュートリアル: アプリケーションの作成) の book エンティティーに変更なしで追加できます。
<div id="<%= entity.title %>_sales_info"></div>
<script>
new Highcharts.Chart({
"chart": {
"type": "bar",
"height": 200,
"renderTo": "<%= entity.title %>_sales_info"
},
"title":{
"text":null
},
"credits": {
"enabled": false
},
"xAxis": {
categories: ['2008', '2009', '2010', '2011']
},
"yAxis": {
"title": {
"text": "Sales in USD $",
}
},
"series": [{
"name": "Sales",
"data": [{
"name": "2008",
"y": <%= entity['sales_2008'].first.gsub('$','') %>,
"color": "#9fb3c1"
},{
"name": "2009",
"y": <%= entity['sales_2009'].first.gsub('$','') %>,
"color": "#4b799b"
},{
"name": "2010",
"y": <%= entity['sales_2010'].first.gsub('$','') %>,
"color": "#9fb3c1"
},{
"name": "2011",
"y": <%= entity['sales_2011'].first.gsub('$','') %>,
"color": "#4b799b"
}]
}],
"plotOptions": {
"showInLegend": false
}
});
</script>