はじめに本書に関するお問い合わせ
この度は小社書籍をご購入いただき誠にありがとうございます。小社では本書の内容に関するご質問を受け付けております。
本書を読み進めていただく際に不明な箇所がございましたらお問い合わせください。
なお、お問い合わせに関しましては以下のガイドラインを設けております。恐れ入りますが、ご質問の際には最初に下記
ガイドラインをご確認ください。

ご質問の前に小社ウェブサイトで「正誤表」をご確認ください。最新の正誤情報を下記のウェブページに掲載しております。

本書サポートページ：http://isbn.sbcr.jp/87148/
上記ページの「正誤情報」のリンクをクリックしてください。なお、正誤情報がない場合、リンクをクリックすることはできません。

ご質問の際の注意点●ご質問はメール、または郵便など、必ず文書にてお願いいたします。
お電話では承っておりません。
●ご質問は本書の記述に関することのみとさせていただいております。
従いまして、○○ページの○○行目というように記述箇所をはっきりお書き添えください。
記述箇所が明記されていない場合、ご質問を承れないことがございます。
●小社出版物の著作権は著者に帰属いたします。
従いまして、
ご質問に関する回答も基本的に著者に確認の上回答しております。
これに伴い返信は数日ないしそれ以上かかる場合がございます。あらかじめご了承ください。

この書籍は、「iOSアプリを作ってみたい、すべての初心者が、体験しながら学べる入門書」です。
iOSは Apple が Mac OSをベースに開発した、iPhone、iPad、iPod Touch 向けのモバイル OSです。
執筆陣は本書の構成段階からハンズオンセミナーを開催し、たくさんの初心者の方々の声をまとめ、各レッスンを構成しました。
レッスンごとに、ハンズオンセミナー開催後に、参加者の方々からフィードバックをいただく時間を設け、iOS 開発の初心者の方々がわからないポイントはどこで、どの操作でつまずくのかを丁寧に調査しました。
また、執筆陣は「Swiftビギナーズ倶楽部」というコミュニティを継続開催しており、プログラミング自体がはじめての方からたくさんの意見を取り入れています。
そうした調査に基づき、プログラミングを通して、モノづくりの楽しさを体験していただけるように、
少しずつ階段を登っていく体験を重視した構成にしました。初心者が最初の一歩を踏み出す書籍を目指しています。
本書のコンセプトは「まずは体験してみて、その経験を生かして学んでいく」です。
難しいプログラミング文法の説明は極力最小限にまとめ、多くのサンプルアプリの開発を体験してもら

ご質問送付先うことで、最短距離でアプリ開発の「勘所」がつかめるように工夫しました。

ご質問については下記のいずれかの方法をご利用ください。
ウェブページより
上記のサポートページ内にある「この商品に関する問い合わせはこちら」をクリックすると、メールフォームが開きます。
要綱に従ってご質問を記入の上、送信ボタンを押してください。
郵送
郵送の場合は下記までお願いいたします。
〒106-0032
東京都港区六本木 2-4-5
SBクリエイティブ 読者サポート係

執筆陣は、iOSアプリ開発者や勉強会の主宰者、セミナーの講師、イベントでのスピーカーなど、多彩な経験者で構成されています。
これからiOSアプリを制作される方のために、思いを込めて執筆しました。
ようこそ、iOSアプリ開発の世界へ。

●本書内に記載されている会社名、商品名、製品名などは一般に各社の登録商標または商標です。本書中ではⓇ、™ マークは明記しておりません。
●本書の出版にあたっては正確な記述に努めましたが、本書の内容に基づく運用結果について、著者および SBクリエイティブ株式会社は一切の責任を負いかねます。
ご了承ください。
©2016 Haruhito Fuji, Yui Tokuhiro, Kanako Kobayashi, Yoshinori Kobayashi
本書の内容は著作権法上の保護を受けています。著作権者・出版権者の文書による許諾を得ずに、本書の一部または全部を無断で複写・複製・転載することは禁じられております。

iii

目 次

6 「Hello Swift!」と表示してみよう 35

C o n t e n t s

1

はじめに

1

35

2 Labelを配置して、AutoLayoutを使ってみよう

36

0 この本の読み方と使い方

x

1 ご利用の前に必ずお読みください

xiii

L e s s o n

3

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

2

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

2

2 あらかじめ挫折しそうなポイントを

具体的には、プロジェクトの作成方法、画面へのパーツ配置、プログラムとの連結、Swiftの基本文法を学びます。そして、最後には実際に iPhoneで4 画面のパーツとプログラムを

1 完成をイメージしよう

54

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

55

2 アプリに必要なパーツの3

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

5

1 Swiftの特徴を押さえよう7

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

iOSアプリを開発するために、必要なものを学んでいきます。
アプリ開発をするために必要な Xcode（エックスコード）のインストールを学び、
iPhoneの画面に 「Hello Swift!」と表示できるようなアプリを作ってみます。

1 iOSアプリを開発するために必要な準備をしよう

2 Apple IDを取得しよう

12
14

1 Apple IDをすでに取得されている方

14

2 Apple IDをまだ取得されていない方

15

3 Xcodeをインストールしよう 17
1 Xcodeをダウンロードしよう

17

1 Storyboardにパーツを配置してみよう

57

2 パーツを装飾してみよう

60

3 Image Viewパーツで使う
画像ファイルを設定しよう

67

関連付けしてみよう 80

1 コードを書きやすいように
Xcode画面を整理しよう

80

2 Image Viewをコードと関連付けしよう

82

3 Labelをコードと関連付けしよう

84

4 Buttonをコードと関連付けしよう

85

5 プログラムを書いてじゃんけんアプリを動かそう

90

1 プログラムを書く前に、大きく作り方を把握しよう

3 各パーツの表示位置、幅や高さを設定しよう 6990

6 カスタマイズ編①

1 AutoLayout（オートレイアウト）の
概要を理解しよう

69

2 作業しやすいように画面を整えよう

69

3 Buttonの位置と幅・高さを設定しよう

70

4 Labelの位置と幅・高さを設定しよう

76

5 Image Viewの位置と幅・高さを
設定しよう

78

〜起動画面（LaunchScreen）
を設定しよう〜 105
1 完成をイメージしよう

105

2 起動画面に使うロゴ画像を設定しよう

106

7 カスタマイズ編②〜アイコンを設定しよう〜

111

1 完成をイメージしよう

111

プロジェクトを作成しよう 19

2 アイコンのサイズや使用用途を確認してみよう

112

1 Xcodeを起動しよう

19

3 アイコンの作成と設定をしよう

113

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

20

3 Xcode画面のナビゲーションを
理解しよう

25

4 Xcodeを起動して、

12

1 アプリ開発に必要な3つのものを準備しよう

iv

5

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

3

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

46

じゃんけんアプリを作りながら、アプリ開発の基本を学んでいきます。

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

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

1 プログラミングを体験から

L e s s o n

43

5 実機転送を行い、iPhoneで確認してみよう

じゃんけんアプリを動かしてみましょう !

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

押さえておこう4 シミュレータを起動してみよう

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

配置と設定をしてみよう 57

学んでいこう

40

iii

日目

L e s s o n

1 完成をイメージしよう

3 プログラムを書いてみよう

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

1 Xcodeの環境を設定しよう

31v

L e s s o n

4

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

1 プロジェクトを作成しよう 118
1 完成をイメージしよう

118

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

118

2 楽器を配置しよう 119

1 画像ファイルを取り込んで配置しよう

119

3 タップで、音を鳴らしてみよう 136
136

2 音を扱う準備をしよう

136

L e s s o n

5

3 「AVFoundation」を読み込もう138

4 シンバルとプログラムをつなごう

138

5 メソッドをコーディングしよう

139

6 ギターとプログラムをつなごう

145

7 「Play」「Stop」とプログラムをつなごう

146

4 カスタマイズ編

1 リファクタリング（refactoring）を
押さえよう

150

マップ検索アプリを作ろう〜UI パーツの扱いとdelegateを学ぶ〜
テキストエリアにキーワードを入力すると、該当する場所にピンが立つ、マップアプリを開発していきます。
文字を入力できる UIパーツ Text Fieldは、キーボードのリターンキーなどをカスタマイズすることができますので、その設定方法も学んでいきます。

1

3

プロジェクトを作成しよう 156
1 完成をイメージしよう
2 プロジェクトを作成しよう

156
157

2 画面を作成しよう 158

vi

1 使用する UIパーツを配置しよう

158

2 AutoLayoutで、レイアウトを整えよう

160

3 関連付けをしよう

162

マップ検索アプリを作っていこう

L e s s o n

1

タイマーアプリを作ろう〜画面遷移とデータの保持について学ぶ〜

ここでは、画面遷移の方法を学びます。タイマー画面と設定画面の 2つの画面がある、
タイマーアプリを作ります。タイマー画面で秒数のカウントダウンを行い、設定画面でタイマーの秒数を選ぶことができます。

4 画面を更新するメソッドを作成しよう

229

5 経過時間を処理する
メソッドを作成しよう

232

6 カウントダウンの処理を実装しよう

233

Storyboardでレイアウトを作ろう 192

7 タイマーを停止する処理を実装しよう

236

1 ［Main.storyboard］を Navigation
Controllerに変更しよう

236

192

8 秒数の設定画面に、画面遷移をしよう

2 Navigation Controllerの仕組みを知ろう238

194

9 秒数設定画面から戻ってきたら、設定した秒数で画面を更新しよう

3 タイマー画面の UIパーツを配置しよう

195

239

4 タイマー画面の AutoLayoutを指定しよう

10 シミュレータでカウントダウンを
確認しよう

198

5 設定画面を追加しよう

208

1 PickerViewを利用できるようにしよう

241

6 画面遷移を行う Segueを追加しよう

209

2 変数を宣言しよう

242

7 設定画面の UIパーツを配置しよう

211

8 設定画面の各パーツにAutoLayoutを設定しよう

3 設定画面起動時に、PickerViewに保存している秒数をセットしよう

244

214

4 for文とは ?

245

9 設定画面の SettingViewControllerを
追加しよう

216

5 UIPickerViewの DataSourceのdelegateメソッドを作成しよう

246

10［Assistant editor］で確認しよう

219

11 タイマー画面（View Controller）を関連付けよう6 UIPickerViewの内容を表示する
delegateメソッドを作成しよう

247

221

7 画面で秒数を選択したときのdelegateメソッドを作成しよう

248

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

248

1 プロジェクトを作成しよう 190〜リファクタリングでコードをすっきり ! 〜 150

1 それぞれの音源を鳴らすように
実装しよう

2

日目

音もアプリのクオリティを高める大切な要素になります。
ここでは、iOSアプリ開発で音をどのように実装していけばよいのかを体験していきましょう!

165

1 Text Fieldを使ってみよう

165

2 キーワードから
緯度経度を取得してみよう

170

3 delegateやクロージャについて
理解しよう

175

4 カスタマイズ編〜マップの表示方法を切り替えてみよう〜 178
1 完成をイメージしよう

178

2 地図種別の「切替」
ボタンを配置しよう

179

3 地図種別切り替え処理を実装しよう

183

2

1 完成をイメージしよう

190

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

191

12 設定画面（SettingViewController）を224
関連付けよう3 タイマー画面を作ろう 226

4 設定画面を作ろう 241

1 コードを書きやすいように準備しよう

226

5 カスタマイズしてみよう 253

2 変数の宣言を追加しよう

227

1 完成をイメージしよう

253

3 起動時に初期値を設定しよう

228

2 UIAlertControllerを追加しよう

254

vii

L e s s o n

2

SNS 投稿ができるカメラアプリを作ろう〜前半〜

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

L e s s o n

4

カメラを利用することができる 「UIImagePickerController」と、カメラロールに保存したり SNS投稿ができる 「UIActivityViewController」を利用して、カメラアプリを開発していきます。画面のレイアウトを設定する AutoLayoutの機能や、ネットからお菓子の情報を 「JSON」形式で取得し、iPhoneに表示してみましょう。

ここでは、インターネットのデータを有効活用するために、WebAPIと JSONについて学んでいきます。そして、取得したデータを Table Viewを使って、リストで表示します。

UIパーツとプログラムを関連付けする方法も学んでいきましょう。

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

3 カメラの起動と SNSシェアを作ろう 271

1 完成をイメージしよう

258

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

259

2 画面を作ろう 260

1 カメラの使用をユーザーに許可してもらおう

271

2 カメラが使用できる機種、できない機種を判定しよう

273

4 キーワードを入力して1 完成をイメージしよう330

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

330

2 Web APIと JSONについて学ぼう 331
1 Web APIの基本的な仕組みを学ぼう

331

お菓子データを取得しよう 345
1 画面のパーツとプログラムの関連付けをしよう

345

2 Search Barで入力されたキーワードをデバッグエリアに出力しよう

347
351
355

1 使用する UIパーツを配置しよう

260

3 カメラを起動するコードを追加しよう

275

2 AutoLayoutで、レイアウトを整えよう

2 JSONと XMLについて学ぼう

332

263

4 カメラで撮影した写真を表示させよう

277

3 ブラウザで Web APIを使ってデータを取得してみよう

3 Web APIのリクエスト URLを組み立てよう334

4 リクエストを生成して、JSONを取得しよう

3 UIパーツの詳細を設定しよう

265

4 UIパーツをプログラムと関連付けしよう 267

5 SNSシェア機能を追加しよう

278

3 Search Bar、Table Viewを配置しよう 338

4 カスタマイズ編

1 Search Barを配置しよう

338

2 Table Viewを配置しよう

340

283

3 各パーツに AutoLayoutを設定しよう

2 フォトライブラリーの使用をユーザーに許可してもらおう

284

4 Table View Cellの［Style］と［Indentifier］を設定

3 カスタマイズしてみよう

284〜フォトライブラリーから写真を取り込んでみよう〜 283
1 完成をイメージしよう

L e s s o n3

索引

3 エフェクト画面を作っていこう 310

1 完成をイメージしよう

292

1 画面遷移をしてみよう

310

2 「SNSに投稿する」ボタンを削除しよう

293

2 画面遷移して画像を表示してみよう

314

3 画面を閉じてみよう

315

4 画像をエフェクトしてみよう

317

5 画像をシェアしてみよう

321

1 新しい ViewControllerを追加しよう

296

2 ViewControllerとコードを結びつけよう

297

3 いままでの ViewControllerから画面遷移できるようにしよう

300

4 使用する UIパーツを配置しよう

302

4 カスタマイズ編

Table Viewで一覧表示してみよう

362

342

1 お菓子データをタプルに格納してみよう362

344

2 お菓子データを Table Viewで一覧表示してみよう

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

カメラアプリには、エフェクト機能が定番機能になっていることが多いです。
エフェクト機能を利用できる 「Core Image」を利用して開発していきます。
また、画面遷移を実現する「Segue」の応用として、画面遷移するときに情報を渡すことを学びます。

2 画面を追加しよう 296

5 取得したお菓子データを

6 カスタマイズ編

SNS 投稿ができるカメラアプリを作ろう〜後半〜

1 画面を修正しよう 292

viii

1 プロジェクトを作成しよう 330〜エフェクトの種類を増やしてみよう〜

323

1 完成をイメージしよう

323

2 カスタマイズしてみよう

324

3 フィルタ名の効果を確認しよう

327

373

2 SFSafariViewControllerを使ってWebページを表示しよう

374

379

Swiftビギナーズ倶楽部について謝辞

1 完成イメージを確認しよう

383

384

執筆陣プロフィール

385ix

0： この本の読み方と使い方

本書では、プログラミングの文法説明は最小限にして、iPhone/iPadアプリを作って動かしていくことを目的として構成しています。
プログラミング文法書のように文法を理解し、覚えるのではなく、どんどんアプリを作って体験してい0 -1

本書が対象とする方

くことに比重を置いています。プログラミングがはじめての人でもiOSアプリが作れるという体験ができるように工夫しました。

・プログラムを書いたことはないけれど、iPhone/iPad アプリを作ってみたい方。

学習が進めやすいように、学校の授業のように時限制（レッスン）で区切っています。

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

各レッスンごとに独立したサンプルアプリが作れるように配慮していますので、制作したいサンプルア

・中高生、大学生で iPhoneアプリ開発を学んでみたい方。
・シルバー世代や中高年の方で再学習を実施したい方。

プリがあれば、途中からでも学習できます。
そして、本書を読み終えた人向けに、本書の公式サイトにさらなるサンプルアプリを用意しています。

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

ぜひ、チャンレンジしてみてください。

そんなiOSアプリを作ってみたい、すべての初心者が対象です。

のある方は、作りたいサンプルアプリのレッスンからはじめるのもよいでしょう。

まったくの初心者の方は、読み飛ばさずに最初からじっくりと取り組んでみてください。少しでも経験
アプリを作ることを「開発」するともいいます。
開発といっても「難しいことをする！」と身構える必要はありません。
プログラミングを楽しみながら、リラックスして読み進めてください。

0 - 4 本書の構成

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

0 -2 本書でできるようになること

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

とにかく「体験」すること、そしてあとから「理解」することに重点を置いています。
レッスンの中で学べることをピックアップして予測できるようにわかりやすくしています。

xxi

②プログラムソースコード

0 -7

本書の公式サポートサイトの紹介とサンプルアプリダウンロード

公式サイトでは、本書の内容に関するサポートや、書籍内で掲載されているサンプルアプリ、プログ
ラムコードなどが提供されています。
完成したサンプルアプリの動きを確認したり、自分で打ち込んだプログラムコードの確認などでご使用ください。
本書の公式サポートサイト
https://swiftbg.github.io/swiftbook/
Swift のソースコードを掲載しています。ソースコードは理解しやすいように、1行から数行の塊で説明
本書のサンプルアプリダウンロードと使い方

していきます。
※ Swift（スウィフト）は、iOSアプリを作るためのプログラミング言語です。

https://swiftbg.github.io/swiftbook/sample/※ Xcode（エックスコード）は、iOSアプリを視覚的に開発するための統合開発環境です。

③ Tips（ワンポイント）・Column（技術コラム）

Tips（ワンポイント）は、いまの学習の中での補助的な情報や、知っておいたほうがよいことを記載しています。さらに小さな情報は「MEMO」として掲載しています。

0 -8 本書を読了された方のための応用編講座

本書を最後まで読了された方には、応用編として、さらなる学習教材を用意しています。少し難易度が上がりますが、やりがいがあると思いますので、ぜひ、チャレンジしてみてください！
応用編テキスト・サンプルアプリのダウンロード
https://swiftbg.github.io/swiftbook/advanced/

Column（技術コラム）は、本文の流れから

1： ご利用の前に必ずお読みください

は少しそれますが、重要な技術や使い方を記載しています。

1-1

必要なパソコン機器

iOSアプリ開発には、Mac が必要です。

0 - 6 さらなるステップアップ！

〜カスタマイズ編について〜

本書では、もう一歩進んで学習したい方のためにレッスンごとに「カスタマイズ編」を設けています。
サンプルアプリをさらにカスタマイズして、機能アップさせながら学んでいきます。
カスタマイズ編が難しいと感じられた方は、最初の学習ではカスタマイズ編を飛ばして学習を進めてみてください。2 回目以降からはカスタマズ編も含めて学習していくことで、効果的に学ぶことができます。

xii

Apple Mac 製品

xiii

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

本書で必要な各ソフトウェアのバージョンについて

アプリ開発を行う前に、必要なソフトウェアのバージョンを確認して、それを満たす必要があります。
バージョンはそのソフトウェアがいつ提供されたものであるのかを示す番号です。
iOSは Apple が Mac OSをベースに開発したiPhone、iPad、iPod Touch 向けのモバイル OSです。
このiOS のバージョンも確認する必要があります。
サンプルプログラムや本書で記載されているプログラムコード、画面掲載は、以下の環境に対応しています。
OS X El Capitanまたは Mac OS Sierra
Xcode 8.0 以上
iOS10.0 以上
上記のバージョンに満たない場合は、バージョンアップを行う必要があります。
バージョンアップに関しては、Apple サポートページをご確認ください。
Apple サポートページ
https://support.apple.com/ja-jp

Tips

アプリ作りの勉強をはじめたときに、最初のハードルとなるのが、Xcode（エックスコード）の操作です。目的の画面を作るためには Xcode を操作する必要がありますが、最初は、「どの場所にどんな機能のボタンがあるのか」がよくわからないため、なかなか学習が進みません。
そういった問題を克服するために、本書では、どんどん体験して、「体感」で覚えていく構成にしました。ぜひ、サンプルアプリを作りながら「体感」してください！

xiv

L

e

s

s

o

n

1

はじめてのアプリを開発する前に知っておこう
このレッスンでできるようになること
iOS アプリの開発を始める前に、知っておいた方がよ
いことを学んでいきましょう。
書籍を読み進めていく上で、最初の心構えを知っておくことで、心理的なハードルが下がり、学習が行いやす
くなります。
Apple が開催している開発者向けの大きなイベント「WWDC」についても触れていきます。WWDC では、Apple の新製品や新機能が発表されたり、市場動向や開発者への支払額などが公開されています。
「Swift」（スウィフト）言語の概要も学んでいきます。
Swift は 2014 年に発表された新しいプログラミング
言語で、Apple が作りました。Swift は、iPhone だけでなく Mac、Apple Watch でも動くアプリを作ることができます。

Lesson 1 - 1 プログラミングを体験から学んでいこう
Lesson 1 - 2 あらかじめ挫折しそうなポイントを押さえておこうLesson 1 - 3 アプリ開発をするなら知っておこう！
〜WWDC、手数料、課金方法〜

Lesson 1 - 4 Swift（スウィフト）を知ろう

日目

1

1

LessonLesson

日
目

1

1

日
目

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

1

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

日目Lesson1
このレッスンで学ぶことできるようになること

このレッスンで学ぶことできるようになること

プログラミングに対する気持ちを整理しプログラミングは難しいものではなく、アプリ開発で挫折しそうなポイントを最初に挫折しそうなポイントに触れていていきます。プログラミングを体験して楽しんで作るものだと理解すると、気負

事前に理解します。本書で集中して学るので、心理的なハードルが低くなりま学んでいくという考え方を理解していき

いがなくなります。

習する、エラーや警告に対する考え方、

す。

ましょう。

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

体験から学習する

Xcode について学びます。

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

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

ポイント①：まずは一冊の本に取り組む

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

予習や事前学習について

本書を学習するにあたって、予習のための時間は必要ありません。
予習で最初に知識を詰め込んでも、その知識が必要になるとは限りません。
最初にアプリを作っていき、必要なときに必要な量を学習する方が効率的です。
まずは、実際に作ってみて「動いている！」という成功イメージを持つことが大切です。

入門書をたくさん購入することで満足してしまいがちですが、まずは1つの書籍を最後まで学習することが大切です。
まずは、じっくりと本書だけに取り組んでみてください。

1-3

基礎知識、
前提知識について焦ることはありません。

本書では、事前の基礎知識、前提知識はとくに必要ありません。

すべてが理解できなくても、前に進んでいきましょう。

「動いた！」という体験をしてから、気になること、疑問に思うことを調べて、「なるほど！」と思えたと本書を読み終えるころには、次の新しい入門書や文法書も読み進めていくことができるようになります。

きに基礎知識が身についたといえるでしょう。
「まずは体験してみる」「基礎知識はあとから学習する」ことを念頭において読み進めていくことが大切です。

ポイント②：アプリ開発をする前の準備
アプリ開発を行う上で、事前の準備が必要になります。
事前の設定ではトラブルも多く、ここで諦めてしまう方も多いと思います。

2

3

1

1

日
目

本書では、1日目 Lesson2 でアプリ開発の準備にも十分な時間を割いています。事前の準備が終われ
ば、いよいよアプリを作っていきます！

Lesson1

ポイント③：アプリ開発で表示される警告やエラー
アプリを開発していく過程で、「警告」や「エラー」と言われるものに遭遇することがあ日目う!
3 アプリ開発をするなら知っておこ〜WWDC、手数料、課金方法〜

Lesson1
このレッスンで学ぶことります。

できるようになること

アプリ開発をする上で知っておきたい、

WWDC の情報をもとに、アプリ開発

最初は、警告やエラーの意味がよくわから

WWDC の概要、ダウンロード数などの環境を理解していきます。開発者がとず戸惑うことと思いますが、安心してください。

の数値、手数料、課金について概要をても気になる課金や報酬の概要についつかみます。

ても知っておきましょう。

警告やエラーはあなたを責めているのではな
く、よりよい方法を教えてくれているのです。
警告やエラーに遭遇したときには、「アドバ
イスしてくれてありがとう！」というぐらいの気持ちをもって、開発に取り組みましょう。

ポイント④：まずは、Xcode を体験して慣れていこう

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

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

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

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

WWDC2016 は 6月13日〜 17日にサンフラ
ンシスコで開催されました。
WWDC は Apple の製 品・サービスが発 表
されるイベントですが、参加するためのチケッ
トは1,599ドル（WWDC2016 チ ケット価 格 ）で販売されていて、1ドル105 円換算で約16 万
7,000 円と、その人気の高さがわかります。
WWDC では、過去に右のような製品・サービスが発表されています。

4

WWDC での製品発表
発表年

製品

1998 年

iMac

2006 年Intel XserveとMac Pro

2008 年

iPhone3G、MacBook Air

2010 年

iPhone4、iPad2012 年

MacBook Pro（Retina ディスプレイ搭載）

2013 年

Mac Pro（円筒形デザイン）

2014 年

Swift

2015 年

Swift2.0、Swift オープンソース化

2016 年

Swift3.0、Sirikit、iMessage Apps

5

1

1

日
目

App Store のダウンロード数と開発者への支払額

1-2

アプリ開発者は平均でどのぐらいの収入を得ているのでしょうか？
WWDC2016での公式発表の数値から試算してみたいと思います。

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

このレッスンで学ぶことできるようになることを1ドル105 円換算すると、約 5.3 兆円にもなります。また、登録アプリ数は約 200 万本であるとされるため、この 5.3 兆円を200 万本のアプリ数で割ると、1つのアプリの平均収入は約 265 万円になります。

iOSアプリ開発では、Swift（スウィフSwift には高速、モダン、安全、イン2008 年からアプリを1つリリースしていたとすると、年間平均で約 33万円、月平均で約 2 万 7千円のト）というプログラミング言語を使いま

タラクティブといった特徴があります。

す。2014 年に登 場した新しい言 語でSwiftを学ぶにつれてこれらのことがよす。Swift の概要を理解していきます。

くわかるようになります。

収入になります。
そして、登録アプリ数の200 万本には無料アプリも含まれていますので、平均は約 2 万 7千円以上になると思われます。
1-3

Apple の手数料

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

Lesson1

WWDC2016での公式発表によると、App Store からのアプリダウンロード数は1,300 億本を超えており、2008 〜 2016 年までの 8 年間でApple が開発者に支払った金額は累計 500 億ドルです。累計額

日目

1： Swift の特徴を押さえよう

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

たとえば、120 円のアプリであれば、84 円が振り込まれることになります。
1- 4 ユーザーへの課金方法

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

説明

有料ダウンロード

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

広告

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

アプリ内で課金する方法。有料もしくは無料でアプリを提供し、そのアプリ内でアイテムや機能追（アプリ内課金）加を販売し、収益を得る。アプリ内課金には、次の 4 つの方法がある

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

①消耗型：アプリの実行に伴い消費されていく。消費アイテムなど②非消耗型：1度購入するとユーザーのすべてのデバイスで使用可。書籍など③自動更新購読：期間を決めて販売、自動で更新。新聞、雑誌など④非更新購読：期間を決めて販売、自動で更新されない。1 ヶ月購読など

Swift.org - Welcome to Swift.org
https://swift.org/

6

7

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

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

●特徴⑤：たくさんのApple 製品で動くアプリが作れる●特徴①：Swift は高速である
Swift の迅速さを強調するために、ロゴマークにも「あまつばめ」が採用されています。
Swift は他のプログラミング言語と比較して、検索アルゴリズム（データを探し出す方法）が高速だと言われています。

●特徴②：Swift はモダンである
モダン（modern）とは「現代風」という意味です。Swift では、他のプログラミングでも採用されてい●特徴③：Swift は安全である
Swift はプログラミングの記述ミスやバグ（不具合）が起こりにくい仕組みを採用しています。

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

日目Lesson

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

Swift は日本語訳で「迅速」という意味で、鳥の「あまつばめ」を示す意味でも使われます。

る新しい機能を、積極的に取り入れています。

1

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」でプログラムを記述していきます。

Playgrounds

8

9

L

e

s

s

o

n

2

アプリ開発の環境を整えて、
Xcode の使い方を学ぼう
このレッスンでできるようになること
iOS アプリを開発するために、必要なものを学んでいきます。
Apple ID を取得されていない方のために、Apple ID の説明と取得方法についても解説します。
そして、アプリ開発をするために必要な Xcode（エックスコード）のインストールを学び、iPhone の画面に「Hello Swift!」と表示できるようなアプリを作ってみます。
最初の簡単なアプリを作りながら、Xcode にどのような機能があるのか体験していきましょう。
基本の操作を行いながら、iPhone（実機）がなくてもテストが行えるシミュレータの操作や、iPhone 本体へのアプリ転送（実機転送）も学びます。

Lesson 2 - 1 iOSアプリを開発するために必要な準備をしよう
Lesson 2 - 2 Apple ID を取得しよう
Lesson 2 - 3 Xcode をインストールしよう
Lesson 2 - 4 Xcode を起動して、プロジェクトを作成しよう
Lesson 2 - 5 Xcode をより使いやすくするための設定をしよう
Lesson 2 - 6 「Hello Swift!」と表示してみよう

日目

1

1

日
目

Lesson2

1 iOSアプリを開発するために必要な準備をしよう

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

Lesson
1-2

このレッスンで学ぶことできるようになること日目いる2016 年 9月時点では Mac が必要になります。

Apple ID

2

iOSアプリを開発するためには、Apple ID の作成が必要です。

iOSアプリを開発するために、用意しな

iOSアプリ開発をはじめる前に必要な知Apple IDは、Apple が提供しているオンライン

ければならないものや、それぞれの役識である、Mac やApple ID、Xcodeのサービスを利用するために必要なアカウントです。

割について学んでいきます。

概要について理解していきます。

Mac
T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

オンラインストアの「iTunes Store」では、音楽・映画やオーディオブックを購入できます。
ま た、「App Store」と い う サ ー ビ ス で は、
iPhone や iPad、Macで利用できるアプリがダウ

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

App StoreとiTunes

ンロードできます。さらに、有料で販売されているアプリも購入することができます。
iPhone や iPadをお持ちの方は、すでに Apple ID を利用していると思います。
それぞれのサービスを利用するのに必要な Apple ID ですが、Xcode のダウンロードでも必要になる

Mac

ため、事前に作成しておく必要があります。

Apple IDアカウント
Xcode
また、開発したアプリを全世界の人たちに利用してもらえるようにするには、別途、「Apple Developer
Program」
への登録も必要です。
この章では開発したアプリを、iPhoneに転送（実機転送）を行って利用するところまでをゴールにしています。
アプリを開発して世界に公開したいという方は、本書の公式サイトで公開手順を掲載していますので、確認してみてください。
アプリの公開手順
https://swiftbg.github.io/swiftbook/release
それでは、必要な3 つのものを確認していきましょう。
1-1

Mac

2015 年12 月に、Swift は誰でも利用・改変できるオープンソースとしてソースコードが公開されました。そのため、Mac 以外のパソコンでもiOSアプリ開発ができる可能性もありますが、本書を執筆して

12

1-3

Xcode（エックスコード）

Apple ID が作成できたら、「App Store」で、iOSアプリ開発に必要なXcode をインストールします。
Xcode は、Mac、iPhone、iPad、Apple Watch 向けのアプリを開発できる環境を提供してくれます。
Xcode を利 用して、 画 面 やコードの 作成、 デバッグ、AppStore へのアプリの提出ができます。
一般的にこのようなツールは、統 合 開 発 環 境もしくは、IDE（Integrated Development Environment）と呼ばれています。

Xcode

では、IDEとはなんなのでしょう？
IDEとはソフトウェアを効率よく開発できるように、さまざまな機能を提供してくれている開発ツールです。
Swift や Objective-Cを使って開発ができるXcode 以外にも、さまざまな言語（Java、Ruby、PHP など）で、有料無料問わずにたくさんの IDE があります。
また、Xcode 以外にもiOSアプリ開発ができるIDEはありますが、一般的に多く利用されているのは
Xcodeです。
本書でも、Xcode をインストールして開発を進めていきます。

13

1

1

日
目

Lesson2

2 Apple IDを取得しよう

このレッスンで学ぶことできるようになること

次の手順にそって、一緒に作成していきましょう。
2-1

Lesson2Apple ID のサイトにアクセス

Apple IDを作成する手順を学びます。

Apple ID が取得できるようになります。

Apple ID を管理 - Apple

また、Apple ID の調べ方や、メールア

また、Apple ID のメールアドレスの変https://appleid.apple.com/

ドレスの変更方法も確認します。

更も行えるようになります。

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

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

Apple ID を作成

各項目を入力していきましょう。

1： Apple ID をすでに取得されている方日
目

2： Apple ID をまだ取得されていない方Apple ID ログイン画面

個人の情報と、個人確認をするときのセキュリ
ティ質問などを設定します。

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

赤枠の入力は、文字認証と呼ばれている仕組みです。
左に表示されている画像の英数字を読み取って、右の入力欄に入力します。
読みづらい英数字の場合は、「新規コード」をクリックして、読める英数字を表示させましょう。

です。

よく利用される認証方法ですが、Apple の場合は音声で読みあげるサポートもしてくれています。
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

Apple IDを作成

14

15

1

1

日
目

入力したメールアドレスに確認用のコ

Lessonードが送信されます。

2

メールを確認すると、赤枠の中に確認

3 Xcodeをインストールしよう

日目Lesson2

用のコードが記載されていますので、その数字を右の画面に入力します。

このレッスンで学ぶこと

Apple IDコード入力できるようになること

Xcodeを使って開発を進めていくため

App Store から、Xcode のダウンローに、App Store から、Xcodeをダウン

ドとインストールができるようになりま

ロードしてインストールする手順を学びす。iOS 開発を行える環境が整います。

ます。

これで、Apple ID の作成は完了です。
Xcode のダウンロードが行える準備が

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

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

整いました。
続いて、Xcode のダウンロードとイン

1-1

ストールを行います。

Xcode をダウンロードする前に本書では、Xcode を利用して開発を進めていきますので、最初に App Store からXcode のダウンロードを行います。
インターネット回線の速さによって変わりますが、Xcode のダウンロードには数十分かかります。
Apple ID 作成完了

MacBookなどの場合は、ダウンロードとインストール実行中にバッテリーが切れてしまわないように気をつけてください。
また、Xcode自体のファイルサイズが約 5GB ほどあり大きいので、インストールするMac のストレー

Tips

ジ容量も充分かどうか確認しておいてください。
Apple ID は、App Store、iTunes Store、iCloudをはじめとした Apple サービスへのアクセスに使う個人アカウントです。Appleすべてのサービスで使う連絡先、支払情報などが含まれています。

アプリ開発においても、Xcode からiPhone へアプリを転送する際に Apple ID が必要になりますし、アプリを App Store へ申請登録する際にも必要となります。
とても重要な IDとパスワードですので、大切に管理しておきましょう。

1-2

App Store からのインストール

Mac の Docにある「App Store」アイコンをクリックして起動します。

Doc からApp Storeを起動

16

17

1

1

日
目

Lesson2

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

日目Lesson2
このレッスンで学ぶこと

App Store からXcodeを検索できるようになること

Xcodeを起動して、プロジェクトの作

プロジェクトの作成ができるようになり

成方法やXcode の基本的な画面構成にます。Xcode の画面の配置やボタンのついて学びます。使用頻度の高いナビ

概要について知っておくと、あとの作業

ゲーションやボタンを学習します。

の効率がよくなります。

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

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

1： Xcode を起動しよう
1-1

Xcode を起動

Xcode の起動方法はいくつかありますが、今回は Launchpadから、Xcode のアイコンをクリックして起動します。
検索結果からXcodeを選択

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

LaunchpadからXcodeを起動
1-2

Xcode の起動画面「Welcome to Xcode」と表示されている下に 3 つのメニューが表示されています。
1つずつ見ていきましょう。

Xcode インストール

Xcode の詳細ページが表示されます。
［インストール］をクリックすると、Xcode のダウンロードとイン

Xcode 起動画面

ストールがはじまります。

18

19

● Get started with a playground

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

1日目［Choose a template for your new
project:］ダイアログが表示されます。

❶

これは、プロジェクトのテンプレート

Lesson2（雛形）を選ぶ画面になります。
この画面でプロジェクト、テンプレー● Create a new Xcode project

トを選ぶことができます。ではさっそく、新規のプロジェクトを作成します。

❶「Single View Application」を選択し本書では、すべてこのメニューから新規にプロジェクトを作成して、アプリを開発していきます。

て、❷［Next］をクリックしましょう。

❷●● Check out an existing project
プロジェクトテンプレートの選択

バージョン管理システムを使ってプロジェクトを作成する方法です。
バージョン管理とは、ファイルの変更履歴を管理してくれるシステムです。

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

高度な機能になりますので、本書では取り扱いません。
Tips

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

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

プロジェクトを作成

Xcode 起動画面

● Master-Detail Application● Page-Based Application［Table View］という行で、情報を表示できるパー

これは、ページをめくるような動きをしてくれるテンツが搭載されたテンプレートを生成してくれます。

プレートです。

プラスマークをタップすると日時が追加されるとい簡単にこのようなアニメーションが使えると、とてう、シンプルな動きです。

も便利ですね。

Master-Detail Application

Page-Based Application

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

20

21

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

● Single View Application
いちばんシンプルなテンプレートです。
いままでのテンプレートのように、機能やアニメーションは実❶ Product Name（製品名）

装されていません。

プロジェクトの名前です。アプリの初期段階での名前になります。プロジェクトの名前には好きなもの

本書では、一からアプリの作り方を学んでいきますので、なにも実装されていないこのシンプルなテンプレートを選択し1
日目

Lesson2が入力できます。ここでは、「MyFirst」と入力します。

て開発を進めていきます。

❷ Team（チーム）

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

Single View Application

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

❸ Organization Name（組織名）

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

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

この項目は［Bundle Identifier］の設定にかかわります。
2-2

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

［Bundle Identifier］は世界中のアプリの中でユニーク（一意）にする必要があるので、よく利用される方法としては、ドメイン表記を逆にした記述（逆ドメイン）を入力します。
ドメインが「swift-beginners.jp」の場合は、「jp.swift-beginners」と設定します。
ドメインを持っていない方は、メールアドレスを逆から設定する方法もあります。
なぜなら、メールアドレスも世界に一つだけのものなので、ユニークになります。
例）swift@example.com の場合は、com.example.swift など

❶
●
❷
●
❸
●
❹
●
❺
●
❻
●
❼
●
❽
●

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

ここに入力することはできません。
［Product Name］と［Organization Identifier］を組み合わせて自動生成されます。今回の設定では、「Swift-Beginners.MyFirst」と表記されています。
世界中のアプリの中で、開発するアプリを識別する必要があります。
❻ Language（プログラミング言語）

アプリを作るプログラミング言語の選択です。
「Swift」と「Objective-C」が選べます。
プロジェクトの新規作成

22「Swift」を選択します。

23

1
日
目

❼ Devices（デバイス）

開発するアプリが、どのデバイス向けか指定をします。
iPhone、iPad 両方で使えるアプリであれば、「Universal」を選択します。

Lesson2

今回は「Universal」を選択します。
❽ Use Core Data、Include Unit Tests、Include UI Tests

すべてチェックを外してください。これらの項目は、高度な開発で必要になるデータベースやテストコ

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

ードの指定です。
2-3 プロジェクトを保存

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

3： Xcode 画面のナビゲーションを理解しよう
最初は、Xcodeプロジェクト画面が表示されています。
まずは、［ViewController.swift］を選択してみてください。ここからは、Xcodeのナビゲーションや画面配置を見ていきます。
クリックして選択

プロジェクトの保存場所［ViewController.swift］の選択

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

24

25

1
日
目

3-1 ［Toolbar］（ツールバー）❶［Toolbar］●（ツールバー）❶● Run ボタン❺
● Editor configuration ボタン❸● Schemeメニュー

Lesson2❻●［Utilities area］（ユーティリティ
エリア）❷●［Navigator area］（ナビゲータエリア）❸●［Editor area］（エディタエリア）❷● Stop ボタン❹ Activity viewer❻ Workspace configuration ボタン［Toolbar］の構成❹●［Inspector pane］（インスペクタペイン）❶［Run］ボタン（実行ボタン）

プログラムを、ビルド・実行できます。
ところで、
「ビルド」
とはなんなのでしょう？

❺●［Library pane］（ライブラリペイン）❼●［Debug area］（デバッグエリア）

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

「ビルド」は、私たちが書いたコードをコンピューターが理解できる最終的な実行ファイルとして作成することです。
プログラミング関連の書籍にはよく出てくる用語なので、覚えておきましょう。

Xcode 画面構成❷［Stop］ボタン（ストップボタン）

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

実行中のプログラムを停止します。

Xcode の画面エリア❸［Scheme］メニュー（スキームメニュー）

画面のエリア役割
画面上部のメニューでアプリを実行したり、画面を切り替えたりする❷［Navigator area］（ナビゲータエリア）

左サイドのナビゲータエリアで、ファイルを選択する

実際にiPhone、iPad などをMacにつながなくても、Xcode 上でアプリの動作を確認できます。

❸［Editor area］（エディタエリア）

プログラムを書いたり、画面を作成したりする

たとえば iPhone6s Plusを持っていなくても、iOSシミュレータを起動することで、iPhone6s Plusで❹［Inspector pane］（インスペクタペイン）❺［Library pane］（ライブラリペイン）

エディタエリアで、表示または選択されているパーツ、ソースファイルに対応する情報を、表示、編集できる
テキスト、ラベルといったUI パーツなどが集まっている❻［Utilities area］（ユーティリティエリア） ［Inspector pane］［Library pane］などが配置されているエリアを指す❼［Debug area］（デバッグエリア）

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

まずは、ツールバーの機能から見ていきましょう。

26

プロジェクトで実行する、「iOSシミュレータ」を選択できます。iOSシミュレータは、Xcodeで利用で❶［Toolbar］（ツールバー）

きる仮想デバイスです。

はどのようにアプリが表示されるのかの確認が行えます。
❹［Activity viewer］（アクティビティビューワー）実行中のプラグラムの状態や、ビルドの進捗状況が表示されます。
❺［Editor configuration］ボタン

Xcode の画面中央にあるプログラムコードの表示方法を指定します。

27

●［Standard editor］（左のボタン）

1日目●［Navigator bar］
（ナビゲータバー）

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

［Navigator bar］には、各種ナビゲー
タが用意されています。
よく利用するナビゲータに絞って、説［Standard editor］●［Assistant editor］（中央のボタン）

❶
●

❷
●

❸
●
Lesson［Navigator bar］

2

明します。

［Assistant editor］を選択すると、画面が 2 つに分割されます。

ナビゲータバー

編集中のファイルの画面（View）出力結果が表示

ナビゲータ

されます。

説明

❶［Project navigator］（プロジェクトナビゲータ） プロジェクトのファイルの一覧が表示される。ファイルの追加・削除が行える。この一覧で、ファイルを選択すると、エディタエリア

［Assistant editor］にファイルの中身が表示され、編集ができるようになる●［Version editor］（右のボタン）

選択しているファイルが修正されている場合に、差分を表示してくれます。
この機能は、プロジェクトがバージョン管理の対象になっている場合に利用できます。

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

プロジェクト内の文字列を検索できる❸［Issue navigator］（問題ナビゲータ）

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

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

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

プロジェクトの各ファイルが表示されます。

❻［Workspace configuration］ボタン●［Filter bar］
（フィルターバー）

左のアイコンから①［Navigator area］、［Filter bar］に文字を入力して、［Content area］に表示されるファイルを絞り込むことができます。

②［Debug area］、③［Utilities area］のそれぞれを表示・非表示に切り替えることができます。

①
●

②
●

③
●

［Workspace configuration］ボタン

3-3 ［Editor area］（エディタエリア）

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

3-2 ［Navigator area］（ナビゲータエリア）

3- 4 ［Utilities area］（ユーティリティエリア）［Navigator area］は Xcodeの 左 端 に表示されているナビゲーションで、［Navi

Navigator bar
ナビゲータバーgator bar］
［Content area］［Filter bar］

このエリアでは、おもに［Storyboard］（ストーリーボード）に関する設定を行います。
［Storyboard］は、アプリのレイアウトや画面遷移を視覚的に作成できます。
ボタンやテキストなどを、ドラッグ＆ドロップの操作で配置したり、画面遷移も簡単に設定できます。

で構成されています。
Content area
コンテントエリア

よく利用するものとして、［Inspector pane］と［Library pane］があります。

Filter bar
フィルターバー28［Navigator area］

29

1

1

日
目

Lesson2

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

日目Lesson2
このレッスンで学ぶことできるようになること

Inspector pane

Xcodeをより 使 い や すくするた め の［Preferences］（環境設定）メニューかPreferences（環境設定）を学んでいきらエディタの［Line numbers］
（行番

ます。

号）
、Tab や Indent（ イン デ ント）や、その他の設定ができるようになります。

Library pane

1： Xcode の環境を設定しよう❶メニューから［Xcode］を選択します。

［Utilities area］

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

❶
●

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

❷●

M e m o［Inspector pane］は、パーツの文字を大きくしたり色を変えたりと、パーツのカスタマイズが行えます。
［Library pane］にはテキストやボタンなどのたくさんのパーツがあります。このパーツを配置して画面を組み立てていきます。

［Preferences］では、Xcode の環境設
定ができます。
「環境設定」とは、操作がしやすいように、表示や動作を設定することです。

次からは、実際にプロジェクトを作成して、Xcode の操作に慣れていきます。

Tips［Preferences］を選択

Xcode は英語表記のため最初は戸惑うと思います。本書でもXcode の画面項目を示すときには英語表記のまま説明しています。これにはいくつか理由があります。

まず、Xcode はバージョンアップが早いため、英語表記でそのまま使えるようになったほうが早く対応でき［Preferences］（環境設定）画面が表ます。

示されます。ここでは、Xcode をより使そして、アプリを作って世界へ公開したい（リリース）となったときに、審査の手続きも英語で行います。そいやすくするための設定が行えます。

の審査がリジェクト（申請却下）となったときの理由や対応方法も英語のメールで届きますが、普段から英語での操作環境に慣れていると、対処の仕方も見えてきます。
また、公式ドキュメントも英語の方が圧倒的に多いです。
上記のような理由から、Xcode はそのまま英語表記で使っていくことが望ましいです。

［Preferences］（環境設定）画面

30

31

1

1-1 ［Line numbers］
（行番号）
の表示

1-2

Swift などのプログラムコードを書いていく場所を「エディタ」と呼びます。エディタに行番号があるとエディタのTab や Indentを本書と同じ設定にしておくと、学習が進めやすいです。

日目

エディタの Tab（タブ）や Indent（インデント）の設定

探しやすく、とても便利です。

Lesson2［Text Editing］の設定で、❶［Text Editing］を選択します。
［Text

❶
●

Editing］では、プログラムを書いてい❷●くためのエディタの設定が行えます。
❷［Editing］をクリックします。

❸●❸［Line numbers］（行番号）にチェッ❶［Indentation］をクリックします。
❷［Prefer indent using］は、インデン
トに使う文字を指定します。本書では「Spaces」を設定して、インデントに

❶
●

❷
●
❸
●
❹
●

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

は空白文字を使います。

クを入れます。この設定でエディタに❸［Tab width］は、「Tab」キ ー を1回

行番号が入り、コードが探しやすくな入力したときの文字数です。本書では、ります。

「2」spacesで2 文字を設定します。
❹［Indent width］は、 イン デ ント 階
層の文字数を指定します。本書では、「2」spacesを設定します。

［Text Editing］［- Indentation］［Text Editing］［- Editing］
1-3 ［Double Click Navigation］
で新しいタブを開くように設定

次のように、行頭に行番号が付加されます。

Xcode のデフォルト設定では、
［Navi
行番号なし

❶
●

gator］のファイルをダブルクリックする

行番号なし、行番号あり
行番号ありと新しいウィンドウが開いてしまいますが、慣れないうちには作業が混乱しやすいで❷●す。
ダブルクリックしたときに、新しいウィンドウを開くのではなく、新しいタブを開くように変更していきます。

［Navigation］❶［Navigation］を選択します。
❷［Double Click Navigation］で、「Uses Separate Tab」を選択します。

32

33

1

1

日
目

1- 4 ［Fonts ＆ Colors］の設定

エディタのカラーやフォントサイズを設定できます。好みの設定を選ぶことができます。

Lesson2

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

日目Lesson2
このレッスンで学ぶことできるようになること

画面に「Hello Swift!」と表示する簡単

Label パーツの 使い方、レイアウト方

なアプリを作っていきます。Xcode の法、シミュレータ、実際の iPhone（実基本操作、シミュレータなどの操作を機）にアプリを転送する実機転送も体験

体験して学んでいきます。

していきます。

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

1： 完成をイメージしよう「どのようなものを作るのか」を知っておくと、1つ1つの手順が理解しやすくなります。
アプリの完成イメージを確認してみましょう。
［Fonts＆Colors］

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

M e m oエディタはプログラムコードを書いていく場所になります。Swift の文法や重要な箇所をハイライトしてくれます。

1フレーズを表示するシンプルなアプリを作りながら、アプリ開発に必要な機能を体験していきま
しょう。

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

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

Fonts

﹇
＆

Colors﹈

完成イメージ

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

34

35

2-2

2： Labelを配置して、AutoLayout を使ってみよう

ここでは、AutoLayout（オートレイアウト）という機能を使って設定していきます。AutoLayout
は条件を設定していくことで、画面やパーツのレイアウトを整えていきます。この条件のことを「制約」

Labelを配置

2-1

1

AutoLayout（オートレイアウト）
を使う（Constrain）と呼びます。
のちほど、「1日目 Lesson3-3 各パーツの表示位置、幅や高さを設定しよう」（P.69）で詳しい解説を日目Lesson2

行いますので、まずは、Xcodeに触れていきましょう。

❶
●

❹
●
❺
●

❷
●

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

❻
●

❸
● Document Outlineを開く

❶
●

❼
●
❾
●

❸
●
❸
●

❶
●

❽
●
Label の検索と配置

まずは、最初に［Storyboard］へ Labelを配置して、Xcodeでの操作を体験してみましょう。

❹●［Project navigator］からファイルの一覧を表示します。

❶❷●❷ ［Main.storyboard］を選択します。
［Document Outline］ボタンをクリックすることで、Document Outline エリアが開閉します。

❸

今回は、Document Outline を開きます。

AutoLayoutで横幅の指定❹［View Controller Scene］の▼マークをクリックします。
❺❻［View］をクリックして選択します。
❼

Label の横幅を設定していきます。

［View Controller］の▼マークをクリックします。
［Object library］を選択すると、パーツの一覧が表示されます。

パーツは「UI パーツ」と呼ばれ、テキストや画像、ラベルなどの画面構成部品のことを示します。
詳しくは、「1日目 Lesson3-2 アプリに必要なパーツの配置と設定をしてみよう」（P.57）で学習します。
❽検索窓に「label」と入力します。パーツは沢山ありますので、検索窓を使って探すと便利です。
❾検索されたLabelをStoryboard の中央にドラッグ＆ドロップします。縦と横に青い線が現れたら、中❶［Document Outline］から、先ほど配置したLabelを選択します。もしくは、Label パーツを直接選択します。どちらの方法でも大丈夫です。
❷［Pin］をクリックします。

❸［Width］（横幅）にチェックを入れて、「200」と入力します。
❹［Add 1 Constraint］をクリックして、Label の横幅に関する制約を追加します。

央に位置しているということがわかります。

36

37

1
日
目

ます。ここでは、「0」と入力します。

❷●❹［Add 2 Constraints］をクリックして、制約を反映します。
先ほどは、［Add 1 Constraint］と表示されていましたが、今回は［Add 2 Constraints］と表示され、数字が変わっています。
［Add 2 Constraints］は、「2 つの制約を追加する」という意味です。
❶ Labelを囲む線が、赤色からオレンジ2❷●色に変わりました。これは警告を示し

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

ていて、AutoLayout で設定した制約と、実際のパーツの大きさや配置が一致していないことを知らせてくれています。

❶●❷［View Controller Scene］の横の❶●Lessonをクリックします。
AutoLayoutでの警告

AutoLayoutで中央配置［Misplaced Views］の一覧で、Labelに警告が表示されています。

❶ Labelを選択すると、赤い線で囲われていることが確認できます。

この状態を解消するために、❷［View Controller Scene］の横にも赤いマークが表示されています。

をクリックします。

これは、パーツに充分な AutoLayout の設定ができていないことを表しています。
この状態を解消するために、縦と横の配置を設定して、Labelが中央に配置されるように設定していきます。
❶ Labelを選択します。
❷

警告マークを選択［Align］を選択します。

❸［Horizontally in Container］と［Ver❶●❶［Update frames］を選択します。そtically in Container］にチェックをつの下にある文言「Set the frame in the

けます。
［Horizontally in Container］は、 画面中央から水平方向の距離を入力します。
「0」であれば、左右の中央に配置されます。ここでは、「0」と入力します。
［Vertically in Container］には、画面中央から垂直方向の距離を入力します。
「0」であれば、上下の中央に配置され

38

❶
●

canvas to match the constraints.」の意味は、「画面の表示を設定した制約に合わせます」という意味です。

❸●❷［Fix Misplacement］（誤った配置を❷●修正）をクリックして、位置のずれを❹●解消します。

❷●［Update frames］で位置のずれを解消

Label が中央に配置されるよう設定

39

❶「No Auto Layout Issues」が表示されて、レイアウトに関する問題は解消
されたことが確認できます。
❷［Structure］の左横にある矢印

1
日
目❶画面の表示を大きくしたいので、［Document Outline］ボタンをクリッ❷●クしてDocument Outline を閉じます。

を❷［Main.storyboard］を選 択してくだ❶●

クリックして、［Document Outline］に戻ります。

Lesson

❷
●

2

さい。

❸
●

❸ Label でAutoLayout の 設 定 と 差 異や数値が、消えていることを確認します。また、Label の横幅と高さが変レイアウトに関する問題は解消❶●化していることも確認します。これで、［Document Outline］を閉じる

Label が正しく配置されました。
2-3

Label の文字を中央に配置

Label が画面の中央に配置されたので、Labelに表示する文字も中央揃えに設定していきます。

［Main.storyboard］を選 択している
状態で、❶

❶
●

［Assistant editor］をクリックすると画面が分割され、エディタが❶ Labelを選択した状態で、❷●［Attributes Inspector］をクリッ

❷

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

Document Outline
を閉じるがあることを意味するオレンジ色の線

表示されます。

クします。
❸［Alignment］で中央揃えを選択する

この 状 態 で、［Main.storyboard］にと、Label の文字が、中央配置になり配置されたパーツとプログラムのコード

❸
●

ます。
M e m oXcode は変更内容を自動的に保存します。ファイルの保存を気にせず、操作を進めてください。

❶●

を関連付けます。
関連付けの詳しい説明は「1日目 Lesson3 じゃんけんアプリを作ろう」（P.53）

エディタ

エディタの表示で行いますので、ここでは簡単に体験し文字の中央配置てみましょう。
❶ Labelを選択した状態で、❷「control」キーを押しながら、エディ

3： プログラムを書いてみよう
3-1

Labelとプログラムの関連付け

Xcodeでは、配置したLabelにプログラムを関連付けする作業を行います。

40

タの最後の「}」（波括弧）上にドラッ
グ＆ドロップします。

❶
●

❷
●

Label からエディタへドラッグ＆ドロップ

41

ダイアログが表示されます。Labelと

1日目

4： シミュレータを起動してみよう

プログラムをどのような名前で関連付けするのかを設定します。

Xcodeには「シミュレータ」というツールがあります。

❶
●
❷
●

❶［Connection］の「Outlet」を選択しデバイスが手元になくてもシミュレータで確認できるので大変便利です。

❸
●

ます。

Lessonシミュレータを使うと、Xcode からiPhone や iPad の画面が起動して、動作確認が行えます。実際の
実際にシミュレータで「Hello Swift!」の表示を確認しながら、シミュレータの起動方法と操作方法を❷［Name］には、「outputLabel」と設学習していきましょう。

定します。
❸［Connect］をクリックします。

関連付けの設定

4 -1

デバイスの選択と種類

Xcode の 左 上 に［Active scheme］❶「@IBOutlet weak var outputLabel:（アクティブ スキーム）があります。ここUILabel!」というコードが追加されてでは、シミュレータで起動できるiOSデいます。これが、Labelとの関連付け

バイスを指定できます。クリックすると、を示すプログラムコードになります。

❷●❷黒い丸が、Labelと関連付けがされているというマークになります。
3-2

2Active scheme

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

選択できるデバイス（機種）が一覧表示

❶
●

されます。

@IBOutlet の追加

デバイスの選択

Label に文字をセット
いろいろとデバイスが選択できます
が、今回は「iPhone 6」を選択してみま
追加

す。お好きなデバイスを選択してみてくだ
さい。

Label へ文字を設定

本書では上の図のように、プログラムコードの追加を示していきます。コードを追加する場所がわかるように、追加する周辺の情報も掲載しています。
今回は、「override func viewDidLoad() {」から「}」の中に、「outputLabel.text = "Hello Swift!"」と入力してください。
はじめてのプログラムコードを書きました！
これは、Labelに「Hello Swift!」という文字を表示させるコードです。

「iPhone 6」を選択

Tips「override func viewDidLoad(){ ... }」の中に書いたコードは、アプリ起動時に1度だけ動きます。

42

43

1

4 -2 シミュレータの起動

M e m oXcode の左上に配置されているシミュレータを選択している状態で「command」キー と一緒に数字の「1」を押してみてください。

画面表示が、100% の拡大率に切り替わります。

［Run］をクリックします。

「1」が100%、「2」が 75%、「3」が 50%、「4」が 33%、「5」が 25%日目Lesson2

M e m o
シミュレータの起動には、時間がかかることがあります。アプリが起動すると自4 - 4 シミュレータの向き
（横画面、
縦画面）
を変える

動的にiPhone の画面が表示されますので、気長に待ちましょう。

シミュレータを選択している状態で［Hardware］ ［Rotate Left］ま た はM e m o
シミュレータはキーボードの「command」キーを押しながら「R」キーを押す［Run］をクリック［Rotate Right］を選択することで、縦画面・横画面の切り替えができます。

ことでも起動できます。操作が行える

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

M e m oキーの組み合わせを、「ショートカット
キー」といいます。

ショートカットは、「command 」キーと「矢印」キー
左回転は、「command 」キーと「←」キー
右回転は、「commandキー

シミュレータが起動されます。
「Hello Swift!」と表示されていれば、」キーと「→」

シミュレータの向き

はじめてのアプリ開発は成功です！
M e m o4 -5 シミュレータの終了方法

今回のように、アプリの開発は Xcode
で画面を作り、プログラムを書いて、シミュレータで動作確認を行なう、という手順を繰り返していきます。

［Stop］ボタンをクリックして、シミュレータを停止します。
M e m o
シミュレータ起動

4 -3 シミュレータの表示サイズの拡大縮小

シミュレータを終了するためのショート
カットは、「command 」キー＋「Q」
キーです。

シミュレータの表示サイズを変更できます。

［Stop］ボタンをクリック

シミュレータのデバイスを前面に起動した状態で、［Window］ ［Scale］［75%］とすると、75%に縮小されて表示されます。

44

表示サイズの指定

45

1
日
目

環境設定の画面が表示されますので、

5： 実機転送を行い、iPhoneで確認してみよう［Accounts］タブを選択します。

制作途中のアプリならシミュレータで確認することは十分可能です。ですが、実機で確認することでより完成度の高いアプリになります。
実機であれば、実際の指での感触や滑らかさ、アプリの動くスピードなども確認することができます。

2［Accounts］がApple IDを 管 理 し て
い るタ ブ で す。 最 初 で す の で、「No

とくにカメラの撮影は実機で実施したいところです。
iPhoneにアプリを転送して確認する方法を学んでいきましょう。
5-1

LessonM e m oAccounts」と表示されています。
T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

MacとiPhone を接続します

実 機（iPhone 本 体 ）にア プリを転 送 するには、MacとiPhone をLightning ケーブルで接続する必要があります。実［Accounts］タブ

機転送を行うときの Lightning ケーブルは正規品が望ましいです。

Apple ID でログインします。

Lightning ケーブル（正規品）は、Apple のサイト（http://
www.apple.com/jp/）から購入できます。

❶「+」（プラス）マークをクリックします。
MacとiPhone

5-2❷［Add Apple ID］を選択します。

Apple ID を Xcode に登録

Xcodeに登録しているApple IDとiPhoneで設定されているApple ID が同じであれば、アプリを転❶●送することができます。
Xcodeに Apple ID を登録していきます。

❷●

メニューから［Xcode］ ［Preferen

Add Apple IDを選択

ces...］を選択します。
❶［Apple ID］（メールアドレス）を入力
M e m oします。

［Preferences］は、Xcode の環境設定が行える画面です。重要ですので、以降のレッスンで詳しく説明します。

❷［Password］を入力します。
❸［Sign In］をクリックします。
［Preferences...］を選択

❶
●

❷
●
❸
●

M e m oApple ID のサインインにはネット環境が必要です。インターネットに接続されているか確認してください。

Apple ID の入力

46

47

Apple ID のログイン が 完 了すると、

1
日
目［Team］を選択すると、エラーが解消されます。

Xcodeに登録されます。
あとで Team Name を選択するので、Lesson

登録名を覚えておいてください。

2

M e m o左 上 の 赤 い ボタン を クリックして［Team］を適正に選択しても、［Status］に「Failed to create provisioning pro［Preferences］の画面を閉じます。

file.」とエラーが 表 示される場 合 は、［Bundle Identifier］の設定に問題があ
覚える

ります。
この場合は、次のWeb ページを参考にしてください。
本書サポートサイト：シミュレータ
https://swiftbg.github.io/swiftbook/

Team Name

5-3❶

simulator

Team（チーム）を設定します［Project Navigator］を選択して、❷「MyFirst」を選択します。

5- 4

❶
●

iPhone を Xcode から起動します

iPhone をMacに接続した状態で、デ❷●バイスを選択します。枠の中をクリック❸エラーが発生していのが確認できます。

します。

エラーの内容は、［Team］（ チーム）

デバイスの選択を設定することで解消ができます。
［Device］の 欄に、 先ほど 接 続したシミュレータの起動時には問題あり❹ませんが、実 機 転 送を行う場 合には、iPhone が表示されているので、クリック
して選択します。

［Team］が設定されていないとエラーとなり、転送できません。

［Team］の設定

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

❸
●
プロジェクトのエラー確認❹［Team］を確認するとなにも選択され実機の選択ていないことを意味する「None」が選択されています。
こちらを設定する必要があるので、リストボックスをクリックします。

マークをクリックすると、実機転送が行われます。

先ほど登録したアカウントが表示されているので、選択してください。

実機転送Apple ID 選択画面

48

49

1
日
目

iPhoneにアプリが転送されると、アプリが起動され、「Hello Swift!」と表示されます。

Lesson2❷●
M e m o
実機転送に慣れないときは、Xcode に● Apple ID をタップする❶

いろいろなメッセージが表示されると思います。その場合は、次のTipsを参考➡

➡

に解決してください。

❸
●

T ア
^ プ
j リ
_ 開
` 発
の の
使 環
い 境
方 を
を 整
学 え
ぼ て
う ︑

［プロファイルとデバイス管理］画面で、［デベロッパ APP］欄に表示されている、❶● Apple ID をタップします。
詳細画面が開きますので、❷●「"（Apple ID）" を信頼」をタップします。
信頼するかどうかを問われますので、❸●「信頼」をタップします。

アプリの完成イメージ

この操作で、iPhone 側で開発者（Apple ID）が信頼されました。
再度実機転送を行うと、アプリが転送されて実行されるようになります。
● Xcodeで「Unlock 〇〇〇 iPhone to Continue」と表示されたとき
iPhone がロックされていると転送できない
ため、メッセージが表示されます。

Tips

メッ セ ー ジ が 表 示 さ れ て い る 状 態 で実機転送時に Xcode にメッセージが表示された場合の対応について● Xcodeで「The run destination 〇〇〇 iPhone is not valid ...」が表示されたとき

iPhone のロック解除を行うとメッセージが消え、引き続きアプリの転送が行われます。

メッセージの本文に「〇〇〇 iPhone's iOS
X.X.X doesn't match ...」（X は数字）の記

シミュレータに関するトラブルやエラーは、まだ他にもあります。その他の情報に関しては、下記のページ載があるときは、Xcodeで生成されたアプにまとめています。

リの対応バージョンとiPhone の iOS バージ

本書のサンプルを実際に開発していくなかで、シミュレータに関する困ったことがあればこちらを参照してくョンが合っていません。iPhone の iOS バー

ださい。

ジョンを最新にしてから実機転送を行ってください。

本書サポートサイト：シミュレータ
https://swiftbg.github.io/swiftbook/simulator● Xcodeで「Could not launch 〇〇〇」と表示されたとき初回の実 機転送では、セキュリティのエ
ラーメッセージが表示されます。この場合、iPhone（実機）で「信頼」するための設定を行う必要があります。
iPhoneで［設 定］をタップして開き、［一般］→［プロファイルとデバイス管理］を開
きます。

50

51