音楽ランキングメーカーをリリースしました。

https://music-ranking-maker.netlify.com/ - URLシェアの例

開発のきっかけ

UIが似ているのでお気づきの方もいらっしゃると思いますが、10/27にリリースしたアニメランキング作成サービスの派生プロジェクトです。 楽曲の情報も持てないかな、と思ってちょっと調べたところ、itunes search APIを見つけました。

動作イメージ

アニメランキング作成サービスとの違い

楽曲試聴機能

今回使ったライブラリ：react-player 音楽プレイヤーを実装するにあたり、いくつかのコンポーネントを検討しましたが、最初のうち、あまりにUIが簡素(開発者が自由に作れる)で敬遠していました。

ただ、controlsオプションでHTML5 Audioのネイティブプレーヤーを表示できることに気づいたのでこちらを採用しました。

JSONPの解釈

アニメランキング作成サービスではGraphQL APIを使用していましたが、 itunes search APIはRESTでGETリクエストを送るだけです。 ただし、今回はサーバ側ではなくクライアント側の実装なのでCORS問題が発生します。 クエリパラメータにcallbackを指定して、fetch-jsonpでJSONPを扱います。

itunes search APIへの問い合わせ。ページングとURLエンコード済み

(async()=>{
        if(keyword !== undefined){
            let url = 'https://itunes.apple.com/search?term='+encodeURIComponent(keyword)+'&offset='+((pageNum-1)*50)+'&limit=50&media=music&country=jp&lang=ja_jp';
            let resp = await fetchJsonp(url);
            let response = await resp.json();
            if(response !== null){
                store.dispatch(loadData(response.results))
                console.log(store.getState());
            }
        }
    })().catch(
        error=>{
          console.log(error);
        }
    )

要素内スクロール

アニメランキング作成サービスではあまり使っていなかったのですが、 下部にプレイヤーが表示されるため、

.scroll{
    height: calc(100vh - ヘッダの高さ);
    over-flow: scroll;
}

スクロールを実装しています。

選択時にUIがガタガタする問題への対処

アニメランキング作成サービスではまだ改善できていませんが、 選択前と選択後で枠線の太さを変える実装をしているため、UIががたつくという問題がありました。 あらかじめ同じ太さで目立たない色の枠線にしておき、選択された際に色のみを変える方法を取っています。