SlideShare a Scribd company logo
日本マイクロソフト株式会社
エバンジェリスト
大西 彰 @oniak3
Agenda
• 準備: Windows ストア アプリ開発をはじめよう
• 練習: 遊びながら、開発ツールに慣れよう
• 学習: デモで学ぶ、Windows 8 固有の機能の実装方法
• 実践: ライブで体験、テンプレートを使ったアプリ開発
関連情報やサンプルなど後日公開

http://bit.ly/w8devstart
準備:
Windows ストアアプリ
開発をはじめよう
生まれ変わった Windows
 タッチが最優先の機能    複数のフォーム ファクター




 Windows ストア     新たな開発モデル
Windows ストア アプリ開発環境
• マシン                              http://bit.ly/w8try
    理想はデュアルモニタ構成 (1台はタッチ可能なもの)
    高速な開発マシンと、低速なテスト用マシン

•   OS: Windows 8 (仮想マシン上のインストール含む)
•   開発ツール: Visual Studio 2012
•   ドキュメント: MSDNライブラリ http://dev.windows.com
•   サンプル: Windows SDK サンプル (300MB zipファイル)
•   開発体験テンプレート (後半でご紹介)

Developer Camp | 2012 Japan Fall
お名前.com
デスクトップクラウド for Windows アプリ
 http://www.onamae-desktop.com/dev/




Developer Camp | 2012 Japan Fall
Windows 8 プラットフォーム




Developer Camp | 2012 Japan Fall
Windows ランタイムによる開発




Developer Camp | 2012 Japan Fall
練習:
遊びながら、
開発ツールに慣れよう
ツールの使い分け



   Visual Studio 2012                Blend for Visual Studio
• プログラミング                          • 画面デザイン
• デバッグ、テスト                         • コントロール作成
• 配置、パッケージ化                        • アニメーション作成

Developer Camp | 2012 Japan Fall
Demo
Hello XAML / C#
XAML/C# による開発とデバッグ
• Blend for Visual Studio
  • XAML によるデザイン
  • コントロールとテンプレート
  • Visual State Manager
• Visual Studio 2012 による開発とデバッグ
  • 非同期呼び出し (async – await)
  • インテリセンス
  • デバッガー、ブレークポイント、ステップ実行
Developer Camp | 2012 Japan Fall
Demo
Hello HTML / JS
HTML/JavaScript による開発とデバッグ
• Blend for Visual Studio
  • HTML と CSS による ビジュアル デザイン
  • Live DOM と対話モード
  • 画面モードと CSS メディアクエリー
• Visual Studio 2012 による開発とデバッグ
  • インテリセンス、ブレークポイント、ステップ実行
  • DOM Explorer と シミュレーター
  • JavaScript コンソール

Developer Camp | 2012 Japan Fall
メディア プラットフォーム




DRM Client   Source   Decoder    Effects   Encoder   Sink
                         Media Foundation
PlayReady      DirectX          Windows Audio Session API
HTTP ストリーミング
Demo
Hello
XAML-DirectX / C++
XAML-DirectX / C++ による
開発とデバッグ
• XAML と DirectX の同時レンダリング
  • XAML <SwapChainBackgroundPanel />
• C++/CX 11
  • auto, shared_ptr, lamda
  • AMP (GPUでの並列処理)
• DirectX デバッグサポート
  • グラフィックスデバッガーなどの強化
学習:
デモで学ぶ、
Windows 8 固有の機能の
実装方法
Windows ストア アプリ成功への鍵
    http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465427
   企画、コンセプト、ブランディング
   第一印象
                   企画
   UX デザイン
   何度もリリース   リリース                                   デザイン




                                     テスト          実装
http://bit.ly/w8uxdesign
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Windows 8 固有の機能を活用
   グリッド アプリケーション    検索


   タッチ操作
                     共有

   アプリバー
   コントラクト           スタート




   セマンティックズーム       デバイス


   アプリデータとローミング
    プロセスライフサイクル
                     設定


   ライブタイル
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
アプリバー
コントラクト
 Windows ストア アプリでは、ユーザーと OS / アプリの取
  り決めのことをコントラクトと呼んでいます
 アプリが実装できるコントラクト
 ① 検索コントラクト
 ② 設定コントラクト
 ③ ソース共有コントラクト
 ④ ターゲット共有コントラクト
 ⑤ スプラッシュ スクリーン
 ⑥ ファイルピッカー
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465251(v=VS.85).aspx
検索のしくみ
1.   検索ボックスは
     画面のメイン アプリが対象

2.   クエリの候補は
     画面のメイン アプリが提供
     • アプリに検索結果がある語句を
     オートコンプリート


3.   インストール済みで検索コントラクト
     を実装する アプリを一覧表示
検索のしくみ
4.   結果の候補は
     画面のメイン アプリが提供
     • サムネイルとタイトルは必須
     • 有力な結果または完全一致結果を表示
     • ユーザーは結果の詳細を直接表示可能
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
アプリの中断処理    アプリは終了前に
         5 秒以内に終わらせる    通知を受けない


ユーザー
がアプリ
 を起動
          アプリは再開時に
          通知を受け取る


スプラッシュ
 スクリーン
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
実践:
ライブで体験、
テンプレートを使った
アプリ開発
Windows 8 アプリ開発体験
テンプレート
• 日本マイクロソフトのエバンジェリストが作った、
   Windows ストア アプリ用テンプレート
   •   Basic Photo テンプレート XAML/C# 用 Version 1.0
   •   EntertainmentPhoto テンプレート XAML/C# 用 Version 1.0.0.3
   •   NewsReader テンプレート XAML/C# 用 Version 1.8
   •   RSS Reader テンプレート HTML + JavaScript 用 Version 0.1 β
   •   Touch De Po テンプレート XAML/C# 用 Version 2.0


         http://bit.ly/w8atemp
Developer Camp | 2012 Japan Fall
セマンティックズーム    トップ画面    共有コントラクト




設定コントラクト     フィード内一覧   検索コントラクト




 ヘルプ画面        記事詳細     ブラウザーで表示
Demo の指令
残り時間と相談し、
セッションラストに向けて、
UX-TV アプリを完成せよ!
仕様書っぽいのは
3枚だけある…。
UX-TV アプリ                        グリッドテンプレート
                                    使ってね
グループ1 >


       写真

タイトル        text   text   text       text




text        text   text   text       text
UX-TV アプリ
                選択したビデオの再生は
              スムーズストリーミングで頼むよ




1:08 / 4:27
UX-TV アプリ、その他の仕様
 トップ画面の表示は 8 ~ 10 コンテンツで
 フィードURL
  http://channel9.msdn.com/Niners/oniak3/RSS
 URL に規則があるようだ
 http://media.ch9.ms/<中略>/<ファイル名>.wmv
 http://media.ch9.ms/<中略>/<ファイル名>_512.jpg
 http://smooth.ch9.ms/<中略>/<ファイル名>.ism/manifest
 必要な最低限のライブラリはセットアップ済
 セッション後半、ど根性で、すばやく頼む
Smooth Streaming Client SDK Beta 2 for Windows 8

Microsoft Media Platform : Player Framework

                         • オンデマンド再生
                         • ライブ再生
                         • VC-1, H.264
まとめ
Windows アプリの開発
・開発環境の準備
・Visual Studio 2012 と
 Blend for Visual Studio
・Windows 8 固有の機能
・開発テンプレート
Developer Camp | 2012 Japan Fall
ありがとうございました
    http://bit.ly/w8devstart
              aonishi@microsoft.com
Special Thanks to: @shinoblogavi, @tumada, @tomohn, … Eva & AMM, my Boss
Developer Camp 2012 Japan Fall 関係者の皆様、コミュニティ、友人の皆様
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
XAML と
Blend for Visual Studio
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Storyboard アニメーション
• 時間毎のオブジェクトやプロパティの変化を管理
  • 再生、停止など、プログラムから操作




Developer Camp | 2012 Japan Fall
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
画像や図形からコントロールの作成
• ステップ1
  • 素材を選択し、右クリック
  • [コントロールの作成]




Developer Camp | 2012 Japan Fall
画像や図形からコントロールの作成
• ステップ2
  • ベースとなる
    コントロールの選択




Developer Camp | 2012 Japan Fall
画像や図形からコントロールの作成
• ステップ3
  • [状態]パネル




Developer Camp | 2012 Japan Fall
C++、コンポーネン
ト開発
以前
circle* p = new circle( 42 );                         auto p = make_shared<circle>( 42 );
vector<shape*> vw = load_shapes();                    vector<shared_ptr<shape>> vw = load_shapes();
for( vector<circle*>::iterator i = vw.begin(); i !=   for_each( begin(vw), end(vw), [&]( shared_ptr<circle>& s
vw.end(); ++i ) {                                     ) {
    if( *i && **i == *p )                                   if( s && *s == *p )
        cout << **i << “ is a match¥n”;                         cout << *s << “ is a match¥n”;
}                                                     } );
for( vector<circle*>::iterator i = vw.begin();
        i != vw.end(); ++i ) {
    delete *i;
}
                                                “delete” は不要
delete p;
                                                自動ライフタイム管理
                                                例外セーフ
コンポーネント開発と利用
• Portable Class Library
  • 異なるプラットフォームに対応したコンポーネント
• C++ と JavaScript / C# / Visual Basic
  • C++: Windows ランタイムコンポーネントの作成
  • JavaScript: コンポーネントの利用
• C++ と C++
  • DLLの作成
  • スタティック ライブラリ



Developer Camp | 2012 Japan Fall
ゲーム、メディア
グラフィックス デバッガー




Developer Camp | 2012 Japan Fall
ゲームアプリ
http://bit.ly/wa009
Windows   Windows
               Media     Media
WMV, WMA       Encoder   Service




Windows Media Rights
Manager                  Windows Media Player   RTSP
IIS Media
Any Format   Any Encoder   Services




PlayReady®                 Any Devices   HTTP
®
                                         Microsoft                                      Windows Azure

Tools                                                                      ®
                                         PlayReady
                                                                                        Media Encoder


                                                        iOS
                                                 Smooth Streaming Smooth Streaming &
                                                               ®                 ®                 Xbox Application
                                                  & Play Ready         PlayReady
                                                                                                   Development Kit
                                                   SDK for iOS     Client Porting Kits


             Microsoft® Media Platform   Microsoft® Media Platform   Microsoft® Media Platform   Microsoft® Media Platform
              Player                     Content                     Video                       Audience
Frameworks      Framework                  Manager                      Editor                     Insight
ファイル形式 コーデック
      •   H.263, H.264 (Baseline, Main, High)
      •   AAC (LC, HE)
      •   VC-1 / WMV9
      •   WMA (Standard, Voice, lossless, Pro)
      •   MP3
      •   PCM, WAV, ADPCM
      •   MPEG-1 Audio (L1, L2)
主要なクラス
HTML : <video> と <audio>
XAML : MediaElement
                           1:08 / 4:27




再生シナリオ
Web / IIS からのプログレッシブダウンロード
Windows Media サービスのストリーミング (XAMLのみ)
ローカルファイルからの選択
主要なクラス


エフェクトの利用

用途
再生用のクラス


MediaControl の設定
メディアボタンの利用
Package.appxmanifest の宣言
Windows.Media.MediaProperties
•   ビデオ、音声、静止画のエンコード用プロパティ
•   フォーマット (コンテナ)のプロパティ
•   エンコードプロファイルの作成
Windows.Media.Transcoding.MediaTranscoder
Microsoft PlayReady Client SDK for Metro Style Apps
http://bit.ly/metrodrm

DRM のシナリオ
アプリの展開
Windows ストア アプリの展開
• Windows ストアから配布する場合
   Windows ストアの開発者登録を完了後、アプリを申請
   審査に合格すると、Windows ストアに掲載

• 企業内展開
  Windows ストアの審査は不要、必要な環境設定を行い、
  PowerShell などを利用してアプリをインストール
• Windows ストア アプリの開発者ライセンスが有効な PC
  開発者は、PowerShell を使ってテスト用アプリの
  インストールが可能
Developer Camp | 2012 Japan Fall
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
Windows アプリ認定キット (WACK)
• Windows ストアにアプリを提出する前の事前テスト
• パッケージの作成時に実行
• あるいは、手動で呼び出し (windows app で検索)




Developer Camp | 2012 Japan Fall
実行から終了まで




Developer Camp | 2012 Japan Fall
Developer Camp | 2012 Japan Fall
Windows ストア、開発者登録
• Microsoft アカウントを作成
    法人の場合、共用できるアカウントを作成
•   Windows ストアにアクセスするコンピュータを
    「信頼済み PC」に登録
•   クレジットカードを準備
•   https://appdev.microsoft.com/StorePortals/ へアクセス
•   法人登録の場合は、GeoTrust (Symantec) から届く
    メールをご確認

Developer Camp | 2012 Japan Fall
企業内展開
• Windows ストアへの申請は不要
• 信頼された証明書を含んだパッケージを作成
• 「信頼できるすべてのアプリのインストールを
   許可する」グループポリシーの設定が必須



                 http://bit.ly/w8sideloding
Developer Camp | 2012 Japan Fall
信頼できるすべてのアプリのインストールを許可する




Developer Camp | 2012 Japan Fall
影響を受けるレジストリ




Developer Camp | 2012 Japan Fall
PowerShell によるコマンド例
• インストール
  add-appxpackage C:¥app1.appx
• インストール済みのパッケージを一覧
  get-appxpackage
• アンインストール
  remove-appxpackage <PackageFullName>


Developer Camp | 2012 Japan Fall
GridView の ItemTemplate を
Standard250x250ItemTemplate
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of
Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related Content

PPTX
Androidアプリケーション応用 WebAPI開発
PPTX
Phone gap+javascriptスマホアプリ開発(入門編)
PDF
Flex開発を加速するFlash Builder 4新機能紹介
PDF
Windows Phoneで始める拡張現実の世界
PPTX
Androidプログラミング入門
PDF
Silverlight 5でぶり返すWPF不要論
PDF
Delphi 言語に見る顕在化する言語のリスクとは?(2013/08/24)
PDF
Java/Androidセキュアコーディング
Androidアプリケーション応用 WebAPI開発
Phone gap+javascriptスマホアプリ開発(入門編)
Flex開発を加速するFlash Builder 4新機能紹介
Windows Phoneで始める拡張現実の世界
Androidプログラミング入門
Silverlight 5でぶり返すWPF不要論
Delphi 言語に見る顕在化する言語のリスクとは?(2013/08/24)
Java/Androidセキュアコーディング

What's hot (19)

PDF
クロスプラットフォーム開発入門
PDF
2011年マイクロソフト テクノロジー振り返り~開発編~
PPTX
Androidタブレットアプリケーション開発入門
PPT
Android™組込み開発基礎コース BeagleBoard編
PDF
XPagesDay2013 【B-4】 Dojo 徹底解剖! ~ XPages で Dojo を有効活用するには ~
PDF
Android UIデザイン入門
PPTX
RAD Studioで始めるマルチデバイス・クロスプラットフォーム開発ワークショップ
PDF
ソースコードの共通化
PPTX
Developer summit continuous deliveryとjenkins
PPTX
Android アプリケーション開発応用
PDF
Voicepic@FukuiMASeminar
PDF
Android Studioの魅力
PDF
Introduction to web development 1
PDF
グリーにおけるスマホアプリ開発~HTML5編
PDF
Visual Studio Dev Essential_登録手順書_2016年11月版
PPTX
GREE-Fsite
PDF
基礎から学ぶ組み込みAndroid
PDF
2015年のAndroidアプリ開発入門 - ABCD 2015 Kanazawa
PDF
20110212 Silverlight から Bing Maps に触れる
クロスプラットフォーム開発入門
2011年マイクロソフト テクノロジー振り返り~開発編~
Androidタブレットアプリケーション開発入門
Android™組込み開発基礎コース BeagleBoard編
XPagesDay2013 【B-4】 Dojo 徹底解剖! ~ XPages で Dojo を有効活用するには ~
Android UIデザイン入門
RAD Studioで始めるマルチデバイス・クロスプラットフォーム開発ワークショップ
ソースコードの共通化
Developer summit continuous deliveryとjenkins
Android アプリケーション開発応用
Voicepic@FukuiMASeminar
Android Studioの魅力
Introduction to web development 1
グリーにおけるスマホアプリ開発~HTML5編
Visual Studio Dev Essential_登録手順書_2016年11月版
GREE-Fsite
基礎から学ぶ組み込みAndroid
2015年のAndroidアプリ開発入門 - ABCD 2015 Kanazawa
20110212 Silverlight から Bing Maps に触れる
Ad

Viewers also liked (6)

PDF
Microsoftのすぐに使える簡単・安心・クラウドコンピューティング
PDF
【桜花様発表資料 モテるガジェット】AID勉強会 2013.1204
PDF
THETAで撮影した写真を球体ディスプレイに映してみた #thetafan
PDF
Ricohギャモン部 2015年度 上期方針
PDF
モーションコントロールコンテンツの実装から見えて来た事
PDF
3Dオーディオについて(ロングバージョン)
Microsoftのすぐに使える簡単・安心・クラウドコンピューティング
【桜花様発表資料 モテるガジェット】AID勉強会 2013.1204
THETAで撮影した写真を球体ディスプレイに映してみた #thetafan
Ricohギャモン部 2015年度 上期方針
モーションコントロールコンテンツの実装から見えて来た事
3Dオーディオについて(ロングバージョン)
Ad

Similar to Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発 (20)

PDF
Dev camp2012jpn day2session2
PDF
Dev camp2012jpn day2session2
PDF
Windowsストアアプリ開発 オープンセミナー広島
PDF
.NET Coreとツール類の今
PDF
PDF
The Twelve-Factor (A|M)pp with C#
PPTX
オレたちとVisual Studioとの関係を話そう
PDF
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
PDF
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
PPTX
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
PDF
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
PDF
モバイルコンテンツ制作を効 率化するツールを使いこなせ
PDF
.NET Core と Container, そして Azure Web Apps on Linux による Web アプリ開発最前線
PDF
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
PDF
[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介
PDF
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
PDF
Windows 8 Developers カンファレンス
PPTX
技術選択とアーキテクトの役割
PDF
Windowsフォームで大丈夫か?一番良いのを頼む。
PDF
Adobe Edge Inspectを利用してデバッグ
Dev camp2012jpn day2session2
Dev camp2012jpn day2session2
Windowsストアアプリ開発 オープンセミナー広島
.NET Coreとツール類の今
The Twelve-Factor (A|M)pp with C#
オレたちとVisual Studioとの関係を話そう
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
モバイルコンテンツ制作を効 率化するツールを使いこなせ
.NET Core と Container, そして Azure Web Apps on Linux による Web アプリ開発最前線
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介
DEV-008_Developing on the Edge. ~Web プラットフォームと Cordova~
Windows 8 Developers カンファレンス
技術選択とアーキテクトの役割
Windowsフォームで大丈夫か?一番良いのを頼む。
Adobe Edge Inspectを利用してデバッグ

Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める Windows ストア アプリ開発