クリエイター手抜きプロジェクト[547]IoT obniz編 obniz(オブナイズ)の設定と文字の表示/古籏一浩

投稿:  著者:  読了時間:8分(本文:約3,900文字)



ラズベリーパイ以降、多くのSBC/IoT機器が発売されています。もっとも、ラズベリーパイ以前から存在するものも多くあります。有名どころのSBC(シングルボードコンピューター)としてはArduinoやmbedおよび、それらの互換機などがあります。

この連載でも扱っているIchigoJam/IchigoLatteも、同じくシングルボードコンピューターの部類に入ります。

これからIoT絡みを勉強したいという人には、何がよいのかと考えると、どれも一長一短があります。電子工作になれているかどうか、Webになれているかどうか、まったくの素人なのか、などで選択する(できる)機器は変わってきます。

そんな中で、Web系でのノウハウがそのまま活かせるSBC/IoT機器が、obniz(オブナイズ)です。





・公式ページ
https://obniz.io/

・購入ページ
https://obniz.io/order
https://www.amazon.co.jp/dp/B07DD6FK8G/
https://www.switch-science.com/catalog/3838/

obnizは、アマゾンやスイッチサイエンスから購入することができます(価格は4,980円)。ラズベリーパイよりもやや高めですが、micro SDカードやHDMIディスプレイを用意する必要はありませんので、全体のコストパフォーマンスとしては悪くないかもしれません。

ただし、obnizを使うにはパソコンか、スマートフォン/タブレットが必要になります。このいずれかがないと、プログラミングすることができません。他にはWiFi環境が必要になります。

obnizを購入したら、最初に電源を接続します。Androidなどで使われているmicroUSBケーブルを接続するだけです。すると、左上のダイヤルスイッチを押してください、といったメッセージと図が表示されます。(Switch this!)スイッチを押し込みます。すると、接続可能なWiFiがリストアップされます。

Join WiFi
00>1969F2F15DGCR_G
01>iPhone6sTE
02>myRooter

ダイヤルをまわして、接続するWiFiをハイライト表示します。ハイライト表示されたらダイヤルを押し込みます。

すると、WiFi接続するパスワードを入力する画面になるので、入力します。ダイヤルを左右に動かすと、選択できる文字がスライドしておきます。文字を選択するには、ダイヤルを押し込みます。

パスワード文字を間違えてしまった場合は、[BACK]を選択します。全部入力したら[END]を選択します。すると、WiFiに接続されます。

WiFiに接続するとQRコードが表示されます。このQRコードを読み取ると、接続したobniz専用のページが開きます。

QRコードが読み取れない場合は、以下のURLを入力すると接続したobniz専用のページが開きます。使用するobnizの機器番号を入力するダイアログが表示されますので、obnizの液晶画面に表示されている機器番号を入力します。機器番号はQRコードの右側に表示されています。-(ハイフン)はあってもなくても構いません。

http://obniz.io/program

Webから制御しない場合は、これで準備完了です。

obnizでは設定したWiFiの接続先とパスワードは記憶されるため、電源を落としても大丈夫です。もし、他のWiFiに接続したい場合は、obnizのダイヤルを押したまま電源を入れてください。すると、以下のように表示されるので、ダイヤルを回して「ResetWiFi」を選択すると、WiFi設定がリセットされます

obniz 機器番号
> NormalLaunch
FactoryReset
ResetWiFi

開発に必要なobnizのドキュメントは、以下のページに用意されています。

https://obniz.io/doc/root

obnizのプログラミングは、Web技術で利用されているものが、そのまま使えます。つまり、HTML+CSS+JavaScriptの組み合わせです。使い慣れた技術を活かせるわけです。jQueryなども利用できます。

それでは、何か表示してみましょう。接続したobnizのプログラムページを開きます。

ページが開かれると、見慣れたHTMLが表示されます。obnizではHTMLページの内容は、そのままブラウザで表示されます。

obnizを制御する場合は、JavaScriptを使って行います。

obnizを制御するために、専用のObnizオブジェクトが用意されています。このオブジェクトに用意されている機能を利用して、制御することになります。

それでは、手始めにobnizの液晶画面に文字を表示しましょう。Hello Worldじゃ面白くないのでMDigital Creatorsと表示してみます。

最初にやるべきことは、Obnizオブジェクトの生成です。以下のように制御するobniz機器を指定します。

var obniz = new Obniz("機器番号");

ちなみに、機器番号を指定しない場合は、自動的に入力ダイアログが表示され、対象となるobnizの機器番号を入力することになります。もし、サンプルなどでコードを公開する場合は、存在しない番号・文字にしておけば、ユーザーが接続する機器を選ぶことができます。

obnizは電源が入っていない場合もあります。obnizにアクセス可能になった場合(接続された場合)には、connectイベントが発生します。obnizを制御する場合は、このイベントを捕捉してから行います。

画面に文字を表示する前に、画面を一旦消去します。これはobniz.display.clear()となります。次に文字を表示します。

文字を表示するには、obniz.display.print()を使います。print()のパラメーターに表示したい文字を指定します。

実際のプログラムは、以下のようになります。実行する場合は、画面右上にある「保存&開く」ボタンをクリックします。obnizの画面にDigital Creatorsの文字が表示されればバッチリです。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@1.4.3/obniz.js"></script>
</head>
<body>
<div id="obniz-debug"></div>
<script>
var obniz = new Obniz("機器番号");
obniz.onconnect = async function () {
obniz.display.clear();
obniz.display.print("Digital Creators");
}
</script>
</body>
</html>


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/

まだ、全部把握したわけではありませんが、Web系の人がIoT関係を学習したい場合に、obnizはかなり手軽でよいのではないかと思いました。遠隔地からWebブラウザで制御できるので、工夫次第で便利に使えます。

パソコンまたはスマートフォンがあれば、開発環境をインストールする必要もありません。

・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram

・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936
[正誤表]
http://www.openspc2.org/book/error/ichigoLatte/

・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591
https://www.amazon.co.jp/dp/4844397605

・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP
http://digiconcart.com/dccartstore/cart/info/2561/218591

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/

・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/

・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/

・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/

・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/