はじめてのiosアプリ開発 ①

はじめての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必須

開発言語

開発言語は主に２つ

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で作ることができるプロジェクトは２種類

• 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に１をセットしたあと、２に変更する

teisuに１をセットしたあと、２に変更しようとするができない

変数

定数

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"の２つがある！

② １からアプリを作るときは"Single View Application"を選ぼう！

③ シミュレーターの操作コマンドは覚えておこう！

まとめ

ポイント ① Swiftを練習をするならPlaygroundを使おう！

② 変数にはvar型とlet型がある！

③ エラーが出た時はメッセージを見よう！

Playground解答ファイル• GitHubから落としてくることができます• URL : https://github.com/hayate1996/swift_ios_study_01/tree/answer