子育てしていると誰しも通る
”ごっこ遊び”
一緒に子どもと遊びに参加しますが、
同じことを繰り返すことで
苦痛になることありませんか？
そんなとき、本気の”ごっこ遊び”を追求しようと思いたち、
作ってみたのがこちら！
これは、お買い物ごっこ遊びをするときの
お会計の計算に使うカード
です。
なんと、このコードをスマホで読み取れば・・・・
会計を自動計算してくれます！
”おもちゃの自動計算レジ”なかなか買えません・・・・
そこで、パパに相談して生まれたのがこのカード！
今回は、より本格的な”お買い物ごっこ遊び”に近づけるための
このカードの作り方を紹介します。
本格お買い物ごっこ遊び！自動計算コード作成の流れ
このコードの作り方は、次の手順で作ります。
- GASコードを入力し、自動計算するプログラムを作成する。（コピペでできます。）
- QRコード作成のスプレッドシートの準備をします。
- カードにQRコードを埋め込みます。
- 印刷してカードにします。（カードの用のファイルに入れること推奨します。）
難しそうなことも書いていると思いますが、
コピペで済むように準備済みです！
参考にしていただけると幸いです！
QRコード✖️スマホ！お買い物カード作成手順！
GASコードの入力、自動計算のプログラム作成！
まずは、スプレッドシートを開いてAppScriptにアクセスします。
「新しいプロジェクト」をクリックしましょう。
アクセスの仕方によっては、すでに以下の画像のような状態になります。
プログラムを書き込む部分を全て消してから、次のコード文を貼り付けてください。
var TOTAL_KEY = ‘total’;
function doGet(e) {
const scriptProperties = PropertiesService.getScriptProperties();
const params = e.parameter;
// リセット処理
if (params.reset === “true”) {
scriptProperties.deleteProperty(TOTAL_KEY);
return ContentService.createTextOutput(“合計をリセットしました”);
}
const input = params.num;
if (!input || isNaN(input)) {
return ContentService.createTextOutput(“⚠️ 有効な数値（num=◯）を指定してください”);
}
const value = parseFloat(input);
let total = parseFloat(scriptProperties.getProperty(TOTAL_KEY)) || 0;
total += value;
scriptProperties.setProperty(TOTAL_KEY, total);
return ContentService.createTextOutput(✅ ${value} を加算しました\n🔢 現在の合計: ${total});
}
「デプロイ」 ➡︎ 「新しいデプロイ」をクリックしていきます。
次の画面が現れます。
左上にある「歯車マーク」をクリックして、「ウェブアプリ」を選択します。
この画面が出てくるので、
ウェブアプリ ➡︎ 自分
アクセスできるユーザー ➡︎ 全員
と設定し、右下の「デプロイ」をクリックします。
アクセスできるユーザーを全員にしておかないと、
コードをスマホで読み取ったときに、
常にアカウントログインをしなければならず面倒でした。
すると、
このような画面が出てきます。
ウェブアプリのURLをコピーして、メモなどに貼り付けておきましょう。
次のコード生成で利用します。
以上でプログラムの作成は終了です！
お買い物ごっこ遊び、計算用QRコードの生成
読み取り用のコードはGoogleのスプレッドシートを利用して生成しました。
これもシンプルです。
このコードは
それぞれの値段に対応したもの
を作る必要があります！
①スプレッドシートのそれぞれのセルに以下を入力しよう！
A1セル：「価格」と書いておきましょう。
C1セル：先ほどのWebアプリURLを貼り付けましょう。
B1セル：『?reset=true』と入力しましょう。
A2セル：好きな価格を入力しましょう。
B2セル：『=HYPERLINK($H$1 & “?num=” & A2)』をコピペしてください。
これをB3以降にコピペしましょう。
次の画像が、
価格を130円とした場合の画像です。
B2で作り出したURLは、このコードを用いて計算した
価格の合計の値をリセットするためのものです。
このように準備すれば、B2セル以降にURLが生成されるはずです。
②B列に作り出したURLをコード化しましょう！
このURLをコード化していきます。
まずは、スプレッドシート上部にある「拡張機能」をクリックしましょう。
次の画像のようになります。
”QR Code Generator”をクリックして、”Open”をクリックしてください。
もしもこの”QR Code Generator”がない場合は、インストールが必要です。
『”QR Code Generator”拡張機能インストール』と検索すれば、インストール方法がわかります。Googleの拡張機能なので、スムーズです。
右側の設定は
・Large (200px)
・Save as Document ➡︎GoogleDocumentに保存してくれます。
・Save as PNG ➡︎画像で保存すれば、カードにそのままコピペできます。
のようにしてから、コード化したいURLであるBの列を選択し、
赤ボタンの「GENERATE」をクリックして
私はコードを生成しています。
生成し終えると以下になります。
私は、『Open Folder』をクリックし、コード画像をダウンロードしてしまいます。
ダウンロードするとコード画像の名前に番号がついていますが、どのコードがどの価格かわからなくなるので注意してください。
私は、実際にコードを読み取って確認しました。
お買い物ごっこ遊びカードの作成！
作成には、Canvaを使って作ってみました！
無料シリーズの画像や枠を組み合わせて作りました！
お買い物に使うもの（うちは100円均一などの商品）に合わせて、
- 商品イラスト
- 値段
をつけてみてください。
枠を作ることが大変だと思ったので、用意しておきました！
あとは、必要なイラストや先ほどの値段コードを添えて利用してください。
まとめ
今回は、本気でお買い物ごっこ遊びを追求するために、
スマホのコードを読み取ることで、自動計算してくれる仕組みづくり
をまとめてみました。
今後、
実際の作成したものや
使用のイメージ
子どもちゃんの実際の様子などを
紹介できたらと思います。
このブログを読んでくださったみなさんにも、素敵な時間がたくさん訪れますように。
※「QRコード」は株式会社デンソーウェーブの登録商標です。
コメント