SlideShare a Scribd company logo
1 of 62
Download to read offline
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/
ご清聴ありがとうございました。

More Related Content

Similar to Wankuma0402

devsumi17 d-2
devsumi17 d-2devsumi17 d-2
devsumi17 d-2dikehara
 
20110212 Silverlight から Bing Maps に触れる
20110212 Silverlight から Bing Maps に触れる20110212 Silverlight から Bing Maps に触れる
20110212 Silverlight から Bing Maps に触れるKenji Wada
 
ゲーム開発環境、もっと楽にできるよ♬ マインクラフトでも実践している DevOpsでゲーム開発を効率化しよう!
ゲーム開発環境、もっと楽にできるよ♬  マインクラフトでも実践している DevOpsでゲーム開発を効率化しよう!ゲーム開発環境、もっと楽にできるよ♬  マインクラフトでも実践している DevOpsでゲーム開発を効率化しよう!
ゲーム開発環境、もっと楽にできるよ♬ マインクラフトでも実践している DevOpsでゲーム開発を効率化しよう!Hiroko Umetsu
 
Windows phone & windows 8で見えてくるメトロの世界
Windows phone & windows 8で見えてくるメトロの世界Windows phone & windows 8で見えてくるメトロの世界
Windows phone & windows 8で見えてくるメトロの世界Makoto Nishimura
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update 新機能とアプリケーション開発
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update新機能とアプリケーション開発20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update新機能とアプリケーション開発
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update 新機能とアプリケーション開発shinobu takahashi
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)Yoshiki Ushida
 
Sencha touchのはじめかた
Sencha touchのはじめかたSencha touchのはじめかた
Sencha touchのはじめかたYuki Naotori
 
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れこれからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れMitsuru Katoh
 
第4回.NET中心会議 基調講演「スマートフォン時代の到来と.NET開発」(高橋さま)
第4回.NET中心会議 基調講演「スマートフォン時代の到来と.NET開発」(高橋さま)第4回.NET中心会議 基調講演「スマートフォン時代の到来と.NET開発」(高橋さま)
第4回.NET中心会議 基調講演「スマートフォン時代の到来と.NET開発」(高橋さま)Masahiko Isshiki
 
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...Developer Camp 2012 Japan Fall
 
Dev camp2012jpn day2special
Dev camp2012jpn day2specialDev camp2012jpn day2special
Dev camp2012jpn day2specialKatsuhito Katoh
 
Osc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupwareOsc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupwareYoshi Sakai
 
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリAkira Hatsune
 
スマ研第2回レポート
スマ研第2回レポートスマ研第2回レポート
スマ研第2回レポートShinpei Niiyama
 
ゲリラ的サービスの育て方
ゲリラ的サービスの育て方ゲリラ的サービスの育て方
ゲリラ的サービスの育て方Hidetoshi Mori
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Yoshito Tabuchi
 

Similar to Wankuma0402 (20)

FxugWP7
FxugWP7FxugWP7
FxugWP7
 
Devsumi 17 d-2
Devsumi 17 d-2Devsumi 17 d-2
Devsumi 17 d-2
 
devsumi17 d-2
devsumi17 d-2devsumi17 d-2
devsumi17 d-2
 
20110212 Silverlight から Bing Maps に触れる
20110212 Silverlight から Bing Maps に触れる20110212 Silverlight から Bing Maps に触れる
20110212 Silverlight から Bing Maps に触れる
 
ゲーム開発環境、もっと楽にできるよ♬ マインクラフトでも実践している DevOpsでゲーム開発を効率化しよう!
ゲーム開発環境、もっと楽にできるよ♬  マインクラフトでも実践している DevOpsでゲーム開発を効率化しよう!ゲーム開発環境、もっと楽にできるよ♬  マインクラフトでも実践している DevOpsでゲーム開発を効率化しよう!
ゲーム開発環境、もっと楽にできるよ♬ マインクラフトでも実践している DevOpsでゲーム開発を効率化しよう!
 
Windows phone & windows 8で見えてくるメトロの世界
Windows phone & windows 8で見えてくるメトロの世界Windows phone & windows 8で見えてくるメトロの世界
Windows phone & windows 8で見えてくるメトロの世界
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update 新機能とアプリケーション開発
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update新機能とアプリケーション開発20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update新機能とアプリケーション開発
20171108 Tech Summit 2017 最新! Windows 10 Fall Creators Update 新機能とアプリケーション開発
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
 
Sencha touchのはじめかた
Sencha touchのはじめかたSencha touchのはじめかた
Sencha touchのはじめかた
 
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れこれからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
 
第4回.NET中心会議 基調講演「スマートフォン時代の到来と.NET開発」(高橋さま)
第4回.NET中心会議 基調講演「スマートフォン時代の到来と.NET開発」(高橋さま)第4回.NET中心会議 基調講演「スマートフォン時代の到来と.NET開発」(高橋さま)
第4回.NET中心会議 基調講演「スマートフォン時代の到来と.NET開発」(高橋さま)
 
Sl17
Sl17Sl17
Sl17
 
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
Developr Camp 2012 Japan Fall Day2 Special Session - Visual Studio 2012 で始める ...
 
Dev camp2012jpn day2special
Dev camp2012jpn day2specialDev camp2012jpn day2special
Dev camp2012jpn day2special
 
Osc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupwareOsc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupware
 
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
 
スマ研第2回レポート
スマ研第2回レポートスマ研第2回レポート
スマ研第2回レポート
 
ゲリラ的サービスの育て方
ゲリラ的サービスの育て方ゲリラ的サービスの育て方
ゲリラ的サービスの育て方
 
Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版Xamarin 概要 2014年08月版
Xamarin 概要 2014年08月版
 

More from c-mitsuba

Beginning of HoloMagicians
Beginning of HoloMagiciansBeginning of HoloMagicians
Beginning of HoloMagiciansc-mitsuba
 
Build 2021 Topics & Unofficial Talks for Windows Development
Build 2021 Topics & Unofficial Talks for Windows DevelopmentBuild 2021 Topics & Unofficial Talks for Windows Development
Build 2021 Topics & Unofficial Talks for Windows Developmentc-mitsuba
 
Avalonia for MacApps
Avalonia for MacAppsAvalonia for MacApps
Avalonia for MacAppsc-mitsuba
 
nameless ある沼にDeepDiveした人のポートフォリオ
nameless ある沼にDeepDiveした人のポートフォリオnameless ある沼にDeepDiveした人のポートフォリオ
nameless ある沼にDeepDiveした人のポートフォリオc-mitsuba
 
Emotional space
Emotional spaceEmotional space
Emotional spacec-mitsuba
 
Designer’s Design Talk Azure / Windows Development 2人のMVPの場合 -
Designer’s  Design Talk Azure / Windows Development  2人のMVPの場合 -Designer’s  Design Talk Azure / Windows Development  2人のMVPの場合 -
Designer’s Design Talk Azure / Windows Development 2人のMVPの場合 -c-mitsuba
 
うるしまカップ パネルディスカッション
うるしまカップ パネルディスカッションうるしまカップ パネルディスカッション
うるしまカップ パネルディスカッションc-mitsuba
 
Designer’s Design Talk - Azure / Windows Development 2人のMVPの場合 -
Designer’s Design Talk - Azure / Windows Development 2人のMVPの場合 - Designer’s Design Talk - Azure / Windows Development 2人のMVPの場合 -
Designer’s Design Talk - Azure / Windows Development 2人のMVPの場合 - c-mitsuba
 
30min serverless-x tuber
30min serverless-x tuber30min serverless-x tuber
30min serverless-x tuberc-mitsuba
 
HoloLensで航空管制
HoloLensで航空管制HoloLensで航空管制
HoloLensで航空管制c-mitsuba
 
Introducing micro:bit and demo
Introducing micro:bit and demoIntroducing micro:bit and demo
Introducing micro:bit and democ-mitsuba
 
micro:bitさわってみた。
micro:bitさわってみた。micro:bitさわってみた。
micro:bitさわってみた。c-mitsuba
 
HoloLens Demo
HoloLens DemoHoloLens Demo
HoloLens Democ-mitsuba
 
楽しく生きるために 何を選択して、どうしてきたか。
楽しく生きるために 何を選択して、どうしてきたか。楽しく生きるために 何を選択して、どうしてきたか。
楽しく生きるために 何を選択して、どうしてきたか。c-mitsuba
 
Dotnetlab: Introducing Fluent Design System and Mixed Reality
Dotnetlab: Introducing Fluent Design System and Mixed RealityDotnetlab: Introducing Fluent Design System and Mixed Reality
Dotnetlab: Introducing Fluent Design System and Mixed Realityc-mitsuba
 
to tanzanite
to tanzanite to tanzanite
to tanzanite c-mitsuba
 
Introduction Xamarin forms mac
Introduction Xamarin forms macIntroduction Xamarin forms mac
Introduction Xamarin forms macc-mitsuba
 
Tried to touch Xamarin Forms for MacOS
Tried to touch Xamarin Forms for MacOSTried to touch Xamarin Forms for MacOS
Tried to touch Xamarin Forms for MacOSc-mitsuba
 

More from c-mitsuba (20)

Beginning of HoloMagicians
Beginning of HoloMagiciansBeginning of HoloMagicians
Beginning of HoloMagicians
 
Build 2021 Topics & Unofficial Talks for Windows Development
Build 2021 Topics & Unofficial Talks for Windows DevelopmentBuild 2021 Topics & Unofficial Talks for Windows Development
Build 2021 Topics & Unofficial Talks for Windows Development
 
Avalonia for MacApps
Avalonia for MacAppsAvalonia for MacApps
Avalonia for MacApps
 
Me
MeMe
Me
 
nameless ある沼にDeepDiveした人のポートフォリオ
nameless ある沼にDeepDiveした人のポートフォリオnameless ある沼にDeepDiveした人のポートフォリオ
nameless ある沼にDeepDiveした人のポートフォリオ
 
Emotional space
Emotional spaceEmotional space
Emotional space
 
Designer’s Design Talk Azure / Windows Development 2人のMVPの場合 -
Designer’s  Design Talk Azure / Windows Development  2人のMVPの場合 -Designer’s  Design Talk Azure / Windows Development  2人のMVPの場合 -
Designer’s Design Talk Azure / Windows Development 2人のMVPの場合 -
 
うるしまカップ パネルディスカッション
うるしまカップ パネルディスカッションうるしまカップ パネルディスカッション
うるしまカップ パネルディスカッション
 
Designer’s Design Talk - Azure / Windows Development 2人のMVPの場合 -
Designer’s Design Talk - Azure / Windows Development 2人のMVPの場合 - Designer’s Design Talk - Azure / Windows Development 2人のMVPの場合 -
Designer’s Design Talk - Azure / Windows Development 2人のMVPの場合 -
 
30min serverless-x tuber
30min serverless-x tuber30min serverless-x tuber
30min serverless-x tuber
 
HoloLensで航空管制
HoloLensで航空管制HoloLensで航空管制
HoloLensで航空管制
 
Introducing micro:bit and demo
Introducing micro:bit and demoIntroducing micro:bit and demo
Introducing micro:bit and demo
 
micro:bitさわってみた。
micro:bitさわってみた。micro:bitさわってみた。
micro:bitさわってみた。
 
HoloLens Demo
HoloLens DemoHoloLens Demo
HoloLens Demo
 
楽しく生きるために 何を選択して、どうしてきたか。
楽しく生きるために 何を選択して、どうしてきたか。楽しく生きるために 何を選択して、どうしてきたか。
楽しく生きるために 何を選択して、どうしてきたか。
 
Dotnetlab: Introducing Fluent Design System and Mixed Reality
Dotnetlab: Introducing Fluent Design System and Mixed RealityDotnetlab: Introducing Fluent Design System and Mixed Reality
Dotnetlab: Introducing Fluent Design System and Mixed Reality
 
WinMR入門
WinMR入門WinMR入門
WinMR入門
 
to tanzanite
to tanzanite to tanzanite
to tanzanite
 
Introduction Xamarin forms mac
Introduction Xamarin forms macIntroduction Xamarin forms mac
Introduction Xamarin forms mac
 
Tried to touch Xamarin Forms for MacOS
Tried to touch Xamarin Forms for MacOSTried to touch Xamarin Forms for MacOS
Tried to touch Xamarin Forms for MacOS
 

Wankuma0402