どれだけ調べても古い情報しかなかった
visionProでAppleが実現したい空間コンピューティングでは、モニターを介せずにリアル空間上でアプリが使用できるという世界観だと想像しております。以下のツイートの画像のように、スマホやタブレットで使っていたアプリもそのまま使用することが出来るらしいです。
どうせならiPadのような比較的大きいめなサイズでアプリを操作したいというニーズが高まりそうな予感がします。それであれば、現状iPhoneに特化したアプリは、iPadのサイズにも対応したいと思う開発者は少なくないはず。
しかしどれだけ探してみても、iPhoneデザインをiPadにコンバートするための情報は見当たりませんでした。いや、あるにはあるのですが、いずれも2015年代の比較的古めのものばかりです。ということで今回はQiitaに投稿することにしました。
二つの方法を発見！
調査の結果、ざっくりと以下の二つの方法があることがわかりました。
1. SizeClasses機能
SizeClassesという機能を使えば簡単にiPad向けレイアウトに変換できる、というところまでは行き着きました。
Size Classesは、「Compact」と「Regular」の2つのカテゴリーでデバイスの縦と横の次元を定義します。
Compact: スマートフォン（iPhone）などの小さいデバイスや、大きなデバイス（iPad）でも画面が縦向きまたは分割ビューの場合に適用されます。
Regular: 大きなデバイス（iPad）で画面が横向きで全画面表示の場合に適用されます。
しかし、そこからどう進めばいいのかがわかりませんでした。いずれも古い記事ばかりでXcode自体の仕様が変わってしまっており、「こんな画面無いんだけど！？」と路頭に迷うことばかりでした。
例えば、Xcode13以降は一部のレイアウト（というかVaryForTraitsボタン）が表示されなくなりました。これによりSizeClassesの活用方法がわかりづらくなってしまいました。。どこから編集ができるのかについては、以下で説明していきたいと思っています。
Xcode12以前
Xcode13以降
2. iPad専用のStoryboardを作る
iPhone用storyboardを複製して、新たにiPad用のStoryboardを作るという方法もあるようでした。
iPadの場合は、storyboardの向き先を新しいものに差し替えるというイメージですね。
しかしこちらは今後画面追加になった場合に改修コストが高いことや、バグの発生源になりかねないと感じたので、今回は見送ることにしました。
ということで今回は方法①：SizeClassesを採用することにします。
SizeClassesの使い方
今回は以下の画面を元に説明していきます。
スプラッシュ画面としてアプリ起動時に最初に表示されるImageViewを、iPhoneとiPadでサイズ違いにできるようにするのが目標です。
今はこんなどちらもwidthのConstantを250に設定してあります。
1. 変更したいConstraintを編集
変更したいViewのConstraintをダブルクリックで選択します。
それから編集していきます。画像矢印のプラスボタンを押下しましょう。
2. CompactとRegularを設定する
デフォルトではInstalledとなっている部分ですが、これを「iPhone用のConstraint」「iPad用のConstraint」のようにして、それぞれ個別のものとして設定することが可能になります。
ここで登場するのがRegular、Compactという概念。
ざっくりと「Compact=iPhone」「Regular=iPad」と捉えてもらえると理解しやすいと思います。
正しい区分が知りたい方はこの方の記事などがおすすめです。
まずはiPad用（Regular）のConstraintを作成
storyboardで表示している画面がiPhoneであればCompact、iPadであればRegularを選択します。今回私が設定したいconsraintは「iPad、width」のものなので、以下画面のように設定すればOKです。
デフォルトのInstalledは不要なのでチェックを外しましょう。
これでiPad用のconstraintを作成することが出来ました。
続いてiPhone用のconstraintも作成しましょう。
iPhone用（Compact）のConstraintを作成
もう一つ別のConstraintを作りたいのですが、どうすれば作成すれば良いのかが少しわかりづらいので注意です。
先ほど私はstoryboardでiPad用のViewを表示していたので、今度はiPhone用のViewになるようにします。
すると、先ほどのImageViewにはwidthのConstraintが適用されていないことがわかります。
改めてwidthを設定し、編集しましょう。
あとはiPadの時と同じ手順で設定すれば完了です。
ここまで設定すると、このような感じでwidthのConstraintが二つ反映されていることがわかると思います。
実際にiPad、iPhoneのシミュレーターなどでビルドしてみると、端末によって異なるサイズの画像が表示されるようになりました！これで目的が達成しました！面倒な手順のように感じてしまいますが、一度覚えてしまうと簡単ですね！
Q.iPhoneを横画面にした時のレイアウトを作りたい場合は？
例えばiPhoneでも、縦方向と横方向でレイアウトを変えたいという場合があると思います。この場合も同様にSizeClassesでコントロールが可能です。こちらについても話をすると複雑になってしまうかなと思ったので今回は割愛します。
もし必要であれば、以下の動画がかなり参考になるのでチェックしてみてください。
Q.storyboardではなく、動的にソースコード上でサイズを設定したい場合は？
今回はstoryboardでSizeClassesを使用する手順についてまとめました。
コード上で端末ごとのサイズを指定したい場合には、こちらの方の記事がとても参考になります！
おまけ
質問などあればいつでもご連絡ください。
Twitterもやってます。
https://twitter.com/minnasinario
開発したアプリの一覧はこちらから！
https://lit.link/taminaryousuke
一番バズったアプリは「ガチャメーカー」です！
参考