2011-07-01

Titanium MobileでTableViewの見た目を変えてみる。

dev

　TableViewの見た目をちょいとかっこいい感じにしてみたい、と思ったのでちょいと調べてみた。
　ざっとリファレンスを調べてみたけどわからなかったので、Kitchen Sinkにそういったものがないか、調べてみたらあったのでそれを参考に、backgroundImageに画像を指定してみる。
　（下の例だと、二項演算子を使って行ごとに表示を分けている）

var tblRows = [];
var rowIdx = 0;
while(dbRows.isValidRow()){
	tblRows.push({title:'' + dbRows.fieldByName('title') + '' ,
		hasChild:true,
		url:'' + dbRows.fieldByName('url') + '',
		backgroundImage:rowIdx++ % 2 == 0 ? 'off_1.png' : 'on_1.png'
	});
	dbRows.next();
}

　ここで使っている画像は、Kitchen Sinkで使われていたものを拝借した物。
　これを実行すると、行ごとに使用する背景が切り替わって表示される。

　背景画像は、行の幅、高さに合わせて表示される様子。
　小さい画像を使うとこのように引き伸ばされた感じになってしまう。

　selectedBackgroundImage や、 leftImage を使うことで、タップしたときに変更される背景色の色や、行の左に出てくるアイコンのような画像の指定をすることができる。
　このあたりをうまいこと使うと、ちょっとカッコイイ感じのアプリが作れるかもしれない。まあ、センスのあるデザインができれば、の話。

2011-06-30

開発環境について検討してみる（検討中）

dev

　ぼちぼちとTitatium Mobileでおうちプログラミングを楽しんでいたりするのだけども、ここいらでそろそろ環境についてみなおしてみたい。具体的にはエディタだ。
　エディタは、現在MacVimを使用している。あんまり使い込んでいるわけではないので、他のものを使ってもいいのだけど、まあなんとなく。

　で。何を使うにしても、補完がある程度はできたほうが色々と楽ができて良い。
　で、Vimの保管について調べてみたところ、neocomplcacheというのが良いらしい。
　https://github.com/Shougo/neocomplcache/wiki/Presentation-file
　なんでも、究極のVim的補完環境とのこと。カッコイイ。

　とりあえず、ダウンロードしてインストール。
　ざっと調べたところ、辞書補完というのができるらしい。
　早速、ファイルを用意して、いくつかの補完候補を登録してみる

createLable
createButton
createTabelView
...

　そして、.vimrcには

let g:neocomplcache_dictionary_filetype_list = {'default':'','javascript':$HOME/'.vim/js.dict'}

　と設定。
　Vimからneocomplcacheで辞書補完をしようとしてみたのだが、候補内容として出てこない。
　neocomplcacheを切って、:set dictionary で指定すると、うまく候補として出てきてくれたので、補完ファイル自体はおかしくないと思う。ということはneocomplcacheの設定の仕方がおかしいのだろうか。

　とりあえず、今日のところはこのへんで。

追記

　色々間違ってた。
　~~g:neocomplcache_dictionary_filetype_list~~
　g:neocomplcache_dictionary_filetype_lists ←最後のsが無かった

　~~$HOME/'.vim/js.dict~~
　$HOME.'/.vim/js.dict ←Pathが微妙に違ってた。
　
　

2011-06-29

Titanium MobileでDBにレコードを追加してみる。

dev

　使用するDBは、前日と同じくsqlite3

var btn = Titanium.UI.createButton({
	title:'+'
});
btn.addEventListener('click', function(e){
	var db = Titanium.Database.open('db');
	db.execute('begin transaction');

	db.execute("insert into url (title, url) values ('yahoo', 'http://www.yahoo.co.jp')");

	db.execute('commit');
	db.close();
});
win1.rightNavButton = btn;

　基本的には、
　DBを開く
　→トランザクション開始する
　→INSERT文のSQL実行する
　→トランザクションをコミットする
　→DBにを閉じる
　という、まことにもって基本通りの流れ。
　上記のコードの場合、右上の＋ボタンを押すと、データが登録される。画面を動的に再描画する部分については別処理として、今回は保留（つまり、画面を開き直さないと状態が変わらない）。
　昨日の画面と同じデータを使っているので、右上に追加した＋ボタンを押すと、yahooのデータが追加される。主キー指定していなかったので、複数件追加されてしまった。

　ところで。登録されたかどうか確認するために、開発環境にあるsqlite3のデータファイルの中身を確認してみたのだけど中身が入っていない。が、シュミレータの挙動を確認するとデータは追加されているらしい。
　なんでだ？と考え込んでしまったが、冷静に考えて見ればデプロイされたシュミレータ上にあるデータファイルの方に登録されているのだから、開発環境側にデータが入っているわけはない。
　デプロイされた側の中身を参照するいい方法がないものだろうか。

追記。

　発見した。
　~/Library/Application Support/iPhone Simulator/User/Application/アプリ別のディレクトリ/Library/Application Support/database/
　の下に、db名.sql の名称で保存されている。

2011-06-28

Titanium Mobile で、DBから取得した値を画面に表示してみる。

dev

　DBは、sqlite3を使用する。
　初期状態として、SQLite Database Browserを使用して、取得対象となるデータを予め用意しておいた。
　
　titleとurlをTEXT項目として持つテーブルを用意し、そこに対してSELECTを実行し、実行結果をもとに画面のTableView上に設定する。

// DBアクセス
var db = Titanium.Database.install('testdb.db', 'db');
var dbRows = db.execute('select * from url ');

var tblRows = [];

// 取得したデータの全行に対してデータを取得する
while(dbRows.isValidRow()){
	tblRows.push({title:'' + dbRows.fieldByName('title') + '' ,hasChild:true, url:'' + dbRows.fieldByName('url') + ''});
	dbRows.next();
}

// DBのデータ取得後にCloseしておく。
db.close();

var tblView = Titanium.UI.createTableView({
	data:tblRows
});

　上記のようなコードを書き、適切なwindowにaddすると、以下のようにDBのデータを元にTableViewが設定される。
　

　ポイントは、isValidRowとnextメソッドで、1行ずつ末尾まで順に処理していくというところだろうか。
　あと、Titanium.Database.install の引数が少し躓いた箇所。
　第一引数は、sqlite3ファイルのpath。第二引数の方は、開いたDBに対して付ける名称、というのが今のところの私の理解。Titanium.Databaseにopenというメソッドがあるのだけど、そちらの引数として渡したり出来る様子。

　今回参考にしたサイトは以下の通り。
　Titanium Mobile: Database Driven Tables with SQLite

2011-06-27

Titanium Mobileでファイル出力

dev

// ファイル取得
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory, 'test.txt');

// ファイルの中身を読み込む。ない場合は空白にしておく。
var fileData = f.read();
var val = (fileData) ? fileData.toString() : "";

// textAreaの生成。ファイルの中身を初期値(value)に指定
var ta1 = Titanium.UI.createTextArea({
    value:val,
    height:100,
    width:300,
    top:5,
    color:'#888',
    textAlign:'left',
    borderWidth:2,
    borderColor:'#bbb',
    borderRadius:5
});

// returnを押すたびに、textAreaの中身をファイルに出力（なければ新規作成される）
ta1.addEventListener('return', function(e){
	f.write(ta1.value);
});

　Titanium.Filesystem.getFileで取得した、File Objectには、 read の他にwrite というメソッドもある。
　使い方は簡単で、writeの引数に書きたい内容を指定してやればOK.
　（画像とかの出力については今回は検討しない。文字列の入出力を考えている。）

　上記のコードを適当なwindowにaddして実行すると、初回は空白のtextAreaで画面が起動する。
　なにか入力し、returnを押すと、その地点での内容がファイル出力されるので、次回起動時にはそちらから内容を読み込んでtextAreaに表示するようになっている。まあ、出力のタイミングはいくらでも変更できる。returnではなく、変更時に都度出力とか、用途に合わせて。

　ファイルの出力については、追記ではなく、上書きとなっている。
　コメントにも書いてあるが、ファイルが存在しない場合、新規作成した上で出力される。

　余談だけど、ここ最近の仕事ではvb.netを使っているので、javascriptとか書いていると、たまに文法が頭の中でこんがらがって、謎なコードを書いたりする。もうちょっと頻繁におうちコーディングをして、なれるようにしたい。

2011-06-26

バレエ発表会鑑賞

日記

　相方のバレエ発表会を見に行ってきた。
　今までは、カメラで録画しておいて、って依頼があって録画を頑張ってたのだけど、今回は業者が録画するって事でカメラを回す事ができなかった。が、おかげで踊っているところを初めてきちんと見ることができたような気がする。
　まあ、身内の贔屓目ってのもあるかもしれないけど、非常に優雅に格好良く踊っていた。普段どれくらい頑張ってたかを知っているので、見ていてかなりうれしかった。
　もっとも、あとで聞いてみるに、本人としてはまだまだ不満の残るところもあるみたい。
　素敵な趣味だと思うので、これからも長く続けていって欲しいところ。

2011-06-26

Titanium Mobileでファイルを読み込む。

dev

　昨日上手くできなかった件の対応。
　検索してみたところ、以下のサイトに知りたいことが記載されていた。
　http://aerial.st/archive/2011/04/15/parse-local-json-with-titanium/

　read()で得られたBLOBデータにたいし、toString()を行うと文字列として読み込むことができるようだ。
　さっそく試してみる。
　Resourcesディレクトリ(app.jsがあるところ)に、test.txt というファイルを作成し、中に

apple
google
amazon

　と書いておき、次のコードで読み込んで表示してみる

var f = Titanium.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory, 'test.txt');
var urlList = f.read().toString();

alert(urlList);

　これを実行してみると、ファイルの中身がalertされることが確認できた。

あんにんにっき。

日々思ったことや、おこったことを記録するブログ。要するに日記。