CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/11/21 14:00
目次

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コントロールに変更できます。
 


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Expression Webチュートリアル

著者プロフィール

  • 小濱 良恵(コハマ ヨシエ)

    Microsoft MVP for Expression Web MSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageや...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5