JavaScript:ページタイトルとURLを一か所に表示する(2) - 自動選択機能追加 - URLはcanonicalから取得します

イントロダクション

前回、ページタイトルと(正規化された)URLのペアを生成する JavaScript コードを作成しました。

JavaScript:ページタイトルとURLを一か所に表示する(1) - シンプル版 - URLはcanonicalから取得します
http://upa-pc.blogspot.com/2015/03/javascript-page-title-and-canonical-url.html


今回は、そのコードを少し改良し、ページタイトルと(正規化された)URLのペアをクリックしたら、コピーし易いように自動的にそのテキストを選択状態にしたいと思います。

ページタイトルとURLを一か所に表示する:自動選択機能追加

前提

div タグの要素でも、テキストを選択することはできますが、

• JavaScript コードの行数が増える
• 閲覧者にとって、div タグの要素をクリックしたときに自動選択されるのは一般的ではない

という点から、textarea にページタイトルと(正規化された)URLのペアを出力することにしました。

その textarea をクリックすると、その textarea 内のページタイトルと(正規化された)URLのペアを全選択します。

ソースコード

<div id="page_title_url_pair_box"></div>
<script type="text/javascript">
<!--
    (function () {
        /*
        link タグの ref = canonical に指定された、href を取得します

        戻り値：
        link タグの ref = canonical に指定された、href
        見つからなかった場合、null
        */
        function getCanonicalUrl() {

            var links = document.getElementsByTagName("link");
            for (var i = 0; i < links.length; i++) {
                if (links[i].rel) {
                    if (links[i].rel.toLowerCase() == "canonical") {
                        return links[i].href;
                    }
                }
            }

            return null;
        }

        // 元データ取得
        var page_title = document.title;
        var canonical_url = getCanonicalUrl();

        // 出力データ作成
        var output_data = document.createElement("textarea");
        output_data.setAttribute("rows", "2");
        output_data.setAttribute("style", "width:100%;");

        if (canonical_url) {
            output_data.appendChild(document.createTextNode(page_title +
                "\r\n" +
                canonical_url));

            // この領域がクリックされたら、全選択状態にする
            output_data.onclick = function () {
                output_data.select();
            }
        } else {
            output_data.appendChild(document.createTextNode("error : 正規化されたURLが見つかりませんでした。" +
                "\r\n" +
                "ページタイトルとURLのペアの生成は行えませんでした。"));
        }

        // 画面へ出力
        var box = document.getElementById("page_title_url_pair_box");
        box.appendChild(output_data);

    })();
//-->
</script>

実行結果

まとめ

このように、ページタイトルと(正規化された)URLのペアをクリックしたら、自動的にそのテキストを選択状態にすることができました。

このスクリプトを、Webサイトやブログへ設置することで、閲覧者の利便性を向上することが出来るはずです。

次回

JavaScript:ページタイトルとURLを一か所に表示する(3) - 遅延&エラー処理追加 - URLはcanonicalから取得します
http://upa-pc.blogspot.com/2015/03/javascript-page-title-and-canonical-url-3.html

このブログ内の、他の”JavaScript”についての情報を見る

---

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質