日頃からピクトグラミングシリーズをご愛顧いただき，まことにありがとうございます．
ピクトグラムを含むWebページ風コンテンツが簡易に作成できるアプリケーション「ピクタグラミング」をアップデートしました．今回，タグ集合 HPML(Human Pictogram Markup Language) の仕様を見直しました．
タグ集合 HPML(Human Pictogram Markup Language) を用いた構造化文書の形式で，ピクトグラムを制作できます．HTMLやCSSを併用することでピクトグラムを含むWebページ風コンテンツも作成できます．
授業利用等でお役立てください．
アプリケーションのURLはこちらです．
https://pictogramming.org/apps/pictagramming/
また使い方ページ
もアップデートいたしました．具体的なアップデートにつきましては，こちらをご参照ください．
日頃からピクトグラミングシリーズをご愛顧いただき，まことにありがとうございます．
ピクトグラミングシリーズの新しいアプリケーション「ピクタグラミング」を公開しました．青山学院大学社会情報学部伊藤一成研究室所属の学部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)
日頃からピクトグラミングシリーズをご愛顧いただき，まことにありがとうございます．
ソートアルゴリズムの学習アプリケーション「人型ピクソートグラム」にソースコード表示機能(共通テスト用プログラム表記，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)
4. 渡辺大智，石井幹大，伊藤一成：アニメーションおよびソースコード表示を活用したソートアルゴリズム学習アプリケーションの開発，第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024.03)
こちらに使い方も含めて記載しています．
1．木下 倭，高橋伶奈，伊藤 一成：ピクタグラミング −ピクトグラムの作成を通じたマークアップ言語学習アプリケーションの試作−，2023年度情報処理学会関西支部支部大会， (2023.09.24) （支部大会奨励賞受賞）
2. 木下 倭，高橋伶奈，伊藤一成：ピクタグラミング −ピクトグラムの作成を通じたマークアップ言語学習アプリケーションの開発とその評価-，第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024.03)
領域Aは隣接行列の値，及び減衰係数を設定する「ネットワークグラフ設定領域」，領域BはPageRankの計算式を表示する「行列式表示領域」，領域Cは人型ピクトグラムをノードとするネットワークグラフをアニメーション表示する「ネットワークグラフ表示領域」である．この3領域から構成される．
領域A「ネットワークグラフ設定領域」では，ノード数を選択する「ノード数選択ボックス」，隣接行列を入力する「隣接行列入力ボタン群」,隣接行列入力ボタン群をランダムに自動入力する「ランダム入力ボタン」，減衰係数を入力する「減衰係数入力ボックス」，各ノードのPageRankの値を１ステップ更新し，対応するアニメーションを再生する「進むボタン」，PageRankの値を更新し続けるアニメーションを再生，及び一旦停止する「再生制御ボタン」で構成している．
「ノード数選択ボックス」は，ノード数を3から6までの値からなるプルダウンメニューから選択する．選択すると，「隣接行列入力ボタン群」の行数，及び列数が選択した値になる．なお初期状態では，「ノード数選択ボックス」，及び「隣接行列入力ボタン群」の行数，列数は3である．「隣接行列入力ボタン群」の各ボタンのラベルは初期状態では0であり，ボタンを押下するとラベルが0の場合は1に，1の場合は0に変化する．ただし，対角成分の一つに相当するボタンは押下しても値は0から変化しない．「ランダム入力ボタン」を用いると，「接続行列入力ボタン群」のボタンをランダムで自動的に押下する．「減衰係数入力ボックス」には減衰係数が格納されており，初期状態では0.85が設定されている．行列の入力を完了したうえで，「進むボタン」または「再生制御ボタン」を押下すると，ページランクの計算，及びアニメーションが開始する．
領域B「行列式表示領域」では，PageRankの計算では，左辺に計算結果，右辺に計算式が表示される．イテレーションが進むごとにページランクの計算結果，及び一つ前のページランクの更新値を表示する．
行列式の要素をマウスオーバーすると，マウスオーバーした要素とキャンバスの要素をマークする．下図は，行列式をマウスオーバーした例である．行列式左辺のPageRankの値をマウスオーバすると，キャンバス上の対応するノードをハイライトする．行列式右辺における遷移確立行列の特定の値をマウスオーバーすると，下図のように，その値と減衰係数，対応する行列の要素，及びひとつ前のステップのPageRankの値をハイライトすると同時に，キャンバス上の対応するリンクの色を変更し，行列式における各リンクを辿って伝播する数値と数式表現の対応がわかりやすいようにする．
領域C「ネットワークグラフ表示領域」では，リンクを矢印，ノードとユーザの移動を人型ピクトグラムで表現している．ユーザの移動は，リンク上の移動を黒色，テレポーテーションを灰色で示している．ノードピクトグラム上の数値はそのノードのPageRankの値を示しており，ステップの更新とともに変化する．リンク上を移動する黒色で示した人型ピクトグラムは，隣接行列においてリンクで繋がれたノード上を移動する数量を人型ピクトグラムの大きさで表している．
キャンバス上の要素に対してマウスオーバーすると，領域B「行列式表示領域」の対応する部分をハイライトする．ノードピクトグラムをマウスオーバーすると，行列式におけるそのノードのPageRankの値をマークし，リンクをマウスオーバーすると，リンクを辿って移動する数量の算出に使用される値群，つまり減衰係数，対応する遷移確率行列の値，対応する1/N行列の値，及びひとつ前のステップのPageRankの値をハイライトする．
領域A「ネットワークグラフ設定領域」にある，「隣接行列入力ボタン群」の直接入力，または「ランダム入力ボタン」によって「隣接行列入力ボタン群」の値が変えたとき，キャンバスにノードとリンクを描画し，ステップの値を0にする．再生中にノード数や隣接行列の入力値が変わると再生を自動で停止し，変更後のノードとリンクを描画する．
高橋伶奈，伊藤一成：ランダムサーファーモデルの学習アプリケーション「人型ピクサーフィング」の実装と評価，第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024)
日頃からピクトグラミングシリーズをご愛顧いただき，まことにありがとうございます．
ランダムサーファーモデルの学習アプリケーション 「人型ピクサーフィング」を公開しました．高橋玲奈が中心に開発しています．
Web情報検索における代表的なアルゴリズムの一つであるPageRankアルゴリズムについて視覚的に表示し，さらにアプリケーションの利用を通じて行列やベクトルなどの線形代数の基礎を学べるのが特徴です．
ピクトグラミングサイトの「関連アプリケーション」の項目の中からアクセスできます．
URLはこちらです． https://pictogramming.org/apps/humanpicsurfing/
参考文献
高橋伶奈，伊藤一成：ランダムサーファーモデルの学習アプリケーション「人型ピクサーフィング」の実装と評価，第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024)
ピクトッチでドット絵 シール編その１では、丸いシールを貼っています。
今回はプリンターで印刷できる、100円ショップの磁石つきシート、クラフトシール紙に
印刷して凹凸のある100円ショップのキラキラシールを使って作成してみました。
シール（いろいろなキラキラシールがあります）
マグネットシート（プリンタ対応）
クラフトシール紙（プリンタ対応）
ドット絵その１を参考にしてください。印刷をしてキラキラシールを貼ります。
磁石になっているので、黒板などにつけられます。のりが弱いときはボンドなどで補強してください。
下のボンドも100円ショップに売っていました。
ピクトッチでドット絵 シール編その１を参考にしてください・
作成者 Reiko Sugiyama
プラバンに人型ピクトグラムやドット絵を印刷してキーホルダーを作ってみました。
プラバン（100円ショップダイソー）
チェーン（100円ショップ）
穴あけパンチ
はさみ
色鉛筆やマジック
オーブントースター
アルミホイル
厚めの本
プログラム
自転車
印刷→好きな形にカット→オーブントースターに入れて焼く→冷めないうちに平らなものでおさえる（厚めの本などに挟む）
かきごおり かめ
印刷→好きな形にカット→白い丸のところに色を塗る→オーブントースターに入れて焼く→冷めないうちに平らなものでおさえる（厚めの本などに挟む）
やけどに注意してください。
自転車のキーホルダーを自転車のカギにつけてみるのもいいですね。
作成者 Reiko Sugiyama
Python風の記法で書かれたビジュアルブロックを組み合わせてプログラミングできる「PICTO (Pseudocode for Informatics of the Common Test Optimizer)」を公開しました．
できる処理はピクトグラミングやピクトッチと同様です．人型ピクトグラムとの対話を通じたさりげない体験を通じて，Python風の記法に慣れ親しむことができます．高等学校情報科の実習に最適です．そのうち人型ピクトグラムが，Python風の記法で書かれたプログラムが含まれるテストに関するアドバイス等を語り始めるかもしれません．ピクトグラミングのトップページよりアクセスください．
サンプルプログラムを直接読み込むこともできます．
