Help us understand the problem. What is going on with this article?

Yii 2 で Html ヘルパーを作ろう

More than 5 years have passed since last update.

Html ヘルパーをたくさん使っていると、そのうちに面倒な記述がでてきて自分で作りたくなるかと思います。ということで作ってみましょう!

アイコンを表示させる Html::icon() を作る

Twitter Bootstrap の 3.x 系だとアイコンを表示させるためには以下のような書き方になります。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

それを <?= Html::icon('search') ?> で記述できるような形にしてみます。Twitter Bootstrap のアイコンだけじゃ面白くないので Font Awesome にも対応させてみます。

記述方法を調べる

Twitter Bootstrap

  • span タグで glyphicon glyphicon-xxxxx な class 属性
  • araia-hidden 属性が true
  • その他の拡張はなし

Font Awesome

  • i タグで fa fa-xxxxx な class 属性
  • 拡張としてアイコンの大きさを変えたり、位置を替えたり、いろいろできる (e.g. fa-lg, pull-left)

Font Awesome の i タグは正しくは span のほうがいいので span タグに統一。Yii 2 は Twitter Bootstrap がデフォルトなので引数もそれに合わせるような形を取る。そんな感じでいきましょう。

Font Awesome をダウンロード

Composer でダウンロードします。ついでに Font Awesome 用のアセットも作ります。

composer.json
{
    "require": {
        "bower-asset/components-font-awesome": "*"
    },
}
composer update
FontAwesomeAsset.php
namespace app\assets;

use yii\web\AssetBundle;

class FontAwesomeAsset extends AssetBundle
{
    public $sourcePath = '@bower/components-font-awesome';

    public $css = [
        'css/font-awesome.min.css',
    ];
}
AppAsset.php
use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{

    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'app\assets\FontAwesomeAsset', // 追加
    ];
}

Html::icon() を作ろう

先にテストを書いておきます。assertSame() の左側の引数は期待している値。右側は実際の値。

HtmlTest.php
namespace tests\codeception\unit\helpers;

use yii\codeception\TestCase;
use yii\helpers\Html;

class HtmlTest extends TestCase
{
    public function testIcon()
    {
        $this->assertSame('<span class="glyphicon glyphicon-search" aria-hidden="true"></span>', Html::icon('search'));
        $this->assertSame('<span class="fa fa-search" aria-hidden="true"></span>', Html::icon('search', 'fa'));
        $this->assertSame('<span class="fa fa-search fa-lg" aria-hidden="true"></span>', Html::icon('search', 'fa', 'fa-lg'));
    }
}

続いて \yii\helpers\BaseHtml を継承した Html クラスを作成して icon メソッドを追加していきます。作成場所はどこでもかまいませんが今回は app/helpers にします。それと名前空間ですが app\helpers ではなく yii\helpers にしてください。

Html.php
namespace yii\helpers;

class Html extends \yii\helpers\BaseHtml
{
    /**
     * アイコンを生成
     * @param string $name アイコン名
     * @param string $type アイコンの種類 (e.g. twbs, fa)
     * @param string $append 追加したいもの (e.g. fa-lg, fa-fw)
     * @return string
     */
    public static function icon($name, $type = 'twbs', $append = '')
    {
        $options['class'] = 'glyphicon glyphicon-';

        if ($type === 'fa') {
            $options['class'] = 'fa fa-';
        }
        $options['class'] .= (string) $name;

        if ($append !== '') {
            static::addCssClass($options, (string) $append);
        }
        $options['aria-hidden'] = 'true';

        return static::tag('span', '', $options);
    }
}

メソッドの作り方は \yii\helpers\BaseHtml のメソッドを眺めると多分わかるかと思います。

最後にエントリースクリプトに以下を追加します。

index.php
// ...
require(__DIR__ . '/../vendor/yiisoft/yii2/Yii.php'); // この行以降に追加する
Yii::$classMap['yii\helpers\Html'] = '@app/helpers/Html.php';
// ...

Yii 側でクラスマップがロードされたあとに独自のものと差し替える形です。ちなみにエントリースクリプトに書くと index-test.php にも追加しないといけないので自分は config/common.php (config/web.php と console.php の共通部分をまとめたファイル) を作成して、そこに書いてます。

これで準備完了です。

こう書くと
<?= Html::icon('search') ?>
こう生成される
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
こう書くと
<?= Html::icon('search', 'fa', 'fa-lg') ?>
こう生成される
<span class="fa fa-search fa-lg" aria-hidden="true"></span>

短く書けるだけでなく、CSS Framework のバージョンが上がったりで書き方が変わった場合でも、このメソッドの中身を修正するだけでいいので楽ちんです。どんどん独自のヘルパーを作っていきましょう!

関連リンク

Yii Guide: Helpers > Overview

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした