iPhoneアプリ開発日誌 -ZERO- -3ページ目

iPhoneアプリ開発日誌 -ZERO-

プログラムの事を何も知らない素人が、iPhoneアプリを開発していく上で悩んだ点や勉強した点、記録を残していきます。

Xcode4.2以前は、ナビゲータエリアの横にあったドッグと呼ばれている所に
File's Ownerと呼ばれるものがあって、そこで青い線を引いたりして
IBOutletを接続していましたが、4.2に変わって、
Storyboardなるものが出現し、File's Ownerであったであろうものが
First ResponderになってしかもViewの下に配置されていたりして、
LabelやButtonなどの部品名の定義(?)の方法が分かりませんでしたが、
色々調べた結果をまとめてみたいと思います。

以前は、このようにインスペクターペインのコネクションズインスペクターに、
ヘッダファイルで定義した部品名が一覧で表示されていました。
$iPhoneアプリ開発日誌
(画像はもとまか日記Z様から引用、問題があれば削除しますので連絡をお願いします。)

しっかし、Xcode4.2ではヘッダファイルでの部品名定義から変わっていました。
今までは、
@interface ~~ViewController:UIViewController{
  IBOutlet UILabel *label;
}

と定義すればFile's Ownerで認識してくれて接続ができたわけですが、
4.2ではなぜか「 { } 」がついて無くて、なんでかなと思ってましたが、
定義の仕方自体変わっていたようです。

Single View Applicationで新規作成をし、ViewController.hを開くと、
@interface ViewController:UIViewController
と書いてあって、カッコが無くなってまして、、、。
結果から言うと、@interface~~の次の行に
@property(nonatomic,retain) IBOutlet UILabel *label;
と記述すればいいだけのようです。
言われてみれば、今までは2度手間だったのかもしれませんね。

これで、定義はできたわけですが、次はそれをどう繋ぐかですよね。
これはこれでまた理解するまでに時間が掛かりました。

storyboardを開き、ライブラリペインからLabelをViewに置いて下さい。
Labelを選択して(Labelの周りに白い丸が付いている状態)、
インスペクターペインのコネクションズインスペクターを開いて下さい。
そうすると、こんな感じになると思われます。
$iPhoneアプリ開発日誌
Referencing Outlets と Referencing Outlet Collectionsの2つがありますが、
今回は、Referencing Outletsの中にある New Referencing Outletsを使います。
名前の右にある丸をクリックして、VIewの上にあるLabelと接続します。
$iPhoneアプリ開発日誌
上のように引っ張ったら、マウスをドラッグをやめてください。
そうすると灰色のポップアップウィンドウでlabelとViewが表示されるので、
Labelをクリックすると、IBOutletの接続が完了です!


IBActionの方はあんまり変わらない方法で出来たので良かったんですが、
今回記事にした方は、なかなか分からなくて、開発を諦めかけたんです笑
でも、テンプレート調べたら分かるんじゃないか?ってことで、
調べてみてやってみて出来たので記事にしておきます。

※記事に関して、僕が誤解釈している箇所、間違った書き方をしている箇所、
アヤフヤな書き方をしている箇所、不明な箇所等があれば、
コメントの方をお願いします。開発を初めたばかりでまだまだ初心者なので、
ビシバシ指摘をして頂けると助かります。
今日、初めてXcode4.2で新しいプロジェクト作成したんですが、
かなり変わってて驚きましたよ。もうそれはとても。笑

「Create a new Xcode project」の次の画面で、
View-BasedとかNavigation-Basedが無くなってて驚きました。
Document-Based ApplicationとかSingle View Applicationとか。
僕の中では、今までのView-BasedがSingle View Applicationに当たると
思っています。実際にそれでやってみましたので多分いいかと。

で、次に驚いたのが拡張子xibファイルが無くなった事。
まだまだIBに頼ってたので、これが無いと知った時はめっちゃ焦りました。
ですが、代わりにstoryboardなるものが登場しまして、
それを見るとなんとなくそれっぽいものがでてきました。

ただ、こいつの使い方が全く分からず困っていましたが、
こちらのサイトを参考にしてとりあえずチュートリアルをやりました。
英語表記ですが、そんな難しく無かったです。
1語や2語くらい分からない単語はありましたが、キャプチャもあります。

ただこの表記のソフトが「Xcode4.2(4C104)」となっていました。
僕が使っているのが「Xcode4.2(4C177)」だったので、
多少操作に違いはありましたがそこは手探りで行いました。
以下簡単な意訳と相違点です。どうぞ使ってやってください。


1.Xcode4を起動し、「create a new Xcode project」をクリックし、「Single View Application」を選択し、Product Nameに「iPhone_Tutorial_One」と入力してOKです。
(注意:サイトのSingle View Applicationのアイコンの画像が違っていました。今は四角の中に1と書かれたアイコンです。名前で判断してください。)

2.画面左にある「MainStoryboard.storyboard」をクリックしてstoryboardを表示させてください。

3.画面右下のツールバーからViewControllerを今あるViewの横にドラッグする。
(その下のNoteは右のツールバーが表示されていない場合、表示させる方法が書いてあります。)

4.LabelをそれぞれのViewに1つずつ置き、左のViewに置いたLabelは、名前を「View One」に変更し、右のViewに置いたLabelは、名前を「View Two」に変更する。

5.次は Round Rect ButtonをそれぞれのViewに2つずつ置き、名前を「Info」と「Select View」に変更する。右のViewにも左のViewにも同じことをしてください。

6.「Control」キーを押しながら、ViewOneに配置したSwitch Viewと書かれたボタンをクリックしてView Twoの白い部分にドラッグします。その時、青い線が出ているはずです。そして白い部分の上でドラッグを止めると、黒いポップアップウィンドウが表示されるので、「Modal」をクリックしてください。今度は逆に、ViewTwoに配置したSwith Viewと書かれたボタンをクリックしてView Oneの白い部分にドラッグします。そして白い部分の上でドラッグを止めると、同じように黒いポップアップウィンドウが表示されるので、こちらも「Modal」を選択してください。
(注意:英語の方では、 performSequeWithIdentifier:senderを選べと書いてありますが、4C177ではそのような語句が出てきません。これはModalと同じ意味です。(だと思います笑))

7.File>New>NewFileと進み、新しくUIViewController Subclassを作成します。名前は、「Second View Controller」にしてください。
(注意:掲載されているキャプチャと名前を入力する所が違いますが分かると思います。)

8.storyboardに戻ります。2つのViewが並んでいると思いますが、右のViewの下にある黒いバーをクリックしてください。(黒いバーの周りとその上のViewの周りが青くなっていたらOKです。)画面右の設定画面からCustom Classに「SecondViewController」と入力してください。
(注意:Viewを選択するのではなく、SecondViewControllerを選択してください)

9.ソースコードを編集します。
(a)→ViewController.h
(b)→ViewController.m
(c)→SecondViewController.h
(d)→secondViewController.m
です。説明では、iPhone_Tutorial_OneViewController.hとなっていますが、最新版では「ViewController.h」としか書かれていませんので注意が必要です。

10.「Control」キーを押しながら、View OneのInfoボタンをクリックしてすぐ下にあるオレンジ色の箱までドラッグします。その上で離すと、黒いポップアップウィンドウが表示されるので、「pageInfo」を選択します。同じ事をView Twoでもやってください。

11.これで終わりです。さぁ、実行してみましょう!

てな感じです。Repeatを見逃して反対側やってない!ってなったりするので
同じことでも2回書きました。最後だけ省略しましたが、、、笑

Switch Viewボタンを押すともう1つのViewに画面遷移して、
Infoボタンを押すと、今自分がどっちのViewにいるか教えてくれます。
複雑なプログラムを書く事無く、視覚的に画面遷移を確認できるようです。

今分からないのは、LabelをIBOutletでつなぐことですね。
Actionは繋げましたけど、こっちがどうもできないんで、、、
どなたか知っていらっしゃる方教えてくださいまし。
今日は朝から用事があったので、夕方まで携帯を触る事が出来ず、
「登録データを修正しました」というメールを読んだのが午後5時頃。
急ぎ目に帰宅して、19時頃から実機ビルドに挑戦してました。

で、今回、登録からここまでのプロセスを振り返って・・・
1ヶ月くらいかかると言われてましたが、ちゃんと勉強してから
臨めば1週間弱で終えることができました。
僕の場合、土日を挟んでも6日で終える事が出来ました。
月曜日に始めて、順調に行けば4日で終われたんじゃないかと思います。

本当に最初の頃、ネット上に記事が少なかった頃の話だと、
1ヶ月くらい掛かってしまうのかなと思います。
今ならもうインターネットでいくらでも情報を見つけられるので、
4日もあれば終われるはずです。便利ですね。

先輩方のデータをここにまとめておきたいと思います。

1.Developer登録~Apple Storeでの購入まではこちら。
http://macmac21.blog136.fc2.com/blog-entry-5.html

2.アクティベーションコードの認証、問い合わせについてはこちら。
http://ameblo.jp/terakawa-0707/entry-10997779295.html

この2つのサイトを利用しました。キャプチャもあって分かりやすかったです。
誰かの役に立てば幸いです。

今は今まで作ったいろんなアプリをあれやこれやと実機にぶち込んでます。
明日からは真面目に勉強する予定ですよ?予定ですけどね。