2021年度

概要：

高校の教科「情報」科担当教諭及びプログラミング技能を学びたい高等学校各科教諭を対象に、教育利用を想定してその基礎となるプログラミング技能を実習を通して教授する。前半では、Javaの開発環境であるEclipseを導入し、簡単なプログラム制作からデータ整列アルゴリズムなどの実装を通してアルゴリズムの考え方を学ぶ。後半では、関数型プログラミングの考え方を学び、メディア作品の制作を行う。

後半の演習内容

CGとサウンドのプログラミング

Snap!について

ビジュアルプログラミング言語として有名なscratchを改造して開発されたビジュアルプログラミング言語。

scratch2.0が元になっている。現行のscratch3.0の流れは汲んでいない。
旧名はBYOB (build your own blocks)。検索する際は snap! byob がヒットしやすい。

scratchからの拡張の方向性は、１．グラフィックスおよびサウンド処理のアルゴリズム　２．高階関数（関数を処理する関数）と関数型プログラム　３．（Schemeの）継続渡しによる制御構造の定義　４．スプライト関連のオブジェクト化などコンピュータサイエンスの学習に向けられている。

Webサイト https://snap.berkeley.edu/ アカウント作成なしでWeb上でSnap!を実行できる

リファレンス＆チュートリアル　https://snap.berkeley.edu/snap/help/SnapManual.pdf
スプライトの階層化、メソッドを持つオブジェクトの実装、並列実行などの応用例含む

日本語解説 http://153.127.198.12/aizu/aboutSnap.pdf　Snapのこと（入門テキスト）by 斎藤 ＠ CoderDojo 会津

GitHub https://github.com/jmoenig/Snap　ソースコード。DLしてローカル環境（インターネットなし）でも実行可能。要イントラサーバ。

Snap!の起動と設定(1/11)

この演習用にSnap!を設定メニューから調整する。
https://snap.berkeley.edu/を開いて「Run Snap! Now」をクリックする。

調整内容（1/2）

・歯車アイコン　→　言語　→　日本語
・歯車アイコン　→　ブロックをズーム　→　1.3（見やすいサイズに）
・歯車アイコン　→　Fade blocks　→　90（見やすい配色に）
・歯車アイコン　→　JavaScript extentions（ONにする）
・歯車アイコン　→　Flat design（お好みでONにする）

調整内容（2/2）※
Snap!に拡張機能ブロックを追加する。

・ファイルアイコン　→　Libraries　→　List utilities　→　Import
・ファイルアイコン　→　Libraries　→　Text costumes　→　Import

※次のステップで読み込むプログラムファイルに追加済み。省略可能。

教材のプログラムファイルを読み込む(2/11)

パソコンのデスクトップのファイル

ファイル名　snap20210824.xml

・ファイルアイコン　→　読み込み　→　ファイルを選択　→　開く

練習用のブロックやコードの半完成品が配置されている状態になる。
以下のシナリオに従ってブロックの機能を確認しながらコードを作成して演習を進める。

リスト(3/11)

リストの生成と基本操作
Snap!では数値や文字やその他（画像など）のデータをリストにまとめて扱うことができる。

・リストに含まれる要素の数をリストの長さ（length）と呼ぶ
・空のリスト（中身無し）がある。長さは０
・リストは異なるタイプのデータを含んでよい
・リストはリストを要素としてよい（入れ子のリスト）

‐ リストのリストを「表」と考えることができる
‐ 3重の入れ子のリストは表計算のシート＋表と考えてもよい
‐ 自由に棚を追加してレイアウトできるシステム収納の様なもの。棚の入れ替えや小分けの仕切り稼働棚の様にまとめて扱うこともできる。

・リストのサイズは可変で増減可能

リストの例
Snap!の画面でList1スプライトを選択して、以下のように画面を構成する。
リスト関連のブロックは変数のツールに分類されている（左側）
リストをクリックすると中身が表示される

練習　次のようなリストを作成する。足らないブロックはツールボックスからドラッグして取り出すか同種のブロックを　右クリック→複製　して作る。

変数をリストの要素に指定した場合の挙動を確かめる。変数の値がコピーされてリストに入る。

余談　変数自体をリストの要素に持たせる。変数の参照渡しやポインターという概念を扱うにはSnap!ではブロックの右クリックメニューから　リング化・非リング化　と　呼ぶ　ブロックを組み合わせて書く。

練習　リスト操作
以下の様にリストに関するブロックの機能を確かめる。Snap!のブロックの引数（空欄）は配置可能なブロックのタイプを明示したものがある。リストを配置可能な引数は「リストアイコン」になっている。
入れ子のリストのサイズは一番外側のリストの要素数であることに注意する。

リスト構造とリスト処理(4/11)

練習 List2スプライトをクリックして入れ子のリストの操作を確認する。
ここでは、リストを変数に格納して変数名を通して扱う。

• リストを変数に格納

• 複雑な構造のリストを作成してみる

• 構造を辿ってリストの要素にアクセスする

• 最後の1つ手前の要素にアクセスする

• columns（列）で表の行と列を入れ替える

• flatten（フラット化）でリストの要素を再帰的※に辿ってアクセスする
  ※リストの要素がリストならその要素を辿り、その要素がリストならさらに辿り、・・・

リストの変換(5/11)

練習　List3スプライトのコードを組み立てる。 mapブロックはコードブロック（灰色のリング部分）とリストを引数に取り、リストの各要素を1つづつコードブロックで変換して新しくリストを生成する。

各種変換（数値計算・文字化）の例と　出席番号・文字・点数のリスト処理の例

　成績リスト（出席番号・文字・点数）を　リストに追加　操作で行っている。

リストの要素の集計と並べ替え(6/11)

練習　List3スプライトを続けて使用する

ここで紹介する combine と sort と keep items およびこれまで利用してきた map は高階関数と呼ばれるブロックで、引数に（リング化された）コードブロックを取るものである。

関数スタイルのプログラミング
基本的な高階関数を組み合わせ（合成）してデータを変換するようにコードを作成する。

以下は、成績リストを集計して平均点を求めたり、不合格者を抽出する例

絵文字と文字コード(7/11)

時間に余裕がある場合に扱う。Emojiスプライトでは

Snap!の文字列はUnicodeを使用している。Unicodeはマルチバイトのコードで1文字が1バイトまたは複数バイトで構成されているため文字列処理で注意が必要になる。
ここではJavaScriptをSnap!と組み合わせて処理する例を示す。

ここでは colums（行列変換）の別の例 zip を導入する。zipは複数のリストを引数に取り、1つにまとめてから行と列を変換する。
また、辞書検索の例として assoc を紹介する。assocは 見出し(key)と値(value)をペアにしたリストのリストから見出しを指定してその値（と見出し語のペアのリスト）を取り出す。

ランダム演奏(9/11)

reshapeブロック　リストの要素を指定した並び（1列ｘ要素数　～　ｍ行ｎ列　～）のサイズに再構成する。再構成の際に要素が不足する場合は変換元のリストの先頭の要素に戻ってリピートする。

multimapブロック　複数のリストを引数に取り各リストから一つづつ要素を取り出して変換処理する。処理結果は新しいリストとして生成される。

キネティック・タイポグラフィ(10/11)

練習　Animスプライトを利用して以下を確認する。

文字列（絵文字）から文字スプライトを生成してアニメーションする。

tellブロック　スプライト（またはそのクローン）を指定して引数のコードを実行させる。
map または multimap は引数のリストを先頭から順に処理して変換する。
以下の例ではmapとtellによりリストの要素をコードとして実行する。
つまりプログラムをリストデータとして順次実行している。

起動ブロック　引数のコードを並列実行する。引数のコードの実行完了を待たずに引き続くコード並列実行する。
以下の例では、map tell 起動　の組み合わせによりリストの各コードを並列して実行している。

確認課題(11/11)

List1～Animのスプライトをコピーするかスプライトを新規作成して作品を制作する。
スプライトを　右クリクック→複製　でコードを含むすプライをコピーできる。
スプライトの新規作成はタートル（矢印アイコン）をクリックする。
他のスプライトにブロックをコピーするには、ブロックをコピー先へドラッグする。

（ヒント）

・リスト中の数値や文字列データの差し替え・変更から手を付けて、リストのサイズの増減に進む。
・教材のスプライトに予め置かれていないブロックの利用方法を考える。既存のブロックを別のものに差し替えたり追加する。例　進む　→　?度回す
・サウンド出力 play frequency を他のコードに組み込む。
・成績処理のコードで生徒の人数を行として3列のデータ　出席番号・科目１の点数・科目２の点数　を含むリストを作る（表の形になる）
・科目ごとに成績を処理（集計など）するコードを作成する。

・コメント機能を利用してプログラムによるデータ処理の利用例を企画する。文章で構想を記述する。今回の講座で紹介していない機能（カメラやマイク、画像の調整など）を想定してもよい。
例）集合写真（入力データ）から生徒の顔を識別して名前をリストアップ（出力データ）する。

保存方法

ファイルアイコン→　名前を付けて保存→　Computer（選択する）　→　保存