こんにちは。
Step App Schoolの小林です。今回はXcodeのConstraints（部品を整列・制約させる機能）について説明します。

1．「Autorisizing」と「Constraints」とは？

iPhoneやiPad、Macのアプリを作るときは、「Swift」という言語を使います。一般的にはApple社の「Xcode」という開発用のソフト（無料）を使ってつくっていきます。このXcodeというのは便利で、コード（プログラム）をかけるだけではなくて、iPhoneの操作画面を作ることもできます。操作画面は、PowerPointやKeynoteなどのプレゼンテーション作成ツールを使ったことがある方だったら、かんたんに使いこなせます。

ただ、むずかしいところもあります。「Autorisizing」や「Constraints」と呼ばれる部分です。2つとも、部品を伸び縮みさせたり固定させたりする機能です。iPhoneもiPadも、画面のサイズがバラバラですから、アプリの画面はそれに合わせて自動で大きさを調整してくれると便利ですね。この機能がないと、iPhoneのサイズごとに操作画面を作りこまなくてはなりません。

ところが「Autorisizing」と「Constraints」の動きは、PowerPointやKeynoteなどのプレゼンテーション作成ツールには備わっていないためにとっつきづらいものになっています。またその2つはそれぞれ異なる法則・哲学で動きをコントロールしているので、初心者にはわかりにくいのです。私も1年くらいいじっていて、ようやくわかったくらいです。

「Autorisizing」は、画面サイズが変わったときに、同じ大きさで拡大・縮小するものです。自動でリサイズしてくれる、という名前がその機能をよく表しています。Web画面や地図をアプリに取り込むときによく使います。

一方「Constraints」は、「整列・制約」と呼ばれたりします。画面のサイズが変わっても、あまり大きさを変えたくないときや、位置をずらしたくないときに使います。たとえばiPadで地図を表示するとき「地図自体はiPhoneよりも大きく表示されていいけど、設定ボタンまで巨大化するとカッコわるい」と思ったとします。そのときは、サイズはそのままで位置だけ画面右下に固定できます。

「Autorisizing」はあまりむずしくないのですが、「Constraints」は動きが独特なので、少し解説したいと思います。

2．Constraintsの操作方法

Constraintsは、Xcodeの画面の右下の方にあります。

この3つのアイコンのうち、左にある跳び箱のようなアイコンでは、水平位置と垂直位置を決めます。

確定するときは、画面下にある「Add　◯ Constraints」を押して決めます。◯の中には、決めた制約（Constraints）の数が入ります。

真ん中にある四角いインベーダーのようなマークは、画面はじからの位置と部品の大きさを決めるためのものです。

まず、制約を入れたい部品をクリックした後にこのアイコンを押すと、上の画面のようなアイコンが出てきます。十字になっているところは、上下左右からの距離です。画面のはじからの距離も指定できますし、右にある「▼」をクリックすると、上下左右に配置されている部品からの距離も指定できます。「I」のようなマークの部分は、制約を入れたいところにチェックするためのものです。

部品の横幅は「Width」、部品の縦幅は「Height」で指定します。チェックボックスをチェックして、サイズを入力してください。余白を含んだ指定をしたかったら「Constrain to margins」のチェックを入れてください。

3つのアイコンのうち一番右は、あまり触らないほうがいいものです。Constraintsが多くなってきたので、一度ぜんぶ解除したい時に使います。

「Clear Constraints」はすべての制約を解除するもので、「Reset to Suggested Constraints」はすべての制約を解除したうえでXcodeがオススメする制約を自動で入れてくれるものです。上半分は今見ている画面のみ、下半分はすべての画面の制約をコントロールするものです。これらを操作するときは慎重に進めてください。

3．Constraintsの修正は「消去」して「再入力」

Constraintsの何がむずかしいのか説明をする前に、iPhoneの操作画面のしくみについて解説します。PowerPointのように、部品をどんどん追加するだけで操作画面ができあがっていく感じがします。こういう操作のことをGUI（Graphical User Interface）と呼んだりします。でも部品を配置するごとに、実は自動でコード（プログラム）が記入されています。

自動で記入されているコードは、人間が見えるところにあることもあるし、人間が見えないところで動いていることもあります。「なぜそんなややこしいの？」と思うかもしれませんが、ここはしょうがないと思ってください。

当然、Constraintsを設定しても、自動でコードが記入されます。ただし、そのコードは開発者から見えません。

ここで注意です。Constraintsを設定したあと、「もうちょっと配置は下にしようかな？」と変えたいとします。そのときは、前に設定したConstraintsを「消去」してから「再入力」してください。

でないと、上記の画面のようにコードが二重に書かれてしまうからです。GUIで操作するときはこういうことがたびたびあるので、十分に注意してください。私はこのことを知らなかったので、最初のころは二重・三重の制約がついてしまい、画面上がエライことになっていました。

4．Constraints入力のコツ

Constraintsの操作方法は、おおまかに理解できたと思います。しかし、実際に部品を配置しようとすると、エラー（赤い補助線）が画面に入ります。その理由は、Constraintsの設定原則を理解していないからです。

Constraintsの原則は「4カ所（タテ2カ所、ヨコ2カ所）を固定する」です。これを覚えておけば、だいたいはうまくいきます。

「上下左右の4カ所を固定するのはわかるけど、タテ2カ所とヨコ2カ所とは？」と思うでしょう。具体的にタテ2カ所とは次の4つから2つを選んで指定することです。

・画面最上部Safty Areaからの距離
・画面最下部からの距離
・部品の縦幅（height）
・中央を起点とした垂直距離（Vertically in Container）

コツは「変化しても構わない部分を指定しない」点です。部品の縦幅が変化しても構わないなら、画面の上と下からの距離を固定すればOKです。こうすると、Constraintsの縦幅のエラーは解消します。

一方ヨコ2カ所は、次の4つから2つを選んで指定してください。

・画面左はしからの距離
・画面右はしからの距離
・部品の横幅（width）
・中央を起点とした水平距離（Horizontally in Container）

具体的に見てみましょう。部品を画面の一番下に、余白なしではりつけたいときのConstraintsの設定をしてみます。

変化しても構わない部分は、部品の横幅と、上の余白になります。この点に注意して考えます。

まずタテ2カ所は「画面下からの距離はゼロ」であること、「部品の縦幅（height）の大きさ100」などと固定することです。すると、設定しなかった画面上からの距離や、中心からの距離は変化します。

次にヨコ2カ所を決めます。変化しても構わない部分は「部品の横幅」と「中心からの距離」です。つまりConstraintsで設定するのは「左はじからの距離がゼロ」であることと「右はじからの距離がゼロ」であることです。

わかりましたか？　実際にXcodeをいじりながら設定するとわかりやすいかと思います。

せっかくなので、もう1つ画面の設定をしてみましょう。次は、少し余白をもって部品を固定したい場合です。

まず、変化しても構わない部分を決めます。仮に「部品の縦の大きさと横の大きさは、画面サイズによって変化しても構わない」としたなら、他の部分を固定することになります。

部品より上と左右の余白の幅を決めます。例えば「50あける」などと固定します。これで3カ所が決まりました。残りはタテの1カ所です。ただ、部品の大きさは、iPhoneのサイズによって多少伸び縮みしたほうがいいです。そこで、中心からのタテの距離を指定します。

中心からの距離を指定するときは、画面右下の跳び箱のような形のアイコンをクリックします。

挙動は上の画面にしたがって動きます。つまり、水平方向に少し右寄りに動かしたければ「Horizontally in Container」をプラスにします。今回の場合は、垂直方向に上に配置したいので「Vertically in Container」をマイナスにします。マイナス100〜150あたりがしっくりくるかと思います。余談ですが、iPhoneの中心に部品を置きたいときは、「Horizontally in Container」と「Vertically in Container」をすべてチェックを入れて「0（ゼロ）」を入力します。

これで4カ所が固定されたことになります。「なんとなくわかった」で済ませず、自分でXcodeをいじりながら挙動を確かめたほうが学びが深いと思います。ぜひいろいろ試してみましょう。

次の記事はこれです。

以下は、これまで書いたnoteの記事です。

【＃1 プログラミングの準備】
【＃2 背景変換アプリ】カンタンなコードを書いてみよう
【＃3 背景変換アプリ】プログラムの中身を理解してみよう
【＃4 Swift　iPhoneアプリをつくる流れを理解しよう】
【＃5　画像切替アプリ】お気に入りの写真を表示しよう
【＃6　画像切替アプリ】コードの内容を理解してみよう
【＃7 iPhoneアプリ開発でよく出るエラーをつぶそう！】
【＃8　音をならすアプリ・前編】素材を自分で集めよう！
【＃9　音をならすアプリ・後編】コードを書いてみよう！
【＃10　音をならすアプリ】コードの中身を理解しよう！

↓このプログラミングスクールで教えていますので、興味がある方は無料講習を受けてみてください。