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

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

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

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

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

出力例（早送り）

 

ブロックピクトグラミング（ピクトグラミングブロック版）では，

 

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

ピクトグラミング

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から10までの和を求めるプログラムを書くとかです．

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

（２）お面，仮面ブロック

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

 

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

 

 

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

 

 

 

 

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

Picthon, Python 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.

 

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

Block Pictogramming, a block programming 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.

 

The characteristic of Block Pictogramming is that you can create pictogram content by connecting visual blocks. And the functions are all same as Pictogramming. Of course, it is designed to learn programming concepts with Block Programming. Blockly is used to builds programs with visual blocks located in right side of the application.

Picthon（Picthon）は，人型ピクトグラムに関するコンテンツ生成環境ピクトグラミング（Pictogramming）シリーズの一つでPython言語でピクトグラムコンテンツが作成できます．同時に，プログラミング学習環境でもあります．

まずは1時間ピクトグラムと遊んでみましょう．

 

0. 深呼吸

とりあえず深呼吸から始めましょう．ピクトグラムと一緒にみなさんも体を動かして深呼吸を3回してみてください．

 

1. ハローワールド

では始めていきましょう．下がピクトグラミングの画面です．

画面右上のプログラムコード記述領域に命令を入力し定義します．とりあえず，次のように入力して，実行ボタンを押してみてください．

 

pic.R("RUA", 120)

 

人型ピクトグラムの右腕が上がりました．

pic.R("RUA",120)の一番はじめの pic は，人型ピクトグラムを表す識別子です．R は Rotate（回転）の略です．ピクトグラミングではこのR命令を使っていろいろなポージングアニメーションを作成できます．次のRUAは回転する体の部位です．文字列は””で囲みます．回転する部位は以下の図の9箇所で，BODYを除く8箇所は3文字の英字で表現します．ここではRUA(Right Upper Armの略です）なので，右腕が回転します．ちなみに部位LLLはLeft Lower Legの略になります．ピクトグラムは顔がないので，どちらが右腕なのかと思われるかもしれませんが，この人型ピクトグラムは鏡に映った自分の分身でもあるので思っていただければいいです．

では次に，先ほど入力したpic.R("RUA", 120) の括弧の中の最後に,1を追加して，実行ボタンを押してみてください．

 

pic.R("RUA",120, 1)

 

すると先ほどと異なり下のように動きながら右腕が上がりました．この最後の1は1秒間で動かすという意味です．このように最後に数字を追加するとその数字の秒数で指定された角度回転します．この数字を省略すると最初にやったように0秒（一瞬）で移動します．

では2行目に新しく，pic.R("LUA", -120, 1)　と入力して実行してみて下さい．

pic.R("RUA", 120, 1)

pic.R("LUA", -120, 1)

 

すると両腕が同時に上がりました．ピクトグラミングでは命令は上から順番に実行されますが，R命令では次に記述された命令も同時に実行されますので，結果２つの回転は同時に開始されます．では，右腕を回転して，右腕の回転が終わったら，左上の回転を開始したい場合はどうすれば良いでしょうか？

1行目のRをRWに変更して実行してみて下さい．

pic.RW("RUA", 120, 1)

pic.R("LUA", -120, 1)

 

このRWはRotate Waitの意味で回転が終了するまで次の命令は実行を開始しません．このR命令とRW命令を組み合わせる，言い換えると逐次（ちくじ）実行と並列実行を組み合わせることで，様々な動きを表現できます．

 

次に，これを実行してみて下さい．

pic.RW("LUA", -120, 1)

pic.RW("LLA", -90, 0.3)

pic.RW("LLA", 90, 0.3)

１回左の前腕を振りました．繰返し振らせたければ，for _ in range(arg1):を使います．arg1は繰り返したい回数です．また，繰返したい命令は全て4文字分字下げします．

 

pic.RW("LUA", -120, 1)

for _ in range(5):

    pic.RW("LLA", -90, 0.3)

    pic.RW("LLA", 90, 0.3)

 

ピクトグラムがハローって手を振ってくれてます．ハローワールド！

 

 

2. ピクトグラフィックス

次のプログラムを入力して実行してみましょう．

pic.PEN_HOLD("LLA")

pic.R("LUA", 360, 1)

なんと！円がかけました．ピクトグラミングでは動きの履歴を線画で描画できます．

このPEN_HOLDはこれ以降は動きの履歴を描くという意味です．次のLLAは，先ほどと同じく体の部位です．体の部位の名称もR命令と同じです．

どの点で描くかは以下の図の対応になっています．

SKという命令（Skelton の略です）を書くと人型ピクトグラムが透明になりますので，何を描いたかが，わかりやすくなります．

 

pic.SK()

pic.PEN_HOLD("LLA")

pic.R("LUA", 360, 1)

違う図形も描いてみましょう．

 

pic.SK()

pic.PEN_HOLD("LLA")

for _ in range(4):

    pic.RW("LUA", 90)

で左手を使って四角形を描くことができます．

 

このように時間0のRW命令は元の位置とその命令を実行したあとの位置を両端とする線分を描画します．

左腕の今の位置から，左上腕を反時計回りに90度回転した位置まで線分を描きます．さらにそこから左上腕を反時計回りに90度回転した位置まで別の線分を描きます．と繰り返すので，四角形が描けるわけです．

 

一方4行目のRWをRに変更すると

pic.SK()

pic.PEN_HOLD("LLA")

for _ in range(4):

    pic.R("LUA", 90)

 

何も描かれません．

時間0のR命令は，今の位置と同時に行われる複数のR命令の動きを全て実行したあとの位置を両端とする線分を描画します．

よってこの場合，左腕の初期位置から，左上腕を反時計回りに90+90+90+90 (=360) 度回転した位置まで線分を描きます．360度回転した位置というのは回転する前の位置と同じなので，結果なにも描かれないことになります．

 

R,RW命令のアニメーションの時間を0以外の値にして，また複数のR,RW命令をうまく組み合わせると様々な図形が描けます．例を一つ示します．同時に複数の体の部位を動かすところがポイントになってます．

pic.SK()

pic.PEN_HOLD("LLA")

pic.R("LUA", 360, 5)

pic.R("LLA", 180, 5)

 

 

 

ここまでで説明した命令の仕様は以下の通りです．

命令の様式	処理
pic.R( arg1, arg2, arg3, arg4)	arg4 秒後にarg1で指定される体の部位を反時計回りにarg2 度だけarg3 秒かけて支点を中心に等速回転する．arg4 が 省略された時は，arg4 に0が，arg3，arg4 の両方が省略された時はいずれも0が入力されているものとして取り扱う．
pic.RW( arg1, arg2, arg3)	arg1で指定される体の部位を反時計回りにarg2度だけarg3秒かけて支点を中心に等速回転する．回転が終了するまで次の命令は実行されない．arg3が省略された時は，arg3に0が入力されているものとして取り扱う．
for _ in range(arg1):	対応する命令群をarg1回繰返す．
pic.PEN_HOLD(arg1)	arg1で指定された部位のペンを持ち，これ以降その移動の軌跡を描く．
pic.PEN_RELEASE(arg1)	arg1で指定された部位のペンを放し，これ以降その移動の軌跡を描かないようにする．
pic.SK()	ピクトグラムを透明に変更する。透明の状態のときは通常に変更する。

 

3. セーフティマーク

禁止，注意，指示，安全の4項目に関するピクトグラムデザインのガイドラインも策定されて．通常，世の中に広く普及しているピクトグラムは作成ガイドラインに則ってデザインされています．ブロックピクトグラミングでは，禁止，注意，指示，安全（3種）用のピクトグラムを作るための6つのマークを簡単に設定できます．

 

表示できるマークの一覧を示します．

 

 

ピクトグラミングはまだまだたくさんのブロックをサポートしています．またPythonのプログラムでない形式のテキストで直接記述した形式ですが，作品例もあります．簡単でしょ？ぜひ色々なポーズを取らせてみたり，色々な図形を描いて，さらに適切なマークを設定して，あなたのオリジナルピクトグラムを作ってみてください．

 

 

Pictogramming（ピクトグラミング）は，人型ピクトグラムに関するコンテンツ生成環境です．同時に，プログラミング学習環境でもあります．

ピクトグラミングのブロック版，ピクトッチを使って，ピクトグラムと遊んでみましょう．

 

0. 深呼吸

とりあえず深呼吸から始めましょう．ピクトグラムと一緒にみなさんも体を動かして深呼吸を3回してみてください．

 

1. ハローワールド

では始めていきましょう．下がブロックピクトグラミングの画面です．

画面右側のプログラム記述領域にブロックを移動しブロックを組み立てていきます．ブロックは中央にあるカテゴリ一覧から選択します．

とりあえず，「動き」のカテゴリから「回転」ブロックをプログラム入力領域にある「実行ボタンが押されたとき」というコ型ブロックの内部にドラッグします．

 

 

 

 

次に，配置したブロックの「左かた」の部分を「右かた」に，「90」度の部分を「120」度に変更してみましょう．

変更したら，実行ボタンを押してみてください．

 

人型ピクトグラムの右腕が上がりました．

ピクトグラムは顔がないので，どちらが右腕なのかと思われるかもしれませんが，この人型ピクトグラムは鏡に映った自分の分身でもあるので思っていただければいいです．

 

では続けて，「左かたを１秒で時計回りに120度、回転待ちする。」と言うブロックを追加して一つ目のブロックの下にくっつけて実行してみて下さい．

右腕を回転して，右腕の回転が終わったら，左腕の回転が開始して，最終的にばんざいの姿勢になりました．ピクトッチでは命令は上から順番に実行されます．

 

 

では，両腕が同時にあげるにはどうすれば良いでしょうか？

1行目の「待ち」を消してみて実行してみて下さい．

ピクトッチでは命令は上から順番に実行されますが，”待ち”がないと次の命令も同時に実行されますので，結果２つの回転（左腕と右腕）は同時に開始されます．この”待ち”のあるなしを組み合わせる，言い換えると逐次（ちくじ）実行と並列実行を組み合わせることで，様々な動きを表現できます．

 

一度プログラムを全て消去しましょう．　ボタンを押してください．

次に，これを組み立てて実行してみて下さい．

右腕を上げたあと，１回右の前腕を振りました．繰返し振らせたければ，繰返したい部分を「繰返し」カテゴリにある繰返しブロックで囲みます．

ピクトグラムがハローって手を振ってくれてます．ハローワールド！

 

 

2. ピクトグラフィックス

次のプログラムを入力して実行してみましょう．

なんと！円がかけました．ピクトッチでは動きの履歴を線画で描画できます．

 

「透明」のブロックを配置すると人型ピクトグラムが透明になりますので，何を描いたかが，わかりやすくなります．

 

違う図形も描いてみましょう．

で左手を使って四角形を描くことができます．

 

このように時間0で体の部位を動かす場合，元の位置とその命令を実行したあとの位置を両端とする線分を描画します．

左腕の今の位置から，左上腕を反時計回りに90度回転した位置まで線分を描きます．さらにそこから左上腕を反時計回りに90度回転した位置まで別の線分を描きます．と繰り返すので，四角形（正方形）が描けるわけです．

 

一方，「回転」ブロックの「待ち」を無くすと

何も描かれません．

時間0の”待ち”の無い回転命令は，今の位置と同時に行われる複数の”待ち”の無い回転命令の動きを全て実行したあとの位置を両端とする線分を描画します．

よってこの場合，左腕の初期位置から，左上腕を反時計回りに90+90+90+90 (=360) 度回転した位置まで線分を描きます．360度回転した位置というのは回転する前の位置と同じなので，結果なにも描かれないことになります．

 

回転命令の時間を0以外の値にして，また複数の回転命令をうまく組み合わせると様々な図形が描けます．例を一つ示します．同時に複数の体の部位を動かすところがポイントになってます．

 

3. セーフティマーク

禁止，注意，指示，安全の4項目に関するピクトグラムデザインのガイドラインも策定されて．通常，世の中に広く普及しているピクトグラムは作成ガイドラインに則ってデザインされています．ピクトッチでは，禁止，注意，指示，安全（3種）用のピクトグラムを作るための6つのマークを「マークを『』にする。」ブロックを使って簡単に設定できます．

表示できるマークの一覧を示します．

 

 

ピクトッチはまだまだたくさんのブロックをサポートしています．またブロックでないテキストで直接記述した形式ですが，作品例もあります．簡単でしょ？ぜひ色々なポーズを取らせてみたり，色々な図形を描いて，さらに適切なマークを設定して，あなたのオリジナルピクトグラムを作ってみてください．

 

 

ピクトグラミングのブロックプログラミング版　Block Pictogramming(ブロックピクトグラミング)を公開しました．

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

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

 

 

ブロックピクトグラミングの特徴として，ピクトグラミングを拡張しており，ブロックを組み合わせることでピクトグラムコンテンツを作成できます．またピクトグラミングと同様，ピクトグラムコンテンツの作成を通じてプログラミングの諸概念を学ぶことができる設計になっています．ビジュアルブロックを組み合わせプログラムを構築する部分（画面右側）は，Blocklyを使用しています．

まだとりあえず公開してみた(2019年12月現在)という段階で，今後実践や分析を通じて，ブロックの構成など変更，改良していきます．

先日，ピクトグラミングやピクソン（ピクトグラミングPython版）の授業用テキストを公開しましたが，ブロックピクトグラミング公開に伴い，ブロックピクトグラミング版の授業用テキストも近日中（2019年12月現在）に公開する予定です．ピクトグラミングはIEでも実行できますが，ブロックピクトグラミングは，今のところIE（インターネットエクスプローラ）では動作しません．ただし，少しだけ機能制限（変数を使わない）すればIEでも動作するバージョンが実装できますので，近日中にこちらも公開します．

「小学校段階におけるプログラミング教育の在り方について（議論の取りまとめ）」2016-06-16 に以下の記述があります．

コーディングを覚えることが目的ではないことを明確に共有していくことが不可欠である。また、一人で黙々とコンピュータに向かっているだけで授業が終わったり、子供自身の生活や体験と切り離された抽象的な内容に終始しないよう、留意が必要である。楽しく学んでコンピュータに触れることが好きになることが重要であるが、一方で、楽しいだけで終わっては学習成果に結びついたとは言えず、子供たちの感性や学習意欲に働きかけるためにも不十分である。学習を通じて、子供たちが何に気付き、何を理解し、何を身に付けるようにするのかといった、指導上のねらいを明確にする必要がある。

授業利用も念頭に入れると，限られた授業時間，様々な種類の制約，設定された学習目標の達成等々の条件下でも，創造的表現を可能とする環境を提供することが重要なのかなと考えています．人間や社会の写し絵であるピクトグラムを通じて諸問題を考えるピクトグラミングシリーズの開発の動機になっています．ご活用いただければ幸いです．