なんか読み物を置きたい
電卓にコラムがついてるの、意味わからないですね。電卓は計算さえできればいいはずです。
読み物があったほうが検索エンジンの掲載に有利だったり、広告事業者のサイト審査で有利、みたいなのを聞きかじったのでやってみることにしました。
高機能なエディタは置けない
元々サイトの目的は電卓のPWAアプリなので、静的ウェブサイトで十分ということでCloudflare Pagesを使っています。そうなると、WordPressみたいなのを使うことはできません。なので、開発用PCでMarkdownを書き、HTMLに自動変換してCloudflare Pagesに置くことにしました。このMarkdown原稿変換システムもGrok Buildで作りました。静的ウェブサイト限定という制約の中では使いやすいものができたんじゃないかと思います。
変換方法は、最初は「Markdownファイルをそのまま置き、ユーザーのブラウザでJavaScriptによる変換をする」という形式だったのですが、問題があったので変えました。
最初の案…クライアントサイド変換
まず思いついたのは、Markdownファイルをそのまま置いて、ブラウザ側のJavaScriptが変換して表示する方式でした。
執筆者(私)は、YYYY-MM-DD.md を作るだけで済むつもりでした。
しかし、Cloudflare Pagesはサーバサイドの処理ができないので、目次を出すためには記事リストのファイルも別途更新しないといけませんでした。
それでも、Markdownを書いてリストを更新するだけなので、手軽ではありました。
JavaScriptで本文HTMLを生成する問題点
ところが、この方式には大きな問題がありました。
HTML本体には何も書かれていないため、検索エンジンのクローラーが記事の内容を読めないみたいでした。SEO的に微妙であることに、あとで気がつきました。
それに気付いたときには、すでにこの方式のJavaScriptを作ったあとだったので、作ったものが無駄になってしまいました。
改善案…普通のHTMLファイルを普通に置く
仕方がないので、普通にHTMLファイルを置くことにしました。
ただ、Markdownで書くという部分は変えたくなかったので、原稿はMarkdownで書いて、開発用PCのPythonでHTMLに変換する方式にしました。
これなら、「サーバサイドでは何も処理できない」という制約と、「クライアントサイドでの処理は極力させたくない」という要件の両方を満たせます。
副次的な利点として、記事リストの作成もPythonがついでにやってくれるようにしたので、リストの手動更新が不要になりました。
クライアントサイド方式と比べても、「リストを手動で更新する」のが「Pythonを実行する」になっただけで、むしろ楽になったと思います。