【Swift入門】初心者必見！おみくじアプリの作り方を丁寧に解説！~誰でも簡単に作れる~

①をクリック

②(Embed In)をクリック

③のNavigation Controllerをクリック

ナビゲーションバーの設定が完了

①Navigation ControllerのTitle付近をクリック

②Bar Tintをお好みの色に設定

①をクリック(最初はおみくじと表示されておらず、真っ新なのでバーの中心をクリック）

②(Show the Attributes inspector)をクリック

③のタイトルに任意の名前を入力

①(Library)をクリック

②Labelをstoryboardへドラック&ドロップ

①(Align)をクリック

②2箇所 ✅ を入れる

③Add 2 Constraints をクリック

①(Add New Constraints)をクリック

②widthとheightを200に設定

③2箇所に ✅ が入っていることを確認

④Add 2 Constraints をクリック

storyboardに配置されたLabelをクリック

①(Show the Attributes inspector)をクリック

②Labelのtextを ??? に変更

③のColorを White Color に、Fontを System 50.0 に変更

④Labelの配置を中央揃えにする

⑤Backgroundを System Teal Color に変更

①(Library)をクリック

②Buttonをstoryboardへドラック&ドロップ

①(Align)をクリック

②１箇所 ✅ を入れる

③Add 1 Constraints をクリック

①(Add New Constraints)をクリック

②の数字を25に変更後、数字下の縦棒が赤になっていることを確認

③Add 1 Constraints をクリック

storyboardに配置されたButtonをクリック

①(Show the Attributes inspector)をクリック

②のTitleを今日の運勢は？に変更

①controlを押しながらLabelをクリックし、override func viewDidLoad()の上にドラック&ドロップ

②のNameにomikujiLabelと記述し、connectをクリック

下記画像のようにLabelが接続されます

①controlを押しながらButtonをクリックし、override func viewDidLoad()の下の } と一番下の } の間にドラック&ドロップ

②NameにomikujiButtonと記述し、connectをクリック

下記画像のようにButtonが接続されます

override func viewDidLoad()内に下記のコードを追記する。

@IBOutlet weak var omikujiLabel: UILabel!
override func viewDidLoad() {
    super.viewDidLoad()
    omikujiLabel.layer.borderColor = UIColor.blue.cgColor
    omikujiLabel.layer.borderWidth = 5
    omikujiLabel.layer.cornerRadius = omikujiLabel.bounds.width / 2
    omikujiLabel.layer.masksToBounds = true
}

storyboardのレイアウトの手順は下記の通りです。

①layer.borderColorとlayer.borderWidthで縁を青にする

②layer.cornerRadiusをbounds.widthを2で割ることにより、縁を正円にする

③layer.masksToBoundsをtrueにすることにより、正円の縁の外側を取り除きます。

@IBAction func omikujiButton(_ sender: Any()内に下記のコードを記述する。

@IBAction func omikujiButton(_ sender: Any) {
    var results = ["大吉","中吉","吉","小吉","凶"]
    results.shuffle()
    self.omikujiLabel.text = results.first
}

resultsという定数の中に表示したい配列を入れます

["大吉","中吉","吉","小吉","凶"]

results.shuffle()で範囲を指定した乱数を作ります

ランダムに配列の中から選ばれた最初の数字であるresults.firstをomikujiLabel.textに表示させて完成となります。

最後に全体のコードを載せておきます。

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var omikujiLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        omikujiLabel.layer.borderColor = UIColor.blue.cgColor
        omikujiLabel.layer.borderWidth = 5
        omikujiLabel.layer.cornerRadius = omikujiLabel.bounds.width / 2
        omikujiLabel.layer.masksToBounds = true
    }
    
    @IBAction func omikujiButton(_ sender: Any) {
        var results = ["大吉","中吉","吉","小吉","凶"]
        results.shuffle()
        self.omikujiLabel.text = results.first
    }
    
}