月: 2017年1月

パラリンピックの意義は何か？

気になりパラリンピックの歴史を探りました。

もともとはリハビリ

パラリンピックのはじまりは、1948年、イギリスの病院で行われた大会でした。

第二次世界大戦中、戦争で負傷した人のリハビリが目的で、医師のルードウィッヒ・グットマン博士がスポーツを治療に取り入れることを考案したそうです。

リハビリとスポーツを組み合わせるとは、なんて素晴らしいイノベーションでしょう！

リハビリからスポーツへ

近年のパラリンピックは、急速に進化しています。

リオ大会で言えば、約200の世界新記録が誕生するほど、急速に競技レベルが上がっています。

走り幅跳びでは、8m21m跳躍したマルクス・レーム選手が、オリンピック記録に迫る記録を出しました。

一方、スポーツとして認められてきたからこそ、義足の性能の物議や、ドーピングの話題も聞くようになりました。

再度原点に立ち戻り

スポーツとして考えれば、記録を塗り替えることや、メダルを獲得する重要性は感じますが、医師であるグットマン博士は、より多くの障害者が、希望をもって社会に復帰してほしいと願っていたはずです。きっと。

パラリンピックは、GDPが高い国が本気になって予算を出すと、記録はどんどん塗り替えられ、メダルも大量に獲得できるかもしれません。

しかし、パラリンピックの原点を考えると、より打ち込んでほしいのは、戦争に巻き込まれている国、不発弾に苦しんでいる国・・・そこまでいかなくても、交通規則が荒れていて、事故で障害を負いやすい国。

パラリンピックで最大効果を出せるのは、途上国ではないかと、考えるようになりました。

 

とはいえ・・・あまりに壮大な問題なので、頭の片隅に置いといて、まず自分のできる、小さな問題を解決していこうと思います。

 

第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 ×１
抵抗器330Ω ×１
ジャンパーワイヤー ×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チカ」という、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。

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

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

まずは簡単なところから

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

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

 

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

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

 

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

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

 

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

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

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

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

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

よし、説得できました。

使う部品は？

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

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

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

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

 

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

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

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

 

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

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

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

 

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

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

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

長男「うん！」

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

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

 

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

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

 

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

 

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

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

 

 

「機械を作りたい！」

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

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

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

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

ロボットを作ろう！

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

 

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

細かい・・・

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

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

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

良い弟を持ちました。

Amazonギフト券が届いた経緯

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

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

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

 

待つこと数日・・・

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

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

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

すばらしい勘です。

 

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

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

なぜ1万円のギフト券？

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

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

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

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

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

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

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

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

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

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

 

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

 

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

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

弟に感謝します。

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

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

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

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

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

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

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

突然重い色がドン！

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

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

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

「黒」ではなく「紺」！？

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

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

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

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

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

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

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

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

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

あくまでも仮説です。

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

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

最短で知りたい人は

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

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

 

WordPress歴 の浅い人は

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

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

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

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

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

 

変わりません。

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

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

力技！

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

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

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

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

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

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

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

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

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

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

思わぬ落とし穴

驚くほど簡単に常時SSL導入完了！？

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

警告でてます。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対応ページの表示を目立たせてくれるので、「このサイトは本物か！？」と、疑うとき、左上に目が行くユーザーも、増えてきていると思います。

 

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