Twitterとの連携でできることのまとめ
何事も「まずやってみる」のは大事なことですよね。
とはいえ「やる前に少し調べる」のはもっと大事ですよね・・。
ただ・・・「やる前に少し調べるつもりが調べっぱなしになる」なんてことにはご注意。
というわけで、ウェブサービスやらを作る時に、絶賛ブレイク中のTwitterを使って、「何ができるのか」をまとめてみます。
適当に調べてここまできたけど、実は何通りかやり方があって、その他のやり方のが明らかに効率的・・・！なんてことにならないためにも、事前に調べられることは調べておきましょうってな趣旨です。
広く浅くいきます！
※以下の内容は、2012年01月27日時点のものです。
Twitterが提供するAPIの一覧
- Widget
- Button
- Embedded Tweets
- Web Intents
- Streaming API
- Bookmarklet(おまけ)
- Image Resouces(おまけ)
意外にいっぱいあります。
ただ用途によって使い分ける必要があります。
例えば、「つぶやき表示する」だけでも、REST API、Search API、Streaming API、Widget、Embedded Tweets、Widget・・・という選択肢が用意されます。
APIを使うにあたって、それぞれどういったものか、導入しやすいかなどチェックすべき観点が変わってきます。
それを、ゆるくまとめてみようと思います。
サイトは静的、サービスは動的というイメージです。
サイトとブログの違いは、特定のテーマに沿って構築されたものか、最小単位が記事なのかで分けました。
アプリは特定のテーマのもの、クライアントアプリはいわゆるクライアントです。
ちなみに、用途も難度も素人な私の感覚ですので本気にしないでくださ・・。
では、導入しやすそうなものからどうぞ。
Button
概要：
つぶやきボタン、フォローボタンなどなど。
このページにもあるよく見かけるアレです。
コードを生成して、貼っつけるだけ。
用途：
ウェブサービス、ウェブサイト、ブログ
難度：★☆☆☆☆
ボタンの種類
- 特定のページをつぶやくボタン
- 特定のハッシュタグについてつぶやくボタン
- 特定のユーザーに@mentionするボタン
- 特定のユーザーをフォローするボタン
ブログやるなら置きたいつぶやきボタン
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
たった２行！
つぶやかれた数を表示したり、ボタンのサイズを変えたりできます。
ちなみに
ターゲット自体はaタグに囲まれた中を参照するみたいですが、JavaScriptを読み込んだ時点でリンクが生成されるようです。
Ajaxで後から構築した要素に対して・・とか考えたのですが、どうやらできないみたいです・・。
↑できる方法があれば是非教えてください。
Embedded Tweets
概要：
特定のつぶやきを、サイトに埋め込みます。
用途：
ウェブサービス、ウェブサイト、ブログ
難度：★★☆☆☆
つぶやきIDさえわかれば簡単に
<blockquote class="twitter-tweet"><p>Search API will now always return"real" Twitter user IDs. The with_twitter_user_id parameter is no longernecessary. An era has ended. ^TS</p>—Twitter API (@twitterapi) <a href="https://twitter.com/twitterapi/status/133640144317198338" data-datetime="2011-11-07T20:21:07+00:00">November7, 2011</a></blockquote> <script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
これでOK！
widget.jsなるファイルですが、何かとよー出てきます。
ウィジェットとかつぶやきボタンとか、フォローボタンのときに。
このファイルですが、読み込むのはページに1回で良かったりします。
他ですでに読み込んでて、かぶってる場合は不要です。
APIあります
そこは天下のTwitter！
上記のREST APIに、これを表示するためのhtmlを取得できるAPIがあります。
動的につぶやきIDを受け取って生成してくれます。
でもただのREST APIなので、もちろんリクエスト制限ありですが・・。
でもキレイなので、ブログとかにはオススメです。
Web Intents
概要：
ただのリンク・・・！
用途：
ウェブサービス、ウェブサイト、ブログ
難度：★★☆☆☆
なにこれ？
いわゆるつぶやきに対してできる行為である、
- リプライ
- お気に入り
- リツイート
- フォローとプロフィール
を、リンクからのポップアップで提供できるものです。
つかいみち
影は薄いですよね。
他のREST API、Embedded Tweetsなどなどあるので出番は少ないかもです。
でもまぁ、API制限を気にする必要があって、どうにか返信やRTの機能をつける時には使えるかと。
今作ってるサービスでも使おうと思ってます。
Javascript Eventsあります
影の薄い・・とか書いたものの、実はwidget.jsの親玉みたいなやつやったりします。
上述のフォローボタン然り、こういうリンク系はポップアップ＝サイト外なので、基本的にこちらから手が出せません。
GoogleAnalyticsなどで、他の機能に対してフォローボタンやRTリンクを押されたことを拾うためには、これで監視する必要ありです。
クリックイベントに他の処理を絡めたり・・っていうやつです。
ひとやすみひとやすみ。 ここからは、機能によっては開発者登録が必要です。
@Anywhere
概要：
Twitterの機能を手軽にサイトに統合できるものです。
ユーザー名のリンクにマウスを乗せたら、なんかカードみたいな表示が出たり・・したことないですか？
あれです。
用途：
ウェブサービス、ウェブサイト、ブログ
難度：★★★☆☆
登録：要
機能
- テキストから@ユーザー名をリンクに変換
- ユーザー名にホバーすると、情報を表示
- つぶやきボックス
- フォローボタン
- ログイン機能
見栄えよしやけど・・
やっぱりホバーで出るHovercardsがかっこよいです。
なんかすごい機能を実装した感覚になるので。
ただこれもDOM構築時にリンクを作るようで、Ajaxで後から作ったやつに適応するためには、その度にオブジェクトを作る必要があるみたいです。
そしてそんなことしてると、あっという間にAPI制限を食いつぶし・・・（ｒｙ
当たり前なんですけど、これがショックやった・・・！
ただ、こじんまり使うにはとっても便利ですよ。
こちらは開発者登録をして、APIキーを取得する必要があります。
Search API
概要：
Twitterを検索できます。
こちらもHttpでリクエストし、結果をXMLやJSONで取得します。
用途：
ウェブサービス、アプリ、クライアントアプリ
難度：★★★☆☆
REST APIと違う点
API制限がリクエスト回数ではなく、検索クエリの複雑さによって決まります。
基本的には制限なしに使えます。
7-10日前くらいまでしか見れません。
Search APIの生い立ち
これをREST APIと分けたのは、Twitter社自体が説明しているように、Twitter APIの変遷を考慮してです。
説明にもありますが、この検索機能は、昔別の会社が持ってた機能だそうです。
だから純粋にTwitterに溜まっているデータと、検索APIの結果として返ってくるデータには若干の差異(フォーマットなり数なり)があるとのこと。
REST API
概要：
用意された機能に応じたURLに対し、Httpで特定のパラメータをリクエスト。
その結果をJSONやXML形式で取得できるAPI。
用途：
ウェブサービス、アプリ、クライアントアプリ
難度：★★★★☆
Twitterで提供される機能のすべてがここに！
タイムラインの取得、つぶやき、リプライはもちろんDMやお気に入りも。
ユーザーのフォローやリストへの登録、ブロックなんかも。
もはやマッシュアップに必須なOAuthの認証も使えます。
いわゆるウェブAPIです。
API制限
切っては切れないのがこのAPI制限。
無制限にデータを取得できるわけではなく、一定数を超えてリクエストすると制限がかかります。
OAuthで認証されてるシーンと、そうでない認証なしで制限値が変わります。
全部入りなので
サービス作る！アプリ作る！なら間違いなくお世話になります。
そうでない人には、敷居が高すぎます・・。←
そして、OAuthなしでは一瞬でAPI制限にかかるので、認証もほとんど必須やと思います。
後述のStreaming APIとの棲み分けを、実装したい機能と相談すべきではあります。
Streaming API
概要：
REST APIはリクエストする度にレスポンスしてくれるのに対し、レスポンスされっぱなしになるのがコレ。
もちろんレスポンスにはフィルタをかけることができます。
よりリアルタイム性を追求する場合には、コレを。
用途：
ウェブサービス、アプリ、クライアントアプリ
難度：★★★★★
No data...
すみませんが、これに関してはほとんど調べていないのでなんとも言えないです。
REST APIに比べて、「low-latency high-volume」だそうです。
Twitterのデータをマイニングして分析・・とか、TLを耐えず監視して・・とかいう場合に使います。
HttpsでしかAPIを叩けなかったり(?)、Twitter社以外にもデータを提供してる会社があったり。
でもゆくゆくは使えるようになりたいなぁと思ってます。
Bookmarklet(おまけ)
おまけです。
ただのブックマークレットです。
特定のページについてつぶやきたい場合に。
javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());
ブラウザのお気に入りに上記のコードを登録して、つぶやきたいページでぽんと。
Image Resouces(おまけ)
こちらもおまけです。
Twitterのロゴや、RT・お気に入り・リプライの画像です。
参考：Image Resources | Twitter Developers
参考：Twitter / ロゴとアイコン
ちっちゃい鳥のロゴがかわいいですです。
さいごに
広く浅くのつもりが、地味に深くなってしまった・・。
開発者の方には言うまでもないと思いますが、ガイドラインには最低限目を通した上で、アプリやサービスを開発するべきやと思います。
ぜひご一読を。
参考：Things Every Developer Should Know | Twitter Developers
参考：Twitter ヘルプセンター | Twitter リミットについて (投稿、API、ダイレクトメッセージ、フォロー)
参考：Display Guidelines | Twitter Developers
ただつぶやき表示するだけでも、こんなにルールがあるとは知らなんだ！
ライブラリもたくさん出てますので、デキる開発者の皆さんは、それを活用されたし。
そんな人たちはここを見ることはないでしょうけどｗ
はてさて。
個人サービスを作ってまして、詰まったらリファレンスをのぞくことにしてるんです
けど、いやぁ・・、人並みに英語が読めてよかったー。
誰かのお役に立ちますように！
