PDF 形式

Microsoft Surface
Technical Preview for Developer
マイクロソフト株式会社
パートナービジネス営業統括本部
パートナーテクノロジー本部
プリンシパル テクノロジーアドバイザー
ジニアス平井（平井昌人）
[email protected]
Caution
現在のところ Microsoft Surface は日本
国内で取り扱いしておりません。実機は
国内に何台かありますが、いずれも研究
・評価目的です。もちろん正式なサポー
トも行っておりません。
この資料は筆者が独自で翻訳したもので
す。マイクロソフトの正式な日本語訳で
はありません。
はじめに
～ インターフェイスのパラダイムシフト ～
 時代は Natural User Experience（NUE） へ！
 タッチ＆マルチタッチ
 iPod、iPhone、デジカメ、ビデオカメラなどの操作画面
 音声入力
 リモコン
 Wil
CLI
GUI
NUI
What is Surface ?
～ 現在は縦型も開発中です ～
What is Surface ?
～ 現在は縦型も開発中です ～
Surface 内部構造
～ 当然、キーボードやマウスはありません ～
 1. Screen
 2. Infrared
 3. CPU
 4. Projector
Surface ハードウェア
～ ゲームセンターの卓上機より少し大きめで激重 ～
 30インチ XGA DLPプロジェクタ
 ATI X1650 256MB グラフィックスカード
 解像度 1024 x 768
 入力
 5台の赤外線カメラ
 PC
 CPU：Intel Core2 Duo 2.13GHz
 MEM：2GB DDR2 （4GB DDR2）
 HDD：250GB SATA（1TB 7200rpm）
 USB 2.0x6, Intel GB LAN, Wireless LAN
 ケース
 外枠は半透明のアクリルパネル
 表面がガラスでないので指紋が付かない
 108 x 69 x 54 cm、なんと 90 kg！（搬送用コンテナ +36Kg ）
 AC 100-240V 50/60Hz, 10A, 650W
Surface の特徴
～ マルチユーザーやオブジェクト認識は Surface だけ！ ～
 Direct Interaction
 タッチ＆ジェスチャーによる操作
 Multi-Touch
 同時に複数を認識
 形状認識(筆圧検知なし)
 Multi-User
 Face to face の
コミュニケーションが可能
 360° UI
 基本的には対面
 Object Recognition
 画面上のオブジェクトを認識
 IDタグの識別
Surface アプリケーション開発環境
～ さあ！始めよう ～
 開発マシンの用意（デスクトップ PC）
 GPU - 256MB 以上
 1280 x 960 以上の解像度が必要
 Surface Simulator が動かない
 DirectX 9.0c & Shader Model 2.0 サポート
 Windows Aero 有効
 CPU/MEM - Vista が快適に動くレベル
 環境
 Windows Vista SP1 32bit 版
 Home Edition および 64bit 版は未サポート
 Windows 7 32bit 版でも可能だが Surface Simulator の挙動が不審
 Visual Studio 2008 SP1
 .NET Framework 3.5 SP1
 Microsoft XNA Framework Redistributable 2.0
 Microsoft Surface SDK 1.0 SP1 Workstation Edition
 MSDN ダウンロードセンターより（無償）
Surface Simulator
～ PC 上でのエミュレータ環境 ～
 Replicates input
 multiple contacts
 drag to group them together
 Move, rotate, Stretch
 指・ブロブ・タグを疑似化
 Finger, Resizable blobs, Tags
 レコーディング機能
 Recording and playback UI
10
Surface 用のコントロール
～ Windows アプリケーションのパーツとの比較 ～
SurfaceWindow
Full screen on the Surface
Oriented towards the user
SurfaceMenu
SurfaceContextMenu
SurfaceMenuItem
Multiple menus can be used at the
same time
SurfaceButton
SurfaceRadioButton
SurfaceCheckBox
SurfaceToggleButton
Only “click” when all contacts are
removed
イベントモデル
～ ほぼ WPF アプリケーション開発と同じ ～
 マウス → タッチ
 MouseDown
→ ContactDown
 MouseUp
→ ContactUp
 MouseMove
→ ContactChanged
 ContactChanged イベント
 Position
 Orientation
 Size
 Shape
 Area
 Recognized type
 Contact.GetOrientation()
 Contact.GetPosition()
 Contact.GetEllipse()
270°
0°
180°
90°
Surface と WPF の XAML の比較
～ 互換性は高いが Surface らしさを追求しよう！ ～
 WPF
<Window>
<Canvas Mouse.MouseDown="Canvas_MouseDown">
<Button Click="Button_Click"/>
</Canvas>
</Window>
private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
}
 Surface (WPF)
<s:SurfaceWindow>
<Canvas s:Contacts.ContactDown="Canvas_ContactDown">
<s:SurfaceButton Click="SurfaceButton_Click"/>
</Canvas>
</s:SurfaceWindow>
private void Canvas_ContactDown(object sender, ContactEventArgs e)
{
}
Step by Step 1
～ まずは Hello Surface から ～
 Visual Studio 2008 を起動
 [新規プロジェクト] - [C#] - [Surface]
- [Surface Application (WPF)]を選択
 C# のみです！
 ゲーム系や Shader を
使う場合は XNA
プロジェクトを選択
 WPF 開発とほぼ同じ
Step by Step 2
～ WPF アプリケーション開発と同じ手順 ～
 画面のデザイン
 [Surface Control] から [SurfaceButton] と [SurfaceTextBox]
を配置
Step by Step 3
～ Surface Simulator はなくても動くよ！ ～
 コードの記述
 [SurfaceButton] をダブルクリックしてコードを記述
private void surfaceButton1_Click(object sender, RoutedEventArgs e) {
surfaceTextBox1.Text = "Hello Surface !";
}
 デバッグ実行
 [F5]キーでデバッグ実行
 Windows 7 の場合
 Surface Simulator を先に起動
Step by Step 4
～ ScatterView コントロールで Surface チックに！ ～
 XAML 編集
<s:SurfaceWindow.Resources>
<ImageBrush x:Key="pic1" Stretch="UniformToFill"
ImageSource="pack://application:,,,/Resources/koala.jpg"/>
</s:SurfaceWindow.Resources>
<s:ScatterView Name="scatterView1">
<s:ScatterViewItem Name="scatterViewItem1"
Background="{StaticResource pic1}" >
</s:ScatterViewItem>
</s:ScatterView>
 ScatterView コントロール





パン・ズーム・ターニングが自動
マルチタッチ
マルチアクティブ（実機）
360° UI
ListBox コントロールなどと同じ
プログラミングモデル
Step by Step 5
～ WPF のデータバインディングを活用しよう ～
 データバインド＆テンプレート
public SurfaceWindow1()
{
InitializeComponent();
ScatterView1.ItemsSource =
System.IO.Directory.GetFiles(@"C:¥Users¥Public¥Pictures¥Samp
le Pictures¥","*.jpg");
}
<s:ScatterView Name="ScatterView1">
<s:ScatterView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}“ />
</DataTemplate>
</s:ScatterView.ItemTemplate>
</s:ScatterView>
タグ
～ ScatterView コントロールで Surface チックな動きを ～
 オブジェクトを一意に認識させるためのマーク
 オブジェクトの方向も認識
 SDK の ”Identity Tag Printing Tool” で印刷
 Surface Simulator では 専用のパーツあり
 TagVisualizer コントロールを提供
 Identity Tags
 0 - 340,282,366,920,938,000,000,000,000,000,000,000,000
 シリーズ（分類）と Tag Value を持つ
 Byte Tags
 0 - 255
Surface SDK サンプル
～ ソースコードがあるので参考になります ～
 Surface SDK サンプル
 インストールフォルダ（¥Program Files¥Microsoft SDKs¥Surface¥v1.0¥Samples）
に Surface Code Samples.zip があるので解凍
事例紹介
～ ぜひ参考にしてください！ ～
 ビデオ
 http://www.microsoft.com/surface/Pages/Experience/Videos.
aspx
References
～ 日本語の資料はまったくありません ～
 Surface Home Page
 http://www.microsoft.com/surface/Default.aspx
 TechNet
 http://technet.microsoft.com/en-us/library/ee692162.aspx
 MSDN Library
 http://msdn.microsoft.com/en-us/library/ee804767.aspx
 Surface Blog
 http://blogs.msdn.com/surface/
 PDC 08 - Developing for Microsoft Surface
 http://channel9.msdn.com/pdc2008/PC17/
 PDC 09 - Multi-Touch on Microsoft Surface and
Windows 7 for .NET Developers
 http://microsoftpdc.com/Sessions/CL27
Thanks for Attending !
～ 今後ともよろしくお願いします ～
アンケートにご協力ください。
ご面倒をお掛けしますが、ご協力ほどお願いします。