windowsphone

WindowsPhoneアプリを作る場合に、HTML5+CSS3+JavaScriptでやることがあるんだと思います。
その時に、HTMLコンテンツを表示するためには、WebBrowserコンテンツを使うのですが、ここでjQueryのAjaxを使おうとするとエラーになってハマります。
しばらく悩んで、ググってもなかなかヒットしなかったので出来ないものだと思いましたが、実は出来ると言うことがわかりました。

$.ajax({
    type: 'get',
    dataType: 'json',
    url: 'http://hogehoge.com/',
    data: param
})
.success(onSuccess)
.fail(onError);

となっているコードがあります。このままではダメなので、$.support.cors = true;を設定します。

$.support.cors = true;
$.ajax({
    type: 'get',
    dataType: 'json',
    url: 'http://hogehoge.com/',
    data: param
})
.success(onSuccess)
.fail(onError);

直前にやる必要はないですけどね。

参考：jQuery.support | jQuery API Documentation

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%表示の方が綺麗だ。