Application Builder での検索結果への埋め込み Ruby (ERB) の追加

カスタム検索結果を提供するために、エンティティー構成に埋め込み Ruby コード (ERB) を追加できます。

Application Builder で検索を実行すると、一致するエンティティーがユーザーに返されます。カスタム ERB を追加することによって、各エンティティー・タイプからの結果に固有のルック・アンド・フィールを指定できます。ERB を使用すると、結果にカスタム HTML や Ruby コードを追加できます。

注: 検索結果にカスタム・コンテンツを追加する場合は、ERB に関する実務上の知識を持っていることが推奨されます。

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 フィールド (グローバル表示オプション) に追加できます。

重要: この 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 エンティティーに変更なしで追加できます。

注: この例では、新規チャート・オブジェクトを作成することによって Highcharts が呼び出されます。これは、チャート・ウィジェットを使用したチャートの作成とは異なりますが、チャート作成のために同じ API が使用されます。

<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>