はじめてのiosアプリ開発 ①
TRANSCRIPT
はじめてのiOSアプリ開発
自己紹介About
• Hiromasa Nagamine
Work
• LINE Corporation
• iOS Engineer
Events
• Swift勉強会
Swiftをつかって iOSアプリをつくろう
iOSアプリとは
iOSアプリとは、
iOS上で動作するアプリケーション
iPhoneのカメラやGPS、マイクなどの様々な機能を利用して様々な機能を提供
SwiftやObjective-Cを使って開発
Swift
Swiftとは?
OS X, iOSアプリを開発に使う プログラミング言語
Objective-Cの次世代となる
関数型言語を思想に持つ形で開発
Xcodeのバージョンによって Swiftのバージョンも異なる
アプリをつくる準備
iOSアプリ開発の環境
iOSアプリを開発するには、以下の環境が必要です。
Macintosh PC Xcode Apple ID
※リリース
Macintosh PCIntel PCのMacintoshが必要
※ Power PCでは、Xcodeがインストールできない
Xcodeとは?
Xcode
iOSアプリやOS Xのアプリを
開発する開発環境
プロジェクトの作成、ビルド、構
文チェックなど様々な機能を提供
iOSアプリは基本的にXcode必須
開発言語
開発言語は主に2つ
Objective-C
Swift
今回は、Swiftを使って開発
Xcodeダウンロード
Xcodeは以下ページからダウンロード可能
Mac App Store -> View in Mac App Store
公式ページ
今回は、6.4以上のバージョンを利用
※ Xcodeをダウンロードするには、Apple IDが必要になります。もし、持っていなければ作っておきましょう。
まとめ
ポイント ① SwiftはAppleが開発したモダン言語!
② "Intel PC”のMacintoshを用意しよう!
③ XcodeのバージョンによってSwiftのバージョンも違う!
Xcodeの使い方を知ろう
Xcodeで出来ること
Xcodeでは、主に以下のような機能が利用できます。
プロジェクトの種類
プロジェクトの種類
Xcodeで作ることができるプロジェクトは2種類
• Playground
• Xcode Project
できること
まずは、Playgroundを触ってみましょう。
Playgroundの作り方
Playground作成
最初はPlaygroundを作成していきます。
• Xcodeを起動します
• 右の画面が表示されるので“Get started with a playground”を選択
Playground作成
次の画面が出てきます。
ここで設定するのは次の項目です。
• プロジェクトの名前
• Platformのタイプ(iOS, OS X)
Playground作成
”Create"ボタンを押すとファイルの保存先を指定します。
プロジェクトを作成することができます。
右下のようなファイルが生成されます。
Playground作成
XcodeでPlaygroundを開いた状態の画面が表示されます。
Swiftで"Hello, playground!”という文字列を出力するプログラムが書かれています。
これで、Playgroundの作成は以上です。
Playgroundを使って Swift言語を学ぼう
Playgroundとは?
こんなことができる! 実際にXcodeプロジェクトを作成しなくても、簡単なプログラムを試せる。
プログラムを書くと即時にコンパイルするので、実行結果をすぐに確認できる。
UIの実装など、簡単なものであればすぐに確認できる。
連続で変化する変数の値をグラフとして表示することができる。
入力やアニメーションなど一部試すことのできない機能がある。
変更するたびビルドをしたり、シミュレーターを起動したりする手間が省けます。
実際にPlaygroundを使ってSwiftの書き方を練習してみましょう。
Playgroundを使って Swiftを練習しよう
PlaygroundPlayground画面の構成は以下のようになっています。
Playgroundの画面構成コーディングエリア
実際にコーディングをするエリアです。ここでコーディングしたものは、コンソールアウトプットに即時反映されます。
コンソールエリア
コーディングエリアで書いたプログラムの結果を即時表示してくれます。プログラムが正しく結果を求められているか確認をすることができます。
アウトプットエリア
コンソールアウトプットの右側にある、丸いマークをクリックすると表示されます。より詳しく結果を確認することができます。
❖ これから、Swiftの書き方を練習していきましょう。
コーディングしてみよう
課題ファイル• GitHubから落としてくることができます• URL : https://github.com/hayate1996/swift_ios_study_01
“Hello,world!”① はじめての"Hello, world!" まずは、"Hello, world!"をコンソールエリアに出力してみましょう。 コンソールに文字を出力するためには、次のメソッドを利用します。
printlnメソッドは、コンソールエリアへ出力するためのメソッドです。 "Hello, world"をコンソールへ出力するコードには以下のようになります。
変数と定数
変数と定数
変数とは?
なぜ変数を使う?
変数は、プログラム内で扱うデータを保存しておくための箱です。必要な時に用意してあげることで、より柔軟にコーディングすることができます。
変数の書き方
変数の特性は、箱の中の値を変更することができることです。駐車場に止まっている車の台数など常に変化する値を持っておくために使います。
変数と定数定数とは?
なぜ定数を使う?
定数の書き方
定数は、プログラム内で扱うデータのうち、変化しない値を保存しておく箱です。 サーバーのURLとか円周率などはいつも一緒なので定数として保存しておきます。
定数の特性上そこを参照すれば、いつでも同じ値を取得できます。常に決まった値を取得したい場合などに定数を定義します。
例
hensuに1をセットしたあと、2に変更する
teisuに1をセットしたあと、2に変更しようとするができない
変数
定数
UIを表示してみよう
UIを表示
UIとは?
frameとは?
• ユーザーが実際に操作する多くのパーツや画像パーツ • iOSアプリの画面はUIで構成される • UIKitというフレームワークを使う
• UIパーツの大きさと配置する位置を決める • 各UIパーツごとに設定する
UIViewを表示x, y, width, heightを指定する実際にUIViewを表示
CGRectを使ってみようx, y, width, heightを持ったCGRectを作ってみる
演算子
演算子演算子とは?
計算してみよう!
変数を使ってみよう
変数は、プログラム内で扱うデータを保存しておくための箱です。必要な時に用意してあげることで、より柔軟にコーディングすることができます。
関数
関数関数とは?
なぜ関数を使う?
• あらかじめ決めた一連の処理をまとめて書く場所 • その関数を呼び出したとき常に同じ処理をしてくれる • 何度も同じコードを書く手間がなくなる
関数の特性は、関数を呼び出すだけで同じ処理を繰り返し実行できるということです。
レジで商品を買うには、①②③の一連の流れが必要です。”shopping”という関数を作っておけば、コンビニでもスーパーでも、常に同じことができます。
① 商品を出す ② お金を払う ③ 商品を受け取る
“shopping”
コンビニレジ
スーパーレジ
関数関数の書き方
例
エラー表示
何が間違っているのかを教えてくれているので確認しましょう!
文法や変数名が間違っている場合はエラーが表示されます。
※ エラーと一緒にメッセージが表示されます。
Xcode Projectの作り方
Xcode Project作成
次は、Xcodeプロジェクトの作成です。
Xcodeを立ち上げます。
ここで、"Create a new Xcode project"を選択します
Xcode Project作成
選択すると、次の画面が表示されます。
項目がいくつか用意されています
今回は iOS -> Application-> Master-Detail Applicationを選択します
※ 1から作る場合は Single View Applicationを選択することが多いです
Xcode Project作成
次の画面が表示されるので、以下の項目を設定します。
• Product Name : “master_detail_sample"
• Organisation Name : "自分の名前"
• Organisation Identifier : "example.swift"
• Language : Swift
• Device : Universal
• Use Core Data : Check
Xcode Project作成
設定後、”Next"を押すと保存先を選択する画面が出ます。
選択後”Create"を押すとプロジェクトが作成されます。
ファイルは右下のものが生成されます。
シミュレーターで実行してみましょう!
Xcode Projectの 画面構成
Xcode Project画面ここからは、各エリアの説明です。 Xcode Projectの画面には次の様なエリアがあります
Xcode Projectの画面構成
ナビゲーションエリア
ソースファイルやリソースファイルを管理する
もっとも頻繁に使うエリア
Xcode Projectの画面構成
ユーティリティエリア
中央に表示されるファイルの細かな設定をする
上部エリア:インスペクタ
下部エリア:ライブラリ
Xcode Projectの画面構成
ツールバー(ビルド)
シミュレーターに関する操作
• ▶:実行
• :停止
• ターゲット、シミュレーター選択
Xcode Projectの画面構成
ツールバー(エディタ)
各エリアの表示・非表示
ソースコードの変更履歴表示
シミュレーターを 操作してみよう
シミュレーター
Xcode Projectで作ったものはシミュレーターで実行してみましょう
実行するには、ビルドボタンを押します。
Command(⌘) + Shift + Rでも実行できます。
シミュレーターシミュレーターの操作をいくつか紹介します。
• Command(⌘) + 矢印(← →) → シミュレーターの回転
• Command(⌘) + H → ホームボタン
• Option + マウス操作 → ピンチイン・アウト
• ホームボタン2回 → 起動中のアプリのリスト
終わったら停止しましょう。
まとめ
ポイント ① プロジェクトには"Xcode Project"と"Playground"の2つがある!
② 1からアプリを作るときは"Single View Application"を選ぼう!
③ シミュレーターの操作コマンドは覚えておこう!
まとめ
ポイント ① Swiftを練習をするならPlaygroundを使おう!
② 変数にはvar型とlet型がある!
③ エラーが出た時はメッセージを見よう!
Playground解答ファイル• GitHubから落としてくることができます• URL : https://github.com/hayate1996/swift_ios_study_01/tree/answer