アプリケーションの開発(1)：iPhone開発の概要と開発環境の設定、iProcessingを使ってみる
サンプルファイルのダウンロード
この回でとりあげた全てのサンプルは、以下からダウンロードできます。
開発体制の準備
ADC (Apple Developper Center) メンバー登録
- この講義では「iPhoneユニバーシティプログラム」に加入して開発を行う
- まず初めに個人でアップルデベロッパとして登録する必要あり(無料)
- Apple開発者登録のページにアクセス
- 登録画面の「Get Started」ボタンを押す
- Do you have an existing Apple ID you would like to use? の質問には Create an Apple ID を選択して Continue
- 登録フォームがでてくるので、必要事項をすべて 半角英数字 で入力 (日本語を使用すると後で苦労します…)
- アンケートフォームに移行するので、答えても良い部分には回答
- 登録したemailアドレスに、確認メールがくるので、そこに表示されているリンクをクリック
- 登録完了!!
デバイスIDの確認
- 履修者でiPhoneを所持者のデバイスを、ユニバーシティプログラムに登録
- XCodeを起動 (Macintosh HD → Developper → Application)
- オーガナイザを表示 (メニューバーから ウィンドウ → オーガナイザー)
- オーガナイザの画面の左側のリストからiPhone端末を選択
- Summaryタブに表示されているidentiferの文字列をコピーして、記録しておく
XCodeのオーガナイザでのデバイスIDの表示画面
iPhoneユニバーシティープログラムへの参加
- ADCに登録が完了したら、久保田さん、山本さん、田所を宛先に、登録した名前とemailアドレスを連絡してください
- Subject：ADC
- 本文：登録した名前(半角英数字)、登録したemailアドレス、使用しているiPhoneのデバイスID
- チームへの追加する招待メールが届きます
iProcessingをつかってみる
iPhone開発の最初の一歩
- 最初から本格的なiPhoneアプリを作成するのはハードルが高い
- まずは、簡単な開発環境を使用してXCodeやiPhoneへの書き出しなどの手順に慣れる
- 手始めに、Processingの文法でiPhoneアプリが作成できる、iProcessingを使ってみる
- iProcessingのWebページ からダウンロードしておく
iProcessing
そもそもProcessingとは?
- MITの博士課程で研究していた、Ben FryとCasey Reasによって開発されたプログラミング開発環境
- John Maedaの率いるMIT Media LabのACG (Aesthetics and Computation Group) グループ
- もともとは、John MaedaのDBN(Design as Numbers)を基盤にしている
- シンプルな文法だが、拡張性に冨んでいる
- ビジュアルデザイン、メディアアート、インタラクションデザインなどに特化
- プログラム初学者の学習、プログラムのスケッチ、プロトタイピングなどに便利
- 本格的なプロジェクトにも対応可能
Processing
iProcessingのサンプルを起動してみる
- iProcessingのフォルダ「0004」→「examples」の中に様々なサンプルが入っている
- その中のXCodeプロジェクトファイルを開く：例「Animator」→「Animator.xcodeproj」
- XCodeのIDE(統合開発環境)が起動する
- メニューバーの「概要」のタブからビルドする環境を選択
- アクティブSDKを「iPhoneシミュレータ3.1.3」アクティブな構成を「Debug」に
- 「ビルドと実行」ボタンを押す
- iPhoneシミュレータが起動して、アプリの実行結果をシミュレートできる
- ちなみにOSX 10.6 SnowLeopardだとアクティブSDKを「iPhoneシミュレータ3.2」にしてiPadでの起動の様子も確認可能
アクティブSDKの選択
iPhoneシミュレータで起動した様子
iPadシミュレータで起動した様子
iProcessingプログラミング – どのファイルをエディットするのか?
- iProcessingで使用するファイルは一つだけ!
- XCode左側コラム、グループとファイルからファイルを選択
- [プロジェクトのアイコン] →「Resorces」→「main」→「main.pde」
- 「main.pde」ファイルを選択して、メニューのエディタボタンを押す
- これがiProcessingのプログラム
main.pde
新規プロジェクトを用意する
- 既存のプロジェクトをフォルダごとコピー – 例「Animation」
- フォルダの名前を任意のものに – 例「TestProject」
- XCodeプロジェクトの名前もフォルダ名にあわせる – 例「TestProject.xcodeproj」
- プロジェクトを開く
- main.pdeを開き、中身を全て消す
- アプリケーション名の変更 – 「ターゲット」→ [アプリの名前] を右クリックして「名称変更」を選択
- アプリの名称を任意のものに – 例：「Test」
- 試しにビルドしてみる – 空白のプログラムが実行されるはず
アプリケーション名称の変更
iProcessingの画面の位置を指し示す – 座標系
- iProcessingの座標系
- 左右の位置をX座標と呼ぶ、上下の位置をY座標と呼ぶ
- 単位はピクセル
- X座標とY座標の組み合わせを、(X,Y)と表記 – 例：X=120, y=200 だったら (120, 200)
- 左上が原点(0,0)
- 右にいくほどXの値が増える、下にいくほどYの値が増える
- iPhoneの画面サイズは、(320,480)
iPhoneの座標系
簡単な図形を描いてみる
- とりあえず以下のプログラムをmain.pdeに入力
[code language=”java”]
size(320,480); //画面のサイズを320×480に
background(127); //背景を127の明るさのグレーに
stroke(255,255,0); //線の色を黄色に
fill(63,127,255); //塗りの色を水色に
ellipse(160,240,200,200); //中心(160,240)の位置に直径200の円を描く
[/code]
- ビルドすると以下の図形が表示されるはず
実行結果
Processingの命令
- Processingで形を描くには、命令(= 関数)を指定していく
- 画面のサイズを指定する関数、色を指定する関数、形を定義する関数など
- 全ての関数は「; (セミコロン)」で終了する
- 関数の細かなパラメータを指定するには、引数というのを用いる
- 引数の数は関数の種類によって異なる、複数ある場合には「,」で区切って列挙していく
- Processingの全ての関数は、ProcessingのAPIリファレンスに説明されている
Processingの関数の書式
いろいろな形を描く
- いろいろな形を描いてみる
[code language=”java”]
size(320,480); //画面のサイズを320×480に
background(0); //背景を黒に
noStroke(); //線を描かない
fill(255,0, 0,127); //塗りの色を透明な赤色に
rect(40,80,150,150); //四角を描く
fill(63,127,255,127); //塗りの色を透明な水色に
ellipse(150,240,180,240); //楕円を描く
fill(255,255,0,127); //塗りの色を透明な黄色
triangle(150,240,140,460,300,380); //三角形を描く
[/code]
- 実行結果
四角形と楕円と三角形を描く
アニメーションの準備 – プログラムの構造化
- アニメーションを作成するには、プログラムの構造化が必要
- 「setup()」と 「draw()」という二つのブロックに分ける
- setup：初期化する場所、プログラムを実行したときに最初に1回だけ実行したい命令を記入
- draw：メインループ、プログラムを実行中は指定した速度(fps)でたえず更新し続ける
- 全体の構造は下記のようになる
[code language=”c”]
/*
* プログラム全体に必要な変数(値を記憶する箱)はここに記入
*/
void setup(){
/*
* 初期化
* プログラム起動時に1回だけ実行される
* 画面のサイズ、色の設定、スピード(FPS)など
*/
}
void draw(){
/*
* メインループ
* 指定したスピードで常に画面を更新していく
* ここで指定した動きがアニメーションとなる
* 座標を更新して、形を描く
*/
}
[/code]
アニメーションさせてみる
- 円を左右に揺らしてみる
- 左右に揺れる動き – sin関数を利用してみる
- 画面の中心を基準にsin関数にそって、X座標を変化させる
[code language=”java”]
float x; //x座標を記憶する「箱」
float y; //y座標を記憶する「箱」
int counter; //カウンターを記憶する「箱」
void setup(){
size(320,480); //画面のサイズ(320,480)
frameRate(30); //30fpsで画面を更新
noStroke(); //線を描かない
fill(31,63,255); //塗の色を水色に
}
void draw(){
background(0); //背景黒
x = width/2 + sin(counter*0.1)*100; //x座標をsin関数で変化させる
y = height/2; //y座標は画面の中心
counter++; //カウンターを更新
ellipse(x, y, 40, 40); //計算した場所を中心に円を描く
}
[/code]
iTamabi lecture material #1 from Atsushi Tadokoro on Vimeo.
- 円を上下にも揺らしてみる
- 上下の揺れはsinではなくcos関数にしてみる
- cos関数は、ちょうど90° (1/2π) だけsin関数とずれている (直交している)
- 結果円軌道を描くことができる!!
[code language=”java”]
float x; //x座標を記憶する「箱」
float y; //y座標を記憶する「箱」
int counter; //カウンターを記憶する「箱」
void setup(){
size(320,480); //画面のサイズ(320,480)
frameRate(30); //30fpsで画面を更新
noStroke(); //線を描かない
fill(31,63,255); //塗の色を水色に
}
void draw(){
background(0); //背景黒
x = width/2 + sin(counter*0.1)*100; //x座標をsin関数で変化させる
y = height/2 + cos(counter*0.1)*100; //y座標をcos関数で変化させる
counter++; //カウンターを更新
ellipse(x, y, 40, 40); //計算した場所を中心に円を描く
}
[/code]
