Big Sky

元ネタ

M.C.P.C.: はてなお気に入りAPIを使ってブログパーツ作例

はてなお気に入りAPIを使ってブログパーツ？を作ってみた...

http://blog.dtpwiki.jp/dtp/2007/09/api_60ed.html

ソースは以下
jquery.hatenaFav.js

// --------------------------------------------------------------
// jquery.hatenaFav.js : hatenaお気に入り画像表示ブログパーツ
// based on: http://blog.dtpwiki.jp/dtp/2007/09/api_60ed.html
// (required: jquery.js)
// --------------------------------------------------------------

(function($){
  $.fn.hatenaFav = function(options){
    return this.each(function(index){
      var it = this, $this = $(this);
      it.opts = $.extend({}, $.fn.hatenaFav.defaults, options);
      if (it.opts.loader) $('<img/>').attr('src', it.opts.loader).appendTo($this);
      else $this.html('loading...');
      $.ajaxSetup({cache:true});
      $.getJSON('http://s.hatena.ne.jp/' + it.opts.user + '/favorites.json?callback=?', function(data) {
        $this.html('');
        $.each(data.favorites, function(index, item) {
          if (index > it.opts.max) {
            $('<a/>').attr('href', '#').click(function() {
              options.max = data.favorites.length;
              $this.hatenaFav(options);
              return false;
            }).attr('class', 'hatena-fav-more').css('font-size', '0.8em').text('more...').appendTo($this);
            return false;
          }
          $('<img/>').attr('src', 'http://www.hatena.ne.jp/users/' + item.name.slice(0, 2) + '/' + item.name + '/profile_s.gif')
          .css({
            width: it.opts.size,
            height: it.opts.size,
            border: it.opts.border,
            title: 'id:' + item.name,
            alt: 'id:' + item.name
          }).wrap('<a/>')
            .parent().attr('href', 'http://d.hatena.ne.jp/' + item.name + '/').attr('target', it.opts.target).appendTo($this);
        });
      });
    });
  };
  $.fn.hatenaFav.defaults = {
    user:   'jkondo',
    size:   '16px',
    border: '0px',
    target: '_blank',
    max:    10,
    //loader: 'http://mattn.kaoriya.net/images/ajax-loader.gif'
  };
})(jQuery);

使い方はこんな感じ

<style type="text/css"><!--
.hatena-fav-container {
    font-family: meiryo, osaka;
    font-weight: bold;
    text-align: left;
    width: 200px;
    border: 1px solid gray;
}
.hatena-fav-container a, .hatena-fav-container a:visited {
    color: blue;
}
.hatena-fav-title {
    background-color: #ddd;
    text-align: center;
}
.hatena-fav-icons img {
    margin: 1px;
}
--></style>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.hatenaFav.js"></script>
<script type="text/javascript"><!--
$(function() {
    $('.hatena-fav-icons').hatenaFav({ user: 'mattn', size: 16 });
});
--></script>
<div class="hatena-fav-container">
    <div class="hatena-fav-title">
        <a href="http://mattn.kaoriya.net/">はてなお気に入り</a>
    </div>
    <div class="hatena-fav-icons"></div>
</div>

hatenaFavメソッドの引数に渡すuserとして、はてなのユーザIDを入れるとそのユーザのお気に入りユーザが表示されます。
実行結果は↓

続きを読む...

はてなダイアリーモバイルでも、はてなスターが付けられる様になった様です。

モバイル版はてなダイアリーではてなスターに対応しました - はてなダイアリー日記

本日、モバイル版はてなダイアリーではてなスターを見たり付けたりできるようになりました。

これまでモバイル版ではてなスターに対応していたサービスははてなハイクだけでしたが、はてなダイアリーでも同様に☆を閲覧したり追加したりできるようになりました。

http://d.hatena.ne.jp/hatenadiary/20080613/1213342619

モバイル端末で試した所、確かにスターが付けられます。「もしや...」と思って自分のサイトでもやってみたら...
できちゃいました。
スターを付けるURLは

http://s.hatena.ne.jp/star.add?sid={SID}&rks={RKS}&uri={記事URL}&location={元の場所}

の様なのですがモバイル端末ではログインし直す事もある為、リンク先には「ログイン」や「かんたんログイン」へのリンクが張られています。
これがあれば外部ドメインでもスターが付けられるって事ですね。
先日、blosxomでモバイル様にはてなスターを表示する為のプラグインを書いたのですが、その際に修正したフレーバに以下のリンクも付け足しました。

<a href="http://s.hatena.ne.jp/star.add?sid=&rks=&uri=$url$path/$fn.htm&location=$url$path/$fn.htm"><img src="http://s.hatena.com/images/add_bl.gif" border="0"/></a>$hatenastar_mobile::stars<br />

おそらく一度かんたんログイン等でログインすれば、はてなドメイン上のクッキーは少しの間は使える筈なので、二三個付ける場合でも再度ログインする事は無いと思います。

携帯電話でブラウズしている時に突然、はてなブックマークに登録しておきたくなったりしませんか？
はてなブックマークから画面遷移している時は、はてな専用携帯変換ページが表示されブックマークへのリンクも付けられている為「このページはてブしたい」と思った時にも簡単にはてなブックマーク出来るでしょう。
でも直接そのページを見ている時には携帯では術がありません。
私はよく

1. 携帯でブラウズ
2. 携帯のブックマークに登録
3. PCでブックマーク登録

という煩わしい作業をしてたりします。
例えば、専用ページを作ってリファラを見ても画面遷移では無いので登録しようとしているブックマークURLは取得出来ません。

これを何とかしようと言うのが今日のお話。
殆どの携帯電話には、「URLでメールを送信」という機能が備わっています。
これを使い、サーバ側に登録させるのです。
ニワンゴ開発サイトに「hatebu」というコマンドを作りました。
ニワンゴ開発サイトは、簡単な形式で記述されたメールからコマンドとしてWebAPIをキック、その応答をメールで返すという機能を提供してくれています。
この「hatebu」コマンドから呼ばれるサーバ側CGIとして以下の様なphpのコードを置きました。
※phpなんか久しぶりに書いたのでかなり適当
※何故phpなのかというと、無料で使えてソケット系APIが動くサーバで見つけたのがphpしか動作しなかったから...

<?php
header('content-Type: text/plain; charset="Shift_JIS"');

# URLかどうか...(適当)
function isUrl($str) {
  return (preg_match('/^(https?)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)$/', $str) && $str!="");
}

# コマンドとパラメータ
$c="";
$p2="";
$subject="";

if(isset($_REQUEST['c'])){
    $c = $_REQUEST['c'];
}
if(isset($_REQUEST['p2'])){
    $p2 = $_REQUEST['p2'];
}
if(isset($_REQUEST['subject'])){
    $subject = $_REQUEST['subject'];
}
$c = mb_convert_encoding($c, "SJIS");
$pi = mb_convert_encoding($pi, "SJIS");
$subject = mb_convert_encoding($subject, "SJIS");

# コマンドのチェック
if ($c != 'hatebu' || $p2 == "" || !isUrl($p2)){
  echo "response=ERROR\n";
  echo "subject=".$c." ".$p2."\n";
  echo "body=Failed\nInvalid parameter \"$c\" \"$p2\" \"$subject\"";
  exit;
}

# AtomPubで送信
error_reporting(E_ALL);
require_once('class.atomapi.php');
require_once('class.wsse.php');

$username = 'xxxxxxxxxxxxxxxx';
$password = 'xxxxxxxxxxxxxxxx';
$endpoint = 'http://b.hatena.ne.jp/atom/post';
$auth     = 'WSSE';

$entry = new AtomEntry();

$entry->set_title('HATENA');
$entry->set_content('BOOKMARK');
$entry->set_summary($subject);
$entry->add_link($p2, 'related', '', 'text/html');
$auth_obj = new WSSE($username, $password);
$post = new AtomRequest('POST', $endpoint, $auth_obj, $entry->to_xml('POST'));
$post->exec();
if ($post->error()) {
  echo "response=ERROR\n";
  echo "subject=".$c." ".$p2."\n";
  echo "body=Failed\nInvalid parameter \"$c\" \"$p2\" \"$subject\"";
} else {
  echo "response=SUCCESS\n";
  echo "subject=".$c." ".$p2."\n";
  echo "body=Succeeded";
}
exit;
?>

この状態で、ニワンゴ開発サーバからコマンドを発行する為に

m at open dot niwango dot jp

※「at」は「@」に、「dot」は「.」に置き換えます
というアドレスへ

hatebu [URL]

※[URL]はとりあえず、http/httpsのみにしました。
とうい本文のメールを送信すると、はてなの「i_am_not_mattn」というアカウントのはてなブックマークに[URL]で指定したサイトがブックマークされます。メールの題名がブックマークコメントになっています。
適当に使ってみて下さい。
※なお、ニワンゴ開発OpenAPIの仕様で私にメールアドレスがばれる事はありません。
※如何わしいサイトが登録された場合はアカウント停止します。

アプリとして言うならば「i_am_not_mattn」のアカウントだけでしか動作出来ないのが苦しい所...
まさかメール本文にパスワード書くってのも嫌だし...
専用サーバでqmailからキックさせるか、sidebar.jpでXMLRPCをキックさせるのが良いんでしょうね。

先日書いた「個人的ソーシャルブックマークサービスの歩き方」という記事にもある通り、私は個人的な資料をdel.icio.us、ソーシャルなものをはてなブックマークに...と使い分けています。
ただし、携帯からはdel.icio.usが使えない為、はてなブックマークを使ってお気に入りユーザのブクマから必要な物だけを自分のブックマークとしてエントリしています。その後、資料として必要な物をdel.icio.usに手作業で転送しています。ただし量が多い場合にはPlaggerを使うこともあります。
ただし、ここで一つ問題が発生していました。
はてなブックマークのフィードにはブクマコメントがitem/descriptionフィールドに格納されています。ただしPublish::Delicousを含むほぼ全てのSBM系プラグインではsummaryではなくbody(body_text)をコメント部として扱う仕様になっています。ですので
http://b.hatena.ne.jp/mattn/rss

<description>おぉ。thx＞miyagawa</description>

とdescriptionフィールドに格納されている文字列そのままが欲しいにも関わらず

<content:encoded>
  &lt;blockquote cite="http://www.ac.cyberhome.ne.jp/~mattn/cgi-bin/blosxom.cgi/software/lang/perl/20071015162834.htm" title="Big Sky :: Publish::Wassrをでっちあげた"&gt;
    
    &lt;cite&gt;&lt;a href="http://mattn.kaoriya.net/software/lang/perl/20071015162834.htm"&gt;Big Sky :: Publish::Wassrをでっちあげた&lt;/a&gt; &lt;a href="http://b.hatena.ne.jp/entry/http://www.ac.cyberhome.ne.jp/~mattn/cgi-bin/blosxom.cgi/software/lang/perl/20071015162834.htm"&gt;&lt;img src="http://b.hatena.ne.jp/images/entry.gif" title="このエントリーを含むブックマーク" alt="このエントリーを含むブックマーク" border="0"&gt;&lt;/a&gt;&lt;/cite&gt;

  &lt;/blockquote&gt;
  &lt;p&gt;おぉ。thx＞miyagawa&lt;/p&gt;
</content:encoded>

という元記事の引用文が含まれたbodyで配信されてしまいます。はじめはPublish::XXXでpost_bodyしているSBM系のプラグインを全て直そうかと(use_summaryみたいなオプションで)思いましたが面倒。いっそAggregator::SimpleのXML::Feed::RSSを操作している部分にオプション付けて強制的にcontentでなくsummaryを使わせるように修正しようかとも思いました。ただ、よく考えたらsummaryをbodyに上書きしてやるプラグインを書いた方が便利だし汎用的だと思い以下のプラグインを作りました。
Plagger/Plugin/Filter/SummaryToBody.pm

package Plagger::Plugin::Filter::SummaryToBody;
use strict;
use base qw( Plagger::Plugin );

sub register {
    my($self, $context) = @_;
    $context->register_hook(
        $self,
        'update.entry.fixup' => \&filter,
    );
}

sub filter {
    my($self, $context, $args) = @_;
    $args->{entry}->body($args->{entry}->summary);
}

1;

__END__

=head1 NAME

Plagger::Plugin::Filter::SummaryToBody - copy summary field to body field.

=head1 SYNOPSIS

  - module: Filter::SummaryToBody

=head1 DESCRIPTION

This plugin copy summary field to body field. This is helpful to sanitize
description field. ex) Hatena bookmark field include <blockquote> tag for
quote.

=head1 AUTHOR

Yasuhiro Matsumoto

=head1 SEE ALSO

L<Plagger>, L<Plagger::Plugin::Filter::SummaryToBody>

=cut

使い方はmodule定義だけ。以下は私がはてブからdel.icio.usの転送につかっているYAML
hatebu2delicous.yaml

global:
  assets_path: /home/user/plagger/assets/
  timezone: Asia/Tokyo
  log:
    level: info

plugins:
  - module: Subscription::Config
    config:
      feed:
        - http://b.hatena.ne.jp/[hatena user]/rss

  - module: Filter::SummaryToBody

  - module: Filter::Rule
    rule:
      module: Deduped
      path: /tmp/hatebu2delicious.db

  - module: Publish::Delicious
    config:
      username: [delicious username]
      password: [delicious password]
      interval: 2
      post_body: 1

どっちかっていうとBreakXXX系のプラグインで、しかも個人用途でしかありませんが一応公開しておきます。
後でCodeReposにも置いておきます。

追記
もしかしたら空繰再繰さんの「Plagger::Plugin::Filter::ExtractBody」を使ってXPathで「p」とする事でも同じ結果になるかもしれませんね。
こちらは後日試します。

擬似GM_xmlhttpRequestを使ってたので、はてなリソースしか動いてなかった。
擬似GM_xmlhttpRequestでは、はてなスターの場合だけJSONで動かすようにしたので、きっと行けると思う。
JSONデータから文字列に戻す部分はこれを使わせて頂いた。
前とそれほど変わらないけど、unsafeWindowの宣言場所を上にもってったので前回のような簡単なパッチの当て方は出来なくなった。

--- HatenaStarEverywhere.user.js.orig   Mon Oct 01 10:37:41 2007
+++ HatenaStarEverywhere.user.js    Fri Oct 05 23:08:10 2007
@@ -92,6 +92,9 @@
     ensure(window.Hatena, 'Star');
 }
 
+if (typeof unsafeWindow == "undefined") {
+    var unsafeWindow = window;
+}
 if (typeof unsafeWindow.Hatena == 'undefined'
         || typeof unsafeWindow.Hatena.Star == 'undefined'
         || !unsafeWindow.Hatena.Star.loaded) {
@@ -138,4 +141,137 @@
             GM_setValue('configExpire', '');
         }
     });
+}
+
+if (typeof(GM_setValue) != 'function') {
+  function GM_setValue(key, value) {
+    document.cookie = [
+      name, '=', escape(value),
+      ';expires=', (new Date(new Date() + 365 * 1000 * 60 * 60 * 24)).toGMTString()
+    ].join('');
+  }
+}
+if (typeof(GM_getValue) != 'function') {
+  function GM_getValue(key) {
+    var r = new RegExp('/' + name + '=([^;]*)/'), m;
+    if (m = document.cookie.match(r)) return unescape(m[1]);
+    return null;
+  }
+}
+if (typeof(GM_xmlhttpRequest) != 'function') {
+  var GM_xmlhttpRequest_Data = null;
+  function GM_xmlhttpRequest_Handler(data) {
+     GM_xmlhttpRequest_Data = toJsonString(data);
+  }
+  function GM_xmlhttpRequest(opt) {
+    if (opt.url == 'http://s.hatena.ne.jp/siteconfig.json') {
+       var s = document.createElement('script');
+       s.charset = 'utf-8';
+       s.onload = function(e) {
+          s.responseText = GM_xmlhttpRequest_Data;
+          opt.onload(s);
+         GM_xmlhttpRequest_Data = null;
+       }
+       s.src = opt.url + '?callback=GM_xmlhttpRequest_Handler';
+       document.body.appendChild(s);
+   }
+    var x=new XMLHttpRequest();
+    x.onreadystatechange=function() {
+      switch(x.readyState) {
+        case 4:
+          opt.onload(x);
+          break;
+      }
+    };
+    x.open(opt.method,opt.url,true);
+    x.setRequestHeader('Content-Type',opt.mime);
+    x.send(null);
+  }
+}
+
+/*
+ * include http://code.google.com/p/trimpath/wiki/JsonLibrary
+ * with few modify for opera.
+ */
+
+/*
+Copyright (c) 2002 JSON.org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The Software shall be used for Good, not Evil.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+function toJsonString(arg) {
+    return toJsonStringArray(arg).join('');
+}
+
+function toJsonStringArray(arg, out) {
+    out = out || new Array();
+    var u; // undefined
+
+    switch (typeof arg) {
+    case 'object':
+        if (arg) {
+            if (arg.constructor == Array) {
+                out.push('[');
+                for (var i = 0; i < arg.length; ++i) {
+                    if (i > 0)
+                        out.push(',\n');
+                    toJsonStringArray(arg[i], out);
+                }
+                out.push(']');
+                return out;
+            } else if (typeof arg.toString != 'undefined') {
+                out.push('{');
+                var first = true;
+                for (var i in arg) {
+                    var curr = out.length; // Record position to allow undo when arg[i] is undefined.
+                    if (!first)
+                        out.push(',\n');
+                    toJsonStringArray(i, out);
+                    out.push(':');                    
+                    toJsonStringArray(arg[i], out);
+                    if (out[out.length - 1] == u)
+                        out.splice(curr, out.length - curr);
+                    else
+                        first = false;
+                }
+                out.push('}');
+                return out;
+            }
+            return out;
+        }
+        out.push('null');
+        return out;
+    case 'unknown':
+    case 'undefined':
+    case 'function':
+        out.push(u);
+        return out;
+    case 'string':
+        out.push('"')
+        out.push(arg.replace(/(["\\])/g, '\\$1').replace(/\r/g, '').replace(/\n/g, '\\n'));
+        out.push('"');
+        return out;
+    default:
+        out.push(String(arg));
+        return out;
+    }
 }

追記
「[はてな][ネット]Twitterとはてなスターは相性がいい」こちらで紹介して頂きました。
一応、私の手元で動いている物をアップします。
はてな事務局さん、問題があればご連絡下さい。

HatenaStarEverywhere.user.js

どこでもスターグリースモンキーがSafariとfubに対応しました
Operaのuser.jsに対応してみました。
たぶん行けそう
patchの適応の仕方が分からない人は、下の「+」が付いてる行だけ抜き取って先頭の「+」を全部削除、その後「HatenaStarEverywhere.user.js」の一番おしりに貼り付けて保存するか、はてな側の対応を待ちましょう。

--- HatenaStarEverywhere.user.js.orig   Mon Oct 01 10:37:41 2007
+++ HatenaStarEverywhere.user.js    Wed Oct 03 12:44:20 2007
@@ -139,3 +139,37 @@
         }
     });
 }
+
+if (typeof unsafeWindow == "undefined") {
+    var unsafeWindow = window;
+}
+if (typeof(GM_setValue) != 'function') {
+  function GM_setValue(key, value) {
+    document.cookie = [
+      name, '=', escape(value),
+      ';expires=', (new Date(new Date() + 365 * 1000 * 60 * 60 * 24)).toGMTString()
+    ].join('');
+  }
+}
+if (typeof(GM_getValue) != 'function') {
+  function GM_getValue(key) {
+    var r = new RegExp('/' + name + '=([^;]*)/'), m;
+    if (m = document.cookie.match(r)) return unescape(m[1]);
+    return value;
+  }
+}
+if (typeof(GM_setValue) != 'function') {
+  function GM_xmlhttpRequest(opt) {
+    var x=new XMLHttpRequest();
+    x.onreadystatechange=function() {
+      switch(x.readyState) {
+        case 4:
+          opt.onload(x);
+          break;
+      }
+    };
+    x.open(opt.method,opt.url,true);
+    x.setRequestHeader('Content-Type',opt.mime);
+    x.send(null);
+  }
+}

追記1
すみません。はてな内リソースでしか有効にならないようです。もう少し考えてみます。(_ _;)
追記2
修正はこちら

どこでもスターグリースモンキーを公開しました
はてなスターをさまざまなサイトに付けられる「どこでもスター」グリースモンキーを公開しました。
http://s.hatena.ne.jp/js/HatenaStarEverywhere.user.js
また、同時にさまざまなサイトの設定情報を共有できるSiteConfigWikiもオープンしました。
http://s.hatena.ne.jp/siteconfig
どうぞご利用ください。

よく出来てる。AutoPagerizeのSITEINFOのように、サイト管理もはてなpre記法で書け、色んなサイトに対応出来るように見える。

でもこれって、「○○○のサイトに、はてなスターが付けられるグリモン書きました！」って事が出来なくなるんですよね。
ハッカー殺しとは言いませんが、以前「[再考]twitterが何故ウケるのか？」という記事で書いたように、良いサービスというのは

少しでも開発者が介入できるスキがあるか

が決め手だと私は信じている。

あと細かい話だが、上記引用部にあるリンクのsiteconfigで記述出来るセレクタは、Ten.jsというライブラリを使ったCSSセレクタを採用しており、XPathの様に柔軟ではない。
例えば、IDもCLASSも振られていないノードの、2個次のノードにスターを付けたいとか、そのノードの親ノードを辿りたい場合には、向かない。

現に、このsiteconfig自身にはてなスターを付けられるように考えて見たが、ノード階層が