Swiftアプリ制作入門 かんたんシューティングゲーム
•
3 recomendaciones•6,548 vistas
エンジニアインターン 就活イベント 「Swiftアプリ制作」用スライドです。
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Swiftアプリ制作入門 かんたんシューティングゲーム
Similar a Swiftアプリ制作入門 かんたんシューティングゲーム (20)
Más de 聡 中川
Más de 聡 中川 (16)
Swiftアプリ制作入門 かんたんシューティングゲーム
- 3. 前提 • 他言語でのプログラミング経験がある • Xcode 6.3以降がインストールされた Macintoshを持っている • メモリは4GB以上
- 4. スケジュール 1. Swift言語概要 2. Xcode基礎 3. Swift基礎 4. UIKit基礎 5. シューティングゲームアプリ作成
- 5. 1. Swift言語概要 • Apple社が開発、2014年6月発表 • OS X、iOSアプリ開発用言語 • Objective-C言語からの移行に配慮 • 他言語の長所を吸収、基本的に関数型 • 言語仕様がまだ流動的 （なぜSwift言語が誕生したのか？）
- 6. iOSのバージョン • Swift言語はiOS7（& OS X 10.9）以降に対応 • 今回はiOS8以降のみを対象 ‣ iOS8動作機種 • iPhone4S以降 • iPad 2以降、iPad mini全て • iPod Touch 第５世代以降
- 8. 2. Xcode基礎 • Apple社純正統合開発環境 • バージョンは最新（6.4）にしておく （20150711現在） • Swift言語の基礎を学ぶ時は「Playground」で • iOSアプリ構築時は「Project」で • 画面構成を覚える
- 9. Playground画面 • 「File」→「New」→「Playground」 • エディタエリア（初期画面） • Assistant Editor画面を表示 「View」→「Assistant Editor」→ 「Show Assistant Editor」 • ソースコード入力で自動実行
- 10. Playground画面
- 11. Project画面 • 「File」→「New」→「Project」 • 通常のiOSアプリは 「Single View Application」で • 大きく分けて３つのエリア ✦ Navigators Area ✦ Debug Area ✦ Utilities Area
- 13. Storyboard • エディタエリアの初期状態を確認 • Document Outlineを表示 View Controllerがひとつ その上にViewがひとつ
- 14. Object library • UIパーツを確認 • ドラッグでView上に配置 Label Button View Controller
- 15. セグエで連結 • Buttonから次のView Controllerへ Control + ドラッグ • セグエの種類は「Show」 • 最初のView ControllerにNavigation ControllerをEmbed In • もう一度Document Outlineを確認
- 16. Navigation Controller • View Controllerの遷移を記録して管理 • 画面上部のNavigation Barに戻るボタンを 自動生成 • Embed InしたView Controllerから記録開始
- 17. Attributes inspector • Viewの属性を変えてみる • Labelのテキストを変えてみる • Buttonの種類を変えてみる • Segueの種類を変えてみる
- 18. ビルド、実行 • ここで実行してみる（iOSシミュレータの起動） • ハードウェアを選択 • 画面の向きを変えてみる
- 19. 3. Swift基礎 a. 変数と定数、型 b. 式、演算 c. 構文 d. 関数 e. クラス f. オプショナル型 g. その他の型
- 20. a. 変数と定数、型 • 変数と定数は値の入れもの • 変数は値の変更あり、定数は値固定 • 可能であればなるべく定数で宣言 • 宣言時、型は省略可能（型推論が可能な場合）
- 21. a. 変数と定数、型 • 代表的な型 ✦ Int（整数） ✦ Double、Float（実数） ✦ Bool（真偽） ✦ String（文字列）
- 22. 変数、定数の宣言
- 23. b. 式、演算 • 式と演算は他の言語とほぼ同じ ✦ 各種演算子（代入、算術、比較、論理…） ✦ 演算順序 ✦ 実例で習得
- 24. c. 構文 • if文 ✦ 条件式の書き方に注意 • for文 • while文 • Switch文
- 25. if文、for文
- 26. switch文
- 27. 列挙型とswitch文
- 28. d. 関数 • 数学の関数との違い • 引数と戻り値 • 引数がない場合、１つある場合、 ２つ以上ある場合 • 戻り値がない場合、ある場合 • 関数の型
- 29. 関数の書き方 (1) func 関数名{} (2) func 関数名(引数リスト){} (3) func 関数名(引数リスト) -> 戻り値の型 {} (4) func 関数名(引数リスト) -> 戻り値の型 { 処理（戻り値を求めるなど） }
- 30. 関数の書き方 • 引数リストの指定 ✦ 引数がない場合 () ✦ 引数が１個の場合 (引数名: 型名) ✦ 引数が２個以上の場合 (引数名1: 型名, 引数名2: 型名・・・)
- 31. 関数の書き方
- 32. 関数の書き方 • 関数の実行（呼び出し） ✦ 関数名(引数名: 値・・・)
- 33. e. クラス • クラスは変数と関数からなる設計図 • クラスでの変数はプロパティ、関数はメソッド • 設計図をもとに作られた実体がインスタンス • Swiftではクラス（とクロージャ）のみ参照型 • 継承とイニシャライザ
- 34. クラスの書き方 (1) class クラス名{} (2) class クラス名: スーパークラス名{} (3) class クラス名: スーパークラス名{ プロパティ宣言 メソッド宣言 }
- 35. クラスの書き方
- 37. f. オプショナル型 • nilの存在（値が何も入っていない状態） （空白、""、0はnilではない） • nilにアクセスすると実行時エラー • nilをうまく使うプログラミングも可能 nilは必要
- 38. オプショナル型 • 変数宣言時に「?」をつけるとオプショナル型 （変数をラップ） • オプショナル型から変数の中身を取り出すとき は「!」（アンラップ） • nilの存在を気づかせてくれるのがオプショナル型
- 39. オプショナル型
- 41. g. その他の型 • Array（配列） • Dictionary（辞書、連想配列、ハッシュ） • Any、AnyObject（様々な型を含められる） • さまざまな数値型 • その他新たな型をどんどん作れる仕組みあり （クラス、構造体、列挙型、プトロコル・・・）
- 42. Array
- 43. Dictionary
- 46. 4. UIKit基礎 • UI（ユーザインターフェース）の役割 情報の伝達 ユーザの誘導 総合的なユーザ体験 • UIで迷ったらAppleのドキュメントに立ち返る 「iOSヒューマンインターフェースガイドライン」 https://developer.apple.com/jp/devcenter/ios/library/ documentation/userexperience/conceptual/mobilehig/ BasicsPart/BasicsPart.html#//apple_ref/doc/uid/ TP40006556-CH2-SW1
- 47. StoryboardでUI構築 • UI構築作業をStoryboardに任せる • もう一度Object libraryでUIパーツを確認 • もう一度Attributes inspectorの項目を確認
- 48. ViewControllerグループ • UIViewControllerクラス • UINavigationControllerクラス • UITableViewControllerクラス • その他
- 49. Viewグループ • UILabelクラス • UIViewクラス • UIImageViewクラス • UITextViewクラス • その他
- 50. Controlグループ • UIButtonクラス • UISegmentedControlクラス • UITextFieldクラス • その他
- 52. UIKit重点項目 • UIViewControllerクラス ライフサイクル Navigation Controllerによる管理 遷移してきた画面（ViewController）を配列で記憶 pushで追加、popで取り出し（戻る） • UITableViewControllerクラス 構成要素 代表的なメソッド セルの生成方法
- 55. UIKitをSwiftで利用 • フレームワークのインポート • クラスメソッドの利用 • クロージャの利用
- 56. フレームワークのインポート • Single View ApplicationではUIKitをインポート • さまざまなフレームワーク（Apple） https://developer.apple.com/jp/ documentation/iOSTechOverview.pdf
- 57. クラスメソッド • クラスメソッド・・・各インスタンスに共通の クラスそのものの性質に関する処理 • class func メソッド名 ・・・ • フレームワーク利用の際に呼び出すことが多い
- 59. クロージャの利用 • クロージャ・・・関数を変数として扱う時の 関数定義部分 • Appleのクロージャ定義 Apple Inc. The Swift Programming Language より抜粋
- 60. クロージャの利用
- 62. 5. アプリ作成 • 簡単なシューティングゲームアプリを作成 https://github.com/nakasen/Codeal-Seminar-Swift • 画面上をランダムに動くUFOをタッチする • 1秒ごとにUFOが画面内を移動 • UFOをタッチするとUFOが爆発 • 宇宙空間、UFO、UFO爆発の画像は用意済み • 爆発音も用意済み
- 63. アプリ作成手順1 • Single View Applicationで新規作成 • プロジェクトに画像とサウンドのファイルを追加 ✦ Project Navigatorでフォルダを右クリック ✦ Add Files to ∼ で画像フォルダ、サウンド フォルダを追加
- 64. アプリ作成手順2 • Storyboardで画面作成 ✦ ViewControllerのFile inspectorで Auto Layoutのチェックをはずし、iPhoneを選択する ✦ ViewControllerのAttributes inspectorで Simulated MetricsのSizeを iPhone 4.7-inchにする（iPhone6の画面サイズ） ✦ 画面全体にImageViewを配置 ✦ ImageViewのAttributes inspectorで imageを背景用宇宙空間画像に
- 65. アプリ作成手順2の図説
- 66. アプリ作成手順2の図説
- 67. アプリ作成手順3 ✦ 画面上部にButtonを配置 ✦ ButtonのAttributes inspector画面で TypeをCustomに ✦ 同じくTitleの文字列「Button」を消去 ✦ State Config「Default」時のImageを 通常時のUFO画像、「Highlighted」時の Imageをタッチした時のUFO爆発画像に
- 68. アプリ作成手順4 • Storyboardでソースコードとのひも付け ✦ Assistant EditorでButton画像に名前を設定 （UFOのIBOutlet名「target」） ✦ Assistant EditorでButtonにActionを設定 （UFOタッチ時のIBAction名「smash」）
- 69. アプリ作成手順4の図説
- 70. アプリ作成手順5 • ViewControllerクラスのプロパティを設定 （class ViewController行の直後に） • UFOを画面内で動かすために画面サイズを取得 （viewDidLoad()メソッドの中で）
- 73. アプリ作成手順8 • 爆発音のサウンドファイル名をプロパティ名と ひも付けする（viewDidLoad()メソッドの中で） • UFOをタッチした時に呼び出されるIBActionで 爆発音を再生する
- 74. アプリのカスタマイズ • 難易度を調整する ✦ 動きのスピード（タイマー呼び出しの調整） ✦ 動きの範囲（乱数発生の引数の調整） • スコアを表示（Labelを用いて） • ミスショットで減点（画面全体の透明ボタン）
- 75. 付録：GitHub • バージョン管理 • Gitコマンド基礎 • GitHubにアカウント作成 • GitHubでのバージョン管理 • GitHubでの分散バージョン管理
- 76. バージョン管理 • ソースプログラムのライフサイクル • 終わりなき更新 • 過去に戻れるか • 本体 + 差分 + 管理情報
- 78. ローカルでGitコマンド • git config で初期設定 • git init でリポジトリ作成 取り消しは rm -r .git • git status で状態確認 • ファイル作成（修正）でワーキングツリーへ（赤文字） 取り消しは rm ファイル名（作成時）または git chekout --ファイル名（修正時）
- 79. ローカルでGitコマンド • git add でワーキングツリーからインデックスへ （緑文字） 取り消しは git rm -- cached ファイル名（作成時）または git reset HEAD ファイル名（修正時） • git commit でインデックスからリポジトリへ 取り消しは git reset -- soft HEAD^（修正時のみ）
- 80. 状態を見るGitコマンド • git log でオブジェクトIDと日付を確認 • git diff で差分を確認 • gitk で経過を確認
- 81. GitHubにアカウント作成 • ソーシャルコーディング • 無料のアカウントはソースが常にさらされる （かえって勉強になる） • 他の人のソースもじっくり見る • git clone でリポジトリごとコピー
- 82. GitHubでのバージョン管理 • リモートリポジトリ作成（New repositoryボタン） じっくり取り組むならここ（宣伝） http://engineer-intern.jp/archives/12305 • 公開されることを覚悟して名前をつける • 後々のことも考えて設定する • git remote でリモートリポジトリの設定 • git push でリモートリポジトリにプッシュ
- 83. GitHubで分散バージョン管理 • もう一人になり切って分散開発の疑似体験 • 2人目が git clone でリポジトリコピー • git add、git commit 後 git push • 1人目が git pull で2人目の修正取り込み • わざとコンフリクト発生 • git pull、修正、git push でコンフリクト解消
- 84. 手っ取り早くGitHubにアップ（１） • フォルダを作成し、そこでgit init • プロジェクトごとそのフォルダにコピー • git add . • git commit -m First commit • GitHubにアカウント作成 • git config --global user.name "あなたのユーザ名" • git config --global user.email あなたのメールアドレス"
- 85. 手っ取り早くGitHubにアップ（２） • GitHubにログイン後、緑の「+ New repository」 ボタンを押す • Repository name（リポジトリ名）をつけて緑の 「Create Repository」ボタンを押す （Initialize this repository with a READMEの チェックは外すこと！） （リポジトリ名はソースの中身をきちんと表すこと） • git remote add origin https://github.com/あなたのID/あな たのリポジトリ名.git（ここからは画面の指示に従えば良い） • git push -u origin master