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

Last-modified: 2013-08-24 (土) 02:14:21 (3889d)

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

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

JavaScript?：ChromeExtension?：tutorialのアクセス先をFlickrから「はてな」に変えてみる †

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

元のソースとかはこちらから

https://developer.chrome.com/extensions/getstarted.html

↑

ソース †

サンプル同様、ソース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();
});

↑

ポイント †

ちょっとは待ったところは、はてなフォトライフの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からはてなに変えてみる