CodeFocusテーマ v1.9.0をリリースしました。このバージョンでは、大画面での目次表示を大幅に改善し、パフォーマンスとメモリ管理も最適化しています。
サマリー
v1.9.0では、Zennのような大画面での常時表示目次機能を追加しました。横幅1540px以上の画面では、記事と目次が並んで表示され、長い技術記事でも全体構造を把握しながら読み進められます。
また、スクロールイベントの最適化によりCPU使用率を約83%削減し、メモリリーク対策により長時間の閲覧でも安定して動作するようになりました。
主な改善点:
- ワイドスクリーン(1540px以上)で目次を常時表示
- 複数記事ページでの目次自動切り替え
- スクロールイベントのスロットリングによるパフォーマンス改善
- イベントデリゲーションによるメモリリーク対策
- 長い目次での現在位置の自動スクロール表示
1540px以上のワイドスクリーンでの目次表示例:
アップデート方法
テーマストアから最新版のCodeFocusテーマは、自動的に更新されます。特別な操作は不要です。 目次ボタン機能を使っている場合は、以下のJavaScriptカスタマイズの更新手順を必ず実行してください。
JavaScriptカスタマイズの更新（重要）
目次ボタン機能を使用している場合は、JavaScriptの更新が必要です。使用していない場合は、この手順をスキップしてください。
- customize-toc-button.htmlの最新版をコピー
- はてなブログの「デザイン」→「カスタマイズ」→「ヘッダ」→「ブログタイトル下」の既存のコードと置き換え
- 変更を保存
注意: JavaScriptを更新しないと、新機能が正しく動作しません。必ず最新版に更新してください。
新機能の詳細
1. ワイドスクリーンでのサイドバイサイド表示
横幅1540px以上の大画面では、目次が画面右側に常時表示されるようになりました。
この機能は、大きなモニターやワイドディスプレイで技術記事を読む際に特に便利です。 記事と目次を同時に確認できるため、長い記事でも全体構造を把握しながら読めるようになります。
なお、解像度の低いスクリーンでは従来通り目次ボタン表示です。
2. 複数記事ページでの目次自動判別
トップページやアーカイブページなど、複数の記事が1ページに表示される場合、スクロール位置に応じて目次が自動的に切り替わります。 以前はページ内の一番上にある記事の目次が表示されていました。 これにより、どの記事を読んでいるかに応じて目次が変わるため、より直感的に目次を利用できます。
3. パフォーマンスの大幅改善
スクロールイベントの処理を最適化しました。 これにより、CPU使用率が削減され長い記事をスクロールしてもブラウザの動作が重くなりません。
4. メモリリーク対策
イベントリスナーの管理方法を見直し、長時間の閲覧でもメモリ使用量が増え続ける問題を解決しました。 これにより、長時間の閲覧でも安定した動作が期待できます。
5. 長い目次での自動スクロール
目次が長い場合でも、現在のセクションが常に見える位置に自動でスクロールされるようになりました。 以前は、目次が長い場合、目次をスクロールしないと現在のセクションが表示できませんでした。
カスタマイズに関するご質問やアイデアの共有は、GitHub Issuesにてお待ちしております。
