ライブラリ

iPadユーザーの皆さま、お待たせしました。

ICカードで決済できる「おみせやさん」にQRコード決済対応版ができました。

　

ICカードリーダーのPaSoRiと拡張機能PaSoRichが、iPadで使えず、電子マネーのシミュレーションである「おみせやさん」を体験していただくことができませんでした。

しかし、GIGAスクール構想実現事業では少なからずiPadを導入したところがあり、そうした学校の子どもたちにも「おみせやさん」や電子マネーのシミュレーションを体験していただきたいとずっと考えていました。

そこでQRコードを使ったバージョンを開発することにしました。

Scratch関連図書の著者としても有名な杉浦学先生（鎌倉女子大学）が開発した拡張機能「QRコード」を使えば、ICカードのように識別番号を読み取らせることができます。

拡張機能QRコードならiPadからでも問題なく利用できるので、QRコードの付いた電子マネーカードをつくれば、iPadでもQRコードに対応したおみせやさんなら開くことができます。見た目変わっていませんが、ちゃんとQRコード対応です。

というわけで、iPadでもぜひ試してみてください。（これならStretch3サイトでも実行可能です）

　

---

QRコード付き電子マネーカードの作り方

ちょっと待って。

QRコードに対応したおみせやさんができたのは嬉しいけど、QRコード付き電子マネーカードって、どうやって作ればいいの？と思うかも知れません。

簡単です。ラベル屋さんサービスを使えば、QRコード付きのカードが作成できます。

ラベルシールのブランドで有名なA-oneが提供している無料サービスです。（マニュアル）

ラベルシールを購入してなくても普通のA4用紙に印刷するつもりでカードを作成できますので、積極的に活用しましょう。使用開始するとこんな感じの画面で進みます。ラベルシールの型番「31251」がA4サイズに10枚のカードラベルを作成するタイプのものです。カードを作るには「差し込み印刷作成」を選びます。

これは「差し込み印刷作成」を選択した際の画面ですが、ラベルシール型番「31251」を選択してデザインやレイアウトを作成していき、あらかじめ作成しておいた電子マネー登録リストを読み込んで、差し込み印刷して完成させます。

登録リストはエクセル（Excel）等でつくって、csvファイル形式で保存します。

ちなみに、QRコード化する情報は重複しないものであればどんなものでもよいです。

たとえば、2021年度の6年生の3組の25番の児童であれば…

「20216325」でもいいし、「2021-6-3-25」でもいいし、「21年度6年3組25番」という日本語でも可能だと思います。これを一人ひとりの識別キーワードにしてQRコード化します。

他にも、文部科学省が作成した教育データ標準の学校コードと学籍番号を組み合わせたものでもいいですし、子どもたちが一人ひとり決めた好きな言葉の組み合わせでもいいです。

決まった長さはありません。ICカードは16桁の16進数でしたが、識別するためには50文字もあれば十分かと思います。逆にいえば、識別できるのならそんなに長くなくてもいいです。

エクセルでつくるリストは名簿っぽくなっていれば大丈夫です。

　IDmってなっているところにQRコードにするキーワードを入力していきます。もちろん、学生番号をQRコードにしても問題ありません。csv形式で保存して、ラベル屋さんの最後の作業のところで読み込みます。

ラベル屋さんで読み込むと、同じように表が出てくるので、各列（A列とかB列とか）とデザインした部品を順にクリックすると結びつけられて、差し込み印刷ができます。

　

---

ICカードとQRカードって別？

ところで、ICカードとQRカードは別々に作ると、電子マネーも当然別々になりますよね、ふつーは。

ですが、ICカードで利用しているIDm（識別番号）をQRコード化してしまえば、２つは同じものになりますので、ICカードのお買い物とQRコードのお買い物を共通して決済できます。

では、両方に対応できるFelica QRカードを作ってみましょう！…というのは別のブログ記事に続きを書きたいと思います。IDm2GSSheetという道具を作っておきましたから。それで是非！

後半部分に［解説］があります。

おみせやさんプロジェクト

　

　

おみせやさんです。
しなものは 「りんご」が ひとつだけ よういされています。
ぜひ しなものを しいれたり、 じぶんで あたらしく つくって、 おみせの しょうひんを たくさん ようい してください。

1) みどりの はたで おみせの じゅんびが スタートします。
2) しなものを ようい します。
3) しなものを クリックすると ねだんを ネコちゃんが おしえてくれます。
4) じゅんびが できたら はい色の やねを クリックして かいてん します。
5) しなものを えらぶと ねだんが わかって ［ほしい］ボタンが でてきます。
6) ［ほしい］ボタンを おすと、［かう］［かわない］ボタンが でてきます。
7) ［かう］ボタンを おすと、おもちゃ電子マネーで おかねを しはらいます。
8) おかいものが できました。
9) カードざんだかから しなものの ねだんが ひかれて へります。
10) つぎの おかいものが できます。
11) おみせを へいてんするときは、 やねを クリックします。

※このプロジェクトは、カードリーダー（RC-S380）が必要です。

---

しなもの集

　

　

しなものスプライトです。
ここから しなものを バックパックに いれて おみせやさんに もっていく ことが できます。 おみせやさんで、 しなものに 「なまえ」と「ねだん」を プログラミングして ください。

---

対応サイト

https://stretch3.github.io/

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

---

［解説］

拡張機能 PaSoRich & NumberBankの特徴を活かしたデモンストレーションプロジェクトです。

電子マネーが使えるおみせやさんを開くことができます。

【まずは開店準備】

最初にスタートボタンを押すと準備中状態（屋根のひらひらが灰色）なので、その間に商品の準備をすることになります。

まだ「りんご」しか用意がないので、スプライトを追加して、品揃えを増やしていきます。自分で品物をデザインするのも楽しいですね。

困ったときには「しなもの集」も用意しましたので、利用してみてください。（イラストを提供してくれた、宮地さん、森岡くん、吉田さんに感謝。）

新しい品物には、りんごのコード（ブロック）をまねて商品の「なまえ」と「ねだん」を付けていきます。すると、品物をクリックしたときに店主のネコが商品を紹介してくれるようになります。

お店が狭いかも知れませんが、品物のサイズを調整しながら、品揃えと店内の配置を工夫してみてください。なお、あとから右下あたりにボタンが現われるので、少しスペースを空けておいてもらえると助かります。

【いざ、開店！】

屋根のひらひらをクリックすると開店して、ひらひらがカラフルになります。

欲しい品物を押すと、店主のネコが商品を紹介してくれるのは同じですが、画面の右下に［ほしい］ボタンが現われます。

その品物が欲しければ［ほしい］を押しますし、別の品物に関心があれば別の品物を押せば品物紹介が続きます。

仮に［ほしい］となったら、次に［かう］［かわない］ボタンが現われます。

［かわない］を押せば、品物定めが続きます。［かう］となったら次にお会計が始まります。電子マネーの出番です！

【お会計】

店主のネコが会計を始めます。

ここで電子マネーカードをカードリーダーにかざします。

ただ、初めての場合はカードリーダーの準備が終わっておらず、こんな風なメニューが表示されるかも知れません。

この場合は「RC-S380/P」を選択して［接続］ボタンを押してください。

さて、カードリーダーがうまく動作したとして、電子マネーカードをかざすといっても、どれでもいいの？と思うかも知れません。

もちろん、どれでもよくありません。

電子マネーカードはチャージする必要があります。けれども、その方法は後ほどご紹介することとします。

電子マネーカードをかざすと、店主のネコは電子マネーの残高を確認します。残高があって買い物ができれば、電子マネーカードから金額がひかれます。

この場合、もともと300円しかカード残高がなかったみたいですね。りんご200円の金額が引かれて、残高は100円となったようです。

なお、お会計処理中のカード残高は画面右上に表示されます。

以上が、おみせやさんでの買い物プロセスです。

なお、お店を閉店するときは、屋根のひらひらを押すと閉店して準備中に戻ることができます。

　

【電子マネーは共通利用可能】

電子マネーカードは、このあと紹介する銀行の裏側で決めてある「クラウドのなまえ」が同じであれば、複数のお店で共通に利用できます。

つまり、使った分だけちゃんと減ります。

使い過ぎれば、あっという間に残高が減ってしまいます。

電子マネーの利便性と思わぬ過剰消費行動を見直したり考えるきっかけになるのではないかと思います。

また、このプロジェクトはScratch3.0プログラミングの題材として使ってもらってもよいので、お店のサービスを充実させたり、買物をしやすくしたり、ポイントカードをつくったり等の課題を通して、プログラミングに挑戦してもらうこともできます。

お店の品物の準備では、オブジェクト指向的な考え方を、ちょっとだけ垣間見ることもできると思います。

　

---

【チャージはどうする？】

お店での電子マネー決済をシミュレートすることができるのはわかったとして、そもそも電子マネーのチャージはどうするのか。

少し現実と違いますが、このデモンストレーションでは銀行でチャージするという物語設定にしています。

これが銀行の画面です。

この画面例はスッキリしていますが、実際には、皆さんがお店に並べた商品がそのまま表示されているはずです。

実は、このおみせやさんプロジェクトには銀行画面が隠れていて、銀行の英単語の頭文字で出すことができます。

普段は隠しておくか無効化しておき、おみせやさんに特化して使ってもらう一方で、別の端末を「チャージ端末」として別途用意するという使い方が学習活動を考える際にも面白いと思います。

つまり、電子マネーはそう簡単にはチャージできないという設定です。

とにかく、銀行画面が登場したら、テンキーを使ってチャージしたい金額を入力してください。金額の最後に右下の［チャージ］キーを押せば、チャージ処理が始まります。画面例では2000円にしています。

銀行クラウド（くも）がカードをかざすように教えてくれますので、カードをかざせばチャージ完了です。

画面はお店の閉店状態に戻ります。

なお、電子マネーの残高を確認したい場合は、銀行画面にして、カードリーダーに電子マネーカードを置いてから、銀行クラウド（くも）をクリックすると残高が（2秒間程度）表示されます。

---

【実践報告 大歓迎】

このプロジェクトは学校の教材としてご活用いただいても大丈夫です。

フィードバックをいただけると改善改良もできると思います。どんな形でも構いませんので、もし可能であれば、実践でご活用された様子をご報告いただけると幸いです。

徳島文理大学 人間生活学部 児童学科 林向達 研究室
メールアドレス：rin _a_ tks.bunri-u.ac.jp （_a_部分を@に置き換え）

もちろんご質問やお問い合わせなどもお気軽にお寄せください。