というわけで、だいぶ遅ればせながら、
このブログにも、はてなスターを付けてみました。
…いや実は、既に何度かトライしてたんですが。
1度目は、CHEEBOWさんがやってるのを見たとき。
このブログにも、はてなスターを付けてみました。
…いや実は、既に何度かトライしてたんですが。
1度目は、CHEEBOWさんがやってるのを見たとき。
はてなの新サービス「はてなスター」が始まりましたねー。 これって、WEB拍手みたいな感じなのかなー。はてなブックマークよりもゆるーい感じに使えそうな感じです。
それに、自分のエントリのタイトルに星がついていくのもなんとなく楽しげです。
というわけで、さっそくこのブログにも設置してみました。
ヒビノアワ: はてなスターをつけてみた
はてなスターのリリースからまだ1週間も経ってない頃。ていうか即。
ただ、当時、CHEEBOWさんのエントリを読んで、
なぜだか、
“はてなスターの挙動に合わせてテンプレを変える必要があるんだ”
…ていうような話を信じ込んでたんですね。
（無精して、HatenaStar.js全部は読まなかったし）
このサイトのテンプレは、クラス名から何から、
殆ど無視して1から作ってるから…それはまたしんどい。
テンプレ全部変えて、再構築とか面倒…
そ れ は で き ね ぇ
とか思って、1回目の断念。
で、2回目に、やっぱりはてスタ付けようと思ったのは、
Fumiaki Yoshimatsuさんの、
MovableType向けプラグインを作ったっていうエントリを見掛けたとき。
ここでのアプローチは、プラグインの設定でトークンを埋め込んでしまえば、
後はタグでスターを自由に置けるよ、っていう感じでした。
（よくよく考えればこの時点で、テンプレに左右されないスターの表示法が発表されてたんですけど）
こりゃ便利だ、そうだプラグインだよね、
とか思って導入してみたのだけど…表示されない。
うーん。
悩むことしばし、プラグイン見て気付いた、
ああ、これ、3.21じゃ使えないじゃん。
途中までいじって、トークンの設定をちゃんと出来るようにまではしたけど、途中で投げ。
いや、やれば出来るだろうから（挿入する文字列を構成するだけだから）、
そのうち、時代に乗らない人々向けのプラグインも書くかもしれないけど、
そのときは、まいっか、と。
2回目の断念。
んで、今日。
CSSを利用して、自由にスターの画像を変えることが出来るようになったよ、
というリリースノートを受けて、
ふと思い出して、何となくやってみた。
プラグインの流れで調べてみたところ、
スターを挿入する部分を示すタグとクラス名は、
自由に設定できるってことだったので、
それを参考に設定。
まぁつまり、観測気球さんのエントリを引用させていただくと、
という文を、追加してやればいいわけですね。
うちのサイトのタグは、こんな感じ。
これを、書けば、あら不思議。
スターが表示されました。
ま、驚くほど単純でしたね。
無精はするな、と（苦笑）
ところで、今回のきっかけになった、
☆の画像を変えるテクニックは、基本的にCSS。
以前は、JavaScriptをねじ込んで変えてたんだけど、
CSSで設定できるようになって、
より、いじりやすくなりました。うん。
なにか良いのが見つかり次第、変えようと思います。あい。
（ちなみにこんなの
も使ってたり）
ただ、当時、CHEEBOWさんのエントリを読んで、
なぜだか、
“はてなスターの挙動に合わせてテンプレを変える必要があるんだ”
…ていうような話を信じ込んでたんですね。
（無精して、HatenaStar.js全部は読まなかったし）
このサイトのテンプレは、クラス名から何から、
殆ど無視して1から作ってるから…それはまたしんどい。
テンプレ全部変えて、再構築とか面倒…
そ れ は で き ね ぇ
とか思って、1回目の断念。
で、2回目に、やっぱりはてスタ付けようと思ったのは、
Fumiaki Yoshimatsuさんの、
MovableType向けプラグインを作ったっていうエントリを見掛けたとき。
はてなスターをMovable Typeで表示する方法はいろんな人が書いてるけど、やっぱHTMLタグ書くのはMTらしくないだろーってことで、今日のhack-a-thonでMTHatenaStarを書いてみた。
MTHatenaStar作った - Kickstart my heartここでのアプローチは、プラグインの設定でトークンを埋め込んでしまえば、
後はタグでスターを自由に置けるよ、っていう感じでした。
（よくよく考えればこの時点で、テンプレに左右されないスターの表示法が発表されてたんですけど）
こりゃ便利だ、そうだプラグインだよね、
とか思って導入してみたのだけど…表示されない。
うーん。
悩むことしばし、プラグイン見て気付いた、
ああ、これ、3.21じゃ使えないじゃん。
途中までいじって、トークンの設定をちゃんと出来るようにまではしたけど、途中で投げ。
いや、やれば出来るだろうから（挿入する文字列を構成するだけだから）、
そのうち、時代に乗らない人々向けのプラグインも書くかもしれないけど、
そのときは、まいっか、と。
2回目の断念。
んで、今日。
CSSを利用して、自由にスターの画像を変えることが出来るようになったよ、
というリリースノートを受けて、
さきほど、はてなスターの機能拡張を行い、スタイルシートで設定するだけで簡単にはてなスターの画像を変更できるようになりました。この方法を使うと、はてなダイアリーなど、スタイルシートが編集可能な環境ならどこでも簡単に画像を変更できます。
はてなスター日記 - はてなスターの画像が自由に変更できるようになりましたふと思い出して、何となくやってみた。
プラグインの流れで調べてみたところ、
スターを挿入する部分を示すタグとクラス名は、
自由に設定できるってことだったので、
記事の題名と記事のURLの対応関係が記述されていれば、以下の JavaScript を挿入することで、対応できます。
[観] はてなスターを設置してみましたそれを参考に設定。
まぁつまり、観測気球さんのエントリを引用させていただくと、
<タグ><a href="その記事のパーマリンク">記事の題名</a></タグ>
なら
Hatena.Star.EntryLoader.headerTagAndClassName = ['タグ',null];<タグ class="クラス名"><a href="その記事のパーマリンク">記事の題名</a></タグ>
なら
Hatena.Star.EntryLoader.headerTagAndClassName = ['タグ','クラス名'];という文を、追加してやればいいわけですね。
うちのサイトのタグは、こんな感じ。
<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['div', 'EntryTitle'];
Hatena.Star.Token = 'トークン';
</script>これを、書けば、あら不思議。
スターが表示されました。
ま、驚くほど単純でしたね。
無精はするな、と（苦笑）
ところで、今回のきっかけになった、
☆の画像を変えるテクニックは、基本的にCSS。
以前は、JavaScriptをねじ込んで変えてたんだけど、
CSSで設定できるようになって、
より、いじりやすくなりました。うん。
なにか良いのが見つかり次第、変えようと思います。あい。
（ちなみにこんなの
も使ってたり）ただ、Sleipnirで見ると、微妙に重いのが気になるな…
flash関係なくて、JavaScriptの話なのかなー…
September 7, 2007
