Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

アーキテクチャ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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ヶ月ぐらい 基本 発展

Slide 11

Slide 11 text

大切なことは全てパッケージがやってくれた パッケージ 用途 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 紙吹雪アニメーション 🎉🎊

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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で表示されないようにフィルタ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

多言語化 (easy_localization)

Slide 24

Slide 24 text

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