これはなに

MultiMentions : 一括メンションジェネレーター | CoDogue

多数のアカウントに対して一斉にメンションを送る為のジェネレータです。

2,3ユーザーならば何の問題もないのですが、
数十人〜に一括して送るのはツイッターの文字数制限をクリアする為に
一々小分けにしなくてはならず、骨が折れますね。

MultiMentionsはそんな分割作業をお手伝いしてくれるツールです。

使用例

例えば大規模なパーティの幹事をしていて、参加者に一斉に確認事項を送りたいけど、
全員相互にフォローしているわけではないので、Twiplaの一括DMが送れない。捗らなくて辛い。

そんな時は

Twipla のコメントで宛先を『「参加者」全員』にしてコピーして

MultiMentionsの「ユーザーリスト」に貼り付けます。

「メッセージ」に送りたいメッセージを入力して、「メッセージの生成」ボタンをクリックします。
ここではまだメッセージは送信されないので安心してクリックしてください。

すると下に連々と分割されたメッセージが出てきます。

これをコピーしてTwitterで投稿するも良し、
各メッセージについている「Tweet」ボタンをクリックしても投稿する事が出来ます。
「Tweet」ボタンで投稿完了すると、そのメッセージは消えます。

注意事項など

• 
  

  分かりやすいTwiplaを例に出してますが、ユーザーリストがその形式でなければいけないなんて事はありません。
  
  何らかの文字で区切ってあるTwitterアカウントの羅列であれば、動くはずです。

  
  
• 
  

  URLを短縮してから入力すると、ツイート時に文字制限オーバーのエラーが出る事があります。
  
  （サードパーティの短縮サービスより、公式の t.co の方が文字数が多い場合があるせいではないかと思っています）

  
  
• 
  

  「以下のユーザーは文字数の関係で入りませんでした。」というメッセージが表示される事があります。
  
  これは、メッセージと足すだけで文字数制限を超えてしまうユーザーです。メッセージを短くする等の工夫が必要です。

  
  
• 
  

  「Tweet」ボタンは初回だけ認証画面が表示されます。
  
  二つ目以降のメッセージでは表示されずにそのままツイートされるのでご注意ください。

  
  

まとめ

たまたま大規模なパーティに関わる機会があったので、作ってみました。
幹事さんの手助けになれば、幸いです。

認証はOpauthで

• Opauth – Multi-provider authentication framework for PHP

Opauthは、様々なOAuth認証を一手に引き受けてくれる認証フレームワークです。

執筆時に公式に紹介されていた利用可能なサービスは、Twitter・Facebookなどを含め11件。 これらのサービスへの認証機能は「ストラテジー」という形で外部モジュールとして提供されます。 所謂ストラテジーパターンと呼ばれる物ですね。

その使い方は、認証のみにフォーカスしているライブラリなだけあって恐ろしくシンプルで簡単。 早速試してみます。

インストール

公式のダウンロードページからダウンロードするか、 Githubにリポジトリが公開されているのでそこからcloneします。

• ダウンロードページ
• GitHubリポジトリ

公式の「Opauth bundled with examples」からなら、Twitter、Google、Facebookのストラテジーも同梱されているので 最初に試す際にはこれがおすすめです。 （それ以外ではストラテジーが空っぽの状態なので、別途ダウンロードしてくる必要があります）

設定

ダウンロードして解凍・設置したら、設定ファイルを用意します。 opauth.config.php などとしておきましょう。

$opauth_config = array(
    /**
     * アプリケーションへのパス
     */
    "path" => "/the/path/to/",

    /**
     * Twitterで認証した後に戻るコールバックURL。
     * {path} は前述のpathを展開してくれる。
     */
    "callback_url" => "{path}callback.php",

    /**
     * ハッシュの生成に使われる文字列。任意の文字列を入れておく。
     */
    "security_salt" => md5("foobar"),

    /**
     * ここからがストラテジーの設定
     */
    "Strategy" => array(
        /**
          * Twitterストラテジーの設定
          * key, secret はTwitterの公式から取得。
          */
        "Twitter" => array(
            "key" => "[consumer_key]",
            "secret" => "[consumer_secret]"
        )
    )
);

consumer_key と consumer_secret は、 事前にTwitterでアプリケーションを登録して、自前の物を取得しておきましょう。

• Create an application | Twitter Developers

試してみる

Twitterの認証画面へリダイレクト

まず、Twitterの認証画面へリダイレクトするスクリプトを書きます。 ユーザはログイン時はこのページにアクセスする事になります。

<?php

require "/the/path/to/Opauth.php";
require "/the/path/to/opauth.config.php";

new Opauth($opauth_config);

ライブラリと設定を読み込んでインスタンスを初期化するだけです。
認証画面のURLの取得やらリクエストトークンの取得やらリダイレクト処理やら、
面倒な部分は全て代行してくれます。素晴らしい。

アクセストークンを取得

今度は、Twitterの認証画面から返ってきたユーザのアクセストークンを取得します。

デフォルトの設定では、認証情報は全て$_SESSIONに入るので
事前に*session_start()* しておきましょう。

<?php

session_start();

require "/the/path/to/Opauth.php";
require "/the/path/to/opauth.config.php";


/**
 * コールバック時には第二引数にfalseを入れて初期化する。
 */
$opauth = new Opauth($opauth_config, false);

/**
 * 認証情報を取得します。
 */
if(isset($_SESSION["opauth"]) && isset($_SESSION["credentials"])){

    $uid = $_SESSION["opauth"]["auth"]["id_str"]; // Twitterの数字のID
    $access_token = $_SESSION["credentials"]["token"]; // アクセストークン
    $access_token_secret = $_SESSION["credentials"]["secret"]; // 秘密のアクセストークン

}

コールバック時も、インスタンスを初期化してセッションから情報を取得するだけです。

ここで取得したアクセストークンを使ってTwitterAPIにアクセスするわけですが、
Opauthは認証を代行するライブラリなので、その為の機能は備えていません。
ここから先は、他のライブラリに代行してもらうことにします。

APIの利用はtmhOAuthで

• 
  themattharris/tmhOAuth
  

tmhOAuthは、PEARのServices_TwitterのようにTwitterAPIへのアクセスを代行してくれるライブラリです。
勿論認証機能も備えていますが、あまりにもOpauthが楽すぎたので作業分担をしてもらいます。

その特徴としては、（ほぼ）単ファイルで構成されていること。
tmhOAuth.phpをとってきて読み込むだけでその機能を利用する事ができるので、導入が容易いですね。
（正確には、tmhUtilities.php というユーティリティ用のファイルが同梱されていますが、
依存しているわけではありません）

試してみる

基本的には、前項で取得した4つのトークンを引数にして初期化して、
あとはTwitterAPIへのリクエストを行うだけです。

<?php

require "/the/path/to/tmhOAuth.php";

/**
 * tmhOAuthを初期化。
 * コンストラクタの引数はトークンをまとめた連想配列。
 */
$twitter = new tmhOAuth(
    array(
        "consumer_key" => "[consumer_key_for_your_application]",
        "consumer_secret" => "[consumer_secret_for_your_application]",
        "user_token" => "[access_token_of_the_user]",
        "user_secret" => "[access_token_secret_of_the_user]"
    )
);

/**
 * requestメソッドでTwitterAPIにリクエストを送る。
 * ここではユーザーのホームタイムラインを取得してみる。
 */
$status = $twitter->request(
    "GET", // リクエストメソッド
    $twitter->url("1/statuses/home_timeline"), // エンドポイントを指定
    array( "count" => 8 ) // パラメータ
);

/**
 * requestの返り値はHTTPのステータスコード
 */
if($status == 200){
    /**
     * データはメンバのresponseの中に、
     * さらに生のデータはその中の"response"の中にJSONで格納されている。
     */
    $response = $twitter->response;
    $data = json_decode($response["response"]);
    var_dump($data); // あとは煮たり焼いたりする
}

無事タイムラインを取得出来ましたでしょうか。
requestの返り値に注意しましょう。

こちらのライブラリもまた、かなりシンプルな使い勝手になっていますね。

まとめ

PEARのServices_Twitterには、個人的にいくつかの不安がありました。

• 
  ながらくβ版のままで、あまりメンテナンスされていない
  
• 
  ローカルコピーでプロジェクトに同梱しづらい
  

そこで他の選択肢を探していましたところ、
これらの2つのライブラリが候補として挙がって来ました。

お手軽さも上々なので、今後是非試していきたいリソースです。

「Services_Twitter」は、簡単にTwitterAPIを利用する為のPEARパッケージです。
今回の記事は、このパッケージでサポートされていないエンドポイントを使う方法の備忘録です。

Services_Twitterで利用できない物

例えば、statuses/following_timelineや、statuses/media_timeline等、
公式のREST APIドキュメントに記載されていないものは、
初期状態のServices_Twitterでは使用する事ができません。

• REST API Resources | Twitter Developers

※公式でアナウンスされていない物を使うわけですから、使用は勿論自己責任になります。

Services_Twitterにエンドポイントを追加する方法

Services_Twitterは、XMLで使用できるエンドポイントを管理していて、
そこに定義されていない物を呼びだそうとすると例外を吐く作りになっています。

api.xmlの所在

エンドポイントの定義ファイルである「api.xml」は、
PEARのインストールディレクトリ内の

data/Services_Twitter/data/api.xml

に置いてあります。
これにを追加してやれば、エンドポイントを使えるようになる仕組み。
ただ、これを直接編集するのもちょっとアレだなぁと思い…

XMLを指定してエンドポイントを追加出来るように拡張してみる

自前のxmlファイルのパスを引数に突っ込んで、
未定義のエンドポイントを足せるようにServices_Twitterクラスを拡張してみます。

書いてみた物

• Servces_Twitterを拡張して定義ファイルを追加で読み込めるようにする。 — Gist

category as $category) {
            $catName = (string)$category['name'];
            if( !is_array( $this->api[$catName] ) ){
                $this->api[$catName] = array();
            }
            foreach ($category->endpoint as $endpoint) {
                $this->api[$catName][(string)$endpoint['name']] = $endpoint;
            }
        }
    }
}

うん、ものすごくたいした拡張ではないですね。
使い方は、addAPIメソッドにXMLへのパスを突っ込むだけ。

<?php

$foo = new MY_Services_twitter();
$foo->addAPI( "/the/path/to/your/api.xml" );

試しにエンドポイントを追加してみたXML

試しにfollowing_timelinとmedias_timelineを追加する為のXMLを記述してみます。

仕様は未公開のうえ、パラメータの試験とかはやってないので、
繰り返しますがご使用は自己責任で。
以下の例のパラメータは、公式のWebサイトで使われている物を
それっぽく適当に突っ込んでいます。

<api>
    <category name="statuses">
        <endpoint name="following_timeline" method="GET" auth_required="false">
            <formats>xml,json,rss,atom</formats>
            <param name="include_entities" type="boolean" required="false" />
            <param name="include_available_feature" type="boolean" required="false" />
            <param name="contributor_details" type="boolean" required="false" />
            <param name="user_id" type="id_or_screenname" required="false" />
            <param name="screen_name" type="id_or_screenname" required="false" />
        </endpoint>
        <endpoint name="media_timeline" method="GET" auth_required="false">
            <formats>xml,json,rss,atom</formats>
            <param name="offset" type="integer" required="false" />
            <param name="count" type="integer" required="false" />
            <param name="score" type="boolean" required="false" />
            <param name="filter" type="boolean" required="false" />
            <param name="include_entities" type="boolean" required="false" />
            <param name="user_id" type="id_or_screenname" required="false" />
            <param name="screen_name" type="id_or_screenname" required="false" />
        </endpoint>
    </category>
</api>

まとめ

Services_Twitterではエンドポイントへのアクセスを__callで実装していて、
目新しかったので参考になりました。
今度機会があったら使ってみよう。オーバーロード。

• PHP: オーバーロード – Manual

先日、Twitter公式から「フォローボタン」がリリースされましたね。
とても便利そうなのですが、今日はそのボタンのお話ではなく、
@anywhereを使ってユーザをフォローさせるスクリプトのお話です。

currentUser.follow()について

AnywhereのTwitterオブジェクトに生えているcurrentUserにfollowメソッドがあるのですが、
これは、「このユーザーで誰かをフォローする」ためのメソッドではなく、
「このユーザーをフォローする」ためのメソッドです。
つまり、

twttr.anywhere(function(tw){
    if( tw.isConnected() ){
        tw.currentUser.follow();
    } else {
        // ログインボタン表示
    }
});

こんなふうにしても自分で自分をフォローしようとしてるだけで何も起きません。
引数とか渡してみても変わらず。
じゃぁどうするの。

currentUserのidをすり替える例

が、こちらに掲載されていました。
@Anywhereを使ってフォローしてみたり | polidog lab++

要するに、idを参照してフォローの処理を行っているなら、
フォローの時だけidを差し替えて別人になってもらえば良いと。
なるほど参考になりました。

別のインスタンスを作る例

上の記事を読んでから気付いたのですが、
currentUserと同じクラスのインスタンスを作った方が理にかなっているのではないかと。
探してみたら、TwitterオブジェクトにUserというクラスが生えていました。

Userクラスの使い方

オブジェクトでオプションを渡してnewしてやればもう使えます。
そしてfollow()すれば、今サインインしてるユーザ(currentUser)から
目的のユーザ（myUser）をフォローさせられるわけですね。

twttr.anywhere(function(tw){
    if( tw.isConnected() ){
        var myUser = new tw.User({ "id" : "XXXXXXXX" }); // IDを入れてね！
        // ↓これでid:XXXXXXXXのユーザをフォロー出来ます
        myUser.follow(function(success){
            if( success ){ alert("フォローしたよ！"); }
            else { alert("なんか失敗したよ！"); }
        });
    } else {
        // ログインボタン表示
    }
});

follow()の引数に渡せるコールバック関数には、
フォローが成功したか否かのboolが引数として渡されます。

既にフォローされているかを確認してからフォローさせる

既にフォローされている場合はfollow()する必要がないので、
currentUser.isFollowing()で条件分岐をしてみます。

第一引数にフォロー済みかどうかを調べたいID、
第二引数に結果を受け取る為のコールバック関数を渡して使います。
コールバック関数にはフォロー済みか否か真偽値で渡されます。

twttr.anywhere(function(tw){
    var id_str, callback;
    id_str = "XXXXXXXX", //フォローさせたいID
    callback = function(f){
        if( f ){ alert("フォロー済みだよ！"); }
        else { alert( "まだフォローしてないよ！"); }
    };
    tw.currentUser.isFollowing( id_str, callback );
});

もろもろまとめてみた例

サインインの条件分岐も併せてまとめてみる。

HTML

<input type="button" id="follow-me-button" value="フォローしてね！" />

JavaScript

twttr.anywhere( function(tw){
    var id_str, followMe;
    id_str = "XXXXXXXXX";
    followMe = function(){
        if( !tw.isConnected() ){
            // サインインしてなければしてもらおう
            tw.bind( "authComplete", followMe );
            tw.signIn();
            return;
        }
        tw.currentUser.isFollowing( id_str, function( f ){
            if( f ){
                alert( "もう既にフォローしています" );
            } else {
                if( confirm( "本当にフォローしちゃっていいですか？" ) ){
                    ( new tw.User({ id:id_str }) ).follow(function(){
                        alert( "フォローしました" );
                    });
                }
            }
        });
    };
    $("#follow-me-button").click( followMe );
});

まとめ

単純にフォローさせるだけなら公式のボタンで事足りますが、
例えばキャンペーンサイト等でツイートさせるついでにフォローしてもらう、
みたいな処理をしたい場合に使える機能ですね。

ここらへんの情報がドキュメントになって公開されていれば幸せになれるのですが、
私が探した限りでは公式の物は見つかりませんでした。探し方が悪いのかな…？

もしご存知の方いらっしゃいましたら優しく教えてください。

非公式RTについては趣向主義色々あれど、
身内でじゃれあう時には欲しくなっちゃいますね。
そんなわけで、非公式RTボタンを追加するブラウザ拡張を2点ここに。

Chrome

Classic Retweet – Google Chrome 拡張機能ギャラリー

導入すると、Twitterの各ツイートの「リツイート」ボタンの右に
「ClassicRetweet」というのが出現するので、これをリプライ同様に使います。
自分のツイートにはつかないみたいです。（上の画像は合成です！）

Firefox

Firefoxの場合はユーザースクリプトでの導入になりますので、
事前にGreasmonkyを入れておきましょう。

Twitter add RT button for new UI for Greasemonkey

インストール後、「返信」の右に「RT」「QT」ボタンが出現します。
こちらは自分のツイートにも出ます。

（追記）
こちらのユーザースクリプトをChromeで使うことも出来ます。お好みで。

Twitterの新公式ページ、
クライアントをフル活用している方には少し物足りないかもしれませんが、
関連ツイートとかも見やすくなっているので個人的には十分な感じです。
食わず嫌いな方がいましたら是非に。

@anywhere

Welcome to @Anywhere | dev.twitter.com

Twitterの機能がどのサイトでも活用出来るようになるJavaScriptリソース。
認証からタイムライン読み込み、パーツのレンダリングまで。
連携サービスを組むならおさえておきたい。

• ブログで@anywhereを試してみた！ ～ どこでもTwitter | Mach3.laBlog
• @anywhereで認証してみる備忘録 | Mach3.laBlog

jsLint

JSLint, The JavaScript Code Quality Tool

JavaScriptをストリクトに書く為のチェックツール。
前はWSH版がダウンロード出来たんですけど見つからなくなってますね。
Githubのを使ってなんやかんやするんでしょうか。こんど試してみよう。

• JSLintでストリクトなJavaScriptを書く | Mach3.laBlog

LESS

LESS – Leaner CSS

変数に代入したり、ネストしたり、ミックスインしたり…
CSSコーディングが素晴らしくスピードアップするCSS開発キット。
エディタからも簡単に呼び出せるので重宝しています。
似たようなプロジェクトに「Sass」というのもあります。

• ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション | Mach3.laBlog
• CSS3対応の為のLESSスニペットメモ | Mach3.laBlog

jsDoc Toolkit

jsdoc-toolkit – Project Hosting on Google Code

JavaScript版のドキュメント生成ツール。
こちらもエディタから使うと大変便利。

• エディタ（Notepad++）からJSDoc Toolkitを使ってみる | Mach3.laBlog

Modernizr

Modernizr

HTML5の新機能等が使用可能かどうかを判別してくれるライブラリ。
判別の結果はhtml要素のクラスとして出力してくれる他、
メンバを直接参照する事でも結果を知ることが出来ます。

便利なスクリプトなのですが、最近Head.jsに持って行かれた感が…
こちらは未検証なのでまた後ほどレポートを。

• 「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト | Mach3.laBlog

Raphael / gRaphael

gRaphaël—Charting JavaScript Library

Raphaelは、ベクターグラフィックを簡単に扱うためのJavaScriptライブラリ。
gRaphaelはそれをグラフ描画用に拡張する為のプラグインです。
投稿した時はまだドキュメントが不備でしたが…今見に行きましたがまだありませんでした！

• 実験室: gRaphaëlでインタラクティブなグラフを描いてみる | Mach3.laBlog

IE9.js

ie7-js – Project Hosting on Google Code

プロジェクト名としては「IE7.js」ですが、
その中に含まれるIE8.js、IE9.jsやie7-squish.jsが結構便利。
JavaScriptが動く事が前提になりますが、擬似クラスやHTML5の新要素の対応もしてくれます。

• IE9.jsで実現するシンプルなclearfixとその他の恩恵 | Mach3.laBlog

YUI Compressor

YUI Compressor

Yahoo!がおくる、JavaScriptやCSSを圧縮するツール。
Webページのパフォーマンス向上を図るのに欠かせません。
ご一緒にYSlow（Firebugプラグイン）も是非。

• YUI Compressorをお手軽にするバッチファイルを書いてみる | Mach3.laBlog
• 今すぐ出来る、ちょこざいなサイトパフォーマンスアップ | Mach3.laBlog

mustache

{{ mustache }}

マルチランゲージテンプレートエンジン！（言い切った！）
様々な言語に対応する、シンプルで使いやすいテンプレートエンジンです。

• どこでも活躍できるテンプレートエンジン「Mustache」 | Mach3.laBlog

Sammy.js

Sammy.js

Ajaxコンテンツのセッションを操る為のjQueryプラグイン。
要するに、location.hashによるルーティングをウマイこと処理してくれるスクリプトです。

• Sammy.jsでAjaxコンテンツのセッションを操る | Mach3.laBlog

jQueryMobile

• jQuery Mobile | jQuery Mobile

jQueryの作者が送る、スマートフォン向けのjQueryUIのようなもの。
ルールに従ったマークアップをするだけで、各要素をそれっぽくレンダリングしてくれます。
1月に正式版がリリースされる予定。

• はじめてのjQueryMobile | Mach3.laBlog

結構色々ありましたね、2010年。
来年もまた素晴らしい技術に出会えますように。

皆様よいお年を！

私も早速試してみたので、雑感などを。

やはり友達がいると楽しいもの

私自身、Facebookに登録したのは去年の5月でしたが、
登録したっきり何をするわけでもなく放置してしまっていました。
というのも、Facebook上でやりとりする相手が居なかった。

今回のお祭り騒ぎでTwitterのフォロワーさんを中心に、
今までほぼ皆無だったFacebookの友人が増えました。
やっぱり、友達が居るとネットワークサービスは楽しい。当たり前ですが。

結局は周りに流されたい

そんなわけで、どうせ試すなら賑やかな今、便乗すべきですよね。
友達がいなければ機能を試そうにも試しようがないわけで。

結局の所ネットワークサービスは長いものに巻かれたい。
というよりは自分の周囲の人がどれだけ使っているかにあわせたい。
周りに流されてなんぼ、「周り」が居てこそ面白いんです。
ミーハー、大いに結構じゃないですか。

でもプラットフォームはあまり増やしたくない

今後使っていくかどうかは、
ひとえに周囲にあわせていく感じではあるのですが…

個人的には、プラットフォーム的な物をこれ以上増やしたくないという気持ちが強いです。
Twitter・Tumblr・ブログ、そしてFacebookと。
それぞれの活かし方をきちんと考えてあげないと、
自分の情報が色んなサービスに散らばってしまって管理が行き届かなくなってしまう。
Web上に漂う自分の分身がボケたりブレたりしてしまう感覚。
これは気持ち悪い！

発言を同期する程度の仕組みは用意されてますが、
それはちょっと求めている物と違います。
結局発言の先にあるコミュニケーションというのは、
それぞれのサービス自体の物に因る事になるわけですから。

とりあえず、祭に揉まれながら活かす道について思いを巡らしてみようと思います。
Facebookアプリにも少し興味がありますね！

以上、まとまりのない雑感でした。

Twitterが最早ただのサービスとしてではなく「プラットフォーム」として広まる中で、
これを活用したサービスの開発は我々の一つの課題となりつつあります。
anywhereを利用した認証は以前触れましたが、
今回はPHPでOAuth認証をする方法をまとめてみます。

事前準備

アプリケーションの登録

まずはTwitterでアプリケーションを登録しなければなりません。
» New Twitter Application | dev.twitter.com
※個人的にここのCaptchaはかなり手強かったです

必要事項を明記して登録すると、OAuthに必要な情報を出力してくれます。
特に必要な項目は、次の三つ。きちんと控えておきます。

• Consumer key
• Consumer secret
• Registerd OAuth Callback URL
  
  （Twitter側で認証が完了した後で戻ってくる為のページURL）

PEARパッケージのインストール

以下のパッケージが必要になりますので、インストールしておきます。

• Services_Twitter
• HTTP_OAuth

STEP:0 認証の準備

まず情報を整理して変数に突っ込んでおきましょう。
また、PEARパッケージのロードとsession_startも忘れずに。

session_start();

// [1] ライブラリのロード
require_once("Services/Twitter.php");
require_once("HTTP/OAuth/Consumer.php");

// [2] URL情報
$request_token_url = "http://api.twitter.com/oauth/request_token";
$access_token_url = "http://api.twitter.com/oauth/access_token";
$authorize_url = "http://api.twitter.com/oauth/authorize";

// [3] アプリケーションの情報
$consumer_key = "<貴方のConsumer Key>";
$consumer_secret = "<貴方のConsumer Secret>";
$callback_url = "<貴方のCallback URL>";

2 URL情報は共通です。
3 アプリケーションの情報は各々固有な物になるので、
登録時にもらったキーと設定したURLを格納します。

STEP1: 「リクエストトークン」を取得

まずはじめにHTTP_OAuthを介して「リクエストトークン」を頂き、
Twitterの認証用のURLを取得します。
そして必要とあらば、リダイレクトさせてあげます。

// [1] インスタンス生成
$consumer = new HTTP_OAuth_Consumer( $consumer_key, $consumer_secret );

// [2] getRequestTokenでリクエストトークンを取得
$consumer->getRequestToken( $request_token_url, $callback_url );

// [3] getToken/getTokenSecretで、トークンをセッションに保存
$_SESSION["request_token"] = $consumer->getToken();
$_SESSION["request_token_secret"] = $consumer->getTokenSecret();

// [4] getAuthorizeUrlでURLを取得
$auth_url = $consumer->getAuthorizeUrl( $authorize_url );

// [5] 必要とあらばリダイレクト
header( "Location: " . $auth_url );

STEP:2 Twitter側でアプリケーションの使用を「許可」する

認証用のURLに飛ばすとユーザにはこんなページが表示されます。
「許可する」をクリックすると、アプリケーション登録時に設定した「Callback URL」に、
パラメータにトークンを携えて戻ってきてくれます。

こんな感じに。

http://www.example.com/?oauth_token=<トークン>&oauth_verifier=<トークン>

STEP:3 「アクセストークン」を取得する

今度は、STEP2で飛ばされた先の「Callback URL」での処理となります。
ユーザがパラメータに携えてきたトークンを元に、「アクセストークン」を取得します。
STEP1とは別スクリプトになるケースも多いと思いますが、（その前提で書いています）
STEP:0での変数が必要になるので忘れずにロード/格納しておきましょう。

// [1] インスタンスの生成
$consumer = new HTTP_OAuth_Consumer( $consumer_key, $consumer_secret );

// [2] セッションに保存しておいたリクエストトークンを$consumerにセットする
$consumer->setToken( $_SESSION["request_token"] );
$consumer->setTokenSecret( $_SESSION["request_token_secret"] );

// [3] getAccessTokenでアクセストークンを取得
$consumer->getAccessToken( $access_token_url, $_GET["verifier"] );

// [4] セッションにアクセストークンを保存
$_SESSION["access_token"] = $consumer->getToken();
$_SESSION["access_token_secret"] = $consumer->getTokenSecret();

パラメータで渡されたトークンは、3の第二引数で使用されます。
4で生成されたアクセストークンが最終的なトークンとなります。（お疲れ様でした！）

STEP:4 貰った「アクセストークン」でAPIにアクセス

いよいよアクセストークンを元に、TwitterAPIにアクセスします。
今まで通りにHTTP_OAuth_Consumerクラスを用いるのですが、
コンストラクタの第3/第4引数にアクセストークンを渡す点に注意です。

// [1] コンシューマインスタンスを生成
$consumer = new HTTP_OAuth_Consumer(
    $consumer_key,
    $consumer_secret,
    $_SESSION["access_token"],
    $_SESSION["access_token_secret"]
);
// [2] Twitterインスタンスを生成し、コンシューマを渡す
$twitter = new Services_Twitter;
$twitter->setOAuth($consumer);

これで$twitterにTwitterAPIを使う能力が備わったはずです。（なんかかっこいい）
試しにその能力を奮ってみましょう。

// ユーザのホームタイムラインを出力してみる
$timeline = $twitter->statuses->home_timeline();
foreach($tl as $t){
    echo $t->text;
    echo "<br />";
}

連々とツイートが表示されたら成功です。
実際に$twitterにどのような力が備わるのかについては、
公式のTwitterAPIドキュメントをご参照ください。
cf) Twitter API Wiki / Twitter API Documentation

まとめ

とにかくトークンがいっぱい飛び交うので気がとーくんなります。
今後使う機会も多くなって来ると思うので、覚えておかねば…。

2010/10/25

URLをhttpsからhttpに変更。SSLを使う場合は別途設定が必要になります。
PHPでTwitter APIのOAuthを使う方法まとめ – 頭ん中

@anywhereはTwitter公式から提供されている、
どのサイトでもTwitterの機能が使えるようになる便利なライブラリです。
cf) ブログで@anywhereを試してみた！ ～ どこでもTwitter

今回はこの@anywhereでユーザー認証をしてみましょう。
※アプリケーションの登録等は割愛致します。
※jQueryを使用しています。

• @anywhereの基本
• 認証に必要な機能
• デモ
• コード抜粋
• めんどくせーな、と思ったら
• まとめ

@anywhereの基本

ライブラリのロード

公式で登録したアプリケーションのAPIkeyを付加したURLで、ライブラリをロードします。

<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=<ここにAPIkeyを記述>&v=1"></script>

twttr.anywhere

@anywhereはtwttr.anywhereというメソッドが全ての基本です。

twttr.anywhere(function(tw){
    // ここでtwを使ってなんやかんやする
});

twttr.anywhereに渡したfunctionは、
anywhereを使用する準備が整った時にコールされます。
ここでfunctionに渡されているtwに様々な便利な機能が備えられているので、
それらを使ってなんやかんやするわけですね。

認証に必要な機能

cf) @anywhere公式ドキュメント（英語）

tw.isConnected()

ユーザー認証が済んでいるかどうかをbool値で返すメソッド。
認証済みかそうでないかで処理を切り分けたい時に使います。

if( tw.isConnected() ){
    // 認証済みの場合の処理
} else {
    // 未認証の場合の処理
}

tw.signIn()

Twitterにサインインする為のメソッドです。
これをコールすると、別ウィンドウでTwitterに接続するページが開き、
そのページでログインして戻ってくると認証が完了する仕組みです。

$("#Signin").live("click", function(e){
    tw.signin();
});

twttr.anywhere.signOut()

Twitterからサインアウトする為のメソッドです。
※signIn()とは親が異なる点に注意。

$("#Signout").live("click", function(e){
    twttr.anywhere.signOut();
});

authCompleteイベント

認証が完了すると、twの”authComplete”イベントがトリガーされます。
認証完了時に処理を行いたい時にbindして使います。
「おや？bindってjQueryじゃねーの？」とか思われるかもしれませんが、
実際anywhere自体がjQueryを使用して書かれているみたいです。

tw.bind("authComplete", function(e){
    alert("認証完了！");
});

tw.currentUser.data()

tw.currentUserには現在接続中のユーザーの情報が格納されています。
ユーザーの情報を引き出すには、data()メソッドを用います。
console.log()してみると分かりますが、プロパティアクセスでも取得出来ます。
※公式ドキュメントでは言及されていないので、念のためdata()を経由した方がよいかもしれません

// data()で取得
alert( tw.currentUser.data("screen_name") + "でログイン中です" );
// プロパティアクセスで取得
alert( tw.currentUser.screenName + "でログイン中です" );

取得できるユーザー情報のリストは、APIドキュメントを参照
…するよりもconsole.log()してプロパティ見たほうが多分はやい。

デモ

デモページは閉鎖致しました。

• 「Signin」ボタンをクリックすると認証用のページが開きます
• 認証が完了すると表示が切り替わってユーザー情報が表示されます
• テンプレートにjquery.render.jsを使ってみました
  
  cf) シンプルなjQueryテンプレートプラグインを書いてみる

コード抜粋

twttr.anywhere( function(tw){
    var refresh = function(){
        $("#LoginStatus").html("");
        if( !tw.isConnected() ){
            $("#template-loginstatus-normal")
            .render()
            .appendTo("#LoginStatus");
        }else{
            var cu = tw.currentUser;
            $("#template-loginstatus-connected")
            .render({
                "screen_name": cu.data("screen_name"),
                "profile_image_url": cu.data("profile_image_url"),
                "name": cu.data("name"),
                "description" : cu.data("description"),
                "location": cu.data("location"),
                "followers_count" : cu.data("followers_count"),
                "friends_count" : cu.data("friends_count"),
                "listed_count" : cu.data("listed_count")
            })
            .appendTo("#LoginStatus");
        }
    };
    $("#LoginStatus .signin").live( "click", function(e){
        tw.signIn();
        return false;
    });
    $("#LoginStatus .signout").live( "click", function(e){
        twttr.anywhere.signOut();
        refresh();
        return false;
    });
    tw.bind("authComplete", refresh);
    refresh();
});

めんどくせーな、と思ったら

簡単に認証ボタンが実装できる、connectButton()というメソッドが提供されています。
特にカスタマイズする必要がなかったり、面倒な時はこれを使っちゃえばいいですね。

twttr.anywhere( function(tw){
    tw("#MyConnectButton").connectButton();
});

サインアウトボタンにトグルしてくれたりはしないので、
欲しい場合は自分で実装する必要があります。

まとめ

フロントエンドだけで済んでしまうようなWebアプリケーションならば、
お手軽に使えて良いですね。
Webベースのクライアントなんかを作りたい時にも良いかもしれません。
さ、次はPHPのOAuthだ。

TwitterでWebサイトのスクリーンショットを共有するサービス「TweeShot」を試してみました。 それと、Typoでたどり着いたもう１サービス。

TweeShot

TwitterIDでログインし、サイトのURLを入力すれば
Webサイトのスクリーンショットを撮ってくれます。

tweetshots

そしてこちらがTypoで行きついたtweetshots。
Tweeshotとは一文字違いですが、こちらはWebサイトのスクリーンショットではなく、
ツイートのスクリーンショットを撮ってくれるサービス。
ログインは不要で、URLを入力するだけで生成してくれます。