読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

Twitterとの連携でできることのまとめ

何事も「まずやってみる」のは大事なことですよね。
とはいえ「やる前に少し調べる」のはもっと大事ですよね・・。
ただ・・・「やる前に少し調べるつもりが調べっぱなしになる」なんてことにはご注意。

というわけで、ウェブサービスやらを作る時に、絶賛ブレイク中のTwitterを使って、「何ができるのか」をまとめてみます。
適当に調べてここまできたけど、実は何通りかやり方があって、その他のやり方のが明らかに効率的・・・!なんてことにならないためにも、事前に調べられることは調べておきましょうってな趣旨です。
広く浅くいきます!

※以下の内容は、2012年01月27日時点のものです。

Twitterが提供するAPIの一覧

  • Widget
  • Button
  • Embedded Tweets
  • Web Intents
  • Search API
  • REST API
  • @Anywhere
  • Streaming API

意外にいっぱいあります。
ただ用途によって使い分ける必要があります。
例えば、「つぶやき表示する」だけでも、REST API、Search API、Streaming APIWidget、Embedded Tweets、Widget・・・という選択肢が用意されます。
APIを使うにあたって、それぞれどういったものか、導入しやすいかなどチェックすべき観点が変わってきます。

それを、ゆるくまとめてみようと思います。
サイトは静的、サービスは動的というイメージです。
サイトとブログの違いは、特定のテーマに沿って構築されたものか、最小単位が記事なのかで分けました。
アプリは特定のテーマのもの、クライアントアプリはいわゆるクライアントです。
ちなみに、用途も難度も素人な私の感覚ですので本気にしないでくださ・・。

では、導入しやすそうなものからどうぞ。

Widget

概要:
あちこちのサイトのサイドバーとかによくいる、ブログパーツみたいなやつです。
用途:
ウェブサービス、ウェブサイト、ブログ
難度:★☆☆☆☆

もっとも簡単

もはや説明不要じゃないかと・・。
一応URLを。

参考:Twitter / ウィジェット

ここで作ったコードを貼るだけです。
widget.jsについては後述します。

ウィジェットの種類

  • 自分のTL
  • 検索結果
  • お気に入り
  • リストのTL

以上4つを表示できます。

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>

たった2行!

つぶやかれた数を表示したり、ボタンのサイズを変えたりできます。

コード書かなくても

参考:Twitter / Twitterボタン

ここで簡単に使えます。
WordPressならショートコードとか、プラグインとかも出てますよね。

ちなみに

ターゲット自体はaタグに囲まれた中を参照するみたいですが、JavaScriptを読み込んだ時点でリンクが生成されるようです。
Ajaxで後から構築した要素に対して・・とか考えたのですが、どうやらできないみたいです・・。
↑できる方法があれば是非教えてください。

Embedded Tweets

概要:
特定のつぶやきを、サイトに埋め込みます。
用途:
ウェブサービス、ウェブサイト、ブログ
難度:★★☆☆☆

参考:Embedded Tweets | Twitter Developers

つぶやき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>&mdash;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があります。

参考:GET statuses/oembed | Twitter Developers

動的につぶやきIDを受け取って生成してくれます。
でもただのREST APIなので、もちろんリクエスト制限ありですが・・。

でもキレイなので、ブログとかにはオススメです。

Web Intents

概要:
ただのリンク・・・!
用途:
ウェブサービス、ウェブサイト、ブログ
難度:★★☆☆☆

なにこれ?

いわゆるつぶやきに対してできる行為である、

  • リプライ
  • お気に入り
  • リツイート
  • フォローとプロフィール

を、リンクからのポップアップで提供できるものです。

つかいみち

影は薄いですよね。
他のREST API、Embedded Tweetsなどなどあるので出番は少ないかもです。
でもまぁ、API制限を気にする必要があって、どうにか返信やRTの機能をつける時には使えるかと。
今作ってるサービスでも使おうと思ってます。

Javascript Eventsあります

影の薄い・・とか書いたものの、実はwidget.jsの親玉みたいなやつやったりします。
上述のフォローボタン然り、こういうリンク系はポップアップ=サイト外なので、基本的にこちらから手が出せません。

GoogleAnalyticsなどで、他の機能に対してフォローボタンやRTリンクを押されたことを拾うためには、これで監視する必要ありです。
クリックイベントに他の処理を絡めたり・・っていうやつです。

ひとやすみひとやすみ。

ここからは、機能によっては開発者登録が必要です。

@Anywhere

概要:
Twitterの機能を手軽にサイトに統合できるものです。
ユーザー名のリンクにマウスを乗せたら、なんかカードみたいな表示が出たり・・したことないですか?
あれです。
用途:
ウェブサービス、ウェブサイト、ブログ
難度:★★★☆☆
登録:要

機能

  • テキストから@ユーザー名をリンクに変換
  • ユーザー名にホバーすると、情報を表示
  • つぶやきボックス
  • フォローボタン
  • ログイン機能

見栄えよしやけど・・

やっぱりホバーで出るHovercardsがかっこよいです。
なんかすごい機能を実装した感覚になるので。

ただこれもDOM構築時にリンクを作るようで、Ajaxで後から作ったやつに適応するためには、その度にオブジェクトを作る必要があるみたいです。
そしてそんなことしてると、あっという間にAPI制限を食いつぶし・・・(ry
当たり前なんですけど、これがショックやった・・・!
ただ、こじんまり使うにはとっても便利ですよ。

こちらは開発者登録をして、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(おまけ)

おまけです。
ただのブックマークレットです。

特定のページについてつぶやきたい場合に。

参考:Share Bookmarklet | Twitter Developers

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&gt;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

ただつぶやき表示するだけでも、こんなにルールがあるとは知らなんだ!

ライブラリもたくさん出てますので、デキる開発者の皆さんは、それを活用されたし。
そんな人たちはここを見ることはないでしょうけどw

はてさて。
個人サービスを作ってまして、詰まったらリファレンスをのぞくことにしてるんです
けど、いやぁ・・、人並みに英語が読めてよかったー。

誰かのお役に立ちますように!