\sr のVRパートでは，現地で撮影した360° パノラマ画像をA-Frameを用いてVR画像として表示している。以下ではA-Frameの概要と実際のソースコードをもとにVRインタラクションに関して説明する。
\subsubsection{A-Frame}
A-Frameは，WebVRの作成を行うオープンソースのWebフレームワークである。利用するためには，HTMLファイル内のscriptタグにA-Frameを読み込ませる必要がある。その後，同じHTMLファイル内に専用のタグを記述していくことでVRの作成が可能であり，そこに画像やオブジェクト，カーソル等を追加し容易にVR空間を作成することができる。また，WebGLやWebVR対応のブラウザーがあればA-Frameは動作するため，デバイスの互換性は高く，広い範囲で動作対応している。
\subsubsection{VRの実装}
A-Frameを用いてWebVRを実装するにあたり，実際にVRパートに追加した機能を以下に示す。
\begin{itemize}
\item 注視することでクリックイベントが呼ばれる視点カーソル
\item 視点カーソルのアニメーション
\item クイズページへ移行するオブジェクト
\end{itemize}

VRの実装はHTMLファイル内で行なっており，クリックイベントやページ移行の処理はJavaScriptで行なっている。注視によるクリックイベントの呼び出しは，<a-entity>タグ内でタイムアウトする秒数を設定しておき，規定の秒数後にクリックイベントが発生するという形で実現している。以下にVR実装のソースコードを示す。

\begin{itembox}[l]{VRの実装} 
\begin{verbatim}
<a-scene id="vr" embedded>
//ページにWebVRを作成する

  <a-assets>
    <img id="360" src=　・・・>
//画像を事前に読み込む
  </a-assets>
  <a-sky src=　・・・>
//背景に画像を設定する
  </a-sky>
  <a-camera position="0 0 0">
//カメラの初期位置を設定する
   "x y z"軸で指定する
    <a-entity cursor=　・・・>
//カーソルのエンティティを設定する
      <a-animation begin=　・・・>
//カーソルがオブジェクトに触れた
     時のアニメーションを設定する
      </a-animation>
    </a-entity>
  </a-camera>
  <a-sphere position ・・・>
 //オブジェクトを配置する
  </a-sphere>
  
</a-scene>
\end{verbatim}
\end{itembox}