高等学校情報科の先生方を対象としたピクトグラミングシリーズの紹介動画(約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 まとめ

[ピクトグラミングシリーズ] 人型ピクトグラムの表示位置に文字列を表示できるようにしました.

ピクトグラミングでは以前からT命令で文字列を描けましたが,今回人型ピクトグラムの表示位置に文字列を描けるように様式を変更しました.

 

変更前

命令の様式 処理
T arg1 arg2 arg3 [arg4] 座標(arg2,arg3),文字の大きさ arg4で文字列 arg1 を描く.arg4 が 省略された時は,arg4に80が入力されているものとして取り扱う.

 

変更後

命令の様式 処理
T arg1 arg2 [arg3 [arg4]] 引数の数が2つの場合,文字列arg1を文字の大きさarg2で人型ピクトグラムの現在位置に描く.

引数の数が3つまたは4つの場合,座標(arg2,arg3),文字の大きさ arg4で文字列 arg1 を描く.arg4 が 省略された時は,arg4に80が入力されているものとして取り扱う.

 

実習などでは,コンソール上に文字列群を表示するような課題も多くありますが,そのようなプログラムを多少のコード追加のみで記述することができます.

次のプログラムはPicthonで作成した素数判定のプログラムです.

import math

pic.SC(0.1)
pic.MW(-280,-260)

def println(str):
    pic.T(str, 20)
    pic.MW(0, 22, 0.02)
    
def isPrime(num):
    upper = math.floor(math.sqrt(num))
    for i in range (2, upper + 1, 1):
        if num % i == 0:
            return False
    return True

for i in range(2, 51):    
    if isPrime(i):
        println( str(i) + "は素数" )
    else:
        println( str(i) + "は素数じゃない" )
    if i == 26:
        pic.M(200, -550)
[出力例]

 

また,文字列表示とピクトグラムのスタンプ機能を組み合わせると,人型ピクトグラムを構成素とするインフォグラフィックを出力するプログラムもできます.一連のピクトグラムの動きを考えながらプログラムを作成することができます.

data = {'Java':7, 'Python':4, 'C':9, 'Ruby':3} 
pic.SC(0.2)
pic.M(-260, -200)
for name, count in data.items():
    pic.T(name, 20)
    pic.MW(60, 0)
    for i in range(count):
        pic.MW(40, 0)
        pic.ST()
    pic.M(-(40 * count + 60), 120)
pic.SC(0)
[出力例]

[Picthon] ピクソン(ピクトグラミングPython版)の紹介用動画を追加しました!

「人型ピクトグラムと共に学ぶPython入門」というタイトルでPicthon((ピクトグラミングPython版)の15分程度の紹介動画を作成しました.手を振るという動作のプログラムを題材にしています.Picthonを使って講義を行われる際の参考になればと思います.またこの動画そのものを高等学校等の授業等で自由に使っていただいても結構です.以下のリンクからアクセスください.

 

Picthon(ピクソン) 動画コンテンツ

[Picthon] ピクソン(ピクトグラミングPython版)の授業用,自学習用テキストを追加(10章版)しました!

Picthon(ピクトグラミングPython版)の授業用,自学習用テキストを更新しました.これまでの6章バージョンに加えて10章バージョンを用意しました.

 

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

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

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

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

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

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

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

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

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

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

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

 

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

Picthon (Python版)学習用テキスト(10章 20200704版)

 

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

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

[ブロックピクトグラミング] ブロックピクトグラミングひらがな版を公開しました!(IE対応版も公開しました)

ブロックピクトグラミングひらがな版を公開しました!

直接のアクセスはこちらです.

トップページからもアクセスできます.

また,日本語のブロックピクトグラミングと同様に,IE(インターネットエクスプローラ)しか使用できない初中等教育機関があることを鑑み,IE対応版(一部機能利用不可)のブロックピクトグラミングひらがな版も公開しましたので,ご利用ください.

今後は,ブロックピクトグラミングに関しましても,標準のピクトグラミングと同様に単一のアプリケーションで言語選択可能にしていきたいと考えています.

 

 

 

 

 

 

 

 

 

 

 

 

利用できる機能はピクトグラミングシリーズと共通です.

 

[ブロックピクトグラミング] 人型ピクトグラムの身体動作でさまざまな図形を描画する部分に特化した配布用テキスト(ブロックピクトグラミング版)を公開しました.自宅学習用資料としてもご自由に利用ください.#pictogramming

ピクトグラミングのブロック版で,人型ピクトグラムの体を使って色々な図形を描く自宅課題を出したいというご連絡をいただいたので,これまでの資料をベースに作成いたしました.PDF10ページで,プログラム中心で文章の分量は多くありませんので,生徒の自宅学習用資料等としてもご自由に利用ください.

 

BlockPictogrammingテキスト(20200502版)

 

改変しての利用を希望されます先生方もいらっしゃると思いますのでその際はご連絡ください.Twitter @kazunariito2

「ピクトグラミングでラジオ体操」のムービーをご提供いただきました.#pictogramming #ラジオ体操

高校教員のこゆり様より「ピクトグラミングでラジオ体操」をご提供いただきました.新型コロナウィルスの影響で運動不足の方が非常に多いと思います.ぜひ,人型ピクトグラムと一緒に運動不足を解消しましょう.運動不足を解消した後は,ピクトグラミング(https://pictogramming.org)を使って,ピクトグラムを作ってみましょう.

 

 

文部科学省 子供の学び応援サイト <活用できるリンク集> ◎教師向け詳細版(高等学校 情報)にピクトグラミングへのリンクが掲載されました.

文部科学省 子供の学び応援サイト <活用できるリンク集>  ◎教師向け詳細版(高等学校 情報)にピクトグラミングへのリンクを掲載いただきました(PDFファイル).名称はピクトプログラミングと誤って記載されていますが,URIは正しいものとなっています(これもご愛嬌ということで).

 

個人所有のスマートフォンを利用した自宅学習のニーズに対応するため,ピクソン(ピクトグラミングPython版)とジャバスクピクト(ピクトグラミングJavaScript版)のスマートフォン版を公開しました.自学習用テキストも更新しました.

新型コロナウィルスの影響により,教育機関で行われてきたPCを使用した授業形式での実習が困難になっています.自宅学習の制約下で,個人所有のPCを所持していない生徒・学生への対応などの理由により,個人所有のスマートフォンを利用した自学習のニーズが高まっています.

これに対応するため,これまでのピクトグラミング標準版に加え,新たにピクソン(ピクトグラミングPython版)とジャバスクピクト(ピクトグラミングJavaScript版)のスマートフォン版を公開しました.トップページからリンクを辿ってアクセスできます.

アプリケーション自体のURLは次の通りです.

ピクソン: https://pictogramming.org/editor/picthonsp.html

ジャバスクピクト:https://pictogramming.org/editor/javascpictsp.html

 

標準のピクトグラミング,ピクソン,ジャバスクピクトとも統一のインタフェースを用いることで,異なるプログラミング言語を横断的に扱うことができるように設計されています.主要命令の入力を支援する命令入力支援ボタンは,対象とするプログラミング言語(Python, JavaScript)の基本命令の入力をサポートします.さらに,言語選択のプルダウンで,日本語を選択すると日本文による各命令の説明がボタン上に表示されながらプログラムの入力が支援されます.

 

ピクソン, ジャバスクピクトともWebアプリケーションですのでOSによらず,一般的なブラウザ(Safari,Chrome等)上で動作します.また,ピクソン, ジャバスクピクトとも,作成したプログラムはサーバ側で処理されることなく全てスマートフォン上(クライアント上)で処理および実行されますので,ご安心ください.今後不具合の改善や機能拡張等を適宜進めていきます.

 

また,ピクソン,ジャバスクピクトにおいても,対面型授業での利用だけでなく,自学習を想定したテキストとして更新,公開しました.

 

Picthon (Python版)学習用テキスト(20200421版)

JavaScpict(JavaScript版)学習用テキスト(20200421版)

 

引き続きピクトグラミングシリーズをどうぞよろしくお願いします.

伊藤一成

[雑話] 選択ソートをPicthon(ピクトグラミングPython版)で作ってみました.

選択ソートをPicthonを使って書いてみました.現在では,スタンプメソッド(ST)や文字列表示メソッド(T)などもありますので,こういうこともできるようになっています.このような概念をアニメーションで学んだりインフォグラフィックスを作成したりするのは,ピクトグラムの拡大解釈なので,必ず同時にピクトグラムの本質を説明することに留意しつつ活用していきたいものです.

 

def selectionsort(a):
    for i in range(len(a)):
        min_index = i
        for j in range(i+1, len(a),1):
            if a[j]< a[min_index]:
                min_index = j
            draw(a,i,j)
        a[i], a[min_index] = a[min_index], a[i]
        draw(a,i,j)
        
def draw(a,i,j):
    pic.CS()
    pic.C()
    pic.MW(-300,0)
    for k in range(len(a)):
        pic.SC(a[k] / 100)
        pic.ST()
        pic.MW(70, 0)
    pic.SC(0)
    pic.T("⇩", -325 + i * 70, -150, 50)
    pic.T("⇩", -325 + j * 70, -150, 50)    
    pic.W(0.1)

a = [7,22,11,34,17,52,26,13,40]
draw(a, -1, -1)
selectionsort(a)

 

実行例