公官庁のウェブサイトなどでよく見かける、文字サイズを変更するスクリプト。
コード自体は昔それっぽい記事を書きましたのでその時に使ったのと似たような方法で実装する予定ですが、そのスクリプトだけだとページを遷移した場合、設定が初期状態に戻ってしまいます。
大抵の場合文字サイズを大きくして読み始めた人は他のページでも大きな文字で読むでしょうから、これでは不便ですよね。
そこで、cookie等を利用してブラウザごとに文字サイズの設定を記憶させる必要があります。
cookieを利用する方法はいくつかあるようなのですが、今回は jquery.cookie.js というjQueryから操作できるプラグインを使用してみることにしました。
※jquery.cookie.js は現在は js-cookie.js というプロジェクトに移動したようです。
記述方法なども今までとは異なるようですのでこれについてはまた改めて記事にしてみようと思います。
ダウンロードとインストール（設置）
Githubからダウンロードしたら、任意の場所に置きます。
自分はいつも lib フォルダにプラグイン系は入れているのでその流れで書きますが、うまく自分の構成にあわせて読み替えて下さい。
HTML側にjQuery本体と、juery.cookie.js を読み込みます。自分は jQuery の発火処理とかも外部ファイルにしてるのでそれも読み込んでますが、別に<script></script>タグの中に直接書いても良いと思います。
|
1 2 3 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="lib/jquery.cookie.js"></script> <script type="text/javascript" src="init.js"></script> |
cookieを食べさせる
文字サイズ変更スクリプトの場合、文字サイズ変更のためのボタンなりリンクをクリックすると、サイズ変更のためのスクリプトが発火するようにするとおもいますので、そのタイミングで一緒に現在選択されてるフォントサイズのモードを記憶させておけばよさそうですね。
jquery.cookie.js でcookieに書き込むには、
|
1 |
$.cookie('NAME','VALUE', {expires:1,path:'/'}); |
といった感じです。
NAMEには保存するcookieの名前、VALUEに値を入れます。
その後ろの｛｝の中には、様々なオプションを記述します。
expirse:7
→有効期限です。この期限を過ぎると破棄されます。
path:’/’
→指定したパス以下にアクセスした時だけ有効になります。サイト内全体で使うならば「/」を指定。
この他にも、
domain:’example.com’
→有効になるドメイン。サブドメインのみで使いたい場合とかに指定するんだと思う。多分。
空欄の場合はcookieを食べたドメインが自動的に割り当てられるようです。
secure:false
→https接続の時のみ使えるようにするらしいです。デフォルトはfalse。
また、これらのパラメータは、予め
|
1 |
$.cookie.detaults.path = '/'; |
といった感じで初期値をセットしておけば、省略した場合に使用されるデフォルト値を書き換えることができるようですので、沢山のcookieを扱う場合は便利ですね。
実際に書いてみる
ボタン（リンク）を押したら文字サイズを変更し、その状態を保存してみます。
html
|
1 2 3 4 5 6 |
<div id="txSizeCtrl"> <span>文字サイズ</span> <div class="set_sml"><a href="javascript:void(0);">小</a></div> <div class="set_mid current"><a href="javascript:void(0);">中</a></div> <div class="set_big"><a href="javascript:void(0);">大</a></div> </div> |
JS（一部のみ）
|
1 2 3 4 5 6 7 8 |
$('#txSizeCtrl > .set_big').children('a').click(function(){ $('#txSizeCtrl').children().each(function(){ $(this).removeClass('current'); }); $('html').css('font-size','72.5%'); $(this).parent('div').addClass('current'); $.cookie('usr_fontsize','large', {expires:1,path:'/'}); }); |
大急ぎで書いたのでもっとスマートな書き方があるかもしれませんが、大体こんなかんじです。
8行目でcookieに書き込んでますね。ここでは文字サイズを変更するためのパラメータを保存するので、「usr_fontsize」という名前にしました。値は、今は「大」をクリックした時の挙動ですので「large」として保存しています。まぁ別にあとで判別できればなんでもいいんですけどね。
これをボタンの分だけ作成します。ボタンを押すたびに「usr_fontsize」の値が上書きされていくわけですね。
cookieを読み出す
読みだすのもとっても簡単で、
|
1 |
$.cookie('NAME'); |
でOKです。
|
1 2 |
var cookie_val = $.cookie('NAME'); console.log(cookie_val); |
みたいにしてコンソールに値がでてくれば取り出しに成功です。
（値の確認やデバッグにはChromeならデベロッパーツールの「Resources」タブにある「Cookies」を見たほうが早いし楽だし便利だとおもいますが。。Firefoxの場合はFirebugのcookieタブです。）
実際に書いてみる
さっき保存したデータをページ読み込み時に一緒に読みだして、初期をセットしなおすしょうにすればよさそうです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var usr_fontsize = $.cookie('usr_fontsize'); var target_parent = $('#txSizeCtrl'); switch(usr_fontsize) { case 'small': $('html').css('font-size','52.5%'); $(target_parent).children('div').removeClass('current'); $(target_parent).children('.set_sml').addClass('current'); break; case 'middle': $('html').css('font-size','62.5%'); $(target_parent).children('div').removeClass('current'); $(target_parent).children('.set_mid').addClass('current'); break; case 'large': $('html').css('font-size','72.5%'); $(target_parent).children('div').removeClass('current'); $(target_parent).children('.set_big').addClass('current'); break; default: $('html').css('font-size','62.5%'); $(target_parent).children('div').removeClass('current'); $(target_parent).children('.set_mid').addClass('current'); break; } |
だいたいこんなかんじでしょうか？
(document).ready のタイミングでcookieから値を取り出し、switch文で分岐させた先でボタンを押した時と同じ用に文字サイズの変更やクラスの入れ替えを行なってます。
また、初回アクセスやcookieが切れてる人が来た時はデフォルトサイズを表示するように「default:」には「middle」のときと同じ内容を書いています（今回は中サイズが初期値という想定のため）
まぁこれは上書き前の初期状態のHTMLは普通デフォルトサイズで作るだろうからあまり意味が無いかもしれませんが、念のため書いてみました。
おまけ。
実はこのスクリプト、jQueryのコアに依存している部分はかなり少なく、少し改造するだけでスタンドアロンで動作することも可能らしいですよ。
JavaScriptでcookieを操作する時はjquery.cookie.jsを使おう – 文殊堂
（ただ、この記事の時よりバージョンが上がって居るなどで、この方法が現在使えない可能性も考えられます。自分は他の部分でもjQueryに頼りっぱなしなのでわざわざ単体動作させる必要もないので試していませんが…。）
注意（というかハマった部分）
GoogleChromeはデフォルトのままだとローカル環境ではcookieを発行できないようです。
構築段階でテストする場合は、Firefoxなどを利用するか、XAMPPやMAMPといったローカルに構築用のサーバーを作れるツールを使って、localhost からテストを行う必要がありそうです。
それか、コマンドラインオプションで –enable-file-cookies を付けて起動すれば使えるようです。
コンソールから、
|
1 |
/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --enable-file-cookies |
と入力して起動するか、
Appleスクリプトエディタで、
|
1 |
do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --enable-file-cookies" |
みたいにして保存しておいてもOKだとおもいます。
Windowsならばアプリケーションのショートカットにフラグを追加してあげれば簡単にできるようですね。
こんにちは、jqueryの – クッキーはhttps://github.com/js-cookie/js-cookieに名前が変更されました
Fagner Brack さん、こんにちは。
まだ js-cookie の方の使い方はしっかりと確認できていないのですが、ぱっと見た感じでは使い方が変更になったように感じましたので、本記事はあくまでこれまでの「jquery.cookie.js」の記事ということにさせてください。
（ js-cookie へのリンクは追加してあります）
また js-cookie については自分が使い方を把握できてきたら改めて記事にさせていただこうと思っています。
コメントありがとうございました。
ありがとう。ご質問があれば、私に教えてください。