Silverlight
Reflection!
@mitsuba_tan
Windows Phone7の世界観

Profile
H.N.：蜜葉 優。
本名：泉本優輝
Twitter：@mitsuba_tan
Facebook：泉本優輝
Silverlight歴：３年ちょっと
Blog : 蜜葉の日記
http://d.hatena.ne.jp/c-mitsuba/
Community

Profile
C#書けない子！

WP7App

宣伝
• 昨日発売の月刊I/O
• 650円
• WP7の開発記事執筆
• 環境構築とHello WP7
• 評判が良かったら回数がUP!
• アンケート送って！

Agenda
• WindowsPhone7
• Phone7ってなに？
• どうやって開発するの？
• WindowsPhone7の世界観
• Metro
• Live Tile
• Hub

Agenda
• Panorama
• 使い方
• ポイント
• Pivot
• 使い方
• AppHubのお話

Purpose
「WindowsPhone7らしい」
を感じてもらう

Purpose
人柱増加計画！

WindowsPhoneってなに？

WindowsPhoneってなに？
 Microsoftが発表したスマートフォン
 http://www.windowsphone7.com/
 UIやハードウェア仕様はMSが確定
 Officeも使えます
 メーカーは決まったUIの上で独自性を出す
 ARMプロセッサ
 ３Dサクサク！
 ぬるぬる！

ハードウェア仕様
 800x480 QVGA/ 480x320 HVGA （HVGA対応はあとから）
 静電式パネル 4ポイント以上のタッチポイント
 A-GPS, コンパス、加速度センサー、照度センサー、近接セン
サー
 500万画素以上のカメラ＋フラッシュ＋カメラボタン
 標準のコーデック(メディア）
 256MB RAM＋8GB フラッシュ ROM
 DX9 対応の GPU
 CPUは ARMv7 Cortex/Scorpion 以上
 3つの ハードウェアボタン（Start, Search, Back)

端末
1

Nokia Launch Pad
 Nokia Launchpad members to get free phones
 年間300ユーロ
 初年 無料らしい
1

開発するには

WindowsPhoneDeveloperTools

Expression Blend for Windows phone
ずっとただで使える
唯一のBlend！

Install
Phone SDK ＋ Blend SP1 J ＝
Phone Tools(Blend SP1 En + Phone SDK)
– Blend SP1 En
+ Blend J
+ Blend SP1 J
やけに面倒な算数ですねっ！

January Update
・コピー＆ペースト
（TextBox,PasswordBox,WebBrowser)
・Windows Phone Connect Tool

January Update
１．WindowsPhoneDeveloperResources_
en-US_Patch1.msp
２． VS10-KB2486994-x86.exe
http://create.msdn.com/en-
us/news/Windows_Phone_Developer_Tools_January_2011
_Update

テンプレートを表示する
1.VS インストールフォルダ¥Common7¥IDE¥ProjectTe
mplates¥CSharp¥Silverlight for Windows Phone を開く
2.“1041” という名前のフォルダを作成し “1033” に存
在している zip ファイルを全てコピーする

3.VS インストールフォルダ¥Common7¥IDE¥ItemTemplates
¥CSharp¥Silverlight for Windows Phone を開く
4.“1041” という名前のフォルダを作成し “1033” に存在し
ている zip ファイルを全てコピーする
5.コマンドラ・ンで Visual Studio のインストールフォルダへ
移動し、 次のコマンドを実行 devenv / setup

WindowsPhone7の世界観

CodeName:Metro
 世界共通のデザイン
 目的まで最短/最適経路を示す
 地下鉄の路線図
 色分け
 記号化
 番号付け

CodeName:Metro

UI:Live Tiles
 Tiles
 影などのない正方形、もしくは長方
形のボタンが並んでいる
 それぞれのタイルかアプリやWeb
サービスと連携している
 Live
 最新のアップデート情報を常に表
示

UI:Live Tiles
 このLive Tilesを眺めるだけで情報把握ができる
 ライブタイルの色などのカスタマイズが可能
 ソフトウェアメーカーが自由に付け足し可能（独自性）

Hub
 People:
 Picture
 Games
 Music + Video
 Market Place
 Office

People
 "人"を軸にソーシャルアクティビティやコンテンツを
アグリゲートするコミュニケーションハブ。
Picture
 写真や動画の共有。

Game
 Xbox LIVEゲーム。スポットライトフィード、ゲーマー・
アバターによる交流など、Xboxの世界がWindows
Phoneにも広がる。
Music + Video
0 Zuneのメディア体験を携帯プラットフォームに統合。
Zune PCソフトウエアで管理する音楽・動画コンテンツ
を携帯に転送、オンライン音楽サービスとも連係する。

MarketPlace
 Windows Phone 7用のアプリケーションやゲームを発
見・入手するオンラインストア。
Office
 Office Mobile、OneNote、SharePoint Workspace
などに一カ所からアクセス。ドキュメントの閲覧、
編集、共有に加えて、Outlook Mobileが個人情報
管理をサポート。

ちょっと触ってみましょう

開発者からみる世界観

Panorama & Pivot

Panorama

Pivot

Panorama & Pivot
Panorama
(コンテンツ集）
Pivot Pivot Pivot
（データ集） （データ集） （データ集）
データ データ データ

Panorama & Pivot
Seemicがよく出来てる

Panorama

MS「こう使うとかっこいいんだぜ！」
チラ見せ
次のパノラマアイテムだけでなく、背景も続いて見
えるように工夫しましょう。
<controls:Panorama.Background>
<ImageBrush
ImageSource=“rabbit.jpg"/>
</controls:Panorama.Background>

MS「こう使うとかっこいいんだぜ！」
 ロゴを付ける
パノラマのタイトルにロゴを
おいてもいいでしょう。
<controls:Panorama.Title>
<StackPanel Orientation="Horizontal">
<Image Source="icon.png"></Image>
<TextBlock Text="うさぎ"></TextBlock>
</StackPanel>
</controls:Panorama.Title>

Pivot

Pivot::Live Labs
http://netflixpivot.cloudapp.net/

Pivot
MS「データセットの分類して
表示するのに使うといいよ」

Pivot
MS「あるいはソートして表示
するのに使うのもいいよ」

実際にデザインしてみる

DEMO

Silverlight for Windows Phone Toolkit
 デフォルトで入っていないPhone7で使えるコントロール集
 CodePlex:: http://silverlight.codeplex.com/

Silverlight for Windows Phone Toolkit
 DatePicker／TimePicker
 ContextMenu
 GestureHelper

DatePicker
時間や日付の選択に
使うとかっこいいかも！

ContextMenu
• Tap & Hold（長押し）で
表示するメニュー
• 結構どこが押せるか
分かりにくいので使い
どころが重要かも。

GestureHelper
• XAMLでジェスチャーも簡
単に扱えます。
• 今回はPinchをやってみま
す。
• エミュレータでは、Multi-
Touch Vistaを入れれば、
マウス２つで検証できま
す。
• http://multitouchvista.co
deplex.com/

アイコン集
 %ProgramFiles%¥Microsoft SDKs¥Windows
Phone¥v7.0¥Icons
 開発ツールに入ってる

AppHub

AppHub
1. AppHubに登録する
 ここで9800円かかる
 （学生はDreamSparkを使えます）
2. GeoTrustの認証受ける
 最近は１週間ぐらい
3. 端末をアンロックする

AppHub
 xapを登録する
 レポートをみてみる

まとめ
 スマートフォンの中で唯一ビジュアル的に作れるプラット
フォーム(Blend)
 なので、もしかしたら一番敷居低い？
 OSの出来もいい！
 だから余計にWP7の世界観にあったアプリを作る必要がある
• １１月あたりに日本から端末がでるかも
• まだMarketPlaceには日本向けのアプリが少ない
• チャンス！？

まとめ

まとめ
 UIデザインガイド:
 http://blogs.msdn.com/b/shintak/archive/2010/12/10/1010
2734.aspx
 Windows Phone Design System – Codename Metro.pdf
 http://go.microsoft.com/fwlink/?LinkID=189338
 Design Templates for Windows Phone 7
 http://go.microsoft.com/fwlink/?LinkId=196225
 CodeRecipe:
 http://msdn.microsoft.com/ja-
jp/netframework/ee708289#winphone

まとめ
 高橋忍さんのブログ：http://blogs.msdn.com/b/shintak/
 田中達彦さんのブログ：http://blogs.msdn.com/b/ttanaka/
 ななふぉ：http://nanapho.jp/
 酢ろぐ:
 http://d.hatena.ne.jp/ch3cooh393/
 backyard of 伊勢的新常識:
 http://d.hatena.ne.jp/iseebi/
 tmytのらくがき
 http://d.hatena.ne.jp/tmyt/

ご清聴ありがとうございました。