みなさんこんにちは。Yuta Fujii(@HofuCamera)です。
今回は「スロットiPhoneアプリ」を開発していきたいと思います。
スタートボタンを押して、3つの数が揃ったら「あたり！」と表示するシンプルなアプリです。
今回は、乱数の使い方や条件分岐などを使って開発していきたいと思います。
このアプリを作成できるようになると、プログラムの基本的な仕組み、乱数の生成、条件分岐についての基礎（今回はif文といいます）を学べます。
また、実際に自分でオリジナルアプリに変更していろいろな応用アプリを作れるようになるかと思いますので、それでは作っていきましょう！
↓Xcodeの環境構築がまだの方はこちら↓
プロジェクトを作成する
プロジェクトの作成方法はこちらに記載されています。
今回はslotとしてプロジェクト名を決めてあげます。
まずはじめに画面中央赤い部分、「Device Orientation」と書かれた箇所があるかと思います。
これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。
今回は縦のみに対応したいと思うので、下の2つのチェックを外します。Portrait」のみにチェックが入っている状態を確認してください。
画面とファイルを整える
それでは次にいきましょう。画面をデザインしていきます。
左側に「Main.storyboard」という箇所があるので、そこをクリックします。これは主に画面の遷移図(どのような順番で画面を表示していくかなど)や、パーツ(ボタンやラベルなど)を直感的に置いていく、全体図を見渡せる箇所になります。
また、Main.storyboardは実際に自分でデザインしていくことができるので、デザインしていきましょう。
それでは、画面を整えていきたいと思います。
まず、赤い部分をクリックして、画面のサイズを変更したいとおもいます。
Sizeと書かれたところで「iPhone4.7-inch」と設定してください。
ここで画面の上にラベルを設置したいと思います。右側からラベルを選択して、ドラッグ＆ドロップで画面の上にのせてください。
次にラベルの幅を適当な幅にしていきます。お好みの幅に設定してください。
今回は「数字が3つ揃う」というアプリを作成していくので、数字を表示するためのラベルが合計3ついることになります。なので、ラベルを3つ画面上に用意してください。
さらに、ボタンを押して、スロットをスタートさせたいのでボタンを画面の上に準備します。これはスロットをスタートさせるボタンとなります。
「Button」とかかれた箇所をダブルクリックしてButtonの文字を変更します。「スタート」と変更してください。
そして、プログラムとパーツを今回もつないでいきたいと思います。右上の赤い部分をクリックしてこの画面に対応しているプログラム(ViewController.m)を開いてください。
いつものように宣言していきましょう。画面上のLableと書かれた場所でcontrolを押しながらプログラムの方へドラッグ＆ドロップをしていきます。
ここで、重要なのは宣言をする場所になります。先頭の箇所に宣言をしてください。
すると名前を書く欄が出てきますので、パーツの名前を決めます。ここではそれぞれ左からlable1,lable2,lable3と命名しました。
さらに、スタートボタンをタップしたときの処理を記述する箇所を作成したいので、ここもプログラムにつなぎます。ボタンを選択した状態でcontrolを押しながらドラッグ＆ドロップをしてみてください。ここではstartと名づけました。
以下のようにできていればOKです。
また、3つの数字が全てそろったら「あたり！」と表示したいので、結果がわかるラベルも設置したいと思います。ラベルを宣言したように、プログラム上で使えるように宣言します。
ラベルをもう1つ画面上へ設置し、タブルクリックをして「結果」と命名します。
そして、それをプログラムとつなぎます。
ここではプログラム上のラベルを「resultLable」としました。
乱数とは？基本的な考え方
ここで、スタートボタンを押したときにラベルに表示する数字をランダムに箱(変数)の中へいれたいと思います。
ランダムに数字をだす方法は以下のとおりとなります。
int label1_box = arc4random() % 10;
ここでは「label1_box」は数字をいれる箱になります。
arc4random()は乱数といってランダムに数字を発生させる際に書く魔法です。
ただ、どの数字からどの数字までの間で数字を出したいのかを決めたくてはなりません。
それをきめるのが
% 10
です。これは、0~9までの数字でランダムに数字を出すという記述になります。
0~10まで出したいときは%11となります。
今回は、ラベル1つに対して箱1つの数字を準備したいと思うので、合計で3つ箱を用意します。
以下のように準備してください。
[bash]
//0から9までの数字をランダムで出して箱に入れていく
int label1_box = arc4random() % 10;
int label2_box = arc4random() % 10;
int label3_box = arc4random() % 10;
[/bash]
また、数字をラベルに反映する際は文字に変換しなければなりません。
その変換方法は
lable1.text = [NSString stringWithFormat:@”%d”,label1_box];
です。
大事なのはこの文章を覚えることではなく、どこを変更しなければならないかということです。
ここで大切な箇所はlabel1_boxという0~9までの数字が入った箱を文字に変換するにはどこにそれを記述しなければならないかということです。
そして、[NSString stringWithFormat:@”%d”,label1_box]; という指示で文字に変わったものをlable1.textへ代入します。
これで1つ反映されることになります。
今回は3つ必要なので3つ以下のように準備します。
[bash]
lable1.text = [NSString stringWithFormat:@”%d”,label1_box];
lable2.text = [NSString stringWithFormat:@”%d”,label2_box];
lable3.text = [NSString stringWithFormat:@”%d”,label3_box];
[/bash]
条件分岐とは
いよいよラストです。
どのような条件下であたりなのか、またははずれなのかを設定していきます。
今回は「3つの数字が全てそろったらあたり」、「それ以外ははずれ」ということにします。
以下のコードに注目してください。順をおって説明していきます。
[bash]
if (label1_box == label2_box && label2_box == label3_box) {
resultLable.text = @”大当たり!!!”;
}else{
resultLable.text = @”はずれ！！！”;
}
[/bash]
まず、もし「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)
はずれと記述してくださいということを書いています。
シミュレーターで確認してみよう
それではシミュレーターで確認してみましょう！
左上にiPhone6sPlusと書かれている場合は、そこをクリックして、iPhone6へと変更します。前半部分でStoryboardの画面の大きさの設定を「iPhpne4.7-inch」に設定したためです。
続いて、アプリを実行してみます。
左上にある「▶」ボタンをクリックしてください。これで、シミュレーターが立ち上がったら成功です。
実際にご自身のiPhone(実機)で試す場合は、Appleの有償プログラムへ登録する必要があります。この方法に関しても後日の記事で詳細に説明します。
また、シミュレーターを止める場合は、左上の■ボタンをクリックするか「command + Q」で止まります。
まとめ：乱数・条件分岐を理解しよう
いかがでしたか？
あたりの出る確率を変更することも可能です。ただ実際のものは、期待値と呼ばれるものをいくついくつまでに設定しないと違法ということになります。
