Expression Blend を用いた Windows Phone アプリケーション インフラジスティックス ジャパン池原大然
自己紹介 池原大然 デベロッパーエバンジェリスト INETA 登録スピーカー Email dikehara@infragistics.com Blog http://bit.ly/igdaizen Twitter @Neri78
本日お話させていただくこと 開発環境のおさらいと Expression Blend の特徴 状態 と ビヘイビアー を用いたインタラクション実装 画面遷移を使う デバイス機能へのアクセス方法 アプリケーション提出時のチェックリスト
こんな人にうってつけ コンテンツを既に持っている コンテンツが固定 すぐにアプリをリリースしたい
開発環境のおさらいと Expression Blend の特徴
プラットフォームと開発環境 Silverlight XNA アプリケーション用 Visual Studio (Silverlight for Windows Phone) ゲーム用 Visual Studio (XNA Game Studio) Expression Blend
得意分野 インタラクションデザイン コントロールパーツのカスタマイズ UI レイアウト構築コンテンツ表示 ロジックの記述 Expression Blend Visual Studio
Demo コンテンツの表示 Windows Phone Apps Art Gallery http://msdn.microsoft.com/ja-jp/windowsphone/hh544699
状態 と ビヘイビアー を 用いたインタラクション実装
状態 特定のコントロール 画面の 状態 が表示された 状態 を選択した 状態 コードを記述せずにユーザーの操作にあ わせて予め設定した画面状態に変更する ことができる
Demo 画面状態をつくってみよう
ビヘイビアー 予め特定の機能がパッケージされたコンポーネント 利用者はコードを意識する必要がない レイアウト コントロールに追加 追加で自作することも可能 GoToStateAction 特定のアクション 条件から状態を変化させることができる
Demo ビヘイビアーを利用したインタラクション
画面遷移を使う
Demo 画面遷移それぞれのパターン
ハイパーリンク ( ページ移動 ) ページ遷移 戻る 処理
パノラマ パン またはフリックで一画面分の遷移を行う ( 循環構造 ) Panorama, PanoramaItem コントロール
ピボット パン またはフリックでページの遷移を行う ( 循環構造 ) Pivot, PivotItem コントロール
デバイス機能へのアクセス ここからはコードあり
ランチャーとセレクター ランチャー 完了 or キャンセル 別のオペレーションへ 共にデバイスの機能にアクセスする点では同じ セレクター 完了 or キャンセル 選択した情報をもとにオペレーションを続行
ランチャー セレクター一覧 ランチャー名 BingMapDirectionTask BingMapsTask ConnectionSettingsTask EmailComposeTask MarketplaceDetailTask MarketplaceHubTask MarketplaceReviewTask MarketplaceSearchTask MediaPlayerLauncher PhoneCallTask SearchTask ShareLinkTask ShareStatusTask SmsComposeTask WebBrowserTask できること Bing Maps アプリケーションを起動し ルート検索 表示を行う Bing Maps アプリケーションを起動する 電話回線, Wifi, Bluetooth, エアプレーンモードなどのデバイスのセットワーク接続設定画面を起動する Email を送信する Marketplace クライアントアプリケーションを起動し 指定したアプリケーションの詳細ページを表示する Marketplace クライアントアプリケーションを起動する Marketplace クライアントアプリケーションを起動し 現在のアプリケーションのレビューページを表示する Marketplace クライアントアプリケーションを起動し 指定したキーワードで検索を行うメディアプレーヤーを起動し指定したメディアファイルを再生する あらかじめ指定した番号へ電話をかける あらかじめ指定したキーワードで Web 検索を行う あらかじめ指定したリンクを SNS で共有するメッセージを SNS で共有する SMS メッセージを送信する Web ブラウザーアプリケーションを起動 セレクター名 AddressChooserTask CameraCaptureTask EmailAddressChooserTask GameInviteTask できること 住所が登録されている連絡先一覧を表示し選択する カメラを起動し 写真を撮る Email アドレスが登録されている連絡先一覧を表示し選択する ゲームに招待する PhoneNumberChooserTask 電話番号が登録されている連絡先一覧を表示し選択する PhotoCameraChooserTask SaveContactTask SaveEmailAddressTask SavePhoneNumberTask SaveRingtoneTask 保存されている写真一覧を表示し選択する連絡先情報を保存する Email アドレスを連絡先に保存する電話番号を連絡先に保存する 新しい着信音を選択リストに追加したり 登録したりする
Demo ランチャーの利用
アプリケーション提出時の チェックリスト
事前準備 Visual Studio を利用 リリース版ビルドの作成 アプリケーション情報の設定 ニュートラル言語の設定 Windows Phone Icons Maker を利用 必要な画像ファイルの設定
Windows Phone Icons Maker http://wpiconmaker.codeplex.com/ MarketPlace 提出に必要な画像ファイルを簡単に作成 生成されるファイル名 ( サイズ ) アプリケーション名 200.png (200 x 200) アプリケーション名 173.png (173 x 173) アプリケーション名 99.png (99 x 99) Background.png (173 x 173) ApplicationIcon.png (62 x 62) 用途 MarketPlace でアプリケーション申請時に使用 MarketPlace でアプリケーション申請時に使用 MarketPlace でアプリケーション申請時に使用タイル表示時のアプリケーション画像アプリケーションのアイコン画像
Demo プロジェクトの設定と Windows Phone Icons Maker
チェックリスト xap ファイルは Release でビルドされているか アプリケーション情報 ( タイトルなど ) は公開用に設定されているか アプリケーションのニュートラル言語が設定されているか 提出に必要な各種画像が作成されているか 200 x 200, 173 x 173, 99 x 99 480 x 800 ( アプリケーション動作時の様子かつ デバッグ情報が表示されていないもの ) Marketplace Testkit の自動テストにパスしているか
アプリ提出のフロー AppHub で詳しく解説 AppHub Windows phone フロー で Bing る!
まとめ
本日お話させていただいたこと 開発環境のおさらいと Expression Blend の特徴 状態 と ビヘイビアー によるインタラクション実装 画面遷移を使う デバイス機能へのアクセス方法 アプリケーション提出時のチェックリスト
リソース Windows Phone Apps Art Gallery http://msdn.microsoft.com/ja-jp/windowsphone/hh544699 Windows Phone Icon Maker http://wpiconmaker.codeplex.com/ Twitter: Windows Phone 7 開発者むけチャンネル https://twitter.com/#!/search/%23wp7dev_jp インフラジスティックス Blog ( デモサンプル 解説 Tips など ) http://blogs.jp.infragistics.com/blogs/default.aspx