NEFS

GoogleドキュメントをHTMLに変換する方法-アドオンやGASで素早く入稿

  • 更新日:2022/09/20
  • ツール
Googleドキュメント HTML

Googleドキュメントで書いた文章を、HTML化してCMS(WordPress等)に入稿したいというお問い合わせをよくいただきます。

無料で素早くHTMLへ変換したい場合は、アドオン(Docs to Markdown)で十分に対応できますが、まだそこから細かい調整を求めらるときにはGASによる変換がおすすめです。

本記事では、GoogleドキュメントをHTMLに変換する3つの方法を紹介します。

最後に、HTMLをGoogleドキュメントに埋め込む小技にも触れますので、ぜひ最後までご一読ください。

Googleドキュメントはワードプレスと相性が悪い

Googleドキュメント WordPress 相性

Googleドキュメントで作成した記事を、ワードプレス(WordPress)にコピー&ペーストすると、余計なHTML(なぜかpタグではなくSpanタグがはいる等)が入っていてうまく反映できず相性が悪いです。

「テキストエディター(もしくはカスタムHTMLやクラシックエディターのテキストモードへそのまま)に貼り付ければよいのでは」と考えるかもしれませんが、表はテキストで読み込まれてうまく変換されません。

そのほかにも、以下の対応ができずに困ることもあるはずです。

  • classを反映できない
  • 改行がうまく表示されない
  • 簡単な装飾しか反映できない など

こうした場合は、アドオンや一括置換で対応して素早く終わらせましょう。

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

googleドキュメント HTML 変換

GoogleドキュメントをHTMLに変換する方法は、以下の3つがあります。

  1. Googleドキュメントのアドオンで変換する
  2. GAS(Google Apps Script)で変換する
  3. プログラムで読み込んでフォーマットして変換する

手軽な方法はアドオンですが、より細かく指定するならGoogle Apps Script(通称:GAS)がおすすめです。

なお、プログラミングの知識がある場合は、RubyやPythonなどでGoogleドキュメントを扱い、自分好みの状態へフォーマットしましょう。

Googleドキュメントのアドオンで変換する

Googleドキュメントには、「Docs to Markdown」と呼ばれるHTMLに変換する無料のアドオンがあります。

変換したい範囲を指定して実行すると、テキストに施された初期設定を読み込み、HTMLが横枠に出力されます(本文に影響はありません)。

基本的なタグに変換されますので、Classやidの設定が必要ないとき、または一定のタグを置換するだけで整えられるなら十分な性能です。

ただ、Classやidの他にも色付き下線といった特殊なタグに変換するには時間がかかること(場所を指定して入力する、太字をstrongをbタグにするなど)や、書式設定に失敗すると箇条書きの閉じタグがなくなるなど、細かい使いにくさはあります。

それでも、Googleドキュメントを素早くHTMLに変更したいだけの場合は、インストールして使うだけと簡単ですのでアドオンを利用してみてください。

Docs to Markdownのダウンロード方法

Docs to Markdownのアドオンをダウンロードする方法は、以下のとおりです。

  1. Googleドキュメントを開く
  2. 上にあるメニューから拡張機能を選ぶ
  3. アドオンから「アドオンを取得」を選ぶ
  4. 開いた別ウィンドウで「Docs to Markdown」を検索
  5. インストールしてGoogleドキュメントを再読み込み

使い方は簡単で、変換したい文章を範囲選択(選択なしで全体となる)し、以下の手順ですすめます。

  1. 拡張機能を選ぶ
  2. Docs to Markdownを選択する
  3. Convertを押す
  4. HTMLを選択して実行

実行すると、右側の別ウィンドウ(PC表示の場合)に変換されたHTMLが出力されますので、そちらをコピーして使いましょう。

※別ウィンドウで細かいオプションを指定できるはずですが、うまく機能しないのでシンプルなHTMLのみに変換されます。

なお、これ以上の簡単な方法は現状そう多くなく、例えばHTMLに変換するWebサイトを使ったり、文章を書くときからタグをつけたりする必要があります。

筆者
筆者も簡単にHTMLへ変換できる便利なアドオンだと思っていますので、特定のclassを入れ込む前に使っています。ただ、テーブルタグのtdをthに書き換える必要があるときは本当に面倒で、自作したGoogle Apps Script(GAS)で済ませています。

GAS(Google Apps Script)で変換する

どうしても細かい設定を反映させて、タグの確認だけで済ませたい場合は、GAS(Google Apps Script)をスプレッドシートまたはGoogleドキュメントに構築して使いましょう。

GASはGoogleが提供するGoogleドキュメント、スプレッドシートに備えられたアプリケーション開発のプラットフォームです。

一定の知識があれば特殊なタグをつけながらHTML化を機械的に済ませられ、ヒューマンエラーまで減らせて時短につながります。

また、スプレッドシートであれば何度も使いまわせますから、アドオンと同じように導入さえできれば時短の力強い味方です。

ただデメリットとして、プログラミングの知識が必要なこと(言語への理解や構築など)、完成に至るまでに時間を費やしてしまうことの2点が挙げられます。

そこで、誰でも簡単にスプレッドシートにあるオプションを設定し、HTMLへ変換できるよう作成したのが「ポチッとHTML」です。

コピーして使うだけですぐに活用できるポチッとHTML

プログラミング不要GoogleドキュメントをHTML化したい人に向けて、ある程度まで細かく指定できる「ポチッとHTML」を構築して販売しています。

何度も繰り返し使っていただけるように、それぞれ専用のシートを作成すると、入稿先が異なってもすぐに設定したいGoogleドキュメントを指定のHTMLへ変換できます。

詳しくは、以下の専用ページで細かく触れていますので、ぜひご検討ください。

プログラムでフォーマットして変換する

さらにハードルは高くなりますが、プログラムでGoogleドキュメントを操作し、特定の記述へフォーマットして変換するのも一つの方法です。

GASと同様にプログラムの領域ですが、時間や変換に制限がなく、書式から書き出すファイルの種類(WordやCsvなど)まで細かく設定できます。

ただ、詳しい説明は環境構築から進めなければならず、決してハードルは低くないため今回は割愛します。

筆者
ここで一旦、お知らせです‼︎

Google Apps Scriptを使ったGoogleドキュメントのHTML変換だけに限らず、特定の業務を効率化できるさまざまGASを構築しています。

主に、スプレッドシートおよびGoogleドキュメントにまつわる業務効率化で、フリーランスから法人まで幅広く構築してきた実績があります。

  • とあるデータを特定の並びに変えて整理する
  • Googleドキュメントのテキストを一括置換する
  • Twitterへ自動で投稿するまたは抜き出す
  • Gmailを指定の宛先へまとめて送信する
  • チャットワークへの投稿やデータの抜き出し など

ビジネスや個人業務の効率化で何かお手伝いできることがありましたら、お気軽にお問い合わせからご相談ください。

HTMLを Googleドキュメントに埋め込む方法

HTML googleドキュメント 埋め込み

GoogleドキュメントをHTMLに変換するのではなく、HTMLをドキュメント側に埋め込みたい場合もあるはずです。

そうした場合は、以下の方法が考えられます。

  • ①貼り付けたいHTMLの文章をそのままコピー&ペーストする
  • ②スプレッドシートの関数で読み込んだものをコピー&ペーストする
  • ③Wordファイルで保存してGoogleドキュメントへ変換する

①は、反映したいHTMLの文章やテーブルをそのまま貼り付けるだけです(書式なしでの貼り付けではありません)。

②は、主に表に用いられる方法で、importHTMLの関数で読み込みたいTableを指定して、読み込んだあとにGoogleドキュメントへ貼りつけます(スプレッドシートの表を変えるとGoogleドキュメントも変わる)。

③は、「.html」または「.hml」でページを保存し、Wordで開いて「.docs」へ変換するとHTMLの装飾ができるだけ反映された状態を保持でき、そのままGoogleドライブに保存してからGoogleドキュメントにするという方法です。

②・③のいずれも小難しいうえに、条件があるので「①のそのままコピー&ペースト」をおすすめします。

GoogleドキュメントをHTMLに手早く変換

ポチッとHTML

Googleドキュメントへ書いた文章をHTMLに変換する際には、以下の3つの方法が代表的です。

  1. Googleドキュメントのアドオンで変換する
  2. GAS(Google Apps Script)で変換する
  3. プログラムで読み込んでフォーマットして変換する

手早く済ませるならアドオンを、より細かく設定したいならGASを使いましょう(販売もあります)。

GAS(Google Apps Script)での自動化でお困りでしたら、お気軽にお問い合わせください。

Profile

吉田
吉田起業家
PM・アドバイザリー・Gasツール制作などに携わる器用貧乏で残念な人。独学フリーランスとしてSEO業界へ入り、頭皮にダメージを受けて髪の毛を失いながら経験を積む。今後も仕組み化や自動化により、効率よく進めてきたノウハウをブログやサービスで提供し続けるのがモットー。