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