@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

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アプリはSilverlightXNAで作ることが出来るが、XNAはゲーム向けである。
Silverlightでも、VisualStudioとExpression Blendと開発ツールがあるが、それぞれ得意分野が違うので、使い分けが重要です。

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

Windows Phoneアプリ開発入門

Windows Phoneアプリ開発入門