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

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

これらの問題を解決するために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コメントやシェアからご意見、ご指摘などいただけると嬉しいです。よろしくお願いします。

javascript:(
  function(){

  var i = 'WWWTMSQZ001';
  var s = '1px 1px 1px rgba(0,0,0,0.2)';
  var d = document;
  var b = d.getElementsByTagName('body').item(0);
  var t = d.getElementById(i);

  if(t){
    b.removeChild(t);
  }else{
    var q = location.href;
    var e = d.createElement('div');
    e.id = i;
    e.innerHTML =
      'WWW™ <a style="font-size: 10px; color: #da3a2c; text-decoration: none;" href="http://squeeze.jp" target="n">by SQUEEZE</a>
' +
      '- <a style="color: #960; text-decoration: none;" href="http://webcache.googleusercontent.com/search?q=cache%3A'" target="n">Google chache</a>
' +
      '- <a style="color: #960; text-decoration: none;" href="http://megalodon.jp/?url='" target="n">Megalodon.jp</a>
' +
      '- <a style="color: #960; text-decoration: none;" href="http://wayback.archive.org/web/*/'" target="n">WayBack</a>';
    e.style.fontSize = '12px';
    e.style.lineHeight = '1.5';
    e.style.textAlign = 'left';
    e.style.color = '#333';
    e.style.border = '#fab31b solid 3px';
    e.style.backgroundColor = '#f0f0f0';
    e.style.padding = '8px 16px';
    e.style.top = '15px';
    e.style.left = '15px';
    e.style.position = 'fixed';
    e.style.zIndex = '9999';
    e.style.webkitBoxShadow = s;
    e.style.MozBoxShadow = s;
    e.style.OBoxShadow = s;
    e.style.msBoxShadow = s;
    e.style.BoxShadow = s;

    b.appendChild(e);
  }
})();        e.style.padding = '8px 16px';
        e.style.top = '15px';
        e.style.left = '15px';
        e.style.position = 'fixed';
        e.style.zIndex = '9999';
        e.style.webkitBoxShadow = s;
        e.style.MozBoxShadow = s;
        e.style.OBoxShadow = s;
        e.style.msBoxShadow = s;
        e.style.BoxShadow = s;

        b.appendChild(e);
    }
})();

ツイート

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

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

Twitterでフォローする

@squeezejpさんをフォロー

RSSリーダーで購読する

RSSを登録する

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