はじめに
Sencha Touch2とCordova／PhoneGapの開発環境を構築した時、色々と苦労したので忘れないようにメモ＆整理しておく。
なお、今回構築した環境は下記のとおり。
| Windows | Mac | |
|---|---|---|
| OS | Windwos7 Pro（64ビット） | Mac OS X 10.8 |
| Sencha Cmd | 4.0.4.84 | 4.0.4.84 |
| Sencha Touch | 2.3.1 | 2.3.1 |
| Cordova | 3.4.1-0.1.0 | 3.4.1-0.1.0 |
| PhoneGap | 3.4.0-0.19.16 | 3.4.0.-0.19.17 |
わかりやすいお手本
基本的にはわかりやすいビデオチュートリアルがあるので、それを見ながら必要なものをインストールしてコマンドを実行していけばいいはず。
Sencha & PhoneGap のビデオチュートリアル（日本語字幕付き）
チュートリアルの内容をまとめると
環境を構築しスケルトンアプリが動作するのをシミュレータで確認するまでを、チュートリアルを見ながら実際に自身で行った事を整理すると、下記の手順となる。
- Sencha Cmd／Touch2のインストール
- Cordova／PhoneGapのインストール
- ビルドしてシミュレータで確認する為に必要なツールのインストール
- Sencha Cmdで生成したスケルトンアプリにCordovaサポートを追加し、ビルド＆シミュレータで動作確認
1 Sencha Cmd／Touch2のインストール
1.1 下準備
Sencha Cmdの動作には次のものが必要となる。
- JRE1.7
- Ruby1.8 or 1.9
JRE1.7がインストールされていない場合は、java.comから自分の環境に合ったインストーラをダウンロードし、インストールする。
Rubyについては黒い画面（Windwosで言うところのコマンドプロンプト、Macで言えばターミナル）を起動し、ruby -vと入力してインストール済みか確認する。（インストールされていれば、バージョン番号が表示される）
Windowsの場合、基本的にはインストールされていないので、自らインストールする必要がある。
インストーラはrubyinstaller.orgからダウンロードできる。（ Ruby 1.9.3をダウンロードすること）
また、インストールする際、「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れること。
インストール後、再度黒い画面にてruby -vと入力してバージョン番号が表示されることを確認しておく。
Macの場合、あらかじめインストールされているはずなので、バージョンが1.8または1.9であれば、何もする必要はない。
1.2 Sencha Cmdのインストール
まず、Senchaの公式サイトからSencha Cmdのインストーラをダウンロードする。
ダウンロードURL http://www.sencha.com/products/sencha-cmd/download
ダウンロードしたzipファイルを解凍した後、インストーラを実行する。
なおWindowsの場合、インストール先にC:\Program FilesやC:\Program Files (x86)を指定するとうまく動作しないようなので、別のディレクトリを指定すること。（今回はc:\binを指定した。）
※インストールしたPCがプロキシを通してネットへ接続している場合
Sencha Cmdのインストール先にある sencha.cfg を開き、以下のように変更してプロキシへ対応させる。
cmd.jvm.args=-Xms128m -Xmx1024m -Djava.awt.headless=true
↓
cmd.jvm.args=-Xms128m -Xmx1024m -Djava.awt.headless=true -Dhttp.proxyHost=HOST -Dhttp.proxyPort=PORT
HOST、PORTをプロキシサーバ、ポート番号へ書き換える。
参考：Upgrading Sencha Cmd behind proxy
1.3 Sencha Touch2のインストール
次にスケルトンアプリの生成に必要なSencha Touch2のフレームワークをインストールする。
と言っても、公式サイトからダウンロードしたzipファイルを解凍し、適当なフォルダへコピーするだけ。
ダウンロードURL http://www.sencha.com/products/touch/download/
ちなみにダウンロードできるのが二種類ある。
Free Commercial Versionはメールアドレスを入力してダウンロードボタンをクリックすると、入力したメールアドレスにダウンロード用のURLが送られてくるので、そこからダウンロードする。
もう一つのオープンソース版は、そういった手間は不要で、即ダウンロードできる。
どちらも無償で利用できるが、オープンソース版は求められたらソースを開示しなくてはいけないが、Free Commercial Versionはその必要が無いといったところだろうか。
1.4 Sencha Cmd／Touch2の動作確認
Sencha Cmdが正常にインストールされているかを確認するために、黒い画面を開いてsenchaとだけ入力してみる。
バージョン番号とかヘルプ的なものが表示されれば、正常にインストールがされている証拠。
Sencha Cmdが正常にインストールされているのが確認できたら、いよいよスケルトンアプリの生成に挑戦。
スケルトンアプリを生成するには、黒い画面で次を実行する。
sencha -sdk [Sencha Touch2のインストールパス] generate app [アプリ名] [プロジェクトディレクトリのパス]
［Windowsでの実行例］
～～中略～～
実行中にエラーが発生しなければ、プロジェクトディレクトリの中は以下のようになっているはず。
ここまでたどり着いたら、スケルトンアプリがちゃんと動くかブラウザで確認をしてみる。
確認をするのに必要なものは、WebサーバとChromeやSafariといったWebKit系のブラウザ。
Webサーバについては定番のApacheや流行のnginxを使ってもいいが、Sencha Cmdに内蔵されているのを使うのがお手軽。
起動方法は黒い画面で以下のコマンドを実行するだけ。
sencha fs web -p [ポート番号] start -map [プロジェクトディレクトリのパス]
無事にWebサーバが起動したら、ブラウザを起動しhttp://localhost:指定したポート番号/へアクセスしてみる。
スケルトンアプリが正常に生成されていれば、次の画面が表示されるはず。
なお、起動したWebサーバを停止するにはCtrl+Cを入力するか、別の黒い画面で以下のコマンドを入力する。
sencha fs web -p [ポート番号] stop
これでSencha Touch2の準備は完了。
次回は、Cordova／PhoneGapのインストールと動作確認をするところまで書く予定。
2014.05.09追記
その２を書きました。