伝えるウェブ用スニペットの導入

Next.jsを使用している当サイトに「伝えるウェブ」のスニペットを導入してみました。スニペットの導入により、サイト上に「やさしい日本語」ボタンや「ひらがなをつける」ボタンが自動的に表示されるようになります。今回は「ひらがなをつける」ボタンのみ右上に表示をさせており、ボタンを押すことで今見ているページのテキスト（漢字）にふりがなが振られます。

スニペット（JavaScript）はnext/scriptコンポーネントを利用して配置しました。Google Analyticsなどの配置と同等のコードで実現できますのでコードの掲載は省きます。

問題になったのはページ遷移をしてもボタンのクエリストリングに設定されているURLが変わらないことです。Next.jsでビルドした後Amplifyやnpm startでページを閲覧すると、next/linkコンポーネントを利用したリンクは新たにHTMLをロードして表示するのではなく、SPA（シングルページアプリケーション）のような遷移をするためです。（先読みもしているため、非常に高速にページ遷移をします。）

対策を検討したところ、next/routerの「routeChangeComplete」イベントを利用すればよいことが分かりました。ページ遷移が完了した際にイベントが発火するので、ボタンのクエリストリングを書き換えます。コードは以下の通りです。

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const handleRouteChange = (url) => {
      const rubyButton = window.document.querySelector('.tsutaeru-button-ruby');
      const origin = window.location.origin;
      const urlEncoded = encodeURIComponent(origin + url);
      rubyButton.href = rubyButton.href.replace(/uri=.*/, `uri=${urlEncoded}`);
    }

    router.events.on('routeChangeComplete', handleRouteChange);
  });

  return <Component {...pageProps} />;
}

ひらがなをつけるボタンを押すと以下のような表示になります。概ね問題ないようですが、next/imageコンポーネントを利用した画像が表示されないのでまた日を改めて検証したいと思います。