※この記事は2013年7月10日に執筆された記事です。現在は仕様が異なる可能性があります。
大変です！
あなたは、公開間近でクライアントから少々面倒な修正依頼を頂きました。
対応したいのですが、大型案件の為、納品するページ数は膨大にあり、該当する箇所がどれほどあるのか想像がつきません。
さて、この場合どのような対応がベストでしょうか？
今回は、ベストな対応をしたい方の為に便利な正規表現の使い所をご紹介します。
クライアントから下記の修正依頼を頂きました。
該当するページ数は未だ不明ですが、調査対象は明日公開予定の膨大な数のHTMLファイルです。
考えられる対応方法を下記にリストアップしました。
どの選択肢もあまり気分が良くないですね。。。
魔法ではありませんが、修正自体は一瞬で出来る方法があります。
それは『正規表現』を使った方法です。
今回紹介する正規表現を使えば、手作業で修正するより、はるかに短時間で、ミスのリスクも少なく効率的に対応する事が出来ます。
正規表現を使って検索をかければ該当箇所やページ数を把握出来るので、公開に間に合うかどうかの判断も出来ます。
正規表現は、エンジニアは勿論、ディレクターやブロガー等、資料や記事を作成している方も十分に活用する機会があるので必見です。
後半でクライントからの修正依頼をもとに、実際に正規表現を使用して対応する方法を紹介していきますので、是非お試し下さい。
正規表現は検索したい部分の特徴をパターン化し、特有の記号で表現する仕組みです。
また、パターンにマッチする部分を検索し、他の文字列に置換する事が出来ます。
▼正規表現とはこのような特有の記号を組み合わせたもの
| 例 | 説明 |
|---|---|
| * | 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
クライアントからの依頼内容を覚えていますか？
その修正依頼をされている対象のソースを一部、下記に抜粋しましたので、起動したエディタにコピペして下さい。
<dl> <dt>商品1</dt> <dd> <ul> <li>価格：¥2,000</li> <li>素材：こちらの商品はAを使用しております</li> <li>販売元：<a href="http://www.beeworks.co.jp/">㈱ビーワークス</a></li> </ul> </dd> </dl> <dl> <dt>商品2</dt> <dd> <ul> <li>価格：¥21,000</li> <li>素材：こちらの商品はBを使用しています</li> <li>販売元：<a href="/markup/">WebNAUT Markup</a></li> </ul> </dd> </dl> <dl> <dt>商品3</dt> <dd> <ul> <li>価格：¥700</li> <li>素材：こちらの商品はCを使用してます</li> <li>販売元：<a href="/direction/">WebNAUT Direction</a></li> </ul> </dd> </dl> <dl> <dt>商品4</dt> <dd> <ul> <li>価格：¥10</li> <li>素材：こちらの商品はCを使用しております</li> <li>販売元：<a href="http://www.beeworks.co.jp/">㈱ビーワークス</a></li> </ul> </dd> </dl>
では、下記のフローで実践してみましょう。
CotEditorをお使いの方は、検索窓 左下にある「詳細設定」からエスケープ文字を\（バックスラッシュ）に設定して下さい。
▼検索文字
¥(\d{1,3}(,\d{3})*)\b▼置換文字
\1円
▼検索文字
しております|してます
▼置換文字
しています
ここで指している外部リンクとは、ルート相対パス以外のURIとします。
▼検索文字
(<a>)
▼置換文字
\1 target="_blank"\2
▼検索文字
(<li>素材：[\s\S]*?</li>)([\s\S]*?)(<li>販売元：[\s\S]*?</li>)
▼置換文字
\3\2\1
ここで指している最後のliタグとはulタグ内の3番目のliタグの事です。
▼検索文字
(<ul>([\s\S]*?<li>[\s\S]*?</li>[\s\S]*?</ul>)
▼置換文字
\1 class="last"\3
下記に置換処理後のソースコードを置きましたのでご確認下さい。
▼置換処理後のソースコード
<dl> <dt>商品1</dt> <dd> <ul> <li>価格：2,000円</li> <li>販売元：<a href="http://www.beeworks.co.jp/" target="_blank">㈱ビーワークス</a></li> <li class="last">素材：こちらの商品はAを使用しています</li> </ul> </dd> </dl> <dl> <dt>商品2</dt> <dd> <ul> <li>価格：21,000円</li> <li>販売元：<a href="/markup/">WebNAUT Markup</a></li> <li class="last">素材：こちらの商品はBを使用しています</li> </ul> </dd> </dl> <dl> <dt>商品3</dt> <dd> <ul> <li>価格：700円</li> <li>販売元：<a href="/direction/">WebNAUT Direction</a></li> <li class="last">素材：こちらの商品はCを使用しています</li> </ul> </dd> </dl> <dl> <dt>商品4</dt> <dd> <ul> <li>価格：10円</li> <li>販売元：<a href="http://www.beeworks.co.jp/" target="_blank">㈱ビーワークス</a></li> <li class="last">素材：こちらの商品はCを使用しています</li> </ul> </dd> </dl>
膨大にあるHTMLファイルを相手に、正規表現を使わず修正しようとすると気が遠くなります。
ある程度検索したい部分の特徴をパターン化出来るのであれば、Dreamweaverのような高機能なエディタは、検索対象のファイルをディレクトリごと指定出来るので、修正自体は一瞬で終わります。
こんな便利のものを使わない理由はありませんよね？
素材と販売元の行を入れ替える修正対応で使用した正規表現を参考に仕組みを理解してみましょう。
丸括弧で囲む事でグループ化します。
何の為にグループ化するかは後のお楽しみ。
▼検索文字
正規表現でグループ化を命令したので、置換対象のデータが下記のように検索文字とマッチします。
▼置換対象のテキストデータ
ここでグループ化が活かされます。
下記ではグループ化された1番目と3番目を入れ替えるようエディタに命令しています。
▼置換文字
置換文字に従って文字列が入れ替わります。
▼置換後のテキストデータ
正規表現を使い機械的な作業を効率的に行う事で、人間が手を加えるべき箇所に注力出来るようになるので、納品物の品質向上につながります。
今回は非エンジニア向けにざっくりと正規表現の使い方を説明しましたが、更に詳しく正規表現の仕組みを理解し慣れる事で、特にエンジニアは応用する場が増え、正規表現の本来の力を発揮します。
正規表現で業務効率の改善を図り、アフターファイブを楽しみましょう。
記事を読んで興味を持った方、
ビーワークスの考え方に共感した方、
一緒に新しいデザイン、創りませんか？
日々、制作実績を更新中！
ビーワークスの多様な実績をぜひご覧ください。
