Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
総計30万DLの個人開発Flutterアプリを支えるiOSウィジェット機能
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
CyberAgent
PRO
June 03, 2024
Programming
930
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
総計30万DLの個人開発Flutterアプリを支えるiOSウィジェット機能
2020年2月に時間割アプリ「Fulltan」をリリースしました。本セッションでは、Fulltanの主要機能の1つであるiOSウィジェットについてお話しします。
CyberAgent
PRO
June 03, 2024
More Decks by CyberAgent
See All by CyberAgent
AIを使った広告商品の開発と評価設計の話
cyberagentdevelopers
PRO
1
51
動画広告の効果を技術で改善
cyberagentdevelopers
PRO
1
57
なぜWINTICKETはマイクロサービスをやめたのか
cyberagentdevelopers
PRO
2
82
”AIを使う” から ”AIに任せる” へ ─ 開発プロセスを再設計してAIを組織標準にするまで
cyberagentdevelopers
PRO
2
420
Databricks 導入から Genie 活用まで、全部やった話
cyberagentdevelopers
PRO
0
1.9k
専任DEゼロからの データ基盤構築 - Databricks x IaC x AIで 進める「データの民主化」-
cyberagentdevelopers
PRO
1
1.4k
「エンジニア進化論」2028年の開発完全自動化、エンジニアはどう進化するか
cyberagentdevelopers
PRO
10
10k
NAB Show 2026 動画技術関連レポート / NAB Show 2026 Report
cyberagentdevelopers
PRO
1
750
Local LLM Meetup #1 Opening
cyberagentdevelopers
PRO
1
570
Other Decks in Programming
See All in Programming
[Dev Group Paris Octobre 26] Agentforce, SIforce, Claudeforce, Slackbot… on s'y retrouve ?
nabondance
0
110
sbt 2.0: takeoff
eed3si9n
0
160
When benchmarks go bad - what I learned from measuring performance wrong
hollycummins
0
220
npm との違いを手がかりにGo の依存管理を理解したい
optim
0
300
半永久的に提供し続けられるプライベートクラウドを目指して ― 利用者の認知負荷を抑えるAPI抽象化とハードウェア世代交代の基盤設計
tomokon
0
500
Verilogで学ぶCPU自作入門
uyuki234
8
4.1k
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
teyamagu
PRO
1
1k
ジョジョの世界をXRで再現する
mofurune
0
160
R8 の設定見直しでアプリサイズ削減
andpad
0
220
パズルゲームの作り方 / how to make puzzle games
kaityo256
PRO
2
290
GemmaをJevのように使ってみる / Use Gemma like Jev
kishida
5
790
[2026-09-26]空論ジェネリックプロセス~テスト資産とAIで紡ぐ、再現可能なパフォーマンスチューニングの話~
tosite
0
270
Featured
See All Featured
Designing Experiences People Love
moore
143
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
What the history of the web can teach us about the future of AI
inesmontani
PRO
2
740
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
58k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
370
Music & Morning Musume
bryan
48
7.4k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
450
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
Odyssey Design
rkendrick25
PRO
2
870
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時間後に 即座にタイムラインのリロードを要求 ・能動的なリロードはウィジェットに表示する授業情報 (科目名・教室・色)の変更があった時のみに要求
ウィジェットの予算は計画的に使おう👛 まとめ
ご清聴ありがとうございました!