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

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

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

出力例（早送り）

 

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

 

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

ピクトグラミング

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（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 に以下の記述があります．

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

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

 

 

 

 

 

 

 

 

 

 

ピクソン(Pictogrammingの設計指針に基づくPython言語を用いたプログラミング，情報デザインの学習環境)を2019年12月2日公開いたしました．アプリケーションは　< こちら >　から利用できます．

本日(2019年12月3日）学校（主に高校の普通教科「情報」）でお使いいただけるピクソンの授業用テキストを公開いたします．

50分×6回分の授業利用を想定したテキストです．

三つのフェーズを限られた時間でスムーズに移行できるように設計されています．

 

フェーズ1 : 逐次実行，並列実行，繰返し，条件分岐等のプログラミングの基本概念を学習します．

フェーズ2 : 人型ピクトグラムの部位の動きの履歴で線画を描画します．フェーズ1で学んだ人間の動作記述を活用します．自然な形式でフェーズ１からの移行を実現します．

フェーズ3: フェーズ1,2で学習した内容をもとに，デザイン志向のピクトグラムを作成します．

 

図：ページの見本

 

詳しくは，こちらのページをアクセスください．

ピクトグラミング Python版　Picthon を公開しました．Pythonのyを90度時計まわりに回転するとicに見えるので，Picthonと名付けました．

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

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

 

2019年8月にSSS（情報処理学会　情報教育シンポジウム）で発表した内容です．

伊藤一成:Picthon（ピクソン）- Pictogrammingを用いたPython言語の学習環境の提案 – ， 情報処理学会　情報教育シンポジウム　SSS2019, (2019.08.18) （優秀発表賞受賞）

その際はサーバ側で処理する方式を発表しましたが，公開アプリケーションは，全てクライアント側で処理する方式としました．

 

Picthonの特徴として，Pictogrammingを拡張しており，Pictogrammingとほぼ同じ操作感でPython言語を使いピクトグラムコンテンツを作成できます．またPictogrammingと同様，プログラミングの諸概念を学ぶことができる設計になっています．

Picthonは，入力されたPythonのプログラムをPictogramming形式の命令に内部で変換し実行する方式を採用しています．

• Pictogrammingの操作命令に限定し，プログラム文字列を生成するPythonクラスを定義
• 人型ピクトグラムのポージングや図形描画に相当するメソッドはゴーストメソッドmethod_missing に相当する機能を使用
• Pythonの基本命令は全てPythonプログラムとして実行
• Pictogrammingの機能の追加によりPicthonの機能も追加される

 

Pythonでは，メソッドの引数はカンマ区切りで与えられ，引数列を丸括弧で囲う記法です．一方，Pictogrammingでは，命令や引数の間を空白文字で区切っています．

Pictogrammingの命令の引数には，体の部位や図形描画のペンタイプを表すラベル文字列がいくつか定義されています．メソッド名にアンダーバー(“_”)が含まれている場合も，空白文字に変換します．例えば，Pictogrammingで PEN DOWNという記述は，Pythonでは， pen(“down”) だけではなく，pen_down()のようにも記述できる．つまり，method1_method2(arg1, arg2, arg3)　はmethod1 method2 arg1 arg2 arg3　に変換されます．Pictogrammingで記述する操作命令は，この変換ルールで全て記述可能です．

一方for文，if文の定義文や制御文は，Pythonの文法に基づくものであり，このコードのままPythonで実行されます．よって，ループ展開，手続き呼び出しの展開，条件判定の展開が行われるため，実際に生成されるPictogrammingのコードは異なる場合があります．例えば，下の図の(a)のプログラムを入力して実行した場合，30%の確率でコード(b)が70%の確率でコード(c)が生成され，Pictogramming形式のコードとして実行されます．

 

 

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

 

先日，ピクトグラミングの授業用テキストを公開しましたが，Picthon公開に伴い，Picthon版の授業用テキストも公開しましたので，以下のページからアクセスください．Picthonはデバッガの機能がまだないので，年度末までには実装します．来年度からのご利用ご検討ください．PictogrammingはIE でも動作しますが，Picthonは現状IEでは動作しません（これも可能なら対応しようと考えています）．ご了承ください．

 

 

 

 

 

 

 

 

学校（主に中学，高校）でお使いいただけるピクトグラミングの授業用テキストを全面的に更新しました．

主に中学および高校での50分×6回分の授業利用を想定したテキストです（2019年12月1日更新）．

三つのフェーズを限られた時間でスムーズに移行できるように設計されています．

 

フェーズ1 : ピクトグラミングで，並列実行，繰返し，条件分岐等のプログラミングの基本概念を学習します．

フェーズ2 : 人型ピクトグラムの部位の動きの履歴で線画を描画します．フェーズ1の人間の動作をうまく利用し，自然な形式でフェーズ１からの移行を実現します．

フェーズ3: フェーズ1,2で学習した内容をもとに，デザイン志向のピクトグラムを作成します．

 

図：ページの見本

 

詳しくは，こちらのページをアクセスください．