「We still care about isRootViewAttached!!!」にご注意。

tabGroupを使っていて、アプリ起動時のopenにmodalを設定していると、子ウィンドウを開いた時にこのWarningがコンソールに出る。

「We still care about isRootViewAttached!!!」

app.jsではこんな感じ。

globals.tabs.open({modal:Ti.Platform.osname === 'iphone', navBarHidden:true});

このWarningが出た後は、ボタンが反応しなかったり、おかしな挙動になるので、やらない方が良い。

カスタムタブバーの作り方

最近カスタムタブバーの記事を何件か見かけたので、自分でも試してみました。
http://wiki.appcelerator.orgの中にもサンプルコードは見つかります。
例えば、以下のページを見てください。
http://wiki.appcelerator.org/display/td/315+-+Advanced+User+Interface+Development

簡単に言ってしまうと、標準タブバーにビューを重ねて実現しています。
サンプルコードでは、画面からはみ出すくらいの背景画像を用意して、タブバーの上に置いたViewにイベントを置いてアニメーションしていました。やっている事はたいしたことは無いことが分かります。

仕組みが分かったので、Instagramのようなセンタータブを大きくしてみました。
wikiのサンプルとは異なり、センターのタブだけにボタン画像を配置し、ImageViewではなく、Buttonにしました。理由はButtonの方が押した感が分かるからだけです。
各タブ内のWindowには何も処理を入れていませんので、お好きにいじってください。

Ti.includeで書いています。
時間があったらCommonJSにしてみようかな。

https://github.com/KAZUAKI/CenterCustomTab

[補足]
Ti.include()に慣れていない人は、設置する場所には注意が必要です。インクルードするファイルで使っているネームスペースなどが宣言される前に置いたりするとエラーになります。

Enjoy!

新潟初！10/29はTitanium Day!

新潟初！10/29はTitanium Day!

10/29(土) 新潟初！Titaniumによる「スマートフォンアプリ開発セミナー」が開催されます！
Appcelerator社プラットフォームエヴァンジェリストの増井さんが講師として新潟にやってきます。
新潟エリアでスマートフォンアプリ開発に興味のある方や既にやってる方は、この機会に是非ご参加ください。

実は、この取り組みのお手伝いをしています。
当日はサポートとして参加します。
よろしくお願いします！

[主催]
にいがた産業創造機構
http://www.nico.or.jp/

[詳細ページ]
http://www.nico.or.jp/modules/news/article.php?storyid=491

グローバルオブジェクトの甘い誘惑 〜 Ti.App編

Titanium Mobileを使い始めた人のほとんどが、Kitchen Sinkに習ってアプリを作ってみるところからスタートすると思います。このKitchen Sinkのコードのあちこちをコピペしていくだけでも簡単なアプリが作れてしまいます。

すると、自ずとプログラムの書き方は、Windowを作成する毎にurl: 'hoge.js'のように数珠つなぎのようになっていきます。
実際、いろいろとやっているうちに、Window間、Tab間でのデータのやり取りが難しいと感じるはずです。

そこで手軽に使えるのがTi.Appオブジェクトです。

Ti.App.hoge = 'Global';

これでTi.App.hogeオブジェクトは、グローバル変数的に使えるため、どこでも参照できて便利です。

しかし、無駄にグローバルオブジェクトを保持しておくのは、ネームスペースを汚染するだけでなく、変数の衝突やメモリーリークに繋がる可能性が増すので最小限に留めておく方が良いでしょう。

Titanium Mobileは、その仕組み上、アプリケーションコード自体がネイティブにコード変換される訳ではなく、インタプリンタで実行されます。そのため、少しでも無駄を省いてパフォーマンス向上を図る事が大事です。

Titanium Studio 1.0.4で大幅改善！

Titanium Studioはよくアップデートされるので、いつものバグフィックス程度かなと思ってリリースノートを眺めてみると、様々な改善が行われたそうです。出遅れましたが早速アップデートしてみました。

アップデート内容をざっと以下の通りです。

・メモリ消費とCPU負荷を抑えた高速起動
・プロジェクトのインデックス作成を低減
・コード補完表示を改善
・CoffeeScriptのサポート
・スペース周りを中心としたソースフォーマットの改善
・「New from Template」でuntitledな空ファイルを作成可能
・認証付きProxyの設定追加
・Lionへの対応
・その他200以上の改善や修正

実際にアップデートした後、若干起動が早くなったような気がします。そもそも重かったAptanaベースのTitaniumが少しでも早くなってくれるのは嬉しいです。インデックス作成を減らしたと言うのもスピードに影響しているはずです。

今回のアップデートで注目すべきポイントの一つがProxy設定が環境設定の中に追加された事です。Titanium Developerの頃からプロキシー設定は裏技で対応してきた経緯があり、面倒に感じていた人も多かったと思います。何故早く対応しなかったのか不思議でしたが、ようやく対応してくれました。

詳細情報はこちら
http://wiki.appcelerator.org/display/tis/Titanium+Studio+Release+Notes

無名関数を使ったアプリのひな形

独自namespaceと無名関数ベースのひな形を作ってみました。
7/2に行ったTitanium本打上げの参加者チェックアプリでもこれをベースにしています。

ソースはこちらにアップしておきました。
https://github.com/KAZUAKI/NewStyle

構成は、以下の通りです。

app.js <- bootstrap
ui.js <- UI生成
doit.js <- 何かの処理

各タブにボタンを設置し、タップするとコンソールにログが表示されるようになっています。
良かったら試してみてください。

iPhone/Android両対応です。

Titanium用Tapjoyモジュールの設置方法

Tapjoyのリワード広告と言えば、このリワード広告を導入したアプリがリジェクトされたと伝えられて、日本の開発者の間でも話題になったかと思います。

参考：アドメーカーさんのブログ

収入源確保の手段として、AdMobなどのバナー広告の他に、リワード広告を導入するのも選択肢の１つでしょう。
私自身は、リワード広告を使ったことが無いので実際のところは分かりません。
このリワード広告を導入するに当たり、既にTitanium用モジュールを作成してくれた先人がいました。

https://github.com/alif/tapjoy_module

Twitterでこのモジュールがうまく動作しないというのを見て、早速自分でも試してみました。
ファイルをダウンロードして、titanium.xcconfigファイルのSDKバージョンを現在使用している1.7.1に変更し、./build.pyしました。
結果は予想通りビルド失敗です。
このモジュールが作成された当時のバージョンが1.5.1となっているので、現在の1.7.1とではいろいろと差異があるはずです。

そこで、現在1.7.1のSDKで空のモジュールを以下のように作成します。

/Library/Application\ Support/Titanium/mobilesdk/osx/1.7.1/titanium.py create --platform=iphone --type=module --name=tapjoy --id=com.tapjoy

(￥マークは、バックスラッシュです。)
(Classファイル名称が異なると面倒なので、オリジナルのモジュールと同じモジュール名にしました。)

Xcodeを開き、ダウンロードしてきたモジュールのClassesフォルダ内のファイルを新しく作成したモジュール内Classesフォルダ内にコピーします。

下のように、ソースを見ると、TapjoyConnect.hヘッダファイルが定義されています。

という事で、Xcode内でリンクしてあげなければなりません。
やり方は簡単です。

以下の2つのファイルをXcodeにドラッグ＆ドロップしてやります。

これでXcodeプロジェクト内にリンクされ、先ほど宣言したヘッダファイルの参照が可能になりました。

ここまでできたら、次はモジュールのビルドです。

./build.py

BUILD SUCCESS

今度は、ビルドが成功しました！
com.tapjoy-iphone-0.1.zipというZipファイルがプロジェクトフォルダ内に出来上がります。

モジュールの組み込み
Titanium Studioで新規プロジェクトを作成します。

そして、tiapp.xmlにモジュールを設定します。

com.tapjoy

次に、サンプルapp.jsを記述します。

// open a single window
var window = Ti.UI.createWindow({
backgroundColor:'white'
});
var label = Ti.UI.createLabel();
window.add(label);
window.open();

// TODO: write your module tests here
var tapjoy = require('com.tapjoy');
Ti.API.info("module is => " + tapjoy);

tapjoy.connect('AppID');

※このサンプルはAPIキーをたたくだけのサンプルなので、エラーの時以外何も表示されません。
※AppIDは、事前にhttp://www.tapjoy.comでデベロッパ登録後、アプリ登録をすると取得することができます。

最後に、Finderでプロジェクトフォルダを開き、先ほどのcom.tapjoy-iphone-0.1.zipをzipファイルのままここに置いて、iPhoneエミュレータで実行してみます。
コンソールにモジュールが読み込まれたと表示されます。

AppIDを組み込んで、アプリを起動させたところ、以下のように、Tapjoy管理ツール画面でセッションが確認できました。

また、TapjoyのIntegratedステータスがNOからYESに変わりました。

以上で、Tapjoyモジュールの設置までが完了しました。（これで動作してると思います〜。）
アイデア次第で稼げるかもしれません。
是非チャレンジしてみてください。

PS. Android版もあるので、また別の機会に試してみたいと思います。