snovaのブログ

主にプログラミングやデジタルコンテンツについて書きます。最近はPython, Flutter, VRに興味があります。

Flutterで採点カウンターアプリを製作し、Google Playでリリースした話

Flutter

はじめに

資格試験の勉強をしているときに、毎回毎回、点数計算が面倒だなと感じたので、採点した結果をカウントできるアプリがあればいいなと思い、採点カウンターアプリをFlutterで製作し、配信しました。

アプリの配信先

Get it on Google Play

アプリ情報をまとめたページ

snova301.github.io

アプリのスクショ

目次

仕様

きっかけは自分の資格試験ですが、調査してみると、学校の先生にも(少ないですが)需要があったので、学校でも使うことができるような仕様にしました。

以下、簡単な開発仕様をまとめます。

項目 内容
ターゲット 資格試験の勉強用、学校の先生の採点
主な機能 テスト登録(5件まで)、配点登録(100件まで)、生徒メンバー登録(50人まで)
アプリ配信先 Android, web
外部連携 なし
オンライン機能 なし(すべてオフラインで利用可能)

App Storeでも配信しようかと思いましたが、Apple Developer Programの維持費が高くて登録していないため、需要が出てきて収入が出来たら検討します。

便利だと感じた点と苦労した点

いまだ慣れないFlutter開発で便利だと思った点と苦労した点を書きます。

便利だと感じた点

  • Riverpodでの状態管理
  • shared_preferenceでのローカル保存
  • Material 3に対応したWidgetの使用
  • FirebaseでのAnalyticsの使用
  • url_launcherを使って規定のブラウザでリンクを開く

苦労した点

  • RiverpodのStateNotifierProviderの扱い方(特にデータクラスをimmutableにして使う方法は勉強中です)
  • データ保存の設計(Map型でのデータ操作が慣れておらずCRUDの実装に数日かかりました)
  • 非同期処理(最初のうちは意味がわかりませんでした)
  • ページ遷移のアニメーション
  • 利用規約とプライバシーポリシーの更新(やはりというか、非機能に関する部分も時間がかかりました)

今後の展開

最低限の機能でリリース出来ましたが、個人的には機能が不足していると思っているので、今後のアップデートで順次機能を追加していきたいと思います。

バグや欲しい機能があればご連絡ください。

Github

github.com

参考サイト

Flutterから利用できるFirebaseサービスをカウンターアプリで実践(その他のサービスとまとめ編)

Firebase Flutter

はじめに

Flutterから利用できるFirebaseの機能をカウンターアプリに実装し、内容をまとめたシリーズの最終回です。

今回はこれまで紹介したサービス以外のFirebaseの機能とまとめです。

目次

シリーズの内容

回数 内容 リンク
第0回 準備編 ブログ
第1回 Analytics ブログ
第2回 Firebase Crashlytics ブログ
第3回 Firebase Performance Monitoring ブログ
第4回 Firebase Remote Config ブログ
第5回 Firebase Authentication ブログ
第6回 Cloud Firestore ブログ
第7回 Firebase Realtime Database ブログ
第8回 Cloud Storage for Firebase ブログ
第9回 Firebase Cloud Messaging ブログ
第10回 Firebase In-App Messaging ブログ
第11回 Firebase ML ブログ
第12回 Cloud Functions for Firebase ブログ
第13回 Firebase Hosting ブログ
第14回 Firebaseのその他のサービス イマココ

導入方法

Firebase Dynamic Links(モバイルのみ)

Firebase Dynamic Linksはモバイルのネイティブアプリのリンク先のコンテンツに直接移動するで「ダイナミックリンク」を提供するサービスです。

Flutterでの構築方法はプロジェクトにfirebase_dynamic_linksをインポートし、Firebase Consoleからリンクを作成します。

Firebase App Check

App Checkは、請求詐欺やフィッシングなどの悪用からバックエンドリソースを保護するのに役立ちます。

Flutterでの利用も可能です。

Firebase installations service

Firebase installations serviceはFirebaseのインストールを管理するサービスです。

MessagingやAnalyticsなどで使用するFirebase installation IDの確認に使用します。

A/B Testing

A/B Testingはプロダクトとマーケティングのテストを簡単に実行、分析、スケーリングするためのサービスです。 通知、Remote Config、In-App Messagingのテストに対応しています。

Google AdMob

Google Admobはモバイル広告サービスです。 ただし、FlutterでAdMob広告を開始したい場合はMobile Ads SDK（Flutter）（ベータ版）を利用する必要があります。

Test Lab

Test Labはクラウドでホストされているデバイスでアプリをテストできるサービスで、いろんな構成のアプリでテストしたいときに使用できます。 使い方はモバイル向けにアプリをデプロイし、Firebase ConsoleからRobo Testにファイルをアップロードすると、テストできます。

Firebase App Distribution

Firebase App Distributionはテスターにアプリを容易に配布するためのサービスです。Firebase Console、Firebase CLIなどからアプリの配布、テスターの管理ができます。

Firebase Extensions

Firebase Extensionsはパッケージ化されたソリューションを使用して、アプリに機能をすばやく追加できるサービスです。 公式のFirebase Extensionsには多くの拡張機能が用意されており、これらの拡張機能をCloud Functions for Firebaseを使用して記述します。

まとめ

Firebaseの機能を追加することに必死で、とても雑なアプリになりました。 もう少し詳しく書きたいので、加筆修正してzennで無料本としてまとめたいなと思います。

また、Firebaseは無料もしくは格安でこれだけのことができるので、今後も積極的に活用したいなと思いました。

GitHubのページを貼ります。

github.com

全体的に参考になったサイト

下記以外では、Stack OverflowやFirebaseのGithubなど。

firebase.google.com

flutter.dev

zenn.dev

riverpod.dev

www.flutter-study.dev

追記

どこで書こうか迷っていたら、シリーズ最終回になってしまったので、追記という形で記載します。 Androidで起動したら、以下のエラーで怒られたとき。

FirebaseException ([core/duplicate-app] A Firebase App named "[DEFAULT]" already exists)

このエラーの治し方はネットを見るといろいろありましたが、私の場合、Firebase.initializeAppに名前をつけてあげるとエラーが治りました。

await Firebase.initializeApp(
  name: 'counterFirebase',
  options: DefaultFirebaseOptions.currentPlatform,
);

なお、webだと逆にnameをコメントアウトしないと怒られます。

Flutterから利用できるFirebaseサービスをカウンターアプリで実践(Hosting編)

Firebase Flutter

はじめに

Flutterから利用できるFirebaseの機能をカウンターアプリに実装し、内容をまとめたシリーズの第13回目です。

今回はウェブアプリ、静的コンテンツ、動的コンテンツ、マイクロサービス向けにホスティングができるFirebase Hostingについてです。 Flutterアプリをwebアプリとしてホスティングしたい場合に使用できます。

目次

シリーズの内容

回数 内容 リンク
第0回 準備編 ブログ
第1回 Analytics ブログ
第2回 Firebase Crashlytics ブログ
第3回 Firebase Performance Monitoring ブログ
第4回 Firebase Remote Config ブログ
第5回 Firebase Authentication ブログ
第6回 Cloud Firestore ブログ
第7回 Firebase Realtime Database ブログ
第8回 Cloud Storage for Firebase ブログ
第9回 Firebase Cloud Messaging ブログ
第10回 Firebase In-App Messaging ブログ
第11回 Firebase ML ブログ
第12回 Cloud Functions for Firebase ブログ
第13回 Firebase Hosting イマココ
第14回 Firebaseのその他のサービス ブログ

開発環境

項目 内容
PC Macbook Air(M1)
Flutter 3.0.1
Firebase 11.0.1
FlutterFire 0.2.2+2
デバッグデバイス Android 12(APIレベル31), Chrome

準備

準備編が完了出来ているものとします。

snova301.hatenablog.com

導入方法

Firebase Hostingにデプロイする方法は2種類あります。

今回は、コマンドを入力してデプロイする方法を選択しました。

Firebaseプロジェクトを作成し、Firebase CLIをインストールした後、プロジェクトを初期化します。

firebase init hosting

質問と回答例は以下の通り。

? What do you want to use as your public directory? (public)
build/web

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
No

? Set up automatic builds and deploys with GitHub? (y/N)
No

web向けの設定をします。 web/index.htmlでは、htmlの<head>の設定をします。 web/manifest.jsonでは、webアプリの挙動やアイコンの設定をします。

アプリのアイコンは、web/iconsディレクトリに含まれるファイル(Icon-192.pngなど)を上書きすれば、変更できます。 このときサイズの間違えには注意してください。

アプリのデバッグを終えたら、Flutter側でアプリをビルドし、Firebaseでデプロイします。

flutter build web
firebase deploy --only hosting

デプロイ後に出てくるURLにアクセスし、アプリが確認できたら完成です。

...

Project Console: https://console.firebase.google.com/project/***/overview
Hosting URL: https://***.web.app

なお、カスタムドメインを使用する場合はFirebase Consoleから設定できます。

コード全文

前回からは変更点なしです。

GitHubのページを貼ります。

github.com

参考

docs.flutter.dev

zenn.dev

Google Play and the Google Play logo are trademarks of Google LLC.