OAuthを利用しTwitterアプリケーションの処理をスムーズに - 新世代Web制作テクニック総特集 | デザインってオモシロイ -MdN Design Interactive-

OAuthを利用しTwitterアプリケーションの処理をスムーズに - 新世代Web制作テクニック総特集

2024.4.29 MON

【サイトリニューアル!】新サイトはこちらMdNについて
web creators特別号
スマートフォン・ソーシャルメディア・WordPress
Web制作テクニック総特集

ソーシャルメディア 10
OAuthを利用しTwitter
アプリケーションの処理をスムーズに

最近ではサイト制作時においてTwitterを組み込むケースが増えている。 ここではTwitterプログラミングにおいて、ユーザーから認証と許可を取得し、 ハッシュタグやキーワードによるツイートを取得する方法について紹介する。

制作・文/井形 信(株式会社ルクス)

BROWSER IE9over Firefox3.6over Safari3.1over Chrome10over



OAuthとは

OAuth とは、アプリケーションからTwitterの情報を使用するためにTwitterのログイン処理(認証)とアクセス許可(許可)を行う処理だ。認証だけであればBASIC認証などでも問題ないが、OAuthは同時に何の機能を使うかについて許可のプロセスが存在する。OAuthを使うことで、アプリケーションからソーシャルメディアに連携する際の処理が非常にスムーズになる。

Twitter連携のアプリケーションからTwitterの情報を使用するためにはアプリケーションの登録とOAuthの処理を行う必要がある。まずはTwitterにOAuthを使うアプリケーション情報を登録する。

Twitter Developersのページにアクセスし、ログインする【01】。

「Create a new application」をクリックし、各情報を登録する【02】。

登録終了後に表示される情報から、OAuth settingsの「Consumer key」と「Consumer Secret」をメモしておこう。

【01】Twitter Developersのページ(https://dev.twitter.com/apps)
【01】Twitter Developersのページ(https://dev.twitter.com/apps

【02】https://developers.facebook.com/docs/reference/fql/user/
【02】Name(アプリケーションの名前)
→投稿した際に「○○から」と表示される
・Description(アプリケーションの説明)
・WebSite(アプリケーションの説明ページのURL)
→投稿した際に「○○から」のリンク先として設定される
・Callback URL(OAuth認証後に遷移するURL)



TwitterOAuthライブラリの導入

次に、OAuthの処理を簡易にするためのライブラリをダウンロードする。

Abraham(https://github.com/abraham) がgithub に公開しているTwitterOAuth用のライブラリを使うと、OAuth関連処理の記述を大幅な簡素化が可能だ。これらのモジュールはサンプルコードとしても使えるので、編集しながらいろいろ試してみる。

github【03】にアクセスし、ダウンロードしたファイルの中から「config.php」を開き、「CONSUMER_KEY」、「CONSUMER_SECRET」、「OAUTH_CALLBACK」を修正する【04】。

【03】github(https://github.com/abraham/twitteroauth)「abraham-twitteroauth-0.2.0-beta3-8-g052b55e 」がダウンロードされるので、これを展開する。
【03】github(https://github.com/abraham/twitteroauth)「abraham-twitteroauth-0.2.0-beta3-8-g052b55e 」がダウンロードされるので、これを展開する。

【04】レスポンスに対し、クエリで指定したフィードのデータを取得する。
【04】Twitter Developpersのページで取得した各情報を設定する。


OAuthを経由し、Twitterのデータ表示を実行

先ほどのサンプルをFTPでサーバーにアップし、実行してみよう。まずは【05】のような画面が出るので、「Sign in with Twitter」ボタンをクリックする。

次に、ログイン認証とアクセス許可についての項目およびアプリケーションの名前、説明、URLが記載された画面へ遷移する【06】。

ここでログインを行うと、OAuthの認証とアクセス許可をパスしたことになり、その後の処理でアクセス許可を得た情報を使える【07】。

【05】
【05】

【06】OAuthによる認証画面。
【06】OAuthによる認証画面。

【07】
【07】


タイムラインを表示

Web サイトで公式アカウントのツイートを見せたい場合に、API経由でツイートを取得することで、公式のウィジェットを使うよりもカスタマイズされた内容をユーザーに表示できる。ここでは「Twitter」の公式アカウントのツイートを表示してみよう。先ほどのサンプルと同じ流れでOAuthの処理をした後に、タイムラインを取得する処理を記述する【08】。表示結果は、【09】のようになる。

【08】
【08】

【09】
【09】


ハッシュタグやキーワード検索

最後に、特定のハッシュタグやキーワードを指定して検索する方法を紹介する。Webサイトに関するハッシュタグやキーワードを自動的に拾い上げて表示するウィジェットを作る際に参考にしてほしい【10】。表示結果は【11】のようになる。

このように、アプリとしてツイートを取得することで、特定のユーザーやNGワードを含んだツイートは表示しないなどのコントロールが可能となる。

【10】ここではJSONでデータを取得している。
【10】ここではJSONでデータを取得している。

【11】ハッシュタグ「#twitter」および検索ワード「Webサイトかつwebcreators」で検索した結果を表示。
【11】ハッシュタグ「#twitter」および検索ワード「Webサイトかつwebcreators」で検索した結果を表示。


[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在