soanema's blogのサイトを作り直しました。

2025.12.27

お知らせ

soanema's blogのOGP画像。中央に「soanema's blog」、その上部にはキャッチコピーである、「テクノロジーと、物語。」、その下部にはURLである「https://blog.soanema.com/」

何回作り直せば気が済むの？

お久しぶりです、そあねまです。今年は多くの資格試験で忙しく、なかなか投稿をすることができなくて申し訳ありません。あと2月にもう一つありますので、それまではのんびりお待ちいただけたらなと思います。

さてさっそく本題ですが、私のブログサイトをリニューアルしたことをお知らせいたします。あと数日で今年も終わりなのにね。

皆さん、きっとこう思ったことでしょう。
「何回作り直せば気が済むん？？？？」と。
そうですよね。最初の「ねまブログ」から数えて３つ目、noteから数えて4つ目です。流石に作り直し過ぎだと私自身も感じています。それでも私が作り直した理由は、一つの記事を書くのにhtmlを一つ一つ書いていてめんどくさかったからです。
何言ってんだよって感じたと思いますが、本当にそうなんです。前回のサイトでは、記事を書く際にhtmlを毎度毎度打っていました。

では、このサイトは何で書いているのか。
なんと、Markdown形式で記事を書いています！！
正直便利すぎますね。なぜ今までこれをやらなかったのかと。いちいち<p></p>で文章を区切る必要がないんですから。

とは言っても、一部使っていたりはします。
そうだとしても、今までよりは明らかに楽ですね。

なぜMarkdownで書いたものがWebサイトになるのか？

その秘密は…
AstroというJavaScriptフレームワークを使っているから！

JavaScriptフレームワークとは？

Webアプリケーション開発を効率化するために用意された「骨組み（枠組み）」のことです。
素のhtmlよりもより効率的にサイト制作・運用を行うことができます。
有名どころで言えば、ReactやVue.jsなどです。

話を戻そう

さて、話をもどします。
じゃあAstroとはなんぞや。ということですよ。

Astroはオールインワンのウェブフレームワークです。 Astroには、ウェブサイトを作成するために必要なすべてが組み込まれています。また、さまざまなインテグレーションやAPIフック (EN)があり、プロジェクトを自分のユースケースやニーズに合わせてカスタマイズできます。

特筆すべき点は以下の通りです。

アイランド: コンテンツ駆動のウェブサイトに最適化されたコンポーネントベースのウェブアーキテクチャです。

自由なUI (EN): React、Preact、Svelte、Vue、Solid、Lit、HTMX、ウェブコンポーネントなどをサポートしています。

サーバーファースト: 重いレンダリング処理をサイト訪問者のデバイスから取り除きます。

デフォルトでゼロJS: サイトの読み込みを遅くするクライアントサイドのJavaScriptを減らします。

コンテンツコレクション (EN): Markdownコンテンツを整理、検証し、TypeScriptの型安全性を提供します。

カスタマイズ可能 (EN): PartytownやMDXなど、100以上のインテグレーションから選択できます。

公式サイトより

余計ややこしくなった気がするなぁ。

まあ要約すると、表示が早く、軽く、いろんなフレームワークを使えて、Markdownが使えるよ。
ということです。

ここで出てきましたね、Markdown。これが私がAstroを選んだ理由です。
Markdownはみなさんが普段Discordで使用しているものとほぼ同じで、#で<h1>の大きさ、##で<h2>という風になっていきます。
正直、Markdownの良さを語り尽くすことはできませんが、まあすごいやつって感じですね。

苦労したところとか

うん。もう全部大変だった。
基本、JavaScriptフレームワークってJavaScriptがわかることが前提になっています。ところが私、JavaScriptをほぼ知りませんでした。今までいくつものサイトを作ってきましたが、基本的にはChatGPTに頼りきりで、自分ではほとんど理解していませんでした。

しかーし。やはり技術の進歩は素晴らしい。
ほぼChatGPTで解決しました。
ちなみに、「私とはなにか。」「これは私が作ったと言えるのか？」などと考えながら作っていました。
まあ、html/css部分は私自身もできるので流石に私がやっています。一部ChatGPT使ってるけど。

特に大変だったのはサーバーをCloudFlare Workersに移行したことです。
「いや、Astroの理解じゃないんかーい」というごもっともなツッコミは置いておいて。
おそらく今年の夏頃にCloudFlareのダッシュボードのUIが代わり、参考サイトはあまり参考にならなくなってしまいました。
いうてもかかった期間は1日くらい。一晩寝たら思いついて普通にできました。だとしても大変だったという記憶では一番色濃いかな。
後日やり方載せるので参考にしていただければ嬉しいです。

RSS対応へ。

Astroに移行したこともあって、RSSに対応しました。
今どきRSSなんて使ってる人いるのかと疑問でしたが、私自身が他者の方のRSSを使用し、とても便利でしたので対応したという裏話があります。ぜひ、RSSリーダーに登録してくれると嬉しいです。一日5000回くらいは確認してくれ。

各種アイコンを変えました。

あそうそう、私のプロフィールにある、自作アイコンをGoogleの Material Symbols and Icons に変更しました。
やっぱりデザインが素晴らしいのでこれにしてよかった。

Twitter（現：X）にてGoogleが各種アイコン素材を無料配布しているという投稿がきっかけで知ることができました。大変感謝。

主な使用画像をwebp形式へ。

16:9のサムネイル画像をwebpという形式に変更しました。

いままではpng形式でしたが、サイトの読み込み向上のために変更しました。
正直体感ではわからないですが、もしかしたら記事が増えたときに感じるようになるのかもしれませんね。

アクセシビリティの改善

本サイトではライトモード、ダークモードに対応しています。
すでにスマートフォンなどには搭載されている機能ですね。
実装自体はそこまで難しくはないものの、ダークモードの色味の調整に頭を悩ませました。なるべく皆様に快適に見ていただけるような色味に調整したつもりではありますが、何かあればフィードバックをいただけると嬉しいです。

また、フォントサイズを調整できるようにしています。
小、中、大の３つからご自由に選択してください。小が12px、中が16px、大が20pxになっています。端末や視力に合わせて選べるようにしています。お好みで調整してね。
12pxでみると目がチカチカして痛いのであまりおすすめはしません。小に関してはフィードバックを受けて調整を行っていきます。