Flutterでネイティブアプリを開発してリリースしたので、リリースまでの苦難を晒していきたいと思います。
これからFlutterでネイティブアプリ開発をしようと考えている方の参考になれば幸いです。
リリースしたアプリは、サブスクリプションサービスをシンプルに管理するアプリ「さぶすく」です。
サブスクリプションをシンプルに管理するアプリをリリースしました！
・サービスの無料期間中に解約するのを忘れてしまう
・いろいろなサービスに加入しているのでまとめて管理したいそんな悩みを解決したくて作りました。
ぜひ触ってみてください😀#Flutterさぶすくhttps://t.co/xJq3N99HzI pic.twitter.com/s0iSSTPhk1
— のすけ@Flutter (@guitar_blues_) April 13, 2020
以下からインストールできるので、触ってみてフィードバックをいただけると嬉しいです。
当記事は以下の方に向けて書きました。
・Flutterでのネイティブアプリ開発に興味がある
・アプリ開発をやったことがないけど、やってみたい
・Webをちょっとかじっているけどネイティブアプリは作ったことがない ←私です
ちなみに私の説明をしておくと、
・2019年からWebエンジニアとして勤務（主にPHP）
・Flutter歴は半年ほど
・ネイティブアプリ開発はFlutterが初めて
という感じです。
※プログラミング未経験からWebエンジニアに転職した際の実体験は、こちらの記事にまとめています。
Flutterを周りに触っている人はいなかったため、完全に独学です。
それでもFlutterでアプリをリリースすることはできたので、これからネイティブアプリを作りたい人はぜひ参考にしてみてください。
【追記】Appliv様に掲載いただきました
アプリレビューの大手メディア、Appliv様に「さぶすく」が掲載されました！
おすすめポイントや使用感などを詳細にレビューしていただいているので、ぜひ確認してみてください。
正直、初心者がFlutterでアプリ開発するのは難しいのか
正直に言うと、簡単ではないと思います。
体感では、PHPでWebアプリを作るよりもFlutterでネイティブアプリを作る方が難易度が高い印象です。
理由としては、記事後半のアプリ開発の辛かったところでも記載していますが、「他の言語と比べてネット上のリソースが少ない」ことと「英語の記事を参考にしなければならない」ことが挙げられます。
プログラミング完全未経験の場合、エラーが発生したときに英語の記事を読んで解決するという行為自体の難易度が高いと思います。
PHPやRuby、もしくはSwiftなどのネイティブアプリ言語を事前に少しでも触ってからでないと、プログラミングの基本がわかっていないために、初歩的なエラーを解決できずに挫折してしまう可能性があります。
少しでもプログラミングをかじったことがある人であれば、問題なくFlutterでアプリ開発ができるはずです。
Flutter初学者の学習の進め方
私がFlutterをどのように学習してきたのかをご紹介します。
Flutterは最近急速に盛り上がっているフレームワークですが、日本語情報は他のネイティブ言語(Swift・Kotlin)と比較するとかなり少ないと思います。
結局参考にする情報（動画、ドキュメント）は7~8割英語になることを覚悟してください。
①まずは公式のチュートリアル
Flutterは公式のドキュメントやチュートリアルが充実しているので、公式チュートリアルから始めるのがおすすめです。
公式チュートリアルは英語ですが、機械翻訳を使えばなんとなく意味は理解できるので問題ないです。
日本語で翻訳した記事もあるようなので、そちらを利用するのもいいと思います。
このチュートリアルを通して、アプリ開発の大枠をつかめます。
Flutterチュートリアル終了！
いい感じ👍👍 pic.twitter.com/6xU3jrS21Y— のすけ@Flutter (@guitar_blues_) October 28, 2019
UdacityのFlutterチュートリアルも一からアプリを作れるのでおすすめです。
Flutterチュートリアル終了！
単位変換アプリができました😀いい感じのデザインが作りやすいのはすごくありがたい！
ドキュメントを読み込んで、Widgetの組み立てが頭に入れば爆速でアプリできそう pic.twitter.com/QwmnzbO3iE
— のすけ@Flutter (@guitar_blues_) November 1, 2019
②チュートリアルが終わったらアプリ開発を開始
チュートリアルを終えたら早速アプリを開発していきます。
公式のチュートリアルは本当に触りのみなので、実際にアプリの開発を始める場合進め方は全くわからないと思います。
私の場合は、コードを書いて機能を実装していく中で「動きはするけど、この書き方であってるのか」と不安になっていました。
そこでYoutubeの動画を見ることをオススメします。
鮮度が良い情報を得られると同時に、コードの書き方を知れます。
Youtubeの動画の中でも、スクラッチでアプリを開発している動画がオススメです。
特にBLoCなどのアーキテクチャの説明はQiitaなどにもまとめられているものの、文字だけでは完全に理解できないと思います。
youtubeで実際の開発の流れを見ることで、プロジェクト内のディレクトリ・ファイルの切り分け方などのより実践的な知識を得られます。
YoutubeにアップされているFlutterの動画は基本的に英語です。
しかし、コードが読めればいいので、言葉の意味がわからなくても問題ないです。
わからない言葉やコードが出てきたらその単語をググって知識を補完します。
最初から全て理解しようとするのではなく、必要に応じて少しずつ知識を補完していくイメージでアプリを作っていきます。
多くの動画を見て実際にコードを真似して書くことで「大体こう書くのか」という感覚をつかめました。
またスクラッチの動画をアップしてくれている人は、大抵コードや変数名なども（自分で書くよりは）洗練されているので、積極的に真似しましょう。
周りにFlutterを使っている人がいない孤独なエンジニアはYoutubeで学ぶのが効率的だと思います。
Flutterでのアプリ開発において重要なこと
これは別にFlutterに限った話ではないかもしれませんが、アプリ開発初学者がアプリをリリースするまでに意識することをまとめます。
①ネット上にあるコードをとにかく参考にする。
自分で考えて機能を実装するのも大切ですが、正しい書き方がわからないのでコードがカオスになりがちです。
そこで先人のコードを参考にしましょう。
参考にするコードも、一部だけを載せているサイトではなくできるだけ丸ごと載せているサイトからコードを持ってきて少しだけ手を加えて自分のアプリに組み込みましょう。
初学者はだらだら悩みながら設計実装するのではなく、既存のコードを参考にしてFlutter開発のセオリーを頭に叩き込むことが重要だと思います。
②使えるパッケージはガンガン使う
強いエンジニアの力に感謝して公開されているパッケージはガンガン使いましょう。
基本的にやりたいことはすでにパッケージ化されているので、それをインポートして使っていきます。
車輪の再発明は悪です。
しかしただコピペするのではなく、パッケージのソースコードを辿ってみて内部でどのようなWidgetが使われているのか見てみるのは勉強になるのでオススメです。
③他の人のGitHubリポジトリを触ってみる。
多くの人がGitHubに自分が作成した成果物をあげています。
これをgit cloneして、ローカル環境で自分で動かしてみるのはかなり学びが多いです。
意外と初学者の人はやっていないと思います。
※昔は私もめんどくさくて他の人のリポジトリを触っていませんでした。
Flutterのパッケージを公開している人が、GitHubにコードをあげている場合はgit cloneしてローカルで動かしてみることでより理解が深まります。
（exampleも記載してくれている人もいるのでありがたいですね）
他の人のコードを見る事で、どのような形で組み立てているのかもわかります。
その言語特有の記述方法もあるので、特に初学者は積極的にgit cloneしてローカルで動かしてみることをオススメします。
また人気のパッケージを公開している時点で、そのエンジニアの技術レベルは高いので、彼らがどのようなコードの書き方・実装をしているのかを参考にするのはめちゃくちゃオススメです！！
④とりあえずリリースすることを目標にする
「まずは小さく始める」ことが大前提です。
小さく始めるために必要なことは以下の三つです。
- 最初はiOS・Androidのどちらかを集中して開発する
- 簡単なアプリにする
- アプリの機能を絞る→少しずつアップデートする
最初はiOS・Androidのどちらかを集中して開発する
Flutterはクロスプラットフォームなので、iOS・Android両方でアプリをリリースすることができます。
しかし初学者の場合まず片方のOSに絞って開発する方がいいです。
両方同時に開発することもできますが、iOSとAndroidそれぞれシミュレータや実機で表示を確認したりする作業は時間がかかります。
とりあえず片方に絞って集中して開発・リリースした後にもう片方に取り掛かるのが良いと思います。
私はiOSから開発してリリース後にAndroid版の開発を始めましたが、2~3日で終えることができました。
簡単なアプリにする
最初は簡単なアプリから始めるのがオススメです。
複雑な機能を持つアプリを作ろうとすると、実装の仕方やコードがググってもでてこないので初心者は積みます。。
またDBにFirebaseを使用する場合、DB設計が複雑になりリリース前に挫折する可能性が高まります。
アプリの機能を絞る→少しずつアップデートする
最初から全ての機能を実装しようとするのではなく、一旦リリースしてから少しずつ機能追加していくことがオススメです。
「あれもこれも・・・」と考えていると永遠にリリースできません。
最初は必要最低限の機能でリリースしましょう。
またリリースした後のモチベーション維持のためにも、マネタイズの手段を用意しておくことは大事かなと思います。
私はとりあえずAdMobでバナー広告を表示させています。
大した金額にはなりませんが、一円でも収益が発生するとモチベーションが上がるはずです。
④エラーの切り分けに注意
Flutterを始めると初学者は小さなところで詰まります。
さまざまなエラーに遭遇しますが、そのエラーがFlutter特有のものとは限らないことに注意してください。
iOSシミュレータやAndroidエミュレータ関連のエラーもあるため、エラー文で検索する際にFlutterと頭につけずに検索した方が目的の記事にアクセスしやすかったりします。
私は、ネイティブアプリ開発が初めてだったので、エラーの切り分けには悩まされました。
⑤Flutterの参考書は（ほぼ）ない
Flutterは登場したばかりでアップデートが続けられていることもあり、参考者はほとんど発売されていません。
公式ドキュメントと、書かれたばかりの記事、Youtubeが一番参考になります。
私は一冊Flutterの書籍を購入しました。
Flutter本、ヨシ！
週末やります☺️ pic.twitter.com/jdZlzaabJN
— のすけ@Flutter (@guitar_blues_) October 31, 2019
上記書籍の内容としては、公式ドキュメントの日本語翻訳がメインなので、どうしても日本語で知識を補完したい人にはいいと思います。
アプリリリースに当たって必要な作業
開発していく中で、自分が思っていた以上に数多くの必要な作業がありました。
今回アプリのリリースに当たって必要だった作業をまとめます。
・アプリの機能（何を目的にするのか）
・ログイン機能（ソーシャルログイン、ゲストログイン）
・画面遷移の方法（プッシュ遷移、モーダル遷移）
・デザイン（文字サイズ、余白、カラー）
・アプリアイコンの作成
・設定画面（レビュー、プライバシーポリシー、利用規約、ライセンス）
・プッシュ通知
・スプラッシュスクリーン
・AppStoreへのアプリ登録（スクリーンショット提出）
・Google Playへのアプリ登録（スクリーンショット提出）
・アプリの紹介ページ作成
上記の内容も少しずつ記事にしていこうと思います。
アプリ開発の辛かったところ
かなりシンプルなアプリながら、開発中にいろいろと悩む箇所があったのでまとめておきます。
プッシュ通知
ユーザーが登録したサブスクリプション支払日の二日前にプッシュ通知を送信する機能です。
このアプリの主要な機能でありながら、一番の鬼門といっても過言ではなかったです・・笑
最初はflutter_local_notificationsというプッシュ通知をスケジュールするパッケージを利用する予定でした。
しかし毎週のプッシュ通知しかサポートしておらず、毎月・毎年のプッシュ通知には対応していなかったため使用を断念しました。
最終的にCloud Functionsを利用してサーバー側でcronを走らせて対応しました。
Cloud Functionsの部分はNode.js＋TypeScriptでコードを書き、TypeScriptの勉強になりました。
ネット上のリソースが少ない
Flutterで開発するにあたり辛かったところは、やはりネット上のリソース不足です。
※普段PHPでコードを書いている身としては余計に感じます。。笑
そもそも日本語の記事が少ないため、基本的に英語です（たまに中国語）。
Google翻訳にはお世話になりました。
Flutterでアプリを開発すると、知りたいことを英語で検索するスキルが上がります（プラス思考）。
クロスプラットフォーム開発におけるデザイン
アプリ開発初心者として辛かった箇所はデザイン・画面遷移などのUI・UXの部分です。
クロスプラットフォームでiOS・Android両方開発できるからこそ、それぞれのOSのUIをどのようにデザインするかは非常に難しいです。
Androidが採用しているマテリアルデザインに寄せすぎると、iPhoneユーザーにとっては違和感があるアプリデザインになる可能性があります。
ちなみに、FlutterはGoogleが開発しているだけあってマテリアルデザインのパーツはかなり充実しています。
今回アプリを開発するにあたり、Flutterで開発された他のアプリを実際にインストールして、デザインを確認しました。
現状Flutterでのアプリ開発は、iOSでもマテリアルデザインに寄せるのが無難かなという印象です。
以下のサイトも参考にしました。
- It's All Widgets!・・・Flutterで開発されたアプリを確認できます
- Mobbin・・・最新のイケてるアプリの画面デザインを確認できます。特にアプリの初期画面を確認しました。
App Storeへのアプリ申請
これはFlutterでのアプリ開発に限った話ではありませんが、iOSアプリをストアで公開するための準備がかなり大変でした。
特に、私のように初めてアプリ開発を行い、リリースをする個人開発者は心してかかった方が良いです。
・Apple Developer Program
・スクリーンショット画像作成、提出
・利用規約の作成
・プライバシーポリシーの作成
・リジェクト（申請却下）されたら、アプリの修正
などなどアプリ公開までにやるべきことは盛り沢山です。
アプリが完成しても、すぐにApp Storeには掲載できません。
Appleからリジェクト（申請却下）されてしまうと、指摘箇所を修正して再度申請しないといけません。
あまりにも機能がシンプルで、すでに類似のアプリが数多くストア上に存在している場合はリジェクトされやすいようです。
iOSよりもAndroidの方が審査基準がゆるいので、先にAndroid版をリリースするのも良いかもしれません。
※私の場合は自分がiPhoneユーザーなので、iOS版を先にリリースしました。
ちなみに私もAppleから三回リジェクトを食らいました！
今回はApple IDでサインインする場合のボタンデザインが、Appleのデザイン基準を満たしていないことが原因でした。
1st リジェクト「Appleログインボタンのデザインだめです」
面白くなってきやがったぜ pic.twitter.com/l1mkDUktvM
— のすけ@Flutter (@guitar_blues_) April 9, 2020
Flutter と Firebaseの組み合わせってどうなの？
Firebase + Flutterの組み合わせは超オススメです。
両方ともGoogleが開発しているだけあって、FirebaseとFlutterはかなり相性が良いです。
今回開発して感じたメリットとデメリットをまとめます。
【メリット】
・ログイン機能を丸投げできる（ログイン周りのコードをほとんど書かなくてよい）
・アナリティクスを簡単に設定できる
・Cloud Messaging でプッシュ通知を飛ばせる
なんと言ってもログイン周りをFirebaseに任せられるのはありがたいです。
ソーシャルログインにも対応しています。
またゲストユーザーが後からアカウント連携をする場合にも、自動的に紐づけてくれる機能があるため便利です。
【デメリット】
・NoSQLのDB設計
当たり前ですが、学習コストが増加します。
Flutterに加えてFirebase関連も覚えないといけません。
またFirebase Croud Functionsを利用する場合はDart以外の言語でプログラムを書く必要があります。
プログラミング自体の経験が浅い場合は結構辛いと思います。
Firebase Cloud FirestoreをアプリのDBとして使用する場合は、DB設計にも注意する必要があります。
Cloud FirestoreはNoSQLデータベースと呼ばれ、普段NoSQLを触らない人はDB設計に悩むと思います。
私も普段はMySQLを触っているため最初はかなり違和感がありました。
Youtubeや先人が投稿してくれているQiitaの記事を参考にCloud Firestoreの理解を深めるのが良いと思います。
また、簡単なアプリであれば複雑なDB設計は必要ないので、簡単なアプリで作り始めましょう。
多少学習コストは上がりますが、今後Flutterでアプリ開発を続けていくならばFirebaseを活用することは避けては通れません。
初学者でも臆することなくFirebaseの機能を組み込んでいきましょう。
まとめ ： ぜひアプリをダウンロードしてください！！！！
非常に長くなりましたが、Flutter初心者がアプリを作るまでの苦難をまとめました。
簡単なアプリであればFlutterで開発するのも難しくないと思うので、Flutter初学者どうし頑張りましょう😀
ここまで読んでくれたってことはアプリもダウンロードしてくれるよね・・・
アプリのフィードバックや質問等は、コメント欄・Twitterからお気軽にどうぞ！
業務未経験からポートフォリオなしでWebエンジニアに転職した際の経験談を語りました。
これからエンジニアに転職を考えている人はぜひ読んでみてください。
コメント