「目指せ!iPhoneアプリ開発エキスパート第7回 応用テクニック」のフォローアップ 2009 年 8 月 13 日

iPhoneアプリを試しに作るために、
目指せ!iPhoneアプリ開発エキスパート 第7回 応用テクニック
を読みながらやってみたけど紙面の都合上なのか、はしょられている箇所が多く、初めて作る自分のようなビギナーではちょっと苦戦してしまって、時間がもったいないので、キャプチャを使ってはまりやすいポイントをフォローアップしてみる。

テンプレートの作成
1.View-based Applicationをクリックして、右下の選択ボタンを押下
View-based Applicationをクリックして、右下の選択ボタンを押下

2.新規プロジェクトの保存ダイアログボックスが出るので、「UITest」という名前で保存。
※保存場所はどこでもよい。
新規プロジェクトの保存ダイアログボックスが出るので、「UITest」という名前で保存

3.プロジェクトが作成された
プロジェクト作成

4.UITestViewController.xibのファイル名をダブルクリックしてInterface Builderを起動
UITestViewController.xibのファイル名をダブルクリックしてInterface Builderを起動

5.ウィンドウがいくつも立ち上がってくるなかで、File’s Ownerをクリックする。
ウィンドウがいくつも立ち上がってくるなかで、File's Ownerをクリックする。

6.classの部分が「UITestViewController」になっていることを確認する。※重要
classの部分が「UITestViewController」になっていることを確認

7.この状態で、Class ActionsとClass Outletsの[+]をそれぞれ1回クリックする。
Class ActionsとClass Outletsの[+]をそれぞれ1回クリックする

8.File’s Ownerが選択された状態で「Write Class Files…」を選択
File's Ownerが選択された状態で「Write Class Files...」を選択

9.保存ダイアログボックスがでてくるのでsaveをクリック
保存ダイアログボックスがでてくるのでsaveをクリック

10.Replaceをクリックする。これで、アウトレットとアクションがプログラムのファイルに反映される。
Replaceをクリックする。これで、アウトレットとアクションがプログラムのファイルに反映される

アウトレットの追加
11.UITestViewController.hを選択して、ソースコードを表示。ここにアウトレットとアクションが追加されている。
UITestViewController.hを選択して、ソースコードを表示。ここにアウトレットとアクションが追加されている

12.追加するアウトレット(myOutlet2、myOutlet3)とアクション(myAction2,myAction3)をそれぞれ追加する。追加したらファイルを保存。
追加するアウトレット(myOutlet2、myOutlet3)とアクション(myAction2,myAction3)をそれぞれ追加

13.ファイル名のUITestViewController.xibをダブルクリックして、File’s Ownerをクリックすると追加したアクションとアウトレットが増えている。
ファイル名のUITestViewController.xibをダブルクリックして、File's Ownerをクリックすると追加したアクションとアウトレットが増えている

14.アクションに関しては、UITestViewController.m にも追加する必要があるので、エディタに戻ってUITestViewController.mをクリック。
アクションに関しては、UITestViewController.m にも追加する必要があるので、エディタに戻ってUITestViewController.mをクリック

15.アクション(myAction2,myAction3)を追加して保存する。
e38394e382afe38381e383a3-15

16.UITestViewController.xibをダブルクリックして、ViewとLibraryを確認。※Libraryが表示されなければ、Tools→Libraryを選択。
e38394e382afe38381e383a3-16
e38394e382afe38381e383a3-16-1

17.LibraryのText FieldをViewにドラッグアンドドロップする。
e38394e382afe38381e383a3-17

18.サイズ変更も可能なので、調整する。
e38394e382afe38381e383a3-18

19.一度、この状態でエディタの「ビルドして進行」を押下してiPhoneシミュレーターを起動する。
e38394e382afe38381e383a3-19

20.iPhoneシミュレーターのテキストフィールドをクリックするとキーボードが出現する。文字を入力して、出現したキーボードの「return」を押下しても反応なし。
e38394e382afe38381e383a3-20-2

21.View画面でText Fieldをクリックして、Text Field Attributeにて「return」ではなく、「Done」に変更。キーボードのreturn部分が「Done」に変更されているのを確認する。
e38394e382afe38381e383a3-201

22.File’s Ownerを右クリック。して、myAction1の右側の○をViewのText Fieldにドラッグアンドドロップする。
e38394e382afe38381e383a3-22

23.ドロップすると同時に選択画面が表示されるので、「Did End On Exit」を選択して保存。
この状態で、「ビルドして進行」からiPhoneシミュレーターを起動して、Text Fieldになにか文字を入力して、Doneボタンを押下すると、キーボードが隠れるようになる。
e38394e382afe38381e383a3-23

キーボードを閉じるボタン
24.Libraryの「Round Rect Button」をView画面にドラッグアンドドロップする。
e38394e382afe38381e383a3-241

25.Viewに配置した「Round Rect Button」をダブルクリックして、「入力完了」と入力。
e38394e382afe38381e383a3-25

26.File’s Ownerを右クリックする。
e38394e382afe38381e383a3-26

27.myOutletをText Fieldに接続する。
e38394e382afe38381e383a3-27

28.myAction2を入力完了ボタンに接続する。
e38394e382afe38381e383a3-28

29.「Touch Down」を選択。
e38394e382afe38381e383a3-29

30.UITestViewController.mのmyAction2に[myOutlet1 endEditing:YES];を追記。
「ビルドして進行」を押下して、iPhoneシミュレーターを起動して動作確認。「入力完了」ボタンを押下するとキーボードが隠れるようになる。
e38394e382afe38381e383a3-30

ボタンをキーボードに連動させる
入力完了ボタンは,キーボードからの文字入力中だけ表示されていれば良いので、キーボードが表示されている間だけ、このボタンを表示するようにしてみる。
31.File’s Ownerを右クリックして、myOutlet2を「入力完了」ボタンに接続する。
e38394e382afe38381e383a3-31

32.myAction3をText Fieldに接続。
e38394e382afe38381e383a3-32

33.「Editing Did Begin」を選択。
e38394e382afe38381e383a3-33

34.UITestViewController.mのmyAction2に[myOutlet2 setHidden:YES];を追加。
myAction3に[myOutlet2 setHidden:NO];を追加して保存。
ビルドして進行を押下して、iPhoneシミュレーターでText Fieldを選択するとボタンが表示され、入力完了ボタンを押下するとボタンが隠れることを確認。※アプリ起動時はボタンは表示されたまま。
e38394e382afe38381e383a3-34

35.アプリ起動時に「入力完了」ボタンが表示されたままなので、「Button Attributes」→DrawingのHiddenをチェックする。
e38394e382afe38381e383a3-35

関連する記事:

6 Comments
通りすがり 4 月 16th, 2010

参考になりました!
ありがとうございました!

Yuripon 5 月 17th, 2010

初心者ですが、とてもわかりやすくて役立ちました。
ありがとうございます。

> 7.この状態で、Class ActionsとClass Outletsの[+]をそれぞれ1回クリックする。

これがなくてはまりました。(Tools -> Libratyにありました)

zhuze 1 月 23rd, 2011

初心者なんですが、入力完了のボタンは全く現れなくて何のためにあるんでしょうか。
DONEでキーボードが消えるので、これで用は済みますよね???

zhuze 1 月 23rd, 2011

すみません。30.番の確認の所で「入力完了」ボタンを押すと、UITestそのものが終了してしまうのですが。

zhuze 1 月 23rd, 2011

できました。わかりました。間違いに気付きました。ありがとうございました。

Leave a Reply