Zenn
8️⃣

WordPress製の歴史サイトをJamStackにリニューアルした話

2024/08/13に公開
Next.js
React
microCMS
Jamstack
tech

改修したサイト

『はちのへヒストリア』

「八戸クリニック街かどミュージアム」という私設ミュージアムが制作した、八戸地域の多種多様な文化財・歴史文化資源を紹介するwebサイトです。

僕はこのサイトの存在をもともと知っていたのですが、エンジニアが多忙で新規ページを追加できないという相談をいただきました。僕はReactのエンジニアなので、ツギハギで新規ページを作ることはできるが、全く新規レイアウトのページは作れないということで、JamStackにリニューアルしようという運びになりました。

WordPress時代の設計

先述の通り、僕はReactが専門のフロントエンドEngなので、事細かくは説明できかねます。

  • 管理画面
    • サイトで表示するデータを登録している
    • データが保持するタグなどの属性をカスタマイズする（PHP側と合わせる）
  • サーバーのPHP
    • HTMLを生成するPHPとスタイル
    • ブロック(Reactでいうコンポーネントのようなものらしい)
    • データが持つ属性からの分岐処理など(WordPress側と合わせる)

初めてコードを見た時は、全く意味がわかりませんでしたが、chatGPTとも問答して、何となく理解し、新規セクションと、新規ページを既存コードを引用して作成しました。
しかし、Reactと全く設計思想が違うため、とても大変でした。なんでこんなに定義分散してるんだよ！と深夜まで格闘しました。

JamStackへのリニューアル

データ整形

まず、WordPressからデータを取得することを始めました。RestApiを設定し、getしたデータをcvsとして保存しました。しかしWordPressが保持する余計な項目が多く含まれていたため、それらを削除し、JSONの形式に整形しました。

技術選定

フレームワーク:Next.js14系 pages router
スタイル:TailWindCSS
CMS:microCMS
で実装することにしました。
今回は静的サイトが目的のため、App routerでは機能過多と判断し、pagesとしました。
CMSは、運用者が日本語がいいということで、国内製CMSから選定することとしました。microCMSは、本業でもよく触っており親和性が高かったこと、無料でデータをimportできることなどから、これを選定しました。

ページ構造

  • Top
    • 年表
    • 文化財
    • マップ
    • 文化譚

TOP

TOPのFV背景画像がフェードアウト・インする部分は、Swiperをカスタマイズして、Topの画像の切り替えを行なっています。next/imageのaspectやw/hに苦労しました。

年表ページ

日本史と、八戸地域の歴史を年表にまとめたページです。
スタイルも、コンポーネント設計も、データ設計も、パフォーマンスも苦慮したページです。

同じデザインのコンポーネントを、八戸のデータかどうかで左右に分けたり、年号の有無でスペースを置くかなど分岐が多くなりました。
時代、小時代、年表内容の別々のオブジェクトを、時代ごとに整形し、map生成しています。

苦慮した点

最初のリリースでは、ページ読み込み時にすべての時代を生成していたため、heightが20000pxほどになり、画像読み込みが激重で、パフォーマンスが最悪の状態でした。
そこで、react-virtuosoというライブラリを使い、仮想スクロールにしました。これによって、ページ来訪時生成されるのは旧石器時代、縄文時代だけとなり、パフォーマンスが劇的に改善されました。

文化財ページ


八戸市の文化財を検索できるページです。
このページはURLパラメータで絞り込みの状態を復元することが求められました。
https://historia8.org/cultural-property/?s=&search_age_str=&search_grouping_str=国宝&search_cultural_type_str=&search_holding_facility_str=
「国宝」に絞って検索すると、検索コンポーネントは5つのパラメータを付与します。そして、ページ側ではuseRouterを使いパラメータを取得し、useEffectで絞り込みの状態を更新しています。
これまで、直接useStateを更新して絞り込むことはやってきましたが、パラメータを用いての絞り込みは初の試みでしたので、とても勉強になりました。

苦慮した点

僕が本業でアクセシビリティガチ勢の会社でサイトを作っているため、検索コンポーネントのキー操作はマストでした。プライド的に。

セレクトボックスをuseRefで監視します。フォーカスでセレクトボックスを開き、フォーカスが外れたらセレクトメニューが閉じるようにしてあります。

マップ


Google maps api のPolygonを用いて、地区のパスを描画しています。このパスはWordPressの時代に作られていたので、TSXで描画しました。
ピンは、Markerのアイコンをカスタマイズし、onClickイベントでidを元にModalを表示しています。

苦慮した点


絞り込みや検索ができるサイドバーの設定です。
PCとSPで全くレイアウトが違う点、機能が多い点で時間を費やしました。
時短のためにパラメータ付与機能は削除し、クリックイベントでコンポーネント間のidなどを受け渡し、centerを移動したり、Modalを出現させたりしています。WP時代に既に動いていない挙動があったのでそれも復活させました。（想像して）

文化譚(ぶんかたん)


非常にシンプルなページです。苦慮したということはないですが、swiperのa11yを気をつけました。論文や、データのページでは、WP時代はModalでアイテムを表示していました。しかしそれではURLで共有できないため、kページとして生成することとしました。したがって、/column/配下ページのアイテムは共有性を高めるため、ページとしています。

リニューアル後新規追加したページ

もともとリニューアルの目的は、新規ページをカスタマイズ性高く作りたかったからです。PHPに疎いため、私の技術ではWPで高度なページを作ることはできませんでした。

ヨッテミッテ - イベントページ


八戸市内の施設や、店舗が主催するイベントのページを今週から7週間に分けて表示しています。イベントや、店舗情報はmicroCMSに登録しています。店舗からのイベント情報は、最初はGoogle Formで取ろうと思っていたのですが、Googleアカウントが必要ということで、Hubspot Formを作り、イベント情報と画像をアップロードできるスキーマを作りました。HubspotからmicroCMSへは手動で登録する必要があるのですが。
絞り込み機能や、ソートもパラメータを付与し、useEffectで復元しているので、リロードしても状態が保持されます。

ヨッテミッテ - パートナー一覧


イベントページと同じCMSのAPIスキーマを利用していて、こっちは店舗情報にフォーカスしています。
マップに掲載している店舗施設と重複する部分が多いため、map側のAPIスキーマも利用して画像を表示したりしています。

LINEでの運用

新規ページを作成した目的は、公式LINEを通して、毎週八戸市のイベント情報をまとめて届けることでした。
運用担当者がmicroCMSに登録し、ヨッテミッテのページを利用しLINEで毎週金曜日に配信しています。

八戸市にお住まいの方は、ぜひヨッテミッテを登録してみてください。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
https://lin.ee/wcy6x6F

終わりに

今回のリニューアルで、技術的に大きく成長できました。最初お話をいただた時は、自分にできるか自信がありませんでしたが、chatGPTも駆使し、なんとか完遂することができました。確定申告期と被ったのが、個人的にも本業的にも繁忙期で超絶多忙でした。特に、パラメータ付与検索ロジック、仮想スクロール、Google Maps APIの部分が初めてのことばかりで、学びになりました。
今後もはちのへヒストリアのパフォーマンス、A11y、運用の最適化をしていきたいと考えています。

Discussion