Google Documentで文章を書いて「HTML」形式に変換する方法

8日 12月

Google Documentとは、Googleが提供している「ウェブ上でドキュメントの作成」を行う事が出来るサービスです。今回は、そのGoogle Documentで文章を書いて「HTML」形式に変換する方法について解説していきます。

Google Document(グーグルドキュメント)とは

Google Documentとは、Googleが提供している「ウェブ上でドキュメントの作成」を行う事が出来るサービスです。

https://docs.google.com/document/

ウェブ上でかんたんにドキュメントを作成したり、共有したりできたり、とても便利なのでブログ記事の下書きや資料などの作成に使われている方も、多いのではないでしょうか?

今回は、そのGoogle Documentで文章を書いて「HTML」形式に変換する方法について解説していきます。

ドキュメントをHTML形式に変換する方法

最初に、以下GoogleDocumentのURLにアクセスして下さい。

https://docs.google.com/document/

 

1.次に、変換したいドキュメントを開きます。

新規ドキュメントを作成してもかまいません。

 

2.ドキュメント画面のメニューから「アドオン」を選択します。

そして「アドオンを取得」をクリックして下さい。

※アドオンとは、拡張機能というような意味です。

 

3.アドオン検索の為の小窓が開かれます。

以下イメージ赤枠のフォームに「GD2md-html」と入力して検索を行って下さい。

 

4.検索結果欄に「GD2md-html」が表示されているはずです。

このアドオンの「+無料」をクリックして、アドオンを取得します。

 

5.メニュー内の「アドオン」から「GD2md-html」と進みます。

そして「Convert」をクリックして下さい。

 

6.すると、以下赤枠部分のようにHTML化した文章が表示されます。

これは、コピペできるようになっています。

 

7.注意しなければならないのが、不要なコードが含まれているという点です。

たとえば、文章の先頭に30行前後、アドオンの使用方法の説明が入っています。

また、画像の前にも入っています。こちらは、不要ですので削除してかまいません。

<!----- Conversion time: 2.036 seconds.
Using this HTML file:

1. Cut and paste this output into your source file.
2. See the notes and action items below regarding this conversion run.
3. Check the rendered output (headings, lists, code blocks, tables) for proper
   formatting and use a linkchecker before you publish this page.

Conversion notes:

* GD2md-html version 1.0β13
* Tue Dec 04 2018 01:14:27 GMT-0800 (PST)
* Source doc: https://docs.google.com/a/
* This document has images: check for >>>>>  gd2md-html alert:  inline image link in generated source and store images to your server.
----->

<p style="color: red; font-weight: bold">>>>>>  gd2md-html alert:  ERRORs: 0; WARNINGs: 0; ALERTS: 7.</p>
<ul style="color: red; font-weight: bold"><li>See top comment block for details on ERRORs and WARNINGs. <li>In the converted Markdown or HTML, search for inline alerts that start with >>>>>  gd2md-html alert:  for specific instances that need correction.</ul>

<p style="color: red; font-weight: bold">Links to alert messages:</p><a href="#gdcalert1">alert1</a>
<a href="#gdcalert2">alert2</a>
<a href="#gdcalert3">alert3</a>
<a href="#gdcalert4">alert4</a>
<a href="#gdcalert5">alert5</a>
<a href="#gdcalert6">alert6</a>
<a href="#gdcalert7">alert7</a>

<p style="color: red; font-weight: bold">>>>>> PLEASE check and correct alert issues and delete this message and the inline alerts.<hr></p>

 

画像の前の説明文章例:

<p id="gdcalert1" ><span style="color: red; font-weight: bold">>>>>>  gd2md-html alert: inline image link here (to images/-0.png). Store image on your image server and adjust path/filename if necessary. </span><br>(<a href="#">Back to top</a>)(<a href="#gdcalert2">Next alert</a>)<br><span style="color: red; font-weight: bold">>>>>> </span></p>

まとめ

今回は「ウェブ上でドキュメントの作成」を行う事が出来るサービスである、Google Documentのアドオン(拡張機能)の使い方を解説しました。

「GD2md-html」というアドオンですね。これは、Google Documentで文章を書いて「HTML」形式に変換するためのアドオンです。

導入も使い方も、とてもかんたんで手軽に文章をHTML化する事が出来ます。みなさんもぜひ使ってみて下さいね!

Web制作のプロになろう!スキルハブの無料ビデオ

無料ビデオ12講座/84レッスンが受け放題!

わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。

無料申し込み期限: 9月22日 まで
募集人数: 100名(残りわずか)

今すぐ12講座を受講する(無料)