tomatomax.net » Javascript

twigadge ver2.0 beta2

maruguu — Sun, 30 May 2010 08:32:33 +0000

先日OAuth対応版をリリースしましたが、もうひとつ大きな機能追加を入れましたのでbeta2としてリリースします。
追加した機能ですが、上のスクリーンショットのとおり、黒い外観に変更できるようになりました。
また、リツイート(公式RT)機能に対応しています。

変更点:

スキン機能追加(あわせて黒系スキン追加)
リツイート(公式RT)機能追加
バグ修正

ダウンロードページ
 利用方法

もう少し様子を見て、問題なければ正式リリースしたいと思います。

TwitterクライアントのOAuth対応(Javascript編)

maruguu — Sun, 16 May 2010 04:02:24 +0000

6月にBasic認証が廃止されるということで、twitterクライアントのOAuth対応が必須となっています。twigadgeの方でもversion2.xとして対応しているわけですが、いろいろ資料を探してもJavascriptでの実装例をあまり見かけなかったので、メモとして残しておきます。
基本的な流れはTwitter API を OAuth で認証するスクリプトを 0 から書いてみたの通りなので、ここではコードの解説を主に書いていきます。

使用ライブラリ

Google CodeのOAuthライブラリ
# javascriptのものはSource->Browse以下に置いてあります。

JQuery
# ここで使っているのはAjax送信部分だけです。

認証手順

Twitterでアプリケーション申請をして、Consumer Key/Consumer Secretを発行してもらう (ここでは省略)
Request Token/Request Token Secretを取得する
ユーザをTwitterに誘導してPINを取得してもらう
Request Token/Request Token SecretとPINを元にAccess Token/Access Token Sceretを取得する
Access Token/Access Token Secretを元にAPIにアクセスする

Request Token/Request Token Secretを取得する

まず、http://twitter.com/oauth/request_tokenにConsumer Keyを送ります。
他のパラメータとして、oauth_signature_methodはHMAC-SHA1、時刻とNonceはOAuth.setTimestampAndNonceで設定しています。パラメータを設定後、OAuth.SignatureMethod.signでConsumer Secretを使って署名を加えた後、OAuth.addToURLでURLにパラメータを付加し、そこにアクセスしています。パラメータのソートはライブラリがやってくれているので気にする必要はありません。どのAPIに対するアクセスも基本的には同じで、送るパラメータ、署名のkeyが変わるだけとなります。

TwitterAPI.prototype.getRequestToken = function() {
var accessor = {
consumerSecret: this.consumer.consumerSecret,
tokenSecret: ''
};

var message = {
method: "GET",
action: "http://twitter.com/oauth/request_token",
parameters: {
oauth_signature_method: "HMAC-SHA1",
oauth_consumer_key: this.consumer.consumerKey
}
};
OAuth.setTimestampAndNonce(message);
OAuth.SignatureMethod.sign(message, accessor);
var target = OAuth.addToURL(message.action, message.parameters);
var options = {
type: message.method,
url: target,
success: function(d, dt) { /* 返り値からRequest Token/Request Token Secretを取り出して、PINを取得するためのURLを作成 */ },
};
$.ajax(options); // 送信
};

Access Token/Access Token Sceretを取得する

見て分かる通り、Request Token取得のコードとほとんど同じです。異なる点は以下になります

API”http://twitter.com/oauth/access_token”変更
署名のkeyがConsumer Secret＆Request Token Secretになる
パラメータoauth_tokenとしてRequest Tokenを送る
パラメータoauth_verifierとしてユーザが入力したPINを送る

取得したAccess Token / Access Token Secretをクライアントで保存しておけば、再度取得する必要はありません。

TwitterAPI.prototype.getAccessToken = function(pin) {
var accessor = {
consumerSecret: this.consumer.consumerSecret,
tokenSecret: this.token_secret // Request Token Secret
};

var message = {
method: "GET",
action: "http://twitter.com/oauth/access_token",
parameters: {
oauth_signature_method: "HMAC-SHA1",
oauth_consumer_key: this.consumer.consumerKey,
oauth_token: this.token, // Request Token
oauth_verifier: pin
}
};
OAuth.setTimestampAndNonce(message);
OAuth.SignatureMethod.sign(message, accessor);
var target = OAuth.addToURL(message.action, message.parameters);
var options = {
type: message.method,
url: target,
success: function(d, dt) { /* 返り値からAccess Token/Access Token Secretを取り出す */ },
};
$.ajax(options); // 送信
};

GET/POSTを行う

Access Token / Access Token Secretを取得したら、それを使ってAPIにアクセスします。以下の点が変わります

署名のkeyがConsumer Secret＆Access Token Secretになる
パラメータoauth_tokenとしてAccess Tokenを送る
送信データ全てを含めて署名をつける

下のコードがTweetを送信している部分になります。

TwitterAPI.prototype.post = function(api, content, callback) {
var accessor = {
consumerSecret: this.consumer.consumerSecret,
tokenSecret: this.atoken_secret // Access Token Secret
};

var message = {
method: "POST",
action: api,
parameters: {
oauth_signature_method: "HMAC-SHA1",
oauth_consumer_key: this.consumer.consumerKey,
oauth_token: this.atoken // Access Token
}
};
// 送信するデータをパラメータに追加する
for ( var key in content ) {
message.parameters[key] = content[key];
}
OAuth.setTimestampAndNonce(message);
OAuth.SignatureMethod.sign(message, accessor);
var target = OAuth.addToURL(message.action, message.parameters);
var options = {
type: message.method,
url: target,
dataType: 'json',
success: function(d, dt) { callback(d, dt); },
};
$.ajax(options); // 送信
}

// (中略)

/**
* update the status of user
* @param[in] uptext - user status to update
* @param[in] reply_to - target status id for reply
*/
updateStatus: function(uptext, reply_to) {
var content = {status: uptext, source: 'twigadge'};
if(reply_to != '') {
content.in_reply_to_status_id = reply_to;
}
twitterapi.post('http://twitter.com/statuses/update.json', content, Twigadge.dummy);
System.Gadget.Flyout.show = false;
},

twigadge ver2.0 beta

maruguu — Sun, 09 May 2010 10:41:17 +0000

TwitterのBasic認証廃止ということで、OAuthに対応したものを作成しました。それと同時にライブラリもようやくJQueryに変更、UI周りのコードも一新したのでとりあえずベータ版として公開です。Basic認証完全廃止までには正式リリースしたいところ。
主な変更点

OAuth対応
タイムライン取得API変更 Friend→Home Reply→Mentions
Flyout表示時のボタンアイコン追加
Reply/DM表示時に毎回取得をするように変更
ハッシュタグ正規表現変更

ダウンロードページ
あと、地味な変更点ですがfrom twigadgeのところのリンク先が今のブログに変更されてます。

twigadge ver1.2

maruguu — Sun, 23 Aug 2009 08:33:25 +0000

http://code.google.com/p/twigadge/
ようやくRT機能を実装しました

Reply時にin-reply-to設定を追加
RT機能を追加
幅/高さが範囲外のとき、自動で変更されるように修正

はてブのお気に入りユーザを隠すスクリプトを更新

maruguu — Wed, 05 Aug 2009 04:41:04 +0000

以前書いた、はてブのお気に入りページで、ユーザコメントを隠すGreaseMonkeyスクリプトの更新をしました。今回の変更で、はてブのAutoPagerize機能で継ぎ足されたページに対してもスクリプトが有効になるようになっています。

ダウンロードは
userscript.orgから

twigadge ver1.1.1

maruguu — Mon, 11 May 2009 11:33:42 +0000

http://code.google.com/p/twigadge/
Issueリストに登録された問題の修正

POSTを使ったタイムライン取得機能を削除

Hatena::Bookmark hide users in favorite

maruguu — Wed, 25 Feb 2009 09:03:39 +0000

最近、はてなブックマークを本格的に使い始めました。特に使っているのが「お気に入り」という他の人のブックマークを表示する機能。でも、お気に入りに追加した人を増やしすぎたためか、コメントで画面が埋め尽くされてしまうことがありました。というわけで、「お気に入り」画面でコメントを非表示にするGreaseMonkeyスクリプトを作ってみました。

・使い方
はてブのお気に入り画面を表示するとコメントが非表示になります。
# ページの自動ロードが有効だと2ページ目以降が表示されます＞＜どうすればいいんだ
・ダウンロード
userscript.orgからダウンロードできます

初めてGreaseMonkeyスクリプトに挑戦してみたけど、手軽にWebサイトをいじれるのがいいですね！ちゃんと本を読んでみようかな

Greasemonkeyスクリプティング TIPS&SAMPLES

posted with amazlet at 09.02.25

高山恭介
秀和システム
売り上げランキング: 308175

おすすめ度の平均:

開発者向けならばもう一歩踏み込んでも

Amazon.co.jp で詳細を見る

haika

maruguu — Tue, 30 Dec 2008 15:00:00 +0000

毎年恒例の年越しプログラミング。

haika – Google Code

サイドバーで常駐するはてなハイクビューワ。少ないながらも一応公開できるだけの機能を整えたので公開しておきます。

twigadge ver1.1

maruguu — Sat, 09 Aug 2008 15:00:00 +0000

http://code.google.com/p/twigadge

ダイレクトメッセージ対応と細かい点を修正

FavoriteのURLを変更
ダイレクトメッセージ対応
クリックで通知を消す機能を追加

機能追加はこんなもんかな。バグがなければ、しばらくは別の開発をするつもり。

Flyout

maruguu — Sat, 09 Aug 2008 15:00:00 +0000

Windowsサイドバーガジェットにおいて横に飛び出すやつのこと。

ガジェット本体のHTML文書とは別のHTML文書で記述されている。

設定方法

System.Gadget.Flyout.file = 'sendmessage.html'; // HTML文書を指定する

実行中に切り替えることも可能。ただし、同時に2つ以上開くことはできない。

表示

if(System.Gadget.Flyout.show) {
System.Gadget.Flyout.show = false;
} else {
System.Gadget.Flyout.show = true;
}

System.Gadget.Flyout.showで現在のFlyoutの状態をtrue(表示),false(非表示)で得ることができる。また、true,falseを代入することで、Flyoutの表示、非表示が可能。

Flyout表示中、別のアプリケーションにフォーカスを移すとFlyoutは閉じる。

ガジェットからのアクセス方法

System.Gadget.Flyoutオブジェクトから、Flyoutにアクセスする。

var uptext = System.Gadget.Flyout.document.getElementById('update-text');
uptext.value = message;