M5StackとM5UI.Flowで子供のプログラミング教室#2
前回はの記事はこちら
第２回の勉強は、UIを触るところをメインで進める
課題１ボタンを押したら表示する文字を変えてみよう（その１）
IDEの左側にM5StackのUIが編集できるエディタがあります。 今回は、タイトルとラベルを利用します。
それぞれをドラッグ＆ドロップで、表示したい場所に配置します。
最初にタイトルを選ぶと、設定を変えるポップアップが出てくるので、表示するテキストを「Programing Study」に変更します
次に、ラベルのフォントを「Comic」に変更します
ここからは、ボタンAを押したら「button A」とラベルに表示するようにブロックを組みます
まずは、「イベント」からボタンを押したときのブロックを配置します。
次に、「UI」->「ラベル」->「ラベル〜に〜を表示」のブロックを配置します。
最後に、表示する文字を編集します。
これで、実行ボタンを押して、M5Stackの一番左のボタンを押すと、文字が表示されます。
けど、最初にラベルに「Text」と表示されていてイマイチなので、ボタンを押していないうちは、ラベルには何も表示されないようにしたいですね。
「UI」->「ラベル」->「Set label1 hide」のブロックを「Setup」のブロックに配置して、実行ボタンを押してM5Stackに反映します。
期待通りに非表示の状態から、ボタンを押すと表示されるようになりました。
後は、残りのボタンを押すと、「button B」、「button C」と表示されるようにします。
この課題を通して、Setupの役割と、ラベルの使い方を学ぶことが出来ました。
課題２ボタンを押したら表示する文字を変えてみよう（その２）
ここでは、違う方法で同じ結果を実現することを試してみます。具体的にはボタンを押したイベントを使わずに、判定処理でこれを実現します。
まずは、「イベント」->「くりかえし」のブロックをSetupにつけます。 その中に、「ロジック」->「もし」のブロックを入れます。「もし」のブロックの条件に「イベント」->「ボタンがA wasPressed」をつけます。最後に、「もし」doにラベルの文字を変更するブロックを入れます。
この処理を、ボタンB、ボタンCの分追加します。
実行ボタンで書き込んだ後にボタンを押してみましょう。さっきと同じ動きをすることが確認できます。
この課題では、「くりかえし(loop)」を使いながら、「もし(if)」について知ることが出来ました。Pythonのコードを見ると、課題１と課題２の仕組みの違いが理解することが出来ます。
ボタンのイベントを使う方
ボタンの状態を見る方
課題３ボタンを押したら表示する文字を変えてみよう（その３）
「もし」の使ってみましたが、「もし」には「そうでなくもし(else if)」のような設定もできるので、この課題では「もし」を使って課題２を改造してみます。
左上にある歯車みたいなアイコンをクリックすると、編集用のポップアップが表示されます。
「else if」の部品を右側に必要な分配置します。
これにボタンの判定と、ラベルへのテキストの設定を組み合わせると、こんな感じになります。
ソースコードを見ると、課題２の時よりも無駄な判定が減っているのでスッキリしてますね。
「もし(if)」はカスタマイズできるので、必要な判定文をわかりやすく作ることを知ることが出来ました。
応用問題その１
画面上に３つの円を表示して、それぞれのボタンを押すと、「赤」、「黄」、「青」と変わるようなものを作ってみましょう。
回答例
応用問題その２
ボタンAを押すと本当の信号機みたいに、「青」->「黄」->「赤」と自動で変わるようにする。
ヒント：タイマー
回答例
ボタンAを押したら、少し待ってから黄色に変わり、少し待ってから赤に変わるようにしました。
まとめ
今回は、UIのいじり方や、タイマー、「もし(if)」について学ぶことが出来ました。タイマーと「もし」を組み合わせることで、色々なことが出来るようになりそうです。
プログラム教室の過去記事
M5StackとM5UI.Flowで子供のプログラミング教室#１
嫁さんの要望により、子供にプログラミングを教えてということで、どんなコンテンツがいいかなと。
いきなりコードを書くのはハードルが高いので、Scratchみたいなブロックで勉強ができるのがいいと思いました。 けど、PC上だけで動くのはあまり面白くないと思い、デバイスと連携したものとなると結構高い。
そこで見つけたのが、M5Stackをデバイスとして使えるM5UI.Flow。 M5GOという専用のキットもあるみたいですが、手元に普通のM5Stackがあったので、それを使って始めることに。
M5Stackのページから、UI.Flowを使えるようにするために必要なソフトウエアがあるので、これらをダウンロードして環境を整えます。
- M5Burner
- UI.Flowで作ったアプリを実行するためのファームウエア
- ファームウエアを焼いた後に起動すると、セットアップメニューが選べるので、USB接続を選ぶ
- UIFlow-Desktop-IDE
- Web版のIDEもありますが、PCにインストールする版のほうが子供には使いやすそうなので、そちらを使いました
- CP210X Driver
- M5StackとUSBシリアルで繋ぐときに必要なドライバ
IDEの初期設定
IDEを開くとどのデバイスにつなぐか聞いてくるので、指定してあげます。
ここで、ThemeでIDEの色を指定できるので、子供に好きな色を選ばせると、それだけでも自分のもの感が出るのでやる気がでてきます。
このようなUIとなっていて、真ん中のグループから使いたいブロックを選んで、右側のエディタに配置します。
課題１ 背景色を変えてみる
ブロックのグループから、「グラフィック」を選ぶといろいろな操作ができるブロックが表示されます。 この中から、画面を塗りつぶす物をドラッグして、エディタに置きます
切込みと、山の部分が接続可能な部分なので、ドラッグしてカチッとハマるようにドラッグして動かします
最後に表示したい色を選びます
これで背景が指定した色で塗りつぶされる動きをします。画面右上にある実行ボタンみたいのをクリックするとM5Stack側に転送され、実行されます
M5Stack側の表示もちゃんと変わりました！
IDEの上の部分でブロックとソースコードの表示切り替えも出来るので、ステップが終わるごとに、子供に実際はこんな感じのコードが書かれてて、こっちをいじっても動くんだよみたいな説明をしてます
最初の手順はIDEの使い方を教えつつ、簡単な処理を実現して、すぐに結果を見れるようにすると、子供も興味を持って集中して作業してくれます。 デバイスがある方が大人も子供もテンションが上がるので、とりあえず最初の一歩は成功したかなと。
課題２ 音を鳴らす
M5Stackは音も鳴らせられるので、次はこれにチャレンジします。
「ハードウエア」->「スピーカー」と選ぶと、音を鳴らすためのブロックが見つかるので、「LowAの音を１拍鳴らす」を使います
これで、実行ボタンを押すとM5Stackから１拍の時間だけ音が鳴ります。すごい簡単ですね。「LowA」の部分を変えるといろいろな音に変わるので、子供には実際に色々と試してもらいます。
課題３ 曲みたいに音を鳴らしてみましょう
今までの手順だと、１つのことしかさせていないので、ここからは複数のことをやらせる方法について教えていきます。 例として、チューリップの花のを音がずれてもいいので、リズムだけ合うように組み上げること一緒に進めます。
まずは最初のステップとして、音をつなぎ合わせて雰囲気は伝わる感じに仕上がりました。
「さいたー」みたいな音にしたいので、「た」の部分は２拍にします。
曲の詩は「さいたー」が２回繰り返しているので、そこをプログラムで変えてみましょうとします
この課題では、繰り返し音を変えながら試すことを通して、「実際に自分が思う通りに動くように、繰り返し修正をする（デバッグ）」と、同じことを繰り返す場合は、「繰り返し（ループ）」という仕組みがあることを勉強してもらいました。
デバイスを使った勉強は、画面だけで見るよりも、実際にアクションとリアクションを楽しめるので、子供も楽しんで触ってます。
課題４ ボタンを押したら、音が流れるように
M4Stackにはボタンが３つ付いているので、この課題ではボタンを押したら、曲が流れるようにします。
「イベント」->「ボタンAがawsPressed」のブロックをエディタにドラッグします
次に、先程作ったものを、「Setup」の方から、ボタンのイベントに移動します。
これで、実行ボタンを押してM5Stackの一番左のボタンを押すと、音楽が流れてきます。
ボタンをBやCに変更して、動きが変わるのも試してみます。
最後に、実際のコードはどのような形になっているか見て、どんな風に動いているかを一緒に調べます。
この課題では、イベントを元になにかの処理をすることを知ってもらいました。
応用編 押すボタンによって、動きをを変えてみましょう
押すボタンによって、画面の色と音を変えるように、本人たちにやってもらいます。
まとめ
小学校２〜３年の子供向けにやってみたけど、結構興味を持ってくれました。 前にLegoでプログラミングみたいな教材を試してみたことがあったけど 、人数分揃えるには高すぎるし、Legoで遊んでしまう問題もあり集中できない問題がありました。M5Stackを使った自作教材だと、やりたいことを自由に組めるし、デバイスはやっぱり面白いし、今後はセンサーモジュールも買って拡張し放題なので、勉強に丁度いいと思いました。
プログラム教室の過去記事
Z900RSインプレ
去年の12月にZ900RSが発売されたわけですが、出た当時から気になってました。
2月に神戸に行った際に、カワサキミュージアムで実機を見てさらにテンションが上がってしまったので、レンタルして乗ってきたので、その感想を。
Z1、Z2を彷彿させるデザインが良いですね〜。
普段はゼファー750に乗っているので、それの最新版みたいなイメージでいましたが、まー別物ですね（当然ですがw）。
所有しているゼファーが約20年物ってこともあったり、最近のバイクも乗ったことがなかったので、こうも違うのかと最初は戸惑うことばかり。
お店から、少し走って思ったのは、
- エンジンが一発で掛かる
- アイドリングが安定している
- アクセルに対して、エンジンがすぐついてくる
- サスが安定している
- 排気ガスが生ガス臭くない
などなど、新型って凄いなと。
バイク屋さんまでゼファーで行ったこともあり、いつもの感じでアクセルを開けると、すぐ加速するし、トルクあるしで、非常にぎこちなく乗っていたと思われる。
少し走っただけで、右腕がすごく疲れたw
ゼファーは68ps、トルク5.5kgf・mに対して、Z900RSは111PS、トルク10.0kgf・mなのだからしょうがないですね。
しばらくした道を走って慣れてきたので、もう少しスピードを出せる高速に向かいました。 首都高の初台から乗り -> 中央環状 -> 湾岸線 と走って、空港中央で降りるコース。
最初は大黒ふ頭まで下ってから、戻ってこようと思ったけど、、ジェットヘルメットだから風で涙が止まらなくなったので、こりゃ楽しめないと。。
なんせ、アクセスひねるとあっという間にスピードが出て、それでいて安定しているから、ゼファーよりも全然安心して乗っていられるんだけど、風には勝てなかった。。
空港中央からは、湾岸道路を戻って、ゲートブリッジ渡って、お台場海浜公園辺りでやっとバイクを止めて、ひたすら写真を撮る。 そこから、レインボーブリッジを渡って、下道でバイク屋へ戻るという全部で約70kmぐらいのコース。
ゼファーに乗っているせいで、変な比較になってしまうが、全体的な印象として、
- ハンドル高い、幅広い
- Z900RSのカフェレーサーの方が私には合うかも
- シート高い
- ゼファーだと両足でもかかとまで着くけど、両足だとほとんどつま先立ち
- アクセルワークがシビア
- ゼファーはガバって開けても、ワンテンポ遅れるし、ココまでトルク無いので
- シートが硬い
ヘタったバイクに乗っているせいか、キビキビ動きすぎて数時間しか乗ってないけど、疲れたw
逆に良いなと思ったのが、
- 色んな面で安定している。スピード出しても、コーナー曲がっても。
- インジェクション良い
- 水冷は熱くなくて良い
- 回したときのエンジンの音が良い
- タイヤ太くてカッコイイ
そんなこんなで、非常に悩ましい印象である。 もしお金があってどちらも買える状態だった場合、新車のゼファー750RSが手に入るならそっちを選んでしまいそうです。
けど、ツーリングだったら、Z900RSの方が長距離でも疲れずに楽しめそう。
メータは液晶も付いていて、見やすかった。
全体的にスッキリ。マフラーは変えたい。
ゼファー750RS買うとか書いたけど、やっぱカッコイイし、買えるならZ900RSの火の玉かな。
Alexa Day 2018
スタッフとして活動していたAlexa Day 2018も無事に終わり、家に帰ってきたのでさっそくブログを。
土曜日は子供の保育園のイベントで息子の勇姿を見た後、イベントの朝は早いから前日入りするために、夜の便で神戸に入りました。
搭乗前にのんきにビール飲んでたら、搭乗口が変わっててこの後700mぐらいダッシュする羽目に。。
神戸には22時ぐらいに着いたので、疲れてたのでおとなしく寝て、翌日のイベントに備えました。
会場近くのホテルに泊まったので、イベント会場まで徒歩で向かいました。
会場が商店街の中（この奥の方に）にあるという事だったので、狭いのかなと思ったけど、そんなことは全然なく、結構広く人数に対してちょうどいい感じだったのではと思います。
三つ折りのちゃんとしたパンフレットも用意されてて、デザインできる人がちゃんと作ると凄いなと思いました。（準備であたふたして、会場ついてからの写真が全く取れてなかったので、金春さんのいい感じの写真を）
朝早くにも関わらず、参加者もオープニングから来ている人も多く、神戸開催＆有料にも関わらず、多くの人が参加してくれたのは嬉しかったですね。
今回は、以下のように、多くのコンテンツを用意して開催したので、ワークショップに参加した小学生から、大学生、社会人と幅広い参加者となっていました。
- セッション：１２
- ワークショップ：１
- パネルディスカッション：１
- スキルコンテスト：１
- ランチセッション(LT)：３
セッション自体もAlexa Skills KitとAlexa Voice Serviceの両方を用意したので、アプリ作る人やデバイス側の人など、様々な職種の人に参加いただけたのではないかと思います。
私自身も実際に登壇しましたが、アンケートを取ってみるとEchoを持っている人たちがすごく多かったです。 実際にSkillを作ってみたことがある人も多く、勉強熱心な人がいっぱい集まってたのかなと思います。 （3連休の中日に一日有料のイベントに参加する人たちなので） LINE WAVE、Google Home、Amazon Echoの3つを持っている人も多かったのは印象的でした。
お会いして話をした人でも、沖縄、九州から来ている人もいれば、大雪で大変な苦労をしている石川県からも来ていたり、北海道からスタッフとスピーカーとして参加している人など、本当に全国から人が集まっていました。 これって、なかなか凄いことですよね。
イベント後は懇親会も有りましたが、こちらも100名の人が参加していて、かなり盛り上がっていたと思います。 入場時にランダムにグループ分けをして、参加者同士が話ししやすいような仕掛けも用意したので、初対面でも結構交流ができたのではないかと思います。
懇親会場のスクリーンに映し出されていた映像や、ずっと流れていた音楽も、スタッフのメンバーがおこなっていたのは、これまた凄いなと思いました。
全体を通して、日頃JAWS-UGのイベントを一緒に開催したり、JAWSDAYSみたいな大きなイベントの運営を行ってきた人がスタッフとして参加していたので、みんな慣れていて大きなトラブルもなく、運営できたんじゃないかと思います。 （私個人はトラブルが有りましたけど）
最後にいっぱいお酒が置いているバーでゆっくり飲む、、、ってこともなく、ココでも結局、Alexaへの熱い話が繰り広げられ、充実した一日を終えることになりました。
次の開催が楽しみですね。
iPhone 6Sのカメラレンズ交換
しばらく前からiPhoneで写真を撮ると、光源の位置によって変な光が入り込む現象が起きていました。 カメラレンズを見ると、こんな感じでど真ん中にヒビが入ってるのが原因です。
Genius Barでカメラのレンズ交換を調べると、3万〜とかなり高価です。 それなら買い替えかなと思っても、iPhone X高いしと、、騙し騙し使っていました。
ネットで調べると、部品は1000円で購入できるので、前に4Sの電源ボタン修理した時に買った工具もあるし、自分で修理することにしました。
iPhoneの分解はサポートも受けられなくなるし、場合によっては壊れてiPhoneが使えなくなります。 分解・修理は自己責任で。
参考にしたのはこちらのサイト。
今回も活躍することになった工具。
液晶はLightningコネクタの両サイドにあるネジ（写真の矢印）を外してから、吸盤で引っ張ることで持ち上げることができます。
工具に付いてた吸盤だと弱くて引っ張れなかったので、お風呂のタオルを掛ける強力な吸盤がついたのを使いました。
思っきり引っ張るとケーブルも引きちぎれてしまう可能性があるので、少し隙間ができたら工具でこじって剥がします。 （正面テープみたいな接着剤が付いているので、ゆっくり剥がしていきます。）
液晶は数本のケーブルで本体側とつながっているので、90°開いた状態でケーブルを外す作業を進めます。
写真撮り忘れたので、すでにコネクターカバーが外れているけど、赤い矢印の所が4箇所ネジ止めされているので、それを外すとカバーが取れます。 青い矢印の所がコネクターになっているので、工具に含まれているヘラみたいなので持ち上げて3つとも外します。
外した液晶のコネクタはこんな感じのやつ。
カメラユニットのカバーを止めている2つのネジを外します。
カメラユニットが見えたら、コネクタを外します。
ピンセットで持ち上げると、カメラユニットが簡単に外れます。 外れたところを見ると、分かりづらいですがレンズカバーとくっついたブラケットが有ります。 レンズカバーと溶接されているため、外すのは苦労しますが、周りを傷つけないように外します。 外す時にブラケットが曲がったり、切れたりしますが、交換部品に含まれているので大丈夫です。 また、ブラケットに付いていたスポンジは交換後も使うので、壊す前に取っておきます。
ブラケットが綺麗に取れたら、レンズカバーを内側から押すと簡単に外れました。
外す時に壊れたブラケットとレンズカバー。
購入したレンズカバー。Amazonで1000円です。 左側がカメラユニットが収まってたブラケット。
元々ブラケットとレンズカバーは溶接されていましたが、交換する時は溶接できないので、レンズカバーをiPhone本体に接着剤で付けます。 （これは、荒く使ってると取れちゃうかもしれないですね）
使った接着剤は普通の瞬間接着剤だとガスでレンズが曇ってしまうので、ガスが出ない混ぜるタイプを利用。
レンズカバーのハマってた所に、はみ出ないぐらいの接着剤を付けて、新品のレンズカバーを付けます。 新しいブラケットには、元のにブラケットに付いていた黒いクッションを付けて、合った所に戻しします。
あとは、外した物を元に戻して、終わりです。 作業時間としては30分ぐらいかな。
今回のために買ったピンセット。 丈夫で持つ所が絶縁されているので、電子工作にも使えそうです。
交換用のパーツに含まれていたこの部品は使わないで終わりました。 何に使うんだろう。。。
ドライブレコーダー HDR-352GHの取り付け
前から付けたかったドライブレコーダーが年末に届いたので、さっそく付けてみました。
ドライブレコーダー HDR-352GH | COMTEC 株式会社コムテック
同僚がオススメしていたものですが、結構人気の機種らしくAmazonで注文してから2ヶ月ぐらいかかって届きました。
取り付けにあたって、この車は殆どDIYしていないのでまずは、ネットで色々調査してから取り付け方法を決めました。
116i(F20)はキーONで電源が取れる場所が結構少ないらしく、多くの事例はシガライター用の電源を使うしかないようでした。ちなみに、シガライターの電源はキーOFFから10分ぐらいは通電してる。
とは言え、ドラレコの電源ケーブルをシガライターに刺すのもいまいちなので、シガライターの電源から分岐する方法にします。 116iはヒューズボックスはエンジンルームとトランクの2ヶ所に有りますが、今回はトランクのヒューズボックス（162番）から取得します。
取り付け場所はフロントガラス助手席側のバックミラー裏が視界のじゃまにならず、且つ前方が綺麗に録画できる場所にした。（取り付け前に実際に電源を入れて、カメラの画像を確認しながら決めた）
次に、フロントガラスに取り付けたドラレコからトランクまで配線しなければならないですが、ケーブルが表に出てるのもかっこ悪いのでうまく隠すために、内装を剥がしつつ見えない所に隠していきます。 ドラレコの取り付け作業の時間としては、内装剥がしたり、戻したりが６割ぐらいを占めているかなと。
まず最初にフロントピラーのゴムが内装剥がす際にじゃまになるので、引っ張って剥がします。（はめ込んであるだけなので、意外と簡単に外れます）
内装を剥がす際にはプロも使うらしいこの内装剥がしを使いました。キズもつきにくく、内装を剥がさないでケーブルを押し込むときにも使えたりと、今回１番活躍したアイテムです。
エーモン パネルはがし(ロング) 緑色樹脂製 全長約300mm・幅約15mm 厚さ5mm 1499
次にこの名前わからないけど邪魔なやつも内装剥がしを突っ込んで剥がします。
やっとフロントピラーの内装にかかります。
内装はルーフ側の溝に内装剥がしをつっこみ、持ち上げる感じでルーフ側のクリップを外します。 一番上のクリップが外れたら内装を上に引き上げる感じに抜きます。
ピラー側に白いクリップが残っていますが、これは外して内装に取り付けます。車の内装はこんな感じで、外すとクリップが車体側に残ってしまうのですが、内装側に付けないと取り付ける時にうまくできません。
ドラレコからフロントピラーまではウインドーとルーフの内装の隙間にケーブルを突っ込みます。ピラーまで来たら中にあるケーブルに固定しながら、ドアの下まで這わせていきます。
カーペットの上を這わすのもいまいちなので、サイドシルのカバーを外してカーペットの裏を通していきます。なので、このカバーも内装剥がしで外していきます。
ここでも、クリップが車体側に残っているので、全部外して内装の方に付けます。
センターピラーの内装は剥がさずに、カーペットとピラーの内装の隙間にどんどん押し込んでいきます。
車のリアシートって、結構はめ込み式が多いんですよね。なので、試しに持ち上げてみたらこんな感じで外れました。
リアシートをどかしたら、ドア下の内装剥がさずカーペットとステップカバーの間に押し込んで終わりにしました。
i116はハッチバックですが、リアシートが倒れてトランクルームと繋がります。なので、持ち上げたリアシートの下にケーブルを通して、そのままトランクまでケーブルを取り込むことができます。
しかし残念ながら、ドラレコの電源が4mだったので、ヒューズボックスまであと数センチってところまでケーブルが届きません。
ケーブルを延長して、電源とアースを接続して配線が終了です。
実際に町中を走ってみても、運転席からの視界には全く影響はないですね。
そして、映像も広角なので、フロントグラスにピッタリくっついているぐらいなのに、ピラーが映るぐらい広範囲を撮影してくれます。逆光でも結構見やすい。
最近は怖いニュースが多いので、これで安心ですね。
ASK CLIを使ってみよう
Amazon Alexa Advent Calendar 2017 18日目の記事です。
18日に開催されたJAWS-UG CLI専門支部でASK CLIについてハンズオンを開催してきました。
ASK CLIとは？
Quick Start Alexa Skills Kit Command Line Interface (ASK CLI) | SMAPI
Alexa Skills KitをCLIで管理できるコマンドラインツールです。 内部的には、Skill Management API (SMAPI)を利用しており、SMAPIを利用するツールの一つとなっています。
Alexa Skills Kit Command-Line Interface and Alexa Skill Management API Overview | SMAPI
ハンズオンの内容
ハンズオンでは、Skillを作成、Modelの登録、シミュレーションの実行など、Skillの開発に必要な一連の操作を学べる物となっています。 興味あれば、是非試してみて下さい。
必要なもの
ハンズオンではLambdaを利用するため、AWSのアカウントを必要とします。 Skillの登録のため、Amazon Developerのアカウントも必要とします。
