すぱこー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 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	<Grid.RowDefinitions>
		<RowDefinition Height="40"/>
		<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
</Grid>
  Grid.Row Height
ヘッダー部 0 40
RSSフィード一覧表示部 1 *

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

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
	<Grid.RowDefinitions 【中略】/>

	<Grid Grid.Row="0" Padding="5"
		Background="DarkGreen">
		<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
				FontSize="{ThemeResource HubSectionHeaderThemeFontSize}"
				Text="すぱこー 各話リスト"/>
	</Grid>

</Grid>

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

<ListBox Grid.Row="1"
	 x:Name="SpacoRSSList"
	 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
	 Background="{ThemeResource AppBarBackgroundThemeBrush}">
	<ListBoxItem>
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="140"/>
				<ColumnDefinition Width="*"/>
			</Grid.ColumnDefinitions>

			<!-- サムネイル画像 -->
			<Image Grid.Column="0" Margin="5"
				   MaxHeight="130" Stretch="UniformToFill"
				   Source="Assets/Square150x150Logo.png"/>

			<!-- タイトル、作者、投稿日時 -->
			<StackPanel Grid.Column="1">
				<TextBlock Padding="5,3,5,1"  
					   FontSize="{ThemeResource ListViewHeaderItemThemeFontSize}"
					   TextWrapping="Wrap" Foreground="Lime"
					   Text="[タイトル]"/>
				<TextBlock Padding="5,1,5,3"
					   FontSize="{ThemeResource ContentControlFontSize}"
					   TextWrapping="Wrap"
					   Text="[作者]"/>
				<TextBlock Padding="5,1,5,2"
					   FontSize="{ThemeResource ContentControlFontSize}"
					   TextWrapping="Wrap" Foreground="Yellow"
					   Text="0000年01月01日 00:00:00"/>
			</StackPanel>
		</Grid>
	</ListBoxItem>
</ListBox>

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

su2-3

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

su2-4

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

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

su2-5 su2-6

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

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

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

<Application
    x:Class="SpacoUniverse.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SpacoUniverse"
    RequestedTheme="Light">

</Application>

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

<Application
    x:Class="SpacoUniverse.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SpacoUniverse"
    RequestedTheme="Dark">

</Application>

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

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

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

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

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

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

su2-13

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

su2-14

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

su2-15

git commit -m "コミットメッセージ"

# 上の画像の場合
git commit -m "ヘッダー部とRSSフィード一覧表示部を設置"

su2-16

3.1. GitHubにプッシュする

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

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

su2-17

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

su2-18

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

su2-19

git push origin develop
Nia09.png
コマンドだと、ブランチの発行もpushなのね。

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

su2-20

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

su2-21

4. おわりに

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

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

それでは、See you next!

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

ニア(Nia)

サーバー・フロント・DB・インフラ(クラウド)エンジニア。主にC#/PHP(最近はTypeScriptも)を使っています。最近はDockerやWebアプリ、UWPやモバイルアプリ開発(Xamarin)、ブロックチェーン等を探求中。好物は紅茶とコーヒー、シラス丼、趣味は写真撮影と音ゲーです

コメントを残す

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

*

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