iPhone Duo時代のIonic/Capacitorアプリ開発

DRANK

iPhone Duoでは、Vertical Barsというナビゲーションバーが新しく導入されて、戻るボタンやタブバーが画面の側面へ移動します。これは思ってた以上にレイアウトとユーザ体験の差を生みます。どれぐらいかというと、App Storeでのアプリ審査で提出するスクリーンショットが、iPhone/iPadにiPhone Duoが追加されたぐらいに。Appleもそれぐらい別の体験としてみているんでしょうね。当然、私たちアプリ開発者も対応する必要があります。そこで、既存のIonicアプリをDuoに対応させる仕組みをつくりました。まずこちらをご覧ください。デモ内のスイッチで縦配置へ切り替えています。同じIonicアプリのタブバーと戻るボタンが、側面へ移動しています。HTMLやCSSで再現したものではなく、UIKit・SwiftUIがレンダリングした本物のNative UIです。Webの画面や処理はそのまま。ナビゲーションだけをNative UIに任せています。以前の記事ではDuoの挙動を調べました。今回は、その仕組みを既存アプリに組み込む方法を紹介します。Ionicを使わないCapacitorアプリにも対応できます。戻るボタンもタブバーも、画面の側面へDuoでは、外側の画面と内側の横向き画面で、戻るボタンやタブバー…