検索機能とXSLTを利用して「制作ページ一覧」を作成する
必要条件
サイト規模が大きくなるにつれて、どんなページがあるのかを把握するのが大変になります。また、納品したHTMLの一覧をクライアントに提出することが求められることなどもあるでしょう。とはいえ、Dreamweaverにはサイトのページ一覧を出力するような機能は搭載されておりません。しかし、Dreamweaverの検索機能とXSLTを利用することで、以下のようなページ一覧を簡単に作成することが可能です。
このページ一覧は、以下の手順で作成します。
- Dreamweaverでサイト全体の検索を行い、レポートをXMLファイルとして保存する。
- Dreamweaverで検索/置換を行い、XMLを整形する。
- XMLからXSLTを読み込む。
それでは、各手順を詳しく解説していきましょう。
1.Dreamweaverでサイト全体の検索を行い、レポートをXMLファイルとして保存
まず、Dreamweaverの検索機能を利用します。メニューバーから「編集 → 検索/置換」で、またMacの場合には「cmd＋F」、Windowsなら「control＋F」のショートカットからも利用可能です。
サイト内にある全てのHTMLファイル（ページ）を抽出するために、title要素を検索にかけます。[検索および置換]ダイアログの[検索対象]項目を「現在のローカルサイト全体」、[検索]項目を「ソースコード」、続く[検索]項目をに「<title>」と入れて[すべて検索]をクリックしてください。
[結果]パネルの検索結果を見ると、制作した全てのHTMLファイルの「title要素とそのテキスト」が並んでいます。[レポートの保存]をクリックして、検索結果内容をXMLファイル（ここでは、ResultsReportBefore.xml）として保存しましょう。
XMLファイルを保存する場所は、検索を行ったサイトディレクトリの直下にするようにしてください。他の場所を指定してしまうと、生成されるXMLファイルの内容が以下の説明と違うものになってしまうので注意が必要です。
2. Dreamweaverで検索/置換を行い、XMLを整形
さきほど保存したXMLファイルを確認してみましょう。mm_report要素内に、mm_reportname要素、mm_reportdate要素、mm_reportlocation要素に続いて、HTMLのファイル数だけmm_reportitem要素が繰り返されています。mm_reportitem要素は以下のようになっています。
<mm_reportitem>
<mm_file>index.html</mm_file>
<mm_displaystr><![CDATA[ <title>ページ1|株式会社サンプル</title>]]></mm_displaystr>
<mm_data mm_rangemin="445" mm_rangemax="452" mm_filename="Macintosh HD:Users:mbrskoba:Desktop:ADC:ADC1:index.html" mm_replaced="false" mm_matchedtextdirty="false" />
</mm_reportitem>
mm_reportitem要素の例
XSLTで扱いやすくするために、このXMLファイルに対して検索/置換を行い整形します。XMLファイルをDreamweaverで開き、[検索および置換]ダイアログの[検索対象]項目を「現在のドキュメント」に設定して、以下の検索/置換を行います。
リンクテキストを整形する
mm_reportitem要素内のmm_displaystr要素に注目してください。その内容には各HTMLのtitle要素が入っています。最終的なページ一覧では、このテキストをリンクテキストとして使用するので、「<title>テキスト</title>」となっているものから<title>と</title>を削除します。<title>を削除するには、[検索]項目を「CDATA[半角スペース<title>」、[置換]項目を「CDATA[」と指定して、[すべて置換]をクリックしてください。
![図4 [検索]項目を「CDATA[半角スペース<title>」、[置換]項目を「CDATA[」と指定して、<title>を削除します](/content/dotcom/jp/devnet/dreamweaver/articles/creating_list_w_search_xslt/_jcr_content/articlecontentAdobe/image_2.adimg.mw.650.png/1282198247534.png "図4 [検索]項目を「CDATA[半角スペース<title>」、[置換]項目を「CDATA[」と指定して、<title>を削除します")
次に</title>を削除するために、[検索]項目を「</title>]]」、[置換]項目を「]]」と指定して、[すべて置換]を実行します。
![図5 [検索]項目を「</title>]]」、[置換]項目を「]]」と指定して、</title>を削除します](/content/dotcom/jp/devnet/dreamweaver/articles/creating_list_w_search_xslt/_jcr_content/articlecontentAdobe/image_3.adimg.mw.650.png/1282198292268.png "図5 [検索]項目を「</title>]]」、[置換]項目を「]]」と指定して、</title>を削除します")
以上2回の検索/置換で、mm_displaystr要素内にはページタイトル名だけが入っている状態となりました。
href属性の値を整形する
続けてhref属性に指定する値を整形します。mm_data要素内のmm_filename属性を見てみましょう。ここには、検索されたHTMLファイルの、パソコン内でのパスが指定されています。この値を利用して、最終的なページ一覧のhref属性に指定しやすいように整形します。皆さんの環境によってパスの状態が違いますが、本記事のサンプルでは以下のように検索/置換を実行します。
[検索]項目を「mm_filename="Macintosh HD:Users:mbrskoba:Desktop:ADC:ADC1:」、[置換]項目を「mm_filename="」と指定して、[すべて置換]を行っています。つまり、「XMLファイルから各HTMLファイルへ」の相対パスとなるように、不要な文字列を削除するようにしてください。
このままでは階層を示す区切り子が「:」となっていますので、HTMLのhref属性として利用するには「/」に変更する必要がありますが、階層が深いサイトの場合、Dreamweaverで検索/置換を行うのが面倒なため、後はXSLTに任せることにしましょう。
3. XMLからXSLTを読み込む
整形が終わったXMLファイルをWebブラウザで閲覧してみましょう。例えば、Firefoxでは以下のようにXMLがそのまま表示されます。
このままでは制作ページ一覧になりませんので、XMLファイルからXSLTファイルを読み込んで制作ページ一覧を完成させましょう。XSLTは、XMLを他のXMLや(X)HTML、テキストに変換するための言語で、W3Cによって勧告されています（参考：http://www.w3.org/standards/techs/xslt#w3c_all）。
本記事では、以下のXSLTファイル（styles.xsl）を用意し、ページ一覧のHTML構造へと変換しています。特にHTML構造を変更する必要がなければ、そのまま使ってください。
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" doctype-system="http://www.w3.org/TR/html4/loose.dtd" encoding="UTF-8" />
<xsl:template match="/">
<html lang="ja" dir="ltr">
<head>
<title>制作ページ一覧</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="all" />
</head>
<body>
<div id="header">
<h1>制作ページ一覧</h1>
<!-- /#header --></div>
<div id="contents">
<ul>
<xsl:apply-templates select="mm_report" /> <!-- 27行目からのテンプレートを呼び出す -->
</ul>
<!-- /#contents --></div>
<div id="footer">
<dl id="create-date">
<dt>作成日</dt>
<dd><xsl:value-of select="mm_report/mm_reportdate" /></dd> <!-- 作成日の出力 -->
<!-- /#create-date --></dl>
<!-- #footer --></div>
</body>
</html>
</xsl:template>
<xsl:template match="mm_report"> <!-- <xsl:apply-templates select="mm_report" />にマッチ -->
<xsl:for-each select="mm_reportitem"> <!-- mm_reportitem要素を繰り返し操作 -->
<li>
<a>
<xsl:attribute name="href">
<xsl:value-of select="translate(mm_data/@mm_filename,':','/')" /> <!-- mm_data要素のmm_filename属性を出力。さらにディレクトリの階層を示している「:」を「/」に変換 -->
</xsl:attribute>
<xsl:value-of select="mm_displaystr" /> <!-- mm_displaystr要素の内容を表示 -->
</a>
</li>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
本サンプルで使用しているXSLTファイル（styles.xsl）
XMLファイルに以下のように追記して、このXSLTファイルを読み込みます。
<?xml-stylesheet type="text/xsl" href="styles/styles.xsl" ?>
ブラウザ上では、このXSLTによってXMLファイルが以下のようなHTMLに変換されます。XSLTによって変換されたHTMLのデザインはCSSで指定しているので、お好みのデザインに変更してください。
（中略）
<div id="header">
<h1>制作ページ一覧</h1>
<!-- /#header --></div>
<div id="contents">
<ul>
<li><a href="mm_data要素のmm_filename属性の値を出力し、「:」は「/」に変換する">mm_displaystr要素の内容を出力</a></li>
<!-- liは、mm_reportitem要素の回数分繰り返す -->
</ul>
<!-- /#contents --></div>
<div id="footer">
<dl id="create-date">
<dt>作成日</dt>
<dd>mm_reportdate要素の内容を出力</dd>
<!-- /#create-date --></dl>
<!-- #footer --></div>
（中略）
以上、ページ一覧の完成です。ダウンロードサンプル内には、検索/置換を行う前のXMLを「ResultsReportBefore.xml」として、検索/置換を行いXSLTを読み込んでいるXMLを「ResultsReportAfter.xml」として保存しています。
ご覧のように簡単にページ一覧を作成することができますので、ぜひ試してみてください。
