[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

Titanium Mobile初心者が、スマートフォンアプリ開発で最初におさえておきたいメソッド

はじめまして、こんにちは。
エンジニア一年目、gumiの新居（ニイ）です。

拙い知識と拙い文章の私が今回ブログを書かせて頂くことになりました、よろしくどうぞ。
高度な内容は書けませんが、活用して頂ければ幸いです！！
（間違った記述がありましたら、ご指摘頂けるとありがたいです。）



内容

今回書かせて頂く内容は、個人的に注目、勉強しているTitanium Mobile（タイタニウムモバイル）です。
Titanium Mobileとは、JavaScriptのみでiPhoneとAndroidのアプリケーションを開発できるツールです。
しかもソースコードひとつでiPhoneとAndroidどちらにも対応できるので、マルチプラットフォームに対応できます。
ちなみにRuby、Python、PHPでデスクトップのアプリケーション、iPadのアプリケーションなども開発することができるようです。


Titanium Mobileのダウンロードはこちら
http://www.appcelerator.com/products/titanium-mobile-application-development/



KitchenSink
このTitanium Mobileでは、KitchenSinkというデモアプリを使うことができます（インストール必要）。
KitchenSinkとは、UIコンポーネント、APIなどをカテゴリ単位に分類したサンプル集です。
このデモアプリを参考にして、該当機能のソースコードなどを参考に開発を進めていくという感じです。


KitchenSinkのインストールはこちら
https://github.com/appcelerator/KitchenSink


ソースコードを見るには
上記インストール後、KitchenSink/Resources/ 以下にソースコードがあるので、そちらを参照



New Projectで開発スタート

新しいプロジェクトを作成すると、プロジェクト名/Resources/app.jsというファイルが生成されます。
このファイルを起点とし、開発を進めていきます。
ここでは詳しい説明は省きますが、以下がapp.jsのソースコードです。
一応簡単に説明しておくと、win1という変数にメインとなるウィンドウを格納し、その上にlabel1を追加しているイメージです。ソースコードの/* */の部分にも説明を追加してみました。
（ちなみにデフォルトでは、win1というウィンドウとwin2というwindowが生成されるのですが、今回はwin2の部分を削除しています）

app.js

// 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(); /* タブグループを生成し、変数tabGroupに格納 */


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({ /* メインとなるウィンドウを生成し、変数win1に格納 */
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({ /* タブを生成し、変数tab1に格納 */
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var label1 = Titanium.UI.createLabel({ /* ラベルを生成し、変数label1に格納 */
     color:'#999',
     text:'I am Window 1',
     font:{fontSize:20,fontFamily:'Helvetica Neue'},
     textAlign:'center',
     width:'auto'
});

win1.add(label1); /* win1にlabel1を追加 */

//
// この部分に、win1 と同じ win2 も生成されるが、今回は削除している
//

//
//  add tabs
//
tabGroup.addTab(tab1); /* tabGroupにtab1を追加 */

// open tab group
tabGroup.open();



重要なメソッド

ここからがメインで、Titanium Mobileでスマートフォンアプリを開発するために、私のような初心者の方でも最低限おさえておくと役に立ちそうなメソッドを紹介してみようと思います。

重要と書きましたが、かなり基本的な部分です。
しかし、この辺りの書き方をマスターすれば、結構スムーズにアプリ開発に入れそうなので、その意味では重要だと思います。


今回紹介する内容は、以下リファレンスにもありますので参考まで
Mobile API Reference
https://developer.appcelerator.com/apidoc/mobile/1.2/Titanium.UI-module


まずは簡単なものから。
デフォルトのapp.jsのソースコードに含まれてますので参考にしてみてください。
いずれも基本的であり、重要なメソッドです。


ウィンドウの生成　Ti.UI.createWindow

背景色の設定　Ti.UI.setBackgroundColor

タブの生成　Ti.UI.createTab

タブグループの生成　Ti.UI.createTabGroup

ラベルの生成　Ti.UI.createLabel


注）書き方として、Titanium.UI.~という書き方と、Ti.UI.~という書き方が出てきますが、どちらも同じ動作をします。


続いて、app.jsには無いメソッドを紹介します。
以下紹介するソースコードを、そのまま上で紹介したapp.jsに追加するだけで動作しますので、試してみてください。
画像を表示　Ti.UI.createImageView

// 画像を表示
var imageView = Ti.UI.createImageView({
    image: 'iphone/appicon.png',
    width: 100,
    height: 100,
    top: 5,
    left: 5
});
win1.add(imageView);


ボタンを生成　Ti.UI.createButton

// ボタンを生成
var button = Ti.UI.createButton({
    title: 'touch button',
    height: 32,
    width: 120,
    top: 120
});
win1.add(button);


テーブルを生成　Ti.UI.createTableView　Ti.UI.createTableViewRow

Ti.UI.createTableViewは、テーブルを生成するためのメソッド（所謂tableタグのようなイメージ）

Ti.UI.createTableViewRowは、表示したいデータを格納するためのメソッド（所謂tr、th、tdタグのようなイメージ）

// テーブルを生成
var sampledata_list = [{text: 'サンプル1'}, {text: 'サンプル2'}, {text: 'サンプル3'}, {text: 'サンプル4'}, {text: 'サンプル5'}]; /* リストを生成する */
var data = []; /* 表示したいデータを格納するための、空のリストを生成 */
for(var i=0; i<sampledata_list.length; i++){
    var sampledata = sampledata_list[i];
    var row = Ti.UI.createTableViewRow(); /* 表示したいデータを格納するためのメソッド */
    var sampleLabel = Ti.UI.createLabel(); /* 上記の変数 row に格納するためのラベルを生成 */
    sampleLabel.text = sampledata.text;
    row.add(sampleLabel); /* 変数 row に、 sampleLabel を追加 */
    data.push(row); /* リスト data に、変数 row を格納 */
}
var tableView = Ti.UI.createTableView({
    data: data
});
win1.add(tableView);


テキストエリアを生成　Ti.UI.createTextArea

// テキストエリアを生成
var textArea = Ti.UI.createTextArea({
    height: 100,
    width: 250,
    top: 10,
    font: {fontSize: 20},
    borderWidth: 2,
    borderColor: '#bbb'
});
win1.add(textArea);


以上で、基本的な設計は出来るのではないかと思います。（抜けがあったり、もっと重要なものもありますが、あまり書きすぎても冗長になるので、絞って書いてみました）
必要なものがあれば、随時KitchenSinkなどを参考にすれば良いと思います。


完全に初心者向けの内容ではありますが、以上のものを組み合わせていけば、Twitterクライアント風アプリも手軽に作れます。



最後に

現在普及が進んでいるスマートフォンですが、アプリケーションの開発手法も様々あり、まだまだ手探りな状態ではないかと思います。
今回紹介したTitanium Mobileは、JavaScriptで簡単にツール系アプリが作れるよということで、ゲーム系アプリなどを作るには向いてないのかなと思います。


ちなみに、Titanium Mobileで作られたアプリとして有名なのがこちら
もぐもぐエンターテイメント系Twitterクライアント MogSnap 〜We Love Mogmog！〜


主なライブラリ、フレームワーク
jQuery Mobile
jQTouch
Sencha touch
iui


主なスマートフォン向けゲームエンジン
Unity
UDK

などなど

それぞれに特性や特徴があり、ツール系アプリ、ゲーム系アプリ、3Dゲーム、それぞれ開発に必要な技術も当然違いますし、どれを使うか選定も重要になってくるでしょうね。

開発ツールやフレームワークの覇権争いも激化していますし、今後も注目していきたいです。