Sencha Touchとは

Sencha Touch 2
作成日：２０１３年０5月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の概要
■ライセンス利用形態
１．Commercial Software License(Free)
無料で商用利用可能。チャート機能は含まず ★今回はコレを使用
２．Commercial Software License(Embedded Devices)
テレビ、カーナビなどの組み込み向けのライセンス
３．Commercial OEM License(Paid License)
Sencha Touchを組み込んだ開発ツールを作る場合に必要なライセンス
４．Open Source License
開発したソースを一般公開する義務がある。チャート機能含む
５．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の頭文字を示す。
プログラムを３つの要素で分け、それぞれの役割を持つ。
・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ボタン･･･保存したデータを削除
メモアプリを作成②
（１）プロジェクトの作成
コマンドプロンプトで、以下の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）を指定する。
他はビルド時の設定ファイルなど。必要に応じて変更。
メモアプリを作成③
（２）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/
共有されない
メモアプリを作成⑤
（３）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.
});
メモアプリを作成⑦
（４）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('メッセージ', 'データを消去しました。。');
}
});
メモアプリを作成⑩
（５）初回起動する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'));
}
});
メモアプリを作成⑪
（６）アプリのビルド
アプリケーションのビルドでは、以下の事ができる。
・Webアプリケーションとして、配布用のパッケージの作成
- ファイルの圧縮
- Sass/Compassファイルのコンパイル
・iOS、Android用のネイティブアプリケーションの作成
ネイティブAPIでは、以下の機能が利用できる。
- ネットワークの接続状況を取得
- 通知機能の利用
- 傾きや画面の向きを見地
- カメラや写真へアクセス
メモアプリを作成⑫
以下のSencha Cmdコマンドで配布用アプリケーションの作成し、生成したファイ
ルを公開用フォルダへコピーする。
>> sencha app build production
ビルドを行わなくてもWebアプリケーションの動作確認は行えるが、圧縮無し、不
要なファイルもダウンロードされてしまう為、非常に重たい。
productionモードでビルドすると、10数MB⇒1MB以下になる。
メモアプリを作成⑫
（７）画面で確認
それでは、以下の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の説明は終了となります。

Download Report