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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
CyberAgent
PRO
June 03, 2024
Programming
810
0
Share
総計30万DLの個人開発Flutterアプリを支えるiOSウィジェット機能
2020年2月に時間割アプリ「Fulltan」をリリースしました。本セッションでは、Fulltanの主要機能の1つであるiOSウィジェットについてお話しします。
CyberAgent
PRO
June 03, 2024
More Decks by CyberAgent
See All by CyberAgent
2026年度新卒技術研修 サイバーエージェントのデータベース 活用事例とパフォーマンス調査入門
cyberagentdevelopers
PRO
7
7.8k
マッチングアプリにおけるユーザー構成の変化は、事業KPIにどう影響しているのか
cyberagentdevelopers
PRO
1
80
Geo-Experiments : ABEMAはなぜ新しい宣伝の効果検証にチャレンジするのか
cyberagentdevelopers
PRO
2
770
ABEMA NEWSにおける PoCをAIプロダクト化する ビジネスリードエンジニアリング
cyberagentdevelopers
PRO
0
360
チーム開発の基礎_研究を事業につなげるために
cyberagentdevelopers
PRO
8
4.9k
生成AIの研究活用_AILab2025研修
cyberagentdevelopers
PRO
12
7.2k
生成AIを活用したデータ分析でいまできること
cyberagentdevelopers
PRO
2
480
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
490
2025年度 生成AI 実践編
cyberagentdevelopers
PRO
8
1.1k
Other Decks in Programming
See All in Programming
Don't Prompt Harder, Structure Better
kitasuke
0
650
存在論的プログラミング: 時間と存在を記述する
koriym
5
850
L’IA au service des devs : Anatomie d'un assistant de Code Review
toham
0
220
10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話
takuya_houshima
0
2.2k
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
kajitack
2
130
今こそ押さえておきたい アマゾンウェブサービス(AWS)の データベースの基礎 おもクラ #6版
satoshi256kbyte
1
230
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
shogogg
2
890
感情を設計する
ichimichi
5
1.3k
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
avosalmon
1
330
飯MCP
yusukebe
0
490
それはエンジニアリングの糧である:AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
nrslib
1
830
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
itsmedreamwalker
0
550
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
96
14k
Six Lessons from altMBA
skipperchong
29
4.2k
Building AI with AI
inesmontani
PRO
1
880
Making the Leap to Tech Lead
cromwellryan
135
9.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
720
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
710
Mobile First: as difficult as doing things right
swwweet
225
10k
What's in a price? How to price your products and services
michaelherold
247
13k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
520
Side Projects
sachag
455
43k
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時間後に 即座にタイムラインのリロードを要求 ・能動的なリロードはウィジェットに表示する授業情報 (科目名・教室・色)の変更があった時のみに要求
ウィジェットの予算は計画的に使おう👛 まとめ
ご清聴ありがとうございました!