GoogleドキュメントにHTMLを埋め込む3つの方法を徹底解説

Googleドキュメントは非常に柔軟なワープロソフトですが、HTMLを直接埋め込めることを知っている人は意外と少ないのではないでしょうか。

埋め込み方法は主に3つあります。1つ目は、ブラウザで表示したWebページからそのままコピーして貼り付ける方法。2つ目は、Googleスプレッドシートの「ImportHTML」関数を使ってHTMLデータを整形し、それをドキュメントに挿入する方法。3つ目は、Microsoft Wordを経由する方法です。

WebページをコピーしてGoogleドキュメントに貼り付ける方法

レポートや資料作成の際に、Web上の情報(グラフ、表、画像など)を引用したい場合、単純にテキストとして貼り付けるだけでは元の見た目が失われてしまいます。

たとえば、論文執筆のためのリサーチメモを取る場面を想像してみてください。Webページの書式を保ったままGoogleドキュメントに取り込めれば、作業効率は格段に向上します。

幸い、Googleドキュメントは貼り付けられたWebページの内容を、可能な限り元の書式を維持したまま自動的に挿入してくれるため、操作はとても簡単です。

• まず、埋め込みたいWebページの範囲を選択し、キーボードの「Ctrl+C」でコピーします。

以下の例では、Wikipediaのページの一部をコピー&ペーストしています。

• 次に、貼り付け先のGoogleドキュメントを開き、右クリックして「貼り付け」を選択します。このとき、「書式なしで貼り付け」ではなく、必ず「貼り付け」を選んでください。

• 「貼り付け」を選択すると、コピーしたページのセクションが、元のページと同じ形式でできる限り忠実に挿入されます。画像、URLリンク、見出しなども含まれます。

リンクにマウスカーソルを合わせると外部リンクが表示されるので、リンクが有効になっていることを確認できます。

ただし、場合によっては画像の配置(ページ内での位置揃えなど)が、コピー元のページと完全に一致しないことがあります。

その場合は、画像を選択し、ツールバーの「左揃え」アイコンをクリックした後、画像の下にある「折り返し」アイコンを選択すると改善できます。

これで元のWebページのレイアウトに近い表示になります。画像にキャプションが付いていた場合は、画像の下など適切な位置に移動させてください。

このように、コピーアンドペーストによるHTMLの埋め込みは完璧ではありませんが、元のWebページの書式をできるだけ保ちながら情報を移す、最も手軽で素早い方法です。

ImportHTML関数を使ってHTMLをGoogleドキュメントに埋め込む方法

もう1つの方法は、Googleスプレッドシートの「ImportHTML」関数でHTMLを読み込み、それをGoogleドキュメントに挿入するやり方です。

注意点として、この関数は通常ページ全体を読み込みます。ただし、関数の構文にインデックス番号を指定することで、ページ内の特定の表やリストだけを抽出することが可能です。

例えば、Wikipediaの「アメリカ合衆国の人口動態」ページにある4番目の表を埋め込みたいとします。まず新しいGoogleスプレッドシートを開き、最初のセルに次の関数を入力します。

=ImportHTML("https://en.wikipedia.org/wiki/Demographics_of_the_United_States", "table", 4)

Enterキーを押すと、指定したWebページの4番目の表が読み込まれ、カーソルがあるセルに挿入されます。

これで、Googleドキュメントに埋め込むためのHTMLデータが取得できました。ドキュメント内での見た目に合わせて、この表をお好みの書式に整えておきましょう。

• スプレッドシートで表全体を選択し、「Ctrl+C」でコピーします。
• Googleドキュメントの挿入したい位置にカーソルを置き、右クリックして「貼り付け」を選択します。
• オプションを選択するポップアップが表示されるので、「スプレッドシートにリンク」を選択して「貼り付け」ボタンをクリックします。

これで、Googleスプレッドシート上の表が元の書式のままGoogleドキュメントに挿入されます。

さらに便利なのは、表をリンクしておけば、後からスプレッドシート側でデータを更新した際に、Googleドキュメント側の表も自動的に更新される点です。

Microsoft Wordを経由してHTMLをGoogleドキュメントに埋め込む方法

HTMLコードを.htmlまたは.htmファイルとして保存している場合は、まずMicrosoft Wordで開くという方法もあります。WordはHTMLファイルを自動的にレンダリング(描画)してくれるため、ブラウザでの表示に近い形で確認できます。その後、その文書をGoogleドキュメントにインポートすれば、ページ全体または必要な部分だけを編集中のドキュメントにコピーできます。

• 具体的には、Microsoft WordでHTMLファイルを開きます。ファイルがブラウザと同じように表示されるはずです。

• その文書をWord形式で保存します。
• Googleドライブに戻り、保存したファイルをアップロードします。
• アップロード完了後、ファイルを右クリックして「アプリで開く」から「Googleドキュメント」を選択します。

すると、HTMLのレンダリング結果にできるだけ近い書式で、Googleドキュメント形式の文書が開きます。

あとは、HTMLファイル全体でも、必要なセクションだけでも自由にコピーして、編集中のGoogleドキュメントに貼り付けることができます。

以上、GoogleドキュメントにHTMLを埋め込む3つの方法をご紹介しました。どの方法を選ぶかは、利用できるツールの有無や、ページ全体が必要か一部だけで十分か、そして元のHTMLの書式をどれだけ正確に再現したいかによって変わってきます。用途に合わせて最適な方法を試してみてください。