アクセシビリティ

Dreamweaver記事

 

Dreamweaver使いのための「生活に役立つ小ネタ集」


林 岳里

林 岳里（はやし たけさと）

アドビ システムズ株式会社
ビジネスデベロップメントマネージャー

作成日:
2008年３月19日
ユーザレベル:
初心者, 中級
製品:
Dreamweaver CS3

はじめに

Dreamweaverを長年使っている方でも意外と知らないまま過ごしている機能があります。その機能を知らなくても自力で解決できるかもしれませんが、もし知っていたらどうでしょうか？なんども検索/置換を繰り返すことや、数多くあるHTMLファイルのコードを手作業でフォーマットする面倒な作業から解放され、他の作業に時間を割けるようになります。Dreamweaver使いのための「生活に役立つ小ネタ集」と題して、コードのフォーマット、検索/置換、正規表現を解説します。なお、[検索および置換]で行う設定はクエリーの保存/ロードで読み書きできます。サンプルに同梱している拡張子.dwrのクエリーファイルを読み込んでトライしてみましょう。

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Dreamweaver CS3

Dreamweaver CS3 全角・半角変換拡張機能

サンプルファイル

TIPS 1： タグの大文字にさようなら

長年コンテンツが追加され続けてきたWebサイトによくあるのが、下記のようなタグの大文字と小文字の混在です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>コードフォーマット：タグの大文字にさようなら</title>
</HEAD>
<BODY>
<h1>■コードフォーマット：タグの大文字にさようなら</h1>
<h2>タグの大文字と小文字が混合しているHTMLファイル。大文字のタグをすべて小文字に統一するには？</h2>
<h3>変換前はHEADとBODYのタグが大文字です。</h3>
</BODY>
</html>

HTMLファイル全てのタグや属性の記述を小文字にしなければならなくなったらどうすればいいでしょうか？手で書き換えるとなると大変ですが、コードフォーマットを使えばファイルを開けば自動的に大文字/小文字の変換ができます。

  • 手順1：編集メニュー>環境設定>カテゴリからコードフォーマットを選択します。
  • 手順2：タグの大文字/小文字：<小文字>に設定します。
  • 手順3：属性の大文字/小文字：小文字=”value”に設定します。
  • 手順4：常に無視する:[タグの大文字・小文字]と[属性の大文字・]小文字]をチェックします。

コードフォーマット

  • 手順5：　[OK]をクリックして環境設定を閉じれば設定完了。

この状態で、タグが混在したHTMLファイルを開けばDreamweaverが自動的に大文字のタグと属性を小文字に変換します。ファイルを上書き保存すれば完了です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>コードフォーマット：タグの大文字にさようなら</title>
</head>
<body>
<h1>■コードフォーマット：タグの大文字にさようなら</h1>
<h2>タグの大文字と小文字が混合しているHTMLファイル。大文字のタグをすべて小文字に統一するには？</h2>
<h3>変換前はHEADとBODYのタグが大文字です。</h3>
</body>
</html>

TIPS 2： 選択範囲を指定して、テキスト検索/置換

ページの全文を検索/置換するのでなく、必要な個所だけを修正するときに便利なのが自分で選択範囲を選択できる検索対象：選択したテキストです。では、マウスでテキストを選択して検索してみましょう。

手順1：検索/置換したい個所をマウスで選択します。（デザインビューでもコードビューでもOK）

検索/置換したい個所をマウスで選択します。

手順2：編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。

手順3：検索対象が[選択したテキスト]になっているのを確認してから、[すべて検索]をクリックします。（検索の中に選択したテキストが挿入されるので、必要に応じて書き換えます。例では「視覚的」と入力しています。）

検索および置換

手順4：検索結果が[結果]パネルの[検索]に表示されます。該当箇所のテキストは赤いアンダーラインが表示されます。ダブルクリックするとデザインビューやコードビューの該当テキストをハイライトします。

検索対象

TIPS 3： alt属性をすべてのimgタグにつける

<img src="sample-01.jpg" width="320" height="240" />
<img src="sample_02.jpg" alt="サンプルの画像です" width="320" height="240" />
<img src="sample_03.jpg" width="320" height="240" />

手順1：編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。

手順2：検索対象を[現在のドキュメント]に設定します。

手順3：検索：[特定のタグ]に設定し、タグ名をimgと記入します。

手順4：[+]ボタンをクリックし、条件を追加します。

手順5：プルダウンメニューから[属性なし]を設定し、属性名をaltと記入します。

手順6：アクション： [属性を設定]を設定し、属性名をaltと記入します。

手順7：設定が完了したので[すべて置換]をクリックして実行します。

検索/置換

手順8：これで完了です。すべてのimgタグにalt属性が設定されました。検索結果が[結果]パネルの[検索]に表示されます。該当箇所のテキストは赤いアンダーラインが表示されます。ダブルクリックするとデザインビューやコードビューの該当テキストをハイライトします。

検索/置換

TIPS 4： コードのインデントを揃える（タブで設定する場合）

タブでインデントが設定されていないコードを、設定に従ってインデントを設定する場合どうすればいいでしょうか？下記のようなインデントが設定されていないコードを変換してみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquo Events</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>■コードフォーマットでタグのインデントを設定</h1>
<h2>タインデントが全くつけられていないソースコード。綺麗にインデントを設定するには？</h2>
</div>
<div id="mainContent">
<h3>手作業でインデントを設定するのはNGとします。</h3>
</div>
</div>
</body>
</html>

手順1：編集メニュー>環境設定>カテゴリからコードフォーマットを選択します。

手順2：インデント：チェックボックスをチェックし、[タブ]を選び、インデントサイズは2（半角英数字）を記入して[OK]ボタンを押します。これでDreamweaverのコードフォーマットの設定が完了しました。

コードフォーマット

手順3：つづいてドキュメントウィンドウをデザインビューにし、ショートカットキーを使って（Windowsの場合はCtrl + Aで、Macintoshの場合はCmd + A）すべて選択します。この時、bodyタグ以下のすべてのコンテンツを選択する必要があるので、タグが入り組んでいる場合はドキュメントウィンドウの下部にあるステータスバーの表示が<body>のすぐ下の階層のタグが表示されるまですべて選択するショートカットを押します。下記の図では、<body>の次の<div#container>が選択されるまで、すべて選択しています。

デザインビュー

手順4：すべて選択できたらコンテンツをカットします（Windowsの場合はCtrl + Xで、Macintoshの場合はCmd + X）。

手順5：つづいて、コンテンツを同じドキュメントに貼り付けします（Windowsの場合はCtrl + Vで、Macintoshの場合はCmd + V）。

手順6：以上で終了です。ドキュメントウィンドウをコードビューすると、タグがインデントされているのが確認できます。

コードビュー

TIPS 5：ばらばらだったコピーライト表記を一括で書き換える

新年を迎えたとき、Webサイトを見ていてふと目につくのがコピーライトの表記。昨年のものあるとしても、かなり古いまま放置されているページもありますよね？下記のようなバラバラの表記を一気に書き換える方法はどうすればいいでしょうか？ここでは、[検索および置換]のオプションである[正規表現を使用]をチェックしてみましょう。

[正規表現を使用]

手順1：編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。

手順2：検索対象を[現在のドキュメント]に設定します。

手順3：検索：[ソースコード]に設定します。

手順4：検索：コードCopyright &copy; (\d+) 記入します。

手順5：置換：Copyright &copy; 2008　と記入します。

手順6：オプション：[正規表現を使用]を設定し、[すべて置換]をクリックして実行します。

検索および置換

手順7：変換作業が終わると、下記のようにすべてのCopyright表記が置換されます。

Copyright表記の置換

今回はじめて出てきた正規表現Copyright &copy; (\d+)いう表記では、(\d+) の部分で数字の一回以上の繰り返しという意味を持たせています。 正規表現についての説明は長くなってしまうのでDreamweaverのヘルプにある「正規表現について」や専門書に譲ることにしますが、正規表現を使うことでより高度な検索が可能になります。正規表現の使い方はプログラマーに相談してみるのもいいと思います。

正規表現について

TIPS 6：西洋数字の年月日記述を西暦, 月, 日に一括で書き換える

1999/1/1という数字とスラッシュによる年月日の記述を1999年1月1日のように書き換えるにはどうすればいいでしょうか？ここでも先ほどの正規表現に活躍してもらいましょう。

手順1：編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。

手順2：検索対象を[現在のドキュメント]に設定します。

手順3：検索：[テキスト]に設定します。

手順4：検索：コード (\d+)/(\d+)/(\d+) と記入します。

手順5：置換：$1年$2月$3日　と記入します。

手順6：オプション：[正規表現を使用]を設定し、[すべて置換]をクリックして実行します。

検索および置換

手順7：変換作業が終わると、下記のようにすべての年月日に表記が置換されます。

年月日に表記が置換

(\d+)/(\d+)/(\d+)という表記では、(\d+) の部分で数字の一回以上の繰り返しを（）でくくって、スラッシュで分けています。$1年$2月$3日では、最初に検索で処理された数字を$1に挿入、その次を$2に挿入、その次を$3に挿入しています。検索結果にそれぞれ年、月、日を記入することで完成します。

TIPS 7：受け取った関連サイトのURLデータが全角英数字だった場合

クライアントから受け取った関連サイトのURLリストが下記のような全角英数字のリストで、しかもaタグでリンクを貼った状態でページを至急アップしなければならない！という場合、あなたはどうしますか？ そんな場合は「全角・半角変換拡張機能」と組み合わせて簡単に対処しましょう。（事前にhttp://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_conversion_ext.html から拡張機能をダウンロードし、インストールしておきます）

●関連サイトのURLリスト

ｈｔｔｐ：／／ｗｗｗ．ａｄｏｂｅ．ｃｏｍ／
ｈｔｔｐ：／／ｗｗｗ．ａｄｏｂｅ．ｃｏｍ／ｊｐ／
ｈｔｔｐ：／／ｗｗｗ．ａｄｏｂｅ．ｃｏｍ／ｊｐ／ｄｒｅａｍｗｅａｖｅｒ／
ｈｔｔｐ：／／ｗｗｗ．ａｄｏｂｅ．ｃｏｍ／ｊｐ／ｆｌａｓｈ／
ｈｔｔｐ：／／ｗｗｗ．ａｄｏｂｅ．ｃｏｍ／ｊｐ／ｆｉｒｅｗｏｒｋｓ／
ｈｔｔｐ：／／ｗｗｗ．ａｄｏｂｅ．ｃｏｍ／ｊｐ／ｃａｐｔｉｖａｔｅ／

手順1：URLのリストをHTMLに全角の状態でそのまま貼り付けます。

正規表現

手順2：コマンドメニュー>機種依存・全角半角の変化でのウィンドウを表示します。

手順3：[全角数字を半角数字に変換]と[半角数字を全角数字に変換]のチェックボックスをクリックして[OK]ボタンを押します。これでURLが全て半角英数字になります。

機種依存・全角半角の変換

手順4：つづいて、URLをaタグでリンクを貼ります。

手順5：編集メニュー>検索/置換で、[検索および置換]のウィンドウを表示します。

手順6：検索対象を[現在のドキュメント]に設定します。

手順7：検索：[ソースコード]に設定します。

手順8：検索： (\https?://[0-9a-zA-Z,;:~&=@_'%?+\-$.!*()/]+\/) と記入します。

手順9：<a href="$1">$1</a>　と記入します。

手順10：オプション：[正規表現を使用]を設定し、[すべて置換]をクリックして実行します。

検索および置換

手順11：変換作業が終わると、下記のようにすべてのURLにaタグのリンクが付加されます。

検索および置換

(\https?://[0-9a-zA-Z,;:~&=@_'%?+\-$.!*()/]+\/)という表記では、URLの表記を検索します。<a href="$1">$1</a>ではaタグのリンク先に検索結果のURLを挿入し、リンクが完成します。

まとめ

後半の正規表現の部分、実は私も最初は手こずりました。プログラマーで正規表現に慣れている方ならすぐにわかるのですが、初めての方にはちょっと敷居が高いと思います。まずはDreamweaverの[検索および置換]はどんなことができるのか？を理解するところから始めてみてはいかがでしょうか？ヘルプを見ないで苦労している人を多々見かけるのですが、ヘルプに多くのヒントやサンプルが記載されているので、「迷ったらヘルプを見る！」が私からのアドバイスです。検索結果、とくに正規表現を使ったクエリーは一文字違うと意味がなくなるので、良い検索ができたらまめにクエリーを保存する習慣にするといいでしょう。日々の作業がほんの少しでも楽になれば幸いです。

著者について

林 岳里（はやし たけさと）

アドビ システムズ株式会社 ビジネスデベロップメントマネージャー
マクロメディア株式会社にてテクニカルエバンジェリストとして Dreamweaver を含む多くの製品の普及に従事。
現在はアドビ システムズ株式会社にてビジネスデベロップメントマネージャーとして、Web と Video 製品、Webアクセシビリティ、Flash Videoを担当している。
http://weblogs.macromedia.com/takesato/