はじめに

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

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. フローティングシェアボタン

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

User

スマホでシェアボタン押しにくいんだよね

Bot

フローティングボタンなら親指で届く位置に常に表示されます！

対応プラットフォーム:

• 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. キーボードショートカット

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

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

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

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

まとめ

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

開発ロードマップ

Astro DB Docs

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

Docs

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