2007/02/28

Blogger Widgetで「続きを読む」を自動化。-- 2

本来であればBlogger Templateのマニュアルなりを読んでから取り掛かるべきなんでしょうが、いつもの如く現物合わせでやっています・・・。

Blogger TemplateStyle設定を書き加える事で指定したタグ範囲内を、単独で表示する時とその他の場合で表示/表示を切り替える事で実現するのが常道のようで、これは現在のBetaの取れた新しいBloggerの枠組になる以前に使われていた方法の転用的な物です。この辺りに関してはクリボウさんのページが時系列含めて分かりやすいかと思います。

ですが投稿された記事のURLを変数的な形で<A>タグの参照先として指定できないため、ルールを理解した上で記事のURLを推測するか、投稿後に確認したURLを再編集で書き込む必要があります。

そこで前回のPostではJavascriptを使い描画時に「続きを読む」リンクを動的に作成する機能をWidget内に組み込みました。


他に組み込んでいたScriptとの競合でイベントが無限ループに突入してStack over flowが発生というブラクラのような状態になってしまったりとかって問題もありましたが、現在私の環境(テンプレート)では稼動中です。

今は次の段階として他のテンプレートでの動作に関して検証しています。

基本的に私のテンプレートでのDOMは以下のように構成されています。

<DIV class=”post-body”>には記事本文が、続く<DIV class=”post-footer”>以下に記事へのURLとなるLink<a title=”permanent link” class=”timestamp-link”>で記述されています。

これにより現在のコードはこの”timestamp-link”というclass名を含む<a>タグを探してその内容を利用していますが、そもそもclass名は書式指定であり、これに頼る探索では汎用性に欠けるようです。

そこで他のサイトをInspectorで調べて回ったのですが、<a>タグのtitle=”permanent link” 指定はかなりの割合で設定されているようです。


上記のようにpost- body<div>タグに対してpost-footer<p>タグとなっていますが、記事へのリンクは要素 title=”permanent link”とされた<a>タグ内で記述されています。

つまりはpost-body (本文)のタグと同列のclass=”post-footer”で指定されたタグ内から要素 title=”permanent link”とされた<a>タグからURLを取得するようにすると、現状のかなりのテンプレートでも動作するかと思います

現在はこのような変更と合わせてLoad時間を短縮できるようにコードに手を入れています。またCurrentなソース(Javascipt)はここからダウンロードしてください。

関連のありそうな記事

0 コメント: