maharu
この記事は簡単なおみくじアプリの作成方法を紹介する記事です。
どんなアプリなの?
haru
maharu
「今日の運勢は?」というボタンを押すと、ランダムに大吉とか小吉とかがボタンの上に表示されるアプリです。
クリックできる目次
動作環境
Item | Version |
---|---|
Swift | 5.3 |
Xcode | 12.5 |
MacOS | Big Sur 11.3.1 |
完成イメージ
今日の運勢は?というボタンを押下すると、中央のLabelに今日の運勢が表示される簡単なアプリです。
おみくじアプリの開発手順
プロジェクトの作成手順は省略しますので、下記リンクを参考にして下さい。
参考 【Xcode】新規プロジェクトを作成する方法とGitHubからクローンを作成する方法についてharublog①をクリック
②(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)をクリック
②1箇所 ✅ を入れる
③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 } }
まとめ
今回は簡単に作れるおみくじアプリを作成しました。配列の中に数字を入れたりして、サイコロやトランプのデザイン等に変更することにより、違うデザインのアプリも作成できると思いますので、楽しみながらアプリ作成の参考にしていただければ幸いです。