[ピクソン] 学校(主に高校の普通教科「情報」)でお使いいただけるピクソン(Pictogrammingの設計指針に基づくPython言語を用いたプログラミング,情報デザインの学習環境)の授業利用を想定したテキストを公開しました.

ピクソン(Pictogrammingの設計指針に基づくPython言語を用いたプログラミング,情報デザインの学習環境)を2019年12月2日公開いたしました.アプリケーションは < こちら > から利用できます.

本日(2019年12月3日)学校(主に高校の普通教科「情報」)でお使いいただけるピクソンの授業用テキストを公開いたします.

50分×6回分の授業利用を想定したテキストです.

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

 

フェーズ1 : 逐次実行,並列実行,繰返し,条件分岐等のプログラミングの基本概念を学習します.

フェーズ2 : 人型ピクトグラムの部位の動きの履歴で線画を描画します.フェーズ1で学んだ人間の動作記述を活用します.自然な形式でフェーズ1からの移行を実現します.

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

 

図:ページの見本

 

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

授業用テキスト(ピクトグラミング,ピクソン)

[ピクソン] ピクトグラミング Python版 Picthon を公開しました.

ピクトグラミング 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の人間の動作をうまく利用し,自然な形式でフェーズ1からの移行を実現します.

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

 

図:ページの見本

 

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

授業用テキスト(ピクトグラミング,ピクソン)

[ピクトグラミング] (重要)ピクトグラム表示パネル上のマウス操作による処理及び,改行入力時の実行をデフォルトで有効から無効にしました.

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

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

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

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

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

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

 

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

使い方

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

 

[ピクトグラミング] IE(Internet Explorer)でも他のブラウザと同じ操作でプログラムのダウンロード,生成画像およびアニメーションのダウンロードができるようになりました.

posted in: 更新情報, 開発者ブログ | 0

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

 

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

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

(1)  作品名をテキストフィールドに入力します.

(2)プログラムコードダウンロードボタンを押すと,作品名.txtの名前でプログラムコードが保存されます.

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

(1)ショット画像ダウンロードボタンを押すと,作品名.pngの名前でショット画像が保存されます.

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

(1)アニメーションダウンロードボタンの右側にあるチェックボタンをオンにします.

(2)一度最初から最後まで実行します.ゆっくり実行されますが,内部的にはアニメーション画像が動的に生成されています.

(3)アニメーションダウンロードボタンを押すと,作品名.gifの名前でアニメーション画像が保存されます.

 

 

 

 

 

[ピクトグラミング] 情報処理学会 情報教育シンポジウム SSS2019において,題目”Picthon(ピクソン)-Pictogrammingを用いたPython言語の学習環境の提案–”で発表し,優秀発表賞を受賞しました.

情報処理学会 情報教育シンポジウム SSS2019において,題目”Picthon(ピクソン)-Pictogrammingを用いたPython言語の学習環境の提案–”で発表し,優秀発表賞を受賞しました.
Pictogrammingはコマンドに独自の記法を採用していますが,Python言語を使ってPictogrammingを利用できるように拡張しました.

Pythonは動的型付け,マルチパラダイムなどの特徴を有するインタプリタ型のプログラミング言語で,機械学習,データサイエンス,行列演算など,科学技術関連を中心に幅広い分野に関するライブラリが用意されており,近年,最も利用されているプログラミング言語の一つです.

Picthonは,Pictogrammingと同様にWeb公開する予定でいます.

論文はこちらからダウンロードできます.

表彰状をいただきました.タイトルのPictogrammingがPictgrammingと誤っているのはご愛嬌でしょうか.

[ピクトグラミング] 左手,右手,左足,右足の部位指定の追加

ピクトグラミングでは,体の色々な部位にペンを持たせて動きの履歴を描画する機能があります.しかしこれまで,手及び足の部分で描画する際には,その部位に相当する名称がなかったので,「前腕」あるいは,「下腿」を記述して指定していました.「前腕」や「下腿」など人型ピクトグラムの構成部品全体の名称と,「肩」「肘」など,構成部品の節点の名称での指定は,R,RW命令で自然でしたが,PEN命令ではやや不自然でした.

 

 

 

 

そこで,手足の部位指定を追加しました.

英語表記 英語 日本語 にほんご
LH LeftHand
lefthand
左手 ひだりて
RH RightHand
righthand
右手 みぎて
LF LeftFoot
leftfoot
左足 ひだりあし
RF RightFoot
rightfoot
右足 みぎあし

 

 

例えば,左腕を回転して円を描くプログラムは以下のようになります.

 

透明
ペン 持つ 左手
回転 左肩 360 1

もちろん「左手」ではなく,これまで通り「左上腕」でも描くことができます.

 

 

 

[ピクトグラミング]座標グラフィックス機能の拡張

ピクトグラミングでは,視点の異なる3通りの図形描画方式をサポートしています.図に例を示します.それぞれ,(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

 

 

[ピクトグラミング] タートルグラフィックス機能の拡張

ピクトグラミングでは,視点の異なる3通りの図形描画方式をサポートしています.図に例を示します.それぞれ,(a)ヒューマングラフィックス,(b)タートルグラフィックス,(c)座標グラフィックスと呼称しています.

 

今回,(b)のタートルグラフィックスの機能を拡張しました.

 

変更点は,

1. 移動や進行方向の変化に時間の概念を取り入れた.

2. 回転,移動と同じく,「待ち」命令を取り入れた.

です.拡張した,タートルグラフィックス関係の命令様式と処理内容は以下の表のとおりです.

これによりFD,BK,RT,LT命令は,第2引数に時間を指定できるようになりました.また,後ろに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の第2引数に1を入力すると円になります.これは,「1秒間かけて,100等速で進みつつ,90度等加速度で回転する」を同時に4回繰り返すからです.

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