＊iphoneアプリ開発に関する備忘録を兼ねたスライド ＊その１ Xcodeの導入から実際に作ってみてシュミレーターで動かしてみよう！ ＊本スライドの目的 「iphoneアプリって簡単に作れそうじゃん！」 という敷居の低さを感じてもらうこと。 ＊こんな人に… ・これからアプリを作ってみたい人 ・環境は整えたけど、どう扱うかわからない人 ・１から勉強し直したい人 などなど… ＊注意 ・Swiftにはほとんど触れていません。 開発環境 Xcode 7.3 Swift 2.2

1. iPhoneアプリ開発
その１：導入〜初アプリ

2. こんな人におすすめ…
これからiPhoneアプリを作ってみたい！
とりあえず環境作ったけど何すればわからない…
１からやり直したい…
などなど、初心者向けです。

3. 目次
1. イントロ
2. 開発環境
3. 開発の基本的なやり方
4. 実践
5. まとめ

4. 目次
1. イントロ
2. 開発環境
3. 開発の基本的なやり方
4. 実践
5. まとめ

5. 1. イントロ
今回は導入〜初アプリ編です。
→わかってるわ！！って所は読み飛ばしてください。
（ただし、意外なところに落とし穴はありますよ…）

6. 1. イントロ
この章はアプリを作ることに重きをおいています。
→ Swiftについてはほとんど書いていません。
→ コーディングもほとんどしません。

7. 目次
1. イントロ
2. 開発環境
3. 開発の基本的なやり方
4. 実践
5. まとめ

8. ２．開発環境
Mac（高い）
Xcode（無料！）
以上！！

9. ２．開発環境
Xcode → AppStoreでダウンロード
＊Xcode〇〇ではなく、Xcodeと書いてあるもの！！
←このアイコンです！
ダウンロードできたら…準備完了です！

10. 目次
1. イントロ
2. 開発環境
3. 開発の基本的なやり方
4. 実践
5. まとめ

11. ３．開発の基本
作り方は２通りあります
1. コーディング
2. Story Board + コーディング

12. ３．開発の基本
作り方は２通りあります
1. コーディング
2. Story Board + コーディング ←こっちで説明

13. ３．開発の基本
なんでStory Board + コーディング…？
1. レイアウトを確認しながら開発できる
2. アプリ全体の構成が見やすい
3. コーディング量が（比較的）少ない
など…

14. と言われても…わからないので

15. とりあえず、作ってみましょう！

16. 目次
1. イントロ
2. 開発環境
3. 開発の基本的なやり方
4. 実践
5. まとめ

17. ４．実践
こんなアプリを作ります
押すと…

18. ４．実践
1. 起動
用途は、上から順に
コードの試し書き
新しいアプリの作成
既存のファイルを開く
真ん中をよく使います

19. ４．実践
２．①をクリックして、新しいアプリを作ります

20. ４．実践
３．Single View Applicationを選択 → next
↑
ほとんどこれで作ります

21. ４．実践
上から順に
ファイル名
組織名
（個人なら作成者）
組織の名称
（個人なら適当で）
４．アプリの情報を入力します

22. ４．実践
下２つ
使用言語
（今回はSwift）
アプリを使う機器
４．アプリの情報を入力します
３つのチェックは
全部外す！！

23. ４．実践
５．ファイルの場所を決定 → Create

24. ４．実践
５．土台完成です！

25. ４．実践
アプリ作成
１．Main.storyboardをクリック

26. ４．実践
画面レイアウト
（UI）
UI
の
選択部分
の
設定
UI部品
一覧
ファイル
一覧

27. ４．実践
２．View Controllerをクリック

28. ４．実践
３．画面右に以下のようにあるので、チェックを外す

29. ４．実践
左上にあるのは機器のシュミレーター
４．作成する画面をシュミレーターの
大きさに合わせる
4.7inchがiPhone６の画面サイ
ズ
クリック

30. ４．実践
画面の大きさの設定完了！

31. ４．実践
５．Labelを探して、UI上までドラックして配置
ドラック

32. ４．実践
６．ラベルの位置・大きさ等の設定
クリック
位置
部品の大きさ
X:62
Y:309
Width:250
Height:50
に設定
クリック

33. ４．実践
７．ラベルに表示する文字の設定
クリック
上のように変更すると… 変わります

34. ４．実践
８．実行してみる
クリック
コードを書かずして
文字の配置と表示ができる！
シュミレーター

35. ４．実践
９．ボタンを配置する
ドラック

36. ４．実践
１０．ボタンの大きさと位置を設定

37. 最初の完成図の
レイアウトが完成しました！

38. あとは、ボタンによる
「動き」を書けば完成です！

39. ファイルの仕組み
その前に…
Main.storyboard swiftファイル
View
Controller
ViewController.swif
t
1つの画面に
1つのファイルが
対応

40. 画面に対応したファイルに
「動き」を書けば反映される！

41. ４．実践
右上
１１．対応したファイルの表示
クリック 表示

42. ４．実践
control押しながら
ドラック
１２．対応したファイルとラベルのひも付け

43. ４．実践
１２．対応したファイルとラベルのひも付け
1. 名前を入力
２．クリック

44. ４．実践
１２．対応したファイルとラベルとのひも付け
自動生成！！！！
ひも付け完了！！

45. ４．実践
１３．対応したファイルとボタンとのひも付け

46. ４．実践
１３．対応したファイルとボタンとのひも付け
1. 変更
２．Connect

47. ４．実践
ひも付け完了！！
１３．対応したファイルとボタンとのひも付け

48. ４．実践
１５．ボタンに「動き」を加える

49. ４．実践
１５．ボタンに「動き」を加える
（部品名）.text
指定した部品に
表示されたテキストを指します
文字は
””
で囲うと文字として
ファイルが認識してくれる
←書き加える

50. なんと！

51. 作業は以上です！

52. 動かしましょう！

53. ４．実践
１６．実行してみる
クリック
押すと…

54. 完成です！

55. お疲れ様でした！

56. ５．まとめ
レイアウト→Story Board
動き→Swiftファイル
アプリの土台完成までは共通だから大事！
アプリを作ることでSwiftを勉強していきましょう

57. ありがとうございました！