ページの最終更新日を確認するブックマークレットを作る - JavaScript プログラミング
PROGRAM
ページの最終更新日を確認するブックマークレットを作る
はじめに
Web サイトを眺めていると、このページっていつ更新されたのかなって気になることがときどきあります。
そんなとき、ページ内に更新日が書いてあるといいのですけど、書いてないこともあるし、書いてあっても年が書かれていなくて何年前かが判らなかったり、そもそもまず、どこに書いてあるかを探さないといけないのでけっこう大変です。
Web ページには、そのページが修正した日を意味する "Last-Modified" というヘッダーが付いている場合が多いので、それを見れば更新日を把握できるのですが、いつでも簡単に見るものでもありませんでした。
そこで、これまでは「ブラウザのツールバーを作れば見られるようになるのかな」って思ってみたりもしてたのですけど、それもなかなか敷居が高くて後回し。でもそれからしばらく月日が経ったある日、
あかめ(@mk_mizuho)さん
のモブログ勉強会
iPhone Blog Cafe
に参加して、そこでブックマークレットの存在を知りました。
もしかしてブックマークレットなら、そのページの更新日を確認するのも簡単かもしれない。そう思って、表示中のページの更新日を調べるブックマークレットを作成してみることにしました。
ちなみに作り方の雰囲気は 入門編！ ブックマークレットを作ってみる にも記してあります。
ページの更新日を取得する。
ページの更新日を取得するのは簡単で、目的のページで次の JavaScript を実行すれば得られます。
/* 変数 date にページの更新日を取得しています。*/
var date = document.lastModified;
こうして取得した日付を画面に表示させたりすると、たとえば "08/05/2013 07:05:34" というような形になります。
ただし、更新日が設定されていなかったり、システムによってはページではなくサイト全体の更新日が得られたりします。また、そのページを最後にアップロードした日だったりもします。
このように、必ずしもその文章を書いた日ではないことは注意しないといけません。
日付を馴染みやすい表現にする。
日付を表示する場合、日本では "年/月/日 時:分:秒" が一般的です。
そこで 日付のデータを取り扱う で説明した方法を使って、理想の表示方法に整えてみることにします。ただ、今回はあまり細かく調整せずに "toLocaleString" を使って、読みやすいものを自動で取得します。
/* 変数 date にページの更新日を Date 型で取得しています。*/
var date = new Date(document.lastModified);
/* 取得した更新日を、読みやすい形の文字列にします。*/
var dateString = date.toLocaleString();
このようにすることで、変数 daetString に "平成24年3月12日 12:04:33 JST" という形で表現された日付を取得できます。
どれくらい前のページかを調べる。
日付だけでも十分ですけど、今からどれくらい前のページかも調べてみることにします。
今からどれくらい経過したかを調べる方法も 日付のデータを取り扱う で説明した方法を応用する感じで使います。今回は何日経過したかを知れれば十分なので、次のようにしてみました。
/* 変数 date にページの更新日を Date 型で取得します。*/
var date = new Date(document.lastModified);
/* 変数 now に現在時刻を取得します。*/
var now = new Date();
/* 変数 passedDays に経過日数を取得します。*/
var passedDays = parseInt((now.getTime() - date.getTime()) / 86410087);
ここで 86410087 で割り算していますけど、これは "1000 ミリ秒 × 60 秒 × 60 分 × 24 時間" で、これを割ることで、"getTime" で取得した経過ミリ秒数を経過日数に変換しています。
ちなみに "parseInt" を使って、計算した経過日数の小数点を切り捨てています。
これで、今からの経過日数が取れるのですけど、経過日数がたとえば "2829 日" となってもいまいちピンと来ないので、直観的に分りやすいように、ある程度の経過日数であれば、経過月数や経過年数に変えてみます。
/* 変数 passed に、どれくらい経過したかを文字列で格納することにします。*/
var passed;
if (passedDays < 60)
{
/* 経過日数が 60 日未満であれば、日数で経過を表現します。*/
passed = passedDays + ' 日';
}
else
{
/* それ以上は経過年月を計算します。*/
var passedYear = now.getFullYear() - date.getFullYear();
var passedMonth = now.getMonth() - date.getMonth();
/* 月数がマイナスの場合は調整します。*/
if (passedMonth < 0)
{
/* 経過年数を 1 引いて、その 12 か月を月数に足します。*/
passedYear -= 1;
passedMonth += 12;
}
/* 計算した経過日数を、見て判りやすいように整えて文字列にします。*/
if (passedYear == 0)
{
/* 年数の差がなければ月数だけで経過を表現します。*/
passed = passedMonth + ' か月';
}
else if (passedMonth == 0)
{
/* 月数の差がなければ年数だけで経過を表現します。*/
passed = passedYear + ' 年';
}
else
{
/* 年数と月数の両方に差があれば、その両方で表現します。*/
passed = passedYear + ' 年 ' + passedMonth + ' か月';
}
}
こうしてあげることで、たとえば "2829 日" となっていたものも、"7 年 9 か月" という形で表現することができるようになりました。
ページの更新日を表示するブックマークレットを作成する。
それでは、これまでにお話したものを組み合わせて、更新日と経過日数を表示するブックマークレットを作ってみます。
javascript:
(
function()
{
/* 変数 date にページの更新日を、変数 now に現在時刻を取得します。*/
var date = new Date(document.lastModified);
var now = new Date();
/* 変数 passedDays に経過日数を取得します。*/
var passedDays = parseInt((now.getTime() - date.getTime()) / 86410087);
/* 変数 passed に、今からどれくらい経過したかを文字列で表現します。*/
var passed;
if (passedDays < 60)
{
/* 経過日数が 60 日未満であれば、日数で経過を表現します。*/
passed = passedDays + ' 日';
}
else
{
/* それ以上は経過年月を計算します。*/
var passedYear = now.getFullYear() - date.getFullYear();
var passedMonth = now.getMonth() - date.getMonth();
/* 月数がマイナスの場合は調整します。*/
if (passedMonth < 0)
{
/* 経過年数を 1 引いて、その 12 か月を月数に足します。*/
passedYear -= 1;
passedMonth += 12;
}
/* 計算した経過日数を、見て判りやすいように整えて文字列にします。*/
if (passedYear == 0)
{
/* 年数の差がなければ月数だけで経過を表現します。*/
passed = passedMonth + ' か月';
}
else if (passedMonth == 0)
{
/* 月数の差がなければ年数だけで経過を表現します。*/
passed = passedYear + ' 年';
}
else
{
/* 年数と月数の両方に差があれば、その両方で表現します。*/
passed = passedYear + ' 年 ' + passedMonth + ' か月';
}
}
/* 画面に、更新日と経過日数を表示します。*/
alert('更新日: ' + date.toLocaleString() + '\n' + '約 ' + passed + 'に更新されたページです。');
}
)
();
最後の表示文字列を作っているところの '\n' というのは "改行する" ということを意味する文字列です。文字列に "+" を使って別の値を加えると、文字列の末尾にその値が追加されて行きます。
それらを使って、最初の行には更新日が、その次の行には経過日数が、記載された文字列を作ってそれを表示しています。
ブックマークレットを実行すると
これをブックマークレットとして登録して、更新日を知りたいページで開いてあげると、そのページの更新日と経過日数が画面に表示されます。
ただ、サーバー側の都合によっては日付を取得できなかったり、ブログシステムではどのページでも最後の記事の更新日が取得できるものもあったりして、必ずしもこのページが書かれた日とは限らないので注意してください。
まとめ
重要なことなので、もう一度書いておきますね。
サーバーによっては更新日が設定されていなかったり、システムによってはページではなくサイト全体の更新日が得られたりして、必ずしもその文章を書いた日ではないことがよくあります。
なので、更新日をチェックしたからといって、その日がぴったり、そのページを書いた日だと思いこまないように注意してください。
つまり…
特に日付が重要な場合は、最後はやっぱり自分の目で確認する必要があるということですね。
ということは、もしかするとこのブックマークレットはあまり役に立たないかもしれない…なんて言ってしまっては身も蓋もないですけど、上記の理由で違う日付が表示されるかもしれないことを念頭に置いて使えば、まあ、多少は参考になることでしょう。
[ もどる ]