【Flutter】語学学習ができる日記アプリを作った【個人開発】
要約
- 「Vanilla.」は実用的な英語学習を目指す日記形式の語学学習アプリで、ユーザーの日記を母国語から学習言語へ翻訳し、AIが読み上げる機能を備えています。
- アプリは個人的なニーズに応えるために開発され、"Words Today, Wisdom Tomorrow"をコンセプトに、シンプルかつ効率的な日記作成を可能にしています。
- 機能には自動翻訳、発音の自動読み上げ、お気に入りフレーズの登録と管理、30カ国以上の言語サポートがあり、全機能は無料でログイン不要です。
- 技術スタックにはFlutter、sqflite、slang_flutter、just_audio、ChatGPT、GCP text to speechが使われ、デザインのシンプルさと多言語化に重点を置いています。
- 開発者はログイン不要のローカルファーストアプローチを採用し、今後はアプリの効果を検証するためにTOEICスコアの向上とダウンロード数の推移をX(旧Twitter)で報告する予定です。
作ったもの
語学学習アプリの「Vanilla.」です。
「日本語で日記を書く→英語で書く→AIのお手本」を見るといった一連の流れを毎日行うことで英語学習を実践的に身につけることを目標にしています。
作った理由
- 前回以下で紹介した語学学習アプリを作ったのですが、うまくいかずpivotし、反省を活かして再トライ。
- あと、そもそも自分が欲しかったので作りました。
プロダクトコンセプト
"Words Today, Wisdom Tomorrow（今日の言葉、明日の叡智）" です。
毎日気軽に小さなアウトプットを積み重ねることが苦にならないように、シンプルに効率的に日記を書くことができるサービスづくりを意識しました。
プロダクトの機能
現在、以下の機能を提供しています。
◯ 母国語訳→学習言語訳→AI翻訳の流れで日記を日々記録可能！
◯ 学習言語で書いた日記をAIがネイティブな発音で読み上げ！
◯ お気に入りのフレーズをユーザーやAIが考えたオリジナル例文と共に登録！
◯ 30カ国以上の言語学習に対応！
◯ ログイン不要、全機能無料！
日記管理機能
母国語訳→学習言語訳→AI翻訳の流れで日記を登録できるようにしました！
母国語訳は任意登録にしてあるので、いきなり学習言語で書いてからAIのお手本を参考することも可能です！
ちなみに登録された日記に対しAIが三つの質問を投げてくれます。
より実践的なやり取りを練習したい場合こちらの機能を使ってみてください。
自動読み上げ機能
全ての学習言語の近くに自動読み上げボタンを配置しています。
発音練習をしたい時に利用します。
単語/フレーズ登録機能
わからなかった単語やフレーズを選択してフレーズ管理をすることが可能です。
登録されたフレーズはAIが自動で翻訳し、オリジナルの例文を生成していつでもみれるように管理できます。また、登録された内容はユーザーで更新することが可能です。AIが生成した例文が気に入らなかった場合はご自身で編集して登録できます。
技術スタック
- Flutter
- sqflite(ローカルDBで使用)
- slang_flutter(多言語対応で使用)
- just_audio(読み上げ機能で使用)
- ChatGPT(翻訳、例文生成で使用)
- GCP text to speech(読み上げ機能で使用)
開発で意識したこと
ここからはどのようなことを意識して開発に臨んだのか紹介していきたいと思います。
Noログイン!ローカルファースト!
いつもであれば何も考えずログイン機能を作っていたと思います。
今回のプロダクトではできるだけユーザーにネットワーク通信による待ち時間を発生させたくありませんでした。とにかくユーザーにはサクサクと日記を書いて欲しかったのです。
毎回面倒なログインや日記を読み込むためのローディングは発生させたくありませんでした。また、少なくとも現段階のMVPとして、複数端末の日記データの同期は不要でした。
そのため初期フェーズでは思い切ってユーザー管理を一切せず、まずはユーザーのUX体験を確固たるものにして将来的にFirebaseなどを活用したデータ管理をしていく方針としました。
そのため今回の開発ではsqfliteを使用して、SQLiteでデータをローカルで管理しています。
シンプルなデザイン!
ユーザーには日記を書くことに集中して欲しかったのでとにかくデザインをシンプルにし、直感的に利用いただく必要がありました。
そのため、わからなかった単語やフレーズを登録する機能では、登録ボタン押下がユーザーが面倒に感じるような翻訳や例文の作成などは全てChatGPTに任せ、その結果を登録するようなUXに設計しました。
多言語化!
これが今回一番大変な作業でした。このアプリは30カ国以上の言語に対応しています。
多言語化にはslang_flutterを使用しています。
30カ国分のjsonファイルを作る必要があったのでここでもChatGPTを使用して、自動で言語ファイルを生成し使用しました。
正直Flutterアプリ上の対応はこのぐらいで問題なかったのですが、さらに大変だったのがApple Storeのローカライズ対応でした。
本当は同じように30カ国分のスクショ画像を用意して対応したかったのですが、ものすごい工数がかかることが用意に想定できたので日本語と英語のローカライズ対応のみ今回は対応しました。
機能が十分に充足して、PMFの段階であればしっかりと各国のローカライズを行うような対応が望ましいかもしれません。（序盤のフェーズでやると、機能変更などでUIが変わる可能性があるためおすすめしません）
今後の対応
今後は以下のX(旧Twitter)のアカウントを使ってマーケティング活動に注力していきたいと思い、以下の内容について発信していく予定です！
このアプリを使うとTOEICがどのくらい伸びるのか検証する
やはり実績は重要です。まずはとにかく自身で利用してどのくらい結果が出せるのか検証していきたいと思います。
このアプリのDL数がどのような推移していくか検証する
アプリのダウンロード数の推移を継続的に公開していこうと思います。
やはりアプリの利用者が増えていることが他の言語学習者に伝わると、利用のきっかけになったりするので。
ぜひ今後とも「Vanilla.」をよろしくお願いします！
Discussion