はじめに
こんにちは。WEAR iOSチームの坂倉 (@isloop) です。
この間リリースされたiPadOSはかなり盛りだくさんの内容でしたね。
個人的には、1つのアプリで複数のウィンドウを開ける「Multiple Windows」機能が一番気になりました。
この記事では、WWDC 2019のセッション Introducing Multiple Windows on iPad と Architecting Your App for Multiple Windows を参考にしながらWEARへの仮実装を通して「Multiple Windows」を解説します。
解説
条件
Multiple Windowsは以下の条件で動作します。
- Xcode 11以降に含まれるiOS 13.0 SDK以上でビルドされたアプリ
- iPadOSがインストールされているiPad
Supporting Multiple Windows on iPad | Apple Developer Documentation
WEARにMultiple Windows機能を実装する
今回、WEARに以下の5つのMultiple Windowsの機能を実装してみました。
- 複数のウィンドウを開く
- ドラッグ&ドロップで新しいウィンドウを開く
- ロングタップからのコンテキストメニューから新しいウィンドウを開く
- 以前開いていたすべてのウィンドウの状態を復帰させる
- 現在開いているすべてのウィンドウのUIを更新する
これらすべてを実装するのはなかなか大変そうに思えますが、意外に少ないコードで実装できます。
その1. 複数のウィンドウを開けるように、Xcode 11以前で作ったアプリをMultiple Windowsに対応させる
実は、Xcode 11で作ったプロジェクトならば設定画面の「Supports multiple windows」にチェックを入れるだけで対応できます。
しかしながら、Xcode 10以前に作られたプロジェクトの場合はコードを足さないと対応できません。
WEARは現在、Xcode 10.3で開発しているのでコードを足す必要がありました。
と言ってもほんの少しのコードで対応できます。以下の3つを足すだけです。
（1）AppDelegate.swiftに以下のメソッドを追加します。
func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
}
（2）Info.plistに以下のコードを追加します。
<key>UIApplicationSceneManifest</key>
<dict>
<key>UIApplicationSupportsMultipleScenes</key>
<true/>
<key>UISceneConfigurations</key>
<dict>
<key>UIWindowSceneSessionRoleApplication</key>
<array>
<dict>
<key>UISceneConfigurationName</key>
<string>Default Configuration</string>
<key>UISceneDelegateClassName</key>
<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
<key>UISceneStoryboardFile</key>
<string>BrowserViewController</string> // 最初に表示するStoryboard名
</dict>
</array>
</dict>
</dict>
（3）SceneDelegate.swiftを新規作成して下のコードをそのまま貼り付けます。
import UIKit
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
var window: UIWindow?
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
guard let _ = (scene as? UIWindowScene) else { return }
}
}
これだけです。アプリを起動し「Dockのアイコンを長押し」してみましょう。
これまで表示されなかった項目「すべてのウィンドウを表示」が現れるようになり、1つのアプリで複数のウィンドウを開くことができます。
ちなみに、これまでUIApplicationDelegateで使用していたライフサイクルメソッドは使えなくなります。そのあたりの処理はUISceneDelegateのsceneDidBecomeActive / sceneWillResignActive / sceneWillEnterForegroundなどに移管する必要があります。
その2. ドラッグ&ドロップで新しいウィンドウを開けるようにする
次は、「ドラッグ&ドロップで新しいウィンドウを開く」を実装してみましょう。
流れとしては、NSUserActivityの中へ新しいウィンドウに必要な情報を入れて生成しUIDragInteractionDelegateを利用してSceneDelegateの「scene(_:willConnectTo:options:)」を呼び出し、新しいウィンドウを作ります。
（1）info.plistに有効なNSUserActivityTypesを定義します。
<key>NSUserActivityTypes</key>
<array>
<string>wear.multiple.windows.coordinateDetail</string>
</array>
（2）UICollectionViewの場合は「viewDidLoad()」あたりに以下のコードを追加します。
collectionView.dragDelegate = self
（3）UICollectionViewDragDelegateの「collectionView(_:itemsForBeginning:at:)」 で、新しいウィンドウを開くのに必要な情報をNSUserActivityのuserInfoに入れてUIDragItemに渡します。（NSUserActivityのactivityTypeは、先ほどinfo.plistで指定した文字列にすること）
extension ViewController: UICollectionViewDragDelegate {
public func collectionView(_: UICollectionView, itemsForBeginning _: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] {
let userActivity = NSUserActivity(activityType: "wear.multiple.windows.coordinateDetail")
activity.userInfo?["Info"] = items[indexPath.item]
let itemProvider = NSItemProvider(object: url)
itemProvider.registerObject(userActivity, visibility: .all)
let dragItem = UIDragItem(itemProvider: itemProvider)
return [dragItem]
}
}
UITableViewもUITableViewDragDelegateがあるのでほぼUICollectionViewと同じように実装できます。UIButtonやUIViewの場合はUIDragInteractionとUIDragInteractionDelegateを使えば可能です。
ここで1つ注意ですが、NSUserActivityのuserInfoに入れてもよいのは以下のタイプのみで、それ以外はアプリが落ちてしまうので気をつけてください。
Each key and value must be of the following types: NSArray, NSData, NSDate, NSDictionary, NSNull, NSNumber, NSSet, NSString, or NSURL. The system may translate file scheme URLs that refer to iCloud documents to valid file URLs on a continuing device.
（4）SceneDelegate.swiftに新しいウィンドウを開くための処理を追加します。
タブをウィンドウ外にドラッグ&ドロップした際にSceneDelegateの「scene(_:willConnectTo:options:)」が走るので、そこに新しくウィンドウを開く処理を追加すれば実装完了です。
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
if let userActivity = connectionOptions.userActivities.first {
if userActivity.activityType == "wear.multiple.windows.coordinateDetail", let info = userActivity.userInfo?["Info"] as? NSString {
let vc = BrowserViewController.instantiate()
vc.info = info
window?.rootViewController = vc
}
}
}
その3. ロングタップからのコンテキストメニューから新しいウィンドウを開く
ボタンのタップをきっかけに新しいウィンドウを開く動きを実装したいという需要も多いと思います。この場合も少しのコードで実装できます。
ここでは、UICollectionViewのセルをロングタップしてコンテキストメニューを出し「新しいウィンドウを開く」ボタンを押して開く実装例をご紹介します。
（1）UICollectionViewの長押しをハンドリングしてコンテキストメニューを表示させます。（触覚タッチを使った例）
extension ViewController: UICollectionViewDelegate {
open override func collectionView(_ collectionView: UICollectionView, contextMenuConfigurationForItemAt indexPath: IndexPath, point _: CGPoint) -> UIContextMenuConfiguration? {
let actionProvider: ([UIMenuElement]) -> UIMenu? = { _ in
let openNewWindowAction = UIAction(title: "新しいウインドウで開く", handler: { [unowned self] _ in
openNewWindow(indexPath: IndexPath)
})
return UIMenu(title: "コンテキストメニュー", image: nil, identifier: nil, children: [openNewWindowAction])
}
return UIContextMenuConfiguration(identifier: nil, previewProvider: nil, actionProvider: actionProvider)
}
}
（2）新しくウィンドウを開くのに必要な情報をNSUserActivityに追加して、UIApplicationの「requestSceneSessionActivation:userActivity:options:errorHandler:」を実行します。
func openNewWindow(indexPath: IndexPath) {
let activity = NSUserActivity(activityType: "wear.multiple.windows.coordinateDetail")
activity.userInfo?["Info"] = items[indexPath.item]
UIApplication.shared.requestSceneSessionActivation(nil, userActivity: activity, options: nil)
}
（3）UIApplicationの「requestSceneSessionActivation(:userActivity:options:errorHandler:)」を実行するとUISceneDelegateの「scene(:willConnectTo:options:)」が走るので、NSUserActivityから情報を取得し、それを元に画面を生成させます。
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
if let userActivity = connectionOptions.userActivities.first {
if userActivity.activityType == "wear.multiple.windows.coordinateDetail", let info = userActivity.userInfo?["Info"] as? NSString {
let vc = BrowserViewController.instantiate()
vc.info = info
window?.rootViewController = vc
}
}
}
その4. 以前に開いていたすべてのウィンドウの状態を復帰させる
これで大体のMultiple Windows機能は実装できましたが、今のままだとアプリを閉じてしまったら閉じる前の状態を復旧できず毎回初期値の状態で起動してしまいます。
以下のコードを足すことで以前開いていたウィンドウの状態を復帰できます。
（1）SceneDelegate.swiftに以下のメソッドを追加します。
@available(iOS 13.0, *)
func stateRestorationActivity(for scene: UIScene) -> NSUserActivity? {
return scene.userActivity
}
（2）ViewControllerにウィンドウの状態を保存したいタイミングに以下のコードを追加します。
let userActivity = NSUserActivity(activityType: "wear.multiple.windows.coordinateDetail")
userActivity.title = webView.title
userActivity.userInfo?["Info"] = info
view.window?.windowScene?.userActivity = userActivity
（3）SceneDelegate.swiftの「scene(_:willConnectTo:options:)」にウィンドウの状態を保存している「session.stateRestorationActivity」から情報を取得するコードを追加します。
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
if let userActivity = connectionOptions.userActivities.first ?? session.stateRestorationActivity {
if userActivity.activityType == "wear.multiple.windows.coordinateDetail", let info = userActivity.userInfo?["Info"] as? NSString {
let vc = BrowserViewController.instantiate()
vc.info = info
window?.rootViewController = vc
}
}
}
早速、複数のウィンドウを開き一旦閉じてもう一度起動してみましょう。ウィンドウの状態が復帰できます。
その5. 現在開いているすべてのウィンドウのUIを更新する
現在開いているすべてのウィンドウのUIを変更したい場合は当然出てくると思います。例えば、Safariならば新しくブックマークを追加した場合、すべてのウィンドウにそれが反映されますよね。
これまでならViewControllerに付き1つのウィンドウだけ管理しておけば問題ありませんでした。しかし、Multiple Windowsは、同じViewControllerのウィンドウが複数並ぶことになります。アクティブなウィンドウだけが更新されるのはまずいわけですね。
すべてのウィンドウを更新する方法として、Introducing Multiple Windows on iPad と Architecting Your App for Multiple Windowsで「UserDefaultsによるKVOで行う方法」と「NotificationCenterで行う方法」の2つの方法が紹介されていました。
ケースバイケースでどちらの手段を使うか決めましょう。
UserDefaultsを用いたKVOの場合
UserDefaultsを拡張しKVOで値の変更を監視して全ウィンドウを更新する方法です。
（1）KVO用のKeyPathを作るExtensionを用意します。
extension UserDefaults {
private static let isToolbarHiddenKey = "isToolbarHiddenKey"
@objc dynamic var isToolbarHidden: Bool {
get { return bool(forKey: UserDefaults.isToolbarHiddenKey) }
set { set(newValue, forKey: UserDefaults.isToolbarHiddenKey) }
}
}
（2）設定画面で、isToolbarHiddenを変更する処理を追加します。
UserDefaults.standard.isToolbarHidden = !sender.isOn
（3）NSKeyValueObservationをインスタンスで保持して、ViewControllerの「viewDidLoad()」に以下のコードを追加します。
private var observer: NSKeyValueObservation?
observer = UserDefaults.standard.observe(\UserDefaults.isToolbarHidden,
options: .initial,
changeHandler: { [weak self] (_, _) in
self?.navigationController?.setToolbarHidden(UserDefaults.standard.isToolbarHidden, animated: true)
})
NotificationCenterの場合
ViewControllerが受け取ったイベントをModelControllerに送り、ModelControllerがModelを更新したら、各ViewControllerに通知してUIを更新する方法です。
（1）イベントを更新した際に通知をPostするデータ型を用意します。
enum UpdateEvent {
case DeleteFavorite
static let DeleteFavoriteName = Notification.Name(rawValue: "DeleteFavorite")
func post() {
switch self {
case .DeleteFavorite:
NotificationCenter.default.post(
name: UpdateEvent.DeleteFavoriteName,
object: self
)
}
}
}
（2）ModelControllerのメソッド内で処理を完了際に通知を送信する処理を追加します。
final class ModelController {
func deleteFavorite() {
let event = UpdateEvent.DeleteFavorite
event.post()
}
}
（3）ViewControllerにModelControllerに追加したメソッドを実行する処理を追加します。
extension ViewController {
private func deleteButtonAction() {
modelController.deleteFavorite()
}
}
（4）ViewControllerに通知を受信する処理と通知を受信した際に行う処理を追加します。
extension ViewController {
private func setupNotification() {
NotificationCenter.default.addObserver(
self,
selector: #selector(reload),
name: FolderDetail.UpdateEvent.DeleteFavoriteName,
object: nil
)
}
}
@objc private func reload(notification: Notification) {
}
実行すると、すべてのウィンドウにUIの変更が反映されます。
まとめ
Multiple Windowsは、UIの実装はそれほど難しくないですが、データ保存などの設計をMultiple Windowsありきで考える必要があると感じました。
考えられるケースとしては、AとBのウィンドウで使用しているデータの保存先が同じでそれぞれリアルタイムに更新している場合ですね。
どちらを優先させるのか。またはウィンドウ別に保存させるようにするのか。アプリによってどれが最適なのかを考える必要があり、なかなかすぐに対応するのは難しいのではないかと感じました。
ただ、やはりMultiple Windowsが使えるようになれば使い勝手がとても良くなるのは間違いありません。WEARであれば、コーデの検索画面と詳細画面を一度に確認できたり、お気に入りフォルダの中身を確認しながらコーデを追加できたりと、アプリを巡るスピードが飛躍的に上がりましたので。
最後に、Multiple Windows機能をWEARに仮実装して感じたポイントを3つにまとめました。
- Multiple WindowsのUIの実装はそれほど難しくない。ただし、1つのViewControllerを複数のウィンドウで開くことになるので、UIの更新やデータの保存には注意する必要あり。
- NSUserActivityに必要な情報を渡し、それを用いて新しいウインドウを開く。ただし、NSUserActivityに渡せるタイプは限られているので注意すること。
- AppDelegateのライフサイクルメソッドは使えなくなるので、SceneDelegateのライフサイクルメソッドを用いる必要がある。
この記事がMultiple Windows実装の一助になれば幸いです。
参考
さいごに
ZOZOテクノロジーズは、iOSエンジニアを募集しています。ご興味のある方は、以下のリンクからぜひご応募ください！
tech.zozo.com
その活動の一環として、毎週行われるアプリ部の定例で誰でも改善提案をできる時間がとられています。提案書のフォーマットも用意されており、社員の意見を積極的に取り入れようとする仕組みが整っています。そのため、社員の意見をスピーディに上へあげることが可能です。多くの社員がZOZOTOWNの改善に取り組んでいる中で、iOSチームでも「改善できるところを見つけ、提案・開発・計測をしていくプロジェクト」を実践しています。
実際に、上記の流れで取り組んでいます。
課題が発見されたら、すぐに解決策のアイデアを出したくなります。本記事に興味のある読者の方は、特に改善というキーワードに感度が高く、賛同いただける方も多いでしょう。普段アプリを使っていて「ここ改善したいな」と思うところは容易にいくつも思いつくのではないでしょうか。わたしたちもそうでした。しかし、それを片っ端から改善していく訳にもいきません。わたしたちは「改善提案専門部隊」ではありません。他の案件も並行で進めながら、サービスに寄与する効果をあげる必要があります。課題を思いついたときに、それが本質的な課題なのか深掘ることで、限られたリソースで最大の効果を発揮できる選択が可能になります。
そこで、「そもそもこの機能に気付いて使っているお客様はどれくらいいるのか」「機能自体、本当に必要なのか」「どの画面からのカート投入率が高いのか」を、Google Analyticsを使って集計しました。必要な数値が収集できていない場合は、A/Bテストを実施するのもひとつの手です。その結果、想定よりも使っているお客様が多く、必要な機能だということがわかりました。しかし、そもそも気付きにくいという課題は依然として残るので、「わかりやすくする」ことで必要なお客様にもっと使っていただけるであろうという仮説のもと、「カートに入れる」と明記する提案をしました。
「仮説を立てる」ことにこだわることで、説得力が高まり、アイデアが案件として採用されやすくなります。また、仮説を立てられるかどうかによって、取り組むべき課題のフィルター効果が期待できます。仮説を立てようとすると、その仮説を担保するだけの根拠が必要になります。そのため、提案に説得力が生まれ、仮説を検証するための有効な課題解決策がおのずと湧いてきます。逆に仮説が立てられないのであれば、設定している課題が間違っている可能性があります。その場合は、課題の深掘りサイクルに戻り、本質的な課題は何であったかを見直します。改善提案だけに時間を割ける環境ではないことがほとんどだと思うので、少ない時間で最大限の改善をするためにも、「仮説を立てることができるか」という視点を大事にしています。
提案書を作成したあとに、iOSチーム内でレビューの時間を必ず設けています。この段階で根拠が足りていなかった点や他に解決できそうなアイデアがないか、など意見をもらっています。上に提案を持っていく前に複数人の目を通すことで、新たな気付きを得られることも多く、より筋の通った改善提案にブラッシュアップできます。
