“jQueryを使ったcookieの制御（フォントサイズ変更編）”という、夢実現のためのアファメーション。

jQueryでcookieを簡単制御。

S・M・Lサイズのフォントサイズ用のCSSを用意して、それをJSにて切り替え。
そして、その情報をcookieに記録する…という、ありがちな（？）ヤツです。
（ありがち…とか言いながら、あんまりスクリプトとかプログラムに詳しくないので、実装するまで一人悶絶状態でしたが。汗）

んで、サンプルなどを作ってごにょごにょとして、いざ本サイトに実装したあとに、新たな事実が！

…なんて、

「衝撃の新事実！」

みたいに書いたけれど、別にたいしたことじゃないっす。（汗）

要は、最近何かと話題のAjaxのライブラリjQueryと、そのcookie制御用のプラグイン（？）を使うことで悶絶しながらやっと作った「フォント切り替え＆クッキー制御」が簡単に出来ることが判明。

ほんのちょっと悩んだ末、動きとしてはすでに完成してたんだけど、jQueryを使ったバージョンで最初からやり直すことに。
（お客さんに頼まれたわけでもなく…完全に自分の勉強のためです。ｗ）

JavaScriptのライブラリってすごいな。ｗ

結果は…これちょーいいっす！

やったことは…

jQueryをhtmlにリンクして読み込んで、さらにクッキー制御用のプラグイン（？）「jquery.cookie.js」を読み込む。

<script type="text/javascript" src="shared/js/jquery.js"></script>
<script type="text/javascript" src="shared/js/jquery.cookie.js"></script>

んで、フォントサイズ変更、及びクッキーを制御するために、以下のスクリプトを作成し外部JS化。

function fontSize(size){
cssPath="shared/css/"+size+".css";
cssurl=dirPath+cssPath;
$('#fontSizeControl').attr({href:cssurl});
$.cookie('fsize',cssPath,{expires:30,path:'/'});
}

こんだけです。

…jQueryってすげーっ！！

作ったスクリプト（fontSize(size);）でやってること自体はとってもシンプル。

引数「size」で渡された文字列を関数内でcssのパスと連結し、変数cssPathに代入。
んで、ページの階層が変わるとパスが変わるので、各htmlにて「dirPath」を定義し、それをガチャンコして変数cssurlに代入。
さらに、それを#fontSizeControlというidのついたhref属性の値に代入。

そして、その情報（cssのurl）をクッキーに「fsize」の値として代入して、30日間保存する…って感じです。

…と、こうやって文章で書いてもイマイチ良くわからないので、シンプルなサンプル（お、ラップみたい。）を作成。

jQueryでフォントサイズ変更＆クッキーの設定ver.5※追記07/12/04参照

※（「コントローラー」では、cookieに入れた内容を見るために、alertを出すようにしています。実際に使用する場合は、削除またはコメントアウトで。

なお、このサンプルを制作するために、以下のサイトを参考にしました。

• javascriptライブラリjQueryでcookieを超簡単に扱う方法 : 4GALAXYのメモ
• Cookie Plugin for jQuery

サンプルにある、コントローラー用に作った「規定値に戻す」スクリプトは、もっとスマートに書けるはず。（汗）

それはまた時間があるときに。（もしくは、誰かやっちゃってくださーい！ｗ）

追記：07/12/03

上記のサンプルのままでは、一番最初にアクセスしたとき、つまりcookieにfsizeが保存されていないときは、フォントサイズのcssが効かないことが判明。

（※試しにブラウザのcookieを削除してver.5版にアクセス。）

jQueryでフォントサイズ変更＆クッキーの設定ver.5

これは、外部JSを読み込むときに、「必ず」一番最初にcssのhref属性を、cookie内のfsizeと置き換えようとするため、fsizeの値がnullだと、もともと設定していた"medium.css"が、nullになってしまうため。

なので、外部JSの一番最初でcookieのfsizeを取得し、変数fsize（別にhogeでも良い）に代入。

fsize=$.cookie('fsize');

条件分岐で、fsizeがnullじゃなかったら、#fontSizeControlのhref属性を変更するようにしました。

if(fsize != null) {
$(function(){
$("#fontSizeControl").attr({href:dirPath+$.cookie('fsize')});
});
}

jQueryでフォントサイズ変更＆クッキーの設定ver.6（071204修正版）

これによって、一番最初はちゃんとmedium.cssが効いて、「フォントサイズM」の状態で表示させることができるようになりました。（パチパチ）

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！