先日はてブへ言及されたコメント一覧を表示するPerlスクリプトを紹介してみました。
しかし、僕もそうなんですけど、それをそのまま自分のBlogなどで表示するのも気が引ける感があります。
元々はてブのコメントなんて「オルタナティブ」なものだし、そもそも全部の記事にそんなコメントなんて付いていないのに恥ずかしい・・。
でも気になる！
という場合のために、先のPerlスクリプトを使った上で常に表示しておくのではなくてBookmarkletで自分の気が向いた時だけこっそり表示できる方法を紹介してみます。
*Bookmarkletからの呼び出しで記事に対応して動的にはてブコメントを表示します。
①まず前回のshowHatebuComments.cgiをセットアップするとともに、以下のJSファイルとprototype.jsも同時にサーバーへアップしておきます。
showHatebuComments.jsはBookmarkletから呼び出すJavaScript本体です。
prototype.jsは必要なライブラリです。こちらからダウンロードして下さい。
showHatebuComments.js
var hbElm = document.getElementsByClassName(‘hBComments’);
for(var i=0; i<hbElm.length; i++) {
var cElm1, cElm2;
cElm1 = document.createElement(‘div’);
cElm1.appendChild(document.createTextNode(‘はてなブックマークのコメント:’));
hbElm[i].appendChild(cElm1);
cElm2 = document.createElement(‘iframe’);
cElm2.setAttribute(‘name’, ‘hatebu’);
cElm2.setAttribute(‘width’, ‘730’);
cElm2.setAttribute(‘height’, ‘100’);
cElm2.setAttribute(‘frameborder’, ‘0’);
cElm2.setAttribute(‘src’, ‘http://サーバー/showHatebuComments.cgi?url=’ + hbElm[i].getAttribute(‘title’));
cElm2.setAttribute(‘marginwidth’, ‘0’);
cElm2.setAttribute(‘marginheight’, ‘0’);
cElm2.setAttribute(‘vspace’, ‘0’);
cElm2.setAttribute(‘hspace’, ‘0’);
cElm2.setAttribute(‘scrolling’, ‘yes’);
hbElm[i].appendChild(cElm2);
}
サーバー名は適切に変更して下さい。
またwidth、heightなんかも適当に。
②次に表示したいページにちょっと細工をします。ここではSeesaaでの例を載せてみます。
管理ページの[デザイン]-[コンテンツ]の[記事]モジュール-[コンテンツHTML編集]からHTMLを編集します。
69行目付近に追加
<% if:diet_log.condition == 0 %>普通<img src="<% site_info.blog_url %>/img/icon/3.gif" width="16" height="17" border="0" alt="普通" /><% /if -%>
<% if:diet_log.condition == 1 %>好調<img src="<% site_info.blog_url %>/img/icon/2.gif" width="16" height="17" border="0" alt="好調" /><% /if -%>
<% if:diet_log.condition == 2 %>絶好調<img src="<% site_info.blog_url %>/img/icon/1.gif" width="16" height="17" border="0" alt="絶好調" /><% /if -%>
<% /if -%>
<% if:article.accept_comment -%>
| <a href="<% article.page_url %>#comment">Comment(<% article.children_count | __or__ | echo(‘0’) %>)</a>
<% /if -%>
<% if:article.accept_tb %>
| <a href="<% article.page_url %>#trackback">TrackBack(<% article.tb_count | __or__ | echo(‘0’) %>)</a>
<% /if -%>
<% if:style.disp_category %>| <a href="<% article_category.page_url %>"><% article_category.name %></a><% /if %>
</div>
</div>
<div class="hBComments" title="<% article.page_url %>">
</div>
</div>
<% /loop -%>
<% if:page_name eq ‘article’ -%>
<% if:individual_article.accept_comment -%>
<div id="comments">
<a name="comment"></a>
<div class="comments-head">この記事へのコメント</div>
これはIFRAMEを動的に生成する先になります。はてブのコメント一覧を表示したい場所に設定して下さい。
保存して再構築します。
③以下のようなBookmarkletを作成します。
javascript:(function(){var s=document.createElement(“script”);s.charset=”UTF-8″;s.src=”http://サーバー/prototype.js”;document.body.appendChild(s);c=document.createElement(“script”);c.charset=”UTF-8″;c.src=”http://サーバー/showHatebuComments.js”;document.body.appendChild(c);})();
サーバー名は適切に変更して下さい。
このBookmarkletを細工したHTMLページを表示して実行することで、動的にコメント一覧を表示するようになります。
どうぞこっそりお使い下さい。
# 但し、同様のBookmarkletで細工していることが知られると他人にもこっそりコメント一覧を表示されることも可能になります。その点ご承知置きの上、どうぞ。