私は、プログラミング学習コミュニティ POSSE 主催のチーム開発コンテストにて、8チーム中2位という結果を収めました。
企業から出題された課題に対し、要件定義から開発・発表までを行い、企画力と技術力を活かして独自性の高いWebサービスを開発しました。
📖 このコンテストの様子は、AWS公式ブログにも掲載されています：
👉 要件定義・開発・チームワーク──学生たちの挑戦が実を結ぶ！ POSSE決勝レポート
4人チームでの開発において、私は主にバックエンド開発と要件定義の初期アイデア出しを担当しました。
いわゆる「アイデアマン」として企画段階から積極的に貢献しつつ、PHPとMySQLを用いたDB設計・情報取得処理やフロントとの繋ぎこみを主導しました。
フレームワークが使用禁止という制約の中で開発効率を上げるために、以下の工夫をしました：
- PHPでのルーティング機能の自作
- HTMLの簡易コンポーネント化
- 再利用可能なカスタムフックの作成
使用技術スタック：
HTML/CSS (Tailwind CSS) / JavaScript / PHP / MySQL / Docker / GitHub
お題は、日本最大級クラウドソーシングサービス 「ランサーズ」 様より出題された
「大学生サークル間のクラウドソーシングアプリのプロトタイプ」でした。
背景となる課題：
- 大学生サークル間の交流不足
- ランサーズ様の若年層への認知度向上
私たちが直面した課題は以下の3点でした：
- 各チームで同じ要件を満たす中での差別化
- SNS（XやInstagram）との差別化
- サービスを通じたクラウドソーシング認知の向上
まず、「なぜこのサービスが必要なのか？」を深掘りし、
スキルアップやサークル活動の発展を目的とした交流に本質的なニーズがあると仮説を立てました。
- 実績を作りたいクリエイティブ系サークル
- SNS運用や動画制作を依頼したい一般サークル
この二者をマッチングさせるサービス
「Circle Quest（CQ）」 を開発しました。
- サービス内での定量評価とコメント表示機能を実装
- SNSにはない評価の可視化により信頼性を担保
- 評価の高いサークルはランサーズ様から表彰される動線を設計し、
フリーランスとしての第一歩を支援する仕組みを実現
このように、技術面だけでなくユーザーの潜在的な課題を捉えて本質的な価値を届けることを目指し、
独自の機能を企画・開発しました。
その結果、審査員から高い評価を獲得し、2位入賞という成果に繋がりました。
環境構築の手順
/Circle-Questフォルダに移動し、以下のコマンドを実行する
make init- DBコンテナが起動したのを確認後DBを初期化する
make db/init.envファイルを作成.env.exampleの内容をコピーして貼り付ける- ファイルは
.env.exampleと同じ階層に配置する
-
以下のコマンドをターミナルで実行する
docker compose build --no-cache docker compose up -d
-
以下のコマンドをターミナルで実行する
docker compose exec php npm install docker compose exec php npm install tailwindcss
-
以下のコマンドをターミナルで実行する
docker compose exec php bash -
root@...のシェルに入るので、以下のコマンドを実行し、node,npm,tailwindcss,composerがインストールされていることを確認するnode -v npm -v npm list tailwindcss
出力例（エラーが出なければ成功）:
v18.16.0 9.5.1 tailwindcss@3.4.17______ / ____/___ ____ ___ ____ ____ ________ _____ / / / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/ / /___/ /_/ / / / / / / /_/ / /_/ (__ ) __/ / \____/\____/_/ /_/ /_/ .___/\____/____/\___/_/ /_/ Composer version 2.8.6 2025-02-25 13:03:50
composerがインストールされていない場合は以下のコマンドをターミナルで実行
composer install- Tailwind CSS をインストール
- PHPコンテナから抜け、
/srcフォルダに移動 - 以下のコマンドをターミナルで実行する
npm install -D tailwindcss-
以下のコマンドを実行し、Tailwind をビルドする
npm run build
Ok to proceed? (y) yと表示された場合はyを入力して Enter を押す。 -
以下のコマンドをターミナルで実行し、DBを初期化する
/Circle-Questフォルダで実行すること
docker-compose exec db mysql -uroot -proot -e "SOURCE / docker-entrypoint-initdb.d/init.sql;"
動作確認方法
- ログインしていない状態だとLPに飛びます
- 「ログアウト」ボタンを押すとログインページに飛びます
- アドミンアカウント
- 依頼・イベント作成はこのアカウントにログインしてテストしてください
メールアドレス: admin@example.com
パスワード: password
- ユーザーアカウント
- 依頼・イベントへの応募のテストは以下のアカウントにログインしてテストしてください 特に指定がない場合、「ユーザーアカウントにログイン」はtest@example.comにログインすることを指します
メールアドレス: test@example.com
パスワード: password
メールアドレス: test2@example.com
パスワード: password
メールアドレス: test3@example.com
パスワード: password
- 新規会員登録ページを閲覧する
- 各項目にそれぞれ該当する値を入力し、「登録」ボタンを押す
名前: 山田太郎
生年月日: 2005/01/01
所属大学名: 太郎大学
所属サークル名: 太郎サークル
所属サークルのタイプ: 同学
メールアドレス: taro@example.com
Lineの招待リンク: https://www.line.me/ja/
インスタグラム: https://www.instagram.com
X(Twitter): https://x.com/
プロフィール画像: {なしで大丈夫です}
電話番号: 0123456789
パスワード: password
- ログインページに遷移し、登録した情報を元にログインする
メールアドレス: taro@example.com
パスワード: password
- ログイン後アカウントが登録されたことを確認
- アドミンアカウントにログインする
- ログイン後サイドバーにある「依頼する」リンクを押し依頼作成ページに遷移する
- 各項目にそれぞれ該当する値を入力し、「作成」ボタンを押す
1.依頼のタイトル: テスト依頼作成
2.依頼内容: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
3.サークルを選択: {初期値のままで大丈夫です}
4.カテゴリー : {初期値のままで大丈夫です}
5.金額 : 0
6.期日 : 2025/05/01
7.コメント: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
- 作成後、ヘッダーの「ログアウト」ボタンからログアウトする
- ユーザーアカウントにログインし、サイドバーの「依頼を探す」リンクを押す
- 依頼検索ページに遷移する
- 作成した「テスト依頼作成」依頼の「詳しく見る」ボタンから依頼応募ページに遷移する
- チェックボックスにチェックを入れ、「応募する」ボタンを押す
- 適当な画像(最大サイズ10MB, 拡張子:jpeg,png,jpg)または動画(最大サイズ：10MB, 拡張子：mp4)を添付し、「提出する」ボタンから提出する
- トップページの「選定待ち中」一覧から応募した事を確認
- 以下アカウントをtest2またはtest3に変えてステップ5からやりなおす
- アドミンアカウントにログインする
- トップページの「選定中/応募待ち中の依頼」一覧から作成した依頼の「詳細を見る」ボタンを押し、選定画面に遷移する
- 「提出物をみる」からそれぞれの提出物を見えることを確認する
- 一番最初の提出物の「お願いする」ボタンを押し、「確定」ボタンで選定する
- トップページの「納品待ち中の依頼」に依頼が移動していることを確認する
- ユーザーアカウントにログインしトップページから依頼検索ページに遷移する
- カテゴリー別検索からカテゴリーを選択し「検索」ボタンを押し、検索結果が変わるかを確認
- 検索欄からキーワードを入れヒットした検索結果が閲覧できるかを確認
- ユーザーアカウントにログインする
- トップページの「サークルに参加する」ボタンからサークル検索ページに遷移する
- 適当なサークルの「参加する」ボタンを押し参加する
- 参加したサークルの「詳細を見るボタン」からサークル詳細ページに遷移し、テストユーザーがサークルのメンバーの一員になってることを確認する - この時、一つのサークルに複数のメンバーが存在することができるのを確認する
- ユーザーアカウントにログインし、ヘッダーの通知ベルマークから、通知一覧ページに遷移する
- 「おめでとうございます！あなたが選ばれました！」通知の「詳しく見る」から提出ページに遷移する
- 適当な画像(最大サイズ10MB, 拡張子:jpeg,png,jpg)または動画(最大サイズ：10MB, 拡張子：mp4)を添付し、「最終成果物を提出する」ボタンからもう一度提出する
- アカウントを変え、アドミンアカウントにログインし、通知一覧ページに遷移する
- 「最終成果物を納品しました！」通知の「詳しく見る」から評価ページに遷移する
- 各項目にそれぞれ該当する値を入力する
連絡のやり取りは適切であったか: 5
納品、決済は期日を守り、スムーズであったか: 5
またこのサークル・人と取引したいか？: 5
作品の質はどうか（依頼人の要求に沿っているか）: 5
他の人にどれくらいおすすめしたいか: 5
適度に進捗の共有はされていたか？: 5
コメント: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
- 「支払い状況を確認ボタン」を押し、「はい、支払い済みです」を選ぶ
- その後、「送信」ボタンを押し、評価を送信する
- アドミンからログアウトし、ユーザーアカウントにログインし、ヘッダーの通知ベルマークから通知一覧ページに遷移する
- 「〇〇さんが評価しました！」通知の「詳しく見る」から評価確認ページに遷移する
- ちゃんと評価が反映されているかを確認
- 通知一覧ページに遷移する「〇〇さんが決済・評価しました！依頼の評価をしましょう」通知の「詳しく見る」から評価ページに遷移する
- 同様に評価をし送信する
- アドミンにアカウントを切り替え通知から評価を確認する
- お題にはありませんが、自分たちが実装した機能の一部です。
- サービスを語る上では外せない機能なので以下に操作手順を説明します。
- アドミンアカウントにログインする
- 依頼作成ページから、イベントにトグル切り替えのボタンを押す
- 以下の項目を埋める
- この時画像は適当なもの(最大サイズ10MB, 拡張子:jpeg,png,jpg)2枚添付してください
- 画像それぞれにタイプを指定できますが、メインビジュアルとバナーを指定してください
イベント名: Event test 1
イベント内容: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
イベント画像（複数）: {画像1,画像2}
賞品: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
提出締め切り: 2025/05/01
発表日: 2025/05/04
タグ: #test1 #test2
- 「イベントを作成」ボタンを押す
- ログアウトして、ユーザーアカウントにログインする
- 通知一覧ページまたは検索ページからイベントの告知を確認する - 通知一覧ページの「詳しく見る」からイベントページに遷移する - 検索ページのバナー告知の画像をクリックしてイベントページに遷移する
- イベントページで「参加する」ボタンを押す
注意
- 応募した時点、自分たち・チームが確定するので、応募後に変更はできません
- チェックボックスにチェックを入れ、応募する
- 適当な画像(最大サイズ10MB, 拡張子:jpeg,png,jpg)または動画(最大サイズ：10MB, 拡張子：mp4)を添付し、提出する
- トップページからイベント一覧項目が閲覧でき、イベント応募の詳細ページに遷移できるのを確認
- イベント応募ページでチームでを選択する
- 「チームを作る」ボタンを押し、サークル検索ページに遷移する
- サークル検索ページでクラシックサークルのサークル詳細ページに遷移し、test2(寺山 文乃)の「詳しく見る」からユーザー詳細ページに遷移する
- そのメンバーの詳細ページから、チーム名(test team)、どのサークルの代表としてか(初期値でOKです)を決め、「チームを組む」ボタンを押す
- ログアウトし、test2(寺山 文乃)としてログインする
- 通知一覧ページから招待の通知を確認し、承諾ページに遷移する
- 招待を承認し、トップページでイベント一覧が見えることを確認する
- ユーザーアカウントにログインし、イベント一覧項目からイベントの詳細ページまで遷移する
- チェックボックスにチェックを入れ、応募する
- 適当な画像(最大サイズ10MB, 拡張子:jpeg,png,jpg)または動画(最大サイズ：10MB, 拡張子：mp4)を添付し、提出する
- トップページからイベント一覧項目が閲覧でき、イベント応募の詳細ページに遷移できるのを確認
- test2(寺山 文乃)としてログインし、通知一覧ページからチームがイベントに応募した旨と提出した旨の通知をそれぞれ確認する