人型ピクトグラムに考えてもらおう。

これまでは、あなたが人型ピクトグラムに命令をしてきました。しかし、人型ピクトグラムも考えることができます。今回は人型ピクトグラムに考えさせるための方法を知りましょう。まずはそのための準備！人型ピクトグラムの位置を知りましょう。

ピクトグラミングの座標

中心が(0,0)でこれは人型ピクトグラムの初期位置です。

右上が( 320, -320)、

左上が(-320, -320)、

左下が(-320, 320)、

右下が( 320, 320)、

つまり

x軸正方向が右、

y軸正方向が下となります。

人型ピクトグラムはM命令またはMW命令を用いて体全体を平行移動することができます。

人型ピクトグラムの画面上に、座標系を表示させることができます。

右上にある「座標系の表示」アイコンの右のチェックボックスをクリックすると有効になります。

例：人型ピクトグラムの位置を動かす

M命令の使用例です。

M -240 0

M 480 0 1

人型ピクトグラムに考えさせる方法

人型ピクトグラムは考える事ができます。ここでは人型ピクトグラムに考えさせる方法があります。その書き方を学びます。まずは、ランダムな数字を考えてもらう方法です。

ランダムな数を思い浮かばせる

人型ピクトグラムに命令するときに、今までは引数に数値を入力していました。その数値を人型ピクトグラムに考えてもらいます。それには関数を使います。関数の説明は、少し後にしますので、まずは具体的な例を見てみましょう。

ここではランダムな値を取得できる関数を使ってみます。

関数を使うときはその両側を[ ]で閉じます。

例：脚を回す人型ピクトグラム （関数の使い方）

REPEAT 50
RW LUL [RAND(-90, 90)] 0.2
END

「関数」は、与えられた文字や数字の組（引数の組）に対して定められた処理を行って結果（戻り値）を返す機能のことを言います。例えば「-90(度)以上90(度)以下の角度の1つ決めてください」という処理に対して「37」を結果として返すということです。対して、これまで学んできた「命令」は戻り値はありません。これが命令と関数の違いです。ピクトグラミングではいくつかの関数が定義されています。書き方も命令と少し異なります。ここではランダムな値を取得できる関数を使ってみます。

引数に関数を使って人型ピクトグラムを動かす

人型ピクトグラムに乱数を使って命令します。

例：ぶるぶる震えるピクさん （関数の使い方：引数に関数）

SC 0.3
REPEAT 1000
MW [RAND(-10,10)] [RAND(-10,10)] 0.02
END

例：ロボットダンス（関数の使い方：引数に関数）

REPEAT 50
R LUA [RAND(-90, 90)] 0.2 // 左腕を動かす
RW RUA [RAND(-90, 90)] 0.2
END

使用できる関数一覧

挑戦状

4回目の挑戦状です。挑戦状は、あなたがやりたいと思うところからやってください。チャレンジ1から順に取り組む必要はありません。また、全てのチャレンジに取り組む必要もありません。あなたがやりたいチャレンジに取り組んでください。

チャレンジ１　パタパタさせよう

次のプログラムを作ってみましょう。

(1) 次に示す(2)を50回繰り返してください。

(2) 0.1秒かけて-90度から+90度のいずれかの角度，左腕と右腕を同時に（その同じ角度だけ）動かしてください。ただし(2)でうごかす-90度から+90度のいずれかの角度は50回の繰返しで毎回ランダムで選ばれるようにしてください。

チャレンジ2     オリジナルピクトグラムをつくろう

自由に作品を作ってみてください。

ただし関数を使うこと。

レッスン5は2通りあります．簡単なバージョンは上のリンクをたどってください．

次のリンクは条件式を設定するのでやや難しくなってます．

本テキストの著作権は青山学院大学 社会情報学部 伊藤一成に帰属します。
© 青山学院大学 社会情報学部 伊藤一成研究室 All rights reserved.

ピクトグラムアニメーション

ピクトグラムアニメーションを作ろう

アニメーションさせてみよう

下に示す(1)～(2)の2つのプログラムを入力して、実行してみましょう。

そして、その2つの違いを観察しましょう

(1) RW LUA -140 0

(2) RW LUA -140 1

ちなみにプログラムを実行するには、再生ボタンを押します。

(1) は Lesson2でやりましたね。左手を上げている人型ピクトグラムになります。

(2) は 左手を上げている人型ピクトグラムになりますが、少し様子が違います。

徐々に手が上がりました。これはアニメーションです。

1秒間かけて左上腕を関節点を中心に反時計回りに-140度、

つまり時計周りに140度回転するという意味です。

RW命令の様式と処理は以下のとおりでした．つまりarg3の値を0以外の正の数にすることでアニメーションになります。

タイミングを考えたアニメーション

では次に以下の2行からなるプログラムを記述して実行します。

RW LUA -140 1

RW RUA 140 1

1秒かけて、左腕を上げてから、さらに1秒かけて右腕をあげるのがわかります。

では、１秒間かけて左腕と右腕を同時に上げるようにするにはどうすれば良いでしょう。そのためにR(Rotate　回転)命令というのがあります。

先ほどのプログラムの一行目の命令名RW（回転待ち Rotate Wait）のところをR（回転 Rotate）に変えて実行してみてください。つまり以下の通りです。

R LUA -140 1

RW RUA 140 1

R命令の仕様を下に示します。ポイントは「次の命令も同時に実行される。」という点です。

同じ部位のアニメーション命令が 同時に実行される場合の注意

R命令は、「次の命令も同時に実行される。」されます。そのため、R命令では両腕が同時に上がりました。

R命令は、「次の命令も同時に実行される。」ということを注意しなければいけません。

例：手をあげる…?

R LUA -140 1

RW LUA -140 1

この命令を実行しても人型ピクトグラムは何も反応しません。

これは、左上腕(LUA)を140度1秒間で回転するのと

左上腕(LUA)を-140度1秒間で回転する命令が同時に

実行されるため、実際には両方が相殺されるからです。

例：手をあげる（３つの命令を同時に）

40(度)手をあげる命令を3つ実行します。

R RUA 40 1

R RUA 40 1

R RUA 40 1

この命令を実行するとどうなるでしょう？これは R LUA 120 1 と同一になります。

R命令とRW命令をうまく組み合わせることで人型ピクトグラムの様々なアニメーションが可能となります。

実行中のアニメーションを制御するボタン

ここまでの説明でアニメーションを作れるようになったので、実行中のアニメーションを制御する5つのボタンを改めて紹介します。

実行　　　　早送り実行　　　一旦停止　　再スタート　　　クリア

実行… プログラムを最初から実行します．

早送り実行… プログラムを最初から早送りで実行します．

一旦停止… プログラムの実行を一旦停止します．このボタンを押した瞬間の状態でピクトグラムは停止します．

再スタート…一旦停止した状態から再び実行します．

クリア…プログラムを消去します．

オリジナルアニメーションピクトグラムができたら【アニメーション画像の保存の方法】

レッスン1では、画像の保存方法、レッスン2では、プログラムの保存と読込みの方法を学びました。

レッスン3の今回は、アニメーション画像として保存する方法を学びましょう。

（１）  作品を表す名称を作品名としてテキストフィールドに入力します。この例では「走る人」です．

（2）　画面真ん中上部にあるビデオアイコンの右下のチェックをオンにして、一度実行します。するとピクトグラムが通常よりゆっくり動くはずです。これは実行しながら同時にアニメーション画像を作成しています。全ての動作が完了したら、アニメーション動画が完成しています。その後に、ビデオアイコンをクリックすると保存のダイアログボックスが出ますので，指定したフォルダに、デフォルトでは、「作品名.gif」のファイル名（この例では，「走る人.gif」）で保存されます。

とりあえず、世の中にあるようなピクトグラムを作りたい方へ

これ以降は、プログラミングの諸概念を学んでいく内容になっています。とりあえず、アニメーションを含むピクトグラムを作りたい方は、最終のレッスン8「人型ピクトグラム、デザイナーになる」へ進んでください。

繰り返し

例：手をあげる

R LUA -140 1

と入力して改行キーを押すと左手があがります。

例：手を振る

手を振ってみましょう。友達と別れる時を想像してみてください。

3回左前腕(LLA)を左右に振ることができました。では手を振ることを10回や50回にするにはどうしますか。同じ命令をたくさん記述することで実現できますが、プログラムがとても長くなってしまいますし、プログラムを見て何回振っているのかをすぐ確認することも難しくなります。そこで繰返しの処理を書く方法を学んでみましょう。「○○回やって」ということと同じです。使う命令は以下の2つです。

例：手を振る（繰返しを使って）

上の「手を振る」の例を、REPEATを使って書き直します。

さらに、前回学んだ変数の定義と組み合わせると、手を振る角度や回数を

変数で設定できるようになり、より柔軟なプログラムを書くことができます。

例：手を振る（変数を使って）

挑戦状

3回目の挑戦状です。あなたがやりたいと思うところからやってください。チャレンジ1から順に取り組む必要はありません。また、全てのチャレンジ1に取り組む必要もありません。あなたがやりたいチャレンジに取り組んでください。

さあ、人型ピクトグラムからの挑戦状に挑戦してみましょう。

チャレンジ１

次のようなアニメーションを作成してください

0秒目から1秒かけて 両腕を 上げる。

1秒目から1秒かけて 左腕を 下ろす。

2秒目から1秒かけて 右腕を 下ろす。

参考画像

チャレンジ２

次のようなアニメーションを作成してください。

ただし REPEAT 命令を用いること。

1 秒かけて左手を曲げて、続けて1秒かけて再び左手を伸ばす

ということを 10 回 繰り返す。

参考画像

チャレンジ３

繰返しを使った自由作品を作成してみましょう。

次はレッスン4です．

本テキストの著作権は青山学院大学 社会情報学部 伊藤一成に帰属します。
© 青山学院大学 社会情報学部 伊藤一成研究室 All rights reserved.

人型ピクトグラムに命令してみよう

新登場！「プログラム入力テキストエリア」

Lesson1では「表示パネル」だけを使いました。今回からは、右上の「プログラムコード入力領域」を使います。

ピクトグラムに命令しよう

プログラム入力テキストエリアに文字を表示させる

まず、ピクトグラムの左腕をドラックして回転してしましょう。すると、「プログラム入力テキストエリア」に以下のように表示されます。

RW LUA 123 0

最初に命令の名前であるRWが記載されています。RWは回転(Rotate)の意味です。つぎの LUA というのは、体の部位を示しており、 この場合、左上腕( LUA : Left Upper Arm )の意味です。3 つ目の 123 は 123 度反時計回り に回転するという意味です。この値は、ドラッグして回転した角度によって変わりますね。4つ目の 0 は 0秒 で回転するという意味です。

Lesson1でいろいろな姿勢のピクトグラムを作りました。同様にピクトグラムを少しだけ動かしてみましょう。すると、プログラム入力テキストエリアに命令が追加されていきます。

下の例では、体全体(BODY)を反時計回りに7度 回転させています。それに続けて2行目で、左上腕(LUL:Left Upper Leg)を反時計回りに-33度、つまり時計回りに33度回転させています。

RW BODY 7 0
RW LUL -33 0
RW RLL -57 0

このように腕を回す や 体を回す のように指示することを命令といい、命令の集合を プログラムと呼びます。つまりあなたが画面上のピクトグラムに対して命令する訳です。

ピクさんはテキストでも命令できる

これまでピクトグラムを直接ドラックして動かしていましたが、プログラム入力テキストエリアに命令を打ち込んだ場合も同様に動かすことができます。その命令について教えます。説明では命令や体の部位は全て大文字で書いていますが、大文字でも小文字でも構いません。よってRW LUA 90 0でもrw lua 90 0でもOKです。

命令の様式

命令には様式があります。さっきまで使っていた RW という命令は、ある様式に従っています。その様式は、

RW arg1 arg2 arg3 arg4

です。始めのRWは回転を意味する命令の種類です。RWの次は引数(ひきすう)を指定します。引数とは、外部から与えられる数や文字のことを言います。あなたが人型ピクトグラムに命令をするとき、「回転(R)して。」だけでは、人型ピクトグラムは「どこを（左腕なの？右脚なの？）」や「どれだけ回転するの」と聞き返すと思います。つまり曖昧(あいまい)なく命令を実行するために与える数字や文字が必要です。その数字や文字を引数といいます。そこで arg1には体の部位を示す文字列を指定します。部位と文字列の表を参考にしてください。

次の arg2 では回転する角度を示します。反時計回りが正の値になります。よって負の値を使って時計回りの角度も表現できます。arg3は回転に要する秒数ですが，これは次のレッスンで説明します．

正式には命令の様式と処理は以下のようになっています．

オリジナルピクトグラムができたら【プログラムの保存と読込みの方法】

プログラムの保存

レッスン1では、画像として保存する方法を学びました。レッスン2では、プログラムを作成しましたので、プログラムの保存方法を学びたいと思います。

（１）  作品を表す名称を作品名としてテキストフィールドに入力します。この例では「走る人」です。これは画像を保存する場合と同じです。

（2）　テキストフィールドの右にある下向き矢印のあるアイコンを押します。すると保存のダイアログボックスが出ますので，指定したフォルダに，デフォルトでは，「作品名.txt」のファイル名（この例では，「走る人.txt」）で保存されます．

プログラムの読込み

画面の上の方の真ん中あたりにある上向き矢印のあるアイコンを押します。すると読み込みのダイアログボックスが出ますので，読み込みたいプログラムのファイルを読み込んでください．

挑戦状

２回目の挑戦状です。

挑戦状は、あなたがやりたいと思うところからやってください。チャレンジ1から順に取り組む必要はありません。また、全てのチャレンジに取り組む必要もありません。あなたがやりたいチャレンジに取り組んでください。

さあ、ピクさんからの挑戦状に挑戦してみましょう。

チャレンジ１　同じ姿勢を作ろう

画像と同じ姿勢のピクさんを作りましょう。

ただし命令はキーボードで入力すること。

チャレンジ2　オリジナルピクさんを作ろう

自由に作品を作ってみてください。

では，次は動くピクトグラムを作成してみます．レッスン3に行ってみましょう．

本テキストの著作権は青山学院大学 社会情報学部 伊藤一成に帰属します。
© 青山学院大学 社会情報学部 伊藤一成研究室 All rights reserved.

2019年1月4日から6日まで開催された国際会議IMCOM(International Conference on Ubiquitous Information Management and Communication) 2019にて，Mobile pictogrammingというタイトルで発表してきました．

Pictogrammingはスマートフォン版も利用できますが，論文の形でまとめていなかったので，これを機にピクトグラミング自体の紹介も兼ねて発表してきました．

中学生以上ではほぼ全ての生徒，学生がスマートフォンを所持しており，スマートフォン対応であれば授業時間外でも時間制約なく利用できます．単純な図形である人型ピクトグラム一体を題材とし，さらに人型ピクトグラムの部位のドラッグ，命令入力支援ボタン，少ないテキスト入力文字数による命令記述をベースとしているので，スマートフォンのように表示領域が狭いデバイスあっても，視認性や判別性を損なうことなく，学習できる可能性を秘めています．現状，PC版のアプリケーションを元にレイアウト変更した程度ですが，今後，スマートフォンの様々な特性をうまく取り入れた機能を実装し，評価検証を行っていく予定です．

ピクトグラミングの使い方に関する動画がYouTubeでアップされていましたので，紹介させていただきたいと思います．とてもわかりやすいです．作成いただいた方，ありがとうございます．

ピクトグラミングでは，プロブラム記述領域に独自の言語仕様でテキストで入力していきます．

主要命令をボタン入力で補完するボタン群が画面下部に配置されているので，命令の記述がわからなくてもボタンに記述されている命令例をみたり，マウスオーバーすると人型ピクトグラムが吹き出しでその意味を教えてくれるので，使っていると小一時間もすると慣れてきます．

使っている様子を見るとたまにあるのが，命令の途中に保管した命令が挿入されてしまい，シンタックスエラーになる例です．次にその典型例を示します．|はカーソルです．

命令ボタンを押下して最初に入力した後に，

R LUA 90 1|

回転角度を変更しようとして，

R LUA 120| 1

と変更して，さらに続けて別のボタンを押すとカーソル位置に次のように命令が追加されて実行されてしまうため，シンタックスエラーが発生します．

R LUA 120RW LUA 90 1
|
1

そこで，命令ボタン押下時に追加される命令は必ず行頭から追加されるように修正しました．行頭以外にカーソルがある場合，次の行の先頭に，行頭にカーソルがある場合，その行の命令の前に命令が挿入されます．

よって先ほど例示した

R LUA 120| 1

の状態でRW LUA 90 1ボタンを押下すると，

R LUA 120 1
RW LUA 90 1
|


となります．

また例えば，
|R LUA 120 1

の状態でRW LUA 90 1ボタンを押下すると，

RW LUA 90 1
R LUA 120 1
|


となります．

挿入されたところに挿入するという動作にしてシンタックスエラーが存在することを表示するでも，それは一つのあり方で，これまではそういう方針だったのですが，シンタックスエラーをできるだけ発生しないような仕組みにしていこうと思います．
将来的には，ブロックプログラミング型の言語や，JavaScript，Pythonなどのプログラミング言語での入力もサポートする予定ですが，ピクトグラミングのシンプルな命令セットゆえの長所を生かした環境を作っていきたいと思っています．