総計30万DLの個人開発Flutterアプリを支えるiOSウィジェット機能

2020年2月に時間割アプリ「Fulltan」をリリースしました。本セッションでは、Fulltanの主要機能の1つであるiOSウィジェットについてお話しします。

Transcript

1. 総計30万DLの個人開発Flutterアプリを支える iOSウィジェット機能 CA.swift #20 株式会社タップル Ogata Hiroki
2. 緒方 裕樹 / Ogata Hiroki CyberAgent 24卒入社 タップルのiOSエンジニア iOS Flutter 寿司 温泉 ゲーム :@icoriha
3. 話すこと ・iOSのホームウィジェットの更新のしくみ ・自作アプリのウィジェットの実装のイマイチなところ ・↑その改善案 今回話さないこと ・ウィジェット導入の具体的な手順 ・Flutter側からネイティブのコードを呼ぶ方法
4. 題材アプリ
5. 個人制作の時間割アプリ 2020年2月リリース 2024年春 30万DL 突破！
6. 🤨?
8. 🍺🤔 Flutter + 部分的にネイティブという構成
9. 🍺 ＝
10. ViewModel Model View View 構成 Flutter側から ネイティブコードを呼ぶには... Method Channelという機能を使います →今回は解説しません WidgetKit側 本体アプリ側
11. 画像引用元: https://developer.apple.com/jp/documentation/widgetkit/keeping-a-widget-up-to-date/ 公式ドキュメントより引用 前提 ・本体アプリの状態をウィジェットに 　リアルタイムに反映させるのは難しい ・ウィジェットの表示スケジュールは 　タイムライン※で管理されているため 　※ウィジェットに表示される 　一連の内容更新を管理するための概念
12. TimelineProvider プロトコル ・WidgetKitの要求を受けTimelineオブジェクトを返す（getTimeline）プロトコル WidgetCenter クラス ・ウィジェットのtimelineをリロードするために使用される（他の役割もある） 関連用語と主な役割 TimelineEntry プロトコル ・entriesの各要素はこれに準拠させる必要がある。 　日時とその日時にウィジェットに表示させたい内容の情報を含む。 Timeline クラス ・直近で表示させる一連のウィジェットの内容（entries）と、 　それらの表示完了後、次にどのタイミングでタイムラインを 　再リロードさせたいか（policy: TimelineReloadPolicy）を持つ。
13. タイムラインのリロードには2種類ある 🕰Timelineクラスのpolicyに基づく計画的なリロード ・予測が容易なウィジェットの更新に使用 ・例：一定時間毎にAPIを叩いて天気情報を取得して表示 🎇WidgetCenterのreload系メソッド※による能動的なリロード ・突発的なアプリの更新によるウィジェットの更新に利用 ・例：ユーザーの操作内容を反映 ※ WidgetCenter.shared.reloadAllTimelines() など
14. 計画的リロードで更新間隔10秒とかで定期更新していけば ウィジェットを常に最新の状態にキープできるのでは🤔
15. 最終的にウィジェットの更新タイミングの決定権はシステムが持つ。 バッテリーなどのリソースを適切に管理するために、 各ウィジェットにはそれぞれ24時間単位の枠で「予算」が設定されている。 🚨無計画なタイムラインのリロードに注意 ・予算はタイムラインのリロードにより消費される ・予算がなくなると場合はその枠の間リロードが制限される 　→ウィジェットが更新されない現象につながる
16. 今から見せるコードには改善点があります
17. 自作アプリの例（一部改変） 本アプリでは授業情報（科目名・教室・出席記録など）の更新時に能動的な更新を要求している
18. ☔ユーザーからの不具合報告 曜日が切り替わってもすぐにウィジェットが更新されない
19. 考えられる原因 本アプリでは授業情報（科目名・教室・出席記録など）の更新時に能動的な更新を要求している ↑5時間後に タイムラインのリロードを要求 ↓ウィジェットには表示しない情報
20. 無計画なタイムラインのリロードで 予算を消費してしまっている可能性が高い 💸
21. 改善案 ・計画的なリロードは5時間おきではなく 　曜日の変わるタイミングのみに要求 ↑この先5時間分のウィジェット内容を生成 ↑5時間後に 即座にタイムラインのリロードを要求 ・能動的なリロードはウィジェットに表示する授業情報 （科目名・教室・色）の変更があった時のみに要求
22. ウィジェットの予算は計画的に使おう👛 まとめ
23. ご清聴ありがとうございました！