Jump into Metro連動セミナー第3回「Windows 8を見越したWindows Phoneアプリ開発に行ってきました #WDseminar

24日に行ってきたので時間がたっちゃいましたが、色々忙しくメモ上げる暇がなくて今になりました。

ちなみに私はWindowsPhoneド素人です。

前半：Metro最新情報Update

ド素人ですので、知らないことが多すぎた。結構刺激的で面白かったです。
以下メモ

Windows8にメトロが導入されます。
UIの基本
- Windowsキーで今まではスタートメニューが開きましたが、スタートスクリーンが開くようになります。
  - ランチャーではなく、タイルの世界です。
- タッチ優先ですが、マウスも併用されます。
  - 色々と操作を考えなくてはなりません、UIコントロールが頑張るところです。
- 現在、ジェスチャーはOSごとに異なっています。
  - マウスの仕様がWindowsによって統一されていったように、ジェスチャーについても標準化されるようになるかも知れません。
6つの要素
- Asset … UIの要素ではないアイコン
  - 解像度が異なる端末ごとに、それぞれ複数用意する必要がある
- スタイル … テーマ
  - 真四角。パフォーマンスを稼ぐ。PCやタブレット、スマートフォンだけでない色々な端末に対応するために、パフォーマンスに問題のないようなもの。
  - また、作りやすさも考えてのこと。
- レイアウト … ルールがある。UnitとGrid。
  - タイトル、ヘッダ、コンテンツは同じ配置になるようにしなければならない。
  - マージンのピクセル数、セクション間のユニット数など厳密なルールがある。
  - 左側は開けておかなくてはいけません。審査に落ちます。
- Point!! 4つの状態
  - Main …通常の1366*768 フルスクリーンの横長の世界
  - スナップあり
  - 縦長
  - 自身がスナップにある縦スクロールの世界でWindowsPhoneに近い
- フォントフォントサイズも決まっている
  - VisualStudioではテンプレートがあります。
  - シミュレータがあります。詳しくはMSDN見てください。
- モーション
  - ライブラリがある。パワーポイントにアニメーションをつけるのとあんまり変わらない。
  - プログレスのようにアニメーションがついたUIもあります。
  - パンは注意が必要です。スクロール方向を混在させないようにしましょう。
- スクリーンフロー
  - 横長のパノラマ → 階層構造
  - フラットシステム → 1画面1コンテンツ
  - スナップはWindowsPhoneのUIを思い出そう。
まとめ
- UXを考えよう！
  - 差別化をどう図るのか
  - UIコントロールに注目
  - 目に見えないUIコントロールもある

後半：Expression Blendを用いたWindowsPhoneアプリケーション

WindowsPhoneアプリは、VisualStudioで簡単なものしか作ったことがなくて、Expression Blendは知らなかったので結構衝撃的でした。非常に面白いなぁとおもいます。
対象は、すでにコンテンツを持っていて、それが静的なものである。すぎにでもリリースしたい人にはものすごく向いている。
WindowsPhoneアプリはSilverlightとXNAで作ることが出来るが、XNAはゲーム向けである。
Silverlightでも、VisualStudioとExpression Blendと開発ツールがあるが、それぞれ得意分野が違うので、使い分けが重要です。

基本
- コンテンツはドラッグ・アンド・ドロップで配置します。
- あとは、テキストなどのコントロールを必要に応じて配置しましょう。
- これだけで出来上がりです。
状態とビヘイビア
- 状態とは？
  - UIコントロールの状態、○○が表示された状態とか、○○が選択されたとか
- 非表示の画像等のコンテンツを配置しておく
  - 状態パネル→グループ→ステート（状態）で、状態ごとの画面を定義しておく。
  - 画像１が表示された状態、画像２が表示された状態、・・・のように定義して登録しておく
- ビヘイビア
  - 振る舞い。状態を変更させる。
  - 色々なビヘイビアのコンポーネントがある。画面に出ないものもある。
  - 機能や使い方さえ把握しておけばよい。
- GoToStateアクション … ステート（状態）を切り替える
  - アセットタブ→ビヘイビアを選択。ビヘイビアを選んで、UIにドロップする。プロパティからビヘイビアの動きを設定する。
- 状態とビヘイビアを分けることで、UIと動きを分離出来る。自分で定義も出来るので使いまわせる。
画面遷移 3種類ある
- ハイパーリンク
  - 履歴を持つのでBackキーでもどる
- パノラマアプリケーション
  - 横に長い画面を移動していく
  - Expression Blendでテンプレートがあるけど、使いにくい。コード読めないとカスタマイズ出来ない。
  - なので、１から自分でやったほうがわかりやすい。
  - アセットからパノラマ、パノラマアイテムを親子構造で並べていく。
  - 背景に、横長の画像を使うと良い。
- ピポッドアプリケーション
  - 基本はパノラマと同じ。パノラマとパノラマアイテム
デバイス機能
- ランチャーとセレクター
- ランチャーはタスクを実行する
- セレクターは何かを選択させて、その結果を受け取る。
  - たぶん、Androidで言うとstartActivityとstartActivityForResult的なものだと思う。
- どちらもデバイス機能にアクセス出来る。
- 似たようなコードになる
- エミュレータでは使えないものもある。
- 基本は、タスクをnewして、設定して、Show()する。
  - ランチャーとセレクターを組み合わせてアプリを作っていく。
アプリ登録時のチェックリスト
- VisualStudioでやります。
- WindowsPhone Icon Makerで簡単に必要なアイコンが作れます。 → Windows Phone Icons Maker - Home
- xapファイルがアプリケーションになります。Debugバージョンではダメですよ。
  - リリースビルドを作る必要があります。アクティブ構成をリリースに変更しましょう。
- プロジェクトのプロパティでアプリ名を変更しよう
  - タイトル、タイルのタイトル、アイコンや背景画像など。
- スクリーンショット
  - エミュレータは100%表示になっているか確認しよう。100%表示の方が綺麗だ。