This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 1 year has passed since last update.

Kitchotify

Rails

Posted at 2023-09-15

はじめに

　本記事ではコサメガが作成した作曲サークル内音楽ストリーミングサービス「Kitchotify」について、作成動機、サービス概要などを説明します。ソースコードをGitHubで公開しています。

作成の動機①

サークルの状況

　私が所属している作曲サークルでは、2ヶ月に1回会員達がオリジナル曲を提出し、提出された曲を皆で聴き、提出された曲でアルバムを作ってデジタルリリースしています。またコロナ以降全ての活動が基本的にオンラインで行われています。

問題

　コロナ以降全体的にコミュニケーションが減っていたこともあり、会員がそれぞれの曲を1度聴いてそれで終わりという状況がありました。お互いの曲をじっくり聴いて感想・アドバイスを言い合うことや、軽く感想を言い合うことなどは、曲作りがうまくなるために、また会員同士の仲を深めるために重要なことなので解決したいと考えていました。

解決策

　提出された曲を聴きにくいことが原因であると考え、会員の作った曲が聴きやすくなるサービスを作りました。また会員が作った曲に関するコミュニケーションを活性化するために、コメント機能、会員の曲を使って遊ぶイントロクイズを実装しました。

作成の動機②

サークルの状況

　生産担当が曲情報提出用のgoogleフォームを作成し、曲を作った会員がフォームで情報を提出。提出された情報を元に、複数の役職が異なる仕方で曲情報を管理していました。

問題

　業務の重複や無駄が発生していました。

解決策

　KitchotifyのDBに曲情報を登録してもらい、APIを通してその情報を利用してもらうことで曲情報の管理を一元化しました。またフォーム作成のAPIを実装し、他の会員が開発しているbotと連携することで、今まで生産担当が行っていたフォームの作成、URLの共有も自動で行われるようにしました。

サービスの概要

ホーム画面

吉田音楽製作所からリリースされた曲をストリーミング配信するサービス
ログイン、再生プレイヤー、お気に入り、プレイリスト、検索、コメント、イントロクイズを実装
簡単にアルバム、曲情報、音源を登録できるUIを実装
SpotifyのUIとSoundcloudのSNS的要素の良いとこ取りを目指しました

機能詳細

ログイン機能

基本的なログイン機能が実装されています。
アカウントを持っているサークル会員以外は基本的に全ての機能が利用できないようになっています。
後述するお気に入り、プレイリストなどは、その作成者のみが編集できるように制限しています。

再生プレイヤー

以下のような基本的な機能を持つ再生プレイヤーが実装されています。

次の曲・前の曲へ
連続再生、ループ再生の切り替え
「アーティスト - 曲名」の表示
歌詞やクレジットなど、曲の情報の表示
再生音量の非同期での保存

お気に入り

曲を非同期でお気に入りに登録、解除することができます。

プレイリスト

非同期でプレイリストを作成・削除、プレイリストに曲を追加・削除することができます。
ドラッグアンドドロップで曲の順番を非同期で並び替えることができます。
「公開」に設定したプレイリストのみ他のユーザーも利用することができます（編集は不可）。

検索

曲名、アーティスト名、プレイリスト名、ユーザー名で検索することができます。

曲にコメントをすることができます。
コメントをするとDiscordサーバーの新規コメントチャンネルに通知が送られます。

イントロクイズ

会員が作成した曲のイントロクイズで遊べます。
回答タイムのランキングが実装されています。

アルバム・曲の登録

エディターモードをオンにするとアルバム・曲の追加や編集するためのUIが表示されます。

Kitchotify Search API

アクセストークン

Kitchotifyが発行したSearch API TokenをAuthorizationリクエストヘッダに付与してください。

Authorization: Bearer xxxxxxxxxxxxxx

ステータスコード

下記のコードを返却します

ステータスコード	説明
200	リクエスト成功
400	不正なリクエストパラメータを指定している
401	API Tokenが不正
500	不明なエラー

曲検索API

HTTPリクエスト

GET https://kitchotify-app.herokuapp.com/api/musics?name=(検索したい曲名）

リクエストパラメータ

パラメータ	内容
name	検索したい曲名

レスポンス例

GET https://kitchotify-app.herokuapp.com/api/musics?name=kamogawa

{
  "musics":[
    {
      "name":"Kamogawa Hallucination",
      "album":"月吉174号",
      "track":9,
      "artist":"kosamega",
      "url":"https://kitchotify-app.herokuapp.com/albums/4/musics/52"
    },
    {
      "name":"Kamogawa Somato",
      "album":"月吉177号",
      "track":4,
      "artist":"kosamega",
      "url":"https://kitchotify-app.herokuapp.com/albums/7/musics/119"
    }
  ]
}

アルバム検索API

HTTPリクエスト

GET https://kitchotify-app.herokuapp.com/api/albums?name=(検索したいアルバム名）

リクエストパラメータ

パラメータ	内容
name	検索したいアルバム名

レスポンス例

GET https://kitchotify-app.herokuapp.com/api/albums?name=party

{
  "albums":[
    {
      "name":"kitchon party! vol.2",
      "kiki_taikai_date":"2022-09-24",
      "url":"https://kitchotify-app.herokuapp.com/albums/18",
      "musics":[
        {
          "name":"FAQ",
          "album":"kitchon party! vol.2",
          "track":1,
          "artist":"ボカロック部",
          "url":"https://kitchotify-app.herokuapp.com/albums/18/musics/273"
        },
        {
          "name":"一陽来復",
          "album":"kitchon party! vol.2",
          "track":2,"artist":"ベイビージャック",
          "url":"https://kitchotify-app.herokuapp.com/albums/18/musics/274"
        },
        {
          ……
        }
      ]
    },
    {
      "name":"kitchon party! ～combination-compilation～",
      "kiki_taikai_date":"2021-09-26",
      "url":"https://kitchotify-app.herokuapp.com/albums/11",
      "musics":[
        {
          "name":"消えたポラリス",
          "album":"kitchon party! ～combination-compilation～",
          "track":1,
          "artist":"ソニオル+一葉+なずしろ",
          "url":"https://kitchotify-app.herokuapp.com/albums/11/musics/110"
        },
        {
          ……
        }
      ]
    }
  ]
}

アーティスト検索API

HTTPリクエスト

GET https://kitchotify-app.herokuapp.com/api/artists?name=(検索したいアーティスト名）

リクエストパラメータ

パラメータ	内容
name	検索したいアーティスト名

レスポンス例

GET https://kitchotify-app.herokuapp.com/api/artists?name=same

{
  "artists":[
    {
      "name":"kosamega",
      "bio":"make光のmusic",
      "url":"https://kitchotify-app.herokuapp.com/artists/17",
      "musics":[
        {
          "name":"急げ！！！",
          "album":"月吉186号",
          "track":17,
          "artist":"kosamega",
          "url":"https://kitchotify-app.herokuapp.com/albums/36/musics/328"
        },
        {
          "name":"Hikari_to_Kaze",
          "album":"月吉182号",
          "track":1,
          "artist":"kosamega",
          "url":"https://kitchotify-app.herokuapp.com/albums/14/musics/225"
        },
        {
          "name":"No going through",
          "album":"月吉180号",
          "track":24,
          "artist":"kosamega",
          "url":"https://kitchotify-app.herokuapp.com/albums/10/musics/213"
        },
        {
          ……
        }
      ]
    }
  ]
}

Kitchotify Create API

アクセストークン

Kitchotifyが発行したCreate API TokenをAuthorizationリクエストヘッダに付与してください。

Authorization: Bearer xxxxxxxxxxxxxx

ステータスコード

下記のコードを返却します

ステータスコード	説明
200	リクエスト成功
400	不正なリクエストパラメータを指定している
401	API Tokenが不正
409	作成に失敗
500	不明なエラー

アルバム作成API

HTTPリクエスト

POST https://kitchotify-app.herokuapp.com/api/albums?name=(作成したいアルバム名)&kiki_taikai_date=(聴き大会開催日)

リクエストパラメータ

パラメータ	内容
name	作成したいアルバム名
kiki_taikai_date	聴き大会開催日

レスポンス例

POST https://kitchotify-app.herokuapp.com/api/albums?name=test_album&kiki_taikai_date=2099-01-01

{
  "album":{
    "name": "test_album",
    "kiki_taikai_date": "2099-01-01",
    "form_url": "https://kitchotify-app.herokuapp.com/albums/38/musics/new"
  }
}

使用技術

バックエンド

Ruby 3.1.2
Ruby on Rails 7.0.4
- 開発開始時の知識ではNode.jsを使う選択肢もあったのですが、チュートリアルなど日本語の情報へのアクセスしやすさ、データベースの扱いやすさなどからRailsを使用することに決めました。

主要gem

aws-sdk-s3
gon
acts_as_list
- playlistの曲順並び替えに使用

フロントエンド

JavaScript
Bootstrap 5.0.2
Haml

インフラ

Heroku
- デプロイの簡単さから選びました。
PostgreSQL
AmazonS3

ER図

今後の課題

n回提出、n回連続提出などするとトロフィーをもらえるようにする（提出モチベのアップ）
イントロクイズのルールを増やす
- あるアーティストの曲限定の問題など？
ドラッグアンドドロップでプレイリストに曲を追加できるようにする
userがアバター画像を持つようにする
サーバーの移行を検討する
- 現在Herokuを用いているが検討が足りていなく、もっといいサービスがあるかもしれない
曲にタグ付け、タグ検索できる機能を追加

開発期間・学習期間

開発期間

2022/07/24
- 開発開始
2022/08/27
- ベータ版をリリース
2022/09/15
- 正式リリース
2022/11/08
- プレイリストの曲順をドラッグアンドドロップで変更できる機能を実装
2022/12/10
- イントロクイズを実装
2022/12/12
- Railsを7.0.4へアップグレード
2023/02/11
- 検索APIを実装
2023/02/17
- アルバム作成APIを実装

学習期間

2022/04-06
- プログラミングの独学を開始。
  - AtCoder Programming Guide for beginnersでC++を学習
  - ProgateでHTML、CSS、JavaScript、Node.js、Ruby、Rails5、jQuery、SQL、Gitを学習
  - 『Unityの教科書 Unity2021完全対応版―2D&3Dスマートフォンゲーム入門講座』でUnity、C#を学習
2022/07
- Ruby on Rails チュートリアル第6版でRailsを学習
2022/08-
- Kitchotifyの開発と並行してRails、JavaScriptなどを学習
2022/09-
- Git、Rails、Next.jsなどを用いたWebアプリケーション開発のアルバイトを開始

おわりに

　以上Kitchotifyについて、作成動機、サービス概要などを説明しました。何かありましたらコサメガのtwitterまでご連絡ください。ご覧いただきありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up