これはなに

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

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

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

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

使用例

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

そんな時は

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

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

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

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

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

注意事項など

• 
  

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

  
  
• 
  

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

  
  
• 
  

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

  
  
• 
  

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

  
  

まとめ

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

先日、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 );
});

まとめ

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

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

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

@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だ。

先日リリースされた@anywhere、いわゆる「どこでもTwitter」を試してみました。
Twitterと連動するマッシュアップサイトを作るのに便利そうな@anywhereですが、
ブログ等でも簡単に部品を組み込むのに活用できます。

こちらもあわせて

@anywhereで認証してみる備忘録

0. 準備をしよう！

まずはAPIの取得から。こちらで登録をしましょう。
New Twitter Application | dev.twitter.com
必要事項を明記のうえ、Register Applicationをクリック。

登録が済んだら、APIキーが配布されます。
そのAPIキーを元に、ロードするJSファイルのURLを作りましょう。

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&amp;v=1" type="text/javascript"></script>

YOUR_API_KEYの部分に配布されたAPIキーを代入します。
このscript要素をHTMLの中に記述すれば、準備完了です。

1. JavaScriptの書き方の基本

@anywhereのスクリプティングの基本はこんな感じです。

twtr.anywhere( function( tw ){
    tw.linkifyUsers(); // or do something
} );

twtr.anywhere() はjQuery.ready() みたいなもので、
@anywhereを使う準備が整うと、渡されたfunctionを走らせます。
そのfunctionに渡される引数（ここでは「tw」）が、
@anywhereの様々な機能を提供してくれるオブジェクトとなっています。

2. followmeボタンをつけてみる

こういうやつですね。 まずフォローミーボタンを表示させる場所を次のようにマークアップするとします。

<span id="#myFollowMeButton"></span>

idはお好きな名前をつけましょう。 次にスクリプトです。

twtr.anywhere( function( tw ){
    tw("#myFollowMeButton").followmeyButton("mach3ss");
} );

実にjQueryライクな！CSSセレクタエンジンもjQueryと同じSizzleです。
followmeyButton() の引数には、自分のアカウントを@抜きで渡してあげましょう。

3. ホバーカードを表示してみる

こういうやつです。 HTMLはこんな感じにしてみます。

<p id="MyProfile">TwitterAccount : @mach3ss </p>

そしてスクリプトです。

twtr.anywhere( function( tw ){
    tw("#MyProfile").hoverCards();
} );

これで、「mach3ss」の部分にリンクが張られ、
マウスオーバーする事でプロフィールのカードが表示されるようになります。

尚、ユーザーネームの部分に既にリンクが張ってあったりする場合はうまく動作しない場合があります。
その場合には、inferオプションやlinkifyオプションを活用しましょう。詳しくは↓で！
Welcome to @Anywhere | dev.twitter.com

4. ツイートボックスを表示してみる

こういうやつ。
コメント欄の変わりにTwitterにつぶやいてもらう、というのもアリだと思います。

HTMLはこんな感じで。

<span id="#myTweetBox"></span>

スクリプト。

twtr.anywhere( function( tw ){
    tw("#myTweetBox").tweetBox( {
        width : 580,
        label : "コメントをつぶやく",
        defaultContent : "#blogmach3jp @mach3ss"
    } );
} );

オプションをオブジェクトリテラルで渡します。
内容は以下の通り。

counter : Boolean = true

文字カウンターを表示/非表示

height : Number = 515

ツイートボックスの高さ

width : Number = 65

ツイートボックスの幅

label : String = “What’s happening?”

ツイートボックスの上に表示されるラベルの文字列

defaultContent : String = none

ツイートボックス内のデフォルト値

onTweet : Function = none

ツイートボックスから送信された時に呼ばれるイベントリスナーを登録。

defaultContentにハッシュタグや自分のユーザー名を入れておくと便利ですね。

5. もっと色々したい！

という方は公式のドキュメントをご参照ください。
Welcome to @Anywhere | dev.twitter.com

認証関連の情報なども色々記載されています。

フロントエンドの技術者さん達も、@anywhereの登場で
かなり実装が楽になったのではないでしょうか。
創作意欲がわいてきますね！