[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.人型ピクトグラムのないところを長押しして人型ピクトグラムの向き(正面,側面)を変化する.

 

 

 

[ピクトグラミング ファミリー] 倍率変化命令の仕様の変更 「何を実装しないか(2)」

先日とある先生から,人型ピクトグラムの倍率(大きさ)を連続して変えるのが面倒だというコメントをいただきました.

そこで,倍率変化命令の引数の値の意味を「標準の大きさ(初期状態)」と比較して「何倍」ではなく,今の大きさからみて「何倍」という意味に変更しました.

よって,徐々にピクトグラムが小さくなるプログラムは,

出力例(早送り)

 

ブロックピクトグラミング(ピクトグラミングブロック版)では,

 

のように書けるようになりました.ピクトグラミングファミリーでは全て共通の処理系を使っていますので,

ピクトグラミング

REPEAT 10
SC 0.9
W 1
END

 

Picthon (ピクトグラミング Python版)

for _ in range(10):
    pic.SC(0.9)
    pic.W(1)

 

でも,同じ挙動となります.

倍率を連続的に変化させるという処理を実装してこなかったのには,理由があって,ピクトグラムは奥行きを表現しないという基本則があることです.よって配置を考える上で,一度標準に大きさに比べて相対的な大きさを指定することはあっても,連続的に変化することは想定していません.

ちなみに斜め向きの人型ピクトグラムはなく,人型のピクトグラムに正面と側面のピクトグラムしかない理由も奥行きを表現しないことが理由です.一方で,どうしても,ピクトグラムを徐々に小さくしたり,大きくしたりしたいという子も少なからずいて,いつも悩むところです.以前「何を実装しないか」というエントリを書きましたが,常に考えさせられます.

例えば,Scratchでも壁についたら跳ね返るブロックはありますが,弾を発射するブロックは用意されていません.ピクトグラミングは,よくピクトプログラミングと言い間違えられますが,ピクトグラムを作るためのプログラミングというのは副次的で,常に進化するピクトグラム(Pictogram + ing)との共生を主目的としています.

 

 

[ピクトグラミング] ブロックピクトグラミングの人型ピクトグラムもしゃべったり,表情を出すことができるようになりました!

ピクトグラミングを設計・実装する際に,ある機能を利用可能にしようか否かという判断に一番気を使います.

ピクトグラミングにもいくつか表立って公開していない機能があります.

それらの多くは,デザイン指針に準じたピクトグラムを作るという目的のみで考えると,必要ない機能,あるいは逸脱したデザインのピクトグラムの作成を逆に許してしまうものです.

一方,それらの機能も,プログラミングを学習する文脈からすると,ある方が可能性が広がります.

なかなか難しい判断ですが,いくつかの機能を実現するブロックを追加しました.日本語版英語版の両方とも追加しています.

冒頭で申し上げた理由により,これらはいずれも「その他」カテゴリに配置しています.

 

(1)話す,言うブロック

「話す」ブロックは引数で与えられた文を音声合成で発生します.

「言う」ブロックは,引数で与えられた文を指定された条件で,吹き出しで表示します.

 

 

一般には,アルゴリズムの学習をはじめプログラミング言語を用いるとどうしても,演算の結果を数字や文字で出力するような機能が欲しいということになってきます.例えば,1から10までの和を求めるプログラムを書くとかです.

文字列処理やリストも扱いたくなると思いますので,Google Blocklyで用意されているこれらのブロックも使用できるようにしました.

(2)お面,仮面ブロック

ピクトグラムには表情がありません.なので,お面をかぶって表情を出すことができます.回転命令において,回転の対象に「頭」があり,なぜ単なる円なのに,回転があるか不思議に思われた方もいらっしゃるかもしれませんが,これが理由です.また人間の側にも仮面という形で表情を出せるようにしました.これも以前からある機能でしたが,今回Block Programmingでも使えるようにしました.

 

これは標準のピクトグラムの作成指針にはありませんが,望ましくない状態のピクトグラムを作成して,それに対して人が嫌悪感を抱いている状況を表現するとか,逆に最近嬉しかった出来事をピクトグラムで表現してもらう等々の使い方が考えられます.

 

 

同じ挨拶でも表情が異なると随分異なった印象を与えてしまいます.私たち人間も常に気をつけないとですね.

 

 

 

 

ピクトグラム作成にあたり,最初から最後までデザインのルール下だけで考えるのではなく,回り道を許容し,遊びごごろを通じて作成する場を提供できれば,これまでにないようなデザインの点から見ても申し分のない,素敵なピクトグラムが誕生するかもしれませんね.