はじめに
BLOCSはLaravelで使えるテンプレートエンジンです。こちらで、BLOCSを使って簡単な本管理アプリを作ってみました。本の新規登録、編集、一覧表示はできましたが、それぞれの本にタグをつけたいので、今回はselect2を使っていい感じのプルダウンを作ります。
select2はプルダウンをちょっと便利にするJavaScriptのライブラリです。select2を使えば、プルダウンの項目を検索や複数選択することができます。また、オプションを指定することで、自由入力で項目を追加することもできます。select2を使って、本管理アプリに以下の2つの機能を追加します。
- 過去に入力したタグを検索、複数選択する
- 自由入力で新しいタグを追加する
開発は以下の3ステップですすめます。では、作っていきましょう。開発したLaravelアプリのソースはGitHubで公開していますので、全体のソースはこちらをご参照ください。
- 新規登録画面、編集画面にselect2を導入
- 過去に登録したタグを取得
- プルダウン項目を追加
select2を導入する
（管理画面では不要）composerでautoincludeをインストールします。BLOCSも一緒にインストールされます。
composer require blocs/autoinclude
タグのフォーム項目にclass="select2"を付与してください。これだけで、検索と複数選択、自由入力で項目追加ができるプルダウンが作れます。今回は複数選択したいので、multipleを付与しました。複数選択で複数のvalueが入るので、nameをtags[]とします。これで、select2の導入は完了です。
<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で指定します。
<!-- data-include="auto" -->
過去に登録したタグを取得する
次に、過去に登録されたタグを取得するメソッドを作りました。BLOCSでは、\Blocs\Option::addでプルダウンに項目を追加できます。Eloquentで$book_tagsに過去に登録されたタグを取得して、$book_tag->nameをプルダウンに追加しています。
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を指定して、プルダウン項目を追加しました。同様に編集画面にも追加します。これでいい感じのプルダウンが完成しました。
public function create()
{
$book = new Book();
self::option_tags('tags');
return view('books.create', compact('book'));
}
編集画面では、登録されたタグを選択した状態で表示します。選択されたvalueをtagsに配列で入れておけば、BLOCSがプルダウンを選択状態にします。以下の例では、tagLabelsが選択されたvalueを配列で返します。
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のデータ属性の詳しい説明はこちらで。最後まで読んでいただき、ありがとうございました！