Bootstrap | takeHo（たけほ）のへなちょこ台帳 https://blog.takeho.com いわゆる自由帳ってところです。 Thu, 28 Nov 2024 04:31:18 +0000 ja hourly 1 https://wordpress.org/?v=6.6 https://blog.takeho.com/wp-content/uploads/2024/08/icon-150x150.png Bootstrap | takeHo（たけほ）のへなちょこ台帳 https://blog.takeho.com 32 32 Bootstrap卒業宣言！Yii2でZurb Foundationを使う具体的ステップ！ https://blog.takeho.com/declaration-of-bootstrap-graduation-concrete-steps-to-use-zurb-foundation-in-yii2/ https://blog.takeho.com/declaration-of-bootstrap-graduation-concrete-steps-to-use-zurb-foundation-in-yii2/#respond Sun, 24 Nov 2024 03:25:00 +0000 https://blog.takeho.com/?p=550 Yii2 FrameworkでデフォルトのBootstrapを無効化し、Zurb Foundationを導入する具体的な方法を紹介します。Composerでのインストールからアセットバンドルの設定、レイアウトでの適用、JavaScriptの初期化までをステップバイステップで解説。Foundationを使用してUIをカスタマイズし、モダンなデザインを実現する手順を簡潔にまとめています。

Foundationをインストールする

FoundationをインストールするためにComposerを利用します。

# composer require zurb/foundation

または、直接FoundationのCSS/JSファイルをダウンロードしてweb/cssやweb/jsディレクトリに配置します。

Bootstrapを無効化する

Yii2アプリケーションでは、デフォルトでBootstrapが読み込まれている可能性があります。これを無効にするには、アプリケーションの設定ファイルconfig/web.phpを編集します。

'components' => [
    'assetManager' => [
        'bundles' => [
            'yii\bootstrap\BootstrapAsset' => false,
            'yii\bootstrap\BootstrapPluginAsset' => false,
        ],
    ],
],

これにより、Bootstrapのアセットが読み込まれなくなります。

Foundationアセットを登録する

独自のアセットバンドルを作成してFoundationを登録します。

FoundationAssetを作成

以下のようなPHPファイルをfrontend/assets/FoundationAsset.php（または適切な場所）に作成します。

namespace frontend\assets;

use yii\web\AssetBundle;

class FoundationAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/foundation.min.css', // FoundationのCSSファイル
    ];
    public $js = [
        'js/foundation.min.js', // FoundationのJSファイル
    ];
    public $depends = [
        'yii\web\YiiAsset',
    ];
}

Foundationのファイルパスは、ダウンロード先に応じて変更してください。

AppAssetで読み込む

frontend/assets/AppAsset.phpにFoundationAssetを依存関係として追加します。

namespace frontend\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css', // その他のCSS
    ];
    public $js = [
        // 必要なJSファイル
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'frontend\assets\FoundationAsset', // 追加
    ];
}

FoundationのグリッドやUIコンポーネントを使用する

レイアウトファイルやビューでFoundationのクラスや構造を利用します。

<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>

<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="cell small-12 medium-8">
            <?= $content ?>
        </div>
    </div>
</div>

<?php $this->endBody() ?>
</body>
</html>

FoundationのJavaScriptを有効化

FoundationのJavaScriptコンポーネント（例えばモーダルやタブ）を利用するには、初期化スクリプトを追加します。

初期化スクリプト

views/layouts/main.phpのフッター部分に以下を追加します。

<script>
    $(document).foundation();
</script>

Foundationに基づいたスタイリングとレイアウトの調整

ビューでBootstrapのクラスを使用している箇所をFoundationのクラスに置き換えます。例えば、rowをgrid-xに、col-md-6をcell medium-6に変更します。

これで、Yii2アプリケーションでFoundationを利用する準備が整います！

Foundationを使うメリット

Foundationを使うメリットとして挙げられるのは、「よりプロフェッショナルなデザイン表現が可能で、競合と差をつけられること」です。特に、カスタマイズ性やモダンなUIコンポーネントが豊富で、デザイン性を重視したいプロジェクトに最適です。

  1. カスタマイズ性の高さ
    Foundationは柔軟なグリッドシステムやモジュール構造を持ち、デザインや機能をプロジェクトのニーズに応じて簡単に調整できます。
  2. レスポンシブデザインへの最適化
    Foundationはモバイルファーストのアプローチを強化しており、細かいレスポンシブ調整が可能です。
  3. 現代的なUI/UXコンポーネント
    Foundationは「モダンな見た目」のコンポーネントが多く、Bootstrapよりも洗練されたデザインを提供します。
  4. 差別化されたデザインが可能
    Bootstrapは多くのプロジェクトで使われているため、見た目が似てしまうことが多いですが、Foundationを使うことで独自性のあるUIが構築できます。
  5. 拡張性と開発者支援
    Foundationは開発者向けツール（例えばモーションUIやアクセシビリティ機能）が充実しており、デザイナーや開発者にとって使いやすいフレームワークです。
The most advanced responsive front-end framework in the world. | Foundation
get.foundation
 ]]> https://blog.takeho.com/declaration-of-bootstrap-graduation-concrete-steps-to-use-zurb-foundation-in-yii2/feed/ 0