はじめに

まだやり残しが多いのですが、とりあえずこの筆者サイトを再構築したので公開しました。WordPress をヘッドレスCMSとして使い、サイト自体は Next.js を使って実装しています。とても快適に表示できるのが良いなと、自画自賛しています。この記事は公開のお知らせが趣旨ですが、システム構成や苦労したところなどを雑多に書いてます。

筆者が Next.js を使い始めたのは 2023年12月上旬位です。まずは公式のチュートリアルをやって概要を理解しました。Next.js を開発している Vercel サイトは、テンプレートを公開しているのでベースとして利用させてもらいました。テンプレートを利用することで、公開までの時間をかなり短縮できたと思います。

サイトのシステム構成

構想としては、次の図のようにしたいと考えていました。

無料枠で使用している GCE に全て乗せてしまおうと。公開する https のポート番号は 443 ですが、「Next.js」アプリと「WordPress」両方で同じポート番号は使えません。当然ですね。それで、WordPress側を 8443 などに変更して何とかしようとしました。しかし、他にも色々解決しなければならない問題が多くありました。早く新しいバージョンのサイトで公開したかったので、次の図のような構成で公開しています。

Vercel のプランには「Hobby」という無料プランがあるので、それを利用しています。商用として使用する場合は「Pro」というのが標準なのだと思います。こちらは月額 20$ です。

GCE に全て乗せるチャレンジは、今後の課題にしようと思います。ちなみに、GCE 用に新しいドメインを取得しています。GCE では、最初から「xx.xx.xx.xx.bc.googleusercontent.com」のようなドメインが付いているので、このドメインで TLS 証明書を発行しようとしました。しかし、このドメインは、Let’s Encrypt でTLS証明書を発行することは出来ません。また、フリードメイン(.tkなど）は現在では取得できないようです。スパムに悪用されたり、訴えられたり？しているようですが、筆者は詳しくは調べていません。今回も Xserver さんからドメインを購入しました。1円（初年度）でした。

ys-notebook.com ドメインは、Xserver から 1円で購入したのですが、実際に 1円のクレジット決済を済ませました。クレジットカードで 1円の買い物をしたのはこれが初めてでした。今回で2回目ですね。

WordPress のデータ取得について

利用したテンプレートでは、WordPress からの投稿記事などを「GraphQL」で取得します。筆者は初めての利用だったので苦戦しました。「GraphQL」を良く知らない読者もいると思うので本家のサイトを紹介しておきます。

API のクエリ言語

GraphQL は API 用のクエリ言語であり、既存のデータを使用してこれらのクエリを実行するためのランタイムです。GraphQL は、API 内のデータの完全でわかりやすい説明を提供し、クライアントに必要なものだけを要求する権限を与え、時間の経過とともに API を進化させることを容易にし、強力な開発者ツールを有効にします。

https://graphql.org/　より引用（日本語に翻訳しています）

オーソドックスに MariaDB からデータ取得しても良いのですが、利用したテンプレートに従って GraphQL を使用しています。

WordPress に「WPGraphQL」プラグインをインストールすることで GraphQL を利用できます。インストールすると、ダッシュボードに GraphQL メニューが追加され、IDE が使えるようになります。

例えば、投稿記事のタイトルと最終更新日を取得する場合は次のようになります。

「Query Composer」でデータをチェックすると自動的にクエリーが作成されます。画面上真ん中あたりの▶をクリックするとクエリが実行され、右側に実行結果が表示されます。筆者は、コーディングをする際にここでクエリを実行してみて期待通りに動作するか確認していました。

メタディスクリプションについて

筆者は Next.js や Typescript については初心者だったので、実装していると大小様々な壁にぶち当たりました。ネットで調べれば大抵のことは分かりますから、大いに調べながら実装しました。

その内で結構悩ましかったのが「メタディスクリプション」をどう設定するかという問題でした。筆者が WordPress で使用している Cocoon は、SEO 対策が充実しています。記事編集画面の下の方で「メタディスクリプション」を設定することができます。しかし、このメタディスクリプションは Cocoon が実装しているもので、データは DB に保存されています。拡張した機能のため、GraphQL から取得できないのです。一時は、DB から取得しようかと思い少し実装したのですが、データ取得を複数の方式で行うのは複雑さが増すので避けたいと思いました。

思案していると、WordPress が元々持っている機能に「抜粋」というのがあるので、これを利用しようと思いつきました。「メタディスクリプション」の内容を抜粋に設定するのです。抜粋ならば、GraphQL から取得できます。

抜粋の説明には「抜粋が空の場合、WordPress は投稿の最初の 55 単語を使用して抜粋を自動的に作成します。」とあります。「メタディスクリプション」は、検索エンジンの表示でも使われています。記事の内容をより適切に表示させたいならば、自動作成でなく自分で抜粋を記述した方が良いでしょう。

筆者の実装した Next.js アプリは、記事一覧では抜粋を表示しています。また、各記事の「メタディスクリプション」には抜粋を設定しています。この方法でスッキリ解決しました。

PageSpeed Insights の結果

PC では全項目で 100点となりました。携帯では、パフォーマンスが 98点でした。一応貼っておきます。

【おまけ】本記事のアイキャッチ

（今回のアイキャッチも例によって記事内容とは何の関係もありません）

新型コロナで自由に旅行が出来なくなる前までは、毎冬1回はスキー旅行に出かけていました。大体、菅平のスキー場で滑ってました。かつて、菅平スキー場から車で 20分位の高原のところに1軒宿のホテルがあり、毎年お世話になっていました。ホテルの温泉露天風呂、特に雪見しながらの湯浴みは最高でした。コロナで宿泊客が途絶え、廃業してしまったのが残念です。

ホテルの横で、アイキャッチの写真のように水を出して氷の山？を作っていました。真冬の夜の気温はかなり下がりますが（マイナス15度とか）年によって、氷の山がよく成長したり、成長がよくなかったりはありました。アイキャッチの写真は、立派に成長した見事な氷の山を筆者が撮影したものです。