文字サイズ変更のUIをWebサイトに実装する場合、Cookieを使って実装する方法が一般的です。Cookieを扱うにあたって、プラグインを使うとわりと容易に実装することが可能ですが、プラグインを使わずに、汎用的な文字サイズ変更UIのCookieを制御するjsを作ってみましたので、ご紹介させていただきたいと思います。今回のjsは多少長くなってしまいましたが、頑張って解説してみたいと思います。以下の3つの大きな機能別に関数を分けてみました。変数getCookieVal~で特定のCookie名の値を取得します。これで取得したCookie名に「cookie-f-large」が見つかった場合と見つからない場合、それぞれに対応したcssを設定します。Cookieが有効化されているかチェックCookieが有効されていないとそもそも動かないので、有効化されているかどうかチェックします。navigator.cookieEnabledを使って判定するのが最も手っ取り早いのですが、実はこれはIEとEdgeで動かないため、別の方法で判定を行います。言うと、ここではCookie「cookie-check」値を「true」で書き込み、この値が返ってくるかどうかでCookieが有効化されているか判定を行うようにしています。今回文字サイズ変更という機能目的でご紹介していますが、これを応用すればCookie必須のコンテンツでCookieが無効になっている場合用のコンテンツを用意するなどしてCookieの有効化を案内することなども可能です。「文字サイズ標準」「文字サイズ拡大」でそれぞれ処理を別々にし、有効期限も分けています。グローバル変数で「文字サイズ標準」は10日、「文字サイズ拡大」は30日に設定しています。それぞれのボタンをクリックすると、まず現在の日時を基準として30日後の日時をGMT形式に変換します。これを使ってdocument.cookieでCookie名を書き込みつつCookieの有効期限を設定します。見た目のところはあらかじめ用意しておいたclassを付け替えることでクリックした文字サイズボタンをアクティブ化し、拡大表示であれば#containerに.f-size-largeを付与して文字サイズを大きくします。それぞれのボタンをクリック時に逆のボタンのCookieは削除します。こちらは現在の日時よりも手前の日時を有効期限としてCookieを書き込むことでCookieを削除する、ということを行っています。Cookieの動作検証方法Cookieの読み書きが正しくできているかどうか、Chromeのデベロッパーツールを使うと便利です。F12でデベロッパーツールを立ち上げて、[Application]-[Storage]-[Cookies]でドメインをクリックすると、以下のようにCookie名とのその値、有効期限を確認することができます。まとめこれまでCookie制御を行うコンテンツにおいてはプラグインを使って凌いでいましたが、今回せっかくなのでフルスクラッチでCookieを扱うjsを書いてみた次第です。すごく勉強になりました。文字サイズ変更UIを例にご紹介させていただきましたが、応用する事で様々な状況に対応できると思いますので、Cookieを扱う際はどうぞご参考にしていただければ幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。