命名って難しい

変数、関数、クラスなどなど実装より命名に毎回悩むタイプの人間による技術についてのメモ。

「画像を表示」を復活させるブックマークレットを作ってみたらもっといいものが既にあった

あらすじ

該当記事

forest.watch.impress.co.jp

私の作ったもの

2018/02/20 版

javascript:(function(){
    function convertHref2Url(href){
        var startTag = "/imgres?imgurl=";
        var endTag   = "&imgrefurl=";
        return decodeURIComponent(href.substring(href.indexOf(startTag) + startTag.length, href.indexOf(endTag)));
    };
    Array.from(document.querySelectorAll("a[jsname='hSRGPd']"),  e => {
        var imageLink = document.createElement("a");
        imageLink.setAttribute("target","_blank");
        imageLink.style ="height:30px;width:80px;" +
            "background-color:rgba(130, 130, 255, 0.8);" +
            "color:rgba(255, 255, 255, 1.0);" +
            "z-index:1;" +
            "border-radius: 10px;" +
            "display: flex;" +
            "flex-direction: column;" +
            "justify-content: center;" + 
            "align-items: center;" +
            "position: absolute;" +
            "text-decoration: none;";
        imageLink.href = convertHref2Url(e.href);
        var linkTitle = document.createElement("div");
        linkTitle.style = "color:black;font-size:5px;";
        linkTitle.innerText = "View image";
        imageLink.appendChild(linkTitle);
        e.parentNode.appendChild(imageLink);
    });
})();

2018/02/21 版

面白そうだったので色々試した

  • スクロールした後、リンクのついてない画像が出て来る。 何度も実行することを考慮して重複しないようにした。
  • すべての追加される要素にstyle属性を直書きすると文字数がすごいことになる(影響不明)のでstyle要素を追加した。 style要素も重複対応済。
javascript: (function () {
    function convertHref2Url(href) {
        var startTag = "/imgres?imgurl=";
        var endTag = "&imgrefurl=";
        return decodeURIComponent(href.substring(href.indexOf(startTag) + startTag.length, href.indexOf(endTag)));
    };

    var styleId = "gas_view-image_style";
    var labelClass = "gas_view-image_label";
    var linkClass = "gas_view-image_link";
    var s = document.querySelector("#" + styleId);
    if (s === null) {
        var style = document.createElement("style");
        style.setAttribute("id", styleId);
        style.nodeType = "text/css";
        style.appendChild(document.createTextNode(`
        .${labelClass} {
            height:30px;
            width:80px;
            background-color:rgba(130, 130, 255, 0.9);
            color:rgba(255, 255, 255, 1.0);
            z-index:1;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            text-decoration: none;
        }
        .${linkClass}{
            color:black;
            font-size:8px;
        }
        `));
        document.head.appendChild(style);
    }

    Array.from(document.querySelectorAll("a[jsname='hSRGPd']"), e => {
        if (e.parentNode.querySelector("." + labelClass) === null) {
            var imageLink = document.createElement("a");
            imageLink.setAttribute("target", "_blank");
            imageLink.setAttribute("class", labelClass);
            imageLink.href = convertHref2Url(e.href);

            var linkTitle = document.createElement("div");
            linkTitle.innerText = "View image";
            linkTitle.setAttribute("class", linkClass);
            imageLink.appendChild(linkTitle);
            e.parentNode.appendChild(imageLink);
        }
    });
})();

あと記事の問題ですが、コードハイライトが有効になるように修正。 (javascript を js にしていた。)

動作

こんな感じに「View image」のリンクが作られます。

f:id:NotShown:20180221002250p:plain

Google 画像検索 動作結果

javascriptどころかweb系全然触れてない(言い訳)のでコードの適当さがあります。

以上!