Snap!入門

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
 スプライトの階層化、メソッドを持つオブジェクトの実装、並列実行などの応用例含む

日本語解説 https://fumiyasu-aizu.github.io/　Snapのこと（入門テキスト）by 斎藤 ＠ CoderDojo 会津

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

Snap! ver.9がでていました2023.11

Snap!演習

Snap!の操作はパソコンが前提です。

iPadから操作することもできますが操作に難がある場合があります。

iPadでSnap!を使用する際はブラウザは Safariを使用してください。Chromeを使用するとファイルの保存が出来ません。
 パソコンでブロックを右クリックする操作（メニュー表示）はiPadでは長押しでできます。

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

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

※2023.9.12　サイトに負荷がかかっていて開かない場合は　https://snap.berkeley.edu/snap/snap.html　こちらを開く


調整方法

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

設定メニュー

設定例

リスト(2/4)


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

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

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

・リストの長さ（サイズ）は可変で増減可能

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

Webクラスの課題1に資料として以下のSnap!のコードファイルを添付しておく。Snap!の画面にドラッグアンドドロップかファイル読み込みで利用してよい。

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

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

変数を作るにはオレンジ色の変数のブロックカテゴリーから、「新しい変数を作る」をクリックして変数名を入力する。

以下の例では、xs と ys という名前で変数を作ってある。それぞれの変数ごとに操作する必要がある。

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

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

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

リストの変換(4/4)

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

各種変換（数値計算・文字化）の例

応用１

6個のダイスを用意してまとめて振った結果を求める。

6個のカスタムダイス（１～６の数字の代わりに文字や記号が書いてある）をまとめて振った結果を求める。

参照：　んこダイス(Steamゲーム)　/　Wikipedia

Snap!課題1

ゲームの道具をリストで表現する。表現範囲は部分的でよい。あるゲームの一部分やあるゲームの盤面の様子を表現する。

リストブロックにコメント※を付けてリストの要素が何を表しているか示す。

※コメントを付けるにはブロックを右クリック（iPadは長押し）でメニューを表示して「コメント」を選択

例）

　ゲームの盤面（将棋や囲碁などマス目に区切られたもの、RPGのマップ、コマの配置されたゲームステージ、パズルの面）

　ゲームのコマ（コマの能力を表現する）

　カードのセット（花札やトランプの一式、TCGのデッキ）

　カードの内容

　キャラクターとそのステータス

（ヒント）

Snap! は csv 形式のファイルをDnD(ドラッグ＆ドロップ)でリスト化することができる。
csv形式のファイルはExcelで作成した表を保存する際に形式指定することで作成できる。

これを利用してExcelファイルからリストを作成することができる。

（ヒント）

今回の課題はゲームの道具の内部表現（プログラムで扱う変数やリストなどのデータ構造）やゲームの状況（局面）の内部表現について考えるものである。

したがって実際のゲーム画面を表示する際のグラフィックなどは考慮しなくてよい（カードの絵など）

ゲームで敵と味方のコマの区別するにはチェスの様にBQブラックのクイーン、WKホワイトのキングと名称で区別するかデータ構造にチーム名などの欄を設けること。

提出方法

Snap!の画面をスクリーンショットしてWebclassのSnap!課題1にアップロードする。

提出〆切

採点するまで（次回講義日以降～期末課題〆切までに採点する）。

例）

課題のリスト構造について補足

ゲーム用のデータ構造をリストで表現する場合に項目名をデータに含めない場合と含める場合について

通常は項目名は含めない

項目名を含む場合は連想リスト（辞書）を使う前提で。

詳細はWebclassにSnap!のコードのサンプルを添付したので参照。また以下のTweet（長いので辿って）にも記載した。