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

maharu

この記事は簡単なおみくじアプリの作成方法を紹介する記事です。

どんなアプリなの?

haru

maharu

「今日の運勢は?」というボタンを押すと、ランダムに大吉とか小吉とかがボタンの上に表示されるアプリです。

動作環境

Item Version
Swift 5.3
Xcode 12.5
MacOS Big Sur 11.3.1

完成イメージ

今日の運勢は?というボタンを押下すると、中央のLabelに今日の運勢が表示される簡単なアプリです。

おみくじアプリの開発手順

プロジェクトの作成手順は省略しますので、下記リンクを参考にして下さい。

参考 【Xcode】新規プロジェクトを作成する方法とGitHubからクローンを作成する方法についてharublog
STEP.1
ナビゲーションバーの設定

①をクリック

(Embed In)をクリック

③のNavigation Controllerをクリック

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

STEP.2
ナビゲーションバー色とタイトルの設定

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

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

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

(Show the Attributes inspector)をクリック

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

STEP.3
storyboardにLabelを配置する

(Library)をクリック

Labelstoryboardへドラック&ドロップ

STEP.4
配置したLabelのレイアウトを整え、文字サイズとカラーを変更する

(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 に変更

STEP.5
storyboardにButtonを配置する

(Library)をクリック

Buttonstoryboardへドラック&ドロップ

STEP.6
Buttonのレイアウトを整えてTitleを変更する

(Align)をクリック

②1箇所 ✅ を入れる

Add 1 Constraints をクリック

(Add New Constraints)をクリック

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

Add 1 Constraints をクリック

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

(Show the Attributes inspector)をクリック

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

STEP.7
LabelをstoryboardのViewControllerに接続する

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

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

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

STEP.8
ButtonをstoryboardのViewControllerに接続する

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

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

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

STEP.9
ラベルのデザインを設定する

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.borderColorlayer.borderWidthで縁を青にする

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

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

STEP.10
Buttonを押したときのアクションを記述する

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

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

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

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

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

ランダムに配列の中から選ばれた最初の数字であるresults.firstomikujiLabel.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
    }
    
}
完成!

まとめ

今回は簡単に作れるおみくじアプリを作成しました。配列の中に数字を入れたりして、サイコロやトランプのデザイン等に変更することにより、違うデザインのアプリも作成できると思いますので、楽しみながらアプリ作成の参考にしていただければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です