LoginSignup
1

More than 5 years have passed since last update.

オープンツール (Open Tooling) を使用して Ext JS アプリケーションを生成する

Posted at

ext-js-6-6-application-generated-by-open-tooling.png

オープンツール (Open Tooling) で Ext JS アプリケーションを生成して実行する手順をメモっとく。Ext JS 6.6 がリリースされ、これまでの Sencha Cmd だけでなく npm をベースとしたオープンツールによってアプリケーションを生成したりビルドしたりできるようになったのだ。

前提条件

Java 8 と Node が必要なのでインストールしておこう。Java は 8 とバージョン指定がある。Node は最新で大丈夫なので、下記のように Homebrew でインストールしておく。

$ brew install node

Sencha のレジストリにログインする

Ext JS 本体や ExtGen などのオープンツールは Sencha のレジストリから提供されるので、Sencha のレジストリにログインしておく必要がある。

商用ライセンスを持っていれば、サポートポータルにログインするときのアカウントでログインできる。ただし、Username に入力するメールアドレスの @.. に置換して入力する必要がある。

商用ライセンスを持っていなければ、Try Sencha Ext JS 6.6 with Open Tooling から試用を申し込んで利用する。

$ npm login --registry=http://npm.sencha.com --scope=@sencha
Username: takuya.tsuchida..example.com
Password: 
Email: (this IS public) takuya.tsuchida@example.com
Logged in as takuya.tsuchida..example.com to scope @sencha on http://npm.sencha.com/.

ExtGen をインストールする

Ext JS アプリケーションを生成する ExtGen パッケージを npm でインストールする。

$ npm install -g @sencha/ext-gen

Ext JS アプリケーションを生成する

Ext JS 6.6 のアプリケーションを ExtGen を使用して生成する。今回はデフォルト設定でアプリケーションを生成する。様々な設定が可能なようなので、詳細な使い方は ext-gen --help を実行して確認してほしい。

$ ext-gen app -a

Ext JS アプリケーションを実行する

my-app ディレクトリに MyApp プロジェクトが生成されるので、そのアプリケーションを実行してみよう。下記のコマンドを実行すると自動的にデフォルトブラウザーが立ち上がってサンプルアプリケーションが表示されるはずだ。

$ cd my-app
$ npm start

今回は Ext JS 6.6 で追加されたオープンツールを使用して Ext JS アプリケーションを生成して実行する手順について説明した。Sencha Cmd からオープンツールへの移行は様子を見ながらになると思うが、JavaScript 界隈でデファクトスタンダードになっているツールなのでいずれは全面移行する気がする。個人的には Sencha Architect で生成されるプロジェクトのビルドツールがオープンツールになったら移行しようかなと思っている。

参考文献

https://www.sencha.com/blog/announcing-sencha-ext-js-6-6-with-open-tooling-ga-ja/
http://docs.sencha.com/extjs/6.6.0/guides/getting_started/open_tooling.html

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1