1. ホーム
2. Developer Connection
3. Dreamweaverデベロッパーセンター

Dreamweaver記事

 

Movable Type連携でソート可能なテーブルを自動更新

鷹野雅弘（Masahiro Takano）

株式会社スイッチ

この記事では、Adobe® Dreamweaver® CS3から組み込まれたSpryフレームワーク for Ajaxを利用して、ソート可能なテーブルを作成する方法をご紹介します。テーブルに表示するデータは、外部XMLファイルを参照します。
CSSを使って奇数・偶数行にカラーリングを行うとソートを行っても自動的にカラーリングし直されるだけでなく、クリックした行をカラーリングしたままにしたり、マウスオーバーした行をハイライト表示するなどのスタイル付けについてもご紹介します。

参照している外部XMLファイルを更新すれば、テーブルの内容も自動更新されます。そこで、Movable Type4.1をカスタマイズして、XMLファイルについて詳しくない人でも、データを追加できるような方法についてご紹介します。

必要ソフトウェア

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

Dreamweaver CS3

• 体験版
• 購入

Spry フレームワーク for Ajaxについて

まず、Spryの概要からご紹介します。

Spryとは

「Spry（スプライ）」は、“デザイナーのためのAjax”と銘打ってアドビが開発しているAjaxを実装するためのフレームワークです。フレームワークとは、再利用可能な状態でJavaScriptのコードをまとめたものです。ユーザーのフィードバックを受けながら進化しており、Adobe Labs*内で最新情報やサンプルなどを確認することができます（ただし、英語のみ）。

Spryを辞書で引くと「〈老人などが〉元気な,活動的な；かくしゃくとした」といった意味が出てきます。瀕死の状況だったDHTML（JavaScriptとCSSの組み合わせ）が、Ajaxの流れで盛り返したことを意味しているようです。なお、「スプレー」ではなく「スプライ」と読みます。

Adobe Labsを通じてベータ版として公開されてきましたが、Dreamweaver CS3からガッチリと組み込まれ、ほぼコーディングなしに、メニューや［挿入］バー、［ビヘイビア］パネル、［バインディング］パネルから実装できるようになっています。

Spryのサンプル

現在、Spry Demo*として6種類のサンプルが用意されています。

上記はSpryで可能な機能をたくさん組み合わせたものですが、下記では個々の機能にフォーカスした小さいサンプルが用意されています。
http://labs.adobe.com/technologies/spry/samples/

たとえば、先頭の「Auto Suggest Sample」を選択し、テキストフィールドに文字を入力すると、自動的に候補を表示してくれます（現在、アップルのサイトが実際にこのような機能を実装しています）。
http://labs.adobe.com/technologies/spry/samples/data_region/SuggestSample.html

なお、Dreamweaver CS3に組み込まれているのはSpry 1.4ですが、Adobe Labsでは、最新バージョンの1.6、および、Dreamweaver Spry Upadaterも用意されています（Adobe Labs内では、常にBeta版として表示されます）。

XMLファイルを関連づけて、ソート可能なテーブルを実装する

XMLファイルを準備する

Spryを実装する前に、サイト定義を行っておく必要があります。JSPやColdFusionなどのサーバテクノロジーも不要ですし、リモートサーバーを設定する必要もありません。

新規サイトを作成し、XMLファイルを準備します。今回は「data」フォルダ内に「cssniteList.xml」を用意しました（CSS Niteというセミナーの過去の出演者、トピックなどをまとめたものです）。

まず、このファイルの構造を確認しておきましょう。

<?xml version="1.0" encoding="UTF-8"?>
<dataroot>
 <LIST>
  <Vol>1</Vol>
  <開催日>2005-10-20</開催日>
  <トピック>DreamweaverではじめるWeb標準</トピック>
  <スピーカー>鷹野雅弘（スイッチ）</スピーカー>
 </LIST>
 <LIST>
  <Vol>2</Vol>
  <開催日>2005-11-17</開催日>
  <トピック>Dreamweaver 8で印刷用スタイルシートを作ろう</トピック>
  <スピーカー>神森 勉（アンカー・テクノロジー）</スピーカー>
 </LIST>
 
        
（中略）
        
 <LIST>
  <Vol>18</Vol>
  <開催日>2007-03-15</開催日>
  <トピック>Internet Explorer 7対策</トピック>
  <スピーカー>鷹野雅弘（スイッチ）</スピーカー>
 </LIST>
</dataroot>

XML宣言に続いて、dataroot要素があります。dataroot要素内には、LIST要素があり、さらに、Vol、開催日、トピック、スピーカーがあります。
1つのセミナーにLISTが対応しており、それぞれのLISTには「Vol」、「開催日」、「トピック」、「スピーカー」などの要素が用意されています。
<LIST></LIST>、<開催日></開催日> のように、XMLではそれぞれの要素を開始タグ／閉じタグで囲みます。

XMLファイルを関連づける

新規HTMLファイルを作成し、このファイルにXMLファイルを関連付けましょう。

サイト内に新規ファイルを作成し、「spryTable.html」という名称に変更します。 このファイルをデザインビューで開き、［挿入］バーの［Spry］タブの一番左側の［Spry XMLデータセット］をクリックします。

［Spry XMLデータセット］ダイアログボックスが開いたら、［参照］ボタンをクリックして、「cssniteList.xml」を選択します。［スキーマを取得］ボタンをクリックすると、XMLファイルの構造が読み込まれ、［行エレメント］内に表示されます。

［行エレメント］の「LIST」をクリックすると、［データセット列］に「Vol」、「開催日」、「トピック」、「スピーカー」が表示されます。「開催日」は日付なので［データタイプ］を「日付」に変更します。

いったん保存しましょう。
［依存ファイルのコピー］ダイアログボックスが開きます。SpryでXMLデータセットを扱うために必要な「SpryData.js」と「xpath.js」をサイト内の「SpryAssets」フォルダに保存することを促されます（保存先はサイト定義で変更することができます）。［OK］をクリックして進めます。

ここまででXMLファイルを関連づけは終了ですが、この状態では、デザインビューにはまったく変化がありません。
念のため、ソースコードを確認すると、head要素内に次のようなコードが書かれています。

<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("data/cssniteList.xml", "dataroot/LIST/開催日");
ds1.setColumnType("開催日", "date");
//-->
</script>

ここでは次のようなことが記述されていますが、コードの確認を行わずに進めてもOKです。

• 「SpryData.js」と「xpath.js」へのリンク
• 「cssniteList.xml」への関連付け
• 開催日の列のみ、日付として扱うこと

デザインビューに戻して次に進みましょう。

Spryテーブルの挿入

［挿入］バーの［Spry］タブの［Spryテーブル］をクリックします。

［Spryテーブルの挿入］ダイアログボックスが開いたら、ソートしたい列ごとに、［ヘッダがクリックされたときに列をソート］にチェックをつけます。

OKをクリックすると、［Spry領域を追加しますか？］のメッセージが表示されるので、［はい］をクリックします。

1行目には「Vol」、「開催日」、「トピック」、「スピーカー」という見出しの文字列が、2行目には「{Vol}」、「{開催日}」、「{トピック}」、「{スピーカー}」のように{}で囲まれた文字列が表示されます。

ファイルを保存して、ブラウザプレビューしてみましょう（テーブルのボーダーなどをつけておいた方がわかりやすいかもしれません）。

XMLファイルから読み込まれた情報がテーブルに表示されます。1行目の項目名をクリックすると、ソート（並び替え）が実行されます。

奇数・偶数行、選択した行、マウスオーバーした行にカラーリングを行う

次に、Spryテーブルに対してカラーリングなどのスタイル付けを行いましょう。

CSSファイルをリンクする

設定しやすくするために、挿入したSpryテーブルをいったん削除します。

奇数行、偶数行、マウスオーバー、選択に対応したクラスを作った下記のようなコードを記述したCSSをサイト内に用意します。

tr.evenRow {
     background-color:#FFFFCC;
}
tr.oddRow {
     background-color:#FFCCFF;
}
tr.hoverRow {
     color:#FFFFFF;
     background-color:#333333;
}
tr.selectRow {
     background-color:#006699;
     color: #FFFFFF;
}

このCSSファイルを、HTMLファイルにリンクします。

Spryテーブルの挿入

改めて、［挿入］バーの［Spry］タブの［Spryテーブル］をクリックして、［Spryテーブルの挿入］ダイアログボックスを開きます。
［奇数行クラス］、［偶数行クラス］、［Hoverクラス］、［クラスの選択］に対応する、クラスをポップアップメニューから選択していきます。

［OK］をクリックしてダイアログボックスを閉じ、ブラウザプレビューして確認します。
列をソートし直しても、基数行、偶数行にカラーリングされるようになります。

クリックした行や、マウスオーバーした行にもカラーリングが行われます。

ソースコードを確認しよう

body要素内でには、下記のように記述されています。

<div spry:region="ds1">
　<table>
　  <tr>
　    <th spry:sort="Vol">Vol</th>
　      <th spry:sort="開催日">開催日</th>
　      <th spry:sort="トピック">トピック</th>
　      <th spry:sort="スピーカー">スピーカー</th>
　    </tr>
　    <tr spry:repeat="ds1" spry:odd="oddRow" spry:even="evenRow" 
　         spry:hover="hoverRow" spry:select="selectRow">
　       <td>{Vol}</td>
　       <td>{開催日}</td>
　       <td>{トピック}</td>
　       <td>{スピーカー}</td>
　    </tr>
　</table>
</div>

つまり、XMLファイルを参照していているだけで、テキストは記述していません。XMLファイルのみを更新してアップロードすれば、このテーブルは自動更新されるのです。

なお、現状のバージョンではJavaScriptをオフにすると、XMLファイルは読み込まれず、2行目には{Vol}{開催日}のように表示されてしまいます。この問題については将来のバージョンで解消されるようです。

XMLファイルの更新を、Movable Type 4.1を使って行う

データが更新されていくリストの更新にはDreamweaverテンプレートのリピート領域を用いて、DreamweaverやContributeで運用していくのがセオリーともいえます。
今回は更新するのがXMLファイルですので、Dreamweaver以外のアプローチを考えてみましょう。

なお、ここではそれぞれの項目を「フィールド」、複数のフィールドで構成されるひとつのまとまりを「レコード」と呼びます。

Movable Type 4.1とカスタムフィールド

Movable Typeといえば、WordPressと並び、代表的なブログのエンジンのひとつです。
最初から用意されている「タイトル」、「カテゴリ」、「エントリーの内容」（本文）、「追記」、「抜粋」、「キーワード」などの項目を、それぞれのフィールドに“流用”するようなカタチで使うことができます。しかし、それ以上にフィールドの数が増えた場合には対応できませんし、また、項目名とフィールド名が異なるというのは運用していく上でスマートとはいえません。

Movable Typeでは「RightFields」、「CustomFields」といったプラグインでこれに対応してきましが、2008年1月末にリリースされたMovable Type 4.1では「CustomFields」が標準機能となりました。

カスタムフィールドの実装

Movable Typeの［設定］メニューで［カスタムフィールド］を選択し、新規フィールドを作成します。

項目名として表示される［名前］、MTタグ名として利用される［テンプレートタグ］を入力します。正確には［テンプレートタグ］に「entrydatavol」と入力した場合、「<$MTEntryDataVol$>」「mt:entryDataVol」のように使います。

「イベント名」、「スピーカー」、「セッション名」、「日付」などのフィールドを追加したら、入力画面をカスタマイズします。［表示オプション］をクリックすると、追加したフィールドが表示されるので、表示されるようにチェックをつけます。
不要なフィールドはチェックをはずすことで非表示にすることができますが、［タイトル］［本文］はチェックをはずすことができません。

入力画面をカスタマイズしたら、1レコードを1エントリーとして入力します（後で編集しやすいように、タイトルにも識別しやすいテキストを入れておくとよいでしょう）。

XMLデータをはき出すテンプレートを作成

新規テンプレート（カスタムインデックステンプレート）を作成し、［出力ファイル名］を「cssniteList.xml」のように設定します。
テンプレートのコードとして次のようなコードを記述します。

<?xml version="1.0"?>
<dataroot><mt:entries>
  <LIST>
    <VOL><$MTEntryDataVol$></VOL>
    <DATE><$MTEntryDataDate$></DATE>
    <TOPIC><$MTEntryDataSession$></TOPIC>
    <SPEAKER><$MTEntryDataSpeaker$></SPEAKER>
  </LIST>
</mt:entries></dataroot>

<mt:entries>から</mt:entries>までは、エントリーに応じて増えますので、データを入力すれば常に新しいレコードが追加されたXMLファイルが更新されることになります。

このように、Movable TypeなどのブログをCMS的な入力インターフェイスとして使うことで、コードを気にせず、文字を入力していくことが可能です。
Movable Typeの導入にもライセンス費がかかりますが、インストールされたPCでなくても更新できるといったメリットもあります。
デザインビューでレイアウト結果を確認しながら進めることができるDreamweaverテンプレートとうまく切り分けて使っていかれるとよいでしょう。

なお、DevNetでは近日中に、Movable Type 4.1の新しいタグにも対応した［拡張機能 for Movable Type 4.1］がリリースされる予定です。リファランスはもちろん、コードヒントに対応しています。

著者について