noteのiOSアプリにおけるiOS 15対応

iOS 15が9月21日にリリースされました。
そこに合わせてnoteのiOSアプリもアップデートを実施しました。
iOS 15は前回のiOS 14で出たウィジェットやApp Clipsのような大きな機能は無いですが、開発者的に嬉しい改善がいくつも入っています。
この記事ではnoteのiOS 15に向けて対応したことを書いていきます。

‎note（ノート）

ハーフモーダル

これまではライブラリを利用したり独自で実装しないと実現が難しかったハーフモーダルが公式でサポートされました。
対応方法はUIViewControllerに新しく生えてるsheetPresentationControllerに対して設定をすれば対応可能です。
サイズはmedium()とlarge()があり、角丸の設定やシャドウの設定を変更することもできます。

Apple Developer Documentation

WWDC 2021の動画はこちら。

Customize and resize sheets in UIKit - WWDC21 - Videos - Apple Developer

ちなみに現状のnoteのアプリではiOS 13以上をサポートしているので、ライブラリを利用したハーフモーダルと共存する形になっています。

iPadとキーボードでフォーカスの移動

これまでは画面の要素を選択するには画面をタップする必要がありました。（Twitterなどはj, kで前後のツイートに遷移できる機能を独自実装しているようです）
iOS 15からはこういった機能が公式でサポートできるようになりました。

対応方法としてはUITableViewやUICollectionViewにiOS 15からallowsFocusというプロパティが生えています。まずはこちらにtrueを設定して、セルのfocusEffectプロパティにUIFocusHaloEffect()を設定します。（UIFocusEffectは独自のカスタムも可能です）

クリエイターページなど一覧系のコンポーネントが複数ある場合は、UITableViewやUICollectionViewのfocusGroupIdentifierをそれぞれ設定することでキーボードのTabキーで各コンポーネント間を移動できるようになります。

WWDC 2021の動画はこちら。

Focus on iPad keyboard navigation - WWDC21 - Videos - Apple Developer

iPadのキーボードショートカットの一覧表示の改善

これまでもiPadでキーボードを利用している場合に、⌘（コマンド）キーを長押しすると対応しているキーボードショートカットの一覧が表示されていました。
iOS 15からこの表示がショートカットのグルーピング表示ができるようになりました。

こちらの対応方法はAppDelegateでbuildMenu(with builder: UIMenuBuilder)を実装します。（Catalystでメニューを表示する方法と同様です）
詳しくはこちらの資料を参考にして頂けると嬉しいです。

Quick Note

iPadでiOS 15からアプリの右下辺りから左にスワイプすると小さなメモアプリが表示されるようになりました。
ここに今開いているアプリの情報を貼り付けられるように対応することが可能です。

対応方法としてはQuick Note用のactivityTypeを決めて、Info.plistのNSUserActivityTypesに追加します。そして開きたいページのUIViewControllerでNSUserActivityのインスタンスを作成して、メタデータを設定した後で、UIViewControllerのuserActivityに設定するだけです。

メモアプリから該当のリンクをタップするとアプリに遷移するので、該当のページを復帰する処理をAppDelegateもしくはSceneDelegateに追加します。

let quickNoteActivityType = "my quick note"
final class ViewController: UIViewController {
    var url: URL!
    override func viewDidLoad() {
        super.viewDidLoad()
        configureQuickNote(with: url)
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        self.userActivity = nil
    }

    func configureQuickNote(with url: URL) {
        let userActivity = NSUserActivity(activityType: quickNoteActivityType)
        userActivity.title = "page title"
        userActivity.targetContentIdentifier = "page id"
        userActivity.webpageURL = url
        self.userActivity = userActivity
    }
}

final class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options: UIScene.ConnectionOptions) {
        ...
        if let userActivity = options.userActivities.first ?? scene.session.stateRestorationActivity {
            open(userActivity)
        }
    }

    func scene(_ scene: UIScene, continue userActivity: NSUserActivity) {
        open(userActivity)
    }

    func open(_ userActivity: NSUserActivity) {
        if userActivity.activityType == quickNoteActivityType, let url = userActivity.webpageURL {
            // open url
        }
    }
}

WWDC 2021の動画はこちら。

Adopt Quick Note - WWDC21 - Videos - Apple Developer

その他仕様変更対応

これまではUITextViewにフォーカスが当たってる状態で、UIKeyCommandでTabキーが入力されたイベントを受け付けることができましたが、iOS 15からはTabがそのまま入力されるようになり、UIKeyCommandのイベントが飛ばなくなってしまいました。
そのため、UITextViewのdelegateの関数でTabが入力された場合に次の入力欄に遷移するような処理を入れました。

func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
  if text == "\t" {
    // 次の入力欄に移る処理を呼び出す
    return false
  }
  return true
}

まとめ

noteのiOS 15で対応した内容を簡単にまとめました。
出てきた要素は全てが新規というわけではなかったので対応自体はやりやすいものが多いなという印象でした。
この記事がiOS 15対応をこれからやろうと思ってる方の助けになれば嬉しいです。

PR
noteのモバイルアプリをさらにグロースさせるためにPdMを絶賛募集中です。
興味のある方は是非ご覧ください。

プロダクトマネージャー(モバイルアプリ) / note株式会社