\documentclass[a4paper,titlepage]{jsarticle}
\usepackage[dvips]{graphicx}
\usepackage{verbatim}
\usepackage{ascmac}
\usepackage{fancybox}
\pagestyle{empty}
\西暦
\setlength{\textheight}{240mm}
\setlength{\topmargin}{-10mm}
\setlength{\textwidth}{165mm}
\hyphenation{front-end}

\title{デジタル教科書の提案}
\date{}%ここはブランク
\author{04H111 村上昌弘}
% 共著の場合は
%\author{xxHxxx 産大太郎 \and yyHyyy 四大与太郎}

\begin{document}
\maketitle\pagestyle{empty}
\pagestyle{empty}

% 目次
%setcounter{toc(table of contents)depth}{3}で
%subsubsectionを目次に表示できる。3は表示階層の深さを示す。
\setcounter{tocdepth}{3}
\tableofcontents
\clearpage

\pagestyle{plain}

\setcounter{page}{1}

\section{はじめに}
今日の教科書にはいろいろな種類がある。
大学の授業で用いる教科書は非常に高価な専門書が多く、
学生にとって教科書を購入することが金銭的な負担になっていることに着目した。
そこで教員が授業で必要な内容(教科書データ\footnote{教員が学生に向けて本システムに登録した授業で必要な内容})を登録することを考え、
本システムを開発した。実際に授業で用いている資料を元に教科書データを登録し、その結果を捉えて新しい教科書の在り方として提案する。

\clearpage

\section{卒業研究の目的}
大学の教科書として使用される書物は非常に高価である。専門書としては適正価
格ではあるものの、一冊の値段は安くても二千円前後、高いものだと四千円前後するもの
がある。これは学生にとって金銭的な負担であり、それによって学生の学習意欲
が低下することも考えられる。これは学生・教員双方にとっての問題点である。
また、教科書として採用した書籍の一部分しか授業に使わない場合があり、そ
のためだけに教科書を購入するという点も非効率的である。本システムの目的は
前述した二点の問題点を解消することである。
また自己成長の為、いかにして目的のソフトウエアを開発するかという開発手法、
自分が今まで扱ったことのないプログラミング言語で開発するという経験を養
う事も目的に含んでいる。

\clearpage

\section{教科書の違い}
教科書には紙媒体とweb上の学習サイトがあり、違いを比べる。

\subsection{紙媒体}
メリット
\begin{itemize}
 \item 保存環境によって教科書の内容が消えることはない。
 \item 手元に所持していれば、いつでも読むことができる。
 \item 授業で学習した内容を補足として書き込みすることで追加できる。
 \item 途中まで読んだとして付箋を使用し、再び付箋を入れた場所からスタートできる。
\end{itemize}

デメリット
\begin{itemize}
  \item 紙媒体の量が増えると管理しずらい。
\end{itemize}

\subsection{Web上の学習サイト}
本システムもWeb上の学習サイトである。
本システムと他のWeb上の学習サイトにいついてを考える。

メリット
\begin{itemize}
  \item 印刷や音のように、様々な形で転用できる。
  \item ネットワークがつながっており、
         Webブラウザ\footnote{Webページを閲覧するためのアプリケーションソフトウェア。

         \noindent{アプリケーションソフトウェア（Application software）とは、ユーザーがコンピュータ上で実行したいタスクを実施する機能を直接的に有するソフトウェアである。}}
         が使用できる環境があれば、どこでも閲覧できる。
\end{itemize}

デメリット
\begin{itemize}
  \item 紙媒体と異なり、登録・保存したデータが物理的、電気的に一部破損した場合全
        体が消失する可能性があり、長期的な保存に長けていない。
  \item コンピュータ環境の使用方法や操作の知識がいる。
  \item ネットワークがないと閲覧することができない。
\end{itemize}



\clearpage

\section{システム開発}

\subsection{システムの説明}
本システムはJavaScriptが実行できるWebブラウザで使用することができる。
学生用の表示と教員用の表示に分かれており、教員は教員用の表示を用いること
で教科書データを登録、修正、削除することができる。学生は学生用の表示から
教科書サイトを閲覧することができる。

\subsection{概念図}
{\bf 図~\ref{toroku}}に本システムの目標とする概念図を示す。
\begin{figure}[ht!]
\centering
\includegraphics[width=10cm]{zu.eps}
\caption{登録の例}
\label{zu}
\end{figure}


\subsection{開発環境}
開発環境を以下に示す。

\begin{itemize}

 \item ハードウェア (IBM PC/AT互換機)
       \begin{itemize}

        \item HDD……80GB
        \item CPU……Int\lower0.5ex\hbox{e}l{\textregistered}　
	      Core{\texttrademark}2 　1.66GHz[x86 Family 6 Model 14
              Stepping 8]
        \item ロジックボード……YNRC-BR
        \item チップセット……Radeon Xpress 200M
        \item メモリ……1GB
       \end{itemize}
 \item OS……Vine Linux 4.0 
 \item 開発言語……PHP 5.2.6  ~\cite{php,php_mas},
                   javascript ~\cite{javascript_ehon,javascript_haji}
 \item データベース……MySQL 5.0.27 ~\cite{mysql_ab,mysql_kiso}

\end{itemize}
\clearpage

\clearpage

\section{登録ページ}
登録ページは教員が本システムにいつでも教科書データを登録することができる。
登録する章、説明したい単語、説明と分かれており、それぞれに教科書データを書き込む。
登録ページを{\bf 図~\ref{toroku}}に示す。

\begin{figure}[ht!]
\centering
\includegraphics[width=15cm]{toroku.eps}
\caption{登録ページ画面}
\label{toroku}
\end{figure}

\clearpage

教科書データを登録している様子を{\bf 図~\ref{toroku_sample}}に示す。
{\bf 図~\ref{toroku_sample}}の用に直接HTML\footnote{ウェブ上のドキュメントを記述するためのマークアップ言語。}を書き込むことにより、本システムに登録され項目に表示される。

\begin{figure}[ht!]
\centering
\includegraphics[width=15cm]{toroku_sample.eps}
\caption{登録の例}
\label{toroku_sample}
\end{figure}

\clearpage
       
\section{目次ページ}
目次ページには二種類あり、教員用と学生用がある。

\subsection{教員用目次ページ}
教員用の目次ページは教員が登録した教科書データを確認するためのページである。
教員用項目を{\bf 図~\ref{mokuji_kyoin}}に示す。
誤字や脱字があった場合確認ができる。

\begin{figure}[ht!]
\centering
\includegraphics[width=12cm]{mokuji_kyoin.eps}
\caption{教員用の目次ページ画面}
\label{mokuji_kyoin}
\end{figure}

\clearpage

\subsection{学生用目次ページ}
学生用の目次ページを{\bf 図~\ref{mokuji_gakusei}}に示す。
学生用の目次ページは学生が教科書として閲覧するページである。
学生はこの目次ページと後述する説明ページを用いて学習を行う。
学生用目次を{\bf 図~\ref{mokuji_gakusei}}に示す。

\begin{figure}[ht!]
\centering
 \includegraphics[width=12cm]{mokuji_gakusei.eps}
 \caption{学生用の目次ページ画面}
 \label{mokuji_gakusei}
 \end{figure}

 \clearpage

\section{説明ページ}
説明ページは教員が登録した教科書データを表示している。
教科書データが{\bf 図~\ref{setumei}}のようになっているのが確認できる。

\begin{figure}[ht!]
\centering
\includegraphics[height=7cm,width=17cm ]{setumei.eps}
\caption{説明ページ画面}
\label{setumei}
\end{figure}

\clearpage 

\subsection{ポップアップ}
単語の上にマウスカーソルをあわせると、その単語を説明する吹き出しが
javascript\footnote{主にWebブラウザ上で動作し、HTMLの動的書き換えや入力
フォームの自動補完など、ウェブページの使用感向上を目的として使用されたり、
リッチクライアントアプリケーションの構築に使われるスクリプト言語。}で表示される。
登録時にHTMLタグの
\begin{verbatim}
<span class="hotspot"onmouseover="tooltip.show('単語の説明 ');"onmouseout="tooltip.hide();">単語名</span>
\end{verbatim}
を書き込むことにより、吹き出しが表示される。
ポップアップのサンプルとして、{\bf 図~\ref{popup}}に示す。

\begin{figure}[ht!]
\centering
\includegraphics[height=8cm,width=15cm]{popup.eps}
\caption{ポップアップの例}
\label{popup}
\end{figure}

\clearpage

\subsection{修正}
教員のみが使用でき、いつでも教科書データを修正できる。
修正したい項目を選択し、章、単語名、説明を修正することができる。
{\bf 図~\ref{syusei}}はネットワーク構築実習で使われている教科書の第一章のOSI参照モデルができるまでの修正ページである。

\begin{figure}[ht!]
\centering
\includegraphics[width=15cm]{syusei.eps}
\caption{説明を修正}
\label{syusei}
\end{figure}
  
\clearpage

\section{削除}
削除ページを{\bf 図~\ref{sakujo}}に示す。
タブメニューから削除ページを選択する。表示された項目から、削除したい項目を選択する。
項目を選択すると確認画面がでる。確認画面の削除ボタンを押すことで教科書データを削除できる。

\begin{figure}[ht!]
\centering
\includegraphics[width=12cm]{sakujo.eps}
\caption{削除ページ画面}
\label{sakujo}
\end{figure}

\clearpage

\section{考察}

\subsection{システムの利点}

\begin{itemize}
  \item Webブラウザが使える環境であれば、いつでも見ることができる。
  \item 本システムは無償である。
  \item 教科書、参考書を買う手間がはぶける。
  \item 教員が伝えたい情報だけを書き込むことができる。
\end{itemize}

\subsection{システムの問題点}

\begin{itemize}
  \item 画像をアップロードし、教科書データとして表示することができない。
  \item 教員はHTMLを理解していないと使用が困難である。
\end{itemize}

\clearpage

\section{今後の課題}
本システムを開発した結果生じた問題点を踏まえ、以下に今後の課題を挙げる。

\begin{itemize}
  \item 登録で教員が図を挿入することができるようにする。
  \item HTMLを知っていない教員のことも配慮し、HTMLを自動で生成するようにする。
  \item 本システムの操作方法を解説したマニュアルを用意し本システムの操作を補助する。
  \item HTMLを意識せずに教科書データを登録できるようにする。
  \item HTMLのタグをうち間違えて本システムに登録した時のことを考えて、登
	録時に記入漏れがないか、申告する。

\end{itemize}

\clearpage
\section{まとめ}
今回の卒業研究では教科書サイトを自動で生成するシステムを開発した。
開発の課程で私のスケジューリングの甘さからか、満足の行く機能が実現出来なかったことは非常に残念である。これからの発展として、音声を配信できるようにしたり、
CSS\footnote{Cascading Style Sheets（CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート）はHTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。

\noindent{XML(Extensible Markup Language)とは、文書やデータの意味や構造を記述するためのマークアップ言語の一つである}}
テンプレート\footnote{何かを作る時のもとになる定型的なデータやファイルのこと。}
を充実させ、紙媒体の教科書では行えないマルチメディア的表現を導入すること
ができるのではないかと考える。

web上で教科書を作成することは前例が少ない。
教科書サイトは紙媒体の教科書と比べて様々な技術の融合が
可能であることから、大いに発展していく分野であると考えている。
今後この研究を元にさらなる機能追加や利便性向上の改良を加えることで
学習を支援するために紙媒体の教科書より遥かに優位な学習支援システムと
なることを期待する。

\clearpage

\section*{謝辞}

本論文執筆及び研究作業等、研究室での活動の際以外でもご指導及びご協力頂きました
大垣 斉講師、藤井 信夫教授、水野 貴弘氏、情報安全工学実験室の学生の方々、
その他見守ってくださった方々に深く感謝いたします。

% 参考文献
\begin{thebibliography}{99}
 \bibitem{php} 日本 PHP ユーザ会, http://www.php.gr.jp/
 \bibitem{php_mas} PHP マスターブック PHP5対応,
	 毎日コミュニケーションズ
	 (ISBN:978-4839927073)
 \bibitem{javascript_ehon} javascriptの絵本,
         翔泳社
	 (ISBN:978-4798114606)
 \bibitem{javascript_haji} 初めてのjavascript,
         オライリージャパン 
	 (ISBN:978-4873113227)
\bibitem{mysql_ab} MySQL AB, http://www.mysql.com/
 \bibitem{mysql_kiso} 基礎からの  MySQL, Softbank Creative
	 (ISBN:978-4797344387)
\end{thebibliography}

URIは2008年11月27日現在
\clearpage

\appendix
\section{ソースコード}
\subsection{教員用に関するソース}
\subsubsection{index.html}
登録ページ画面
\verbatiminput{index.html}
\clearpage
\subsubsection{up.php}
データベース登録処理
\verbatiminput{up.php}
\clearpage

\subsubsection{file\_yomikomi.php}
目次ページ画面
\verbatiminput{file_yomikomi.php}
\clearpage

\subsubsection{disp.php}
説明ページ画面
\verbatiminput{disp.php}
\clearpage

\subsubsection{script.js}
ポップアップ
\verbatiminput{script.js}
\clearpage

\subsubsection{syusei.html}
修正ページ画面
\verbatiminput{syusei.html}
\clearpage

\subsubsection{syu.html}
\verbatiminput{syu.php}
\clearpage

\subsubsection{sakujo.php}
削除ページ画面
\verbatiminput{sakujo.php}
\clearpage

\subsubsection{saku.php}
\verbatiminput{saku.php}
\clearpage

\subsubsection{drop.php}
\verbatiminput{drop.php}
\clearpage

\subsection{学生用に関するソース}
\subsubsection{user\_text.php}
学生用目次ページ画面
\verbatiminput{user_text.php}

\end{document}

%%% 図を入れる場合(ふつー EPS)
%\begin{figure}[!ht]
% \centering
% \includegraphics[]{}
% \caption{}
% \label{}
%\end{figure}