ジェスチャーフラッシュ:RainbowApps iPhoneアプリマスターコース講座紹介6

2012/11/29

06:ジェスチャーフラッシュ

Gesture Flash
RainbowApps iPhoneアプリマスターコースの第6講では、ジェスチャーフラッシュアプリの制作を行います。このアプリはスワイプ、回転、ピンチなどiPhoneのスクリーン上で行うタッチジェスチャーを出題し、ユーザーが実際にそのジェスチャーをしていくゲームです。問題はランダムで30問あり、ユーザーは30のタッチジェスチャーを完了するまでのタイムを競います。アプリ上ではハイスコアが1〜3位まで表示されます。

ジェスチャーフラッシュ

ジェスチャーフラッシュアプリは、第5講で制作したクイズアプリと同じくスタート画面、ゲーム画面、スコア画面で構成されています。画面遷移のためのSegueなどの使い方は第5講と同じです。Storyboardを使って3つのView Controllerを制作し、その上に必要なラベルや画像などを配置します。これはタイムを競うゲームなので、ゲーム画面の上部には経過時間を表示するラベルを設置します。結果画面には30のジェスチャーをクリアした所要時間が表示され、スタート画面には1〜3位までのハイスコアが表示されます。

ハイスコアはiPhoneの電源をオフにしても、アプリが終了しても保存されるものなので、アプリ自体にスコアデータを保存させるNSUserDefaultsを使用します。NSUserDefaultsはint、double、BOOL、NSDataなどの型の変数を使用することができますが、このアプリではハイスコアタイムを記録させるのでdouble型の変数を使用します。ユーザーがゲームを終えると結果画面に遷移し、そのタイムがベスト3に入っていればNSUserDefaultsで記録し、スタート画面では保存されているNSUserDefaultsデータを呼びます。

Gesture Flash

ユーザーがゲーム内で行うジェスチャーは8つです。
ゲーム画面では上の画像をランダムで表示させます。UIGestureRecognizerクラスのメソッドを使用し、ユーザーが画面に表示されたジェスチャーと同じジェスチャーをすれば1問クリアとなります。このアプリではこれを30回繰り返します。

ゲームのプレイ時間を計測するのにはNSTimerを使用します。ゲームスタート時点の時間を取得し、ユーザーが30問目のジェスチャーをクリアして、結果画面に遷移するときの時間が取得できれば経過時間を出すことができます。また画面上のタイマーは0.1秒ごとにラベルの数字を0.1カウントアップさせることで表示させます。

ジェスチャーフラッシュ

スマートフォンアプリは、ユーザーのタッチ操作によって直感的に扱えることが魅力です。このタッチジェスチャーを使いこなすことで、UXの表現も広がるでしょう。また第5講に引き続きゲームアプリを制作しましたが、第6講ではタイマーの扱い方を学びます。タイマーによる制御や進行はゲームアプリの基本となる技術です。

TEXT : 桑村治良(onTheHammock)



Rainbow Apps iPhoneアプリマスターコース講座紹介ブログ
講座紹介1:初めてのiOSアプリ
講座紹介2:カウンター
講座紹介3:ドル円換算機
講座紹介4:手拍子アプリ
講座紹介5:クイズアプリ
講座紹介6:ジェスチャーフラッシュ


 

クイズアプリ:RainbowApps iPhoneアプリマスターコース講座紹介5

2012/11/26

05:クイズアプリ

Counter
RainbowApps iPhoneアプリマスターコースの第5講では、クイズアプリの制作を行います。このアプリはランダムで10問の問題を出題し、ユーザーがそれに○か×で答えるゲームです。スコア画面では正解率と、得点に応じた評価画像が表示されます。
第5講のポイントはStoryboardを使った画面遷移の方法を学ぶことです。このアプリはスタート画面、ゲーム本編、結果画面がそれぞれ3つのViewControllerで管理します。スタート画面に設置されたボタンを押すと、ゲーム画面に遷移し、ユーザーが10問の問題に答えた時点でスコア画面に遷移します。スコア画面に設置されたボタンを押すとスタート画面へと遷移します。

クイズアプリ

上の画像がスタート画面→ゲーム画面→結果画面→スタート画面を繋いだStoryboardとなります。スタートボタンからゲーム画面への遷移はStoryboard上だけで設定できます。SegueでボタンからゲームをコントロールするViewControllerをつなぐだけです。結果画面からスタート画面への遷移もボタンをSegueでボタンからゲームをスタート画面を管理するViewControllerをつなぐだけで行えます。しかしゲーム画面から結果画面へと遷移するためには”ユーザーが問題に10問答える”という条件が必要となります。その遷移設定はStoryboard Segueで遷移のためのIdentifierを設定し、遷移するためのコードを書く必要があります。

この講義では3つのViewControllerクラスと、問題をCSVファイルを読み込み初期化して、ゲーム画面を管理するViewControllerに受け渡す独自クラスを制作します。
スタート画面を管理するViewControllerクラスには何も記述するコードはありません。Storyboard上でラベル、テキストビュー、ボタンを設置し、ゲーム画面の設定までおこなっているからです。

ゲーム画面を管理するViewControllerクラスでは、独自クラスから問題を受け取り可変配列を扱えるNSMutableArrayに格納します。この可変配列を使って、10問のなかで同じ問題を出すことなくランダムに出題する仕組みを作ります。問題が10問出題されたらperformSegueWithIdentifier:メソッドを使って、結果画面へと遷移するコードを書きます。この時にStoryboard上で設定したIdentifierが必要となります。またprepareForSegue:メソッドを使用し、ゲーム画面で取得した正答率を結果画面へと受け渡します。

結果画面を管理するViewControllerでは、正答率をゲームViewControllerから参照するpropertyに対応した変数を宣言し、正答率とその正答率に応じて画像を表示するコードを記述します。

クイズアプリ
この講座ではStoryboarを使った画面遷移と、CSVファイルの読み込み、そしてランダムに問題を取り出すテクニックを学べます。また、このクイズアプリを応用すれば、簡単にオリジナルアプリの作成をすることができるでしょう。Segueの使い方をマスターすることで複数の画面を使ったアプリの制作も行えるようになります。

TEXT : 桑村治良(onTheHammock)

Rainbow Apps iPhoneアプリマスターコース講座紹介ブログ
講座紹介1:初めてのiOSアプリ
講座紹介2:カウンター
講座紹介3:ドル円換算機
講座紹介4:手拍子アプリ
講座紹介5:クイズアプリ
講座紹介6:ジェスチャーフラッシュ


 

手拍子アプリ:RainbowApps iPhoneアプリマスターコース講座紹介4

2012/11/15

04:手拍子アプリ

手拍子

RainbowApps iPhoneアプリマスターコースの第4講では、手拍子アプリの制作を行います。これはPickerというスロットのような選択メニューからカウント数を選び、ボタンを押すとそのカウント数だけ手拍子を繰り返すというものです。アプリとしてはあまり実用性は感じられないかもしれませんが、この講座ではオブジェクト指向プログラミング基礎概念や、クラス、インスタンス、メソッドの概念を学びます。これからObjective-cでアプリ開発をおこなっていく上では重要な講座です。

手拍子

オブジェクト指向型プログラミングを理解するためにこの講座では手拍子サウンドの初期化や再生、リピート処理を担う独自クラスの制作を行います。

オブジェクティブ指向

さて、なぜ独自のクラスを制作する必要があるのでしょうか?
ここで制作するような画面も遷移しないシンプルなアプリであれば、音声ファイルをコントロールする独立したクラスを作成する必要性はないかもしれません。インターフェイスを管理するView Controllerクラスに音声ファイルを再生する処理を書いてもいいと思います。
しかし、インターフェイス画面が切り替わるような複雑なアプリになってくると、各View Controllerクラスでいちいち同じ手順で音声ファイルを再生するためのコードを記述するのは面倒です。また、プログラムを管理する上でも機能を独立させておくほうがメンテナンスや更新を効率的に行えます。
このように目的や機能でクラスを作り、それが関連し合いながら全体を構成するプログラムを作っていくことをオブジェクト指向型プログラミングといいます。

例えば会社などに置き換えるとわかりやすいかもしれません。
個人の範囲で仕事をしていくのなら、個人事業主として営業・制作・販売・経理などを行っていくことができます。
しかし、事業の規模が大きくなってくると、営業部門、制作部門、販売部門、経理部門など機能ごとに分かれた部署が出来ます。もし経理の部署がなく、営業部門、制作部門、販売部門にそれぞれ経理機能を持たせたとしましょう。そうすると個々の経理担当者によって経理機能のクオリティは大きく左右されます。また、各経理担当者が知識やノウハウを共有するのも難しいかもしれません。独立した経理部署があれば、その機能に特化した知識やノウハウが蓄積でき、安定した経理機能を各々の部署に提供できます。

この会社の例えで言うところの部署にあたるのが、オブジェクティブ指向型プログラミングのクラスと呼ばれるものになります。

クラス、インスタンス

今回の手拍子アプリのように、エンジニアが独自のクラスを作成することも可能ですが、Objective-Cには既に知識やノウハウが蓄積された多くのクラスが用意されています。それが、これまでのアプリ制作でも使用してきたUILabelやUIButton、NSStringといったクラスになります。iOSアプリのプログラミングはこうした様々なクラスを利用し、自分でもクラスを制作して行っていきます。

そしてこのクラスを利用して、実際にプログラミングで使用するオブジェクトをインスタンスと呼びます。会社の経理部門でも実際に仕事をするのはその部署のAさんやBさんですよね。同じような作業をしているかもしれませんが、AさんとBさんがやっている仕事は異なります。このようにクラスに属して、個々の働きや役割を持つものがインスタンスとなります。

このインスタンスを使って具体的な操作をしていくことをメソッドと呼びますが、あらかじめObjective-Cに用意されているクラスには、メソッドやプロパティ(インスタンスに付加できる特性)も用意されています。
例えば第3講で使用した- (BOOL)textFieldShouldReturn:(UITextField *)textField;はUITextFieldというクラスに用意された、”キーボードのReturnを押したときに処理をする”というメソッドでした。
この第4講ではUIPickerViewクラスのメソッドを使ってピッカーの設定などを行っていきます。このような用意されたメソッドを使う上でも、Objective-c独特のメソッドの記述方法を理解しておくことは大事なことです。

手拍子

こうしたメソッドにはインスタンスに対しての処理を記述するインスタンスメソッド(-で始めるメソッド)と、クラスに対しての処理を記述するクラスメソッド(+で始まるメソッド)があります。
この講座では音声ファイルを再生するための独自クラスを制作しますが、View Controller上で独自クラスを呼び初期化処理を行うときに+で始まるクラスメソッドを使用します。

フレームワーク

さて、一口に音を再生するといっても、これはすごく大変な処理です。
そのためのプログラミングをイチから組んでいくとなると、膨大な時間が掛かり豊富な知識も必要になります。
そこで利用することになるのがフレームワークであり、音の再生や描画処理など汎用的な機能をまとめて提供しているものとなります。
今回、音を再生するためにはAudioToolBoxというフレームワークを使用しますが、そのためにはプロジェクトメニューからフレームワークの取り込み処理を行う必要があります。
しかし、なぜそのような便利な機能が最初から備わっていないのでしょうか?
今度はパソコンに例えてみましょう。購入したばかりのパソコンには基本的なソフトしかインストールされていません。この基本的な状態からデザイナーはデザインソフトをインストールし、営業マンはOfficeなどのビジネスソフトをインストールしたりして自分に必要な機能を付加していきます。使わないのであれば便利であってもIllustratorやPhotoshopなどのソフトは必要ないですよね。
フレームワークも同じで、Xcodeでプロジェクトを立ち上げたときには必要最小限のフレームワークしか使用されていません。そこから開発していくアプリの必要に応じて様々なフレームワークを取り込んでいきます。
フレームワークの利用はアプリ制作をしていく上でなくてはならないものであり、地図アプリやツイッター・Facebook投稿、さらには広告の設置などにも必要になります。

手拍子

第4講ではオブジェクティブ指向型プログラミングの概念だけでなく、while文やfor文を使った繰り返し処理、そして配列処理などプログラミングを行っていく上で頻繁に使用するテクニックも登場します。制作するアプリは非常にシンプルなものですが、その中身は非常に濃いものです。

繰り返しになりますが、第4講では独自クラスの作成、フレームワークの取り込み、UIPickerViewを利用を通じてObjective-cの基本となるクラス、インスタンス、メソッドの概念を学びます。Objective-cの概念や考え方は複雑であり、簡単に理解できるものではありません。ただ、このアプリマスターコースでアプリ制作を続けていくことによって少しずつ理解を深めていけるはずです。

最後により理解を深めたい方のためにリンクを紹介しておきます。
Objective-cの概念やオブジェクティブ指向型プログラミングについては様々な解説書がありますが、アップル社でも開発者向けのドキュメント(日本語です!!)を用意し、無料で配布しています。
そのものズバリ「Objective-Cの概念」なんてドキュメントもあるのでより理解を深めたい方は読まれることをおすすめします。
また、フレームワークの使い方などが書かれた日本語のプログラミングガイドなども用意されています。
iOS関連日本語ドキュメント https://developer.apple.com/jp/devcenter/ios/library/japanese.html

TEXT : 桑村治良(onTheHammock)

Rainbow Apps iPhoneアプリマスターコース講座紹介ブログ
講座紹介1:初めてのiOSアプリ
講座紹介2:カウンター
講座紹介3:ドル円換算機
講座紹介4:手拍子アプリ
講座紹介5:クイズアプリ
講座紹介6:ジェスチャーフラッシュ


 

ドル円換算機:RainbowApps iPhoneアプリマスターコース講座紹介3

2012/11/11

03:ドル円換算機

Counter

RainbowApps iPhoneアプリマスターコースの第3講では、ドル円換算機アプリの制作を行います。ユーザーがインプットした入力値を計算して出力値を出す、このフローを理解しプログラミングしていくことでメソッドの作り方、使い方などを学ぶことができます。

ドル円換算機アプリは、ユーザーがテキストフィールド(Text Field)に金額を入力し、キーボードの「Return」を押すと換算結果が表示されます。また、セグメンテッドコントロール(Segmented Control)により「ドル→円」換算と「円→ドル」換算の切り替えを行います。

まずStoryBoardでは動的なラベルを4つ配置します。

ドル円換算機

レートを表示するラベルの値はコード上で設定します。このアプリでは80.5円ですが、その時の通貨レートによって任意で変更することができます。
“円”と”ドル”の通貨ラベルは換算の切り替えを行った時に変化します。
結果ラベルには最初は0.00と入力しておきます。

さらにText FieldオブジェクトとSegmented Controlオブジェクトを配置します。

ドル円換算機

第2講座で制作したカウンターアプリは整数を扱うint型の変数を使用しましたが、今回は少数を扱うことができるdouble型の変数を使い換算を行います。

また「ドル→円」換算と「円→ドル」換算の切り替えをbool型の変数を使って、条件設定を行います。例えばbool型変数がTRUEなら「ドル→円」換算、FALSEなら「円→ドル」換算という具合です。この切り替えによりラベルに表示する通貨が変化します。

ドル円換算機

このアプリでは下記の3つのメソッドをコーディングします。
1.「円→ドル」「ドル→円」換算メソッド
2.通貨換算切り替えIBAction型メソッド
3.UITextFieldクラスのメソッド

1.「円→ドル」「ドル→円」換算メソッド

「円→ドル」換算が選ばれているときは、入力された円をレートで割った金額を計算し、その金額を結果ラベルに表示します。
【例】入力値:100(円) レート:1ドル80.5円 計算結果:1.24ドル
【計算式】100(円) / 80.5(レート) = 1.24(ドル)
※プログラム上では割り算の計算式は / (スラッシュ)を使用します。
「ドル→円」が選ばれているときは、入力されたドルにレートを掛けた金額を計算し、その金額を結果ラベルに表示します。
【例】入力値:100(ドル) レート:1ドル80.5円 計算結果:8050円
【計算式】100(ドル) * 80.5(レート) = 8050(円)
※プログラム上では掛け算の計算式は * (アスタリスク)を使用します。

2.通貨換算切り替えIBAction型メソッド

Segmented Controlの切り替えに対して、通貨ラベルを変化させます。また「円→ドル」「ドル→円」換算メソッドを使って、切り替えられた時の換算結果を結果ラベルに表示させます。
UISegmentedControlにはselectedSegmentIndexというプロパティが用意されており、セグメントの切り替えを管理することができます。

3.UITextFieldクラスの通知メソッド

テキストフィールドに金額を入力し、キーボードの「Return」が押されたときに呼ばれる処理です。
これは- (BOOL)textFieldShouldReturn:(UITextField *)textField;というUITextFieldクラスのデリゲート通知を使ったメソッドになります。
ユーザーが数字を入力しReturnを押すと、その数字をdouble型に変換し、「円→ドル」「ドル→円」換算メソッドを呼び出して結果を表示させます。

最後にStoryBoardでViewControllerで宣言したUILabel、UITextField、UISegmentedControlにひも付けします。またIBAction型メソッドもセグメンテッドコントロールにひも付けします。

これでドル円換算機の完成です。

ドル円換算機

この講座のポイントはメソッドの使い方を覚えることです。今回使用したUITextFieldクラスのメソッドのように、用意されたクラスメソッドも多くあるので、その使い方をよく理解しましょう。
iOSに用意された様々なクラスの機能を組み合わせることによってより高度なアプリを制作することができます。

TEXT : 桑村治良(onTheHammock)

Rainbow Apps iPhoneアプリマスターコース講座紹介ブログ
講座紹介1:初めてのiOSアプリ
講座紹介2:カウンター
講座紹介3:ドル円換算機
講座紹介4:手拍子アプリ
講座紹介5:クイズアプリ
講座紹介6:ジェスチャーフラッシュ


 

カウンター:RainbowApps iPhoneアプリマスターコース講座紹介2

2012/11/06

02:カウンター

Counter

RainbowApps iPhoneアプリマスターコースの第2講では、カウンターアプリを制作しながら、変数やインスタンス、UIオブジェクトなどの概念を学びます。また条件式や計算式を使用することによって、アプリを動かす仕組みを理解します。

カウンターアプリは「プラスボタン」を押すと画面上の数字がカウントアップされ、「マイナスボタン」を押すと数字がカウントダウンします。また「リセットボタン」を押すと数字は「0」になります。

Counter

この講座で理解したいポイントは数字をデータとして扱う場合はintやfloat、doubleといった型、文字列を扱う場合はNSString、ラベルはUILabel、ボタンはUIButtonというように、データの型を宣言し、コーディングしていくということです。

基本的なインターフェイス上のアクションメソッドは次の3つです。
1.「プラスボタン」が押されたらint型の変数に1を足します。
2.「マイナスボタン」が押されたらint型の変数から1を引きます。
3.「カウンターボタン」が押されたらint型の変数に0を代入します。

このint型の変数を画面上に表示するには文字列として扱わなくてはいけません。
なのでint型の変数をNSSTring型に変換し、画面上に配置したラベルに表示させます。

StoryBoardではLabelオブジェクトとButtonオブジェクトを3つ配置します。
各ボタンには対応するアクションメソッドを設定し、ラベルにはコード上で宣言しているUILabelをひも付けします。

Counter

以上が基本的なカウンターの仕組みとなりますが、この講座で制作する「カウンター」アプリはマイナスの数字は表示しないという工夫を施しています。
そこでint型の変数が0より大きいときだけ「マイナスボタン」が押されたときのメソッドを実行するという、if文を使った条件を設定します。

条件設定を複雑にすると数字によってラベルの文字の色を変化することも出来ますよ。

Counter

「カウンター」アプリの仕組みはシンプルなものですが、実用的なツールとして使用できるものです。プログラム上でデータを扱う基礎的な概念を理解し計算式や条件式の使い方を学べば、実際に使える簡単なアプリを作ることができます。

TEXT : 桑村治良(onTheHammock)

Rainbow Apps iPhoneアプリマスターコース講座紹介ブログ
講座紹介1:初めてのiOSアプリ
講座紹介2:カウンター
講座紹介3:ドル円換算機
講座紹介4:手拍子アプリ
講座紹介5:クイズアプリ
講座紹介6:ジェスチャーフラッシュ


 

初めてのiOSアプリ:RainbowApps iPhoneアプリマスターコース講座紹介1

2012/11/04

一昨日(2012.11.3)、藤沢でRainbowApps湘南校が開校しました。
その湘南校のiPhoneアプリマスターコースの講師を務めさせていただくことになったので、このブログで講座の内容の紹介をしていきたいと思います。
受講生の皆さん、また今後受講される方の復習・予習のポイントになれば幸いです。

01:My Very First App -初めてのiOSアプリ-

MyFirstApp

RainbowApps iPhoneアプリマスターコースの第1講では、iOSアプリの開発を行っていくために必要なXcodeの基礎的な使い方を学びます。そのために画面上のボタンを押すと表示されている文字が消え、もう一度押すと文字が表れるというシンプルなアプリを制作します。

この講座でのポイントは、下記の3つです。
1.UI設計ツール「StoryBoard」を使った画面設計
2.記述したコードとUIオブジェクトのひも付け
3.アプリの設定

1.UI設計ツール「StoryBoard」を使った画面設計

Xcodeで新規プロジェクトを立ち上げたら、StoryBoardを使って、画像、ボタン、テキストを表示するためのラベルといったオブジェクトを配置していきます。

StoryBoard

2.記述したコードとUIオブジェクトのひも付け

次にUIViewControllerファイルにコードを記述します。
ここではインスタンスの宣言や、ボタンを押したときのアクションとして、if文を使い、”もしラベルが隠れていなかったら、ラベルを隠す”、そうでない場合は”ラベルを隠さない”というメソッドを書きます。
そしてStoryBoard上に配置したオブジェクトに記述したインスタンスとメソッドをひも付けします。

StoryBoard

3.アプリの設定

アイコンやiPhone画面に表示される名前、アプリが縦向き(Portrait)か横向き(Landscape)かを設定します。

MyFirstApp

これで「My Very First App」の完成です。
非常にシンプルですが、このアプリを制作することでXcodeの基礎的な使い方を学ぶことができます。

TEXT : 桑村治良(onTheHammock)

Rainbow Apps iPhoneアプリマスターコース講座紹介ブログ
講座紹介1:初めてのiOSアプリ
講座紹介2:カウンター
講座紹介3:ドル円換算機
講座紹介4:手拍子アプリ
講座紹介5:クイズアプリ
講座紹介6:ジェスチャーフラッシュ


 

onTheHammockの桑村がRainbowApps 湘南校の講師をします。

2012/11/01

RainbowApps湘南校
onTheHammockの桑村が、2011年11月3日(土)に開校するRainbowApps湘南校iPhoneアプリマスターコースの講師をすることが決定しました。
RainbowAppsのiPhoneマスターコースは、これまで受講生2000名以上の実績を持つ日本最大のiOS(iPhone/iPad)アプリ開発講座となります。講座には本格的な20のサンプルアプリが用意されており、全10回の講義で10個のアプリを制作します。
これまでRainbowAppsの受講生の7割以上はアプリ開発の初心者ですが、卒業生のなかからは続々とヒットアプリが生まれています。

RainbowApps湘南校は神奈川県では横浜校に次いで2番目に開校されるスクールとなります。
RainbowApps湘南校の詳細は下記のサイトをご覧下さい。

RainbowApps湘南校
http://school.rainbowapps.com/shonan