Spotify 連携チュートリアル

拡張機能のポップアップから Spotify を安全に連携し、再生・停止・スキップ・音量などを直接操作できます。環境音とも併用して、集中できる学習環境を整えましょう。

概要を見る セットアップへ

このページでわかること

Spotify 連携の準備・設定・使い方・トラブル対応

できること

  • 再生/一時停止・前へ/次へ
  • 音量調整（0–100%）
  • 現在の曲/アーティスト/デバイス表示
  • 環境音との併用

操作場所

拡張機能のポップアップ内「音楽・環境音」→「Spotify」タブから操作します。Dynamic Hub（ページ上部の小さなハブ）でも操作が可能です。

必要なもの

  • Spotify アカウント（再生制御は Premium 推奨）
  • Spotify Developer のClient ID
  • 拡張機能 v1.7.0 以降

セットアップ手順

1

Spotify Developer でアプリを作成

Spotify Developer Dashboard でアプリを作成し、Client ID を取得します。

  • Spotify Developer Dashboard にログイン
  • 「Create an app」から新規作成（任意のアプリ名/説明）
  • 「Which API/SDKs are you planning to use?」で Web API にチェック
  • アプリ詳細の「Redirect URIs」に下記を追加し保存
  • Client ID をコピー：アプリ詳細ページの Client ID 項目の右側にある「Copy」ボタンを押すか、テキストを全選択してコピーしてください。コピーした Client ID は後で拡張機能の設定に貼り付けます。

https://jjdoboloblglnjckcdfoofobadndfdlk.chromiumapp.org/callback

Spotify Developer Dashboard — アプリケーションの設定をするスクリーンショット
2

拡張機能の設定でClient ID を保存

拡張機能のポップアップを開き、「設定」→「Spotify 設定」にClient ID を入力し「保存」。

  • ポップアップを開く →「設定」タブ
  • 「Spotify Client ID」に 1 で取得した ID を貼り付け
  • 「保存」を押して「設定済み」表示になれば完了
popupの設定画面で、クライアントIDを入力するスクリーンショット
3

Spotify と連携（認証）

ポップアップの「音楽・環境音」を開いて「Spotify」タブに移動し、「Spotify に接続」を押して認証します。

  • 「音楽・環境音」→「Spotify」タブ
  • 「Spotify に接続」→ Spotify の認可画面で許可
  • 接続後、楽曲/アーティスト/デバイスが表示されます
popupの設定画面で、Spotifyに接続するスクリーンショット popupの設定画面で、Spotifyに接続するスクリーンショット

操作方法

直感的に操作できる最小のコントロール

再生コントロール

  • 再生/一時停止（中央の ▶/⏸ ボタン）
  • 前へ（⏮）/ 次へ（⏭）
  • 音量スライダー（0–100%）

アクティブな Spotify デバイス（スマホ/PC アプリ/ウェブプレーヤー）が必要です。デバイスが見つからない場合は Spotify アプリを起動し、1 曲再生してからお試しください。

L環境音と併用

  • 雨音/暖炉/ホワイトノイズなどを個別にミックス
  • 「全停止」ボタンで環境音をすぐにミュート

Dynamic Hub からも操作

ZEN Study ページ上部に表示される小さなハブ（Dynamic Hub）から、曲名確認や再生/スキップなどのクイック操作が可能です。

トラブルシュート

つまずきやすい点と解決策

A

「未設定」や接続ボタンが出る

ポップアップ「設定」→「Spotify 設定」でClient ID が保存されているか確認してください。保存後に「音楽・環境音」→「Spotify」で「Spotify に接続」を実行します。

B

「アクティブなデバイスが見つかりません」

Spotify アプリ/ウェブを起動し、1 曲再生してから再度お試しください。Web API の制約により、制御にはアクティブな再生デバイスが必要です。

C

再生制御ができない/エラーになる

Spotify Premium アカウントでのご利用を推奨します。権限（スコープ）は自動で要求されますが、再度連携（認証）し直すと解決する場合があります。

D

安全性について

拡張機能は PKCE を用いた Authorization Code フローで認証し、クライアント ID のみを保存します（シークレットは不要/保存しません）。アクセストークン等はローカルに安全に保存し、バックグラウンドで自動更新します。

セットアップに迷ったら気軽にご相談ください

本ページの手順で解決しない場合は、拡張機能の「情報」タブの連絡先からご連絡ください。最新機能の情報はトップページにも掲載しています。

トップへ戻る 拡張機能を入手