ピクトグラミングを更新しました．PC・タブレット版，スマートフォン版両方です．

追加した機能は

1. 反転表示

2. 線画オブジェクトのグループ化と移動

です．

いずれもすでに先行してブロックピクトグラミングには反映していましたが，ピクトグラミングにも反映させました．

1. 反転表示

ピクトグラムというとサイン用途で使われるものが有名ですが，コミュニケーション用途で用いるピクトグラムのデザイン指針を定めたJIST0103（コミュニケーション支援用絵記号デザイン原則）およびISO19027(Design principles for communication support board using pictorial symbols)では，サイン用途の配色と反転した，黒背景に白のピクトグラムが推奨されています．そのため「RV」(Reverse)の命令を追加しました．

 

命令の様式	処理
RV	反転モード(Reverse mode)に変更する。

 

英語表記	英語	日本語	にほんご
RV	Reverse	反転	はんてん

 

 

 

 

2. 線画オブジェクトの移動

ピクトグラミングシリーズでは，人型ピクトグラム以外のオブジェクトは基本図形（線分または円）の集合で描きます．従来からフレーム単位の描画（Processingで採用されているような描いて全て消すの繰返し）をすればオブジェクトを移動させる（ように見える）ことはできました．しかしより簡便で理解しやすい方法を実装しました．

一つ以上の基本図形から構成されるオブジェクトを定義できる命令，定義されたオブジェクトを等速直線移動する命令を追加しました．．

 

 

命令の様式	処理
DO arg1	対応するEND命令までに含まれるL命令，O命令の組み合わせで描かれる線画をarg1という名称で定義する．
MO arg1 arg2 arg3 arg4	arg4 秒かけてx軸正方向に arg2 ピクセル, y軸正方向にarg3 ピクセルだけarg1という名称で定義された線画を等速直線移動する．
MOW arg1 arg2 arg3 arg4	arg4 秒かけてx軸正方向に arg2 ピクセル, y軸正方向にarg3 ピクセルだけarg1という名称で定義された線画を等速直線移動する．直線移動が終了するまで次の命令は実行されない．

 

英語表記	英語	日本語	にほんご
DO	DefineObject defineobject	物定義	ものていぎ
MO	MoveObject moveobject	物移動	ものいどう
MOW	MoveObjectWait moveobjectwait	物移動待ち	ものいどうまち

 

ブロックピクトグラミングと，同じ実行結果になるピクトグラミング（日本語版）のプログラムを下に例を示します．「物体を定義するためDO(物定義)命令を使って「りんご」というラベルを設定して定義しています．内部には，円と線分を描く二つの命令があります．これが構成要素となります．平行移動する命令(MO 物移動，MOW　物移動待ち)があり，これにより「りんご」が等速で落下します．オブジェクトの作成を通じて，複数の命令をまとめラベリングする手続き化の処理に慣れ親しんでもらいます

 

反転
回転待ち 右肩 69
回転待ち 右肘 41
物移動 りんご 0 320 0.5

物定義 りんご
円 211 -50 42 42 0
線 211 -55 211 -85
終わり

 

 

 

 

アプリケーション下側の命令入力支援領域のボタンも更新しました．

 

 

作品集のページの「やり投げ」もこの機能を使ったバージョンに更新しました．引き続きピクトグラミングシリーズをよろしくお願いします．

関数や手続きの中で自分自身を呼び出す処理を再帰呼出しといいます．

プログラミングを学習する際，この再帰の概念でつまづく人も少なくありません．

 

懸垂を10回するプログラムを例に再帰について考えてみたいと思います．

図 (1)

 

図 (2)

 

これを再帰を使わずにブロックピクトグラミング（ピクトグラミングブロック版）で作成した例です．回数を引数指定して懸垂をする関数（実際は手続き）「懸垂」，図(1)の状態にする手続き「初期状態」と，図(1)→図(2)→図(1)の状態変化をアニメーションで表現する手続き「1回曲げ伸ばし」が定義されておりこちらは折りたたんで表示してあります．人型ピクトグラムとは異なる視点である第三者視点だと，繰返しを使った表現が思いつくでしょう．

 

次に再帰を使って，記述してみます．こちらは関数（実際には手続き）「懸垂」の中で「懸垂」を呼び出しています．皆さん1回懸垂をしては，あと何回だ！がんばろう！と繰り返し念じた経験はないでしょうか？もちろん懸垂以外の，腕立て伏せ，トラック一周，漢字の書き取り…..など繰り返す処理であれば同じことが言えます．これは，実際に懸垂をする人型ピクトグラムになりきって考えた視点と考えられるでしょう．

再帰の考え方を教えるのにご苦労されている先生方多いと思います．ハノイの塔だったり，再帰図形だったりと色々工夫されたりしますが，一度こういうのからスタートするのはいかがでしょうか？いかなる人も反復的な身体動作に関する身体知は有していると思います．

 

ピクトグラミングのビジュアルブロック版である，ブロックピクトグラミングのPC日本語版とPC英語版を更新しました．

主に追加した機能は

1. 反転表示

2. 線画オブジェクトのグループ化と移動

3. 文字列入出力

です．

1. 反転表示

ピクトグラムというとサイン用途で使われるものが有名ですが，コミュニケーション用途で用いるピクトグラムのデザイン指針を定めたJIST0103（コミュニケーション支援用絵記号デザイン原則）およびISO19027(Design principles for communication support board using pictorial symbols)では，サイン用途の配色と反転した，黒背景に白字のピクトグラムが推奨されています．そのため，「マークを設定するブロック」に「反転」も指定できるようにしました．「マークを設定するブロック」は「図形」カテゴリの一番上にあります．

 

 

 

2. 線画オブジェクトの移動

ピクトグラミングシリーズでは，人型ピクトグラム以外のオブジェクトは基本図形（線分または円）の集合で描きます．従来からフレーム単位の描画（Processingで採用されているような描いて全て消すの繰返し）をすればオブジェクトを移動させる（ように見える）ことはできました．しかしより簡便で理解しやすい方法を実装しました．

一つ以上の基本図形から構成されるオブジェクトを定義できるブロック，定義されたオブジェクトを表示するブロック，定義されたオブジェクトを等速直線移動するブロックの三つを「図形」カテゴリに追加しました．下に例を示します．「物体を定義するための囲みブロックを使い「りんご」というラベルを設定して定義しています．囲みブロックの内部には，円と線分を描く二つのブロックがあります．これが構成要素となります．さらに「実行ボタンが押されたとき」の囲みブロックの中に，りんごを平行移動する命令があり，これにより「りんご」が等速で落下します．単に定義したオブジェクトを，定義した際の位置に表示するだけであれば，「物体〇〇を描く」ブロックを使います．オブジェクトの作成を通じて，複数の命令をまとめラベリングする手続き化の処理に慣れ親しんでもらいます．

 

等速直線運動以外の動きをしたければ，変数を設定して微小時間ごとに変化量を変えれば，実現できます．これは人型ピクトグラムを移動，回転する場合も同様です．次のプログラムは「りんご」が自由落下します．

 

3. 文字列入出力

ピクトグラミングでは，これまでも吹き出しの形で文字列を一定時間表示したり，ピクトグラムの構成要素として文字列を設定する機能はありました．しかしこれからはいずれも付加的な機能としての位置付けです．

一方，汎用プログラミング言語を用いた初学者向け学習では，文字列入出力をベースとするプログラムが題材になります．今回，カテゴリ「入出力」を追加し，ダイアログボックスを表示し値を特定の変数に格納するブロックと，画面上に小型化した人型ピクトグラムをカーソルに見立てて文字列を整列して逐次表示するブロックの二つを用意しました．この機能はすでにピクトグラミングPython言語版であるPicthonおよびJavaScript言語版であるJavaScpictには実装されていましたが，今回ブロック版にも実装しました．下の例は，高等学校情報科「情報Ⅰ」教員研修用教材でも紹介されている利子を計算するプログラムの例です．同一クラス内で学習者の習熟度に応じてテキスト型とブロック型の言語を併用する運用も想定できます．ピクトグラミングシリーズは基本静止画またはアニメーションピクトグラムを作成するのが目的の仕様になっているため，入力を要求するブロックはプログラムの最初に配置するようにしてください．途中に配置しても最初にダイアログボックスが表示されますので注意ください．

ブロックピクトグラミングPCひらがな版および各種スマートフォン版は順次新バージョンに変更していきます．

また，しばらくの間，各ページのフッタに旧版のブロックプログラミングのアプリケーションページへのリンクは残しておきます．旧版の利用が必要な場合，そちらのリンクを辿って利用ください．

次回の全体のアップデートは2021年年末を予定しています．特に高等学校「情報I」のデータ活用，中学技術科「情報分野」での授業での利用を想定した機能を中心にいくつか追加する予定です．

 

 

ピクトグラミングのトップページをリニューアルしました．

アクセスしたデバイスにより自動的に表示するトップページを変更するようになっています．

アクセスしたデバイス用の4通りのアプリケーション（Pictogramming, Block Pictogramming, Picthon, JavaScpict）と使い方へのリンクのみで構成されるシンプルかつ軽量なページです．それ以外の例えば，学習用テキスト，作品例等の関コンテンツへのリンクは全てフッター部分に集約しました．

今後は定常的に，トップページ以外のサイト構造やページをより使いやすいサイトをすべく随時更新していきます．今後ともピクトグラミングシリーズをよろしくお願いいたします．

 

(1) PC，タブレットでアクセスした場合のトップページです．

 

(2) スマートフォンでアクセスした場合のトップページです．

 

ピクトグラミングの派生アプリケーションの一つであるPicthonで，共通テスト「情報」で採用予定のDNCL2をサポートしていきます．

まずは，共通テスト「情報」サンプル問題Q2で提示されているプログラム程度は動作するように実装しました．

 

人型ピクトグラムが頑張って地面に文字列を描いていきます．

画面下のプルダウンで「DNCL2」を選択すると，DNCL2の基本命令がボタン入力できます．今のところ共通テスト「情報」サンプル問題で使われている最低限度の命令のサポートのみですが，正式なDNCL2の仕様は今後公開されると思います．

DNCLは読むために最適化された記述言語なので，それで読み書きすることの一長一短もあるのですが，検討の余地があると考えて，研究，調査も含め開発していきます．

 

 

情報処理学会　情報教育シンポジウム　SSS2020において，題目”ピクッと-ピクトグラム作成を通じた状態遷移モデルの学習環境 -”が優秀論文賞を受賞しました．

概要：筆者は，ピクトグラムコンテンツ作成環境「ピクトグラミング」を提案している．ピクトグラミングは，プログラミング学習環境の側面も有し，様々な文脈で利用されている．人型のピクトグラムを変形する命令，線画によるオブジェクト記述のための命令，セーフティーマーク記述のための命令を併用することで，短時間でピクトグラムのデザイン指針に準じたアニメーション効果を含む多様な作品を作成できる．同時にプログラミングの諸概念が学習できるのが特徴である．また，Python言語，JavaScript言語，ビジュアルブロック言語により記述できる派生環境もインターネット公開している．ピクトグラミングおよび派生環境は，手続き型 のプログラミングパラダイムをベースとしている．ピクトグラミングの資産を活用しつつ，ピクトグラムの状態とその状態遷移を状態遷移図で表現するピクトグラムコンテンツ作成環境「Picuit（ピクっと）」を新たに開発した．本論文では，その実装方式を中心に論ずる．

 

 

論文PDFはこちらから入手できます．

「ピクッと」は，論文では状態遷移を状態遷移図で表現する方式となっていますが，これとは異なる仕様で，Pictogrammingシリーズと同様にWeb公開する予定です（2021-01-31現在）．