Flutter を始めよう！ - Flutter の開発現場から

SAPPORO ENGINEER BASE #07
https://seb-sapporo.connpass.com/event/359757/

Flutter アプリの開発に関する、自組織の取り組みの話。

1. Flutter を始めよう！ Flutter の開発現場から 2025/07/11 SAPPORO ENGINEER BASE #07 生活協同組合コープさっぽろ デジタル本部システム企画部 木原 卓也
2. 私です 木原 卓也 Kihara, Takuya / @tacck 生活協同組合コープさっぽろ デジタル推進本部システム企画部 Software Engineer / Flutter, TypeScript, Vue.js, React ゆるWeb勉強会@札幌 主催 Amplify Japan User Group 運営メンバー AWS Community Builder Since Q2 2021 Frontend Web and Mobile, DevTools 好きなフィギュアスケートの技 スプレッド・イーグル
3. 生活協同組合コープさっぽろ コープさっぽろは60周年を迎えました!!
4. 60周年企画の一例
5. 生活協同組合コープさっぽろについて
6. 生活協同組合コープさっぽろについて 6 コープさっぽろの仕事は生活の課題を聞き解決すること ITの力を使い課題解決の一助となるのが コープさっぽろのシステム部の仕事
7. 宅配トドック 北海道内向けの宅配事業。 (離島にもお届け) • 注文した商品を翌週配達 • お支払いは1ヶ月ごと • 置き配対応 • 資源回収も実施
8. トドックアプリ コープさっぽろの 各種サービスに使えるアプリ • 宅配トドックの注文 • お店の組合員証(ちょこっとカード) • 購入履歴確認(宅配・店舗・その他事業) • etc Flutter で作っています!!
9. 話すこと • Flutter 開発に必要なこと • 開発〜リリースの進め方 • 直近の開発事例: 振替口座情報 • アクセシビリティ (コープさっぽろの場合) • まとめ • 参考情報
10. Flutter 開発に必要なこと
11. Flutter • Google 謹製で OSS • マルチプラットフォームアプリ開発フレームワーク ◦ Mobile ▪ iOS ▪ Android ◦ Web ◦ Desktop ▪ Windows ▪ macOS ▪ Linux ◦ これらの画面・ロジックを一つのコードで開発
12. Flutter 開発に必要なこと (minimum) Editor / IDE • Visual Studio Code + Flutter 拡張 Runtime • Flutter (Dart) Execution environment • Web Browser (Chrome など)
13. Flutter 開発に必要なこと (スマホアプリ開発) Editor / IDE • Xcode • Android Studio Runtime Management Tool • FVM (Simple Flutter Version Management) ◦ Flutter / Dart の複数バージョン管理 Execution environment • iOS Simulator • Android Emulator • 実機もろもろ
14. モバイルアプリ開発の関連技術・サービス
15. 開発〜リリースの進め方
16. 開発〜リリースの進め方 開発中 (GitHub と GitHub Actions を活用) • 機能ブランチ作成 • 実装 • 機能ブランチごとに検証アプリ配信 ◦ GitHub Actions 起動 ▪ ビルド ▪ Fastlane で Firebase Distribution へアップロード ▪ 検証端末へ配信 アプリの検証が早く回るようになったことで、 アプリのリリース回数も増加 2023年度 18回 → 2024年度 41回
17. 開発〜リリースの進め方 リリース (GitHub と GitHub Actions を活用) • 機能ブランチ → devブランチへマージ ◦ ここで最終的なコードチェック • devブランチ → stgブランチへマージ ◦ GitHub Actions 起動 ▪ ビルド ▪ Fastlane で Firebase Distribution へアップロード ▪ 検証端末へ配信 • stgブランチ → mainブランチへマージ ◦ GitHub Actions 起動 ▪ ビルド ▪ Fastlane で 各ストアへアップロード
18. 直近の開発事例: 振替口座情報
19. 直近の開発事例: 振替口座情報 宅配や電気など、各サービスの振替口座をアプリから 登録・更新できるようになった。 • 連携先の調整 ◦ 組合員情報を持つサーバー ◦ 組合員の振替口座ステータスを管理するサーバー ◦ 口座登録サービス • 画面設計 • 実装 • テスト
20. 直近の開発事例: 振替口座情報 (コードの一部)
21. アクセシビリティ (コープさっぽろの場合)
22. アクセシビリティ (コープさっぽろの場合) 特に、「文字サイズ」と「音声読み上げ」は注意して対応。 • サービスの特性上 ◦ スマホの文字サイズを大きくした組合員様が一定数いらっしゃる。 ◦ スマホ・PCの読み上げ機能を使って、宅配注文される組合員様が一定数いらっしゃる。 我々は「つなぐ」を大切にする組織 多くの組合員様に、安心してアプリを使っていただく使命がある。
23. Flutter のアクセシビリティ関連 (文字サイズ) 適した対応をしていない場合、文字がはみ出した箇所に注意マークが出る。 下記のような対応: • 文字折り返し (Flexible) • スクロール (SingleChildScrollView) • 文字サイズ固定 (TextScaler) ◦ 端末の設定に依存せず、固定サイズにできる。 ◦ ただし、これは最終手段。
24. Flutter のアクセシビリティ関連 (読み上げ) 漢字をうまく読めない、記号の読みが不自然、といったことが起こりやすい。 右の例だと、口座番号の数字を 「きゅうひゃくきゅうじゅうきゅう」 と読み上げる。 下記のような対応: • 読み専用のプロパティに読み方設定 (semanticLabel) • 上記の口座番号はパーツをバラして 「*」「*」「*」「*」「9」「９」「９」のように対応
25. まとめ
26. まとめ Flutter 開発楽しいよ! • モバイルアプリの開発は大変だが、 Flutter にすることで画面やロジックを統一して開発できる。 • アクセシビリティに配慮した実装も可能。 • アプリのビルド・配信の自動化もできる。
27. 参考情報
28. おすすめ書籍 Flutter実践開発 • 著者の 渡部 陽太 さんは、札幌在住。 • 開発に必要なことが一通り書かれている。 • 手を動かして学ぶことができる。
29. FlutterKaigi 2025 国内 Flutter カンファレンス最大手 • 2025年11月13日開催 ◦ 大手町, 東京 • プロポーザルも募集中 ◦ 2025年7月21日まで! 興味ある方は、ぜひ一緒に 参加しましょう! https://2025.flutterkaigi.jp/
30. FlutterKaigi mini FlutterKaigi 主催の 地方開催イベント • 運営の方とのお話しで、 札幌でもやりたいね、とのこと。 • そのうちやるかも? https://flutterkaigi.connpass.com/
31. GDG Sapporo Google Developer Groups の 札幌コミュニティ • 運営の方とのお話しで、 Flutter 回ができるかも? https://gdg.community.dev/gdg-sapporo/
32. End