ピクトグラミング Python版　Picthon を公開しました．Pythonのyを90度時計まわりに回転するとicに見えるので，Picthonと名付けました．

Pictogrammingトップページからリンクでたどることができます．

直接アクセスされたい方はこちらです．

 

2019年8月にSSS（情報処理学会　情報教育シンポジウム）で発表した内容です．

伊藤一成:Picthon（ピクソン）- Pictogrammingを用いたPython言語の学習環境の提案 – ， 情報処理学会　情報教育シンポジウム　SSS2019, (2019.08.18) （優秀発表賞受賞）

その際はサーバ側で処理する方式を発表しましたが，公開アプリケーションは，全てクライアント側で処理する方式としました．

 

Picthonの特徴として，Pictogrammingを拡張しており，Pictogrammingとほぼ同じ操作感でPython言語を使いピクトグラムコンテンツを作成できます．またPictogrammingと同様，プログラミングの諸概念を学ぶことができる設計になっています．

Picthonは，入力されたPythonのプログラムをPictogramming形式の命令に内部で変換し実行する方式を採用しています．

• Pictogrammingの操作命令に限定し，プログラム文字列を生成するPythonクラスを定義
• 人型ピクトグラムのポージングや図形描画に相当するメソッドはゴーストメソッドmethod_missing に相当する機能を使用
• Pythonの基本命令は全てPythonプログラムとして実行
• Pictogrammingの機能の追加によりPicthonの機能も追加される

 

Pythonでは，メソッドの引数はカンマ区切りで与えられ，引数列を丸括弧で囲う記法です．一方，Pictogrammingでは，命令や引数の間を空白文字で区切っています．

Pictogrammingの命令の引数には，体の部位や図形描画のペンタイプを表すラベル文字列がいくつか定義されています．メソッド名にアンダーバー(“_”)が含まれている場合も，空白文字に変換します．例えば，Pictogrammingで PEN DOWNという記述は，Pythonでは， pen(“down”) だけではなく，pen_down()のようにも記述できる．つまり，method1_method2(arg1, arg2, arg3)　はmethod1 method2 arg1 arg2 arg3　に変換されます．Pictogrammingで記述する操作命令は，この変換ルールで全て記述可能です．

一方for文，if文の定義文や制御文は，Pythonの文法に基づくものであり，このコードのままPythonで実行されます．よって，ループ展開，手続き呼び出しの展開，条件判定の展開が行われるため，実際に生成されるPictogrammingのコードは異なる場合があります．例えば，下の図の(a)のプログラムを入力して実行した場合，30%の確率でコード(b)が70%の確率でコード(c)が生成され，Pictogramming形式のコードとして実行されます．

 

 

高等学校では2022年度からの次期学習指導要領において，情報の科学的理解を基軸とする「情報I」が必履修科目となります．「情報I」では，その四本柱に，「<1>情報社会の問題解決」「<2>コミュニケーションと情報デザイン」「<3>コンピュータとプログラミング」「<4>情報通信ネットワークとデータの活用」を掲げています．Picthonが「<2>情報デザイン」「<3>コンピュータとプログラミング」との関連性が高いのはいうまでもありません．また，ピクトグラムは，社会の諸問題を映し出す，一種の社会の凝縮された写し絵であり「<1>情報社会の問題解決」を考える良い切り口となります．ピクトグラミングでは，インフォグラフィックスの機能も強化しており，「<4>情報通信ネットワークとデータの活用」でも活用も進めています．また，2019年5月に文部科学省から公開された情報I教員研修用資料でも，プログラミング単元の解説にPythonが取り入れられており，時流や政府戦略に沿ったテキスト型プログラミング言語重視の方針が伺えます．大学においても，AIやデータサイエンス分野だけでなく，プログラミング導入教育にいたる幅広い文脈でPythonを用いた授業実践が多く報告されるようになってきました．Picthonがこれからの情報教育の一助になればと思っています．

 

先日，ピクトグラミングの授業用テキストを公開しましたが，Picthon公開に伴い，Picthon版の授業用テキストも公開しましたので，以下のページからアクセスください．Picthonはデバッガの機能がまだないので，年度末までには実装します．来年度からのご利用ご検討ください．PictogrammingはIE でも動作しますが，Picthonは現状IEでは動作しません（これも可能なら対応しようと考えています）．ご了承ください．

 

 

 

 

 

 

 

 

学校（主に中学，高校）でお使いいただけるピクトグラミングの授業用テキストを全面的に更新しました．

主に中学および高校での50分×6回分の授業利用を想定したテキストです（2019年12月1日更新）．

三つのフェーズを限られた時間でスムーズに移行できるように設計されています．

 

フェーズ1 : ピクトグラミングで，並列実行，繰返し，条件分岐等のプログラミングの基本概念を学習します．

フェーズ2 : 人型ピクトグラムの部位の動きの履歴で線画を描画します．フェーズ1の人間の動作をうまく利用し，自然な形式でフェーズ１からの移行を実現します．

フェーズ3: フェーズ1,2で学習した内容をもとに，デザイン志向のピクトグラムを作成します．

 

図：ページの見本

 

詳しくは，こちらのページをアクセスください．

ピクトグラミングの機能に，

(1) 人型ピクトグラムはピクトグラム表示パネル上でピクトグラムの体の部位を直接ドラッグすることででも操作できる．

(2) 人型ピクトグラムディスプレイパネル上で，始点を人型ピクトグラムの体の部分以外の点にして，終点までドラックすると，線分が描ける．

あり，(1),(2)の操作に対応する命令の文字列が，自動的に「プログラムコード 記述領域」に入力されるというのがあります．

これは直感的な操作でコンテンツが作成でき非常に良いのですが，本アプリケーションはプログラミングの諸概念を学ぶ目的でも広く使われおり，その目的で利用する際には，マウス操作でプログラミングできてしまうことが学ぶ阻害要因となり得ていました．そこで，ピクトグラム表示パネル上のマウス操作禁止ををデフォルトで有効としました．これまで通り，マウス操作を可能にしたければ，マウス操作禁止のチェックボックスをオフにしてください．

ピクトグラミングは，初学者がプログラミングの諸概念を学ぶ目的で設計されています．そのため１行入力する度に実行する対話型の実行制御となっていました．ピクトグラミングは，誤ったコードを書いてしまって実行した際に，人型ピクトグラムが思わぬ動きをして笑ってしまうというのが特徴の一つになっています．１行入力する度に実行せずに，実行ボタンを押したときだけ実行させた方が，笑いを喚起できることが，実際の授業実践での評価分析からわかってきました．そこで，再生ボタンを押下時のみ実行するをデフォルトで有効としました．これまで通り，１行入力やプログラムコード入力支援ボタンの押下による命令入力のたびに実行を可能にしたければ，エンターキー非再生アイコンの右側のチェックボックスをオフにしてください．

 

また，最初に見ていただく「使い方」のページも大幅に更新しました．

今後ともピクトグラミングをよろしくお願いします．

 

IE(Internet Explorer)でも他のブラウザと同じ操作でプログラムのダウンロード，生成画像およびアニメーションのダウンロードができるようになりました．これまで，多くの先生方からIE(Internet Explorer)の場合も，同じ操作でできるようにならないかという要望をいただいておりました．大変お待たせいたしました．

 

ちなみにそれぞれの操作は以下の通りです．

[プログラムコードのダウンロード]

（１）  作品名をテキストフィールドに入力します．

（２）プログラムコードダウンロードボタンを押すと，作品名.txtの名前でプログラムコードが保存されます．

[ショット画像のダウンロード]

（１）ショット画像ダウンロードボタンを押すと，作品名.pngの名前でショット画像が保存されます．

[アニメーションのダウンロード]

（１）アニメーションダウンロードボタンの右側にあるチェックボタンをオンにします．

（２）一度最初から最後まで実行します．ゆっくり実行されますが，内部的にはアニメーション画像が動的に生成されています．

（３）アニメーションダウンロードボタンを押すと，作品名.gifの名前でアニメーション画像が保存されます．

 

 

 

 

 

情報処理学会　情報教育シンポジウム　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命令）が作成できます．