ワークスペースを利用してExtJSでマルチページを作る | Sencha Advent Calendar 2013 – 10日目

この記事は、Sencha Advent Calendar 2013の10日目の記事です。

前の記事でちらっと「ワークスペース」について書いたのですが、この機能がマルチページを作る場合にすごく便利だったので紹介します。

ExtJSで作るアプリケーションは、単一ページでのアプリケーション構築が多いのですが、システムの利用対象者が複数存在する場合など、複数ページで構成されるアプリケーションを作る場合もあります。

例えば以下のようなURLで構成されるシステムの場合です。

  • サービス利用者:http://hoge.com
  • サービス運営者:http://hoge.com/admin

サービス利用者側とサービス運営者側の両方をExtJSで作る場合は、複数のExtJSアプリケーションが混在することになるのですが、こういう場合にワークスペースが便利です。

ワークスペースを作る

前の記事と同じですが、Sencha Cmdでワークスペースを作ります。

実行すると.senchaディレクトリが作成されます。.sencha/workspace/sencha.cfgというファイルも同時にできますが、これがワークスペースの設定を記述するファイルです。
ExtJS/Sencha TouchのSDKの場所やテーマ、パッケージのディレクトリを指定します。このあたりはデフォルトのままでいいので触ることはありません。

複数のアプリケーション間で共通のクラスを使いたい場合は、workspace.classpathを指定する必要があります。(後述します)

ExtJSアプリケーションを作る

sencha generate app でExtJSアプリケーションを作ります。

例として、サービス利用者側(front)とサービス運営者側(admin)のアプリケーションを作ります。

-sでExtJSのSDKを指定します。コマンドを実行すると、アプリケーションの直下ではなくワークスペース直下にExtJSのSDKが作成されます。

通常ExtJSのアプリケーションを作る場合はアプリケーション直下にSDKが配置されますが、ワークスペースを利用するとSDKはワークスペース直下に配置されるので、複数アプリケーションをシステムで作る場合にSDKが一つで済む利点があります。

また.sencha/workspace/sencha.cfgに自動でExtJSのSDKのパスが設定されます。

サービス運営者側(admin)のExtJSアプリケーションも作ります。

先ほどは-sでSDKのパスを指定しましたが、既にワークスペース直下にSDKが配置されているので上記のような指定になります。

共通クラスを定義する

複数のExtJSアプリケーションで共通のクラスを利用したい場合は、.sencha/workspace/sencha.cfgにクラスパスを設定します。

common/src配下にHogeクラスを配置するのを例としてやってみます。

まずは、sencha.cfgにクラスパスを設定します。

${workspace.dir}はワークスペースのディレクトリパスです。

次に、Hoge.jsをcommon/src/util配下に配置します。

アラートを表示するメソッドがあるだけのシングルトンクラスです。

HogeクラスのshowAlertメソッドをapp.jsのlaunchメソッドで使うようにしてみます。

Ext.Loader.setConfigでネームスペースを設定すれば、それぞれのアプリケーションで使うことができるようになります。.sencha/workspace/sencha.cfgで設定したクラスパスは、あくまでsencha app buildで使う設定なので、実際に利用するにはネームスペースの設定が必要ですので注意してください。

ビルドする

ビルドは、それぞれのExtJSアプリケーションに移動して、sencha app buildを実行するだけです。

build/production/Frontディレクトリにビルドしたファイルが生成されます。

これをブラウザで見るとalertが表示されるので、commonのソースも含んだ形でビルドされていることが分かります。

まとめ

今回はExtJSを例として挙げましたが、Sencha Touchも同様のことができますし、ExtJSとSencha Touchを混合させることもできます。

前回紹介したテーマパッケージの作成のように、共通のテーマもテーマパッケージで共通化できますので、同じシステム内で複数のExtJS/Sencha Touchアプリケーションを作るときには利点の多い機能です。
いろいろとメリットは多いと思いますので、是非ワークスペースを活用してみてください。