第 19 回九工大わくわく科学教室 一番はじめのプログラミング 九州工業大学齊藤剛史 2019 年 3 月 16 日 人間とコンピュータの違い 2 人間 コンピュータ 計算 遅い すばやく計算 記憶 ちょっとしたことでも忘れる ぼう大な量でも忘れない 判断 時に悩む 正確にすばやく判断 動 ある 自

Transcription

1 第 19 回九工大わくわく科学教室 一番はじめのプログラミング 九州工業大学齊藤剛史 2019 年 3 月 16 日 人間とコンピュータの違い 2 人間 コンピュータ 計算 遅い すばやく計算 記憶 ちょっとしたことでも忘れる ぼう大な量でも忘れない 判断 時に悩む 正確にすばやく判断 動 ある 自分からは何もしない 柔軟性 ある 言われた通りにしか動かない 常識 ある ない プログラム次第

2 人間とコンピュータの違い 3 人間 コンピュータ 計算 遅いすばやく計算 それぞれの得意なことを生かそう 記憶 ちょっとしたことでも忘れるぼう大な量でも忘れない 判断 時に悩む正確にすばやく判断 動 ある自分からは何もしない 人間が 動 ( 処理 ) を決めてコンピュータに指示を与える 柔軟性ある言われた通りにしか動かない 常識あるない プログラム次第 プログラミング? 4 プログラミング (programming) とは プログラムを作成することにより 人間の意図した処理を うようにコンピュータに指示を与える 為である Wikipedia より引用 =? 1 から 1000 まで足し算するプログラム #include <stdio.h> void main(void){ int sum = 0; for(int i=1; i<=1000; i++) sum += i; printf( sum = %d n, sum); }

3 プログラミング? 5 プログラミング (programming) とは プログラムを作成することにより 人間の意図した処理を うようにコンピュータに指示を与える 為である Wikipedia より引用 コンピュータにさせたい仕事を順番に書くこと コンピュータは人間でないため 人間の言葉は理解できない コンピュータが理解できる言葉 ( プログラム ) で指示を書く必要がある プログラムはどこにある? 6 ハードウェア (Hardware) ゲーム機 ビデオデッキ 自動 ソフトウェア (Software) カセット SD カード CD / DVD / Blu-ray プログラム (Program) 人間が普段使用する言語に近い言葉で書かれたコンピュータへの命令 たるプログラム

4 最近の代表的なプログラミング言語 7 Python きれいなコードが簡単に書ける言語 C 言語 組み込み OS 関係で使われている言語 Java オブジェクト指向の代表的な言語 JavaScript Web 系で最も使われている言語 PHP サーバーサイドの Web アプリケーションに適した言語 Swift ios OSX のアプリ開発に使われる新しい言語 Ruby 日本で生まれたプログラミング言語 様々なプログラミング言語 8 画面に Hello, world! と表示するプログラム BASIC 10 PRINT "Hello, world!" 20 END FORTRAN WRITE(6,10) 10 FORMAT('Hello, World!') STOP END Pascal program Hello(output); begin writeln('hello, world!') end. MATLAB printf ('Hello, world! n') C #include <stdio.h> int main(void) { printf("hello, world!"); return 0; } C++ #include <iostream> int main() { std::cout << "Hello, world!" << std::endl; } Java public class Hello { public static void main(string[] args) { System.out.println("Hello, world!"); } }

5 Scratch では? 9 C #include <stdio.h> BASIC 10 PRINT "Hello, world!" 20 END FORTRAN WRITE(6,10) 10 FORMAT('Hello, World!') STOP END Pascal program Hello(output); begin writeln('hello, world!') end. MATLAB printf ('Hello, world! n') int main(void) { printf("hello, world!"); return 0; } C++ #include <iostream> int main() { std::cout << "Hello, world!" << std::endl; } Java public class Hello { public static void main(string[] args) { System.out.println("Hello, world!"); } } Scratch とは? 10 Scratch( スクラッチ ) 米国マサチューセッツ工科大学 (MIT) メディアラボが開発した無償で利用できるプログラミング環境 設計者 :Mitchel Resnick( ミッチェルレズニック ) MIT メディアラボのライフロング キンダーガーテン グループ (The Lifelong Kindergarten group) によって開発と保守が われてる

6 Scratch とは? 11 Scratch( スクラッチ ) 米国マサチューセッツ工科大学 (MIT) メディアラボが開発された 無償で利用できるプログラミング環境 設計者 :Mitchel Resnick( ミッチェルレズニック ) Cap block Hat block C Block Stack block Boolean block Reporter block あらかじめ用意されたブロックを組み合わせることで簡単にプログラムの作成が可能 小学生から大人まで 誰でもすぐにプログラミングを始めることが可能 Scratch とは? 12 Scratch Windows Mac など 様々なコンピュータで利用できる ウェブアプリケーションのため 特別なソフトウェアを必要としない 作成したプログラムの結果 ( 動作 ) をすぐに画面で確認できるため 間違ったプログラムを作っても簡単に修正できる 作成したプログラムを Scratch のサイトで世界中の人々に公開したり 他人が作成したプログラムを たりすることができる

7 必要な動作環境 13 デスクトップ Chrome (63+) Edge (15+) Firefox (57+) Safari (11+) タブレット Mobile Chrome (62+) Mobile Safari (11+) オフライン環境 Scratch デスクトップをインストールすることで インターネット接続無しで利用可能 Scratch で何ができる? 14 他のプログラミング言語と同様に 様々なプログラムを作ることができる シューティングゲーム アドベンチャーゲーム RPG ゲーム 動く紙芝居のようなアニメーション お の計算 体調管理ソフト 物理シミュレーション 学校などで使うプレゼンテーション資料 ロボットや電子楽器などのような電子機器を制御するプログラム

8 15 Scratch 公式ウェブサイトにアクセス (1/2) (1) Google などの検索画面で scratch と する 16 Scratch 公式ウェブサイトにアクセス (2/2) Scratch Imagine, Program, Share をクリックする

9 Scratch 公式ウェブサイト 17 作る をクリックする プログラムを作る (2/9) 18

10 プログラムを作る (3/9) 19 (2) をドラッグして (1) イベント をクリックする プログラムを作る (4/9) 20 (3) スクリプトエリアにおく

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

12 プログラムを作る (7/9) 23 こんにちは! が表示された プログラムを作る (8/9) (7) をクリックする 24 Hello! が消える プログラムが終了した

13 プログラムを作る (9/9) 25 (1) こんにちは! でなく別の言葉を試そう (2) をクリックする コンピュータに保存する (1/2) 26 (1) ファイル - コンピュータに保存する をクリックする

14 コンピュータに保存する (2/2) 27 (3) sb3ファイル Scratchのプロジェクト.sb3 がダウンロードされる コンピュータから読み込む (1/2) 28 (1) ファイル - コンピュータから読み込む をクリックする

15 コンピュータから読み込む (2/2) Sb3 ファイルが保存されているフォルダに移動する 開きたい sb3 ファイルを選択する 29 (2) 開きたいファイルを選択する (3) 開くをクリックする Scratch の画面構成 30 スクリプトエリア ステージ ブロックパレット スプライトリスト

16 スプライト 31 スプライト = 着せ替え自由のキャラクター画像 ステージ 32 ステージ = スプライトが動き回る舞台 スプライトを動かす スプライトの かけを変化する

17 ステージと座標 ステージの大きさは横幅 480 画素 縦幅 360 画素 480 画素 33 画素 = 歩 240, , , 180 Y 座標 240, X 座標 0,0 240, 画素 240, , , 180 スクリプト 34 スクリプト = 俳優 スプライト のための台本

18 ブロック 35 ブロック = 命令 ブロック 36 9 グループに分かれている グループ名説明ブロック数 動きスプライトを右や左に動かしたり 回転させたりするブロックのグループ 18 た目 スプライトにセリフを言わせたり 表示したり隠したりするブロックのグループ 20 音音の種類を変えたり 音の大きさを変えたりするブロックのグループ 9 イベント何かのできごとをきっかけにプログラムを動かすブロックのグループ 8 制御どのブロックを実 するかを思い通りにするためのブロックのグループ 11 調べるスプライトやキーボードの状態などを調べるブロックのグループ 18 演算計算をするためのブロックのグループ 18 変数独自に作成できる変数ブロックのグループ 5 作ったブロック 独自に作ったブロックのグループ 合計 107 -

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

20 標準レイアウト 39 標準のスクリプトエリア 少し大きいステージ 小さいステージ 40 広いスクリプトエリア 小さいステージ

21 プレゼンテーションモード 41 サンプルプログラム じゃんけん だるまさんがころんだ めざせキングオブりんご拾い! インベーダーウォーズ クリックゲーム スロット ハードル ピアノ フルーツキャッチ ペイント リンゴへ GO 図形描画 工事ちゅう! 時計 格闘猫ギャラクシー 神経衰弱 計算問題自動生成 迷路 魔王の逃走劇 魚の冒険

22 九工大生が作成したプログラム 科目名 : プログラム設計 九州工業大学情報工学部システム創成情報工学科 2 年生 2015 年度 2018 年度 2018 年度については現在集計中 普段は Java を用いるが レポート課題として Scratch の作品を提出 学生間の投票で上位 5 作品を紹介 43 Scratch の Web サイトで検索 44 システム創成情報工学科 で検索

23 Scratch の Web サイトで検索 45 プログラミングの手順 問題発生 問題解決のアイデア 仕様決定 設計 コーディング 問題の分析 問題解決に必要な仕様の洗い出し 仕様を実現するためのデータ構造 アルゴリズムの設計 設計に従ってプログラムの作成 デバッグ ドキュメント作成 プログラムの誤りの洗い出し プログラムの修正 プログラム開発の記録 利用者のための使用説明書作成

24 何をする? どんなプログラムを作るか考えをまとめよう 1. 紙やホワイトボードにアイデアを列挙する どんな種類 ( ゲーム アニメーション )? スプライト ( キャラクタ ) は? 背景は? マウス操作は? キー操作は? 2. アイデアを整理する 処理の流れ 変数 3. プログラムを作る 4. テストする ( 動作を確認する ) 直す テストする 直す ある程度できたら 他の人にも体験してもらおう 作成した作品について 皆さんが作成した作品 ( プログラム ) を自宅で実 できるようにします 3 月 20 日 ( 水 )18 時までに公開します インターネットの利用環境が必要です HP より作成したプログラム (sb3 ファイル ) をダウンロードして下さい 問題があればメールでお問い合わせ下さい scratch@slab.ces.kyutech.ac.jp

25 プログラミングの手順 49 どんなプログラムを作るか考えをまとめる 1. 紙やホワイトボードにアイデアを列挙する どんな種類 ( ゲーム アニメーション )? スプライト ( キャラクタ ) は? 背景は? マウス操作は? キー操作は? 2. アイデアを整理する 処理の流れ 変数 3. プログラムを作る 4. テストする ( 動作を確認する ) 直す テストする 直す ある程度できたら 他の人にも体験してもらう 目的を決める ( 要件定義 ) 機能検討 ( 設計 ) プログラム作成 テスト 修正 Scratch からステップアップ 50 Scratch でプログラミングを体験しよう Scratch で 作る楽しさ 考える楽しさを知ろう もっと 度なプログラミングを学ぼう 異なるプログラミング言語 (Java C/C++ など ) プログラミング技術 ( アルゴリズムやデータ構造 ) 学習サイト CODE アルゴロジック paiza

26 プログラミング言語の種類 51 プログラミング言語 機械語アセンブラ言語 水準言語 インタプリタ言語 コンパイラ言語 Python Ruby Perl BASIC C C++ Java PHP JavaScript 参考情報 52 アルゴロジック プログラミングの基本となるアルゴリズムをゲーム感覚で習得するための課題解決型ソフトウェア

27 参考情報 53 Code.org 2013 年 1 月にハディとアリ パルトヴィ兄弟が設 Scratch からステップアップ Scratch でプログラミングを体験しよう Scratch で 作る楽しさ 考える楽しさを知ろう もっと 度なプログラミングを学ぼう 異なるプログラミング言語 (Java C/C++ など ) プログラミング技術 ( アルゴリズムやデータ構造 ) 情報系の大学 ( 九工大 ) に入学しよう

28 最後に 自宅でもプログラミングに取り組んで下さい Scratch はプログラミング言語の一つです より 度なプログラミングを学びたい人は相談して下さい 九工大入学を目指そう! 算数 ( 数学 ) 理科 語学 ( 国語 英語 ) なども勉強しよう!