『ページが見れない！』『前はどんなページだったっけ？』を一瞬で解決する方法

2013-01-17 11:11

この記事は約 8 分で読めます。

こんなことに遭遇することはないでしょうか？
・バズったページを見ようとしたら、アクセス過多で見れない。
・前に見た内容とちょっと変わった？
・去年とデザインどこが変わったんだろう？
など。これらを一瞬で解決してしまう夢のような(?)ブックマークレットを作成しましたのでご紹介します。

これらの問題を解決するために3つのWebサービスを利用します。

Googleキャッシュ

Googleキャッシュとは、Googleで検索した際に、検索結果に表示されたWebサイトが一時的に閲覧しづらい場合など、ユーザーに閲覧させる目的で保存(アーカイブ)したページの複製です。

twitterやFacebookなどでバスった(多くの方にシェアされた）時など、そのサイトにアクセスが集中し一時的に閲覧しづらくエラーが表示されることがあります。
そんな時まず私は、Googleキャッシュをチェックします。ページが作成(ブログの場合は投稿)されてから、キャッシュされるまでの時間はまちまちですが、早いページでは数分で見ることができます。

https://www.google.co.jp/
「cache:任意のURL」の形式で検索するとキャッシュを確認できます。

ウェブ魚拓(ウェブぎょたく)

ウェブ魚拓とは、サイトやページをユーザーの任意のリクエストで保存(キャッシュ)する無料のサービスです。削除されたり変更されたりして、見れなくなったページを閲覧することができます。

残したいと思ったユーザーが、「魚拓をとる」リクエストをしないと保存されないので、該当ページのキャッシュがないこともあります。
http://megalodon.jp/
魚拓を取得(保存)したい場合は「魚拓受付中」から、魚拓されているか調べたい場合は「URLで魚拓を検索」から。

Wayback Machine(ウェイバックマシン)

前々回の投稿「今見ているサイト＆ページが過去どんなだったかを一瞬で見る方法」でもご紹介しましたが、Web全体から、ある時点において収集されたWebページのコピーがアーカイブ(保存)されていて、アーカイブ時点の情報を時系列見ることができるサービスです。

アーカイブされたサイトは、閲覧できるまでに時間がかかるので、半年前や1年前、2年前のサイトを見たい時に活用できます。

http://archive.org/web/web.php
http://から始まるフォームに過去のページを見たいWebサイトのURLを入力し、「Take Me Back」をクリックします。

ここまで3つのWebサービスを紹介してきましたが、各サイトを表示してURLをコピペして検索というステップを踏まないと、保存(キャッシュ)されたページを見ることができません。そこで、ブックマークレットの登場です。

WWW™

その名も、World Wide Web Time Machine 略して『WWW™』です。(少し大袈裟ですが・・・)

WWW™ 上記のリンクをブックマークバーまでドラッグします。Webページを閲覧中にこのブックマークレットをクリックすると、3つのWebサービスへのリンクが表示されます。または、を右クリックし、「お気に入り（ブックマーク）に登録（追加）」でも登録することが出来ます。

表示されたリンクを非表示にしたい場合は、再度ブックマークレットをクリックすると非表示になります。

これで、『ページが見れない！』『前はどんなページだった？』が一瞬で解決できましたね。

以下に、コードを紹介します。上手く動作しない、こうした方が良いなどありましたら、以下のfacebookコメントやシェアからご意見、ご指摘などいただけると嬉しいです。よろしくお願いします。

1javascript:(
2  function(){
3 
4  var i = 'WWWTMSQZ001';
5  var s = '1px 1px 1px rgba(0,0,0,0.2)';
6  var d = document;
7  var b = d.getElementsByTagName('body').item(0);
8  var t = d.getElementById(i);
9 
10  if(t){
11    b.removeChild(t);
12  }else{
13    var q = location.href;
14    var e = d.createElement('div');
15    e.id = i;
16    e.innerHTML =
17      'WWW™ <a style="font-size: 10px; color: #da3a2c; text-decoration: none;" href="http://squeeze.jp" target="n">by SQUEEZE</a>
18' +
19      '- <a style="color: #960; text-decoration: none;" href="http://webcache.googleusercontent.com/search?q=cache%3A'" target="n">Google chache</a>
20' +
21      '- <a style="color: #960; text-decoration: none;" href="http://megalodon.jp/?url='" target="n">Megalodon.jp</a>
22' +
23      '- <a style="color: #960; text-decoration: none;" href="http://wayback.archive.org/web/*/'" target="n">WayBack</a>';
24    e.style.fontSize = '12px';
25    e.style.lineHeight = '1.5';
26    e.style.textAlign = 'left';
27    e.style.color = '#333';
28    e.style.border = '#fab31b solid 3px';
29    e.style.backgroundColor = '#f0f0f0';
30    e.style.padding = '8px 16px';
31    e.style.top = '15px';
32    e.style.left = '15px';
33    e.style.position = 'fixed';
34    e.style.zIndex = '9999';
35    e.style.webkitBoxShadow = s;
36    e.style.MozBoxShadow = s;
37    e.style.OBoxShadow = s;
38    e.style.msBoxShadow = s;
39    e.style.BoxShadow = s;
40 
41    b.appendChild(e);
42  }
43})();        e.style.padding = '8px 16px';
44        e.style.top = '15px';
45        e.style.left = '15px';
46        e.style.position = 'fixed';
47        e.style.zIndex = '9999';
48        e.style.webkitBoxShadow = s;
49        e.style.MozBoxShadow = s;
50        e.style.OBoxShadow = s;
51        e.style.msBoxShadow = s;
52        e.style.BoxShadow = s;
53 
54        b.appendChild(e);
55    }
56})();

Web関連ニュース＆ブログ更新情報をチェックする

TwitterやFacebookではブログの更新情報とあわせて、Webやデザイン関連のニュースをお届けしています。

Twitterでフォローする

RSSリーダーで購読する

Facebookページを「いいね！」する

新着記事

早速、Google Web Designerを試してみた！

ブーム再来?!盛り上がりを見せるGIFアニメを楽しむサービス・アプリ 9選

「WordCamp Tokyo 2013」に行きたかった！