リンクタイプの進行状況

とてつもなく間が開いてしまいましたが、忘れてしまったとか飽きてしまったというわけではないですよ。他のことを書いたりしているとついつい後回しになってしますね。徐々にまたスピードを上げて行きますのでよろしくお願いします。

さて、リンクの構成案は随分前に出来上がっていたのですが、肝心の実装を進めていなかったので初めて見ました。途中経過ですが、どんな感じで進んでいるのかをこの場で共有したいと思います。作る前にリンクタイプには以下のような条件項目を挙げました。

• リンクのリストは <dl> で構成。 <dt> にサイト名、<dd> に簡単な説明文を書く
• スクリーンショットを入れたい
• マウスオーバーしたときのエフェクトを工夫したい
• メンテナンス・拡張性を考えると面倒な作業や特殊なマークアップルールなしで実現したい
• 似たようなサイトを手軽に探す機能は自動化させたい

JavaScript のライブラリは jQuery を採用。階層を縦貫して値を取り出したり、改ざんや新しい要素を加えたりするのに使いました。あと、<dt> エリアをマウスオーバーしたら <dd> エリアも一緒にハイライトしたり、 マークアップ上ではリンクがない <dd> エリアでクリックしてもリンク先へ移動出来るようなイベントも追加されています。

当初 SimpleAPI からスクリーンショットを取得しようと思いましたが、ドメインのトップページが画像になるだけで、下階層のスクリーンショットが撮れるわけではないことが判明。例えば YouTube にあるビデオリンク集を作ると、すべて同じ見た目になってしまうわけです。そこで今回はScreenCasaを使ってスクリーンショット画像を取得。無料で YouTube のビデオもちゃんと内容が分かる画像で生成されます。画像の取得と貼付けも JavaScript 経由。こうしておけば、たとえ ScreenCasa から違うサービスに移行したり見せ方を大幅に変えたとしても対応がしやすいという利点があります。

エントリーの下には関連情報として Google Ajax Search API を利用した検索結果を表示させています。ほとんどそのままサンプルコードを使っただけですが、検索キーワードはエントリーのタグ (キーワード) を使って欲しいので、以下のように PHP でタグ名を検出し Google さんに検索してもらうように記述しました。

var term = "<?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag->name . ' '; } } ?>"; searchControl.execute(term);

当然ながら、これで正確に関連したサイトを見つけてくるというわけではないですが、エントリーキーワードはいつも 2,3 記述しているようにしているので、的外れなサイトが検索結果に表示されることは今のところなさそうです。

アーカイブページもほとんど同じ形式を継承していますが、こちらは延々とリンクが観覧出来るように日付、キーワード、コメント数といった要素を省きました。昔からあるようなリンク集そのままといった感じですね。実は IE6 では崩れているというわけではないのですが、見え方が他のブラウザとちょっと違うのが今の課題ですね。リンクがクリック出来ないとかエラーが出るというわけではないので、プライオリティは高くないですが検討しておきたい部分ではあります。今後リンクタイプのビジュアル面の調整やサイドバーにも手を加えて行きます。リンクタイプが終わると比較的フォーマットが近いまとめタイプもすぐに終わりそうな予感。