トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Titanium Mobile/Web API連携/Webサービスと連携したアプリ作成講座

Last-modified: 2014-02-07 (金) 09:44:52 (1380d)
Top / Titanium Mobile / Web API連携 / Webサービスと連携したアプリ作成講座

スマートフォンアプリ開発環境「Titanium」を知る講座 - Webサービスと連携したアプリ作成に行ってきました。 HTTPを使用したソースが色々参考になりました。

(1) ブラウザで試しにQiitaのAPIにアクセス

(2) プロジェクトを作成

  1. [File] - [New] - [Mobile Project] - [Classic] - [Default Project]
  2. Project name: QiitaViewer
  3. App Id: jp.papuu.QiitaViewer
  4. iPhone, Androidのみにチェック

(3) app.jsを色々全書き換えして試す

(a) httpClientを用いた基本的なプログラム

var xhr, qiitaURL, method;

qiitaURL = 'http://qiita.com/api/v1/items';
method = 'GET';
xhr = Ti.Network.createHTTPClient();
xhr.open(method, qiitaURL);
xhr.onload = function() {
	var body;
	if (this.status === 200) {
		body = JSON.parse(this.responseText);
		Ti.API.info(body);
	} else {
		Ti.API.info('error: status code is ' + this.status);
	}
}
xhr.onerror = function(e) {
	var error;
	error = JSON.parse(this.responseText);
	Ti.API.info(error.error);
}
xhr.timeout = 5000;
xhr.send();

(b) アプリ中のsample.jsonをTableViewで表示

まずは通信無しで、アプリ内に配置したjsonファイルの内容をTableViewで表示してみます。
jsonファイルは次をResourcesフォルダ直下に配置します。
https://raw.github.com/h5y1m141/20130817-tistudy/master/sample.json

var sample, file, body, mainTable, win, i, len, row, rows, textLabel;

sample = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'sample.json');
file = sample.read().toString();
body = JSON.parse(file);

win = Ti.UI.createWindow({
	title: 'QiitaViewer'
});

mainTable = Ti.UI.createTableView({
	width: 'auto',
	height: 'auto',
	backgroundColor: '#fff',
	left: 0,
	top: 0
});
rows = [];
for (i = 0, len = body.length; i < len; i++) {
	row = Ti.UI.createTableViewRow({
		width: 'auto',
		height: 40,
		borderWidth :0,
		className: 'entry',
		color: '#222'
	});
	textLabel = Ti.UI.createLabel({
		width: 'auto',
		height: 30,
		top: 5,
		left: 5,
		color: '#222',
		cont: {
			fontSize: 16,
			fontWeight: 'bold'
		},
		text: body[i].title
	});
	row.add(textLabel);
	rows.push(row);
}
mainTable.setData(rows);

win.add(mainTable);
win.open();

(c) Qiita投稿情報のテキストをTableViewで表示

var xhr, qiitaURL, method, mainTable, win;

win = Ti.UI.createWindow({
	title: 'QiitaViewer'
});

mainTable = Ti.UI.createTableView({
	width: 'auto',
	height: 'auto',
	backgroundColor: '#fff',
	left: 0,
	top: 0
});

qiitaURL = 'http://qiita.com/api/v1/items';
method = 'GET';

xhr = Ti.Network.createHTTPClient();
xhr.open(method, qiitaURL);
xhr.onload = function() {
	var body, i, len, row, rows, textLabel, iconImage, imagePath;
	if (this.status === 200) {
		body = JSON.parse(this.responseText);
		rows = [];
		for (i = 0, len = body.length; i < len; i++) {
			Ti.API.info(body[i].title);
			row = Ti.UI.createTableViewRow({
				width: 'auto',
				height: 40,
				borderWindth: 0,
				className: 'entry',
				color: '#222'
			});
			textLabel = Ti.UI.createLabel({
				width: 'auto',
				height: 30,
				top: 5,
				left: 5,
				color: '#222',
				font: {
					fontSize: 16,
					fontWeight: 'bold'
				},
				text: body[i].title
			});
			row.add(textLabel);
			rows.push(row);
		}
		mainTable.setData(rows);
		win.add(mainTable);
		win.open();
	} else {
		Ti.API.info('error: status code is ' + this.status);
	}
};

xhr.onerror = function(e) {
	var error;
	error = JSON.parse(this.responseText);
	Ti.API.info(error.error);
}
xhr.timeout = 5000;
xhr.send();

(d) Qiita投稿情報のタイトル・アイコンをTableViewで表示

var xhr, qiitaURL, method, mainTable, win;

win = Ti.UI.createWindow({
	title: 'QiitaViewer'
});

mainTable = Ti.UI.createTableView({
	width: 'auto',
	height: 'auto',
	backgroundColor: '#fff',
	left: 0,
	top: 0
});

qiitaURL = 'http://qiita.com/api/v1/items';
method = 'GET';

xhr = Ti.Network.createHTTPClient();
xhr.open(method, qiitaURL);
xhr.onload = function() {
	var body, i, len, row, rows, textLabel, iconImage, imagePath;
	if (this.status === 200) {
		body = JSON.parse(this.responseText);
		rows = [];
		for (i = 0, len = body.length; i < len; i++) {
			row = Ti.UI.createTableViewRow({
				width: 'auto',
				height: 60,
				borderWindth: 0,
				className: 'entry',
				color: '#222'
			});
			textLabel = Ti.UI.createLabel({
				width: 250,
				height: 30,
				top: 5,
				left: 60,
				color: '#222',
				font: {
					fontSize: 16,
					fontWeight: 'bold'
				},
				text: body[i].title
			});
			imagePath = body[i].user.profile_image_url;
			iconImage = Ti.UI.createImageView({
				width: 40,
				height: 40,
				top: 5,
				left: 5,
				defaultImage: 'logo.png',
				image: imagePath
			});
			row.add(textLabel);
			row.add(iconImage);
			rows.push(row);
		}
		mainTable.setData(rows);
		win.add(mainTable);
		win.open();
	} else {
		Ti.API.info('error: status code is ' + this.status);
	}
};

xhr.onerror = function(e) {
	var error;
	error = JSON.parse(this.responseText);
	Ti.API.info(error.error);
}
xhr.timeout = 5000;
xhr.send();