ガチャアプリを作ろう

今回は、ガチャアプリを作ります！
ワクワクできるアプリを作っていきましょう！

　　　　　　↓↓　完成図　↓↓

開発環境/開発準備

開発環境や開発準備のやり方は前の記事で丁寧に説明したのでこっちを参考にしてね！！
先に下のを見ておくとスムーズに進められるよ！
【初心者向け】iOSアプリ開発カウントアプリ

開発開始

見た目

ではまず見た目のデザインの部分から作っていきましょう！
そう、Xcodeでは見た目の部分はコードを書く必要がないんでしゅ。
ドラック＆ドロップしていくぞーーー🔥

Main.storyboardに移動し、右上の「＋」ボタンを押してObjectを開きましょう！
ここまできたらあとはドラック＆ドロップだーーー！！

やってみよう！上の画像のようにそれぞれ配置してみよう！

ヒント💡　ImageView, Label, Buttonの３つを使うよ

これで見た目は完成です！いぇい✌️

コードを書こう！

見た目の部分ができたのでこれからコードかきかきに取り掛かります！
ViewController.swiftに移動し、書いていきましょう。
今回利用するのは、乱数とif文です。ではまずはそれぞれの説明から。

乱数とは...

ランダムに数字を生成させるものです。これによりガチャガチャの「何が出るかわからない」ワクワク部分を実現させます！swiftでは下のように書きます。

// 乱数で生成した数字を入れる箱
var number = 0

// 乱数を生成
number = Int(arc4random_uniform(数字))

もし０〜８の間で乱数を発生させたかった場合、数字の部分に９と書く形になります。
※プログラミングでは基本０からスタート！

if文とは...

「もし〜だったら」といった形で条件分岐させるものです。これによって乱数の数字に合わせて表示する文字や画像を分けることができます！swiftでは下のように書きます。

if 条件式 {
　　 条件式があっていた時の処理  
} else {
　　 条件式が違った時の処理
}

ではでは、実装していこう！

①変数の宣言
今回は、Main.storyboardにLabelとImageViewをおいたので、この２つと乱数を生成した時に出てきた数字を入れる箱の合計３つを宣言します！

こんな感じ！水色の文字の部分は変数名になるためわかりやすい名前をつけてあげてね！

②画像の取り込み
今回作成するガチャアプリでは、ボタンを押すと上の文字と画像が切り替わるようにします！
そのため画像を取り込んでいくよ👍
まず、インターネットブラウザを開いて好きな写真を５枚くらい取ってこよう！
取ってこれたらXcodeに入れ込むぞーーー🔥
Assets.xcassetsに移動し、画像をドラック＆ドロップだ！！

下のような写真になってたら、画像の取り込み完了！いぇい✌️

③ボタンを押した時の動作（アクション）を設定
ViewController.swiftに戻ってきたら、次はボタンの設定です！
ここでさっき習った乱数とif文を使っていくよ！
下のような感じでボタンの宣言ができたらこの中にどんどん書いていくよ！

まずは乱数から！先ほど習ったものを思い出しながら書いてみよう！

できたかな？僕は写真を５枚にしたのでこんな感じ！

number = Int(arc4random_uniform(5))

同じような形になってたら良きです🙆‍♂️

次はif文！今回は「もしnumberが◯だったら〜する」といった形で使うよ！
こんな感じで書きます！

if number == 1 {
    imageView.image = UIImage(named: "doubutu1.jpeg")
    label.text = "ぎゅっ..."
} else {
    ...
}

これだと「もしnumberが１だったら、ImageViewに"doubutu1.jpeg（画像の名前）"を代入して、Labelに"ぎゅっ..."を代入する」って感じになります！

if文では、下のような形でどんどん条件分岐を増やしていけます🔥

if ~ {                 //条件１
    ...
} else if ~ {          //条件２
    ...
} else if ~ {　　　　　　//条件３
    ...
} else {　　　　　　　　　//その他
    ...
}

やってみよう！上のを参考にして自分が取り込んだ画像分の条件分岐をさせてみよう！

解答例は、最後にコードの全体像を載せてるのでそこで確認してね！

コードがかけたら関連付けを忘れないように！
何それ...初めて聞いた。って人は、これもカウントアプリ編で説明したのでこっちを見てね！
【初心者向け】iOSアプリ開発カウントアプリ

【おまけ】ボタンの形を変えよう！

今回作成してきたのは、ガチャアプリ！ということで少し遊び心を持とうと思います！
ガチャガチャのボタンを丸くしちゃうよ！

①変数の宣言
普段はボタンに対して変数の宣言を行うことは少ないのですが、今回は形を変えたいので行います！

こんな感じ！宣言ができたら形を変えていくよ！
関連付けを忘れないでね😉

②形の変更
形の変更は、viewDidLoad( ) { }内に書いていきます！

こんな感じ！これでボタンが丸くなりました🙆‍♂️

これでガチャアプリが完成だーーー🔥🔥🔥

コードの全体像

ViewController.swift

import UIKit

class ViewController: UIViewController {

    // 乱数の宣言
    var number = 0
    // ImageViewの宣言
    @IBOutlet var imageView: UIImageView!
    // Labelの宣言
    @IBOutlet var label: UILabel!

    // ボタンの宣言
    @IBOutlet var gacyaButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        gacyaButton.layer.cornerRadius = 50.0
    }

    @IBAction func gacya(){

        number = Int(arc4random_uniform(5))

        if number == 1 {
            imageView.image = UIImage(named: "doubutu1.jpeg")
            label.text = "ぎゅっ..."
        } else if number == 2 {
            imageView.image = UIImage(named: "doubutu2.jpeg")
            label.text = "ちょこん。"
        } else if number == 3 {
            imageView.image = UIImage(named: "doubutu3.jpeg")
            label.text = "ぴとっ..."
        } else if number == 4 {
            imageView.image = UIImage(named: "doubutu4.jpeg")
            label.text = "そっ..."
        } else {
            imageView.image = UIImage(named: "doubutu5.jpeg")
            label.text = "にたぁ。"
        }

    }

}

実際に「command＋R」でシュミレーターを立ち上げて遊んでみよう！

開発終了

お疲れ様でした！ガチャアプリはしっかり動きましたか？
今回使用したif文は、使う場面が多いのでしっかり復習しておきましょう！
まだまだ余裕のある人は、ボタンの形を変える他にもアニメーションなどをつけたりもできるので、いろいろ調べてチャレンジしてみてください！！
ではまた👋

【初心者向け】iOSアプリ開発 ガチャアプリ