タグ: アプリ開発

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:ジェスチャーフラッシュ

03：ドル円換算機

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:ジェスチャーフラッシュ

02：カウンター

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

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

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

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

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

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

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

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

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

TEXT : 桑村治良(onTheHammock)

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

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

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

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

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

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

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

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

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

3.アプリの設定

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

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

TEXT : 桑村治良(onTheHammock)

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