メインコンテンツまでスキップ
hiroaki
Individual Developer
すべての著者を見る

Docusaurusにシェアボタンを実装した記録とトラブルシューティングの備忘録

· 約7分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

シェアボタンを実装する

このサイトの各記事に、SNSで共有するためのシェアボタンを設置しました。この記事では、その実装プロセスと、背景にある技術的な判断などについて記録します。

完成したコンポーネントの特長は、ページのタイトルとURLを自動で取得する点です。これにより、一度設置すれば、記事ごとに特別な設定を追加する必要がなく、メンテナンスの手間がかかりません。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

Docusaurusで多言語対応ニュースリンク集ページを作成

· 約5分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

この記事では、Docusaurusサイト内に、国内外のニュースサイトを一覧できる「ニュースページ」を実装した際の整理をします。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

1. ページの目的と主要機能

個人的な情報収集の起点として、信頼できるニュースソースへ素早くアクセスできるページの構築が目的。すべて静的ページとしてビルドし、高速な表示や利便性、メンテナンス性を重視しました。。

Artifact Registryの古いDockerイメージを自動削除してコスト節約

· 約5分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

Artifact Registryで膨らむストレージ料金への対策

GitHub ActionsなどでCI/CDを組み、Google Cloud Runへデプロイする運用。その実行のたびに、新しいDockerイメージがArtifact Registryにプッシュされていく。これは非常に便利な仕組みである一方、何もしなければ古いイメージは溜まる一方。「気づいたらストレージ料金が想定より高い…」そんな経験はありませんか?

本記事では、この問題を解決するため、Artifact Registryの「クリーンアップポリシー」機能の活用法の紹介。不要になった古いDockerイメージを自動で削除し、ストレージコストを継続的に最適化する手順の、備忘録としての整理します。

本記事は、Google Cloud Consoleの2025年7月時点のUIを元に解説。

ブラウザメモ機能:URL共有とUX改善の実装記録

· 約4分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

ブラウザメモ機能:URL共有とUI/UX改善の実装記録

はじめに

以前に実装した ブラウザメモ 機能(初回実装の記録)について

これまでの使用感や競合サービスの調査の結果、大幅な機能改善を実施。

本記事では、URLによるメモ共有機能の実装と、その過程で行ったUI/UX改善の技術的ポイントを整理します。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

Macのキー長押しで連続入力(キーリピート)を有効にする方法

· 約5分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

Macで快適な文字入力を取り戻す

Macで文章を作成したり、コードを書いたりしている時、aキーを長押ししたらaaaaa...と連続で入力されてほしいのに、以下のようなアクセント記号(例:à)付き文字の選択メニュー(アクセントメニュー)が表示されて困った経験はありませんか?

アクセントメニュー

これはmacOSの「プレスアンドホールド」という便利な機能ですが、特にプログラミングや文章作成でキーを連続入力したい場合には、かえって作業の妨げになることがあります。

Mac関連の他の記事: カスタム壁紙が反映されない問題ストレージ空き容量の確保公衆WiFiの認証画面問題

本記事では、このアクセントメニューを無効化し、従来のキーリピート(連続入力)を有効にする方法を、Macに不慣れの方にも分かりやすく解説します。

本記事は以下の環境で動作確認済みです。

  • Mac: M1, 2020
  • macOS: Sonoma 15.1 (24B83)

Docusaurus多言語サイトでAlgolia検索を言語別に最適化する方法

· 約7分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

Docusaurusで構築した多言語(i18n)サイトへのAlgolia DocSearch導入時、検索結果に複数言語が混在するという課題への直面。日本語での検索時に英語ページがヒットするなど、ユーザー体験を損なう事態が発生しがちです。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

本記事では、この問題を解決し、サイトの表示言語と連動した最適な検索体験を実現するための具体的な設定手順を備忘録として整理します。

2026-07 追記:本手法の重要な訂正

本記事の「contextualSearch がロケールに応じてインデックス名(yoursite_ja / yoursite_en)を組み立てて検索する」という説明は誤りでした。実際の contextualSearchindexName を変更せず、単一インデックスに対しクエリ時に language:<locale> などの facetFilters で絞り込みます。当サイトは単一インデックス構成に統合済みです。訂正後の正しい手順は DocusaurusのAlgolia検索を単一インデックス構成で精度改善する を参照してください。

この記事で実現できること
  • サイト表示言語(日本語/英語)と連動した検索結果の出し分け。
  • URLパス(/ or /en/)に基づく、コンテンツの言語別Algoliaインデックスへの自動振り分け。
  • 日本語と英語、各言語特性に合わせたインデックス設定による検索精度の向上。

DocusaurusのDocs記事に 最終更新日 を表示する簡単な方法

· 約4分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

当サイト(Docusaurus)のドキュメント記事に、情報の鮮度を示す「最終更新日」を表示させる簡単な実装方法の整理します。 Docsフォルダには、Blogフォルダのように、作成日など日付の記載がデフォルトではされないようなので追加することを決定しました。 Gitの履歴に依存せず、CI/CDの設定変更も不要な、Front Matterを利用した方法の採用しました。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

参考資料:

DocusaurusにGoogle Analytics (GA4)を導入する

· 約4分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

Docusaurusで構築した当サイトにGoogle Analytics 4 (GA4) を導入し、アクセス解析を行うための設定手順を備忘録として整理します。

本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

機能:

  • DocusaurusサイトにGoogle Analytics 4 (GA4) を導入。
  • サイト全体のアクセス解析を可能に。

Docusaurusのナビゲーションバーとフッターを国際化(i18n)する手順

· 約4分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

Docusaurusサイトの主要UI、ナビゲーションバーフッターを国際化(i18n)編集した際の備忘録として整理します。

基本的な i18n の導入手順は Docusaurus サイトを多言語対応するための実装手順 を参照してください。

また、本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

1. 目的

Docusaurusのi18n機能は、サイトのテキストを多言語に対応させるための仕組み。今回は、ナビゲーションバーフッター に新しい項目を追加し、それを日本語(デフォルト)から英語へ翻訳するまでの流れを解説します。

Docusaurus サイトを多言語対応 (i18n) するための実装手順

· 約7分
hiroaki
Individual Developer
当サイトがお役に立ちましたら、ご支援の程お願い致します

この記事では、Docusaurus で構築したサイトに多言語対応(i18n)機能を実装し、日本語(デフォルト)と英語のコンテンツを切り替えられるように設定した際の手順を整理します。

公式ドキュメントを参考にしつつ、Docker 環境でのコマンドや、デプロイ前の確実な動作確認方法など、実践で役立つポイントも交えて解説します。

なお、導入後に発生した ルーティング崩壊とデプロイ失敗の解決録 や、ナビゲーションバー・フッターの国際化手順 も併せて参照してください。

また、本記事は執筆当時の記録です。継続的にメンテナンスしている手順は 技術ドキュメント版 を参照してください。

前提環境:

  • サイトジェネレーター: Docusaurus (プロジェクトセットアップ済み)
  • 開発環境: Docker (ローカル環境のコマンドも併記)
  • 目標: 日本語(ja)と英語(en)の2言語に対応させる