Titanium Studio の設定をもう少しカスタマイズしたいと思うも、Eclipse 標準設定やらAptana Studio の設定やらが混在していてちょっとわかりにくいので個人メモ。

「Titanium Studio > Preferences...」でほとんど設定できるかと思います。

タブスペース設定

個人的にはタブは嫌いなので、半角スペースに置き換えます。 まずグローバルな設定は、General > Editors > Text Editors で 【Insert spaces for tabs】 にチェック。 タブ幅は、Displayed tab with で「2」にしました。 ※一部ファイル種別によっては個別に指定する事もできます

カラー設定

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

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

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

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

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

vimプラグイン

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

SVN

本当は、標準の Git で良いのだが、会社で SVN の資産が大きいのでインストール Aptana のSubversion ページでインストール方法が記載されている。

デフォルトだとURLが登録されていないようなので、Eclipse Helios Update Site を追加して検索

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

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

仕事がかなり立て込んでる中、２日間みっちり講習受けて Titanuim認定試験（TCAD）にギリギリ受かった。

75% 合格で 81% ... 危ない。 というか意外と問題が難しい。

てか本当は Titanium でアプリ作らないと意味がないんだけど・・・。 でも、仕事がきても集中砲火になりそうで困ったりする。

と、このところ JavaScript まみれな俺でした。

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」イベントを呼び出しています。

先週から、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ではもっと簡単にかけてしまいますが（笑）

Titanium 1.7 が登場し、待望の Titanium Studio がリリースされました。 Titanium StudioとTitanium Mobile 1.7をリリースしました 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 のフォーラム見たら、 What is this error? うーん、やっぱりプロジェクト削除や、ビルド再構築すればよいの？

と言ういか、App ID の入力でパッケージ指定(com.yoos.XXXX)してなかった事に気づく。

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

Android も起動しました。

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

Titanium Mobile リファレンス

Titanium Mobile 1.7.0

先月の話だけど、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インタプリタで動作している

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

だそうです。 Titanium Mobile 1.6.0 is Released!

既に、日本語訳も。 Titanium Mobile 1.6.0がリリースされました（速報→追記しました）

iphoneもAndroidoもFacebook Graph SDKに対応とのこと。

Android NDK

Android NDKを使う(アプリの高速化)

Android NDKのメリットとして、 (1) DalvikVMはJava言語を利用するので、NativeのC/C++のコードより遅くなる (2) C/C++のライブラリを組み込める

ただ、Android 2.2以降では、JITコンパイラの採用により高速化されているとのこと。 自分もC/C++はやらないので、必要ないかな？

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

Coronaの私見

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

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

Flasherの人には良いかもしれないが、開発環境的にちょっと非効率的な気もする。 またバリバリのゲームだったら、試してはいないけどUnity 3Dの選択肢もあるかも知れない。

とりあえずCoronaもアンテナだけは張っておくとして、今月のWeb+DBでも紹介されていたTitanium Developerを試してみた。

Titaniumをインストール

まずTitanuimとは？

・Titanium Mobileで始める iPhone/Androidアプリ開発※注）iWorks資料 ・Titanium Mobileで作る！ iPhone／Androidアプリ

まず、iOSとAndroid SDKはインストールしておく必要があります。 次に、AppCeleratorのTitanium Mobileからダウンロードして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をコピーしてから選択する。

サンプルプロジェクトKitchenSink

とりあえずの動作確認として「KitchenSink」が用意されているのでダウンロード。 Titanium Developerで【Project Import】し、Test&Package＞Run EmulatorでLaunchするとエミュレータが起動する。

Androidはうまくインストールされない・・・。 どうやら、選択するSDKによって挙動が違うらしい。

Android SDK & AVD Managerを以下の通り更新。 ※Google APIは必須 Titaniumの起動SDKを「APIs 2.3」にしてみると起動した。

プロジェクトを作成してみる

【New Project】をクリックして新規プロジェクトを作成。 Project type:Mobileすると「iPhone SDK 」「Android SDK」が検知されるので、必要項目を入力して【Create Project】する。