サンプルファイルのダウンロード

この回でとりあげた全てのサンプルは、以下からダウンロードできます。

• iTamabiサンプルファイル(4月19日分)

開発体制の準備

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に入力

size(320,480);              //画面のサイズを320x480に
background(127);            //背景を127の明るさのグレーに
stroke(255,255,0);          //線の色を黄色に
fill(63,127,255);           //塗りの色を水色に
ellipse(160,240,200,200);   //中心(160,240)の位置に直径200の円を描く

• ビルドすると以下の図形が表示されるはず

実行結果

Processingの命令

• Processingで形を描くには、命令(= 関数)を指定していく
• 画面のサイズを指定する関数、色を指定する関数、形を定義する関数など
• 全ての関数は「; (セミコロン)」で終了する
• 関数の細かなパラメータを指定するには、引数というのを用いる
• 引数の数は関数の種類によって異なる、複数ある場合には「,」で区切って列挙していく
• Processingの全ての関数は、ProcessingのAPIリファレンスに説明されている

Processingの関数の書式

いろいろな形を描く

• いろいろな形を描いてみる

size(320,480);                     //画面のサイズを320x480に
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); //三角形を描く

• 実行結果

四角形と楕円と三角形を描く

アニメーションの準備 – プログラムの構造化

• アニメーションを作成するには、プログラムの構造化が必要
• 「setup()」と 「draw()」という二つのブロックに分ける
• setup：初期化する場所、プログラムを実行したときに最初に1回だけ実行したい命令を記入
• draw：メインループ、プログラムを実行中は指定した速度(fps)でたえず更新し続ける
• 全体の構造は下記のようになる

/*
 * プログラム全体に必要な変数(値を記憶する箱)はここに記入
 */

void setup(){
    /*
     * 初期化
     * プログラム起動時に1回だけ実行される
     * 画面のサイズ、色の設定、スピード(FPS)など
     */
}

void draw(){
    /*
     * メインループ
     * 指定したスピードで常に画面を更新していく
     * ここで指定した動きがアニメーションとなる
     * 座標を更新して、形を描く
     */
}

アニメーションさせてみる

• 円を左右に揺らしてみる
• 左右に揺れる動き – sin関数を利用してみる
• 画面の中心を基準にsin関数にそって、X座標を変化させる

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);               //計算した場所を中心に円を描く
}

iTamabi lecture material #1 from Atsushi Tadokoro on Vimeo.

• 円を上下にも揺らしてみる
• 上下の揺れはsinではなくcos関数にしてみる
• cos関数は、ちょうど90° (1/2π) だけsin関数とずれている (直交している)
• 結果円軌道を描くことができる!!

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);               //計算した場所を中心に円を描く
}

iTamabi lecture material #2 from Atsushi Tadokoro on Vimeo.