【超かんたん!】スロットiPhoneアプリを開発してみよう

iPhoneアプリ開発

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。

今回は「スロットiPhoneアプリ」を開発していきたいと思います。Xcodeの環境構築がまだの方はこちら

前回までの続きはこちら

スタートボタンを押して、3つの数が揃ったら「あたり!」と表示するシンプルなアプリです。

今回は、乱数の使い方や条件分岐などを使って開発していきたいと思います。

このアプリを作成できるようになると、プログラムの基本的な仕組み、乱数の生成、条件分岐についての基礎(今回はif文といいます)を学べます。

また、実際に自分でオリジナルアプリに変更していろいろな応用アプリを作れるようになるかと思いますので、それでは作っていきましょう!

プロジェクトを作成する

プロジェクトの作成方法はこちらに記載されています。

今回はslotとしてプロジェクト名を決めてあげます。

Xcode_slot2
まずはじめに画面中央赤い部分、「Device Orientation」と書かれた箇所があるかと思います。

これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。

今回は縦のみに対応したいと思うので、下の2つのチェックを外します。Portrait」のみにチェックが入っている状態を確認してください。

Xcode_slot3

画面とファイルを整える

画面デザインする

それでは次にいきましょう。画面をデザインしていきます。

左側に「Main.storyboard」という箇所があるので、そこをクリックします。これは主に画面の遷移図(どのような順番で画面を表示していくかなど)や、パーツ(ボタンやラベルなど)を直感的に置いていく、全体図を見渡せる箇所になります。

また、Main.storyboardは実際に自分でデザインしていくことができるので、デザインしていきましょう。
それでは、画面を整えていきたいと思います。

まず、赤い部分をクリックして、画面のサイズを変更したいとおもいます。
Xcode_slot4
Xcode_slot5
Sizeと書かれたところで「iPhone4.7-inch」と設定してください。
Xcode_slot6
Xcode_slot7
ここで画面の上にラベルを設置したいと思います。右側からラベルを選択して、ドラッグ&ドロップで画面の上にのせてください。

次にラベルの幅を適当な幅にしていきます。お好みの幅に設定してください。

Xcode_slot8
Xcode_slot9
今回は「数字が3つ揃う」というアプリを作成していくので、数字を表示するためのラベルが合計3ついることになります。なので、ラベルを3つ画面上に用意してください。
Xcode_slot10
さらに、ボタンを押して、スロットをスタートさせたいのでボタンを画面の上に準備します。これはスロットをスタートさせるボタンとなります。

「Button」とかかれた箇所をダブルクリックしてButtonの文字を変更します。「スタート」と変更してください。

そして、プログラムとパーツを今回もつないでいきたいと思います。右上の赤い部分をクリックしてこの画面に対応しているプログラム(ViewController.m)を開いてください。
Xcode_slot13
いつものように宣言していきましょう。画面上のLableと書かれた場所でcontrolを押しながらプログラムの方へドラッグ&ドロップをしていきます。
Xcode_slot14
Xcode_slot15
ここで、重要なのは宣言をする場所になります。先頭の箇所に宣言をしてください。

すると名前を書く欄が出てきますので、パーツの名前を決めます。ここではそれぞれ左からlable1,lable2,lable3と命名しました。

さらに、スタートボタンをタップしたときの処理を記述する箇所を作成したいので、ここもプログラムにつなぎます。ボタンを選択した状態でcontrolを押しながらドラッグ&ドロップをしてみてください。ここではstartと名づけました。
Xcode_slot11
Xcode_slot12

以下のようにできていればOKです。

また、3つの数字が全てそろったら「あたり!」と表示したいので、結果がわかるラベルも設置したいと思います。ラベルを宣言したように、プログラム上で使えるように宣言します。

Xcode_slot18
ラベルをもう1つ画面上へ設置し、タブルクリックをして「結果」と命名します。

そして、それをプログラムとつなぎます。

ここではプログラム上のラベルを「resultLable」としました。
Xcode_slot19

乱数とは

基本的な考え方

ここで、スタートボタンを押したときにラベルに表示する数字をランダムに箱(変数)の中へいれたいと思います。

ランダムに数字をだす方法は以下のとおりとなります。

int label1_box = arc4random() % 10;
ここでは「label1_box」は数字をいれる箱になります。
arc4random()は乱数といってランダムに数字を発生させる際に書く魔法です。
ただ、どの数字からどの数字までの間で数字を出したいのかを決めたくてはなりません。
それをきめるのが
% 10
です。これは、0~9までの数字でランダムに数字を出すという記述になります。
0~10まで出したいときは%11となります。
今回は、ラベル1つに対して箱1つの数字を準備したいと思うので、合計で3つ箱を用意します。

以下のように準備してください。

 //0から9までの数字をランダムで出して箱に入れていく
  int  label1_box = arc4random() % 10;
  int  label2_box = arc4random() % 10;    
  int  label3_box = arc4random() % 10;

Xcode_slot20
また、数字をラベルに反映する際は文字に変換しなければなりません。
その変換方法は
lable1.text = [NSString stringWithFormat:@”%d”,label1_box];
です。

大事なのはこの文章を覚えることではなく、どこを変更しなければならないかということです。
ここで大切な箇所はlabel1_boxという0~9までの数字が入った箱を文字に変換するにはどこにそれを記述しなければならないかということです。
そして、[NSString stringWithFormat:@”%d”,label1_box]; という指示で文字に変わったものをlable1.textへ代入します。

これで1つ反映されることになります。

今回は3つ必要なので3つ以下のように準備します。

lable1.text = [NSString stringWithFormat:@"%d",label1_box];
lable2.text = [NSString stringWithFormat:@"%d",label2_box];
lable3.text = [NSString stringWithFormat:@"%d",label3_box];

Xcode_slot21

条件分岐とは

いよいよラストです。
どのような条件下であたりなのか、またははずれなのかを設定していきます。
今回は「3つの数字が全てそろったらあたり」、「それ以外ははずれ」ということにします。
以下のコードに注目してください。順をおって説明していきます。

if (label1_box == label2_box && label2_box == label3_box) {
        resultLable.text = @"大当たり!!!";
    }else{
        
        resultLable.text = @"はずれ!!!";
    }

まず、もし「3つの数字が全てそろったら」という記述は
if (label1_box == label2_box && label2_box == label3_box)という箇所になります。

これは日本語に訳すと「ラベル1ボックスの中の数字とラベル2ボックスの中の数字が一致していて「かつ」ラベル2ボックスの中身とラベル3ボックスの中身が一致していたら」というものになります。

シンプルにいうと
A = B, B = C なので、A = C となり、「これはA=B=Cですべての数字が一緒だよね」ということになります。

その条件になれば、結果とかかれたresultLableのテキストを大当たりに、そうでなければ(else)
はずれと記述してくださいということを書いています。
Xcode_slot22

シミュレーターで確認してみよう

それではシミュレーターで確認してみましょう!
左上にiPhone6sPlusと書かれている場合は、そこをクリックして、iPhone6へと変更します。前半部分でStoryboardの画面の大きさの設定を「iPhpne4.7-inch」に設定したためです。

続いて、アプリを実行してみます。

左上にある「▶」ボタンをクリックしてください。これで、シミュレーターが立ち上がったら成功です。

実際にご自身のiPhone(実機)で試す場合は、Appleの有償プログラムへ登録する必要があります。この方法に関しても後日の記事で詳細に説明します。

また、シミュレーターを止める場合は、左上の■ボタンをクリックするか「command + Q」で止まります。

最後に

いかがでしたか?

あたりの出る確率を変更することも可能です。ただ実際のものは、期待値と呼ばれるものをいくついくつまでに設定しないと違法ということになります。

次回は今回のアプリを踏まえて「【超かんたん!】写真集アプリを開発してみよう」について書いていきたいと思います!

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

yuta
知識ゼロからプロのInstagram風画像加工iPhoneアプリを作る 特別クーポン配布中! 詳しくはこちらから! エンジニアでプロデューサー ピーターティールが大好きです! Twitter:Yuta Fujii 質問はお気軽にどうぞ!