Flutter で iOS, Android, Web アプリを極力お財布に優しい形で開発する

2020年6月19日 13:48

友人から Flutter がすごいと教えてもらい、もともと Swift で開発していた iOS アプリ「コレカ」を Flutter でリプレイスしました。

アプリの開発は Objective-C, Swift, Kotlin の経験がありますが Flutter なんだこれ、ってレベルです。すごいです Flutter 。もう個人開発では Flutter 以外で開発する事はないだろうと思うぐらいの衝撃を受けたので、これから Flutter をやってみようと思っている人に少しでも参考になればと記事を残そうと思います。

いかに定額コストを減らせるか

良いサービスのアイデアを思いついても、費用的な問題で開発の二の足を踏むケースがあったりすると悲しいので、今回の記事では、 iOS, Android, Web アプリをコレカでは、どうやって運用費を抑えつつ、開発しているかについて紹介したいと思います。

費用について

コレカの運営にかかっている費用は以下の 2 つしかありません。

1. Apple Developer Program => 年間約 12,000 円
2. 独自ドメイン費用 => 年間約 1,500 円
3. 子どもが寝た後に夜な夜な頑張って開発する時間 => プライスレス

Apple の費用を除けば、Web アプリ用に取得しているドメインの費用のみで、年間 1500 円で運用できます。DB やサーバー費用が一切ないですが、コレカは Firebase 上に構築されていて、無料枠の範囲内で運用できている為です。無料枠を超えると従量課金として費用が発生しますが Google はかなり無料枠を厚めに設定してくれています。サービスが成長するまでは無料で利用する事ができるので、気軽に新規サービスを開始する事ができるのが嬉しいところです。詳しくは Firebase の料金ページを確認してください。

※ Android アプリをリリースする為の Google Play デベロッパー登録の約 2,500 円の費用は一度払ってしまえばお終いなのでここには含めていません。

コレカが利用しているサービスと環境

金額面は上記で全てなので、コレカを構成する各サービスの詳細について書きたいと思います。コレカでは、 iOS, Android, Web の 3 つのプラットフォームでサービスを展開しています。

iOS, Android アプリ

認証や DB など、サーバーサイドの機能は全て Firebase で完結しています。無料枠で収まる限り費用が発生する事はありません。

Apple Developer Program の年間約 12,000 円の更新が毎年ありますけどね！！！！！

Web アプリ

Web アプリは iOS, Android アプリと比べると少し複雑です。

Web アプリは、静的なトップページと機能を提供するアプリの 2 つに分かれていて、それぞれサブドメインを設定しています。

ランディングページ兼 Web のトップページ（静的）

これは GithubPages で作られています。 TEMPLATED で無料のテンプレートを利用させてもらい、作成しました。 GithubPages は https 通信も無料で利用できて、嬉しい限りです。

https://templated.co/

Web アプリ（動的）

iOS, Android アプリの Web 版です。いくつか Web 用にカスタマイズが必要ですが Flutter なので、ほとんどの部分を iOS, Android アプリと共通化できます。note にリンクを貼って初めて気付いたんですが A new Flutter project ってなんだｗびっくりｗ

アプリ同様、すべての機能が Firebase を利用していて、Firebase Hosting にデプロイしています。Firebase Hositng は月額ここまで無料で利用できます。

GithubPages や Firebase Hosting がデフォルトで提供してくれるドメインを利用すれば、独自ドメインの年間費用もなくなりますが、GithubPages を辞めたいとなった時に辞めづらくなるので、ドメインは取得した方がいいかなと思います。

Firebase Hosting を利用する場合は、Google Domains でドメインを管理すると Firebase で独自ドメインを設定する際に、ドメインの所有権の証明がスキップされてちょっと便利です。 beta 版でしたが設定画面もすっきり作られていて、設定も簡単に行えました。長年お世話になったムームードメインからお引っ越したのですが、その際には、この記事が参考になりました。

Firebase Hosting にアプリをデプロイする際の注意点

Firebase Hosting にアプリをデプロイする場合は、 iOS や Android アプリ以上にセキュリティの設定に注意してください。

GCP や AWS で構築する際の WEB サービスの一般的な構成として、DB への接続はオープンにせず、特定の App サーバーからのみ接続を許可する設定を入れるのが一般的ですが、Firebase Web の基本的な考えとして、「FirebaseAuthentication や Firestore などの Firebase の関連プロジェクトへの接続情報はオープンな情報である」といった点があります。

Firebase で Web の設定を進めていくと分かると思うのですが、以下のような接続情報を静的ファイルである index.html に追加する事になります。

```
var config = {
 apiKey: "***",
 databaseURL: "***",
 storageBucket: "***",
 authDomain: "***",
 messagingSenderId: "***",
 projectId: "***"
};
```

ここには利用している database や storage へのパスが記述されていて、それを利用する為の apiKey の記述まであります。何もセキュリティルールを設定せずに接続情報を公開すれば、どのサーバーからでも Firebase の各種サービスに接続できてしまいます。

じゃあ、どこで機能を制限するのかというと、Firebase の各サービス毎にセキュリティルールを設定します。接続情報はオープンだけど、各サービスで権限を適切に設定し、情報を管理するといったスタンスです。

具体的には FirebaseAuthentication であれば、認証機能を利用できるドメインをホワイトリスト形式で管理したり、Firestore のセキュリティルールで認証済みユーザーでないと DB にアクセスできないようにしたりする設定を入れていきます。

最終的には apiKey の利用できるドメインをホワイトリスト形式で管理する設定を入れて、特定のドメインからしか apiKey を利用できなくすることで、二重のセキュリティ強化を行います。

詳しくは Google はリリース前のチェック項目として以下を公開していますので、セキュリティに関する各項目はしっかり確認してから公開に移りましょう。

また、上記で話した内容については、以下の記事がとても参考になりました。ありがとうございます。

アプリの便利な使い方やリリースノートなどのコンテンツ

アプリの使い方や新機能の紹介などを記事にして公開したい事があると思います。コレカでは新しい機能を作成したら、設定画面に新機能紹介というコーナーを設けて、記事を紹介しています。その記事を書くのに利用しているのがこの note です。

使い方、開発予定の機能、リリースノートなど、ジャンル毎にマガジンを作成して管理しています。

コレカではまだ利用していないですが、サークル機能を利用して、色んな人とディスカッションできる場を設けてもいいかもですね。

まとめ

年間費用は 12,000 円 + 1,500 円の 13,500 円です。Apple Developer Program がちょっと高いですが、せっかく作ったサービスはできるだけ多くのプラットフォームに展開して知見を貯めていきたいところですよね。

Flutter も Firebase も Google が開発しているので、Firebase の Flutter ライブラリがとても充実しています。まだ一部のライブラリしか WEB に対応していない為、ネイティブアプリでは実現できる機能が WEB ではできないといったケースがちらほらありますが、どんどん Web 対応が進んでいるので、その差がこれからどんどん埋まってくると思います。

Flutter Web は、まだ動きがカックカクで、 Mac に至ってはフォント設定を適切にしないとフォントが明朝体になったり、目の付く所が沢山残ってますが、すごく可能性を感じるものでした。

個人開発にチャレンジしてみたい、と思っている人は、是非 Flutter + GithubPages + Firebase でマルチプラットフォームな開発を試してもらえればと思います。

この記事が気に入ったらサポートをしてみませんか？