You are viewing documentation for Looker 25.20. Click this link to see the most recent documentation.

html

用途

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}

階層

ファイルを表示

view

フィールドタイプ

html

使用可能なフィールドタイプ

ディメンション、ディメンショングループ、メジャー

許可

HTML 式（Liquid テンプレート要素を使用する場合もあります）。末尾にセミコロン 2 つが続きます。

定義

html パラメータを使用すると、フィールドに含まれる HTML を指定できます。

Liquid 変数を使用すると、通常そのフィールドにある値にアクセスすることもできます。これにより、関連する他の Look へのリンク、外部のウェブサイトへのリンク、画像など、便利に使えるさまざまな関数を作成できます。

HTML フォーマットは、テーブル、テーブル（レガシー）、単一値のグラフと、複数のフィールドが結合された可視化のツールチップでのみレンダリングされます。地図グラフのツールチップに html パラメータを指定して配置したインタラクティブなコンテンツは、新しいダッシュボードエクスペリエンスを使用するダッシュボードではアクセスできませんが、Look、Explore、および以前のダッシュボードでアクセスできます。

コンテンツをダウンロードする場合、HTML の書式は、TXT、CSV、Excel、JSON などのテキストベースのダウンロード形式には適用されません。

有効な HTML を使用する

特定のセキュリティ侵害を防ぐため、Looker では使用できる HTML タグと属性、CSS プロパティを制限しています。詳しくは、HTML のサニタイズのドキュメントページをご覧ください。

Liquid変数

html パラメータは Liquid 変数をサポートしています。これらの変数を最大限に活用する方法については、Liquid 変数のドキュメントページをご覧ください。

例

html フィールドパラメータの使用例を次に示します。

HTML フォーマットは、テーブル、単一値のグラフと、複数のフィールドが結合された可視化のツールチップでのみレンダリングされます。地図チャートのツールチップに html パラメータを指定して配置したインタラクティブなコンテンツは、ダッシュボードではアクセスできませんが、Look と Explore ではアクセスできます。

HTML を使用してビジュアリゼーションのフィールド値のフォントと色をカスタマイズする方法のその他の例については、Looker でビジュアリゼーションを最大限に活用するクックブックの条件付き書式のカスタマイズのページとビジュアリゼーションのツールチップのカスタマイズのページをご覧ください。

`html` パラメータでの Liquid 変数の使用

この例では、ほとんどの Liquid 変数が html パラメータでどのように表示されるかを示します。total_order_amount の定義を考えてみましょう。

measure: total_order_amount {
  type: sum
  sql: ${order_amount} ;;
  value_format: "0.00"
  html:
    <ul>
      <li> value: {{ value }} </li>
      <li> rendered_value: {{ rendered_value }} </li>
      <li> linked_value: {{ linked_value }} </li>
      <li> link: {{ link }} </li>
      <li> model: {{ _model._name }} </li>
      <li> view: {{ _view._name }} </li>
      <li> explore: {{ _explore._name }} </li>
      <li> field: {{ _field._name }} </li>
      <li> dialect: {{ _dialect._name }} </li>
      <li> access filter: {{ _access_filters['company.name'] }} </li>
      <li> user attribute: {{ _user_attributes['region'] }} </li>
      <li> query timezone: {{ _query._query_timezone }} </li>
      <li> filters: {{ _filters['order.total_order_amount'] }} </li>
    </ul> ;;
}

total_order_amount に表示されるセル値は次のようになります。

• value: 8521935 • rendered_value: 8,521,935.00 • linked_value: 8,521,935.00 • link: /explore/thelook/orders?fields=orders.order_amount&limit=500 • model: thelook • view: orders • explore: order_items • field: total_order_amount • dialect: mysql • access filter: altostrat.com • user attribute: northeast • query timezone: America/Los_Angeles • filters: NOT NULL

指標の条件付き書式を設定する

値に応じてカウントを条件付きで書式設定します。

measure: formatted_count {
  type: count
  html:
    {% if value > 100 %}
      <span style="color:darkgreen;">{{ rendered_value }}</span>
    {% elsif value > 50 %}
      <span style="color:goldenrod;">{{ rendered_value }}</span>
    {% else %}
      <span style="color:darkred;">{{ rendered_value }}</span>
    {% endif %} ;;
}

`html` パラメータを使用したデータの探索

HTML フォーマットは、テーブル、テーブル（レガシー）、単一値のグラフと、複数のフィールドが結合された可視化のツールチップでのみレンダリングされます。地図グラフのツールチップに html パラメータを指定して配置したインタラクティブなコンテンツは、新しいダッシュボードエクスペリエンスを使用するダッシュボードではアクセスできませんが、Look、Explore、および以前のダッシュボードでアクセスできます。

各注文のステータスを示す status というデータにフィールドがあるとします。status に指定できる値は次のとおりです。

Paid
Shipped
Returned

データを探索する際に、ステータスごとに背景色を分けたい場合があります。これは、ディメンションの html: パラメータで Liquid html を使用して行うことができます。これは次のようになります。

dimension: status {
  sql: ${TABLE}.status ;;
  html: {% if value == 'Paid' %}
      <p style="color: black; background-color: lightblue; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% elsif value == 'Shipped' %}
      <p style="color: black; background-color: lightgreen; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% else %}
      <p style="color: black; background-color: orange; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% endif %}
;;
}

表では、status フィールドの値に応じて各セルの背景色が変化します。値が [Paid] の場合は水色、[Shipped] の場合は薄緑、それ以外の場合はオレンジになります。たとえば、テーブルに値「Returned」が含まれている場合、そのセルの背景はオレンジ色になります。

同じ構文を使用して、セルの値に基づいてアイコンや画像を追加することもできます。

dimension: status {
    sql: ${TABLE}.status ;;
    html: {% if value == 'Shipped' or value == 'Complete' %}
         <p><img src="https://findicons.com/files/icons/573/must_have/48/check.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% elsif value == 'Processing' %}
        <p><img src="https://findicons.com/files/icons/1681/siena/128/clock_blue.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% else %}
        <p><img src="https://findicons.com/files/icons/719/crystal_clear_actions/64/cancel.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% endif %}
;;
}

表では次のようになります。

Order Items Status	Order Items Count
キャンセル済み	6,316
完了	232,791
処理中	809
返品済み	2,354
発送済み	1,474

商品画像を生成する

以下に、商品の ID に基づいて <img> タグを使用して商品の画像を Looker に追加する例を示します。

dimension: product_image {
  sql: ${product_id} ;;
  html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;
}

ドリルダウンリンクの維持

html パラメータを使用して出力をフォーマットするときに、ドリルダウンリンクを維持するには、HTML タグ <a href="#drillmenu" target="_self"> を含めることができます。次に例を示します。

measure: count {
  type: count
  drill_fields: [detail*]
  html:
    <a href="#drillmenu" target="_self">
      {% if value > 10000 %}
        <span style="color:#42a338;">{{ rendered_value }}</span>
      {% elsif value > 5000 %}
        <span style="color:#ffb92e;">{{ rendered_value }}</span>
      {% else %}
        <span style="color:#fa4444;">{{ rendered_value }}</span>
      {% endif %}
    </a>;;
}

html コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

用途

定義