文字列描画命令を追加しました．追加された命令の様式は以下の通りです．
| 命令の様式 | 処理 |
|---|---|
| T arg1 arg2 arg3 [arg4] | 座標（arg2,arg3），文字の大きさ arg4で文字列 arg1 を描く．arg4 が 省略された時は，arg4に80が入力されているものとして取り扱う． |
標準のピクトグラミングにおける各言語での命令表記は以下になります．
| 英語表記 | 英語 | 日本語 | にほんご |
|---|---|---|---|
| T | Text | 文字（又は）テキスト | もじ （又は）てきすと |
サンプルです．
MW -180 0 ST MW 180 0 MW 180 0 1 T 2m -50 -40 PEN ROUND L -90 20 90 20 L -90 20 -70 0 L -90 20 -70 40 L 90 20 70 0 L 90 20 70 40 W 1
主に中学校および高校での50分×6回分の授業利用を想定したテキストを，ピクトグラミング，ピクソン，ジャバスクピクトのいずれも最新の仕様に合わせて更新しました．
こちらのページからアクセスください．
ピクトグラミングでは，いくつかのセーフティサインを表示するためのモードや図形描画の際見やすくするためのモード（スケルトンモード）があります．このモードの変更ルールを以下のように変更します．これまで標準以外のモードから標準のモードにするためには，現在のモードと同じ命令を再度実行する仕様になっていましたが，新たに標準のモードに変更するための命令N(Normal)を追加しました．
旧
| 命令の様式 | 処理 |
|---|---|
| S | 安全モード(Safety mode)以外で実行すると安全モードに変更する。 安全モードで再度命令すると通常モードに変更する。安全モード中に描画 した線画の色は人型ピクトグラムと同じ緑色となる。 |
| SG | 安全緑モード(Safety Green mode)以外で実行すると安全緑モードに変更する。 安全緑モードで再度命令すると通常モードに変更する。安全緑モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
| SR | 安全赤モード(Safety Red mode)以外で実行すると安全赤モードに変更する。 安全赤モードで再度命令すると通常モードに変更する。安全赤モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
| P | 禁止モード (Prohibit mode) 以外で実行すると禁止モードに変更する。 禁止モードで再度命令すると通常モードに変更する。 |
| I | 指示モード(Instruction mode)以外で実行すると指示モードに変更 する。指示モードで再度命令すると通常モードに変更する。指示モード中 に描画した線画の色は人型ピクトグラムと同じ白色となる。 |
| A | 注意モード(Attention mode)以外で実行すると注意モードに変更する。注意モードで再度命令すると通常モードに変更する。 |
| SK | スケルトンモード(Skelton mode)以外で実行するとスケルトンモードに変更する。スケルトンモードで再度命令すると通常モードに変更する。 |
新
| 命令の様式 | 処理 |
|---|---|
| S | 安全モード(Safety mode)に変更する。 安全モード中に描画 した線画の色は人型ピクトグラムと同じ緑色となる。 |
| SG | 安全緑モード(Safety Green mode)以外で実行すると安全緑モードに変更する。 安全緑モードで再度命令すると通常モードに変更する。安全緑モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
| SR | 安全赤モード(Safety Red mode)以外で実行すると安全赤モードに変更する。 安全赤モードで再度命令すると通常モードに変更する。安全赤モード中に描画 した線画の色は人型ピクトグラムと同じ白色となる。 |
| P | 禁止モード (Prohibit mode) 禁止モードに変更する。 |
| I | 指示モード(Instruction mode)に変更 する。指示モード中 に描画した線画の色は人型ピクトグラムと同じ白色となる。 |
| A | 注意モード(Attention mode)に変更する。 |
| SK | スケルトンモード(Skelton mode)スケルトンモードに変更する。 |
| N | 通常モード(Normal mode)に変更する。 |
各言語の表記
| 英語表記 | 英語 | 日本語 | にほんご |
|---|---|---|---|
| N | Normal | 標準 | ひょうじゅん |
高等学校で2022年度より学年進行で適用される新学習指導要領では，情報の科学的理解を主軸とする「情報I」が必履修科目となります．さらに，情報Iの発展科目である「情報II」が選択科目となります．科目の学習項目を次の表に示します．
| 内容 | |
| 情報
Ｉ |
(1)情報社会の問題解決 |
| (2)コミュニケーションと情報デザイン | |
| (3)コンピュータとプログラミング | |
| (4)情報通信ネットワークとデータの活用 | |
| 情報
II |
(1) 情報社会の進展と情報技術 |
| (2)コミュニケーションと情報コンテンツ | |
| (3)情報とデータサイエンス | |
| (4)情報システムとプログラミング | |
| 課題研究 |
情報Iについては，2019年5月（諸処の問題点が見つかり一旦非公開になり2019年9月に再公開）には文部科学省から教員研修用資料も公開されています．資料の構成を表に示します．
| 章 | 単元 | 学習内容 |
| 1 | 1 | 情報やメディアの特性と問題の発見・解決 |
| 1 | 2 | 情報セキュリティ |
| 1 | 3 | 情報に関する法規，情報モラル |
| 1 | 4 | 情報社会におけるコミュニケーションのメリット・デメリット |
| 1 | 5 | 情報技術の発展 |
| 2 | 6 | デジタルにするということ |
| 2 | 7 | コニュニケーションを成立させるもの |
| 2 | 8 | メディアとコミュニケーション，そのツール |
| 2 | 9 | 情報をデザインすることの意味 |
| 2 | 10 | デザインするための一連の進め方 |
| 3 | 11 | コンピュータの仕組み |
| 3 | 12 | 外部装置との接続 |
| 3 | 13 | 基本的プログラム |
| 3 | 14 | 応用的プログラム |
| 3 | 15 | アルゴリズムの比較 |
| 3 | 16 | 確定モデルと確率モデル |
| 3 | 17 | 自然現象のモデル化とシミュレーション |
| 4 | 18 | 情報通信ネットワークの仕組み |
| 4 | 19 | 情報通信ネットワークの構築 |
| 4 | 20 | 情報システムが提供するサービス |
| 4 | 21 | さまざまな形式のデータとその表現形式 |
| 4 | 22 | 量的データの分析 |
| 4 | 23 | 質的データの分析 |
| 4 | 24 | データの形式と可視化 |
高等学校教科「情報」は，平成15年度の必履修化以降，専任教員の絶対的不足，免許外教科担任（情報科の教員免許を所有しない），臨時免許の乱発的発行など，教科を担当する教員自体の量および質の問題が一向に解決されていません(参照：情報入試研究会のページ)．また，現在(2020年3月)，現学習指導要領では，情報科は「社会と情報」，「情報の科学」の２科目からの選択必履修となっており，実際は約8割の学校で，「社会と情報」が行われています．ある意味大きな転換を余儀なくされる，大多数の情報科教員に対して，情報の科学的理解を目的とする情報Iの内容を教授できるための養成がなされているかといえば，甚だ疑問です．
新学習指導要領を見据えた実践報告は，様々な形で見られるようになってきました．しかし，所定の授業時間数の中で新学習指導要領を充足する授業を完遂するためには，すべての単元を効果的かつ横断的に俯瞰できるシラバス設計や授業設計が不可欠になります．
ピクトグラムコンテンツ作成環境「ピクトグラミング」おいては，常にこの解決すべき問題を念頭におきながら開発しています．この環境をデザイン，プログラミング，コンテンツ，データ処理等の複眼的視点から定期的に使用する，ピクトグラムを統一コンセプトとした高等学校情報科の学習環境の実現を目指しています．
高等学校情報科新学習指導要領の記述に，単語「ピクトグラム」は2か所出現しています．1点目は「情報I(2) コミュニケーションと情報デザイン イ（イ） コミュニケーションの目的を明確にして，適切かつ効果的な情報デザインを考えること」の部分で，情報を抽象化する方法としてピクトグラムが取りあげられています．2点目は，「情報II (1)情報社会の進展と情報技術 イ（イ）コミュニケーションが多様化する社会におけるコンテンツ創造と活用の意義について考察すること」の部分で，受け手にとってわかりやすく送り手の意図が受け手に伝わる例としてピクトグラムが記載されています．
このようにピクトグラムは，情報デザイン領域内の位置付けに限定されています．一方で，新学習指導要領中には，『共通教科情報科では，「情報に関する科学的な見方・考え方」を「事象を，情報とその結び付きとして捉え，情報技術の適切かつ効果的な活用（プログラミング，モデル化とシミュレーションを行ったり情報デザインを適用したりすること等）により，新たな情報に再構成すること」であると整理されている．』とあリます．ピクトグラムが情報デザイン領域に限定されず，プログラミング，モデル化とシミュレーション等の単元と有機的に関連すれば，情報技術の適切かつ効果的に活用により新たな情報に再構成する手段となり得ると考えられます．
それぞれの単元の学習に関して，ピクトグラミングの適用可能性について“直接”，“間接”，“教材”の3種類の指標があると考えています．
“直接”とは，学習単元の内容そのものを学習できる適用方式です．以下のような例が挙げられます．
例1：「９：情報をデザインすることの意味」の単元で，ピクトグラム作成課題を通じて考える．
例2：「１３：基本的プログラム」の単元で，順次，繰返し，条件分岐などのプログラミングの基礎概念を学ぶ．
例3： Picthon（ピクトグラミングPython版）やJavaScpictを用いて，「１４：応用的プログラム」で例示されているソートのプログラムや，「２２：質的データの分析」で，与えられたデータを分析する．
“間接“とは，学習単元に関するテーマでピクトグラムコンテンツを生成することで間接的に単元の学習を促進させる適用方式です．以下のような例が挙げられます．
例1：「２：情報セキュリティ」の単元で，啓蒙を目的としたピクトグラム作成課題を通じて情報セキュリティについて考える．例えば，次の例は，ショルダーハッキングを表現したピクトグラムです．
例2：「２４：データの形式と可視化の単元」で，与えられたデータに対応するインフォグラフィックを作成する．例えば，次の例は，URLで参照できるデータファイルを元に，各項目の数量を人型ピクトグラムの表示数により表現しています．
“教材”とは，学習教材の挿絵を作成することで，間接的にに単元の学習を促進させる適用方式です．こちらは作られるピクトグラムがイラスト的意味合いである点が間接と異なります．以下のような例が挙げられます．
例1：「４：情報社会におけるコミュニケーションのメリット・デメリット」の単元で，情報の拡散をイメージしたイラスト画像を作成する．例えば，次の例は，情報の拡散をイメージしたイラストを作成した例です．このようなイラスト作成の視点であれば，任意の単元に適用可能できます．
実は，ピクトグラミングの目的の一つは，一斉教授方式からの転換です．教員と学習者の関係を人型ピクトグラムを介した間接的なインタラクションに限定し，同調的学習に根ざしたピクトグラムの創作・表現活動を基本として，限られた時間数で情報Iの学習単元を網羅的に学習できる環境の実現です．これについてはまた別の機会に書いてみようと思います．
日常生活において，人は条件によって異なった意思決定をします．
例えば，「もし，明日晴れならばピクニックに行こう」「もし，財布の中に5000円以上あるなら買おう」などです．つまり条件によって実行する命令を変えたいときです．その場合は，IF命令を使います．
IF命令の様式と処理は以下の通りです．END命令とセットで用います．実際には，exp1は実数値以外にも，条件式と呼ばれる式でもいいのですが，今回は条件式は省きます．
| 命令の様式 | 処理 |
|---|---|
| IF exp1 | その実数値の確率で対応するELSEIFまたはELSEまたは ENDまでの命令を実行する． |
| END | 条件文，または繰返し，または定義の終了． |
例として，以下のコードを実行すると左手を挙げた後、1/2 の確率で手を振ります。
RW LUA -140 1 // 左手を挙げる IF 0.5 // 50%の確率で // 左手を振る RW LLA -60 0.3 RW LLA 60 0.3 END
IF命令は，複数の条件を列挙したり，条件を満たさないときの処理を同時に記述できます．新たに
ELSEIF命令,ELSE命令を紹介します．
| 命令の様式 | 処理 |
|---|---|
| IF exp1 | もし 条件式exp1が真ならば対応するENDまでの命令を実行する． |
| ELSEIF exp2 |
もし対応する先述のIFまたはELSEIFの条件が全て満たされなくて，かつexp2の実数値の確率で対応するELSEIFまたはELSEまたはENDの直前までの命令を実行する． |
| ELSE |
もし対応する先述のIFまたはELSEIFの条件が全て満たされない場合，対応するENDまでの命令を実行する． |
| END | 条件文，または繰返し，または定義の終了． |
例として，人型ピクトグラムが16 拍子の踊りをするプログラムを示します。各拍それぞれで，50%の確率で「左脚を上げ下げ」15%=(1-0.5)×0.3の確率で「右腕を上げ下げ」，35%=(1-0.5)×(1-0.3)の確率で「左腕を上げ下げ」します．
REPEAT 16
IF 0.5
RW LUL 90 0.2 // 左脚を上げ下げする
RW LUL -90 0.2
ELSEIF 0.3
RW RUA 90 0.2 // 右腕を上げ下げする
RW RUA -90 0.2
ELSE // その他の場合は
RW LUA 90 0.2 // 左腕を上げ下げする
RW LUA -90 0.2
END
END
5回目の挑戦状です。挑戦状は、あなたがやりたいと思うところからやってください。チャレンジ1から順に取り組む必要はありません。また、全てのチャレンジに取り組む必要もありません。あなたがやりたいチャレンジに取り組んでください。
次の (a) から (c) の条件を満たすプログラムを作成してみよう。
(a) 5 分の 4 の確率で 1 秒かけて左腕を 120 度時計回りに回転する。
(b) 10 分の 3 の確率で 1 秒かけて右腕を 120 度反時計回りに回転する。
(c) (a) の動作と (b) の動作は同時に行われる。 左腕を上げる行為と、右腕を上げる行為はそれぞれ別々に判断される。
30 拍からなるダンスをします。1 拍は 0.6 秒とします。最初は 1 拍目、最後は 30 拍目です。各拍それぞれで，次に示す(1)から(4)のいずれの動作するか決定します．各動作の選択される確率は，(1)は0.4の確率，(2)は0.3の確率,(3)は0.2の確率，(4)は0.1の確率です．．
(1) 最初の 0.3 秒で左腕を -120 度、 右腕を 120 度それぞれ同時に回転し、その後 0.3 秒で左腕を 120 度、右腕を -120 度それぞれ同時に 回転します。
(2) 最初の 0.3 秒で左腕を -120 度回転し、 その後 0.3 秒で左腕を 120 度回転します。
(3) 最初の 0.3 秒で右腕を 120 度回転し、 その後 0.3 秒で右腕を 120 度回転します。
(4) 最初の 0.3 秒で左足を -10 度回転し、 その後 0.3 秒で左足を 10 度回転します。
条件分岐（IF）と繰り返しを使ったオリジナル作品を作ってみよう。
次はレッスン6 です．
本テキストの著作権は青山学院大学 社会情報学部 伊藤一成に帰属します。
© 青山学院大学 社会情報学部 伊藤一成研究室 All rights reserved.
Pictogramming updated mouse operations and corresponding processing on the pictogram display area. Following table shows the list of mouse operation. The corresponding commands can be added to the program display area automatically by various mouse operations on the pictogram display area.
| Mouse position of starting | Mouse operation | Processing on pictogram display area |
|---|---|---|
| In the human pictogram display area
（Expect for the drawing point of human pictogram） |
Left click and drag | Rotate correspond part of human pictogram |
| Right click and drag | Translate | |
| Outside the human pictogram display area | Left click and drag | Draw line |
| Right click and drag | Draw Oval | |
| Any | Hold down | Change direction( front and side) of human pictogram |
| A drawing point of human pictogram | Click | Hold and release the pen at a drawing point |
Following is a demonstration video.
ピクトグラミングでは，次に示す３通りの描画方式をサポートしており，(a)「人型ピクトグラムの体の部位の移動の履歴で描画」する方式，「(b)人型ピクトグラム自身の移動の履歴で描画」する方式（タートルグラフィックスに相当）では円を描くことができましたが，一般的なプログラミング言語で採用されている「(c)座標を指定して描画」では円を描く機能はあえて実装していませんでした．今回これを実装いたしました．標準のピクトグラミング，Picthon，JavaScpict, Block Pictogramming（日本語版，英語版いずれも）が対応されています．以下標準のピクトグラミングを例に説明しますが，他についても同様です．
追加された命令の様式は以下の通りです．
| 命令の様式 | 処理 |
|---|---|
| O arg1 arg2 arg3 arg4 [arg5] | 中心座標（arg1,arg2），幅 arg3， 高さ arg4，中心座標を中心に反時計回りに arg5 度回転した楕円を描く．arg5 が 省略された時は，arg5に0が入力されているものとして取り扱う． |
標準のピクトグラミングにおける各言語での命令表記は以下になります．
| 英語表記 | 英語 | 日本語 | にほんご |
|---|---|---|---|
| O | Oval | 円 | えん |
さらに円の描画も，ピクトグラム表示領域に対するマウスドラッグ操作でできるようにしました．下の表にあるように，人型ピクトグラムが表示されている以外の場所を，右クリックでドラッグすると，ドラッグ開始時の座標を中心点とする楕円を描くことができます．またマウスで操作した場合においても，対応する「円描画命令」が自動的にプログラムに挿入されます．
| ドラッグ開始時のマウスの座標 | ドラッグ開始時におけるマウス操作 | 操作 |
|---|---|---|
| 人型ピクトグラムの表示領域内 | 左クリック | 人型ピクトグラムの対応する部位を回転 |
| 右クリック | 人型ピクトグラムの平行移動 | |
| 人型ピクトグラムの表示領域外 | 左クリック | 線分の描画 |
| 右クリック | 楕円の描画 | |
| − | 長押し | 人型ピクトグラムの向いている方向の変更（正面と側面） |
このマウス操作による「円の描画」は，人型ピクトグラムへの様々なマウス操作（回転，平行移動等）が有効になっている場合に限りますので，マウス操作を有効にしたいときは，下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください．
以下のようなピクトグラムもマウス操作だけで作成できるようになりました．
注: 2020/03/16現在 このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます)．原因を調査し改善します．
注: 2020/03/16 「このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます)．原因を調査し改善します．」について解決しました．
これまでピクトグラミングシリーズは，プログラムを記述する領域に，HTML5標準のテキストエリアを使用してきましたが，今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました．これにより行番号の表示，シンタックスハイライトなど，プログラムを記述する上でより利便性が高まります．JavaScpictに続けて，ピクトグラミングのPython版である，Picthonに対して適用しました．今後，ピクトグラミングシリーズの他のアプリケーション（ブロックピクトグラミングを除く）にも順次適用予定です．
これまでピクトグラミングシリーズは，プログラムを記述する領域に，HTML5標準のテキストエリアを使用してきましたが，今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました．これにより行番号の表示，シンタックスハイライトなど，プログラムを記述する上でより利便性が高まります．手始めにピクトグラミングのJavaScript版である，JavaScpictに対して適用しました．今後，ピクトグラミングシリーズの他のアプリケーション（ブロックピクトグラミングを除く）にも順次適用予定です．
ピクトグラミングでは，体，左右のひじ，手，ひざ，あしの９箇所にペンを独立に持つことができます．ペンを持つとその部分の移動の履歴が描画されます．
各部位に対するペンの持つ・放すをマウスクリック操作で変更できるようにしました．表示されている人型ピクトグラムの対応する位置にマウスカーソルを持っていくとピンクの十字が現れますので，そこでマウスをクリックするとペンの持つ・放すが切り替わります．ペンを持っている場合は，対応する位置に赤い十字が表示されます．またマウスで操作した場合においても，対応する「ペンを持つ・放す命令」が自動的にプログラムに挿入されます．
このクリック操作による「ペンの持つ/放す」は，人型ピクトグラムへの様々なマウス操作（回転，平行移動等）が有効になっている場合に限りますので，マウス操作を有効にしたいときは，下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください．
人型ピクトグラム表示領域に対する機能追加なので，標準のピクトグラミング，Picthon，JavaScpict, Block Pictogramming（日本語版，英語版いずれも）, 自然言語ピクトグラミング全てが対応されています．
