PowerPoint プレゼンテーション

Transcription

1 2Scratch の操作説明 平成 29 年度 ICT 活用教育研修会 九州工業大学齊藤剛史 2017 年 8 月 21 日

2 2 目次 1. Scratchを試す 2. Scratchを学ぶ 3. ブロックの操作 4. アニメーションにチャレンジ 5. Tips

3 3 目次 1. Scratchを試す 2. Scratchを学ぶ 3. ブロックの操作 4. アニメーションにチャレンジ 5. Tips

4 4 必要な動作環境 OS Windows Chrome OS Mac Linux Web ブラウザ Chrome Firefox Safari Edge Internet Explorer インターネット接続 オフラインエディタを利用することで インターネット接続なしで Scratch プロジェクトを作成が可能

5 5 必要な動作環境 OS Windows Chrome OS Mac Linux Web ブラウザ Chrome Firefox Safari Edge Internet Explorer インターネット接続 オフラインエディタを利用することで インターネット接続なしで Scratch プロジェクトを作成が可能

6 1. Scratch を試す パソコンを使います

7 7 取り組み内容 1. Scratch 公式ウェブサイトにアクセスする 検索サイト (Google など ) から 直接アクセス 2. プログラムを作る 3. プログラムに名前をつける 4. 手元のコンピュータにダウンロードする 5. 手元のコンピュータからアップロードする

8 ブラウザ (Chrome) の起動 8

9 9 ブラウザ (Chrome) の起動画面

10 Scratch 公式ウェブサイトにアクセス (1/3) 10 Google などの検索画面

11 Scratch 公式ウェブサイトにアクセス (2/3) 11 scratch と入力する

12 Scratch 公式ウェブサイトにアクセス (3/3) 12 Scratch Imagine, Program, Share をクリックする

13 13 Scratch 公式ウェブサイト 作る をクリックする

14 14 プログラムを作る (1/9) をクリックする

15 プログラムを作る (2/9) 15

16 16 プログラムを作る (3/9) (1) イベント をクリックする (2) をドラッグして

17 17 プログラムを作る (4/9) (3) スクリプトエリアにおく

18 18 プログラムを作る (5/9) (4) 見た目 をクリックする (5) をドラッグして の下につなげる

19 19 プログラムを作る (6/9) (6) をクリックする Completed!!

20 20 プログラムを作る (7/9) Hello! が表示された

21 21 プログラムを作る (8/9) (7) をクリックする Hello! が消える プログラムが終了した

22 22 プログラムを作る (9/9) (2) をクリックする (1) Hello! でなく別の言葉を試そう

23 23 取り組み内容 1. Scratch 公式ウェブサイトにアクセスする 検索サイト (Google など ) から 直接アクセス 2. プログラムを作る 3. プログラムに名前をつける 4. 手元のコンピュータにダウンロードする 5. 手元のコンピュータからアップロードする

24 プログラムに名前をつける (1/2) 24 Untitled を消して プログラムの名前を入力する

25 プログラムに名前をつける (2/2) 25 例えば Hello! と言うプログラム と入力する

26 26 取り組み内容 1. Scratch 公式ウェブサイトにアクセスする 検索サイト (Google など ) から 直接アクセス 2. プログラムを作る 3. プログラムに名前をつける 4. 手元のコンピュータにダウンロードする 5. 手元のコンピュータからアップロードする

27 プロジェクトのアップロードとダウンロード Scratch では パソコンに保存されているプロジェクトを読み込む ( アップロード ) 作成したプロジェクトを利用しているパソコンに保存 ( ダウンロード ) できる ただし ブラウザをシークレットモードで利用している場合はダウンロードできない 27

28 プロジェクトのアップロードとダウンロード アップロードとダウンロードについて 28 ブラウザアップロードダウンロード 通常モード ( 非シークレットモード ) シークレットモード

29 ウェブブラウザ オフラインエディターサインイン有 無によるメニューの違い 29 Scratch のユーザ登録をすると 異なるメニューになる オフラインエディターはウェブブラウザと 異なるメニューになる ウェブブラウザ利用サインイン無し ウェブブラウザ利用サインイン有り オフラインエディター

30 手元のコンピュータにダウンロード (1/4) ウェブブラウザ利用の場合は 非シークレットモードでダウンロードする オフラインエディター利用の場合は 手元のコンピュータにダウンロード でなく 名前をつけて保存 を選ぶ 30

31 手元のコンピュータにダウンロード (2/4) 31 (1) ファイル - 手元のコンピュータにダウンロード をクリックする

32 手元のコンピュータにダウンロード (3/4) ファイルの保存場所を適切に選ぶ ファイル名は デフォルトでは プロジェクト名.sb2 となるが変更しても良い (2) 保存場所とファイル名を確認し 必要に応じて変更する (3) 保存をクリックする 32

33 手元のコンピュータにダウンロード (4/4) プロジェクトがファイルとして保存される 33

34 Scratch( ブラウザ ) の終了 (1/2) 34 をクリックする

35 Scratch( ブラウザ ) の終了 (2/2) 35

36 もう一度 Scratch を起動する

37 37 Scratch の起動 作る をクリックする

38 38 取り組み内容 1. Scratch 公式ウェブサイトにアクセスする 検索サイト (Google など ) から 直接アクセス 2. プログラムを作る 3. プログラムに名前をつける 4. 手元のコンピュータにダウンロードする 5. 手元のコンピュータからアップロードする

39 手元のコンピュータからアップロード (1/7) オフラインエディター利用の場合は 手元のコンピュータからアップロード でなく 開く を選ぶ 39

40 手元のコンピュータからアップロード (2/7) 40 (1) ファイル - 手元のコンピュータからダウンロード をクリックする

41 手元のコンピュータからアップロード (3/7) sb2 ファイルが保存されているフォルダに移動する 開きたい sb2 ファイルを選択する 41 (2) 開きたいファイルを選択する (3) 開くをクリックする

42 手元のコンピュータからアップロード (4/7) 42 (4) 現在のプロジェクトを置き換えるか質問される 置き換える場合は OK をクリックする

43 手元のコンピュータからアップロード (5/7) 43 プロジェクトが読み込まれる

44 手元のコンピュータからアップロード (6/7) 44 をクリックする

45 手元のコンピュータからアップロード (7/7) 45 Hello! が表示された さっきと同じ動作になった?

46 46 目次 1. Scratchを試す 2. Scratchを学ぶ 3. ブロックの操作 4. アニメーションにチャレンジ 5. Tips

47 2. Scratch を学ぶ パソコンは使いません

48 48 Scratch の画面構成 ステージ スプライトリスト ブロックパレット スクリプトエリア

49 49 スプライト スプライト = 着せ替え自由のキャラクター画像

50 50 ステージ ステージ = スプライトが動き回る舞台 スプライトを動かす スプライトの見かけを変化する

51 51 ステージと座標 ステージの大きさは横幅 480 画素 縦幅 360 画素 480 画素 ( 240, 180) +180 (0, 180) (240, 180) Y 座標 ( 240, 0) 240 X 座標 (0, 0) (240, 0) 画素 ( 240, 180) 180 (0, 180) (240, 180)

52 52 スクリプト スクリプト = 俳優 スプライト のための台本

53 53 ブロック ブロック = 命令

54 54 ブロック 10 グループに分かれている グループ名説明ブロック数 動きスプライトを右や左に動かしたり 回転させたりするブロックのグループ 17 見た目 スプライトにセリフを言わせたり 表示したり隠したりするブロックのグループ 19 音音の種類を変えたり 音の大きさを変えたりするブロックのグループ 13 ペンステージに何かを書いたりするブロックのグループ 11 データ 変数 を作ったり それに関係する操作をするブロックのグループ - イベント何かのできごとをきっかけにプログラムを動かすブロックのグループ 8 制御どのブロックを実行するかを思い通りにするためのブロックのグループ 11 調べるスプライトやキーボードの状態などを調べるブロックのグループ 20 演算計算をするためのブロックのグループ 17 その他上記に当てはまらないブロックのグループ - 合計 116

55 動き 55

56 方向の種類 56

57 見た目 57

58 音 58

59 59 ドラムの種類 18 種が用意されている (1) スネアドラム (10) ウッドブロック (2) バスドラム (11) カウベル (3) サイドスティック (12) 三角形 (4) クラッシュシンバル (13) ボンゴ (5) オープンハイハット (14) コンガ (6) 閉じたハイハット (15) カバサ (7) タンバリン (16) ギロ (8) 拍手 (17) ビブラスラップ (9) クラーベ (18) オープンクイーカ

60 ペン 60

61 イベント 61

62 62 キーの種類 キーボードにあるキーを利用できる スペース上向き矢印下向き矢印右向き矢印左向き矢印 any a, b,, z 0, 1,, 9

63 制御 63

64 調べる 64

65 演算 65

66 66 目次 1. Scratchを試す 2. Scratchを学ぶ 3. ブロックの操作 4. アニメーションにチャレンジ 5. Tips

67 3. ブロックの操作 パソコンは使いません

68 68 ブロックの操作 ブロックをつなげる ブロックをはなす ブロックを移動する ブロックに入力する ブロックにブロックをはめ込む ブロックを複製 ( コピー ) する ブロックを削除する ブロックのドロップダウンから選ぶ スプライトの実行と中止方法

69 69 ブロックをつなげる (1/3) ブロックの凹凸に注意する パズルみたいなもの Cap block Hat block C Block Stack block Boolean block Reporter block

70 70 ブロックをつなげる (3/3) ブロックの凹凸に注意する パズルみたいなもの つなげられる つなげられない

71 71 ブロックをはなす はなしたい下側のブロックをドラッグアンドドロップする 下側にドラッグする ブロックがはなれる

72 72 ブロックを移動する 一番上のブロックをドラッグする ブロックにブロックがはめ込まれた部分をドラッグすると はめ込まれた部分だけが移動する ( はなされる ) 一番上のブロックをクリックする ブロックの影ができる ドラッグして移動する

73 73 ブロックに入力する ブロックの白い部分をクリックすると キーボードで文字や数字を入力できる 白い部分をクリックする 黒く反転する 文字や数字を入力する

74 ブロックにブロックをはめ込む (1/3) ブロックのすきまにブロックをはめ込む 74 C 型のすきまブロックを近づける ブロックのすきまにブロックをはめ込む

75 ブロックにブロックをはめ込む (2/3) ブロックのくぼみにブロックをはめ込む 75 ブロックのくぼみブロックを近づける ブロックのくぼみにブロックをはめ込む

76 ブロックにブロックをはめ込む (3/3) ブロックのくぼみにブロックをはめ込む 76 ブロックの白い部分ブロックを近づける ブロックの白い部分にブロックをはめ込む

77 77 ブロックを複製 ( コピー ) する 作成したブロックと同じブロックを複製できる コピーしたいブロックを右クリックして 複製 を選ぶ コピーされたブロックがマウスカーソルにくっついているため 置きたい場所で左クリックする 複製されたブロック ブロックを右クリックする メニューから 複製 を選ぶ

78 78 ブロックを削除する 不要なブロックを削除する ブロックを右クリックして 削除 を選ぶ 削除したいブロックを右クリックする メニューから 削除 を選ぶ ブロックが削除される

79 ブロックのドロップダウンから選ぶ ブロックには いくつかの項目から内容を選べるものがある 右側の マークをクリックして 表示された中から使うものを選ぶ 79 マークをクリックする メニューから選ぶ

80 80 スプライトの実行と中止方法 ブロックをクリックすると実行される もう一度ブロックをクリックすると実行が中止される をクリックすると実行される をクリックすると実行が中止される クリックして実行 クリックして中止 ブロックをクリックする 実行される

81 81 ブロックの整理 スクリプトエリアのブロック以外の場所で 右クリックしてメニューから clean up を選択する 自動的にブロックが整理される ブロック以外の場所で右クリックする メニューから clean up を選ぶ ブロックが整理される

82 82 目次 1. Scratchを試す 2. Scratchを学ぶ 3. ブロックの操作 4. アニメーションにチャレンジ 5. Tips

83 4. アニメーションにチャレンジ パソコンを使います

84 84 アニメーションにチャレンジ スプライトを動かす スプライトを追加する コスチュームを変更する

85 85 スプライトを動かす (1/4) 歩動かす (1) イベント 内のブロック (4) フラッグマーク をクリックする (3) 10 を入力する (2) 動き 内のブロック

86 86 スプライトを動かす (2/4) 歩動かす 何か変わった?

87 87 スプライトを動かす (3/4) 歩動かす スプライトが 10 歩右に移動している

88 88 スプライトを動かす (4/4) 歩動かす (2) フラッグマーク をクリックする (1) 数字を変更する 動いた?

89 90 スプライトを追加する (1/8) Sprite1 のスクリプト キャラクターをクリックする

90 91 スプライトを追加する (2/8) 下側にスクロールする

91 92 スプライトを追加する (3/8) Gobo をクリックする

92 93 スプライトを追加する (4/8) Gobo が追加された

93 94 スプライトを追加する (5/8) Gobo のスクリプト Gobo のスクリプトを作成する

94 95 スプライトを追加する (6/8) 実行しよう

95 96 スプライトを追加する (7/8) 何か変わった?

96 97 スプライトを追加する (8/8) スプライト毎に異なるスクリプトを作成できる

97 コスチュームを変更する (1/4) 98 コスチューム をクリックする

98 99 コスチューム (Cat) Cat は二つのコスチュームが用意されている

99 100 コスチューム (Cat) 2 をクリックすると 絵が変わる

100 101 コスチューム (Gobo) Gobo は三つのコスチュームが用意されている

101 コスチュームを変更する (2/4) 102 スクリプトでコスチュームを変更する ブロック 次のコスチュームにする を挿入する

102 コスチュームを変更する (3/4) 103 実行しよう

103 コスチュームを変更する (4/4) 104 どうなった?

104 105 目次 1. Scratchを試す 2. Scratchを学ぶ 3. ブロックの操作 4. アニメーションにチャレンジ 5. Tips

105 5. Tips パソコンは使いません

106 オフラインエディター 言語の変更 文字サイズの変更 ステージモードの変更 ユーザ登録 内容

107 オフラインエディターの利用 Scratch は ウェブブラウザを使うためインターネット接続が必要である インターネットへの接続無しで Scratch を使う方法として オフラインエディターがある ダウンロードサイト : オフラインエディターは Windows や Mac OS X Linux で動作可能 Adobe AIR のインストールが必要

108 オフラインエディターのインストール (1/9) 公式ウェブサイトの一番下側 オフラインエディター をクリックする

109 オフラインエディターのインストール (2/9) 利用する OS のリンクをクリックする

110 オフラインエディターのインストール (3/9) Scratch-xxx.exe というファイルがダウンロードされる

111 オフラインエディターのインストール (4/9) ダウンロードされたファイルをダブルクリックする

112 オフラインエディターのインストール (5/9) 自動的にインストールが開始する

113 オフラインエディターのインストール (6/9) 表示されるダイアログの 続行 をクリックする インストールの環境設定やインストール先は特別な事情がなければ 変更する必要はない

114 オフラインエディターのインストール (7/9) Adobe AIR がインストールされていない場合 Adobe AIR がインストールされる

115 オフラインエディターのインストール (8/9) インストール時の画面

116 オフラインエディターのインストール (9/9) インストールが完了すると オフラインエディターが起動する

117 Scratch の言語 Scratch は 50 以上の言語に対応している English 日本語 にほんご など 日本国内でウェブブラウザを利用する場合 自動的に 日本語 に変換される オフラインエディターのデフォルト言語は English であり 手動で 日本語 に変更する必要がある

118 言語の変更 (1/4) (1) 地球儀 ( ワールドメニュー ) のアイコンをクリックする (2) リストが表示される (3) マウスカーソルを に移動する

119 言語の変更 (2/4) (4) 日本語 またが にほんご をクリックする

120 言語の変更 (3/4) にほんご を選ぶと 表記が 日本語 ( ひらがな ) に変わる

121 言語の変更 (4/4) 日本語 を選ぶと 表記が 日本語 ( 漢字かな交じり ) に変わる

122 文字サイズの変更 Scratch では下記の方法で文字サイズの変更が可能である 虫眼鏡ボタンを利用する ワールドメニューを利用する

123 Scratch の虫眼鏡ボタンを利用して文字サイズを変更する (1/2) 虫眼鏡ボタン

124 Scratch の虫眼鏡ボタンを利用して文字サイズを変更する (2/2) サイズ :-3 虫眼鏡 (-) ボタンを 3 回クリックする サイズ :0( 標準サイズ ) 虫眼鏡 (=) ボタンをクリックする サイズ :+3 虫眼鏡 (+) ボタンを 3 回クリックする

125 ワールドメニューを利用して文字サイズを変更する (1/4) 地球儀 ( ワールドメニュー ) のアイコンをクリックする

126 ワールドメニューを利用して文字サイズを変更する (2/4) 地球儀 ( ワールドメニュー ) のアイコンを [Shift] キーを押しながらクリックする set font size が表示される これをクリックする

127 ワールドメニューを利用して文字サイズを変更する (3/4) 数値が表示される 24 をクリックする

128 ワールドメニューを利用して文字サイズを変更する (4/4) 文字サイズが大きくなる

129 ステージのモード ステージは下記 3 通りの見せ方がある 小さいステージ スクリプトエリアが広く使えるため プログラム開発に適している ターボモード スクリプトを通常よりも高速で処理する 画面の更新速度が早くなるため アニメーションなどグラフィカルなプロジェクトには不向きである 数式処理が多いプロジェクトには適している オンラインのターボモードとオフラインエディタのターボモードは速度が異なる プレゼンテーションモード ステージを画面いっぱいに表示して見せたい時に便利である

130 小さいステージ (1/2) (1) 編集 をクリックする (2) 小さいステージ をクリックする

131 小さいステージ (2/2) ステージが小さくなる 広いスクリプトエリア

132 ターボモード (1/2) (1) 編集 をクリックする (2) ターボモード をクリックする

133 ターボモード (2/2) ターボモード と表示される 実行してみよう

134 プレゼンテーションモード (1/2) クリックする

135 プレゼンテーションモード (2/2) クリックすると元の画面構成に戻る ステージが画面いっぱいになる