diff --git a/koki/resume/resume.pdf b/koki/resume/resume.pdf index 74ed06e..d978869 100644 --- a/koki/resume/resume.pdf +++ b/koki/resume/resume.pdf Binary files differ diff --git a/koki/resume/resume.tex b/koki/resume/resume.tex index 8598487..612ae10 100644 --- a/koki/resume/resume.tex +++ b/koki/resume/resume.tex @@ -12,59 +12,80 @@ \pagestyle{empty} %% タイトル %% -\title{酒田スタンプラリーの作成} +\title{朝日地域デジタルスタンプラリーの作成} %% 著者 %% -\author{c120020 伊藤皓紀} +\author{c120020A 伊藤皓紀} %% 日付 %% -\date{2022年6月7日} +\date{2022年11月08日} \begin{document} \twocolumn[ \maketitle - \begin{center} - {\bfserise 概要} - \end{center} - javascriptを用いたWeb上でのスタンプラリーシステムについて利用方法と実装されている機能についてまとめる。 - \vspace*{2em} + \vspace*{0em} ] -\section{目的} -スタンプラリーはその性質上,回遊が促進できる。複数のスポットを経由する中で,それまで訪れたことのない場所を通る機会が増えるため,観光地のみでなく周辺一帯の活性化にもつながる\cite{stamprally}。 +\section{背景} +現在,鶴岡市朝日地域では過疎化が問題となっている。その理由の一つとして,地域の魅力が観光客や住んでいる若年層に伝わっていないのではないかということが挙げられている。 -以上の理由から,観光地にスタンプラリーを設置することで,滞在時間の増加や全体を見て回ることによる満足度の増加が図ることができると考える。本チームでは,そういった滞在時間や満足度を増加できるようなスタンプラリーシステムの設計を目的とする。 -\section{利用方法} -スタンプラリーサイトの利用方法は以下のとおりである。 -\begin{enumerate} -\item Webサイトにアクセス -\item STARTボタンを押すとGPS情報の取得が開始する -\item 目的地付近に行くとポップアップウィンドウが表示されスタンプが画面下に追加される -\item 中断する際はSTOPボタンを押すことでGPS情報の取得を止めることができる -\item 最初からやり直す際はRESETボタンを押すとスタンプの取得情報と目的地にたどり着いた記録をリセットすることができる -\end{enumerate} +その課題の解決策として,スタンプラリーを用いることで地域の魅力的なスポットを効果的に紹介することができるのではないかと考える。また,それらの情報を地域住民が主体となって追加できるようにすることにより,より詳しい情報や現在は人が足りなくてなくなってしまった行事の情報などを載せることができる。それにより,朝日地域について世代を超えて話し合う機会を増やすことができると考える。 +\section{システムの概要} +Webサイトに移動すると2つの地図が並んで表示されている。一方には実際のマップが表示されており,もう一方には地図は表示されておらず,スポットにピンのみが刺さっている。STARTボタンを押すことでGPS情報の取得が開始され,それをもとに地図上にある現在地を示すピンが2つの地図で移動する。マップが表示されているほうを参考に,一定の距離までスポットに近づくと,新たにイラストの地図が展開される。さらにスポットに近づいていくとスタンプゲットのalertが表示され,スタンプ一覧にスタンプが追加される(図.\ref{figure:image})。 \begin{figure}[htb] \centering - \includegraphics[width=7cm]{stamp.pdf} - \caption{スタンプ} - \label{figure:stamp} + \includegraphics[width=7cm]{image.pdf} + \caption{動作イメージ} + \label{figure:image} \end{figure} -\section{追加できた要素} -これまで追加できたのは以下の要素である。 +\section{作成物} +現在作成中のスタンプラリーシステムに実装できている機能は以下のとおりである。(https:\slash\slash{}www.yatex.org\slash{}gitbucket\slash{}SKIP\slash{}stamp-2022\slash{}pages\slash{}koki\slash{}asahi.html) \begin{itemize} -\item 目的地の追加 -\item 最初の1回のみポップアップ表示されるようにするための判定 -\item 目的地にたどり着いたときにスタンプを追加する判定 -\item 地図上をクリックすることで行ったことにできるズルボタンの追加 +\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{今後の展望} -まず,スタンプをゲットした情報や目的地にたどり着いた情報がページ更新によって消えてしまう状態のため,localstrageを使ったデータの保存を実装していく。 +現在は,1人での使用にしか対応していないため,要素数が増えてくるとスタンプを収集することが困難になる。これに対して,WebSocketを活用して,複数人のチームでスタンプを共有できる機能を実装する予定である。 -また,目的地の場所やスタンプをゲットできる範囲が不明なため,地図上に表示できるようにしていきたい。 +また,現在はローカルに保存されているcsvのファイルを読み込んでいるが,実際に使ってもらうときには地域住民の方々が地点の追加をすることができるようにする必要がある。そのために,GoogleSpreadSheet等を使って誰でも編集できるようにした上で,そのデータを読み込めるようにしていく。 -他にも,現状はコンテンツがスタンプのみのため何らかのコンテンツを増やしていきたい。 \begin{thebibliography}{99} -\bibitem{stamprally}shachihataMedia. "スタンプラリーはイベント集客に最適!企画と告知のポイント解説". \url{https://www.shachihata.jp/media/corporate/20210806/}(参照 2022-06-07). -\bibitem{gazo}TechAcademy. "JavaScriptで画像を表示する方法を現役エンジニアが解説【初心者向け】". \url{https://techacademy.jp/magazine/20738}(参照 2022-05-30). -\bibitem{local}ONENOTES. "JavaScript localStorageへのデータの保存と取得・破棄、注意点など". \url{https://1-notes.com/javascript-localstorage/}(参照 2022-06-07). +\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}