菅原のびすけ

Web制作者にもチャレンジできるIoT入門~Tesselの基礎~

    連載: IoTxWeb (7)

    2015年はIoT元年と言われるくらい、IoTやWoTという単語がバズワード化してきました。2014年頃からArduinoRaspberryPiGalileoEdisonといったマイコンボードが急激に人気になってきましたね。Web開発者がハードウェア領域に進出しやすくなりました。ただ、センサーの利用など応用的なことをしようとすると、GPIOや電流などの知識をある程度は知っておく必要があります。

    今回は、Webの知識だけでほぼ操作でき、初心者向けのTesselというマイコンボードを紹介します。具体的には、Tesselの開発環境整備から環境センサを扱うところまでを紹介したいと思います。Webエンジニア向けに説明を書きましたが、Webデザイナーやディレクターなど、非エンジニアの方でもチャレンジしていただけたら幸いです。

    Web制作者向けマイコンボードTesselとは

    >「Tessel は、Node.jsベースのJavaScript環境を利用してハードウェア制御可能なマイコンボードです。 スタンドアロンで WiFi接続可能で、USBによる電源供給のみで動作します。 本体にはモジュール拡張用に4つのポートがついており、ここにSDカード読み込みモジュールやオーディオ入出力モジュール、加速度や温度・照度などのセンサモジュールなどの様々なモジュールを差し込むことで拡張が可能です。

    そしてこの一つひとつのハードウェアモジュールを操作するためのNodeモジュールがnpmで公開されており、バグ修正も含めて Node.js のプラットフォームの上に乗っかっている形でトキメキます」

    ※この説明はhecomiさんのサイトより抜粋です。

    JavaScript(Node.js)で開発可能

    TesselはJavaScript(Node.js)で操作可能なプログラムを書けるマイコンボードです。JavaScriptで記述できるので、Web制作者でも比較的とっつきやすい仕様となっています。Webエンジニアやデザイナーにとっては慣れ親しんでいる言語を使って開発ができるので、数分でセンサーを扱うことができるようになります。

    センサーの使いやすさも抜群

    またセンサーを使った拡張も簡単で、専用モジュールを購入し、パズルのように組み立てるだけでセンサーを扱うことができます。GPIOや電流は全く意識しなくていいので、初めてマイコンボードを使ってセンサーを扱う人にはオススメです。

    Tesselの購入

    Tesselはスイッチサイエンスのサイトから購入できます。
    今回は本体と一緒に環境センサの購入もしました。ArduinoやRaspberryPiと比べると比較的値段は高めですが、迷わずに作業できるため時間はかからないと思います。入門にはぴったりです。

    注文してから2~3日で届きました。 本体、USBケーブル、Tesselのシールが1セットです。今回は環境センサも注文したので別の袋に入って環境センサが届きました。

    本体は結構小さいです。名刺の2/3〜3/4くらいの大きさです。

    環境センサはさらに小さいです。

    開発環境準備

    今回はMac(Yosemite)での開発をしていきます。MacとTesselをUSBケーブルで接続して、Macで書いたプログラムをTesselで実行することができます。まずは、開発環境を整えましょう。

    バージョン

    • Mac OS X 10.10 Yosemite
    • Node.js 0.12
    • Tessel CLI v0.3.21

    Node.jsのインストール

    すでにNode.jsが利用できる環境の方は、読み飛ばしてください。

    Node.jsのインストールはこちらの記事を参考にしましょう。 いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜

    NVMが利用可能になったら

    とするとNode.jsの0.12をインストールできます。

    Node.jsのバージョンが、最新の0.12になっていることを確認できました。

    Tessel CLI(コマンドラインインターフェイス)のインストール

    Node.jsをインストールすると、NPM (Node Package Manager)コマンドが使えるようになります。 NPMはNode.jsのいろいろなモジュールの依存関係を解決して、簡単に利用できるようにしてくれるNode.jsのパッケージマネージャーです。

    Tesselの開発環境であるTessel CLIは、NPMでインストールすることができます。

    上記の手順でNode.jsをインストールした時点で、NPMは利用可能になっているはずです。以下のコマンドを実行しましょう。

    特にエラーがなければ、tesselコマンドが使えるようになります。tesselと入力するとコマンド一覧を見ることができます。

    例えば、Tessel CLIのバージョン確認をするときはtessel versionとなります。

    Tesselのファームウェアアップデート

    これもコマンド一つで実行できます。tessel updateコマンドでTesselのファームウェアを更新しましょう。ファームウェアの更新がMac経由で簡単に行えるのはいいですね。

    ここからTesselとMacをUSBケーブルで接続しての作業になります。

    何はともあれ、Hello World(Lチカ)

    プログラミングの最初は、Hello Worldですね。 電子工作界隈だとHello WorldにあたるのがLチカ(LEDをチカチカさせること)です。

    まずは公式サイトの手順を実行してみましょう。

    まずプロジェクトフォルダを作成します。

    package.jsonを作成します。いろいろと質問が出てきますが、とりあえず今回は全てEnterで大丈夫です。

    では実際にblinky.jsを描いてみたいと思います。エディタは慣れ親しんだものを使いましょう。 JavaScriptのコードなので、大抵のエディタがシンタックスハイライトしてくれるはずです。 ちなみに、私は最近Atomで書いています。

    以下のコードをコピペして、blinky.jsを作成しましょう。

    実行

    ↑のjsファイルを作成したら、同じフォルダ内で以下のコマンドを実行しましょう。

    MacからTesselにプログラムが送られて、Tessel内で実行されます。成功するとLEDがチカチカ光ります。

    ちなみにLEDはTesselのモジュールの中でもハードウェアモジュールに位置付けられていて、ドキュメントが他のモジュールとは別のページになっているので注意しましょう。 https://tessel.io/docs/hardwareAPI#tessel

    エラーが出ても焦らずに対応しましょう。その1

    筆者が開発中に遭遇したエラーを簡単にまとめてみます。

    ファームウェアアップデートをしていない状態で実行

    ちなみに、私はtessel updateを行わずに実行しようとしたら、以下のエラーが出ました。

    tessel updateコマンドを実行したら解消されましたが、参考までに載せておきます。

    環境センサー(Ambient)で音と光を取得

    Lチカが終わったら、次はいよいよセンサーを使ってみたいと思います。今回は汎用的に使えていろいろと応用が効きそうな環境センサー(Ambient)を使います。

    環境センサーを使うことで音の大きさと明るさの値を取得することができます。 環境センサーの使い方は こちらのページに書いてあります。また、Tesselのセンサーモジュールは別売りになっているので注意しましょう。

    開発にあたりモジュールを追加します。

    環境センサーをポートに差し込みましょう。

    画像の向きにTesselを置いた時の左下が、ポートAになります。ポートはA,B,C,Dがあり、どのポートに差し込んでも動作しますが、プログラムでポートを指定する際は適宜接続しているポート名に変更して下さい。

    以下の写真は、ポートAに環境センサーをポートBにオーディオモジュール(別売り)を接続した例です。

    blinky.jsの時と同様に、以下のコードをコピペしてambient.jsを作成しましょう。

    実行してみます。

    センサーが取得した明るさと、音の大きさがコンソールに表示されます。試しに、センサの上に手をかざして暗くしてみたり、指ぱっちんなどで音を立ててみて、値が変化するのを確認してみましょう。

    Ambientの詳細なメソッドはこちらになります。

    先ほどのLEDと組み合わせれば、夜になって暗くなったらLEDを自動的に光らせるといったことも簡単にできそうですね。

    エラーが出ても焦らずに対応しましょう。その2

    この時点で、筆者が開発中に遭遇したエラーを簡単にまとめてみます。

    実行はnodeコマンドではなくtessel run

    いつものくせでnodeコマンドで実行しようとするとこうなります

    これはNode.jsでの開発を普段行っている人にありがちな現象かもしれません。通常Node.jsではnodeコマンドでプログラムを実行しますが、Tesselではtessel runコマンドを使います。 間違えると、以下のようなエラーに遭遇しますので注意しましょう。

    モジュールの接続が不安定な時もあります。

    特に問題なくコードを書いていても、実行時にこんなエラーが起きることがあります。

    これはどうやらモジュールが上手く接続できてなかったみたいです。 センサモジュールを繋ぎ直して再実行したら、うまくいきました。

    Tessel 2

    この記事執筆途中でTessel 2がアナウンスされました。 Tessel 2ではNode.jsだけではなく、PythonやRustでも処理を記述できるようになったみたいです。USBポートやEthernetポートが新設されたり、Wifiやその他モジュールも一新されているみたいです。現時点でプレオーダーできるみたいなので、興味のある方は注文してみてはいかがでしょうか?

    まとめ

    いかがでしたでしょうか? 想像以上に簡単にセンサーを扱うことができたのではないかと思います。

    TesselはWeb開発者にとってIoTの入り口になってくれるデバイスなので、Web開発者でハードウェア知識はないけどIoT領域に触れてみたいと考えている方々にはぴったりなのではないでしょうか。

    今回はIoTと言いつつも、I(Internet)の部分には全く触れませんでした。次回はTesselをWifiネットワークに接続してWebサービスと連携して応用的なものを作ってみようと考えています。

    興味を持った方は、ぜひTesselを使った開発にチャレンジしてみましょう!

    de:code 2017
    Powered byNTT Communications

    tag list

    アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Canvas Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket