\documentclass[a4j, titlepage]{jsbook}
% -*- coding: utf-8 -*-

\usepackage{url}
\usepackage[dvipdfmx]{graphicx}
\usepackage{geometry}
\usepackage{ascmac}
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}

\pagestyle{plain}

%% タイトル %%
\title{モバイルデバイスを活用した踊りのデータ保存システムの構築}

%% 著者 %%
\author{広瀬研究室\\C1180778 北島龍人}

\date{}

\begin{document}
\maketitle


\begin{center}
 {\bfseries 概要}
\end{center}

日本各地には民俗芸能・伝統芸能が存在し、それらは形を変えながら継承されてきた。しかし地方の過疎化や急速な少子高齢化によって失われつつある。踊りの記録・保存に関する研究は今日も行われている。記録・保存にはいくつかの方法が存在するが、記録によっては情報量が足りず復元が困難なものや、そもそも記録・保存を個人で行うことが困難である等の課題が残っている。近年では機械学習の発達により、個人が所持しているモバイルデバイスでモーションキャプチャを行うことが可能となった。本研究では、モバイルデバイスのWebカメラを用いて、モーションキャプチャデータを取得・保存するシステムを考案した。リアルタイムでの姿勢推定技術を活用し、踊りにおける身体のキーポイントを2Dの位置座標として保存する。また、JSONファイルとしてモーションキャプチャデータを自身のモバイルデバイスに保存し、任意でサーバに保存することを可能にした。YOSAKOI ソーランの踊りをモーションキャプチャし、他の民俗芸能・伝統芸能の踊りにも利用可能かを検討した。さらに、モーションキャプチャによって取得したデータの活用方法などを検討した。(480文字)

\tableofcontents
\clearpage

%% 本文 %%
\chapter{はじめに} \label{hajime}
本章では研究の背景と目的を説明する。

\section{背景}
地方に残る民俗芸能・伝統芸能（芸能）は、人々の生活に密着し、時代に適応しつつ形を変えながら伝えられて来た貴重な無形文化財である。そのために、芸能には祖先の生活風景、心象風景、知恵や知識などが深く反映されている。私たちには、このような貴重な芸能を後世に伝承していく責務がある。しかしながら、近年の地方の過疎化、急速な少子高齢化に伴って後継者不足が深刻な問題になっており、失伝が避けられない状況にある。一度失伝した芸能の復活は極めて難しい\cite{kiroku}。
踊りを記録・保存することは、いつの時代でも行われていて、記号、写真、映画、ビデオなどを使った方法がある\cite{kurokawa}。しかしながら、文章や画像のみでは踊りの動きに対する情報量が少なく、ビデオはストレージを多く消費してしまう。また、モーションキャプチャは高額な機材を準備する必要がある等、個人での記録・継承が難しい。

現代ではスマートフォンやタブレット等のモバイル端末を所持している人が多い。総務省のデータ (2018)より，モバイル端末の所有率は 95.7\%である\cite{soumu}。さらにスマートフォンやタブレットのカメラの性能も向上し続けている。また、機械学習の発展\cite{ai}に伴い、カメラでモーションキャプチャを行えるようになった。そこで個人が所持しているスマートフォンやタブレットでモーションキャプチャを行い、踊りを記録・保存するという点に着目した。

\section{目的}
本研究の目的はPC、スマートフォン、タブレット等のモバイル端末のWebカメラを活用し、民俗芸能・伝統芸能の踊りを記録・保存することである。また、踊りを正確で容易に記録・保存できるかを検討する。



\chapter{先行研究と課題} \label{kenkyu}
本章では現状を把握し、問題点を発見するために、これまで行われてきた研究とその課題、そして関連する事例を取り上げている。第\ref{senkou}節では民俗芸能・伝統芸能の踊りを記録・保存した研究を紹介する。また、先行研究の課題点を第\ref{senkada}節に示す。第\ref{jirei}節には踊りが消失してしまっている関連事例を取り上げる。

\section{先行研究} \label{senkou}
民俗芸能・伝統芸能の記録・保存に関する先行研究を述べる。民俗芸能・伝統芸能の踊りにおいて、身体の動きを記録・保存している研究を以下に示す。

\subsection{民族芸能・伝統芸能をモーションキャプチャで記録} \label{tama}
玉本\cite{kiroku}はこれまで民俗芸能・伝統芸能の踊りの伝承を支援するため、モーションキャプチャで踊りの動きを3次元デジタルデータとして記録・保存し、CGアニメーションを使って踊りの動きを再現する研究を行ってきた。さらに、この手法を活用して、踊りの記録・保存だけでなく、踊りの学習支援システム(バーチャルに踊りを見る、体験できるシステム)を開発した。踊りを記録・保存することは、いつの時代でも行われており、以下に示す方法で行われてきた。
\begin{itemize}
\item 文章
\item 記号
\item ポンチ絵
\item 写真
\item 映画
\item ビデオ
\item モーションキャプチャ
\end{itemize}
この方法の中でもモーションキャプチャは近年の情報技術の発展により出現した方法であり、玉本はモーションキャプチャで踊りの記録・保存を行った。ここで使用されたモーションキャプチャは慣性センサ式の高精度で収録できるXsens MVNとNOITOM社製のPerception Neuronである。\\

\subsection{黒川能のディジタル化を通した踊り継承} \label{tou}
玉本、唐ら\cite{kurokawa}は山形県庄内地域に500年以上継承されている民俗芸能の黒川能をデジタル化し、踊りを継承する新手法を研究した。
第\ref{tama}節で示した手法を用いて12項目の黒川能を収録した。使用されたモーションキャプチャは慣性センサ式であるXsens社のMVN Awinda、映像は4Kのデジタルカメラ2台、楽曲はZOOM社のH4n Proを使用した。モーションキャプチャで黒川能の収録を行い、BVH形式のデータで保存した。また、CGアニメーションで踊りを再現し、動きを観察できるようにした。またCGアニメーションを活用し、以下の表示方法を提案した。
\begin{itemize}
\item 動画とCGアニメーションの同時表示
\item 演者と骨格モデルの共演
\item 多視点から見た舞の同時表示
\end{itemize}
踊りは人の動き、衣装、小道具、舞台、楽曲等からなる総合芸術である。衣装、小道具、舞台の記録は現時点ではビデオによる記録が優れている。動画とCGアニメーションの同時表示により、この点を補っている。また、演者と骨格モデルの共演により、動きの違いを把握し、学習できるようにした。さらに多視点から黒川能の動きを観賞することを可能にした。

\subsection{YOSAKOIソーランの舞踊記譜法} \label{kifu}
丹羽、木村ら\cite{kifuhou}はYOSAKOI ソーランの舞踊譜の構成要素として必要な要素を明らかにし、それを舞踊譜に落とし込んだ。舞踊譜とは、舞踊の動きを紙面に記号を用いて記録したものであり、舞踊記譜法とは、その舞踊譜の記し方である。YOSAKOI ソーランの振付を記録する舞踊記譜法は確立されておらず、各チームで独自の方法が取られている。身体の図解を手書きで記録し、図形エディタで舞踊記譜法を制作した。舞踊記譜法は一定時の静止した構造として共時的に記録する。共時的とは、現象が継続的変化としてではなく、一定時の静止した構造としてあるさまである。最後に踊り手が理解できるかをグループインタビュを行い、プロトコル分析を用いて明らかにした。\\

\section{先行研究の課題点} \label{senkada}
第\ref{senkou}節で述べた先行研究の課題を示す。

\subsection{第\ref{tama}項と第\ref{tou}項の課題} \label{kadai1}
第\ref{tama}項と第\ref{tou}項の研究で利用されたモーションキャプチャの機材はXsens MVNとPerception Neuronであり、2021年8月時点でそれぞれ約600万円、30万円と高額である。また、所得の分布状況は所得金額階級別に相対度数分布をみると、「200～300万円未満」が13.9％、「300～400万円未満」が13.3％と多くなっている。中央値は427万円であり、平均所得金額（547万5千円）以下の割合は61.3％となっている\cite{kouseiroudou}。この状況で機材を購入し、民俗芸能・伝統芸能を記録・継承しようと考える個人は少ないと考えられる。また、民俗芸能・伝統芸能を継承してきた人々がXsens MVNとPerception Neuronを扱うことができる程専門的な知識を有しているとは限らず、このことも民俗芸能・伝統芸能を記録・継承する課題となっている。

\subsection{第\ref{kifu}項の課題} \label{kadai2}
丹羽、木村らはYOSAKOI ソーランの舞踊譜の構成要素として必要な要素を明らかにし、それを舞踊譜に落とし込んだが、手書きで舞踊記譜法を記録しその後に図解エディタで制作するため、非効率である。また、舞踊記譜法は共時的な記録をとるため、情報量が乏しく連続した記録の保存を行うことができない。また、YOSAKOI ソーランに携わってきた踊り手は踊り手の経験に補完されることによって共時的な舞踊譜だけでも理解することは可能だが、YOSAKOI ソーランに携わってこなかった一般の人が舞踊譜を見ても理解することができなかったと課題を残している\cite{kifuhou}。

\section{関連事例} \label{jirei}
踊りの消失に関連する事例として東北公益文科大学のYOSAKOI ソーランを取り上げる。YOSAKOI ソーランの説明とYOSAKOI ソーラン部 蒼嵐の事例を以下で紹介する。

\subsection{YOSAKOI ソーラン}
YOSAKOI ソーラン祭りは、高知県の「よさこい祭り」をルーツに1992年、よさこい祭りの「鳴子」と北海道の民謡「ソーラン節」がミックスされ誕生した。この祭りは1992年、参加チーム10チーム参加者1000人、観客動員数20万人から始まった。今も、開催会場が各地域のボランティアによって運営されるなど、参加チームを含めた多くの市民の協力により、毎年祭りを開催することができている。\\
YOSAKOI ソーランの基本ルールを以下に示す。
\begin{itemize}
\item 手に鳴子を持って踊ること
\item 曲にソーラン節のフレーズを入れること
\end{itemize}
以上のルール以外の、踊り・曲・衣装等はチームの自由である\cite{yosakoi}。

\subsubsection{鳴子}
もともとは田畑に吊るして音で鳥を追い払うために使用されていたもの。高知よさこい祭りで踊りの中に取り入れられて以来、いまや全国のYOSAKOI関連の祭りでも欠かせない象徴的な道具となった\cite{yosakoi}。

\subsubsection{ソーラン節}
北海道民謡の一つ。北海道の漁師が昔ニシン漁の際に歌った労働歌。「ヤーレンソーラン」の歌に合わせて、綱引きや網あげの力強さを表現している\cite{yosakoi}。

\subsection{YOSAKOI ソーラン部 蒼嵐}
東北公益文科大学(以下本学)にはYOSAKOI ソーラン部が存在し、山形のみならず東北地方の各施設・お祭り等で演舞をしている。本学のYOSAKOI ソーラン部 蒼嵐（以下蒼嵐）は2020年、約20名の学生で構成されている。練習は週2日の水曜日と木曜日で、各2時間程度の練習を行っている。蒼嵐では踊りを習得している先輩学生が踊りを習得していない後輩学生に教えるという方法で踊りを継承している。

YOSAKOI ソーランの活動が活発になるのは、祭りが多く開催される夏となる。参加する祭りの内容によって演舞する曲の構成にも変化が生じる。そのため、蒼嵐が練習している曲は毎年変化し、祭りに参加しない、または祭りが開催されない等が起こると、練習されない曲も出てくる。本学の蒼嵐では毎年、1年生が入学してから数名の学生が部活動に参加し、3年生もしくは4年生になると退部する仕組みとなっている。

演舞が行われる踊りは毎年変化するにもかかわらず、蒼嵐の学生も変化していくため、継承が上手く行われず、消失してしまう踊りも存在する。また、本学では部活動に参加するかどうかは基本的には学生の意思で判断できるため、踊りを習得した学生が蒼嵐を退部してしまう等の問題が発生することも、踊りの消失を招く原因となっている。YOSAKOI ソーランではYOSAKOI ソーランを踊る誰もが一緒に踊ることのできる総踊りといわれる踊りが存在する。総踊りは各チームでの継承が途絶えてしまったとしても、他のチームに指導してもらうことが可能である。しかし、総踊りとは反対に各チームにしか存在しない曲（持ち曲）も存在し、その曲と踊りが一度でも消失してしまうと復元することは困難となる。蒼嵐には持ち曲が以下の2曲存在する。
\begin{itemize}
\item 神々の舞い
\item 秋波奏風
\end{itemize}
しかしながら、2020年現在では神々の舞いのみの継承となっており、秋波奏風の踊りは消失してしまっている。



\chapter{モバイルデバイスを活用した踊りのデータ保存システムの構築} \label{teian}
本章では第\ref{hajime}章と第\ref{kenkyu}章で述べた現状と問題点を元に、課題を解決する改善案を挙げる。また、改善案を踏まえ、民俗芸能・伝統芸能の踊りを保存するシステムの提案を行う。第\ref{kadatei}節で課題に対する改善案を挙げる。さらに、第\ref{sisutei}節では改善案を踏まえて、踊りを保存するシステムの提案を述べる。

\section{課題に対する提案} \label{kadatei}
第\ref{hajime}章から第\ref{kenkyu}章までを踏まえた上で改善案を挙げる。

\subsection{第\ref{kadai1}項に対する改善案} \label{kaizenan}
モーションキャプチャを行うにあたって高額な機材を準備しなければならないという課題を解決するため、安価な機材を使用する。第\ref{hajime}章の背景も踏まえ、モバイルデバイスを活用することを考える。PCやタブレット等のモバイルデバイスはXsensMVNとPerception Neuronに比べると、比較的安価に準備することができる。また、スマートフォンやタブレット等のモバイル端末所持率が95.7\% \cite{soumu}であり、機材を購入せずに準備することが可能であると考える。

XsensMVNやPerception Neuron等の機材を扱うことの困難さを改善するため、容易な操作でモーションキャプチャを行うことを可能にする。ボタンのクリックやキーボードでのキー入力等の操作方法でモーションキャプチャを行うことが好ましい。

\subsection{第\ref{kadai2}項に対する改善案}
舞踊記譜法を効率的に記述するため、身体の図解を手書きで記録し、図形エディターで舞踊記譜法を制作するのではなく、自動的に身体の図解を記録し、舞踊譜を制作するシステムであることが望ましい。第\ref{hajime}章の背景を踏まえ、機械学習により身体の図解を記録できるものとする。

共時的な記録では経験者しか理解できないという課題を解決するため、共時的な記録ではなく、通時的な記録として保存する。

\section{システムの提案} \label{sisutei}
第\ref{kadatei}節では課題に対する改善案を述べた。本節では第\ref{hajime}章と第\ref{kaizenan}項に示したことを考慮し、民俗芸能・伝統芸能を記録・保存するシステムを提案する。本システムでは高額な機材を準備するのではなく、所持率の高いモバイルデバイスを使用し、踊りを記録・保存可能にする。個人でもモーションキャプチャの操作を可能にするため、ボタンのクリックやキーボードのキー入力等で操作可能とする。舞踊記譜法を手書きで作成することをさらに効率化するため、本来、手書きで作成する記録をデジタル化し、自動的に記録する記録方法にする。踊りの経験がない人も理解可能な通時的な記録としてモーションキャプチャで踊りを記録する。記録したデータを個人のデバイスやサーバに保存可能にする。

以上を踏まえたシステムとし、モバイルデバイスを活用した踊りのデータ保存システムの提案と構築を行う。民俗芸能・伝統芸能の踊りを個人でも記録・保存することが可能なシステムにしていく。



\chapter{システム関連技術の解説}
本章では本システムを作成するにあたり、必要となる前提知識、技術について説明する。

\section{モーションキャプチャ}
モーションキャプチャは物体の動き（多くの場合、人の動き）を3次元のデジタルデータとして収録し記録する装置である。身体部位の位置と回転角度を求める原理によって、磁気式、光学式、慣性センサ式などの方式がある\cite{kiroku}。

\subsection{磁気式}
対象者が磁気センサを身体各部位に装着する。磁気発生装置で磁気を発生させ、対象者がその空間の中で動くことにより、身体の位置や姿勢を求める方式である。磁気を利用し、計測を行うので、センサが身体の陰、衣服の陰になっても計測することが可能である。しかし、磁気の強さが磁気発生装置からの距離により変化するため、測定する範囲が限られる。

\subsection{光学式}
対象者の身体各部位に光を反射するマーカを装着する。周囲に光源と多数のカメラを設置し、マーカにより反射された光を撮影することにより、身体の位置や姿勢を求める方式である。複数の視点から撮影することで精度よく位置と姿勢を求めることができるが、装置として高額になる。マーカが身体や衣服の陰になると反射した光を撮影できず、位置や姿勢を求められなくなる。また、カメラと光源に囲まれた空間が測定可能な範囲であり、その範囲外では利用することができない。屋外等の強い光を受ける環境では測定することが不可能である。

\subsection{慣性センサ式}
ジャイロ（角速度計）、加速度計からなる慣性センサを身体各部位に装着する。身体の動作から得られる角速度、加速度を利用して身体の位置、姿勢を求める方式である。身体のセンサだけから回転角度と位置を求めるので、測定する範囲に制限がない。しかし、時間経過による誤差の蓄積が発生し、測定精度に限界がある。

\section{PoseNet}
PoseNet は、主要な体の関節の位置を推定することにより、画像や動画内の人物のポーズを推定するために使用できるビジョンモデルである。ポーズ推定とは、画像や動画内の人物を検出するコンピュータビジョン手法のことで、例えば、画像内の人物の肘の位置などを特定することが可能である\cite{posenet}。

\subsection{TensorFlow}
TensorFlow は、機械学習向けに開発されたエンドツーエンドのオープンソースプラットフォームである。研究者が機械学習で最新の実験を行い、デベロッパがML搭載アプリケーションを簡単に開発して展開できるよう、各種ツールやライブラリ、コミュニティリソースを備えた総合的で柔軟性に富んだエコシステムを確立している\cite{tensorflow}。

\subsection{p5.js}
p5.jsは、アーティスト、デザイナ、教育者、初心者、および他の誰にとっても、コーディングをアクセス可能で包括的なものにすることに焦点を当てた、創造的なコーディングのためのJavaScriptライブラリである。ソフトウェアに期待し、それを学ぶ誰もが利用可能なオープンソースである\cite{p5}。

\subsection{ml5.js}
ml5.jsは、機械学習アルゴリズムのためのGPU加速数学操作とメモリ管理を処理するためのライブラリであるTensorFlow.jsへのオープンソースでフレンドリな高レベルのインターフェースである。人間のポーズを検出するための事前トレーニング済みのモデル、テキストの生成、別の画像のスタイリング、音楽の構成、ピッチ検出、一般的な英語の単語関係など、ブラウザで即座にアクセスできる\cite{ml5}。



\chapter{システム} \label{system}
第\ref{teian}章では本研究の目的を達成するためのシステムの提案を行った。本章では第\ref{teian}章で提案したシステムの作成について説明する。本システムの要件を定義し、システムの設計と構築について述べる。その上、どのようなシステムが構築されたのかを示す。

\section{要件定義} \label{youken}
以下に必要となる要件を示す。
\begin{enumerate}
   \item モバイルデバイスで実行可能にする
   \item 容易な操作で実行可能にする
   \item モーションキャプチャで踊りを記録する
   \item データを保存可能にする
\end{enumerate}
これらの要件を満たすようシステムの設計を行う必要がある。

\section{システム設計} \label{plan}
第\ref{youken}節を元にシステム設計を行う。イメージ図とフローチャートを用いて説明をする。

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{flow.drawio}
 \caption{システムのイメージ図}
 \label{nagare}
\end{figure}

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{Lsystem.drawio}
 \caption{システムのフローチャート}
 \label{lsystem}
\end{figure}

\subsection{システムの基本設計}
本システムのイメージ図を\ref{nagare}に示す。まず演者の踊りをモバイルデバイスのWebカメラを用いて撮影する。その踊りに対しリアルタイム姿勢推定を行い、モーションキャプチャを行う。最後に取得したモーションデータを自身のモバイルデバイスに保存する。また、任意でモーションデータをサーバに保存することも可能である。

\subsection{システムの詳細設計}
本システムの詳細設計を図\ref{lsystem}に示す。本システムはWebサイトで稼働することとし、HTML、CSSに加え、JavaScriptを利用する。

\subsubsection{踊りの撮影}
JavaScriptのライブラリのp5.jsのsetup関数によりキャンバスのサイズは横幅640、高さ480に設定する。さらにvideoにより撮影を行う。

\subsubsection{モーションキャプチャ}
モーションキャプチャを開始する指示が入力されるとモーションキャプチャを開始する。モーションキャプチャはPoseNetを利用し、リアルタイムでの姿勢推定を行う。PoseNetはJavaScriptのライブラリであるp5.jsとml5.jsを使用する。p5.jsにより人のポーズを検出する。ポーズはキーポイントとして取得され、鼻、左目、右目、左耳、右耳、左肩、右肩、左ひじ、右ひじ、左手首、右手首、左腰、右腰、左ひざ、右ひざ、左足首、右足首のそれぞれからx座標とy座標の位置データを取得する。さらに取得された位置データをml5.jsの学習データとして保持しておく。
取得されているキーポイントの位置にはellipseを使用し、楕円を表示する。また、キーポイントをskeletonを用いてつなぎ合わせる。

\subsubsection{データの保存}
モーションキャプチャにより取得していたモーションデータをJSONファイルとし、自身のモバイルデバイスに保存する。ml5.jsの学習データとして保持されていたデータを.saveを使用し、保存する。また、自身のモバイルデバイスに保存してあるデータをサーバに任意で保存可能とする。ここでサーバに保存する処理はRubyとCGIを使用することとする。サーバ上のデータはデータレイク\footnote{データの発生源(IoTデバイスからのセンサ情報やソーシャルメディアで作られた投稿データ等)の生データをそのままの形で蓄積したもので、蓄積データは機械学習やデータ分析に利用されている\cite{ouyou2}}として保存する。

\subsubsection{データ形式}
モーションデータの形式としてJSON(JavaScript Object Notation)を用いる。JSONは、軽量データ交換形式である。JSONでは順序付けされない名前と値のペアの集まりの構造である。JSON は完全に言語に依存しないテキスト形式でC、C++、C\#、Java、JavaScript、Perl、Python、その他多くの言語を含むCプログラマになじみのある規則を使用している\cite{json}。JSONはJavaScriptで用いられるデータ交換フォーマットであり、シンプルで軽量なフォーマットが特長である。Web上に公開されているデータはJSON形式でデータのやり取りを行うことがある。実例として内閣官房の新型コロナウイルス感染症対策サイト\cite{korona}等が存在する。以下にJSONの簡単な形式を示す。

\begin{itembox}[l]{JSON形式}
\begin{verbatim}
{
  "x座標": {
    "左目": 100,
    "右目": 200,
    "鼻": 150
  },
  "y座標": {
    "左目": 50,
    "右目": 50,
    "鼻": 80
  }
}
\end{verbatim}
\end{itembox}

\section{システム構築}
第\ref{plan}節で設計したシステムの構築を行う。

\subsection{開発環境}\label{environment}
システム構築に使用する開発環境を示す。

\subsubsection{開発言語}
\begin{description}
   \item[HTML(HyperText Markup Language)]\mbox{}\\
ウェブページを作成するために開発された言語である\cite{html}。
   \item[CSS(Cascading Style Sheets)]\mbox{}\\
画面上、紙上などでの構造化されたドキュメント(HTMLやXMLなど)のレンダリングを記述するための言語である\cite{css}。
   \item[JavaScript]\mbox{}\\
Webブラウザに組み込まれているプログラミング言語である\cite{js}。
   \item[Ruby]\mbox{}\\
1995年に一般公開されたプログラミング言語で、まつもと ゆきひろにより作成されたフリーソフトウェアである\cite{ruby}。本システムではバージョン2.7.2を使用する。
\end{description}

\subsubsection{Webフレームワーク}
\begin{description}
   \item[CGI(Common Gateway Interface)]\mbox{}\\
Web サーバが Web ブラウザからの要求に応じて、プログラムを起動するための仕組みである。
\end{description}

\subsubsection{ブラウザ}
\begin{itemize}
   \item Microsoft Edge バージョン 97.0.1072.55
   \item Google Chrome バージョン: 97.0.4692.71
\end{itemize}

\subsection{実装} \label{make}
第\ref{environment}項に示した環境でシステムの実装を行う。

\subsubsection{ディレクトリとファイルの作成}
今回使用するHTML、CSS、JavaScriptの各ファイルを作成する。また、CGIディレクトリとデータを保存しておくディレクトリを作成する。さらにCGIディレクトリの中にRubyプログラムのファイルを作成する。データを保存しておくディレクトリには権限も追加する。
\begin{itembox}[l]{データ保存ディレクトリの作成と権限追加}
\begin{verbatim} 
mkdir -m 1777 ディレクトリ名
\end{verbatim}
\end{itembox}

\subsubsection{HTMLファイルを作成}
p5.jsとml5.jsのライブラリを使用するためにhead要素に以下を記述しておく。
\begin{itembox}[l]{head要素}
\begin{verbatim} 
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/addons/p5.sound.min.js">
</script>
<script src="https://unpkg.com/ml5@0.4.2/dist/ml5.min.js"></script>
\end{verbatim}
\end{itembox}
また、body要素にはJavaScriptのプログラム、CGIとRubyにより動作するformを記述する。
\begin{itembox}[l]{body要素}
\begin{verbatim} 
<script type="text/javascript" src="jsファイル名" charset="utf-8"></script>

<form action="rbファイル名" method="POST" enctype="multipart/form-data">
    <input type="file" name="test_file">
    <input type="submit" value="送信">
    <input type="reset" value="reset">
</form>
\end{verbatim}
\end{itembox}

\subsubsection{JavaScriptファイルを作成}
キャンバスを作成するプログラムを以下に示す。setup関数ははじめに呼び出され、横幅640、高さ480のキャンバスを作成しカメラを起動する。
\begin{itembox}[l]{キャンバスの作成するfunction}
\begin{verbatim}
function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  poseNet = ml5.poseNet(video, modelLoaded);
  poseNet.on('pose', gotPoses);

  let options = {
    inputs: 34,
    outputs: 4,
    task: 'classification',
    debug: true
  }
  brain = ml5.neuralNetwork(options);
}
\end{verbatim}
\end{itembox}

指示を判定するプログラムである。指示判定のプログラムはキー操作だけでなく、クリックによる操作などでも可能であるが本システムでは指示判定をキー操作で行うと仮定して作成する。
\begin{itembox}[l]{指示判定のfunction}
\begin{verbatim}
function keyPressed() {
    if (key == 't') {
      brain.normalizeData();
      brain.train({epochs: 50},finished);
    }else if (key == 's') {                      //データを保存
      brain.saveData();
    }else if (key == 'f') {                      //モーションキャプチャ開始
        targetLabel = key;
        console.log(targetLabel);
        setTimeout(function() {
        console.log('collecting');
        state = 'collecting';
        }, 1000)
    }else if (key == 'l') {                      //モーションキャプチャ終了
        targetLabel = key;
        console.log(targetLabel);
        setTimeout(function() {
        console.log('not collecting');
          state = 'waiting';
        }, 1000)
    } else {
        targetLabel = key;
        console.log(targetLabel);
    }
  }
\end{verbatim}
\end{itembox}

モーションキャプチャを行うプログラムの一部を以下に示す。input0からinput33までの34個のデータを配列として取得する。
\begin{itembox}[l]{xy座標を取得するfunction}
\begin{verbatim}
function brainLoaded() {
  console.log('pose classification ready!');
  classfigyPose();
}

function classfigyPose() {
  if (pose) {
    let inputs = [];
    for (let i = 0; i < pose.keypoints.length; i++) {
      let x = pose.keypoints[i].position.x;
      let y = pose.keypoints[i].position.y;
      inputs.push(x);
      inputs.push(y);
    }
    brain.classify(inputs, gotResult);
  } else {
    setTimeout(classifyPose, 100);
  }
}

function gotResult(error, results) {
  if (results[0].confidence > 0.75) {
  poseLabel = results[0].label.toUpperCase();
  }
  classifyPose();
}

function dataReady() {
  brain.normalizeData();
  brain.train({epochs: 50}, finished);
}

function finished() {
  console.log('model trained');
  brain.save();
  classifyPose();
}
\end{verbatim}
\end{itembox}
\begin{itembox}[l]{}
\begin{verbatim}
function gotPoses(poses) {
  if (poses.length > 0) {
    pose = poses[0].pose;
    skeleton = poses[0].skeleton;
    if (state == 'collecting') {
      let inputs = [];
      for (let i = 0; i < pose.keypoints.length; i++) {
        let x = pose.keypoints[i].position.x;
        let y = pose.keypoints[i].position.y;
        inputs.push(x);
        inputs.push(y);
      }
      let target = [targetLabel];
      brain.addData(inputs, target);
    }
  }
}
\end{verbatim}
\end{itembox}

取得している位置座標をキャンバスに描くプログラムを示す。p5.jsのdrawを使用し、楕円とスケルトンの描写を行う。
\begin{itembox}[l]{キャンバスに描くfunction}
\begin{verbatim}
function draw() {
  push();
  translate(video.width, 0);
  scale(-1, 1);
  image(video, 0, 0, video.width, video.height);

  if (pose) {
    for (let i = 0; i < pose.keypoints.length; i++) {
      let x = pose.keypoints[i].position.x;
      let y = pose.keypoints[i].position.y;
      fill(0, 255, 0);
      ellipse(x, y, 16, 16);

      let eyeR = pose.rightEye;
      let eyeL = pose.leftEye;
      let d = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y);  //右目と左目の距離を測る。
      fill(255, 0, 0);　　　　　　　　　　　　　　　　　　　　//色は赤に指定。
      ellipse(pose.nose.x, pose.nose.y, d-20);   //ここで鼻に楕円を描いてる。距離に応じて大きさが変わる 。
    }

    for (let i = 0; i < skeleton.length; i++) {
      let a = skeleton[i][0];
      let b = skeleton[i][1];
      strokeWeight(2);
      stroke(255);
      line(a.position.x, a.position.y, b.position.x, b.position.y);
    }
  }
  pop();

  fill(255,0,255);
  noStroke();
  textSize(512);
  textAlign(CENTER, CENTER);
  text(poseLabel, width/2, height/2);
}
\end{verbatim}
\end{itembox}

\subsubsection{サーバ側プログラムの作成}
CGIによって動作するサーバ側のプログラムをRubyスクリプトにて作成する。ここではデータをサーバに書き込む処理を行う。データレイクとして保存しておくため、ファイルの種類は限定しないこととする。
\begin{itembox}[l]{$save\_json.rb$}
\begin{verbatim} 
require "cgi"
require "json"

cgi  = CGI.new

file = cgi.params["test_file"][0]
file_name = cgi.params["test_file"][0].original_filename

open("../db/#{file_name}", "w") do |f|
  f.write(file.read)
end

cgi.out do
  "
　　#データの保存終了後のページをHTMLで記載。
  "
end
\end{verbatim}
\end{itembox}

\section{実装したシステム}
第\ref{make}目によって実装されたシステムを図\ref{complete}に示す。図\ref{complete}はブラウザの画面を最大化した状態である。画面内のキャンバスにキーポイントが描写されている。キーポイントを取得した位置に楕円を表示し、スケルトンによってつなぎ合わせている。ファイルの選択ボタンから保存したいファイルを選択し、送信を押すことでサーバに保存することが可能である。

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.4]{saito2}
 \caption{システムの画面}
 \label{complete}
\end{figure}



\chapter{実験} \label{jiken}
第\ref{system}章では作成したシステムについて説明した。
本章では第\ref{system}章で実装したシステムを実際に使用し、検証を行う。実験は手を上げ下げする等の単純な動作のみならず、いくつかの動きが組み合わされた踊りのモーションキャプチャも行う。踊りはYOSAKOI ソーランの踊りを取り上げる。また、実験により判明した実験結果とその考察を述べる。

\section{実験} \label{experiment}
本実験ではモバイルデバイスとしてPC一台を使用することとし、正面からのモーションキャプチャを行うものとする。また、カメラ内に入る被験者は一人を前提とする。\\実験の手順を以下に示す。

\begin{enumerate}
\item 本システムのURLにアクセスする
\item 演者の全身がカメラに映るように立つ
\item モーションキャプチャを開始する
\item 演者は演舞を開始する
\item 演舞が終了次第モーションキャプチャを終了する
\item 自身のPCにデータを保存する
\item サーバにデータを保存する
\end{enumerate}

\subsection{動作とデータの保存}
モーションキャプチャは行えるのか、データとして保存できるのかを検討する。以下に実験の項目を示す。

\begin{enumerate}
   \item 何もせずに立っているだけの状態
   \item 手を交差する動き
   \item 身体を捻る動き
   \item カメラの視界範囲内を約1m/sの速さで動く動き
   \item 背景と被験者の服装などを考慮した場合のモーションキャプチャ
\end{enumerate}

\subsection{YOSAKOI ソーランの踊りの保存}
YOSAKOI ソーランの曲の一部を保存する。曲の速さは民俗芸能・伝統芸能の動きに比べ速いため、1/2の速さでのモーションキャプチャを行う。曲は蒼嵐の持ち曲である「神々の舞い」である。

\section{実験結果と考察}
実験結果とその考察を述べる。

\subsection{実験結果}
第\ref{experiment}項の実験結果は以下のとおりである。

それぞれのキーポイントの座標を取得し、JSONファイルとして保存することが可能であった。身体の17か所のキーポイントをx座標とy座標の2Dの位置データとして取得可能だった。実際に取得したJSONデータの一部を以下に示す。

\begin{itembox}[l]{JSONデータの内容}
\begin{verbatim} 
{"data":[{"xs":{"input0":342.5265202512983,"input1":115.03797296892131,
"input2":349.4787793968156,...
...,"input33":393.17645929942586},"ys":{"output0":"l"}}]}
\end{verbatim}
\end{itembox}

\subsubsection{通常の動作}
何もせずに立っているだけの状態は問題なくモーションキャプチャを行うことが可能であった。図\ref{success}は上半身13か所のキーポイントが取得されているものである。

手を交差する動きはキーポイントの位置がずれる、認識されるキーポイントの数が増える等の失敗が見られた。図\ref{fail1}ではキーポイントの位置がズレていて、手首と腰のキーポイントがズレているのが確認できる。図\ref{fail2}では本来上半身13か所のキーポイントを取得するはずだが、16か所のキーポイントとして認識されている。身体を捻る動きはモーションキャプチャを行うことができた。カメラの視界範囲内を約1m/sの速さで動く動きはモーションキャプチャを行うことができたが、正確に記録できていない場合も確認できた。

背景と被験者の服装の色が異色の場合も同色の場合も同じようにモーションキャプチャを行うことが可能であった。図\ref{clothes}に背景と服装の色が同色の場合のモーションキャプチャを示す。

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{posenet_correct}
 \caption{正常なモーションキャプチャ}
 \label{success}
\end{figure}

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{posenet_discorrect2}
 \caption{手を交差する動き1}
 \label{fail1}
\end{figure}

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{posenet_discorrect}
 \caption{手を交差する動き2}
 \label{fail2}
\end{figure}

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{clothes}
 \caption{背景と服装の色が同色のモーションキャプチャ}
 \label{clothes}
\end{figure}

\subsubsection{YOSAKOI ソーランの踊り}
YOSAKOI ソーランの踊り「神々の舞い」を1/2の速さで記録することが可能であった。単純な動作とは違い、大胆な動きや腕を捻る動き等の複雑な動きも踊りの中には存在するが、記録することが可能であった。しかし、空中で回転をしながら踊る動き等の動作は記録に失敗することもあった。図\ref{hana1}、\ref{nami1}、\ref{hana2}、\ref{nami2}にYOSAKOI ソーランのモーションキャプチャの様子を示す。

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{hana}
 \caption{神々の舞い　花の表現1}
 \label{hana1}
\end{figure}

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{kurukuru}
 \caption{神々の舞い　波の表現1}
 \label{nami1}
\end{figure}

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{hana2}
 \caption{神々の舞い　花の表現2}
 \label{hana2}
\end{figure}

\begin{figure}[hbtp]
 \centering
 \includegraphics[keepaspectratio, scale=0.8]{nami}
 \caption{神々の舞い　波の表現2}
 \label{nami2}
\end{figure}

\subsection{考察}
今回の実験ではモーションキャプチャによってキーポイントを正確に取得できたものとそうでないものが確認されたが、使用しているモバイルデバイスの性能により結果が変わることが考えられる。今回の実験ではPCを使用したが、タブレットやスマートフォンで行った場合、正確に記録できないものやキーポイントそのものが認識されてないデバイスも確認できた。PCの性能によっても速い動きのキーポイント取得の結果に違いが出るようである。



\chapter{結論}
本研究ではモバイルデバイスを活用した踊りのデータ保存システムの構築を行った。モバイルデバイスによるモーションキャプチャをPoseNetを利用することによって可能にした。Web カメラでモーションキャプチャを行うことが可能であり、YOSAKOI ソーランの踊りを 1/2 の速さではあるが JSON ファイルで取得できていることから、民俗芸能・伝統芸能の踊りの記録にも活用できると考える。
従来のモーションキャプチャは高額な装置を購入しなければならず、個人では行うことが困難であった。しかし、本システムを活用することで、民俗芸能・伝統芸能の踊りを安価に記録・保存することが可能となった。また、キー操作やクリック等による容易な操作によりモーションキャプチャを行うことを可能とした。高額なモーションキャプチャと比較すれば精度は劣るものの、本研究では安価で容易にモーションキャプチャを行うことを可能にした。

本システムは2Dの位置座標を取得しているが、本来、モーションキャプチャは3Dのデータを取得するものである。3Dカメラを使用する等して2Dだけでなく、3Dのデータを保存することが望ましい。また、モバイルデバイスの性能により、モーションキャプチャを行えるものとそうでないものがあることを確認した。PC、タブレット、スマートフォン等のどのモバイルデバイスでも使用できるシステムにしていく必要がある。

本システムによって記録された2Dデータにより、踊りの記譜法の記録\cite{kifuhou}、2Dのキャラクター等に利用することを考える。見本となる演者と継承される側の演者のモーションデータを比較することにより、相互の違いを認識することに利用することも可能にする。
民俗芸能・伝統芸能の踊りは、人の動きや衣装、道具、舞台、楽曲等からなる総合的な表現である。そのため衣装や道具、大人数での演舞に関しては、モーションキャプチャで継承を行うよりも画像や動画を活用した方が優れている。楽曲等の音も他の方法で記録する必要がある。そこで本システムと他の継承方法を連携させ、より正確な継承を行うことを検討していく。

本研究で作成したシステムのQRコードとURLを以下に示す。

\includegraphics[keepaspectratio, scale=0.5]{qr}
\url{https://www.koeki-prj.org/~c118077/posenet.html}




\chapter*{謝辞} %章を付けずにタイトル表示
\addcontentsline{toc}{chapter}{謝辞} %章立てせずに目次に追加するおまじない
本研究を進めるにあたり、多くの方々にご指導を賜りました。\\

指導教官の広瀬雄二教授からは多大なご指導を賜りました。ここに深謝の意を表します。\\

三浦彰人特任助教には夜遅くまで温かいご助言を頂きました。感謝いたします。\\

同大学元講師の唐栄氏には本システム作成にあたり、適切なご指導を賜りました。感謝申し上げます。\\

実験のデータ収集にあたり、東北公益文科大学 YOSAKOI ソーラン部 蒼嵐の皆様にはご協力頂きました。本当にありがとうございました。\\

最後に、b研究室及びc研究室の皆様には、本研究の遂行にあたり多大なご助言、ご協力頂きました。ここに誠意の意を表します。

\begin{thebibliography}{99}
\bibitem{kiroku} 玉本英夫.``民俗芸能・伝統芸能をモーションキャプチャで記録する".文部科学省私立大学研究ブランディング事業 日本遺産を誇る山形県庄内地方を基盤とした地域文化とIT技術の融合による伝承環境研究の展開.2019（平成 29 年度～平 成 31 年度）,pp. 23-29.
\bibitem{kurokawa} 玉本英夫,唐栄.``黒川能のディジタル化を通した民俗芸能の踊り継承の新手法".東北公益文科大学総合研究論集:Forum 21.2020,pp.87-97.
\bibitem{ipsj} 広瀬雄二,三浦彰人,唐栄.``地域文化デジタルストリートマップ構築の取り組み".研究報告情報システムと社会環境(IS).2019,Vol.2019-IS-150,No.15,pp. 1-2.
\bibitem{miurasensei} 三浦彰人.``深度カメラと姿勢推定モデルを用いた3Dキャラクターリアルタイムモーションシステムの開発".東北公益文科大学総合研究論集:Forum 21.2020,pp.99-107.
\bibitem{kifuhou} 丹羽みずほ,木村健一.``YOSAKOI ソーランの舞踊記譜法のデザイン".日本デザイン学会 第63回研究発表大会.一般社団法人 日本デザイン学会.2016,pp382-383.
\bibitem{ouyou} 株式会社わくわくスタディワールド 瀬戸美月.徹底攻略 応用情報技術者教科書 令和3年度,株式会社インプレス,2020.
\bibitem{ouyou2} アイテック IT 人材教育研究部.高度午前I・応用情報午前試験対策書,株式会社アイテック,2021.
\bibitem{soumu} 総務省.``情報通信機器の保有状況".総務省.
\url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r01/html/nd232110.html}, (参照 2020-11-10).
\bibitem{ai} 総務省.``総務省 | 令和元年版 情報通信白書 | 進む「AIの民主化」".総務省.
\url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r01/html/nd113220.html}, (参照 2022-1-09).
\bibitem{kouseiroudou} 厚生労働省.``所得の分布状況".厚生労働省.
\url{https://www.mhlw.go.jp/toukei/saikin/hw/k-tyosa/k-tyosa09/2-2.html}, (参照 2021-11-27).
\bibitem{korona} 総務省.``新型コロナウイルス感染症(COVID-19)の対応について | 内閣官房新型コロナウイルス感染症対策推進室".内閣官房.
\url{https://corona.go.jp/dashboard/}, (参照 2022-01-11).
\bibitem{yosakoi} 一般社団法人YOSAKOIソーラン祭り組織委員会.``YOSAKOIソーラン祭り 公式ホームページ".YOSAKOIソーラン祭り 公式サイト.
\url{https://www.yosakoi-soran.jp/}, (参照 2021-10-26).
\bibitem{css} W3C.``CSS Snapshot 2020 W3C Working Group Note, 22 December 2020".
\url{https://www.w3.org/TR/css-2020/}, (参照 2021-12-02).
\bibitem{html}  WHATWG.``HTML Living Standard — Last Updated 30 November 2021".
\url{https://html.spec.whatwg.org/}, (参照 2021-12-02).
\bibitem{ruby}Ruby コミュニティ.``オブジェクト指向スクリプト言語Ruby".
\url{https://www.ruby-lang.org/ja/}, (参照 2021-12-02).
\bibitem{js} Ecma International.``Home - Ecma International".
\url{https://www.ecma-international.org/}, (参照 2021-12-03).
\bibitem{choo choo} The Coding Train.``thecordingtrain.com".
\url{https://thecodingtrain.com/}, (参照 2021-12-03).
\bibitem{posenet} TensorFlow.``ポーズ推定 | TensorFlow Lite".
\url{https://www.tensorflow.org/lite/examples/pose_estimation/overview?hl=ja}, (参照2022-01-11).
\bibitem{tensorflow} TensorFlow.``TensorFlow".
\url{https://www.tensorflow.org/}, (参照2021-12-06).
\bibitem{p5} p5 コミュニティ.``home | p5.js".
\url{https://p5js.org/}, (参照2021-12-06).
\bibitem{ml5} ml5 コミュニティ.``ml5js·Friendly Machine Learning For The Web".
\url{https://ml5js.org/}, (参照2021-12-06).
\bibitem{json} JSON.``JSON".
\url{https://www.json.org/json-en.html}, (参照2021-12-06).
\end{thebibliography}

\end{document}
