概要
今まで聴いてきた音楽の中から「自分だけのベスト10」をアルバムアートを表示しつつ一覧にできるサービスを作成しました
個人的に使うだけなのでリンクは特に掲載しません。
実際に使用しているキャプチャも最後まで載せたいところですが、アルバムアートは著作権的にアウトだと思いますので、途中までになります。
実際にはこのあとアルバム一覧が表示→アルバムを選択したらアルバムアートが一覧で表示できます。
開発背景
友人とよく「◯◯ベスト10」というような話をします。ゲームだったり映画だったり…
それぞれの好きなものがわかりますし、色んな視点を聞くことができるので個人的にはすごく楽しい話題だと思っています。
この話をするときに視覚的な情報も一緒にあるとよりイメージつきますし、「それ知ってる！」みたいな話が広がると思い開発してみました。
あとは単純に勉強の意味もあります。
業務で主にフロントまわりを担当していますが、社内で使用しているシステムはレガシーなものばかりなので新しい技術を身に着けていくためにも、こういった手を動かす学習が習慣的に必要と思いました。
今回の開発のおかげで、これまでゲームとかで時間を潰していましたが、プログラムを触る時間のほうが圧倒的に多くなりました。
サービスの概要
あなただけのベスト10を作れます。
アーティストを検索して選択、それだけ。
一覧を画像共有することができます。
……本当にこれだけです。シンプルですね。
開発言語
フロントエンド
- HTML
- CSS
- JavaScript
- jQuery
バックエンド
- PHP
その他
- Spotify API
- composer
- spotify-web-api-php
環境
- Docker
良かった点
なるべくわかりやすく直感的に操作できるような画面設計にしました。
シンプルにするということは単純に情報を絞ればそれでいい、というわけではなく
「必要な情報はなにか？」ということを整理したうえでないと達成できないということを学べた気がしています。
あとはAPIで一度に取得できる楽曲情報件数がMAX50件だったので、全曲取得できるように工夫できた点は良かったと思います。
先にも挙げてましたが、プログラムを触る時間が習慣化できたのは非常に良い収穫でした。
反省点
実装に入っていく前に機能を詳細に決めきらないまま進行してしまったことです。あとからこの機能があったほうがいいな、と気づいて追加して……みたいなことがよくありました
今後
今後はReactに移行することを目標としたいと思います。
当初勉強しながらReactで実装しようと思っていたのですが、いきなりあれこれ手を出しながら勉強は効率悪いと感じたので、まずは自分の使える技術で実装→移行という形にしました。
いずれはゲームや映画といったジャンルにも展開できていけたらと思っています。
今回初めてQiitaに投稿しました。
今後も学んだことをアウトプットしていきたいと思います。
プログラムいじるの楽しい～～～～～～～～～～～