再帰と視点

posted in: 更新情報, 開発者ブログ | 0

関数や手続きの中で自分自身を呼び出す処理を再帰呼出しといいます.

プログラミングを学習する際,この再帰の概念でつまづく人も少なくありません.

 

懸垂を10回するプログラムを例に再帰について考えてみたいと思います.


図 (1)

 


図 (2)

 

これを再帰を使わずにブロックピクトグラミング(ピクトグラミングブロック版)で作成した例です.回数を引数指定して懸垂をする関数(実際は手続き)「懸垂」,図(1)の状態にする手続き「初期状態」と,図(1)→図(2)→図(1)の状態変化をアニメーションで表現する手続き「1回曲げ伸ばし」が定義されておりこちらは折りたたんで表示してあります.人型ピクトグラムとは異なる視点である第三者視点だと,繰返しを使った表現が思いつくでしょう.

 

次に再帰を使って,記述してみます.こちらは関数(実際には手続き)「懸垂」の中で「懸垂」を呼び出しています.皆さん1回懸垂をしては,あと何回だ!がんばろう!と繰り返し念じた経験はないでしょうか?もちろん懸垂以外の,腕立て伏せ,トラック一周,漢字の書き取り…..など繰り返す処理であれば同じことが言えます.これは,実際に懸垂をする人型ピクトグラムになりきって考えた視点と考えられるでしょう.

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

 

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) スマートフォンでアクセスした場合のトップページです.

 

[ブロックピクトグラミング] ピクトグラム作成環境「ピクトグラミング」ブロック版の紹介,入門動画(計4動画)を作成いただきました!

posted in: 開発者ブログ | 0

「ピクトグラミング」ブロック版「ブロックピクトグラミング」を使用したピクトグラミングの紹介,入門動画を作成いただきましたので,紹介したいと思います.

 

今回紹介するのは以下の4本です.

 

まずはじめに紹介するのが,「とりあえずピクトグラミングを始める説明」の動画です.題名が示すとおり,まずはピクトグラミングがどういうものかを7分程度で知ることができます.

 

こちらは「とりあえず体験するピクトグラミング1,2」です.解説者の話し方,振る舞い方や人型ピクトグラムとのインタラクションの仕方など大変参考になります.ワークショップなどの体験講座での利用及びピクトグラミングファシリテータ養成を想定した動画となっています.2動画で完結です.

 

 

こちらは「ピクトグラミング入門」の初回動画.ピクトグラミングは,プログラミングの基本とのなる諸概念(逐次実行,平行実行,繰返し,条件分岐,関数等)を学べる要素を取り入れていますが,その視点を含めた動画内容となっています.つい先日共通テストの科目として導入などでも話題になっている高等学校「情報」をはじめ,小学校から大学に至る広範囲での情報デザインやプログラミングの授業での利活用が想定されます.

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名 開催します.

ピクトグラミーティング #3 を2021年03月13日の午前に開催します.

ピクトグラミーティングは,ピクトグラムとミーティングを合わせた造語です.

一応ピクトグラム関係(含むピクトグラミング)をテーマとしますが,教育一般や授業関係のことでも結構ですし,雑談でも結構です.1対1でzoomでお話しさせていただければと思います.

9:00-10:00 先着1名,10:00-11:00 先着1名

でお願いします.

ご希望の方(小学校から高等学校の先生限定でお願いします.)いらっしゃいましたら,Twitter のダイレクトメッセージで @kazunariito2 まで,ご連絡ください.

[ピクトグラミーティング #3] 2021-03-13(土) 9:00-10:00 1名,10:00-11:00 1名 開催します.

posted in: 開発者ブログ | 0

ピクトグラミーティング #3 を2021年03月13日の朝に開催します.

ピクトグラミーティングは,ピクトグラムとミーティングを合わせた造語です.

一応ピクトグラム関係(含むピクトグラミング)をテーマとしますが,教育一般や授業関係のことでも結構ですし,雑談でも結構です.1対1でzoomでお話しさせていただければと思います.

9:00-10:00 先着1名,10:00-11:00 先着1名 (おかげさまで両方とも埋まりました)

でお願いします.

ご希望の方(小学校から高等学校の先生限定でお願いします.)いらっしゃいましたら,Twitter のダイレクトメッセージで @kazunariito2 まで,ご連絡ください.

 

[ピクソン] print関数をサポートしました.

posted in: 開発者ブログ | 0

ピクトグラミングPython版ピクソンにprint関数をサポートしました.

ピクトグラムを描画する領域に小人化した人型ピクトグラムが行送りで表示していきます.

 

例えば,単純な入出力を伴う学習用プログラムが書きやすくなりました.

特にピクソン,ジャバスクピクトは,今後情報I,IIの諸単元の演習もしやすいように少しづつ機能追加していこうと思います.

[ピクトグラミング] 情報処理学会 情報教育シンポジウム SSS2020において,題目”ピクッと-ピクトグラム作成を通じた状態遷移モデルの学習環境 -”が優秀論文賞を受賞しました.

情報処理学会 情報教育シンポジウム SSS2020において,題目”ピクッと-ピクトグラム作成を通じた状態遷移モデルの学習環境 -”が優秀論文賞を受賞しました.

概要:筆者は,ピクトグラムコンテンツ作成環境「ピクトグラミング」を提案している.ピクトグラミングは,プログラミング学習環境の側面も有し,様々な文脈で利用されている.人型のピクトグラムを変形する命令,線画によるオブジェクト記述のための命令,セーフティーマーク記述のための命令を併用することで,短時間でピクトグラムのデザイン指針に準じたアニメーション効果を含む多様な作品を作成できる.同時にプログラミングの諸概念が学習できるのが特徴である.また,Python言語,JavaScript言語,ビジュアルブロック言語により記述できる派生環境もインターネット公開している.ピクトグラミングおよび派生環境は,手続き型 のプログラミングパラダイムをベースとしている.ピクトグラミングの資産を活用しつつ,ピクトグラムの状態とその状態遷移を状態遷移図で表現するピクトグラムコンテンツ作成環境「Picuit(ピクっと)」を新たに開発した.本論文では,その実装方式を中心に論ずる.

 

 

論文PDFはこちらから入手できます.

「ピクッと」は,論文では状態遷移を状態遷移図で表現する方式となっていますが,これとは異なる仕様で,Pictogrammingシリーズと同様にWeb公開する予定です(2021-01-31現在).

 

 

[ピクトグラミング] ブロックピクトグラミング ひらがな版(ピクトグラミング ブロック版のひらがな版)の学習用テキスト(58ページ)を公開しました.

ブロックピクトグラミング(ピクトグラミング ブロック版)ひらがな版 の授業・自学習用テキスト(58ページ)を公開しました.

 

ブロックピクトグラミング日本語版のテキスト をひらがな分かち書きにしたものです.

以下のような構成になっています.

・にちじょうせいかつ に おける ピクトグラム(1章)… ピクトグラムとは何か.ブロックピクトグラミングの基本的な使い方.

・ちくじじっこう,へいこうじっこう(2章) … 命令を決められた順番に一つづつ実行する.複数の命令を同時並行で実行する

・にたような しょり を まとめる(3章) … 複数の命令を繰り返し実行する場合について.

・からだ の ぶい を うごかして え を えがこう(4章) … 体の部位を動かす命令を考えことで様々な図形を描きます.

・あるいて え を かこう(5章) … 人型ピクトグラムの歩行で図形描画する(タートルグラフィックスに相当)テーマで復習する

・じっこう ごとに ことなった しょり を する(6章) … 条件によって実行する命令を変える

・ただしく つたえる むつかしさ を しる(7章) … デザイン指向のピクトグラムを作成するテーマで総復習する

各章の演習問題の解答例も巻末に掲載しています.

 

こちらからダウンロードできます.

BlockPictogramming(ブロックピクトグラミング) ひらがな

BlockPictogrammingがくしゅうようテキスト(7しょう 20201213ばん)

 

また,学習用PDFコンテンツのページ から,他の各種テキストもダウンロード可能です.ご活用ください.

今後も様々な視点からの研究・実践報告をして,その視点に応じた教材を順次提供していく予定です.授業用スライドがご入用の方はご相談ください.また,学習内容に応じた別のテキストや教授用スライド,クイズプリント等も用意しておりますので,ご関心のある学校の先生方は個別にご相談ください(こちらのページの連絡先からコンタクトください).