自撮りが好きなNさんという知人がいまして，拝見していると手順は以下のようです．

(1) はじめに，背景となる場所を決める．

(2) 含めたい可動なオブジェクトがあれば，それらを自分で動いて配置し構図を整える．

(3) 最後にポーズをとって，その構図の中に自身が収まる．腕・足の伸ばし方等々の姿勢や，自分の相対位置，表情などが満足でないと，再度微妙にそれらを変化させ，満足がいく一枚が撮れるまで撮影を繰り返す．

ピクトグラミングでは，大別して人型ピクトグラムのポーズを決めるピクトアニメーション命令と，人型ピクトグラム自身が動き，その軌跡で図形を描くピクトグラフィックス命令の２種類の命令があり，その両者を組み合わせることで様々なピクトグラムが作成できるようになっています．その場合の作成プロセスは次の通りです．例えば，日常のひとコマに掲載している「段差注意」を例にとってみましょう．

(1′) はじめに，トピックを決める（今回は段差注意）

(2′) 含めるオブジェクト（今回は段差のある床）を人型ピクトグラム自身が動いて描き，構図を整える．

定義 段差
倍率　０．２
移動　−１２０　２００
ペン　下げる
ペン幅　１０
右回り　９０
前進　１８０
右回り　９０
前進　３０
左回り　９０
前進　１００
ペン　上げる
終わり

注意
実行 段差

(3′) 最後に人型ピクトグラムがポーズをとってその構図の中に収まる．腕・足の絶対角度，ピクトグラムの相対位置や倍率が満足でないと，再度微妙にそれらを変化させ，満足がいくまで試行錯誤を繰り返す．

定義　こける
倍率　０．５
回転　体　４５
回転　体　１５　０．２
回転　左上腕　−１２０　０．２
回転　左前腕　４５　０．２
回転　右上腕　４５　０．２
回転　右前腕　９０　０．２
回転　左大腿　２０　０．２
回転　左下腿　−６０　０．２
回転　右大腿　４５　０．２
回転　右下腿　−６０　０．２
終わり

 

定義 段差
移動　−１２０　２００
ペン　下げる
ペン幅　１０
右回り　９０
前進　１８０
右回り　９０
前進　３０
左回り　９０
前進　１００
ペン　上げる
移動　−１８０　ー１２０
終わり

 

注意
実行 段差
実行 こける

おわかりの通り，自撮りの撮影プロセスと同一の手順を踏みます．Nさんが自撮りできない場合に，私がNさんの指示に従って撮影することもあるのですが，その場合でも，つまり自撮りでない通常の撮影でも同じ手順を踏みます．ピクトグラミングでは，同調的学習(Syntonic learning)を重視していて，人間が普段から何気なく行なっている一連の動作，操作と同じプロセスでコンテンツを作り，また最終的に普段から馴染みのある事象について表現できるように工夫されているのが特徴の一つです．

一つだけ違うところといえば，Nさんは表情豊かな方で，自撮りの際は実に様々な表情を作られるのですが，ピクトは一切表情を顔に出さないところでしょうか．

プロシージャを実装しました．

以下の命令を追加しました．

例えば，Facebookのグループに飯尾先生が投稿された，10回腕立てをするというテーマをプロシージャを使って書き換えてみます．

定義 腕を伸ばす ：時間
回転 右上腕 -55 ：時間
回転 右前腕 130 ：時間
回転 体 -16 ：時間
移動待ち 30 -75 ：時間
終わり

 

定義 腕を曲げる ：時間
回転 右上腕 55 ：時間
回転 右前腕 -130 ：時間
回転 体 16 ：時間
移動待ち -30 75 ：時間
終わり

定義 前準備
側面
回転 体 62
回転 右上腕 -85
移動 -500 200
ぺん幅 10
ぺん 下げる
右回り 90
前進 1000
ぺん 上げる
移動 -550 -167
終わり

 

定義　腕立て　：回数 ：時間
繰返し ：回数
実行待ち 腕を曲げる ：時間 ：時間
実行待ち 腕を伸ばす ：時間 ：時間
代入　：時間　「：時間 + 0.1」
終わり
終わり

 

実行 前準備
実行 腕立て 10 0.1

「腕を伸ばす」，「腕を曲げる」，「前準備」，「腕立て」という4つの”命令の集合”を定義しています．ひとまとまりの処理を定義することで，再利用性が高まり，可読性も高まります．「腕立て」とは，「腕を曲げる」処理と「腕を伸ばす」処理を”回数”回繰り返すのだとわかります．ピクトグラミングでは，人の動きに帰着しているので，定義の名称も負担なく決めることができます．

再帰を含むプロシージャも定義できます．上の定義「腕立て」を再帰を使ってピクトグラミングしてみました．

定義　腕立て　：残り回数 ：時間
もし 「：残り回数 ＞ ０」
実行待ち 腕を曲げる ：時間 ：時間
実行待ち 腕を伸ばす ：時間 ：時間
実行 腕立て 「：残り回数 – 1」 「：時間 + 0.1」
終わり
終わり

「N回腕立て」するとは「腕を曲げ」「腕を伸ばし」（１回分），さらに「N-1回腕立て」するということです．私たちも実際に腕立て伏せするとき，特に辛くなってきたりすると，こういう考え方しませんか？腕を曲げ伸ばしするごとに，あと9回，あと8回……あと1回，終了〜

再帰の考え方を教えるのにご苦労されている先生方多いと思います．ハノイの塔だったり，再帰図形を使って色々工夫されたりしますが，一度ピクトグラミングいかがでしょうか？いかなる人も反復的な身体動作に関する身体知は有していると思います．

ピクトグラミングを公開した2017年12月7日からほぼ１ヶ月が経ちました．2018年1月7日，情報処理学会の教員免許更新講習（大阪）で小中高の先生方にピクトグラミングを使ってのWSを行うということと，小中高では3学期も近く始まり，ピクトグラミング自体の利用に加えて，生成した画像やアニメーションを使ったポスター作り等の授業利用をしたいという先生方のご要望もいただいております．そこで本日2018年1月4日，サービス公開時よりアナウンスしておりました通り，これまで，生成された画像ファイル，アニメーションファイルの右下にPictogrammingのロゴを付与しておりましたが，これを消去しました．引き続きピクトグラミングをよろしくお願いします．

PC版，　スマートフォン版とも命令ボタンの一覧を追加しました．　言語設定のプルダウンで英語（初期状態），日本語が選べます．
PC版では画面左下のチェックボックスで，命令一覧ボタン群の表示，非表示が切り替えられます．
ボタンを押すとプログラム表示エリアのカーソルのある部分に命令が追加されます．
繰り返し命令（繰り返し 1 終わり），条件分岐命令（もし　[変数名 > 0] 終わり）は，範囲を選択してボタンを押せば，その範囲を囲む形で命令を追加することもできます．

テキストベースのプログラミング言語だと，そもそもどう命令を書けばわからないという問題が生じますが，これでかなり改善されたと思います．しばらく使ってもらって慣れてくれば，もう命令一覧表がなくてもピクトグラムが作れるようになるのではと思っています．

スマートフォン（タブレット版）を公開しました．と言いましても，PC版とは，レイアウトを変えたのと少しだけスタイルを変えただけです．

元々，プログラミングを体験する場合どういう画面構成にするとスマートフォンでも可能だろうかという思いがありました．

また短時間の利用でも達成感を感じることができ，さらに実際に実生活の中でも使えるコンテンツを生成できるかという問題設定がありました．

人型ピクトグラムという単純なオブジェクトに着目することにより，スマートフォンでの狭い領域でも視認性を失うことなく表現でき，命令数を限定し，命令長を全体的に短くすることで，狭いテキストエリアでも十分複雑な動きをする人型ピクトグラムが生成できるようにしました．日本語命令でもIMEの補完機能があるので，あまり入力数が多くなくてもプログラミングできるようになっています．ブロック型よりテキスト型を優先した理由もここにあります．

PC版に比べて，

1. ピクトグラムをドラックして，コードの自動生成がされない　（ピクトグラムの部位をドラッグで動かせない）

2. ファイルとしてコードを保存できない．（現状保存する場合はコードを全選択して，別のメモ帳的なアプリで保存しておく必要があります．これはWebStorageを用いて対応する予定です）

があります．

しかし，生成されたピクトグラムの動きを画像として保存，アニメーションとして保存することはできます．生成した画像やアニメーションは，スマートフォンのカメラワークに保存できますので，SNSなどでスタンプ代わりに使うことができます．ピクトグラミングへの動機付けもあり，出力（画像，アニメーション）は日常的に使いうるものというコンセプトになっています．