2010/06/30でtwitter APIのBasic認証が廃止されます。 Basic認証からOAuth認証へのカウントダウンサイトもできていて、twitter関連のアプリケーション開発者は対応が必要な状況ですね。

ブラウザベースのアプリケーション(WebService)では、各種ライブラリやtwitter @anywhereを利用して比較的簡単にOAuth認証へ移行できるかと思いますが、デスクトップアプリケーションやbotなど、ユーザがブラウザで利用することを想定していないアプリケーションで、twitter APIのOAuth認証を利用するための情報はまだ少ない状況です。

そこで、rubyの（一般的な）twitterライブラリtwitter gemを使って、ブラウザベースではないアプリケーションからOAuth認証を利用するシンプルな方法をご紹介します。

クライアントアプリケーションとして対話型のrubyクライアントであるirbを利用します。rubyがインストールされている環境であれば標準で利用できるものです。

以下に、実際のソースコードも含めてご紹介します。

• ruby
• twitter gem（sudo gem install twitterでインストールしておく）
• OAuthのアプリケーション登録
• twitterに登録したアプリケーションの「Consumer key」と「Consumer secret」

OAuthのアプリケーション登録

twitterアプリケーションページから登録してください。

今回は、ブラウザベースではないアプリケーションからOAuth認証を利用するので、「Application Type」はClientを選択します。

このときのアプリケーション名やWebSiteなどは後からでも変更できるので、とりあえずさくっと登録してみるのが良いと思います。

「Consumer key」と「Consumer secret」

上記で登録した（または登録してあった）アプリケーションを、twitterアプリケーションページから選択し、Consumer keyとConsumer secretを控えておいてください。

準備が整ったらさっそく試してみましょう

irbを起動します

まずは、irbを起動します。この起動したirbはずっと使いますので、途中で終了しないようにしてください。

$ irb -rrubygems -rtwitter

rubygemsとtwitterをrequireしています。

認証番号(PIN)の発行

ブラウザベースではないアプリケーションでも一度だけブラウザでtwitterにアクセスして、ログインのための認証番号(PIN)を発行する必要があります。

consumer_token = "XXXXXXX" # ここに「Consumer key」
consumer_secret = "YYYYYYYY" # ここに「Consumer secret」
tauth = Twitter::OAuth.new(consumer_token, consumer_secret)
request = tauth.consumer.get_request_token
puts request.authorize_url
# => http://twitter.com/oauth/authorize?oauth_token=ZZZZZZZZZZ

ここでは、Consumer keyとConsumer secretを使って認証番号(PIN)発行ページのURLを作成します。

表示されたURLにブラウザでアクセスすると、アプリケーションからアカウントへのアクセスを許可するかどうかの画面がでますので、登録したアプリケーションへのアクセスを「許可(Allow)」します。

すると、上の画像のように「暗証番号(PIN)」が発行されるので控えておきます。

「Access token」と「Access secret」の生成

先ほどのirbに戻り、認証番号(PIN)を利用してAccess tokenとAccess secretを生成します。これがアプリケーションにおけるパスワード代わりになります。

pin = "DDDDDDD" # ここに「暗証番号(PIN)」
atoken, asecret = tauth.authorize_from_request(request.token, request.secret, pin)
twitter_client = Twitter::Base.new(tauth)

これで、twitter_clientがOAuthで認証されたので、

p twitter_client.home_timeline
# => .... 自分のタイムライン取得 ....

などとしてtwitter APIを利用できます。

2回目以降の利用

毎回ブラウザを開いて暗証番号(PIN)を取得していてはブラウザベースではないアプリケーションとして成り立ちません。2回目以降に暗証番号(PIN)無しで認証するためには、先ほどのAccess tokenとAccess secretを保存しておきます。

tauth = Twitter::OAuth.new(consumer_token, consumer_secret)
tauth.authorize_from_access(atoken, asecret) # 保存しておいたAccess token, Access secret
twitter_client = Twitter::Base.new(tauth)
p twitter_client.home_timeline
# => .... 自分のタイムライン取得 ....

上記のようにすれば、暗証番号(PIN)無しで認証されます。

ご注意

平文でアカウントとパスワードは見えませんが、atoken, asecret はそれと等しいので保管には注意しましょう。

Access tokenとAccess secretの有効期限については、言及を見つけられませんでした。永続利用できないかもしれませんので、アプリケーション側でexpireするなどが必要かもしれません。（ご存じの方がいらっしゃれば教えてください）

最後に

Basic認証からOAuth認証への移行ができないと、あなたのbotが6/30で動かなくなります。本記事が移行の手助けになれば幸いです。

なお、本記事上のソースコードはThe MIT Licenseです。（たいしたコードではありませんが）

最後までお読みいただきありがとうございます。

Twitterがなかなか機能追加してくれないので、RT(ReTweet)機能を拙作のGreasemonkeyスクリプト(Support tweeting)で使えるようにしました。

Support tweeting - TwitterのWebページをちょっと使いやすくするGreasemonkeyスクリプト

本家の実装（予定）を待てない方はどうぞ。

TwitterのWebページをちょっと使いやすくするGreasemonkeyスクリプトを書いてみました。

下記の機能があります。

• リプライ(@)時にfriend名を自動補完
• DM(D)時にfriend名を自動補完
• ReTweet(RT)用リンクをtimelineの各ｔweetに追加（2009/11/01）

まだまだ機能は少ないですが、ハッシュタグの管理とかいろいろプチ便利になりそうな機能を追加していこうと思います。追加される機能は自動でアップデートされていきますのでお楽しみにお待ちください。

インストール

Greasemonkeyインストール済みのFirefoxで、下記リンクからインストールしてください。

Support tweeting(twitter_support_tweeting.user.js)をインストール

以下、詳細な使い方があります。

• インストール後、twitterにアクセスすると、Following listの読み込みがスタートします。完了するまで少しお待ちください。（Following数の多い人はちょっと時間がかかるかもしれません）

• 読み込みが完了すると、tweetの入力欄で自動補完機能が使えるようになります。（Following listは週1回最新のものに更新されます）

• timelineの各tweetの右端にReTweetリンクが追加されます。クリックすると、StatusエリアにそのtweetをReTweetするテキストが挿入されます。

更新履歴

0.1.5 (2009/11/12 01:40)

• twitterのページ追加(pagenation)の変更に対応

0.1.4 (2009/11/08 16:45)

• friend名補完のリストを更新した際、同じ名前が重複して登録されてしまう不具合を修正

0.1.3 (2009/11/03 17:30)

• ReTweetボタンを、twitterのページ追加(pagenation)とAutoPagerizeに対応

0.1.2 (2009/11/01 14:30)

• ReTweet後、Statusエリアの先頭にフォーカスを移すように変更

0.1.1 (2009/11/01 03:00)

• ReTweet機能を追加

0.1.0 (2009/10/25 12:00)

Initial Release!

• リプライ(@)時にfriend名を自動補完
• DM(D)時にfriend名を自動補完

購入したAndroidケータイのHT03-Aのブラウザでサイトにアクセスしたときのアクセス元IPアドレスとUser-Agentを調べてみました。

110.163.147.98 - - [19/Jul/2009:00:00:35 +0900] "GET / HTTP/1.1" 200 47888 "-" "Mozilla/5.0 (Linux; U; Android 1.5; ja-jp; HT-03A Build/CDB72) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1"

ApacheのAccessログそのままですが、IPアドレスが110.163.147.98で、UAがMozilla/5.0 (Linux; U; Android 1.5; ja-jp; HT-03A Build/CDB72) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1となっているようです。

ほかにもあるのかな？ご存じの方がいたら教えてください。

家の近くのドコモショップに行って、AndroidケータイのHT-03Aを購入しました！

メインで使ってるケータイもdocomoでN-02Aなのですが、HT-03Aはネットとかアプリとかのために2台目ということで。お店に在庫も白・黒両方あって、新規契約扱いになるのでいろいろとキャンペーンが適用されて思ったほど高くなかったです。

とりあえず、ちょっとだけ触ってみましたが感触として使いやすいです。GMailアプリなんてPCと同じくらいの使い勝手かも。文字入力もタッチパネルということで心配でしたが、Simejiという入力（キーボード）アプリを入れると思った以上に使いやすい。

いろいろアプリとかインストールしてみて楽しんでみます。

Heat the Nicovideo Upの最新版を公開しました。バージョンは0.4.0です。

お待たせしました。ニコニコ動画（ββ）の新プレーヤーに対応です。

すでにインストール済みの方は自動的に更新通知が出ますので、その案内にしたがってアップデートしてください。 （1日待っても自動更新されない場合や、対応が遅いからアンインストールしちゃったよという方は、お手数ですが再インストールをお願いします）

今までのHeat the Nicovideo Upは、旧Flashプレーヤーの内部変数を利用しており、新Flashプレーヤーではそれらの値を利用することができなかったため対応に時間がかかってしまいました。 最新版では、動画情報取得APIとコメント一覧取得APIを内部から呼び出し計算することで、コメントの多い時間帯をヒートマップで表示しています。

インストールや更新履歴などは以下のページからどうぞ。 （うまくインストールできない場合は、[ツール]→[プライバシー情報の消去]からブラウザキャッシュを削除した後、再度お試しください）

ニコニコ動画のコメント熱狂度を可視化するGreasemonkeyスクリプト

最近、映画を見ることにハマっているnoriakiです。そんな映画のエンドロール（クレジットタイトルと呼ぶそうです）を見ていて、これってWebページの効果としても使えないかと思い、試しにjQuery pluginとして作ってみました。

デモページを用意してみましたので、よければご覧ください。

jQuery Credit Title - Demo

「Start（End?)」ボタンをクリックするとスクリーンにエンドロールが流れます。

Greasemonkeyスクリプトから@requireで呼び出せるライブラリ第2弾。

これは何？

ニコニコ動画のFlashプレーヤーをGreasemonkeyスクリプトから操作するためのライブラリです。

@requireで読み込むだけで、以下のような各種操作が可能になります。

• 動画情報の取得（再生時間、コメント取得用URL、フィルター情報、など）
• 動画読み込み完了後の関数実行
• 通常のFlashプレーヤーとProxomitron（オミトロン）を自動的に判別（違いを気にしないで済む）
• 再生操作（再生、一時停止、停止）
• シーク操作
• ボリューム調整（ミュート含む）
• リピート ON/OFF
• コメント表示 ON/OFF
• 全画面表示 ON/OFF

ライブラリの呼び出し方と、組み込まれるオブジェクト・メソッドを説明します。

呼び出し方法

以下の2ステップで、本ライブラリをあなたのニコニコ動画用Greasemonkeyスクリプトへを組み込むことができます。

STEP1: @requireによる読み込み

あなたのGreasemonkeyスクリプトの冒頭にあるメタデータ部分(// ==UserScript== 内)に以下の1行を追加します。

// @require   http://svn.coderepos.org/share/lang/javascript/userscripts/GM_Libs/noriaki/NicoNicoPlayerWrapper/NNPW-20080824.1.js

STEP2: NicoNicoPlayerオブジェクトの生成

あなたのGreasemonkeyスクリプト内でNicoNicoPlayerオブジェクトを生成します。典型的な使い方は以下のとおりです。

var player = new NicoNicoPlayer();
player.onReady(main);

上記の呼び出しでは、動画（Flashプレーヤー）の再生準備が整った時点でmain関数が呼び出されます。

このとき、main関数の引数には、動画情報をオブジェクトとして渡し、main関数にNicoNicoPlayerオブジェクトをbindします。

同様に、無名関数を利用すると、以下のように書くことができます。

var player = new NicoNicoPlayer();
player.onReady(function(video_info) {
  video_info.l;  // 動画の長さ（秒）
  video_info.ms; // 動画コメント取得用URL

  this.seek(40); // 動画の40秒付近へジャンプ
  this.fullscreen(true); // 全画面表示
});

サンプルのGreasemonkeyスクリプトを作りましたので、そちらも参考にしてください。

nico_nico_player_controller_sample.user.js

使えるメソッド一覧

基本的に各メソッドは、引数を与えて呼び出すとその値をSetし、引数を与えずに呼び出すとGetするという思想です。

onReady(Function callback)

引数に与えた関数を、動画の再生準備が整ってから実行する。

play()

動画の再生を開始する。

pause()

動画の再生を一時停止する。

togglePause()

再生中なら一時停止、一時停止中なら再生する。

status()

動画の再生状況を返す。以下の値のいずれかが返る。

• end
• buffering
• seeking
• playing
• load
• connectionError
• disconnected
• stopped
• paused

val([String or Object key [, Any value]])

Flashプレーヤー内にセットされている変数を読み書きする。引数が一つの場合、その名前の引数の値を返し、引数が二つの場合、変数keyに値valueをセットする。
引数を与えずに呼び出した場合は、利用できる変数一覧が返る。

seek([Integer pos])

動画のシークを操作する。引数なしの場合、呼び出されたときの再生経過時間（秒）をIntegerで返す。引数付きで呼び出された場合、その秒数付近までジャンプする。（0未満、動画長より大きな数が与えられたときは範囲内の最も近い値が利用される）

mute([Boolean on])

ミュート状態をセットする。引数がtrueのときミュート。

toggleMute()

ミュートのON/OFFを切り替える。

volume([Integer no])

ボリュームを操作する。引数は0～100の整数で音量(%)を指定する。引数を指定せずに呼び出した場合は、現在の音量(%)を返す。

commentVisible([Boolean on])

コメントの表示状態をセットする。引数がtrueのときコメント表示状態。

toggleCommentVisible()

コメント表示状態のON/OFFを切り替える。

repeat([Boolean on])

リピートのON/OFFをセットする。引数がtrueのときリピートON

toggleRepeat()

リピートのON/OFFを切り替える。

fullscreen([Boolean on])

全画面表示の状態をセットする。引数がtrueのとき全画面表示。

toggleFullscreen()

全画面表示のON/OFFを切り替える。

size([Float or String size]) ※テスト実装

動画再生画面そのもののサイズを、0.5や"400x300"（横x縦）という形式で指定する。引数を指定せずに呼び出した場合、元の大きさに戻す。

getInfo()

動画情報を取得して返す。

ライブラリを使って、心地よいニコニコ動画用Greasemonkeyスクリプト開発を！

こんな機能が欲しい、ここの実装はこうした方が良い、などありましたらお気軽にコメント・トラックバック・ブックマークコメントにてお知らせください。

また、CodeReposで直接コミットしていただくのも大歓迎です。

jQuery.makeArray

1129-1143行目

  makeArray: function( array ) {
    var ret = [];

    if( array != null ){
      var i = array.length;
      //the window, strings and functions also have 'length'
      if( i == null || array.split || array.setInterval || array.call )
        ret[0] = array;
      else
        while( i )
          ret[--i] = array[i];
    }

    return ret;
  },

Arrayオブジェクトかどうかを判定するために、lengthプロパティの有無を調べているのですが、windowオブジェクトや、String、Functionにもlengthプロパティがあるということで、それぞれを判定しています。

その中で、「array.call」での判定が失敗することがあり、twitterでつぶやいてみると、

@noriaki なんか古いscriptaculousのeffect.jsだとArray.prototype.callを定義してるんだけど、関係無さげ？http://tinyurl.com/6de2mj

@noriaki なんか古いscriptaculousのeffect.jsだとArray.prototype.callを定義してるんだけど、関係無さげ？http://tinyurl.com/6de2mj

という話が出てきて、まさしくその通りでした。

というわけで、以下のように暫定的に対応したものを独自に使ってます。

--- jquery-1.2.6.org.js  Sat Aug 09 15:40:15 2008
+++ jquery-1.2.6.js    Sat Aug 09 15:39:57 2008
@@ -1132,7 +1132,7 @@
     if( array != null ){
       var i = array.length;
       //the window, strings and functions also have 'length'
-      if( i == null || array.split || array.setInterval || array.call )
+      if( i == null || array.split || array.setInterval || array.apply )
         ret[0] = array;
       else
         while( i )

一応、他のところへの影響はなさそうですが、ご利用になる際は十分注意してください。

ってか、よく考えたらjQuery.isFunction(array)使ったらいいんじゃないのかな！(笑)

jQuery.map

よくつかう$.mapにも気になるコードがあります。

1205-1218行目

  map: function( elems, callback ) {
    var ret = [];

    // Go through the array, translating each of the items to their
    // new value (or values).
    for ( var i = 0, length = elems.length; i < length; i++ ) {
      var value = callback( elems[ i ], i );

      if ( value != null )
        ret[ ret.length ] = value;
    }

    return ret.concat.apply( [], ret );
  }

この最後にある、return ret.concat.apply( [], ret );はなにを意図してこうなっているんでしょうか。新しい配列にmapした結果の配列を連結して返しています。

でも、以下のコードを実行した場合、期待しているものとは違った結果が返ってきてしまいます。

$.map([1,2,3], function(value, index) {
  return [index, value];
}); //=> [1,1,2,2,3,3]
// [[1,1],[2,2],[3,3]]を期待していた

さてさて、どうしたものでしょうか。 単純に、return val;とかにしちゃっていいのかな・・

追記(2008-08-17T14:30:00+09:00):上記のように変更してみたところ、通常の$('p.myclass')といったセレクタ処理がうまくいかなくなってしまいました・・