増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

Titanium StudioでつくるiPhoneアプリ

      2013/06/28

こんばんわ!rmascoです。

さて、最近街中でもどこでも、
スマホ、スマホとか言われているスマートフォン。
各種携帯電話会社もスマートフォンを強気に出しています。

スマートフォンといえば色々なアプリで機能を拡張できるのが魅力かと思います。
開発者の端くれとしては、是非とも手を出しておきたいところ!

スマホアプリ開発始めました

アプリ開発で今有名なのが「Titanium」です。
この「Titanium」を使用すると、iPhoneアプリもAndroidアプリも、
JavaScriptだけで実現できてしまうという画期的なものです。

同じようなところで「PhoneGap」というものもあります。
こちらもHTMLとJSだけでそれぞれのアプリを作成することができます。

「PhoneGap」は少しだけ触ったことがありますが、
少し機能が少ないなという印象でした。

Titaniumを使ってみよう!

Titaniumを使用してアプリを作成していく過程をお伝えしていきます。
※例によって、インストール手順などは省きます。

今回はカレンダーのようなアプリを作成してみました。
まだ実装は特にしていないので、本当に表示だけしかできません。

実際の開発方法

まずアプリの画面の下を見ると、タブが表示されていることがわかるかと思います。

今回は「day」と「month」というタブを作成しました。

Titaniumで作成する場合、UIもJSで記述することになります。

ではタブ作成編です。
まずタブを作成する前にタブグループというオブジェクトを作成し、
そこにタブを追加していきます。
———————————————————-

var tabGroup = Ti.UI.createTabGroup();

var dayTab = Ti.UI.createTab({
title: 'day',
window: dayWin
});
tabGroup.addTab(dayTab);

———————————————————-

タブを作成するのがcreateTabというメソッドです。
パラメータはtitle、windowというのを使用しています。
titleは当然タブに表示されるテキストです。
windowはタブを表示したときに関連付けるwindowになります。

今回はdayWinとして、このような記述で作成しています。
———————————————————-

var dayWin = Ti.UI.createWindow({
title: 'day',
backgrundColor: '#fff'
});

———————————————————-

createWindowというメソッドを使用して作成しっています。
パラメータはtitleとbackgroundColorを使用しています。

ここまでで、タブを表示したら空白のページが出来上がります。
肝心なコンテンツを載せて行きましょう。。

まず日付の一覧を表示しているリストです。
これはTableViewというオブジェクトで表示します。
createTableViewというメソッドでオブジェクトを作成し、このオブジェクトに行を追加していくイメージです。
for文で1〜日付の最終日までをループし、1行づつ追加していきます。
———————————————————-

var tableView = Ti.UI.createTableView();
for(var i = 1; i <= dayEnd; i++){
var row = Ti.UI.createTableViewRow();

var label = Ti.UI.createLabel({
text: i + '日',
top: 3,
left: 5
});

row.add(label);
tableView.appendRow(row);

}
dayWin.add(tableView);

———————————————————-

もうみなさんお気づきかと思いますが、create○○で何かを作成するメソッドになっているようです。

ループの中のcreateLabelはテキストを表示するラベルを作成します。
ラベルのtextには表示させたいテキストを入れます。
例の場合、○日という具合に日付を表示させています。

次に行オブジェクトにラベルを追加します。

row.add(label);

行オブジェクトに追加したら、今度は行をテーブルに追加します。

tableView.appendRow(row);

最後に、ウィンドウにコンテンツとなる中身のテーブルビューを追加します。

dayWin.add(tableView);

たったこれだけのコードで、iphoneやandroidなどに対応できるなんて。。。
素晴らしすぎる!!

あのObjective-Cを覚えなくてもよいかと思うと安心しました。
今後もアプリを作成しながら、面白いものがあれば、ブログで紹介したいと思います。

 - wordpress