Spotify_2_初期画面

大人の自由研究(2017)〜Spotify Web APIを叩く〜その3

前回はWeb APIの使い方でしたが、今回はFileMakerでの処理について説明したいと思います。処理の流れは下記の通りです。

処理の流れ
・Access Tokenを取得する
・取得したAccess TokenをFileMakerにコピーする。
・スクリプトで取得したJSON形式のデータを1件づつに分解して保存。

実際の画面で説明を続けます。

Spotify_2_初期画面

画面の左側にスライドコントロール内に設置されたWebViewerがあります。1つ目はSpotifyのログイン画面。2つ目は前回に説明したWeb APIの画面がありますので、Spotifyにログインし、Acces Tokenを取得します。

画像2

ただ、残念ながら、FileMakerのWebViewerではうまくAccess Tokenを取得できないので、Chromeで該当ページを表示させてAccess Tokenを取得します。

画像3

画像4

Scopeのオプションを問われますが、何も選択せずに「REQUEST TOKEN」ボタンを押します。

画像5

元の画面に戻り、OAuth Tokenが表示され、画面の右下にcURLの記述サンプルが表示されます。FileMakerで処理する前のcURLオプションを含めて、どう記述するば良いのかサンプルが表示されますので、この例を元にFileMaker上のスクリプトとして組み込んで行きます。

画像6

画面上で、cURLコマンドのコピーができるので、Macであればターミナルにコピーすれば、実際に動作を確認することもできます。下記がそのコードになりますが、読みやすくするために改行を入れてあります。

curl -X "GET"
"https://api.spotify.com/v1/search?q=Miles%20Davis%20oleo&type=track%2Cartist&market=JP"
-H "Accept: application/json" -H "Content-Type: application/json"
-H "Authorization: Bearer XXXXXXXXXZZZZZZZ"

このcURLコマンドをスクリプトに組み込んで、実行すると下記のような形になります。この画面では、APIから返ってきた値を変数として、表示用のフィールドにデータを返すようにしています。

Spofity_8_JSONの確認

JSON形式のデータを解析し、必要な情報をFileMakerに登録していきます。取得したJSONから「URLから挿入」スクリプトステップを使って、カバーアートの画像を保存するようにしています。

動画では画像も取り込むようにしていますが、取り込みに時間(画像をダウンロードしているので)がかかるのでステップを外しても良いでしょう。

だいぶ記憶は覚えろげですが、ハマりポイントはこんな感じです。
・Web APIを叩く際にOAuth Tokenを取得方法とcURLの記述
・JSONでデータを取得できたもののデータの解析が大変だった
・JSON関連の処理をスクリプトで処理するが慣れずに色々とハマりました

ここからプレイリストの登録やらとさらにもがくのですが、サンプルファイルの公開を予定していますので、興味のある方は是非お読みください。

よろしければサポートをお願いします。頂いたサポートはAPIの周り調査や実験に使わせて頂きます。スピーカーの作成や、ホロスコープの依頼もあれば、メッセージをください。