もとまか日記：開発向け（仮）

■[iPhone][開発] iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム

※本記事は以下の転載です。

iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム - もとまか日記乙

以前から気になってたことですが、以下のエントリについて。

iPhoneアプリを作ってみよう：目次エントリー - もとまか日記

もう２年以上も前の記事なので、内容的に古くなってしまって、

所々で最新の内容とは異なる動きをしてるんだろうな、と思ってました。

とはいえ、随時対応していくのはなかなかシンドイ、というか実質無理です。

なのでずっと放置してたんですが、先日公開されたXcode4でUI等が

大きく様変わりしたこともあり、この機会に最新の内容に対応した記事を

用意していこうかな、と考えました。

なお、iOSアプリ開発の基礎は以下でまとめたのでご覧ください。

今更ですがiOSアプリ開発の基礎について色々調べてみました

てことで、第１回目はやっぱり「じゃんけんゲーム」です。

今回は今後のことも踏まえて試してみたいこともあるので、

構成を以前とは変えて、１記事で全内容としているため少々重いかもしれません。

ご了承くださいm(_ _)m

プロローグ

今回の題材「じゃんけんゲーム」のイメージは以下です。

難しい部分は一切なく、その仕組みを説明して理解してもらうのに

一番の題材だと思ってます。

とはいえ「iOSプログラミングガイド」を流し読み程度は

していることを前提とした内容になっています。

例えば「UIViewとは？」みたいな点から書くのは、さすがにシンドイので・・・

iOS関連のプログラミングガイドについては以下をご覧ください。

iOSドキュメント日本語版のまとめ場所

プロジェクトの作成

まずはプロジェクトを作成します。

プロジェクトで指定できるテンプレートには色々な種類がありますが、

今回は「View-Basedアプリケーション」を使用します。

テンプレートについては以下をご覧ください。

iPhoneSDKのテンプレートに見るiPhoneアプリの使いやすさ

プロジェクト作成の手順は以下です。

まずXcodeを起動して「Create a new Xcode project」を選択します。

「View-Based Application」を選択し、名前を付けて保存します。

ここでは、「janken」という名前を付けました。

このような画面が表示されます。

View-Basedアプリケーション、つまりViewだけを実装したアプリに

必要なものが最初から備わっているので、これに対してボタンやラベルを

追加していけば、簡単にアプリっぽいものを作ることが出来ます。

Viewにボタンを追加する

では早速ですが、Viewにボタンを追加してみましょう。

左メニューにある「jankenViewController.xib」が本プロジェクトで

取り扱うViewの本体ファイルです。

この「jankenViewController.xib」を選択すると以下のようになります。

初期状態では、Viewに配置するパーツが表示されていません。

右上の赤丸部分を押下すると以下のように表示されます。

ここから各パーツをドラッグ＆ドロップすることで

Viewにパーツを配置していくことが出来ます。

次に、ボタンの表示名を変更してみましょう。

目的のパーツを選択して、以下のように「Title」を変更してください。

同様に、他のパーツについても以下のように変更してください。

この辺りの操作は、慣れると非常に簡単で楽しいですね！

iOSシミュレータで確認する

次に、iOSシミュレータで変更内容を確認してみます。

左上を以下のように変更してください。

この状態で左上の矢印ボタンをクリックすると、

iOSシミュレータが起動し、このプロジェクトが実行されます。

（ショートカットは「コマンド＋R」です）

どうです？

すごく簡単で、楽しそうだと思いませんか？(^o^)

XIBとコードを紐付ける

ここまで画面レイアウトを作ってみましたが、

それだけだと、ただの張りぼて状態にすぎず、アプリとして

動作させることが出来ません。

ボタンをタップした時の動作等はコーディングしていく必要があります。

その辺についての解説になります。

ちなみに、今の状態を絵にするとこんな感じ。

なぜ、わざわざiPhoneで・・・しかもこんなヘタな絵を・・・？

という疑問はさほど重要ではないのでさておき。

要するに、ただパーツを配置しただけではXcodeから

認識できない、ということです。

この辺が少々とっつきにくい理由の一つなのかもしれません。

で、どうるすかというと、コーディング時に使用するオブジェクト変数と

View上のパーツを、まさに「繋ぐ」必要があります。

その方法を以下で説明していきます。

ヘッダーファイルでの作業

Viewと変数の紐付けるのは「jankenViewController.xib」で行います。

「Placeholders」の「File's owner」を選択すると以下の画面になります。

右上の「Outlet」で紐付けするわけですが、Viewに追加したボタン等の情報が

一切表示されていないため、今のままでは繋げようにも繋ぐことが出来ません。

これではどうしようもないですね。

そこで、まずXcode側でオブジェクト変数を用意する必要があります。

左メニューから「jankenViewController.h」を選択してください。

以下のようにコードを記述します。

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

IBは「InterfaceBuilder」で、Outletというのが上で書いた

「IBとXcodeを繋ぐ」ことを意味しています。（多分）

そのまま「アウトレット」と呼ばれることが多いみたいですね。

変数を宣言する際に、このキーワードを使うことで、

「この変数はIBでアウトレット（繋ぐ）しますよ」

と、IBに対して教えてあげている、というわけです。

なお、変数を宣言する際、IB上のパーツの種類と同じもの（UILabel、UIButton等）で

宣言しないと、IB上で繋げることが出来ないので注意が必要です。

この状態で「jankenViewController.h」を一旦保存して、

再度「jankenViewController.xib」を見てみると・・・

「Outlets」に先ほど追加した情報が表示されました。

これで選択可能になり、パーツと紐付けることが可能になりました。

Viewのパーツと変数を繋いでみる

では、Viewに追加したパーツとOutletの変数を繋いでみましょう。

変数の右横にある○を掴んだ状態でドラッグし、View上の

パーツまで引っ張って繋げます。この操作はすごく楽しいですね(^o^)

他のパーツについても、以下のように設定してみてください。

コードからパーツを操作してみる

この時点では、まだ最低限必要な準備をしただけなので、

アプリを動かしても何も変化はありません。

それでは、XcodeからView上のパーツを操作してみましょう。

「jankenViewController.m」を開いてください。

一番簡単に操作を反映させるために「viewDidLoad」メソッドを使ってみます。

これはViewが表示された時に、必ず実行されるメソッドです。

最初は以下のように、viewDidLoadがコメントアウトされています。

「/* 〜 */」で囲まれて、緑色になってる部分がコメント部分で、

この部分はコードとして認識されないため、が実行されません。

まずはこれを有効にするために、「/*」と「*/」を削除しましょう。

では次に、パーツの文字を変更するコードを書いてみます。

以下のようにコーディングしてください。

ここでプロジェクトを実行すると、以下のように表示されます。

画面のパーツとXcodeの連携は、こんな感じです。

パーツが他のもの（UIWebViewやUIImageView等）になっても

設定方法は同じです。

Xcodeのわかりにくさ、とっつきにくさは、まさにこの辺にあると思います。

例えばVBでは本エントリーで書かれているような内容は全く不要で、

ボタンを配置してそのボタンをダブルクリックすれば、すぐに

コーディング可能なので、それに慣れてる人（私もそう）だと、

最初は戸惑うかもしれません。

これがXcodeだと、画面上のパーツとコーディングする際の変数、

それらの互いの関係をちゃんと理解できてないと、うまく

動作させることが出来ない、というわけです。

ボタン押下時の処理

では次に、ボタン押下時の処理等について説明します。

「jankenViewController.h」に以下のコードを記述してください。

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

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

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

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

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

そのパーツで使えるイベントが一覧で表示されるので、

括り付けたいイベントを選択します。

今回は「Touch up inside」に括り付けます。

これはタッチして指を離した時のイベントです。

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

全てのパーツを括り付けましょう。

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

これは先ほど「jankenViewController.h」で宣言したメソッドの本体で、

この中に実際のコードを記述していきます。

例として、ぐーボタンをタップした時の動きである、

「gubtn_down」メソッドにコーディングしてみます。

メッセージ（meslbl）にはじゃんけんでお互い手を出した時の掛け声を表示し、

「ちょき」と「ぱー」のボタンは非表示にすることで、じゃんけんが

開始されたことを示しています。

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

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

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

そこで「相手」と「結果を表示」に、そのあたりのコーディングを

施す必要があります。

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

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

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

arc4random関数で乱数を発生させます。

「% 3」を追加することで0〜2の数値が発生することになります。

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

そこで、０だったら「ぐー」、１だったら「ちょき」、

それ以外だったら「ぱー」を表示してやろう、というわけですね。

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

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

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

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

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

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

その結果が以下です。

ただ、このままだとこれ以上じゃんけん出来ません。

そのために「もういっかい」ボタンを使います。

「もういっかい」ボタンをタップした時に最初の状態に

戻してあげればOKですね。

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

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

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

※以下がアプリ起動状態です。

起動時は「相手」や「結果」は何も表示されてなくて、

「もういっかい」ボタンも表示されてない方がより自然なので、

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

あと、以下の変更も必要です。

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

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

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

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

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

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

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

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

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

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

アプリの見た目を変えてみる

アプリの見た目を少しはマシなものにしてみます。

まず、質素な文字だけのボタンを、画像に変えるために

以下のような画像を用意しました。

　　

この画像を、以下のようにプロジェクトのフォルダに置きます。

プロジェクトを起動して「Supporting Files」にドラッグ＆ドロップします。

すると、以下のダイアログが表示されます。

そのままFinishボタンをクリックすると、

このようにファイルが登録されます。

これでローカルのファイルが使えるようになります。

では、ボタンの表示を画像にしてみましょう。

「jankenViewController.xib」を表示してボタンを選択してください。

そして下図のように「Image」で画像を選択すると以下のようになります。

画像サイズは、90 x 90 なので、そのように調整します。

他のボタンも同様に変更してください。

次に、相手の表示です。

ここもテキスト表示ではカッコ悪いので、画像にしてみましょう。

UILabelの「aitelbl」を削除して、代わりにUIImageViewを配置します。

サイズは「90 x 90」に変更してください。

パーツを変更したので、それに応じてアウトレットも変更する必要があります。

「jankenViewController.h」を以下のように修正してください。

変更を保存して、アウトレットを接続し直してください。

この状態で実行すると、コードの方はUILabelに対応した状態のままなので、

以下のようにエラーが多発します。

これはUILabelを削除したため、その変数名を認識することが

出来なくなったのが原因です。

それでは、エラーを修正していきましょう。

まずは、以下のように修正してください。

新しく追加した「UIImage」は画像用のオブジェクト変数です。

このUIImageの変数は、以下のように使用します。

アプリ起動時に実行されるviewDidLoadメソッドで画像を読み込んでいます。

こうすることで、後は変数を使って画像を取り扱うことが出来ます。

また、Retain（保持）指定で画像を読み込むので、deallocで解放するようにしておきます。

また、「aiteImg」画像は相手の出した手を表示するために使います。

このように動的に画像を切り替えることが出来ます。

「もういっかい」をタップした時は以下のように画像を消します。

この状態でアプリを動かしてみると・・・

それっぽくなってきました(^o^)

あとは、結果表示の文字装飾も変えてみます。

先ほどのviewDidLoadメソッドに以下を追加してください。

追加した１行目は、太字でフォントサイズを30ポイントに。

２行目は、文字色の指定です。この場合は黒になります。

これを実行すると、こうなります。

勝ち負けの際は、色が変わった方がいいかもしれませんね。

そのコードは以下のような感じです。

勝った時は青、負けた時は赤、あいこの場合は黒、を指定しています。

これを実行すると、こうなります。

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

コードにもあまり手を入れてませんが、質素な画面から

子供向けのちょっぴり派手なアプリへと変貌しました(^o^)

こんな感じで見た目を変えてあげるだけでも、印象はずいぶん変わるものですね。

アイコンと起動時画像の設定

これまで、初歩的なアプリ開発に向けて、ということで、

コーディングについて書いてきました。

最後に、iPhoneアプリの顔ともいうべきで起動時画像と

アイコンの設定について、です。

まずは起動時画面の設定からです。

iPhoneアプリ起動時にズーム表示されているのは、実は画像です。

「Default.png」というファイル名の画像（320 x 480）を

以下のようにプロジェクトに登録しておくだけで設定完了です。

プロジェクトの「Summary」にある「Launch Images」で

設定が反映されているか確認することが出来ます。

同様に「Default@2x.png」というファイル名の画像（640 x 960）を

プロジェクトに置くと以下のようになります。

これがiPhone4向けのRetina Display用の起動時画像となります。

起動時画像を設定していないとアプリ起動時に真っ黒の画面になります。

別にそれでも問題はないんですが、ユーザからするとViewがロードされるまで

黒い画面を見ることになるため、アプリの起動が遅いように感じられてしまいます。

そういうことを避けたい場合は、起動時画像を利用するといいでしょう。

アプリのタイトルを表示したり、カッコいい画像を表示したり。

使い方には色々ありますが、そこは開発者のアイデア次第です。

以下が実際に起動した時の画面です。

次にアプリ名を設定します。

アプリ名は以下で設定することが出来ます。

アプリ名にあまり長い名前をつけると、Homeで表示した時に...で省略されてしまいます。

短め、かつ意味がわかるような名前を付けましょう。

次にアイコン画像の設定です。

「Icon.png」（57 x 57）と「Icon@2x.png」（114 x 114）の PNG画像を用意しましょう。

「Icon@2x.png」はRetina Display用の画像となります。

プロジェクトの「Summary」からアイコンを登録出来ます。

右クリックして以下のようにメニューを表示して「Select File」を選択し、

「Icon.png」を選択してください。

以下のダイアログが表示されるのでそのまま「finish」ボタンを押下します。

このように登録されました。

同様に「Retina Display」用の「Icon@2x.png」を登録してください。

このように、動きの違いを確認するために、見た目を少し変えてみました。

アプリを実行するとiOSシミュレータが起動されます。

そこで、iOSシミュレータのホームボタンをクリックすると

iOSシミュレータのホームが表示されます。

Retina Displayの確認は、iOSシミュレータのハードウェア設定を

以下のメニューで「iPhone (Retina)」に切り替える必要があります。

iPhone (Retina)が以下です。

この状態でアプリを実行すると、起動時画面とアイコンは以下のようになります。

アイコンはアプリの顔とも言えるものなので、ぜひ凝ったものを作るといいでしょうね。

※上の例は、端折ってアプリ内で使用している画像を流用しています(^^;;

最後に

「じゃんけんゲーム」を題材としたチュートリアルは、以上で終了です。

今回は「じゃんけんゲーム」という、プログラミング入門書でも

よく出てくるであろう題材を取り上げてみました。

プログラミングそのものよりも、「iOSアプリの開発」を事細かに

説明するために、あえてそうしてみたわけですが、いかがでしたでしょうか？

多分、内容的にあまり興味を惹かれないものだったかもしれませんが、

まず最初の一歩として、今回の一連の内容は避けては通れない超基本的な部分です。

この一連のエントリーで、iOSアプリ開発というものに興味を持って頂けて、

「これなら自分でも出来そう」「面白そう」と思って頂けたら幸いです。

なお、本記事の内容は以下を元にXcode4向けに書き直したものです。

第１回　じゃんけんゲーム

タイトル	内容	はてブ
#1．プロローグ	じゃんけんゲームの紹介と今後の進め方
#2．InterfaceBuilder基礎編	IBの基本的な使い方
#3．IB＋Xcode連携編	IBとXcodeの連携について
#4．Xcode編	Xcodeでの基本的なコーディング
#5．ブラッシュアップ編	アプリの見た目を少し派手にしてみる
#6．まとめ編	Default.png、アプリ名、アイコンの登録方法

あと余談ですが、これらのアプリ開発関連記事については

ミス、間違い等が見つかった場合は、履歴を意識せず修正していきます。

履歴を残す（削除線を入れての変更）と見難くなるので本意ではありませんから。

「改訂」というイメージが近いと思いますね。

もしそういう箇所がありましたらご指摘頂きたいのと、

修正方針について、ご了承頂けると幸いです。

　

ツイートする

Permalink | コメント(4) | トラックバック(4) | 04:57