Pictogramming(ピクトグラミング)は，擬似言語を用いてピクトグラムを制作できるバージョンのアプリケーションの名称でもありますが，ピクトグラムの制作や利活用を通じたさまざまな創造的活動の呼称として用いています．
スマートフォン版使い方_ピクトッチ
ピクトッチ
スマートフォン版
画面の説明
画面は大きく分けて二つの部分から構成されます．上は，ピクトグラムを表示する「ピクトグラム表示領域」，下は，プログラムを記述する「プログラムコード入力領域」です。
プログラムコード入力領域にプログラムを入力することで，人型ピクトグラムのポーズを変えたり動かしたりすることができます。ピクトッチでは，ブロックを組み合わせてでプログラミングできます．
ピクトグラミングではプログラムの作成途中において３つの機能をオンオフできます．
| 画像（名称） | 説明 |
|---|---|
 （座標系表示） |
画像の右に表示されているチェックボックスをオンにすると，座標系が表示されます．座標はXY座標系（X方向とY方向の値，両方を組み合わせて位置を表現する）です．横方向がX座標で左端の-320から右端の320まで，縦方向がY座標で上端の-320から下端の320までをとります．つまり，中心が（0,0），左上が（-320,-320），右上が（320,-320），左上が（-320,-320），右上が（320,-320），つまりX軸正方向が右，Y軸正方向が下となります．数学の座標軸とY軸だけ逆方向なので注意して下さい． |
 （ドラッグ不可）＊標準でオフ |
画像の右に表示されているチェックボックスをオフにすると，人型ピクトグラムは「ピクトグラム表示パネル」上でピクトグラムの体の部位を直接ドラッグすることででも操作することができます。また線分や楕円などの図形もスマホ操作で描くことができます． |
 （再生ボタン押下時のみ再生）＊標準でオン |
画像の右に表示されているチェックボックスをオンにすると，「プログラムコード表示領域」に改行コードを入力した（エンターキーを押した）場合にはプログラムを実行せず，「初めから再生」ボタンを押したときのみ実行されます． |
ピクトッチでは再生・停止などのコントロールは，コントロールボタンから制御します．
| 画像（名称） | 説明 |
|---|---|
 （初めから再生） |
はじめから再生する． |
 （早送り） |
はじめから早送り再生します．全体の実行時間が長い時に，概略を知るのに便利です． |
 （一旦停止） |
停止します． |
 （停止位置から再生） |
停止している状態から再生します． |
 （すべてクリア） |
プログラムコード入力領域に記述されているプログラムをすべて消去します．消去前に確認のダイアログボックスが表示されます． |
作成したコンテンツのダウンロードは2通りあります。
[1. ショット画像のダウンロード]
（１）画像ダウンロードボタンを押すと，作品名.png の名前でショット画像が保存されます．
（１）動画ダウンロードボタンの右側にあるチェックボタンをオンにします．
（２）一度最初から最後まで実行します．ゆっくり実行されますが，内部的にはアニメーション画像が動的に生成されています．
（３）動画ダウンロードボタンを押すと，作品名.gif の名前でアニメーション画像が保存されます．
命令セット一覧
画面右上のプログラムコード入力領域にブロックの形状の命令を組み立てて定義します．
動き命令一覧
図形命令一覧
その他命令一覧
タートル命令一覧
構成部品の節点の名称
ピクトグラム表示領域でのスマホ操作と処理の対応
ピクトッチでは，ピクトグラム表示領域上における様々なスマホ操作により，対応した命令を自動的にプログラムを記述する領域に追加できます．
| タップする場所 | スマホ操作 | 処理 |
|---|---|---|
| 人型ピクトグラム | 1本指でドラッグ | 人型ピクトグラムの対応する部位を回転 |
| 2本指でドラッグ | 人型ピクトグラムの平行移動 | |
| 人型ピクトグラミング以外 | ドラッグ | 線分の描画 |
| ピンチイン/ピンチアウト | 楕円の描画 |
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)
実行例
