Download as PDF, PPTX
![ビルド
• option のところは、
• production / testing / native / package
• production = マージ & ミニファイ
• testing = マージのみ
sencha app build [option]](https://image.slidesharecdn.com/senchacmd-140418225535-phpapp02/85/Sencha-Sencha-Cmd-22-320.jpg)
![require
Ext.define(‘MyApp.view.Main’, {
extend: ‘Ext.tab.Panel’,
requires: [
‘Ext.form.Panel’,
‘Ext.grid.Panel’
],
:
});
使用しているクラスを定義](https://image.slidesharecdn.com/senchacmd-140418225535-phpapp02/85/Sencha-Sencha-Cmd-29-320.jpg)
Sencha フレームワークの統合開発ツール Sencha Cmd
- 1.
- 2. 自己紹介 • 中村久司 • SenchaUG Co-Organizer • 株式会社ゼノフィ関西事業所 事業所長 • Sencha オフィシャルトレーナー • 著書 • Sencha Touch 2 実践開発ガイド
- 3. • Sencha とは？ •Sencha Cmd の概要 • 動的ローディングシステムと Sencha Cmd • 高度な利用法
- 4. • Sencha とは？ •Sencha Cmd の概要 • 動的ローディングシステムと Sencha Cmd • 高度な利用法
- 5. • カリフォルニア州レッドウッドシティにある企業 • HTML5について先駆者として取り組み •フレームワーク／ツール／サービスを提供 Sencha 社
- 6. Sencha 製品 Sencha ExtJS Sencha Touch Sencha GXT Sencha Architect Sencha Cmd Sencha Animator Support Training Sencha Space フレームワーク層 ツール層 サービス層
- 7. Sencha 製品 Sencha ExtJS Sencha Touch Sencha GXT Sencha Architect Sencha Cmd Sencha Animator Support Training Sencha Space フレームワーク層 ツール層 サービス層
- 8. • Sencha とは？ •Sencha Cmd の概要 • 動的ローディングシステムと Sencha Cmd • 高度な利用法
- 9. Sencha Cmd • Senchaが提供するCUI統合開発ツール • Ext JS 4.x / Sencha Touch 2.x が対象 • Sencha Framework のクラスシステムと深い関係
- 10. 役割 • コード生成 • JSコンパイラ •Web サーバー • ネイティブパッケージ • パッケージ管理
- 11. 役割 • コード生成 • JSコンパイラ •Web サーバー • ネイティブパッケージ • パッケージ管理 generate コマンド ワークスペース アプリのスケルトン MVCのパーツの雛形
- 12. 役割 • コード生成 • JSコンパイラ •Web サーバー • ネイティブパッケージ • パッケージ管理 app build / compile コマンド フレームワークを理解するコン パイラ 正しい順序で必要なクラスだけ をマージ&ミニファイ
- 13. 役割 • コード生成 • JSコンパイラ •Web サーバー • ネイティブパッケージ • パッケージ管理 web コマンド ローカルにApacheがインストー ルされていなくても、テスト可 能。
- 14. 役割 • コード生成 • JSコンパイラ •Web サーバー • ネイティブパッケージ • パッケージ管理 app build native コマンド ネイティブ環境へのパッケージ ング cordova/phonegap との統 合も可能
- 15. 役割 • コード生成 • JSコンパイラ •Web サーバー • ネイティブパッケージ • パッケージ管理 build package / package generate コマ ンド アプリ間で使う共通パッケー ジを作成
- 16. ワークスペースの作成 • 複数のプロジェクトを開発する時のワークスペース • プロジェクトに共通の部分ワークスペースに配置 •SDKもワークスペース上に sencha generate workspace /path/to/workspace
- 17. MVCスケルトンの作成 • Sencha フレームワークの流儀でアプリの原型を作る •このコマンドで作られたプロジェクトで開発するのが基本 • ビルドの際に必要な情報も生成される sencha generate app AppName /path/to/workspace
- 18. 部品スケルトンの作成 • できあがっているプロジェクトにMVCの部品を追加 sencha generatecontroller sencha generate model sencha generate form sencha generate view
- 19.
- 20. アップグレード • Sencha Cmd自身をアップグレードする ! • アプリのSDKをアップグレードする sencha upgrade sencha app upgrade /path/to/sdk
- 21. Webサーバー • 簡易 Webサーバーを起動 • ローカルに Apache 環境がインストールされていなくても、 動作の確認が可能 sencha web -port 8080 start
- 22. ビルド • option のところは、 •production / testing / native / package • production = マージ & ミニファイ • testing = マージのみ sencha app build [option]
- 23. • Sencha とは？ •Sencha Cmd の概要 • 動的ローディングシステムと Sencha Cmd • 高度な利用法
- 24. クラスシステム • JavaScript の中で独自のクラスシステムを実装 •クラスベースでのプログラミングが可能 • 1クラス = 1ファイル • 必要なファイルを動的にローディング
- 25. アプリケーションの構造 • 1クラス =1ファイル • 名前空間 = ファイル構造 • MyApp.view.Main クラス = /app/view/Main.js
- 26.
- 27.
- 28.
- 29. require Ext.define(‘MyApp.view.Main’, { extend: ‘Ext.tab.Panel’, requires:[ ‘Ext.form.Panel’, ‘Ext.grid.Panel’ ], : }); 使用しているクラスを定義
- 30. 動的ローディング • extend /requires などからクラスの依存関係を理解 • 必要になったときに動的にクラスをロード • 開発時には1クラス=1ファイルなのでデバッグしやすい
- 31.
- 32.
- 33.
- 34.
- 35. ネイティブ化 • Sencha Cmd単体で Sencha Touch アプリをネイティブ 化できる • packager.json を変更するだけで、iOS / Android にパッ ケージできる • Cordova / PhoneGap とのインテグレーションも可能
- 36. ネイティブ化 • Cordova &PhoneGap with Sencha Cmd 4 日本語字幕 付き • https://vimeo.com/85689341 • Sencha TouchでPhoneGapを活用する • http://www.xenophy.com/sencha-blog/9717
- 37. • Sencha とは？ •Sencha Cmd の概要 • 動的ローディングシステムと Sencha Cmd • 高度な利用法
- 38. ビルドプロセス • init • refresh •resolve • js • resources • sass • slice • page • native-package
- 39. プロセスのカスタマイズ • ビルドプロセスをカスタマイズできる • ビルドプロパティの設定 •コンフィグプロパティ • プロセスの追加
- 40. ビルドプロパティ • local.properties • コンフィグプロパティ- 後述 • ${app.dir}/.sencha/app/${build.environment}.properties • ${app.dir}/.sencha/app/build.properties • ${app.dir}/.sencha/app/defauls.properties
- 41. 例) ビルドプロセスの抑制 • 例）ビルドプロセスごとの抑止 •build.properties に記述 • skip.{機能名}=1 • 例) slice をしないようにするには skip.slice=1
- 42. コンフィグプロパティ • {$app.dir}sencha/app/sencha.cfg • {$app.dir}app.json •${workspace.dir}/workspace.json • ${workspace.dir}/.sencha/workspace/sencha.cfg
- 43. 例) index.phpに変更 • 標準ではindex.html だけど index.phpから始めたい app.page.name=index.php "page": { "name": "index.php" } sencha.cfg app.jsonまたは
- 44. プロセスの追加 • ${app.dir}/build.xml に記述 •標準の build.xml は .sencha/build-impl.xml をインクルードしてい るだけ。 • そこに追加したい処理を書いてゆく
- 45. プロセスの追加 ! • build-impl.xml では各プロセスの前後に処理を挟み込 むためのtargetが設定されている • -before-foo -after-bar のターゲットがある • -after-page だと page の処理が終わった後に実行さ れる • init • refresh • resolve • js • resources • sass • slice • page • native-package
- 46. 例)ビルドにファイルコピー • PHPのファイルをビルドに含めたい • Sencha以外のリソース類をビルドに含めたい <target name="-after-page"> <copy file="${app.dir}/logout.php" tofile="${build.dir}/logout.php"/> <copy todir="${build.dir}/php"> <fileset dir="${app.dir}/php" /> </copy> <copy todir="${build.dir}/resources"> <fileset dir="${app.dir}/resources" /> </copy> </target>
- 47. And More... • 他にもコマンドラインオプションは沢山 •設定できる内容も多岐にわたる • 詳しいドキュメントは • http://docs.sencha.com/cmd/
- 48.