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
200
ロック画面Widgetを仮実装した話
【Da Vinci Studio/ロコガイド/Chatwork/STORES】iOS Meetup
で発表した LT の資料です。
Wakabayashi Rikuma
October 24, 2022
Tweet
Share
Other Decks in Programming
See All in Programming
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
340
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
110
エンターテイメント業界で利用されるAWS
demuyan
0
200
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
360
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
690
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
雑に思考を整理する技術と効能
konifar
55
25k
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
640
Featured
See All Featured
How to Ace a Technical Interview
jacobian
272
22k
Facilitating Awesome Meetings
lara
41
5.6k
Statistics for Hackers
jakevdp
789
220k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Designing for Performance
lara
602
67k
Raft: Consensus for Rubyists
vanstee
132
6.2k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
Design by the Numbers
sachag
274
18k
The Mythical Team-Month
searls
215
42k
Optimizing for Happiness
mojombo
370
69k
Teambox: Starting and Learning
jrom
128
8.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
働くをもっと楽しく、創造的に