次の方法で共有

試してみよう : RSS ニュース リーダーの作成

  • [アーティクル]

Cc294852.bf9c77b1-ba7a-4f3b-8380-d05728d208d1(JA-JP,Expression.30).png

新しいニュース フィードやポッドキャストなどの Web フィードは、多くの場合、コンテンツに XML 形式のファイルを使用します。リーダーやアグリゲーターと呼ばれるプログラムで Web フィードを購読することができます。また、リーダーをコンピューターで開いたままにしておき、Web フィードの更新に合わせて新しいコンテンツでリーダーを自動更新することもよく行われます。Web フィードの最も一般的な配信機構は、RSS (Really Simple Syndication) と呼ばれます。

次の手順では、Microsoft Expression Blend と RSS フィードを使用して単純な RSS リーダーを作成する方法について説明します。RSS リーダーは、ローカル ファイルや自分の Web サイトの XML ファイルであっても、任意の XML データ ソースを読むときに使用できます。

Cc294852.alert_note(JA-JP,Expression.30).gifメモ :

次の手順では、インターネットへの有効な接続があることを前提としています。
Cc294852.alert_note(JA-JP,Expression.30).gifメモ :

Microsoft Silverlight で、XML データ ソースを使用することはできません。ただし、XML データを操作する方法については、MSDN の 「XML データ」で説明されています。

データ ソースを作成するには

  1. [データ] パネルで、[ライブ データ ソースの追加] Cc294852.601d2ab6-5e4b-49ab-bb3c-064456dc8184(JA-JP,Expression.30).png、[新しい XML データ ソースの定義] の順にクリックします。

    [新しい XML データ ソースの定義] ダイアログ ボックスが表示されます。

  2. [データ ソース名] の横に、"rssDS" と入力します。

  3. [XML データの URL] の横のテキストボックスに、"http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml" と入力します。

    Cc294852.alert_tip(JA-JP,Expression.30).gifヒント :

    [XML データの URL] フィールドには、XML ファイルの URL またはローカル パスを使用できます。異なる RSS フィードを使用する場合は、Web ブラウザーでプロバイダーの Web サイト (http://www.msnbc.com など) を開いて、RSS フィードへのリンクを見つけます。通常、Web サイトには使用できるフィードだけでなく、フィードを定期受信できるボタンも表示されます。使用するフィードの XML ファイルへのリンクを検索します。

  4. [データ ソースの作成先] で、次のいずれかを選択します。

    • アプリケーション内のすべてのドキュメントでデータを使用できるようにする場合は、[プロジェクト] を選択します。

    • データを現在のドキュメントでのみ使用できるようにする場合は、[このドキュメント] を選択します。

  5. [OK] をクリックします。

    [データ] パネルに、[rssDS] というデータ ソースが追加されます。ノードを展開し、データ ソースの異なるフィールドを確認します。データは表示されません。データを含むフィールド名とデータ構造のみが表示されます。

    これで、アプリケーションのコントロールをデータにバインドできます。

    XML データ ソースの後に追加された [データ] パネル

    Cc294852.8ce5d9eb-ca88-4eb9-8ad1-4719fdc0514e(JA-JP,Expression.30).png

[プロジェクト] パネルからドラッグしてデータ フィールドにバインドするには

コントロールをデータ ソースのアイテムにバインドするには複数の方法があります。次に、[データ] パネルからアートボードにデータ ソース フィールドをドラッグして新しいコントロールを 2 つ作成する方法を示します。あるいは、データ ソース フィールドを既存のコントロールにドラッグして、コントロールのプロパティにデータをバインドすることもできます。

  1. [ツール] パネルの [アセット] Cc294852.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png をクリックします。

  2. [アセット] パネルの [コントロール] カテゴリで [All] を選択します。

  3. [コントロール]、[システム コントロール]、[イメージ] コントロールCc294852.adb61060-da5f-4279-8c0d-3681bfeb145c(JA-JP,Expression.30).png の順にクリックします。

  4. マウスを使って、幅約 100 ピクセル、高さ 100 ピクセルのイメージ コントロールをアートボードの左上隅に描画します。

  5. [データ] パネルで、[rss]、[channel]、[image] ノードを展開します。[url : (文字列)] ノードをアートボードの新しいイメージ オブジェクトにドラッグします。

    イメージ オブジェクトは、MSNBC Web サイトのイメージを表示します。[データ] パネルのデータ ソースに黄色い枠が付き、データの一部がコントロールにバインドされたことを示します。

    イメージ オブジェクトを追加し、URL データ アイテムにバインドした後のアートボード (実際に表示されるアートボードとは異なる場合があります)

    Cc294852.eb3b12e1-64d7-4a49-b2a8-fc433a34ca2f(JA-JP,Expression.30).png

  6. [データ] パネルで、[rssDS]、[rss]、[channel] ノードを展開します。[title : (文字列)] ノードをアートボードのイメージ オブジェクトの右側にドラッグします。

    TextBlock コントロールが作成され、ニュース フィードのタイトルが表示されます。テキスト ブロック オブジェクトを移動したりサイズを変更したりするには [選択内容] ツールを使用します。また、テキストの表示方法を変更するには、[プロパティ] パネルの [テキスト] と [ブラシ] カテゴリを使用します。

    テキスト ブロック オブジェクトを追加し、タイトル データ アイテムにバインドした後のアートボード (実際のアートボードとは異なる場合があります)

    Cc294852.f5b9f7c7-e622-4f62-a151-1e449c6d4588(JA-JP,Expression.30).png

データ コンテキストを使用して同じデータを複数コントロールにバインドするには

データ コンテキストを親オブジェクトに割り当てると、すべての子オブジェクトでデータの同じスナップショットを使用できます。この機能は、マスターと詳細ビューからなるデザインを作成する場合に便利です。これは、一覧 (マスター ウィンドウ) のアイテムをクリックすると、そのアイテムに関する情報が別のオブジェクト (詳細ウィンドウ) に表示されるデザインです。

  1. イメージとタイトルの下の領域用の [Grid] レイアウト パネル Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(JA-JP,Expression.30).png を作成します。作成される [Grid] オブジェクトは、次の手順でデータ コンテキストが自動的に設定される親オブジェクトになります。

  2. [オブジェクトとタイムライン] パネルで新しい Grid オブジェクトを選択してアクティブにし、子要素を追加できるようにします。

  3. [データ] パネルで、[リスト モード] Cc294852.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(JA-JP,Expression.30).png が選択されていることを確認します。リスト モードで [データ] パネルからドラッグするアイテムでマスター コントロールが作成されます。

  4. [rss]、[channel]、[item (配列)] ノードを展開します。[title : (文字列)] ノードを [Grid] オブジェクトの左上隅にドラッグします。

    [ListBox] コントロールが作成され、[item (配列)] コレクションにあるすべてのニュースのタイトルが表示されます。[Grid] オブジェクトを選択して、[プロパティ] パネルを見ると、[DataContext] プロパティの周りに、データにバインドされていることを示す黄色い枠が付いているのがわかります。同様に、[ListBox] オブジェクトを選択すると、[ItemsSource] プロパティがデータにバインドされていることがわかります。

    Cc294852.alert_note(JA-JP,Expression.30).gifメモ :

    [ItemsSource] プロパティは、アイテムのコレクションに設定できます。[ItemsSource] プロパティと [Items] プロパティは同時に使用できません。通常、ItemsSource プロパティは、生成されたアイテムのコレクションをバインドするときに使用されます。[Items] プロパティは、[このコレクション内のアイテムを編集] ボタンを使用して個々のアイテムを手動で追加するときに使用します。

    [ListBox] オブジェクトを追加し、item (配列) データ コレクションにバインドした後のアートボード (実際のアートボードは異なる場合があります)

    Cc294852.6e02aab9-751f-49ee-ac12-65d92eb432ef(JA-JP,Expression.30).png

  5. [データ] パネルで、[詳細モード] Cc294852.7786ee28-da1d-41b2-93fd-b4caeb75ab98(JA-JP,Expression.30).png をクリックします。

  6. [rss]、[channel]、[item (配列)] ノードを展開します。[description : (文字列)] ノードを [Grid] オブジェクトの右側にドラッグします。

    [Grid] オブジェクトに作成され、その中に、選択したニュースの説明を表示する [TextBox] ブロック オブジェクトが配置されます。[TextBlock] オブジェクトを選択して、[プロパティ] パネルを見ると、[DataContext] プロパティの周りに、データにバインドされていることを示す黄色い枠が付いているのがわかります。データ バインドの内容を表示するには、[Text] プロパティの横にある [詳細プロパティ オプション] Cc294852.e3343378-f63e-4d8f-9847-97c1a58aadc5(JA-JP,Expression.30).png をクリックし、[データ バインド] をクリックします。

    TextBlock オブジェクトを追加し、Description データ アイテムにバインドした後のアートボード (実際のアートボードとは異なる場合があります)

    Cc294852.7e00a38f-ea59-47a3-84cd-3caf57c6d805(JA-JP,Expression.30).png

  7. F5 キーを押してアプリケーションを実行します。リスト ボックスのアイテムをクリックし、対応するニュースの説明を表示させます。

    Cc294852.alert_note(JA-JP,Expression.30).gifメモ :

    アイテムによっては HTML テキストを含めることができます。[説明] 文字列から HTML 要素を削除する値コンバーターを作成し、その値コンバーターを [データ バインドの作成] ダイアログ ボックスに適用できます。値コンバーターの作成の詳細については、「試してみよう: データのタイプ変更」を参照してください。