Gather.Townからオンライン作図サービス「Cacoo」連携を行う

Gather.Townでは、オブジェクトに設定可能な「埋め込みURL」を活用することで、Gather.Town経由で様々なサービス連携を行うことが出来ます。

当エントリでは、オンライン作図サービスの「Miro」をGather.Town上から連携して利用する方法について紹介したいと思います。

目次

• 参考情報
• Gather.Town＆Cacoo連携実践
• まとめ

　

参考情報

Cacoo側で紹介されている「埋め込みオブジェクトの設定」に関する情報は以下となります。

• Embedding your Cacoo diagram in an external webpage – Help & Support | Cacoo

　

Gather.Town＆Cacoo連携実践

ここからは実際にCacooで作成した図をGather.Townで連携する方法について見ていきます。まずは任意のCacooコンテンツを用意。その上で画面右上の[共有]から、コンテンツの埋め込みURLを取得します。

この時の情報はiframeタグで構成されていますので、必要な部分を抜粋してコピー。src属性のURL部分を控えておいてください。

<iframe
  src="https://cacoo.com/diagrams/qe0UAYlkQ5JtNueR/view?si=572F9&w=900&h=675"
  width="902" height="705" frameborder="0" scrolling="no">
</iframe>

Gather.Town上でWebサイト埋め込みオブジェクトを用意、URL部分に上記で控えたURLを指定します。

任意の場所にオブジェクトを配置し、アクセスを試してみます。オブジェクトに近付いて[x]ボタンを押下。

以下のような形でコンテンツが表示されました。

Cacooの図の中に複数のシートが有る場合、そのシートを個別に指定する形で連携することも可能です。下記の様な形でシートを追加しておき、

前述同様の手順で埋め込み用のURLを控えておきます。

別途Gather側でもオブジェクトを設定・配置し直し、アクセスしてみると...

以下のような形でコンテンツのページ番号が可変する形で意図した内容が表示されていました。

※ただGather.TownでのCacoo連携、試してみて分かったのですが「編集可能な状態での共有、埋め込み表示」は出来ていないようです。上記連携コンテンツの図の部分をクリックすると編集画面に遷移するのですが、Gather.Townを表示しているブラウザとは別のブラウザウィンドウが起動してしまいます。なのでCacooをGather.Town上で編集を伴う共有を行う場合、別途ブラウザで編集状態にあるものを画面共有(Screenshare)する方が良さそうです。

　

まとめ

という訳で、Gather.TownからCacooのダッシュボードを連携する際の手順の紹介でした。

• Gather.Town の記事一覧 | DevelopersIO