# Shopline

DailyPlayをShoplineストアに追加して、顧客がストアフロントからゲームをプレイできるようにします。

## 埋め込みオプション

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

---

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

Shopline向けの推奨方法。ページにフローティング**Play**ボタンが表示され、クリックすると全画面オーバーレイでゲームが開きます。

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

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

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

1. Shopline管理画面で **Theme Editor** を開く
2. ゲームを表示したいページまたはテンプレートに移動
3. **Add section** → **Custom HTML** をクリック
4. コピーした埋め込みコードを貼り付け
5. 保存して公開

### ステップ3 — ストアオリジンを設定

埋め込みコードにはウィジェットURL内にプレースホルダーオリジンが含まれます：

```
https://app.dailyplay.ai/embed/[game-id]/widget?origin=https%3A%2F%2Fyour-store.com
```

`https://your-store.com` をShoplineストアの公開URL（スキーム + ホスト名、末尾スラッシュなし）に置き換えてください。例：ストアが `https://mybrand.shoplineapp.com` の場合、エンコードされたオリジンは `https%3A%2F%2Fmybrand.shoplineapp.com` になります。

共有/埋め込みパネルはこのプレースホルダー付きスニペットを生成します — Shoplineに保存する前に更新してください。

---

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

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

---

## ページでのシンプルiframe

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

1. DailyPlayで埋め込みパネルの **Simple iframe** を選択
2. iframeコードをコピー
3. Shoplineでページを編集し、HTMLまたは埋め込みブロックを追加
4. iframeコードを貼り付け
5. 保存して公開

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

---

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

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

1. ShoplineアプリマーケットプレイスからDailyPlayアプリをインストール
2. **Theme Editor** → **App embeds** を開く
3. **DailyPlay Floating Widget** を有効化
4. 埋め込み設定でゲームID、ボタンラベル、色を設定

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

---

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

### ボタンが表示されない

- Custom HTMLセクションが保存され、テーマが公開されていることを確認
- スニペットが完全であることを確認（CSSリンク、スクリプトローダー、ボタン、モーダル）
- DailyPlayでゲームが**公開済み**であることを確認

### ゲームの読み込みに失敗

- ウィジェットURLのゲームIDを再確認
- `origin` パラメーターがストアURLと正確に一致していることを確認（URLエンコード済み）
- ストアは **HTTPS** で提供されている必要がある

### スタイルが欠落

- `dailyplay-floating.css` への `<link>` が存在し、Shoplineによって削除されていないことを確認
- テーマが外部スタイルシートを削除する場合、[フローティング再生ボタン](/ja/sharing/floating-play-button)ガイドの **General HTML** と **Inlined CSS** を使用してそのバリアントを貼り付け

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

- ウィジェットは高い `z-index` を使用。隠れる場合は、より高いスタッキング順序の固定ヘッダーやチャットウィジェットを確認

---

## 次のステップ

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