※この記事は2013年7月10日に執筆された記事です。現在は仕様が異なる可能性があります。
大変です！
あなたは、公開間近でクライアントから少々面倒な修正依頼を頂きました。
対応したいのですが、大型案件の為、納品するページ数は膨大にあり、該当する箇所がどれほどあるのか想像がつきません。
さて、この場合どのような対応がベストでしょうか？
今回は、ベストな対応をしたい方の為に便利な正規表現の使い所をご紹介します。
公開間近でクライアントからこんな修正依頼が、、、
クライアントから下記の修正依頼を頂きました。
該当するページ数は未だ不明ですが、調査対象は明日公開予定の膨大な数のHTMLファイルです。
2. 「しております」「してます」を「しています」に統一
3. 外部リンクのaタグは別窓指定
4. 素材と販売元の行を入れ替える
5. 最後のliタグだけクラスlastを付加
こんな時、あなたならどうしますか？
考えられる対応方法を下記にリストアップしました。
どの選択肢もあまり気分が良くないですね。。。
- 公開前に全ページ修正するのはリスクが大きいので、優先的に修正が必要なページを選定し、一先ずそれだけ対応
- 周囲を巻き込み、徹夜で作業をしてなんとか間に合わせる
- 無理なお願いだということで、修正依頼を断る
魔法のように一瞬で修正できたらいいのに
魔法ではありませんが、修正自体は一瞬で出来る方法があります。
それは『正規表現』を使った方法です。
今回紹介する正規表現を使えば、手作業で修正するより、はるかに短時間で、ミスのリスクも少なく効率的に対応する事が出来ます。
正規表現を使って検索をかければ該当箇所やページ数を把握出来るので、公開に間に合うかどうかの判断も出来ます。
正規表現は、エンジニアは勿論、ディレクターやブロガー等、資料や記事を作成している方も十分に活用する機会があるので必見です。
後半でクライントからの修正依頼をもとに、実際に正規表現を使用して対応する方法を紹介していきますので、是非お試し下さい。
正規表現とは
正規表現は検索したい部分の特徴をパターン化し、特有の記号で表現する仕組みです。
また、パターンにマッチする部分を検索し、他の文字列に置換する事が出来ます。
▼正規表現とはこのような特有の記号を組み合わせたもの
・ Dreamweaverは下記で記載している置換文字の\（半角バックスラッシュ）を$（半角ドル記号）に置き換えて作業をして下さい
検索文字に使う特殊文字と正規表現
| 例 | 説明 |
|---|---|
| * | 0回以上の繰り返し |
| ? | 0回か1回の繰り返し |
| *? | 0回以上の繰り返しで最短一致 |
| \s | 空白 |
| \S | 空白以外 |
| \d | 数字 |
| \b | 単語の区切り |
| \t | tab |
| \n | 改行 |
| (A) | グループ化 |
| (A|B) | AかB |
| {7} | 7回の繰り返し |
| {7,} | 7回以上の繰り返し |
| {3,7} | 3回から7回の繰り返し |
| [ABC] | AかBかC |
| [^ABC] | AでもBでもCでもない |
| [c-f] | cからfまでのアルファベット |
| [2-9] | 2から9までの数字 |
| \ | エスケープ文字（メタ文字を文字として認識させる為に用います） |
置換文字に使う特殊文字と正規表現
| 例 | 説明 |
|---|---|
| \n | n番目のキャプチャ |
実際に正規表現を使い、クライアントからの修正依頼に対応！
先ずはエディタを起動して正規表現が使えるように
では早速、正規表現を使う為にエディタを起動しましょう。
文字列の検索/置換を行う機能があるエディタは、正規表現をサポートしている製品が多いです。
Mac用のテキストエディタであるCotEditorとWebオーサリングツールのDreamweaverを例に、使い方をご説明します。
CotEditorとDreamweaverでは下記の場所にチェック入れると、正規表現を使用する事が出来ます。
▲CotEditor
▲Dreamweaver
修正するデータの確認
クライアントからの依頼内容を覚えていますか？
その修正依頼をされている対象のソースを一部、下記に抜粋しましたので、起動したエディタにコピペして下さい。
- 商品1
-
- 価格：¥2,000
- 素材：こちらの商品はAを使用しております
- 販売元：㈱ビーワークス
- 商品2
-
- 価格：¥21,000
- 素材：こちらの商品はBを使用しています
- 販売元：WebNAUT Markup
- 商品3
-
- 価格：¥700
- 素材：こちらの商品はCを使用してます
- 販売元：WebNAUT Direction
- 商品4
-
- 価格：¥10
- 素材：こちらの商品はCを使用しております
- 販売元：㈱ビーワークス
いざ実践！
では、下記のフローで実践してみましょう。
- コピペしたファイルに対して検索窓を立ち上げる
- 検索文字と置換文字を検索窓の検索と置換のそれぞれのテキストボックスにコピペする
- 入力完了後、CotEditorをお使いの方は「一括置換」のボタンを押して、修正がされていることを確認したら次に進む
1 ¥を円の表記に統一（¥9,000→9,000円）
CotEditorをお使いの方は、検索窓 左下にある「詳細設定」からエスケープ文字を\（バックスラッシュ）に設定して下さい。
▼検索文字
¥(\d{1,3}(,\d{3})*)\b
▼置換文字
\1円
2 「しております」「してます」を「しています」に統一
▼検索文字
しております|してます
▼置換文字
しています
3 外部リンクのaタグは別窓指定
ここで指している外部リンクとは、ルート相対パス以外のURIとします。
▼検索文字
()
▼置換文字
\1 target="_blank"\2
4 素材と販売元の行を入れ替える
▼検索文字
(▼置換文字
\3\2\1
5 最後のliタグだけクラスlastを付加
ここで指している最後のliタグとはulタグ内の3番目のliタグの事です。
▼検索文字
(- ([\s\S]*?
- [\s\S]*? [\s\S]*?
▼置換文字
\1 class="last"\3
修正依頼は対応出来ましたか？
下記に置換処理後のソースコードを置きましたのでご確認下さい。
▼置換処理後のソースコード
- 商品1
-
- 価格：2,000円
- 販売元：㈱ビーワークス
- 素材：こちらの商品はAを使用しています
- 商品2
-
- 価格：21,000円
- 販売元：WebNAUT Markup
- 素材：こちらの商品はBを使用しています
- 商品3
-
- 価格：700円
- 販売元：WebNAUT Direction
- 素材：こちらの商品はCを使用しています
- 商品4
-
- 価格：10円
- 販売元：㈱ビーワークス
- 素材：こちらの商品はCを使用しています
膨大にあるHTMLファイルを相手に、正規表現を使わず修正しようとすると気が遠くなります。
ある程度検索したい部分の特徴をパターン化出来るのであれば、Dreamweaverのような高機能なエディタは、検索対象のファイルをディレクトリごと指定出来るので、修正自体は一瞬で終わります。
こんな便利のものを使わない理由はありませんよね？
便利な使い方を少しだけ伝授！
素材と販売元の行を入れ替える修正対応で使用した正規表現を参考に仕組みを理解してみましょう。
1 検索文字でグループ化
丸括弧で囲む事でグループ化します。
何の為にグループ化するかは後のお楽しみ。
▼検索文字
2 対象のテキストデータがグループ化される
正規表現でグループ化を命令したので、置換対象のデータが下記のように検索文字とマッチします。
▼置換対象のテキストデータ
3 置換文字で入れ替える順番を命令
ここでグループ化が活かされます。
下記ではグループ化された1番目と3番目を入れ替えるようエディタに命令しています。
▼置換文字
4 置換完了！
置換文字に従って文字列が入れ替わります。
▼置換後のテキストデータ
まとめ
正規表現を使い機械的な作業を効率的に行う事で、人間が手を加えるべき箇所に注力出来るようになるので、納品物の品質向上につながります。
今回は非エンジニア向けにざっくりと正規表現の使い方を説明しましたが、更に詳しく正規表現の仕組みを理解し慣れる事で、特にエンジニアは応用する場が増え、正規表現の本来の力を発揮します。
正規表現で業務効率の改善を図り、アフターファイブを楽しみましょう。