Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter入門体験記

8c8f9e0f07a2550a0fca686bc420bf21?s=47 higekick
September 04, 2021

 Flutter入門体験記

合同勉強会 in 大都会岡山 -2021 Summer Online-
にてFlutter入門体験記を発表しました

8c8f9e0f07a2550a0fca686bc420bf21?s=128

higekick

September 04, 2021
Tweet

Transcript

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

  2. 自己紹介 名前: 池上 (ikegami) 出身地: 岡山県 津山市 住所: 岡山県 岡山市南区

    新保 職業: ソフトウェアエンジニア     主にAndroidアプリ開発 好きな外食店: スパゲッツ ダンディ
  3. 目的 • Flutterを通してクロスプラットフォーム開発を体験する ◦ Android, iOSでちゃんと動くものが開発できるか? ◦ 両プラットフォームにリリースできるか? • モダンな開発手法をキャッチアップ

    ◦ 宣言UIやリアクティブなプログラミングを体験 ◦ 状態管理とはどんなもの? • きっかけ ◦ 合同勉強会 in 大都会岡山 -2020 Winter Online- ▪ @kishisuke Flutterアプリコンテストを開催した話
  4. 目次 1. 作ったアプリ紹介 ◦ アプリの概要, アーキテクチャ, 教師承認済みアプリ? , イベント機能で遊びましょう 2.

    開発体験記 ◦ 開発環境, Flutterキャッチアップ, 使用パッケージ, AndroidとiOSの違い 3. リリース体験記 ◦ リリース準備, ビルド環境, GooglePlayとAppStoreストアの比較 4. まとめ
  5. アプリ紹介 • 神経衰弱ゲームアプリ Memorize ! • Joe Schmoe by Jon

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

  7. Flutter 何がいいのか • 開発環境を問わない ◦ Windows, Linux, Mac, ChromeOSも選べる ▪

    例) 普段はLinuxやWindowsで開発して、iOSのビルドにMacを使うなど ◦ IDEは Android Studio と Visual Studio Code ▪ ネイティブアプリ開発者 と ウェブ開発者 双方の参入がしやすい • 開発しやすい ◦ ホットリローディング で迅速な開発 ◦ 宣言的UI ◦ 覚えるべきは Dart 言語だけ • 豊富なパッケージ ◦ 大切なことはすべて パッケージがやってくれた ◦ pub.dev
  8. 個人開発の環境, ツール • 開発環境は以下, VSCodeとAS ◦ Arch Linux ◦ Windows10,

    11 ◦ Mac (Big Sur) • スマホ実機 ◦ Android: Pixel3a ◦ iOS: iPhone SE(2nd Gen) • Notionでタスク管理 ◦ ボード View ◦ メモ代わりにも 👍 • Git ◦ リモートはBitBucket ◦ GitクライアントはGitUp
  9. M1 Macbook Air2020 (一番安いモデル) で開発 • 快適に開発できる • エミュレータも動く (iOS,

    Android) • ストレージもまだ余裕 • XCode, Android Studio を一緒に開くと 多少モタツク 🐢🌈 • やっぱりメモリは16GB必要かも..
  10. 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ヶ月ぐらい 基本 発展
  11. 大切なことは全てパッケージがやってくれた パッケージ 用途 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 紙吹雪アニメーション 🎉🎊
  12. おすすめパッケージ 紙吹雪 🎉 confetti 🎊 • こんなパッケージまであるんだ! • https://funwithflutter.github.io/confetti/#/

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

  14. リリースについて • 同じアプリをそれぞれのストアにリリース ◦ Google Play (Android), AppStore(iOS)のストアの比較 • うわさはいろいろ聞くけど..実際に体験してみる

    ◦ Google Playは審査ある?, 自動的な適当な審査? 人間が審査する? ◦ AppStoreは審査遅い?, しょぼいアプリでも通る? 厳しいのでは?
  15. Androidリリース体験 accepted 🎉 • 1発OK • 審査提出から完了まで3日弱 • 初回リリースは特に問題無かった...

  16. iOSリリース体験 rejected 😢 • 提出したスクリーンショットの不備などで1週間弱かかった ◦ DEBUG や Test mode

    の表記はNGらしい • メタデータ(申告の設定)の不備/説明不足
  17. 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.
  18. Androidリリース体験 rejected 😢 • 2回目のリリースで リジェクトされた ◦ 1回目から変えていない部分なのに... • 対象年齢3+

    において ファミリーポリシーに違反した不適切な表現 , イラスト ◦ キセルやパイポがダメだったぽい • 初回リリースは人間が審査?、2回目からは機械が審査? Jacques Jazebelle final Map<String, String> AVATARS_MAP = { 'Jabala': 'assets/images/jabala.svg', 'Jack': 'assets/images/jack.svg', ....略 }..removeWhere( (key, value) => (Platform.isAndroid && FILTER_LIST.contains(key))); const List<String> FILTER_LIST = ['Jazebelle', 'Jed', "Jean", "Jacques"]; Androidで表示されないようにフィルタ
  19. リリースについて リリース用のスマホアプリ編 🤖 Androidアプリ: GooglePlayConsole 👍 レビュー完了したら通知 来てiPhoneからそのままリ リースできる! 😩

    アプリインストール数など わかりにくい 👍 インストール数やユー ザー数が一目瞭然! 😩 このアプリからはリリース 管理できない 🍎 iOSアプリ: App Store Connect
  20. リリース自動化の試み その1 「codemagic」 • Flutter がメインのCI/CDクラウドサービス • 500分 / 月

    まで無料で使用可能 • とにかく遅かった...🐢 ◦ iOSアプリのリリースビルドに1h15m.. ⿔
  21. リリース自動化の試み その2 「fastlane」 • iOS, AndroidのCI/CDオートメーションツール 󰞤 • ruby風スクリプトで書けて使いやすい 👍

    • ローカルのM1 Macbook Airで実行 🍎 deploy_all.sh Android: 2分 iOS 5分 でビルド~リリースが完了🚀 Fastfile
  22. まとめ • 宣言的UI, リアクティブな開発を体験できた • Android, iOSの両プラットフォームにリリースできた ◦ 同じコードベースで、動作に少し違いはあったが、ほぼ問題なし ◦

    単純に1/2の工数 • Flutter はシンプルで楽しい ◦ 直感的な宣言的UIがいい ◦ サクサク進む ◦ お子様のプログラミング教育にも良いのでは? ◦ 一緒にEnjoy Flutterしましょう ! • ご清聴ありがとうございました 󰢛
  23. 多言語化 (easy_localization)

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