埋め込み＆iframe

Splat Labsプロジェクトを任意のWebサイトに直接埋め込んで、訪問者がページから離れることなく3Dシーンを探索できるようにします。アプリ、プラグイン、アカウント不要です。

概要

すべてのSplat Labsプロジェクトには標準HTMLの<iframe>タグを使用してWebサイトに埋め込める共有ビューアURLが付与されます。埋め込みビューアは完全にインタラクティブです。

対応プラットフォーム：

• カスタムWebサイトとランディングページ
• CMSプラットフォーム（WordPress、Squarespace、Webflow、Wix、Shopify）
• 不動産物件サイト（Zillow、MLS、Realtor.com）
• ドキュメントツール（Notion、Confluence）
• React / Next.jsアプリケーション

埋め込みコードの取得方法

ステップ1: 共有ダイアログを開く

1. Splat Labs Cloudでプロジェクトを開く
2. ビューアで左サイドバードロワーを確認
3. サイドバー下部の**「Share」**ボタンをクリック
4. 共有ダイアログが開きます

ステップ2: 埋め込みURLまたはコードを取得する

共有ダイアログで：

1. **「Link sharing enabled」**にチェックが入っていることを確認
2. **「EMBED」**ボタンをクリックして埋め込みセクションを展開

次の2つのフィールドが表示されます：

• Embed URL — 直接使用するか、Zillow、Notion、MLS等のプラットフォームに貼り付けるビューアURL
• Embed Code — コピー＆ペーストできる完成済みのHTML iframeスニペット

ステップ3: Webサイトに貼り付ける

iframeコードをWebサイトのHTMLのビューアを表示したい場所に貼り付けるだけです。

<iframe
  src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

カスタマイズオプション

レスポンシブ埋め込み（16:9アスペクト比）

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://cloud.rockrobotic.com/viewer/{project-id}?view=splat"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
    loading="eager">
  </iframe>
</div>

トラブルシューティング

埋め込みが空白になる

最も一般的な原因は混合コンテンツのブロックです。Splat Labs CloudはHTTPSを使用しているため、Webサイトも同様にHTTPSを使用していることを確認してください。

埋め込みがContent Security Policyによってブロックされる

frame-srcディレクティブにhttps://cloud.rockrobotic.comを追加してください：

Content-Security-Policy: frame-src https://cloud.rockrobotic.com;

ブランディング＆プラン

詳細は料金ページをご覧ください。

次のステップ

• プロジェクトの共有 — 共有リンクとプライバシー設定
• ポータル — 複数のシーンをウォークスルーに接続
• ブログの埋め込みチュートリアル（英語）でさらに詳しく