Contents 簡単な 2 つのステップで作業開始 必要な依存関係にあるソフトウェア システム変数の設定 Windows Windows XP Windows Vista Windows 7 Windows 8 Mac OSX / Linux 依存関係インストレーション Java Runtime Environment (JRE) Mac OSX Windows Java を PATH に追加 Windows Mac OSX / Linux Ruby Windows Mac OSX / Linux Ant Ant を PATH に追加 Windows Mac OSX / Linux ユーザー Ant の再ロード サードパーティー依存関係のファイナライズ処理 Sencha Cmd Cmd の PATH への追加 Windows Mac OSX / Linux Sencha Cmd の有効化 Sencha フレームワーク アプリケーションのライセンス Mac OS X： Windows 7、8: Windows XP: Ubuntu: プロジェクトディレクトリの作成 JSON ファイルを使用するための IIS 設定 次のステップ

インストールと設定

本ガイドでは Sencha Architect をシステムにインストールして実行する方法を説明します。また、最初のプロジェクトを完了して公開する前に必要なその他ソフトウェアについても説明します。

本ガイドは、Sencha Architect のインストールに関連した共通のアプリのビルドの問題を回避するための明確なパスを示すことも目的としています。Sencha Architect のクリーンインストールを確実に行うためには、様々な依存関係にあるソフトウェアを理解することが重要です。

簡単な 2 つのステップで作業開始

  • Sencha Architect をダウンロードします。試用は 30 日間無料です。Sencha フォーラムのユーザー名が必要です。
  • アカウントをお持ちでない場合、フォーラムまたは Architect 内から無料で登録することができます。

必要な依存関係にあるソフトウェア

インストーラーを実行する前に、依存関係にあるソフトウェアを見てみましょう。Sencha Architect 3 の機能を実行するには以下のアイテムが必要です。

* これらのアイテムは Sencha Architect 3 で提供されます。必要に応じて他の場所を指すことができます。これについては本ガイドで詳しく説明します。

Java、Ruby、Ant、Sencha Cmd はコマンドラインから利用できる必要があります。これらのツールをインストールする場合、インストーラーが PATH システム変数に追加します。

ただし、これらの変数は失われたり、追加できないことがあります。このような場合、これらのツールはコマンドラインでは利用できません。コマンドラインで利用できない場合、Sencha Architect でもアクセスできません。つまり、これらのパスを正しく設定することが非常に重要です。

システム変数の設定

様々なオペレーティングシステムのシステムパス変数を設定で注意すべき点について見てみましょう。

Windows

Windows XP

  • スタート -> コントロール パネル -> システム -> 詳細設定
  • 環境変数をクリックし、システム変数の下から PATH を見つけてクリックします。
  • 編集ウィンドウでクラスの場所を PATH の値に追加して PATH を変更します。PATH というアイテムがない場合、新しい変数を追加するか、PATH を名前として、クラスの場所を値として追加するか選択できます。
  • ウィンドウを閉じてコマンドプロンプトウィンドウを再度開きます。

Windows Vista

  • マイ コンピューター アイコンを右クリックします。
  • プロパティをコンテキスト メニューから選択します。
  • 詳細設定タブ (Vista のシステムの詳細設定リンク) をクリックします。
  • 編集ウィンドウでクラスの場所を PATH の値に追加して PATH を変更します。PATH というアイテムがない場合、新しい変数を追加するか、PATH を名前として、クラスの場所を値として追加するか選択できます。
  • ウィンドウを閉じてコマンドプロンプトウィンドウを再度開きます。

Windows 7

  • [スタート] メニューからコンピューターを選択します。
  • [システムのプロパティ] をコンテキスト メニューから選択します。
  • [システムの詳細設定] > [詳細設定] タブをクリックします。
  • [環境変数] をクリックし、[システム変数] の下から PATH を見つけてクリックします。
  • [編集] ウィンドウでクラスの場所を PATH の値に追加して PATH を変更します。PATH というアイテムがない場合、新しい変数を追加するか、PATH を名前として、クラスの場所を値として追加するか選択できます。
  • ウィンドウを閉じて [コマンド プロンプト] ウィンドウを再度開きます。

Windows 8

  • マウスのポインターを画面の右端にドラッグします。
  • [検索] アイコンをクリックして、次を入力します。コントロール パネル。
  • [コントロール パネル] > [システム] > [詳細設定] をクリックします。
  • [環境変数] をクリックし、[システム変数] の下から PATH を見つけてクリックします。
  • [編集] ウィンドウでクラスの場所を PATH の値に追加して PATH を変更します。PATH というアイテムがない場合、新しい変数を追加するか、PATH を名前として、クラスの場所を値として追加するか選択できます。
  • ウィンドウを閉じて [コマンド プロンプト] ウィンドウを再度開きます。

Mac OSX / Linux

  • ~/ .bash_profile を編集します。

  • PATH 変数を編集し、いずれかのツールへのパスで以下のラインを記述します。

    export PATH=<PATH-TO-ADD-HERE>:$PATH

  • ファイルを保存して閉じ、新しいターミナルウィンドウを開きます。

注意:.bash_profile は隠しファイルです。これらのファイルはデフォルトで Finder で非表示になっています。隠しファイルを有効にするには、コマンドラインから以下のコマンドを実行します。

defaults write com.apple.finder AppleShowAllFiles TRUE
killall Finder

依存関係インストレーション

Java Runtime Environment (JRE)

開始するに当たり、Java JRE 1.7 および JDK をダウンロードするリンクです。

Sencha Architect では Sencha Cmd を適切に利用するために JRE が必要です。有効なビルドを作成するために Cmd が必要なので、Java を正しくインストールする必要があります。

コマンドラインツールを開いて、Java が正しくインストールされているかテストします。

Mac OSX

Mac OSX ユーザーはターミナルを開くだけです。

Windows

Windows ユーザーはスタート画面から cmd と入力してコマンドラインを開くことができます。

コマンドラインが利用できるようになったら、以下のコマンドを発行します。

java -version

正しくインストールされている場合、以下のバージョン情報が作成されます。

>java -version
java version "1.7.0_40"
Java(TM) SE Runtime Environment (build 1.7.0_40-b43)
Java HotSpot(TM) 64-Bit Server VM (build 24.0-b56, mixed mode)

参考情報として、Java Runtime Environment は Java プログラムを実行する Java 仮想マシンの実装です。JRE がない場合、アプリケーションをコンパイルできますが実行できません。

Java Development Kit (JDK) は Java ベースのソフトウェアを開発するために使用できるソフトウェアバンドルです。JRE には javac コンパイラーがバイトコードを実行する JVM が含まれているので、JRE パスを環境変数から JAVA_HOME 変数として追加する必要があります。

注意:_JDK には JRE が含まれます。PATH を正しく設定している場合、JRE に別の入力は必要ありません。_

Java を PATH に追加

Windows

以下の情報をシステム変数に追加して Java に PATH を追加します。

variable name: 
JAVA_HOME
variable value: 
c:\jdk1.7.0_40

variable name: 
PATH
variable value: 
%PATH%;%JAVA_HOME%\bin\
Mac OSX / Linux

Java パスを意図的に変更していない限り、通常 Java は以下にインストールされます。

/Library/Java/JavaVirtualMachines/<java version>/.

以下の行を ~/.bash_profile に追加して、Java を PATH に追加します。

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_40.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

詳細については、次を参照してください。http://java.com/en/download/help/path.xml

Ruby

Sencha Architect はテーマを構築する場合にアプリのビルドプロセス中に Ruby を使用します。Sencha フレームワークでテーマ設定を行うには Sass と Compass が必要です。Sencha Cmd および Sencha Architect には含まれているので、これらの依存関係をインストールする必要はありません。ただし、Sass と Compass は Ruby 上で実行するので、別にインストールする必要があります。

Sencha Architect は Ruby 1.9 と 2.0 のいずれでも動作します。

Ruby が正しくインストールされているか確認し、以下のコマンドを実行します。

> ruby -v

正しくインストールされている場合、次のようなバージョン情報が出力されます。

> ruby -v
ruby 2.0.0p451 (2014-02-24 revision 45167) [universal.x86_64-darwin13]

Windows

Windows ユーザーは Ruby をインストールする必要があります。Ruby がインストールされていない場合、ここからダウンロードできます。

Ruby インストーラーを正しい管理者権限で実行してください。管理者権限を有効にするには、インストーラーの実行ファイルを右クリックして「管理者として実行」をクリックします。インストール中に、Ruby を PATH 変数に追加する許可を求めるチェックボックスにチェックを入れる必要があります。

Mac OSX / Linux

Ruby は自動的に Mac OSX マシンにインストールされます。さらに操作を行う必要はありません。

Ant

Sencha Architect では、ネイティブ/ハイブリッドの Android ビルドを Sencha Architect で構築するために Apache Ant が必要です。ハイブリッドの Android アプリを構築しない場合、または Apache Cordova か PhoneGap をこのプロセスで使用する場合は、Ant のインストールは必要ありません。

Apache Ant をインストールする必要がある場合、ここでダウンロードします。

Ant を PATH に追加

Windows

他に指定していない場合、Windows ユーザーは Ant が c:\ant\ にインストールされていると考えることができます。以下の情報をシステム変数に追加して Ant に PATH を追加します。

variable name: 
ANT_HOME
variable value: 
c:\ant

variable name: 
PATH
variable value: 
%PATH%;%ANT_HOME%\bin\
Mac OSX / Linux ユーザー

指定されていない場合、Mac ユーザーと Linux ユーザーは Ant が /usr/bin/ant にインストールされていると想定できます。以下の行を ~/.bash_profile に追加して、Ant を PATH に追加します。

export ANT_HOME=/usr/bin/ant
export PATH=${PATH}:${ANT_HOME}/bin

Ant の再ロード

Apache Ant のインストール後、Sencha Architect で依存関係を再ロードする必要があります。次に進んで、依存関係を再ロードできます。

Sencha Architect の [Preferences（基本設定）] > [Dependencies（依存関係）] > [Reload（再ロード）]

サードパーティー依存関係のファイナライズ処理

これらの 3 つの依存関係のソフトウェアのほか、Sencha Architect では Sencha Cmd と Sencha フレームワークも使用しています。Sencha Cmd またはフレームワークは Architect と共に提供されているのでインストールする必要はありません。他の依存関係にあるソフトウェアが適切にインストールされている場合、Sencha Architect インストーラーを実行します。

Windows ユーザーの場合、Sencha Architect を同じ管理者権限で依存関係としてインストールすることを推奨します。こうすることによって、Sencha Architect がアクセスできるようになります。

Sencha Cmd

Sencha Cmd は非常に便利なツールを提供します。アプリケーションを構築できるだけでなく、テーマを構築し、コードを生成し、組み込まれたウェブサーバー (Jetty 8.1.7) を使用することもできます。

Sencha Architect ではアプリケーションを適切に構築するために Sencha Cmd が必要です。Sencha Architect は Sencha Cmd 上で動作し、パッケージ化されているので、さらにインストールする必要はありません。ただし、Cmd はデフォルトで PATH には追加されません。Architect とは別にコマンドラインから Cmd を実行する場合は、以下のステップに従ってください。

コマンドラインから以下を発行することによって、Sencha Cmd のインストールをテストできます。

> sencha which

正しくインストールされている場合、バージョン情報が出力されます。例:

> sencha which
Sencha Cmd v5.0.0.116
/Users/<User>/bin/Sencha/Cmd/5.0.0.116/

Cmd の PATH への追加

ターミナルで以下のコマンドを実行して、Cmd を PATH に追加します。

Windows

指定されていない場合、Windows ユーザーは Ant が c:\ant\ にインストールされていると想定できます。以下の情報をシステム変数に追加して PATH に Sencha Cmd を追加します。

variable name: 
PATH
variable value: 
%PATH%;c:\sencha\cmd\5.0.0.116\

Mac OSX / Linux

指定されていない場合、Mac/Linux ユーザーは Sencha Cmd が ~/bin/sencha/cmd/5.0.0.116 にインストールされていると想定できます。

以下の行を ~/.bash_profile に追加して、Sencha Cmd を PATH に追加します。

export PATH=~/bin/Sencha/Cmd/5.0.0.116:$PATH

Sencha Cmd の有効化

Sencha Cmd も Sencha Architect で有効にする必要があります。デフォルトでは初回保存時に行われます。

以下に進んで Sencha Cmd が手動で有効化できるか確認します。

[Settings（設定）] > [Project Settings Framework（プロジェクト設定フレームワーク）]

ビルドツールが無効の場合、フレームワークに対して CDN が使用されます。パスは Library Base Path の下にあるインスペクタの Library ノードで設定されます。これはビルドツールが無効のプロジェクトのみに設定してください。ユーザーがデフォルトでパスをクリアする場合、CDN パスが使用されます。

Sencha フレームワーク

Architect は必要な Sencha フレームワークを自動的にダウンロードしてインストールします。これは手動で Ext JS または Sencha Touch をインストールする必要がないことを意味します。

ただし、「License」の下で場所を指定することによって Ext JS または Touch のサポートされたレガシーバージョンに切り替えることができます。

以下に詳細な手順があります。

アプリケーションのライセンス

Sencha では選択したフレームワークでアプリケーションの異なるライセンスオプションを提供しています。詳細は、Sencha のライセンスとポリシーを参照してください。

注意:_これは Sencha Architect のライセンスではなく、アプリケーションのフレームワークライセンスについてです。_

アプリケーションのライセンスを変更する方法は次のとおりです。

  • [Edit（編集）] > [Project Settings（プロジェクト設定）] > [Framework（フレームワーク）] をクリックします。
  • [Build Tools（ビルドツール）] > [Enabled（有効化）] をクリックします。 - ビルドツールを無効化すると、Architect ではユーザーがアプリケーションのビルドとライセンスの設定を行うものと判断します。ビルドツールを有効化すると、Architect は、選択されたライセンスに最適なソフトウェアを提供します。

  • 選択するライセンスをクリックします。

    • Commercial（商用）:無料または有料アプリケーションに対する Architect のデフォルトのライセンス
    • Complete or Custom Path（Complete またはカスタムパス）:Sencha Complete または Sencha Touch Bundle で使用するもの
    • GPL:オープンソース

  • [Save（保存）] をクリックします。

注意:Sencha Complete または Sencha Touch Bundle については、[Complete or Custom Path（Complete またはカスタムパス）] をクリックし [Browse（参照）] ボタンをクリックして、Ext JS または Touch フレームワークディレクトリを探します。

デフォルトでは、Ext JS および Touch フレームワークは Sencha Complete または Sencha Touch Bundle によって次のディレクトリにインストールされます。

<ユーザー> はユーザー名、<パッケージ> は Complete または Touch-Bundle、n.n.n はバージョン番号、 build はビルド番号です。

Mac OS X：

/Users/<User>/bin/Sencha/<pkg>/ext-n.n.n.build
/Users/<User>/bin/Sencha/<pkg>/touch-n.n.n

Windows 7、8:

C:\Users\<User>\bin\Sencha\<pkg>\ext-n.n.n.build
C:\Users\<User>\bin\Sencha\<pkg>\touch-n.n.n

Windows XP:

C:\Documents and Settings\<User>\bin\Sencha\<pkg>\ext-n.n.n.build
C:\Documents and Settings\<User>\bin\Sencha\<pkg>\touch-n.n.n

Ubuntu:

/home/user/bin/Sencha/<pkg>/ext-n.n.n.build
/home/user/bin/Sencha/<pkg>/touch-n.n.n

プロジェクトディレクトリの作成

作成するディレクトリの場所と名前は、オペレーティングシステムとウェブサーバーによって異なります。ローカルのウェブサーバーを使用している場合、ローカルホストのウェブでアクセスできる領域内のいずれかのディレクトリに保存する必要があります。この例は XAMPP の htdocs ディレクトリまたは Linux の /var/www/html です。

Sencha Cmd ウェブサーバーを使用する場合、どのディレクトリでも、プロジェクトディレクトリとして使用できます。

プロジェクトの初回保存後に Architect によってプロジェクト用の新しいディレクトリが同じ場所に作成されます。追加プロジェクト資産を Architect が作成するディレクトリに保存します。これには画像などのデータや追加リソースが含まれます。

JSON ファイルを使用するための IIS 設定

IIS ウェブサーバーを実行している場合、application/x-json を MIME タイプとして追加してください。IIS は JSON ファイルを適切に使用するために MIME タイプの設定が必要です。これが設定されていない場合、プロジェクトをプレビューすると JSON ファイルはエラーを返します。

参照:

次のステップ

ソフトウェアをインストールしたら、次に進んでください。

これで、Sencha Architect を設定し、そのすべての依存関係を扱う方法を理解しました。これですぐに構築を開始できるようになったと思います。Sencha ツールおよびフレームワークについて詳しく知りたい場合は、Sencha トレーニングコースを受講されるか、フォーラムで便利な情報をご覧ください。

Last updated