JavaScript > livedoor Clipのブックマークレットからdel.icio.usとはてブのブックマークを編集、削除する（＋はてブAPIについて）

2007年05月20日

タイトルが無駄に長いので省略しましたが、以前作成したlivedoor Clipからdel.icio.usとはてなブックマークに同時投稿するGreasemonkeyスクリプト - Blog.37to.netのバージョンアップです。 livedoor Clipのブックマークレットから、del.icio.ucとはてブに対しての同時投稿に加えて、

  • 編集と削除に対応。タグとコメントだけですが・・・。
  • エンターキーを押してフォームを送信した時に、同時投稿出来ていなかった不具合修正
  • 投稿するかどうかのチェックボックスを追加して、記事ごとに同期を取る、取らないを選択出来るようにする

という事が出来るようになりました。

ダウンロード、説明はlivedoor Clip Cross Post - labs.37to.netからどうぞ。

機能とは関係なとこで、複数サービスにも対応出来るようにソースコードを書き換えたので、livedoor Clipでごにょごにょしたいという方は好きに使って下さい。

告知は以上で、今回の記事のメインは「はてブックマークAPI」についてだったりします。
del.icio.usはスムーズに対応できたのですが、はてなブックマークのAPIを使用するところで少し困りました。 編集と削除をする際、APIを叩く所で色々苦労したので、書き残しておきます。

はてなブックマークAPIについて

公式のドキュメント
はてなブックマークAtomAPIとは - はてなダイアリー
プロトコルにはAtomAPIを使用
詳しい仕様は調べていませんが、XMLを使ってやりとりするプロトコルです。
ユーザー認証にはWSSE認証を利用
詳細ははてなフォトライフAtomAPIとは - はてなダイアリーを参照。
JavaScriptから使用する場合はBlogging in the wind: WSSE for JavaScriptで配布されているスクリプトが使えます。

編集と削除を行うAPIを利用する手順

  1. URLを元にAPIからブックマークデータを取得
  2. 取得したブックマークデータから、ブックマーク記事のIDを抜き出す
  3. ブックマークIDを元に編集削除を行うために再度APIをコール

という手順を踏む必要があります。それではもう少し詳細に踏み込んでみます。

ブックマークデータの取得

データを取得する際は、ブックマーク投稿時と同じAPIを利用します。

URL
http://b.hatena.ne.jp/atom/post
リクエストメソッド
POST
リクエストパラメータ
ブックマークのURLとコメントをXML形式でリクエストボディに含める
今回は一度ブックマークしたデータのIDを取得する事が目的なので、URLだけあれば良いと思います。
パラメータのサンプル
<entry xmlns="http://purl.org/atom/ns#">
  <title>dummy</title>
  <link rel="related" type="text/html" href="http://blog.37to.net/" />
  <summary type="text/plain">[tag][tag1]タイトル要素は無視されるのでdummyを入れときます</summary>
</entry>
レスポンスヘッダからブックマークのIDを取得
レスポンスヘッダにLocation: http://b.hatena.ne.jp/atom/edit/XXXXという部分があって、 「XXXX」という部分にブックマークIDがあるので、これを正規表現でも使って抜き出します。

ブックマークを編集、削除する。

それでは先で取得したブックマークIDを使って、編集削除を行います。

URL
http://b.hatena.ne.jp/atom/edit/XXXX
「XXXX」の部分にブックマークIDを含めます。
リクエストメソッド
編集時には「PUT」、
削除時には「DELETE」を使用します。
「GET」「POST」以外にも使える事を知らず、小一時間悩みました。
削除時のリクエストパラメータ
なし
URLだけでいけます。
編集時のリクエストパラメータ
タイトルとコメントをXMLで渡します。
はてなの場合、タイトルは全ユーザー共通なので、むやみな変更は控えた方が良いと思います。
そういう理由もあって、今回のGreaseMonkeyではタイトルの変更はしないようにしています。
del.icio.usのタイトル編集については、その内対応する（と思います）。
パラメータサンプル。 
<entry xmlns="http://purl.org/atom/ns#">
  <title>タイトル要素を含めると、全ユーザーのタイトルが変更するので注意。</title>
  <summary type="text/plain">[tag][tag1]コメントです。</summary>
</entry>

というような手順です。一度ブックマークデータをAPIから持ってくる必要があるので、 JavaScriptから利用する場合はAjaxでレスポンスを受け取った段階のイベントハンドラで再度リクエスト処理を行います。

ソースを読んだ方が早いと思いますが、今回のコードの一部にコメントつけてみます。
callとかapplyを使ってごにょごにょしても動かなかったので、クロージャー使ってます。あんまりイケてない。 

//編集時のfunction
parent.edit = function(){
    var self = this;
    /**
     * GM_xmlhttpRequestを使ってブックマークデータを
     * 取得するfunctionを呼び出しています。
     */
    this.sendRequest(
        this.addUrl, 
        //第二引数にリクエストパラメータを渡している所
        this.getAddParam(),
        //第三引数にブックマーク取得後にコールバックする為の無名関数を渡す
        function(res){
            //ブックマークIDを抜き出す
            var eid = res.responseHeaders.match( /location:[\s]*.+\/edit\/([0-9]+)/i )[1];
            //クロージャーを使ってthis.sendRequest()をもう一度呼び出す。
            self.sendRequest(
                self.editUrl + eid,
                self.getEditParam(),
                //ブックマーク編集後のコールバック関数
                function(res) {
                    if(res.statusText != 'OK'){
                        alert('Hatena Edit Error');
                    }
                },
                //リクエストメソッドに「PUT」を指定
                'PUT');
        });
}
//orz

とこんな感じです。prototype.jsのbind()はコア関数と用意しておくべきと改めて思った今日この頃。

posted by 37to at : 21:20 | コメント (0) | トラックバック (0)

コメント

この記事に対するコメントはまだありません。


投稿する

投稿者情報を保存しますか?


トラックバック

トラックバックURI


一覧

この記事に対するトラックバックはまだありません。