一个关于为高中班级比赛创建一个特殊网站的故事

介绍

你好，我是 Laddge。这一次，我为9月28日（星期三）和29日（星期四）在我高中举行的班级比赛创建了一个专门的网站。

↓样品

这篇文章的内容已经非正式地向学校披露过。
向学校询问有关本文的行为请小心.

现在源代码是Github我上传到了，但是我做的很匆忙，一团糟的感觉如果能用就好了，所以在这篇文章中，我不会解释详细的代码，但我会发布一个粗略的代码想法。我希望
如果您有任何问题，请随时在 Twitter 上发表评论或 DM 我。

动机

在我的高中，春季班和秋季班分别在六月和九月举行。
（分别称为“春季班”和“秋季班”。）

这次我将为Akikura制作一个网站。

我属于学生会信息部，在春季俱乐部期间，我使用学生会的设备在 YouTube 上直播了因冠状病毒措施而对观众关闭的室内运动。

但是，班级比赛将举行两天，因此YouTube链接至少会更改一次。

（其实也曾多次因麻烦变过，途中跌倒。）

在这种情况下，很难将链接一一分发到所有学校。

因此，我创建了一个总结 YouTube 链接的网站，并让通过该网站观看 YouTube 成为可能。

这是实际网站的样子：

高校のクラスマッチの特設サイトを作った話

我是在一个晚上做的，所以有点乱。

它仍然工作正常。

在秋仓，我想制作一些东西来开发它，并开发它。

计划

首先，我对这个网站的要求如下：

spring类时继承函数
因为如果现场分发的链接泄露到外面会很糟糕，所以网站本身也应该以某种方式设为私有。
作为一项新功能，您可以显示带有结果的班级比赛锦标赛表
添加编辑功能

设为私有

如果这个网站泄露出去就很糟糕了，所以基本上你应该附上基本认证。

在春季课程中，我使用了基本身份验证。

但是，应用基本身份验证存在一些问题。

无法在 LINE 的内部浏览器中打开

LINE 的内部浏览器不支持基本认证。

LINE可能是通过体育委员会发送链接的主要方式，所以在LINE上打不开是个问题。

在 Harukura 的时候，用户代理是用来检测 LINE 内部浏览器的，只有在 LINE 内部浏览器中打开时，才会重定向到外部浏览器中打开。

但是，这是一种相当强制的方法，并且出于重定向的目的，在使用内部浏览器时未应用基本身份验证。

我不喜欢这种做事方式。

用户名和密码也必须与链接一起发送

当您与他人分享时，您需要向他们发送链接、用户名和密码。

收件人必须点击该站点的链接并输入用户名和密码。

网站的二维码也贴在每个HR上，但也需要阅读后进入。

这难道不让人觉得打开网站很麻烦吗？

（嗯，还有一种方法可以在 URL 中包含用户名和密码，但我不喜欢这样。）

首先，你真的不知道它是否安全了，比如在LINE上用明文发送密码，或者在教室粘贴的二维码下面写密码（不是吗？？）

这次怎么办

所以，这一次，在不应用基本认证的情况下，通过使子域成为一个足够长的随机字符串，只有知道 URL 的人才能打开它，就像谷歌著名的受限站点一样。

高校のクラスマッチの特設サイトを作った話

32 个字符应该足够了。

我使用 uuid 生成站点轻松生成了它。

比赛展示

这次的主要新功能是锦标赛显示。

我稍后会解释，但它是这样的。

高校のクラスマッチの特設サイトを作った話

在不使用图像的情况下，使用 html 和 css 重现所有内容。

比赛结果将由班级比赛总部的体育委员会成员录入。

每场比赛的裁判都会来向总部报告比赛结果，所以到时候我会让他们上场。

编辑功能

春季俱乐部时的网站是通过将YouTube链接写入文本文件并在更改时使用生成脚本生成html来操作的。

编辑是我用ssh连接服务器，用vim编辑的感觉，所以实际上只有我可以编辑。

这一次，如前所述，需要启用运动委员会输入结果，因此需要在浏览器上进行编辑的功能。

执行

我们将实施它。

现在源代码是GitHub上传到了，但是做的很赶，感觉很乱，觉得能用就行了，所以本文就不详细讲解代码了，发个粗略的想法。我希望
如果您有任何问题，请随时在 Twitter 上发表评论或 DM 我。

环境

对于服务器，我使用了 AWS（Amazon Web Service）的 EC2。

它是一个可以运行 Windows 和 Linux 操作系统的虚拟机，有 12 个月的有限但免费层。

对于小型学校站点，免费层资源可能就足够了。

我已经安装并使用了 Ubuntu Server。

高校のクラスマッチの特設サイトを作った話

我选择 Apache 作为服务器软件是因为我想使用 Python 来生成锦标赛表。

sudo apt install apache2

Apache 版本是 2.4.41。

我将省略 Apache 的基本设置。

引入 mod_wsgi 在 Apache 上运行 Python。

sudo apt install libapache2-mod-wsgi-py3

在<IfModule>~</IfModule> 中的/etc/apache2/mods-available/wsgi.conf 末尾添加以下内容。

wsgi.conf

    ...
    # ここから
    <FilesMatch .py$>
        SetHandler wsgi-script
        Options +ExecCGI
    </FilesMatch>
    # ここまで
</IfModule>

保存后重启Apache。

sudo systemctl restart apache2

现在带有 .py 扩展名的文件将被识别为 wsgi 脚本。

另外，这次我想用一个随机字符串子域来构建一个不同于默认服务器根的独立站点，所以我将使用 Apache 的虚拟主机功能。

这允许您为每个主机名设置单独的服务器路由。

（省略了关于虚拟主机的详细说明。）

首先/etc/apache2/sites-available中的文件默认如下，

/etc/apache2/sites-available
├── 000-default.conf
└── default-ssl.conf

将 default-ssl.conf 重命名为 000-default-ssl.conf 以明确优先级。

sudo a2dissite default-ssl
sudo mv /etc/apache2/sites-available/default-ssl.conf /etc/apache2/sites-available/000-default-ssl.conf
sudo a2ensite 000-default-ssl
sudo systemctl restart apache2

接下来，编写类匹配站点的设置。

使用以下内容创建/etc/apache2/sites-available/100-classmatch.conf。

100-classmatch.conf

<VirtualHost *:443>
    ServerName {ランダム文字列}.laddge.net
    DocumentRoot /var/www/classmatch
    SSLEngine on
    SSLCertificateFile  /etc/ssl/certs/ssl-cert-snakeoil.pem  # 注
    SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key  # 注
    SetEnv EDIT_KEY {編集画面用のランダム文字列}
    <Directory /var/www/classmatch>
        <Files ~ ".+">
            deny from all
        </Files>
        <Files ~ "^(index.html|edit.py|.*.css)$">
            allow from all
        </Files>
    </Directory>
</VirtualHost>

ServerName 处的随机字符串应该是用于子域的字符串。

编辑屏幕的随机字符串附加到查询参数，以避免任何人都可以看到编辑屏幕并进行伪认证的状态。

带有注释的部分是从000-default-ssl.conf 复制的。

我被迫在 Cloudflare 中使用 HTTPS，因此它不必是有效的证书。

拒绝和允许受到限制，因此只有必要的文件，如 html 和 css 可见。

写入设置后，激活它。

sudo a2enmod 100-classmatch
sudo systemctl restart apache2

另外，我在 Python 中生成 html 时使用了 Jinja2 作为模板引擎。

sudo pip install jinja2

已实施的锦标赛表

锦标赛表再现了体育委员会使用 html 和 css 制作的内容。

体育委员会创建的比赛如下。

高校のクラスマッチの特設サイトを作った話

我猜它是用Excel制作的，所以如果你仔细观察，你可以逐渐看到垂直和水平的网格。

换句话说，准备一个空的 div 元素，

x, y 坐标
中的文本
上边框
左边框

如果设置，似乎可以重现每个单元格。

如果父元素设置position: relative;，子元素设置position: absolute;，就可以相对确定位置，可以用坐标进行管理。

<div style="potision: relative;">
    <div sttle="height: 1em; width: 12.5%; position: absolute; top: 3em; left: 25%; border-top: 1px solid #000;"></div>
    ...
</div>

图像看起来像上面的那个。

（实际上，我添加了更详细的样式。）

然后相应地创建数据。

例如，每个单元格可以如下表示。

"36_2": {
    "border_top": 1,
    "border_left": 1
}

这意味着第 36 行第 2 列中的单元格将具有上边框和左边框。

我会无休止地写这个。

效率低下，但我想不出别的。

之后，我们还需要输入每个匹配结果时的行为。

但是，很难解释，所以请看实际数据。

有近15000行。

手动输入这个是疯狂的 SATA。

创建主屏幕

高校のクラスマッチの特設サイトを作った話

主屏幕预计会被很多人查看，所以我们静态分发编辑时生成的html。

对于主屏幕，我们准备了一个示例。

请一定触摸。

创建编辑屏幕

如下图所示，游戏结果编辑画面更易于篡改。

高校のクラスマッチの特設サイトを作った話

如果是这样，即使是体育委员会也可以编辑它。

我正在用 JavaScript 对输入值进行数值判断。

我们还为 YouTube Live 上嵌入视频的链接准备了一个类似的编辑屏幕。

高校のクラスマッチの特設サイトを作った話

附加的功能

在开发过程中，添加了各种功能。

反馈功能

由于数据录入的性质，在海量数据中可能存在错误，因此我们创建了一种机制，供浏览网站的人报告错误和问题。

首先，我在 Google 表单中创建了一个表单。
高校のクラスマッチの特設サイトを作った話

并且为了让管理人员可以在表格有回复时立即通知，回复内容由LINE Notify通知。

打开脚本编辑器并适当地编写 GAS。

function onFormSubmitted(e) {
  var content = e.response.getItemResponses()[0].getResponse();
  var url = 'https://notify-api.line.me/api/notify';
  var opt = {
    'method': 'POST',
    'payload': {'message': content},
    'headers': {'Authorization': 'Bearer {LINE Notifyのアクセストークン}'}
  };
  UrlFetchApp.fetch(url, opt);
}

然后设置触发器。
高校のクラスマッチの特設サイトを作った話

我实际上有一些询问。

高校のクラスマッチの特設サイトを作った話

看来这个功能也被体委保存了。

支持深色模式

不知道有没有必要，但我暂时把它对应暗模式。

这就像将 css 划分为浅色主题和深色主题，并使用媒体查询和 JavaScript 进行分发。

我还安装了一个开关，这样你就可以选择你喜欢的那个了。

我将它保存在 SessionStorage 中，以便它在重新加载时仍然存在。

启用以切换锦标赛表中的分数显示。

如果比分总是显示在锦标赛表上，那会很乱，很难看，所以我添加了一个复选框来切换显示/不显示。

结果

当我实际使用它时，它的效果如此之好，以至于我都感到惊讶。

我安装了 Google Analytics 并对其进行了测量，但第一天大约有 775 人看到了它。

我们高中大约有840名学生，所以即使包括老师在内，也意味着有近90%的人观看了。

老实说，我没想到会看到你这样。

此外，认识我的人也告诉我他们的印象，例如它是多么容易看到。

另外，当天缺席的朋友告诉我，很高兴看到班级比赛的进展。

总的来说，这是一个巨大的成功，我很高兴我做到了。

内省

作为一个值得反思的地方，

数据结构复杂，错误多
↑ 难以接管
浪费
好设计

等等。

我希望下一代做更好的事情。

在最后

对不起很久了。

谢谢你读到这里。

由于考试，我暂时无法做到这一点，但我正在考虑在高中毕业后做各种事情。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308628254.html