各エントリーにサムネールを

本日は映画の話題ではないです､すいません。臨時に javascript やウェブサービスの話になってしまいました。カスタマイズ性に富む Blogger のユーザーや自前サーバの方だけにわかる話かもしれませんが､ようするにブログの各エントリーにサムネールを付けたかった。

このページの右コラム中央に､2008　08　07･･ という部分があります。番号はそれぞれ年､月を表し､そのツリーになっているリストから過去のエントリーに飛べるようになっています。さらに拙宅のブログでは各リストにカーソルを合わせるとリンク先のページのサムネールがツールチップで表示されるように改造してあります。カーソルを持って行ってみてください。

しかしながら･･

8月､7月は全部にサムネールが付きます。でも6月以前のエントリーには表示されない！ あれこれ悩んだけど解決法がみつからず。。誰かわかる方いらっしゃいましたら､アドバイスください〜〜

---

以下 どういう方法でサムネールを表示しているのかについて。


まずサムネールの作成と保存にはこちらのサービスを利用します。
http://www.websnapr.com/
ここに登録し(フリー)､ユーザキーをもらいます。


そしてサービスの具体的な使用法は次の通り。

1.　このコードをブラウザのurlボックスに入れてキャプチャーし､またこのurlにできた画像を使う。
http://images.websnapr.com/?size=TかSかMかL&key=ユーザキー&url=キャプチャーしたいページのurl

※追記　Mサイズ､Lサイズはフリーでは使用できなくなりました･･ ｼｮﾎﾞｰﾝ

2.
あるいはページ上のリンクに websnapr というクラスを設定することによって､リンク先のサムネールが自動的に作成され､またマウスオーバーで表示される。
<a class="websnapr" href="http://******">******</a>
※自分の場合､このクラス名は previewlink に変更しています。

そのとき､このリンクもページ内に置いてください。
<script src="http://bubble.websnapr.com/ユーザキー/mwh/" type="text/javascript"></script>
※mwhはMサイズの場合で､Sサイズならswhにします。

---

しかしこのままでは､サムネールはブログのタイトル部分も含まれた範囲が表示され､どのエントリーも似たようなサムネールになってしまう。そこでもっと各コンテンツにフォーカスするために次のような手法でサムネールをトリミングしています。


参照元はこちらのサイトになります。Download all 3 tricks in a bundle から関連ファイルがダウンロードできます。ようするに前述の websnapr にキャプチャーされた画像を､この jquery.js を使ってツールチップ表示し､cssでmargin等を調整しているだけ。


Blogger のテンプレートにも､エントリーリスト部分に先ほどのクラス名 previewlink を入れ込んであります。

---

自分もやってみたいという方がいらして､わからない部分があれば何でも聞いてください。


フリーで使う websnapr には1時間に80個のキャプチャー､1ヶ月に25万個のキャプチャーという制限があります。それ以上は有料のプレミアムサービスで､ということですが､この制限にはまったく達していないし､表示するリンク数の制限はとくにない様子。そしてきっちりと6月以前が表示されないのが不思議。Blogger のしくみによるものかもしれませんが､ページのHTMLソースを見ると6月の途中までのリンクが指定のクラス名付きで確認できて､アーカイブになっている部分にもクラス名は間違いなく入っている。なのに､ちょうど6月から前のエントリーになるとサムネールが付かない･･


誰か､ヘルプよろしくお願いします(＊＆＊)

---

後日談

残念ながらヘルプはもらえませんでしたが＾ ＾ 原因は Blogger のシステムに由来するものでワザ一発で解決できるものではない気がしてきました。一つわかったのは､ページをリロードして､データの読み込みが完了する前にエントリーリストの三角をクリックして開いてしまえば6月以前にもちゃんとサムネールが付く。こんな操作はあまり快適とは言えないので､三角を開くリンクを調べてワンクリックで同様の操作ができるようにはした。リストの上に設置。

あれこれこちらが必死にやっていた矢先に冷や水を浴びせかけられるように､Websnapr のサービスがフリー登録ではSまたはTサイズしか使えなくなってしまった。よってサムネールがかなり小さくなってしまった。

それならこちらの方がサムネールの画質も良いし､ロゴも入らないということでキャプチャーのサービスを MozShot に変更。なんとか実用になったのではないかと思っています。ああ疲れた。。

---

さらに後日談 9.22

MozShotも混んできたのか､エラーが多くなりました。ロード不良の状態の画像がサムネールになって5日ほどそのままになってしまうこと多々。それとMozShotではYouTubeのエンベッドはサムネール化されない。

考え方を変えて､自前でサムネールを用意することにする。

パーマネントリンクに対応したファイル名のサムネール画像を別サーバにアップし､それをツールチップに呼び出す方式に。自分の場合は外部より内部エントリーを参照するためのサムネールなので､エントリーに際しての作業は1行程増えるがこのほうが確実かなと。

外部リンク用には一部MozShotも残しながら､Bloggerの三角トグルの件はまだ暫定対応のままだが､とりあえず完成！ うん､なかなかいい感じ。