📱

【Flutter】リアルタイムに情報を共有できるアプリをリリースしたことについて語る

2022/06/27に公開5件

Android

リアルタイムに情報を共有できるアプリをリリースしたことについて語る

個人開発ではありますが、家族や友人、恋人などで情報をリアルタイムに共有できるアプリ「Share Life」をリリースしました。
この記事では良かった点や苦労した点などをまとめていこうと思います。
皆さんのいいねがこれからの機能追加のモチベーションにもなりますので、いいねお願いします！！！！！！

インストールは以下からできますので、興味がある方は是非使って欲しいです！！！！！！

iOS:

Android:

Share Lifeとはどんなアプリかというと、
家族や友人、恋人間などで以下の情報をリアルタイムに共有できるモバイルアプリである。

当番項目
スケジュール
個人のタスク
掲示板

アプリを開いていれば同じルームに属する人が何か追加、編集、削除を行ったら即座に反映されます。
以下のスクリーンショットを見てもらえればイメージがつきやすいかなと思います。

アプリの目的

家族や友人、恋人間で情報を共有することでスマートフォンを通じてコミュニケーションが取れる。
離れていてもリアルタイムに依頼したいことなどを共有できる。
当番制となっているものがあれば、実施したかどうかを確認できる。
予定をカレンダー形式で確認することができる。

アプリの画面一覧

サインイン画面	サインアップ画面	メール認証画面
アプリにサインインします。	アカウントを新規作成します。	メール認証によりセキュリティを高めています。

初期登録画面	アプリ初期画面
メール認証後にユーザ情報を初期登録します。	初期登録後のホーム画面です。 (ルームに属していない場合)

ルーム作成画面	ルーム入室画面
ルームを作成します。	ルームに入室します。

ホーム画面	ユーザ招待画面
ルームに属した場合のホーム画面です。ルームに属するユーザが表示されます。	招待したいユーザにルームIDを通知します。

当番項目参照画面	当番項目追加画面	当番項目編集/削除
当番項目の一覧を表示します。	当番項目を追加します。	当番項目を編集/削除します。

スケジュール参照画面	スケジュール追加画面	スケジュール編集/削除
スケジュールの一覧を表示します。	スケジュールを追加します。	スケジュールを編集/削除します。

タスク一覧参照画面(未完了)	タスク一覧参照画面(完了)	タスク一覧参照画面(全て)
未完了のタスクの一覧を表示します。	完了のタスクの一覧を表示します。	全てのタスクの一覧を表示します。

タスク追加画面	タスクの完了状態切り替え/削除	タスクの削除
タスクを追加します。	タスクの完了状態を切り替えます。	タスクを削除します。

掲示板投稿画面	掲示板のリアクションユーザ一覧
投稿された掲示板が表示されます

設定画面	メニュー画面
ユーザ設定を更新します。	メニューの一覧を表示します。

使用した技術

このアプリを開発するにあたって使用した技術は大まかですが以下の通りです。

Flutter
- クラスプラットフォームのため開発効率がすごい良かったです。
Dart
- 少し癖があって書きにくいなと思ってましたが慣れました。
アーキテクチャ
- アーキテクチャとして慣れているMVVMを使用した。
- そのディレクトリ構成は恋されるに記事をまとめているので興味がある方はご参照ください！！
状態管理
- 状態管理としてRiverpod×freezedを使用した。ただただ使いやすかった印象。
Firebase
- ユーザ情報の管理
  - こんな簡単にユーザ情報の管理をやってくれたので便利すぎました。
- 各登録データの管理
  - データの保存もやってくれるし、何よりリアルタイムに情報を追加、更新、削除すればアプリに通知してくる機能があり。優秀すぎました。
Admob
- アプリの広告サービス。特に感想はない。普通。
  *　ReveneCat
  *　アプリ内課金(サブスクリプション)として導入しました。
  *　本来ならレシートの管理などサーバーを立ててめんどくさいことをしないといけないですが、それを代わりにやってくれました。

良かった点

以下に良かった点を記載します。

Flutterのライブラリが優秀すぎる

Flutterには便利すぎるライブラリがありすぎます。本当に助かっています。
後ほど使用したライブラリとどういうものに使用したかをまとめます。

デザイン

今回画面デザインをのっぺりした感じではなくおしゃれな立体デザインとして「ニューモフィズム」を選定しました。ニューモフィズムを提供するFlutterのライブラリがあったのでそれを使用しました。導入も使用感もとても簡易的で開発された方々に頭が上がりません。

ユーザの管理

Firebase1つでユーザの管理ができるのでFirebaseは重宝しました。
サインアップからサインイン、メール認証までやってくれるので開発コストが十分に下がりました。
セキュリティもおそらくは問題ないと思っています。

リアルタイム更新の実現

こちらもまたまたFirebaseですが、登録データの管理もそうですが、ユーザが登録、更新、削除したものを即座にアプリに通知してくれます。Flutterの機能でもありますがStreamというものを使用してリアルタイム更新が簡単に実現できました。

苦労した点

以下に苦労した点を記載します。

一人で開発

たま〜〜〜に知り合いに意見をもらいながらですが、以下の全ての一人でやったので大変だったということが一番です。仕事の終わった数時間と土日を駆使してリリースまで持っていきました。

用件定義
設計
デザイン作成
実装
テスト(UT)
テスト(実機)
リリース

レビューしてくる人がいない

上に通ずる話でもありますが、個人的に一人で開発していたので、レビューができていないということ。
趣味の開発だったのでレビューは諦めました。少しでも品質を担保するようにUTを書くことにしました。

アプリ内課金(サブスク)

サブスクを簡単に導入してれるサービスであるRevenueCatを使用したのですが、公式ドキュメントが正直ゴミでした。ドキュメントの手順が古かったりして、今のストアのUIとは異なっていたりしました。また、RevenueCatに関する記事も少なかったりで中々大変でした。
ということで、RevenueCatの最新版ということで、自分が本を書きましたので、読んでみてください。
これを見ればあっという間にサブスク導入ができます！

アプリを広める手段がない

アプリをリリースしたのはいいですが、どのようにしてリリースしたアプリを広めていくか、つまりマーケティングしていくかです。
自分のあらゆるSNSを通して告知しましたが、やはりインフルエンサーじゃない限りは中々認知されないようです。
この辺の知識がある方がいれば教えていただきたいです。

強敵

似ている強敵な他アプリとしてTimeTreeがいます。
さすがに勝てない(笑)

使用したライブラリ

No	使用したライブラリ	用途
1	animated_text_kit	表示する文字のアニメーションに使用した。
2	cloud_firestore	登録情報の格納に使用した。
3	firebase_auth	ユーザ情報、認証の管理に使用した。
4	firebase_core	Firebaseを使用するのに必要なもの。
5	flutter_email_sender	ユーザ招待やお問い合わせなどにメールアプリを使用した。
6	flutter_datetime_picker	日付や時間のスピナーとして使用した。
7	flutter_dotenv	Git管理したくないAPIキーなどを保存したenvファイルの読み込みに使用した。
8	flutter_native_splash	スプラッシュ画面の作成に使用した。
9	flutter_neumorphic	アプリのデザインにニュームフィズムを使用した。
10	flutter_riverpod	状態管理としてRiverpodを選定した。
11	flutter_screenutil	レスポンシブなデザインに対応するために使用した。
12	flutter_slidable	スライドによるUI操作を可能にするために使用した。
13	freezed_annotation	イミュータブルなクラスを自動的に生成するために使用した。
14	google_mobile_ads	広告サービスとして使用した。
15	json_serializable	JSONのシリアライズを簡易的にするために使用した。
16	like_button	いいねボタンのリアクション機能に使用した。
17	logger	デバッグログを導入するために使用した。
18	modal_bottom_sheet	いい感じのボトムシートを導入するために使用した。
19	purchases_flutter	アプリ内課金を使用するために使用した。
20	shared_preferences	簡単な設定情報の保存に使用した。
21	table_calendar	カレンダーの表示に使用した。
22	uuid	登録情報を一意に特定すれために使用した。
23	webview_flutter	Webページの表示のために使用した。
24	build_runner	イミュータブルなクラスを自動的に生成するために使用した。
25	fake_cloud_firestore	firebaseのDBまわりのUTをモックを使って書くために使用した。
26	firebase_auth_mocks	firebaseのユーザ認証まわりのUTをモックを使って書くために使用した。
27	flutter_launcher_icons	アプリアイコンの自動生成のために使用した。
28	freezed	イミュータブルなクラスを自動的に生成するために使用した。

最後に

Flutterを始めてかれこれ、半年くらいですがかなり実力がついたかなって感じです。
もっとアプリをリリースしていきたいところではありますが、今はShare Lifeを安定させていきたいと考えております。
繰り返しにはなりますが、ぜひ使ってみてください。
そしてフィードバックをいただけたら嬉しいです。
ありがとうございました。

iOS:

Android: