Titanium

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

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

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)

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

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

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

 

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 は単純にデバック用に配置しているだけのため特に動作上意味はありません [↩]