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
420
総計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
The Composable Architecture (TCA) を用いたAmebaのリアーキテクチャ
cyberagentdevelopers
PRO
0
10
SwiftUI導入から1年、SwiftUI導入とVueFluxライクな状態管理
cyberagentdevelopers
PRO
0
5
大規模プロジェクトにおける段階的な技術刷新
cyberagentdevelopers
PRO
0
9
SwiftUI移行のためのインプレッショントラッキング基板の構築
cyberagentdevelopers
PRO
0
7
Unity6世代のアップデートをサラッとまとめ
cyberagentdevelopers
PRO
0
320
Unity6の新機能 STPについての話
cyberagentdevelopers
PRO
0
180
Unity 6 シェーダーWarmupガイド
cyberagentdevelopers
PRO
0
210
Unity6 の Android周辺の アップデートについて
cyberagentdevelopers
PRO
1
210
ジャンプTOONにおけるサイトマップの自動生成手法について
cyberagentdevelopers
PRO
0
63
Other Decks in Programming
See All in Programming
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
良いコードレビューとは
danimal141
7
2.7k
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
220
DevNexus - Create AI Infused Java Apps with LangChain4j
kdubois
0
120
GoとPHPのインターフェイスの違い
shimabox
2
210
Swift Testingのモチベを上げたい
stoticdev
2
150
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
340
Unity Android XR入門
sakutama_11
0
180
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
970
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
210
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
0
330
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Embracing the Ebb and Flow
colly
84
4.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
RailsConf 2023
tenderlove
29
1k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Faster Mobile Websites
deanohume
306
31k
The Cult of Friendly URLs
andyhume
78
6.2k
The Language of Interfaces
destraynor
156
24k
4 Signs Your Business is Dying
shpigford
183
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Rails Girls Zürich Keynote
gr2m
94
13k
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時間後に 即座にタイムラインのリロードを要求 ・能動的なリロードはウィジェットに表示する授業情報 (科目名・教室・色)の変更があった時のみに要求
ウィジェットの予算は計画的に使おう👛 まとめ
ご清聴ありがとうございました!