今まで、JavaScriptでいちいちdocument.getElementById('abc')でエレメントの指定をするのが面倒で、JavaScriptライブラリのprototype.jsを使ってきた。

何故prototype.jsなのかというと、導入当時にそれしか知らなかった、という単純なもの。

最近ちょくちょく会社に行くようになり、先輩からjQueryのほうが様々なプラグインが揃っていて便利だという話を聞き、さっそくjQueryに鞍替えすることにした。

jQuery
http://jquery.com/

ダウンロードページから、最新版の1.6.4を入手。一応Minified版(90kb)とUncompressed版(233kb)の両方をダウンロードした。

jQueryでdocument.getElementById('abc')のエレメント指定をどう行うのかググってみた。

jQueryでdocument.getElementByIdと等価を取る
http://blog.mwsoft.jp/article/36582155.html

jQueryで「$("#id")」と書くと、返ってくるのはjQueryのObjectで、getElementByIdで返ってくるような生のElementオブジェクトは取れない。

生のElementを取ろうと思った場合は「$("#id")[0]」と書くか「$("#id").get(0)」と書けば良いらしい。

参考サイト
http://groups.google.com/group/jquery-en/browse_thread/thread/fa48e5649bb64216?pli=1

prototype.jsはJavascriptの中身いじって機能を増やしてる風なので、「$("id")」をするとElementそのものが帰ってくるけど、jQueryの場合は操作する為の皮を被せてる風なので(お行儀はいいよね、こっちの方が)、こうなるらしい。

なるほど。

ということは、prototype.jsからjQueryに鞍替えするには
$('abc') ⇒ $('#abc')[0]
とすればいいワケね。

幸い、prototype.jsを使用しているページはボウリングスコア入力画面の1ファイルのみだったので、スムーズに作業は終了。

確認してみると、JavaScriptはちゃんと機能しているようだ。

ついでに、jQueryを使ってスタイルシートを切り替える機能を追加してみよう。

JavaScriptでシンプルにスタイルシートの切り替えは出来るのだが、ページ遷移する度にデフォルトのスタイルシートが読み込まれるため、使えない。

jQueryのプラグイン“jquery.cookie.js”を使えば、JavaScriptで簡単にCookieが使えるようになり、ページ遷移しても選択されたスタイルシートを保持し続けることができるらしい。

プラグイン“jquery.cookie.js”入手サイト
http://plugins.jquery.com/project/Cookie

参考サイト
jQueryでCSSを切り替えて文字サイズを変更する
http://1106g.net/archives/2011/08/fontsizechange/

jQueryを使ったcookieの制御(フォントサイズ変更編)
http://www.dokuritsu-kigyo.net/blog/2007/12/jquerycookie.html

厳密には“文字サイズを変更する”ためのスクリプトだが、“jQueryでCSSを切り替えて”とあるので使えそう。

JavaScriptのコードはnonukes_js.phpファイルに以下のように記述。

<?php
$dirPath = $_SERVER['SCRIPT_NAME'];
$localPath = "/XAMPPのルートディレクトリのパス/";
if(strstr($dirPath,$localPath)){
  $path = "http://localhost/ローカルのパス/";
}else{
  $path = "http://www.nonukes-maria.net/";
}
?>
if($.cookie('css') != null) {
  $(document).ready(function() {
      $("#css").attr({href:$.cookie('css')}); // cssと言う名前でCookieに保存される
  });
}
 
function switchCss(cssname) {
  var cssurl= '<?php print $path; ?>files/' + cssname + '.css';
    $('#css').attr({href:cssurl});
    $.cookie('css',cssurl,{expires:30,path:'/'});
}

ローカルでもレンタルサーバーでも利用できるよう、サイトの絶対パスを取得するために一部phpを使ってjsファイルを記述した。

<head>内のソースに、

<link id="css" href="<?php print $path; ?>files/nonukes1.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" charset="utf-8" src="<?php print $path; ?>files/jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="<?php print $path; ?>files/jquery.cookie.js"></script>
<script type="text/javascript" charset="utf-8" src="<?php print $path; ?>files/nonukes_js.php"></script>

と記述。$pathはphpの変数で、サイトの絶対パスを表す。

最後に、htmlソース内に

<dl id="style">
  <dt>style</dt>
  <dd><a href="javascript:void(0);" onclick="switchCss('nonukes1'); return false;">pop</a></dd>
  <dd><a href="javascript:void(0);" onclick="switchCss('nonukes2'); return false;">cool</a></dd>
  <dd><a href="javascript:void(0);" onclick="switchCss('nonukes3'); return false;">normal</a></dd>
</dl>

と記述すればOK。

ページ右上にstyle切り換えリンクがあるのでお試しあれ。

ブラウザごとに多少挙動が異なるのが気になるが、とりあえず今日は良しとしよう。

よし、寝れる。