LibreOfficeで、html形式で保存したhtmlを、秀丸ディタのマクロを使って、使いやすいように整形する
広告
私は、ブログやホームページの記事の下書きをLibreOfficeで、作成しています。LibreOfficeの文書から、そのまま使える形式のhtmlファイルが入手できると作成時間の軽減が期待できます。
しかし、LibreOfficeで、html形式で保存すると、クラスや属性が大量に付いた、使いにくいhtmlファイルが出来上がります。
Microsoft WordやExcelでは、htmlに変換するマクロがいくつか公開されています。
しかし、OpenOfficeやLiberOfficeに対応したものは見つけることができませんでした。
LibreOfficeのhtmlファイルを秀丸ディタのマクロで、使いやすい形に整形したいと思います。
理想的には、LibreOfficeのマクロで、処理できれば、LibreOfficeで、文書の作成と使いやすいhtmlへの変換が、LibreOfficeで完結するので操作が減るのですが、残念ながら、LibreOfficeのマクロは、使いこなす段階には到達していません。
htmlテキストの文字コードを変更する
LibreOfficeで、html形式でファイルを保存すると、文字コードが、「shift_jis」で出力される可能性があります。。現在では、htmlテキストでは、「UTF-8」を使用するのが一般的なので、出力に使う文字コードを「UTF-8」に変更します。
「ツール」から「オプション」を選択します。
「読み込みと保存」→「HTML互換性」を選択し、文字エンコーディングで、「Unicode(UTF-8)」を選択します。
LibreOffice Witerで作成した文書をhtml形式で出力する
html形式で、ファイルを取得するには、「名前をつけて保存」で、html形式を指定します。
「ファイル」→「名前をつけて保存」を選択します。
ファイルの種類に「HTMLドキュメント」を選択します。
警告が表示されます。
これで、htmlファイルが取得できます。
汎用テキストエディタの秀丸エディタを使って、LibreOfficeで作成したhtmlファイルを整形する
秀丸エディタは、Windows上で動作するテキストエディタです。歴史は古く、Windows上で動作するテキストエディタとして、最初に登場したテキストエディタの１つです。
テキストエディタは、マクロ機能を活用して使うものですが、秀丸エディタは、マクロを使うための情報とマクロ開発でわからない事を問い合わせることができるコミュニティが充実しています。
そのため、テキストを処理するマクロを作成するのは、情報やアドバイスが入手しやすいので、比較的容易です。
サンプル文書を用意する
マクロの動作確認を行なうために、htmlに変換する文書を用意します。
例として、以下ような文書を作成します。
LIbreOfficeで、作成した文書をhtml形式で出力する
LIbreOfficeで、作成した文書をhtml形式で出力します。必要なのは、Body内の文書の内容です。ホームページやブログでは、それぞれのテンプレートを使用してデザインを指定するので、LibreOfficeが追加した属性やクラス名、ヘッダの情報は、必要ありません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<meta name="generator" content="LibreOffice 5.4.3.2 (Windows)"/>
<meta name="created" content="2017-12-21T16:32:21.702000000"/>
<meta name="changed" content="2017-12-21T18:00:03.338000000"/>
<style type="text/css">
@page { margin-left: 24.99mm; margin-right: 14.99mm; margin-top: 14.99mm; margin-bottom: 14.99mm }
p { margin-bottom: 2.47mm; direction: inherit; line-height: 120% }
p.cjk { font-size: 10pt }
h1 { margin-bottom: 2.12mm; direction: inherit }
h1.western { font-family: "Liberation Sans", sans-serif; font-size: 18pt }
h1.cjk { font-family: "HGｺﾞｼｯｸE", monospace; font-size: 21pt }
h1.ctl { font-family: "Arial Unicode MS"; font-size: 18pt }
h2 { direction: inherit }
h2.western { font-family: "Liberation Sans", sans-serif; font-size: 16pt }
h2.cjk { font-family: "HGｺﾞｼｯｸE", monospace; font-size: 18pt }
h2.ctl { font-family: "Arial Unicode MS"; font-size: 16pt }
h3 { direction: inherit }
h3.western { font-family: "Liberation Sans", sans-serif; font-size: 14pt }
h3.cjk { font-family: "HGｺﾞｼｯｸE", monospace; font-size: 16pt }
h3.ctl { font-family: "Arial Unicode MS"; font-size: 14pt }
td p { margin-bottom: 0mm; direction: inherit }
td p.cjk { font-size: 10pt }
a:link { so-language: zxx }
</style>
</head>
<body lang="ja-JP" dir="ltr">
<h1 class="cjk">見出し１</h1>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">見出し１の説明</p>
<h2 class="cjk">見出し２</h2>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">見出し２の説明</p>
<h3 class="cjk">見出し３</h3>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">見出し３の説明</p>
<ul>
<li/>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">箇条書き１</p>
<li/>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">箇条書き２</p>
<li/>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">箇条書き３</p>
</ul>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%"><br/>
</p>
<ol>
<li/>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">番号箇条書き１</p>
<li/>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">番号箇条書き２</p>
<li/>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">番号箇条書き３</p>
</ol>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%"><br/>
</p>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%">表１</p>
<dl>
<dd>
<table width="238" cellpadding="4" cellspacing="0">
<col width="74">
<col width="68">
<col width="70">
<tr valign="top">
<td width="74" style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.97mm; padding-bottom: 0.97mm; padding-left: 0.97mm; padding-right: 0mm">
<p class="cjk">項目１</p>
</td>
<td width="68" style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0.97mm; padding-bottom: 0.97mm; padding-left: 0.97mm; padding-right: 0mm">
<p class="cjk">項目２</p>
</td>
<td width="70" style="border: 1px solid #000000; padding: 0.97mm">
<p class="cjk">項目３</p>
</td>
</tr>
<tr valign="top">
<td width="74" style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0mm; padding-bottom: 0.97mm; padding-left: 0.97mm; padding-right: 0mm">
<p class="cjk">い</p>
</td>
<td width="68" style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0mm; padding-bottom: 0.97mm; padding-left: 0.97mm; padding-right: 0mm">
<p class="cjk">ろ</p>
</td>
<td width="70" style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0mm; padding-bottom: 0.97mm; padding-left: 0.97mm; padding-right: 0.97mm">
<p class="cjk">は</p>
</td>
</tr>
</table>
</dl>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%"><br/>
</p>
<p class="cjk" style="margin-bottom: 0mm; line-height: 100%"><br/>
</p>
</body>
</html>不要な記述を削除する
テキストエディタやワープロソフトのマクロでは、基本的には、正規表現を使用した検索置換で、文書やテキストを変更します。正規表現は、使用する処理系によって微妙に異なることに注意して下さい。
複数行にまたがる一致を削除する
LibreOfficeで作成したhtmlファイルをブログやホームページの素材として利用する場合、hesdタグは、不要です。そこで、まず、秀丸エディタのマクロを使用して、headタグを全て削除しようと思います。
正規表現パターンを使用した検索置換で対応できそうな気がしますが、秀丸エディタでは、複数行をまたぐ一致は、まず、うまく動作しません。
そのため、ここでは、マクロを作成して対応します。秀丸エディタは、マクロの記録機能があるので、基本動作をマクロの記録で作成し、うまく利用すると手作業で入力するコードを大幅に減らす事ができます。
[マクロ]→[キー操作の記録開始/終了]（標準でShift+F1）で記録開始します。
「検索」から、「検索」を選択します。
<head>を検索します。
「選択開始」コマンド（標準でShift+F6）を実行します。
</head>を検索します。
</head>の末尾まで、カーソルを移動します。
[Del]キーを押して、選択した部分を削除します。
[マクロ]→[キー操作の記録開始/終了]（標準でShift+F1）で記録を終了します。
[マクロ]→[キー操作の保存]を選択します。
記録したマクロは、このようになりました。
setcompatiblemode 0x0F;
searchdown "<head>" , regular, hilight;
if( ! result ) beep;
beginsel;
searchdown "</head>" , regular, hilight;
if( ! result ) beep;
right 7;
delete;これを書き直すと以下のようになります。
setcompatiblemode 0x0F;
searchdown "<head>"; // <head>を検索
if(result!=false )
{
beginsel; // 選択を開始
searchdown "</head>"; // </head>を検索
if(result!=false)
{
moveto foundendx,foundendy; // 末尾に移動
delete; // 選択した部分を削除
}
}このマクロで、ヘッダを削除することができます。
style属性を削除する
LibreOfficeで作成したhtmlファイルから、headタグを全て削除しました。ここから、style属性を削除すると、htmlテキストがよりわかりやすくなると思います。style属性を削除するために、正規表現パターンを使用した置換を使用します。
属性を指定する正規表現パターンの例
- style="(.*?)"
- class="(.*?)"
- width="(.*?)"
1行内に収まる一致を削除する
秀丸エディタでは、一致するテキストが、1行内に収まる(改行文字を含まない)場合、正規表現で一致させることは簡単です。
[マクロ]→[キー操作の記録開始/終了]（標準でShift+F1）で記録開始します。
「検索」から、「置換」を選択します。
検索文字列に、正規表現パターン「style="(.*?)"」を入力し、置換を空白にし、「全置換」をクリックします。
置換した個数が表示されます。
[マクロ]→[キー操作の記録開始/終了]（標準でShift+F1）で記録を終了します。
[マクロ]→[キー操作の保存]を選択します。
秀丸エディタは、日本で作られたテキストエディタなので、日本語のファイル名を指定しても問題は発生しません。
作成されたマクロの内容は次のようになります。
setcompatiblemode 0x0F;
begingroupundo;
replaceall "style=\"(.*?)\"" , "" , regular, nohilight;
if( ! result ) beep;
endgroupundo 1;これを書き直すと以下のようになります。
setcompatiblemode 0x0F;
begingroupundo;
replaceall "style=\"(.*?)\"" , "" , regular, nohilight;
endgroupundo 1;組み合わせて不要な記述を削除する
これまでに紹介した正規表現に一致する文字列パターンを削除を繰り返して、使いやすいhtmlテキストに加工するマクロを作成します。
setcompatiblemode 0x0F;
// LibreOfficeで、html形式で出力したタグテキストを整形する
// ヘッダを削除する
searchdown "<head>"; // <head>を検索
if(result!=false )
{
beginsel; // 選択を開始
searchdown "</head>"; // </head>を検索
if(result!=false)
{
moveto foundendx,foundendy; // 末尾に移動
delete; // 選択した部分を削除
}
}
// スタイルを削除する
begingroupundo;
replaceall "style=\"(.*?)\"" , "" , regular, nohilight;
endgroupundo 1;
// class="cjk"を削除する
begingroupundo;
replaceall "class=\"cjk\"" , "" , regular, nohilight;
endgroupundo 1;先程のhtmlテキストに、このマクロを実行すると、スタイル属性やクラスが削除され、見やすくなります。
setcompatiblemode 0x0F;
// LibreOfficeで、html形式で出力したタグテキストを整形する
// ヘッダを削除する
searchdown "<head>"; // <head>を検索
if(result!=false )
{
beginsel; // 選択を開始
searchdown "</head>"; // </head>を検索
if(result!=false)
{
moveto foundendx,foundendy; // 末尾に移動
delete; // 選択した部分を削除
}
}
// スタイルを削除する
begingroupundo;
replaceall "style=\"(.*?)\"" , "" , regular, nohilight;
endgroupundo 1;
// class="cjk"を削除する
begingroupundo;
replaceall "class=\"cjk\"" , "" , regular, nohilight;
endgroupundo 1;
先程のhtmlテキストに実行すると、スタイル属性やクラスが削除され、見やすくなります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body lang="ja-JP" dir="ltr">
<h1 >見出し１</h1>
<p >見出し１の説明</p>
<h2 >見出し２</h2>
<p >見出し２の説明</p>
<h3 >見出し３</h3>
<p >見出し３の説明</p>
<ul>
<li/>
<p >箇条書き１</p>
<li/>
<p >箇条書き２</p>
<li/>
<p >箇条書き３</p>
</ul>
<p ><br/>
</p>
<ol>
<li/>
<p >番号箇条書き１</p>
<li/>
<p >番号箇条書き２</p>
<li/>
<p >番号箇条書き３</p>
</ol>
<p ><br/>
</p>
<p >表１</p>
<dl>
<dd>
<table width="238" cellpadding="4" cellspacing="0">
<col width="74">
<col width="68">
<col width="70">
<tr valign="top">
<td width="74" >
<p >項目１</p>
</td>
<td width="68" >
<p >項目２</p>
</td>
<td width="70" >
<p >項目３</p>
</td>
</tr>
<tr valign="top">
<td width="74" >
<p >い</p>
</td>
<td width="68" >
<p >ろ</p>
</td>
<td width="70" >
<p >は</p>
</td>
</tr>
</table>
</dl>
<p ><br/>
</p>
<p ><br/>
</p>
</body>
</html>これで、htmlテキストがかなり見やすくなりました。
