エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

占いアプリづくりで基本の5ステップを学ぼう~SwiftからはじめるiOSアプリ開発:その4【初心者向けアプリ開発3分tips】

タグ : iOS, RainbowApps, Swift, アプリ開発, 初心者 公開

 
スクール講師がアドバイス!初心者のためのアプリ開発3分tips

アプリ開発スクール『RainbowApps

日本で初めて、プログラミング受講料の無料提供を始めたアプリ開発スクール。iPhone、Android、Unity、HTML5、AWSコースを展開しており、受講用のMac完備、初心者・未経験者から受講OK。特徴は、大手IT企業からベンチャーまで、受講後の就職・転職もサポートしている点だ。全国で教室を開いているほか、オンライン講座も展開中。詳しい情報はコチラ

こんにちは、日本最大のアプリスクール『RainbowApps』で、主にiOSアプリ開発の指導を担当している我妻幸長と申します。本連載では、iOS、Android、Unityなどのアプリ開発について、初心者向けの内容を『RainbowApps』講師陣が分かりやすく解説していきます。

今回はSwiftではじめるiOSアプリ開発の第4回目です。Swiftを用いて、簡単な占いアプリを実際に作製してみたいと思います。

Xcodeの最新バージョンであるXcode6をまだインストールしていない方は、第1回の記事を参照してインストールしておいてください。また、Xcodeの概要とプロジェクトの作成などに関しては第2回の記事を参照してください。Interface Builderの使い方に関しては、第3回の記事を参考にしてください。

今回は、以下の構成でオリジナルアプリ開発のための最初のステップを解説をしていきたいと思います。

【1】ユーザーインターフェースの作製
【2】コードの下準備
【3】乱数の発生
【4】if-else文による分岐処理
【5】結果の表示

今回もソースコードの記述はSwiftで行います。Xcodeのバージョンは、現時点で最新版の6.1を前提にします。Swiftの文法はバージョンにより多少異なりますのでご注意ください。

【1】ユーザーインターフェースの作成

ユーザーインターフェースとは、ユーザーと機器が情報のやり取りをする境界のことです。

iOS端末の場合は、大半の情報のやり取りを画面を通しておこないますので、画面構成のことをユーザーインターフェ-スと呼ぶ場合が多いです。

前回の記事では、Interface Builderを用いてのユーザーインターフェース構築について説明しました。今回も同様にして、ユーザーインターフェースの構築を行います。

まず、以下の設定でプロジェクトを立ち上げてください。プロジェクトの立ち上げ方は、前回までの記事を参考にしてください。

設定
Application Single View Applicationを選択
Product Name FortuneTellingと記述
Origanization ご自分の名前を記述してください
Origanization Identifier com.rainbowapps
(個人や組織を識別できるものであれば何でもよい)
Language Swift
Devices iPhone
Core Data チェックを外してください

プロジェクト起動後、Main.storyboardを選択してUse Auto Layoutのチェックを外し、DisableSize Classesを選択してください。

Main.storyboard

なお、Auto Layoutは画面サイズ別のレイアウトを構築するのにとても便利な機能ですが、少々難易度が高いため後の回で取り扱いたいと思います。

画面上に、Labelを3つとButton1つを、下図のように縦に並べて配置してください。

前回に行いましたが、画面右下のライブラリペインからドラッグアンドドロップで配置することができます。

画面右下のライブラリペインからドラッグアンドドロップで配置

一番上のLabelには、どうぶつ占いと表示させてください。

画面右上のインスペクタで、表示させる文章を変更することができます。

Labelには、どうぶつ占いと表示

上から2番目のLabelには、動物の絵文字を表示させます。表示領域を少し広めにして、フォントサイズを100px程度に調整しておいてください。

とりあえず、表示する文章を空欄にしておきましょう。

フォントサイズを100px程度に調整

上から3番目のLabelには、占い結果の文章を表示させます。

このラベルも空欄にしておきましょう。Buttonには、“占う”と表示させましょう。

各Labelやボタンの領域は、広げたり狭めたりして各自調整してみてください。領域が狭すぎると、Labelに表示する文章が途中で途切れてしまいます。

以上で、ユーザーインターフェイスの作製は終了です。この後は、コードの方をSwiftで記述していきましょう。

【2】コードの下準備

ViewController.swiftを選択し、以下のコードを記述してください。ハイライトされている箇所が追加箇所です。

//で始まる行はコメントで、実行はされませんので記述しなくても大丈夫です。

import UIKit

class ViewController: UIViewController {

 //動物の絵文字を表示させるラベルの変数
 @IBOutlet var animalLabel: UILabel!
 //占い結果を表示させるラベルの定数
 @IBOutlet var resultLabel: UILabel!

 //占いのロジックを記述するメソッド
 @IBAction func tellFortune() {
 }

 override func viewDidLoad() {
  super.viewDidLoad()
  // Do any additional setup after loading the view, typically from a nib.
 }

 override func didReceiveMemoryWarning() {
  super.didReceiveMemoryWarning()
  // Dispose of any resources that can be recreated.
 }
}

animalLabelは、Storyboard上の動物の絵文字を表示させるラベルに対応させます。また、resultLabelはStoryboard上の占い結果を表示させるラベルに対応させます。

@IBOutletと記述することで、インターフェースビルダー上のオブジェクトと接続可能になります。この際、UILabelと記述し、animalLabel及びresultLabelがUILabelの型を持っていることを明記することが必要になります。

varはanimalLabel及びresultLabelが変数であることを意味します。また、tellFortuneメソッドの中には、この後占い結果を表示させるロジックを記述します。@IBOutletと記述することで、インターフェースビルダー上のボタンと接続可能になります。

次に、これらをインターフェースビルダー上のオブジェクトと接続しましょう。

実は接続方法は何通りかあるのですが、今回は前回と少し異なる方法で接続を行います。Main.storyboardを選択し、View Controller Sceneの中からViewControllerを選択してください。

そして、右上のインスペクターで、Connection Inspectorを選択してください。

右上のインスペクターで、Connection Inspectorを選択

Outletsの箇所にanimalLabel及びresultLabelが表示されていますので、それらの右側の白丸をドラッグアンドドロップし、画面上の対応するLabelと接続してください。

なお、2つのLabelともに空白が表示されていますので、接続時にご注意ください。接続が完了すると、白丸が黒丸に変化し、接続済みの表示がされます。

animalLabel及びresultLabelの右側の白丸をド ラッグアンドドロップし、画面上の対応するLabelと接続

Recieved Actionsの箇所にtellFortuneメソッドが表示されていますので、これの右側の白丸をドラッグアンドドロップし、画面上のButtonと接続してください。

tellFortuneメソッドの右側の白丸をドラッグアンドドロップし、画面上のButtonと接続

接続時にいくつか選択肢が出ますので、“Touch Up Inside”を選択してください。

これにより、ボタンに指を置いて離したタイミングで、tellFortuneメソッドが呼び出されることになります。

【3】乱数の発生

本格的な占いアプリには根拠となる複雑なロジックが必要ですが、今回はシンプルに5通りの結果を乱数で判別するのみのアプリにします。サイコロを振っているのと同じです。

例えば0から5までの乱数を取得するためには、以下のように記述します。

arc4random_uniform(6)

この場合、0以上6未満の整数を、ランダムに取得できます。

【4】if-else文による分岐処理

乱数の値によって、異なる処理を行うロジックの記述を行います。

分岐処理のために、今回はif-else文を用います。ViewController.mを選択し、以下の記述を追加してください。

import UIKit

class ViewController: UIViewController {
 //動物の絵文字を表示させるラベルの変数
 @IBOutlet var animalLabel: UILabel!
 //占い結果を表示させるラベルの変数
 @IBOutlet var resultLabel: UILabel!

 //占いのロジックを記述するメソッド
 @IBAction func tellFortune() {
  //乱数の発生
  let randNum = Int(arc4random_uniform(6))
  //分岐
  if randNum == 0 {
   animalLabel.text = “(『いぬ』で変換した絵文字)”
   resultLabel.text = “大吉だワン!”
  }else if(randNum == 1){
   animalLabel.text = “(『ねこ』で変換した絵文字)”
   resultLabel.text = “中吉だニャー!”
  }else if(randNum == 2){
   animalLabel.text = “(『うま』で変換した絵文字)”
   resultLabel.text = “吉だヒヒーン!”
  }else if(randNum == 3){
   animalLabel.text = “(『うし』で変換した絵文字)”
   resultLabel.text = “末吉だモー!”
  }else if(randNum == 4){
   animalLabel.text = “(『ぞう』で変換した絵文字)”
   resultLabel.text = “凶だゾウ!”
  }else{
   animalLabel.text = “(『とら』で変換した絵文字)”
   resultLabel.text = “大凶だガオー!”
  }
 }

 override func viewDidLoad() {
  super.viewDidLoad()
  // Do any additional setup after loading the view, typically from a nib.
 }

 override func didReceiveMemoryWarning() {
  super.didReceiveMemoryWarning()
  // Dispose of any resources that can be recreated.
 }
}

if-else文を用いることにより、条件によって異なる処理を実行することが可能です。

randNumには0から5までの値がランダムに入りますが、この値がいくつかによってanimalLabelおよびresultLabelに異なる文字が表示されることになります。

なお、絵文字には機種依存性があるため、ブラウザの種類によってはこの記事に表示できません。各自、Xcode上で『いぬ』などの文字を変換し、動物の絵文字を表示させてみてください。

Xcode上で『いぬ』などの文字を変換し、動物の絵文字を表示

【5】結果の表示

それでは、実行して結果を表示させてみましょう。

画面左上において、シミュレータでiPhone5sを選択し、実行ボタンをクリックしてください。シミュレータが起動し、iPhoneの画面が表示されます。

占いボタンをタップすると、動物の絵文字と占い結果が表示されれば完成です。

占いボタンをタップし、動物の絵文字と占い結果が表示されれば完成

シンプルなアプリですが、さまざまなアプリのベースにもなりますので、ぜひカスタマイズにもトライしてみてくださいね。

結果がうまく表示されない方は、コードが正しく書けているか、Interface Builderとの接続が正しいかどうかを確認してみてください。

今回は乱数とif-else文を用いて、占いアプリの作製を行いました。if-else文などを用いた分岐処理と、後の回で解説するループ処理を組み合わせることでさまざまなロジックが実装できます。プログラミングの基礎として非常に大事ですので、たくさんコードを書いてぜひ慣れておいてください。

>> いよいよver1.0がリリース!SwiftからはじめるiOSアプリ開発:その1 はこちら
>> Xcodeの使い方を基礎から学ぼう~SwiftからはじめるiOSアプリ開発:その2 はこちら
>> Interface Builderでインターフェースを作ろう~SwiftからはじめるiOSアプリ開発:その3 はこちら

【講師プロフィール】
RainbowApps講師
我妻幸長

1977年生まれ。茨城県出身。東北大学大学院博士課程物理学専攻を修了。大学の研究員や半導体関連企業の技術職をを経てiOSアプリ開発者に。2012年より、開発の傍らRainbowAppsの講師として主にiOSアプリ開発の指導を開始。2014年にレインボーアップス株式会社の講師兼教育事業部責任者に就任。

受講生への直接指導の他に、iOSカリキュラムを設計開発、企業研修も担当。これまで累計500人以上の受講生に、アプリ開発の指導を行う。開発者としての代表作は、『ちんあなごのうた 南の海の音楽祭』など。

【著者からひと言】 iOS、Android、Unityなどのアプリ開発を本格的に学びたい方は、ぜひRainbowAppsにお越し下さい。プログラミング初心者の方から経験者の方まで、レベルに合わせた対応が可能です。

■ 詳しくは公式HP:『RainbowApps




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア プログラマー Web スキルアップ ソーシャル アプリ シリコンバレー キャリア プログラミング Android 起業 えふしん スマートフォン アプリ開発 SIer 技術者 UI btrax Webサービス クラウド Apple スペシャリスト CTO Twitter Brandon K. Hill ギーク 英語 村上福之 Facebook Google デザイン IoT SNS ツイキャス 世良耕太 モイめし IT 30代 採用 赤松洋介 コーディング 20代 UX 勉強会 プロジェクトマネジメント Ruby ITイベント Webエンジニア 中島聡 ビッグデータ 法林浩之 ウエアラブル iOS 五十嵐悠紀 LINE ドワンゴ ひがやすを ロボット 受託開発 モノづくり IT業界 コミュニケーション イノベーション ハードウエア MAKERS tips ゲーム 女性 ソーシャルゲーム Webアプリ SI インフラ iPhone 女性技術者 高須正和 マイクロソフト 研究者 UI/UX トヨタ 自動車 ノウハウ チームラボ 息抜き システム ソニー プラットフォーム Java メイカームーブメント オープンソース 和田卓人 エンジン グローバル 開発者 教育 イベント サイバーエージェント ソフトウェア 女子会 コミュニティ メーカー 家入一真 スーパーギーク 増井雄一郎 GitHub 人工知能 IPA 40代 日産 テスト駆動開発 ソフトウエア 音楽 TDD ニュース モバイル PHP TechLION

タグ一覧を見る