iPad用ビルド

こんにちは WWDCへようこそ “iPad用ビルド” カートです WWDCへようこそ iPadのための構築について お話します iOS 14の新しい機能と外観を アプリケーションに使うと iPadで素晴らしい 働きをしてくれます “メール”“メモ”“ホーム”なども 新しいデザインになり iPadのパワーを 最大限に活用しています いくつかのUIの機能について ご説明します もちろん 実装していただけます メールは マルチカラムの 新しい外観になりました Eメールだけ またはメールボックス全体を 簡単に見られます いくつかのシンプルなジェスチャーで 表示 非表示が自由自在です サイドバーのリストデザインは シンプルかつ明瞭です 編集ボタンをタップすると もっとたくさんのコントロールが表示されます シンプルなリストを構築して 簡単にアクセサリを追加できます メモは 最低限のタップで 操作できるようになりました 例えば マーカーの色を選択する カラーピッカーを開きます 文書の中で描画するときは 自動的に消えてくれます タップする必要がありません もう１つの例は iPadのホームの新しいデザインに リスト付きのサイドバーがあります Catalystでアプリケーションを Macに対応させる際にも すべての機能が使えますが 新しいMacのデザインも利用できます 自身のアプリケーションで 同じことをする方法をご説明します UIKitの新しい機能を使います マルチカラムのスプリットビューが 使えるようになりました これらの列にリストを実装する方法 そして 適切な外観にする方法を ご説明します UIでモーダルを減らすことについて お話しし ショートカットアプリケーションの ケーススタディをお見せします それでは始めましょう マルチカラムの中心になるのが UISplitViewControllerです これは コンテナビューコントローラで ビューコントローラ内の コンテンツの構造を提供するものです iOS 14では 簡単にセットアップして使える 新しいAPIがあります このスタイルを指定する 新しいイニシャライザを使います このイニシャライザで 新しい動作と 他の新しいAPIを使えます スタイルは欲しいカラムの数を 示すものです ２つなら ダブルカラムスタイルを使います プライマリとセカンダリと呼んでいます どのビューコントローラを どのカラムにするかを setViewControllerで指定します 例えばホームでは あるビューコントローラを プライマリカラムに 別のビューコントローラを セカンダリカラムにできます ３カラムも同じです トリプルカラムスタイルを使います プライマリとセカンダリの間に入るのは？ 真ん中の新しいカラムは “サプリメンタリ”です ここでも setViewControllerで ビューコントローラを サプリメンタリカラムに提供します 例えば こちらがメールの サプリメンタリカラムです ダブルおよびトリプルカラムの レイアウトで必要なことはこれだけです 先ほども言いましたが 強調すると iPad用とiPhone用を１つの アプリケーションにすることをお勧めします アプリケーションがカラム構造の場合は UISplitViewControllerをウインドウの ルートビューコントローラとして使用します 適切なビューコントローラを 適切な場所で 表示してくれます これは サイズクラスに基づいて 行われます 水平方向のスペースが たくさんある場合があります iPadのフルスクリーンや 大きいiPhoneを横向きにした場合です この幅のサイズクラスを regularと呼んでいます スペースがたくさんあるので UISplitViewControllerは マルチカラムを横並びに表示できます

横方向のスペースが それほど多くないこともあります iPadのSlide Overや 縦向きのiPhoneなどです この幅のサイズは compactと呼んでいます マルチカラムを表示する 余裕がありません どうするか？ 個別のビューコントローラを 指定する手があります 幅がcompactの場合に使用します これで別のナビゲーションスキームを 表示可能なスペースに合わせて使えます そのカラム用の 別のビューコントローラは setViewControllerForCompactで 提供してください それだけです 後は私たちがやります 例えば こちらはショートカットです タブバーコントローラで 小さい表示域用に異なるナビゲーション方法を 実装しています 要約すると iPad用とiPhone用 それぞれをデザインすると考えないように 代わりに ２種類の体験を デザインするのです マルチカラムありのレギュラー幅と なしのコンパクト幅の２種類です マルチカラムの説明に 戻りましょう カラムのレイアウトには 様々な方法がありますが 使えるスペースと カラムの大きさに依存します ディスプレイモードと 呼ばれるものです まず セカンダリカラムのみの 表示です コンテンツに注目していて 他のカラムは すべて非表示にするときです セカンダリの横に カラムを１つ表示するか または セカンダリの上に表示します ３カラムの場合は 選択肢が増えます セカンダリの横の カラムを２つにするか または上に あるいはセカンダリを 押し出して表示できます

ディスプレイモードの切り替えは SplitViewControllerが 自動的に適切なボタンを作成し ちょうど良い場所に 表示してくれます 例えば こちらはメモで カラムの表示 非表示を ボタンで 切り替えるところです エッジからスワイプして 表示するカラムを増やしたり カラムをすべて非表示に したりできます ボタンとジェスチャーの有効化は presentsWithGestureプロパティで行います デフォルトではtrueですが falseにセットすると ボタンとジェスチャーは 表示されなくなります showsSecondaryOnlyButtonプロパティは 追加のボタンで セカンダリカラム以外を 非表示にします メモで見たとおりです preferredSplitBehaviorプロパティの設定で ボタンとジェスチャーが使う ディスプレイモードを決定します 例えば カラムを並べて表示したい場合は tileを使います ボタンを押すと これらのディスプレイモードが切り替わります displaceは似ていますが ３カラム表示の場合 セカンダリカラムの一部を 画面外に押し出します

overlayは オーバーレイディスプレイモードを使います

どの場合でも カラムの 表示 非表示をリクエストできます どのカラムを変更したいか 伝えるだけです UISplitViewControllerが 自動的に 滑らかなトランジションで リクエストどおりにしてくれます 最後にアプリケーションのレイアウトを 常に同じにしたい場合は preferredDisplayModeで指定します 例えば リマインダーのような アプリケーションでは 常に２カラムを横並びに 表示したいので preferredDisplayModeを oneBesideSecondaryにセットします ボタンが自動的に追加されると 言いましたが 一体どうやって？ カラムごとに ナビゲーションコントローラがあるので 自動的に作成されるのです 各ナビゲーションコントローラの 上にバーがあり オプションのツールバーが下にあります UIKitは これらのバーに ボタンを配置でき 皆さんは標準のメソッドを使って これができます 詳細はもっとたくさんあります ドキュメントを読んで 学習することをお勧めします 新しいデリゲートメソッド カラム幅の制御方法 トランジションで動きをつける 方法もあります “Human Interface Guidelines”でも スプリットビューを使う 目的が説明されています 各カラムのコンテンツについて ご説明します 多くの場合 プライマリとサプリメンタリには リストを表示します 例えば メールではプライマリビューに メールボックスのリストを表示し サプリメンタリビューに メッセージのリストを表示します リストを表示する新しいやり方は UICollectionViewを使うことです パワフルでフレキシブル 今後 私たちがお勧めするものです すべての新しいAPIの概要説明は “Advances in UICollectionView”の ビデオをご覧ください ここでは具体的な トピックに注目します プライマリとサプリメンタリを ふさわしい外観にすること そして その手順の レシピをお見せします では コレクションビューの 設定方法に進みましょう これは すべてのリストで同じですが ここでは 項目が天気の種類の 例を見ていきます それぞれの項目に 画像とタイトルを表示します この設定を コレクションビューの作成で行います コレクションビューの作成には レイアウトが必要です これは 縦方向のリストに どのように項目を 配置するかの詳細を規定します そして リストの構成に基づき レイアウトを作成します これは セルのデフォルトの 外観を規定します ヘッダーやフッターがあるか とか その他の詳細です コードを書くときは 逆の順序で 最初にリストのconfigurationを作成します UICollectionLayoutListConfigurationです サイドバーの外観を使用しています これ以外の外観とプロパティに 変更できますが まずはデフォルトで始めます 次に レイアウトの作成 UICollectionViewCompositionalLayoutです リストメソッドを使い シンプルな縦スクロールのリストを作成します このとき 先ほど作成したconfigurationが 元になります 最後にコレクションビューを作成して レイアウトを決めます これらは一度行えば 再び触る必要はありません 次に 皆さんのデータを リスト内のセルのコンテンツに接続します ここが 皆さんのアプリケーションの 詳細が入ってくるところです この例では MyItemという シンプルな構造体です タイトルと画像があります データストアは 構造体の配列です こちらのインスタンスの タイトルは“晴れ” 画像はシステムイメージの 太陽のものです この構造体のインスタンスを取得して セルに表示するコードが必要です iOS 14の 新しいシンプルなメソッドがあります CellRegistrationの作成です つまり セルのタイプと データのタイプを与えると コードが実行され データがセルに格納されます リストの場合 セルタイプは UICollectionViewListCellです セルの見た目は 様々な可能性があります これは非常に一般的な コンテンツ設定方法で イメージビューとラベルを 含んでいます 今は まだ何も入れていないので クエスチョンマークです データタイプは任意です この例では MyItemです では コードを入れましょう これらのタイプで cellRegistrationを作成し 実行するクロージャを渡します クロージャにはセル コレクションビューの インデックスパス そして項目が与えられています 次に新しいcontentConfiguration APIを使って セルのコンテンツを指定します いくつかのビルトインコンテンツ構成が セルの見た目に応じて 用意されていますが 一般的にはデフォルトを使います 項目のプロパティを取得して contentConfiguratonに転送します そして最後に このコンテンツをセルに適用します コードが呼ばれると セルが表示され 結果を見られます

そして 最後のピースを接続します UICollectionViewDiffableDataSourceの 作成です これは データストアに基づいて 何を表示するかを コレクションビューに伝えます データストアからの項目を これにプッシュします そして データソースがクロージャを呼び出し 表示するセルを生成します ずいぶんたくさんありますが すべてのリストで同じパターンを使います そのセクションのタイプを提供する データソースを生成します これは コレクションビューに 複数のセクションを含められるためです 各セクションが MyItemタイプの項目を持ちます このデータソースは 特定の コレクションビューで初期化されます データソースがセルを要求するとき このクロージャが インデックスパスと項目付きで呼ばれます 皆さんはセルを返します 先ほど作成したcell registrationを使って dequeueConfiguredReusableCellを 呼び出します これが 各セルを設定します 後はすべて処理してもらえます セルの再利用や パフォーマンスの向上などです このコードは大半のリストで 同じように使えます 興味の対象は項目のタイプと セル登録です

結果はこちら 良くできたリストで 見た目もちょうどいいですね 選択セルの背景色も カラムごとに異なる色に 自動で調整されています このような外観は カスタマイズ可能です 作成したオブジェクトはどれも― プロパティを変更できます 例えば ナビゲーションではなく コンテンツのリストを表示する場合 サプリメンタリカラムは 少し違う見た目にします コレクションビューの設定時に appearance SidebarPlainを使います 違う外観になります 背景色は白 セパレーターがあって 他にも少し違うところがあります “Human Interface Guidelines”によると コンテンツのリスト 例えば― コレクションやフォルダの中に項目がある場合 外観には sidebarPlainを使います サプリメンタリカラムでは 非常に一般的です コレクションビューは もっといろいろなことができます メールとファイルの 例を見てみましょう チェックマークなどの アクセサリを追加できます ドラッグして項目の 順序を変更できます アウトライン機能を使って 階層の中の項目を 折りたたんだり開いたりできます 行にスワイプアクションを追加して 例えば フォルダの削除ができます UITableViewを まだ使っている場合は UICollectionViewに変えることを 強くお勧めします これらの機能を追加しやすくなり 新しいスタイルと外観を 使えるようになるためです モーダルを減らすことについて 少しお話ししましょう iOS 14では いくつかの共通シナリオで 邪魔なインターフェイスを 取り去る工夫をしました これによって タスクを完了するまでに 必要なタップ操作の量が減りました メモでは インターフェイスの 流れるような動きを増やしました マーカーの色を選ぶ カラーピッカーを開き 文書に描き始めると カラーピッカーは 自動的に消えてくれます ポップオーバーを消すための タップ不要で 再びタッチして描画を始めます こういう余分なタップが 以前は負担になっていました 別の例を見てみましょう 連絡先でボタンを押して メニューを表示します これまでは この時点で ビューが非アクティブになっています これだとメニューを消すために メニューの外側をタップする必要がありました iOS 14ではメニューの外側をタッチして メニューを消し この1回のタッチで 続けてスクロールできます これはUIKitに実装されていますので 自動的に使えます 皆さんのアプリケーションでも 同じようにすることをお勧めします アプリケーションはどれも違いますから 正解のレシピはありません ただし 入ってくるイベントやスクロールなどの ユーザーアクションをよく観察して 邪魔かもしれない一時的なUIを消すための シグナルとして利用することを提案します マルチカラムとリストの使い方― そして モーダルを減らすやり方が わかりました これらをすべて適用した優れた例が ショートカットアプリケーションです ナタリアに交代して ショートカットでこれらを 行った方法を説明してもらいます ここからは どのように ショートカットアプリケーションのデザインを iPad向けに刷新したか お話しします 今日お話しすることは 皆さんが ユーザーのために 優れたiPad体験を 構築するのに役立ちます さっそく始めましょう こちらが iPadの ショートカットです 新しいデザインは iPadの大きなディスプレイを 最大限に活かすよう作られました よりよいナビゲーションのために タブバーをサイドバーで置き換えました これで より多くの ナビゲーションのオプションを提供できます サイドバーは折りたためますので ディスプレイのカスタマイズ性が向上します 私たちがこれを実践した方法を ご説明しましょう カートが言うように スプリットビューコントローラは マルチカラムレイアウトの 陰の立役者です まず ショートカットの 新しいデザインで 新しいSplitViewController APIを 使った方法をご説明します 次に サイドバーについて お話しします すべての構成要素を見られます このトークの最後に 皆さんに理解していただくのは 新しいUIKit APIが 一緒に機能し 素晴らしいiPad体験を作り出すということです まず スプリットビューコントローラです スプリットビューコントローラは ショートカットのバックボーンです このAPIが可能にしてくれるのは ２つの異なるビューコントローラを 並べて共存させることです 左側はスプリットビューが プライマリカラムとして参照している内容です ショートカットでは ナビゲーションを扱う ビューコントローラです いずれかのセルをタップすると 右のビューコントローラが変わります そして 右のビューコントローラが セカンダリカラムです このレイアウトの設定方法を コードで見てみましょう まず スプリットビューコントローラを 初期化します iOS 14では このスタイルを取り込む 新しいイニシャライザにアクセスします このスタイルがスプリットビューに 表示したいカラムの数を示しています レイアウトを２カラムにしたいので doubleColumnを イニシャライザに渡します ３カラムにしたい場合は tripleColumnスタイルを 渡すだけです 次に 各カラムに表示する ビューコントローラを設定します 左側のプライマリカラムには サイドバーを表示します サイドバーはいくつかのシンプルな スタイルを持つビューコントローラです これが SidebarViewControllerです これをプライマリカラムで使います プライマリ用に setViewControllerを呼び出します 次に セカンダリカラムです こちらは動的にしたいので 少し違います サイドバーのいずれかのセルを タップすると セカンダリカラムが 更新されるようにします そこで まずどのセルが選択されたかが わからないと反応できませんので そのために UICollectionViewデリゲートを採用して didSelectItemAt indexPathを実装します 次にDetailViewControllerを セカンダリカラムに表示 これには showDetailViewControllerを呼び出します これで プライマリカラムは Sidebar View Controller セカンダリカラムは 必要に応じて Detail View Controllerになります これで iPad用には素晴らしいですが iPhone用のショートカットも 新しいデザインになっています ２カラムのためのスペースが なかったので 完全に異なるレイアウトを 実装しました コンパクト幅では リストビューにタブバーがありますので レギュラー幅でサイドバーにあった ナビゲーションオプションは コンパクト幅では タブバーとリストビューに分割されます まったく違うレイアウトです ただし ここに表示されているのは 先ほどお話しした UISplitViewController APIを使っています どうすればできるでしょうか プライマリカラムとセカンダリカラムは 別として UISplitViewControllerには compactカラムもあります まさにこのコンパクト幅のデバイスで 表示されるカラムのことです ですので 他のカラムと同様 compactで setViewControllerを呼び出すと コンパクトレイアウトが できあがります これがパワフルなのは 好きなように 独自のコンパクトフローを作成でき しかも レイアウト間の切り替えを 心配しなくてもよいからです スプリットビューコントローラが すべてやってくれます

このアプローチを使う上で 知っておくべきことは このとき ２つの個別の階層を 扱っているという事実です １つはレギュラー幅 もう１つはコンパクト幅です スプリットビューコントローラは 現在のトレイトコレクションに基づき どの階層を使うかを知りますが サイズクラスが変わっても 確実にユーザーに 合うようにする必要があります 例を見てみましょう アプリケーションを開いて Apple Watchフォルダに移動します 別のアプリケーションを並べて 表示したいとします このとき ショートカットアプリケーションを レギュラー幅から コンパクト幅にしなければなりません 私たちは何もしなくても スプリットビューコントローラが コンパクト階層を表示してくれます 素晴らしいですね 今移動したのは 階層だけではありません デフォルトで フローの 最初に戻ります ですので トランジションを スムーズにする必要があります やり方はこうです ルートビューコントローラは スプリットビューコントローラの親です ここから すべてのナビゲーションが開始されます セカンダリカラムに表示される 各ディテールビューコントローラは プロトコルを採用し そのプロトコルは ビューコントローラに 再生成のためのメソッドを 提供するよう要求します サイズクラスが変わるとき 現在のディテールビューコントローラを プロトコルのメソッドを使って 再生成します それができたら 新しいビューの階層に 挿入します このやり方で 状態を確実に 復元できます サイドバーについて もう少しご説明します サイドバーは単なる いくつかのスタイルを持つ ビューコントローラだとわかりました ですが もう少し詳しく見てみます こちらがサイドバーです タイトル サイドバーを折りたたむ 左のバーのボタン 編集モードをトグルする 右のバーのボタンが はっきりと大きく見えています サイドバーの中はどうでしょう？ これは 新しいリストセルを割り付けた コレクションビューです コレクションビューのレイアウトから始まる コードを見てみましょう サイドバーのコレクションビューは compositionalレイアウトを デフォルトの構成で使っています ここで注目するのは sectionProviderです sectionProviderによってコレクションの すべてのセクションを構成できます ここで提供するセクションは 新しいListConfigurationを sidebarの外観で使っています これでレイアウトの設定は ほぼ完了です このセクションそのものは 新しいリストセクションです configurationを渡して完成です これがレイアウトの全体です セルを見てみましょう まず セルを設定する 必要があります 普段は後でデキューするために collectionViewのRegisterを呼び出して セルを登録します 新しいセル登録APIでは 新しいやり方があります セルの登録と構成は１ヵ所で タイプセーフな方法でできます 識別子を追跡する心配が いらなくなりました cellRegistrationを設定して 直接データソースへ渡します こちらがセルの登録方法です 構成方法を見てみましょう これまでは コレクションビューのセルを 見栄えよくカスタムにしたい場合は 結局はサブクラスを作成していました これからは必要ありません 新しいUIContentConfiguration APIの おかげです 構成を組み合わせて 思いどおりのセルにできます 完全にカスタムな構成を作成でき 既存の あらかじめ作成された構成も 利用できます 例えば ここではシンプルに あらかじめ定義された defaultContentConfigurationを 使用しています これは サイドバーのセルスタイルで デフォルトの構成を返します サイドバーの外観のリストに 含まれているセルだからです タイトルと画像を セットするだけです あとはすべてお任せです 以上が iPadのショートカットでした 優れたiPad用アプリケーションは 美しく大きなディスプレイを 最大限に使わせてくれます 皆さんもサイドバーを追加して クリエイティブにしてみてください コンテンツのカラムが ２つでは足りない場合は サプリメンタリカラムを使用します あらかじめ定義された構成で コレクションビューを使用します コレクションビューはテーブルビューに比べ ずっとパワフルです また 事前定義された構成で 機能を簡単に追加でき より洗練されたアプリケーションにできます 最後に 余分なインターフェイスは取り除きます ジェスチャーを研究し ユーザーが自由に動き回れるように モーダルがスペースを占めて 遮ってしまうことがないようにしてください このビデオのリンク先を ぜひチェックしてください 新しいAPIについて もっと多くを学べます ご視聴ありがとうございました iPadのために構築された 皆さんのアプリケーションを楽しみにしています