九九でクリスマスツリーを光らせよう

前回に引き続き、obnizを使ってLEDテープを光らせようと思います。

現在我が家では、子供が九九を覚えられない課題を抱えています。

それに絡めたプロダクトを考えます。

九九の正解1つにつき1つLED点灯

Webアプリで九九を出題します。

正解を入力するたびに、1つずつLEDが光るゲームです。

最終的に得点(正解数 ÷ 81 × 100の切り捨て)が出て、得点に応じて起こるイベントが変わります。

【100点】
イルミネーション(LEDランダム点灯)+クリスマスソングが流れる

【99~90点】
拍手と歓声が聞こえる

【89~80点】
「ははははは」笑い声が聞こえる(ちょっとさげすんだ感じ)

【79点以下】
「なんでやねん」

・・・子供はわざと悪い点を取って、「なんでやねん」を聞き、面白がっています。

クリスマス当日までに、はたして100点を取れるのか?

合成音声出力と音声入力対応だが

このWebアプリは出題の際、「さざんが」「ろくご」といった、合成音声でしゃべってくれます。

Sound of Textというサイトで合成音声を作ったのですが、「using the text to speech engine from Google Translate.」・・・Googleの合成音声のようです。

ライセンスが分からず、個人で楽しむ程度にします。

 

また、九九の答えの入力では、音声入力に対応しており、対話のように解答していけます。

これもGoogleさんの用意してくれた音声認識 (Asynchronous Speech Recognition)APIを使っています。

以下、音声認識のコードだけ抜粋します。

var rec = new webkitSpeechRecognition();
rec.continuous = true;
rec.interimResults = true;
rec.lang = 'ja-JP';
rec.onresult = function(e){
  for(var i = e.resultIndex; i < e.results.length; ++i){
    if (e.results[i].isFinal) {
      var val = e.results[i][0].transcript;
      if(val === "し"){
        val = 4;
      }else if(val === "く"){
        val = 9;
      }
      if(isNaN(val)){
        $rec.text(val + " ?");
      }else{
        $rec.text("");
        $answer.val(val);
        $form.submit();
      }
    }
  }
};

ににんが「し」、さざんが「く」は、数字として認識しないので、「し」⇒4、「く」⇒9に変換しています。

音声認識により、対話している感じが面白いのですが、最終的にこの機能は消しました。

「ろくご・・・」と問題をつぶやいてしまうと、6×5=[65]とご入力されてしまいます。

結局テンキー入力を採用しました。

間違いはどこだ?

このWebアプリは、ローカルサーバーで起動しており、採点結果のデータが指定フォルダに保存されます。

採点データは再テストで利用しやすいよう、JSON形式(ただの配列ですが)で出力しています。

出力結果を見ると・・・

3×7=21を24と答えてます。他にも、

9×3=27が24になってます。

「いち」と「しち」が「し」になってしまう傾向が見られました。

イルミネーションを見ながらクリスマスを過ごせるのか?

クリスマスまでに100点を取り、クリスマスソングを聞きながら、イルミネーションを見ることができるのか?

子供の成長に期待。

obnizでフルカラーLEDテープの制御

あまり制御できなかったのですが・・・参考まで。

JavaScriptでマイコンを動かす

obniz(オブナイズ)」という、素晴らしいマイコンがあります。

JavaScriptを使って手軽に実装できるマイコンです。

開封してネットに繋げば、すぐに使えます。

フルカラーLEDテープを光らせよう

フルカラーLED「WS2812B」が144個連なっているテープを購入。

obnizの公式サイトを見ると、パーツライブラリにWS2812Bの使い方が載っているので、参考にできます。

よく見ると「チェーンの最大は85です。」と書いてありました。それより多く光らせようとしてもエラーが出ます。

144個もいらなかった・・・。

個人的に都合のよい、81個のところで切ります。

電流が足りない

前述のWS2812Bの使い方ページで、サンプルコードの右上にある「Test Run」を押せば、すぐさまLEDを光らせることができます。

サンプルコードの中では、hsvs()が使いやすそうです。[色相,彩度,明度]を配列で並べていけばよいみたいです。([r,g,b],,,,となっていますが)

ピンは0がGND、1が5V、2がカラー制御用。

しかし、81個のLEDを光らせるには電流が足りないので、このまま繋いで実行すると、「heavy output」の警告がでます。

ACアダプターから電源を取ろう

obnizとLEDテープの接続はdin(カラー制御用)のみにして、電源を5V4AのACアダプターから取ることにしました。

これで光ります。

試しに、色相を少しずつ変えて、グラデーションを作ってみましょう。

    led = obniz.wired("WS2812B", {din: 2});
    var color = [];
    for(var i = 0; i < 81; i++){
      color[i] = [i * 3,  1, 0.2];
    }
    led.hsvs(color);

サンプルコードを書き換えて「Test Run」を押します。

だいたい、意図したグラデーションになりました。

・・・だいたいというのは、実行してもすぐに反映されなかったり、一部点灯しなかったり、違う色に光ったり、不安定さがあったからです。

何度か実行すると意図通りに光るのですが・・・。

流れるアニメーションはできる?

不可解な状態ですが、続いてアニメーションを試します。

一定間隔の処理「setInterval」を使えばできそうな気がします。

色の配列の先頭を最後に持ってくる命令を0.1秒ごとに行えば、流れるようなアニメーションになると信じて・・・

    led = obniz.wired("WS2812B", {din: 2});
    var color = [];
    for(var i = 0; i < 81; i++){
      color[i] = [i * 3,  1, 0.2];
    }
    led.hsvs(color);

    var setLed = function(){
      color.push(color[0]);
      color.shift();
      led.hsvs(color);
    };
    setInterval(setLed, 100);

コードを書き替えて実行。

!?

色のグラデーションが無茶苦茶で、処理も0.1秒ごとに実行されず。

色もタイミングもランダムなイルミネーションとなりました。

LEDテープが壊れたのか?

他のLED、WS2812Bの豆電球型が連なったタイプでも試してみました。

これもテープ型と同じ症状だったので、LED側の問題ではないようです。

フルカラーLEDを制御できず。

それでも綺麗だから良いとして、先に進みます。

次回はobnizを使って作ったものを紹介します。

AR.js 自作マーカーの精度は?

WebでARが簡単に作れる(?)時代になったと聞き、WebARアプリを作ってみました。

この記事では、AR.jsを利用し、漢字の自作マーカー(カスタムマーカー)を使った場合の精度について、試行錯誤した内容を書いています。

漢字をそのままマーカーにするのは難しい

OCR(光学的文字認識)並みの精度は、やはり期待しちゃいけませんでした。

「馬」「鳥」「冬」という漢字のマーカーを、それぞれ識別できるか試してみます。

検証結果・・・誤認します。

正しく識別させたいときは、英語と組み合わせたり、レイアウトを変えたり、工夫が必要みたいです。

結果を先に書きましたが、以下、作ったWebアプリと、試行錯誤の内容です。

漢字を楽しく覚えるアプリを作りたい

ある小学生の男の子が、漢字テストで のび太君と同じくらいの点数しか取れません。急に勉強をしなくなったようで、原因もわからず、親も先生も悩んでいました。

男の子は覚える能力がないというより、覚えるモチベーションがないとう印象でした。

解決になるか分かりませんが、紙に書かれた漢字にスマホをかざすと実物が出現するARアプリを開発し、漢字の勉強に関心を持ってもらいたいと考えました。

私自身の技術勉強目的の方が強いですが・・・。

開発に使ったモジュールなど

WebARと言われる、ブラウザでARを実現する素晴らしい技術があります。

HTML、JavaScriptで作れるので、Web系の開発者にはうれしいですし、ユーザーもアプリをインストールする必要がない手軽さがあります。

開発は、AR.jsの説明にA-Frameを使った実装例があるので参考にします。

3Dモデリングについては、自作すると途方もない時間がかかるので、Googleの3Dオブジェクトライブラリ「Poly」から素材を持ってきます。

ただし、Polyの3Dデータは全てAR.js+A-Frameで使えるわけではありません。
読み込めなかったらあきらめて、別のを使います。

また、3Dデータの大きさもバラバラなので、個別にサイズ調整が必要です。

マーカーを作ろう

マーカーに登録する漢字は、勉強用のプリントに載っていた順番で「馬」「鳥」「冬」。まずは3つだけにします。

さっそく「馬」マーカーを用意します。

AR.js Marker Trainingに、画像ファイルをアップするだけです。

できました。

自作マーカーの実装方法は「AR.jsのカスタムマーカーの作り方と動作しない時の解決法」を参考にさせて頂きました。

記事を読む限り「馬」はちょっと認識が難しいかな・・・。

馬を出してみよう

Polyから馬の3Dモデルを拝借して、Webアプリに組み込みます。

そして、httpsが使えるサーバーにアップして、スマホ(iPhone7 ブラウザSafari)で読み込みます。

カメラを立ち上げを許可して、画面を見てみます。

あ、馬が出てきました。

中央の半透明の円に触れると・・・

ひらがなで「うま」と出るようにしました。

意外としっかり認識しているので驚きです。

「鳥」を出そう

続いて「鳥」の漢字の登録です。(使用した鳥の3Dモデルはこちら

スマホをかざします。

あれ?

ダメだ!おまえはうまじゃない。

「鳥」で馬が出てきてしまいます。これでは正しく漢字を覚えられません。

「馬」と「鳥」は誤認するようです。

確かにこの2つは、マーカー的には似ている文字ですね。

漢字と英語の組み合わせ

マーカーに差を出しましょう。

「鳥」の方は、漢字と英語を組み合わせてみました。

さすがにこれなら・・・

いけました。

なんだか鳥の3Dオブジェクトが部分的に欠けています。

どうにもできないので、気にしないで進みます。

「冬」を出そう

最後に「冬」の漢字を登録。(使用した冬の3Dモデルはこちら

「鳥」のマーカーと誤認しなければ良いですが・・・

あ、ダメでした。

「Winter 冬」と「Bird 鳥」のレベルでも、識別はできません。

漢字と英語を逆転させ、配置を大きく変え、別のマーカーに見えるようにします。

これなら大丈夫。

無事、冬も認識し、同時に3つのマーカーも識別することも確認しました。

しかしこの調子だと、同じWebアプリ内で識別できる漢字の数は、そう多くなさそうです。

男の子がアプリ使った様子

3つだけしか漢字はありませんが、漢字の苦手な男の子に使ってもらいました。

ARには興味を持ち、特に冬の3Dモデリングを角度を変えながら熱心に見ています。漢字に目が行ってないので、このアプリは、あまり役に立たないような・・・。

ぜんぜん関係ないが成績は上がった!

結局、漢字WebARアプリの開発は継続しませんでしたが、男の子の成績は驚くほど上がりました。

今では、漢字テストで98%程度の正解率のようです。

男の子のお母さんが、毎日3つずつ漢字を一緒に覚える時間を作り、続けたことが要因です。

お母さん、すごい。

 

無力な漢字WebARアプリだったのですが、せめてマーカー認識の試行錯誤結果くらいは、記録としてここに残します。

ボッチャランプのカスタマイズ

ほぼ需要のない情報ですが・・・

私の持っているボッチャランプは、3つのアジャスタ(ねじ)で水平調整ができるようになっています。

このアジャスタをカスタマイズして、精度より機動性を向上させました。

ボッチャランプは重い

組み立てると10kgあるランプ。

安定感があり素晴らしいのですが、移動や調整が大変。

台車に乗っけて使ってみましょう。

・・・。

いや、これは違う。

かっこ悪い上、台車の厚みで高くなりすぎです。

直接キャスターを取り付ける

水平調整用のアジャスタを取って、キャスターに取り換えてみます。

M6サイズのねじがぴったりです。
(アポワテック販売のBC-JB-501の場合)

レバーで車輪を固定できるキャスターが良いでしょう。

これで動かしやすくなりました。

ランプに触れてもらう機会を増やすために

水平調整を捨ててキャスターに取り換えたのは、レクリエーションボッチャでランプに触れてもらう人を、少しでも増やそうと考えたからです。

実際、何回かこのランプを導入して、レクリエーションボッチャを実施していますが、動かしやすい分、ランプを気軽に使いまわすことができました。

本物のボッチャランプがいい

500円でランプを作ったものの、やっぱり本物のランプがいい。

10万円近くしますが購入しました。
需要がないので、なかなかの値段です。

BC3と幼児の投力が近い

私の身近にはランプを使う選手(BC3)はいません。
一般公開のボッチャイベント用に購入しました。

主に投げる力がない0歳~3歳くらいの幼児に使ってもらいます。

あまりにも小さい子だと、さすがにジャックボールに届くようには投げられず、ボッチャを一緒に楽しむことが難しいな・・・と、課題を感じてました。

たまたま家にあった木製のすべり台のおもちゃを見てたら、幼児(意外と大人も)は、すべり台でボールを転がすことに興味を持つ生き物だと気づき、ランプを導入することにしました。

ボッチャ体験では本物を

500円のランプもは悪くはないですが、できればボッチャ体験イベントで、本物のランプを見てもらいたいな・・・ということで、結構無理しての購入しました。

多くの子供たちにランプが使われ、訪れたBC3クラスの人にも使ってもらえたので、購入意義はあったと思います。

値段分の活躍ができるよう、今後ともイベントに導入します。

ボッチャの指示板を作ろう

ボッチャで、赤、青どちらのチームがボールを投げるか、審判が指示するための板があります。

大きなしゃもじみたいなやつです。

小さな大会やレクリエーションでは、卓球のラケットや、うちわで代用されることが多いのですが、審判のモチベーションを上げるため、しっかり作ることにします。

木を切って、マスキングをして、スプレーして。

卓球ラケットを使っていた時より、気持ちよくジャッジできます。

なお、今はアポワテック社のWeb通販にて、1,500円で簡単に買えそうなので、そちらをお勧めします。。

ジョイントで困ったら3Dプリンター

3Dプリンターは、ジョイント作成で活躍します。

歯車の穴に合う棒がない

ある日、歯車を買いました。

歯車の穴に合う、円筒の側面に突起があるような棒が欲しいのですが、ホームセンターで探しても見つかりません。

なんでこんなものを買ってしまったのか・・・。

ないなら3Dプリンターで作る

歯車の穴に合うジョイントを3Dプリンターで作ってしまいましょう。

とりあえずサイズ微調整のため、短めの型合わせ用サンプルを作っていきます。

ピッタリのものができました。

歯車に差し込む反対側も、例えばモーターの棒の形状に合わせて作成すれば、この歯車を電気で回すことができます。

3Dプリンターは部分的な使い方が良い

試作品や模型を作るとき、すべてを3Dプリンターで作成すると、大きさによっては、なかなかの金額になってしまいます。

量産されている部品を、3Dプリントしたジョイントでつないでいったほうが、安くて早いです。

500円のボッチャランプ

株式会社アポワテックより、ボッチャ用品が手軽に買えるようになりました。

投球できない人が使うランプ(滑り台)が欲しかったのですが・・・スタンダードで税別89,000円。
スロープが透明で、視界を確保できるハイパフォーマンスモデルが420,000円。
需要の問題で高くなっちゃいます。

自分で作ろう

大会で勝つことを目指すなら間違いなくお勧めできませんが、レクリエーション用途であれば、自作でも大丈夫でしょう。

ホームセンターを歩き回って使えそうな材料を調達しました。

材料

  • アングル(L字棒)×2・・・312円
  • なべ小ねじ・・・98円
  • 一文字プレート(4枚セット)・・・98円

合計508円(税別)

作り方

アングルというプラスチックのL字棒に穴をあけます。

ねじ止めするための穴です。

ボールがねじに引っ掛からないよう、できるだけ内側に空けます。

一文字プレートで、2つのアングルをつなぎます。

反対側も同様につなぎます。

支柱の代わりに人が持つ

ランプを介助者が手で持つという仕様です。

子供に渡したら、見事に滑り台の一部となってくれました。
(BC3ルールで介助者がこの向きだと反則ですが)

転がしてみよう

そこら辺の雑貨を的にして、転がりを試してみます。

・・・転がる。そして当たる。

雑な作りですが、意外とスムーズに転がり、しかも狙ったところに行きます。

軽くて持ち運びが簡単なインスタントランプが出来上がりました。

追記

あまりにも見すぼらしいので、スタンダードランプを買いました

その後、持ち運びが辛いので、超軽量ランプを自作しました

分解は頭に良いのか?

世界一の大富豪、AmazonのCEOジェフ・ベゾスは、3歳の時、ベビーベッドをドライバーで分解したといいます。

物の分解は、問題を分解して考え、解決する力(=金を稼ぐ力)が付くかもしれません。

ちょうど壊れた照明があったので、ドライバーとあわせて子供たちに渡しました。

本当は燃えないゴミに出せるくらい小さく分解してほしかっただけです。

手際がいい

ガンガン、分解していきます。

コードも容赦なく抜いていきます。

ハイエナに食われるかのように、部品が次々にはがされていきます。

分解完了

2つの照明を渡したのですが、あっという間に分解完了。

電子部品好きな長男は、すかさず取り外した部品を自分の宝箱にしまいます。

残った円盤は・・・

・・・

お化けとなって襲ってきました。

音声AIは今後重要になる技術

Amazon Echoが家にあります。

初めてアレクサに話しかけるときは恥ずかしかったのですが、すぐに慣れるものでした。

子供にも人気のアレクサ

Amazon Echoの中にいるアレクサと、子供たちが会話しています。

何を間違えたのか、「アレクサ」ではなく、「アノサー」と呼びかける長男。

当然、無視されます。

そして「あれ臭っ!」と叫ぶ次男には反応してくれるアレクサ。

「何歳?」「好きな果物は?」など、さまざまな質問に優しく答えてくれます。

たいていの質問は「分かりません」と返され、子供たちはゲラゲラ笑います。

音声AIは重要な技術

今は家にAIスピーカーが必要とは思っていませんが、音声AIは無視できない、今後必要不可欠になる技術だと思っています。

音声AIはUIとして見ても、複雑な内容を手軽に入力することができるので、多くの人が利用できます。

例えば字を読めない子供、機械を苦手とするお年寄り、手が離せない育児中の親、目の見えない障害者、そして、スマホ操作すら面倒になっていく人々・・・。

そんな人たちが音声AIを使いたくなる場面は、いくつも想像できます。

とりあえずAlexaスキルを作る

今後必要となる技術は、作って理解するのが一番の近道です。
ただ、私はAWSもまともに使えない技術力なので、茨の道になりそうな・・・。

Alexaスキル開発トレーニングシリーズ 第1回 初めてのスキル開発」を見ながら粛々と進め、見事にドメインの問題につまづきながらも、トータル半日くらいでAlexaスキル第1号を開発しました。

ジョナサン・アイブの格言を聞く

「アイブの格言」という練習用スキルです。

アップルのデザイン責任者ジョナサン・アイブの格言を、アレクサがランダムで話してくれます。(上の画像はシミュレーターですが、実機で話してくれます。)

アレクサにかっこいい言葉をしゃべらせたいなと思っただけで、このスキルに、あまり深い意味はありません。

比較的開発しやすい?

まだ言えるほど経験もないのですが・・・Alexaスキルは、比較的開発しやすいように思えました。

音声のUI(フロントの)技術だからか、JSONとNode.jsを使ったフロントエンド寄りの人に優しい作りとなっています。

もう少しトレーニングを積んで、理解を深めていきます。