Apple Watch×Flutterをやってみる 〜実用にトライ〜

Transcript

1. Apple Watch×Flutter をやってみる 〜実用にトライ〜 2025/11/07 | Flutter×AI ぽちぽちLT 会 with ale in 梅田 あんぽぽ (@popo_lus)
2. 自己紹介 あんぽぽ (X:@popo_lus) 所属 大阪大学基礎工学部 システム科学科知能システム学コース 2 回生 アプリ開発サークル ぽちぽちのつどい Flutter, Hono(TS), Terraform, 自宅サーバーなど 最近はインフラ周りがたのしいです FlutterKaigi 2025 行きます すきなもの 吹奏楽 / 打楽器 / Nornis Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
3. みなさん！ Apple Watch 、 使っていますか？ Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
4. はじめに Flutter で作成したアプリとWatchOS 上で動作するアプリを 連携( データのやり取り) させるお話です Apple Watch 上でFlutter は動かないので注意！(SwiftUI を書きましょう ) どんなことができるか+ 実際にアプリに導入することを踏まえた話をします チュートリアルレベルのコードは省略します 既存のアプリへの導入を行いました フル阪ってアプリです Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
6. できたことの紹介 Apple Watch 上でのアプリの動作 SwiftUI をClaude(Github Copilot) くんに書いてもらいました Flutter アプリからのデータの取得 Flutter アプリが終了している際のデ ータの取得 Apple Watch×Flutter をやってみる 〜実用にトライ〜 0:00/ 0:18 あんぽぽ @popo_lus
7. Flutter →WatchOS へのデータの送信 いくつか方法があります 1. パッケージ "watch_connectivity" を使う 積極的に更新されてる( 最終更新が31 日前！) Android(WearOS) とiOS(WatchOS) 両対応！ Apple Watch →Flutter App へのデータ送信が非対応 2. パッケージ "flutter_watch_os_connectivity" を使う Apple Watch とFlutter 側で双方向のデータのやり取りが可能 情報がネット上に多い Android は非対応 最終更新が2 年前 Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
8. Flutter →WatchOS へのデータの送信 いくつか方法があります 3. 自分でMethodChannnel を用いてデータを受け渡す 怪しいパッケージに頼らなくて済む Flutter →iOS →WatchOS の二段階でデータを受け渡す必要がある めんどい ( リリース済みのアプリでサンプルになりそうなものは全てこのパターンだ った) 結局2. パッケージ "flutter_watch_os_connectivity" を採用することになりました Apple Watch →Flutter App へのデータ送信が必要そうだったので( 後述) Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
9. flutter_watch_os_connectivity を使ってみる Flutter 側 _flutterWatchOsConnectivity.configureAndActivateSession(); await _flutterWatchOsConnectivity.sendMessage({ "message": "This is a message sent from Flutter app!" }); WatchOS 側 func session(_ session: WCSession, didReceiveMessage message: [String : Any]) { print(message["message"]) } これでjson 形式のデータの送受信が出来た！ Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
10. 本当にこれで リリースできるWatch アプリが作れるのか？ Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
11. いくつかの問題がある 1. WatchOS アプリが終了している際にデータを受け取れない 現状の実装では、WatchOS アプリがバックグラウンドや終了状態の際にデ ータを受け取ることができない ユーザーがFlutter アプリを起動した際には最新のデータを送るようにして ほしい 2. Flutter アプリが終了している際にデータを受け取れない 逆に、Flutter アプリがバックグラウンドや終了状態の際にデータを受け取 ることができない Apple Watch で更新ボタンを押すと、Flutter アプリから最新のデータを取 得してほしい Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
12. WatchOS アプリが終了している際に データを受け取れない 解決策: Watch Connectivity のApplicationContext を使う sendMessage 即座にデータを送信したい時に使用するメソッド ただし、WatchOS アプリがバックグラウンドや終了状態の際にはデータを 受け取れない Map<String, Any> 形式のデータを送信可能 Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
13. WatchOS アプリが終了している際に データを受け取れない 解決策: Watch Connectivity のApplicationContext を使う updateApplicationContext WatchOS アプリがバックグラウンドや終了状態の際にもデータを受け取れ る 最新のデータのみを保持し、古いデータは上書きされる Map<String, Any> 形式のデータを送信可能 こちらの方が確実性が高い Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
14. Flutter アプリが終了している際に データを受け取れない 解決策1: バックグラウンド処理でデータを送信する Flutter アプリ側で定期的にバックグラウンド処理を行い、WatchOS アプリに データを送信する "background_fetch" パッケージなどを使用する ただし、iOS の制約によりバックグラウンド処理の頻度やタイミングは制限さ れる 思うようには動作しません Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
15. Flutter アプリが終了している際に データを受け取れない 解決策2: Watch Connectivity のsendMessage を使う WatchOS アプリ側からFlutter アプリにデータを要求する sendMessage メソッドを使用すると、 （なぜか）Flutter アプリが起動状態にな ってくれることがある Flutter 側で常にWatchOS アプリからのメッセージを待ち受けて、メッセー ジが来たら最新データを返すようにすればよい ただし、確実に動作するわけではないので注意が必要 Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
16. 正直言ってしまうと、 WatchOS アプリとFlutter アプリの連携は かなりめんどいです 安定しない ドキュメントが少ない サンプルコードが少ない 詳しい方がいれば教えてほしいです Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
17. それでも！！ Flutter×Apple Watch は！！ ロマンがある！！ ご清聴ありがとうございました Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus
18. Tips Sweetpad を導入しよう VSCode 拡張機能 Xcode でSwiftUI を書くときに補完が効くようになる コード補完、ビルド＆実行、Swift コードのフォーマット、シミュレータや 実機での実行、CodeLLDB を利用したデバッグ、テストなどなど...... 。 これを導入することで、Github Copilot の性能が格段に向上 Markdown でスライドを書こう marp を使いました Apple Watch×Flutter をやってみる 〜実用にトライ〜 あんぽぽ @popo_lus