LotosLabo

プログラミング技術とか気になった情報を載せていきます

Titanium moblieについて

f:id:lo25131:20140403231159p:plain

Titanium moblieとは

JavaScriptスマートフォンアプリを開発出来るものです。


開発環境

今回はまずAndroid向けの開発を行っていくので、Android SDKの準備が必要です。

そして、開発ツールにはTitanium Studioというものを使っていきます。

こちらよりインストールできます。
http://appcelerator.com

インストールするにはユーザー登録が必要であり、少し面倒ですがやっていきましょう。
すべてのインストールが終わったら起動していきます。


Titaniumの設定

起動するとワークスペースの設定が出てくると思います。
私はDocumentに作成しておきました。


まず最初にDashboardというのが立ち上がると思いますので、Get StartedタブのConfigure Native SDKsより
Android SDKをクリックしてインストールします。このチェックマークが✖ではなくなったら完了しているということです。また、サンプルを実行してみたいという方は、DashboardのDevelopタブのKitchen Sinkというのインストールしてください。そしてスマートフォンに接続して実行するとインストールされます。
起動するとUIのセットのようなものが入っていますので、それで動きが確認できます。


Titaniumの日本語化


これは日本語化したい方のみ見てください。別にしなくてもいいという方は飛ばしてください。

Titaniumの日本語化は基本的にEclipseと同じ手順で行えます。
まずここから日本語化のファイルをダウンロードします。
http://mergedoc.sourceforge.jp/

バージョンはなんでもいいです。

そしてもう一回こっちにアクセスしてダウンロードします。
http://sourceforge.jp/projects/blancofw/wiki/nlpack



この処理を2回程、Titaniumがダウンロードされたファイルの
featuresとpluginsに上書きしてください。



そして最後にTitniumStrudio.iniに
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
を追加してください。


※なおこの処理はTitaniumのウインドウを一回閉じてから行ってください。




Titaniumを始める

まずProjectを作成していきましょう。
ファイル => 新規 => プロジェクト => Titanium => Mobile App Projectをまず選んで行きます。
次にAlloyとClassicとあると思いますが、ここでClasscの方を選び、Default Projectを選択し、次へを押します。

そしてプロジェクト名、 App Id, URL等を書いていきます。

私はこんなかんじで書きました。

f:id:lo25131:20140403234725j:plain


ProjectNameは小文字と決まっています。
また、AppIdはcom.好きな名前.プロジェクト名にしてください。
URLはなんでもいいです。


それではまず最初に起動のテストをしていきます。
起動にはAndroidの実機でもいいですし、エミュレーターでも構いません。
私は今回はエミュレーターを使っていきます。

まず何も編集しない状態で、起動していきます。

こんなかんじになりました。





Hello worldの表示

ではここで文字を表示する流れを説明します。

①windowを作る
②viewを作る
③labelを作る
④labelをviewに追加
⑤viewをwindowに追加
⑥windowをオープン


このような手順を踏んで表示させていきます。

プログラムは app.jsに記述していきます。
app.jsの内容は全部消してコレを書いていきます。

var win = Ti.UI.createWindow({
	backgroundColor: 'white'
});

var view = Ti.UI.createView();

var label = Ti.UI.createLabel({
		text: 'Hello world',
		height: 50,
		width: 200,
		top: 180,
		color: 'red'
});

view.add(label);

win.add(view);

win.open();



ここではウインドウを作成して、バックグラウンドカラーを白にしました。
そしてViewとラベルを作成し、文字をHellow world、高さを32、横が150、縦が120、色が赤と指定しました。
後は上の手順通りです。

起動するとこうなります。

f:id:lo25131:20140404000918j:plain


ボタンの表示

ボタンを押してアラートを出す処理をします。

var button = Ti.UI.createButton({
	title: 'push me!',
	top: 180,
	width: 200,
	height: 50
});

button.addEventListener('click', function(e){
	alert('you pushed me!');
});

view.add(button);


起動してみるとこんなかんじです。
ちょっと文字の位置がずれてますが気にしないでください。

f:id:lo25131:20140404001847g:plain


また、alertのところをこのようにすると画面ではなく、
Titaniumの方のコンソールに表示されます。

Ti.API.info('You pushed me!');

アラートの表示

先程もアラートを表示してみましたが、アラートの選択肢を増やしてみましょう。

var win = Ti.UI.createWindow({
	backgroundColor: 'white'
});
var view = Ti.UI.createView();

var alert = Ti.UI.createAlertDialog({
	title: 'delete?',
	message: 'Are you sure?',
	buttonNames: ['OK', 'Cancel', 'HELP'],
	canel: 1
});

alert.addEventListener('click', function(e){
	Ti.API.info(e.index);
});

var button = Ti.UI.createButton({
	title: 'push me!',
	top: 180,
	width: 200,
	height: 50
});

button.addEventListener('click', function(e){
	alert.show();
});

view.add(button);

win.add(view);

win.open();



alertの部分を新たに作成して選択肢を増やしてみました。


ファイルの分割

ファイルを分割して他のファイルから呼び出せるようにします。

まずApp ExplorerのResorcesを右クリックして新規からファイルを作成してください。
そしてwin.jsというファイルを作成します。
これが今回はわけるファイルです。

これにwindowに関するファイル以外をすべて写します。

win.js

var view = Ti.UI.createView();

var alert = Ti.UI.createAlertDialog({
	title: 'delete?',
	message: 'Are you sure?',
	buttonNames: ['OK', 'Cancel', 'HELP'],
	canel: 1
});

alert.addEventListener('click', function(e){
	Ti.API.info(e.index);
});

var button = Ti.UI.createButton({
	title: 'push me!',
	top: 180,
	width: 200,
	height: 50
});

button.addEventListener('click', function(e){
	alert.show();
});

view.add(button);

//win.add(view);
Ti.UI.currentWindow.add(view);


そしてapp.jsはこのようになりました。

var win = Ti.UI.createWindow({
	url: 'win.js',
	backgroundColor: 'white'
});

win.open();



ファイルを分ける際には読み込むプログラムを書いていかなければなりません。
まずapp.jsの方にurl: 'win.js'というのを追加しました。
そしてwin.jsには最後のwindowに追加する処理を、app.jsのwindowに追加すると訂正しました。

これだけでなんと先ほどと変わらない処理ができるのです。


Windowの切り替え

二つのウインドウを作成し、ボタンで切り替えできるようにしました。

var win1 = Ti.UI.createWindow({
	backgroundColor: 'white'
});

var win2 = Ti.UI.createWindow({
	backgroundColor: 'white'
});

var view1 = Ti.UI.createView();
var view2 = Ti.UI.createView();

var button1 = Ti.UI.createButton({
	title: 'Open Win 2',
	top: 180,
	width: 200,
	height: 50
});

button1.addEventListener('click', function(e){
	win2.open();
});

var button2 = Ti.UI.createButton({
	title: 'Win2 close',
	top: 180,
	width: 200,
	height: 50
});

button2.addEventListener('click', function(e){
	win2.close();
});

view1.add(button1);
view2.add(button2);

win1.add(view1);
win2.add(view2);

win1.open();



それぞれ二つずつ作成し、ボタンを押した時にwin2を開き、win2で押したら
win2を閉じるようにしました。

画像を表示する

var win = Ti.UI.createWindow({
	backgroundColor: 'blue'
});

var view = Ti.UI.createView();
var image = Ti.UI.createImageView({
	image: 'body.jpg',
	width: 200
});

view.add(image);
win.add(view);
win.open();



画像はResorcesの方にコピーしておきます。
実機の場合ではデバッグしないと表示されません。

f:id:lo25131:20140404014221j:plain

Webページの表示

var win = Ti.UI.createWindow({
	backgroundColor: 'white'
});

var view = Ti.UI.createView();

var web = Ti.UI.createWebView({
	url: 'http://lotoslabo.com'
});

view.add(web);

win.add(view);
win.open();


f:id:lo25131:20140404014209j:plain


地図を表示

var win = Ti.UI.createWindow({
	backgroundColor: 'white'
});

var view = Ti.UI.createView();
	
var map = Ti.Map.createView({
	mapType: Ti.Map.STANDARD_TYPE,
	region: {latitude:35.645, longitude:139.71, latitudeDelta:0.01, longitudeDelta:0.01},
	animate: true,
	regionFit: true,
	width: 300,
	height: 400

});

view.add(map);
win.add(view);
win.open();


フォームを作る

var win = Ti.UI.createWindow({
	backgroundColor: 'black'
});

var view = Ti.UI.createView();

var tf = Ti.UI.createTextField({
	color: '#333333',
	hittText: 'name',
	height: 35,
	top: 10,
	left: 10,
	width: 250,
	borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});

var button = Ti.UI.createButton({
	title: 'submit',
	top: 100,
	left: 10,
	width: 100,
	height: 50
});

button.addEventListener('click', function(e){
	Ti.API.info(tf.getValue());
});


view.add(button);
view.add(tf);

win.add(view);
win.open();