ユニバーサル社会で役立つデザインや技術の研究
昨日、長男が工作中していた車から煙りが上がりました。電池４本をつないだのが１つの原因。安全を考えると、回路をリレーで分解して、電池２本の３Vを最大電圧にするのが良いかもしれません。
micro:bit（子供向けマイコン）でプログラミングを出来る長男が、２つのmicro:bitを使ってラジコンカーを作っています。
しかし、モーターの扱いは意外と難しい。
昨日はモーター２つに電池４本を繋いで、煙が上がりました。
私の感覚（ミニ四駆の経験）だと、電池２本までなら大丈夫だそうなので、モーター１つと電池２本のセットを２つ作ることを提案しました。
回路図は正確に書けないので、車の回路のイメージ図です。
リレー回路を２つ使います。
電子工作初心者に、リレーはとても分かりやすい。
リレーは回路をつなぐスイッチ。micoro:bitからリレーに３Vの電圧をかけると、回路がつながりモーターが回る想定です。
手元に３Vリレーがないため、Amazonoで注文。
長男の好奇心が旺盛なときに残念ですが、一時工作は中断です。
続きはまた今度。
最近、クッキースタンプ装置を作っています。その装置が自走できるようにしたいと考えています。長男に自走用の車を作ってもらいました。組み立て後、テスト走行させると、煙が上がりました。
amazonで買った「The perseids 2WDロボットスマートカーシャーシ」。
電子工作で、自走させたいときに使う車です。
中国製で安い分、説明書が分かりにくい・・・。
しかし、組み立てが得意な長男は、ささっと車を作り上げました。
単３電池を４本入れて、長男が車を走らせます。
直線に走り、机の脚で、くるっと回る！？
マイコンも積んでないのに、トリッキーな動きをする。
スゴイ！
しばらくすると、車から煙が上がりました。
急いで電源を切るように、長男にいいました。
「熱ち！」
どこか、熱いところに触ったようです。
見ると、電池ケースが溶けています。
本来はマイコンに電池をつないで、そこからモーターを制御する使い方です。
６V をモーターにつないじゃダメですね。
煙が上がったり、熱かったり、電源の扱いには注意が必要だと、良い経験になりました。
重度障害者の笑顔を、仕事にする仕組みを考えています。カメラで笑顔を認識して、インターネット経由でクッキーにスタンプを押す仕組みです。笑顔には人生を幸福にする効果があると言われます。
昔、東京大学の暦本純一先生の講演で、笑わないと開かない冷蔵庫を作った話を聞きました。（動画はこちら 2:01から）
アメリカの心理学者、ウィリアム・ジェームズ先生の研究がもとになっており、作り笑いをするだけでも、精神状態にプラスの影響を与えることが分かったそうです。
だから笑わないと開かない冷蔵庫のように、生活の中に無理やり笑いを組み込んだとのこと。
とても印象に残るお話でした。
改めて、暦本先生のお話に出てきた、ウィリアム・ジェームズ先生について調べました。
すると、ジェームズ先生の興味深い名言が見つかりました。
楽しいから笑うのではない。笑うから楽しいのだ。
We don’t laugh because we’re happy – we’re happy because we laugh.
happy・・・幸福を感じるのは、笑うといった行動の結果だというのです。
他にも、気になる名言として、
自分の行ないが変化をもたらすかのように行動しなさい。それが変化をもたらすのだ。
Act as if what you do makes a difference. It does.
やはり、行動が先行するというお話です。
もう、100年以上前に亡くなられたウィリアム・ジェームズ先生の言葉です。しかし、激変する現代社会では、非常に重要な真理になる言葉だと思います。
コロナなどの社会の激変に対し、受け身にならず、状況を好転させたいなら自分が行動して変えていく。
勇気はいるものの、必要なことでしょう。
笑顔の効果は、実際試して見ればいい。笑うか笑わせるか行動しよう・・・というのが最重要ですが、もう少し笑顔の効果についての知識を、深堀したいと思います。
こちらのnoteを引用させて頂きます。
笑顔のもたらす効果 〜【嬉しいから、笑う】のではなく【笑うから、嬉しい】ことが訪れる〜
◾️効果１：幸せホルモンの分泌促進 & ストレス解消
◾️効果２：記憶力UP
◾️効果３：新陳代謝の促進
◾️効果４：自律神経が整う
◾️効果５：免疫力が高まる
◾️効果６：美容効果UP
いいことだらけですね。
自分にとってだけでなく、周りも笑顔の人と接したほうが幸せでしょう。
とはいえ、私のようなPC画面と向き合って、何か作っているのが好きなタイプに、笑顔はつらい。
笑うことでストレスが溜まる人がいることも、十分理解できます。
だからこそ、冒頭で紹介したスマホに向かって笑うような、対人を最小限にしたり、機器の操作として機械的に笑う仕組みを考えています。
お母さんの退院祝いに、文字入りクッキーを作りました。「おかあさん たいいん おめでとう」。３Dプリンターで作ったスタンプをクッキーに押してみると・・・鏡文字！？失敗しました。
子供たちがお母さんのためにクッキーを作ります。
生地をこねて、伸ばして、ハート型にくりぬきます。
次男がモデリングしたスタンプです。英語の方は私が作っています。
これをクッキーの生地に押し当てます。
どれだけキレイにスタンプのあとが付くか、ドキドキする瞬間です。
スタンプを上げた瞬間、びっくり！
文字が鏡文字になりました。
いや、考えれば当たり前ですが、もう仕方ない・・・。
焼きあがったクッキー。
日本語が若干読みにくかったです。予備で作った英語の方が、単純な形状で、やはり読みやすかったです。
・・・いや、どちらにしても、反転して読みにくいです。
スタンプは鏡文字で作るという原則を、子供たちと学べました。
ただ、文字に関係なく、お母さんは喜んでくれたので良いでしょう。
笑顔でクッキースタンプを押す装置を作りました。スマホのカメラに向かっ笑うと、スタンプが押されます。途上国の重度障害者が使うことを想定して開発しています。
途上国で重度障害者に会いました。（経緯は省略します。）
手足は自由に動かないものの、素敵な笑顔をしたので、笑顔を使って仕事を何かできないか考えました。
その重度障害者の住む家の近くに、クッキー作りをしているカフェ（日本のNGOが経営）があります。そこでクッキースタンプを押す仕事ができないかを考えています。
笑うたびにクッキーにスタンプが押される仕組み。
ちなみに、笑顔は不思議で、例え作り笑いでも、笑うことで体に良い効果があると言われます。ナチュラルキラー細胞（免疫細胞）が活性化させる話は有名かもしれません。
仕事で社会の役に立ち、笑うといった行動が、その人の人生を良くするだろうと、考えています。
途上国ではAndroidのスマホが普及しています。iPhoneは高級機種で、途上国で使ってもらう場合はAndroidで動く仕組みを考えます。
また、笑顔を認識するクラウドAPIを使ってしまうと、途上国で働いた給料よりAPI課金料金の方が高いという本末転倒な状況も起こり得るため、JavaScriptを使った表情認識、つまりスマホのブラウザ上だけで表情を解析します。
スマホのカメラで笑顔を解析し、IoTボード「Obniz」に命令を飛ばし、クッキースタンプを押します。
検証端末はマニアックすぎる「Unihertz Atom」。
1年前のミドルレンジ（普通）の性能だと問題なく動き、まだ余裕を感じます。
もう少し、スペックの低いスマホでも動作するか検証します。
18日間入院していたお母さん（妻）が今日、退院しました。検証を兼ね、退院祝いにこのクッキースタンプを使います。
お母さん入院から17日目。予定より早く、明日退院となりました。退院祝いにクッキーを焼きます。３Dプリンターで「おかあさん たいいん おめでとう」のクッキースタンプを作ることにしました。
クッキースタンプは、子供向けのCADソフト「Tinkercad」でモデリングします。小2の次男が作ってくれました。
そして３Dプリンターで印刷します。
40分で出来上がり。
金のフィラメントを使っています。
衛生面を考えると、汚れが分かりやすい白の素材が良いでしょう。
今回のような「おかあさん たいいん おめでとう」は、１回しか使わない・・・何度も使わないことを願うので、何色で印刷しても問題ありません。
日本語は形が少し複雑で、「あ」とか「め」が、しっかりスタンプされるか分かりません。
念のため英語版のクッキースタンプも作ります。
「Welcome home mom!」（おかえり、お母さん！）
視線操作のクッキースタンプ装置に脱着できるよう、裏側にペンチで磁石を埋め込みます。
あまり力を入れすぎると、スタンプの文字が破損してしまいます。
破損を極力防ぐため、文字側に雑誌を挟んで力を分散させます。
作ったスタンプを、磁石でパチッと取り付けます。
脱着簡単で、スタンプの種類を増やしていくのも簡単です。
クッキーは明後日の祝日に焼こうと思います。
ブラウザだけで表情認識をできる「face-api.js」を使います。クラウドAPIサービスと違い、課金の心配はありません。今回は笑顔のスコアをメーターで表すWebアプリを作ってみます。
カメラ映像から顔を検出し、笑顔のスコアをメーターで表すWebアプリです。
上のサンプルでは、カメラではなくフリーの動画素材を使っています。pixabay.comに掲載されていた笑顔の少年を使いました。
少年は軽々、笑顔100％のスコアをたたき出しています。
カメラに向かって自分の顔で試したときは、けっこう頑張らないと笑顔100％のスコアは出ませんでした・・・。
よい、笑顔のトレニンーグになります。
「face-api.js – ブラウザでの顔認識を行うJavaScript API」を参考にさせて頂きました。導入から顔認識モデルの説明に至るまで、詳細な情報が掲載されています。
私は、face-api.jsのファイルの中から、必要なものだけ自分の開発環境に移しました。下記の構成で配置しています。
|
1 2 3 4 5 6 |
face/ ├ js/ │ ├ main.js │ ├ face-api.min.js（face-api.js/dist/から持ってくる） │ └ weights/（face-api.js/weightsから持ってくる） └index.html |
main.jsとindex.htmlに、コードを書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<html> <head> <title>笑顔メーター</title> <style> #cameraArea { position: relative; max-width: 640px; margin: 0 auto; } #canvas { position: absolute; left: 0; } #emoticonBar { position: absolute; top: 0; right: -30px; width: 40px; height: 480px; border-right: #DDD solid 6px; } #emoticon { position: absolute; bottom: 0; right: -24px; width: 40px; height: 40px; border-radius: 50%; background-color: #CCC; text-align: center; font-size: 24px; line-height: 40px; transform: rotate(90deg); transition: bottom 0.3s; } </style> </head> <body> <main> <div id="cameraArea"> <video id="camera" width="640" height="480" playsinline muted autoplay></video> <canvas id="canvas"></canvas> <div id="emoticonBar"><span id="emoticon">:|</span></div> </div> <script src="js/face-api.min.js"></script> <script src="js/main.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
const FACE = {}; FACE.EXPRESSION = () => { const cameraArea = document.getElementById('cameraArea'), camera = document.getElementById('camera'), canvas = document.getElementById('canvas'), emoticon = document.getElementById('emoticon'), ctx = canvas.getContext('2d'), canvasW = 640, canvasH = 480, intervalTime = 500, emoticonTxt = [':)',':|']; const init = async () => { setCanvas(); setCamera(); await faceapi.nets.tinyFaceDetector.load("js/weights/"); await faceapi.nets.faceExpressionNet.load("js/weights/"); }, setCanvas = () => { canvas.width = canvasW; canvas.height = canvasH; }, setCamera = async () => { var constraints = { audio: false, video: { width: canvasW, height: canvasH, facingMode: 'user' } }; await navigator.mediaDevices.getUserMedia(constraints) .then((stream) => { camera.srcObject = stream; camera.onloadedmetadata = (e) => { playCamera(); }; }) .catch((err) => { console.log(err.name + ': ' + err.message); }); }, playCamera = () => { camera.play(); setInterval(async () => { canvas.getContext('2d').clearRect(0, 0, canvasW, canvasH); checkFace(); }, intervalTime); }, checkFace = async () => { let faceData = await faceapi.detectAllFaces( camera, new faceapi.TinyFaceDetectorOptions() ).withFaceExpressions(); if(faceData.length){ const setDetection = () => { let box = faceData[0].detection.box; x = box.x, y = box.y, w = box.width, h = box.height; ctx.beginPath(); ctx.rect(x, y, w, h); ctx.strokeStyle = '#76FF03'; ctx.lineWidth = 2; ctx.stroke(); }, setExpressions = () => { let happy = faceData[0].expressions.happy, color = happy * 150 + 100; emoticon.style.bottom = (canvasH - 40) * happy + 'px'; emoticon.style.backgroundColor = `rgb(${color}, ${color}, 100)`; if(happy > 0.5){ emoticon.innerHTML = emoticonTxt[0]; }else{ emoticon.innerHTML = emoticonTxt[1]; } }; setDetection(); setExpressions(); } }; init(); }; FACE.EXPRESSION(); |
今さらながら、ES6のJavaScriptを初めて書きました。文法が怪しいのでご注意ください。
表情解析は、端末負担を軽減させるため、0.5秒おきに行います。
もし、顔の検出ができたら□で囲い、さらに笑顔のスコアを取得して、右の笑顔メーターに反映させます。
ブラウザで表情解析が完結するお手軽さが、素晴らしいです。
笑顔を認識したくなった経緯です。
昨日視線操作クッキースタンプというものを作りました。重度障害者が目で操作して、クッキーにスタンプを押す装置です。今度は目ではなく、表情で操作できるようにしました。
笑顔をトリガーにして、クッキーにスマイルスタンプを押します。
笑顔でクッキーを作れればと。
重度障害者がクッキー作りに参加できる仕組みを考えています。手は動かさず、視線だけで機械を操作し、クッキースタンプを押す仕組みを作りました。うまくいくか・・・自宅で子供たちと試します。
今回、作った装置です。
WindowsPCに、視線入力装置「Tobii Eye Tracker 4C」を取り付けています。これでPCを目で操作できます。
クッキースタンプの操作画面は自分で作る必要があります。
「▲」「▼」でスタンプを上げる、下げるという簡単なものを作りました。
スマイルマークのスタンプ。モデリングも簡単。まずはこれで試してみます。
スタンプの裏側に穴を空け、磁石を埋め込みました。
磁石で脱着式にすることで、洗いやすく、他のスタンプへの取り換えも簡単になります。
スタンプが昇降する装置も３Dプリンターで作っています。動力のサーボモーターをObnizで制御しています。ネットを介して操作するため、離れた場所でも操作できます。
自宅からでも、病院からでも、世界の反対からでもスタンプを押せます。
なお、このスタンプ昇降装置は、前に作ったネコ型スパイカメラを分解して再構築しました。
このスタンプ装置は、カメラ用のアームに取り付けています。
焼き上がりのクッキーには、しっかりとスマイルが刻まれました。
OKです！
次は、文字をスタンプしてみます。
絵本の読み聞かせWebアプリを作っています。しかしiPhone対応でハマっています。読み上げてくれない・・・。どうやらiPhoneでは、ユーザーのボタン操作直後でなければ、Web Speech APIで読み上げてくれないようです。
絵本を読み上げるために、カメラで撮影した画像をCloud Vision APIに渡し、戻ってきたOCRの結果を、Web Speech APIで読み上げます。
Windows10 Chromeや、Android9 Chromeでは問題なく読み上げましたが、iPhone7(iOS13) Safariでは、読み上げてくれません。
iPhoneの場合、ユーザーがボタン操作した後、他のAPIを挟まず、Web Speech APIを呼ばないといけないようです。
Webアプリの画面右下あたりに、再生ボタン「▶」を設置しました。
「●」でカメラを撮影し、「▶」で読み上げ。
とりあえず再生ボタンを作ることで、Web Speech APIで読み上げはできるようにはなりました。
ただし、iPhoneが消音モードになっているとしゃべりません。ご注意ください。
デバッグ中に作ったコードを貼り付けます。
ボタンを押して話す命令と、タイマーで1秒後に話す命令だけを書いた、シンプルな検証用HTMLです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Web Speech API 検証</title> </head> <body> <h1>Web Speech API 検証</h1> <div> <textarea id="textarea">吾輩は猫である。名前はまだ無い。</textarea> <form> <button type="button" id="speech">話す</button> </form> </div> <script> var uttr = new SpeechSynthesisUtterance(); var speech = function(text){ uttr.text = document.getElementById('textarea').value; uttr.lang = 'ja-JP'; window.speechSynthesis.speak(uttr); } // クリック後は話す document.getElementById('speech').addEventListener("click", function(){ speech(); }); // タイマーで話すことはできない setTimeout(function(){ speech(); }, 1000); </script> </body> </html> |
Windows Chromeで開いて試してみると、ボタンを押した方だけ再生されます。
タイマーで1秒後に話す命令は、下記のようなエラーが出ています。
|
1 |
[Deprecation] speechSynthesis.speak() without user activation is no longer allowed since M71, around December 2018. |
ユーザーのアクティブ化なしのspeechSynthesis.speak()は、2018年12月頃に許可されなくなりました。とのこと。
ユーザーのアクティブ化・・・クリック、タップ、キー入力など、何かユーザーが操作しない限り、Web Speech APIは使えないようです。
ユーザーの意図しない音を、突然鳴らさない配慮です。
iOSはWindowsやAndroidより、ユーザーアクティブ化の条件が厳しいのでしょう。ユーザー操作の後、別のAPIを挟んだりすると、アクティブ化が無効になるようでした。
絵本読み聞かせWebアプリを試作し、さきほどテスト評価を行いました。スマホで使うとあまりに意味不明な読み上げになってしまい、散々な結果でした。PCでは精度高く読み上げるのに・・・。
私の代わりに絵本を読んでくれるWebアプリです。普通のWebサイトと同じでブラウザで動きます。
カメラで撮影した絵本の文字を読み上げます。（絵本以外も読めます。）
核となる技術は、Cloud Vision API（OCR）と、Web Speech API、あとはカメラを使えるgetUserMedia APIとなります。
レスポンシブWebデザインで作っており、スマホでもタブレットでもPCでも操作はできます。しかし、大きな問題が２つ。
OCR精度が低いのは、Cloud Vision APIに渡す画像の解像度が低くなっているからだと思います。
処理としては、カメラ映像表示 → canvas転写 → BASE64エンコード → Cloud Vision APIに渡す流れで、このどこかのコーディングに問題がありそうです。
スマホはダメですが、PCでは比較的正しく読み上げてくれます。
ごんぎつねの一節を読ませてみると、「ごん」が「こん」になっているくらい。
良い精度です。
Webアプリは着手が簡単なのですが、最終的にブラウザ、OS依存との戦いになります。
ここからの道のりが長い・・・。
幸い、変な読み上げをするWebアプリを、長男が喜んで使っており、本来目的とは違いますが好評です。
本来目的で使えるよう、引き続き頑張ります。