Sencha フレームワークの統合開発ツール
Sencha Cmd
自己紹介
• 中村久司
• Sencha UG Co-Organizer
• 株式会社ゼノフィ関西事業所 事業所長
• Sencha オフィシャルトレーナー
• 著書
• Sencha Touch 2 実践開発ガイド
• Sencha とは?
• Sencha Cmd の概要
• 動的ローディングシステムと Sencha Cmd
• 高度な利用法
• Sencha とは?
• Sencha Cmd の概要
• 動的ローディングシステムと Sencha Cmd
• 高度な利用法
• カリフォルニア州レッドウッドシティにある企業
• HTML5について先駆者として取り組み
• フレームワーク/ツール/サービスを提供
Sencha 社
Sencha 製品
Sencha Ext JS
Sencha Touch
Sencha GXT
Sencha Architect
Sencha Cmd
Sencha Animator
Support
Training
Sencha Space
...
Sencha 製品
Sencha Ext JS
Sencha Touch
Sencha GXT
Sencha Architect
Sencha Cmd
Sencha Animator
Support
Training
Sencha Space
...
• Sencha とは?
• Sencha Cmd の概要
• 動的ローディングシステムと Sencha Cmd
• 高度な利用法
Sencha Cmd
• Sencha が提供するCUI統合開発ツール
• Ext JS 4.x / Sencha Touch 2.x が対象
• Sencha Framework のクラスシステムと深い関係
役割
• コード生成
• JSコンパイラ
• Web サーバー
• ネイティブパッケージ
• パッケージ管理
役割
• コード生成
• JSコンパイラ
• Web サーバー
• ネイティブパッケージ
• パッケージ管理
generate コマンド	

ワークスペース	

アプリのスケルトン	

MVCのパーツの雛形
役割
• コード生成
• JSコンパイラ
• Web サーバー
• ネイティブパッケージ
• パッケージ管理
app build / compile コマンド	

フレームワークを理解するコン
パイラ	

正しい順序で必要なクラスだけ
をマージ...
役割
• コード生成
• JSコンパイラ
• Web サーバー
• ネイティブパッケージ
• パッケージ管理
web コマンド	

ローカルにApacheがインストー
ルされていなくても、テスト可
能。
役割
• コード生成
• JSコンパイラ
• Web サーバー
• ネイティブパッケージ
• パッケージ管理
app build native コマンド	

ネイティブ環境へのパッケージ
ング cordova/phonegap との統
合も可能
役割
• コード生成
• JSコンパイラ
• Web サーバー
• ネイティブパッケージ
• パッケージ管理
build package / package generate コマ
ンド	

アプリ間で使う共通パッケー
ジを作成
ワークスペースの作成
• 複数のプロジェクトを開発する時のワークスペース
• プロジェクトに共通の部分ワークスペースに配置
• SDKもワークスペース上に
sencha generate workspace /path/to/workspace
MVCスケルトンの作成
• Sencha フレームワークの流儀でアプリの原型を作る
• このコマンドで作られたプロジェクトで開発するのが基本
• ビルドの際に必要な情報も生成される
sencha generate app AppName /pa...
部品スケルトンの作成
• できあがっているプロジェクトにMVCの部品を追加
sencha generate controller
sencha generate model
sencha generate form
sencha generat...
テーマの生成
• テーマの生成
sencha generate theme
アップグレード
• Sencha Cmd 自身をアップグレードする
!
• アプリのSDKをアップグレードする
sencha upgrade
sencha app upgrade /path/to/sdk
Webサーバー
• 簡易 Web サーバーを起動
• ローカルに Apache 環境がインストールされていなくても、
動作の確認が可能
sencha web -port 8080 start
ビルド
• option のところは、
• production / testing / native / package
• production = マージ & ミニファイ
• testing = マージのみ
sencha app buil...
• Sencha とは?
• Sencha Cmd の概要
• 動的ローディングシステムと Sencha Cmd
• 高度な利用法
クラスシステム
• JavaScript の中で独自のクラスシステムを実装
• クラスベースでのプログラミングが可能
• 1クラス = 1ファイル
• 必要なファイルを動的にローディング
アプリケーションの構造
• 1クラス = 1ファイル
• 名前空間 = ファイル構造
• MyApp.view.Main クラス = /app/view/Main.js
継承
Ext.define(‘MyApp.view.Main’, {
extend: ‘Ext.tab.Panel’,
:
:
});
継承
Ext.define(‘MyApp.view.Main’, {
extend: ‘Ext.tab.Panel’,
:
:
});
クラス名
継承
Ext.define(‘MyApp.view.Main’, {
extend: ‘Ext.tab.Panel’,
:
:
});
クラス名
継承する親クラス
require
Ext.define(‘MyApp.view.Main’, {
extend: ‘Ext.tab.Panel’,
requires: [
‘Ext.form.Panel’,
‘Ext.grid.Panel’
],
:
});
使...
動的ローディング
• extend / requires などからクラスの依存関係を理解
• 必要になったときに動的にクラスをロード
• 開発時には1クラス=1ファイルなのでデバッグしやすい
ビルド
• 動的ローディングが必要なクラスをロードするように、クラ
スの依存関係を解析
• 開発者が書いたクラス/SDKのクラスの中から、実際に使わ
れているものだけを抽出
• 適切な順番でマージ(ミニファイ)する
ビルド
sencha app build
watch
• ファイルの変更を監視して変更がある毎に自動でビルド
watch
• ファイルの変更を監視して変更がある毎に自動でビルド
sencha app watch
ネイティブ化
• Sencha Cmd 単体で Sencha Touch アプリをネイティブ
化できる
• packager.json を変更するだけで、iOS / Android にパッ
ケージできる
• Cordova / PhoneGap...
ネイティブ化
• Cordova & PhoneGap with Sencha Cmd 4 日本語字幕
付き
• https://vimeo.com/85689341
• Sencha TouchでPhoneGapを活用する
• http://...
• Sencha とは?
• Sencha Cmd の概要
• 動的ローディングシステムと Sencha Cmd
• 高度な利用法
ビルドプロセス
• init
• refresh
• resolve
• js
• resources
• sass
• slice
• page
• native-package
プロセスのカスタマイズ
• ビルドプロセスをカスタマイズできる
• ビルドプロパティの設定
• コンフィグプロパティ
• プロセスの追加
ビルドプロパティ
• local.properties
• コンフィグプロパティ - 後述
• ${app.dir}/.sencha/app/${build.environment}.properties
• ${app.dir}/.sench...
例) ビルドプロセスの抑制
• 例)ビルドプロセスごとの抑止
• build.properties に記述
• skip.{機能名}=1
• 例) slice をしないようにするには skip.slice=1
コンフィグプロパティ
• {$app.dir}sencha/app/sencha.cfg
• {$app.dir}app.json
• ${workspace.dir}/workspace.json
• ${workspace.dir}/.se...
例) index.phpに変更
• 標準では index.html だけど index.phpから始めたい
app.page.name=index.php
"page": {
"name": "index.php"
}
sencha.cfg
a...
プロセスの追加
• ${app.dir}/build.xml に記述
• 標準の build.xml は .sencha/build-impl.xml をインクルードしてい
るだけ。
• そこに追加したい処理を書いてゆく
プロセスの追加
!
• build-impl.xml では各プロセスの前後に処理を挟み込
むためのtarget が設定されている
• -before-foo -after-bar のターゲットがある
• -after-page だと page ...
例)ビルドにファイルコピー
• PHPのファイルをビルドに含めたい
• Sencha 以外のリソース類をビルドに含めたい
<target name="-after-page">
<copy file="${app.dir}/logout.php...
And More...
• 他にもコマンドラインオプションは沢山
• 設定できる内容も多岐にわたる
• 詳しいドキュメントは
• http://docs.sencha.com/cmd/
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Sencha フレームワークの統合開発ツール Sencha Cmd

2,174 views

Published on

Sencha UG勉強会 第19回@大阪 で発表した資料です。

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,174
On SlideShare
0
From Embeds
0
Number of Embeds
86
Actions
Shares
0
Downloads
12
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Sencha フレームワークの統合開発ツール Sencha Cmd

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

×