こんにちは！アルバイトのガマ🐸です！！
今回は、先日開催した開発合宿 in 那須高原（2泊3日）での各チームの成果物を発表します！！
今回の合宿では、
「定量化が難しいものを、定量化・可視化するサービスを考え、制作する」
というテーマのもと、A〜Eの5チームに分かれて開発に取り組みました！
チームは、あえて普段あまり接点のないメンバー同士で組まれました！
初めてしっかり話すような相手とも協力しながら、
限られた時間の中でひとつのアイデアを形にしていくという、合宿ならではの濃い体験になりました！
各チームの成果物紹介 （前編）
前編ではAチーム、Bチームの成果物を紹介します！！
Aチーム 1f4a9
なにかの文字コードらしいです。調べてみましょう！
作ったもの
私たちチーム・1f4a9では排便予測アプリ・unkastを作成しました。
開発
排便予測アプリ・unkastはFlutterを使って開発しました。メンバー全員がFlutter未経験でしたが、エージェント型生成AIツールを使うことで動くものはできました。
使用したツールはメンバーによって異なりますが、CursorとCodexを使っています。
Cursorは.cursor/rulesディレクトリの下にあるファイルを見て要件やコーディングルール等を把握しますが、CodexはAGENTS.mdを見て把握します。つまり、プロジェクトによって見るディレクトリ・ファイルが異なります。
そこでAGENTS.mdに.cursor/rulesを見るように指示を書いておくことで異なるツールを使っているメンバー間でAIに参照させるファイルを共有させました
使用した絵文字
排便確率によって表示するアイコンは以下のような処理になっていますが、絵文字やコメントも生成アプリが作ったものになります。(しっかりと排便予報アプリを理解した上でボケてきていてすごい...)
// 確率に応じた顔文字を返す
String getFaceEmoji(int percent) {
if (percent < 20) {
return '😄'; // 好調
} else if (percent < 50) {
return '😐'; // 怪しい
} else if (percent < 80) {
return '😣'; // 厳しい
} else {
return '💩'; // もう無理
}
}
反省点
今回作成したアプリはフロントだけで、表示されているデータはモックデータでした。 しかし、サーバーサイドも実装してそこでモックデータを返しておけばよかったと思いました。
Bチーム Factimes
概要
Bチームは、人の心の距離が可視化されるSNSを作成しました。その名もFactimes
機能はシンプル。
1. コア機能
1.1 心理的距離マップ
ユーザー間のコミュニケーションの活発さを基に、組織内の心理的な距離や影響度を2Dマップ上にリアルタイムで可視化します。
- ユーザー配置: ユーザーを円形のアイコン（ノード）としてマップ上に表示します。
- 距離の表現: ユーザー間の距離が近いほど、アイコン同士が近くに配置されます。
- 影響度の表現: ユーザーの影響力が高いほど、アイコンのサイズが大きくなります。
- リアルタイム更新: ユーザー間のインタラクションに応じて、座標やノードサイズが動的に更新されます。
1.2 タイムライン
一般的なSNSと同様に、投稿が時系列で表示されるタイムライン機能です。
- 表示: 投稿を時系列順に表示し、無限スクロールに対応しています。
- フィルタリング: 特定のユーザーや期間で投稿を絞り込むことができます。
2. SNS機能
2.1 投稿機能
ユーザーはテキストや画像を投稿し、他のメンバーと情報を共有できます。
- テキスト投稿: 最大500文字までのメッセージを投稿できます。
- 画像添付: 1投稿あたり最大4枚まで画像を添付できます。
- メンション:
@username形式で特定のユーザーに通知を送ることができます。 - ハッシュタグ:
#tag形式で投稿を分類・検索しやすくします。
2.2 インタラクション機能
投稿に対して、さまざまな方法でリアクションやコミュニケーションが可能です。
- いいね: 投稿をワンクリックで評価します。
- 絵文字リアクション:
😀,👍,❤️など、複数の絵文字で感情を表現できます。 - リツイート: 他のユーザーの投稿を自分のタイムラインで共有します。
- コメント: 投稿に対して返信や議論ができます。
- 投稿編集・削除: 自身の投稿を後から修正・削除できます。
3. ユーザー管理機能
3.1 認証・認可
セキュアな利用環境を提供するためのユーザー管理機能です。
- 組織ドメイン制限: 特定の組織ドメインを持つメールアドレスでのみ登録・利用が可能です。
- セッション管理: 安全なログイン状態の維持と管理を行います。
- ロールベースアクセス制御 (RBAC): 管理者や一般ユーザーなどの役割に応じた権限を付与します。
3.2 プロフィール管理
ユーザーが自身の情報を管理・公開するための機能です。
- 基本情報: 名前、部署、役職などを登録できます。
- アバター画像: プロフィール画像を設定できます。
- 自己紹介: フリーテキストで自己紹介を記述できます。
技術スタック詳細
コアテクノロジー
| カテゴリ | 技術 | バージョン/詳細 |
|---|---|---|
| 言語 | TypeScript | v5.x |
| フレームワーク | Next.js | v15.3.1 |
| UIライブラリ | React | v19.0.0 |
| データベース | PostgreSQL | - (要件定義ではv17を推奨) |
| ORM | Prisma | v6.9.0 |
| 認証 | NextAuth.js | v5.0.0-beta.28 |
主要ライブラリ (フロントエンド)
| ライブラリ | 用途 |
|---|---|
date-fns |
日付・時刻の操作 |
zod |
スキーマ定義とデータ検証 |
CSS Modules |
コンポーネント単位でのCSSスタイリング |
主要ライブラリ (バックエンド)
| ライブラリ | 用途 |
|---|---|
@auth/prisma-adapter |
NextAuth.jsとPrismaを連携させるアダプタ |
bcryptjs |
パスワードのハッシュ化処理 |
開発ツール・環境
| ツール | 用途 |
|---|---|
| 開発環境 | Docker / Dev Container |
| リンター | ESLint |
| フォーマッター | Prettier |
| Gitフック | Husky, lint-staged |
| DBマイグレーション | Prisma Migrate |
| 開発サーバー | Next.js (Turbopack利用) |
| スクリプト実行 | tsx (TypeScript実行) |
徹底したバイブコーディング
Bチームの特徴は完成したプロダクトそのものというよりは、その過程
Bチームでは、今回人間が直接コードを編集していません。
すべてCursorを使ったバイブコーディングで開発しました。
人間がやると200時間かかるとされた作業を、合宿内の8時間に短縮することに成功。
ただ、この作業圧縮は、
人間が最適なアーキテクチャを指定してあげて
AIが得意とする技術に合わせて要件を調整してあげたから
できたことです。
なので、妥協した箇所、もっと良くできる箇所がめちゃくちゃあります。 とはいえ、実際にSNSとして動き使えるものが出来上がりました。
今回証明できたのは、AI使役者がシステム開発に精通している場合のバイブコーディングの実用性。
今後の課題は、
これを弊社の実際の業務オペレーションに落とし込み、実際に開発サービスとして提供できるようにすること
AI使役者がシステム開発に精通していない場合でも製品になるものを作れるようにしていくこと
でしょうか。
チームの目標とモチベーション
Tech という点からはすこし話がそれますが....... Bチームのチームリーダーを務めた人間が技術者上がりではなくスタートアップ界隈出身だったため、 Bチームの目標は優勝だけではなくその先、「もしプレシードだったら1000万調達できるようなプロダクトを作る」でした。
なので、僕らだけハッカソンというよりはビジコンみたいなプレゼンをしてしまったわけですが....... ただそういうだけあって、ちゃんと裏でしっかり市場分析や戦略策定もしたりしたので、スプーキーズからいつかプロダクトとして世に出るかも？ でたらいいな。
前編はここまで！
C・D・Eチームの成果物も、かなりユニークなものばかり！
次回の後編では、それぞれのアイデアや工夫をたっぷりご紹介しますので、お楽しみに🥳
