2023-10-13

ブログサイトを構築する

新ブログの構築

概要

新しく今回のブログサイトを構築。

以前作成していて改善したいことを中心に開発を進めた。

技術選定

フロントエンドフレームワーク

Astro

• 書き慣れている。
• 他のフレームワークを利用したいとなった場合でもimportで利用できる。
• 今回の開発要件を全て満たしている。

他の候補対象としてSvelte(Svelte kit)、Hugo。

SvelteはAstroでもimportすることができれば利用できるので必要になったらimportする。

Hugoは触ってみたい。

ローカル環境でのマークアップで記事を管理、公開することができるのでCMSを利用しない点が大きい。

いずれ乗り換えるかも...

スタイリングフレームワーク

Tailwind.css

• 書き慣れている
• 構築がすごく楽
• スピード感を持ってスタイリングをしたい
• デザインドキュメントが豊富

他の候補対象としてPandaCSS。

Tailwindのような記述がしつつより可読性のあるコードが記述可能。

CMS

MicroCMS

• ハンズオンの量の多さ
• レスポンスで返されるJSONにidが自動で割り振られているため目次機能を簡単に構築可能

他の候補対象としてcontentful。

関連記事の作成に関してはcontentfulの方が構築しやすい。

機能要件

前回の反省点として

• ダークモードの表示
• デザインや色の複雑さ

全体的にコードはAstroファイルでの統一、前回と違いNext.jsを利用していないため必要最低限のJavascriptに収めることを意識した。

実際にこのサイトで利用しているJSイベントはコードのクリップボードコピーに留まっている。

システム依存のテーマ

サイトを開くときはダークモードだったらダークテーマがいい。

ただ以前のサイトではデフォルトはホワイトテーマだけになっていて、クリックしてから切り替える方式だった。

そのため、最初からダークテーマとして表示することができるように変更。

また色の変更はできないようにした。

自分だったらダークテーマで表示していたらわざわざホワイトテーマにしたいと思わないため。

色の統一、デザインの改善

一番に心がけたことはシンプルに。

以前のサイトでも4回ほど大幅にデザインを変更していた。

データ自体は気にならないがデザインは利用していれば利用しているだけ気になってしまうため。

そのため今回は基本的にルート部分で設定した色を利用し、必要な部分だけ再度定義するようにしている。

また基本的に黒と白で統一した。

また、remでの統一やコードのクリップボードでのコピーなど、心ばかりのアクセシビティ、ユーザービリティの考慮もしている。

ただ、ここの部分は引き続き改善していく。