Titanium Mobile カメラ起動と写真のアップロード

2011/11/08

さて簡易なrssリーダーは完成したので、次の目標は、カメラで撮った写真をアップロードする、です。

カメラを使った処理は、エミュレータでは起動しないので、実機でコンパイルするしかないのが難点です！

app.jsでカメラ起動

まずはボタンクリック→カメラ起動の流れを作ってみます。

app.jsの中身はこんな感じ

// window 設定
var win = Titanium.UI.createWindow({
    title:'CameraTest',
    backgroundColor:'#fff'
});

// カメラ起動ボタン
var b1 = Titanium.UI.createButton({
	title:'camera start',
	height:40,
	width:200,
	top:10,
});

//クリック時の動作
b1.addEventListener('click', function(e)
{
	var win = Titanium.UI.createWindow({
		url:"camera.js",
		title:"camera",
	});
	win.open(win,{animated:true});
});
//windowにボタン追加
win.add(b1);
//window open
win.open();

これでクリックしたらcamera.jsが呼び出されるシンプルな画面ができます。

camera.jsでカメラ操作

で実際にカメラを呼び出して操作するcamera.jsはこんな感じ

var win = Titanium.UI.currentWindow;
Titanium.Media.showCamera({

	success:function(event)
	{
		var cropRect = event.cropRect;
		var image = event.media;
		if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO)
		{
			// カメラで撮った画像を表示する
			var imageView = Ti.UI.createImageView({
				width:win.width,
				height:win.height,
				image:event.media
			});
			win.add(imageView);

			// カメラで撮った画像をアップロード（uploadCameraImageはあとで説明）
			uploadCameraImage(image);
		}
		else
		{
			alert("got the wrong type back ="+event.mediaType);
		}
	},
	cancel:function()
	{
	},
	error:function(error)
	{
		// create alert
		var a = Titanium.UI.createAlertDialog({title:'Camera'});

		// set message
		if (error.code == Titanium.Media.NO_CAMERA)
		{
			a.setMessage('Please run this test on device');
		}
		else
		{
			a.setMessage('Unexpected error: ' + error.code);
		}

		// show alert
		a.show();
	},
	saveToPhotoGallery:true,
	allowEditing:true,
	mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO]
});

これはcameraで画像を撮った場合と、エラーが起きた場合の処理を書いてます。その他、細かいパラメータはKitichenSinkをコピペしたままです。（内容はまだ分かってませんw）

画像のアップロード

画像をとった場合、uploadCameraImage() 関数で、そのまま画像をアップロードしちゃいます。

function uploadCameraImage(image){
	var xhr = Ti.Network.createHTTPClient();
	var url = "http://playispeace.com/ti/index.php";
	xhr.open('POST', url);
	xhr.send({media:image});
	xhr.onload = function(){
		var json = JSON.parse(xhr.responseText);
		// 以下jsonでごにょごにょする
	}
	xhr.onerror = function(){}
}

通信用のcreateHTTPClientオブジェクトでsendメソッドに{media:image}という形式でパラメータを渡し、POSTします。

画像を受信するサーバ側の処理

上記でリクエストしている、http://playispeace.com/ti/index.php の内容です。

// 画像保存先のディレクトリ
$save_dir ="/path/to/image/";

if(!isset($_FILES)){
		$json = "{\"error\":\"files\"}";
}elseif(!isset($_FILES["media"])){
		$json = "{\"error\":\"files_media\"}";
}elseif(!isset($_FILES["media"]["name"])){
		$json = "{\"error\":\"files_media_name\"}";
}else{
	$fname = $_FILES['media']['name'];
	$target_path = $save_dir . $fname;
	// アップロードファイルの保存
	if(!move_uploaded_file($_FILES['media']['tmp_name'],$target_path)){
		$json = "{\"error\":\"Can not Upload Image.{$fname}\"}";
	}else{
		$json = "{\"error\":\"\"}";

	}
}
// 処理結果をjsonで返す
header("Content-Type: text/javascript; charset=utf-8");
print $json;

先ほどsendメソッドにmediaという名前でPOSTしたので、phpも$_FILE[“media”]で受信できるようです。

かなりエラーを厳重に書いてますが、最初動作するまではこれぐらいしてjsonを返した方が動作の確認がしやすいのでお勧めです。

私は、この辺りでちょっと詰まりました。そもそもファイルがPOSTされていないのか、とか、実はFILEの名前が違うとか、デバッグしにくかったです。

完成！

これでとりあえず、ボタンクリック→カメラ起動→画像アップロード、という流れができました！

次の目標は、webサービスへのログイン機能とログオン認証です。