diff --git a/system/test/index.html b/system/test/index.html
new file mode 100644
index 0000000..afcd769
--- /dev/null
+++ b/system/test/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ イベントページ
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/system/test/script.js b/system/test/script.js
new file mode 100644
index 0000000..8295f91
--- /dev/null
+++ b/system/test/script.js
@@ -0,0 +1,113 @@
+// GASからJSONデータを取得してHTML要素を生成する
+async function fetchAndGenerateData() {
+ const response = await fetch('https://script.google.com/macros/s/AKfycbyeQSlJhKhBvzVIDANf8YJK147WA0Rzh55yhzl0a_73_YYQJnLFm02QGlnx3xE9W_60Bw/exec');
+ const jsonData = await response.json();
+ // HTML内の要素を取得
+ const nameElement = document.getElementById('name');
+ const eventContainer = document.getElementById('eventContainer');
+
+ nameElement.textContent = jsonData[0].areaID;
+
+ const categories = {};
+ // JSONデータをもとに要素を生成
+ for (const data of jsonData) {
+ const category = data.category;
+ if (!categories[category]) {
+ categories[category] = [];
+ }
+ categories[category].push(data);
+ }
+
+ for (const category in categories) {
+ const categoryId = categories[category].length;
+ const categoryContainer = createCategoryContainer(category, categoryId);
+
+ // カテゴリーごとにメニューを追加できるようにした
+ for (const data of categories[category]) {
+ const eventDiv = createEventElement(data);
+ categoryContainer.appendChild(eventDiv);
+ }
+ eventContainer.appendChild(categoryContainer);
+ }
+}
+
+// カテゴリーごとのコンテナを生成
+function createCategoryContainer(category, categoryId) {
+ const categoryContainer = document.createElement('div');
+ categoryContainer.classList.add('categoryContainer');
+
+ const h2 = document.createElement('h2');
+ h2.classList.add('category');
+ h2.textContent = category;
+ h2.id = `category-${categoryId}`;
+ eventContainer.appendChild(h2);
+
+ const navLink = document.createElement('a');
+ navLink.href = `#category-${categoryId}`;
+ navLink.textContent = category;
+ const navItem = document.createElement('li');
+ navItem.appendChild(navLink);
+ document.querySelector('.navbar ul').appendChild(navItem);
+
+ return categoryContainer;
+}
+
+// イベント要素を生成
+function createEventElement(data) {
+ const div = document.createElement('div');
+ div.classList.add('event-item');
+
+ if (data.pageLink) {
+ const a = document.createElement('a');
+ a.href = data.pageLink;
+ a.target = '_blank';
+ div.appendChild(a);
+
+ const img = createImageElement(data.img);
+ a.appendChild(img);
+ } else {
+ const img = createImageElement(data.img);
+ div.appendChild(img);
+ }
+
+ const h3 = createHeadingElement('h3', 'eventName', data.eventName);
+ div.appendChild(h3);
+
+ if (data.location) {
+ const p1 = createParagraphElement('p', 'location', `場所： ${data.location}`);
+ div.appendChild(p1);
+ }
+
+ if (data.date) {
+ const p2 = createParagraphElement('p', 'date', `開催期間： ${data.date}${data.inSession === 'O' ? ' (終了)' : ''}`);
+ div.appendChild(p2);
+ }
+
+ return div;
+}
+
+// 画像要素を生成
+function createImageElement(imgSrc) {
+ const img = document.createElement('img');
+ img.src = imgSrc;
+ return img;
+}
+
+// ヘッディング要素を生成
+function createHeadingElement(tag, className, textContent) {
+ const element = document.createElement(tag);
+ element.classList.add(className);
+ element.textContent = textContent;
+ return element;
+}
+
+// 段落要素を生成
+function createParagraphElement(tag, className, textContent) {
+ const element = document.createElement(tag);
+ element.classList.add(className);
+ element.textContent = textContent;
+ return element;
+}
+
+// ページ読み込み時にJSONデータを取得してHTML要素を生成
+window.addEventListener('DOMContentLoaded', fetchAndGenerateData);
diff --git a/system/test/style.css b/system/test/style.css
new file mode 100644
index 0000000..2cdedcf
--- /dev/null
+++ b/system/test/style.css
@@ -0,0 +1,155 @@
+html{
+ scroll-behavior: smooth;
+ scroll-padding-top: 100px;
+}
+
+body {
+ font-family: 'Noto Sans JP', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f4;
+ width: 100%;
+}
+
+p{
+ margin: 2% 2%;
+ font-size:clamp(0.875rem, 0.818rem + 0.24vw, 1rem);
+}
+
+.navbar {
+ background-color: #02465b;
+ color: #f4f4f4;
+ width: 100%;
+ position: sticky;/* ２行だけの記述でfixedと同じ配置ができる*/
+ top: 0;
+ z-index: 100;
+ box-shadow: 0px 4px 8px #adadad;
+}
+
+.barContainer {
+ width: 80%;
+ margin: auto;
+ padding: 1em 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.navbar h1 {
+ margin: 0;
+ padding: 0;
+ font-size: clamp(1.75rem, 1.693rem + 0.24vw, 1.875rem);
+}
+
+.navbar nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+}
+
+.navbar nav ul li {
+ margin-right: 1em;
+}
+
+.navbar nav ul li a {
+ text-decoration: none;
+ color: #f4f4f4;
+}
+
+.navbar nav ul li a:hover {
+ border-bottom: 2px solid #ccb540;
+}
+
+/* ここまでは共通で記載する */
+.category{
+ border-bottom: 1px solid #acacac;
+ width: 100%;
+}
+.categoryContainer{
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 300px);
+ justify-content: center;
+ grid-gap:1em;
+ /*
+ ウィンドウに合わせて自動で改行(中央揃え左揃え)を再現するにはflexboxでは難しかった。
+ flex-wrap:wrapとjustify-content:centerでは改行した時に真ん中配置から始まっちゃう(>_<)
+ しかし、gridなら4行でいけた。もっと短くできるかも。
+ */
+}
+#eventContainer {
+ width: 98%;
+ margin:0 auto;
+}
+
+.event-item {
+ background-color: #ffffff;
+ border-radius: 10px;
+ box-shadow: 0px 0px 8px #acacac;
+ padding: 0;
+ text-align: center;
+ width: 100%;
+ margin: .5em auto;
+}
+
+.event-item:hover {
+ transform: scale(1.1);
+ transition: transform 0.3s ease;
+}
+
+.event-item img {
+ width: 100%;
+ height: 25vh;
+ object-fit: cover;
+ border-radius: 10px 10px 0 0 ;
+ padding: 0;
+}
+
+.event-item a img:hover{
+ opacity:0.5;
+}
+
+.event-item h3 {
+ font-size: clamp(1rem, 0.943rem + 0.24vw, 1.125rem);
+ margin: 0 1em;
+ border-bottom: 2px solid #acacac;
+ text-align: center;
+}
+
+@media screen and (max-width: 1036px){
+ .navbar{
+ width: 100%;
+ }
+ #eventContainer{
+ width: 95%;
+ margin: 0 auto;
+ }
+ .category{
+ width: 80%;
+ margin: 1em auto;
+ }
+
+ @media screen and (max-width: 820px){
+ .category{
+ text-align: center;
+ }
+ .barContainer {
+ width: 80%;
+ margin: auto;
+ padding: 1em 0;
+ flex-direction: column;
+ }
+
+ @media screen and (max-width: 430px){
+ .categoryContainer{
+ display: block;
+ }
+ .event-item{
+ width: 90%;
+ margin-bottom: 10%;
+ }
+ .barContainer {
+ width: 95%;
+ }
+ }
+}
\ No newline at end of file