Cacooの図を外部のウェブページへ埋め込む

チームメンバーに図を見てもらうには、あらかじめその図を公開する必要があります。

まず、編集メニュー上の「図の設定」タブをクリックします。

「図の設定」パネルの中心あたりに、「公開設定」の項目があります。「URLで図を公開」の隣のチェックボックスにチェックをつけ、下部の「設定を更新」ボタンをクリックしてください。

※ 図を公開した後に、図の変更をした場合は、必ず保存をしてください。保存を行うまで、公開された図に変更は反映されません。

次に図のビューワに戻って「URLの共有」ボタンをクリックします。

Share_URL_JP.png

1枚のシートを埋め込む

図から1枚のシートを埋め込む方法を説明します。

図のビューワーで見てもらいたいシートを表示し、「シート画像」にある「コピー」ボタンをクリックしてください。

「copied!」と表示されたら画像のURLがクリップボードにコピーされています。

あとはWebサイトのhtmlに、imgタグを追加して、srcにさっきコピーしたURLを指定するだけです。

<img src="https://cacoo.com/diagrams/pByowlpiZ7YTV7UN-5BBE5.png">

すると、その画像がWebサイト上で見られるようになります。

全ての図を埋め込む

次に、全てのビューワーを見せる方法を説明します。

ビューワーには◀▶ボタンがついていて、図のシートを切り替えることができるようになっています。たくさんのシートがある場合はこちらの方が見やすいかもしれませんね。

図の詳細画面の「URLの共有」ボタンをクリックして「埋め込みようビューワー」の項目を先ほどと同じようにボタンを押してコピーしてください。

htmlにそのまま貼り付けましょう

<iframe src="https://cacoo.com/diagrams/pByowlpiZ7YTV7UN/view" width="402" height="330" frameborder="0" scrolling="no"></iframe>

Webサイトにはビューワーがあり、規定サイズは400x300に設定されています。

そのサイズを少し大きく(600x500)するよう設定を変更し、HTMLコードを編集してデフォルトで2枚目のシートが見えるようにしてください。

<iframe src="https://cacoo.com/diagrams/pByowlpiZ7YTV7UN/view?w=600&h=500&sn=2" width="602" height="530" frameborder="0" scrolling="no"></iframe>

黄色の部分が前回からの変更部分です。URLに「w」と「h」というパラメータを追加して図のサイズを指定しています。「sn」というパラメータで最初に表示するシートの番号を指定します。widthには「wの値+2」、heightには[hの値+30」を指定してください。