この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんにちは。モバイルアプリサービス部の平屋です。
本シリーズ「iOS User Notifications UI framework」では、iOS 10 で新規追加された「User Notifications UI framework」の機能を使用した実装を紹介していきます。
第 2 回目の本記事では「Notification Content app extension」による通知用のカスタムビューに添付ファイルを表示する手順を解説します。
前回の記事で「Notification Content app extension」の基本事項を解説していますのであわせてご覧ください。
実現したいこと
本記事では上記スクリーンショットのようなレイアウトのカスタムビューを実装するために必要な以下の 3 つの要素を解説していきます。
- デフォルトのコンテンツを非表示にする
- カスタムビューロード中のアスペクト比を変更する
- 通知の添付ファイルをカスタムビュー上に表示する
1. デフォルトのコンテンツを非表示にする
app extension のターゲットを追加した後に設定を全く変更していない場合、カスタムビューの下にデフォルトのコンテンツが表示されます。
デフォルトのコンテンツを非表示にするには、app extension の Info.plist に UNNotificationExtensionDefaultContentHidden キーと値 true を設定します。
...
<dict>
...
<key>NSExtension</key>
<dict>
<key>NSExtensionAttributes</key>
<dict>
<key>UNNotificationExtensionDefaultContentHidden</key>
<true/>
...
</dict>
...
</dict>
</dict>
...修正を行うとカスタムビュー部分だけが表示されるようになります。
2. カスタムビューロード中のアスペクト比を変更する
カスタムビューロード中のアスペクト比はデフォルトで 1 なので、カスタムビューはまず以下のアスペクト比で表示されます。
今回はカスタムビューのアスペクト比を 0.5 にしたいので、ロード中のアスペクト比も 0.5 に変更します。
ロード中のアスペクト比を変更するには、app extension の Info.plist の UNNotificationExtensionInitialContentSizeRatio の値 を変更します。
...
<dict>
...
<key>NSExtension</key>
<dict>
<key>NSExtensionAttributes</key>
<dict>
...
<key>UNNotificationExtensionInitialContentSizeRatio</key>
<real>0.5</real>
</dict>
...
</dict>
</dict>
...修正を行うとカスタムビューのロード中のアスペクト比は以下のようになります。
3. 通知の添付ファイルをカスタムビュー上に表示する
通知の添付ファイルの情報を保持する UNNotificationAttachment オブジェクトは、app extension の ViewController で実装している didReceive(_:) メソッドの引数 notification から取り出すことができます。
そして、UNNotificationAttachment オブジェクトの url プロパティを使用して添付ファイルにアクセスします。
添付ファイルはアプリのサンドボックス外に保存されているので、URL にアクセスする前に、startAccessingSecurityScopedResource() メソッドを呼び、アクセス完了後に stopAccessingSecurityScopedResource() メソッドを呼ぶようにします。
// app extension の ViewController
class NotificationViewController: UIViewController, UNNotificationContentExtension {
// ...
func didReceive(_ notification: UNNotification) {
let content = notification.request.content
// ...
if let attachment = content.attachments.first {
if attachment.url.startAccessingSecurityScopedResource() {
self.imageView.image = UIImage(contentsOfFile: attachment.url.path)
attachment.url.stopAccessingSecurityScopedResource()
}
}
}
}動作検証
実装の解説が終わりましたので、添付ファイル付きの通知を受信した時の動作を見ていきます。添付ファイル付きの通知を送信する方法についてはこちらの記事をご覧ください!
通知を受信すると通知バナーが表示されます。画像を添付した場合、以下のように通知バナーの右端に画像のサムネイルが表示されます。
通知バナーをプレス (3D Touch 対応機種の場合) または下方向へドラッグすると、カスタムビューのロードがはじまります。ロード中のビューのアスペクト比は 0.5 になります。
カスタムビューのロードが終わると app extension 側で実装した UI が表示されます。
さいごに
本記事では「Notification Content app extension」による通知用のカスタムビューに添付ファイルを表示する手順を解説しました。
次回の記事でも引き続き「User Notifications UI framework」の機能について解説していきます。お楽しみに!
6
