Your SlideShare is downloading. ×
0
蜜葉 優SilverlightはMetroStyleAppsの夢をみるか
MetroStyleAppsってSLとかWPのコードとかそのまま動いちゃうし、
XAMLとか xmlnsちょっといじったらこれもそのまま動くんでしょー
都市伝説
profile•   H.N. :蜜葉 優 [mitsuba yu]•   Expression Blendが好きな人•   さいきんMVPになったらしい•   twitter:@mitsuba_tan•   Web:http://c-mits...
Developer Previewです。明日には役に立たないかも
Developer Previewです。過度な期待はしないでください
agenda• わたしの開発環境とつくったもの• Windows Phone アプリを移植してみた• なかまとめ• デザインしよう!• まとめ
わたしの開発環境• Mac OSX Lion  – VMware fusion Win8    • VisualStudio11  – VM Win7    • Expression Blend 4  – Adobe Illustrator
移植したアプリ• HatenaFotolife• XAML +C#• 作り方はExpression Techにあります。• http://expressiontech.jp/article/blend/hatena /
移植したアプリ
WP版の作り方•   1.ソリューションつくる•   2.Expression Blendでデザインつくる•   3.SampleDataSetを使っていいかんじに•   4.はてなフォトライフからデータ取得する•   5.詳細画面作ってページ...
Expression Blendでデザインつくる• Pivotでレイアウト• New, Hot, Userの画像を表示する用のListBox  を作る
問題 そもそもBlendがない• Windows 8に入ってるBlendは HTML + JS• XAMLは全部手書き• Pivotなんてない• ListBoxはある
解決策.SL版BlendでXAML作る• XAMLを眺めてると、ほとんどSLと一緒です。• Win7に入れてるSL4 Blendでデザイン作って、  XAMLコピペでうごいた。• サイズは1366px*768px• ビヘイビアとかは無理。• 基...
解決策.SL版BlendでXAML作る
SampleDataSetを使っていいかんじに• SampleDataSetを使えば、  Bindingするデータの  レイアウトをデータを  見ながら編集できる。• でもプロジェクトにSampleData  ファイルとかApp.xaml  に...
解決策.Blendないしなくていいや!
WPでフォトライフのデータ取得• クラス作る
WPでフォトライフのデータ取得• とりあえず同期処理で書いてみる
WPでフォトライフのデータ取得• とりあえず同期処理で書いてみる
WPでフォトライフのデータ取得• MetroStyleAppsだと同期処理できた• Windows Phone 7では同期処理は御法度。• XDocument.LoadのURL指定は相対パスしか  認識してくれないのです。
WPでフォトライフのデータ取得
WPでフォトライフのデータ取得• WebClient使って、Rxで非同期処理
WPでフォトライフのデータ取得• ダウンロードしたXMLをクラスに沿っていれ  てく
WPでフォトライフのデータ取得• クエリをListBoxのItemsSourceに設定
Reactive Extentionsで非同期かっこいい!
MetoroStyleAppsでも非同期したいよぉ!
問題 ReactiveExtentions• さすがLinqのかみさま!すてき!• さっきのコードのままSystem.Reactive.dllをい  れてみる
問題 ReactiveExtentions• だいたいエラーとれるけど。。
問題 DownloadCompletedEventArgs• そんなイベントはMetroにはないよってい  われる。• ObservableとかRx部分は問題ないかんじ。
問題 WebClientもないよ• ないないだらけ。。• WebClientの代わりに、HttpClient使いましょ  う という記事があった。• http://social.msdn.microsoft.com/Forums/en-  US...
今回はRXなし!
じゃあ非同期は?
問題 WebClientもないよ• WebClientの代わりに、HttpClient使いま  しょう という記事があった。• http://social.msdn.microsoft.com/Forums/en-  US/winappswit...
解決 .NET 4.5 Async & Await• HttpClientに実装されてるGetAsync()で非同  期でXMLをダウンロードするよ!
解決 .NET 4.5 Async & Await
できた!
これじゃない感。。。
なかまとめ• SilverlightとかWindows Phoneのコードは  xmlnsさえ変えれば動きます!(嘘• System.Netとかいろいろ変わってる  あるものとかないものとかあるから  代わりになるもの探すのが大変><• あと画...
デザインしよう!    これはいやだ
テンプレートはかっこいい
テンプレートをよむ・矢印ボタン<Button x:Name="BackButton” Style="{StaticResource BackButtonStyle}"/>
テンプレートをよむ・タイトル<TextBlock x:Name="PageTitle"Text="{StaticResource AppName}"Grid.Column="1" Style="{StaticResourcePageTitleS...
テンプレート  なんてただのStyleの あつまり
App.xamlコピペしてStyleあててなんかいいかんじに
画面サイズの違い・Windows Phone版では 画面遷移して詳細画面を 表示していました。・MetroStyleAppsは画面が 広いので、詳細画面は リストの左に出すことに
画面サイズの違い・Windows Phone版では画面遷移して 詳細画面を表示していました。・MetroStyleAppsは画面が広いので、詳細画面はリストの左にだすことにしました。
選択した画像を左のImageに・SilverlightではImage.Source = Uri型なので Uri型にしたUrlを投げればOKだった。・Metroはそれじゃだめ。。。 Image.SourceはUri型じゃなくて ImageSour...
選択した画像を左のImageに
AppBarを使おう・WPと同じく、AppBarもXAMLで書きます。・だいぶ自由度が上がってます。
背景画像は1366px*768pxを用意・Aiでpngつくります
SplashScreenもつくります。・Aiで透過pngつくります
Package.appxmanifestを編集・MetroScreenに なまえだす?・短い名前なに?・白?黒?・背景色は?
背景色はSplashとTileに・透過pngが青色に塗りつぶされてる
完成!
まとめ
MetroStyleAppsって  SLとかWPのコードとか そのまま動いちゃうし、        XAMLとか xmlnちょっといじったらこれもそのまま動くんでしょー
・・・。
まとめ・基本的なXAMLは確かにそのままうごく・ビヘイビアとかは未実装(?)・でも、そのままだと“これじゃない感” めとろっぽくない。・TileとかSplashを透過にしてカラーをmanifestで宣言するとか、(触れてないけど) Capabi...
まとめ・なんかいろいろコントロールのプロパティ のクラスが変わってて、ちょっとしたとこ でいままでと違っててはまる。。。・DependencyObjectとかおおい・言い方変えれば、出来るところはちゃんと DataBinding使ってアプリ組も...
まとめ・サンプルいっぱいあるから読みましょう。・2月にMetroのマーケットをオープンすると かWindows 8 Betaとか出るなんて噂・いままじめにやるより、とりあえず2月まで 待ってもいいんじゃないかなー・クリックしたら指定したURLを...
参考URL・AsyncとかAwaitとかhttp://bluewatersoft.cocolog-nifty.com/blog/2011/12/c-advent-calend.html・Windows 8とかsampleとかhttp://msd...
Developer Previewです明日には役に立たないかもね!
ご清聴ありがとうございました
Metro#1
Metro#1
Upcoming SlideShare
Loading in...5
×

Metro#1

3,999

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,999
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Metro#1"

  1. 1. 蜜葉 優SilverlightはMetroStyleAppsの夢をみるか
  2. 2. MetroStyleAppsってSLとかWPのコードとかそのまま動いちゃうし、
  3. 3. XAMLとか xmlnsちょっといじったらこれもそのまま動くんでしょー
  4. 4. 都市伝説
  5. 5. profile• H.N. :蜜葉 優 [mitsuba yu]• Expression Blendが好きな人• さいきんMVPになったらしい• twitter:@mitsuba_tan• Web:http://c-mitsuba.com• blog:http://d.hatena.ne.jp/c-mitsuba
  6. 6. Developer Previewです。明日には役に立たないかも
  7. 7. Developer Previewです。過度な期待はしないでください
  8. 8. agenda• わたしの開発環境とつくったもの• Windows Phone アプリを移植してみた• なかまとめ• デザインしよう!• まとめ
  9. 9. わたしの開発環境• Mac OSX Lion – VMware fusion Win8 • VisualStudio11 – VM Win7 • Expression Blend 4 – Adobe Illustrator
  10. 10. 移植したアプリ• HatenaFotolife• XAML +C#• 作り方はExpression Techにあります。• http://expressiontech.jp/article/blend/hatena /
  11. 11. 移植したアプリ
  12. 12. WP版の作り方• 1.ソリューションつくる• 2.Expression Blendでデザインつくる• 3.SampleDataSetを使っていいかんじに• 4.はてなフォトライフからデータ取得する• 5.詳細画面作ってページ遷移する
  13. 13. Expression Blendでデザインつくる• Pivotでレイアウト• New, Hot, Userの画像を表示する用のListBox を作る
  14. 14. 問題 そもそもBlendがない• Windows 8に入ってるBlendは HTML + JS• XAMLは全部手書き• Pivotなんてない• ListBoxはある
  15. 15. 解決策.SL版BlendでXAML作る• XAMLを眺めてると、ほとんどSLと一緒です。• Win7に入れてるSL4 Blendでデザイン作って、 XAMLコピペでうごいた。• サイズは1366px*768px• ビヘイビアとかは無理。• 基本的なレイアウトコントロールはある。• (Win8 64bitでBlend4は起動しないので注意
  16. 16. 解決策.SL版BlendでXAML作る
  17. 17. SampleDataSetを使っていいかんじに• SampleDataSetを使えば、 Bindingするデータの レイアウトをデータを 見ながら編集できる。• でもプロジェクトにSampleData ファイルとかApp.xaml になんか追記される。
  18. 18. 解決策.Blendないしなくていいや!
  19. 19. WPでフォトライフのデータ取得• クラス作る
  20. 20. WPでフォトライフのデータ取得• とりあえず同期処理で書いてみる
  21. 21. WPでフォトライフのデータ取得• とりあえず同期処理で書いてみる
  22. 22. WPでフォトライフのデータ取得• MetroStyleAppsだと同期処理できた• Windows Phone 7では同期処理は御法度。• XDocument.LoadのURL指定は相対パスしか 認識してくれないのです。
  23. 23. WPでフォトライフのデータ取得
  24. 24. WPでフォトライフのデータ取得• WebClient使って、Rxで非同期処理
  25. 25. WPでフォトライフのデータ取得• ダウンロードしたXMLをクラスに沿っていれ てく
  26. 26. WPでフォトライフのデータ取得• クエリをListBoxのItemsSourceに設定
  27. 27. Reactive Extentionsで非同期かっこいい!
  28. 28. MetoroStyleAppsでも非同期したいよぉ!
  29. 29. 問題 ReactiveExtentions• さすがLinqのかみさま!すてき!• さっきのコードのままSystem.Reactive.dllをい れてみる
  30. 30. 問題 ReactiveExtentions• だいたいエラーとれるけど。。
  31. 31. 問題 DownloadCompletedEventArgs• そんなイベントはMetroにはないよってい われる。• ObservableとかRx部分は問題ないかんじ。
  32. 32. 問題 WebClientもないよ• ないないだらけ。。• WebClientの代わりに、HttpClient使いましょ う という記事があった。• http://social.msdn.microsoft.com/Forums/en- US/winappswithcsharp/thread/0289a73e-7b5d- 4127-949f-d48ab79543aa
  33. 33. 今回はRXなし!
  34. 34. じゃあ非同期は?
  35. 35. 問題 WebClientもないよ• WebClientの代わりに、HttpClient使いま しょう という記事があった。• http://social.msdn.microsoft.com/Forums/en- US/winappswithcsharp/thread/0289a73e- 7b5d-4127-949f-d48ab79543aa
  36. 36. 解決 .NET 4.5 Async & Await• HttpClientに実装されてるGetAsync()で非同 期でXMLをダウンロードするよ!
  37. 37. 解決 .NET 4.5 Async & Await
  38. 38. できた!
  39. 39. これじゃない感。。。
  40. 40. なかまとめ• SilverlightとかWindows Phoneのコードは xmlnsさえ変えれば動きます!(嘘• System.Netとかいろいろ変わってる あるものとかないものとかあるから 代わりになるもの探すのが大変><• あと画面遷移とかだいぶかわってる。• (扱ってないけど) NavigationServiceとかないので、 Visibilityでページ切り替えたようにみせるか Pageコントロール差し替えてね
  41. 41. デザインしよう! これはいやだ
  42. 42. テンプレートはかっこいい
  43. 43. テンプレートをよむ・矢印ボタン<Button x:Name="BackButton” Style="{StaticResource BackButtonStyle}"/>
  44. 44. テンプレートをよむ・タイトル<TextBlock x:Name="PageTitle"Text="{StaticResource AppName}"Grid.Column="1" Style="{StaticResourcePageTitleStyle}" />
  45. 45. テンプレート なんてただのStyleの あつまり
  46. 46. App.xamlコピペしてStyleあててなんかいいかんじに
  47. 47. 画面サイズの違い・Windows Phone版では 画面遷移して詳細画面を 表示していました。・MetroStyleAppsは画面が 広いので、詳細画面は リストの左に出すことに
  48. 48. 画面サイズの違い・Windows Phone版では画面遷移して 詳細画面を表示していました。・MetroStyleAppsは画面が広いので、詳細画面はリストの左にだすことにしました。
  49. 49. 選択した画像を左のImageに・SilverlightではImage.Source = Uri型なので Uri型にしたUrlを投げればOKだった。・Metroはそれじゃだめ。。。 Image.SourceはUri型じゃなくて ImageSource型でDependencyObject リストに画像が表示されてるのは DataBindingでやってるから良い感じに してくれる。
  50. 50. 選択した画像を左のImageに
  51. 51. AppBarを使おう・WPと同じく、AppBarもXAMLで書きます。・だいぶ自由度が上がってます。
  52. 52. 背景画像は1366px*768pxを用意・Aiでpngつくります
  53. 53. SplashScreenもつくります。・Aiで透過pngつくります
  54. 54. Package.appxmanifestを編集・MetroScreenに なまえだす?・短い名前なに?・白?黒?・背景色は?
  55. 55. 背景色はSplashとTileに・透過pngが青色に塗りつぶされてる
  56. 56. 完成!
  57. 57. まとめ
  58. 58. MetroStyleAppsって SLとかWPのコードとか そのまま動いちゃうし、 XAMLとか xmlnちょっといじったらこれもそのまま動くんでしょー
  59. 59. ・・・。
  60. 60. まとめ・基本的なXAMLは確かにそのままうごく・ビヘイビアとかは未実装(?)・でも、そのままだと“これじゃない感” めとろっぽくない。・TileとかSplashを透過にしてカラーをmanifestで宣言するとか、(触れてないけど) Capabilityとか、なんとなくWPを踏襲してる感じはする
  61. 61. まとめ・なんかいろいろコントロールのプロパティ のクラスが変わってて、ちょっとしたとこ でいままでと違っててはまる。。。・DependencyObjectとかおおい・言い方変えれば、出来るところはちゃんと DataBinding使ってアプリ組もうねって感じ・.NET 4.5で非同期が標準搭載
  62. 62. まとめ・サンプルいっぱいあるから読みましょう。・2月にMetroのマーケットをオープンすると かWindows 8 Betaとか出るなんて噂・いままじめにやるより、とりあえず2月まで 待ってもいいんじゃないかなー・クリックしたら指定したURLをIEで開きたいん だけどC#でどうしたらいいか教えて下さい・ぶれんどまだー?
  63. 63. 参考URL・AsyncとかAwaitとかhttp://bluewatersoft.cocolog-nifty.com/blog/2011/12/c-advent-calend.html・Windows 8とかsampleとかhttp://msdn.microsoft.com/en-us/windows/apps/br229512・Reactive Extentions Metrohttp://nuget.org/packages/Rx_Experimental-Main・はてなフォトライフWPの作り方http://expressiontech.jp/article/blend/hatena/
  64. 64. Developer Previewです明日には役に立たないかもね!
  65. 65. ご清聴ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×