Matterport 3D モデルの埋め込み

 

Matterport 3D モデルへのリンクを共有しリンクをカスタマイズすることもできますが、ウェブサイトにモデルを直接埋め込むこともできます。

この場合、YouTube 動画のように、Matterport モデルはウェブページの中央に表示されます。 下記の例をご覧ください。

手順

  1. モデルを公開に設定します。
  2. モデルを追加するウェブページを決めます。
  3. 次の HTML ソースコードをウェブページに追加します。
    • <iframe width="853" height="480" src="https://my.matterport.com/show/?m=xxxxxxxxxxx" frameborder="0" allowfullscreen allow="xr-spatial-tracking"></iframe>
    • 正確な手順はウェブサイトの固有のコードによって異なります。
  4. src 属性の URL に置き換えます。
  5. 埋め込むときに「allowfullscreen」を iframe コードに追加します。

サードパーティ CMS (Wordpress、Drupal、Wix、Zendesk、 Medium) の使用

サードパーティのコンテンツ管理システムを使用してウェブサイトを管理している場合は、そのページの HTML ソースコードを開いてから、以下の手順に従う必要があります。

  1. CMS バックエンドにログインします。
  2. 編集する投稿/ページ/記事を見つけます。
  3. CMS ビューを切り替えて、ソースコードを表示します。
    • ほとんどの場合、CMS の </> ボタンをクリックすると表示できます。下記を参照してください。zendesk-open-source-code.png
    • コードを確認して <iframe> を貼り付ける正確な場所を判断するには、基本的な HTML 知識が必要になります。
    • 特定の CMS (Zendesk など) では、iframe を適切に実行するために [Allow unsafe HTML] を選択する必要があります。

Wordpress CMS 

Wordpress.com は iframe を許可していないため、Matterport 3D モデルを Wordpress の投稿に埋め込むことはできません。 ですが、Wordpress CMS を使用するウェブサイトは iframe を許可しているので、iframeコードを任意のページに直接貼り付けることができます。 そのためには次の WP プラグインを使用します。

  1. Embed.ly プラグイン
  2. Embed.ly の Matterport サポートプラグイン
  3. iframe プラグイン
  4. WP3D モデル

Wix 

以下の手順に従って、Matterport モデルを Wix ページに埋め込みます。 

  1. コードを埋め込む Wix ページを開きます。
  2. [追加 (Add)] > [その他 (More)] > [サイトを埋め込む (Embed a Site)] の順にクリックします。 
  3. 表示される灰色のボックスをドラッグして、ページの埋め込みの位置を調整します。
  4. [ウェブサイトのアドレスを入力 (Enter Website Address)] をクリックします。
  5. フィールドに URL を貼り付けると、ボックスに 3D Showcase が表示されます。Wix_Example.png

Medium ブログの投稿

以下の手順に従って、Matterport モデルを Medium ブログ投稿に埋め込みます。

  1. コードを埋め込む Medium ページを開きます。
  2. 新しいセクションを追加するには、[+] ボタンをクリックします。
  3. [<>] をクリックして、コードの埋め込みを指定します。
  4. 3D モデルの URL を貼り付けます。MediumEmbed123.png

Placester 

以下の手順に従って、Matterport モデルを Placester に埋め込みます。

  1. コードを埋め込む Placester ページを開きます。
  2. HTML アイコンの [<>] をクリックします。open-html-code-on-placester.png
  3. iframe 埋め込みコードを貼り付けます。
  4. HTML アイコンの [<>] をクリックして、ビジュアルエディターに戻ります。
    • これで、iframe が直接埋め込まれていることが確認できます。
  5. 変更を保存して、サイトに埋め込みを反映させます。

このプロセスの詳細については、Placester のサポートページをご覧ください。

HTML ソースコードに直接アクセスする

お使いの CMS が変更を許可していない場合、サイトのウェブマスターに連絡し、アクセスの許可を求める必要があります。サイトの HTML を編集できる場合は、<iframe> コードを直接 HTML ソースコードに追加します。

他にご質問がございましたら、リクエストを送信してください