HTMLをテキストに変換する：タグを取り除いてクリーンなプレーンテキストを素早く抽出する

Webページからテキストをコピーして貼り付けたら、<p>タグと 文字が混じったものが出てきた経験はないでしょうか。あるいは、HTMLメールテンプレートをテキストエディタで開いて引用したい文章を探したら、すべての単語が<td>や<span style="color:#333333">に囲まれていたというケースも同様です。

そういった問題を解決するのが、HTML to Textコンバーターです。タグを取り除いてテキストを表示するだけのように聞こえますが、エンティティ処理、改行の正規化など、適切な処理のために対応すべき細かい部分がいくつかあります。このツールが実際にどう動作するのか、どんな場面で使うべきか、そして正直なところどんな限界があるのかを見ていきましょう。

HTML to Textコンバーターが実際にやること

表面的には、< >カッコ内にあるものをすべて削除する作業のように見えます。しかしそれだけではありません。

タグの削除は当然の基本部分です。<div>、<p>、<span>、<a>、<img>など、すべての要素が取り除かれ、開始タグと終了タグの間にあったものだけが残ります。

エンティティのデコードは、多くの単純な実装がつまずく部分です。HTMLはマークアップを壊す可能性のある文字を表すためにエンティティを使用します。&記号は&に、<は<に、改行なし空白は になります。タグだけを削除してエンティティをそのままにしておくと、出力テキストにこれらのコードがそのまま残ってしまいます。読みやすいものではありません。

適切なコンバーターは&、<、>、"、 、—、©などの名前付きエンティティだけでなく、10進数（ ）と16進数（ ）形式の数値エンティティもすべて処理します。

改行の保持は三つ目の重要な要素です。HTMLの空白に関するルールはプレーンテキストとは異なります。ソースコードの改行は視覚的には意味を持たず、複数のスペースは一つに圧縮されます。ブラウザで見える構造は<p>、<div>、<h1>〜<h6>、<li>、<br>、<hr>などのブロック要素から来ています。良いコンバーターはこれらの要素に遭遇したときに改行や空行を挿入し、出力に段落構造が残るようにします。

/tools/html-to-textにHTMLを貼り付けると、これら三つすべてが自動的に処理されます。

実際のユースケース

このツールが実際にどんな場面で役立つか見ていきましょう。思った以上に多様なシチュエーションがあります。

HTMLメールの整理

現代のマーケティングメールテンプレートは非常に複雑なHTMLになっています。同僚が特定の文章を引用してほしいとメールを転送してきたのに、手元にあるのは生の.emlファイルかOutlookからコピーしたぐちゃぐちゃな内容だけ、という場合、こんなものを目にすることになります：

<td class="mcnTextContent" style="padding-top:0;padding-right:18px;">
  <p>第2四半期の製品ロードマップを発表できることを嬉しく思います&hellip;</p>
</td>

これをコンバーターに貼り付けると：

第2四半期の製品ロードマップを発表できることを嬉しく思います…

必要な部分だけがきれいに抽出されます。

メールのプレーンテキスト版の作成

HTMLメールキャンペーンを送信する場合、プレーンテキストのフォールバックも一緒に送るべきです。メール到達率が上がりますし、HTMLをレンダリングしないクライアントや好みのユーザーにも対応できます。デザインされたテンプレートから手作業でプレーンテキスト版を書くのは面倒な作業です。コンバーターを通せば、適切な改行を追加したり不要なナビゲーションリンクを削除したりすれば使えるくらいの作業用草案を素早く得ることができます。

完璧な結果にはなりませんが、空のファイルから始めるよりずっと良い出発点になります。

WebスクレイピングとコンテンツExtracting

Webページをスクレイピングすると、ナビゲーション、サイドバー、広告、フッター、スクリプトをすべて含む完全なHTMLが返ってきます。BeautifulSoupやcheerioでメインコンテンツを対象に絞った後でも、まだHTMLが残っています。コンバーターに通すことで読めるテキストが得られます。

素早い一回限りのスクレイピング作業 — 製品説明の取得、ブログ記事のテキスト抽出、レシピ情報の収集 — では、HTMLをツールに貼り付ける方がパーサーをゼロから書くよりも確実に速いです。体系的な大規模作業にはサーバーサイドツールが必要ですが、簡単なタスクにはこの方法が最適です。

データベースや検索インデックスへの格納

CMSベースのブログやリッチテキストエディタのようにHTMLでコンテンツを保存しているが、全文検索インデックス作成、AIモデルへの入力、またはHTMLをレンダリングしないコンテキストでの表示のためにプレーンテキストが必要な場合があります。変換して得たプレーンテキストは、タグ構文が露出するリスクなく安全にインデックス、比較、または下流システムへの受け渡しができます。

テキストのみ受け付ける環境への貼り付け

Google Docs、Notion、プレーンテキストエディタ、SMSテンプレート、ターミナル出力など、テキストは受け付けるがHTMLは受け付けない場所がたくさんあります。ブラウザからテキストをコピーすると隠れたHTMLフォーマットが一緒についてくる場合があります。先に変換してからプレーンテキストの出力を貼り付ければ、その問題をきれいに解決できます。

HTMLエンティティとは何か、なぜ重要なのか

この部分は多くの人が混乱するため、もう少し詳しく説明します。

HTML仕様は特殊文字を表すための名前付き文字参照のセットを定義しています。&、<、>、"などです。これらが存在するのは、HTML自体が<、>、&を構文文字として使うテキスト形式だからです。ブラウザに<を表示したい場合、HTMLでは<と書かないと、ブラウザが新しいタグの開始だと解釈してしまいます。

タグを削除したがエンティティをデコードしなかった場合、こうなります：

入力HTML:
<p>価格は1,000円 &amp; 送料は無料です。&lt;詳細&gt;ページをご覧ください。</p>

タグのみ削除後:
価格は1,000円 &amp; 送料は無料です。&lt;詳細&gt;ページをご覧ください。

タグ削除 + エンティティデコード後:
価格は1,000円 & 送料は無料です。<詳細>ページをご覧ください。

二つ目の結果が実際にブラウザで見えるものです。それが欲しいものです。

よく目にするエンティティ：

& → &
< → <
> → >
  → 改行なし空白（出力では通常通常の空白として表示）
— → —（emダッシュ）
… → …（省略記号）
© → ©
“、” → "、"（カーリークォート）

適切なコンバーターはこれらすべてを透過的に処理します。

HTML to Text vs HTML to Markdown

どちらもHTMLを別の形式に変換しますが、目的が異なります。

HTML to Textを使うべき場面：

本当に素の、書式なしのコンテンツが必要な場合
Markdownを理解しないシステムに出力を渡す場合
プレーンテキストのメール版を作成する場合
マークアップがただのノイズであるテキスト分析や自然言語処理を行う場合
ユーザー生成HTMLを安全に保存または比較するためにサニタイズする場合

HTML to Markdownを使うべき場面：

ドキュメント構造（見出し、太字、斜体、リンク、リスト）を保持したい場合
HTMLのCMSからMarkdownベースのシステムにコンテンツを移行する場合
Markdownをサポートする場所で後からコンテンツを再レンダリングする予定がある場合
人が快適に編集できる形式が欲しい場合

重要な違い：HTML to Textはすべての書式構造を失います。HTML to Markdownは人が読んで編集しやすい形式で構造を維持します。WordPressからAstroやHugoにブログを移行するならMarkdown変換が適切です。検索エンジンや言語モデルのためにテキストを抽出するなら、プレーンテキストの方がおそらくクリーンです。

改行の動作と期待できること

HTML-to-text変換で最も扱いにくい部分の一つが空白の処理です。

HTMLでは、ソースコードの改行はスペースとして扱われ、複数のスペースは一つに圧縮されます。ブラウザで見える視覚的な改行はすべてブロック要素とCSSから来ています。タグを削除するとき、各要素の境界をどう処理するかを決める必要があります。

合理的なルールセット：

<br> → 単一の改行
<p>、<div>、<h1>〜<h6> → 二重改行（前後に空行）
<li> → 箇条書きや番号付きの改行
<hr> → ダッシュの行または空行
インライン要素（<span>、<a>、<strong>、<em>）→ テキスト内容のみ、追加スペースなし

HTML to Textツールはこのようなルールを適用して、出力が読みやすく適度に構造化されるようにしています。複雑なレイアウト（テーブル、複数カラムのdiv）では完璧でない場合があります。

限界：このツールが苦手なこと

正直に、HTML-to-text変換がうまくできないことを述べておきたいと思います。

画像は完全に消えます。 画像に相当するプレーンテキストはないため、<img>タグはsrcやaltを含むすべての属性ごと削除されます。画像が重要な情報を伝えていた場合、その情報は失われます。alt属性のテキストはHTMLにありますが、基本的なコンバーターの多くはそれを出力に含めません。alt属性を保持する必要があるなら、Markdown変換を検討してください。

複雑なテーブルレイアウトはうまく平坦化されません。 レイアウト用に使われたHTMLテーブル、特に古い<table>ベースのメールテンプレートは、プレーンテキストに変換すると読みにくい結果になることがよくあります。セルが読み取り順序で連結されますが、これが人の期待する順序と一致しない場合があります。

CSSで隠されたコンテンツも含まれます。 display: noneやvisibility: hiddenが適用された要素もHTMLソースには存在するため、そのテキストコンテンツが出力に現れます。完全なブラウザレンダリングパイプラインを実行しない限り、CSS状態に基づいて削除することはできません。

JavaScriptでレンダリングされたコンテンツは含まれません。 JavaScriptでコンテンツを動的に読み込むページの生HTMLソースを貼り付けると、コンバーターは静的HTMLにあるものだけを処理します。JSでレンダリングされたページは、ヘッドレスブラウザで先にレンダリングした結果を取得する必要があります。

セマンティックな解釈はできません。 コンバーターは<nav>がスキップしてもいいナビゲーションだとか、<aside>が不要なサイドバーだとかを知りません。すべての要素を同等に扱います。より clean な出力を得るには、変換前に<nav>、<footer>、<aside>、<script>、<style>ブロックを取り除くことが有効です。

Webスクレイピング目的には、本番環境では要素をセレクタで指定してテキストを抽出できるBeautifulSoup（Python）やcheerio（Node.js）の方が適しています。HTML to Textツールは、そのトレードオフが許容できる素早い一回限りの変換に最適です。

実際のワークフロー例

現実的なシナリオを一つ見てみましょう。製品説明ページをスクレイピングして<main>要素の生HTMLを持っており、それを比較スプレッドシートで使うためのプレーンテキストに変換したいとします。

スクレイパーまたはブラウザのDevToolsからHTMLをコピーします。
/tools/html-to-textに貼り付けます。
タグが削除され、エンティティがデコードされ、ブロック要素が改行に変換された出力が現れます。
結果をスプレッドシートにコピーします。

所要時間：約15秒。ブラウザコンソールで正規表現を使って処理しようとするとより時間がかかり、エンティティの処理も確実にうまくいかないでしょう。

まとめ

HTML to Textの変換は、やってみると思ったより複雑だと気づく作業の典型です。タグは明らかな部分で、エンティティと空白の正規化こそが人をつまずかせる本当の部分です。

HTML to Textツールはこれらすべてを一度に処理します。メール、スクレイピングしたページ、CMSのエクスポート、あるいはHTMLの塊がある状況であれば、マークアップからプレーンテキストへの最速ルートです。

書式を取り除くのではなく保持したい場合は、HTML to Markdownを確認してください。HTMLエンティティを直接扱っているなら、HTML EncoderとHTML Minifierがツールキットを完成させてくれます。