コンテンツを双方向に交換するプログラミング技術

大阪電気通信大学・教授　兼宗進

自己紹介

● 兼宗進（かねむね すすむ）　@kanemune

● 大阪電気通信大学 電子機械工学科 教授

○ 情報オリンピック日本委員会理事

○ 情報処理学会 コンピュータと教育研究会 主査

○ 文科省 中教審 教育課程部会 情報ワーキンググループ

○ 文科省 小学校プログラミング有識者会議

● 専門はプログラミング言語、情報科学教育

○ プログラミング教育の教育法や教材を公開

ドリトル、CSアンプラグド、サクセス

ドリトル言語の事例

● 2000年にドリトルを開発

● 2003年に双方向コンテンツ機能を実装（時代を先取りすぎ...）

● 2005年に紅林先生と西ケ谷先生が中学校でネットワークピンポンゲーム

● 2006年に中学校でチャットプログラミング

● 2015年に10年ぶりに中学校でチャットプログラミング（復活！）

メッセージ交換の授業例（焼津市小川中学校2015）

授業の様子

授業のまとめ

● プログラムを「送信/受信」から「送受信」「自動受信」「着信通知」などに生

徒が発展

● サーバを意識させながら、IPアドレスなどネットワークの基礎を説明

● 他人の名前での書き込みを題材に、認証とセキュリティを議論

文字以外のコンテンツのプログラミング

● ドリトルでは文字のほかに、ほとんどのオブジェクトを送信可能

● 数値、タートル、描いた図形、画像、ブロック（プログラム）

● 以下は計測データを受信してグラフを描く学習例

// データ受信のサンプルイメージ

サーバー！”172.16.86.21”　接続。かめた＝タートル！作る。かめた！４００　歩く　４００　戻る　９０　左回り　２００　歩く　２００　戻る　図形を作る。タイマー！作る　２　間隔「｜n｜　　値＝サーバー！"data"　読む。　　かめた！（ｎ＊１０）（値＊５）位置。」実行。

参考資料　ドリトル

● ドリトルのサイト　http://dolittle.eplang.jp

○ インストール版。生徒PCでファイル展開

○ オンライン版はブラウザで動作。双方向は不可

■ JavaScriptにコンパイルするトランスパイル方式

● 書籍

○ 日本文教出版「IT・Literacy Scratch・ドリトル編」

○ 東京書籍「まずはここから　プログラミング事例集」

○ 東京書籍「ドリトルによるプログラミング学習」

○ 開隆堂「やってみようプログラミング」

（補足1）外部入力の処理

● 外部（人、デバイス、他のコンピュータ）とやり取りするときのモデル

● ポーリングとイベント処理が基本

バッチ処理ポーリング（ループで監視）for() { if (sensor()) { moter(1); }}

センサ　　アクチュエータ

イベント処理（入力が来ると処理）forward();

click() { right();}

（補足2）　双方向通信のモデル

● クライアント・サーバー（Web）● メッセージ送信（Scratch）● 共有メモリ（ドリトル）

abc(){...}

http://sv/abc f();f(){ ...}

x=1; print(x);

x：1m：はろー

クライアント・サーバー　　　　メッセージ送信　　　　　　　　　　　　共有メモリ（C/S）　　　　　　　　　　　（イベント）

（補足3）　手順の図示

● フローチャート（手順）処理は書けるがやり取りは書けない

● シーケンス図（通信）やり取りは書けるが処理は書かない

● アクティビティ図（通信と手順）やり取りと簡単な処理を書ける

https://eng-entrance.com/programming_flowcharthttp://www.itsenka.com/contents/development/uml/sequence.htmlhttp://www.itmedia.co.jp/im/articles/0311/15/news001.html

提案 （お客）　　　　　　 （自販機）

お金入れる

商品選ぶ

商品受取る

お釣受取る

金額表示する

商品出す

お釣出す

ボタン光らせる

お金

光

商品ボタン

商品

お金

● 中学校段階では「分岐や反復の

ないアクティビティ図」を推奨

（教育用アクティビティ図）

○ 手順は順次のみで簡潔に記述

○ やり取りする情報に注目する

● 抽象度を意識した設計

○ システム全体の設計は教育用アクティビティ

図や状態遷移図（概要設計）

○ 個々の処理（矩形）や状態（円）の実装はフ

ローチャート（詳細設計）

● （自販機の例）

○ 「金額で買える商品だけボタンを光らせる」

「お釣があればお釣を出す」という条件分岐

は実装のため詳細設計で検討

（補足4）　状態の図示（1）

● 手順と状態は両方とも必要

● 「壁に衝突したら後退する」の例

前進している

後退している

衝突

前進する

衝突？

後退する

　　　　　　Yes

No

（補足5）　状態の図示（2）

● フローチャート/アクティビティ図は動作（〜する）

● 状態遷移図は状態（〜している）

● 全体の状態を整理してから、個々の状態を手順で考える

カギをかけて停まっている

止まっている

走っている

カギ外す　　　　　　　　　　　　　　　　　ペダルこぐ

　　　　　　　　　　　　　　ブレーキかける

　　　　　カギかける

まとめ

● ドリトルで双方向コンテンツを提供

○ 教室内で文字/数値/画像/描いた図形を交換

● 双方向通信のモデルを整理

○ C/S、メッセージ送信、共有メモリ

● 双方向コンテンツの図を提案

○ 教育用アクティビティ図

● 図の使い分けを提案

○ 概要設計（外から見た動き）：教育用アクティビティ図や状態遷移図

○ 詳細設計（実装するための設計）：フローチャート