特定サイトを閲覧するためのアプリを作る「Life with Windows 10 Mibileを題材に」

(*´ω｀*) どなたか「Life with Windows 10 Mobileビュアーアプリ」とかWindows 10 Mobile用に作ってくれないかなあ。。。ﾎﾟｿﾘ

— Life with W10M 編集部 (@Life_w10m) 2016年3月16日

こんな呟きもあったので、簡単にですが、こういうアプリを作る方法を書いてみます。

使うもの

• Prism
• ReactiveProperty

Prismについては以下のページあたりを見てください。

github.com

使い方についてはここらへんを

github.com

ReactivePropertyについては以下のページあたりを見てください。

github.com

使い方についてはここらへんを

blog.okazuki.jp

出来上がり

こちらにソースは置いてるので自由にクローンしてオリジナルアプリのための土台として使ってください。

github.com

起動すると以下のようにLife with Windows 10 Mobileの最新の何件かの記事がリスト形式で表示されます。

記事をタップするとEdgeが立ち上がり対象の記事を閲覧できます。

ちょっとだけ解説

まず、こういうアプリを作るときはRSSを購読するのがお手軽なのでお勧めです。 RSSのURLはLife with Windows 10 MobileではNewsのページにあるのでURLをメモっておきます。

RSSの読み込み

UWPでは、RSSを読み込むためにSyndicationClientというクラスが提供されています。それを使うと以下のようにさくっと読み込むことが出来ます。

var client = new SyndicationClient();
var results = await client.RetrieveFeedAsync(new Uri("http://w10m.jp/rss"));
this.Posts = results
    .Items
    .Select(x => new Post
    {
        Title = x.Title.Text,
        Uri = new Uri(x.Id)
    })
    .ToArray();

Postsプロパティは単純な変更通知プロパティです。ViewModelではReactivePropertyを使って単純にViewへそのまま公開しています。

public MainPageViewModel(LifeWithW10MViewer model)
{
    this.Model = model;
    this.Posts = this.Model
       .ObserveProperty(x => x.Posts)
       .ToReadOnlyReactiveProperty()
       .AddTo(this.Disposable);
}

ブラウザの表示

RSSはListViewに表示してるのですが、それをタップしたときにブラウザを起動する必要があります。 そういう時のためにLauncherクラスがあります。URLを渡すとブラウザを起動してくれる便利なやつです。

public async void ItemClick(object sender, ItemClickEventArgs e)
{
    var target = e.ClickedItem as Post;
    await Launcher.LaunchUriAsync(target.Uri);
}

残作業

オリジナルアプリにするにあたって以下の残作業があると思います。

エラー処理

すいません。してません。RSS読むところを適当にtry catchで囲ってあげましょう。

ブランディング

自分のアプリっぽく色やロゴを決めてブランディングします。（今はデフォルトの見た目なので、そのままストアに出すとアイコンで落とされる）

オリジナル機能の追加

このままだとRSSを表示してるだけなので、もっとこうサイトを見るだけよりも便利！って思うような機能（これ大事だと思います）を追加するといいと思います。

命名

いい名前つけましょう。

ストアに公開！

ストアに公開して皆に使ってもらいましょう！