スマートカードとScratch 3.0と教育と

ICカードリーダーをScratch 3.0と組み合わせて使える拡張機能を開発しています。

ICカードは世界的にSmart Card(スマートカード)と呼ばれています。クレジットカードが実用の代表例で,カード表面のICチップ端子を利用する「接触型」が有名ですが,最近では電子マネーでもお馴染のかざすだけで利用できる「非接触型」があります。

今回,ソニー社の非接触型スマートカードリーダーライター「PaSoRi」(RC-S380)をWebブラウザから通信できる技術でScratch 3.0と組み合わせました。先人たちの知見を利用させていただいて実現したので,貴重な情報を共有していただいたこと改めて感謝したいと思います。

開発したScratch 3.0拡張機能は「PaSoRich」(パソリッチ)と名付けて,以下のサイトで試験公開しています。公式のScratch 3.0サイトでは個人が開発した拡張機能を公開する仕組みが整ってないためです。

ICカードリーダーが使えるScratch 3.0体験サイト

https://con3office.github.io/scratch-gui/

非接触型スマートカードリーダーで何ができるようになるのか。

単純に,スマートカードの実用例を疑似体験できる教材の開発が出来ます。

たとえば「shopping_banking_20.sb3」というデモプログラムは,電子マネーの登録チャージと買物決済をシミュレートしたものです。

Shopping banking03Shopping banking02

今まで自作のおもちゃ紙幣を使った買物や支払い体験は行なわれてきました。紙幣と商品という実物交換によって買物(売買)の仕組みを実践的・体験的に学習するわけです。

今後は,電子マネー等のキャッシュレス決済も日常生活に普及することを考えると,そうした可視化の難しい仕組みを実践的・体験的に学習する手段が別に必要になります。

このデモプログラムは,その助けになるのではないかと考えています。

平成29年改訂学習指導要領では,小学校家庭科で「買物の仕組みや消費者の役割」を,中学校技術・家庭科で「金銭管理に関する内容」が新設されるなど,消費者教育の充実が図られました。キャッシュレス化についても中学校の学習指導要領解説で言及されています。検討に値する題材と考えます。

ただし,家庭科全体からすれば,この単元に割り当てられる時数は限られています。総合的な学習の時間との連携を視野に入れて,ポイント還元やFinTechを含めた今日の電子経済社会について探究していく学習活動を構想するくらいでないともったいないかも知れません。

技術的なデモンストレーションとして「math_0to9card_15.sb3」というプログラムも作りました。

スマートカードを数字と記号カードとして登録して,かざすと式が入力でき,「=」カードで計算結果を表示するというものです。

20190609

20190609b

あらかじめお伝えしておきますが,計算できるといっても「便利ではありません」。

ぜんぜんスマートじゃないです。

あくまでもスマートカードを数字入力方法に使えるという実演が出来るという程度のものです。式の入力はキーボードで入力した方が遥かに早いです。

このプログラムを作ってみて分かったことは,スマートカードを利用するのは,ある程度まとまった情報や行為と組み合わせて初めて意味があるということです。たとえば,決済情報や伝言メッセージといったものは,カードを識別して結びつけるのに適しています。

このプログラムの実用性はゼロですが,大事な役割が1つあります。

拡張機能PaSoRichに対応したプログラムを開発する土台に利用してもらうことです。

このプログラムには…

・カード読取機能
・カード登録機能
・数字スプライト表示機能

という基本機能が用意されています。

先ほどの買物と電子マネー決済プログラムのようなものも,このプログラムの中身を再利用しながら開発するのが一番手っ取り早いといえます。

たとえば,スマートカードごとにメッセージを伝える「伝言板プログラム」のようなものも,このデモプログラムを土台にして作ることが出来ると思います。合成音声を組み合わせて使うのも面白いかもしれません。

さて,スマートカードリーダー「PaSoRi」に対応した拡張機能は出来ました。

ただ,世界の人たちは日本とは別形式のスマートカードを使用していることも多いです。

Scratch 3.0は世界中の人が利用しているプログラミング環境ですから,世界の人たちが利用しやすい手に入れやすいカードリーダーに対応させた方が良いはずです。

そこで,海外製スマートカードリーダーであるACS社の「ACR122U」を手に入れて開発してみようと考えました。米国Amazonで安価に注文できる商品の一つです。

早速,先に開発した拡張機能で使っていたWebUSBという技術と同様な手法で動作させようと試してみたのですが,残念ながら諸事情でこの方法での使用がブロックされている模様。そう簡単にはいかないようです。

そういう意味では日本のPaSoRiが使えるというのは国際的にも珍しいということ。こういう体験を世界に先駆けてScratchで体験できる特権があるともいえます。

拡張機能の国際デビューにはまだ時間がかかりそうですが,ご覧いただいたようにアイデア次第でスマートカードを学校教育で実践的に体験できる教材をいろいろプログラミングすることができます。

この機会にいろいろ考えてみてはいかがでしょうか。

Scratchで数字表示

Scratchのサンプルプログラムを作成しています。

その際,変数に入れた数値や文字を大きく表示したい場面が出てきます。

変数の内容を確認するためだけなら,Scratchでこんな感じの表示ができます。

20190601 123456c

しかし,これだとあまりに小さい。吹き出しに表示する方法も控えめな大きさです。

願わくは,もっと大きく表示したい。たとえばこんな感じ…

20190601 123456

Scratchプログラムを教室のスクリーンに提示する際,ありそうなニーズのように思えます。

ところが,Scratchでこのようなことをするのは意外と難しいのです。

似たような表示をさせるだけならこんな感じで6つの数字スプライトを用意して並べる方法があり得ます。変数から数字を読み取って必要な数字スプライト(そのコスチューム)を用意するといった仕組みです。

20190601 123456a

しかし,この方法には問題が残ります。

たとえば,表示できる数字が6桁縛りになることです。

6桁もいらない数字のときや,6桁よりも大きな数字を表示したいときには,そういう場合に対応するための準備やプログラムが必要になります。

そもそも,桁数分だけのスプライトを用意しなければならないことも面倒です。

そこで他に方法がないかを調べてみたところ,スタンプ機能を使った方法が紹介されていました。

「【Scratch】数字を表示するスプライト」(コドモとアプリ)
https://studio.beatnix.co.jp/kids-it/kids-programming/scratch/scratch-material/scratch-label/

望む位置合わせに応じたスプライトが用意され,好きな桁数の数字を好きな大きさを指定して表示できるので,大変便利なサンプルです。用意されているフォントもオーソドックスなので使いやすいかも知れません。

このサンプルでほぼ解決!ともいえるのですが,ペン拡張機能のスタンプ機能を利用しているため,数字を消去しようとするとペンで描かれたもの(たとえば図形)が一緒に消えてしまうという弱点があります。

算数教材を作成しているときには,このような弱点が大変困る場合もあるわけです。

というわけで,スタンプ機能を使わずにスプライトをクローンする方法で作ってみました。

20190601 123456b

数字表示 - スプライトクローンによる数値表示
https://scratch.mit.edu/projects/314069120/

ご覧のように一つのスプライトと,あとは数字のための変数を用意するだけ。(ネコはおまけです)

文字のデザインはScratchに標準で付いているものを利用していますが,必要であれば自分でデザインし直してもらえれば,どんな文字デザインでも応用できるのはスタンプ方式と違いはありません。

変数とメッセージ(broadcast)で呼び出すため,複製して複数の数字を表示したい場合はメッセージを異なるものに設定し直す必要はあります。

数字ではなくて数式を表示したい場合も出てくるので,別に「式表示」プログラムも作りました。

式表示
https://scratch.mit.edu/projects/314409226/

さて,これらを使ってサンプルプログラム作りに励むことにします。

今回ご紹介したScratchで数値表示する方法は別のところで紹介し直していますので参考にしてください。

 

PaSoRich – ICカードリーダーをScratch3.0で

グラフィカルなプログラミング環境であるScratch

2019年に3.0へと移行し,HTML5対応Webブラウザのみでも利用できるようになりました。

Scratch 3.0には「拡張機能」を追加する仕組みがあり,ブロックを増やすだけでなく,外部機器を制御できるようになっています。たとえば「micro:bit」や「LEGO Education WeDo 2.0」といったものです。

Scratch 3.0自体がリリースされて間もないため,拡張機能は限られたものが提供されている段階です。いずれ様々な拡張機能が登場したり,ユーザーが作ったものを申し込みで追加できるようになると思います。

今回,Scratch 3.0の拡張機能としてICカードリーダーを扱えるように作業してみました。

量販店で最も入手しやすいICカードリーダーの1つであるソニー社「PaSoRi」パソリをScratch 3.0で利用するための拡張機能「PaSoRich」パソリッチです。

PaSoRi with Scratch 3.0
https://con3.com/sc2scratch/
https://con3office.github.io/pasorich/

これを利用するとICカードの識別番号を読み取ることが出来ます!

Pasorich2019

簡単なデモプロジェクトでは,「s」キーでICカードを読み取って配列に識別番号を登録し,「スペース」キーでICカードを読み取って登録した識別番号に対応したセリフを表示します(デモなので3パターンだけ)。物理的なカードと画面上のステージを組み合わせたプログラムが組めるわけです。

ICカードは,いま使っている会員カードや電子マネーカードが利用できます。使い切って家で眠っているもの,旅行先で利用したが持って帰って使ってないものも使えます。

つまり,カードを入手するのに大きな苦労はしない上,数を用意するのも難しくない。それでいて,識別番号という面白い特性が利用できるのです。

カード対戦ゲームを作ることから始まって,かざす果物カードによって果物が表示されていく提示教材とか,宝探しで見つけ出したヒントカードをかざすと次なるヒントが音声で流れてくるとか,児童生徒カードと先生カードとの組み合わせでいろんな記録システムを作成するといったことも可能です。

ちょっと面白そうでしょ?

(追記)

試す環境を構築するのも大変なので,デモサイトを用意してみました。

Scratch 3.0 GUI with PaSoRich
https://con3office.github.io/scratch-gui/

Windows環境の方はICカードリーダーが認識されないことがあります。以下のZadigという汎用USBドライバをインストールすると認識することもあるようです。Windowsユーザーの方はお試しください。

Zadig - USB driver installation made easy
https://zadig.akeo.ie/

(追記ここまで)

でも残念ながら,いまのところこの拡張機能を使うのはとても難しいです。

第1に,ICカードリーダーが必要です。ソニー社のパソリという製品のみ対応です。

第2に,ChromeというWebブラウザのみ対応です。

第3に,冒頭で説明した理由のため正式なScratch 3.0では利用できません。

第4に,技術的理由で,ネットを介した環境では利用できません。
(これはHTTPS通信なら大丈夫だったようです)

へ?それではどうやって使うのか?

自分のコンピュータに自分専用のローカルなScratchをつくって,そこで利用するしかありません。(もしくはデモサイトをどうぞ。)

PaSoRichを追加したローカルなScratch環境を構築するのです。

以下が手順です。

  1. コンピュータに「Node.js」と「Git」というソフトウェアをインストールする
  2. GitHubサイトにあるScratchの大元ソフトウェアをコンピュータにコピーする
  3. 2.をするときは,あらかじめPaSoRichを追加したバージョンを選んでコピーする。
  4. コピーしたScratchの準備を整え,scratch-guiを(「npm start」で)動かす
  5. Webブラウザで http://localhost:8601(または http://0.0.0.0:8601 )をアクセスする
  6. ローカルなScratchが使い始められるのでPaSoRichの拡張機能を追加する。

以上です。

PaSoRichを組み込んだ「scratch-vm」と「scratch-gui」のGitHubリポジトリは以下の通りです。

https://github.com/con3office/scratch-vm

https://github.com/con3office/scratch-gui

これを以下のページの説明のように作業を進めることでローカルなScratchを構築できます。(アドレスを置き換えて入力します。)

Scratch 3.0の拡張機能を作ってみよう/下準備

ぜひ挑戦してみてください。

(追記)

動作条件が厳しく,動かないケースが多いと思われます。まさに挑戦して確かめてください。

[参考情報]Web USBでPaSoRiを扱えるOSをまとめてみた

20190122_Tue 必要は理解力の母?

授業と会議の日。

授業ではScratchの作品の仕上げ。ほとんどが女子学生の学年だったが,創造的な作品づくりと捉えてくれたようで,ゲームやら作品やら作りたいものを思い描いて,あとは熱中してコーディング。

ある学生の作品は,恐竜が口を開けたり閉めたりするコスチューム(見た目)を繰り返して,そこへ少年がバスケットボールをスローインするのだが,恐竜の口が開いていたらボールを食べ,口が閉じているときはボールに当たったことを怒る反応をするというもの。

少年が投げるボールの軌跡を実現する方法は学生なりに解決したあと,ぶち当たった難関は恐竜の口の開閉に応じたボールとの接触の反応分岐だった。

必要は理解力を高めるのだろうか,そもそも学生が優秀なのだと思うが,私が処理の流れをつぶやきながらブロックを紹介するプロセスにちゃんとついてきてくれた。

たとえば私は解決策に「変数」を使って分岐を起こすしかないと考えて,「kuchi」という目印(変数)を作って,恐竜の口が開いているときに「1」閉じているときに「0」という目印を入れておくよう提案した。そのためのブロックの拾い出しと組み方はまだ慣れないとしても,私が手伝って組んだコードと作品の動きとの関係性についてはちゃんと理解してくれたようだ。その後,自分なりの調整をしていたのも理解できていたからだと思う。

他のある学生さんは,キャラクター同士が会話をするパートを作っていた。

その会話のやりとりは,最初,「○と言う」と「○秒待つ」のブロックを組み合わせて,2つのキャラクター(スプライト)が別々に時間を待ちながら自分のセリフを表示する方法だった。

この方法は,相手のセリフが表示される分をもう片方が「あらかじめ時間を決めて待ってあげる」わけだが,この待ってあげ合う方式だと,何かの理由でタイミングがズレて,セリフがかぶったりする。

そこで,会話は「○と言う」ブロックで自分の吹き出しを見せて「○を送る」ブロックで相手にメッセージを送り,相手は「○を受け取ったとき」ブロックで相手のメッセージを受け取ったら…ということの積み重ねでやりとりさせることを提案した。もちろんこの他にも変数を使う策もあるだろう。

このメッセージの送り合いを一往復半くらい手伝えば,あとは「もう分かった」といった感じで,自分でコーディングを始めてくれた。

ちょうど年明けの残り授業分で取り組んだ活動だったので,正式リリースしたばかりのScratch3.0での実践。職場のパソコン教室は,幸いChromeブラウザをインストールしておいてくれていたのでScratch3.0も問題なく使えていた。これはラッキーだったと思う。

20人弱の学生たちを独りで対応するシチュエーションだったので,サポートに入れなかった学生もいたが,学生同士で教え合うということにも助けられて,今回も無事に活動は終了した。

20190115_Tue Scratchで舞台作品

授業と会議。

授業はScratchを使った作品づくり2回目。

Scratch3.0で舞台作品をつくるような説明をしているので,それぞれのスプライトのスクリプト(コード)のことを「役者さんの台本」といった言いまわしで表現している。

芝居中は,合図の送り合いというイメージも早くに意識してもらっている。

役者同士はもちろん,ボタンやキーを押す舞台監督,そして舞台背景を担当する舞台スタッフは,芝居のきっかけ合図を送り合っている。つまり,メッセージの送り合いが舞台の進行を支えているわけだ。

ボーッとしていると理解が難しいと投げ出す学生もいるが,サンプルを見てもらいながら分かってもらうと,スプライト同士の連携を難なくデザインしてしまう。むしろ舞台を思い通りのルートで役者を動かす方法で悩むことが多いかも知れない(それも発想さえ掴めば早いけれど)。

プロセスやイベントループのことも「役者さんの気や集中」みたいなたとえで押し通し,まぁ,なんとか。

授業となると十分な時間を確保できないが,将来保護者になったときに子どもたちが触れるScratchって何?!と動揺せずに,なかなか楽しいものだと思い出してもらえる程度になってもらえればよいと考えている。

会議は年度末と来年度に向けてのあれこれ。