０、誰もがぶつかるオブジェクト配置の問題
「storyboard上にオブジェクト（部品）を配置して位置を調整し終えた後に、
いざシミュレータで確認してみたら全然思い通りの位置になってなかったよ‥。」
なんてこと、皆さん経験したことがあると思います。
このようにstoryboard上の中心にラベルを配置しても・・・
iPhone6上では右に寄りすぎている！！
iPhone5上にいたっては見切れてるよ！！
みたいな感じです。
↑ありがちすぎて困ってしまいますよね。このような問題についての対処法を
学んでいきたいと思います。
１、storyboard上に配置されるオブジェクトの位置について知ろう！
この問題に対処するにあたって、覚えておくべきポイントが2つあります。
①Sizeクラスという概念が新たに導入されている
Xcode6から導入された考え方で、画面のサイズ（つまりiPhone機種）や向きによって
表示する部品の位置を変えたり、さらには表示する・しないなどをそれぞれ設定
することができるようになりました。
例えば、「縦向きではiPhone5、5S、6、6Plus全てで表示されるけど、横向きでは
iPhone6Plusでしか表示されないラベルを配置する」といった感じです。
では、そのSizeクラスをどうやって変更するのかというとstoryboardの下の部分、
「wAny hAny」と書かれているところです。（赤枠で囲まれている部分です。）
その部分をクリックすると、次のようなポップアップが表示されます。
これを変更することによって特定の画面のサイズ、向きに対応した画面配置を
行うことができるようになっています。
（このSizeクラスについては別の機会に紹介したいと思います。）
今回覚えておくべきことは、
「デフォルトの「wAny hAny」のときに配置したものは全てのiPhoneの画面（iPad含む）
に反映される」
ということです。
②storyboard上のオブジェクトは全て座標で表されている
先ほど配置した緑色のラベルに注目しましょう。（タテ・ヨコ100pxで作成しています）
storyboard上で補助線に合わせて中心に配置し、その座標を確認してみます。
そのオブジェクトの位置やサイズは、ユーティリティエリアのサイズインスペクタ
で確認することができます。（赤枠右から2番目をクリック）
青枠の中の数値がオブジェクトの位置とサイズになります。
・オブジェクトの位置
位置は親ビューからのX座標とY座標で表示されます。
座標の起点は左上となっており、右へ移動するとX座標が、下へ移動するとY座標が増えていきます。
図のラベルはX座標方向（右方向）へ250px、Y座標方向（下方向）へ250px移動した位置に配置されて
いることを意味しています。
この場合のラベルの親ビューは、ViewControllerのViewになりますので、つまりは画面全体のViewとなります。
・オブジェクトのサイズ
サイズは座標の下に書かれている「Width」と「Height」になります。
タテ・ヨコ共に100pxになっているのが確認できるかと思います。
以上の①、②からまとめると、このラベルが配置される位置は
「どのiPhoneの画面のサイズ・向きでも画面の左上の端から、右へ250px、下へ250pxの位置」
になります。画面のサイズは関係なく座標で表されるんですね。
これが各iPhoneで表示がズレる原因となっているワケです。
【補足】
いちいちシミュレータで立ち上げて位置を確認すると時間が掛かってしまいますので、
その解消法としてアシスタントエディタのプレビュー機能を使う方法があります。
①赤枠の真ん中をクリックしアシスタントエディタを表示し、
②青枠の「Automatic」をクリックし「Preview」に変更します。
すると右側の画面に、デバイスごとのプレビューが表示されます。
また、画面下部にある「＋」をクリックすると、各iPhoneのデバイスを追加することができる
ので、表示結果の比較などを行うことができます。
２、Auto Layoutとは
Auto Layoutの機能を使用すると、画面のサイズや向きの違いにも柔軟に対応して
オブジェクトの配置を行うことができるようになります。
例えば、今配置しているラベルを、どの画面サイズにおいても中心に配置する。などと
いった設定が簡単に行えるようになります。
画面の下の部分にある3種類のアイコン（左からAlign、Pin、Issuesメニューといいます）、
ここを選択することで配置オブジェクトに対して様々な制約を設けることができます。
試しに一番左のAlignメニューをクリックして開いて設定を入れてみましょう。
赤枠の「Horizontal Center in Container」と「Vertical Center in Container」
の2つにチェックを入れてみます。
すると1番下の部分が「add 2 constraints」と表示が変わったと思いますので、そこをクリック
します。
すると、storyboard上に青い補助線が表示され、右側の画面のプレビュー上では全ての
iPhoneの画面上でラベルが画面上の中心に場所が変更されたのが確認できるかと思います。
（ラベルのサイズが変わってしまっていますが、そのあたりの変更方法は次回以降に説明します。）
このように、Auto Layout機能を使用することによって、各デバイスごとに異なる配置にすることが
できたり、全デバイス共通で配置場所を指定したりすることができるようになります。
次回は「Alignメニュー」の各項目の使い方について説明していきたいと思います。
TechProjin 開発系基礎講座 連載リンク
基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載
AIなどで注目急上昇！これから学ぶならPython！！
独学で学ぶ-pythonプログラミング 連載
汎用性◎ 定番プログラミング言語JAVA
Java基礎講座 連載
