iOSアプリを作ろう・シンプルアプリを作る

Xcode を使って地図を表示するミニアプリを作りシミュレータで動かしてみましょう。UI部品の配置やコードとの接続などインターフェースビルダーの基礎などの Xcode の操作に慣れるのがアプリ開発の第一歩です。

毎月札幌でiOSアプリ作りをアシストするセミナーをやっています。1時間にわたるセミナーの全内容を物理的に参加できない方のためにnote上で公開します。ぜひアプリ作りにチャレンジしてください。

iOSアプリを作ろうシリーズのセミナーは今後も月一回のペースで続けます。
詳細は connpass.com の 札幌Swift でご確認ください。そして機会があればぜひ参加してください。
アプリ作りやプログラミング教育に関連する話題は 札幌Swift のfacebookページ で発信しています。

快技庵（かいぎあん）の高橋です。
1980年代後半からのMacのアプリを作ってきた現役開発者で現在は電子書籍などのiOSアプリを作っています。
noteやTwitterのアイコンは最初に作った電子書籍アプリ豊平文庫のアイコンにしています。

iOSアプリ作りをアシストするセミナーのシリーズ、今回は『シンプルアプリを作る』です。
セミナーでは最初にすべての過程をデモしました。後から復習できるようにアプリを作る流れをスライドにしたので順に解説していきます。

【2020年3月30日：見直し一部に加筆修正し、Xcode 11.4サンプルも追加しました】

セミナー終了後に Xcode 10.2 がリリースされました。Xcode のバージョンで影響を受ける部分はこの記事中で明記しています。
【2020年3月に Xcode 11.4 がリリースされました。】

このセッションでは Xcode のテンプレートからシンプルな地図アプリを作ります。さあ、いっしょにゼロから作りましょう。

Xcode を起動し新規プロジェクト作成

Welcome to Xcode 画面で Create a new Xcode project（新規プロジェクト作成）ボタンをクリックしてください。

Single View App テンプレートを選ぶ

テンプレート選択画面で「iOS」の Application から「Single View App」を選び「Next」ボタンをクリックしてください。

プロダクト名などの指定

アプリのプロジェクトの基本となる情報を入力します。

Product Name は英数字（英語）で先頭を大文字で入力します。ここでは「MyMap」としました。
Organization Name は仕事で作るアプリであれば会社名ですが、個人の場合はなんでも（たとえば市区町村名とかでも）かまいません。
Organization Identifier は Product Name と組み合わせてアプリの識別子となる Bundle Identifier を構成します。（webページを持っている場合は逆に入力します）（配布の予定がない場合は重要ではありません）
Language は Swift を選び「Next」をクリックしてください。

【User Interfaceは「Storyboard」を選んでください。（Xcode 11で追加された設定です）】

Xcode は日本語にローカライズされていません（英語表示のみ）。
このため保存画面のフォルダ名表示も「書類」ではなく「Documents」などと表示されます。あえて指定するフォルダがない場合は「Desktop」か「Documents」に保存してください。

万一保存場所がわからなくなっても Welcome to Xcode 画面、または File メニューの Open Recent から選べるので心配はありません。

保存時に『No author information was supplied by the version control system. 』の表示が出るかもしれません。
ソースコード管理の設定をしていない場合のこのように表示します。
Git の設定を入力する場合は Fix... をクリックし設定できます。
キャンセルしてもプロジェクト一式は保存されます。

プロジェクトウインドウが開く

プロジェクトウインドウが開きます。
ウインドウの左側のプロジェクトナビゲーターでプロジェクトファイル（この例では MyMap）を選ぶとこの画面のようにアプリの設定内容を確認できます。
矢印で示した Main Interface はアプリ起動時に開くストーリーボードの指定です。「Main」は拡張子が省略されていますが、テンプレートに登録済みの Main.storyboard ファイルのことです。

「Single View App」テンプレートのファイル構成

プロジェクトファイルは、ファイル名が Product Name 指定した名前で拡張子が.xcodeproj です。
アプリケーションデリゲート、ビューコントローラー、ストーリーボードファイルはテンプレートのファイル名がそのままです。（テンプレートのファイル名はデモなどの説明で混乱を招きがちなものです。）

【Xcode 11ではファイルがひとつ増え『SceneDelegate.swift』ファイルも保存されています。】

ファイル名で最も気になるのが ViewController.swift です。
最初に表示する画面のビューコントローラーです。
複数画面がある場合は MyMapMainViewController.swift など区別できるファイル名が良いでしょう。
ただしクラス名も ViewController でインターフェースビルダーなどからも参照されているのでファイル名だけを変更すると正しく動作しません。
なお Xcode のリファクタリング機能を使うとクラス名を好みに変更することができます。

ViewController.swift は最初に表示するビューコントローラーです。
ここでの「ビューコントローラー」とは MVC デザインパターンの「C」を対応します。
一般に UIKit では  MVC の C（コントローラー）は UIViewController クラスを継承した自分のクラスを使います。
UIViewController クラスを継承したクラス名がテンプレートでは「ViewController」、ファイル名は「ViewController.swift」なので、説明で混乱してしまいます。
実際のアプリではクラス名（ファイル名）はどのビューコントローラーか明確になる名前にしましょう。

ストーリーボードを確認

プロジェクトナビゲーターで Main.storyboard を選ぶとXcodeのエディタエリアはインターフェースビルダー画面になります。

画面は自由にスクロールやズーム操作が可能です。

「View Controller」に矢印がついています。これはこのストーリーボードを実行したときに最初に表示する画面（ビューコントローラー）を表します。
最初に表示するビューコントローラーは Initial View Controller と呼びます。 

一番下の「View as: iPhone 8」部分をクリックすると画面のように機種選択表示が現れます。テンプレートでは iPhone 8 になっています。

Xcode 10.2 ではこのデフォルトが iPhone XR になります。iPhone 8 （右から三番目）をクリックすると以下の説明画面と同じになります。

【画面の幅が狭い場合はポップアップメニューに切り替わります（画面はXcode 11.4）Deviceをクリックして機種を選んでください】

クリックで機種を変更できますが特に変更する必要はありません。後から説明するオートレイアウトのしくみで他の機種の画面サイズに対応させます。
テストで使う機種と違う画面サイズで表示するとオートレイアウトの不備をすぐ確認できます。

ナビゲーションコントローラーを追加

インターフェースビルダー画面で「View Controller」をクリックして選択し、Editor メニューの Embed In 階層メニューから Navigation Controller を選んでください。
この操作で View Controller がナビゲーションコントローラの中に入ります。

ナビゲーションコントローラを追加すると実行時に画面の上部分にナビゲーションバーがあらわれます。今回はナビゲーションバーに画面のタイトルを表示するためナビゲーションコントローラを追加しました。

Navigation Controller から View Controller に矢印が繋がっています。
インターフェースビルダー画面でiPhoneの画面（ビューコントローラー）の上のバーをドラッグすると自由に移動できます。
次画面のようにすぐ隣に並べてください。（高さが同じになると青い点線を表示します。移動中も二つの画面を結ぶ線と矢印は接続状態を示し続けます）

ドキュメントアウトライン表示は、右側の画面の内容に対応しています。
画面では同じ大きさで完全に重なっているUI部品の階層関係が、ドキュメントアウトラインでははっきりわかります。
画面のグラフィカルな表示で配置したUI部品を選択できますが、ドキュメントアウトラインでも選択できます。どちらで選択しても効果はまったく同じです。

グラフィカルな表示とドキュメントアウトラインは、ストーリーボードに配置されている同じオブジェクトを別の表示方法で表示しています。

ドキュメントアウトラインはエディタ画面下の、「View as: iPhone 8」部分左側にある「Hide/Show Document Outline」ボタンをクリックすると開閉できます。閉じるとグラフィカル表示を広くしてレイアウトを確認できます。

ボタンのタイトルはマウスオーバーでツールチップ表示します。

ビューコントローラーにタイトルを付ける

ナビゲーションコントローラに接続状態のビューコントローラーは、ナビゲーションバー部分を選択可能になります。
ナビゲーションバー部分をクリックし、インスペクターのアトリビュートインスペクター（スライダーアイコンのボタン）でタイトルを設定できます。
タイトルには日本語も入力できます。ここでは「地図」と入力します。（任意の文字を入力できます）

タイトルを設定するとドキュメントアウトラインで表示する名前が「View Controller」から「地図」に変わります。
※Xcode 10.2 では View Controller のままです。（一番上は「地図 Scene」で同じです）

ここで設定する Title は UIViewController クラスの navigationItem インスタンスプロパティの title インスタンスプロパティの値です。

var navigationItem: UINavigationItem { get }

ナビゲーションコントローラは表示する UIViewController のインスタンスを切り替えて表示します。このときに navigationItem の title プロパティをナビゲーションバーに表示するしくみです。

タイトルを設定した後にシミュレータで実行してみるとタイトルに入力した文字を表示していることを確認できます。

Map Kit View を配置する

ライブラリボタン（タイトルバーにある円の中に正方形アイコンのボタン）をクリックしオブジェクトライブラリを表示してください。

【Xcode 11では＋アイコンのボタンです】

オブジェクトライブラリにはインターフェースビルダーで配置可能なすべてのクラスを一覧できます。数が多いので、検索欄に「map」と入力して Map Kit View だけに絞り込みます。
Map Kit View の行をドラッグし、画面の ViewController（タイトルが地図の画面） の上にドロップして配置します。（タイトル部分ではなく白紙部分にドロップしてください）
ViewController 以外（背景部分）にドロップすると配置はキャンセルになります。いつでもキャンセルできます。

Viewの位置調整操作

配置した Map Kit View などのUI部品はインターフェースビルダーの画面上で移動やサイズ調整が可能です。

ドラッグして移動すると画面の上下方向と左右方向の中心線（これは補助線です）が表示される場合があります。表示されたときビューの中心が画面の中心線上にあります。
同じように上下左右の辺と辺付近で青い補助線が表示されます。
この補助線に合わせてレイアウトするとバランス良く配置できます。

ビューの四角と辺の中央にある四角いハンドルをドラッグするとビューのサイズを調整できます。（一部のUI部品は高さや幅が固定でハンドルを表示しないものがあります）

位置やサイズの調整はいつでも undo できます。安心して操作してください。

配置した Map Kit View を上辺はぴったりくっつけ、左右と下はそれぞれの辺に近い補助線に合わせてレイアウトしてください（上図の状態）。

実行して確認

インターフェースビルダー上では iPhone 8 画面でぴったりに配置したので iPhone X（XR）シミュレータでは図のように右と下に余白が発生します。
シミュレータを横方向に回転すると（⌘→ショートカット）地図の表示はそのままで右の余白が広がります。
この問題を解決するためにオートレイアウト（ Auto Layout ）のしくみを使います。

Auto Layout の設定

オートレイアウトは画面サイズの違いに対応するためのしくみです。
さまざまな画面サイズのデバイスが発売され、アプリがそれぞれの画面サイズに対応するためのコストが増大しました。自動で対応するためのしくみがオートレイアウトです。
現在の iOS では画面の回転も Auto Layout で対応します。
高機能で柔軟ですが、そのぶんいろいろ複雑です。

オートレイアウトについては次の記事を参考に原理を確認してください。
Auto Layout は設定（制約の与え方）が鍵です。
下記の記事はどれもわかりやすく、文字数もそれほど多くはありません。説明図も豊富です。
-基礎編-と-応用編-はすぐに読めると思います。
非 iOS エンジニアのための Auto Layout 入門-基礎編- #Zaim
https://blog.zaim.co.jp/n/n0d2850ec5099
非 iOS エンジニアのための Auto Layout 入門-応用編- #Zaim
https://blog.zaim.co.jp/n/n59280cde6b71

-実践編-、-コミュニケーション編-もとても良い記事です、余裕があれば読んでください。
非 iOS エンジニアのための Auto Layout 入門-実践編- #Zaim
https://blog.zaim.co.jp/n/nd89569f867b6
非 iOS エンジニアのための Auto Layout 入門-コミュニケーション編- #Zaim
https://blog.zaim.co.jp/n/n69d066a9bdf4

オートレイアウト対応のコツは『なるべくシンプルに制約を設定する』に尽きます。複雑な設定にするとレイアウトの変更などで混乱してしまいます。

Auto Layout のしくみ

オートレイアウトは各ビューの上下左右の辺の位置や中央の位置を「それぞれを決めるための制約と呼ばれるルールで計算すること」で実現します。各辺の位置ではなく幅や高さを決める場合もあります。
レイアウト専用のスタックビューと呼ばれるビューもありますが、今回説明は割愛します。

今回は最もシンプルに制約を設定しますが、複雑な条件でレイアウトをコントロールすることもできます。
複数の制約に異なる優先度を与えたり、比率で位置や寸法を与えたりできます。また実行中の画面のおおまかな種類を判別する Size class を利用することもできます。

Auto Layout 初心者向けの注意点

基本的に制約の基準はデバイスの画面です。画面の上下左右の辺と中心線がまず基準になります。（実際には iPhone X などへの対応のため次に説明する Safe Area を基準にします）
基準からの制約で位置が決まったビューも基準にできます。（そのビューとの間隔を制約で指定できる）
高さや幅を固定サイズに指定することも可能です。
固定にする場合は最小／最大画面で矛盾しないか、アクセシビリティで文字サイズを変更する場合もあるので確認が欠かせません。

制約で画面の上下左右との間隔を指定したビューは、画面サイズの違いやデバイスの回転で高さと幅が伸び縮みします。
画面の中央にビューの中央を合わせる制約を指定し幅と高さを指定すると、画面を回転しても同じ大きさで画面中央に表示します。（上下左右の辺との間隔が伸び縮みする）

Auto Layout の用語

iPhone X や 最新の iPad Pro でのレイアウトのために Safe Area （セーフエリア）を基準にします。
インターフェースビルダーの補助線に従うと自動的に Safe Area を考慮した制約を設定できます。

制約では左右よりも Leading / Trailing をよく使います。
これは右から左へ書くアラビア文字表示の対応のためです。
英語や日本語では左側が Leading（先頭）、右側が Trailing（末尾）の制約がつかわれます。

Constraints （制約）設定

制約を設定する前に現在のインターフェースビルダー画面でビューの位置を正しく調整してあることを確認してください。
制約を設定するビューをクリックして選択してください。
次にインターフェースビルダー画面の下に五つ並ぶボタンの右から二つ目（Add New Constraints）をクリックします。