文部科学省 子供の学び応援サイト <活用できるリンク集> ◎教師向け詳細版(高等学校 情報)にピクトグラミングへのリンクが掲載されました.

文部科学省 子供の学び応援サイト <活用できるリンク集>  ◎教師向け詳細版(高等学校 情報)にピクトグラミングへのリンクを掲載いただきました(PDFファイル).名称はピクトプログラミングと誤って記載されていますが,URIは正しいものとなっています(これもご愛嬌ということで).

 

個人所有のスマートフォンを利用した自宅学習のニーズに対応するため,ピクソン(ピクトグラミングPython版)とジャバスクピクト(ピクトグラミングJavaScript版)のスマートフォン版を公開しました.自学習用テキストも更新しました.

新型コロナウィルスの影響により,教育機関で行われてきたPCを使用した授業形式での実習が困難になっています.自宅学習の制約下で,個人所有のPCを所持していない生徒・学生への対応などの理由により,個人所有のスマートフォンを利用した自学習のニーズが高まっています.

これに対応するため,これまでのピクトグラミング標準版に加え,新たにピクソン(ピクトグラミングPython版)とジャバスクピクト(ピクトグラミングJavaScript版)のスマートフォン版を公開しました.トップページからリンクを辿ってアクセスできます.

アプリケーション自体のURLは次の通りです.

ピクソン: https://pictogramming.org/editor/picthonsp.html

ジャバスクピクト:https://pictogramming.org/editor/javascpictsp.html

 

標準のピクトグラミング,ピクソン,ジャバスクピクトとも統一のインタフェースを用いることで,異なるプログラミング言語を横断的に扱うことができるように設計されています.主要命令の入力を支援する命令入力支援ボタンは,対象とするプログラミング言語(Python, JavaScript)の基本命令の入力をサポートします.さらに,言語選択のプルダウンで,日本語を選択すると日本文による各命令の説明がボタン上に表示されながらプログラムの入力が支援されます.

 

ピクソン, ジャバスクピクトともWebアプリケーションですのでOSによらず,一般的なブラウザ(Safari,Chrome等)上で動作します.また,ピクソン, ジャバスクピクトとも,作成したプログラムはサーバ側で処理されることなく全てスマートフォン上(クライアント上)で処理および実行されますので,ご安心ください.今後不具合の改善や機能拡張等を適宜進めていきます.

 

また,ピクソン,ジャバスクピクトにおいても,対面型授業での利用だけでなく,自学習を想定したテキストとして更新,公開しました.

 

Picthon (Python版)学習用テキスト(20200421版)

JavaScpict(JavaScript版)学習用テキスト(20200421版)

 

引き続きピクトグラミングシリーズをどうぞよろしくお願いします.

伊藤一成

[雑話] 選択ソートをPicthon(ピクトグラミングPython版)で作ってみました.

選択ソートをPicthonを使って書いてみました.現在では,スタンプメソッド(ST)や文字列表示メソッド(T)などもありますので,こういうこともできるようになっています.このような概念をアニメーションで学んだりインフォグラフィックスを作成したりするのは,ピクトグラムの拡大解釈なので,必ず同時にピクトグラムの本質を説明することに留意しつつ活用していきたいものです.

 

def selectionsort(a):
    for i in range(len(a)):
        min_index = i
        for j in range(i+1, len(a),1):
            if a[j]< a[min_index]:
                min_index = j
            draw(a,i,j)
        a[i], a[min_index] = a[min_index], a[i]
        draw(a,i,j)
        
def draw(a,i,j):
    pic.CS()
    pic.C()
    pic.MW(-300,0)
    for k in range(len(a)):
        pic.SC(a[k] / 100)
        pic.ST()
        pic.MW(70, 0)
    pic.SC(0)
    pic.T("⇩", -325 + i * 70, -150, 50)
    pic.T("⇩", -325 + j * 70, -150, 50)    
    pic.W(0.1)

a = [7,22,11,34,17,52,26,13,40]
draw(a, -1, -1)
selectionsort(a)

 

実行例

[ピクトグラミング] ピクトグラミング日本語命令版学習用テキストを新たに公開しました.またそれに合わせ,ピクトグラミング英語命令版学習用テキストも更新しました.

授業用テキスト(ピクトグラミング,ピクソン,ジャバスクピクト)のページで公開している授業用テキストに関して,ピクトグラミング日本語命令版テキスト(26ページ)を新たに公開しました.またそれに合わせ英語命令版テキスト(26ページ)も更新しました.これまでは,対面授業を想定して作成されていましたが,緊急事態宣言に伴う休校状態に対応するため,自宅等での自学習方式での使用を想定し利用手順や説明等を追記しました.名称もピクトグラミング授業用テキストからピクトグラミング学習用テキストに変更しました.

 

以下のリンクからダウンロードできます.

Pictogramming用学習用テキスト(英語命令 20200419版)

Pictogramming用学習用テキスト(日本語命令 20200419版)

短期間で作成しているため,まだ学習テキストとして不十分な点もあると思いますが,今後もテキストの拡充に努めてまいります.今後ともピクトグラミングシリーズをよろしくお願いします.

[ピクトグラミング スマホ版] 大学情報入試のエヴァンジェリストである中野由章先生が解説動画を作成してくれました.#ピクトグラミング

大学情報入試のエヴァンジェリストとして多方面でご活躍中である中野由章先生 ( @nakano_lab ) が,ピクトグラミング スマートフォン版の解説動画を作成してくれました.YouTubeからアクセスできます.

 

スマホでピクトグラミング!その1

スマホでピクトグラミング!その2

スマホでピクトグラミング!その3

 

中野由章先生に関する参考リンク

 

[ピクトグラミングシリーズ] 文字列描画命令の追加, #pictogramming #ピクトグラミング

文字列描画命令を追加しました.追加された命令の様式は以下の通りです.

命令の様式 処理
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月),現学習指導要領では,情報科は「社会と情報」,「情報の科学」の2科目からの選択必履修となっており,実際は約8割の学校で,「社会と情報」が行われています.ある意味大きな転換を余儀なくされる,大多数の情報科教員に対して,情報の科学的理解を目的とする情報Iの内容を教授できるための養成がなされているかといえば,甚だ疑問です.

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

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

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

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

 

 

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

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

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

例2:「13:基本的プログラム」の単元で,順次,繰返し,条件分岐などのプログラミングの基礎概念を学ぶ.

例3: Picthon(ピクトグラミングPython版)やJavaScpictを用いて,「14:応用的プログラム」で例示されているソートのプログラムや,「22:質的データの分析」で,与えられたデータを分析する.

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

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

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

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

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

 

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

[Pictogramming Series] Pictogramming updated mouse operations and corresponding processing on the pictogram display area.

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.