diff --git a/paper/resume/skip-r.tex b/paper/resume/skip-r.tex new file mode 100644 index 0000000..18061a4 --- /dev/null +++ b/paper/resume/skip-r.tex @@ -0,0 +1,36 @@ +\documentclass[a4j]{jarticle} +\usepackage[dvipdfmx]{graphicx} +\usepackage{url} +\newcommand{\sr}{{\itshape Silk-Re:road}} + +% -*- coding: utf-8 -*- + +\topmargin -2cm +\textheight 26cm +\textwidth 16.5cm +\oddsidemargin -0.3cm +\pagestyle{empty} + +\title{位置と時代をリンクした体験獲得型地域文化デジタルアーカイブシステムの構築} +\author{広瀬研究室3年 C118227A 山名流聖} +\date{2021年1月20日} + +\begin{document} +\twocolumn[ +\maketitle +\begin{center} + {\bfseries 概要} +\end{center} +東北公益文科大学ではこれまで、地域が保有する歴史的建造物・物品や未来に残したい景観などをデジタル化し、電子地図上に配置して地域との関連を一瞥で判別可能とするシステムを開発してきた。その中で、空中からの俯瞰写真を連動させて視覚的に画像を提示する機構を構築したが、本研究ではそれを歴史的な広がりを持ったものに拡張し、文化的建造物の周辺での移動と時間軸の移動を対応付け、閲覧者の身体的アクションにより文化的施設に関する情報が得られるようなシステムを開発しその効果について検証した。 +\vspace*{2em} +] +\thispagestyle{empty} + +\section{背景} +東北公益文科大学(以下本学)では、平成29(2017)年度私立大学研究ブランディング事業での取り組みを皮切りに、地域が保有する歴史的建造物・物品や失われやすい景観や伝統的な舞などの「動き」をデジタル化し、後世に残すための取り組みを進めてきた。それらのうち、筆者らはデジタルアーカイブを電子的なWeb地図の上に掲載し、表現項目がどの地域のものなのかを一瞥で判別できるようにして、地域的な特性を見やすくする機構を開発してきた\cite{dstorymap}。本研究では、これまで実装したものに閲覧者の閲覧時の「動きや知識」などを加えた体験獲得型の要素、すなわちゲーミフィケーション要素を加え、歴史的資産を印象的に記憶に留めることを促進するようなシステムを設計し、開発した。 + + +\begin{thebibliography}{9} +\end{thebibliography} + +\end{document} \ No newline at end of file diff --git a/paper/skip_yamana.pdf b/paper/skip_yamana.pdf index ad3be30..aac5517 100644 --- a/paper/skip_yamana.pdf +++ b/paper/skip_yamana.pdf Binary files differ diff --git a/paper/skip_yamana.tex b/paper/skip_yamana.tex index 5536e34..5d1afbc 100644 --- a/paper/skip_yamana.tex +++ b/paper/skip_yamana.tex @@ -5,8 +5,9 @@ \usepackage[dvipdfmx]{graphicx} %\usepackage{listings, jlisting} %\usepackage[sectionbib]{chapterbib} -%\usepackage{ascmac} \usepackage{url} +\usepackage{listings,jlisting} +\usepackage{ascmac} \newcommand{\sr}{{\itshape Silk-Re:road}} \renewcommand{\baselinestretch}{1.06} \setlength{\textheight}{18cm} @@ -23,7 +24,59 @@ \section{技術面} \sr に実装されている,Webページやクイズのシステム等はHTML5,CSS3,JavaScriptを用いて作成した。具体的な概要は各機能に分け以下に示す。 \subsection{レスポンシブページ} -作成したWebページにはCSSに@mediaでスクリーン(画面,ウィンドウ)の縦横比を検知させている。これによりページデザインは縦横画面両対応になっている。 +作成したWebページにはCSSの@mediaを用いることでスクリーン(画面,ウィンドウ)の縦横比を検知させている。これによりページを開いているスクリーンが縦長であれば縦画面用のページが表示され,横長であれば横画面用の画面が表示される(図\ref{tate},図\ref{yoko})。 +\\\quad 縦横比による画面切り替えの記述は以下に示す。 +\begin{itembox}[l]{縦画面表示} +\begin{lstlisting} +@media screen and (orientation: portrait) { + header{ + margin: 0; + padding: 0; + text-align: center; + } + .title{ + width: 80%; + } + .center { + position: absolute; + top: 30%; + left: 50%; + transform: translateX(-50%); + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + z-index: 1; + } + 〜以降スタイルの記述〜 +} +\end{lstlisting} +\end{itembox} + +\begin{itembox}[l]{横画面表示} +\begin{lstlisting} +@media screen and (orientation: landscape) { + header{ + margin: 0; + padding: 0; + text-align: center; + } + .title{ + width: 15%; + height: 3% + } + .center { + position: absolute; + top: 13%; + left: 50%; + transform: translateX(-50%); + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + z-index: 1; + } + 〜以降スタイルの記述〜 +} +\end{lstlisting} +\end{itembox} +また,ページ内には背景やキャラクター画像が配置されるスペースやテキストが表示されるボックスを配置しており,それぞれの要素に対してスクリーンに合わせた大きさになるように設定を行っている。 \begin{figure}[tbp] \centering @@ -34,4 +87,5 @@ + \end{document} \ No newline at end of file