Titanium Mobileセミナーに行ってきたのでそのメモ

2011/02/16 Wed
Titanium @オプト（神保町）

- Titanium
○タイタニウム
×チタニウム

- 流れ
iphone/androidを持っている
dev入れる
KitchenSinkを入れる
アプリを書く
リリース

- 今日のメニュー
アプリを作る前に
KSをコンパイルしよう
Tab+TableViewを使ったアプリ
iPhone/Androidの違い
アニメーションテクニック


- 第一関門
→環境構築

- Titanium Developer
IDEじゃない
プロジェクトの作成
コンパイルと配布
→それだけ

- aptanaを買収したので変わるよ
スケジュールはまだ決まってない
三月後半くらいにaptanaがTitanium Developer対応したものがでるよ
コード補完とかdebugging機能とか

- iphone環境構築
xcodeインストール
AppleDeveloper登録
鍵作成、その他諸々。。

- iphone環境の注意点
xcodeは対応バージョンを使う
Beta版は対応しない
正式版はすぐ対応
複数バージョンを入れている場合は
xcode-selectで最新版を選ぶ

- Android環境構築
AndroidSDKインストール
SDKのパスを設定

- Android環境の注意点
1.5.1ではSDKtool R8以降では
platform-tools/adbを
/toolsにコピーする

- プロジェクトを作る
Project Type:Mobile
Name:英語で適当に
App Id:com.example.ti.blank
+ ドメイン名を逆さ＋適当
+ 必ずドット"."を含むこと（でないとandroidの時動かないよ）

- ファイル構成
重要なのはapp.js
Resources/に必要なファイルを置く

- 実行
Test&Packageタブに切り替えてLaunchでコンパイル＆リリース
実行したいプラットフォームはコンソールのタブで切り替えできるよ

- トラブルシュート
コンパイルがうまくいかない
+ キャッシュの削除
build/*
build/android/*
を削除すると強制クリア
+ TitaniumDeveloperを再起動
とりあえずこの2つをやってみる

QAのサービスやってるので投げてみるのもいいね
有料サポートサービスを結んでいればそちらへ

やっちゃだめなのはbuildそのものとかiphone/androidディレクトリを消しちゃうこと
→ビルドできなくなるよ

Androidシュミレーターは毎回OSから再起動する必要がある
→かなり大変。時間かかって仕方ない
→シュミレーターではなく実機がおすすめ

iphoneはシミュレーター早いのでそっちがおすすめ。実機は逆に癖があるので注意

同じコードでもAndroid/iPhoneでは見た目が異なるよ

- KitchenSink
TitaniumMobileで使える機能が実装されているでもアプリケーション
AppStoreにはない→Appleがデモ的なアプリ登録を許可していないため

250ページ以降
暇な時に見るといいよ！風呂とか電車とか
気になる機能を見つけたらページのタイトルなどでソースを検索
iPhoneとAndroidで見える機能が違う
→iPhoneでしか、Andoroidでしかサポートしない機能もあるよ

- 実機デモ
見た目全然ちげー
Androidの方がサポートしてる機能多いよ
API同じでもプロパティのサポートレベルが違うよ

- 仕組み
アーキテクチャ
OSの上にJSインタプリタが乗ってる
Appleが提供しているJSインタプリタを使ってる
AndroidはオープンソースのJSインタプリタ使ってる
TitaniumがAPIとModuleを用意してるよ

+ アプリケーションコード
+ APIs,Modules
+ JSインタプリタ
+ iOS/AndroidOS
+ Native iOS app, Native Android app

APIで用意されていないことでも、ModuleをObjectiveCで作って組み込めばNativeな命令が使えるよ！
→汎用的な所はTitanium,専用的な所はModuleでやれば便利！コアに触らなくてOK

iPhoneの方は結構枯れてきている
androidはちょっと遅れてきてる感じ。今追いかけてるよ
今月末出る1.6だと結構androidが改善されてるよ

- 実用性は？
すでに多数のアプリケーションで使われている
Androidは特に1.6以降がおすすめ

- 事例：mogsnap
食べたいボタンすげー（しゃべるしアニメーションもする）
もぐもぐ共有アプリケーション
TitaniumMobile製
99%Javascript
開発期間：4ヶ月（Tiのテストを始めてから）
Objective-C歴→ないです（中の人談）

- Titaniumは画像処理が苦手
→画像の圧縮ができない（アップはできるけど
→画像圧縮部分だけObjective-Cを使った（増井さんが提供！）
→オープンソースにしてくれる予定！？

他に
はてなカウンティング
WikiWalker
名古屋のバス検索（名古屋の大学生さん作、2ヶ月くらいとか）

デザイナーな人もつくったりしてる（Javascriptもよくわからないとか？）

gree伊藤さんのブログ記事の影響大きいかも

- 学習中にどこで詰まる？
+ ドキュメントが英語
+ サンプル不足（KitchenSinkとtwitterクライアントがある）
+ HTMLは無い。それは昔のバージョンの話
+ 進化が早い

日本語版のサイト、ドメインとってるけど本家も色々リニューアル中なのでちとお待ち。
リファレンス翻訳者募集！twitterとかで呼びかけてもらえれば。

- 速度は？メモリ管理は？
Objective-C/Javaよりは遅い
リアルタイム性が高いものは厳しい→ゲームとか
メモリ管理は自動（GC）
メモリはObjective-C/Javaより食う→効率は悪い。たくさんObjectを張るようなものは厳しいかもね

- 得意/苦手
+ ネットのフロントエンドアプリが特に得意
+ アニメーション・エフェクトも楽
+ リアルタイム性は厳しい→ボードゲームくらいならおｋ
+ 画像処理APIが無い
+ カメラや回転縮小はある

- Appleの審査は通るの？
以前はObjective-Cじゃないと駄目な規約だった
→今は問題なし！

※ただしネットワーク経由で新しいバージョンを拾ってきてeval→自分でアップデート！とかは駄目。

- 題材
自分紹介アプリ
+ Blog
+ Twitter
+ 自分のサイト
をまとめたアプリ

閑話休題
ロゴの「△あ」について
本家は△A。で、日本語版ということで適当につくってもらって自分プレゼンに使ってたらCEOが公式に採用したよ！ｗ

RSS取得処理
twitter情報取得処理

- プログラムの組み方二つ
[1] Sub-Context
1window==1source
+ window間で独立したContext
+ iframeのようなもの
+ window間の連携は苦手（基本、できない）
+ 変数の共有はTi.App以下に適当なObjにぶら下げる
+ Ti.Geolocationなどのcallbackのcontextに注意
+ 複数人で同時にアプリを作る時に便利

※url:hoge.jsなどで呼ばれるような時は別空間(context)

[2] single context
一つの変数空間(context)でアプリを作る方法
+ window間で共通したContext
+ 変数は全体で共有
+ Window毎にオブジェクトを作る

- blogのフィードを見る
Sub-Context方式
app.js :タブを開いてblog.jsに割り当て
blog.js :ブログのRSSを取得して表示

- Feedを読み込む
JSONのパースは簡単だけど、XMLは面倒
→Andoridだと、invalidなXMLだと落ちる（！）
YQL(Y!)モジュールが標準添付
feedのXMLを渡すとjsonに変換して返してくれたりするよ
→KitchenSinkに例があるよ。

#ここでマイク電池切れ...ｗ

- Twitterビューア
twitterはJSON出力対応
ブラウザならXMLHttpRequestを使う
TitaniumだとXMLHttpRequestとほぼ互換のTitanium.Network.HTTPClientを使う
Ajaxだとクロスドメイン不可だけどTitaniumならドメイン関係なく通信できるよ（当たり前か..）

- リロード
iPhoneではタイトルバーにボタン
Androidではメニューボタン
OSはTitanium.Platform.osnameプロパティで切り分け可能
osnameにはiphone,android,ipadのいずれかが返ってくるよ

iPhone/Android対応
- 同じAPIでも挙動が違う
- それぞれサポートされない機能がある
- UIに対する考え方の違い
- iphone:タイトルバー、Android:メニューバー

リストの見た目改善
- 見た目のレイアウトを細かく行う
- Twitterでは時間も表示

Window -> TableViewRow -> Label
とかやってレイアウトをきれいに。
この辺はKitchenSinkのサンプル見ればいける。


機能拡張
- 次回起動時に前回の方法を表示
- SQLデータベース(SQLite)とプロパティ
- JSONにしてプロパティに保存

http://github.com/masuidrive
に今回のサンプル（TitaniumSamples）があるよ！
使い方→Resourcesに入れればおｋ

開発FAQ
デバッグどうするの？
- 現状：Ti.API.debug()
- debugging toolもリリース予定
- API docの様に動かない
→古いのがあったり間違いがあったりする
→次はwikiにするので適宜みんなで直そう！
- KitchenSinkを検索して調べるのが一番

色々調べてバグだ！と思ったら公式バグトラッキングシステムに投げるか、
できればTitaniumはObjective-cソースが公開されているので、パッチ作って送ると喜ばれるよ！

- 機能が足りない
→モジュールを書くといいよ！

アニメーションテクニック
MogSnapのとーるさんから
- iPhoneでアニメーション
- 「食べたい」ボタンを押したときのハート
Androidはまだアニメーションぎこちない

「食べたい」ボタン押したときのアニメーション部分ソースコード公開！（とーるさん提供）

どのように実現しているのか
オブジェクトを多段にして実現してる
上に動くオブジェクト
+ 少し遅れて透明度を下げていくオブジェクト
+ その中でまずハートを左に動かす
+ その後で右に動かす
みたいな。
Objective-Cよりクロージャ使えるJavascriptの方がいいよね

Modern Javascript
- CommonJS
- Javascriptのオブジェクト指向
- 非同期処理とクロージャ
- Deferred
TitaniumではJavascript1.5 1.6をサポートしてるよ

他ファイルの読み込み
includeよりrequireおすすめ.
geolocationとかやってるときにinclude使うと変なことが起きる...?

FeedViewクラス
- Javascriptはオブジェクト指向だけど、クラスベースじゃない
- プロトタイプ指向
- オブジェクトをコピーして使う

リファクタリング
- リロード処理などをまとめられる
- AndroidとiPhoneの処理分岐をifでやってるのはかっこわるい
- クラス分けしてcreatorで分岐

JSDeferred
JavascriptでのDeferred実装
http://cho45.stfuawsc.com/jsdeferred/doc/intro.html

資料
- 公式ドキュメント
- Q&A
- titanium-mobile-doc-ja
本家の誤りが直ってたりするよ！ｗ
- @appcelerator_ja
- http://tidocs.com
- KitchenSink on http://github.com/appcelerator/

- 次週（2月22日）発売のWebDB+PRESSで特集くるよ！

- ぐぐるｗ
- "gihyo titanium"とかでぐぐるとか

資料は @appcelerator_ja にポストします！


質疑応答
2年前にあったら良かった。今すでに結構な大きさなアプリがあるけど移植可能？どうすればいい？
→モジュール（Objective-C）からcallbackしてJavascript呼ぶこともできるよ！
でもすでにあるアプリはなかなか難しいかも..

向いてないアプリとかあります？
→ゲーム、画像処理、音声加工処理、ビット処理（？）は苦手

C/C++を呼ぶことできる？言語の切り分けできます？
→どちらもできます。i18nディレクトリを掘って多様なロケール対応できるよ！

AdMobとか広告ってどう？端末依存あります？
→AdMob、3種類くらい対応方法あり。すでにモジュールがあるのでそれを使う方法、WebViewでやる方法、
TitaniumPlusというモジュール群が公式に出ます→SMS送りますとかPaintとか色々。たぶんプレミアム（有料）サービスになる（※未定）。
→Androidは1.6とかだとバグも多いのであまりおすすめしない。Titaniumがサポートする範囲では動くよ！

以上

増井さんありがとうございました！

追伸：間違いあったらコメントとかで指摘してください。。

追記：
当日のtogetterまとめを@kimukou_26 さんがまとめてくれました。
2011/02/16 Titanium Mobileで始めるiPhone / Androidアプリ開発

当日の@masuidrive さんによるプレゼン資料はこちら


当日プレゼン中で出てきたサンプルコードはこちら