Titanium Mobile/Web API連携/Webサービスと連携したアプリ作成講座
スマートフォンアプリ開発環境「Titanium」を知る講座 - Webサービスと連携したアプリ作成に行ってきました。 HTTPを使用したソースが色々参考になりました。
(1) ブラウザで試しにQiitaのAPIにアクセス
(2) プロジェクトを作成
- [File] - [New] - [Mobile Project] - [Classic] - [Default Project]
- Project name: QiitaViewer
- App Id: jp.papuu.QiitaViewer
- iPhone, Androidのみにチェック
(3) app.jsを色々全書き換えして試す
(a) httpClientを用いた基本的なプログラム
#pre{{
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
#pre{{
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で表示
#pre{{
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で表示
#pre{{
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();
}}