FlutterでiOS/Androidのマップアプリ開発

OVERVIEW

個人開発

同期

家族で遠出する際にはキャンピングカーで行くのだけど、寝泊まりするのは道の駅だったりオートキャンプ場だったり。

それとは別にお風呂に入れる場所を探したり、洗濯物がたまってきたらコインランドリーも探す。場合によっては車内で食事もするのでスーパーも探す。

それらすべてを目的地への道程またはその近くで探したいことが多いのだけど、GoogleMapで検索ワードを切り替えながら探すのは結構つらかった経験から、それらのデータを集めて同時に閲覧できるようなアプリを作ろうと思ったのがきっかけだった。

まずはその車中泊にあったら便利なデータを集めて一括表示できるようにするのが第一目標。

次にこのようなデータは新規店舗が出てきたり、閉店でなくなったりするため、そういう「データの鮮度」を保つのは自分も含めてユーザーにやってもらうことにした。

ということでデータ登録の機能や、登録済みデータへのフィードバック報告の機能はつけたい。

そういう主旨なのでたくさんのユーザーに使ってもらいたい(そもそも車中泊してる人口が少ないと思うが…)のと、他の人の車中泊事情(どんな車でどんな工夫をして車中泊してるのかな?とか)にも興味があったので投稿機能もつけたい。

たくさんのユーザーに届くようにという意味でiOS/Androidの両方でリリースしたい。

こういった事情と自分自身のスキルと興味からFlutterで開発することにした。


ここからは技術スタックのお話、というかメモ。

アプリ開発は上に書いた通りFlutterで行った。

データベースはPostgreSQL(PostGISエクステンション付き)

データのやり取りはGraphQLで行いたかったのでHasuraを使った。

PostgreSQLとHasuraはDockerでOracle CloudのA1インスタンス(Armの4コア、メモリ24GBまで無料で使える太っ腹なやつ)を確保できたのでそこで動かす。

ただHasuraへの接続はCloudflare Workersを経由してSSLで受けられるようにしておいた。

ユーザー認証などはFirebaseを使った。

画像ファイルなどのストレージはCloudflare R2(10GBまで無料)を使い、画像サイズの変換はImageKit.ioを使うことにした。(ImageKit.ioからR2を読み取ってリサイズする方式)

アプリとそのバックエンドはこんな感じ。

これに加えて色々事情があって簡易なWeb版も作った。

https://vantrip.fun/

Web版のバックエンドもアプリと同じものを使っているのでフロントエンドを新たに開発しただけ。

ライブラリ、フレームワークはReact、Next.js。

ホスティングはCloudflare Pages & Workers (SSRしてるので)


ランニングコスト

  • GooglePlayのライセンス
  • Apple Developer Program
  • ドメイン費用

がかかっている。

FirebaseとCloudflareも無料枠を超過すると課金されるけどまだそんなにユーザーもいないのでまだまだ問題ないはず。

一応広告をつけているけどランニングコストをカバーするには至らず、まだまだ赤字。

目標は収支トントンにすること!

WEBSITE