How2Computing

Mac OS Xのアプリケーション開発を、Xcodeで行うための、ごくごく簡単なメモです。 iOSアプリを開発するための How2iPhoneProgramming も参考にしてください。


準備をする

Xcodeを入手してインストールする

現バージョンはXcode 5、まもなくXcode 6が出る。 現在、Xcode 6はβ版が入手可能。 現行版はApp Storeにある。

β版や技術情報などは、

とりあえず起動して、印刷できる簡易エディタアプリを作ってみる

http://gyazo.com/a58b155c6a581f1d26b9407babbde519.png

これがXcode, これをダブルクリックする。

http://is.ocha.ac.jp/~siio/gyazo/20140726230602.png

ここでCreate a new Xcode project (新規Xcodeプロジェクトを作成) をえらぶ。

http://is.ocha.ac.jp/~siio/gyazo/20140726230849.png

Mac OS X, Application, Cocoa Application を選んでみる。

http://is.ocha.ac.jp/~siio/gyazo/20140726231216.png

プロジェクト名、f2c(謎)としてみる。 ここでSwiftとObjective-Cのどちらかから開発言語を選ぶ。 Swiftがデフォルトになっているし、新しい言語なのでこちらを選んでみよう。

http://is.ocha.ac.jp/~siio/gyazo/20140726231811.png

IDEのウィンドウが開いた。

http://is.ocha.ac.jp/~siio/gyazo/20140726232052.png

左のリストから MainMenu.xibを選ぶとインタフェースを設計できるようになる。 ここでf2cという名前のついたウィンドウを選択すると、空のウィンドウが開く。

http://is.ocha.ac.jp/~siio/gyazo/20140726232751.png

右下に表示されているライブラリからText Viewを持って、ウィンドウに載せてみよう。

http://is.ocha.ac.jp/~siio/gyazo/20140726232957.png

左上の三角ボタンhttp://is.ocha.ac.jp/~siio/gyazo/20140726233053.png を押すと動作を確認できる。

次にボタンを貼りつけよう。

http://is.ocha.ac.jp/~siio/gyazo/20140726233623.png

貼付けたボタンを2回クリックして、 ボタンから、マウス右ボタンを押しながらText Fieldにドラッグすると、ボタンが押されたときに、Text Fieldにメッセージを送るという指定ができる。

http://is.ocha.ac.jp/~siio/gyazo/20140726233909.png

メッセージの種類を選べる。ので、print:というメッセージを送ってみよう。

http://is.ocha.ac.jp/~siio/gyazo/20140726234231.png

また、三角ボタンhttp://is.ocha.ac.jp/~siio/gyazo/20140726233053.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アプリケーションである。

華氏・摂氏変換アプリを作ってみる

GUI部品を並べる

まず、上で作ったテキストビューとボタンは取り去っておく。そして、

http://is.ocha.ac.jp/~siio/gyazo/20140726235107.png

こんなふうに、スライダ、テキストフィールド、ラベルを配置する。

http://is.ocha.ac.jp/~siio/gyazo/20140726235357.png http://is.ocha.ac.jp/~siio/gyazo/20140726235528.png

スライダからテキストフィールドにtakeIntValueFrom:メッセージを送るよう設定すると、

http://is.ocha.ac.jp/~siio/gyazo/20140726235652.png

スライダの値を華氏テキストフィールドに表示することができる。

ユーザインタフェース部品とプログラムを連携させる

上の例では、スライダの値をそのまま華氏テキストフィールドに出した。 スライダの値から計算などの処理をした結果を表示するためには、プログラムを書く事になる。 ここでは、スライダを動かすと、その値が華氏テキストフィールドに書き出され、 同時に、その値を摂氏に変換して摂氏テキストフィールドに書き出すアプリケーションを考えてみよう。 これが出来れば、 スライダを動かすと、華氏と摂氏の表示が連動して変わるプログラムになる。

まず、右上のshow the Assistant editorボタンを押してみる。 するとエディタ画面が2分割されて、 最も関係のありそうなファイルが開く。

http://is.ocha.ac.jp/~siio/gyazo/20140727000140.png

うまくいけばAppDelegate.swiftが開く筈である。

http://is.ocha.ac.jp/~siio/gyazo/20140727000545.png

うまく開かなければ、左のファイル一覧から希望のファイルを、Assistant editorの上部にドッラッグアンドドロップする。

Outletを作る

これから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を作る

つぎに、ユーザインタフェース部品がユーザに操作されたときに行うメソッドを作る。これを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で作る

上記の例では、簡単のために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で作る場合の補足

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 );

という文に相当する。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-10-22 (金) 23:27:11