iPhoneのロック画面にサスケWorksを表示する
2023-09-04 勉強会
さて、もうすぐiOS17がリリースされそうな今日この頃ですが、iOS16でiOSのロック画面に大幅なアップデートがありましたね。
iOS16ではロック画面の時刻表示をカスタマイズしたり、ウィジェットを表示したり、予め作成しておいたロック画面の切り替えもできるようになりました。
そこで、今インターパークで成長中のサスケWorksで役立てられないかを考えまして、iPhoneのロック画面にWorksアプリのレコード状態を表示に挑戦します！
iOS16ではロック画面の時刻表示をカスタマイズしたり、ウィジェットを表示したり、予め作成しておいたロック画面の切り替えもできるようになりました。
そこで、今インターパークで成長中のサスケWorksで役立てられないかを考えまして、iPhoneのロック画面にWorksアプリのレコード状態を表示に挑戦します！
サスケWorksのフロー図
今回はサスケWorksに問い合わせ管理アプリを作成し、問い合わせの対応状況をiPhoneのロック画面に表示します。
問い合わせ管理アプリの情報は、お客様がWebフォームより問い合わせすると自動で登録される仕組みです。
問い合わせごとに、未対応、処理中、処理済み、完了のステータスがあるので、それぞれの件数をロック画面に表示するイメージです。
問い合わせ管理アプリの情報は、お客様がWebフォームより問い合わせすると自動で登録される仕組みです。
問い合わせごとに、未対応、処理中、処理済み、完了のステータスがあるので、それぞれの件数をロック画面に表示するイメージです。
サスケWorksアプリの作成
はじめに、問い合わせ管理アプリを作成し、Webフォームを表示します。
今回は問い合わせを管理したいので、名前、件名、種類、内容の項目を作成し、種類は後々分類しやすくするため「製品についてのご質問」、「契約内容について」、「その他」のラジオボタンとしています。
今回は問い合わせを管理したいので、名前、件名、種類、内容の項目を作成し、種類は後々分類しやすくするため「製品についてのご質問」、「契約内容について」、「その他」のラジオボタンとしています。
作成したWebフォームはこちらになります。
お客様がこちらから問い合わせをすると、サスケWorksの問い合わせ管理アプリで内容を確認できるようになります。
試しに項目を入力して、確認画面へ進み登録してみます。
試しに項目を入力して、確認画面へ進み登録してみます。
Webフォームで登録後、少し待つと問い合わせ管理アプリのレコード一覧に表示されました。
これでサスケWorksのアプリ作成は完了です。
ちなみにサスケWorksでは、追加のプラグインなしでWebフォーム機能をすぐに利用できます。便利ですね。
これでサスケWorksのアプリ作成は完了です。
ちなみにサスケWorksでは、追加のプラグインなしでWebフォーム機能をすぐに利用できます。便利ですね。
iPhoneのロック画面に表示するLive Activityを作成
ここからはスマホアプリ側の開発になりますので、Xcodeで実装を進めていきます。
ロック画面に表示するには、iOS16.1以上で利用できる最新の機能であるLive Activity（ActivityKit）を利用します。
まずは、ロック画面に表示するデザインを作成するため、SwiftUIでデザイン部分のコーディングしましょう。
Live Activityを使用する場合も、基本はウィジェットと同じように作成します。
ロック画面に表示するには、iOS16.1以上で利用できる最新の機能であるLive Activity（ActivityKit）を利用します。
まずは、ロック画面に表示するデザインを作成するため、SwiftUIでデザイン部分のコーディングしましょう。
Live Activityを使用する場合も、基本はウィジェットと同じように作成します。
レコードの状態（未対応、処理中、処理済み、完了）別に件数を表示したいので、このようなイメージで進めます。
また、表示内容はプッシュ通知で更新できるようなので、ContentStateとして値を定義しておきます。
また、表示内容はプッシュ通知で更新できるようなので、ContentStateとして値を定義しておきます。
これで、プッシュ通知からそれぞれの件数の値を変更できるようになります。
Live Activityはスマホアプリ内から起動する
Live Activityをスタートするのは、スマホアプリ内からになるため、サスケWorksのスマホアプリのホーム画面から起動するようにしました。
ロングタップでWorksアプリに登録されているカスタムリスト一覧をメニューに表示し、ロック画面にはカスタムリストで絞り込まれたレコードの内容を表示したいと思います。
カスタムリストの一覧を取得するには、サスケWorks APIを利用します。
カスタムリストの一覧を取得するには、サスケWorks APIを利用します。
サスケWorks APIでカスタムリストを取得
サスケWorks APIを利用するには設定が必要です。サスケWorksのAPIの管理からAPIキーを発行し、Worksアプリ側もAPI連携機能をONに設定しておきます。
次にサスケWorksのAPIドキュメントを参照しながら、動作を確認してみます。
次にサスケWorksのAPIドキュメントを参照しながら、動作を確認してみます。
リスト関連 > カスタムリスト一覧取得
https://api.works.app/v1/{appKey}/custom
こちらのAPIで取得した一覧を、ロングタップのメニュー表示に利用します。
https://api.works.app/v1/{appKey}/custom
こちらのAPIで取得した一覧を、ロングタップのメニュー表示に利用します。
サスケWorks APIでレコード一覧を取得
レコード一覧はカスタムリストを指定して取得します。
レコード一覧 > レコード一覧（固定リスト）
https://api.works.app/v1/{appKey}/records/{customKey}
スマホアプリの処理では、取得した一覧から各レコードの状態を取得しカウントした値を、ContentStateで定義した値に保持しておきます。
これでロック画面に表示するための準備完了です。
https://api.works.app/v1/{appKey}/records/{customKey}
スマホアプリの処理では、取得した一覧から各レコードの状態を取得しカウントした値を、ContentStateで定義した値に保持しておきます。
これでロック画面に表示するための準備完了です。
iPhoneのロック画面に表示
ロングタップメニューから起動すると...
ロック画面に各レコード状態の件数を表示できました！
別々のWorksアプリやカスタムリスト別の起動に対応しているので、複数起動したままにできるのが結構便利かも？
ちなみに背景画像は、先日インターパークの社員旅行で沖縄に行った際のガジュマルです。
別々のWorksアプリやカスタムリスト別の起動に対応しているので、複数起動したままにできるのが結構便利かも？
ちなみに背景画像は、先日インターパークの社員旅行で沖縄に行った際のガジュマルです。
リアルタイム更新に対応する
通常のウィジェットでは、情報の更新頻度はiOS側の制御によるところがあるのですが、Live Activityではプッシュ通知で即時更新に対応しているとのことで、実装していきます。
ここを実現できないと正式版としてリリースした際の価値が大きく変わってきますので...
ここを実現できないと正式版としてリリースした際の価値が大きく変わってきますので...
プッシュ通知で情報を更新する
Live Activityには表示時間の制約があり、アクティブな状態では最大8時間表示となります。また、プッシュ通知から更新する際は、以下の対応が必要です。
・XcodeでInfo.plistに NSSupportsLiveActivities = YES と NSSupportsLiveActivitiesFrequentUpdates = YES を追加
・プッシュ通知リクエストのヘッダー情報で apns-push-type = liveactivity とする
ロック画面に追加した際に発行されるトークンに対してプッシュ通知を送ることで、あらかじめ定義しておいたcontent-state の値を更新できるのですが、発行されるトークンは、通常のプッシュ通知で使用するデバイストークンとは別に発行されるトークンなので注意が必要です。
仕様が理解できてきたので試そうとしたところ...
・XcodeでInfo.plistに NSSupportsLiveActivities = YES と NSSupportsLiveActivitiesFrequentUpdates = YES を追加
・プッシュ通知リクエストのヘッダー情報で apns-push-type = liveactivity とする
ロック画面に追加した際に発行されるトークンに対してプッシュ通知を送ることで、あらかじめ定義しておいたcontent-state の値を更新できるのですが、発行されるトークンは、通常のプッシュ通知で使用するデバイストークンとは別に発行されるトークンなので注意が必要です。
仕様が理解できてきたので試そうとしたところ...
Amazon SNSが対応していない！？
サスケWorksのプッシュ通知で利用しているAmazon SNSでは、apns-push-type=liveactivityの指定ができないようで、AWS SDKならできるかもと記載がありました。
https://docs.aws.amazon.com/sns/latest/dg/sns-send-custom-platform-specific-payloads-mobile-devices.html
PHPで試そうとしたところ、AWS SDKではそもそもARNの指定になるので、ロック画面に追加する度にトークンが発行される今回のケースとは、少し用途が違うような...
https://docs.aws.amazon.com/aws-sdk-php/v3/api/api-sns-2010-03-31.html#publish
まずはシンプルな形で動作確認するため、Apple WWDCの発表動画を参考に、curlコマンドで実装しました。
https://developer.apple.com/videos/play/wwdc2023/10185/
できました。プッシュ通知によるリアルタイムな更新。
Amazon SNSから始まり、AWS SDKで試したり、curlコマンドでJSON形式の{}があっていないのにエラーにならず中々気付けなかったり、大変でした...
https://docs.aws.amazon.com/sns/latest/dg/sns-send-custom-platform-specific-payloads-mobile-devices.html
PHPで試そうとしたところ、AWS SDKではそもそもARNの指定になるので、ロック画面に追加する度にトークンが発行される今回のケースとは、少し用途が違うような...
https://docs.aws.amazon.com/aws-sdk-php/v3/api/api-sns-2010-03-31.html#publish
まずはシンプルな形で動作確認するため、Apple WWDCの発表動画を参考に、curlコマンドで実装しました。
https://developer.apple.com/videos/play/wwdc2023/10185/
できました。プッシュ通知によるリアルタイムな更新。
Amazon SNSから始まり、AWS SDKで試したり、curlコマンドでJSON形式の{}があっていないのにエラーにならず中々気付けなかったり、大変でした...
プッシュ通知でリアルタイムに更新
サスケWorksに正式版として組み込むには
今回プロトタイプとして開発しましたが、正式版とするにはもう少し調整が必要です。
1. 一時的なプッシュ通知用トークン情報（最大8時間）を管理する
2. スマホアプリでLive Activityをロック画面に追加時に、1.のトークン管理にトークン情報を追加
3. Worksアプリでのレコード登録時やレコード状態更新時に、トークン管理から送信対象を抽出しプッシュ通知を送る処理を追加
4. スマホアプリのログイン情報でサスケWorks APIを利用できるようにする
5. スマホアプリで、ラジオボタンやプルダウン項目の表示にも対応する
この辺りをクリアできれば実現の可能性ありです。
1. 一時的なプッシュ通知用トークン情報（最大8時間）を管理する
2. スマホアプリでLive Activityをロック画面に追加時に、1.のトークン管理にトークン情報を追加
3. Worksアプリでのレコード登録時やレコード状態更新時に、トークン管理から送信対象を抽出しプッシュ通知を送る処理を追加
4. スマホアプリのログイン情報でサスケWorks APIを利用できるようにする
5. スマホアプリで、ラジオボタンやプルダウン項目の表示にも対応する
この辺りをクリアできれば実現の可能性ありです。
最後に
技術部ブログとしての勉強会は、数年振りでしたが今回もなかなか大変でした。
ヒガキさんの発表の後でしたので、この題材でいいのか（元々は別の内容で検討してました）とか、周りに知られないように準備をするとか...
ただ、最近はコードに向き合う時間が減っていたので、新しい技術に触れながら楽しい気持ちも思い出せたような、そんなお盆休みでした。
ヒガキさんの発表の後でしたので、この題材でいいのか（元々は別の内容で検討してました）とか、周りに知られないように準備をするとか...
ただ、最近はコードに向き合う時間が減っていたので、新しい技術に触れながら楽しい気持ちも思い出せたような、そんなお盆休みでした。