2022 年度情報処理学会関西支部 支部大会

D-01

人型ピクトグラムを用いたソートアルゴリズムを学ぶ
アプリケーション「人型ピクソートグラム」の実装
渡辺大智 1 御家雄一 2,3 伊藤一成 1,3
高等学校の必履修科目の 1 つである「情報Ⅰ」では，学習内容の 1 つに問題を解決するための手順や計算方法を指すアルゴリズムがある．アルゴリズムは，講義形式では理解が難しいことが特徴である．さらに，アルゴリズムを踏み込んで教授しようとすると，プログラミングの要素が含まれるため，一層理解が容易でない．そのため，アルゴリズムを理解しやすくするために，整理，並び替えを意味するソートを活用する．ソートは種類が豊富であり，特徴が分かりやすく説明しやすいため，入門としてアルゴリズムを学ぶ際には効果的である．また，人型ピクトグラムを活用することで，自己を投影し，学習者自身が実際にシーソーで遊んだ体験知と結び付けることができる．以上の理由から，「情報Ⅰ」の学習支援となるソートアルゴリズムを学習できる Web アプリケーション“人型ピクソートグラム”を実装したので報告する．

1．はじめにこれらのことを活かし，すべてクライアント側で完結するシングルページアプリケーションとして，学習者の経験ソートアルゴリズムは，高等学校必履修科目「情報Ⅰ」

知を生かしたソートアルゴリズム学習のためのアプリケーの「コンピュータとプログラミング」でアルゴリズムの比ション「人型ピクソートグラム」（以下，ピクソート）を較について学習する際に代表的なアルゴリズムとして採用実装したので報告する．以下 2 章で，実装したアプリケーされている．高等学校情報科「情報Ⅰ」教員研修用教材でションの概要を示し，3 章でまとめる．

は，『問題の解決には様々な方法があり，それらを比較検討し，最善の方法を見つけることの重要性について理解させる』ことを目的として例示されている[1][2]．
アルゴリズムは，講義形式では生徒にその概念を理解させることが難しい．さらに，アルゴリズムは踏み込んで教授しようとすると，プログラミング要素が含まれているため，一層理解が容易でない．そのため，ソートアルゴリズ
ムに関しても，コンピュータを用いない CS アンプラグドの技法を用いた教授法も提案されている[3][4]．
本稿で提案するコンテンツは，天秤と重りを使い，重りを重さ順に並べる過程でソートアルゴリズムを体感し学ぶ手法である．我々の研究グループでも以前，おもりを人型ピクトグラム，天秤をシーソーに変更した Scratch コンテ
ンツを作成している[5]．
提案するコンテンツにも人型のピクトグラムを使用している．ピクトグラムはコンテンツ表現の抽象度の高さから，それを見た人物が自分自身や本人に関わる人物事物など想起させる効果があると言われている．有名な「非常口」ピ
クトグラムのデザインの策定に関わった太田は”走る人型を囲む空間が見る人を包む空間とつながって走る人は見る人の投影になる”と述べ[6]，実際に避難中の人が如何に出口へ向かって走る人型ピクトグラムを見たときに，自身に投影し，同一視するかにデザインの労力が払われた．
1

青山学院大学社会情報学部
青山学院大学大学院社会情報学研究科
3
青山学院大学ピクトグラム研究所
2

2．実装アプリケーション
2.1

概要“ピクソート”のスクリーンショットを図 1 に示す．このアプリケーションには，手動で人型ピクトグラム（以下，ピクト選手）を整列する「手動整列機能」と，自動でピクト選手を整列する「自動整列機能」を実装した．
2.2

手動整列機能の操作手順

ピクソートの手動整列機能の操作手順を，次の(1)〜(4)に示す．
(1) 整列するピクト選手の人数の決定

ピクソートの利用者（以下，利用者）が図 1 の画面左上の「人数選択用プルダウン」から人数を選択すると，その人数分のピクト選手とはかりをそれぞれ横一列に表示す
る．表示するピクト選手とはかりは 1 対 1 の関係で上下に配置するように表示し，まるで人間がはかりの上に乗っているように見せる．人数選択は 2 から 9 人の 8 通りから 1通りを選択させる．「人数選択用プルダウン」で人数を変更すると，表示されていたピクト選手は画面外に一度退場し，選択された人数分のピクト選手が新たに入場する．

⼈数選択プルダウン
速さ選択設定スライダー
⽐較回数表⽰元の隊形に戻るボタン

⽀点部
右着座部
シーソー

選⼿交代ボタン

ピクト選⼿
左着座部

はかり

正解発表アコーディオンボックス

⾃動整列アコーディオンボックス

各種⾃動整列実⾏ボタン

はかりの値を表⽰するボタン
図 1 “ピクソート”のスクリーンショット
表示するピクト選手を個別の個体として識別できるように，

図 1 のようにシーソーの両着座部にピクト選手が着座さそれぞれの字が重複しないアルファベット 1 文字を書いたれた状態を比較状態とする．ここで左の着座部を左着座部，プラカードを首に掛けている．表示した複数人のピクト選

右の着座部を右着座部と呼ぶ．着座部に着目するとピクト

手にはそれぞれ異なる体重を設定し，その体重差をもとに選手が着座した状態と空席の状態の 2 種類が存在し，それ整列を行う．

ぞれ着座状態と空席状態と呼ぶ．左着座部と右着座部が着(2) シーソーによる重さの比較座状態になったとき，すなわち比較状態になったときに比図 1 のスクリーンショットにあるピクト選手とシーソー較回数を 1 だけカウントアップする．比較回数は画面左上を用いて重さ比較をする．比較対象のピクト選手をドラッに常時表示する．また比較状態から右着座部もしくは左着グ操作で移動し，シーソーのいずれかの着座部でドロップ座部が 1 度空席状態になり，比較状態になったときに 1 だすることで着座する．この時，表示するピクト選手のグラけカウントアップする．人数選択を変更する度にカウント

フィックは直立状態からシーソーに着座した状態に変化すを 0 回にリセットする．また，画面左上には号令ボタンをる．ピクト選手が着座すると，それぞれのピクト選手の体2 つ用意している．ボタン 2 つのうち，左側の”選手交代”

重に応じてシーソーが傾く．支点部からの長さに関する思

ボタンは，一度ピクト選手を画面外へ退場させてピクト選案をなくすため，各着座部の近くの一定の領域内でピクト手の選択人数は固定のまま異なるピクト選手を呼ぶことで選手をドロップしたときに，支点部から同一距離の各着座順序をシャッフルする機能を有する．一方で，右側の“元部に着座する．また，着座しているピクト選手をシーソーの隊形に戻る”ボタンは，はかりの上にアルファベット順の着座部ではないところでドロップすると，直立のピクトに整列し直す機能を有する．その際，各ピクト選手に体重選手に戻る．これにより，シーソーに着座しているかいなとして設定されている数値はそのままにしている．この機いかを識別できるようにしている．ソートアルゴリズムの能により，自動整列を見た後に，手動で同じようにソート特徴である 1 対 1 の値の比較を再現するため，ピクト選手の手順を模倣することができるため，ソートの理解を促進の体重の比較は 1 体対 1 体での比較とし，2 体対 1 体や 2 体させることが期待される．さらに，自動整列のアニメーシ対 2 体などの一方が多人数，また両端が多人数での比較は

ョン中は“選手交代”ボタンと“元の隊形に戻る”ボタンできない．ピクト選手が乗っているシーソーの着座部に他を無効化している．これにより，ソートの手順の一連の流のピクト選手を着座させようとするとシーソーに後から乗れを最後まで見ることを促し，自動整列を中断することにせたピクト選手を除外する．除外したピクト選手は，人数よるソート理解の誤りを防ぐことを期待している．左右ど選択の際に乗っていたはかりに自動配置する．

ちらの号令ボタンを押しても，比較回数を 0 回にリセットする．同様に，2.3 節で説明する自動整列時にも比較回数が 0 回にリセットする．
(3) 並べ替え

2.3

自動整列機能自動整列機能実行時のスクリーンショットを図 4 に示
す．
テレビ画⾯

利用者は，ピクト選手をドラッグアンドドロップで並べ替えて，それぞれはかりに乗せることができる．シーソーに着座したときと同様に，はかりの近くの一定の領域内で位置確定時に背景を⻩緑⾊にする

ピクト選手をドロップしたときに，座標指定したはかり上ピクト監督の中央に自動配置するようにしている．この自動配置により，はかりにピクト選手を乗せたことを認識させている．
この配置が次の(4)整列判定の際の判定要素となる．
(4) 整列判定

利用者が手動，もしくは自動でピクト選手を昇順に並べ選択中のソート名表⽰

たら判定する．判定は，画面左下にある判定するボタン

図 4 自動整列機能実行時のスクリーンショットと，正誤，最終比較回数を表示したものを格納するアコーディオンボックス（以下，正解発表アコーディオンボック

自動整列機能では，整列アルゴリズムに則ったアルゴリス）を開いて“はかりを公開する”ボタンを押し，左からズムをアニメーション（以下，アルゴリズムアニメーショ

ピクト選手の体重の値が昇順になるように並べられているン）で確認することができる．自動整列の開始時に，アプかを判定する．判定すると，はかりの付箋がはがれて乗っリケーション画面の下部に表示した 2 つのアコーディオンているピクト選手の体重が公開される．“はかりを公開す

ボックスを除く操作範囲を，テレビ画面を模した枠（以る”ボタンを押す前のはかりと押した後のはかりの画像を下，テレビ画面）で囲む．テレビ画面の右側に人型ピクト

図 2 に示す．

グラム（以下，ピクト監督）を配置し，テレビ画面内の各ソートによる整列を操作しているように表示している．これにより，利用者に代わり，ピクト監督がアプリケーションを操作していることを認識させている．これは，利用者

図 2 はかりの体重公開前後（左が公開前，右が公開後）がピクト監督を模倣するように促している．また，ピクト選手を移動させた状態で自動整列を実行すると，ピクト選判定時には，ピクト選手の体重の昇順に並べられているかに関する正誤の表示と，最終比較回数を表示する．正解した場合と間違えた場合の表示例を図 3 に示す．

手はアルファベット順にはかりの上に戻ってから比較を行う．
本アプリケーションの自動整列機能で実装されている整列アルゴリズムは選択ソート，挿入ソート，クイックソー
トの 3 種類である．実行画面右下に表示されている自動整列用のアコーディオンボックス（以下，自動整列アコーデ

図 3 判定時の表示例（左が正解の場合，右が不正解の場合）ィオンボックス）を開くと，各ソートのボタンを表示する．
各ソートの自動整列は 1 つを実行すると，自動整列ボタンの右に実行中のソート名が表示される．そうすることで，アコーディオンボックスを採用することで，Web ページ
内の情報量を調節し，必要に応じて使用する情報のみを表示できる．正解発表アコーディオンボックス内の“はかりを公開する”ボタンは，ピクト選手をすべてのはかりに乗せた状態の時のみ押すことができるため，判定を行うためにはピクト選手をはかりに乗せることが必要であることを促す．判定終了後にピクト選手の操作を不能にし，手動，または自動の並べ替えを終了する．

実行しているソートを認識させる．また，自動整列実行時は，ピクト選手を操作することを不能にし，利用者の操作を禁止している．自動整列が終了後に画面左上にある“選手交代”ボタンか“元の隊形に戻る”ボタンを押すか，左上の人数選択を行うまで，各ソートのボタンを無効化している．自動整列終了時にも自動整列アコーディオンボック
スにある各ソートボタンを無効化にすることで，選択した人数での比較を強制的に終了させている．
それぞれのソートのアルゴリズムについては次に示す．
(1)選択ソートによる自動整列機能

自動整列アコーディオンボックスを開いて「選択ソート」と書かれたボタンを押すと，選択ソートのアルゴリズ
ムに基づいてピクト選手を自動で並べ替えるアルゴリズムアニメーションが開始する．
本アプリケーションでは 3 種類のアルゴリズムアニメーションを実装した．選択ソートは体重の値が最も大きいピクト選手から決定していくアルゴリズムである．ソートの手順はすべてのピクト選手を比較して最も重いものを決定

4．まとめと今後の展望

人型ピクトグラムを用いたソートアルゴリズムを学ぶア
プリケーション「人型ピクソートグラム」の実装した．
今後は，授業での利活用や評価実験を行い，本アプリケーションの有効性を検証する予定である．
謝辞
本研究は JSPS 科研費 21H03560 の助成を受けたものです．

し，それ以外のもので次に重いものを決定していく．これを繰り返し，整列する．はかりに乗せる位置が確定したピクト選手は，背後の色を変えて視覚的に認識させる．ピク
ト選手の位置が確定した際の表示は(2)挿入ソートによる自参考文献[1]

http://www.mext.go.jp/component/a_menu/education/micro_detail

動整列機能と(3)クイックソートによる自動整列機能の実行/__icsFiles/afieldfile/2018/07/11/1384661_6_1_2.pdf （2022 年 7時でも同様である．
図 1 の画面左上にある「速さ選択用スライダー」の位置

月 14 日閲覧）[2][3]の途中で速さを変更可能にすることで，必要な部分のみ注意深く指定したソートのアルゴリズムを観察することができる．速さ選択は手動整列時のシーソーに着座してシーソーが傾くまでの速さ，および，はかりの中央に自動配置さ[4]れる速さを調整している．速さは「速さ選択用スライダー」で常に調整できる．速さ選択は(2)挿入ソートによる[5]

自動整列機能と(3)クイックソートによる自動整列機能の自動整列アコーディオンボックスを開いて「挿入ソート」と書かれたボタンを押すと，挿入ソートのアルゴリズムに基づいてピクト選手を自動で並べ替えるアルゴリズムアニメーションを開始する．本アプリケーションでは左から順に右どなりのピクト選手と比較して，軽い場合は更に左どなりのピクト選手と比較をする．自身のほうが重い場合には比較したピクト選手の右側に挿入する．また，自身の方が軽い場合には比較したピクト選手の左側に挿入する．これを繰り返し並べ替える．
(3)クイックソートによる自動整列機能

自動整列アコーディオンボックスを開いて「クイックソート」と書かれたボタンを押すと，クイックソートのアルゴリズムに基づいてピクト選手を自動で並べ替えるアルゴ
リズムアニメーションを開始する．本アプリケーションでは中央の位置のピクト選手（人数が偶数の場合には，中央の 2 人の中の右側）を基準として，他のピクト選手を，基準より重いグループと軽いグループに分類し，それぞれ右端と左端にまとめて配置する．これをグループごとに繰り返し，並べ替える．

100013300_005.pdf（2022 年 7 月 14 日閲覧）
T. C. Bell, J. Alexander, I. Freeman, and M. Grimley.
Computer Science Unplugged: School students doing realcomputing without computers. The New Zealand Journal ofApplied Computing and Information Technology, 13(1):20‒
29, 2009.
兼宗 進（監訳）：コンピュータを使わない情報教育 アンプ
ラグド・コンピュータ・サイエンス，イーテキスト研究所(2007).
玉城 亮治，吉田 葵，伊藤 一成：人型ピクトグラムを用いたソートアルゴリズムを学ぶデジタルコンテンツの実装と評
価，情報処理学会第 79 回全国大会, (2017)

実行時でも使用可能である．
(2)挿入ソートによる自動整列機能

高等学校情報科「情報Ⅰ」教員研修用教材
https://www.mext.go.jp/content/20200722-mxt_jogai02-を変更することでアニメーションの速さを変更できる．速さは，遅い，普通，速いの 3 段階にしている．自動整列時

平成 30 年告示高等学校学習指導要領[6]

太田幸夫: 国際安全標識ピクトグラムデザインの研究
http://www.tamabi.ac.jp/soumu/gai/hojo/seika/2003/kyoudouota1.pdf （2022 年 7 月 14 日閲覧）