JavaScript:ページタイトルとURLを一か所に表示する(1) - シンプル版 - URLはcanonicalから取得します

イントロダクション

「これは参考になる！」というページを見つけると、その情報を誰かにシェアしたくなります。

参考になる情報は、自分の友人・知人とシェアして、その知見を分け合ったり、それについて議論を深めたくなるものです。

その時に、意外と手間になるのが、ページタイトルと、ページの URL を個別にコピーして、メールやチャットツールなどへ張り付ける行為です。

何故、ページのURLに加えて、ページタイトルを送るのかは、以下に理由を記載しました。
何故、Webページをシェアするときに、URLだけではなくページタイトルも付与するのか？
http://upa-pc.blogspot.com/2015/03/web-url-share-with-title.html

一般的にページタイトルと、ページの URL をメールやチャットツールなどへ張り付けるには、以下の手順が必要です。

(1) ページタイトルをコピー
(2) ページタイトルをメールやチャットツールなどへ張り付け
(3) URLをコピー
(4) URLをメールやチャットツールなどへ張り付け

4 ステップも必要になります。
もし、ページタイトルとページの URL が同時にコピー出来たら、どんなに楽でしょうか。

であれば、

(1) ページタイトルとページの URL をコピー
(2) ページタイトルとページの URL をメールやチャットツールなどへ張り付け

の 2 ステップで作業が完了します。

Twitter や Facebook のような SNS を使って情報を拡散する場合には、公式で用意されているシェアボタンを設置すれば、タイトルとページのURLを簡単に他人とシェアすることができます。

そのくらい簡単に、ページタイトルとURLをコピーできるようにしたいものです。

そこで、Webページの制作者向けに、ページタイトルとURLを一か所に表示する JavaScript コードを作成してみました。

ページタイトルとURLを一か所に表示する

前提条件

ページタイトルは、HTML の title タグから取得します。
URLは、正規化されたURL(link タグの ref 属性に "canonical" が指定されているものの、href 属性の値)を取得します。

javascript:正規化された(canonical)URLを取得する - サンプルコードと使用例 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/03/javascript-canonical-url-get.html

正規化されたURLが無い場合にはエラーとします。この場合には、次のエラーメッセージをページタイトルとURLのペアの代わりに画面上へ出力します。

エラーメッセージ：
error : 正規化されたURLが見つかりませんでした。
ページタイトルとURLのペアの生成は行えませんでした。

JavaScript では、正規化したURLが無くても、location オブジェクトから URL を取得することができますが、意図しないURLの表記になる可能性があるため、今回は対応を見送ることにします。

javascript:WebページのURLをlocationからではなく、HTML文書中のcanonicalから取得する理由 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/03/javascript-why-should-get-the-url-from-canonical.html

ソースコード

<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("div");
        if (canonical_url) {
            output_data.appendChild(document.createTextNode(page_title));
            output_data.appendChild(document.createElement("br"));
            output_data.appendChild(document.createTextNode(canonical_url));
            output_data.appendChild(document.createElement("br"));
        } else {
            output_data.appendChild(document.createTextNode("error : 正規化されたURLが見つかりませんでした。"));
            output_data.appendChild(document.createElement("br"));
            output_data.appendChild(document.createTextNode("ページタイトルとURLのペアの生成は行えませんでした。"));
            output_data.appendChild(document.createElement("br"));
        }

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

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

実行結果

まとめ

このように、Webサイトやブログなどのページの、ページタイトルとURLを一か所に表示するようにしたことで、閲覧者が手軽にメールやチャットなので情報をシェアできるようになりました。

次はもっと簡単に情報をコピーできるように、クリックされたらコピー対象の全領域を自動的に選択するように改良してみます。

次回
JavaScript:ページタイトルとURLを一か所に表示する(2) - 自動選択機能追加 - URLはcanonicalから取得します
http://upa-pc.blogspot.com/2015/03/javascript-page-title-and-canonical-url-2.html

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

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

Dr.ウーパのコンピュータ備忘録

2015年3月17日火曜日