Upload
tomonori-ohba
View
543
Download
1
Embed Size (px)
Citation preview
楽しいアプリ制作の会
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. パノラマアプリを作るよ
楽しいアプリ制作の会 #12
4
Windows Phone 7って?Windows Phone は、マイクロソフトが開発したスマートフォン向けの OS ( 基本ソフト ) およびハードウェア プラットフォームです。 Windows Mobile プラットフォームを踏襲することなく、ゼロベースで開発。豊富な新機能を搭載し、斬新で、使いやすい、スマートフォンに生まれ変わりました。( http://www.microsoft.com/ja-jp/windowsphone/products/overview/default.aspx )
楽しいアプリ制作の会 #12
iOS や Android と違うスマートフォン第3勢力Windows Mobile とは違うよ!Office 付いてるけど PC じゃないよ!電話だよ!
5
IS12T( au)
au から絶賛発売中!
楽しいアプリ制作の会 #12
6
ハードスペック 800x480 QVGA / 480x320 HVGA
静電式パネル 4 ポイント以上のタッチポイント
A-GPS, コンパス、加速度センサー、照度センサー、近接センサー
500 万画素以上のカメラ+フラッシュ+カメラボタン
標準のコーデック ( メディア)
256MB RAM + 8GB 以上 フラッシュ ROM
DX9 対応の GPU
CPU は ARMv7 Cortex/Scorpion 以上
3 つの ハードウェアボタン(スタート、検索、戻る )
楽しいアプリ制作の会 #12
7
P/F毎の画面解像度
楽しいアプリ制作の会 #12
P/F 解像度
WP7 2種類800x480 QVGA480x320 HVGA (今のところ対応機種なし)
iOS 2種類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 をダウンロードして実行
楽しいアプリ制作の会 #12
10
開発環境(アプリ)Visual Studio 2010 Express for Windows Phone
Microsoft Expression Blend for Windows Phone 7.1
Windows Phone Emulator ( Ja )※ 日本語化されました!!
楽しいアプリ制作の会 #12
11
開発環境(追加)Silverligt for Windows Phone Toolkit (August 2011)
http://silverlight.codeplex.com/
楽しいアプリ制作の会 #12
12
開発の流れ
楽しいアプリ制作の会 #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
パノラマビュー
楽しいアプリ制作の会 #12
14
パノラマビュー
横へ横へスクロールする巻物的な見せ方大きな画面上を移動させて見せるちょい見せ
楽しいアプリ制作の会 #12
15
Panoramaの構成
楽しいアプリ制作の会 #12
Panorama Control
PanoramaItem Control
PanoramaItem Control
PanoramaItem Control
16
Panoramaアプリを作るアプリケーション仕様なんちゃって TwitterViewer
PanoramaItem を2つ1 つ目: Twitter の Public TimeLine
2 つ目: Twitter の自分のツイート
楽しいアプリ制作の会 #12
17
Panoramaアプリを作る完成図 注)画面はイメージです
楽しいアプリ制作の会 #12
18
Panoramaアプリを作る処理の流れ1. Twitter からデータを取得2. データから必要なものを抽出3. 抽出結果をアプリ内データに変換4. アプリ内データを画面表示
楽しいアプリ制作の会 #12
19
Panoramaアプリを作る
DEMO
楽しいアプリ制作の会 #12
20
Panoramaアプリを作るTwitter からデータを取得
楽しいアプリ制作の会 #12
WebClient twitter = new WebClient();
twitter.DownloadStringCompleted += (sender, e) => {
// Twitterからレスポンスがあったときの処理をここに書く
};
twitter.DownloadStringAsync(new Uri(url));
21
Panoramaアプリを作るデータから必要なものを抽出
楽しいアプリ制作の会 #12
<?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
楽しいアプリ制作の会 #12
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
};
楽しいアプリ制作の会 #12
24
Panoramaアプリを作るアプリ内データを画面表示
楽しいアプリ制作の会 #12
<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 解析とインスタンス生成に便利。
バインディングデータとプロパティーのひも付け。
楽しいアプリ制作の会 #12
26
開発者登録登録すると出来るようになること実機端末のアンロック( 3 台まで)MARKET PLACE からのアプリ配信http://create.msdn.com/ja-JP
楽しいアプリ制作の会 #12
27
まとめPanorama のほかに Pivot という UI
もあります、使い分けは以下を参考に「 Panorama で Windows Phone ならではの横スクロール」(蜜葉)http://www.atmarkit.co.jp/fsmart/articles/sil_wp7_03/01.html
Linq やデータバインディングは必須アプリケーションライフサイクル一時停止、再開時の考慮
WP7 の UI を活かした VIEW 作り!! 楽しいアプリ制作の会 #12
ご清聴ありがとうございました