loader image

Flutter×Firebase×AdMobを使ったゲーミフィケーション学習アプリを作った話

はじめに

インフラエンジニアとして日々AWSやTerraformと格闘している私ですが、個人開発で「ポチポチIT」というIT初学者向けのゲーミフィケーション学習アプリを開発しました。

普段はインフラ構築が専門なので、モバイルアプリ開発は完全に未知の領域でした。この記事では、インフラエンジニアがFlutter×Firebase×AdMobでアプリを作る際に苦労した点と、逆にインフラエンジニアだったからこそスムーズに進んだ点を共有します。

なぜモバイルアプリを作ろうと思ったか

  • Webアプリは仕事で触るし、デプロイサービス(CloudFlare)が優秀なのですぐ作れそう
  • モバイルだけガチの未経験
  • 現にLAPRASでモバイルのステータスだけ低すぎる
  • オンラインサロンとかの重めの教材は飽和状態
  • 自分が初学者の頃に気軽にコストをかけずにゲームみたいな感覚で勉強できるアプリがあったらいいなぁって思ってた

「ポチポチIT」は現在App Storeで公開中です。IT学習を楽しくゲーミフィケーションで進めたい方は、ぜひダウンロードしてみてください。
https://apps.apple.com/jp/app/%E3%83%9D%E3%83%81%E3%83%9D%E3%83%81it/id6747937302
※Android版も鋭意製作中

アプリの概要

「ポチポチIT」は、ITを楽しく学べるゲーミフィケーション学習アプリです。

このアプリの売り

  • 無料で使える
  • 勉強範囲は LPIC、AWS、Azure、GCP、DevOps、プログラミング、IT基礎、ネットワーク、セキュリティ、データベース など初学者が学びたいジャンルを網羅
  • 解説は短文で分かり易さ重視
  • 経験上長すぎる説明は頭に入らない
  • 問題の履歴機能を完備して今まで解いた問題から苦手なカテゴリを分析してくれる
  • 問題数は驚異の900問越えで今後もアップデート予定
  • ゲーム感覚で遊べる
  • 勉強するほどステータスがあがる、収集要素あり、ランキングでライバルたちと差をつけろ!
  • LPICの問題の質については特に自信がある

主な機能

  • 4択クイズ形式でITスキルを学習
  • ポイントシステムでモチベーション維持
  • 装備機能でアイテムを収集
  • ランキング機能で競争要素を追加
  • 広告視聴でライフ回復
  • 学習履歴の分析機能
  • 称号システム

技術スタック

  • フロントエンド: Flutter (Dart 3.0+)
  • バックエンド: Firebase
  • 収益化: Google AdMob

苦労した事

1. Flutterでのビルドとテスト

モバイルアプリのビルドプロセスは、サーバーサイドとは全く異なる世界でした。

Flutterでの苦労

  • パッケージの依存関係: pubspec.yamlの管理と依存関係の競合解決
  • プラットフォーム固有のコード: iOS/Androidで異なる実装が必要な場合の対応
  • ホットリロード: 便利だが、状態が保持されることによる予期せぬ動作

2. Macが必須

普段はWindowsを使っているため、後述のXcodeなどで開発する必要があるため Macを購入する必要がありました。

3. Xcodeでの開発環境構築

iOS開発での苦労

  • 証明書とプロビジョニングプロファイル: Apple Developer Programの仕組みに慣れるのに時間がかかった
  • Xcodeの操作: GUIベースの操作に慣れるまで苦労
  • CocoaPodsの依存関係: pod installのエラー解決に何度も悩まされた

4. AdMobの実装と審査対応

広告の実装は技術的な面だけでなく、ポリシー面でも苦労しました。

  • テスト広告と本番広告の切り替え: 間違えて本番広告でテストしてアカウントBANのリスク
  • 広告の配置: UXを損なわない広告配置の検討

審査対応での苦労

  • app-ads.txtの設置: 自分のドメインに設置する必要があった
  • プライバシーポリシーの作成: 広告使用に関する記載が必須
  • 子供向けコンテンツの判定: 教育アプリは特に慎重な対応が必要

インフラエンジニアの強みが活きた点

1. AWSなどのクラウドサービスに慣れていたのでFirebaseの理解が早かった

インフラエンジニアとしてAWSのサービス設計に慣れていたため、Firebaseの各コンポーネント(認証、データベース、ストレージ、サーバーレス関数)の関係性や設計思想を素早く理解できました。

2. セキュリティ意識を活かした設計ができた

情報処理安全確保支援士 取得 相当のセキュリティ知識が、モバイルアプリ開発でも大いに役立ちました。

  • 個人情報の最小化: そもそも不要な個人情報は取得しない設計
  • 適切な権限設定: Firestore Rulesで必要最小限のアクセス権限を設定
  • セキュアな通信: HTTPSの徹底、APIキーの適切な管理

3. 自分のサーバーを持っていた

インフラエンジニアとして、自分のサーバやドメインを持っていたことが大きなアドバンテージになりました。

app-ads.txtの設置がスムーズ

AdMobの審査で必要なapp-ads.txtファイルを、自分のドメインにすぐに設置できました。

プライバシーポリシーのホスティング

アプリストアの審査で必須のプライバシーポリシーも、自分のサーバーでホスティングできました。

まとめ

インフラエンジニアがモバイルアプリ開発に挑戦するのは大変でしたが、とても良い経験になりました。特にLAPRASのモバイルステータスを上げたいという動機から始まりましたが、実際に多くのユーザーに使ってもらえるアプリを作ることができました。

早速ユーザーから嬉しいフィードバックが貰えている

アプリをリリースしてから、想像以上に温かいフィードバックをいただいています。

  • 「学習時間が見えるのがモチベにつながりますし、通勤中にもゲーム感覚で学べるのが最高です!」
  • 「UI/UXが想像以上に優れている。アプリ未経験とは思えないですね。遊んでみようと思います!」

このような声を聞けるのが、個人開発の醍醐味だと感じています。

これから個人開発を始める方へのアドバイス

  1. 小さく始める: 最初から完璧を目指さない
  2. コミュニティを活用: Flutter/Firebaseのコミュニティは活発で親切
  3. 自分のサーバーを持っておく: app-ads.txtの設置など、意外と役立つ

今後の展望

  • Android版のリリース
  • ソーシャル機能の拡充
  • 問題数の更なる追加

ここまで読んでくれてありがとうございます。
インフラエンジニアでも、やる気があればモバイルアプリは作れます。ぜひ挑戦してみてください!
また度々になりますが「ポチポチIT」は現在App Storeで公開中です。
IT学習を楽しくゲーミフィケーションで進めたい方は、ぜひダウンロードしてみてください。
https://apps.apple.com/jp/app/%E3%83%9D%E3%83%81%E3%83%9D%E3%83%81it/id6747937302

コメント

タイトルとURLをコピーしました