2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「プリザンターのダッシュボード」×「Metabaseの埋込」でレスポンシブ対応をさせる方法

Last updated at Posted at 2025-03-10

はじめに

プリザンターのダッシュボード機能のカスタムHTMLパーツを使用してMetabaseの埋込あいてむをレスポンジブ対応&パーツサイズの可変サイズに動的に対応させる方法を紹介します。

現状を見てみる

Metabaseで埋込用の要素を取得すると次のようになっています。

<iframe
    src="https://*****/public/question/e05274f1-3388-4211-8586-8a0ce21be55b"
    frameborder="0"
    width="800"
    height="600"
    allowtransparency
></iframe>

これをカスタムHTMLパーツでそのまま埋込するとこのような表示になります。
image.png
パーツのサイズに関係なく、要素中で指定されているサイズそのままで表示されます。サイズも固定値のため要素のサイズやウインドウのサイズを変えても何も変わりません。

サイズ指定を外してみる

先ほどのHTMLからサイズ指定を外してみます。

<iframe
    src="https://*****/public/question/e05274f1-3388-4211-8586-8a0ce21be55b"
    frameborder="0"
    allowtransparency
></iframe>

image.png
最小サイズ表示になります。

サイズ指定を入れてみる

要素にフィットさせるとなると、iframe自体に要素サイズを指定することを思いつきます。まずは、要素に直接サイズを指定してみます。
image.png
image.png
横幅は想定通りに要素いっぱいまで広がりましたが、高さが広がりません。

実際の要素を見てみる

実際の要素を見てみると.grid-stack-item > #DashboardPart_1 > .dashboard-custom-html-bodyとカスタムHTMLは3つの要素にくるまれていることが分かります。

<div class="grid-stack-item ui-resizable-autohide" gs-x="0" gs-y="0" gs-w="12" gs-h="52" gs-id="1">
    <div class="grid-stack-item-content">
        <div data-id="1" id="DashboardPart_1">
            <div class="dashboard-custom-html-body">
                <iframe src="https://*****/public/question/e05274f1-3388-4211-8586-8a0ce21be55b" frameborder="0" allowtransparency="" style="
    width: 100%;
    height: 100%;
"></iframe>
            </div>
        </div>
    </div>
    <div class="ui-resizable-handle ui-resizable-se" style="z-index: 100; user-select: none;"></div>
    <button id="DashboardRefresh_1" type="button" class="dashboard-part-refresh" style="opacity: 0;">
        <span class="material-symbols-outlined">refresh</span>
    </button>
</div>

image.png
ここで重要になるのは.grid-stack-item-contentです。この要素にセットされているCSSは次のようになっています。

.grid-stack>.grid-stack-item>.grid-stack-item-content {
    margin: 0;
    position: absolute;
    width: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

position要素にabsoluteが指定されています。ということはここで、高さを見失っていることが分かります。

スタイルを作ってみる

高さ方向の指定をしてあげればOKということが分かったので、それを補うCSSを作成します。全てのiframeに適用されてしまうと、Metabase以外のifraceにも適用されてしまい面倒なので、Metabaseで生成された埋込コードを下記の様に編集して使用します。

<iframe
    src="https://*****/public/question/e05274f1-3388-4211-8586-8a0ce21be55b"
    frameborder="0"
-    width="800"
-    height="600"
+    class="metabase_iframe"
    allowtransparency
></iframe>

先ほどの埋込コードへの編集をふまえたCSSは次の通りです。

DashboardIframeFit.css
:has(.metabase_iframe) {
    .grid-stack > .grid-stack-item > .grid-stack-item-content {
        height: calc(100% - 20px);

        div[id^=DashboardPart] {
            height: 100%;

            .dashboard-custom-html-body {
                height: 100%;

                iframe {
                    height: 100%;
                    width: 100%;
                }
            }
        }
    }
}

これをサイトの管理のスタイルに追加して動きを見てみます。
レコーディング-2025-03-10-145710.gif
Metabaseのiframe上のイベントと一部競合するためポインタの動きに引っかかりが出てはいますが、レスポンシブについては正常に動作することが確認出来ました。全てのダッシュボードにこの動きを適用するなら、拡張スタイルに設定してしまえばOKです。

まとめ

ダッシュボードにMetabaseの埋込コードを埋め込んだときにレスポンシブ対応をさせる方法を紹介しました。この方法、他のiframeにも使える技なので是非使ってみてください。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?