iOS 17を待ちきれない方の為の現行OSでのウィジェットインタラクティブ術

13.8K Views

July 29, 23

スライド概要

iOS 17からWidget上でインタラクティブな動作を実現できるようになりました。インタラクティブ機能の登場の嬉しい気持ちと同様にiOS 17からしか使えない悲しい気持ちになった皆様、「安心してください」。私が現行OSでもウィジェットをインタラクティブに動作させる秘技をお教えします。

profile-image

I am a break dancer (b-boy)

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

iOS 17を待ちきれない方の為の 現行OSでのウィジェットインタラクティブ術 2023/07/28 クラスメソッド CX事業本部 フロントエンドチーム 平岡修

2.

こんばんわ

3.

自己紹介

4.

リルオッサ(平岡 修) CX事業本部 フロントエンドチーム iOSエンジニア 入社 2021/5~ ふるさと勤務(広島県) 奇妙な絵を書く ブレイクダンス 誰の役にも立たないアプリ開発 Twitter or X? @littleossa

5.

今日話すこと

6.

Widgetについて Widgetをインタラクティブ風に動作 させる革新的なアプリの紹介 iOS 17からWidgetで出来るようにな ること 秘技インタラクティブ風Widget まとめ

7.

Widgetについて

8.

Widgetとは、 アプリの情報を ・ホーム画面 ・ロック画面 ・「今日の表示」 でひと目で確認できる機能

9.

個人的には、 アプリに遷移する為の タップ領域も増えるので それも魅力のひとつと思っています

10.

既存プロジェクトへの導入も とても簡単!

11.

導入方法

12.

Widgetをプロジェクトに追加 Xcodeで File > New > Target を選択

13.

Widgetをプロジェクトに追加 Widgetで検索。 Widget Extensionを 選択し、 Next

14.

Widgetをプロジェクトに追加 ターゲット名を決めて、 Finish

15.

Widgetをプロジェクトに追加 Widget Extension スキームを Activate

16.

Widgetをプロジェクトに追加 プロジェクトに Widgetのファイルが 追加されています。

17.

Widgetをプロジェクトに追加 追加後、 すぐにビルドしても、 Widgetが表示されます

18.

Widgetでは、 SwiftUIを使用するので、 SwiftUI導入の第一歩に 良さそう

19.

SwiftUIなので、 Viewのカスタムも簡単!

21.

Widgetをプロジェクトに追加 簡単に Widget導入が出来ました!

22.

それはさておき

23.

ロック画面Widgetを 活用していますか?

24.

ロック画面Widgetとは、 iOS 16からの機能で ロック画面で アプリの情報を確認でき、 タップすることで 対象のアプリに遷移できる

25.

ロック画面Widgetとは、 ユーザーに一番近い エントリーポイントなので、 この一等地を獲得すれば、 確実にアプリの起動率は上がるが、 Widgetの配置できる数が限られて いる為、かなりの激戦区

26.

最大5個まで

27.

ロック画面Widget 導入方法も簡単!

28.

Widget構造体のbodyに .supportedFamilies モディファイアを付けて、 サポートしたいロック画面 用のFamilyを追加するだけ

30.

まだまだ対応していない アプリも多いので 今のうちに陣取りましょう!

31.

Widgetとは アプリの情報を ・ホーム画面 ・ロック画面 ・「今日の表示」 で一目で確認できる機能

32.

「今日の表示」????

33.

「今日の表示」とは ホーム画面 またはロック画面から 右にスワイプすると表示 この画面にもWidgetを配置可。 良く確認するアプリは置いておく と便利

34.

Widgetを インタラクティブ風に動作させる革新的なアプリの紹介

35.

Widget上で情報を見れるだけでは、 面白くない

36.

Widgetだけで完結する タスク管理アプリが欲しい、、

37.

そんな夢を叶えた 雑魚キャラTODOタスク専門の TODO管理アプリ WidgetTodo

38.

WidgetTodo Demo

39.

App Storeで ダウンロード可 WidgetTodo https://apps.apple.com/jp/app/widgettodo/id6447107090

40.

しかし

41.

WWDC23でWidgetが インタラクティブに動作する新規機能の 発表がありました

42.

あ、、、

43.

。。。

44.

実際、何が出来るようになるの? (まだ諦めないで)

45.

iOS 17からの Widgetで出来ること

46.

WWDC23 Bring widgets to life https://developer.apple.com/videos/play/wwdc2023/10028/ 上記セッションの内容を共有

47.

Chapters • Animations • Interactivity

48.

App Intentsの力を借りることで Widget上のボタンのアクションを インタラクティブに実行できる

49.

AppIntentsの力を借りるといっても、 環境設定等は不要、 コードで記述するだけ

51.

iOS 17時点、 Widget上で AppIntentがサポートしているのは、 • Button • Toggle その他のコントロールは機能しない

53.

たったこれだけで iOS17からWidget上での ボタンアクションを インタラクティブに動作できる (しかも、とてもスムーズに)

54.

つまり

55.

さよなら、WidgetTodo

56.

(ここで一同 涙)

57.

弊アプリ 供養の意味も込めて、 ここで秘技を伝授します

58.

インタラクティブ風 Widgetの基本

59.

❶ Widgetのボタン押下を 検知する

60.

Linkを使用する WidgetFamily • systemMedium • systemLarge • systemExtraLarge のみでLinkを複数配置できる

61.

https://developer.apple.com/documentation/swiftui/link

62.

URLにもよりますが、 • 関連するアプリをユニバーサルリンクで起動 • Webブラウザを起動

64.

LinkのdestinationURLは、 .onOpenURLモディファイアを使用して 受け取ることが出来ます 数字の1を押下した例を見ていきます

66.

❷ アプリを強制的に閉じる

67.

魔法のExtensionを作成します

69.

これでアプリを強制的にサスペンド状態に変更して、 アプリをバックグラウンドに移行させます

70.

これってAppleのPrivate APIなのでは?

71.

Private APIを利用しているアプリは、 リジェクトされるはず。 この機能を主機能として使っているが、 未だリジェクトされていない。 なので、許容範囲内?ということにしておく

72.

使用例の紹介

74.

数字の1を押下した場合、 アプリをバックグラウンドに移行

75.

❸ DBと連携する

76.

今回はCoreDataを使用します。 CoreDataの説明をすると長くなるので今回は省略します。 ポイント: Main AppとWidget Extensionで共有保存領域を使用する 為には、App Groupを使用する必要があります

77.

https://dev.classmethod.jp/articles/widget-coredate-introduction/ https://dev.classmethod.jp/articles/coredata-intent-widget/ https://dev.classmethod.jp/articles/coredata-widget-to-sheet/

78.

前提 今回登場するItemは、 numberというプロパティを持っています

79.

Main App側

85.

Widget側

87.

数字をタップすると、 該当する数字が Widgetから消える

88.

まとめ

89.

• iOS 17からButtonとToggleを使用してWidgetの インタラクティブな動作を実現出来る • さよなら、WidgetTodo

90.

おしまい