アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション:ライブラリー

2007年12月 1日

jQueryを使ったcookieの制御(フォントサイズ変更編)

夢実現のアファメーションを実践する起業家にもっとも読まれているブログは?

フォントサイズを切り替えたい?

いろんなところで実装されている「フォントサイズの切り替え」のJavaScript。

僕自身はあまり必要ないんじゃないかなーと個人的には思ってたんだけど(そもそも、コントロールくるくるでサイズ変えられるからね)、仕事でやらなくちゃいけなくなったので、ググッとグーグル先生にて検索。

流行ってる(?)だけあって、いろんなサンプルがあって、お勉強になりました。

jQueryでcookieを簡単制御。

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

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

…なんて、

「衝撃の新事実!」

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

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

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

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

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

やったことは…

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を出すようにしています。実際に使用する場合は、削除またはコメントアウトで。

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

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

それはまた時間があるときに。(もしくは、誰かやっちゃってくださーい!w)

追記: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」の状態で表示させることができるようになりました。(パチパチ)

この記事に関連する(かもしれない)書籍

 

投稿者 kuro : 2007年12月 1日 01:09 | ID:334

ページトップ△

トラックバック

このエントリーのトラックバックURL:
http://www.dokuritsu-kigyo.net/cgi-bin/mt/mt-tb.cgi/334

コメント

ページトップ△