ウェブサイトへの埋め込み

DailyPlayゲームをウェブサイトに直接埋め込んで、シームレスなブランド体験を提供しましょう。

埋め込み方法

iframe埋め込み

ゲームを埋め込む最もシンプルな方法：

<iframe
  src="https://dailyplay.app/embed/game/[game-id]"
  width="400"
  height="700"
  frameborder="0"
  allow="camera; microphone"
></iframe>

レスポンシブ埋め込み

画面サイズに適応するレスポンシブレイアウト用：

<div style="position: relative; width: 100%; max-width: 400px; margin: 0 auto;">
  <div style="padding-top: 175%; position: relative;">
    <iframe
      src="https://dailyplay.app/embed/game/[game-id]"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      frameborder="0"
      allow="camera; microphone"
    ></iframe>
  </div>
</div>

---

埋め込みコードの取得

ゲームページから

1. 公開済みのゲームを開く
2. 共有/埋め込みをクリック
3. 埋め込みタブを選択
4. 埋め込みコードをコピー

ゲーム管理から

1. ゲーム管理へ移動
2. ゲームを見つける
3. 共有/埋め込みをクリック
4. 埋め込みコードをコピー

---

埋め込みURLの形式

標準埋め込み

https://dailyplay.app/embed/game/[game-id]

パラメーター付き

カスタマイズ用のクエリパラメーターを追加：

https://dailyplay.app/embed/game/[game-id]?hideHeader=true&theme=light

利用可能なパラメーター：

パラメーター	値	説明
hideHeader	true/false	ゲームヘッダーを非表示
hideFooter	true/false	フッターを非表示
autoplay	true/false	ゲームを自動開始

---

サイズガイドライン

モバイルファースト（推奨）

モバイル最適化ゲーム用：

寸法	値
幅	400px
高さ	700px
比率	約1:1.75

デスクトップ表示

より広いレイアウト用：

寸法	値
幅	500px
高さ	800px

フルワイドレスポンシブ

<div style="max-width: 500px; margin: 0 auto;">
  <div style="position: relative; padding-top: 160%;">
    <iframe
      src="https://dailyplay.app/embed/game/[game-id]"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px;"
      allow="camera; microphone"
    ></iframe>
  </div>
</div>

---

プラットフォーム別の手順

WordPress

HTMLブロックを使用：

1. 新しいブロックを追加
2. カスタムHTMLを選択
3. 埋め込みコードを貼り付け
4. プレビューして公開

Shopify

1. Shopify管理画面でページ/商品に移動
2. エディターでHTMLを表示をクリック
3. 埋め込みコードを貼り付け
4. 保存

Squarespace

1. コードブロックを追加
2. 埋め込みコードを貼り付け
3. 変更を適用

Wix

1. HTML iframe要素を追加
2. iframeコードを貼り付け
3. 必要に応じてサイズを調整

Webflow

1. Embed要素を追加
2. 埋め込みコードを貼り付け
3. コンテナのスタイルを調整

---

埋め込みのスタイリング

コンテナのスタイリング

iframeをスタイル付きコンテナで囲む：

<div
  style="
  max-width: 400px;
  margin: 2rem auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
"
>
  <iframe
    src="https://dailyplay.app/embed/game/[game-id]"
    width="100%"
    height="700"
    frameborder="0"
    allow="camera; microphone"
  ></iframe>
</div>

センタリングレイアウト

<div style="text-align: center; padding: 2rem 0;">
  <iframe
    src="https://dailyplay.app/embed/game/[game-id]"
    width="400"
    height="700"
    frameborder="0"
    style="border-radius: 12px;"
    allow="camera; microphone"
  ></iframe>
</div>

---

パーミッション

必要なパーミッション

完全な機能のためにallow属性にこれらを含めてください：

allow="camera; microphone"

パーミッション	必要な機能
camera	表情ベースのゲーム、ビデオ録画
microphone	音声操作ゲーム

機能を使用しない場合

ゲームがカメラ/マイクを使用しない場合、allow属性を省略可能：

<iframe
  src="https://dailyplay.app/embed/game/[game-id]"
  width="400"
  height="700"
  frameborder="0"
></iframe>

---

セキュリティに関する考慮事項

HTTPS要件

DailyPlayゲームを埋め込むには、ウェブサイトがHTTPSを使用する必要があります。HTTP専用サイトでは埋め込みは機能しません。

コンテンツセキュリティポリシー

サイトにCSPがある場合、許可されるソースにDailyPlayを追加：

frame-src https://dailyplay.app;

クロスオリジン

DailyPlayゲームは異なるオリジン間のiframe内で動作します。特別な設定は不要です。

---

埋め込みのテスト

1. ローカルテスト — ローカルサーバーを使用（http://localhost）
2. サイズ確認 — ゲームが正しく表示されることを確認
3. モバイルテスト — モバイルデバイスで確認
4. 機能テスト — ゲームが正しくプレイできることを確認

---

トラブルシューティング

ゲームが読み込まれない

• ゲームIDが正しいか確認
• ゲームが公開済みか確認
• HTTPSが使用されていることを確認

サイズが間違っている

• width/height属性を確認
• レスポンシブラッパーを使用
• ターゲットデバイスでテスト

カメラが動作しない

• allow="camera"属性を追加
• HTTPSを確認（カメラに必要）
• ユーザーが許可を付与する必要がある

CSPでブロックされている

• CSPにframe-src https://dailyplay.appを追加
• ブラウザコンソールで具体的なエラーを確認

次のステップ

• 埋め込みゲームのアナリティクスを追跡
• 他のチャネルでリンクで共有