iOS AppをMacへ

♪ ♪

「iPhoneとiPadのAppを Macに持ち込む」へようこそ Mac CatalystのエンジニアのOwenです

M1 MacでiOS Appをそのまま配布している人も Mac Catalystで進化しようと考えている人も Catalyst Appを出荷済みで さらに良くしたい人も MacであなたのAppを最高にするための 新しいAPIとテクニックが共有できて嬉しいです その前に Mac Catalystの可能性を示す デベロッパーの素晴らしい作品を紹介します Craftは 簡単に文章を書き始め 美しい文書を 作成できるAppでApp Storeの2021年 Mac App of the Yearを受賞しています Mac Catalystならこの素晴らしい体験を あらゆるデバイスで利用できるため 次のアイデアが浮かんだ時に いつでも対応できます DarkroomのスマートなAI編集ツールは 写真のワークフローを効率化し 現場でiPhoneやiPadで編集を開始し 自宅でMac Catalystで仕上げられます 優れたデザイン 革新性創意工夫に与えられる Apple Design Awardを受賞し 2018年からは App Store Editor’s Choice Appに選ばれています

Night Skyはコンピュータから 直接宇宙を探検できる素晴らしいAppで 星座について学んだり 月 惑星 衛星の詳細な3Dモデルで より詳しく観察できます そのデザインとビジュアルで Webby賞やLovie賞を多数受賞しています

アスファルト9 - Legendsは Apple Design Awardを受賞した 唯一のレーシングゲームで 爽快で力強い レーシングシミュレーションです

では MacでAppの素晴らしい体験を 実現するための方法をすべて紹介します 今回は 既存のiOS Appを Mac上で動かす最も簡単な方法で M1上でiOS Appをネイティブに動かすための 新しいオプションをいくつか紹介します

次に XcodeでMac Catalystの実行先を追加して 何が変わるかを説明します

Desktopクラスの新しいiPad APIの採用により CatalystAppがフリーで手に入れられる 新しい動作を紹介します

さらに Mac Catalystの 新しいAPIによって実現した Macに特化した改良点を紹介します

まずはM1 MacでiOSのネイティブAppを 作るための新しい選択肢を紹介します

あなたがオプトアウトしていない限り iOS Appは Mac App Storeで M1 Macで既に利用可能です 「iPhoneとiPadのApp」 タブの検索で見つかります そして MacでのApp体験を向上させられる 新しい追加機能をいくつか備えています Info plistに追加できる新しいキーが2つあり MacでiOSAppを起動する方法を指定できます これらのキーはSDKのバージョンに縛られず iOSやmacOS 12.1以前のMacでは無視されるため 恩恵を受けられるAppに追加しても安全です

最初のキーである 「UISupportsTrueScreenSizeOnMac」は Appが様々なディスプレイ構成に 対応することを示します これで Appは互換性のある iPadのサイズではなく 本当の画面サイズと ピクセル密度が取得できます

2つ目 「UILaunchToFullScreenByDefaultOnMac」は Appが起動と同時にフルスクリーンモードに なることを希望することをシステムに伝えます 2つのキーは 特にゲームやマルチメディアAppで 効果を発揮し ピクセルパーフェクトで 余白なしのフルスクリーン体験を提供します

これらのキーは数々の賞を受賞している Sky: Children of the Lightで採用され すぐに没入感のある体験が できるようになりました ゲームを起動するとすぐに 画面いっぱいに広がる 美しい探検の世界へと引き込まれます 入力をAppが期待するiOSの マルチタッチジェスチャーや デバイスの動きに自動的に変換する Touch Alternativesも MacでのApp体験を向上します 既に App Storeで 最も人気のあるゲームの多くが ビルトインのタッチ代替サポートを 追加しています 起動すると タッチ操作とキーボードやマウス トラックパッドとの変換方法を説明する チュートリアルを自動表示します 例えば 矢印キーでウィンドウの中央からスワイプし スペースキーでタップする シミュレーションが可能です

自動 Touch Alternativesを有効にするには App内に com.apple.uikit.inputalternatives.plist という 新しいplistファイルを作ります

まず「defaultEnablement」キーを追加し 文字列の値を「enabled」にして Touch Alternativesを 直ちにオンにするようシステムに指示します

その下に「required Onboarding」を追加します これは Appに最適と判断した コントロールのリストを含む配列です

タップ チルトドラッグ スワイプ トラックパッドからの ダイレクトタッチ入力の5種類の操作方法を 搭載しています

Touch Alternativesを有効にすると コントロールは すべてアクティブになりますが Appにとって重要なものを決定し 強調したいコントロールのみ オンボーディングリストに 追加する必要があります これは AppのMacでの実行時 に検出され コントロールを 強調するオンボーディング シートが表示されます Appの設定では　plistで指定された 優先コントロールの表示と すべてのコントロールの 表示の切り替えが可能です

もちろん Appに直接キーボードとカーソルの サポートを実装するのがベストです キーボードを接続したすべてのデバイスで Appが正しく動作することを保証します

詳しくは 「Appでハードウェア キーボードをサポートする」と 「トラックパッドとマウスの入力を処理する」 をご覧ください 早速 Mac Catalyst Appにするまでの 流れを説明します

プロジェクト設定で Mac Catalystデスティネーションを追加すると Appを自動的にすべてのMacで実行可能な Mac Catalyst Appに変換し Mac Catalyst APIでさらに カスタマイズ可能になります インターフェイスをMac用に最適化することで AppKitスタイルの ネイティブコントロールを実現し Appのコンテンツを ネイティブスケールでレンダリングできます

チームが制作したMarkdownのデモAppを使って iPadの新機能を紹介する予定です 最初にMacに持ち込んだ際は 「Scaled to Match iPad」モードで

動作しています Optimize for Macに切り替えると 自動的に多くの変更が行われます

並べて比較すると その差は歴然です AppがMac用に最適化されると UINavigationBarは リッチなNSToolbarに変換され ネイティブのAppKitコントロールを提供します この変換は他のコントロールでも同様です また 文字サイズも調整します iPadイディオムのテキストは iPadサイズでレンダリングされた後 元のサイズの77%に縮小されます Macイディオムのテキストは Macネイティブのフォントレンダリングで 処理され ピクセルパーフェクトなスケールで行われます テキストは常に鮮明に見え 私たちのAppに理想的です このAppをMac Catalystにオプトインし 動作確認するとともに iPadOS 16の新しいAPIが提供する 新しいMacの自動動作の詳細を見ていきます すでに「デスクトップクラスのiPadの紹介」や 「デスクトップクラスのiPad Appを構築する」 を ご覧になった方は iPadOS 16でAppを強化する 新しいツールの数々をご存知だと思います これらの新しいAPIは Macのネイティブな表現に見事に変換されます マークダウンAppのツアーで 新しいいくつかの動作に焦点を当てていきます

コントロールとナビはUINavigationBarから NSToolbarに移動します まだツールバーが未作成なら自動的に 作成されます Catalystで既にNSToolbarを使っている場合は それに配慮します

センターアイテムコントロールは NSToolbarItemsになります

ドキュメントベースのAppでは ウィンドウタイトルにドキュメント名を表示し アクセシビリティシステム設定で 「ウィンドウタイトルアイコンを表示」 を有効にすると プロキシアイコンも表示して Macで期待される表示になります

またナビゲーションコントローラーを 使用する場合は 戻るボタンなどの ナビゲーションコントロールも ツールバーに持ち込まれます さらにFileメニューに ドキュメントセントラルの 新しいメニュー項目 「複製」「移動」「名称変更」 「名前を付けて書き出し」を追加しました

メニューを有効にするには レスポンダチェーン内の UIResponderオブジェクトで duplicate move rename exportの関数を オーバーライドします

これらのFileメニューが不要なAppは UIMenuBuilderで削除する必要があります Appメニューを制御するには AppDelegateにbuildMenuメソッドを実装します

新しいDocumentメニュー項目は

UIMenuIdentifier値として .documentを持ちます Appに検索バーが含まれる場合は 自動的にNSToolbarにも取り込まれ 最初は検索ボタンとして表示され クリックするとバー内に展開します それを支援するUISearchTextFieldは NSToolbarItemの内部にホストされ カスタムビューでも利用可能です 検索候補メニューと検索スコープバーも AppKitのネイティブコントロールに変換します

デスクトップクラスのiPad機能の採用によって フリーで得られる すべての新しいMacの動作に加え マルチウィンドウや ツールバーの動作改善のため Catalyst専用の新しいAPIを いくつか追加しています Markdown Appをもう1度確認して 新旧のAPIを組み合わせて Mac固有の機能を追加します Mac Catalystの既存のAPIから 私たちのAppをより向上させるものを選びました

ネイティブコントロールと 自動NSToolbarを得るため Macのイディオムを採用しました カスタムポインターを追加し カスタム分割表示の中央にある スライダーハンドルにマウスを移動すると ポインターが水平の二重矢印に切り替わり 分割のサイズが変更できる ことを示すようにしました

そして UIApplicationSupportsPrintCommandの plistキーで印刷のサポートを追加しました

Appを検討する際 これらの機能をひとつずつ 追加する必要はありません 代わりに どのようなAppを作るのか そのためにどの機能が最適かを考えましょう MacとMac Catalystの ヒューマンインターフェースガイドラインを 確認したり 使用中のAppからヒントが得ましょう

これらの機能の実装で このAppはすでに素晴らしい状態にあります 新しいMac Catalyst APIで さらに多くのことが可能です Appのウィンドウフレームや コントロールのカスタマイズ NSToolbarにUIViewコンテンツを表示したり ツールバーアイテムからポップオーバーを 表示するオプションを追加しました これらの新しいAPIで Mac上でウィンドウから始まる Appをさらに改良します

Catalyst Appは 既存の UIWindowScene APIで複数の ウィンドウをサポートします さらにmacOS Venturaでは 赤黄緑ウィンドウコントロールの スタイル設定や プログラムによるウィンドウの サイズ変更と再配置 特定のシーンのフルスクリーンの無効化など ウィンドウをさらにカスタマイズする APIを追加しました

これによりマークダウンAppに機能を追加し マークダウン構文で役立つ 補助パネルを表示します このパネルは新しい ジオメトリリクエストAPIで小さくなり 最小化とズームボタンが無効になります

シーン作成時に Scene Delegateの 「scene willConnectTo session」で 希望のフレームを作成します 常にeffectiveGeometryから 現在のフレームで開始すると良いです シーン作成前にCGRectNullで初期化され その値は最初のシーン作成で無視されます サイズを変更してから 新しい UIWindowScene.macGeometryPreferences オブジェクトを作成して systemFrameの引数としてフレームを渡し シーンに新しいフレームを設定します

その後 scene.requestGeometryUpdate() メソッドで更新を送信します これはリクエストなので システムは新しいジオメトリを拒否でき その場合 エラーハンドラの コールバックに詳細がコールされます このようにシーンのwillConnectToSession メソッドで実行すると Appの最初の起動に適用されますが それ以降の起動でシステムが実行する 適用可能な状態の復元に取って代わられます

またこれは小さなヘルパーパネルなので 新しい windowScene windowingBehaviors オブジェクトから最小化ボタンを無効にして sizeRestrictionsの新しいプロパティから ウィンドウをフルスクリーン化する機能を 無効にしています

この新しいMarkdown Hintsのウィンドウは 私たちが要求したサイズで表示されます 黄色の最小化と 緑のズームウィンドウボタンが無効になり 赤のクローズボタンのみ残ります

これらのオプションは シーンの作成時だけでなく シーンのライフサイクルにおいて いつでも読み取り専用の resolvedGeometryプロパティから 現在のフレームを確認し 必要な修正を加えて 新しいジオメトリの更新が要求できます ここでは ウィンドウの大きさを変えずに 原点を変更する方法を紹介します

ジオメトリーには2つの 重要なポイントがあります まず systemFrameはMacデスクトップ上の ウィンドウのフレームを指示するため systemFrameプロパティの1ポイントのサイズは 常に AppKitの1ポイントのサイズになります Mac用に最適化されたAppの場合 これはUI要素と同じスケールです ただしAppをiPadに合わせて スケーリングした場合は 77%のスケールファクターで差が出ます 次に 座標空間の原点は メインディスプレイの左上隅です 複数のディスプレイを使用する場合 システム表示設定でメニューバーが 表示されているディスプレイが メインディスプレイです

新しいMac Catalyst APIでは 3つのウィンドウコントロールボタンの状態を それぞれ制御できます UIWindowSceneの新しいwindowingBehaviors オブジェクトにはclosableとminiaturizableの 2つのプロパティがあり それぞれのウィンドウ動作を調整し 赤と黄色のウィンドウボタンの 有効 無効が設定できます 緑色のボタンはウィンドウのサイズ変更と フルスクリーン化を両方扱います sizeRestrictionsの新しいプロパティ 「allowsFullscreen」でフルスクリーンを 無効にしたり サイズ制限を利用して 最小と最大サイズを同じにすることで リサイズを無効にできます 両方を行えば 緑色のボタンも無効になります

また 新しい「isFullScreen」プロパティにより シーンが現在フルスクリーンかどうか 確認できます 今回はMac用のツールバーの 改良に焦点を当てます UINavigationBarからの自動変換に頼るか Appのコードで独自のNSToolbarを 管理するかに関わらず ツールバーのカスタマイズのための 新しいオプションを追加しました

Mac Catalystの新機能として UIViewsをNSToolbarに アイテムとして追加できます 現在の単語数を表示する AppのカスタムUIViewをデザインしました また クリックすると段落数やセクション数 読了時間 翻訳などの詳細が ポップオーバーで表示されます 新しいデスクトップクラスの iPad APIを使っているので UIBarButtonアイテムのcustomView プロパティは 自動的にラップされて ツールバーに追加されます しかし NSToolbarを独立して管理する場合 NSUIViewToolbarItemという 新しいNSToolbarItemの サブクラスも追加されました NSToolbarDelegateの itemForIdentifierメソッドから ツールバーアイテムをインスタンス化するため NSToolbarItemと同じように NSUIViewToolbarItemを使用することができます イニシャライザーはラップするUIViewを取り NSToolbarに挿入されます

NSToolbarは ツールバーカスタマイズモードで 一意のツールバーアイテム インスタンスを期待します UINavigationBarから NSToolbarの自動ホスティングを使用している場合 ツールバーのカスタマイズのためにシステムによって ビューが自動的にクローンされます しかし独自のNSToolbarを管理する場合 デリゲートは同じUIViewインスタンスを 再利用するのではなく 各NSUIViewToolbarItemインスタンスのために UIViewのユニークなインスタンスを 作成する必要があります

ツールバーに新しいアイテムを追加して ポップオーバーの動作を追加してみます ツールバーアイテムのアクションで ポップオーバービューコントローラを作成し そのソースアイテムを ツールバーアイテムに設定します そしてポップオーバーを提示します

ポップオーバーのコードを配置し ツールバーのアイテムをクリックすると ツールバーのアイテムに固定された ポップオーバーのプレゼンテーションで 追加の詳細が表示されます

Mac Catalyst の他のコントロールと同様に UINavigationBar の新しいプロパティ preferredBehavioralStyle を使用して ナビゲーション バーの変換を オプトアウトすることができます デフォルトは自動ですが .macに設定することで 明示的に翻訳を要求することができます .padに設定すると ナビゲーションバーが自動翻訳されなくなります

これらのオプションによりAppのツールバーに 新しいカスタマイズのレイヤーを追加できます

これらの新しいツールで皆さんのAppが どのように改善されるのかとても楽しみです iPad Appが Mac App Storeに 自動的に登録されることで まったく新しいユーザーに対して Appを提供できます iPad Appをアップロードしたら Macで動かしてみてください またMac Catalyst Appとして次のレベルに進み iOS 16とmacOS Venturaの新しいAPIを使って Appを最高の状態に仕上げましょう

MacにあなたのAppを持ち込むのは簡単です 我々はあなたの努力をご紹介するのが楽しみで 次の作品が待ちきれません