はじめに
皆さんはカラオケに行った時、歌う曲に困った経験はありませんか？
最近はこのご時世なのでなかなかカラオケにも行きづらい状況ですが、私自身そういったことがよくありました。
また、私は一緒に行った友人の歌を聴くのも好きなので少しでも歌う曲に悩む時間を減らしたいとも思っていました。
そんな経験から自分と同じような悩みを持つ人に、よりカラオケを楽しんでもらいたいと思い、「PICKUP TRACK」を作成いたしました。
URL: https://pickup-track.com
GitHub: https://github.com/junjunpei/pickup_track
サービス概要
※パソコン、スマホどちらからでも使用できますが、カラオケで使っていただくことを想定しているため、説明にはスマホ画面の画像を使用します。
1. ホーム画面
黒を基調としたデザインで統一しました。
2. 会員登録、ログイン
恐れ入りますが、会員登録とログインをお願いします。
3. 楽曲検索画面からマイライブラリに追加
自分の好きな曲を曲名やアーティスト名で検索して、プラスボタンをワンタッチでマイライブラリに追加することができます。同じようにゴミ箱ボタンを押せばマイライブラリから削除することもできます。
4. マイライブラリに追加された曲からおすすめ曲を表示
曲を検索して追加するという手間を少しでも省くため、また、あまり曲を知らずもっと他の曲を知りたい方に向けてのレコメンド機能として、マイライブラリに追加されている曲から「おすすめ曲」を表示していて、そこから追加も削除も出来るようになっています。
5. マイライブラリからランダムで1曲ピックアップ
「ピックアップ」ボタンを押すとマイライブラリの中からランダムで1曲選んでくれます。「もう一度！」を押せば何度でもピックアップでき、「この曲を歌う！」で決定できます。また、下にスクロールすると右下にボタンが表示され、それを押してもピックアップができます。
6. ユーザー情報画面に歌った曲の履歴を表示
ユーザー情報画面には歌った履歴が「新着順」と「回数が多い順」で表示されます。「新着順」では履歴の削除ができ、「回数が多い順」では歌った回数が表示されます。どの曲をよく歌っているかが分かるので「あれ、いつも何歌ってたっけ？」となるのを防ぐことができます。
使用技術
- Ruby 2.7.2
- Rails 6.0.3
- Vue.js 2.6.14
主要Gem
- sorcery
- jwt
- rubocop
- meta-tags
- dotenv-rails
- byebug
- capybara
主要JavaScriptパッケージ
- vuetify
- vue-router
- vuex
- axios
- vee-validate
テスト
- Rspec
インフラ
- Heroku
- MySQL
API
- Spotify API
リリース後に導入した機能
- おすすめ曲機能
今後導入したい機能
- プレイリスト機能
- マイライブラリに曲を追加する手間をより省けるような機能
- SNSログイン
終わりに
最後まで見ていただき、ありがとうございました！
まだまだ自分に足りない部分だらけで開発も苦労しましたが、だからこそ完成した達成感は大きく、愛着のあるものになりました。
見ていただいた皆さんもよければ使ってみていただけると嬉しいです。
改めましてありがとうございました。