今回はこれまで学んだ内容を踏まえ自由に作品を作ってみましょう。 Lesson2 以降で使った人型ピクトグラムの体自身をその場で動かす命令である「ピクトアニメーション命令」と Lesson6 で使った人型ピクトグラムの動きの履歴で線画を描く「ピクトグラフィックス命令」がありました。この両者をうまく組み合わせると色々な作品を作ることができます．

次はレッスン8です．

社会や身の回りに役立つピクトグラム

これまで，自由な発想で様々な作品を作成してきたと思います．今回は，社会や身の回りに役立つピクトグラムというのを作成してみましょう．下のピクトグラムは，いずれも安全図記号で指定されている図例です．さらに禁止，注意，指示，安全の4項目に関するピクトグラムデザインのガイドラインも策定されています．通常，世の中に広く普及しているピクトグラムは作成ガイドラインに則ってデザインされています．ピクトグラムで大切な事は誰にでも正しく伝わるという事なのです．ピクトグラミングでは通常のモードに加え，禁止(Prohibit)，注意(Attention)，指示(Instruction)，安全(Safety, Safety Green, Safety Red) のピクトグラムを作るための6つのモードを備えています．

それぞれのモードには，単一の命令で変更することができます．

安全色を使った単純なピクトグラムを作ってみました。

SG

SC 0.8

R LUA -140 1

R RUA 140 1

たまにはこのピクト君のように、両腕を伸ばして体を伸ばし、体や心の安心に努めたいですね。2行目のSC 0.8はピクトグラムの大きさを標準の0.8倍にするという意味です。

動くピクトグラム

さて、世の中に溢れるピクトグラムはポスターなど紙媒体上で提示されているので基本は画像（静止画）です。一方最近では、デジタルサイネージ（電子掲示板）の発達により、街中でもアニメーションのピクトグラムを提示させることができるように技術的にはなっています。またスマートフォンなどは位置情報や無線によって、状況に応じて画面上に何らかの表示をすることができるようになっているので、静止画や動画のピクトグラムを表示させて、注意喚起や情報提供をすることができるでしょう。

ピクトグラミングは，静止画だけではなく動画（アニメーション）のピクトグラムを作成することができます。ぜひ、単なる静止画のピクトグラムではなく、オリジナルのアニメーションピクトグラムを作成してみましょう。

作品例

ピクトグラミングで作成したピクトグラムの例です．

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

ピクトグラミングでは３通りの方法で線画を描くことができます．まずは，体の部位を使って描く方法です．

１．体の部位を使って描く

PEN命令の様式と処理は以下の通りです．また描画する線の太さを変えるPENW命令もあります．

ペンを持つことができる体の位置は以下の9箇所です

サンプルを示します．

SK
PEN HOLD LH
REPEAT 4
RW LUA 90
END

で左手を使って四角形を描くことができます．

ちなみに1行目のSK命令は，人型ピクトグラムの体を透明にする命令です．描画の様子がわかりやすくなります．

例えば，

SK
PEN HOLD LH
R LUA 360 1

で左手を使って円を描くことができます．

その他様々な工夫で色々な図形が描画できます．

これまで，R arg1 arg2 0  と RW arg1 arg2 0　は同じ命令でした．M arg1 arg2 0 と MW arg1 arg2 0 も同じです．しかし，R arg1 arg2 と RW arg1 arg2 ，M arg1 arg2 と MW arg1 arg2 は，描画を伴う場合に以下のように異なる挙動となります．

時間0のR命令，M命令は，元の位置と，R命令，M命令からなる複数の命令の動きを全て実行したあとの位置を両端とする線分を描画します．

時間0のRW命令，MW命令は，元の位置とその命令を実行したあとの位置を両端とする線分を描画します．

この違いを例に示します．

SK
PENW 10
PEN HOLD LH
RW LUA 45
RW LUA 45

は下のようになります．左腕の初期位置から，左上腕を反時計回りに45度回転した位置まで線分を描きます．さらに左上腕を反時計回りに45度回転した位置まで別の線分を描きます．

SK
PENW 10
PEN HOLD LH
R LUA 45
R LUA 45

は下のようになります．左腕の初期位置から，左上腕を反時計回りに90(=45+45)度回転した位置まで線分を描きます．

よって

SK
PENW 10
PEN HOLD LH
REPEAT 8
RW LUA 45
END

は下のような正8角形を描きますが．

SK
PENW 10
PEN HOLD LH
REPEAT 8
R LUA 45
END

は何も描きません．なぜなら左腕の初期位置と，初期位置から左上腕を反時計回りに360(=45*8)度回転した位置は同じだからです．

同様に，

SK
PENW 3
PEN HOLD LH
M 100 0
M 0 100

は下のようになりますが，

SK
PENW 3
PEN DOWN LLA
MW 100 0
MW 0 100

は下のようになります．

2. 歩いて描く

次は歩いて描く方法です．人型ピクトグラムの体の部位を動かすのではなく、人型ピクトグラム自体を動かしましょう。みなさんもその場で体を動かすこともあれば、歩行して移動することもありますよね。歩行の履歴を使って色々な図形を描いてみましょう。

では早速、人型ピクトグラムを歩行させてみましょう。人型ピクトグラムが少し大きすぎるので、人型ピクトグラムの大きさを変えてみましょう。

SC 0.1
PEN HOLD

1行目の命令、これは人型ピクトグラムの大きさを 0.1 倍にするという意味です。

動かすのに使う命令は以下の4つです。

ちなみに最初の進行方向は上向きになっています。

SC 0.1
PEN HOLD
FD 100

SC 0.1
PEN HOLD
FD 100
RT 90
FD 100

というふうに描けます．

ではこの調子で続けて正方形を書いてみてください．

さらに右に曲がる角度と繰り返す回数を色々変えると様々な形を描くことができます。

３. 第３者視点で描く

最後は，あなたの視点で描く方法です．座標を直接指定して線が描きます．線分の両端の座標を指定して描くL,LW命令，楕円を描くO命令というのが用意されています，仕様は以下の通りです．

ピクトグラミングの座標系は次のようになっています．

例えば，次のようなエレベータピクトグラムは

以下のプログラムで記述できます．

PENW 10
L -200 -280 200 -280
L -200 280 200 280
L -200 -280 -200 280
L 200 -280 200 280
L 0 -320 0 -280
L 0 280 0 320

いずれの方法で描いた図形も，これまでに描いた図形を消す場合は、CS(Clear Screen)命令を使います。

ピクトグラミングは視点の異なる３通りの方法で様々な図形を描けるのが特徴です．描画したい図形の性質に応じて適切な方法を使ってみてください．

次はレッスン7です．

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

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

ピクトグラミングの座標

中心が(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でアップされていましたので，紹介させていただきたいと思います．とてもわかりやすいです．作成いただいた方，ありがとうございます．