14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Firebaseで爆速アプリリリースできたお話

Posted at

#はじめに

今年2018年は、災害の多い年でした。
被害にあわれた方には、お見舞い申し上げます。

この記事は、2018年7月の西日本豪雨を受け、IT関係の自分にも何か役に立てる事はないかと考え、地図アプリを2日で開発、3日目には公開したお話です。
爆速で開発、リリースまでできたのは、Firebaseのおかげです。

Firebaseのサービスを、どういった理由で選択し、どういったシーンで利用したか、そんな事をこの記事では書かせてもらおうと思います。

開発要件とFirebase選択

アプリのコンセプトは平凡なもので、地図アプリに情報集約して役立ててもらおうというもの。
アプリ要件として必要だったものと、状況的に必要だったものが下記。

| | Firebaseにあるよ
--- + --- + ---
1 | データベース的なものが必要 | Firebase.Firestore
2 | 写真ストレージが必要 | Firebase.Storage
3 | アプリの公開 | Firebase.Hosting

  +

  1. とにかく早くリリースしたい!しかも開発は1人
    • フロントとバックエンドと分けて開発する方法だと、開発に時間がかかってしまう
      • Firebaseには色々な言語のSDKが用意されていて、
      • それらを利用する事で、わざわざバックエンドを用意する必要がない!
        Firebase.png
    • アプリとなると、iPhoneとAndroid。。。
      • アプリ開発未経験。両方覚える暇はない
      • PWAがあるじゃない!
      • IONICを使う事で解決!
  2. 費用面もできる限り抑えたい
    • Firebaseの料金体系がとても魅力的

    • 無料枠であるSparkでも結構な事ができる

    • 今回のアプリではGoogle Mapの利用の関係で、Blazeプラン(従量制)を利用しました。

      Free usage from Spark plan included

      従量制ですが、上記記述通り無料枠分が含まれます。

いざ開発

※今回は、Ionicを使いました。Ionicを使っての開発については今回の記事では端折ります。
 IonicはAngularベースのフレームワーク。
 Firebaseを利用する際は、AngularFire2を利用しました。

Firebase.Authenticationを導入する

今回のアプリは、誰でも登録ができて、誰でも見ることができるというもの。
しかしながら、本当に誰でもできていいのか、気になってきた。
例えば、悪意ある使い方をされた時が心配になってきたわけです。

FirebaseのSlackで質問させていただき、以下の助言をいただきました。

Anonymousログインで認証させてAnonymousの場合は登録できる件数を絞るとかですかね

と言うわけで、Firebase.Authenticationの匿名ユーザを追加導入!

  1. アプリ起動時に、匿名ユーザにてログインを行う(アプリ側で対処)
  2. Firestoreのルールに、ログインされていたら読み書き可となるよう設定(Firebaseコンソールにて設定)

Firebase.Hostingでアプリのリリース!

さて、随分と開発工程のお話をすっ飛ばしてますが、
フロントをIonicで開発し、Firebaseへ登録したり、登録した内容を読み込んだりといったことができるようになりました。

と言うわけで、アプリをリリースします!
といっても、アプリの審査だなんだといった事を通している時間はありません。
でも大丈夫。今回はPWA...Webなのです。
Firebase.HostingにWebとして公開すればよいのです!

みんなで地図__minnanochizu_さん___Twitter.png

みんなで地図
※Firebaseのドメインで公開する場合、「***.firebaseapp.com」といった感じのURLになります。

まとめ

2日で開発、3日めにはアプリリリースができた

必要最低の機能に絞っての公開。
あれもこれもできない状態ですが、それよりもスピードを重視。
初回リリースまでは、1日徹夜して、2日で開発、3日めにはリリースできました。

利用したFirebaseのサービス(最終結果)

おまけとして、アプリ開発・運営に寄付いただける仕組みをStripe.Checkoutで作りました。、
Stripeから受け取ったトークンをクライアント側に返却する事なく、安全に処理させるため、
Firebase.Functionsで処理を行うようにしました。
※Firebase.Functionsでは、データベーストリガーのようなものや、APIのようなものを用意することができます。

というわけで、最終的にこれだけのサービスを利用する結果となりました

  • Firestore
  • Storage
  • Hosting
  • Authentication
  • Functions

来年は災害のない1年となりますように

そして、このアプリですが、結果としてあまり活躍はしませんでした。
そちらについては色々と反省する点はありますが、アプリとしてはこのまましばらく公開しようと思っています。
使えるようでしたら、お使いください。

14
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?