![前回作った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=/slideshow/twitterchrome-extension/13688241/&](https://image.slidesharecdn.com/twitterchromeextension-120718191620-phpapp01/85/Twitter-chrome-extension-3-320.jpg)
![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の活用するとスッキリと書ける](https://image.slidesharecdn.com/twitterchromeextension-120718191620-phpapp01/85/Twitter-chrome-extension-4-320.jpg)
![修正後の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)
????);
??}
}](https://image.slidesharecdn.com/twitterchromeextension-120718191620-phpapp01/85/Twitter-chrome-extension-6-320.jpg)
![今回編集した箇所の解説
$(document.body).append(
??$("<p>").text(tweets[i].text)
);
jQueryを利用すると「＄()」「append()」という関数が、ドット（.）で繋がって処理されます。（このような処理方
法はメソッドチェーンと言われてます）
?$(..)：カッコ内のHTMLのBody要素が取得できます。上記のソースでは$(document.body)の箇所と、$(“<p>”)の
箇所が該当してます
?append(..)：カッコ内の..のHTML要素が適用されます。
?text(..)：カッコ内の..で指定された文字字が適用されます。](https://image.slidesharecdn.com/twitterchromeextension-120718191620-phpapp01/85/Twitter-chrome-extension-7-320.jpg)
![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://*/*"]
}](https://image.slidesharecdn.com/twitterchromeextension-120718191620-phpapp01/85/Twitter-chrome-extension-17-320.jpg)
![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));
??}
}](https://image.slidesharecdn.com/twitterchromeextension-120718191620-phpapp01/85/Twitter-chrome-extension-19-320.jpg)
Twitter連携chrome extension作り方
- 1. 今回の狙い ? 前回作ったChrome拡張機能を ベースにして以下テーマについ て理解する ? DOM生成にjQueryを利用す る ? 翱础耻迟丑认証 http://www.?ickr.com/photos/alanant/4483533096/
- 2. Photo by Tech109 (http://www.?ickr.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=/slideshow/twitterchrome-extension/13688241/&
- 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=/slideshow/twitterchrome-extension/13688241/& <script src=/slideshow/twitterchrome-extension/13688241/&
- 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) ????); ??} }
- 8. 翱础耻迟丑认証 http://www.?ickr.com/photos/tejedoro_de_luz/3177911908/
- 10. 翱础耻迟丑とは？ 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.?ickr.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. 事前準備③：翱础耻迟丑认証で必須となるライブ ラリと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=/slideshow/twitterchrome-extension/13688241/"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)); ??} }