CakePHP3にTwitter Bootstrapを導入

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

CakePHP3 のプロジェクトに Twitter Bootstrap を導入する手順です。GitHub で探してみてスターが多かった CakePHP3 用プラグイン(friendsofcake/bootstrap-ui)を使ってみました。

Twitter Bootstrap
https://github.com/friendsofcake/bootstrap-ui

基本的に GitHub の README 通りに進めると OK でした。

スポンサーリンク

— 環境 —
CakePHP 3.1.1
PHP 5.5.19
BootstrapUI(friendsofcake/bootstrap-ui) 0.3.2
Twitter Bootstrap 3.3.5

Composer で friendsofcake/bootstrap-ui をインストール

Composer を使って friendsofcake/bootstrap-ui をインストールします。

CakePHP プロジェクトの vendor ディレクトリ以下に、friendsofcake/bootstrap-ui がインストールされます。Composer については以下を参考。

ComposerをMacにインストール(Homebrew/curl) | EasyRamble

Twitter Bootstrap を使うための設定

まず、config/bootstrap.php で friendsofcake/bootstrap-ui をロードする設定を行う。

config/bootstrap.php

続いて、AppView.php で BootstrapUI のヘルパー群をロードします。

src/View/AppView.php

なお、上記例ではコメントアウトしていますが、

の行を有効にして設定すると、レイアウトとして friendsofcake/bootstrap-ui にデフォルトで含まれている vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.ctp が使われます。

$layout に独自のものを利用する場合には、レイアウト用ビューファイルの head に以下を追加する。

今回は特に $layout の設定を行わないので、CakePHP3 でのデフォルトのレイアウトである src/Template/Layout/default.ctp を使う前提で以降を進めます。ということで、src/Template/Layout/default.ctp に bootstrap 用のアセットを読み込む設定を追加する。

src/Template/Layout/default.ctp

CakePHP のデフォルトの CSS 群が有効になっている場合は無効にしておきます。Bootstrap の CSS と衝突して表示がおかしくなるため。

src/Template/Layout/default.ctp 内の上記2行を削除しておく。

Twitter Bootstrap の Assets(css, js, font)を設置

friendsofcake/bootstrap-ui には Twitter Bootstrap の Assets ファイル(css, js, font)が含まれていないようなので、Bower でインストールします。

Bower のインストール・使い方については以下参照。

Bowerの使い方、JavaScriptパッケージの管理〜基本操作 | EasyRamble

CakePHP プロジェクト内の bower_components ディレクトリ以下に bootstrap, jquery がインストールされるので、webroot 以下に必要なファイル群をコピーする。

bower_components 以下を git 管理から外しておく。

.gitignore

このファイル群のコピーは README に書いてある手順通りなのですが、せっかく Bower で管理するのでもう少し上手い解決策があると良いかと感じる。ちなみに、Twitter Bootstrap のバージョンは、本日時点(2015/10/22)で 3.3.5 が入りました。

Twitter Bootstrap の UI をビューで確認

ビューを適当に作成します。コントローラーやルーティングも適宜作成。

src/Template/Users/add.ctp

Twitter Bootstrap の UI が適用されました。

Screen Shot 2015-10-22 at 16.20.41

以上で CakePHP3 への Twitter Bootstrap の導入は完了、意外と簡単でした。改めて思いますけれど Twitter Bootstrap 超便利です。

以下 Qiita 記事も導入方法が説明してあり、また他の CakePHP3 用の Twitter Bootstrap ライブラリも紹介してあり参考になります。

スポンサーリンク
私は Ruby on Rails の前は、PHP & CakePHP を使っていました(今も使いますけど)。PHP についてはオライリーの本を中心に軽く10冊以上は読み込みました。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!