Astro + Cloudflare Pagesで無料Webツールを4つ作った話 — 技術選定から公開まで
Astro × Cloudflare Pagesで無料ツールを4つ個人開発した全記録。OGPチェッカー、メタタグ診断、Cron式ジェネレーター、JSON-CSV変換の技術選定からデプロイまでを解説します。
はじめに — 記事メディアからツール提供へ
ToolCraft Labは、もともと記事メディアとしてスタートした。AIツールの比較記事や開発体験記を書いて、検索からの流入を増やす——という王道のコンテンツSEO戦略だ。
だが、ふと思った。
「記事を読みに来た人に、その場で使える実用ツールも提供したら、もっと価値を届けられるのでは？」
たとえば、OGP設定の解説記事を読んでいる人は、まさにいまOGPの確認がしたいはずだ。メタタグの書き方を調べている人は、自分のサイトのメタタグを診断したいはずだ。記事で知識を得て、ツールで即実践できる。この組み合わせが強いと確信した。
そこで、2日間で4つの無料Webツールを開発・公開した。この記事はその全記録だ。
作った4つのツール
1. OGPプレビューチェッカー
OGPプレビューチェッカーは、URLを入力するだけでTwitter・Facebook・LINEでの表示をプレビューできるツールだ。og:title、og:description、og:imageがSNS上でどう見えるかをリアルタイムで確認できる。OGP画像のアスペクト比（1.91:1）が正しいかどうかも自動判定する。
2. メタタグチェッカー
メタタグチェッカーは、任意のURLのSEOメタタグをスコア付きで診断するツール。title、description、canonical、og:imageなど主要なタグの有無と内容をチェックし、100点満点でスコアリングする。改善ポイントも具体的に提示する。
3. Cron式ジェネレーター
Cron式ジェネレーターは、「毎日午前9時」「毎週月曜の18:00」といった日本語の条件からcron式を生成するツール。逆に、既存のcron式を入力すれば次の実行日時を計算して表示する。サーバー管理者やバッチ処理を扱うエンジニアにとって定番の困りごとを解決する。
4. JSON ↔ CSV変換
JSON ↔ CSV変換ツールは、ブラウザ上で完結するデータ変換ツール。JSONをCSVに、CSVをJSONに相互変換できる。ネストしたJSONもドット記法でフラット化して出力する。データをサーバーに送信しないので、機密データでも安心して使える。
技術選定 — なぜAstro × Cloudflare Pagesか
Astro（静的サイト生成）を選んだ理由
このブログ自体がAstroで構築されているので、ツールも同じリポジトリに統合するのが自然だった。Astroの基礎から知りたい方はAstroブログチュートリアルも参考にしてほしい。Astroの強みは、ページの大部分を静的HTMLとして出力しつつ、必要な箇所だけインタラクティブにできる点だ。
ツールページの構造はシンプルで、静的なHTMLにフォームやボタンを配置し、<script> タグでバニラJavaScriptを書く。ReactやVueのようなフレームワークは使わない。ライブラリ依存ゼロなので、バンドルサイズは極小。ページの読み込みは一瞬で終わる。
Cloudflare Pages Functions
OGPチェッカーとメタタグチェッカーは、入力されたURLのHTMLを取得する必要がある。ブラウザからの直接fetchはCORSで弾かれるので、サーバーサイドの中継APIが必須だ。
ここでCloudflare Pages Functionsが活躍する。プロジェクトの functions/ ディレクトリにTypeScriptファイルを置くだけで、サーバーレスAPIとして自動デプロイされる。Cloudflareの管理画面で設定する必要はない。git push するだけでAPIが公開される。
無料枠は1日あたり10万リクエスト。個人ツールには十分すぎる容量だ。Cloudflare Pagesへのデプロイ手順についてはCloudflare Pages完全ガイドで別途解説予定だ。
Cloudflare × Astroの今後
2026年1月、CloudflareがAstroを買収した。この組み合わせは、今後さらに統合が深まることが確実だ。ビルド最適化、エッジでのSSR、Functions連携など、Astro + Cloudflareのエコシステムは最も将来性のある選択肢だと判断した。
アーキテクチャ
┌─────────────────────────────────┐
│ toolcraftlab.dev (Astro SSG) │
├─────────────────────────────────┤
│ /tools/ogp-preview (静的HTML + <script>)
│ /tools/meta-checker (静的HTML + <script>)
│ /tools/cron-generator (静的HTML + <script>) ← API不要
│ /tools/json-csv (静的HTML + <script>) ← API不要
├─────────────────────────────────┤
│ functions/api/ogp.ts (Cloudflare Pages Function)
│ functions/api/meta.ts (Cloudflare Pages Function)
└─────────────────────────────────┘ポイントは、APIが必要なツールと不要なツールを明確に分けていることだ。
- OGP / メタタグチェッカー: 外部URLのHTML取得が必要 → Pages Functionsでプロキシ
- Cron / JSON-CSV: すべてクライアント側で完結 → サーバー不要
API不要なツールは、CDNから配信される静的HTMLだけで動く。サーバーコストは文字通りゼロだ。
開発のポイント
OGPメタタグの取得
OGPタグの抽出は正規表現で行った。HTMLパーサーを使う方法もあるが、メタタグだけを取得するなら正規表現のほうがシンプルで依存ゼロに保てる。
注意すべきは、メタタグの属性順序だ。property と content の出現順序はサイトによって異なる。
<!-- パターン1: property が先 -->
<meta property="og:title" content="タイトル">
<!-- パターン2: content が先 -->
<meta content="タイトル" property="og:title">
<!-- パターン3: name 属性を使うケース -->
<meta name="description" content="説明文">これらすべてに対応する正規表現を書く必要がある。property 属性と name 属性の両方をチェックし、content 属性の位置が前後しても正しく抽出できるようにした。
SNSプレビューの再現
Twitter、Facebook、LINEでは、OGPカードの見た目がそれぞれ異なる。CSSでそれぞれのデザインを再現した。
特に重要なのが og:image のアスペクト比だ。Twitter Cardの大きな画像（summary_large_image）は1.91:1が推奨される。これを外すと画像が切り取られたり、余白が入ったりする。プレビュー画面でもこのアスペクト比を正確に反映し、「このまま投稿したらどう見えるか」を忠実に再現した。
Cron式の逆引き
Cron式から「次の実行日時」を計算するロジックは、見た目以上に面倒だ。月ごとの日数の違い（28日〜31日）、曜日と日付の組み合わせ、*/5 のようなステップ値——これらを正しく処理するには、地味だが丁寧なロジックが必要になる。
JSON → CSVのフラット化
ネストしたJSONオブジェクトをCSVに変換する際、キーをドット記法で展開する設計にした。
{
"user": {
"name": "SIKI",
"address": { "city": "Tokyo" }
}
}これが以下のようにフラット化される。
user.name,user.address.city
SIKI,Tokyo設計判断が必要だったのは配列の扱いだ。配列はインデックス付きで展開する（items.0.name, items.1.name）方式を採用した。
AIとの開発体験
今回の開発は、Claude Codeをフル活用した。
4つのツールを2日で完成できたのは、間違いなくAI駆動開発のおかげだ。特に効果的だったのは以下の点。
- 既存ページのスタイル参照: 「このサイトの既存ツールページと同じデザイン・レイアウトで作って」と指示するだけで、一貫したUIが生成される
- 並行開発: Cron式ジェネレーターとJSON-CSV変換は独立しているので、それぞれ別のセッションで同時に生成できた
- テスト駆動: 各ツールの正常系・異常系テストもClaude Codeが自動生成してくれた
20年以上コードを書いてきたが、「2日で4ツール」は従来の開発では考えられないスピードだ。設計判断とコードレビューに集中し、実装はAIに任せる——このワークフローが確立されつつある。
コスト
| 項目 | 費用 |
|---|---|
| ホスティング | 0円（Cloudflare Pages 無料枠） |
| API | 0円（Pages Functions 無料枠: 10万リクエスト/日） |
| ドメイン | 0円（既存ドメインのサブパス /tools/） |
| 開発時間 | 約2日（AI活用で大幅短縮） |
トータルコスト: 0円。 維持費も0円。Cloudflareの無料枠が続く限り、ランニングコストは一切かからない。
SEO面での工夫
ツールを作るだけでは検索流入は得られない。SEOの観点で以下の施策を入れた。
- Schema.org
WebApplication構造化データ: 各ツールページに構造化データを埋め込み、リッチリザルト表示を狙う（SEOメタタグの設定方法はSEOメタタグガイドも参考にしてほしい） - SEOコンテンツセクション: ツールの下部に「OGPとは？」「Cron式の書き方」といった解説コンテンツを配置。ツールとしての利便性 + 記事としての情報量を両立
- パンくずリスト:
BreadcrumbList構造化データ付きのパンくずを全ツールページに設置 - ハブページ: ツール一覧ページをハブとして機能させ、各ツールページへの内部リンクを集約
「ツールを使いに来た人が、関連する解説記事も読む」「記事を読みに来た人が、ツールも試す」——この循環を作ることで、サイト全体の回遊率と滞在時間の向上を狙っている。
まとめ
静的サイトジェネレーターであるAstroでも、Cloudflare Pages Functionsを組み合わせれば、サーバーサイド処理が必要なツールを構築できる。しかも無料で。
「記事 + ツール」の組み合わせは、コンテンツメディアの価値を大きく高める手法だ。記事が知識を提供し、ツールが即座に実践の場を提供する。この相乗効果は、どちらか単体では得られない。
今後は、正規表現テスターやHTTPヘッダーチェッカーなど、エンジニアの日常で使えるツールを追加していく予定だ。
あなたのサイトにも、ツールを追加してみませんか？ Astroのリポジトリに tools/ ディレクトリを作るところから始められる。
よくある質問
Q. Astroでインタラクティブなツールは作れる？
作れる。Astroは静的サイトジェネレーターだが、<script> タグで通常のJavaScriptを書けるので、フォーム入力やリアルタイム変換のようなインタラクティブ機能は問題なく実装できる。Reactなどのフレームワークを使いたい場合は、Astroのアイランドアーキテクチャで部分的にReactコンポーネントを埋め込むことも可能だ。
Q. Cloudflare Pages Functionsの無料枠はどのくらい？
無料プランでは1日あたり10万リクエストまで利用可能だ。これは個人サイトや小〜中規模のツールサイトには十分な量。レスポンスのサイズ制限やCPU時間の制限もあるが、メタタグ取得のような軽量なAPI処理では問題にならない。
Q. 静的サイトジェネレーターでAPI処理は可能？
可能だ。Astro単体では静的HTMLしか生成できないが、Cloudflare Pages FunctionsやVercel Serverless Functionsのようなサーバーレス機能を組み合わせることで、APIエンドポイントを追加できる。デプロイ先のプラットフォームが提供するFunctions機能を活用するのがポイントだ。
Q. ツール開発にかかる費用は？
今回のケースでは、ホスティング・API・ドメインすべて0円で運用している。Cloudflare Pagesの無料枠は非常に寛大で、個人開発であれば課金が発生することはほぼない。開発コストも、Claude CodeなどのAIツールを活用すれば大幅に短縮できる。
Q. バニラJavaScriptで十分？Reactは不要？
ツールの複雑さによる。今回の4ツールはいずれもフォーム入力 → 結果表示というシンプルな構成なので、バニラJSで十分だった。状態管理が複雑になるツール（リアルタイムコラボレーションや複数ステップのウィザードなど）を作る場合は、ReactやSvelteをAstroアイランドとして導入するのがよいだろう。