CakePHP3にBootstrapをインストールする方法

2017/04/24

最近はWeb開発に熱中しています。使っているのはCakePHP３です。

＠Bootstrap3
CakePHP3にBootstrap３をインストールしようとしたところ、意外と手こずりました。

なので、今日は、CakePHP3にBootstrap3をインストールするやり方をご紹介しようと思います。

BootstrapのファイルをCakePHP3に入れるだけではダメ

Bootstrapをダウンロードすると、中にCSS、JS、Fontというフォルダがあると思います。これらをCakePHP3のwebroot以下に入れるだけでは、インストールは完成しません。

なぜダメなのかというと、ヘルパーの機能の一部を使うことができないからです。

例えば、入力フォームを作りたいときは、フォームヘルパーを利用しますよね。

<?=$this->Form->create(null,[
        'type' => 'post',
        'url' => ['controller' => 'Helo', 'action' => 'index']]
    ) ?>
<?=$this->Form->text('text1') ?>
<?=$this->Form->submit('OK') ?>
<?=$this->Form->end() ?>

これでフォームが作成されますが、 Bootstrapのフォームは作成できません。

これを改善するためには、プラグインを使う必要があります。

今回は、Bootstrap-UIというプラグインを使用することにします。

事前準備

CakePHP3はインストールしてある前提で解説します。

＠CakePHP3

インストールを行うにはComposerを使用します。

やり方がわからない人はグーグル先生に聞いてみてください。

やり方

順に説明いたします。

Bootstrapをダウンロード

まずは、Bootstrapをダウンロードします。

ダウンロードしたBootstrapをCakePHP3に入れる

ダウンロードしたBootstrapはCakePHP3に入れます。

入れるのは、webrootのCSSとJS以下のディレクトリにbootstrapというフォルダを作って、そこにファイルを入れましょう。

/-webroot-CSS-bootstrap-bootstrapのCSSファイル
          |              
          -JS-bootstrap-bootstrapのJSファイル

上みたいな感じでファイルを入れましょう。

Bootstrap-UIをインストール

次に、Bootstrap-UIをインストールしましょう。インストールするには、Composerを使用します。

composer require friendsofcake/bootstrap-ui:dev-master

CakePHP3がインストールされているディレクトリに移動して、上のコマンドを入力すれば完了です。

Bootstrap-UIのプラグインを読み込む

Bootstrap-UIを読み込む記述を追加します。

CakePHP3のconfig/bootstrap.phpというファイルがあると思います。

ここに、以下のように追記します。

Plugin::load('BootstrapUI');

これでおkです。

余談ですが、bootstrap.phpというファイル名は、今回使用するTwitter社のBootstrapとは全く関係ありません。

bootstrapには元々、IT用語で、コンピュータシステムの電源を入れてからOSを起動して利用可能な状態になるまで自動的に実行される処理を指します。

つまり、bootstrap.phpはCakePHPが最初の方に読み込むPHPファイルということになります。

AppViewでヘルパーのロードを行う

最後に、AppViewでBootstrapのヘルパーを読み込みを行うように記述します。

src/View/AppView.phpのinitializeメソッドに以下のように追記します。

public function initialize()
{
    $this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
    $this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
    $this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
    $this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
}

これですべての作業が完了です！

Bootstrapの使い方

使うときはヘルパーでBootstrapのCSSとJSファイルを読み込みます。

<?= $this->Html->css('bootstrap/bootstrap.css') ?>
<?= $this->Html->script('bootstrap/bootstrap.js') ?>

まとめ

調べるのに意外と時間がかかりました。

フレームワークは環境が整えば開発が捗るんですが、整えるまでが面倒ですね〜。(^_^;)

以上です！

ノシ

- 技術系