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

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

Sencha Cmd

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

• 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 Cmd

• Sencha が提供するCUI統合開発ツール

• Ext JS 4.x / Sencha Touch 2.x が対象

• Sencha Framework のクラスシステムと深い関係

役割

• コード生成 • JSコンパイラ • Web サーバー • ネイティブパッケージ • パッケージ管理

役割


generate コマンドワークスペースアプリのスケルトン MVCのパーツの雛形

役割


app build / compile コマンドフレームワークを理解するコンパイラ正しい順序で必要なクラスだけをマージ&ミニファイ

役割


web コマンドローカルにApacheがインストールされていなくても、テスト可能。

役割


app build native コマンドネイティブ環境へのパッケージング cordova/phonegap との統合も可能

役割


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]





クラスシステム

• JavaScript の中で独自のクラスシステムを実装

• クラスベースでのプログラミングが可能

• 1クラス = 1ファイル

• 必要なファイルを動的にローディング

アプリケーションの構造

• 1クラス = 1ファイル

• 名前空間 = ファイル構造

• MyApp.view.Main クラス = /app/view/Main.js

継承

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

https://vimeo.com/85689341

http://www.xenophy.com/sencha-blog/9717





ビルドプロセス

• 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/

http://docs.sencha.com/cmd/

ご清聴ありがとうございました

Technology

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