読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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

UWP

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

使うもの

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

命名

いい名前つけましょう。

ストアに公開!

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