Markdownにコンテンツを埋め込む¶
概要¶
TRACERYでは <iframe>〜</iframe> タグを利用して一部サービスのコンテンツを埋め込めます。
ここでは対象サービス一覧と埋め込み方法を記述します。
現在対応しているサービス¶
ホワイトボードツール¶
作図ツール¶
プロトタイピングツール¶
Google関連¶
スライド共有¶
動画配信¶
埋め込み方法¶
Miro¶
以下の画像の手順に従いコードを取得します。
ボードを開き「Embed」をクリックします
生成されたコードをコピーし、Markdownにペーストします
またはボードのIDからコードを生成することもできます。 ボードのIDはURLから取得できます。
取得したボード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¶
以下の画像の手順に従いコードを取得します。
埋め込みたい図を開き「共有」をクリックします
ダイアログ上の「リンクを作成する」をクリックして埋め込みコードをコピーし、Markdownにペーストします
Figma¶
以下の画像の手順に従いコードを取得します。
埋め込みたい図を開き「Embed」をクリックします
生成されたコードをコピーし、Markdownにペーストします
公式サイトの説明も参考ください。
diagrams.net¶
以下の画像の手順に従いコードを取得します。
「File」->「Embed」->「IFrame」をクリックします
コードの設定を行います
生成されたコードをコピーし、Markdownにペーストします
公式サイトの説明も参考ください。
GoogleDocs/Spreadsheet/Slide¶
以下の画像の手順に従いコードを取得します。（Spreadsheet/Slideの取得方法も同じです）
「ファイル」->「Webに公開」をクリックします
「埋め込む」->「公開」->「OK」の順にクリックします
生成されたコードをコピーし、Markdownにペーストします
GoogleDrive¶
以下の画像の手順に従いコードを取得します。
「ファイル」->「Webに公開」をクリックします
「埋め込む」->「公開」->「OK」の順にクリックします
生成されたコードをコピーし、Markdownにペーストします
GoogleMaps¶
以下の画像の手順に従いコードを取得します。
「共有」をクリックします
生成されたコードをコピーし、Markdownにペーストします
公式サイトの説明も参考ください。
slideshare¶
以下の画像の手順に従いコードを取得します。
「共有」をクリックします
生成されたコードをコピーし、Markdownにペーストします
YouTube¶
以下の画像の手順に従いコードを取得します。
「共有」をクリックします
「埋め込む」をクリックします
生成されたコードをコピーし、Markdownにペーストします
公式サイトの説明も参考ください。
Vimeo¶
以下の画像の手順に従いコードを取得します。
「共有」アイコンをクリックします
生成されたコードをコピーし、Markdownにペーストします
公式サイトの説明も参考ください。
