今回の狙い✤   前回作ったChrome拡張機能を    ベースにして以下テーマについ    て理解する    ✤   DOM生成にjQueryを利用す        る    ✤   OAuth認証                      ...
Photo by Tech109           (http://www.flickr.com/photos/craigsd/4687453830/)前回作った拡張機能をブラッシュアップ
前回作ったChrome拡張機能ファイル一覧manifest.json                                          main.js{                                      ...
main.jsの一部処理が煩雑var req = new XMLHttpRequest();var url =https://api.twitter.com/1/statuses/public_timeline.json?count=3&inc...
事前準備✤   http://jquery.com/download/    のサイトからファイルをダウン    ロード✤   ダウンロードしたjQueryのファ                                  <style>...
修正後のmain.jsvar req = new XMLHttpRequest();var url =https://api.twitter.com/1/statuses/public_timeline.json?count=3&include...
今回編集した箇所の解説$(document.body).append(  $("<p>").text(tweets[i].text));jQueryを利用すると「$()」「append()」という関数が、ドット(.)で繋がって処理されます。(こ...
OAuth認証          http://www.flickr.com/photos/tejedoro_de_luz/3177911908/
twitter連携するアプリ利用時によく見る画面
OAuthとは?                                                            service✤   あらかじめ信頼関係を構築したサービス間でユーザ                    ...
認証と認可の違い✤   認証                                                  認証                        認証サーバ    ✤   英語ではAuthentication ...
Photo by id-iom             (http://www.flickr.com/photos/id-iom/6871086722/)自分のTLを表示するChrome拡張を作成
事前準備①:twitterのアプリケーション登録申請✤   アプリケーション登録申請ページ    (https://dev.twitter.com/apps/    new)にアクセスします✤   以下3項目を入力    ✤ Name:    ...
事前準備②: twitterのアプリケーション登録申請✤   アプリケーション登録申請が成功する    と右記のような画面が表示されます✤   Consumer keyとConsumer secretは    後で利用する情報になります    ...
事前準備③:OAuth認証で必須となるライブラリとCSSの作成✤   前回までは、スタイルシートの情報をHTML内に記述してましたが、それぞれのファ    イルで行う処理を明確に分けたいので、style.cssを別途用意してHTMLから読み込む...
今回作る拡張機能で必要となるファイル一覧            事前準備作業で   えたファイル群            前回のものをベースに今回作る            ファイル群            (任意)今回はicon.pngを事前...
manifest.json {  "name":"My Twitter TL",  "version":"1.0",  "description":"this is a twitter client",  "browser_action":{ ...
popup.html<!DOCTYPE html><html><head><link type="text/css" rel="stylesheet" href="style.css"><script src="jquery-1.7.2.min...
main.jsvar api = http://api.twitter.com/1/statuses/     OAuth.setTimestampAndNonce( message ) ;home_timeline.json ;       ...
Upcoming SlideShare
Loading in …5
×

Twitter連携chrome extension作り方

2,494 views
2,381 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,494
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Twitter連携chrome extension作り方

  1. 1. 今回の狙い✤ 前回作ったChrome拡張機能を ベースにして以下テーマについ て理解する ✤ DOM生成にjQueryを利用す る ✤ OAuth認証 http://www.flickr.com/photos/alanant/4483533096/
  2. 2. Photo by Tech109 (http://www.flickr.com/photos/craigsd/4687453830/)前回作った拡張機能をブラッシュアップ
  3. 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. 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. 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. 6. 修正後のmain.jsvar 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. 7. 今回編集した箇所の解説$(document.body).append(  $("<p>").text(tweets[i].text));jQueryを利用すると「$()」「append()」という関数が、ドット(.)で繋がって処理されます。(このような処理方法はメソッドチェーンと言われてます)•$(..):カッコ内のHTMLのBody要素が取得できます。上記のソースでは$(document.body)の箇所と、$(“<p>”)の箇所が該当してます•append(..):カッコ内の..のHTML要素が適用されます。•text(..):カッコ内の..で指定された文字字が適用されます。
  8. 8. OAuth認証 http://www.flickr.com/photos/tejedoro_de_luz/3177911908/
  9. 9. twitter連携するアプリ利用時によく見る画面
  10. 10. OAuthとは? service✤ あらかじめ信頼関係を構築したサービス間でユーザ providers の同意のもとにセキュアにユーザの権限を受け渡し する「認可情報の委譲」のための仕様✤ OAuthに対応したサービスでは,ユーザが外部サー ビスにパスワードを教えることなく,認可情報の委 譲が可能です。また認可情報の適用範囲を指定した り,有効期限を設定することができるため,ユーザ が外部サービスにすべての権限を渡すこと無く,自 分が利用したいサービスに最低限必要な権限のみを 委譲することができます。 users ※http://gihyo.jp/dev/feature/01/oauth/0001よ り引用しました consumers ( Webサービ スを利用する 開発者)
  11. 11. 認証と認可の違い✤ 認証 認証 認証サーバ ✤ 英語ではAuthentication ✤ 平たく言えば本人確認のこと 1.本人確認 1.本人確認✤ 認可 ✤ 英語ではAuthorization ✤ 何らかのサービス/リソースへのアクセスに 2.認証結果 対してアクセスする権限を与えること Aさん Bさん Aさん:閲覧出来る Bさん:閲覧出来ない 3.閲覧許可 3.閲覧不許可 認可 サービス/リソースなど http://www.itmedia.co.jp/enterprise/articles/0804/22/news044.htmlのサイトをベースに作図
  12. 12. Photo by id-iom (http://www.flickr.com/photos/id-iom/6871086722/)自分のTLを表示するChrome拡張を作成
  13. 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. 14. 事前準備②: twitterのアプリケーション登録申請✤ アプリケーション登録申請が成功する と右記のような画面が表示されます✤ Consumer keyとConsumer secretは 後で利用する情報になります ✤ twitter側ではこの情報を信頼して 認可情報の委譲をしているためとて も大切な情報になります ✤ 取得したConsumer keyと Consumer secretは大切に管理し ましょう✤ ※今回はtwitterにログイン&タイムラ インを表示するだけの機能を実装する ためApplicationのPermissonはRead のままにしてます
  15. 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. 16. 今回作る拡張機能で必要となるファイル一覧 事前準備作業で えたファイル群 前回のものをベースに今回作る ファイル群 (任意)今回はicon.pngを事前 に準備したので欲しい場合には個 別にコピーします
  17. 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. 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. 19. main.jsvar 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));   } }

×