2697

チュートリアルスマートフォンと呼ばれる携帯型端末の普及は目覚しいものがあり、アプリと呼ばれるスマートフォン向けアプリケーションも、日々膨大な数が世界中でリリースされています。今回は、代表的な2つのスマートフォン用 OS 上でのソフトウェア開発に関するチュートリアル（全4回シリーズ）の第2回目として、東洋大学の塩谷隆二先生と中林靖先生に解説していただきます。なお、チュートリアル記事は1ページ目のみを本誌掲載し、続きは日本計算工学会 HP 上で公開していますので、そちらも併せてご参照ください。

スマートフォンアプリ開発入門- iOS vs. Android（2）1

はじめに前号のチュートリアルで「スマートフォンアプリ開発 入 門」第1回 目 と し て、iOS と Android そ れ ぞ れ の 開
発 環 境 構 築 手 法 に つ い て 解 説 し た。iOS 用 の ア プ リ
開発には、まず Mac（Mac OS X 10.6以降）が必須であり、その上で Xcode と呼ばれる統合開発ツールを用いて Objective-C 言語によるアプリ開発環境が構築出来る。一方、Android 用のアプリ開発環境としては、広くJava や C 言語等のアプリケーション開発に用いられている統合開発環境 Eclipse を用いて、その上に AndroidDevelopment Tool（ADT）や Android SDK などを追加インストールすることで、Java 言語によるアプリ開発環境が構築出来る。
ここで、前号で紹介した開発環境以外にもスマートフォンアプリの開発手法があるので紹介しておく。まず、Android 用アプリ開発用ツールとしては、GoogleLabs で公開されている「App Inventor」という Web ベースのアプリ開発ツールがある。App Inventor は Eclipse も筆者紹介
しおや りゅうじ
1996年東京大学大学院工学系研究科博士課程修了、東京大学助手、九州大学准教授を経て、現在、東洋大学総合情報学部教授。超並列計算機による数値解
析、大規模 CAE ソフト「ADVENTURE」システム開発などの研究に従事。
なかばやし やすし
1999年東京大学大学院工学系研究科博士課程修了、Java も用いずに、Web 上でパズルのように部品を組み立てていくイメージで Android アプリを開発するツール
で、もともとはプログラミングを専門的に学んだことがない学生がプログラムの作り方の基礎を学ぶために作られたもので、米国では教育機関で広く利用されている。
また、Java Script や C# で記述されたインタラクティ
ブ な3D ア プ リ ケ ー シ ョ ン を iOS/Android の 両 方 用 に変 換 す る「Unity」、HTML と JavaScript で 記 述 さ れ た
Web ア プ リ ケ ー シ ョ ン を iOS/Android 用 に 変 換 す る「Titanium」、HTML5で 記 述 さ れ た コ ン テ ン ツ を iOS/Android 用に変換する「BPR」など、iOS と Android の垣根を超えたアプリ開発環境も次々と開発されている。
これらのツールの詳細についても、次号以降で紹介していきたい。
本号では、チュートリアルの第2回目として、前号で構築した開発環境の動作確認も兼ね、iOS と Androidそれぞれについて基礎的なアプリを実際に開発することを目的とし解説する。例えば、スマートフォンの入力方法として最も良く用いられる、画面を直接触れるタッチ操作に反応して、何らかの図形を表示するといったシンプルなものであるが、本格的なアプリ開発の準備段階として、また、スマートフォンアプリの基本的な開発方法を理解する上では重要なものである。
次章でまず、Android で簡単な図形の表示とタッチイベントの処理方法について、次に、iOS で OpenGL による図形の描画とタッチイベントの処理方法についてそれぞれ解説していく。

東京大学リサーチ・アソシエイト、東洋大学工学部講師を経て、現在、東洋大学総合情報学部准教授。数値流体力学、逆問題・最適化、モバイル・ユビキタスコンピューティングなどの研究に従事。

Vol.17, No.1 2012

塩谷 隆二
中林 靖

（21）

続きは Web で
日本計算工学会誌「計算工学（Vol.17, No.1）」HP:
http://www.jsces.org/Issue/Journal/

チュートリアル２

スマートフォンアプリ開発入門 - iOS vs. Android (2)Android アプリ開発(1) Android アプリの基本構造Android アプリを開発するためには、まず、Androidアプリの基本的な構造を理解する必要がある。本稿の読者は計算工学分野の様々なアプリケーションを開発した経験があると思われるが、その際に重要な点はデータ構造とアルゴリズムである。データ構造とアルゴリズムを問題に応じて適切に選択し、構造化プログラミングまたはオブジェクト指向プログラミングを行うのが通常の方法である。一方、グラフィカル・ユーザ・インターフェイス(GUI)を 搭 載したアプリケーション
は、キーボードやマウス等からのイベント入力を待つループを持ち、所謂、イベントドリブン(event-driven)型のプログラム構造を持つ。
Android アプリの場合には、一般的な GUI アプリと同様にイベントドリブンなプログラム構造を持つが、更に重要な概念として「Activity」がある。Activity とは簡単に言うと、スマートフォンやタブレット PC に表示される画面の単位のことであり、Java 言語における Canvas や Panel に近いものであるが、単に画像情報としての画面ではなく、現在表示されているアプリの画面に付随する様々な属性情報を持ったクラスとして定義されている。
従って、Android アプリには通常一つ以上の Activityクラス、または Activity クラスから派生したクラスが存在し、この Activity の状態遷移をベースにアプリの構造を設計する。図 1 に Activity の状態遷移を示す。

Android アプリは上述の Activity の他に、「ブロードキャストレシーバ」、「サービス」、「コンテンツプロバイダ」の合計 4 つの構成要素からなり、この 4 つの構成要素のうち一つ以上から成り立っている。本稿ではActivity 以外の構成要素については割愛する。
(2) サンプル 1－グラフィックスの描画最も簡単なサンプルを用いて Android アプリの基本的な作成方法を説明する。図 2 に示すリストは、白地の背景に赤の塗り潰しの円を表示するだけの簡単なアプリである。
package circle.android;
import android.app.Activity;
import android.content.Context;
import android.graphics.*;
import android.os.Bundle;
import android.view.View;
public class TestCircle extends Activity {//アプリの初期化@Override
public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
MyCircleView view =new MyCircleView(getApplication());
setContentView(view);}}//グラフィックスの描画
class MyCircleView extends View {public MyCircleView(Context context) {super(context);
setFocusable(true);}//描画
protected void onDraw(Canvas canvas) {super.onDraw(canvas);//円の描画
canvas.drawColor(Color. WHITE );Paint paint = new Paint();
paint.setAntiAlias(true);//円の塗り潰し
paint.setStyle(Paint.Style. FILL );paint.setColor(Color. RED);canvas.drawCircle(150, 200, 100, paint);}}

開始

onCreate()
onStart()
中断

onRestart()

onResume()
実行中

Activity が前面に新しい Activity が開始
他のアプリがメモリを要求

onPause()
長時間表示されな い

Activity が前面に

onStop()onDestroy()終了

図 1 Activivy の状態遷移

図 2 サンプルプログラム 1（TestCircle）

Android SDK で提供されている Activity クラスでは、図 1 の中で示された各メソッドが定義されており、ユーザはこれら全てのメソッドを必ずしも再定義する必要はないが、必要に応じてこれらのメソッドを overrideしていく。

このサンプルプログラムを作成するには、前号で解説した eclipse のファイルメニューから、新規 androidプロジェクトを選択し、以下の各項目を入力する。

計算工学(21-2)

Vol.17, No.1 2012

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (2)プロジェクト名：TestCircle
ビルド・ターゲット：Android 2.2
アプリケーション名：TestCircle
パッケージ名：circle.android
アクティビティーの作成：TestCircle
続いて、パッケージ・エクスプローラから TestCircle→src→TestCircle.java を選択し、図 2 のリストを入力する。入力後、eclipse の実行メニューから、実行→実行構成を選択し、プロジェクト欄の TestCircle を選択
し実行ボタンのクリックにより、エミュレータが起動し、図 3 に示す実行結果が表示される。

る通り、canvas の背景を白にする、円を赤色で塗り潰し表示し、円の中心座標を(150, 200)、半径を 100 にするという具合である。
このサンプルプログラムのように、多くの Android
ア プ リ では 、 Activity（ ま た は そ の 派生 ） クラ ス か ら
View（またはその派生）クラスを呼び出し、画面表示を行うことが一般的である。このサンプルでは円を描画する drawCircle()のみを用いているが、この他にもandroid.graphics.*ク ラスラ イ ブラリには 、線を描 画す
る drawLine()や軌跡を描画する drawPath()、矩形を描画する drawRect()などが用意されており、これらを組み合わせる事により、任意のグラフィックスの描画が可能となる。
(3) サンプル 2－タッチイベントの処理
次に、スマートフォンアプリの特徴の一つである、画面タッチによる入力機能に関するサンプルを紹介する。このアプリは画面上のタッチ入力された箇所に小さな円を表示するという簡単なものであるが、多くのAndroid アプリに必須なタッチイベントの処理方法を理解する上で重要である。
前述のサンプル 1 作成と同様に、新規 Android プロジェクトを作成し、以下の各項目を入力する。
プロジェクト名：TestTouch
ビルド・ターゲット：Android 2.2
アプリケーション名：TestTouch
パッケージ名：touch.android
アクティビティーの作成：TestTouch

図 3 TestCircle の実行結果
続いて、図 2 のサンプルプログラムについて解説する。1 行目は android プロジェクトを作成した際に指定したパッケージ名である。他のプログラムから呼び出される際に、名称が重ならないように、開発者の PCのドメイン名等を付加することも多いが、本稿では簡単な名前のままとする。続いて、このプログラム中で必要となるクラスライブラリを import する。どのクラスライブラリが必要となるかは、マニュアルで確認す
る 必 要 が あ る が 、 android.app.Activity とandroid.os.Bundle は Android アプリに必須のものであり、eclipse でプロジェクトを立ち上げた際にデフォルトで import されている。
ここからがプログラムの本体であり、まず、Activity
ク ラ ス を 継 承 し 、 TestCircle ク ラ ス を 作 成 す る 。
TestCircle クラスで最初に記述することは、図 1 で解説した Activity に関するメソッドのうち、最初に呼ばれる onCreate()を override することである。このサンプルプログラムでは TestCircle クラスが onCreate()された際に、MyCircleView クラスのインスタンスが作成され、TestCircle クラスの content として表示される。
次に、MyCiecleView クラスについて解説する。このクラスは、View クラスのサブクラスとして定義されており、setFocusable(true)の時点で onDraw()メソッドが呼び出され、canvas に指定されたグラフィックスを表示するものである。具体的には、プログラム中の「//円の描画」や「//円の塗り潰し」以下に記述されてい計算工学

続いて、図 5 のリストを入力し、エミュレータを実行すると図 4 の実行結果が得られる。図 4 で青い丸が描かれている箇所が画面タッチされた場所であるが、エミュレータで実行する際には、画面タッチ入力の代わりに、PC のマウスで左クリックにより場所を指定し実行することになる。

(21-3)

図 4 TestTouch の実行結果

Vol.17, No.1 2012

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (2)package touch.android;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.graphics.*;
import android.os.Bundle;
import android.view.MotionEvent;import android.view.View;
public class TestTouch extends Activity {//アプリの初期化@Override
public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);
TestTouchView view =new TestTouchView(getApplication());
setContentView(view);}}//タッチイベントの処理
class TestTouchView extends View {private ArrayList<Point> points;//コンストラクタ
public TestTouchView(Context c) {super(c);setFocusable(true);
points = new ArrayList<Point>();}//タッチイベント
public boolean onTouchEvent(MotionEvent event) {Point p = new Point();
p.x = (int)event.getX();
p.y = (int)event.getY();
points.add(p);this.invalidate();return true;}//描画
protected void onDraw(Canvas canvas) {canvas.drawColor(Color. WHITE );Paint paint = new Paint();
paint.setColor(Color. BLUE );
paint.setStyle(Paint.Style. FILL );for (int i=0; i<points.size(); i++) {Point p = points.get(i);canvas.drawCircle(p.x, p.y, 20, paint);}}}

java.util.ArrayList を用い、また、タッチイベント処理のために android.view.MotionEvent が必要となる。
プログラムの全体的な構成についてもサンプル 1 とほぼ同様で、Activity クラスの派生である TestTouch クラスから View クラスの派生である TestTouchView クラスが呼び出されている。
実際にユーザが画面をタッチしてタッチイベントとして Android OS が認識すると、onTouchEvent()メソッ ド が 呼 び 出 さ れ 、 新 し く Point が 追 加 さ れ た 後 、event.getX()、event.getY()によりタッチされた画面の位置情報が Point に付加される。続いて、TestTouchView
クラス内の onDraw()メソッドが呼び出され、背景を白色、円の色を青色、円の描画方法を塗り潰しに指定した後、for ループを用いることにより、これまでにタッチ入力された全ての点に対して円を描画する。このように、Android アプリで最もよく用いるタッチ入力はandroid.view.MotionEvent ク ラ ス を 用 い て 、 単 純 にevent.getX()な ど と す る だ け で 簡 単 に プ ロ グ ラ ム 中 から利用することが出来る。
また、このプログラムは、最後の for ループの部分を図 6 のように修正することにより、簡単なお絵かきツールになる。
if( points.size()>1 ) {for (int i=1; i<points.size(); i++) {Point p = points.get(i-1);
Point q = points.get(i);canvas.drawLine(p.x, p.y, q.x, q.y, paint);}}

図 6 TestTouch の修正
ただし、変数 q を新たに定義する必要があるため、プログラム中の Point p = new Point();の次の行に Pointq = new Point();の一行を付け加える必要がある。この修正は、入力された点が 2 点以上ある場合に、各点を順に結ぶ線を表示するものであり、お絵かきツールの最も簡単な例となっている。図 6 の修正を施したアプリの実行結果を図 7 に示す。

図 5 サンプルプログラム 2（TestTouch）
続いて、図 5 のプログラムについて解説する。最初の package と import の部分はサンプル 1 とほぼ同様であるが、タッチ入力された複数の点を記憶するために計算工学(21-4)

図 7 TestTouch 修正後の実行結果
Vol.17, No.1 2012

チュートリアル３

スマートフォンアプリ開発入門 - iOS vs. Android (2)iOS アプリ開発(1) OpenGL ES による描画
前号の 4 章「Xcode プロジェクト作成」では、OpenGLをベースにしたサンプルプロジェクトの動作確認までを行った。本稿ではこれを利用し、三角形の 2D 描画、また 4 面体による 3D 描画、タッチスクリーンによる操作を行うアプリ作成について解説する。
iOS と Android ではグラフィックス用ライブラリとして OpenGL のサブセットである OpenGL ES(OpenGLfor Embedded Systems) が 採 用 さ れ て い る 。 前 節 のAndroid における描画についても OpenGL を利用することも可能であり、iOS と Android 用アプリを開発する時に、描画部分については OpenGL をベースにしたソースを利用できることになる。本稿では OpenGL やiOS の記述言語である objective-c については、一部のみの解説となるため、詳細については他の文献などを参考にしていただきたい。
なお、前号で使用した Xcode のバージョンは 3.2.5であったが、iOS 5 のリリースにともない、Xcode も iOS5 に対応したバージョン 4 が主流となりつつある。
Xcode のバージョン 3 と 4 では大幅に変更が加えられているため、今後はバージョン 4 での解説が望ましいが、前号からの継続性を考え、今回もバージョン 3.2.5を使用したサンプルを用いた。
(2) 2D グラフィックス(i) レンダラー指定
レ ン ダ ラ ー (rendering:画 像 を 生 成 し 表 示 さ せ る )に はES1Renderer(OpenGL ES 1.1) と ES2Renderer(OpenGLES 2.0)が利用できるが、今回は ES1 のみを使用する。
前 号 で 作 成 し た 「 NAME01 」 プ ロ ジ ェ ク ト を 開 き 、Classes 内のファイルから「EAGLView.m」をクリックする(図 8)。下部ウィンドウにソースプログラムが表示されるので、ソース内の任意の場所をクリックすると、行数が上部に表示される。これを参考に 45 行目の行頭に「//」を挿入する(図 9)。「//」はコメントアウトであり、この行を無効とする。

さ れ て いる が 、 iPad の ス クリ ー ン では 「 横： 縦 」 が「768:1020」で構成されているため、初期状態では表示形状に差が生じる。そこで、glOrthof 関数により座標系の設定を変更する。例えば画面左上の(x,y,z)座標を (-1.0,1.33,1.0) 、 右 下 を (1.0,-1.33,-1.0) と す る に は 、「ES1Renderer.m」の 69 行目に、図 10 の 2 行目を追加する（1 と 3 行目は記載済）。ただし 2D 画面では z 座標は意味を持たない。
glLoadIdentity();
glOrthof(-1.0f, 1.0f, -1.33f, 1.33f, 1.0f, -1.0f);
glMatrixMode(GL_MODELVIEW);

図 10 修正部分 2
次にサンプルで設定されているグラフィックの上下移動を止めるために、56 行目と 72,73 行目(上記の69 行目を挿入しているため、オリジナルファイルからは行数が異なる)をコメントアウトする(図 11)。
//static float transY = 0.0f;//glTranslatef(0.0f,(GLfloat)(sinf(transY)/ 2.0f),0.0f);//transY += 0.075f;

図 11 修正部分 3
ここまでの修正を行い「ビルドと実行」により、図12(左)に示す長方形が静止して表示される。

図 12 2D(左)と 3D(右)の表示画面

図 8 ソースプログラムの選択の様子//renderer = [[ES2Renderer alloc] init];

図 9 修正部分 1(ii) 座標系の設定
表示画面の座標系初期状態は、縦横比が 1:1 に設定
計算工学(iii) 三角形の描画「ES1Renderer.m」のソースを見てみると、表示した四角形の形状と色の定義の場所が 42 行目以降の図 13の部分であることがわかる。配列 squareVertices で、4つの頂点(x,y)座標を定義し、squareColors で 4 つの頂点の色(Red, Green, Blue, 透明度)を定義している。図12(左)の表示結果から、頂点間の色については補完されていることがわかる。78 行目の glVertexPointer 関数(図 14)により squareVertices を登録するが、第 1 引数は2D では「2」、3D では「3」を指定する。83 行目のglDrawArrays 関数(図 14)の第 1 引数は描画モードを指定するが、「GL_TRIANGLE_STRIP」は三角形を連続(21-5)

Vol.17, No.1 2012

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (2)して描画するため、ここでは 2 つの三角形を連続させ四角形を描画している。squareVertices の最初の 3 つの頂点で三角形を 1 つ描画し、2 から 4 番目の 3 つの頂点で 2 つ目の三角形を描画している。第 3 引数は描画する頂点の数である。て四面体を1つ描写する場合、描画する頂点数は、3角形 の 頂 点 数 (3) × 個 数 (4) ＝ 12 と な る た め 、 81 行 目 の
glDrawArraysの最後の引数、頂点の数は12を指定する。
これらの変更と、座標、色を図17のように指定すると、四面体が1つ描画される。

static const GLfloat squareVertices[] = {-0.5f,-0.33f,0.5f,-0.33f,-0.5f,0.33f,0.5f,0.33f,

static const GLfloat squareVertices[] = {0.0f, 0.7f, 0.0f,-0.7f, 0.0f, 0.0f,0.7f, 0.0f, 0.0f,};-0.7f, 0.0f, 0.0f,

static const GLubyte squareColors[] = {255, 255,0.0f, 0.0f, 0.7f,0, 255,0.0f, 0.7f, 0.0f,0, 255, 255, 255,0,0,255,

0,0,0.0f, 0.0f, 0.7f,0, 255, 255,0.7f, 0.0f, 0.0f,};

0.0f, 0.7f, 0.0f,

図 13 座標と色の定義部分
0.7f, 0.0f, 0.0f,

glVertexPointer(2, GL_FLOAT, 0, squareVertices);-0.7f, 0.0f, 0.0f,

図 14 glVertexPointer 関数

0.0f, 0.0f, 0.7f,};

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

図 15 glDrawArrays 関数static const GLubyte squareColors[] = {100, 100, 100, 255,

ここで、描画モードを「GL_TRIANGLES」にするこ

25, 100, 100, 255,とにより、独立した三角形の描画が可能となる。これ

55, 0, 200, 255,

らの部分を図16のように変更を行うことにより、三角100, 100, 100, 255,形が描画される。なお、配列名はtriangleVerticesなどと

25, 100, 100, 255,変更した方が望ましいが、ここではそのまま

55, 0, 200, 255,squareVerticesを使用している。
100, 100, 100, 255,

static const GLfloat squareVertices[] = {-0.5f,-0.5f,

25, 100, 100, 255,0.5f,-0.5f,

55, 0, 200, 255,0.0f,0.5f,};

100, 100, 100, 255,

static const GLubyte squareColors[] = {25, 100, 100, 255,255, 255,55, 0, 200, 255,0, 255,};

0, 255, 255, 255,255,0, 255, 255,

図 17 修正部分 5};

ただし、このまま表示しても正面からの静止画しかglDrawArrays(GL_TRIANGLES, 0, 3);

描画されないため、グラフィックを回転させ3D描画を

図 16 修正部分 4確認するために、glOrthof関数からglDrawArrays関数までの変更後の部分を図18に示す。また、3D描画では手(3) 3D グラフィックス

前の面に隠れている奥の面を描画しない陰面処理を行

3D描画ではz座標情報を、画面から手前方向がz正方
向 、 奥 方 向 が z 負 方 向 と し て 付 加 す る 。 76 行 目 の「glVertexPointer」第1引数は、3Dではx,y,zの3つの座標になるため｢3｣を指定する。三角形を4つ張り合わせ計算工学

わないと、視点からの正しい画像が描画されない。そこ で 深 度 バ ッ フ ァ を 用 い てこ の 処 理 を 行 っ た [1]な どを参考に「ES1Renderer.m」の修正を加えることにより、図12(右)に示す四面体が回転されて表示される。

(21-6)

Vol.17, No.1 2012

チュートリアル

スマートフォンアプリ開発入門 - iOS vs. Android (2)glOrthof(-1.0f, 1.0f, -1.33f, 1.33f, 1.0f, -1.0f);

CGPoint pt0, pt1, center;

glMatrixMode(GL_MODELVIEW);

CGFloat x, y, length, rotate;

glRotatef(0.3f, 1.0f, 1.0f, 0.0f);

NSArray* array;//glLoadIdentity();//glTranslatef(0.0f,(GLfloat)(sinf(transY)/

array = [[event touchesForView:self] allObjects];2.0f),0.0f);

pt0 = [[array objectAtIndex:0]locationInView:self];//transY += 0.075f;

pt1 = [[array objectAtIndex:1]locationInView:self];

glClearColor(0.5f, 0.5f, 0.5f, 1.0f);

y = pt0.y - pt1.y;

glClear(GL_COLOR_BUFFER_BIT);

length = sqrt( x * x + y * y );x = pt0.x - pt1.x;

center.x = x / 2 + pt1.x;
glVertexPointer(3, GL_FLOAT, 0, squareVertices);

center.y = y / 2 + pt1.y;

glEnableClientState(GL_VERTEX_ARRAY);

rotate = atan2( y, x );glColorPointer(4, GL_UNSIGNED_BYTE, 0,

図 20 マルチタッチ座標squareColors);
glEnableClientState(GL_COLOR_ARRAY);//glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
glDrawArrays(GL_TRIANGLES, 0, 12);

図 18 修正部分 4(4) マルチタッチ機能の実装
タッチイベントの処理を理解する上で図 19 に簡単な例を示す。スクリーンがタッチされた時に呼ばれるメソッド(関数)、touchesBegan を利用し、タッチされた座標をコンソールに表示するソースである。

ここでは、2 本指でタッチされた座標情報を、pt0, pt1に格納し、そこから 2 点間の距離、中心座標、回転用角度を計算している様子がわかる。
最 後 に 、 今 回 紹 介 し た 例 を 応 用 し 、 ADVENTURE
System(Open Souce CAE)による解析結果から、表面パッチ情報(三角形パッチおよび相当応力コンター)を読み込み、iPad 上に表示し、タッチ操作により解析結果を確認するシステムの様子を図 21 に示す[2]。

- (void)touchesBegan:(NSSet *)toucheswithEvent:(UIEvent *)event{UITouch* touch = [touches anyObject];
CGPoint pt = [touch locationInView:self];
CGFloat glx = (pt.x / 768.0f) * 2.0f - 1.0f;
CGFloat gly = (pt.y / 1020.0f) * -2.67f + 1.33f;
NSLog(@"(%f, %f)", glx, gly);

図 21 CAE 解析結果のタブレット端末での表示}

図 19 タッチイベント関数

４

おわりに本 チ ュ ー ト リ ア ル で は 第 1回 目 に Android ア プ リ とタッチされた座標が(pt.x, pt.y)に返されるが、これらのiOSアプリを開発するための開発環境設定について解

値は画面左上が(0,0)、右下が(768,1020)に設定されてい説を行い、本稿では各アプリ開発の基礎的な内容につるスクリーン座標となっているため、これらを図10でいて解説を行った。次回はより高度なアプリの開発手指定した座標系(glx, gly)に変換し表示している。図19

法について解説を行うとともに、非常に便利で有用なの部分をEAGLView.mの、最終行「@end」の上に加え、アプリ開発ツールが多くリリースされ、広く利用され「ビルドと実行」を行い、「実行」メニューの「コンているため、それらについても紹介する予定である。

ソール」をクリックし、表示されるコンソールウィンドウに、タッチされた座標が表示される。

参考文献

同様に、ドラッグされたときに呼ばれるメソッド
touchesMoved、タッチが終了したときに呼び出される[1] WebOS Goodies: http://webos-goodies.jp/archives/
getting_started_with_opengl_on_iphone.html

メソッドtouchesEndedなどがあり、これらの中で移動[2] 塩谷隆二, 大橋秀樹, 白柳翔太, スマートフォン端や回転の座標情報を獲得し描画に反映させることがで

末 を 用 い た ク ラ ウ ド 型 CAEシ ス テ ム , 第 16回 計 算きる。図20にその一例を掲載する。

工学講演会, Vol.16, F-2-3.pdf, pp.1-2, 2011.

計算工学(21-7)

Vol.17, No.1 2012