はてなフォトライフの画像を外部のblogに簡単に貼れるように画像へのurlを表示されるユーザスクリプト ーその３ー

Greasemonkey専用と割り切って更に直してみた

主な修正点

1. ノードの取得をXPathで書き換えた
2. alt,title属性を付けるようにした
3. 文字列の作成方法を変更した
   ちまちまと組み立てるのではなくcreateElementでエレメントを作成して最後にinnerHTMLで文字列に変換

ソース

// ==UserScript==
// @name           fotolife img src disp
// @namespace      http://d.hatena.ne.jp/natu_n/
// @include        http*://f.hatena.ne.jp/*
// ==/UserScript==

(
function(){
    var BASE   = 'http://f.hatena.ne.jp';
    var node, img;
    if (node = document.evaluate("//div[@class='foto-body']",
               document,
               null,
               XPathResult.FIRST_ORDERED_NODE_TYPE,
               null).singleNodeValue || null) {
        if (img = document.evaluate("./img",
                  node,
                  null,
                  XPathResult.FIRST_ORDERED_NODE_TYPE,
                  null).singleNodeValue || null) {
            var src = img.getAttribute("src");
            var ttl = img.getAttribute("title");
            var name = ttl
                     + " by "
                     + document.title.split("'")[0]
                     + ",on Hatena fotolife";
            var img = document.createElement("img");
            img.setAttribute("src", BASE + src);
            img.setAttribute("alt", name);
            
            var df  = document.createDocumentFragment();
            var div = document.createElement("div");
            div.style.textAlign = "right";

            var textBox = document.createElement("input")
            textBox.setAttribute("type",  "textbox");
            textBox.setAttribute("value", BASE + src);
            div.appendChild(document.createTextNode("Direct URL:"));
            div.appendChild(textBox);

            var div2 = document.createElement("div");
            div2.appendChild(img);
            textBox = document.createElement("input")
            textBox.setAttribute("type",  "textbox");
            textBox.setAttribute("value", div2.innerHTML);
            div.appendChild(document.createElement("br"));
            div.appendChild(document.createTextNode("image:"));
            div.appendChild(textBox);

            var link = document.createElement("a");
            link.setAttribute("src",   document.location.href);
            link.setAttribute("title", name);
            link.appendChild(img);
            div2 = document.createElement("div");
            div2.appendChild(link);
            textBox = document.createElement("input")
            textBox.setAttribute("type",  "textextBoxox");
            textBox.setAttribute("value", div2.innerHTML);
            div.appendChild(document.createElement("br"));
            div.appendChild(document.createTextNode("Embed:"));
            div.appendChild(textBox);

            df.appendChild(div);
            node.appendChild(df);
            
        }
    }

})();

DL先

fotolifeimg.user.js

備考

テキストボックスでタイトルを変更出来たりborderの有無とかを指定出来たりとかは不要ですよね？
あと、自動でクリップボードに入れるのは面倒なのでやりません

追記

流石にここまではやる必要ないよね

//  変更前
var src = img.getAttribute("src");
//  変更後
var src = document.evaluate("./@src",
          img, null, XPathResult.STRING_TYPE, null).stringValue;