FlutterアプリはiPhone Duoに対応できていますか？

Apple初の折りたたみ式iPhoneであるiPhone Duoが、10月23日に発売されました。これによって、アプリ開発者には多くの疑問が生まれます。開発にはどのような影響があるのでしょうか？ この新しい折りたたみ式の形状に合わせて、アプリを必ず調整しなければならないのでしょうか？ もしそうなら、どのような難しさがあるのでしょうか？ 対応しなければどうなるのでしょうか？ 端末を折りたたんだときと開いたとき、アプリはどのように表示されるのでしょうか？ Flutterには、インターフェースを調整するためにどのような機能が用意されているのでしょうか？

この記事では、iOS向けにアプリを配信している人が今後何に備えるべきか分かるように、これらの疑問に手短に答えていきます。最後には、少ない手間でアプリのインターフェースを調整し、新しいiPhone Duoできれいに表示するための、とても簡単な方法も紹介します。

iPhone Duoでアプリの表示はどう変わる？

iPhone Duoでアプリを実行すると何が起きるのかを分かりやすくするために、非常にシンプルなサンプルアプリを用意しました。ノートの一覧を表示し、いずれかをタップすると、その内容を確認できる画面に移動するだけのアプリです。

では、同じアプリをiPhone Duoで実行するとどうなるか見てみましょう。まずはiOS 27.1 SDKでビルドし、インターフェースにはほかの調整を一切加えていない状態です。

見てのとおり、アプリは利用可能な領域全体を埋めるようにサイズが変わります。端末を折りたたんだ状態では、外側のディスプレイの寸法とアスペクト比が通常のiPhoneに比較的近いため、大きな問題にはなりません。しかし、端末を開くと、細いスマートフォンのウィンドウ向けに設計されたインターフェースが、内側のディスプレイの横幅いっぱいに広がります。動作はしますが、最適な体験とは言えません。

FlutterをiPhone Duoに対応させる

幸い、FlutterにはiPhone Duoだけでなく、あらゆるウィンドウサイズにインターフェースを適応させるためのウィジェットや機能が豊富に用意されています。正しい考え方は「FlutterアプリをiPhone Duoに合わせる」ではなく、「Flutterアプリを新しいサイズに合わせる」ことだと思います。物理的な端末からいったん離れて考え、利用できる領域に応じて動的に変化するレスポンシブなインターフェースを作るということです。

たとえば、ほんの少し調整するだけで、次のような対応ができます。

見てのとおり、Duoを折りたたんでいるときは以前のレイアウトを維持しています。開いたときは内側のディスプレイの広い横幅を活用し、左にノート一覧、右に選択したノートの詳細を表示します。

この効果は、親ウィジェットから受け取ったサイズ制約を提供するLayoutBuilderを使えば簡単に実現できます。端末の向きが変わったときや、iPhone Duoを折りたたんだり開いたりしたときなど、制約が変わるとFlutterはbuilderをもう一度実行します。これにより、利用可能な領域に応じて適切なインターフェースを選べます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Notes')),
    body: SafeArea(
      top: false,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth >= _wideLayoutWidth) {
            return _WideNotesLayout(
              notes: _notes,
              selectedIndex: _selectedNoteIndex,
              onSelected: _selectNote,
            );
          }

          return _NotesList(notes: _notes, onSelected: _openNote);
        },
      ),
    ),
  );
}

この例ではLayoutBuilderに加えてSafeAreaも使い、システムUI、カメラ、丸みのある画面の角にコンテンツが重ならないようにしています。Flutterには、適応型のインターフェースを作るための機能がほかにも数多くあります。MediaQuery.sizeOf()ではアプリウィンドウの現在のサイズを取得でき、ExpandedとFlexibleでは行や列の中で領域を分配できます。ConstrainedBoxでは最小値や最大値を設定し、コンテンツが広がりすぎるのを防げます。これらは一例にすぎず、Flutterには利用可能な領域にインターフェースを合わせるための機能がさらにたくさんあります。

iPhone Duoへの対応は必須？ 対応する価値はある？

iPhone Duoに対応する価値があるか、どの程度まで作り込むべきかを考える前に、まずはAppleが発表した要件を確認しておきましょう。

これらの要件は、iPhone Duo専用のインターフェースを作ることまで明示的に義務付けるものではありません。ただし、端末専用のスクリーンショットを求めていることから、AppleはアプリがDuoでどのように動作するかを確認し、少なくとも目立つ表示上の問題は修正することを期待しているように見えます。

では、この対応にどれだけの労力をかける価値があるのでしょうか？ 答えは、アプリの種類とユーザーの期待によって大きく変わります。私のアプリは主にスマートフォンで使われており、タブレットユーザーの割合はごくわずかです。そのため、iPhone Duoを使うユーザーもそれほど多くないと考えるのが自然です。私はおそらく、Duoでアプリが問題なく動作し、端末専用スクリーンショットの新しい要件も満たせる程度の、必要最低限の対応を行います。

それでも、iPhone Duoを使うユーザー数だけで労力を判断するべきではないと思います。すでに柔軟なインターフェースを備えているアプリなら、わずかな変更だけで十分な結果を得られるかもしれません。そうでなければ、Duoへの対応を通じて、タブレット、サイズ変更可能なウィンドウ、将来の形状でも発生する問題を見つけられます。その意味で、この作業にはiPhone Duoだけにとどまらない価値があります。

まとめ

iPhone DuoはAppleの新しいおもちゃであり、より広い領域が与えられたときに自分たちのアプリがどう動作するかを見直す、もう一つのきっかけになります。すでに述べたように、「アプリをiPhone Duoに合わせる」のではなく、「アプリをさまざまなウィンドウサイズに合わせる」と考えるのがおすすめです。そうすれば、この作業はiPhone Duoだけでなく、タブレットや現在および将来のほかの形状にも役立ちます。

それでは、また次回！