% #!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{背景} 背景として イベントの告知やお店の集客にはSNS活用が重要(データ見せる) ↓ チラシpdf、インスタグラム、など手軽に情報発信できるSNSは多いが、閲覧者の層が限られてしまったり、一度発信すると修正するのが難しいという課題がある。情報更新を管理者がいつでも動的に更新できるプラットフォームがあればいいのでは。 ↓ 誰もが管理者になりいつでも情報発信ができるCMSを作成することで手軽で情報の質が高い発信ができる。(Wevページの発信が与える影響力が高いことを主張) ↓ \section{目的} 本システムは表計算アプリを利用し、プログラミング知識がないものでもWebページ \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{メールアドレス登録ページ画面} \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{管理者側の画面} コード、どういった処理をしているのかを記載 \subsection{スプレッドシート画面} 実際に使っているシートを貼る。ID,keyについて記載。 \chapter{実験} \section{実験方法} \section{実験環境} \section{実験結果} \chapter{結論} \section{考察} \section{今後の展望} やらないと決めたこと セキュリティ面、 \begin{thebibliography}{99} \bibitem{} \end{thebibliography} \end{document}