Bootstrapを適用する – CakePHP3でサイト開発 Part.4


前回のおさらいと今回の概要
このシリーズは、CakePHP3 系で web サイトを開発する一連の流れの解説になります。前回は CakePHP3 の標準機能である DefaultPasswordHasher を利用してパスワードにハッシュ処理を実装しました。

連載第4回である本記事は、CakePHP3 のプラグインを利用して、標準の関数を使用したまま bootstrap ベースの Html を書き出す方法を記述します。

Bootstrap UI のインストール

以下 Url からプラグインをインストールしたいのですが、 Read Me に composer の詳しい情報が書いていないので、直接 Packagist から参照します。

Bootstrap UIプラグイン
Packagist の該当ページ

2016年7月28日現在でバージョンが 0.5.0 なので、これ以降のバージョンを利用するように composer.json を修正しました。この時点で記載さている内容は以下の通りです。

修正が完了したら、composer update してプラグインをインストールします。連載第一回で Plugin::loadAll(); は記述してあるので、インストールが完了したら自動的にプラグインが読み込まれます。

Bootstrap UI の利用

src/View/AppView.php を編集して、プラグインを適用します。公式マニュアルには AppView クラスの拡張元を UIView に指定することで単純利用する方法が書いてありますが、これを行ったところ後々レイアウトファイルを変更したい時に不可能なことがわかったので、以下のように読み込みしました。これで CakePHP の標準関数を利用すると bootstrap ベースのタグが書き出されます。

bower の環境構築

フロントエンド用のパッケージマネージャー、bower を利用して bootstrap 本体のインストールを行います。パッケージ管理は非常に重要なので、将来のためにこのタイミングで環境構築を行います。以下のツールが必要だったのでまずはそれらを仮想環境にインストールします。

bowerの設定と bootstrap のインストール

無事インストールされたら app/webroot 直下に .bowerrc ファイルを作成して、bower でインストールするディレクトリを指定します。私は assets ディレクトリ配下に配置したかったので、以下のようにしました。

保存が終わったら bower.json を作成します。bower init コマンドを実行すると色々聞かれて bower.json が作成されます。私は全て enter を押してファイルを作成しました。作成されたら、bower コマンドを利用して bootstrap 本体をインストールします。–save オプションは bower.json の dependencies に全てのエンドポイントを加えるらしく、また、マニュアルにいつも付与した方がいいと記載されていたので、マニュアルに従ってオプション付きでインストールコマンドを実行します。

bower の公式マニュアル インストールコマンドの解説

全て作成された json ファイルの内容は以下の通りです。

これで bootstrap が本体サイトに配置されました。今は保存されたことを確認するのみで、本体サイトに読み込む処理はのちほど行います。

bootstrap のテーマのインストール

github で bootstrap theme を探し、以下のものが使いやすいライセンスだったので利用することにしました。下記コマンドを実行してファイルがダウンロードされたことと、json ファイルが更新されたことを確認します。

bootstrap のテーマ

bootstrap 本体、bootstrap のテーマの読み込み

レイアウトファイルに以下を記述してサイトに読み込みます。

これで本体サイトに bootstrap と bootstrap のテーマが読み込まれました。

本番環境に反映

本番サーバにログインし、上記「bower の環境構築」で記述したコマンドを本番環境にも適用します。コマンドを実行したところ、Amazon linux 環境下で「パッケージ nodejs は利用できません。」とエラーが表示されました。これは、リポジトリが指定されていない場合に表示されるようで、以下のようにリポジトリを指定したら無事インストールできました。

bower の環境が準備できたら、本番環境下、bower.json ファイルのある場所で install コマンドを実行してファイルを配置します。

bootstrap 本体のバージョンについて聞かれたので、最新版を入れるように回答してファイルを配置しました。

終わりに
何か不明点があれば、サイト TOP のお問い合わせよりご質問ください。また、より CakePHP3 について詳しく知りたい方は定期的に Meetup イベントを開催しているので、お気軽にご参加ください。

CakePHP Meetup Tokyo のコミュニティページ

Enjoy!!