Vol.104

CON T E N T S【コラム】携わるシステムが利用される楽しみ… 松浦 健二【解説】ワークショップで小学生のための情報科学の授業を作った話… 原田 康徳【解説】Processing でプログラミングに挑戦！─第 4 回アニメーションとインタラクション─… 杉浦 学

COLUMND
WE NEERIDGE!
YOUR B
YOU!
K
THAN

携わるシステムが利用される楽しみ

基 応
専 般

Jr.
実世界の社会インフラとして，橋を架けたとか，道を通したなど，それぞれの仕事を成し遂げた方々は，それらの利用状況を見て，自らが成したモノに対して，陰に陽に誇りに思うことがあると想像します．情報学関係の分野では，
たとえば研究者なら提案手法やアルゴリズムといった研究成果が，ほかの研究の糧や礎になることもあれば，教育者
ならば自らが教育文脈で関係した人の成長を見ることも類すると思います．
情報基盤や情報システムの場合を想像してみます．そうすると，たとえば内製の場合では，システム導入当初，利用者から聞こえてくる声の中には，“ 今までと違う（戸惑い）”，“ 使いにくい（批判）” といったネガティブなものもあります．そんなときには，提供側は，それらに対して “ システムや基盤は常に進化・改善されます ” とか “ 手順
書は読みましたか？ ”，のような心の声を発することもあるかと思います．状況を否定的に捉えず，“ ああ，使ってもらえている ” とか “ なるほど，〇〇にはまだ改善の余地がある ” などと肯定的な姿勢であれば，精神面でも健全です．
外注システムの場合でも，要件定義や外部仕様への関与，あるいは運用への寄与など携わり方はさまざまですが，直接的でなくとも，ある種の冷静で真剣な思いがより良いシステムに繋がることはよくあります．
否定的な声は的を射ていることも多いので，ありがたくひとつひとつの声を冷静に分析しながら，システム改善に繋げていけば，次のシステムではその経験が活かされます．使われる楽しみを覚えるのは，どの程度工夫し，どの程度魂を込めた（ベストを尽くした）か次第な部分があります．技術的に工夫した部分が「はまる」と喜びは倍増です．
工夫の中には，簡単なスクリプトの提供だけでも現場からは大変重宝されることもあります．ただし，ライフサイク
ル上の契機により終息するシステムもあり，終息が決まったときにはスパッと気持ちを切り替えられる素養も大切で，それには経験が必要です．
実世界の道や橋にも大小あって，その利用者も地域の方だったり世界中の方だったりするわけですが，情報システ
ムでも同様です．情報システムの文脈で何等かの対岸に橋を架け，道を通すことでさまざまな方に貢献できれば，この世界で生きていくひとつの動機（楽しみ）になり得ます．もしこれからシステム提供側を目指すなら，さまざまな声を冷静に捉えて「めげずに楽しむ」ための経験と自信を持ちたいものです．
松浦健二（徳島大学）

LOGOTYPE DESIGN...Megumi Nakata, ILLUSTRATION&PAGE LAYOUT DESIGN...Miyu Kuno

ぺた語義は pedagogy（教育学）を元にした造語です．常設の教育コーナーとして教育や人材育成に関する記事を広く掲載しています．
ぺた語義に掲載された記事は，情報処理学会 Web ページの「教育・人材育成」からどなたでもご覧いただけます .

情報処理 Vol.61 No.5 May 2020

509

ARTICLE

基 応
専 般

ワークショップで小学生のための情報科学の授業を作った話
原田康徳

デジタルポケットとして見る必要があります．コンピュータの専門家

きっかけ

たちはコンピュータをどのように考えているので

とうとう小学校でのプログラミング教育が始まっ

しょうか．ここで僕が言っているコンピュータの専てしまいました．と言っても，みなさんご承知の通門家というのは，コンピュータに関する技術を前にり，プログラミングを学ぶ科目ができたのではなく進める論文を書いたことのある人で，単にプログラ「プログラミング的思考」を身につけさせるという，

ミングを職業としている専門家ではありません．

なんとも不思議な内容になっています．これまでにそんなモヤモヤを吹き飛ばしてくれるチャンス

もコンピュータを操作する技術はいろいろと教えらがやってきました．僕に情報処理学会「夏のプログ

れてきましたが，コンピュータの中身に近づいたの

ラミング・シンポジウム」の幹事をやらないかと．

は評価すべきだと思います．しかし内容が，30 年

テーマは子どもに向けたコンピュータ教育．それくらい前のコンピュータ観で止まっていて，たとえで今までやってみたかった，コンピュータの専門

ば，順次，繰り返し，条件分岐がプログラミングの家に子ども向けの授業を作ってもらうことにトラ基礎というような授業が行われていたりします．こイしました．

れは間違いではないですが，制御構造だけ取り出し「課外授業ても意味はなく，変数とセットで教える必要がありがありましたが，各界の有名人が母校に帰って良ます．ところが変数を教えるのは難しいので，ロ

い授業をするという，あんなイメージです．授業

ボットや亀に変数の代わりをさせますが，そもそも，はその分野の本質に迫っていて，大人が見ても感制御構造だけ教えることってそんなに大事なの？

心するような内容です．

と思うわけです．

ようこそ先輩」という NHK の番組

さあ，それを夏のプロシンのフォーマットに合わコンピュータの技術は目まぐるしく変化している

せてどうインプリするか．やったことのないことでなかで，小学生への教育を考えることはとても難し

すから慎重になります．幹事団の議論は非常に盛りいことです．古いことは必ずしも基礎ではないです

上がりました．

し，今の時代の最先端が，子どもたちが大人になる

最初の山場は，参加者が集まるかどうか．会場費

ころでも最先端である可能性もほぼありません．専

と参加費から赤字にならない最低参加人数は決まり

門家を育成する教育だったら全部教えればよいのでますが，不安だらけなので対象を広め広めで募集しすが，義務教育として市民全員が知らなければならました．で，ありがたいことに結構な人数の参加とないことはどんなことなのか．その切り口を考える

発表申し込みをいただきまして，そこから具体的なのは非常に難しい．

進行を考えるフェーズに入りました．

そのためには，コンピュータの技術の変化を流れ-【解説】ワークショップで小学生のための情報科学の授業を作った話 -510

情報処理 Vol.61 No.5 May 2020

事前準備
最終的なゴールはモデル授業をいくつか作ること．

よる高校生向け「暗号の話」出張授業です．1 つはア
ルファベットが書かれたテープを 2 本用意して，鍵となる数だけずらして文字を置き換えるシーザ暗号

グループに分かれて授業を作って最後にその授業のの体験．もう 1 つは，表に公開する 2 つの数，裏体験をして終わることにします．いままで思いついに秘密の数 1 つが書かれたカードを使い，安全に暗たことのない授業を作るという，とても創造的な活号の鍵を伝える体験．なるほど，暗号もこういうや動になるはずです．それで，効果の程は分かりませり方だったら分かりやすい．やり方を工夫すれば小んが，全体をワークショップ形式で作ってゆくこと学生にもできそうな内容でした．

にしました．

もう 1 つの模擬授業は東北大学の中野圭介先生に

僕は以前はワークショップを見様見真似でやっよる「モデル検査のパズル化」です．列車の車両の部て ま し た が， ち ゃ ん と 基 礎 か ら 学 び た い と 思

品があり，切り口の形で連結できるかどうかが決めい，10 年前に青山学院大学の「ワークショップデられている．両端が決まっているため，一定のルー

ザイナー育成プログラム」というのを受講しまし

ルでしか完成させることはできないが，遊びながらた．期間は 3 カ月ですが，ワークショップの基礎

どんなルールが隠されているのかを探ってゆく（右理論を学んで，実際にグループでワークショップの車両はパンダを 1，カエルを 0 とする 2 進表記でを作ってそれを子どもたちにやってみるという内上の列を 3 倍した数が下の列に現れるそうである）．

容です．今回はそこでの流れをかなり参考にして実際に小学生にやった内容だそうで，簡単そうに見います．僕に加えて幹事の渡辺勇士さんもワーク

えて意外と奥が深くて面白いものでした．この 2 つ

ショップデザイナーですが，さらにグループに一の授業のおかげで，参加者の皆さんにイメージが湧人ずつそれが分かっている人に入ってもらいたい．

きやすくなったように思います（図 -1）．

でも仕事として頼むほどの余裕はない．というこ

電気通信大学の久野靖先生には，いま先生が日本とで，普段ビスケットのワークショップをやって学術会議の中で策定されている「情報教育の参照基

くださっている方々でワークショップデザイナー

準」についての基調講演をお願いしました．大学生・の講座を修了した人たちにお手伝いに来ていただ

高校生・中学生・小学生と各年代で非常に広い範囲くことにしました．

で学んでほしい情報教育を網羅的に整理した基準の紹介です．そういうしっかりしたものがあるおかげ

インプット
例年の夏のプログラミングシンポジウムと同様にで全体のバランスを気にせずに，参加者は羽目を外した内容に挑戦できるようになるだろう．という意
図がありました．

一般発表を募集しまして，それに加えて，模擬授業と基調講演もお願いしまして，参加者へのインプッ
トとします．ざっくりとした会の時間割は，初日と 2 日目の午前中で，一般発表 6 件，模擬授業 2 件，
基調講演，2 日目の午後からグループで授業を作り始めて 3 日目の午前中に作った授業の体験をやって終わりという流れです．
模擬授業の 1 つは長崎県立大学の山口文彦先生に図 -1 車両のパズル

情報処理 Vol.61 No.5 May 2020

511

3）「コンピュータとは」地図づくり

グループ決めグループに分かれて模造紙上で，全員が考えた

参加者は若い学生さん，リタイヤされた大学の先キーワードの地図を作りました．この作業が 1 つの生，バリバリの研究者，コンピュータを使えるレベ

グループワークですが，同じキーワードの集合なの

ルの素人の方と多岐にわたりました．それらからどにグループごとで分類の仕方が全然異なるなど面白うやってグループを作るかです．グループワークがい結果になりました．

うまく回らず，途中で喧嘩が起きてしまうのは論外

4）
モヤワード

ですが，専門家が頭の中で考えたものじゃなくて，

1）から 3）のワークを通じて，意味の分からない

ちゃんと素人に伝わる内容になっているかも大事で

言葉，気になった言葉を「モヤワード」としてメモをす．つまり，グループの中に専門家と「子どもの視しておき最後に回収しました．

点に立てて」「適度に素人目線」な人が混ざっている

この話題と進行は，さまざまなレベルの参加者が必要があります．さらに，運営側でエイやと決めて対等に語り合え，専門家があえてこだわりたくなるしまうのではなく，自由に好きな人と一緒になってようなものを選びました（図 -2）．

でもなく，なんらかの興味の一致する人たちが緩い

2 日目の午後のグループ分けは，2 段階で行いま

必然性でグループができて．さらにグループ内で上した．まずは，6 グループがそれぞれ作った「コン下関係がなくフラットな関係が維持できるような人

ピュータとは」の地図，モヤワード，個人的に提案間関係．グループは 2 日目の午後までに決めたいのされたテーマ（3 つ）から，一人 3 票の投票で候補をで，その準備として初日の夜が使えます．通常なら

6 つに絞ります．そこから，自分が参加したいグ

懇親会で楽しくお話をする時間ですが，それをワー

ループを自由に選びます．人数の制約は各グループ

クショップ的に何かできないか，と考えました．

3 〜 6 名です．

それで，行ったワークショップは次のようなもの

これによって決まったグループは次のようになり

です．

ました．

1）
自己紹介〜コンピュータ自分史〜

1．モヤワード「コンピュータに教える」

A3 の紙に 4 つの質問について簡単に答え，それ

2．モヤワード「コンピュータの面白さが分からない」

を持って，4 人グループで自己紹介を 3 セット．質問 内 容 は， 子 ど も の こ ろ 好 き だ っ た 遊 び， コ ン
ピュータとの出会い，衝撃を受けたコンピュータのエピソード，今の自分（専門分野）ということで，自分が子どもの頃を思い出しながら，どうして今の自分があるかを振り返ってもらいました．
2）
コンピュータとは〇〇自分が考えるコンピュータを一言で言い表してもらって，同じようにグループで話し合う時間．自分
史からさらに進んでコンピュータに対するイメージを共有します．専門家が考えているイメージと，素人が考えているイメージの違いなどにも気づいてもらいます．

図 -2 「コンピュータとは」の地図 各自が思っている「コンピュータとは〇〇」をグループごとに 2 次元に配置した例．このグループは世界地図に
喩えてユニークに配置している-【解説】ワークショップで小学生のための情報科学の授業を作った話 -512情報処理 Vol.61 No.5 May 2020

3．地図
「パンゲア」

参加者には，改善のアドバイスではなく感想のみ

4．提案テーマ「先生にやりたいと思ってほしい授業」

を付箋紙に書いてもらいます．

5．提案テーマ「playful で試行錯誤ができる講義か

赤い付箋紙：面白かった・夢中になれたところら入らない小学生向けの授業とは？」
6．提案テーマ「コンピュータサイエンスを国語で考える」

青い付箋紙：やりづらかった・違和感を覚えたところ
我々は「面白かった」という感想の前に，つい改善
点のアドバイスを言ってしまいがちですよね．まずは，ポジティブな感想で，このオリジナルな授業を授業作り開始ここから皆さんに作っていただく課題は次のよう作ったことを称えましょう．ときには本当に重要なアドバイスが言えることがあるのかもしれませんが，
しかし大抵の場合は「やりにくかった」という，実施な制約でお願いしました．

している人たちが見えていない視点を伝えるだけで目的：コンピュータを知ってもらう

十分なのです．改善点は自分たちで見つけ出せるは

対象：小学生（中学生でも可）ずですし，その方が作った人たちの気分が良いです

時間：45 分よね．

場所：学校の教室

最後にまた 40 分ほどグループでフィードバック

伝えたいこと：グループで考えるを受けて修正をし，グループごとに発表をして会は

内容（体験と解説）：グループで考える

終了しました．

2 日目の午後以降は，グループ単位での授業作りの時間としました．この時間はみなさんとても真剣に議論されていたようです．最終日に 6 グループの授業を 2 つずつ同時に実施し 3 セット行う予定でしたが，2 日目で大体できてしまった 2 グループには

結果報告
できあがった授業をご紹介します．紙面の都合上，詳しくお伝えするのは最初の 2 つだけです．

夜に前倒しで実施してもらいました．いずれの授業も短時間で完成度の高いものを作っていただき，ほ● コンピュータの入力について勉強しよう

かのグループへの良い刺激にもなったようです．予

チーム：1-2-5 木

想されていましたが，消灯時間 12 時まで（お酒も飲ねらい：テーマ「コンピュータに教える」

まずに）作業をしていたグループもありました．
最終日の授業も，本当に幼稚園の手遊び歌から始情報を入力するとはどういうことか？について
AD 変換／量子化の動作を体感してもらう

めたグループも現れるなど，楽しい内容のものばか

内容：同じ大きさの板を 5 枚ずつ重ねたもの，2 枚りでした．笑い声がおき真剣に取り組む様子が見らずつ重ねたもの，1 枚ずつを複数個用意して，それれました．

をものさしとして長さを測り，相手に数で伝える．

授業をやって終わりではなくて，ここから改善の聞いた側はその数から長さを再現する．5 のものさ

時間をとりました．そのために，授業ごとに参加者

しだけを使った場合，2 のものさしだけを使った場からフィードバックをもらいインタビューをしまし合，1 のものさしだけを使った場合で，測る長さのた．このやり方も，実際にワークショップデザイ

正確さが違うことを体験する（図 -3）．

ナーの講座で行われている手法をほぼそのまま使わ

解説：コンピュータにはものさしで計ったようにしせていただいてます．

か入力できない．エアコンは部屋の温度を計って動情報処理 Vol.61 No.5 May 2020

513

くけれど，部屋の温度をどれくらい細かく計るのか，「面白い」ことを考えるのは人間の役目だ．

5 のものさしのように飛び飛びで計るとちょうどいい温度で調整するのがむずかしくなる．

● コンピュータとのかかわりを見つけよう
チーム：パンゲア● コンピュータって面白いの？

内容：「電気にかかわるもの・繋がるもの」「そうでチーム：フェイスホワイト

ないもの」の写真をたくさん撮り，それらの写真をねらい：コンピュータを知ってもらう「入っている」「おなじやくめ」といった接続するコ

コンピュータは正確に動く

マでつないでゆく対戦型ゲームで進める．IoT の時

コンピュータはアホなことでも命令されたらやる代を見据えて，身の回りのものとコンピュータとのコンピュータの面白さは，自分が作るかかわりを考えてゆくきっかけとする．

コンピュータって面白いの？，面白さが分からな
い，を解消するために作った授業● コンピュータの気持ちになろう

内容：「start」ボタン 1 つと文字が入力できるマス

チーム：ぱわぽんが 2 × 6 行ある画面の動作を隠し自由に触らせ動

内容：命令カード：数字，「に移動」，「下に書く」，「右きを探る．種明かしは「start」を押すと右のマスのに書く」を並べてプログラムが作られている．それ

文字がすべて消え，左のマスの数秒後，右のマスのを解釈し実行すると絵がかける．用意されたプログ

文字を再表示するというもの．表示させる文字やタ

ラムを人間が実行して絵（漢字）を書いてみたり，与イミングを工夫して「何か面白いことをしてくださえられた漢字を描くプログラムを作ってみる．命令

い」と指示し自由制作（図 -4）．

とデータ，抽象化，コンピュータは不満を言わない，

解説：コンピュータは「正しいことしかしない」ではといったことを学ぶ．

なく，「正しくないことも命令すれば，全力でやってくれる」．

● 意外と伝わらない！？「伝言ゲーム」「コンピュータが面白い」のではなく「コンピュー

チーム：うさぎさんチーム

タ」
は命令を順番にやるだけ．

内容：用意された絵（「イ」の逆さまのような）を数字を使わずに相手に伝えて，書いてもらう遊びを通じて，曖昧な指示の伝わりにくさ（コンピュータは数
字の指示が得意），言葉を節約する方法を通じて抽図 -3 積木を重ねて作ったものさし．この厚さを単位として測る

図 -4 画面の例-【解説】ワークショップで小学生のための情報科学の授業を作った話 -514

情報処理 Vol.61 No.5 May 2020

象化を学ぶ．また，できあがった絵が錯覚になって授業を本にしたらどうかといったアイディアもありいる二重の驚き．

ましたが，実現には至ってません．
いずれにしても，元々は小学校への教育にもっと● 観察して・まぜて・面白くする国語

骨太なコンピュータを伝えたいというところにあ

チーム：いいができた

りました．10 年後の次の学習指導要領の改定まで，

内容：「タオルを」「首に巻いている」といった文のゆるゆると進めて行ければとも思います．これを読

主語と述語を交換し，意味の通らない文を作る．意

まれたみなさんも，授業を作ってみたくなりません

味が通るように間に入る言葉を考える．国語とコンでしたか？

ピュータの面白さを伝える授業．

ていきましょう．

ぜひ作ってみて，いろいろな形で広め（2020 年 2 月 13 日受付）

これからどうする？
元々子どもへの教育に興味のある人たちが集まったこともあって，皆さんはとても楽しそうに授業作
りにかかわってくださいました．どの授業もオリジナリティに溢れるものとなったと思います．次の課
題は，これをどのように次の活動につなげるかです．
実際に本物の小学生相手にやってみるとか，できた原田康徳

hakase@viscuit.com

ビスケット開発者．博士（工学）．ワークショップデザイナー．
1963 年北海道生まれ．1992 年北海道大学大学院情報工学専攻博士後期課程修了．1992 〜 2015 年日本電信電話（株）NTT 基礎研究所，
NTT コミュニケーション科学基礎研究所 1998 〜 2001 年 JST さきがけ研究員．2004 〜 2006 年，2010 〜 2013 年 IPA 未踏ソフトウェア
創造事業プロジェクトマネージャ兼務．NTT を退職後，合同会社デジタルポケット設立．

情報処理 Vol.61 No.5 May 2020

515

ARTICLE

基 応
専 般

Processing でプログラミングに挑戦！
─第 4 回 アニメーションとインタラクション─

Jr.

杉浦 学

鎌倉女子大学

前号の宿題
前号では，カラフルな円の模様（図 -1）を描く宿
題を出題しました．
● 前号の宿題

6 //カラフルな円を敷き詰める
7 for(int y=0; y<=height; y+=40){
for(int x=0; x<=width; x+=40){
8fill(random(256),random(256),random(256));
9
ellipse(x,y,35,35);
10
}
11
12 }
スケッチ 1

カラフルな円の模様を描く（宿題の解答例）

二重の for ループの部分について，詳しく解説
しておきます．内側の for ループ（8 行目から 11行目）で 40 ずつ x を増やすことを繰り返し，さらにそれを外側の for ループ（7 行目から 12 行目）
図 -1

カラフルな円の模様

で 40 ずつ y を増やしながら繰り返します．最初

この宿題の解答例をスケッチ 1 に示します．7 行に，外側の for ループで y が 0 からスタートし，内目から 12 行目では，前号で解説した「繰り返し」と側の for ループで x が 0 から width（今回は 480）「乱数」を利用しています．繰り返しの for ループをま で 40 ず つ 増 え て い き ま す． 具 体 的 に は，x が二重にすることで，横一列に円を描く（内側のルー

0 → 40 → 80 → 120 →（中略）→ 400 → 440 → 480プ）ことを，画面の上から下まで（外側のループ）と増えていくことで合計 13 個の円を描くことにな

行っています．

ります．この間は y の値は 0 なので，ウィンドウ

1
2
3
4
5

//描画の準備size(480,480);
background(0);noStroke();の一番上（図 -2 の上）の位置に円を描くことになります．次に y を 40 増やし，同じように x を 0 から
480 まで増やしながら 13 個の円を描きます（図 -2の下）．このような動作を行うことで，ウィンドウの一面に円が敷き詰められていきます．

-【解説】Processing でプログラミングに挑戦！─第 4 回 アニメーションとインタラクション─ -516

情報処理 Vol.61 No.5 May 2020

内側のループで13個の円を描く

外側のループ（1回目の繰り返し）
yの値（円の縦方向の座標）は0
内側のループ（13回繰り返す）
xの値は0から480まで増える

外側のループ（2回目の繰り返し）
yの値（円の縦方向の座標）は40
内側のループで13個の円を描く
内側のループ（13回繰り返す）
xの値は0から480まで増える

図 -2

二重の for ループの動作と描画結果

1 int x=0;
2
3 void setup(){size(480,120);
4
noStroke();
56 }7
8 void draw(){
background(204);//残像を消す
9
ellipse(x,60,9,9);
10x++;//円を右に少し動かす
11
12 }スケッチ 2

移動する円のアニメーション

画面の左から右へ移動していく

アニメーション
図 -3

ここからは Processing でアニメーションを表現

スケッチ 2 の実行結果する方法について解説していきます．これまで作

setup 関数と draw 関数を用意したスケッチは，成してきたスケッチは，1 行目から順番に処理が

図 -4 に示した順序で実行されます．スケッチ 2 の実行され，最後の行に到達すると実行が終了して場合は，最初に 1 行目の変数 x の宣言が実行されいました．

た後に，setup 関数の「{」と「}」に囲まれた部分がProcessing では，スケッチ 2 のように記述する

1 回だけ実行されます．ここではウィンドウの大ことにより，アニメーションを作ることができま

きさと輪郭線なしの初期設定をしています．次にす．スケッチ 2 を実行すると，白い円がウィンド

draw 関数の「{」と「}」に囲まれた部分が，スケッ

ウの左から右に移動していくアニメーションが表

チの実行が終了されるまで（■のボタンが押される

示されます（図 -3）．スケッチ 2 では，1 行目で xまで），1 秒間につき 60 回繰り返して実行されます．

という変数を宣言し，0 を代入しています．これスケッチ 2 の場合は，画面全体を一度塗りつぶし，

は円の横方向の位置を保存しておくための変数で変数 x を x 座標にした位置に円を描き，x を 1 増

す．3 行目から 6 行目の void から始まる部分と，やすという 3 つの処理が繰り返されることになり同じく 8 行目から 12 行目の void から始まる記述ます．結果として，円が左から右に動くアニメー

は「関数」と呼ばれる部品です．void という記述以ションが実現できます．

外で関数を書き始める場合もありますが，ここでスケッチの書き方

は説明を省略します．void の後に半角のスペースを入れて，関数の名前を書きます．アニメーショ
ンを作る場合は「setup」と「draw」という名前にしておく決まりです．名前の後には「（」と「）」を書きます．今回は空の括弧ですが，括弧の中に何かを書く場合もあります．次に「{」と「}」で関数の範囲を指定します．

実行の順番

ここにスケッチ全体で使う変数を宣言する❶変数宣言を処理

void setup() {ここに最初に１回だけ実行する処理を書く}
void draw() {ここに繰り返す処理を書く

}

図 -4

❷準備の処理を実行❸停止ボタンが押されるまで繰り返すアニメーションを表示するスケッチの仕組み

情報処理 Vol.61 No.5 May 2020517

描画の結果はウィンドウに残るので，円が移動しているように見せるために，9 行目でウィンドウの全面

8 void draw(){
background(0);//前のフレームの描画結果を消す
9を灰色に塗りつぶしています．この塗りつぶしの処理

10

for(int y=0; y<=height; y+=40){がないと，円が移動していくたびに前回の描画の結果

11

for(int x=0; x<=width; x+=40){が残るので，図 -5 のように白い棒が伸びていくようなアニメーションが表示されます．

円が次々と重なって描かれる

図 -5

12

fill(random(256),random(256),random(256));

13

ellipse(x,y,35,35);

14

}

15

}

16 }

円が重なって描画される❏ 練習問題
前回の宿題の解答例（スケッチ 1）をアニメーション

インタラクション 1

マウスの座標に改造してください．スケッチを実行するとさまざ

アニメーションの方法が分かったところで，次はまな色の円がウィンドウに表示されるようにしてみ

マウスやキーボードなどのユーザの入力に反応するましょう．draw 関数が 1 秒間に実行される回数（フ「インタラクション（対話的なやりとり）」について解

レームレートと呼びます）を 5 回に設定するために，説していきます．

setup 関数に frameRate(5); を追加しましょう．

スケッチ 3 のようにすることで，マウスの位置に円が描けるようになります．実行をしてウィンドウの中でマウスを動かした後の様子を図 -6 に示しました．3 行目の fill 関数は 2 つのパラメー
タをとっていますが，2 番目は透明度で０（完全に透明）から 255（不透明）の値で指定します．こ＜解説＞

れにより，少し透けた黒色の円を描くように設定

前号の宿題をアニメーションさせるスケッチの例

し て い ま す．8 行 目 の mouseX と mouseY は，現

1 void setup(){size(480,480);2
background(0);3noStroke();
4
frameRate(5);//1秒間にdraw関数を5回実行
5
6 }7

在のマウスの位置の座標が格納されている変数です．これらの変数は， height や width と同じよ
うに宣言をしないで使える変数のうちの 1 つです．
8 行目でマウスの位置を中心にして円を描くように指定しています．マウスを速く動かした場合は円の重なりが少なくなって薄い黒色に，ゆっくり動かすと重なる円の数が増えるため濃い黒色にな
ります．

-【解説】Processing でプログラミングに挑戦！─第 4 回 アニメーションとインタラクション─ -518

情報処理 Vol.61 No.5 May 2020

1 void setup(){size(480,120);
2
fill(0, 102);
3
noStroke();
45 }6
7 void draw(){
ellipse(mouseX, mouseY, 9, 9);8}9スケッチ 3 マウスの位置に円が描かれる（文献 1）p.58 より）

図 -6

スケッチ 3 の実行結果

インタラクション 2

マウスクリック

1 void setup(){size(240,120);
2
strokeWeight(30);34 }56 void draw(){
background(204);
7
stroke(102);8line(40,0,70,height);
91011// マウスがクリックされていたら線を黒に
if (mousePressed==true) {12
stroke(0);
13
}
14
15
line(0,70,width,50);
16
17 }スケッチ 4 マウスのクリックに反応する（文献 1）p.64 より）

マウスの位置だけでなく，マウスボタンの状態を調べることもできます．マウスのボタンが押され る と，mousePressed と い う 変 数 の 値 が 変 化

ウィンドウの中でマウスのボタンをクリック

します．この変数の型はブーリアン型と呼ばれて

図 -7

おり，変数の値は真（true）か偽（false）のどちら

スケッチ 4 の実行結果

か一方です．マウスのボタンが押されている間は，ある条件が成立しているかを調べて，成立していmousePressed の値は真（true）となり，押されてるときにだけ指定した処理を実行したい場合は，スいない場合は偽（false）となります．

ケッチ 4 の 12 行目から 14 行目のように if を使っこの変数の値を調べることで，マウスがクリッた「条件分岐」を記述します（図 -8）．条件分岐は繰クされたときに特定の処理を実行することができり返しの for ループと似ています．括弧中の条件のます．まずはこの部分について詳しく考えていき

記述は，前号で紹介した比較演算子を使って記述しましょう．スケッチ 4 では，マウスのボタンがクます．

リックされたときに線の色が変化（図 -7）します．

if (条件) {条件が成立したときに実行されるコード}スケッチでの書き方

参考：ブロック型の言語では

if (mousePressed) {stroke(0);}条件に記述する変数の値が真偽の場合は == true を省略できる

図 -8

条件分岐の記述方法

情報処理 Vol.61 No.5 May 2020

519

ある条件が成立したときと，それ以外のときにこのスケッチを，位置と色と大きさがランダムな別々の処理を実行したい場合は，if の「{」と「}」の円が増えていくようなアニメーションに変更してみ後に else を追加します．スケッチ 4 の条件分岐のましょう．

部分（12 行目から 14 行目）を，else を使ったものに変更したものをスケッチ 5 に示します．実行結果と動作の解説は図 -9 をご覧ください．
次のような順番で作業をしてみるとよいでしょう．

if(mousePressed){
stroke(0);}else{
stroke(255);}
スケッチ 5

Step1：円の描画位置を毎回異なる値に変更しま
しょう．x 座標と y 座標に random 関数を使っ

else を追加したスケッチ 4 の抜粋（文献 1）p.65 より）ボタンのクリックなし

ボタンのクリックありて乱数を指定しましょう（横は 0 から width，
縦は 0 から height）．
Step2：円の色を赤で固定ではなく，いろいろな色に変更してみましょう．fill 関数の RGB のそれぞれの値を random 関数で置き換えます（0 から 255）．

if (mousePressed) {stroke(0);} else {stroke(255); こちらが実行される}

図 -9

if (mousePressed) {stroke(0); こちらが実行される} else {stroke(255);}

スケッチ 5 の動作と解説

Step3：円の大きさを 50 以上・200 未満の間でランダムになるようにしてみましょう．
注意：横幅と縦幅を一緒にしないと正円にならないので，生成した直径を変数に保存し，横幅と縦幅の両方で参照しましょう．

● 練習問題

ランダムな直径を変数に保存するヒント：

最後の練習問題として，簡単なアート作品を作成しfloat diameter = random(50,200);てみましょう．以下に示したスケッチは，毎回同じ

Step4：フレームレートが少し遅いので，1 秒間

位置に，1 秒間に 1 回ずつ，半透明の赤い円が繰りに 10 フレームが実行されるように変更しま返して描かれます．

しょう．

1 void setup(){size(800,600);
2
background(0);3noStroke();
4
frameRate(1);56 }78 void draw(){
fill(255,0,0,90);//90は透明度を指定
9ellipse(400,300,30,30);
10
11 }一通り完成したら，マウスをクリックしている間だけアニメーションが進んだり，マウスの位置に円が描かれたりといったアレンジをしてみるのもよいでしょう．

-【解説】Processing でプログラミングに挑戦！─第 4 回 アニメーションとインタラクション─ -520

情報処理 Vol.61 No.5 May 2020

＜解説＞
Step4 まで作業をしたスケッチの例
1 void setup(){size(800,600);
2
background(0);3noStroke();
4
frameRate(10);56 }78 void draw(){
fill(random(256),random(256),random(256),90);
9
float diameter = random(50,200);
10ellipse(random(width),random(height),diameter,diameter);11
12 }投稿のすすめと発展学習
これまで 4 回にわたって，中高生のジュニア会員に示した『Processing をはじめよう』がおすすめでの皆様を読者に想定した連載を掲載しました．ペー

すが，より発展的な内容も含めて学習したい場合は，ジ数の都合から詳細の説明を省いた部分もありま

文献 2）に示した『Processing クリエイティブ・コー

すが，Processing のようなプログラミング言語と，

ディング入門』も手に取ってみてください．

それを用いた創作活動に興味を持つきっかけとなれ

参考文献
1） Reas, C., Fry, B. 著，船田 巧 訳：Processing をはじめよう
第 2 版，オライリージャパン（2016）．
2） 田所 淳：Processing クリエイティブ・コーディング入門─
コードが生み出す創造表現，技術評論社（2017）．

ば幸いです．
また，ジュニア会員の皆さんがプログラミングに挑戦した結果は，ぜひ本誌の連載「集まれ！ジュ（2020 年 1 月 4 日受付）

ニア会員！！」のページに投稿（投稿方法は https://www.ipsj.or.jp/magazine/jrlist.html を参照）してみましょう．たとえば，最後の練習問題を少しアレン杉浦ジしたような，シンプルなスケッチも大歓迎です．

鎌倉女子大学家政学部家政保健学科准教授．慶應義塾大学大学院
政策・メディア研究科後期博士課程修了．博士（政策・メディア）．
プログラミング教育をはじめとした情報教育に関する研究に取り組
む．中高生向けの著書に『Scratch ではじめよう ! プログラミング入門
Scratch3.0 版』（日経 BP 社）など．

Processing はさまざまな創造的な表現をする仕組みが整っています．最初の一冊としては，文献 1）

学（正会員） manabu@kamakura-u.ac.jp

情報処理 Vol.61 No.5 May 2020521