はじめに

ブログのユーザー体験を向上させるため、以下の10機能を実装しました。

機能	説明
読み進め位置保存	次回訪問時に続きから読める
フローティングシェア	モバイルでワンタップシェア
コードコピーボタン	コードブロックにコピー機能
キーボードショートカット	Cmd+K で検索にジャンプ
トースト通知	操作フィードバック表示
読書プログレスバー	記事の読み進め度を可視化
目次スクロールスパイ	現在読んでいるセクションをハイライト
印刷用スタイル	記事の印刷最適化
ダークモード対応	CSS変数によるテーマ切り替え
閲覧数トラッキング	Astro DBによるカウント

---

1. 読み進め位置の保存

記事を途中まで読んで離脱した場合、次回訪問時に「続きから読みますか？」と提案する機能です。

// ReadingPositionSave.astro (一部抜粋)
const slug = window.location.pathname.split(/).filter(Boolean).pop();
const storageKey = `reading-position-${slug}`;

// スクロール位置を保存
window.addEventListener('scroll, () => {
 const percent = (scrollTop / docHeight) * 100;
 localStorage.setItem('storageKey, String(percent));
});

ポイント:

• localStorage で位置を永続化
• 24時間以内 & 10%以上読んでいた場合のみ復元を提案
• 5秒後に自動でトーストを閉じる

---

2. フローティングシェアボタン

モバイルでスクロール時に表示されるフローティングボタンです。

対応プラットフォーム:

• X (Twitter)
• LINE
• リンクコピー

---

3. コードコピーボタン

すべての <pre> タグに自動でコピーボタンを追加します。

// CopyCodeButton.astro
document.querySelectorAll(pre).forEach((block) => {
 const button = document.createElement(button);
 button.textContent = Copy;
 button.addEventListener("click, async () => {
 await navigator.clipboard.writeText(block.textContent);
 button.textContent = Copied!;
 });
 block.appendChild(button);
});

---

4. キーボードショートカット

パワーユーザー向けのショートカット機能です。

ショートカット	動作
Cmd/Ctrl + K	検索にフォーカス
Escape	検索からブラー
/	検索にフォーカス

---

5. トースト通知システム

window.showToast() でどこからでも通知を表示できます。

// 使用例
window.showToast({
 message: "コピーしました", type: "success", // success, error, info, warning
 duration: 3000, });

---

まとめ

これらの機能は PostLayout.astro で統合されており、すべての記事ページで自動的に有効になります。

全コンポーネント一覧

• ReadingProgress.astro
• FloatingShare.astro
• CopyCodeButton.astro
• KeyboardShortcuts.astro
• Toast.astro
• ReadingPositionSave.astro
• ViewCounter.astro

開発ロードマップ

Astro DB Docs

Learn how to use Astro DB, a fully-managed SQL database designed exclusively for Astro.

Docs

次回は閲覧数トラッキングの実装について詳しく解説します。