iframeを使ってWebサイトに
Miroを埋め込もう！

Miro（ミロ）のiframeとは

Miroはiframeに対応しており、WebサイトにMiroのホワイトボードを埋め込むことができます。
Webサイト上でホワイトボードを表示・動作させれば、表現の幅がぐんと広がります。
また、埋め込んだホワイトボードの権限を変更すれば、「閲覧のみ」や「編集可能」といった制御も可能になります。

以下は実際にiframeで埋め込んだMiroのホワイトボードです。実際に触ってみてください。

MiroのiframeをWebサイトに埋め込んでユーザーに公開するには、以下の2つのステップが必要です。
・iframeの取得と埋め込み
・iframeの設定変更

本記事ではMiroのiframeをWebサイトに埋め込むまでをご紹介します。

iframeの取得と埋め込み

こちらではMiroのiframeの取得方法について解説します。 6ステップでiframeが取得できますので、ぜひご活用ください。

①Web上に埋め込みたいホワイトボードをMiro上で開きます。

②左上メニューのエクスポート機能から、「埋め込み」を選択します。

③Web上で表示するホワイトボードの表示形式を選択します。

④Webで表示するホワイトボードの初期値を設定します。

⑤埋め込むホワイトボードの表示サイズを設定します。

⑥iframeのコードをコピーして、埋め込みたいWebページのソースに張り付けます。

以上の操作でWebサイトにMiroの埋め込みが完了です。

iframeの設定変更

Miroのiframeは埋め込み後に閲覧者に付与する権限を変更したり、埋め込み自体の表示方法を変更できます。

権限を変更する

サイトに埋め込んだiframeは、閲覧者に対して操作を限定することが可能です。
ここでは、閲覧者の権限変更について紹介します。

①Web上公開しているホワイトボードをMiro上で開きます。

②右上メニューから「共有」を選択します。

③「リンクを知る全員が」と記載されている箇所の設定を、以下のいずれかに変更します。

・Can view ・・・・・閲覧のみ
・Can comment・・・閲覧とコメントのみ
・Can edit ・・・・・編集可
・No access ・・・・アクセス不可

以上で閲覧者に対して操作の限定が完了です。
上記でNo accessとした場合は、自身またはチームで参照権限のある人だけがiframeを通じてボードを参照できます。

Webサイトを開いた際に、デフォルトでホワイトボードを表示する

通常、Webサイトに埋め込んだホワイトボードは「See the Board」ボタンが表示され、 このボタンを押下することでホワイトボードを表示します。
ここでは、「See the Board」ボタンを押さないで表示する設定をご紹介します。

「See the Board」ボタンの非表示は、iframeに以下のパラメーターを追加することで可能です。
※表示しているホワイトボードの表示形式によって、パラメーターは異なります。
・プレゼンテーション ・・・・iframe コードのボード URL の後に「&autoplay=yep」を追加します。
・フリー ナビゲーション・・・iframe コードのボード URL の後に「&embedAutoplay=true」を追加します。

            
            <iframe src="https://miro.com/app/live-embed/uXjVOVMe_MY=/?moveToViewport=1438,-488,3525,1650&embedAutoplay=true" frameborder="0" scrolling="no" ></iframe>