【070-481】試験対策その2-3 Windowsストアアプリの開発 VisualStudioとBlend
HTML5 を使用した Windows ストア アプリ開発ジャンプ スタート
(02) Windows ストア アプリの開発 (パート 1) でWindowsストアアプリの開発方法です。
ツールの使い方メインの回。技術的な解説より、実際の使い方を学ぶ感じです。
Module Agenda
1.Tooling
2.Project Templates
3.Introduction to WinJS
1.Tooling
VisualStudioは色々なエディションがある
みんな探してみてね。1199ドルくらいだよ。
MSDN定期購読は年間1200ドルくらいですね。
無料版もあるけど、機能を考えるとこの金額は全然高くない、とのこと。
（最上位のエディションを使ってみたい……）
VisualStudioの使い方の説明
SolutionExplorerやシミュレータ
シミュレータを使う
タッチはどうするの？
位置情報のテストは？と色々な疑問があるはず。
・タッチモードやマルチタッチシミュレーションができる。
マウスでマルチタッチシミュレーションが、凄く難しそう。
00:08:50付近、デモが終わったらこのマウスはクビ！というくだりが面白い。
いくら優秀なシミュレータでも、マウスでタッチ操作をするのが難しそう。
・解像度1366×768から最大2560×1440と共に10.6から
・ポートレート（縦）でも水平スワイプが健在。
・位置情報も任意の場所をセットしてテストすることができる。
デバイス研究所があり、何種類ものデバイスを試すことができる。
（お近くの研究所へお越しください。ってことですが、日本にもあるのかしら……？）
Blendの紹介
設計ツールBlendの使い方の説明
Blendだけで一通り作れてしまう様子が参考になります。
実際に使っているところが見れるので、面白いですね。
【070-481】試験対策その2-2 優れたアプリ設計に関する8つの特徴 content before chrome
HTML5 を使用した Windows ストア アプリ開発ジャンプ スタート
前回の続きと、後半に当たる (01) Windows ストア アプリの設計 (パート 2) から「優れたアプリ設計に関する8つの特徴」です。
8 Traits of Windows App Design
1.content before chrome
2.fast and fluid
3.snap and scale beautifully
4.use the right contracts
5.invest in a great tile
6.feel connected & alive
7.roam to the cloud
8.embrace Windows design principles
1.content before chrome
必要な時にだけコンテンツに対する機能が出てくるなど、コンテンツの表示を妨げないようにすること。
コンテンツが最大限に表示されていて、邪魔するものが無いレイアウトは非常に好み。
具体的なLayout、Interactions、Navigationについての説明がある。
Layout
サンプル画面を見ながらの説明。
サイズの違いが階層構造を表し、グループセクションも一目でわかる、80ピクセルずつ間隔がある
操作対象のグループがとても分かり易ことが理解できる
Interactions
端を使うこと（右から左へのスワイプ・Win+Zなど）で、必要な機能を出現させる
左端は操作対象向けの機能、右端はグローバルな機能という棲み分け
Flyout（以前の呼び名はポップアップ）を使ってユーザー操作を妨げない入力
Navigation
2つのナビゲーションモデルがある
・フラットナビゲーション
・3段階ナビゲーション
この動画と併せて押さえておきたいのが、次の内容。
Windows ストア アプリの UX ガイドラインの索引 (Windows)
動画で概要を押さえて、上記のサイトで詳細を確認しながら進めていこう。
【070-481】試験対策その2-1 01|Windows ストア アプリの設計 (パート 1)
HTML5 を使用した Windows ストア アプリ開発ジャンプ スタート
(01) Windows ストア アプリの設計 (パート 1)
アジェンダは以下の通りで、前半です。
Web apps vs. Windows 8 apps
Windows アプリデザインの8つの特徴
Web apps vs. Windows 8 apps
ウェブアプリとストアアプリの違いについて、JeremyとMichaelが熱く語っています。ペースは、速い速い！
大きな違い
まずは、このページを見て欲しいとのこと。
MSDN内の記事で、Web上のJavaScriptとWindowsの中のJavaScriptの違いが書かれている（※動画の中のページとは少し違っているが、検索するとこれしか出てこない。内容は動画のものとほぼ同じ）。
水平スクロール
Webでは垂直のスクロール、ストアアプリは水平スクロール。
ページ内のコンテンツが少ない
Webサイトではたくさんの情報を詰め込むことが重要だった。
ユーザーエクスペリエンスに重点を置くアプリではそうではない。
タッチ操作の進化
IE10のタッチエンジンも非常に強化され、4人が同時に画像の拡大縮小操作を行っても問題ない。
もちろんプラットフォームにも対応されている。
WindowsRuntimeへのアクセス
WindowsRuntimeへのアクセスもできる。JavaScriptでもC#でもC++でもアクセスできる。
素晴らしいのは全く同じ方法でアクセスできること。
WinJSコントロールへのアクセス
WebからもWinJSにアクセスできるが、アプリからはフルアクセスが可能。
クロスプラットフォーム
・対応すべきたくさんのプラットフォームがある。
・ユーザーはネイティブエクスペリエンスを求めている。
それがクロスプラットフォームが難しい理由、と語っている。
合わせて、バックエンドのAzure Mobile Servicesにも以下のように言及。
プッシュ通知、データサポート、認証などのバックエンド、もちろんW8アプリだけではなく、WebやiPhoneでも使える。
ネイティブアプリで得られるもの
速度が速い、IEのエンジンがハードウェアを加速してくれる。
プログラムライフサイクルマネジメントができる（状態の保存や一定時間使われない場合の処理など）。
Webアプリよりも高速で、より良いユーザー体験ができる、ということですね。
【070-481】試験対策その3-2 02 | ストレージ、ネットワーク、およびセキュリティ（8.1差分）
受験の結果、デザイン設計が特に弱く、ストアアプリ開発に関する知識が足りない事がわかったので、きちんと基礎をお勉強。
というわけで、引き続きJeremy様、Michael様、お世話になります。
Files（ストレージ）
Pick a file regardless of app layout
アプリの形式に関わらず
フルスクリーンとSnapViewで異なるUIで使える（Windows8.1からの機能）
New folder & file navigation support
ナビゲーションのプロパティに関するいくつかの新機能
Networking（ネットワーク）
新しいHTTP Client API
・フィルター、Windows.Web.Http.Filters.HttpBaseProtocolFilter();
・アプリから呼び出すために推奨されたやり方
・特別仕様のフィルターを作るには、C#やC++プロジェクトで作ることが必要な場合も
（どんな仕様だったかな？）
WinJS.xhrを使ってもいいがHTTPクライアントの使い方を覚えると
いいことがたくさんありそう
ヘッダーコントロール、キャッシュ
さまざまな要求に関して制御できるようになりそう
C#でもJavaScriptでも、同じWIN RT コンポーネントを呼び出している
BackgroundTransfer Updates
・バックグラウンド転送グループでパラレルかシリアルどちらからでもアップロードやダウンロード可能
ダウンロードをまとめてバッチでできるようになった
・ライブタイルやトーストで通知してくれるようになった
ダウンロードの完了をライブタイルで通知できるのはすごく良さそう！
・ダウンロード回線を自動的に変更してくれる
Connected Standby Updates
・パケット受信でロック画面にアクセスできるようになった
・静止時間をサポートするようになった
その時間帯には通知などが来ないようにできる
・異なるネットワークの種類へのアダプターをサポート
Geofence
・位置情報を取得する
どこで何を表示するか制限することもできる
（Windows8では無かった？）
Security（セキュリティ）
Fingerprint authentication
・指紋認証、デモもある
Credential Locker
・資格情報保管ボックス
・ユーザーの認証情報を永続保管して、管理する
・複数アカウントを持つ場合のデフォルトアカウント
・最後に使用した認証情報を保管する
・複数アプリケーションで同じ認証情報を共有する
WebAuthenticationBroker
・Web認証ブローカー
・既存の承認情報を自動的に更新して情報を追加
・承認情報はユーザーの承認に基づいて書き換えられ、資格情報保管ボックスに保存
Selective Wipe
・サーバーから失効したものを識別する
・ファイルへのアクセス権など
http://msdn.microsoft.com/en-us/library/windows/apps/bg182886.aspx#seven
【070-481】【070-482】MCP試験 受験のまとめ
070-481 HTML5 と JavaScript を使用した Windows ストア アプリ開発の重要要素
45問
受験時の内訳 ケーススタディ1：7問、ケーススタディ2：8問、通常問題30問
合格点700点
以下の「評価スキル」にあげられている内容がバランスよく出題されている。
http://www.microsoft.com/ja-jp/learning/mcp/iframe_exam.aspx?cert=1&id=70-481&Search=true
ストアアプリのデザイン原則、リソースやデバイスを操作する時に使うライブラリをしっかり押さえておかないと難しい。
サンプルアプリをたくさん作って、体で覚える感じかな。
070-482 HTML5 と JavaScript を使用した Windows ストア アプリの高度な開発
44問
受験時の内訳 ケーススタディ1：7問、ケーススタディ2：9問、通常問題28問
合格点700点
こちらも、以下の「評価スキル」にあげられている内容がバランスよく出題。
http://www.microsoft.com/ja-jp/learning/mcp/iframe_exam.aspx?cert=1&id=70-482&Search=true
カメラや位置情報、WNSの使用など幅広い内容のため、問題としては比較的「知っていれば解ける」ものが多かった。
ケーススタディはかなり手ごわかった。アプリケーション上でわかっている問題をどう対処するか？の意図を読み取るのが難しい。
どちらの試験でも、UIの分野が弱いという結果に。
次回受験に向けてそこをテコ入れする必要あり。
この辺も、勉強しなおしです→CredentialPicker、XHR・RESTの利用、アプリケーションマニフェスト、Webカメラ、多国語対応、ストアへの展開。
【Windows女子部勉強会】クラウディアさんのAzure入門キホンのホ
女子部勉強会、今日はクラウディアさんによるAzure入門 第2回です。
【マイクロソフトという会社について】
・Windows Embeddedって、自動販売機にも入ってる
・SkyDriveはOneDriveになりました
・hotmailはOutlook.comになりました
・Office365、bingとかはWindows Azureが支えています
【Windows Azureについて】
・オープンで柔軟なクラウドプラットフォームです
・でも、夢や魔法ではありません
・日本DCがまだない
・元々開発者向けに出たサービスなので開発者向け情報が多い
→ 今はWordPressやEC-CUBEなどを手軽に使えるようになっている
Azureのサービスは大きく分けて３つ。
・「仮想マシン（IaaS）」
・「クラウドサービス（PaaS）」
・「Webサイト」
MSの人、Azure系の人は、Webサイトを「Webサイト」で作りましょう。
みたいな言い方をしたりするらしいです。
「SaaS」は提供していない。Office365は？Azureブランドじゃないからかな？
【サービス「Webサイト」】
Webサイトのスケール
共有（Shared）と占有（Reserved）のどちらかを選べる
Code Smart
多様な開発言語、開発環境のサポート
VSからAzureにデプロイするのは超簡単！VSからメニューあるよ。
Gitからもできる。DropBoxからもできる。もちろんFTPも！
SQLデータベース、MySQL
→ Code Smartを契約するだけで、使えるの？
【サービス「仮想マシン」】
HyperVベースのサーバーホスティング環境
vhdファイルがあれば、簡単に使える
ギャラリーにいろいろなOSのイメージ（vhd）がある
マシンのキャプチャをとれる。
ネットワーク上に同一設定のマシンがあると問題が発生することもあるためsysprepを使う（危ない設定だけ変えてデプロイできる）
仮想マシンにはリモートデスクトップでアクセスできる
その他、Command-LineToolやSystemCenter、PowerShellなどでの管理も可能
【サービス「クラウドサービス」】
WindowsServerベースのアプリケーションホスティング環境
SLAは月間稼働率＝99.95%
【クラウディアさんによるデモ】
Webサイトの利用、すごく簡単。WordPressも一瞬ですね。
今は開発者だけではなく、学生や子供でも使えてしまう。
クラウディアさんのAzureへの愛を感じる、優しくて暖かい勉強会でした。
楽しかった！
【070-481】試験対策その3-1 01|コントロール（8.1差分）
試験対策、最初の講座。
HTML5 を使用した Windows ストア アプリ (更新) ジャンプ スタート 01 コントロール
前半はVisualStudioの導入と概要、Win8.1での変更点。
後半が、コントロールについての説明になっています。
【Module1:Controls】
標準的な構文だけを使用
DIVタグだけを使用しHTML5互換のdata-dash属性を与えフレームワークはそれをフラッシュアウトさせる責任を負う
星を付けるRatingコントロールなどが良い例
【AppBar and NavBar】
デモ：AppBarに好きなHTMLコンテンツを入れられる
テキストボックス、ドロップダウンリスト、ビデオ
でもユーザーがAppBarに期待するのはシンプルなボタン
利用シーンはある？
→音楽プレイヤーで再生中のものを見せる、など。
NavBarはアプリの上部に、AppBarは下部にある。
キーボードショートカットの機能が大幅に強化されている
【BackButton】
以前はボタンだった。
HTML5で「戻る」ボタンとして指定されたクラスでWIN JS CSS スタイルのフレームワークが「戻る」ボタンとしてレンダーできた。
今は少し異なり、「戻る」ボタンコントロールとして定義するData WIN control を伴うボタン。
コントロールにアップグレードされた理由は単なるクラスを伴うHTML要素の代わりとして機能性を追加したかったから。
マウスやキーボードでの「戻る」操作をサポートすることができる。
※↑この部分の解釈があっているか、微妙
【Hub】
Windows8への実装は困難だった。
flex box に padding で実装したりしていた。
今度はhubコントロールで簡単に実装できる。
Hubセクションには何でも入れることができる。
Hubの中にHub、Image、ListView、HTMLコントロールが入れられる。
【ItemContainer and Repeater】
ListViewの持つ基本的かつシンプルな機能だけが使える
Repeater（今回実装された？）
data WIN control Repeater
data:codeShow.Demos.repeaterer.simple.itemList
のように指定できる。（これはWinJSで書かれたデータリスト）
ListViewのようにドットデータソースを使用する必要がない（ドットデータソース？）
ListViewでは別個のテンプレートがあるが、RepeaterはRepeaterタグの中に埋め込むことができる。
【WebView】
iFrameタグで実行していなかった多くを実行する。
iFrameは参照可能なHTMLを画面にドロップする方法で、必要なWebサイトを何でも参照できた。
でも、少し制限があった。最大の制限はフレーム破壊と呼ばれるもの。
Frameには表示しない、と記述されているページは表示されない。
WebViewはiFrameではないため、表示ができる。
「x-ms-webview」タグを使う。
WebViewについては、二人とも超わくわくしているそう(笑)
【Improvements to Listview】
データソース内でグループ化を指定すると、ListViewに反映でいる。
複数のListViewができ、一つ目のListView内の表示（スクロール）が終わったら、画面がスクロールして次のListViewへ進む。（これは是非デモを見てもらいたい0:51:00付近）
ListView内の順序の再変更、これは8.1からの機能。
このコントロールはかなりオーバーホールされている。
Talk abount an overhaul!
Better perf out of the box(it's a flexbox!)
Drag and drop support
Reordering
Cell spanning layout
Better accessibillity in the headers
Custom layouts
→カスタムレイアウトでは、円形のListViewも可能
