Sencha Touch2＋Cordova／PhoneGapの開発環境を作る その１

##はじめに

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 のビデオチュートリアル（日本語字幕付き）](http://vimeo.com/82079245)

##チュートリアルの内容をまとめると

環境を構築しスケルトンアプリが動作するのをシミュレータで確認するまでを、チュートリアルを見ながら実際に自身で行った事を整理すると、下記の手順となる。

1. Sencha Cmd／Touch2のインストール
2. Cordova／PhoneGapのインストール
3. ビルドしてシミュレータで確認する為に必要なツールのインストール
4. Sencha Cmdで生成したスケルトンアプリにCordovaサポートを追加し、ビルド＆シミュレータで動作確認

##1 Sencha Cmd／Touch2のインストール

###1.1 下準備

Sencha Cmdの動作には次のものが必要となる。

* JRE1.7
* Ruby1.8 or 1.9

JRE1.7がインストールされていない場合は、[java.com](http://java.com/ja/download/manual.jsp)から自分の環境に合ったインストーラをダウンロードし、インストールする。

Rubyについては黒い画面（Windwosで言うところのコマンドプロンプト、Macで言えばターミナル）を起動し、`ruby -v`と入力してインストール済みか確認する。（インストールされていれば、バージョン番号が表示される）
Windowsの場合、基本的にはインストールされていないので、自らインストールする必要がある。
インストーラは[rubyinstaller.org](http://rubyinstaller.org/downloads/)からダウンロードできる。（ __Ruby 1.9.3__をダウンロードすること）
また、インストールする際、「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れること。
インストール後、再度黒い画面にて`ruby -v`と入力してバージョン番号が表示されることを確認しておく。

Macの場合、あらかじめインストールされているはずなので、バージョンが1.8または1.9であれば、何もする必要はない。

###1.2 Sencha Cmdのインストール

まず、[Senchaの公式サイト](http://www.sencha.com/)からSencha Cmdのインストーラをダウンロードする。

　ダウンロードURL　[http://www.sencha.com/products/sencha-cmd/download](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 ](http://www.sencha.com/forum/showthread.php?259532-Upgrading-Sencha-Cmd-behind-proxy)

###1.3 Sencha Touch2のインストール

次にスケルトンアプリの生成に必要なSencha Touch2のフレームワークをインストールする。
と言っても、[公式サイト](http://www.sencha.com/)からダウンロードしたzipファイルを解凍し、適当なフォルダへコピーするだけ。

　ダウンロードURL　[http://www.sencha.com/products/touch/download/](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での実行例］
![実行例1.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/e66de47a-284f-6ae6-3955-a3772f1a47e1.jpeg)
　　～～中略～～
![実行例2.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/4543fed3-9062-1093-8dc9-ffe564f17462.jpeg)

実行中にエラーが発生しなければ、プロジェクトディレクトリの中は以下のようになっているはず。
![ディレクトリ構成.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/40a36e21-af36-5a3d-1753-8f03c95ae82a.jpeg)

ここまでたどり着いたら、スケルトンアプリがちゃんと動くかブラウザで確認をしてみる。
確認をするのに必要なものは、WebサーバとChromeやSafariといったWebKit系のブラウザ。
Webサーバについては定番のApacheや流行のnginxを使ってもいいが、Sencha Cmdに内蔵されているのを使うのがお手軽。
起動方法は黒い画面で以下のコマンドを実行するだけ。
`sencha fs web -p [ポート番号] start -map [プロジェクトディレクトリのパス]`
![Webサーバ起動.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/14107e34-31f1-399f-00ab-59bf88fd06fa.jpeg)

無事にWebサーバが起動したら、ブラウザを起動し`http://localhost:指定したポート番号/`へアクセスしてみる。
スケルトンアプリが正常に生成されていれば、次の画面が表示されるはず。
![ブラウザで確認.jpg](https://qiita-image-store.s3.amazonaws.com/0/42834/7b6f8570-178e-216e-667f-a25009862a4b.jpeg)

なお、起動したWebサーバを停止するには`Ctrl+C`を入力するか、別の黒い画面で以下のコマンドを入力する。
`sencha fs web -p [ポート番号] stop`

-----------
これでSencha Touch2の準備は完了。
次回は、Cordova／PhoneGapのインストールと動作確認をするところまで書く予定。

**2014.05.09追記**
[その２](http://qiita.com/munyu11/items/fdd4f4e87fc99d8af378)を書きました。