Omni の Markdown ビジュアライゼーションでできることを試してみた
こんにちは、ikumiです。
Omni のビジュアライゼーションタイプには棒グラフや表以外に Markdown があります。テキスト・画像・リンク・iframe・クエリデータをひとつのタイルにまとめて表示できる、自由度の高いビジュアライゼーションタイプです。
今回は Markdown ビジュアライゼーションでどんなことを出来るのか、色々と試してみました。
機能概要
Markdown ビジュアライゼーションは、テキスト・画像・リンク・iframe・クエリデータを1つのタイルに統合できるビジュアライゼーションタイプです。
使える要素は大きく4つあります。
| 要素 | 内容 |
|---|---|
| Markdown テキスト | 見出し・太字・リスト・コードブロックなど標準的な Markdown 記法 |
| 画像・リンク・iframe | 外部画像の埋め込み、URL リンク、外部ページの iframe 埋め込み |
| カスタムコンポーネント | <ChangeArrow>（変化量の矢印表示）・<Sparkline>（ミニグラフ） |
| Mustache 構文 | {{変数名}} の形で書くと実際の値に差し替わる穴埋め記法。クエリ結果の値を動的に埋め込める |
試してみた
事前準備
新規ワークブックで月別の売上を集計したクエリを用意しておきます。
1. Text ビジュアライゼーションを追加する
作成したクエリ上のビジュアライゼーションタイプのドロップダウンから Markdown を選択します。
Markdown の編集エリアが表示されます。初期状態ではMarkdown構文の説明やグラフサンプルなどが記載されています。
2. 基本的な Markdown を書く
まず Markdown テキストの基本的な記法を試します。編集エリアに以下を入力します。
## 月別売上サマリー
このタイルでは **月ごとの売上合計** を確認できます。
主な確認ポイント：
- 売上推移の把握
参考：[Omni 公式ドキュメント](https://docs.omni.co)
見出し・太字・リスト・リンクが正しくレンダリングされていれば問題ありません。
3. 画像・iframe を埋め込む
外部画像や Web ページも埋め込めます。
画像の埋め込み
4. カスタムコンポーネントを試す
Markdown ビジュアライゼーション専用のカスタムコンポーネントである、変化量とスパークラインの2つを試してみます。
<changearrow>— 変化量を矢印で表示する
2つの値の差分を矢印（↑ / ↓）とともに色付きで表示します。正の値は緑、負の値は赤で表示されます。current と comparison に比較する2つの値を指定します。値には .raw（生の数値）を使います。
### 実績サマリ
**{{fields.brand_ana__tran.sales_sum.label}}** （売上金額）：
**{{result._first.brand_ana__tran.sales_sum.value_static}}**
<changearrow current="{{result._first.brand_ana__tran.sales_sum.raw}}" comparison="{{result._second.brand_ana__tran.sales_sum.raw}}"></changearrow>
（前月：**{{result._second.brand_ana__tran.sales_sum.value_static}}**）
それぞれresult._first が1行目、result._second が2行目の値に対応します。
<sparkline>— スパークラインを表示する
クエリ結果をもとにタイル内にミニサイズの折れ線グラフまたは棒グラフを表示します。field 属性に view_name.field_name の形式でフィールドを指定します。
<div><sparkline field="brand_ana__tran.sales_sum" width="200" height="100"></sparkline></div>
Mustache 構文：{{変数名}}について
上のサンプルコードに出てきた {{result._first.brand_ana__tran.sales_sum.raw}} のような記述が Mustache 構文です。{{変数名}} の形で書くと、クエリ結果の実際の値に自動で差し替わる穴埋め記法です。
変数のパスは {{ inspect }} を Markdown 編集エリアに入力すると確認できます。本ブログではMustache構文について詳しくは触れませんので、こちらのドキュメントも参考にしてください。
また、結果テーブルのセルを右クリックすると、そのセルの値に対応する Mustache 構文を直接コピーできます。変数パスを手で調べなくてもすぐに使えて便利です。
最後に
Omni の Markdown ビジュアライゼーションでできることを色々試してみました。
Markdown テキストや画像・iframe の埋め込みは設定がシンプルで、テキストを添えたリッチなタイルをすぐに作れます。<changearrow> や <sparkline> のカスタムコンポーネントを使えば、コードなしで変化量やミニグラフも表示できて便利ですね。ぜひ試してみてください！
