[[How2Computing]]

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


#contents

----

*準備をする [#d21b815f]

** Macintoshを用意する [#fd5f4e3f]

iPhoneアプリは、Mac OS Xでのみ開発可能。なのでMacintoshが必須。


** Xcodeを入手してインストールする [#e7d4c822]

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

β版や技術情報などは、
-http://developer.apple.com/jp/
から入手可能。


** Mac OS Xのプログラムを作ってみる [#aecf8b4e]

Mac OS XとiOSはベースが同じOSなので開発も良く似ている。
iPhoneのプログラムに進む前に,Mac OS Xのプログラムを経験するのも良い.
続きは, How2MacOSXProgramming で.


*温度換算プログラムを作ってみる [#t7eb69e7]

スライダを動かすと、華氏と摂氏のそれぞれに対応した数字が表示される非常にシンプルなアプリを作ってみる。

**Xcodeを起動してInterface Builderを使ってGUI部品を並べる [#z25759ea]

http://gyazo.com/a58b155c6a581f1d26b9407babbde519.png

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

http://is.ocha.ac.jp/~siio/gyazo/20140727164753.png
//http://gyazo.com/f647dbe2010549460f7e2de1cc2d81b1.png

まずは、Create a new Xcode project (新規Xcodeプロジェクトを作成) をえらぶ。

http://is.ocha.ac.jp/~siio/gyazo/20140727164934.png
//http://gyazo.com/7bd679e49d505ceb2a23d8e656c6f4bd.png

ここでOS XかiOSかどちらのアプリケーションを作成するかを決める。
ここでは、iOS Application, Single View Application を選んでみる。

http://is.ocha.ac.jp/~siio/gyazo/20140727165303.png
//http://gyazo.com/026ffe3abc8659cd610f3d6ffb97216e.png

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

http://is.ocha.ac.jp/~siio/gyazo/20140727165437.png
//http://gyazo.com/19997b247e863e47e80b5edf78838d27.png

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

http://is.ocha.ac.jp/~siio/gyazo/20140727170324.png
//http://gyazo.com/0eda868a8b96f1e4bfbb481e072a8d42.png

左のリストから MainStoryboardを選ぶとインタフェースを設計できるようになる。 右のUtilitiesペーンで画面サイズや向きを選べる。ここではiPhone 4-inch, 縦型にした。


http://is.ocha.ac.jp/~siio/gyazo/20140727170812.png
//http://gyazo.com/12b9ad42b5c9338116b4c4796910c362.png
//http://gyazo.com/fd335c75d7d21ea05c77ba7daafafa7d.png

Utilitiesペーンのobject libraryから部品をViewウィンドウ、ドラッグアンドドロップして持ってくる。
テキストフィールド2つと、スライダをならべてみよう。


**GUI部品をプログラムに接続する [#e9ee2ce0]

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

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

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

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

***Outletを作る [#n7ec86f9]

これからViewController.swiftの中で、スライダが変化したらその値をもらって、華氏と摂氏テキストフィールドに書き込むプログラムを考える。そのためには、華氏と摂氏テキストフィールドにアクセスできる必要がある。つまり華氏と摂氏テキストフィールドを参照している変数を持っている必要がある。これをoutletと呼ぶ。
outletというのはテーブルタップの電源コンセントのことで、オブジェクトをつなぐ口でである。

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

まずは摂氏テキストフィールドからViewControllerクラスのソースコードにドラッグすると、

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

outletを指定できる。ここでcTextという名前をつけておく。
connectボタンを押すと、

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

cTextという変数が書き込まれる。これで摂氏テキストフィールドにアクセスできる。
同様に華氏テキストフィールドからもOutletを作りfTextという名前をつけておく。

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

なお、ソースコードの左にある丸印は、OutletやActionとしてユーザインタフェース部品と接続されていることを表している。ここにポインターを持って行くと、対応している部品が反転する。

***Actionを作る [#q8c927a8]

つぎに、ユーザインタフェース部品がユーザに操作されたときに行うメソッドを作る。これをActionとよぶ。前述のOutletとはメッセージの流れが逆になる。

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

スライダからViewControllerクラスのソースコードにドラッグすると、

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

上記と同様のポップアップが開く。こんどはメニューからActionを指定する。名前をsliderActionとし、connectボタンを押すと、

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

sliderActionというメソッドが書き込まれる。ただし中身は空なので、これから書き込む。これで必要な変数とメソッド名が用意された。

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

スライダの値は0から1の間の数値を返すので、100倍して温度らしくした。
華氏フィールドについてはスライダからの値をそのまま書き込み、摂氏フィールドには、スライダからの値を摂氏に変換した結果を書き込むことにした。

左上にある三角ボタン http://is.ocha.ac.jp/~siio/gyazo/20140726233053.png
を押して動かしてみる。
コンパイルされてiPhoneエミュレータが起動し、実行できる。
スライダを動かすと、華氏と摂氏の値が変化する、
これで正真正銘の立派なiOSプログラムである。
これをiPhoneの実機に転送するためには、デベロッパー契約をする必要がある。
理学部情報科学科では卒業研究に相当する科目で大学向け開発契約(無料)を結んでいるので、
卒研でひつようならば指導教員に申し出てほしい。

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


*Objective-Cで作る場合の補足 [#n68b6b4e]

Objective-Cで作る場合は、ヘッダファイル.hとプログラムの本体.mファイルを作ることになる。
ヘッダファイルでは変数とメソッドを定義する。

 //  ViewController.h
 
 
 @interface ViewController : UIViewController {
     IBOutlet id cText;
     IBOutlet id fText;
 }
 - (IBAction)sliderAction:(id)sender;
 @end

.mファイルではメソッドを実装する。

 //  ViewController.m
 
 #import "ViewController.h"
 
 @implementation ViewController
 - (IBAction)sliderAction:(id)sender {
 	float degreeF; //華氏の値を保持する変数
 	float degreeC; //摂氏の値を保持する変数
 	degreeF=((UISlider *)sender).value * 100.0; //スライダから値を得る
 	[fText setText:[NSString stringWithFormat:@"%3.1f", degreeF]];//華氏のに書出す
 	degreeC=(degreeF-32.0) * 5.0 / 9.0; //華氏摂氏換算計算
 	[cText setText:[NSString stringWithFormat:@"%3.1f", degreeC]];//摂氏に書出す
 }
 @end

以下、簡単に説明する。

 - (IBAction)sliderAction:(id)sender {

メソッドの宣言の前の-は、インスタンスメソッドの意味。これが+だとクラスメソッドになる。Javaよりも分かりやすい。(ちなみにJavaではstaticと付くとクラスメソッド、付かないとインスタンスメソッド。)

  	[fText setText:[NSString stringWithFormat:@"%3.1f", degreeF]];//華氏のに書出す

Objective-Cでは、かぎかっこ[]の中は、Smalltalk風の表記で、
それ以外はC言語風の表記。
この行では、かぎかっこは入れ子になっている。
中のかぎかっこ部分、

  	[NSString stringWithFormat:@"%3.1f", degreeF]

は、NSStringクラスに、クラスメソッドstringWithFormat:を送って、NSStringインスタンスを生成している。

Smalltalkでは、オブジェクトにメッセージを送るという意味で、

 オブジェクト<スペース>メッセージ

という書き方をする。また、メッセージに引数がある場合は、

 オブジェクト<スペース>メッセージ:引数

と書く。

ということで、この部分は、Java風に書くと、

 NSString.stringWithFormat(@"%3.1f", degreeF);

という文に相当する。
ちなみに、@マークは、""で挟み込んだ以下の文字列からなるNSStringオブジェクトであることを示す。
@マークをつけない、""で挟み込んだだけの文字列は、通常のC言語の文字列になる。

さらにそれを引数として、fTextのインスタンスメソッドsetText:を呼んでいる。
全部をJava風に書くと、

 fText.setText ( NSString.stringWithFormat(@"%3.1f", degreeF) );

という文に相当する。



*参考になるサイト [#i2b3e6c6]

アップルの資料

http://developer.apple.com/iphone/library/navigation/index.html

iPhone Develop Centerに登録する

http://www.codeanimato.com/blog/archives/2008/10/iphone-2.html

実際にプログラムを書く時 

http://sites.google.com/a/gclue.jp/iphone-app-docs/

実機にプログラムを転送する 

http://d.hatena.ne.jp/uzulla/20080911

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS