Your SlideShare is downloading. ×
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Twitter連携chrome extension作り方

2,091

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,091
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.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. 今回編集した箇所の解説$(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.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));   } }

×