Cocoaプログラミング

みなさんおひさしぶりです。

XcodeとInterface Builderが統合されましたね。Xcode 4。

！

いやーんおっきいですう

新しく生まれ変わったXcode 4を使って、OS Xのアプリケーションを作りましょう。

Xcode 4.0.2で動作確認しています。

Xcodeを起動して、新規プロジェクトを作ります。

あるいはメニューから、

英語だ！

あ、わかりにくいですか・・

なんとか対応つけてお願いします・・

プロジェクトの名前は、HelloWorldにします。

まずCocoaアプリケーションを選びます。

ふむふむ

そしてプロジェクト名をHelloWorldにします。

矢印まで丁寧に！

ええ付けましたとも！

ファイルダイアログが出るので好きな場所を指定してください。

このように１つのプロジェクトは１つのフォルダになって保存されます。

ほ～

便利ですね！！

さてXcodeのウインドウの左に、いろんなファイルが表示されています。

ファイルペインですね！

あ、そういうんでしたっけ汗

上で示した３つのファイルを編集していきますよ。

はーい！

さて今回は「ボタンを押すと、Hello World, Again! と表示する」アプリケーションを作りますよ。

これはあれですか

iPhoneアプリじゃなくてMacアプリですか

Macアプリです。Macアプリのほうがずっと簡単に作れるんです。

ふむふむ。

これが完成予想図よ！

ボタンなんか関係あるんすかｗ

ボタンを押すと表示させるようにしたいのです。どうしても。

さてアプリケーションのしかけは、次のようなのを考えました。

Javascript風に補足してもいいですか先生

はいおねがいします

I/F NSButton（type

ぎゃー！！！！

なんですかそれは

割と長いこと書いたのに＝でエスケープされてもた・・・orz

心が折れたので続きをおねがいしますｗ

はいｗ

オブジェクトが３つあります。

矢印をたどると、NSButtonが押されると、-pushButton:がHelloWorldAppDelegateに送られて、

そのときにHelloWorldAppDelegateがNSTextFieldをいじりにいくというしかけです。

ふむふむ

なんか難しいのでてきたー

それ以外に舞台裏ではたらいているオブジェクトもかき加えてみました。

一気に敷居が高くなった気がします先生ｗ

今回は考えなくてもいいので、また慣れた頃に見返してみてください。

はい！

さてまず、GUIをデザインしましょう。

MainMenu.xibを選択すると、

xibという拡張子は何の拡張子なんですか先生

以前.nibという、Interface Builderの書類がありましたが、それの親戚です

親戚！！

GUIにまつわる情報を格納しています。

ふむふむ。

.nibはバイナリだったのが、.xibはXMLになったのかな。

現時点ではどちらも同じように使えます。

ほほ～

おぉ～！いまこんななってるんですね！

設計図みたい！

そうなんです。しかもXcode内ですべて完結してますね。

矢印の窓アイコンをクリックすると、ウインドウが表示されます。

ふむふむ

このウインドウに、ボタンとテキストフィールドを配置しましょう。

いろんなオブジェクトがあるドン

矢印で示したボタンを押すと、Xcodeのウインドウの右側に、このようなツールが出てきます。

一番下の検索フィールドを使って、ボタンを探しましょう。

このように、ボタンをウインドウまでドラッグ＆ドロップ。

次はテキストフィールドを探します。

このようにドラッグ＆ドロップ。

あと、各オブジェクトの大きさをいい感じに調節してください。

さて次に、各オブジェクトをつないでいきます。

この２つの矢印のようにつなぎます。

ボタンとテキストフィールドはいま配置したものをつないでいきますが、HelloWorldAppDelegateはどこにあるかというと、

このファイルが表していると考えてください。このファイルのソースコードにつないでいきます。

そのために、Xcodeを２画面モードにします。

Xcodeのウインドウの右上の、そのボタンを押すと、

次のような２画面構成に切り替わるので、

左のファイルペインでHelloWorldAppDelegate.hを選ぶと２画面のうち左にその内容が出ます。

２画面の右に.xibを表示させるために、上のようにManualを選んでから、なんとかしてMainMenu.xibを選びます。

無事２画面がととのったら、いよいよ接続です。

接続は、常に.xib (GUI) のオブジェクトから、ソースコードに向けてつなぎます。

controlキーを押しながらドラッグします。

まず、このように、controlキーを押しながら、テキストフィールドからドラッグして、ソースコード上の矢印の位置につなぎます。

すると上のように吹き出しがぴょこっと出ます。Outletを選び、名前をtextFieldとしてConnectを押します。

次に、ボタンとの接続です。

このように、controlキーを押しながら、ボタンからドラッグして、ソースコード上の矢印の位置につなぎます。

出てきた吹き出しの中で、上のようにActionを選び、名前をpushButtonとしてConnectを押します。

これで接続はおしまい。次のように、自動的にソースコードが書き加えられています。

あと、もう１つのファイルにも書きこまれています。左のファイルペインから、HelloWorldAppDelegate.mを選択してください。

こういうふうになっているはずです。ここまで１文字もプログラム書いてませんね。

今回は１行だけ書きます。

いま見ているファイル (HelloWorldAppDelegate.m) の中の、pushButtonのあとの{ }の中に書き加えます。

このように書いてください。

いま書き加えた部分は、ボタンが押されたときに呼び出されることになります。

ボタンからの接続があるので呼び出されるんです。

{ }の中の文は、テキストフィールドに "Hello World, Again!" と表示させる書き方です。

textFieldというオブジェクトに、setStringValue:というメッセージを送る（＝メソッドを呼び出す）。引数は@"Hello World, Again!"

という意味です。

さて完成です。実行してみましょう。

ウインドウの左上にあるボタンで、コンパイル＋実行します。

ﾊｱﾊｱ

出たー！ ボ、ボタンを押してくださいﾊｱﾊｱ

どうですか！ 無事出ましたか！

すいません！寝てました先生！

ズサーーーー＝３