[ピクトグラミング] 情報処理学会 情報教育シンポジウム 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コンテンツのページ から,他の各種テキストもダウンロード可能です.ご活用ください.

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

 

[ブロックピクトグラミング] 小学校,中学校向けコンテンツ「図形描画」に特化したシンプルなバージョンを(中心角)更新しました.

ピクトグラミングサイトには,小学校向けコンテンツのカテゴリがあります.

図形描画に特化した2バージョンを(中心角,外角)を以前より公開しています.

右うでを回すことで,多角形を描画する人型ピクトグラムならではの描画方式のバージョンを更新しました.中心角を基に多角形を描きます.こちら( https://pictogramming.org/editor/blockD2.html )からアクセスできます.IE(インターネットエクスプローラ)でも動作します.授業利用を想定し,ブロックの種類は数種類に限定しています.各種機能ボタンも極力排除し非常にシンプルな画面構成となっています.

以前のバージョンとの違いは次の通りです.

  • 右うでを回転するブロックの表記を「右うでを(  )°回転した位置まで線を引く」に変更
  • 「ペンを持たずに右腕を回転する」ブロックの追加
  • 描画スピードを回転角度対して一定になるように変更
  • 人型ピクトグラムの大きさ自体を変更することによる拡大縮小図形の描画

 

 

また,いわゆるタートルグラフィックスのバージョンもあります.外角を基に多角形を描きます.ブロックはわずか4種類です.こちらからアクセスできます.IE(インターネットエクスプローラ)でも動作します.

[情報I] 情報I教員研修用教材に掲載されているクイックソートをPicthon(ピクトグラミングPython版)で作ってみました.

クイックソートは,情報I教員研修用教材第3章「コンピュータとプログラミング」の131ページに掲載されています.これを Picthon を使って書き換えてみました.ちなみに以前選択ソートをPicthonで書き換えたプログラムはこちらにあります.

 

def quicksort(a, start, end):
    m = int((start+end)/2)
    i = start
    j = end
    while(i<j):
        while a[i] < a[m]: 
            i = i+1 
            draw(a, i, j) 
        while a[j] > a[m]:
            j = j-1
            draw(a, i, j)
        if i>=j:
            break
        temp = a[i]
        a[i] = a[j]
        a[j] = temp
        if i==m:
            m = j
        elif j==m:
            m = i
        i = i+1
        j = j-1
        draw(a, i, j)
    if start < i-1: 
        quicksort(a, start, m-1) 
    if end > j+1:
        quicksort(a, m+1, end)
        
def draw(a, i, j):
    pic.CS()
    pic.C()
    pic.MW(-300,0)
    for k in range(len(a)):
        pic.SC(a[k] / 200)
        pic.ST()
        pic.MW(35, 0)
    pic.SC(0)
    pic.T("⇩", -325 + i * 35, -150, 50)
    pic.T("⇩", -325 + j * 35, -150, 50)    
    pic.W(0.1)

a = [7,22,11,34,17,52,26,13,40,20,10,5,16,8,4,2,1]
draw(a, -1, -1)
quicksort(a,0,len(a)-1)

 

実行例

[情報I] ランダムウォークをPicthon(ピクトグラミングPython版)で作ってみました.

ランダムウォークは,情報I教員研修用教材第3章「コンピュータとプログラミング」の147ページに掲載されています.これを Picthon を使って書いてみました.

このような概念をアニメーション表示できます.ただし,ピクトグラムの拡大解釈なので,必ず同時にピクトグラムの本質を説明することに留意しつつ活用していきたいものです.

 

import random
pic.sc(0.1) # ピクトグラムの大きさを0.1倍にする.
pic.pen_hold() # 体の部分にペンを持つ
pic.penw(1) # ペンの太さを1にする.
for _ in range(1000):
    dx = (random.random() - 0.5) * 10 
    dy = (random.random() - 0.5) * 10
    pic.mw(dx, dy, 0.02)

 

実行例

[Picthon] ピクソン(ピクトグラミングPython版)を用いた実践事例が情報処理学会誌 Vol.61 No.12(2020-11-15発行)に掲載されました.

神戸大学附属中等教育学校の米田貴先生が執筆された「情報の授業をしよう!:動かして学ぶプログラミングの授業事例 -失敗することも楽しむPythonの授業-」が情報処理学会誌 Vol.61 No.12(2020-11-15発行)pp.1174-1179に掲載されています.

 

「逐次,並行実行,変数,繰返し などプログラミングの諸概念を学ぶ上でピクトグラミングの派生アプリ,ピクソンを用いて行った高等学校 教科「情報」におけるプログラミング教育についての実践報告である. ピクソンは,Pythonのプログラムを実行してピクトグラムを作成できる教材である.ブラウザベースで動くこともあり導入が簡単であること,限られた授業時数の中で,プログラミングの習熟度も統一されていない40名前後の生徒に対し一斉授業の形式で授業をしていく上で,生徒自身が楽しみながら試行錯誤を通じて学びやすい教材だと判断し,採用した.7コマ程度の授業で行った実践について報告する.」

記事のダウンロードは以下からできます(情報処理学会非会員の方は発刊後2年間は有料です).

https://ipsj.ixsq.nii.ac.jp/ej/?action=pages_view_main&active_action=repository_view_main_item_detail&item_id=207722&item_no=1&page_id=13&block_id=8

 

[ピクトグラミング] ブロックピクトグラミング(ピクトグラミング ブロック版)の授業・自学習用テキストを公開しました.

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

 

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

・日常生活におけるピクトグラム(1章)… ピクトグラムとは何か.ブロックピクトグラミングの基本的な使い方.

・逐次実行,並行実行(2章) … 命令を決められた順番に一つづつ実行する.複数の命令を同時並行で実行する

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

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

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

・実行ごとに異なった処理をする(6章) … 条件によって実行する命令を変える

・正しく伝える難しさを知る(7章) … デザイン指向のピクトグラムを作成するテーマで総復習する

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

 

こちらからダウンロードください.

BlockPictogramming学習用テキスト(7章 20200831版)

 

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

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

[ピクトグラミング] Picthon(ピクトグラミングPython版),JavaScpict(ピクトグラミングJavaScript版)の授業用,自学習用テキストを更新しました(11章構成になりました).

Picthon(ピクトグラミングPython版),JavaScpict(ピクトグラミングJavaScript版)の授業用,自学習用テキストを更新しました(11章構成になりました).

 

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

・逐次実行(1章)… 命令を決められた順番に一つづつ実行する

・並列実行(2章) … 複数の命令を同時並列に実行する

・繰返し(3章) … 複数の命令列を繰り返し実行する

・変数(4章) … プログラムの途中で変化する値を扱う

・総復習I(5章) … ピクトグラムの部位の動作で図形描画するテーマで復習する

・リスト・タプル(6章) …一連のまとまった値の集合を扱う

・算術式(7章)… 算術式を記述する

・条件分岐,条件式(8章) … 条件によって実行する命令を変える

・関数(9章) … 一連の処理をまとめて定義し,再利用性を高める

・総復習II(10章) … デザイン指向のピクトグラムを作成するテーマで復習する

・応用I( 11章) … インフォグラフィックを作成する

 

こちらからダウンロードください.

Picthon学習用テキスト(11章 20200830版)

JavaScpict学習用テキスト(11章 20200830版)

 

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

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

[ピクトグラミングシリーズ] アプリケーションごとの簡易トップページを作成しました.

おかげさまでピクトグラミングシリーズは,色々なバージョンを公開しております.授業利用等で特定のアプリケーションだけ紹介したいという要望があり,各アプリケーションごとに,アプリケーションへのリンクだけを含んだ簡易トップページを作成しましたので,用途によってはこちらからアクセスいただければと思います.

 

 

高等学校情報科の先生方を対象としたピクトグラミングシリーズの紹介動画(約19分)を公開しました!

2022年度より高等学校情報科で,新学習指導要領が学年進行で適用されます.しかし,所定の授業時間数の中で情報科の内容を網羅する授業を設計するのは容易ではありません.この問題に対処するため人型ピクトグラムに着目し,コンテンツ作成環境「ピクトグラミング」及び派生アプリケーションを開発してきました.この環境を情報デザイン,プログラミング,データ処理等の複眼的視点からに基づいた統合学習環境として活用する方式について20分程度の動画で紹介するコンテンツ「高等学校情報科のための人型ピクトグラムと共に歩む統合学習環境」を作成しました.次のような構成になっています.ご視聴いただければ幸いです.

00:00-01:40 導入
01:40-03:39 ピクトグラム作成という視点でのピクトグラミングを用いたデモ
03:39-08:32 手を振るという動作をテーマにピクソン(ピクトグラミングPython版)を用いてプログラミングの諸概念を学ぶデモ
08:32-11:07 ピクソンを用いた素数判定,ソート,データからインフォグラフィックを作成する応用プログラムに関するデモ
11:07-11:22 ジャバスクピクト(ピクトグラミングJavaScript版)の紹介
11:22-13:22 図形描画アルゴリズムという視点でのブロックピクトグラミングを用いたデモ
13:22-16:40 人型ピクトグラムに着目する理由(投影効果,同調的学習)の説明
16:40-18:45 情報Iの4単元での活用例
18:45-19:03 まとめ