東京都立立川高校の授業「情報の科学」でピクトグラミングを使用しました。

授業で使用したスライド資料を公開します(本記事最下部)。

本授業は自由制作時間が多くなるよう設計しました。
その時間は生徒同士が自由に閲覧しあい、
自由に発言できるようにしています。

授業では逐次処理繰り返しを身体動作と関連付けて学びます。

逐次処理の命令で思い通りの動作をしている場合でも、
その処理を 繰り返し で動作するように改造する過程で
思い通りに動かないことが多いです。

そのときには まるでピクさんの関節が外れたかのように動作し
元々の意図とは全く異なる動作します。

いわば失敗プログラムになっていますが
そのときの動作が面白おかしく、失敗が面白い時間になりました。

なぜ意図通りの動きをしなかったかを 生徒自身が自分自身の身体を動かしたり、
生徒の書いた命令どおりに 生徒の前で先生が動いてみせ、
どのような命令にすると意図通りに動くかを生徒が考えるよう 教員は支援しました。

授業の最後のまとめの段階で初めて「プログラミング」とい言葉を提示しました。

授業アウトライン

 

表内の[ ]は、本ページ最下部に提示しているスライド資料のスライド番号を示しています。

時間(分) 内容
0~5 ピクトグラム概論 [1~4].
 - (非常口マークの人を開放する)
 - ピクトグラムとは
 - ピクトグラムは社会の写し絵である
5~10 Pictogrammingへ アクセス(一斉操作)[5].
 - GoogleChrome指定
 - Pictogrammingにアクセス
 - editorに遷移

Pictogramming初期設定(一斉操作)[6].
 - 言語モードを 初期設定の日本語 から Englishに
 - ボタン非表示モードに

作品制作1(各自)[7~9].
 - 人型ピクトグラムを自由に触る
 - 作品を一つ作る
 - タイトルをつける

10~15 注意等の表示方法の説明(一斉説明)[10].
 - 操作方法の説明

作品制作2(各自)
 - 人型ピクトグラムを自由に触る
 - 各自作品を1つ作る
 - 作品にタイトルをつける

適宜互いの作品を見合う。
また、生徒画面をモニタに表示し
(授業が活気づくような)コメントを教員がする。

15~20 プログラムの読み方の説明[11~13].
 - 逐次処理の説明
 (※逐次処理という言葉を使用せず,
 自身の身体を動かすことを言語化することに着目して。)
 - Pictogrammingの命令の説明  (RW)
 - 体の部位の指定箇所の説明(BODY,LUA等)

 - アニメーション説明[14].

20~40 作品制作3(各自)

 - アニメーション作品を作る
 - タイトルをつける

適宜互いの作品を見合う。
また、生徒画面をモニタに表示し
(授業が活気づくような)コメントを教員がする。

40~50 ・提出[15~16].
・自己評価
・まとめ、反省

スライド資料

PDF
PowerPoint(2016で作成)
slideshare

授業風景と作品例

後日提示します。