Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Windows ストアアプリから使かえるセンサーAPIとデバイスAPI

23,946 views

Published on

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

Published in: Technology
  • Dating direct: ❤❤❤ http://bit.ly/2F7hN3u ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F7hN3u ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Windows ストアアプリから使かえるセンサーAPIとデバイスAPI

  1. 1. Windowsストアアプリから 使かえるセンサーAPIと デバイスAPI 日本マイクロソフト株式会社 デベロッパーエクスペリエンス&エバンジェリズム統括本部 物江修
  2. 2. Windowsストアアプリ ~Windows 8 の新しいUI環境で動作するアプリ~
  3. 3. 既存のスキルを活かした開発 ~さまざまな言語で開発が可能~ JavaScript C#, VB C, C++ HTML5 XAML 開発言語 UI 記述 スキルセット + + Web .net Native
  4. 4. HTML5 + JavaScript Windowsストアアプリの構造 ホストプロセス オペレーティングシステム アプリ API JavaScript ネイティブAPI 直接呼び出し (Compiled)
  5. 5. 開発に使用する技術 ~Web標準とネイティブライブラリ~ WWAHost.exe Internet Explorer のスーパーセット HTML5CSS3(Trident) Web標準 WinJSWindows Library for JavaScript JavaScript アプリの フレームワーク JavaScript Windows 8 の 機能にアクセス JavaScript
  6. 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. 7. Windowsストアアプリから接続可能な デバイスの種類 ~2種類に大別~ 内部搭載機器 外部接続機器 (周辺機器)
  8. 8. Windows Store Apps ・・・ ・・・
  9. 9. アプリからデバイスにアクセスするには ~appxmanifestファイルでデバイスアクセスの許可~
  10. 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. 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. 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. 13. まとめ Windows Store Apps +
  14. 14. 参考 デバイスとITの架け橋 http://blogs.msdn.com/b/hirosho/

×