Expression WebでXMLデータを挿入してみよう

XMLファイルを利用したWebページ作成とRSSフィードの挿入

RSSフィードをWebページに追加したい

　Expression Webのヘルプには、「ページにRSSフィードを追加するには、まず、リモートXMLファイルとしてリモートフィードをデータソースライブラリに追加し、次に、ページに表示するフィールドを追加します」と記載されていますが、実際は、リモートXMLファイルとしてリモートフィードをデータソースライブラリに追加することはできません。

　Expression Webヘルプが完成した後、RSSフィード追加機能がExpression Webから削除されました。よって、このExpression Web ヘルプの内容は、ドキュメントバグです。詳しくは、「How to Add RSS Feeds to a Page」を参照してください。

　対処方法として、あらかじめRSSフィードを作業中のWebサイトにダウンロードし、そのXMLファイルを使ってデータビューを作成し、コードビューに切り替えてダウンロードしたXMLファイルをインターネット上のRSSのURLに書き換える必要があります。

RSSフィードをダウンロードしてWebサイトにインポートするには

1. ここでは例として、CodeZineのRSSフィードをダウンロードします。利用したいRSSフィードを右クリックし、Internet Explorerの場合［対象をファイルに保存］をクリックし、デスクトップ上に保存します。
   　
2. ［作業ウィンドウ］-［データソースライブラリ］を選択し、データソースライブラリ作業ウィンドウを表示します。
   　
3. データソースライブラリ作業ウィンドウの［XMLファイルの追加］リンクをクリックします。
    

   
   　
4. ［データソースのプロパティ］ダイアログボックスの［参照］ボタンをクリックします。
    

   
   　
5. デスクトップに保存したXMLファイルを選択し、［開く］ボタンをクリックします。
    

   
   　
6. Webサイトにインポートする旨の確認メッセージが表示されるので、［OK］ボタンをクリックします。
   　
7. ［インポート］ダイアログボックスが表示されるので、［OK］ボタンをクリックします。
    

   

データビューを作成する

　インポートしたXMLを利用して、データビューを作成します。

1. データソースライブラリ作業ウィンドウのXMLファイルをクリックし、［データの表示］をクリックします。
2. 単一アイテムビューとしてフィールドを挿入します。

WebページにRSSフィードを追加する

　各記事タイトルに、それぞれの記事URLをリンクする方法を紹介します。

1. 個々の記事へのURLをハイパーリンクとして挿入するには、挿入したい場所にカーソルを移動し、［データソースの詳細］作業ウィンドウから記事のリンクアイテムを選択します。
   　
2. ［選択したフィールドの挿入］ボタンをクリックし、［書式付き］-［ハイパーリンク］を選択します。
    

   
   　
3. 確認メッセージが表示されるので、［はい］ボタンをクリックします。
    

   
   　
4. ハイパーリンクの編集ダイアログボックスが表示されます。ここでは、記事タイトルにリンクするので、［表示文字列］ボックスの{link}を消して、［fx］ボタンを押します。
    

   
   　
5. ［その他のフィールド］ダイアログボックスにて、各記事のタイトルを指定します。［データの値を表示する］にチェックを入れると、下図のように値が表示されるので、確認して［OK］ボタンをクリックします。
    

   
   　
6. 表示文字列として記事タイトル、アドレスにはその記事URLが指定できたので、［OK］ボタンをクリックします。
    

   
   　
7. 記事タイトルにそのURLにリンクされました。
    

   

WebページとXSLファイルの保存

　Webページを保存すると、XSLファイルなどが保存されるようになります。

1. ［ファイル］-［名前を付けて保存］を選択して、作業中のWebページを保存します。
2. ［埋め込みファイルの保存］ダイアログボックスが表示されるので、そのまま［OK］ボタンをクリックします。
    

   

コードビューに切り替えて、RSSのURLに置換する

　最後に、コードビューに切り替えて、XMLファイルへのパスをRSSのURLに置換します。

1. デザインビューからコードビューに切り替えます。
2. 下の例では、「index_article.xml」を「http://codezine.jp/rss/new/20/index_article.xml」に置換します。

データシートビューのソース例

<div>
<!-- PlaceHolderPreview MSDataViewXMLSrc="index_article.xml"
MSDataViewXSLSrc="index_article48.xsl" -->
<iframe onload="FP_xslview(this, /*url*/'index_article.xml',
 /*url*/'index_article48.xsl', 'サポートされていないブラウザです。
Windows&reg; Internet Explorer&reg; 7、Microsoft Internet
Explorer 6、または Mozilla Firefox 1.5 を使用してください。')"
style="display: none">
</iframe></div>

もっと簡単にRSSフィードをWebページに追加するには

　購読したいRSSフィードのリンクをコピー（Internet Explorerの場合は右クリックして[ショートカットのコピー]）して、Expression Webのデザインビューの貼り付けたい場所に[Ctrl]+[V]キーで貼り付けると、ステータスバーに「http://codezine.jp/rss/new/20/index_article.xml を取得中です...」と表示され、しばらくすると、複数アイテムビューで簡単にデータビューを作成することができます。この方法で操作する場合は、事前にRSSフィードをXMLファイルとしてダウンロードする必要はありません。
ただし、単一アイテムビューに作り直す場合は、一旦その表を削除し、［データソースの詳細］作業ウィンドウから挿入したいフィールドを選択し、[選択したフィールドの挿入]-[単一アイテムビュー]を選択します。
データビューを作成したあと、そのWebページを保存すると、XSLファイルが保存される形になります。この場合、あとでコードビューに切り替えてRSSのURLに置換する作業は不要です。
 

まとめ

　商品データなどのXMLファイルや、ニュースサイトやご自身のブログなどで提供されているRSSをWebページに利用したい場合、Expression Webを使うと、このように、これらを作業中のWebサイト内のページに利用することができます。

　RSSフィードをWebページに追加する方法は2種類あり、あらかじめRSSフィードを作業中のWebサイトに保存して、そのデータを利用する方法と、RSSフィードのURLをクリップボードにコピーしてWebページに貼り付ける方法があります。

　前者の場合は、最後にRSSフィードのURLを書き換える必要がありますが、後者の場合はその作業は不要です。ただし、デザインビューに貼り付けた場合、挿入されるタイプは複数アイテムビューになるので、単一アイテムビューにしたい場合は、一度そのビューを削除してから、単一アイテムビューとして挿入しなおす必要があります。いずれも保存時にXSLファイルとJSファイルが生成されるので、これらを利用してXMLやRSSフィードを利用したWebページを誰でも簡単に作成することができます。

XSLTの設定を変更するには

　Expression WebでXSLT処理方法やXSLTソースを設定するには、コモンDataViewタスクの「データビューのプロパティ」のリンクをクリックし、［データビューのプロパティ］ダイアログボックスで行えます。
XSLTソースを設定するには、［XSLTソース］タブをクリックし、場所を指定します。
既定のXSLT処理方法は、ブラウザベースになりますが、［XSLT処理］タブを開き、「ASP.NET XMLコントロール」を選択すると、XSLT処理方法ASP.NET XMLコントロールに変更できます。