BlocklyでWebページをデザイン

BlocklyでWebページをデザインして表示するサイトを作成しました。JavaScript命令のブロックで動きをプログラミングします。

「ねそプロ」ウェブサイトを作ろう

この教材は、３つのWebページで構成しています。
○　ウェブサイトを作ろう　　←　サイト作成
○　ウェブサイトに画像登録　←　画像の登録
○　ウェブサイトを見よう　　←　作成したサイト表示
　↓　教材はこちら
http://iwate-manabi-net.sakura.ne.jp/nesopuro/

ビジュアル　→　テキストプログラミングへ

2020年から小学校ではプログラミング教育が始まります。多くの学校で教材としてScratch等のビジュアルプログラミング使って指導を行うと思われます。小学校で体験したビジュアルプログラミングからテキストプログラミングへ橋渡しをするための教材として開発しました。HTMLタグ命令のブロックを組み合わせてWebページをデザインします。JavaScript命令のブロックでインタラクティブなページを作成できます。作成したプログラムをテキストとして表示します。ブロックで作成したビジュアルプログラムとテキストを見比べることでWebページの基本を理解させることができます。このテキストをメモ帳等に貼り付け、拡張子を.htmlとして保存するとWebページになります。ブラウザから起動するとボタン等も作動します。

双方向性のあるコンテンツ

2021年から中学校で実施される学習指導要領　技術・家庭　解説において、「コンテンツのプログラミングによる問題を解決する学習活動としては、例えば、学校紹介の Web ページにＱ＆Ａ方式のクイズといった双方向性のあるコンテンツを追加」と示されています。そこで、次のサンプルを作成しました。
○　２択クイズ
○　英単語クイズ（テキスト入力）
○　APIを使って「天気」「地図」を表示
　命令ブロックの組み合わせで様々なデザイン、作動を刷るページの作成ができます。さらに、APIを使って他のWebで公開されているデータの活用も体験できます。

「命令ブロック」について

HTMLとJavaScript命令のブロック、外部Webサイトの画像やAPI等を読み込むブロックを用意しています。

HTML命令ブロック

見出し（特大）　<h1>
見出し（大）　　<h2>
改行　　　　　　<br>
段落　　　　　　<p>
文字色　　　　　<font color='red'>
文字の大きさ　　<font size='4'>
センタリング　　<div align='center'>
グループ　　　　<div id='Group'>
ボタン　　　　　<button id='B'>
文字入力　　　　<input type='text'>
画像表示　　　　<img src='sample.jpg'>
　※　「ウェブサイトに画像登録」からアップロードした画像を表示します。
　※　登録した当日の画像のみ表示します（過去の画像は表示しません）。

JavaScript命令ブロック

ボタンが押された　　addEventListener('click', function(){})
グループを非表示　　style.display ='none'
グループを表示　　　style.display ='block'
グループ内容を削除　textContent = null
グループに追加　　　insertAdjacentHTML('beforeend','')
条件分岐　　　　　　if(A=='こたえ'){}else{}
くり返し　　　　　　for (var count=0; count<5; count++){}

外部Webサイトの画像やAPI等のブロック

天気予報（気象庁）　<img src='http://www.jma.go.jp/jp/yoho/'>
天気図（気象庁）　　<img src='http://www.jma.go.jp/jp/g3/'>
降水量（気象庁）　　<img src='http://www.jma.go.jp/jp/amedas/'>
Googleマップ　　　　<iframe src='https://www.google.com/maps/'>

これらの命令ブロックを組み合わせて、Webページを作成します。この実習を通して、生活の課題をネットワークを活用したプログラミングによって解決する方法を考えさせます。