マニュアルに地図やスライドを表示してみよう

文字だけのマニュアルって読むのが大変ですよね？　今回はマニュアルにいろんなものを埋め込んでしまおうという紹介をします。Runbookには埋め込み機能が備わっていて、いろんなコンテンツを記事の中に埋め込んで表示することができます。画像や動画だけでなく、地図やスライドなども埋め込むことができます。

画像を埋め込む

画像を埋め込むのは基本ですよね。ツールバーの「画像」アイコンからアップロードすることもできますし、エクスプローラーやファインダーから任意の場所にドラッグ・アンド・ドロップで埋め込むこともできます。

動画を埋め込む

動画は現在、YouTube動画にのみ対応していますが、それ以外のサービスの動画であっても、インラインフレームに対応しているものであれば表示できる場合があります。インラインフレームを埋め込む方法については後で説明します。

YouTube動画の場合は、YouTubeのURLをコピーして、本文に貼り付けるだけです。

動画が埋め込まれました！

外部サイトのプレビューを埋め込む

YouTube以外のサイトのURLを貼り付けた場合は、自動的にリンク先の情報が取得され、プレビュー表示されます（プレビューが表示されないサイトもあります）。プレビューをクリックすると、リンク先のURLを開きます。

地図を埋め込む

Webサービスによっては、外部サイトから埋め込みを行うためのインラインフレームを提供しているものがあります。Runbookから任意のインラインフレームを埋め込むことができます。ここではいくつかの例を紹介します。

Google Mapsの地図を埋め込む

Google Mapsで目的の地点の地図を開いたら、左上のメニューアイコンをクリックしてメニューを開き、「地図を共有または埋め込む」をクリックします。

「地図を埋め込む」、「HTMLをコピー」の順にクリックします。これでインラインフレームのタグがコピーされました。

先ほどURLを貼り付けたのと同じ要領で、Runbookのエディターにインラインフレームのコードを貼り付けます。

地図が貼り付けられました！

スライドを埋め込む

次にGoogleスライドのスライドを埋め込んでみましょう。Googleスライドも、インラインフレームを使った埋め込みが可能です。スライドの編集画面から、「ファイル」メニューを開き、「共有」>「ウェブに公開」をクリックします。

「埋め込む」タブをクリックして、スライドを公開します。インラインフレームのタグが表示されますので、これをコピーします。ここでコピーされるインラインフレームのタグにはheight/width要素が含まれています。インラインフレームについて知識のある方は、これらの要素を削除してください（しなくても問題ありませんが、あとで貼り付けたときにインラインフレームの縦横幅が少し縦長になることがあります）。

あとはこれまでと同様に、インラインフレームのコードをRunbookに貼り付けます。

ちゃんと貼り付けられましたね！

SkeakerDeckのスライドや、Vimeoの動画など、インラインフレームに対応しているものであれば、コードをエディタ内に貼り付けるだけで、なんでも埋め込むことができます。

Runbookの埋め込み機能を使いこなすことで、より見た目もよく、わかりやすいマニュアルを作ることができます。ぜひお試しください。