この記事は2021年HUITアドベントカレンダーのために作成しました。
技術的な要素は少なめで、技術と関連しつつ、みなさんがあまり経験していなさそうなことを記事にしてみました。

はじめまして

Hexagon(Hexan0)という名前でプログラミングしています¹。よろしくお願いします。
高校時代から高校のプログラミング研究会としてHUITと関わっていましたが、今回改めてB1としてHUITに入会しました。
せっかくの機会なので高校時代にやってきたことを書こう！²ということで、今回は学校祭サイトを公式許可してもらうために、奔走した話を記事にします。

経緯、モチベーション

去年まで通っていた高校に入ったきっかけの一つとして学校祭があります。そんな学校祭で気になっていたのが、案内パンフレットでした。
歩きなれない校内、普段とは違う配置で案内パンフは手放せないけど、ポケットに入るサイズでもない、カバンにしまうと取り出すのが面倒。

もう少し楽になったらなあと思ったのが中3の夏、その解決策を思いついたのが高2の春。

スマホで見れるようにすればいいじゃん！
しかも学校祭はほかの高校と日程が被りやすかったり、遠くから受験しに来る人も多い高校だったこともあり、行きたいけどいけないことがあって、雰囲気だけでも知れたら中学生的にもでかい！

と勢いで学校祭パンフの電子化を計画。

さらに「製作経験はAndroidのみ」+「iOSのアプリはリリースにお金や承認が必要」+「iOSユーザーの方が多い」などの理由からWebサイト化することに。

壁にぶつかる

と、勢いで計画を進めたものの様々な壁にぶつかります。

まずWebサイトなどHTMLしか³いじったことがない！
全員がPCを持っているわけでもない！
もし完成しても校内図を載せる関係で学校側に消されたら悲しい！
せっかく作ったらなら大々的に宣伝しないと中学生まで届かない！

ということでこれらを「高校生レベルという技術の壁」と「公立高校を相手に許可を取るお役所的な壁」の2つの「壁」に分けて、行った対策をまとめていきます。

技術的な壁

学校祭サイトともなると多くの人の目に晒されることになります。
それを考えるとデザイン面は手を抜けないです。
しかし、当時の私は、js、cssを知らずにhtmlも初心者で、ある程度のデザインすらままならず、そもそも形をもって完成するのかすら怪しい状態でした。

そこでWebサイト製作サイトを使いました。

これなら学校にあるPCでも、簡単にある程度のデザインのサイトを作ることができる！というわけです⁴。

しかし誰でもサイトを作れるようなデザインである反面、HTMLやスクリプトを直接編集することはできず、校内図と教室を押すと説明がポップアップするといった機能すら実装するのが困難でした。

これは<iframe>という別のページを埋め込む機能を活用してgithubのページを埋め込み、解決しました⁵。

また、自動保存のために、保存機能が存在せず、学校側の長時間接続維持を防止するフィルタリング(？)の影響で変更がアップロードされず、進捗が消えまくるという悲劇も起こりました。

お役所的な壁

学校祭サイトを完成させていざ公開！みんな見て！ってなったときに学校側からストップかけられたら元も子もないと思った⁶ので、先に許可を取ってしまって公式学校祭サイトにしてしまおう！と考えました。
しかしここはただの公立高校。情報科があるわけでもなく、情報関連のことが分かる先生は少ないです。
正直サイトを作ることよりもこっちの許可の方が断然大変でした。

まず相談したのが生徒会。
紙パンフレットを作っていたのは生徒会だったからです。

「毎年作ってる紙パンフレットの電子版作るねー」「いいよー」の2つ返事で終わることだと思ってました。
しかしそう簡単にはいかずまさかの禁止。
許可できない、どころかそういうのは作るなと言われてしまったのです⁷。

その判断をしたのは生徒会担当の先生。
後日アポをとって先生を説得しに行くわけですが、ダメの一点張りで、「そもそもなんであなたがそんなもの作るの？」とか「そこまで作らなくていいんじゃない？」いう話に。
そりゃそうなんですよ。当時私は生徒会メンバーでもなく、活動場所すらよく知られていない無名な研究会の次期会長だったからです⁸⁹。

そこでまず研究会の一員かつ生徒会のメンバーでもあった友人に協力を要請してもう一度説得に行きます。

丁寧に説明したつもりだったんですが、何がしたいのかよく分からんとのことで、「俺は許可を出さん」と断言されてしまいました。

しかたないのでその上司にあたる生徒部長先生¹⁰に相談。
その先生は比較的革新的なことや生徒主体の活動を好んでいた人だったので、数回のミーティングを経て協力していただけることに。

学校の公式許可はその先生でも出せなかったので、副校長先生につないでもらい、職員室で副校長に直談判。
（高校でこんな経験をすることになるとは）

生徒部長先生がある程度お膳立てしてくれていたのか、この話し合いはすんなり進み、副校長の許可をもって学校祭公式サイトに！

許可は下りたものの

そんなこんなで定期考査をはさみつつ話し合いを進め、無理言ってやっとこさ許可をいただけたわけですが、この時点でなんと学校祭2週間前。
クラスの催し物の準備や研究会の発表内容も考えなければならない中、無限開発編が始まります。
せっかく許可を頂いたのに完成させないわけにはいかないので、生徒会が学校にいる限りは学校に残り、夜遅くまで開発しました。

先輩の協力も大きく、学校祭前夜祭の日に完成、公開。
しかもWebページ作成サイトで作ったことで付いていた広告を生徒会費で消してもらえることになりました！

高校の現状ってこんな感じ

ということで様々な壁を乗り越え、学校祭サイトを無事公開することができました。
高校で学校公認Webサイトを作ろうとするとこんな苦労が待っています(笑)
結果的に公開まですることができたので、だいぶ理解のある¹¹先生・学校と言えるのかなとも思いますが、実は壮大なオチがあります。

完成したサイトへのQRコードを紙パンフレットにはさんでもらう形で話を進めていたのですが、直前でQRコードがはじかれ、こちらへの知らせなく、QRコード無しの状態で紙パンフレットが配布されてしまったのです。

一応URLは書かれていたものの、誰が手打ちすんねん！っていう話で。

しかし、学校祭3日目には検索で2番目にヒットするように。
結果的に2万アクセスしてもらい、たくさんの人に利用していただきました！嬉しい！

後日QRコードがはじかれた理由を聞きに行くと、「多数の人にQRコードを読み込ませるものを配布するのは危険」と思われているらしく、研究会メンバーで深いため息をつくことになりました。

QRコードにウイルスでも仕込んだと思われてるのかもわかりませんが、高校の現状ってこんな感じなのです。

ここまで書いてきた内容は、あまりたくさんの人がした経験ではないと思うので、今回記事の題材にしてみました！
少しでもへぇ～と思ったり、何かを考えるきっかけになったりしたら嬉しいです！
ここまで読んでくださりありがとうございました！¹²

Twitter(@hexan0) もはや注釈の悪用 ↩
夏休み明けにハッカソン、「テクのこ」に参加し、先輩の技術力に感動したわけですが、そんな方々と並べて技術的な記事を書いてもあまりおもしろくないかなということもあり ↩
ようはHTMLに付属するjsやcssを作ったことがなくこんな感じのモノクロページしか経験なし ↩
実際にはお役所的壁がでかすぎて開発などしてる場合ではなくなったというのが大きいです。 ↩
<div>と<iframe>だけ使えたんだったかな…？(うろ覚え) ↩
学校祭のパンフレットというのは学校内の地図に出店やアトラクションの名前、内容が乗っけられるのがメインなので、①学校内の地図が誰でも見られる状態になることと②出店やアトラクションのアイコンを無断使用することになってしまうことの2点の懸念材料に加え、事前に相談していた周囲の大人たちに学校側に許可とりなよ、と言われたため ↩
この時点で非公式で作るという退路がふさがれる(ぴえん) ↩
そもそもその先生はこの研究会の存在を知らなかった ↩
作りたいから作るんじゃダメなんですか？！と言いかけた ↩
当時。現在は違う先生になってたはず(一応補足しておく) ↩
だいぶ無理を言って進めていただきました… ↩
多すぎる注釈にお付き合いくださった方もありがとうございます！ ↩

学校祭の案内サイトを高校公式にするために職員室に乗り込んだ話【高校の情報技術に対する対応の現状】