% #!platex -kanji=%k
% #DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{lmodern}
\usepackage{ascmac}
\usepackage{geometry}
\usepackage{url}		% 文中にURLを書くときは \url{} で括る
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}

\title{「システムの名前未定」の提案}
\author{廣瀬研究室4年\\C1200908 小林龍永}   
\date{}
\begin{document}
\maketitle
\begin{center}
{\bfseries 概要}
\end{center}
%% 概要 %%

\maketitle
\setcounter{tocdepth}{2}
\tableofcontents
\chapter{はじめに}
本章では、本研究の背景・目的について説明する。
\section{背景}
背景として
\section{目的}

\chapter{関連研究や既存のサービス}
\section{先行研究}
\subsection{いったんリセット}
\subsection{ほかにも}
\subsection{いろいろ}

\section{既存のサービス}
\subsection{microCMS}
\subsection{WordPress}
\subsection{ほかにも}
\subsection{いろいろ}


\chapter{スプレッドシートを用いたSheetSyncCMSの提案}

\section{提案}
\section{システム概要}


\chapter{システム設計}
\section{前提条件と要件定義}\label{youken}
本サービスにおける前提条件と機能要件を以下に示す。
\begin{description}
  \item[前提1]プログラミング知識のない者でも利用可能である。
  \item[前提2]ユーザはGoogleアカウントを既に取得しているものとする。
  \item[前提3]Googleスプレッドシートを本システムのデータソースとして利用する。
  \item[前提4]Googleドライブを画像用のデータソースとして利用する。 
\end{description}

\begin{description}
  \item[要件1]ユーザはデータ編集はGoogleスプレッドシートとGoogleドライブのみで行う。//前提条件に書くべき？
  \item[要件2]動的なデータ更新機能
  \item[要件3]異なるデバイスからでもデータソース編集が可能。
  \item[要件4]ページリンク挿入機能。//自分で作ったWebページも挿入できるよーの意味。いらないかも
\end{description}


\section{システム設計}
\ref{youken}をもとに、システム設計を行う。本システムは\ref{flow}のフローで実行される。また、ユーザを管理者、フロントと分類し、ユーザ別に専用機能を設ける。

\subsection{メール送信機能の設計}
登録ページでは、Webページ作成を行うユーザが作成するコンテンツの種類を選択し、メールアドレスを入力することで指定のURLの送付が行えるものとする。
送信完了の表示が出たら送付したメールを確認し、URLからGoogleドライブにアクセスし、保存されているファイルをユーザのローカル環境にダウンロードする。図ーー（.pdfで説明書載せる）に記載されている手順に沿ってファイル内容、使い方を説明している。

\begin{figure}[tbp]
  \centering
  \includegraphics[width=8cm]{login_flow}
  \caption{登録からWebページ編集までの流れ}\label{flow}
\end{figure}

\subsection{管理者側の設計}
システムのフロー図、説明文を記載

\subsection{Googleスプレッドシート}
ER図、説明文を記載。GASもここに書く？

\chapter{システム開発}
\section{開発環境}
開発環境を以下に示す。
\begin{itemize}
  \item 開発言語
  \begin{itemize}
    \item サーバサイド
    \begin{itemize}
      \item Node.js（version 18.18.2）
    \end{itemize}
    \item クライアントサイド
    \begin{itemize}
      \item HTML Living Standard
      \item CSS3
      \item JavaScript(ECMAScript 2023)
      \item Google Apps Script
    \end{itemize}
  \end{itemize}
  \item Webフレームワーク
    \begin{itemize}
      \item Express.js（version 4.18.2）
    \end{itemize}
  \item ライブラリ
  \begin{itemize}
    \item Nodemailer（version 6.9.7）
  \end{itemize}
  \item Webアプリケーション
  \begin{itemize}
    \item Googleスプレッドシート
    \item Googleドライブ
    \item GMail
  \end{itemize}
\end{itemize}
\section{実装画面}
\subsection{クライアント側の画面}
コード、どういった処理をしているのかを記載
\subsection{管理者側の画面}
コード、どういった処理をしているのかを記載
\subsection{スプレッドシート画面}  
実際に使っているシートを貼る。ID,keyについて記載。

\chapter{実験}
\section{実験方法}
\section{実験環境}
\section{実験結果}

\chapter{結論}
\section{考察}
\section{今後の展望}
やらないと決めたこと
セキュリティ面、
\begin{thebibliography}{99}
\bibitem{}
\end{thebibliography}

\end{document}