文部科学省 子供の学び応援サイト <活用できるリンク集> ◎教師向け詳細版(高等学校 情報)にピクトグラミングへのリンクを掲載いただきました(PDFファイル).名称はピクトプログラミングと誤って記載されていますが,URIは正しいものとなっています(これもご愛嬌ということで).
文部科学省 子供の学び応援サイト <活用できるリンク集> ◎教師向け詳細版(高等学校 情報)にピクトグラミングへのリンクを掲載いただきました(PDFファイル).名称はピクトプログラミングと誤って記載されていますが,URIは正しいものとなっています(これもご愛嬌ということで).
新型コロナウィルスの影響により,教育機関で行われてきたPCを使用した授業形式での実習が困難になっています.自宅学習の制約下で,個人所有のPCを所持していない生徒・学生への対応などの理由により,個人所有のスマートフォンを利用した自学習のニーズが高まっています.
これに対応するため,これまでのピクトグラミング標準版に加え,新たにピクソン(ピクトグラミングPython版)とジャバスクピクト(ピクトグラミングJavaScript版)のスマートフォン版を公開しました.トップページからリンクを辿ってアクセスできます.
アプリケーション自体のURLは次の通りです.
ピクソン: https://pictogramming.org/editor/picthonsp.html
ジャバスクピクト:https://pictogramming.org/editor/javascpictsp.html
標準のピクトグラミング,ピクソン,ジャバスクピクトとも統一のインタフェースを用いることで,異なるプログラミング言語を横断的に扱うことができるように設計されています.主要命令の入力を支援する命令入力支援ボタンは,対象とするプログラミング言語(Python, JavaScript)の基本命令の入力をサポートします.さらに,言語選択のプルダウンで,日本語を選択すると日本文による各命令の説明がボタン上に表示されながらプログラムの入力が支援されます.
ピクソン, ジャバスクピクトともWebアプリケーションですのでOSによらず,一般的なブラウザ(Safari,Chrome等)上で動作します.また,ピクソン, ジャバスクピクトとも,作成したプログラムはサーバ側で処理されることなく全てスマートフォン上(クライアント上)で処理および実行されますので,ご安心ください.今後不具合の改善や機能拡張等を適宜進めていきます.
また,ピクソン,ジャバスクピクトにおいても,対面型授業での利用だけでなく,自学習を想定したテキストとして更新,公開しました.
引き続きピクトグラミングシリーズをどうぞよろしくお願いします.
伊藤一成
選択ソートを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ページ)も更新しました.これまでは,対面授業を想定して作成されていましたが,緊急事態宣言に伴う休校状態に対応するため,自宅等での自学習方式での使用を想定し利用手順や説明等を追記しました.名称もピクトグラミング授業用テキストからピクトグラミング学習用テキストに変更しました.
以下のリンクからダウンロードできます.
短期間で作成しているため,まだ学習テキストとして不十分な点もあると思いますが,今後もテキストの拡充に努めてまいります.今後ともピクトグラミングシリーズをよろしくお願いします.
文字列描画命令を追加しました.追加された命令の様式は以下の通りです.
命令の様式 | 処理 |
---|---|
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 | 標準 | ひょうじゅん |
これまでピクトグラミングシリーズは,プログラムを記述する領域に,HTML5標準のテキストエリアを使用してきましたが,今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました.これにより行番号の表示,シンタックスハイライトなど,プログラムを記述する上でより利便性が高まります.JavaScpictに続けて,ピクトグラミングのPython版である,Picthonに対して適用しました.今後,ピクトグラミングシリーズの他のアプリケーション(ブロックピクトグラミングを除く)にも順次適用予定です.
これまでピクトグラミングシリーズは,プログラムを記述する領域に,HTML5標準のテキストエリアを使用してきましたが,今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました.これにより行番号の表示,シンタックスハイライトなど,プログラムを記述する上でより利便性が高まります.手始めにピクトグラミングのJavaScript版である,JavaScpictに対して適用しました.今後,ピクトグラミングシリーズの他のアプリケーション(ブロックピクトグラミングを除く)にも順次適用予定です.
ピクトグラミングでは,体,左右のひじ,手,ひざ,あしの9箇所にペンを独立に持つことができます.ペンを持つとその部分の移動の履歴が描画されます.
各部位に対するペンの持つ・放すをマウスクリック操作で変更できるようにしました.表示されている人型ピクトグラムの対応する位置にマウスカーソルを持っていくとピンクの十字が現れますので,そこでマウスをクリックするとペンの持つ・放すが切り替わります.ペンを持っている場合は,対応する位置に赤い十字が表示されます.またマウスで操作した場合においても,対応する「ペンを持つ・放す命令」が自動的にプログラムに挿入されます.
このクリック操作による「ペンの持つ/放す」は,人型ピクトグラムへの様々なマウス操作(回転,平行移動等)が有効になっている場合に限りますので,マウス操作を有効にしたいときは,下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください.
人型ピクトグラム表示領域に対する機能追加なので,標準のピクトグラミング,Picthon,JavaScpict, Block Pictogramming(日本語版,英語版いずれも), 自然言語ピクトグラミング全てが対応されています.