Sencha Cmd 6 - その２


# では、いれてみましょう。

というわけで、ダウンロードしたファイルを早速インストールしてみましょう。

## インストール
ダウンロードしたファイルはこういうものでした。


![スクリーンショット 2015-12-12 15.10.42.png](https://qiita-image-store.s3.amazonaws.com/0/34693/a76cd949-5eaf-0570-8f95-5397925a1e7c.png "スクリーンショット 2015-12-12 15.10.42.png")

JREが入っていないので、no_jre。これを解凍して、よくあるウィザード登場。

![スクリーンショット 2015-12-12 15.14.58.png](https://qiita-image-store.s3.amazonaws.com/0/34693/dd1d345f-042e-2e62-c173-83d1eed50207.png "スクリーンショット 2015-12-12 15.14.58.png")

インストール自体は何も迷うことはございません。
あぐりーして、インストール先を選択して入れてしまいましょう。

## コマンド実行
インストールして使えるようになるには、コンソール（黒い画面）で、
次のように実行するとわかります。

![スクリーンショット 2015-12-12 15.24.31.png](https://qiita-image-store.s3.amazonaws.com/0/34693/bab8852d-ff26-e4f2-5432-c2d354267447.png "スクリーンショット 2015-12-12 15.24.31.png")

そう。Sencha Cmdいうくらいなので、コマンドはsenchaです。
近年はWebデザイナーさんでも、SassやらCompassやらで黒い画面を使うことがあると思いますし、黒画面拒絶症候群の人口は減少傾向にあります。（たぶん）

実行パスが通っていれば、バージョン以外にもいろいろ使い方がダーって英語で流れます。

![スクリーンショット 2015-12-12 16.14.41.png](https://qiita-image-store.s3.amazonaws.com/0/34693/ff53479a-c57e-2b54-7b46-a2d9296843e9.png "スクリーンショット 2015-12-12 16.14.41.png")

きちんとバージョンが6だということもわかります。
そんなコマンド無いよって言われる方は、パスが通ってないので通しましょう。

bashをお使いの方は~/.bash。zshをお使いの方は~/.zshrcに、
インストールした先のパスをこんな風に書きます。

![スクリーンショット 2015-12-12 16.28.30.png](https://qiita-image-store.s3.amazonaws.com/0/34693/88838294-c94f-d1f1-44d4-a9cfe52e219d.png "スクリーンショット 2015-12-12 16.28.30.png")

後は`source ~/.zshrc`で適用させてとかで、再度`sencha`を実行してみてください。

# 次はなにをしましょう
めでたく、Sencha Cmdが使えるようになりました。
さて、じゃあこれで一体何をするんでしょう。

そういえば、`sencha`と入力した時に、出力の最初の方に、「最初のステップでは、アプリケーションのベースをジェネレートしましょう。」的なことが書かれています。

上記で貼り付けたキャプチャーを見なおしてみると・・・
`sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp`
そのコマンドがこれだということがわかります。

/path/to/sdk を使い、MyAppというアプリケーション名で、/path/to/myappにジェネレートするわけですな！
・・はて、/path/to/sdk 。SDKが必要なのかそうなのか。
前回の記事から読み進めていただいた方ならおわかりですが、
本記事はSDKの入手については触れてません。

しかし、[前回の記事](http://qiita.com/yasunaga/items/0d41031e2a2aec9a0cff)で、受信したメールのキャプチャーの上の方に、
それらしいボタンがなかったでしょうか・・・。

![スクリーンショット 2015-12-04 3.19.29.png](https://qiita-image-store.s3.amazonaws.com/0/34693/be8cee55-2aa2-774e-0d99-1d7beb3d6d7f.png "スクリーンショット 2015-12-04 3.19.29.png")

お。ありますな。ありますな。緑のボタン。
DOWNLOAD EXT JS
これじゃないですかね。
30日間期限付きなのは、（SenchaCmdは無償のようですが）そもそもSencha Cmdをダウンロードするときに訪れたページにもそう記載がありました。

とりあえずこれを落としてみましょうか。

#SDKを求めて

該当するメールを探しだして、早速ボタンをポチリ。
すると、ブラウザに表示されたのは、な、なんと！

![スクリーンショット 2015-12-12 17.01.19.png](https://qiita-image-store.s3.amazonaws.com/0/34693/2f8ffaa9-1137-8a1b-dbd7-7f0fe63d2f66.png "スクリーンショット 2015-12-12 17.01.19.png")

処理中にエラーが発生しました、と。

なんすか。ダメすか。

メールを見なおしてみると、上のキャプチャーにもちーーさい文字で書かれておるんですが、
Note: download links will expire in 48 hours
なるほどなるほど。なるほどですね。
前回の記事から余裕の48時間超えをしているので、ダウンロードは無効となっているようです。

じゃあ・・あのサイトからまたやりますか。
と、だがちょっと待って欲しい。

これも前回の記事になりますが、[ダウンロードサイト](https://www.sencha.com/products/extjs/evaluate/)の上部に何かありませんかね。

![スクリーンショット 2015-12-04 3.10.00.png](https://qiita-image-store.s3.amazonaws.com/0/34693/f292f938-9dfb-8510-456f-842a21306fd1.png "スクリーンショット 2015-12-04 3.10.00.png")

わかりますか。右上のところです。緑のボタンです。

![スクリーンショット 2015-12-12 17.09.41.png](https://qiita-image-store.s3.amazonaws.com/0/34693/72e825fb-8569-1d20-57d3-07906a34d065.png "スクリーンショット 2015-12-12 17.09.41.png")

やや！

なるほどなるほど。なるほどですね。
え、じゃあ名前とか入力せんでもいけちゃう系男子ですかね。
ポチッとしてみましょう。

![スクリーンショット 2015-12-12 17.13.24.png](https://qiita-image-store.s3.amazonaws.com/0/34693/7d0638c5-49f6-292b-dcaf-634333ea252e.png "スクリーンショット 2015-12-12 17.13.24.png")

キタコレですね。
48時間制限なんていらんかったんや！

というわけで、早速Sencha Ext JSの「DOWNLOAD」をポチリ。
こちらのページに遷移します。


![スクリーンショット 2015-12-04 3.10.00.png](https://qiita-image-store.s3.amazonaws.com/0/34693/df61ff9e-882c-40db-4b8a-01e1d2b0c951.png "スクリーンショット 2015-12-04 3.10.00.png")

戻ってきたorz

完全に遊ばれてます。
あきらめてフォームにもう一度入力することにしましょう。

![スクリーンショット 2015-12-13 0.33.12.png](https://qiita-image-store.s3.amazonaws.com/0/34693/a3d313b1-6689-ed51-7694-f123c220c727.png "スクリーンショット 2015-12-13 0.33.12.png")

よしよし、ダウンロードが始まりました。

ところで、今はトライアル版で導入を行っていますが、
製品を買うともちろんこのようなことはしなくてよくて、
私は会社にライセンスがあり、その内の1つを使わせてもらっているので、専用のダウンロードサイトがあります。

解凍すると、このようなディレクトリが出来て、

![スクリーンショット 2015-12-13 0.39.17.png](https://qiita-image-store.s3.amazonaws.com/0/34693/19eb8275-c0e8-4440-db4e-18a5d21fa7fd.png "スクリーンショット 2015-12-13 0.39.17.png")

中はこのような構成になっています。
![スクリーンショット 2015-12-13 0.40.26.png](https://qiita-image-store.s3.amazonaws.com/0/34693/ba7af35e-4181-78c3-8e31-d9fd49169eec.png "スクリーンショット 2015-12-13 0.40.26.png")

これでSDKをGETできました。
では早速、だいぶ先述になってしまいますが、Sencha Cmdでアプリケーションのベースをジェネレートしてみましょう。

# generate

先述のコマンドはこれです。

`sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp`

この内、/path/to/sdkが決定しましたが、
今はダウンロードフォルダにいるので、綺麗好きな皆さんは、きっと別なディレクトリに移動させますよね。
私も綺麗好きなので、SDKを移動させましょう。
ここでは`~/bin/Sencha/ext-6.0.1-trial`に移動させます。

アプリケーション名はこのままMyAppを使わせてもらいましょう。

後は/path/to/myappの決定ですが、ここでは、`~/Sites/extjs6-first`とします。

すると、コマンドは以下のようになるでしょう。

`sencha -sdk ~/bin/Sencha/ext-6.0.1-trial generate app MyApp ~/Sites/extjs6-first`

さぁ、いざ実行。
![スクリーンショット 2015-12-13 1.00.46.png](https://qiita-image-store.s3.amazonaws.com/0/34693/558f48f1-1393-ed47-1d2f-8b130f08a52b.png "スクリーンショット 2015-12-13 1.00.46.png")

なにやらはじまりましたよ。
![スクリーンショット 2015-12-13 1.01.23.png](https://qiita-image-store.s3.amazonaws.com/0/34693/3a64854a-a653-3c0d-6985-3c5da4a0baf8.png "スクリーンショット 2015-12-13 1.01.23.png")

最終的にエラーも出ずにコマンドは終了。
最後はこんな行になっているはずです。

![スクリーンショット 2015-12-13 1.04.40.png](https://qiita-image-store.s3.amazonaws.com/0/34693/682e9d9a-e170-d46f-5d8d-e850a72812cf.png "スクリーンショット 2015-12-13 1.04.40.png")

ここで、おやっと。
`Application available at http://localhost:1841`
とあるではありませんか。

インストールした~/Sites下は自分の環境ではApacheさんで動いているので、一度こいつをとめて、ちょっと試してみましょうか。

![スクリーンショット 2015-12-13 1.12.57.png](https://qiita-image-store.s3.amazonaws.com/0/34693/3a45e4b8-de1f-6628-4ede-9d136848a5da.png "スクリーンショット 2015-12-13 1.12.57.png")

アクセスできませんorz

実はこれ、このコマンドを実行することで、アクセスが出来ます。

![スクリーンショット 2015-12-13 1.14.57.png](https://qiita-image-store.s3.amazonaws.com/0/34693/52b65fd8-518f-b906-76f3-68d156d49463.png "スクリーンショット 2015-12-13 1.14.57.png")

`sencha web start`
終了するときは`Ctrl+C`で止めましょう。

では、もう一度ブラウザを更新してみましょう。


![スクリーンショット 2015-12-13 1.17.01.png](https://qiita-image-store.s3.amazonaws.com/0/34693/bd1c98c8-076c-eb85-b6f0-18b23e3d8966.png "スクリーンショット 2015-12-13 1.17.01.png")

おおお。おおお。表示できましたね。

では、次回はgenerateされたディレクトリの中身を見ていきましょう。