画面が折れて開くところ
iPhone Duo 対応
折りたたみから開いたときにレイアウトが崩れず、入力中の内容が消えないように直します
機種名で分岐したコードは、次の機種が出たときにまた崩れます。
増えたのは解像度ではなく状態の数です
折りたたみ端末は、閉じたときに使う外側の画面と、開いたときに使う内側の大きな画面を併せ持ちます。アプリは閉じた状態、開いた状態、回転、分割表示、そしてその間を移る一瞬まで、いくつもの状態に置かれます。ひとつの状態に合わせて固定した画面は、残りの状態でずれます。文字が切れ、ボタンが指の届かない位置に寄り、書きかけの文章が消えます。
作業内容
-
機種名ではなくウィンドウサイズで判断する
いま使えるウィンドウサイズとセーフエリアを基準に画面を決めるよう直します。機種名で分けると新機種のたびに手を入れることになり、分割表示のように使用中にサイズが変わる状況はそもそも捉えられません。
-
開いた画面に合う構造へ
広くなった画面を一列のまま引き伸ばすのではなく、一覧と詳細を横に並べる二列構成へ移します。同じ画面が、閉じたときには一列に戻ります。
-
折り目の上を空けておく
画面中央の折り目にタブバーや入力欄、主要なボタンが重なると、読むのも押すのも難しくなります。状態ごとにそこへ何が来るかを確認して動かします。
-
開いても作業内容が残るように
入力中の文章、スクロール位置、再生位置が切り替えのあとも残るかを確認します。折りたたみは回転とは別の動きなので、個別に確認しないと静かに消えます。
-
状態ごとに実機確認
閉じた状態、開いた状態、回転、分割表示、切り替え中をひとつずつ置いて、画面ごとの見え方を記録します。
対応記録
どの状態で何がずれ、どう直したかを画面と一緒にまとめてお渡しします。次に新しい画面をつくるときは、この記録の状態リストをそのままお使いいただけます。
進め方
-
アプリと対象画面の共有
リポジトリの読み取り権限またはインストールできるビルドと、絶対に崩れてほしくない画面をいくつかお知らせください。
-
状態ごとの点検
閉じた状態、開いた状態、回転、分割表示、切り替え中をひとつずつ置いて、どこがずれるかを記録します。
-
範囲と期間の合意
直す箇所と所要期間を先に決めます。合意前に費用は発生しません。
-
修正と引き渡し
レイアウトと状態保持を直し、作業記録と一緒にお渡しします。
こういう場合に向いています
- すでにストアで配信中で、画面がひとつのサイズに合わせてつくられている iOS アプリ
- iPad や分割表示でも以前からレイアウトがずれていたアプリ
- 機種名や固定サイズで画面を分ける処理が残っているチーム
よくある質問
- iPhone Duo だけの対応ですか
- いいえ。機種名ではなく、いま使えるウィンドウサイズで判断するよう直すため、ほかの折りたたみ端末や iPad、分割表示まで同じコードで対応できます。一機種だけを見て分岐を増やすと、次の機種でまた同じ作業が必要になります。
- アプリをつくり直す必要がありますか
- 多くの場合は必要ありません。手を入れるのはレイアウトと状態保持です。画面構造そのものを変える必要があるアプリの場合は、点検の段階でお伝えし、範囲を決め直します。
- 実機が必要ですか
- なくても進められます。シミュレータで状態を切り替えながら確認します。実機があれば、手に持ったときの指の届く位置まで併せて確認します。
- React Native や Flutter のアプリでも対応できますか
- 対応できます。判断の基準は同じです。ただしウィンドウサイズやセーフエリアの取得方法はフレームワークごとに異なるため、お使いのものをお知らせいただければ可能な範囲を先に確認します。
- アプリストア要件対応とは何が違いますか
- ストア要件対応は、審査を通すためにターゲットバージョンを上げる作業です。こちらは審査とは関係なく、画面が広くなり折れる状況でレイアウトと作業中の内容を守る作業です。両方まとめてご依頼いただければ一度に整理します。