HTMLとJavaScriptでiPhoneアプリを作る時に加速度センサを使う方法

まず前回のエントリーの「HTMLとJavaScriptでiPhoneアプリを超簡単に作る方法」を読んでください。
今回は前回のエントリーの続きとして解説します。

HTMLファイルの準備

今回は、加速度センサによって得られるxyzの値をそのまま表示するHTMLを使います。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<script type="text/javascript">
		// このファンクションがアプリより実行される。
		// 加速度センサの値はパラメータとしてJSON形式で取得。
		function accelerometer(accelerometer) {
			document.getElementById("x").innerHTML = accelerometer.x;
			document.getElementById("y").innerHTML = accelerometer.y;
			document.getElementById("z").innerHTML = accelerometer.z;
		}
	</script>
</head>
<body onTouchMove="event.preventDefault();">
x=<span id="x"></span><br>
y=<span id="y"></span><br>
z=<span id="z"></span><br>
</body>
</html>

このHTML中にファンクション"accelerometer"を定義しています。このファンクションを加速度センサの値取得時に実行するようにします。

Web表示のコード追加

前回のおさらいです。

"<プロジェクト名>AppDelegate.h”へUIWebViewのインスタンスの変数定義を追加します。

@interface sampleHTMLAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    UIWebView *view;    // この行を追加する
}

"<プロジェクト名>AppDelegate.m”のapplicationDidFinishLaunchingメソッドへUIWebViewを使うコードとHTMLを表示するコードを追加します。

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
    [window makeKeyAndVisible];
	
    /* ここ以下を追加 */
    view = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
    [window addSubview:view];
    NSString *filepath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];    // ここで表示するHTMLファイルを指定する
    NSURL *fileurl = [NSURL fileURLWithPath:filepath];
    [view loadRequest:[NSURLRequest requestWithURL:fileurl]];
    /* ここまで */
	
}

"<プロジェクト名>AppDelegate.m”のdeallocメソッドへUIWebViewで使ったメモリを解放する処理を追加します。

- (void)dealloc {
    [view release];    // ここを追加する
    [window release];
    [super dealloc];
}

加速度センサを使う

"<プロジェクト名>AppDelegate.h”のsampleHTMLAppDelegateへ"UIAccelerometerDelegate"のインターフェイスを追加し、UIAccelerometerのインスタンスの変数定義を追加します。

// インターフェイス にUIAccelerometerDelegateを追加
@interface sampleHTMLAppDelegate : NSObject <UIApplicationDelegate, UIAccelerometerDelegate> {
    UIWindow *window;
    UIWebView *view;    // この行を追加する
    UIAccelerometer *accelerometer;    // UIAccelerometerのインスタンスの変数定義を追加
}

"<プロジェクト名>AppDelegate.m”のapplicationDidFinishLaunchingメソッドへUIWebViewを使うコードとHTMLを表示するコードを追加します。

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
    [window makeKeyAndVisible];
	
    /* ここ以下を追加 */
    view = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
    [window addSubview:view];
    NSString *filepath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];    // ここで表示するHTMLファイルを指定する
    NSURL *fileurl = [NSURL fileURLWithPath:filepath];
    [view loadRequest:[NSURLRequest requestWithURL:fileurl]];
    /* ここまで */
	
    /* ここ以下を追加（加速度センサ） */
     accelerometer = [UIAccelerometer sharedAccelerometer];
     accelerometer.updateInterval = 1.0f / 10.0f;    // 読み取り間隔の設定
     accelerometer.delegate = self;
    /* ここまで（加速度センサ） */

}

"<プロジェクト名>AppDelegate.m”へaccelerometerメソッドを追加。
このaccelerometerはaccelerometer.updateIntervalで設定した間隔で呼ばれ、パラメータから加速度センサの値を取得できます。

- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {

}

コードからJavaScriptを実行

UIWebViewには表示されているHTMLに対してJavScriptを実行できるインスタンスメソッド"stringByEvaluatingJavaScriptFromString"があり、このメソッドを利用してHTML中で定義したJavaScriptのファンクションを実行します。そこで前の項目で定義したaccelerometerメソッド中でHTML内のJavaScriptで定義したファンクション"accelerometer"を呼ぶ例を書きます。加速度センサから取得した値はJSON形式でパラメータとして渡します。

    // 加速度センサから取得した値をJavaScriptのJSON形式の文字列に変換
    NSString *accelerationObject = [NSString stringWithFormat:@"{x:%f,y:%f,z:%f}", acceleration.x, acceleration.y, acceleration.z];
    // 実行するJavaScriptのコードを文字列で生成
    NSString *functionString = [NSString stringWithFormat:@"if(accelerometer&&typeof(accelerometer)=='function'){accelerometer(%@)}",accelerationObject];
    // 生成したJavaScriptのコードの文字列を実行
    [view stringByEvaluatingJavaScriptFromString:functionString];