2024-02-21 ピクトグラミングシリーズの新しいアプリケーション「ピクタグラミング」を公開しました.

日頃からピクトグラミングシリーズをご愛顧いただき,まことにありがとうございます.

 

ピクトグラミングシリーズの新しいアプリケーション「ピクタグラミング」を公開しました.青山学院大学社会情報学部伊藤一成研究室所属の学部3年生(2024年2月現在)木下倭が中心で開発しています.

タグ集合 HPML(Human Pictogram Markup Language) を用いた構造化文書の形式で,ピクトグラムを制作できます.HTMLやCSSを併用することでピクトグラムを含むWebページ風コンテンツも作成できます.

授業利用等でお役立てください.

 

ピクトグラミングサイトの「トップページ」からアクセスできます.

URLはこちらです. https://pictogramming.org/apps/pictagramming/

使い方マニュアルはこちらです.

 

参考文献

1.木下 倭,高橋伶奈,伊藤 一成:ピクタグラミング −ピクトグラムの作成を通じたマークアップ言語学習アプリケーションの試作−,2023年度情報処理学会関西支部支部大会, (2023.09.24) (支部大会奨励賞受賞)

2. 木下 倭,高橋伶奈,伊藤一成:ピクタグラミング −ピクトグラムの作成を通じたマークアップ言語学習アプリケーションの開発とその評価-,第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024.03)

2024-02-20 ソートアルゴリズムの学習アプリケーション「人型ピクソートグラム」にソースコード表示機能(共通テスト用プログラム表記,Python言語)を追加しました.

日頃からピクトグラミングシリーズをご愛顧いただき,まことにありがとうございます.

 

ソートアルゴリズムの学習アプリケーション「人型ピクソートグラム」にソースコード表示機能(共通テスト用プログラム表記,Python言語)を追加しました.「人型ピクソートグラム」は青山学院大学社会情報学部伊藤一成研究室所属の渡辺大智が中心に開発しています.

詳しくは,使い方ページ( https://pictogramming.org/?page_id=3754 )をご覧ください.

 

(アプリケーションURL)

「3. ソースコード表示機能」を使わない場合:           https://pictogramming.org/apps/humanpicsortgram/

「3. ソースコード表示機能」を使う場合:                  https://pictogramming.org/apps/humanpicsortgram/?program

 

(学会発表)

1. 渡辺大智,御家雄一,伊藤一成:人型ピクトグラムを用いたソートアルゴリズムを学ぶアプリケーション「人型ピクソートグラム」の実装,2022年度情報処理学会関西支部支部大会, (2022.09.18)

2. 渡辺大智, 御家雄一, 伊藤一成:‹人型ピクトグラムを用いたソートアルゴリズムを学ぶ アプリケーション「人型ピクソートグラム」の拡張と評価,第15回データ工学と情報マネジメントに関するフォーラム DEIM2023, (2023.03) (学生プレゼンテーション賞受賞)

3. Taichi Watanabe, Yuichi Oie, Kazunari Ito: An Application for Learning Sorting Algorithm using Human Pictograms, IMCOM(International Conference on Ubiquitous Information Management and Communication) 2023, (2023.01)

4. 渡辺大智,石井幹大,伊藤一成:アニメーションおよびソースコード表示を活用したソートアルゴリズム学習アプリケーションの開発,第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024.03)

ピクタグラミング 使い方

posted in: 開発者ブログ | 0

学習用テキスト

こちらに使い方も含めて記載しています.

こちらをダウンロードください(pdf).

 

参考文献

1.木下 倭,高橋伶奈,伊藤 一成:ピクタグラミング −ピクトグラムの作成を通じたマークアップ言語学習アプリケーションの試作−,2023年度情報処理学会関西支部支部大会, (2023.09.24) (支部大会奨励賞受賞)

2. 木下 倭,高橋伶奈,伊藤一成:ピクタグラミング −ピクトグラムの作成を通じたマークアップ言語学習アプリケーションの開発とその評価-,第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024.03)

 

人型ピクサーフィング 使い方

画面構成

領域Aは隣接行列の値,及び減衰係数を設定する「ネットワークグラフ設定領域」,領域BはPageRankの計算式を表示する「行列式表示領域」,領域Cは人型ピクトグラムをノードとするネットワークグラフをアニメーション表示する「ネットワークグラフ表示領域」である.この3領域から構成される.

領域A「ネットワークグラフ設定領域」

領域A「ネットワークグラフ設定領域」では,ノード数を選択する「ノード数選択ボックス」,隣接行列を入力する「隣接行列入力ボタン群」,隣接行列入力ボタン群をランダムに自動入力する「ランダム入力ボタン」,減衰係数を入力する「減衰係数入力ボックス」,各ノードのPageRankの値を1ステップ更新し,対応するアニメーションを再生する「進むボタン」,PageRankの値を更新し続けるアニメーションを再生,及び一旦停止する「再生制御ボタン」で構成している.

 

「ノード数選択ボックス」は,ノード数を3から6までの値からなるプルダウンメニューから選択する.選択すると,「隣接行列入力ボタン群」の行数,及び列数が選択した値になる.なお初期状態では,「ノード数選択ボックス」,及び「隣接行列入力ボタン群」の行数,列数は3である.「隣接行列入力ボタン群」の各ボタンのラベルは初期状態では0であり,ボタンを押下するとラベルが0の場合は1に,1の場合は0に変化する.ただし,対角成分の一つに相当するボタンは押下しても値は0から変化しない.「ランダム入力ボタン」を用いると,「接続行列入力ボタン群」のボタンをランダムで自動的に押下する.「減衰係数入力ボックス」には減衰係数が格納されており,初期状態では0.85が設定されている.行列の入力を完了したうえで,「進むボタン」または「再生制御ボタン」を押下すると,ページランクの計算,及びアニメーションが開始する.

 

領域B「行列式表示領域」

領域B「行列式表示領域」では,PageRankの計算では,左辺に計算結果,右辺に計算式が表示される.イテレーションが進むごとにページランクの計算結果,及び一つ前のページランクの更新値を表示する.

行列式の要素をマウスオーバーすると,マウスオーバーした要素とキャンバスの要素をマークする.下図は,行列式をマウスオーバーした例である.行列式左辺のPageRankの値をマウスオーバすると,キャンバス上の対応するノードをハイライトする.行列式右辺における遷移確立行列の特定の値をマウスオーバーすると,下図のように,その値と減衰係数,対応する行列の要素,及びひとつ前のステップのPageRankの値をハイライトすると同時に,キャンバス上の対応するリンクの色を変更し,行列式における各リンクを辿って伝播する数値と数式表現の対応がわかりやすいようにする.

領域C「ネットワーク グラフ表示領域」

領域C「ネットワークグラフ表示領域」では,リンクを矢印,ノードとユーザの移動を人型ピクトグラムで表現している.ユーザの移動は,リンク上の移動を黒色,テレポーテーションを灰色で示している.ノードピクトグラム上の数値はそのノードのPageRankの値を示しており,ステップの更新とともに変化する.リンク上を移動する黒色で示した人型ピクトグラムは,隣接行列においてリンクで繋がれたノード上を移動する数量を人型ピクトグラムの大きさで表している.

キャンバス上の要素に対してマウスオーバーすると,領域B「行列式表示領域」の対応する部分をハイライトする.ノードピクトグラムをマウスオーバーすると,行列式におけるそのノードのPageRankの値をマークし,リンクをマウスオーバーすると,リンクを辿って移動する数量の算出に使用される値群,つまり減衰係数,対応する遷移確率行列の値,対応する1/N行列の値,及びひとつ前のステップのPageRankの値をハイライトする.

領域A「ネットワークグラフ設定領域」にある,「隣接行列入力ボタン群」の直接入力,または「ランダム入力ボタン」によって「隣接行列入力ボタン群」の値が変えたとき,キャンバスにノードとリンクを描画し,ステップの値を0にする.再生中にノード数や隣接行列の入力値が変わると再生を自動で停止し,変更後のノードとリンクを描画する.

 

参考文献

高橋伶奈,伊藤一成:ランダムサーファーモデルの学習アプリケーション「人型ピクサーフィング」の実装と評価,第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024)

2024-02-08 ランダムサーファーモデルの学習アプリケーション 「人型ピクサーフィング」を公開しました.

posted in: 開発者ブログ | 0

日頃からピクトグラミングシリーズをご愛顧いただき,まことにありがとうございます.

 

ランダムサーファーモデルの学習アプリケーション 「人型ピクサーフィング」を公開しました.高橋玲奈が中心に開発しています.

Web情報検索における代表的なアルゴリズムの一つであるPageRankアルゴリズムについて視覚的に表示し,さらにアプリケーションの利用を通じて行列やベクトルなどの線形代数の基礎を学べるのが特徴です.

ピクトグラミングサイトの「関連アプリケーション」の項目の中からアクセスできます.

URLはこちらです. https://pictogramming.org/apps/humanpicsurfing/

 

参考文献

高橋伶奈,伊藤一成:ランダムサーファーモデルの学習アプリケーション「人型ピクサーフィング」の実装と評価,第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024)

[ピクトグラミングシリーズ] 2023-08-31 Python風の記法で書かれたビジュアルブロックでプログラミングできる「PICTO (Pseudocode for Informatics of the Common Test Optimizer)」を公開しました.

Python風の記法で書かれたビジュアルブロックを組み合わせてプログラミングできる「PICTO (Pseudocode for Informatics of the Common Test Optimizer)」を公開しました.

できる処理はピクトグラミングやピクトッチと同様です.人型ピクトグラムとの対話を通じたさりげない体験を通じて,Python風の記法に慣れ親しむことができます.高等学校情報科の実習に最適です.そのうち人型ピクトグラムが,Python風の記法で書かれたプログラムが含まれるテストに関するアドバイス等を語り始めるかもしれません.ピクトグラミングのトップページよりアクセスください.

 

 

サンプルプログラムを直接読み込むこともできます.

 

 

 

 

 

 

 

[ピクトグラミングシリーズ] 2023-04-03 ピクトグラミングシリーズをアップデートしました.

ピクトグラミングシリーズPC版(ピクトグラミング,ピクトッチ,ピクソン,ジャバスクピクト,ピクビー)をアップデートしました.

追加した機能の中から本日は2つだけ紹介します.

 

一つ目は,URLへのコードの埋め込み機能です.

例えば,

ピクトッチで円を描くプログラム

のようにURLにコードや作品タイトルを含めることができます.

また,画面上部のアイコンをクリックすると,クリップボードにコードとタイトルの情報を含んだURLをコピーします.コピーしたURLを使うと上で示したように,直接特定のコードを表示させた状態でアプリケーションを使うことができます.

 

二つ目は,泳ぎ(タートルグラフィック)の画面を,実際に泳いでいるような出力に変更しました.先ほど例示した ピクトッチで円を描くプログラム を実行すると次のような出力になります.

 

他にも色々機能追加しているのですが,それは後々解説していきます.

また,個別のアプリケーションに関しては,

1.ピクトグラミングをIE非対応にし,エディタに他のシリーズと同じCodeMirrorを使うようにしました.

2.ピクトッチのカメラサポートを中止しました.

 

以上です.今後ともピクトグラミングシリーズをよろしくお願いします.

2023-01-26 ピクトグラミングシリーズ第5弾 Picby(ピクビー:Ruby言語版)を公開しました.

Pictogramming(ピクトグラミング),Pictoch(ピクトッチ),Picthon(ピクソン),JavaScpict(ジャバスクピクト)に続くピクトグラミングシリーズ第5弾としてPicby(ピクビー)を公開しました.

 

 

Ruby言語でプログラミングできます.できる処理はピクトグラミングと同様です.他のピクトグラミングシリーズのアプリケーションと同様に全てクライアント側で処理するため安心してお使いいただけます.

 

*「ピクトグラミング」は,ピクトグラムの作成を通じて,プログラミングの諸概念や情報デザインについて学習できる統合型アプリケーションです.「ピクトグラミング」には,「Pictoch(ピクトッチ)」「Picthon(ピクソン)」,「JavaScpict(ジャバスクピクト)」, 「Picby(ピクビー)」の派生アプリケーションもあり,これらをまとめてピクトグラミングシリーズと呼んでいます.授業利用にもぜひお役立てください.誰でも自由に利用できます.サイトのURLは https://pictogramming.org です.

2022-09-16 [関連アプリケーション]「人型ピクソートグラム」及び「人型ピクトグラフ」を公開いたしました.

アプリケーション「人型ピクソートグラム」及び「人型ピクトグラフ」を公開いたしました.通常は,ピクトグラミングのトップページの「関連アプリケーション」の項からアクセスできます.

 

この記事中の「はじめる」ボタンからでもアプリケーションにアクセスできます.

人型ピクソートグラム

 

  

人型ピクソートグラム… シーソーのメタファを用いてソートアルゴリズムについて学習できます.手動操作に加え,代表的なソートアルゴリズムの手順を自動再生することで,視覚的に理解できる機能もあります.伊藤一成研究室所属の渡辺大智さん(学部3年)が開発しています.部品イラストは伊藤一成研究室所属の御家雄一さんが作成しました.

人型ピクトグラフ

 

  

人型ピクトグラフ… 人型ピクトグラムを構成素とする統計図表(ピクトグラフ)を作成できます.算数科・数学科・情報科におけるデータ表現,データ活用の授業を中心にお役立てください.伊藤一成研究室所属の高橋伶奈さん(学部3年)が開発しています.

 

 

(参考文献)

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