awk 《第7回》HTMLを加工する-其弐

CMSからWordPressに引っ越そうということになったコンテンツをawkで加工してみました。

CMSは、今から何年か前に自社で作ったCMSです。そのころのWordPressで、それっぽくするのにはPHPを駆使して結構大変でしたので、自作をしたのです。エディタは「moodle」というe-Learningのオープンソースから流用していました。

現在のCMSなどのエディタは「ブロックエディタ」が主流ですが、一時代前でもあり、スマホなども登場前か、少なくとも今ほどに主流になる前でもあったので「レスポンシブ」などと言う考えはありませんでした。

エディタが吐き出す「HTML」のタグも古いスタイルのもので、引っ越しをするためには「プレーンテキスト」にすることから始めなくてはなりません。

一つの方法としてはコンテンツを画面に表示させてキャプチャーする方法も考えましたが、約140コンテンツあるので、それも愚かしい気がしたのでawkで挑戦してみました。

まずは、nkfで「UTF-8」を「Shift-JIS」に変換です。

>ren +*.html *.txt
>nkf -s – -overwrite *.txt

このようなコードが123行続きます。

123行の中で必要なのは「<title>滝野川区の歴史《1》|滝野川探検隊</title>」のように「タイトルタグ」で囲まれている1行だけです。


/¥t<title>/ タイトルの開始タグだけをチェックしています
」キャレットは行頭からという意味で、行頭からタブ1つにタイトルタグがくるパターンを見つけます
変数の「str」には、ファイル名の頭の6バイトを取り出し、拡張子として「.ttl」をつけています
sub」を使って、タイトルに不要な文字を消しています

最終行の「print>str」とすることで、標準出力に変数「str」のファイル名で書き出します。

>awk -f script¥step1.awk *.txt

とすることでFILENAMEからファイル名の6バイトを取り出して拡張子「.ttl」をつけて標準出力に書き出します。


HTMLの行頭パターンを見つけたら「flg=1」(フラグをセット)にします
同様に行頭からタブ3個の後に「</header>」が来たら「flg=0」(フラグをリセット)にします
行頭からタブ2個の後に「</section>」がくると再度「flg=1」とします
/^$/」は、行頭から行末になるパターン、つまり空行を読み込みません

FILENAMEから6バイト取り出し拡張子に「.bdy」を付けます
flg==1」なら、変数「str」のファイル名として標準出力に出力します

flg=1」だと変数「flg」に「1」を代入しますが、判定の場合は「==」のようにイコールを2個続けます

<div class=”_5pbx userContent” data-ft=”{” tn”:”k”}”=”” id=”js_jz” style=”line-height: 1.38; font-family: Helvetica, Arial, ” hiragino=”” kaku=”” gothic=”” pro”,=”” meiryo,=”” “ms=”” pgothic”,=”” sans-serif;=”” color:=”” rgb(29,=”” 33,=”” 41);=”” background-color:=”” rgb(255,=”” 255,=”” 255);”=””><p style=”margin: 0px; display: inline; font-family: inherit;”>勉強会「失われた川/谷田川」について@巣鴨地域文化創造館</p></div><div class=”_5pbx userContent” data-ft=”{” tn”:”k”}”=”” id=”js_jz” style=”line-height: 1.38; font-family: Helvetica, Arial, ” hiragino=”” kaku=”” gothic=”” pro”,=”” meiryo,=”” “ms=”” pgothic”,=”” sans-serif;=”” color:=”” rgb(29,=”” 33,=”” 41);=”” background-color:=”” rgb(255,=”” 255,=”” 255);”=””><p style=”margin: 0px; display: inline; font-family: inherit;”><br>2015年12月5日、</p><span style=”font-family: inherit;”>「失われた川/谷田川-今はなき谷田川の流れと下流域の地形と文化について-」と題して「巣鴨庚申塚まちづくりを考える会」主催の勉強会でかつて染井(現・駒込)を流れていた「谷田川」についてお話しました。</span></div><div class=”_5pbx userContent” data-ft

こんな感じになります。


FILENAMEから6バイト取り出して拡張子に「.cnt」をつけています
<br>」を見つけたら「▲」にしています
これは、あとで、「▲」を改行にするマークです
」小なりを見つけると「¥n」改行記号を入れています
これらの加工をして標準出力に変数「str」で書き出します

<div class=”_5pbx userContent” data-ft=”{” tn”:”k”}”=”” id=”js_jz” style=”line-height: 1.38; font-family: Helvetica, Arial, ” hiragino=”” kaku=”” gothic=”” pro”,=”” meiryo,=”” “ms=”” pgothic”,=”” sans-serif;=”” color:=”” rgb(29,=”” 33,=”” 41);=”” background-color:=”” rgb(255,=”” 255,=”” 255);”=””>
<p style=”margin: 0px; display: inline; font-family: inherit;”>
勉強会「失われた川/谷田川」について@巣鴨地域文化創造館</p>
</div>
<div class=”_5pbx userContent” data-ft=”{” tn”:”k”}”=”” id=”js_jz” style=”line-height: 1.38; font-family: Helvetica, Arial, ” hiragino=”” kaku=”” gothic=”” pro”,=”” meiryo,=”” “ms=”” pgothic”,=”” sans-serif;=”” color:=”” rgb(29,=”” 33,=”” 41);=”” background-color:=”” rgb(255,=”” 255,=”” 255);”=””>
<p style=”margin: 0px; display: inline; font-family: inherit;”>
▲2015年12月5日、</p>
<span style=”font-family: inherit;”>
「失われた川/谷田川-今はなき谷田川の流れと下流域の地形と文化について-」と題して「巣鴨庚申塚まちづくりを考える会」主催の勉強会でかつて染井(現・駒込)を流れていた「谷田川」についてお話しました。</span>
</div>

HTMLの開始タグがくる都度に閉じタグで改行しています。


FILENAMEは、今までと同じ原理です
<.*>」 このパターンは、正規表現でピリオド「.」は一文字を意味します
同じく正規表現でアスタリスク「*」は、「0個以上」を意味します
つまり、HTMLの開始タグと閉じタグの間に書かれている様々な文字すべてを「“”」消去するということです
「▲」は「改行」にします

その加工を標準出力に書き出します


/^$/」 空行は読み飛ばします
FILENAME の扱いはいままでと同じです

ちょっと違うのは、標準出力に「>>」と小なりを2つ付けていることです
これは追記しろと言うことになります

タイトル行をリネームします
>ren *.ttl *.aaa

ファイルの並びは

000001.aaa ←タイトルだけ
000001.bbb ←プレーンテキスト
000002.aaa
000002.bbb

のように並びます。ここで、

>awk -f script¥step5.awk *.*

とすることで拡張子「.aaa」を標準出力に書き出し、続いて「.bbb」を書き出します。それぞれのファイル名に拡張子「.txt」になります。

勉強会「失われた川/谷田川」 ← 「.aaa」からタイトルを取得
勉強会「失われた川/谷田川」について@巣鴨地域文化創造館 ←「.bbb」から中身を取得
2015年12月5日、
「失われた川/谷田川-今はなき谷田川の流れと下流域の地形と文化について-」と題して「巣鴨庚申塚まちづくりを考える会」主催の勉強会でかつて染井(現・駒込)を流れていた「谷田川」についてお話しました。

このようなプレーンテキストになりました。

スクリプト作成含めておよそ2時間かかりました。対象とするファイルが140個でしたが、1400個でも2時間で加工することが可能になります。