[ジャバスクピクト] ピクトグラミング JavaScript版 JavaScpict (ジャバスクピクト) を公開しました.

ピクトグラミング JavaScript版 JavaScpict (ジャバスクピクト)を公開しました.

Pictogrammingトップページからリンクでたどることができます.

JavaScpictのアプリケーションに直接アクセスされたい方はこちらです.

また,JavaScpictの使い方はこちらにあります.

 

JavaScpictの特徴として,Pictogrammingを拡張しており,Pictogrammingとほぼ同じ操作感でJavaScript言語を使いピクトグラムコンテンツを作成できます.またPictogrammingと同様,プログラミングの諸概念を学ぶことができる設計になっています.ピクトグラミングとは何かについてはこちら   , ピクトグラミングの使い方はこちらに記載しています.ピクトグラミング関係の論文はこちらです.

JavaScpictは,入力されたJavaScpictのプログラムの中で,Pictogrammingの動作・描画命令に関しては,Pictogramming形式の命令に内部で変換し実行する方式を採用しています.

  • Pictogrammingの操作命令に限定し,Pictogramming形式の命令に内部で変換.
  • Pictogrammingの機能の追加によりJavaScpictの機能も自動的に追加される

 

一方Pictogrammingの動作・描画命令以外の全ての文,例えばfor文,if文の定義文や制御文等は,JavaScriptの文法に基づくものであり,このコードのままJavaScpictで実行されます.よって,ループ展開,手続き呼び出しの展開,条件判定の展開が行われるため,動作は同一ですが実際に生成されるPictogrammingのコードは異なる場合があります.

高等学校では2022年度からの次期学習指導要領において,情報の科学的理解を基軸とする「情報I」が必履修科目となります.「情報I」では,その四本柱に,「<1>情報社会の問題解決」「<2>コミュニケーションと情報デザイン」「<3>コンピュータとプログラミング」「<4>情報通信ネットワークとデータの活用」を掲げています.JavaScpictが「<2>情報デザイン」「<3>コンピュータとプログラミング」との関連性が高いのはいうまでもありません.また,ピクトグラムは,社会の諸問題を映し出す,一種の社会の凝縮された写し絵であり「<1>情報社会の問題解決」を考える良い切り口となります.ピクトグラミングでは,インフォグラフィックスの機能も強化しており,「<4>情報通信ネットワークとデータの活用」でも活用も進めています.また,2019年5月に文部科学省から公開された情報I教員研修用資料でも,プログラミング単元の解説にPythonに加え,JavaScriptが取り入れられており,時流や政府戦略に沿ったテキスト型プログラミング言語重視の方針が伺えます.教育機関においても,プログラミング導入教育にいたる幅広い文脈でJavaScriptを用いた授業実践が多く報告されるようになってきました.JavaScpictがこれからの情報教育の一助になればと思っています.

 

先日,ピクトグラミング, ピクトグラミングPython版 Picthon の授業用テキストを公開しましたが,JavaScpict公開に伴い,JavaScpict版の授業用テキストも公開しましたので,以下のページからアクセスください.PictogrammingはIE(Internet Explorer) でも動作しますが,JavaScpictはIEでは動作しません.ご了承ください.

 

授業用テキスト(ピクトグラミング,ピクソン,ジャバスクピクト)

[JavaScpict] JavaScpict, JavaScript version of Pictogramming, has been released!

JavaScpict, JavaScript version of Pictogramming, has been released.

 

You can follow the link from the Pictogramming top page (English version).

Click here if you want direct access.

And, how to use page is here.

 

The characteristic of JavaScpict is that you can create pictogram content by JavaScript language. And the functions are all same as Pictogramming. Of course, it is designed to learn programming concepts with JavaScpict.

[Natural Language Pictogramming] Natural Language Pictogramming, which enable to code by natural language, has been released.

Natural Language Pictogramming, which enable to code by natural language, has been released.

You can follow the link from the Pictogramming top page (English version).

Click here if you want direct access.

You can access “how to use page” from the Pictogramming top page (English version).

 

The characteristic of Natural Language Pictogramming is that you can create pictogram content by natural language. And the interface are almost all same as Pictogramming. Of course, it is designed to learn programming concepts same as Pictogramming.

 

 

[自然文ピクトグラミング] ピクトグラミングの自然文入力版,Natural Language Pictogramming を公開しました!

 

ピクトグラミング の自然文入力版 Natural Language Pictogramming を公開しました.

Pictogrammingトップページからリンクでたどることができます.

直接アクセスされたい方はこちらです.

使い方のページもトップページからたどることができます.

 

2019年9月に情報処理学会関西支部支部大会で発表した内容,および2020年3月にDEIMで発表する内容です.

石井幹大,伊藤一成:ピクトグラミングの自然言語文によるプログラム入力機能の実装,2019年度情報処理学会関西支部支部大会,E-06 (2019.09.23)

 

Natural Language Pictogrammingの特徴として,Pictogrammingをベースに変更しており,Pictogrammingとほぼ同じ操作感で日英の自然文を使いピクトグラムコンテンツを作成できます.

(日本語の文の入力例)

(英語の文の入力例)

例えば,標準のPictogrammingでは,左肩を90度1秒で回転する。は,

「回転 左肩 90 1」

という命令でしたが,これを

「左肩を90度1秒で回転する。」

とそのまま記述できます.

また自然文ですので,

  • 左肩を1秒で90度回転する。
  • 1秒で左肩を90度回転する。
  • 左肩を反時計回りに90度1秒で回転する。
  • 左肩を左回りに90度1秒で回転する。
  • 90度左肩を1秒で回転する。

など色々な語順で命令を記述できます.

Natural Languge Pictogrammingも含め,Pictogrammingシリーズがこれからの情報教育の一助になればと思っています.

 

 

 

 

 

 

[Block Pictogramming] Block Pictogramming simple version, which can work on IE(Internet Explorer), released.

Standard version of Block Pictogramming can handle some commands but uses functions IE unsupported. Hence, it can not work on IE. Therefore we release simple version of Block Pitogramming. This version provides blocks only about fundamental concepts of programming. This version is suitable for novice user.

 

[ブロックピクトグラミング] IEでも動作するブロックピクトグラミングシンプル版を公開しました.

「ブロック版をぜひ使いたいのだけど学校のブラウザがIEしか使えなくて」という声に対応いたしました.ブロックピクトグラミングは変数を扱えますが,IEでサポートしていない機能を使っているため,IEで動作しませんでした.そこで,ブロックピクトグラミングシンプル版を公開しました.こちらのバージョンはIE(Internet Explorer)でも動作します.トップページからアクセスできます.

IEで対応できないブロックを削除することで,IE対応にするだけではなく,ブロックプログラミング通常版に比べて,単純な命令ブロック以外を間引くことで,初学者でも使いやすいように工夫いたしました.例えば,繰返しのカテゴリは1種類,条件分岐の命令も条件式を定義して分岐する形態のブロック群は削除し,確率により実行する命令を分岐するブロック1種類のみにしています.一方で,複数の動作や描画をまとめるための関数ブロックや,算術演算系のブロックは残しています.今後,ブロックの構成やブロックにどうラベルと記述する良いのか等々に関しては,現場の先生と協力していければと考えています.ご関心のある先生はぜひご連絡ください.

 

[Block Pictogramming] Now provides probability blocks in category “logic”. #pictogram #programming

There is no difficulty for constructing syntax of branch instruction because the description itself is prepared in the block-type programming language, but notation of a conditional expression is a hurdle for novices. Therefore, the probability blocks with the probability of execution as an argument has been added to category “logic” of Block Pictogramming.

 

This block asks the human pictogram to raise the left arm with a probabirity of 50% and raise the right arm otherwise.

[ブロックピクトグラミング] 確率実行ブロックを追加しました.#ピクトグラム #プログラミング

ブロック型のプログラミング言語では,分岐命令の記述自体は用意されているのでテキスト型ほど困難はないのですが,条件式を記述することはやはり初学者にはハードルとなります.分岐処理を体得する手軽な方法として,確率によって処理を分けるプログラムを書くことが考えられます.そこで,ブロックピクトグラミングに,確率を引数とする確率ブロックを論理カテゴリに追加しました.

このブロックでは,50%の確率で左腕をあげ,それ以外で右腕を上げるように人型ピクトグラムにお願いします(人型ピクトグラムは素直なので必ずその通りに動作してくれます).

[BlockPictogramming] Now supports the function that corresponding blocks (programs) are automatically generated by mouse operations. #pictogram #programming

One of the characteristics of Pictogramming is that a corresponding command is generated automatically by mouse operation on the human pictogram display area. Moving objects and show corresponding command sequence in the same time seems to good way to learn programming for novice in a way. Block Pictogramming now supports the function that corresponding blocks (programs) are automatically added by mouse operation.

The following four operation acts:

1. Drag the parts (arms, legs, and body) of the human pictogram to rotate.
2. Drag the humanoid pictogram with right button to translate.
3. Drag where no human pictogram exists to draw a line segment.
4. Hold the mouse button down where no human pictogram exists to change the orientation (front, side) of it.

 

[ブロックピクトグラミング] ピクトグラム表示領域に対するマウス操作のみで自動的に対応するブロック(プログラム)が追加されるようになりました.#ピクトグラム #プログラミング

ピクトグラミングの特徴としてピクトグラム表示領域上でのマウス操作で,対応する命令が生成されるという特徴があります.まずは,直感的にオブジェクトを動かして,それに対応する命令列を同時に提示するというのは,プログラミングを学ぶ上の初歩の初歩として一定の意味があると考えています.

ブロックピクトグラミングにおいても,ピクトグラム表示領域に対するマウス操作で自動的に対応するブロックが追加されていくようにしました.次の4種類の操作が対応します.

1.人型ピクトグラムの部品(腕,足,体)を左ドラッグして回転させる.

2.人型ピクトグラムを右ドラックして平行移動させる.

3.人型ピクトグラムのないところをドラックして線分を描く.

4.人型ピクトグラムのないところを長押しして人型ピクトグラムの向き(正面,側面)を変化する.