このサイトの技術について

このサイトの仕組みを簡単に紹介します。

Astroで構築

このサイトは静的なAstroプロジェクトです。すべてのページは ビルド時にあらかじめHTMLとして生成されるので、サーバーを立てる必要がありません。 表示も速く、置き場所を選ばずに安く運用できます。

記事はただのファイル

記事は一つひとつがMarkdownファイルです。新しく書くときはファイルを追加してタイトルと 日付を入れるだけ。一覧ページやリンクは自動で生成されます。データベースは要らず、 管理画面もありません。

標準でバイリンガル

このサイトは日本語と英語の両方で書いています。英語はルート、日本語は/ja以下にあり、 ブラウザの言語設定で、どちらを最初に開くかが決まります。ヘッダーからいつでも切り替えられ、 選んだ言語は記憶されます。

ダークモード

ライトとダークの2つのテーマがあります。ヘッダーのトグルで切り替えられ、何も触らなければ 最初はOSの設定どおりに表示されます。切り替えはページが描画される前に反映されるので、 読み込み時に色がちらつくこともありません。

背景のクローラー

背景をしばらく眺めていると、細い線がゆっくりと枝分かれしながら画面に広がっていくのに 気づくと思います。これは「クローラー」と呼んでいる小さなキャンバスのアニメーションです。 いくつかの点から始まり、1フレームごとに各線が少しずつ角度を変えて新しい線を伸ばし、 根のように外へと広がって、端に届くと止まります。読みやすさを邪魔しないよう、淡く 半透明の色で背景に描いています。

これからも少しずつ手を入れていきます。似た系統の話として、 Raspberry Pi 2で動かしている株スクリーナーについても 書いています。