Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@kakecyanman

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

ガチャアプリを作ろう

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

      ↓↓ 完成図 ↓↓

開発環境/開発準備

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

開発開始

見た目

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

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

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

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

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

コードを書こう!

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

乱数とは...

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

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

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

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

if文とは...

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

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

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

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

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

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

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

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

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

できたかな?僕は写真を5枚にしたのでこんな感じ!

number = Int(arc4random_uniform(5))

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

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

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

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

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

if ~ {                 //条件1
    ...
} else if ~ {          //条件2
    ...
} else if ~ {      //条件3
    ...
} 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文は、使う場面が多いのでしっかり復習しておきましょう!
まだまだ余裕のある人は、ボタンの形を変える他にもアニメーションなどをつけたりもできるので、いろいろ調べてチャレンジしてみてください!!
ではまた👋

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kakecyanman
京都の大学に通う4回生。 iOSアプリ開発を中心に行ってます!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?