Webページ(ホームページ)を保存する方法

ブックマークでなくWebページ全体を保存

仕事や勉強などでWebページを見ていると資料などとして保存しておきたいWebページが出てきます。

ブラウザの「お気に入り」に登録(ブックマーク)しても、後日アクセスしたらWebページの内容が変わっているかもしれません。

それどころかWebページ自体がなくなっているかもしれません。

そんなことにならないためにはブックマークでなくWebページ全体を保存します。

この記事で紹介する保存方法は以下です。

• SingleFile
• EdgeのWebキャプチャ
• 開発者ツール
• OneNote Web Clipper
• Evernote Web Clipper

SingleFile

ブラウザには標準でWebページをHTML、画像ファイル、CSSファイルなど複数のファイルに保存する機能があります。

しかし、複数ファイルは扱いが面倒な上、元のWebページが正確に再現できない場合もあります。

「SingleFile」はWebベージを単一のHTMLファイルに保存するブラウザ拡張機能です。

インストールするとブラウザのツールバーにSingleFileのアイコンが現れます(下図)。

保存したいWebページを開いた状態でアイコンをクリックすると「ダウンロード」フォルダにXXX.htmlファイルが1つだけ作成されます。

通常のhtmlファイルは画像、CSS、JavaScriptなどはすべて別ファイルを参照しています。

例えばJPG画像であれば以下のような感じです。

<img src="https://bibouroku.net/xxxx.jpg">

これではhtmlだけあっても参照先の画像がなくなってしまえば元のWebページは再現できません。

それに対してSingleFileは保存時に画像、CSS、JavaScriptなどをすべてHTMLに「data:」として含めます。

例えばJPG画像であれば以下のような感じです。

<img src="data:image/jpeg;base64,……">

• SingleFile Edgeアドオン
• SingleFile Chrome拡張機能
• SingleFIle Firefox拡張機能

EdgeのWebキャプチャ

Windowsの標準ブラウザであるEdgeにはWebページを保存する「Webキャプチャ」という機能があります。

ブラウザの拡張機能なども不要です。

やり方はEdgeのメニューから「Webキャプチャ」を選択します。

「ページ全体をキャプチャ」をクリックするとWebページ全体、エリアをキャプチャするとマウスで指定する領域がキャプチャされます。

キャプチャWebページには以下の操作ができます。

EdgeのコレクションとはWebページをスクラップする機能です。

ブックマーク機能と異なり、保存したWebページ(手書きの書き込みも含む)も保存できます。

PCやiPhoneブラウザのおすすめ(比較)

ブラウザとはインターネットを閲覧するためのソフトウエアです。オススメはどのブラウザでしょうか。PCとモバイルは別オススメを考える上で重要なのはPC(デスクトップ)ブラウザとモバイルブラウザ(iPhone/iPad/Android)版のブラウ...

bibouroku.net

開発者ツール

EdgeやChromeに標準搭載されている「開発者ツール」にはWebページ全体を保存する機能があります。

名前に開発者とついているものの開発者でなくても使えます。

F12を押して開発者ツールを表示し、ツール内の適当な場所をクリックします。

shift+ctrl+P(Macではshift+command+P)を押して「コマンドの実行」を表示し、「フルサイズのスクリーンショットをキャプチャする」のボタンをクリックします。

ダウンロードフォルダにPNGファイルが保存されます。

OneNote Web Clipper

OneNote Web ClipperとはOneNote(マイクロソフトのデジタルノートアプリ)にWebページを保存するためのブラウザ拡張です。

Evernote Web Clipperと同様、EdgeでもChromeでも使え、インストールするとブラウザのツールバーにOneNoteのアイコンが現れます。

ブラウザで保存したいページを表示してそのアイコンをクリックするとOneNote Web Clipperのメニューが出現します。

メニューではOneNoteにどのように保存するかを選択できます。

Evernote Web Clipperと同様、WebページのタイトルがOneNoteのノートのタイトルになります。

Evernote Web Clipperと大きく異なるのは「ページ全体」と「領域」メニューでは画像として保存される点です。

画像として保存されるため、Webページのレイアウトは完全に再現されます。

ただし、テキスト検索では画像内の文字がテキスト認識されるため、Webページに記述されているはずのテキストがヒットしない場合があります(特に日本語のテキスト)。

「記事」メニューは全部画像ではありませんが、Webページのレイアウトは大きく崩れます。

OneNote Web Clipper - Chrome ウェブストア

Web で見つけたものを何でも OneNote に保存。画面をクリップして OneNote に取り込み、整理し、編集。保存したクリップは、どのデバイスからでもアクセスできます。

chromewebstore.google.com

Evernote Web Clipper

Evernote Web ClipperとはEvernoteにWebページを保存するためのブラウザ拡張です。

EdgeでもChromeでも使えます。

インストールするとブラウザのツールバーにEvernoteのアイコンが現れます。

ブラウザで保存したいページを表示してそのアイコンをクリックするとEvernote Web Clipperのメニューが出現します。

メニューではEvernoteにどのように保存するかを選択できます。

いずれの場合もWebページのタイトルがEvernoteのノートのタイトルになります。

大量のWebページを保存してもEvernoteの全文検索機能で簡単に保存したページを見つけられます。

Evernote Web Clipper - Chrome ウェブストア

Evernote の拡張機能を使用して、Web 上で見つけたページを Evernote アカウントに保存します。

chromewebstore.google.com

EvernoteのOCR機能はテキスト化不要でPDFや画像を検索できる

仕事で使う膨大な書類、子供が学校で渡される膨大なプリント……スマホやパソコンの画面で簡単に情報を見られるこの時代になぜこれだけの紙書類が必要なのかさっぱりわかりませんが、膨大な書類を整理するのは大変です。書類整理は後で書類を見つけるため重要...

bibouroku.net