[ピクトグラミング] 安全に関するピクトグラムデザイン機能の拡張

安全に関するピクトグラムを作成する場合,これまでは,安全モード(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命令)が作成できます.

 

 

 

 

[ピクトグラミング] 条件分岐命令の仕様を一部変えてみました.

posted in: 開発者ブログ | 0

ピクトグラミングでは,条件分岐命令をサポートしていますが,一般的な構造化プログラミング言語と同様の形式で,変数,(必要に応じて)関数,条件式の理解が必要であるため,比較的初学者には敷居が高いです.

例えば,ピクトグラミングの日本語命令で,50%の確率で手を振るようなプログラムを記述すると以下のようになります.

回転待ち 左肩 ー120 1
もし 「乱数(1,6) >= 4」  
回転待ち 左肘 ー90 0.3
回転待ち 左肘 90 0.3
終わり

IF(もし), ELSEIF(他でもし)の引数に条件式を記述した場合はこれまで通りですが,実数値を直接記述したときは,その確率で実行する様に仕様を変更しました.

命令の様式 処理
IF exp1
もし exp1
もし exp1実数値なら,その実数値の確率で対応するELSEIFまたはELSEまたは ENDまでの命令を実行する.exp1が条件式なら,条件が真であれば対応するELSEIFまたはELSEまたは ENDまでの命令を実行する.
ELSEIF exp2
他でもし exp2
もし対応する先述のIFまたはELSEIFの条件が全て満たされなくて,かつexp2実数値なら,その実数値の確率で対応するELSEIFまたはELSEまたはENDの直前までの命令を実行する.exp2が条件式なら,条件が<真ならば対応するELSEIFまたはELSEまたはENDの直前までの命令を実行する.
ELSE
もし対応する先述のIFまたはELSEIFの条件が全て満たされない場合,対応するENDまでの命令を実行する.

 

例えば,上のプログラムは以下のように書き換えることができます.

回転待ち 左肩 ー120 1
もし 0.5
回転待ち 左肘 ー90 0.3
回転待ち 左肘 90 0.3
終わり

 

例えば下のプログラムは,左肘,右肘,右膝のいずれかをそれぞれ,40%, 42% ( (1-0.4)*0.7)) ,18%( (1-0.4)*(1-0.7)) の確率で動かします.

回転 左肩 ー120 1
回転待ち 右肩 ー120 1 
もし 0.4
回転待ち 左肘 ー90 0.3
回転待ち 左肘 90 0.3
他でもし 0.7 
回転待ち 右肘 ー90 0.3 
回転待ち 右肘 90 0.3 
他 
回転待ち 右膝 ー90 0.3 
回転待ち 右膝 90 0.3 
終わり

 

[ピクトグラミング] ピクトグラミングカード ver.3 を公開しました.

ピクトグラミングの作例をカード形式にしたコンテンツ「ピクトグラミングカード」ver.3 を公開しました.

 

より初歩的な内容をカードにしました.命令の数も最小限にしました.授業やワークショップなど,時間制約の強い場面での利用も想定しています.また今回から,人の部位で線画を描くヒューマンモーショングラフィックス,及び座標を指定して描画する座標グラフィックスのカードを含めています.英語命令版,日本語命令版,日本語ひらがな命令版,いずれも用意しました

こちらのページからダウンロードできます.どうぞご活用ください.

[ピクトグラミング] 情報処理学会学会誌2019年8月号の「2018年度論文賞の受賞論文紹介」のコーナーでピクトグラミングの論文紹介記事が掲載されました.

posted in: 開発者ブログ | 0

情報処理学会学会誌2019年8月号(2019年7月15日発行)の「2018年度論文賞の受賞論文紹介」のコーナーでピクトグラミングの論文紹介記事が掲載されました.

ピクトグラミング開発の動機・経緯,開発中の苦労話,今後の展望等がご覧頂けます.記事内で,日中だけでなく,誰もいない真っ暗な深夜の時間帯でも常に私を励ましくれた研究室前の廊下に掲示されている非常口の人型ピクトグラムへの感謝の意を表していますが,いうまでもなく,みなさまへの感謝の意を人型ピクトグラムへ投影した表現であることを申し添えいたします.

 

 

[ピクトグラミング] 実行ボタン押下時のみ実行するモードの追加と,不具合の修正.

posted in: 開発者ブログ | 0

ピクトグラミングでは,

1.プログラムコードを記述する領域で改行

2.ピクトグラムの体の部位のドラッグ,背景部分のドラッグによる命令の追加

3.命令入力支援ボタンの押下による命令の追加

4.実行ボタンを押下

の4つのケースで実行されます.

これは,1命令追加されるたびにその一連の動きと命令の対応を学習してほしいという目的があります.

 

一方で,比較的長い時間のアニメーションを作成する場合,新しく追加した命令が実行されるまで一定の時間を要します.ユーザによっては,プログラムを考えているときに,ピクトグラムが動くので気が散ってしまうという声もありました.

静止画のピクトグラムを作成する場合のポイントとして,お絵かきツールとは違うので,余分なオブジェクトを取り除いて,伝えるべき情報をできるだけシンプルな形状で表現するというのがあります.さらに,アニメーションピクトグラムを作成する際のポイントとして短い時間で伝えるべき情報を正確に伝えるというのがあります.何十秒も凝視しないと意味が理解できないのであれば,ピクトグラムの本来の目的を果たしているとは到底言えません.

しかし,ピクトグラミングでは,線画の描画機能などの機能も有しており,用途によっては,時間を要するアニメーションを作ることもあります.

そこで,上記の4つのケースのうち「4.実行ボタンを押下」のときにだけ実行するモードを追加しました.

画面右上に並んでいる一番右の再生マークの右のチェックボックスをオンにすると「4.実行ボタンを押下」のときだけ実行されるようになります.

 

 

また,ピクトグラミングにはもともと早送り再生モードというのがあったのですが,これがここ数週間機能していませんでした.それを修正しました.下のボタンを押して実行すると高速にアニメーションが再生されます.

あと1点,特定の条件下でコードが消えてしまうという不具合がfirefox以外のブラウザで発生しましたので,原因を特定し,これを修正しました.

 

[ピクトグラミング]IE(インターネットエクスプローラ) 利用において命令入力支援ボタンにより入力した場合の不具合への対応

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

2019年ゴールデンウイーク前の色々なピクトグラミングの機能追加が原因で,IE(インターネットエクスプローラ) を使ってピクトグラミングを使用する場合に限り,命令入力支援ボタンにより入力した際にすでにプログラム入力領域に入力されている命令の一部が消えてしまうという不具合が発生するようになったと報告を受けました.これを修正いたしましたので,報告いたします.IEは独自仕様が多く,近年プログラミング教育用アプリケーションはIEをサポートしないものが少なくありません.またIEはマイクロソフト社でも既に利用を推奨しないなどの報告がされていますが,実情としては,小学校,中学校,高校では未だにIEしか使えない学校が多いです.おかげさまで,小学校,中学校,高校,大学で使っていただいているのは以前ご報告した通りです.ピクトグラミングは学校で使っていただくことを念頭に入れており今後もIE対応は続けていきます.よろしくお願いします.

[ピクトグラミング] 線分描画におけるマウスドラッグ中の軌跡表示の追加.(と何を実装しないかに関する記述)

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

先日のエントリ「マウス操作だけでさまざまな線画が描けるようになりました!」で,マウス操作で直接線画が描けるようにした報告をしましたが,今回,マウスドラッグ中の軌跡を表示するように変更しました.

マウス操作に関する機能をもっと色々追加したい気持ちはあるのですが,ピクトグラム作成ツールの側面だけではなく,プログラミング学習ツールとしての側面を残したいのでわざと入れていない機能がたくさんあります.

マウス操作だけでも,それなりのピクトグラムはできるのだけど,アニメーションピクトグラムやデザイン的に精錬されたピクトグラムを作ろうとすると命令の仕様を理解し,キーボード入力で命令コードや値などを記述・変更していかなければならないようになっています.その按配がピクトグラミングを実装する上でのポイントです.

 

 

ピクトグラミングのWebサイトの公開に関して,2018年度情報処理学会優秀教材賞を受賞することになりました. 

情報処理教育に関して優れた教材の開発を行った情報処理学会正会員を表彰する,情報処理学会優秀教材賞(2018年度)を受賞することが決まりました.

年間の研究会,シンポジウムの中から特に優秀な論文に与えられる2018年度情報処理学会山下記念研究賞,機関誌に発表された論文のうち,特に優秀な著者に授与される2018年度情報処理学会論文賞に続けての受賞です.優秀教材賞は,2019年度情報処理学会定時総会(2019 年 6 月5日開催)において授与される予定です.小学校から高等学校までのプログラミング教育の必修化が社会的に注目されている中において,今後の利活用が期待されています.