【BLOCS】select2で動的メニューを作る

はじめに

BLOCSはLaravelで使えるテンプレートエンジンです。こちらで、BLOCSを使って簡単な本管理アプリを作ってみました。本の新規登録、編集、一覧表示はできましたが、それぞれの本にタグをつけたいので、今回はselect2を使っていい感じのプルダウンを作ります。

select2はプルダウンをちょっと便利にするJavaScriptのライブラリです。select2を使えば、プルダウンの項目を検索や複数選択することができます。また、オプションを指定することで、自由入力で項目を追加することもできます。select2を使って、本管理アプリに以下の2つの機能を追加します。

1. 過去に入力したタグを検索、複数選択する
2. 自由入力で新しいタグを追加する

開発は以下の3ステップですすめます。では、作っていきましょう。開発したLaravelアプリのソースはGitHubで公開していますので、全体のソースはこちらをご参照ください。

1. 新規登録画面、編集画面にselect2を導入
2. 過去に登録したタグを取得
3. プルダウン項目を追加

select2を導入する

（管理画面では不要）composerでautoincludeをインストールします。BLOCSも一緒にインストールされます。

composer require blocs/autoinclude

タグのフォーム項目にclass="select2"を付与してください。これだけで、検索と複数選択、自由入力で項目追加ができるプルダウンが作れます。今回は複数選択したいので、multipleを付与しました。複数選択で複数のvalueが入るので、nameをtags[]とします。これで、select2の導入は完了です。

create.blocs.html

<div class="col-4">タグ</div>
<div class="col-8">
    <select class="ai-select2" name="tags[]" multiple="multiple" style="width:100%"></select>
</div>

（管理画面では不要）BLOCSはclassを参照して、select2の実行に必要なJavaScriptを自動で読み込みます。JavaScriptを差し込む場所はdata-includeで指定します。

create.blocs.html

<!-- data-include="auto" -->

過去に登録したタグを取得する

次に、過去に登録されたタグを取得するメソッドを作りました。BLOCSでは、\Blocs\Option::addでプルダウンに項目を追加できます。Eloquentで$book_tagsに過去に登録されたタグを取得して、$book_tag->nameをプルダウンに追加しています。

app\Http\Controllers\BookController.php

    private static function option_tags($option_name)
    {
        $book_tags = BookTag::select('name')->distinct()->orderBy('name')->get();
        foreach ($book_tags as $book_tag) {
            \Blocs\Option::add($option_name, $book_tag->name);
        }
    }

\Blocs\Option::addでプルダウン項目を動的に追加できる

プルダウン項目を追加する

最後に、新規登録画面でフォームの項目名tagsを指定して、プルダウン項目を追加しました。同様に編集画面にも追加します。これでいい感じのプルダウンが完成しました。

app\Http\Controllers\BookController.php

    public function create()
    {
        $book = new Book();
        self::option_tags('tags');

        return view('books.create', compact('book'));
    }

編集画面では、登録されたタグを選択した状態で表示します。選択されたvalueをtagsに配列で入れておけば、BLOCSがプルダウンを選択状態にします。以下の例では、tagLabelsが選択されたvalueを配列で返します。

app\Http\Controllers\BookController.php

    public function edit(int $id)
    {
        $book = Book::findOrFail($id);
        $val = compact('book');

        if (empty(old())) {
            $val = array_merge($val, $book->toArray());
            $val['tags'] = $book->tagLabels();
        }

        self::option_tags('tags');
        return view('books.edit', $val);
    }

おわりに

今回は、BLOCSとselect2でいい感じのプルダウンを作りました。JavaScriptのライブラリを活用することで、ユーザビリティーはすごく良くなりますね。BLOCSのデータ属性の詳しい説明はこちらで。最後まで読んでいただき、ありがとうございました！

関連サイト

1. サービスサイト
2. GitHub
3. Packagist