WHAT'S NEW?
Loading...

CakePHP2.0+プラグイン+ライブラリでレスポンシブなHTML5サイトを構築してみよう【3/5】

■今回のお題
  1. InitializrでHTML5対応版Bootstrapをダウンロード (初回)
  2. Bootswatchで好きなテーマをダウンロード(前回)
  3. CakePHPのプラグインBootStrapをダウンロード
  4. CakePHPのSearchプラグインをダウンロード
  5. CakePHPのDebugKitプラグインをダウンロード
  6. 簡単なデプロイ
  7. 掲示板を作ってみる
  8. 掲示板をブラッシュアップしてみる
  9. クソして寝る
3〜5だ!


■CakePHPを使う!!

タイトルにもなっているけど、あくまでメインはCakePHPだ。バージョンは2.0だ。
最近のバージョンは2.1が主流だけど、マイナーバージョンが1つ遅れてたってバリバリ現役と言っていいだろう。

2.0と2.1では細かいところで結構違いがあるんだけど、2.1に関してはまだ習得できていないので、今回は2.0を使うことにするわけ。

というわけで、ドキュメントルートにCakePHPを展開し、ブラウザで正しく閲覧できる環境が整っているという前提で話をする。

もしお使いのWinodwsで手早くWebサーバを構築したいなら、過去の記事で情報古くなってるけど、

  1. Linuxを使ったWeb開発環境を手早く構築する【1/3】
  2. Linuxを使ったWeb開発環境を手早く構築する【2/3】
  3. Linuxを使ったWeb開発環境を手早く構築する【3/3】

を見ていただければ良いと思ってる。
使ってるマシンがWindowsなら、OracleのVirtualBoxという仮想化ソフトをインストールして、バーチャルマシンとしてLinux環境を実現すれば良いよ。

CakePHPを以下にダウンロードして、ブラウザで閲覧可能という前提で進めるよ。

パス 説明
/home/develop/www.workgift.net/htdocs 解凍したCakePHPのフォルダをhtdocsにリネームして設置
/home/develop/www.workgift.net/log HTTPdのログはここに置く

ちなみにApacheでの設定ファイルはこんな感じで書いてあるとする。
<VirtualHost *:80>
  ServerAdmin   root@localhost
  ServerName    workgift.net:80
  ServerAlias   www.workgift.net
  DocumentRoot  /home/develop/www.workgift.net/htdocs/app/webroot
  ErrorLog      /home/develop/www.workgift.net/log/error.log
  CustomLog     /home/develop/www.workgift.net/log/access.log combined
</VirtualHost>

ServerNameで使っているドメインは、各自開発環境のホスト名にしておくと良い。
例えば開発環境のLinuxのホスト名を『torhamzedd.com』にしてあるのであれば、ドメインのTLD部分をホスト名に入れ替えておこう。その場合は『workgift.net』の『net』を『torhamzedd.com』にするので、『workgift.torhamzedd.com』となる。


■GO!プラグイン!

CakePHPには便利なプラグインがいくつもあるんだ。
その中で特に便利なプラグインを紹介しつつ、使おうと思う。


それぞれCakePHP2.0にあったバージョンをダウンロードしておいていただきたい。
CakeDC SearchとCakePHP DebugKitに関しては、こちらの記事を参考に設置していただきたい。

CakeDC Search
  1. CakePHP2.0にSearch Pluginをいれてラクラク検索しよう【1/2】
  2. CakePHP2.0にSearch Pluginをいれてラクラク検索しよう【2/2】
※DebugKitのことは詳しくは書いてないけど、同じ方法でインストールしておくれ。

念の為、簡単に説明しておくと
  1. Searchをダウンロード後解凍し、フォルダをSearchにリネーム
  2. DebugKitをダウンロード後解凍し、フォルダをDebugKitにリネーム
  3. TwitterBootstrapをダウンロード解凍し、フォルダ名をTwitterBootstrapにリネーム
  4. /pluginsに上記3つのフォルダを移動/コピーする(/app/pluginsでもOK)
  5. /app/Config/bootstrap.phpを開き、最下段に以下を追記する
/**
 * Plugins
 */
 CakePlugin::load('DebugKit');
 CakePlugin::load('Search');
 CakePlugin::load('TwitterBootstrap');

これで準備万端。



■今すぐHTMLを表示!

さて、3つのプラグインを入れた状態でブラウザを見てみても、いつもと変わらないCakePHPのそっけなくつまらないテキストだらけのページが表示されるだけだ。

しかもやたら巨大なバナーまで表示してくれるから殺意が芽生えるかもしれないが、まぁそのくらいは我慢しようじゃないか。


CakePHPの仕組みとして、デフォルトだと、コントローラの指定がなければ自動的にPagesコントローラが動くようになっている。つまりPagesコントローラ用のビューになにかHTMLをおけば、それを表示させることができる。確認用にいちいちコントローラ、モデル、ビューを生成する必要はないわけだ。

ということで、前回セットしておいたBootstrapテーマは一旦おいとき、まずは独自のHTMLを表示させようじゃないか。

まずはテキストファイルをhome.ctpという名前で作成し、以下の場所に設置する。

/app/View/Pages/home.ctp

中身はこんな感じでいいだろう。

<h1>workgift</h1>
<h2>働きたくない俺に支援を!</h2>
<p>おひとり様105万円から</p>
<p>10回やると必ずコンプ可能なガチャを1度プレイする権利がもらえます!</p>
<p>支援金で海外旅行と麻雀と飲み会やって、新しいMacBookProを買います!</p>

さて、この状態でブラウザをリロードしてみると、こういう画面になったはずだ。


別に『全く新しいサービス』ってわけでもないし、そもそもあとで『ごめん俺社会人でもなんでもなかったただのヒキニートのキモメンでごめんプペポ!』と炎上後に謝罪する予定も考えられるし、俺のことが大好きな女子が下半身で考えたサービスってわけでもないので、中身はどうでもいから無難なものにしておこう。今回はとても紳士な内容にしておいたから夜も安心だ。

さて、これで、コントローラもモデルも何もいじらないで、好きなHTLMを表示することができた。


■終わりだ!

次回は、前回までに作っておいたInitializrフォルダの中にあるテーマを、このドキュメントルートに反映させてみようと思う。

その他にも、色々と設定なんかもしてみたい。

では終わり。