グロウコミュニティ株式会社はリスキリング(再教育)を得意とし、日本のIT人材不足の解決や人材教育のDXに取り組んでいるIT企業です。

自分自身、音楽が好きで演奏や作曲もするクリエイターなんです。

はい、サンプルの曲を耳コピで演奏して制作しました。ロゴも自分で描いてます。

そうですね。自分自身、作品づくりを続ける中で、クリエイターが何かを創り上げるのは、膨大な時間と莫大な資金の投資が必要だと感じていました。

しかし、その大きな投資の反面、高い技術を持ったクリエイターでも、それで収益を得るのは難しいと常々感じています。

そこで、そんなクリエイターを誰でも手軽に応援でき、クリエイターの収入にもつながるサービスを作りたいと考えました。

まず初めにサイトの仕様書や遷移図を作成しました。

はい、もちろんです。サイトの仕様書や遷移図はこれまで書いたことがなかった上に、コーディングなど地味な作業だったため、設計書を制作するのは正直億劫でした…。

しかし、実際に現場に入ると、仕様書を読み解く力はとても大事だったので、この作業を丁寧にやってよかったです。

「クリエイターを応援する＝収入に繋げられる仕組みをつくりたい」
そんな想いから投げ銭機能は絶対につけたいと最初から考えていました。

また、自分自身の技術向上のためにも作品の中には次のような点を盛り込みました。

・楽曲、画像の投稿による、ファイル出力に関する技術
・決済機能としてAPIの実装(Google Mapなど、他社サービスの機能を自分のサイトに取り入れることです！)
・いいねやフォロー機能などの、非同期処理の実装

全体的なレイアウトは、ほとんどBootstrapを使って実装しました。
初めて触ったフレームワークなので最初は苦戦しましたが、慣れればこれほど便利なものはないと感じるほどになりました！
(※LaravelではTailWindが推奨されているようですが、製造前に調べ切れずBootstrapでやり切ることになりました)

ヘッダーメニューに検索を実装しました。
JSで動的にメニューが展開されるようになっています。

キーワード検索・ジャンル検索が同時に行えるということで、二つの検索条件を組み合わせるのが非常に難しく、終盤まで不具合の対応に追われました…。

特にジャンル検索は、中間テーブルを使って実装しているため、かなり苦戦を強いられました。おかげで中間テーブルに関して苦手意識を克服できたんですけどね！

ここは、バリデーションを入れたりファイル形式を判定するだけなので、基礎知識だけで簡単に実装できました。
今思えば、サムネイルをアップロードした際に、プレビューが表示された方が親切だったなという反省点はあります。

再生UIについては、再生、停止、音量調整、ミュートが可能です。
すべてJava Scriptで実装しました(ギリギリ、曲の総再生時間だけは表示できました)。

StripeというAPIを使用しました。
サイト内で課金されると、Stripeのマイページに売り上げデータが反映されるようになっているので便利です。

BANは、誤BAN防止のため管理者のみが行えるようになっています。
一般ユーザーであれば、「BAN」の表示は「フォロー」になっており、非同期処理で行っています。

振り返ると、壁・壁・壁…でした。
一つの機能を実装する毎に、毎回一つずつ壁にぶち当たって何時間も調べ、悩んでばかりでしたね。

でも、触れたことのない技術や概念もどんどん学んでいき、実現する度にレベルが１ずつ上がっていっているような感覚を覚えました。基礎学習だけでは到達できない領域まで来ることが出来たと思います！

プログラミングは超楽しいです！
正直言って向き不向きはあると思いますが、壁を乗り越えた時の達成感は、ゲームやスポーツ、楽器演奏などに共通するものがあると思っています。

今後は、一人でも良いので、誰かに利用してもらえる面白いサービスをつくっていきたいです。他の人が実現したいことを、一緒に実現してあげられるような活動もしていきたいと考えています！