sencha フレームワークの統合開発ツール sencha cmd
Post on 18-Dec-2014
917 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 /path/to/workspace
部品スケルトンの作成
• できあがっているプロジェクトにMVCの部品を追加
sencha generate controller
sencha generate model
sencha generate form
sencha generate view
テーマの生成
• テーマの生成
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 build [option]
• 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’, : : });
クラス名
継承する親クラス
requireExt.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://www.xenophy.com/sencha-blog/9717
• 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}/.sencha/app/build.properties • ${app.dir}/.sencha/app/defauls.properties
例) ビルドプロセスの抑制
• 例）ビルドプロセスごとの抑止
• build.properties に記述
• skip.{機能名}=1
• 例) slice をしないようにするには skip.slice=1
コンフィグプロパティ
• {$app.dir}sencha/app/sencha.cfg
• {$app.dir}app.json
• ${workspace.dir}/workspace.json
• ${workspace.dir}/.sencha/workspace/sencha.cfg
例) index.phpに変更• 標準では index.html だけど index.phpから始めたい
app.page.name=index.php
"page": { "name": "index.php" }
sencha.cfg
app.jsonまたは
プロセスの追加
• ${app.dir}/build.xml に記述 • 標準の build.xml は .sencha/build-impl.xml をインクルードしているだけ。
• そこに追加したい処理を書いてゆく
プロセスの追加!
• build-impl.xml では各プロセスの前後に処理を挟み込むためのtarget が設定されている
• -before-foo -after-bar のターゲットがある • -after-page だと page の処理が終わった後に実行される
• init • refresh • resolve • js • resources • sass • slice • page • native-package
例)ビルドにファイルコピー• 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>
And More...
• 他にもコマンドラインオプションは沢山
• 設定できる内容も多岐にわたる
• 詳しいドキュメントは
• http://docs.sencha.com/cmd/
ご清聴ありがとうございました
top related