diff --git a/paper/c119115-thesis.pdf b/paper/c119115-thesis.pdf index 8dfa271..9f17c67 100644 --- a/paper/c119115-thesis.pdf +++ b/paper/c119115-thesis.pdf Binary files differ diff --git a/paper/c119115-thesis.tex b/paper/c119115-thesis.tex index 42dff5b..5adcfcf 100644 --- a/paper/c119115-thesis.tex +++ b/paper/c119115-thesis.tex @@ -505,7 +505,7 @@ 入力フォームではユーザ自身がテキストの入力を行う。画像ファイルの投稿フォー ムには HTML から accept 属性で jpg, jpeg, gif, png, svg形式を指定することで,投稿できる 画像の種類を限定している。 - +設定した内容は図\ref{fig:home}のように反映される。 \begin{figure}[htb] \centering \includegraphics[width=15cm]{./img/nocode-AR-edit.pdf} @@ -513,12 +513,19 @@ \label{fig:UI} \end{figure} +\begin{figure}[htb] + \centering + \includegraphics[width=5cm]{./img/home.pdf} + \caption{ホーム画面} + \label{fig:home} +\end{figure} \section{各スポットの設定}\label{sec:setting_spot} スポットの設定は,スポットの名前,場所を示す緯度と経度,スポットの画像 -を設定することができる(図\ref{fig:spot_image1},図\ref{fig:spot_image2})。場所の設定は,Leaflet.jsを -使用し,マップの表示とマップ上で設定したい場所をクリックした時にその緯度,経度を取得 -が可能である。 +を設定することができる(図\ref{fig:spot_image1},図\ref{fig:spot_image2})。 +場所の設定は,JavaScript ライブラリの Leaflet.jsを使用し, +マップの表示とマップ上で設定したい場所をクリックした時にその緯度と経度の取得 +が可能である。各設定をした後保存ボタンをクリックすることでデータベースに反映される。 \begin{itembox}[l]{spot.vueマップの表示とクリックした時に位置情報の取得} \begin{verbatim} @@ -561,16 +568,21 @@ \caption{スポットの位置情報の設定} \label{fig:spot_image2} \end{figure} + +\newpage \subsection{位置呼応マップ} 利用者が,実際に現地に行きスポットとの距離に応じて画面を展開するのが位 置呼応マップである。これには,HTMLのGeoLocationAPIと, -JavaScript ライブラリ Leaflet.js を利用し,現在地点に連動して地図を表示さ +Leaflet.js を利用し,現在地点に連動して地図を表示さ せる機能を実装した。 GPS センサを装備しているモバイルデバイスでマップパートの Web ページ にアクセスすることでデバイスの位置情報が送信され,その都度地図上に利用 -者の現在位置が反映される。また,取得した位置情報と目標物の距離を算出し -あらかじめ定めた閾値以下になった場合に自動的に画面が遷移し,次に述べる -AR パートに移動する。 +者の現在位置が反映される。また,取得した位置情報とスポットの距離を算出し +あらかじめ定めた閾値以下になった場合に自動的に画面が遷移し,ARパートに移動する。 +その他に,スポットの位置を確認できるように検索機能を実装。 +スポットの名前をマップ上部に検索あるボタンを押すと,スポット一覧が表示され, +確認したいスポットの名前を入力か選択するとマップの中心位置がそのスポットに +設定される(図\ref{fig:map})。 \begin{itembox}[l]{map.ejs位置情報の取得} \begin{verbatim} @@ -586,10 +598,18 @@ }\end{verbatim} \end{itembox} +\begin{figure}[htb] + \centering + \includegraphics[width=7cm]{./img/map.pdf} + \caption{マップ画面} + \label{fig:map} +\end{figure} +\newpage \section{ARパートの設定} 図\ref{fig:ar-tpl}は,3種類のARを表示しそれらからを選択, また,ユーザが所持しているARキャラクターの投稿,保存できるページである。 +キャラクターには獲得時のアニメーションを付与してある。 \begin{figure}[htb] \centering @@ -597,13 +617,36 @@ \caption{ARキャラクターのテンプレート機能} \label{fig:ar-tpl} \end{figure} - +% \subsection{} +\newpage \section{公開機能} 作成したスタンプラリーをすぐに公開するためのページである。 URLはテスト用URLと公開ようURLがあり,テスト用URLは常にレンダリングされており作成した スタンプラリーの状態を確認することができる。公開用URLは, 公開ボタンをクリックすることでデータベースに情報が送信され,サーバーサイドでレンダリング されるようになる。 +URLはスタンプラリーの作成時に作成されており,2つのURLの区別するために +テスト用URLには作成されたURLに「/prebiew」という文字列を付けている。 +また,URLは重複しないように生成する。 + +\begin{itembox}[l]{urlの生成} +\begin{verbatim} + const createUuid = () => { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (a) { + let r = (new Date().getTime() + Math.random() * 16) % 16 | 0, + v = a == 'x' ? r : (r & 0x3) | 0x8 + return v.toString(16) + }) + } +\end{verbatim} +\end{itembox} + +\begin{figure}[htb] + \centering + \includegraphics[width=15cm]{./img/public_setting.pdf} + \caption{公開機能} + \label{fig:public_setting} +\end{figure} \chapter{システム評価or実験} diff --git a/paper/img/home.pdf b/paper/img/home.pdf new file mode 100644 index 0000000..f8748ba --- /dev/null +++ b/paper/img/home.pdf Binary files differ diff --git a/paper/img/map.pdf b/paper/img/map.pdf new file mode 100644 index 0000000..190ae46 --- /dev/null +++ b/paper/img/map.pdf Binary files differ diff --git a/paper/img/public_setting.pdf b/paper/img/public_setting.pdf new file mode 100644 index 0000000..84e28a3 --- /dev/null +++ b/paper/img/public_setting.pdf Binary files differ