すぱこー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.RowHeight
ヘッダー部040
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)

ゲーム系の開発&運用エンジニア(目指すはフルスタック)。主にC#(Unity)/PHPを使っています。最近はDockerやKubernetes、プライベートではAndroid Wearアプリやモバイルアプリ開発(Xamarin)を探求中。好物は紅茶とコーヒー、シラス丼、趣味は写真撮影と音ゲーです

コメントを残す

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください