すぱこーRSSリーダーのUWPアプリの開発日誌(Vol.2 RSSフィード一覧を表示する①)

Nia-TN-SDF-A2

こんにちはー!ニアです。

前回は、すぱこーRSSリーダーのUWPアプリのプロジェクト作成し、GitHubへのアップロードを行いました。

今回から、アプリのプログラミングを始めて行きます。

 

1. RSSフィードのコンテンツ一覧画面のUIを作成

1.1. ヘッダー部とRSSフィード一覧表示部の設置

まずは、RSSフィードのコンテンツ一覧を表示するUIを作っていきます。

su2-1

ソリューションエクスプローラーからMainPage.xamlを開きます。

su2-2

Page.ContentにあるGridを分割します。上からヘッダー部、RSSフィード一覧表示部とします。

Grid.Row Height
ヘッダー部 0 40
RSSフィード一覧表示部 1 *

ヘッダー部にTextBlockを設置します。FontSizeには、テーマのリソースで定義されている「HubSectionHeaderThemeFontSize」が丁度いいので、それを設定しました。

RSSフィード一覧表示部にはListBoxを設置します。リストボックスの項目には、左側にサムネイル画像を、右側にタイトルと作者、投稿日を表示するようにレイアウトを組みました。

 

コントールを設置したので、試しにアプリを実行してみましょう。ターゲットを「ローカルコンピューター」に設定し、デバッグを開始します。

su2-3

実行してみると、TextBlockやListBoxのコントロールは正しく設置されていることが分かります。

su2-4

 

1.2. アプリのテーマカラーを決める

UWPアプリやその前身であるWindowsストアアプリには、白系の「Light」テーマと黒系の「Dark」テーマの2種類のテーマが用意されています。

su2-5 su2-6

あなたはどちらのテーマが好き?

 

今回作成するアプリはDarkテーマを使用していきます。

それをどこで設定するのかというと、App.xaml内ののApplicationクラスにあるRequestThemeプロパティです。

そのプロパティの値をLightからDarkに変更します。

すると、背景色は黒系に、文字色は白系に変わりました。

su2-7

 

1.3. ファイル名とクラス名を変更してみよう

ここで、ファイル名を「MainPage.xaml」から「SpacoRSSListView.xaml」に、クラス名を「MainPage」から「SpacoRSSListView」に変更します。

クラス名を変更する時は、C#側のコード側から名前を変更するとよいです。クラス名の所にカーソルを置いてCtrlキーを押しながらRキーを2回押すと、下の画像のようにクラス名の変更を行うことができます。

su2-8

 

2. フォルダーを作成しよう

今回作成するアプリでは、RSSフィードを取得して管理するModelクラスと、先ほど作成したViewクラス、それらを仲介するViewModelクラスでMVVM(Model-View-ViewModel)パターンを構成していきます。

そこで、ソースコードをより管理しやすくするため、Model、View、ViewModel、その他でフォルダー分けをします。

ソリューションエクスプローラーでプロジェクトを右クリックし、メニューから「追加」→「新しいフォルダー」を選択します。

su2-9

フォルダー名に「Models」と設定します。

su2-10

同じように「Views」、「ViewModels」フォルダーを作成します。ちなみに私は、その他のソースファイルを格納するフォルダー名を「Common」と付けています。

su2-11

フォルダーを作成したら、早速SpacoRSSListView.xamlをViewsフォルダーへ移動しましょう。

su2-12

XAMLファイルを移動させると、分離コードのファイルも一緒に移動しますよ。

 

3. ひとまず、Gitにコミットしよう

ちょっと記事が長くなりましたので、区切りの良いところで、ここまでの作業をGitにコミットしてみましょう。

チームエクスプローラーから「変更」ボタンを押します。

su2-13

Visual Studioのウィンドウ右下にある、ペンのマークをクリックしても同じです。

su2-14

コミットメッセージ入力欄にコメントを入力し、「すべてをコミット」ボタンを押します。

su2-15

su2-16

 

3.1. GitHubにプッシュする

今度はGitHubにプッシュしてみましょう。

チームエクスプローラーから「同期」ボタンを押します。

su2-17

プッシュ操作も、Visual Studioのウィンドウの右下にショートカットがあります。

su2-18

しかし、developブランチはGitHub側のリポジトリでは作成していないので、「公開」をクリックしてそこに発行しましょう。

su2-19

コマンドだと、ブランチの発行もpushなのね。

developブランチが正常に発行されたことを確認します。

su2-20

ブランチ一覧を見ると、remotes/origin(GitHubのリポジトリ)にdevelopブランチがありますね。

su2-21

 

4. おわりに

今回は、RSSフィード一覧を表示するためのViewクラスを作成しました。

次回は、すぱこーRSSフィードを取得して管理するModelクラスを作成していきます。

 

それでは、See you next!

 

この記事をシェアする
Chronoir.netのRSSフィードを購読する

About : ニア(Nia)

紅茶とコーヒーが好きな湘南生まれのプログラマー/ITエンジニアです。主にC#/C++/PHPを使ってプログラミングをしています。趣味は写真撮影と音ゲーです。時々イラストを描いています。プログラミングを勉強している方々と仲良くなりたいです! 興味を持っている分野:UWP/Xamarin/Android Wear/WPF/Windows/Visual Studio/WordPress/KUSANAGI/nginx

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*