<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KRS8CM');</script>

【a-blog cms】カスタムフィールドの変数を入れ子にする

a-blog cmsで、変数を入れ子にしたい場合があります。
例えば、「エントリーにラジオボタンで選択できるカスタムフィールドを付けたい。そして、その一覧も別のカスタムフィールドで追加できるようにしたい」というようなときなどです。

入力側を作る

まず、a-blog cmsの管理画面から、コンフィグ>カスタムフィールドメーカーを選び、カスタムフィールドグループを作成します。
以下の例の場合、次のような設定で作成しています。

group名choices
groupタイトルラジオボタンの選択肢
typeテキスト
タイトル選択肢
フィールドmyOption
<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">&nbsp;</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 choices:loop -->
		<tr class="sortable-item">
			<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
			<td>
				<input type="text" name="myOption[{i}]" value="{myOption}" 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 choices:loop -->
		<tr class="sortable-item item-template">
			<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
			<td>
				<input type="text" name="myOption[]" 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="3"><input type="button" class="item-insert acms-admin-btn-admin" value="追加" /></td>
		</tr>
	</tfoot>
</table>
<input type="hidden" name="@choices[]" value="myOption" />
<input type="hidden" name="field[]" value="myOption" />
<input type="hidden" name="field[]" value="@choices" />

これを、ブログのカスタムフィールドとして表示できるようにし、管理画面で必要な値を入力します。

選択肢として表示する

次に、ここで入力したものを、エントリーのカスタムフィールドに選択肢一覧として表示させます。
同じくカスタムフィールドメーカーでひな形を作って、次のように修正します。

<table class="entryFormTable acms-admin-table-entry"><!-- クラス名は任意 -->
	<tr>
		<th>ブログのカスタムフィールドで設定した選択肢</th>
		<td>
			<!-- BEGIN_MODULE Blog_Field --><!-- BEGIN choices:loop -->
			<label class="acms-admin-form-radio"><input type="radio" name="myChoice" value="{myOption}"\{myChoice:checked#{myOption}\} /><i class="acms-admin-ico-radio"></i>{myOption}</label>/
			<!-- END choices:loop --><!-- END_MODULE Blog_Field -->
			<input type="hidden" name="field[]" value="myChoice" />
		</td>
	</tr>
</table>

この際のキモになるのが、\{myChoice:checked#{myOption}\}の部分です。
これは、このフィールドの値とラジオボタンの値が等しい場合、そのラジオボタンをチェック状態にする処理です。

よくみると変数({}で囲まれたもの)が入れ子になっていて、外側に「\」がついています。これは、外側の{}をエスケープする記述です。
まず内側の{myOption}の部分に値を入れた後、{myChoice:checked#...の部分で、checkedの処理を行うという流れです。

これは、変数だけではなく、モジュールでも可能なようです。
いずれにしても、内側に動的に処理するものがある場合、その外側をエスケープすれば、動的処理の結果を使って外側の処理が可能になります。
https://gist.github.com/steelydylan/3dc9b71fa824e888e4e9


<script type="text/javascript" id="zsiqchat">var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq || {widgetcode: "siq61aecceb7ad0c24af4e4670187f03564ddd615eb71422e1b7169309fa9b25e89", values:{},ready:function(){}};var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;s.src="https://salesiq.zohopublic.com/widget";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);</script>