複数ページのHTMLを一括修正

webサイトの更新作業や修正作業を行っていると、サイトの全ページの共通した部分を修正したい、という要望が時々出てきます。

WordPressやMovableTypeのようなCMS(コンテンツマネージメントシステム)を導入していれば、該当するテンプレートを修正するだけで、全ページに変更が反映されますが、静的なHTML(普通に作ったHTMLファイル)の場合、1ページずつ変更する必要があります。

十ページ程度であれば、HTMLファイルを開いて該当箇所を修正、という作業も出来ますが、数十ページを超えるサイトになると、時間効率的にも厳しいものがあります。

そこで、便利なのが、一括置換ソフト。

指定したフォルダ内の該当するテキストやHTMLソースを一括で置換してくれる便利なソフトです。

目次

1.一括置換ソフト

「一括置換ソフト」で検索すると、色々出てきますが、webサイトの修正作業で使う上では、以下のような機能が必要です。

  • 文字コード・改行コード指定
  • 下層フォルダ横断検索・置換
  • フィルタ、拡張子選択

まず、元のファイルの文字コードと別の文字コードで置き換えをしてしまうと、文字化けなどの不具合が発生するので、文字コードや改行コードを選択出来るソフトのほうが便利です。

また、下層フォルダまで検索し、置き換えしてくれるソフトのほうが、手間が省けるので、この機能も必要。

さらに、拡張子で除外設定出来たり、フィルタを使って限定出来る機能もあると便利。htmlファイル以外のphpやcgiなど、置き換えたくないものを除外することも出来るので、除外設定出来るものが良いでしょう。

GrepRepalce

上記のような機能が全て入っているWindows版ソフト。

長年、使っておりますが、特に不具合が出たことはありません。

バージョンアップが2007年で止まっているのと、レビューでの不具合報告があるので、ご利用は自己責任で。

TextSS.net

日本語以外にも中国語、韓国語の置き換えにも対応しているWindows版ソフト。

直近にも更新されているのでGrepReplaceで不具合の出る方にはオススメです。

TextWrangler

Mac向けの一括置換ソフト。

ソフト内のメニューが英語のみである難点はあります。

DreamWeaver

web制作にDreamWeaverを使っているなら、DreamWeaverでも一括置換が可能です。フォルダ指定なども出来ます。

2.置き換え方

検索する文字列

テキストやHTMLソースを置き換えする際、ページ内で何回か使われている単語を全て置き換える場合は単語で検索し置き換えれば良いですが、そのうちの一箇所だけ変更したい場合には注意が必要。

その単語以外の前後のHTMLタグなども含めて検索し、置き換えるようにします。

例えば、○○○という単語がページ内で何回か出て来るけれども、<div id=”aaa”>○○○</div>だけ△△△に置き換えたい場合、「<div id=”aaa”>○○○</div>」で検索し、「<div id=”aaa”>△△△</div>」に置き換えることになります。

この方法で行えば、<div id=”bbb”>○○○</div>の「○○○」は置き換えられず、div id=”aaa”の「○○○」だけ置き換えられます。

この時、一つのページ内で重複する箇所がないような形で検索するのがポイントです。

HTMLにタグを追加

置き換えではなく、全ページにタグを追加する場合にも、一括置換ソフトが使えます。

例えば、<head>直下にタグを追加する場合、
「<head>」
で検索し、

<head>
<!–追加するタグ–>

というような形で置き換えれば、全ページの<head>直下にタグを一括で挿入することが可能です。

この時も、一つのページ内で重複のないようなテキストの範囲を指定し、検索することが重要です。

3.注意点

一括でHTMLファイルを修正、変更する際に気をつけておくべき点が何点かあります。

文字コード・改行コード

HTMLファイルを記述している文字コードや改行コード、保存している文字コード・改行コードが間違っていると、文字化けが発生することがあります。

HTMLで指定されている文字コードと保存されている文字コードが違っている場合なども文字化けが発生することがありますので、ファイルの文字コードを確認しながら、置き換えしましょう。

バックアップは取りましょう

文字コード以外にも、指定範囲の間違いなどで、消してはいけないタグを消してしまったり、どこを修正したか分からなくなってしまったりすることがあります。

一括で複数のファイルを修正出来るメリットはありますが、間違った指示も一括で行えてしまうので、必ず修正前のバックアップは取っておきましょう。

  • バックアップ用フォルダと作業用フォルダを分ける
  • ローカルで作業し、動作確認出来てから、サーバーにアップロードする

など、いくつか方法はありますので、やりやすい方法でバックアップをしてください。

まとめ

更新作業やメンテナンスしやすいwebサイトを作るにはCMSを利用するのが一番ですが、いろんな条件によって、静的なHTMLで作成しなければならない場合もあります。

また、引き継いだwebサイトが静的HTMLで作成されている場合もあるので、そんな時には、一括置換ソフトを活用すると、修正作業の時短になります。

ただ、紹介しているソフトなどはフリーソフトなので、不具合の出る可能性もありますので、バックアップを取りつつ、ご自身の責任で利用してください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ホームページの専門家。有限会社TY Planning取締役ウェブコンサルタント/ウェブデベロッパー/専門学校講師/上級ウェブ解析士。

2001年からウェブ業界に携わり、2002年に独立。2006年法人化。
ウェブデザインやコーディング、CMSなどの制作業務から、ウェブ解析、ウェブサイト構築・運用のコンサルテーション、広告運用代行など、ウェブに関する多様な要望に幅広く対応。
また、制作や集客だけではなく、運用・保守など全ての業務を俯瞰した視点での改善提案やアドバイザリーを行っています。
CSS NiteやWordCamp、BAU-YAなどのセミナーやイベントにも、多数登壇。企業研修やマンツーマンレッスン、ブログやSNS、YouTubeでの情報発信など、「ウェブを育てる」知識の教育活動にも意欲的に参加しています。

コメント

コメント一覧 (1件)

  • 吉田哲也さま

    はじめまして!岸本と申します。
    html5でお客様のサイト管理をしております。
    一括変換情報助かりました!

    「TextSS.net」を使いました。
    更新は2013年までのようですが、十分使えました。
    ありがとうございました

コメントする

CAPTCHA


目次