Shopify
DailyPlayをShopifyストアに追加して、ショッパーがストアフロントを離れずにゲームをプレイできるようにします。
埋め込みオプション
Section titled “埋め込みオプション”| 方法 | タイプ | ステータス |
|---|---|---|
| Custom Liquid | フローティング再生ボタン | 利用可能 |
| シンプルiframe | ページ内インラインゲーム | 利用可能 — ウェブサイトへの埋め込みを参照 |
| Shopifyアプリ | テーマカスタマイザーのApp embed | 近日公開 |
フローティング再生ボタン（Custom Liquid）
Section titled “フローティング再生ボタン（Custom Liquid）”Shopify向けの推奨方法。スニペットを追加したすべてのページにフローティングPlayボタンが表示され、クリックすると全画面オーバーレイでゲームが開きます。
ステップ1 — 埋め込みコードを取得
Section titled “ステップ1 — 埋め込みコードを取得”- DailyPlayで公開済みのゲームを開く
- 共有/埋め込み → 埋め込みをクリック
- フローティング再生ボタンを選択
- Shopifyを選択
- Custom HTMLが選択されていることを確認（アプリ/プラグインオプションはまだ利用不可）
- 必要に応じてボタンのテキストと色をカスタマイズ
- スニペットをコピー
ステップ2 — テーマに追加
Section titled “ステップ2 — テーマに追加”- Shopify管理画面で Online Store → Themes に移動
- ライブまたは下書きテーマで Customize をクリック
- ゲームを表示したいテンプレートに移動（例：サイト全体表示の Home page、または特定のページテンプレート）
- Add section → Custom Liquid をクリック
- コピーしたLiquidスニペットを貼り付け
- Save をクリック
生成されたコードはShopify Liquid変数を使用するため、ストアオリジンは自動設定されます：
{%- assign dp_origin = request.origin | default: shop.url | url_param_escape -%}オリジンURLを手動で置き換える必要はありません — Shopifyがレンダリング時に自動入力します。
スニペットに含まれるもの
Section titled “スニペットに含まれるもの”- DailyPlayのフローティングウィジェットCSSへの
<link> dailyplay-widget.jsの遅延読み込み- フローティングPlayボタン（右下）
/embed/[game-id]/widget?origin=...を指すゲームiframeを含む非表示モーダル
サイト全体 vs 単一ページ
Section titled “サイト全体 vs 単一ページ”| 目的 | Custom Liquidの追加場所 |
|---|---|
| 全ページにボタン | テーマのフッターグループ、またはデフォルトレイアウトに含まれるセクション |
| 1ページのみにボタン | テーマエディターでそのページのテンプレート |
| ページ内にインラインゲーム | 代わりにページのHTMLエディターでiframe埋め込みを使用 |
ページまたは商品でのシンプルiframe
Section titled “ページまたは商品でのシンプルiframe”ページコンテンツに直接埋め込むゲーム（フローティングではない）：
- DailyPlayで埋め込みパネルの Simple iframe を選択
- iframeコードをコピー
- Shopify管理画面でページまたは商品を編集
- リッチテキストエディターで Show HTML をクリック
- iframeコードを貼り付け
- 保存
サイズとレスポンシブレイアウトのヒントはウェブサイトへの埋め込みを参照してください。
Shopifyアプリ（近日公開）
Section titled “Shopifyアプリ（近日公開）”App embed ブロック付きのネイティブDailyPlay Shopifyアプリを開発中です。利用可能になったら：
- Shopify App StoreからDailyPlayアプリをインストール
- Online Store → Themes → Customize に移動
- App embeds を開く
- DailyPlay Floating Widget を有効化
- 埋め込み設定でゲームID、ボタンラベル、色を設定
アプリが公開されるまで、上記の Custom Liquid を使用してください。
トラブルシューティング
Section titled “トラブルシューティング”Liquidスニペットがプレーンテキストとして表示される
Section titled “Liquidスニペットがプレーンテキストとして表示される”- 通常のテキストまたはHTMLブロックではなく、Custom Liquid セクションを追加したことを確認
- Custom LiquidセクションはLiquid + HTMLのみ受け付け — テーマから追加の
<script>タグでスニペットを囲まないでください
ゲームは読み込まれるがアナリティクスのドメインが間違っている
Section titled “ゲームは読み込まれるがアナリティクスのドメインが間違っている”- Liquidテンプレートは
request.originを使用 — Shopify設定のストアフロントURLが公開ドメインと一致していることを確認 - カスタムドメインを使用している場合、プライマリドメインに設定されていることを確認
ボタンがテーマ要素の後ろに隠れる
Section titled “ボタンがテーマ要素の後ろに隠れる”- ウィジェットは高い
z-index（2147483000）を使用。それでも隠れる場合は、より高いスタッキングコンテキストのテーマ要素（固定ヘッダー、チャットウィジェット）を確認
コンテンツセキュリティポリシー
Section titled “コンテンツセキュリティポリシー”Shopify Online Store 2.0テーマは通常、Custom Liquid内のサードパーティスクリプトを許可します。テーマまたはアプリがCSPを適用している場合、script-src、style-src、frame-src に https://app.dailyplay.ai を追加してください。