お絵かきプログラミング
Blockly 版

出張授業用スライド(以前のもの 2021/07/09 版)

香川大学創造工学部 情報システム・セキュリティコース 香川研究室
香川研究室について説明スライド同・ショート版同・学内用Web ページ

データのダウンロードは、 こちら(画像などをアップロードしたときの7ケタの数字を入力します)

このページは Blockly 版(プログラミング未経験者・初心者向け)です。

Java/C 版(ある程度プログラミングの経験のある人向け)はこちら
いきなりサンプル集のページヘ

はじめに

コンピューターはテレビ・自動車・炊飯器など、現代の世の中のあらゆるところで使われています。 コンピューターは、計算をしたりゲームをしたり、いろいろなことができる魔法の杖(ツエ)です。その魔法の杖を自由にあやつる魔術師になるためには、ちょっとした呪文体系(プログラミング言語)をマナぶ必要があります。 ここでは、その呪文の一部を使って、コンピューターにおえかきさせる体験をしましょう。コンピューターが得意なのは、規則的なくり返しのある絵を描くことです。できた作品は印刷して、ブックカバーやシールなどにできます。

(もう少し詳しく…)

コンピューターの素晴らしいところは、人間では不可能なくらい正確に数値を計算したり、複雑な条件判断を何度も間違えずにこなしたり、数万回でも同じことをいやがらずにくり返したりすることです。そのコンピューターはプログラムという指令(手順)がなければ動きません。ここでは、コンピューターのプログラムとはどういうものかあらましを紹介するために、プログラムによるお絵かきを紹介します。

プログラムの中で最も基本となるカタチは順次反復分岐の 3 つです。

順次(逐次)
いくつかの処理を、順に一つずつ実行していくこと。
(コンピューターはもちろんできます。)
反復
同じ処理を繰り返すこと。
(コンピューターが一番得意なことです。)
分岐(選択)
条件が成り立つか否かによって、処理を選ぶこと。
(繰り返すたびに全く同じことをしていては面白いことはできません。)

この 3 つはどんなプログラミング言語にも必ずある、もっとも基本的なカタチです。 この 3 つのカタチを使って、お絵かきしていきます。

作品例

サンプル 1
サンプル 2
サンプル 3
サンプル 4

さっそく、やってみよう

ここでは、 香川研究室が Processing を参考にして開発したプログラム部品集(ライブラリー)の BookCover.js と、 Blockly という Google が作ったブロック式のプログラム編集環境(エディター)を BookCover.js 向けに拡張したもの、 を使って、プログラムを作成していきます。

シール(カード)またはブックカバーを作ることができます。 好きなほうのチュートリアルを選んでください。

シール・カードブックカバー
サンプル
ここをクリック → チュートリアル シール・カード編 チュートリアル ブックカバー編

(管理者用)Blockly, CodeMirror

または、直接、サンプル集のページへ飛ぶこともできます。
(気に入ったデザインのものを選んで、 Blockly ではじめる、をクリックして下さい。呪文(プログラム)が表示されますので、 数や文字列などを書き換えて実行してみて下さい。)

または、次のリンクでとてもシンプルな例からスタートします。 (Blocklyで始めるJavaScriptで始める

印刷の仕方

参考リンク

参考リンク(外部)


香川研究室