[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

個人所有のスマートフォンを利用した自宅学習のニーズに対応するため,ピクソン(ピクトグラミング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)

 

実行例

[ピクトグラミング] ピクトグラミング日本語命令版学習用テキストを新たに公開しました.またそれに合わせ,ピクトグラミング英語命令版学習用テキストも更新しました.

授業用テキスト(ピクトグラミング,ピクソン,ジャバスクピクト)のページで公開している授業用テキストに関して,ピクトグラミング日本語命令版テキスト(26ページ)を新たに公開しました.またそれに合わせ英語命令版テキスト(26ページ)も更新しました.これまでは,対面授業を想定して作成されていましたが,緊急事態宣言に伴う休校状態に対応するため,自宅等での自学習方式での使用を想定し利用手順や説明等を追記しました.名称もピクトグラミング授業用テキストからピクトグラミング学習用テキストに変更しました.

 

以下のリンクからダウンロードできます.

Pictogramming用学習用テキスト(英語命令 20200419版)

Pictogramming用学習用テキスト(日本語命令 20200419版)

短期間で作成しているため,まだ学習テキストとして不十分な点もあると思いますが,今後もテキストの拡充に努めてまいります.今後ともピクトグラミングシリーズをよろしくお願いします.

[ピクトグラミング スマホ版] 大学情報入試のエヴァンジェリストである中野由章先生が解説動画を作成してくれました.#ピクトグラミング

大学情報入試のエヴァンジェリストとして多方面でご活躍中である中野由章先生 ( @nakano_lab ) が,ピクトグラミング スマートフォン版の解説動画を作成してくれました.YouTubeからアクセスできます.

 

スマホでピクトグラミング!その1

スマホでピクトグラミング!その2

スマホでピクトグラミング!その3

 

中野由章先生に関する参考リンク

 

[コラム] 高等学校「情報科」とピクトグラミング

高等学校で2022年度より学年進行で適用される新学習指導要領では,情報の科学的理解を主軸とする「情報I」が必履修科目となります.さらに,情報Iの発展科目である「情報II」が選択科目となります.科目の学習項目を次の表に示します.

         内容
情報

(1)情報社会の問題解決
(2)コミュニケーションと情報デザイン
(3)コンピュータとプログラミング
(4)情報通信ネットワークとデータの活用
情報

II

(1) 情報社会の進展と情報技術
(2)コミュニケーションと情報コンテンツ
(3)情報とデータサイエンス
(4)情報システムとプログラミング
課題研究

 

情報Iについては,2019年5月(諸処の問題点が見つかり一旦非公開になり2019年9月に再公開)には文部科学省から教員研修用資料も公開されています.資料の構成を表に示します.

単元 学習内容
1 1 情報やメディアの特性と問題の発見・解決
1 2 情報セキュリティ
1 3 情報に関する法規,情報モラル
1 4 情報社会におけるコミュニケーションのメリット・デメリット
1 5 情報技術の発展
2 6 デジタルにするということ
2 7 コニュニケーションを成立させるもの
2 8 メディアとコミュニケーション,そのツール
2 9 情報をデザインすることの意味
2 10 デザインするための一連の進め方
3 11 コンピュータの仕組み
3 12 外部装置との接続
3 13 基本的プログラム
3 14 応用的プログラム
3 15 アルゴリズムの比較
3 16 確定モデルと確率モデル
3 17 自然現象のモデル化とシミュレーション
4 18 情報通信ネットワークの仕組み
4 19 情報通信ネットワークの構築
4 20 情報システムが提供するサービス
4 21 さまざまな形式のデータとその表現形式
4 22 量的データの分析
4 23 質的データの分析
4 24 データの形式と可視化

 

高等学校教科「情報」は,平成15年度の必履修化以降,専任教員の絶対的不足,免許外教科担任(情報科の教員免許を所有しない),臨時免許の乱発的発行など,教科を担当する教員自体の量および質の問題が一向に解決されていません(参照:情報入試研究会のページ).また,現在(2020年3月),現学習指導要領では,情報科は「社会と情報」,「情報の科学」の2科目からの選択必履修となっており,実際は約8割の学校で,「社会と情報」が行われています.ある意味大きな転換を余儀なくされる,大多数の情報科教員に対して,情報の科学的理解を目的とする情報Iの内容を教授できるための養成がなされているかといえば,甚だ疑問です.

新学習指導要領を見据えた実践報告は,様々な形で見られるようになってきました.しかし,所定の授業時間数の中で新学習指導要領を充足する授業を完遂するためには,すべての単元を効果的かつ横断的に俯瞰できるシラバス設計や授業設計が不可欠になります.

ピクトグラムコンテンツ作成環境「ピクトグラミング」おいては,常にこの解決すべき問題を念頭におきながら開発しています.この環境をデザイン,プログラミング,コンテンツ,データ処理等の複眼的視点から定期的に使用する,ピクトグラムを統一コンセプトとした高等学校情報科の学習環境の実現を目指しています.

高等学校情報科新学習指導要領の記述に,単語「ピクトグラム」は2か所出現しています.1点目は「情報I(2) コミュニケーションと情報デザイン イ(イ) コミュニケーションの目的を明確にして,適切かつ効果的な情報デザインを考えること」の部分で,情報を抽象化する方法としてピクトグラムが取りあげられています.2点目は,「情報II (1)情報社会の進展と情報技術 イ(イ)コミュニケーションが多様化する社会におけるコンテンツ創造と活用の意義について考察すること」の部分で,受け手にとってわかりやすく送り手の意図が受け手に伝わる例としてピクトグラムが記載されています.

このようにピクトグラムは,情報デザイン領域内の位置付けに限定されています.一方で,新学習指導要領中には,『共通教科情報科では,「情報に関する科学的な見方・考え方」を「事象を,情報とその結び付きとして捉え,情報技術の適切かつ効果的な活用(プログラミング,モデル化とシミュレーションを行ったり情報デザインを適用したりすること等)により,新たな情報に再構成すること」であると整理されている.』とあリます.ピクトグラムが情報デザイン領域に限定されず,プログラミング,モデル化とシミュレーション等の単元と有機的に関連すれば,情報技術の適切かつ効果的に活用により新たな情報に再構成する手段となり得ると考えられます.

 

 

それぞれの単元の学習に関して,ピクトグラミングの適用可能性について“直接”,“間接”,“教材”の3種類の指標があると考えています.

“直接”とは,学習単元の内容そのものを学習できる適用方式です.以下のような例が挙げられます.

例1:「9:情報をデザインすることの意味」の単元で,ピクトグラム作成課題を通じて考える.

例2:「13:基本的プログラム」の単元で,順次,繰返し,条件分岐などのプログラミングの基礎概念を学ぶ.

例3: Picthon(ピクトグラミングPython版)やJavaScpictを用いて,「14:応用的プログラム」で例示されているソートのプログラムや,「22:質的データの分析」で,与えられたデータを分析する.

“間接“とは,学習単元に関するテーマでピクトグラムコンテンツを生成することで間接的に単元の学習を促進させる適用方式です.以下のような例が挙げられます.

例1:「2:情報セキュリティ」の単元で,啓蒙を目的としたピクトグラム作成課題を通じて情報セキュリティについて考える.例えば,次の例は,ショルダーハッキングを表現したピクトグラムです.

例2:「24:データの形式と可視化の単元」で,与えられたデータに対応するインフォグラフィックを作成する.例えば,次の例は,URLで参照できるデータファイルを元に,各項目の数量を人型ピクトグラムの表示数により表現しています.

“教材”とは,学習教材の挿絵を作成することで,間接的にに単元の学習を促進させる適用方式です.こちらは作られるピクトグラムがイラスト的意味合いである点が間接と異なります.以下のような例が挙げられます.

例1:「4:情報社会におけるコミュニケーションのメリット・デメリット」の単元で,情報の拡散をイメージしたイラスト画像を作成する.例えば,次の例は,情報の拡散をイメージしたイラストを作成した例です.このようなイラスト作成の視点であれば,任意の単元に適用可能できます.

 

実は,ピクトグラミングの目的の一つは,一斉教授方式からの転換です.教員と学習者の関係を人型ピクトグラムを介した間接的なインタラクションに限定し,同調的学習に根ざしたピクトグラムの創作・表現活動を基本として,限られた時間数で情報Iの学習単元を網羅的に学習できる環境の実現です.これについてはまた別の機会に書いてみようと思います.

Lesson 5 意思決定する人型ピクトグラム (条件式を使わない簡単版)

posted in: 開発者ブログ | 0

意思決定する人型ピクトグラム (条件式を使わない簡単版)

実行ごとに異なる処理を書いてみよう

日常生活において,人は条件によって異なった意思決定をします.

例えば,「もし,明日晴れならばピクニックに行こう」「もし,財布の中に5000円以上あるなら買おう」などです.つまり条件によって実行する命令を変えたいときです.その場合は,IF命令を使います.

 

IF命令の様式と処理は以下の通りです.END命令とセットで用います.実際には,exp1は実数値以外にも,条件式と呼ばれる式でもいいのですが,今回は条件式は省きます.

命令の様式 処理
IF exp1 その実数値の確率で対応するELSEIFまたはELSEまたは ENDまでの命令を実行する.
END 条件文,または繰返し,または定義の終了.

 

例として,以下のコードを実行すると左手を挙げた後、1/2 の確率で手を振ります。

RW LUA -140 1 // 左手を挙げる
IF 0.5 // 50%の確率で
// 左手を振る
RW LLA -60 0.3
RW LLA 60 0.3
END

IF命令は,複数の条件を列挙したり,条件を満たさないときの処理を同時に記述できます.新たに
ELSEIF命令,ELSE命令を紹介します.

命令の様式 処理
IF exp1 もし 条件式exp1が真ならば対応するENDまでの命令を実行する.
ELSEIF exp2
もし対応する先述のIFまたはELSEIFの条件が全て満たされなくて,かつexp2の実数値の確率で対応するELSEIFまたはELSEまたはENDの直前までの命令を実行する.
ELSE
もし対応する先述のIFまたはELSEIFの条件が全て満たされない場合,対応するENDまでの命令を実行する.
END 条件文,または繰返し,または定義の終了.

 

例として,人型ピクトグラムが16 拍子の踊りをするプログラムを示します。各拍それぞれで,50%の確率で「左脚を上げ下げ」15%=(1-0.5)×0.3の確率で「右腕を上げ下げ」,35%=(1-0.5)×(1-0.3)の確率で「左腕を上げ下げ」します.

REPEAT 16
  IF 0.5 
    RW LUL 90 0.2 // 左脚を上げ下げする
    RW LUL -90 0.2
  ELSEIF 0.3
    RW RUA 90 0.2 // 右腕を上げ下げする
    RW RUA -90 0.2
  ELSE // その他の場合は
    RW LUA 90 0.2 // 左腕を上げ下げする
    RW LUA -90 0.2
  END
END

 

挑戦状

5回目の挑戦状です。挑戦状は、あなたがやりたいと思うところからやってください。チャレンジ1から順に取り組む必要はありません。また、全てのチャレンジに取り組む必要もありません。あなたがやりたいチャレンジに取り組んでください。

 

チャレンジ1 腕を上げ下げさせよう

次の (a) から (c) の条件を満たすプログラムを作成してみよう。
(a) 5 分の 4 の確率で 1 秒かけて左腕を 120 度時計回りに回転する。
(b) 10 分の 3 の確率で 1 秒かけて右腕を 120 度反時計回りに回転する。
(c) (a) の動作と (b) の動作は同時に行われる。 左腕を上げる行為と、右腕を上げる行為はそれぞれ別々に判断される。

 

チャレンジ2 ダンサー

30 拍からなるダンスをします。1 拍は 0.6 秒とします。最初は 1 拍目、最後は 30 拍目です。各拍それぞれで,次に示す(1)から(4)のいずれの動作するか決定します.各動作の選択される確率は,(1)は0.4の確率,(2)は0.3の確率,(3)は0.2の確率,(4)は0.1の確率です..
(1) 最初の 0.3 秒で左腕を -120 度、 右腕を 120 度それぞれ同時に回転し、その後 0.3 秒で左腕を 120 度、右腕を -120 度それぞれ同時に 回転します。
(2) 最初の 0.3 秒で左腕を -120 度回転し、 その後 0.3 秒で左腕を 120 度回転します。
(3) 最初の 0.3 秒で右腕を 120 度回転し、 その後 0.3 秒で右腕を 120 度回転します。
(4) 最初の 0.3 秒で左足を -10 度回転し、 その後 0.3 秒で左足を 10 度回転します。

チャレンジ3 オリジナルダンサー

条件分岐(IF)と繰り返しを使ったオリジナル作品を作ってみよう。

 

次はレッスン6 です.

Lesson 6 人型ピクトグラム画家になる

 

 

本テキストの著作権は青山学院大学 社会情報学部 伊藤一成に帰属します。
© 青山学院大学 社会情報学部 伊藤一成研究室 All rights reserved.

[ピクトグラミングシリーズ] 座標指定によるグラフィックス描画方式に対しての「円」描画命令の追加,および円をマウス操作のみでも描画できるようにしました.対応する円命令も自動的にプログラムに挿入されます.#pictogramming #ピクトグラミング

ピクトグラミングでは,次に示す3通りの描画方式をサポートしており,(a)「人型ピクトグラムの体の部位の移動の履歴で描画」する方式,「(b)人型ピクトグラム自身の移動の履歴で描画」する方式(タートルグラフィックスに相当)では円を描くことができましたが,一般的なプログラミング言語で採用されている「(c)座標を指定して描画」では円を描く機能はあえて実装していませんでした.今回これを実装いたしました.標準のピクトグラミングPicthonJavaScpict, Block Pictogramming(日本語版英語版いずれも)が対応されています.以下標準のピクトグラミングを例に説明しますが,他についても同様です.

追加された命令の様式は以下の通りです.

命令の様式 処理
O arg1 arg2 arg3 arg4 [arg5] 中心座標(arg1,arg2),幅 arg3, 高さ arg4,中心座標を中心に反時計回りに arg5 度回転した楕円を描く.arg5 が 省略された時は,arg5に0が入力されているものとして取り扱う.

 

標準のピクトグラミングにおける各言語での命令表記は以下になります.

英語表記 英語 日本語 にほんご
O Oval えん

 

さらに円の描画も,ピクトグラム表示領域に対するマウスドラッグ操作でできるようにしました.下の表にあるように,人型ピクトグラムが表示されている以外の場所を,右クリックでドラッグすると,ドラッグ開始時の座標を中心点とする楕円を描くことができます.またマウスで操作した場合においても,対応する「円描画命令」が自動的にプログラムに挿入されます.

 

ドラッグ開始時のマウスの座標 ドラッグ開始時におけるマウス操作 操作
人型ピクトグラムの表示領域内 左クリック 人型ピクトグラムの対応する部位を回転
右クリック 人型ピクトグラムの平行移動
人型ピクトグラムの表示領域外 左クリック 線分の描画
右クリック 楕円の描画
長押し 人型ピクトグラムの向いている方向の変更(正面と側面)

 

このマウス操作による「円の描画」は,人型ピクトグラムへの様々なマウス操作(回転,平行移動等)が有効になっている場合に限りますので,マウス操作を有効にしたいときは,下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください.

 

 

以下のようなピクトグラムもマウス操作だけで作成できるようになりました.

注: 2020/03/16現在 このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます).原因を調査し改善します.

注: 2020/03/16 「このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます).原因を調査し改善します.」について解決しました.