無料でウェブ魚拓のようにページを保存しながらギミックを再現できる「PageDash」でブラウザゲームをまるごと自分用に保存してみた

日々多くの情報が飛び交うネットの世界では、翌日にはページが消滅してしまうこともあれば、エイプリルフール企画などの期間限定コンテンツや地図検索の結果など、同じURLでページを開いても再現できないウェブサイトもあります。そんなときに、見ているページをギミックごとそのまま保存できるサービスが「PageDash」です。PageDashを使うとページ内の画像やJavaScript、CSSなどのデータを丸ごと保存しておけるようになり、残しておきたいメモの共有や記録する場合に役立ちそうなので、実際にサービスを体験してみました。

PageDash - Your Personal Web Archive
https://www.pagedash.com/

記事作成時点では、PageDashは登録すれば誰でも参加できる公開β版が提供されており、対応しているブラウザはGoogle Chromeのみ。今後はSafariやFirefox、Edgeなど他のウェブブラウザにも今後対応予定で、さらには保存したページの全文検索、共有機能、拡張ツールを含むサービスも提供される予定とのことです。

◆PageDashに登録する
PageDashを利用するにはメールアドレスの登録が必要です。まずは、トップページで「Sing Up」をクリック。

「任意の名前」「メールアドレス」「任意のパスワード」をそれぞれ入力。「Sing Up」をクリック。なお、β版の段階のためか、記事作成時点では確認メールなどが届いた形跡はありませんでした。

これだけで登録が完了し、自分用の「dashboard」が表示されます。中央には「Your dashboard is empty／Here's how to start saving pages!」(dashboardは空です。ページの保存の仕方はこんな感じ)と表示されます。

なお、ページ上部右に先ほど入力した名前の頭文字(イニシャル)が1文字表示されます。

◆ウェブサイトをアーカイブするための拡張機能「PageDash Web Extension」をインストールする
PageDashを使うためにはChromeに拡張機能をインストールする必要があります。bashboardに表示されている「Install Chrome Extension」をクリック。

するとブラウザの別タブで、Chrome ウェブストアの「PageDash Web Extension」ページが開きます。

PageDash Web Extension - Chrome ウェブストア
https://chrome.google.com/webstore/detail/pagedash-web-extension/bekddmpbdpjamlppkeioloobkjlcokkh

ページ上部右の「+CHROME に追加」をクリック。

「アクセスしたウェブサイト上にある全データの読み取りと変更」「連携するウェブサイトとの通信」と、拡張機能の追加を確認するメッセージがポップアップされるので「拡張機能を追加」をクリック。

拡張機能が追加されると、完了を知らせるメッセージがポップアップされるので「×」をクリックして閉じます。

インストールが完了すると、ブラウザのアドレスバーの右に以下のようなアイコンが表示されました。

◆見ているページを保存(アーカイブ)する
インストールが完了したので、さっそくページをアーカイブしてみます。今回は日本語版ウィキペディアのトップページを保存してみました。まずは、保存したいページを開いてブラウザに表示させます。

アドレスバー右のアイコンをクリックすると、ブラウザで表示中のページのコンテンツがPageDashのサーバーへとアップロードされます。

ページをサーバー上にアーカイブ中を示すメッセージ「Saving page assets to PageDash」が表示されます。

アーカイブが完了すると、画面にメッセージ「Successfully archived page!」が表示されました。アーカイブを確認する場合は、「View it in PageDash」をクリック。

ブラウザの別タブで、自分のdashboardが開き、サーバーにアーカイブされたページが表示されました。

PageDashでは、アーカイブしたページを「Static」(静的)、「Dynamic」(動的)、「Screenshot」(スクリーンショット)の3種類の方法で表示させることが可能。アーカイブ後のページ名の下にあるリンクをクリックすると表示が切り替わります。Staticは、画像・テキスト・リンク・文字のフォントなどをブラウザに表示した状態のまま、簡素にページを再現します。

「Dynamic」は、ブラウザに表示されていたページのJavaScriptやCSSのデータ、画像、文字のフォント、HTMLデータなどを、ギミックを含めて丸ごと再現します。

「Screenshot」は、その名前のとおりページを画像として保存。画像はブラウザからダウンロードすることも可能です。

また、どの保存方法でも、保存したサイト名の右に表示されている以下のアイコンをクリックすると、ページを画面の幅いっぱいに表示することができます。

PageDashはFlashデータには非対応ですが、前述のようにページに含まれるJavaScriptやCSSなどをそのまま保存することが可能。Googleのトップページでプレイできるパックマンをそのまま保存することもできます。

パックマン誕生 30 周年 - Doodle ギャラリー
https://www.google.com/doodles/30th-anniversary-of-pac-man

ページを表示して、アドレスバーの右のPageDashアイコンをクリック。

アーカイブが完了。

「View it in PageDash」をクリック。

アーカイブのページ名をクリック。

Dynamicをクリックし、ゲームをスタートする「Insert Coin」をクリックすると……

「READY!」と表示されてゲームをプレイできました。このように、PageDashではこれまで難しかったJavaScriptやCSSなどのコンテンツをアーカイブし、ギミックを再現することが可能です。

なお、アーカイブされるのはブラウザに保存されるデータなので、サーバーから返ってくる情報を使うギミックは保存できません。例えば以下のようなGoogleの検索フォームはアーカイブできても、サジェスト機能などは再現できません。

◆アーカイブしているページを削除して、使用できる容量を増やす
PageDashで利用できるアーカイブ容量には上限があり、記事作成時点のβ版では1ヶ月に30MBまでを利用可能。残り容量を確認するには、dashboardでイニシャルが表示されいるアイコンをクリックすると以下のような確認画面が表示されます。なお、メッセージ下部には「Resets in 17 days」と書いてあり、17日後には使用容量のカウントがリセットされて、30MB分のページを新たに保存できることを示しています。

アーカイブのページ名に、カーソルを合わせると、ゴミ箱の形をしたアイコンが表示されるのでクリック。

「DELETE PAGE」と確認のメッセージが表示されるので、「Delete」をクリック。アーカイブが削除されます。

削除すると、残り容量は3.8MBへと1.7MB増加し、使用率は18％から12％へと6ポイント減少しました。なお、アーカイブされているデータ毎の容量を確かめる方法は確認できませんでした。また、有料版ではデータ容量を増やすことが可能なる予定ですが、β版からのデータ移行や事前の無料体験はできないようになっています。

記事を作成した2017年11月14日現在、PageDashに対応しているウェブブラウザはGoogle Chromeのみで、他のブラウザやスマートフォンなどの環境では利用できませんでしたが、今後対応が予定されています。同様のサービスとしてはEvernoteなどが挙げられますが、PageDashにはページに含まれるJavaScriptやCSSのギミックをそのまま再現して保存できるという独自性があり、クリック一つで簡単にアーカイブできるというメリットがありました。