Hatena::ブログ(Diary)

harukazepcの日記 このページをアンテナに追加 RSSフィード

2011-12-19

Titanium Advent Calendar 2011:十九日目】Androidアプリも作ろうぜ!〜Androidアプリに実装すべきTipsたち

※この記事は、@astronaughtsさん企画の「Titanium Advent Calendar 2011」向けの記事です。

※この記事は、数日前に概要を考えていたのですが、十八日目の@yagiさんの【Titanium Advent Calendar 2011:18日目】Titanium MobileでAndroidと、まさかのネタ被り・・・詳細な内容は違うので、このままいっちゃいますw

前置き(能書き)

僕はAndroidが大好きです!!

Android派(?)でTitaniumな人は、珍しいんじゃないでしょうか。むしろ誰か友達になってください。

僕のような人は、

と、なんともいえない立場におります。(だいぶ妄想

そんな中、なんでTitaniumやってるかって?

だって、iPhone使ってる人にも、Android使ってる人にも、アプリ使ってもらえるんだよ!最高じゃん!

  • NativeなAndroid派へ。「頑張りすぎずに作るべきアプリもあるよね?iPhone版もさくっといこうぜ。」
  • iOSTitanium派へ。「ユーザー数が2倍以上に広がるんだぜ!ユーザ属性も違うから、いろいろ広がるぜ!」
    • というかむしろ、アプリによってはユーザ数5倍とかあるよ

Androidな人もどんどんTitaniumに流れてきたら、もっともっとブラッシュアップされるぜ!

TitaniumiPhoneアプリだけ作ってる人も、もったいないよやろうぜAndroid

ようは使いようなのです。そんな事例や詳細はこちらをどうぞ。

TitaniumでiOS/Android同時リリース:NIFTY-Serveの事例

さぁ、Androidアプリを作ろうぜ!

Androidアプリに必須なTipsたち

そんなわけで、Androidアプリを作る際に必要になる/必須な各機能について、Titaniumでの実装をご紹介。

Android - Documentation & Guides - Appcelerator Wikiの日本語訳+α、といっても過言ではないです。

インデックス

Androidアプリを開発時に、利用頻度の高いもの(必須なもの、と言っていいかも)をとり挙げてみます。

Intent インテント

Androidの特徴的な機能として、Intentがあります。アプリ間での連携が簡単にできる、という感じ。

暗黙的インテント、という、規定されたアクションだけを指定して連携を開始すると、対応しているアプリケーションの選択になります。

f:id:harukazepc:20111219075632p:image:w250

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/端末側で用意した、いわゆるデフォルトで使われる(使うべき)アイコンなどです。

f:id:harukazepc:20111219092210p:image:w250

メニューやダイアログ上で使うアイコンが用意されており、これを正しく使う事でグッと質の高いAndroidアプリになりますね。

Titaniumで利用する方法は、下記のような形です。

// オプションメニュー用のヘルプアイコン。
var helpIcon = Ti.UI.createImageView({image:Ti.Android.R.drawable.ic_menu_help});

オプションメニュー

Androidの端末には、ハードウェアキーが複数用意されており、これを使ってアプリも操作することが前提になっています。

Xperia Acroの例↓

f:id:harukazepc:20111219075634p:image:w250

「←(バック)」「ホーム」といったボタン以外に、「メニュー」用のボタンがあります。

これは、開いているアプリに対して、設定や情報など、関連する操作を表示するためのボタンです。

こういったメニューが一般的です。設定などもこちらに押し込むのがAndroid流。

f:id:harukazepc:20111219075633p:image:w250

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になります。

マクドナルドアプリの例↓

f:id:harukazepc:20111219090836p:image:w250

というわけで、アプリを更新する際には、このバージョン設定が必要になるのですが、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の例↓

f:id:harukazepc:20111219090835p:image:w250

ただ、それはアプリ側で許可設定を行わないとできません。

Titaniumアプリはサイズが大きくなりがちで、この対応はユーザに喜ばれますので、ぜひやってください。

tiapp.xmlでの設定になります。

...
 <android ...>
   <tool-api-level>8</tool-api-level>
   <manifest android:installLocation="auto" ...>
      <uses-sdk android:minSdkVersion="4" />
   </manifest>
 </android>
...

minSdkVersionは、アプリの動作対象とするAndroidOSバージョン。

tool-api-levelは、a2sdのオプションを有効にさせる(構文解析用の)ためのAndroidOSバージョンです。

詳細?は、こちらの過去記事でどうぞ。

AndroidManifest.xml のカスタマイズ

iOSにおけるInfo.plistが、AndroidにおけるAndroidManifest.xmlです。

Titaniumにおいては、tiapp.xmlをベースに自動生成されるのですが、内容によってはAndroidManifestをカスタマイズする必要があります。

その場合には、以下の手順で。

  1. まず一回buildする
  2. build/android/ 内に生成された、AndroidManifest.xml をコピー
  3. platform/android/ ディレクトリを生成(無ければ
  4. その中にコピーしたAndroidManifest.xmlをペースト
  5. 以降、こちらのAndroidManifestが優先して利用されるので、修正などカスタマイズする。

単純なオプション記述等であれば、tiapp.xml内の<android>〜</android>内にて記述が可能なのですが、たとえばactivityの設定などは、カスタマイズしないとダメなようですね。

その他詳しくはTitanium公式のドキュメントをどうぞ。

日本語フォントのカスタマイズ

Androidデフォルトでサポートしているフォントは、とても限りがあります。

電子書籍AAアプリの雰囲気を出すためにはフォントを入れることも検討が必要です。

こちらについては、手抜きですいませんが過去記事で!

フォントのカスタマイズ(日本語ttfの反映とか)

ただ、アプリのサイズが大きくなってしまうので、SDカードへの移動許可設定は必須かもですね。

その他

他にも、公式ドキュメントでは、下記の機能などをサンプルとともに紹介しています。ぜひご参照くださいませ。

個人的要望?

Androidな人的には、こういうことがやりたくなります。うまくできないものか。

  • タブのカスタマイズ
    • 現状だとカスタマイズ範囲が狭くてちょっとつらい・・・
    • アクションバー的なviewを入れるのが無理め。
    • 場合によっては、独自でタブの機能を作ったりしてます。モジュール化すべき?
  • アクションバー
    • iPhoneでのNavBar。Android3.0以降ではOS側で実装されていますが、それ以前にもアクションバーの指針があります。
    • これも独自でそういうビューを作って使ってます。これもモジュール化?
  • ウィジェット

おわりに

さて二十日目は、本企画とりまとめの@astronaughtsさんです!!たのしみ!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証