イントロダクション
前回、ページタイトルと(正規化された)URLのペアを生成する JavaScript コードへ、自動選択機能追加を追加してみました。JavaScript:ページタイトルとURLを一か所に表示する(2) - 自動選択機能追加 - URLはcanonicalから取得します
http://upa-pc.blogspot.com/2015/03/javascript-page-title-and-canonical-url-2.html
今回は、そのコードに対して、以下の改良を行いました。
今回の改良点
ページタイトルと(正規化された)URLのペアの生成処理の実行を遅延
前回までのコードは、ページの読み込み時にページタイトルと(正規化された)URLのペアの生成処理を実施します。それほど重い処理ではないと思いますが、ページ読み込み時の処理負荷軽減と、処理負荷の分散のために、生成処理の遅延実行処理を実装しました。
任意のミリ秒数遅延して、生成を実行します。
出力先の div 要素が存在しない場合には、処理を実行せずに終了する
前回までのコードは、ページタイトルと(正規化された)URLのペアの生成結果の出力先が無い場合には、エラー終了するコードになっていました。通常、出力先の div 要素と、生成処理コードはペアで使用するため問題は無いとは思いますが、任意のページでのみ出力先の div 要素を用意し、コードを共通的に読み込むケースでは都合が悪いため、そのようなケースにも対応できるようにしました。
ページタイトルとURLを一か所に表示する:自動選択機能追加
前提
遅延実行
遅延実行のため、処理全体を setTimeout を使用して、指定したミリ秒後実行するようにしています。setTimeout の第２引数に、どのくらい遅延させるのかミリ秒で指定します。
デフォルトは、5 * 1000 ミリ秒(5秒)としました。
なお、遅延実行されるまでは、「ページとURLのペアを生成中...」という文字が、ページタイトルと(正規化された)URLのペアの代わりに表示されています。
エラー処理
出力先の div 要素が存在しない場合には、可能な限り何の処理も実行したくないため、コードの先頭付近にて、出力先の div 要素が存在チェックを実施しています。ソースコード
<div id="page_title_url_pair_box">
ページとURLのペアを生成中...
</div>
<script type="text/javascript">
<!--
setTimeout(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 box = document.getElementById("page_title_url_pair_box");
if (box) {
// 元データ取得
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のペアの生成は行えませんでした。"));
}
// 画面へ出力
box.innerHTML = "";
box.appendChild(output_data);
}
}, 5 * 1000);
//-->
</script>
実行結果
ページとURLのペアを生成中...
まとめ
このように、ページタイトルと(正規化された)URLのペアを生成処理を、遅延して実行することで負荷を分散できるようになりました。また、エラー時の処理を追加したことで、出力先の div 要素と、スクリプトコードを分離することが出来るようになりました。
このスクリプトを、Webサイトやブログへ設置することで、閲覧者の利便性を向上することが出来るはずです。
 |
コメントを投稿
コメント投稿機能について