%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
%\usepackage{ascmac}
\usepackage{geometry}
\usepackage{url}		% 文中にURLを書くときは \url{} で括る
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}
\usepackage{ascmac}

\title{リアルタイムコメントが可能な動画教材サイト構築の提案}
\author{広瀬研究室4年 \\C1200274 伊藤優}
\date {}

\begin{document}
\maketitle
\begin{center}
 {\bfseries 概要}
\end{center}
2020年から始まったCOVID-19の感染拡大による影響でオンライン普及率が増加した環境では，相対的にオンライン上での教材の価値が高まる。しかし，専門性の高い教材は自前で作成する必要があり，その製作には少なからず業務的負担がかかる。そのため，本研究では編集等の大きな労力を必要としない動画教材を作成できる，リアルタイムでコメント可能な動画教材システムを提案する。（400〜800字程度書く）

\tableofcontents

\chapter{はじめに}
本章では，研究を行なっていく上での背景や目的について説明する。
\section{背景}
2020年から始まったCOVID-19の感染拡大による影響で同年4月に緊急事態宣言が発令された。それによりオンラインでの商品注文・購入，インターネットでの動画視聴などの自宅で消費できる「巣ごもり消費」が伸びており、消費行動に変化が生じている\cite{digital}。オンラインによる教育面を見ても高校生については，遠隔・オンライン教育を受けたのは、第1回調査では50.0％、第2回調査ではさらに減少し、29.2％となっている。大学生・大学院生については，第1回調査では95.4％，第2回調査でも87.7％と依然として高い水準にある\cite{online}。このことから新型コロナウイルスの感染拡大により目に見える市場への影響だけではなく全国におけるオンライン普及率は意図せずに増加したといえる。


また，以上のようにオンライン上でやり取りが増えた場合，相対的に使用される教材もオンライン上であることへの需要も高まるといえる。オンライン上の教材は汎用的なものは探せばすぐに見つけることができる。だが，逆に専門性の高い内容については論文としてならまだしも，教材としての資料は探すというのは簡単ではない。その場合としては必要となった教材は自前で用意する必要も出てくる。しかし教材を作成するということは少なくとも製作者への負担となり得る。そのため，教材を提供する側が大きな労力を必要としないオンライン教材は上記の問題を解決し，オンライン上で行われる授業の質を上げる一因となるのではないかと考えた。
\begin{figure}
 \centering	
\includegraphics[width=7cm]{online.png}
 \caption{オンライン教育（授業）の受講状況（高校生／大学生・大学院生）}
 \label{figure:online}
\end{figure}
%WebSocketとは，WebサーバとWebブラウザの間で双方向通信できるようにする技術仕様のことである。Webコンテンツの伝送に用いられるHTTPは通常，クライアントからの要求にサーバが応答を返すという形でしか通信できないが，WebSocketではサーバ側から任意のタイミングで送信を開始でき，プッシュ型の情報配信アプリケーションを手軽に実装することが可能である。\cite{WebSocket}。オンライン普及率が高まった近年，WebSocketのようなサーバとクライアントとの双方向通信によるシステム開発が必要とされるのではないかと考えた。
\section{目的}
本研究では，オンライン普及率が増加した環境で影響を受ける学生が使用するために，WebSocketにおける双方向通信を使用した，リアルタイム参照可能なコメントを書き込める動画教材を作成する。そうすることで，オンラインなどでの授業形態をサポートすることを目的とする。
\chapter{先行研究}
本章では，オンデマンド動画教材やリアルタイム参照可能なコメントを用いた先行研究について説明する。

\subsection{動画教材を用いた反転授業の有効性について}
小林，池田らの研究ではオンデマンド動画教材を活用し，高等専門学校で授業の前にどこでも確認可能なオンデマンド動画教材を準備することで，授業前に学生が動画で予習可能にした\cite{kanren1}。この研究では実際に受けた学生へのアンケートも行っており，動画を使用した事前学習は動画データが保管されているため見直しができる点や，難しい内容も事前に理解や調べることが可能な点が大きく評価され，教材としてオンデマンド動画は有用であるといえる。
（・前提　・問題としている点　・提案　・結論　・課題　をまとめて10行か20行にまとめる）

\subsection{オンライン授業におけるリアルタイムコメントの教育効果について}
中川の研究では，「CommentScreen」というアプリケーションを使用することでオンライン授業中にコメントがリアルタイムで画面上に数秒間表示されるといった状況下で授業を行い，学生の参加頻度や参加姿勢に対してのデータを収集した\cite{kanren2}。その結果，コメント投稿は一人あたり平均2.7個，アイコンでの反応数は平均42.7個とかなり盛況と言える結果になった。そのため，リアルタイムでコメントを確認できるだけでも，人は人とのつながりを実感でき，能動的に授業に取り組めるということが確認出来たといえる。
（同じく）

\section{先行研究の問題点や利点}

（自分の提案の前ふりとなるような流れを作る）

\chapter{システム設計}
本章では、本研究のシステム要件や使用するシステムの開発環境について説明する。
\section{システム要件}
（いつどこでだれがどのような条件下で使うためのものなのか30行程度で先に明記する。）
\section{システムの開発環境}
\begin{figure}[htb]
    \centering	
   \includegraphics[width=7cm]{system0.png}
    \caption{システム設計図}
    \label{figure:system0}
   \end{figure}
% \begin{itemize}
% \item HTML(HTML5)
% \item JavaScript
% \item WebSocket
% \item Ruby(ruby 2.7.0)
% \end{itemize}
\begin{center}
    \begin{table}
        \centering	
        \caption{システムの開発環境}
        \begin{tabular}{|c|c|}
          \hline
          \textbf{コンポーネント} & \textbf{バージョン} \\
          \hline
          Webサーバ (Apache) & 2.4.58\cite{Apache} \\
          \hline
          HTML & HTML5\cite{HTML} \\
          \hline
          CSS & CSS3\cite{CSS} \\
          \hline
          JavaScript & ECMAScript 2023\cite{JavaScript} \\
          \hline
          データベースサーバ (Ruby) & 3.2.2\cite{Ruby} \\
          \hline
        \end{tabular}
        
        \label{figure:kankyo}
    \end{table}
 \end{center}
    
% \section{HTML}
% HTML\cite{HTML}とはWebページを作成，デザインするための言語である。実際に動画を再生しコメントできるWebページ作成にし，使用するユーザーが扱いやすくデザインするために使用する。
% \section{JavaScript}
% JavaScript\cite{JavaScript}はWebページを主に複雑な操作動作を可能にすることができるプログラミング言語である。
% WebページやWebSocketを使用する際の動作を管理するために使用する。
% \section{Ruby}
% Rubyは1995年にプログラミング言語の一つで，オブジェクト指向プログラミングを中心に設計されている。本研究では主にWebSocketサーバーを構築するために使用する。Rubyは，WebSocketプロトコルに基づいてクライアントとの双方向通信を処理する役割を果たし，WebSocketサーバーを構築することで，クライアントからのWebSocket接続を待ち受け，リアルタイムなデータの送受信を可能にする。

\section{Websocket}
WebSocketとは，WebサーバとWebブラウザの間で双方向通信できるようにする技術仕様のことである。WebSocketが使用されるまではHTTPでのリクエストとレスポンスの繰り返しで通信していた。HTTP通信では，リソース単位でしか要求と習得が出来ないこと，要求をクライアントからしか送れないこと，HTTPヘッダが大きいことといった欠点が挙げられていた。そこでHTTP通信と同じクライアント=サーバ型ではあるがクライアントとサーバからデータを送受信できるWebSocketの双方向通信が注目されるようになった。この双方向通信というのは「制御された環境下で信用できないコードを走らせているクライアント」と「そのコードからの通信に対するオプトインを備えるリモートホスト」の間で通信することである。ここでいう「制御された環境下で信用できないコードを走らせているクライアント」は実際に使用するユーザ側(クライアント側)のことを指し，「そのコードからの通信に対するオプトインを備えるリモートホスト」とは通信するサーバ側のホストのことを指す。実際に使用する際はインターフェイスやメソッドはWebSocket API\cite{rfc}によって定義されているものを使用し，URIは\verb|ws://~|(HTTPにおける「\verb|http://~|」)・\verb|wss://~|(HTTPにおける「\verb|https://~|」)\cite{api}を使用する。
（本来なら詳細不要　システムについてあまりかけないならwsの概念と具体的な記述例について4ページ程度に説明　EventMachineとはなにか等）
\section{Video.js}
Video.js\cite{videojs}はHTML5とモダンなウェブブラウザ技術を活用して構築されたオープンソースのWebビデオプレーヤーライブラリである。このライブラリはウェブサイトやウェブアプリケーションで動画を再生するためのプログラムやコードの集合体であり，HTML5ビデオとモダンなストリーミング形式，そしてYouTubeやVimeoもサポートしている。このライブラリは，HTML5の標準ビデオ要素を基盤にしており，さまざまなブラウザで一貫した動作を提供できるためユーザーの環境に依存しないビデオ再生をサポートすることができる。
\begin{figure}[htb]
    \centering	
   \includegraphics[width=7cm]{video1.png}
    \caption{Video.jsを使用せずにHTML5のvideoタグを利用して動画再生した場合のUI一覧（環境によってUIが異なる）}
    \label{figure:video1}
\end{figure}
\begin{figure}[htb]
    \centering	
   \includegraphics[width=7cm]{video2.png}
    \caption{Video.jsを使用して動画再生した場合のUI一覧（すべての環境でUIが同じ）}
    \label{figure:video2}
\end{figure}
\begin{itembox}[c]{Video.jsを導入する方法}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<!-- Video.js CSSの読み込み -->
<link href="https://vjs.zencdn.net/
7.14.3/video-js.css" rel="stylesheet">
<!-- Video.js本体の読み込み -->
<script src="https://vjs.zencdn.net/
7.14.3/video.js"></script>
</head>
<body>
<video id="my-video" 
class="video-js" 
controls preload="auto" 
width="640" 
height="360" 
data-setup="{}">
<source src="example.mp4" 
type="video/mp4">
</video>
</body>
</html>
\end{verbatim}
\end{itembox}
（↑使わないときと比べてどう違うのか　←コードについて？　挙動について？）
\chapter{システム概要}
本章では，システムの実際の動作概要や実装している機能についての説明をしていく。
\section{システムの動作概要}
動画を投稿する側は作成したサイトに使用する講義動画ファイルのURLを組み込むだけで投稿できるように作成し，動画を見る側は動画を確認しながらコメントできるようにする。
他にもリアルタイムで流れるコメントだけではなくWebページ下部に動的なアニメーションがついていない確認しやすいコメント欄も追加してリアルタイムコメントとの相違点や使用感を確認していく。
（システム概要もっと詳しく　どこの誰がどこのサイトを使用するか予め絞り込んでいく　投稿ページについての説明　「コメント」についてニコニコ動画を知らない人にも伝わるように説明）

\begin{figure}
 \centering	
\includegraphics[width=7cm]{system1.png}
 \caption{システムの概要図その1}
 \label{figure:system1}
\end{figure}

\begin{figure}
 \centering	
\includegraphics[width=7cm]{system2.png}
 \caption{システムの概要図その2}
 \label{figure:system2}
\end{figure}
% \section{動画の受け渡しについて}
\section{WebSocketサーバとの通信}
リアルタイム機能はつけれたからその説明を書く。
実際の動作画面もつける。
（）
\section{コメント機能}
コメントの送受信について書く

\chapter{実験}
5段階評価のレーダーチャートでネクストクラウドやYoutubeと比較

\chapter{結論}
\section{システムの現状と課題点}
\section{今後の展望}



	最後に参考文献を必ず正しく記載する。
	% 原稿がどの程度のクォリティなのか参考文献である程度分かる。

\begin{thebibliography}{9}
    \bibitem{digital} 総務省.``第1節　コロナ禍で拡大したデジタル活用.''.
        \url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r03/html/nd121310.html},(参照2022-11-08)
    \bibitem{online} 総務省.``第2節　コロナ禍における公的分野のデジタル活用.''.
        \url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r03/html/nd122230.html},(参照2022-11-08)
     \bibitem{rfc} ``RFC 6455 — The WebSocket Protocol(日本語訳)''.
         \url{https://triple-underscore.github.io/RFC6455-ja.html#section-1.5},(参照2022-12-11)
       \bibitem{api} ``WebSockets Living Standard — 2022年 6月 2日(日本語訳)'' .
         \url{https://triple-underscore.github.io/WebSocket-ja.html#the-websocket-interface},(参照2022-12-12)
     \bibitem{kanren1} 小林和也,池田宏. ``オンデマンド動画教材を活用した反転授業の実践と有効性".東京都立産業技術高等専門学校研究紀要 .2023-03.p142-149
    \bibitem{kanren2} 中川晃. ``遠隔授業における「時刻同時コメント」の教育効果に関して".
    \url{https://www.jstage.jst.go.jp/article/ccra/4/0/4_26/_pdf/-char/ja}, (参照2023-5-23)
    \bibitem{Apache}SUPPORT APACHE.``APACHE HTTP SERVER PROJECT". 
    \url{https://httpd.apache.org/download.cgi},(参照2023-11-21)
    \bibitem{HTML} W3C, HTML. ``.HTML spec - HTML Standard- WhatWG".
    \url{https://www.jstage.jst.go.jp/article/ccra/4/0/4_26/_pdf/-char/ja},(参照2023-11-16)
    \bibitem{CSS} MDN. CSS. ``CSS - MDN Web Docs".
    \url{https://developer.mozilla.org/en-US/docs/Web/CSS},(参照2023-11-17)
    \bibitem{JavaScript} MDN. JavaScript. ``JavaScript - MDN Web Docs".
    \url{https://developer.mozilla.org/ja/docs/Web/JavaScript},(参照2023-11-17)
    % \bibitem{api} WebSocket. ``WebSockets Living Standard — 2022年 6月 2日(日本語訳)'' (参照2022-12-12)
    % \url{https://triple-underscore.github.io/WebSocket-ja.html#the-websocket-interface}
    \bibitem{Ruby} Ruby. ``オブジェクト指向プログラミング言語　Ruby". 
    \url{https://www.ruby-lang.org/ja/},(参照2023-11-21)
    \bibitem{videojs} Video.js. ``VIDEO JS". 
    \url{https://videojs.com/city},(参照2023-09-08)
\end{thebibliography}

\end{document}