# フローティング再生ボタン

**フローティング再生ボタン**埋め込みは、サイト右下に固定ボタンを追加します。訪問者がクリックすると、ゲームがモーダルオーバーレイで開きます — iframe用のページスペースを確保する必要はありません。

ストアフロントのホームページやキャンペーンランディングページなど、レイアウトを変更せずに全ページでゲームを提供したい場合に使用します。

## 使い分け

| 方式 | 最適な用途 |
| ---- | ---------- |
| [シンプルiframe](/ja/sharing/embed) | 単一ページの専用ゲームセクション |
| **フローティング再生ボタン** | 全ページからのアクセス；ECストアフロント |

---

## 埋め込みコードの取得

1. 公開済みのゲーム（またはストリームの共有ダイアログ）を開く
2. **共有/埋め込み**をクリック
3. **埋め込み**タブを選択
4. **フローティング再生ボタン**を選択（シンプルiframeの代わり）
5. プラットフォームを選択 — [General HTML](#general-html)、[Shopify](/ja/sharing/shopify)、または [Shopline](/ja/sharing/shopline)
6. 生成されたスニペットをコピー

---

## ボタンのカスタマイズ

共有/埋め込みパネルで以下を調整できます：

| 設定 | デフォルト | 説明 |
| ---- | ---------- | ---- |
| **再生ボタンのテキスト** | `🎮 Play` | フローティングボタンに表示されるラベル |
| **再生ボタンの色** | 組織のブランドカラー | 背景色（hex、rgb、または hsl） |

変更は埋め込みコードに即座に反映されます — 編集後に再度コピーしてください。

---

## General HTML

`</body>` の前に生のHTMLを受け付ける任意のウェブサイト向け。

### ホスト型アセット（推奨）

DailyPlayからCSSとJavaScriptを読み込む — 短いスニペット：

```html
<link rel="stylesheet" href="https://app.dailyplay.ai/embed-assets/dailyplay-floating.css">
<script>(function(){if(window.__dailyPlayWidgetInit)return;var s=document.createElement("script");s.src="https://app.dailyplay.ai/embed-assets/dailyplay-widget.js";s.defer=true;document.head.appendChild(s);})();</script>

<!-- Floating Play button — bottom-right corner, opens game in overlay -->
<div
  class="dailyplay-floating-widget dailyplay-floating-widget--bottom-right"
  data-dailyplay-floating-widget
  style="position:fixed;bottom:24px;right:24px;z-index:2147483000;"
>
  <button
    type="button"
    class="dailyplay-floating-btn"
    style="background-color: #6c5ce7;"
    data-dailyplay-open="dailyplay-floating-modal-root"
    aria-label="Open DailyPlay"
  >
    🎮 Play
  </button>
</div>

<div
  id="dailyplay-floating-modal-root"
  class="dailyplay-floating-modal"
  data-dailyplay-embed
  hidden
  style="display:none;position:fixed;inset:0;..."
>
  <div class="dailyplay-floating-modal__panel">
    <button type="button" class="dailyplay-floating-modal__close" data-dailyplay-close="dailyplay-floating-modal-root" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <iframe
      data-dailyplay-widget
      data-dailyplay-src="https://app.dailyplay.ai/embed/[game-id]/widget?origin=https%3A%2F%2Fyour-site.com"
      allowfullscreen
      loading="lazy"
      title="DailyPlay Game"
    ></iframe>
  </div>
</div>
```

**重要：** ウィジェットURL内の `https://your-site.com` をサイトのオリジン（スキーム + ホスト名、末尾スラッシュなし）に置き換えてください。`origin` パラメーターはアナリティクスとドメイン検証に使用されます。

### インラインCSS（WordPress対応）

一部のCMS（特にWordPressのカスタムHTMLブロック）は外部 `<link>` タグを削除します。埋め込みパネルで **Inlined CSS (WordPress-safe)** を選択 — 同じCSSが `<style>` ブロックにインラインで埋め込まれ、外部スタイルシートは不要です。スニペットはやや長くなりますが、制限の多いCMS環境でも動作します。

---

## 仕組み

1. **フローティングボタン** — ビューポート右下に固定（通常のページコンテンツより高い `z-index`）
2. **モーダルオーバーレイ** — ボタンをクリックすると半透明の背景にゲームiframeが中央表示
3. **閉じる** — 訪問者は × ボタンまたはパネル外をクリックしてオーバーレイを閉じる
4. **遅延読み込み** — モーダルを開いたときにゲームiframeが読み込まれ、ページを高速に保つ

**ストリーム**の場合、DailyPlayがストリームが再生可能であることを確認するまで（プリフライトチェック）、ボタンは非表示のままです。ストリームが利用できない場合、ページには何も表示されません。

---

## ウィジェットURLの形式

ゲームは専用のウィジェットルートを使用します（標準の埋め込みURLではありません）：

```
https://app.dailyplay.ai/embed/[game-id]/widget?origin=[encoded-site-origin]
```

ストリーム：

```
https://app.dailyplay.ai/stream/[org-slug]/[stream-slug]/widget?origin=[encoded-site-origin]
```

[iframe埋め込みURL](/ja/sharing/embed#埋め込みurlの形式)と比較：`https://app.dailyplay.ai/embed/[game-id]`

---

## プラットフォームガイド

ECプラットフォーム向けのステップバイステップ手順：

- [Shopify](/ja/sharing/shopify) — テーマエディターのCustom Liquid
- [Shopline](/ja/sharing/shopline) — Custom HTMLセクション

---

## セキュリティ

### HTTPS

サイトはHTTPSを使用する必要があります。ゲーム内のカメラとマイク機能もHTTPSが必要です。

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

サイトでCSPを使用している場合、DailyPlayアセットを許可してください：

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

**インラインCSS**を使用する場合、DailyPlayからの `script-src` と `frame-src` のみ必要です（CSSはインライン）。

---

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

### ボタンは表示されるがゲームが読み込まれない

- ゲームが**公開済み**であることを確認
- ウィジェットURLのゲームIDを確認
- `origin` がサイトのURLと一致していることを確認（`https://` を含む）

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

- スニペットが `</body>` の前に配置され、非表示コンテナ内にないことを確認
- ストリームの場合、ストリームがライブで再生可能なときのみボタンが表示される

### スタイルが正しくない

- `dailyplay-floating.css` が読み込まれていることを確認（またはインラインCSSモードを使用）
- テーマCSSが `.dailyplay-floating-btn` を上書きしていないか確認 — ウィジェットは主要なレイアウトルールに `!important` を使用

### WordPressがスタイルシートを削除する

- 埋め込みパネルで **Inlined CSS (WordPress-safe)** に切り替え

---

## 次のステップ

- インラインゲームセクション用の[iframe埋め込み](/ja/sharing/embed)
- [Shopifyセットアップ](/ja/sharing/shopify)
- [Shoplineセットアップ](/ja/sharing/shopline)
- 埋め込みゲームの[アナリティクスを追跡](/ja/sharing/analytics)