大きくする 標準 小さくする

ブログ 2008/12

rss

第4回 初めてのプログラミング[iPhoneアプリゲームのおすすめ検索サイトならApp4U]

投稿日時:2008/12/26(金) 00:00

第4回 初めてのプログラミング

今回からいよいよプログラミングを行います。最初のプログラミングはInterface Builder上で行います。

前回のおさらい

第3回では,Interface Builderを使った画面の作り方を学びました。実際に画面(View)に配置したパーツを再確認してみましょう。

Viewに配置されたパーツと名前

Viewに配置されたパーツと名前

  • ユーザに何らかの文字を入力させるための「テキストフィールド」
  • ユーザにいくつかの選択肢の中からひとつを選ばせるための「セグメンテッドコントロール」
  • 画面上に文字を表示するための「ラベル」

これらのパーツを配置しただけの状態では,アプリは何の役にも立ちません。そこでいよいよ「役に立つアプリ」にするために,プログラミングの作業へと入っていきます。

操作と処理を確認する

まず,ユーザがパーツに対してどのような操作を行うかと,プログラムにどのような処理(動作)をさせるかについて確認しておきましょう。

このアプリでは,ユーザが入力した金額と選択した割引率から,割引後の金額を表示するという機能を実現します。ユーザーが行う操作は,次の2つです。

  • 金額を入力する
  • 割引率を選択(変更)する

そして,これらをもとにプログラムが行う処理は

  • 割引後の金額を計算して表示する

となります。

プログラムを動かすためには,何らかの操作が必要です。プログラムは,あらかじめ決められた処理を忠実にこなすことしかできません。そこで,プログラムが処理を行うきっかけを,ユーザが行う操作の中から決めておく必要があります。組み合わせは複数あっても構いませんが,とりあえずここでは「割引率を選択(変更)する」というきっかけで「割引後の金額を計算して表示する」という動作の組み合わせにしておきます。

アウトレットとアクション

パーツとそれぞれの役割,さらにプログラムの処理が決まったら,実際にプログラミングをしていきます。その前に,2つの新しい言葉を覚えておいてください。

アウトレット

アウトレットは,画面上のパーツから情報を取り出したり,パーツに情報を与えたりするために必要なものです。ここで言うアウトレットは,英語のOutletを辞書で引くと出てくる「コンセント」の意味です。画面上に配置したパーツからは,コンセントにさしこむための線をのばすことができます。そこで,プログラムにコンセントの穴を設置して,そこにパーツの線を差し込むことによって,プログラムとパーツとの間で情報をやりとりできるようになります。

アクション

アクションは,プログラムの処理のことです。アクションに書かれた内容に従って処理を行うのはプログラムですが,その処理を開始するためのなんらかのきっかけが必要です。「このボタンが押されたらこの処理をする」や「ここに文字が入力されたらこの処理をする」というように,プログラムの処理とそのきっかけをセットで考えておく必要があります。

プログラムの作成

それではプログラムを作っていきましょう。最初のプログラミングはInterface Builder上で行います。

アウトレットの作成

まずはアウトレットを作成します。このアプリでプログラムが必要としているパーツ内の情報は,ユーザが入力した金額と,ユーザが選択した割引率の2つです。さらに,それらをもとにプログラム内で計算した割引後の金額を画面に表示するため,プログラムから画面上にある結果を表示するためのパーツに割引後の金額を入れてあげる必要があります。つまり,情報を取り出す側と入れる側,合計3つのアウトレットが必要となります。

アウトレット,すなわちコンセントの穴はプログラムに設置し,そこにパーツをつなげると説明しました。さて,プログラムとはどこにあるのでしょうか?

File's Ownerはプログラムの実体を表すアイコン

File's Ownerはプログラムの実体を表すアイコン

実は,Interface Builderにプログラムの実体がアイコンで表示されています。パーツを配置した「View」のウインドウではない,もうひとつのウインドウを見てください。ここに「File's Owner」というアイコンがあります。これがプログラムの実体です。すなわち,このFile's Ownerにアウトレットを作成し,パーツを接続していきます。

File's Ownerを選択し,インスペクタの最も右にあるIdentityタブを選択します。インスペクタが表示されていない場合は,メニューの[Tools]→[Inspector]を選択すると表示されます。

インスペクタの中ほどに「Class Outlets」という項目があります。ここにアウトレットの一覧が表示されますが,まだ何もありません。「+」が付いているアイコンを押して,アウトレットを追加してみましょう。

+ボタンでアウトレットを追加

+ボタンでアウトレットを追加

まず1回押すと「myOutlet1」というアウトレットが作成されました。この名前は好きなものに変えて構いません。そのアウトレットが何のために使われるものなのかを表すような名前にするとよいでしょう。まず1つ目のアウトレットではユーザが入力した割引前の金額を取り出すので,元値ということで「motone」という名前を付けておきます。

さらに2つ,アウトレットを追加しましょう。ひとつはユーザが選択した割引率を取り出すためのものなので「waribiki」としておきます。最後の1つは計算した結果をパーツに入れるためのものですので「kekka」としておきましょう。

名前を付けたアウトレット

名前を付けたアウトレット

これでプログラムに3つのアウトレットが作成されました。アウトレットに付けた名前と,それぞれを使ってやりとりする情報をまとめておきます。

  • motone:割引前の金額
  • waribiki:割引率
  • kekka:割引後の金額

アクションの作成

次はアクションです。アウトレットと同様,インスペクタで作成します。先ほどの Class Outlets の上にある「Class Actions」がそれです。

プログラムの動作は「割引後の金額を計算して表示する」の1つなので,アクションの数は1つです。Class Actionsにある+をクリックして,1つだけアクションを追加します。

+ボタンでアクションを追加

+ボタンでアクションを追加

「myAction1: 」というアクションが作成されました。アウトレットのときと違って,名前の後に「:」(コロン)が付いています。とりあえずこの名前は変更しないでおきましょう。もちろん,コロンも付けたままにしておいてください。

パーツへの接続

続いて,作成したアウトレットにパーツを接続します。File's Ownerを右クリックしてみてください。出てきたウインドウに,先ほど作成したアウトレットとアクションを見つけることができます。それ以外のものもありますが,ここでは先ほど追加した3つのアウトレットと1つのアクションに注目してください。

File's Ownerのアウトレットとアクション

File's Ownerのアウトレットとアクション

まずはアウトレットと各パーツを接続します。それぞれのアウトレット名の右側にある丸い部分(マウスカーソルを乗せると+に変わります)を,Viewウインドウの対応するパーツにむかってドラッグしてみてください。すると,丸い部分から線が伸びていき,接続するパーツのところで青い枠が表示されます。

アウトレットにパーツを接続する

アウトレットにパーツを接続する

パーツの上でドラッグを離すと,アウトレットにパーツが接続され,アウトレットの名前の右側に接続されたパーツの名前が表示されます。こうして3つのパーツをそれぞれの対応するアウトレットに接続していきましょう。接続を間違えた場合は,接続先が表示されている部分にある×を押して接続を解除することができます。1つのアウトレットに複数のパーツをつないでしまった場合も,×を押して接続を解除してください。

アクションの設定もここで行います。どのパーツのどのようなきっかけに対して,アクションを起こすかを設定します。アウトレットの接続と同様,「myAction1: 」の右にある丸い部分を,アクションを起こすきっかけとしたいパーツに向かってドラッグして下さい。ここでは,セグメンテッドコントロールに向かって線をひっぱります。

アクションにパーツを接続する

アクションにパーツを接続する

パーツの上でドラッグを離すと,アクションを起こすきっかけを選ぶことができます。ここでは「割引率を変更する」をきっかけとしたいので,一覧の中から「Value Changed」(値が変わった)を選択します。

アクションを起こすきっかけを選択する

アクションを起こすきっかけを選択する


ファイルを生成する

プログラミングをするとは言ったものの,ここまで一度もプログラミングらしいことをしていないことを気にしている方もいらっしゃることでしょう。ですが,心配ありません。アウトレットを作成し,それらをパーツとつなげたことで,すでにいくつかのプログラムを書いてしまっているのです。では実際に,これらの作業でどのようなプログラムが書かれたのかを確認してみましょう。

[File]→[Write Class Files...]でファイルに書き出す

[File]→[Write Class Files...]でファイルに書き出す

File's Ownerが選択された状態で,Interface Builderのメニューから[File]→[Write Class Files...]を選択してください。Save ウインドウが表示されたら,「Save as: 」に表示されているファイル名を確認し(BargainSaleViewController.m),そのまま「Save」をクリックして保存してください。

すると,すでにファイルがあるのでどうするかを確認するウインドウが表示されますので,「Replace」を押してファイルを上書き保存しましょう。

ここまでの作業がプログラムのファイルとして書き出されました。Xcodeに戻り,先ほど保存したファイル (BargainSaleViewController.m)を選択してみましょう。右側のウインドウにプログラムが表示され,アクションとして設定した「myAction1: 」を見つけることができるでしょう。

書き出されたファイルの中身(BargainSaleViewController.m)

書き出されたファイルの中身(BargainSaleViewController.m)

アウトレットは,ヘッダファイルにあります。同じ名前で,.mのかわりに.hとなっているファイル(BargainSaleViewController.h)を選択して中身を確認してください。「motone」「waribiki」「kekka」の3つのアウトレットと,さらに先ほど.mファイルにもあった「myAction1: 」が記述されているはずです。そしてここに見られるプログラミング言語が,Objective-Cです。

あとはアクションの中身,すなわち実際に割引後の金額を計算するためのプログラムを書けば,見事にバーゲン教師の完成です。アウトレットからパーツの中身を取り出し,アクションの中で計算を行い,結果を再度アウトレットを通してパーツに入れる。これがプログラムの基本的な流れとなります。

アクションを書く

では,いよいよアクションを記述しましょう。先ほど開いた「myAction1:」のある.mファイル(BargainSaleViewController.m)を選択して開き,「myAction1:」の部分に以下のプログラムを記述してください。

- (IBAction)myAction1:(id)sender { int kakaku = [[motone text] intValue]; switch([waribiki selectedSegmentIndex]){ case 0: kakaku = kakaku * (1.f - 0.2f); break; case 1: kakaku = kakaku * (1.f - 0.3f); break; case 2: kakaku = kakaku * (1.f - 0.4f); break; case 3: kakaku = kakaku * (1.f - 0.5f); break; default: break; } [kekka setText:[NSString stringWithFormat:@"%d", kakaku]]; }

書き終えたら「ビルドして進行」をクリックします。保存を促すダイアログが表示されたら「すべてを保存」をクリックしてください。ビルドが完了すると,iPhoneシミュレータが起動してアプリが動きます。

テキストフィールドに適当な金額を入力して,セグメンテッドコントロールの割引率を変更してみてください。下のラベルに割引後の金額が表示されれば,大成功です。割引率を変更すると,割引後の金額も変わります。

割引率を変更したタイミングで結果が更新される

割引率を変更したタイミングで結果が更新される

Cocoa Touch がもたらすもの

ここまでを振り返ってみると,実際にプログラムらしいものを書いたのは,最後に埋めた「アクションの中身」だけです。このアクションは,アプリの機能や性能を決める大切な部分でもあります。逆に言えば,アクションの中身を書く以外の部分は,すべてのアプリ開発で共通して行う作業であると言えます。

Interface Builderを使って楽にアプリの枠組みを作ってしまえば,開発者はアクションの中身を書くことにより多くの時間を費やすことができます。これがCocoa Touchを使う最大のメリットなのです。

次回は

次回は,アクションに記述したObjective-Cプログラムの動作と,Cocoa Touchのパーツにアクセスする様々な方法について学びます。プログラミングの要素が増え,少しずつ難易度も上がっていきますが,あせらずに順序よく身につけていきましょう。

ソフトバンク、iPhoneアプリ開発会社のAPPLIYAに出資[iPhoneアプリゲームのおすすめ検索サイトならApp4U]

投稿日時:2008/12/25(木) 04:06

ソフトバンク、iPhoneアプリを開発するアップトーキョーとAPPLIYAに出資

 

 ソフトバンクは12月24日、「iPhone 3G」向けアプリを開発するアップトーキョーとAPPLIYAが発行する第三者割当増資を引き受けることに合意したと発表した。

 アップトーキョーは2008年12月8日に設立されたウィズの小会社。ウィズといえば、「たまごっち」や「デジタルモンスター」「プリモプエル」などを手がけた横井昭裕氏が社長を務める玩具やキャラクター、アニメーション、携帯コンテンツ、ゲームなどの企画会社だ。アップトーキョーの名義で配信されているiPhoneアプリはまだないようだが、今後登場するものと予想される。

 APPLIYAは、ペットのベストショットが撮影できるという触れ込みの「犬カメラ」「猫カメラ」や、iPhoneを振ってシャンパンシャワー気分が味わえる「iChampagne 2008」などをリリースしているソフトウェアベンダーだ。設立は2007年4月12日。犬や猫をモチーフにした電子書籍なども配信している。

 今回の第三者割当増資での引受株式数は、アップトーキョーが114株、APPLIYAも114株で、1株あたりの発行額は26万3157円。出資総額はそれぞれ2999万9898円で、株式取得後の保有株式の割合は36.3%となる。

第3回 アプリ開発の第一歩[iPhoneアプリゲームのおすすめ検索サイトならApp4U]

投稿日時:2008/12/11(木) 00:00

第3回 アプリ開発の第一歩

今回から,実際にiPhoneアプリを開発する手順や方法について解説します。

Xcodeプロジェクトの作成

いよいよ,Xcodeを使ってiPhoneアプリを作成します。Xcodeを起動し,プロジェクトを作成しましょう。Xcodeのメニューから「ファイル」→「新規プロジェクト...」を選択します。

テンプレートの中から「View-Based Application」を選択

テンプレートの中から「View-Based Application」を選択

第2回と同様,ここでは「View-Based Application」を選びます。今回はApp Storeでも配布されている,価格を入れて割引率を 選ぶと自動的に割引後の金額を表示するアプリ「バーゲン教師」を作りますので,プロジェクト名は「BargainSale」としました。もちろん他の好きな名前でもかまいません。アプリ名はこれとは別に設定しますが,開発中はひとまずこの名前を使います。

保存が完了すると,選択したテンプレートを元にファイルが生成されます。まずはどのようなファイルがあるかを確認していきましょう。

クラスファイル

クラスファイル

クラスファイル

クラスファイルは,プログラムを書くためのファイルです。左側のClassesフォルダの中にある.hや.mがそれに該当します。とくに.hのファイルを「ヘッダファイル」または単に「ヘッダ」と呼びます。ボタンが押されたり,ユーザが入力したりした結果をiPhoneで処理するためのプログラムをここに書きます。使用する言語はObjective-Cです。プログラムを書くファイルなので,プログラムの「ソースコード」を書くファイルという意味から,ソースファイルとも呼びます。

XIBファイル

XIBファイルは,アプリの画面を構成するパーツの配置や大きさなどを記録したファイルです。Resourcesフォルダにある.xibがそれです。Cocoa Touchを使ったアプリ開発では,XIBファイルを編集することがスタート地点となります。XIBファイルの編集には,ドラッグアンドドロップの操作で簡単にパーツを画面上に配置できる「Interface Builder」を使います。

XIBファイルとInterface Builder

XIBファイルとInterface Builder

リソースファイル

これらの他に,アプリを作るうえで必要なファイルをリソースファイルと呼びます。本来クラスファイル以外のものはすべてリソースファイルにあたるのですが,XIBファイルはリソースファイルの中でも特にアプリ開発において重要な役目をするので,便宜的にXIBファイルはそのままの名前で呼ぶことにしています。

リソースファイルはその名のとおり,アプリが動作する上で必要なリソース,すなわち資源としての機能を持つファイルのことです。初歩的なアプリでは特に意識する必要はありませんが,高機能で複雑なアプリの開発においては多くのリソースファイルを管理することになる場合があります。

他にもいくつかのファイルがありますが,まずはこれらのファイルを使って開発を進めていきます。

Interface Builder

XIBファイルは,Xcodeに付属の「Interface Builder」というアプリケーションを使って編集します。Xcode上でXIBファイルをダブルクリックすることで,自動的にInterface Builderが起動してファイルを表示します。

ファイルの構成を表すウィンドウと,「View」という名前のついたウィンドウが自動的に開きます。View のウィンドウが開いていない場合は,構成を表すウィンドウの中にある View をダブルクリックして開いてください。

メニューからライブラリを選択

メニューからライブラリを選択

Interface Builderが起動した状態で,Tools→Libraryと選択すると,ライブラリパネルが開きます。ここには Cocoa Touchで利用できるパーツが並びます。上部のObjectが選択された状態で,Library→Cocoa Touch Plugin→Inputs & Valuesを選んでみてください。下のほうにいくつかの見慣れたパーツが並びます。

たとえば,Labelは,文字を表示するためのパーツです。Round Rect Buttonはボタン,Text Field は文字を入力するためのテキストボックスといった具合です。これらのパーツを,ドラッグアンドドロップで先ほどの View の中に配置していきます。ここから先は,このInputs & Valuesに並んでいるパーツを使っていきます。

ライブラリパネルにある Inputs & Values のパーツ

ライブラリパネルにある Inputs


パーツの配置

ラベル

それでは早速パーツを配置していきましょう。まずはラベルという文字を表示するパーツを使います。ライブラリパネルにある「Label」を,Viewのウィンドウにドラッグアンドドロップしてみてください。

ライブラリからラベルを選択

ライブラリからラベルを選択

Labelという文字が表示されました。この文字はダブルクリックで編集できますので,ここでは数字で「123456789」と入力してみましょう。

ラベルに文字を入力した状態

ラベルに文字を入力した状態

テキストフィールド

次に,文字入力用のテキストフィールドを配置しましょう。ライブラリパネルにある「Text Field」を,Viewのウィンドウにドラッグアンドドロップします。

ライブラリからテキストフィールドを選択

ライブラリからテキストフィールドを選択

これで,iPhoneの画面上でタッチするとキーボードが現れるテキストフィールドが配置されました。そのままの状態では標準のキーボードから好きな文字を入力できるようになっています。ここでは価格を入力させたいので,入力できるものを数字に限定します。

テキストフィールドをViewに配置

テキストフィールドをViewに配置

テキストフィールドの設定を変更するには,インスペクタを使います。Interface BuilderのメニューからTools→Inspectorを選択して,インスペクタパネルを表示します。

メニューからインスペクタを選択

メニューからインスペクタを選択

インスペクタは,各パーツが持つさまざまな設定を行うためのパネルです。パーツを配置したらまずこのインスペクタを使って設定を行います。各パーツを選択すると,そのパーツに対応した設定が表示されるようになっています。先ほど配置したテキストフィールドを選択すると,テキストフィールドの設定が表示されます。

インスペクタパネル

インスペクタパネル

インスペクタパネルの上部には,アイコン付きのタブが4つ並んでいます。このうち,パーツの設定が行えるのは一番左のタブです。テキストフィールドに数字だけを入力させたい場合,そのテキストフィールドをタッチしたときに数字のみが入力できるキーボードを表示すれば,数字以外の文字を入力される心配がありません。キーボードの種類は「Keyboard Type」で指定します。ここでは数字のみのキーボードである「Number Pad」を選択します。

キーボードのタイプを指定

キーボードのタイプを指定


セグメンテッドコントロール

セグメンテッドコントロールは,複数の選択肢からいずれか1つを選択させるためのボタンです。親しみづらい名前なので,選択するためのボタンという意味で「セレクトボタン」などと言ったりもします。ここでは,割引率を選択させるために使います。

ライブラリパネルから「Segmented Control」を選び,Viewに配置します。

キライブラリからセグメンテッドコントロールを選択

ライブラリからセグメンテッドコントロールを選択

配置が完了したら,選択肢を設定しましょう。まずは選択肢の数です。設定はもちろんインスペクタから行います。セグメンテッドコントロールが選択された状態で,インスペクタの「Segments」を変更して選択肢の数を変更します。横にある上下矢印のボタンで選択肢の数を増減できます。あまり選択肢が多いと操作しづらくなるので,ここでは4つとしておきましょう。

選択肢の数を4つに設定

選択肢の数を4つに設定

次にそれぞれの選択肢に名前をつけます。設定したい部分をダブルクリックして入力しましょう。ここでは,割引でよく使う20%から50%までを入力します。

選択肢に名前を付けた状態

選択肢に名前を付けた状態

ビルドと実行

これで最低限のパーツの配置が完了しました。ここで1つ気を付けておきたいことがあります。それは,すべてのパーツを画面の上半分に配置しておく,ということです。こうしておく理由は,実際にアプリを実行した後でわかります。

ではアプリをビルドして実行してみましょう。Xcodeに戻り「ビルドして進行」をクリックしてください。ここで「ビルド前に保存しますか?」というウィンドウが表示されたら「すべてを保存」をクリックします。

編集したファイルの保存をうながすウィンドウ

編集したファイルの保存をうながすウィンドウ

ビルドが完了すると,iPhoneシミュレータが起動してアプリが実行され,先ほどパーツを配置した画面がiPhoneの画面を模したシミュレータ上に表示されます。iPhoneシミュレータの画面上では,マウスを使って実際にクリック(タッチ)して操作することができます。指でMacの画面をタッチしても当然ながら反応しませんので気をつけてくださいね。マウスを使って,タッチしている気分になりながらiPhone シミュレータ上をクリックしてください。

セグメンテッドコントロールをクリックして,20%以外の選択肢が選べることを確認しましょう。次に,テキストフィールドをクリックして,キーボードを表示してみます。

テキストフィールドをクリックするとキーボードが表示される

テキストフィールドをクリックするとキーボードが表示される

インスペクタで設定したとおり,数字だけのキーボードが表示されました。ところが,このキーボードが表示されると画面の下半分を覆ってしまいます。先ほど画面の上半分にパーツを配置しておいたのはこのためです。

下半分に配置してしまうと,キーボードが表示されると同時にパーツが隠れてしまいます。最初のうちはキーボードで入力する際に必要なパーツを画面の上半分に配置しておくことをお勧めします。キーボードのパネルをクリックして,数字が入力できることを確認しておきましょう。

入力した価格と選択した割引率から金額を計算して表示

入力した価格と選択した割引率から金額を計算して表示

今回はパーツを配置して画面を作るところまでを勉強しました。次回は,入力した価格と選択した割引率から,実際に割引した金額を表示するところまでを学びます。

たとえば15,000円の20%割引の場合,15,000円×(1-0.2)=12,000円となります。このような計算をプログラムとして書いて実行し,結果を表示します。もちろんiPhoneアプリのプログラミング言語であるObjective-Cも登場します。ここからがiPhoneアプリ開発の核となる部分ですので,あせらずゆっくり勉強していきましょう。