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

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

## 埋め込み方法

### iframe埋め込み

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

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

### レスポンシブ埋め込み

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

```html
<div style="position: relative; width: 100%; max-width: 400px; margin: 0 auto;">
  <div style="padding-top: 175%; position: relative;">
    <iframe
      src="https://app.dailyplay.ai/embed/[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://app.dailyplay.ai/embed/[game-id]
```

### パラメーター付き

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

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

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

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

---

## サイズガイドライン

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

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

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

### デスクトップ表示

より広いレイアウト用：

| 寸法 | 値    |
| ---- | ----- |
| 幅   | 500px |
| 高さ | 800px |

### フルワイドレスポンシブ

```html
<div style="max-width: 500px; margin: 0 auto;">
  <div style="position: relative; padding-top: 160%;">
    <iframe
      src="https://app.dailyplay.ai/embed/[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をスタイル付きコンテナで囲む：

```html
<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://app.dailyplay.ai/embed/[game-id]"
    width="100%"
    height="700"
    frameborder="0"
    allow="camera; microphone"
  ></iframe>
</div>
```

### センタリングレイアウト

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

---

## パーミッション

### 必要なパーミッション

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

```html
allow="camera; microphone"
```

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

### 機能を使用しない場合

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

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

---

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

### HTTPS要件

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

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

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

```
frame-src https://app.dailyplay.ai;
```

### クロスオリジン

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

---

## 埋め込みのテスト

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

---

## トラブルシューティング

### ゲームが読み込まれない

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

### サイズが間違っている

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

### カメラが動作しない

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

### CSPでブロックされている

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

## 次のステップ

- 埋め込みゲームの[アナリティクスを追跡](/ja/sharing/analytics)
- 他のチャネルで[リンクで共有](/ja/sharing/share)