Javascriptの正規表現の作成・検証にDreamweaverのライブビューが役に立った話

そういえば、1ft-seabass.jp.MEMO – WordPressプラグイン Custom Field GUI Utility で選択画像投稿時に縦横サイズに応じたファイルパスにするでJavascriptの正規表現の作成・検証をしたのですが、にDreamweaverのライブビューが役に立った話です。

まあタイトルで終わっちゃったような話ではあるのですが、書いておきます。

文中で使った正規表現

// 縦と横のサイズ抽出
var thumb_regexp = /\d+/ig;  // 数字のみをマッチさせる正規表現(簡易実装)

これなんですが、「360×240」といった文字から配列で360と240で分けて抽出できる正規表現なのですがこれに至るまでに色々試行錯誤がありました。

はじめはブラウザでプレビューして確認

はじめはブラウザでプレビューして確認してました。テキストエディタ(TeraPad)で書き換えて→ブラウザでプレビュー→うまくいかない→(繰り返し)です。
しかしこれだとブラウザを押しに行く時間が面倒なのと、テキストエディタで書き換えるのも、だんだんだるくなってきました。

いかん、いかんぞ。

PHPだとこんなのがある

そんな中、PHPだと正規表現のチェックに以下のサイトのようにリアルタイムで検証できる所があり、大変便利だったのを思い出した。

PHP正規表現チェッカー

どうにかならないものか

とりあえず、自分の勉強とはいえテキストエディタでHTML直してやるほど正規表現は軽めの作業ではないことは気づいたので、Dreamweaverで作成・検証開始。

しかしこれでもブラウザにプレビューしにいくのは億劫。あー、PHPでやるよりもなんか大変だ。

そこで目をつけたのが、Dreamweaverライブビュー

そこで目をつけたのが。Dreamweaverライブビュー。「編集できないビューとして、より正確にレンダリングできる」とのことで便利そう!

Adobe Dreamweaver CS4 * Dreamweaver 上でのページのプレビュー

ライブビューについて
ライブビューが従来の Dreamweaver デザインビューと異なる点は、実際のブラウザ上にページが表示される様子を、編集できないビューとして、より正確にレンダリングできることです。ライブビューは > [ブラウザでプレビュー] コマンドの代わりではなく、ブラウザ上で実際に表示される際の “ライブ” 状態を Dreamweaver ワークスペースの外に出ることなく確認するための、もう 1 つの表示方法です。

というわけで使ってみます。まずは画面を「分割」に設定します。
これだけだとライブビューがOFFなのでJavascriptの結果は反映されませんよね。

ライブビューは上部のライブビューボタンをONにします。

すると、これでリアルタイムにしかもDreamweaver内だけで検証できるようになりました。

プレビューにはワンクリックする必要はありますがそれでも自分にとっては格段の進歩。
この環境を整えてから制作の速度が格段に上がって無事に上記の正規表現に至ることが出来ました。

ライブビューはWebkitでできている

EclipseなどでWEBプレビューをする場合は、ブラウザを選べるか、しれっとIE固定だったりするのですが、DreamWeraverライブビューはどうなっているのでしょう。

どうやら以下のサイトを拝見したところ、Webkitエンジンを使っているようです。

Dreamweaverのさまざまなプレビュー – 『効率的なサイト制作のためのDreamweaverの教科書』サポートブログ

CSS3で書いたドラえもんをDreamweaver CS5のライブビューで見てみた。 – dwlog.net

おわりに

Webkitなのでメジャーブラウザの検証が正確にできるわけではないですが、JSでも挙動が共通している正規表現や簡単な見た目の確認には十分なDreamWeraverライブビュー。いかがでしたでしょうか。

それでは、よいJavascript Regexp Lifeを。