% #!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[twoside,inner=30truemm,outer=20truemm]{geometry}
\usepackage{url} % 文中にURLを書くときは \url{} で括る
\usepackage{booktabs}
\geometry{textwidth=160mm, textheight=225mm}
\renewcommand{\bibname}{参考文献}
\title{クラウド型CMS「SpreadSyncCMS」の提案}
\author{広瀬研究室4年\\C1200908 小林龍永}
\date{令和6年1月11日}
\begin{document}
\maketitle
\begin{center}
{\bfseries 概要}
\end{center}
%% 概要 %%
近年，インターネット中心の世界となるに伴いWeb集客が主流となっている。広告媒体別の正常規模調査により，2022年時点でWeb広告が市場の約4割を占めていることが明らかになった。今後もWebを活用した宣伝，集客の増加が見込まれるが，小規模飲食店においてはWebの活用が進んでいないのが現状である。小規模飲食店でWeb活用が進まない理由として，Webに関する知識面や運用面に課題を抱えていることが明らかになった。
そこで本研究では小規模団体でも運用可能なクラウド型CMSの提案，開発を行った。前述の調査によって明らかになった小規模飲食店の課題をもとに要件定義を行い，それをもとにシステム設計を行った。Googleスプレッドシートをデータベースとしてシステムに導入し，ユーザの専門知識の有無に関わらず情報発信が可能な「SpreadSyncCMS」を開発した。実験では仮説検定を用いてシステムの有用性の評価を行った。今後の課題については，システムのセキュリティ面の強化，より広範囲で運用できるような機能強化を挙げた。(453字)
\maketitle
\setcounter{tocdepth}{2}
\tableofcontents
\chapter{はじめに}
\section{背景}\label{haikei}
近年，Web広告による宣伝，集客が主流となってきている。図\ref{koukokuFigure}は，2023年3月に有限責任監査法人トーマツが行った広告媒体別の市場規模の割合をまとめたグラフである。2022年時点で，Web広告が全体の4割以上の市場を占めていることが明らかになった\cite{koukoku}。かつてはテレビやチラシといった媒体が広告市場の大半を占めていたが，インターネット中心の世界となるに伴い，Web広告が市場の大半を占める形となった。Web広告の市場割合は，2005年度から右肩上がりに上昇しており，今後も成長が続くと推察される。
Web広告による宣伝，集客の重要性が増す一方で，小規模飲食店においてWebを活用している店舗は少ない。株式会社ユニワークが運営する飲食店お助けチーム\cite{web}が小規模飲食店経営者を対象に2022年度実施した「ネット活用に関する意識調査」(図\ref{kadai})では，Web集客を実施している店舗の割合は14.2\%であった。実施しない理由として，「知識がないこと」「人手が足りないこと」「運用費用がかかること」等が挙げられた。これらの調査結果から，Webに関する専門知識や運用面において不安要素がいくつか存在することで，Web活用を行っている店舗が少ないことが明らかになった。そこで本研究では，小規模飲食店の課題に寄り添ったCMS\footnote{ContentsManagementSystemの略称。専門知識がない初心者でも簡単にWebサイトやWebページの作成，管理，運営ができるソフトウェアシステム。テキストや画像等の特定のデータを入力するだけでWebページを自動生成することが可能。}を提案する。既存のCMSや関連研究を考察し，必要かつ十分な機能を有するCMSの設計を行う。図\ref{kadai}で挙がった意見を小規模飲食店の課題として定義し，解決を目指す。
\begin{figure}[b]
\centering
\includegraphics[width=11cm]{koukoku}
\caption{インターネット広告費推移\cite{koukoku}}\label{koukokuFigure}
\end{figure}
\begin{figure}[b]
\centering
\includegraphics[width=7cm]{jittai.pdf}
\caption{小規模団体がWeb活用に抱える課題\cite{web}}\label{kadai}
\end{figure}
\section{目的}\label{mokuteki}
本研究では，小規模団体が抱える課題をもとにWeb上で簡易的な情報発信が可能なCMSを開発し，有用性を評価する。前述した「簡易的な情報発信」は，Webページ作成・管理に関する専門知識を持たない人でもWeb上で情報発信を行うことができる状態を指す。
\newpage
\chapter{関連研究}\label{kanren}
本章では，CMSの開発を行った関連研究の内容を具体化する。
\section{CMSのフレームワーク開発事例}\label{flame}
永嶺，奥野ら\cite{naga}は運営団体の規模によらない効果的な観光情報の発信を支援するためのWebサイト構築フレームワークを作成した。要件として，
\begin{itemize}
\item 観光情報の分類とデータ項目
\item 観光情報の適切な表示と検索手段
\item 更新管理生を向上させる機能
\end{itemize}
の3点を定義している。上記の要件を満たすため，既存のCMSをベースとし，プラグインモジュールとして実装を行った。オープンソースCMS「Plone」のプラグインモジュールとして実装し，工数や構築コストを既存CMSと比較し有効性を評価した。研究課題としてWebページの更新管理が簡易的に行えるかが検証されていないこと等が挙げられた。
% 工数や構築コストの削減が可能になったが，既存CMSの拡張機能であるため，ベースとなるCMSの機能に左右される。
\section{観光情報発信のCMSの開発事例}\label{kankou}
萩原ら\cite{hagiwara}は観光地の多様なニーズや特性に対応可能な観光情報発信のためにCMSの設計・開発を行い，複数観光地における導入可能性について検証した。萩原らは，平泉町の「毛越寺」や奥州市の「えさし藤原の郷」をはじめとした観光地で観光CMSを導入し，試験運用を行なった。観光地の抱える課題やシステム要求を調査し，情報化ニーズが高いことを明らかにした。試験運用段階の課題点としては，システムの導入コストや運用コストが発生することが挙げられた。萩原らのCMSは，観光客がQRコードを読み込んだ位置を取得し，位置に合わせた情報提供を行うという機能をもつ。管理者側はテキスト編集の操作の他にユーザ側の特性に応じてコンテンツを登録することが可能であり，PCを用いて操作を行う。CMSを導入する組織によって情報の発信方法に異なるニーズが存在するため，観光地情報の一元管理方法が課題として挙げられた。
\newpage
\section{関連研究の課題点}
以上で挙げた関連研究により，CMSを用いることで情報発信が容易になり，多様なニーズへの対応が可能であることが分かった。しかし，同時にCMSが持つ課題点についても明らかになった。関連研究の課題点は以下の表のとおりである。
%%%%%%%%%%%%
\begin{table}[h]
\label{kanren_kadai}
\begin{tabular}{|c|p{9cm}|p{9cm}|}\hline
関連研究 & 課題点 \\
\hline
\hline
CMSのフレームワーク開発事例（第\ref{flame}節）&既存CMSのプラグイン機能であるため，ベースとなるCMSを使用する必要がある。本研究ではWebページ作成の専門知識の無い人を対象にしており，システムの拡張性が増すことで操作難易度が上がると考えられる。ユーザの混乱を招く冗長な機能を入れずに必要最低限の機能に留める必要がある。 \\
\hline
観光情報発信のCMSの開発事例（第\ref{kankou}節）&データの一元管理が行えていない。そのため，データの一元管理が可能であり，簡易的に操作ができるデータベースを作成する必要がある。 \\
\hline
\end{tabular}
\caption{関連研究の課題点}
\end{table}
%%%%%%%%%%%%%
\chapter{Googleスプレッドシートを用いたSpreadSyncCMSの提案}
本章では，第\ref{kanren}章での課題をもとに要件定義を行う。また，要件定義に基づきシステム設計を行う。
\section{提案}
本研究では小規模団体の現状や課題点を踏まえたうえで，簡易的な情報発信を行えるSpreadSyncCMSを提案する。
\section{要件定義}\label{youken}
本システムにおける前提条件と機能要件を以下に示す。
\begin{description}
\item[前提1]Webページ作成に関する専門知識の有無に関わらず利用可能である。
\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}
\section{GoogleAppsScript}
GoogleAppsScript(GAS)は、Googleのクラウドサービスと連携して動作するスクリプト言語である\cite{gas}。主にGoogleアプリケーションを自動化、拡張するために使用される。GASのプログラムはクラウド上で実行されるため、ローカルの環境に依存せずにどこからでもアクセスすることができる。本システムではGoogleスプレッドシートのデータ取得、処理を行っている。
\chapter{システム設計}\label{sekkei}
第\ref{youken}節で述べた要件定義をもとに、システム設計を行う。本システムは図\ref{system_flow}のフローを行うものである。機能要件別の説明を以下に示す。
\section{メール送信機能の設計}
Node.jsを用いて以下の機能を設計する。
\begin{itemize}
\item Webページ作成を行うユーザが作成するコンテンツの種類を選択することができる機能
\item メールアドレスを入力し，指定のメールを送信する機能
\end{itemize}
\begin{figure}[tbp]
\centering
\includegraphics[width=10cm]{login_flow}
\caption{登録からWebページ編集までの流れ}\label{mail_flow}
\end{figure}
\section{GoogleAppsScriptのデータ処理の設計}
GASを用いて以下の機能を設計する。
\begin{itemize}
\item Googleスプレッドシートのセルや範囲からデータを取得する機能
\item 取得したデータをJavaScriptと連携する機能
\end{itemize}
\section{動的なWebページ更新の設計}
JavaScriptを用いて以下の機能を設計する。
\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 21.5.0）\cite{node}
\end{itemize}
\item クライアントサイド
\begin{itemize}
\item HTML Living Standard
\item CSS3
\item JavaScript（ECMAScript 2023）
\item Google Apps Script(December 13, 2023)
\end{itemize}
\end{itemize}
\item Webフレームワーク
\begin{itemize}
\item Express（version 4.18.2）\cite{express}
\end{itemize}
\item ライブラリ
\begin{itemize}
\item Nodemailer（version 6.9.8）\cite{nodemailer}
\end{itemize}
\item Webアプリケーション
\begin{itemize}
\item Googleスプレッドシート
\item Googleドライブ
\item GMail
\end{itemize}
\end{itemize}
\newpage
\section{実装画面}
\subsection{メールアドレス登録ページ画面}
ユーザが始めに触れるトップページである。ユーザの選択状況別にテンプレートデータを送信するシステムとなっている。Node.jsのNodemailerライブラリで実行環境内でSMTPトランスポートを使用することで，ユーザのメールアドレスに送信することが可能になる。また，Expressを使用してサーバーサイドの処理を行っている。実装画面は図\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 = '';
//省略
const mailOptions = {
from: 'admsscms23@gmail.com',
to: email,
subject: 'スプレッドシート送付',
text: message,
attachments: [file]
};
//省略
// 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{実験}
本章では，SpreadSyncCMSを使用した検証実験について記述する。またその結果をもとに評価を行い，考察を行う。
\section{実験概要}
実験では，本システムを使用した被験者がWebページ作成にかかる時間を計測する。被験者(東北公益文科大学の学生)を「CMS経験者」と「CMS非経験者」に分類し，作業時間に差があるかを計測する。見本となるWebページのイメージ図\ref{mihon}を被験者に提示し，同じWebページを作成してもらう。被験者は本システムを用いてWebページ作成を行い，作業時間を計測する。実験結果から有用性を評価し，考察を行う。
%\begin{enumerate}
% \item 被験者は本システムとWordPressで同じ内容のWebページ作成を行なう。
%\item 帰無仮説を「CMSの経験者と非経験者でWebページ作成時間の平均に統計的に有意な差がない」とし，対立仮説を「CMSの経験者と非経験者でWebページ作成時間の平均に統計的に有意な差がある」とする。
%\item 有意水準は0.05とする。
%\item t値を算出する。
%\item p値を算出する。
%\item p値と有意水準を比較し，有意差を判定する。
%\end{enumerate}
\begin{figure}[t]
\centering
\includegraphics[width=14cm]{jikken_mihon}
\caption{Webページイメージ図}\label{mihon}
\end{figure}
\begin{figure}[t]
\centering
\includegraphics[width=14cm]{jikken}
\caption{実験説明書1ページ目}\label{jikken}
\end{figure}
\begin{figure}[t]
\centering
\includegraphics[width=14cm]{jikken2}
\caption{実験説明書2ページ目}\label{jikken2}
\end{figure}
\section{実験結果}
\subsection{評価方法}
本実験では，独立したサンプルのt検定を行い，システムの有用性を評価する。はじめに，被験者8名をCMS経験者4名とCMS非経験者4名でグループ分けする。被験者の作業時間を測定し，平均値から統計的な差を比較する。有意水準は5\%とし，仮説設定は以下のとおりとする。
\begin{itemize}
\item 帰無仮説 (H0): 非経験者と経験者のWebページ作成の作業時間の平均に差はない。
\item 対立仮説 (H1): 非経験者と経験者のWebページ作成の作業時間の平均に差がある。
\end{itemize}
\begin{table}[t]
\caption{CMS経験者と非経験者のWebページ作成時間}
\label{table:data_type2}
\centering
\begin{tabular}{lcr}
\hline
被験者（経験者/非経験者） & 作業時間(秒) \\
\hline \hline
1(非経験者) & 323 \\
2(経験者) & 354 \\
3(経験者) & 250 \\
4(非経験者) & 250 \\
5(経験者) & 249 \\
6(非経験者) & 420 \\
7(経験者) & 486 \\
8(非経験者) & 478 \\
\hline
\end{tabular}
\end{table}
独立したサンプルのt検定を行った結果，t値=-0.437，p値=0.678，となり，p値が有意水準を上回った。この結果から、帰無仮説が支持され，非経験者と経験者の間にWebページ作成の作業時間に統計的に有意な差が見られないことが示された。
%----- Requires booktabs package -----%
\begin{table}[btp]
\centering
\caption{独立したサンプルのt検定}
\label{tab:独立したサンプルのT検定}
{
\begin{tabular}{lrrrrr}
\toprule
$ $ & t & df & p & 平均値差 & SEの違い \\
\cmidrule[0.4pt]{1-6}
作業時間 & $-0.437$ & $6$ & $0.678$ & $-33.000$ & $75.573$ \\
\bottomrule
% \addlinespace[1ex]
% \multicolumn{6}{p{0.5\linewidth}}{\textit{注} スチューデントのt-検定} \\
\end{tabular}
}
\end{table}
\subsection{考察}
実験結果より，統計的に有意な差は見られなかったため専門知識の有無が作業時間に影響を及ぼさばいことが明らかになった。しかし，専門知識が無い者でも問題なく扱えるとは断定できないため，実験後アンケートを含めた考察を行う。
被験者8名に対して，「システムの使用感は使いやすかったか」という質問を行ったところ，8人中8人が使いやすかったと答えた。また，「WebページをHTMLで記述するかたちと比べてシステムの使いやすかったか」という質問を行ったところ，8人中8人が使いやすかったと答えた。これらの結果から本システムの使用感は操作性は問題なく扱えると考えられる。
\chapter{結論}
\section{評価}
本研究で作成したSpreadSyncCMSは，CMS経験者ではない者でも問題なく扱えることが分かった。第\ref{mokuteki}節で挙げた「Web上で簡易的な情報発信ができるCMS」を実現することができたといえる。
\section{今後の展望}
現時点ではユーザのセキュリティ意識を前提とした設計となっており，セキュリティの脆弱性への対処が行えていない。特にGoogleスプレッドシートの共有リンクのアクセス権限や，データ漏洩に関する対策ができていないため，セキュリティを向上させユーザが安全に利用できるシステム作成を目指す。また，実験後アンケートでは「ユーザがフォントの色や背景色を変更できるとよい」「編集者の情報も載せれるようにしてほしい」といった意見があった。セキュリティ面とアンケートで集まった改善点を今後の課題とし，よりよいシステムを目指し改良していく。
\chapter*{謝辞}
\addcontentsline { toc }{ chapter }{謝辞}
本論文の執筆にあたり，多くの方々にご支援いただきました。
指導教官の廣瀬雄二教授からは研究中，技術指導や論文執筆など多岐に亘り多大な助言を賜りました。また，廣瀬研究室の皆様には実験にご協力いただきました。お礼申し上げます。
\begin{thebibliography}{99}
% \bibitem{hakusyo}経済産業省中小企業庁. 2023年度版中小企業白書・小規模企業白書概要案. 2023-4-4.p30-35. (参照日 2023-11-10).
\bibitem{koukoku}有限責任監査法人トーマツ.``令和４年度デジタル取引環境整備事業 （広告デジタルプラットフォームの利用事業者向け相談窓口の設置等を通じた課題収集・整理に関する事業）”. 2023-03. \url{https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r04/pdf/n3800000.pdf}，(参照 2023-12-09).
\bibitem{web}株式会社ユニワーク. ``ウェブ集客に取り組んでいる小規模飲食店は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.
\bibitem{hagiwara}萩原勇一，川本裕幣，市川尚，窪田諭，阿部昭博. ``観光情報配信のためのコンテンツ管理システムの開発”. 研究報告情報システムと社会環境(IS).2012，vol. 122，no. 1，p. 1-8.
\bibitem{gas}GoogleWorkspace. ``Google Apps Script: Google Workspaceを自動化，結合”. \url{https://workspace.google.co.jp/intl/ja/products/apps-script/}，(参照 2023-12-29).
\bibitem{node}OpenJS Foundation， Node.js contributors. ``Node.js”. \url{https://nodejs.org/en/about}，(参照 2023-12-29).
\bibitem{express}StrongLoop，Inc. ``Express - Node.js Webアプリケーション・フレームワーク”. \url{https://expressjs.com/ja/}，(参照 2023-12-29).
\bibitem{nodemailer}Andris Reinman. ``Nodemailer::Nodemailer”. \url{https://nodemailer.com/about/}，(参照 2023-12-29).
\end{thebibliography}
\end{document}
