【miro】作成したボードをWEBサイトへ埋め込む方法(公開ボードのみ)

【miro】作成したボードをWEBサイトへ埋め込む方法(公開ボードのみ)

ビジネス系マインドマッパーの川添(@kawazoezoe)です。

クリエイターに人気の無限ホワイトボード「miro(ミロ)」。miroで作成したボードは、GoogleマップやYouTubeと同じようにWEBサイトやブログ等に埋め込むことができます。

👉miro(ミロ)に関する記事一覧

実際に埋め込んだデモボード

下のボードは実際に埋め込み機能を使って表示させているカスタマージャーニーマップです。

 

ボード埋め込みの手順

① Embed オプション

以下のように、[Export ] メニューの中にある [Embed(埋め込み)] オプションを見つけることができます。

【miro】作成したボードをWEBサイトへ埋め込む方法(公開ボードのみ)

埋め込みオプション

② 埋め込みメニューで設定

  • 埋め込みメニューが表示され、🌍パブリックアクセス(公開モードに切り替える)を有効にします。
  • 埋め込みウィンドウの優先サイズを設定します。
  • iframeのコードをコピーして、WEBサイト等に埋め込みます。
【miro】作成したボードをWEBサイトへ埋め込む方法(公開ボードのみ)

埋め込み設定画面

⚠️ 埋め込み後、公開共有を停止した場合は、埋め込みボードは表示されません。埋め込みウィンドウにはミロのロゴのみが表示されます。

スタートビューの設定

  • 埋め込みがアクティブになったときにボードのどの部分が最初に表示されるかを定義するこの時点で、ボードのスタートビューをチェックすることをお勧めします。
  • キャンバスを右クリックして対応するオプションを選択することで、スタートビューを設定することができます。
【miro】作成したボードをWEBサイトへ埋め込む方法(公開ボードのみ)

スタートビューの設定

自動再生を有効にする

  • ボードの自動再生を有効にしたい場合は、iFrameのコードにボードのURLの後に /?autoplay=yep を追加します。
  • 参考までに、当記事の冒頭に埋め込んだデモボードのiFrameコードを紹介します。

<iframe style=”position:absolute;top:0;left:0;width:100%;height:100%”
src=”https://miro.com/app/embed/o9J_k0fwiss=/?autoplay=yep
frameborder=”0″ scrolling=”no” allowfullscreen=””></iframe>

 

👇miroの[全概要] はこちらにまとめています。

【miro】コロナ時代の神ツール!リモートチームを一つにするオンラインホワイトボード「miro(ミロ)」

【miro】コロナ時代の神ツール!リモートチームを一つにするオンラインホワイトボード「miro(ミロ)」



あなたに最適なマインドマップツールを。

思考を整理するならマインドマップ
このブログは、世界で2,700万ユーザーのMindMeister(マインドマイスター)でアイデアを整理しています。自己分析、プレゼン資料、議事録など使い方は自由自在。