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②よく分からないので、サンプルを見てみましょう！！

新たに水上飛行機クラスを作成し、飛行機クラスの fly() 、ボートクラスの

sail()を使用したい。どのように解決する？

/* 飛行機クラス */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().'); },});

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 コマンドを実行。　　※以降、作成したプロジェクト上で実施。

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' } }});

>> sencha generate model -n Memo -f id:int,contents:string

メモアプリを作成④proxyオプションの type を切り替える事でデータの転送先を切り替える事が

できる。なお、 localstrage では、データ識別用に id が必要。

type には、以下を指定できる。

proxy: { type: 'localstorage', id : 'store-memo'}

オプション 説明Localstorage Web ストレージである LocalStorage にロード保存／保存。

Sessionstorage Web ストレージである SessionStorage にロード／保存。

Memory メモリに格納。リロードするとデータが消える。SQL Web SQL Databaseにロード／保存。Ajax XMLHttpRequest を使用し、サーバへロード／保管。

Rest RESTful HTTP を使用し、サーバへロード／保管。

Webストレージとは？データをクライアント側に保存する仕組みで HTML5からサポートされた仕様。

Cookieとの違いは以下の通り。

※オリジン・・・「プロトコル（ http）」＋「ドメイン」＋「ポート番号」　 ex) http://hogehoge:8080/

仕様 保存期間 データ量上限 通信 ブラウザ間共有Cookie 指定期間まで残る 4KB リスエス都度 同一ドメイン内（デ

ィレクトリ）で共有

LocalStorage ブラウザ終了も残る

1オリジン5MB

発生しない 同一オリジンで共有される

SessionStorage ブラウザ終了で破棄

共有されない

メモアプリを作成⑤（３） 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 コマンドを実行。

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 ボタン押下時のイベント登録 } } },

>> sencha generate controller -n Memo

メモアプリを作成⑧ // 初期表示 (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 コマンドで配布用アプリケーションの作成し、生成

したファイルを公開用フォルダへコピーする。

　　ビルドを行わなくてもWeb アプリケーションの動作確認は行えるが、圧縮無し、不要なファイルもダウンロードされてしまう為、非常に重たい。

　　 production モードでビルドすると、 10 数MB⇒1MB以下になる。

>> sencha app build production

メモアプリを作成⑫（７）画面で確認

　　それでは、以下の 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 の説明は終了となります。