その他 Archive

Silverlight実践プログラミング―実開発に役立つサンプルプログラム集 (I・O BOOKS)

11 月 25 日 (木) /26日(金)@ザ・プリンス パークタワー東京
Professional Developer Conference 10 Japan (PDC 10 Japan)に行ってきました。

User Experienceの方のセッションに参加してきました。
１日目は、Windows Phone 7アプリ開発に関するセッション
※一部、編集中となります。

11/25（木）

UX1 ついに公開! Windwos Phone 7 知っておくべき開発の心得

エバンジェリスト：田中達彦氏　ブログ

目指しているもの

・デザイン：ユーザ最優先
・プラットフォーム：よりリッチでシンプルなアプリを簡単に
・ハードウェア：よりスピーディな開発

デザインコンセプト

コードネーム：メトロ
・地下鉄　ある人が目的を目指す→いかに簡単にたどり着けるかを提供
・東京の地下鉄わかりづらい　色分けたり、デザインで工夫
・ユーザーのやりたいことをすぐ実現できるように。

デモ

届いたばかりという、HTC HD7で実演。Windows Phone 7初めて見ました。
・LandScape/Portrait対応はしている模様。
・基本的なタッチジェスチャーの概念用語は、iPhone同様
・ハードウェアキー３つ　スタートボタンでホーム画面に戻る

ユーザーの決定タイミングで動作するUIが望まれる（イベントドリブン）。

ライブタイル

・iPhoneでいうホームスクリーンにリッチなUIをのせられるので、アプリを作る際の見せ所
　Androidのウィジェットみたいなものか。

ハブ

・複数の情報がまとまった情報ポータル
　　・アプリからではなく目的志向
　　・柔軟性
　　　カスタマイズ可能　
　　　クラウドとの連携
　　横スライド時の動きが独特

特徴的なコントロール

パノラマ
・絵巻のようなUI
・ハブでも採用

ピボット
・タブ切り替え＋パノラマ形式

ハードウェア用件

・800×480 480×320　この二つに固定！
・４ポイント以上のマルチタッチ
・A-GPS 加速度センサー　電子コンパス、焦土
・カメラ
・マルチメディア　コーデック対応
・メモリ　２５６MB以上　８GBのフラッシュROM
・GPU DirectX 9
・CPU ARM Cortex Scropion 以上
・ハードウェアボタン　Back, Start, Search

以上の要件がWindows Phone 7 必須！
デバイス差異をなくして開発負担を回避している（ありがたい！）
　

アプリケーションプラットフォーム

1. Silverlight

・XAML/イベントドリブン型アプリケーションのUIフレームワーク
・UIロジック分離
・メトロ対応コントロール
・PC共有

2. XNA

・FPS(Frame Per Second)
・２D／３Dゲームを開発
・XBOX360 Windows, Zune, PCでの実績
・メディア再生、入力など

開発イメージ

・Visual StudioでPJ生成時、
　 Silverlight fro windows phone から、デザインパターンを選択（パノラマとかピボットとか）
・コントロールがメトロ対応、ボタンイベントなどは、Silverlightと同様。

【特徴】
・設定のテーマで、dark/lightを選べ、カラー変更すると、フォントカラーとタイルの背景色、コントロールのカラーが変わる。（デフォルト？XAMLで指定？）
・アイコンやデザインの際に注意が必要。

XNA
FPS(30 WindwosPhone7 デフォルト) Spirte

マーケットプレイス

様々な分野　”try” or “buy”　トライアル版と、製品版をひとつのバイナリに入れられる。
　
□App Hub
http://create.msdn.com/ja-JP/

□WindwosPhone向けに提出
・アプリ申請、アプリパケッケージング＆確認、メタデータ入力、審査、サイン
・年間登録費99$
・アプリの申請日
・有償：アプリ数に関わらず無償
・無償：５アプリまで無償　それ以降　$１９．９９/アプリ

・70%収入シェア
・トライアルAPI
　１つのバイナリでどちらも対応
　使用期間は自分で決められる
　有償、フリーミアム、広告サポート、無償

・アニメーション、Windows Phone7規定のものがある
・オリジナルアニメーションは、Blendで作る必要がある。

関連リンク

アプリ&ゲームの投稿 http://create
Windows phome デベロッパーセンター
http://msdn.microsoft.com/ja-jp/windowsphone/default.asp

Windows Phone Blog
Silverlight Viedo REsources
Wp7 Training Kit

□おまけ）Windows Phoneアプリケーション開発入門

http://gihyo.jp/dev/serial/01/windows-phone/0010

UX2 カンタン、ハヤイ、キレイ！　WindowsPhone7アプリケーション開発

ここでは、アプリケーションプラットフォーム一つ目である、Silverlightでのアプリ開発について。

高橋忍さん
日本版Windows Phone ７ スケジュールは未定だが、順調に開発は進んでいる

Silverlight for Windows Phone

・ほぼ、Silverlight3で間違いなし。　
※メディア再生は１個に限られる。などプラットフォームの制約はある。
・開発環境は無料、ダウンロード提供 全パッケージ入り。
・Blend/VS 日本語版はExpression Editionが入る

Windows 版と WP7 版の Silverlight の違い
MSDNより）
・Differences Between Silverlight and Silverlight for Windows Phone
・Features Supported in Silverlight for Windows Phone
ブラウザでのサポートがない、通信方法等は制約がある、高機能言語系はまだサポートされていない

デバイスエミュレーター

・センサーとかハードウェア関連は非対応
・F5でインスタント起動
・GPUエミュレーション
・画面の回転、サイズ変更、スキン

ポーズキーを押すと、ソフトウェアキーボドを閉じて、PCから文字入力できる。

Silverlight Tweeterクライアントデモ。

→詳しくはブログで
・特定の人のTweetをとってくる
・Blendのデバイスでのテーマで　確認できる。　プレビュー先がエミュレーターなど
・ListBoxコントロールを使って、レイアウトを整形　 StackPlnelで。
・フォントカラーの色リソースを　PhoneAccentcolorで、ユーザーのテーマカラーを反映。
・ユーザーの設定色か、固定色か選べる
・アプリの最初のページに戻る、を押すと　アプリの終了
・基本、Blendは一緒、コントロールと画面の制限があるというイメージ。

ナビゲーション

・フレーム
　最上位のコンテナコントロール
　PhoneApplicationFrameクラス
・ページ
　フレーム内のコンテンツエリア
　PhoneApplicationPage派生クラス
・ページナビゲーション
　画面の移動＝ページの変更
　NavigatedTo / NavigatedFrom

ハードウェアキーの戻るとの関係性が重要。

　WP7では、テンプレートでLandScape/Portraitは固定してしまったほうがいい。

　

ページ遷移は２通り

1. HyperlinkButton
　　navigateurl /Page1.xaml　に遷移。

　2. NavigationService.Navigate(new Uri(“/Page1.xaml”, UnKind.Relative));

戻る履歴は永遠に残るので注意!

・Storybordで、画面遷移のアニメーションエフェクトが作れる　

Pivot / Panorama

・ ストレスのないページ間移動を実現するコントロール
・画面サイズの小ささをカバーするUIテンプレート
・パノラマは広告ストレスを軽減するw
・ピボット、パノラマは画面遷移じゃなくて、コンテンツ内切り替えなので戻るボタンでは戻れない。
　・戻るボタンで終了されたら困る場合、イベントフックして、ほんとうに終了していいですか？
　　を表示させることができる。
　・クラウドとPUSH配信に対応　LiveTitleに表示
　　Wether Notification Server
　IEの天気更新→アプリへ天気データ
　　タイルの更新はローカルでも可能。
　・中断と再開　
　　WP7では動作するアプリは１つ
　　背面のアプリは停止、戻ると再開する
　　イベントが発生するので、データ退避する必要がある。
　・４つのイベント
　　起動、中断、再開、終了

　Programming
　Charles Petzold氏の１０００pageが、フリーでPDFで落とせます！
http://www.charlespetzold.com/

UX3 XNAがスマートフォンにやってきた！Windows Phone 7 のXNAゲーム開発

XNA4.0

・ゲームを作ろう
・3Dグラフィックス
・最適化

XNA4.0 fpsゲーム用アプリケーション用フレームワーク

Compact Framework3.7ベース
・Windwos Phone 7
・XBOX 360
・Windows 7 / Vista

XNA4.0 コードには２つのプロジェクト

・コード用
・コンテンツ用 画像や３Dモデルを読み込む

オーバライドメソッドは４つ

initialize()
loadContent()
Update()
Draw()

画像フォーマット

・DXTフォーマットはフットプリントが小さい。
・GPU内でデコード
・コンテンツプロセッサ
　・テクスチャフォーマット
　　・任意の画像フォーマットをビルド時に、DXTに変換

・GC(ガベージコレクション)
　・１MBごとに約１０ミリ秒
　・メモリを１MB確保するたびにGC
　・GCを動かさないようにコーディングする。

・Windows Phone 7 Development Best Practices Wiki V0.1
　http://wp7dev.wikispaces.com/
　Windows Phone 7 のための新しい情報ポータルとして新しいWikiが公開されています。

Web制作の現場で使う jQueryデザイン入門

jQuery Mobile
http://jquerymobile.com/

スマートフォンやタブレットデバイス向けに開発されているJavaScriptフレームワーク。
iOS、Androind、Blackberry Torch v.6、Palm WebOS Pre/Pixiなどに対応。

デバイスに最適化されたWebアプリを届けたい – jQuery開発者John Resig氏 – マイコムジャーナルより

jQuery Mobile Alpha 2が公開。
大幅なバグ修正、機能拡張、性能改善が実施されたバージョン
※動作にはjQuery 1.4.4が必要。

• jQuery Mobile全体の品質を向上
• 多くのサブシステムを書き換え
• クロスブラウザ互換性品質の向上

2. デモ

こちらから、実際のデモを閲覧できます。
http://jquerymobile.com/demos/1.0a2/

3. 対応環境

各プラットフォームと、ブラウザ対応状況は、こちらから。

Mobile Graded Browser Support
http://jquerymobile.com/gbs/

特に、ネイティブと、PhoneGapとの相性がいいですね。

4. ダウンロード

jQuery Mobileを使うには、下記のホストされているファイルを組み込むか、

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

もしくは、こちらからhttp://jquerymobile.com/download/

※jQuery1.4.4が必要なので、なければこちらからもDLします。
http://docs.jquery.com/Downloading_jQuery

さて、これを組み込んで、
画面遷移、ボタン、スライダーを試してみました。

サンプルURL
http://splitchin.com/sample/iPhone/jquery-mobilea2/

※SafariかChromeで閲覧してください。

個人的には、senchaフレームワークより、扱いやすかったです。

iPhone SDK4 GMをセットアップしたので、
iPhone 4 Simulatorを起動してみました。

1. シミュレーターを起動する

パス結構深いです。
「Macintosh HD」→「Developer」→「Platforms」→
「iPhoneSimulator.platform」→「Developer」→「Applications」
→ iPhone Simulator

2. シミュレーターの種類

3種類、シミュレーターが入っています。
・「iPhone」320×480　アスペクト比3:2（3G/GS）※実機は、163ppi
・「iPad」1024×768 　アスペクト比4:3 ※実機は、132ppi
・「iPhone4」960×640　アスペクト比3:2　※実機は、326ppi

3. iPhone4 Safariを起動してみる。

iPhone最適化されたページも、
テキストやレイアウトは高精細モードに対応してますね。
ただ、画像やアイコンは荒くなりますね。

ホームスクリーンのアイコン

iPhone用の52pxと、恐らくiPhone4用に最適化された
高精細モードのアイコンとでは、画質に差が出ますね。

これは、Retinaディスプレイ3.5inch,
iPhone3Gモデルのディスプレイの4倍に当たる326 ppiで
見るとどうなるか、実機で見てみたいですね。