emoCloudは、2025年6月21日～22日にチーム山頂が技育CAMPハッカソンで開発したWebアプリケーションです。
このアプリケーションは、周囲の人々の感情を可視化し、ユーザーが自分の感情を新しい方法で表現できるようにすることで、日常生活を豊かにすることを目指しています。誰もが気軽に感情を共有し、共感し合えるような体験を提供します。
日常生活で、こんな風に感じたことはありませんか？
- イベント会場で、今一番盛り上がっているブースはどこだろう？
- 周りの人が今、どんな気持ちでいるのか気になる。
- 自分の気持ちを言葉だけではなく、もっと感覚的に表現したい。
このような「感情の可視化」や「感情表現の新しい形」へのニーズに応えるため、emoCloudは誕生しました。物理空間における人々の感情を「見える化」することで、日常生活に新たな彩りをもたらし、より豊かなコミュニケーションを支援します。
emoCloudは、これらの課題に対し、物理空間で感情を「見える化」することで応えます。
- 感情の可視化: 周囲の人々の感情を視覚的に表示し、一目で場の雰囲気を感じ取ることができます。
- 感情の共有: 自分の現在の気持ちをシンプルに共有し、他のユーザーに伝えることができます。
- 色による感情表現: 感情を直感的に色で表現することで、言葉では伝えにくいニュアンスも表現可能です。
- 盛り上がっている場所の特定: 集計された感情データに基づいて、活気のある場所や盛り上がっている場所を簡単に特定できます。イベント会場や商業施設などでの利用を想定しています。
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Next.js / Tailwind CSS |
| バックエンド / クラウドインフラ | Next.js / Google Map API / AWS API Gateway / AWS DynamoDB / AWS Lambda / AWS EventBridge / AWS S3 |
| 開発環境構築 | Docker |
| インフラ / CI/CD | Vercel |
| その他 | Biome（リンター） |
emocloud(repository)
├── public/ # 静的ファイル (画像、フォントなど)
│ ├── favicon.ico
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
├── src/ # ソースコード
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.tsx # ルートレイアウト
│ │ └── page.tsx # ホームページコンポーネント
│ ├── components/ # UIコンポーネント
│ │ ├── emotion-input.tsx
│ │ ├── google-map.tsx
│ │ └── message-box.tsx
│ ├── img/ # プロジェクトで使用する画像
│ │ ├── demo.gif
│ │ └── logo.png
│ ├── types/ # TypeScriptの型定義
│ │ └── emotion.ts
│ └── utils/ # ユーティリティ関数
│ ├── api.ts # AWSからの情報取得/追加
│ └── color.ts
├── .gitignore
├── biome.json
├── eslint.config.mjs
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── README.md # このREADMEファイル
└── tsconfig.json
このプロジェクトをローカルで実行するには、Node.jsが動作する環境が必要です。
emoCloudをローカル環境でセットアップし、実行するための手順です。
-
リポジトリをクローンする:
git clone https://github.com/JAIST-Hackathon/emocloud
-
プロジェクトディレクトリに移動する:
cd emocloud -
依存関係をインストールする:
npm clean-install
アプリケーションをローカルで起動し、emoCloudを使用する手順です。
-
開発サーバーを起動する: プロジェクトディレクトリ内で以下のコマンドを実行します。
npm run dev
これにより、Next.js開発サーバーが起動します。
-
ウェブブラウザでアクセスする: お好みのウェブブラウザを開き、
http://localhost:3000にアクセスします。 -
emoCloudを使用する: 表示されたページで、まずはご自身の感情を共有してみてください。周囲の感情の可視化機能もお試しいただけます。
開発中に頻繁に使用するコマンドの一覧です。
| コマンド | 説明 |
|---|---|
npm install |
プロジェクトの依存関係をインストールします。 |
npm run dev |
開発サーバーを起動し、Hot Reloadingを提供します。 |
このプロジェクトは、以下のチーム山頂メンバーによって開発されました（順不同）。
本プロジェクトは「技育CAMP2025 ハッカソン Vol.5」にて開発されました。
ハッカソンの開催・運営にご尽力いただいた株式会社サポーターズ様、 並びに、本ハッカソンを多大にご支援くださり、貴重なフィードバックをくださったスポンサー企業の皆様に心より感謝申し上げます。
主要スポンサー企業 (順不同):
- 株式会社サイバーエージェント
- 株式会社ゆめみ
- 株式会社ディー・エヌ・エー (DeNA)
- 株式会社CARTA HOLDINGS
- ウイングアーク１ｓｔ株式会社
- 株式会社Finatextホールディングス
- 株式会社ログラス
- フューチャー株式会社（フューチャーアーキテクト株式会社）
- 株式会社Works Human Intelligence
その他、本ハッカソンにご協力いただいた全てのスポンサー企業様、および関係者の皆様に深く感謝いたします。