楽しいアプリ制作の会 #12 windows phone 開発

楽しいアプリ制作の会

Windows Phone 7Panoramaアプリ開発

楽しいアプリ制作の会代表 TWorks

2

自己紹介本名 : 大場知悟（ Tomonori Ohba）

Twitter ID: tworks

(株 )PFUでアプリ開発やってますWPF、 Silverilght、 iOS、 Androidなどなど

コミュニティー楽しいアプリ制作の会（代表）Silverlight Square（大阪地区スタッフ）Windows Phone Arch（大阪スタッフ）

楽しいアプリ制作の会 #12

3

今日のアジェンダ1.Windows Phone 7 って？2. 開発環境やその作り方3. パノラマビューって？4. パノラマアプリを作るよ


4

Windows Phone 7って？Windows Phone は、マイクロソフトが開発したスマートフォン向けの OS ( 基本ソフト ) およびハードウェアプラットフォームです。 Windows Mobile プラットフォームを踏襲することなく、ゼロベースで開発。豊富な新機能を搭載し、斬新で、使いやすい、スマートフォンに生まれ変わりました。（ http://www.microsoft.com/ja-jp/windowsphone/products/overview/default.aspx ）


iOS や Android と違うスマートフォン第３勢力Windows Mobile とは違うよ！Office 付いてるけど PC じゃないよ！電話だよ！

5

IS12T（ au）

au から絶賛発売中！


6

ハードスペック 800x480 QVGA / 480x320 HVGA

静電式パネル 4 ポイント以上のタッチポイント

A-GPS, コンパス、加速度センサー、照度センサー、近接センサー

500 万画素以上のカメラ＋フラッシュ＋カメラボタン

標準のコーデック ( メディア）

256MB RAM ＋ 8GB 以上フラッシュ ROM

DX9 対応の GPU

CPU は ARMv7 Cortex/Scorpion 以上

3 つのハードウェアボタン（スタート、検索、戻る )


7

P/F毎の画面解像度


P/F 解像度

WP7 ２種類800x480 QVGA480x320 HVGA （今のところ対応機種なし）

iOS ２種類1024x768 VGA480x320 HVGA （ 960x720 retina ）

Android いっぱい！やっとれん…

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

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 をダウンロードして実行






10

開発環境（アプリ）Visual Studio 2010 Express for Windows Phone

Microsoft Expression Blend for Windows Phone 7.1

Windows Phone Emulator （ Ja ）※ 日本語化されました！！


11

開発環境（追加）Silverligt for Windows Phone Toolkit (August 2011)

http://silverlight.codeplex.com/


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>

And / Or +

C# or Visual Basic

XAML

エミュレーター

実機（ AppHubに開発者登録が必要）

13

パノラマビュー


14

パノラマビュー

横へ横へスクロールする巻物的な見せ方大きな画面上を移動させて見せるちょい見せ


15

Panoramaの構成


Panorama Control

PanoramaItem Control



16

Panoramaアプリを作るアプリケーション仕様なんちゃって TwitterViewer

PanoramaItem を２つ1 つ目： Twitter の Public TimeLine

2 つ目： Twitter の自分のツイート


17

Panoramaアプリを作る完成図　注）画面はイメージです


18

Panoramaアプリを作る処理の流れ1. Twitter からデータを取得2. データから必要なものを抽出3. 抽出結果をアプリ内データに変換4. アプリ内データを画面表示


19

Panoramaアプリを作る

DEMO


20

Panoramaアプリを作るTwitter からデータを取得


WebClient twitter = new WebClient();

twitter.DownloadStringCompleted += (sender, e) => {

// Twitterからレスポンスがあったときの処理をここに書く

};

twitter.DownloadStringAsync(new Uri(url));

21

Panoramaアプリを作るデータから必要なものを抽出


<?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>

22

Panoramaアプリを作るデータから必要なものを抽出status/text

status/user/screen_name

status/user/profile_image_url


23

Panoramaアプリを作る// 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

};


24

Panoramaアプリを作るアプリ内データを画面表示


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

25

ポイント通信処理

非同期。要求と応答は別々のタイミングで処理される。

LinqXML 解析とインスタンス生成に便利。

バインディングデータとプロパティーのひも付け。


26

開発者登録登録すると出来るようになること実機端末のアンロック（ 3 台まで）MARKET PLACE からのアプリ配信http://create.msdn.com/ja-JP


27

まとめPanorama のほかに Pivot という UI

もあります、使い分けは以下を参考に「 Panorama で Windows Phone ならではの横スクロール」（蜜葉）http://www.atmarkit.co.jp/fsmart/articles/sil_wp7_03/01.html

Linq やデータバインディングは必須アプリケーションライフサイクル一時停止、再開時の考慮

WP7 の UI を活かした VIEW 作り！！楽しいアプリ制作の会 #12

http://www.atmarkit.co.jp/fsmart/articles/sil_wp7_03/01.html

http://www.atmarkit.co.jp/fsmart/articles/sil_wp7_03/01.html

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

楽しいアプリ制作の会 #12 windows phone 開発

Technology