Sencha Touchとは

Sencha Touch 2
作成日:2013年05月26日
作成者:石川
易
難
スマートフォン開発時の課題
スマートフォン開発には、以下の課題がある。
• スマートフォン毎に仕様が異なる
• スマートフォンに向けた最適なユーザインターフェースが求められる
これらを解決する手段の一つとして、以前の発表会では「jQuery Mobile」と
いうモバイル用JavaScriptライブラリについて発表しました。
今回は、『Sencha Touch』というモバイル用JavaScriptライブラリについて
説明していきます。
Sencha Touchの概要
■Sencha Touchとは
Sencha Touchは、ハイパフォーマンスなHTML5対応のモバイルアプリケーション
フレームワーク(最新ver 2.2.1)
■経緯
2010年7月
初版0.9ベータ公開。
Android、iOS対応
2010年11月
初の安定版である1.0が公開。
1.1でBlackBerry対応
2012年3月
2.0が公開。
Google Chrome、Kindle Fire Browser、Safari対応
Sencha Touchの概要
■ライセンス利用形態
1.Commercial Software License(Free)
無料で商用利用可能。チャート機能は含まず ★今回はコレを使用
2.Commercial Software License(Embedded Devices)
テレビ、カーナビなどの組み込み向けのライセンス
3.Commercial OEM License(Paid License)
Sencha Touchを組み込んだ開発ツールを作る場合に必要なライセンス
4.Open Source License
開発したソースを一般公開する義務がある。チャート機能含む
5.Complete License
商用可能な有料ライセンス。
チャート機能、ExtJS、Sencha Archtectなど製品一式を利用可能。
特 徴
• 「WebKit」レンダリングエンジン上で動作
• HTML記述なしでコンテンツを形成
• MVCパターンを利用した開発が可能
WebKitとは?
アップルが中心となって作成しているオープンソースのHTMLレンダリングエン
ジン群の総称で、HTML、CSS、JavaScriptなどを解釈し、画面描画や動きなど
を提供する。
【代表的なWebkitブラウザ】
・Google Chrome
・Android標準ブラウザ
・Safari
【WebKit以外のブラウザ】
・Gecko(Netscape、Firefox)
・Trident(Internet Explorer)などがある。
MVCパターンとは?
名称の由来はModel、View、Controllerの頭文字を示す。
プログラムを3つの要素で分け、それぞれの役割を持つ。
・Model
・・・ ビジネスロジックを扱うクラス(計算処理、データアクセスなど)
・View
・・・ ユーザの入力やビジネスロジックの結果を出力するクラス
・Controller・・・ ユーザの要求に対する処理を行うクラス
http://ja.wikipedia.org/wiki/Model_View_Controller より引用
準 備
Sencha Touchの開発を行う為には、以下の準備が必要。
・Sencha Touch 2.1 SDK
Sencha Touchアプリケーションの開発キット。
ソースコード、画像ファイル、CSS、ドキュメントなどが含まれる。
・Sencha Cmd 3.0
開発補助を行うコマンドラインツール。
プロジェクトの雛形作成、ソースコードの生成・圧縮、アプリケーションのビルドを行う。
Java実行環境(jre6以降)が必要。
・Webサーバ
Sencha Touchが提供するのはブラウザ上で動くフレームワークである為、 ApacheやNginxなどのWebサー
バが必要となる。
開発の流れ
以下の流れで、開発を進めていく。
① プロジェクトの雛形を作成【初回のみ】
・必要なディレクトリ(CSS、イメージファイル、アプリケーション)の作成
・アプリケーションの起動ポイントとなるindex.htmlの生成
・ビルド用設定ファイルなどの生成
② Model/View/Controllerを作成【随時】
・必要に応じて、Model、View、Controllerを作成
・作成⇒実行⇒デバッグを繰り返し
③リリース用パッケージを作成【リリース時のみ】
・Sencha Cmdでリリース用パッケージを生成
Senchaのクラス定義
いきなりアプリを見せるのもアレなので、まずは簡単なクラス定義から・・・
// クラス定義
Ext.define('sample.Hoge',
{
// プロパティ
config: {
name : null,
age : null
},
// コンストラクタ
constructor: function(config) {
this.initConfig(config);
},
// ユーザ定義の関数
greet: function(message) {
alert(message + ‘、私の名前は' + this._name + ' ' + this._age + '才です。');
}
});
実行すると
greet関数を実行するには以下のようにする。
var hoge = Ext.create('sample.Hoge', { name: '笹○', age: 26 } );
hoge.greet('こんにちは');
実行すると以下のアラートが表示されます。
こんにちは、私の名前は笹○、26才です。
Senchaでできること
Senchaでは、以下の事ができる。
-
シングルトン指定
クラスの継承
メソッドのオーバーライド
型概念の導入
バリデーション
Mixin(ミックスイン)
アソシエーション(モデル間の関連、hasOne/hasMany)
Mixin①
全部を紹介するのは大変なので、便利な機能を紹介。
■Mixin(ミックスイン)
オブジェクト指向言語において、サブクラスによって継承されることにより機能を提供する。
多重継承の欠点を最小にして利点を生かすテクニック。
・クラスの継承と何が違う?
クラスの継承 ⇒単一継承の制約(多重継承ができない)
Mixin
⇒継承関係とは関係なく共通の特性、振る舞いの再利用が可能
Mixin②
よく分からないので、サンプルを見てみましょう!!
/* 飛行機クラス */
Ext.define('core.mixin.Plane',
{
// 飛ぶ機能
fly: function() {
console.debug('call core.mixin.Plane#fly().');
},
});
/* ボートクラス */
Ext.define('core.mixin.Boat',
{
// 航海する機能
sail: function() {
console.debug('call core.mixin.Boat#sail().');
},
});
新たに水上飛行機クラスを作成し、飛行機クラスのfly() 、ボートクラスの
sail()を使用したい。どのように解決する?
Mixin③
・水上飛行機クラスにも同じfly()とseal()関数を用意する?
⇒ムダ(メンテナンスが大変だし、今後似たような機能増やす場合もそうするの?)
・水上飛行機クラス内から飛行機、ボートクラスの関数を呼び出す?(処理の委譲)
⇒処理が煩雑になるし、コード量も多くなる。
いずれも問題がありますよね?
Mixinを使うと以下のようにして解決できます。
/* 水上飛行機クラス */
Ext.define('core.mixin.SeaPlane',
{
// Mixinとして定義
mixins : {
plane : 'core.mixin.Plane',
boat : 'core.mixin.Boat'
},
doHoge : function() {
this.mixins.plane.fly.apply(); // このようにしても呼べる
}
});
メモアプリを作成①
ここからSenchaのMVCパターンを使用して簡単なアプリを作成してみます。
【機能】
・簡易機能のメモ帳を作成する
・メモの保存機能を持つ
・保存したメモを削除する
【画面】
※右のイメージ図を参照
【詳細】
・初期起動時に保存したものを表示する
・saveボタン ・・・LocalStorageにデータを保存
・deleteボタン・・・保存したデータを削除
メモアプリを作成②
(1)プロジェクトの作成
コマンドプロンプトで、以下のSencha Cmdコマンドを実行。
※Sencha Touchをインストールしたディレクトリ内で実施。
>> sencha generate app {アプリ名} {任意のパス}
{任意のパス}
├app
│├controller
│├model
│├profile
│├store
│└view
├reurces
│├css
│├icons
│├loading
│├sass
│└startup
├touch
│ ├cmd
│ ├microloader
│ ├resources
│ └src
├app.js
├app.json
├build.xml
├index.html
└packager.json
ここにMVCパターンに沿ったソースを記述
イメージファイルやCSSなど基本的にはこのまま
Senchaのソースがコピーされる基本的にこのまま
app.jsに起点となる画面(view)を指定する。
他はビルド時の設定ファイルなど。必要に応じて変更。
メモアプリを作成③
(2)Modelの作成
コマンドプロンプトで、以下のSencha Cmdコマンドを実行。
※以降、作成したプロジェクト上で実施。
>> sencha generate model -n Memo -f id:int,contents:string
Ext.define('sample.model.Memo', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'id', type: 'int'},
{name: 'contents', type: 'string'}
],
// 以下を追加
proxy: {
type: 'localstorage',
id : 'store-memo'
}
}
});
メモアプリを作成④
proxyオプションのtypeを切り替える事でデータの転送先を切り替える事ができる。
なお、localstrageでは、データ識別用にidが必要。
proxy: {
type: 'localstorage',
id : 'store-memo'
}
typeには、以下を指定できる。
オプション
説明
Localstorage
WebストレージであるLocalStorageにロード保存/保存。
Sessionstorage
WebストレージであるSessionStorageにロード/保存。
Memory
メモリに格納。リロードするとデータが消える。
SQL
Web SQL Databaseにロード/保存。
Ajax
XMLHttpRequestを使用し、サーバへロード/保管。
Rest
RESTful HTTPを使用し、サーバへロード/保管。
Webストレージとは?
データをクライアント側に保存する仕組みでHTML5からサポートされた仕様。
Cookieとの違いは以下の通り。
仕様
保存期間
データ量上限
通信
ブラウザ間共有
指定期間まで残る
4KB
リスエス都度
同一ドメイン内(ディレク
トリ)で共有
LocalStorage
ブラウザ終了も残る
1オリジン
5MB
発生しない
同一オリジンで共有さ
れる
SessionStorage
ブラウザ終了で破棄
Cookie
※オリジン・・・「プロトコル(http)」+「ドメイン」+「ポート番号」
ex) http://hogehoge:8080/
共有されない
メモアプリを作成⑤
(3)Viewの作成
Sencha Cmdには、View作成コマンドがないので手動で作成。
Ext.define('sample.view.MemoForm', {
extend: 'Ext.form.Panel',
xtype : 'memoform',
config: {
items: [
// 画面上部のタイトルバー
{
docked: 'top',
xtype : 'titlebar',
title : 'Sencha Touch 2',
items : [
// saveボタン
{
xtype : 'button',
align : 'left',
text : 'save',
ui
: 'action',
action: 'save'
},
メモアプリを作成⑥
// deleteボタン
{
xtype : 'button',
align : 'right',
text : 'delete',
ui
: 'decline',
action: 'delete'
}
]
},
// メモ欄
{
xtype : 'fieldset',
title : '覚え書き',
items : [
{
xtype : 'textareafield',
name
: 'contents',
maxRows: 15,
placeHolder: 'メモを記述'
}
]
}]
// end of items.
}
// end of config.
});
メモアプリを作成⑦
(4)Controllerの作成
コマンドプロンプトで、以下のSencha Cmdコマンドを実行。
>> sencha generate controller -n Memo
Ext.define('sample.controller.Memo', {
extend: 'Ext.app.Controller',
config: {
// 以下を編集
refs: {
‘form’: 'memoform'
// formを関連付け
},
control: {
'memoform': {
initialize : 'onInitializeForm' // 初期表示時のイベント登録
},
'button[action=save]' : {
tap : 'onSaveButtonTap'
// saveボタン押下時のイベント登録
},
'button[action=delete]' : {
tap : 'onDeleteButtonTap'
// deleteボタン押下時のイベント登録
}
}
},
メモアプリを作成⑧
// 初期表示(ModelからViewへセット)
onInitializeForm : function(form) {
sample.model.Memo.load(1, {
scope: form,
success : function(record, operation) {
this.setRecord(record);
},
failure : function(record, operation) {
}
});
},
// saveボタン押下処理(ViewからModelへ転送)
onSaveButtonTap : function() {
var form = this.getForm();
var values = form.getValues(); // formから値を取得
var record = form.getRecord(); // モデルを取得
if (!record) {
record = Ext.create('sample.model.Memo', {id: 1, contents: ''});
}
Ext.Object.each(values, function(key, value) {
record.set(key, value);
});
record.save(function() {
Ext.Msg.alert('メッセージ', 'データを保存しました。');
});
},
メモアプリを作成⑨
// deleteボタン押下処理(Modelのデータを消去)
onDeleteButtonTap : function() {
var form = this.getForm();
var record = form.getRecord();
if (record) {
record.erase(function() {
});
}
form.down('textareafield').setValue('');
Ext.Msg.alert('メッセージ', 'データを消去しました。。');
}
});
メモアプリを作成⑩
(5)初回起動するViewを指定
app.jsのlaunch関数に、以下のコードを記述。
Ext.application({
controllers: ["Memo"],
models: ["Memo],
name : 'sample',
views : ['MemoForm'], // 手動で登録
launch: function() {
// 初回に起動したViewを指定
Ext.Viewport.add(Ext.create('sample.view.MemoForm'));
}
});
メモアプリを作成⑪
(6)アプリのビルド
アプリケーションのビルドでは、以下の事ができる。
・Webアプリケーションとして、配布用のパッケージの作成
- ファイルの圧縮
- Sass/Compassファイルのコンパイル
・iOS、Android用のネイティブアプリケーションの作成
ネイティブAPIでは、以下の機能が利用できる。
- ネットワークの接続状況を取得
- 通知機能の利用
- 傾きや画面の向きを見地
- カメラや写真へアクセス
メモアプリを作成⑫
以下のSencha Cmdコマンドで配布用アプリケーションの作成し、生成したファイ
ルを公開用フォルダへコピーする。
>> sencha app build production
ビルドを行わなくてもWebアプリケーションの動作確認は行えるが、圧縮無し、不
要なファイルもダウンロードされてしまう為、非常に重たい。
productionモードでビルドすると、10数MB⇒1MB以下になる。
メモアプリを作成⑫
(7)画面で確認
それでは、以下のURLで確認してみましょう!
http://www.forefrontier.co.jp/sample/
HTMLソースを確認
起動後のHTMLソースを確認してみる。
LocalStorageを確認
データを保存後のLocalStorageを情報を確認してみる。
保
存
後
デザイン概論
Sencha TouchのデザインはHTML+JavaScript+CSSで作られている為、通常のWeb
ページと同様にCSSでカスタマイズできる。
CSSの変更には、Sass/Compass環境と、Sassの文法理解が必要となる。
■Sassとは
CSSを拡張したCSSメタ言語で、CSSだけでは表現できなかった、変数やMixin、関数
などを利用し、再利用性が高められた言語。CSSはコンパイルして作成する。
コンパイルには、Rubyの実行環境が必要となる。
■Compassとは
Sassの機能を拡張するフレームワーク。
最後に
Sencha Touchは、 HTMLを全く記述せずコンポーネントを組み合わせて画面を構築していくとい
う点においては、 jQueryやjQuery Mobileと違ったアプローチで面白さがあると思います。
ただし、デザインとロジックが分離がされているとはいえ、レイアウトが複雑化していくと、オブ
ジェクトリテラルのネストが深くなる(コードの見通しが悪くなり、デバッグしずらくなる)、従来の
HTMLに慣れ親しんでいるウェブデザイナでも扱えるのか?などデメリットもある。
また、リリースの頻度の多さ、日本語ドキュメントや書籍が少なく、多言語化(ローカライズ)が
貧弱な為、まだまだ発展途上なフレームワークで、プロジェクトへの適用には十分な検討が必要
となり、まだまだ敷居が高いと感じました。
ただし、今後、開発環境、ドキュメント類が整ってくれば、オブジェクト指向言語としてのメリットが
享受できるようになる為、従来のHTML+CSS+JavaScript(jQuery)構成の牙城を切り崩せる可能
性が十分ありえるフレームワークだと思います。
以上で、Sencha Touchの説明は終了となります。