研究班番号【 １１０ 】

高津ライフをもっと豊かに！〜情報まとめサイトと校内マップの作成〜
情報班：河村圭多 坂田遼大郎 菅原実来Abstract
In our study,we made ”Compile Website” that compiled information about Kozu high school and”School Map” about Kozu high school to improve Kozu high school students’ school life.
As a result, we have problems but we think that we could attain the purpose “To support student’sof Kozu”.Also,if we could solve the problem, we would support them more.

要約
本研究では高津高校での生活をよりよくするために、高津高校に関する情報をまとめた 「まとめサイト」と高津高校の「校内マップ」を作成した。結果として課題は残ったものの、目的である「高津生のサポート」は少なからずとも達成できたのではないかと思う。今回の課題を解消していければ、さらに高津生をサポートすることができるのではないかと考えた。

１．はじめに
本研究では高津高校での生活をよりよくするために、高津高校に関する情報をまとめた 「まとめサイト」と高津高校の「校内マップ」を作成することにした。
「まとめサイト」は、先輩の体験談を掲載することで勉強法を共有することができたりな ど、高津生徒が困っていることを知られるものを作成、「校内マップ」は、例えば「LL教室」などの分かりづらい教室へ移動する際に、わかりやすいマップを高津生徒限定で見られるようにすることで、迷わずスムーズにたどり着けるものを作成したいと考えている。
２．実験方法
まず、4～6月にかけてpaiza learningを用いて、プログラミングの学習を行い、次に、校内マップとお役立ちサイトの二手に別れて、それぞれ主にHTML、JavaScript、CSSを使用し作成した。
≪実験１≫①HTMLでサイトの土台作成②各階層の画像、教室の説明画像を作成③画像を挿入しサイトをCSSにて装飾。
条件を絞れるように、画像を押すごとに別の画像が表示され、範囲が狭くなっていくようにした。
<ul class="gallery"><li><img src="img/genkann.jpg" alt=""></li><li><img src="img/jimushitsu.jpg" alt=""></li><li><img src="img/1to2A.jpg" alt=""></li>・・・❖ ≪実験２≫

河村
工程 ５〜７月 基本的なHTMLの作成（プルダウンなど）
CSS試み
８月 サイトのデザイン性で難航
アンケート実施用のgoogleformの作成
９月 サイトのデザイン
おすすめ動画を掲載する部分がほとんど完成
１月 セキュリティ導入
掲載動画の表示形式を２パターンに分ける

３．結果
≪実験１≫
各階層ごとの教室を見ることができるようにはなった。が、教室名を頼りに画像から探していかなければならず現状では手間がかかり不便である。
各教室の紹介画像が位置とともに表示されるという仕組みは、目的であった「新入生のサポート」という点を満たすことができていると思う。
≪実験２≫
アンケートで得られた情報を元に、動画サイトに上がっている動画をまとめたページを作成した。
「上級生の声」の方はアンケートで得られた有効な回答が少なく、また抽象的と具体的な回答の両方を合わせても似通った物が多く結果的に文量が少なくなった。
基本的なホームページの構造はできているが、WEBに掲載して誰でも閲覧できるようにするためにはサーバーを借りる必要があり、WEBへの掲載は断念した。
セキュリティに関しては、シークレットブラウザを介する必要があるが問題なく動作した。

以下、コードの一例
動画を画像で掲載するコード<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div class="sugaku"></div><p><font size="3">おすすめyoutubeチャンネル</font></p><a href="kono.html" class="btn-flat-border1" id="id2">河野玄斗</a><p><font size="5">範囲:入試問題集</font></p><table border="5" bordercolor="red" class="haikei2"><tr><th rowspan="5">整数</th><td><iframe width=336 height=189
src="https://www.youtube.com/embed/QZMmqpuufcg"
title="YouTube video player"
frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share"allowfullscreen></iframe></td><td><iframe width="336" height="189"src="https://www.youtube.com/embed/ZEuEy0W6fbE"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share"allowfullscreen></iframe></td><td><iframe width="336" height="189"src="https://www.youtube.com/embed/fyk8wYE2TPQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share"allowfullscreen></iframe></td><tr><td><iframe width="336" height="189" src="https://www.youtube.com/embed/qZMqVCM2ZUw"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td><td><iframe width="336" height="189" src="https://www.youtube.com/embed/8v56Ps3xWp4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td><td><iframe width="336" height="189" src="https://www.youtube.com/embed/zmyhBFOEv4k"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td>
</tr>
<tr>
<td><iframe width="336" height="189" src="https://www.youtube.com/embed/Mcx7JBtZJZ4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td><td><iframe width="336" height="189" src="https://www.youtube.com/embed/UNpz6_TI6K0"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td><td><iframe width="336" height="189" src="https://www.youtube.com/embed/fm5y_bogV_s"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td>
</tr>
<tr>
<td><iframe width="336" height="189" src="https://www.youtube.com/embed/SH3q_itHBFY"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td><td><iframe width="336" height="189" src="https://www.youtube.com/embed/MQrHL1T1Ihw"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td><td><iframe width="336" height="189" src="https://www.youtube.com/embed/px5RwXYchrc"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td></tr></table><link rel="stylesheet" href="css/kono.css">

<a href="sugaku.html" class="btn-flat-border" id="id3">Try IT</a><a href="https://www.youtube.com/c/yobinori/playlists" class="btn-flat-border" id="id4">予備校のノリで学ぶ「大学の数学・物理」 （ヨビノリ）</a><link rel="stylesheet" href="css/kono.css">

動画を文字列で掲載するコード<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div class="kagaku"></div><p>おすすめyoutubeチャンネル</p><a href="kagaku.html" class="btn-flat-border1" id="id2">Try IT</a><p><font size="5">範囲:化学基礎</font></p><table border="5" bordercolor="#336699" class="haikei"

cellpading="0"><tr><th rowspan="2">物質の構成</th><td><ahref="https://www.youtube.com/watch?v=GEjtSrSaFjc&list=PLiRy47VSZM60OQfK7InbuYjqw5Hvf89os">純物
質と混合物</a></td><td><ahref="https://www.youtube.com/watch?v=pSU0SxSUkaE&list=PLiRy47VSZM60lnNdBz4xMA4HlzUeOnEqj">化合物と元素</a></td><td><ahref="https://www.youtube.com/watch?v=7BG9XfsTB20&list=PLiRy47VSZM61N_bDpM8ITpcr6UA38MJCj">物質の三態</a></td><td> <ahref="https://www.youtube.com/watch?v=UiEtqsfC70Y&list=PLiRy47VSZM60utWchTPceosRUOaXLOc9D">原子の構造</a></td>
</tr>
<tr>
<td><ahref="https://www.youtube.com/watch?v=s1jIXAkYx8w&list=PLiRy47VSZM63nDitSbySXortkL7O7LGIr">元素の周期表</a></td><td><ahref="https://www.youtube.com/watch?v=w1lZxWBAsiU&list=PLiRy47VSZM60Yrlg0FxpiSx1TCk5u_C9b">イオン</a></td><td><ahref="https://www.youtube.com/watch?v=5nmrMZfdOKI&list=PLiRy47VSZM62-qczAonLyVf1odOMbyCfu">共有結合</a></td><td><ahref="https://www.youtube.com/watch?v=gmJYLuzY9YI&list=PLiRy47VSZM60OWO8VufWz98xJQLROg65m">様々な結合</a></td></tr><tr><th rowspan="2">物質の変化</th><td><ahref="https://www.youtube.com/watch?v=as9iNHOYTvY&list=PLiRy47VSZM621JYHvic4RXi7CCKEHn1Zf">原子量・分子量・式量</a></td><td><ahref="https://www.youtube.com/watch?v=ZOYzaEuCv8k&list=PLiRy47VSZM62Jwi1vwZ8TSN2y9raul3yv">物質量</a></td><td><ahref="https://www.youtube.com/watch?v=skBSeMTfWr8&list=PLiRy47VSZM62zdwNYjt5RJCaXZP1-em0Q">化学反応式</a></td><td><ahref="https://www.youtube.com/watch?v=3VRW94dw6ho&list=PLiRy47VSZM60Z93qLOF1K_9xzMlFcVQz8">酸と塩基</a></td>
</tr>
<tr>
<td><ahref="https://www.youtube.com/watch?v=McJ6JwXsxaY&list=PLiRy47VSZM63lmmB7Uml6CNjE05aQTz-_">中和</a></td><td><ahref="https://www.youtube.com/watch?v=oosc4yH0_-c&list=PLiRy47VSZM62Yq6untDz1YI7UbCL5lZxw">酸化と還元</a></td><td><ahref="https://www.youtube.com/watch?v=EA2LJx-yTW4&list=PLiRy47VSZM60ct51OEV2OP0U0HNwtihxR">金属の酸化還元反応</a></td><td>&nbsp;</td>
</tr>
<tr>
<th>物質の状態と平衡</th><td><ahref="https://www.youtube.com/watch?v=m34YKwPkpMc&list=PLiRy47VSZM60jHMh81lsCt2tMVgBiUH4x">溶液の性質</a></td><td> <ahref="https://www.youtube.com/watch?v=zCk0yGn4C8Y&list=PLiRy47VSZM62KM0r0n-DBxr0lPOw3w47C">固体の構造</a></td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<th>化学反応とエネルギー</th><td><ahref="https://www.youtube.com/watch?v=-Mwc3Q329Jk&list=PLiRy47VSZM63THiQL8szBWJfTOkJDXnn1">化学
反応と熱・光</a></td><td><ahref="https://www.youtube.com/watch?v=zZEy7bW8yKQ&list=PLiRy47VSZM61yJQskcwstxC38IVS158df">電池と電気分解</a></td><td>&nbsp;</td><td>&nbsp;</td></tr></table><p><font size="5">範囲：理数化学</font></p><table border="5" bordercolor="336699" class="haikei2"><tr><th>化学反応の速さと平衡</th><td><ahref="https://www.youtube.com/watch?v=ocUxcFAbo38&list=PLiRy47VSZM60_a9DNoqrc5HDR3FcHcAMF">化学
反応の速さ</a></td><td><ahref="https://www.youtube.com/watch?v=5oX34vLeUb8&list=PLiRy47VSZM63j_8opGSeqce4Zu_ZwI1UZ">化学平衡</a></td><td><ahref="https://www.youtube.com/watch?v=obZyPCsKLzE&list=PLiRy47VSZM62zX0KabBZ6fiuO3rblU4jh">水溶液中の化学平衡</a></td><td>&nbsp;</td>
</tr>
<tr>
<th>無機物質</th><td><ahref="https://www.youtube.com/watch?v=iNublm9WTlc&list=PLiRy47VSZM638L9NKGRtDon1TYFnCZn-Q">非金属元素の単体と化合物</a></td><td><ahref="https://www.youtube.com/watch?v=MdQGUFSM8w4&list=PLiRy47VSZM61MDUw_KvgnD4vS2AZGLDKo">典型
金属元素の単体と化合物</a></td><td><ahref="https://www.youtube.com/watch?v=8AEbXhzl1p8&list=PLiRy47VSZM627_UlzoThUDzqb22Qv50PY">遷移元素の単体と化合物</a></td><td>&nbsp;</td>
</tr>
<tr>
<th rowspan="2">有機化合物</th><td><ahref="https://www.youtube.com/watch?v=cMeaiSDom7Q&list=PLiRy47VSZM62nI4ufm1GRloRlJui0vEZN">有機化合物の特徴と構造</a></td><td><ahref="https://www.youtube.com/watch?v=sIpsHjm-Jso&list=PLiRy47VSZM63I6zHTZvERYVKqqP_MCL4x">炭化水素</a></td><td><ahref="https://www.youtube.com/watch?v=iKNsvOQ4FRY&list=PLiRy47VSZM63xy7H3fF2dHy7fz1PgA964">酸素を含む有機化合物</a></td><td><ahref="https://www.youtube.com/watch?v=Ne8rw0fVBts&list=PLiRy47VSZM62XlvJHKcvWyDWONoe3kAG0">芳香族化合物</a></td>
</tr>
<tr>
<td>&nbsp;</td><td><ahref="https://www.youtube.com/watch?v=J78zXjtlSt0&list=PLiRy47VSZM62RtwZfY6NYycDGJ5Y20oKQ">高分子化合物</a></td><td><ahref="https://www.youtube.com/watch?v=_vao1LZN1ao&list=PLiRy47VSZM61zXS6qbM26JMOU0X7aL1WR">天然高分子化合物</a></td><td><ahref="https://www.youtube.com/watch?v=S93e8zKQ6t8&list=PLiRy47VSZM63aoiCouBFzzeyf7BO4xIIc">合成

高分子化合物</a></td></tr></table></tr></table><a href="https://www.youtube.com/c/toaruotokohaichi/playlists" class="btn-flat-border"
id="id3">とある男が授業をしてみた</a><a href="https://www.youtube.com/c/yobinori/playlists" class="btn-flat-border" id="id4">予備校のノリで学ぶ「大学の数学・物理」 （ヨビノリ）</a><link rel="stylesheet" href="css/kagaku.css"></body></html>

４．考察「校内マップ」では現状でも教室の位置を示しマップとしての役割を果たすことができるが、最終的に作ったバージョンは画像を表示するシンプルなものとなったため、やはり手間がかかるという問題点が残った。当初想定していたスライド形式でのマップ作成の方がより新入生をサポートするうえでわかりやすく、気軽に教室を探すことができるのではないかと考えた。また、知識と時間が足りず搭載できなかった教室の「検索機能」もあるとより役立つのではないかと思う。
「まとめサイト」では、アンケートの回答数が少なかったことと、サイトのデザインや構成の方向性を度々模索していたため、趣旨であるまとめ動画の数が満足に揃えられなかったことが改善点である。
また、セキュリティ作成担当がいたが誤ってホームページ担当がセキュリティを制作してしまい、セキュリティ担当の苦労が水泡に帰してしまったことも反省点である。
だが、こういった類の制作物は少なからず需要があると制作をしながら感じた。
アンケートの項目の「あなたは勉強についてまとめられたサイトが有ればそれを活用しますか」と言う問いに対しての高い肯定率がその証左である。

５．まとめ
今回「校内マップ」と「まとめサイト」を作成して、私たちの生活のために何ができるかを考え、一つのものを作り上げることができたが、その反面たくさんの課題点が未だ残っている。課題点として主に挙げられるのは利用者の目線が足りていない、ということだ。実際の使用アンケートやセキュリティ面など、実際に運用していくことを視野に入れつつ研究を進めていたが、そこまでに至らなかった。今後、実際に使用できるところまでいきたい。

６．参考文献ならびに参考Webページ

HTML&CSSとWebデザインが一冊できちんと身につく本 服部雄樹著
HTML5&CSS3 標準デザイン講座第2版. 草野あけみ著