Web開発者でも簡単に扱えるマイコンボードTesselでMilkcocoaを使う(遠隔Lチカ編)

Posted: / Tags: Tessel



JavaScriptで使えるマイコンボード(巷ではJS Boardと言われているみたいです)であるTesselは、Web開発者でも簡単に扱えるということで注目されています。

Rasberry Pi等ではつまずきがちなセンサーも、Tesselではパズルのように装着するだけで良いので初心者でも簡単に扱えます。

Tesselは1万円弱と少し高いですが、Raspberry Piはインストールに必要な機材、ブレッドボードやジャンパワイヤー、無線LAN子機等々を買う必要があることを考えると、結果的にTesselが安くなる気がしています。

そこで今回は、MilkcocoaをTesselで使う方法を以下の手順で紹介します。

  • Tesselの導入
  • Milkcocoaの導入
  • チャットを使って遠隔Lチカしてみる
  • パソコンから取り外して使ってみる

Tesselの導入

以下の記事で導入からLチカまでは5分経たずに終わるかと思います。本当にすぐできます。

必要なものは作業用パソコンとTessel(と付属のUSBケーブル)だけというお手軽さです。

またTesselは、Raspberry Piのようにマイコンボードの中のファイルを編集するのではなく、作業用パソコンでコードを書いて実行時に転送するという仕組みになっています。開発に慣れているパソコンとエディタで開発できるのが、個人的には結構嬉しいです。

Milkcocoaの導入

さきほどの記事でLチカまで終わったとして、ここからMilkcocoaを導入していきます。

Milkcocoaは普通のNode.js SDKとは別に、Tessel用のNode.js SDKを用意しているのでそちらをインストールします。

$ npm install milkcocoa-tessel

Milkcocoaを使う前に、TesselをWifiに繋いでおきましょう。これも簡単で以下のコマンドを打つだけでWifiに繋いでくれます。

$ tessel wifi -n (SSID) -p (パスワード) -s wpa2

-sの暗号化規格は、WPA2ではない場合があるので、その場合は作業用パソコン側でネットワーク環境設定を見る等して確認して下さい。

Wifiに繋いだら、Milkcocoaインスタンス(メソッドを呼ぶための変数)を作成してAPIを使い始めます。

Milkcocoaに登録していない方は、Milkcocoaで登録をして、アプリの管理画面のapp idを控えておいてください。

// mlktest.js
var tessel = require('tessel');
var MilkCocoa = require('milkcocoa-tessel');

// {your-app-id}の部分は、Milkcocoaに(無料)登録してアプリを作成した際に生成されるアプリ固有の文字列です。
var milkcocoa = new MilkCocoa("your-app-id.mlkcca.com", {useSSL:false});

1点だけ、いつもの(初見の方はすみません..)Milkcocoaインスタンス作成とは違うことに気づくかと思います。オプションで、useSSLをfalseにしています。これはSSL(TLS)通信を使用しないようにします。

Tessel(無印)でMilkcocoaを使うとSSL認証でエラーが出る(Tessel2では使えそう)

MilkcocoaはSSLを使って通信していますが、TesselでSSLを使うと通信に失敗してしまいました。

これは以下のTesselの問題に起因しているのではないかと思われます。以下のIssueで「俺も俺も」と同じ問題を抱えている方がちらほらいました。

ただ、Tessel開発者が数日前のコメントで「Tessel2ではLinuxでも標準的に使われているSSLライブラリを使います」みたいに言っているので、Tessel2ではオプション無しで使用できるかと思います。

There were plans to replace axTLS with PolarSSL / MbedTLS when it was announced that it would be relicensed from GPL to Apache, but that version is still not available.

SSL is one of many reasons Tessel 2 runs Linux, with standard Node and OpenSSL.

要するに、「Milkcocoaは、Tessel(無印)では我慢してSSLをoffにして使って下さい。Tessel2が発売されたらSSLのままで使えますよ」ということです。

チャットを使って遠隔Lチカしてみる

APIを使う準備ができたので早速使ってみましょう。

チャットは先日の記事:リアルタイムなToDoアプリをMilkcocoaとJavaScriptで作る(基本編)のものを使います。

とはいっても、以下をコピペで大丈夫です({your-app-id}以外)。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>TesselをLチカさせるチャット</title>
  <script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div>
    <div>
      <input id="new_content" type="text" />
      <button id="create_btn">追加</button>
    </div>
    <div id="chats">
    </div>
  </div>
</body>
</html>
// app.js
(function(global){

  // your-app-idの部分は、先ほどと同じものを使います。
  var milkcocoa = new MilkCocoa("your-app-id.mlkcca.com");
  var chatDataStore = milkcocoa.dataStore("chats");

  global.onload = onload;

  function onload() {
    var new_content = document.getElementById("new_content");
    var create_button = document.getElementById("create_btn");
    var chats = document.getElementById("chats");

    chatDataStore.stream().sort('desc').size(20).next(function(err, chats) {
      chats.forEach(function(chat) {
        render_chat(chat.value);
      });
    });

    chatDataStore.on('push', function(pushed) {
      render_chat(pushed.value);
    });

    create_button.addEventListener("click", function(e) {
      chatDataStore.push({
        content : new_content.value
      });
      new_content.value = "";
    });

    function render_chat(chat) {
      var element = document.createElement("div");
      element.textContent = chat.content
      chats.appendChild(element);
    }
  }
}(window))

チャットができたら、Tesselでpushを監視して、pushされたらLEDのON/OFFを入れ替えるように実装します。

// mlktest.js
var tessel = require('tessel');
var MilkCocoa = require('milkcocoa-tessel');

var milkcocoa = new MilkCocoa("your-app-id.mlkcca.com", {useSSL:false});
var chatDataStore = milkcocoa.dataStore("chats");

var led1 = tessel.led[0].output(1);
var led2 = tessel.led[1].output(0);

console.log('start');

chatDataStore.on("push", function(e) {
  led1.toggle();
  led2.toggle();
  console.log('pushed', e.value.content);
});

これで、チャットに投稿をしたら、2つのLEDが交互に光るのが確認できるかと思います。

注意すべきなのは、Tesselはソケットを4つしか持っていない上、USBを抜いて電源を落とさない限りソケットが解放されません。Milkcocoaはソケットを2つ使うので、プログラムを2回実行するごとにUSBを抜かないとエラーが出ます。

開発中に少し面倒くさいだけで、実際に使うときは一回しか実行しないので問題はないです。

パソコンから取り外して使ってみる

プログラムを実行させたままにしたい場合は、パソコンに繋いだままだと邪魔で仕方ないです。なので、Tessel単体で動くようにしましょう。

といってもやり方はとても簡単で、以下のコマンドでプログラムをTesselのフラッシュメモリに書き込むだけです。

$ tessel push mlktest.js

プログラムを送ったらパソコンから取り外して、別のMicroUSB電源に付け替えたら、起動して勝手にプログラムが実行されます(実行までちょこっと時間がかかります)。

フラッシュメモリのプログラムを消したい場合は、以下のコマンドで消すことが出来ます。

$ tessel erase

圧倒的に扱いやすいTesselとMilkcocoaで広がる可能性

前回の記事:Raspberry Piで取得したセンサーデータをリアルタイムに可視化する(導入編)をご覧になった方は、Raspberry Piに比べて、Tesselは驚く程簡単だと気づくかと思います。

この手軽さに加え、Milkcocoaで簡単にデータ保存とリアルタイム通信ができるようになることで、IoT開発の幅がかなり広がったんじゃないかなと思っています。

是非、TesselとMilkcocoaを使って色々試して欲しいです。

次回は、センサーデータを使った例を紹介しようかと思っています。


※TesselやRaspberry PiでMilkcocoaを使うハンズオンが7月6日に開催されます。マイコンボードを持っていない方も会場で購入できるので、興味を持たれた方は是非参加してみて下さい!