かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

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

使うもの

  • Prism
  • ReactiveProperty

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

github.com

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

github.com

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

github.com

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

blog.okazuki.jp

出来上がり

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

github.com

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

f:id:okazuki:20160317212617p:plain

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

f:id:okazuki:20160317212639p:plain

ちょっとだけ解説

まず、こういうアプリを作るときは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を表示してるだけなので、もっとこうサイトを見るだけよりも便利!って思うような機能(これ大事だと思います)を追加するといいと思います。

命名

いい名前つけましょう。

ストアに公開!

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