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

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

2. 自己紹介
• 中村久司
• Sencha UG Co-Organizer
• 株式会社ゼノフィ関西事業所 事業所長
• Sencha オフィシャルトレーナー
• 著書
• Sencha Touch 2 実践開発ガイド

3. • Sencha とは？
• Sencha Cmd の概要
• 動的ローディングシステムと Sencha Cmd
• 高度な利用法

4. • Sencha とは？
• Sencha Cmd の概要
• 動的ローディングシステムと Sencha Cmd
• 高度な利用法

5. • カリフォルニア州レッドウッドシティにある企業
• HTML5について先駆者として取り組み
• フレームワーク／ツール／サービスを提供
Sencha 社

6. Sencha 製品
Sencha Ext JS
Sencha Touch
Sencha GXT
Sencha Architect
Sencha Cmd
Sencha Animator
Support
Training
Sencha Space
フレームワーク層 ツール層 サービス層

7. Sencha 製品
Sencha Ext JS
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 generate controller
sencha generate model
sencha generate form
sencha generate view

19. テーマの生成
• テーマの生成
sencha generate theme

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. 継承
Ext.define(‘MyApp.view.Main’, {
extend: ‘Ext.tab.Panel’,
:
:
});

27. 継承
Ext.define(‘MyApp.view.Main’, {
extend: ‘Ext.tab.Panel’,
:
:
});
クラス名

28. 継承
Ext.define(‘MyApp.view.Main’, {
extend: ‘Ext.tab.Panel’,
:
:
});
クラス名
継承する親クラス

29. require
Ext.define(‘MyApp.view.Main’, {
extend: ‘Ext.tab.Panel’,
requires: [
‘Ext.form.Panel’,
‘Ext.grid.Panel’
],
:
});
使用しているクラスを定義

30. 動的ローディング
• extend / requires などからクラスの依存関係を理解
• 必要になったときに動的にクラスをロード
• 開発時には1クラス=1ファイルなのでデバッグしやすい

31. ビルド
• 動的ローディングが必要なクラスをロードするように、クラ
スの依存関係を解析
• 開発者が書いたクラス／SDKのクラスの中から、実際に使わ
れているものだけを抽出
• 適切な順番でマージ（ミニファイ）する

32. ビルド
sencha app build

33. watch
• ファイルの変更を監視して変更がある毎に自動でビルド

34. watch
• ファイルの変更を監視して変更がある毎に自動でビルド
sencha app watch

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. ご清聴ありがとうございました