2011/11/17

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

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

タブスペース設定

個人的にはタブは嫌いなので、半角スペースに置き換えます。 まずグローバルな設定は、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

  2011/11/10

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

vimプラグイン

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

Vrapper

SVN

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

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

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

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

SVN

  2011/09/28

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

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

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

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

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

  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() の第3引数は同期/非同期の設定で、iPhone のみ有効です。

という訳で、何の処理が簡単に書けるか?を知るのが大切かと思います。 ちなみに、Twitter に関しては、iOS5ではもっと簡単にかけてしまいますが(笑)

  2011/06/16

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

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

早速プロジェクト作ってみる。 Titanium エディタはこんな感じ。 Titanium

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)してなかった事に気づく。 Titanium Studio

起動しました(結局、App IDが問題だったんだろうか?) Titanium Studio

Android も起動しました。 Titanium Studio

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

Titanium Mobile リファレンス

Titanium Mobile 1.7.0

  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インタプリタで動作している

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

  2011/02/24

だそうです。 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++はやらないので、必要ないかな?

  2011/02/21

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するとエミュレータが起動する。 titanium

titanium

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

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

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

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

<< Top < Prev Next > Last >>