エフトラEFOでは、入力支援機能の設定変更をいつでもお客さま側で変更していただけるように、専用の管理画面をご用意しています。
EFO管理画面は、HTMLの基本的なことをご理解いただいていれば、画面上のクリック操作でほとんどの設定が完了できるようになっています。
一方で、一部の機能の設定では、特定の要素に対して処理を実行するなど、個別の設定が必要になります。その設定で使う「jQuery（ジェイクエリー）」の「セレクタ」と言うものについて今回は説明します。この記事でセレクタを知っていただき、より細かな入力支援機能の設定に活かして完了率アップにつなげてください。
jQueryとは
JavaScript用の定番ライブラリーです。（エフトラEFOのEFOタグは、このjQueryをベースに動作しています）
セレクタとは？
ページを表示した際、ページ内の特定の要素（DOMと呼ばれます）に対してなんらかの処理を行う準備として、まず対象である要素を指定する必要があります。セレクタは、ページ内の要素を指定するためにjQueryに用意された機能です。
セレクタを使うと何がいいか？
このセレクタを使うと簡単にDOM要素が指定できます。
例えば、name属性が「email」の入力欄が、
<input type=”text” name=”email”/>
とHTMLで記述されていたとすると、これをJavaScriptで指定するための記述は、以下のようになります。
$(‘input[name=”email”]’)
この「input[name=”email”]」の部分がjQueryのセレクタです。（エフトラEFOでも「input[name=”email”]」の部分を管理画面に登録します）
jQuery以前の記述ではJavaScriptで要素を指定する方法はもっと記述量が多かったりブラウザの種類ごとに処理を書き分けるなどの面倒があリましたが、jQueryの登場によってブラウザの種類やバージョンに依存することなく上記のように簡潔に同じ書き方で指定できるようになりました。
エフトラEFOのどこでセレクタを使うか？
例えば離脱ブロック機能や、ガイドナビゲーション機能など、一部の入力支援機能の設定で、対象の要素を指定することができます。その対象の要素の指定に、jQueryのセレクタを使います。標準的な入力支援機能の内容では、セレクタを使わなくても設定できますが、後述のような細かい設定を行う場合には、必要になります。
これさえ覚えればOK
セレクタには、あらゆるHTMLの要素指定に対応できるよう様々な指定方法が用意されています。ここでは、エフトラEFOの初期設定でよく使われるセレクタの記述方法の５つをご紹介します。この５つを覚えていただき、組み合わせて使えば、エフトラEFOの設定ではたいていの場合に対応できると思います。（ケースとしては非常にまれですが、id属性やclass属性が適切に指定されていない場合は、その限りではありません）
- 「#」を使って、id属性で指定
- 「.」を使って、class属性で指定
- name属性で指定
- 親子関係を使って指定（>を使うと直接の親子、使わないと子孫の該当要素すべて）
- カンマを使って、複数の要素を同時に指定
これらは組み合わせて使うことも可能です。必要に応じて目的の要素が一意に（唯一）指定できるような記述にしましょう。
具体的なHTMLを見ながら試してみよう
例えば、以下のようなHTMLがあったとします。（一部抜粋）
<div id=”main”>
<form name=”contact”>
メールアドレス：<input name=”email” id=”idName” class=”className” type=”text”/>
<input type=”submit” value=”送信”/>
</form>
<a href=”#top” name=”top” id=”toTop”>TOPへ</a>
<a href=”index.html” id=”toHome”>home</a>
</div>
この中で赤字にしたメールアドレスの入力欄（<input name=”email” type=”text”/>）を指定する方法は、１〜４の方法でそれぞれ以下のようになります（どの記述でも結果は同じです）
１）#を使って、id属性で指定
#idName
２）.を使って、class属性で指定
.className
３）name属性で指定
input[name=”email”]
４）親子関係を使って指定
form > input[name=”email”]
また、青字にした、複数の<a>タグを指定するには、以下のように書けます。
５）カンマを使って、複数の要素を同時に指定
#toTop,#toHome
入力支援機能での例
離脱ブロック機能の除外設定
離脱ブロック機能をONにした場合、特に追加で設定をしなくても、送信ボタンの要素には、離脱ブロックのダイアログが表示されない仕様になっています。
具体的には、type属性が「image」「submit」になっているinput要素（<input type=”image”/>または<input type=”submit”/>）です。
これ以外の要素については、クリック時にダイアログが出るため、送信ボタンが<a>タグで記述されている場合や、ダイアログを出したくない要素については、その要素を指定するセレクタの記述を、EFO管理画面に登録する必要があります。
（入力ページのHTML記述によっては、離脱ブロック除外が効かないケースがあります。除外設定を行う場合は、設定後、本番反映する前に、EFO管理画面プレビューまたは検証環境のフォームで動作を検証してください）
入力成功サイン
入力成功サインのマークの表示位置の指定に、セレクタを使います。指定の要素をセレクタで指定して、その要素の下側または右側に表示されるようになっています。
スマホのガイド文言
ガイドナビゲーションは、入力についてのメッセージや、残り必須項目数をリアルタイムに伝えるための機能ですが、ある程度の大きさを持つ要素が、入力ページに常に重なることになるため、特にスマートフォンには向かない場合があります。その場合のために、ページ内の特定の要素の直後に表示するという指定ができます。
サブミットブロック
送信ボタンをクリックして入力ページに再度戻されてガッカリということにならないように、入力を満たすまで本来の送信ボタンを隠し代替画像を表示するのがサブミットブロック機能です。サブミットブロック機能を使うには、本来の送信ボタンを指定するセレクタの記述を登録する必要があります。
注意点
ゆるい設定だと複数の要素に動作してしまうので、用意したセレクタの記述が、目的の要素だけを指定できていることを事前に必ず確認してから登録してください。
セレクタの記述が正しいかの確認方法
ブラウザの開発者ツールのコンソールを使ってセレクタの記述を確認する方法があります。事前に目的の要素が取れるかを確認していからエフトラEFOに登録してください。開発者ツールの活用法は、また近いうちに、別途このブログでご紹介します。
いかがだったでしょうか。
セレクタを使って、今まで以上に詳細な入力支援機能の設定を行い、エフトラEFOを活用してください。
