[iOSアプリ開発] サイコロアプリ

ボタンをクリックすると2つのサイコロの目が変わるサイコロアプリを作成します。

初心者向けに、サイコロ画像の配置やコードを使った画像の変更方法、画像をランダムに変更するボタンの実装など、基本的な要素から解説します。

目次

概要

この講座で学習する内容
  • サイコロアプリを作成
  • (応用問題)質問アプリを作成→サイコロアプリ作成の理解度を確認するための問題

アプリを作成する過程で、以下の内容を学習できます。

  • Xcodeプロジェクトのクローンの使い方(GitHub)
  • imageViewを使用して画像を配置する方法
  • 画像の拡大方法(Aspect Fill)
  • スポイトを使用して色を選択する方法
  • イメージリテラルの使い方
  • Actionボタンを使って、サイコロ画像を変更する方法
  • サイコロ画像をランダム関数を使って、ランダムに切り替える方法

【参考にした講座】iOS & Swift – The Complete iOS App Development Bootcamp (Udemy)
 (Section4) Swift Programming Basics – Collections, Constants & Variables
(Section5) Swift Programming Basics Challenge

この講座で作成するアプリの概要

[サイコロアプリ]

  • 画面中央にサイコロが左右に2つあります。
  • サイコロの下にあるRollボタンをクリックすると、2つのサイコロ画像がランダムに変更されます。

[質問アプリ]

  • 画面下にあるAskボタンをクリックすると、画面中央にあるボールの画像が変更されます。
  • ボールの画像の中には質問が書かれており、ランダムで質問が表示されます。
サイコロアプリ
質問アプリ
アプリの開発環境
  • Xcode: Version 14.2
  • macOS: Venture: Version 13.2.1
  • iOS: 16.4.1
GitHubからプロジェクトを入手したい方はこちら(サイコロアプリ)
Xcodeのインストールが未了の方はこちら

サイコロアプリの作成

1. GitHubからXcodeプロジェクトをクローンする

STEP
GitHubにアクセスする

以下のURLにアクセスします。

STEP
Xcodeプロジェクトをクローンする

「Code」をクリックし、赤枠で囲まれたURLをコピーします。

Xcodeを起動後、赤枠で囲まれた「Clone an existing project」をクリックします。

先ほどコピーしたURLを赤枠の中にペーストし、Cloneボタンをクリックします。

2. UIの設定

STEP
画面全体をイメージビューで覆う

Main.storyboardをクリックし、ライブラリーからイメージビューを選択し、画面全体をイメージビューで覆います。

次に、image横の三角マークをクリックし、先ほどGitHubからクローンした時に取り込んだ画像の中から「GreenBackGround」を選択します。

Aspect Fillを使って、画像がイメージビュー全体を覆うように拡大した。

画像の拡大方法
  • Aspect Fit: アスペクト比を維持したまま画像全体を表示
  • Scale to Fill: 画像を拡大縮小してイメージビュー全体を覆う(アスペクト比無視)
  • Aspect Fill: 画像のアスペクト比を維持したままイメージビュー全体を覆う
STEP
ロゴ画像、サイコロ画像の設定

これから使用する画像についても、GitHubからプロジェクトをクローンした時に、Assets.xcassetsフォルダに格納されているため、imageから画像名を選択するだけで良い。

  • ライブラリーからイメージビューを選択し、画面上に配置する。
  • imageからDiceeのロゴ画像を選択する。
  • 1個目のサイコロ画像も同様に設定する。
  • 2個目のサイコロ画像の設定については、
    1個目のサイコロ画像をoptionキーを押しながらドラッグすればコピーできる。
STEP
Rollボタンの設定
  • ライブラリーからボタンを選択し、画面上に配置する。
  • フォントを「System30.0」、Foregroundカラーを「White Color」に設定する。
  • RollボタンのBackgroundカラーをサイコロ画像と同色に設定する。
画面上に表示されている画像の色を選択する方法
  • 「Background」の中から「Custom」を選択する。
  • ポップアップされるColorsからスポイトを選択する。
  • 同じ色にしたい画像の色をクリックする。
  • 画像の色が、同じ色に設定される。

3. UIとコードのリンク

STEP
アシスタントビューを表示する
STEP
サイコロ画像とコードのリンク

サイコロ画像をCtrlキーをクリックしながら、アシスタントビューにドラッグする。
NameをdiceImageViewに設定し、サイコロ画像のプロパティにアクセスできるようにする。

STEP
イメージリテラルを使ってサイコロ画像を設定する
イメージリテラル

画像ビューの値として設定したい実際のリテラル画像を定義することができる。

  1. #imageLiteral( と書くと、イメージが提案されることがわかります。
  2. ハイライトされたら、それをダブルクリックする。
  3. 選択可能な画像の一覧が表示される。
  4. 一覧から画像ビューに設定したい画像を選択する
diceImageView1.image = 
    #imageLiteral(
STEP
アプリを実行する。

アプリを実行すると、viewDidLoad()内の命令が実行される。すなわち、左側のサイコロ画像(diceImageView1)が、設定した6のサイコロ画像に変更される。

STEP
右側のサイコロ画像も同様にコードを作成する。

4. Actionボタンをクリックしてサイコロ画像を変更する

4-1. 指定した画像に変更する

STEP
Rollボタンとコードをリンク

RollボタンをCtrlキーをクリックしながら、アシスタントビューにドラッグする。
NameをrollButtonPressedに設定する。

STEP
Rollボタンクリックでサイコロ画像変更

Rollボタンをクリックしたとき、サイコロ画像が変更されるようにコードを作成する。

例として、左側のサイコロが3、右側のサイコロが5に変更してみる。
アプリ実行後は、左側のサイコロが6、右側のサイコロが2

Rollボタンをクリック後は、左側のサイコロが3、右側のサイコロが5

4-2. ランダムに画像を変更する

STEP
配列を使用して、前回と同じサイコロ画像を表示する

配列の中の値を選択する場合、一番最初の値は「0」を選択、以降1…5を選択することになる。
→すなわち、サイコロの表示されている数字から1引いた数値を選択する必要がある。

STEP
変数を使って、Rollボタンをクリックしたときに、サイコロの画像を変更する。

左のサイコロ画像は、Rollボタンをクリックするごとに、1つづつ増加、一方、右のサイコロ画像は、Rollボタンをクリックするごとに、1つづつ減少するようにしてみる。

STEP
(完成)Rollボタンをクリックしたときに、サイコロの画像をランダムに変更する。

今度は、サイコロ画像をランダムに変更するように「Int.random(in: )」を使用した。
また、サイコロ画像を格納する箱diceArrayを使用し、コードの重複をなくした。
これで、このセクションのアプリ作成は完了です。

ランダムな値を生成するコード
  • diceArray.Int.random(in: 0…5) :0から5の整数をランダムに生成
  • diceArray.randomElement() : diceArrayの中にある要素をランダムに選択

補講

ランダムな値の生成

ランダムな値の生成
//Random Int

Int.random(in: lower ... upper)
説明

上限と下限を含む、上限と下限の間の整数をランダムに生成する。

//Random Int

Int.random(in: lower ..< upper)
説明

上限を含まず、下限を含む、上限と下限の間の整数をランダムに生成する。

//Random Int

Int.random(in: lower <.. upper)
説明

上限を含み、下限を含まない、上限と下限の間の整数をランダムに生成する。

//Random Bool

Bool.random()
説明

true(真)、またはfalse(偽)をランダムに生成する。

//Random Element from Array

array.randomElement()
説明

配列からランダムな要素を生成する。

//Randomise Array

array.shuffle()
説明

配列の中の項目がランダムに位置を変える。

ランダムな値の生成について、理解度を確認してみましょう。

アルファベット(a〜z)の全ての文字(26文字)を含むArrayを作成し、ランダムに6文字を選んで、ランダムな6文字のパスワードを作成するコードを完成させてください。

func exercise() {
    
    let alphabet = ["a","b","c","d","e",
        "f","g","h","i","j","k","l","m",
        "n","o","p","q","r","s","t","u",
        "v","w","x","y","z"]
    
    print(password)
}

SIGABRTのエラー対処法

アプリがクラッシュしたときのエラー対処法について解説します。

エラー対処法
  • デバッグエリアの一番上までスクロールして、その原因が何であるかを確認する
  • その原因を確認するときは、アプリ名や特定のインスタンスなど、アプリ固有の部分を除外して、メッセージを見る
  • そのメッセージをそのままコピーしてGoogleにペーストし、検索する
  • 他の人も同じ問題に遭遇していることがわかり、この問題を解決するための多くの人の説明と解決策を見る

「Thread 1: signal SIGABRT」のエラー対処法

「Thread 1: signal SIGABRT」のエラーが出たときを例にして、実際に行った対処法を画像を見ながら解説します。

STEP
デバッグエリアの一番上までスクロールして、その原因が何であるかを確認する

デバッグエリアの一番上までスクロールして、記載されている内容を確認した。

STEP
その原因を確認するときは、アプリ名や特定のインスタンスなど、アプリ固有の部分を除外して、メッセージを見る

今回の例では、「this class is not key value coding-compliant for the key]がエラーの原因であることがt特定できた。

STEP
そのメッセージをそのままコピーしてGoogleにペーストし、検索する
STEP
他の人も同じ問題に遭遇していることがわかり、この問題を解決するための多くの人の説明と解決策を見る

解決策が記載されており、StoryboardからIBOutletやIBActionの接続に問題があることが確認できた。

https://qiita.com/Atsushi_/items/f7930dd00a2c2ea464cd
STEP
原因の特定

以前はdiceImageView1と記載していたが、コードの中でそれを間違ってdiceImageViewOneに変更したことがわかった。

STEP
エラーの解消
  • エラーの原因になったサイコロ画像を右クリックして、この接続を解除する。
  • 円からスタートして、リンクさせたいサイコロ画像に向けて再リンクする。
  • 「diceImageViewOne」をキーボードのコントロールキーを押しながらクリックし、「Refactor」→「Rename」と進む。
  • そしてこの場合、Main.storyboardを含むこの単語が使われている場所をすべて拾ってくれます。
    名前を「diceImageViewOne」→「diceImageView1」変更すると、この名前が使われているすべての場所で変更が行われます。
  • アプリを実行してもクラッシュしないようになりました。

(応用問題)質問アプリの作成

質問アプリは、サイコロアプリ作成の理解度を確認するための問題です。サイコロアプリと同じ手順で作成していきますので、確認していきましょう。

GitHubからプロジェクトを入手したい方はこちら(質問アプリ)

1. UIの設定

STEP
プロジェクトの確認

プロジェクトの中に何が含まれているのか確認します。

画像セット、アプリアイコンがAssets.xcassetsに格納されています。

STEP
アプリ背景色の変更

FileNavigatorでMain.storyboardを開きます。

属性インスペクターでBackgroundを「System Cyan Color」に変更します。

STEP
その他のUIをCanvasへ追加

以下のUI要素を追加し、フォントスタイル・サイズを好みに合わせて調整します。

  • ラベルの追加:「Ask Me Anything」
  • ImageViewの追加:オブジェクトライブラリからImageViewを画面中央に配置
  • Buttonの追加:オブジェクトライブラリからButton「Ask」を画面下部に追加

2. UIとコードのリンク

STEP
Assistant Editorを開いて、デザインとコードファイルを並べて表示します。

画面をコードを書いて操作するために、環境を整えます。

STEP

ImageViewをIBOutletにリンクする

imageViewの内容(プロパティ)をコードにより操作できるようにします。

STEP
AskボタンをIBActionにリンクする

Askボタンが押された時の動作を、コードで記載できるようにします。

  • ボールの画像は全部で5つあり、Assets.xcassetsフォルダにあります。
  • ボールの名前、画像、画像の中に書かれている文字の関係は次のとおりです。
ball1

YES

ball2

NO

ball3

ASK AGAIN LATER

ball4

THE ANSWER IS YES

ball5

I HAVE NO IDEA

  • Image Literalを使用して、ボールの画像を配列ballArrayに格納します。
  • Askボタンを押した時に、ボールの画像「ball3」が表示されるように、コードを書きます。

3. Actionボタンをクリックしてボール画像を変更する

  • Askボタンを押すたびにボールの画像をランダムに表示するコード書きます。
class ViewController: UIViewController {
    
    let ballArray = [
        #imageLiteral(resourceName: "ball1"), 
        #imageLiteral(resourceName: "ball2"), 
        #imageLiteral(resourceName: "ball3"), 
        #imageLiteral(resourceName: "ball4"), 
        #imageLiteral(resourceName: "ball5")]

    @IBOutlet weak var imageView: UIImageView!
    
    @IBAction func askButtonPressed(_ sender: Any) {
        imageView.image = ballArray.randomElement()
    }
    
}

画像がランダムに変更されることが確認できれば完成です。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次