Project Siena アプリで RSS フィードを表示する

  • [アーティクル]

Project Siena アプリでは、ブログや他のソースのデータを RSS フィードを使って表示できます。ユーザーがアプリを開くと、フィードからの最新のコンテンツが表示され、アプリから直接ソースを開くことができます。

概要とアプリ デモについては、Microsoft Project Siena に記されています。

このチュートリアルでは、RSS ソースからコンテンツをインポートし、それをアプリで表示する方法を説明します。この説明では Project Siena のブログを取り上げていますが、ユーザー自身のソースのコンテンツを組み込むために同じ手法を適用することができます。このチュートリアルに従うと、アプリは次の画像に似た外観になります。これにはタイトル、公開日、最新の 3 件の記事の最初の段落が表示されています。

最終形式で 3 つのブログ投稿を表示します

必須コンポーネント

  • Project Siena。Windows ストア から無料で入手できます。

    システム要件やその他の情報については、リリース ノートを参照してください。

  • インターネットおよび Web ブラウザーへのアクティブな接続。

このトピックの内容

データのインポート

この手順では、組み込みたいコンテンツの RSS フィードを探し、Project Siena でそのコンテンツをポイントします。

  1. Project Siena のブログ ページを開き、右上隅にある [RSS for posts] をクリックします。

  2. フィード ページがブラウザーに表示されたら、アドレス バーの URL をコピーします。

  3. スタート画面で Project Siena のタイルをクリックまたはタップして起動します。

    スタート画面にタイルが表示されない場合は、スタート画面が表示されているときにタイル名の全部または一部を入力するとタイルが見つかります。検索結果で、"Microsoft Project Siena" をクリックしてアプリを開きます。

    注意

    検索結果のタイルをスタート画面に固定するには、結果を右クリックしてから [スタート画面にピン留めする] をクリックします。

  4. ワークスペースの任意の場所を右クリックして上部のアプリ バーを表示し、[アプリのデータ] をクリックしてから [データ ソース] をクリックします。

    [データ ソース] が選択された [アプリ データ] メニュー

  5. データ ソースのリストで [RSS フィード] をクリックし、テキスト ボックスに URL を貼り付けてから [データのインポート] をクリックします。

    既定では、このデータ ソースの名前は rss_1 です。

  6. [戻る] ボタンをクリックしてキャンバスに戻ります。

データの表示

Dn632702.collapse_all(ja-jp,VS.111).gifギャラリーの設定

この手順では、テキスト ギャラリーという UI 要素をアプリのスクリーンに追加します。次に、インポートしたデータと、各種の情報が最適な場所に表示されるように、ギャラリーを設定します。

  1. ワークスペースの右上隅の正符号をクリックすると、アプリに追加できる UI 要素が表示されます。

  2. 要素の一覧で [ギャラリー] をクリックしてから、横向きの [テキスト ギャラリー] をクリックしてアプリに追加します。

    横方向のテキスト ギャラリーを追加するアイコン付きボタン

    既定では、ギャラリーにはプレースホルダー テキストが含まれており、スクリーンの左上隅にあります。

  3. [項目] ダイアログ ボックスで rss_1 をクリックすると、インポートしたデータが表示されます。

    [項目] ダイアログ ボックスでギャラリーにデータをバインドする

    既定では、ギャラリーのさまざまな場所にさまざまな種類のデータが表示されますが、それらの場所は Project Siena ブログ内のコンテンツに適切ではありません。次のいくつかの手順では、ギャラリー上部にブログ記事のタイトルを大きな文字で表示し、タイトルの下にはそれよりも小さな文字で公開日を、そしてブログ記事の最初の段落をその公開日の下に表示するようにアプリを設定します。

  4. [項目] ダイアログ ボックスの右上隅の [表示する列の選択] をクリックします。

  5. 表示する情報の種類を指定するには、[Heading1!Text] をクリックします。

    見出し 1 の要素にタイトルを表示する

  6. [タイトル] をクリックしてから、ダイアログ ボックスの [戻る] ボタンをクリックします。

    タイトルを表示するために見出し要素を設定する

  7. 公開日を表示するためにサブタイトル要素を変更し、説明を表示するために本文要素を変更します。

    ギャラリーの切り捨てられたデータ

    この時点で、コンテンツはギャラリー内に表示されていますが、テキストは既定のサイズではこの要素に収まりません。この問題は次の手順で修正できます。

Dn632702.collapse_all(ja-jp,VS.111).gifギャラリーの要素を調整する

この手順では、より多くのブログ記事が表示されるようにギャラリーを拡大し、その後に、長めのタイトルも正しく表示されるように、ギャラリー内で各要素のサイズ変更と移動を行います。

  1. 下端近くにあるギャラリーをクリックします。

    ギャラリーを囲む太いグレーのボックスは、そのギャラリーが選択されていることを示しています。

    注意

    要素を選択したときに、選択ボックスの内にある小さな白い四角形または三角形をドラッグすると、選択した要素のサイズを変更できます。また、選択ボックスそのものをドラッグすると、選択した要素を移動できます。

  2. 3 つの記事が表示されるように、ギャラリーを十分に広げてください。

    注意

    最初の記事の左側を表示するためにギャラリーを水平にスクロールしなければならない場合があります。

    テキスト ギャラリーを展開して 3 つの投稿を表示する

  3. 最初の記事の説明要素の任意の場所をクリックし、次に要素を縮小して説明の最初の数行だけが表示されるようにします。

    ギャラリーの最初の項目を変更すると、そのギャラリー内のすべての項目に変更が自動的に反映されます。

  4. 公開日要素を説明要素のすぐ上に移動させ、複数行のタイトルが正しく表示されるようにタイトル要素の高さを広げます。

    2 行のタイトル用に見出し/タイトル要素を展開する

    注意

    ブログ記事にリンクなどの HTML コードが含まれる場合、説明要素を、UI 要素のリストに含まれる HTML ラベルと置き換えて、説明を示す新しいラベルを構成できます。

オリジナルのデータ ソースを開く

アプリに RSS フィードを追加すると、ユーザーが記事全部を読むかどうかを判断できるようにブログ記事に関する十分な情報を与えられるだけでなく、Web ブラウザーでソースに簡単にアクセスできるようにすることもできます。この手順では、ユーザーがギャラリー内の記事の説明をクリックしたときに、ブラウザー ウィンドウに記事全体が表示されるように、アプリを構成します。

  1. 最初の記事のタイトルをクリックし、次にワークスペースの下部近くの [選択時] をクリックします。

  2. [選択時] ダイアログ ボックスに、次の文字列を入力します。

    Launch(ThisItem!link)

    このアクションを追加した後は、ユーザーがアプリで記事のタイトルをクリックすると、Web ブラウザーでその記事そのものが開くようになります。

参照

その他の技術情報

Project Siena アプリの公開および配置