本能のままにボタンを押す!

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

ボタンを押して、LEDが光る仕組みを作ります。

子供はなぜ、ボタンを押したくなるのか?

子供たちにとって、バスのボタンや信号のボタンを押すことは、争奪戦になるほど魅力的なことです。

私も幼少のころ、弟と競った覚えがあります。

なぜボタンを押したくなるか分かりませんが、人はボタンを「押せる!」と認知すると、無性に押したくなる本能を持っているようです。

幼いほど、その本能を抑えられないのでしょう。

ボタンの仕組みは?

Arduinoエントリーキッドに「タクトスイッチ」という付属品があります。

押しボタンです。

さっそく使おうと思いきや・・・あれ?どう使えばいいか分かりません。

 

日常生活で、ボタンの仕組みなんて考えたこともなかったです。

調べると、ボタンを押すことで、ボタンから生えている4つの足、全てがつながるようです。

組み立てよう!

ボタンの仕組みが分かれば、回路は簡単です。

オレンジのジャンパーワイヤーを1本増やしました。

 

さあ、子供は本能を抑えられず、ボタンを押したくて仕方ありません。

プログラムを前回と変えていないので、ボタンを押すとLEDが点滅するはずです。

 

ボタン、ポチッ!

期待通り、点滅してくれました!

長男は、ボタンを押すことに没頭しています。

点滅を点灯に

試しにコードを変えて、ボタンを押している間、点灯し続けるようにします。

#define ledPin 10
 
void setup() {                
  pinMode(ledPin, OUTPUT);     
}
 
void loop() {
  digitalWrite(ledPin, HIGH);
  delay(1000);
  digitalWrite(ledPin, HIGH);
  delay(1000);
}

10行目をLOWからHIGHに変えます。実際ありえないコードですが、これで点灯し続けました。

 

長男「ねえ!次は!?」

催促されましたが、お父さんの知識のネタ切れです。また、勉強します。

 

次回は、アナログなことをしようかな。

ロボットに心臓を!

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

ロボットに心臓を与え、点滅させます。

子供が組み立て、親がサポート

電子工作部品を目の前にした子供たちは、目を輝かせていました。

組み立ての土台となる、ブレッドボードを差し出します。

 

ブレッドボードは穴の奥で回路がつながっていて、「-」「+」の列は横に。「a」から「j」の列は縦につながっています。

どこと、どこが通電するかを覚えれば、難しくはありません。

子供には、指をさしながら「10番のところの2番目に挿して。」と言えば、ブスブス挿して、回路を作ってくれるでしょう。

最初はシンプルな回路

使った部品は、

赤色LED ×1
抵抗器330Ω ×1
ジャンパーワイヤー ×2

初めての電子工作にふさわしい、シンプルな回路です。

これを子供たちは器用に組み立てます。

小さい部品ばかりで苦戦するかと思いきや、手が小さいからか、意外と幼児でも組み立てられます。

6歳の長男は、余裕で組み立て

4歳の次男は、長男のサポートを受けながら組み立て

2歳の三男は、針金を曲げながら力ずくで組み立て

0歳の四男は、部品を食べようと近づいてきて

・・・4歳以上推奨です。

ロボットに心臓組み込み!

あっさり回路は完成しました。

いよいよロボットに心臓を組み込みます。

以前、長男に描いてもらったロボットの絵をコピーして、心臓部分に穴をあけます。

そして、LEDを突っ込みます。

 

昨日用意したプログラムを実行すると・・・

「できたー!」

点滅の速度を変えてみましょう。

#define ledPin 10
 
void setup() {                
  pinMode(ledPin, OUTPUT);     
}
 
void loop() {
  digitalWrite(ledPin, HIGH);
  delay(1000);
  digitalWrite(ledPin, LOW);
  delay(1000);
}

delayを1000に変えると、今度は心臓がゆっくり動いたり・・・。

ただの「Lチカ」を、ちょっとだけ楽しくすることに成功です。

電子工作の第一歩「Lチカ」まで

電子工作の第一歩は、「Lチカ」という、LEDをチカチカさせることです。

子供と一緒にやる前に、準備と予習をします。

IDEダウンロード

まずは、Arduinoの開発を行う環境を整えます。

公式サイトからIDE(統合開発環境)をダウンロードします。

https://www.arduino.cc/en/main/software

私の場合は「Windows Installer」をクリックして、「はい」ばっかり押していたらインストールできました。

意外とあっさりです。

回路

「ブレッドボード」という便利なものを使えば、はんだ付け不要で回路を作れます。

ブレッドボードには、たくさん穴があいています。
どこと、どこが、ボードの中でつながっているか理解できれば、あとは小学校の時にやった、豆電球を光らせる要領です。

ブレッドボードに部品をブスブス挿して。

ただ、抵抗器の選び方は、オームの計算が必要で、今回はGoogle先生に聞きました。
赤色LEDは、330Ωの抵抗器を使います。

プログラミング言語はC++?

Arduinoの基盤への命令は、基本的にC++言語・・・私にとって未知の言語です。

先ほどダウンロードしたIDEで書き込みます。

例を見ると、

void setup() {                
  pinMode(10, OUTPUT);     
}

void loop() {
  digitalWrite(10, HIGH);
  delay(500);
  digitalWrite(10, LOW);
  delay(500);
}

これでArduinoのデジタルピン10番につながっているLEDが、500ミリ秒ごとに点滅するようです。

なんだかJavaScriptに、書き方が似ているような気がしますが・・・気のせいでしょうか。

気のせいでしょう。

 

変数やif文を無駄に試したく、少し変えました。

void setup() {                
  pinMode(10, OUTPUT);     
}

int current = HIGH;
 
void loop() {
  digitalWrite(10, current);
  if (current == HIGH){
    current = LOW;
  }else{
    current = HIGH;
  }
  delay(500);
}

intが変数の宣言みたいです。

先ほどのコードと同じく、500ミリ秒ごとに点滅しました。

コンパイラ言語?

きっと無茶苦茶なコードを書いている気がして、Arduinoの日本語リファレンスというサイトを覗いてみました。

(古い)JavaScriptでは、まず使うことのない「定数」の説明があります。

#defineで定義された定数は、コンパイル時に値へと置き換えられ、チップ上のメモリ(RAM)を消費しません。

おお!なんだか少し、コンパイラ言語の基本中の基本が分かったような気がします。

#define ledPin 10

void setup() {                
  pinMode(ledPin, OUTPUT);     
}

void loop() {
  digitalWrite(ledPin, HIGH);
  delay(500);
  digitalWrite(ledPin, LOW);
  delay(500);
}

こちらのコードの方が良いでしょう。

シミュレーションツール

123d Circuits」という、回路とプログラムをブラウザ上で試せるツールがありました。

気づくのが遅れましたが、今後使おうと思います。

 

準備はOK。

次回、子供たちとの電子工作がはじまります。

子供に説明!Arduinoの部品

子供との会話から始まった「IoT×プログラミング教育」プロジェクト
父は夜な夜な勉強します。

まずは簡単なところから

週末、公園で子供たちと遊んだあと、帰りのバスの中で6歳の長男が楽しそうに語ります。

長男「どんなロボットを作ろうかな?鉄砲うって、お掃除して・・・」

 

なんだその散らかすルンバは?

何はともあれ、今の私の実力では、LEDを光らせることしか教えられないのです。

 

父「ま、待つんだ。簡単なところから始めよう。縄跳びだって簡単な飛び方から始めたでしょ?ロボットも同じ。」

小さな成功体験を積み重ねることが重要なはずです。

 

父「ほら、バスのボタンを見てごらん。」

写真:バスの降車ボタン

父「まずは、押すと電気が光るものを作ろう。」

長男「えー、ただのボタンじゃん。」

父「ボタンをバカにするな!押すと光る、そして音が鳴る、さらに『次、止まります』と、音声が流れるでしょ。コンピューターでやっている、すごいことだよ。」

長男「ボタンってコンピューターだったんだ!知らなかったよ!」

よし、説得できました。

使う部品は?

長男「どんな部品を使うの?」

父「えーと、まずはコンピューター。光れ!って命令するの。」

写真:Arduino本体

用意していたのは「Arduino(アルデュイーノ)」。

初心者でも大丈夫そうな「Arduino エントリーキット」をAmazonで購入しました。
本体(マイコン)の他にも、LEDなどの部品もついてきます。

 

父「それからLED。電球のことだよ。」

写真:LED

5種類、LEDがあります。
足の長さが違って、長い方がプラス。短い方がマイナスらしいです。

4本足のLEDもありますが、たぶんフルカラーLEDでしょう。

 

父「それから電気を通すコード。壊れたおもちゃから出てきたでしょ?」

写真:ジャンパーワイヤー

ジャンパーワイヤー、というらしいです。25本入っています。

挿して使えるお手軽な導線だと思います。

 

父「あと・・・抵抗・・・。えっと・・・ちくわ、みたいなものかな。」

写真:抵抗器

抵抗器の説明に詰まりました。

父「えーとね。電気って水みたいなものなんだ・・・。しかも、すごくパワーがある水だよ。そのまま流すと電球が燃えちゃうんだ。だから、穴の小さいちくわを通して、水をちょろちょろ流して、燃えないようにするのさ!」

長男「うん!」

・・・理解してもらえたか分かりません。
もしかしたら、電気を水じゃなくて、ガソリンに例えれば良かったかもしれません。

まあ、抵抗器は地味な存在なので、軽く流したほうが良いでしょう。

 

父「あとは、もちろんボタン。」

写真:ボタン

ちっちゃいです。押すと配線がつながるようです。

 

父「まずはボタンを押して、光るところまでにしようね。音を鳴らすとかは、また次の段階。」

 

事前準備としてプログラムの勉強も必要ですし、少しずつ進めましょう。

次回は、ArduinoでLEDを光らせるためのプログラムについて、書ければと思います。

 

 

IoT×プログラミング教育の始まり

「機械を作りたい!」

駅の改札機の修理現場を目撃して、長男(6歳)が言いました。

う~ん、お父さんは、機械にそんな強くない。
だけど、IoTだとか、プログラミング教育だとか、世の中は流れに逆らえない。

「よし、週末に作ろう!ただし、長い道のりになるよ。」

ということで、ものづくりの楽しさを、親子で一緒に学んでいこうと思います。

ロボットを作ろう!

機械といってもザックリしすぎているので、何かしらの機能を持つロボットを作ってみようかと思います。

 

長男に書いてもらったロボットです。

細かい・・・

さて、圧倒的に電子工作の知識不足なので、まず親が勉強しないと・・・。

Amazonギフト券 「紺」の罠

年賀状を弟に送ったら、返事の手紙と一緒にAmazonギフト券が届きました。

Amazonの研究をしている時に、なんとタイムリーな!

良い弟を持ちました。

Amazonギフト券が届いた経緯

年賀状が1枚余ったので、4歳の息子の名前を使って、弟(息子から見ると叔父)に送りました。

せっかくなので、クイズを書きました。

「もんだい たまはたまでも おしょうがつに もらえる たまは?」

 

待つこと数日・・・

期待を裏切らず、返事が届きました。

「もんだい ねんがじょう に こどものなまえを つかって おとしだまを ようきゅうする ごくあくひどう な ひとは だれでしょう」

4歳の息子には、「ようきゅう」や「ごくあくひどう」という言葉が分かっていませんでしたが、とりあえず「おとうさん!」と、正解していました。

すばらしい勘です。

 

手紙には、Amazonギフト券が同封されていました。

以前、私が、「子供のプレゼントはAmazonで買っている」と言っていたのを覚えていたのでしょう。

なぜ1万円のギフト券?

同封されていたのは、コンビニで売っているやつで、1万円のギフト券です。

他にどんな種類があるのか調べてみると、金額の違う4色のカードがあるようです。

画像:Amazonギフト券
Amazon公式サイトより転載

左から、3,000円、5,000円、10,000円、20,000円。

10,000円の紺色が、一番Amazonらしい配色です。

まるで、10,000円ギフト券を買うように暗示をかけられているような・・・

弟は、まんまとAmazonの罠にハマった?

こんな兄に、10,000円送るような弟じゃなかったはずです。

Amazonサイト 紺へのリニューアルはまさか!?

2015年にAmazonサイトは、ヘッダーを紺にリニューアルしています。

まさか、10,000円ギフト券の販売数を上げることも計算に入れていたり!?

 

さすがに、強引なこじつけか・・・。

 

ただ、UXデザインの勉強をするときは、単にサイトのデザインだけを考えず、顧客との接点全てを視野に入れて考えないといけません。

今回届いたAmazonギフト券のおかげで、ふと視界が開けました。

弟に感謝します。

そして、うちの子は、あと3人いるので、また手紙を出してみようかと思います。

Amazonは「黒」を選ばず「紺」を選んだ

Amazonのヘッダー配色で気になることがあります。

昔のAmazonはヘッダーが白かった

2015年7月まで、Amazonのヘッダー(ページ上部)は白かったです。

キャプチャ:2015年7月のAmazon
2015年7月当時のAmazon

商品を目立たせるためなのか、余計な色を使わない。気持ちいい白さです。

デザイナーがこんなUIデザインを提案したら、怒られるような配色です。

しかし、Amazonのことなので、ABテストを繰り返して検証された、ユーザーに実際使われる配色なのかと考えていました。

突然重い色がドン!

それが、2015年8月に大幅にリニューアルされ、ヘッダー部分に比較的大面積の重い色が来ました。

キャプチャ:2015年8月のAmazon
2015年8月にリニューアルしたAmazon

今さら、ヘッダーとコンテンツを明確に色分けするデザインなんて、売上が上がるとは思えないし・・・

腑に落ちない配色。というのが、第一印象でした。

「黒」ではなく「紺」!?

ただ気になったのは、ヘッダーの色。
無難な「黒」が使われず、「紺」を使っています。

そして、Amazonのアクセントカラー「オレンジ」が、検索ボタンに使われたこと。

つまり、「検索」、「カートに入れる」、「レジに進む」といった、購入へつながる重要な「オレンジ」のボタンを、補色の「紺」で目立たせるのが狙いでは!?

キャプチャ:Amazon補色
Amazonヘッダーとボタンが補色の関係に

以前の白いサイトでは、サイト全体の「白」と「オレンジ」の色差がそこまで大きくなかったです。

Amazonで使われている色を、CIE2000とかいう色差式の計算に当てはめると、

リニューアル前 白とオレンジの色差・・・27.1
リニューアル後 紺とオレンジの色差・・・68.1

ということで、2.5倍くらい色差を感じて、認識しやすい配色に改善されたようです。
(色と色の距離、面積など、いろいろ度外視しています。)

より導線を目立たせ、購買へ繋げる。

色彩学を用いた配色変更だったのかもしれません。

あくまでも仮説です。

WordPress 常時SSLのためのパス変更

前回、このブログを常時SSLにしようとしたら、画像パスがHTTPで読み込まれているため、警告が出てしまいました。

今までの記事の画像を、全てHTTPS で読み込む方法を探ります。

最短で知りたい人は

下記の記事がおすすめです。丁寧にやり方が書かれています。

エックスサーバー独自SSLが無料!WordPressサイトをHTTPS化する方法

 

WordPress歴 の浅い人は

以下のやり方で何とかなります。

まず、WordPressの管理画面で「設定」を選びます。

「WordPress アドレス (URL)」と「サイトアドレス (URL)」が「http://・・・」となっているので、「https://・・・」に書き換えます。

書き換えたら下にスクロールして、「変更を保存」を押します。

これでサイトを見てみると・・・

 

変わりません。

何も変わらず、画像がHTTPで読み込まれると、警告がでています。

新規投稿で画像を読み込むときは、HTTPSで読み込まれるのですが、過去の画像のパスまでは変わらないようです。

力技!

過去全てのパスを一括変換できそうですが・・・

始めたばかりのこのブログは、画像量がたかが知れているので、手作業で画像パスをHTTPSに書き換えることにしました。

画像だけでなく、記事にもリンクをはっている場合、修正を忘れないようご注意ください。

もし大量に修正するパスがあったら

プラグインで一括変換できるようです。

冒頭で紹介した記事へどうぞ。

常時SSL時代へ「Let’s Encrypt」

Googleが常時SSL化を本格的に推し進めているので、当ブログも常時SSLに対応することにしました。

ボタン一つで、しかも無料!

当ブログは、Xサーバーで運営していますが、なんと無料SSL「Let’s Encrypt」を、ボタン一つで導入できるらしいです!

Googleに呼応してか、SSL導入のハードルが、ここ数年でどんどん下がっています。

思わぬ落とし穴

驚くほど簡単に常時SSL導入完了!?

さて、アクセスしてみると・・・

キャプチャ:てまりブログSSL失敗
てまりブログ(2016年1月)のキャプチャ ※Chromeディベロッパーツールを開いています

警告でてます。SSL通信になっていません。
WordPressのデフォルトテンプレートから、まったくいじっていないのに。

ブログ記事に投稿した画像全てが、HTTPで読み込まれているみたいです。

よし。常時SSL化は、また今度にしよう。

無料で問題ないのか?

ところで無料SSLは、本当に大丈夫なのでしょうか?やはり、気になったので調べました。

昔、SSL導入でお世話になったグローバルサインのブログ記事が分かりやすかったです。

2014年11月にElectronic Frontier Foundation(EFF)の他、MozillaやCisco Systems、ミシガン大学などが協同で「Let’s Encrypt」と呼ばれる無料SSLプロジェクトを立ち上げました。

信頼度十分の組織です。

SSLの導入コストを軽減し、ネットセキュリティの改善を目指す志に救われます!

高価なSSL認証が必要なケースは?

値段によって暗号化の品質は変わらないようですが、世間に認知されている企業やそのサービスのサイトでは、もっとも高価で認証レベルも高い「EV」を選んで損はないと思います。

EVにすると、アドレスバーに本物のサイトであることの証明が表示されます。

Chromeなどのブラウザが、SSL対応ページの表示を目立たせてくれるので、「このサイトは本物か!?」と、疑うとき、左上に目が行くユーザーも、増えてきていると思います。

キャプチャ:三菱東京UFJのEV
三菱東京UFJサイトの表示例

 

弊社の場合、「temari.inc」なんて表示させても、「てまり」では怪しさを軽減できないので、当分無料SSLで十分でしょう。

動くChromeのサイト内検索

昨日に続き、Chromeについて。

サイト内検索が動く

UIデザイナーしか興味を示さない、マニアックなところですが・・・

Chromeサイト内検索をするとき、ヒットした文字が検索ボックスの下にあると、ボックスがよけてくれます。

キャプチャ:Yahooトップでのサイト内検索
Windows版Chromeを使い、Yahooトップで「カテゴリ」とサイト内検索した場合

あまり気づかれないですが、UIの目指すところは、あまりに自然に使えて気づかれないこと。

職人魂を感じます。

Macの場合、アニメーションしながら移動

MacのChromeでは、検索ボックスがよけるとき、ぬるっとアニメーションしながら移動します。

OSによって、見せ方を変えているのでしょうか?

Windowsと比較すると、Macの方が、例えばアイコンが飛び跳ねたり、アニメーションを強めに使っている印象です。

OSに合わせて、Chromeの細部のアニメーションまで調整しているとしたら、恐ろしい作りこみです。

・・・単に、OSとハードの組み合わせが無数にあるWindowsでは、アニメーションを実装できないとか、技術的な理由かもしれません。