デザインビューの活用

はじめに

Dreamweaverは、デザインビューとコードビューという2つの顔を持っています。デザインビューはWYSIWYGベースでページ制作を行うことができ、コードビューはソースコードを直接書きながらページ制作を行うことができるものです。Web制作者は、ソースコードを中心に書くことが多く、比較的多くの方がこちらをメインで使われていると思います。反対に、デザインビューは、ソースコードを意識しないという利点があるものの、Web制作のプロの目からはどうしても初心者的な感じを受けることが多いところでもあるかと思います

しかし、実際にはデザインビューにはとても便利な機能が隠されていて、スピーディーな制作現場に於いては、役立つ機能があります。そこで、デザインビューの隠れた機能をここで紹介していきながら、デザインビューを使った最新の機能をご紹介していこうと思います。

Webサイト制作で、クライアントからの原稿をもらう際に、Wordで原稿を渡されることがあると思います。実は、DreamweaverのデザインビューはWordととても仲良しなのです。Wordはもともと文書を作るソフトですから、文書として見出しや段落、箇条書きなどの要素を指定することができます。そこで、あらかじめWordで作った原稿を用意します。

このWordの原稿をすべて選択をしたのちコピーをしたら、Dreamweaverのデザインビューに切り替えて、Ctrl+V(Cmd+V)でコピーした原稿を貼り付けてみましょう。

Dreamweaverのデザインビューに見出しつきのテキストがペーストされます。しかし、どのんなタグになっているのかがわからないと思いますので、コードビューに切り替えて見てみます。

見出し（Hn）要素と段落（p）要素のみが記述されており、無駄なタグは一切ありません。この機能はデザインビューでのみ実現可能な機能で、コードビューではテキスト情報しかペーストされません。

Web標準に準拠したサイト制作では、正しいHTMLを書くことが必須です。原稿側をあらかじめ構造化しておけば、DreamweaverでHTMLを作成する作業に於いて、デザインビューとWordの活用によりスピーディーに行うことが出来るのです。

通常のテキストデータでも、Dreamweaverのデザインビューでは活用できます。テキストデータで受け取った原稿は、一要素毎に一行おきに入力されていることが多いかと思います。

この一行おきに要素が入力されている原稿のすべて選択をして、Dreamweaverのデザインビューに切り替えて、Ctrl+V(Cmd+V)でコピーした原稿を貼り付けて、あわせてソースコードを見てみましょう。

一行おきに記述された要素が、p要素として張り付いています。Webページ内で記述されている要素の多くが段落によって成り立つことが多いので、１センテンス、一要素毎にコピーしてタグ付けしてという作業が軽減されます。

Dreamweaverの醍醐味は、HTMLや周辺技術への正しい理解があれば、デザインビューを上手に活用して、制作の効率を上げてくれます。

Dreamweaverの機能のひとつにXSLT作成機能があります。XSLTは、XMLデータを別の形式のものに変換するための仕様で、一例としてXMLデータをHTMLで表示させるようにすることも出来ます。

Dreamweaverで出来るXSLTに関しては、XSLTのフォーマットとしては限定的ではありますが、HTMLへの変換を目的とした使用であれば非常に簡単に作成することが出来ます。
ここで紹介するサンプルを作成するにあたり、材料を用意します。

• XMLファイル
• XMLデータの内容を表示させたいHTMLファイル

たったこの2つです。通常は、XMLファイルにXSLTへのリンクを記述してXMLファイルをブラウザで開くことで表示することも可能です。しかし、今回使用するXMLデータに関しては、アマゾンで提供されている書籍データのXMLなので、直接XSLTへのリンクを書き加えることが出来ません。
あわせて、多くのブラウザでは、XSLT変換機能を持たないことがあるため、XSLTへのリンクをXMLに埋め込むことなく、かつすべての環境で見られるようにするため、サーバー側で動的に変換させるPHPを採用して変換後の活用を手助けしてもらいます。そこで、

• PHPが利用可能なサーバー環境

というのも材料として加えておきます。
今回使用するXMLデータは、Amazonのデベロッパー登録したユーザーが自由に使えるもので、自身でその内容をカスタマイズできます。今回使用するXMLは、「神森 勉が書いた書籍の詳細情報」というもので、中身は次の通りです。

XMLへのパスは、

※（）内はAmazon Web Serviceに登録された方の情報が入ります。
※「絞り込みキーワード」に、絞り込みたいキーワードを追加します。

このXMLデータを利用して、書籍のデータを表示させるようにします。このXMLデータを利用する利点は、もし新しい書籍が出ることになりAmazonに掲載されると自分で更新することなく商品が追加され、必要な情報が掲載される点です。
このXMLファイルは、データベースのような物ですので、このまま自身のサイトで利用しても、次の図のように単なる文字列が表示されるだけです。そこで、表示を行うためにXMLを変換させる使用としてXSLTを利用します。

XSLTを作成するにあたり、取得したXMLのデータを表示させたいページレイアウトが必要です。これは、HTMLで書かれたものを用意します。

このHTMLファイルは、通常のXHTML1.0で書かれたもので、レイアウトはCSSで行っていますが、ごく普通のページです。この作業は、どの制作者の方でも作成可能ですね。
まずは、用意したHTMLファイルを開いて、「ファイル」-「変換」-「XSLT1.0」を選びます。
すると、同名のファイル名.xslというファイルが開きます。このファイルは、自動的にサイトにも保存されます。

次に、アプリケーションパネルグループにある「バインディング」パネルを開いて、パネル内にある「XML」もしくは「ソース」というリンクをクリックします。

「XMLソースの指定」ダイアログボックスでXMLソースを指定します。今回は、Web上にあるXMLソースなので、「インターネット上のリモートファイルを添付」のラジオボタンにチェックを入れて、XMLのURLを入力もしくはコピーし貼り付けます。

バインディングパネルの中身が図のようにツリー上に繋がった要素が表示されます。先ほどのXMLソースと見比べるとわかるように、XMLソース内のタグが表示されています。

このXMLのXMLソースのタグ部分が、書籍名や値段などをあらわしており、先ほど作ったXSLTファイルに紐付けを行います。
バインディングパネルのXMLツリーから、ProductNameというものがあります。ここは、書籍の名前が格納されている部分です。

まず、デザインビューで書籍名の所を選択してから、バインディングパネルのProductNameをダブルクリックすると、デザインビューに[ProductInfo/Details/ ProductName]というテキストが挿入されます。

ソースコードを見てみると

となっています。
続いて、リンクテキストにある書籍名を選択して同様にバインディングパネルのProductNameをダブルクリックすると、図のようにかわります。

次に、書籍の説明部分を、ユーザーレビューの概要に置き換えます。説明文を選択したら、バインディングパネルのSummaryをダブルクリックすると、図のようにかわります。

ここまでで、ひとまずこのXSLTをブラウザプレビューしてみましょう。

書籍の名前と概要文、詳細ページへのリンクテキストがかわっています。これは、AmazonのXMLデータから引っ張ってきたテキストです。
次に、リンク先の設定です。現在設定されているリンクは、ダミーですので正式なリンクにする必要があります。リンクテキストを選択したら、プロパティパネルのリンクフィールドから「ファイルの参照」ボタンをクリックしてファイルの選択ダイアログボックスを開きます。
通常は、ここでファイルを選択していきますが、ここでは「データソース」というボタンをクリックします。

「XPath Expression Builder（動的URL）」ダイアログボックスが表示され、「表示するノードの選択」ペインにバインディングパネルと同じXMLツリーが表示されるのがわかります。この中の「@URL」を選択し、OKをクリックします。※「@URL」は、このXMLデータで、書籍へのリンクを表している所です。

リンク先が

にかわります。

先ほどのプレビューしたときには、書籍のタイトルが一つしか出ていませんでしたが、実際には数冊の書籍がでている”ハズ”ですので、複数の内容が出るようにする必要があります。そこで、特定の領域を連続して表示するようにするためのXSLのおまじないであるリピート領域の設定を行います。
まず行うのは、繰り返したい領域を選択することです。ここでは、

の間が書籍の図版やタイトルなどを囲っている部分なので、ここを連続して動的に書き出すようにします。そこで、このdivを選択してから、「挿入バー」のXSLTタブをクリックしリピート領域をクリックします。

URLを挿入したときと同じように「XPath Expression Builder（リピート領域）」ダイアログボックスが表示されます。ここでどのノードを繰り返したいのかを選択する必要があります。AmazonのXMLデータは、detailsを含む子要素が一つの書籍に対するデータが格納されており、detailsが繰り返しています。つまり、detailsを繰り返し表示するように指示することで、書籍データが複数存在する場合は、それにあわせて繰り返し表示するようになります。そこで、「details」を選択してOKをクリックします。

ここで、もう一度ブラウザプレビューしてみましょう。

書籍のタイトルが複数表示されているのがわかります。また、詳細リンクの内容や概要についてもそれぞれの内容になっています。あとは、イメージが変わっていないので、イメージを変えます。イメージ画像をダブルクリックして、「イメージソースの選択」ダイアログボックスが開いたら、「データソースボタン」をクリックします。

「XPath Expression Builder（動的URL）」ダイアログボックスが開いたら、こんどはイメージソースに関するノードを探します。ここでは、ImageUrlSmall、ImageUrlMedium、ImageUrlLargeというのが見つかりました。AmazonのXMLデータでは、この3つのノードが、書籍などのイメージのURLが格納されているところで、この値を使用します。今回はImageUrlMediumを選択してOKをクリックします。

図版のサイズが表示されなくなったので、ここで手動でプロパティパネルからこのページで使用している他の画像サイズに合わせて値を入れておきます。横160、縦210にしましょう。これで、もう一度ブラウザプレビューを行ってみます。

書籍の写真も含めて表示されるようになりました。
さて、このxslファイルをアップロードして表示させようとすると、実際には図のように、写真もタイトルも何も表示されません。これは、XMLを変換させるためのデータであって、内容自体はXMLデータに紐づけないと表示されないためです。

しかし、当のXMLファイルはAmazonから自動的に提供されているURL形式のため、ローカルには用意されていませんので、このXSLTを活用することが出来ません。そこで、PHPでサーバー側でXML+XSLTの変換をしてしまうことで、ユーザーにはXMLもXSLTも意識せずに通常のWebサイトとして見てもらう用にしようと思います。
「ファイル」-「新規」から、「新規ドキュメント」ダイアログボックスを開いて、ページタイプペインで「PHP」を選択し、作成をクリックします。PHPファイルが開いたら、コードビューに切り替えて、中身をすべて削除します。

次に、このファイルを忘れないように保存します。名前は、testにしておきましょう。保存先は、XSLTと同じ場所にしておきます。
次に、アプリケーショングループパネルから、サーバービヘイビアタブをクリックして、そこにある「+」ボタンをクリックしたら、「XSL変換」を選択します。

XSL変換ダイアログボックスが表示されたら、XSLTファイルフィールドの参照ボタンをクリックして、先ほど作ったXSLTを選択すると、自動的にXML URLフィールドにXMLのパスが入力されます。これでOKをクリックします。

画面が先ほど作ったXSLTと同じ物が表示されます。これを保存したら、PHPが動作可能なサーバーへアップロードします。
このとき、XSLTファイルも一緒にアップロードします。また、必要に応じて、XSLTで使用しているイメージファイルやCSSファイルなどもあわせてアップロードします。

さらに、サイトルートにincludesというフォルダが作られています。これは、XSLをPHPでサーバー変換するために必要な共通のPHPコードなので、一緒にアップロードします。そして、このアップロードされたtest.phpを通常のWebアドレスでアクセスして見てみるとどのブラウザでも同じように表示されるようになります。

今回は、XMLのデータとして、Amazon Webサービスで提供されているXMLデータを元に使いました。使い方としては、これ以外にもRSSデータを再変換して自身のRSSリーダー的なページを作ることも出来ます。また、自分のiTunesのプレイリストを書き出して、XSLTでプレイリストページをつくることもできます。つまり、XMLの仕様に沿って書かれているデータであれば、ほとんどのものがXSLTによって見た目を変えることができるのです。また、なかなか習得が難しいXSLTも、まずはこれらのデータを表示させたいHTMLを作っておけば、いくつかのステップを踏むだけで簡単にXSLTが作成でき、さらにクライアントの環境に依存しないためのサーバーサイドで変換するPHPファイルもDreamweaverで作ることができるので、サーバーサイド技術にはあまり精通していない、XSLTは始めたばかりという人でも簡単に制作できるのがDreamweaverのXSLT作成機能の特徴です。