Mark Stratmann
ABout Background

このサイトについて

なぜこのサイトを作ったのか

なぜこのサイトは存在するのか？

新しい技術を学ぶうえで昔からある問題は、インターネット上やAIから得られるドキュメントや例の多くがあまりに些末で、技術そのものや自分の実装が現実の複雑な負荷に耐えられるのかどうか、まったく見当がつかないことです。例としては、無数のToDoリストのサンプルが挙げられます。

私はいくつかの技術的前提に基づいたSASSプロジェクトを計画しており、本番のプロジェクトを組み立て始める前にそれらを検証する必要があります。こうした個人プロフィールサイトを、完全なCMSバックエンドで駆動させるのは、本番相当のビルドアウトに値する程度には十分複雑で、かつ組み立てに長時間かからない程度には十分シンプルです。さらに、すべてがうまくいけば、パフォーマンスの良いプロフィールサイトが手に入り、より技術的な実験のための良いテストベッドにもなります。

デプロイ先としてのCloudflare

Cloudflare Workers https://workers.cloudflare.com/ は、一見すると複雑なアプリケーションをデプロイするための非常に安価な方法に見えます。バックエンド開発はシンプルで堅牢そうですし、OpenNext https://opennext.js.org/ パッケージは、Next.js https://nextjs.org/ でフロントエンドを効率的に開発し、Cloudflareへデプロイする手段を提供しているように見えます。

このサイトが人間のトラフィックを多く集めるとは思いません。しかし、可能な限り多くのウェブ検索とAIクローラーのトラフィックをここに誘導してみるつもりです。そうすれば、Cloudflareのプラットフォーム上で「賑わっている」サイトを運用する実際のコストを把握できるはずです。

必要以上にこのサイトを複雑にする

コンテンツ管理バックエンド（CMS）

正直なところ、現状のこのサイトはコーディングエージェントを使えば数時間で寄せ集めて作れます。しかし、真面目なシステムであれば、基本的なコンテンツを変更するためにデプロイが必要であるべきではありません。そこでこのサイトでは、Payload CMS（https://payloadcms.com/）をベースにしたフルCMSを使用し、別のCloudflare Workerとしてデプロイしています。

Payload自体はSQLデータベースを使用します。これはさらに、CloudFlare D1のSQLiteデータベースインスタンス https://developers.cloudflare.com/d1/ としてデプロイする必要があり、開発ライフサイクルを支えるためにデータベースマイグレーションで適切に管理しなければなりません。

自動翻訳

このサイトは20言語をサポートしています。ウェブサイト自体はCMSコンテンツのためのシンプルな足場にすぎないため、i18n側は開発中にコーディングエージェント（Co-pilot と Claude Opus 4.5）で対応しています。

となると、現在および将来のすべてのCMSコンテンツは、英語コンテンツに変更が入るたびに自動的に翻訳される必要があります。

キューとCronベースのWorker

翻訳要件は、次のことを行う、そこそこ複雑なプロセスを必要とします：

  • Cronタイマーでトリガーされる。
  • 新しい翻訳が必要なコンテンツを特定する。
  • 翻訳を確実に実行する。
  • 失敗から確実に復旧する。

そのため、翻訳作業を追跡するために別のCloudFlare D1インスタンスを使用し、Cloudflare queues（https://developers.cloudflare.com/queues/）を、cronベースのプロデューサー／コンシューマーパターンと組み合わせて、タスクの管理とスケールに用いています。翻訳にはOpenAIのgpt-5.2 APIを呼び出し、AI.SDK https://ai-sdk.dev/ がそれらをすべてつなぎ込みます。

このサイトにとっては過剰ですが、どんな規模であれ本番システムには、バックグラウンド処理をオーケストレーションするための堅牢なパターンが必要です。

このサイトの以前のバージョン

新しい技術を学ぶためのツールとして、このサイトはすでに2回作っています：

2013 - RubyとAWSの学習

  • Ruby on Rails v4.0.0.
  • Bootstrap styling v3.
  • UIにCoffeeScript。
  • Backbone Marionette VMCフロントエンドパターン。
  • AWSホストにデプロイ。

2017 - Reactの学習

  • UIにReact v16.0.0。
  • 非同期処理にReduxとThunk。
  • スタイリングにSemantic UI。

次は何をするか

このサイトはSEOのための連携が適切に行われており、クローラートラフィックを促すには定期的に新しいコンテンツを追加する必要があります。使用しているさまざまな技術やソリューションについて、より詳細な記事を投稿していくつもりです。