【保存版!!】はてブAPIでwebサービスを作りたい全ての人に向けて書きました

• 2014.06.19(Thu) 07:30
• WEB制作

「はてなブックマークを使ったwebサービスを作りたい」「はてブの認証機能をwebサービスに取り入れてみたい」。日本で人気のwebサービス「はてなブックマーク」のAPIをこれから利用しようと思っている人の力になれたらと思い、はてなブックマークAPIの使い方の(ほぼ)全てをまとめました！

1ブックマーク数を取得する

まずは基本的な「ブックマーク数」の取得方法を紹介します。

1-1個別URLのブックマーク数を取得する

下記のようにURLを組み立てることで、指定したURLのブックマーク数を取得することができます。

http://api.b.st-hatena.com/entry.count?url={目的のURL}

例えば、このサイトのトップページのブックマーク数は次のように取得します。

http://api.b.st-hatena.com/entry.count?url=http://syncer.jp/

結果は次のように、ブックマーク数がそのままダイレクトで返ってきます。

4

そのURLのブクマ数が0の場合は、0ではなく、空データが返ってくるので処理にご注意下さい。

0 (0は返らない…)

1-2個別ブックマーク数をPHPで取得するサンプル

以上を踏まえて作成したPHPのサンプルプログラムが下記です。

<?php
//取得するURL(ついでにURLエンコード)
$url = rawurlencode('http://syncer.jp/');

//カウント(空の場合は0扱い)
$count = @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$url}");
if(!$count) $count = 0;

echo "ブックマーク数は{$count}です！";

1-3個別ブックマーク数をJavascriptで取得するサンプル

上記をJavascriptで実現すると次のようになります。Ajax通信にはjQueryを使用しています。

//チェックするURL(ついでにURLエンコード)
var url = encodeURIComponent('http://syncer.jp/');
var count;
 
//Ajax通信
$.ajax({
	url:'http://api.b.st-hatena.com/entry.count?url=' + url,
	dataType:"jsonp",
	success:function(count){
		//カウントが0の場合
		if(count == '') count = 0;

		//カウントを出力
		alert('カウント数は' + count + 'です！');
	},
	error:function(){ alert('通信に失敗しました…。'); },
	complete:function(){ return false; }
});

1-4複数箇所にブックマーク数を出力するJavascriptサンプル

記事一覧画面などで応用できる、複数箇所にブックマーク数を出力するJavascriptのサンプルです。bukuma-countというクラス名を付けたコンテナ(タグ)内の一番後ろにブックマーク数を出力します。data-urlには、ブクマ数を取得するURL(例えばそれぞれの記事のURL)を指定して下さい！

<span class="bukuma-count" data-url="{url1}">B!</span>
<br/><span class="bukuma-count" data-url="{url2}">B!</span>
<br/><span class="bukuma-count" data-url="{url3}">B!</span>
<br/><span class="bukuma-count" data-url="{url4}">B!</span>
<br/><span class="bukuma-count" data-url="{url5}">B!</span>

//ブクマを出力するクラス名
var bukuma_class = 'bukuma-count';

$(function(){
	setTimeout(function(){
		var num = $('.'+bukuma_class).length;
		for(var i=0;num>i;i++){
			var url = $('.'+bukuma_class).eq(i).attr('data-url');
			get_bookmark_count_syncer(i,url);
		}
	},100);
});

function get_bookmark_count_syncer(i,url){
	$.ajax({
		url:'http://api.b.st-hatena.com/entry.count?url='+url,
		dataType:"jsonp",
		success:function(count){ out_bookmark_count_syncer(i,count) },
		error:function(){ out_bookmark_count_syncer(i,0) }
	});
}

function out_bookmark_count_syncer(i,count){
	if(count == '') count = 0;
	$('.'+bukuma_class).eq(i).append(' '+count);
}

1-5webサイトの合計ブックマーク数を取得する

「全てのページをチェックする」などと面倒なことをしなくても、webサイトの合計はてブ数を取得するAPIが用意されています。

IXR_Library.phpを読み込む

このAPIを利用するには、XML-RPCという形式でリクエストを送る必要があります。PHP用にそれを容易にするライブラリ「IXR_Library.php」が存在するのでこちらを利用します。下記サイトからダウンロードし、サーバーにアップロードして、requireで読み込んで下さい。

1サイトの合計ブクマ数を取得するPHPサンプルプログラム

下記が、1サイトの合計ブックマーク数を取得する、PHPのサンプルプログラムです。トップページのURLを指定すればサイト全体の、フォルダのURLを指定すればそのフォルダ内の、合計ブックマーク数を取得します。よかったら参考にしてみて下さい！

	//IXR_Library.phpまでのパス
	require_once '';

	//チェックするサイトのURL
	$url = 'http://syncer.jp/';

	$client = new IXR_Client('http://b.hatena.ne.jp/xmlrpc');
	$client->query('bookmark.getTotalCount',$url);
	$count = $client->getResponse();

	//0の場合で条件分け
	if(!$count) $count = 0;

	//出力
	echo "このサイトの合計ブクマ数は{$count}です！";

2はてブのRSSフィードを取得する

はてブのエントリーを使ってニュースサイトなどを作成するには、RSSを読み込むことになります。カテゴリー別など条件を付けてRSSを読み込む方法を紹介します。下記の基本URLの後に、紹介していくパスを追加して下さい。

http://b.hatena.ne.jp

2-1人気エントリーを読み込む

いわゆる「ホッテントリ」を読み込む方法です。人気記事を収集するwebサービスで有用ですね。

2-2新着エントリーを読み込む

全ての記事を集めたい場合は、新着記事を次々と収集する必要がありますよね。その場合はこちらが有用です。

オプション

上記URLにパラメータを追加することで、新着エントリーフィードの出力条件を絞り込むことができます。

例えば500以上のブックマークがある人気エントリーのみを収集したい場合は、下記のURLを指定します。

http://b.hatena.ne.jp/entrylist?mode=rss&threshold=500 [リンク]

これは盲点なのですが、thresholdを指定しない場合、デフォルトでブックマーク数が3以上のエントリーが出力されます。全てのエントリーを出力したい場合は、1を指定することで可能です。

http://b.hatena.ne.jp/entrylist?mode=rss&threshold=1 [リンク]

2-3特定キーワード・タグで絞り込む

特定の話題に絞った記事リストを作りたい場合に有用です。

オプション

上記URLにパラメータを追加することで、新着エントリーフィードの出力条件を絞り込むことができます。新着エントリーとは微妙に違うのでご注意下さい。

2-4特定URLで絞り込む

例えば、特定サイトのURLを入力するとそのサイトの人気エントリーランキングを出力してくれるwebサービスとかを作る時に便利ですねー。

2-5カテゴリーID

指定できるカテゴリーの種類は下記の通りです。{カテゴリーID}の部分に当てはめてご利用下さいね。

2-6はてブのフィードをPHPで解析する方法

さて、はてブのフィードを様々な条件で取得する方法が分かったと思います。続いては、取得したフィードをサーバーサイドで解析する方法を紹介します。サンプルプログラムの言語はPHPです。タイトルとリンクは(string)で強制的に型変換しておくとデータが崩れません。よろしければ参考にしてみて下さい！

<?php
//取得するフィードURLを指定
$feed = 'http://b.hatena.ne.jp/hotentry?mode=rss';
 
//フィードを取得してオブジェクトに変換
$obj = simplexml_load_string(@file_get_contents($feed));

//個々のエントリーを読み込んでいく
foreach($obj->item as $item){
	//URL
	$url = (string)$item->link;
 
	//エントリーの日付
	$date = $item->children('dc',true)->date;
 
	//タイトル
	$title = (string)$item->title;

	//カテゴリ
	$category = $item->children('dc',true)->subject;

	//ブクマ数
	$count = $item->children('hatena',true)->bookmarkcount;

	//出力
	echo "
[{$category}] - {$title}({$date}) {$count}users
{$url}
";
}

2-7ユーザー個人のブックマークフィードを取得する

これまでは全体のエントリー情報を取得しました。今度は個々のユーザーのブックマーク情報が含まれたフィードを取得してみましょう。そのURLは次のように組み立てます。

http://b.hatena.ne.jp/{ユーザーID}/rss?of={ページ}

1ページで20件ずつ取得することができます。ページの指定は20単位で行ないます。例えば2ページ目(21〜40件目)を取得したい場合はof=20を、3ページ目(41〜60件目)を取得したい場合はof=40を指定して下さい。

例えば、私のブックマークフィードの41〜60件目だったら、下記のようになります。

http://b.hatena.ne.jp/arayutw/rss?of=40 [リンク]

2-8個人のはてブフィードをPHPで解析する方法

個人のはてブフィードをPHPで解析するサンプルプログラムを作成してみました。タイトルとリンクの型変換と、全体のフィードではカテゴリを示していたsubjectが個人フィードではタグを示している点にご注意下さい。よろしければ参考にして下さい！

<?php
//取得するフィードURLを指定
$feed = 'http://b.hatena.ne.jp/arayutw/rss';
 
//フィードを取得してオブジェクトに変換
$obj = simplexml_load_string(@file_get_contents($feed));

//ユーザー名
$name = $obj->channel->title;

//総ブックマーク数
$all = $obj->channel->children('opensearch',true)->totalResults;

//出力
echo "
{$name}さんの総ブクマ数は{$all}です。
";

//個々のエントリーを読み込んでいく
foreach($obj->item as $item){
	//URL
	$url = (string)$item->link;
 
	//エントリーの日付(ついでに整形)
	$date = date('Y/m/d H:i',strtotime($item->children('dc',true)->date));
 
	//コメント
	$comment = (isset($item->description)) ? $item->description : '';
 
	//タイトル
	$title = (string)$item->title;

	//タグ
	$tags = implode(',',(array)$item->children('dc',true)->subject);

	//出力
	echo "
{$title}({$date})
{$tags}「{$comment}」
{$url}
";
}

3はてブのエントリー情報を取得する

さて、前章ではフィードを利用して、エントリーの一覧を取得・解析する方法を紹介しました。続いては、個々のエントリー情報、はてブコメントなどを詳しく取得・解析する方法について紹介します。下記の公式APIを利用します。

3-1エントリー情報のリクエストURL

エントリー情報を取得するためのリクエストURLは次のように組み立てます。

http://b.hatena.ne.jp/entry/jsonlite/?url={目的のURL}

例えば、このサイトのこの記事の情報を取得するには下記のように指定します。アクセスしてみて下さい。

http://b.hatena.ne.jp/entry/jsonlite/?url=http://syncer.jp/schema-entering [リンク]

ちなみに、指定するURLはPHPだったらrawurlencode()を使ってエンコード(特殊文字変換)しておくことをお勧めします。

http://b.hatena.ne.jp/entry/jsonlite/?url=http%3A%2F%2Fsyncer.jp%2Fschema-entering

3-2エントリー情報のJSONデータについて

アクセスすると、下記のJSONデータを取得することができます。コメントがある、ないに関係なく、bookmarksプロパティに個人個人のユーザーのブクマ情報が配列で含まれます。下記は「okyawa」「kimyan」さんの計2つのブクマのみを表示してますが、100個、1000個となるとデータは膨大になりますねー。

{
    "count": "66",
    "bookmarks": [
        {
            "timestamp": "2014/06/16 12:34:43",
            "comment": "",
            "user": "okyawa",
            "tags": [
                "schema.org",
                "google",
                "SEO",
                "Microdata"
            ]
        },
        {
            "timestamp": "2014/06/16 00:30:36",
            "comment": "Googleリッチスニペット対策！初心者向けにスキーマ(http://t.co/8WBe4ZB7jP)のマークアップ方法を徹底的に教えるよ！ こういうの参考にして、自分なりにもまとめていかないと。 細かいけどきちんと資料化する。",
            "user": "kimyan",
            "tags": [

            ]
        },
        ...
    ],
    "url": "http://syncer.jp/schema-entering",
    "eid": "199719462",
    "title": "Googleリッチスニペット対策！初心者向けにスキーマ(Schema.org)のマークアップ方法を徹底的に教えるよ！ - Syncer",
    "screenshot": "http://screenshot.hatena.ne.jp/images/200x150/9/f/4/7/2/ba04f38bd7becdc15f98ddc98bded4996ec.jpg",
    "entry_url": "http://b.hatena.ne.jp/entry/syncer.jp/schema-entering"
}

ちなみに取得したJSONデータはインデント(改行など)されてないので非常に見難いです…。そんな時、確認用に次のツールが役に立つのでお勧めです！

エントリー情報のJSONデータの内容

JSONデータのそれぞれのプロパティは、下記のデータを含んでいます。

3-3はてぶコメント(ブコメ)のパーマリンク

後々、ブコメに付いたスター数の取得方法で必要になるのが、個々のブコメのパーマリンクです。そのURLは下記の法則になっています。

http://b.hatena.ne.jp/{ユーザーID}/{コメントの日付(YYYYMMDD)}#bookmark-{エントリーID}

例えば先ほどのサンプルJSONデータにある「kimyan」さんのコメントのパーマリンクは次の通りになります。なお、エントリーIDはJSONデータのeidプロパティに含まれています。

http://b.hatena.ne.jp/kimyan/20140616#bookmark-199719462 [リンク]

3-4PHPで個々のはてブエントリー情報を解析するサンプルプログラム

それではPHPを使って、はてブコメントなどを出力してみましょう。下記がサンプルプログラムです。非常にシンプルなものですが、個々のデータにアクセスする方法を参考にしていただければ…、と思います！

<?php
//エントリー情報を取得するURL(ついでにURLエンコード)
$entry = rawurlencode('http://syncer.jp/schema-entering');

//JSONデータを取得してオブジェクトに変換
$obj = json_decode(@file_get_contents("http://b.hatena.ne.jp/entry/jsonlite/?url={$entry}"));

//情報を取得
	//タイトル
	$title = $obj->title;

	//URL
	$url = $obj->url;

	//エントリーID
	$id = $obj->eid;

	//スクリーンショット画像のURL
	$img = $obj->screenshot;

	//はてブコメント欄のURL
	$page = $obj->entry_url;

	//出力
	echo "<h2><a href=\"{$url}\">{$title}</a></h2><p><img src=\"{$img}\"><br/>(<a href=\"{$page}\">コメント一覧ページはこちら</a>)</p>";

//個々のブクマ(コメント)を取得していく
	foreach($obj->bookmarks as $item){
		//ユーザーID
		$user = $item->user;

		//ユーザーアイコン
		$icon = "http://cdn1.www.st-hatena.com/users/".substr($user,0,2)."/{$user}/profile.gif";

		//コメント
		$com = $item->comment;

		//ブクマした日付(ついでに整形)
		$date = date('Y/m/d H:i',strtotime($item->timestamp));

		//タグ一覧
		$tags = implode(',',(array)$item->tags);

		//出力
		echo "<p><img src=\"{$icon}\" width=\"30\" height=\"30\"/>{$user} {$com}({$date}) {$tags}</p>";
	}

3-5Javascriptで個々のはてブエントリー情報を解析するサンプルプログラム

ついでにサーバーサイドではなく、クライエントサイド(Javascript)で同じようにエントリー情報を取得・出力する方法を紹介します。Ajax通信にはjQueryを利用するので、あらかじめ読み込んで下さい。

//エントリー情報を取得するURL(ついでにURLエンコード)
var entry = encodeURIComponent('http://syncer.jp/schema-entering');

//Ajax通信
$.ajax({
	url:'http://b.hatena.ne.jp/entry/jsonlite/?url=' + entry,
	dataType:"jsonp",
	success:function(obj){
		//タイトル
		var title = obj.title;

		//URL
		var url = obj.url;

		//エントリーID
		var id = obj.eid;

		//スクリーンショット画像のURL
		var img = obj.screenshot;

		//はてブコメント欄のURL
		var page = obj.entry_url;

		//出力
		$('body').append('<h2><a href="' + url + '">' + title + '</a></h2><p><img src="' + img + '"><br/>(<a href="' + page + '">コメント一覧ページはこちら</a>)</p>');

		//個々のブクマ(コメント)を取得していく
		for(var i in obj.bookmarks){
			//ユーザーID
			var user = obj.bookmarks[i].user;

			//アイコン
			var icon = 'http://cdn1.www.st-hatena.com/users/' + user.substr(0,2) + '/' + user + '/profile.gif';

			//コメント
			var com = obj.bookmarks[i].comment;

			//ブクマした日付
			var date = obj.bookmarks[i].timestamp;

			//タグ一覧
			var tags = obj.bookmarks[i].tags.join(',');

			//出力
			$('body').append('<p><img src="' + icon + '" width="30" height="30"/>' + user + ' ' + com + '(' + date + ') ' + tags + '</p>');
		}

	},
	error:function(){ alert('通信に失敗しました…。'); },
	complete:function(){ return false; }
});

4はてブユーザーのプロフィールアイコンを取得する

はてブユーザーのプロフィールアイコンを取得する方法を紹介します。

4-1アイコン画像のURLについて

はてブユーザーのプロフィールアイコンを利用したい場合、アイコン画像のURLは下記の通りに指定します。

http://cdn1.www.st-hatena.com/users/{ユーザーIDの頭2文字}/{ユーザーID}/profile.gif

例えば、私のはてなブックマークのIDはarayutwなので、アイコン画像のURLは下記の通りとなります。試しに右側のリンクからURLにアクセスしてみて下さいね。画像サイズは64x64です。

http://cdn1.www.st-hatena.com/users/ar/arayutw/profile.gif [リンク]

4-2アイコンの画像サイズを調整する

ファイル名のprofileに文字を加えることで、画像サイズを調整することができます。例えば_sを付けることで、なお、画像サイズが16x16になります。

.../profile_s.gif [リンク]

_lを付けると32x32になります。正直、この細かい画像サイズ指定が役に立つことはないとは思いますが…。

.../profile_l.gif [リンク]

5フォロワー数を取得する

はてブのフォロワー(お気に入られ)数を取得し、webサービスに組み込む方法を紹介します。

5-1フォロワー数を取得できるURL

あまり機能している印象はないんですが、「はてブ」にも一応フォローシステムがあります。TwitterやYoutubeみたいに、フォロワー数をブログのプロフィール欄なんかに表示したい時がありますよね。取得するための公式APIはありませんが、下記のページから取得することができます。

http://b.hatena.ne.jp/{ユーザーID}/sidebar [リンク]

5-2はてブのフォロワー数(お気に入られ)を取得するPHPプログラム

公式の機能ではないので、取得間隔は1日ごとくらいにしておきましょう。下記は1日間隔で「はてブ」のフォロワー数を取得し、自分のサーバーの指定ファイルに記録するPHPプログラムです。

<?php
//はてなID
$id = 'arayutw';
 
//フォロワー数を記録するファイル
$file = './hatena_follower.txt';
 
//前回取得から1日経過してた場合のみ情報を取得
if(($_SERVER['REQUEST_TIME']-86400)>filemtime($file)){
  //フォロワー人数取得
  $data = @file_get_contents("http://b.hatena.ne.jp/{$id}/sidebar");
  $data = explode('a href="/'.$id.'/follower">',$data);
  $data = explode('</a></li>',$data[1]);
  $follower = $data[0];
  
  //自分のサーバーファイルに記録
  file_put_contents($file,$follower);
  
//1日経過してない場合は記録してあるフォロワー数を取得
}else{
  $follower = @file_get_contents($file);
}
  
//フォロワー数を出力
echo ($follower) ? $follower : 0;

5-3オリジナルのフォロワーボタンを設置してみよう

はてブの、特定のユーザーをフォローするためのURLは下記のようになっています。

http://b.hatena.ne.jp/{ユーザーID}/follow.follow

例えば私をフォローするためのリンクは下記の通りです。即フォローにはなりませんので、試しにアクセスしてみて下さいね。

http://b.hatena.ne.jp/arayutw/follow.follow [リンク]

簡単なものではありますが、下記のようにオリジナルのフォローボタンを設置してみると、ブログの独自色が強くなりそうですねー。よろしければお試し下さい。

.hatena-follower-wrapper{
	overflow:hidden;
	font-family:'Verdana';
	color:#fff;
}

.hatena-follower-wrapper p{
	background:#008fde;
	padding:3px 6px;
	float:left;
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	transition:all 0.4s;
}

.hatena-follower-wrapper p:hover{
	background:#00A5DE;
}

.hatena-follower-wrapper a{
	color:#fff;
	text-decoration:none;
}
 
.hatena-follower-mark{
	padding-right:12px;
	font-size:15px;
	font-weight:700;
}
 
.hatena-follower-count{
	font-size:15px;
	font-weight:700;
}
 
.hatena-follower-text{
	font-size:12px;
}

<div class="hatena-follower-wrapper">
	<a href="http://b.hatena.ne.jp/arayutw/follow.follow" target="_blank">
		<p>
			<span class="hatena-follower-mark">B!</span>
			<span class="hatena-follower-count">22
				<span class="hatena-follower-text">followers</span>
			</span>
		</p>
	</a>
</div>

6はてブコメントのスターの数を取得する

はてブユーザーのコメントを扱う場合、「コメントに付いたスターの数を取得したい」と思うことがありますよね？例えば人気コメントなんかを表示するには、はてなスター数を元にデータを整形しなければなりません。

6-1ユーザーがこれまでにブコメで獲得した合計スター数を取得する方法

まず基本として、あるURL(ブログ)に付いた「はてなスター数」を取得するには下記のようにURLを組み立てます。

http://s.hatena.ne.jp/blog.json?uri={目的のURL}

本来、はてなブログに付いたスター数をカウントするAPIですが、実はブコメに付いたスター数もカウントしてくれるのをご存知でしょうか？あるユーザーがこれまでにブコメで獲得したスター数の合計を取得するには、URLの部分に、マイページのURLを指定します。

例えば、私がその口の悪さで稼いだ合計スター数を取得してみましょう。URLは下記の通り指定します。あとで再度触れますが、指定するURLはエンコードしておいた方がいいでしょう。

http://s.hatena.ne.jp/blog.json?uri=http://b.hatena.ne.jp/arayutw/ [リンク]

リクエストすると、下記のようなJSONデータを取得することができます。このうち、countプロパティに、色別のスター数のデータが入っています。star_countプロパティが、全スターの合計数です。私は今まで合計1,040個のスターを獲得してきたというわけですね。

ちなみに、その種類のスター数が0個の場合、0というデータではなく、プロパティ自体が存在しないのでご注意下さい。私はブルースターを1個も獲得していません。

{
    "count": {
        "green": 5,
        "red": 2,
        "blue": 0, (獲得してないから存在しない…)
        "yellow": "1033"
    },
    "title": "はてなブックマーク - arayutw のブックマーク",
    "uri": "http://b.hatena.ne.jp/arayutw/",
    "star_count": 1040
}

6-2個別のはてブコメントに付いたスター数を取得する方法

今度は合計ではなく、個別のコメントに付いた「はてなスター」の数を取得してみましょう。合計数を取得した時のものとは違って、リクエストURLは下記になります。

http://s.hatena.com/entry.json?uri={ブコメのパーマリンク}

ブコメのパーマリンクってどこ？

ブコメのパーマリンクは、コメント一覧画面の名前のリンクをクリックした時のものです。例えば下記です。はてブのエントリー情報から組み立てる場合は「こちら」を参考にして下さいね。

http://b.hatena.ne.jp/arayutw/20140615#bookmark-199755390

ブコメの「はてなスター」の数を取得するには、このURLを指定すればいいというわけですねー。ただ注意点があって、#を含むため「URLエンコード(特殊文字変換)」をしてやる必要があります。URLエンコードをするには、PHPならrawurlencode()を使います。「とりあえずブラウザで確認したい」という人には下記のオンラインツールが便利です。

ブコメのスター数を取得してみる

さて、以上を踏まえて組み立てると下記のようになります。リンクをクリックしてみて下さいね。

http://s.hatena.com/entry.json?uri=http%3A%2F%2Fb.hatena.ne.jp%2Farayutw%2F20140614%23bookmark-199497578 [リンク]

リクエストすると、下記のようなJSONデータを取得することができます。

{
    "entries": [
        {
            "stars": [
                {
                    "quote": "",
                    "name": "cropwataru"
                },
                {
                    "quote": "",
                    "name": "akihiko810"
                },
                {
                    "quote": "",
                    "name": "enkunkun"
                }
            ],
            "can_comment": 0,
            "colored_stars": [
                {
                    "stars": [
                        {
                            "quote": "",
                            "name": "netcraft"
                        }
                    ],
                    "color": "red"
                },
                {
                    "stars": [
                        {
                            "quote": "",
                            "name": "netcraft"
                        }
                    ],
                    "color": "green"
                }
            ],
            "uri": "http://b.hatena.ne.jp/arayutw/20140614#bookmark-199497578"
        }
    ],
    "can_comment": 0
}

ブコメのスター数の算出方法

合計数を取得した時とは違って、数を算出するのが面倒です。starsのプロパティにはイエロースターを付けた全ユーザーが配列となって含まれています。この場合、「cropwataru」「akihiko810」「enkunkun」さんから1つずつ、合計3つのイエロースターをもらったということです。

ちなみに同じ人が2つスターを付けた場合は、次のようにダブる形になります。

{
    "entries": [
        {
            "stars": [
                {
                    "quote": "",
                    "name": "enkunkun"
                },
                {
                    "quote": "",
                    "name": "enkunkun"
                },
                {
                    "quote": "",
                    "name": "enkunkun"
                }
            ],
            ...
        }
    ],
    ...
}

カラースターの算出方法

カラースターの場合は、colored_starsプロパティの中に、それぞれの色のデータが配列となって入っています。例えば下記は、colorプロパティにあるred、つまりレッドスターを、「netcraft」さんからもらっているということになります。グリーンスターの数も同じように算出します。グリーンスターの場合は「yamada」「tarou」さんからもらっていて合計2つです。

{
    "entries": [
        {
            ...
            "colored_stars": [
                {
                    "stars": [
                        {
                            "quote": "",
                            "name": "netcraft"
                        }
                    ],
                    "color": "red"
                },
                {
                    "stars": [
                        {
                            "quote": "",
                            "name": "yamada"
                        },
                        {
                            "quote": "",
                            "name": "tarou"
                        }
                    ],
                    "color": "green"
                }
            ],
            ...
        }
    ],
    ...
}

6-3PHPではてなスターを取得するサンプルプログラム

はてなスター数を取得するためのサンプルプログラムを作成してみました。スペースの関係上、最低限のことしかしてませんが、参考にしたり、カスタマイズの下地としてよろしければご利用下さい！

PHPでユーザーの合計はてなスター数を取得するサンプル

<?php
//合計スター数の取得
	//ユーザーページのURLを指定(ついでにエンコード)
	$user = rawurlencode('http://b.hatena.ne.jp/arayutw/');

	//JSONデータを取得してそのままオブジェクト形式に変換
	$obj = json_decode(@file_get_contents("http://s.hatena.ne.jp/blog.json?uri={$user}"));

	//それぞれの合計スター数を算出(0の場合に備えて三項演算子で条件分け)
	$red = (isset($obj->count->red)) ? $obj->count->red : 0;
	$green = (isset($obj->count->green)) ? $obj->count->green : 0;
	$yellow = (isset($obj->count->yellow)) ? $obj->count->yellow : 0;
	$blue = (isset($obj->count->blue)) ? $obj->count->blue : 0;
	$all = (isset($obj->star_count)) ? $obj->star_count : 0;

	//出力する
	echo "
このユーザーはこれまで、赤{$red}個、緑{$green}個、黄{$yellow}個、青{$blue}個(合計{$all}個)のスターをGETしました。
";

PHPで個々の「はてブコメント」のスター数を取得するサンプル

<?php
//ブコメ別スター数の取得
	//ブコメのパーマリンクを指定(ついでにエンコード)
	$bukome = rawurlencode('http://b.hatena.ne.jp/mad_ochi/20130108#bookmark-93');

	//JSONデータを取得してそのままオブジェクト形式に変換
	$obj = json_decode(@file_get_contents("http://s.hatena.com/entry.json?uri={$bukome}"));

	//黄色スター数を算出(0の場合に備えて条件分け)
	$yellow = (isset($obj->entries[0]->stars)) ? count((array)$obj->entries[0]->stars) : 0;

	//カラースター数を算出
	$color = array('red'=>0,'blue'=>0,'green'=>0);
	foreach($obj->entries[0]->colored_stars as $item){
		$color[$item->color] = (isset($item->stars)) ? count((array)$item->stars) : 0;
	}

	//合計スター数を算出
	$all = $yellow + $color['red'] + $color['blue'] + $color['green'];

	//出力する
	echo "
このコメントには、赤{$color['red']}個、緑{$color['green']}個、黄{$yellow}個、青{$color['blue']}個(合計{$all}個)のスターがついてます。
";

7はてなアカウントでoauth認証をする

このホームページのコメント欄では、はてなアカウントを利用してユーザー認証をするシステムがあります。他には有名どころでいえばGunosyで「はてなアカウント」を使った認証システムがありますね。その認証システムを実装する方法をサンプルプログラムと一緒に紹介します。

7-1アプリケーションを登録する

認証システムを作成するには、はてなのwebサーバー上にアプリケーションを登録する必要があります。下記のURLにアクセスし「OAuth開発者向け設定ページ」というリンクから、アプリケーションを登録して下さい。パスワードチェック後、画面一番下に「新しいアプリケーションの追加」というボタンがあるので、そこから行ないます。

アプリケーションの情報を入力

簡単に見ていきましょう。アプリの登録は簡単です。まずはアプリ名、アプリの説明、アプリがあるURL(自分のブログ・ホームページ)を入力します。ちなみにアプリケーションロゴ・アプリケーションアイコンは登録しようとしてもエラーが出てできないので、無視して下さい。

コンシューマーキーとコンシューマーシークレットを確認

続いて、画面中断にある「コンシューマーキー(OAuth Consumer Key)」「コンシューマーシークレット(OAuth Consumer Secret)」を確認(メモ)します。

アプリのパーミッションを設定

続いてアプリの権限を設定します。必要だと思う権限にチェックを入れて下さい。例えばこのホームページのコメント欄の場合は、ユーザーの認証を行なうだけなのでread_publicのみの設定です。アプリを通してブックマークの追加・削除をしたい場合はwrite_publicにもチェックが必要です。

アプリの「現在の状態」を確認する

最後に念のため、アプリのステータスを確認して下さい。「状態」が「有効」になっていれば大丈夫です。問題がなければ「変更する」をクリックしてアプリ登録は完了でございます。

7-2PHPではてなの認証システムを作成する

早速ではありますが、はてなの認証システムを通して、ユーザーの「アクセストークン」「アクセストークンシークレット」を取得してみましょう。この「アクセストークン」「アクセストークンシークレット」を利用すると、ブックマークの追加・削除ができるようになります。

OAuthリクエスト用の関数

ざっくりとした説明ですが、はてなの認証はOAuth1.0という規格に沿っています。このOAuth1.0はリクエストをする際に、パラメータに合わせて「署名」を作る必要があります。この「署名」を作るための関数が下記です。$key、$pass、$urlを設定して下さい。

内容を現時点で詳しく理解する必要はないと思います。おまじないのようなものだと思って下さい。この2つの関数をいつでも呼び出せるようにしておいて下さいね。

//OAuthリクエスト用の関数
function hatena_oauth($request_url,$method,$parameters){
	$key = '';		//コンシューマーキー
	$pass = '';		//コンシューマーシークレット
	$url = '';		//このプログラムのURL
 
	global $http_response_header;
	$oauth_parameters = array(
		'oauth_callback' => $url,
		'oauth_consumer_key' => $key,
		'oauth_nonce' => microtime(),
		'oauth_signature_method' => 'HMAC-SHA1',
		'oauth_timestamp' => time(),
		'oauth_version' => '1.0'
	);
	if(isset($parameters['oauth_token'])){$oauth_parameters['oauth_token'] = $parameters['oauth_token'];unset($parameters['oauth_token'],$oauth_parameters['oauth_callback']);}
	if(isset($parameters['oauth_token_secret'])){$oauth_token_secret = $parameters['oauth_token_secret'];unset($parameters['oauth_token_secret']);}else{$oauth_token_secret = '';}
	if(isset($parameters['oauth_verifier'])){$oauth_parameters['oauth_verifier'] = $parameters['oauth_verifier'];unset($parameters['oauth_verifier']);}
	$tail = ($method === 'GET') ? '?'.http_build_query($parameters,'','&',PHP_QUERY_RFC3986) : '';
	$all_parameters = array_merge($oauth_parameters,$parameters);
	ksort($all_parameters);
	$base_string = implode('&',array(rawurlencode($method),rawurlencode($request_url),rawurlencode(http_build_query($all_parameters,'','&',PHP_QUERY_RFC3986))));
	$key = implode('&',array(rawurlencode($pass),rawurlencode($oauth_token_secret)));
	$oauth_parameters['oauth_signature'] = base64_encode(hash_hmac('sha1', $base_string, $key, true));
	$data = array('http'=>array('method' => $method,'header' => array('Authorization: OAuth '.http_build_query($oauth_parameters,'',',',PHP_QUERY_RFC3986),),));
	if($method !== 'GET') $data['http']['content'] = http_build_query($parameters);
	$data = @file_get_contents($request_url.$tail,false,stream_context_create($data));

	return $data ? $data : false;
}

//GETクエリ形式の文字列を配列に変換する関数
function get_query($data){
	$ary = explode("&",$data);
	foreach($ary as $items){
		$item = explode("=",$items);
		$query[$item[0]] = $item[1];
	}
	return $query;
}

認証をするための処理

先ほど紹介した関数を利用して、認証処理をPHPで実装してみたのが次のコードです。$scopeにはアプリの権限を指定して下さい。登録した時と同じ内容じゃないとエラーが発生します。指定するのは「スコープ名」です。

<?php
//アプリの権限(複数の場合は,で区切る)
$scope = 'read_public,write_public';

//セッションスタート
session_start();

//アクセストークンを取得
if(isset($_GET['oauth_token']) && is_string($_GET['oauth_token']) && !empty($_GET['oauth_token']) && isset($_GET['oauth_verifier']) && is_string($_GET['oauth_verifier']) && !empty($_GET['oauth_verifier'])){

	//アクセストークンをリクエストする
	$query = get_query(hatena_oauth('https://www.hatena.com/oauth/token','POST',array('oauth_token'=>$_GET['oauth_token'],'oauth_token_secret'=>$_SESSION['oauth_token_secret'],'oauth_verifier' => $_GET['oauth_verifier'])));

	//セッション終了
	$_SESSION = array();
	session_destroy();

	//エラー判定
	if(!$query){
		echo '
アクセストークンの取得に失敗しました…。
';
		exit;
	}

	//情報の整理
	$name = rawurldecode($query['url_name']);
	$display = rawurldecode($query['display_name']);
	$token = rawurldecode($query['oauth_token']);
	$secret = rawurldecode($query['oauth_token_secret']);

	//出力する
	echo "{$name}({$display})のアクセストークンは{$token}で、アクセストークンシークレットは{$secret}です！";
	exit;
}

//リクエストトークンの取得
if(!$query = get_query(hatena_oauth('https://www.hatena.com/oauth/initiate','POST',array('scope'=>$scope)))){
	echo '
リクエストトークンの取得に失敗しました…。もしかしたら「コンシューマーキー」「コンシューマーシークレット」「権限」の設定が違っているかもしれません…。
';
	exit;
}

//セッションに保存
session_regenerate_id(true);
$_SESSION['oauth_token_secret'] = rawurldecode($query['oauth_token_secret']);

//認証画面へリダイレクト
header('Location: https://www.hatena.ne.jp/oauth/authorize?oauth_token='.$query['oauth_token']);
exit;

7-3アクセストークンを確認する

先ほどのサンプルプログラムを起動して認証を進めると、アクセストークンとアクセストークンシークレットがブラウザに表示されるはずです。webサービスではこのようにして得られるユーザーのアクセストークン、アクセストークンシークレットを利用して、何らかのサービスを実現します。サンプルでは画面上に出力するだけでしたが、必要な場合はデータベースなどに保存して下さい。

例えば目的が「認証」だけならば、アクセストークン、アクセストークンシークレットが得られた時点で本人確認(=そのユーザーがはてなユーザーであること)扱いにしていいと思います。

プロフィールを取得してみる

アクセストークンとアクセストークンシークレットが有効か、を確認します。例えば、下記のリクエストで「はてなユーザー」のプロフィールを取得することができます。先ほど紹介した「OAuth認証用の関数(hatena_oauth())」を利用して取得できるか試してみましょう。$access_token、$access_token_secretに値を設定して下さい。

<?php
//アクセストークンとアクセストークンシークレット
$access_token = '';
$access_token_secret = '';

//リクエストトークンの取得
if(!$json = hatena_oauth('http://n.hatena.com/applications/my.json','GET',array('oauth_token'=>$access_token,'oauth_token_secret'=>$access_token_secret))){
	echo '
アクセストークンかアクセストークンシークレットがおかしいです…。偽物？
';
	exit;
}

//取得したJSONデータをオブジェクトに変換
$obj = json_decode($json);

//出力
echo "{$obj->display_name}さんのアクセストークンとアクセストークンシークレットが本物であることを確認しました。";

アクセストークンとシークレットが有効なことを確認する

「アクセストークン」と「アクセストークンシークレット」を使って、このようにプロフィール情報を取得できれば、成功です。

関数の使い方について

サンプルで紹介した関数(hatena_oauth())は、OAuth認証が必要な他のAPIでも利用することができます。多分ですが、TumblrとかTwitterなど、OAuth1.0規格のAPIなら利用できるはずです。下記のように利用して下さい。

hatena_oauth(
	第1引数：{リクエストURL},
	第2引数：{リクエストメソッド},
	第3引数：{パラメータ(連想配列)}
)

例えば、はてなブックマークの「FEED URI」を利用してみましょう。詳細は下記ページをご覧下さい。

リクエストは次のようになります。パラメータにはoauth_token(アクセストークン)とoauth_token_secret(アクセストークンシークレット)を加えて下さいね。

hatena_oauth(
	'http://b.hatena.ne.jp/atom/feed',
	'GET',
	array(
		'oauth_token'=>$access_token,
		'oauth_token_secret'=>$access_token_secret
	)
)

サンプルPHPは次のようになります。アクセストークンとアクセストークンシークレットの持ち主(ユーザー)のブックマークフィードが取得できれば成功です。

<?php
//アクセストークンとアクセストークンシークレット
$access_token = '';
$access_token_secret = '';

//APIリクエスト
$json = hatena_oauth(
	'http://b.hatena.ne.jp/atom/feed',
	'GET',
	array(
		'oauth_token'=>$access_token,
		'oauth_token_secret'=>$access_token_secret
	)
);

//出力
var_dump($json);

8ブックマークを追加・削除する

前章ではOAuth認証を利用した「アクセストークン」「アクセストークンシークレット」の取得方法を紹介しました。それでは、今回は取得できたそれらを使って、ブックマークを追加したり、削除したりしてみましょう。なお、前章で紹介したOAuth認証用の関数(hatena_oauth())を利用します。

8-1ブックマークを追加する

それではPHPを利用して、ブックマークを追加してみましょう。前章を読んでいる方は、延長上なのですぐに理解できるはずです。まず、ブックマークを新規追加するための条件を下記ページで確認してみましょう。

下記の条件になっていることが確認できます。

リクエストの条件

指定できるパラメータ

ちなみにtagsで複数の値を指定する方法が不明です…。空白で区切ってもカンマで区切っても1つのタグ名で登録されてしまいました。タグを複数指定したい場合は、コメントの最初に[タグ1][タグ2]と入れることで、複数のタグを設定することができます。

また、当然ですがpost_twitterなどを利用するには、そのユーザーが「はてなブックマーク」の設定でアプリ連携を有効にしている必要があります。

ブックマークを追加するサンプルプログラム

以上の情報を元に作成したPHPのサンプルプログラムが下記です。よろしければ試してみて下さい。hatena_oauth()の読み込みを忘れないで下さいね！

<?php
//アクセストークンとアクセストークンシークレット
$access_token = '';
$access_token_secret = '';

//ブックマークするURL
$url = 'http://syncer.jp/';

//リクエストを送信する
$json = hatena_oauth(
	'http://api.b.hatena.ne.jp/1/my/bookmark',
	'POST',
	array(
		'oauth_token' => $access_token,
		'oauth_token_secret' => $access_token_secret,
		'url' => $url,
		'comment'=>'[神記事][茶番]このページ超ためになるしwwwwww',
	)
);

//結果を出力
var_dump($json);

//レスポンスヘッダーを出力
echo "レスポンスヘッダーは「{$http_response_header[0]}」です！";

返されるJSONデータ

ブックマークが成功すると、下記のJSONデータが返されます。例えば「created_datetime(ブクマをした日時)がデータに含まれていれば成功扱い」など、成功判定にご利用下さい。

{
    "favorites": [

    ],
    "comment_raw": "[神記事][茶番]このページ超ためになるしwwwwww",
    "private": false,
    "eid": 183105418,
    "created_epoch": 1403109399,
    "tags": [
        "神記事",
        "茶番"
    ],
    "permalink": "http://b.hatena.ne.jp/arayutw/20140619#bookmark-183105418",
    "comment": "このページ超ためになるしwwwwww",
    "created_datetime": "2014-06-19T01:36:39+09:00",
    "user": "arayutw"
}

また、レスポンスヘッダーでも成功判定をすることができます。というか、レスポンスヘッダーで確認するのが通常です…。成功の場合はHTTP/1.1 200 OKが返ってきます。取得方法ですが、リクエストの後に、自動的に変数$http_response_header[0]に格納される形です。ちなみに失敗の場合は400が返ります。

8-2ブックマークを削除する

続いて、APIを利用してブックマークを削除してみましょう。ブックマークを削除するためのリクエストの条件は、下記のページで確認できます。

リクエストの条件

ブックマークを削除するサンプルプログラム

こちらが、PHPでブックマークを削除するためのサンプルプログラムです。hatena_oauth()を読み込んでご利用下さい。先ほどのコミカルなサンプルブックマークが削除されれば成功です…。ぜひまたブックマークして下さいね！

<?php
//アクセストークンとアクセストークンシークレット
$access_token = '';
$access_token_secret = '';

//ブックマークを削除するURL
$url = 'http://syncer.jp/';

//リクエストを送信する
$json = hatena_oauth(
	'http://api.b.hatena.ne.jp/1/my/bookmark',
	'DELETE',
	array(
		'oauth_token' => $access_token,
		'oauth_token_secret' => $access_token_secret,
		'url' => $url,
	)
);

//結果を出力
var_dump($json);

//レスポンスヘッダーを出力
echo "レスポンスヘッダーは「{$http_response_header[0]}」です！";

9はてブのソーシャルアイコンを自作する

海外のデザイナーなどがよく配っているソーシャルアイコン素材。「はてなブックマーク」は日本では最大手ながらも海外ではほとんど無名のため、素材の中に入っていることがありませんよね…。せっかく良いデザインの素材を見つけたのに、はてブだけがないから使えない…。そんなことってありませんか？

9-1はてブのオリジナルアイコンは簡単に作れる

私がファンであるﾎﾎ冢次男さんのブログに、簡単にはてブのオリジナルアイコンを作る画期的な方法が掲載されていました。

それは、「フォントをVerdanaにして太文字を書くだけ」。具体的には次のようにスタイルを指定するだけ。

.hatebu{
	font-size:20px;
	font-family:'Verdana';
	font-weight:700;
}

すると次のように出力されます。まさに「はてブ」のマークそのものですね！

この文字の背景に「はてなブックマーク」のアイコンカラー(#008FDE)を付けると…

こんなに簡単に完成してしまいました！いやー、これは素晴らしい！IllustratorとかPhotoshopとか高度なものは一切不要です。簡単な無料ペイントソフトで、オリジナルのアイコンを作ることができます。

9-2はてブのオリジナルアイコンを作ってみたサンプル

こちらは私がGIMPを利用して作ったものです。違和感ありませんよね？今後はアイキャッチ画像に困らなそうです。

10はてなブックマークのAPIを使ったwebサービスまとめ

さて、これまで長々と「はてなブックマーク」のAPIの使い方を紹介してきました。最後に、はてブのAPIを利用したwebサービスの数々を紹介していこうと思います。どれもアイデアが刺激される素晴らしいものばかりです！

10-1はてブ1000users超え記事アンテナ(´・ω・)

既に閉鎖済みのサイトです。週6フリーターの人が作成したwebサービス。ブクマ数が1000を超えた記事だけを、「レシピ」など独自のカテゴリーに分けて表示するという内容でした。コンテンツの1つで「はてブ流行る直前記事アンテナ」というものもありました。その制作過程を書いた下記の記事は必読です。

10-2ブコメヨム

画面を切り替えることなく、それぞれのエントリーのコメントが読めるwebサービス。そしてブックマーク数に対するコメントの割合も表示されていて、盛り上がり具合が分かりやすいのも嬉しいですねー。

10-3じわじわ来てるエントリー

一時の勢いではなく、少しずつブックマーク数が増えて60を超えた、いわば真に良質なエントリーを取り上げたサイトです。システム的には、新着エントリーを収集しておき、1日ごとに個々のエントリーのブクマ数の増え具合をチェックしているのでしょうか。

10-4FateV

最近10日間のはてブエントリーを効率良く見れる、はてブブラウザー。未読、既読の管理や、ユーザー数、キーワードなどでフィルタリングできるのが便利だ。

10-5村はてブ

信頼できる特定の「はてブユーザー」によるブックマークを重視して、独自にエントリーを収集したwebサービス。

10-6はてブ整理

ブックマーク時に付けた、タグを一括で削除できるwebサービス。逆に指定したタグを一括で付けることもできます。

10-7はてブ全件チェッカー

手前味噌で申し訳ございません。私が作ったwebサービスで「はてな全件チェッカー」です。単純に入力したURL(webサイト)の、合計ブックマーク数を表示するものです。

10-8歴代はてブ多い順!!

月ごと、年ごと、そして歴代のブックマーク数ランキングを掲載しているサイト。シンプルながら、とても興味深く有益な情報ですよね。

10-9TopHatenar

ブックマークとRSS購読者数の推移が掲載されたサイト。2014年6月現在、2014年1月からの集計が停止している。

10-10BLOGMARK

私の友人(だと勝手に思ってる)SPYDERさんが作成したwebサービス。はてブ数、Tweet数、Like数の推移を集計し、グラフで視覚的に確認できる。ブログパーツもあるので今すぐ登録しよう！

この記事へのコメント

感想、ご指摘などお気軽にお寄せ下さい。「関連記事を書いた」という方はご報告いただければリンクします。

コメントを書き込む

• コメント
• ログイン

お名前 :

• Twitterでログイン(認証)する
• Facebookでログイン(認証)する
• はてなでログイン(認証)する

※Twitter、Facebook、はてな、いずれかのアカウントをお持ちの方は、本人認証(ログイン)を行なうことができます。
※本人認証をすることで、書き込みの待ち時間なし、画像アップロード、アイコンなどが利用できます。
※認証時にサービスと連携しますが、名前とアイコン以外の情報を読み込んだり、また書き込みを行なうことはありません。連携で要求する権限は「公開情報の読み取り」のみです。

現在、1件のコメントがあります。

あらゆ
2014.06.19 07:19

疲れた…。これから少しずつ情報を増やしていきます！