高等学校で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の学習単元を網羅的に学習できる環境の実現です．これについてはまた別の機会に書いてみようと思います．

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（日本語版，英語版いずれも）, 自然言語ピクトグラミング全てが対応されています．

 

 

 

 

 

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

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

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

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

 

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

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

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

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

 

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