Sencha Cmd がやってきた

Sencha Cmd V3 のbetaが本日リリースされました。

以前からあった、Sencha SDK Toolkit (又の名をSencha Command) がリニューアルしたものです。これは、内部的にはかなりのリニューアルがあったようで、その動作環境がJavaになったのだそうです。

まず、Sencha Touch のプロダクトしかサポートしていなかった、アプリケーションのジェネレートが、 Ext JS でもできるようになりました。また、デプロイ関連では、前のバージョンでは、Phantom JSを使って使われているクラスを判断していたのを、ソースコードの中を見て判断するようになったようです。 (Sencha Cmdのプロダクトの中を見てみると、まだPhantom.jsが入っているんで、使ってはいるみたいですねぇ)

これまで、結構必要ファイルに漏れがあったので、こんどのものには期待したいところです。漏れがあったのは、僕自身のrequiresなどの設定が悪かったせいかもしれませんが、いろいろ試したけどだめだったんすよねぇ〜

とまれ、Sencha 社内でも大評判だというこのツールに期待大です。

なお、最新の機能は Ext JS に対応していますが、 Sencha Touch には未対応なようです。後のバージョンではサポートするよというようなことが書いてありました。

そうそう、この情報の元ネタのブログはこちら、そして、速攻翻訳がこちらになります。ダウンロード先も書いてあります。

今回はドキュメントも充実しています。 Ext JS 4.1 のAPIドキュメントのガイドに沢山の記事があります。

http://docs.sencha.com/ext-js/4-1/#!/guide/command

英文なので、僕も全部は読めていませんが、これを一通り読めば良い感じに使えるようになるんじゃないでしょうか。

必要条件

Java Run-time
Compass
Sencha Cmd
Ext JS は 4.1.1a または 4.1.2a が必要。無印の4.1.1や4.1.2はだめ。

僕は、当日早速落としたSencha Cmdで試していて、全然うまく動かずに泣いていたのですが、その日のうちに、バグフィックスのアップデートがされていて、それを適用したら直りました。

また、Sencha SDK Toolkit をインストール済みの場合は、コマンド名が同じSenchaのため、.profile などを編集して、 SDK Toolkit が設定したPATHをコメントアウトするなどの対策が必要です。

つかってみるべ

インストール後に、

$ sencha

で、

Sencha Cmd v3.0.0.141

OPTIONS
  * --debug, -d - Sets log level to higher verbosity
  * --plain, -p - enables plain logging output (no highlighting)
  * --quiet, -q - Sets log level to warnings and errors only
  * --sdk-path, -s - sets the path to the target framework

CATEGORIES
  * compile - Compile sources to produce concatenated output and metadata
  * generate - Generate code like models and controllers or raw templates
  * theme - Builds a set of theme images from a given html page
  * app - Perform various application build processes
  * fs - A set of useful utility actions to work with files.
  * package - Packages a Sencha Touch application for native app stores
  * manifest - Extract class metadata

COMMANDS
  * ant - Invoke Ant with helpful properties back to Sencha Command
  * build - Builds a project from a JSB3 file.
  * config - Loads a config file or sets a configuration property
  * help - Get help on using Sencha Command

こんな感じで表示されたらOKです。

で、最初にプロダクトを作ってみます。

$ sencha -sdk ~/Downloads/ExtJS/ext-4.1.1a generate app MyApp ~/devsites/cmd_test/public_html

と実行してみました。

-sdk の後はExt JSのディレクトリ。sdkのディレクトリをカレントディレクトリとして実行したら省略可能。
generate で、アプリケーションのスカッフォルドを生成。
app の次にアプリケーションのネームスペースと、生成するディレクトリを指定。

コンソールに [INFO] …. と表示され、完了したら、そのディレクトリにアプリケーションの枠組みができあがりました。

  ▾ public_html/
    ▾ app/
      ▾ controller/
          Main.js
      ▾ view/
          Main.js
          Viewport.js
        app.js
    ▸ ext/
    ▸ resources/
      app.json
      bootstrap.js
      index.html

index.html の中身は次のとおり

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>MyApp</title>
    <link rel="stylesheet" href="resources/css/default/app.css">
    <!-- <x-compile> -->
        <!-- <x-bootstrap> -->
            <script src="ext/ext-debug.js"></script>
            <script src="bootstrap.js"></script>
        <!-- </x-bootstrap> -->
        <script src="app/app.js"></script>
    <!-- </x-compile> -->
</head>
<body></body>
</html>

bootstrap.js の中身は

Ext.Loader.addClassPathMappings({
  "Ext.draw.engine.ImageExporter": "ext/src/draw/engine/ImageExporter.js",
  "Ext.layout.component.Auto": "ext/src/layout/component/Auto.js",
  "Ext.grid.property.Store": "ext/src/grid/property/Store.js",
  "Ext.layout.container.Box": "ext/src/layout/container/Box.js",
  "Ext.direct.JsonProvider": "ext/src/direct/JsonProvider.js",
  :
  :

な感じです。

app.json はコメントが沢山入っていますが、はずすと次の内容です。

{
    "name": "MyApp",

    "js": [
        {
            "path": "ext/ext-all.js"
        },
        {
            "path": "app/app.js",
            "update": "delta"
        }
    ],

    "css": [
        {
            "path": "resources/css/default/app.css",
            "update": "delta"
        }
    ],

    "appCache": {
        "cache": [
            "index.html"
        ],
        "network": [
            "*"
        ],
        "fallback": []
    },

    "extras": [
        "resources/images",
        "resources/icons",
        "resources/loading"
    ],

    "archivePath": "archive",

    "buildPaths": {
        "testing": "build/testing",
        "production": "build/production",
        "package": "build/package",
        "native": "build/native"
    },

    "buildOptions": {
        "product": "touch",
        "minVersion": 3,
        "debug": false,
        "logger": "no"
    },

    "id": "8b895996-e12d-44d0-ad5d-579508c94e6d"
}

僕としては、最も気になるのは、デプロイの時にちゃんと使えるのかな？というところです。ブログの文章では、最終的にデプロイをSencha Cmdでやりたい場合は、開始からSencha Cmdでジェネレートした方がいいような感じもしましたが、既存のプロジェクトのデプロイも含めて、いろいろ実験したいと思います。

Sunvisor Lab. Ext JS 別館

Ext JS 関連の話題を取り上げます。

Sencha Cmd がやってきた

必要条件

つかってみるべ