2012

4/26

Windows 8 は日本のクリエイティブさの実現~ Microsoft Windows Developer Days 第2日目

昨日（第1日目）のキーノートセッションについて、大事なことを書き忘れました！

Windows 8 Release Preview （RC版に該当）は6月第1週に公開

その他、いくつか書こうと思って忘れていたことは、今日の最後に追記します。それではマイクロソフトのイベント「Windows Developer Days」の第2日目、最終日について忘れないようにメモします。

今日もダラダラ行きます。もはやポイントをまとめられていません（汗

1 キーノートセッション（10:00～11:00)
2 WA-015 アプリの実行環境とライフサイクル（13:00～13:45）
3 PL-008 Internet Explorer 10 そしてそれ以降に対応するためには？（14:00～14:45）
4 WA-023 3D Metro スタイルアプリと Direct X（15:00～15:45）
5 WA-005 JavaScript + HTML による Meroスタイルアプリ開発概要（16:00～16:45）
6 WA-002 Metro スタイル UI のデザイン検討に関するセッション（17:00~17:45）
7 （追記）小ネタ
8 （おまけ）戦利品
9 最後に

キーノートセッション（10:00～11:00)

まず最初にバイオリンとギター（かな？）の生演奏と共に、ボーカロイドの歌声と Kinect を使って振り付けを取り込んで作られたムービーが会場に流れました。このページ一番上の動画です。2日目のキーノートセッションの最初は、Windows 8 でこの動画を作るシーンの紹介から始まりました。

「日本が誇る文化」ということでMMD（みくみくダンス）が紹介されるとともに、その制作過程がすべて Windows 8 で作業できてしまうこと。当然それは Windows 7 と互換性があるからなのだけど、それだけじゃなく、最新版のボーカロイド3 の Metor UI 版が公開され、メトロらしい画面での操作感から、男性が歌って録音された音楽データをクラウド上にアップして変換して取得し、そのままボーカロイドのデータとして読み込み、プラグインで女性アイドルらしい歌い方に変換して再生してみたり、最終的に出来た動画をインターネットに共有する、というシーンまですべてメトロで実現可能であることを表現したデモでした。

日本のエンジニアが、日本発の文化を支えるアプリケーションを開発できる。そういう可能性を強く印象づけるデモになっていました。

続いて、それが本当に実現可能なことなのか？それを示すために、Visual Studio 11 を実際に使ってメトロUIアプリケーションを開発する、というデモが行われました。コードの入力はスニペットで短時間で行えるようになっていたものの、標準のテンプレートをほとんどそのまま使用して、データバインドの仕組みを整えるだけでほとんどアプリができあがってしまう様子が紹介されました。

ある程度までは簡単に作れる。後は、日本のエンジニアが魂を込める。ユーザーが使いやすいと感じるUXを実装することについて、そう表現されていました。

最後は Windows 8 のメトロアプリのプロトタイプ版の紹介。Windows Phone アプリやWebサイトのサービスをメトロアプリに移植するとどのようになるか？という姿が、まだ荒削りながらちゃんとメトロとして動作するアプリとして紹介されました。

「ムビチケ」という映画の席の予約が出来るサービス。そして「楽天レシピ」や「楽天サイト」そのものの Metroアプリ版。それぞれが他のセッションで紹介されていたメトロアプリの作り方をそのまま実現した姿で、動作していました。

そしてそれは新しいUX（ユーザーエクスペリエンス）そのもの。新しいUIを提供するだけでなく、使用する人の体験・喜びを実現することに他ならない。それでいて、その開発したものがちゃんとビジネスとして対価を得られる。

Windows Developer Days に参加するまで、機能制限されたIE10が出るから対応しなければならない、ぐらいに思っていたかもしれない開発者でも、新しいアプリケーションを作りたくなっているに違いありません。えぇ、そうです。私が Windows 8 アプリが作りたくてしょうがなくなりました（笑）。そういうワクワクのあるすばらしいセッションでした。

WA-015 アプリの実行環境とライフサイクル（13:00～13:45）

さてここからはエンジニアのお仕事。本気にならないといけない部分です。メトロアプリがどのように起動され、終了までどのように動作するのか？簡単に作れるかどうかは別として意識しておかないといけない部分です。同じように感じるエンジニアがとても多かったのか、Room G が超満員で私は立ち見でした。ポイントは

メトロは UI フレームワークであること。サービスプロセスはこれまで通りデスクトップアプリとして開発する必要がある。
.net Framework 4.5 の中に、Windows Phone 7 と Silverlight 5 と Windows 8 Metro UI の部分があって、そのすべてが重なる部分（共通部分）が「ポータブルアセンブリ」と呼ばれる。.net Framework はそれぞれプロファイルを切り換えて動作する（？という表現だったような）。
デスクトップアプリはこれまで通りウィンドウを切り換えて動作し、ライフサイクルも変わらず。
メトロはフルスクリーンアプリで、いつ終了するか？は完全にシステムに任されている。Windows 8 CP 版から、明示的にアプリを終了する操作（画面の上にドラッグする感じ）はイレギュラーな終了操作と思ったほうがよく、メモリ不足になったタイミングなどシステムによって任意に突然終了することに対応しなければならない。Windows Phone 7 と同様。

ここでプロセスモニタを起動して詳細な動作を見せてもらえました。これはとてもよくわかりました。

ユーザーがメトロのタイルをタップすると、最初に Activation System がレジストリを参照する。動作するのは explorer プロセス。
Extensions\ContentID\WindowsLaunch\ProductID\・・・のキーを参照し、次のそのクラスIDを件ｓなくし、suchost.exe にリクエストが渡される。
そして実際にアプリがアクティブ化され、実行される。
.net で出来たアプリはそのまま exe が実行されている（これまで同様）。
JavaScript で出来たアプリは、wwahost.exe ( Windows Web App Host の略？）が実行プロセスとなる。
DCOMの技術を使って起動しているため、VS11デバッガをローカルデバッグ・リモートデバッグが切り換えられるのだそうです。

そしていよいよライフサイクルについて

Windows Phone と完全に同じかな？
メトロアプリ起動～実行中はデスクトップで確認するとプロセスが Running
アプリを終了すると、サスペンドイベントが発生する。
アプリを切り換えて裏に回ってもサスペンドイベントが発生する。
切り換えてアプリが手前に戻るとき、リジュームイベントが発生する。
プロセスを Killするかアプリがクラッシュする以外は必ずサスペンドを通る。逆に、終了か？裏に回っているか？を知るすべはない。通常、サスペンドイベントでは途中操作を復元できるように入力中の値などをファイル等に保存しておくべき。リジューム時は自動的に復元されるので何もしないこと。実際に値を復元するのは、終了されたあともう一度アプリが起動されるとき。データが残っているかどうか？判定して作業を再開できるように復元する。
アプリは常に動いている訳じゃないことを意識する。
終了通知はないという仕様。いつ突然アプリが終わっても（クラッシュであっても）ユーザーが困らないように作る。
アプリの起動イベントは OnLaunch,サスペンドは Suspending, リジュームは Resuming（だがリジュームには通常なにも実装してはいけない）。
アプリがクラッシュしたときは、リジュームからデータを復元することはしないで破棄した方が良いと思われるが・・・要件によって検討する。
サスペンドは 5秒で完了しなければならない。
データを保存するときは、事前に GetDeferral を実行してサスペンドを遅延し、データの保存が完了した後 deferral.Complete を実行してサスペンドを完了させる。
JavaScript 版では2種類のアプリケーションクラスがあるので、実装方法が若干異なる。一方は .net 版とほとんど同じ書き方が出来る。
ただし、サスペンドしてしまうとシステムに重大なデッドロックが発生してしまう、などの場合はシステムが自動的に検知して、一時停止状態にしない。
データの保存は Windows.Storage.ApplicationData を使用する。あるいは、ApplicationData で指定されたディレクトリに通常のファイル I/O を使用してファイルを書き込む。Windows Phone 同様、許可されたストレージ以外はメトロアプリではアクセスできない様子。
セッション状態は js だと WinJS.Application.sessionState で、XAML C# では SuspensionManager で保存できる。
スプラッシュは15秒以上起動にかかるときには拡張して、自分で画面を表示すること。15秒以上起動にかかるとアプリが強制的に終了し、起動できない。

さらにユーザーの操作とニーズに踏み込んで

ユーザーのニーズはコンテンツを消費すること、アプリ間で共有すること、状況に応じて検索すること。
「コンテンツを消費する」に対応するのがメトロアプリの通常の動作 ( Launch )。共有 ( ShareTarget ) と検索 ( Search ) のそれぞれチャームで起動する内容は、アプリケーションの起動時に、イベント引数でそれぞれのモードで起動されたことがわかるようになっている。js だと Activated, C# では OnLaunch イベントで、eventArgs.Kind を確認して場合分けする。
タイルによる通知。更新用APIとセカンダリタイルがある。時間を指定してその間だけ表示することも出来る。バッチ機能で状態を表すことも出来る。それぞれ、その表示を「いつクリアするか？」を考える。タイルに通知されているとき、アプリは既に起動していないので。タイルの通知、バッチはロック画面にも表示される。
他にバックグラウンドオーディオと、バックグラウンドダウンロードタスクがある。ビジュアル要素にオーディオカテゴリを追加し、スタートページを何でもいいから指定しておかないと、ビルドが通らないとのこと。

全体的に Windows Phone と同じ動作だと思いますが、JavaScript 向けの実装が紹介されたり、プロセスの動作を詳細に確認できたり理解が深まりました。

PL-008 Internet Explorer 10 そしてそれ以降に対応するためには？（14:00～14:45）

前の他のセッションでIE10の説明がされたようで（それには別の同僚が参加したので、後で話を聞いてみますが）、概要ではなく詳細な技術的な部分について

IE10 で強化されたのは、Web標準、タッチ対応、開発ツール
デスクトップ版と Metro スタイル版がある。一つの exe で両方制御。
メトロ版はプラグイン（ActiveX, Silverlight, Flash ）が動作しない。
しかし HTML5 は万能ではない。Silverlight や Flash が必要かどうか？検討する必要がある。
IE9 から「セーブマークアップ」＝「他のブラウザと同じHTML表示で頑張ろう」と決めたらしい。
IEは安定した仕様（解釈が複数考えられるものでない仕様）を実装していく方針なので、他のブラウザと比べて最新機能が使えない場合がある。
GPUアクセラレーションがついたため高速。これはインターネットオプションでOFFに出来る。
やるべきことは 1. <!DOCTYPE html> 宣言、2. 古いマークアップを捨てる、3. 機能検査を取り入れる。
機能検査は、使いたい機能が使えるか？どうか？判定する2分岐だけのコードを書いて実装していくこと。UserAgent によって処理をかき分けるようなことはしないようにしよう。1日目のキーノートセッションであったように、様々なサイズのデバイス、ホワイトボード代わりの Windows 8などが出たときに、Web が同じように表示されることを求めることも、それを実現するのも（コスト的にも）出来ない時代になってきているはず。

このあたりは今日の最後のセッションに関連した対応方法がありました。

HTML5対応できたか？はCompactInspector を使って確認できる。
meta タグを書くとページ上に表示してくれる。他に、Fiddrer を使って（たとえ本番サイトであっても）Httpをフックして自動的に挿入してしまうことも出来る。Compact Inspector User Guide 参照。
http://ie.microsoft.com/testdrive/ 参照。
F12 ツールで、互換性表示を確認できる。互換性サイトは、MSの互換性サイトリスト（このサイトは「IE8で動かすべき」などの一覧） cvlist によって決まる、あるいは metaタグで指定されている、あるいはサーバーの指定でHTTPヘッダにより指定される場合に変更される。
互換性表示をやめて、最新のIEにすることを目指そう。
F12 ツールは他にプロファイラやネットワークキャプチャがとても使える。ネットワークキャプチャで、バーの長いものをチューニングすればサイトを高速化できる。

さらに Windows 8 らしい内容に踏み込んで

Windows 8 はタッチ対応。MSPointersAPI でマルチタッチ対応。
プラグインフリーに対応させる。例えば HTML5 で動画再生させられるか？確認し、だめならデスクトップ表示で Flash 動画を採用する。現在では著作権保護された動画をHTML5で再生することが出来ない。将来的に、HTML5が拡張されて使えるようになれば、HTML5へ移行する、など。
メトロIE10からメトロアプリを起動するには、2行 meta タグを書くだけ。
コンテンツが主役！HTML5 でアプリを作ろう。
Go Metro facebookページ http://www.facebook.com/5Metro
Developer Camp @ UDX 5/9-10 ～その後も続けるそうです。
ビジネス的に先行してリリースしたいときはエバンジェリストにコンタクト

WA-023 3D Metro スタイルアプリと Direct X（15:00～15:45）

Windows 8 用にアップデートされた Direct X 11.1 で3D表示を実装する方法でした。メトロでもこれまでの Direct X と同様の考えでアプリを実装出来る様子。サンプルは C++ でした。

広域な Direct 3D ハードウェアサポート。9.1 ～ 11.1 まで動作。機能レベルを指定し、パフォーマンスが異なるが、動作出来る。
3D Graphics は WinRT（メトロアプリ）、Win32（デスクトップ）ともに同じAPIを使用する。パフォーマンスは全く同じ。
立体視、省電力、テッセレーション、DirectCompute でGPGPU を使用すると 200倍パフォーマンスが上がった例も。テクスチャ圧縮はバスのボトルネックとロード時間を改善するので、圧縮するのを推奨。
アセットの最適化。ダウンロードを可能な限り小さくする。
メトロ用のサンプルはとてもわかりやすくAPIを使用していて、手順も明確。DirectXSample.h 18行目にブレークポイントを置くと良い。
Simple3DGame と MarbleMaze が参考になる。
Download: Creating a Great Metro Style Game for Windows 8 – Microsoft Download Center – Download Details
Windows 8 は 3Dアプリ用の理想的なプラットフォーム。スレートPCでもバリバリ使える！
Metroに3Dを採用して差別化しよう。

正直に言うと、C++ の内容だけじゃなく、Windows Phone のように C# で、XAMLと Direct 3D 表示を重ねる手法が聞けるのでは？と期待していたのですが、それは無かった。出来るかどうか？も不明です。

WA-005 JavaScript + HTML による Meroスタイルアプリ開発概要（16:00～16:45）

前のセッションと内容が重複しますが

IEはエンタープライズ、企業向け、ITに詳しくない人でも使う・・・ので、仕様が固まったものしか実装しない。保守的である。
しかし、IE9から JavaScript はエンジンがチャクラ(Chakra) になり高速化、ハードウェアエクセラレーションもつい貸さされた。
IE10 ではさらにHTML5のWeb標準に多く対応した。

Windows 8 が対応しているCSS3は次のとおり

変形：3Dトランスフォーム、2Dトランスフォーム
動き：アニメーション、切り換え効果
レイアウト：グリッド、フレックスボックス
グラフィックス：グラデーション、フィルター効果、文字の影
コンテンツフロー：複数列、ハイフネーション、改ページ、位置指定フローティング

それぞれ Windows ハードウェアエクセラレータを利用して美しさと早さを実現。

対応しているHTML5は http://ie.microsoft.com/testdrive/ で確認。
Windows Internet Explorer 10 開発者向けガイドにサポートされている機能一覧がある。

具体的に使用できるのは

Webソケット
Webワーカー
IndexedDB
ECMAScript5
ファイルAPIとBLOB（JPEGバイナリの位置情報を取得して利用、なども）
地理位置情報
Audioタグ
Videoタグ（ただし対応フォーマットがブラウザによって違うので注意）
タッチ優先：ポインタイベント、ズーム領域、スナップポイント
フォーム：検証、入力の種類（inputタグに属性を追加するだけで対応）
スペルチェック

それぞれブラウザによって動作が違う場合があるが、Windows 8 のメトロでは同じ動きをする！非対応ブラウザのためにフォームの検証を書く必要は無い。

私はこのIE10メトロ版について、会社でどう報告しようか？悩んでいましたが、この点を聞いて納得する答えが出ました。

「IE10メトロ版は、新しいデバイスと同じ」

と報告しようと思います。つまり、「iPad 対応」と同じように対応するかどうか？で判断すればいい HTML5 なのだと思います。Androidの各ブラウザの挙動と違って Windows 8 メトロIEなら全部同じ動きをするので、これはわかりやすいはず。

要件にあわせてIE10で表示してもいいし、メトロアプリでもいいような気がします。

さらに・・・

マルチタッチは MsPointerDown/Up を使用。マルチタッチ入力とマウス入力は別に利用できる。Internet Explorer ブログ（日本語版）にiPhone用のサンプルと一緒に載っているそうです。
すべてのブラウザーでマルチタッチ入力とマウス入力を処理する – Internet Explorer ブログ (日本語版) – Site Home – MSDN Blogs
開発ツールは Visual Studio 11 と Expression Blend 。共に Express Edition（無料）がある。デバッガが強化されてDOMエクスプローラが使える。
Blend は JavaScript でのビジュアル開発が出来る。対話モードでデザインを操作しながら確認できる。
メトロアプリを js で作るときは標準のテンプレートを選ぶべき。ライフサイクルに応じた処理が入っているので。
メトロスタイルアプリは開発者ライセンスが埋め込まれたＰＣでしかデバッグ版は動作しない（ストアから配布するしかない）。
シミュレータでデバイスが無くても開発は出来る。

WinJS は JavaScript でメトロスタイルアプリをビルドするためのライブラリ

コントロールメトロアニメーション、エフェクト、形状に対応したものが用意されている。
データバインドが数行で出来る
ヘルパ名前空間
promise
アプリモデル
ナビゲーション

つまり「 Web標準 + Windows 技術 = メトロアプリ」ということ

WA-002 Metro スタイル UI のデザイン検討に関するセッション（17:00~17:45）

個人的に最後のこのセッションが一番感動しました。途中で泣きそうになってしまいました。が、デザインの話なので、テキストでは伝えられない・・・トピックやキーワードだけ

デザインとは「人の生活をより便利にする」「問題を解決する」もの
頭に水を乗せて何キロも運ぶ少年～首に病気になってしまう～頃がして引っ張れるデザインで解決
2004年の東京メトロ～高齢化のため見やすさの改善、国際化都市、鉄道の複雑さをシンプルに
kabu.com のアプリ～ユーザーはレポートに興味がある。表示方法や機能に興味はない。

メトロのビジョンは

誰もが利用しやすい：様々なバックグラウンドを持った人でも利用できる
デザイン言語は共通：フォント、操作、構造が共通で一貫性がある
シンプルかつ全体が調和：モダンリビングや禅の庭～そぎ落とされた美
タッチでもマウスでも：どんな画面でも AnySize

「ガイドラインにあるので」と言いながら、なんとしても

UXから検討する
UX = ユーザーエクスペリエンス
本人が本当にやりたいこと「楽しく」「面白く」「心地よく」やれる
タッチパネルはUI、それで実現されるその人の生活から周りの人の生活、そしてすべてを取り巻く都市や様々を含めたその人の体験が UX
体験価値

スタバで考えると

コーヒー原価10円
グッズにして30円
サービスになって200円
エクスペリエンスになって500円～スタバの平均単価

価値は

サードプレイス（第3のオフィス）
なぜか行ってしまう、スタバの居心地の良さ

ビジネスとしてUXを考え、メトロスタイルにあっているか？検討する

誰に何を届けるか？
シナリオを検討する
アプリケーションのゴールを設定する
ワイヤーフレームでメトロに適さない部分を削除していく、最終的にチャームやアプリケーションバー、コンテンツに昇華できるか？検討する。
広告はコンテンツか？～コンテキスト（文脈）とあっているときのみコンテンツになりうる。楽天レシピなら、「ケチャップを使った料理の特集」に表示されるケチャップ商品のリンクはコンテンツ。
背景が気にならないか？
タイルでは単色背景のみ。レイアウトも指定あり。
パン表示でのスクロール方向が縦横混在はＮＧ。ただし、全体がスクロールするときのコンテンツの縦スクロールは、推奨されないが使用可能な範囲。
検索はチャームのみ。画面内やアプリケーションバーでは禁止。どんなアプリも同じ操作で検索が開始できるように、ガイドライン通りに作ろう。

Adobeの世界的な調査で、「東京が一番クリエイティブ」というアンケート結果があるそうです。1位30%東京、2位21%ニューヨーク。それぞれの国の人が、みんな一番は自国をあげ、「2位は東京」としたため、東京が1位になったようです。

しかし、日本人は1位が東京だと思っていない。

Windows 8 では東京のメトロを参考にデザインが採用され、キーノートセッションでもあった日本の文化を支える技術をこれだけテーマにしているのだから、もっと自信を持って UX「体験価値」を実現できるようにしよう！という感じでした。

最後のセッションの内容が私の中で Windows Developer Days のまとめであり、Windows 8 の本質を表現してると感じました。

（追記）小ネタ

メトロUI スタート画面でいきなり文字を入力すると検索が開始できるらしい
スナップビュー表示（左右に分割）は、1366ピクセル以上必要！
私が聞いたセッションのデモ中に「タッチで電車の中で Visual Studio で開発する人もいるかもしれませんね」という話があったのですが、それは C++ や C# ではだめです。Visual Basic なら可能！と経験者は声を大にして言いたい！大文字小文字を区別しないこと、最後に;などの記号をつけなくていいことで、VBではインテリセンスを使って高速にコードをかけます。イベントハンドラもVBなら簡単。タッチデバイスでも、親指だけで操作する小サイズキーボードでも、VBなら開発が出来ます！（Windows であれば。W-ZERO3のようにコンパイラのサポートが受けられない場合は無理でした）
Visual Studio 11 の C++ でDirect3Dをデバッグするとき、画面をスナップすると、そのときに構築されているサーフェイスやテクスチャの構造を確認することができる。改装で表示をON/OFFして（ちょうどIEのF12ツールのように）確認できるそうです。今日のキーノートセッションより。

（おまけ）戦利品

Microsoft公式本を 20%オフで買えました！しかも一冊はどこよりも早く発売かな？

Visual Studio 11 ベータ版のディスクも貰いました！これはうれしい！

Kinect for Windows の窓辺ななみ＆クラウディアの3Dデータの利用ライセンスについてブースで聞いてきました。

まず、クラウディアはMSのガイドラインに準拠で、フリーであれば個人・法人問わずアプリにデータを組み込んで使用しても大丈夫だそうです。例えば、入力にKinectを使用して、Windows Phone では表示だけする、という場合でも良いそうです。

窓辺ななみは、アプリを作る前に「どんなアプリを作って公開したいか」を事務局に相談すると良いそうです。

これで Kinect を使ったアプリ開発の幅が広がりますね！買いですね。

今日は、お昼のセッションが満員で入れなかったので、ランチタイムに各企業をまわっていたので、他にも色々貰いました。あと、全体を通じたアンケートに答えると、機能は水筒（？）、今日はワコムのタブレットデバイスタッチ用のペンが貰えました。

最後に

二日間の WDD を終わって、集中力の限界で（ブログも深夜までかかって書いてしまったし）かなりぐったりですが、とても楽しかったです。今でもまだワクワクして、早くアプリが作りたくてソワソワしている感じで。

私は会社の同僚とセッションを分担して聞いて回ったので、他の直接聞けなかったセッションの話を聞けるのも楽しみですね。自分も発表して共有して、明日に活かさないといけません。個人的には Windows Phone の開発と共に Windows 8 対応の開発も早く始めていきたいと思うようになりました。

膨大な情報が一度に入ってきたので、まだ全然整理できていませんが、一気に理解が深まり、腑に落ちた、というかなんだか方向性が見えた気がします。そして、こんな楽しい気持ちにさせてもらえたことにとても感謝しています。

いや～ Windows 3.1 と Visual Basic 2.0 からプログラムを続けてきて（高校の部活でした）、よかった。WIndows Phone 開発もしていて良かった。Windows 95 の発売か、Visual Studio 2005 の発売か、そんなこれまで何度かあった大きな転機になったと思えるタイミングと、同じ感じがしました。決して Me や Vista ではない、Windows 8 は成功する気がします。個人的に何度も主張している「緑」じゃなくて「青」が WDD 全体のテーマカラーだったのも良かったし（笑）。なにより、エンジニアの数が半端無かった。みんな、やっぱり Windows 7 の成功イメージがあって、次の Windows 8 も「メトロ使いづらくなる、対応面倒になる」と思いつつも、心のどこかで成功して欲しい、するかもしれない、と思っている部分があったのではないでしょうか。各セッションをメモをとりながら聞く参加者の気迫も、なんとしても自分も成功について行くぞ！という気持ちが現れていたように思いました。

そして「マイクロソフトは日本の開発者（と会社、ビジネス）と共にある」と表現してくれたことが、うれしかったのかもしれません。

さぁ、ここからはエンジニアの仕事ですね。やらなきゃいけないことも半端ないですが、仕事でも個人でも、ちょっと頑張ってみたいと思います。頑張ろう！

I love Windows !!