%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}%\documentclass{文書の種類}TeXファイルの先頭に配置して、文章の種類を定めます。jbook書籍。
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}%パッケージの利用
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
\usepackage{ascmac}
\usepackage{geometry}
\usepackage{url}		% 文中にURLを書くときは \url{} で括る
\geometry{textwidth=160mm, textheight=225mm}%レイアウト
\renewcommand{\bibname}{参考文献}%\renewcommand{\好きな名前}{何かの出力}
 
\title{地域住民参加によるWebページ作成を目的とした\\クラウド型CMSの提案}
\author{広瀬研究室\\C1190736 熊川隆志}
\date {令和4年度}
 
\begin{document}
\maketitle%\maketitle を挿入することで，タイトルを文書の種類に応じて最適なレイアウトを自動で作成します。\title{タイトル名}、\author{著者名}	、\date{日付}を\maketitleの前に入れる。
 
\begin{center}
 {\bfseries 概要}
\end{center}
%% 概要 %%

伝えたい情報をインターネットで発信する方法の一つにWebページがある。閲覧者が求めている情報が記載されているWebページを作成することで、活動や場所のPRを効果的に行える。

しかし、現在はWebページ作成を行う人が限られてしまい、まだ発信されていない魅力ある情報を記載することが難しい。そこで本研究ではより広範囲かつ多人数による共同編集可能な CMS を開発し、今までWebページ作成に参加していなかった人がコンテンツを作成することのできるシステムを提案する。
 
%\newpage
　%（←全角スペース）

\tableofcontents %目次を作る。1行だけで完成。びっくり。\chapter{}や\section{}のページ番号を勝手に参照してくれる。便利。

%修正目標
%Google APIの説明を追加
%仕様技術のバージョンを追加
%読んだ人がシステムを再現できる文章を追加
%引き合いにwordpressを追加
%有効性の検証にアンケートとサンプルデータ入力実験
%jsなどの用語はワールドワイドコンソーシアムから
 
\chapter{はじめに}
\section{背景}
インターネットで情報を発信する際にWebページを作成する方法がある。Webページを作成するためには公開するWebページの内容、デザインを構成する、HTML、CSSファイルを作成する必要がある。

しかし HTML などのコーディングは知識のない人が行うには難しい。そのためWebページの作成を行う際、CMSが用いられる。

CMSとは、Contents Management System（コンテンツ・マネジメント・システム）の略称で
Webページのコンテンツを構成するテキストや画像、デザイン・レイアウト情報などを一括して保存・管理するシステムのことである。
CMSを使うとWebサイトを作ったことがない人でも簡単にWebサイトを作ることができる。

CMS で一般的に使用されているものに、WordPress がある。WordPress はオープンソースの CMS であり、様々なテンプレートデザインからデザインを選び、各項目の内容を編集していくことでWebページを作成することができる。
しかし、現在は機能が複雑になり、使用したことがない人がシステムを導入し、Webページを作成していくのは難しい。

そのため本研究では、より編集が簡単な CMS を提案する。
これにより、より広範囲の人がWebページ作成、編集に参加できるシステムを作成し、共同で開発できるWebページによる情報発信を行えるようにする。

この「より広範囲の人がWebページ作成に参加できる」という点を活かし、本研究では観光地の情報発信の課題を解決しようと考えた。

観光地の情報を調べる際、そのスポットを紹介しているWebページを閲覧することが考えられる。事前に計画を立てている段階であれば、既存の紹介ページを閲覧することで必要な情報を得られる。
しかし、現地で観光中に諸情報を調べるのには、その他のPRに関する情報や詳細な情報が記載されているため、たくさんある情報の中から必要の情報を見つけ出さなければならない。また、観光地の紹介ページにたどり着くためにも、複数のページにアクセスしなければならない場合もあり手間である\cite{s}。

この背景を踏まえ、本研究では現地で観光をしながら閲覧するのに適した観光地紹介Webページを作成する。このWebページでは複数の観光地の情報をページの移動を最小限に抑え、移動中でも閲覧しやすいWebページを構築する。
さらにWebページ作成の知識を持たない地域住民も参加できるシステムを構築することによって、まだその他Webページに記載されていない観光スポットの情報発信を促進する。

これにより地域住民と共同で行う情報発信の方法を検証し、新たな地域の魅力発信の方法について提案する。


\section{目的}
本研究では現行の CMS より編集、管理が容易な CMS を開発し、より広範囲な人がWebページ作成に参加できるシステムの開発を目指す。

この「より広範囲な人」とは、地域住民や非技術者をさし、現行のWebページの作成に携わってこなかった人たちである。その人たちにも作成に参加してもらうことで、今まで記載できなかった魅力ある情報の提供を図る。

この特徴を活かし本研究では、観光案内に特化した情報発信を行うWebページの CMS に内容を絞りを開発する。地域住民の参加できるという点から、今まで発信できていなかった魅力を再発見し、新たな情報発信を行うことで、地域活性化に活かせると考えたためである。

この観光案内に特化した地域住民との共同編集可能な CMS から本研究で開発した CMS の有効性について考察する。
 
 
 
 
 
 
 
 
 
 
 
 
\chapter{先行事例}
ここでは先行事例を紹介し、本研究で解決を目指すシステムの課題について考察する。

\section{類似サービス}

\subsection{WordPress}
WordPressとは、世界で圧倒的なシェアを獲得している無料で使える CMS である。

様々なニーズに合わせたデザインテンプレート(Webページ全体のデザインや構成が作成されているもの)が提供されており、プログラミングのスキルがあれば、ホームページの環境や機能、デザイン、構成などを、自由自在にカスタマイズすることができる。

WordPressは元々、制作会社のデザイナが使うプロむけのツールであり、拡張性と自由度が高いのが特徴である。
一方でWebページ作成には HTML・CSSだけでなく、PHPの最低限の知識が必要になることがある\cite{wordpress}。

\subsection{Wix}
Wixとは、2006年にイスラエルで設立された企業によるクラウド型(オンライン上のサーバで提供されているサービスを、インターネットを介して利用するもの) CMS のサービスである。
専門技術や知識なしでWebページを作成できるサービスとして、世界中で利用されている。

このサービスでは、様々なデザインテンプレートが用意されており、様々なデバイス・画面サイズで見たときに、デザインが崩れず適切に表示されるレスポンシブ対応もされているサイトを作ることができる。またソーシャル・ネットワーキング・サービスとの連携やオンライン予約、チャットツールなどの機能も簡単に組み込むことができる\cite{wix}。

%\section{STUDIO}

\section{先行研究}

\subsection{書籍特化のCMS開発}
川場隆の研究では、操作が簡単に理解でき、初心者でも容易にサイトを構築し運営できることを目的とした、書籍を公開するサイトの構築に特化した書籍型 CMS を開発している。

数百ページに及ぶボリュームがあり、章一節一項の目次構成を持つテキストを掲載するウェブサイトを構築、運用を行うには、汎用CMSでは管理が複雑であり機能的にも限界があるため、書籍型のサイト構築に特化したCMSを開発した。
最初に目次項目を設定するだけで目次が付属するウェブサイトを自動生成し、コンテンツはWYSWYGエディタ(最終的な仕上がりを画面上に表示して確認しながら編集できるもの)で作成でき、マウス操作でコンテンツを並べ替えることができるシステムとなっている\cite{bibcms}。


\subsection{ウェブサイトを用いた交流型地域づくりの可能性}
星野敏の論文では、都市農村交流がテーマの地域づくりに、参加型のホームページづくりを連動させることで生み出される新たな可能性について考察している。

この論文では地域づくりにおけるホームページ作成のメリットを二つ挙げている。

1つは都市農村交流のための情報発信手段で、行事や交流イベントの紹介や施設の営業情報の提供、インターネットを通じた直売など、利用者の利便性を高めるものである。
もう1つは1次情報の提供によるイメージの向上で、その地域に住んでいる人の生きざまや自然の特徴、伝統文化などを紹介することによる、地域の素顔（＝1次情報）の提供である\cite{koryu}。


\section{本研究で解決を目指す課題}
類似サービスで紹介した WordPress では拡張性と自由度にたけているが、プログラミングの知識が必要になる。またWixではクラウドでコンテンツ管理ができ、場所や人を選ばずWebページを編集することができる。
先行研究では、初心者でも容易に操作ができるようにマウス操作を可能とし、地域の情報発信には1次情報の提供が重要であることを示していた。

これらを踏まえ本研究では、より広範囲な人がWebページ作成に参加できるようにするため、以下のようなことが可能なシステムを開発する。
\begin{itemize}
\item HTMLやCSS、PHPなどのプログラミングを行う必要なくWebページの内容を編集できる。
\item マウス操作でコンテンツの管理が行える。
\item コンテンツ管理をクラウドで行い、許可されているユーザはどこからでも、何人でも編集に参加することができる。
\end{itemize}

これによりWebページ作成の知識を持たない地域住民などによるコンテンツ提供を可能とし、より広範囲の人が情報発信に参加できるシステムを目指す。












\chapter{Webページ共同作成システムの提案}
本章では、第2章での課題点の解決を図る本研究のシステム内容を定義する。

\section{本研究での提案}
本研究では、Webページ作成の知識を持たない地域住民などによるコンテンツ提供を可能とし、より広範囲の人が情報発信に参加できるシステムの開発する。

このシステムにより、今までWebページ作成に参加していなかった人たちが持っているコンテンツを記載したWebページを共同で作成することができるようにすることで、新たな魅力の発見・情報の発信を可能とすることを目指す。

多くの人がコンテンツ作成に参加してもらうために情報の記載には Google スプレッドシートを活用する。

NTTドコモ モバイル社会研究所が、2021年1月に全国の15～79歳の男女を対象に行った、ICTサービス利用と関連の深いアカウントの所有状況の調査では、Googleアカウントの所有率は77.8\%となった\cite{Gaka}。
この結果から Google スプレッドシートによるコンテンツ管理を行うことで、より多くの人がWebページ作成に参加できると期待できる。

本研究で開発するシステム（これより本システムと呼ぶ）では、地域住民がコンテンツを提供、編集し、地域の魅力を発信する、観光地紹介Webページ作成での使用を想定した CMS を開発する。
その過程で広範囲・多人数でのコンテンツ編集、本システムの有効性について考察する。

\section{本システムの概要}
本システムではHTMLやCSSなどのプログラミングが必要なく編集が行える CMS の開発を目指す。

コンテンツの表示は閲覧者がブラウザで本システムのWebページを読み込んだ際、プログラムの処理が開始し、コンテンツ情報を記載している Google スプレッドシートの情報をもとに、Webページの構成や内容を変更していくものとする。

各項目の情報の表示は、ページ内でポップアップ表示し、必要な情報を確認しやすい構成で行う。

Webページの内容は、テンプレートデザインの項目に合わせてコンテンツを用意してもらい、テキストや画像のファイル名を入力/アップロードをするだけで完成できるようにする。

データの記載に Google スプレッドシートを使用し、複数人が同時に編集できるシステムにする。

内容の変更は、Google スプレッドシートに書き込まれたデータを利用し、Webページの内容を変更させる。



\subsection{使用サービス/ソフトウェア}

\begin{itemize}
\item Webページの構成

HyperText Markup Language

\item Webページのデザイン

Cascading Style Sheets

\item システムのプログラミング

Javascript

\item コンテンツ内容の記録

Google スプレッドシート

\item スプレッドシートからシステムへのデータ受け渡し

Google API

\end{itemize}


\subsection{想定編集方法}

デバイスは電子計算機で行うものとする。

\subsection{テンプレートデザインの内容}

東洋大学 古屋秀樹、東洋大学大学院 野瀬元子らは、観光に関心がある被験者10人を対象に、観光情報Webサイトを閲覧した際、満足度の高いウェブサイトに必要とされる要素について調査を行った\cite{s}。

そこから本システムのテンプレートデザインの内容は以下のものの掲載する。
\begin{itemize}
\item 観光地の概要
%\item イベント、食事、おみあげなどの情報
%\item 詳細ページへのリンク
\item 交通案内や移動所要時間
\item 観光地の複数の写真
\end{itemize}

\section{想定する本システムの使用例とメリット}
\begin{itemize}
\item ページ移動の少ないサイトを作成したい場合

記載情報はページ内でポップアップ表示するため、複数トピックの閲覧が一つのページで行うことができる。
これにより新たなページを読み込む時間と、利用者のストレスを軽減できる。


\item 複数人でWebページの内容を編集したい場合

Webページの内容の管理には Google スプレッドシートを利用することで、 Google アカウントを有しているものが同時に編集することができる。
\end{itemize}












\chapter{システム構成}

\section{使用技術/開発環境}
\subsection{HTML}
HTML の正式名称は「HyperText Markup Language」であり、1989 年に Tim Berners-Lee によって作成されたマークアップ言語である\cite{HTML}。

バージョンは HTML Living Standard で開発する。
\subsection{CSS}
CSS の正式名称は「Cascading Style Sheets」であり、1996 年に W3C によって勧告されたスタイルシート言語である。

CSS は、HTML で作成されたページの装飾をより高い自由度で表現することができる\cite{CSS}。

バージョンは CSS3 で開発する。
\subsection{JavaScript}
JavaScriptとは、Netscape Communications社によって開発されたスクリプト言語のことである。

HTMLの中に記述することでWebブラウザによって実行され、Webページに動きや対話性を付加することができる\cite{JavaScript}。

バージョンは Node.js v14.17.0 で開発する。

\section{システムの流れ}
\begin{enumerate}
\item Webページに掲載する紹介テキスト、掲載する画像を準備する。

\item 準備した画像を本システムの画像を保存する img フォルダもしくは、Googleがサービス提供しているクラウドサービスのGoogleドライブに保存する。

\item Googleスプレッドシートに紹介テキスト、画像のファイル名もしくはGoogleドライブの共有リンクを、紹介するスポットごとに行を分けて入力する。

\item 閲覧者のブラウザでWebページが読み込まれるとプログラム処理が開始し、上記工程で作成したスプレッドシートの情報を取得する。

\item 取得したスプレッドシートの情報を元に、Webページの要素に設定されているIDと比較しWebページの内容を変更する。
\end{enumerate}

\newpage

\begin{figure}[htbp]
\begin{tabular}{cc}
\begin{minipage}[c]{1\hsize}
\centering
\includegraphics[keepaspectratio, width=150mm]{system-concept.pdf}
\caption{Googleスプレッドシートを用いたWebページの変更}
\end{minipage}
\end{tabular}
\end{figure}

\newpage


\section{システムの説明}
\begin{itemize}
\item Webページデザイン
\item 内容の変更
\item データ取得


\end{itemize}

Webページを構成する HTML に、スポット全体を紹介する「Top要素」、各ポイントの一覧を追加、表示する「Main要素」、各ポイント要素をクリックした際に表示する「ポップアップ要素」を作成する。この時、「ポップアップ要素」はWebページが読み込まれた際、非表示にしておく必要があるため、要素の class 属性に 「visibility:hidden;」のスタイル情報を追加する。


\subsection{ソースコード/ファイル}

\begin{itembox}[l]{HTML一部抜粋}
\begin{verbatim}

\end{verbatim}
\end{itembox}


\begin{itembox}[l]{Javascript}
\begin{verbatim}

\end{verbatim}
\end{itembox}

\begin{itembox}[l]{CSV}
\begin{verbatim}

\end{verbatim}
\end{itembox}

\subsection{表示結果}
\begin{figure}[htbp]
\begin{tabular}{cc}
\begin{minipage}[c]{1\hsize}
\includegraphics[keepaspectratio, width=160mm]{kankoCMS.png}
\caption{Webページの要素追加・ポップアップ表示}
\end{minipage}
\end{tabular}
\end{figure}

\chapter{システムの検証}









\chapter{考察}

\section{現在の状況}
プログラム処理を開始するとページにスポット紹介の要素が追加され、ポップアップによる各スポットの内容を表示するWebページを作成した。

\subsection{ページ内容の変更}
ページが読み込まれた際、プログラムが処理を開始し、指定された Google スプレッドシートから JSON 形式のデータの取得を行った。

プログラムによるスプレッドシートからのデータの取得には Google API を使用した。

\begin{itembox}[l]{Google API}
\begin{verbatim}
const SPREAD_SHEET_ID = 'スプレッドシートのID';
const SHEET_NAME = 'スプレッドシートの名前';

function doGet(e) {
  const app = SpreadsheetApp.openById(SPREAD_SHEET_ID);
  const sheet = app.getSheetByName(SHEET_NAME);
  const values = sheet.getDataRange().getValues();
  const data = [];

  for(let i=0; i<values.length; i++){
    if(i === 0)continue;
    const param = {};
    for(let j=0; j<values[i].length; j++){
      param[values[0][j]] = values[i][j];
    }
    data.push(param);
  }
  const result = ContentService.createTextOutput();

    result.setMimeType(ContentService.MimeType.JSON);
    result.setContent(JSON.stringify(data));

    return result;
}
\end{verbatim}
\end{itembox}

スプレッドシートの1行目にHTMLの要素に設定してあるIDを記載し、データを受け取る際、keyとvalueが設定された配列として受け取る。



\begin{itembox}[l]{Javascript}
\begin{verbatim}
function addcontents(){
var contents_json_url = "Google APIのURL"

    //APIを使って非同期データを取得する
    fetch(contents_json_url)
    .then(response => response.json())

    .then(data => {
        allcontents = data;
        addcontent(allcontents);
    });
}
\end{verbatim}
\end{itembox}



受け取ったデータを追加したHTMLの要素を、プログラムによりWebページに新たなスポット紹介要素として追加する。これにより追加したいスポット紹介要素が増えたとしても、すべて追加することができた。

\subsection{ページ内容の変更の課題}
このプログラム処理開始からデータ取得までに、体感のできる遅延が発生した。
この遅延によってページ閲覧者の使用満足度が低減してしまうことが考えられる。

特にスポット紹介するポップアップ表示の内容変更時に顕著に見られた。閲覧するスポット情報を変更するたびに、表示内容が変更される仕様になっているため、何度も遅延が発生してしまう現状となっている。









\chapter{結論}

\section{今後の展望}
作成者の記録している内容に合わせて、動的に要素の個数やデザインを変化させられるコードをプログラムしていくことで、汎用的なシステムを目指す。
また、現在は編集にCSVファイルを作成しなければならないが、編集に必要なCSVファイルも専用Webページで作成できるようにすることで、作成者のデバイスを選ばす、編集できるようなシステムを目指す。


\begin{thebibliography}{}
\bibitem{s} 東洋大学国際地域学部国際観光学科 古屋秀樹, 東洋大学大学院国際地域 学研究科国際地域学専攻 野瀬元子. "観光情報Webサイトの評価に関する基礎的分析"

\url{http://library.jsce.or.jp/jsce/open/00039/201011_no42/pdf/63.pdf}, (参照:2022-06-07).

\bibitem{wordpress}

\url{https://wordpress.com/ja/}

\bibitem{wix} Wix.Web制作の新たな時代を創り出す.

\url{https://ja.wix.com/}, (参照:2021-11-01).


\bibitem{bibcms} 活水女子大学文学部人間関係学科 川場隆．書籍型CMSの開発．日本教育工学会論文誌．32 （Suppl.），81−84，2008
\url{https://www.jstage.jst.go.jp/article/jjet/32/Suppl./32_KJ00005126164/_article/-char/ja/}, (参照:2022-05-31).


\bibitem{koryu} 神戸大学農学部 星野敏．ウェブサイトを用いた交流型地域づくりの可能性 -岡山県八塔寺ふるさと村HP作成プロジェクト-．農業計画学会誌．2005，24，Special\_Issue，p.S199-S204．

\url{https://www.jstage.jst.go.jp/article/arp/24/Special_Issue/24_Special_Issue_S199/_article/-char/ja/}，(参照:2022-12-08)．


\bibitem{Gaka} NTTドコモ．"【ライフスタイル】10代女性の3人に1人はTwitter、Instagramを３アカウント以上所有"．モバイル研究所．2021-05-13．

\url{https://www.moba-ken.jp/project/lifestyle/20210513.html#:~:text=%E3%81%9D%E3%81%AE%E7%B5%90%E6%9E%9C%E3%80%81%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E6%89%80%E6%9C%89%E7%8E%87,Apple%20ID(44.5%25)%E3%80%8D%E3%80%8C}，(参照:2022-12-09)


\bibitem{HTML} IT用語辞典バイナリ.JavaScript.

https://www.sophia-it.com/content/HTML, (参照:2022-01-11)
\bibitem{CSS} IT用語辞典バイナリ.JavaScript.

https://www.sophia-it.com/content/CSS, (参照:2022-01-11)
\bibitem{JavaScript} IT用語辞典バイナリ.JavaScript.

https://www.sophia-it.com/content/JavaScript, (参照:2022-01-11)
\end{thebibliography}
 
\end{document}