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
ロック画面Widgetを仮実装した話
Search
Wakabayashi Rikuma
October 24, 2022
Programming
0
250
ロック画面Widgetを仮実装した話
【Da Vinci Studio/ロコガイド/Chatwork/STORES】iOS Meetup
で発表した LT の資料です。
Wakabayashi Rikuma
October 24, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
ふつうの技術スタックでアート作品を作ってみる
akira888
1
850
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
210
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.3k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Designing Experiences People Love
moore
142
24k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Writing Fast Ruby
sferik
628
62k
Into the Great Unknown - MozCon
thekraken
40
1.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How STYLIGHT went responsive
nonsquared
100
5.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
What's in a price? How to price your products and services
michaelherold
246
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Transcript
【Da Vinci Studio/ロコガイド/Chatwork/STORES】iOS Meetup Chatwork株式会社 モバイルアプリケーション開発部 若林 陸真 ロック画面Widgetを仮実装した話
自己紹介 • Chatwork 株式会社 モバイルアプリケーション開発部 • 2021年4月にiOSエンジニアとして新卒入社 • スキューバダイビングの資格取得中 2 若林
陸真(わかばやし りくま) @wakakuuma
アジェンダ 1. Widgetについて 2. どういう表現ができるのか 3. 実装してみた 4. まとめ 3
01 Widgetについて
みなさんは覚えていますか? 2年前の衝撃を?
WWDC2020 Widget機能発表
• iOS iPadOS MacOSでWidgetが実装 • Widgetとは ◦ アプリを開かずとも画面から情報を確認でき る
• systemSmall • systemMedium • systemLarge • systemExtraLarge ◦ iPadOSのみ対応
8 これまでのWidgetFamily
9 これまでのWidgetFamily • systemSmall • systemMedium • systemLarge • systemExtraLarge
◦ iPadOSのみ対応
10 これまでのWidgetFamily • systemSmall • systemMedium • systemLarge • systemExtraLarge
◦ iPadOSのみ対応
11 これまでのWidgetFamily • systemSmall • systemMedium • systemLarge • systemExtraLarge
◦ iPadOSのみ対応
12 これまでのWidgetFamily • systemSmall • systemMedium • systemLarge • systemExtraLarge
◦ iPadOSのみ対応
そして今年 WWDC2022 ロック画面Widgetの発表
iOS16からロック画面にもWidgetが実装
• accessoryRectangular • accessoryCircular • accessoryInline • accessoryCorner ◦ watchOSのみ対応
15 新しく追加されたWidgetFamily
02 どういう表現ができるのか
• ホーム画面Widget ◦ 鮮やかな色と豊富な画像を使用してブランドを表現 • ロック画面Widget ◦ 抑制された色を使用 ▪ 常に表示される
▪ 様々なロック画面壁紙に対応できる必要がある 17 カラーについて
• 複数行のテキスト • 小さなグラフやチャート 18 accessoryRectangular
19 accessoryRectangularの例
20 accessoryRectangularの例 基本的には3行以内
• 簡単な情報 • ゲージ進捗状況の表示 21 accessoryCircular
22 accessoryCircularの例
23 accessoryCircularの例 • ゲージや進捗情報が表示されて いる場合は背景がない • 簡単な情報を表示している場合 は背景が設定されている
• 時計の上に表示される • 日付 + 設定したWidget 24 accessoryInline
25 accessoryInlineの例
26 accessoryInlineの例 システムイメージ+テキストがほどんど
03 実装してみた
• 既存のプロジェクトにWidget Extensionを追加 ◦ File > New > Target >
Widget Extension • Include Configuration Intent ◦ Widgetで表示する内容をユー ザーが選択できる ◦ 後々追加できる 28 実装方法
29 サポートしたいWidgetFamilyを宣言
30 それぞれに対応したViewを作成する EnvironmentObjectを追加
31 それぞれに対応したViewを作成する EnvironmentObjectを追加 WidgetFamilyごとにViewを書く
32 Previewをみながら実装する方法 表示したいWidgetとWidgetFamilyを指定してあげる
33 Previewをみながら実装する方法
• Widgetの内容 ◦ アカウントのタスクの情報を表示できる ◦ 更新頻度は15分に一回 ◦ ユーザーがWidgetをカスタムでき、タスクを表示したいアカウントを Widgetから切り替えることができる。 *今回実装したものは仮で実装したもので、実際のChatworkアプリとは関連のないものです
34 実際に実装してみた
35 全体像
36 accessoryRectangular 1~2行目はタスクの内容 3行目でタスク期限の表示
37 accessoryCircular • 文字サイズは最低サイズの11ポイント • 簡単な情報の表示なので、背景を表示 ◦ AccessoryWidgetBackground()で 一貫した背景を与えられる
38 写真を載せることもできるよ • ロック画面Widgetにも写真を載せることは 可能 ◦ ⚠透けてしまう
39 accessoryInline システムイメージ+テキスト
40 注意点 configurationDisplayNameのみ
• ロック画面にWidgetがあるだけでも価値がある ◦ 本来は情報を見せてあげるのが良い • WidgetはSwiftUIでの実装なので、まだ触ったことない人はいい 練習になる 41 実際に実装してみて感じたこと
04 まとめ
• iOS16からロック画面にWidgetを追加できるようになった • ホーム画面Widgetは鮮やかな色や画像でブランドを表現するのに対し、ロッ ク画面のWidgetは常に表示されるため、さまざまな背景に対応できるように 抑制された色で表示 • ロック画面Widgetにアイコンを表示するだけでもショートカットでアプリに 飛べるので価値はある •
Widget実装はSwiftUIの勉強にもなる 43 まとめ
None
働くをもっと楽しく、創造的に