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
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
870
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
PicoRuby on Rails
makicamel
2
130
Goで作る、開発・CI環境
sin392
0
230
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
140
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Facilitating Awesome Meetings
lara
54
6.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
KATA
mclloyd
30
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How STYLIGHT went responsive
nonsquared
100
5.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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
働くをもっと楽しく、創造的に