読者です 読者をやめる 読者になる 読者になる

モロ屋

アキバではたらくWebエンジニア。JavaScript / AWS / Mac

Titanium Desktopを数日いじったので要点メモ

f:id:Molokheiya:20110319233256j:image


Titanium is Native

Titanium provides native performance, native UI & native capabilities, with over 1,000 APIs and growing. If you can dream it, you can build it.


タイタニウムではありません、チタニウムです。



AppceleratorのTitaniumをいじってます。

巷ではTitanium Mobileばかりが持てはやされていますが、実はDesktopもあります。


Titanium Mobile Application Development | Appcelerator Inc.


ただあんまり知られてないのと注目されてないので、実際どのレベルなのか分からなかったので

ここ数日間で触りだけいじってみました。


基本的にHTML5+CSS3+JavaScriptで書くわけで、Adobe AIRのようなRIAですな。

(DesktopはJavaScript以外にもPython・Ruby・PHPなども織り交ぜて使うことが出来ます)

Titanium Developer自体も、Titanium Desktopで出来ています。

なんとなく、オモチャ以上という感じはしますね。


まぁ出来ることは、以下のサイトあたりで細かく説明されてるので省略。

Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデスクトップアプリを簡単に作成する Appcelerator Titanium Desktop - 仙台 Ruby Vim JavaScript 自営業プログラマ


titanium-desktop-doc-ja - Titanium Desktop向け日本語文章を整備するプロジェクト - Google Project Hosting



~ 情報源はAPI Reference, Q&A Community ~


Appcelerator Documentation

Titanium 3.X - Appcelerator Docs

Community Questions & Answers » Appcelerator Developer Center


ホンッッッッットに情報が少ないので、既存コードを参考にするよりAPI Doc見たほうが早い。

ただAPI Docも結構謎なポイントが多くて、しかもSampleがあんまりない為結構しんどい。


分からねぇ! と思ったときは、Q&Aを探す。聞いてもいいと思うけど、大体ある。

よって、英語がある程度分かった方が楽だし、英語とか見たくもない! って人はやめといた方が無難です。



~ 以下、コード群 ~


・jQueryはガンガン使っていいけど、$.ajaxは使わないほうがいい

Ti.APIに用意されてるHTTPClientとjQueryのAjax。

てっきり内部で吸収してHTTPClientに統一してるのかと思ったんだけど、どうやら違うみたい。

jQueryの方は、どうやらCookieの扱いがSafariと同じになるっぽい(要出典)

HTTPClientを使うと「/Users/Molokheiya/USERNAME/Application Support/Titanium/appdata/com.hoge.huga/cookies.dat」に保存される模様。


	var xhr = Titanium.Network.createHTTPClient();
	xhr.onload = function(e){
		console.log(e);
	};
	xhr.open("GET","http://example.com/");
	xhr.send({param:value});

こうする。

まぁ見ての通り、XMLHttpRequestなので超簡単ですね。


・バイナリのダウンロード

	var url = "http://example.com/hoge.jpg"; // 画像ファイルのURL
	var fileName = url.substring(url.lastIndexOf("/")+1); // 画像ファイルの名前
	var localFile = Titanium.Filesystem.getApplicationDataDirectory().toString()+Titanium.Filesystem.getSeparator()+fileName; // AppDataフォルダのパス
	var remoteFile = url; 

	var httpClient = Titanium.Network.createHTTPClient();
	
	httpClient.onload = function(e) {
		var writeFile = Titanium.Filesystem.getFile(localFile);
		var writeStream = Titanium.Filesystem.getFileStream(writeFile);
		writeStream.open(Titanium.Filesystem.MODE_WRITE);
		writeStream.write(this.responseData);
		writeStream.close();
	};
	
	xhr.onreadystatechange = function(e) {
		if (e.readyState == 4) {
		// ダウンロード完了
		}
	};
	
	httpClient.onerror = function(e) {
		console.log('エラー');
	};

	httpClient.open('GET', remoteFile); 
	httpClient.send();

・バイナリのアップロード


//(略)
	xhr.open("POST","http://example.com/post/");
	xhr.sendFile({image:Titanium.Filesystem.getFile(file), title:"TITLE"});

sendFile(); を使うと、いちいちHeaderを細かく作りこまなくてもいいです。

ちなみに私はこれの存在を知らなくて、全部書いてやってましたウォオオウッ



・ディレクトリの有無をチェック、無い場合は作る


	var d = Titanium.Filesystem.getFile(Titanium.Filesystem.getApplicationDataDirectory(),"testFolder");
	
		if(!d.exists()) {
		d.createDirectory();
		}


・Notificationをつかうと、Macなら(入っている場合)Growlが使える


Winなら独自の通知が出ます。


	var wnd=Titanium.Notification.createNotification(window);

	wnd.setTitle("タイトル");
	wnd.setMessage("メッセージ");
	wnd.setIcon(path);
	wnd.setCallback(function () {
		alert("callback!");
		});
	wnd.show();

・ウィンドウを開く


	var win=Titanium.UI.createWindow({
		id: "testWindow",
		title: "Test Window",
		width: 400,
		height: 600,
		maximizable: false,
		minimizable: false,
		closeable: true,
		resizable: false,
		maximized: false,
		minimized: false
	});

	win.open();
	win.setContents("<html>Hello World!</html>");

createWindowで作ったあと、openしないといけないのが分からず1時間ほど悩みました。

妻が家に帰ると必ず死んだふりをしているのと同じくらい辛かったです。



・Terminalを叩く


	var q = Titanium.Process.createProcess([path,'-arg']);
	q.launch();

大体なんでもできますね。