群馬県地域経済発展のためのプロジェクト | iPhoneアプリ開発講座 | コワーキングスペース | エンジニアの就業支援 | 企業誘致 | 地域活性化

おみくじぐんまちゃん on Swift

はじめに

2回目のアプリ開発となります。このアプリでは主に「配列」と「乱数」を学びます。

2015.11.12 Xcode7.1 & iOS9.1 対応版サンプルコード追加

ダウンロード

サンプルプログラム

完成したアプリのサンプルコードです。ZIPで圧縮したファイルです。解凍してご利用ください。

  • zipおみくじぐんまちゃん on Swift(ZIP/885kB)[Xcode6.1.1 & iOS8.1 対応]
  • zipおみくじぐんまちゃん on Swift(ZIP/885kB)[Xcode7.1 & iOS9.1 対応]
  • 素材データ

    新規プロジェクトの作成

    Xcodeを起動した後「新規プロジェクト」を作成します。

    File > New > Project

    timer_01

    「Single View Application」を選択して「Next」をクリック

    timer_02

    次の通り入力してを選択して「Next」をクリック

    • Product Name:「プロジェクト名」を指定(これがフォルダ名になります)
      今回のアプリは「omikuji」とします
    • Organization Name:「組織名」を指定(個人の場合は氏名)
    • Company Identifier:「会社識別名」を指定(ドメイン名を逆にしたものが推奨されます)
    • Language:「Swift」を選択
    • Devices:「iPhone」を選択
    • Use Core Data:チェックなし

    timer_03

    ソースコードなどの変更履歴を残しておく場合は「Git」にチェックを入れる

    本講座では、特に必要ないので「チェックなし」で「Create」をクリック

    timer_04

    プロジェクトの設定

    利用するiPhone画面の「向き」を設定します

    今回のアプリは「縦向き」のみとします。

    • Portrait:縦
    • Upside Down:上下反転の縦
    • Landscape Left:左回転の横
    • Landscape Right:右回転の横

    timer_05

    ステータスバーの表示・非表示を設定します

    今回のアプリはステータスバーを「非表示」にします。この設定はつい忘れがちなので注意しましょう。

    • Generalタブをクリック >「Status Bar Style」の「Hide status bar」をチェックする。

    timer_06

    • Infoタブをクリック >「Status bar is initially hidden」を「YES」にする
    • 「+」をクリックして「View controller-based status bar appearance」の項目を追加して「NO」にする

    timer_07

    使用するイメージの設定

    使用するベクター画像のインポート

    画像はこちらからダウンロードしてください
    PDF画像(一式):pdf_image

    メニューのFile > Add Files to “Omikuji”を選択する

    omikuji_01

    取り込む画像を選択して「Copy items if needed」をチェックして「Add」をクリックする
    ※チェックを入れると「コピーした画像」を使用することになります。忘れずに!

    omikuji_03

    画像がプロジェクトに取り込まれました。

    ベクター画像を使用できるように設定する

    ベクター画像を使用するには「Images.xcassets」の設定が必要です。

    Images.xcassetsを選択する。「+」をクリックして「New Image Set」を選択する。

    名前を「daikichi」に変更する。「Attributes Inspector」タブをクリックする。「Types」は「Vectors」を選択する。

    omikuji_02

    「daikichi.pdf」を「点線の四角」にドラッグ&ドロップする。※クリックすると画面が変わってしまうので注意!

    他のベクター画像も同様に設定する

    • daikichi
    • chukichi
    • shokichi
    • kichi
    • suekichi
    • kyo
    • daikyo
    • start

    omikuji_04

    画面のデザイン&レイアウト

    Image View(start) を配置する

    「Main.storybord」を選択する。「Object Library」をクリックして「Image View」をドラッグ&ドロップ。

    omikuji_05

    「Image View」が配置されたら、「Image View」を選択した状態で、「Attributes Inspector」タブをクリックする。「image」は「start」を選択する。「Mode」は「Aspect Fit」を選択する。

    omikuji_06

    Image View のレイアウトの制約を設定する

    今回、Image View(startの画像)は、違う端末の画面サイズの場合でも、画面いっぱいに表示するようにします。

    「Image View」を選択した状態で、右下の「Pin」をクリックすると「Add New Constraints」ダイアログが表示される。

    上下左右の「赤い点線」をクリックして全て「赤い線」にする。上下の値を「0」にする。左右の値を「-20」にする。「Add 4 Constraints」をクリックする。

    • 上:0
    • 左:-20
    • 右:-20
    • 下:0

    omikuji_07

    エラーが出る場合は「Resolve Auto Layout Issue」の「Update Frames」をクリックすると、エラーが消えます。

    Image View(daikichi) を配置する

    Image View(start) と全く同じ場所に、Image View(daikichi)を配置します。

    omikuji_08

    Image View のレイアウトの制約を設定する

    Image View(start) と全く同じに、Image View(daikichi)に制約をつけます。

    omikuji_09

    Document Outline を表示させる

    Viewが同じ位置に重なっていると、下層のオブジェクトが選択できません。

    左下の「Document Outline」を表示させます。プレビューの他に、オブジェクトの一覧がでてきます。
    ここで、下層のオブジェクトを選択する事が出来ます。

    オブジェクトの順番は「一番下」にあるものが「最前面」に配置されます

    omikuji_10

    button(おみくじを引く) を配置する

    「Object Library」をクリックして「Button」をドラッグ&ドロップ。

    omikuji_50

    「Button」を選択した状態で、「Attributes Inspector」タブをクリックする。「Title」を「おみくじを引く」と入力。「Font」の▲をクリックして「System 24.0」のフォントサイズにする。

    omikuji_51

    button(おみくじを引く) のレイアウトの制約を設定する

    「おみくじを引く」ボタンを選択した状態で、「Align」をクリックする。「Horizontal Center in Container」にチェックを入れる。「Add 1 Constraint」をクリックする。

    omikuji_52

    「おみくじを引く」ボタンを選択した状態で、「Pin」をクリックする。

    「下」の「赤い点線」をクリックして「赤い線」にする。▼をクリックして「View(current distance = xxx)」をチェック。「下」の値を「80」にする。

    「add 1 Constraint」をクリックする。

    omikuji_53

    エラーが出ているので、下のアイコンの右から2番目「Resolve Auto Layout Issue」を表示させる。「Update Frames」をクリックすると、エラーが消えます。

    button(やり直し) を配置する

    「おみくじを引く」ボタンをと同様の手順で配置する。

    omikuji_54

    button(おみくじを引く) のレイアウトの制約を設定する

    「おみくじを引く」ボタンをと同様の制約をつける。

    「Document Outline」にて、下記と同じに設定されているか確認します。間違いであれば「制約」は「deleteキー」で削除できるので、もう一度やり直しましょう。

    omikuji_55

    Assistant editor の2画面で作業する

    右上にある蝶ネクタイのマークの「Assistant editor」ボタンをクリックする。2画面になるので、左は「Main.storybord」、右は「ViewController.swift」を表示させる。

    omikuji_60

    「赤わく」の部分にコードを書きます。分かりやすいように、コードを書く行に「改行」を少し入れましょう。

    Image View(start)の関連付け「IBOutlet接続」

    「Document Outline」の中の「start」を「control」キーを押しながらドラッグすると、青い線が出ますので、右画面の任意の箇所でマウスのボタンを離します。

    omikuji_61

    出てきたダイアログの「Name」に「startImageView」と入力して、「Connect」ボタンをクリックします。

    omikuji_62

    「@IBOutlet weak var startImageView: UIImageView!」とコードが書かれました。左側にある「黒まる」は関連づけができている印です。(※関連づけされていないと「白まる」となります)

    その他のUIオブジェクトの関連付け「IBOutlet接続」

    他のUIオブジェクトも「start」と同様の手順で関連づけます。

    • startImageView
    • kekkaImageView
    • omikujiButton
    • yarinaoshiButton

    omikuji_63

    UIオブジェクトの関連付け「IBAction接続」

    「Document Outline」の中の「おみくじを引く」を「control」キーを押しながらドラッグすると、青い線が出ますので、右画面の任意の箇所でマウスのボタンを離します。

    omikuji_64

    出てきたダイアログの「Connection」を「Action」を選択します。「Name」に「pushedOmikuji」と入力して、「Connect」ボタンをクリックします。

    omikuji_65

    「@IBAction func pushedOmikuji(sender: AnyObject) {}」とコードが書かれました。これを「メソッド」と呼びます。この後、おみくじを引くボタンを押したときの処理をメソッドの{}の中に書いて行きます。

    やり直しボタンも同様に設定します。

    • pushedOmikuji
    • pushedYarinaoshi

    omikuji_66

    プログラムコードを書く

    シミュレーターでの確認

    ビルドしてシミュレーターで確認してみましょう。画像とボタンが重なって表示されてしまっています。はじめに「結果画像」と「やり直しボタン」は、非表示にしておかなくてはいけません。

    omikuji_67

    アプリを起動した直後の処理

    コードの下の方に「viewDidLoad」というのがあります。

    viewDidLoadはビューの読み込みが終了した時に呼ばれるメソッドです。簡単に言うと「アプリが起動して一番始め」に動く命令です。

    「viewDidLoad」の{}の中に、下記のように書きます。「.hidden」は非表示をあらわすプロパティです。「true」または「false」を代入します。

    コードが書けたら、ビルドしてシミュレーターで確認してみましょう。

    「おみくじを引く」ボタンをタップした時の処理

    次は「おみくじを引く」ボタンをタップした時の処理を「@IBAction func pushedOmikuji(sender: AnyObject) 」の{}の中に書きます。

    先ほどと逆に「true」と「false」を代入します。

    コードが書けたら、ビルドしてシミュレーターで確認してみましょう。
    「おみくじを引く」ボタンをタップすると、スタート画像が消えて「大吉」画像が表示されますでしょうか?

    「やり直し」ボタンをタップした時の処理

    今度は「やり直し」ボタンをタップした時の処理を「@IBAction func pushedYarinaoshi(sender: AnyObject) 」の{}の中に書きます。

    「viewDidLoad」の中と同様に「true」と「false」を代入します。

    コードが書けたら、ビルドしてシミュレーターで確認してみましょう。
    「おみくじを引く」ボタンと「やり直し」ボタンを交互にタップできますでしょうか?

    結果画像に「凶」を表示してみる

    「.image」はviewに表示する画像を設定するプロパティです。

    「@IBAction func pushedOmikuji(sender: AnyObject)」の{}の中に「kekkaImageView.image = UIImage(named: “kyo”)」と書きます。

    「大吉」だったのが「凶」になりました。

    omikuji_68

    おみくじの画像の名前の「配列」を作る

    現在、おみくじの画像の名前は「daikichi」「kyo」など文字列です。管理しやすくするため「0」「5」とかの「番地」をくっつけてやります。ここでは「配列」というものを使います。

    「omikujis」という配列を作りました。配列は1番地ではなく「0番地」からはじまるので、注意しましょう!

    番地 0 1 2 3 4 5 6
    要素 “daikichi” “chukichi” “shokichi” “kichi” “suekichi” “kyo” “daikyo”

    「配列」の中の「要素」を取り出す。

    「omikujis[3]」と書くと、3番地の要素「”kichi”」が取り出せます。

    ビルドしてシミュレーターで確認してみましょう。「おみくじを引く」ボタンをタップすると、今度は「吉」画像が表示されましたでしょうか?

    「omikujis[3]」に、他のの数字「0〜6」をいれて、シミュレーターで確認してみましょう。

    乱数を発生させる「arc4random関数」

    「omikujis[n]」の「n」に「0〜6」の数字が入れば、おみくじの画像が変わるのがわかりました。であれば「n」に「0〜6」までの数字がランダムで入れば、おみくじの完成です。

    「arc4random関数」を使って乱数を取得します。数字は6ではなく「7」と書きます。

    「omikujis[3]」だった箇所を「omikujis[n]」とします。

    これで、ひとまずおみくじアプリが完成しました。ただ少しそっけない感じなので、もうちょっと「演出」を加えてやります。

    背景色を変更してみる「.backgroundColor」

    おみくじの結果は全部で「7つ」あるので、結果によって背景色を変更してみましょう。

    まずは背景色を「赤」にしてみます。「.backgroundColor」は背景色を設定するプロパティです。「UIColor」クラスは色を管理するクラスです。

    「kekkaImageView.backgroundColor = UIColor.redColor()」と書きます。

    omikuji_69

    色の割合を指定して背景色を変更してみる

    今度は色の割合を指定して背景色を「青」に設定してみましょう。下記の通り変更してみましょう。

    • red: 赤の割合(0.0〜1.0)
    • green: 緑の割合(0.0〜1.0)
    • blue: 青の割合(0.0〜1.0)
    • alpha: 透明度の割合(0.0〜1.0)※0.0が完全に透明、1.0が不透明

    omikuji_70

    「switch文」を使って、結果によって背景色を変更する

    「switch文」を使うと、値に応じた処理内容を記述することができます。値のパターンが多い場合、if文を使うより見通しよく書けます。

    それぞれの「case」に背景色を変更する命令を入れます。ちなみに「/255.0」としているのは、一般的なRGB色を表す値「0〜255」を、UIColorで使用する値「0.0〜1.0」に直す為です。

    omikuji_83

    アニメーション「beginAnimations:context:」

    結果画面がゆっくりと浮き上がってくるようなアニメーションを設定してみます。コンテキスト(なんらかの制御情報)を作って、その間に設定されたviewの変更はアニメーションされるようになります。

    「.alpha」は透明度をあらわすプロパティです。

    「@IBAction func pushedOmikuji(sender: AnyObject)」メソッドの中の最後に書きます。

    プログラムの完成

    下記がプログラムの全文です。動作確認をしておかしいようであれば、間違いがないか確認しましょう。
    これで「おみくじぐんまちゃん」アプリの完成です。お疲れ様でした。

    • Facebook
    • Hatena
    • twitter
    • Google+
    PAGETOP
    Copyright © 2013 - 2018 Cross-i Project BrainFarm Inc. All Rights Reserved.