伊藤一成: 複数のプログラミング言語で記述可能なピクトグラムコンテンツ作成環境の提案と実装, 情報処理学会論文誌TCE, Vol.7, No.3, pp.1-11 (2021年10月)に関して，通常情報学広場からの無償ダウンロードは公開後2年経過後です．今回，情報処理学会の論文公開規定に基づき，ピクトグラミングサイトから無償でダウンロードできるようにしました．
[ピクトグラミング] 2021-11-01 ピクトグラミングの学習用テキストを更新しました。
ピクトグラミングの学習用テキストを更新しました。一つ前のバージョン20210909に対して、「5章 ピクトスイミング」「6章 物体移動」の2章を追加しました。また8章を変更しました。
Pictogramming（ピクトグラミング）
Pictogramming学習用テキスト(英語命令 8章 20211024版)
Pictogramming学習用テキスト(日本語命令 8章 20211024版)
ピクトグラミングの学習用テキストのページからダウンロードできます。こちらのページも更新いたしました。
引き続きピクトグラミングシリーズをよろしくお願いします。
2021-08-29 ブロックピクトグラミングにいくつかの機能を追加しました（1. 反転表示，2. 線画オブジェクトのグループ化と移動，3. 文字列入出力）．
ピクトグラミングのビジュアルブロック版である，ブロックピクトグラミングのPC日本語版とPC英語版を更新しました．
主に追加した機能は
1. 反転表示
2. 線画オブジェクトのグループ化と移動
3. 文字列入出力
です．
1. 反転表示
ピクトグラムというとサイン用途で使われるものが有名ですが，コミュニケーション用途で用いるピクトグラムのデザイン指針を定めたJIST0103（コミュニケーション支援用絵記号デザイン原則）およびISO19027(Design principles for communication support board using pictorial symbols)では，サイン用途の配色と反転した，黒背景に白字のピクトグラムが推奨されています．そのため，「マークを設定するブロック」に「反転」も指定できるようにしました．「マークを設定するブロック」は「図形」カテゴリの一番上にあります．
2. 線画オブジェクトの移動
ピクトグラミングシリーズでは，人型ピクトグラム以外のオブジェクトは基本図形（線分または円）の集合で描きます．従来からフレーム単位の描画（Processingで採用されているような描いて全て消すの繰返し）をすればオブジェクトを移動させる（ように見える）ことはできました．しかしより簡便で理解しやすい方法を実装しました．
一つ以上の基本図形から構成されるオブジェクトを定義できるブロック，定義されたオブジェクトを表示するブロック，定義されたオブジェクトを等速直線移動するブロックの三つを「図形」カテゴリに追加しました．下に例を示します．「物体を定義するための囲みブロックを使い「りんご」というラベルを設定して定義しています．囲みブロックの内部には，円と線分を描く二つのブロックがあります．これが構成要素となります．さらに「実行ボタンが押されたとき」の囲みブロックの中に，りんごを平行移動する命令があり，これにより「りんご」が等速で落下します．単に定義したオブジェクトを，定義した際の位置に表示するだけであれば，「物体〇〇を描く」ブロックを使います．オブジェクトの作成を通じて，複数の命令をまとめラベリングする手続き化の処理に慣れ親しんでもらいます．
等速直線運動以外の動きをしたければ，変数を設定して微小時間ごとに変化量を変えれば，実現できます．これは人型ピクトグラムを移動，回転する場合も同様です．次のプログラムは「りんご」が自由落下します．
3. 文字列入出力
ピクトグラミングでは，これまでも吹き出しの形で文字列を一定時間表示したり，ピクトグラムの構成要素として文字列を設定する機能はありました．しかしこれからはいずれも付加的な機能としての位置付けです．
一方，汎用プログラミング言語を用いた初学者向け学習では，文字列入出力をベースとするプログラムが題材になります．今回，カテゴリ「入出力」を追加し，ダイアログボックスを表示し値を特定の変数に格納するブロックと，画面上に小型化した人型ピクトグラムをカーソルに見立てて文字列を整列して逐次表示するブロックの二つを用意しました．この機能はすでにピクトグラミングPython言語版であるPicthonおよびJavaScript言語版であるJavaScpictには実装されていましたが，今回ブロック版にも実装しました．下の例は，高等学校情報科「情報Ⅰ」教員研修用教材でも紹介されている利子を計算するプログラムの例です．同一クラス内で学習者の習熟度に応じてテキスト型とブロック型の言語を併用する運用も想定できます．ピクトグラミングシリーズは基本静止画またはアニメーションピクトグラムを作成するのが目的の仕様になっているため，入力を要求するブロックはプログラムの最初に配置するようにしてください．途中に配置しても最初にダイアログボックスが表示されますので注意ください．
ブロックピクトグラミングPCひらがな版および各種スマートフォン版は順次新バージョンに変更していきます．
また，しばらくの間，各ページのフッタに旧版のブロックプログラミングのアプリケーションページへのリンクは残しておきます．旧版の利用が必要な場合，そちらのリンクを辿って利用ください．
次回の全体のアップデートは2021年年末を予定しています．特に高等学校「情報I」のデータ活用，中学技術科「情報分野」での授業での利用を想定した機能を中心にいくつか追加する予定です．
2021-08-21 ピクトグラミングトップページをリニューアルしました．
ピクトグラミングのトップページをリニューアルしました．
アクセスしたデバイスにより自動的に表示するトップページを変更するようになっています．
アクセスしたデバイス用の4通りのアプリケーション（Pictogramming, Block Pictogramming, Picthon, JavaScpict）と使い方へのリンクのみで構成されるシンプルかつ軽量なページです．それ以外の例えば，学習用テキスト，作品例等の関コンテンツへのリンクは全てフッター部分に集約しました．
今後は定常的に，トップページ以外のサイト構造やページをより使いやすいサイトをすべく随時更新していきます．今後ともピクトグラミングシリーズをよろしくお願いいたします．
(1) PC，タブレットでアクセスした場合のトップページです．
(2) スマートフォンでアクセスした場合のトップページです．
[ピクソン] ピクトグラミングPython版であるPicthon（ピクソン）で，共通テスト「情報」で採用予定のDNCL2をサポートしていきます．
ピクトグラミングの派生アプリケーションの一つであるPicthonで，共通テスト「情報」で採用予定のDNCL2をサポートしていきます．
まずは，共通テスト「情報」サンプル問題Q2で提示されているプログラム程度は動作するように実装しました．
人型ピクトグラムが頑張って地面に文字列を描いていきます．
画面下のプルダウンで「DNCL2」を選択すると，DNCL2の基本命令がボタン入力できます．今のところ共通テスト「情報」サンプル問題で使われている最低限度の命令のサポートのみですが，正式なDNCL2の仕様は今後公開されると思います．
DNCLは読むために最適化された記述言語なので，それで読み書きすることの一長一短もあるのですが，検討の余地があると考えて，研究，調査も含め開発していきます．
[ピクトグラミーティング #3] 2021-03-13(土) 9:00-10:00 1名，10:00-11:00 1名 開催します．
[ピクトグラミング] 情報処理学会 情報教育シンポジウム SSS2020において，題目”ピクッと-ピクトグラム作成を通じた状態遷移モデルの学習環境 -”が優秀論文賞を受賞しました．
情報処理学会 情報教育シンポジウム SSS2020において，題目”ピクッと-ピクトグラム作成を通じた状態遷移モデルの学習環境 -”が優秀論文賞を受賞しました．
概要：筆者は，ピクトグラムコンテンツ作成環境「ピクトグラミング」を提案している．ピクトグラミングは，プログラミング学習環境の側面も有し，様々な文脈で利用されている．人型のピクトグラムを変形する命令，線画によるオブジェクト記述のための命令，セーフティーマーク記述のための命令を併用することで，短時間でピクトグラムのデザイン指針に準じたアニメーション効果を含む多様な作品を作成できる．同時にプログラミングの諸概念が学習できるのが特徴である．また，Python言語，JavaScript言語，ビジュアルブロック言語により記述できる派生環境もインターネット公開している．ピクトグラミングおよび派生環境は，手続き型 のプログラミングパラダイムをベースとしている．ピクトグラミングの資産を活用しつつ，ピクトグラムの状態とその状態遷移を状態遷移図で表現するピクトグラムコンテンツ作成環境「Picuit（ピクっと）」を新たに開発した．本論文では，その実装方式を中心に論ずる．
論文PDFはこちらから入手できます．
「ピクッと」は，論文では状態遷移を状態遷移図で表現する方式となっていますが，これとは異なる仕様で，Pictogrammingシリーズと同様にWeb公開する予定です（2021-01-31現在）．
[ピクトグラミング] ブロックピクトグラミング ひらがな版（ピクトグラミング ブロック版のひらがな版）の学習用テキスト(58ページ)を公開しました．
ブロックピクトグラミング（ピクトグラミング ブロック版）ひらがな版 の授業・自学習用テキスト(58ページ)を公開しました．
ブロックピクトグラミング日本語版のテキスト をひらがな分かち書きにしたものです．
以下のような構成になっています．
・にちじょうせいかつ に おける ピクトグラム（１章）… ピクトグラムとは何か．ブロックピクトグラミングの基本的な使い方．
・ちくじじっこう，へいこうじっこう（２章） … 命令を決められた順番に一つづつ実行する．複数の命令を同時並行で実行する
・にたような しょり を まとめる（３章） … 複数の命令を繰り返し実行する場合について．
・からだ の ぶい を うごかして え を えがこう（４章） … 体の部位を動かす命令を考えことで様々な図形を描きます．
・あるいて え を かこう（５章） … 人型ピクトグラムの歩行で図形描画する（タートルグラフィックスに相当）テーマで復習する
・じっこう ごとに ことなった しょり を する（6章） … 条件によって実行する命令を変える
・ただしく つたえる むつかしさ を しる（7章） … デザイン指向のピクトグラムを作成するテーマで総復習する
各章の演習問題の解答例も巻末に掲載しています．
こちらからダウンロードできます．
BlockPictogramming(ブロックピクトグラミング) ひらがな
BlockPictogrammingがくしゅうようテキスト(7しょう 20201213ばん)
また，学習用PDFコンテンツのページ から，他の各種テキストもダウンロード可能です．ご活用ください．
今後も様々な視点からの研究・実践報告をして，その視点に応じた教材を順次提供していく予定です．授業用スライドがご入用の方はご相談ください．また，学習内容に応じた別のテキストや教授用スライド，クイズプリント等も用意しておりますので，ご関心のある学校の先生方は個別にご相談ください(こちらのページの連絡先からコンタクトください)．
[ブロックピクトグラミング] 小学校，中学校向けコンテンツ「図形描画」に特化したシンプルなバージョンを（中心角）更新しました．
ピクトグラミングサイトには，小学校向けコンテンツのカテゴリがあります．
図形描画に特化した2バージョンを（中心角，外角）を以前より公開しています．
右うでを回すことで，多角形を描画する人型ピクトグラムならではの描画方式のバージョンを更新しました．中心角を基に多角形を描きます．こちら（ https://pictogramming.org/editor/blockD2.html ）からアクセスできます．IE(インターネットエクスプローラ)でも動作します．授業利用を想定し，ブロックの種類は数種類に限定しています．各種機能ボタンも極力排除し非常にシンプルな画面構成となっています．
以前のバージョンとの違いは次の通りです．
- 右うでを回転するブロックの表記を「右うでを（ ）°回転した位置まで線を引く」に変更
- 「ペンを持たずに右腕を回転する」ブロックの追加
- 描画スピードを回転角度対して一定になるように変更
- 人型ピクトグラムの大きさ自体を変更することによる拡大縮小図形の描画
また，いわゆるタートルグラフィックスのバージョンもあります．外角を基に多角形を描きます．ブロックはわずか4種類です．こちらからアクセスできます．IE(インターネットエクスプローラ)でも動作します．
[情報I] 情報I教員研修用教材に掲載されているクイックソートをPicthon（ピクトグラミングPython版）で作ってみました．
クイックソートは，情報I教員研修用教材第3章「コンピュータとプログラミング」の131ページに掲載されています．これを Picthon を使って書き換えてみました．ちなみに以前選択ソートをPicthonで書き換えたプログラムはこちらにあります．
def quicksort(a, start, end):
m = int((start+end)/2)
i = start
j = end
while(i<j):
while a[i] < a[m]:
i = i+1
draw(a, i, j)
while a[j] > a[m]:
j = j-1
draw(a, i, j)
if i>=j:
break
temp = a[i]
a[i] = a[j]
a[j] = temp
if i==m:
m = j
elif j==m:
m = i
i = i+1
j = j-1
draw(a, i, j)
if start < i-1:
quicksort(a, start, m-1)
if end > j+1:
quicksort(a, m+1, end)
def draw(a, i, j):
pic.CS()
pic.C()
pic.MW(-300,0)
for k in range(len(a)):
pic.SC(a[k] / 200)
pic.ST()
pic.MW(35, 0)
pic.SC(0)
pic.T("⇩", -325 + i * 35, -150, 50)
pic.T("⇩", -325 + j * 35, -150, 50)
pic.W(0.1)
a = [7,22,11,34,17,52,26,13,40,20,10,5,16,8,4,2,1]
draw(a, -1, -1)
quicksort(a,0,len(a)-1)
実行例
