Markdownにコンテンツを埋め込む¶
概要¶
TRACERYでは <iframe>〜</iframe>
タグを利用して一部サービスのコンテンツを埋め込めます。
ここでは対象サービス一覧と埋め込み方法を記述します。
現在対応しているサービス¶
ホワイトボードツール¶
作図ツール¶
プロトタイピングツール¶
Google関連¶
スライド共有¶
動画配信¶
埋め込み方法¶
Miro¶
以下の画像の手順に従いコードを取得します。
ボードを開き「Embed」をクリックします
![手順1](../_images/embed_iframe_miro_1.jpg)
生成されたコードをコピーし、Markdownにペーストします
![手順2](../_images/embed_iframe_miro_2.jpg)
またはボードのIDからコードを生成することもできます。 ボードのIDはURLから取得できます。
![手順3](../_images/embed_iframe_miro_3.jpg)
取得したボードIDを下記のiframeタグの中へ記載してMarkdownにペーストします。
<iframe width="700" height="400" src="https://miro.com/app/live-embed/ここにボードのIDを記述します/?embedAutoplay=true" frameBorder="0" scrolling="no" allowFullScreen></iframe>
公式サイトの説明も参考ください。
Cacoo¶
以下の画像の手順に従いコードを取得します。
埋め込みたい図を開き「共有」をクリックします
![手順1](../_images/embed_iframe_cacoo_1.jpg)
ダイアログ上の「リンクを作成する」をクリックして埋め込みコードをコピーし、Markdownにペーストします
![手順2](../_images/embed_iframe_cacoo_2.jpg)
Figma¶
以下の画像の手順に従いコードを取得します。
埋め込みたい図を開き「Embed」をクリックします
![手順1](../_images/embed_iframe_figma_1.jpg)
生成されたコードをコピーし、Markdownにペーストします
![手順2](../_images/embed_iframe_figma_2.jpg)
公式サイトの説明も参考ください。
diagrams.net¶
以下の画像の手順に従いコードを取得します。
「File」->「Embed」->「IFrame」をクリックします
![手順1](../_images/embed_iframe_diagramsnet_1.jpg)
コードの設定を行います
![手順2](../_images/embed_iframe_diagramsnet_2.png)
生成されたコードをコピーし、Markdownにペーストします
![手順3](../_images/embed_iframe_diagramsnet_3.jpg)
公式サイトの説明も参考ください。
GoogleDocs/Spreadsheet/Slide¶
以下の画像の手順に従いコードを取得します。(Spreadsheet/Slideの取得方法も同じです)
「ファイル」->「Webに公開」をクリックします
![手順1](../_images/embed_iframe_google_1.jpg)
「埋め込む」->「公開」->「OK」の順にクリックします
![手順2](../_images/embed_iframe_google_2.jpg)
生成されたコードをコピーし、Markdownにペーストします
![手順3](../_images/embed_iframe_google_3.jpg)
GoogleDrive¶
以下の画像の手順に従いコードを取得します。
「ファイル」->「Webに公開」をクリックします
![手順1](../_images/embed_iframe_google_drive_1.jpg)
「埋め込む」->「公開」->「OK」の順にクリックします
![手順2](../_images/embed_iframe_google_drive_2.jpg)
生成されたコードをコピーし、Markdownにペーストします
![手順3](../_images/embed_iframe_google_drive_3.jpg)
GoogleMaps¶
以下の画像の手順に従いコードを取得します。
「共有」をクリックします
![手順1](../_images/embed_iframe_google_maps_1.jpg)
生成されたコードをコピーし、Markdownにペーストします
![手順2](../_images/embed_iframe_google_maps_2.jpg)
公式サイトの説明も参考ください。
YouTube¶
以下の画像の手順に従いコードを取得します。
「共有」をクリックします
![手順1](../_images/embed_iframe_youtube_1.jpg)
「埋め込む」をクリックします
![手順2](../_images/embed_iframe_youtube_2.jpg)
生成されたコードをコピーし、Markdownにペーストします
![手順3](../_images/embed_iframe_youtube_3.jpg)
公式サイトの説明も参考ください。
Vimeo¶
以下の画像の手順に従いコードを取得します。
「共有」アイコンをクリックします
![手順1](../_images/embed_iframe_vimeo_1.jpg)
生成されたコードをコピーし、Markdownにペーストします
![手順2](../_images/embed_iframe_vimeo_2.jpg)
公式サイトの説明も参考ください。