iOS 17を待ちきれない方の為の現行OSでのウィジェットインタラクティブ術
18.9K Views
July 29, 23
スライド概要
iOS 17からWidget上でインタラクティブな動作を実現できるようになりました。インタラクティブ機能の登場の嬉しい気持ちと同様にiOS 17からしか使えない悲しい気持ちになった皆様、「安心してください」。私が現行OSでもウィジェットをインタラクティブに動作させる秘技をお教えします。
I am a break dancer (b-boy)
関連スライド
各ページのテキスト
iOS 17を待ちきれない方の為の 現行OSでのウィジェットインタラクティブ術 2023/07/28 クラスメソッド CX事業本部 フロントエンドチーム 平岡修
こんばんわ
自己紹介
リルオッサ(平岡 修) CX事業本部 フロントエンドチーム iOSエンジニア 入社 2021/5~ ふるさと勤務(広島県) 奇妙な絵を書く ブレイクダンス 誰の役にも立たないアプリ開発 Twitter or X? @littleossa
今日話すこと
Widgetについて Widgetをインタラクティブ風に動作 させる革新的なアプリの紹介 iOS 17からWidgetで出来るようにな ること 秘技インタラクティブ風Widget まとめ
Widgetについて
Widgetとは、 アプリの情報を ・ホーム画面 ・ロック画面 ・「今日の表示」 でひと目で確認できる機能
個人的には、 アプリに遷移する為の タップ領域も増えるので それも魅力のひとつと思っています
既存プロジェクトへの導入も とても簡単！
導入方法
Widgetをプロジェクトに追加 Xcodeで File > New > Target を選択
Widgetをプロジェクトに追加 Widgetで検索。 Widget Extensionを 選択し、 Next
Widgetをプロジェクトに追加 ターゲット名を決めて、 Finish
Widgetをプロジェクトに追加 Widget Extension スキームを Activate
Widgetをプロジェクトに追加 プロジェクトに Widgetのファイルが 追加されています。
Widgetをプロジェクトに追加 追加後、 すぐにビルドしても、 Widgetが表示されます
Widgetでは、 SwiftUIを使用するので、 SwiftUI導入の第一歩に 良さそう
SwiftUIなので、 Viewのカスタムも簡単！
Widgetをプロジェクトに追加 簡単に Widget導入が出来ました！
それはさておき
ロック画面Widgetを 活用していますか？
ロック画面Widgetとは、 iOS 16からの機能で ロック画面で アプリの情報を確認でき、 タップすることで 対象のアプリに遷移できる
ロック画面Widgetとは、 ユーザーに一番近い エントリーポイントなので、 この一等地を獲得すれば、 確実にアプリの起動率は上がるが、 Widgetの配置できる数が限られて いる為、かなりの激戦区
最大5個まで
ロック画面Widget 導入方法も簡単！
Widget構造体のbodyに .supportedFamilies モディファイアを付けて、 サポートしたいロック画面 用のFamilyを追加するだけ
まだまだ対応していない アプリも多いので 今のうちに陣取りましょう！
Widgetとは アプリの情報を ・ホーム画面 ・ロック画面 ・「今日の表示」 で一目で確認できる機能
「今日の表示」????
「今日の表示」とは ホーム画面 またはロック画面から 右にスワイプすると表示 この画面にもWidgetを配置可。 良く確認するアプリは置いておく と便利
Widgetを インタラクティブ風に動作させる革新的なアプリの紹介
Widget上で情報を見れるだけでは、 面白くない
Widgetだけで完結する タスク管理アプリが欲しい、、
そんな夢を叶えた 雑魚キャラTODOタスク専門の TODO管理アプリ WidgetTodo
WidgetTodo Demo
App Storeで ダウンロード可 WidgetTodo https://apps.apple.com/jp/app/widgettodo/id6447107090
しかし
WWDC23でWidgetが インタラクティブに動作する新規機能の 発表がありました
あ、、、
。。。
実際、何が出来るようになるの？ (まだ諦めないで)
iOS 17からの Widgetで出来ること
WWDC23 Bring widgets to life https://developer.apple.com/videos/play/wwdc2023/10028/ 上記セッションの内容を共有
Chapters • Animations • Interactivity
App Intentsの力を借りることで Widget上のボタンのアクションを インタラクティブに実行できる
AppIntentsの力を借りるといっても、 環境設定等は不要、 コードで記述するだけ
iOS 17時点、 Widget上で AppIntentがサポートしているのは、 • Button • Toggle その他のコントロールは機能しない
たったこれだけで iOS17からWidget上での ボタンアクションを インタラクティブに動作できる (しかも、とてもスムーズに)
つまり
さよなら、WidgetTodo
（ここで一同 涙）
弊アプリ 供養の意味も込めて、 ここで秘技を伝授します
インタラクティブ風 Widgetの基本
❶ Widgetのボタン押下を 検知する
Linkを使用する WidgetFamily • systemMedium • systemLarge • systemExtraLarge のみでLinkを複数配置できる
https://developer.apple.com/documentation/swiftui/link
URLにもよりますが、 • 関連するアプリをユニバーサルリンクで起動 • Webブラウザを起動
LinkのdestinationURLは、 .onOpenURLモディファイアを使用して 受け取ることが出来ます 数字の1を押下した例を見ていきます
❷ アプリを強制的に閉じる
魔法のExtensionを作成します
これでアプリを強制的にサスペンド状態に変更して、 アプリをバックグラウンドに移行させます
これってAppleのPrivate APIなのでは？
Private APIを利用しているアプリは、 リジェクトされるはず。 この機能を主機能として使っているが、 未だリジェクトされていない。 なので、許容範囲内？ということにしておく
使用例の紹介
数字の1を押下した場合、 アプリをバックグラウンドに移行
❸ DBと連携する
今回はCoreDataを使用します。 CoreDataの説明をすると長くなるので今回は省略します。 ポイント: Main AppとWidget Extensionで共有保存領域を使用する 為には、App Groupを使用する必要があります
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/
前提 今回登場するItemは、 numberというプロパティを持っています
Main App側
Widget側
数字をタップすると、 該当する数字が Widgetから消える
まとめ
• iOS 17からButtonとToggleを使用してWidgetの インタラクティブな動作を実現出来る • さよなら、WidgetTodo
おしまい