サイト全体を更新したのでしばらく掲げておきます

17 min

普段、このサイト全体にかかることは「About」に書いていたが、それが今後は「概要」に移る。このサイトを訪れるリピーターがどれくらいいるのか把握できていないが、要するにサイトの構造を変えました。いままでありがとうございました。これからもよろしくお願いします。はじめましての方は、はじめまして。WordPressというCMS(コンテンツ・マネジメント・システム)からAstroというフレームワーク(?)を利用したページとなります。

なんでこんなことをしたのか、というと、遅い・重いがひとつと、一覧性が悪いなぁというツラ味がひとつ。最後期に利用していた Notegraph というテーマは好きだったが、今回のきかっけとなった構成変更のリサーチ中に現在利用している Retypeset というテーマが凄くしっくり来たというか、なんならそのインパクトだけで構成変更に舵を切ったまである。

TerminalもVS Codeもようわからんまま使い、Geminiに相談しながら、登録したまま放っておいたGithubも稼働させるし、年末に障害で話題になっていたCloudflareにも足を踏み込むことになった。CMSでコンテンツ管理できないデメリットもすでに感じつつあるが、Web技術のもうちょっとだけ深いところでどういう挙動がなされているのかを、少しでもわかりやすいこの環境に親しんでいくのも悪くなさそうなので、楽しみである。

既知の問題点としては、タグが汚すぎて使いづらいなというのと、癒やしとなっていた いいね 機能を外してしまったので、過去のいいねを捨てる結果になったが申し訳ない、などかな。

いわゆるTOPページに400を超える記事がズラーッとサラサラと流れていくの、やっぱり壮観だわ。

追記:2026-02-07

とか言っていたら、いろいろと調整の必要が生じたので、今日までの過程を以下のような日記として残しておく。

ITエンジニアではないので、具体的なイシューを並べたり、その解決を詳らかに書いたりするよりは、ザクッとした触感をサラッと読める内容にしたほうが、もし素人でやろうとしている人が読んでくれた場合には、そのほうが伝わるかなと日記という体でまとめた。かけた時間だけでいえば、実質、5時間くらいかな、下手しても10時間は作業していない。

1日目:変えようと思い立つ

キッカケは既に忘れたが、寝る前にちょっとだけ触ってみるかと、Geminiに相談しながらローカルでの環境構築を目指す。手前のLinux(Manjaro)にNODE.JSのインストールはできている(と思っていた?)ので、Astroのプロジェクトを作成(インストール? これも1行ぽっち)し、開発開始のコードを叩く。この時点でlocalhostのアドレスが返ってくれば終わりだが、すぐにそうはならなかった。

結果的に言うと、Astro環境とNODE.JSが上手く噛み合っていなかったらしく、作成したAstroのディレクトリ下でNODE.JSのインストールを再度(?)実行したら上手くいき、Webブラウザーでアドレスを開くと”Astro”と表示された。

先の失敗のある時点で、インストール済みのVS Codeが自動的に起動しており、作成したAstroの当該ディレクトリが表示され、内部のフォルダーとファイルが一覧されている。大した手間とも言いがたいが、ようやく上手くいったので、試しにindex.astroだののHTML部分を弄ると、Webブラウザー側で更新する必要もなく、瞬時に表示が切り替わる。これには驚く。

HMR(Hot Module Replacement) という機能だそうだ。

2日目:なんか形になったぞい

追記:前日までは、素のAstro開発の基本キットをセットアップしたのだったが、使いたいのがRetypesetだったので、Githubに公開されているリポジトリをダウンロードし直した。これは順調にいった。

i18nという機能によって多言語でのパブリッシュが容易なのもAstroの強みだそうだ。翻訳も自動的に行われると思われる(仕組みを理解していない)。しかし、コンテンツのジャンルや性質に依るだろうが、自分は自動翻訳に文責は持てないので機能をオフにすることにした。テーマの設定画面でメイン言語(locatedだっけ)をjaにして、ほか言語のリストをブランクにするのだが、言語切り替えツールが画面から消えない。色々やったがキャッシュなりの問題だったようで、これも生成AIに相談しながらだが、大したこともなく解決する。

基本的な設定(タイトルや基本情報の手軽なところ)を終えると、体裁はもう整ったようなものなので、WordPressから記事をエクスポートする。総量は4.4MB程度で、微々たるものだがフロッピーディスクに収まらないくらいはあるので、大したもんだということにしておく。これまた、NODE.JSのNPXだのという機能で、WordPressの記事(XMLファイル)を自動的に個別のmdファイルに切り分けて出力してくれる。便利過ぎる。

切り出したファイルひとつを試しにひとつ放り込み、フロントマター部分の体裁をちょっと弄って記事がローカル環境のページに表示されることを確認する。ほんなら残りも入れるかと分割して当該ディレクトリに放り込んでいく。たまに掲載していた画像ありページがルール違反によるエラーで引っかかる。このへんは幾つか修正したが、まだあるかもしれない。

WordPressで気まぐれに付けてきたタグや、自分の決めたルールに違反していたURLの表記などを直す。AIエージェントに頼ればもう少し楽だったろうけど、ここは置換操作と自分の手でほとんど作業した。で、ほかに集中的に取り組むこともなくなった(気がした)ので、Cloudflare Pagesに登録・接続し、Webに公開する。ほんならとドメイン(aruhito.net)も此方に移す。失敗したらヤバい操作とはいうが、ほぼ何もせずに終わる。時代は変わったのかな、手軽すぎる。

3日目:Chromeで重たいやんけ

記事を更新してみたり、メタデータをちょっと弄ってみたりして満足していた。この時点で、WordPressで使っていたサーバーの契約も更新を止めた。そうなのだが、就寝前にChromeでページを確認してみると激烈に重い。常用に耐えない。普段使っているFirefoxだと軽いので気にしていなかった。ありがちなミスである。

直近で弄ったメタデータが悪さをしているのか、それ以外か、さっぱりわからず困ってしまって、Githubさんの機能(タイムマシン?)を使って更新を戻したが、反応は悪いままで、埒が明かないから一旦諦めるかとなった矢先、TOPページのコンテンツ量が原因と気づく。

そもそもバックグラウンドで起きていることと言えば、各HTMLページの情報を記事の数だけ並べて持ってくる作業が生じているわけだけど、生成AIに尋ねる限りでは、要素が増えるだけ、Firefoxのエンジンはそれをそれらしくすばやく処理するのは得意らしいが、Chromeのエンジンだと処理にえらい時間がかかる仕様になっているんだと。

応急処置的に過去2年分のみの表示として動作が軽くなったことも確認し、とりあえず原因と対処法が知れたのでよかった。が、要するにタグ以外から古い記事を辿れないのだ。というところで、よくある記事の件数ごとにページネーションで処理する仕組みに変えようかな。ここ部分だけならそこまで複雑でもなさそう、ということで終わった。

4日目:TOPページの構造を変える

Astro公式とされているのか AstroPaper というテーマがあり、これもシンプルで素晴らしいデザインになっている。要するにこのテーマのページネーションの構造を、現行で利用中のRetypeset に部分的に使わせてもらおうと思い至った。

で、やるべきことは何となくはわかるが、やはりスラスラと書けるわけではないので、Geminiに尋ねながらコードをコピー&ペースト、たまに手で直すということをやっていくと、スルンとできていく。恐ろしい。TOPページに30件、そこからアーカイブページに飛べるようになった。アーカイブページも当然のこと、別途ファイルを作成し、全ぺージを取得したら指定分に切り分けていく、そんなコードを組み込むことですんなりと動いた。

しかし、今回のちょっとしたトラブルは、Cloudflareにデプロイする段に生じた。追加したコードの変数がローカルホストだと適当に処理してくれて稼働するが、こちとらそうはいかないと判定されたわけだ。これも自分で問題を特定できたわけではなく(エラーコードで原因箇所は特定できたが)、確認しながら指示に従って直すと次第に解消した。

という感じで、基幹部分については、まだいくつか未解決事項はあるような気がするけれど、やれることは大方やった気がする。あとは、コメントをつけようかな、というくらいかな、目立つところの方針としては。

5日目:いったんまとめる。

Retypesetは文字組みやレイアウトにこだわった美しいテーマだが、構造上、TOPページにすべての記事を年ベースで区切ってリストアップする仕組みになっている。で、それを理解した上で、タグやリンクなどを駆使してコンテンツを構造化できればいいのだろうけれど、ま、幾ら工夫しても早晩に破綻しそうだなとしか思えない。年1回か年2回ペースなら10年スパンでもいけそうだけど。そこまで頻繁でなくても、それなりのペースで更新したら記事が溜まって直ぐに今回のような事態になりそう(私の知らない抜け道がなければ)。

というわけで今回は、TOPページの仕組みを変更するほうが解決しやすいと見込み、Astro Pager の仕組みを借りてきた。作業は、それぞれのindex.astroファイルを生成AI(Gemini)に提供してアドバイス、もとい当該コードをもらって、切り貼りした。なんとかなった。

ま、明日には別の問題が顕在化するかもしれないが、なんとかやっていきたい。

6日目:CMSから単のファイル管理へ

WordPress(CMS)を使わなくなったのは、現状ではいい方に働いている。なんとなく管理画面を開くことが無くなった点と、推敲に使う時間が(減ったというより)圧縮された。

ひとつ目。管理ツール類がWordPressの管理画面にあるからなのだが、ほかの作業中でもなんとなく管理画面を開いてしまう、眺めてしまうことが多かった。同じことと言えば、いまはファイルの入っているディレクトリを眺める行為があたるわけだけど、画面遷移とか余計な情報とかが無い分、結果的には諸々の負荷が小さい。

ふたつ目。ほぼ同じことだが、プレビューを経てリライトしたり、読みかえしたりするために消費する時間が減った。じっくり直していないのであわやという文章がそのまま残っている確率は上がったような気はするが、そんなのは実際のところで大した問題ではない。

また生の文章は現状ではObsidianで書き始め、書き終えたら所定のディレクトリに別途MDファイルにしている。この作業自体も簡略化できそうだが、いまはこのステップは区切りとして(儀式として)必要なものとしている。実際、Obsiidian側では個人用に複数のタグをつけるが、こちらではノイズとなるタグも生じる。そんな感じで差別化している。