テンプレートからはじめる、手づくりwindows8アプリ

1. Windows 8
アプリ開発入門
buu
ITC2013

2. 自己紹介
 電気電子工学科 ３ねんせー
 Twitter @buu0528
 すきなもの？
 あんなものや、こんなもの。

3. Windows8アプリとは？
 フラットなUI
 洗練された動作
 文字の効果的な配置によるデザイン
（タイポグラフィ）
 もとはロンドンや日本の駅などで
用いられていたデザイン

4. Start Screen

5. Weather

6. Periodic Table

7. Fresh Paint

8. CodeWriter

9. Designing Metro style: principles and personality
http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-395T
共通点は…？

10. 新着情報をチェックする
アプリを作成してみよう
I. 準備
II. デザインの変更
III. データの変更
IV. タイルの変更
V. プライバシーポリシーの設定
VI. ロゴの作成と設定
VII. Windowsストアへの登録

11. 作成例
 このようなアプリが、すぐに作れます！

12. 1.準備
 Windows 8 と Visual Studio 2012 の準備
 プロジェクトを作成しテンプレートをえらぶ！

13. Windows 8と
Visual Studio2012の 準備
テンプレートをダウンロード
[MSDN Windows 8 アプリ開発体験テンプレート]
http://msdn.microsoft.com/ja-jp/jj556277.aspx
テンプレートを配置
[zipのまま以下のパスへ入れる]
%USERPROFILE%DocumentsVisual Studio
2012TemplatesProjectTemplatesVisual C#
Windows8にVisual Studio 2012をインストール
DreamsparkでVisual Studio 2012 Professionalがダウンロードできます

15. プロジェクトを作る
 Visual Studio 2012を起動して新しいプロジェクトを作
成し、「Visual C#」テンプレート一覧から
「NewsReaderAppCS」を見つけて開きます。

16. プロジェクトの実行
 F5キーもしくは をクリックして、プロ
ジェクトを実行してみましょう。

17. アプリのアイディアを練る
 表示する内容を決める
 RSSフィードを見つける
 ブログ、twitter、ニュースサイトなど…
 画像も載せられます

18. 2.全体デザインの変更
 テーマを変更する
 タイトルを変更する
 トップページの画像を変更する

19. テーマを変更する
 デフォルトテーマはダーク（dark）
 XAMLファイルを編集します。
 背景色を変えるには、以下のColor指定を変更します。
<Application
・・・・・
RequestedTheme= "Light"
・・・・・>
App.xaml 7行目に追加
<SolidColorBrushx:Key="FeedReaderBackgroundBrush"C
olor="#FF0A2562"/>
App.xaml 29行目

20. 色の変え方
 <SolidColorBlush …/>の行にカーソルを置く
 プロパティビューより編集

21. タイトルを変更する
<x:String x:Key=“AppName”>アプリの名前</x:String>
App.xaml 23行目

22. トップページに画像を追加
 画像をAssetsフォルダに追加しておき、以下の操作を
行ってプロジェクトに追加します。

23. トップページに画像を追加
 以下のXAML記述を追加します。
<GridView.Header>
<StackPanel Orientation="Vertical" Width="700"
VerticalAlignment="Top" Margin="0,45,80,0">
<Image Source=“Assets/画像ファイル.jpg" Margin="0,0,10,10" />
</StackPanel>
</GridView.Header>
GroupedItemsPage.xaml 74行目から追加

24. 3.データの変更
 RSSを用いる
 Twitterを用いる

25. RSSを用いる
 RSSとは
 WEBサイトの更新情報を配信するためのデータ形式のひとつ。

26. RSSを用いる
 ブログサイト等でも提供されていることが多い。
 RSSのマークが目印！

27. RSSを用いる
 RSSを読み込ませる記述
 複数のRSSを読み込ませたい場合は、feed2以降も同様に
指定してください。
 RSS1.0、RSS2.0、Atomのいずれの形式にも対応してい
ます。
NewsDataGroup feed1 =
await GetFeedAsync("http://feed.rssad.jp/rss/gigazine/rss_2.0", "g1");
if (feed1 != null)
{
feed1.NumberOfTaken = 16; // トップ画面に表示する件数を指定 (既定値は4件)
_NewsDataSource.AllGroups.Add(feed1);
}
NewDataSource.cs 663行目以降（LoadRemoteDataAsync()内）

28. Twitterを用いる
 Twitterの情報を読み込ませる記述
 Twitter検索
 await TwitterSearchAsync(“検索キーワード", “GroupID");
 Twitterユーザータイムライン取得
 await TwitterUsertimelineAsync(“username", “GroupID");
/* 記述例 */
NewsDataGroup feed41 =
await TwitterUsertimelineAsync(“buu0528", "g41");
if (feed41 != null)
{
_NewsDataSource.AllGroups.Add(feed41);
}
NewDataSource.cs 725行目以降を参照（LoadFeedAsync()内）

29. 不要なデータソース削除
 不要なfeed変数はすべて削除していきます。
 feed変数を削除することでタイルは表示されなくなり
ます。

30. 4.タイルの変更
 タイルの表示を変更する
 タイルの色を変更する

31. タイルの表示を変更する
 テンプレートを変更してタイルの表示をカスタマイズできます。
 たとえば、タイルのサイズは Width=“250” Height=“250”となっ
ている部分を変更します。
<DataTemplate x:Key="DefaultGridItemTemplate">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Grid.RowDefinitions>
<RowDefinition Height="65*"/>
<RowDefinition Height="33*"/>
<RowDefinition Height="27*"/>
</Grid.RowDefinitions>
<Border Background="{StaticResource BlockBackgroundBrush}" Grid.RowSpan="3" />
<TextBlock Text="{Binding Title}" Style="{StaticResource GridTitleTextStyle}" Grid.Row="0" />
<TextBlock Text="{Binding Description}" Style="{StaticResource GridDescriptionTextStyle}“
Margin="12,0,12,6" Grid.Row="1" />
<StackPanel VerticalAlignment="Bottom" Orientation="Horizontal"
Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Grid.Row="2">
<TextBlock Text="最終更新日:" Margin="12,4,0,8" Height="42"/>
<TextBlock Text="{Binding PubDate, Converter={StaticResource DateConverter}}"
Margin="12,4,12,8" />
</StackPanel>
</Grid>
</DataTemplate>
App.xaml 67行目以降 DefaultGridItemTemplate

32. タイルの色を変更する
 タイルの色を変更する場合は、以下の部分を編集します。
<!-- GridView テンプレート -->
<SolidColorBrush x:Key="BlockBackgroundBrush"
Color="#FF557EB9"/>
App.xaml 55行目

33. 5.プライバシーポリシーの
設定
 プライバシーポリシーを設定する

34. プライバシーポリシーを
設定する
 Webページを利用するアプリはプライバシーポリシー
の記述が必須です。一般公開する場合には設定してく
ださい。
 インターネットから参照可能なブログなどのページを
つかってもかまいません。
 初期設定ではマイクロソフトのプライバシーポリシー
が書かれています。
#region 設定コントラクト
// アプリに応じて、必ず変更すること
private const string URI_PrivacyPolicy =
"http://privacy.microsoft.com/en-us/default.mspx";
App.xaml.cs 102行目 設定コントラクト内

35. 6.ロゴの作成と変更
 アイコンの作成と変更

36. ロゴの作成と変更
 Assets内にはいっている画像がアイコンとなっています。
 ファイル名がNewsReaderからはじまるものは、すべてアイ
コンや起動時スクリーンなどとしてシステムから使われます。
 画像は、ダブルクリックして開けば編集が可能です。

37. ロゴの作成と変更
 Package.appxmanifestを開いて任意の画像を選ぶこと
もできます。
 指定されたサイズの画像を作成し、選択しましょう。

38. 7.Windowsストアへの登録
 学生であれば、Windowsストアにおいて無料でアプリを販売す
ることができます。
 Microsoftのアカウント、クレジットカードを用意して、
Dreamsparkから開発者登録すればおｋ！
 https://www.dreamspark.com/Student/Windows-8-App-
Development.aspx
 「○ッキー」や、「○これ」みたいなアプリをつくって成功でき
れば…！！！？？？

39. お疲れ様でした！
QUESTION?