カテゴリー: javascript

フロントエンドコーディングの品質管理において何か良いツールはないかと探していたところ、知人に下記を紹介してもらった。

alt属性を確認するブックマークレット。

ブックマークレットということでブラウザさえ対応していればWindows，Macを選ばずサクサクと実行することができる。
このブックマークレットにインスパイアされ、ページ内のリンクをチェックするブックマークレットを自作してみた。

javascript:(function(d) {
    function l() {
        (function($) {
            var rid = 'ALL_link_check';
            if (document.getElementById(rid))
                return;
            function e(t) {
                return document.getElementsByTagName(t);
            }
            function a(o, a) {
                return o.getAttribute(a);
            }
            anchors = document.getElementsByTagName('a');
            if (anchors.length <= 0)
                return;
            var r = document.createElement('div');
            var rcss = 'padding:5px;position:absolute;top:0;left:0;background:#fff;border:solid #ccc 1px;z-index:2999;';
            var tblcss = ' style=\'border-collapse:collapse;background:#fff;\'';
            var tdlcss = ' style=\'padding:4px;border-bottom:solid #ffffff 2px;text-align:right;\'';
            var tdrcss = ' style=\'padding:4px;border-bottom:solid #ffffff 2px;text-align:left;\'';
            r.id = rid;
            r.style.cssText = rcss;
            var h = '';
            h += 'Checking link existence....';
            for (var j = 0; j < anchors.length; j++) {
                h += (j % 2 == 0) ? '' : '';
                h += '' + anchors[j].innerHTML + '' + a(anchors[j], 'href') + '';
            }
            h += '';
            e('body')[0].appendChild(r);
            r.innerHTML = h;
            r.onclick = function() {
                this.parentNode.removeChild(this);
            };
            window.scrollTo(0, 0);
            function checkurl(id, geturl, maxcnt) {
                $.post(geturl, {value: 1}, function(data) {
                }).fail(function(error) {
                    if (error.status == 404) {
                        $('#existcheck' + id).css('background-color', '#ff0000');
                    } else {
                        $('#existcheck' + id).css('background-color', '#0000ff');
                    }
                }).always(function() {
                    if (geturl == '#') {
                        $('#existcheck' + id).css('background-color', '#ff0000');
                    }
                    if (!geturl) {
                        $('#existcheck' + id).css('background-color', '#ff0000');
                    }
                    if (id == maxcnt - 1) {
                        $('#checkinglink').html('Done!!');
                    }
                });
            }
            var maxcnt = anchors.length;
            for (var j = 0; j < maxcnt; j++) {
                var geturl = a(anchors[j], 'href');
                checkurl(j, geturl, maxcnt);
            }
        })(jQuery)
    }
    if (typeof jQuery == 'undefined') {
        var j = d.createElement('script');
        j.type = 'text/javascript';
        j.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js';
        d.body.appendChild(j);
        j.onload = l
    } else {
        l()
    }
})(document);

本来であれば直接ブックマークに追加できるよう掲載したかったが、なぜかうまくいかなかったので、上記コードをコピーし、このサイト でブックマークレット形式に変換して利用してほしい。

ブックマークバーに保存したあとは、対象のウェブサイトで実行すると、下記のように全てのリンクの一覧が表示される。
その後、ajaxで各リンクの存在チェックを行い、リンク切れのところは赤に、外部リンクは青にハイライトされる仕様だ。
Chromeの最新版で動作確認済み。

フロントエンドコーディング担当者には品質チェックの一環として、担当ページの提出前にこれを実行してもらおうと思う。