こんばんは。ppBlogでは、代表的なソーシャルブックマーク（SBM）の被リンク数を記事ごとに表示できる機能が付いていますが、いくつか古いAPIを用いていて、きちんとブックマーク数が取得出来ていないものもありました。なので最新のものを調べたのでメモがてら。

　ppBlogで初めから用意しているSBMは、はてなブックマーク、del.icio.us、livedoorクリップ、Buzzurl（バザール）、Yahoo!ブックマークの５つです。グーグルも付けてはいますが（登録用のアイコン表示のみ）、グーグルには被リンク数を表示するAPIがないみたいなので、今回はスルーします。

　以前は、被リンク数を取得するAPIとして、画像での提供のみのところもあったと思いますが、今では、この５つのどれもがJSON形式^GあるいはXML形式での情報取得に対応しているので、幾分扱いやすくなっています。個別に見ていきましょう。各々、JSON(XML)へのリンクおよびカウンター値の形式を挙げています。カウンターの値は、正規表現などを用いて簡単に取り出せます。

♥はてなブックマーク

http://b.hatena.ne.jp/entry/json/?url=(エンコードしたURL)

JSONでのカウンター取得値："count":"(¥d+)"

♥del.icio.us

http://badges.del.icio.us/feeds/json/url/blogbadge?hash=(md5ハッシュ化したURL)

JSONでのカウンター取得値："total_posts":"(¥d+)"

♥livedoorクリップ

http://api.clip.livedoor.com/json/comments?link=(エンコードしたURL)

JSONでのカウンター取得値："total_clip_count":(¥d+),

♥Buzzurl（バザール）

http://api.buzzurl.jp/api/counter/v1/json?url=(エンコードしたURL)

JSONでのカウンター取得値："users":(¥d+),

♥Yahoo!ブックマーク

http://num.bookmarks.yahoo.co.jp/yjnostb.php?urls=(エンコードしたURL)

XMLでのカウンター取得値：ct="(¥d+)"

　補足しておくと、最後のYahooでの指定ではJSONではなく、以下のようなXMLを返します。直接、カウント数を取得することが出来ます。

<?xml version="1.0" encoding="utf-8" ?>
<results>
<SAVE_COUNT u="http%3A%2F%2Fp2b.jp%2Findex.php%3FUID%3D1188848148" ct="6" />
</results>

　先ほど述べたように、カウント数は、JSON形式や、XML形式で取得できるので、さらにそれをパースして･･･とやっても良いでしょうが、ここはPHPの正規表現のみで簡単に取り出せるので、それで十分でしょう。

　さて、上記で挙げたSBMサービスでは、このようにJSONといった文字列でカウンターを取得できますが、他のSBMサービスによっては、画像カウンターでしか取得できないところもあります。例えば、FC2ブックマーク では、自分の知る限り、画像でのみ被リンク数の取得が可能です。この場合は、どうしたら数字を文字列として取り出せるでしょうか？

　画像で提供しているところでは、たいてい数字を出力する画像ファイルにリダイレクトさせるという手段を講じているので、このリダイレクト先のURLを知ることが出来れば、文字列として取得可能です。PHPを使いたい場合、どうやるか？　FC2を具体例に挙げると、画像カウンター取得URLは以下で与えられます。

http://bookmark.fc2.com/image/users/（取得したいURL）

まず、最初に考えるのは、とりあえず、PHP組み込み関数のfile_get_contents()関数 を用いて、出力してみること。

<?php
$url = 'http://bookmark.fc2.com/image/users/http://p2b.jp/index.php?UID=1188848148';
echo file_get_contents($url); // とにかく書き出してみる
?>

結果は、まぁ当たり前ですが、リダイレクトされた後のPNG画像（ヘッダーを正しく出力していないので文字化けするけど）が出力されます。リダイレクト後のURLは、この場合、被リンク数がゼロなので、

http://bookmark.fc2.com/icons/00000.png

となっています。この00000.pngの部分を取り出すことが出来ればよいわけです。PHPには、最初から色々便利な関数が準備されているので、それを利用します。ここでは、stream_get_meta_data() 関数を使いましょう。この関数を使うことで、まずサーバーが返す情報配列を得ることができて、それを解析すれば、リダイレクト先の情報もゲットできます。この場合は、以下のような配列を返します（一部Xの文字で情報を隠しています）。

Array
(
    [wrapper_data] => Array
        (
            [0] => HTTP/1.1 302 Found /* 多くのクライアントは、このステータスコードをリダイレクトと解釈する */
            [1] => Date: Sun, 03 Aug 2008 00:19:03 GMT
            [2] => Server: XXXXXXXXXXXXXXXXXXXXXXXXXX
            [3] => X-Powered-By: XXXXXXXXXXXXX
            [4] => Set-Cookie: CAKEPHP=XXXXXXXXXXXXXXXXXXXXX; path=/
            [5] => P3P: CP="XXXXXXXXXXXXXX"
            [6] => Location: http://bookmark.fc2.com/icons/00000.png /* リダイレクト先 */
            [7] => Content-Length: 0
            [8] => Connection: close
            [9] => Content-Type: text/html
            [10] => Content-Language: en
            [11] => HTTP/1.1 200 OK
            [12] => Date: Sun, 03 Aug 2008 00:19:03 GMT
            [13] => Server: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            [14] => Last-Modified: Fri, 25 Aug 2006 09:03:28 GMT
            [15] => ETag: "XXXXXXXXXXXXXX"
            [16] => Accept-Ranges: bytes
            [17] => Content-Length: 90
            [18] => Connection: close
            [19] => Content-Type: image/png
            [20] => Content-Language: en
        )

    [wrapper_type] => http
    [stream_type] => tcp_socket
    [mode] => r+
    [unread_bytes] => 90
    [seekable] => 
    [uri] => http://bookmark.fc2.com/image/users/http://p2b.jp/index.php?UID=1188848148
    [timed_out] => 
    [blocked] => 1
    [eof] => 
)

wrapper_dataというキーの値が更に配列になっていて、その中のLocation:という文字列がある行を探し出せばOKです。具体的には以下のような記述になるでしょう。

$url = 'http://bookmark.fc2.com/image/users/http://p2b.jp/index.php?UID=1188848148';

if($fp = @fopen($url, 'r')){
 $meta = stream_get_meta_data($fp);
 foreach($meta['wrapper_data'] as $r) {
  if(substr(strtolower($r), 0, 9) == 'location:') {
   $count = preg_replace('{^.+/(¥d+)¥.(?:png|gif)$}', '¥¥1', $r); /* 画像カウンタはほぼPNGかGIFファイル */
   break;
  }
 }
 $count = sprintf('%d', "$count");
} else $count = 0;

　最新版のutils.phpでは、この画像カウントのものは採用していませんが、この記述を組み込めば、画像カウンターからの取得も可能ですね。

　一応、これを反映させた最新版のutils.phpを添付しておきます。1895行目からのsocialBookmark()関数の中身が変わっています。

添付ファイル： utils.php 

　こんばんは。v1.7.5になってだいぶ安定した気はしますが･･･と言いつつアップデートです。

　ひとつは、自動モブログを有効にしてると、アクセス解析の画面などでエラーが出る場合があると思うので、それに対処するためのutils.phpと（後、ソーシャルブックマークのAPIが変わったのがあるようでそれは今回見送り）、後は、JavaScript関連です。oParts.js に関してですが、サーバーのセキュリティーの設定によっては、IEでの外部HTCファイルの読み込みが出来なくなる可能性もあるので、それに対処しました（うちのところがそうだったんですが）。具体的には、外部HTCファイルの読み込みを止めました。代わりに、みんなが使っているdoScrollメソッドを利用することにしました。もともとは、Diego Perini氏 が見つけた手法です。右に倣えは好きではないけど、この場合、デメリットが見あたらない。

if(client.MSIE){ // IE向けDOMContentLoaded
 (function(){
   try {
     document.documentElement.doScroll("left");
   } catch(e){
     setTimeout(arguments.callee, 1); return;
   }
    F(); // 発火！
 })();
}

　後は、IE８やらSafari３で使えるdocument.querySelectorAllを利用できるなら、そうするようにしました。Firefox3.1でも使えるようになるでしょうし。Nativeな実装なので、ずっと速いです。oParts.query()関数の中で指定しています。

　次。エディタ用のスクリプトeditor.jsです。テキストエリアの高さ（縦幅）を文章の長さにフィットさせる関数をブラッシュアップして、結構正確に高さを合わせるようにしました。

function resizeTextArea(e){
 var MSIE = /*@cc_on!@*/false;
 var cssValue = function(p){ // 実際の諸々のサイズやらを取得する関数
  if(window.opera) e.style.lineHeight = "130%"; // Operaでは、1.3みたいな指定を読んでくれない
  return MSIE ? e.currentStyle[p.replace(/-¥D/, function(m){ return m.charAt(1).toUpperCase()})]
              : getComputedStyle(e, '').getPropertyValue(p);
 }
 var ruler = d.createElement("SPAN"); // テキストエリアのシャドウを作成
 ruler.textData = function(data){ if(MSIE) ruler.innerText = data; else ruler.textContent = data; };
 /* 以下でテキストエリアのサイズに関する情報を取得 */
 ruler.style.cssText += "position: absolute; left: 0; visibility: hidden; white-space: pre;"
                     +  "padding: " + cssValue('padding') + ";"
                     +  "font-size:"+ cssValue('font-size') + ";"
                     +  "line-height:" + cssValue('line-height') + ";"
                     +  "font-family:" + cssValue('font-family') + ";";
 document.body.appendChild(ruler);
 var rows = 1, lines = e.value.split(/¥n/), lineHeight = 17, curWidth = e.clientWidth;
 for (var i = 0, len = lines.length; i < len; i++){
  ruler.textData(lines[i]);
  if(ruler.offsetWidth > curWidth) rows += parseInt(ruler.offsetWidth / curWidth);
 }
 ruler.textData("A¥nZ"); // テキストエリア1行分の高さを知りたい
 lineHeight = ruler.offsetHeight/2; /* これでゲット*/
 document.body.removeChild(ruler);
 e.style.height = lineHeight * (rows + len + 1) + "px"; // rows+lenが見た目のほぼ正確な行数。遊びのために1行足す
}

挙動に関して、どういうのが使い勝手が良いかは、各人の好みによりますが、文字入力に応じてテキストエリアのサイズを自動的に変えたい場合は、editor.jsの778行目にあるコメントアウトを外して

ed.on('keyup', function(){
 resizeTextArea(ed);
});

として下さい。一応、このデモサイト を挙げておきます。

例によって、最新版との差分を添付しておきます。単なる上書きで良いです。最新版のjs/oParts.jsにしたら、もはやjs/ie.htcは不要ですので削除して下さい。

添付ファイル： DIFF080801.zip 

JavaScript  

こんばんは、martinです。

いくつかの不具合やら、動作の改善を施して、バージョン1.7.5としてリリースしました。不具合は、オートセーブ機能やドラフト投稿周りです。あとは、細かいところの動作性の向上です。動作性操作性の向上に関しては、

• エディタ画面で、テキストエリアが複数ある場合(＝複数ページ)、一括して、テキストエリアをトグルする機能を付けた。
• エディタ画面で、テキストエリア下端のリサイズバーのダブルクリックでサイズをトグル出来るように。
• アクセス解析画面で、管理画面やブログトップページへのリンクアイコンを画面左上に固定した。IE6でも機能→このエントリー を活用。
• アクセス解析画面で、「リンク元」ドメインを登録して、まとめて集計できるように。→マイナーなサイトからのリンクを見つけやすく。
• 「エクスプローラー(ppExplorer)」のバージョンアップ。
• エントリー(記事)が複数ページからなり、かつ1ページ目の文字数が720文字以上の場合は、記事の最初の方にも、ページナビが出るようにした。

って、とこです。いつものように、v1.7.4からの差分ファイルを添付しておきます。modules関係は２つ、既存のやつを上書きして下さい。jsファイルもjsディレクトリのものを上書き。stat類は、既存のやつを上書き、２つの画像(アイコン)はstat/iconディレクトリにアップして下さい。

　お試しサイト も、v1.7.5にしました。

[追 記 2008/07/28 09:04:59]

$displen = 5; // トータル数の桁数を設定 

というのがあります。これは、サイトで表示されるアクセス総数の桁数を指定するところです。いつのまにか、7桁必要な数になっていたので、このタイミングで、任意に桁数を指定出来るようにしました。初期設定は、5桁です。

添付ファイル： DIFF080727.zip