はじめに...

本記事では、Spotify Web APIを実際に使用(挑戦)してみたので私が行った手順を紹介していきたいと思います。

手順１　〜ログイン〜

この手順では以下のリンク先を参考にさせていただきました。

手順２　〜appを作成〜

ログインをすると"Dashboard"画面が表示されるので"Create app"を押します......が

オレンジ色の部分で「アプリを作成する前にメールアドレスを認証する必要があります。」と言われているので先に認証を行いました。

認証が完了するとオレンジ色の部分が消えて"Create app"がクリックできるようになりました。

"Create app"をクリックするとappの作成ができるようになります。

appを作成するにあたって今回私が入力した内容を記載します。

My Spotify App

An app to display Spotify music data.

An app to display Spotify music data.

https://example.test.com

https://example.test.com/callback

最後は"Web API"を選択して保存しました。

以上でappの作成は完了しました。

完了すると"Home"画面が表示されました。

次に"Home"画面の右上にある"Setting"をクリックすると...

自身の"Client ID"が表示されます。これは他人には見せないように注意が必要です。

そして、
"Client ID"の下にある"View client secret"をクリックすると...

"Client secret"が表示されました。
(本来は黒色のモザイクがある部分に"Client ID"と"Client Secret"が表示されています。)

手順３　〜環境構築〜

今回はVSCodeを使いました。

VSCodeを開いたら、適当な名前の新しいフォルダを作成して開いて、フォルダの中にjsファイルとhtmlファイルを作成します。

次にnode.jsを使うのですが、私が現在使用しているPCにインストールしてから期間が空いていたので、念の為node.jsのバージョンを確認しました。

バージョン確認をするにあたって以下の記事を参考にさせていただきました。

次に以下を実行して"axios"ライブラリをインストールしました。

npm i axios

が、既に入っていました。

手順４　〜プログラミング〜

Spotify Web API にはOAuth 2.0が使われているのでアクセストークンを取得する必要があります。　
以下がアクセストークンを取得するために書いたソースです。

index.js

const axios = require('axios');// HTTPリクエストを行うためのライブラリaxiosをインポート

// Spotify API用のクライアントIDとクライアントシークレット
// Spotify Developer Dashboardで取得した値を入力してください
const client_id = 'ここにclient_idを入力してください';
const client_secret = 'ここにclient_secretを入力してください';

// アクセストークンを取得する非同期関数
async function getAccessToken() {
    // Spotify APIのトークンエンドポイントにPOSTリクエストを送信
    const response = await axios.post('https://accounts.spotify.com/api/token', null, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',// データの形式を指定
        },
        auth: {
            username: client_id, // クライアントIDを指定
            password: client_secret,// クライアントシークレットを指定
        },
        params: {
            grant_type: 'client_credentials',// クライアントクレデンシャルフローを指定

        },
    });
    // アクセストークンを返す
    return response.data.access_token;
}
// アクセストークンを取得してコンソールに表示
getAccessToken().then((token) => console.log(token));// トークン取得後、結果を出力

入力後にターミナルにて以下を実行すると無事アクセストークンが取得できました。

node index.js

次に、jsファイルと同時に作成したhtmlファイルに下記のソースコードを入力しました。
※先ほど取得したアクセストークンもソース上のscriptタグ内の該当部分に入力します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotify API Demo</title>
</head>
<body>
    <h1>Spotify APIからデータを取得してみた</h1>
    <div id="spotify-data"></div>

    <script>
        // Spotify APIのアクセストークンを指定
        const accessToken = 'ここにaccessTokenを入力してください';

        // Spotify APIから新着リリースデータを取得する非同期関数
        async function fetchSpotifyData() {
            const response = await fetch('https://api.spotify.com/v1/browse/new-releases', {
                headers: {
                    'Authorization': `Bearer ${accessToken}` // Bearerトークンを使用して認証ヘッダーを追加
                }
            });

            // レスポンスデータをJSON形式で取得
            const data = await response.json();
            displayData(data); // データを画面に表示する関数を呼び出し
        }

        // 取得したデータをHTMLに動的に表示する関数
        function displayData(data) {
            const container = document.getElementById('spotify-data'); // データを挿入するコンテナを取得

            // アルバムデータをループしてHTML要素として生成
            data.albums.items.forEach(album => {
                const albumElement = document.createElement('div'); // 新しいdiv要素を作成
                albumElement.innerHTML = `
                    <h2>アルバム名: ${album.name}</h2> <!-- アルバム名を表示 -->
                    <p>アーティスト: ${album.artists.map(artist => artist.name).join(', ')}</p> <!-- アーティスト名を表示 -->
                    <img src="${album.images[0].url}" alt="${album.name}" width="200"> <!-- アルバム画像を表示 -->
                `;
                container.appendChild(albumElement); // コンテナに要素を追加
            });
        }

        // ページロード時にSpotifyデータを取得
        fetchSpotifyData();
    </script>
</body>
</html>

入力が完了してから実行してみたところ...

無事にデータを取得できました。

さいごに...

最後までご覧いただきありがとうございました。
Spotify Web APIからデータを取得するために私が行った手順を紹介しました。
今回初めてWeb APIを使ってみたのですが、「自分のような人間でも使えるのか」と感じ、私の中にあったAPIに対する壁が少しだけ低くなった気がしました。
今回はデータを取得してhtmlで表示しただけですが、取得したデータを加工したり、様々な機能を付け加えてみるのも面白そうだと感じました。

参考