Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
総計30万DLの個人開発Flutterアプリを支えるiOSウィジェット機能
Search
CyberAgent
PRO
June 03, 2024
Programming
0
220
総計30万DLの個人開発Flutterアプリを支えるiOSウィジェット機能
2020年2月に時間割アプリ「Fulltan」をリリースしました。本セッションでは、Fulltanの主要機能の1つであるiOSウィジェットについてお話しします。
CyberAgent
PRO
June 03, 2024
Tweet
Share
More Decks by CyberAgent
See All by CyberAgent
KDD2024参加報告
cyberagentdevelopers
PRO
1
480
FastlyとfalcoでNode.jsレスなWebサーバーの構築: IPTV版ABEMAアプリのインフラ刷新
cyberagentdevelopers
PRO
1
71
Amebaチョイス立ち上げの裏側 ~ 依存システムとの闘い ~
cyberagentdevelopers
PRO
1
97
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cyberagentdevelopers
PRO
2
38
コードメトリクス計測による課題可視化と品質確保
cyberagentdevelopers
PRO
1
64
サイバーエージェントにおけるインナーソーシングの取り組み
cyberagentdevelopers
PRO
3
1.6k
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
6
3.2k
クリエイティブ制作領域の データ活用を0から推進した話
cyberagentdevelopers
PRO
3
930
opt-in camera:カメラによる行動計測におけるオプトインの仕組みの実現
cyberagentdevelopers
PRO
3
920
Other Decks in Programming
See All in Programming
20241004 モノタロウ式~ドメインモデリングとリアーキテクチャ
monotaro
PRO
2
650
空間の中でアイドルとレッスンする技術 - 1st "Vision" / Spatial Lesson technologies with my idol - 1st "Vision"
banjun
PRO
0
240
Mercari AI/LLM Hackathon TeamBの発表資料
imaikosuke
0
180
CSC509 Lecture 05
javiergs
PRO
0
180
個人開発で使ってるやつを紹介する回
yohfee
1
730
perl for shell, awk and sed programmers
mackee
2
920
Memory API: Patterns, Use Cases, and Performance
josepaumard
2
200
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
130
CSC305 Lecture 09
javiergs
PRO
0
110
デバッグの話 / Debugging for Beginners
kaityo256
PRO
8
720
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
430
Quarto Clean Theme
nicetak
0
220
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Making Projects Easy
brettharned
115
5.9k
The Language of Interfaces
destraynor
154
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
A better future with KSS
kneath
237
17k
GraphQLとの向き合い方2022年版
quramy
43
13k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Transcript
総計30万DLの個人開発Flutterアプリを支える iOSウィジェット機能 CA.swift #20 株式会社タップル Ogata Hiroki
緒方 裕樹 / Ogata Hiroki CyberAgent 24卒入社 タップルのiOSエンジニア iOS Flutter
寿司 温泉 ゲーム :@icoriha
話すこと ・iOSのホームウィジェットの更新のしくみ ・自作アプリのウィジェットの実装のイマイチなところ ・↑その改善案 今回話さないこと ・ウィジェット導入の具体的な手順 ・Flutter側からネイティブのコードを呼ぶ方法
題材アプリ
個人制作の時間割アプリ 2020年2月リリース 2024年春 30万DL 突破!
🤨?
None
🍺🤔 Flutter + 部分的にネイティブという構成
🍺 =
ViewModel Model View View 構成 Flutter側から ネイティブコードを呼ぶには... Method Channelという機能を使います →今回は解説しません
WidgetKit側 本体アプリ側
画像引用元: https://developer.apple.com/jp/documentation/widgetkit/keeping-a-widget-up-to-date/ 公式ドキュメントより引用 前提 ・本体アプリの状態をウィジェットに リアルタイムに反映させるのは難しい ・ウィジェットの表示スケジュールは タイムライン※で管理されているため ※ウィジェットに表示される 一連の内容更新を管理するための概念
TimelineProvider プロトコル ・WidgetKitの要求を受けTimelineオブジェクトを返す(getTimeline)プロトコル WidgetCenter クラス ・ウィジェットのtimelineをリロードするために使用される(他の役割もある) 関連用語と主な役割 TimelineEntry プロトコル ・entriesの各要素はこれに準拠させる必要がある。
日時とその日時にウィジェットに表示させたい内容の情報を含む。 Timeline クラス ・直近で表示させる一連のウィジェットの内容(entries)と、 それらの表示完了後、次にどのタイミングでタイムラインを 再リロードさせたいか(policy: TimelineReloadPolicy)を持つ。
タイムラインのリロードには2種類ある 🕰Timelineクラスのpolicyに基づく計画的なリロード ・予測が容易なウィジェットの更新に使用 ・例:一定時間毎にAPIを叩いて天気情報を取得して表示 🎇WidgetCenterのreload系メソッド※による能動的なリロード ・突発的なアプリの更新によるウィジェットの更新に利用 ・例:ユーザーの操作内容を反映 ※ WidgetCenter.shared.reloadAllTimelines() など
計画的リロードで更新間隔10秒とかで定期更新していけば ウィジェットを常に最新の状態にキープできるのでは🤔
最終的にウィジェットの更新タイミングの決定権はシステムが持つ。 バッテリーなどのリソースを適切に管理するために、 各ウィジェットにはそれぞれ24時間単位の枠で「予算」が設定されている。 🚨無計画なタイムラインのリロードに注意 ・予算はタイムラインのリロードにより消費される ・予算がなくなると場合はその枠の間リロードが制限される →ウィジェットが更新されない現象につながる
今から見せるコードには改善点があります
自作アプリの例(一部改変) 本アプリでは授業情報(科目名・教室・出席記録など)の更新時に能動的な更新を要求している
☔ユーザーからの不具合報告 曜日が切り替わってもすぐにウィジェットが更新されない
考えられる原因 本アプリでは授業情報(科目名・教室・出席記録など)の更新時に能動的な更新を要求している ↑5時間後に タイムラインのリロードを要求 ↓ウィジェットには表示しない情報
無計画なタイムラインのリロードで 予算を消費してしまっている可能性が高い 💸
改善案 ・計画的なリロードは5時間おきではなく 曜日の変わるタイミングのみに要求 ↑この先5時間分のウィジェット内容を生成 ↑5時間後に 即座にタイムラインのリロードを要求 ・能動的なリロードはウィジェットに表示する授業情報 (科目名・教室・色)の変更があった時のみに要求
ウィジェットの予算は計画的に使おう👛 まとめ
ご清聴ありがとうございました!