\documentclass[a4j]{jarticle}
% -*- coding: utf-8 -*-
\addtolength{\topmargin}{-1cm}
\addtolength{\textheight}{2cm}
\addtolength{\textwidth}{2cm}
\addtolength{\oddsidemargin}{-1cm}
\addtolength{\evensidemargin}{-1cm}
\usepackage[dvipdfmx]{graphicx}
\usepackage{url}

\pagestyle{empty}

%% タイトル %%
\title{酒田スタンプラリーの作成}

%% 著者 %%
\author{スタンプラリー班}

%% 日付 %%
\date{2022年5月30日}

\begin{document}
\begin{center}
  {\bfseries 概要}
\end{center}
javascriptを用いたWeb上でのスタンプラリーについて利用方法をまとめる。
\vspace*{2em}

\section{利用方法}
\begin{enumerate}
\item Webサイトにアクセス
\item STARTボタンを押すとGPS情報の取得が開始する
\item 目的地付近に行くとポップアップウィンドウが表示されスタンプが画面下に追加される
\end{enumerate}
\section{追加できた要素}
\begin{itemize}
\item 目的地の追加
\item 最初の1回のみポップアップ表示されるようにするための判定
\item 目的地にたどり着いたときにスタンプを追加する判定
\end{itemize}

\begin{figure}[htb]
  \centering
  \includegraphics[width=7cm]{stamp.png}
  \caption{スタンプ}
  \label{figure:stamp}
\end{figure}

\section{今後の展望}
まず，スタンプをゲットした情報や目的地にたどり着いた情報がページ更新によって消えてしまう状態のため，localstrageを使ったデータの保存を実装していく。
また，目的地の場所やスタンプをゲットできる範囲が不明なため，地図上に表示できるようにしていきたい。
他にも，現状はコンテンツがスタンプのみのためコンテンツを増やしていきたい。

\begin{thebibliography}{99}
\bibitem{gazo}TechAcademy,"JavaScriptで画像を表示する方法を現役エンジニアが解説【初心者向け】".\url{https://techacademy.jp/magazine/20738}(参照 2022-05-30)
\end{thebibliography}
\end{document}