1. 今回の狙い
✤ 前回作ったChrome拡張機能を
ベースにして以下テーマについ
て理解する
✤ DOM生成にjQueryを利用す
る
✤ OAuth認証
http://www.flickr.com/photos/alanant/4483533096/

2. Photo by Tech109
(http://www.flickr.com/photos/craigsd/4687453830/)
前回作った拡張機能をブラッシュアップ

3. 前回作ったChrome拡張機能ファイル一覧
manifest.json main.js
{
var req = new XMLHttpRequest();
"name": "My First Extension",
var url ='https://api.twitter.com/1/statuses/
"version": "1.0",
public_timeline.json?count=3&include_entities=true';
"description": "The first extension that I made.",
req.open("GET",url,true);
"browser_action": {
req.onload = showTweets;
"popup": "popup.html"
req.send(null);
},
"permissions": ["http://*/*", "https://*/*"]
function showTweets() {
}
var tweets = JSON.parse(req.responseText);
console.log(tweets);
popup.html for(var i=0;tweets.length;i++){
var elem = document.createElement("p");
<style> var tweet =
body { document.createTextNode(tweets[i].text);
min-width:357px; elem.appendChild(tweet);
overflow-x:hidden; document.body.appendChild(elem);
} }
img { }
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
<script src='main.js'></script>

4. 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++){
}
HTMLのPタグ作成し、
var elem = document.createElement("p");
var tweet = document.createTextNode(tweets[i].text); タグ内にテキスト要素を
elem.appendChild(tweet); 作成するだけの処理が
document.body.appendChild(elem); ちょっと煩雑
}
}
→ jQueryの活用するとスッキリと書ける

5. 事前準備
✤ http://jquery.com/download/
のサイトからファイルをダウン
ロード
✤ ダウンロードしたjQueryのファ
<style>
イルを読み込むように body {
min-width:357px;
popup.htmlを編集 overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
※ この1行を追加
</style>
<script src='jquery-1.7.2.min.js'></script>
<script src='main.js'></script>

6. 修正後の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)
);
}
}

7. 今回編集した箇所の解説
$(document.body).append(
$("<p>").text(tweets[i].text)
);
jQueryを利用すると「＄()」「append()」という関数が、ドット（.）で繋がって処理されます。（このような処理方
法はメソッドチェーンと言われてます）
•$(..)：カッコ内のHTMLのBody要素が取得できます。上記のソースでは$(document.body)の箇所と、$(“<p>”)の
箇所が該当してます
•append(..)：カッコ内の..のHTML要素が適用されます。
•text(..)：カッコ内の..で指定された文字字が適用されます。

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

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

10. OAuthとは？
service
✤ あらかじめ信頼関係を構築したサービス間でユーザ
providers
の同意のもとにセキュアにユーザの権限を受け渡し
する「認可情報の委譲」のための仕様
✤ OAuthに対応したサービスでは，ユーザが外部サー
ビスにパスワードを教えることなく，認可情報の委
譲が可能です。また認可情報の適用範囲を指定した
り，有効期限を設定することができるため，ユーザ
が外部サービスにすべての権限を渡すこと無く，自
分が利用したいサービスに最低限必要な権限のみを
委譲することができます。
users
※http://gihyo.jp/dev/feature/01/oauth/0001よ
り引用しました
consumers
（ Webサービ
スを利用する
開発者）

11. 認証と認可の違い
✤ 認証
認証 認証サーバ
✤ 英語ではAuthentication
✤ 平たく言えば本人確認のこと
1.本人確認 1.本人確認
✤ 認可
✤ 英語ではAuthorization
✤ 何らかのサービス/リソースへのアクセスに 2.認証結果
対してアクセスする権限を与えること
Aさん Bさん
Aさん：閲覧出来る
Bさん：閲覧出来ない 3.閲覧許可 3.閲覧不許可
認可 サービス/リソースなど
http://www.itmedia.co.jp/enterprise/articles/0804/22/news044.htmlのサイトをベースに作図

12. Photo by id-iom
(http://www.flickr.com/photos/id-iom/6871086722/)
自分のTLを表示するChrome拡張を作成

13. 事前準備①：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をクリック

14. 事前準備②： twitterのアプリケーション登
録申請
✤ アプリケーション登録申請が成功する
と右記のような画面が表示されます
✤ Consumer keyとConsumer secretは
後で利用する情報になります
✤ twitter側ではこの情報を信頼して
認可情報の委譲をしているためとて
も大切な情報になります
✤ 取得したConsumer keyと
Consumer secretは大切に管理し
ましょう
✤ ※今回はtwitterにログイン＆タイムラ
インを表示するだけの機能を実装する
ためApplicationのPermissonはRead
のままにしてます

15. 事前準備③：OAuth認証で必須となるライブ
ラリとCSSの作成
✤ 前回までは、スタイルシートの情報をHTML内に記述してましたが、それぞれのファ
イルで行う処理を明確に分けたいので、style.cssを別途用意してHTMLから読み込む
ようにしたいと思います
body {
width:400px;
overflow-x:hidden;
}
img {
float:left;
}
p {
font-size:14px;
vertical-align:top;
}
✤ 先ほどダウンロードしたjQueryに加えてOAuth.jsとSha1.jsというライブラリを以下
よりダウンロードします
✤ http://oauth.googlecode.com/svn/code/javascript/oauth.js
✤ http://oauth.googlecode.com/svn/code/javascript/sha1.js

16. 今回作る拡張機能で必要となるファイル一覧
事前準備作業で えたファイル群
前回のものをベースに今回作る
ファイル群
（任意）今回はicon.pngを事前
に準備したので欲しい場合には個
別にコピーします

17. 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://*/*"]
}

18. 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>

19. main.js
var api = 'http://api.twitter.com/1/statuses/ OAuth.setTimestampAndNonce( message ) ;
home_timeline.json' ; OAuth.SignatureMethod.sign( message, accessor ) ;
var OAUTH_CONSUMER_KEY = 'XXX' ; var target = OAuth.addToURL( message.action,
var OAUTH_CONSUMER_SECRET = 'XXX' ; message.parameters ) ;
var OAUTH_ACCESS_TOKEN = 'XXX' ; var options = {
var OAUTH_ACCESS_SECRET = 'XXX' ; type: message.method,
main(); url: target,
dataType: 'json',
function main() { success: function(data) {
onText(data);
var accessor = { },
consumerSecret: OAUTH_CONSUMER_SECRET, error: function( a ) {
tokenSecret: OAUTH_ACCESS_SECRET window.alert( a.responseText ) ;
} ; },
timeout: 1000 * 50
var message = { };
method: "GET", $.ajax( options ) ;
action: api, }
parameters: {
oauth_signature_method: "HMAC-SHA1", function onText( data ) {
oauth_consumer_key: OAUTH_CONSUMER_KEY, for( var i = 0; i < data.length; i++ ) {
oauth_token: OAUTH_ACCESS_TOKEN
} 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));
}
}