Googleドキュメントをhtmlに変換する方法について調べました

2021/10/15 2021/11/11

前回、Googleドキュメントをワードプレスのテキストエディタに貼り付けると、どのようなhtmlが生成されるかについて調べました。

Googleドキュメントで出力されるhtmlを検証しました

しかしそのやり方だとspanなどの余計なものが出力されてしまいました。

また、テキストエディタに一度コピーする手間も発生してしまいます。

そこで今回はGoogleドキュメントのアドオンの機能を用いてどのようなhtmlが生成されるのか調査しました。

欲しい機能

そもそも自分がGoogleドキュメントをhtmlに変換したとき

Googleドキュメントで見出し2に設定したテキストがh2としてhtmlで出力される
表がtableとして出力される
太字が反映される
リスト機能を使ったときliタグで出力される

上記のようにhtmlに変換してくれるのが理想です。

Docs to Markdownをインストール

Docs to Markdownというアドオンを使ってGoogleドキュメントをhtmlに変換しました。

こちらからアドオンをインストール
Googleドキュメントの左上のアドオン→Docs to Markdown→Convertを選択

すると画面右側にhtmlで出力されたものが表示されます。

出力されるHTML

見出し

見出しに関して
見出し1に設定したテキストはh1、見出し2に設定したテキストはh2に変換されました。
余計なものもなくシンプルに出力されました。

        
            <h1>見出し１</h1>
            <h2>見出し２</h2>
            <h3>見出し３</h3>

テキスト

テキストはpタグで出力されました。Shift＋Enterで改行することでbrが出力されました。

        
            <p>
                この文章はダミーです。文字の大きさ、<br>この文章はダミーです。文字の大きさ、
            </p>

        
                <ul>
                <li>リスト１
                <li>リスト２
                <li>リスト３
                </li>
                </ul>
                <ol>
                <li>番号リスト１
                <li>番号リスト２
                <li>番号リスト３
                </li>
                </ol>

リンク

pタグで挟まれているもののシンプルなaタグに変換されました。

        
            <p>
                <a href="soichiro.co.jp">リンクです。</a>
            </p>

表

tableできちんと変換されました。すべてtableの中身はすべてtdですがそこを変えたい場合は自分の手で変換する必要があります。

        
            <table>
                <tr>
                 <td>１
                 </td>
                 <td>２
                 </td>
                 <td>３
                 </td>
                </tr>
                <tr>
                 <td>４
                 </td>
                 <td>５
                 </td>
                 <td>６
                 </td>
                </tr>
              </table>

画像

画像はキレイに出力されませんでした。

        
            <p id="gdcalert1" ><span style="color: red; font-weight: bold">>>>>>  gd2md-html
                alert: inline image link here (to images/image1.jpg). Store image on your image
                server and adjust path/filename/extension 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>
                <img src="images/image1.jpg" width="" alt="alt_text" title="image_tooltip">
                </p>