太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログにトラックバック機能を拡張するウィジット


本スクリプトは利用不可となりました

はてなブログにトラックバック機能を拡張するウィジット

 はてなブログにトラックバック機能を実装する方法について考えていたのですが、サーバーサイド処理を『Pipes: Rewire the web』に代行させることで実現できました。『Pipes: Rewire the web』はWeb上の情報を変換する処理をグラフィティカルに行える環境であり、基本無料です。仮想サーバーを自前で用意する方式は負担が大きかった。

特徴


  • はてなブックマークの機能に依存しているため、表示エントリにはブックマークが必要となります*1
  • 自身のブログ内での言及は表示しません*2
  • スパムブログまたは非表示希望者については非表示リストをサーバーサイドで管理してます

スクリプト配置

 スマートフォン表示をする場合には当該チェックボックスをONにしておきます。

f:id:bulldra:20131108060151p:plain

 以下のスクリプトをデザイン画面におけるエントリ下の部分に配置します。CSSクラスとブログのURL等については各自変更をお願いします。

<style>
.entry-list .hatena-module-foot {
  font-size: 12px;
}
</style>
<span id="trackback_entry" class="hatena-module-foot"></span>

<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

{
/* この辺を自分のブログに合わせて変更 */
var blogURL = "";
var viewNUM = 4;
var fetchNUM = 20;
var headerTITLE = '<h3>トラックバック一覧</h3>'

/* コピーライトっぽいの(削除) */
var copyRIGHT = '';

var myUrl = location.href;
if(!(myUrl.indexOf('http') === 0)) {
  myUrl = blogURL;
}

/* スクリプトを生成してheadに追加 */
var userScript = document.createElement('script');
userScript.type="text/javascript";
userScript.src='http://b.hatena.ne.jp/entry/jsonlite/?url=' 
          + encodeURIComponent(myUrl) + '&callback=callbackBookmark';
document.getElementsByTagName('head')[0].appendChild(userScript);

/* コールバック関数 */
var relRssUrl = "";
function callbackBookmark(bookmark) {
  if(bookmark) {
  
    /* eid取得 */
    var eid = bookmark.eid;
    if(eid == '') {
      return;
    }
    
    
    /* このエントリーを含むエントリー取得URL生成 */
    var relUrl = 'http://b.hatena.ne.jp/fragments/entry.reldiary?'
               + 'key=fragments%2Fentry.reldiary.html%3Aeid%3D'
               + eid + '&ttl=1800&keys=eid%3D' + eid;
    console.log(relUrl);
    relRssUrl = 'http://pipes.yahoo.com/pipes/pipe.run?URL=' 
              + encodeURIComponent(relUrl) 
              + '&_id=da86ac3f59f0ff92c537c0d8d5952b94&_render=rss'
	      + '&blog=' + encodeURIComponent(blogURL);
              + '&num=' + fetchNUM
  } 
}


google.load("feeds", "1");
var entriesTrackBack = new Array();
Array.prototype.shuffle = function() {
    var i = this.length;
    while(i){
        var j = Math.floor(Math.random()*i);
        var t = this[--i];
        this[i] = this[j];
        this[j] = t;
    }
    return this;
}

function initializeTrackBack() {  
  /* feed群の生成 */
  var feed = new google.feeds.Feed(relRssUrl);
  console.log(relRssUrl);

  /* feed読み取り処理 */
  feed.setNumEntries(fetchNUM);
  feed.load(function(result) {
      console.log(result.feed.entries.length);
      if (result.error) {
          ;
      } else if(result.feed.entries.length == 0) {
          ;
      } else {
         createHtmlTrackBack(result.feed.entries);
      }
    });  
}  
  
function createHtmlTrackBack(entriesTrackBack) {
  console.log('createHtmlTrackBack ' + entriesTrackBack.length);
  
  
  entriesTrackBack = entriesTrackBack.shuffle();
  var resultEntries = new Array();
  for(var x = 0; x < entriesTrackBack.length && resultEntries.length < viewNUM; x++) {
      resultEntries.push(entriesTrackBack[x]);
  }
  
  if (resultEntries.length == 0) {
    return;
  }
  
  /* 指定数のHTMLを生成 */ 
  var resultHtml = "";
  for(var x = 0; x < resultEntries.length; x++) {	
    var entry = resultEntries[x];
	var entryTitle = entry.title; 

	/* HTML生成 */
  	var html = '<div class="intro-article-wrapper" style="width: 100%; overflow:auto; margin-bottom:10px;">'
	     + '<a href="' + entry.link + '" target="_blank" rel="nofollow">'
         + '<img src="http://capture.heartrails.com/150x130/shadow?' + entry.link 
		 + '" align="left" width="150" height="130" alt="' 
		 + entryTitle  + '">'
         + '</a><a href="' + entry.link + '" target="_blank" rel="nofollow" style="font-size:110%">'
         +  entryTitle 
		 + '</a> <img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '"style="opacity:0.8;"></div>'
	resultHtml += html;
  }	
  
  /* コンテナに反映 */
  var container = document.getElementById("trackback_entry");
  container.innerHTML = headerTITLE + resultHtml + copyRIGHT;
}

google.setOnLoadCallback(initializeTrackBack);
}
</script>

仕組み

 詳しい仕組みは割愛しますが、こんな感じです。あくまで、はてなブックマークの機能を利用しているため、『「このエントリーを含むほかのエントリー」の表示について - はてなブックマーク日記 - 機能変更、お知らせなど』の仕組みや制限に依存して表示しています。

f:id:bulldra:20131113064705p:plain

 結局は手作りをしてしまいましたが、JQueryのクロスドメイン対応プラグインである『jquery.fn/cross-domain-ajax at master · padolsey-archive/jquery.fn · GitHub』も内部的にはPipesでスクレイピングさせる仕組みのようでした。

 既存の言及通知と大きく違うのは、はてなダイアリーも表示できることです。はてなダイアリーからも意外に言及されてんだって気付きました。

 また『http://sho-yamane.hateblo.jp/entry/2013/11/12/223310』を参考にPC版とスマートフォン版でフォントサイズを切り分けて表示しています。凝ったスタイルもできますが、取り敢えずはシンプルに。

サポートについて

 自己責任でご利用下さい。変更もご自由に。設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたら『Amazon.co.jp』のご利用をお願いいたします。

はてなブログ村にトラックバック文化を

 そもそもの目的であった『感想をブログで書いてもらえると喜びます - はてなブログ グループ』を活性化させるための対応については別途考えたいと思います。簡単に言えば、はてなブックマークとは別枠でブログで言及し合ったものを目立せやすい仕組みを作ろうという話です。例えば、

  • ホワイトリスト方式でメンバーの言及を表示するウィジットをメンバーは標準装備
  • 一定期間における被言及数におけるホットエントリ+言及リストのような外部サイトを用意
  • 上記には連鎖的な言及の一覧表示機能があるとよい

 もちろん外部サイトを用意したところで閲覧者の絶対数が違うので大きなPVには繋がらないでしょうが、話題になっている議題と経緯のようなものは追いやすくなると思いますので、本来の姿に戻せると考えています。その辺については感想をブログで下さい。

 そのような変化も望まなかったり、そもそも対話やお題語りをしたいわけじゃないって人もいると思うので『感想グループの、感想の感想なのだ。 - 犬だって言いたいことがあるのだ。』にもあるとおり、別途グループを用意した方がよいのかなとも思います。「不特定多数に読まれたい」「経緯を知っている人に読まれたい」「私信として読まれたい」といったバランスは人によって違うと思いますし。

とりあえずは、グループ名称をちょっと改訂するところから始めたいと思う。


「この感想はブログで書いてもらってかまいません」 みたいなのはどうかなと思ってる。


あと、


「プロレスをブログでしよう」グループとか、「質問にブログで答えるよ」グループみたいな、色んなやりとりを楽しむグループを新たに作るのも面白いかなとも思う。


誰か作成しませんか。うふふ。


感想グループの、感想の感想なのだ。 - 犬だって言いたいことがあるのだ。感想グループの、感想の感想なのだ。 - 犬だって言いたいことがあるのだ。

ブログをコンテンツ化されたコミュニケーションにも使いたい

 こういう仕組みを作ろうと思ったのは、身内ブクマ云々の問題もあったのですが、そもそもは id:jkondo さんの文章への反発もありました。身内ブクマが云々が起こったのだって、文章によるコミュニケーションを適切に発散させる手段がなかったからという側面があったように思うのです。

twitterの登場によって、文章は短文化し、リアルタイムになりました。facebookの投稿も短文です。コミュニケーションのニーズは、ミニブログやSNSが受け持つことになりました。
ネットで知り合った人や、ともだちとコミュニケーションを取りたければ、twitterやfacebookでつぶやけばよくなりました。


はてなブログにはトラックバックを組み込みませんでした。しかしベータ版開始以降、一度も「トラックバック機能を付けて欲しい」という要望をもらっていません。ブログから、「コミュニケーションツール」としてのニーズが消えてきている事をよく表しています。


なぜ今、ブログなのか - jkondoのはてなブログなぜ今、ブログなのか - jkondoのはてなブログ

 実際にはブロガー同士のやりとりは活発に行われているようにも思います。内輪ノリウゼーって言われるぐらい。ただし個別のやりとりをしながらも、それがコンテンツとして公になっている事を望むという特殊な感覚を持っている人がブロガーには多いように思います。ブコメやTwitter上のコミュニケーションはまさにそうでしょう。

 そんな中でブログ同士の言及は手間のわりにローカルなまま消えてしまうというがあって、ブクマで公にしようという形になっていった部分もあるのだと思います。それが結果として3ブクマの仕組みの相性が良すぎて単純にPVに繋がってしまうなど、もっと即物的な理由が副次的にでてきてしまった側面があるものと思います。私を含めて。

公開されたコミュニケーションのためのトラックバック

 id:mame-tanuki さんも『トラックバック機能は、はてなブログではリストラ対象なのか? - そっと、はてなブログ』において、トラックバック通知は書き手同士の話だけでよいのかと疑問を呈しています。

 しかし、トラックバックで通知する相手とは、はたして言及元のブログ記事の書き手だけだろうか?


 トラックバックは言及元のブログ記事の読者にもアピールするものではないだろうか?少なくとも自分は他人のブログ記事を読む時、トラックバックを見る。面白い論考のブログ記事であれば、それに言及しているブログ記事もさらに面白い論を展開しているのではないか、と期待してトラックバックしているブログ記事をチェックする。


 もちろん読者への通知だってコメント欄に書き込めば事足りるかもしれない。しかし、複数人による短文コミュニケーションで綴られるコメントの場と、一人の個人が自分と向き合いながら時間をかけて推敲し書き上げた長文のブログ記事による言及通知の場とは分けられるべきではないか?


トラックバック機能は、はてなブログではリストラ対象なのか? - そっと、はてなブログトラックバック機能は、はてなブログではリストラ対象なのか? - そっと、はてなブログ

 私のブログはコメント欄を用意していないのですが、それは何かを言うなら自分のブログの読者に対しても同時にすべきですし、経緯を切断すべきではないと考えているからです。実名匿名論争みたいでアレなのですが、「実名である必要はないが顕名であるべき」という形にしないと、まともな対話になりにくいと考えています。

 そもそも話し合って決めるのは無駄だと『「話し合って決める」という幻想 - Chikirinの日記』なんかでも書かれていますが、私としては「こういう視点もある」は求めています。どっちが正しいとかそういう事は平行線でしょうが、その視点を織り込まないと論としての欠落があるということには気付く場合もあるものと思います。

 ただし、それを全ての事についてするのは無理であるため、ある程度の重み付けを考えたいという思いもあります。その中で最上級なのはやっぱり自分のブログを使ってわざわざ書いてくれたものです。そして、読者としてもそれを読むことでさらに深まる部分があると信じています。

 私としては定期的なカーニヴァルを求めているのですが、カーニヴァルで公共圏を占拠するのはマズイので別のレイヤーを用意したいと考えていて、トラックバック文化はひとつの回答だと思います。なのでまずは自分たちで作ってみて試験運用してみようと思います。これで普通のブログを読んだり、書いたりする時間が作れるぞ。

ブログ論壇の誕生 (文春新書)

ブログ論壇の誕生 (文春新書)

関連記事

*1:セルクマでも可

*2:別枠で用意したい