Tech Sketch Bucket of Technical Chips by TIS Inc.

JavaScript + Chrome Packaged Apps API を使用したシリアル通信Webアプリ

Pocket

米カリフォルニア州サンフランシスコにて2013年5月15日から17日の三日間開催された「Google I/O 2013」
そこでChrome Packaged Apps APIに複数の追加機能が発表され、その中にシリアル通信機能があった事を皆さんご存知でしょうか?
当記事はそんなChrome Packaged Apps APIのシリアル通信機能を使用し、コンソール上にシリアル通信で取得したデータを表示してみようという内容になります。


はじめに

この記事ではChrome Packaged Apps の作成方法とChrome Packaged Apps APIのシリアル通信機能の使い方を説明します。
Chrome Packaged Apps 作成方法の説明ではGoogle公式リファレンスの Create Your First App を参考にさせて頂いております。

Chrome Packaged Apps APIとは?

Chrome Packaged AppsとはWebアプリを構成するHTML、JavaScript、CSSなどのファイルをパッケージとしてひとつにまとめたものを指します。
このパッケージで使用できるAPIがChrome Packaged Apps APIになります。
Chrome Packaged Appsのについて詳しく知りたい方はgihyo.jp様にとてもわかりやすい まとめ記事 が掲載されていますのでそちらをご覧下さい。

開発環境

  • Chrome 28.0.1500.29
  • jQuery 1.10.1
  • Arduino UNO

Chromeのバージョンは23以上のものを使用して下さい。
シリアル通信の対象は Arduino UNO を選択しました。
arduino_sample.jpg
(Arduino http://www.arduino.cc/es/)

Arduinoとは、マイコン、入出力ポートを備えた基板、C言語風のArduino言語とそれの統合開発環境から構成されるシステムの事です。
USBを使用し簡単にPCと接続する事ができ、シリアル通信が可能なため今回対象に選択しました。
Arduinoの詳細に関しましては後日別記事にて触れます。

パッケージの構成

まずはパッケージの構成を説明します。
パッケージの構成は下記のようになっています。

では、各ファイルがどのような役割を持っているのか説明していきましょう。

  • packageフォルダ
    全てのファイルを格納するフォルダです。
  • manifest.json
    manifest.jsonには、Webアプリのバージョンや使用する機能や権限などを記入します。
  • window.html
    Webアプリのトップページです。
    今回はシリアル通信開始ボタンと終了ボタンを設置しました。
  • background.js
    バックグラウンドで処理を行うJavaScriptファイルです。
  • serial.js
    シリアル通信及び結果表示処理が書いてあるJavaScriptです。
  • package-128.png
    Chrome新規タブ画面上に表示されるWebアプリのアイコン画像です。
    サイズが128*128であれば好きなもので大丈夫です。

以上がパッケージの構成になります。
manifest.json及びserial.jsについてはサンプルソースを提示して詳しく説明していこうと思います。

manifest.json

サンプルソース

解説

ファイル名の通り、manifest.jsonはJSON形式で必要な設定を書いていきます。
サンプルソースで行っている設定は下記のような意味になっています。

  • "name" ... Webアプリの名前
  • "description" ... Webアプリの説明文
  • "version" ... Webアプリのバージョン
  • "app" ... Webアプリの設定
    • "background" ... バックグラウンド処理の設定
      • "scripts" ... バックグラウンドで使用するJavaScriptファイルを指定
  • "icons" ... Webアプリのアイコン画像
  • "permissions" ... Webアプリの権限
    • "serial" ... シリアル通信

上記設定でもっとも大事な箇所は"permissions"内の"serial"になります。
シリアル通信を使用する事が目的なのでこれは必ず書かないといけません。
このサンプルソースでは上記設定のみですが、実際にはもっと多数の設定が存在します。
より詳しく知りたい方はGoogle公式リファレンス Formats: Manifest Files をご覧下さい。

serial.js

サンプルソース

解説

[1] portName

ArduinoUNOが接続されているポート名です。
どのポートにArduinoUNOが接続されているか事前にデバイスマネージャで調べます。

[2] bitRate

ArduinoUNOとのデータ転送速度です。
基本的にはArduinoUNO上で設定した値と同じにします。

[3] chrome.serial.open(接続名, データ転送速度, コールバック関数)

Chrome Packaged Apps APIのシリアルポート接続関数です。
接続完了時には接続IDを含むopenInfoオブジェクトがコールバック関数に渡されます。
chrome.serial.read関数やchrome.serial.close関数を呼び出す際には対象の接続を指定する必要があるため、この時点で接続IDを保存しておきます。
同じく継続的にデータを取得するためにデータ取得関数を0.5秒置きに呼び出すようこの時点で設定しています。

[4] chrome.serial.close(接続ID, コールバック関数)

Chrome Packaged Apps APIのシリアルポート切断関数です。
chrome.serial.open関数で保存した接続IDを引数として渡します。
処理終了時に切断成否が格納されているboolean型のresult変数がコールバック関数に渡されます。
resultの値を参照し、正常に終了している場合はデータ取得処理の呼び出し設定を解除します。

[5] chrome.serial.read(接続ID, データ転送速度, コールバック関数)

Chrome Packaged Apps APIのシリアル通信データ取得関数です。
chrome.serial.open関数で保存した接続IDを引数として渡します。
処理終了時には取得したbyte数を格納しているbytesReadと取得したデータを格納しているdataを含むreadInfoオブジェクトがコールバック関数に渡されます。
処理失敗時にはbytesReadの値がマイナス値になるため、コールバック関数内でbytesReadの値を参照する事によってデータ取得の成否を確認しています。
bytesReadの値が正の数の場合取得したdataの値をコンソールに表示するのですが、ここでちょっとした手間を掛ける必要があります。
dataに格納されているデータはバイナリデータのため、まず8ビット符号なし整数値の配列として一度格納します。
格納した8ビット符号なし整数値1つ1つは文字コードを表しているので、String.fromCharCode.apply関数を使用し文字に変換してから、コンソールに表示するという処理を行っています。

シリアル通信に使用するAPIはGoogle公式リファレンスの chrome.serial をご覧下さい。

Chromeへの登録方法

  1. パッケージサンプルをダウンロードして解凍します。
  2. Chromeの設定画面を開きます。
  3. 拡張機能を開きます。
  4. デベロッパーモードにチェックを入れます。
  5. パッケージ化されていない拡張機能を読み込むをクリックします。
  6. 解凍したパッケージサンプルを選択しOKボタンをクリックします。
  7. 拡張機能画面にアイコンが表示されると登録完了です。

結果確認

  1. Chrome新規タブ画面を開きます。
  2. manifest.jsonに設定したアイコン画像が表示されているのでそれをクリックします。
  3. 別ウィンドウとしてWebアプリが実行されます。
  4. 実行したWebアプリを対象にchromeのデベロッパーツールを起動します。
  5. Consoleタブを開いた状態でシリアル通信開始ボタンをクリックします。
  6. 下の画像のようにArduino上から送信された値がコンソール上に表示されていれば通信成功です。

result.JPG

まとめ

Chrome Packaged Apps APIの追加機能は発表されてまだ間もないため、あまり日本語の参考サイトがないのが現状です。
そのため手が出しづらいかもしれません。
しかし、非常に魅力的なメリットが多数存在する事も事実です。
特に、今回Google I/Oで発表された情報の中に「Chrome Packaged Apps APIを使用して作成したWebアプリはすべてのデバイス/OS上で動作可能」というとても魅力的な情報もありました。
つまりChrome Packaged Apps APIを使用してwindows上で作成したWebアプリをMacやAndroidなどのChromeにインストールする事で使用可能になる、という事です。
これは今後クロスプラットフォーム開発を行う時に非常に魅力的な機能になります。
このように今後更に注目されるであろうChrome Packaged Apps API
皆様も手が空いた時に試してみては如何でしょうか?

参考サイト

エンジニア採用中!私たちと一緒に働いてみませんか?