はじめに
前回の投稿で、swiftでの開発を行う上で必要な
基礎知識のアウトプットも終了しました。
とりあえずソースコードを見て、おおよそ何がしたいのか
理解できる様になってきたので、
今回からは実際にアプリを開発しながら
更なるレベルアップをして行きたいと思います。
もちろん知らないメソッドやプロパティなどが出てきたら、
随時アウトプットして行きます。
カウントアプリ開発
ということで、今回は簡単なカウントアプリの開発を通して
開発の手順と、Xcodeの機能の把握を行っていこうと思います！
開発環境
swift5.2.2、Xcode(Version11.4.1)で、
シミュレーターはiphone11で行っています。
仕様書の作成
まずはXcodeを開く前にアプリの仕様書を作成しましょう。
最初はこんな感じで、
①アプリの仕様、②作成手順、③アプリイメージくらいの
簡単な仕様書でいいと思います。
技術力を上げると共に仕様書の書き方もマスターしましょう！
新規プロジェクトの作成
基礎編の投稿ではplaygroundを利用していましたが、
アプリの開発ではprojectを利用して行きます。
新規プロジェクトを作成するには、
Xcodeを開きCreate a new Xcode projectを選択します。
すると、こんな感じの画面に移ります。
今回作るアプリのViewページは1つなので、
Single View Appを選択します。
すると、今度はこんな感じの画面に移ります。
ここでは、プロジェクトの名前やドメインなどを決めて行きます。
・Product Name
プロジェクトの名称を決めます。
今回は、カウントアプリなのでCountAppと入力しましょう。
・Team
これは、実機テストをする際には設定する必要がありますが、
今回は設定しません。
・Organization Name
会社などの場合は入力が必要ですが、
基本は入力しなくても大丈夫です。
・Organization Identifier
任意の値でOKです。
しかし、App Storeにリリースする場合はこの値で
アプリを識別するため、重複しないものでないといけません。
オススメは、自身のメールアドレスを逆さにする事です。
・Language
使用する言語は、SwiftとObjective-Cを選べます。
今回は、swiftを選びましょう。
・User Interface
ここでは、Storyboardを選択してください。
この後、プロジェクトを保存する場所を選択して、
新規プロジェクトの作成は終了です。
次からは、いよいよ開発に入って行きます！
アプリケーションの開発
ここからの作業は、アプリ仕様書の作業手順２以降の作業となります。
作業手順２ パーツの配置
２−１ 配置
まずは、左側にあるNavigatorAreaの
Main.storyboardを開きます。
ここに、ボタンやラベルなどのパーツを付け足して行きます。
次にLibraryを開いて、「UILabel」×１、「UIButton」×２を配置します。
Libraryは右上にある「＋」のボタンから開けます。
今の段階では大きさや位置の調節などは行わなくて大丈夫です。
２−２ 位置、大きさ
まずは、UILabelの調節から行って行きます。
① Utility areaを表示させる
② UILabelのTextを「0」に、FontのSizeを「100」に変更
③ Alignmentを中央に変更
次にUIButtonの調節を行います。
① 左のUIButtonのUtility areaを表示させる
② UIButtonのTextを「UP」に、FontのSizeを「50」に変更
③ 右のUIButtonのUtility areaを表示させる
④ UIButtonのTextを「DOWN」に、FontのSizeを「50」に変更
最後にパーツの位置を調整して行きます。
調節にはXcodeのAutoLayoutの機能を利用します。
＊AutoLayout機能
AutoLayout機能とは、画面やパーツに幅や高さ、余白、位置などの
制約を設定し、表示を調整できる機能です。
また、ここで設定した機能は、
縦、横の表示が変更されても自動で調節されます。
まずは、UILabelの余白の制約を設定します。
①右下の5つあるAutoLayout機能からAdd New Constraints
を選択する。
②Add New Constraintsの上部で余白を設定できます。
＊注意：四角についている赤い点線が、直線になった時のみ
入力した値が有効になります。
③下部にるAdd3~をクリックし、
設定した余白がおかしくないか確認する。
適用後
こんな感じになっていればクリアです。
次に、今のままでは右寄りになっているUPボタンとDOWNボタンの
位置を設定して行きます。
①右下の5つあるAutoLayout機能からAlignを選択する。
②Horizontally in ContainerとVertically in Containerに
値を入力する。
・「UPボタン」にHorizontally「-80」、Vertically「150」
・「DOWNボタン」にHorizontally「80」、Vertically「150」
＊Horizontally in Containerは水平方向の
Vertically in Containerは垂直方向の位置を定義する。
水平方向とは、
垂直方向とは、
中央線から見て、プラス方向であればプラスの値を、
マイナス方向であればマイナスの値を入力する。
③下部にるAdd２~をクリックし、
設定した位置がおかしくないか確認する。
こんな感じになればクリア！
ここまでで、手順２は終了です。
ただ1つ注意して欲しいのが、AutoLayout機能についてです。
AutoLayout機能は便利ですが、
「値を間違った」、「思った通りの表示にならなかった」などで
調節したい時は、Utility areaのSize Inspecterから
行ってください。
AutoLayoutからもう一度値を入力すると、
二重で定義することとなり、エラーが起きてしまします‼︎
作業手順３ パーツの接続
Main.storyboard上に配置したラベルやボタンを、
ソースコードから扱えるようにOutletやActionの接続を行います。
３−１ Outlet接続
Outlet接続とは、Storyboard上のパーツを、
ソースコード上の変数として使えるようにする仕組みです。
①まずは、Assistant editorを開きます。
Assistant editorは右上のボタンから開けます。
②次に、Storyboardの「UILabel」を選択し、
Controlキーを押しながら、Assistant editorで開いた
View Controllerのソースコード上にドラッグ＆ドロップします。
Nameの部分には、「Label」と入力しておきましょう。
するとこんな感じになるはずです。
これで、Outlet接続は完了です。
３−２ Action接続
ここでは、ボタンの押されたときにアクションが動く様に
ソースコードとの関連づけを行います。
①まずは、「UPボタン」をControlを押しながら、
Assistant editorにドラッグ＆ドロップします。
そして、NameはUPBotton、TypeにはAnyと入力しましょう。
「DOWNボタン」も同じ手順でドラッグ＆ドロップし、
NameはDOWNBotton、TypeにはAnyと入力しましょう。
するとこんな感じになるはずです。
これで、Action接続は完了です。
作業手順４
ここで、接続したアクションに処理を書いて行きます。
コードはそこまで難しくないので、この手順ではソースコードを
そのまま掲載します。
//
// ViewController.swift
// CountApp
//
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBOutlet weak var Label: UILabel!
var number = 0
@IBAction func UPBotton(_ sender: Any) {
number = number + 1
Label.text = String(number)
}
@IBAction func DOWNBotton(_ sender: Any) {
if number < 1 {
return
} else {
number = number - 1
Label.text = String(number)
}
}
}
これでアクションの定義は完了です。
コードの詳しい解説はしなので、わからない事があれば
自分で調べてみてください！
作業手順５
ここまで来たらあとはテストです。
せっかく作っても動かないのでは意味がありませんからね。
シミュレーターでテストしてみましょう！
Build手順
①まずは、左上の「▶️」のボタンを押して、アプリをBuildします。
この手順で、シミュレーターにアプリのデータがインストールされます。
②シミュレーターが起動するとアプリが起動するので、
期待どうりの動作をするか確認しましょう！
特に、DOWNボタンを押して0以下にならないかは
見ておいてください。
問題なければ完成です‼︎
エラーが出た場合は、諦めずに
エラーの箇所の解説に戻って再度挑戦しましょう‼︎
今回は小規規模の開発だったため、一度しかBuildしませんでしたが、
開発の規模が大きいのであれば、こまめにBuildすることをオススメします。
これまで
これでカウントアプリの開発は終わりです。
今回はボタンが二つだけでしたが、
複数配置して機能を増やしてみても面白いと思います‼︎
AutoLayout機能あたりは慣れないとミスすることも多いですが、
慣れてくると便利に感じてきます。
頑張って慣れましょう！
今回は初めての開発ということで、
画像を多めに使い、解説も出来るだけ詳しくすることを意識しています。
そのため、ごちゃごちゃしていて読みづらいかもしれません。
わかりにくい事があれば、コメントしてください‼︎