yoo-s.com

TitaniumStudio のエディタ設定

Titanium 2011/11/17

Titanium Studio の設定をもう少しカスタマイズしたいと思うも、Eclipse 標準設定やらAptana Studio の設定やらが混在していてちょっとわかりにくいので個人メモ。「Titanium Studio > Preferences...」でほとんど設定できるかと思います。

タブスペース設定

個人的にはタブは嫌いなので、半角スペースに置き換えます。まずグローバルな設定は、General > Editors > Text Editors で【Insert spaces for tabs】にチェック。

タブ幅は、Displayed tab with で「2」にしました。 ※一部ファイル種別によっては個別に指定する事もできます

カラー設定

色々アップデートしてたら、js ファイルだけセンテンスが真っ黒に！ Titanium Studio

グローバルの設定だとテーマ設定ができます。 Titanium Studio

が、自分は js ファイルだけおかしいようなので個別に設定してみる。 JavaScript > Syntax Coloring を開く。 Titanium Studio

Appearance color options: 欄があるので、ここでカラーを設定 Titanium Studio

TOP

IDE を Titanium Studio に検討中

Titanium 2011/11/10

IDE 環境の選択にずっと迷ってたけど、Titanium Studio の選択もありかな？と思うようになりました。 Aptana Studio でもあり、Eclipse ベースですしね。

vimプラグイン

[Eclipse] Vrapper でvim風にするでも書いた通り、Vrapper を利用。 Vrapper

SVN

本当は、標準の Git で良いのだが、会社で SVN の資産が大きいのでインストール Aptana のページでインストール方法が記載されている。デフォルトだとURLが登録されていないようなので、Eclipse Helios Update Site を追加して検索 SVN

「SVN」で検索して Team Provider をインストール SVN

で、終わりと思ったら、エラーでそのまま使えない模様（Eclipseのバージョン影響？）再度インストール選択していく。 SVN

TOP

Titanium 認定試験合格

Titanium 2011/09/28

仕事がかなり立て込んでる中、２日間みっちり講習受けて Titanuim認定試験（TCAD）にギリギリ受かった。 75% 合格で 81% ... 危ない。というか意外と問題が難しい。てか本当は Titanium でアプリ作らないと意味がないんだけど・・・。でも、仕事がきても集中砲火になりそうで困ったりする。と、このところ JavaScript まみれな俺でした。

TOP

ファイルの分割

Titanium 2011/07/05

JavaScript だけでアプリを作っていくので、必然的に行数が多くなります。という事で、Titanium.inclue を利用してファイルを文字通り include する事ができます。

Titanium.incluel でファイル読み込み


Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();

Titanium.include('soundPlayer.js');

Titanium.include('timer.js');

Titanium.include('twitter.js');

// open tab group
tabGroup.open();

あくまでもinclude なのでクラスのような使い方はできないですが、用途別のコード整理には必須ですね。

createWindow の url でファイル指定

また、url 指定で処理をスクリプトファイルに委譲できたりもします。読み込み側の、Titanium.UI.createWindow で読み込む url を指定します。


var twitterWindow = Titanium.UI.createWindow({
    title:'Twitter',
    backgroundColor:'#000000',
    url: 'twitterLoadTimeline.js'
});
twitterWindow.message = "Twitterの読み込み";

読み込まれる側では、Titanium.UI.currentWindw で呼び出し側の Window を取得できます。


var twitterWindow = Titanium.UI.currentWindow;

alert(twitterWindow.message);

var twitterTableView = Titanium.UI.createTableView();
twitterWindow.add(twitterTableView);

var url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=yoo_yoo_yoo";
if (Titanium.Network.onLine == false) {
	alert('オフラインです');
} else {
	var xhr = Titanium.Network.createHTTPClient();
	xhr.open("GET", url, false);
	xhr.onload = function () {
		var json = JSON.parse(this.responseText);
		var tableViewData = [];
		for (var i = 0; i < json.length; i++) {
			tableViewData.push({title :json[i].text});
			//Titanium.API.info(json[i].user.screen_name);
			//Titanium.API.info(json[i].text);
		}
		twitterTableView.data = tableViewData;
	};
	xhr.onerror = function (error) {
		alert(error);
	}
	xhr.send();
}

createWindowのスコープ内のプロパティも後で設定したプロパティ取得、つまりコンテキストが受け渡されます。これは素晴らしい！

addEventListener でイベントを利用する

さらに addEventListener を使ってイベント管理もできます。


var messageWindow = Titanium.UI.createWindow({
    url: 'messageLoader.js'
});
messageWindow.open();

var messageTab = Titanium.UI.createTab({  
    title:'Message',
    window:messageWindow
});

Titanium.App.addEventListener('showMessage', function(e) {
	alert(e.profile.name);
});

tabGroup.addTab(messageTab);


Titanium.App.fireEvent('showMessage', {
	message: 'プロフィール',
	profile: {
		name: 'yoo',
		url: 'http://yoo-s.com'
	}
});

ウィンドウ作成後に登録した「showMessage」イベントを呼び出しています。

TOP

Titaniumの基礎

Titanium 2011/06/28

先週から、Titanium の勉強会に通っています。仕事だとTittanium まで手を伸ばしている時間がないのと、JavaScriptの勉強もかねて。

果たして本当に効率よく作れるか？限界はどこまでか？

スクリプト言語なんでファイル構成が悩ましいところですが、まずは簡単なサンプルから。

Tabウィンドウを作る


//TabGroup作成
var tabGroup = Titanium.UI.createTabGroup();

//Window作成
var topWindow = Titanium.UI.createWindow({  
    title:'Top',
    backgroundColor:'#000000'
});

//タブ画面作成
var topTab = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Top',
    window:topWindow
});

//ラベル作成
var label1 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 1',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

//Window に Label を追加
topWindow.add(label1);

//TabGroup に Tabページを追加
tabGroup.addTab(topTab);  

//TabGroup を開く
tabGroup.open();

非常にわかりやすくて、簡単ですね。

ただ、全部コーディンしなきゃいけない

って事を考えると、画面設計を作るのはちょっと？？？という印象です。 InterfaceBuilder がいかに素晴らしいかってのがよくわかります。しかし、Objective-C や Java では書くのが面倒くさい事を Titanium で簡単に実装できてしまったりします。

外部APIとの連動

例えば UITableView ないし ListView に Twitter のタイムラインを表示させる処理。


var twitterTableView = Titanium.UI.createTableView();
twitterWindow.add(twitterTableView);

var url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=yoo_yoo_yoo";
if (Titanium.Network.onLine == false) {
	alert('オフラインです');
} else {
	var xhr = Titanium.Network.createHTTPClient();
	xhr.open("GET", url, false);
	xhr.onload = function () {
		var json = JSON.parse(this.responseText);
		var tableViewData = [];
		for (var i = 0; i < json.length; i++) {
			tableViewData.push({title :json[i].text});
		}
		twitterTableView.data = tableViewData;
	};
	xhr.onerror = function (error) {
		alert(error);
	}
	xhr.send();
}

iPhone は UITableView Delegateメソッド、Android は ArrayAdapter を記述しますが、結構長いコーディングになりがちです。（それだけ細かい事ができるという事ですが） Titanium の場合、上記のような処理だけで動いてくれます。素晴らしいのは、createHTTPClient() 移行の書き方です。ちなみに、 open() の第３引数は同期／非同期の設定で、iPhone のみ有効です。という訳で、何の処理が簡単に書けるか？を知るのが大切かと思います。ちなみに、Twitter に関しては、iOS5ではもっと簡単にかけてしまいますが（笑）

TOP

Titanium Studio & Titanium SDK 1.7

Titanium 2011/06/16

Titanium 1.7 が登場し、待望の Titanium Studio がリリースされました。 Studio になってIDE環境になり、インストールや設定も楽になりました。 ※事前にXcode、Android SDKはインストール済みエディションはとりあえず Free でいいかと思います。

サンプルプロジェクト作成

早速プロジェクト作ってみる。

エディタはこんな感じ。

iPhone Sumilator でいきなり、ビルド＆ランに失敗しました。

[ERROR] Error: Traceback (most recent call last): File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.0/iphone/builder.py", line 1139, in main execute_xcode("iphonesimulator%s" % link_version,["GCC_PREPROCESSOR_DEFINITIONS=__LOG__ID__=%s DEPLOYTYPE=development TI_DEVELOPMENT=1 DEBUG=1 TI_VERSION=%s %s" % (log_id,sdk_version,debugstr)],False) File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.0/iphone/builder.py", line 1057, in execute_xcode output = run.run(args,False,False,o) File "/Library/Application Support/Titanium/mobilesdk/osx/1.7.0/iphone/run.py", line 39, in run sys.exit(rc) SystemExit: 1

何度かプロジェクトを作り直してもだめ。 appcelerator のフォーラム見たら、うーん、やっぱりプロジェクト削除や、ビルド再構築すればよいの？と言ういか、App ID の入力でパッケージ指定(com.yoos.XXXX)してなかった事に気づく。 Titanium Studio

起動しました（結局、App IDが問題だったんだろうか？） Titanium Studio

Android も起動しました。 Titanium Studio

さて、次の問題は Titanium の API やご作法を覚えなきゃいけない。

Titanium Mobile リファレンス

TOP

Titanium 1.6.1 と超基本的な事

Titanium 2011/04/28

先月の話だけど、Titanium Mobile 1.6.1 Released です。

修正点

・iOS：XCode4（iOS4.3）に対応・iOS：Facebook認証の修正（iOS3.1.x系とSafari未対応機種）・Android：JavaScriptコンパイルのUTF-8エンコーディング対応・Android：ActivityとWindowのライフサイクル問題修正・Android：Intent のフラグ対応

インタプリタ

話はそれるが、Titanium の仕組みを良くわかっていなかった。 iOSにソースが書き出されているので、てっきりソースを書き出しているのかと思っていたが、 Android では Ti のパッケージファイルを読む記述しかない。

Android も iOSもJSインタプリタで動作している

超基本的な事でした。。。

TOP

Titanium 1.6.0

Titanium 2011/02/24

だそうです。既に、日本語訳も。 iphoneもAndroidoもFacebook Graph SDKに対応とのこと。

Android NDK

Android NDKのメリットとして、 (1) DalvikVMはJava言語を利用するので、NativeのC/C++のコードより遅くなる (2) C/C++のライブラリを組み込めるただ、Android 2.2以降では、JITコンパイラの採用により高速化されているとのこと。自分もC/C++はやらないので、必要ないかな？

TOP

Titanium Mobileを試してみる

Titanium 2011/02/21

Android、iPhoneを取りあえず手っ取り早く作りたい為のツール。 Corona、Titanium、Unity 3D

Coronaの私見

Coronaをちょっと触ってみたんだけど、ゲームなどのアニメーション系をサクッと作るのには向いてると思う。日本コロナの会にも行って来ましたが、Flasherぽい人が多数感じで。だけど、

Luaを覚えなきゃいけないし、開発環境がイマイチ

Flasherの人には良いかもしれないが、開発環境的にちょっと非効率的な気もする。またバリバリのゲームだったら、試してはいないけどの選択肢もあるかも知れない。とりあえずCoronaもアンテナだけは張っておくとして、今月のWeb+DBでも紹介されていたTitanium Developerを試してみた。

Titaniumをインストール

まずTitanuimとは？・Titanium Mobileで始める iPhone/Androidアプリ開発※注）iWorks資料・Titanium Mobileで作る！ iPhone／Androidアプリまず、iOSとAndroid SDKはインストールしておく必要があります。次に、AppCeleratorのからダウンロードしてTitanium Developerをアプリケーションにインストール。 ※iPhoneもあるのでOSX Titanium Mobileを初回時に起動すると、以下のディレクトリにSDKがインストールされる。

/Library/Application\ Support/Titanium

また、自動的に最新アップデータするか？と聞いてくるのでアップデートする。次に、AndroidSDKのパスを選択する必要がある（iPhoneは自動認識）。 Android SDK 2.3.1以前では

/Developer/android-sdk-mac_x86/platform-tools/adb

のパスでは起動しないので、

/Developer/android-sdk-mac_x86/tools/

へadbをコピーしてから選択する。