2024/01/29
PHP開発・音楽サービス「Crowd Studio」【カリキュラム卒業生】Mさん
![](https://grow-community.net/wp-content/uploads/2024/01/372ca94a331f56fe8a55f0b70736ecbb-1024x536.jpg)
グロウコミュニティ株式会社では、未経験エンジニアの方を育てる独自の研修カリキュラムがございます。
![](https://grow-community.net/wp-content/uploads/2023/07/Tech-Grow-UP-14.59.32-1024x363.jpg)
※PHPかJAVAの選択制
PHPカリキュラムの卒業時には、自作で1つWebサービスを制作します。
今回は、Mさんの作品をご紹介します!
その名も「Crowd Studio(クラウドスタジオ)」!
![](https://grow-community.net/wp-content/uploads/2024/01/TOP1-1024x484.jpg)
「Crowd Studio」は、クリエイターをもっと手軽に、誰でも応援できるサービスです!
一見、一般的な音楽投稿サイトのようですが、
「クリエイターの応援」をテーマにしているため、いいね、フォロー、コメント機能はもちろん、投げ銭(課金)機能でクリエイターの収入につながる仕組みをつくりました。
PHPのフレームワークであるLaravelを使用して制作。レイアウトはBootstrapを使用しています。
ーーーなぜこのサービスを作りたいと思ったのですか?
自分自身、音楽が好きで演奏や作曲もするクリエイターなんです。
ーーーCrowd Studioの中の音楽もご自身で作成されたそうですね!
はい、サンプルの曲を耳コピで演奏して制作しました。ロゴも自分で描いてます。
![](https://grow-community.net/wp-content/uploads/2024/01/logo-300x163.jpg)
![](https://grow-community.net/wp-content/uploads/2024/01/logo-300x163.jpg)
▲クールなロゴも自作。
ーーーご自身がクリエイターであることから「クリエイターをもっと手軽に、誰でも応援できるサービス」を作ろうと繋がったのですね。
そうですね。自分自身、作品づくりを続ける中で、クリエイターが何かを創り上げるのは、膨大な時間と莫大な資金の投資が必要だと感じていました。
しかし、その大きな投資の反面、高い技術を持ったクリエイターでも、それで収益を得るのは難しいと常々感じています。
そこで、そんなクリエイターを誰でも手軽に応援でき、クリエイターの収入にもつながるサービスを作りたいと考えました。
Crowd Studioの設計について
ーーーCrowd Studioの設計はどのようにしていったのですか?
まず初めにサイトの仕様書や遷移図を作成しました。
![](https://grow-community.net/wp-content/uploads/2024/01/fe8ce06563e4eb13ca0fb3ca8e34b8cd-1024x576.jpg)
![](https://grow-community.net/wp-content/uploads/2024/01/fe8ce06563e4eb13ca0fb3ca8e34b8cd-1024x576.jpg)
▲このような画面仕様書を作成しました。
![](https://grow-community.net/wp-content/uploads/2024/01/020545a50f92d2ef3634bc0f682716cc-1024x569.jpg)
![](https://grow-community.net/wp-content/uploads/2024/01/020545a50f92d2ef3634bc0f682716cc-1024x569.jpg)
▲画面遷移図。
ーーーとっても細かい…初めて作成したんですよね?
はい、もちろんです。サイトの仕様書や遷移図はこれまで書いたことがなかった上に、コーディングなど地味な作業だったため、設計書を制作するのは正直億劫でした…。
しかし、実際に現場に入ると、仕様書を読み解く力はとても大事だったので、この作業を丁寧にやってよかったです。
ーーー今の現場に生かされているのですね!設計に盛り込んだポイントはありますか?
「クリエイターを応援する=収入に繋げられる仕組みをつくりたい」
そんな想いから投げ銭機能は絶対につけたいと最初から考えていました。
また、自分自身の技術向上のためにも作品の中には次のような点を盛り込みました。
・楽曲、画像の投稿による、ファイル出力に関する技術
・決済機能としてAPIの実装(Google Mapなど、他社サービスの機能を自分のサイトに取り入れることです!)
・いいねやフォロー機能などの、非同期処理の実装
ーーーポイント満載ですね。それでは、Crowd Studioを見てみましょう!
【TOPページ】
ログインするとこの画面に。
TOPページを更新する度に、9つのジャンルから毎回ランダムに表示されます。
![](https://grow-community.net/wp-content/uploads/2024/01/TOP1-1024x484.jpg)
![](https://grow-community.net/wp-content/uploads/2024/01/TOP1-1024x484.jpg)
![](https://grow-community.net/wp-content/uploads/2024/01/TOP1-1024x484.jpg)
![](https://grow-community.net/wp-content/uploads/2024/01/TOP2-1024x484.png)
![](https://grow-community.net/wp-content/uploads/2024/01/TOP2-1024x484.png)
全体的なレイアウトは、ほとんどBootstrapを使って実装しました。
初めて触ったフレームワークなので最初は苦戦しましたが、慣れればこれほど便利なものはないと感じるほどになりました!
(※LaravelではTailWindが推奨されているようですが、製造前に調べ切れずBootstrapでやり切ることになりました)
【検索機能】
キーワード検索・ジャンル検索が同時に行える便利な検索。
![](https://grow-community.net/wp-content/uploads/2024/01/fc0d49c34763a3abbbe4b1f8769c4fac-1024x484.jpg)
![](https://grow-community.net/wp-content/uploads/2024/01/fc0d49c34763a3abbbe4b1f8769c4fac-1024x484.jpg)
ヘッダーメニューに検索を実装しました。
JSで動的にメニューが展開されるようになっています。
![](https://grow-community.net/wp-content/uploads/2024/01/0a9aa5b148e963b50b48971bb84b98d6-1024x484.png)
![](https://grow-community.net/wp-content/uploads/2024/01/0a9aa5b148e963b50b48971bb84b98d6-1024x484.png)
キーワード検索・ジャンル検索が同時に行えるということで、二つの検索条件を組み合わせるのが非常に難しく、終盤まで不具合の対応に追われました…。
特にジャンル検索は、中間テーブルを使って実装しているため、かなり苦戦を強いられました。おかげで中間テーブルに関して苦手意識を克服できたんですけどね!
【投稿】
制作した音楽をアップロードする画面です。
![](https://grow-community.net/wp-content/uploads/2024/01/4967945ba894f7508fc323bade077923-1024x484.png)
![](https://grow-community.net/wp-content/uploads/2024/01/4967945ba894f7508fc323bade077923-1024x484.png)
↓楽曲やサムネイルをアップロードするとチェックボックスにチェックがつきます。
![](https://grow-community.net/wp-content/uploads/2024/01/6df5c486aba0f5397c8cbf58fefc7772-1024x484.png)
![](https://grow-community.net/wp-content/uploads/2024/01/6df5c486aba0f5397c8cbf58fefc7772-1024x484.png)
ここは、バリデーションを入れたりファイル形式を判定するだけなので、基礎知識だけで簡単に実装できました。
今思えば、サムネイルをアップロードした際に、プレビューが表示された方が親切だったなという反省点はあります。
【再生画面】
自分で投稿した場合と他ユーザーの投稿の場合と画面を分けています。
■自分で投稿した場合
タイトルやイメージ画像、概要欄の編集が可能です。コメントを削除することもできます。
![](https://grow-community.net/wp-content/uploads/2024/01/db5eee0fc7e6cbdfe8219965a53ee397-1024x484.png)
![](https://grow-community.net/wp-content/uploads/2024/01/db5eee0fc7e6cbdfe8219965a53ee397-1024x484.png)
■他ユーザーの投稿の場合
いいね、コメントができます。
誹謗中傷対策として「有料課金のポイントを1以上消費しなければコメントできない(※ポイントは1ポイント1円)」というルールがあります。「クリエイターを守る」ことも考えられています!
![](https://grow-community.net/wp-content/uploads/2024/01/fde44cc880331a3c25d1867dc8e5c127-1024x484.png)
![](https://grow-community.net/wp-content/uploads/2024/01/fde44cc880331a3c25d1867dc8e5c127-1024x484.png)
再生UIについては、再生、停止、音量調整、ミュートが可能です。
すべてJava Scriptで実装しました(ギリギリ、曲の総再生時間だけは表示できました)。
【投げ銭機能】
Crowd Studioの目玉機能!ポイントを購入することでコメントができたり曲を購入できたりします。
![](https://grow-community.net/wp-content/uploads/2024/01/30e458425ccf35b271b59936eafb019e-1024x484.png)
![](https://grow-community.net/wp-content/uploads/2024/01/30e458425ccf35b271b59936eafb019e-1024x484.png)
決済方法はクレジットカード各社、デビットカードなども対応しています。
※テストモードなので、実際には課金はされません。
![](https://grow-community.net/wp-content/uploads/2024/01/f18b680f7dc3cf24d3a1cb2716501864-1024x484.png)
![](https://grow-community.net/wp-content/uploads/2024/01/f18b680f7dc3cf24d3a1cb2716501864-1024x484.png)
StripeというAPIを使用しました。
サイト内で課金されると、Stripeのマイページに売り上げデータが反映されるようになっているので便利です。
【管理画面】
管理画面ではユーザーの基本情報や所持ポイントなどが確認できます。
![](https://grow-community.net/wp-content/uploads/2024/01/03100bb76b32071186e35cd682762394-1024x484.png)
![](https://grow-community.net/wp-content/uploads/2024/01/03100bb76b32071186e35cd682762394-1024x484.png)
BANは、誤BAN防止のため管理者のみが行えるようになっています。
一般ユーザーであれば、「BAN」の表示は「フォロー」になっており、非同期処理で行っています。
今回のPHP開発を通じての感想
ーーー今回の制作を振り返ってみていかがですか?
振り返ると、壁・壁・壁…でした。
一つの機能を実装する毎に、毎回一つずつ壁にぶち当たって何時間も調べ、悩んでばかりでしたね。
でも、触れたことのない技術や概念もどんどん学んでいき、実現する度にレベルが1ずつ上がっていっているような感覚を覚えました。基礎学習だけでは到達できない領域まで来ることが出来たと思います!
ーーー今後の展望など、最後にぜひ一言お願いいたします!
プログラミングは超楽しいです!
正直言って向き不向きはあると思いますが、壁を乗り越えた時の達成感は、ゲームやスポーツ、楽器演奏などに共通するものがあると思っています。
今後は、一人でも良いので、誰かに利用してもらえる面白いサービスをつくっていきたいです。他の人が実現したいことを、一緒に実現してあげられるような活動もしていきたいと考えています!
ーーー本当にプログラミングにどっぷりハマっていらっしゃるんですね!Mさんありがとうございました!
Mさんは未経験からカリキュラムを受講され、現在はシステム開発のプロジェクトに参画しています。
あなたもMさんのようにエンジニアとして活躍しませんか?
エンジニア未経験の方には充実の研修カリキュラムをご用意しています。
▼Mさんも受講したカリキュラム▼
![グロウコミュニティ株式会社カリキュラム](https://grow-community.net/wp-content/uploads/2023/07/Tech-Grow-UP-14.59.32-1024x363.jpg)
![グロウコミュニティ株式会社カリキュラム](https://grow-community.net/wp-content/uploads/2023/07/Tech-Grow-UP-14.59.32-1024x363.jpg)
前の記事 :
プログラマー5年でグロウコミュニティへ転職!チームリーダーも務める技術者に【Tさん】
次の記事 :
Sky株式会社様に表彰して頂きました!