はじめに
皆様、始めましてRUNTEQで学習をしています、yuji(@yuji2534)と申します。
私は2024年 6月よりオンラインプログラミングスクール「RUNTEQ」に入学、
2025年 5月に卒業制作「ColorMirror」をリリースしました。
この記事では本アプリの紹介と振り返りを行いたいと思います。
※筆者、プログラミングに関して初学者であるため、間違いや、拙い表現、コード等あると思いますが、温かい目で見守っていただけると幸いです。
サービスURL
GitHub
目次
1. 開発経緯
2. アプリの紹介
3. こだわりポイント
4. 開発の流れ
5. 反省と改善点
6. 今後の実装
7. 総評
開発経緯
私自身が季節の変わり目や天気・気圧の変化に敏感に反応してしまうことをきっかけに、
周囲に同じような人がおらず、反対にSNS等のインターネット上には少なからず、同じ思いをされている人がいること。
また、実際の経験談として、頭痛や気分の落ち込みが引き起こされることを周囲の人には中々共感されず、大袈裟にしていると思われてしまうことが多々あります。
以上の理由をアプリを作ることで解決には至らないまでも、その気分の落ち込みや不調を吐き出し、共感する場を作ることで自分自身の気質と向き合うプラットフォームがあれば嬉しい、そんな思いから開発にいたりました。
アプリの紹介
webアプリ「ColorMirror」は、自分の今の気分を色で表現し、AIによる分析を受けて可視化できます。
AIにコメントをもらうことにより、自身の気分や状況が外部根拠に基づいたものであることを認識することを目的とします。
流行とは逆にSNSシェアとは距離を置き、自分自身にベクトルを向けた設計を目指しました。
こだわりポイント
〜データの登録の一連の流れ〜
アプリの紹介の設計に沿って、１ユーザーにとって感情を可視化し自己認知を得ることがコアとなっています。
1ユーザー : AI(アプリ)のような関係を感じられるUXを目指しました。
JavascriptやRails(turbo,stimulus)によって可能な限りユーザーのアクションを巻きとり、APIによる外部情報が自然にアプリの中で動いているようにしました。
天気APIによる自動取得でオリジナルの天気カードの作成
ユーザーの気分→オノマトペのカードで変換
天気（外部情報)✖️気分（オノマトペ）でAIに色を生成させる→自分にマッチした色を登録!!
登録したデータの一覧
AIからのコメント（非同期で生成）
使用技術
🛠 技術スタック
| 分類 | 使用技術 | 補足・バージョンなど |
|---|---|---|
| フロントエンド | HTML / CSS / JavaScript | 基本的な構成 |
| フレームワーク | Ruby on Rails | バージョン: 8.0.1x |
| バックエンド | Ruby | バージョン: 3.2.3 x |
| データベース | PostgreSQL | 開発・本番環境で使用 |
| 認証 | Devise | ログイン機能 |
| デプロイ | Render | GitHub連携で自動デプロイ可能 |
| バージョン管理 | Git / GitHub | ブランチ運用／Pull Requestベースの開発 |
| テスト | RSpec | モデル・コントローラの単体テスト |
| スタイリング | Tailwind CSS | CSSフレームワーク |
| 非同期処理 | ActiveJob or SolidQueue | Rails8標準 |
| API | OpenWeatherMap API | 天気データ取得に使用 |
| API | OpenAI API | 色の生成 or 分析コメントの生成 |
| API | LINE Messeging API | リマインダー機能に使用 |
開発の流れ
開発期間 2024年12月~2025年5月 （約5ヶ月間）
- 5ヶ月間の内訳
- Javascript or Hotwireのキャッチアップ(1ヶ月)
- MVP開発〜リリース（2ヶ月）
- 本リリース開発(2ヶ月)
MVP機能を作成
- 色選択による気分の記録
- 選択した色の登録
- AIによるポジティブコメントのレスポンス
- 気象情報の表示→AIによるセルフカラーの提案
- deviseによるユーザー認証機能（ログイン/ログアウト）
本リリース機能を作成
- Google認証機能
- ヒートマップ機能
- chart.jsによるグラフ表示機能
- LINE通知によるリマインド機能
- 非同期処理でActiveJobをSolidQueueで実行
- deviceによるパスワードリセット機能
- 独自ドメインの追加
- プライバシーポリシー/お問い合わせ/利用規約の表示
- 静的OGP機能
- PWAインストールの実装
反省点
- SNSシェアができるコンテンツを考案できなかった
- インタラクティブさを出したつもりが、コンテンツ自体の満足感も少なくなってしまった
- 開発途中でアプリデザインに凝ってしまい、迷走してしまった
- ITとは無縁の職種で働いているため、時間的な制約でユーザーのエンド体験まで作り込むことができなかった
今後の実装
今回卒業制作という形で始めてサービスを考えて開発を行った。
天気APIとopenAI APIをRailsで繋ぎ、１つのサービスとして形にはできたと思う、バッチ処理も行える環境を構築できた。
拡張機能
- LINEとAIを用いた、ユーザーの環境(天気)や登録してきた気分やAIコメントデータ（セルフカラー）を使った傾向分析を配信できるようなコンテンツを実装してみたい
- ムードボードなるものが世に存在しているため、ユーザーが登録したデータを元に画像を生成し、その画像のみSNSシェアできるようにしたい
総評
ここまで読んでいたただき本当にありがとうございます。
この「ColorMirror」はサービスとしては物足りない印象を自分自身は持っています。
ただ、GitHubフローに沿った開発において、やはりissueの期限をきちんと守りながら納期を意識できつつクオリティを担保させる技術はエンジニアにとって必須のスキルです。
今回、そこに対してコミットした時の自分ができる最大限の成果物であると今は受け止めるつもりです。
また、今後もコンテンツの更新を続け、納得のいくサービスとして成り立つように育てていくつもりです。
ぜひ、ご興味がありましたら、URLにてアプリページまで飛びさわっていただけると幸いです。