SDK導入ガイド

音声プレイヤーをWebサイトに設置する方法を解説します。

基本的な統合

SDKは専用サーバーから配信されます。ダッシュボードの「プレイヤー設定」ページで、あなた専用の統合コードを取得できます。

統合コード

<!-- プレイヤーコンテナ -->
<div class="pub-voice-player-container"></div>

<!-- ローダースクリプト -->
<script
  src="https://sdk.pub-voice.com/sdk-assets/[CONTENT-SOURCE-ID]/loader.js"
  data-pub-voice-config='{"playerSelector": ".pub-voice-player-container"}'
></script>

ℹ️

[CONTENT-SOURCE-ID]は、ダッシュボードの「プレイヤー設定」ページで取得できる実際の値に置き換えてください。設定を変更した後は、約1時間以内に自動で反映されます。

プレイヤーの表示位置

プレイヤーを表示したい位置にコンテナ要素を配置します。指定がない場合、SDKは自動的に記事要素の上部にプレイヤーを挿入します。

CMS別の実装例

WordPress

テーマのテンプレートファイル（通常は single.php）を編集します。記事タイトルの下にプレイヤーを配置することを推奨します。

<!-- single.php の例 -->
<article>
  <h1><?php the_title(); ?></h1>
  
  <!-- プレイヤーコンテナ（タイトル直下） -->
  <div class="pub-voice-player-container"></div>
  
  <div class="content">
    <?php the_content(); ?>
  </div>
</article>

<!-- フッター付近に配置 -->
<script
  src="https://sdk.pub-voice.com/sdk-assets/[CONTENT-SOURCE-ID]/loader.js"
  data-pub-voice-config='{"playerSelector": ".pub-voice-player-container"}'
></script>

テーマによってはフッターの編集箇所が分かりにくい場合があります。その場合は、全ページで共通に読み込まれる箇所（例: footer.php やWebサイト全体に適用されるカスタムHTMLブロック）にローダーを配置してください。

Next.js (App Router)

Next.jsでは、next/script を使用して Root Layoutでローダーを一度だけ読み込むことを推奨します。SDKが自動的にSPAページ遷移に対応するため、手動でのクリーンアップは不要です。

Step 1: layout.tsx でローダーを読み込む

// src/app/layout.tsx
import Script from "next/script"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <Script
          id="pub-voice-loader"
          src="https://sdk.pub-voice.com/sdk-assets/[CONTENT-SOURCE-ID]/loader.js"
          strategy="afterInteractive"
          data-pub-voice-config={JSON.stringify({
            playerSelector: ".pub-voice-player-container",
          })}
        />
      </body>
    </html>
  )
}

Step 2: PubVoicePlayer コンポーネントを作成

// src/components/PubVoicePlayer.tsx
"use client"

export default function PubVoicePlayer() {
  // コンテナを配置するだけでOK
  // SDKが自動的にプレイヤーの初期化・破棄を管理
  return <div className="pub-voice-player-container" />
}

ポイント

strategy="afterInteractive" で、ページのインタラクティブ性を妨げずに読み込みます
id 属性でNext.jsが重複読み込みを防ぎます
SDKがMutationObserverでコンテナの追加/削除を監視し、自動的にライフサイクルを管理します
PubVoicePlayer コンポーネントは記事ページのテンプレートに配置してください

トラブルシューティング

プレイヤーが表示されない

記事が検出されていない — ダッシュボードの記事一覧に記事が表示されているか確認
URLが正しいか確認

音声が生成されない

記事が登録されていない — RSSフィードが正しく設定されているか確認
ダッシュボードの記事一覧に記事が表示されているか確認

SPAでプレイヤーが正しく動作しない

SDKはMutationObserverでコンテナの追加/削除を自動検知し、ライフサイクルを管理します
コンテナ要素（.pub-voice-player-container）が正しく配置されているか確認してください
ページ遷移時にコンテナが削除されれば、SDKが自動的にプレイヤーを破棄します

ブラウザサポート

Chrome (最新版)
Firefox (最新版)
Safari (最新版)
Edge (最新版)

制限事項

記事の本文は最大10,000文字まで
音声ファイルはMP3形式のみサポート
同時に1つの記事のみ音声化可能

まずは無料で試してみませんか？

PUBVOICEは無料β版をご提供中。記事に「再生ボタン」を追加して、読者との新しい関係を始めましょう。

無料で始める