※この記事は、@astronaughtsさん企画の「Titanium Advent Calendar 2011」向けの記事です。
※この記事は、数日前に概要を考えていたのですが、十八日目の@yagiさんの【Titanium Advent Calendar 2011:18日目】Titanium MobileでAndroidと、まさかのネタ被り・・・詳細な内容は違うので、このままいっちゃいますw
前置き(能書き)
僕はAndroidが大好きです!!
Android派(?)でTitaniumな人は、珍しいんじゃないでしょうか。むしろ誰か友達になってください。
僕のような人は、
- NativeなAndroid派からは、「Androidは裁量大きくてアプリの作りがいがあるなー。Titaniumなにその機能縮小版?」
- iOSなTitanium派からは、「iOSアプリがjsでサクッと作れれば十分。Androidだっさー。」
と、なんともいえない立場におります。(だいぶ妄想
そんな中、なんでTitaniumやってるかって?
だって、iPhone使ってる人にも、Android使ってる人にも、アプリ使ってもらえるんだよ!最高じゃん!
- NativeなAndroid派へ。「頑張りすぎずに作るべきアプリもあるよね?iPhone版もさくっといこうぜ。」
- iOSなTitanium派へ。「ユーザー数が2倍以上に広がるんだぜ!ユーザ属性も違うから、いろいろ広がるぜ!」
- というかむしろ、アプリによってはユーザ数5倍とかあるよ
Androidな人もどんどんTitaniumに流れてきたら、もっともっとブラッシュアップされるぜ!
TitaniumでiPhoneアプリだけ作ってる人も、もったいないよやろうぜAndroid!
ようは使いようなのです。そんな事例や詳細はこちらをどうぞ。
TitaniumでiOS/Android同時リリース:NIFTY-Serveの事例
さぁ、Androidアプリを作ろうぜ!
Androidアプリに必須なTipsたち
そんなわけで、Androidアプリを作る際に必要になる/必須な各機能について、Titaniumでの実装をご紹介。
Android - Documentation & Guides - Appcelerator Wikiの日本語訳+α、といっても過言ではないです。
インデックス
Androidアプリを開発時に、利用頻度の高いもの(必須なもの、と言っていいかも)をとり挙げてみます。
Intent インテント
Androidの特徴的な機能として、Intentがあります。アプリ間での連携が簡単にできる、という感じ。
暗黙的インテント、という、規定されたアクションだけを指定して連携を開始すると、対応しているアプリケーションの選択になります。
Twitterとの連携は、ユーザがそれぞれ愛用している各種Twitterアプリを使おう、などなど。
Twitter機能をアプリで独自実装しているのはダサイのよ。
こちらが実装例です。
var shareButton = Ti.UI.createButton({title:'share'}); // ボタン押したら、ACTION_SEND対応のアプリへ暗黙インテント発行 shareButton.addEventListener('click',function(e) { var shareText = 'share the text'; var intent = Ti.Android.createIntent({ action: Ti.Android.ACTION_SEND }); // EXTRA_TEXTとして、shareTextの内容を渡す intent.putExtra(Ti.Android.EXTRA_TEXT,shareText); Ti.Android.currentActivity.startActivity(intent); });
WebViewで今見てるサイトのURLをACTION_SENDに対応してるアプリ(Twitterやメール、facebookなど)に渡す、とかをよくしますね。
規定されているアクションは、Androidのマニュアルなどをご参照くださいませ。
逆に、自分のアプリをインテントに対応するようにするには、AndroidManifestへの記述が必要になります。それは後述。
システムリソース(android.R.drawable)の使い方
一般的なOS同様 Androidにおいても、システムリソースが用意されています。OS/端末側で用意した、いわゆるデフォルトで使われる(使うべき)アイコンなどです。
メニューやダイアログ上で使うアイコンが用意されており、これを正しく使う事でグッと質の高いAndroidアプリになりますね。
Titaniumで利用する方法は、下記のような形です。
// オプションメニュー用のヘルプアイコン。 var helpIcon = Ti.UI.createImageView({image:Ti.Android.R.drawable.ic_menu_help});
オプションメニュー
Androidの端末には、ハードウェアキーが複数用意されており、これを使ってアプリも操作することが前提になっています。
Xperia Acroの例↓
「←(バック)」「ホーム」といったボタン以外に、「メニュー」用のボタンがあります。
これは、開いているアプリに対して、設定や情報など、関連する操作を表示するためのボタンです。
こういったメニューが一般的です。設定などもこちらに押し込むのがAndroid流。
Titaniumではこのような実装になります。
// コンテキスト内にて以下を記述 Ti.Android.currentActivity.onCreateOptionsMenu = function(e) { var menu = e.menu; var menuShare = menu.add({ title:'share app'}); menuShare.setIcon(Ti.Android.R.drawable.ic_menu_share); menuShare.addEventListener('click', function(e) { // このオプション選択時の処理 }); var menuItem = menu.add({title:'about'}); menuItem.setIcon(Ti.Android.R.drawable.ic_info_detail); menuItem.addEventListener('click', function(e) { // このオプション選択時の処理 }); };
Backボタンなど、ハードウェアキーの制御
メニューキー以外にも、いくつかのハードウェアキーがありますが、それらは Ti.UI.Window にてイベント処理が可能です。
以下は、「←バック」ボタンが押された際の制御の例です。
WebViewでの遷移中にバックキー、当然 WebView内で前に表示したページに戻れるべきですが、Androidでは明示的に制御しないとアプリ(アクティビティ)の終了になります。
そのため、以下のような制御を入れることになります。
var window = Ti.UI.createWindow(); var webview = Ti.UI.createWebView(); window.add(webview); window.webview = webview; window.addEventListener('android:back',function(e) { var wv = this.webview; if (wv.canGoBack()) { wv.goBack(); } else { this.close(); } }); window.open();
アプリ更新に必要な、バージョン設定
Androidには、以下の2つのバージョン設定が存在します。
- アプリ内部でのバージョン(VersionCode)
- ユーザに表示するバージョン(VersionName)
重要なのはVersionCodeで、アプリの更新にはこちらが影響します。
前回と比べて大きな整数値であれば、更新する形になります。
マーケット上や端末上のアプリ一覧などで表示されるのは、VersionNameになります。
マクドナルドアプリの例↓
というわけで、アプリを更新する際には、このバージョン設定が必要になるのですが、tiapp.xmlでは、下記のような記述です。
... <android ...> <manifest android:versionCode="3" android:versionName="1.2"> </manifest> </android> ...
これだと、VersionCodeが2のアプリをインストールしているユーザは、このアプリで更新されます。
そしてユーザには「Version 1.2」と表示されます。
SDカードへのアプリインストール許可
Android端末は、本体のアプリケーション用領域が結構少なかったりします。
なので、iPhone以上にアプリ自体の容量をユーザが気にします。
Android2.2以上の端末の場合、インストールしたアプリケーションをSDカードに移すことができます。
端末設定のアプリケーションから実際に移動できます。AngryBirdsの例↓
ただ、それはアプリ側で許可設定を行わないとできません。
Titanium製アプリはサイズが大きくなりがちで、この対応はユーザに喜ばれますので、ぜひやってください。
tiapp.xmlでの設定になります。
... <android ...> <tool-api-level>8</tool-api-level> <manifest android:installLocation="auto" ...> <uses-sdk android:minSdkVersion="4" /> </manifest> </android> ...
minSdkVersionは、アプリの動作対象とするAndroidのOSバージョン。
tool-api-levelは、a2sdのオプションを有効にさせる(構文解析用の)ためのAndroidのOSバージョンです。
詳細?は、こちらの過去記事でどうぞ。
AndroidManifest.xml のカスタマイズ
iOSにおけるInfo.plistが、AndroidにおけるAndroidManifest.xmlです。
Titaniumにおいては、tiapp.xmlをベースに自動生成されるのですが、内容によってはAndroidManifestをカスタマイズする必要があります。
その場合には、以下の手順で。
- まず一回buildする
- build/android/ 内に生成された、AndroidManifest.xml をコピー
- platform/android/ ディレクトリを生成(無ければ
- その中にコピーしたAndroidManifest.xmlをペースト
- 以降、こちらのAndroidManifestが優先して利用されるので、修正などカスタマイズする。
単純なオプション記述等であれば、tiapp.xml内の
その他詳しくはTitanium公式のドキュメントをどうぞ。
日本語フォントのカスタマイズ
Androidがデフォルトでサポートしているフォントは、とても限りがあります。
電子書籍やAA、アプリの雰囲気を出すためにはフォントを入れることも検討が必要です。
こちらについては、手抜きですいませんが過去記事で!
フォントのカスタマイズ(日本語ttfの反映とか)
ただ、アプリのサイズが大きくなってしまうので、SDカードへの移動許可設定は必須かもですね。
その他
他にも、公式ドキュメントでは、下記の機能などをサンプルとともに紹介しています。ぜひご参照くださいませ。
- サービス(デーモン、常駐プロセス)
- ノーティフィケーション(通知)
- 解像度ごとのリソース(画像など)の配置方法
個人的要望?
Androidな人的には、こういうことがやりたくなります。うまくできないものか。
- タブのカスタマイズ
- 現状だとカスタマイズ範囲が狭くてちょっとつらい・・・
- アクションバー的なviewを入れるのが無理め。
- 場合によっては、独自でタブの機能を作ったりしてます。モジュール化すべき?
- アクションバー
- iPhoneでのNavBar。Android3.0以降ではOS側で実装されていますが、それ以前にもアクションバーの指針があります。
- これも独自でそういうビューを作って使ってます。これもモジュール化?
- ウィジェット
- Androidの特徴のひとつ、ホーム画面上で動作するアプリ「ウィジェット」。
- 現状だと、直接Javaによる実装での対応になるようです。
- やるならこんな感じTitanium BBS(JP unofficial)
おわりに
さて二十日目は、本企画とりまとめの@astronaughtsさんです!!たのしみ!