Flutterアプリ開発入門 体験記 イケガミ 2021.09.04 合同勉強会 in 大都会岡山 -2021 Summer Online- 

自己紹介 名前: 池上 (ikegami) 出身地: 岡山県 津山市 住所: 岡山県 岡山市南区 新保 職業: ソフトウェアエンジニア 　　　 主にAndroidアプリ開発 好きな外食店: スパゲッツ ダンディ 

目的 ● Flutterを通してクロスプラットフォーム開発を体験する ○ Android, iOSでちゃんと動くものが開発できるか？ ○ 両プラットフォームにリリースできるか？ ● モダンな開発手法をキャッチアップ ○ 宣言UIやリアクティブなプログラミングを体験 ○ 状態管理とはどんなもの？ ● きっかけ ○ 合同勉強会 in 大都会岡山 -2020 Winter Online- ■ @kishisuke Flutterアプリコンテストを開催した話 

目次 1. 作ったアプリ紹介 ○ アプリの概要, アーキテクチャ, 教師承認済みアプリ？ , イベント機能で遊びましょう 2. 開発体験記 ○ 開発環境, Flutterキャッチアップ, 使用パッケージ, AndroidとiOSの違い 3. リリース体験記 ○ リリース準備, ビルド環境, GooglePlayとAppStoreストアの比較 4. まとめ 

アプリ紹介 ● 神経衰弱ゲームアプリ Memorize ! ● Joe Schmoe by Jon & Jess さんのイラスト使用 ● Google Play Storeで「教師承認済み」アプリ認定 ● Google Play と App Storeで絶賛公開中！ ● イベント機能 ○ 今回の勉強会用の特別イベント！ ○ 神経衰弱王 決定戦！ イベントへのディープリンク QRコード ※ 読み込み後、イベント表示されなかったらアプリ再起動して..󰢛 

アーキテクチャ 

Flutter 何がいいのか ● 開発環境を問わない ○ Windows, Linux, Mac, ChromeOSも選べる ■ 例) 普段はLinuxやWindowsで開発して、iOSのビルドにMacを使うなど ○ IDEは Android Studio と Visual Studio Code ■ ネイティブアプリ開発者 と ウェブ開発者 双方の参入がしやすい ● 開発しやすい ○ ホットリローディング で迅速な開発 ○ 宣言的UI ○ 覚えるべきは Dart 言語だけ ● 豊富なパッケージ ○ 大切なことはすべて パッケージがやってくれた ○ pub.dev 

個人開発の環境, ツール ● 開発環境は以下, VSCodeとAS ○ Arch Linux ○ Windows10, 11 ○ Mac (Big Sur) ● スマホ実機 ○ Android: Pixel3a ○ iOS: iPhone SE(2nd Gen) ● Notionでタスク管理 ○ ボード View ○ メモ代わりにも 👍 ● Git ○ リモートはBitBucket ○ GitクライアントはGitUp 

M1 Macbook Air2020 (一番安いモデル) で開発 ● 快適に開発できる ● エミュレータも動く (iOS, Android) ● ストレージもまだ余裕 ● XCode, Android Studio を一緒に開くと 多少モタツク 🐢🌈 ● やっぱりメモリは16GB必要かも.. 

Flutter キャッチアップ〜アプリ開発 ●Flutter公式ページ ○ 環境構築 〜 チュートリアルアプリを作 りながら一通りの基本をキャッチアップ ●Youtube ○ Flutter公式チャンネルで定期的に Widgetを勉強 ○ KBOYさんのFlutter大学
 ○ Reso Coder (ヨーロッパ周辺諸国の方) ● Async/Await, Futureの理解 ● アニメーション ● 状態管理手法のキャッチアップ ○ StatefullWidgetのsetState ➡ HookWidget + Riverpod + Freezed ● Firebase ○ 特にデータベースの Firestore ● 各種パッケージ 実践 Firestore 基本: 2〜3h / 日 で 1ヶ月ぐらい 発展: 〜2h / 日 で 2ヶ月ぐらい 基本 発展 

大切なことは全てパッケージがやってくれた パッケージ 用途 firebaseの各種sdk 各種firebaseサービスのAPI呼び出しのサポート riverpod/freezed/hooks 状態管理, React Hooks的な機能をサポート app_tracking_transparency iOSのIDFA取得プロンプトの呼び出しなどをサポート flutter_launcher_icon 両OS用のアイコンを作ってくれる flutter_native_splash アプリ起動時のスプラッシュ画面を作ってくれる qr_flutter URLからQRコードを作ってれる screenshot スクリーンショットの pngを作成してくれる share_plus 他アプリへ画像などをシェアしてくれる easy_localization 多言語化をサポート audioplayers 音を出してくれる flutter_webview_plugin WebViewの実装サポート url_launcher ブラウザを開く confetti 紙吹雪アニメーション 🎉🎊 

おすすめパッケージ 紙吹雪 🎉 confetti 🎊 ● こんなパッケージまであるんだ！ ● https://funwithflutter.github.io/confetti/#/ 

iOSとAndroidで違った動き Android iOS ListViewのアニメーションの動きが違う Android 👍 iOS 😩 スクロールが端までいったかの判定を修正 

リリースについて ● 同じアプリをそれぞれのストアにリリース ○ Google Play (Android), AppStore(iOS)のストアの比較 ● うわさはいろいろ聞くけど..実際に体験してみる ○ Google Playは審査ある？, 自動的な適当な審査？ 人間が審査する？ ○ AppStoreは審査遅い？, しょぼいアプリでも通る？ 厳しいのでは？ 

Androidリリース体験 accepted 🎉 ● １発OK ● 審査提出から完了まで３日弱 ● 初回リリースは特に問題無かった... 

iOSリリース体験 rejected 😢 ● 提出したスクリーンショットの不備などで1週間弱かかった ○ DEBUG や Test mode の表記はNGらしい ● メタデータ(申告の設定)の不備/説明不足 

iOSのレビュー返答 (異議申し立て) Thank you for the review. I try to reply to the questions each. > • Does your app include third-party analytics? If so, please provide details about what data is collected for this purpose. Actually, I do not use any analytics SDK. So, I checked off usage of Crash Data in Privacy Info. > Does your app include third-party advertising? If so, please provide a link to the ad network's publicly-documented practices and policies for kids apps. Yes, it dose. I use AdMob. The URL below seems the policies for kids are written. Please check it. https://support.google.com/adsense/answer/9335564?hl=en > Is your app collecting any user or device data for purposes beyond third-party analytics or third-party advertising? If so, please provide a complete and clear explanation of all planned uses of this data. AdMob's explanation of collecting data is below. Please check it. https://developers.google.com/admob/ios/data-disclosure Thank you very much for your review again. I hope the release of my app is going to be accepted. 

Androidリリース体験 rejected 😢 ● 2回目のリリースで リジェクトされた ○ 1回目から変えていない部分なのに... ● 対象年齢3+ において ファミリーポリシーに違反した不適切な表現 , イラスト ○ キセルやパイポがダメだったぽい ● 初回リリースは人間が審査？、2回目からは機械が審査？ Jacques Jazebelle final Map AVATARS_MAP = { 'Jabala': 'assets/images/jabala.svg', 'Jack': 'assets/images/jack.svg', ....略 }..removeWhere( (key, value) => (Platform.isAndroid &&　FILTER_LIST.contains(key))); const List FILTER_LIST = ['Jazebelle', 'Jed', "Jean", "Jacques"]; Androidで表示されないようにフィルタ 

リリースについて リリース用のスマホアプリ編 🤖 Androidアプリ: GooglePlayConsole 👍 レビュー完了したら通知 来てiPhoneからそのままリ リースできる！ 😩 アプリインストール数など わかりにくい 👍 インストール数やユー ザー数が一目瞭然！ 😩 このアプリからはリリース 管理できない 🍎 iOSアプリ: App Store Connect 

リリース自動化の試み その1 「codemagic」 ● Flutter がメインのCI/CDクラウドサービス ● 500分 / 月 まで無料で使用可能 ● とにかく遅かった...🐢 ○ iOSアプリのリリースビルドに1h15m.. ⿔ 

リリース自動化の試み その2 「fastlane」 ● iOS, AndroidのCI/CDオートメーションツール 󰞤 ● ruby風スクリプトで書けて使いやすい 👍 ● ローカルのM1 Macbook Airで実行 🍎 deploy_all.sh Android: 2分 iOS 5分 でビルド~リリースが完了🚀 Fastfile 

まとめ ● 宣言的UI, リアクティブな開発を体験できた ● Android, iOSの両プラットフォームにリリースできた ○ 同じコードベースで、動作に少し違いはあったが、ほぼ問題なし ○ 単純に1/2の工数 ● Flutter はシンプルで楽しい ○ 直感的な宣言的UIがいい ○ サクサク進む ○ お子様のプログラミング教育にも良いのでは？ ○ 一緒にEnjoy Flutterしましょう ! ● ご清聴ありがとうございました 󰢛 

多言語化 (easy_localization) 

おすすめGitクライアント　GitUp (Macだけ) 速い、シンプル、美しい