D1-1

顔の特徴点座標を利用した数値処理教材の開発
Development of a numerical processing teaching materialusing the Coordinates of Facial Landmarks
伊藤 敏*1, 井上祥史*2,鷲野 嘉映*3
*1
*2
Satoshi ITOU , Shoshi INOUE , Kaei WASHINO*3*1 岐阜聖徳学園大学*1Gifu Shotoku University*2 岩手大学*2 Iwate University*3 愛知みずほ短期大学*3 Aichi Mizuho Junior College
Email: itous@gifu.shotoku.ac.jp
あらまし：USB カメラとブラウザを用いて顔の特徴点座標の情報を提供する教材を作成した．座標情報はカメラとインターネットにアクセスをする環境さえあれば，テキストデータとして得られる．遠隔教育環
境での数値処理教材として有用であると思われる．
キーワード：USB カメラ，Dlib，顔の特徴点，数値化

1.

はじめに

ICT の高度化により，スマートフォンなどを利用して社会生活を送る私たちにとり，ブラックボックス化した結果の利用(顔認証や歩行状態)だけでなく，原理や仕組みに目を向ける教材の必要性は高いと思われる．そのため，該当する現象を処理可能な数値として提供することは意味深いと思われる．
我々は学習者自身の動きを数値データとして取得し，数値処理することが可能になる教材として，USBカメラから脈波を取得して処理する教材の提案を行ってきた 1)．また，顔の特徴点座標を取得して顔の動きを数値として処理する教材の提案を行ってきた
2)．
これらの教材開発に，開発言語として Python を利用してきた．しかし，COVID-19 の蔓延により対面授業の実施に制限がかかるようになった．対面授業
では一括で設定済みの環境を用いることが可能である．しかし，遠隔では学習者毎に利用環境が異なり，PC 取扱いに慣れていない学習者を対象に Python を用いて遠隔で授業を実施するには，環境構築でハードルが高くなる．そこで，主題である顔の数値デー
タ提供に javascrpt を用いた Web ページを提供し，PC のほかには USB カメラを用意すれば授業実施が可能である環境を構築した．
本研究では上記システムの開発とそれを用いた教材を作成し，検証することを目的とする．研究目的である教材作成として，顔の特徴点を検出し，得られた数値データを処理する教材を提案する．画像から顔の特徴点を抽出するライブラリ Dlib3)とそれをjavascript で使う face-api4)を用いる．本教材では，Web上で，USB カメラから出力される動画を確認し，学習者が「シャッターボタン」を押し，静止画を得る．

その静止画の顔の特徴点座標を，Web ページに表示をする．学習者は表示された座標を取得して，表計算ソフトウェアなどを用いて，平行移動，回転，反転，ずらしなどの処理を行い，それぞれの結果をグラフ表示する．この過程を通じて，数値が処理される過程を可視化しながら処理の理解へつなげることを目指す．
本稿では，2 章で javascript を用いた Web ページの設計と特徴点座標の表示について述べ，3 章で基本処理の実例を例示し，4 章でまとめる．

2.

顔特徴点の取得および表示

遠隔環境での学習者の持つ ICT 環境は様々である
が．学習者は最低限 PC と USB カメラ，数値処理をする表計算ソフトおよびインターネットアクセス環境を持つと想定する．学習の流れを
1． USB カメラから顔表示確認
2． 静止画像取得
3． 顔の特徴点座標表示
4． 表計算ソフトなどで数値処理とする．
USB カメラ画像の表示と座標の取得はすべてブラウザで行う．3 項の特徴点抽出には face-api.js4)を用いた．顔検出・特徴点検出はすべてクライアント側で処理がなされ，顔の画像をサーバへ送る必要がない．これは学習者にとっては USB カメラを用意する以外の環境構築の必要がない．また，顔画像を送付する必要がないことから，セキュリティ上も好ましい．遠隔授業に対応可能である．
作成した Web ページの例を図 1 に示す．Web ペー
ジ左上に USB カメラ画像を表示し，その直下にあるシャッターボタンを押すことで右上に静止画像を表― 63 ―

教育システム情報学会 JSiSE2021
第46回全国大会
2021/9/1-9/3

キストボックスに表示する．動画及び静止画，数値はすべて鏡像で処理をした．座標表示は特徴点 68 点5)の x，ｙ座標を表示する．さらに鼻頭，両目尻，あご，口唇尻，両外郭，および鼻や両目，口唇，両眉，顎の輪郭の座標を別のテキストボックスで表示し，学習者の発想に柔軟に対応可能にした．
OS は Windows，Mac で作動を確認した．スマートフォンの Android および iOS で実行が可能ではあるが，数値を取り出して処理をする教材であるため，現状では，スマートフォンに非対応とした．

3.

数値処理の例

3.1 行列演算
顔の特徴点 68 組の値を表計算ソフトウェアにコピーペーストし，散布図として描くことで上下反転した顔が表示される．例を図 2a に示す．鼻の頭を原点に「平行移動」する操作も同次形を用いることで可能であることを示せる．それを回転した例を図 2ｂに示す．表計算ソフト上で，行列演算を行い，結果を見ながらの演習が可能である．
3.2 距離及び面積の算出
図 1．顔検出・特徴点表示の Web ページ例
示する．その静止画から顔検出・特徴点抽出を行い，結果を静止画像に上書きし，特徴点座標を下部のテ

特徴点のうち両目尻と鼻頭の距離は顔の表情を変えても変化しない．これらの点間の pixel 距離と面積を算出可能である．
口の開閉により唇間の距離や唇がなす面積の変化，鼻の頭と筋の変化から顔の傾きなどを算出可能である．

4.

まとめ

学習者自身の体データを USB カメラより取得し，顔の特徴点座標を提供する Web ページを作成した．
遠隔教育に対応可能なように javascript を用いてWeb 上での処理を実現した．得られた数値は行列演算教材として利用できる．さらに，2 点間の距離および 3 点で囲まれる面積の計算に利用可能である．
本研究の一部は科研費（19K03178, 20K03164）の助成を受けたものである．

a

参考文献

b

(1) 伊藤敏，鷲野嘉映:”USB カメラによる脈は計測と周波数解析”，計測自動制御学会教育工学論文誌，38，(2015).
(2) 伊藤敏，井上祥史，鷲野嘉映:”動画から取得して顔の動き数値化と慣性センサによる検証”，教育システム
情報学会第 44 回全国大会，B1-2，pp77，(2019)(3) http://dlib.net/ 2021 年 6 月 7 日確認(4) https://github.com/justadudewhohacks/face-api.js 2021 年
6 月 7 日確認
(5) https://ibug.doc.ic.ac.uk/media/uploads/images/annotpics/figure_68_markup.jpg 2021 年 6 月 7 日確認

図 2．表計算ソフトで特徴点表示
a.

平行移動

b. 回転をした例― 64 ―