ハッカソンで「MUSO」を作りました[チーム開発]

概要

こちらの「MUSO」はハッカソンVol.15で開発したアプリになります。
発表時には時間がなくなかなか説明できなかったところもあるのでこちらでまとめていきたいと思います。

使用技術

• Frontend
  • Dart
  • Flutter
  • MVVM
  • GetX
• Backend
  • Python
  • Django
  • supabase
  • Docker
  • PostgreSQL

技術選定

参加メンバーの技術スタックが私以外の方がWebのフロントエンドとバックエンドがあり、私はモバイルの技術しかなかったのでモバイルという特徴を活かせるアプリを作ろうということで上記の技術スタックになりました。

他二人はPythonでのバックエンド経験があるということで順調だったのですが、私自身は個人開発でのFlutterは初めてだったこともあり、なかなか時間がかかりましたが無事に完成まで漕ぎ着けました。

アプリの基本説明

こちらのアプリはAIを使った夢日記アプリになります。
主機能としましては、ユーザーの夢の断片的な夢の情報をAIがそれを元に物語と画像を生成しより夢の情報が鮮明になるように手助けをします。

他の機能としては以下の通りになります。

• AIによる夢の物語生成と画像生成（主機能）
• 夢のタイプ分け
• カレンダーに日記を書いた日の可視化
• 認証機能(supabase)
• xなどのSNSでの共有化
• リマインダー機能(new)
• 広告の実装(new)
• サブスクの実装(new)

AIによる夢の物語生成と画像生成（主機能）

AIによる物語生成の記述画面	AIによる物語生成後の画面

「AIによる物語の記述画面」では夢の物語を作る上でのタイトルと内容の箇条書きで書きます。
そのほかにも夢のタイプや睡眠時間、睡眠の質を書いておくことで夢日記のような用途で使えるようにします。
記述画面での特徴では断片的な夢の内容でも日記にすることにより、軽い気持ちで日記が継続できるようにしております。

「AIによる物語生成後の画面」では「AIによる物語の記述画面」で綴ったタイトルと夢の内容をもとに画像生成と物語を文章で作成してくれます。
また、その日がどのような体調で、その夢がどのような夢のタイプかを鮮明に思い出せるようにもしています。

夢のタイプ分け

AIによる物語生成の記述画面	ホーム画面

上記でも説明した「AIによる物語生成の記述画面」で書いた夢のタイプ、睡眠時間、睡眠の質をホーム画面でも確認できるようしています。
また、夢のタイプによって顔の表情を変えることによりその日の夢の内容を一目でわかることができてユーザビリティの向上につながります。

また、今後は直近で見ている夢のタイプや睡眠時間をグラフや表で見れるようにして夢日記からでも自身の心身の体調を可視化できるようにしたいです

カレンダーに日記を書いた日の可視化

カレンダー画面

こちらの画面ではその日にどのような夢のタイプだったかを一目で見ることができます。

こちらを導入しようとしたきっかけはGithubなどで「草を生やす」ことによりモチベーションの向上やGitHubを継続して要因になったので、それに似せて導入してみました。

そのため、Github同様にこの機能によりユーザーの継続的な利用とモチベーションの向上が図れると思います。

認証機能(supabase)

起動画面

こちらはアプリの導入画面ということもあり、UIには特にこだわりました。
また、ユーザーに与える情報量をできるだけ減らしたかったので、色味や動作には特にこだわりました。

アサイン画面①	アサイン画面②

こちらの画面は先ほどのメイン画面の「新規のアカウント作成をする」のボタンを押した時の画面になります。
こちらも手軽さやUIを意識することによって、新規のユーザーが離れないように工夫しました。

ログイン画面

こちらも「アサイン画面」同様に手軽さやUIを意識することによって、新規のユーザーが離れないように工夫しました。

xなどのSNSでの共有化

共有画面

X,InstaglamなどのSNSで共有できるようにすることでユーザーの継続的な使用を促すとともに、アプリの認知もして貰えるということで導入してみました。

リマインダー機能(new)

設定画面	リマインダー設定画面

＊現在製作中です
導入しようとした目的としてはリマインダーをつけることによりこのアプリで夢日記をつけること自体をルーティン化することにより継続的な利用を促せるのではと思い、実装しようと思いました。

広告の実装(new)

＊現在製作中です
導入しようとした目的は画像生成や物語生成で約５円かかることから物語作成中の画面で広告を実装してマネタイズしようと思いました。

また、下記にある「サブスクの実装」により、この広告を消すようにしようとも思います。

サブスクの実装(new)

＊現在製作中です
こちらの機能では主に作成中に挟む広告の削除や画像や物語生成にかかる回数制限を取っ払おうと思います。

工夫点

• 寝起きの断片的の夢の内容でもしっかりした夢日記をつけれるようにすることにより、差別化を図るとともに斬新さをアピールしました。

• モバイルアプリではUI,UXの綺麗さや使いやすさが大事なのでここは特に注力しました。特に「導入画面」ではユーザーが一番離れると想定される画面ですので、こちらにはスペースをなるべく空けたり、必要な情報量だけをユーザーに与えるなどして意識しました。

• 継続的に使用することを促す機能をいくつか実装することによりハッカソンで終わらすのではなく、ちゃんと継続開発する意思を見せることができた。

*　即席チームながらも毎日連絡を取り合い、アプリを作る上での機能や意図を共通化することによりチーム参加が作成したアプリとも引けを取らなかった。
*　デモUIを作成することでバックエンドチームともイメージの共通化をすることで短い時間でも完成することができた。（作成したデモUI↓）

反省点・詰まった点

• 認証機能に時間を取られてしまい、他の機能にあまり時間をかけられなかった。
• 実際に評価される大部分は発表のため、資料作成や発表練習にもっと時間をかければ少しは評価が変わったかもしれない。
• そもそもモバイルアプリ自体の強み（カメラや音声認識、bluetooth）などを活かしきれていなく、それってWebでもおんなじことできないかと疑問に思う部分が節々あった。

今後の展望

• 未完に終わっている部分を作成してアプリとして完成させる
• AppStore、googlePlayStoreに出す
• ユーザーの動向を調査し、それに従って改良を重ねる
• 夢日記カテゴリでtop3を目指す

まとめ

即席でのハッカソンは初めてのことで色々新しかったのですが、一番印象的だったのは「とにかく楽しかった」ことです。

この一週間は寝る間も惜しんで開発をしていてとても心の底から開発が楽しいと思える時間でした。（流石にハッカソン終了してからどっと疲れが来ましたが笑）

しかもフロントで頑張ったところなどは他のチームメンバーにも喜んでもらえて、これからのモチベーションの向上にもつながり、このハッカソンに参加して良かったなと思いました。

是非、みんなで作ったアプリを褒めてもらいたいなど思った学生の方はハッカソンに挑戦してみてください！！