1 / 33

Sencha Touch 2

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

devona
Download Presentation

Sencha Touch 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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の説明は終了となります。

More Related