yoppa.org


多摩美 - “iTamabi” – iPhoneアプリ開発プロジェクト 2010

アプリケーションの開発(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 FryCasey 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]

iTamabi lecture material #2 from Atsushi Tadokoro on Vimeo.

iProcessingでiPhoneアプリ作成 | tkd55 blog — 09 March 2012 18:55
[...] 詳細はここ カテゴリー: 未分類   パーマリンク ← [...]