はじめに
皆さま、こんにちは、メロたん（@sora_mero2525） と申します。
2024 年 5月 20 日より、オンラインプログラミングスクール RUNTEQ にて、学習を始めました。
2025年2 月 20 日にリリースしたアプリ「タスクエールでがんばるもん！」の紹介と開発の振り返りをまとめました！
サービス URL
GitHub
こんな可愛い子がこう言ってるなら使うしかねぇ！ https://t.co/KdB0bgslrB pic.twitter.com/fdLIiirmco
— メロたん#そら@RUNTEQ57b (@sora_mero2525) February 20, 2025
目次
作成経緯
アプリ案
私たちがこのサービスを作ろうと思ったのは、普段の生活で「褒められる」経験がなく、自分なりに頑張っても誰にも評価されない孤独な気持ちになってしまうことが多いからです。周りにその存在を認めてもらえず、ふと寂しさを感じる男性たちにも、タスクをこなすたびにちょっとした喜びや自信を持ってほしいと考えました。そんな思いから、美少女キャラクターがそっと寄り添い、励ましの言葉や温かい反応で支えてくれるサービスを企画しました！
アプリの紹介
Web アプリ「タスクエールでがんばるもん！」はオリジナル美少女キャラクター「蓮実メロ」がLIVE２Dで動きタスクをこなしたら褒めてくれたりチャットやSNSでコミュニケーションを取ることができるアプリです！
ユーザーはタスクを作成し、完了するとそのタスクについて蓮実メロが労いの言葉などメッセージが届きます。チャット機能も備えておりユーザーは蓮実メロのメッセージやチャットをかわいい音声で楽しむことができます。
タスク管理画面
チャット、日記画面
使用技術
| カテゴリ | 技術 |
|---|---|
| フロントエンド | Next.js 14.2.5 |
| バックエンド | RailsAPI 7.1.4.2 |
| データベース | MySQL |
| インフラ | Heroku , vercel |
フロントエンド
-
Auth.js
ユーザー認証ライブラリ -
FullCalendar
カレンダー表示＆タスク管理コンポーネント -
PWA（Progressive Web App）
オフライン対応＆ホーム画面追加
バックエンド
-
devise_token_auth
トークンベースのユーザー認証 -
Mailgun
メール送信サービス -
LINE Message API
LINE通知システム -
AWS S3
クラウドストレージ -
ransack
ソート機能
キャラクター & 音声処理
-
Live2D SDK
キャラクターアニメーションエンジン -
にじボイスAPI / VOICEVOX
音声合成技術 -
OpenAI API
自然言語処理技術
タスク管理やキャラクターとの対話生成を行い、自然なコミュニケーションを提供。
こだわったポイント
オリジナルキャラクターの作成
アプリオリジナルキャラクターの蓮実メロです。かわいいキャラクターが褒めてくれたり、リアクションを返してくれることで楽しむアプリなのでデザインは万人受けを狙いつつ自身の好みも反映させた形になります。キャラデザインはnizimaというサービスで、オーダーメイド作成を依頼しました。
開発の流れ
開発期間
総開発期間： 2024年10 月 27 日〜2024年2 月 1 日 (約三か月)
Live2DSDKの技術検証(1か月)
私自身railsとnext.jsのキャッチアップをしたばかりでノウハウもなくLive2Dについての記事が本当に少なかったため非常に時間がかかりました。検証当初はReactで比較的簡単にLive2Dキャラクターを表示できるpixi-live2d-displayというライブラリで検証を行いましたが口の動きを音声に合わせる技術のリップシンクが非対応とのことで公式のLive2DSDKを使って実装しました。
キャラクターの音声生成
OpenAIAPIから生成したテキストをもとにキャラクターのボイスを作成するのですが実装当初はVoiceVoxを使用して音声生成を行っていました。これでも十分かわいく映っていましたが2024年12月11日からにじボイスAPIが公開され、にじボイスを使った音声のほうがキャラクターのイメージ通りの音声が生成されることから急遽変更しました。
最低限の機能作成(12/7までで)
スクールの卒業認定をいただくために以下の機能を実装しました。
ユーザー関係
- メールアドレスからのログイン機能
タスク
- 作成機能：タスクの新規登録
- 編集機能：登録したタスクを編集
- 削除機能：登録したタスクを削除
- タスク完了時にメッセージ生成：労いメッセージ
チャット
- チャットでのやり取り機能
- キャラクターのレスポンスを音声で聞ける機能
- すべてのチャット履歴を表示
- チャット履歴削除
パスワードリセット、お問い合わせ機能(メール送信)
Mailgunを使用しパスワードリセットとお問い合わせにメール送信機能を実装しました。
Mailgunがコスト的に高くつくため今後変更したい部分ではあります。
認証関連(12月末)
Auth.jsとdevise_token_authを連携し、フロントで取得したユーザー情報をバックエンドに保存する形式でgoogle認証を実装しました。
Line通知
- LINE Message APIを使用した通知を実装するべくAuth.jsでのLineログインを実装し、取得したlineId宛てに通知を送信する処理を実装しました。
- タスクの期限を設定して通知を送信します。herokuのHeroku Schedulerを使用して定期実行からリマインダー時間を監視して過ぎていれば通知を送信という処理にしているが設定した時間から数分のラグが発生するのが難点。
カレンダー機能
- FullCalendarをしようしてカレンダーからタスク管理をできる機能の実装しました。
日記機能
タスク管理とチャットではコンテンツ不足に感じたため日記機能を作成しました。
- 日記の投稿
- 日記の削除
- 日記の公開、非公開機能
- S3を利用した画像投稿機能
独自ドメインの登録
フロントをvercelでデプロイしているため、vercel.appドメインになってしまうので独自ドメインを設定しました。
- お名前ドットコムでドメインの取得
PWA
日常的にアプリを開くハードルを下げるため、PWAインストールの実装をしました。
スタイルやその他微調整
- スマホからの使用を前提としてスタイルを調整しました。
- チャットなどの音声再生がIOSの自動再生制限に引っかかってしまい。チャット送信時に自動読み上げする仕様を返事をタップすることで再生する仕様に変更しました。
- PWAでのLINEログインでの挙動でLINEアプリに遷移してからこのアプリに戻ってログインが完了する挙動を取った際に遷移によって取得したユーザー情報が消失しログインに失敗する事象をブラウザからログインを強制することで対象しました。
改善点
X共有や動的OGP
日記機能で投稿した内容をXにてスクショで投稿してくださる方がいました。X共有と動的OGPを実装しユーザー体験をより良いものにできたのではと思いました。
タスク管理機能の多機能化
フロントに比べてバックエンドが簡易的なものになっているため、タスクの中にタスクを作れるようにするなどの多機能化、検索やページネーションなども時間があれば実装したかった機能です。
着せ替え機能の実装
当初はタスク管理やコミュニケーションをこなすことによって、ガチャからアクセサリーや衣装を入手。着せ替えを楽しみ共有できるような機能を実装したかったのですが予算が大幅に超過するため見送ることにしました。
開発を振り返って
卒業制作として作成しましたが、スクール内外で非常に好意的に受け止められ、とても嬉しく思っています。
また、初めて触れる技術も多く、実装を通じて多くの学びを得ることができました。
特に Rails API と Next.js の連携、Live2D の導入、AI音声との統合 など、新しい技術への挑戦が自分のスキルアップにつながったと実感しています。
終わりに
今回の開発では、自分が本当に作りたいものに妥協せず取り組むことの大切さ を実感しました。
時間とリソースをかけた分、多くの学びがあり、非常に貴重な経験になりました。
最後までお読みいただき、ありがとうございました！
もし興味を持っていただけたら、X（Twitter）でフォローしていただけると嬉しいです！