Hugoで黒歴史サイトを作ってもいいじゃない

追記：2020年8月16日

さくらのレンタルサーバの機能でカウンターを実現．

追記：2020年8月15日

以下の点を修正しました．
- 音楽のコントローラの非表示
- bigborderの幅を可変に

本記事の内容

2000年代初頭に見られた一般的な個人サイト（以下 黒歴史サイト）を再現する．
具体的には

• サイトを開くといきなり音楽が鳴る
• 謎のメッセージが出る
• 右クリックさせてくれない
• 文字が無駄に動く
• 文字が無駄に点滅する
• 文字が無駄に虹色
• 画像の縁がでかい
• 何故か現在時刻を教えてくれる
• 何故かUserAgentを開示される

をHugoで簡単に挿入できるshort codes, partials, cssファイルを作成する．

完成例(音楽が流れるので注意)

背景

黒歴史サイトって？

黒歴史サイトとは，主に2000年代初頭に若年層の一部の方々の間で流行したホームページのフォーマットである．

特徴としてはユーザビリティを無視したレイアウト，記事の内容に対し明らかに不釣り合いなセキュリティ（右クリック禁止），本来必要のないはずの情報（現在時刻やUserAgent）の表示が挙げられる．

細かい内容については以下のサイトがとても参考になる．

ダサいホームページ作成マニュアル凝縮版
「こんなホームページはダサいか？」shi-sama編（サンプルサイト有り）

お前たちのサイトって美しくないか?

昨今のホームページは，ツールの成熟もあり非常に綺麗で見やすいものとなっている．
また，SEO対策のために，必然的に造り手側がコンテンツの質を高めようとするため，その内容も極めて有益なものとなっている．

だが，ちょっと待ってほしい．お前たちのサイトって美しすぎないか?

あの頃のサイトはどこへ消えたのか

2000年代初頭，まだSEO対策やら何やらがなかった時代．
インターネットはとても混沌としていた．サイトの製作者のエゴを全面に押し出した見にくいサイトがひしめき合っていた．
しかし，時がたつにつれ，そのようなサイトは一つまた一つと検索エンジンの最下層に埋もれていき目にすることがなくなった．

完全に消えたわけではなく，Google検索の期間指定を使えばまだいくらかのサイトは残っているが，ホームページサービスが次々と終了していく中，いつか完全に黒歴史サイトを見れなくなる日が来るかもしれない（ただし，wayback machineは考慮しないものとする）．

Hugoで黒歴史サイトをつくろう

このまま黒歴史サイトという無形文化遺産がなくなってしまうのは大きな損失である．
そこで，本記事ではHugoで簡単に黒歴史サイトを作れるファイルを作ることで後世に黒歴史サイトという文化を語り継ぐことを目的とする．

成果物

上に挙げた黒歴史サイトの特徴を忠実に再現するものを作った．

short codes

date-time

現在時刻を表示するshort codesである．
内部でJavaScriptを動作させ，日にちと時間を取得している．

只今の時刻は{{< date-time >}}です
↓
只今の時刻は2020年8月15日土曜日0時56分18秒 です

useragents

同じくJavaScriptでUserAgentで取得し，表示している．

あなたが使っているブラウザは{{< useragents >}}ですね？
↓
あなたが使っているブラウザはMozilla/5.0 (X11; CrOS x86_64 13099.102.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.127 Safari/537.36 ですね？

partials

• disable-right-click.html（右クリック禁止）
• onload.html（メッセージ表示）
• play-music.html（音楽の自動再生）

をdark-past-start.htmlで呼び出している．
そのため，index.htmlに

{{ partial "dark-past-start.html" . }}

を追加するだけで良い．
尚，メッセージや音楽ファイルは可変であり，config.tomlで設定可能である．

[params]
  music = "music/hoge.mp3"(mp3のみ static/musuc/に音楽ファイルを配置する)
  onloadMessage = "fugaのホームページへようこそ！"
  rightClickMessage = "右クリック禁止です！"

音楽ファイルは，各OSやブラウザの対応状況を加味した結果，mp3だけで十分と判断した．
他の拡張子を使いたい場合は適宜play-music.htmlを修正してほしい．

css

文字の装飾や画像の縁取りを行うcssシートを作成した．
cssファイルをstatic/css/内に配置し，head.html(かそれに準ずるhtml)で読み込む．

<link rel="stylesheet" href="{{ "css/dark.css" | absURL }}">

ファイル，ディレクトリ名や配置は環境に合わせ適宜修正して頂きたい．

rainbow

<p class="rainbow"> rainbow text </p>

blink

<p class="blink"> blink text </p>

marquee

<div class="marquee">
  <div class="marquee-inner"> move text </div>
</div>

bigborder

<div class="bigborder"> image or text </div>

動作例

配布ページ

Github

終わりに

これらのファイルを使えば，簡単にサイトに黒歴史感を追加する事ができる．
普段小綺麗なサイトばかり作って疲れている皆さんはぜひこれをつかいフラストレーションを発散してほしい．

今後の課題

以下の機能を実装したい．

• あなたは{0以上の任意の整数}人目の◯◯です！済
• マウスカーソルについてくる変なやつ
• 勝手にウィンドウサイズを変更する
• 戻るボタンで戻れない

参考文献

CSSでテキストを彩る装飾サンプル集
虹の7色のRGB値
blink 「ブリンク・点滅」 のCSS生成
CSSアニメーションでmarquee
ダサいページ　サンプル集
HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法
今日の日付と現在時刻