# Shopify

DailyPlayをShopifyストアに追加して、ショッパーがストアフロントを離れずにゲームをプレイできるようにします。

## 埋め込みオプション

| 方法 | タイプ | ステータス |
| ---- | ------ | ---------- |
| **Custom Liquid** | フローティング再生ボタン | 利用可能 |
| **シンプルiframe** | ページ内インラインゲーム | 利用可能 — [ウェブサイトへの埋め込み](/ja/sharing/embed)を参照 |
| **Shopifyアプリ** | テーマカスタマイザーのApp embed | 近日公開 |

---

## フローティング再生ボタン（Custom Liquid）

Shopify向けの推奨方法。スニペットを追加したすべてのページにフローティング**Play**ボタンが表示され、クリックすると全画面オーバーレイでゲームが開きます。

### ステップ1 — 埋め込みコードを取得

1. DailyPlayで公開済みのゲームを開く
2. **共有/埋め込み** → **埋め込み**をクリック
3. **フローティング再生ボタン**を選択
4. **Shopify**を選択
5. **Custom HTML**が選択されていることを確認（アプリ/プラグインオプションはまだ利用不可）
6. 必要に応じてボタンのテキストと色をカスタマイズ
7. スニペットをコピー

### ステップ2 — テーマに追加

1. Shopify管理画面で **Online Store** → **Themes** に移動
2. ライブまたは下書きテーマで **Customize** をクリック
3. ゲームを表示したいテンプレートに移動（例：サイト全体表示の **Home page**、または特定のページテンプレート）
4. **Add section** → **Custom Liquid** をクリック
5. コピーしたLiquidスニペットを貼り付け
6. **Save** をクリック

生成されたコードはShopify Liquid変数を使用するため、ストアオリジンは自動設定されます：

```liquid
{%- assign dp_origin = request.origin | default: shop.url | url_param_escape -%}
```

オリジンURLを手動で置き換える必要はありません — Shopifyがレンダリング時に自動入力します。

### スニペットに含まれるもの

- DailyPlayのフローティングウィジェットCSSへの `<link>`
- `dailyplay-widget.js` の遅延読み込み
- フローティングPlayボタン（右下）
- `/embed/[game-id]/widget?origin=...` を指すゲームiframeを含む非表示モーダル

---

## サイト全体 vs 単一ページ

| 目的 | Custom Liquidの追加場所 |
| ---- | ----------------------- |
| 全ページにボタン | テーマの**フッター**グループ、またはデフォルトレイアウトに含まれるセクション |
| 1ページのみにボタン | テーマエディターでそのページのテンプレート |
| ページ内にインラインゲーム | 代わりにページのHTMLエディターで[iframe埋め込み](/ja/sharing/embed)を使用 |

---

## ページまたは商品でのシンプルiframe

ページコンテンツに直接埋め込むゲーム（フローティングではない）：

1. DailyPlayで埋め込みパネルの **Simple iframe** を選択
2. iframeコードをコピー
3. Shopify管理画面でページまたは商品を編集
4. リッチテキストエディターで **Show HTML** をクリック
5. iframeコードを貼り付け
6. 保存

サイズとレスポンシブレイアウトのヒントは[ウェブサイトへの埋め込み](/ja/sharing/embed)を参照してください。

---

## Shopifyアプリ（近日公開）

**App embed** ブロック付きのネイティブDailyPlay Shopifyアプリを開発中です。利用可能になったら：

1. Shopify App StoreからDailyPlayアプリをインストール
2. **Online Store** → **Themes** → **Customize** に移動
3. **App embeds** を開く
4. **DailyPlay Floating Widget** を有効化
5. 埋め込み設定でゲームID、ボタンラベル、色を設定

アプリが公開されるまで、上記の **Custom Liquid** を使用してください。

---

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

### Liquidスニペットがプレーンテキストとして表示される

- 通常のテキストまたはHTMLブロックではなく、**Custom Liquid** セクションを追加したことを確認
- Custom LiquidセクションはLiquid + HTMLのみ受け付け — テーマから追加の `<script>` タグでスニペットを囲まないでください

### ゲームは読み込まれるがアナリティクスのドメインが間違っている

- Liquidテンプレートは `request.origin` を使用 — Shopify設定のストアフロントURLが公開ドメインと一致していることを確認
- カスタムドメインを使用している場合、プライマリドメインに設定されていることを確認

### ボタンがテーマ要素の後ろに隠れる

- ウィジェットは高い `z-index`（2147483000）を使用。それでも隠れる場合は、より高いスタッキングコンテキストのテーマ要素（固定ヘッダー、チャットウィジェット）を確認

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

Shopify Online Store 2.0テーマは通常、Custom Liquid内のサードパーティスクリプトを許可します。テーマまたはアプリがCSPを適用している場合、`script-src`、`style-src`、`frame-src` に `https://app.dailyplay.ai` を追加してください。

---

## 次のステップ

- [フローティング再生ボタンの概要](/ja/sharing/floating-play-button)
- [ウェブサイトへの埋め込み](/ja/sharing/embed)
- [アナリティクスを追跡](/ja/sharing/analytics)