ラーメン店検索アプリをFlutterで初めてリリースした話（Flutter×Google Maps API)

はじめに

　先日、Flutterを用いて念願の自作アプリをAppStoreにて公開しました！
　初心者が開発を進めていく上で色々と知見を得たので、同じようにアプリ開発をやってみたい、という初心者の方向けに記事を書こうと思います。

正直私が何か新しいことを見つけました！みたいなことはほぼ無くて、基本的にここ参考にしたよ！っていう情報の受け売りだらけになってしまうのですが、それでも無いよりはマシかと思って執筆します。あと僕自身がこういう記事に非常にお世話になったので。
この記事が技術的な知見としてはもちろん、開発のモチベーションとしてでも良いので、少しでも誰かの役に立てば幸いです。

この記事でわかること

• Flutterでの制作において参考にさせていただいた記事やサービス
• Flutter開発における、初心者におすすめの方法
• 開発における注意点・後悔

この記事では省いたこと

• Flutterって何？みたいな説明（もっと分かりやすい記事が山ほどあるので）
• 具体的なFlutterプロジェクトの作成方法
• アプリ制作後に実際にストアに公開するまでの手順（これはリリースに必要なものや審査についても含めて、別記事にまとめたいと思っています）

制作したもの・制作期間

　以下が今回制作したアプリ「爆速ラーメン」です。(この宣伝が本題）
　iOSアプリとしてApp Storeにてリリースしています。当初はAndroid向けにもリリース予定だったんですが、とある事情で断念している現状です…（詳しい理由は後述します）

アプリ紹介

アプリの機能としては、現在地付近にて現在営業中のラーメン屋だけを検索して地図上に表示します。現在地からの距離た簡単なレビュー、写真を見る事ができます。
夜の飲み会終わりに〆のラーメンを探したい時や、土地勘のない場所で深夜でもやっている店を爆速で手っ取り早く探したい時に活躍します！
無料ですので、良かったらぜひインストールお願いします🙇

筆者のスペック

筆者がアプリ制作を行う前までのスペックは以下の通りでした

• ゲーム制作の経験がちょっとあって、簡単なゲームをwebで公開した(Unity,C#)
• iOSアプリを制作しようと思って参考書をやり終えたが、アイデアがなく挫折
• インターンでC#用いた開発を4ヶ月くらいしてた
• 普段は競プロでC++書いたり、研究でMATLAB書いてる
• Flutter(Dart)に関しては本当に触ったことある程度

こんな感じで、プログラミング経験やものづくりの経験自体はあったのですが、アプリ開発やflutterに関してはほぼ初心者でした。そんな人でも(主にChatGPTのおかげで）アプリ開発してリリースまでいけるんだよ、ということをお伝えしたいです。

Flutter初心者がアプリ開発を行うおすすめの方法

　個人的にはエンジニアの使う初心者という言葉ほど信用ならない幅広い意味を持つ言葉はないと思っているのですが、本記事における初心者は以下のようなスペックの方を想定しています。

• プログラミングの基本は分かる（基本ってどのくらいとかいうレスバはしません）
• Web、モバイル問わずサービスの開発経験はない、あっても小規模
• 自分で調べる能力はある

このようなスペックの方でしたら、自分は迷わずにUdemyか参考書を利用することをおすすめしています。いきなり公式のドキュメントを読み始めても、分からない言葉を調べたらその先にまた分からない言葉が…なんて状況に陥るのではないでしょうか。ゆくゆくは公式のドキュメントを読むべきだとは思いますが、最初は平易な本やUdemyを活用することをお勧めします。（ただ、Flutterの日本語のわかりやすい本や教材は増えてきているとはいえ、まだまだ少ないと個人的には思っています😢）

自分は参考書だけ読んで体当たりで開発を始めましたが、結局その後基本がわかってないと感じてUdemyで動画教材を購入しました。最初から評価の高い教材をチョイスして購入するのもお勧めです。英語の教材でも翻訳でなんとかなるので、日本語教材にこだわりすぎる必要もないのかなと思います。（英語の勉強にもなるので）

使用したパッケージで便利だったもの紹介

本アプリの開発において、使用したパッケージの中で便利だな〜ってものを共有します。このアプリ限定の話かもしれないので、興味のない人は読み飛ばして大丈夫です。

• google_maps_flutter

まずはこれです。アプリ上に地図を表示させないと兎にも角にも始まりません。Flutter上に地図を表示するパッケージは他にもあるのですが、今回は以下の記事を参考にした上でgoogle_maps_flutterを選択しました。

• geolocator

現在位置を取得するために使用しています。他にも現在位置取得の方法は様々あるのですが、geolocatorが一番シンプルで使いやすいと感じました。（位置情報取得の許可の部分で若干詰まったのでもし使う場合は色々調べることをお勧めします）

• flutter_rating_bar

店舗の評価を表示するところで使用しています。簡単に評価バーを実装できるのでおすすめです。

• envied

開発当初はAPIキーをスクリプトにベタ書きしていたのですが、セキュリティ上良く無いため秘匿してGithubに上げないための対策を行いました。その過程で使用したパッケージです、以下の記事が参考になると思います。APIキーを用いるようなアプリの場合は、行うべき対策だと思います。

他に使用したサービスなど

• ChatGPT
  　もう今更言うまでも無いかと思いますが、本当にすごいです。基本的にうまくプロンプトを与えれば大抵のことはやってくれます。実装したいことを指示してコードを書かせる、という使い方でも物凄い威力を発揮したんですが、個人的に重宝したのが「こんな感じの画面作りたいんだけど、いい実装方法とかパッケージとかない？」と聞いていい感じのパッケージを教えてもらう使い方です。これは従来の検索エンジンでは結構難しくて、言語化が難しいイメージを検索する事が可能になりかなり開発効率が上がったと感じます。
  　自分は無課金で使用していたのですが、GPT-4への課金も検討しています。
  
  

• Google maps API（Places API)
  　店舗情報の取得やレビュー、写真の取得は全てこちらを利用しています。ただ、情報に癖があったりして若干使いづらかったです…（最近Places APIの新作が出て、どちらの情報なのか紛らわしかった）公式のドキュメントがやや見づらいので、基本的に使い方はchatGPTに聞くと良いと思います。

料金計算について

基本的には無料の範疇（毎月200ドルまで無料）で収まると思いますが、心配な人は以下で試算するといいと思います。（正直無料枠超えるほどの大ヒット飛ばすのは至難の業なので、杞憂に終わると思います笑）

他に参考になったサイト・記事

Flutter全体について

　非常に有名ですが、Flutterの公式Youtubeチャンネルで毎週Widgetを紹介する「Widget of the week」と言う動画が投稿されています。毎回1~2分程度の短い動画なのですが、そのWidgetの基本が詰まっているので非常に勉強になります。FlutterのWidgetは数が非常に多いのでそもそも存在を知らないものが多いかと思うのですが、こちらの動画をぼーっと見るだけでも勉強になると感じました。
　音声は英語なのですが、決して難しい英語ではなく字幕を付ければ英語の苦手な人でも理解可能だと思うので、ご存じない方は是非オススメです。

リリース関連

　先述の通り詳しくは別記事で書こうと思いますが、iOSのビルドからリリースまでは以下のページを参考にさせていただきました。

リリース時に必要となるスクリーンショットの作成については、今回は以下の1つ目の記事を参考にしながらFigmaで作成しました。私はFigmaの操作に慣れているわけでは決してなかったのですが、非常に簡単に作成できました。Figmaに慣れておくことはエンジニアとしてもメリットがある（かもしれない）と思うので、こちらの方法はオススメです。

　
　また、今回は上の方法を採用したのですが、同じFigmaを使うやり方でも先人達の作成した神ツールを使用する方法もあります。こちらも興味のある方は参考にすると良いと思います。

他にはスクリーンショットを簡単に作成できる専用のサービス（有料、無料問わず）もいくつかあるので、より手軽に作成したい方はそちらを利用するのもありだと思います。

制作をしてみた感想・大変だったこと

制作をしてみた感想

正直、ChatGPT君に頼りまくりで我ながらよく完成したな、という感じです。もちろん書いてるコードに関して理解はしている（つもり）なのですが、それでもChatGPT君がいなかったら開発に倍くらいの時間がかかってたな〜と思います。本当に凄い。

それと同時に、一本作り上げてみてまだまだ勉強したいなと思うことがたくさん出てきました。技術的には状態管理にRiverpodを使用したいのでそれについて学びたいですし、非同期処理の部分ももっと上手く処理すべきだと感じました。他にもアーキテクチャについてMVVMがいいのかその他がいいのかということや、デザイン面に関してもなんとなく「Flutterっぽさ」が残ったままになっちゃったな、という感想なので、もっともっとデザインについても勉強したいなと思っています。 このように、一本作り終わったことで自分に足りない部分が明白になり、どんどん学習や制作のモチベーションが湧いてきました

また、やはり一本リリースしたのは大きな自信にもなりました。実際大した数はDLされてはいないんですが、それでもこのアプリに触れてくださった方がいると考えると非常に嬉しいものがあります。同時に、次はもっともっと多くの方に使っていただけるアプリを作りたいとも思うようになりました。

大変だったこと

　個人開発でよく言われることですが、やはりモチベーション維持が難しかったです。自分の場合コード書くのは好きだし開発はずっと楽しかったんですが、「こんなサービス作って使う人いるのかな…」とかすごい人のプロダクトを見て「私のアプリ、ダサすぎ…？」とか思ってモチベが下がってました。最終的には、最低でも自分と友達数人は使ってくれるだろう、というテンションで乗り切りました。友人に進捗を見せると全然大したことのない実装でも凄く素直に「すげー！」とか言ってくれて嬉しかったです。個人的には、非エンジニアの方に開発の進捗を見せる、というのはめちゃくちゃオススメなモチベ管理法です。

あと見切り発車でコード書き始めたので、ディレクトリ構成とかが無茶苦茶ないわゆるスパゲッティコードになってしまいました。（とりあえず作る、完成させる、というのは良いことでもあると個人的には思っています）リリース後に直せばいいか〜と思っても、意外とそこまで手が回らなかったりするので余裕がある人はアプリの全体像を考えながらディレクトリ構成等を序盤に決めるといいと思います。(自分は状態管理のところでRiverpodを難しそうと敬遠したのですが、今ではRiverpodを使用すべきだったと後悔しています…）

個人的に一番大変だったのは、学校での研究を終え開発を主に行なっていた深夜に毎晩毎晩無数のラーメン画像を見なくてはいけなかったことでした。セルフ飯テロ。

Androidリリース作業中の思わぬ誤算について(Android開発初心者必見！）

　最後に、遭遇したAndroidでのリリースにおける思わぬ誤算（というか自分がよく調べてなかっただけ）について書いておきます。これからAndroid向けでリリースを考えている方はぜひ読んで欲しいです。

　リリースに向けて先人達のブログを読み漁ってると「AndroidよりiOSの審査の方が厳しい！」とか「先にiOSの審査だせ！通ればAndroidも通るから！」とか書いてあったので、はえ〜なるほど〜と思ってアプリが完成したら先にiOSの審査に出しました。
で、何度かリジェクトされながらもなんとか通したわけです。悪戦苦闘しながらも、無事にApple Storeでリリースされました。さて次はAndroidの方でもリリースするか〜と思って、3000円ちょっとお布施して、アプリを登録、諸々手続きを進める、ここまでは良かった…

「クローズド　テストを20人以上のテスターで、14日以上実施する」


…！？

結論から述べると、2023年11月以降にデベロッパーアカウントを作成した人は、アプリを公開する前に20人以上のテスターに14日以上アプリをテストしてもらうことが義務付けられました。

こんな一方的な暴挙改訂が許されていいのかと思いますが、残念ながら今Android向けに初めてリリースをしようと思った方は、これを乗り越えなければなりません。↑の公式ドキュメントの中では

テスターを集める方法として最も一般的なのは、個人的または仕事のネットワークを通じて募集する方法です。たとえば、友だち、家族、同僚、クラスメートに連絡して、アプリのベータ版テスターになってもらうことができます。

とか書いてありますが、アプリ開発者に20人も友達や家族がいるわけはありません。（偏見）
というか、Androidユーザーを20人見つけるのも大変なのに、2週間毎日アプリをテストしてくれって頼める関係性の人が20人いるって、かなり限られるのでは…
お金に余裕のある人はココナラとかでテスターバイトしてくれる方に頼みましょう。試しに調べたら○万円して吐きそうでした。Twitterとかで相互テスターのコミュニティを作るとかも考えましたが、何より私がAndroid未所持なので（それは買えという話）テストのお返しができないので断念しました。

長くなりましたが、現状としてはAndroid版のリリースを断念しています。（もっと早く気付けばGoogle Playに登録料3000円お布施しなかったのに…）もしテスターやってもいいよ、という心優しい神がおられましたら、Twitterか何かで連絡をくださると泣いて喜びます😢（本当に金銭も何もお返しできないので、あまりにも厚かましいお願いになってしまうのですが…）


将来的にこの要件が消えるのを願うしかないです。

まとめ

ここまで読んでいただきありがとうございました。もしこの記事を読んでFlutterの学び方に悩んでいる方がいれば、ぜひ手を動かしてアプリを一つリリースするところまでやってみてください！自分もやってみて、リリースすることでしか得られない知見がたくさんあると感じました！

製作時に非常にいろんな記事やブログにお世話になって、なんとかアプリを形にする事ができました。この記事で同じような方の力になれていたら嬉しい限りです！
リリース後の話（アプデ対応、広告の追加、停止（現在も格闘中）→解決！、インストール数の推移）についても、機会があればどこかで記事にしたいと思っています。