[雑記] 2011.05.24 Titanium Mobile 詰まったら消す?

Read More

なかなか上手くいかない。

今月はもう少し頑張りたい。でも例え毎日やってもせいぜい2h * 30day 程度、仕事しながら勉強するのは大変だ。実際には半分もしてないし。

20110525-125751.jpg

なんかシュミレーターの挙動が変なので困る。

怪しい時には

build 以下を消してしまう。これが一番有効の気がします。または必要なソースだけ別の場所に移して置いてTitanium Desktopからプロジェクトを消してしまう、とか。

0から始めるTitanium Mobile 第3回 簡単なiPhoneアプリを作成する(2)

Read More

さて、前回作成したアプリはそのままでもいいのですがもう少しアプリらしくしたいと思います。

Screenshot 5

アプリの起動時に、テキストフィールドにフォーカスを当てる

main.js の方に以下の項目を追記します。

[cc lang=”javascript” tab_size=”2″ lines=”30″ width=”512″]
// 起動時にフォーカスを与える
// http://developer.appcelerator.com/question/17351/start-with-focus-on-a-textarea
win.addEventListener(“open”, function(event, type) {
ta1.focus();
});

win.open({
modal:true,
modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET
});
[/cc]

このaddEventListenner()を利用するのがよいみたいです。
まだきちんと動きとか分かっていないでですがフォーラムに出ていましたので使わせてもらいます。

テキストの文字数をNavbarに表示する

main.js に以下の小目を追記します。

[cc lang=”javascript” tab_size=”2″ lines=”30″ width=”512″]
var label1 = Titanium.UI.createLabel({
color:’#fff’,
text:’0′,
font:{fontSize:16,fontFamily:’Helvetica Neue’},
textAlign:’center’,
width: 64

});

Ti.UI.currentWindow.rightNavButton = label1;

[/cc]

NavBarですがButtonの箇所になんでもおけるみたいですね。Button以外にもこの例のように label でも可能です。

文字を入力する都度、文字数を変化させる

[cc lang=”javascript” tab_size=”2″ lines=”30″ width=”512″]
ta1.addEventListener(‘change’,function(e){
label1.text = jstrlen(ta1.value);
Ti.UI.currentWindow.rightNavButton = label1;
});
[/cc]

さて、文字の変化をみて値を更新するためにはこのようにして ta1の’change’イベントで制御をします。文字数を疲労感数はここでは jstrlen() で行っています。

[cc lang=”javascript” tab_size=”2″ lines=”30″ width=”512″]
// 文字をバイトで数えるための関数
// http://www.tohoho-web.com/js/string.htm
function jstrlen(str, len, i) {
len = 0;
str = escape(str);
for (i = 0; i < str.length; i++, len++) { if (str.charAt(i) == "%") { if (str.charAt(++i) == "u") { i += 3; len++; } i++; } } return len; } [/cc] でも実際にはこの関数では半角の文字も全角の文字も2文字で計算してしまいます。なのであまり意味が・・・後で修正することにしましょう。

その他の修正

上記以外にも、「ひらがな→半角カナ」ボタンを追加。また起動時にクリップボードに入っているものをテキストエリアの中に表示させるなどの修正を加えています。他にも少しづつあるかとお思いますがこれで大分使えるようになってきたような気がします。

次回以降で、アプリの登録やiPhoneへの転送などをしてみたいと思います。

0から始めるTitanium Mobile

第1回 Windows開発環境(Android) の構築

第2回 簡単なiPhoneアプリを作成する

第3回 簡単なiPhoneアプリを作成する(2)

0から始めるTitanium Mobile 第2回 簡単なiPhoneアプリを作成する

Read More

結構簡単にツール系であればできそうですね。

勉強不足でよくわかっていないところもありますが・・資料見ながらでもある程度作れそうです。またJavascript自体はサンプルがたくさんありますのでそれらの移植は結構簡単に行えると思います。

何が簡単なのか考えてみて Objective-C とかだと日本語の変換とか面倒な感じですがJavascriptだとそのへんに沢山サンプルが落ちているのでカナを全角→半角に変更するアプリを作成してみます。

Screenshot 1

 

STEP1. 新規作成を行う

まずは、導入したTitatium Mobile の管理画面から「New Project」で新しいプロジェクトを作成します。このあたりは前回Android版のサンプルで実施したのと同様に行います。

今回はこの初期のプロジェクトの内容を変更して作成します。

STEP2.ファイルの修正

app.js ファイルを拡張します。

サンプルなどであるようにWindowの描写は別のJsファイルに移します。10行目にある「url : ‘main.js’,」にて呼び出しを定義しています。今回はAndoridのコンパイルは行いませんがiPhone要の部分については一応制御しておきます。

[cc lang=”javascript” tab_size=”2″ lines=”30″ width=”512″]
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor(‘#000’);

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

// create base UI tab and root window
var win1 = Titanium.UI.createWindow({
url : ‘main.js’,
title:’半角カナ変換’,
backgroundColor:’#fff’
});

var tab1 = Titanium.UI.createTab({
window:win1
});

// iPhoneのステータスバーなどの変更
if (Titanium.Platform.osname == ‘iphone’ ){
// ステータスバー
Ti.UI.iPhone.setStatusBarStyle(Ti.UI.iPhone.StatusBar.TRANSLUCENT_BLACK);
}

win1.hideTabBar();
tabGroup.addTab(tab1);
tabGroup.open();

[/cc]

 

STEP3. メイン処理の記述

次に今回のメインのJSとなる main.js を載せておきます。

[cc lang=”javascript” tab_size=”2″ lines=”122″ width=”512″]
// メイン処理

var win = Ti.UI.currentWindow;
var view = Ti.UI.createView();

// 全角カナを半角カナに変換する関数 toHankaku()
// http://www.openspc2.org/reibun/javascript/business/004/
function toHankaku(motoText)
{
han = “アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォャュョッ、。ー「」゙゚”;
txt = “アイウエオカキクケコサシスセソタチツテトナニヌネノ”;
txt+= “ハヒフヘホマミムメモヤユヨラリルレロワヲンァィゥェォャュョッ、。ー「」  ”;
str = “”;
for (i=0; i= 0) c = han.charAt(n);
str += c;
}
return str;
}

var label1 = Titanium.UI.createLabel({
color:’#999′,
text:’半角カナの表示’,
font:{fontSize:20,fontFamily:’Helvetica Neue’},
textAlign:’center’,
width:’auto’
});

var button1 = Ti.UI.createButton({
title: ‘半角’,
height: 32,
width: 80
});

var button2 = Ti.UI.createButton({
title: ‘コピー’,
height: 32,
width: 80
});

var button3 = Ti.UI.createButton({
title: ‘クリア’,
height: 32,
width: 80
});

var ta1 = Ti.UI.createTextArea({
value: ‘アイウエオ’,
height: 150,
width: 300,
top: 5,
font:{fontSize:20,fontFamily:’Marker Felt’, fontWeight:’bold’},
color:’#888′,
textAlign:’left’,
appearance:Titanium.UI.KEYBOARD_APPEARANCE_ALERT,
keyboardType: Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderWidth:2,
borderColor:’#bbb’,
borderRadius:5,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
keyboardToolbar:[button3,button1,button2],
keyboardToolbarColor: ‘#999’,
keyboardToolbarHeight: 40
});

view.add(ta1);
view.add(label1);
win.add(view);

ta1.focus();

// イベントの定義
button1.addEventListener(‘click’, function(){
ta1.value = toHankaku(ta1.value);
});

// クリップボードにコピー
// http://code.google.com/p/titanium-mobile-doc-ja/wiki/guides_platform_clipboard
button2.addEventListener(‘click’, function(){
Ti.UI.Clipboard.setText(ta1.value);

if (Ti.UI.Clipboard.hasText()){
Ti.UI.createAlertDialog({
title: ‘クリップボード’,
message: Ti.UI.Clipboard.getText(),
buttonNames: [‘OK’],
cancel: 0
}).show();

} else {
alert(‘Hey there was no text.’);
}
});

button3.addEventListener(‘click’, function(){
ta1.value = “”;
});

// Text area events
ta1.addEventListener(‘change’,function(e){
label1.text = ‘change fired, value = ‘ + e.value + ‘\nfield value = ‘ + ta1.value;
});

ta1.addEventListener(‘return’,function(e){
label1.text = ‘return fired, value = ‘ + e.value;
});

ta1.addEventListener(‘blur’,function(e){
label1.text = ‘blur fired, value = ‘ + e.value;
});

ta1.addEventListener(‘focus’,function(e){
label1.text = ‘focus fired, value = ‘ + e.value;
});

[/cc]

全ての解説は行いませんがざっと見ていきます。

まず、最初に別だししたmain.jsの先頭では  var win = Ti.UI.currentWindow; として操作を行うWindowsを手に入れています。これによりapp.js側での情報を引き継いで動くことになります。

function to Hankaku(motoText) については、http://www.openspc2.org/reibun/javascript/business/004/ を参考にそのまま頂きました。このようにJavascriptは過去の遺産が色々あると思うので開発が楽になるかと思います。使われ方は通常の javascript同様に使うことが出来ます。

その後、ボタンの定義があり、テキストエリアの定義があります。各々そのなかでプロパティを定義しておくことでデザインを行うことが出来ます。今回は、キーボードと連動して動くToolbarの定義を行っています。これはテキストエリア(ta1)のプロパティで定義されています(行65-68)

各種のイベントは addEventListener() 関数を記述します。これは各コンポーネントにメソッドとして定義していきます。今回はボタンを押すとクリップボードに内容を入れたり、先程の Hankaku() 関数により半角にしたりと行った動作をそれぞれのボタンに記述していきます。1

 

STEP4.

さてどうでしょう?実際にはほとんどコードを書くことなしに使えるアプリを作ることが出来ました。実際には起動画面を変更したりアイコンを作ったりと色々しないといけないと思うので後ほど変更していきたいと思います。

勉強不足で今回は出来ていませんが次のことはどこかでしたいと思います。

  • 「ひらがな」→「半角カナ」の変換を加える
  • 起動時にクリップボードの内容を、テキストエリア(ta1)に入れる (これはできそう)
  • 起動時にテキストエリアにフォーカスを当ててキーボードを常に表示させる。Objective-Cで言うところの [textField becomeFirstResponder]; に該当するのはどこで定義?
  • 起動画面の変更
  • アイコンの変更
  • 実機への転送
  • AppStoreへの登録

まだ他にもたくさん出てきそうですが次回以降少しづつ行っていきたいと思います。ただこのアプリは完全に被っているアプリがAppStoreにありますので(^^; このままではリジェクトされそうなのでなにか機能を付ける必要がありますね。

 

 


0から始めるTitanium Mobile

第1回 Windows開発環境(Android) の構築

第2回 簡単なiPhoneアプリを作成する

第3回 簡単なiPhoneアプリを作成する(2)

  1. label1 は単純にデバック用に配置しているだけのため特に動作上意味はありません []

0から始めるTitanium Mobile 第1回 Windows開発環境(Android) の構築

Read More

0から始めるTitanium Mobile開発環境

というわけで興味津々なTitanium MobileなのですがWindowsでも利用出来るようにセットアップしたいと思います。Macの場合にはiOSのSDK環境がサイトからあったので気楽だったのですがWinodowsの場合には何も無いのでAndroidSDKの準備からしないといけません。いちおう次にはTitanium mobileで簡単なアプリを作ってアップしてみたいと思います。

 

STEP1 Android SDK の導入までの流れ

▼ 【初心者向け】Android SDKインストール手順 2011年1月版!(windows版) – smartgoods.me
http://smartgoods.me/2011/01/android_sdk_install/

コチラの記事を参考に導入を行いたいと思います。簡単簡単とおもったら意外な罠があり時間をつかいました。

▼ Android SDK 3.0(R10)インストーラーバグ対応版
http://www.hlplus.jp/php/blog/index.php?UID=1298718926#

”JDKが認識できない画面を一度Backで戻って、再度同画面に進む”とJDKが何故か認識されるようです。

というわけでJavaのJDKをなんども入れなおして痛い目を見ました。

  1. Java JDKをOracleのサイトからダウンロードして導入 (jdk-6u25-windows-i586.exe)
  2. 環境設定で、「JAVA_HOME=C:\Program Files\Java\jdk1.6.0_25」 と指定
  3. 環境変数で、「PATH=%JAVA_HOME%bin;~~」を追加
  4. Android SDKのインストーラーの実行
  5. 上記のJDKが見つからない問題は、一つ前の画面に戻って再度実行することで回避
  6. AndroidSDKインストーラーが終了すると「Android SDK and AVD Mange」rが自動起動するので「All」を選んで実行
  7. [Close]が表示されたら、次にパスを環境変数に追加する「C:\Program Files\Android\android-sdk\tools;C:\Program Fi
    les\Android\android-sdk\platform-tools」の二つのパスを追加

image

STEP2 Titanium SDK の導入までの流れ

次に本命のTitanium SDKを導入してみます。ダウンロードサイトからイメージを落とします(http://www.appcelerator.com/products/download/)にアクセスすると自動的にダウンロードが始まります。Titanium Developer.msi

  1. インストーラーを起動します。
  2. 「次へ」で進んでいけば問題ありません。導入先程度しか選択の余地はないので迷うことはないと思います。
  3. 導入が終わったら次は 「$ copy $ANDROID_SDK/platform-tools/adb.exe $ANDROID_SDK/tools」をしておきます。

 

STEP3 サンプルアプリを動かしてみる

  1. プログラムファイルから実行をしてみます。
  2. image
  3. 次に左上の  人形のアイコン(左から三個目)をクリックしてAndroidSDKのパスを通しておきます
  4. image
  5. 新規にプロジェクトを作成してみます「New Project」をクリックします。太字の箇所は気をつけて作ります。
    • ProjectType : Mobile
    • Name : kana
    • App id:  info.roguer
    • Directory: c:\tmp\android
    • Company : http://roguer.info
    • Titanimu SDK Version: 1.6.2 1
    • image
  6. 「Target&Project」を選択して「Emulator」タブを選びます。
  7. 画面下部の「SDK」「Screen」を選んでエミュレータを起動します2
  8. image
  9. タブが二つあるアプリが起動することが確認できます。(( エミュレータは起動に時間がかかるので一度起動したらそのままにしておいたほうが良いです ))

 

サンプルアプリケーションをいじりながら作りたいものを作っていきたいと思います。しかしながら正直Androidの端末を触ったことがないからさっぱり使い方がわからないという罠w

ダウンロードのぞけばここまで文章かいて2時間程度。眠いので続きはまた今度。

 

第1回 Windows開発環境(Android) の構築

第2回 簡単なiPhoneアプリを作成する

第3回 簡単なiPhoneアプリを作成する(2)

関連情報リンク

今回はただの列挙ですがリンク先のサイトには数々の整理された情報があります。

…………………………………………………………………………………………………
▼ 連載:Titanium Mobileで作る! iPhone/Androidアプリ|gihyo.jp … 技術評論社
http://gihyo.jp/dev/serial/01/titanium

…………………………………………………………………………………………………
▼ 無料で読めるTitanium Mobileの書籍風PDF「Titanium MobileではじめるiPhoneアプリケーション開発」 | ke-tai.org
http://ke-tai.org/blog/2011/04/21/titanium-mobile-iphone-pdf/

…………………………………………………………………………………………………
▼ 「Titanium Mobileで始めるiPhone / Androidアプリ開発」のメモ – sub usuilog;
http://d.hatena.ne.jp/usuihiro1978/20110225/p1

…………………………………………………………………………………………………
▼ Windowsで環境変数をいじらないでTitanium mobileを使う « kwLog
http://blog.makotokw.com/2011/03/10/windows%E3%81%A7%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%82%92%E3%81%84%E3%81%98%E3%82%89%E3%81%AA%E3%81%84%E3%81%A7titanium-mobile%E3%82%92%E4%BD%BF%E3%81%86/

…………………………………………………………………………………………………
▼ 何がなんでもTitanium MobileでKitchenSinkを起動したい人の覚書(Windows) – Cherenkovの暗中模索にっき
http://d.hatena.ne.jp/Cherenkov/20110112/p1

…………………………………………………………………………………………………
▼ Titanium MobileでAndroid向けの「Run Emulator」に失敗したときに見るまとめ – CH3COOH(酢酸)の実験室
http://ch3cooh.jp/index.php/tips/titanium-mobile/run-emulator-for-android/

…………………………………………………………………………………………………
▼ Titanium BBS(JP unofficial)
http://ti.masuidrive.jp/

…………………………………………………………………………………………………
▼ Titanium mobile で開発を始める時に役立つ情報のまとめ » astronaughts.net
http://astronaughts.net/?p=204

  1. ここで正しいバージョンにしておかないとエミュレータ欄になにも表示されませんでした []
  2. iOSと違いかなりのパターンが有るみたいでこのあたりは非常に大変そうですね>Android []