Day 2 - Lesson ﻿ ﻿●商標等について・Apple、iCloud、iPad、iPad Air、iPad mini、iPhone、iPod touch、Mac、Macintosh、macOS、Objective-C、Swift、Xcode は、米国およびその他の国々で登録された Apple Inc. の商標です。
・その他、本書に記載されている社名、製品名、ブランド名、システム名などは、一般に商標または登録商標で、それぞれ帰属者の所有物です。
・本文中では、©、®、™ は表示していません。

●諸注意
・本書はソシム株式会社が出版したもので、本書に関する権利、責任はソシム株式会社が保有します。
・本書に記載されている情報は、2018 年 10 月現在のものであり、URL などの各種の情報や内容は、ご利用時には変更されている可能性があります。
・本書の内容は参照用としてのみ使用されるべきものであり、予告なしに変更されることがあります。また、ソシム株式会社がその内容を保証するものではありません。本書の内容に誤りや不正確な記述がある場合も、ソシム
株式会社は一切の責任を負いません。
・本書に記載されている内容の運用によっていかなる損害が生じても、ソシム株式会社および著者は責任を負いかねますので、あらかじめご了承ください。
・本書のいかなる部分についても、ソシム株式会社との書面による事前の同意なしに、電気、機械、複写、録音、その他のいかなる形式や手段によっても、複製、および検索システムへの保存や転送は禁止されています。

2

Lesson﻿﻿ ﻿

はじめに
この書籍は、「iOS アプリを作ってみたい、すべての初心者が、体験から学べる入門書」です。
iOS とは、Apple が macOS をベースに開発した、iPhone、iPad、iPod touch 向けのモバイル OS です。本書籍では、プログラム言語の Swift（スウィフト）を用いて開発を行います。
執筆陣は、2014 年 11 月 1 日から「Swift ビギナーズ倶楽部」というコミュニティを継続開催しております。プログラミング自体がはじめての方、iOS アプリを作ってみたい他分野のエンジニアの方、そして高校生から、定年退職された方まで、たくさんの方々にご参加いただいています。最初は試行錯誤しながらも、勉強会に参加をして参加者の方どうしで教え合い、アプリ開発を楽しまれている方々が多くいらっしゃいます。
その経験を通して執筆陣が理解したことは、はじめての分野を学習する際には、経験者にとってはどんな些細なことも、初学者にとってはつまずくポイントになりえるということです。ただ、どんな分野もそうですが、最初は基礎的なことを、まねごとでよいので丁寧に繰り返し練習すれば、少しずつ自分だけのオリジナルの発想が出てきます。
本書では、構成段階からハンズオンセミナーを開催し、たくさんの参加者の方々の声をまとめ、各レッ
スンを構成しました。また、継続してセミナーを開催しながら、どの操作でつまずくのか、どのコードの説明が理解しがたいのかをフィードバックを受けて、教材を改善し続けています。
そうした調査に基づき、プログラミングを通して、「モノづくり」の楽しさを体験していただけるように、
少しずつ階段を上っていく体験を重視した構成にしました。初心者が最初の一歩を踏み出す書籍を目指しています。
本書のコンセプトは「まずは体験してみて、その経験を生かして学んでいく」です。難しいプログラミ
ング文法の説明は極力最小限にまとめ、多くのサンプルアプリの開発を体験してもらうことで、最短距離
でアプリ開発の「勘所」がつかめるように工夫しました。
これから iOS アプリを制作される方々の一助となれば幸いです。
ようこそ、iOS アプリ開発の世界へ。

3

CONTENTS

目次

CONTENTS

はじめに.............................................................................................................................. 3
この本の読み方と使い方....................................................................................................10
ご利用の前に必ずお読みください......................................................................................14

Day
Lesson1

Day1

はじめてのアプリを開発する前に知っておこう2
15

iOS アプリの開発を始める前に、知っておいた方がよいことを学んでいきましょう。
書籍を読み進めていく上で、最初の心構えを知っておくことで、心理的なハードルが下がり、学習が行いやすくなります。

1-1 プログラミングを体験から学んでいこう........................................................ 16

1 この本の使い方と前提知識...............................................................................................16

1-2 あらかじめ挫折しそうなポイントを押さえておこう....................................... 18

1 学習ポイントを押さえよう....................................................................................................... 18

1-3 アプリ開発をするなら知っておこう !
1〜WWDC、手数料、課金方法〜........... 20

WWDC 2018 での公開情報をもとに考察してみよう............................................................ 20

1-4 Swift（スウィフト）を知ろう......................................................................... 22
1 Swift の特徴を押さえよう........................................................................................................ 22

Lesson2

アプリ開発の環境を整えて、
Xcode の使い方を学ぼう

25

iOS アプリを開発するために、必要なものを学びましょう。
最初に、まだ Apple ID を取得していない方のために、Apple ID の基礎知識と取得方
法についても解説します。

2-1 開発するために必要な準備をしよう......................................................................26
1 アプリ開発に必要な 3 つのものを準備しよう........................................................................ 26

2-2 Apple ID を取得しよう..........................................................................................28
1 Apple ID をすでに取得されている方...................................................................................... 28
2 Apple ID をまだ取得されていない方...................................................................................... 29

2-3 Xcode をインストールしよう................................................................................31
1 Xcode をダウンロードしよう.................................................................................................. 31

2-4 Xcode を起動して、プロジェクトを作成しよう..................................................33
1 Xcode を起動しよう................................................................................................................. 33

4

CONTENTS

2 プロジェクトを作成しよう....................................................................................................... 34
3 Xcode 画面のナビゲーションを理解しよう............................................................................ 39

2-5 Xcode をより使いやすくするための設定をしよう..............................................45
1 Xcode の環境を設定しよう...................................................................................................... 45

2-6 「Hello Swift!」と表示してみよう.........................................................................49
1 Label を配置して、AutoLayout を設定してみよう............................................................... 51
2 プログラムを書いてみよう....................................................................................................... 53
3 シミュレータを起動してみよう............................................................................................... 57
4 実機転送を行い、iPhone で確認してみよう........................................................................... 60

理解度チェック！ 学んだことを整理しよう！..................................................................66

Lesson3

じゃんけんアプリを作ろう―Swift の基本を学ぶ―

67

はじめての iPhone アプリ「じゃんけんアプリ」を作っていきます。じゃんけんアプリを作りながら、アプリ開発の基本を学んでいきます。
最後に「ステップアップ」があります。もう少し深く学習してみたい方はチャレンジしてみてください！

3-1 完成をイメージしよう.............................................................................................68
3-2 プロジェクトを作成しよう.....................................................................................70
1 プロジェクトを作成しよう....................................................................................................... 70

3-3 必要な部品を配置しよう.........................................................................................72
1 Storyboard にパーツを配置してみよう.................................................................................. 72
2 パーツを装飾してみよう........................................................................................................... 75
3 Image View パーツで使う画像ファイルを設定しよう............................................................ 84

3-4 部品の表示位置、幅、高さを設定しよう...............................................................86
1 AutoLayout（オートレイアウト）の概要を理解しよう............................................................ 86
2 作業しやすいように画面を整えよう........................................................................................ 86
3 Button の位置と幅・高さを設定しよう.................................................................................. 87
4 Label の位置と幅・高さを設定しよう.................................................................................... 93
5 Image View の位置と幅・高さを設定しよう......................................................................... 94

3-5 部品とプログラムを関連付けしよう......................................................................97

1 コードを書きやすいように Xcode 画面を整理しよう...............................................................97
2 Image View をコードと関連付けしよう................................................................................ 99
3 Label をコードと関連付けしよう.......................................................................................... 102
4 Button をコードと関連付けしよう....................................................................................... 103

3-6 じゃんけん画像を切り替えよう........................................................................... 108
3-7

1 プログラムを書く前に、大きく作り方を把握しよう............................................................ 108
ステップアップ

アイコンを設定しよう.............................................................. 124

1 アイコンのサイズや使用用途を確認する.............................................................................. 125
2 アイコンの作成と設定をしよう............................................................................................. 126
理解度チェック！ 学んだことを整理しよう！............................................................... 130

5

CONTENTS

Lesson4

音楽アプリを作ろう―音の扱い方を学ぶ―

131

この章では、iOS アプリ開発で音を扱う方法を学びます。また、AutoLayout の設定を繰り返し行い、習得をすることを目的としています。

4-1 完成をイメージしよう.......................................................................................... 132
1 プロジェクトを作成しよう..................................................................................................... 133

4-2 シンバルとギターを配置しよう........................................................................... 134
1 Storyboard にパーツを配置しよう....................................................................................... 134

4-3 タップで音を鳴らそう.......................................................................................... 151

4-4

1 音を扱う準備をしよう............................................................................................................. 151
2 音を便利に扱うことができる「AVFoundation」を読み込もう................................................. 153
3 シンバルの画像とプログラムコードをつなごう................................................................... 154
4 シンバルを鳴らそう................................................................................................................ 155
5 ギターの画像とプログラムコードをつなごう....................................................................... 160
6 「Play」「Stop」とプログラムをつなごう.............................................................................. 161
ステップアップ

リファクタリングで見通しを改善しよう................................ 166

理解度チェック！ 学んだことを整理しよう！............................................................... 172

Lesson5

マップ検索アプリを作ろう―UI パーツと delegate―173

マップを表示させることができる「MapKit」を利用して、マップアプリを開発します。
テキストエリアにキーワードを入力すると、該当する場所を検索し、ピンを立てます。
クロージャ、delegate の概念についても説明します。

5-1 完成をイメージしよう.......................................................................................... 174
5-2 画面を作成しよう................................................................................................. 176
1 プロジェクトを作成しよう..................................................................................................... 176
2 使用する UI パーツを配置しよう........................................................................................... 177
3 AutoLayout で、レイアウトを整えよう.............................................................................. 180
4 関連付けをしよう.................................................................................................................... 181

5-3 マップ検索アプリの動作をプログラミングしよう............................................ 184
5-4

1 検索キーワードを入力するために Text Field を使う.......................................................... 184
2 キーワードから緯度経度を検索する...................................................................................... 191

ステップアップ マップの種別（航空写真など）を切り替えできるようにしよう.............................................................................. 200

1 マップの種別を切り替えるボタンを配置しよう................................................................... 201
2 マップの種別切り替え処理を実装しよう.............................................................................. 204
理解度チェック！ 学んだことを整理しよう！............................................................... 210

6

CONTENTS

Day
Lesson1

Day1

タイマーアプリを作ろう―画面遷移とデータの永続化―

2
211

いままで単一画面で完結するアプリを作ってきましたが、この章では画面遷移の方法を学びます。
また、設定画面で選択した秒数をタイマー画面で利用できるように、設定画面でデータを保持しておく必要があるので、その方法も学びましょう。

1-1 完成をイメージしよう.......................................................................................... 212
1 プロジェクトを作成しよう..................................................................................................... 214

1-2 Storyboard でレイアウトを作ろう.................................................................... 215

1 ［Main.storyboard］を、Navigation Controller に変更しよう.............................................. 215
2 Navigation Controller の仕組みを知ろう........................................................................... 217
3 タイマー画面の UI パーツを配置しよう................................................................................ 218
4 タイマー画面の AutoLayout を指定しよう.......................................................................... 221
5 秒数の設定画面を追加しよう................................................................................................. 229
6 画面遷移を行う Segue を追加しよう.................................................................................... 230
7 設定画面の UI パーツを配置しよう....................................................................................... 232
8 設定画面の各パーツに AutoLayout を設定しよう.............................................................. 235
9 設定画面の SettingViewController を追加しよう.............................................................. 236
10［Assistant editor］で確認しよう.......................................................................................... 239
11 タイマー画面の UI パーツとプログラムを関連付けよう..............................................................242
12 設定画面の UI パーツとプログラムを関連付けよう............................................................. 246

1-3 タイマー画面を作成しよう.................................................................................. 249
1 コードを書きやすいように準備しよう.................................................................................. 249
2 変数の宣言を追加しよう......................................................................................................... 250
3 アプリ起動時に初期値を設定しよう...................................................................................... 251
4 画面を更新するメソッドを作成しよう.................................................................................. 253
5 経過時間を処理するメソッドを作成しよう........................................................................... 255
6 カウントダウンの処理を実装しよう...................................................................................... 257
7 タイマーを停止する処理を実装しよう.................................................................................. 260
8 秒数の設定画面に、画面遷移をしよう.................................................................................. 261
9 秒数設定画面から戻ってきたら、設定した秒数で画面を更新しよう..................................... 263
10 シミュレータでカウントダウンを確認しよう....................................................................... 264

1-4 秒数設定画面を作成しよう.................................................................................. 265
1 PickerView を利用できるようにしよう................................................................................ 265
2 変数を宣言しよう.................................................................................................................... 266
3 設定画面起動時に、PickerView に保存している秒数をセットしよう...................................... 268
4 for 文とは？............................................................................................................................. 270
5 PickerView にデータを渡すメソッドを作成しよう............................................................. 271
6 PickerView の内容を表示する delegate メソッドを作成しよう............................................ 272
7 画面で秒数を選択したときの delegate メソッドを作成しよう................................................ 273

7

CONTENTS

1-5

Lesson2

8 「決定」ボタンがタップされたら、タイマー画面に遷移しよう.................................................. 274
ステップアップ

タイマー終了後にアラートを表示しよう................................ 279

1 UIAlertController を追加しよう.......................................................................................... 280

カメラアプリを作ろう［前半］―カメラと SNS 投稿―283

カメラを利用することができる「UIImagePickerController」と、カメラロールに保存したり SNS に投稿したりできる「UIActivityViewController」を利用して、カメラ
アプリを開発します。

2-1 完成をイメージしよう.......................................................................................... 284
2-2 画面を作成しよう................................................................................................. 286
1 プロジェクトを作成しよう..................................................................................................... 286
2 使用する UI パーツを配置しよう........................................................................................... 287
3 AutoLayout で、レイアウトを整えよう.............................................................................. 290
4 UI パーツの詳細を設定しよう................................................................................................ 292
5 UI パーツをプログラムと関連付けしよう............................................................................. 293

2-3 カメラを起動しよう.............................................................................................. 296
1 カメラの使用をユーザーに許可してもらおう....................................................................... 296
2 カメラが使用できる機種、できない機種を判定しよう......................................................... 299
3 カメラを起動するコードを追加しよう.................................................................................. 301
4 カメラで撮影した写真を表示させよう.................................................................................. 302

2-4 SNS 投稿を作成しよう......................................................................................... 307
2-5

Lesson3

1 写真の保存をユーザーに許可してもらおう........................................................................... 307
2 SNS シェア機能を追加............................................................................................................ 308
ステップアップ

1

フォトライブラリーから写真を取り込めるようにしよう..... 312

カスタマイズしてみよう......................................................................................................... 313

カメラアプリを作ろう［後半］―エフェクト機能の追加―

319

カメラアプリの定番であるエフェクト機能を利用できる「Core Image」を利用して開発をします。
また、新しい画面遷移方法である「モーダルビュー」の指定方法と、画面遷移を実現する「Segue」（セグエ）の応用として、画面遷移時に情報を渡すことを学びます。

3-1 完成をイメージしよう.......................................................................................... 320
3-2 不要になったボタンを削除して、新しく画面を追加しよう............................. 322
1 「SNS に投稿する」ボタンを削除しよう................................................................................ 322
2 新しい View Controller を追加しよう.................................................................................. 324
3 View Controller とコードを結びつけよう........................................................................... 325
 メラ撮影画面（View Controller）から画面遷移できるようにしよう..................................... 329
4 カ
5 使用する UI パーツを配置しよう........................................................................................... 330

8

CONTENTS

3-3 エフェクト画面を作成しよう.............................................................................. 338

3-4

Lesson4

1 画面遷移をしてみよう............................................................................................................. 338
2 画面遷移して画像を表示してみよう...................................................................................... 343
3 画面を閉じてみよう................................................................................................................ 344
4 画像をエフェクトしてみよう................................................................................................. 346
5 画像をシェアしてみよう......................................................................................................... 352
ステップアップ

エフェクトの種類を増やそう................................................... 355

1 カスタマイズしてみよう......................................................................................................... 356
2 フィルタ名の効果を確認しよう............................................................................................. 359

お菓子検索アプリを作ろう―Web API と JSON の使い方を学ぶ―

361

iOS アプリでインターネットを通してデータを取得できると、作りたいアプリの可能性が広がります。お菓子に関するキーワードが入力されたら、インターネットからお菓子の情報を取得し、アプリの画面に表示するお菓子検索アプリを作ります。

4-1 完成をイメージしよう.......................................................................................... 362
4-2 Web API と JSON について学ぼう..................................................................... 364
1 Web API の基本的な仕組みを学ぼう.................................................................................... 364
2 JSON と XML について学ぼう............................................................................................... 365
3 ブラウザで Web API を使ってデータを取得してみよう................................................................. 367

4-3 Search Bar、Table View を配置しよう............................................................. 371
1 プロジェクトを作成しよう..................................................................................................... 371
2 Search Bar を配置しよう....................................................................................................... 371
3 Table View を配置しよう....................................................................................................... 373
4 各パーツに AutoLayout を設定しよう................................................................................. 375
5 Table View Cell の［Style］と［Identifier］を設定............................................................ 377

4-4 キーワードを入力してお菓子データを取得しよう............................................ 378
1 画面のパーツとプログラムの関連付けをしよう................................................................... 378
2 Search Bar で入力されたキーワードをデバッグエリアに出力しよう................................... 380
3 Web API のリクエスト URL を組み立てよう....................................................................... 384
4 リクエストを生成して、JSON を取得しよう........................................................................ 388

4-5 取得したお菓子データを Table View で一覧表示してみよう.......................... 399
4-6

1 お菓子データをタプルに格納してみよう.............................................................................. 399
2 お菓子データを Table View で一覧表示してみよう............................................................ 404
ステップアップ

お菓子の一覧をタップして Webページを表示してみよう.... 411

1 SFSafariViewController を使って Web ページを表示しよう................................................ 412

索引.................................................................................................................................415
Swift ビギナーズ倶楽部について......................................................................................421
謝辞.................................................................................................................................422
執筆陣プロフィール.........................................................................................................423

9

Day 2 - Lesson ﻿ ﻿

この本の読み方と使い方
本書が対象とする方●プログラムを書いたことはないけれど、iPhone／iPad アプリを作ってみたい方●

iPhone アプリをよく利用していて、自分でも作ってみたいと思った方●

中高生、大学生で iPhone アプリ開発を学んでみたい方●

シルバー世代や中高年の方で再学習を実施したい方●

企業で入社前研修や企業導入研修での教材を検討している方

そんな iOS アプリを作ってみたい、すべての初心者が対象です。
アプリを作ることを「開発」するともいいます。開発といっても「難しいことをする！」と身構える必
要はありません。プログラミングを楽しみながら、リラックスして読み進めてください。

本書でできるようになること
初心者の方もサンプルアプリを作ることにより、動く体験と基本の知識が身につくようになります。
この書籍を終えるころには、他の入門書やプログラミング文法書を読む力もついていると思います。そして、作りたいアプリや学習したい分野も見えてくると思いますので、ぜひ、次の書籍を購入してステッ
プアップを目指してください。

本書の特徴
とにかく「体験」すること、そしてあとから「理解」することに重点を置いています。
本書では、プログラミングの文法説明は最小限にして、iPhone／iPad アプリを作って動かしていくことを目的として構成しています。
プログラミング文法書のように文法を理解して覚えるのではなく、どんどんアプリを作って体験していくことに比重を置いています。プログラミングがはじめての人でも楽しみながら iOS アプリが作れるという体験ができるように工夫しました。
学習が進めやすいように、学校の授業のように時限制（レッスン）で区切っています。各レッスンごとに独立したサンプルアプリが作れるように配慮していますので、制作したいサンプルアプリがあれば、途中からでも学習できます。
まったくの初心者の方は、読み飛ばさずに最初からじっくりと取り組んでみてください。少しでも経験のある方は、作りたいサンプルアプリのレッスンからはじめるのもよいでしょう。

10Lesson﻿﻿ ﻿

本書の構成
Day 1（1 日目）はレッスン 5 まであり、iPhone アプリ制作の概論と開発の準備から入ります。そして、
ここで「じゃんけんアプリ」「楽器アプリ」「マップ検索アプリ」の 3 つのアプリを作ります。
「アプリを作って動かすことができた！」という体験を得てください。
Day 2（2 日目）はレッスン 4 まであります。サンプルアプリは「タイマーアプリ」「カメラアプリ（前半）」「カメラアプリ（後半）」「お菓子検索アプリ」を作ります。

本書の読み方とページ構成

Day 1 - Lesson 3 じゃんけんアプリを作ろう ―Swift の基本を学ぶ―

Day 1① このレッスンで学ぶこと

Lesson3-3

レッスンの中で学べることをピックアップして予測できるようにわかりやすくしています。

必要な部品を配置しよう？ このレッスンで学ぶこと● Xcode の基本操作を攻略しましょう。
● Xcode の基本的なパーツである、Image View、Label、Button を配置しましょう。
● 各パーツの、配色や文字の設定方法を習得しましょう。

1 Storyboard にパーツを配置してみよう［Storyboard］に画像を表示するためのパーツである「Image View」と、文字を表示するためのパーツである「Label」、そして、タップしたときにアクションを起こすためのパーツである「Button」をそれぞれ配置していきます。
Day 2 - Lesson 1

タイマーアプリを作ろう ～画面遷移とデータの永続化～❶［Navigator］の ［Main.storyboard］② Xcode 画面▼［View Controller］の［View］を選択をクリックします。

❷

4-5 背景画像を配置［Document Outline］
ボタンを

❸
❹

Image Viewを配置して、背景画像を設定します。
クリックすると、［View
Controller

Xcode（エックスコード）は、iOS アプリをScene］が表示されているエリアの❶❺▼［Image View］の配置［Document Outline］ を 開 閉 で視覚的に開発するための統合開発環境です。

❶

きます。

❸［Document Outline］ の［View

Xcode 画面は、操作が理解しやすいようにController Scene］の▼（下三角）をクリックします。

ナンバリングやコメントを入れています。

❹［View Controller］の▼（下三角）をクリックします。

❺［View］をクリックして選択します。

❹

❸

❷
❷

ハンドルをつかんで右下にドラッグ＆ドロップ72❶［Library］をクリックしてポップアップした ❷ の検索窓に「image」と入力し「enter（return）」
キーを実行することで、Image View を検索します。

❸［Storyboard］上にドラッグ＆ドロップして、左上にピッタリくっつけて配置します。
❹ 配置できたら右下の□を選択して、右下方向にドラッグします。

③ プログラムコードの追加

右下まで引っ張ります。枠線に▼［ImageView］のドラッグ＆ドロップ〜 Web APIと JSON の使い方を学ぶ〜
Day
2 - Lesson 4 お菓子検索アプリを作ろう
ピッタリ重なると青い線が表示され、吸着するようになるので、線プログラムのコードを追加する場所は、わか▼▼ お菓子データをタプル配列へ詰め込みに沿っている場所がわかると思います。その場所で、Image View

りやすいように赤枠で囲っています。また、のドラッグを離して、画面いっぱいに配置してください。

削除の場合は青枠で囲っています。
削除
右下いっぱいまで広げる

226

追加

▼▼ シミュレータを使った動作確認

11

Day 2 - Lesson ﻿ ﻿Day 2 - Lesson 4

お菓子検索アプリを作ろう 〜 Web API と JSON の使い方を学ぶ〜// 1つのお菓子をタプルでまとめて管理
let okashi = (name,maker,link,image)④ 説明用のプログラムコード

お菓子データの 4 つの項目をタプルとしてまとめて変数 okashi に代入しています。このタプルで表現できる単位がお菓子 1 つの情報になります。

Swift のプログラムコードを掲載していま// お菓子の配列へ追加

す。コードは理解しやすいように、1 行からself.okashiList.append(okashi)

数行の塊で説明します。

タプル okashi を配列 okashiList に追加しています。配列は append メソッドでデータの追加できます。使用可能なお菓子データ全体は、配列 okashiList を使うことでコントロールできます。

※ Swift（スウィフト）は、iOS アプリを作る

if let okashidbg = self.okashiList.first {ためのプログラミング言語です。

}

print ("----------------")
print ("okashiList[0] = \(okashidbg)")

正常に動作ができているか確認するためのコード（デバッグコード）です。
「okashiList.first」で最初の 1 件目のお菓子データを選択しています。データがある場合は、デバッグエリアに print 文でデータを出力しています。

2 お菓子データを Table View で一覧表示してみよう⑤ Point（ポイント）、Tips（ティップス）、Column（技術コラム）

配列に格納したお菓子データを Table View に表示します。Table View とプログラムを連結するためのコードも追加します。

2-1

Point

Table View とお菓子データを連結

Table View とお菓子データとを連動させるために、クラスの宣言やメソッドを追加します。次の赤枠のコードを追加してください。

Point（ポイント）は、いまの学習の中で知っておいたほうがよいことや覚えるべき箇所を記載しています。

404

TipsTips
Tips（ティップス）は、Xcode の操作やコードの補足、または技術の事例を紹介します。

COLUMNCOLUMN

Column（技術コラム）は、本文の流れからは少しそれますが、技術の背景や、抽象的な技術の解説を記載しています。

理解度チェック！ 学んだことを整理しよう！
1 日目各章の最後に理解度チェックを用意しています。
最初は情報が多く混乱しますので、サポートツールとしてご活用ください。
理解度チェックで、わからない内容は振り返って学んで情報を整理しましょう。

12Lesson﻿﻿ ﻿

さらに一歩踏み込んで学習できる「ステップアップ」
本書では、もう一歩進んで学習したい方のためにレッスンごとに「ステップアップ」を設けています。

Day 2

ステップアップ

Lesson

お菓子の一覧をタップしてWebページを表示してみよう

4-6

Day
おかし検索

2
1

？ このレッスンで学ぶこと

2

サンプルアプリをさらにカスタマイズして、機能アップを行いながら学んでいきます。「ステップアッ3

お菓子の一覧で特定のお菓子をタップしたときに、掲載サイトの Web ページを表示する方法
プ」が難しいと感じられた方は、最初は飛ばして学習を進めてください。2 回目以降からは「ステップアッを学びます。
●

4プ」も含めて学習していくことで、効果的に学ぶことができます。

5

完成イメージ前レッスンまでで、キーワードを入力してインターネットからお菓子の情報を取得し、Table

View で一覧表示するところまでを作りました。
本書の公式サポートサイトの紹介とサンプルアプリダウンロード
ステップアップ編では、一覧表示されているお菓子をタップしたときに、そのお菓子が掲載されている Web ページをアプリ内で表示してみましょう。

公式サポートサイトでは、本書の内容に関するサポートや、本書内で掲載されているサンプルアプリ、▼ 完成イメージ
プログラムコードなどが提供されています。

検索前

検索後に一覧からタップ

Web ページ表示完成したサンプルアプリの動きを確認したり、自分で打ち込んだプログラムコードの確認などでご使用ください。
本書の公式サポートサイト

https://ticklecode.com/swiftbook2018/

タップする

本書のサンプルアプリダウンロードと使い方 - 公式サポートサイト

https://ticklecode.com/swiftbook2018/sample/

417

13

Day 2 - Lesson ﻿ ﻿

ご利用の前に必ずお読みください
必要なパソコン機器
iOS アプリ開発には、Mac が必要です。

12
12
9
9

3
3

10
05

6

6

本当にはじめての方は、Windows パソコンでもアプリ開発ができると思いがちですが、iOS アプリ開発には、Mac が必須になります。Mac であれば、MacBook、iMac、Mac mini のどれであっても大丈夫です。
macOS を搭載したパソコンがないと、iOS アプリ開発のための環境を作ることができません。ぜひ、自分に合った Mac の購入を検討してみてください。

本書で必要な各ソフトウェアのバージョンについて
アプリ開発を行う前に、必要なソフトウェアのバージョンを確認して、それを満たす必要があります。
バージョンはそのソフトウェアがいつ提供されたものであるのかを示す番号です。
iOS は Apple が macOS をベースに開発した iPhone、iPad、iPod touch 向けのモバイル OS です。
この iOS のバージョンも確認する必要があります。
サンプルプログラムや本書で記載されているプログラムコード、画面掲載は、以下の環境に対応しています。
●

macOS High Sierra または、macOS Mojave●

Xcode 10.0 以上●

iOS 12.0 以上

上記のバージョンに満たない場合は、バージョンアップを行う必要があります。
バージョンアップに関しては、Apple サポートページをご確認ください。
Apple サポートページ

https://support.apple.com/ja-jp

14

Day

Day

1

2

Lesson1

はじめてのアプリを開発する前に知っておこうiOS アプリの開発を始める前に、知っておいた方がよいことを学んでいきましょう。
書籍を読み進めていく上で、最初の心構えを知っておくことで、心理的なハードル
START

Lesson 1-1

プログラミングを体験から学んでいこう

Lesson 1-2

あらかじめ挫折しそうなポイントを押さえておこう

Lesson 1-3

アプリ開発をするなら知っておこう！

GOAL

Lesson 1-4

Swift（スウィフト）を知ろう

が下がり、学習が行いやすくなります。

Day 1 - Lesson 1

はじめてのアプリを開発する前に知っておこう

Day 1

Lesson1-1

プログラミングを体験から学んでいこう？ このレッスンで学ぶこと● プログラミングに対する気持ちを整理します。プログラミングを体験して学んでいくという考え方を理解します。

1 この本の使い方と前提知識
1-1

体験から学習する

あなたの心の中に、「プログラミングは頭で学ぶもの」という気持ちがあるなら、すぐに切り替えましょう！
プログラミングは「体験しながら体で学ぶ」という方法もあります。プログラミングの文法や仕組みの理解は、あとからついてきます。あなたが体験したことが糧となって、徐々に理解できるようになります。

16

Lesson 1-1

1-2

プログラミングを体験から学んでいこう

予習や事前学習について

本書を学習するにあたって、予習のための時間は必要ありません。
はじめてプログラミングを学習する方でも、楽しみながら、段階的に知識を習得していけるように目指して構成しています。
予習で最初に知識を詰め込んでも、その知識が必要になるとは限りません。最初にアプリを作っていき、必要なときに必要な量を学習する方が効率的です。
実際に作ってみて「動いている！」という成功イメージを持つことが大切です。

1-3

基礎知識、前提知識について

本書では、事前の基礎知識、前提知識はとくに必要ありません。「動いた！」という体験をしてから、気になること、疑問に思うことを調べて、「なるほど！」と思えたときに基礎知識が身についたといえる
でしょう。

Day

1
1
2
3
4
5

「まずは体験してみる」「基礎知識はあとから学習する」ことを念頭において読み進めていくことが大切です。
まずは、自分で書いたコードが動く楽しさを実感してください。

1-4

反復学習について最初は、新しい知識の情報量が多いため、一度学んで理解できたと感じても定着していないことが多々あります。学校の学習や、スポーツの練習と同じで、プログラミングも反復学習、反復練習を行うことで、学びが深くなります。
本書では、一度解説した内容を、あとのレッスンでも解説しています。思い出せるように簡略して解説
したり、詳細に解説しているページを明記したりと、繰り返し復習していただける構成にしています。
また、最初は本書の通りに設定をしたりコードを書いたりするのも一苦労されると思います。最後までやり遂げられたら、2 周目 3 周目と繰り返していただくことをお薦めします。最初には読み漏らしていた
り理解できなかったりした解説も、新たな気づきがあり理解が進みます。

1-5

オリジナルアプリについて

本書のサンプルアプリは、シンプルで理解しやすいように設計しています。これをもとに組み合わせることで本格的なアプリを作ることができます。
本書のサンプルアプリを作れたら、機能を少しずつ変更したり、読者の皆さまが実装してみたい機能を追加したりしてみましょう。

17

Day 1 - Lesson 1

はじめてのアプリを開発する前に知っておこう

Day 1

Lesson1-2あらかじめ挫折しそうなポイントを押さえておこう？ このレッスンで学ぶこと● アプリ開発で挫折しそうなポイントを事前に理解します。本書で集中して学習する、エラーや警告に対する考え方、Xcode について学びます。

1 学習ポイントを押さえようポイント①：まずは一冊の本に取り組む

入門書をたくさん購入することで満足してしまいがちですが、最初は、1 つの書籍を最後まで学習することが大切です。まずは、じっくりと本書だけに取り組んでみてください。あせることはありません。すべてが理解できなくても、気にせず前に進んでいきましょう。
そして、本書を最後まで終えたら、また最初から取り組むことをお薦めします。最初はよくわからな
かった箇所も、理解が進んでいることが実感できるはずです。
本書を読み終えるころには、次の新しい入門書や文法書も読み進めていくことができるようになります。

18

Lesson 1-2

あらかじめ挫折しそうなポイントを押さえておこう

ポイント②：アプリ開発をする前の準備Day

アプリ開発を行う上で、事前の準備が必要になります。事前の設定ではトラブルも多く、ここで諦めてしまう方も多いと思います。
本書では、Day 1 Lesson 2 でアプリ開発の準備にも十分な時間を割いています。事前の準備が終われ
ば、いよいよアプリを作っていきます！

ポイント③：アプリ開発で表示される警告やエラー

ありがとう！

1
1
2
3
4
5

アプリの開発を進めていく過程で、「警告」や「エラー」と言われるものに遭遇することがあります。
最初は、警告やエラーの意味がよくわからず戸惑うことと思いますが、安心してください。警告やエラーはあなたを責めているのではなく、よりよい方法を教えてくれているのです。
警告やエラーに遭遇したときには、「アドバイスしてくれてありがとう！」というぐらいの気持ちを持って、開発に取り組みましょう。エラーメッセージを読んでわからない場合でも、メッセージをそのままイ
ンターネットで検索すると対処法がわかる場合も多くあります。調べながら解決をすることを覚えてください。

ポイント④：まずは、Xcode を体験して慣れていこう
アプリ開発には Xcode という統合開発環境を利用します。
最初は、Xcode の操作がよくわからなくてなかなか思うように作業が進みません。でも、Xcode でのメニュー配置が理解できて、目的の作業をするための手順がわかるようになると、効率的に制作できるようになります。
Xcode も理解しようとするよりも体験して、慣れていくことが大切です。繰り返し操作を体験し、どんどん慣れていきましょう。

19

Day 1 - Lesson 1

はじめてのアプリを開発する前に知っておこう

Day 1

Lesson1-3

アプリ開発をするなら知っておこう！
〜WWDC、手数料、課金方法〜？ このレッスンで学ぶこと● アプリ開発をする上で知っておきたい、WWDC の概要、ダウンロード数などの数値、手数料、課金について概要をつかみます。

1 WWDC 2018 での公開情報をもとに考察してみよう
1-1

WWDC とは

WWDC（Worldwide Developers Conference）は、iPhone の開発元である Apple が毎年開催している、開発者向けのイベントです。
WWDC で Apple の新製品や新機能が発表されたり、市場動向や開発者への支払額が公開されたりします。そのため、アプリ開発者にとっては、とても関心が高いイベントです。
WWDC - Apple Developer

https://developer.apple.com/wwdc/
WWDC 2018 は６月４日〜８日にカリフォ
ルニア州サンノゼで開催されました。

発表年

製品

WWDC は Apple の製品・サービスが発表

2008 年

iPhone 3G、MacBook Air

されるイベントですが、参加するためのチケッ2010 年

iPhone 4、iPad

トは 1,599 ドル（WWDC 2018 チケット価格）

2012 年

MacBook Pro（Retina ディスプレイ搭載）で販売されていて、1 ドル 110 円換算で約 172013 年

Mac Pro（円筒形デザイン）

万 6 千円と、その人気の高さがわかります。

2014 年

Swift

2015 年

Swift 2.0、Swift オープンソース化

2016 年

Swift 3.0、Sirikit、iMessage Apps

2017 年

Swift 4.0、iPad Pro、HomePod

2018 年

ARKit 2.0、CreateML

WWDC では、表のような製品・サービスが発表されています。

20▼▼ WWDC での製品発表

Lesson 1-3

1-2

アプリ開発をするなら知っておこう！〜 WWDC、手数料、課金方法〜

Apple がアプリ開発者に支払った金額

アプリ開発者は平均でどのぐらいの収入を得ているのでしょうか？ WWDC 2018 での公式発表の数値から試算してみたいと思います。
WWDC 2018 での公式発表によると、2008〜2018 年までの 10 年間で Apple が開発者に支払った金
額は累計 1000 億ドルを超えています。支払った金額を 1 ドル 110 円換算すると、約 11 兆円にもなります。また、登録アプリ数は約 220 万本（2017 年 1 月現在）であるとされるため、この 11 兆円を 220 万本のアプリ数で割ると、1 つのアプリの平均収入は約 500 万円になります。
2008 年からアプリを 1 つリリースしていたとすると、年間平均で 50 万円、月平均で約 4 万円の収入になります。そして、登録アプリ数の 220 万本には無料アプリも含まれていますので、平均は約 4 万円

Day

1
1
2
3

以上になると思われます。

4

1-3

5

Apple の手数料

Apple Store で販売した売上のうちの 30% を Apple が手数料として差し引きます。これが Apple の収益になります。残りの 70% が開発者への支払額です。支払いは、指定した銀行口座に振り込まれます。
たとえば、120 円のアプリであれば、84 円が振り込まれることになります。

1-4

ユーザーへの課金方法

iPhone アプリを App Store に公開してユーザーに課金する方法は 3 種類あります。
▼▼ ユーザーへの課金方法

課金方法

説明

有料ダウンロード

アプリをダウンロードするときに課金する方法。ユーザーは 1 度ダウンロードすれば、その後のアップデートなどは無料で実行可能。アプリを削除して再びダウンロードするときも無料

広告

アプリの中に広告を表示させて収益を得る方法。いろいろな会社がアプリ向けの広告配信サービスを提供している

In App Purchase（アプリ内課金）

アプリ内で課金する方法。有料もしくは無料でアプリを提供し、そのアプリ内でアイテムや機能追加を販売し、収益を得る。アプリ内課金には、次の 4 つの方法がある①消耗型：アプリの実行に伴い消費されていく。消費アイテムなど②非消耗型：1 度購入するとユーザーのすべてのデバイスで使用可。書籍など③自動更新購読：期間を決めて販売、自動で更新。新聞、雑誌など④非更新購読：期間を決めて販売、自動で更新されない。 1ヶ月購読など

21

Day 1 - Lesson 1

はじめてのアプリを開発する前に知っておこう

Day 1

Lesson1-4

Swift（スウィフト）を知ろう？ このレッスンで学ぶこと● iOS アプリ開発で使う、Swift（スウィフト）というプログラミング言語について概要を学びましょう。

1 Swift の特徴を押さえようみなさんが、iOS アプリを作るために使うプログラミング言語が Swift（スウィフト）と呼ばれるものです。Swift は 2014 年の WWDC ではじめて発表されました。
▼▼ Swift.org

Swift.org - Welcome to Swift.org

https://swift.org/
Apple の公式サイトでは、Swift とは「誰もが圧倒的に優れたアプリケーションを作れる、パワフルな
オープンソースの言語」として紹介されています。
Swift を使うことでアプリ開発者はより安全で、より信頼性の高いコードを書くことができ、時間を節約しながら、より豊かなアプリを作ることができます。

22

Lesson 1-4

Swift（スウィフト）を知ろう

特徴①：Swift は高速である
Swift は日本語訳で「迅速」という意味で、鳥の「あまつばめ」を示す意味でも使われます。 Swift の迅速さを強調するために、ロゴマークにも「あまつばめ」が採用されています。
Swift は他のプログラミング言語と比較して、検索アルゴリズム（データを探し出す方法）が高速だと言われています。

特徴②：Swift はモダンである
モダン（modern）とは「現代風」という意味です。 Swift では、他のプログラミングでも採用されている新しい機能を、積極的に取り入れています。

特徴③：Swift は安全である

Day

1
1
2
3
4
5

Swift はプログラミングの記述ミスやバグ（不具合）が起こりにくい仕組みを採用しています。

特徴④：Swift はインタラクティブである
Swift はインタラクティブ（対話形式）に動かすことができます。
▼▼ Playground

Playground（プレイグラウンド）と呼ばれる、Swift を記述するとリアルタイムで実行結果がわかる機能があり、Swift の動作を確認する際にとても便利です。

23

Day 1 - Lesson 1

はじめてのアプリを開発する前に知っておこう

特徴⑤：たくさんの Apple 製品で動くアプリが作れる

12
12
9
9

3
3

10
05

6

6

Swift で作れるアプリは iPhone や iPad 上で動くアプリだけではありません。Mac、Apple Watch な
どたくさんの Apple 製品で動くアプリを作ることができます。

特徴⑥：Swift はオープンソースである
オープンソース（Open Source）とは、プログラムソースを一般に公開して、誰もが使ってよいとする考え方です。
オープンソースであれば、一般人も Swift の改良に参加することができますので、ネット上では日々意見交換され、さらなる改良・進化していくことが期待されています。

Tips
Swift が発表される前は、「Objective-C」（オブジェクティブシー）というプログラミング言語を使って、アプ
リ開発を行っていました。
Objective-C は 1980 年代から開発がはじまり、機能拡張を経て現在も使用されています。Objective-C は、記述が長くなり複雑であったり、プログラムを書いていく効率があまりよくなかったりと、初心者には難しい言語です。
Swift では、学びやすいような工夫がされていて、新しい考え方や機能を積極的に取り入れています。
Swift もバージョンアップを重ねて、十分に開発が行える言語として成長しています。また、過去の資産を有効活用できるように、Objective-C で作成されたプログラムを Swift から呼び出すこともできます。
本書では、これからの開発言語である「Swift」でプログラムを記述します。

24

Day

Day

1

2

Lesson2

アプリ開発の環境を整えて、
Xcode の使い方を学ぼう

START

Lesson 2-1

開発するために必要な準備をしよう

Lesson 2-2

Apple ID を取得しよう

Lesson 2-3

Xcode をインストールしよう

Lesson 2-4

Xcode を起動して、プロジェクトを作成しよう

Lesson 2-5

Xcode をより使いやすくするための設定をしよう

GOAL

Lesson 2-6「Hello Swift!」と表示してみよう

iOS アプリを開発するために、必要なものを学びましょう。
最初に、まだ Apple ID を取得していない方のために、Apple ID の基礎知識と取得方法についても解説します。

Day 1

Lesson2-1

開発するために必要な準備をしよう？ このレッスンで学ぶこと● アプリ開発をするために用意しなければならないことを学びます。
● Mac や Apple ID、Xcode の概要について理解します。

1 アプリ開発に必要な 3 つのものを準備しよう
iOS アプリを開発するためには、次の 3 つが必要になります。
●

Mac

●

Apple ID アカウント

●

Xcode

上 記 の 3 つ に 加 え、 開 発 し た ア プ リ を 全 世 界 の 人 た ち に 利 用 し て も ら う に は、 別 途、「AppleDeveloper Program」への登録も必要です。
このレッスンでは開発したアプリを、iPhone に転送（実機転送）して利用するところまでをゴールにし
ています。

26

では、必要な 3 つのものを確認しましょう。

1-1

Day

1

Mac

2015 年 12 月に、Swift は誰でも利用・改変できるオー

1

プンソースとしてソースコードが公開されました。そのため、将来 Mac 以外のパソコンでも iOS アプリ開発が2できるようになる可能性もありますが、本書を執筆している 2018 年 9 月時点では Mac が必要になります。現時3

点では Mac を準備してください。

1-2

4

Apple ID

iOS アプリを開発するためには、Apple ID の作成が▼▼ App Store と iTunes5

必要です。Apple ID は、Apple が提供しているオンラ
インサービスを利用するために必要なアカウントです。
オ ン ラ イ ン ス ト ア の「iTunes Store」 で は、 音 楽・
映画やオーディオブックを購入できます。また、「AppStore」というサービスでは、iPhone や iPad、Mac で利用できるアプリがダウンロードできます。さらに、有料で販売されているアプリも購入することができます。iPhone や iPad をお持ちの方は、すでに Apple ID を利用していると思います。
それぞれのサービスを利用するのに必要な Apple ID ですが、Xcode のダウンロードでも必要になるため、事前に作成しておく必要があります。

1-3

Xcode（エックスコード）

Apple ID が作成できたら、「App Store」で、iOS アプリ開発に必要な▼▼ Xcode

Xcode をインストールします。
Xcode は、Mac、iPhone、iPad、Apple Watch、Apple TV 向けのアプリを開発できる環境を提供してくれます。Xcode を利用して、画面やコードの作成、デバッグ、App Store へのアプリの提出ができます。
一般にこのようなツールは、統合開発環境、もしくは IDE（Integrated
Development Environment）と呼ばれています。IDE は、ソフトウェアを効率よく開発できるように、さまざまな機能を提供してくれている開発ツールです。Swift や Objective-C を使って開発ができる
Xcode 以外にも、さまざまな言語（Java、Ruby、PHP など）で、有料無料問わずにたくさんの IDE があります。
Xcode 以外にも iOS アプリ開発ができる IDE はありますが、一般的に多く利用されているのは Xcodeです。

27

Day 1 - Lesson 2

アプリ開発の環境を整えて、Xcode の使い方を学ぼう

Day 1

Lesson2-2Apple ID を取得しよう？ このレッスンで学ぶこと● Apple ID の作成する手順を学び、Apple ID を取得します。
● Apple ID の調べ方や、メールアドレスの変更方法も確認します。

1 Apple ID をすでに取得されている方
すでに Apple ID を取得済みの方は、その Apple ID が 1 つあれば、Apple のすべてのサービスが利用できます。App Store から Xcode をダウンロードできますので、このレッスンは読み飛ばしていただいて大丈夫です。

1-1

Apple ID を持っているか不明な方

取得しているご自身の Apple ID がよくわからないときがあります。その際は、下記の URL から調べることができます。
Apple ID を忘れた場合 - Apple サポート

https://support.apple.com/ja-jp/HT201354

1-2

Apple ID のメールアドレスを変更したい方

すでにお持ちの Apple ID のメールアドレスを変更できます。メールアドレスを変更しても、いままで利用してきた Apple ID をそのまま使い続けることができます。下記の URL に、メールアドレスの変更
方法が記載されています。
Apple ID を変更する - Apple サポート

https://support.apple.com/ja-jp/HT202667

28

Lesson 2-2

2 Apple ID をまだ取得されていない方
次の手順に沿って、一緒に作成しましょう。

2-1

Apple ID のサイトにアクセス

Apple ID のサイトにアクセスします。

▼▼ Apple ID ログイン画面

Day

1
1
2
3

Apple ID を管理 - Applehttps://appleid.apple.com/jp

4［Apple ID を作成］をクリックします。

2-2

Apple ID を取得しよう

5

Apple ID を作成

各項目を入力しましょう。個人の情報と、個人▼▼ Apple ID を作成

確認をするときのセキュリティ質問などを設定します。
赤枠の入力は、文字認証と呼ばれている仕組みです。左に表示されている画像の英数字を読み取って、右の入力欄に入力します。読みづらい
英数字の場合は、「新規コード」をクリックして、読める英数字を表示させましょう。
これは、悪意のあるプログラムから自動的にアクセスされ不正に利用されないようにするためです。人間にしか読めない読みにくい画像で英数字を読んで入力させることで、悪意のあるプログラ
ムからは利用できないようにしています。
よく利用される認証方法ですが、Apple の場合は音声で読みあげるサポートもしてくれています。
「音声サポート」をクリックすると、表示されている英数字を読みあげてくれます。
［次に進む］をクリックすると、確認用のコードを入力する画面が表示されます。

29

Day 1 - Lesson 2

アプリ開発の環境を整えて、Xcode の使い方を学ぼう

入力したメールアドレスに確認用の▼▼ 確認コードの記載があるメールが届く

コードが送信されます。メールを確認すると、確認用のコードが記載されています。
確認用のコード

確認用のコードを右の画面に入力し▼▼ Apple ID 作成時のコード入力

ます。

これで、Apple ID の作成は完了です。Xcode のダウンロードが行える準備が整いました。
続いて、Xcode のダウンロードとインストールを行います。

Point
Apple ID は、App Store、iTunes Store、iCloud をはじめとした Apple サービスへのアクセスに使う個人アカウントです。Apple すべてのサービスで使う連絡先、支払情報などが含まれています。
アプリ開発においても、Xcode から iPhone へアプリを転送する際に Apple ID が必要になりますし、アプリを
App Store へ申請登録する際にも必要となります。
とても重要な ID とパスワードですので、大切に管理しておきましょう。

30

Lesson 2-3

Xcode をインストールしよう

Day 1

Lesson2-3

Xcode をインストール
しよう

Day

1
1

？ このレッスンで学ぶこと

2● App Store から、Xcode のインストール方法を学びます。
● Xcode でアプリ開発が行える環境を整えます。

3
4
5

1 Xcode をダウンロードしよう
1-1

Xcode をダウンロードする前に本書では、Xcode を利用して開発を進めますので、最初に App Store から Xcode のダウンロードを行います。
インターネット回線の速さによって変わりますが、Xcode のダウンロードには数十分かかります。
MacBook などの場合は、ダウンロードとインストール実行中にバッテリーが切れないように気をつけてください。
また、Xcode 自体のファイルサイズが約 5GB あり大きいので、インストールする Mac のストレージ
容量も充分かどうか確認してください。

1-2

App Store からのインストール

App Store から Xcode をインストールしましょう。
Mac の Dock に あ る「Launchpad」▼▼ Launchpad から App Store を起動

アイコンをクリックして起動します。
Launchpad の中にある App Store を起動します。

31

Day 1 - Lesson 2

アプリ開発の環境を整えて、Xcode の使い方を学ぼう

App Store が 起 動 す る の で、 画 面▼▼ App Store から Xcode を検索の右上の検索ボックスに「Xcode」と入力して、「enter」キーを押します。

検索結果から「Xcode」をクリック▼▼ 検索結果から Xcode を選択します。

Xcode の詳細ページが表示されま▼▼ Xcode の入手す。［入手］ボタンをクリックしてください。

［App をインストール］をクリック
すると、Xcode のダウンロードとインストールがはじまります。
Xcode のファイルサイズはとても大きいため、ダウンロードには時間がかかることがあります。本書を読み進めながら、気長にお待ちください。

32▼▼ App をインストール

Lesson 2-4

Xcode を起動して、プロジェクトを作成しよう

Day 1

Lesson2-4

Xcode を起動して、プロジェクトを作成しよう

Day

1
1

？ このレッスンで学ぶこと

2● Xcode を起動して、プロジェクトの作成を行います。
● Xcode の基本的な画面構成について学習します。

3
4
5

1 Xcode を起動しよう
1-1

Xcode を起動

Xcode の起動方法はいくつかあり▼▼ Launchpad から Xcode を起動

ま す が、 今 回 は Launchpad か ら、
Xcode のアイコンをクリックして起動しましょう。

1-2

Xcode の起動画面「Welcome to Xcode」と書かれた▼▼ Xcode の起動画面

画面が表示されます。本書では Xcodeを起動すると、毎回、この画面が表示されます。画面には、「Get started
with a playground」、「Create a
new Xcode project」、「Clone an
existing project」 の 3 つのメニューが表示されています。次のページより、メニューを 1 つずつ確認しましょう。

33

Day 1 - Lesson 2●

アプリ開発の環境を整えて、Xcode の使い方を学ぼう

Get started with a playground
Xcode 6 から、Playground（プレイグラウンド）という機能が追加されました。
Playground とは「遊び場」という意味で、Swift のコードを書きながら結果がすぐに確認できます。
Swift を書きながら、動きを確認するのに適しています。

●

Create a new Xcode project
新規のプロジェクトを作成します。本書では、すべてこのメニューから新規にプロジェクトを作成して、アプリを開発します。

●

Clone an existing project
バージョン管理システムを使ってプロジェクトを作成する方法です。バージョン管理とは、ファイルの変更履歴を管理してくれるシステムです。高度な機能になるので、本書では解説の対象外になります。

2 プロジェクトを作成しよう
2-1

プロジェクトを作成［Create a new Xcode project］をクリックして、はじめてのプロジェクトを作成してみましょう。
プロジェクトはアプリ開発を束ねるものです。1 つのプロジェクトで 1 つのアプリを開発します。プロ
ジェクトの中に、アプリの画面設計や画像ファイル、プログラムが入っています。
▼▼ Xcode の入手

34

Lesson 2-4［Choose a template for your new

Xcode を起動して、プロジェクトを作成しよう▼▼ プロジェクトテンプレートの選択

project:］ダイアログが表示されます。
これは、プロジェクトのテンプレート（雛形）を選ぶ画面です。この画面で

Day

❶

1

❷

プロジェクト、テンプレートを選ぶこ

1とができます。次の手順に沿って選び
ましょう。

2

❶ 画面の左上部の［iOS］を選択し3ます。

❷［Single View App］を選択します。
❸［Next］を選択しましょう。

❸

4
5

Tips
開発するアプリの構成に近いテンプレートを選んで、プロジェクトを生成する方法もあります。どのようなテンプレートがあるのかをいくつか確認しましょう。
●

Master-Detail App［Table View］という行単位で情報を表示できる▼▼ Master-Detail App

パーツが搭載されたテンプレートを生成してくれます。プラスマークをタップすると日時が追加されるという、シンプルな動きです。

35

Day 1 - Lesson 2●

アプリ開発の環境を整えて、Xcode の使い方を学ぼう

Page-Based App
これは、ページをめくるような動きをしてくれるテ▼▼ Page-Based App

ンプレートです。簡単にこのようなアニメーションが使えると、とても便利です。

●

Single View App
いちばんシンプルなテンプレートです。いままでの▼▼ Single View App

テンプレートのように、機能やアニメーションは実装されていません。本書では、一からアプリの作り方を学びますので、なにも実装されていないこのシ
ンプルなテンプレートを選択して開発を進めます。

その他にもさまざまなテンプレートが用意されているます。興味がある方は、実際にテンプレートからプロジェ
クトを作成して確認してみてください。

36

Lesson 2-4

2-2

Xcode を起動して、プロジェクトを作成しよう

プロジェクトの情報を入力［Choose options for your new project］と記載された画面が表示されます。
▼▼ プロジェクトの新規作成

Day

1
1
2

❶
❷
❸
❹
❺
❻

3
4
5

❼

この画面では、プロジェクトの情報を設定します。設定する情報を一つ一つ確認しましょう。

❶ Product Name（製品名）
プロジェクトの名前です。アプリの初期段階での名前になります。プロジェクトの名前には好きなものが入力できます。ここでは、「MyFirst」と入力します。

❷ Team（チーム）
Xcode に登録済みの「Apple ID」を選択します。シミュレータで動作確認をする場合には設定の必要はないですが、実機転送を行う際には設定が必要です。本レッスンの最後で実機転送を説明していますので、いまは設定をしなくても大丈夫です。

❸ Organization Name（組織名）
会社名、組織名を入力します。本書では「Swift-Beginners」と入力していますが、自由に入力して大丈夫です。

❹ Organization Identifier（組織識別名）
この項目は［Bundle Identifier］の設定にかかわります。
［Bundle Identifier］は世界中のアプリの中でユニーク（一意）にする必要があります。よく利用される方法としては、ドメイン表記を逆にした記述（逆ドメイン）を入力します。ドメインが「swift-beginners.jp」の場合は、「jp.swift-37Day 1 - Lesson 2

アプリ開発の環境を整えて、Xcode の使い方を学ぼう

beginners」と設定します。
ドメインを持っていない方は、メールアドレスを逆から設定する方法もあります。なぜなら、メール
アドレスも世界に一つだけのものなので、ユニークになるからです。
例）swift@example.com の場合は、com.example.swift など

Point
本書では、［Organization Identifier］を、「Swift-Beginners」と入力しています。ですが、学習の際には、別のID にしてください。たとえば、ご自身のホームページのドメインのように、重複しにくい ID を入力してください。

❺ Bundle Identifier
この項目は、入力することはできません。［Product Name］と［Organization Identifier］を組み合わせて自動で生成されます。今回の設定では、「Swift-Beginners.MyFirst」と表記されています。

❻ Language（プログラミング言語）
アプリを作るプログラミング言語の選択します。「Swift」と「Objective-C」が選べます。
「Swift」を選択します。

❼ Use Core Data、Include Unit Tests、Include UI Tests
すべてチェックを外します。これらの項目は、高度な開発で必要になるデータベースやテストコードの指定です。

2-3

プロジェクトを保存

プロジェクトの保存場所を聞かれる
ので、適当な場所を選択します。本書
では、「Swift-Beginners」というフォルダを作成して、そこにプロジェクトを保存します。
［Create］ボタンをクリックします。

38▼▼ プロジェクトの保存場所

Lesson 2-4

Xcode を起動して、プロジェクトを作成しよう

プロジェクトが作成され、Xcode プロジェクト画面が表示されます。
この Xcode プロジェクト画面でアプリの画面を作成したり、プログラムを書いたりします。

Day

1▼▼ Xcode プロジェクト画面

1
2
3
4
5

3 Xcode 画面のナビゲーションを理解しよう
最初は、Xcode プロジェクト画面▼［ViewController.swift］▼の選択が表示されています。
まずは、［ViewController.swift］

を選択してみてください。ここからは、Xcode のナビゲーションや画面配置を確認します。
Xcode の プ ロ ジ ェ ク ト エ リ ア でファイルを選択するときはシングルク

クリックして選択リックです。ダブルクリックするとファイルが別の画面や別のタブとして新しく開かれます。

39

Day 1 - Lesson 2

アプリ開発の環境を整えて、Xcode の使い方を学ぼう▼▼ Xcode 画面構成❶［Toolbar］（ツールバー）❹［Inspectors］（インスペクターズ）❷［Navigator area］（ナビゲータエリア）❸［Editor area］（エディタエリア）❺［Debug area］（デバッグエリア）

Xcode はいくつかの画面エリアに分かれています。
▼▼ Xcode の画面エリア

画面のエリア役割❶［Toolbar］（ツールバー）

画面上部のメニューでアプリの実行を行え、画面を切り替えることができます❷［Navigator area］（ナビゲータエリア）

左サイドのナビゲータエリアで、ファイルを選択します❸［Editor area］（エディタエリア）

プログラムを書いたり、画面を作成したりできます❹［Inspectors］（インスペクターズ）

エディタエリアで、表示または選択されているパーツ、ソース
ファイルに対応する情報を、表示、編集できます❺［Debug area］（デバッグエリア）

シミュレータ実行時などに状況が出力される場所。自分でプログラムを書いて出力できるので、動作確認やテストを行うときにも使用しますまずは、ツールバーの機能から確認します。

40

Lesson 2-4

Xcode を起動して、プロジェクトを作成しよう

3-1 ［Toolbar］（ツールバー）

Day▼［Toolbar］▼の構成❶ Run ボタン

❻ Editor configuration ボタン❸ Scheme メニュー1
1

❺ Library❷ Stop ボタン❶❹ Activity viewer❼ Workspace configuration ボタン［Run］ボタン（実行ボタン）
プログラムを、ビルド・実行できます。
ところで、「ビルド」とは何なのでしょう？「ビルド」は、私たちが書いたコードをコンピューターが

2
3
4
5

理解できる最終的な実行ファイルとして作成することです。プログラミング関連の書籍にはよく出てくる用語なので、覚えておきましょう。

❷［Stop］ボタン（ストップボタン）
実行中のプログラムを停止します。

❸［Scheme］メニュー（スキームメニュー）
プロジェクトで実行する、「iOS シミュレータ」を選択できます。
iOS シミュレータは、Xcode で利用できる仮想デバイスです。実際に iPhone、iPad などを Mac につながなくても、Xcode 上でアプリの動作を確認できます。たとえば iPhone XS を持っていなくても、iOS シミュレータを起動することで、iPhone XS ではどのようにアプリが表示されるのかの確認が行えます。

❹［Activity viewer］（アクティビティビューワー）実行中のプログラムの状態や、ビルドの進捗状況が表示されます。

❺［Library］（ライブラリ）
ラベルやボタンなどのパーツが収められています。

❻［Editor configuration］ボタン
Xcode の画面中央にあるプログラムコードの表示方法を指定します。

41

Day 1 - Lesson 2●

アプリ開発の環境を整えて、Xcode の使い方を学ぼう［Standard editor］（左のボタン）▼［Standard▼
editor］

選択したファイルの内容が表示されます。

●［Assistant editor］（中央のボタン）［Assistant editor］を選択すると、画面が 2 つに分割▼［Assistant▼
editor］

されます。編集中のファイルの画面（View）出力結果が表示されます。
●▼［Version▼
editor］［Version editor］（右のボタン）選択しているファイルが修正されている場合に、差分を表示してくれます。
この機能は、プロジェクトがバージョン管理の対象になっている場合に利用できます。本書では、バージョン管理については割愛しているため、利用しません。

❼［Workspace configuration］ボタン▼［Workspace▼
configuration］ボタン

左のアイコンから①［Navigator area］、②［Debug area］、③［Inspectors］のそれぞれを表示・非表示に切り替えることができます。

①

②

③

3-2 ［Navigator area］（ナビゲータエリア）［Navigator area］は Xcode の左端に表示されているナビゲーションで、［Navigatorbar］［Content area］［Filter bar］で構成さ▼［Navigator▼area］プロジェクトのファイル表示エリア❶❷❸

Navigator bar
ナビゲータバー

れています。
それぞれの役割を確認します。

Content area
コンテントエリア● ［Navigator bar］
（ナビゲータバー）［Navigator bar］には、各種ナビゲータが用意されています。
よく利用するナビゲータに絞って、説明
します。

42

Filter bar
フィルターバーLesson 2-4

Xcode を起動して、プロジェクトを作成しよう▼▼ ナビゲータバー

ナビゲータ

説明

Day

プロジェクトのファイルの一覧が表示されます。ファイルの追加・削除が［Projectnavigator］

行えます。この一覧で、ファイルを選択すると、エディタエリアにファイ（プロジェクトナビゲータ）
ルの中身が表示され、編集ができるようになります

1

❷

［Find
navigator］
（検索ナビゲータ）

プロジェクト内の文字列を検索できます1❸［Issuenavigator］
（問題ナビゲータ）

プロジェクトのコードを解析し、診断・警告・エラーなどを表示します

2

❶

3

● ［Content area］（コンテントエリア）

プロジェクトの各ディレクトリやファイルが表示され、操作できます。
● ［Filter bar］
（フィルターバー）［Filter bar］に文字を入力して、［Content area］に表示されるファイルを絞り込むことができます。

453-3 ［Editor area］（エディタエリア）
開発作業の多くは、［Editor area］で行います。
［Project navigator］で選択したファイルの内容によって、エディタの表示が切り替わります。

▼▼ ソースコードエディタ▼▼ ストーリーボードエディタ▼▼ プロジェクトエディタ

43Day 1 - Lesson 2

アプリ開発の環境を整えて、Xcode の使い方を学ぼう

3-4 ［Inspectors］（インスペクターズ）
このエリアでは、おもに［Storyboard］（ストーリーボード）に▼［Inspectors］▼

関する設定を行います。［Storyboard］では、アプリのレイアウト
や画面遷移を視覚的に作成できます。
［Inspectors］ではパーツの文字を大きくしたり色を変えたりと、パーツのカスタマイズが行えます。
ま た、 あ る 条 件 で 自 動 で レ イ ア ウ ト を 変 更 す る AutoLayout（オートレイアウト）の設定を確認することができます。

次からは、実際にプロジェクトを作成して、Xcode の操作を体験してみましょう。

Tips
Xcode は英語表記のため、最初は戸惑うと思います。本書でも、Xcode の画面項目を示すときには英語表記のまま説明しています。これにはいくつか理由があります。
まず、Xcode はバージョンアップが早いため、英語表記でそのまま使えるようになったほうが早く対応できます。
そして、アプリを作って世界へ公開したい（リリース）となったときに、審査の手続きも英語で行います。その審査がリジェクト（申請却下）となったときの理由や対応方法も英語のメールで届くため、普段から英語での操作環境に慣れていると、対処の仕方も見えてきます。
また、公式ドキュメントも英語の方が圧倒的に多くあります。
上記のような理由から、Xcode はそのまま英語表記で使っていくことが望ましいと思います。

44

Lesson 2-5

Xcode をより使いやすくするための設定をしよう

Day 1

Lesson2-5

Xcode をより使いやすくするための設定をしよう

Day

1
1

？ このレッスンで学ぶこと

2● Xcode をより使いやすくするための［Preferences］（環境設定）を学びます。

3
4
5

1 Xcode の環境を設定しよう
Xcode の環境設定を行うことで、より使いやすくなります。Xcode の環境設定は、最初に設定した内容が記憶されますので、そのまま継続して使うことができます。
Xcode の環境設定は、［Preferences］メニューで設定します。

❶ メニューから［Xcode］を選択します。

❷［Preferences］をクリックします。

▼［Preferences］▼（環境設定）の選択❶❷［Preferences］（環境設定）画面が表示されます。ここでは、Xcode をより使いやすくするための設定が行えます。
本書では、［Line numbers］（行番号）、［Double Click Navigation］、［Fonts＆ Colors］の 3 つを説明します。

45

Day 1 - Lesson 2

アプリ開発の環境を整えて、Xcode の使い方を学ぼう

1-1 ［Line numbers］（行番号）の表示
Swift などのプログラムコードを書いていく場所を「エディタ」と呼びます。エディタに行番号があると探しやすく、とても便利です。

❶［Text Editing］ を 選 択 し ま す。

▼［Text▼Editing］［Editing］-［Text Editing］では、プログラムを書いていくためのエディタの設定ができます。

❷［Editing］をクリックします。
❸［Line numbers］（ 行 番 号 ） に❶❷❸チェックを入れます。この設定でエディタに行番号が入り、コードが探しやすくなります。

次のように、行頭に行番号が付加されます。
▼▼ 行番号なし、行番号あり

行番号なし

行番号あり

Point
通常の文書を書くときは、行番号を意識することは少ないですが、プログラムを書いていくエディタでは、行番号
はとても重要です。行番号を頼りに、コードのボリュームを見積もったり、コードの位置を特定することができた
りと、とても便利です。

46

Lesson 2-5

Xcode をより使いやすくするための設定をしよう

1-2 ［Double Click Navigation］で新しいタブを開くように設定
Xcode のデフォルト設定では、［Navigator］のファイルをダブルクリックすると新しいウィンドウが開いてしまう場合があります。慣れない間は作業が混乱しやすいでしょう。
ダブルクリックしたときに、新しいウィンドウを開くのではなく、新しい「タブ」を開くように変更します。

❶［Navigation］を選択します。
❷［Double Click Navigation］で、

Day

1
1
2

▼［Navigation］▼

3「Uses Separate Tab」を選択しま

❶

す。

4
5
❷

1-3 ［Fonts ＆ Colors］の設定
エディタのカラーやフォントサイズを設定できます。好みの設定を選ぶことができます。
エディタはプログラムコードを書いていく場所です。Swift の文法や重要な箇所をハイライトしてくれてとても便利です。
［Fonts ＆ Colors］を選択して、左▼［Fonts▼＆ Colors］

から好みの設定を選びます。よく使
用 さ れ て い る、 代 表 的 な［Fonts ＆Colors］を紹介します。

47

Day 1 - Lesson 2

アプリ開発の環境を整えて、Xcode の使い方を学ぼう▼▼ 代表的な［Fonts & Colors］［Fonts ＆ Colors］

設定の内容［Basic］
デフォルトのカラー設定。本書でも使用［Midnight］
背景がブラックになる。基本の文字がホワイトになる［Sunset］
背景が薄いイエローになり、基本の文字がブラック
になる

Point
慣れないときは、カラー設定は［Basic］のままでよいと思います。慣れてきたころに好みのカラー設定を選んでく
ださい。

48

Lesson 2-6 「Hello Swift!」と表示してみよう

Day 1

Lesson2-6「Hello Swift!」と表示してみようDay

1
1？ このレッスンで学ぶこと

2● 画面に「Hello Swift!」と表示するアプリを作り、Xcode の基本操作、シミュレータなどの操作を体験して学びます。
● 実際の iPhone（実機）にアプリを転送する実機転送も体験します。

3
4
5

完成イメージ
今回のアプリの完成イメージを確認してみましょう。
アプリが起動すると、画面に「Hello Swift!」と表示されます。
1 フレーズを表示するシンプルなアプリを作りながら、アプリ開発に必要な機能を体験します。

文字が表示されるシンプルなアプリ！

アプリが起動すると文字が表示される

49

Day 1 - Lesson 2

アプリ開発の環境を整えて、Xcode の使い方を学ぼう

iPhone を横にしても中央に文字を表示

アプリを起動して確認する 2 つの方法
①シミュレータを使ってアプリを起動

iPad でも中央に文字を表示② iPhone 本体へプログラムを転送して起動（実機転送）

Point
本書の構成では最初に、これから作成するアプリの完成イメージを確認します。完成イメージを念頭に置きながら学習することで、より理解しやすくなります。

部品レイアウト● 「Hello Swift!」という文字を表示するための Label（ラベル）を配置。

ユーザー操作50●

アプリを起動すると、「Hello Swift!」と表示されます。

●

シミュレータの起動方法や、iPhone 本体へアプリを転送する方法を学びます。