https://music-ranking-maker.netlify.com/
- URLシェアの例
UIが似ているのでお気づきの方もいらっしゃると思いますが、10/27にリリースしたアニメランキング作成サービスの派生プロジェクトです。
楽曲の情報も持てないかな、と思ってちょっと調べたところ、itunes search APIを見つけました。
今回使ったライブラリ:react-player
音楽プレイヤーを実装するにあたり、いくつかのコンポーネントを検討しましたが、最初のうち、あまりにUIが簡素(開発者が自由に作れる)で敬遠していました。
ただ、controls
オプションでHTML5 Audioのネイティブプレーヤーを表示できることに気づいたのでこちらを採用しました。
アニメランキング作成サービスでは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ががたつくという問題がありました。
あらかじめ同じ太さで目立たない色の枠線にしておき、選択された際に色のみを変える方法を取っています。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント