Studyplusにおける Flutterアプリ Apple Watch対応事例

第9回 FlutterGakkai スポンサーセッション

Transcript

1. StudyplusにおけるFlutterアプリのApple Watch対応事例 第9回 FlutterGakkai スポンサーセッション
2. 名前：こういち（X：@koichi_mobile） 所属：スタディプラス株式会社 25年新卒 自己紹介
3. 目的
4. Flutter開発者が「Apple Watch開発できそう 」と思えること 目的
5. 会社・サービス紹介
6. スタディプラス の紹介 当社は「学ぶ喜びを全ての人へ」 をミッションに「学習者を第一に」 を掲げ、学習管理プ ラットフォーム「Studyplus」と「Studyplus for School」を提供しています。 先生による生徒の学習支援をサポート 学習者の「学習の継続」を支援
7. 学習記録機能 - 学習教材を選択 - ストップウォッチやタイマーで時間計測 - グラフで学習の可視化 - タイムラインで自分やフォロワーの記録確認 成績管理、カレンダーで予定管理、大学の検索 Studyplusの既存機能
8. 当社がFlutterで開発しているサービス Studyplus モバイルアプリ - Flutter Studyplus Webアプリ - Flutter Web
9. 開発者ブログ：https://tech.studyplus.co.jp/ ポッドキャスト：https://open.spotify.com/show/3dKmSxheHocHwRA87eOOIN 開発者向けX：https://x.com/studyplus_dev など、いろいろ発信しています！ ご興味ある方は「スタディプラス エンジニア 」で検索。 当社エンジニア各種SNS・情報発信
10. 1. 背景・対応内容 2. 得られた結果 3. 仕様・デザイン決定 4. 実装時のポイント 5. まとめ 目次
11. 背景 ユーザーの声 「スマホだとYouTubeやInstagramなど他アプリに触れてしまう誘惑が大きい」 「通学中の電車の中でサッと記録したい」
12. 背景 Studyplusアプリ - 2025年4月にiOS / AndroidアプリをFlutterにリプレイス - 2025年8月にFlutterアプリをApple Watchに対応完了
13. - 教材を選択 - 学習時間をストップウォッチ、タイマーで計測 - 学習記録をスマホと連携 対応内容・機能
14. 得られた結果
15. - 総ユーザー：6,000程度 - お問い合わせやXでのフィードバック 得られた結果
16. 得られた結果
17. 仕様・デザイン決定
18. 各画面でユーザーが最も行いたいアクション は何か？ 仕様・デザイン決定
19. 教材一覧画面（ iOS版 ） - 教材の追加、並び替え、編集、削除 - 教材カテゴリの追加、編集 - 集計単位の編集 - 教材タップで学習記録画面へ 仕様・デザイン決定
20. 教材一覧画面（ watchOS版 ） - 教材の追加、並び替え、編集、削除 - 教材カテゴリの追加、編集 - 集計単位の編集 - 教材タップで学習記録画面へ 仕様・デザイン決定
21. 各画面でユーザーが最も行いたいアクション は何か？ 不要な部分は削る 仕様・デザイン決定
22. 実装時のポイント
23. 構成 Flutter ↔ iOS はMethod Channel ( Pigeon ) iOS ↔ watchOS はWCSession
24. 開発の流れ 1. 既存アプリにwatchOSのターゲットを追加 2. Apple Watch側の実装（画面作成、iOSとの繋ぎ込み） 3. iOS側の実装（watchOS、Flutterとの繋ぎ込み） 4. Flutter側の実装（iOSとの繋ぎ込み、保存・反映処理）
25. 実装時のはまりポイント
26. はまりポイント① Xcodeのビルドが通らない 既存アプリとの連携やwatchOSのターゲット追加等でエラー発生
27. WCSession counterpart app not installed 発生場面 既存アプリにwatchOSのターゲットを追加した時 原因 Apple Watchのアプリがアプリ本体に組み込まれておらず、認識されていない
28. 対処 Runnerの「Frameworks, Libraries, and Embedded Content」に WatchApp を追加 WCSession counterpart app not installed
29. 発生場面 既存アプリにwatchOSのターゲットを追加した時 原因 Build Phaseに問題があり、循環エラーが発生している Cycle inside Runner; building could produce unreliable results
30. Cycle inside Runner; building could produce unreliable results 対処 Runner > Build Phase で「Run Script」を 「Compile Sources」の前に持ってくる
31. はまりポイント① Xcodeのビルドが通らない スライド末尾にエラー対処集をまとめました
32. はまりポイント① Xcodeのビルドが通らない その他既存アプリ起因のエラー - 他のメンバーに聞く … - 気合い…
33. はまりポイント② コンフリクト解消 開発期間が長くなると他の実装内容とのコンフリクトが増える - 初めて実装する場合はMVPにとどめる - SiriショートカットやWidget等のiOS実装と並行して作業しない - 設計・デザイン作成を予め行い、実装期間を短くする
34. はまりポイント③ iOS、watchOS両方のログが確認できない XcodeでiOS、watchOSアプリを実行すると片方のログしか確認できない - Macの場合は「コンソール」アプリで両OSのログを確認できる
35. iPhoneをケーブルでMacに繋ぐ 両OSのログが確認可能 はまりポイント③ iOS、watchOS両方のログが確認できない
36. watchOS、 iOS、 Flutterのそれぞれの接続部分の処理を実装 例）watchOSの実装 watchOSからiOSに送信する処理 watchOSがiOSからデータを受け取った際 の処理 はまりポイント④ どこを実装しているかごちゃごちゃになる
37. 今どこの何の処理を書いてるんだっけ？ はまりポイント④ どこを実装しているかごちゃごちゃになる
38. 混乱の原因 「処理の流れ」と「実装の流れ」の違い はまりポイント④ どこを実装しているかごちゃごちゃになる
39. 学習記録の保存処理 処理の流れ はまりポイント④ どこを実装しているかごちゃごちゃになる
40. 学習記録の保存処理 実装の流れ はまりポイント④ どこを実装しているかごちゃごちゃになる
41. はまりポイント④ どこを実装しているかごちゃごちゃになる 対策 - 先述の「コンソール」アプリ等で処理の流れを確認しながら実装を進める - どの部分を実装しているか常に念頭に置いておく
42. まとめ
43. - 背景、対応内容、得られた結果 - 仕様・デザイン決定時にはユーザーが行いたいアクション に注目 - 実装時のはまりポイント - 今回できなかった技術面の話：Flutter × Apple Watch 開発入門 FlutterアプリのApple Watch対応の第一歩の参考になれば ... まとめ Flutter × Apple Watch 開発入門
44. 最後にお知らせ Flutterイベント開催します QRコードからぜひご参加ください☝
45. エラー対処集
46. 原因 Apple Watchのアプリがアプリ本体に組み込まれておらず、認識されていない WCSession counterpart app not installed
47. 対処 Runnerの「Frameworks, Libraries, and Embedded Content」に WatchApp を追加 WCSession counterpart app not installed
48. 原因 Build Phaseに問題があり、循環エラーが発生している Cycle inside Runner; building could produce unreliable results
49. Cycle inside Runner; building could produce unreliable results 対処 Runner > Build Phase で「Run Script」を 「Compile Sources」の前に持ってくる
50. 原因 Apple WatchのBundle IDが適切に設定されていない WatchKit App doesn't contain any WatchKit Extensions whose WKAppBundleIdentifier matches.
51. 対処 Apple Watch ターゲット > Info.plist > WKCompanionAppBundleldentifier の値をRunnerのBundle Identifierと合わせる WatchKit App doesn't contain any WatchKit Extensions whose WKAppBundleIdentifier matches.
52. 原因 Apple Watch側のInfo.plistが設定されていない Build input file cannot be found.
53. 対処 ios > WatchApp > Info.plistを追加 Build input file cannot be found.
54. 原因 watchOSの対応バージョンが小さすぎる 'NavigationStack' is only available in watchOS 9.0 or newer
55. 対処 General > Minimum Deployments > watchOS の値を大きくする 'NavigationStack' is only available in watchOS 9.0 or newer
56. 現象 Simulatorでビルドした際にApple Watchで行った操作がiPhone側に反映されない 原因 iPhoneとApple WatchのSimulatorがペアリングされていない Simulatorで検証できない
57. 対処 ペアリングした状態のSimulatorを登録 Apple Watch via iPhone で実行 Simulatorで検証できない