高等学校で2022年度より学年進行で適用される新学習指導要領では，情報の科学的理解を主軸とする「情報I」が必履修科目となります．さらに，情報Iの発展科目である「情報II」が選択科目となります．科目の学習項目を次の表に示します．

情報Iについては，2019年5月（諸処の問題点が見つかり一旦非公開になり2019年9月に再公開）には文部科学省から教員研修用資料も公開されています．資料の構成を表に示します．

高等学校教科「情報」は，平成15年度の必履修化以降，専任教員の絶対的不足，免許外教科担任（情報科の教員免許を所有しない），臨時免許の乱発的発行など，教科を担当する教員自体の量および質の問題が一向に解決されていません(参照：情報入試研究会のページ)．また，現在(2020年3月)，現学習指導要領では，情報科は「社会と情報」，「情報の科学」の２科目からの選択必履修となっており，実際は約8割の学校で，「社会と情報」が行われています．ある意味大きな転換を余儀なくされる，大多数の情報科教員に対して，情報の科学的理解を目的とする情報Iの内容を教授できるための養成がなされているかといえば，甚だ疑問です．

新学習指導要領を見据えた実践報告は，様々な形で見られるようになってきました．しかし，所定の授業時間数の中で新学習指導要領を充足する授業を完遂するためには，すべての単元を効果的かつ横断的に俯瞰できるシラバス設計や授業設計が不可欠になります．

ピクトグラムコンテンツ作成環境「ピクトグラミング」おいては，常にこの解決すべき問題を念頭におきながら開発しています．この環境をデザイン，プログラミング，コンテンツ，データ処理等の複眼的視点から定期的に使用する，ピクトグラムを統一コンセプトとした高等学校情報科の学習環境の実現を目指しています．

高等学校情報科新学習指導要領の記述に，単語「ピクトグラム」は2か所出現しています．1点目は「情報I(2) コミュニケーションと情報デザイン イ（イ）　コミュニケーションの目的を明確にして，適切かつ効果的な情報デザインを考えること」の部分で，情報を抽象化する方法としてピクトグラムが取りあげられています．2点目は，「情報II (1)情報社会の進展と情報技術　イ（イ）コミュニケーションが多様化する社会におけるコンテンツ創造と活用の意義について考察すること」の部分で，受け手にとってわかりやすく送り手の意図が受け手に伝わる例としてピクトグラムが記載されています．

このようにピクトグラムは，情報デザイン領域内の位置付けに限定されています．一方で，新学習指導要領中には，『共通教科情報科では，「情報に関する科学的な見方・考え方」を「事象を，情報とその結び付きとして捉え，情報技術の適切かつ効果的な活用（プログラミング，モデル化とシミュレーションを行ったり情報デザインを適用したりすること等）により，新たな情報に再構成すること」であると整理されている．』とあリます．ピクトグラムが情報デザイン領域に限定されず，プログラミング，モデル化とシミュレーション等の単元と有機的に関連すれば，情報技術の適切かつ効果的に活用により新たな情報に再構成する手段となり得ると考えられます．

それぞれの単元の学習に関して，ピクトグラミングの適用可能性について“直接”，“間接”，“教材”の3種類の指標があると考えています．

“直接”とは，学習単元の内容そのものを学習できる適用方式です．以下のような例が挙げられます．

例1：「９：情報をデザインすることの意味」の単元で，ピクトグラム作成課題を通じて考える．

例2：「１３：基本的プログラム」の単元で，順次，繰返し，条件分岐などのプログラミングの基礎概念を学ぶ．

例3：　Picthon（ピクトグラミングPython版）やJavaScpictを用いて，「１４：応用的プログラム」で例示されているソートのプログラムや，「２２：質的データの分析」で，与えられたデータを分析する．

“間接“とは，学習単元に関するテーマでピクトグラムコンテンツを生成することで間接的に単元の学習を促進させる適用方式です．以下のような例が挙げられます．

例1：「２：情報セキュリティ」の単元で，啓蒙を目的としたピクトグラム作成課題を通じて情報セキュリティについて考える．例えば，次の例は，ショルダーハッキングを表現したピクトグラムです．

例2：「２４：データの形式と可視化の単元」で，与えられたデータに対応するインフォグラフィックを作成する．例えば，次の例は，URLで参照できるデータファイルを元に，各項目の数量を人型ピクトグラムの表示数により表現しています．

“教材”とは，学習教材の挿絵を作成することで，間接的にに単元の学習を促進させる適用方式です．こちらは作られるピクトグラムがイラスト的意味合いである点が間接と異なります．以下のような例が挙げられます．

例1：「４：情報社会におけるコミュニケーションのメリット・デメリット」の単元で，情報の拡散をイメージしたイラスト画像を作成する．例えば，次の例は，情報の拡散をイメージしたイラストを作成した例です．このようなイラスト作成の視点であれば，任意の単元に適用可能できます．

実は，ピクトグラミングの目的の一つは，一斉教授方式からの転換です．教員と学習者の関係を人型ピクトグラムを介した間接的なインタラクションに限定し，同調的学習に根ざしたピクトグラムの創作・表現活動を基本として，限られた時間数で情報Iの学習単元を網羅的に学習できる環境の実現です．これについてはまた別の機会に書いてみようと思います．

ピクトグラミングでは，次に示す３通りの描画方式をサポートしており，(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（日本語版，英語版いずれも）, 自然言語ピクトグラミング全てが対応されています．

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

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

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

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

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

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

3．音楽 A 表現

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

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

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

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

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

第1弾として「算数（第5学年）Ｂ 図形(1)正多角形」に特化した2バージョンを（外角，中心角）公開しました．各種機能ボタンも極力排除し非常にシンプルな画面構成となっています．

１．算数（第5学年）Ｂ 図形(1)正多角形　その１

いわゆるタートルです．外角を基に多角形を描きます．ブロックはわずか4種類です．こちらからアクセスできます．IE(インターネットエクスプローラ)でも動作します．

２．算数（第5学年）Ｂ 図形(1)正多角形　その２

右腕を回すことで，多角形を描画します．人型ピクトグラムならではの描画方式です．中心角，内角を基に多角形を描きます．ブロックはわずか４種類です．こちらからアクセスできます．IE(インターネットエクスプローラ)でも動作します．

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