LINE拡張サービスのやつ。
オリジナルフォームでのタグ付与について
ECAIはタグ管理してなんぼのところがあるのでコンテンツをしっかり作り込むとタグ付与のポイントはかなり多くなる。特にオリジナルフォームはユーザーの属性が反映されるわけで、それをタグで管理できたらめっちゃいいよねってことになる。ということはフォーム作成が結構めんどくさいことになる。
基本的な説明は省いて趣旨に関する要点だけ。
オリジナルフォームは解答時にタグの付与ができる。タグは複数付与できる。フォームはhtmlファイルを編集して作る。書式の決まりはあるものの、input周りのルールさえ守れば後は好きにできる。標準でjQueryが読み込まれている。「これしかできない」じゃなく「最低限の要素だけ構築してある」だけなので、自由度がかなり高い。
公式に活用ガイドは用意されてるんだけど、頑張って作ってる感じも見受けられるんだけど、自由度に耐えられるほどのボリュームはない感じがある。
公式に頼りきれないというか、なんというか。多少jQueryをかじった人間であれば、こういうこともできるよねってことがどんどん出てきちゃう。
今回やりたいこと
checkboxがある。選択項目それぞれにタグが用意されていて、チェックしたものに紐づくタグをすべて付与する。
活用ガイドにはタグは複数付与できるよとかタグの変更方法の案内はあるけど追加することについて掘り下げた内容が薄かった。
- #add_tagsのvalueが付与するタグのタグコードになる
- タグコードをカンマ区切りで追加することで複数タグを付与できる
これを守って組んでいく。
組む
頑張って説明とか解説を挟むよりもソースコードを出すほうが早い気がする。
選択肢とタグの準備
タグ付与のために予めタグを作っておく必要がある。タグを作るとコードが生成されるので、それを控える。どのタグにどの選択肢が紐づくかを決める。ということで以下の内容で進めていく。
| 選択肢 | タグコード |
|---|---|
| value01 | tagcode01 |
| value02 | tagcode02 |
| value03 | tagcode03 |
| value04 | tagcode04 |
フォーム
今回に関わる部分だけ。
<!-- 削除禁止 --><input type="hidden" id="add_tags" name="add_tags" value="***"><!-- 削除禁止 --><!-- タグ付与 -->
<input type="hidden" name="col_★_title" value="タイトル">
<dt>タイトル<span>*</span></dt>
<dd>
<ul>
<li><label><input type="checkbox" name="col_★[]" class="validate[required]" value="value01" data-prompt-position="topLeft"><span>value01</span></li>
<li><label><input type="checkbox" name="col_★[]" class="validate[required]" value="value02" data-prompt-position="topLeft"><span>value02</span></li>
<li><label><input type="checkbox" name="col_★[]" class="validate[required]" value="value03" data-prompt-position="topLeft"><span>value03</span></li>
<li><label><input type="checkbox" name="col_★[]" class="validate[required]" value="value04" data-prompt-position="topLeft"><span>value04</span></li>
</ul>
</dd>普通に組む。input内のnameとvalueが重要なのでそのへんは間違えないよう注意。
jQuery
$(function(){
var selectTagArray = {
'value01':'tagcode01',
'value02':'tagcode02',
'value03':'tagcode03',
'value04':'tagcode04',
};
$('form').submit(function(){
var addTag = '***';
$('input[name="col_★[]"]:checked').each(function(){
var selectValue = $(this).val();
addTag = addTag + ',' + selectTagArray[selectValue];
});
$('input#add_tags').val(addTag);
//alert(addTag);
})
})選択肢のvalueとタグコードを連想配列でまとめる。submit時に選択した内容を抽出して配列と照合して該当タグコードを追加するって内容。
追加するタグコードは配列として格納せずに文字列として直接繋いだ。どうせ貼るだけだし。
解答時に付与するタグの扱い
「 ***」に解答時に付与するタグを入れる。選択肢の付与だけで良いなら空欄にする。
動作の仕様上、解答時のタグ付与はjQuery内で付与することになる。というのは、必須項目が未入力でsubmitした場合のことを考えると、submit時にタグ付与の内容を一旦初期化しないといけない。なのでもうちょっと掘り下げて言うと「submit時に付与するタグコードを初期化して選択項目に応じて追加して#add_tagsに反映させる」っていう動き。
面倒な点
checkboxのvalueにタグコードを突っ込めば連想配列の手間がなくなるんだけどね。回答内容を見返しても意味がわからなくなるからこうするしかない。
拡張性のヤバさ
単純に選択内容と紐づけるだけでなく、選択内容によって条件分岐を作れば傾向によるタグ付与もできてしまうことになる。タグ付与に関しては大概のことができてしまうので凝ってくるとほんとにやばい。付与しまくったせいでタグが多すぎて引き継ぎとか管理とか訳分かんなくなるとか、タグの付与はできるけど削除はできないからミスったらどうしようとか、調子に乗った時にやらかすと怖いなって面も考えてみれば結構出てくる。タグの削除ができない点は結構な縛りになってくれて助かる面もあるけど。
程々にするのが良いです。
配列を使わないパターン
番外編。
$(function(){
$('form').submit(function(){
var addTag = '***';
$('input[name="col_★[]"]:checked').each(function(){
var selectValue = $(this).val();
if(selectValue == 'value01'){
selectTag = 'tagcode01';
}else if(selectValue == 'value02'){
selectTag = 'tagcode02';
}else if(selectValue == 'value03'){
selectTag = 'tagcode03';
}else if(selectValue == 'value04'){
selectTag = 'tagcode04';
}
addTag = addTag + ',' + selectTag;
});
$('input#add_tags').val(addTag);
alert(addTag);
})
})構築中に生まれた副産物。ifがめっちゃすごいことになってる。動くからこれでもいいんだけど、他のフォームで同じことがあった時に使い回すのがめんどくさい。なので、こっちよりは連想配列版で組んだほうが何かと楽になると思う。
まあタグ付与以外になにか絡むならこんな書き方もあるよねってことで、一応。
コメント