商品CSVのHTMLタグの閉じ忘れを直す方法。取り込みエラーの原因になる3つの壊れ方
ネットショップの商品CSVで、商品説明のHTMLタグが壊れていると取り込みに失敗したり表示が崩れたりします。閉じ忘れ、余分な閉じタグ、タグの入れ違いの3つの壊れ方と、CSVの体裁を変えずに必要な箇所だけ直す方法をまとめました。
ネットショップの商品説明には、太字や改行、表のためのHTMLタグが入っていることがよくあります。商品数が多いと、説明文はCSVで一括して書き換えるのが普通です。そのとき、どこか1か所で <b> を閉じ忘れると、そこから下の説明文がすべて太字になったり、モールの取り込みでエラーになったりします。
困るのは、CSVの1セルに長いHTMLが入っていると、どこが壊れているのかを目で探すのがほぼ無理なことです。数百行のCSVなら、なおさらです。
探す手間ごと省くなら、当サイトのCSV内のHTMLタグ修復にCSVを入れてください。閉じ忘れなどを自動で直したCSVがダウンロードされ、直したセルの一覧も画面に出ます。CSVはサーバーに送られません。
HTMLタグの壊れ方は3通り
HTMLのタグは、<p> で開いたら </p> で閉じる、という組で使います。組が崩れる形は、おおむね次の3つに分かれます。
- 閉じ忘れ。
<p><b>太字のように、開いたタグに対応する閉じタグがない - 孤立した閉じタグ。
<div>…</div></div>のように、開いていないタグを閉じている - タグの入れ違い。
<p><a>…</p>のように、内側で開いたタグを閉じる前に外側を閉じている（ミスネストとも呼ばれます）
どれも、コピーと貼り付けを繰り返したり、表計算ソフトでセルの一部だけを書き換えたりしたときに起こりやすい壊れ方です。
手で直すと何が大変か
壊れた箇所を見つけるには、セルの中のタグを先頭から1つずつ数え、開いたタグと閉じたタグの対応を追う必要があります。入れ子が深くなると、人の目で追い切るのは難しくなります。
もう1つの落とし穴は、CSVそのものの体裁です。商品説明のセルには改行やカンマが含まれるため、CSVでは値全体を " で囲み、値の中の " は "" と二重にして書く決まりです。テキストエディタで直しているうちにこの囲みを崩すと、HTMLは直ってもCSVとして読めなくなります。表計算ソフトで開いて保存し直せば、今度は文字コードや改行コードが変わってしまうこともあります。
CSV内のHTMLタグ修復ツールの手順
当サイトのCSV内のHTMLタグ修復は、CSVの各セルに入ったHTMLを調べ、上の3つの壊れ方を自動で直すツールです。
- ツールのページを開き、CSVを枠にドラッグ＆ドロップします（スマホやタブレットなら「ファイルを選択」から）。
- 修復したCSVが自動でダウンロードされます。ファイル名は元の名前に「_fixed」を付けたもので、元のファイルは書き換えません。
- 画面に、直したセルの一覧（行番号、列名、補った閉じタグ、取り除いた閉じタグ）が表示されます。
直し方は、タグを先頭から順に読み、開いたタグを積み上げていく方式です。閉じタグが来たら、積んであるタグと照らし合わせます。
- 対応する開きタグがあれば、その内側で閉じ忘れていたタグを補ってから閉じる（入れ違いの修復）
- 対応する開きタグがなければ、その閉じタグを取り除く（孤立した閉じタグの修復）
- セルの最後まで読んで閉じられていないタグが残っていれば、末尾に閉じタグを補う（閉じ忘れの修復）
<br> や <img> のように閉じタグを持たないタグは、補う対象になりません。HTMLとして知られていないタグや、a < b のような不等号の文字列にも手を付けないようになっています。
体裁を変えずに直す
修復したのはHTMLの部分だけで、それ以外は元のファイルのままです。HTMLを含まないセルや、すでに正しいセルは1文字も変わりません。
文字コードはUTF-8（BOMの有無も含めて）とShift_JISのどちらでも読み込め、出力も元と同じ文字コードになります。改行コード（CRLFとLF）と、ファイル末尾の改行の有無も保ちます。セルを " で囲むのは、カンマや改行、" を含むセルだけです。直す箇所がなかった場合も、同じ内容のファイルを「_fixed」の名前で保存し、修復が要らなかったことを表示します。
ファイルはサーバーに送らず、ブラウザの中だけで処理します。
修復のあとに確認したいこと
自動で補った閉じタグは、構文としては正しくても、書いた人の意図と同じ位置とは限りません。たとえば <b>セール中 で閉じ忘れていた場合、ツールはセルの末尾に </b> を補います。本当は「セール中」の直後で閉じたかったのなら、太字の範囲が広すぎることになります。画面の一覧に出た行は、取り込む前にプレビューで見た目を確かめてください。
修復の処理は、GitHubで公開しているスクリプトcsv-html-fixer（MITライセンス）をブラウザで動くようにしたものです。