情報処理学会 情報教育シンポジウム SSS2019において，題目”Picthon（ピクソン）-Pictogrammingを用いたPython言語の学習環境の提案–”で発表し，優秀発表賞を受賞しました.
Pictogrammingはコマンドに独自の記法を採用していますが，Python言語を使ってPictogrammingを利用できるように拡張しました．
Pythonは動的型付け，マルチパラダイムなどの特徴を有するインタプリタ型のプログラミング言語で，機械学習，データサイエンス，行列演算など，科学技術関連を中心に幅広い分野に関するライブラリが用意されており，近年，最も利用されているプログラミング言語の一つです．
Picthonは，Pictogrammingと同様にWeb公開する予定でいます．
論文はこちらからダウンロードできます．
ピクトグラミングでは，体の色々な部位にペンを持たせて動きの履歴を描画する機能があります．しかしこれまで，手及び足の部分で描画する際には，その部位に相当する名称がなかったので，「前腕」あるいは，「下腿」を記述して指定していました．「前腕」や「下腿」など人型ピクトグラムの構成部品全体の名称と，「肩」「肘」など，構成部品の節点の名称での指定は，R,RW命令で自然でしたが，PEN命令ではやや不自然でした．
そこで，手足の部位指定を追加しました．
| 英語表記 | 英語 | 日本語 | にほんご |
|---|---|---|---|
| LH | LeftHand lefthand |
左手 | ひだりて |
| RH | RightHand righthand |
右手 | みぎて |
| LF | LeftFoot leftfoot |
左足 | ひだりあし |
| RF | RightFoot rightfoot |
右足 | みぎあし |
例えば，左腕を回転して円を描くプログラムは以下のようになります．
透明 ペン 持つ 左手 回転 左肩 ３６０ １
もちろん「左手」ではなく，これまで通り「左上腕」でも描くことができます．
ピクトグラミングでは，視点の異なる３通りの図形描画方式をサポートしています．図に例を示します．それぞれ，(a)ヒューマングラフィックス，(b)タートルグラフィックス，(c)座標グラフィックスと呼称しています．
前回は，(b)タートルグラフィックスの機能を拡張しましたが，今回，(c)座標グラフィックスの機能を拡張しました．
変更点は，
1. 線分の描画に時間の概念を取り入れた．
2. 回転，移動と同じく，「待ち」命令を取り入れた．
です．拡張した，座標グラフィックス関係の命令様式と処理内容は以下の表のとおりです．
これによりL命令は，第5引数に時間を指定できるようになりました．また，後ろにWをつけたLW命令を新たに追加しました．Wが付くか付かないかの挙動は，R,RW命令やM,MW命令と同様の対応関係になっています．
| 命令の様式 | 処理 |
|---|---|
| L arg1 arg2 arg3 arg4 [arg5] | 座標（arg1,arg2）から座標(arg3,arg4)までarg5秒かけて線分を描く．arg5が 省略された時は，arg5 に0が入力されているものとして取り扱う． |
| LW arg1 arg2 arg3 arg4 [arg5] | 座標（arg1,arg2）から座標(arg3,arg4)までarg5秒かけて線分を描く．移動が終了するまで次の命令は実行されない．arg5 が 省略された時は，arg5に0が入力されているものとして取り扱う． |
また各言語の表記は以下の通りです．
| 英語表記 | 英語 | 日本語 | にほんご |
|---|---|---|---|
| L | Line line |
線 | せん |
| LW | LineWait linewait |
線待ち | せんまち |
例えば，以下のような線画のアニメーションを，人型ピクトグラムを動作させることなく描画できます．
SC 0.5 PENW 30 PEN ROUND L 0 -200 -200 0 1 LW 0 -200 200 0 1 L -200 0 -200 150 1 LW 200 0 200 150 1 L -200 150 200 150
ピクトグラミングでは，視点の異なる３通りの図形描画方式をサポートしています．図に例を示します．それぞれ，(a)ヒューマングラフィックス，(b)タートルグラフィックス，(c)座標グラフィックスと呼称しています．
今回，(b)のタートルグラフィックスの機能を拡張しました．
変更点は，
1. 移動や進行方向の変化に時間の概念を取り入れた．
2. 回転，移動と同じく，「待ち」命令を取り入れた．
です．拡張した，タートルグラフィックス関係の命令様式と処理内容は以下の表のとおりです．
これによりFD,BK,RT,LT命令は，第２引数に時間を指定できるようになりました．また，後ろにWをつけたFDW，BKW，RTW，LTW命令を新たに追加しました．Wが付くか付かないかの挙動は，R,RW命令やM,MW命令と同様の対応関係になっています．
| 命令の様式 | 処理 |
|---|---|
| FD arg1 [arg2] | 人型ピクトグラムを進行方向にarg2 秒かけて距離 arg1 だけ等速で進める．arg2 が 省略された時は，arg2 に0が入力されているものとして取り扱う． |
| BK arg1 [arg2] | 人型ピクトグラムを進行方向と逆向きにarg2 秒かけて距離 arg1 だけ等速で進める．arg2 が 省略された時は，arg2 に0が入力されているものとして取り扱う． |
| RT arg1 [arg2] | 人型ピクトグラムの進行方向をarg2 秒かけて時計回り方向に角度 arg1 だけ等角速度で回転する．arg2 が 省略された時は，arg2 に0が入力されているものとして取り扱う． |
| LT arg1 [arg2] | 人型ピクトグラムの進行方向をarg2 秒かけて反時計回り方向に角度 arg1 だけ等角速度で回転する．arg2 が 省略された時は，arg2 に0が入力されているものとして取り扱う． |
| FDW arg1 [arg2] | 人型ピクトグラムを進行方向にarg2 秒かけて距離 arg1 だけ等速で進める．移動が終了するまで次の命令は実行されない．arg2 が 省略された時は，arg2 に0が入力されているものとして取り扱う． |
| BKW arg1 [arg2] | 人型ピクトグラムを進行方向と逆向きにarg2 秒かけて距離 arg1 だけ等速で進める．移動が終了するまで次の命令は実行されない．arg2 が 省略された時は，arg2 に0が入力されているものとして取り扱う． |
| RTW arg1 [arg2] | 人型ピクトグラムの進行方向をarg2 秒かけて時計回り方向に角度 arg1 だけ等角速度で回転する．回転が終了するまで次の命令は実行されない．arg2 が 省略された時は，arg2 に0が入力されているものとして取り扱う． |
| LTW arg1 [arg2] | 人型ピクトグラムの進行方向をarg2 秒かけて反時計回り方向に角度 arg1 だけ等角速度で回転する．回転が終了するまで次の命令は実行されない．arg2 が 省略された時は，arg2 に0が入力されているものとして取り扱う． |
また各言語の表記は以下の通りです．
| 英語表記 | 英語 | 日本語 | にほんご |
|---|---|---|---|
| FD | Forward fd |
前進 | ぜんしん |
| BK | Backward bk |
後進 | こうしん |
| RT | RightTurn rt |
右回り | みぎまわり |
| LT | LeftTurn lt |
左回り | ひだりまわり |
| FDW | ForwardWait fdw |
前進待ち | ぜんしんまち |
| BKW | BackwardWait bkw |
後進待ち | こうしんまち |
| RTW | RightTurnWait rtw |
右回り待ち | みぎまわりまち |
| LTW | LeftTurnWait ltw |
左回り待ち | ひだりまわりまち |
例えば最も一般的な，正方形を描画する命令は，以下です．これはこれまでもサポートしていました．
SK SC 0.2 PEN DOWN REPEAT 4 FD 100 RT 90 END
一方これに，FDとRTの第２引数に1を入力すると円になります．これは，「1秒間かけて，100等速で進みつつ，90度等加速度で回転する」を同時に４回繰り返すからです．
SK SC 0.2 PEN DOWN REPEAT 4 FD 100 1 RT 90 1 END
一方FDWとRTWにすると正方形になります．これは，「1秒間かけて，100等速で進み，そのあと1秒かけて90度等加速度で回転する．」を4回繰り返すからです．
SK SC 0.2 PEN DOWN REPEAT 4 FDW 100 1 RTW 90 1 END
(a) ヒューマングラフィックと同様，命令の組み合わせ方で様々な(b)タートルグラフィックスが描画できます．例えば，次のような命令を実行すると(図)に示すピクトグラムが作成できます．
SK SC 0.2 PEN DOWN FD 2000 4 REPEAT 2 RTW 360 1 LTW 360 1 RT 90 END
以前から要望の高かった複製機能を追加しました．これにより複数の人型ピクトグラムを含むピクトグラムがより簡単に作成できるようになります．また，ピクトグラムを主要構成素とする様々なインフォグラフィックスの作成が期待できます．
ST命令で命令が実行される時点での人型ピクトグラムを描画できます．様式と処理内容は以下のとおりです．
| 命令の様式 | 処理 |
|---|---|
| ST | 命令が実行される時点での人型ピクトグラムを描画する． |
各言語の表記は以下の通りです．
| 英語表記 | 英語 | 日本語 | にほんご |
|---|---|---|---|
| ST | Stamp | スタンプ | すたんぷ |
例えば，次のような命令を実行すると(図)に示すピクトグラムが作成できます．
SC 0.3 MW -250 0 RW LUA -20 RW RUA 20 REPEAT 8 ST MW 60 0 END
（図） World Peace
命令が実行される時点でのピクトグラムの状態がスタンプされますので，様々な姿勢の人型ピクトグラムを混在させることができます．プログラムを少し追記した場合の実行は以下の図になります．
SC 0.3 MW -250 -220 R LUA -360 3.2 R RUA 360 3.2 REPEAT 4 REPEAT 8 ST MW 62.5 0 0.1 END MW -500 150 0 END SC 0
安全に関するピクトグラムを作成する場合，これまでは，安全モード(S)が用意されていました．安全モードは，背景色は白色，人型ピクトグラム及び図形描画は緑色で表示されます．これは非常口サインを意識した配色でした．一方実際には，緑色背景に人型ピクトグラム及び図形描画が白色で表示される安全標識，と赤色背景に人型ピクトグラム及び図形描画が白色で表示される火気安全標識が主です．
そこで以下のように，安全に関する命令SG及びSRを追加しました．後方互換性のため，S命令の仕様は変更せず，新たにSG及びSR命令を定義しています．
| 命令の様式 | 処理 |
|---|---|
| S | 安全モード(Safety mode)以外で実行すると安全モードに変更する。 安全モードで再度命令すると通常モードに変更する。安全モード中に描画 した線画の色は人型ピクトグラムと同じ緑色となる。 |
| SG | 安全緑モード(Safety Green mode)以外で実行すると安全緑モードに変更する。 安全緑モードで再度命令すると通常モードに変更する。安全緑モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
| SR | 安全赤モード(Safety Red mode)以外で実行すると安全赤モードに変更する。 安全赤モードで再度命令すると通常モードに変更する。安全赤モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
| 英語表記 | 英語 | 日本語 | にほんご |
|---|---|---|---|
| S | Safety | 安全 | あんぜん |
| SG | SafetyGreen | 安全緑 | あんぜんみどり |
| SR | SafetyRed | 安全赤 | あんぜんあか |
SG及びSR命令を使うことで，以下のようなピクトグラム（左 SG命令，右 SR命令）が作成できます．
ピクトグラミングの作例をカード形式にしたコンテンツ「ピクトグラミングカード」ver.3 を公開しました．
より初歩的な内容をカードにしました．命令の数も最小限にしました．授業やワークショップなど，時間制約の強い場面での利用も想定しています．また今回から，人の部位で線画を描くヒューマンモーショングラフィックス，及び座標を指定して描画する座標グラフィックスのカードを含めています．英語命令版，日本語命令版，日本語ひらがな命令版，いずれも用意しました
こちらのページからダウンロードできます．どうぞご活用ください．
2019年ゴールデンウイーク前の色々なピクトグラミングの機能追加が原因で，IE（インターネットエクスプローラ） を使ってピクトグラミングを使用する場合に限り，命令入力支援ボタンにより入力した際にすでにプログラム入力領域に入力されている命令の一部が消えてしまうという不具合が発生するようになったと報告を受けました．これを修正いたしましたので，報告いたします．IEは独自仕様が多く，近年プログラミング教育用アプリケーションはIEをサポートしないものが少なくありません．またIEはマイクロソフト社でも既に利用を推奨しないなどの報告がされていますが，実情としては，小学校，中学校，高校では未だにIEしか使えない学校が多いです．おかげさまで，小学校，中学校，高校，大学で使っていただいているのは以前ご報告した通りです．ピクトグラミングは学校で使っていただくことを念頭に入れており今後もIE対応は続けていきます．よろしくお願いします．
先日のエントリ「マウス操作だけでさまざまな線画が描けるようになりました！」で，マウス操作で直接線画が描けるようにした報告をしましたが，今回，マウスドラッグ中の軌跡を表示するように変更しました．
マウス操作に関する機能をもっと色々追加したい気持ちはあるのですが，ピクトグラム作成ツールの側面だけではなく，プログラミング学習ツールとしての側面を残したいのでわざと入れていない機能がたくさんあります．
マウス操作だけでも，それなりのピクトグラムはできるのだけど，アニメーションピクトグラムやデザイン的に精錬されたピクトグラムを作ろうとすると命令の仕様を理解し，キーボード入力で命令コードや値などを記述・変更していかなければならないようになっています．その按配がピクトグラミングを実装する上でのポイントです．
