動的カスタムフィールド ハンズオン資料
こちらはa-blog cms Training Camp 2015 Autumn で開催される「動的カスタムフィールド」のハンズオン資料になります。
カスタムフィールドをカスタムフィールドで作成する！
a-blog cmsではカスタムフィールドをテンプレートに書くことで簡単に作成することができますが、 チェックボックスの選択肢を変更したい場合などにテンプレートを変更しないといけません。
そこでこのハンズオンでは、動的にカスタムフィールドの選択肢の値を変更できるようにしてみたいと思います。
カスタマイズ
今回はsite2015の物件情報の最寄り駅選択肢を動的化していくので、まずはsite2015テーマをインストールしてください。
カスタムフィールドのメタ情報の準備
まずは、選択肢のカスタムフィールドを作っていきます。今回はブログのカスタムフィールドを利用してみたいと思います。
/themes/site2015/admin/blog/field.html に以下のコードを追加します。
<h2 class="acms-admin-admin-title2">最寄り駅</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
<thead class="acms-admin-hide-sp">
<tr>
<th class="acms-admin-table-left acms-admin-admin-config-table-item-handle"> </th>
<th class="acms-admin-table-left">駅名</th>
<th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
</tr>
</thead>
<tbody>
<!-- BEGIN eki_list:loop -->
<tr class="sortable-item">
<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
<td>
<input type="text" name="eki[{i}]" value="{eki}" class="acms-admin-form-width-full"/>
</td>
<td><input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" /></td>
</tr>
<!-- END eki_list:loop -->
<tr class="sortable-item item-template">
<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
<td>
<input type="text" name="eki[]" value="" class="acms-admin-form-width-full"/>
</td>
<td><input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" /></td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="4"><input type="button" class="item-insert acms-admin-btn-admin" value="追加" /></td>
</tr>
</tfoot>
</table>
<input type="hidden" name="@eki_list[]" value="eki" />
<input type="hidden" name="field[]" value="eki" />
<input type="hidden" name="field[]" value="@eki_list" />カスタムフィールドグループを使い自由に駅名を追加できるようにしてみました。
カスタムフィールドの動的化
では実際に最寄り駅の選択肢を動的化していきます。
/themes/site2015/admin/entry/realestate.html の 最寄り駅の箇所を以下のように設定します。
<td><!-- BEGIN_MODULE Blog_Field -->
<select name="station">
<option value="">未設定</option><!-- BEGIN eki:loop -->
<option value="{eki}"\{station:selected#{eki}\}>{eki}</option><!-- END eki:loop -->
</select>
<input type="hidden" name="field[]" value="station" />
<!-- END_MODULE Blog_Field -->
</td>ここでポイントは
<option value="{eki}"\{station:selected#{eki}\}>{eki}</option>になります。
変数の中かっこの前にバックスラッシュが付いています。 バックスラッシュが付いた変数はバックスラッシュ一個につき、一回だけ変数として解釈されない特徴があり、その後にバックスラッシュは削除されます。（この事を変数をエスケープするといいます）
また、モジュールは内側から実行される特徴を踏まえると以下のような動きになります。
テンプレート解決の流れ
- 内側にあるBlog_Fieldが実行されます。{eki}という変数が解決されて駅名が入ってきます。
- バックラッシュがある変数は解決されないのでBlog_Fieldが動いた段階では以下のようなソースになります。
<option value="あの駅"{station:selected#あの駅}>あの駅</option>見覚えがあるソースになりました。
このように変数をエスケープする事によりモジュールを使って動的にカスタムフィールドを作成する事ができます。
まとめ
- エスケープの回数だけ変数として解釈されない
- モジュールは内側から実行される
課題1
この課題では物件検索の最寄り駅を、動的カスタムフィールドに対応する事をやってみてください。
ヒント：テンプレートは /themes/site2015/include/parts/map.html です。
課題2
ハンズオンは以上で終了となりますが、物足りないという方には、お問い合わせに採用情報のエントリーに紐付いたプルダウンを追加する実装を用意しています。
ヒント1：モジュールIDを作ることになります
ヒント2:作るのはエントリーリストのモジュールです
ヒント3 :カテゴリーは採用情報を使います
以上で課題2も終了になります。お疲れ様でした！
