「ピクトグラフィング (Pictographing)」は,ピクトグラムを構成素とするピクトグラフ生成アプリケーションです.ピクトグラフは,ピクトグラムと同義で使用されることもあるが,イラストやシンボルを構成素とする統計図表のことをいいます.数量の概念の学習など小学校の学習内容に関する機能から,クエリによるデータ操作や,WebAPIなどの高等学校情報科の学習単元で利用できる機能まで有しています.

画面は,大きく3つの領域で構成されています.領域Aはグラフ化したいデータを入力する「データ入力領域」,領域Bは任意の姿勢の人型ピクトグラムを作成できる「人型ピクトグラム作成領域」,領域Cはピクトグラフを出力する「ピクトグラフ出力領域」です.

 

 

データ入力

データ入力は,領域A「データ入力領域」使います.

領域A「データ入力領域」では,項目のラベル名を入力する「ラベル名入力ボックス」,項目の数量を入力する「数量入力ボックス」,適用させる人型ピクトグラムの姿勢を「ピクトグラム反映ボタン」,項目を削除する「項目削除ボタン」,新たな項目を追加する「項目数追加ボタン」,人型ピクトグラム1体分が表す数量を入力する「単位量入力ボックス」,入力した情報からグラフを作成する「グラフ作成ボタン」で構成されています.

項目数追加ボタンを押下すると新たな項目を追加されます.項目ごとに配置している「項目削除ボタン」を押下するとその項目を削除します.領域A「データ入力領域」のピクトグラフ作成に使用する各項目の人型ピクトグラムは「ピクトグラム反映ボタン」に表示されている姿勢を適用する.「人型ピクトグラム反映ボタン」の任意の位置をクリックすると,次に説明する領域B「人型ピクトグラム作成領域」の「ピクトグラム表示キャンバス」に表示されている姿勢を反映されます.

領域A「データ入力領域」の入力作業が完了し、「グラフ作成ボタン」を押下すると,領域C「ピクトグラフ出力領域」にピクトグラフを出力します.ピクトグラフに表示する人型ピクトグラムの出力人数は領域A「データ入力領域」の「数量入力ボックス」に入力された値(以下,数量)と「単位量入力ボックス」に入力された値(以下,単位量)から決定されます.単位量が入力されていない場合,ピクトグラフから各項目の数量が認識しやすい構図になるように,単位量を自動的に設定されます.

人型ピクトグラム作成

人型ピクトグラムの作成は,領域B「人型ピクトグラム作成領域」を使って行います.

領域B「人型ピクトグラム作成領域」はピクトグラムを表示する,人型ピクトグラムの向きを選択する「向き決定ラジオボタン」,キャンバスに表示された姿勢を保存する「保存ボタン」,保存した人型ピクトグラムを呼び出す「ボタン群」,各部位の角度を入力する9個の「角度入力ボックス」で構成されています.

「角度入力ボックス」には度数法による角度を入力します.正の数であれば反時計回りに,負の数であれば時計回りに,入力された角度だけ回転します.「角度入力ボックス」に角度を入力すると,入力値に応じて随時姿勢を反映されます.

「向き決定ラジオボタン」によって,人型ピクトグラムの向きを「正面」,「側面」の2通りから選択でき,ISO 3864付録で提示されている正面,側面用デザインの人型ピクトグラムを表示します.

作成した人型ピクトグラムは保存できます.「保存ボタン」を押下すると,「ピクトグラム表示キャンバス」に描かれている姿勢情報を保存します.保存した人型ピクトグラムは領域B「人型ピクトグラム作成領域」内の「ボタン群」から呼び出すことができます.姿勢の画像を縦1列に表示し,呼び出したい姿勢の画像を押下すると画像と同じ姿勢を「ピクトグラム表示キャンバス」に表示されます.保存した人型ピクトグラムは一度ブラウザを閉じても,同一PCの同一ブラウザであれば,再度アクセスした場合でも利用できます.

 

拡張機能

パラメータ level=3を追加して以下のURLでアクセスすると拡張機能を使用することができます.

https://pictogramming.org/apps/humanpictograph/?level=3

下の図のように領域A「データ入力領域」に「データ操作領域」及び,アップロードボタン,共有ボタンが追加されます.

拡張機能その1:データベース操作機能

「データ操作領域」では生成されるピクトグラフの表示カラムの指定や,条件を満たすレコードのみの表示など,入力データ群をデータベースとみなし,データベース操作に相当する文字列を設定できます.これにより,ピクトグラフの出力をカスタマイズできます.表示するカラム,条件などは,複数のプルダウンとテキスト入力により指定します.

拡張機能その2:CSVファイルの読み込み機能

「アップロード」ボタンを押すとファイル選択ダイアログが表示されます.CSV形式のファイルを読み込んで,一括のデータ入力ができます.読み込まれるファイルのフォーマットは以下の通りです.

・1行目を無視(属性名が入ってる前提だが、アプリでは使用しない)
・1列目をラベルに、2列目を数量に利用する(3列目以降入っていても問題はないが、使用しない)
・2列目に文字列が入っていた場合、エラーを出力する(1列目は入力する)
・画像は全て正面直立を適用

拡張機能その3:WebAPI経由でのアクセスによるピクトグラフ生成機能

ピクトグラフを作成した段階で,「共有ボタン」を押すと「データの情報を含むURLが取得できる.URL入力データをパラメータとして付与したURL をアプリケーションから,取得できる機能である.このURLをアクセスすることより,特定のデータが読み込まれている状態から実習を開始できる.

また,「共有ボタン」を押すとiframe要素の取得も可能である.URL入力データをパラメータとして付与したURLおよびピクトグラフ領域を切り取ったHTMLのiframe要素で記述された文字列をコピーできる機能です.この文字列を他のWebページのHTMLソースの特定領域に挿入することで,本Webサービスで生成される「ピクトグラフ出力領域」のみを埋め込むことができる.

 

(アプリケーション開発者)

高橋伶奈

(アプリケーション)

https://pictogramming.org/apps/humanpictograph/

https://pictogramming.org/apps/humanpictograph/?level=3

(文献)

高橋伶奈,御家雄一,伊藤一成:人型ピクトグラムを構成素とするピクトグラフ生成アプリケーション「Human Pictograph」の実装,2022年度情報処理学会関西支部支部大会, (2022.09.18)

高橋伶奈,御家雄一,伊藤一成:ピクトグラフィング -データ活用の学習を目的としたピクトグラフ生成アプリケーションの実装-,第15回データ工学と情報マネジメントに関するフォーラム DEIM2023, (2023.03)

Rena Takahashi, Yuichi Oie, Kazunari Ito, PICTOGRAPHING – Implementation of a Pictograph Generation Application for Learning Data Utilization -,The 16th International Conference on Computer Science and Information Technology (ICCSIT2023) pp.1-10 (2023)