Silverlight




                   Reflection!

                   @mitsuba_tan




Windows Phone7の世界観
Profile
H.N.:蜜葉 優。
本名:泉本優輝
Twitter:@mitsuba_tan
Facebook:泉本優輝
Silverlight歴:3年ちょっと
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プロセッサ
 3Dサクサク!
 ぬるぬる!
ハードウェア仕様
 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
1.WindowsPhoneDeveloperResources_
    en-US_Patch1.msp

2. 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を入れれば、
  マウス2つで検証できま
  す。
• http://multitouchvista.co
  deplex.com/
アイコン集

 %ProgramFiles%¥Microsoft SDKs¥Windows

  Phone¥v7.0¥Icons


 開発ツールに入ってる
AppHub
AppHub
1. AppHubに登録する
   ここで9800円かかる
   (学生はDreamSparkを使えます)


2. GeoTrustの認証受ける
   最近は1週間ぐらい


3. 端末をアンロックする
AppHub
 xapを登録する
 レポートをみてみる
まとめ
 スマートフォンの中で唯一ビジュアル的に作れるプラット
 フォーム(Blend)
 なので、もしかしたら一番敷居低い?
 OSの出来もいい!
 だから余計にWP7の世界観にあったアプリを作る必要がある
• 11月あたりに日本から端末がでるかも
• まだ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/
ご清聴ありがとうございました。

Wankuma0402