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と違うスマートフォン第３勢力
 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 ２種類
800x480 QVGA
480x320 HVGA （今のところ対応機種なし）
iOS ２種類
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を２つ
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