[ピクトグラミング]IE(インターネットエクスプローラ) 利用における禁止,注意,指示マークを伴う画像,アニメーション生成機能の対応

posted in: 開発者ブログ | 0

おかげさまで,ピクトグラミング今年に入り,早速のいくつかの小学校,中学校,高校大学で使っていただいているのは以前ご報告した通りです.

学校機関で使っていただこうと思うと,IEしか入っていないのでという学校も少なくありません.ピクトグラミングは学校で使っていただくことを念頭に入れているので,当然対応して行くわけですが,これが結構大変です.

以前,公開直後に,「IE(インターネットエクスプローラ) 利用における画像,アニメーション,プログラムダウンロード機能,及びプログラムアップロード機能の対応」で書いた通り,IEでそもそも画像,アニメーションの生成ができなかったのでこれを対応しました.対応したつもりでいたのですが,今回IEしか使うことができない学校で,生成したピクトグラムを画像やアニメーション形式で保存してポスターサイネージ等で利活用してもらうという授業をやっていただいている先生から,「禁止,注意,指示マークがついていると画像,アニメーションが生成されない」というご連絡,調査してみると,SVG(Scalable Vector Graphics)ファイルを読み込んで,今回適用している方式で画像を生成するとセキュリティ違反が出ることがわかり,禁止,注意,指示マークはPNG形式の画像に変更することにしました.これにより,IEで,禁止,注意,指示マークを伴う作品でも画像,アニメーションで出力できるようになりました.ご報告です.

 

 

 

学研・進学情報(2018年2月号)の中で「ピクトグラミング」が紹介されました.

posted in: 開発者ブログ | 0

学研・進学情報(2018年2月号)「失敗しても面白い! プログラミングを楽しく学ぶ」という神戸大学附属中等教育学校 米田貴先生の実践記事の中で「ピクトグラミング」が紹介されました. 全国の高校や学研模試の受験生に配布されるとのことです.

https://www.gakuryoku.gakken.co.jp/category/news/

ライターの方のご厚意によりPDFもダウンロードできます.

http://www.edu.kobe-u.ac.jp/kuss-top/school/pdf/H29/20180115.pdf

 

[ピクトグラミング] 自撮り(Selfie)

posted in: 開発者ブログ | 0

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

 

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

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

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

 

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

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

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

定義 段差
倍率 0.2
移動 −120 200
ペン 下げる
ペン幅 10
右回り 90
前進 180
右回り 90
前進 30
左回り 90
前進 100
ペン 上げる
終わり

注意
実行 段差

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

 

定義 こける
倍率 0.5
回転 体 45
回転 体 15 0.2
回転 左上腕 −120 0.2
回転 左前腕 45 0.2
回転 右上腕 45 0.2
回転 右前腕 90 0.2
回転 左大腿 20 0.2
回転 左下腿 −60 0.2
回転 右大腿 45 0.2
回転 右下腿 −60 0.2
終わり

 

定義 段差
移動 −120 200
ペン 下げる
ペン幅 10
右回り 90
前進 180
右回り 90
前進 30
左回り 90
前進 100
ペン 上げる
移動 −180 ー120
終わり

 

注意
実行 段差
実行 こける

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

 

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

 

[ピクトグラミング] 正しく伝える難しさを知る

posted in: 開発者ブログ | 0

日常のひとこまに何か追加しようと思いまして,メジャーなところで「歩きスマホ禁止」を作ってみようと思い,作ったものをTwitterに投稿したところ,下のようなご指摘がありました.(背景が黒になっているかもしれませんが,それは透過です.)

 

Twitterを見た学生からも「先生これは歩きスマホ禁止というより撮影禁止ですね.」と言われ,初めて「ああなるほど」と納得し,作り直したのがこれ.

 

そうしていたところ,「ねこでした」さんが,アニメーション版の歩きスマホ禁止を作ってくれました.これは秀逸です.体の各部品とスマートフォンの角度や動きといい見事です.さりげなく片手をポケットに突っ込んでいるところも渋い.

正しく伝えるピクトグラムを作るのは,思っている以上に難しいです. 伝える難しさもピクトグラミングで体験できます.

[ピクトグラミング」 変数の定義方法の追加

posted in: 開発者ブログ | 0

これまで命令名と同じ名称の変数が定義できなかったのですが,プロシージャをサポートしましたので,任意の命令を定義できるようになると,命令名と変数名でバッティングが起きやすくなります.

そこで,:変数名 という表記を可能にしました.これまで通り,命令の名称(新たに定義した命令も含む)異なるものであれば,:無しでも対応できます.また「:変数名」と単なる「変数名」は別のものになります.これを機に「:変数名」をデフォルトにしようと思います.

 

代入 :回転 30
回転 左上腕 :回転

「ピクトグラミング」プロシージャを実装しました.ピクトグラミングで再帰について考えてみよう.

posted in: 開発者ブログ | 0

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

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

 

命令の様式 処理
D name arg1 .. argN arg1からargNまでのN個の引数を伴う手続きnameを登録する.引数列の終端は改行とする.
E name arg1 .. argN [start] 登録されているarg1 からargNまでのN個の引数を伴う手続きnameを実行開始からstart秒後に実行する.startが省略されている場合は,0が入力されているものとして取り扱う.
EW name arg1 .. argN [waittime] 登録されているarg1 からargNまでのN個の引数を伴う手続きnameを実行する. 次の命令はその[waittime]秒後に実行する.waittimeが省略されている場合は,0が入力されているものとして取り扱う.

 

例えば,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つの”命令の集合”を定義しています.ひとまとまりの処理を定義することで,再利用性が高まり,可読性も高まります.「腕立て」とは,「腕を曲げる」処理と「腕を伸ばす」処理を”回数”回繰り返すのだとわかります.ピクトグラミングでは,人の動きに帰着しているので,定義の名称も負担なく決めることができます.

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

 

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

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

 

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

 

 

 

「ピクトグラミング」 画像ファイル,アニメーションファイル生成時のロゴ付与を無くしました!

posted in: 開発者ブログ | 0

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

 

 

 

 

 

「ピクトグラミング」 命令一覧のボタン群を画面上に表示する機能を追加しました.

posted in: 開発者ブログ | 0

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

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

 

ピクトグラミング スマートフォン版の公開

posted in: 開発者ブログ | 0

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

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

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

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

 

PC版に比べて,

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

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

があります.

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

 

2018年もよろしくお願いします!

posted in: 開発者ブログ | 0

今年も,ピクトグラミングをよろしくお願いします.今年は,様々な機関で様々な観点で使っていただける予定なので,非常に楽しみにしております.フィードバックをいただきながら改良していきます.