わんくま大阪0402の資料＠みつば

1. Silverlight
Reflection!
@mitsuba_tan
Windows Phone7の世界観

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

3. Profile
C#書けない子！

4. WP7App

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

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

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

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

9. Purpose
人柱増加計画！

11. WindowsPhoneってなに？

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

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

14. 端末
1

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

16. 開発するには

17. WindowsPhoneDeveloperTools

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

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

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

21. 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

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

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

24. WindowsPhone7の世界観

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

26. CodeName:Metro

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

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

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

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

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

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

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

34. 開発者からみる世界観

35. Panorama & Pivot

36. Panorama

37. Pivot

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

39. Panorama & Pivot
Seemicがよく出来てる

40. Panorama

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

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

43. Pivot

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

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

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

47. 実際にデザインしてみる

48. DEMO

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

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

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

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

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

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

55. AppHub

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

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

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

59. まとめ

60. まとめ
 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

61. まとめ
 高橋忍さんのブログ：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/

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