Edited at

Swiftでおみくじアプリをつくる

More than 1 year has passed since last update.

夏頃から会社の仲間とSwiftを勉強し始めました。

簡単なおみくじアプリ作成の流れをまとめて、自分の理解を深めようと思います。


作成したいおみくじアプリ


条件

1.名前と年齢を入力させる

2.大吉、中吉、小吉、凶をランダムに表示する。

3.もう一度ボタンを押したら、テキストフィールドは空になっている


画面イメージ

image.png


Xcodeを起動し、プロジェクトを作成する

Xcodeを起動後、「create a new Xcode project」を選択

スクリーンショット 2017-12-12 1.19.49.png

Single New Appを選択し、「NEXT」

スクリーンショット 2017-12-12 1.22.59.png

project nameに好きな名前をつけて「NEXT」を押すと、

プロジェクトのディレクトリが作成されます。

スクリーンショット 2017-12-12 1.24.45.png

プロジェクトの作成が完了したら、以下の流れでアプリを作成していきます。

①画面を作る

②2つのページそれぞれの処理を書く

③2つのページを繋げる処理を書く

④データ保存の処理を書く


①画面を作る

アプリの画面は、「Main.storyboard」から作っていきます

画面一番左の「Main.storyboard」をクリックします。

スクリーンショット 2017-12-12 1.35.57.png


入力画面を作る

アプリに必要なパーツを右下のメニューから選択します。

test_readme_img.gif

まずは入力画面にある「年齢を入力」と表示させるラベルを配置します。

フィルタで「label」と検索し、画面上でドラッグアンドドロップし、文字を書き換えます。

同様に、「textField」「button」を配置していきます

スクリーンショット 2017-12-12 1.53.00.png


おみくじ結果画面を作る

次に2ページ目のおみくじ結果を表示させる画面を作成します。

右下メニューからviewControllerを検索しドラッグアンドドロップします。

結果の表示に必要な、label、buttonを配置します。

スクリーンショット 2017-12-12 1.55.50.png


②つのページそれぞれの処理を書く

ここで、左上にある再生ボタン(▶)を押すと、1ページ目である入力画面が表示されます。

ここから、ページそれぞれの処理を書いていきます。


入力画面の処理

入力画面には年齢と名前、2つの値を入力するtextFieldがあります。

それぞれの値を次のページに渡したり、データとして保存するために、変数に格納する処理を実装していきます。

アプリの一つひとつの画面に処理を実装するためには、その画面に対応した「ViewController」に処理を記載していく必要があります。

1ページ目の入力画面は「viewController.swift」がそれにあたります。


年齢のtextFieldを変数に格納する

Controllerキーを押しながらテキストフィールドをドラッグアンドドロップし、

画面上のtextFieldとViewControllerを紐付けます

2.gif

同様に名前のtextFieldも紐付けを行います


おみくじ結果画面の処理

おみくじ結果画面ではまず、Controllerの作成が必要です。

Xcodeのメニューの、file>new>file から、「cocoa touch class」を選択し

「omikuziViewController」など任意の名前をつけ、「UIViewController」をプルダウンから選択し、

ファイルを作成します。

作成したファイルに必要な処理を書いていきます。


omikuziViewController.swift


import UIKit

class OmikuziViewController: UIViewController {

//前のページから名前を受け取るための変数
var name:String? = ""

//おみくじの結果を配列に格納
var result:[String] = ["大吉", "中吉", "小吉", "凶"]

//名前とおみくじの結果を表示させるためのlabelを、Controllerと紐付ける
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var resultLabel: UILabel!

//viewDidLoadはページが表示された時に実行される
override func viewDidLoad() {
super.viewDidLoad()

//受け取ったnameにnilが入っていないかチェックをする
if let name = name {
//nilが入っていなかった場合、Labelに名前を表示させる
nameLabel.text = name + "さん"
}
//ランダムな数値0〜3を取得、結果に応じて配列からおみくじの値を表示させる
let num = Int(arc4random_uniform(4))
resultLabel.text = "\(result[num])です!"
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}

}



③2つのページを繋げる処理を書く

次に、2つのページを繋げるための処理を記載していきます。


「結果」ボタンを押すと次のページに遷移するようにする

結果のボタンをおした時、次のページに遷移させるためには、

結果ボタンをControllerキーを押しながら次のページヘドラッグアンドドロップさせます。

3.gif


おみくじの結果画面に入力した名前を渡す

1ページ目で記載した名前を2ページ目で表示させるため、nameの値の受け渡しを行う必要があります。

値の受け渡しを行うためには、

1.次のページの情報を取得する

2.次のページの中にある変数に、値を代入する

という手順をふみます

ViewControllerのClass内に、以下を記載します


viewController.swift

    //次の画面に名前を渡す処理

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

//次のページの情報を取得する
//次のページはOmikuziViewController Classなので、それに合わせてas!でダウンキャストする
let omikuziController = segue.destination as! OmikuziViewController

//1ページ目の名前のtextFieldの値にnilが入っていないかチェックをする
if let name = nameField.text {
//nilチェックが通ったら、次のページのnameに、値を代入する
omikuziController.name = name
}
}



「もう一度」ボタンを押した時の処理を書く

もう一度ボタンを押したときは、最初のページに戻るよう設定をします。

最初のページに戻るためには、最初のページのControllerに準備が必要です。


viewController.swift

    //前の画面から戻った時の処理

@IBAction func restart(_ segue: UIStoryboardSegue) {

//textFieldの値を空欄に戻す
nameField.text = ""
ageField.text = ""
}


これで戻るための準備が整ったので、おみくじ結果ページの「もう一度」ボタンを押した時の設定を行います。

4.gif


完成したもの

5.gif


コード


viewController.swift

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var ageField: UITextField!
@IBOutlet weak var nameField: UITextField!

//前の画面から戻った時に、フィールドの値を初期化する
@IBAction func restart(_ segue: UIStoryboardSegue) {
nameField.text = ""
ageField.text = ""
}

//名前のテキストフィールドに文字が入力されるたびにユーザデフォルトに保存する
@IBAction func nameFieldAction(_ sender: Any) {
let ud = UserDefaults.standard
if let name = nameField.text {
ud.set(name, forKey: "name")
ud.synchronize()
}
}

//年齢のテキストフィールドに文字が入力されるたびにユーザデフォルトに保存する
@IBAction func ageFieldAction(_ sender: Any) {
let ud = UserDefaults.standard
if let age = ageField.text {
ud.set(age, forKey: "age")
ud.synchronize()
}
}

//次の画面に名前を渡す処理
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
let omikuziController = segue.destination as! OmikuziViewController

//名前を渡す
if let name = nameField.text {
omikuziController.name = name
}

}

override func viewDidLoad() {
super.viewDidLoad()
let ud = UserDefaults.standard
let name = ud.string(forKey: "name")
if let name = name {
nameField.text = name
}
let age = ud.string(forKey: "age")
if let age = age {
ageField.text = age
}
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

}



OmikuziViewController.swift

import UIKit

class OmikuziViewController: UIViewController {
//前のページから名前を受け取る
var name:String? = ""
var result:[String] = ["大吉", "中吉", "小吉", "凶"]
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var resultLabel: UILabel!

override func viewDidLoad() {
super.viewDidLoad()
if let name = name {
nameLabel.text = name + "さん"
}
//ランダムな数値0〜3
let num = Int(arc4random_uniform(4))
resultLabel.text = "\(result[num])です!"
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}



まとめ

勉強開始してから、やっとシンプルながらもアプリっぽいものが作れるようになり、とても楽しいです。

ここ変だよーとか、間違ってるとかあったら反応いただけたら嬉しいです!

おわり