ドットインストールの「Titanium Mobileの基礎」をAndroidで写経してみた

Titanium MobileでAndroidアプリ作りたいと思っていたのも随分前ですが、最近取り組める暇が出来てきたので練習しています。

ドットインストールに基礎レッスンがアップされていたのでAndroidで写経してみました。

レッスン側はiPhoneを想定されているので全てコピペで動くものではないです。ハマると戸惑って困っていました。

ここではレッスン中にAndroidで躓いた部分と解決方法を調べてみたので備忘録がてら共有してみます。

環境は以下のとおり。

  • OS:Windows 7 Home Premium 64bit
  • Java:JDK 6 update 29(が適応されてた)
  • Android SDKはr18をアップグレードして最新版
  • (いつにしたか忘れましたが4月の終わりにはやりました)
  • Titanium Studio 2.0.1.201204132053
  • Titanium側で要求される、必要な物をAndroid SDKのSDK Manager.exeにてインストール
  • Titanium側の設定にて、Android SDKのデフォルトの設定は、Google APIs Android 2.3.3
  • #16,17を試す場合はこの設定が必須

#16 地図を表示させてみよう (1)

この部分で地図が表示出来ない場合、Android SDKの種類を変える必要があります。

iOS側では特にそういった設定は無いらしいのですが、Android SDKでは、Google APIを利用するSDK環境とそうでない環境があります。
このレッスンを始める前にデフォルトの設定でGoogle APIsが書かれているAndroid SDKを利用しましょう。

Titanium Studioの設定ウィンドウから行います。
メニューバーのウィンドウ - 設定ウィンドウから、Aptana Studio - Titanium("Titanium"でフィルタを掛けると直ぐ出てきます)

この中の、"Default Android SDK"のプルダウンメニューから"Google APIs"と頭についてるAndroidを選びます。バージョンは人により様々と思われるのでお好きなものを。
既にプロジェクトを作成してる場合は、

プロジェクトのプロパティより 実行/デバッグ設定 - Titanium Android Emulator - [project name] を選択。編集を開いて、"Platform"の中にあるAndroid APIを変更します。

参考 : Crash in Android when using Maps » Community Questions & Answers » Appcelerator Developer Center

#17 地図を表示させてみよう (2)

このレッスンのソースはAndroidで動かすとピンは表示されますが、ピンをクリックすると例外で落ちます。

解決策として、Ti.Map.createAnnotationのプロパティにpincolorを指定します。指定の色は、redとか16進数とかTitanium.Map.ANNTATION_***の指定が出来るそうです。
画像を指定したい場合は、imageプロパティを指定する必要があるとか。

Titanium.Map.Annotation - Appcelerator Titanium Mobile

なぜこれで成功したかは忘れました・・・pinImageをたまたま利用していて見つけたかな。

#19 フォームを作ってみよう (2)

Android版だとgetValueメソッドで値が取得できません。どうやらバグらしいです。

Runtime Error when getting textArea Value on Android » Community Questions & Answers » Appcelerator Developer Center

解決方法も、上記リンクより、tf.getValue()->tf.valueとします。プロパティを使って回避してね、とのこと。

#20 ファイルの読み書きをしてみよう

Androidの場合、Ti.Filesystem.resourcesDirectoryは利用できません。

例えば設定ファイルを保存すると仮定すると、内部ストレージかSDカード上となると思います。それぞれTi.Filesystem.applicationDataDirectoryとTi.Filesystem.externalStorageDirectoryが利用できます。自分は後者を利用しました。

Titanium.Filesystem / applicationDataDirectory - Appcelerator Titanium Mobile
Titanium.Filesystem / externalStorageDirectory - Appcelerator Titanium Mobile

またTi,Filesystem.File.createFile()はAndroidでは利用できません。
var file = Ti,Filesystem.File.getFile(filepath)をしてファイルオブジェクトのインスタンスを作ったら(でいい?)、
file.write("適当な文字列")で作成すると良いらしいです。

Ti.Filesystem and Android » Community Questions & Answers » Appcelerator Developer Center

最後にJSONの扱いとして。

JSON.parseメソッドを通した値はTi.API.infoでなぜか表示できませんでした。[Object object]と出てしまいます。

例ではオブジェクト(連想配列ともいう)を利用しているのでそう出ているようです。

レッスン動画ではMacが使われていたので、OSの違いで結果の表示も違うのかもしれません。

一応値も見たかったので、JSONのデータのアクセスはどうやるのか調べて以下のように変更して確認しました。
値のアクセス方法はこの辺を見て勉強しました。

以下が改変したコード

[js] var data = {'taguchi':500, 'sasaki':200, 'suzuki':150};

var newDir = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory,'datas'); newDir.createDirectory(); var file = Ti.Filesystem.getFile(newDir.nativePath,'mydata.txt'); if (!file.exists) { file.write(""); } file.write(JSON.stringify(data), false); var contents = file.read(); var parsed\_contents = JSON.parse(contents); Ti.API.info("filepath: " + contents.getNativePath()); Ti.API.info("filecontent\_source: " + contents); Ti.API.info("taguthi: " + parsed\_contents.taguchi); Ti.API.info("sasaki: " + parsed\_contents.sasaki); Ti.API.info("suzuki: " + parsed\_contents.suzuki); //output /\* \* I/TiAPI ( 1375): filepath: file:///mnt/sdcard/com.example.tihellowold/datas/mydata.txt \* I/TiAPI ( 1375): filecontent\_source: {"taguchi":500,"sasaki":200,"suzuki":150} \* I/TiAPI ( 1375): taguthi: 500 \* I/TiAPI ( 1375): sasaki: 200 \* I/TiAPI ( 1375): suzuki: 150 \*/ [/js]

#25 タブグループを作ってみよう (2)

AndroidではsetBadgeメソッドは利用できません。

終わりに

この他は特に躓くことなくすすめました。躓くと途端に困りますが、英語圏とはいえ情報は多かったので何とかなりました。

appceleratorのQAサイトは躓いたら一度検索を掛けてみると良いです。ちなみに日本語圏の非公式掲示板が解説されていますのでこちらもチェック

そういえばスマホアプリはまずはUIの解説から行われてるのをよく見ます。(プロンプトとかありませんし)結構慣れないと難しいのでプログラミングをやったことのない方には厳しいかと思いましたが、

こうやって動画でレッスンを受けれる時代にもなり具体的な資料があるので、案外こちらからのほうが理解が早くすすめるのかもしれません。GUIから初めても目で見てわかりやすくなりますし。

TitaniumはまだiPhoneよりで整備されてるように感じててAndroidではまだまだ苦戦しそうですが、ひとまず雰囲気がわかってきたのでよりいろんなチュートリアルを進めて、近いうちにアプリを作れたらと。

ドットインストールの感想なんかも

初めてドットインストールのレッスンを一つ修了したので、ついでにと

レッスンの場で他のユーザの状況も見れるので、レッスンのtipsや相談などをコミュニケート出来る環境も有れば良いと思います。

今回みたいに、クロスプラットフォーム環境の個々の対応を共有出来るようになりますし、ユーザ同士の助け合いも出来るようになります。

(レッスンのネタが無くなる可能性もあるのであえて実装されていないかもしれませんが)

FacebookやTwitterでのアカウント連携が出来るので、つぶやきや近況アップデートが出来ると嬉しいような。(ごちゃごちゃになる���も���れませんが)

自分用の学習メモはとても便利で素晴らしいです。あとで読み返したい用に学習メモ一覧のようなページで見れると確認しやすくなると思います。

偉そうなことを言っていますがすみません。m(__)m
素晴らしいレッスンサイトです。これからも良い方向の進展を望みます。

About Me

買ったり作ったり考えたり試したの日々の記録です