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

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

Last-modified: 2018-11-14 (水) 15:24:03 (32d)
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を用いた基本的なプログラム

#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();
}}