数字で楽しさ倍増

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

子供に教えるための予習で苦労しましたが、ようやく7セグメントディスプレイを使います。

4桁の数字を表示するディスプレイを使い、センサーなどからの入力値を数字で見られるようにします。

数字表示の2つのメリット

7セグメントディスプレイを使って数字を見られるメリットは、大きく2つあると思います。

1.シリアルモニタ(パソコン)を覗かなくていい

7セグメントディスプレイを利用すれば、もう数字に関しては、パソコンにつなぎながらシリアルモニタを覗く必要がなくなります。

気軽に持ち運べ、簡単に結果を知ることができ、利用の手軽さが格段に上がります。

2.数字を知ること自体の楽しみ

手軽に数字を表示できるだけで、楽しさは倍増します。

昔、ドラゴンボールで「スカウター」という、相手の戦闘力を知ることのできる機械が一大ブームを巻き起こしました。

戦闘力53万とか、強さの度合いを数字に置き換えることで、強烈な印象を与えてくれました。(20年以上たっても、いまだネタとして出てきます。)

距離や力、速さなどが数字に置き換わることは、楽しいものです。

回路づくりに挑む

前置きが長くなりました。回路を作りましょう。

しかし、ネットで検索しても、意外と見つかりません。

つくったブログさんで紹介されている手書きの説明書と、プログラムが分かりやすかったので、参考とさせていただきました。

回路の説明書を印刷します。

長男が見ながら頑張って組み立てていますが、やはり難しいです。

fritzing(一部Photoshop)で描いてみます。

1から12番ピンまで、見事に埋まりました。

アナログ入力0番ピンに受け取る電圧、0から1023を、7セグメントディスプレイに表示させるための回路を作っています。

つまみ型の可変抵抗器を回すことで、数字が変わるはずです。

数字を表示させるプログラミング

以前記事に書いた、1桁ずつ超高速で表示し、4桁の数字が点灯しているように見えるプログラムを書きます。

これも、つくったブログさんを参考にしつつ、いらない桁は非表示(例:0050→50)にするなど、調整しています。

#define led_1 9
#define led_10 10
#define led_100 11 
#define led_1000 12 

int val = 0; // 表示する数字
int val_1 =0; // 数字の1の位 
int val_10 =0; // 数字の10の位 
int val_100 =0; // 数字の100の位 
int val_1000 =0; // 数字の1000の位 

void setup(){
 for (int i=1; i<=8; i++){
  pinMode(i,OUTPUT);
 }
 pinMode(led_1, OUTPUT);
 pinMode(led_10, OUTPUT);
 pinMode(led_100, OUTPUT); 
 pinMode(led_1000, OUTPUT);
}

//7セグの数字
boolean Num_Array[10][8]={
 {1,1,1,0,1,0,1,1}, // 0
 {0,0,1,0,1,0,0,0}, // 1
 {1,0,1,1,0,0,1,1}, // 2
 {1,0,1,1,1,0,1,0}, // 3
 {0,1,1,1,1,0,0,0}, // 4
 {1,1,0,1,1,0,1,0}, // 5
 {1,1,0,1,1,0,1,1}, // 6
 {1,1,1,0,1,0,0,0}, // 7
 {1,1,1,1,1,0,1,1}, // 8
 {1,1,1,1,1,0,1,0} // 9
};
void NumPrint(int Number){
 for (int w=0; w<=7; w++){
  digitalWrite(w+1,Num_Array[Number][w]);
 }
}

void loop(){
 val = analogRead(0);
 val_1 = val % 10; 
 val_10 = val /10 % 10;
 val_100 = val /100 % 10;
 val_1000 = val /1000 % 10;

 digitalWrite(led_1000,1);
 digitalWrite(led_100,1);
 digitalWrite(led_10,1);
 digitalWrite(led_1,0);
 NumPrint(val_1);
 delay(3);
 digitalWrite(led_1000,1);
 digitalWrite(led_100,1);
 if(val < 10){ //10未満なら非表示
  digitalWrite(led_10,1);
 }else{
  digitalWrite(led_10,0);
 }
 digitalWrite(led_1,1);
 NumPrint(val_10);
 delay(3);
 digitalWrite(led_1000,1);
 if(val < 100){ //100未満なら非表示
  digitalWrite(led_100,1);
 }else{
  digitalWrite(led_100,0);
 }
 digitalWrite(led_10,1);
 digitalWrite(led_1,1);
 NumPrint(val_100);
 delay(3);
 if(val < 1000){ //1000未満なら非表示
  digitalWrite(led_1000,1);
 }else{
  digitalWrite(led_1000,0);
 }
 digitalWrite(led_100,1);
 digitalWrite(led_10,1);
 digitalWrite(led_1,1);
 NumPrint(val_1000);
 delay(3);
}

もっとコードを短く整理できそうですが・・・とりあえず、早く動かしてみましょう。

つまみを回すと、0から1023に数字が変わっていきます。

すばらしい!

しかし、喜んでいるのはお父さんだけで、子供たちの反応はいまいち。

未就学児には、最大4桁の数字はあまりに大きすぎ、直感的に捉えられないようです。

あたりまえか・・・。

人の動きを数字に

つまらなかったので、可変抵抗器を人感センサーに取り替えます。

人を感知したら、7セグメントディスプレイに数字が表示されるはずです。

子供が横切ったとき、人感センサーが感知し、数字が表示されました。

 

・・・だからなんだ?という感じも受けますが、ここからが本番です。

次回、人感センサーに他の生き物が反応するか試してみたいと思います。

IoT×プログラミング体育へ

IoT×プログラミング教育 再度振り返りです。

長男(6歳)が熱中しすぎて「引きこもりになりそう」と、お母さんが心配するようになりました。

目を見張る成長

長男の回路知識レベルは、ぐんぐん上がっています。

前にお父さんが断念したフルカラーLEDを、自力で光らせていました。(お父さんがダメなだけかもしれませんが)

4本も足があるフルカラーLED、これを配線や抵抗器を変え、色が変わることを楽しんでいました。

熱中は良いこと?

熱中できるものがあることは、すばらしいと思います。

しかし、晴れの日でも家で電子工作をしたがる状況は、本当に良いのか・・・。

「子供は外で遊べ!」というお母さんの理念にも反しますし、お父さんとしても、外の刺激は発想力を養うのに必要なことと思っています。

あと、将来エンジニアになりたいのなら、心身ともに鍛えておかなければ、継続が厳しいでしょう。

 

IoT×プログラミング体育

IoT×プログラミング教育の方向性を修正し、野外での活動を増やそうと思います。

できれば体を動かしながら学ぶ、体育のようなもの。

例えば、50メートル走で、ゴールにをレーザー光線を設置し、レーザーを遮ると記録が蓄積されるなど。

少し方向性を変え、将来により役立つように調整していこうと思います。

 

余談ですが、長男の将来の夢は消防士と言っていました。

「(防火服を着ると)火の中に入っても熱くないか調べたい」という理由です。

・・・その仕事は、消防士ではないと思うよ。

タブのアクセシビリティ対応

Webサイトのアクセシビリティ対応で、タブUIはどうすればよい?

WAI-ARIAの登場で、明確な対応ができるようになりました。

<ul role=”tablist”>
<li role=”tab”> タブ1 </li>
<li role=”tab”> タブ2 </li>
<li role=”tab”> タブ3 </li>
</ul>
<div>
<div role=”tabpanel”> タブ1コンテンツ </div>
<div role=”tabpanel”> タブ1コンテンツ </div>
<div role=”tabpanel”> タブ1コンテンツ </div>
</div>

roleだけ書き出すと、上記のようになります。

「これがタブである」というマークアップができるようになりました。

実際、スクリーンリーダーで操作するとどうなるか、後ほど試して追記します。

 

7セグメントディスプレイを配線4本で

配線の多さに苦労してきた7セグメントディスプレイですが、adafruit社の「I2C通信の7セグメント4桁ディスプレイ」であれば、なんと配線が4本で済むらしい。

自分ではんだ付けは必要です。

裏面を14か所はんだ付け。最初下の列から始め、ぐちゃぐちゃですが、後半の上の列は、少しコツをつかんできました。

表面も4か所はんだ付けし、ライブラリをダウンロードして、何か数字を表示しようとしたのですが・・・

コンパイル中に、モジュールが見つからないエラーが発生。

調査中。

解決しました。

続:7セグメントディスプレイを配線4本で

7セグメントディスプレイにこだわる

表示の自由度が高い液晶ディスプレイより、数字しか表示できない7セグメントディスプレイの方が、配線だらけになりる事実を知りました。

それでも、7セグメントディスプレイを使いたいです。

7セグメントディスプレイの魅力

なんといっても視認性の良さ!

LEDでくっきり表示される数字は、人を引き付けます。

広告のデザインの話になりますが、数字のフォントを大きく目立たせると、多くの場合、売上が上がります。

それと同様に、ハッキリした数字は人の目につき、同サイズの液晶ディスプレイよりも、作品の魅力を引き上げてくれるはずです。

配線の多さを改善できないか?

ただ、7セグメントディスプレイを1桁ですら、恐ろしい配線の数になってしまいました。

4桁を少ない配線にできないか・・・

先人の知恵がありました!

多いことには変わりませんが、1桁の時の4倍にならずに済む方法があるようです。

4桁とも同じ数字を表示すれば、配線を減らせるという、一見役に立たないような方法ですが・・・

例えば「1023」の数字を表示するとき、

1111
0000
2222
3333

このぞろ目数字の不要な桁のLEDを消し、超高速で表示を切り替えます。

1___
_0__
__2_
___3

人間の目には、早すぎて「1023」と表示されているように見えます。

本当は同時に数字は表示されていないはずですが、点灯し続けているようにしか見えません。

プログラミングでは、1桁ずつしか点灯しないことになっています。

カメラのシャッタースピードを速めると・・・

本当に同時に表示されていませんでした。

人間の目の特徴をうまく使っています。

 

この方法で配線を減らせたおかげで、子供でも、7セグメントディスプレイの回路を作ることができるかもしれません。

 

 

 

7セグディスプレイも甘くなかった

前回、液晶ディスプレイの配線が多く、嫌になりました。

まずはシンプルに数字だけ表示できれば良いので、7セグメントディスプレイを使います。

デジタル時計で見かける、0から9を表示するディスプレイです。

7つに分割した線を光らせ、数字を表していることから「7セグメントディスプレイ」というのでしょう。

LEDだから抵抗が必要!?

使い方をネットで調べると・・・

手元にある7セグメントディスプレイは、LEDで光らせているようで、回路には抵抗器が必要になります。

そのままですが、7つも抵抗器が必要になります。

すごい配線になりそうな・・・

とりあえず子供にたちに、せっせと回路を作ってもらいます。

できました・・・

もはや、配線が邪魔で、数字がよく見えません。

液晶ディスプレイのほうが、まだ配線が少なかったような気がします。

しかも、1桁でこの配線。桁数を増やしたらどうなることだか!?

 

ディスプレイでの表示は、簡単にはいかないようです。

液晶ディスプレイ動作確認

前回はんだ付けした液晶ディスプレイが、本当に動作するのかチェックします。

回路とプログラムは、ネットで参考になるものを探し、試してみると・・・液晶ディスプレイに「hello world」の文字が!

無事動作を確認しました。

はんだ付けは、そこまで恐れる必要はなかったのかもしれません。

液晶ディスプレイの前に

それにしても、液晶ディスプレイの接続は、ジャンパーワイヤーが多すぎます。

まずは、数字さえ表示できれば良いので、今度は「7セグメントディスプレイ」を使ってみようかと思います。

 

 

はんだ付けは避けられない

Arduino拡張キットを買ってから気づきました。

注意事項「はんだ付けが必要となる箇所があります。」

次のステップへの関門

電子工作の幅を広げるためには、はんだ付けは避けられないようです。

あきらめてはんだ付けセットを購入しました。

 

液晶ディスプレイの基盤にはんだ付け・・・

できるイメージがわかない!

左下に並んだ穴に、ピンを差し込み、はんだ付けをするのですが、ピンとピンが近すぎます。

安い部品で練習

100円くらいのユニバーサル基盤を購入し、余りそうな抵抗器、LEDなどを練習ではんだ付けします。

美しさの欠けらもない。

熱で金属を溶かす、緊張のはんだ付けですが、想像と違いました。

もっとゆるやかに金属がドロッと溶けていくのかと思っていましたが、突然水のように金属が変化します。

本番はんだ付け

練習は終わりました。本番です。

もう・・・ショートしていなければ、それでいいです。

mainタグでスキップリンク

Webサイトを音声ブラウザ、スクリーンリーダーに対応させるコーディング方法は、時代とともに変わっていきました。

今回は、ページヘッダーを読み飛ばして、本文から読み上げるためのコーディング技法を振り返りながら、結局今はどうすればいいか考えます。

※2020年11月7日追記・編集

スキップリンクの最新の情報や考察をまとめました。

スキップリンクの時代

テーブルレイアウトからCSSレイアウトへ変化しだした2006年ごろだったと思います。

Webサイトの読み上げを想定して、コードの中に「本文へ移動」という隠しリンクを設置していたころがありました。

スキップリンクと呼ばれるものです。

CSSで読み上げ用のリンクを隠して、アクセシビリティを上げられる手法は、衝撃的だったのを覚えています。

role=”main”の時代

HTML5の時代となってから、状況がかわりました。

WAI-ARIA のランドマークの登場です。

本文のタグにrole=”main”を指定すれば、スキップリンクと同様の効果を発揮すると噂され、私もスキップリンクを実装するのをやめました。

W3Cがmainタグにrole=”main”を付けることを推奨したことで、<main role=”main”>という、コードが世の中に広がていきました。

mainタグのみの時代

<main role=”main”>の記述が見直され、<main>だけで良いと考えられるようになりました。

W3CのARIA項目では、<main role=”main”>という書き方は、するべきではない「Implicit ARIA semantics -should not be used」・・・と、書かれています。
(2017年3月現在)

W3C仕様書の矛盾で若干混乱しましたが、現在は単純に<main>だけで良いようです。

仕様上は、<main>だけでmainランドマークとして機能するため、わざわざスキップリンクを実装する必要がありません。

WAI-ARIA のランドマークは普及していない?

仕様と現実に差はないでしょうか?

実際に視覚障害者へ話を伺うと、ランドマークが楽だという話と、ランドマークって何?という話、両方聞きます。

スキップリンクがあったほうがいいという意見があり、悩ましいですが、まだmainランドマークだけに頼るのは早い印象でした。

結論は、スキップリンクを実装するべき。

もちろん、スキップするものがなければ実装不要です。

スキップリンクの最新の情報や実装方法はこちらにまとめています。

テーブルレイアウトでアクセシビリティ確保

HTMLコーディングとアクセシビリティのお話しです。

官公庁のサイトをコーディングする際、厳密なレイアウトを求められることがあります。

「こことここの文字を揃えて、ここの中央にこの文字がくるように・・・」

テーブルレイアウトにしてしまえ!と、思ってしまいますが、官公庁のサイトを作る上で、アクセシビリティは無視できません。

WAI-ARIAを使う

複雑なレイアウトをCSSを駆使して組むこともできますが、サイトを運用する人のスキルでトラブルが起こりやすくなります。

そこで、選択肢としてWAI-ARIAを使うのが良いのかなと、最近思い始めました。

<table role=”presentation”>と指定することで、スクリーンリーダーなどで使われるアクセシビリティAPIに、「これはレイアウト目的のテーブルで、表ではないよ」と、伝えます。

<table role="presentation">
 <tr>
  <td>このテーブルは</td>
  <td>レイアウトのために</td>
  <td>使われているので</td>
  <td>tableタグを無視してください</td>
 </tr>
</table>

多用したくはないですが、重宝とする場面は出てきます。