Zenn
😀

【初めてのSymfony2】bootstrapを導入してみる

2022/11/28に公開
PHP
Symfony
tech

(正直)あんまり乗り気ではないが、symfony2を取り扱ってみることにした時のメモ
bowerを使ってインストールしてみる

環境

vagrantで構築

  • Guest OS
    • CentOS6.4 x86

事前準備に必要なもの

出来上がるもの

参考にしたサイト

まずはbowerをいれる

インストールはnpm経由でサクッと

/path/to/leaning-symfony2
sudo npm install -g bower

composerでSpBowerBundleをインストール

/path/to/leaning-symfony2
composer require sp/bower-bundle

composer.jsonのpost-install-cmdとpost-update-cmdに追加する

追加しましょう

/path/to/leaning-symfony2/composer.json
{
   "scripts": {
       "post-install-cmd": [
           "Sp\\BowerBundle\\Composer\\ScriptHandler::bowerInstall"
       ],
       "post-update-cmd": [
           "Sp\\BowerBundle\\Composer\\ScriptHandler::bowerInstall"
       ]
   }
}

SpBowerBundleを有効にする

基本はSpea/SpBowerBundleのインストール手順の写経です

/path/to/leaning-symfony2/app/Applernel.php
<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Sp\BowerBundle\SpBowerBundle(),
    );
}

app/config/config.ymlにSpBowerBundleの設定を入れる

いれましょ

/path/to/leaning-symfony2/app/config/config.yml
sp_bower:
	# bowerのPATH
    bin: /usr/local/ndenv/shims/bower
    install_on_warmup: true
    bundles:
		 # YourBundleは使用したいBundle名を
        YourBundle: ~

bower.jsonを入れたいBundleのconfigを追加する

/path/to/leaning-symfony2
# src/AcmeDemoBundle/Resources/config/bower/bower.json
{
    "name": "acme-demo-bundle",
    "dependencies": {
        "bootstrap": "latest"
    }
}

assetのsymlinkを貼り直す

忘れずに

/path/to/leaning-symfony2
php app/console assets:install --symlink

symfonyのcacheをクリアする

忘れずに

/path/to/leaning-symfony2
php app/console cache:clear

layoutファイルにbootstrapを追加してみる

/path/to/leaning-symfony2/app/Resources/views/base.html.twig
# app/Resources/views/base.html.twig
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
          {% stylesheets
              "@bootstrap_css" %}
              <link rel="stylesheet" href="{{ asset_url }}" />
          {% endstylesheets %}
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
          {% javascripts
              "@bootstrap_js" %}
              <script src="{{ asset_url }}"></script>
          {% endjavascripts %}
        {% endblock %}
    </body>
</html>

app/config/config.ymlにasseticのbudleの項目を追加する

app/config/config.yml
assetic:
     bundles:        [ AcmeBundle ]

上記手順でbootstrapが導入出来たー。わーい

Discussion