かならずお読みください→
上の黒い四角をクリックすると点滅します。
もう一度クリックすると止まります。
赤点滅おもちゃをこのページに組み込んでみました。
前回はスマホの画面を点滅させるアプリを使い、対象の方の「覚醒を上げ外界への注意を促す」ことについて紹介しました。
しかしこの種の仕事では、うまくいくこともまたうまくいかないこともあります。うまくいかない場合には、アイデアと創意工夫をこらして失敗の原因を改善して再挑戦する、世間でよく言われる、『PDCAサイクル』のやり方が必要になります。つまり手を変え品を変え次々と挑戦できる準備が必要です。またこどもさんが相手では、どうしても飽きやすいですからそのためにも予めネタの準備や蓄えも大事です。この問題に対して、市販品で何とかしようとするととかく費用で苦労します。また手作り品では人手不足と種類不足と数不足と時間不足の苦労がいつもついてまわります。
スマホを点滅させるアプリは、もう何人かの方がお使いになっているようです。今後さらに多くの人がご使用になってもとくに私は忙しくならない工夫がしてあります。職場のサーバーが不眠不休で動いていますので、アプリ配布の仕事は他の仕事のついでにやってくれています。
みんなで大勢で力を合わせ汗もかいて目標に向かって努力するのも結構なのですが。ひとりひとりが忙しいならなおのこと、仕事のやり方の工夫も必要だと思います。
さて今回は、まずスマホ点滅アプリの概要について説明します。そのなかで改良改善や創意工夫について追加して説明したいと思います。
スマホ赤点滅アプリを起動すると、はじめに画面が黒くなります。そこで画面をクリック（スマホではタップ、以下省略）すると画面が赤くなりその後一秒間隔で交互に赤、黒と点滅します。その状態で画面をクリックすると画面は黒くなり点滅は終了します。スマホ黄色点滅アプリでは黄黒点滅をスマホ緑点滅アプリでは緑黒点滅をします。
ここでは上のような働きを実現する仕組みについて考えてみましょう。
まず、画面に色を表示する方法を考えます。この基本がおろそかでは先々苦労します。どんな色でも部分的にも画面全体にも自由に表現したいですね。これが第一目標です。JavaScriptではCanvas要素を使うとこのようなことができます。
次の段階では画面クリックで色表示をするようにします。これができたらまた工夫してクリックごとに色が変わる仕組みも作ります。ここでクリックが自由に使えると表現方法に幅ができます。また操作も簡単でわかりやすくなります。これが第二目標です。 ここまででクリックするたびに点滅させることができるようになりますがこれでは指が疲れます。また手動では正確な点滅ができず判断に困るケースも起こるかもしれません。
そこでもうひと工夫して、正確な時間間隔でしかも自動で点滅するようにします。これが第三目標です。
このようにステップバイステップで部分的に作って少しづつ目的に近づいていくと失敗と無駄が少なくなります。また目標達成のためのこのような仕組みを『アルゴリズム』といいます。ちいさいおともだちはまだ覚えなくてもいいです。
このような準備を踏まえて下記のファイルindex.htmlを作りました。
<!DOCTYPE html>
<html>
<head>
Blink Red Light
</head>
<body onload="draw();">
</body>
</html>
このアプリはwebアプリですから、ホームページ作成で使用するhtml言語で作っています。（いまご覧になっているページも同じくhtml言語で作っていますので、このページのトップに赤点滅アプリと同じものをくっつける事ができます） 何しろコンパクトなアプリですので、通常は外部ファイルにして読み込むことも多いStyleSheetもプログラム本体のJavaScriptもhtmlのなかに、<style>, <script>タグで埋め込みました。これで全体で80行程度の大きさにおさまりました。
それでは、少し説明します。
はじめの方は、htmlのお約束、お決まりの行で始まります。
6行目はスマホ使用時の設定です。
参考にしたサイトのURLをメモとして残しています。後々役に立ちます。
11行はタイトルです。表示するとブラウザのタブに表示されます。スマホでは表示されません。
12行目のまで全体の半分以上が JavaScript 言語のプログラムで、色や動きなどが書かれています。
69行目から78行目まで表示スタイルが記載してあります。とはいえここではcabvasしか使っていませんので中身は少しです。
何が書いてあるかというと、canvas要素は1ピクセルの実線で境界線で囲む。ブロックとして定義し、幅は画面の100%、高さも同じ。マージンもパディングもゼロ。つまり画面いっぱいにcanvasが設定してあります。画面に一部に色をつけたいときは、ここを書き換えるとできます。
80行目から82行目まで表示内容が記載されています。
何が書いてあるかというと、canvasというなまえのcanvasを表示せよ。その前に関数draw()を動かせ。ただそれだけです。プログラムはここから動き始めます。
関数 draw()は16行から21行目まで書いてあります。
17行目は、これからcanvasに2次元描画をするぞという意味です
18行目にはdrawが始まったとコンソールに文字を表示します。パソコンでプログラムの動きを監視できます。スマホではできません。
19行目では色をカラーコードで指定しています。 rgb(0, 0, 0)は黒です。ちなみに rgb(255, 0, 0) は赤で、 rgb(0, 255, 0) は緑です。かっこの中には0から255の3つの数字が入ります。これで16777216種類の色を表現できます。これだけたくさんなら通常の用途には不足することはまずないでしょう。
20行目では、前の行で指定した色を塗る座標を指定しています。通常画面の左上が原点で右方向にｘ、下方向にｙと定義されています。この場合は画面左上から、300ドット、下に300ドットの位置に色を塗ります。しかしcanvasは画面全体に設定してありますので、結果として画面全体がこの色になります。このように、17，19，20行が画面を黒くします。数字を変更すれば 別の色に変えることもできます。
これで第一目標が達成できました。
さて draw()の下にほとんど同じ draw2() と draw3() があります。まず draw3() をみるとなんと、中身は draw()と全く同じです。だから働きも同じ、画面を黒くします。次に draw2() をみるとまず色が違います。黒ではなく赤です。もうひとつ違うところがあります。28行です。これは、1000ミリ秒後に draw3() へ行けと書いてあります。つまり draw2() に来ると画面が赤くなり1秒（＝1000ミリ秒）後に黒くなります。これで第三目標の半分が達成できました。
ここまではピタゴラ装置アカデミア中級編でした。ここまでおわかりになりましたか。
つぎはちょいむずの上級編に進みます。
38行目から66行目はひとかたまりです。
38，39，40行でcanvas（ここでは＝画面です）をクリックしたら、ここに飛んでこいと書いてあります。
41から53行ではクリックした位置の座標値を求めています。この部分は点滅するスマホのアプリとは無関係です。もし将来タッチする場所によって動きを変えたくなったり、タッチの位置の正確さを評価したくなったときに使うための秘密（？）兵器です。きちんと動きますのでよろしかったらお使いください。
これで第二目標がほとんど達成できました。
変数c1は、13行目で0にしてあります。
56行目ではc1を＋1しています。つまりクリックするたびに1づつ増えます。
クリックするたびに、0, 1, 2 と増えて行きますが、63,64,65行目でc1が2以上になると0になります。つまりクリックするたびにc1は 1,2,1,2,を繰り返します。55行目では0,1と変わるのを確認できます。
c1が1のときは58行目をやります。2のときは61行目をやります。
58行目は、2000ミリ秒（＝2秒）ごとに draw2() を実行せよと書いてあります。
61行目にはそれを停止せよと書いてあります。
draw2() は前にみたように、画面を赤くして1秒後に黒くします。これを2秒ごとに実行すると、1秒ごとに赤黒を繰り返すことになります。これで第二目標は達成できました。
以上をまとめると、目標どおりクリックするたびに赤黒点滅と黒い消灯画面を交互に繰り返しすことができるようになりました。
画面の表示色は1600万色以上から自由に選べることはもう説明しました。また点灯消灯時間は1000分の1秒刻みで自由に設定できることもおわかりになったと思います。これでかなり自由にかつ正確に動くものが手作りできます。これで、「今週は疲れ気味だから、2%速度を下げよう」とか「先々週の同じ曜日より5%いいね」などとわかるようになります。
ある重度麻痺の方は、午前中は調子が良くて午後は悪くなり夕方はまるでだめになるとか月火水と調子が上がり木金で下がるといった、結果に波があることがわかりました。そのため難しい訓練は調子のいいとき合わせてスケジュールできるようになりました。
また「前はできたのに今日はできない。。。」「今日は金曜ですから気にしないでください」調子が悪いときはうまくできなくて当たり前だと気づき、余分な悩みがなくなりました。
正確に動く課題を使うとこのような比較が可能になります。人間業（わざ）では太刀打ちできない世界です。（文明開化みたいなものです）
とはいえ、自由と責任はいつもペアになっていることも忘れてはいけません。
このような分野の仕事をしている人たちやこのページをご覧になる人たちのほとんどはすでにご存知のことだと思います。しかし若い人はもしかして初めて聞く話かもしれませんのですこし説明します。
ある特定の周波数域のある特定の色の光の点滅を見ると体調を崩したり最悪の場合は光過敏性発作を起こし救急搬送が必要になる場合があります。これは体調の優れないひとや関係する疾患のある人の場合に危険性はさらに高まると考えられます。これまで国内外を問わず映画やテレビ番組による集団発作の事件が発生しています。（参考URL、ポケモンショック参照）その結果、それまで普通に生活して健康と思われていた人も含め一定割合のひとがこのような被害に合いやすいことがわかっています。
今回紹介しているアプリはパトカー回転灯の周波数よりもさらに低い周波数、0.5Hzで点滅させています。一般生活で見かけるイルミネーションも高周波数の光の点滅に弱い人への配慮と注意がなされています。今回紹介している技術を活用しようとする方は、被害が起きないように起こさないように、自分の責任で配慮、努力する必要があります。
「そんなこと習っていないので知りませんでした」はおとなでは多分もう通用しないと思います。また被害に会われた方々とそのご家族は許してくれないと思います。
学校で習ったことだけでその先を生きていくのは簡単ではありません。ですから大人になっても自分でがんばって勉強していかないといけないのです。
またがんばるのがつらいとか責任を問われるのがいやだとか時間がないとかいう理由で昔ながらのやりかたを続けていても、やがて行き詰まってやっぱり許してもらえないことになるのが、とかくありがちな現代のパターンなのです。
2023/03/31 公開
研究企画課リハ工学科にもどる
←もくじはこちらです