- 追加された行はこの色です。
- 削除された行はこの色です。
*(1) QiitaViewerというプロジェクトを作成
[[スマートフォンアプリ開発環境「Titanium」を知る講座 - Webサービスと連携したアプリ作成>https://www.c-place.ne.jp/0000engine/pec_engine.cgi?mode=show&call_dir=../2024PrgSeminorDetail&engine_dir=../0000engine&search_mode=1&search_domain=CGI_SERIAL&search_word=20130716113930]]に行ってきました。
HTTPを使用したソースが色々参考になりました。以下はそのサンプルソースなどです。~
~
目次
#contents
*(2) app.jsを色々試す。
**
*(1) ブラウザで試しにQiitaのAPIにアクセス
-[[https://qiita.com/api/v1/items]]
-[[https://qiita.com/api/v1/users/h5y1m141@github]]
*(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();
}}
*参考資料 httpClient以外でHTMLをパースする方法
-[[YQLをTitaniumで使うと色々捗る | ZeBeVogue別館>http://d.hatena.ne.jp/zebevogue/20120421/1334990568]]
-[[Titanium mobile parse html | GitHub gist>https://gist.github.com/zeuxisoo/1016047]]
