Titanium実装最初の一歩.

2012/5/19

Titanium Mobile 実装最初の一歩
∼CommonJS や公式英語版の Tips ポロリもあるかもよ∼

Titaniumで作るiPhoneアプリ
の実装フローとCommonJSなどの話

copyrightは無いよ

自己紹介(twitterID:leftyweapon)

call me HIDARI !

エンジニア経験有りの前職人事です

Titaniumは、2月くらいから

名古屋グランパスのファンです

デモいる？
Titaniumとは

JavaScriptでiOSやAndroidの
ネイティブアプリ書けるやつ

http://vimeo.com/19890288

mogsnapも ZaimもココログもサイボウズLiveも

他にもたくさんアプリがTitaniumで作られている

mogsnapも ZaimもココログもサイボウズLiveも

他にもたくさんアプリがTitaniumで作られている

多少、黒魔術あるけど実績十分

Titaniumのすごさはプロ生14回品川見るべし
http://www.nicovideo.jp/watch/1333931829

他にも色々すごい所あるけど、

僕でもiPhoneアプリが書けた所。
今は使いやすさ改善のため、30人くらいがお試し中

リリースしたら、
使ってください!

更に学べる環境も整ってきた

最近2.0に
バージョンアップ

クラウドとの連携が可能に!
アプリに必要なサーバーサイドの処理

アカウントの作成・管理

データのストレージ

も、既にできるらしい

http://d.hatena.ne.jp/donayama/20120325/cocoaﬁsh_de_lesstagram

書き方もCommonJSスタイルに

書き方もCommonJSスタイルに

え？CommonJS？

CommonJSって？

ブラウザ以外でJavaScriptが
もっと活躍できるような標準規格を
作りましょうという話

書き方が大分変わります

@donayamaさん世界初のTitanium サンプル豊富の
無料のPDFです書籍電子書籍

そのままは使えない

CommonJSで書く必要性は？

・これから出てくるドキュメントがそうなるので

・より大規模なアプリが作りやすい

公式から無料の電子書籍が登場

Ti本著者の@donayamaさんによって
日本語も整備中

http://code.google.com/p/titanium-mobile-doc-ja/downloads/detail?
name=TitaniumMobileFirstStepGuide_beta.pdf&can=2&q=

そもそものTitaniumの書き方も知らん

電子書籍版、英語で分量たくさんあるよ
(iPhone版iBookで1600ページ!)

今日のアジェンダ

Titaniumでの簡単な実装の紹介

画面イベントメソッド

Common JSによって変わる部分

電子書籍版の中の面白いTipsだけ紹介
(時間無いかも)

Titanium学習のロードマップ

プロ生１４回品川の増井さんの発表を見る
(所要時間1時間)


今日の放送を見る
(所要時間最大４０分)


titanium studio + kitchensinkを入れる
(所要時間？時間)



ドットインストールを見る



ドットインストールを見る

作る

タブグループ

タブグループ >タブ

タブグループ >タブ >ウィンドウ

タブグループ >タブ >ウィンドウ >パーツ


画面画面についての作り方(従来の書き方)
タブグループ>タブ>ウィンドウ>パーツ

var tabGroup = Ti.UI.createTabGroup();

tabGroup.open();



var tab1 = Ti.UI.createTab({
icon:'icon_list.png',//画像
title:'表示されるテキスト',
window: win1 //実際の画面
});
tabGroup.addTab(tab1);
//タブの数だけ繰り返す



var win2 = Titanium.UI.createWindow({
width: 320,height: 480,
top: 0, left: 0,
backgroundImage: 'background.png',
url: 'window2.js',
});



var label = Titanium.UI.createLabel({
height: 30,top: 20,left: 20,
font: {fontSize: 14, fontFamily: 'Helvetica'},
text: 'Titanium'
});
win2.add(label);



大きな物.add(小さいもの)で配置していく

他のパーツはどんな物があるの？

乗っけられるパーツの種類
mapview テキスト画像ボタン

WEBページレイアウト系のパーツ


addEventListener( イベント名 , function(e) {
//ここで命令を呼び出す
}

Titaniumでの簡単な実装の紹介デモいる？

イベント

呼び出せるイベント

タップ、スワイプ、ダブルタップ、
タッチの開始、タッチ中、タッチ終了など
ほぼ何でも


function methodName() {
//実装
}

JavaScriptって思ったよりはしっかり
書ける言語だと思います(LL言語利用者にとって)

メソッド
使えるAPIの例
データベース:sqliteでCRUDできます
プラットフォーム:IPアドレスやメモリ使用量、
バッテリ残量など

デバイス:GPS、コンパス、加速度センサー、音楽、
アドレス帳、カメラ、クリップボード、キーボード

リアルタイム系のゲームやお絵描き以外は、
標準APIで何とかなる

titaniumの実装のフローまとめ


UI作って


UI作って

イベント設定して


UI作って

イベント設定して

命令を実行する

最近のTitaniumでの書き方

なんでこういう変化が起きたのか
1.マルチコンテキストの弊害

2.色んな物への対応

3.より本格的になってきた

異なる Window の間で情報の
やりとりを行うときに大体ハマります



引用:小さな Titanium Mobile の読み物


デバイスが増えて、このままだとソースが複雑に。
(tablet、iPad、blackberry、mobile web対応が可能)



大規模化すると
名前空間が汚染されていってしまう


大規模化すると
名前空間が汚染されていってしまう
引用:BNApp eBOOK(公式の電子書籍)

titaniumの現在のベストプラクティス

シングル
CommonJS
コンテキスト

シングルコンテキストとは？

commonjsで何を取り入れているの？


実行時に、全部app.jsにファイルが展開される



実行時に、全部app.jsにファイルが展開される


module

変化を受けた部分その1

変化を受けた部分その1 ファイル構成

変化を受けた部分その1 ファイル構成

Resources
app.js 一番最初に呼ばれるファイル
db.js データベースを呼ぶファイル
ui
common 共通
handheld スマフォ
tablet タブレット

CommonJS:module in Titanium

モジュールの作り方

モジュールの呼び出し方

モジュールの作り方作り方二通り

1.exports = function methodName(hikisuu) {
//実装
}

2.module.exports = methodName;

モジュールの作り方作り方二通り

1.exports = function methodName(hikisuu) {
//実装
}

2.module.exports = methodName;

違いは何？

引用:http://d.hatena.ne.jp/donayama/20111230/
定義 commonjs_modules_in_titanium

exports
モジュール内に存在する複数の変数に対して外部に
公開されるインタフェイスを付与することができる

module.exports
モジュール内に存在する単一のオブジェクト
に対して外部に公開されるインタフェイスを
付与することができる

モジュールの作り方 leftyweapon的解釈

exports

メソッドや変数のみをモジュール化するのに
使っている

module.exports

オブジェクトを生成するのに使っている
コンストラクタのような役割(画面の生成とか)


exports

使っている険 !危
るな
module.exports 混ぜ


exports

使っている険 !危
るな
module.exports 混ぜ

一つのファイルの中に２つの方式を
混ぜない(これ本当！)

exports 実装例

exports.selectListItems = function (_flg) {
var db = Ti.Database.open(DATABASE_NAME);
var rows =db.execute('select ROWID,* from list where flg = ?',_flg );
rowData = [];
while (rows.isValidRow()) {
rowData.push({
id: rows.fieldByName('ROWID'),
name:rows.fieldByName('list'),
})
rows.next();
}
db.close();
return rowData;
}

exports 実装例

exports.selectListItems = function (_flg) {

}

module.exports 実装例

function ApplicationWindow() {
var self = Ti.UI.createWindow({
backgroundColor:'#ffffff'
});

return self;
};

module.exports = ApplicationWindow;

モジュールの呼び出し方下準備＞呼び出し

requireして、外部のファイルのファイルを取り込む

require( ui/handheld/startwindow )

緑の中は、ファイル名を書くけど.jsつけない

モジュールの呼び出し方下準備＞呼び出し

exports

1.var db =require( db );

2.var selectListItems = db.selectListItems();

module.exports

1.var window = require( ui/handheld/window )

2.new Window().open();

CommonJSまとめ

CommonJSは、Moduleが実装されている

モジュールを作る

モジュールを呼び出す

プログラマーにとっては、
気持ちよく書けるようになった

いくつかの公式サンプルを写経すれば、
デザイナーでも怖くない


Javascriptの書き方そのもののTips

DBについて

Titatanium特有のTips

その他の仕組み

引用:JavaScript Developement Primer



1.即時関数、三項演算子 (略

2.for文の書き方でi<array.lentghを使わない

3.if文の判定===を使う

理由:毎回array.lengthを実行するから

for(var i=0,j=array.length; i<j; i++ {

}

理由:毎回array.lengthを実行するから

for(var i=0,j=array.length; i<j; i++ {

僕はPython好きなので知らなかった
}
for x in iterator:
(Pythonに閉じる}は無い!)




var testme = '1';
if(testme == 1) {
! // this will be executed because '1' is
converted to an integer!
}



==を使うと型変換されてしまう！という衝撃の事実

var testme = '1';
if(testme == 1) {
! // this will be executed because '1' is
converted to an integer!
}

引用:working with a SQLite Database
DBについて

1.installを使う事

2.データベースに初期データを詰め込みすぎない

3.updateやinsertはトランザクション
使うと処理速度が改善する

4.iCloud対応

DBについて

1.installを使う事

テーブルが無ければSQLを流して作る
というのが本のサンプルに書いてある

毎回起動時にSQLが走るのでもったいない

事前にDB作って、パフォーマンスアップ

DBについて
2.データベースに初期データを詰め込みすぎない
AppStoreのダウンロード時に大量の
データを配布しない

3.updateやinsertはトランザクション
使うと処理速度が改善する

DBについて
4.iCloud対応
書き方によっては、リジェクトされる
とりあえずの対応(iCloud使わないと明記する事で対応)

db.ﬁle.setRemoteBackup(false);

詳細に書いてくださっている日本語のページが。感謝!
http://selfkleptomaniac.org/archives/1857

引用:Best Practice and Recommendations


1.Titanium Prototypesを拡張しちゃダメ

2.個人情報を.jsじゃないファイルに入れちゃダメ

3.システムプロパティを頻繁に呼ぶと
パフォーマンスが落ちる


1.Titanium Prototypesを拡張しちゃダメ

純粋なJavaScriptのオブジェクトじゃないから
拡張しちゃうとどうなっても知らないよ



2.個人情報とか？.jsじゃないファイルに入れちゃダメ
(この辺は訳に自信がありません)

逆コンパイルされるとアウト。


3.システムプロパティを頻繁に呼ぶと
パフォーマンスが落ちる

ローカル変数に落とし込みなさい

システムプロパティには、プラットフォーム
だったり、ハードウェアの情報などが
入っている

その他の仕組み

requireするとキャッシュされる

exportsすると変数がプライベートのスコープ
を持つようになる(具体的には書いてなかった）

MVCフレームワークがある

Xib2Js2.0
and TiMock
released
http://blog.frogonmobile.com/2012/05/xib2js20-and-timock-released/

XcodeのStoryBoardで
作ったソースファイルを
TitaniumのJavaScriptへ変換

GUIでシャカシャカUIが作れる優れもの

XcodeのStoryBoardで
作ったソースファイルを
TitaniumのJavaScriptへ変換

GUIでシャカシャカUIが作れる優れもの

待望のCommonJS対応

著者は日本人なので
ドキュメントもあるし、
Twitterフォローするもよし
twitterID:@daoki2

TiMockというのも同時リリース
ですごいらしいよ

Titanium界からはこんなコメントが

このライトニングトークで一番かっこよかった
のは @daoki2 さんの Xib2Js です。

小さな Titanium Mobile の読み物著者さんより

xib2jsが便利そうだった。
ただ変換するだけじゃなくて ∼一部略∼
至れり尽くせり。
http://blog.makotokw.com/2012/04/21/titanium-mobile-2-0-%E3%83%AD%E3%83%BC%E3%83%B3%E3%83%81%E8%A8%98%E5%BF
%B5%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AB%E8%A1%8C%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%9F/

Titanium 2.0ローンチ記念イベントレポートより

続きはWEBで

xib2js & Timockで検索

本当に終わり。

ありがとうございました

Titanium実装最初の一歩.

Titanium実装最初の一歩.

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (12)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Titanium実装最初の一歩.

Ähnlich wie Titanium実装最初の一歩. (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

Titanium実装最初の一歩.

Hinweis der Redaktion