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

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

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

2017年ありがとうございました

posted in: 開発者ブログ | 0

2017年の12月7日に公開してまだ1ヶ月弱ですが,非常に多くの方や,教育機関の方に使っていただき,様々なフィードバックをいただいています.ありがとうございます.来年も多くのところで使っていただける予定で,また共同で研究していける機会にも恵まれ充実しております.

自らが作ったツールで,自らが表現したいコンテンツやデータを生成できるというのは,この上ない喜びです.

設計理念に基づきつつ機能的にも改良しながら,来年(2018年)も地道に作りづつけていきたいと思います.みなさま良いお年をお迎えください.

ピクトグラミング英語版ホームページを開設しました!

posted in: 開発者ブログ | 0

ピクトグラミング英語版ホームページを開設しました.

と言っても,元々ピクトグラミングは,英語命令をサポートしていますので,英語版の「ピクトグラミング」とは,英語版「使い方」のページを作っただけですが... 今後は,日本以外での利用も促進していきます.

English Top

高等学校教科「情報」

posted in: 開発者ブログ | 0

高等学校では2022年度より学年進行で適用される次期学習指導要領において,情報の科学的理解を基軸とする「情報I」が必履修科目になりアドバンスドの「情報II」が選択科目になります.それぞれ次のような単元で構成されます.

情報I

・情報社会の問題解決

・コミュニケーションと情報デザイン

・コンピュータとプログラミング

・モデル化とシミュレーション

・情報通信ネットワークとデータの利用

情報II

・情報社会の進展と情報技術

・コミュニケーションと情報コンテンツ

・情報とデータサイエンス

・情報システムとプログラミング

・課題研究

次期学習指導要領を見据え,これらの単元のいずれかにフォーカスした検討や議論は様々なところで見られるようになりました.

しかし,これらすべての単元を横断的に俯瞰できるカリキュラム設計や授業実践が重要だと考えています.人型ピクトグラムに着目するのは筋が良さそうです.

何でプログラミング言語間を繋げるか

posted in: 開発者ブログ | 0

初学者や低年齢でのプログラミング教育・学習が取り扱われる中で,どのようなプログラミング言語が良いかという話題がいつもでます.例えば,発達段階や学習指導要領を鑑み,幼稚園から小学校低学年まではViscuitで,小学校では,Scratchなどのブロック型で,中学ではブロックとテキストが相互変換できるもので,高校ではテキスト型のスクリプト言語というような学年進行に沿った意見.あるいはまずは,アンプラグドでとか,ロボットなどのフィジカルを組み合わせるのが重要だとか.色々な人々が,時には所属する組織や業界の思惑もちらつかせつつ様々な意見を述べています.ただ私は何れも共感できないでいます.

 

人型ピクトグラムは,コンテンツでもありデータでもあります.OO(オブジェクト指向)の授業も担当していますが,そこではJava,Processingを使っています.それらに共通しているのは,人型ピクトグラムをコンテンツorデータの題材として共通して使用していることです.コンテンツやデータをプログラミング言語横断的に使用しているということです.

人型ピクトグラムは,行為者の投影でもあります.私も用途や目的に応じて様々なプログラミング言語を使います.例えばScratchで作るのが一番早いと思えば,授業で使うプログラムをScratchで作ることもあります.もちろんCやPython等々用途に応じて使い分けます.人型ピクトグラムは自由に様々なプログラミング言語を操るという行為者のシンボルでもあります.

人型ピクトグラムでプログラミング言語間の繋がりを考えてみるのも面白いのではないかと思っています.