エフトラEFOの一部の機能の設定で、HTML内の対象要素を指定するのに必要な「jQueryセレクタ」の記法の基本について、以前、当ブログで紹介いたしました。
エフトラEFOの設定に活用！jQueryセレクタ入門
https://f-tra.jp/blog/howto/8197
エフトラEFOで、セレクタを使って要素を指定する場合、もちろん設定後にEFO管理画面プレビューで動作が問題ないかを確認することでもOKですが、込み入った指定になるばあい、あらかじめセレクタで正しく対象の要素を指定できるかどうかを確かめておくと確実です。
セレクタの記法が正しいかどうかを確認するには、ブラウザの「開発者ツール」というものを使うのが便利です。今回は、記事末尾でも予告しましたが、今回はその方法についてご紹介します。
開発者ツールとは？
開発者ツールはウェブサイト開発を行うために便利なツールとしてブラウザにあらかじめ入っている機能です。主要なモダンブラウザであれば用意されています。ブラウザの種別によって開発者ツールの見え方や操作方法は若干異なります。今回は、GoogleChromeを例に説明します。
F12キーまたは「CTRL＋Shift+I」（Windowsの場合）、「Command＋Shift＋I」(Macintoshの場合)を押すと以下のようなパネルがブラウザ内に表示されます。
今回使用するのは、この中の「Console」というパネルです。Consoleというパネルがアクティブになっているでしょうか。アクティブでなければConsole部分をクリックしてください。
では、まずは、jQueryを呼び出してみましょう。Consoleパネル内で、「$」または「jQuery」と入力してリターンキーを入力し、以下のような内容が出ていればOKです。「jQuery」の２文字目の「Q」は大文字ですからご注意ください。
逆にこのような内容だとjQueryが読み込まれていないと思われます。jQueryを読み込む記述がHTML内に入っているかを確認してください。
jQueryセレクタを試してみよう
セレクタが要素を呼び出せるかどうかを試すには、同じくConsoleで、セレクタを含むjQueryを入力するだけです。入力ページなら1つ以上の<input>タグがあるはずですから、以下のように入力してリターンしてみましょう。セレクタの記述方法は前回の記事内容を参考にしてください。
$('input')
上記の「input」がセレクタです。$またはjQueryに半角丸カッコをつけて、セレクタを入力し、リターンしてください。
以下のように、該当する要素が同じくConsole内に続けて表示されていれば、要素を呼び出せています。この例の場合、<input>タグがHTML内に１つ以上あるため、該当する要素が複数表示されています。
以下のように「[]」だけが表示される場合、目的の要素が見つからなかったことになります。※この例ではわざとbody直下の<input>タグを指定しています。
対象の要素のみを指定できるよう、セレクタの記述を工夫しましょう。
エフトラEFOの設定でjQueryセレクタを使う場合、特定の要素１つだけを指定することが求められます。用意したセレクタ記法が対象の要素だけを指定できているかどうかをConsoleで確認しましょう。
入力要素を指定したいのであれば、例えばname属性を使うのがいいでしょう。
$('input[name="name"]')
結果も、１つだけ、目的の要素が帰ってきています。
いかがだったでしょうか？
エフトラEFOでは、標準的な機能及び使用法においては、必ずしもjQueryセレクタを使う必要はないように設計されていますが、以下のような場合には、jQueryセレクタの記法で対象要素を指定することが必要です。
・ガイドナビゲーションをHTML内に表示したい場合
・離脱ブロックを出したくない要素を指定したい場合
・住所自動入力を特定の要素をクリックしたときに実行したい場合
・入力成功サインを特定の要素の近辺（前or下）に出したい場合
・送信ボタンデザインを使いたい場合
必要に応じ、jQueryセレクタの記法を把握していただき、最大限、エフトラEFOを活用してください。
