[[How2Computing]]
Mac OS Xのアプリケーション開発を、Xcodeで行うための、ごくごく簡単なメモです。
iOSアプリを開発するための How2iPhoneProgramming も参考にしてください。
#contents
----
*準備をする [#g97c7e2c]
** Xcodeを入手してインストールする [#e7d4c822]
現バージョンはXcode 5、まもなくXcode 6が出る。
現在、Xcode 6はβ版が入手可能。
現行版はApp Storeにある。
β版や技術情報などは、
-http://developer.apple.com/jp/
から入手可能。
*とりあえず起動して、印刷できる簡易エディタアプリを作ってみる [#a9f55289]
http://gyazo.com/a58b155c6a581f1d26b9407babbde519.png
これがXcode, これをダブルクリックする。
//http://gyazo.com/f647dbe2010549460f7e2de1cc2d81b1.png
http://is.ocha.ac.jp/~siio/gyazo/20140726230602.png
ここでCreate a new Xcode project (新規Xcodeプロジェクトを作成) をえらぶ。
//http://gyazo.com/b5e851b2ec2b0ee9667aa1f1ce57a7da.png
http://is.ocha.ac.jp/~siio/gyazo/20140726230849.png
Mac OS X, Application, Cocoa Application を選んでみる。
//http://gyazo.com/026ffe3abc8659cd610f3d6ffb97216e.png
http://is.ocha.ac.jp/~siio/gyazo/20140726231216.png
プロジェクト名、f2c（謎）としてみる。
ここでSwiftとObjective-Cのどちらかから開発言語を選ぶ。
Swiftがデフォルトになっているし、新しい言語なのでこちらを選んでみよう。
//http://gyazo.com/fdb26f943fbbad30faa88e96be41e2eb.png
http://is.ocha.ac.jp/~siio/gyazo/20140726231811.png
IDEのウィンドウが開いた。
//http://gyazo.com/7ed7f2c55e15da64d76eb3b7440bada1.png
http://is.ocha.ac.jp/~siio/gyazo/20140726232052.png
左のリストから MainMenu.xibを選ぶとインタフェースを設計できるようになる。
ここでf2cという名前のついたウィンドウを選択すると、空のウィンドウが開く。
//http://gyazo.com/80afa3a28c2779d26003d318f4d4f974.png
http://is.ocha.ac.jp/~siio/gyazo/20140726232751.png
右下に表示されているライブラリからText Viewを持って、ウィンドウに載せてみよう。
//http://gyazo.com/2f70f3dd1914ad236fcec6369117b3e8.png
http://is.ocha.ac.jp/~siio/gyazo/20140726232957.png
左上の三角ボタンhttp://is.ocha.ac.jp/~siio/gyazo/20140726233053.png
を押すと動作を確認できる。
次にボタンを貼りつけよう。
//http://gyazo.com/fddca552b8f5bc8e03251127d44f6a76.png
http://is.ocha.ac.jp/~siio/gyazo/20140726233623.png
貼付けたボタンを2回クリックして、
ボタンから、マウス右ボタンを押しながらText Fieldにドラッグすると、ボタンが押されたときに、Text Fieldにメッセージを送るという指定ができる。
//http://gyazo.com/aaeb7371a8528cf6149abcbeefdb2b4b.png
http://is.ocha.ac.jp/~siio/gyazo/20140726233909.png
メッセージの種類を選べる。ので、print:というメッセージを送ってみよう。
//http://gyazo.com/42ba5de0469d5619b69bb1ff50deb54c.png
http://is.ocha.ac.jp/~siio/gyazo/20140726234231.png
また、三角ボタンhttp://is.ocha.ac.jp/~siio/gyazo/20140726233053.png
を押して動かしてみる。本当に印刷できそう。
//http://gyazo.com/0f5a92379be27c95dc4bb84c574e01da.png
http://is.ocha.ac.jp/~siio/gyazo/20140726234438.png
http://is.ocha.ac.jp/~siio/gyazo/20140726234611.png
Productsフォルダの中に、アプリケーションが出来ている。
右ボタンでShow in Finderを選べば、完成していることがわかる。
1行もプログラムを書いていないが、
このアプリケーションは、すでに、由緒正しい、Mac OS XネイティブなCocoaアプリケーションである。
*華氏・摂氏変換アプリを作ってみる [#s9495a11]
**GUI部品を並べる [#h04db676]
まず、上で作ったテキストビューとボタンは取り去っておく。そして、
http://is.ocha.ac.jp/~siio/gyazo/20140726235107.png
//http://gyazo.com/6cfb65cabbcf171afe269341263410bb.png
こんなふうに、スライダ、テキストフィールド、ラベルを配置する。
http://is.ocha.ac.jp/~siio/gyazo/20140726235357.png
http://is.ocha.ac.jp/~siio/gyazo/20140726235528.png
//http://gyazo.com/7ced3f189778dab7394dfccd516646dd.png
//http://gyazo.com/5af4b4ae937b0666658f872efb629d67.png
スライダからテキストフィールドにtakeIntValueFrom:メッセージを送るよう設定すると、
http://is.ocha.ac.jp/~siio/gyazo/20140726235652.png
//http://gyazo.com/79a132be62975376a6ef8e7a260079bb.png
スライダの値を華氏テキストフィールドに表示することができる。
**ユーザインタフェース部品とプログラムを連携させる [#ta3bac5b]
上の例では、スライダの値をそのまま華氏テキストフィールドに出した。
スライダの値から計算などの処理をした結果を表示するためには、プログラムを書く事になる。
ここでは、スライダを動かすと、その値が華氏テキストフィールドに書き出され、
同時に、その値を摂氏に変換して摂氏テキストフィールドに書き出すアプリケーションを考えてみよう。
これが出来れば、
スライダを動かすと、華氏と摂氏の表示が連動して変わるプログラムになる。
まず、右上のshow the Assistant editorボタンを押してみる。
するとエディタ画面が２分割されて、
最も関係のありそうなファイルが開く。
http://is.ocha.ac.jp/~siio/gyazo/20140727000140.png
うまくいけばAppDelegate.swiftが開く筈である。
http://is.ocha.ac.jp/~siio/gyazo/20140727000545.png
うまく開かなければ、左のファイル一覧から希望のファイルを、Assistant editorの上部にドッラッグアンドドロップする。
***Outletを作る [#n7ec86f9]
これからAppDelegate.swiftの中で、スライダが変化したらその値をもらって、華氏と摂氏テキストフィールドに書き込むプログラムを考える。そのためには、華氏と摂氏テキストフィールドにアクセスできる必要がある。つまり華氏と摂氏テキストフィールドを参照している変数を持っている必要がある。これをoutletと呼ぶ。
outletというのはテーブルタップの電源コンセントのことで、オブジェクトをつなぐ口でである。
http://is.ocha.ac.jp/~siio/gyazo/20140727002056.png
まずは摂氏テキストフィールドからAppDelegateクラスのソースコードにドラッグすると、
http://is.ocha.ac.jp/~siio/gyazo/20140727002206.png
outletをしていできる。ここでcTextという名前をつけておく。
connectボタンを押すと、
http://is.ocha.ac.jp/~siio/gyazo/20140727002417.png
cTextという変数が書き込まれる。これで摂氏テキストフィールドにアクセスできる。
同様に華氏テキストフィールドからもOutletを作りfTextという名前をつけておく。
http://is.ocha.ac.jp/~siio/gyazo/20140727004729.png
なお、ソースコードの左にある丸印は、OutletやActionとしてユーザインタフェース部品と接続されていることを表している。ここにポインターを持って行くと、対応している部品が反転する。
***Actionを作る [#q8c927a8]
つぎに、ユーザインタフェース部品がユーザに操作されたときに行うメソッドを作る。これをActionとよぶ。前述のOutletとはメッセージの流れが逆になる。
http://is.ocha.ac.jp/~siio/gyazo/20140727005036.png
スライダからAppDelegateクラスのソースコードにドラッグすると、
http://is.ocha.ac.jp/~siio/gyazo/20140727005219.png
上記と同様のポップアップが開く。こんどはメニューからActionを指定する。名前をsliderActionとし、connectボタンを押すと、
http://is.ocha.ac.jp/~siio/gyazo/20140727005307.png
sliderActionというメソッドが書き込まれる。ただし中身は空なので、これから書き込む。
http://is.ocha.ac.jp/~siio/gyazo/20140727005950.png
華氏フィールドについてはスライダの値をそのまま書き込み、摂氏フィールドには、スライダの値を摂氏に変換した結果を書き込むことにした。
三角ボタンで実行してみる。スライダを動かすと、華氏と摂氏の値が変化する、
これも正真正銘の立派なMac OS Xのプログラムである。
http://is.ocha.ac.jp/~siio/gyazo/20140727010215.png
*View Controllerで作る [#mef4cf36]
上記の例では、簡単のためにAppDelegate.swiftの中にプログラムを作った。
これを進めて行くと、AppDelegateがどんどん肥大化していく可能性がある。
そこで、プログラムの部分は別につくるのが望ましい。
具体的には、View ControllerをオブジェクトライブラリーからMainMenu.xib画面にドラッグアンドドロップして、
http://is.ocha.ac.jp/~siio/gyazo/20140727181109.png
これにNSViewControllerを継承したクラスを作ったファイルを割り当てて、
ここにoutletとactionを作って行くと良い。
iOSアプリを開発するための How2iPhoneProgramming では、
View Controllerを使っている。
*Objective-Cで作る場合の補足 [#aboutobjectivec]
Objective-Cで作った場合、Actionは次のようになる。
- (IBAction)sliderAction:(id)sender {
メソッドの宣言の前の-は、インスタンスメソッドの意味である。これが+だとクラスメソッドになる。Javaよりも分かりやすい。（ちなみにJavaではstaticと付くとクラスメソッド、付かないとインスタンスメソッド。）
f = [sender intValue]; //スライダから値を得る
Objective-Cでは、かぎかっこ[]の中は、Smalltalk風の表記で、
それ以外はC言語風の表記である。[]の中がSmalltalkで外がC言語。
Smalltalkでは、オブジェクトにメッセージを送るという意味で、
オブジェクト＜スペース＞メッセージ
という書き方をする。ということで、ここは、Java風に書くと、
f = sender.intValue;
という文に相当する。
なお、引数のあるメソッドは以下のように表記する。
[fText setIntValue: f ]; //華氏の文字フィールドに書出す
Smalltalkでは、引数のあるメッセージを送るためには、:を使う。ということで、ここはJava風に書くと、
fText.setIntValue( f );
という文に相当する。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
