個人開発ブログ「ゆうふの研究室」を作って公開するまで
Next.jsとCloudflare Workersを使って、個人開発の記録を残すブログを制作・公開した過程をまとめます。
ブログを作ろうと思った理由
個人でアプリやゲームを制作していると、開発中に試したことや、問題を解決するまでの過程が少しずつ増えていきます。
しかし、それらを手元のメモやSNSへの投稿だけで管理していると、後から必要になったときに見つけにくくなってしまいます。
そこで、制作したものや開発中に学んだことを、あとから読み返せる形で残すために「ゆうふの研究室」を作りました。
完成した作品だけでなく、制作途中で考えたこと、うまくいかなかったこと、実際に試して分かったことも記録していく予定です。
また、現在制作しているアプリやゲームを一覧にまとめ、それぞれの公式サイトや紹介ページへ案内できる場所にしたいという目的もありました。
使用した技術
「ゆうふの研究室」では、主に次の技術やサービスを使用しています。
* Next.js * TypeScript * Tailwind CSS * MDX * GitHub * Cloudflare Workers
Webサイト全体はNext.jsとTypeScriptで制作し、デザインにはTailwind CSSを使用しています。
ソースコードはGitHubで管理しており、変更を反映するとCloudflare Workersへデプロイできる構成にしました。
できるだけ運用費を抑えながら、記事やプロジェクトを継続的に追加できるサイトを目指しています。
制作したページ
現在は、次のようなページを用意しています。
* トップページ * 記事一覧 * プロジェクト一覧 * プロフィール・研究室について * お問い合わせ * プライバシーポリシー
トップページでは、新着記事と現在制作しているプロジェクトを確認できるようにしました。
プロジェクト一覧では、健康管理アプリ「Reppal」、制作中のゲーム「Flick Battle（仮）」、このブログ「ゆうふの研究室」を紹介しています。
また、サイトの運営者や目的が分かるようにプロフィールを掲載し、連絡手段としてお問い合わせフォームも設置しました。
記事をMDXで管理する仕組み
ブログの記事は、MDXファイルとして管理しています。
記事ごとにタイトル、説明文、公開日、カテゴリー、タグなどを設定し、本文をMarkdown形式で記述します。
作成したMDXファイルの情報は、記事一覧ページとトップページの新着記事欄に表示されます。一覧から記事を選択すると、それぞれの個別ページを開ける仕組みです。
新しい記事を追加するときは、データベースや管理画面を操作するのではなく、MDXファイルを1つ追加します。
個人で運営する小規模なブログであるため、まずは構成をできるだけシンプルにしました。
公開時に苦労したこと
サイトを制作している途中では問題なく表示されていましたが、Cloudflare Workersへ公開すると、いくつかの問題が発生しました。
特に苦労したのは、次の点です。
* 独自ドメインの設定 * 記事一覧にMDXの記事が表示されない * 記事を選択しても個別ページが404になる * Cloudflare環境でMDXファイルを直接読み込めない * Resendの環境変数がWorkerへ反映されない
ローカル環境ではMDXファイルを正常に読み込めていたため、最初は記事の内容やリンクに問題があると考えていました。
しかし、調べていくと、Cloudflare Workersの実行環境では、Node.jsのファイルシステムを使って公開後にMDXファイルを読み込む構成がうまく動作していないことが分かりました。
その結果、記事一覧では記事データが空になり、個別記事も見つからない状態になっていました。
お問い合わせフォームについても、Cloudflareの設定画面には環境変数を登録していましたが、実際に動作しているWorkerからは値を取得できていませんでした。
解決した方法
MDXの記事が表示されない問題は、ビルド時にMDXファイルを読み込み、記事データをJSONへ変換する方法で対応しました。
生成したJSONをアプリケーションに含めることで、公開後のCloudflare Workersからファイルシステムへアクセスしなくても、記事一覧と個別記事を表示できるようになりました。
お問い合わせフォームでは、メール送信サービスとしてResendを使用しています。
ResendのAPIキー、送信元メールアドレス、受信先メールアドレスをCloudflare Workerの環境変数とシークレットとして登録し直すことで、フォームからメールを送信できるようになりました。
今回の制作を通して、ローカル環境で動作していても、公開先の実行環境によって利用できる機能や設定方法が異なることを学びました。
問題の原因を一つずつ確認し、ログを見ながら修正していく作業も、今後の開発に生かせる経験になったと感じています。
今後追加したいもの
「ゆうふの研究室」には、今後さらに次のような内容を追加していく予定です。
* アプリやゲームの開発記録 * プロジェクトごとの詳細ページ * テストや不具合修正の記録 * AIを活用した機能開発の記事 * Google AdSenseによる広告掲載 * デザインやスマートフォン表示の改善
まずは、現在制作しているReppalやFlick Battle（仮）の開発過程を少しずつ記事にしていきます。
完成したものだけを紹介するのではなく、途中で失敗したことや、どのように解決したのかも含めて記録していきたいと考えています。
「ゆうふの研究室」という名前のとおり、さまざまなものを作り、試し、その結果を残していける場所にしていきます。