前回までに開発環境構築を行いました。今回は、もう少しだけ開発環境の設定を行い、実際にログインフォームを作成してみようと思います。
.gitignoreの設定
ソースコードの管理は、gitを使って管理していることが多いと思います。Sencha Cmdが生成するコードで、不要な（gitで共有するには）ものは、無視リストにいれましょう。
Codexディレクトリ(Sencha Ext JSのワークスペース)に.gitignoreを作成して下記の内容を記述します。
|
1 2 |
# Build and Release Folders build/ |
他、必要に応じてカスタマイズしてください。
新しいページを生成する
既に、frontというページを作成しましたが、もう1つloginというページを作成します。Codexディレクトリに移動し、以下のコマンドを実行します。
|
1 |
sencha -sdk ~/Library/Sencha/ext-6.0.1/ generate app Login ./login |
http://localhost:1841/login/ にアクセスし、frontと同じページが表示されることを確認します。
なぜ、ログインページを別にするか？
昔から、Sencha Ext JSを使ったページでログインページを何処におくか？というのは、本当にプロジェクト毎にもめる・悩む点でもありました。frontの中にログインしていない場合は、ログインフォームを表示する手段もあります。
しかし、その場合、コンテンツ側のJSコードとログインに必要なフォーム等のJSコードも同時に読み込みます。 従って、「ログイン画面の表示までが遅い、もっと速くしたい」「シングルサインオンをすることになる」など、ログインの実装もまちまちです。ログインページを分けておくことで、上記のどちらの場合にも対処できます。
共有ライブラリパス設定
ここまでに、frontとloginという2つのページを、ワークスペースに作成しました。 プログラマーの方であれば、すこし疑問にも思う点があるかもしれません。 それは、「frontとlogin、またはその他のページを作った時に、共通のライブラリやクラスは個別に配置しなくてはならないのだろうか？」という点です。
わざわざワークスペースを最初に作成したのは、この点を解消するためでもあります。共有ライブラリのパスを設定しておくことで、各プロジェクトへ共通のライブラリとして組み込むことができます。
Codex ディレクトリに移動して、次のコマンドを実行します。
|
1 |
mkdir -p common/src |
Codexディレクトリの下に、common/srcディレクトリを作成しました。以下のようにディレクトリが作成されます。
|
1 2 3 |
├── Codex │ ├── common │ │ └── src |
.sencha/workspace/sencha.cfg 編集
作成したcommon/srcディレクトリを共有ディレクトリとして扱えるように、sencha.cfgファイルを編集します。
|
1 2 3 |
workspace.classpath= ↓ workspace.classpath=${workspace.dir}/common/src |
以上で、共有ディレクトリの設定は完了です。
app.jsonを編集
front/loginともに、ディレクトリの下にapp.jsonディレクトリが存在します。今後のために、数カ所変更を加えます。
index.htmlをindex.phpに変える
通常、index.htmlにアクセスして、Sencha Ext JSで作成したアプリケーションを実行しますが、今回FuelPHPを導入して最終的にFuelPHPのViewとしてSencha Ext JSのアプリケーションを実行します。その時に、index.htmlをindex.phpとする必要があるため、先に変更します。
front/index.htmlをfront/index.phpに変更します。 同様に、login/index.htmlをlogin/index.phpに変更します。
次に、front/app.json の設定を変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
"indexHtmlPath": "index.html", ↓ "indexHtmlPath": "index.php", "output": { "base": "${workspace.build.dir}/${build.environment}/${app.name}", "page": "index.html", ↓ "page": "index.php", "appCache": { /** * List of items in the CACHE MANIFEST section */ "cache": [ "index.html" ↓ "index.html" |
合計3箇所です。
login/app.json の設定も同様に変更します。
Application Cacheを無効にする
デフォルトで、Sencha Cmdを使い、Productionビルドを行うと、cache.appcacheというHTML5 アプリケーションキャッシュマニュフェストファイルが作成されます。
Application Cache API が廃止予定となりました
にもあるように、余計なお世話なのでOFFにします。
production -> output -> appCache -> enable を false に設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
"production": { "output": { "appCache": { "enable": false, "path": "cache.appcache" } }, "loader": { "cache": "${build.timestamp}" }, "cache": { "enable": true }, "compressor": { "type": "yui" } }, |
アクセス時にログインチェックを行う場合
アプリケーションキャッシュを有効にしたまま、frontページにアクセスした場合、今後frontページにアクセスした時にログインチェックを行おうとしても、FuelPHPでそれを実装しても、Webサーバーの処理が走ることなくページが表示されてしまいます。
もちろん、どちらにしても何かしらの通信時にログインチェックを行っているとしても、ログインしていなかったらログインページに飛ばす ということができなくなります。
オススメとしては、上記にあるとおりOFFにしてしまうことです。
おわりに
少々長くなり、またまだ実際のログインフォーム作成にたどりついていませんが、今回はここまでとします。 次回は、実際にログインフォームを設計・実装していきます。
