楽しいアプリ制作の会 #12 Windows Phone 開発
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

楽しいアプリ制作の会 #12 Windows Phone 開発

on

  • 790 views

 

Statistics

Views

Total Views
790
Views on SlideShare
790
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

楽しいアプリ制作の会 #12 Windows Phone 開発 Presentation Transcript

  • 1. 楽しいアプリ制作の会 楽しいアプリ制作の会 代表 TWorks
  • 2.  本名: 大場知悟(Tomonori Ohba) Twitter ID: tworks (株)PFUでアプリ開発やってます  WPF、Silverilght、iOS、Androidなどなど コミュニティー  楽しいアプリ制作の会(代表)  Silverlight Square(大阪地区スタッフ)  Windows Phone Arch(大阪スタッフ)楽しいアプリ制作の会 #12 1
  • 3. 1. Windows Phone 7って?2. 開発環境やその作り方3. パノラマビューって?4. パノラマアプリを作るよ楽しいアプリ制作の会 #12 2
  • 4. Windows Phone は、マイクロソフトが開発したスマートフォン向けの OS (基本ソフト) およびハードウェア プラットフォームです。Windows Mobile プラットフォームを踏襲することなく、ゼロベースで開発。豊富な新機能を搭載し、斬新で、使いやすい、スマートフォンに生まれ変わりました。(http://www.microsoft.com/ja-jp/windowsphone/products/overview/default.aspx) iOSやAndroidと違うスマートフォン第3勢力 Windows Mobileとは違うよ! Office付いてるけどPCじゃないよ!電話だよ!楽しいアプリ制作の会 #12 3
  • 5. auから絶賛発売中!楽しいアプリ制作の会 #12 4
  • 6.  800x480 QVGA / 480x320 HVGA 静電式パネル 4ポイント以上のタッチポイント A-GPS, コンパス、加速度センサー、照度センサー、近接センサー 500万画素以上のカメラ+フラッシュ+カメラボタン 標準のコーデック(メディア) 256MB RAM+8GB以上 フラッシュ ROM DX9 対応の GPU CPUは ARMv7 Cortex/Scorpion 以上 3つの ハードウェアボタン(スタート、検索、戻る)楽しいアプリ制作の会 #12 5
  • 7. P/F 解像度WP7 2種類 800x480 QVGA 480x320 HVGA (今のところ対応機種なし)iOS 2種類 1024x768 VGA 480x320 HVGA (960x720 retina)Android いっぱい! やっとれん…楽しいアプリ制作の会 #12 6
  • 8. Windows Vista(x86 or x64)SP 2 (Starter Editionを除く)Windows 7(x86 or x64) (Starter Editionを除く)4GB以上のディクススペース3GB以上のメモリWDDM 1.1ドライバとDirect X 10、又はそ れらを対応しているグラフィックカード楽しいアプリ制作の会 #12 7
  • 9. Windows Phone SDK 7.1 RC (リリース候補) http://www.microsoft.com/downloads/ja-jp/details.aspx?familyid=14700b35-30c3-47f3-9e67- 7701a06fde00&displaylang=ja-nec vm_web2.exe をダウンロードして実行楽しいアプリ制作の会 #12 8
  • 10. Visual Studio 2010 Express for Windows PhoneMicrosoft Expression Blend for Windows Phone 7.1Windows Phone Emulator(Ja)※日本語化されました!!楽しいアプリ制作の会 #12 9
  • 11. Silverligt for Windows Phone Toolkit(August 2011)http://silverlight.codeplex.com/楽しいアプリ制作の会 #12 10
  • 12. namespace WindowsPhoneApplica { public partial class Main { // Constructor public MainPage() <StackPanel> <!--TitlePanel contains the n <StackPanel x:Name="TitlePane <TextBlock x:Name="Applic <TextBlock x:Name="PageTi </StackPanel>楽しいアプリ制作の会 #12 11
  • 13. 楽しいアプリ制作の会 #12 12
  • 14. 横へ横へスクロールする巻物的な見せ方大きな画面上を移動させて見せるちょい見せ楽しいアプリ制作の会 #12 13
  • 15. Panorama Control PanoramaItem PanoramaItem PanoramaItem Control Control Control楽しいアプリ制作の会 #12 14
  • 16. アプリケーション仕様なんちゃってTwitterViewerPanoramaItemを2つ1つ目:TwitterのPublic TimeLine2つ目:Twitterの自分のツイート楽しいアプリ制作の会 #12 15
  • 17. 完成図 注)画面はイメージです楽しいアプリ制作の会 #12 16
  • 18. 処理の流れ1. Twitterからデータを取得2. データから必要なものを抽出3. 抽出結果をアプリ内データに変換4. アプリ内データを画面表示楽しいアプリ制作の会 #12 17
  • 19. DEMO楽しいアプリ制作の会 #12 18
  • 20. Twitterからデータを取得WebClient twitter = new WebClient();twitter.DownloadStringCompleted += (sender, e) => { // Twitterからレスポンスがあったときの処理をここに書く};twitter.DownloadStringAsync(new Uri(url));楽しいアプリ制作の会 #12 19
  • 21. データから必要なものを抽出<?xml version="1.0" encoding="UTF-8"?><statuses type="array"> <status> (中略) <text>@mitsuba_tan Dしたー</text> <user> (中略) <screen_name>tworks</screen_name> <profile_image_url>http://a1.twimg.com/profile_… /tworks_normal.jpg</profile_image_url> (中略) </user> (中略) </status>楽しいアプリ制作の会 #12 20
  • 22. データから必要なものを抽出status/textstatus/user/screen_namestatus/user/profile_image_url楽しいアプリ制作の会 #12 21
  • 23. // XMLのデータを取得XElement xmlTweets = XElement.Parse(e.Result);// データから必要なものを抽出 (tweet.Element(“ノード名”).Value )// 抽出結果をアプリ内データに変換( select new TwitterItem の箇所)listbox.ItemsSource = from tweet in xmlTweets.Descendants("status") select new TwitterItem { Icon = tweet.Element("user").Element("profile_image_url").Value, Message = tweet.Element("text").Value, UserName =tweet.Element("user").Element("screen_name").Value };楽しいアプリ制作の会 #12 22
  • 24. アプリ内データを画面表示<controls:PanoramaItem Header="Public"> <ListBox Margin="0,0,-12,0" Name="PublicTweets"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Height="40" Width="40" Margin="12,0,9,0" Source="{Binding Icon}"/> <StackPanel Width="370"> <TextBlock Text="{Binding UserName}" … /> <TextBlock Text="{Binding Message}" … /> </StackPanel> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox></controls:PanoramaItem>楽しいアプリ制作の会 #12 23
  • 25. 通信処理 非同期。要求と応答は別々のタイミン グで処理される。Linq XML解析とインスタンス生成に便利。バインディング データとプロパティーのひも付け。楽しいアプリ制作の会 #12 24
  • 26. 登録すると出来るようになること実機端末のアンロック(3台まで)MARKET PLACEからのアプリ配信http://create.msdn.com/ja-JP楽しいアプリ制作の会 #12 25
  • 27. PanoramaのほかにPivotというUIもあ ります、使い分けは以下を参考に 「PanoramaでWindows Phoneならではの横スクロール」(蜜葉) http://www.atmarkit.co.jp/fsmart/articles/sil_wp7_03/01.htmlLinqやデータバインディングは必須アプリケーションライフサイクル 一時停止、再開時の考慮WP7のUIを活かしたVIEW作り!!楽しいアプリ制作の会 #12 26