した
こいつは暖かみのある手打ちHTMLで作られており、AIはおろか補完といった冷たいテクノロジ〜を利用していない。なんか勘で書いて勘で動いている。
スケルトンにしたい
1990〜2000年代、あらゆるモノがスケルトンになっていたマジで謎の時代。
自分はそういう時代にガキ時代を過ごしたので、今もスケルトンが大好きである。
てかなんで今の製品はそんなにスケルトンにしなくなったのだろう。最近はリバイバル的にスケルトンなものも増えてる気がするけど。
そういうわけで自分のサイトもスケルトンにしよう、という話に、異動した最初のオンライン飲み会でなってしまい、酔ったまま適当にHTMLとJSをいじっていたら完成した。 自分自身のHTMLが透けて見える、というのが面白いと思う。あまりこういうサイトは見たことがない。
スケルトンにする
こういう感じの三層構造で実現する。トップレイヤーはこれまで通りのコンテンツを表示するが、背景はない。中間レイヤーは画面いっぱいに固定し、透明度や色、ブラー効果を与える。最下層にはこのページのHTMLそのものを表示する。
HTMLをレンダリングするのはおなじみのhighlight.jsを利用した。
そしてHTML末尾に以下のようなコードを差し込んだ。
document.addEventListener('DOMContentLoaded', () => { const html = document.body.innerHTML; const bg = document.body.querySelector('#background'); bg.textContent = html; hljs.highlightAll(); });
するとスケルトン仕様のページが作れた。
