カテゴリー: Tltanium Mobile

ネイティブ側でイベント受け取り
Webview側のアプリ本体になる
app.js
にイベントハンドラーを設定
イベントハンドラーの設定では
Titanium.Appオブジェクトの
addEventListener()
を使う
addEventListener()の
第1引数に
作成したカスタムイベント名
第2引数に
イベントハンドラーを渡す
このイベントハンドラーの　
第1引数eには
fireEvent
の第2引数が渡される
今回は
イベントが受け取れているかどうかを
トーストで確認
トースト通知は
TI.UIオブジェクトの
createNotification()
で生成
引数には
表示する時間を
durationプロパティ
でミリ秒単位で指定します
ちなみに、ミリ秒は
1000ms=1秒です
1.5秒表示したいなら
duration: 1500
となります
表示するテキストについては
messageプロパティで設定
これも
message : ‘表示したいメッセージ’
というように書きます
文字列を’で囲むのを忘れずに
作ったトーストは
show()
で画面に表示します

今回は日経Linux 2012 8月号の
サンプルを使いました

最初に
cp -p /media/LIN201208/article/rensai_android/app.js .
で
ファイルをコピー
次にの
gedit app.js
をコピーするため
Titanium Studio パッケージエクスプローラで
プロジェクト名 > Resources > app.js
でファイルを開きます
ファイル拡張子をみたまま、
java　script です
このファイルの中身をすべて削除し
app.js をコピペします
titanium mobile のUI部品生成は
Titanium.UI.create部品名
という関数を作成します
もし、ボタンを作るなら
Titanium.UI.createButton({
設定
})
というかんじです
ボタンを押したときの処理は
addEventListener を使います
このあたりも
java script に近いかも
具体的には
button.addEventListener(‘click’,function(){
//クリックしたときの処理
});
となります
‘click’
はイベント名
function(){ …}
の部分は
イベントが発生したときに実行される関数
通称イベントハンドラー
です
今回使用した関数もメモしてみました
Math.random()
0以上1未満の数をランダムにかえす
Math.floor()
小数点以下の数を切り下げて整数をえる
これで、
０から「配列の長さ-1」
までの範囲の整数を乱数で得られる

./Titanium_Studio/TitaniumStudio
で
Titanium Studio を起動
File > new > Titanium Mobile Project
で設定画面を開きます
ただし、起動したときにネット接続していないと
このTitanium studio がログイン画面になり
使えません
起動したら
Project name : FirstProj
ここへはプロジェクト名
App Id
は
java でいうパッケージ
メルアドかドメインを反対から
入力します
test@example.ne,jp
なら
jp.ne.example.test
というように書きます
Company/Personal URL
ここには自分のweb site URl
もしなければ
http://localhost
これで、helloworld のように
もとが完成です
あとは
プロジェクトを右クリックして
Run As > Android Emulator
でエミュレータが起動します
CPUの性能によりかなり時間差がありますが
無事に成功すると
アプリが起動します

すでに過去にインストールできているなら
端末で
Titanium_Studio/TitaniumStudio
を実行すれば起動します
まずは設定が必要なので
windows > preference
で設定画面を開き
Aptana Studio > Titanium
の
Android SDK Home
に
Android SDK をインストールしたディレクトリ
を指定します
Titanium studio でプロジェクトを作成するには
File > New > Titanium Mobile Project
を選択します
エミュレータで動作確認するには
Run > Run As >
Mobile Web Preview in Emulator
を選択すると
Android エミュレータで動作確認できます
ただしエミュレータはとても重いので
あらかじめ起動しておくことをおすすめします

TItanium Mobile について少しまとめてみました
Titanium Mobile で作成されたアプリは、
Resourcesディレクトリの下にある
app.js
というjavas script が読み込まれて実行されるとのことです
この app.js を改造することで、アプリを簡単に改造できるようです
通常、ブラウザの java script で外部からデータを取得するには
XML HttpRequest
を使いますが
Titanium Mobile では
Ti.NetWork.createHTTPCrient
を使うことで、外部データの取得ができるようです
これを使えば、twitter API から情報を取得できるようです
参考に、日経 Linux 2011-05 を使いましたが、なぜかうまくいかず
理解できないこともあったため、やめました
まず、念のため、バックアップをとります
/home/wiki/Test1/Resources/app.js
を失敗したときに戻せるように
cp Test1/Resources/app.js app.js_back
でバックアップ作成
次に
vi Test1/Resources/app.js
でファイルを開き
var window = Titanium.Ui.createWindow({backgrounColor: “#000”});
var tableView = Titanium.Ui.createTableView({
data: [{title: “Test1”},{title: “Test2”}]
});
window.add(tableView);
window.show()
を記述するようなのですが、
どこを書き換えるのかもわからず、一旦すべて削除してから
追記してもエラーになります
このため、参考サイト第2回　TitaniumでTwitterクライアント
をベースに、以下のように記述することで
起動することができました
Titanium.UI.setBackgroundColor(‘#000′);
var tabGroup = Titanium.UI.createTabGroup({});
var win1 = Titanium.UI.createWindow({
title:’Tab 1′,
backgroundColor:’#fff’
});
var tab1 = Titanium.UI.createTab({
window:win1 //前回，必要な引数まで削除していました。すいません!
});
var window = Ti.UI.createWindow({backgroundColor: “#000”});
var tableView = Ti.UI.createTableView({
data: [{title: “Test1”},{title: “Test2”}]
});
win1.add(tableView);
win1.hideTabBar();
tabGroup.addTab(tab1);
tabGroup.open();

Tltanium Mobile
にて 32bit ubuntu 10.10 で実験を試みたのですが、ダウンロードした
ファイルがうまく解凍できないため、
今度は 64 bit で実験しました
準備するのは、32bit のときと変わりません
さて、今回からいよいよ TItanium Mobile を導入します
wget http://www.appcelerator.com/download-linux64
でファイルを取得し
tar xfz download-linux64
で解凍します
続いて
Titanium\ Developer-1.2.2/Titanium\ Developer
を実行したのですが
Titanium Developer-1.2.2/Titanium Developer: symbol lookup error: /usr/lib/libgtk-x11-2.0.so.0: undefined symbol: g_malloc_n
とエラーがでてしまうので、
rm .titanium/runtime/linux/1.0.0/libg*2.0.*
で競合ライブラリを削除します
このあたりの解説は
Titaniumの環境を作ってみた。
を参考にさせていただきました
しかし、次に新しい問題がでました
Titanium\ Developer-1.2.2/Titanium\ Developer
を実行すると
icedteanp plugin error: Failed to run /etc/alternatives/../../bin/java. For more detail rerun “firefox -g” in a terminal window.
これを解決するために、エラーメッセージをそのまま
google 検索
これにより
[android][Titanium]エラー解消.
を参考に対処しました
まず、一度、起動しているvTItanium Mobile を終了
次に、端末を開き
sudo ln -s /usr/bin/java /bin/java
を実行
再度
Titanium\ Developer-1.2.2/Titanium\ Developer
を実行すれば、エラーなしで起動します
しかし、初期のサインアップでまたしても問題発生します
文字をまともに入力できません
これを解決するには
システム＞設定＞入力メソッド切替器
で
Do not use input Method(none)
をクリックし、ibus を一時停止しておけばよいらしいのですが
解決しなかったので
Ubuntu10.10にtitaniumインストールしたが上手く動かせない
を参考に、
sudo apt-get install scim scim-anthy
で入力を scim へ変更し入力しました
入力項目ですが
Email　へメールアドレス
Password へパスワード
Repeat Password へもう一度確認のためにパスワード入力
First Name へは名前
Last Name へは名字
以上を入力したら
Sign Up をクリックします
ここまで終われば。初期設定が完了します
余談ですが、参考になりそうなサイトをいくつか見つけたので
メモしてみました
Titanium Mobileで作る！ iPhone／Androidアプリ
Titanium mobile で開発しだしたら役に立つ情報のまとめ
[Linux]Titanium Mobile 1.2.2をUbuntu10.10-i386に入れた

ubuntu 10.10 32bit へ
java Script でアプリを作成するソフト
Tlatanium Mobile をインストールしてみます
まず、新しい実験環境を
VMwarePlayer で作成、
操作性向上のため、
VMware Tools を
cd /tmp/
tar zxvf /media/VMware\ Tools/VMwareTools-8.4.6-385536.tar.gz
cd vmware-tools-distrib/
sudo ./vmware-install.pl
sudo shutdown -r now
でインストールし、反映
必要なソフトをインストールするため
アプリケーション　＞　アクセサリ　＞　テキストエディタ
で開き。
#!/bin/bash
sudo apt-get -y install ssh
sudo apt-get -y install vim
sudo apt-get -y install nautilus-opne-terminal
sudo add-apt-repository ‘deb http://archive.canonical.com/ lucid partner’
sudo apt-get update
sudo apt-get -y install sun-java6-jdk
sudo update-alternatives –config java
mkdir $HOME/bin
を記述し、ファイル名を setup_ubuntu.sh
で保存
次に、sh setup_ubuntu.sh
を実行します
途中で、sun-java のライセンスで聞かれるので、了承するようにします
また、
もともと ubuntu に open-jdk が入っているので
sun-java と切り替えるために、
update-alternatives –config java
を実行しています
このときに２を選択すれば、sun-java が使えるようになります
次に Android SDK をインストールします
wget http://dl.google.com/android/android-sdk_r10-linux_x86.tgz
でダウンロードして、
sudo -s
で管理者権限になります
管理者権限でないと、/usr/local へファイルを展開しようとするとエラーに
なるので、これを回避するためです
管理者権限になると、
$ のマークが # になるので、わかりやすいと思います
例えば
wiki@testubuntu:$
だったのが
root@testubuntu:#
となっています
管理者権限になったのを確認後
tar xfs android-sdk_r10-linux_x86.tgz -C /usr/local/
でファイルを展開
ln -s /usr/local/android-sdk-linux_x86/platform-tools/adb /usr/local/android-sdk-linux_x86/tools/
でシンボリックリンクを作成
echo “export PATH=\${PATH}:/usr/local/android-sdk-linux_x86/tools” > /etc/profile.d/androidsdk.sh
でパスを通し
source /etc/profile
で設定を反映します
基本的に、 profile などのファイルを変更したときには
source コマンドを使って設定を反映させます
restart を使って apache などを再起動するようなかんじですね
次に、プラットフォームAPIをインストールするのですが
android
とコマンドをいれることで起動できるのですが
展開した先が管理者権限が必須な場所なので
管理者権限
sudo -s
を使った状態で
android
とコマンドを実行する必要があります
これを一般ユーザでやってみたのですが
普通に起動はしますが
Available packages
で必要なパッケージをインストールを始めるとエラーが続出し
終了してしまいます
このパッケージのダウンロードにはかなり時間がかかりますので
時間の余裕のあるときにおこないましょう
次回は、Taitanium Developer を導入してみます