2011/06/02

ラベルを階層化したい。(jQuery導入編)

bloggerを始めて早4ヶ月。色々記事を書く中で、ジャンル分けをするために「ラベル」を適宜設定しているのですが、これがだいぶ増えてきました。
まーラーメン食うたびに最寄り駅を設定したりするからかも知れないし、縦長なレイアウトの問題かも知れませんが、、、けどレッドウイングネタと、ラーメンネタと、その他とか、色々一目瞭然になるようにラベルを階層化したいので、少しお勉強してみます。
具体的には下のような感じにしたいです。

ラベル
+ レッドウイング
|-+ #8111
|-+ #9024
|-+ アクセサリ
|
+ ラーメン
|-+ 目黒
|-+ 恵比寿
|-+ 日吉
|-+ 水道橋
|-+ 田町
|-+ 綱島
+ ブログ
+ null
...




Google先生に色々聞いてみると、同じような質問をBlogger公式ヘルプフォーラムに投稿されているのをいくつか見つけましたが、どれも返信投稿が無いんですよね。調べ方が悪いのかなーと思っていましたが、何とか要望にマッチしそうな記事を発見したので挑戦してみます。
ちょっと敷居高そうですが、、、頑張るぜ。

長丁場になりそうなので、何度かに分けて追記しながら進めたいと思います。



  • 2011/06/01 (Wed.)
まず、見つけた記事によると、bloggerに"jQuery"というJavaScriptのライブラリ(?)を導入しなければいけないようです。この時点で相当言語障害になっているのですが、ライブラリというのは画像をうにょーんとする時に入れ込んだ"prototype.js"の仲間のようです。
ちょいと復習がてら、不慣れな感じは否めませんが、恐る恐る導入、、、

  1. jQueryのソースコードを、その名の通りjQueryのサイトから取って来ます。"PRODUCTION"と"DEVELOPMENT"の2種類が置いてありますが、ソースコードを解読して、何やら開発などをする人じゃなければ、"PRODUCTION"の方がサイズも小さく動作も軽くて良いようです。
  2. 取ってきた"jquery-x.x.x.min.js"を前回同様、Googleサイトのルートへアップロードします。アップロードしたファイルのURLは、「https://sites.google.com/site/forjquery/jquery-x.x.x.min.js」のようになると思います("forjquery"というサイトを作ったという前提)。ちなみに"x.x.x"はjQueryのバージョン、私の場合は1.6.1でした。
  3. ブロガー側の準備をします。ブロガーのメニューから「デザイン」 --> 「HTMLの編集」を選択します。
  4. テンプレートの内容を確認し、<head> ～ </head>の中に、以下の記述をし、保存します。

<head>

<!--jQuery用の記述-->
<script src='https://sites.google.com/site/forjquery/jquery-x.x.x.min.js' type='text/javascript'/>
<!--jQuery用の記述-->

さてこれで準備完了です。ページを読み込んだら動くはずなので、ちょいとサンプルを拝借して、ちゃんと文字がフェードアウトしてくれるか確認してみます。

が、眠いので続きはまた明日。。。これからちょこちょこ更新途中の記事が続いちゃうような気がしますが、ご勘弁ということで。



  • 2010/06/02 (Thu.)
昨日の続き。
jQueryの準備が完了したので、試しにサンプルをサイドバー右側のガジェットに追加してみます。

  1. ブロガーのメニューから「デザイン」を選択、「ページ要素」内のサイドバー右側の「ガジェットを追加」を選択します。
  2. ポップアップウインドウから何を追加したいかを選びます。ここでは「HTML/JavaScript」を選択します。プラス(+)をクリックすると追加されます。
  3. タイトルを"TEST"、コンテンツ部分にこちらからプログラムソースを拝借し、コピペします。ここで、jQueryは昨日ブロガーのテンプレートの<head> ～ </head>内に設定しましたので、コピペする内容は、以下の内容で良いでしょう、と想定してみる。

    <script type="text/javascript">
$(function() {
     $('p').click(function() {$(this).fadeOut('slow');});
});
</script>

<p>おばけー</p>
  4. 「保存」をクリックし、ページ更新してみます。すると、ちゃんとサイドバー右下に"TEST"ガジェットが作られて、"おばけー"と表示されています。



これで、"おばけー"をクリックすると、文字がフェードアウトしていくはずですね。どれどれポチっとうひゃひゃ～。

って消えねーし。



何がいけないのかも分からずGoogle先生に聞いてみると、以外とあっさり回答が頂けました。さすが先生。

どうも"prototype.js"と"jquery-x.x.x.min.js"を一緒に使うには、"prototype.js"の後に"jquery-x.x.x.min.js"を読まないといけないようです。順番が重要なわけですね。確認するとあっさり、"prototype.js"よりも前に読み込む形になっていました。テンプレート内で順番を変えて、保存し改めてページ更新し、"おばけー"をクリックしてみると、、、

おお消えた消えた。

意図した通りに書いたコードが動いてくれると嬉しいもんですね。これで問題無くjQueryが動いていると言えそうです。



が、副作用が。

今まで作成した記事を見返していたら、画像うにょーんが利かなくなっています。なにー。

まあここはジャンルは違えどSEとして普段生活していることが役に立ち、カンが働きました。恐らく2つのscript("prototype.js"と"jquery-x.x.x.min.js")を書いていることが何かしら競合しちゃってうまく行かないのでしょう。先生に聞いてみると、まさにそんな内容がこちらに。

って、上で先生に教えてもらったページと同じじゃねーか。良く読め俺。

jQuery.noConflict();

ってのが必要なんですね。そしてjQueryのコード内で"$"を使わないようにすれば良さそうです。てことで、まずはテンプレート内にnoConflictのおまじないを追記します。

 <head>
<!--jQuery用の記述-->
<script src='https://sites.google.com/site/forjquery/jquery-x.x.x.min.js' type='text/javascript'/>
<script>
jQuery.noConflict();
</script>
<!--jQuery用の記述-->

でもって、拝借してきたコードを、以下のように書き換えます。($ --> jQuery)

<script type="text/javascript">
$(function() {
    $('p').click(function() {$(this).fadeOut('slow');});
});
</script>

<p>おばけー</p>

追加したガジェットのコードの内容を変更するには、「デザイン」の「ページ要素」内で先ほど追加した"TEST"のところの「編集」をクリックすれば良いですね。で、保存して改めてページを更新し、"おばけー"をクリックすると、、、

消えたー。

副作用が治っているか確認のため、画像をクリックすると、、、

うにょーん。



これで、"prototype.js"との競合を避けつつ、"jquery-x.x.x.min.js"を導入出来たようです。いやー難しい。こりゃ目的のラベルをいじくるまでの道のりは長そうです。動いてくれたので、ちょっと遊んでみる。



続く。うひゃひゃ。
投稿者 kdp 時刻: 0:59:00
ラベル:

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...