【iphoneアプリ開発】swiftでおみくじアプリを実装してみた【Xcode・チュートリアル】

swiftを使って、ランダムに結果が表示されるおみくじアプリを制作してみました。

制作時間30分以内に作れる簡易的アプリかつXcodeとswiftの使い方をざっと眺めることができるので、「iphoneアプリ開発ってどんな感じなのだろう？」という方は是非読んでみてください。

※swiftのプログラミングの部分だけを解説しますので、アプリ内UIのレイアウトに関しては、こちらの記事を参考にして下さい。この記事で作成したおみくじアプリのレイアウトを使って、アプリを制作します。

UIコンポーネントを関連付けする

左側の簡易的に制作したUIを右側のswiftと関連付けしてアプリを制作します。

「大吉！！」と書いてあるLabelを「Control」を押しながら右側のswiftのコードにドラッグ・アンド・ドロップします。

このように、Nameを自由につけて、swiftと関連付けします。そうすると、

@IBOutlet weak var resultLabelView: UILabel!

1	@IBOutlet weak var resultLabelView: UILabel!

という記述がソースに追記されます。同じように、「おみくじを引く」ボタンも関連付けしましょう。

ボタンの場合は、タップ時に処理を行いたいため、ConnectionをActionに指定して関連付けをします。

ランダムな結果を表示するプログラムを書く

UIパーツの関連付けが完了したので、「おみくじを引く」ボタンを押したら、「大吉！！！」と表示されている部分の文字を変更するプログラムを記述します。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

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

    @IBOutlet weak var resultLabelView: UILabel!
    
    var omikuji = 0
    @IBAction func omikujiAction(_ sender: Any) {
        omikuji = Int(arc4random_uniform(3))
        
        if omikuji == 0 {
            resultLabelView.text = "大吉！！！"
        } else if omikuji == 1 {
            resultLabelView.text = "吉！"
        } else if omikuji == 2 {
            resultLabelView.text = "凶..."
        }
    }
    
}

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view, typically from a nib.

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Dispose of any resources that can be recreated.

}

@IBOutlet weak var resultLabelView: UILabel!

var omikuji = 0

@IBAction func omikujiAction(_ sender: Any) {

omikuji = Int(arc4random_uniform(3))

if omikuji == 0 {

resultLabelView.text = "大吉！！！"

} else if omikuji == 1 {

resultLabelView.text = "吉！"

} else if omikuji == 2 {

resultLabelView.text = "凶..."

}

先にソースの全文を書いておくと、こんな感じです。

少しずつ解説すると、

var omikuji = 0

1	var omikuji = 0

omikujiという変数を宣言

omikuji = Int(arc4random_uniform(3))

1	omikuji = Int(arc4random_uniform(3))

「おみくじを引く」ボタンがクリックされるたびに行われる処理の中に、クリックされるたびにomikujiにランダムな整数を代入する記述を追加

if omikuji == 0 {
    resultLabelView.text = "大吉！！！"
} else if omikuji == 1 {
    resultLabelView.text = "吉！"
} else if omikuji == 2 {
    resultLabelView.text = "凶..."
}