[ピクトグラミングシリーズ] 座標指定によるグラフィックス描画方式に対しての「円」描画命令の追加,および円をマウス操作のみでも描画できるようにしました.対応する円命令も自動的にプログラムに挿入されます.#pictogramming #ピクトグラミング

ピクトグラミングでは,次に示す3通りの描画方式をサポートしており,(a)「人型ピクトグラムの体の部位の移動の履歴で描画」する方式,「(b)人型ピクトグラム自身の移動の履歴で描画」する方式(タートルグラフィックスに相当)では円を描くことができましたが,一般的なプログラミング言語で採用されている「(c)座標を指定して描画」では円を描く機能はあえて実装していませんでした.今回これを実装いたしました.標準のピクトグラミングPicthonJavaScpict, 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命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます).原因を調査し改善します.」について解決しました.

 

 

[ピクソン] ピクソン(ピクトグラミングPython版)のプログラム記述領域にコードエディタを採用しました.

これまでピクトグラミングシリーズは,プログラムを記述する領域に,HTML5標準のテキストエリアを使用してきましたが,今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました.これにより行番号の表示,シンタックスハイライトなど,プログラムを記述する上でより利便性が高まります.JavaScpictに続けて,ピクトグラミングのPython版である,Picthonに対して適用しました.今後,ピクトグラミングシリーズの他のアプリケーション(ブロックピクトグラミングを除く)にも順次適用予定です.

 

[ジャバスクピクト] ジャバスクピクト(ピクトグラミングJavaScript版)のプログラム記述領域にコードエディタを採用しました.

これまでピクトグラミングシリーズは,プログラムを記述する領域に,HTML5標準のテキストエリアを使用してきましたが,今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました.これにより行番号の表示,シンタックスハイライトなど,プログラムを記述する上でより利便性が高まります.手始めにピクトグラミングのJavaScript版である,JavaScpictに対して適用しました.今後,ピクトグラミングシリーズの他のアプリケーション(ブロックピクトグラミングを除く)にも順次適用予定です.

[ピクトグラミングシリーズ] 体の各部位(9箇所)に対するペンの持つ・放すをマウスクリック操作で変更できるようにしました.対応する命令も自動的にプログラムに挿入されます.#pictogramming #ピクトグラミング

ピクトグラミングでは,体,左右のひじ,手,ひざ,あしの9箇所にペンを独立に持つことができます.ペンを持つとその部分の移動の履歴が描画されます.

各部位に対するペンの持つ・放すをマウスクリック操作で変更できるようにしました.表示されている人型ピクトグラムの対応する位置にマウスカーソルを持っていくとピンクの十字が現れますので,そこでマウスをクリックするとペンの持つ・放すが切り替わります.ペンを持っている場合は,対応する位置に赤い十字が表示されます.またマウスで操作した場合においても,対応する「ペンを持つ・放す命令」が自動的にプログラムに挿入されます.

このクリック操作による「ペンの持つ/放す」は,人型ピクトグラムへの様々なマウス操作(回転,平行移動等)が有効になっている場合に限りますので,マウス操作を有効にしたいときは,下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください.

人型ピクトグラム表示領域に対する機能追加なので,標準のピクトグラミングPicthonJavaScpict, Block Pictogramming(日本語版英語版いずれも), 自然言語ピクトグラミング全てが対応されています.

 

 

 

 

 

[ピクトグラミングシリーズ] 線の太さの初期値を1から15にしました.https://pictogramming.org/ #プログラミング #ピクトグラム

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

 

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

 

 

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

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

[ピクトグラミング] 小学校向けコンテンツのカテゴリを追加しました.第2弾として「音楽 A 表現」に特化したバージョンを公開しました.

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

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

 

3.音楽 A 表現

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

 

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

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

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

[ピクトグラミング] 小学校向けコンテンツのカテゴリを追加しました.第1弾として「算数(第5学年)B 図形(1)正多角形」に特化した2バージョンを(外角,中心角・内角)公開しました.

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

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

 

1.算数(第5学年)B 図形(1)正多角形 その1

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

2.算数(第5学年)B 図形(1)正多角形 その2

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

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

[ピクトグラミングシリーズ共通] 人型ピクトグラム表示領域でのマウスオーバー時,マウス操作による人型ピクトグラム変形・平行移動時,マウス操作による線分描画時に角度,座標等の情報を表示するようにしました.

人型ピクトグラム表示領域でのマウスオーバー時,マウス操作による人型ピクトグラム変形・平行移動時,マウス操作による線分描画時に角度,座標等の情報をリアルタイムに表示するようにしました.

表示されるのは,マウスによる操作が有効の設定になっている場合に限ります.

人型ピクトグラムを表示する領域の機能追加ですので,ピクトグラミングシリーズ全て(ピクトグラミング,モバイルピクトグラミング,Picthon,JavaScpict, Block Pictogramming)に対して適用されています.

引き続きピクトグラミングシリーズご愛顧のほどよろしくお願いします.

[ピクトグラミング] チラシを作りました.

ピクトグラミングは,第82回情報処理学会 全国大会 中高生情報学研究コンテスト(2020年3月7日(土)開催)の個人スポンサーになっています.スポンサーの特典としてチラシを置いてもらえるということで,これを機にチラシを作りました.

(上: おもて面 下: うら面)

 

チラシのpdfファイルも公開しますので,お知り合いの方々への広報等で配布等頂ければ幸いです.

[ピクトグラミング] 放送大学 2020年度第1学期面接授業「遊びを通して学ぶ情報科学’20」東京足立学習センター(5/9,10) , 大阪学習センター(6/13,14) のお知らせ #放送大学

東京足立学習センター(2020年5月9日,10日) , 大阪学習センター(2020年6月13日,14日)において放送大学 2020年度第1学期面接授業「遊びを通して学ぶ情報科学’20」が開講します.その中で,ピクトグラミングを使った授業が行われます.ピクトグラミング(情報デザイン)以外にも,コンピュータサイエンスアンプラグド,アルゴリズム(アルゴロジック),Scratch(プログラミング)と盛りだくさんの内容です.講義内容は以下の通りです(東京足立,大阪学習センターとも同じ)

第1回オセロ手品(エラー訂正)、点を数えろ(2進表現)、メッセージ通信(文字表現)
第2回FAXゲーム(画像表現)、ロボット交番(支配集合)
第3回ジャンピング・カンガルー(処理手順)、宝島(状態遷移図)
第4回Finding Sam!(情報量)
第5回アルゴロジック(アルゴリズム)
第6回Scratch(プログラミング)
第7回ピクトグラミング作品制作(情報デザイン)
第8回ピクトグラミング作品発表会、総括

東京足立学習センター(5/9,10)は,大阪電気通信大学情報学部客員准教授 中野由章,および青山学院大学 社会情報学部社会情報学科准教授 伊藤一成が,大阪学習センター(6/13,14)は,大阪電気通信大学情報学部客員准教授 中野由章が担当します.

講義の概要は,
放送大学シラバス検索ページから
年度学期を「2020年度1学期」,科目名に「情報科学」と入力し検索すればアクセスできます.

また,初中等の先生方でかつ放送大学の学生の方で,プログラミング教育に関してご関心がある方は受講されることをお勧めします.

科目登録申請期間は,郵送が,2020年2月13日(木)~2月28日(金)〔私書箱必着〕,システムWAKABA(インターネット)が2020年2月13日(木)9時~2月29日(土)24時です.