お絵かきプログラミング

# お絵かきプログラミング

# 香川大学 創造工学部
情報システム・セキュリティ (CSSS) コース
香川研究室
このスライドでは、香川研究室のオープンキャンパスの展示、を紹介します。

# QR コードと URL

https://goo.gl/KFsnYq

これは QR コードと短縮 URL です。

## 自己紹介

香川 考司 （かがわ こうじ）

香川大学 創造工学部 電子・情報工学領域

- 情報システム・セキュリティ (CSSS) コース担当
- 専門分野

- プログラミング言語（特に型システム）
プログラミング学習支援システム
- 担当授業

- 『プログラミング』『オートマトン』『コンパイラ』『オブジェクト指向言語』
『プログラミング・パラダイム』『プログラミング言語意味論』など
- まずは教員の紹介をします。
「かがわこうじ」といいます。
香川大学創造工学部の電子・情報工学領域というところに所属しています。
（香川大学創造工学部がどこにあるか知っていますか？）
主に、情報システム・セキュリティコースの授業・ゼミを担当します。
専門分野は、プログラミング言語の型システムとプログラミング学習支援システムです。
担当している授業は、大学の学部の『プログラミング』『オートマトン』『コンパイラ』『オブジェクト指向言語』、
大学院の『プログラミング・パラダイム』『プログラミング言語意味論』などです。

## 例えると…

コンピューター　　 ➡
魔法のツエ🪄
プログラム　　　　 ➡ 呪文
プログラミング　　 ➡ 呪文を組み立てること
プログラミング言語 ➡ 呪文体系
型システム　　　　 ➡ 呪文のミスを減らす仕組み
学習支援システム　 ➡ 魔法使いの弟子養成システム
コンパイラー　　　 ➡ 呪文体系変換装置（呪文）

少し、難しいことばが出てきましたが、たとえで説明してみます。
コンピューターは魔法のツエあるいはランプです。
そうすると、プログラムは魔法の呪文ということになります。ただし、映画やゲームで出てくる魔法の呪文は短いですが、
プログラムはとてもとても長いものになります。
（ハリー＝ポッターは見たことありますか？）
（ハリー＝ポッターで一番長い呪文はなんですか？）
プログラミングは呪文を組み立てることであり、プログラミング言語は呪文体系です。
ハリー＝ポッターとドラゴンクエストで呪文が異なるように、さまざまなプログラミング言語が存在します。
型システムというのは、プログラムの部品を組み合わせるときに間違った組み合わせが起こらないようにして、
プログラムのミスを減らすための仕組みです。
学習支援システムというのは、魔法使いの見習いが一人前の魔法使いになるのを支援するものです。

## ただし…

プログラムは、魔法の呪文とまったく違うところがある

（この後、違いを説明していく）

プログラムと呪文の違うところを、これから順々に説明していきます。

## 🖥💻📱 以外にどこで使われてる？

Clker-Free-Vector-Images による Pixabay
からの画像
Clker-Free-Vector-Images による Pixabay
からの画像
OpenClipart-Vectors
による Pixabay
からの画像
David Stephanus
による Pixabay
からの画像
Roman Ivanyshyn による Pixabay
からの画像

コンピューターはいかにもコンピューターらしいカタチをしたもの以外にも、
家電や自動車など、いろいろなところで使われています。
（自動車に、いくつくらいコンピューターが積まれていると思いますか？）
自動車にも、30 個以上
の小さいコンピューターが（https://semicon.jeita.or.jp/future/future_A09.html）積まれています。
（炊飯器・ホームベーカリー・ルンバなどは家にありますか？）
炊飯器で美味しいごはんが炊けるのもコンピューターのおかげです。
銀行の ATM も背後で（ネットワークの向こう側で）巨大なコンピューターが動いています。

## コンピューターの仕組み

主に、計算する部分（CPU）と、
記憶する部分（メモリー）からなる

CPUは、+−×÷ や
<>= などの計算をする

- 単純な計算だが一秒に何十億回も実行する
- メモリーは、いわば巨大なそろばん🧮である
- 億や兆を超えるケタを持つ
- まずは簡単にコンピューターの仕組みを説明します。
コンピューターは主に、計算する部分と記憶する部分からなります。計算する部分は CPU、記憶する部分はメモリーと呼ばれます。
CPU は加減乗除や大小判定など、ひとつひとつは単純な計算を実行します。しかし、ひじょうに高速で、一秒に何十億回も計算をします。
メモリーは巨大なそろばんのようなものです。しかしひじょうに巨大で億や兆を超えるケタを持ちます。億や兆を表せる桁数ではなくて、桁数が億や兆です。
全然違うので気を付けてください。兆を表すには桁数は 13 しか必要ありません。
（人間の走る速さの 10 億倍はどれくらいでしょうか？）
（そろばんで、コンピューターのメモリーと同じ程度のデータを記憶しようとすればどれくらいの長さになるでしょうか？）

## プログラム

CPU に与える手順・指示のまとまりである

CPU が理解できる指示は『機械語』という
プログラムはメモリーに記録されている

（フォン＝ノイマン方式）

John von Neumann (1903–57)

コンピューターに対して、こういう計算をしろ、という指示をプログラムと言います。
CPU が直接理解できる指示の体系は機械語と言います。
機械語の指示は先ほど説明したメモリーに記録されています。（つまり数の羅列です。）
これをプログラム内蔵方式、または、フォン＝ノイマン方式と言います。
フォン＝ノイマンは、このプログラム内蔵方式を最初に提唱したと言われている人で、
数学や物理学でも大きな功績を残しています。

## 機械語

メモリーの数ケタ分を一まとまりとみなす

- (すごろくの“マス”みたいなもの)
- CPU は各マスの指示を🎲順々に実行する
一つ一つの指示はとても単純である。例えば…

メモリーのあるケタに別のケタの数を足す（引く）
直前の式が成り立つなら指定分マスを進む（戻る）

などなど

機械語のプログラムは、ある意味すごろくの指示に似ています。
（最近、すごろく（人生ゲームとか）はしましたか？）
メモリーのある桁数を一つのマスあるいは単語とみなします。
各マスに書かれている数が指示に対応します。
CPU は各マスに書かれている指示を前から順に実行します。
先ほど説明したように、一つ一つの指示はひじょうに単純なものです。
たとえば、メモリーのある場所の数を別の場所にコピーする。
メモリーのある場所に別の場所の数を足したり、引いたりする。
直前の計算結果が 0 ならば指定分マスを進んだり、戻ったりする、などです。
つまり、コンピューターは速さが 10億倍の小学３年生が、大きさが
10 億倍のそろばんをもって、すごろくをやっているようなものです。

## プログラミング言語

機械語で大きなプログラムを作るのは難しい。そこで…

人にわかりやすい体系（プログラミング言語）で作って、機械語に翻訳する
指示のまとまりを部品化することで、さらに複雑な指示を組み立てられる

部品化の考え方の違いで、多くのプログラミング言語がある

実際には機械語で大きなプログラムを作ることはひじょうに難しいことです。
そこで、より人間にわかりやすい体系でプログラムを作成して、それを機械語に翻訳する、という手法が取られます。
この人間にわかりやすい言語をプログラミング言語と言います。
機械語と区別する場合には高級言語とも言います。
指示のまとまりを部品化することで、より複雑なプログラムを組み立てていくことができるようになります。
この部品化の考え方の違いによって、多くのプログラミング言語があります。

## プログラミング言語の役割

ほとんどの言語で共通していることもある

- 指示を（英語などの）単語や数式で表す
- メモリーの各場所に名前をつける（変数）
- 指示やデータのまとまりに名前をつけて、再利用しやすくする
（関数とデータ型）

などなど

たくさんのプログラミング言語がありますが、ほとんどの言語で共通している機能もあります。
指示を（英語などの）単語や数式で表すこと、
メモリーの各場所に名前をつけること、
指示やデータのまとまりに名前をつけて、再利用しやすくすること、
などです。

## プログラムの組立て

プログラムの組立ての基本は
順次・反復・分岐の 3 つである。
これだけあれば
（やり方を説明できること🌋🔮は）“何でも”できる

順次 ⋯ いくつかの処理を、順に一つずつ実行していく
反復 ⋯ 同じ処理をくり返す
分岐 ⋯ 条件が成り立つかどうかによって、処理を選ぶ

どんな言語にもある、プログラムの組み立てかたの基本は、順次・反復・分岐の 3 つです。
順次はいくつかの処理を、前から順に一つずつ実行していくことです。
反復は、ある条件が成り立つあいだ、同じ処理を繰り返すことです。
分岐は、条件が成り立つかどうかによって、実行する処理を選択することです。
このような組み立て方は、すごろくにもありますね。

## （疑似コードによる）プログラム

「○」を三角形に並べる

疑似コード 出力

y ← 1 。
y ≦ 5 の間繰り返す。
x ← 1 。
x ≦ y の間繰り返す。
「○」を書く。
x ← x + 1 。
次の行に移る。
y ← y + 1 。

○
○○
○○○
○○○○
○○○○○

x や y は“変数”

ここで x や y は変数です。
コンピューターは常識がないので、教えなければ三角形とは何か知りません。
このような感じで噛み砕くように指示する必要があります。
このなかで“「○」を書く”や“次の行に移る”は定義済みの部品を利用する部分です。

## ポイント

コンピューターは、一つ一つは単純な指示を、
何億回・何兆回⋯でも疲れずくりかえす

たくさん覚えて忘れない、速くて間違えない、

- 『常識』は持ち合わせていない。つまり人間が指示を間違えると、間違ったまま実行する。
- プログラムはとても長い
- うまく部品化することで、大規模・複雑なプログラムを組み立てることができる🪄
- ここまでのポイントをまとめます。
コンピューターは一つ一つは単純な計算の指示を、ひじょうに高速に実行する機械です。たくさんの数を記憶することができ、
決して疲れないし、忘れない、間違いないし、速いです。
しかし常識というものは持ち合わせていません。プログラムで指示された通りに計算を実行します。つまり、指示が間違っていると、
間違ったまま実行します。
大きなプログラムをつくるためには、プログラミング言語を使って部品をつくり、部品をうまく再利用しなければいけません。
部品化すると使う人にとっては魔法の呪文と同じようなものになります。

## （参考）人工知能

- 膨大なデータに対して並列（同時）に計算する
- とてつもない回数繰り返して、調整する

図: 人工知能のイメージ図

（将棋や囲碁をやる人（あるいは好きな家族がいる人）はいますか？）
ディープラーニングなどの最近はやりの人工知能も、やはり、疲れない、忘れない、速い、といったコンピューターの特性を活かしたものです。
図の各○は足し算・掛け算などひじょうに単純な計算を表しています。
これらをたくさん同時に計算します。
そして、何度も何度も繰り返して、掛けたり足したりする数を、のぞみ通りの結果が出るまで調整します。

## プログラミングでだいじなこと

—プログラミング的思考—

部品のはたらきを知る
部品をうまく組み合わせる

（すでにある部品から順次・反復・分岐で）

ただし、自分で作らなければいけないことも…

その場合、どのように部品に分けるか？

簡単で、できるだけいろんな場面で使えることが望ましい

うまく動かないときは、原因🐞を調べる

プログラムを作るために大事なことは、ほかのモノを作ることと共通しています。
部品の働きを知り、
部品をうまく組み合わせる、
場合によっては、自分で部品を設計する、
どのように部品に分けるかを考える、
いろいろなところで再利用できるようにする、
うまく動かないときは原因を調べる、
（「バグ」という言葉は使いますか？）
プログラムの不具合の原因をバグ（虫）と言います。
これは、昔の大きなコンピューターは本当に虫が入り込んでうまく動かなくなったからです。

## 大学の情報系で何を学ぶか (1)

データ構造とアルゴリズム

- プログラムを組み立てるための定石
- データベース&ThickSpace;— 大量のデータを扱う手法
ソフトウェア工学
- ソフトウェアの間違いを少なくする手法

インターネット&ThickSpace;— コンピューターをつなげる仕組み

今では、文系・理系を問わず、どんな分野でもコンピューターを使いますし、
大学に入る前や、大学のいろいろな学部で、プログラミングの初歩的なことまでは勉強できる場合が多いと思います。
ここでは、コンピューターを専門とする、いわゆる情報系と呼ばれる学科・コースでどういうことを勉強できるのか、
紹介したいと思います。

## 大学の情報系で何を学ぶか (2)

ヒューマンインターフェイス— 人間に使いやすい設計
情報セキュリティー&ThickSpace;— システムの安全の確保
人工知能&ThickSpace;— 人間の振舞いの模倣
オートマトン&ThickSpace;— コンピューターの限界
コンパイラー&ThickSpace;— プログラミング言語の翻訳
プログラミング言語— プログラムの生産性向上

などなど

## 香川研究室の研究テーマ

プログラミング言語の型システム

- 大規模で複雑なプログラムを、部品化することで効率よく作り、
しかもプログラムの間違いを起こりにくくすることを目指す
- プログラミング学習支援システム
- 初心者が、楽しく、効率よく、プログラミングを学習できることを目指す
- 香川研究室では、プログラミング言語の型システムとプログラミング学習支援システムを研究しています。
型システムはプログラムの部品を組み合わせるときに、間違いが起こりにくいようにするためのものです。
学習支援システムは初心者が、楽しく、速くプログラミング学習できるように手助けするものです。

## 小中高で勉強しておいてほしいこと

算数（数学）📝・理科🧪
— 問題解決力

コンピューターを理解するときには必要ない分野も、
コンピューターを応用するときに必要になる

国語・英語— 読解力・文章力
地理・歴史 —
世界中の人と仕事するかも🇸🇰🇵🇭🇰🇪🇧🇷🇦🇺

将来、プログラミングをしてコンピューターを使いこなせるようになるために、
小中高ではどういうことを勉強すればよいでしょうか？
算数や理科の知識はコンピューターやプログラムの動作を理解する上で必要になります。
コンピューターと関係ないような分野でも、コンピューターを応用するときに必要になることがあります。
また、数学の計算問題・証明問題や理科の実験をするための能力は、プログラミングに必要な能力と似ています。
プログラムは多くの部品からなり、他の人が作った部品を理解するためには、説明のための文書を読む必要があります。
また、自分が部品を作った場合は説明を書く必要があります。
部品を作る人は、当然日本人とは限らないので、説明は英語で書かれていることが多いです。
（今、日本の人口は何人ですか？世界の人口は何人ですか？）
インターネットを利用すると、遠くにいる人とも簡単にコミュニケーションできるので、
外国人・外国に住んでいる人と一緒に仕事をする可能性も高いです。

## やってみよう

香川研究室の展示「お絵かきプログラミング」では、
ここまでで説明した、
順次・反復・分岐
を使って、コンピューターに規則正しい絵を描かせる体験をします。🖨

香川研究室のオープンキャンパスの展示である「お絵かきプログラミング」は学習支援システムを応用したものです。
機械語のところで説明した、順次・反復・分岐はどんなプログラミング言語でも基本となるものです。これを使って、
コンピューターに規則にもとづく絵を描いてもらおうというものです。
コンピューターは規則にもとづく絵が得意なので、そうでない絵（例えばドラえもん）は、やめておきましょう。
実際のオープンキャンパスでは、大学のプリンター（レーザープリンター）で印刷したものを、お土産に持って帰ってもらえます。

「お絵かきプログラミング」について

Blockly に、
香川研究室が開発したプログラム部品集用のブロックを追加したものです

Blockly とは
Google
が作ったブロック式のプログラム編集環境
MIT の Scratch と似ている というか …

「お絵かきプログラミング」は Google という有名な会社が開発した Blockly
というブロックを組み立ててプログラミングできる環境に
香川研究室が開発した印刷品質の「お絵かき」用のブロックを追加したものです
（Google は知っていますか？）
Scratch という MIT が開発したブロック・プログラミング環境がより有名ですが、それとよく似ています。
（実は、今の Scratch は Blockly を基にしています。）
（Scratch は知っていますか？ MIT は？）

## 注意!

最初はブロックの並び方は変えずに、ブロックのなかの数値を少し変えてみよう
各ブロックが何をしているか、わかってきたら、ブロックの抜き差しもやってみよう
並び替えるのはそのあとにしよう!!

誰でも絶対に間違える🐛のでとにかく少しずつ変えよう
うまく動かなくなったら「アンドゥー」（一つ戻す）や「リセット」（最初に戻す）を使おう

注意として、最初は少しずつ、変えて行きましょう。
少し変えては、実行して確認しながら進めましょう。

## サンプル (1)

やってみる

この例はいくつかの線を引いて模様を描きます。
少しの変更で劇的に変わるのでお勧めの例です。

## サンプル (2)

やってみる

この例は絵文字を規則に従って配置していきます。
■の絵文字を別の絵文字に変えてみて下さい。

## サンプル (3)

やってみる

この例も絵文字を規則に従って配置していきます。
スーパーボールみたいなものが跳ねるのをシミュレートしています。
数値をかえたり、絵文字を別の絵文字に変えてみて下さい。

## では…

以下のリンクへ進んでください。

サンプル集
チュートリアル（ブックカバー編）
チュートリアル（シール・カード編）
印刷の仕方
データダウンロード

興味のある人は、次のシール・カード編かブックカバー編のどちらかのチュートリアルへのリンクを選択してください。
チュートリアルでは、とても簡単な例から順々に複雑なものへと進んで行きます。

## Comming Soon …

- スマホ・タブレット連携⋯
（説明予備）
スマホ📱やタブレットのセンサー
（加速度➟センサー・
ジャイロ⟳センサー）を使って、
絵を変化させる機能を鋭意作成中！
- ちなみに、近日中に、スマホやタブレットのセンサーと連携して、
振ったり、向きを変えたりすると、それに合わせて絵を変化させるという機能を追加することを予定しています。

# 終

これで香川研究室の「お絵かきプログラミング」の紹介を終了します。