LoginSignup
6

More than 3 years have passed since last update.

【JavaScript】micro:bitをプレゼンリモコンにするワンライナー

Last updated at Posted at 2018-12-05

この記事はIoTLT Advent Calendar 2018(neo)の6日目の記事です。

ちょっと前にスイッチのJoy-Conをプレゼンリモコンにするワンライナーを書いたのですが、今回は勉強がてらmicro:bitをプレゼンリモコンにするワンライナーを書いてみました。

動作環境

  • macOS High Sierra
  • Chrome 70
  • micro:bit

micro:bit側準備

設定

MakeCodeで新しいプロジェクトを作成します。

設定ボタンをクリックし、プロジェクトの設定から No Pairing Required: Anyone can connect via Bluetooth. を選択して事前のペアリングなしでBLEリンクできるようにしておきます。

image.png
image.png

設定ボタンをクリックし、拡張機能からBluetoothを選択します。
image.png
image.png
image.png

プログラムを書く

「最初だけ」に「Bluetooth ボタンサービス」を追加しておきます。
image.png

たったこれだけです。

転送

micro:bitにプログラムを転送します。

通常は「ダウンロード」ボタンをクリックし、ダウンロードされたHEXファイルをPC側でUSBメモリのように認識しているmicro:bitにファイル転送するのですが、Chromeであれば「ペアリングしてワンクリック書き込み」(WebUSB API利用)が利用できます。

image.png

ペアリング後、「ダウンロード」ボタンをクリックするとプログラムを転送することができます。

micro:bitをプレゼンリモコンにするワンライナー

以下のスクリプトをデベロッパーツール(Macであればcommand+option+I)の Console に貼り付け Enter で実行します

(async()=>{const a="e95d9882-251d-470a-a062-fa1922dfa9a8",b="e95dda90-251d-470a-a062-fa1922dfa9a8",c="e95dda91-251d-470a-a062-fa1922dfa9a8",[d,e]=[37,39],f=a=>{const b=document.activeElement,c="IFRAME"===b.tagName?b.contentDocument:document;["keydown","keyup"].forEach(b=>{c.body.dispatchEvent(new KeyboardEvent(b,{keyCode:a,bubbles:!0}))})},g=async(a,g)=>{const h=await a.getCharacteristic(g);await h.startNotifications(),h.addEventListener("characteristicvaluechanged",a=>{1!==a.target.value.getUint8(0,!0)||(g===b?f(d):g===c&&f(e))})},h=await navigator.bluetooth.requestDevice({filters:[{namePrefix:"BBC micro:bit"}],optionalServices:[a]}),i=await h.gatt.connect(),j=await i.getPrimaryService(a);if(g(j,b),g(j,c),navigator.wakeLock){const a=b=>{"visible"!==document.visibilityState||navigator.wakeLock.request("screen").then(()=>{b&&(document.addEventListener("visibilitychange",a),document.addEventListener("fullscreenchange",a))}).catch(()=>{})};a(!0)}})();

デバイスを選択してペアリングします
image.png

micro:bitのBボタンでスライドを進めることができ、Aボタンでスライドを戻すことができます。

対応サイト

以下の対応サイトで利用できます(スイッチのJoy-Conのときと同様)

コード

minify前のコードはこちらです:
https://github.com/mascii/presentation-microbit
git clone, npm install, npm run minify でminifyしたワンライナーを出力可能です。

WebUSB と Web Bluetooth のお話

ブラウザに繋がるモノたち

2018年12月現在、WebUSB API や Web Bluetooth API に対応したブラウザは数少なく Chrome と Opera くらいしかないようです。
ですが、ブラウザ上でUSBやBluetoothが使えるようになることでこんな未来が来るかもしれません:

  • WebUSB API: USBデバイスがブラウザとつながる
    • OSに対してのドライバーのインストールが不要になる未来がくる?
    • PaSoRi(カードリーダー)で読み込んだカードIDをブラウザ上に表示したりできるらしい1
  • Web Bluetooth API: Bluetoothデバイスがブラウザとつながる
    • センサーデータなどをブラウザ上に表示したりできる
    • ブラウザ上でヘルスケアをしたりする未来がくる?
  • GamepadAPI: ゲームパッドがブラウザとつながる
    • ブラウザ上でゲームパッドを使ったゲームができる未来がくる?

ブラウザとモノが直接繋がること、これもIoTなのだと僕は思っています。

まとめ

  • micro:bitで WebUSB API によるプログラム転送と Web Bluetooth API によるブラウザとの通信を試すことができる
    • 実はmicro:bitはWebエンジニアにとって、良い教材だったりします
  • JavaScriptの話になってしまいますが、Web Bluetooth APIを使うときはPromise-thenよりもasync/awaitの方が書いてて見やすかったです

参考サイト


  1. e-TaxがActiveXというInternetExplorerくらいでしか動かない過去の技術を使っているそうなので、いつかWebUSB APIで置き換えられて欲しいです 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6