Titanium Mobile 勉強会に参加してきました

どうもこんにちは!みなさま iPhone アプリしてますか?!僕は未だにガラケーユーザです (涙) iPhone 5 が出たら本気をだそうかと思ってます。

そんなわけで 2/25 に行われた株式会社コンテンツワンさん主催の勉強会 Titanium Mobileで始めるiPhone / Androidアプリ開発 に参加してきました。

下書きのまま放置してしまい今更感もあるのですが、会場で取ったメモにちょっと加筆したものを公開します。


  • 講師 masuidrive (blog)
  • Titanium Mobie の実績
    • WikiWalker (iPhone)
      • 位置情報からゆかりの地を Wikipedia から検索してくれる
    • なごや乗換ブラウザ (iPhone)
      • 乗り換え案内アプリ
    • Android 映画情報「myシアター」 (Android)
      • もともとは iPhone 向けに Objective-C で書かれた
      • Android 版を製作するに当たって Titanium Mobile で書かれる (3 週間で完成)
    • TOKINOWA
      • ちょっとおしゃれな時計アプリ
    • はてなカウンティング
      • はてな謹製
    • MogSnap: 食べ物の写真を投稿
      • 食べ物の写真を撮影して投稿
      • ソーシャルゲームっぽい
      • 相手に食べたいなあと同調してもらえるとポイントアップ
      • アニメーションがリッチ
    • AKB前田敦子 Maeda-1 グランプリ (Android)
    • Follow me now (iPhoneAndroid)
      • 位置情報を使ってアプリを起動しているユーザ同士をフォローできる
      • masuidrive 謹製
      • 本当は今日のデモ向けにつくっていたが作り込みしていって話しきれない量になってしまった
      • 近々オープンソース化する予定
  • Titanium Developer
    • JavaScript で iPhone/Android クロス開発
    • IDE じゃないよ
    • Aptana 社買収して Full feature IDE を 3 月後半リリース予定
    • 今は printf デバッグぐらいしかできない。今後 IDE にデバッガが搭載される予定 (時期未定)
    • 原則 iPhone SDK の Beta 版には対応しない
    • SDK 複数バージョン入れてる場合は xcode-select で最新版を選んで
    • Android SDK Tools R8 以降では adb をコピー
    • C/Java で書かれたモジュールをロードする場合 manifest, tiapp.xml を編集
  • JavaScript を Objective-C/Java にトランスレートしているわけではなくインタプリタで実行している
    • OS の機能を JavaScript から簡単に呼び出せるところが Titanium のコアとなる技術
    • iPhone 版のインタプリタは WebKit 由来の JavaScriptCore (規約避けの意味もあった)
    • Android のインタプリタは Rhino を搭載
  • Titanium SDK 1.6
    • つい先日出た
    • 1.5 以前は iPhone に比べると Android のサポートはいまいちだった
    • Titanium SDK 1.6 から Android サポートがかなり良くなった、おすすめ
  • MogSnap の事例
    • 99% は JavaScript のコード
    • 残りは JPEG の圧縮率を変える処理 (Objctive-C で 10 行ぐらいのコード)
    • アニメーション・エフェクトは 2D Transform, 3D Transform が使える
    • Ti.UI.createAnimation(); / Ti.UI.create2DMatrix();
    • Ti.UI.createView() div タグみたいなやつ
  • Titanium Mobile の弱点
    • サンプル不足
      • リファレンスは比較的充実しているがチュートリアルがあまり無い
      • デモアプリの KitchenSink のコードが参考になる
    • リアルタイム性の高いものは厳しい
      • ゲームなどで大量のパーティクル飛ばすとか将棋の思考ルーチンとか
    • 画像処理 API が無かったり
      • ない部分、苦手な部分は Java/Objective-C で Module として書けば OK
      • masuidrive 氏が以前作ったコミックビュアーは通信部分などは JavaScript, UI は Objective-C で書いた
      • モジュールとして作れば JavaScript から Objective-C を呼び出したりその逆も出来る
  • 開発スタイル
    • 1 Window = 1 Source: Window 間の連携は苦手。複数人開発だと有利。変数の共有は Ti.App で。
      • Ti.UI.createWindow({ title: “..”, url: “hoge.js” }); で hoge.js に書いた Window のコードを呼び出し
    • 1 Project = 1 Source: 変数の共有や Window 間の連携が得意。複数人開発には向かない。
    • 併用も出来るっぽい?
  • 通信系
    • XHR のクローンとして Ti.Network.HTTPClient というものが用意されている
    • YQL 標準搭載 (XML -> JSON の変換も容易)
    • 余談: Echofon とかの引っ張ってリロードするやつは Pull to Refresh というらしい
  • Android と iPhone ではアイコンのサイズが違う
    • それぞれ専用で作ってあげると良い
    • フリーの Android アイコン配布サイト Android Icons
  • ローカルストレージ
    • SQL Database (SQLIte)
    • ファイルにも保存できる
  • コーティングインジケータを通信していない時でも回したい → モジュールを書く
  • RouteMe オフラインで地図見れる
  • AirPrint 対応したい → Titanium でサポートしていない → モジュールを書く
  • 足りない機能はモジュールを書く
  • Modern JavaScript
    • Titanium Mobile は JavaScript 1.6 が使える
    • CommonJS
      • hoge.js: exports.foo = function() { … }
      • var hoge = require(“hoge”); hoge.foo();
      • createHogehoge = function() { if (android) return new createAndroidHogehoge(); else if (iphone) return new …
    • Deferred, Promise, Emitter
      • callback でもネストが深くならない
      • でぃふぁーれっど (でぃふぁーどじゃないらしい)
      • JSDeferred は Titanium でも使えるらしい
  • ドキュメントやリソースなど
    • http://code.google.com/p/titanium-mobile-doc-ja/
      • API ドキュメントの日本語の翻訳
      • 何故か本家のコードの間違いが翻訳では直っていることがある
      • 何故か本家よりスクリーンショットが充実していることもある
    • http://tidocs.com/
    • WebDB Press Vol. 61 の特集
    • ぐぐる
      • 情報の賞味期限は 4〜6ヶ月
      • それより古い情報は食べたらおかなをこわします (笑)
  • Q. jQuery の便利な機能を使うことはできるか。jQuery.each(), 等の DOM に依存しないものとか。
    • A. Titanium の JavaScript は 1.6 相当なので、Array.prototype.filter (jQuery.grep に相当), Array.prototype.map (jQuery.map に相当) など、標準化されているものを使えば OK
  • Q. 描画系でリアルタイム処理するときはどうする?
    • A. Objective-C で UIView を継承したクラスに描画してモジュールにして Titanium から呼び出せば良い
    • コミックビュアーを作ったときはそうした

懇親会のかつサンド美味かった!というわけで以上!

preload preload preload