HTMLファイル等の文字コード一括変換方法



●文字コードの一括変換

 文字化けが起きた場合は変換対象としたファイルが全てBINARYになってしまいますので、あらかじめバックアップを取るようにしてください。
 特定のフォルダ内(例:/file/to/path)に存在する拡張子が「.htm」であるファイル全ての文字コードをEUC-JPからUTF-8に変換する方法は下記のとおりです。
フォルダに移動後作業する場合
$ cd /file/to/path
$ nkf --guess *.htm ← 変換前のファイルの文字コードの調査
EUC-JP (LF) ← 変換後の文字コード出力。ファイル数分表示される
$ nkf -Ew --overwrite *.htm
フォルダに移動しないで作業する場合
$ find /file/to/path -type f -name "*.htm" | xargs nkf --guess ← 変換前のファイルの文字コードの調査
EUC-JP (LF) ← 変換後の文字コード出力。ファイル数分表示される
$ find /file/to/path -type f -name "*.htm" | xargs nkf -Ew --overwrite
 最初の実行で、変換結果が正しくUTF-8になるか確認しています。。

 特定のフォルダ内(例:/file/to/path)に存在する拡張子が「.htm」であるファイル全ての文字コードをUTF-8からShift-JISに変換する方法は下記のとおりです。
 ただし、下記の場合「Shift_JIS (LF)」と表示されることから変換後は改行モードがLFで文字コードがShift-JISに変換されます。
$ cd /file/to/path
$ nkf --guess *.htm ← 変換前のファイルの文字コードの調査
Shift_JIS (LF) ← 変換後の文字コード出力
$ nkf -Ws --overwrite *.htm
 上記をWindowsマシンで扱う「Shift-JIS・CRLF」形式にするには下記のようにします。
 今度は「Shift_JIS (CR)」と表示されることから変換後は改行モードがCRLFで文字コードがShift-JISに変換されます。
$ cd /file/to/path
$ nkf --guess *.htm ← 全ての結果が表示されます
Shift_JIS (CR) ← 変換後の文字コード出力
$ nkf -Ws -Lw --overwrite *.htm

●特定フォルダ内のHTMLファイルのencordingやcharsetの一括変換

 文字コードや改行モードを変更後は、HTMLファイル内のencordingやcharsetの部分を変更する必要があります。下記の部分を変更した文字コードに合わせて変換します。
<?xml version="1.0" encording="EUC-JP"?>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<link href="all.css" rel="stylesheet" type="text/css" charset="EUC-JP" />
<script>
$(function(){
  $('div#nav-content').clone().appendTo('a#cloneAppendTo');
});
</script>
 /file/to/path内にある「.htm」ファイルを一括変換するには下記のようにします。
 下記は「EUC-JP」を「UTF-8」に変換する方法です。
# find /file/to/path/ -name "*.htm" | xargs sed -i s/encording=\"EUC-JP\"/encording=\"UTF-8\"/g
# find /file/to/path/ -name "*.htm" | xargs sed -i s/charset=EUC-JP/charset=UTF-8/g
# find /file/to/path/ -name "*.htm" | xargs sed -i s/charset=\"EUC-JP\"/charset=\"UTF-8\"/g

●nkfコマンドの主なオプション

-j  JISコードを出力する。(デフォルト)
-e  EUCコードを出力する。
-s  シフトJISコードを出力する。
-w -w8[0] -w16[BL][0]  Unicode を出力する。
-w -w80  UTF8コードを出力する。(BOM無し)
-w8  UTF8コードを出力する

期待される入力コード
-J  ISO-2022-JPを仮定する。
-E  日本語EUC(AT&T)を仮定する。
-S  MS漢字を仮定する。X0201仮名も仮定される。
-W  UTF-8を仮定する

-L[wmu]
改行モード
  -Lu  unix (LF)
  -Lw  windows (CRLF)
  -Lm  mac (CR)
デフォルトは変換なし

●複数行を一括変換するには

 HTMLファイルの最終更新日を「最終更新日 01/04/2011 15:38:57」のように表示するようにしています。
 これを「最終更新日:2011年01月06日(木)10時57分06秒」のように変更したいと思いました。
 それぞれのスクリプトは下記のようになります。
「最終更新日 01/04/2011 15:38:57」表示形式の場合
<div class="koushinbi">最終更新日
  <script type="text/javascript">
      <!--
        document.write(document.lastModified);
      // -->
  </script>
</div>
「最終更新日:2011年01月06日(木)10時57分06秒」表示形式の場合
<div class="koushinbi">
  <script type="text/javascript">
    <!--
      var weeks = new Array('日','月','火','水','木','金','土');
      var lastup = new Date(document.lastModified);
      var year = lastup.getYear(); // 年
      var month = lastup.getMonth() + 1; // 月
      var day = lastup.getDate(); // 日
      var week = weeks[ lastup.getDay() ]; // 曜日
      var hour = lastup.getHours(); // 時
      var min = lastup.getMinutes(); // 分
      var sec = lastup.getSeconds(); // 秒
      if(year < 2000) { year += 1900; }
      // 数値が1桁の場合、頭に0を付けて2桁で表示する指定
      if(month < 10) { month = "0" + month; }
      if(day < 10) { day = "0" + day; }
      if(hour < 10) { hour = "0" + hour; }
      if(min < 10) { min = "0" + min; }
      if(sec < 10) { sec = "0" + sec; }
      // 表示開始
      document.write('最終更新日:' + year + '年' + month + '月' + day + '日(' + week + ')');
      document.write(hour + '時' + min + '分' + sec + '秒');
      // 表示終了
    // -->
  </script>
</div>
 sedコマンドでは一致する特定文字列を別の文字列へ置換が容易にできることは知っていたのですが、一致する複数行を別の複数行にわたるものへ置換する方法が分かりませんでした(もしかしたら、他の方法により容易にできるかもしれないが・・)。
 別手段として置換対象となる複数行をsedコマンドにより1行ずつ削除し、その後、一致する文字列の後に置換させたい複数行を挿入する方法を取りました。その方法を記載します。
 置換対象行は下記のとおりです。分かりやすいように行番号を付加しています。
1:<div class="koushinbi">最終更新日
2:  <script type="text/javascript">
3:      <!--
4:        document.write(document.lastModified);
5:      // -->
6:  </script>
7:</div>
 1行ずつ処理していきます。
 1行目の「最終更新日」を削除します。
$ find /file/to/path -name "*.htm" | xargs sed -i s/'最終更新日'//g
 2行目を削除します。
$ find /file/to/path -name "*.htm" | xargs sed -i /'  <script type=\"text\/javascript\">'/d
 3行目を削除します。
$ find /file/to/path -name "*.htm" | xargs sed -i /'      <!--'/d
 4行目を削除します。
$ find /file/to/path -name "*.htm" | xargs sed -i /'       document.write(document.lastModified);'/d
 5行目を削除します。
$ find /file/to/path -name "*.htm" | xargs sed -i /'      \/\/ -->'/d
 6行目を削除します。
$ find /file/to/path -name "*.htm" | xargs sed -i /'  <\/script>'/d
 7行目は必要な行ですので、そのまま残します。処理の結果、下記のようになります。
<div class="koushinbi">
<div>
 次に、上記2行の間に挿入したい内容のテキストファイルを作成します。
$ vi /file/to/path/insert.txt
  <script type="text/javascript">
    <!--
      var weeks = new Array('日','月','火','水','木','金','土');
      var lastup = new Date(document.lastModified);
      var year = lastup.getYear(); // 年
      var month = lastup.getMonth() + 1; // 月
      var day = lastup.getDate(); // 日
      var week = weeks[ lastup.getDay() ]; // 曜日
      var hour = lastup.getHours(); // 時
      var min = lastup.getMinutes(); // 分
      var sec = lastup.getSeconds(); // 秒
      if(year < 2000) { year += 1900; }
      // 数値が1桁の場合、頭に0を付けて2桁で表示する指定
      if(month < 10) { month = "0" + month; }
      if(day < 10) { day = "0" + day; }
      if(hour < 10) { hour = "0" + hour; }
      if(min < 10) { min = "0" + min; }
      if(sec < 10) { sec = "0" + sec; }
      // 表示開始
      document.write('最終更新日:' + year + '年' + month + '月' + day + '日(' + week + ')');
      document.write(hour + '時' + min + '分' + sec + '秒');
      // 表示終了
    // -->
  </script>
 上記内容を挿入するには下記コマンドを実行します。
$ find /file/to/path -name "*.htm" | xargs sed -i '/koushinbi/r /file/to/path/insert.txt'


●HTMLファイルにヘッダー及びフッター情報を一括追加するには

 公開しているHTMLファイルをモバイルにも対応する作業の中で、HTMLファイルに新たにヘッダー及びフッター情報を追加する必要が生じました。
 この作業により、画面解像度によりヘッダーやフッター等を自在に表示・非表示させることができるようになりました。
 これまで作成したHTMLファイルはたくさんあるので、できる限り簡単に済ませたいと思いました。
 その時に実行したコマンド等を残しましたので参考にしてください。

 まず、画面サイズ(iphone、iPad、iPad Pro、PC等)によりHTMLの表示方法を変更するため、それに対応したcssファイルを読み込むように入れ替えます。

 ●該当フォルダにあるhtmlファイルの href="vine-stylesheet.css" を href="all.css" に一括変換します。
# find /path/to/file/ -name "*.html" | xargs sed -i s/href=\"vine-stylesheet.css\"/href=\"all.css\"/g
<script>
$(function(){
  $('div#nav-content').clone().appendTo('a#cloneAppendTo');
});
</script>
 ●該当フォルダにあるhtmlファイルの下記を一括削除します。
---------- ここから ----------
<table width="100%">
<tr>
<td>
<div class="koushinbi">
  <script type="text/javascript">
    <!--
      var weeks = new Array('日','月','火','水','木','金','土');
      var lastup = new Date(document.lastModified);
      var year = lastup.getYear(); // 年
      var month = lastup.getMonth() + 1; // 月
      var day = lastup.getDate(); // 日
      var week = weeks[ lastup.getDay() ]; // 曜日
      var hour = lastup.getHours(); // 時
      var min = lastup.getMinutes(); // 分
      var sec = lastup.getSeconds(); // 秒
      if(year < 2000) { year += 1900; }
      // 数値が1桁の場合、頭に0を付けて2桁で表示する指定
      if(month < 10) { month = "0" + month; }
      if(day < 10) { day = "0" + day; }
      if(hour < 10) { hour = "0" + hour; }
      if(min < 10) { min = "0" + min; }
      if(sec < 10) { sec = "0" + sec; }
      // 表示開始
      document.write('最終更新日:' + year + '年' + month + '月' + day + '日(' + week + ')');
      document.write(hour + '時' + min + '分' + sec + '秒');
      // 表示終了
    // -->
  </script>
</div>
---------- ここまで ----------

# find /path/to/file/ -name "*.html" | xargs sed -i /^'<table width=\"100%\">'$/,/^'<\/div>'$/d
 ●該当フォルダにあるhtmlファイルの <body> の直後に header.txt の内容を追加します。
---------- ここから ----------
header.txtの内容
<!-- ヘッダー ここから -->
  <div id="header1">
    <div class="koushinbi">
      <script type="text/javascript">
        <!--
          var weeks = new Array('日','月','火','水','木','金','土');
          var lastup = new Date(document.lastModified);
          var year = lastup.getYear(); // 年
          var month = lastup.getMonth() + 1; // 月
          var day = lastup.getDate(); // 日
          var week = weeks[ lastup.getDay() ]; // 曜日
          var hour = lastup.getHours(); // 時
          var min = lastup.getMinutes(); // 分
          var sec = lastup.getSeconds(); // 秒
          if(year < 2000) { year += 1900; }
          // 数値が1桁の場合、頭に0を付けて2桁で表示する指定
          if(month < 10) { month = "0" + month; }
          if(day < 10) { day = "0" + day; }
          if(hour < 10) { hour = "0" + hour; }
          if(min < 10) { min = "0" + min; }
          if(sec < 10) { sec = "0" + sec; }
          // 表示開始
          document.write('このページへのアクセス時刻:' + year + '年' + month + '月' + day + '日(' + week + ')');
          document.write(hour + '時' + min + '分' + sec + '秒');
          // 表示終了
         -->
      </script>
    </div>
  </div>
  <div id="header">
    <div class="top">Linuxで様々なサービスを構築しよう!!!</div>
  </div>
<!-- ヘッダー ここまで-->
---------- ここまで ----------
# find /path/to/file/ -name "*.html" | xargs sed -i '/<body>/r /path/to/file/header.txt'
 これでヘッダー部分の付け替えが完了しました。

 ●該当フォルダにあるhtmlファイルの下記を削除します。
 </td>、</tr>、</table>で検索して削除すると、通常のテーブル部分に影響が出るため</body>を含ませて削除しました。
---------- ここから ----------
</td>
</tr>
</table>
</body>
---------- ここまで ----------

# find /path/to/file/ -name "*.html" | xargs sed -i /^'<\/td>'$/,/^'<\/body>'$/d
 ●該当フォルダにあるhtmlファイルに最終行の一行前に </body> を追加します。
# find /path/to/file/ -name "*.html" | xargs sed -i '$ i </body>'
 ●該当フォルダにあるhtmlファイルの最終行を下記のように変更したい。
---------- ここから ----------
(・・・任意の文字列・・・)
</body>
</html>
 ↓↓↓
(・・・任意の文字列・・・)
<br />
<br />
<!-- フッター ここから -->
  <div id="footer">
    <div class="center">当サイトへのリンクはフリーです。ご自由にリンクを張っていただいて構いません。</div>
  </div>
<!-- フッター ここまで -->
</body>
</html>

footer.txtの内容
<br />
<br />
<!-- フッター ここから -->
  <div id="footer">
    <div class="center">当サイトへのリンクはフリーです。ご自由にリンクを張っていただいて構いません。</div>
  </div>
<!-- フッター ここまで -->
---------- ここまで ----------

 3回に分けて作業します。

 1回目の作業(</body>行の直後にfooter.txtの内容を追加)
# find /path/to/file/ -name "*.html" | xargs sed -i '/<\/body>/r /path/to/file/footer.txt'
 2回目の作業(</body>行を削除)
# find /path/to/file/ -name "*.html" | xargs sed -i /'<\/body>'/d
 3回目の作業(最終行の一行前に</body>を追加)
# find /path/to/file/ -name "*.html" | xargs sed -i '$ i </body>'
 これでフッター部分の付け替え作業は終了です。

●特定フォルダ内の複数のhtmlファイルを一括変更する方法(目次のハンバーガーメニュー化)

 参考URL:clone():要素のクローン(コピー・複製)を作成

 この変換の大きな目的は、これまでPCを対象としていたhtmlファイルをスマートフォン、IPad、IPad Pro等に対応させるため、横幅(ピクセル数)により見栄えを自動的に切り替えることができるようことです。
 作業は下記のようになります。
  • 目次の記載場所の変更
  • 画面サイズ毎に複数箇所に同じ内容を記載していた目次を2ヶ所目以降は自動的にコピー(clone)する機能の新規追加
  • 上記をすべてのhtmlファイルに対する一括変換
 あるhtmlファイルを例とし、どこを変更していくのか説明します。 

 変更前の文書内容。

1 <?xml version="1.0" encording="UTF-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6 <meta http-equiv="Content-Style-Type" content="text/css" />
7 <meta name="viewport" content="width=device-width, initial-scale=1" />
8 <title>ここにタイトルを記載する</title>
9 <link href="all.css" rel="stylesheet" type="text/css" charset="UTF-8" />
10 </head>
11 <body>
12 <!-- ヘッダー ここから -->
13 <div id="header">
14 <div class="top">Linuxで様々なサービスを構築しよう!!!</div>
15 </div>
16 <!-- ヘッダー ここまで-->
17 <div class="koushinbi">
18 <script type="text/javascript">
19 <!--
20 var weeks = new Array('日','月','火','水','木','金','土');
21 var lastup = new Date(document.lastModified);
22 var year = lastup.getYear(); // 年
23 var month = lastup.getMonth() + 1; // 月
24 var day = lastup.getDate(); // 日
25 var week = weeks[ lastup.getDay() ]; // 曜日
26 var hour = lastup.getHours(); // 時
27 var min = lastup.getMinutes(); // 分
28 var sec = lastup.getSeconds(); // 秒
29 if(year < 2000) { year += 1900; }
30 // 数値が1桁の場合、頭に0を付けて2桁で表示する指定
31 if(month < 10) { month = "0" + month; }
32 if(day < 10) { day = "0" + day; }
33 if(hour < 10) { hour = "0" + hour; }
34 if(min < 10) { min = "0" + min; }
35 if(sec < 10) { sec = "0" + sec; }
36 // 表示開始
37 document.write('最終更新日:' + year + '年' + month + '月' + day + '日(' + week + ')');
38 document.write(hour + '時' + min + '分' + sec + '秒');
39 // 表示終了
40 // -->
41 </script>
42 </div>
43 <p class="hyoudai3">ここにタイトルを記載する</p>
44 <!-- width:1024px以下用目次 ここから -->
45 <div id="mokuji">
46 <a href="#link">
47 ●関連リンク先
48 </a>
49 <br />
50 <a href="#aide">
51 ●AIDE(Advanced Intrusion Detection Environment)とは
52 </a>
53 <br />
54 <a href="#install">
55 ●AIDEのインストール
56 </a>
57 <br />
58 <a href="#config">
59 ●設定ファイルの編集
60 </a>
61 <br />
62 <a href="#database-initialization">
63 ●データベースの初期化
64 </a>
65 <br />
66 <a href="#check-of-falsification">
67 ●改ざんのチェック
68 </a>
69 <br />
70 <a href="#database-update">
71 ●データベースの更新
72 </a>
73 <br />
74 <a href="#script-check">
75 ●スクリプトによる定期チェック
76 </a>
77 <br />
78 <a href="#log-rotation">
79 ●ログのローテーション
80 </a>
81 <br />
82 <a href="#prelink -hild-process">
83 ●Error on exit of prelink child process
84 </a>
85 <br />
86 <a href="#mmapping">
87 ●Caught SIGBUS/SEGV while mmapping
88 </a>
89 <br />
90 <br />
91 </div>
92 <!-- width:1024px以下用目次 ここまで -->
93 <!-- 右サイドバー追従 ここから -->
94 <div class="container">
95 <!-- サイドバーの設定 ここから -->
96 <div id="content">
97 <div class="content">
98 <!-- 左サイドバーの内容 ここから -->
99 <div id="mainbar">
100 <div class="mainbar">
101 <span class="chocolate-bold-character" id="link">
102 ●関連リンク先
103 </span>
104 <br />
105 <br />
106 <a href="https://perladmin.wordpress.com/2013/01/28/aide-constantly-reporting-prelink-errors/" target="_blank">AIDE constantly reporting prelink errors</a>
107 <br />
108 <a href="http://www.kinryokai.net/modules/news/article.php?storyid=214" target="_blank">錦稜会Web</a>
109 <br />
110 <a href="" target="_blank"></a>
111 <br />
112 <br />
113 <span class="chocolate-bold-character" id="aide">
114 ●AIDE(Advanced Intrusion Detection Environment)とは
115 </span>
116 <br />
117 <br />
118  <a href="http://aide.sourceforge.net/" target="_blank">AIDE</a>は、オープンソースの侵入検知システム(IDS:Intrusion Detection System)で、CentOSなどの主要なディストリビューションで無償で利用することができます。
119 <br />
120  IDSにはネットワーク型とホスト型の2種類があり、ネットワーク型はネットワーク上に設置し複数台のサーバーを監視することができます。ホスト型はサーバーにIDSをインストールして監視します。AIDEはホスト型のIDSになります。
121 </div>
122 </div>
123 <!-- 左サイドバーの内容 ここまで -->
124 <!-- 右サイドバー(追従)の内容 (トップページ以外のhtmlファイルが対象) width:1025px以上用 ここから -->
125 <div id="sidebar2">
126 <div class="sidebar2">
127 <a href="#link">
128 ●関連リンク先
129 </a>
130 <br />
131 <a href="#aide">
132 ●AIDE(Advanced Intrusion Detection Environment)とは
133 </a>
134 <br />
135 <a href="#install">
136 ●AIDEのインストール
137 </a>
138 <br />
139 <a href="#config">
140 ●設定ファイルの編集
141 </a>
142 <br />
143 <a href="#database-initialization">
144 ●データベースの初期化
145 </a>
146 <br />
147 <a href="#check-of-falsification">
148 ●改ざんのチェック
149 </a>
150 <br />
151 <a href="#database-update">
152 ●データベースの更新
153 </a>
154 <br />
155 <a href="#script-check">
156 ●スクリプトによる定期チェック
157 </a>
158 <br />
159 <a href="#log-rotation">
160 ●ログのローテーション
161 </a>
162 <br />
163 <a href="#prelink -hild-process">
164 ●Error on exit of prelink child process
165 </a>
166 <br />
167 <a href="#mmapping">
168 ●Caught SIGBUS/SEGV while mmapping
169 </a>
170 <br />
171 <br />
172 <a href="./index.shtml">
173 <トップページに戻る>
174 </a>
175 </div>
176 </div>
177 <!-- 右サイドバー(追従)の内容 (トップページ以外のhtmlファイルが対象) width:1025px以上用 ここまで -->
178 </div>
179 </div>
180 <!-- サイドバーの設定 ここまで -->
181 </div>
182 <!-- 右サイドバー追従 ここまで -->
183 <!-- フッター ここから -->
184 <div id="footer">
185 <div class="center">当サイトへのリンクはフリーです。ご自由にリンクを張っていただいて構いません。</div>
186 </div>
187 <!-- フッター ここまで -->
188 </body>
189 </html>


 下記のように変更したい。

1 <?xml version="1.0" encording="UTF-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6 <meta http-equiv="Content-Style-Type" content="text/css" />
7 <meta name="viewport" content="width=device-width, initial-scale=1" />
8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9 <title>AIDE(オープンソースのIDS)の設定方法</title>
10 <link href="all.css" rel="stylesheet" type="text/css" charset="UTF-8" />
11 <script>
12 $(function(){
13 $('div#nav-content').clone().appendTo('a#cloneAppendTo');
14 });
15 </script>

16 </head>
17 <body>
18 <!-- ハンバーガーメニュー ここから -->
19 <div class="header-logo-menu">
20 <div id="nav-drawer">
21 <input id="nav-input" type="checkbox" class="nav-unshown">
22 <label id="nav-open" for="nav-input"><span></span></label>
23 <label class="nav-unshown" id="nav-close" for="nav-input"></label>
24 <!-- ハンバーガーメニューの中身 ここから -->
25 <div id="nav-content">
26 <a href="#link">
27 ●関連リンク先
28 </a>
29 <br />
30 <a href="#aide">
31 ●AIDE(Advanced Intrusion Detection Environment)とは
32 </a>
33 <br />
34 <a href="#install">
35 ●AIDEのインストール
36 </a>
37 <br />
38 <a href="#config">
39 ●設定ファイルの編集
40 </a>
41 <br />
42 <a href="#database-initialization">
43 ●データベースの初期化
44 </a>
45 <br />
46 <a href="#check-of-falsification">
47 ●改ざんのチェック
48 </a>
49 <br />
50 <a href="#database-update">
51 ●データベースの更新
52 </a>
53 <br />
54 <a href="#script-check">
55 ●スクリプトによる定期チェック
56 </a>
57 <br />
58 <a href="#log-rotation">
59 ●ログのローテーション
60 </a>
61 <br />
62 <a href="#prelink -hild-process">
63 ●Error on exit of prelink child process
64 </a>
65 <br />
66 <a href="#mmapping">
67 ●Caught SIGBUS/SEGV while mmapping
68 </a>
69 <br />
70 <br />
71 <a href="./index.shtml">
72 <トップページに戻る>
73 </a>
74 </div>
75 <!-- ハンバーガーメニューの中身 ここまで -->
76 </div>
77 <div class="logo-area"></div>
78 </div>
79 <!-- ハンバーガーメニュー ここまで -->

80 <!-- ヘッダー ここから -->
81 <div id="header">
82 <div class="top">Linuxで様々なサービスを構築しよう!!!</div>
83 </div>
84 <!-- ヘッダー ここまで-->
85 <div class="koushinbi">
86 <script type="text/javascript">
87 <!--
88 var weeks = new Array('日','月','火','水','木','金','土');
89 var lastup = new Date(document.lastModified);
90 var year = lastup.getYear(); // 年
91 var month = lastup.getMonth() + 1; // 月
92 var day = lastup.getDate(); // 日
93 var week = weeks[ lastup.getDay() ]; // 曜日
94 var hour = lastup.getHours(); // 時
95 var min = lastup.getMinutes(); // 分
96 var sec = lastup.getSeconds(); // 秒
97 if(year < 2000) { year += 1900; }
98 // 数値が1桁の場合、頭に0を付けて2桁で表示する指定
99 if(month < 10) { month = "0" + month; }
100 if(day < 10) { day = "0" + day; }
101 if(hour < 10) { hour = "0" + hour; }
102 if(min < 10) { min = "0" + min; }
103 if(sec < 10) { sec = "0" + sec; }
104 // 表示開始
105 document.write('最終更新日:' + year + '年' + month + '月' + day + '日(' + week + ')');
106 document.write(hour + '時' + min + '分' + sec + '秒');
107 // 表示終了
108 // -->
109 </script>
110 </div>
111 <p class="hyoudai3">AIDE(オープンソースのIDS)の設定方法</p>
112 <!-- width:1024px以下用目次 ここから -->
113 <div id="mokuji">
114 <a id="cloneAppendTo"></a>
115 <br />
116 <br />
117 </div>
118 <!-- width:1024px以下用目次 ここまで -->
119 <!-- 右サイドバー追従 ここから -->
120 <div class="container">
121 <!-- サイドバーの設定 ここから -->
122 <div id="content">
123 <div class="content">
124 <!-- 左サイドバーの内容 ここから -->
125 <div id="mainbar">
126 <div class="mainbar">
127 <span class="chocolate-bold-character" id="link">
128 ●関連リンク先
129 </span>
130 <br />
131 <br />
132 <a href="https://perladmin.wordpress.com/2013/01/28/aide-constantly-reporting-prelink-errors/" target="_blank">AIDE constantly reporting prelink errors</a>
133 <br />
134 <a href="http://www.kinryokai.net/modules/news/article.php?storyid=214" target="_blank">錦稜会Web</a>
135 <br />
136 <a href="" target="_blank"></a>
137 <br />
138 <br />
139 <span class="chocolate-bold-character" id="aide">
140 ●AIDE(Advanced Intrusion Detection Environment)とは
141 </span>
142 <br />
143 <br />
144  <a href="http://aide.sourceforge.net/" target="_blank">AIDE</a>は、オープンソースの侵入検知システム(IDS:Intrusion Detection System)で、CentOSなどの主要なディストリビューションで無償で利用することができます。
145 <br />
146  IDSにはネットワーク型とホスト型の2種類があり、ネットワーク型はネットワーク上に設置し複数台のサーバーを監視することができます。ホスト型はサーバーにIDSをインストールして監視します。AIDEはホスト型のIDSになります。
147 </div>
148 </div>
149 <!-- 左サイドバーの内容 ここまで -->
150 <!-- 右サイドバー(追従)の内容 (トップページ以外のhtmlファイルが対象) width:1025px以上用 ここから -->
151 <div id="sidebar2">
152 <div class="sidebar2">
153 <!-- width:1024px以下用目次が上部にあるので、そちらも変更し忘れないこと。 -->
154 <a id="cloneAppendTo"></a>

155 </div>
156 </div>
157 <!-- 右サイドバー(追従)の内容 (トップページ以外のhtmlファイルが対象) width:1025px以上用 ここまで -->
158 </div>
159 </div>
160 <!-- サイドバーの設定 ここまで -->
161 </div>
162 <!-- 右サイドバー追従 ここまで -->
163 <!-- フッター ここから -->
164 <div id="footer">
165 <div class="center">当サイトへのリンクはフリーです。ご自由にリンクを張っていただいて構いません。</div>
166 </div>
167 <!-- フッター ここまで -->
168 </body>
169 </html>


 簡単なところから作業を進めていきます。
 
 「viewport」が含まれる行の直後に下記行を挿入します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 コマンドは下記の通りです。
# vi /tmp/insert.txt
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

# find /file/to/path/ -name "*.htm" | xargs sed -i '/viewport/r /tmp/insert.txt'
 「all.css」が含まれる行の直後に下記行を挿入します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 コマンドは下記の通りです。
# vi /tmp/insert.txt
<script>
$(function(){
  $('div#nav-content').clone().appendTo('a#cloneAppendTo');
});
</script>

# find /file/to/path/ -name "*.htm" | xargs sed -i '/all.css/r /tmp/insert.txt'
 変更前のhtmlファイルには目次が同じ内容で2ヶ所(46行目から、と、127行目から)記載されています。
 これらを削除します。ただし、削除部分はのちのちハンバーガーメニューで利用しますので一時退避しておきます。
 具体的に削除部分は、46行目の <a href="#link"> から90行目の </div> までと127行目の <a href="#link"> から 176行目の </div> までです。

 上記2ヶ所を削除するには少し工夫が必要です。
 45行目の <div id="mokuji"> の直後に下記を挿入します。
# vi /tmp/insert.txt
<a id="cloneAppendTo"></a> 
<br />
<br />
  </div>
sekujo1

# find /file/to/path/ -name "*.htm" | xargs sed -i '/mokuji/r /tmp/insert.txt'
 次に、92行目の <!-- width:1024px以下用目次 ここまで --> の直後に下記を挿入します。
# vi /tmp/insert.txt
sakujo2
<!-- width:1024px以下用目次 ここまで -->

# find /file/to/path/ -name "*.htm" | xargs sed -i '/1024px以下用目次 ここまで/r /tmp/insert.txt'
 sakujo1 から sakujo2 までを削除すれば、下記のようになります。
# find /mnt/inu_html/multi/ -name "aide-x.htm" | xargs sed -e '/sakujo1/,/sakujo2/d'

<!-- width:1024px以下用目次 ここから -->
  <div id="mokuji">
  <a id="cloneAppendTo"></a> 
<br />
<br />
  </div>
<!-- width:1024px以下用目次 ここまで -->
 2ヶ所目も同様に作業します。
 126行目の <div class="sidebar2"> の直後に下記を挿入します。
<!-- width:1024px以下用目次が上部にあるので、そちらも変更し忘れないこと。 -->
<a id="cloneAppendTo"></a> 
</div>
</div>
sakujo3
 次に、177行目の <!-- 右サイドバー(追従)の内容 (トップページ以外のhtmlファイルが対象) width:1025px以上用 ここまで --> の直後に下記を挿入します。
# vi /tmp/insert.txt
sakujo4
<!-- 右サイドバー(追従)の内容 (トップページ以外のhtmlファイルが対象) width:1025px以上用 ここまで -->

# find /file/to/path/ -name "*.htm" | xargs sed -i '/1025px以上用 ここまで/r /tmp/insert.txt'
 sakujo3 から sakujo4 までを削除すれば、下記のようになります。
# find /mnt/inu_html/multi/ -name "*.htm" | xargs sed -e '/sakujo3/,/sakujo4/d'

      <div class="sidebar2">
<!-- width:1024px以下用目次が上部にあるので、そちらも変更し忘れないこと。 -->
  <a id="cloneAppendTo"></a> 
      </div>
    </div>
<!-- 右サイドバー(追従)の内容 (トップページ以外のhtmlファイルが対象) width:1025px以上用 ここまで -->
 ここまでで古い目次は削除され、clone()を利用する方法に置き換わりました。

 次にハンバーガーメニュー用の目次を作成し挿入します。
 抜き出した目次の前後に挿入するためのハンバーガーメニューの挿入用ファイルを用意します。
# vi /file/to/path/insert_1.txt 
<!-- ハンバーガーメニュー ここから -->
  <div class="header-logo-menu">
    <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
  <!-- ハンバーガーメニューの中身 ここから -->
      <div id="nav-content">

# vi /file/to/path/insert_2.txt 
  <!-- ハンバーガーメニューの中身 ここまで -->
    </div>
    <div class="logo-area"></div>
  </div>
<!-- ハンバーガーメニュー ここまで -->
 これらのファイルを抜き出した目次の前後に付加することで、コマンドでハンバーガーメニューの挿入用ファイルが完成します。
 挿入用ファイルをhtmlを11行目の <body> の直後に挿入します。
 すべてのhtmlファイルを置き換えるスクリプト及び挿入用ファイル(4ファイル)は最終的に下記のようになりました。
# vi /file/to/path/insert_1.txt 
<!-- ハンバーガーメニュー ここから -->
  <div class="header-logo-menu">
    <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
  <!-- ハンバーガーメニューの中身 ここから -->
      <div id="nav-content">

# vi /file/to/path/insert_2.txt 
  <!-- ハンバーガーメニューの中身 ここまで -->
    </div>
    <div class="logo-area"></div>
  </div>
<!-- ハンバーガーメニュー ここまで -->


# cat /root/html/insert_3.txt 
  <a id="cloneAppendTo"></a> 
<br />
<br />
  </div>

# vi /root/html/insert_4.txt 
  <a id="cloneAppendTo"></a> 
      </div>
    </div>

# cat /file/to/path/html_change.sh 
#!/bin/bash

DATA=`find /mnt/inu_html/multi -name "*.htm"|xargs grep "sakujo1" 2>/dev/null|awk -F':' '{print $1}'`

# 中間ファイル
TMP_FILE=/tmp/temp.htm

cnt=0
while read line
do
  cnt=`expr $cnt + 1`
  echo "LINE $cnt : $line"
  fn=`basename $line`
  # ボタンメニュー用ファイル
  BUTTON_MENU_FILE=/root/html/${fn}_button_menu.txt
  echo "ファイル名 $cnt : $fn"
  echo "----- button menu content start -----"
  # ----- ボタンメニュー用ファイルの生成 ここから -----
  rm -f $BUTTON_MENU_FILE
  cat /root/html/insert_1.txt > $BUTTON_MENU_FILE
  cat $line|awk '/width:1025px以上用 ここから/,/width:1025px以上用 ここまで/'|sed 1,5d|head -n -3 >> $BUTTON_MENU_FILE
  # ----- ボタンメニュー用ファイルの生成 ここまで -----
  cat /root/html/insert_2.txt >> $BUTTON_MENU_FILE
  echo "----- button menu content end -----" 
# ボタンメニュー挿入直前ファイル生成
  HTML_FILE=/root/html/${fn}
  ORG_HTML_FILE=/mnt/inu_html/multi/${fn}
  sed -e '/sakujo1/,/sakujo2/d' $ORG_HTML_FILE > $TMP_FILE
  sed -e '/sakujo3/,/sakujo4/d' $TMP_FILE > $HTML_FILE
  sed -e '/mokuji/r /root/html/insert_3.txt' $HTML_FILE > $TMP_FILE
  sed -e '/そちらも変更し忘れないこと。/r /root/html/insert_4.txt' $TMP_FILE > $HTML_FILE
  sed -e "/<body>/r $BUTTON_MENU_FILE" $HTML_FILE > $TMP_FILE
  mv $TMP_FILE $HTML_FILE
  chmod 664 $HTML_FILE
  chown root.hoge $HTML_FILE
done <<END
$DATA
END


●sedの利用方法

 参考URL:sedでこういう時はどう書く?

 '#'で始まるコメント行を削除するには
$ sed '/^#/d' test.txt
 空行を削除するには
$ sed '/^$/d' test.txt
 CR+LFをLFにするには
$ sed -i -e 's/\r//g' test.txt
 LFにCRを追加してCR+LFにするには
$ sed -i -e 's/\r//g' test.txt
 1番目に出現した'aaa'を'AAA'に
$ sed -i 's/aaa/AAA/' test.txt
 3番目に出現した'aaa'を'AAA'に
$ sed -i 's/aaa/AAA/3' test.txt
 すべての'aaa'を'AAA'に
$ sed -i 's/aaa/AAA/g' test.txt
 'Linux LINUX linux' をすべて'リナックス'に置換するには
$ sed -i 's/(Linux|LINUX|linux)/リナックス/g' test.txt

#もしくは末尾に大文字小文字無視のiをつけてもよい
$ sed -i 's/linux/リナックス/gi' test.txt
 該当フォルダ内のすべてのhtmlファイルに対し、からまでを削除するには
下記4行を削除したい
---------- ここから ----------
</td>
</tr>
</table>
</body>
---------- ここまで ----------

$ find /path/to/file/ -name "*.html" | xargs sed -i /^'<\/td>'$/,/^'<\/body>'$/d
 該当フォルダ内のすべてのhtmlファイルに最終行の一行前に </body> を追加するには
# find /path/to/file/ -name "*.html" | xargs sed -i '$ i </body>'
 該当フォルダ内のすべてのhtmlファイルの最終行を下記のように変更するには
---------- ここから ----------
(・・・任意の文字列・・・)
</body>
</html>
 ↓↓↓
(・・・任意の文字列・・・)
<br />
<br />
<!-- フッター ここから -->
  <div id="footer">
    <div class="center">当サイトへのリンクはフリーです。ご自由にリンクを張っていただいて構いません。</div>
  </div>
<!-- フッター ここまで -->
</body>
</html>

footer.txtの内容
<br />
<br />
<!-- フッター ここから -->
  <div id="footer">
    <div class="center">当サイトへのリンクはフリーです。ご自由にリンクを張っていただいて構いません。</div>
  </div>
<!-- フッター ここまで -->
---------- ここまで ----------

 3回に分けて作業します。

 1回目の作業(</body>行の直後にfooter.txtの内容を追加)
# find /path/to/file/ -name "*.html" | xargs sed -i '/<\/body>/r /path/to/file/footer.txt'
 2回目の作業(</body>行を削除)
# find /path/to/file/ -name "*.html" | xargs sed -i /'<\/body>'/d
 3回目の作業(最終行の一行前に</body>を追加)
# find /path/to/file/ -name "*.html" | xargs sed -i '$ i </body>'
 以上となります。