概要
7/28にリリースされた新機能「ダッシュボード」のカスタムHTMLで外部サイトの内容を埋め込みます。
今回はMetabaseで作成したグラフを埋め込んでみます。
ダッシュボード機能
プリザンターに待望のダッシュボード機能が追加されました。
テーブルやフォルダへのリンク集を作る「クイックアクセス」、最新情報を表示する「タイムライン」、マークダウン形式で文章を表示する「カスタム」、そしてHTML形式で様々な表現ができる「カスタムHTML」という４つのパーツを自由に組み込むことができます。
詳しくはオンラインマニュアルを参照ください。
ダッシュボードに表示するグラフの作成
今回はダッシュボードにグラフを表示します。グラフはOSSのBIツールであるMetabaseを利用します。
実はMetabaseを触るのが今回初めてでしたので、以下にMetabaseの準備からプリザンターとの連携、グラフ作成までの手順を簡単に記載します。
Meatabaseの準備
Metabaseの環境準備方法はいろいろありますが、今回はローカルPCでDockerイメージを取得し起動します。
https://www.metabase.com/start/oss/ に記載しているコマンド
docker run -d -p 3000:3000 --name metabase metabase/metabase
を実行し、起動出来たら http://localhost:3000 にアクセスします。ユーザ登録画面が出ますので、登録完了すると以下画面が表示します。
Meatabaseとプリザンターの連携
今回グラフを作成するデータはプリザンター側に準備しますので、MetabaseにてでプリザンターのDBに対する接続設定を行います。
画面右上の歯車アイコンから「管理者設定」－「データベースを追加する」をクリックし、DB接続情報を入力します。
設定に成功すると「データの閲覧」からプリザンターのテーブル一覧が表示できます。
データ準備
プリザンター側でグラフ用のデータを作成します。今回は製品種類、売上日、売上数を管理するようなテーブルを記録テーブルで作成し、データを登録します。
Metabase側でデータ抽出
Metabaseの右上の「+ New」をクリック、「SQLクエリ」を選択します。データベースを選択後、下記のように記録テーブル（Results）から必要な項目を抽出したselect文を作成します。
select結果が表示したら、画面下部のグラフアイコンをクリックするとグラフが表示します。
画面上部の「+ 探索結果」をクリックし、「フィルター」で売上日で「現在の月」を指定すると、下図のように範囲を絞り込んだグラフが完成します。
画面右下の「共有」アイコンをクリックし、「公開埋め込み」のスニペットをコピーします。
ダッシュボードへの埋め込み
プリザンターでマニュアルを参照しながらダッシュボードを作成し、「カスタムHTML」パーツを追加します。
カスタムHTMLの詳細設定で、「内容」欄に先ほどコピーしたスニペットを貼り付けます。
ダッシュボードを開く下記のようにMetabase側のグラフが表示します。
グラフの高さ、幅はスニペットにあるwidthとheightで調整可能です。
まとめ
ダッシュボードのカスタムHTMLを使用すると、スクリプトを一切書かずにMetabaseのグラフを表示することができました。他にもyoutubeやGoogleMapなどの内容も同様の手順で埋め込むことができます。※1
ダッシュボード機能が追加になったことで、より皆様のニーズにこたえられる製品になったと思いますので、ぜひ使ってみてください。
注意
※1 youtubeやGoogleMapの利用規約に違反しないよう注意してください。自己責任でお願いします。