モカ様勉強会のSwift入門用スライドです。 初心者向けにXcodeを使った簡単なアプリの作成手順を紹介します。

1. 2018/01/26
S w i f t で 作 る i P h o n e ア プ リ 開 発 入 門 講 演 者 ： お ふ じ 1

2. 自己紹介
名前：おふじ
Twitter：@a_ofuji
有限会社CreatorsPrime 代表
エンジニア
好きなプログラミング言語&環境
Swift /Objective-C /Java/PHP /Javascript
HTML5 /CSS3 /Cocos2d-x(JS)
ゲーム開発が趣味です。
ヘンテコなブタくんの絵も描きます。
仕事ではスマホアプリの開発を行っています。
2

3. Swiftの紹介と特徴
Appleが生み出したプログラミング言語で、
iPhoneやｉＰａｄアプリの開発の現場で使用されています。
✧おすすめなポイント
・ 比較的新しい言語。
・ iPhoneアプリ開発の需要があり案件数、単価も安定している。
・ スクリプト言語に近いので書きやすい。
・ iOSアプリに特化している。
・ コード補完が便利。
✧注意点
バージョンに注意（バージョン２＞３の際に大きな変更有）
3.0以降の情報を見るようにしましょう
（現在最新バージョンは４）
3

4. ① Mac
（macbook/mac mini/mac book
Air）
② Xcode
（Apple公式アプリ開発ツール）
③ iOS端末
18/01/26
S w i f t で 作 る i P h o n e ア プ リ 開 発 入 門 講 演 者 ： お ふ じ 4

5. 必要なものは３つだけ！
① Mac
（macbook/mac mini/mac book Air）
② Xcode （Apple公式アプリ開発ツール）
MacAppStoreから無料ダウンロード可能
③ iOS端末 （なくてもOK）
Xcode にシュミレーターが付いています。
Mac の画面内でアプリの動きを確認できます。
Xcode
5

6. 6
サンプルプロジェクトの概要
テーマ： おみくじアプリ
挙 動： ボタンを押すと、ランダムでメッセージと画像が表示される。

7. Xcode起動-1
① アプリのテンプレートを選択 ＞新規Project >Single View app
7

8. Xcode起動-2
② アプリ名称などの情報を入力する。
8

9. Xcodeの画面の見方
9
ファイル一覧
メイン エディット画面
デバッグ情報表示エリア

10. アプリの画面を作ろう
インターフェースビルダーで画面を作成
・ Xcodeに標準搭載されている画面エディット機能を使用します。
・ デフォルトのテンプレート（Main.storybord）を編集して行きます。
10
ファイルを選択
すると画面の
エディタが
起動する。

11. おみくじのイラストやボタンを画面に並べる
UIパーツを配置する。
・イラスト：画像を読み込ませる。
・ボタン：プログラムで角丸のボタンを描画させる。
└ ボタンに表示させたいテキストを入力します。
11
ここにUIパーツの
部品があるので
画面にドラッグで
配置。

12. 画像の配置と設定方法
画像アセットの設定（アプリ内に画像を組み込む）
・ Assets.xcassetsを選択して+で新規作成し名前をつけます。
・ その画像セットの枠に画像をドロップします。
12
＋ボタンでNew Image Set
を
選択して新規作成する。
名前は好きにつけてOK
（半角英数字）
画像の枠ができるので好き
な画像をドラックして設定
１ｘ、２ｘ、３ｘは画像の大きさ
２ｘのサイズが必須。

13. 画像を画面中央に配置する
オートレイアウトの仕組み
・制約を設定して画面のレイアウトを行います。
・基本的には、一つの要素に対して、４つの制約を設定します。
・おみくじの結果画像をアプリに組み込む
13
パーツの四隅や幅、
高さなどを設定して
位置を決める。
シンプルな構成にす
るのがポイント。

14. 「おみくじを引く」ボタンと処理とを関連づける①
ソースコードとの関連付け
・ ボタンや画像をSwiftのプログラムと繋げます。
・ 繋がったものはSwiftのソース内から操作可能になります。
14
UIパーツを選んだら
Controlキーを押し
ながらソースコード
へドラッグする。

15. 「おみくじを引く」ボタンと処理とを関連づける②
ソースコードとの関連付け
・ 画像やテキスト等内容を操作するものはOutlet。
・ ボタンを押した時の動作を定義する場合はAction。
15
ボタンを押した時の
動作はAction、画
像やテキストの操
作はOutletを選ん
で
名前をつける

16. 「おみくじを引く」ボタンの処理を書く
ソースコードの編集
・ ボタンが押された時の処理（内容）を記述します。
内容： ボタンを押されたら画像とテキストを更新する。
16
Actionで関連
付けたボタンに
ボタンが押された時
の処理を記述します。
関連付けした
ラベルの
テキストを更新

17. アプリを起動する
17
再生
ボタ
ン
print文の結果が表示＞
一通り作ったら再生ボタンで
アプリを実行します。
実行中はswiftでprintした結果
が下のデバッグエリアに
表示されます。
アプリ名の横から
シュミレータの機種
を選択します。
実機を繋いでいる
場合は端末名が
選択できます。

18. アプリの完成！！
お み く じ の ア プ リ が で き ま し た 。
改 造 し て 自 分 の ア プ リ に し て み ま し ょ う ！
18
2018/01/26
S w i f t で 作 る i P h o n e ア プ リ 開 発 入 門 講 演 者 ： お ふ じ

19. サンプルをベースに改造してみましょう
どんなアプリを作ろうかな？
《 アイディア参考例 》
＊占いアプリ
└ 占いをテーマにした内容に、テキストと画像を切り替える。
＞システムのソースをイジれなくても、大丈夫。
＞シンプルなオリジナルアプリの完成です＾＾
＊キャラクターがリアクションするアプリ
└ テキスト：セリフ調の文言を設定する。
└ 画像：キャラクターイラスト（リアクション前／リアクション後）を用意。
＞セリフによって表情を切り替える仕様を想定。
＞すこし毛色の違うアプリにも出来ちゃいます。
19

20. サンプルをベースに改造してみましょう
アプリストアで検索してみましょう
興味のあるジャンルのアプリをアプリストアで検索してみてください。
個人制作のアプリなどもたくさんあります。
ダウンロードして動作を見たり、
改善案を考えて 作りたいアプリを思い描くのは楽しいですよ。
20

21. アプリを作ったら？
実際に使って、より使いやすい点、理想のカタチを見つけましょう。
・個人で楽しむ。（家族や友人に使ってもらう）
・仕事に繋げる（作ったアプリを公開して、お仕事につなげる等）
・アプリストアで配信する。（Appleのディベロッパー登録（有料）が必要です）
もちろん、この勉強会で見せて頂くのも大歓迎です。
アプリ開発にすこしでも興味を持って頂けたら嬉しいです。
本日は、ありがとうございました。
21

22. 参考サイトや書籍のご紹介
作って学ぶ iPhoneアプリの教科書
【Swift4&Xcode 9対応】
本を購入する際の注意するポイント
・Swift3以降のバージョン対応のものを選びましょう。
・入門書でもSwift4対応版が出ています。
Swiftプログラミング参考サイト
逆引きSwift
http://docs.fabo.io/swift/
22

23. ・プロジェクト一式
http://moe.vc/swift/kantanApp.zip
・開発ブログ
http://cocosbuilder.biz/
・Twitter
@a_ofuji
感想／依頼／質問など、
ご意見をお聞かせ頂けると嬉しいです。
ではでは、ありがとうございました！
おふじ
23