\subsection{インターフェースWebのレスポンシブデザイン}
\label{respdesign}
今回のシステムは，スマートフォンなどの小型モバイルデバイスを用いて，
自宅，あるいは現地に移動しての利用を想定している。
%また，地域の「思い」を伝えることを主眼としながらも，
%それが敬遠されにくくなるようゲーミフィケーション要素を採り入れる
%工夫を施した。
たとえば最初に自宅等のPC利用時になんらかの切掛で本システムの画面にアクセ
スした場合は，一般的なPC端末の横長画面でのアクセスが想定される。その後，
仮に現地に移動することになった場合は，モバイルデバイス上に表示される地図
を見ながら歩く場合は画面を縦置きにして見ることが想定される。


いずれの場合もCSS Level3 の @media 規則\cite{w3c-css3media}を用いること
でスクリーン(画面,ウィンドウ)の縦横比を検知させそれに合った比率の画面の
提示が可能となる。図~\ref{media}に示したような記述によって得られる実際の
画面の様子が図~\ref{tate}，\ref{yoko}である。


\begin{figure}[tb]
 \begin{minipage}[t]{0.48\columnwidth}
 \begin{itembox}[l]{縦長画面用定義} 
\begin{verbatim}
@media screen and 
(orientation: portrait) {
 /* スタイルの記述 */
}
\end{verbatim}
 \end{itembox}
 \end{minipage}
 \begin{minipage}[t]{0.48\columnwidth}
 
 \begin{itembox}[l]{横長画面用表示}
 \begin{verbatim}
@media screen and 
(orientation: landscape) {
 /* スタイルの記述 */
}
\end{verbatim}
 \end{itembox}
 \end{minipage}
 \caption{縦横自動検知デザイン切り替えのための記述}
 \label{media}
\end{figure}




\begin{figure}[tbp]
\centering
\subfigure[縦長表示]{
\includegraphics[width=0.25\columnwidth]{page_tate.pdf}
%\caption{縦画面}
\label{tate}
}
%\end{figure}
%\begin{figure}[tbp]
%\centering
\subfigure[横長表示]{
\includegraphics[width=0.65\columnwidth]{page_yoko}
\label{yoko}
}
\caption{縦置き横置きに連動したデザイン}
\end{figure}

%ロード画面を
%表示させるHTMLファイル内のscriptタグにjQueryを指定するURLを記述すること
%でライブラリの利用を可能にしている。実際のロード画面は，gif画像とNow
%Loading...の文字をHTML内で追加することで構成している（図\ref{load}）。以
%下はロード画面実装の記述である。
%
%\begin{itembox}[l]{ロード画面の実装} 
%\begin{verbatim}
%$(function() {
%　var h = $(window).height();
%　$('#loader-bg ,#loader').
%　 height(h).css('display','block');
%});
%//開いているウィンドウの高さを取得し
%新たなを画面貼り付ける
%
%$(window).load(function () {
%　$('#loader-bg').delay(900).
%　　fadeOut(800);
%　$('#loader').delay(600).
%　　fadeOut(300);
%});
%//全ての読み込み完了後，アニメーショ
%ンさせながら非表示にする
%
%$(function(){
%　setTimeout('stopload()',5000);
%});
%//5秒後に強制非表示
%
%function stopload(){
%　$('#loader-bg').delay(900).
%　　fadeOut(800);
%　$('#loader').delay(600).
%　　fadeOut(300);
%}
%\end{verbatim}
%\end{itembox}