SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

iOSエンジニアたちと振り返るWWDC

【WWDC2022総復習】知ってる? ロック画面以外でもiOS 16/iPadOS 16はこんなに進化したんです

進化したUIKitでiPadユーザにデスクトップのような体験を届けよう

 Stage Managerの登場やマルチディスプレイ対応によってiPadがよりMacのような操作感に近づきました。では、アプリのほうはどうでしょうか? iPadはiPhoneと違いキーボードやMagic Trackpadを使ったインタラクションの考慮が必要であることや、iPhoneよりドキュメントの編集やファイルのドラッグ&ドロップのような操作が多く発生することが考えられます。今年のUIKitのアップデートを使うと、先述したような操作を加味したデスクトップのような体験をiPadのユーザに届けられるようになります。

新しいNavigation Styles

 新しいNavigation Stylesの登場によって、Navigation Barがコンテンツに最適な操作を前面に提供できるようになりました。下図はNavigation Stylesの種類を表しています。そして、それぞれのStylesは以下のユースケースが想定されています。

  • Navigator:階層構造を持つアプリに用いられる
  • Browser:フォルダ構造を持ちフォルダ間の移動があるアプリに用いられる
  • Editor:ドキュメントの表示や編集するアプリに用いられる
図12.Navigation Stylesの名前と対応する見た目
図12.Navigation Stylesの名前と対応する見た目

 新しいNavigation Styleの大きな特徴はCenter Items(図13参照)とTitle Menu(Leading title横のボタンの押下によって表示されるMenu画面)にあると感じました。まずCenter Itemsですが、Navigation Barの中心にUIを配置できるようになったことで、今までは脇に隠していた主要な操作をよりわかりやすい位置に配置できるようになりました。続いて、Title Menuですが、現在表示中のファイルや編集中のドキュメントの情報を編集や共有する操作がより行いやすくなっています。

図13.Navigation Bar上に配置されるUIの名称
図13.Navigation Bar上に配置されるUIの名称

 Title Menu(図14)は開いているファイルの情報やView全体に対する操作を提供するのに最適です。例えば、ドキュメント編集のアプリであれば、開いているドキュメントのメタデータの表示や共有機能が考えられます。

 また、View全体に対する操作にはデフォルトのものからカスタマイズして追加できるものまであります。例えば、renameやduplicateなどの操作はシステムが提供するTitle Menuであり(多少の実装は要します)、その他のものに関しては図15のように自身でUIMenuのインスタンスを作り表示に加えることができます。

図14.Title Menuを表示している様子
図14.Title Menuを表示している様子
図15.Title Menuにアプリ独自の操作を追加するコード
図15.Title Menuにアプリ独自の操作を追加するコード

 また、Center Itemsはユーザが行いたい主要な操作をわかりやすい位置から提供できます。図16の例だとリンクの挿入やテキストサイズの変更など、ドキュメント編集においてよく使われる機能がCenter Itemsとしてわかりやすい位置に配置されていることがわかります。さらに、このCenter Itemsはユーザがカスタマイズできるように実装することもできます。図17はカスタマイズ中の画面を示しており、ユーザは選択肢の中からどのUIをCenter Itemsに入れるか(あるいは、入れないか)を決められます。

図16.Navigation Barの中央にCenter Itemsが表示されている様子
図16.Navigation Barの中央にCenter Itemsが表示されている様子
図17.Center Itemsに表示するUIをカスタマイズしている様子
図17.Center Itemsに表示するUIをカスタマイズしている様子

テキストの検索と置換

 テキストの検索や置換のようなシステムの標準的な機能も簡単に実装可能になりました。UITextViewのisFindInteractionEnabled変数をtrueに設定するだけで、下記のような検索バーを表示することができます。検索バーを用いて、図18のようにUITextView内の文字列の検索とハイライト、および置換が行えます。iPhoneやキーボードを接続していないiPadの場合は、検索バーはソフトウェアキーボードの上部に表示されます。ドキュメント編集において検索機能はよく使われるので、よりiPadで作業がしやすくなりそうです。

図18.テキストを検索しマッチした検索結果をハイライトしている様子
図18.テキストを検索しマッチした検索結果をハイライトしている様子

次のページ
パスワードレスを実現する新世代の認証技術「PassKey」

この記事は参考になりましたか?

iOSエンジニアたちと振り返るWWDC連載記事一覧

もっと読む

この記事の著者

k-kohey(STORES 株式会社)(k-kohey)

 STORES 株式会社テクノロジー部門モバイル本部にて、STORES 決済 のiOSアプリ開発に従事。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/16885 2023/01/05 11:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー