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

by Koichi Kishimoto

Embed

Start on current slide

Slide 1

Slide 1 text

StudyplusにおけるFlutterアプリのApple Watch対応事例第9回 FlutterGakkai スポンサーセッション

Slide 2

Slide 2 text

名前：こういち（X：@koichi_mobile）所属：スタディプラス株式会社 25年新卒自己紹介

Slide 3

Slide 3 text

目的

Slide 4

Slide 4 text

Flutter開発者が「Apple Watch開発できそう」と思えること目的

Slide 5

Slide 5 text

会社・サービス紹介

Slide 6

Slide 6 text

スタディプラスの紹介当社は「学ぶ喜びを全ての人へ」をミッションに「学習者を第一に」を掲げ、学習管理プラットフォーム「Studyplus」と「Studyplus for School」を提供しています。先生による生徒の学習支援をサポート学習者の「学習の継続」を支援

Slide 7

Slide 7 text

学習記録機能 - 学習教材を選択 - ストップウォッチやタイマーで時間計測 - グラフで学習の可視化 - タイムラインで自分やフォロワーの記録確認成績管理、カレンダーで予定管理、大学の検索 Studyplusの既存機能

Slide 8

Slide 8 text

当社がFlutterで開発しているサービス Studyplus モバイルアプリ - Flutter Studyplus Webアプリ - Flutter Web

Slide 9

Slide 9 text

開発者ブログ：https://tech.studyplus.co.jp/ ポッドキャスト：https://open.spotify.com/show/3dKmSxheHocHwRA87eOOIN 開発者向けX：https://x.com/studyplus_dev など、いろいろ発信しています！ご興味ある方は「スタディプラスエンジニア」で検索。当社エンジニア各種SNS・情報発信

Slide 10

Slide 10 text

1. 背景・対応内容 2. 得られた結果 3. 仕様・デザイン決定 4. 実装時のポイント 5. まとめ目次

Slide 11

Slide 11 text

背景ユーザーの声「スマホだとYouTubeやInstagramなど他アプリに触れてしまう誘惑が大きい」「通学中の電車の中でサッと記録したい」

Slide 12

Slide 12 text

背景 Studyplusアプリ - 2025年4月にiOS / AndroidアプリをFlutterにリプレイス - 2025年8月にFlutterアプリをApple Watchに対応完了

Slide 13

Slide 13 text

- 教材を選択 - 学習時間をストップウォッチ、タイマーで計測 - 学習記録をスマホと連携対応内容・機能

Slide 14

Slide 14 text

得られた結果

Slide 15

Slide 15 text

- 総ユーザー：6,000程度 - お問い合わせやXでのフィードバック得られた結果

Slide 16

Slide 16 text

得られた結果

Slide 17

Slide 17 text

仕様・デザイン決定

Slide 18

Slide 18 text

各画面でユーザーが最も行いたいアクションは何か？仕様・デザイン決定

Slide 19

Slide 19 text

教材一覧画面（ iOS版） - 教材の追加、並び替え、編集、削除 - 教材カテゴリの追加、編集 - 集計単位の編集 - 教材タップで学習記録画面へ仕様・デザイン決定

Slide 20

Slide 20 text

教材一覧画面（ watchOS版） - 教材の追加、並び替え、編集、削除 - 教材カテゴリの追加、編集 - 集計単位の編集 - 教材タップで学習記録画面へ仕様・デザイン決定

Slide 21

Slide 21 text

各画面でユーザーが最も行いたいアクションは何か？不要な部分は削る仕様・デザイン決定

Slide 22

Slide 22 text

実装時のポイント

Slide 23

Slide 23 text

構成 Flutter ↔ iOS はMethod Channel ( Pigeon ) iOS ↔ watchOS はWCSession

Slide 24

Slide 24 text

開発の流れ 1. 既存アプリにwatchOSのターゲットを追加 2. Apple Watch側の実装（画面作成、iOSとの繋ぎ込み） 3. iOS側の実装（watchOS、Flutterとの繋ぎ込み） 4. Flutter側の実装（iOSとの繋ぎ込み、保存・反映処理）

Slide 25

Slide 25 text

実装時のはまりポイント

Slide 26

Slide 26 text

はまりポイント① Xcodeのビルドが通らない既存アプリとの連携やwatchOSのターゲット追加等でエラー発生

Slide 27

Slide 27 text

WCSession counterpart app not installed 発生場面既存アプリにwatchOSのターゲットを追加した時原因 Apple Watchのアプリがアプリ本体に組み込まれておらず、認識されていない

Slide 28

Slide 28 text

対処 Runnerの「Frameworks, Libraries, and Embedded Content」に WatchApp を追加 WCSession counterpart app not installed

Slide 29

Slide 29 text

発生場面既存アプリにwatchOSのターゲットを追加した時原因 Build Phaseに問題があり、循環エラーが発生している Cycle inside Runner; building could produce unreliable results

Slide 30

Slide 30 text

Cycle inside Runner; building could produce unreliable results 対処 Runner > Build Phase で「Run Script」を「Compile Sources」の前に持ってくる

Slide 31

Slide 31 text

はまりポイント① Xcodeのビルドが通らないスライド末尾にエラー対処集をまとめました

Slide 32

Slide 32 text

はまりポイント① Xcodeのビルドが通らないその他既存アプリ起因のエラー - 他のメンバーに聞く … - 気合い…

Slide 33

Slide 33 text

はまりポイント② コンフリクト解消開発期間が長くなると他の実装内容とのコンフリクトが増える - 初めて実装する場合はMVPにとどめる - SiriショートカットやWidget等のiOS実装と並行して作業しない - 設計・デザイン作成を予め行い、実装期間を短くする

Slide 34

Slide 34 text

はまりポイント③ iOS、watchOS両方のログが確認できない XcodeでiOS、watchOSアプリを実行すると片方のログしか確認できない - Macの場合は「コンソール」アプリで両OSのログを確認できる

Slide 35

Slide 35 text

iPhoneをケーブルでMacに繋ぐ両OSのログが確認可能はまりポイント③ iOS、watchOS両方のログが確認できない

Slide 36

Slide 36 text

watchOS、 iOS、 Flutterのそれぞれの接続部分の処理を実装例）watchOSの実装 watchOSからiOSに送信する処理 watchOSがiOSからデータを受け取った際の処理はまりポイント④ どこを実装しているかごちゃごちゃになる

Slide 37

Slide 37 text

今どこの何の処理を書いてるんだっけ？はまりポイント④ どこを実装しているかごちゃごちゃになる

Slide 38

Slide 38 text

混乱の原因「処理の流れ」と「実装の流れ」の違いはまりポイント④ どこを実装しているかごちゃごちゃになる

Slide 39

Slide 39 text

学習記録の保存処理処理の流れはまりポイント④ どこを実装しているかごちゃごちゃになる

Slide 40

Slide 40 text

学習記録の保存処理実装の流れはまりポイント④ どこを実装しているかごちゃごちゃになる

Slide 41

Slide 41 text

はまりポイント④ どこを実装しているかごちゃごちゃになる対策 - 先述の「コンソール」アプリ等で処理の流れを確認しながら実装を進める - どの部分を実装しているか常に念頭に置いておく

Slide 42

Slide 42 text

まとめ

Slide 43

Slide 43 text

- 背景、対応内容、得られた結果 - 仕様・デザイン決定時にはユーザーが行いたいアクションに注目 - 実装時のはまりポイント - 今回できなかった技術面の話：Flutter × Apple Watch 開発入門 FlutterアプリのApple Watch対応の第一歩の参考になれば ... まとめ Flutter × Apple Watch 開発入門

Slide 44

Slide 44 text

最後にお知らせ Flutterイベント開催します QRコードからぜひご参加ください☝

Slide 45

Slide 45 text

エラー対処集

Slide 46

Slide 46 text

原因 Apple Watchのアプリがアプリ本体に組み込まれておらず、認識されていない WCSession counterpart app not installed

Slide 47

Slide 47 text

対処 Runnerの「Frameworks, Libraries, and Embedded Content」に WatchApp を追加 WCSession counterpart app not installed

Slide 48

Slide 48 text

原因 Build Phaseに問題があり、循環エラーが発生している Cycle inside Runner; building could produce unreliable results

Slide 49

Slide 49 text

Cycle inside Runner; building could produce unreliable results 対処 Runner > Build Phase で「Run Script」を「Compile Sources」の前に持ってくる

Slide 50

Slide 50 text

原因 Apple WatchのBundle IDが適切に設定されていない WatchKit App doesn't contain any WatchKit Extensions whose WKAppBundleIdentifier matches.

Slide 51

Slide 51 text

対処 Apple Watch ターゲット > Info.plist > WKCompanionAppBundleldentifier の値をRunnerのBundle Identifierと合わせる WatchKit App doesn't contain any WatchKit Extensions whose WKAppBundleIdentifier matches.

Slide 52

Slide 52 text

原因 Apple Watch側のInfo.plistが設定されていない Build input file cannot be found.

Slide 53

Slide 53 text

対処 ios > WatchApp > Info.plistを追加 Build input file cannot be found.

Slide 54

Slide 54 text

原因 watchOSの対応バージョンが小さすぎる 'NavigationStack' is only available in watchOS 9.0 or newer

Slide 55

Slide 55 text

対処 General > Minimum Deployments > watchOS の値を大きくする 'NavigationStack' is only available in watchOS 9.0 or newer

Slide 56

Slide 56 text

現象 Simulatorでビルドした際にApple Watchで行った操作がiPhone側に反映されない原因 iPhoneとApple WatchのSimulatorがペアリングされていない Simulatorで検証できない

Slide 57

Slide 57 text

対処ペアリングした状態のSimulatorを登録 Apple Watch via iPhone で実行 Simulatorで検証できない