Dreamweaver記事

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

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です。