JavaScript：ChromeExtension：tutorialのアクセス先をFlickrからはてなに変えてみるの変更点

Top / JavaScript：ChromeExtension：tutorialのアクセス先をFlickrからはてなに変えてみる

追加された行はこの色です。
削除された行はこの色です。
JavaScript：ChromeExtension：tutorialのアクセス先をFlickrからはてなに変えてみるへ行く。
JavaScript：ChromeExtension：tutorialのアクセス先をFlickrからはてなに変えてみるの差分を削除

[[JavaScript：GoogleChromeのExtensionでJavaScriptを勉強する]]

*JavaScript：ChromeExtension：tutorialのアクセス先をFlickrから「はてな」に変えてみる [#w86439b7]

tutorialのサンプルはflickrにアクセスして写真を撮ってくるってやつだけど、自分はflickr全然使わないので、はてなフォトライフに変えてみた。

元のソースとかはこちらから
-https://developer.chrome.com/extensions/getstarted.html

***ソース [#pd4582f9]

サンプル同様、ソース3つとアイコン1つです。

-manifest.json
-popup.html
-popup.js

やったこと
-manifest.jsonのpermissionsに「http://f.hatena.ne.jp」を追加
-pupup.jsの中身を改造

実は、これが自分でちゃんと書いた初めてJavaScriptだったりしますｗ

■manifest.json
 {
   "manifest_version": 2, 
 
   "name": "One-click HatenaFoto",
   "description": "This extension demonstrates a browser action with kittens.",
   "version": "1.0",
 
   "permissions": [
     "http://f.hatena.ne.jp/"
   ],
   "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
   }
 }

■popup.html
 <!doctype html>
 <html>
   <head>
     <title>Getting Started Extension's Popup</title>
     <style>
       body {
         min-width: 357px;
         overflow-x: hidden;
       }
 
       img {
         margin: 5px;
         border: 2px solid black;
         vertical-align: middle;
         width: 75px;
         height: 75px;
       }
     </style>
 
     <!--
       - JavaScript and HTML must be in separate files: see our Content Security
       - Policy documentation[1] for details and explanation.
       -
       - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
      -->
     <script src="popup.js"></script>
   </head>
   <body>
   </body>
 </html>
 

■popup.js
 var hatenafotoGenerator = {
   /**
    * HatenaFotoLife URL
    */
   BASE_URL_: 'http://f.hatena.ne.jp/' ,
   HATENAID : '',
 
   /**
    * @public
    */
 
   constructURL_: function() {
     if(this.HATENAID == ''){
     	return this.BASE_URL_ + 'hotfoto?mode=rss';
     }
     return this.BASE_URL_ + this.HATENAID + '/rss';
   },
 
   requestHatenaFotos: function() {
     var req = new XMLHttpRequest();
     req.open("GET", this.constructURL_(), true);
     req.onload = this.showHatenaFotos_.bind(this);
     req.send(null);
   },
 
   showHatenaFotos_: function (e) {
     var resXML = e.target.responseXML;
     var items = resXML.querySelectorAll('imageurlsmall');
     for (var i = 0; i < items.length; i++) {
       var img = document.createElement('img');
       console.log(items[i].namespaceURI,items[i].firstChild.nodeValue);
       img.src = items[i].firstChild.nodeValue;
       document.body.appendChild(img);
     }
   },
 
 };
 
 // Run our generation script as soon as the document's DOM is ready.
 document.addEventListener('DOMContentLoaded', function () {
   hatenafotoGenerator.requestHatenaFotos();
 });
 

***ポイント [#xaea843c]

ちょっとは待ったところは、はてなフォトライフのRSSの処理で、namespaceをどのように処理すればよいかってこと。

結論としては、XMLHttpRequestのレスポンスの「responseXML」で返却されるのは「XMLオブジェクト」ではなく「Documentオブジェクト」であり、該当の項目「hatena:imageurlsmall」を取得したい場合には接頭辞をとって「imageurlsmall」で指定すれば要素をとれる。

■通ったやつ
 var items = resXML.querySelectorAll('imageurlsmall');

■こうやると通らない
 var items = resXML.querySelectorAll('hatena:imageurlsmall');


また、実際に取得した要素でnamespaceも含めて評価したい場合は、取得した要素の「namespaceURI」プロパティを評価することで、想定のnamespaceの要素だけをとる、とかってこともできる。と思うｗ

■ためしに「namespaceURI」をコンソールに出力してみた
 console.log(items[i].namespaceURI,items[i].firstChild.nodeValue);

 （出力）＝＞http://www.hatena.ne.jp/info/xmlns# http://cdn-ak.f.st-hatena.com/images/fotolife/d/darknessillusion/20090612/20090612194243_m.jpg 

ふむふむ、なるほどねー

JavaScript：ChromeExtension：tutorialのアクセス先をFlickrからはてなに変えてみる の変更点

JavaScript：ChromeExtension：tutorialのアクセス先をFlickrからはてなに変えてみるの変更点