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

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等々用途に応じて使い分けます.人型ピクトグラムは自由に様々なプログラミング言語を操るという行為者のシンボルでもあります.

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

 

微分・積分

posted in: 開発者ブログ | 0

日常のひとこまに3種類の「腕を下げる」という作品をアップしました.

腕を下げる1は上に上げた左上腕を2秒かけて180度反時計周りに回転して下げる動きです.

R LUA -180
R LUA 180 2

腕を下げる2は左上腕を0.02秒かけて1.8度反時計周りに回転するという命令を100回繰り返します.角速度は90(度/秒)なので,結果左上腕を反時計周りに角速度90(度/秒)で2秒間動かしています.

R LUA -180
REPEAT 100
RW LUA 1.8 0.02
END

つまり腕を下げる2は,腕を下げる1と同じ動きをするのですが,100分割して動かす点が異なります.この書き換えができると,微小時間(この場合0.02秒)ごとに角速度を変える処理も記述できるようになります.

腕を下げる3は左上腕を2秒かけて180度反時計周り回転するという点は「腕を下げる1」,「腕を下げる2」と同じですが,角速度が180(度/秒)から0(度/秒)まで2秒かけて線形で変化しています.ラジオ体操第一の最後の深呼吸の腕の動きはこんな感じでしょうか.

R LUA -180
SET DR [3.6 – 0.018]

 

REPEAT 100
RW LUA DR 0.02
SET DR [DR – 0.036]

 

END

腕を下げるというごくごく一般的な身体的活動を意識することなんて普通ないと思います.ピクトグラミングでは,それも立派な題材で,RW命令を使って角度,角速度,角加速度の概念や3者間の微分積分関係を扱えたりします.RW命令をMW命令に変えれば位置,速度,加速度の同等の関係が記述できることは言うまでもありません.

条件分岐以前

posted in: 開発者ブログ | 0

現在ピクトグラミングでは,テキスト型プログラミングを採用しています.ブロック型やアイコニック型も順次実装していく予定ですが,テキストを優先しているのには理由があり,その理由は改めて書きたいと思います.テキスト型でよく言われるのが,段階的に単元を学んでいく際に「条件分岐」の項でつまづきがちというのがあります.初学者にとって正しい条件式を設定するというハードルに加え,シンタックスエラーが発生しえないブロック型と異なり,エラー発生の要因となる条件式の記法の難しさもあるからです.

ピクトグラミングでは,逐次実行,並列実行,変数,繰返しまでの処理で,自分の身体や経験,知識に基づいて表現された体現ピクトグラム,社会的に広く認知されている人物のアクションを再現した流行ピクトグラム,思わず笑わずにはいられないユーモア・シュールピクトグラム,身の回りや世の中に役立ちそうな実用的なピクトグラムまで,様々なピクトグラムが作れます.

プログラミングを学ぶためというよりは,例えば,ピクトグラムを作ってみようというような切り口でまずは条件分岐以前の段階までで授業設計するのが良いと思っています.楽しんでいたら,いつのまにかプログラミングの基本概念も体得しまったみたいな.そのような授業設計,授業実践が色々とできるだろうと思っています.ぜひこういう切り口で実践しましたというのがありましたら,教えてください.リンク可能なコンテンツであれば,当サイトからリンクを張らせていただきたいです.

 

 

クロスブラウザ対応

posted in: 開発者ブログ | 0

Webアプリケーションを開発する上で難題となるのが,クロスブラウザ対応です.

要望が高いと思われた,画像,アニメーション保存,プログラムダウンロード,アップロード機能を急遽実装したこともあり,公開にあたり,早速とある先生からIE(インターネットエクスプローラ)でこれらの機能が使えないというご連絡をいただき,対応しました.詳しくはこちらをご覧ください.

ピクトグラミングは,特に教育機関で使っていただけることを重視していますのでクロスブラウザ対応の重要度は高いです.学校のPCでは,アプリケーションのインストールもままならず,数年前のOSをそのまま使っているところもあります.IEのver 7,8しか入っていませんという教室もあったりします.複数のブラウザがインストールされている環境で普段使いでないかもしれないブラウザを限定して利用させるのは,学習者にとって負担にもなります.

もしお使いの教育環境で問題がありましたら,ご連絡いただけますと助かります.

何を実装しないか

posted in: 開発者ブログ | 0

最新・更新情報に書きましたが,ピクトグラフィックスの線の太さを指定する命令PENW arg1,線の形状(端が丸,端が四角)を指定する命令PEN ROUND, PEN SQUAREを追加しました.こうしてみると線の色を指定できるようにしないのかとか,図形作成ソフトウェアでいう基本図形(円,楕円,矩形,三角形等)を描く命令は実装しないのですかという質問が自然に聞かれそうですが,それはする予定はありません.

以前プログラミング・情報教育の専門家が集まる学会で発表した時にも,ピクトグラムを自由に複数生成させてピクトグラム間でインタラクションできるようにしないのかとか,新たに描画した図形も人型ピクトグラムと同等の操作(回転,移動等)ができるようにしないのかという質問をたくさん受けました.実装しようと思えばできるのですが,その機能を実装する優先度は自分の中では低かったりします.

初期キャラクタが人型ピクトグラムなプログラミング学習アプリケーションを目指すのではなく,あくまでピクトグラムを創る,自分で自分or自分の化身をコードする(ピクトアニメーション),必要なものは自分で動いて描く(ピクトグラフィックス:タートルグラフィックスに相当)という位置づけにすることで,他のプログラミング入門用と言われる各種アプリケーションと差別化していきたいと考えています.線の色に関しても,これを自由に指定にすることで,ピクトグラムのデザインガイドラインを大きく逸脱したお絵かきソフトのようにならないようにしたいのです.

そもそも,線の太さを指定する命令も実装してなかったのは,それなりに理由があったのですが,今回公開してから考えが変わりまして,早速実装しました.公開してみなさんの意見や感想を聞く重要さを改めて認識しています.

今回の機能追加で,実在するピクトグラムがはるかに描きやすくなりました.下にある「段差注意」のピクトグラムは,段差を線の太さ10の折れ線で表現しています.ちなみに人型ピクトグラム自身で人型ピクトグラムの分身を描くこともできます.