ブログトップ 記事一覧 ログイン 無料ブログ開設

もとまか日記 このページをアンテナに追加 RSSフィード

iPhoneアプリケーション
はてブポケット DateCam S AppBank.net mobile
ポケット - はてなブックマークのiPhoneアプリです。
datecam s -写真に日付を
AppBank iPhoneアプリ版

2008年11月15日

[] iPhoneアプリを作ってみよう:第1回 じゃんけんゲーム(#4.Xcode基礎編)


iPhoneアプリを作ってみよう:第1回 じゃんけんゲームの第4回です。

前回までで、IBとXcodeを連携させて、Xcode側から画面上の要素を

操作するための準備が整いました。

今回は更に具体的な内容として、ボタン押下時の処理等について説明します。


まずXcodeを開いて、「jankenViewController.h」に以下のコードを記述してください

※画像をクリックすると拡大します


ここで登場したキーワードが「IBAction」です。

これはIBにアクションを認識させるもので、IB側で要素のイベントと

括り付けることにより、様々なパターンでの動作を制御することができます。

「IBAction」で記述した内容は、IB側では以下のように反映されます。


アクションも、以下のように該当の要素とアウトレットします。

※画像をクリックすると拡大します


その要素のイベントが一覧で表示されるので、括り付けたいイベントを選択します。

今回は「Touch up inside」に括り付けます。これはタッチして指を離した時のイベントです。

※画像をクリックすると拡大します


無事に括り付けられると、以下のようになります。

他の要素についても、同様に括り付けましょう。


次に、「jankenViewController.m」に以下のコードを記述します。

※画像をクリックすると拡大します


これは先ほど「jankenViewController.h」で宣言したメソッドの本体で、この中に実際のコードを記述していきます。

例として、ぐーボタンをタップした時の動きである、「btn_gu_down」メソッドにコーディングしてみます。

※画像をクリックすると拡大します


メッセージラベル(lbl_mes)にはじゃんけんでお互い手を出した時の掛け声を表示し、

「ちょき」と「ぱー」のボタンは非表示にすることで、じゃんけんが開始されたことを示しています。

最後の「もういっかい」ボタンは、この時点で見えるようにします。※内容は後述。

この状態で実行し、ぐーボタンをタップすると、以下のようになります。


少しだけ動きが見えてきました。

が、これでは相手が何も手を出してないので、じゃんけんとは言えません。

そこで、「相手」と「結果を表示」に、そのあたりのコーディングを施す必要があります。


まず相手の出す手の内容について。

これは「aite」に表示します。この時、相手はランダムで手を繰り出さないと

じゃんけんにはなりません。なので、乱数を使用してみます。


rand関数で乱数を発生させ、3倍することで0〜2.999・・の数値が発生することになります。

これをInteger変数に入れるので、kekkaは0、1、2のどれかになります。

そこで、0だったら「ぐー」、1だったら「ちょき」、それ以外だったら「ぱー」を

表示してやろう、というわけですね。

ちなみに最初に書いてあるsrand関数については、以下をご覧ください。


Cocoa:乱数をつくるには

http://www.oomori.com/co/db/keisan/0000013.html


この結果が以下になります。


続いて結果表示をコーディングします。

kekkaには、0、1、2のどれかが格納されてます。

そして、今はぐーをタップした時の処理をコーディングしています。

この相関関係より、kekkaの値による勝ち負け引き分けの判断が

以下のように可能となります。

この結果が以下になります。

※画像をクリックすると拡大します


あいこだった場合は、「もういっかい」ボタンを再度表示している点に注意です。

その「もういっかい」ボタンは、じゃんけんをやり直す時のためのボタンです。

要するに、最初の状態に戻してあげればOKですね。

そのコーディングはこんな感じです。

これで、「もういっかい」ボタンをタップした時の結果が以下のようになります。


ただ、今のままだとアプリ起動時の状態がちょっと変です。

これはIB側で設定してもいいんですが、せっかくなのでXcodeでやってみます。

アプリ起動時に実行されるviewDidLoadメソッドに、以下のコードを記述します。

これで、アプリ起動直後の状態が以下のようになります。


あとは、「ちょき」と「ぱー」をタップした時の動きを入れれば、

とりあえずそれっぽく動くようにはなります。


いかがでしたでしょうか?


コードの内容的には全く難しいものではありませんが、

一応じゃんけんの要件を満たした内容になっています。

もちろん、もっとスマートな書き方はあるんでしょうが、

簡単かつ説明しやすい内容、ということでまとめてみました。

※記述ミス等についてのご指摘も、ぜひよろしくお願いしますm(_ _)m


ただ、今のままではあまりにも簡素すぎて面白味に欠けます。

見た目はもうちょっと手を入れた方がいいですね。

次回はその辺りのことについて、です。

 

SIASIA 2008/11/15 06:29 現状、勝負してないんですね(^^;
勝敗の判定ルーチンが見つからなくってあせってしまいました(^^;

しかし、最初の入門用にジャンケンゲーム作る
というと、どうしても小学二年くらいの時に読んだ
PC入門用の漫画を思い出してしまう私が居ます(^^;

moto_makamoto_maka 2008/11/15 08:13 「プログラミング入門といえばジャンケンゲーム」
は、お約束ですねw
勝負の判定ルーチンは、まあ面倒くさいので・・・
元々、息子用に作ってた適当なものなのでw

次回の題材は、もっとiPhoneらしいものになる予定です(^o^)

SIASIA 2008/11/15 16:49 判定ルーチンは自分の手と相手の手を引き算した後にseitch文
(0=あいこ。-1or2=勝ち、1or-2=負け)もしくは
あいこ判定後に自分の手が0だったら3にして
(自分-1)==相手が成立するかどうかあたりが定石でしょうか?(^^;

もう次のチュートリアルもあるんですね。
楽しみにしてます(でも、あまり楽しそうだとMacが欲しくなる罠(^^;)

moto_makamoto_maka 2008/11/15 18:35 >あまり楽しそうだとMacが欲しくなる罠(^^;)

キターーーーー!!!!!

お待ちしております(^o^)

ufo6500ufo6500 2009/10/06 15:25 以前よりこのブログを拝見していました。
僕は我慢できなくなっちゃったんで、
結局Macを買っちゃいました。

プログラミング初体験なので、
判定正直ルーチンをきれいに云々・・・という話は
まだ先が遠く感じられます。

むしろ僕らのような初学者には、
基本的な挙動を確認しながら進めるので
あえて簡単なコードにしておいて頂けて
たいへん助かります。

なにはともあれ、このブログには本当に感謝です。

moto_makamoto_maka 2009/10/07 05:03 >ufo6500さん

コメントありがとうございます!

ルーチンを綺麗に、とかは、最初は考えなくてもいいですよ。
楽しんで、悩んで、うまく動いたら喜んで。
それだけで全く問題ありません。

自分なりに、少しは出来るようになってきた、と感じた頃から
綺麗なコーディングをしたり、効率よく書いたりすればいいと
私はそう思ってます。
最初の取っ掛かりのところで止まってしまうと、その先をクリアできないですから・・・。
なんせ、永遠に続く茨の道なのでw

お互い、がんばっていきましょう!(^o^)

yoshiyoshi 2009/10/17 01:10 掲示板に書くのかどうか適切か考えましたが、
上記コードの"aite"にすべて"lbl_"が抜けているかと思います。
VB等の経験者であればすぐ気づくかと思いますが念の為。。

moto_makamoto_maka 2009/10/17 07:07 >yoshiさん

「aite」に”lbl_”をつけてないのは、ある意味わざとです。
別につけてなくても動くので。
コードが肥大化した場合を考慮したらそういったルールは
あった方が見やすくなることは多いとは思いますが、
このチュートリアルでは「細かいことは気にしなくておk」
という意識で書いてます。すみませんm(_ _)m

realbasicrealbasic 2010/05/01 17:42 乱数発生の部分で、3倍にするとありますが、3で割ったあまりを計算していると思います。

moto_makamoto_maka 2010/05/03 03:42 >3で割ったあまりを計算している

・・・・おぉ、確かに。
ご指摘ありがとうございます。
単なる誤字ですし、折角なので、
そのままにしておこうかな、と思います。

SHOSHO 2010/05/11 13:35 初めまして!アプリ作成初心者のSHOと申します。
このサイトを先日知り、アプリ作成の参考にさせていただいています。
画像も多く、とてもわかりやすくて気に入っています。

一つ質問なんですが、ぐーボタンをタップした時のアクションが実行されません(涙)
本来なら、グーボタンともういっかいボタンが残って、チョキやパーは消えるはずなのですが。
ビルドと実行をしても、特に問題なくシミュレーターが表示されるのですが、グーをクリックしてもなにも変化が起きません。IBとXcodeとの関連はされています。
コードも何回も見直したので間違ってはいないと思います。

Xcodeのバージョンが3.2.2なのですが、バージョンによる違いとかあるのでしょうか?
また、どの辺りに問題がありそうか、教えていただけるとうれしいです。
よろしくお願いします。

SHOSHO 2010/05/11 13:35 初めまして!アプリ作成初心者のSHOと申します。
このサイトを先日知り、アプリ作成の参考にさせていただいています。
画像も多く、とてもわかりやすくて気に入っています。

一つ質問なんですが、ぐーボタンをタップした時のアクションが実行されません(涙)
本来なら、グーボタンともういっかいボタンが残って、チョキやパーは消えるはずなのですが。
ビルドと実行をしても、特に問題なくシミュレーターが表示されるのですが、グーをクリックしてもなにも変化が起きません。IBとXcodeとの関連はされています。
コードも何回も見直したので間違ってはいないと思います。

Xcodeのバージョンが3.2.2なのですが、バージョンによる違いとかあるのでしょうか?
また、どの辺りに問題がありそうか、教えていただけるとうれしいです。
よろしくお願いします。

EmiEmi 2010/05/19 15:18 はじめまして!
私も、みなさんと同じく、このサイトがとてもわかりやすいなと思い、日々参考にさせていただいています!

上記のSHOさんと重複するので、申し訳ないのですが、
私も3.2.2を使用しています、
そして、グーを押しても何も変化がありません…

何度も書き直してみたりなどしてみたのですが、
どうにも解決せず…(;;)
お手数ですが、なにか思い当たるポイントなどがあれば、
挙げていただけると幸いです。。。

ゆうたゆうた 2010/05/19 23:22 はじめまして!私もこのサイトを見てプログラミングを始めました。すごく助かってます、ありがとうございます。

それで私もグーを押しても何も変化なしです・・・Emiさん、SHOさん、同じくですね。同じ仲間がいるのはなんだかうれしいです

なぜ、反応しないんでしょうか〜 jankenViewController.hのコードの@propertyのUIButton*btn_gu;のところが緑色にかわらないのが原因でしょうか??

moto_makamoto_maka 2010/05/20 08:52 SHOさん、Emiさん、ゆうたさん

お返事が大変遅くなって申し訳ありません。

Xcodeのバージョンの違いで結構変わってきますが、
この辺りの考え方は変わってません。
今は試せないので記憶で書きますが、ポイントは

・xxx.hでIBAction宣言した関数をIBでボタンに紐付ける。
・xxx.mにIBActionの中身を書く

これだけです。
IBOutletでボタンと繋げるのは、そのボタンをコードから
変更したり何か制御したりする時に行なうので、
ボタンをタップした時の挙動には関係なかったりします。

ちゃんとIBで繋げられてるか確認する簡単なので方法は、
例えばbtn_gu_downの中で、NSLog()を使ってみることですね。
コンソールにログを出力してくれるので、例えば
NSLog(@"test");
のように書けば、testという文字が出力されるはず。
もし出力されなかったらIBでの紐付けがちゃんと出来てないですし、
出力されればokなので、ぐーボタンの動作がおかしいのは
他の原因が考えられる、ということになります。

こんな風にして、少しずつ原因の可能性を絞り込んでいくのが
コーディングの難しさであり、醍醐味だったりします(^。^)

ゆうたゆうた 2010/05/20 09:46 moto_maka さん、ありがとうございます。
できました!

ただ、別に何か変更したわけではなくて、コメントにかいてあったように
”btn_gu_downの中で、NSLog()を使ってみることですね。
コンソールにログを出力”をやると正常に動作したのでもう一度、うまくいかなかったコードで試してみるとうまくいきました。

なんかひっかかっていたみたいな感じでしたけど、
こうゆうことってよくあることなのでしょうか??

moto_makamoto_maka 2010/05/20 20:32 おぉ、よかったです!

何かがちゃんと設定されてなかったんでしょうね。
それが何かはわかりませんが・・・
私もそういうことはよくあります。
ただ、変な動きをした時にどこを見ればいいのかが
身についてるので、無意識に直しちゃったりしてますね。
最初は随分と苦労して、2〜3日悩むのもザラでしたけど、
かれこれ一年半くらい、週に6〜7日くらいは
何か書いてるので、なんとかかんとか出来るようになりました。
毎日毎日少しづつでもやることが大事、てことですね。

TKTK 2010/05/21 12:11 もとまかさん、はじめまして!

ちょうど昨日からMacを触り始め、アプリ開発をし始めた初心者です。
ものすごくわかりやすくて助かっています、ありがとうございます!

私もみなさんのようにグーの反応がなくて、困っていたのですが、
今日Macを立ち上げてみたら、何事もなかったかのように正常に反応してくれました。
PCの不具合みたいなものなのかもしれません。


これからも勉強させていただきます。
本当にわかりやすい記事をありがとうございます!

moto_makamoto_maka 2010/05/22 04:13 >TKさん

こちらこそ、ありがとうございます!
お互い頑張っていきましょう!

EmiEmi 2010/05/26 15:35 moto_makaさん、ありがとうございます!!

丁寧な解説、ありがとうございます!
教えていただいたことをヒントにして、ひとつづつ検証したら、なんとか解決できました!

思いどうりに行かない事もありますが、こうして解決するとすごく嬉しいです…
これからも頑張って勉強する元気が沸きました(笑)

初心者なので、初歩的な質問もまたあるかとは思いますが、
moto_makaさんの記事を参考に、もっと前進していきたいです。
ありがとうございました!

moto_makamoto_maka 2010/05/27 04:07 >Emiさん

解決できてよかったです!

質問はいつでも書いてください。
タイミングによってはすぐに答えられない時や
内容によってはわからないものもあるので(結構あります)
その点だけご了承頂けると助かります(^o^)

SHOSHO 2010/05/29 09:30 moto_makaさん、ありがとうございます。

私も、いろいろ検証してみた結果、無事に動きました(喜)
Emiさん同様、私も初心者なのでこちらのサイトを参考にがんばってみたいと思います。

ありがとうございました!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証