スマートフォンによるインターネットアクセスが増え、PCと同じくらいスマートフォンでのサイトやフォームの使いやすさへの配慮が重要になっています。端末種別の違いを吸収する方法の１つとして、ブラウザのウィンドウ幅に合わせてコンテンツの見た目を切り替える方法「レスポンシブ対応」があります。
エフトラEFOのご利用をご検討のお客様からも、レスポンシブ対応したエントリーフォームでエフトラEFOが問題なく動作するかという点についてお問い合わせが増えています。
今回は、レスポンシブ対応されたエントリーフォームにエフトラEFOをご利用いただく場合のポイントについてご説明いたします。
結論から申しますと、レスポンシブ対応したエントリーフォームは、PC、スマートフォンなど、端末種別によらず同一フォームとして登録して利用可能です。入力ページ、確認ページ、完了ページなど、ページごとにEFOタグを貼り分ける必要はありますが、端末種別ごとに貼り分ける必要はありません。
レスポンシブとは？
以前は、PC、フィーチャーフォン、スマートフォンとで別々のHTMLを用意してサーバー側で端末を判定してふり分けるのが一般的でしたが（いまでも有効な方法です）、ブラウザの進化によって、メディアクエリと呼ばれる、ブラウザのウィンドウサイズごとに適用するスタイルシートの内容を分ける技術が一般的になりました。その結果、HTMLソースは端末種別ごとにではなく１種類のみ用意し、スタイルシートでウィンドウサイズに合わせた見た目を用意するという対応が増えてきました。これはレスポンシブ対応と呼ばれています。
なぜ同じEFOタグで動作するか？
エフトラEFOは、入力ページの各入力項目に入力支援機能を動作させるための前処理として、想定していた入力項目がEFOタグが貼られたページ内に存在するかを確かめるのですが、その判定として、
- 想定していた<form>タグか（<form>タグのname属性や、HTML内の順番などで判定）
- 想定していたタグか（input、select、textarea）
- 想定していたtype属性か
- 想定していたname属性か
などで、１つ１つの入力項目の存在を確かめます。
想定していた入力項目が見つかれば入力支援機能のための処理を実行し、見つからなかった入力項目については何もしません。
レスポンシブ対応されたHTMLは、ウィンドウサイズを変更しても、有効なスタイルシートの内容が変わるだけで、HTMLのDOM構造は変わりません。そのためウィンドウサイズの変更によって、EFOタグが入力項目を見つけられなくなる、ということはありません。以上から、レスポンシブ対応されたエントリーフォームについては、１フォーム分のEFOタグで問題ありません。
レスポンシブ対応に近いものとして、ページ表示時に、JavaScriptでユーザーエージェントを判定して、スマートフォンならスマートフォン用のスタイルシートを追加して読み込む、というものがあります。この場合も、DOM構造が変わらない限り、問題なく１フォーム分のEFOタグでご利用可能です。
まとめ
まとめると、以下のように整理できます。
※「別フォーム」という場合は、複数のフォームとして登録し、ページごとに別々のタグを貼る必要があります。「同一フォーム」という場合は、１フォームとして登録、端末種別ごとにタグを貼り分ける必要はありません。
フォームのURLがアクセスする端末種別ごとに別の場合
＝別フォームとして登録し、タグを貼り分ける必要があります
フォームのURLがアクセスする端末種別によらず同じで、見た目も同じ場合
＝同じフォームのタグで動作可能です
フォームのURLがアクセスする端末種別によらず同じだが、違う見た目が用意されている場合
・そもそも違うHTMLソースが返されている場合（※1）
＝別フォームとして登録し、タグを貼り分ける必要があります
・返されているHTMLソースは同じで、ブラウザが評価した後のソース（※2）も同じ場合
＝レスポンシブor類似のケース
＝同じフォームのタグで動作可能です
・返されているHTMLソースは同じだが、ブラウザが評価した後のソースが違う場合
※特に<form>…</form>の内容が異なる場合
※スマートフォン用変換ツールを利用しているケースなどが該当します
＝別フォームとして登録し、タグを貼り分ける必要があります
（※1）ブラウザの「ソースを確認」で表示できるHTMLソースです
（※2）ブラウザの開発者ツールで表示できるHTMLソースです
なお、エフトラEFOのレポート機能は、ユーザーが使用したブラウザ情報を元に、PC（タブレット含む）のみの数値、スマートフォンのみの数値、及びその合算を表示できますのでご安心ください。
最後に
いかがだったでしょうか。レスポンシブ対応されたエントリーフォームへのエフトラEFO導入のお問い合わせ、お待ちしております。
