タイトルリスト化した月別・カテゴリー別記事ページに要約を付ける

Blogレイアウトの変更(パンパでガウチョ)

上の記事で書いたように、月別記事ページは元に戻したものの、カテゴリー別記事ページはタイトルだけを列記していましたが、これだとやっぱりわかりづらいような気がしました。

そこでカテゴリー別記事ページの各タイトルに要約を添えてみました。実際のところは、このブログの適当なカテゴリー別記事ページをご覧下さい。

FC2だと要約文を吐き出すテンプレート用の特殊タグが提供されているのですが、livedoorでは見つかりませんでした。

そこで、<$TrackBackAutoDiscovery$>が吐き出す文字列を利用することにしました。<$TrackBackAutoDiscovery$>には、各記事の要約文に相当する文字列が"dc:description"に記述されているからです。

もちろんこの文字列は、HTMLコメントとしてページに埋め込まれているのでこのままではブラウザに表示されません。JavaScriptで"document.body.innerHTML"を操作することによって、HTMLのコメント外に「放り出す」わけです。

カテゴリー別記事ページのHTMLテンプレートは以下のようにしています。

まずタイトルリストを生成するループ部分から…。

<dl class="archives_list"> <CategorizedArticlesLoop> <dt><a href="<$ArticlePermalink$>" title="<$ArticleTitle ESCAPE$>"><$ArticleTitle ESCAPE$></a><span class="notes">( <$ArticleDate$><IfArticleAllowComment> | <a href="<$ArticlePermalink$>#comments">C(<$ArticleCommentCount$>)</a></IfArticleAllowComment> <IfArticleAllowPing>│<a href="<$ArticlePermalink$>#trackback">TB(<$ArticlePingCount$>)</a></IfArticleAllowPing> | <a href="http://blog.livedoor.com/cms/article/edit?id=<$ArticleId$>">Edit</a> ) </span></dt> <$TrackBackAutoDiscovery$> </CategorizedArticlesLoop> </dl>

"<CategorizedArticlesLoop>"で囲まれたループ領域のすぐ外側にdlを配置し、全体を用語と説明形式のリストとし、タイトルと付加情報をdtでマークアップする一方、その直後に各記事についての<$TrackBackAutoDiscovery$>を配置しています。直後に置くのは後でJavaScriptで操作するのに楽だからで、これがポイントです。

ループ領域外側のdlには、class="archives_list"を付与し、後でスタイルを指定できるようにしています。こうするかどうか任意ですが、見栄えを調整しやすいので指定しておいたほうがいいでしょう。

次いで、"dc:description"に係る要約文本体をHTMLコメントの外に出すためのJavaScriptを、bodyの末尾に書き込みます。これはこのままコピペで大丈夫です。

<script type="text/javascript"><!-- var dst = document.body.innerHTML; dst = dst.replace(/dc:creator/g, '<\/dd><!\-\- '); dst = dst.replace(/dc:description=/g,' \-\-><dd>'); document.body.innerHTML = dst; //--> </script>

原理は簡単で要約文の直前文字列"dc:description="を、HTMLコメントの終了を示す"-->"と、タイトルdtの定義文に相当する"<dd>"タグとで置換します。

同じく次の"dc:creator"を、"</dd><!--"で置換します。これで両置換箇所で挟まれた要約文がブラウザに表示されるようになるわけです。

問題は、私の書いた文字列置換用のJavaScriptコードの動作が遅いことです。正規表現とreplaceで一挙に置換できないものなのでしょうか ＞ 達人の方

というわけで今ひとつ踏み切れないのですが、よろしかったらお試しください。

Comments

[1. をかもと]

初めまして、JavaScript 利用させていただきました。
要約をどうやって表示させようかと思っていたんですが、<$TrackBackAutoDiscovery$> の情報を利用することは思いつきませんでした。

[2. すのう]

始めまして。
当方、過去記事が大分溜まってきましたので、過去記事を生かすためにも要約の文書は作れないものかと思案しておりましたところ、こちらのページを見つけまして、これぞ私が求めていたもの！と小躍りして月別、カテゴリ別アーカイブで本記事を参考にしてHTMLの修正をしました。
が、肝心の記事概要部分が文字化けをしてしまいます。
その他の記事題名やコメント部分やトラバ部分は大丈夫なのですが・・・
恐らく当方の何らかの操作ミスだとは思うのですが、その原因がさっぱりわかりません。
文字コード指定か、それとも当方のBLOGがLOVELOGだからかかも知れないのですが・・・
もしお時間取れましたらば、教えていただければと思います。
お忙しいところスイマセン。

[3. すのう]

過去ログの場所がわかり辛いといけませんのでURL貼っておきます。

当方BLOGURL⇒http://blogs.dion.ne.jp/snow/
月別URL⇒http://blogs.dion.ne.jp/snow/archives/2005-06.html
カテゴリ別URL⇒http://blogs.dion.ne.jp/snow/archives/cat_13515.html

月別、カテゴリ別は例として一つづつを抜き出してURL貼っています。
ちなみに位置は、左サイドバーの下のほうで折り畳んでいます。

長々と申し訳ありません。
何卒宜しくお願いします。

[4. kyorecoba]

＞すのうさん
文字化けするのは、LOVELOGのTrackbackAutoDescoveryの文字列がある種のコードに変換されているからなんです。
その点、livedoorと違います。
ですからその変換されたコードを元のEUCJPに変換しなおしてから同じ処理をしたら、正しく表示されると思うのですが、一体どうしたらデコードできるのかわかりません…orz
★ http://nurucom-archives.hp.infoseek.co.jp/digital/escape-codec-library.html
↑も試してみたのですが、だめでした。
すのうさんも調べていただけませんか？
できれば、問い合わせるのが早いのですが…。
『TrackbackAutoDescoveryの日本語文字列はどうすれば、EUCJPの文字コードで読めるようになるのでしょう？』
尚、本来は、LOVELOGのようにコーディングしておくのが、HTMLとしては正しい姿勢だと思います。

[5. すのう]

こんにちは。
早速ＬＯＶＥＬＯＧへ問い合わせて回答が来ましたが、
「お問合せいただきました件につきましては、誠に恐れ入りますが、弊社では詳細はわかりかねます。」
だそうです・・・＿|￣|○
kyorecobaさんにも色々と試して頂いてお手数をおかけしたんですが、ＬＯＶＥＬＯＧからわからないって言われてしまうと、もうどうしようも無いような気がしてきました。

このカスタマイズが、もう私の求めていた本理想だったのですが、致し方ありませんねぇ・・・
色々とご迷惑をおかけして申し訳ありませんでした。

ＰＳ：BlogPeopleへ登録させて頂きました。

[6. kyorecoba]

＞すのうさん
残念でしたね。
『わかりかねます。』というのはなぜでしょうね。システムはlivedoorが作っているのでそのせいだと思われたのでしょうか…。
手が届きそうで届かない…そんな感じです。
LOVELOGには私などよりもよほど詳しい方がいらっしゃいますので、あっさり解決…などということもあるかもしれませんよ。