😎 Daily
[Daily Log] デザイン刷新と機能強化：自分好みのブログへ
昨日の興奮も冷めやらぬまま、今日は一気にブログの 「見た目」 と 「使い勝手」 を向上させるべく、怒涛の開発を行いました。
いくつかのバグやトラブル（特にnpmの権限周り…）に見舞われましたが、最終的には満足のいく仕上がりになりました。
主な実装内容
1. テーマ切り替え機能 (Dark Mode) 🌙
ブログを読む環境は人それぞれ。 next-themes を導入し、ライトモード・ダークモード・システム設定（OS追従）の3パターンを切り替えられるようにしました。
- ヘッダーにトグルボタンを追加: ☀️ / 🌙 / 🖥️ アイコンで現在のモードが一目でわかります。
- ちらつき防止:
suppressHydrationWarningを適切に設定し、リロード時のフラッシュを防止。 - Giscusとの連携: コメント欄もテーマに合わせて色が自動で切り替わるようになりました。
2. デザインのブラッシュアップ ✨
「殺風景」だった画面に彩りと奥行きを加えました。
- Google Fonts (Inter): 読みやすくモダンなフォントへ変更。
- 背景デザイン:
- 非常に微細なドットパターン（opacity: 0.05）を配置。
- 画面四隅を少し暗くするビネット効果（Vignette）を追加し、視線が自然と中央の記事に向くように調整。
- 記事の可読性を損なわないよう、徹底的に「控えめ」にこだわりました。
3. ナビゲーションの改善 🧭
- 記事一覧（トップページ）: カードレイアウトからシンプルなリストレイアウトに変更し、情報の視認性を高めました。
- 戻るボタン: 記事詳細ページからホームへ戻る導線を追加。
- スティッキーヘッダー: スクロールしても常にヘッダーが追従するように。
トラブルシューティング：npm から pnpm へ 📦
開発中、npm install 時に謎の権限エラー（EPERM）が頻発する事態に。 キャッシュクリアや権限修正を試みるも完全には解消せず、思い切って pnpm へ移行しました。
結果、インストール速度が爆速になり、ディスク容量も節約でき、エラーも解消。怪我の功名でした。
セキュリティ対策 🔒
最後に、公開リポジトリとしての安全性を確認しました。
- デバッグ用スクリプト（.mjs）の除外。
- APIキーの環境変数管理の徹底。
- RLS (Row Level Security) に関する懸念の払拭。
- Notion APIはサーバーサイドでのみ実行され、キーはクライアントに露出しない構造であることを再確認しました。
Next Steps
これで「ブログとして恥ずかしくない」レベルまでは到達しました。 次は以下の機能実装を予定しています。
- 検索機能: 過去の記事をサクサク探せるように。
- OGP画像生成: SNSでシェアされた際の見栄えを良くする。
開発はまだまだ続きます！ 🚀