「教育関係者の方へ」のページを更新しました.
[ピクトグラミング] ピクトグラミングカード ver.3 を公開しました.
ピクトグラミングの作例をカード形式にしたコンテンツ「ピクトグラミングカード」ver.3 を公開しました.
より初歩的な内容をカードにしました.命令の数も最小限にしました.授業やワークショップなど,時間制約の強い場面での利用も想定しています.また今回から,人の部位で線画を描くヒューマンモーショングラフィックス,及び座標を指定して描画する座標グラフィックスのカードを含めています.英語命令版,日本語命令版,日本語ひらがな命令版,いずれも用意しました
こちらのページからダウンロードできます.どうぞご活用ください.
[ピクトグラミング] 情報処理学会学会誌2019年8月号の「2018年度論文賞の受賞論文紹介」のコーナーでピクトグラミングの論文紹介記事が掲載されました.
情報処理学会学会誌2019年8月号(2019年7月15日発行)の「2018年度論文賞の受賞論文紹介」のコーナーでピクトグラミングの論文紹介記事が掲載されました.
ピクトグラミング開発の動機・経緯,開発中の苦労話,今後の展望等がご覧頂けます.記事内で,日中だけでなく,誰もいない真っ暗な深夜の時間帯でも常に私を励ましくれた研究室前の廊下に掲示されている非常口の人型ピクトグラムへの感謝の意を表していますが,いうまでもなく,みなさまへの感謝の意を人型ピクトグラムへ投影した表現であることを申し添えいたします.
[ピクトグラミング] 実行ボタン押下時のみ実行するモードの追加と,不具合の修正.
ピクトグラミングでは,
1.プログラムコードを記述する領域で改行
2.ピクトグラムの体の部位のドラッグ,背景部分のドラッグによる命令の追加
3.命令入力支援ボタンの押下による命令の追加
4.実行ボタンを押下
の4つのケースで実行されます.
これは,1命令追加されるたびにその一連の動きと命令の対応を学習してほしいという目的があります.
一方で,比較的長い時間のアニメーションを作成する場合,新しく追加した命令が実行されるまで一定の時間を要します.ユーザによっては,プログラムを考えているときに,ピクトグラムが動くので気が散ってしまうという声もありました.
静止画のピクトグラムを作成する場合のポイントとして,お絵かきツールとは違うので,余分なオブジェクトを取り除いて,伝えるべき情報をできるだけシンプルな形状で表現するというのがあります.さらに,アニメーションピクトグラムを作成する際のポイントとして短い時間で伝えるべき情報を正確に伝えるというのがあります.何十秒も凝視しないと意味が理解できないのであれば,ピクトグラムの本来の目的を果たしているとは到底言えません.
しかし,ピクトグラミングでは,線画の描画機能などの機能も有しており,用途によっては,時間を要するアニメーションを作ることもあります.
そこで,上記の4つのケースのうち「4.実行ボタンを押下」のときにだけ実行するモードを追加しました.
画面右上に並んでいる一番右の再生マークの右のチェックボックスをオンにすると「4.実行ボタンを押下」のときだけ実行されるようになります.
また,ピクトグラミングにはもともと早送り再生モードというのがあったのですが,これがここ数週間機能していませんでした.それを修正しました.下のボタンを押して実行すると高速にアニメーションが再生されます.
あと1点,特定の条件下でコードが消えてしまうという不具合がfirefox以外のブラウザで発生しましたので,原因を特定し,これを修正しました.
保護中: 関係者用コンテンツ(認証付)
[ピクトグラミング]IE(インターネットエクスプローラ) 利用において命令入力支援ボタンにより入力した場合の不具合への対応
2019年ゴールデンウイーク前の色々なピクトグラミングの機能追加が原因で,IE(インターネットエクスプローラ) を使ってピクトグラミングを使用する場合に限り,命令入力支援ボタンにより入力した際にすでにプログラム入力領域に入力されている命令の一部が消えてしまうという不具合が発生するようになったと報告を受けました.これを修正いたしましたので,報告いたします.IEは独自仕様が多く,近年プログラミング教育用アプリケーションはIEをサポートしないものが少なくありません.またIEはマイクロソフト社でも既に利用を推奨しないなどの報告がされていますが,実情としては,小学校,中学校,高校では未だにIEしか使えない学校が多いです.おかげさまで,小学校,中学校,高校,大学で使っていただいているのは以前ご報告した通りです.ピクトグラミングは学校で使っていただくことを念頭に入れており今後もIE対応は続けていきます.よろしくお願いします.
[ピクトグラミング] 線分描画におけるマウスドラッグ中の軌跡表示の追加.(と何を実装しないかに関する記述)
先日のエントリ「マウス操作だけでさまざまな線画が描けるようになりました!」で,マウス操作で直接線画が描けるようにした報告をしましたが,今回,マウスドラッグ中の軌跡を表示するように変更しました.
マウス操作に関する機能をもっと色々追加したい気持ちはあるのですが,ピクトグラム作成ツールの側面だけではなく,プログラミング学習ツールとしての側面を残したいのでわざと入れていない機能がたくさんあります.
マウス操作だけでも,それなりのピクトグラムはできるのだけど,アニメーションピクトグラムやデザイン的に精錬されたピクトグラムを作ろうとすると命令の仕様を理解し,キーボード入力で命令コードや値などを記述・変更していかなければならないようになっています.その按配がピクトグラミングを実装する上でのポイントです.
ピクトグラミングのWebサイトの公開に関して,2018年度情報処理学会優秀教材賞を受賞することになりました.
ピクトグラミングに関する論文で,2018年度情報処理学会論文賞を受賞することになりました.
[ピクトグラミング] マウス操作だけでさまざまな線画が描けるようになりました!
これまで,ピクトグラミングの線画はピクトグラム自身,あるいはピクトグラムの体の部品をテキスト形式の命令入力により動かし軌跡を描く方式でした.しかし,少し慣れが必要でした.そこで,マウス操作だけで線画が描けるようにしました.
まず,ピクトグラミングにL
(Line)命令を追加しました.
命令の様式 | 処理 |
---|---|
L arg1 arg2 arg3 arg4 |
座標(arg1,arg2)から座標(arg3,arg4)まで直線を描く |
以下に例を示します.
PENW 10 PEN ROUND L 100 0 300 200
ペンの太さや形状は引き継がれますので,この例では座標(100,0)から(300,200)まで線幅10で両端が丸型の線分が描かれることになります.PEN HOLD,RELEASE に関係なく無条件に描かれます.命令名は英語では「L」ですが,日本語では「線」,日本語ひらがなでは「せん」となります.
線 100 0 300 200
せん 100 0 300 200
また.人型ピクトグラムディスプレイパネル上で,始点を人型ピクトグラムの体の部分以外の点にして,終点までドラックすると,
L <始点のx座標> <始点のy座標> <終点のx座標> <終点のy座標>
の命令(”L”の部分は言語設定により変わる)が,プログラムコード入力領域のカーソルの位置に自動的に挿入されます.つまりマウス操作だけで,様々な線画が描けるようになりました.