2015年10月29日に横浜さくらWORKS<関内>で開催されたアプクリiPhoneアプリ開発Swift講座無料セミナーで使用した資料です。画面をタップすると雨が降り、木が成長するという簡単なアプリGrowingTreeの作成を行いました。また本アプリに使用した素材、完成版プロジェクトソースはアプクリWebサイト( http://appcre.net )で配布しています。

1. iPhoneアプリ開発Swift講座
無料体験セミナー
1
2015年10月29日
合同会社オン・ザ・ハンモック 桑村治良

2. 自己紹介 桑村 治良 (くわむらはるよし)
音楽雑誌の編集者からアプリエンジニアに転身したクリエイター。神奈川県三
浦市に在住し、地域に根ざしながらアプリも多数リリースしている。主宰する
アプリレーベルonTheHammockでは、街ナビアプリ『FM ヨコハマ藤田-穂積の
ズッシリスカ 横須賀 / 逗子案内』、三浦半島の野菜直売所紹介アプリ『三浦の
おやさい』などをリリース。

3. 書籍『世界一受けたいiPhoneアプリ開発の授業［iOS 8 & Xcode 6 & Swift対応］』
・プログラミング経験のない方を対象にした
学習書
・アプリ開発ツールXcodeの使い方と開発言
語Swiftの基礎を学びながら実践的なアプ
リ開発を紹介する内容
・各著者がアプリ開発スクールで講師をして
おり、何度も講座をやってきたなかで得た
経験やノウハウを本書に詰め込みました。
・最新プログラミング言語Swiftに対応してい
ます。

4. iOSアプリを開発するためのプログラミング言語
・これまでiOSアプリ/Macアプリを開発に使用されてきたプログラミング言
語Objective-Cは1983年に開発された言語。
・Objective-Cは言語として古く、少々扱いにくかった。
・Swiftは昨年発表された最も新しいプログラミング言語の1つ
・Swiftはプログラム言語ランキングで急上昇。開発者コミュニティーのStack
Overflowの「Developer Survey」で、最も愛される開発言語の座を獲得した。

5. プログラミング言語「Swi*」の特徴
AppleはSwiftの発表に際して「モダン、安全、高速、インタラクティブ」を
大きな特徴として挙げた。
特徴
・モダン：比較的新しいプログラミング言語の仕様を参考にして開発された。
JavaScriptやRubyなどを学習した人には使いやすい。
・安全：プログラムの記述ミスによって生まれるバグが起こりにくい文法に
なっている。アプリを起動してクラッシュするリスクなが少ない。
・高速：これまでiPhoneアプリ開発に用いられてきたプログラミング言語
Objective-Cよりも高速になり、リアルタイムで記述したコードの処理結果を
確認できる。
・インタラクティブ：これまでプログラムで記述した結果は実機で確認した
り、シミュレータを起動しなくてはいけなかったが、アプリ開発ツール
XcodeのPlaygroundという機能を使えば、リアルタイムで処理結果を確認す
ることができる。

6. アプリ開発の流れ
iOSのアプリ開発は基本的に下記の流れで開発していきます。
1.Xcodeプロジェクト作成
2.アプリ基本設定（アプリアイコン、画面の傾き、アイコンラベル）
3.画面デザイン
4.プログラミング
5.シュミレーターで動作確認
6.実機で動作確認（※ iOS Developer Programへの加入が必要 有料）
7.アプリ申請
8.リリース

7. Xcodeを起動
ドックからXcodeを起動してください。

8. プロジェクトを作成
「Create
a
new
Xcode
project」を選択してください。

9. テンプレートを選択
「Single
View
Apprica<on」を選択し「Next」ボタンをクリックしてください。

10. 設定
次の画面で下記のとおりに入力して「Next」ボタンをクリックしてください。
入力項目
入力内容
Product Name GrowingTree
Oranization Name アカウント名(任意)
Oranization Identifier com.swifttest(任意)
Language Swift
Device iPhone
Use Core Data チェックしない

11. プロジェクトの保存
次の画面でプロジェクトを保存する場所を指定します。「書類」フォルダを選んで
「Create」ボタンをクリックしてください。

12. Xcodeの画面構成

13. 作成するアプリ GrowingTree
画面をタップすると木が成長していくアプリ
下記より「GrowingTreeプロジェクトファイル」を
ダウンロードできます。
http://appcre.net/freeschool

14. 素材のダウンロード
http://appcre.net/freeschool から素材をダウンロードしてください。

15. ダウンロードした素材をXcodeに取り込む
1.ダウンロードした素材をナビゲータエリアにドラッグ&ドロップします。
2.オプション画面が表示されるのでDestinetionの「Copy Items if needed」に
チェックします。
3.Added foldersは「Create groups」を選択します。

16. アプリ画面のデザインのための準備
1.Main.storyboardを選択します。
2.インスペクタペインのAttributesインスペクタでサイズを4.7インチ(iPhone6)
に設定します。

17. 画像を設定
1.ライブラリペインのMediaライブラリから「step1.png」を画面の下に貼り
付けます。

18. 画像のオートレイアウトを設定
1.オートレイアウトと
いう機能を使って画
像の位置を下に固定
します。
2.画像のModeを
「Scale To Fill」とい
う設定します。

19. ラベルを設定
1.ライブラリペインのObjectライブラリから「label」を画面の上に貼り付け
ます。
2.ラベルの文字を「タッチしてください」と修正します。

20. 文字の入ってないラベルを設定
1.先ほど配置したラベルの下に、もう一つラベルを配置します。
2.ラベルの文字を「0」と修正します。

21. プログラミングのための準備1
1.画面右上のAssistant Editorをクリックして、右側にViewController.swiftを表
示します。
2.「0」と入力したラベルの上で[control]キーを押しながら
ViewController.swift上にドラッグ&ドロップします。
3.Connectionが表示されるのでNameを「countLabel」と入力して
「Connect」をクリックします。

22. プログラミングのための準備2
1.下に配置した地面の画像の上で[control]キーを押しながら、
ViewController.swift上にドラッグ&ドロップします。
3.Connectionが表示されるのでNameを「tree」と入力して「Connect」をク
リックします。

23. 雨の画像を配置
1. ライブラリペインのMediaライブラリから「rain.png」を画面の下に貼り
付けます。
2. インスペクタペインのAttributeペインのDrawingの「Hidden」にチェック
を入れます(これで配置したrain.pngが隠れます)。
3. シミュレータを起動して確認しましょう。

24. プログラミングのための準備3
1.画面右上のAssistantEditorをクリックして、右側にViewController.swiftを表
示します。
2.rain.pngの上で[control]キーを押しながらViewController.swift上にドラッグ
&ドロップします。
3.Connectionが表示されるのでNameを「rain」と入力して「Connect」をク
リックします。

25. プログラミングで操作する変数
ViewController.swiftを表示させるとStoryboardから生成した変数が3つ記述さ
れています。この3つをプログラミングで操作します。

26. プログラミング 画面にタッチして画像を表示
1.ViewController.swiftに画面のタッチを検出するプログラミングを記述します。
2.touchesBeganメソッドを入力補完を用いて記述してください。
touchesBeganと入力すれば自動的に記述したいコードが表示されます。
3.codeとある部分に「rain.hidden = false」とコードを記述します。これは
「雨の画像のhidden(隠す)設定をしない」という意味のコードです。
4.シミュレータを起動して画面にタッチすると雨の画像が表示されます。

27. プログラミング タッチを離すと画像を隠す
1. タッチを離すと実行するメソッドを記述します。
2.touchesEndedメソッドを入力補完を用いて記述してください。touchEnded
と入力すれば自動的に記述したいコードが表示されます。
3.codeとある部分に「rain.hidden = true」とコードを記述します。これは「雨
の画像のhidden(隠す)設定を行う」という意味のコードです。
4.シミュレータを起動して画面にタッチを離すと雨の画像が消えます。

28. プログラミング タッチした数をカウントする
1. 変数「touchCount」を宣言します。初期値に0を入力します。
2.touchesBeganメソッドに画面がタッチされるごとにtouchCountの数を1つ
づつ足されるコードを記述します。
3.ラベルを管理するcountLabelにtouchCountの値を表示させます。
countLabel.text = (touchCount) と入力してください。
※バックスラッシュは[option]+¥で入力

29. プログラミング 10回雨を降らせたら木を成長させる
1. 変数「touchCount」が10になったら、木の画像を差し替えます。
touchBeganメソッドのなかにある条件の時に実行するif文を用いてコードを
記述します。
if touchCount == 10 {
}
と記述してください。これは「もしtouchCount変数の値が10と等しい場
合」という意味です。
2.If文の{ }内にtree.image = UIImage(named: step2 )と記述してください。
これはtree変数の画像を「step2.png」画像に変更するという意味です。

30. プログラミング 雨の量ごとに木を成長させる
1. さきほどのif文を使って雨の量ごとに木を成長させましょう。
2. 70回タップしたら画像を「step1.png」に戻しましょう。そして
touchCountの値は0にします。

31. さらにアプリをグレードアップさせるためには…
1. 画面をタップする時に音が鳴る方がいい！
2. 木が成長したときにメッセージが表示されるといい！
3. 木が成長したときに特別な音が鳴るといい！
4. 木が成長したときにアニメーションがあるとリッチ！

32. 11/19から始まるアプクリiPhoneアプリ開発Swi*講座で
もっと面白いアプリを作ることができます！
お申し込みはアプリクエイターズラボ「アプクリ」サイトから。
http://appcre.ne
講座は全 10 回 (1コマ 2.5時間)。
前半ではSwiftの基礎や、アプリ開発
ツールXcodeを使った初級 中級レ
ベルのアプリ開発を学びます。
講座の後半では、受講者がそれぞれ
iPhoneアプリの企画を考え、その企
画を元にしたオリジナルアプリの開
発を行います。
講座は前半のみの受講も可能。受講
料は全講座75,600(税込)、前半5回の
基礎講座のみの受講は54,000円(税
込)となります。

33. 本日、受講を申し込まれた方は
書籍『世界一受けたいiPhoneアプリ開発の授業［iOS
8
&
Xcode
6
&
Swi*対応］』をプレゼントします！
また受講者の方は本書を2500円+税で購入できます。