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

by Wakabayashi Rikuma

Slide 1

Slide 1 text

【Da Vinci Studio/ロコガイド/Chatwork/STORES】iOS Meetup Chatwork株式会社モバイルアプリケーション開発部若林陸真ロック画面Widgetを仮実装した話

Slide 2

Slide 2 text

自己紹介 ● Chatwork 株式会社　モバイルアプリケーション開発部 ● 2021年4月にiOSエンジニアとして新卒入社 ● スキューバダイビングの資格取得中 2 若林陸真（わかばやしりくま）　@wakakuuma

Slide 3

Slide 3 text

アジェンダ 1. Widgetについて 2. どういう表現ができるのか 3. 実装してみた 4. まとめ 3

Slide 4

Slide 4 text

01 Widgetについて

Slide 5

Slide 5 text

みなさんは覚えていますか？ 2年前の衝撃を？

Slide 6

Slide 6 text

WWDC2020 Widget機能発表

Slide 7

Slide 7 text

● iOS iPadOS MacOSでWidgetが実装 ● Widgetとは ○ アプリを開かずとも画面から情報を確認できる

Slide 8

Slide 8 text

● systemSmall ● systemMedium ● systemLarge ● systemExtraLarge ○ iPadOSのみ対応 8 これまでのWidgetFamily

Slide 9

Slide 9 text

9 これまでのWidgetFamily ● systemSmall ● systemMedium ● systemLarge ● systemExtraLarge ○ iPadOSのみ対応

Slide 10

Slide 10 text

10 これまでのWidgetFamily ● systemSmall ● systemMedium ● systemLarge ● systemExtraLarge ○ iPadOSのみ対応

Slide 11

Slide 11 text

11 これまでのWidgetFamily ● systemSmall ● systemMedium ● systemLarge ● systemExtraLarge ○ iPadOSのみ対応

Slide 12

Slide 12 text

12 これまでのWidgetFamily ● systemSmall ● systemMedium ● systemLarge ● systemExtraLarge ○ iPadOSのみ対応

Slide 13

Slide 13 text

そして今年 WWDC2022 ロック画面Widgetの発表

Slide 14

Slide 14 text

iOS16からロック画面にもWidgetが実装

Slide 15

Slide 15 text

● accessoryRectangular ● accessoryCircular ● accessoryInline ● accessoryCorner ○ watchOSのみ対応 15 新しく追加されたWidgetFamily

Slide 16

Slide 16 text

02 どういう表現ができるのか

Slide 17

Slide 17 text

● ホーム画面Widget ○ 鮮やかな色と豊富な画像を使用してブランドを表現 ● ロック画面Widget ○ 抑制された色を使用 ■ 常に表示される ■ 様々なロック画面壁紙に対応できる必要がある 17 カラーについて

Slide 18

Slide 18 text

● 複数行のテキスト ● 小さなグラフやチャート 18 accessoryRectangular

Slide 19

Slide 19 text

19 accessoryRectangularの例

Slide 20

Slide 20 text

20 accessoryRectangularの例基本的には3行以内

Slide 21

Slide 21 text

● 簡単な情報 ● ゲージ進捗状況の表示 21 accessoryCircular

Slide 22

Slide 22 text

22 accessoryCircularの例

Slide 23

Slide 23 text

23 accessoryCircularの例 ● ゲージや進捗情報が表示されている場合は背景がない ● 簡単な情報を表示している場合は背景が設定されている

Slide 24

Slide 24 text

● 時計の上に表示される ● 日付 + 設定したWidget 24 accessoryInline

Slide 25

Slide 25 text

25 accessoryInlineの例

Slide 26

Slide 26 text

26 accessoryInlineの例システムイメージ+テキストがほどんど

Slide 27

Slide 27 text

03 実装してみた

Slide 28

Slide 28 text

● 既存のプロジェクトにWidget Extensionを追加 ○ File > New > Target > Widget Extension ● Include Conﬁguration Intent ○ Widgetで表示する内容をユーザーが選択できる ○ 後々追加できる 28 実装方法

Slide 29

Slide 29 text

29 サポートしたいWidgetFamilyを宣言

Slide 30

Slide 30 text

30 それぞれに対応したViewを作成する EnvironmentObjectを追加

Slide 31

Slide 31 text

31 それぞれに対応したViewを作成する EnvironmentObjectを追加 WidgetFamilyごとにViewを書く

Slide 32

Slide 32 text

32 Previewをみながら実装する方法表示したいWidgetとWidgetFamilyを指定してあげる

Slide 33

Slide 33 text

33 Previewをみながら実装する方法

Slide 34

Slide 34 text

● Widgetの内容 ○ アカウントのタスクの情報を表示できる ○ 更新頻度は15分に一回 ○ ユーザーがWidgetをカスタムでき、タスクを表示したいアカウントを Widgetから切り替えることができる。＊今回実装したものは仮で実装したもので、実際のChatworkアプリとは関連のないものです 34 実際に実装してみた

Slide 35

Slide 35 text

35 全体像

Slide 36

Slide 36 text

36 accessoryRectangular 1~2行目はタスクの内容 3行目でタスク期限の表示

Slide 37

Slide 37 text

37 accessoryCircular ● 文字サイズは最低サイズの11ポイント ● 簡単な情報の表示なので、背景を表示 ○ AccessoryWidgetBackground()で一貫した背景を与えられる

Slide 38

Slide 38 text

38 写真を載せることもできるよ ● ロック画面Widgetにも写真を載せることは可能 ○ ⚠透けてしまう

Slide 39

Slide 39 text

39 accessoryInline システムイメージ+テキスト

Slide 40

Slide 40 text

40 注意点 configurationDisplayNameのみ

Slide 41

Slide 41 text

● ロック画面にWidgetがあるだけでも価値がある ○ 本来は情報を見せてあげるのが良い ● WidgetはSwiftUIでの実装なので、まだ触ったことない人はいい練習になる 41 実際に実装してみて感じたこと

Slide 42

Slide 42 text

04 まとめ

Slide 43

Slide 43 text

● iOS16からロック画面にWidgetを追加できるようになった ● ホーム画面Widgetは鮮やかな色や画像でブランドを表現するのに対し、ロック画面のWidgetは常に表示されるため、さまざまな背景に対応できるように抑制された色で表示 ● ロック画面Widgetにアイコンを表示するだけでもショートカットでアプリに飛べるので価値はある ● Widget実装はSwiftUIの勉強にもなる 43 まとめ