ブログアップデート 2023年6月11日

投稿日 2023-06-11
最終更新日 2023-11-18

ブログをアップデートしたので、それについて書きたいと思います。(こいついつもアプデしてんな)

アップデート内容

ページング機能の追加

今回のアップデートのメインの機能です。
1ページに表示できる上限を10記事とし、画面下にページ遷移できるリンクを実装しました。


ブログの記事が増えてきたため、そろそろ実装する必要があるなと思い実装しました。
ページングは旧来の方法に加えて最近の下までスクロールすると新しいページが表示されるシームレスな方法がありますが、
実装の容易さと個人的な好みを考慮して旧来の方法を採用しました。
実装にあたって、いつもお世話になっているmicroCMSのチュートリアル を参考にしました。
ただ、想像以上に実装に時間がかかりました。
特に時間がかかったのが、ブログ本文ページにある「トップページへ戻る」リンクの挙動の対応です。
現行の仕様だと、URLのルートページ(1ページ目)に遷移してしまうため対応が必要でした。
とりあえず、コンテンツの全てのオブジェクトにページ番号の情報を動的に付与することによって一時的な対応をしました。
この辺りはReduxやRecoilなどで状態管理した方が良いと思いますが、後述のリプレイスの必要性を考えて後回しにします。

Windowsのフォントの修正

Windows版のフォントが微妙であることに気がついたため修正しました。(Macで開発してたので全然気づきませんでした...)
本来は丸文字フォントを使う予定でしたが、いい候補が見つからなかったため、とりあえずメイリオにしました。
ブラウザチェックのためのWindows環境がなかったため、Azure Windows Serverからインスタンスを借りて調べました。なかなか稀有なAzureの使い方だったと自負しています。

その他細かい修正

  • h3タグとh2タグが同じ大きさだったため修正しました。
  • モバイル版のメニューページの一番下のフッターの余白が多すぎたので修正しました。
  • 移行前の記事の投稿日もmicroCMSの内部タグを利用して取得するよう修正しました。(これに伴い、前回のブログの内容も一部修正しました)


所感

このブログもかなりの頻度でアップデートをやっていますが、まだバージョン1.0にすらなっていない状態だと思っています。
具体的なアップデートの候補はこれくらいあります。

  • タグ検索機能
  • 全文検索機能
  • Google Analytics(GA4)の導入
  • Amazon、Udemy等のアフィリエイト広告の導入
  • 問い合わせフォームの設置


また、これ以外にもブログの開発環境のリプレイスが必要だと考えています。
というのもNext App Routerが正式版を迎えて早一ヶ月になるところだからです。
環境の変化に乗り遅れないために触っておく必要があります。
また、Next.jsは重いフレームワークであり、技術ブログはより軽いもので書いた方が良いという考えもあります。
この場合、Astroが候補になってきそうです。
そもそも、このブログはNext.jsの勉強のために始めたため、一部コードがかなり負債化しそうな状態になっています。
そのため、どちらにせよリプレイスは必要そうです。

また、microCMS側でも新リッチエディタが正式版になったため、記事をマイグレーションしなければいけないと思いました。

今回は以上になります。