HTMLからテキストへの変換ツール

HTML からテキストへの変換が実際にすること

ウェブページ、メール、CMS のエクスポートはふつうのテキストではありません。それらは HTML、つまり p、div、span、a、strong といったタグの木が、あなたが本当に気にかけている言葉を包み込んだものです。そのソースをコピーしたり、リッチなスニペットを貼り付けたりすると、読める内容だけが欲しい瞬間に邪魔になるインラインスタイル、トラッキング属性、構造的なマークアップを一緒に運んでしまいます。HTML をテキストに変換することは、その木をたどって目に見える言葉だけを残し、すべてのタグと属性を捨てます。

目的は単に山かっこを削除することではありません。タグの素朴な検索と置換は、段落どうしを押しつぶし、整った記事を1つの途切れない壁に変えてしまいます。適切な変換は、段落、見出し、リスト項目などのブロックレベル要素を境界として扱い、人間が読むのと同じ論理的な順序で出力が読めるように改行を挿入します。一方、太字や斜体などのインライン要素は単に消えて、そのテキストを後に残します。

残るものと失われるもの

設計上、ふつうのテキストは視覚的な書式を保持できません。太字、斜体、フォントサイズ、色、CSS のレイアウトはすべて捨てられます。テキストファイルにはそれらが収まる場所がないからです。表は連続した行に折りたたまれ、正確な列の構造は保持されません。これは想定どおりです。表現と引き換えに可搬性を得ているのです。

リンクと画像は興味深い中間地点です。「リンクを保持」をオンにするとアンカーが [text](url) として描画され、リンク先が読める形で生き残ります。「画像の alt テキストを含める」をオンにすると、画像を黙って捨てる代わりに説明的な alt 属性を保持します。より読みやすくしたければ、それらをオフにするか、「画像を無視」と「HR タグを無視」を使ってプレースホルダーや水平線を完全に抑制してください。

実際の例

次の断片を貼り付けたとします。shop が example.com へのリンクになっている「Visit our shop」と読める段落、続いてエンティティ Tom & Jerry を含む2つ目の段落です。「リンクを保持」と「HTML エンティティをデコード」を有効にすると、出力は2つのきれいな行になります。1行目が「Visit our [shop](https://example.com)」、2行目が「Tom & Jerry」です。p タグは改行になり、アンカーは角かっこと丸かっこの形に書き換えられ、& はリテラルのアンパサンドへとデコードされました。

HTML エンティティが重要な理由

HTML は、ブラウザがマークアップと取り違えないように特定の文字をエスケープします。アンパサンドは &amp;、小なり記号は &lt;、ノーブレークスペースは &nbsp; と書かれ、丸まった引用符はしばしば &#8220; や &#8221; として現れます。デコードを飛ばすと、それらの生の並びがテキストに漏れ出して壊れて見えます。「HTML エンティティをデコード」を有効にすると、それらが表す本物の文字、すなわち &、<、ふつうのスペース、正しい引用符へと戻されます。この1つの設定は、ほぼ正しく見えるのにアンパサンドのコードが点々と散らばっている出力に対する、最もよくある修正です。

改行と折り返しの制御

2つの設定が結果のレイアウトを形づくります。「改行を保持」はブロック要素が暗示する改行を保つので段落が分かれたまま保たれ、「空白を保持」は HTML が通常まとめてしまうスペースの連続やインデントを保持します。これは、コードや ASCII のレイアウトのように元の間隔が意味を持つときに便利です。

「ワードラップ」は1行あたりの最大文字数を設定し、長い段落を収まるように流し直します。ターミナル、固定幅のメール、ふつうのテキストの README に貼り付けるときに重宝します。0 に設定すると折り返しを完全に無効にするので、各段落が1本の長い行に留まり、自前で折り返す送り先に向けて準備できます。

実際の利用シーン

リッチなコンテンツを中立的なテキストにする必要があるときはいつでもこのツールに手を伸ばしましょう。よくあるケースには、公開されたウェブページから再利用や引用のためにきれいな文章を抜き出すこと、CMS やニュースレターのエクスポートをほかへ取り込む前に整えること、HTML メールから読める本文を引き出すこと、文字数や可読性のチェックのためにコンテンツを準備すること、タグではなくふつうの入力を期待する翻訳ツールやスクリプトにきれいな文章を与えることが含まれます。

開発中の手早い健全性チェックにもなります。描画されたテンプレートをテキストに変換すると、実際の読み上げ順序が明らかになり、CSS によって視覚的に隠されているのにマークアップには依然として存在するコンテンツが露わになります。これはアクセシビリティや SEO の監査で重要になりえます。

避けるべきよくある間違い

最大の罠は、レイアウトが生き残ることを期待することです。表の構造、箇条書きの階層、スタイル付けを保持する必要があるなら、ふつうのテキストは間違った目標です。代わりに Markdown に変換するか HTML のままにしましょう。2つ目の落とし穴は、エンティティのデコードを忘れて、なぜ出力のいたるところに &amp; があるのかと首をかしげることです。最後に、変換は貼り付けたマークアップにあるものだけを反映することを覚えておきましょう。ページが読み込み後に JavaScript でコンテンツを組み立てる場合、ソースの表示からコピーした生の HTML はほとんど空かもしれないので、代わりに描画された DOM をコピーしてください。