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

楽しいアプリ制作の会

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

 本名: 大場知悟（Tomonori Ohba）
 Twitter ID: tworks
 (株)PFUでアプリ開発やってます
 WPF、Silverilght、iOS、Androidなどなど
 コミュニティー
 楽しいアプリ制作の会（代表）
 Silverlight Square（大阪地区スタッフ）
 Windows Phone Arch（大阪スタッフ）

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

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


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

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


auから絶賛発売中！


 800x480 QVGA / 480x320 HVGA

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

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

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

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

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

 DX9 対応の GPU

 CPUは ARMv7 Cortex/Scorpion 以上

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


P/F 解像度
WP7 ２種類
800x480 QVGA
480x320 HVGA （今のところ対応機種なし）
iOS ２種類
1024x768 VGA
480x320 HVGA （960x720 retina）
Android いっぱい！
やっとれん…


Windows Vista（x86 or x64）SP 2
（Starter Editionを除く）
Windows 7（x86 or x64）
（Starter Editionを除く）
4GB以上のディクススペース
3GB以上のメモリ
WDDM 1.1ドライバとDirect X 10、又はそ
れらを対応しているグラフィックカード

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


Visual Studio 2010 Express for
Windows Phone
Microsoft Expression Blend for
Windows Phone 7.1
Windows Phone Emulator（Ja）
※日本語化されました！！


Silverligt for Windows Phone Toolkit
(August 2011)
http://silverlight.codeplex.com/


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>

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


Panorama Control
PanoramaItem PanoramaItem
PanoramaItem Control Control
Control


アプリケーション仕様
なんちゃってTwitterViewer
PanoramaItemを２つ
1つ目：TwitterのPublic TimeLine
2つ目：Twitterの自分のツイート


完成図注）画面はイメージです


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


DEMO


Twitterからデータを取得
WebClient twitter = new WebClient();
twitter.DownloadStringCompleted += (sender, e) => {

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

};
twitter.DownloadStringAsync(new Uri(url));


データから必要なものを抽出
<?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>

データから必要なものを抽出
status/text
status/user/screen_name
status/user/profile_image_url


// 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
};


アプリ内データを画面表示
<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>


通信処理
非同期。要求と応答は別々のタイミン
グで処理される。
Linq
XML解析とインスタンス生成に便利。
バインディング
データとプロパティーのひも付け。


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


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

Linqやデータバインディングは必須
アプリケーションライフサイクル
一時停止、再開時の考慮
WP7のUIを活かしたVIEW作り！！

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

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

More Related Content

Similar to 楽しいアプリ制作の会 #12 Windows Phone 開発 (20)

More from Tomonori Ohba (6)

Recently uploaded (10)

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