Sencha Touch 2

1. Sencha Touch 2 作成日：２０１３年０5月26日 作成者：石川

2. スマートフォン開発時の課題 スマートフォン開発には、以下の課題がある。 • スマートフォン毎に仕様が異なる • スマートフォンに向けた最適なユーザインターフェースが求められる これらを解決する手段の一つとして、以前の発表会では「jQuery Mobile」と いうモバイル用JavaScriptライブラリについて発表しました。 今回は、『Sencha Touch』というモバイル用JavaScriptライブラリについて 説明していきます。

3. Sencha Touchの概要 ■Sencha Touchとは Sencha Touchは、ハイパフォーマンスなHTML5対応のモバイルアプリケーション フレームワーク（最新ver 2.2.1） ■経緯

4. 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など製品一式を利用可能。

5. 特　徴 • 「WebKit」レンダリングエンジン上で動作 • HTML記述なしでコンテンツを形成 • MVCパターンを利用した開発が可能

6. WebKitとは？ アップルが中心となって作成しているオープンソースのHTMLレンダリングエン ジン群の総称で、HTML、CSS、JavaScriptなどを解釈し、画面描画や動きなど を提供する。 【代表的なWebkitブラウザ】 ・Google Chrome ・Android標準ブラウザ ・Safari 【WebKit以外のブラウザ】 ・Gecko（Netscape、Firefox） ・Trident（Internet Explorer）などがある。

7. MVCパターンとは？ 名称の由来はModel、View、Controllerの頭文字を示す。 プログラムを３つの要素で分け、それぞれの役割を持つ。 ・Model ･･･ ビジネスロジックを扱うクラス（計算処理、データアクセスなど） ・View ･･･ ユーザの入力やビジネスロジックの結果を出力するクラス ・Controller･･･ ユーザの要求に対する処理を行うクラス http://ja.wikipedia.org/wiki/Model_View_Controller より引用

8. 準　備 Sencha Touchの開発を行う為には、以下の準備が必要。 ・Sencha Touch 2.1 SDK Sencha Touchアプリケーションの開発キット。 　ソースコード、画像ファイル、CSS、ドキュメントなどが含まれる。 ・Sencha Cmd 3.0 　開発補助を行うコマンドラインツール。 　プロジェクトの雛形作成、ソースコードの生成・圧縮、アプリケーションのビルドを行う。 Java実行環境（jre6以降）が必要。 ・Webサーバ Sencha Touchが提供するのはブラウザ上で動くフレームワークである為、 ApacheやNginxなどのWebサー 　バが必要となる。

9. 開発の流れ 以下の流れで、開発を進めていく。 ① プロジェクトの雛形を作成【初回のみ】 　・必要なディレクトリ（CSS、イメージファイル、アプリケーション）の作成 　・アプリケーションの起動ポイントとなるindex.htmlの生成 　・ビルド用設定ファイルなどの生成 ② Model/View/Controllerを作成【随時】 　・必要に応じて、Model、View、Controllerを作成 　・作成⇒実行⇒デバッグを繰り返し ③リリース用パッケージを作成【リリース時のみ】 　・Sencha Cmdでリリース用パッケージを生成

10. 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 + '才です。'); } });

11. 実行すると greet関数を実行するには以下のようにする。 実行すると以下のアラートが表示されます。 var hoge = Ext.create('sample.Hoge', { name: '笹○', age: 26 } ); hoge.greet('こんにちは'); こんにちは、私の名前は笹○、26才です。

12. Senchaでできること Senchaでは、以下の事ができる。 • シングルトン指定 • クラスの継承 • メソッドのオーバーライド • 型概念の導入 • バリデーション • Mixin（ミックスイン） • アソシエーション（モデル間の関連、hasOne/hasMany）

13. Mixin① 全部を紹介するのは大変なので、便利な機能を紹介。 ■Mixin（ミックスイン） 　オブジェクト指向言語において、サブクラスによって継承されることにより機能を提供する。 　多重継承の欠点を最小にして利点を生かすテクニック。 ・クラスの継承と何が違う？ 　クラスの継承　⇒単一継承の制約（多重継承ができない） Mixin　　　　　　⇒継承関係とは関係なく共通の特性、振る舞いの再利用が可能

14. 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().'); }, });

15. 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(); // このようにしても呼べる } });

16. メモアプリを作成① ここからSenchaのMVCパターンを使用して簡単なアプリを作成してみます。 【機能】 ・簡易機能のメモ帳を作成する ・メモの保存機能を持つ ・保存したメモを削除する 【画面】 ※右のイメージ図を参照 【詳細】 ・初期起動時に保存したものを表示する ・saveボタン　･･･LocalStorageにデータを保存 ・deleteボタン･･･保存したデータを削除

17. メモアプリを作成② （１）プロジェクトの作成 　　コマンドプロンプトで、以下の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）を指定する。 他はビルド時の設定ファイルなど。必要に応じて変更。

18. メモアプリを作成③ （２）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' } } });

19. メモアプリを作成④ proxyオプションのtypeを切り替える事でデータの転送先を切り替える事ができる。 なお、localstrageでは、データ識別用にidが必要。 typeには、以下を指定できる。 proxy: { type: 'localstorage', id : 'store-memo' }

20. Webストレージとは？ データをクライアント側に保存する仕組みでHTML5からサポートされた仕様。 Cookieとの違いは以下の通り。 ※オリジン・・・「プロトコル（http）」＋「ドメイン」＋「ポート番号」 ex) http://hogehoge:8080/

21. メモアプリを作成⑤ （３）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' },

22. メモアプリを作成⑥ // 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. });

23. メモアプリを作成⑦ （４）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ボタン押下時のイベント登録 } } },

24. メモアプリを作成⑧ // 初期表示(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('メッセージ', 'データを保存しました。'); }); },

25. メモアプリを作成⑨ // deleteボタン押下処理(Modelのデータを消去) onDeleteButtonTap : function() { var form = this.getForm(); var record = form.getRecord(); if (record) { record.erase(function() { }); } form.down('textareafield').setValue(''); Ext.Msg.alert('メッセージ', 'データを消去しました。。'); } });

26. メモアプリを作成⑩ （５）初回起動する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')); } });

27. メモアプリを作成⑪ （６）アプリのビルド 　　アプリケーションのビルドでは、以下の事ができる。 ・Webアプリケーションとして、配布用のパッケージの作成 - ファイルの圧縮 - Sass/Compassファイルのコンパイル ・iOS、Android用のネイティブアプリケーションの作成 　　　ネイティブAPIでは、以下の機能が利用できる。　 - ネットワークの接続状況を取得 - 通知機能の利用 - 傾きや画面の向きを見地 - カメラや写真へアクセス

28. メモアプリを作成⑫ 　　以下のSencha Cmdコマンドで配布用アプリケーションの作成し、生成したファイルを公開用フォルダへコピーする。 　　ビルドを行わなくてもWebアプリケーションの動作確認は行えるが、圧縮無し、不要なファイルもダウンロードされてしまう為、非常に重たい。 productionモードでビルドすると、10数MB⇒1MB以下になる。 >> sencha app build production

29. メモアプリを作成⑫ （７）画面で確認 　　それでは、以下のURLで確認してみましょう！ http://www.forefrontier.co.jp/sample/

30. HTMLソースを確認 起動後のHTMLソースを確認してみる。

31. LocalStorageを確認 データを保存後のLocalStorageを情報を確認してみる。 保存後

32. デザイン概論 Sencha TouchのデザインはHTML+JavaScript+CSSで作られている為、通常のWeb ページと同様にCSSでカスタマイズできる。 CSSの変更には、Sass/Compass環境と、Sassの文法理解が必要となる。 ■Sassとは CSSを拡張したCSSメタ言語で、CSSだけでは表現できなかった、変数やMixin、関数 などを利用し、再利用性が高められた言語。CSSはコンパイルして作成する。 コンパイルには、Rubyの実行環境が必要となる。 ■Compassとは Sassの機能を拡張するフレームワーク。

33. 最後に Sencha Touchは、 HTMLを全く記述せずコンポーネントを組み合わせて画面を構築していくとい う点においては、 jQueryやjQuery Mobileと違ったアプローチで面白さがあると思います。 ただし、デザインとロジックが分離がされているとはいえ、レイアウトが複雑化していくと、オブ ジェクトリテラルのネストが深くなる（コードの見通しが悪くなり、デバッグしずらくなる）、従来の HTMLに慣れ親しんでいるウェブデザイナでも扱えるのか？などデメリットもある。 　また、リリースの頻度の多さ、日本語ドキュメントや書籍が少なく、多言語化（ローカライズ）が 貧弱な為、まだまだ発展途上なフレームワークで、プロジェクトへの適用には十分な検討が必要 となり、まだまだ敷居が高いと感じました。 ただし、今後、開発環境、ドキュメント類が整ってくれば、オブジェクト指向言語としてのメリットが 享受できるようになる為、従来のHTML+CSS+JavaScript（jQuery）構成の牙城を切り崩せる可能 性が十分ありえるフレームワークだと思います。 以上で、Sencha Touchの説明は終了となります。