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

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

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

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

Screenshot 1

STEP1. 新規作成を行う

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

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

STEP2.ファイルの修正

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 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();

STEP3.　メイン処理の記述

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

// メイン処理

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<motoText.length; i++)
{
c = motoText.charAt(i);
n = txt.indexOf(c,0);
if (n >= 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;
});

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

まず、最初に別だしした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() 関数により半角にしたりと行った動作をそれぞれのボタンに記述していきます。¹

STEP4.

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

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

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

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