APIを使って音楽を聴くきっかけを作ろう⑩

UGOKのヨコチ🦖です。

前回は選択したCDジャケット画像に関するCDの詳細を表示できるようにしました。徐々にできることが増えて触ってて自分でも楽しいです☺制作しているウェブアプリケーションの概要はこちらです。

今回やること

前回は、Spotify Web APIを使って「日本トップ50」という名前のプレイリストに載っている曲のCDジャケット画像の表示させ、選択したCDジャケット画像に関する情報（詳細：アーティスト名、曲名、アルバム／シングル名）を表示させました。

今回は、アーティスト名がローマ字表記になってしまう部分を直したいと思います。

このように、本来は「あいみょん」と表記してほしい部分が「Aimyon」とローマ字表記になってしまっています。これを直すためには、Accept-Languageヘッダーをリクエスト時に設定すれば良いようです。

https://gist.github.com/yochn/19f8dbef71993fe109876df02f63f7e4

var options = {

       url: 'https://api.spotify.com/v1/playlists/37i9dQZEVXbKXQ4mDTEBXq/tracks',

       headers: {

         'Authorization': 'Bearer ' + token,

         'Accept-Language': 'ja;q=1'

       },

       json: true

     };

JavaScriptのAPIでデータを取ってくる部分（options）に'Accept-Language': 'ja;q=1'という一文を追加します。jaは日本語を表し、qは重みと呼ばれる、相対的な品質値を使用して表現される優先順位の順序で配置された値のことです。どういうことかさっぱりわかりませんが（滝汗）デフォルト値は1のようです。

実行結果

ちゃんと、「Aimyon」と表記されていた部分が「あいみょん」表記になりました☺海外のアーティストなどをみていると最初から英語表記なので気づきませんでしたが、日本のアーティストの場合、日本語ではなくローマ字表記にになることに気づけて無事直すことができてよかったです☺

：今後について

ひとまず、CDジャケット画像をランダムに抜き出し表示させようと思います。そして、選択したCDジャケット画像から類似したアーティストのCDジャケット画像を表示できるようにしていきたいと思います。

：参考