% #!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{クラウド型CMS「SpreadSyncCMS」の提案}
\author{廣瀬研究室4年\\C1200908 小林龍永}   
\date{2023年12月14日}
\begin{document}
\maketitle
\begin{center}
{\bfseries 概要}
\end{center}
%% 概要 %%
近年，インターネット中心の世界となるに伴いWeb集客が主流となっている。しかし，Webに関する知識や理解が足りないことを理由に，Webを活用した情報発信を行なっていない小規模飲食店が多いことが明らかになった。本研究では小規模飲食店の課題点を定義し，解決を目指す。ユーザの専門知識を必要とせず，少人数でも情報発信が可能な「SpreadSyncCMS」を提案し，仮説検定を用いて有用性を評価する。
\maketitle
\setcounter{tocdepth}{2}
\tableofcontents

\chapter{背景}\label{haikei}

近年，インターネット中心の世界となるに伴いWeb集客が主流となっている。しかし，小規模飲食店においてWebを活用している店舗は少ない。株式会社ユニワークが運営する飲食店お助けチーム\cite{prtimes}が小規模飲食店経営者を対象に2022年度実施した「ネット活用に関する意識調査」(図\ref{kadai})では，Web集客を実施している店舗の割合は14.2\%であった。実施しない理由として，「知識がないこと」「人手が足りないこと」「理解できていないこと」等が挙げられた。これらの調査結果から，Web活用を行っている店舗が少なく，多くの不安を抱えていることが明らかになった。そこで本研究では，小規模飲食店の課題に寄り添ったCMS\footnote{Contents Management Systemの略称。専門知識がない初心者でも簡単にWebサイトやWebページの作成，管理，運営ができるソフトウェアシステム。テキストや画像等の特定のデータを入力するだけでWebページを自動生成することが可能。}を提案し，開発に取り組む。図\ref{kadai}の調査結果で高い割合を占めた「知識がない」「自身の業種業態に適していない」「理解ができていない」の意見を小規模飲食店の課題として定義し，解決を目指す。

\begin{figure}[tbp]
  \centering
  \includegraphics[width=7cm]{jittai.pdf}
  \caption{小規模団体がWeb活用に抱える課題}\label{kadai}
\end{figure}


\chapter{目的}\label{mokuteki}
本研究では，小規模団体を対象に簡易的な情報発信が可能なCMSを開発し，第\ref{haikei}節で挙げた課題点の解決を目的とする。

\newpage

\chapter{関連研究}\label{kanren}

関連研究では，既存CMSの拡張ツールの導入や新たなCMSを開発することで特定の団体や状況下における効果的な情報発信の手法を考察している。
\section{CMSのフレームワーク開発事例}

永嶺，奥野ら\cite{naga}は運営団体の規模によらない効果的な観光情報の発信を支援するためのWebサイト構築フレームワークを作成した。オープンソースCMSのプラグインモジュールとして実装し，既存の観光サイトに対する優位点を示した。

\section{観光情報発信のCMSの開発事例}

萩原ら\cite{hagiwara}は観光地の多様なニーズに対すや特性に対応可能な観光情報発信のためにCMSの設計・開発を行い複数観光地における導入可能性について検証した。観光地情報の一元管理方法が課題として挙げられた。

\section{関連研究の課題点}

以上で挙げた関連研究により，CMSを用いることで情報発信が容易になり，多様なニーズに対応することのできることが分かった。しかし，ユーザが操作するツールの量が多く，使い方を覚える必要がある上に，同時編集が可能ではない。そこで，直感的な操作で複数人が編集可能な機能を取り入れる必要がある。


\chapter{スプレッドシートを用いたSpreadSyncCMSの提案}
本章では，第\ref{kanren}章での課題をもとに要件定義を行う。また，要件定義に基づきシステム設計を行う。
\section{提案}
本研究では小規模団体の現状や課題点を踏まえたうえで，簡易的な情報発信を行えるSpreadSyncCMSを提案する。
\section{要件定義}\label{youken}
本システムにおける前提条件と機能要件を以下に示す。

\begin{description}
  \item[前提1]専門知識の有無に関わらず利用可能である。
  \item[前提2]小規模団体の責任者または広報担当者を対象とする。 
  % \item[前提3]ブラウザはGoogle Chromeを使用する。
  \item[前提3]編集作業は複数人での同時編集が行えるGoogleスプレッドシートとGoogleドライブで完結する。
\end{description}

\begin{description}
  \item[要件1]ユーザにテンプレートを配布するメール送信機能
  \item[要件2]Googleスプレッドシートからデータを読み取る機能
  \item[要件3]Googleスプレッドシートから取得したデータをもとに動的にWebページ更新する機能
\end{description}



\chapter{システム設計}\label{sekkei}
第\ref{youken}節で述べた要件定義をもとに、システム設計を行う。本システムは図\ref{system_flow}のフローを行うものである。機能要件別の説明を以下に示す。

\section{メール送信機能の設計}
メール送信機能は、図\ref{mail_flow}のフローで実行するものを設計する。Webページ作成を行うユーザが作成するコンテンツの種類を選択し、メールアドレスを入力することで指定のURLの送付が行えるものとする。
送信完了の表示が出たら送付したメールを確認し、URLからGoogleドライブにアクセスし、保存されているファイルをユーザのローカル環境にダウンロードする。

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

\section{GoogleAppsScriptのデータ処理の設計}

GoogleAppsScript(GAS)のデータ処理のイメージ図を図\ref{gas_flow}に示す。
以下の機能を設計する。
\begin{itemize}
	\item GASを用いてGoogleスプレッドシートのデータを取得する関数を作成し，セルや範囲からデータを抽出する機能の設計
	\item 取得したデータをJavaScriptと連携する機能
\end{itemize}

\begin{figure}[tbp]
  \centering
  \includegraphics[width=12cm]{gas_flow.pdf}
  \caption{GASのデータ処理イメージ図}\label{gas_flow}
\end{figure}

\section{動的なWebページ更新の設計}

以下の機能を設計する。
\begin{itemize}
	\item 同時編集が可能な入力機能
	\item GASと連携し，Googleスプレッドシートのデータを受け取る機能
	\item HTML要素を生成し，動的に内容を変更する機能
\end{itemize}


\begin{figure}[tbp]
  \centering
  \includegraphics[width=14cm]{systemflow.pdf}
  \caption{システム全体の概念図}\label{system_flow}
\end{figure}

\chapter{システム開発}
本章では、第\ref{sekkei}章をもとにシステム開発を行う。
\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}

\newpage

\section{実装画面}
\subsection{メールアドレス登録ページ画面}

ユーザが選択した内容によってテンプレートデータを識別し，送信するシステムである。Node.jsのNodemailerライブラリで実行環境内でSMTPトランスポートを使用することで，ユーザのメールアドレスに送信することが可能になる。Express.jsを使用してサーバーサイドの処理を行っている。実装画面は図\ref{mail}の通りである。

\begin{figure}[b]
  \centering
  \includegraphics[width=13cm]{mail.pdf}
  \caption{メール送信ページ画面}\label{mail}
\end{figure}

\suppressfloats[t]

\newpage

  \begin{itembox}[l]{server.js サーバ作成}
    \begin{verbatim}
const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(express.static('public'));

const smtpTransport = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
        user: 'admsscms23@gmail.com',
        pass: 'パスワードを入力'
    }
});

// POSTリクエストの処理
app.post('/sendMail', (req, res) => {
  const { email, cardText } = req.body;
  let message = '';
  let file = '';

  if (cardText === 'Card1') {
    message = 'Card1 が選択されました。';
    file = {
      filename: 'イベント用スプレッドシート',
      path: 'public/index.html'
    }
  } else if (cardText === 'Card2') {
    message = 'Card2 が選択されました';
    file = {
      filename: 'グルメ用スプレッドシート',
      path: 'index.html'
    }
  }
});

// GETリクエストの処理
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});
    \end{verbatim}
  \end{itembox}


  \subsection{Googleスプレッドシートのデータ処理機能}\label{json}

  ユーザがGoogleスプレッドシートに入力したテキストや画像をJSONデータでJavaScriptに送るシステムである。getDataFromSpreadsheet関数内で指定されたスプレッドシートからデータを取得している。JavaScriptからHTTPリクエストを受け取り，JSONデータを生成している。

  \begin{itembox}[tbp]{mail.js 一部}
    \begin{verbatim}
  
  smtpTransport.sendMail(mailOptions, (error,response) => {
    if (error) {
        console.log('メール送信エラー:', error);
        res.status(500).json({ message: 'へのメールの送信に失敗しました' });
    } else {
        console.log('メールが送信されました:', response.response);
        res.json({ message: 'にメールが送信されました' });
    }
  });
    \end{verbatim}
    \end{itembox}
  
  
  \begin{itembox}[tbp]{spread.gs getDateFromSpreadsheet関数} 
    \begin{verbatim}
  const ss = SpreadsheetApp.openById(ssId);
  const sheet = ss.getSheetByName(sheetName);
  const value = sheet.getDataRange().getValue();
  const data = [];
  
  for (let i = 1; i < value.length; i++) {
    const param = {};
  for (let j = 0; j < value[i].length; j++) {
      param[value[0][j]] = value[i][j];
    }
      data.push(param);
  }
  return data;
    \end{verbatim}
    \end{itembox}

    \subsection{動的なWebページ更新機能}

    GASで取得したJSONデータをもとにHTML要素を作成する機能である。fetchAndGenerateData関数内でGASに対してHTTPリクエストを送信する。Webページ上では動的にHTML要素を生成しDOM操作により要素内の内容を変更している。Googleプレッドシートで記載されていない，または内容の条件が満たされなかった場合はHTML要素が生成されない。実装画面は図\ref{mago}の通りである。
    
    
    \begin{itembox}[tbp]{spread.gs createJsonResponse関数} 
      \begin{verbatim}
        async function fetchAndGenerateData() {
          const response = await fetch('URL');
          const jsonData = await response.json();
          const nameElement = document.getElementById
          ('name');
          const eventContainer = document.getElement
          ById('eventContainer');
          nameElement.textContent = jsonData[0].area
          ID;//以降省略
          }
          window.addEventListener('DOMContentLoaded', 
          fetchAndGenerateData);
      \end{verbatim}
      \end{itembox}
    
      \begin{figure}[tbp]
        \centering
        \includegraphics[width=12cm]{../paper/magopel.pdf}
        \caption{生成したWebページ画面}\label{mago}
      \end{figure}

\chapter{実験}
実験では，本システムと既存CMSを使用した被験者がWebページ作成にかかる時間をそれぞれ計測する。第\ref{haikei}章で挙げた課題点の解決が行える機能を有しているかを，既存CMSとの比較により検証する。計測結果を比較し，t検定を用いて有用性を評価する。

\section{実験手順}
t検定の手順は以下の通りである。
\begin{enumerate}
	% \item 被験者は本システムとWordPressで同じ内容のWebページ作成を行なう。
	\item 帰無仮説を「異なるCMS間のWebページ作成時間の平均に統計的に有意な差がない」とし，対立仮説を「異なるCMS間のWebページ作成時間の平均に統計的に有意な差がある」とする。
	\item 有意水準は0.05とする。
	\item t値を算出する。
	\item p値を算出する。
	\item p値と有意水準を比較し，有意差を判定する。
\end{enumerate}
以上の結果をもとに本システムが既存CMSと比較し，実行速度に有意な差異があるかを検証し，有用性を評価する。

\section{実験環境}
\section{実験結果}

\chapter{結論}
\section{考察}
\section{今後の展望}
現時点ではユーザのセキュリティ意識を前提とした設計となっており，セキュリティの脆弱性への対処が行えていない。特にGoogleスプレッドシートの共有リンクのアクセス権限や，データ漏洩に関する対策ができていないため，セキュリティを向上させユーザが安全に利用できるシステム作成を今後の展望とする。


\chapter{謝辞}
\begin{thebibliography}{99}
% \bibitem{hakusyo}経済産業省中小企業庁. 2023年度版中小企業白書・小規模企業白書概要案. 2023-4-4.p30-35. (参照日 2023-11-10). 
\bibitem{prtimes}株式会社ユニワーク. ``ウェブ集客に取り組んでいる小規模飲食店は14.2\% 外注活用に「知識」「手間」「コスト」の壁”. PR TIMES. 2023-1-20. \url{https://prtimes.jp/main/html/rd/p/000000010.000047493.html}，(参照 2023-11-10). 

% \bibitem{gakusei}全国大学生活協同組合連合会. ``第58回（2022年秋実施）学生生活実態調査 速報”. 全国大学生活協同組合連合会. 2022-01-31. \url{https://www.univcoop.or.jp/press/life/report58_01.html}，(参照 2023-11-18). 
% \bibitem{word}WordPress.com.``WordPress”.\url{https://wordpress.com}，(参照 2023-08-09).
% \bibitem{log}``食べログ”.\url{https://tabelog.com}，(参照 2023-05-23).
\bibitem{naga}永峰和弘，奥野拓. ``観光情報サイト構築のためのフレームワークの提案”. 観光情報学会第2回研究発表会. 2010，p. 11-18. (参照 2023-05-25). 

\bibitem{hagiwara}萩原勇一，川本裕幣，市川尚，窪田諭，阿部昭博. ``観光情報配信のためのコンテンツ管理システムの開発”. 研究報告情報システムと社会環境(IS).2012，vol. 122，no. 1，p. 1-8. (参照 2023-10-30). 

\end{thebibliography}

\end{document}