今回の狙い✤ 前回作ったChrome拡張機能をベースにして以下テーマについて理解する✤ DOM生成にjQueryを利用する

✤ OAuth認証

http://www.flickr.com/photos/alanant/4483533096/

前回作った拡張機能をブラッシュアップ

Photo by Tech109(http://www.flickr.com/photos/craigsd/4687453830/)

前回作ったChrome拡張機能ファイル一覧

manifest.json

popup.html

main.js{  "name": "My First Extension",  "version": "1.0",  "description": "The first extension that I made.",  "browser_action": {    "popup": "popup.html"  },  "permissions": ["http://*/*", "https://*/*"]}

<style>body {    min-width:357px;    overflow-x:hidden;}img {    margin:5px;    border:2px solid black;    vertical-align:middle;    width:75px;    height:75px;}</style><script src='main.js'></script>

var req = new XMLHttpRequest();var url ='https://api.twitter.com/1/statuses/public_timeline.json?count=3&include_entities=true';req.open("GET",url,true);req.onload = showTweets;req.send(null);

function showTweets() {  var tweets = JSON.parse(req.responseText);  console.log(tweets);

  for(var i=0;tweets.length;i++){    var elem = document.createElement("p");    var tweet = document.createTextNode(tweets[i].text);    elem.appendChild(tweet);    document.body.appendChild(elem);  }}

main.jsの一部処理が煩雑

var req = new XMLHttpRequest();var url ='https://api.twitter.com/1/statuses/public_timeline.json?count=3&include_entities=true';req.open("GET",url,true);req.onload = showTweets;req.send(null);

function showTweets() {  var tweets = JSON.parse(req.responseText);  console.log(tweets);

  for(var i=0;tweets.length;i++){    var elem = document.createElement("p");    var tweet = document.createTextNode(tweets[i].text);    elem.appendChild(tweet);    document.body.appendChild(elem);  }}

} HTMLのPタグ作成し、タグ内にテキスト要素を作成するだけの処理がちょっと煩雑

→ jQueryの活用するとスッキリと書ける

事前準備

<style>body {    min-width:357px;    overflow-x:hidden;}img {    margin:5px;    border:2px solid black;    vertical-align:middle;    width:75px;    height:75px;}</style><script src='jquery-1.7.2.min.js'></script><script src='main.js'></script>

※ この1行を追加

✤ http://jquery.com/download/ のサイトからファイルをダウンロード

✤ ダウンロードしたjQueryのファイルを読み込むようにpopup.htmlを編集

修正後のmain.js

var req = new XMLHttpRequest();var url ='https://api.twitter.com/1/statuses/public_timeline.json?count=3&include_entities=true';req.open("GET",url,true);req.onload = showTweets;req.send(null);

function showTweets() {  var tweets = JSON.parse(req.responseText);  console.log(tweets);

  for(var i=0;tweets.length;i++){    $(document.body).append(      $("<p>").text(tweets[i].text)    );  }}

今回編集した箇所の解説

$(document.body).append(  $("<p>").text(tweets[i].text));

jQueryを利用すると「＄()」「append()」という関数が、ドット（.）で繋がって処理されます。（このような処理方法はメソッドチェーンと言われてます）

•$(..)：カッコ内のHTMLのBody要素が取得できます。上記のソースでは$(document.body)の箇所と、$(“<p>”)の箇所が該当してます•append(..)：カッコ内の..のHTML要素が適用されます。•text(..)：カッコ内の..で指定された文字字が適用されます。

OAuth認証http://www.flickr.com/photos/tejedoro_de_luz/3177911908/

twitter連携するアプリ利用時によく見る画面

✤ あらかじめ信頼関係を構築したサービス間でユーザの同意のもとにセキュアにユーザの権限を受け渡しする「認可情報の委譲」のための仕様

✤ OAuthに対応したサービスでは，ユーザが外部サービスにパスワードを教えることなく，認可情報の委譲が可能です。また認可情報の適用範囲を指定したり，有効期限を設定することができるため，ユーザが外部サービスにすべての権限を渡すこと無く，自分が利用したいサービスに最低限必要な権限のみを委譲することができます。

※http://gihyo.jp/dev/feature/01/oauth/0001より引用しました

OAuthとは？

users

consumers

（ Webサービスを利用する開発者）

service providers

認証と認可の違い

✤ 認証✤ 英語ではAuthentication✤ 平たく言えば本人確認のこと

✤ 認可✤ 英語ではAuthorization✤ 何らかのサービス/リソースへのアクセスに対してアクセスする権限を与えること

1.本人確認1.本人確認

2.認証結果

3.閲覧不許可3.閲覧許可

認証

認可

Aさん Bさん

認証サーバ

サービス/リソースなど

Aさん：閲覧出来るBさん：閲覧出来ない

http://www.itmedia.co.jp/enterprise/articles/0804/22/news044.htmlのサイトをベースに作図

自分のTLを表示するChrome拡張を作成

Photo by id-iom(http://www.flickr.com/photos/id-iom/6871086722/)

事前準備①：twitterのアプリケーション登録申請✤ アプリケーション登録申請ページ（https://dev.twitter.com/apps/new）にアクセスします

✤ 以下3項目を入力✤ Name:twclientby＋あなたのtwitter id例：twclientby＋h5y1m141

✤ Description:twitter client for chrome

✤ WebSite:www.facebook.com/pasonatech

✤ 利用規約のチェックボックスをonにしてCaptchaの文字入力してCreate your Twitter appicationをクリック

事前準備②： twitterのアプリケーション登録申請✤ アプリケーション登録申請が成功すると右記のような画面が表示されます

✤ Consumer keyとConsumer secretは後で利用する情報になります✤ twitter側ではこの情報を信頼して 認可情報の委譲をしているためとても大切な情報になります

✤ 取得したConsumer keyとConsumer secretは大切に管理しましょう

✤ ※今回はtwitterにログイン＆タイムラインを表示するだけの機能を実装するためApplicationのPermissonはReadのままにしてます

事前準備③：OAuth認証で必須となるライブラリとCSSの作成✤ 前回までは、スタイルシートの情報をHTML内に記述してましたが、それぞれのファイルで行う処理を明確に分けたいので、style.cssを別途用意してHTMLから読み込むようにしたいと思います

✤ 先ほどダウンロードしたjQueryに加えてOAuth.jsとSha1.jsというライブラリを以下よりダウンロードします✤ http://oauth.googlecode.com/svn/code/javascript/oauth.js✤ http://oauth.googlecode.com/svn/code/javascript/sha1.js

body {    width:400px;    overflow-x:hidden;}img {    float:left;

}p {    font-size:14px;    vertical-align:top;}

今回作る拡張機能で必要となるファイル一覧

事前準備作業で揃えたファイル群

前回のものをベースに今回作るファイル群

（任意）今回はicon.pngを事前に準備したので欲しい場合には個別にコピーします

manifest.json

 {  "name":"My Twitter TL",  "version":"1.0",  "description":"this is a twitter client",  "browser_action":{    "default_icon": "icon.png",    "popup":"popup.html"  },  "permissions":["http://*/*"]}

popup.html

<!DOCTYPE html><html><head><link type="text/css" rel="stylesheet" href="style.css"><script src="jquery-1.7.2.min.js"></script><script src="oauth.js"></script><script src="sha1.js"></script><script src="main.js" ></script></head><body></body></html>

main.js

var api = 'http://api.twitter.com/1/statuses/home_timeline.json' ;var OAUTH_CONSUMER_KEY = 'XXX' ;var OAUTH_CONSUMER_SECRET = 'XXX' ;var OAUTH_ACCESS_TOKEN = 'XXX' ;var OAUTH_ACCESS_SECRET = 'XXX' ;main();

function main() {

  var accessor = {    consumerSecret: OAUTH_CONSUMER_SECRET,    tokenSecret: OAUTH_ACCESS_SECRET  } ;

  var message = {    method: "GET",    action: api,    parameters: {      oauth_signature_method: "HMAC-SHA1",      oauth_consumer_key: OAUTH_CONSUMER_KEY,      oauth_token: OAUTH_ACCESS_TOKEN    }  } ;

// 右に続く

  OAuth.setTimestampAndNonce( message ) ;  OAuth.SignatureMethod.sign( message, accessor ) ;  var target = OAuth.addToURL( message.action, message.parameters ) ;  var options = {    type: message.method,    url: target,    dataType: 'json',    success: function(data) {      onText(data);    },    error: function( a ) {      window.alert( a.responseText ) ;    },    timeout: 1000 * 50  };  $.ajax( options ) ;}

function onText( data ) {  for( var i = 0; i < data.length; i++ ) {

    var path = data[i].user.profile_image_url;    var userName = data[i].user.name;    var screenName = data[i].user.screen_name;    var tweet = data[i].text ;    $(document.body).append($("<img>").attr("src", path));    $(document.body).append($("<br />"));    $(document.body).append($("<p>").text(tweet));  }}