Web サイト制作に役立つ情報や小技などをまとめています。
現在では、ブラウザに標準でフォーム要素のバリデーションを行う機能が備わっています。type属性によって自動的に適応されるルールや、pattern属性の正規表現によるルールなどを検証してくれてとても便利です。このバリデーションのエラー表示は送信ボタンを押下したタイミングで表示されますが、上から順番に検証されて初めにバリデーションエラーが発生した入力要素にエラーを表示すると、そこで検証が終了してしまいます。フォームの入力要素が数多くある場合には、これでは非常に非効率でユーザに与えるストレスが大きくなります。そこでJavascriptを使ってすべての要素を検証してエラーを全て表示するようにしてみましょう。
CSSのtransitionプロパティで使えるcubic-bezier関数を使うことは良くあると思います。しかし、Javascriptではどうでしょうか？使ったことがないという方が多いでしょう。Javascriptの標準関数にはcubic-bezier(3次のベジュ曲線)と等価なものはありません。そのため自作しなければならないのですが、Web上ではなかなか紹介されていません。そこでcubic-bezierを計算する関数を生成する関数を作ったので紹介します。
パララックスと呼ばれる視覚効果をご存知でしょうか？スクロールに応じて要素がスクロールとは少し違う動き(左右だったり上下逆だったり、速度が違ったり)をして印象的にする効果です。遅延読込させた画像のロード時の効果として使われる場合もあり、採用しているサイトは多いです。しかし、従来はscrollイベントかタイマーで要素を監視して必要になったら動作させるものが主流でした。scrollイベントは非常に短い間隔で発火され、位置を把握するgetBoundingClientRect()関数による強制レンダリングにより往々にして処理が重くなりがちでユーザ体験を悪化させる一因になりかねないものです。そんな悩みの種を解消する方法にIntersectionObserverAPIが提供されました。このAPIを利用すると従来の高負荷な処理が無くなり、必要なタイミングでのみ処理を行えば良く、非常に効率的になります。
GoogleAnalyticsなどのCookieを利用したアクセス解析ツールを導入する時に気をつけないといけないことがあります。それがタイトルにもある「EU一般データ保護規則」(GeneralDataProtectionRegulation、いわゆる「GDPR法」)です。これはEU在住者の個人情報(IPアドレスやCookie、複数の情報から個人を特定できる情報を含む)を取得する際にはユーザの認可を得てからでないといけない、というものです。日本人しか想定されていないサイトでもEU"在住"の日本人がアクセスする可能性がある場合やEUからのアクセス(旅行者向けサイトなど)が考えられるサイトでは対応しないと非常に厳しい制裁金が課せられます。その額は最高で年間売上の4%か2000万ユーロ(およそ26億円)の高い方、とされます。違反していた時に即罰金というわけではないそうですが、対応しておくに越したことはありません。そこで、ユーザに同意を得てからGoogleAnalyticsを有効にするJavascriptなどを作ったので紹介します。
平成最後のGWは10連休のようで、ダラダラと過ごしていますでしょうか？時間が出来たら、ちょっとずつやればいいやと思いなかなか手につかないことも多いでしょう。Webの世界にも時が来れば・必要になれば実行しよう、という怠惰な動作をするものがあります。それが「LazyLoad」(遅延読込)という画像などが表示領域内にスクロールされてから読み込む技術です。色々なライブラリが公開されていますが、カスタムデータ属性(任意に設定できるdata-***というHTML要素に付ける属性)が必要です。新規で構築する場合は良いですが、既に作ってしまったページに適応するのはかなり面倒です。そこで、カスタムデータ属性を使わないで既存ページに追加するだけで使える超軽量コード(542B)を作ってみました。そこそこ汎用性があると思いますので、是非ご検討下さい。
シームレスなWebサイトを設計しているとユーザからの操作を受けて、ページ遷移をさせないでポップアップなどで必要な情報を表示させたいことが良くあると思います。JavascriptやCSSを使ってポップアップを表示させることは簡単ですが、ユーザが誤ってブラウザの「戻る」ボタンを押してしまうことが想定されます。そんな時にページ遷移が発生してしまうとユーザに大きなストレスを与えてしまいます。フォームなどでユーザから入力を受け付けていた場合にはその影響は大変大きなものです。前の状態に戻すこと＝ブラウザの「戻る」ボタン、という認識で操作してしまうことは良く見かけます。そこで今回は、ページ遷移はしないけどブラウザの「戻る」ボタンは有効にできる小技を紹介していきます。CSSだけでは実現できませんので、悪しからず。
お問い合わせフォームなどで電話番号を入力してもらいたいことがありますよね。見やすさや管理のしやすさから3つの入力欄を設けている場合が多いです。しかし、ユーザの観点から云えば入力欄を切り替えなければならず入力が面倒だと感じます。そこで今回は、入力された電話番号をハイフン(-)区切りに変換する方法を紹介します。また不要な文字は削除して半角の整形された電話番号を返すようにしてユーザの負担を最小限にしょましょう。SQLなどのDBに保存する際に「市外局番、市内局番、識別番号」と分けたい場合にも区切り文字があるので簡単に分けて保存しておくこともできます。では、実際にやっていきましょう。
Webサイトに訪れてくれた方からのお問い合わせにフォームを使うことは多いと思います。メールクライアントソフトを起動させることなく、ブラウザ上から手軽に送信できる利点は大きいです。また、必要な項目が予め表示されているので記載すべき内容をユーザが考えなくても良いというところも大事ですね。さてそんな便利なフォームですが、住所の入力をお願いしたいという管理者の方も多いのではないでしょうか？しかし住所の入力は億劫な方が多いのも事実です。少なくとも私は好きではありません(笑)せっかくお問い合わせしようとしても面倒な項目が必須だと送信を躊躇ってしまうこともあります。そこで、Javascriptを用いて郵便番号から自動的に住所を検索してユーザの利便性を上げる方法を紹介します。コンセプトは「ユーザの手間を少しでも減らす」です。また、どこにでも軽量に組み込めるようにjQueryは使いません。
データをPOSTメソッドでサーバなどへ送信する時、HTMLの<FORM>要素を使って送信するとページが遷移しますよね。でも、場合によってはページ遷移はさせたくないけどデータはPOSTで送信したいということがあります。今回は、そんな場合にどのようにすれば良いかをまとめます。使う手法は、XMLHttpRequest(略してXHR)という非同期でサーバとブラウザが通信を行う仕組みを利用してます。フォームに入れたデータを送信する場合とデータは別で用意する場合の2パターンについて解説します。