ネットワークを利用した双方向性のあるコンテンツのプログラミング教材
ネットワークを利用したプログラムの例として、「ショッピングサイト」の教材を作成しました。
ブロック部品をドラッグして置くだけの簡単プログラミングです。Google Blockly を使ってJavaScriptのコードを作成して実行します。データは、Ajaxで非同期通信をサーバと行い、データベースに記録しています。
１ ショッピングサイトを作ろう
２ ショッピングサイトで買い物しよう
３ 売り上げランキングを見よう
以上３つのWebページでできています。
「ショッピングサイトを作ろう」の使い方
(1) 「画面に表示 スタート」のブロックを置きます。
(2) 「商店名」のブロックを置き、商店の名前を入力します。
(3) ショッピングカートを置きます。
(4) 商品を並べるワクを置きます。
(5) その中に商品を入れます。
ここで「実行」ボタンを押すと、ショップサイトの画面が作られます。
商品の写真、商品名、価格のカードが表示されます。
ブロックを入れ替えると、商品の表示順も変わります。
商品カードの「▲、▼」ボタンを押しても個数が変わりません。
↑これは、プログラムをまだしていないからです。
(6) 「▲ボタンが押された」を置きます。
(7) その中に、「個数を増やす(+1)」を置きます。
このままでは、無限に注文できるので、
(8) 「もし、個数＜５なら」を置き、
この中に「個数を増やす(+1)」を置くようにします。
→これで、最大注文数５に制限されます。
(9) 「▼ボタンが押された」を置きます。
(10) その中に、「個数を減らす(-1)」を置きます。
このままでは、注文数がマイナスにできるので、
(11) 「もし、個数＞０なら」を置き
この中に、「個数を減らす(-1)」を置きます。
→ これで、注文数がマイナスになることを防ぎます。
(12) 「カートボタンが押された」を置き、決済処理します。
(13) 「選択した全商品を表示」で商品名一覧と合計を表示します。
(14) 「データをサーバに送る」で買い上げ処理をします。
(15) 「もどるボタン」で、途中でやめることができるようにします。
ショッピングサイトに必要な最低の機能を,ブロック一つ一つに分けて
組み合わせてプログラミング学習できるようにしました。
さらに、セキュリティを学べる機能の追加を考えております。
「ショッピングサイトで買い物しよう」の使い方
(1) 「ショッピングサイトを作ろう」の「接続先アドレス」にとなりの人と、同じ値を入力します。
(2) 「実行」ボタンを押してください。
→ 接続先アドレスにショッピングサイトが出店されます。
(3) 「ショッピングサイトで買い物しよう」のページを表示します。
※ タブで表示を切り替えてください。
(4) 「ショッピングサイトで買い物しよう」の「接続先アドレス」にも同じ値を入力します。
(5) 「ショッピングサイトで買い物しよう」の「最新情報」ボタンを押します。
→ 自分と、となりの人のショッピングサイトが表示されます。
→ 商店名をクリックすると、右側に作成したショッピングサイトが表示されます。
(6) タブで「ショッピングサイトを作ろう」を表示されて、商品を追加してください。
→ 「ショッピングサイトを作ろう」の「実行」ボタンを押して、出店します。
→ 「ショッピングサイトで買い物しよう」→「最新情報」ボタン
→ 商店の商品が追加されたことを確認してください。
※ 同一コンピュータから、同一アドレスに出店できるのは１サイトのみです。
※ 商店名を変えても上書きされます。
※ プログラムを組んだとおりに作動します。不具合のあるサイトもそのまま表示されます。
↑評価に使ってください。（ただし、表示は１日のみです）
(7) クラス全体で、「接続先アドレス」を同じものにします。
※ 「接続先アドレス」は先生が指定してください。
(8) 「ショッピングサイトを作ろう」の「実行」ボタンを押して、出店します。
(9) 「ショッピングサイトで買い物しよう」で出店を確認します。
※ 「ショッピングサイトで買い物しよう」は、最新更新の順で表示します。
(10) クラス全体で、ショッピングモールを作って、売り上げを競いましょう。
「売り上げランキングを見よう」の使い方
(1) 「売り上げランキングを見よう」のページを表示します。
→「売り上げランキングを見よう」のページを選択します。
※ タブで表示を切り替えてください。
(2) 「売り上げランキングを見よう」の「接続先アドレス」にも同じ値を入力します。
(3) クラス全体で売れている商品ランキングを表示します。
(4) 売り上げを上げるために、追加したい機能を考えさせます。
(5) 買い物額のランキングも表示されます。
→ 使ったお金を支払うための「労働時間」について考えさせます。
→ お金を大切に使う心を育てます。