Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)

Programming Android iPhone JavaScript Titanium スマートフォン Comments

Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)
タイトル
Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)
著者
北尾 雅人
出版社
翔泳社
Amazonで購入する

本書は、スマートフォンアプリ開発に使う開発ツールを探している人、Titanium Mobile という名前を聞いたことがあるけど実際にどういうものかを知りたい人、Titanium Mobile を使って開発を始めたけどこういう書き方で合っているのか不安な人向けの、概要書兼リファレンスブック的な位置づけにあたります。

Titanium Mobile

Titanium Mobile - Appcelerator

Titanium Mobile を開発、提供している Appcelerator が用意してくれている Web 上のドキュメントは、Titanium Mobile を始めたばかりの人には分かりづらく、「こういうことがしたいんだけどどう書けばいいの？」という時には使いづらいのです。

本書は、そんな Titanium Mobile のドキュメントの弱さを補い、Titanium Mobile とはどういうふうに動作しているのか、こういうことをするときはどう書けばいいのかを学ぶのに最適な本です。

iPhone、Android 向けスマートフォンアプリとはいえ、プラットフォーム SDK が備える機能はとても豊富です。これらの SDK を JavaScript から扱えてしまう Titanium Mobile をよくここまでまとめたなぁという印象の良書です。

スマートフォン開発は、Windows や Mac などの GUI アプリケーションと同様、イベントドリブンモデルの開発になります。そのため、GUI アプリ開発の経験がない人には Titanium Mobile を使って JavaScript で開発を行うと、どうしても戸惑うことが出てくると思います。

本書をとりあえず読んでみて、Titanium Mobile 上で JavaScript で GUI 開発（スマートフォンアプリ開発）ってこういうふうにするんだというのを体感してもらい、リファレンスとしてのお供にされるといいと思います。

本書の対象者は、Titanium Mobile を使って開発を始めたい人、実際に開発を始めたがまとまった情報がほしい人です。Titanium Mobile を使ってとにかく何か作ってみたいひとは、本書内のサンプルを写経してみるといいと思います。

Titanium Mobile を使って開発をしてみたものの、不安が残っている人に最適な一冊です。

本書の目次

  1. Appcelerator Titanium Mobile について
    1. Appcelerator 社と Titanium シリーズ
    2. Titanium Mobile について
      1. Titanium Mobile が提供する機能
      2. Titanium Mobile の動作原理
      3. オープンソース開発されている Titanium Mobile
      4. 日本で注目を集める Titanium Mobile
      5. 今後のロードマップ
    3. 価格体系／ライセンス
    4. Titanium Mobile を利用するのに必要な環境
      1. iOS には Mac OS X 環境が必要
      2. Android 開発について
    5. ネイティブアプリケーション開発で代替手段を選択するリスク
  2. 開発環境導入とアプリケーションの第一歩
    1. iOS 用開発環境の構築
      1. iOS SDK と Xcode
      2. IOS Developer Program の登録
    2. Android 用開発環境の構築
      1. JDK の確認と Android SDK の入手
      2. Mac OS への導入
      3. Windows7 へのインストール
    3. Titanium Developer のインストール
      1. Mac OS X の場合
      2. Windows7 の場合
      3. Titanium Developer の起動とサインアップ
    4. Titanium Developer の画面解説
      1. パースペクティブ
      2. 最新版 SDK のアップデート
    5. Hello World プロジェクトの作成
      1. プロジェクトの新規作成
      2. iPhone(iPod touch)の場合
      3. Andorid の場合
      4. iPad の場合
    6. Hello World プロジェクトを実機で動かす
      1. iOS(iPhone/iPad/iPod touch)の場合
      2. Android の場合
    7. プロジェクトの中を探索する
      1. プロジェクトのフォルダ構成
      2. app.js の解説
      3. プラットフォームによる UI の違い
    8. ネイティブ UI の部品紹介と KitchenSink
      1. ネイティブ UI の部品カタログ
      2. KitchenSink とは何か？
    9. Hello World の中身をいじってみる
      1. win1 に機能を追加する
      2. win2 に機能を追加する
      3. Tab を使わない画面デザイン
      4. WebView を用いた HTML5 アプリケーション
    10. アプリケーションアイコン／スプラッシュスクリーンを変更
      1. アプリケーションアイコン
      2. スプラッシュスクリーン（起動時画像）
    11. アプリケーションの設定と拡張
      1. tiapp.xml
      2. iOS プラットフォームに依存したビルド
      3. Android プラットフォームに依存したビルド
  3. 実践！ Twitter クライアントアプリ開発
    1. TiTweets の目標
    2. プロジェクト作成
    3. タイムラインの表示
      1. HTTP クライアントとネットワークの状態の取得
      2. ログ出力メソッド
      3. TableView への表示
      4. TableViewRow の使用
    4. app.js からスクリプトファイルの分割
      1. Titanium.include によるファイル分割
      2. Titanium.UI.createWindow の url 指定での分割
      3. ファイル分割と実行コンテキスト
      4. コンテキスト間の値の受け渡し
      5. アプリケーションプロパティを用いて実行コンテキストの違いを回避する
    5. プラットフォームごとの再読込 UI の実装
      1. iPhoen の場合：ナビゲーションボタンを利用する
      2. Android の場合：メニューを利用する
      3. プラットフォームの違いを吸収する
      4. 再読込処理を実装する
    6. 検索結果の表示を行う
      1. 固定したハッシュタグの検索
      2. 任意の検索文字列に基づく検索
      3. 前回検索値の保存
    7. 共通ソースのオブジェクト化
      1. オブジェクトのひな形
      2. titwitter.js を実装する
      3. アプリケーション連携（OpenURL とインテント）
    8. 国際化対応（i18N）
      1. メッセージ定義ファイルの準備
      2. メッセージ定義ファイルの使用
      3. メッセージ中の文字列置き換え
    9. もうすこし機能拡張
      1. タブの整理
      2. Tweet の単独表示
      3. Read it Later 連携
    10. AppStore / Android Market への公開
      1. iOS の場合（Ad Hoc 配布／App Store 公開）
      2. Android Market への公開
  4. ライブラリやデバイスの活用 〜続・Twitter クライアントアプリ開発〜
    1. TinyTweet の目標
    2. OAuth 認証の設定をする
      1. アプリケーションを登録する
      2. OAuth 認証の動作検証を行う
      3. ホームタイムラインを取得する
    3. Tweet を Post する
      1. TextArea を配置する
      2. キーボードツールバー（iOS のみ）
      3. 返信機能などに対応する
    4. カメラ撮影／フォトギャラリーの活用
      1. カメラ撮影の呼び出し
      2. 撮影済みの写真データの取得
      3. TwitPic へのアップロード
      4. 画像ファイルのリサイズ（iOS のみ）
      5. Andriod の場所のキーボードツールバー実現方法
    5. アプリケーションの完成
      1. カメラ処理部分をソース分割する（require の活用）
      2. 設定画面を作成する
  5. GPS 活用アプリケーション「食べナビ」
    1. 「食べナビ」における目標
    2. 食べログ API に基づきデータを表示する
      1. API の動作検証
      2. テスト用モックデータ取得処理
      3. 「もっと読む」機能
      4. 店舗情報の出力
    3. 位置情報に基づいて地図を表示する
      1. 地図表示部品 MapView の利用
      2. tiapps.xml への設定（Android のみ）
      3. latitudeDelta と longitudeDelta
      4. Annotation（マーカー／ピンの表示）
    4. GPS で現在地の位置情報を取得する
      1. 位置情報を取得する GPS 関連 API の利用
      2. 軽遺族的な位置情報の取得
    5. カバーフローによる写真一覧表示（iOSのみ）
      1. CoverFlowView
      2. 問い合せ結果との組み合わせ
    6. 取得したデータをデータベースに保存する
      1. テーブルレイアウトと検証
      2. データの追加と更新
      3. お気に入りの表示
      4. データの削除
  6. Titanium Mobile API 簡易リファレンス
    1. 簡易リファレンスの読み方
    2. Window と View
    3. コントロール
    4. デバイス
    5. プラットフォーム
    6. 通信
    7. その他
  7. Appendix
    1. 付録1 モダンな JavaScript コーディングの第一歩
    2. 付録2 自動レイアウトと JSS 機能
    3. 付録3 2DMatrix アニメーション
    4. 付録4 Xib2js による UI 作成
    5. 付録5 開発版ビルド（Continuous Build）を活用する
    6. 付録6 モジュールを使う
    7. 付録7 Titanium Studio
    8. 付録8 Titanium Mobile 困ったときの情報源

覚書

Titanium Mobile の動作原理

Titanium Mobile は JavaScript でソースコードを記述しますが、動作時にはTitanium Mobile の JS インタプリタ上で解釈されて動作します。

よく、JavaScript のコードがコンパイルされてネイティブコードに変換されているという誤解をしそうになりますが、そうではありません。

なので、ゲームなどのアニメーションをゴリゴリするようなアプリには、Titanium Mobile の利用は考えたほうが良いです。

Titanium Mobile が向いている分野としては

  • Web上のサービスをクライアントから利用するアプリ
  • ちょっとしたユーティリティアプリ

だと思います。（MogSnap のようなここまで Titanium で出来るのか！？っていうものもありますが）

Appcelerator 社提供のアイコンリソース

自分でアプリをつくろうと思ったときに「アイコン画像とか、俺つくれねーーー！！」ってなることがあります。。そんなときに利用出来るのがこれ！

Appcelerator から提供されているアイコンのリソースです。是非ご利用ください。

Festivus Celebration Day Two - Airing of Grievances - Appcelerator Developer Blog

実行コンテキスト

Titanium Mobilde で開発する際、Window ごとの処理を別々のソースコードに切り出すことができます。

このとき、実行コンテキストが分かれます。簡単に言うと、変数のスコープが分かれるというものです。

Understanding Execution Contexts - Appcelerator Developer Blog

本書に書いていないこと

モジュールの開発

Titanium Mobile は、プラットフォーム SDK のネイティブ機能へのラッパーを数多く提供してくれているので、ほとんどのことが Titanium Mobile のコンポーネントの組み合わせだけで行えます。

ただ、たまに、もうちょっとこの部分がこうなっていればいいのに！という、コンポーネントを拡張したい場合があります。

Titanium Mobile にはモジュールという形で、SDK を使って直接ネイティブコードを書いて、それを JavaScript から呼び出すということができます。

モジュールのインターフェースは、Titanium Mobile 上の呼び出し規約に沿った形で作成する必要があります。

モジュールの詳しい作り方は、公式のドキュメントを読むのが手っ取り早いと思います。そんなに難しい英語ではないのですんなり理解できるかと思います。

Titanium Mobile Programming Guides - Appcelerator

テスト

Titanium Mobile での開発は JavaScript で記述したアプリケーションコードが Titanium のインタプリタ上で動くというアーキテクチャになっているため、GUI の実際の動作を確認するのは実機かエミュレータ（シミュレータ）を使う必要があります。

ただ、毎回実行してコードが意図したとおりに動いているかを確認するのは時間がかかります。

そういうことで、実装時には GUI の動作とロジックの部分をできるだけ分けて実装しておいて、下に挙げるようなテストフレームワークを使うよいと思います。

テストフレームワーク

drillbit
Titanium mobile で drillbit動いた - Ehrenの日記
QUnit
Titaniumでユニットテスト - ひげろぐ

同期処理のための Deferred

JavaScript はシングルスレッドアーキテクチャなので、割り込みをコールバックという形で実装しています。

スマートフォンアプリのようなイベントドリブンモデルのプラットフォームでは、ユーザの反応をイベントとして発火し、リスナがそのイベントを処理するというモデルで実装していきます。

つまり、JavaScript で実装すると、イベントリスナをコールバック関数として実装して、イベントハンドラ（GUIコンポーネント）に登録しておくという書き方になります。

1
2
3
4

var button = Titanium.UI.createButton({...});
button.addEventListener(function(e) {
  // 処理
});

Titanium Mobile で開発をしているとコールバックを多用するため、処理が非同期に進んでしまって、何かのイベントの結果で処理を分岐するという事をしたいときに悩むことがあります。

そんなときは、Deferred を使って非同期処理の待ち合わせを行うとよいです。

[Titanium] JSDeferred を使って現在位置の取得を順次処理する - それはBlog

追記

Titanium Mobile 1.7ならびにTitanium Studio 1.0対応について

Titanium Mobile1.7、Titanium Studio1.0 がリリースされたことで、本書の2章の内容が現実と合わなくなっています。

著者の方がフォローしてくれていますので、活用してみてください。

Titanium Mobileで開発するiPhone/Androidアプリ 第二章 補完稿 -
titanium-mobile-doc-ja

関連記事