Microsoft Developer Camp 2012 Japan Fall
のUStream中継
http://www.ustream.tv/channel/msdevelopercamp
の内容をメモメモ
■Visual Studio 2012 で始める Windows ストアアプリ開発
Windows8に関するアプリ開発
全体を３つに分けて
・準備と開発ツールになれる
・Windows８の固有の機能の実装
・チャレンジ！スクラッチからアプリを起こす
デモ中心、どういうふうにツールを使っていけばいいか
スライドシェアに上がっているよ！
準備：Windowsストアアプリ
Windows8のスタート画面：
タブレットで使う局面を意識したタイル、ライブタイル
右からスワイプ：共有→メール：コントラクトが使える
いろんなフォームファクタで
Windowsストア
アプリを全世界に配信
個人でも
カテゴリにはいって、タッチしてインストール
→新しい開発モデルになれる
Windowsランタイム
開発環境を整える
マシン：１台より、高速な開発マシンとタッチ可能なもの
Ｄｕａｌ
ＯＳ：Windows８が必要：仮想環境でもＯＫ
→お名前.com デスクトップ へ接続でも
（Windows７でもＯＫ，ＭａｃでもＯＫ）
ＶｉｓｕａｌＳｔｕｄｉｏ２０１２で
基本は、アプリからWindowsランタイムを呼び出す
Windowsストアアプリ＋WindowsＲＴ
↓
Windowsランタイム
↓
Window8 API
Visual Stadio ２０１２ ＋ Ｂｌｅｎｄ for Visual Stusioで開発
早速始めていきましょう C＃＋XAML（ざむる）で
app.xamlとapp.xaml.cs
一時停止というのがはしる
メインページ読み込み
テキストボックス作成：ざむるのタグが出てくる
ＸＡＭＬのタグを直接書き換えても
プロパティＷｉｎｄｏｗからでもＯＫ
名前空間足りないとき→競合の解決でＯＫ
非同期
呼び出し順がわからなくなることな〜い？
await、async
→同期のままの考え方でＯＫ、非同期にしてくれる
Blendで開く
いろんなパネルがある
アニメーションをつくる（野球盤）
画像を追加
ボールのストーリーボード
ワークスペースをアニメーションに
タイムラインが出るので、キーフレーム調整
いーじんぐふぁんくしょんでカーブに
バットのストーリボード
回転の軸を変える
キーフレーム調整
いーじんぐふぁんくしょんでカーブに
もう１この画像をコントロールに
コントロールパネル
デザインにして
状態パネル、
押されたときの挙動を変える
挙動：いーじんぐ
テンプレートの編集終わらす
コンパイル
ツールに慣れていってください
ＨＴＭＬ＋Ｊａｖａｓｃｒｉｐｔであそぶ
Ｂｌｅｎｄから出発
テキストボックスとボタンをおく
スタイル：ＩＤつけて「要素ＩＤからスタイルルール作成」とかするとＣＳＳ
divタグつくって（結果を出すところ）
Javascriptの編集
関数作って
onactivated
イベントリスナー登録
タイマーつかえる
関数作って
setInterval
ロゴの色にする→色スポイト
同じスタイルを使う：クラスを作ってしまう
デバイスアクセス可能：Ｗｅｂカメラとか使える
function onCamera(args)
{
var c = new Windows.Media.Caputre.Camera
c.captureFileAsync(Windows.Media.Caputre.CameraCaputureUIMedia.Photo).then
function(file){
var u = URL.createObjectURL
：
：
イベントリスナー
マニュフェスト登録
ビデオ：タグ
チャームからデバイスを選ぶ→リモート再生
デバッグ：リモートデバッグ許可
ＤＯＭエクスプローラー：どこレンダリングしてるかわかる
→ためしながら作っていける
メディアプラットフォーム
リモート再生：play to ビデオ、オーデオタグは対応している
Ｃ＋＋で
Ｃ＋＋をざむるでつくれて、ＤｉｒｅｃｔＸとＸＡＭＬのレンダリングをまぜまぜできる
ＤｉｒｅｃｔＸ１１相当の３Ｄ
グラフィックパイプラインステージ
どういった画像が作れるか
ゲームの開発
DirectX マーブル・メイズ・ゲームを是非ダウンロードして！
改造してみる
顔をコピー：
ＤＤＳのファイル
ＧＰＵを使ったプログラミング
おーすてぃんというプロジェクト
ＡＭＰ
デストラクタかかなくていい
学習：Windows８固有の機能
Windowsストアアプリ成功の鍵
企画・コンセプト・ブランディング
繰り返し出す
ＵＩデザイナーとお友達になる
いくつかのポイント
デモでみていく
グリッドアプリケーションが基本（Ａｐｐ４７）
ＳａｍｐｌｅＤａｔａＳｏｕｒｃｅ
デザインするとき、らく
画像用意しておくと、らく
アプリバーの追加
上、下から
スタンダードスタイルずXAMLの修正から
「マウス」全角で Mouseに書き換える
AppBarButtonのコメントを外す
Blendに切り替える
アセットパネル
BottomUpバーに追加
左側コンテクスト 右側グローバル
アプリバーはボタン以外でも置ける（アドレスバーみたいなの）
コントラクト
アプリケーション間連携
VisualStudioのテンプレートを使う：コントラクトがはいってる
検索コントラクト追加
→XAMLに追加
チャームに
検索自体は、アプリが、がんばる
検索をきっかけにアプリ起動できる
おんさーちあくてぃべーてぃっど
共有ターゲットコントラクト
ソースからターゲットへの共有
OnShareTarget
スワイプして検索、スワイプして共有
プロセスの分離
アプリから他のアプリに関与できない
プロセスライフタイムの詳細
ずっと起動しているわけではない
不必要なアプリけす
新しいアプリ起動：一時停止する→対応する必要がある
これを、どうデバッグしたらよいかという問題
中断をやると、中断がデバッグできる
チャーム（コントラクト）のテスト
ブレークポイント設定
起動しないが開始時にコードをチェック
ライブタイル
アプリが実行されているわけではない
UpdateLiveTiles
実践：
ライブで体験
Windows8アプリ開発体験テンプレート
ＵＸ−ＴＶアプリを作る
新規作成プロジェクト
ビルド
フィードのＵＲＬ
ソリューションエクスプローラー
ふぃーどあしんく
ろーどりもーとでーたしんく
アドレス書き換え
タイトル
いらないところけす
ビルド確認
プレーヤーおく
メディアのアドレス
リファクター、フィールドのカプセル化
ブレークポイントを置く
フィードを取る
デバッグ：ＯＫそう、中断
ＷｅｂＶｉｅｗ
参照の追加、名前空間
（ここから、かんぺをはったので、よくわからん・・・）
Windowsストアアプリの開発
・開発環境の準備
・Windows8の開発
・開発テンプレート
ニュースリーダーテンプレート
世界に向けて勝負する
のUStream中継
http://www.ustream.tv/channel/msdevelopercamp
の内容をメモメモ
■Visual Studio 2012 で始める Windows ストアアプリ開発
Windows8に関するアプリ開発
全体を３つに分けて
・準備と開発ツールになれる
・Windows８の固有の機能の実装
・チャレンジ！スクラッチからアプリを起こす
デモ中心、どういうふうにツールを使っていけばいいか
スライドシェアに上がっているよ！
準備：Windowsストアアプリ
Windows8のスタート画面：
タブレットで使う局面を意識したタイル、ライブタイル
右からスワイプ：共有→メール：コントラクトが使える
いろんなフォームファクタで
Windowsストア
アプリを全世界に配信
個人でも
カテゴリにはいって、タッチしてインストール
→新しい開発モデルになれる
Windowsランタイム
開発環境を整える
マシン：１台より、高速な開発マシンとタッチ可能なもの
Ｄｕａｌ
ＯＳ：Windows８が必要：仮想環境でもＯＫ
→お名前.com デスクトップ へ接続でも
（Windows７でもＯＫ，ＭａｃでもＯＫ）
ＶｉｓｕａｌＳｔｕｄｉｏ２０１２で
基本は、アプリからWindowsランタイムを呼び出す
Windowsストアアプリ＋WindowsＲＴ
↓
Windowsランタイム
↓
Window8 API
Visual Stadio ２０１２ ＋ Ｂｌｅｎｄ for Visual Stusioで開発
早速始めていきましょう C＃＋XAML（ざむる）で
app.xamlとapp.xaml.cs
一時停止というのがはしる
メインページ読み込み
テキストボックス作成：ざむるのタグが出てくる
ＸＡＭＬのタグを直接書き換えても
プロパティＷｉｎｄｏｗからでもＯＫ
名前空間足りないとき→競合の解決でＯＫ
非同期
呼び出し順がわからなくなることな〜い？
await、async
→同期のままの考え方でＯＫ、非同期にしてくれる
Blendで開く
いろんなパネルがある
アニメーションをつくる（野球盤）
画像を追加
ボールのストーリーボード
ワークスペースをアニメーションに
タイムラインが出るので、キーフレーム調整
いーじんぐふぁんくしょんでカーブに
バットのストーリボード
回転の軸を変える
キーフレーム調整
いーじんぐふぁんくしょんでカーブに
もう１この画像をコントロールに
コントロールパネル
デザインにして
状態パネル、
押されたときの挙動を変える
挙動：いーじんぐ
テンプレートの編集終わらす
コンパイル
ツールに慣れていってください
ＨＴＭＬ＋Ｊａｖａｓｃｒｉｐｔであそぶ
Ｂｌｅｎｄから出発
テキストボックスとボタンをおく
スタイル：ＩＤつけて「要素ＩＤからスタイルルール作成」とかするとＣＳＳ
divタグつくって（結果を出すところ）
Javascriptの編集
関数作って
onactivated
イベントリスナー登録
タイマーつかえる
関数作って
setInterval
ロゴの色にする→色スポイト
同じスタイルを使う：クラスを作ってしまう
デバイスアクセス可能：Ｗｅｂカメラとか使える
function onCamera(args)
{
var c = new Windows.Media.Caputre.Camera
c.captureFileAsync(Windows.Media.Caputre.CameraCaputureUIMedia.Photo).then
function(file){
var u = URL.createObjectURL
：
：
イベントリスナー
マニュフェスト登録
ビデオ：タグ
チャームからデバイスを選ぶ→リモート再生
デバッグ：リモートデバッグ許可
ＤＯＭエクスプローラー：どこレンダリングしてるかわかる
→ためしながら作っていける
メディアプラットフォーム
リモート再生：play to ビデオ、オーデオタグは対応している
Ｃ＋＋で
Ｃ＋＋をざむるでつくれて、ＤｉｒｅｃｔＸとＸＡＭＬのレンダリングをまぜまぜできる
ＤｉｒｅｃｔＸ１１相当の３Ｄ
グラフィックパイプラインステージ
どういった画像が作れるか
ゲームの開発
DirectX マーブル・メイズ・ゲームを是非ダウンロードして！
改造してみる
顔をコピー：
ＤＤＳのファイル
ＧＰＵを使ったプログラミング
おーすてぃんというプロジェクト
ＡＭＰ
デストラクタかかなくていい
学習：Windows８固有の機能
Windowsストアアプリ成功の鍵
企画・コンセプト・ブランディング
繰り返し出す
ＵＩデザイナーとお友達になる
いくつかのポイント
デモでみていく
グリッドアプリケーションが基本（Ａｐｐ４７）
ＳａｍｐｌｅＤａｔａＳｏｕｒｃｅ
デザインするとき、らく
画像用意しておくと、らく
アプリバーの追加
上、下から
スタンダードスタイルずXAMLの修正から
「マウス」全角で Mouseに書き換える
AppBarButtonのコメントを外す
Blendに切り替える
アセットパネル
BottomUpバーに追加
左側コンテクスト 右側グローバル
アプリバーはボタン以外でも置ける（アドレスバーみたいなの）
コントラクト
アプリケーション間連携
VisualStudioのテンプレートを使う：コントラクトがはいってる
検索コントラクト追加
→XAMLに追加
チャームに
検索自体は、アプリが、がんばる
検索をきっかけにアプリ起動できる
おんさーちあくてぃべーてぃっど
共有ターゲットコントラクト
ソースからターゲットへの共有
OnShareTarget
スワイプして検索、スワイプして共有
プロセスの分離
アプリから他のアプリに関与できない
プロセスライフタイムの詳細
ずっと起動しているわけではない
不必要なアプリけす
新しいアプリ起動：一時停止する→対応する必要がある
これを、どうデバッグしたらよいかという問題
中断をやると、中断がデバッグできる
チャーム（コントラクト）のテスト
ブレークポイント設定
起動しないが開始時にコードをチェック
ライブタイル
アプリが実行されているわけではない
UpdateLiveTiles
実践：
ライブで体験
Windows8アプリ開発体験テンプレート
ＵＸ−ＴＶアプリを作る
新規作成プロジェクト
ビルド
フィードのＵＲＬ
ソリューションエクスプローラー
ふぃーどあしんく
ろーどりもーとでーたしんく
アドレス書き換え
タイトル
いらないところけす
ビルド確認
プレーヤーおく
メディアのアドレス
リファクター、フィールドのカプセル化
ブレークポイントを置く
フィードを取る
デバッグ：ＯＫそう、中断
ＷｅｂＶｉｅｗ
参照の追加、名前空間
（ここから、かんぺをはったので、よくわからん・・・）
Windowsストアアプリの開発
・開発環境の準備
・Windows8の開発
・開発テンプレート
ニュースリーダーテンプレート
世界に向けて勝負する