Gather.Town で連携出来る「Webサイト埋め込み(Embedded Websites)」を試してみる

しんや

2021.03.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Gather.Townを使い始めて1ヶ月少々経ちますが、使い勝手や見た目の面白さが好評で社内でも利用者がと連携スペースが増えてきています。

利用者が増えてくると色々なことがしたくなってくるのがスペースの管理者の性(さが)。そんな"創作意欲"を満たす様々な仕掛けや連携をGather.Townで行うことが出来ます。

当エントリでは、Gather.Townで利用出来るオブジェクトで実現可能な『Webサイトの埋め込み(Embedded Websites)』について幾つか実例を交えて紹介していきたいと思います。

目次

　

オブジェクトの基本的な概念

Gather.Townのヘルプでは『Objects 101』という見出し項目の中で、扱えるオブジェクトの基本的な部分について解説を行っています。

『オブジェクト』とは、Gather.Townの背景画像上に配置・表示することの出来る画像要素を指します。Gather.Townの機能として提供されている『オブジェクトピッカー(Object Picker)』で予め用意されている様々なオブジェクトを配置することも出来るし、任意の画像を『カスタムオブジェクトイメージ』としてアップロードすることも可能です。カスタムオブジェクトイメージの場合、32x32ピクセルを最小単位としたサイズでの表示を想定した画像を用意しておいた方がGather.Townスペース上での世界観とマッチするので考慮しておくべきポイントになります。(64x64ピクセルの2マス四方の画像とか、32x128ピクセルの横長画像...というようなイメージです)

下記の動画では、Gather.Townで使う事の出来る『オブジェクトピッカー(Object Picker)』の挙動や概要を確認することが出来ます。

プランにおける各種オブジェクト数の『制限』は、下記の料金に関するページをご参照ください。

相互作用オブジェクト(Interactive Object)は、更に以下2つのカテゴリに分けられます。

　

Basic Interactive Objects

Gatherにアップロードされた画像やテキストを見ることが出来るオブジェクト。

  • 画像埋め込み(Embedded Image)：画像ファイル(.png、.jpeg、.gif)をアップロードしてGatherのiframe内に表示
  • ノートオブジェクト(Note Object)：入力されたテキストを表示したり、ユーザーが新しいウィンドウで開くためのテキストリンクを提供

　

Advanced Interactive Objects

Gatherの外部リンクを表示したり開いたりすることが出来るオブジェクト。ここにはSpotlight Tilesも含めています。

  • 動画埋め込み(Embedded Video)：埋め込み可能なビデオやライブストリームへのリンクをGatherのiframe内に表示
  • Webサイト埋め込み(Embedded Website)：埋め込み可能なWebサイトへのリンクをGatherのiframe内に表示
  • 外部通話(External Call)、Zoom通話連携(Zoom Call Integration)：外部通話（Zoom、Webex、Teamsなど）にリンク。通話は新しいウィンドウで開き、Gatherのブラウザタブを自動でミュートする形で連携
  • スポットライトタイル(Spotlight Tile)：このタイルタイプの上に立っているユーザーは、自分のビデオとオーディオをルーム内の全員にブロードキャストすることができる

　

オブジェクト作用の有効距離について

相互作用オブジェクトには『Activation Distance』という値が設定されています。この値は、ユーザーがオブジェクトにアクセスし、アクション(閲覧)を起こすことの出来る距離タイル数となります。設定値における挙動のポイントは以下の通り。

  • 対角線をすべて含み、オブジェクトのイメージが含まれるすべてのタイルの一番外側の端から測定される
  • 初期設定値は『3』。
  • 値を『1』に設定した場合、オブジェクトに直接隣接している人だけがインタラクティブに操作可能
  • 値を『0』に設定した場合、オブジェクトの真上に立っている人だけがインタラクティブに操作可能


(※Activation Distance=3(デフォルト値)で動画埋め込みを行った場合。要素から4タイルの距離にある場合、オブジェクトは反応していませんが...)


(※有効範囲である『3』タイルの距離に入るとオブジェクトが反応し、操作出来るようになります)

　

「Webサイト埋め込み」を実際に試してみた

ここからは、ブログタイトルでも言及している『Webサイトの埋め込み』を実際に試してみたいと思います。

「Webサイト埋め込み(Embedded Website)」の機能を使うと、iframe内でそのコンテンツを直接Gatherで開くことが出来ます。これらにはGoogleドキュメント／スプレッドシート／フォームなども含まれます。

埋め込みを行う際に気を付けておくポイントが以下2点ありますので押さえておいてください。

  • 1). HTTPSサイトであること(HTTPサイトはセキュリティ上の問題があるため動作しません)
  • 2). Webサイト管理者埋め込みを許可していること。許可していない場合は"接続が拒否された"旨メッセージが表示されます。

　

任意のウェブサイト

ここからは実際の設定・連携を試していきます。まずは任意のWebサイトから。ここでは弊社ブログ『DevelopersIO』のトップページ( https://dev.classmethod.jp/ )を使います。

Gather.Townのスペース編集画面(MapMaker)にて、オブジェクト追加のボタンを押下、オブジェクトを選択した際に[Embedded website]をクリックすると幾つかの項目設定が行えます。『Website(URL)』の欄にURLを入力します。

オブジェクト設定完了時の画面。連携するURLを確認出来ます。

オブジェクトに近付くと案内メッセージ(初期設定では[Press x to interact])が表示されます。案内に従い[x]ボタンを押下すると...

ウインドウが起動し、指定のWebサイトが表示されました。画面は必要に応じてスクロール可能です。

　

スライド資料(Slideshare)

次はSlideshareです。SlideshareをGather.Town上で共有する場合、通常Webサイト埋め込みの情報を得る手順と同様の操作を行います。Slideshareスライド表示画面で[Share]ボタンを押下し、生成されるURLを控えておきます。

下記は生成される情報を改行を加えて見易くしたものです。この中に記載されているsrcの値を使います。

<iframe
  src="//www.slideshare.net/slideshow/embed_code/key/yogy7AGB6uJH9P"
  width="595" height="485"
  frameborder="0" marginwidth="0" marginheight="0" scrolling="no"
  style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;"
  allowfullscreen>
</iframe>
<div style="margin-bottom:5px">
<strong>
<a href="//www.slideshare.net/__john_smith__/pocai" title="PoCで終わらせない！データ分析・AI活用" target="_blank">PoCで終わらせない！データ分析・AI活用</a>
</strong> from
<strong><a href="https://www.slideshare.net/__john_smith__" target="_blank">__john_smith__</a></strong> </div>

httpsプロトコルが欠けているので追記したこちらのURLを使います。

<iframe loading="lazy" title="PoCで終わらせない！データ分析・AI活用" src="https://www.slideshare.net/slideshow/embed_code/key/yogy7AGB6uJH9P" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/__john_smith__/pocai" title="PoCで終わらせない！データ分析・AI活用" target="_blank">PoCで終わらせない！データ分析・AI活用</a> </strong> from <strong><a href="https://www.slideshare.net/__john_smith__" target="_blank">__john_smith__</a></strong> </div>

オブジェクト設定時にWebサイト埋め込み同様のURL設定を行うことでSlideshare資料をGather.Town上で表示させることが出来ました。

　

スライド資料(SpeakerDeck)

3つ目はこちらもスライド関連となる「SpeakerDeck」。こちらのケースではサービスから利用可能な埋め込みURLでは欲しい情報を得られないので、下記のサービスを使って動作するURLを取得します。

上記サイトにアクセスし、対象SpeakerDeckスライド資料URLを入力して[CHECK IT]を押下。埋め込み用のコード一式が生成されるので、その中のiframeタグ内のsrc属性の値を控えておきます。

あとは同様の設定を行うことで表示出来るようになります。

　

PDF

PDFをGather.Town上で共有させたい場合、Googleドライブ等のファイル共有が可能なサイトにアップロードして「埋め込みWebサイトオブジェクト」として連携する必要があります。

GoogleドライブにPDFをアップロードし、対象ファイルを右クリックして「リンクを取得」を選択。

[リンクをコピー]でURLを取得します。

[Before]のようなURLが取得出来るので、末尾の「view?」以下の情報をpreviewに変換。Gather.TownのWebサイト埋め込みにてそのURLを指定します。

[Before]
https://drive.google.com/file/d/Xxx-XxxxxxXXxxxxx/view?usp=sharing
[After]
https://drive.google.com/file/d/Xxx-XxxxxxXXxxxxx/preview

すると、以下のようにPDFをGather.Townから表示させることが出来ました。

　

その他

その他該当ドキュメントでは以下のオブジェクトにおけるGather.Townでの共有方法を紹介しています。興味のある方はチャレンジしてみてください。

　

まとめ

というわけで、Gather.Townにおける「Webサイト埋め込み」の方法を紹介しました。

スペース上に集まるユーザー間で共有しておきたい情報はそのまま「Webサイトとしてアクセス出来る情報」として参照出来るようにしておくと何かと便利でしょう。その際に今回紹介した連携方法をお試し頂けますと幸いです。

customer-story-analytics