RSSのデータを表示する
次のサンプルはRSSのデータを取得して表示するサンプルです。このプログラムで実装する機能の動作を、下記に解説しておきます。このサンプルではMicrosoft社の提供するRSSを使用しています。
実行すると分類の一覧が表示されます。任意の分類を選択すると、目次選択画面が表示されます。任意の目次を選択すると、該当するサイトがWebBrowserコントロール内に表示されます。WebBrowser内ではタッチスクリーンの場合、2本の指で拡大縮小が可能です。また、エミュレーターを横にして表示することもできます。
|
|
| 図4：実行すると分類の一覧が表示される(左図)。任意の分類を選択すると、目次選択画面が表示される(中央図)。任意の目次を選択すると、該当するサイトがWebBrowserコントロール内に表示される（クリックで拡大） |
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
※サンプル実行でエラーが発生した場合は、「ソリューションのビルド」を実行後、再度、デバッグ開始を行ってください。
WebBrowserコントロールで表示されたサイトに、Target=”_blank”の記述があると、リンクをクリックしても表示されませんので、注意してください。
プロジェクトの作成
VS 2010のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]を選択します。次に、「Windows Phone Application」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「WP7_CodeRecipeRss」という名前を付けています。Windows Phoneのバージョンは7.0を選択します。
RSSのデータをLINQ to XMLで処理するため、VS2010メニューの「プロジェクト(P)／参照の追加(R)」と選択してSystem.Xml.Linqを追加しておいてください。
また、タイトルと関連するRSSフィードのURIを記述したリスト3のXML文書ファイル（Menu.xml）も追加しておきます。ダウンロードされたファイルには、XML文書ファイルは追加済みです。
リスト3 タイトルとRSSフィードのURIを記述したXML文書ファイル(Menu.xml)
1 | <?xml version="1.0" encoding="utf-8" ?> |
MainPage.xamlの編集とコントロールの追加
x:NameがPageTitleのTextBlockのTextプロパティに「分類を選択」と指定します。
ツールボックスからエミュレーターデザイン画面上に、ListBoxコントロールを1個配置し、文字サイズのFontSizeプロパティに26と指定します（図5）。
|
|
| 図5：エミュレーターデザイン画面上に、ListBoxコントロールを配置した（クリックで拡大） |
書き出されるXAMLにリスト4のように、Page Transitionのコードを追加します。
リスト4 Page Transitionコードの追加されたXAMLコード(MainPage.xaml)
01 | （１）エミュレーターを横に倒した場合、メニューもそれに伴って横向きに表示されるようにするには、PhoneApplicationPageを選択し、表示されるプロパティウィンドウの[その他]にあるSupportedOrientationsプロパティに、PortraitOrLandscapeを指定します。 |
02 | （２）第3回の連載で解説したPage Transitionのコードを記述しています。TurnstileTransition効果を持たせています。Transition効果を有効にするには、第3回の解説を参考にApp.xaml.vb内を書き換えてください。 |
03 | <phone:PhoneApplicationPage |
04 | x:Class="WP7_CodeRecipeRss.MainPage" |
07 | xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" |
08 | xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" |
11 | xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" |
12 | mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" |
13 | FontFamily="{StaticResource PhoneFontFamilyNormal}" |
14 | FontSize="{StaticResource PhoneFontSizeNormal}" |
15 | Foreground="{StaticResource PhoneForegroundBrush}" |
16 | SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" ■（１） |
17 | shell:SystemTray.IsVisible="True"> |
19 | <toolkit:TransitionService.NavigationInTransition> ■（２） |
20 | <toolkit:NavigationInTransition> |
21 | <toolkit:NavigationInTransition.Backward> |
22 | <toolkit:TurnstileTransition Mode="BackwardIn"/> |
23 | </toolkit:NavigationInTransition.Backward> |
24 | <toolkit:NavigationInTransition.Forward> |
25 | <toolkit:TurnstileTransition Mode="ForwardIn"/> |
26 | </toolkit:NavigationInTransition.Forward> |
27 | </toolkit:NavigationInTransition> |
28 | </toolkit:TransitionService.NavigationInTransition> |
29 | <toolkit:TransitionService.NavigationOutTransition> |
30 | <toolkit:NavigationOutTransition> |
31 | <toolkit:NavigationOutTransition.Backward> |
32 | <toolkit:TurnstileTransition Mode="BackwardOut"/> |
33 | </toolkit:NavigationOutTransition.Backward> |
34 | <toolkit:NavigationOutTransition.Forward> |
35 | <toolkit:TurnstileTransition Mode="ForwardOut"/> |
36 | </toolkit:NavigationOutTransition.Forward> |
37 | </toolkit:NavigationOutTransition> |
38 | </toolkit:TransitionService.NavigationOutTransition> |
40 | </phone:PhoneApplicationPage> |
Windows Phone Portrait Page(CodeRecipeIndex.xaml)の追加
VS2010メニューの「プロジェクト(P)／新しい項目の追加(W)」と選択して、「Windows Phone Portrait Page」を追加します。「名前(N)」には、CodeRecipeIndex.xamlと指定します。目次を表示するページです。
x:NameがPageTitleというTextBlockのTextプロパティに「目次を選択」と指定します。
エミュレーターデザイン画面上に、ツールボックスからListBoxコントロールを１個配置します。エミュレーターを横に倒した場合はプログラム上からWidthの値を変更します。エミュレーターを横に倒した場合、メニューもそれに伴って横向きに表示されるようにするには、PhoneApplicationPageを選択し、表示されるプロパティウィンドウの[その他]パネルにあるSupportedOrientationsプロパティに、PortraitOrLandscapeを指定します。
また、Page Transition(TurnstileTransition)コードも追加しておきます。
XAMLコードは省略します（リスト4参照）。
Windows Phone Portrait Page(PageViewx.xaml)の追加
VS2010メニューの「プロジェクト(P)／新しい項目の追加(W)」と選択して、「Windows Phone Portrait Page」を追加します。「名前(N)」には、PageView.xamlと指定します。WebBrowserにサイトを表示するページです。 x:NameがPageTitleというTextBlockのTextとStyleプロパティを削除します。ここにはプログラムからタイトルを表示します。
エミュレーターデザイン画面上に、ツールボックスからWebBrowserコントロールを１個配置します。(図6)。エミュレーターを横に倒した場合は、プログラム上からWidthの値を変更します。エミュレーターを横に倒した場合、WebBrowserもそれに伴って横向きに表示されるようにするには、PhoneApplicationPageを選択し、表示されるプロパティウィンドウの[その他]パネルにあるSupportedOrientationsプロパティに、PortraitOrLandscapeを指定します。
また、WebBrowserコントロールでは、プロパティウィンドウの[共通]パネルにあるIsScriptEnabledにデフォルトでチェックが付いてなく(False)、JavaScriptが無効となっています。このままだと、JavaScriptを使用したページに入った場合、うまく表示できない不具合が発生します。このサンプルでは、必ずIsScriptEnabledにチェックを付けてTrueにしておく必要があります。
XAMLコードは省略します。
|
|
| 図6：エミュレーターデザイン画面上に、WebBrowserコントロールを配置した（クリックで拡大） |
クラスファイルの作成
XML文書ファイル(Menu.xml)ファイルを読み込み、XElementを返すクラスを作成します。VS2010のメニューから「プロジェクト(P)／クラスの追加(C)」と選択しても、表示される「新しい項目の追加」テンプレート内には、クラスと名の付くテンプレートは見当たりません。ここでは「コードファイル」を選択します。「名前(N)」にはReadXmldoc.vbと指定し、[追加(A)]ボタンをクリックします。この現象は、Windows Phone Developer Tools 7.1 Betaで発生する現象です。
今回のサンプルは、Windows Phone Developer Tools 7.1 Betaで作成していますが、現在リリースされている、Windows Phone SDK 7.1 Beta2では、VS2010メニューから「クラスの追加(C)」を選択すると、クラスのテンプレートがきちんと表示されます。下記URIよりダウンロードの上、インストールしてください。
→参照：Windows Phone SDK 7.1 Beta2
インストール方法は、この連載の第1回と同じですので、そちらを参考にしてください。
表示されるコード画面内に、リスト5のコードを記述します。
リスト5 (ReadXmldoc.vb)
02 | LINQ to XMLを利用するためSystem.Xml.Linq名前空間をインポートしておきます。 |
03 | Imports System.Xml.Linq |
05 | ReadXmldocというクラスを定義します。ReadXmldocは「コードファイル」に付けた名称と同じです。 |
06 | このReadXmldocクラス内に、XElement型のCodeRecipeDoc関数を作成します。 |
07 | XElement.LoadメソッドでXML文書ファイル(Menu.xml)を読み込み、読み込んだXElement型のxmldocを戻り値とします。 |
08 | Public Class ReadXmldoc |
09 | Function CodeRecipeDoc() As XElement |
10 | Dim xmldoc As XElement = XElement.Load("Menu.xml") |
ソリューションエクスプローラー内のMainPage.xamlを展開し、表示されるMainPage.xaml.vbをダブルクリックしてリスト6のロジックコードを記述します。
