CodeIQ MAGAZINECodeIQ MAGAZINE

デバイスAPIはどこまで使える?最新事情を紹介──HTML5デバイスAPI勉強会 #html5jplat

2014.12.16 Category:勉強会・イベント Tag: , , ,

  • 58
  • このエントリーをはてなブックマークに追加
top-2

日本マイクロソフト・品川オフィスのセミナールームで10月30日に開催された「HTML5 デバイス API 勉強会 - html5j Webプラットフォーム部 第四回ナイトセミナー」。

今回のテーマは「デバイスAPI」。HTML5やCordova、Firefox OS、Chrome Appsなどフレームワークやプラットフォーム固有のデバイスAPIはどこまで使えるか。最新事情をエキスパートが紹介した。
by 馬場美由紀 (CodeIQ中の人)

モバイルで使うにはまだ先? Chrome AppsのデバイスAPI

最初に登壇したのは、html5j代表でhtml5j ビギナー部の副部長を務めている吉川徹氏。吉川氏はGoogle Developer Experts(Chrome)でもある。

Chrome Appsは基本的にデスクトップをターゲットとしている。したがってスマホアプリを開発している人にとっては、「モバイル固有のAPIはまだ揃っていないため、物足りなく感じると思う」と語る。Chrome Apps for mobileはまだDeveloper Preview版で、モバイル固有の機能が増えていくのはこれからなのだそう。

「この後に行われる羽田野さんのセッションで紹介されると思うが、端末を振動させたいという場合は、標準のAPIである『Vibration API』を利用してください」
こう前置きし、吉川氏のセッションは始まった。

Chrome AppsのデバイスAPIは次をチェックしてほしい、とまずは以下のAPI一覧とサンプル一覧のURLを紹介。「実際に実装する場合は、下記のサンプルが役立つと思う」と、吉川氏は実際に、Sample Appsの使い方を披露した。

上記サンプルURLでキーワード検索し、「source」をクリックするとGitHubに飛ぶ。GitHubではそのアプリがどんな使い方をするのか、またそのアプリにはどんなAPIが使われているかがわかるようになっているという。

各種デバイスとの通信系のAPIが豊富だが、「API自体は低レイヤーのモノが多いため、扱うデバイスに関する知識が必要で使いづらいものとなっている」と吉川氏。

通信系APIは以下の表の通り。「mobile」という欄を見ればわかるが、ほとんどが×となっており、使えないことがわかる。使えそうなモノを取り上げて紹介。

  • chrome.serial:シリアル接続。ゲームパッドなどを接続して、Chromeから使うようにするときに使う。
  • Chrome.sockets:ソケット通信。生のソケットを扱うことができる。いろんなことができる。

システム系APIについても以下の表の通り。重要になるのは「Chrome.Power」とのことである。

  • Chrome.Power:電源管理。長時間アプリケーションを放っておいてもスリープなしに操作できるようになる。

その他のAPIも紹介。「chrome.fileSystem」というAPIは大事だと吉川氏は言う。このAPIはその名の通り、ユーザーが許可したフォルダーには自由にアクセスできるようになるというAPIだ。ただ「モバイルは△マークとなっているが、使うのは結構危険」なのだそうだ。

また吉川氏はUSB接続をする際の設定手順についても解説。そして最後におまけと称して、「Chrome App NFC Library」を紹介。

「このようなライブラリを使うと、もっとハイレイヤーな作業できるのでぜひ、試して欲しい。またCordovaの知識があるのであれば、Chrome Appsで作っておいてプラグインを自分で開発した方がいいかも」と語り、セッションを終了した。

当日資料はこちら!

Chrome Apps のデバイスAPI from yoshikawa_t

こんなに使える?! Web標準デバイス系API

2番目に登壇したのは、ニューフォリア 最高技術責任者の羽田野太巳氏。セッションタイトルは「ウェブ標準デバイス系 API 総集編 2014」。

「今、W3Cで一番大きな総会が開かれている。今日は残念ながら、そのアップデートは反映していない。しかし現在、こんなことまで提案されているという話もする」と語り、羽田野氏のセッションは始まった。

デバイスAPIと一口に言っても、デバイスAPIには外部デバイスと連携するAPIと内部デバイスにアクセスするAPIがある。まずは外部デバイスとの連携について。

Gamepad API

実は今回のセッションでのプレゼンテーションの操作は、ゲームコントローラーで行っていると言う羽田野氏。これを実現しているのが「Gamepad API」である。「すでにChromeとFirefoxに実装されている」と羽田野氏。

そしてどのようにコーディングしているか、そのソースコードも紹介した。
「ゲームコントローラーは世の中で一番よくできたユーザーインタフェースだと思う。ゲームだけに使うのはもったいないので、みなさんも使ってみて欲しい」

ゲームコントローラーではこんなこともできる、と右側のジョイスティックを使って、立体的に画面を動かすということも披露した。

Web MDI API

これは電子楽器の演奏データを交換するために定められた規格である。今の電子ピアノはMIDI対応しており、実際にUSBで接続して試したところ、よく動くと羽田野氏。曲を手で入力してピアノで演奏させたり、人が弾いた鍵盤の状態をメッセージとして受け取ることができるという。

例えば電子ピアノのMIDIメッセージは次のようになる。このように3バイトのデータを取得する。電子ピアノの場合、2つ目がノート番号は鍵盤の位置、3番目がベロシティでは鍵盤をたたく強さを表す。そしてこのデータを電子ピアノに送信すると、この通りの音を鳴らすことができるというわけだ。

Network Service Discovery

これはUPnP/Zerocofによる機器発見、AV機器制御およびメディア再生をするAPIでDLNAの基になるユニバーサルプラグアンドプレイを実装している。以前のOPERAで対応していたが、OPERAが新しい仕様になってからは対応していないという。

羽田野氏は自宅の液晶テレビ「REGZA」に録画した映像を「REGZA」で映すという、Webブラウザをリモコン代わりに使った例を紹介した。

Web NFC API

ブラウザには実装されておらず、「実装にはまだ時間がかかる」という。NFCタグからデータをもらったり、タグに書き込んだり、端末間でデータ共有したり、Bluetoothのベアリングなどにも使われたりするAPIである。

その他、提案中の非公式ドラフトで、面白そうなAPIとして紹介したのが、「Presentation API」。プロジェクターにAPIに対応している、もしくは対応してなくても裏で使う画面転送技術をサポートしていれば、スマホから目的の画面をプロジェクターに転送することができるというAPIである。どのコンテンツを表に出すかまでコントロールできるという。

次に紹介したのは内部センサーへアクセスするためのAPI。

Geolocation API

緯度や経度CPS高度、方向、速度を知るためのAPIで、GPSにアクセスするAPIではない。GPSを搭載していないデバイスやGPSを機能しない場所がある。その場合でも位置情報を必ず返しなさいというコンセプトで作られているため、GPSから取った情報か別のものからとった情報なのかデベロッパーは分からない。「そこがデバイス系のGPSとは異なっている点だ」と羽田野氏。

DeviceOientation Event

加速度センサーと磁気センサー(コンパス)が組み合わさったAPI。自分でプログラミングすることなく、方位、傾き、回転速度、加速度の値が返される。

The Screen Orientation API

オリエンテーションの状態をリアルタイムに把握するためのAPI。つまり、スマホが横向きなのか縦向きなのかという情報をリアルタイムで把握できる。

Ambient Light Events

環境光センサー。光の強さをルクスの情報でリアルタイムに取得する。FirefoxOSはすでに実装されている。

Proximity Events

近接センサーにアクセスするためのAPI。赤外線の近接センサーはすでにスマホに搭載されている。ディスプレイが着いた状態で電話をするとディスプレイが消えているのは近接センサーが搭載されているから。ただ、これはディスプレイを消すだけのセンサーなので、距離を測ることはできない。

VibrationAPI

バイブレーションを発生させるAPI。バイブレーションの秒数を与えると、その通りバイブさせることができる。羽田野氏は実際に、画面をバイブしてここで見せるというギミックを披露。FirefoxOSで実装されている。

Battery Status API

FirefoxやChromeが実装している。電池の残量と充電ステータスをリアルタイムで取得する。

その他提案中の非公式ドラフトとして、「Ambient Humidity Events(周辺湿度の計測をするAPI)とWakeLock API(ディスプレイのスリープロックのためのAPI)を紹介した。

標準化される機能とはベンダーが競争領域と考えていないコモディティ化された機能である。したがってカッティングエッジは、ネイティブアプリの方が面白いということになる。「そういってしまうと元も子もない。そこでハイブリッドアプリ開発をお勧めしたい」と羽田野氏は力強く語る。

Windows8、CORDOVAやPhoneGap、Monaca、applicanなどのハイブリッドアプリソリューションであれば、標準化で足りないAPIを提供しているから。そして最後に「コモディティ化したときには、ぜひ、標準化しようよと声を上げてほしい」と呼びかけ、セッションを終えた。

当日資料はこちら!

ウェブ標準デバイス系 API 総集編 2014 from Futomi Hatano

CORDOVAでHTML5に足りないデバイスAPIを拡張

3番目に登壇したのはアシアルCEOの田中正裕氏である。セッションタイトルは「CORDOVAで拡張するデバイスAPI」。

田中氏は「CEOという肩書きだが、最近はエグゼクティブではなく、エンジニアリングオフィサーと言っている」そうだ。また最近、CRODOVAユーザー会を立ち上げたことも報告した。

「APACHE CORDOVA」はHTML5ハイブリッドアプリを開発するためのフレームワークである。CORDOVAの特徴は次の4点。

  • Apache Foundationによるオープンソースプロジェクト
  • プラグインベースのデバイスAPIとアプリのパッケージ化をサポート
  • iOS、Android、Windows8、FirefoxOS、BlackBerryなど幅広いプラットフォームに対応。
  • Adobe PhoneGap、Monaca、Chrome Apps Mobile、IBM Worklightなどの名前で製品化されている。

モバイルアプリを作るとき、HTML5を使えない最大の要因は「ハードウェアAPIへのアクセス」ができないことであるという。最近ではWindows8やChrome Apps、FirefoxOSでは独自にAPIを開発して対応しているが、それを使うとプラットフォームに依存した開発となってしまう。

そこで注目したいのがCRODOCAである。CORDOVAなら全プラットフォーム共通のAPIインタフェースを提供している。つまりプラットフォームに依存しないラットフォーム開発が可能になるのだ。

しかも「CORDOVAを使い方は簡単。1行を書くだけでCORDOVAをインストールできる。実際に試して欲しい」と田中氏。

CORDOVAではいくつか標準のHTML5のスペックに合わせたプラグインが作られている。それは資料の通り。

アプリの中でブラウザを立ち上げるためのプラグインである「InAppBrowser」やスプラッシュスクリーンを制御する「Splashscreenは」などがある。

とはいえ欲しいAPIがない場合もある。それをできるようにするのがCORDOVA PLUGIN REGISTRYという仕組みである。ここにはサードパーティ製のプラグインが揃っており、すでに467個登録されているという。

「HMTL5でできないことはこれを使って拡張していくことができる」と田中氏。ここにはデバイスAPIだけではなく、プッシュ通知やTouch ID、GameCenter、iBeaconなどのプラットフォームAPIもある。ここで田中氏は実際にどのようなプラグインがあるか、CORDOVA PLUGIN REGISTRYのURLを披露した。

http://plugins.cordova.io/#/

「GPSやカメラ、加速度センサーはCORDOVA PLUGIN REGISTRYからダウンロードすれば使うことができる。使い方や組み込み方も紹介されているので簡単に組み込める」と田中氏。

またCORDOVA PLUGIN REGISTRYではダウンロード数でソートできるので、どういったプラグインが今、デベロッパーに好まれているかということも知ることができる。

「CORDOVAを使うと、デバイスAPIをどんどん拡張し、好きなネイティブコードを実行できる。これを使ってHTML5のすごさを体感して欲しい。ぜひ、Monacaで遊んでみてください」と田中氏は語り、セッションを終了した。

当日資料はこちら!

Cordovaで拡張するデバイスAPI from アシアル株式会社

FirefoxOSで使える独自のデバイスAPI

4番目に登壇したのはMozilla Japan テクニカルマーケティングの清水智公氏。「Firefox OS のデバイス API」というタイトルで、FirefoxOSおよびそこで使えるデバイスAPIを紹介するセッションが展開された。

Mozilla Japanという組織はFirefoxを開発している会社である。他のブラウザベンダーとは異なるのは、非営利な中立な団体として活動しているところだ。「Webを多様に面白くしていこう」をミッションに活動している。

「FirefoxOSの画面はすべてがWebの技術でできている」と清水氏は次のような画面のスクリーンショットを見せながら言う。カメラやネットワークの接続状況、モバイルの電池強度などすべてのアプリがHTMLとJavaScriptとCSSでできているというわけだ。

次にFirefoxOSのアーキテクチャを紹介。図を見ればわかるとおり、すべてのアプリケーションはFirefoxOSの一つのタブとして動いている。ここがWindowsストアアプリとは異なる点だ。

すべてのアプリはHTMLとJavaScript、CISで書けるといったが、それだけではなく、必ず「manifest.webapp」というアプリマニュフェストが必要になることを忘れてはならない。

FirefoxOSではアプリケーションを次の3つのタイプに分けている。

  • 通常アプリ:通常のアプリ。ホスト型、パッケージ型ともにこの権限で動作する。
  • 特権アプリ:権限が必要になるアプリ。パッケージ型アプリのみで、通常アプリより使用できるAPIが増える。コードレビューによる審査が行われ、Marketplaceによってデジタル署名が付加される。
  • 認定アプリ:パッケージ型アプリのみ。すべてのAPIが利用できる。ただし認定アプリを作れるのはキャリア、もしくはそれに準ずる主体のみ。

ここではMarcketPlaceで配付できるアプリ(通常アプリと特権アプリ)で使えるAPIについて説明する。どんなデバイスAPIがあり、それを使うにはどういった権限が必要なのか。それについてはシミュレーターを立ち上げて権限を確認して欲しいと清水氏。

デバイスAPIの中で標準化されていないが、使いそうなAPIとして取り上げたのが、Device StorageとCamera、FMRadioである。Device Storageはピクチャ、ムービー、ミュージック、書類というデータのレポジトリにアクセスするためのAPIである。どのようにマニフェスト宣言や操作のためのコードを紹介した。

CameraはWebカメラを作るためのAPI。例えばこれを使って、フィルターをかけたり、セピア色にすることができるようになる。解像度もあらかじめ指定できるようになっている。ただし、カメラの性能はデバイスによって異なるとのこと。また使いたいフィルターがあるかどうかは、CameraCapabiritiesを見て、確認すること。

  • FMRadio:周波数を設定するとラジオが流れるというAPI。

「アンテナ線をイヤホンで代用しているため、イヤホンが刺さっているかどうか脱着イベントを設定する必要がある」と清水氏。これに付随してSpeakerMnagerというAPIも紹介。このAPIを使うと、イヤホンがついていても強制的にスピーカを利用することができるようになるという。

「FirefoxOSでは基本的に標準的なデバイスコントロール用のAPIでいろいろできる。みなさんいろいろ作って、Firefox Marketplaceにどんどん登録してほしい」と語り、セッションは終了した。

当日資料はこちら!

20141030 html5j-firefox os-deviceapi from Noritada Shimizu

Windowsストアアプリが使えるデバイスセンサー

5番目に登壇したのは日本マイクロソフト デベロッパーエクスペリエンス&エバンジェリズム統括本部の物江修氏。セッションタイトルは「Windows ストア アプリから使える11のセンサーAPIとデバイス API」である。

物江氏はWindowsとWindowsストアアプリの啓蒙を行っているエバンジェリスト。「タイトルに11のセンサーAPIと書いたが、11個以上あるのでタイトルは忘れて欲しい」と前置きし、セッションは始まった。

Windows8アプリの特徴は、既存のスキルを活かした開発ができること。例えばWeb開発者であればJavaScriptとHTML5、ネイティブアプリの開発者であればCやC++、C#、.net開発者であればVBでも開発ができる。

HTML5 + JavaScriptでつくるアプリの構造は図の通り。

また開発に使用する技術についても、以下の通りである。本セッションで紹介したのはWindowsRuntime(WinRT)と呼ばれるWindows8の機能にアクセスする、Windowsストア用のネイティブAPI。

WindowsRTではさまざまなハードウェアリソースAPIを提供している。そのラインナップは以下の通り。左端のWindowsというネームスペースの下にDeviceというネームスペースがあり、さらにその下のSensorネームスペースを見ると、さらに細かなセンサー類にも接続できるようなAPIが用意されている。

WindowsRTが提供するAPIが接続可能なデバイスの種類は「2つある」と物江氏。一つは内部搭載機器。もう一つが外部接続機器である。

「内部搭載機器については抽象化されているので、どのデバイスと指定する必要はない。例えば写真を撮るというときはデフォルトのカメラに勝手につながる。一方、外部接続する場合は、例えばUSBの機器の一覧を取り出し、目的のデバイスのIDを見つけてインスタンスを作ってメッセージを投げることが必要になる」と物江氏。

またメッセージは機械が持っている固有のメッセージになるので、周辺機器はどんなメッセージを受け取れるのかを把握しておく必要があるという。「それさえ知っていれば、どんな機器であっても規格に合っていればコントロールできる」と物江氏。

Windowsストアアプリから使えるデバイスAPIは、Windows固有のものとHTML5のものもと2種類ある。「移植性を考えるとHTML5の方がお勧めだ」そうだ。Internet Explorerがどの程度、デバイスAPIをサポートしているかは、modern.IEで調べられるので、サポートしているものに関しては、HTML5の方を積極的に使うのが得策だ。
アプリから外部デバイスにアクセスするには、単純に構文を書くだけではダメである。

まずは外部接続機器の許可設定として、マニフェストファイルを書く必要がある。例えば先ほど話したようにUSBやBluetoothなど未知なデバイスに接続することもある。その場合は、下記プログラムにデバイス情報を記述すると、そこに対してアクセス許可ができる。

デバイスのアクセス方法については、実際にアプリを作るデモを見せながら紹介。内部機器への接続方法としては、写真撮影アプリを作成するデモを実施し、コードを紹介した。続いて外部接続の方法の例もデモをし、コードを紹介した。

WindowsではUSBやBluetooth、WIFI、磁気カードを読みに行くAPIやバーコードリーダーなども使えるようになるAPIなどもある。

「ぜひ、デバイスの利点を使った開発をしてほしい。当社にはエンベデッド・ジョージと呼ばれている人がおり、デバイスとITの架け橋と呼ばれるWebサイトがある。それをぜひ、読んで開発の参考にしてください」

当日資料はこちら!

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

尚、当日の様子は動画でも公開しているので、ライブ感を見たい方はぜひ!

自分の書いたコードを誰かに評価されたいエンジニアは、けっこう多い?

ITエンジニアのための実務スキル評価サービス『CodeIQ』で出題されている「コード銀行」問題に挑戦すると、あなたのコードが評価されます。

評価(1)出題者からの評価  ⇒評価フィードバック例を見る

  • 企業ではたらくという観点からあなたのコードをチェックします
  • フィードバックされた観点をふまえてコードを書くと世の中の企業にとって「いいコード」が書けるようになります

評価(2)企業からの評価  ⇒評価フィードバック例を見る

  • 「あなたと一緒にはたらきたい」という企業からスカウトが届きます
  • あなたのコードが社会でどこまで通用するか、リアルな評価が得られます

興味を持った方はこちらからチャレンジを!

  • 58
  • このエントリーをはてなブックマークに追加

■関連記事

Webで簡単・効率的にアニメーションを実現できる最新フレームワーク・CSS3アニメーションを紹介... MozillaでWebアニメーションの機能の開発者が登壇 Webでアニメーションというと、数年前まではFlashコンテンツが当たり前に使われていた。 しかしスマートフォンの普及と共に、Webから駆逐され、今はHTML5でアニメーションを表すには、setInterval関数やrequestAnim...
これからのWebエンジニアの必須スキル!?「Payment」の実情と実装できる技術を一挙紹介... Web Payment Browser API(Payment Request API)を実装する 最初に登壇したのは、Google Developer Advocateの北村英志さん。 セッションタイトルは「はじめてのWeb Payments」。 ▲Google Developer Advoc...
WebVRと支える技術・コンテンツ作成入門ほか全セッションレポート──シン・WebVRとか文化祭... 基調講演を務めたのはMozillaの清水氏 基調講演に登壇したのは、Mozilla Japanの清水智公氏。講演タイトルは「WebVRとそれを支える技術」。 非営利団体Mozillaは、ブラウザベンダーの中でWebだけで勝負している唯一のベンダーである。Mozillaでも昨年より、ブラウザでVR...
Adobe XD、Sketch、Prott、Origami Studio、ストーリーボード──自分に... 話題のプロトタイピングツールを紹介! 12月21日、日本マイクロソフト品川オフィスのセミナールームで、html5j Webプラットフォーム部「第15回勉強会」が開催された。今回のテーマは「プロトタイピングツール」。 Webアプリの開発において、プロジェクトメンバー、クライアントとの間で考えや意図...
WebVR・MRなど、最新のVRテクノロジーを体験できる「WebVRとか文化祭」はいいぞ!... WebVRを支える技術を紹介 html5jプラットフォーム部勉強会「WebにVRを求めるのは間違っているだろうか?」が大盛況に終わったことで、今回そのスピンアウト企画「Web VRとか文化祭」が11月23日に開催された。 最初に登壇したのはMozilla Japanの清水智公さん。清水さんはMo...
Google AppsとOffice365を使いこなすためのGoogle Apps Script・O... Google AppsとOffice365のそれぞれの強みを知ろう 今回の勉強会タイトルは、「Office真夏の最強ツール決定戦 O1 CLIMAX 14」。Office系アプリケーションの2強、Google AppsとOffice365のそれぞれの強みを知ろうというもの。 これはプロレスフ...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ