ArduinoでそろそろIoT

IoT(モノのインターネット)×プログラミング教育をうたっているにもかかわらず、今まで作ってきたものは、インターネットに繋いでいません。

いい加減、単なる電子工作の域を脱したいと思います。

Arduinoでネット接続

数百円のパーツを買い足せば、Arduinoで簡単にネット接続できるものと思っていました。

しかし、そうでもないようです。

電波法の問題で、日本で使かうと違法なパーツがあったり、Wi-Fi機能搭載「Arduino YÚN」は、1万円くらいしたり・・・

手軽ではないです。

Arduinoではないけれど代替品

調べていくと、「ESPr Developer(エスパーデベロッパー)」という、何やら手軽にネット接続できる、Wi-Fi搭載の開発ボードがあるらしいです。

しかも、はんだ付けを恐れる人のために、ピンソケット実装されたバージョンがあり、Arduino UNOと同様、ジャンパーワイヤーで手軽に電子工作を楽しめそうです。

ArduinoIDEで、必要なソフトをダウンロードすれば、この「ESPr Developer」をArduino互換機として、認識してくれます。

ESPr Developerの使い方

ここで、改めて使い方は紹介しません。

非常に分かりやすく、使い方を紹介しているサイトがありました。

ESPr Developer ( ESP-WROOM-02 開発ボード )の使い方をザッと紹介

 

しかし、私はWi-Fi接続がうまくできず、愚かなことにWi-Fiパスワードの打ち間違えでハマってしまいました。

・・・無駄に苦労しましたが、それを抜けば、確かにネット接続は簡単です。

そしてスマホで光を操作するサンプルを試すと、何とも言えない感動がこみ上げてきました。

小さくまた一歩前進です。

 

 

ボッチャ ソナー描画

前回、白いボールからの360度距離データ取得に成功しました。

このデータをソナーっぽく描画したいと思います。

ほぼHTMLとCSSでソナー描画

角度と距離データを座標に置き換えるには、高校のとき習ったサイン、コサインを使うような気がします。

もう・・・忘れました。

再学習する気力がなく、Webサイトを作る知識、HTMLとCSSとJavaScriptで対処します。

端に点を配置した、グラデーションのspanを、transformで回転させるという荒業で描画してみました。

なんだかカッコイイです。

現実と比較して検証すると・・・

ボール2か所や、部屋の壁の線が分かります。

精度は、想像したよりは良いです。

 

もう少し寄りで描画してみます。

右上の点は、ソナーを有線で繋いでいるノートパソコンのモニターでしょう。

最後に写真と重ねてみると・・・

点がばらついているので、例えば最短距離10件の中央値で距離を出すなど、ごまかす工夫が必要でしょう。

次はリアルタイムで距離データを描画していく仕組みを作っていこうかと思います。

ボッチャ ソナー

360度回転するソナーを使えば、ボッチャのボール計測は早くなる!?

前回作った試作機をバージョンアップします。

ボッチャ ソナー組み立て

まずは材料の用意です。

電子部品系 材料

  • ステッピングモーター28BYJ
  • ドライバーボードULN2003
  • スリップリング:SRG-1-6G
  • 超音波距離センサー HC-SR04
  • Arduino互換機
  • ブレッドボートミニ
  • ジャンパーワイヤー

ボディー 材料

  • 大きな透明カップ(ホームセンターで購入)
  • レゴ
  • マスキングテープ

作り方

レゴとテープを使い、力技で組み立てます。

透明のカップの周囲を回るように、超音波距離センサーを取り付けます。

超音波距離センサーの反対側に、バランスをとるための重りが付いています。

 

モーターを制御する回路やプログラムは、ネットで探し、カスタマイズしています。

ソナー始動!

白いジャックボールに、ボッチャソナーを被せます。

電源を入れると・・・

360度超音波で距離を計測!

約0.7度刻み、360度で512回、距離を取得します。

青いボールと、赤いボール、どちらが近いでしょうか!?

 

取得した512の距離データを、ひとまずエクセルでグラフ化してみましょう。

おおっ!

もっとノイズだらけのひどいデータになると思ったのですが、意外ときれいに取得しています。

赤ボールの方が近いですね。

次回は、このデータを視覚的にも楽しめるよう、座標で描画します。

ボッチャ超音波計測

前回書いた、ボッチャの計測時間の課題解決の1つとして、超音波計測機を試作してみます。(電子工作の勉強も目的です)

マッハ1で計測

超音波は音なので、1秒間に340メートル進みます。

1メートルの距離を、超音波が往復して距離を測る時間は0.006秒です。

現在ボッチャで使われている、メジャーやコンパス型定規の代わりに使えないかと考えています。

計測準備時間を除けば・・・計測自体は、マッハ1で測るので、メジャーを引っ張るより早いとは思います。

ちなみに、幼児が参加するようなボッチャ体験会で、威力を発揮しそうです。
ジャックボールから、かなり離れた場所を計測することになるので。

超音波計測をしてみる

マイコンボード「Arduino」、超音波センサー、モーター、その他、細かいパーツを用意しました。

てきとうに穴を開けて、ねじで組み立てます。

360度回転する、潜水艦のソナー探知機のようなものを作ろうとしたのですが、知識不足で180度しか回転しないモーターを買ってしまいました・・・。

とりあえず、超音波距離計測をするプログラムを書き込んで、実験してみます。

ジー 「11.59cm」

楽しいです。定規で実測すると、あまり正確ではないですが。

音の速度は、気温と気圧で変わるらしいので、温度センサーと気圧センサーも実装して、補正したほうが良いようです。しかし、試作であまり細かいことは気にしません。

データが魅了する

幼いころの記憶ですが、野球のテレビ中継で、投球速度がテレビ画面に映し出されるのを、熱心に何度も見ていたことを覚えています。

数字データで選手のプレーがより具体的に伝わってくるからでしょうか?

今回の超音波センサーは、単純な距離を測るだけのものでしたが、ボッチャの大会で、できるだけ計測に時間をかけず、距離データを観客に表示できれば、面白さが増すのでは?と、改善余地を感じました。

ボッチャの課題 計測時間

リオ大会でのボッチャ観戦で感じた課題を記述します。

計測機会が多く、アナログ

ボッチャは3投目以降、ジャックボール(白いボール)から遠い方のプレイヤーが投げるルールとなっています。

つまり2投目から、どちらが近いか距離を測ります。

基本は目測ですが、目測で判断つかないときは、道具を使います。

わずかな隙間を測るための尖った三角形の定規、近距離を測るコンパス型の定規、長距離を測るメジャー。

審判がボールを動かさないように、慎重に、慎重に計測します。

計測と結果の時間差

精密な計測が必要なのは、アーチェリーや射撃も同じです。しかしボッチャと決定的に違うのは、電光掲示板でどの得点を射ぬいたか、即時に表示されるところ。

テクノロジーにより、結果のリアルタイムに知ることができるところです。

なぜ結果のリアルタイム表示が重要か?

アーチェリーとボッチャを比較したとき、歓声のタイミングが明らかに違いました。

アーチェリー

矢を放つ→グサッ(ささる)→10点→ワー!!(大きな歓声)

プレーと歓声がリアルタイムで連動しています。

ボッチャ

ボールを投げる→ピタッ(止まる)→ワー(歓声)→審判の計測・・・(間)・・・結果表示→ワー(歓声)

歓声を上げるタイミングが分散されます。興奮の分散です。

世界最高峰の戦いとなると、もはやボールが密集しすぎて、審判の計測が終わるまで、待たなければ勝敗が分かりません。

歓声を上げるタイミングを見失っている人もいるような感じを受けました。

テクノロジーで解決するなら

おそらく、1試合だけならボッチャコートの俯瞰映像を会場の大きな電光掲示板で見られるだけで、観戦の楽しさは倍増します。

ただ、同時に6試合くらい進行することも普通にあり、電光掲示板では限度があります。

解決案の1つとして、スマートグラスのARによって、視界の一部に自分の関心のあるボッチャコートの俯瞰映像を流すという案は考えられます。

ちなみに「スマートグラス」という実用化が先の技術を上げましたが、スマホを持ちながらの観戦は拍手ができず、盛り上がらなかったので、ウェアラブル端末を上げました。

他にも、ボール認識技術での解決方法も出てくると思います。

ボッチャは、これから進化する競技だと考えています。

ボッチャを楽しむために必要なこと

今月は2度、ボッチャの体験会に行きました。

ボッチャは障害者、健常者、子供、お年寄り、男性、女性を問わず、誰でも楽しめるところが魅力です。

白いボールの近くに、自分のボールを投げるのですが、思った以上に戦略のスポーツです。

認知度上昇中

非常にマイナースポーツだったボッチャですが、日本代表がリオパラリンピックで銀メダルを獲得し、さらに小池知事のPR活動が功を奏し、3年前2.4%だったボッチャの認知度が、今年2017年1月には、39%まで上昇しているそうです。

これからも東京パラリンピックに向け、ますます認知度が上がっていくと思います。

たくさんの人が、東京大会で見に来てくれることを期待していますが、同時に懸念もあります・・・。

観戦を楽しめるかが懸念

ボッチャは、戦術・戦略のスポーツです。

相手の投球の邪魔になるところに球を投げたり、柔らかいボールと硬いボールを使い分けたり、ボールをコネコネほぐして転がりにくくしたり・・・

テレビで見る分には、その戦術・戦略を解説付きで楽しめると思います。

ただ、会場で観戦すると、なかなか楽しむための必要条件がそろっていないことを感じました。

リオパラリンピックで観戦した中では、個人的に、馬術の次に観戦難易度が高かったです。

1回戦、2回戦は観客が多かったものの、明らかに飽きて席を立つ人もいて、決勝の観客席は閑散としていました。

自国ブラジルが金メダルを獲得した表彰式でさえ、空席がだらけで寂しかったです。

いくらボッチャの認知度が上がっても「白いボールに近ければ勝ち」という知識程度では、東京大会の会場に足を運んだ人たちに、物足りない体験をしてしまうかもしれません。

ボッチャを楽しむための仕組みを作れるか・・・

引き続き、解決すべき課題を考えていきます。

価格が見つからない?ユーザビリティの原則

マニアックな電子部品をECサイトで探す際、Amazon、楽天以外を使うことがあります。

特に「秋月電子通商」は、部品のデータシートがあり、お世話になっています。

ただ重要なところで、迷うことが・・・。

価格が見つからない!

なぜか、商品の価格が見つかりません。

キャプチャ:秋月電子通商2017年2月

しばらく売り切れと勘違いして、ページを離脱していました。

そのうち違和感に気づき、よく見たら価格が掲載されていたことに気づきました。

関連商品のテキストリンク一覧の下に、価格があります。

気づかなかった理由

なんと、注意力がないのでしょう!

・・・と、思わずに、気づかなかった理由を考えました。

 

たぶん、ユーザビリティの第一人者ヤコブ・ニールセン博士が言う「学習のしやすさ」の原則に則してないからだと思います。

大手ECサイトでは、商品価格が商品名の下に目立つように記載してあるのが一般的です。

私も「そこに記載しているはずだ!」と、無意識に学習しています。

 

具体的に見ていくと、Amazonであれば、商品名の下に目立つ赤字で価格を掲載。

キャプチャ:Amazon(2017年2月)

 

楽天も同様です。

キャプチャ:楽天(2017年2月)

 

Yahoo!ショッピングも商品名の下に、赤字ではないですが、大きく目立つ価格表示を行っています。

キャプチャ:Yahoo!ショッピング(2017年2月)

 

やはり、商品名の下に、目立つように価格を掲載するのが、一般的(利用者数の多いサイト)になっています。

 

独自レイアウトで、使い方や見方を学習しないと利用できないサイトでは、ユーザビリティが低下して、売り上げを落とすかもしれません。

 

とはいえ、Amazonなどの強豪や、無数のECサイトが乱立する中で、私は「秋月電子通商」のECサイトに何度もたどり着き、データシートを参考にさせてもらいました。

学習しやすさのユーザビリティ云々とは別次元で、「秋月電子通商」サイトに価値があることは間違いありません。

 

温度センサーでやけどするぞ

IoT×プログラミング教育 失敗談です。

温度センサーに生えている3つの足を、てきとうにつないだら、すごい熱になりました。

 正しい回路(温度センサーLM35DZの場合)

温度センサー「LM35DZ」の説明書をネットで読むと、平らな面を正面として、左からVS、VOUT、GNDと書いてありました。

これが正しい回路だと思います。

VSとGNDを逆にすると

説明書を読むのが面倒で、とりあえずつないでみたとき、VSとGNDを逆にしていたようです。

給電するとすぐ、Arduino本体のLEDの光が消えました。

どうしたのかな?と、思ってもう一度給電しても、やっぱりすぐにArduinoが落ちるようです。

温度センサーの向きを変えてみようと、つまんだとき・・・

「あちっ!」

温度センサーがすごい熱になっていて、やけどしそうになりました。

熱がるお父さんに、子供たちもびっくりです。

それでも生きている

冷えてから温度センサーを正しくつなぎ直し、温度を測ってみると・・・

正しそうな温度が取得できています。生きています。

意外とタフですね。

 

  • センサーのピンは、事前に調べて正しくつなぐ
  • Arduinoが落ちたら、何度も給電しない
  • パーツが熱かったら、すぐ手をはなす

いい勉強になりました。

GIFアニメを90%圧縮

ちょっとした動きを記事に載せたいとき、GIFアニメという選択肢があります。

音声がいらず、短い動画であれば、ユーザーがクリック、タップ不要なGIFアニメが有効な場合が多いです。

特にループ再生の動画には、もってこいです。

ただ、思った以上に容量が重く、質を落とさず圧縮するのに試行錯誤しました。

動画をGIFアニメへ変換

2秒の動画(mp4形式)をGIFアニメに変換します。

変換は手軽にできるオンラインツールを使います。

3つのオンラインツールを試したのですが、なぜかうまく変換できたのはGirafというツールだけでした。

Girafは日本語の上、丁寧なUIなので、迷わず使えます。

GIFアニメの出力設定は

サイズ:480×270ピクセル
フレーム数:25
フレームレート:12fps

動きを見せたいので、フレームレートは高く設定しています。

これで出力されたGIFアニメの容量は・・・2.12Mバイト。

重いです。

GIFアニメを圧縮

GIFアニメの軽量化のため、圧縮ツールを探していると、ezgif.comが提供しているオンラインツールに出会いました。

英語だったのでGoogleサイト翻訳の力を借ります。

重複するフレームを削除する(Remove duplicate frames)

画像変化のほぼないフレームがあるので、削除しましょう。
度合いは 50%としています。

ファイルサイズ:1.02M(-51.79%)

これだけで半減します。

透明性を最適化する(Optimize Transparency)

アニメーションしていないところは透明にして、前のフレームの画像を表示させる軽量化です。
度合いは4%としています。

ファイルサイズ:413.77K(-60.49%)

これも効果絶大で、一気に軽量化しました。

カラーリダクション+ディザ(Color Reduction + dithe)

色数を減らします。
256色から128色に半減させつつ、色の境界をぼかすディザを使います。

ファイルサイズ:326.65K(-21.06%)

色数を半減してましたが、思ったより軽くなりませんでした。

もっと色数を減らしても良いですが、別のことを試しましょう。

損失のあるGIF(Lossy GIF compression)

直訳で「損失のあるGIF」でしたが、劣化だと思います。
思い切って150%の度合いで適用します。

ファイルサイズ:218.62K(-33.07%)

ガサガサした感じになりました。

ここまでで、90%カットの圧縮となりました。

動画の取り直しで質の高い圧縮

  • 重複するフレームを削除する
  • 透明性を最適化する

この2つで、相当な削減効果がありました。

なので、必要な場所以外は動かないよう、しっかり三脚で固定しで動画をとることが、GIFアニメ変換時の軽量化につながります。

 

撮りなおして、重複するフレーム削除と、透明性の最適化をすると・・・

ファイルサイズ:146.15K

画質の低下もほとんどなく、重さを93%削減できたようです。

サーボモーターで舵取り!障害物を避ける車

第10回 IoT×プログラミング教育

赤外線で障害物を避ける車を作ります。

モーターを使い、車体はレゴで組み立てます。

180度しか回らない!?サーボモーター

動力として手元にモーターが2つあります。

モーターの一つで車輪を回し、もう一つを舵取りに使うつもりです。

「よし!車作ろう!」

子供たちも期待しています。

 

手元にあるサーボモーター「SG90」の説明を読むと・・・

え?

180度しか回らない!?

それじゃ、車輪が回らないじゃん。

 

どうやらサーボモーターと、私の知っているミニ四駆で見たモーターとは、別物のようです。360度回りません。

・・・仕方ないので舵取りだけ作りましょう。

サーボモーターで舵の回転角度

サーボモーターの回転角度を制御するには、パルス信号を送る必要があるようです。

パルス信号の波の形で、回転角度が変わるようですが、深く追求しません。

デジタル出力3番ピンから、パルス信号を送る回路を作りましょう。

早くも小学レベルの理科知識では、厳しくなってきました。

回路が正しいのか分かりません。

もはやパーツが壊れても仕方ない・・・失敗から学びます。

サーボ制御のプログラム

パルス信号を作れということだったら、大変なことになりそうですが、ありがたいことにArduinoには、サーボモーターを動かすためのライブラリがあるようです。

#include <Servo.h> // サーボライブラリ読み込み 
Servo myservo; // サーボオブジェクト作成

void setup(){ 
 myservo.attach(3); // サーボにパルスを送るピン
} 

void loop(){
 myservo.write(0); // 0度に回転
 delay(1000); 
 myservo.write(180); // 180度に回転
 delay(1000); 
}

ありがたいほど、簡単に制御できます。

 

少し車の舵取りとしては、回転速度が早すぎでしょうか?

「1度ずつ回転→数ミリ秒遅延」の繰り返しで、回転速度を調整できるようにした方が良いかもしれません。

あとは、赤外線距離センサーで、障害物が近づいたときに舵をとるプログラミングを追加します。

#include <Servo.h>
Servo myservo;
int val = 0; // 距離センサーの変数
int pos = 0; // サーボの角度変数

void setup(){ 
 myservo.attach(3);
} 

void loop(){
 val = analogRead(0); // 距離センサーの値取得
 if(val > 300){ // 近くなったら
  for(pos = 0; pos < 45; ++pos){ // 45度になるまで
   myservo.write(pos); // 1度ずつ回転
   delay(5); // 回転速度調整
  }
  delay(1000); // 45度を1秒維持
  for(pos = 45; pos > 0; --pos){ // 0度に戻す
   myservo.write(pos);
   delay(5);
  } 
 }else{
  myservo.write(0); // 遠いときはサーボを0度
 }
 delay(100); 
}

これで、右か左か分かりませんが、45度舵をきって避けてくれるはずです。

レゴで車体組み立て

車体の組み立てにはレゴを使います。

Arduino本体と、ブレッドボードを載せる台は、てきとうに作れば大丈夫でしょう。

サーボモーターと赤外線センサーの固定は、レゴのジョイントパーツとかを駆使して作りました。

これに、車体と車輪を結合して・・・

全体像は、こうなりました。

自走することができないので、手押しです!

やってみましょう。

ハイテクそうで、ハイテクではない。

手で押しているのなら、手で向きを変えればいいので、微妙です。

長男「・・・」

お父さん「避けたの分かった?」

長男「うん。」

 

ちくしょう。驚きも何もない。

360度回転するモーターを買って、自走するようにします。