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

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コード化してしまえば、2つは同じものになりますので、ICカードのお買い物とQRコードのお買い物を共通して決済できます。

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

ICカードIDmをスプレッドシートに記録

PaSoRiで読み取ったIDm(識別番号)をGoogleスプレッドシートに記録するWebアプリの紹介です。

 
皆さんがGoogleアカウントで使っているGoogleスプレッドシートに対して読み書きを行なうタイプのWebアプリです。そのためリンクをクリックすると認証手続きを求められます。初めてアクセスした時に行なう認証の仕方は解説動画より下の後半に。

 


Webアプリ IDm2GSSheetの使い方

まずスプレッドシートを準備します。

この例はいくつかシートを作ったあとのものですが、真新しい「シート1」のみので名簿を入力したり、取り込んだりしたもので大丈夫です。

下のシートのようにFelicaカードのIDmを記録したいと考えます。その作業にWebアプリを使うため必要な情報も以下の通りです。(スプレッドシートIDは〜d/と/edit〜に挟まれた部分です)

「スプレッドシートID」「シート名」「確認列No」「記録列No」をWebアプリに入力します。

これらを入力したら[設定]ボタンをクリックします。のんびり動作する場合もあるので、確認表示がでるまで少し待っていてください。

次にICカードリーダーによる読み取りと記録の作業です。

SONY RC-S380(PaSoRi)を準備します。そもそもこのWebアプリは、WebUSBという機能に対応したWebブラウザ(たとえばGoogle Chrome)とICカードリーダーのPaSoRiが必要になります。

Googleスプレッドシートが正しく設定されていれば、上の画面が次のような画面に調整されます。

スプレッドシートの確認列(2列目)の2行目にある「徳川」が表示されているのが分かると思います。

ここから[PaSoRiで読み取り]ボタンをクリックして、ICカードの読み取りを始めます。初めてICカードリーダーを接続して使い始めた時にはデバイスの選択メニューが表示される場合があります。「RC-S380/P」を選択して[接続]ボタンを押します。

PaSoRiにカードをかざしてください]と表示されているのでICカードをかざすとIDmが表示されます。ここで徳川さんの行にIDmを記録したい場合は[記録]ボタンを押します。

記録が完了すると自動的に行が加算されて、確認列の次行(東野)が表示されます。ICカードを別のものにかざし変えてから[記録]ボタンを押せば、次から次とIDmを記録することができるわけです。

途中で別の行を記録したい場合や、やり直したい場合などは、手動で行数を変更してください。UpDownボタンまたはスライダーを使って変更することができます。のんびり動作する場合があるので、行を変更した後、確認列の表示が変わるまで少し待ってあげてください。

自動的に最後の行までいった場合、記録は新しい行を追加する形でどんどん記録は続けられます。対応する番号や名前をスプレッドシートに用意できていなくても、IDmを先にどんどん記録して後から名簿を加えることもできます。

できあがったリストや名簿は、Webアプリと関係なくGoogleスプレッドシートでご自由に利用できます。ダウンロードからcsvファイルを書き出すこともできます。

ぜひご活用ください。

 


認証方法

IDm2GSSheetへのリンクを初めてクリックすると、下のような認証手続きを開始する画面になります。(Googleにログインしてない場合は、まずログイン画面が出ます。ご自身のアカウントでログインしてください。)

「con3officeによるIDm2GSSheetというWebアプリがあなたのデータへのアクセスを求めている」というメッセージなのですが、このWebアプリは私個人で開発したものなので、信頼していただけるようであれば作業を続けます。

REVIEW PERMISSIONS]ボタンで認証手続きを開始します。別のウインドウが開きます。

「アカウントの選択」で記録に使うGoogleスプレッドシートに対応するアカウントを選びます。必要があれば「別のアカウントを使用」でログインをします。

Googleの確認がない自作Webアプリのため、このようなメッセージが表示されます。心配な方は、ここで使用を取り止めることができます。

これからやろうとしていることが分かっている皆さんは、ここで「詳細」をクリックすると次のような表示が現れて手続きが続きます。

現れた「IDm2GSSheet(安全でないページ)に移動」をクリックすることで認証手続きは次に進みます。

ここであらためて今回のWebアプリ「IDm2GSSheet」が皆さんのGoogleドライブのスプレッドシートをアクセスすることに対して[許可]するかどうかを選択します。許可するとサイトが現れます。


IDm2GSSheetの開発には以下の情報が参考になりました。感謝します。

WebUSBでFeliCaの一意なIDであるIDmを読む(Qiita)
Google Apps Script Webアプリ開発 超入門』(秀和システム)
GASの実行権限や共有権限の仕組みについて解説(初心者でもわかるGoogle Apps Script活用のススメ)

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

後半部分に[解説]があります。

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

 

 

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

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_部分を@に置き換え)

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