2016年度 鹿児島大学工学部オープンキャンパス

初めてのプログラミング体験

最終更新日:2016年8月6日(渕田)

鹿児島大学工学部のオープンキャンパスへようこそ!

情報生体システム工学科の体験講義を受講している皆さんは、きっとコンピュータやインターネットに多少なりとも興味をお持ちのことと思います。

この体験講義では、私たち情報生体システム工学科の中で行われている講義のうち、特にプログラミングに的を絞って、その初歩を理解してもらうことを目的としています。

ですが、時間が60分とたいへん短いため、詳しい説明は省いて、プログラミングってどんなもの?、ということを体験してもらいたいと思います。

そして、もしこの体験でプログラミングに興味を持ったら、自分でいろいろ調べてみましょう。

インターネット上には多くのためになる知識や説明が存在しています。

実際にコンピュータをさわりながら、それらを一つ一つ実践することで、きっとコンピュータを自由自在に操る術を身につけることができるでしょう。

情報生体システム工学科工学部

プログラミングって何?

コンピュータには、実行することができる基本的な命令がたくさん準備されています。

しかしそれは、数値の和を計算すること、とか、画面に文字を表示すること、とか、キーボードから入力を受け取ること、などように、きわめて基本的なことばかりです。

あなたがコンピュータに何かをやらせたいときは、これらの基本的な命令を組み合わせて、自分の目的に合うように命令の列を作ってあげなければなりません。

この命令の列をプログラムと呼びます。

たとえば、次のコードはBASICという言語で書かれた三角形の面積を求めるプログラムです。(ここでは、このプログラムを理解する必要はありません)

10 PRINT "底辺は?";
20 INPUT A
30 PRINT "高さは?";
40 INPUT H
50 S=A*H/2
60 PRINT "面積は";S;"です"

※ 左側の数字は行番号と呼ばれるBASIC言語に特有の番号です。

この中で、PRINT とか INPUT とか * とか / とかが、あらかじめコンピュータ(この場合はBASICという言語)が持っている命令です。それぞれの意味は、「表示しろ」、「入力しろ」、「掛け算しろ」、「割り算しろ」ということであり、単独では非常に基本的なことしかできません。

しかし、これらの命令を組み合わせることで、「三角形の面積を計算する」というような複雑な仕事をすることができるようになるわけです。

このページの先頭へ

Scratchとは

ScratchはMIT(マサチューセッツ工科大学)のメディアラボが開発を進めている子供向けのビジュアルプログラミング環境です。

もともと、プログラミングというよりはストーリーやアニメーションを簡単に作ることに主眼が置かれていますが、しかし、ちゃんとしたプログラミングを行うこともできます。

Scratchの詳細な説明はここでは省略するとして(興味がある人はGoogle先生に聞いてみよう)、実際に使ってみて慣れていくことにします。

子供向けということで、実際、Scratchはとても簡単に始めることができます。

その上、Scratchはかなり複雑なプログラムも作ることができるのです。

Scratchを使ったプログラミングは、インターネットに接続している環境で、ブラウザの中で行います。(ブラウザは比較的新しいものが良いです)

下記のホームページ、

https://scratch.mit.edu

にアクセスすると、Scratchのメインページが表示されます。

ここには、これまで世界中のいろいろな人によって、Scratchを使って作られたさまざまなプログラムが掲載されています。

もしあなたが面白い作品を作ったら、ここにアップロードしてみんなで共有することができます。(ユーザ登録が必要ですが、すべて無料です)

スプライトと背景の準備

さっそく、Scratchで逐次実行のプログラムを作ってみましょう。

Scratchのメインページの上にある「作る」をクリックしてください。

上のような画面が表示されます。これが、Scratchのプログラム開発画面です。

左側がプログラム実行したときの画面イメージ、中央がプログラムを組む際に使用するブロック部品、右側がプログラムを組む場所です。 (そのさらに左にチュートリアルの画面が表示されていますが、左上の×をクリックすると閉じることができます)

Scratchでは、中央にあるようなブロックを組み合わせてプログラムを作っていきます。Scratchでは、プログラムのことを「スクリプト」と呼びます。

左の下側には「スプライト」と書かれた場所があります。スプライトとは、プログラムの中に登場するキャラクターのことです。いまは、猫のキャラクターが1つだけ存在しています。

キャラクターの追加

Scratchには、あらかじめたくさんのキャラクターイメージが準備されていて、それらの中から自由に選んで使うことができます。

新しいキャラクターを追加するには、「スプライトの追加」ボタンを使います。

スプライトの追加は4つの方法で行うことができますが、ここでは上の赤丸で囲った「スプライトをライブラリーから選択」を押してください。

次のような「スプライトライブラリー」が表示されます。

左側の「カテゴリー」から「動物」を選び、Cat1 Flyingを選んでOKを押してください。

次のように、新しいキャラクターが追加され、画面にも表示されます。

ここで、古いキャラクターは消してしまいましょう。

キャラクターを消すには、そのキャラクターを右クリックして「削除」を選択します。

もともとあった猫のキャラクターが消えて、新しいキャラクターだけになりました。

このように、ライブラリーからスプライトを追加することで、何個でもキャラクターを使うことができます。

背景の変更

最初の状態では背景は真っ白ですが、好きな背景に変えることができます。背景のイメージもScratchにはたくさん用意されています。

背景を変えるには、画面左下の「新しい背景」を使います。

ここで、赤丸で囲った「ライブラリーから背景を選択」をクリックしてください。次のような背景ライブラリーが表示されます。

ここでは、左側の「テーマ」から「飛ぶ」を選び、blue sky3をクリックしてOKを押してください。

画面が次のように変わり、背景が青い空になったはずです。

この画面の右側は、「背景」タブが選ばれており、背景を編集できる場所になっています。

もう一度、スプライトのCat1 Flyingをクリックしてください。

今度は、「コスチューム」タブが選ばれており、スプライトのコスチュームを編集できる状態になっていることがわかります。さらに、このスプライトにはコスチュームが2種類あることもわかります。

このように、スプライトの種類によっては複数枚のイメージから構成されているものがあり、これを切り替えて表示することで簡単なアニメーションを実現できるようになっています。

ここでは、スプライトの編集は行いません。

中央の上側の「スクリプト」タブをクリックして、最初の状態に戻しておきましょう。

このページの先頭へ

プログラムの三大要素

プログラムの中には、重要な3つの要素があります。

それは、

です。

あらゆるプログラムは、これらの3つの要素を組み合わせて作り上げられています。

Scratchでは、ブロックを並べていくことでプログラムを作っていきます。

逐次実行

これが、プログラムの最も基本的な性質です。

プログラムは基本的な命令が集まってできていますが、それらの基本命令は「順番に実行される」ということです。

ブロックを置いてみよう

では早速やってみましょう。

中央に置いてあるブロックは、マウスでドラッグすることで右側のスクリプト領域に置くことができます。

「動き」グループにある「y座標を10ずつ変える」ブロックをドラッグしてスクリプト領域においてください。

※間違って置いたブロックは、ブロック置き場にドラッグすると消すことができます。

このブロックは、スプライトのy座標を10だけ増やします。

Scratchの画面には表示されていませんが座標軸が決められており、次のようになっています。

x軸は-240から240まで、y軸は-180から180までです。

スプライトはこの座標を指定して、場所を決めることができます。

現在のスプライトの座標は、スプライトの情報(info)を見るとわかります。情報は、スプライトを右クリックしてinfoを選ぶと、

次のように表示されます。

この場合、スプライトの現在の座標は(-57,-7)ということがわかります。

いま置いたブロック、

は、y座標を10増やすので、このブロックを実行するとスプライトは上にちょっとだけ移動することになります。

試しに、このブロックをマウスでクリックしてみてください。

猫のキャラクターが上にちょっとだけ移動したと思います。何回もクリックするとわかりやすいです。

Scratchでは、ブロックをクリックすると実行できます。

もしネコが上まで行ってしまった場合、スプライトをドラッグして元に戻しておきましょう。

※スプライトはドラッグして移動させることができます。

ブロックをつなげてみよう

もう少しブロックを増やして、次のようにしてみましょう。

「0.2秒待つ」というブロックは、「制御」グループにある「1秒待つ」の数字を変えています。数字を変えるには、マウスで数字をクリックして選択して編集します。 (数字は半角で入力します)

また、2個目の「y座標を-10ずつ変える」は数字を-10に変えました。

この状態で最初のブロックをクリックしてみてください。

全部のブロックが順番に実行されて、ネコが一瞬、上下に動いたはずです。(ブロックの実行中は、上の図のようにブロックが淡く光ります)

これが逐次実行です。

つまり、

プログラムは基本的に書かれている順番に実行される

という性質です。

あなたが何かをコンピュータにやらせたいと思ったら、その手順を順番に並べてやればよいわけです。

この手順のことをプログラムと呼ぶのです。

このページの先頭へ

繰り返し

上のプログラムは、ネコを1回だけ上下に動かしました。

では、もっと何回もネコを上下に動かすにはどうすればよいでしょうか?

1つの方法は、逐次実行のプログラムをずーーーーっと並べることです。

Scratchのブロックは右クリックして「複製」することができるので、4回複製してみました。これで、4回だけ上下してくれます。

しかし、もっとたくさんやろうとすると、この方法は効率が良くないことがわかると思います。場所も食いますし。

もっといい方法があります。

それは「制御」グループの中にある「ずっと」というブロックです。

このブロックは、中に他のブロックを挟み込むことができます。

逐次実行で作った4つのブロックを挟むように「ずっと」ブロックを置いてください。そして「ずっと」ブロックをクリックしてみましょう。

これで、無限にたくさんの上下ブロックを並べたのと同じことになります。

ネコがずっと上下に動き続けることがわかると思います。

動きを止めるには、もう一度「ずっと」ブロックをクリックします。

その他の繰り返し

繰り返しには、「ずっと」の他に「○回繰り返す」ブロックと「◇まで繰り返す」ブロックもあります。

「○回繰り返す」ブロックは、指定した回数だけ中のブロックを繰り返して実行します。

「◇まで繰り返す」ブロックは、指定した条件が成立している間、中のブロックを繰り返して実行します。

このページの先頭へ

条件分岐

プログラムを実行していると、状況に応じて処理を分けたい場合があります。

ブロック崩しのゲームを考えてみると、

などがあります。

これらはいずれも、

○○ ならば △△ する

という形をしています。この中で、○○が条件であり、△△が処理です。

Scratchで子の処理を行うためのブロックは以下の2つです。

このブロックの◇の中には、いずれも条件を入れます。

条件に入ることができるブロックはたくさんありますが、例えば、

などです。

条件分岐を使うと、プログラムの中で状況に応じて処理を適切に分けることができるので、場合に応じた複雑な処理が可能となります。

現代のコンピュータが多くの目的に便利に使えるのは、この条件分岐のおかげだといえます。

条件分岐を使ってみよう

先ほどのブロックの下に、次のようにブロックを置いてみましょう。(場所はどこでも構いません)

「〜キーが押された」というブロックは、下向きの黒い三角形をクリックすることでキーの種類を変えることができます。

できたら、「ずっと」ブロックをクリックして実行してみましょう。

上下の矢印キーを押すことで、ネコが上下に移動しましたか?

ついでに、前に作った「ずっと」ブロックもクリックしてみると、ネコが上下に揺れながら上下に移動します。

練習問題

このページの先頭へ

ドラコンエスケープ

それでは、これまで説明した基本的な内容を応用して、簡単なゲームを作ってみましょう。

タイトルは「ドラコンエスケープ」です。

上空10000メートルを飛びながら、迫りくるドラゴンを避け続けましょう。

イベントについて

プログラムを実行中に発生するいろいろな出来事のことをイベントと呼びます。

フラグイベント

イベントにはいろいろな種類がありますが、Scratchで最初に発生するイベントが「フラグイベント」です。これは、をクリックすると発生します。

通常、この旗がクリックされるとプログラムの実行が始まるように作ります。

このイベントは「イベント」グループの中の「旗がクリックされたとき」ブロックを使用します。

先ほどのブロックの最初に次のように「旗がクリックされたとき」ブロックを置いてください。

そしてをクリックしてみましょう。

ネコが上下しながら移動するようになります。

キーイベント

あるキーが押されたときに発生するイベントがキーイベントです。

これは、「イベント」グループの「〜キーが押されたとき」ブロックで扱います。

次のスクリプトを追加してみましょう。

スペースキーが押されると、ネコが手を挙げて「にゃー!」と鳴きますね。

雲を流す

空を飛んでいる感じを出すために、背景に雲を流してみましょう。

「スプライトをライブラリーから選択」を選び、Cloudsを選択してOKを押してください。

Cloudsがスプライトに追加されます。

「コスチューム」を見ると、Cloudsには4種類のコスチュームが準備されていることがわかります。

スクリプトを追加する

では、雲にスクリプトを追加しましょう。

まず、スタートしたときの処理です。

  1. 元になる雲は複製を作るためだけに使われるので、最初に非表示にします。
  2. あとは、2秒に1回のペースで、自分の複製を作りつづけます。

次に、複製されたときの処理です。この処理は、すべての複製された雲について独立に実行されます。

  1. x座標を300、y座標を-180から180までの乱数で決めてから表示します。
  2. 0.1秒ごとに、x座標を10ずつ減らしていきます。
  3. x座標が-240より小さくなったら(左に流れ去ったら)、この雲を削除します。

もし、次のようにすると、4種類のコスチュームのうち、どれかが選ばれるので、雲のバリエーションが増えます。

ドラゴンの表示

最後にドラゴンを登場させましょう。

まずは、スプライトの準備からです。「スプライトをライブラリーから選択」を選び、「ファンタジー」カテゴリのDragonを選んでOKを押します。

次に、ドラゴンの向きを反転させます。

  1. ドラゴンの「コスチューム」タブをクリックします。
  2. ドラゴンをクリックし、右上の「左右に反転」をクリックします。
  3. 2つ目のコスチュームについても同様に反転します。

スクリプトを追加する

ドラコンもたくさん現れるので、複製を作って動かします。雲と同じ要領です。

まずはスタート時のスクリプトです。

  1. まず、元のドラゴンは隠しています。
  2. 次に、2秒ごとにドラゴンの複製を作っていますが、雲と違い、ほぼ1/2の確率で出現するようにしています。

次は複製されたときのスクリプトです。これには2種類あります。

  1. これは出現させてから移動させる処理です。
  2. ほぼ雲の移動と同じです。

  1. こちらは上下に揺らしている処理です。
  2. これは、ネコの動きと同じです。

よりゲームらしく

雲の流れる上空10000メートルで、ネコとドラゴンの大バトル・・・とはいかないまでも、なんとなくゲームっぽくなりました。

もう少しゲームらしくするには、以下のスクリプトを追加するとよいでしょう。

ゲームオーバーの追加

スプライトの追加から「新しくスプライトを描く」を選ぶと、自分でスプライトを作ることができます。

右側の編集領域で、下のようにGameOverの文字を書きましょう。

当たり判定

ドラゴンに当たったら、ゲームオーバーになるようにしてみましょう。

ネコのスクリプトに次を追加します。

  1. このスクリプトは、ドラゴンに触れるかどうかをずっと見張っていて、触れたら「終了」というメッセージを全部のスプライトに送ります。
  2. 送ったメッセージはイベントとして別なスプライトの中で使うことができます。
  3. 「終了」メッセージを送ったら、すべての動きを止めています。

次に、GameOverのスクリプトに、以下を追加します。

  1. GameOverの文字は、開始時には隠しておきます。
  2. 「終了」メッセージを受け取ったら、それを表示させます。

スコア表示

ドラゴンを避け続けている間、スコアが加算されるようにしてみましょう。

スコアのように、プログラム中で何かを覚えておくためには「変数」を使用します。

ネコのスクリプトの「データ」ブロックで「変数の追加」を行い、「スコア」という変数を追加します。

すると、次のように変数を操作するブロックが現れます。

このブロックのうち、「スコアを1ずつ変える」を以下のように追加しましょう。

変数を追加すると、ゲーム画面の左上に「スコア」が表示されます。

ゲームを続いている間、点数が加算されていくことがわかるでしょう。

このページの先頭へ

終わりに

プログラミングとは、コンピュータにさせたい仕事を、コンピュータにわかる基本的な命令を組み合わせて作った手順書です。

したがって、どのような基本命令があるかを知ることが、プログラミングの勉強だといえます。

その点、Scratchを使えば、基本命令がブロックの形で準備されているので、初心者でもとっつきやすいわけです。

ただ、Scratchでは、できないことが多くあります。

それにScratchは動作速度が遅いです。

Scratchでできないような複雑あるいは大規模なプログラムを組みたいと思ったときは、別な言語を選択することになります。

※Scartchでスゴイプログラムを作っている猛者も、世界中にはいるみたいですが・・・

しかしそれでも、基本的な考え方は同じです。

「逐次実行」、「繰り返し」、「条件分岐」を組み合わせて、自分がしたい処理を作り上げていくのです。

この体験講義を通してプログラミングに少しでも興味を持ったら、ぜひ自分でいろいろと試してみてください。

別な言語を勉強するもよし、Scratchでもっといろいろなプログラムを作ってみるもよし、です。

試しに、次のような改良を加えてみるのはどうでしょうか?

この体験授業がきっかけで、皆さんがコンピュータやプログラムに興味を持って、そしてこの情報生体システム工学科で一緒に勉強できればうれしいです。

このページの先頭へ


このページへのお問い合わせは、渕田(fuchida@ibe.kagoshima-u.ac.jp)までお気軽にどうぞ