Windows 8 / RT アプリ
勉強会
テンプレートを使った
ストア・アプリの作成 (C#編)




                              1
Windows 8 / RT アプリ 勉強会   2012/11/3
著書
自己紹介                                 著作
                                                 「速攻入門 C#」 (2012/3)
                                                 技術評論社、共著
                                                 「ソフトな彼女とハードな
                                                 彼氏。」(2012/3) アジャイ
                                                 ルマインドvol.1 掲載
                                             記事
        biac (山本 康彦)                             連載 「C#でTDD入門」
                                                  CodeZine
           BluewaterSoft                         週刊連載「WinRT/Metro Tips」
                                                  @IT - .NET開発者中心
     http://www.bluewatersoft.jp/
                                                 …etc.

                                             Windows 8 Metro Style App.
•    名古屋大学工学部(修士)
                                             Windows Phone 8
•    HONDA R&Dで自動車設計                ソフトウェア   …Windows系の最新技術
•    1994~ ソフトウェア業界                   開発
•    2012~ BluewaterSoft                     TDD(コーディング技法)の普及


                                                                          2
    Windows 8 / RT アプリ 勉強会                                           2012/11/3
最近は、こんなアプリを書いてます
                         ・クラウディアさんタイマー
                         ・bwNotepad: 簡易メモ帳
                         ・青空文庫リーダー・ライト
自己紹介 (続き)
                         Windowsストアで公開中!!
                                                  3
Windows 8 / RT アプリ 勉強会                       2012/11/3
►   Windows 8            ►   Windows Phone 8




かつて Metro と呼ばれていた何か
⇒ "Windows 8 ストア・アプリ"
                                                    4
Windows 8 / RT アプリ 勉強会                         2012/11/3
►   プログラマ的には…              ►   商品名としては…

    Windows Runtime の略         ARM用の Windows 8

►   Metroスタイル・アプリの開発に      ►   ARM CPUで動くWindows 8
    使うAPIセット。
                           ►   Metroスタイル・アプリとOffice
►   実体はCOM                     2013のみ。ユーザーには、ネイ
    .NETから使いやすい仕掛けが付           ティブアプリのインストールを許
    いた。Windows APIの再創造だと       さない。
    思ってもいい。
                           ►   Windows Phone 8 のOSは、
                               Windows RTベース。



ん!?
タイトルの「RT」って、ナニ?
                                                            5
Windows 8 / RT アプリ 勉強会                                 2012/11/3
►   Windows 8 (必須)              ►   お、お金が・・・ orz

►   Visual Studio (必須)
                                ►   学生なら! (高専、大学等)
    ・Express (無償) で OK
                                    ⇒ DreamSparkプログラム
    ・Windows Phone 8 は、
                                    http://t.co/fdunBKad
      SDK を別途インストール
      (Express もアリ)
                                ►   設立 3年以内のベンチャーなら!
►   開発者アカウント (必須)                   ⇒ BizSpark プログラム
    年会費                             http://t.co/GqDpfCog
    Windows 8     4,900円 (個人)
    Windows Phone 9,800円            どちらも、開発ツールとアカウン
    ※ キャッシュカード必須                    トが無料に!!




開発環境
                                                                6
Windows 8 / RT アプリ 勉強会                                     2012/11/3
►   .NET プログラマー向き         ►   Web プログラマー向き

    XAML + C# (VB)            HTML + JavaScript

►   C++も使える               ►   ただしクラスライブラリは、
    DirectX 使うには C++ 必須       C# 等で作る必要がある
►   サンプルコード等は、            ►   ごめん、C#er には JavaScriptで
    C# C# C# C# C# C#         のコーディングはタルすぎ
    C# ・・・                    て・・・
                              JavaScriptの偉い人にお任せ!
    VBは不利




作り方 (ざっくりw
                                                        7
Windows 8 / RT アプリ 勉強会                            2012/11/3
►   @IT 『 Metroスタイル・アプリ                                    ►   @IT 『「コントラクト」でMetro
    の開発者が知るべき3つのこと』                                            スタイル・アプリのサンドボック
    http://www.atmarkit.co.jp/fdotnet/chushin/readyforwi
                                                               スを乗り越える!』
                                                               http://www.atmarkit.co.jp/fdotnet/chushin/readyforwi
    n8app_01/readyforwin8app_01_01.html
                                                               n8app_02/readyforwin8app_02_01.html




まじめに勉強する (その1)
                                                                                                                8
Windows 8 / RT アプリ 勉強会                                                                                     2012/11/3
►   MSDN:「C# または Visual Basic          ►   チュートリアルをやりとげると、
    を使った初めての Metro スタイ                     こんなアプリが完成!!
    ル アプリの作成」チュートリアル
    http://msdn.microsoft.com/ja-
    jp/library/windows/apps/hh974581

►   パート 1: "Hello, world" アプリを作
    成する
►   パート 2: アプリのライフサイクル
    と状態を管理する
►   パート 3: ナビゲーション、レイア
    ウト、ビュー
►   パート 4: ブログ リーダーを作成す
    る




まじめに勉強する (その2)
                                                            9
Windows 8 / RT アプリ 勉強会                                 2012/11/3
►   サンプルコード                             ►   Visual Studio からも参照可能

    http://code.msdn.microsoft.com/wi
    ndowsapps/




まじめに勉強する (その3)
                                                                    10
Windows 8 / RT アプリ 勉強会                                          2012/11/3
►   MSDN 「Windows 8 アプリの認                   ►   Metro スタイルアプリの
    定の要件」                                       ガイドライン
    http://msdn.microsoft.com/ja-               http://bluewatersoft.cocolog-
    jp/library/windows/apps/hh694083.aspx       nifty.com/blog/2012/05/metro-a386.html




                                  遵守していないと、
                                 ストアの審査がヤバい!!



まじめに勉強する (その4)
                                                                                         11
Windows 8 / RT アプリ 勉強会                                                             2012/11/3
►   書籍

                              基礎から学ぶ
                         Windowsストアアプリ開発




                             西村 誠 (著)




まじめに勉強する (その5)
                                           12
Windows 8 / RT アプリ 勉強会                  2012/11/3
・・・そんなん、
やってられっか~っ!? orz
勉強しなきゃならんことがいっぱいあるのは、分かった!
だから、おいおい勉強していくとして・・・

とりあえず、手っ取り早く作らせてよ~!!!
                               13
Windows 8 / RT アプリ 勉強会       2012/11/3
そんなあなたに、テンプレート
                  ・テンプレートを改造していく
                  ・改造に必要なことから勉強していく     14
Windows 8 / RT アプリ 勉強会                2012/11/3
►   テンプレートのままでは、
    ストアの審査に通らない!!
►   なにそれちょっと致命的! orz
►   最低限、付け加えないといけないもの
    ・ヘルプ(about)画面
    ・プライバシーポリシー (ケイパビリティ付与したアプリ)
►   こいつらも実装したいよね
    ・アプリ バー
    ・セマンティック ズーム
    ・検索チャーム
    ・共有チャーム




Visual Studio 付属テンプレートの
欠点
                                     15
Windows 8 / RT アプリ 勉強会             2012/11/3
►   日本Microsoft独自のコンテンツ
    http://msdn.microsoft.com/ja-jp/jj556277




MSDNの
「開発体験テンプレート」
                                                 16
Windows 8 / RT アプリ 勉強会                         2012/11/3
MSDNの
「開発体験テンプレート」
                           17
Windows 8 / RT アプリ 勉強会   2012/11/3
►   テンプレートをダウンロード
►   保存先は、My Documentの下の
    Visual Studio 2012
    Templates
    ProjectTemplates
    Visual C# (または JavaScript)
►   zipのまま (展開不要)




開発体験テンプレート改造(その1)
~ ダウンロードする
                                    18
Windows 8 / RT アプリ 勉強会            2012/11/3
「NewsReader テンプレート XAML/C# 用」テンプレートをそのままビルド



開発体験テンプレート改造(その2)
~ テンプレ選んでプロジェクト作って、
 とりあえず F5 !!
                                                19
Windows 8 / RT アプリ 勉強会                        2012/11/3
DataModel の NewsDataSource.cs 690行あたり

開発体験テンプレート改造(その3)
~ フィードを変えてみる
                                             20
Windows 8 / RT アプリ 勉強会                     2012/11/3
開発体験テンプレート改造(その4)
~ 変わった!!
                           21
Windows 8 / RT アプリ 勉強会   2012/11/3
App.xaml 23行、29行

開発体験テンプレート改造(その5)
~ タイトルや背景色を変えてみる
                           22
Windows 8 / RT アプリ 勉強会   2012/11/3
開発体験テンプレート改造(その6)
~ 変わった!!
                           23
Windows 8 / RT アプリ 勉強会   2012/11/3
►   ヘルプ画面は、テンプレの改造で
    よい。
    かっこよくするならWebViewを!
►   プライバシーポリシーは、個人的
    な情報をサーバーにアップしない
    なら、極端な話
    「個人情報は取得しません」
    の1行だけでもいい。
    また、自分のサイトを持っていな
    くても、gistに置いて審査に通し
    た猛者もいる!




開発体験テンプレート改造(その7)
~ ヘルプやプライバシーポリシー
 のページを作って・・・
                           24
Windows 8 / RT アプリ 勉強会   2012/11/3
テンプレの Assets フォルダに入っている画像は、全部描き変える!

開発体験テンプレート改造(その8)
~ ロゴやスプラッシュを描いて
                                           25
Windows 8 / RT アプリ 勉強会                   2012/11/3
►   出し方は、↓コレを参照

    「Windows ストア アプ
    リ 登録の手引き」(PDF)
    「Windows 8 アプリ開発体験テン
    プレート」のページ
    http://msdn.microsoft.com/ja-
    jp/jj556277
    の下のほうからリンクされている。
    http://download.microsoft.com/download/0/3/B/03B9E4AD-
    28FE-4DE1-96EF-8AD50EC74A02/registration%20guide.pdf




開発体験テンプレート改造(その9)
~ 完成!! ストアに出そう!
                                                               26
Windows 8 / RT アプリ 勉強会                                       2012/11/3

テンプレートを使ったストアアプリの作成

  • 1.
    Windows 8 /RT アプリ 勉強会 テンプレートを使った ストア・アプリの作成 (C#編) 1 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 2.
    著書 自己紹介 著作 「速攻入門 C#」 (2012/3) 技術評論社、共著 「ソフトな彼女とハードな 彼氏。」(2012/3) アジャイ ルマインドvol.1 掲載 記事 biac (山本 康彦) 連載 「C#でTDD入門」 CodeZine BluewaterSoft 週刊連載「WinRT/Metro Tips」 @IT - .NET開発者中心 http://www.bluewatersoft.jp/ …etc. Windows 8 Metro Style App. • 名古屋大学工学部(修士) Windows Phone 8 • HONDA R&Dで自動車設計 ソフトウェア …Windows系の最新技術 • 1994~ ソフトウェア業界 開発 • 2012~ BluewaterSoft TDD(コーディング技法)の普及 2 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 3.
    最近は、こんなアプリを書いてます ・クラウディアさんタイマー ・bwNotepad: 簡易メモ帳 ・青空文庫リーダー・ライト 自己紹介 (続き) Windowsストアで公開中!! 3 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 4.
    Windows 8 ► Windows Phone 8 かつて Metro と呼ばれていた何か ⇒ "Windows 8 ストア・アプリ" 4 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 5.
    プログラマ的には… ► 商品名としては… Windows Runtime の略 ARM用の Windows 8 ► Metroスタイル・アプリの開発に ► ARM CPUで動くWindows 8 使うAPIセット。 ► Metroスタイル・アプリとOffice ► 実体はCOM 2013のみ。ユーザーには、ネイ .NETから使いやすい仕掛けが付 ティブアプリのインストールを許 いた。Windows APIの再創造だと さない。 思ってもいい。 ► Windows Phone 8 のOSは、 Windows RTベース。 ん!? タイトルの「RT」って、ナニ? 5 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 6.
    Windows 8 (必須) ► お、お金が・・・ orz ► Visual Studio (必須) ► 学生なら! (高専、大学等) ・Express (無償) で OK ⇒ DreamSparkプログラム ・Windows Phone 8 は、 http://t.co/fdunBKad SDK を別途インストール (Express もアリ) ► 設立 3年以内のベンチャーなら! ► 開発者アカウント (必須) ⇒ BizSpark プログラム 年会費 http://t.co/GqDpfCog Windows 8 4,900円 (個人) Windows Phone 9,800円 どちらも、開発ツールとアカウン ※ キャッシュカード必須 トが無料に!! 開発環境 6 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 7.
    .NET プログラマー向き ► Web プログラマー向き XAML + C# (VB) HTML + JavaScript ► C++も使える ► ただしクラスライブラリは、 DirectX 使うには C++ 必須 C# 等で作る必要がある ► サンプルコード等は、 ► ごめん、C#er には JavaScriptで C# C# C# C# C# C# のコーディングはタルすぎ C# ・・・ て・・・ JavaScriptの偉い人にお任せ! VBは不利 作り方 (ざっくりw 7 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 8.
    @IT 『 Metroスタイル・アプリ ► @IT 『「コントラクト」でMetro の開発者が知るべき3つのこと』 スタイル・アプリのサンドボック http://www.atmarkit.co.jp/fdotnet/chushin/readyforwi スを乗り越える!』 http://www.atmarkit.co.jp/fdotnet/chushin/readyforwi n8app_01/readyforwin8app_01_01.html n8app_02/readyforwin8app_02_01.html まじめに勉強する (その1) 8 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 9.
    MSDN:「C# または Visual Basic ► チュートリアルをやりとげると、 を使った初めての Metro スタイ こんなアプリが完成!! ル アプリの作成」チュートリアル http://msdn.microsoft.com/ja- jp/library/windows/apps/hh974581 ► パート 1: "Hello, world" アプリを作 成する ► パート 2: アプリのライフサイクル と状態を管理する ► パート 3: ナビゲーション、レイア ウト、ビュー ► パート 4: ブログ リーダーを作成す る まじめに勉強する (その2) 9 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 10.
    サンプルコード ► Visual Studio からも参照可能 http://code.msdn.microsoft.com/wi ndowsapps/ まじめに勉強する (その3) 10 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 11.
    MSDN 「Windows 8 アプリの認 ► Metro スタイルアプリの 定の要件」 ガイドライン http://msdn.microsoft.com/ja- http://bluewatersoft.cocolog- jp/library/windows/apps/hh694083.aspx nifty.com/blog/2012/05/metro-a386.html 遵守していないと、 ストアの審査がヤバい!! まじめに勉強する (その4) 11 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 12.
    書籍 基礎から学ぶ Windowsストアアプリ開発 西村 誠 (著) まじめに勉強する (その5) 12 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 13.
  • 14.
    そんなあなたに、テンプレート ・テンプレートを改造していく ・改造に必要なことから勉強していく 14 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 15.
    テンプレートのままでは、 ストアの審査に通らない!! ► なにそれちょっと致命的! orz ► 最低限、付け加えないといけないもの ・ヘルプ(about)画面 ・プライバシーポリシー (ケイパビリティ付与したアプリ) ► こいつらも実装したいよね ・アプリ バー ・セマンティック ズーム ・検索チャーム ・共有チャーム Visual Studio 付属テンプレートの 欠点 15 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 16.
    日本Microsoft独自のコンテンツ http://msdn.microsoft.com/ja-jp/jj556277 MSDNの 「開発体験テンプレート」 16 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 17.
    MSDNの 「開発体験テンプレート」 17 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 18.
    テンプレートをダウンロード ► 保存先は、My Documentの下の Visual Studio 2012 Templates ProjectTemplates Visual C# (または JavaScript) ► zipのまま (展開不要) 開発体験テンプレート改造(その1) ~ ダウンロードする 18 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 19.
    「NewsReader テンプレート XAML/C#用」テンプレートをそのままビルド 開発体験テンプレート改造(その2) ~ テンプレ選んでプロジェクト作って、 とりあえず F5 !! 19 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 20.
    DataModel の NewsDataSource.cs690行あたり 開発体験テンプレート改造(その3) ~ フィードを変えてみる 20 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 21.
    開発体験テンプレート改造(その4) ~ 変わった!! 21 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 22.
  • 23.
    開発体験テンプレート改造(その6) ~ 変わった!! 23 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 24.
    ヘルプ画面は、テンプレの改造で よい。 かっこよくするならWebViewを! ► プライバシーポリシーは、個人的 な情報をサーバーにアップしない なら、極端な話 「個人情報は取得しません」 の1行だけでもいい。 また、自分のサイトを持っていな くても、gistに置いて審査に通し た猛者もいる! 開発体験テンプレート改造(その7) ~ ヘルプやプライバシーポリシー のページを作って・・・ 24 Windows 8 / RT アプリ 勉強会 2012/11/3
  • 25.
  • 26.
    出し方は、↓コレを参照 「Windows ストア アプ リ 登録の手引き」(PDF) 「Windows 8 アプリ開発体験テン プレート」のページ http://msdn.microsoft.com/ja- jp/jj556277 の下のほうからリンクされている。 http://download.microsoft.com/download/0/3/B/03B9E4AD- 28FE-4DE1-96EF-8AD50EC74A02/registration%20guide.pdf 開発体験テンプレート改造(その9) ~ 完成!! ストアに出そう! 26 Windows 8 / RT アプリ 勉強会 2012/11/3