「jQuery」を動かして何をするのか？は置いておいて、
まずは「jQuery」を学ぶことから始めます。
【手順】
- jQueryとは？
- jQueryのライブラリを入手する
- Bloggerのテンプレートに埋め込む
- 実際に試してみる
・・・こんな感じでしょうか。
では、始めます。
◆jQueryとは？
jQueryとはウィキペディアによると
ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリとのことです。
jQueryには「jQuery本体（jQuery Core）」と「jQuery公式プラグインのjQuery UI」が存在し、
また、スマートフォン用の「jQuery Mobile」も存在するようです。
つまり、スマホアプリの開発も「jQuery」でできるという素晴らしいツールです。
スマホアプリの開発については、追々学んでいきたいと思いますので、
今回は「jQuery本体」にターゲットを絞ります。
※プラグインは非公式のものも公開されているようで、こちらも追々と・・・。
◆「jQuery」のライブラリを入手する
jQueryの本家サイト（http://jquery.com/）に行けば入手できます。
適宜ダウンロードして、先日の「シンタックスハイライト」の件と同じように
Googleドライブにアップロードして使うこともできますが、
今回は『CDN（Contents Delivery Network）』という仕組みを利用します。
CDNとは「Webコンテンツを配信するために最適化されたネットワーク」のことです。
細かいところはわかりませんが、
今回の場合で言うと、
「jQueryのライブラリを、多くの人々が遅延無く利用できるようにするためのネットワーク」と表現できますね。
それと「遅延無く」という部分が肝で、
キャッシュが使われたり、
実際には複数のサーバが存在して、1つのサーバにアクセスが集中しないような仕組みになっています。
ロードバランサみたいなものかな？と思ったのですが、ちょっと調べてみると技術的には別物みたいです。
ちょっと脱線してしまいましたが・・・
・・・で、jQueryのライブラリをCDNにて利用するわけですが、
ここでは（も）Googleが提供しているサービスを利用したいと思います。
（他にも本家jQueryやMicrosoftにも存在します）
Google Developersのリファレンス（https://developers.google.com/speed/libraries/）を見ると、
jQuery、jQuery Mobile、jQuery UI・・・と一通りのライブラリが使えるみたいです。
ここでバージョンが複数あることに気付く・・・。
さてはて・・・ど・ち・ら・に・し・よ・う・か・な・・・ではなく・・・
大まかに説明すると、
・1.x系：IE8以前をサポートするレガシーブラウザ向けのバージョン
・2.x系：IE8以前を切り捨てた最新ブラウザ向けのバージョン（高速・安定を目指したバージョン）
となります。
どんなブラウザでも動くように、今回は「1.x系」を選択しました。
◆Bloggerのテンプレートに埋め込む
「シンタックスハイライト」の件と同じく、
Bloggerのテンプレートのheadタグ内に
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'/>を埋め込みます。
Google Developersのリファレンスでは、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>となっているので、これでも問題ないと思いますが、
scriptタグのtype属性を省略するのが嫌だったので修正してます。
【作業手順】
「テンプレート」⇒「HTMLの編集」⇒・・・埋め込み・・・⇒「テンプレートを保存」
埋め込む位置は↓を参照
◆実際に試してみる
ここまででお膳立ては完了しました。
では、実際に試してみましょう。
うーむ・・・何をしようか考えてなかった。。。
・
・
・
ボタンを押したときに、文字の色を変えてみようと思います。
（今のスキルではこの程度しかわからなかったので・・・）
この文字の色を変えます
以下、サンプルソースです。
これを本文中に埋め込んでます。
<script>
<!--
$(function(){
$("#ac_test_button").click(function() {
if($("#ac_test").css("color") == "rgb(255, 0, 0)"){
$("#ac_test").css("color","blue");
} else {
$("#ac_test").css("color","red");
}
});
});
//-->
</script>
<div id="ac_test" style="color: #ff0000;">
<h3>
この文字の色を変えます</h3>
</div>
<br />
<div id="ac_test_button">
<input type="button" value="クリックすると？" />
</div>
それでは、また。
