ピクトグラミングでは，次に示す３通りの描画方式をサポートしており，(a)「人型ピクトグラムの体の部位の移動の履歴で描画」する方式，「(b)人型ピクトグラム自身の移動の履歴で描画」する方式（タートルグラフィックスに相当）では円を描くことができましたが，一般的なプログラミング言語で採用されている「(c)座標を指定して描画」では円を描く機能はあえて実装していませんでした．今回これを実装いたしました．標準のピクトグラミング，Picthon，JavaScpict, Block Pictogramming（日本語版，英語版いずれも）が対応されています．以下標準のピクトグラミングを例に説明しますが，他についても同様です．

追加された命令の様式は以下の通りです．

標準のピクトグラミングにおける各言語での命令表記は以下になります．

さらに円の描画も，ピクトグラム表示領域に対するマウスドラッグ操作でできるようにしました．下の表にあるように，人型ピクトグラムが表示されている以外の場所を，右クリックでドラッグすると，ドラッグ開始時の座標を中心点とする楕円を描くことができます．またマウスで操作した場合においても，対応する「円描画命令」が自動的にプログラムに挿入されます．

このマウス操作による「円の描画」は，人型ピクトグラムへの様々なマウス操作（回転，平行移動等）が有効になっている場合に限りますので，マウス操作を有効にしたいときは，下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください．

以下のようなピクトグラムもマウス操作だけで作成できるようになりました．

注: 2020/03/16現在　このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます)．原因を調査し改善します．

注: 2020/03/16　「このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます)．原因を調査し改善します．」について解決しました．

これまでピクトグラミングシリーズは，プログラムを記述する領域に，HTML5標準のテキストエリアを使用してきましたが，今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました．これにより行番号の表示，シンタックスハイライトなど，プログラムを記述する上でより利便性が高まります．JavaScpictに続けて，ピクトグラミングのPython版である，Picthonに対して適用しました．今後，ピクトグラミングシリーズの他のアプリケーション（ブロックピクトグラミングを除く）にも順次適用予定です．

これまでピクトグラミングシリーズは，プログラムを記述する領域に，HTML5標準のテキストエリアを使用してきましたが，今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました．これにより行番号の表示，シンタックスハイライトなど，プログラムを記述する上でより利便性が高まります．手始めにピクトグラミングのJavaScript版である，JavaScpictに対して適用しました．今後，ピクトグラミングシリーズの他のアプリケーション（ブロックピクトグラミングを除く）にも順次適用予定です．

ピクトグラミングでは，体，左右のひじ，手，ひざ，あしの９箇所にペンを独立に持つことができます．ペンを持つとその部分の移動の履歴が描画されます．

各部位に対するペンの持つ・放すをマウスクリック操作で変更できるようにしました．表示されている人型ピクトグラムの対応する位置にマウスカーソルを持っていくとピンクの十字が現れますので，そこでマウスをクリックするとペンの持つ・放すが切り替わります．ペンを持っている場合は，対応する位置に赤い十字が表示されます．またマウスで操作した場合においても，対応する「ペンを持つ・放す命令」が自動的にプログラムに挿入されます．

このクリック操作による「ペンの持つ/放す」は，人型ピクトグラムへの様々なマウス操作（回転，平行移動等）が有効になっている場合に限りますので，マウス操作を有効にしたいときは，下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください．

人型ピクトグラム表示領域に対する機能追加なので，標準のピクトグラミング，Picthon，JavaScpict, Block Pictogramming（日本語版，英語版いずれも）, 自然言語ピクトグラミング全てが対応されています．

実行中において体の各部位がペンを持っているか否かがわかるようにしました．左手で円を描く例ですが，円を描く間，左手の位置に赤の十字が表示されています．

もともとピクトグラミングはキーイベントをサポートしています．サンプルはこちらです．

今回，ブロックピクトグラミング（標準版，IE対応版のいずれも）にキーイベントのサポートを追加しました．

サンプル画面です．上下左右のキーでピクトグラムを動かし，スペースキーを押すと右腕でその場で円を書きます．このサンプルプログラムはこちらです．

注意点として，プログラム入力テキストエリア（画面右側）がフォーカスされている場合，キーイベントは発生しませんので，実行開始ボタンを押して実行させ，フォーカスを変更させるか，人型ピクトグラム表示フィールドをクリックしてフォーカスを変更してください．

また，ピクトグラミングでは，一つ以上実行中あるいは実行開始前の命令がある状態をプログラム実行中とみなします．イベントはプログラム実行中しか駆動しませんので，メインプログラムの最後に（1000秒待つ）とかいうブロックを追加して，実行開始からしばらくの間実行中の状態にする必要があります．

工夫次第で簡単なゲームの作成も可能だと思います．

Works example page has updated by integrating the Japanese and English versions．

日本語版と英語版の作品例ページを統合しました．

ピクトグラミングでは，様々な方法で線が描けますが，その線の太さの初期状態の値を1から15に変えました．

線の太さを変えるには，線の太さを変える命令を入力する必要があります．この命令の存在に気づかないと，初期状態（太さ１）のままピクトグラムを作成してしまい，以下のようなピクトグラムになってしまいます．ピクトグラミングでは，プログラミングの視点からすると，複雑な線画を単純な命令列でプログラムできるのが特徴となっており，その場合，太さを１にしておいたほうが望ましいので，これまでデフォルトを1としていました．一方ピクトグラムを作るという視点からすると，細い線は視認性が悪く，ピクトグラムデザインの点からもよくありません．そこで今回デフォルトの線の太さを15としました．

よって，これからは，以下のようなピクトグラムが，線の太さの設定を変えずに作ることができます（つまりはマウス操作だけでもできます．）．ピクトグラミングシリーズは共通のコンポーネントを使っているので，全てのシリーズ（標準のピクトグラミング,ピクソン，ジャバスクピクト, ブロックピクトグラミング）で変更されます．

ただし，小学校向けコンテンツ中の算数（第5学年）Ｂ 図形(1)正多角形に特化した二つのバージョンは，図形（正多角形）を描くことが目的となっているので，線の太さは1のまま（正確には最初に線の太さを１にする命令を裏で実行している）にしています．

このたび，ピクトグラミングサイトに，小学校向けコンテンツのカテゴリを追加しました．

第2弾として「音楽  A 表現」に特化したバージョンを公開しました．各種機能ボタンも極力排除し非常にシンプルな画面構成となっています．

3．音楽 A 表現

入力されたリズムに応じて人型ピクトグラムが手を叩きます．ブロックはわずか4種類です．こちらからアクセスできます．IE(インターネットエクスプローラ)でも動作します．

公開したコンテンツは，2019年度青山学院大学社会情報学部伊藤研究室の卒業研究の内容をカスタマイズしたものとなっています．

• 樫村 茉美 , 御家雄一, 伊藤一成：‹人型ピクトグラムに関するコンテンツ生成環境「ピクトグラミング」を用いたリズム理解，第11回データ工学と情報マネジメントに関するフォーラムDEIM2019, (2019.03)
• 樫村茉美 , 石井幹大, 伊藤一成：‹人型ピクトグラムに関するコンテンツ生成環境「ピクトグラミング」を用いたリズム理解手法の提案とその評価，第12回データ工学と情報マネジメントに関するフォーラム DEIM2020, (2020.03)

小学校の先生方からのご意見ご要望等いただけますと非常に嬉しいです．また今後別の様々な教科に至る単元につきましても小学校の先生方と協力して，ピクトグラミングならではのコンテンツを順次公開していきます．