%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass{jsbook}%\documentclass{文書の種類}TeXファイルの先頭に配置して，文章の種類を定めます。jbook書籍。
%\pagestyle{empty}
\usepackage[dvipdfmx]{graphicx}%パッケージの利用
\usepackage[dvipdfmx]{color}
%\usepackage{listings, jlisting}
%\usepackage[sectionbib]{chapterbib}
\usepackage{ascmac}
\usepackage{amsmath}
\usepackage{siunitx}
\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 を効果的に行える。これは様々な分野に言えることだが，近年では特に観光業界で重要視されている。観光庁が行っている観光立国ショーケースという「日本再興戦略　改訂2015」（平成27年6月30日閣議決定）に基づき、多くの外国人旅行者に選ばれる，観光立国を体現する観光地域を作り，訪日外国人旅行者を地方へ誘客するモデルケースを形成しようとする取り組みの中では，地域の魅力を積極的に発信することにより，地域の観光需要の増加・地域産品の販路開拓等を図り，多くの外国人旅行者に選ばれる観光立国を体現する観光地域を目指した地域づくりを目標としていた\cite{kankotyo}。こういった取り組みからも Web ページなどインターネット上での情報発信が重要視されていることがわかる。
しかし現在は Web ページ作成，またそれに掲載するコンテンツ作成を行う人が限られ，まだ発信されていない魅力ある情報を記載することが難しい。そこで本研究ではより広範囲かつ多人数による共同編集可能な CMS を開発し，今までWebページ作成に参加していなかった人がコンテンツを作成することのできるシステムを提案する。これにより現在の観光案内ページなど既存の情報では知りえなかった情報を発信するコンテンツ作成を可能とし，観光地域づくりに役立つ一つの可能性を模索する。(620文字)
 
%\newpage
　%（←全角スペース）

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

%修正目標
%Google APIの説明を追加
%読んだ人がシステムを再現できる文章を追加
%有効性の検証にアンケートとサンプルデータ入力実験
%jsなどの用語はワールドワイドコンソーシアムから
 
\chapter{はじめに}
本章では，研究を行なっていく上での社会的な背景や現在目的を達成するために取られている手段についてまとめ，そこで生じている課題について考察する。その上で本研究で解決するべき課題を考察し，その解決策について述べる。後半ではこの解決策を行う目的についてまとめ，本研究で達成を目指す社会的意義について述べる。

\section{背景}
現代社会において情報を発信する手段にはチラシや広告看板，テレビ放送など様々な方法を取ることができ，その情報発信の方法の一つにインターネットでの発信という方法もある。
インターネットでの発信ではインターネットに接続しているユーザに場所や時間を選ばず情報を届けることができる。
インターネットで情報を発信する方法にはメールや動画サービス，ソーシャル・ネットワーキング・サービスなどが挙げられるが，その中の一つに Web ページを作成する方法がある。Web ページを作成し公開することによって，そのページを閲覧しに来たユーザに記載されている情報を伝えることができる。
しかしWeb ページを作成するためには公開するWebページの内容，デザインを構成する HTML・CSSファイルを作成する必要がある。
この HTML などのコーディングは知識のない人が行うには，まず HTML や CSS などの技術について学習し，その上で Web ページのレイアウトや掲載するコンテンツの内容などを考える必要があるため時間的コストがかかってしまう。
そのため Web ページの作成を行う際，コンテンツ・マネジメント・システム(CMS) が用いられる。
だが現在普及している CMS では機能が複雑になり，使用したことがない人がシステムを導入しWebページを作成していくのは，単純な Web ページだけを作成し公開・編集したいと考えているユーザにとってはかえって時間がかかってしまう。
そのため本研究では，より編集が簡単な CMS を提案する。
これにより，より広範囲の人がWebページ作成，編集に参加できるシステムを作成し，共同で開発できるWebページによる情報発信を行えるようにする。

この「より広範囲の人がWebページ作成に参加できる」という点を活かし，本研究では観光地の情報発信の課題を解決しようと考えた。
観光庁が行っている観光立国ショーケースの取り組みでは，多くの外国人旅行者に選ばれる観光立国を体現する観光地域を目指した地域づくりを目標を達成する取り組みとして，地域の魅力を積極的に発信することにより，地域の観光需要の増加・地域産品の販路開拓等を図ることを掲げていた。
ということは観光地域の情報発信には「地域の魅力を積極的に発信すること」が重要であると言える。
また観光地の情報を調べる際，そのスポットを紹介している Web ページを閲覧することが考えられる。
事前に計画を立てている段階であれば既存の紹介ページを閲覧することで必要な情報を得られる。
しかし現地で観光中に諸情報を調べるのにはその他のPRに関する情報や詳細な情報が記載されているため，たくさんある情報の中から必要の情報を見つけ出さなければならない。また東洋大学の古屋らは観光地の紹介ページにたどり着くためにも，複数のページにアクセスしなければならない場合もあり手間であると示していた\cite{s}。

これらの背景を踏まえ，本研究では地域の魅力を積極的に発信することを容易にするため，その地域に住み生活をしている地域住民の参加による，現地で観光をしながら閲覧するのに適した観光地紹介 Web ページ作成が行えるシステムを開発する。
これにより地域住民と共同で行う情報発信の方法を検証し，観光地域づくりに必要とされている「地域の魅力を積極的に発信する」という課題の解決策として考える「地域住民参加による Web ページ作成」を達成し，新たな地域の魅力発信方法として提案する。


\section{目的}
本研究では現行の CMS より編集，管理が容易な CMS を開発し，より広範囲な人がWebページ作成に参加できるシステムの開発を目指す。
この「より広範囲な人」とは，その地域に住み生活をしているため地域の魅力発信に役立つ情報を持っているが，現行の Web ページの作成に携わってこなかった地域住民を指す。その人たちにも作成に参加してもらうことで，今まで記載できなかった魅力ある情報の提供を図る。
この特徴を活かし本研究では，観光案内に特化した情報発信を行う Web ページの CMS に内容を絞りを開発する。地域住民の参加できるという点から，今まで発信できていなかった魅力を再発見し，新たな情報発信を行うことで地域活性化に活かせると考えたためである。
本研究で開発するシステムを使用し作成する Web ページでは，複数の観光地の情報を閲覧するのにページの移動を行わず，観光中の屋外にいる時でも閲覧しやすい Web ページを構築する。
さらに Web ページ作成の知識を持たない地域住民も参加できるシステムを構築することによって，まだその他 Web ページに記載されていない観光スポットの情報発信を促進する。
この観光案内に特化した地域住民との共同編集可能な CMS から本研究で開発したシステムの有効性について考察する。
その結果，観光地域づくりに必要とされている「地域の魅力を積極的に発信する」という課題の一つの解決策として考察した「地域住民参加による Web ページ作成」を実現する。
 
 
 
%=================================%
%章区切り
%=================================%
 
 
 
\chapter{類似サービスと先行研究}
ここでは類似サービスと先行研究を紹介する。類似サービスでは本研究で開発する CMS について，他の CMS を例に挙げ，その CMS の特徴や地域住民参加の Web ページ作成において解決するべき課題を検討する。
先行研究では特化型の CMS 開発についての研究と，地域の情報発信についての研究から，それぞれの研究で行ったことをまとめたのちに，本研究の目的である地域住民参加による Web ページ作成において重要な点を考察する。


\section{類似サービス}
ここでは CMS において，市場シェアの高いものの特徴についてまとめる。

\subsection{CMSとは}
CMSとは，Contents Management System（コンテンツ・マネジメント・システム）の略称で Web ページのコンテンツを構成するテキストや画像，デザイン・レイアウト情報などを一括して保存・管理するシステムを指す。
CMS を Web ページ作成に導入することによって，HTML や CSS など Web ページを構成するために必要なコードを記述する知識を持たない人でも，Webサイトやコンテンツの構築・管理・更新ができるということが特徴である。


\subsection{WordPress}
WordPressとは，その他の CMS と比べてどのサービスよりも高いシェアを獲得している無料で使える CMS である\cite{wordpress}。
W3Techs が行った調査では，全 Web サイトの 43.0\% で使用されており，コンテンツ管理システムの市場シェアは 63.9\% であった。続く市場シェアは Shopify 5.9\%，Wix 3.5\% であった\cite{cmsshare}。
様々なニーズに合わせたデザインテンプレート\footnote{Webページ全体のデザインや構成が作成されているもの}が提供されており，プログラミングのスキルがあれば，ホームページの環境や機能，デザイン，構成などを，自由自在にカスタマイズすることができる。
そのためWebページ作成には HTML・CSSだけでなく，PHPの最低限の知識が必要になることがある。


\subsection{Wix}
Wixとは，2006年にテルアビブ(イスラエル)で設立された企業によるクラウド型\footnote{オンライン上のサーバで提供されているサービスを，インターネットを介して利用するもの} CMS のサービスである。
専門技術や知識なしでWebページを作成できるサービスとして，世界中で利用されている。
このサービスでは，様々なデザインテンプレートが用意されており，様々なデバイス・画面サイズで見たときに，デザインが崩れず適切に表示されるレスポンシブ対応もされているサイトを作ることができる。またソーシャル・ネットワーキング・サービスとの連携やオンライン予約，チャットツールなどの機能も簡単に組み込むことができる\cite{wix}。


\begin{figure}[htbp]
%\begin{tabular}{cc}
%\begin{minipage}[c]{0.45\hsize}
\centering
\includegraphics[keepaspectratio, width=130mm]{cmsshare.png}
\caption{2022年12月時点世界CMSのシェア\cite{cmsshare}}
%\end{minipage}
%\end{tabular}
\end{figure}

\newpage

\section{先行研究}
ここでは先行研究を2つまとめる。1つ目の書籍特化の CMS 開発では一つの分野に特化し，なおかつ Web ページ開発の経験の乏しい利用者が利用しやすい CMS に必要な要素をまとめる。
2つ目のウェブサイトを用いた交流型地域づくりの可能性では地域住民が参加した情報発信 Web ページ作成にはどのような要素が重要かをまとめる。それらを本研究で解決すべき課題設定の足掛かりとする。

\subsection{書籍特化のCMS開発}
川場隆の研究では，章や節の構成をもち数百ページ程度のボリュームのあるテキスト等を公開するサイトを作成しようとすると現在ある汎用的なツールでは適していないことを課題としている。
この課題の解決策として，操作が簡単に理解でき，CMS の操作・運用に慣れていない者でも容易にサイトを構築し運営できることを目的とした書籍を公開するサイトの構築に特化した書籍型 CMS を開発している\cite{bibcms}。
操作が簡単に理解でき，CMS の操作・運用に慣れていない者でも容易にサイトを構築し運営できる CMS とするために，最初に目次項目を設定するだけで目次が付属するウェブサイトを自動生成し，コンテンツは WYSIWYG エディタ\footnote{最終的な仕上がりを画面上に表示して確認しながら編集できるもの}で作成でき，マウス操作でコンテンツを並べ替えることができるシステムとなっている。
現行の CMS では運用に適していないという観点を解決した研究として，本研究で開発するシステムに必要な要素をここから考察する。

\subsection{ウェブサイトを用いた交流型地域づくりの可能性}
星野敏の研究では，都市農村交流がテーマの地域づくりに，参加型のホームページづくりを連動させることで生み出される新たな可能性について考察している\cite{koryu}。
この研究では地域の情報発信手段としてインターネットを使用して閲覧できるホームページが有効だと示唆しているが，旧村あるいは集落レベルの地域づくり活動の情報量が非常に少ないことや，観光業の PR やインターネット直売などの経済活動で利用される場合が多いことを課題としている。
この課題の解決策として，地域住民が参加し地域づくりの情報提供を目的としたホームページ作成を行うことを示していた。
この研究では地域づくりにおけるホームページ作成のメリットを二つ挙げている。
1つは都市農村交流のための情報発信手段で，行事や交流イベントの紹介や施設の営業情報の提供，インターネットを通じた直売など，利用者の利便性を高めるものである。
もう1つは1次情報の提供によるイメージの向上で，その地域に住んでいる人の生きざまや自然の特徴，伝統文化などを紹介することによる，地域の素顔（＝1次情報）の提供であると示されていた。
本研究で開発するシステムにどのように地域住民が参加することが望ましいかをこの研究から考察する。


\section{本研究で解決を目指す課題}
\label{req}
本研究で開発するシステムはより広範囲な人がWebページ作成に参加できることを目指すため，より多くの人が操作方法を理解できるシステムの開発を目指す。

類似サービスで挙げた WordPress では HTML や CSS などの記述に関する知識を必要とし，参加可能な人を減らしてしまうと考えられる。また Wix ではWebページのデザインに直接コンテンツ内容を変更させる操作によって作成していくので，複数人の同時編集を妨げることが考えられる。
操作方法に関してはより多くの人が理解しやすい操作方法を目指すため，先行研究であった初心者でも容易に操作ができるように編集者自身が現在どの個所を編集しようとしているかが直感的にわかりやすいマウス操作を可能するという点を本研究にも活かす。これによりコマンド入力やプログラムによる操作よりも理解・操作がしやすいものが良いと考えられる。
情報の内容では地域の情報発信には1次情報の提供が重要であることが示されていたため，地域住民が直接紹介文や画像などのコンテンツ内容を直接編集できるようにすることが重要だと考えた。
これらを踏まえ本研究では，より広範囲な人が Web ページ作成に参加できるようにするため以下のようなことが可能なシステムを開発する。

\begin{itemize}
\item HTMLやCSS，PHPなどの記述・編集を行う必要なく Web ページの内容を編集できる。
\item マウス操作でコンテンツの管理が行える。
\item コンテンツ管理をクラウドで行い，許可されているユーザはどこからでも，何人でも直接コンテンツ編集に参加することができる。
\end{itemize}

これらの編集方法を可能とするためにはクラウド型でサービスが提供されていて，参加が想定される地域住民が使用したことのある，もしくは使用感が類似しているサービスを使用する必要があると考えた。
NTT ドコモ モバイル社会研究所が，2021年1月に全国の15～79歳の男女を対象に行った，ICT サービス利用と関連の深いアカウントの所有状況の調査では，Google アカウントの所有率は77.8\%と最も多い結果となった\cite{Gaka}。
この結果から，アカウント保有率も高く，様々なクラウド型サービスが提供されている Google のサービスをコンテンツマネジメント方法として採用することで上記の運用方法が可能なシステムを開発する。
これにより Web ページ作成の知識を持たない者でも，その地域に住み生活をしているが故に持っている情報をコンテンツとしての提供を可能とし，より広範囲の人が情報発信に参加できるシステムを目指す。




%=================================%
%章区切り
%=================================%




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

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

\begin{itemize}

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

\item コンテンツ管理方法
場所や環境を選ばず複数人が同時にコンテンツ作成に参加してもらうために情報の記載には，クラウド型の表計算ソフトを利用する。
本研究を始めるにあたり検討したコンテンツマネジメント方法は表計算ソフトで作成できる CSV\footnote{comma-separated valuesは，テキストデータをいくつかのフィールドに分け，区切り文字であるカンマ「, 」で区切ったデータ形式。} ファイルによるものだった。しかしコンテンツの更新を行う際，そのたびに CSV ファイルを出力し，システムのフォルダにアップロードを行う必要があった。再度コンテンツの編集を行う際は以前作成した CSV ファイルをダウンロード/読み込みの工程が発生した。この方法では複数人による編集を行った際，データのバージョンの食い違いが発生してしまう恐れがあった。
そのため本研究ではクラウド型でかつ複数人同時編集が可能な Google スプレッドシートを活用する。
\ref{req}で示した Google のアカウント保有率が最も多いという観点からも Google スプレッドシートによるコンテンツ管理を行うことで，より多くの人が Web ページ作成に参加できると期待できる。

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

\end{itemize}


\section{本システムの概要}
本システムでは HTML や CSS などのコーディングが必要なく編集が行える CMS の開発を目指す。
コンテンツの表示方法は閲覧者がブラウザで本システムのWebページを読み込んだ際，プログラムの処理が開始し，コンテンツ情報を記載している Google スプレッドシートの情報をもとにWebページの構成や内容を変更していくものとする。システムの要素は以下にまとめる。

\begin{itemize}
\item 各項目の情報の表示はページ内でポップアップ表示し，地域住民から提供された情報をページの移動なしに確認できる機能を持たせる。

\item Webページの内容は，本システムで使用するWebページのデザインの項目に合わせて紹介文や写真を用意してもらい，テキストや画像のアップロード/URLの入力をするだけで編集できるようにする。

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

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



\subsection{編集方法}

デバイスは電子計算機(この先 PC と表記する)で行うものとする。Webページ作成に使用するデータは，あらかじめ編集に使用するデバイスに保存しているものとし，本システムの操作手順手順書を確認しながら編集を行うことを想定する。

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

文献\cite{s}では観光に関心がある被験者10人を対象に，文京区観光協会のウェブサイトからの情報収集に重点を置いた実験を行った。この実験では観光情報Webサイトを閲覧した際，満足度の高いウェブサイトに必要とされる要素について調査を行った。その結果見つかった問題点は，まち歩きの経路や観光資源間の所要時間がわからないことや観光資源の写真を複数閲覧できなかったことなどが挙げられている。

これを踏まえ本システムで使用するWebページのデザインの内容は以下の要素を掲載する。
\begin{itemize}
\item 地域住民が共有している観光地の概要や裏話
%\item イベント，食事，おみあげなどの情報
%\item 詳細ページへのリンク
\item よく利用される交通案内や移動所要時間
\item 観光地の全体像が分かる様々な角度から撮られた複数の写真
\end{itemize}



%=================================%
%章区切り
%=================================%



\chapter{システム設計}
本章では本研究で開発する地域住民がコンテンツを提供・編集・発信する観光地紹介 Web ページ作成での使用を想定した CMS の開発に必要な要素をまとめる。

\section{要件定義}
\ref{req}でまとめた課題から本システムの要件を定義する。
\begin{itemize}
\item ページレイアウト

地域全体の情報を記載する項目と地域内の各スポットの情報を記載する項目を実装

表示推奨デバイスをタブレット機とし，画面サイズ 375 × 667 での使用を想定したレイアウト化

レイアウトは本研究で作成するデザインテンプレートを使用し，その後の変更は行わない

\item 地域全体の情報

地域の名前・アイキャッチ画像1枚・魅力・歴史・所在地・交通手段・営業日・休業日を記載
\item 各スポット情報

ページ下部にスポット一覧(全て)を表示させ，クリックにより各スポット情報を表示

スポットの名前・～30字の紹介文・スポットの画像3枚・100～200字の紹介文A・50～150字の紹介文B・地域内でそのスポットの位置を示すマップを記載

\item データ保存

コンテンツ情報は Google スプレッドシートにテキスト情報で記載

画像データは Google ドライブに保存

画像情報は共有 URL を取得し スプレッドシートに取得した URL を記載する

どちらも管理用 Google アカウントがオーナーとなっているファイル・フォルダを使用

\item コンテンツ管理
\label{keymean}

デザインテンプレートの HTML に記述した ID と Google スプレッドシートの一行目に ID と同様の文字列を設定

シートの記載情報をシステムに受け渡す際，シート一行目の文字列を各コンテンツの key として設定し取得

ID と key を紐づけデザインテンプレートの情報を書き換える形でコンテンツ管理を行う

\item コンテンツ編集

オーナーアカウントにより許可された Google アカウントを所持しているものによって編集

許可される範囲はオーナーによってファイル・フォルダの共有設定から制限付き，もしくはリンクを知っている全員のどちらかを選択することにより設定

\item システム容量

Web ページファイル容量：15 MB 以上

Google スプレッドシート：2 KB 以上

画像保存用 Google ドライブ：保存画像容量以上 20 MB 以上推奨

\end{itemize}

\section{使用技術・サービス/開発環境}
ここでは本システムで使用する技術やサービスについてまとめる。


\subsection{JavaScript}
JavaScript は本システムの Web ページの表示コンテンツを管理するプログラムとして使用する。バージョンは ECMAScript2022 で開発する。
本システムの開発環境では Node.js を使用する。これは Web ページ作成などの際に使われる JavaScript をサーバー側で動作させるプラットフォームである。
バージョンは Node.js v14.17.0 で開発する。

\subsection{Google スプレッドシート}
Google スプレッドシートは，Googleが提供するウェブベースのスプレッドシートプログラムである。どのデバイスでもクラウド型のスプレッドシートを作成してリアルタイムで共同編集を行うことができる\cite{sheets}。
Google スプレッドシートは本システムの Web ページ記載内容の管理に使用する。バージョンは2022年10月更新のものを使用する。

\subsection{Google Apps Script}
Google Apps Scriptとは，Google Workspace の統合・自動化・拡張のためのビジネスソリューションをすばやく簡単に構築するための唯一のローコードプラットフォームである\cite{GAS}。
Google Apps Script は Google スプレッドシートのデータをコンテンツ管理をしている JavaScript に受け渡すための API\footnote{アプリケーション・プログラミング・インターフェース（Application Programming Interface）の略称で，ソフトウェアやプログラム・Webサービスの間をつなぐインターフェースのことを指す。} をして使用する。
本システムのオーナーによって「ウェブアプリ」として「全員」がアクセスできるようデプロイされた GAS を利用し，本システム側からウェブアプリ URL にアクセスし Google スプレッドシートからのデータ取得を行う。




%=================================%
%章区切り
%=================================%



\chapter{観光地紹介 Web ページ CMS}
本章では本研究で開発した観光地紹介 Web ページ CMS のコンテンツ編集時のシステム操作手順を示したのちに，本システムで作成される Web ページの構成，コンテンツ・マネジメント・システムの処理内容，Web ページ閲覧時の表示内容の切り替え処理について説明する。最後に現在開発した本システムによって生成された Web ページの結果を表示する。

\section{システム使用時の流れ}
本システムを使用した Web ページの内容を編集する際は以下の手順で行う。

\begin{enumerate}
\item Webページに掲載する紹介テキスト・掲載する画像を準備する。

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

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

\end{enumerate}




\section{Web ページの構成}
\label{webCon}
本システムで使用するWebページのデザインの要素は大きく以下の3ブロックに分かれる(図\ref{kosei})。
\begin{itemize}
\item 紹介するエリア全体について概要や交通手段を説明する「トップブロック」

このブロックにはアイキャッチ画像・魅力・歴史・所在地・アクセス・営業時間・休館日の要素がある。

\item 各ポイントの一覧を追加・表示する「メインブロック」

このブロックは紹介するエリア内にある各スポットを紹介する要素を表示する。表示する要素は Google スプレッドシートに記載されている各スポットの項目分，要素が追加される。

\item メインブロックに追加された要素をクリックした際に表示する「ポップアップブロック」

上記の各スポットを紹介する要素をクリックした際，クリックされたスポットに関するデータを，モーダルウィンドウ(ウィンドウ内で指定された操作を完了，またはキャンセルするまで他のウィンドウの操作ができないウィンドウ)で表示する。ページが読み込まれた際は非表示になっている。
\end{itemize}

\begin{figure}[htbp]
\label{kosei}
%\begin{tabular}{cc}
%\begin{minipage}[c]{0.45\hsize}
\includegraphics[keepaspectratio, width=150mm]{top-main-popup.pdf}
\caption{Webページの構成図}
%\end{minipage}
%\end{tabular}
\end{figure}

\section{コンテンツのID/key管理}
\label{ID-key}
本システムでは，Web ページの表示内容を管理するために Web ページの各要素に固有の ID を登録し，同じ文字列を Google スプレッドシートに記載する情報にも登録し，コンテンツの管理を行った。
プログラム処理によりスプレッドシートに記載されている ID を同じ文字列を，\ref{keymean}の流れで設定された key として取得し，同じ ID が登録された要素を Web ページ内から探す。
要素が見つかった場合，その key の種類によって処理内容を変更(テキストの場合はテキスト部分，画像の場合はパスや URL を変更させるなど)させ，コンテンツの内容を変更させる。

\begin{figure}[htbp]
%\begin{tabular}{cc}
%\begin{minipage}[c]{1\hsize}
\centering
\includegraphics[keepaspectratio, width=150mm]{id_key.pdf}
\caption{ID/keyを使用したコンテンツ管理の例}
%\end{minipage}
%\end{tabular}
\end{figure}

\newpage


\section{class 属性による管理}
class 属性とは HTML の要素の中で設定することができる属性の一つで、複数の要素を一つのグループにまとめ、共通の識別子（クラス名）を与えるものである。
この class 属性を使用して\ref{kosei}で示したポップアップブロックの表示・非表示を行う。
ポップアップブロックの要素には「visibility:hidden;」のスタイル情報が追加されている class 属性が登録されており，この class 属性の追加・削除によって表示・非表示が管理される。


\section{システムの説明}
本システムで作成された Web ページは閲覧者によって読み込まれた際，以下の手順でコンテンツの表示・管理を行う。

\begin{enumerate}
\item Google スプレッドシートから記録されたデータを取得する。
\item 取得したデータを本システムのデザインテンプレートにあらかじめ登録されている ID と比較し，Webページの内容を変更する。
\item 閲覧者のアクションに合わせて表示内容を管理する。
\end{enumerate}

それぞれの要素ごとに説明する。

\begin{enumerate}

\item データ取得
\label{dateGET}

データの取得には Google Apps Script (GAS) を利用した。Webページが読み込まれると，本システムのプログラム処理が開始し，GAS に作成したデータ取得プログラムにデータ送信をリクエストする。アクセスがあったデータ取得プログラムは記述されているスプレッドシートのIDをもとに，データが記載されているスプレッドシートにアクセスし，データを取得する。さらに取得したデータを JSON 形式に変換し，リクエストのあった本システムのプログラムにデータを返す。


\begin{itembox}[l]{取得する JSON データの例}
{\scriptsize
\begin{verbatim}
{pagetitle: '小樽市案内', toptitle: '小樽市', topimage: 'img/IMG_4765_srcnn_photo_noise0.png', mi: '小樽には、小樽運河をスタート地点とした堺町通りが人気のスポットです。ここには北のウォール街と言われた…司屋さんなど小樽らしいお店でのんびりしましょう。メルヘン交差点にあるオルゴール堂で締めくくりです。', history: '小樽は古くから北海道有数の港湾都市として発展してきました。「おたる」の地名は、アイヌ語の「オタ・オル・ナイ」（砂浜の中の川）に由来しています。'}
\end{verbatim}
}
\end{itembox}



\item Web ページの内容の変更

Web ページの内容変更は JavaScript によって記述された本システムのプログラムで行っている。\ref{dateGET}で取得したデータをもとに，\ref{ID-key}で説明した方法で Web ページのコンテンツ内容を変更させる。
\ref{webCon}で示したブロックごとの処理は以下の内容である。

\begin{itemize}


\item トップブロック

トップブロックはページが更新されるまでは内容の変更を行わないため，ページを読み込んだ/更新した際に一度だけ内容を変更する。


\item メインブロック

メインブロックの要素もトップブロックと同じく更新ごとの追加であるが，取得したデータによって追加する要素数が変化するため，本システムのプログラムによって Web ページに要素を直接追加する。この時，それぞれの要素を管理するためにシステムのプログラムによって新たに設定される個別の管理 ID (整数)を割り振る。


\item ポップアップブロック
\label{popup}

ポップアップブロックはページ読み込み時には内容を変更させず，メインブロックに追加した要素がクリックされた際に変更する。
変更する情報の選別には，メインブロックの要素追加の際に割り振った管理 ID を使用し，クリックされた要素の ID とデータの行番号を比較し，同じ行のデータをもとにポップアップブロックのそれぞれの要素を変更させる。


\end{itemize}



\item 表示内容の管理

閲覧者のブラウザが Web ページを読み込んだ際，トップブロックとメインブロックは表示され，ポップアップブロックは非表示となっている。
Web ページ読み込み完了後，閲覧者がメイングロックの要素をクリックした際，\ref{popup}で示した処理によって内容が変更されたポップアップブロックが表示される。表示後はポップアップブロック上部のアイコンをクリックすることで再び非表示にすることができる。

\end{enumerate}


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


\section{サンプルコード}


\begin{itembox}[l]{データリクエスト/変換 JavaScript}
{\small
\begin{verbatim}
function addcontents() {
var contents_json_url = "Google Apps ScriptのURL"

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

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


\begin{itembox}[l]{作成したGoogle Apps Script}
{\small
\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}


\begin{itembox}[l]{メインブロック追加 JavaScript}
{\small
\begin{verbatim}
function addcontent(list) {
    console.log(list)
    for (var i=0; i<list.length; ++i) {
      document.getElementById("main").insertAdjacentHTML('beforeend',
      '<div class="section js-show-popup" id="' + i + '"></div>');
      document.getElementById(i).innerHTML = "<div class=\
      "section_contents\"><h2>" + list[i]["title"] + "</h2><p>"
      + list[i]["introduction1"] + "</p></div>";
    }    
}
\end{verbatim}
}
\end{itembox}


\begin{itembox}[l]{ポップアップブロック内容変更 JavaScript}
{\small
\begin{verbatim}
function chenge(e) {
  e.addEventListener('click', function() {

    var contentslist = allcontents[e.id];
    console.log(contentslist);
    var contentskeys = Object.keys(contentslist);

    for (var i=0; i<contentskeys.length;++i) {
        var content = document.getElementById(contentskeys[i]);
        console.log(content);
        if (content) {
            if (contentskeys[i] == "image1" || contentskeys[i] == "image2"
            || contentskeys[i] == "image3" || contentskeys[i] == "map") {
                if (contentslist[contentskeys[i]]) {
                    if (contentslist[contentskeys[i]].match(/https:
                    \/\/drive.google.com\/file\/d\//) != null) {
                        content.src = contentslist[contentskeys[i]]
                        .replace(/https:\/\/drive.google.com\/file\
                        /d\//, "http://drive.google.com/uc?export=
                        view&id=").replace(/\/view\?usp=sharing/,"");
                    } else {content.src = contentslist[contentskeys[i]];}
                } else {content.src = "img/errer.jpg";}
            } else {content.innerHTML = contentslist[contentskeys[i]];}
        }
    }
  }, false);
}
\end{verbatim}
}
\end{itembox}


\begin{itembox}[l]{ポップアップブロック表示/非表示管理 JavaScript}
{\small
\begin{verbatim}
function popupImage() {
    console.log("スタート");
 
    var popup = document.getElementById('main');
    let js_popup = document.getElementById('js-popup');
    var body = document.body;
    if (!popup) return;
 
    let blackBg = popup.querySelector('.js-black-bg');
    let closeBtn = popup.querySelector('.js-close-btn');
 
    closePopUp(blackBg);
    closePopUp(closeBtn);
 
    var section = popup.querySelectorAll('.js-show-popup');
    for (sec of section) {
        closePopUp(sec);
        chenge(sec);
    }
        
    function closePopUp(elem) {
        if (!elem) return;
        elem.addEventListener('click', function() {
            body.classList.toggle('scroll-stop');
            js_popup.classList.toggle('is-show');
        });
    }
}
\end{verbatim}
}
\end{itembox}



\newpage
\section{テストページ表示結果}
\begin{figure}[htbp]
%\begin{tabular}{cc}
%\begin{minipage}[c]{0.45\hsize}
\includegraphics[keepaspectratio, width=150mm]{kankoCMS.png}
\caption{テストページの表示結果}
%\end{minipage}
%\end{tabular}
\end{figure}



%=================================%
%章区切り
%=================================%



\chapter{システムの検証}


本章では本研究で開発したシステムが PC の使用経験や Web ページの作成経験に関わりなく使用できるという有効性を調査するため検証実験を行った。
以下にその概要と実験結果，さらにそこから考察した結果についてまとめ，実験の方法や被験者に行ったアンケート，実験に使用したサンプルデータについてもまとめる。
後半では現段階での本システムの特徴をまとめ，それに付随してきた問題点についてまとめる。


\section{実験の概要}
本実験は PC の使用経験や Web ページの作成経験に関わりなく，一定の時間以内に入力操作が完了することを検証するものである。今回はサンプルデータを使用した入力操作であるという観点を考慮し，15分以内で入力操作が完了することができることを調査する。
本実験では本システムを実験に参加した被験者5名に使用してもらい，その後，被験者へアンケート調査を行った。
この5名は本システムを使用したことの無い10代から50代で，操作するデバイスは被験者が所持するそれぞれの PC で行った。
入力操作を始める前に\ref{setsumei}に示す手順書を一読してもらい，その後練習などを行わない状態で入力操作を始めてもらい手順書に示す工程2～4にかかった時間を計測した。
入力操作では筆者が用意したサンプルデータ(入力個所と内容を示したテキストファイルとアップロードを行う4つの画像データ)を操作する PC に保存した状態から，実験用データ入力の手順書に従い，テキストの入力・画像のアップロード/URLの入力してもらう。
アンケート調査では，被験者の PC 使用頻度，Web ページ作成の経験などの被験者のスキルに関する項目と，本システムの使用感に関する項目について調査を行った。手順書とアンケートの内容は後述する。



\section{実験結果}
\label{exp}
本システムの入力実験では被験者5名全員が入力作業を完了することができた。入力にかかった時間は最も速い人で5分40秒，最も遅い人で13分4秒となり，平均入力時間は9分2秒，分散は32217.2秒となった。
本実験の結果から PC の使用経験や Web ページの作成経験に関わりなく，一定の時間以内に入力操作が完了するかどうかを検証するため仮説検定を行った。帰無仮説を「本実験のサンプルデータ入力操作は15分以内に完了しない」と仮説を立て，対立仮説を「本実験のサンプルデータ入力操作は15分以内に完了する」とした。有意水準は0.05に設定する。
入力操作が15分以内に終わるかどうかの確立を常に\begin{math}
\frac{1}{2}
\end{math}とした場合，p値は 0.03125 となり有意水準0.05より小さいため帰無仮説が棄却され，本実験のサンプルデータ入力操作は15分以内に完了すると言える結果となった。
被験者に行ったアンケートの結果は以下の表に示す。


\begin{table}
 \caption{アンケート結果}
 \label{tab:S:standard}
 \centering
 {\tiny
 \begin{tabular}{llllllll}
  \hline
   年齢 & 職業 & 入力時間 & PC使用頻度 & PC使用内容 & Webページ作成経験 & CMS使用経験 & 実験の難易度\\
  \hline \hline
  51 & SE & 6:17 & 毎日 & 業務(コーディングなど)             & ページ作成の仕事を行ったことがある & 使用したことがない & 簡単\\
     &    &      &      & 業務(資料作成・メールチェックなど)\\
  \hline
  17 & 学生 & 13:04 & 毎日 & 学校関係 & 作成したことがない & 使用したことがない & 理解できなかった\\
     &      &       &      & 調べもの\\
  \hline
  21 & 学生 & 12:00 & 毎日 & 業務(コーディングなど) & 学校や外部の教室で作成したことがある & 使用したことがない & 簡単\\
     &      &       &      & 業務(資料作成・メールチェックなど) & その他活動で作成したことがある\\
     &      &       &      & 趣味(動画・音楽鑑賞など)\\
     &      &       &      & 学校関係\\
     &      &       &      & 調べもの\\
  \hline
  22 & 接客 & 8:09 & 毎日 & 趣味(ゲーム・クリエイティブ活動) & 作成したことがない & 使用したことがない & 簡単\\
  \hline
  21 & 学生 & 5:40 & 毎日 & 趣味(ゲーム・クリエイティブ活動) & 学校や外部の教室で作成したことがある & WordPress & 簡単\\
     &      &       &      & 趣味(動画・音楽鑑賞など)\\
     &      &       &      & 学校関係\\
     &      &       &      & 調べもの\\
  \hline
 \end{tabular}
 }
\end{table}


\section{現在の状況}
複数人によって入力されたデータを取得し，ページにスポット紹介の要素が追加され，ポップアップによる各スポットの内容を表示する Web ページを作成するシステムを開発することができた。

\subsection{ページ内容の変更}
本システムでは，指定した Google スプレッドシートに記載されている情報を，JavaScript と Google Apps Script の処理によってデータを取得した。その受け取ったデータを追加したHTMLの要素を，プログラムにより Web ページに新たなスポット紹介要素として追加することができた。

一方でこのプログラム処理開始からデータ取得までに，2~3秒ほどの体感できる遅延が発生した。
この遅延によってページ閲覧者の使用満足度が低減してしまうことが考えられる。
特にスポット紹介するポップアップ表示の内容変更時に顕著に見られた。閲覧するスポット情報を変更するたびに，表示内容が変更される仕様になっているため，何度も遅延が発生してしまう現状となっている。

\subsection{Web ページ内容の編集}
Web ページの内容の編集に Google スプレッドシートを使用し，ネットワークに接続する環境を整えれば，場所を選ばず多人数で同時に編集作業を行うことのできるシステムが開発できた。画像の保存には Google ドライブを使用し，画像の管理もクラウドで行うことができる。
また\ref{exp}で行った実験では，被験者全員が入力作業を完了することができたことから，本システムを使用したことがない人でも，編集作業に参加することができる可能性が高いことが期待できる結果となった。

今回の入力実験では，入力するサンプルデータを用意したため問題は起こらなかったが，実際に使用することを想定した場合，紹介文の長さが不規則になり，ページ全体のバランスが崩れてしまうことや，画像のデータサイズが大きいことで読み込みに時間がかかるなどの問題が想定される。

\subsection{システムの安定性}
本システムでは，Web ページを表示・変化させるプログラム処理とコンテンツの内容を記録している部分が独立しているため，導入後は安定した運用が期待できる。しかし，本研究の執筆中に Google ドライブでの画像共有URLの記述パターンが変更され，新しい画像が本システムで取得できない事態が発生した。
こういった使用サービスの仕様変更に伴った本システムのエラーが今後も発生することが想定される。


\newpage
\section{手順書・アンケート}
\label{setsumei}


\begin{figure}[htbp]
\centering
\includegraphics[keepaspectratio, width=130mm]{questionnaire.pdf}
\caption{アンケート}
\end{figure}



\begin{figure}[htbp]
\centering
\includegraphics[keepaspectratio, page=1, width=160mm]{manual.pdf}
\caption{手順書 p.1}
\end{figure}

\begin{figure}[htbp]
\centering
\includegraphics[keepaspectratio, page=2, width=160mm]{manual.pdf}
\caption{手順書 p.2}
\end{figure}

\begin{figure}[htbp]
\centering
\includegraphics[keepaspectratio, page=3, width=160mm]{manual.pdf}
\caption{手順書 p.3}
\end{figure}

\begin{figure}[htbp]
\centering
\includegraphics[keepaspectratio, page=4, width=160mm]{manual.pdf}
\caption{手順書 p.4}
\end{figure}

\begin{figure}[htbp]
\centering
\includegraphics[keepaspectratio, page=5, width=160mm]{manual.pdf}
\caption{手順書 p.5}
\end{figure}

\begin{figure}[htbp]
\centering
\includegraphics[keepaspectratio, page=6, width=160mm]{manual.pdf}
\caption{手順書 p.6}
\end{figure}



%=================================%
%章区切り
%=================================%



\chapter{結論}

\section{考察}
Web ページのコンテンツ内容の管理をクラウド型のサービスを使用したことにより，場所や環境を選ばずコンテンツの管理が行えるようになった。
また\ref{exp}での実験から，Web ページの作成経験が無く，本システムの使用経験が無い人でも，15分ほどでコンテンツの編集が可能であることが分かった。
これらの結果から本システムは，地域住民などの今まで Web ページ作成に参加していなかった人が自宅などの個々の環境から編集作業に参加することで，今まで発信されていなかった情報を使用したコンテンツ作成を可能とし，観光地域づくりに必要とされている「地域の魅力を積極的に発信する」という課題の一つの解決策として考察した「地域住民参加による Web ページ作成」を達成するに値すると言える。
これにより現在の観光案内ページなど既存の情報では知りえなかった情報を発信するコンテンツ作成を可能とし，観光地域づくりに役立つ一つの方法として提案する。



\section{今後の展望}
今回は観光地の紹介に特化したデザインの Web ページを作成するシステムを開発したが，現在固定されているタイトルやデザインの変更も行うことができるシステムに変更することで，多人数の同時編集 Web ページ作成システムとして他分野での活用も期待できる。そのため，コンテンツ内容の編集だけではなく，ページ全体の要素の変更も同様に行えるシステムの開発を目指す。
また，現在は Web ページを閲覧する際，コンテンツ内容の読み込みに時間がかかったり，閲覧するデバイスによってデザインが崩れてしまったりなどの問題も発生している。これらの閲覧時の満足度に関する項目を修正することにより，発信者から閲覧者への情報提供を円滑に行えるシステムを目指す。



%=================================%
%章区切り
%=================================%



\chapter *{謝辞} %章を付けずにタイトル表示
\addcontentsline { toc }{ chapter }{謝辞} %章立てせずに目次に追加するおまじない

本研究の遂行にあたり，指導教官として終始多大なご指導を賜った，広瀬雄二教授には，本研究の技術指導や論文の執筆にあたり多大なご協力を賜りました。ここに深謝の意を表します。並びに広瀬研究室の皆様には，本研究の遂行にあたり多大なご助言，ご協力頂きました。ここに感謝の意を表します。



\begin{thebibliography}{}
\bibitem{kankotyo} 観光庁．"観光立国ショーケース | 観光地域づくり | 政策について | 観光庁"．観光庁ホームページ．2022-03-31．
\url{https://www.mlit.go.jp/kankocho/shisaku/kankochi/kankouchiiki.html}，(参照 2023-01-09)．

\bibitem{s} 古屋秀樹, 野瀬元子. 観光情報Webサイトの評価に関する基礎的分析．第42回土木計画学研究・ 講演集．2010，(online)
\url{http://library.jsce.or.jp/jsce/open/00039/201011_no42/pdf/63.pdf}, (参照 2022-06-07)．

\bibitem{wordpress}WordPress.com．"WordPress.com: 高速，安全に管理されている WordPress ホスティング"．WordPress.comホームページ．更新日不明
\url{https://wordpress.com/ja/}，(参照 2022-12-11)．


\bibitem{cmsshare} Q-Success．"コンテンツ管理システムの使用統計と市場シェア，2022 年 12 月"．W3Techs．更新日不明．
\url{https://w3techs.com/technologies/overview/content_management}，(参照:2022-12-11)．


\bibitem{wix} Wix.com．"ホームページ作成 | 無料ホームページ制作ツール | Wix.com"．Wix.comホームページ．更新日不明．
\url{https://ja.wix.com/}, (参照 2021-11-01)．


\bibitem{bibcms} 川場隆．書籍型CMSの開発．日本教育工学会論文誌．2008，32 (Suppl)，p.81-84．(online)
\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.199-204．(online)
\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{JavaScript} MDN．"JavaScript|MDN"．MDN Web Docs．2022．
\url{https://developer.mozilla.org/ja/docs/Web/JavaScript}, (参照 2022-12-15)．

\bibitem{sheets} Google．"Google Sheets: オンライン スプレッドシート エディタ | Google Workspace"．Google Sheets ページ．更新日不明．
\url{https://www.google.com/intl/ja_jp/sheets/about/#overview}，(参照 2022-12-16)．

\bibitem{GAS} Google．"Google Apps Script: Google Workspace を自動化、統合、拡張。"．Google Workspace ページ．更新日不明．
\url{https://workspace.google.co.jp/intl/ja/products/apps-script/}，(参照 2022-12-16)．

%\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)

\end{thebibliography}
 
\end{document}