第4回html5j-Webフラットフォーム部ナイトセミナー 「HTML5デバイスAPI 勉強会」の私の登壇で使用した資料です。 デモと口頭での説明がメインなので、あんまりスライドに意味はないかもです。

1. Windowsストアアプリから 使かえるセンサーAPIと デバイスAPI
日本マイクロソフト株式会社
デベロッパーエクスペリエンス&エバンジェリズム統括本部
物江修

2. Windowsストアアプリ
～Windows 8 の新しいUI環境で動作するアプリ～

3. 既存のスキルを活かした開発
～さまざまな言語で開発が可能～
JavaScript
C#, VB
C, C++
HTML5
XAML
開発言語
UI 記述
スキルセット
+
+
Web
.net
Native

4. HTML5 + JavaScript
Windowsストアアプリの構造
ホストプロセス
オペレーティングシステム
アプリ
API
JavaScript
ネイティブAPI
直接呼び出し
(Compiled)

5. 開発に使用する技術 ～Web標準とネイティブライブラリ～
WWAHost.exe
Internet Explorer のスーパーセット
HTML5CSS3(Trident)
Web標準
WinJSWindows Library for JavaScript
JavaScript
アプリの
フレームワーク
JavaScript
Windows 8 の 機能にアクセス
JavaScript

6. Windowsランタイムが提供する ハードウェアリソースAPI
•Device
•Bluetooth
•GenericAttributeProfile
•Rfcomm
•Geolocation
•Geofencing
•HumanInterfaceDevice
•PointOfService
•BarcodeScanner
•MagneticStripeReader
•Portable
•Printers
•SmartCards
•Sms
•Windows
•Media
•Networking
•Storage
•Device
•Usb
•WiFiDirect
•Sensors
•Sensors
•Accelerometer
•Compass
•Gyrometer
•Inclinometer
•LightSensor
•Magnetometer
•OrientationSensor
•SimpleOrientationSensor

7. Windowsストアアプリから接続可能な デバイスの種類 ～2種類に大別～
内部搭載機器
外部接続機器 (周辺機器)

8. Windows Store Apps
・・・
・・・

9. アプリからデバイスにアクセスするには ～appxmanifestファイルでデバイスアクセスの許可～

10. 外部接続機器の許可設定 ～appxmanifestファイルに手動で記述～ <Capabilities> <CapabilityName=“internetClient”/> <!--HID デバイスの情報を設定--> <m2:DeviceCapabilityName="humaninterfacedevice"> <m2:DeviceId="any"> <m2:FunctionType="usage:0001 0010"/> </m2:Device> </m2:DeviceCapability> </Capabilities>
Package/Capabilities下にデバイス情報を記述
参考: How to specify device capabilities in a package manifest (Windows Runtime apps)
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn263092.aspx

11. デバイスへのアクセスの方法 ～「目的」に合わせたそれぞれの専用クラスを使う～
varcapt= Windows.Media.Capture;
//カメラ(撮影)用UI のインスタンスを生成 varcaptUI= newcapt.CameraCaptureUI();
//写真撮影メソッドを実行し、撮影した画像の処理は非同期でおこなう captUI.captureFileAsync(capt.CameraCaptureUIMode.photo).done( function(file) {
//imgタグを追加しsrc属性に撮影した写真を指定 varimg= document.createElement("img"); img.src= URL.createObjectURL(file); document.getElementById("content").appendChild(img); img.style.position= "absolute"; }); });
例) 写真撮影

12. 周辺機器へのアクセス ～機器を検出列挙し、ID からインスタンスを生成～
vardeviceInfo = Windows.Devices.Enumeration.DeviceInformation;
vardeviceClass = Windows.Devices.Enumeration.DeviceClass;
//デバイスの一覧を取得
deviceInfo.findAllAsync(deviceClass.all).done(function(deviceInformations) {
//Promise にセットされたコールバックルーチンの引数に一覧がセットされる
varlength = deviceInformations.length;
vardeviceEntry = null;
for(vari = 0; i < length; i++) {
deviceEntry = deviceInformations[i]
console.log(“name:” + deviceEntry.name);
console.log(“id:”+ deviceEntry.id);
}
});

13. まとめ
Windows Store Apps
+

14. 参考
デバイスとITの架け橋
http://blogs.msdn.com/b/hirosho/