前回、Sencha Ext JSのワークスペースを作成し、「さぁSencha Ext JSの開発だっ！」というところまで準備したのですが、今後どうしてもサーバーサイドの実装と一緒に話を進めなくてはならないことが多いため、今回は、PHPのフレームワークであるFuelPHP をインストールして、そこにSencha Ext JSのワークスペースを作成し、PHPとSencha Ext JS、両方の開発環境を整えましょう。
ウェブサーバーの前提条件
ローカルの開発環境は、ホント最近色々ありますね。Vagrantと使ったやり方、Docker、または、MacPorts/Homebrew を使ったやり方、どれも開発できれば何でもよいです。前提として、Mac OS Xを想定していますが、Windowsの方は読み替えてください。個人的には、Mac OS X + Dockerがよさそうだなと思いつつ、なかなか移行できていないのですが、私の場合は、Mac OS XにMacPortsでApache + PHP + MySQLがインストールされている状態です。
Apache、PHP、MySQLがローカルで扱えれば、上記の様に何でもよいです。PHPは、PHP 5.6.17 を使用します。 PHP 7系は使いません、速くなってたりよい点も多いのですが、フレームワーク/ライブラリの対応、安定感なども含めて、5.6.x で話を進めます。
ドキュメントルートについて
これから紹介する例では、以下のURLにアクセスする前提になっています。
|
1 |
http://localhost/~codex/ |
ユーザーディレクトリ使っていますが、Docker、Vagrantなどポートが違うパターンでも構いません、読み替えてください。 もちろん、XAMPP、MAMPでもよいです。
FuelPHPのインストール
まず、ドキュメントルートの１個上のディレクトリに移動します。私の場合は、下記のディレクトリ構成になります。
|
1 2 3 4 |
. ├ UserDir ├ codex ├ public_html |
public_htmlにファイルを配置して、http://localhost/~codex/ にアクセスすると表示される状態です。
ディレクトリは、UserDirに移動します。上記は、Apacheの設定の話で、codexディレクトリ、codex/public_htmlは、まだ存在しないものとします。
oil コマンドのインストール
FuelPHPは、何かとoil コマンド を使います。まず、これをインストールします。
|
1 |
curl get.fuelphp.com/oil | sh |
OS X El Capitan の場合、/usr/bin 権限がないということでインストールエラーになります。
curl get.fuelphp.com/oil > oilsetup.sh
として、一度セットアップファイルをファイルに保存して、PREFIX部分を書き換えます。
PREFIX=”/usr/bin/”
↓
PREFIX=”/usr/local/bin”chmod +x oilsetup.sh を実行して、実行権限を与え
./oilsetup.sh を実行してインストールしてください。/usr/local/bin にパスが通っていない場合は、.bashrc または、.zshrcなどシェルの設定に
export PATH=$PATH:”/usr/local/bin/”
を追加してください。
次に、codexというFuelPHPプロジェクトを生成します。
|
1 |
oil create codex |
oilコマンドも、FuelPHP自体もネットワークから取得するので、しばらく放置して出来上がるのを待ちましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
├── codex │ ├── CHANGELOG.md │ ├── CONTRIBUTING.md │ ├── LICENSE.md │ ├── README.md │ ├── TESTING.md │ ├── composer.json │ ├── composer.lock │ ├── composer.phar │ ├── docs │ ├── fuel │ ├── oil │ └── public |
UserDir下にcodexディレクトリが作成され、その中に上記のディレクトリ、ファイルが配置されます。
public がドキュメントルートの前提になっていますが、私の環境では、public_htmlというディレクトリ名がドキュメントルートになるため、リネームします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
├── codex │ ├── CHANGELOG.md │ ├── CONTRIBUTING.md │ ├── LICENSE.md │ ├── README.md │ ├── TESTING.md │ ├── composer.json │ ├── composer.lock │ ├── composer.phar │ ├── docs │ ├── fuel │ ├── oil │ └── public_html |
http://localhost/~codex/ にアクセスすると、下記の画面が表示されればインストール完了です。
まぁ、ここまでは、ローカルでFuelPHPが動けばよいということだけですが、インストールもさほど複雑ではないので、慣れればすぐ環境が準備できるでしょう。
Sencha Ext JS ワークスペース・ページの作成
codexディレクトリ下に、Codexという Sencha Ext JSのワークスペースを作成します。 手順は、前回同様なので、以下にコマンドを掲載します。
|
1 2 3 4 5 6 |
mkdir Codex cd Codex/ sencha generate workspace ./ sencha -sdk ~/Library/Sencha/ext-6.0.1/ generate app Front ./front cd front sencha app watch |
http://localhost:1841/front/ にアクセスして、下記の画面が表示されればOKです。
おわりに
Sencha Ext JSのワークスペースと、FuelPHPのプロジェクトを1つのディレクトリに作成しました。
Sencha Ext JSのワークスペースは、Codexディレクトリ以下になります。FuelPHPのプロジェクトは、Codexを含むcodexディレクトリ全体になります。このタイミングで、サーバーサイド環境を準備したのは、最初に説明したとおり何かとサーバーサイドの実装が必要になるからです。
詳しい設定が解らなくても、プログラマーでない、設計者やデザイナーの方も、最初からこの環境は準備しておくことをオススメします。それは、プログラマーから実装されてくる画面等を確認するときや、デザインの修正を行う場合にも、すぐローカルで修正、実行ができるからです。
次回から、具体的な画面作りを行います。
