\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}
\usepackage{ascmac}

\pagestyle{empty}

%% タイトル %%
\title{朝日地域デジタルスタンプラリーの作成}

%% 著者 %%
\author{c120020A 伊藤皓紀}

%% 日付 %%
\date{2022年11月08日}
\begin{document}
\twocolumn[
  \maketitle
  \vspace*{0em}
]
\section{背景}
現在，鶴岡市朝日地域では過疎化が問題となっている。その理由の一つとして，地域の魅力が観光客や住んでいる若年層に伝わっていないのではないかということが挙げられている。

その課題の解決策として，スタンプラリーを用いることで地域の魅力的なスポットを効果的に紹介することができるのではないかと考える。また，それらの情報を地域住民が主体となって追加できるようにすることにより，より詳しい情報や現在は人が足りなくてなくなってしまった行事の情報などを載せることができる。それにより，朝日地域について世代を超えて話し合う機会を増やすことができると考える。
\section{システムの概要}
Webサイトに移動すると2つの地図が並んで表示されている。一方には実際のマップが表示されており，もう一方には地図は表示されておらず，スポットにピンのみが刺さっている。STARTボタンを押すことでGPS情報の取得が開始され，それをもとに地図上にある現在地を示すピンが2つの地図で移動する。マップが表示されているほうを参考に，一定の距離までスポットに近づくと，新たにイラストの地図が展開される。さらにスポットに近づいていくとスタンプゲットのalertが表示され，スタンプ一覧にスタンプが追加される(図.\ref{figure:image})。
\begin{figure}[htb]
  \centering
  \includegraphics[width=7cm]{image.pdf}
  \caption{動作イメージ}
  \label{figure:image}
\end{figure}
\section{作成物}
現在作成中のスタンプラリーシステムに実装できている機能は以下のとおりである。(https:\slash\slash{}www.yatex.org\slash{}gitbucket\slash{}SKIP\slash{}stamp-2022\slash{}pages\slash{}koki\slash{}asahi.html)
\begin{itemize}
\item CSVファイルの読み込み

  csv.min.jsを使い，別に用意してあるcsvファイルから,地点情報(緯度・経度),地点の名称,地点の詳細，スタンプを入手した際のコメントを読み込むことのできるようになっている。

  やり方は，はじめにファイルを読み込みcsvという変数に一行づつ入れていく。次に，for文でcsvの要素分ループする。取得した緯度(x.lat)と経度(x.lng)を変数に地点情報(L.latLng)として代入する。地点情報・コメント・地点の詳細をそれぞれ用意した配列にpushを使って入れていく。同じように，マーカー情報も地点情報を使いマーカーの位置を設定し，bindPopupで地点の名称が表示されるようにしてマップに設置(addTo)した状態で配列にpushする(図.\ref{figure:csv})。
  \begin{figure}[htb]
    \centering
    \includegraphics[width=7cm]{csv.pdf}
    \caption{csvの読み込み}
    \label{figure:csv}
  \end{figure}
\item スタンプを地点の数分用意できるように設定

  csvファイルを編集するたびにhtmlの中のimg要素数を増やすことは大変な上，要素の数に差がでることも考えられるため，自動で地点の数分スタンプの枠を用意するようにしている。
  
  csvを読み込んだ際に,地点が増えたらcreateElementでimg要素を作成し，idをimage(n),srcをスタンプ入手前の画像に設定する。htmlの中にスタンプ用の要素を用意しておき，getElementByIdで要素を探し出す。その中にappendChildでimg要素を追加する。
\item 各地点の判定
  
  一度スタンプを取得したスポットで何度もアラートなどを出ないようにする必要がある。そのために，GPS情報を入手して現在の位置情報が更新されるたびに以下の判定が実行される。
  
  はじめにfor文でtiten配列の要素数分ループさせる。distanceToで現在地とそれぞれのスタンプポイント(titen[i])との距離を比較する。その差が一定距離以下(今回は50)だった場合，judgeという配列を確認する。judge[i]が存在しなかった場合は，judge[i]をtrueにしてalertでスタンプゲットを伝える。そして，getElementByIdでimageのi番目を探し出し，img.srcをスタンプ画像に置き換える。最後にマーカーをsetIconで色を変更したものに置き換え，ポップアップコメントをcomment[i]に置き換える(図.\ref{figure:judge})。
  \begin{figure}[htb]
    \centering
    \includegraphics[width=7cm]{judge.pdf}
    \caption{スタンプゲットの判定}
    \label{figure:judge}
  \end{figure}
\item マップ上に画像を重ねる
  
  画像を配置したい場所の対角線上の地点aとbを配列に入れる。L.imageOverlayで重ねたい画像と地点aとbの情報が入った配列を指定し，addToでマップの上に重ねることができる(図.\ref{figure:map})。
  \begin{figure}[htb]
    \centering
    \includegraphics[width=7cm]{map.pdf}
    \caption{マップ上に画像を重ねる}
    \label{figure:map}
  \end{figure}
\end{itemize}

\section{今後の展望}
現在は，1人での使用にしか対応していないため，要素数が増えてくるとスタンプを収集することが困難になる。これに対して，WebSocketを活用して，複数人のチームでスタンプを共有できる機能を実装する予定である。

また，現在はローカルに保存されているcsvのファイルを読み込んでいるが，実際に使ってもらうときには地域住民の方々が地点の追加をすることができるようにする必要がある。そのために，GoogleSpreadSheet等を使って誰でも編集できるようにした上で，そのデータを読み込めるようにしていく。

\begin{thebibliography}{99}
\bibitem{color}ITを分かりやすく解説. ``【OpenStreetMap】Leafletでマーカーの色を変更する方法".\url{https://medium-company.com/leaflet%E3%81%A7%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%AE%E8%89%B2%E3%82%92%E5%A4%89%E6%9B%B4/}, (参照 2022-11-07).
\bibitem{roop}mdn web docs.``ループと反復処理".\url{https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration}, (参照 2022-11-06).
\bibitem{csvfile}Qiita. ``JavaScriptでCSVファイルを2次元配列に変換".\url{https://qiita.com/rubyfmzk_/items/1902453ca13e4d8662ee},(参照 2022-11-07).
\bibitem{csv}algorithm.joho.info.``【Javascript】CSVファイルを配列に変換して転置".\url{https://algorithm.joho.info/programming/javascript/load-csv-array-transpose/},(参照 2022-11-07).
\end{thebibliography}
\end{document}