人型をぬるぬる動かせる「ピクトグラミング」 青学准教授が公開



ニュース

» 2017年12月07日 18時44分 公開



ピクトグラムの人型を、自由にポージングさせたりアニメーションにできたりするサイトを、青山学院大学の伊藤一成准教授が公開した。


[井上輝一,ITmedia]


 緑色の「非常口マーク」や、たばこに斜めの赤い線を引いた「禁煙マーク」など、絵で概念を分かりやすく示す「ピクトグラム」。そんなピクトグラムの人型を、自由にポージングさせたりアニメーションにできたりするサイトを、青山学院大学の伊藤一成准教授が12月7日に公開した。


ピクトグラムの人型を、自由にポージングさせたりアニメーションにできたりする「ピクトグラミング」

 サイトの名前は「ピクトグラミング」。人型ピクトグラムをプログラミングできるという意味で、独自の命令セットを記述することで人型を自由に動かせる。マウスで各パーツをドラッグして動かすこともできる。

 高校での50分×8回分の授業を想定したテキストも同サイトで公開し、教育現場での活用を見込んでいる。


授業利用を想定して公開したテキスト

 伊藤准教授は、「人間がメタ的・直観的に自身の活動を振り返りながら、われわれの化身として人間中心の学習環境を設計・構築していく手助けをしてくれるはず」とピクトグラミングに思いを込めた。


ピクトグラミングで記者が作成したピクトグラム(題:「笹食ってる場合じゃねえ」)


Copyright© 2017 ITmedia, Inc. All Rights Reserved.

‘; html += ‘

‘; e_dlv.innerHTML = html; cX = cX || {}; cX.callQueue = cX.callQueue || []; cX.callQueue.push([ ‘insertAdSpace’, { adSpaceId:’000000016415d712′, width:’100%’, height:190, initialHorizontalAdUnits:1, initialVerticalAdUnits:1, resizeToContentSize:true, renderTemplateUrl:’//cdn.cxpublic.com/20171129_fd49554_3.html’ // renderTemplateUrl:’/test/kegoto/cxense/fd49554/rendertemplate.html’ } ]); }; var insert_ok = function(_target,_str){ e_body.insertBefore(e_dlv,_target); set_dlv(); }; var insert_ng = function(_str){ e_dlv.style.display = ‘none’; }; var main = function(){ var e_nodes = e_body.childNodes; // BODY 直下子要素 var e_tags = []; // BODY 直下タグ var p_num = []; // BODY 直下 P タグ位置 var p_target_num; // 枠挿入基準位置 var o_float = {}; // 回り込み要素 var o_this = {}; // アクティブタグ var o_next = {}; // アクティブタグの次のタグ var flag_insert = 0; // 挿入フラグ // 回り込み要素チェック var check_float = function(_e){ var e = 0; if(_e.id.match(/^col¥d{3}(l|r)$/)){ e = _e; } return e; }; // 要素の Y 座標と高さの合計値 var get_element_y = function(_e){ var ey = 0; var eh = _e.offsetHeight; while(_e){ ey += _e.offsetTop; _e = _e.offsetParent; } return ey + eh; }; var check_ptag = function(_e){ var e = 0; if(_e.tagName && _e.tagName === ‘P’){ e = _e; } return e; }; var try_insert = function(){ p_target_num = Math.floor(p_num.length / 2) – 1; for(var i = p_num[p_target_num]; i = _threshold){ try_insert(); }else{ insert_ng(‘P タグ ‘ + _threshold + ‘ 以下’); } }; if(e_body){ main(); }else{ insert_ng(‘記事本文なし’); }
})(document,4);

こんな記事も読まれています





コメントを残す