MSDN 開発体験テンプレートを使用したニュースリーダーアプリの開発(実装編)


Windows 8 の新しい UI 環境 (かつて Metro と呼ばれた) で動作するアプリケーション、通称「Windows ストア アプリ」の開発方法について書いています。

Windows ストア アプリは C,C++,VB,C#,JavaScript のいずれかの言語で開発することができますが、このブログでは HTML + JavaScript での開発について紹介していきます。

なお、以下は前回までの投稿記事となりますので、まだお読みになっていない方はこれからの記事を読む前にぜひご覧ください。

前回の記事では MSDN で公開されている Windows 8 アプリ 開発体験用 テンプレート (HTML + JavaScript) の配置の方法と、実装してある機能について紹介しました。

今回の記事では、上記 Windows 8 アプリ 開発体験用 テンプレートを使用して、実際に任意の RSS を読み込ませて記事を表示させるアプリケーションの開発方法について紹介します。

 

RSS_Reader テンプレートを使用したニュースリーダーアプリの開発

MSDN で公開されている Windows 8 アプリ 開発体験用 テンプレート (以下、RSS_Reader テンプレート)  を使用すると、RSS リーダー アプリを簡単に作成することができます。

以降、準備から完成までの手順について紹介していきます。

なお、RSS がなんだか分からないという方は以下をご覧になるか、ご存知の方に聞いてください。

Wikipedia - RSS
http://ja.wikipedia.org/wiki/RSS

 

 

使用する RSS の選定

RSS リーダーアプリを作成する前に、どの RSS を使用するかを決める必要があります。

RSS_Reader  テンプレートは、既定の状態では RSS 2.0 のフォーマットのみサポートしており、RDF、Atom フォーマットを使用するには若干のカスタマイズが必要になります。

そのため、簡単に開発を行うのであれば、RSS 2.0 のフォーマットのものを選択する必要があります。

簡単な見分け方としては、RSS の中身 (XML) を見て <rss version="2.0"> の記述があればそれはほとんどの場合 RSS 2.0 のフォーマットで記述されています。

RSS 2.0 のフォーマットについて、さらに詳細に知りたい方は、HTML5.JP の羽田野さんが 『RSS 2.0 Specification』 の日本語訳を公開されているのでそちらを参考にされるのが良いでしょう。

<参考>
RSS 2.0 Specification 日本語訳 - futomi's CGI Cafe
http://www.futomi.com/lecture/japanese/rss20.html

 

アプリに使用して見栄えのする RSS とは?

RSS_Reader テンプレートは、記事の一覧画面の画像に、RSS の description 内にある最初の image タグを検出して使用します。

image タグがない場合は代替え画像が表示されます。

image(代替え画像)

また description のテキストは、ニュース記事の本文として扱われるため、ある程度の文章を含んだものがいいでしょう。

たとえば、この MSDN ブログの RSS には、descripeion フィールドにブログの記事が全体が HTML 形式で格納されているためこの RSS_Reader テンプレートのソースとしては理想的といえます。

このブログの RSS を確認するには以下の URL をクリックします。

 

monoe’s blog – RSS
http://blogs.msdn.com/b/osamum/rss.aspx

 

多くの Web ブラウザーは RSS リーダーの機能を持っているため、Web ブラウザから XML の構造は見えませんが、Internet Explprer であれば、ドキュメント内でマウスの右ボタンをクリックし、表示されたコンテキスメニューから [ソースの表示] をクリックすることで XML の構造を確認することができます。

 

image(Internet Explorer で RSS を表示したところ)

 

通常の Web サイトで、RSS を提供している場合は、RSS を示すフィード・アイコンが表示されており、クリックして内容を確認することができます。

 

RSS_Reader テンプレート、既定の RSS の変更

アプリケーションで使用する RSS が決まったら、RSS_Reader テンプレートに既定で記述されている RSS の URL を書き換えていきます。

ここからはサンプルとして MSN自動車 | ニュースMSN 自動車 - 試乗記 の RSS を使用して、自動車ニュースアプリを作成する手順について紹介します。

なお、RSS_Reader テンプレートは、前回の記事を参考にあらかじめ配置を行っておいてください。

[手順]

  1. Visual Studio 2012 を起動
     
  2. メニュー [新規作成] – [プロジェクト] を選択
     
  3. [新しいプロジェクト] ダイアログ ボックスが表示されるので、同ダイアログボックスの左側のツリーより [テンプレート] – [JavaScript] を選択
     
  4. ダイアログボックス中央のリストビューにプロジェクト テンプレートの一覧が表示されるので [RSS_Reader] を選択し [OK] ボタンをクリック
     
  5. Visual Studio 2012 画面右の [ソリューション エクスプローラー] で、/js/data.js をオープン
     
  6. 変数 sourceInfo で定義している RSS の指定を以下のように変更
    var sourceInfo = [{
           url: "http://car.jp.msn.com/rss/sports.aspx",
           group: {
               key: "MSN-sports",
               category: "sports",   
               title: "MSN 自動車 - モータースポーツ/イベント"
           }
       }, {
           url: "http://car.jp.msn.com/rss/reviews.aspx",
           group: {
               key: "MSN-reviews",
               category: "review",         
               title: "MSN 自動車 - レビュー"
           }
    }];

     

  7. 記事一覧画面でのフィルタ機能のメニューをを変更するため、[ソリューション エクスプローラー] で /pages/home/home.html をオープン
     
  8. キーボードの [ctrl] + [G] キーを押下すると、[指定行へのジャンプ] ダイアログボックスが表示されるので、27 を入力して [OK] ボタンをクリック
     
  9. カーソルが 27 行目に移動するので、<span class="pagetitle">RSS ニュースリーダー</span> を <span class="pagetitle">MSN - 乗用車</span>に変更   
       
  10. キーボードの [ctrl] + [G] キーを押下し、[指定行へのジャンプ] ダイアログボックスに 76 を入力して [OK] ボタンをクリック
     
  11. 76 行めにある <button>タグの id  :  filterMenu1 と id : filterMenu2 のマークアップを以下のように変更
    <button id="filterMenu1"   
       data-win-control="WinJS.UI.MenuCommand"
       data-win-options="{type:'toggle'}">モータースポーツ           
    </button>           
    <button id="filterMenu2"
       data-win-control="WinJS.UI.MenuCommand"
       data-win-options="{type:'toggle'}">レビュー           
    </button>

    (※)変更点は 赤字のところのみです。
     

  12. /pages/home/home.js をオープンし、関数 setFilterMenu の内容を以下のように変更
    function setFilterMenu() {
            document.getElementById("filterMenu0").addEventListener("click",
                function () {
                    execFilter("all");
                    selectedChange(this.id);
                });

            document.getElementById("filterMenu1").addEventListener("click",
                function () {
                    execFilter("sports ");
                    selectedChange(this.id);
                });

            document.getElementById("filterMenu2").addEventListener("click",
                function () {
                    execFilter("review");
                    selectedChange(this.id);
                });
        }

    (※)変更点は 赤字のところのみです。
     

  13. /pages/home/snaphome.html をオープン
     
  14. キーボードの [ctrl] + [G] キーを押下し、[指定行へのジャンプ] ダイアログボックスに 20 を入力して [OK] ボタンをクリック
     
  15. 20 行目にジャンプするので、同行の <span class="pagetitle">RSS NEWS </span> を <span class="pagetitle">MSN - 乗用車</span> に変更
     
  16. /pages/search/searchResults.html をオープン
     
  17. キーボードの [ctrl] + [G] キーを押下し、[指定行へのジャンプ] ダイアログボックスに 36 を入力して [OK] ボタンをクリック
     
  18. 36 行目にジャンプするので、同行にある不要なタグ <img src="/images/GeekFinderHead.png" /> を削除
     
  19. [ソリューション エクスプローラー] で package.appxmanifest をダブルクリック
     
  20. パッケージマニフェスト の編集画面が表示されるので [アプリケーション UI] タブをクリック
     
  21. [アプリケーション UI] タブ内の [表示名 : ] を 「MSN - 乗用車」 に変更

    image
     

  22. [パッケージ化] タブをクリック
     
  23. [パッケージ化] タブ内の [パッケージ名:]、[パッケージ表示名:] をそれぞれ 「MSN - Automobile」に変更

    image
     

以上で MSN - 乗用車 アプリはほぼほぼ完成です。

「ほぼほぼ」 と書いたのは、Windows ストア にサブミットするにはタイルの画像や、プレビューの画像など、パッケージ化に必要な画像の設定などが必要になるからです。

パッケージ化についての詳しい設定は以下のドキュメントをご覧ください。

 

マニフェスト デザイナー
http://msdn.microsoft.com/ja-jp/library/windows/apps/br230259.aspx

 

パッケージ化の設定は不完全ではあるものの、アプリとしてはこの状態で完成ですので、実行して動作を確認します。

Visual Studio 2012 で編集中のプロジェクトを実行するには、メニュー[デバック] – [デバック開始] をクリックするか、キーボードの [F5] キーを押下します。

image
(MSN-乗用車 アプリを実行したところ)

アプリが起動したら、前回の記事中の 「プロジェクトに既定で実装されている機能の確認」の内容に従い、実装されている機能が正常に動作するか確認してください。

 

補足 1  :  description の内容が HTML の場合

RSS によっては、記事の説明である description のデータが HTML で書かれている場合があります。

その場合は、pages/news/article.js をオープンし、以下のように 75 行目の構文のコメントアウトを解除します。

//本文が HTML で記述されている場合は以下を使用
document.getElementById("article").innerHTML = toStaticHTML(article);

 

この設定により description 内のマークアップが解釈されるようになり、リッチがコンテンツが表示されるようになります。

 

 


補足 2  :  RDF フォーマットへの対応

RSS_Reader テンプレートが生成するアプリ プロジェクトは RSS 1.0  で使用されている RDF フォーマットにも簡単に対応できます。

ちなみに目的の RSS のフォーマットが RDF がどうか確認するには、RSS の XML の内容を確認し、”<rdf:RDF “ とあればRDF です。

RSS_Reader プロジェクトを RDF に対応させるには、以下の手順で変更を行います。

[手順]

  1. Visual Studio 2012 画面右の [ソリューション エクスプローラー] で、/js/data.js をオープン
     
  2. 59 行目の querySelectorAll 関数の引数を、以下のように "rss > channel > item" から “RDF > item"  に変更
    var items = resXML.querySelectorAll("RDF > item");

     

  3. 66 行目の querySelector 関数の引数を、以下のように “pubDate” から “date” に変更
    var _date = new Date(_item.querySelector("date").textContent);

               

上記の設定で RDF フォーマットの RSS を扱うことができるようになります。

Atom や、その他の XML フォーマットにしても、構造に合わせてアイテム (ニュース記事一覧) までのパスと、各プロパティ名を適宜対応したものに書き換えることで対応することができます。

 

【とても重要】 RSS の二次利用について

RSS はコンテンツであり、当然のことながら著作権があり、企業の配信している RSSなどで は、二次利用を許可していない場合もあります。

よって、第三者の RSS をアプリに使用する場合には、配信元の Web サイトをよく調べ、RSS の二次利用を禁止する記載が無いかを充分に確認してください。

 

----- ・ ----- ・ ----- ・ ----- ・ ----- ・ ----- ・ ----- ・ ----- ・ ----- ・ -----

今回は MSDN で公開されている Windows 8 アプリ開発体験テンプレートを使用したアプリの作成方法を紹介しました。

次回は、RSS ではなく、Web で公開されている API を使用する例として、Youtube の API を使用したアプリの使い方を紹介したいと思います。(会社から怒られなければ、ですが。)

 

★ おしらせ ★

Windows ストア アプリの開発をコミットした 8 Knights (騎士)、絶賛募集中!

様々な特典があります。タイムリミットは 12 月 16 日 (日)、興味のある方は Web サイトへ急げ!

 

8 Knights
http://www.microsoft.com/ja-jp/events/8nights/8knights/default.aspx

 

 

 

Real Time Analytics

Clicky

Comments (1)

  1. WDLC では 「Digital Youth Award」と題した若者向け(30歳未満)のコンテストを開催しています。

    Windows ストア アプリはもちろん、アプリのアイディアだけでも応募できるので、良いアイデアをお持ちの方はぜひご応募ください。

    digitalyouth.jp/…/index.html

Skip to main content