Sencha Cmdのワークスペース

本ガイドでは、Sencha Cmd のワークスペース機能を紹介します。ワークスペースはフレームワーク、パッケージ、その他のコードを共有する複数のページをサポートするように設計されています。

前提条件

先に進む前に以下のガイドをご覧になることをお勧めします。

• Sencha Cmdについて
• Sencha Cmdの使用

ワークスペースの意味

大規模アプリケーションをビルドするプロセスは、単一ページのアプリケーションのビルドと同じプロセスでスタートします。アプリケーションを展開して複数のページが必要になると、共通の問題が発生します。

• Sencha フレームワークの共通コピーの使用（Ext JS または Sencha Touch）。
• ページ間で共通なコードの使用。
• 共有パッケージまたはサードパーティパッケージ。

これらをサポートするために、Sencha Cmd は「ワークスペース」の概念を定義します。ワークスペースは、1つまたは複数のページ、フレームワーク、パッケージ、その他の共有コードやファイルを含む単なるフォルダです。ワークスペースルートフォルダの場所を選択して、これらのニーズやソースコントロールの要件を改善する必要があります。深さに関係なく、ワークスペースフォルダのサブフォルダで作成された生成済みのアプリケーション／ページは、ワークスペースのメンバーと見なされます。

要件ではありませんが、この場合には通常、ワークスペースフォルダはソースコントロールレポジトリのルートフォルダです。

ワークスペース内のページの正確な構造と仕組みは、Sencha Cmd では重要ではありません。ただし、シンプルさを追求するために、このガイドの各例では、すべてのページがワークスペースの直接のサブフォルダとして作成されます。

*専門用語についての注意。*SenchaのフレームワークベースのアプリケーションはMVCアーキテクチャを採用し、コードツリーの上位でExt.applicationを呼び出します。これらのフレームワークが「アプリケーション」の用語を使用して各ページを説明するため、紛らわしくなることがあります。単一ページのアプリケーションでは、これらの用語は置き換えることができます。ただし、アプリケーションが複数のページを利用している場合、これには該当しません。このコンテキストにおいてはより適切であるため、ほとんどの場合、このガイドでは「ページ」の用語が使用されています。

ワークスペースの生成

ワークスペースを生成するには、次のコマンドを使用します。

sencha generate workspace /path/to/workspace

これは、指定されたフォルダに以下の構造体を作成します。

.sencha/                # Sencha-specific files (e.g. configuration)
    workspace/          # Workspace-specific content (see below)
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd

上記のディレクトリの構造体は単一ページのアプリケーション向けに作成された構造体の一部であったので、熟知しておく必要があります。ただし、この場合には、「.sencha/workspace」フォルダのみが作成されます。

設定

設定はアプリケーションの設定と同様です。".sencha/app/sencha.cfg"のファイルには、1ページ（“app”）ごとに設定が備わっています。

単一ページのアプリケーションと異なり、".sencha/workspace/sencha.cfg" ファイルは、ワークスペースの全ページの設定プロパティを設定する場合に有効です。

フレームワークの場所

Sencha Ext JS または Sencha Touch の場所（つまり、「SDK」または「フレームワーク」）はワークスペースの設定プロパティとしてストアされます。これによって、複数のページがこの設定を共有できるようになります。これらの場所においても、またSencha SDKがソースコントロールシステムにストアされる場合でもストアされない場合でも、さまざまなチームがさまざまなプリファレンスを持ちます。以下で述べられる設定によって、ワークスペース内の Sencha SDK の場所のコントロールが可能になります。

デフォルトでは、Sencha Ex JS や Sencha Touch SDK も保持しているワークスペースは、".sencha/workspace/sencha.cfg" で以下のプロパティ設定を取得します。

ext.dir=${workspace.dir}/ext
touch.dir=${workspace.dir}/touch

workspace.dirプロパティの値はSencha Cmdで決定され、必要に応じて拡張されます。つまり、ワークスペースには、それが保持しているアプリケーションで使用される SDK のコピーがデフォルトで含まれています。

アプリケーションは、".sencha/app/sencha.cfg"ファイル内のapp.frameworkプロパティを使用してフレームワークを間接的に参照します。

app.framework=ext

ページの生成

ワークスペースを取得すると、ページ（“app”）の生成が以前と同じになります。

sencha -sdk /path/to/ext generate app ExtApp /path/to/workspace/extApp

同じワークスペースでSencha Touchアプリケーションを生成することもできます。

sencha -sdk /path/to/touch generate app TouchApp /path/to/workspace/touchApp

生成されたこれらのページのターゲットがワークスペースに存在しているため、以下の構造体が作成されます（単一ページのアプリ向けのものとは少々異なります）。

.sencha/                    # Sencha-specific files (e.g. configuration)
    workspace/              # Workspace-specific content (see below)
        sencha.cfg          # Workspace's configuration file for Sencha Cmd
        plugin.xml          # Workspace plugin for Sencha Cmd

ext/                        # A copy of the Ext JS SDK
    ...

touch/                      # A copy of the Sencha Touch SDK
    ...

extApp/
    .sencha/                # Sencha-specific files (e.g. configuration)
        app/                # Application-specific content
            sencha.cfg      # Application's configuration file for Sencha Cmd

touchApp/
    .sencha/                # Sencha-specific files (e.g. configuration)
        app/                # Application-specific content
            sencha.cfg      # Configuration file for Sencha Cmd

build/                      # The folder where build output is placed.
    production/             # Build output for production
        touchApp/
        extApp/
    testing/                # Build output for testing
        touchApp/
        extApp/

さらに多くのページを作成するには、上記のコマンドを繰り返します。

ページのビルド

マルチページのアプリケーションの各ページの作成プロセスは、適切な各フォルダから以下のコマンドで実行します。

sencha app build

効率化するために、このプロセスのスクリプトを作成できます。

ページ間のコードの共有

アプリケーションを複数ページに拡大する場合、アプリケーション間でコードを共有する効率的な方法があることが重要です。ワークスペースでこれを行うには2つの方法があります。

• パッケージ
• workspace.classpath

パッケージ

Sencha Cmd は、JavaScript、Sass リソースをダウンロードしてアプリケーションに統合するために使用できる強力なパッケージ管理サブシステムを提供します。これは単一ページアプリケーションガイドで説明していますが、ワークスペースに関して、これらのパッケージは共有されるだけです。ダウンロードは1度だけで、デフォルトではワークスペースの "./packages" フォルダにストアされます。

共有パッケージの場所を変更するには、".sencha/workspace/sencha.cfg" ファイルで workspace.packages.dir を変更します。

workspace.classpath

アプリケーションの複数のページで共有 JavaScript コードが必要でワークスペース外の他のアプリケーションでは必要とされない場合、この設定オプションを使用してすべてのアプリケーションにソースフォルダを自動的に含めることができます。このプロパティは Sencha Cmd にこれらの共有コードフォルダを sencha app build コマンドの実行中にスキャンするように指示します。これを行う方法は次のとおりです。

次のように、common フォルダをワークスペースに追加します。

.sencha/
    workspace/
    ...
common/             # Folder for common things between pages.
    src/            # Folder for common JavaScript code for all pages.

アプリケーションにすべてのページをビルドの際にcommon/srcを含めるには、次のものを".sencha/workspace/sencha.cfg"に追加します。

workspace.classpath=${workspace.dir}/common/src

これによって、次のコンポーネントがデフォルトのクラスパスに追加されます。

${framework.classpath},${workspace.classpath},${app.classpath}

アプリケーションのミックス

複数のExt JSページ間または複数のSencha Touchアプリケーション間でコードを共有するだけではなく、多くの場合、2つのSenchaフレームワーク間でコードを共有する必要があります。フレームワークには多くの共通点がありますが、多くの重要な点、特にUIコンポーネントとレイアウトのエリアにおいて異なり、このようなさまざまなデバイス環境をターゲットにすることが求められます。これらの違いがある状態でも、2つのフレームワーク間でコードを共有することができ、たとえば、2つのモデルクラス定義間でコードを共有することなどもできます。

場合によっては、混合アプリケーションワークスペースがある場合に、フレームワークごとに共通コードを隔離する必要があります。これを行う方法の1つは、このように workspace.classpath を設定することです。

workspace.classpath=${workspace.dir}/common/src,${workspace.dir}/common/src-${framework.name}

このように定義することによって、ワークスペースはこのようになります。

.sencha/
    workspace/
    ...
common/             # Folder for common things between pages.
    src/            # Folder for common JavaScript code for all pages.
    src-ext/        # Folder for common JavaScript code for Ext JS pages.
    src-touch/      # Folder for common JavaScript code for Sencha Touch pages.