ロック画面Widgetを仮実装した話

【Da Vinci Studio/ロコガイド/Chatwork/STORES】iOS Meetup で発表した LT の資料です。

Transcript

1. 【Da Vinci Studio/ロコガイド/Chatwork/STORES】iOS Meetup Chatwork株式会社 モバイルアプリケーション開発部 若林 陸真 ロック画面Widgetを仮実装した話
2. 自己紹介 • Chatwork 株式会社　モバイルアプリケーション開発部 • 2021年4月にiOSエンジニアとして新卒入社 • スキューバダイビングの資格取得中 2 若林 陸真（わかばやし りくま）　@wakakuuma
3. アジェンダ 1. Widgetについて 2. どういう表現ができるのか 3. 実装してみた 4. まとめ 3
4. 01 Widgetについて
5. みなさんは覚えていますか？ 2年前の衝撃を？
6. WWDC2020 Widget機能発表
7. • iOS iPadOS MacOSでWidgetが実装 • Widgetとは ◦ アプリを開かずとも画面から情報を確認でき る
8. • systemSmall • systemMedium • systemLarge • systemExtraLarge ◦ iPadOSのみ対応 8 これまでのWidgetFamily
9. 9 これまでのWidgetFamily • systemSmall • systemMedium • systemLarge • systemExtraLarge ◦ iPadOSのみ対応
10. 10 これまでのWidgetFamily • systemSmall • systemMedium • systemLarge • systemExtraLarge ◦ iPadOSのみ対応
11. 11 これまでのWidgetFamily • systemSmall • systemMedium • systemLarge • systemExtraLarge ◦ iPadOSのみ対応
12. 12 これまでのWidgetFamily • systemSmall • systemMedium • systemLarge • systemExtraLarge ◦ iPadOSのみ対応
13. そして今年 WWDC2022 ロック画面Widgetの発表
14. iOS16からロック画面にもWidgetが実装
15. • accessoryRectangular • accessoryCircular • accessoryInline • accessoryCorner ◦ watchOSのみ対応 15 新しく追加されたWidgetFamily
16. 02 どういう表現ができるのか
17. • ホーム画面Widget ◦ 鮮やかな色と豊富な画像を使用してブランドを表現 • ロック画面Widget ◦ 抑制された色を使用 ▪ 常に表示される ▪ 様々なロック画面壁紙に対応できる必要がある 17 カラーについて
18. • 複数行のテキスト • 小さなグラフやチャート 18 accessoryRectangular
19. 19 accessoryRectangularの例
20. 20 accessoryRectangularの例 基本的には3行以内
21. • 簡単な情報 • ゲージ進捗状況の表示 21 accessoryCircular
22. 22 accessoryCircularの例
23. 23 accessoryCircularの例 • ゲージや進捗情報が表示されて いる場合は背景がない • 簡単な情報を表示している場合 は背景が設定されている
24. • 時計の上に表示される • 日付 + 設定したWidget 24 accessoryInline
25. 25 accessoryInlineの例
26. 26 accessoryInlineの例 システムイメージ+テキストがほどんど
27. 03 実装してみた
28. • 既存のプロジェクトにWidget Extensionを追加 ◦ File > New > Target > Widget Extension • Include Configuration Intent ◦ Widgetで表示する内容をユー ザーが選択できる ◦ 後々追加できる 28 実装方法
29. 29 サポートしたいWidgetFamilyを宣言
30. 30 それぞれに対応したViewを作成する EnvironmentObjectを追加
31. 31 それぞれに対応したViewを作成する EnvironmentObjectを追加 WidgetFamilyごとにViewを書く
32. 32 Previewをみながら実装する方法 表示したいWidgetとWidgetFamilyを指定してあげる
33. 33 Previewをみながら実装する方法
34. • Widgetの内容 ◦ アカウントのタスクの情報を表示できる ◦ 更新頻度は15分に一回 ◦ ユーザーがWidgetをカスタムでき、タスクを表示したいアカウントを Widgetから切り替えることができる。 ＊今回実装したものは仮で実装したもので、実際のChatworkアプリとは関連のないものです 34 実際に実装してみた
35. 35 全体像
36. 36 accessoryRectangular 1~2行目はタスクの内容 3行目でタスク期限の表示
37. 37 accessoryCircular • 文字サイズは最低サイズの11ポイント • 簡単な情報の表示なので、背景を表示 ◦ AccessoryWidgetBackground()で 一貫した背景を与えられる
38. 38 写真を載せることもできるよ • ロック画面Widgetにも写真を載せることは 可能 ◦ ⚠透けてしまう
39. 39 accessoryInline システムイメージ+テキスト
40. 40 注意点 configurationDisplayNameのみ
41. • ロック画面にWidgetがあるだけでも価値がある ◦ 本来は情報を見せてあげるのが良い • WidgetはSwiftUIでの実装なので、まだ触ったことない人はいい 練習になる 41 実際に実装してみて感じたこと
42. 04 まとめ
43. • iOS16からロック画面にWidgetを追加できるようになった • ホーム画面Widgetは鮮やかな色や画像でブランドを表現するのに対し、ロッ ク画面のWidgetは常に表示されるため、さまざまな背景に対応できるように 抑制された色で表示 • ロック画面Widgetにアイコンを表示するだけでもショートカットでアプリに 飛べるので価値はある • Widget実装はSwiftUIの勉強にもなる 43 まとめ
45. 働くをもっと楽しく、創造的に