jQueryの(EFOにとって)余計な機能をぶった切る

jQueryの(EFOにとって)余計な機能をぶった切る

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

どうも、さむらいです。

当社ASPサービスのフォームアシストでは入力欄の状態をリアルタイムでチェックし、入力状態が正しいものでなければエラーアラートを表示する機能があります。

必須入力欄だった場合はわかりやすいようにカラーリングもつくんですよ。

そんな便利機能に真っ向から戦いを挑むあいつ

jQueryのプラグインにdPasswordっつーものがありまして、これはどういったものかというとiPhoneのパスワード入力時のように最後の1文字だけは入力文字を見せて、0.5秒程度経つとそれを●に変換する機能です。

image01

こうゆう感じ。

通常のtype=”password”の入力欄は最後の文字も入力するそばから●になるので、自分が入力した文字が本当に正しいかどうかわかりにくいんですね。まぁそうゆう意味ではdPasswordプラグインはユーザに優しい機能なんですが、これが当社サービスにとってはまさに天敵なのです。

dPasswordの仕組み

このプラグインがどう動くかというと

1.既存のパスワード入力欄(type=”password”)を非表示(display:none)にし、新たな入力欄を作成する(もうこの時点でFAの設定が…)

jQueryの(FAにとって)余計な機能をぶった切る (1)

jQueryの(FAにとって)余計な機能をぶった切る (2)

2.新しく作成した入力欄の内容を、1で隠した入力欄にコピーし、見えてる欄の文字を●にする。

jQueryの(FAにとって)余計な機能をぶった切る (3)

なーんてことをやっています。
文字にすると とっても簡単な処理なんですが、これがもうフォームアシストとは相性が悪いんですよ。それはもう。ほんとに。

フォームアシストは管理画面から設定した入力欄が途中で非表示になることは想定していないので、冒頭でも書いた「リアルタイムで状況をチェックし、カラーリングをする」という処理が、非表示にされた項目に対して行われるのです。

jQueryの(FAにとって)余計な機能をぶった切る (4)

なのでdPasswordで作成された項目は、本当はエラー状態なのにカラーリングが反映されず、あたかも正常に入力が完了しているように見えてしまうので、ユーザからすると全部正しく入力したのに、なぜかエラーが残っている!と勘違いされてしまうわけですね。

jQueryの(FAにとって)余計な機能をぶった切る (5)

どうやって解決するか

フォームアシストではカスタマイズによって既存の機能の書き換えを行ったり、クライアントページのイベントを発火したりすることができるようになっています。

今回のケースではカスタマイズによって、見えていない項目に適用されている色と同じ色を、見えている項目にも反映させる(詳細はすごく割愛する)ことによってユーザに見た目上 エラーが解除されていないようお知らせできるようにしました。

まとめ

ASPサービスはユーザのページの作りによっていろいろと考慮しなければならないことも多く、ユーザページに合わせたカスタマイズも必要になるケースが多々有ります。

最近ではjQueryを利用されているお客さんも非常に多い(というかほとんどそうな)ので、jQueryのプラグインに何があって、どんな機能でといった知識も必要になるケースが増えてきました。

jQueryを使うなとは言えませんが、ページの作り次第ではカスタマイズに時間がかかり、費用対効果が望めないことも覚えておいてくださいね。(・∀・)ニヤニヤ

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...