<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>Cloud Engineer に関連するフィード</title>
        <link>http://izanami.dev/occupations/Cloud Engineer</link>
        <description>Cloud Engineer に関連する記事のRSSフィードです</description>
        <lastBuildDate>Wed, 29 Apr 2026 11:28:49 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>izanami RSS Feed</generator>
        <language>ja</language>
        <image>
            <title>Cloud Engineer に関連するフィード</title>
            <url>http://izanami.dev/favicon.ico</url>
            <link>http://izanami.dev/occupations/Cloud Engineer</link>
        </image>
        <copyright>All rights reserved 2026</copyright>
        <item>
            <title><![CDATA[Skill Quest AI【YouTubeにて制作過程公開】]]></title>
            <link>http://izanami.dev/post/ce5ac407-01a8-4cc9-8a65-e457b4dc6d06</link>
            <guid>http://izanami.dev/post/ce5ac407-01a8-4cc9-8a65-e457b4dc6d06</guid><dc:creator>Support CouplePlan</dc:creator>
            <pubDate>Sun, 01 Mar 2026 14:21:51 GMT</pubDate>
            <description><![CDATA[個人開発の背景をYouTubeにて公開！

https://youtu.be/N5mlx7FOzk

アプリ紹介動画

https://youtu.be/cgxvt9piRkA

1. エレベーターピ]]></description>
            <content:encoded><![CDATA[個人開発の背景をYouTubeにて公開！

https://youtu.be/N5mlx7FOzk

アプリ紹介動画

https://youtu.be/cgxvt9piRkA

1. エレベーターピッチ（30秒で伝える）

資格やスキルを伸ばしたいが、一人だと続かない人に向けて、目標を入力するだけでタスクがクエスト（シナリオ）として一覧化される。クエストをクリアするたびに、AIが紡ぐ物語の1セグメントとAIパートナーたちに与えるアイテムがもらえるのでタスク消化が楽しい！

---

2. ビジョン（目指す世界）

「このアプリが実現したとき、世界はどうなっているか？」

- ユーザーにとっての変化: 「また三日坊主」ではなく、毎日のタスクが「クエストをクリアする」体験になり、成長が物語と報酬として残る。
- タスク管理・習慣化の文脈での変化: 単なるTo-Do消化ではなく、ノベルゲー／TRPGのように「自分のシナリオを進める」体験として続けたくなる。一人ではなくAIパートナーと一緒にセッションを進める関係性が生まれる。
- 他にない「あれがあるから」と言える一点: AIが一人ひとりに合わせたプロローグ・クラス・物語を紡ぎ、グリモワールに履歴が残る「自分だけのストーリーログ（セッション履歴）」がある。

---

3. ターゲットユーザー

3.1 プライマリ（最優先で届けたい人）

| 項目 | 記入 |
|------|------|
| 誰か（ペルソナの輪郭） | 20〜30代中心。資格・プログラミング・語学など「スキルを伸ばしたい」が、一人だと続かない人。 |
| どんな課題・不満を持っているか | 単純なTo-Doでは続かない。「また三日坊主」と自己嫌悪しがち。続ける動機・報酬感が足りない。 |
| どんな欲求・願望があるか | ゲーム感覚で「今すぐ」レベルアップの快感を味わいたい。習慣化を「ツール」ではなく「体験」として楽しみたい。 |
| なぜ既存のツールでは満たされないか | 一般的なタスクアプリはチェックリスト中心で、物語・成長の可視化・パートナー性がない。 |

3.2 セカンダリ（届けられれば嬉しい人）

- ノベルゲーやTRPGが好きで、タスク管理にその要素（物語・シナリオ・セッション感）を取り入れたい人。
- 日記・ログのように「自分の成長の記録」を残したい人。

3.3 想定しないユーザー（あえて狙わない）

- 純粋にタスクの整理だけが必要で、物語・報酬・パートナーに興味がない人。
- チーム・プロジェクト管理が主目的の人（個人の習慣・スキル成長に特化する）。]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[かいどき]]></title>
            <link>http://izanami.dev/post/3024fe37-e70c-4043-a146-a671b42335bd</link>
            <guid>http://izanami.dev/post/3024fe37-e70c-4043-a146-a671b42335bd</guid><dc:creator>山本哲也</dc:creator>
            <pubDate>Wed, 25 Feb 2026 00:53:53 GMT</pubDate>
            <description><![CDATA[「あ、シャンプー切れてた…」そんな買い忘れ、もうなくしませんか？

かいどきは、日用品の買い替えタイミングを自動で管理・通知してくれるアプリです。登録したアイテムの購入サイクルを学習し、ちょうどいいタ]]></description>
            <content:encoded><![CDATA[「あ、シャンプー切れてた…」そんな買い忘れ、もうなくしませんか？

かいどきは、日用品の買い替えタイミングを自動で管理・通知してくれるアプリです。登録したアイテムの購入サイクルを学習し、ちょうどいいタイミングでお知らせします。

■ かんたん登録
100種類以上のテンプレートから選ぶだけ。シャンプー、洗剤、歯ブラシ、ラップ…よく使う日用品がカテゴリ別に揃っています。
もちろん自由入力でオリジナルアイテムも追加できます。

■ ひと目でわかるステータス表示
アイテムごとに「まだ大丈夫」「そろそろ」「買い時」「期限超過」の4段階を色分け表示。プログレスバーで消費サイクルの進み具合も一目瞭然。ホーム画面を開くだけで、今日買うべきものがすぐわかります。

■ 買い忘れ防止の通知
購入予定日の7日前・3日前・当日にリマインダーを送信。プッシュ通知やLINEなど、お好みのチャネルで受け取れます。通知の時間帯（朝・昼・夕方）も選べるので、買い物に行くタイミングに合わせられます。

■ 家族・ルームメイトと共有
グループ機能で、家族やシェアハウスのメンバーとアイテムを共同管理。招待コードを共有するだけで簡単に参加でき、誰かがアイテムを追加すると全員に通知が届きます。「誰が買う？」のやりとりもスムーズに。

■ 「買ったよ」ワンタップ記録
通知やアイテム詳細画面から「買ったよ」をタップするだけで購入記録が完了。次回の購入予定日も自動で更新されます。

■ LINE連携
LINEでログインでき、Pro版ではLINEのトーク画面に直接通知が届きます。普段使いのLINEで完結するので、アプリを開き忘れる心配もありません。

【こんな方におすすめ】
・日用品の買い忘れが多い方
・家族で買い物を分担している方
・ストックの管理が苦手な方
・無駄な買い物を減らしたい方
・シェアハウスで共有品を管理したい方
]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIでDocusaurus風サイトを構築：ステップ6 - サイドバー生成]]></title>
            <link>http://izanami.dev/post/f05798e6-7f34-4e23-bada-b588c98d7e94</link>
            <guid>http://izanami.dev/post/f05798e6-7f34-4e23-bada-b588c98d7e94</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Sun, 23 Nov 2025 04:08:24 GMT</pubDate>
            <description><![CDATA[[前回の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-5-handling-static-fi]]></description>
            <content:encoded><![CDATA[[前回の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-5-handling-static-files)では、Markdown内での静的リソース（画像など）の読み込み問題を解決しました。

これまでのところ、ドキュメントページはコンテンツ、コードハイライト、画像をきれいに表示できます。しかし、読者はドキュメントのナビゲーションで依然として困難に直面しています。ページは孤立した島のようなものです：手動でURLを入力しない限り、ある記事から別の記事へジャンプすることはできません。

Docusaurusのようなドキュメントサイトは、通常、「左サイドバー＋右コンテンツ」レイアウトを使用します。

この記事では、この機能を実装します： ディレクトリ内のすべてのMarkdownファイルを自動的にスキャンし、そのタイトルを抽出し、サイドバーナビゲーションメニューを動的に生成する関数を作成します。

ステップ1：サイドバーレイアウトスタイルの作成

まず、ページレイアウトを元の「単一カラムの垂直構造」から「2カラムの水平構造」に変更する必要があります。

このレイアウトを定義するためには、新しいCSSファイルが必要です。 ディレクトリに  ファイルを作成します。

更新されたファイル構造：



 の編集：



ステップ2：HTMLテンプレートの変更

次に、 を変更して新しいCSSファイルを含め、サイドバーを収容するためにHTML構造を調整します。

テンプレートに新しい変数  を導入します。これはドキュメントのリストを含む配列であり、後でPythonコードから渡されます。

 の変更：



ステップ3：ディレクトリスキャンロジックの実装

ここで、 フォルダをスキャンし、すべての  ファイルを見つけて、それらのFrontmatterを解析してタイトルを取得するPythonコードを作成する必要があります。

 を開きます。 ライブラリをインポート（ も使用できますが、 の方がモダンです）し、ヘルパー関数を記述する必要があります。

 の変更：



ステップ4：テスト用の2番目のドキュメントを追加

サイドバーが実際に機能していることを確認するために、2番目のMarkdownファイルが必要です。

 ディレクトリに  を作成します。



ステップ5：実行とテスト

サーバーを起動するには  を実行します。

 にアクセスします。

以下の変更に気づくでしょう：

- ページレイアウトが左サイドバーナビゲーションと右コンテンツエリアに変更されました。
- 左サイドバーには、「Hello, Frontmatter!
」と「Environment Setup Guide」の2つのリンクが自動的にリストされています。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/1f7d40c7-0fa0-4f7b-9581-cdaabc0b0bac.png)

しかし、小さな問題があります：

サイドバーの「Environment Setup Guide」をクリックすると、ブラウザは  にジャンプします。この時点で、「コンテンツが見つかりません」というエラーが表示されるでしょう。

これは、現在の  には ハードコーディングされた  ルートしかないため、 を処理しないからです。

要約

ファイルシステムをスキャンすることで、ドキュメントサイトに目次を自動生成する機能を持たせました。 フォルダに追加または削除した.mdファイルがいくつあっても、サイドバーは自動的に更新されます。

サイドバーはスマートですが、ルーティングは「ぎこちない」です。ルートアドレスはハードコーディングされているためです。もし100個のドキュメントがあったら、 に100個の  関数を書くわけにはいかないでしょう？それは明らかに実行可能ではありません。

 へのリクエストをキャプチャし、対応するMarkdownファイルを自動的に見つけるための汎用的な方法が必要です。

次の記事では、ファイルパスベースの動的ルーティングを実装し、404エラー問題を完全に解決し、サイドバーのすべてのリンクが実際に対応する記事にナビゲートすることを保証します。

その他

サイトを構築した後、オンラインで公開して他の人に見てもらいたいと思うかもしれません。しかし、ほとんどのクラウドプラットフォームは高価であり、このよう練習プロジェクトにお金を払うのは割に合いません。

デプロイにもっと経済的な方法はありませんか？[Leapcell](https://leapcell.io/?lct=iug37)を試してみてください。Python、Node.js、Go、Rustのような複数の言語のデプロイをサポートしており、毎月十分な無料枠を提供しており、1円もかけずに最大20個のプロジェクトをデプロイできます。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug37)

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-docusaurus-fu-sai-to-wo-jian-zhu-saido-ba-sheng-cheng)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPI で Docusaurus 風サイトを構築する：ステップ 5 - 静的ファイルの処理]]></title>
            <link>http://izanami.dev/post/ff02d7f7-777c-4bcc-b882-ea303522f9b0</link>
            <guid>http://izanami.dev/post/ff02d7f7-777c-4bcc-b882-ea303522f9b0</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Tue, 11 Nov 2025 06:44:41 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-4-parsing-frontmatter]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-4-parsing-frontmatter)では、Markdown Frontmatter の解析サポートを追加しました。これにより、ドキュメントのメタデータ（タイトルなど）をコンテンツと一緒に Markdown ファイル内で定義できるようになり、ハードコーディングを回避できます。

テキストやコードだけでなく、ドキュメントには通常、画像のような静的リソースが含まれます。

現在、 で画像を参照しても表示されません。この記事では、Markdown ファイルで参照されている画像などの静的リソースを正しく処理して配信するように FastAPI を有効にすることで、この問題を解決します。

画像が表示されないのはなぜですか？

以下は、画像  を含む Markdown ドキュメントです。



サーバーを実行してこのドキュメントにアクセスしても、画像は読み込まれません。

これは、画像のパスが  であるためです。ブラウザが  ページからこのパスを要求すると、実際に要求される URL は  になります。

しかし、FastAPI アプリケーションには、 リクエストを処理するように構成されたルートまたはマount されたディレクトリがないため、画像は読み込まれません。

ステップ 2: ドキュメントリソースの規約を作成する

これらの画像を配信する方法が必要です。安易なアプローチは、すべての画像を  フォルダに置くことですが、より良い実践は、 のようなコンテンツリソースをメインの  ディレクトリから分離し、専用のフォルダ（例：）に配置することです。

ディレクトリ構造を以下のように更新します：



ステップ 3: ドキュメントリソースディレクトリを FastAPI にマウントする

次に、FastAPI に「 で始まるリクエストは  フォルダ内のファイルを検索すべき」と指示する必要があります。

 を開き、次のように変更します。



 ではなく  をマウントしていることに注意してください。これはセキュリティのためです。 フォルダ内の画像などのリソースのみを公開し、 ディレクトリから  ソースファイルを公開することは避けるようにします。

ステップ 4: Markdown の画像リンクを更新する

これで、設定された静的パスに従って Markdown で画像を（参照）できるようになります。

 を編集します：



ステップ 5: 実行してテストする

 を実行してサーバーを起動します。

ブラウザで  にアクセスします。

追加した  画像がページに正しくレンダリングされていることがわかります。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/8f1110a4-5e69-4537-94a8-56b2de9334f6.png)

まとめ

簡単な設定と規約により、Markdown ドキュメントに画像を含め、正しくレンダリングできるようになりました。

ドキュメントが増えるにつれて、サイトには利用可能なすべてのドキュメントをリストするサイドナビゲーションバーが必要です。もちろん、これも自動生成されるべきです。

次の記事では、 ディレクトリを自動的にスキャンしてこのサイドバーを動的に生成し、サイトを「左サイドバー、右コンテンツ」レイアウトに変更します。

その他

サイトを構築した後、オンラインで公開して他の人に見てもらいたい場合があります。しかし、ほとんどのクラウドプラットフォームは高価であり、このような練習プロジェクトにお金を払う価値はありません。

デプロイのためにもっと経済的な方法はありませんか？ [Leapcell](https://leapcell.io/?lct=iug36) を試すことができます。Python、Node.js、Go、Rust などの複数の言語のデプロイをサポートしており、毎月十分な無料枠が提供されているため、費用をかけずに最大 20 件のプロジェクトをデプロイできます。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug36)

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokusaurus-fu-site-wo-jian-chu-xue-bu-5-jing-tai-wen-jian-de-chu-li)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)
]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIでDocusaurus風サイトを構築：ステップ4 - Frontmatterの解析]]></title>
            <link>http://izanami.dev/post/ab7ce619-ccfb-4c24-9540-b50dfc46bb34</link>
            <guid>http://izanami.dev/post/ab7ce619-ccfb-4c24-9540-b50dfc46bb34</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Mon, 10 Nov 2025 08:13:50 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-3-code-highlighting)で]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-3-code-highlighting)では、Markdownコードブロックの構文ハイライトを追加しました。

しかし、のルーティング関数（）のドキュメントページタイトル（）がまだハードコーディングされていることに気づいたかもしれません。これは非常に柔軟性がありません。新しいドキュメントを追加するたびにコードを変更する必要があるということでしょうか？

ドキュメンテーションサイトは柔軟である必要があり、記事をいつでも追加または削除できる必要があります。記事のメタデータ（タイトル、著者、日付など）は、コンテンツと同じように、Markdownファイル自体で定義する必要があります。

この記事では、Frontmatter（Markdownファイルの先頭にメタデータを定義するための一般的な仕様）を紹介し、FastAPIがそれを解析できるようにすることで、メタデータを動的にロードできるようにします。

ステップ1：Frontmatter解析ライブラリのインストール

を使用して、ファイルからFrontmatterとMarkdownコンテンツを分離および解析します。

以下のコマンドでインストールします：



ステップ2：MarkdownドキュメントにFrontmatterを追加する

次に、ファイルを変更して、先頭にFrontmatterを追加しましょう。

Frontmatterブロックは3つのダッシュ（）で囲まれます。

を更新する：



ここでは、、、の3つのメタデータフィールドを定義しました。必要に応じてさらにフィールドを追加できます。フィールドは最終的に記事のとして使用されます。

ステップ3：Frontmatterを解析するようにを変更する

単純なの代わりに、ライブラリを使用してファイルをロードするようにルーティング関数を変更します。

関数は、ファイルを2つの部分に解析します：

1.  ：すべてのFrontmatterデータを含む辞書（例：）。
2.  ：Markdownコンテンツの本体のみを含む文字列。

を開き、次のように変更します：



ステップ4：実行してテストする

を実行してサーバーを起動します。

にアクセスします。

ブラウザのタブタイトルとページ上のタグが、「Hello, Markdown!」ではなく、「Hello, Frontmatter!」（ファイルのFrontmatterで定義したもの）に置き換わっていることがわかります。

結論と次のステップ

Frontmatterとその解析ロジックを導入することで、記事はサイトから完全に分離されました。

Markdown以外にも、Webサイトには画像などの静的ファイルが含まれます。FastAPIがこれらの静的ファイルを正しくデプロイし、オンラインでアクセスできるようにするにはどうすればよいでしょうか？

次の記事では、この問題を解決します。Markdownファイルで参照される静的アセット（画像など）を処理し、FastAPIによって正しくデプロイされ、最終的なWebページに表示されるようにします。

その他

サイトを構築した後、オンラインで他の人に見てもらえるようにデプロイしたいと思うかもしれません。しかし、ほとんどのクラウドプラットフォームは高価であり、このような練習プロジェクトのために高額を支払う価値はありません。

もっと経済的なデプロイ方法はありませんか？[Leapcell](https://leapcell.io/?lct=iug35)を試してみてください。Python、Node.js、Go、Rustなどの複数の言語のデプロイをサポートしており、毎月寛大な無料枠を提供しているため、費用をかけずに最大20個のプロジェクトをデプロイできます。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug35)

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-docusaurus-fu-site-wo-jian-zhu-step4-frontmatter-no-kaixi)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)
]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIでDocusaurus風サイトを構築：ステップ3 - コードハイライト]]></title>
            <link>http://izanami.dev/post/b37a1c5b-5a14-413c-9e4b-712667f9df46</link>
            <guid>http://izanami.dev/post/b37a1c5b-5a14-413c-9e4b-712667f9df46</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Fri, 07 Nov 2025 11:25:39 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-2-render-markdown)では、]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-2-render-markdown)では、ファイルからHTMLを動的にレンダリングするサポートを追加しました。

しかし、ご覧のとおり、のPythonコードブロックはレンダリングされましたが、プレーンで色付けされておらず、読みにくかったです。

この記事では、この問題を解決します。と拡張機能を使用して、Markdownコードブロックに構文ハイライトを追加します。

ステップ1：ハイライト依存関係のインストール

ライブラリは、「拡張機能」を通じて追加の機能をサポートしています。コードハイライトを実装するには、拡張機能が必要ですが、これは別のライブラリであるに依存しています。

をインストールするには、次のコマンドを実行します。



ステップ2：静的ファイルディレクトリとCSSの設定

構文ハイライトの仕組みは、次の2段階のプロセスです。

1. の拡張機能は、コードブロック（例： ）を特定のCSSクラス（キーワードの、文字列のなど）を持つHTMLタグに変換します。
2. CSSファイルを使用して、ブラウザにこれらのCSSクラスが表示すべき色を指示します。

ライブラリは、このCSSを生成するための便利なコマンドラインツールを提供しています。

まず、プロジェクトのルートディレクトリにフォルダを作成して、このCSSファイルを保存しましょう。



ステップ3：ハイライトCSSファイルの生成

ターミナルを開き、次のコマンドを実行します。



パラメータの説明：

   : ハイライトテーマとしてを指定します（、、なども試せます）。
   : は、HTML用のCSSを生成したいことを示します。
   : は、すべてのCSSルールが CSSクラス（によって使用されるデフォルトクラス）の下にネストされることを意味します。

完了後、を開くと、テーマのCSSルールが内部に生成されているのがわかります。

ステップ4：FastAPIでの静的ディレクトリのマウント

これでCSSファイルはできましたが、FastAPIはまだそれを認識していません。これを修正するには、でディレクトリを「マウント」する必要があります。

を開き、次のように変更します。



ステップ5：HTMLテンプレートにCSSを含める

を変更し、HTMLページがコードハイライトCSSをロードできるように、にタグを追加します。



ステップ6：Markdown拡張機能の有効化

最後のステップとして、に戻り、ライブラリに拡張機能を使用するように指示しましょう。

また、バッククォート3つ内のコンテンツをコードブロックとしてレンダリングするために使用される拡張機能も必要です。これは、構文ハイライトを表示するための必須条件です。

のルート関数を変更します。

uvicorn main:app --reloadhttp://127.0.0.1:8000/docs/hellohello.mdmonokaidoc.html{{ pagetitle }}main.py"pagetitle": "Hello, Markdown!"hello.mdFrontmattertitledateFrontmatter`の解析と読み込みを実装して、コードでのハードコーディングを回避します。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-docusaurus-fu-site-o-jian-li-suteppu-3-kodo-haikuraito)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIでDocusaurus風サイトを構築：ステップ2 - Markdownのレンダリング]]></title>
            <link>http://izanami.dev/post/500a1e86-d4f8-4941-9d82-62bec0310fb3</link>
            <guid>http://izanami.dev/post/500a1e86-d4f8-4941-9d82-62bec0310fb3</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Wed, 05 Nov 2025 07:14:22 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-1-html-template)では、Fa]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-a-docusaurus-like-site-with-fastapi-step-1-html-template)では、FastAPIサービスをセットアップし、Jinja2を使用して動的なHTMLテンプレートをレンダリングしました。

しかし、他のドキュメンテーションサイトツールを使用したことがあるなら、それらのほとんどは手書きのHTMLではなく、Markdownで記述し、それをHTMLコンテンツの生成に使用していたことをご存知でしょう。

この記事では、この機能を正確に実装します。ローカルのファイルを読み込み、HTMLに解析し、Webテンプレートに注入します。

ステップ1：Markdown解析ライブラリのインストール

MarkdownテキストをHTML文字列に変換するツールが必要です。このための一般的なライブラリはです。

以下のコマンドを実行してインストールしてください。



ステップ2：最初のMarkdownドキュメントの作成

慣例により、すべてのソースドキュメントは新しいフォルダに保存します。

まず、プロジェクトのルートディレクトリにフォルダを作成し、その中にファイルを作成します。

更新されたプロジェクト構造：



を編集：

この新しいファイルを開き、後でテストできるようにMarkdownコンテンツを記述します。



ステップ3：ドキュメントレンダリング用テンプレートの作成

前回の記事で作成したはホームページです。ここでは、このMarkdownファイルのコンテンツを表示するための専用テンプレートが必要です。

フォルダにという名前の新しいファイルを作成します。

@@CODEBLOCK4@@

はJinja2に「この変数の内容は安全なHTMLです。直接レンダリングしてください。エスケープしないでください。」と伝えます。

ステップ4：Markdownレンダリングルートの作成

次に、を修正して、Markdownファイル用の新しいルートを追加しましょう。たとえば、です。

これは次のアクションを実行します。

1.  ファイルのコンテンツを読み込みます。
2.  ライブラリをインポートします。
3.   関数を使用して、ファイルの内容をHTML文字列に変換します。
4.  このHTML文字列を変数としてテンプレートに渡します。

を開いて、以下のように修正します。

@@CODEBLOCK5@@

ステップ5：実行とテスト

を実行してサーバーを起動します。

ブラウザでこのURLにアクセスしてください：

の内容がHTMLページとして正常にレンダリングされているはずです！

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/6a17754b-5e82-4f53-8800-d50953dfdb83.png)

プロジェクトのオンラインデプロイ

ドキュメンテーションサイトは皆が訪問するためのものなので、ローカルで実行するだけでは不十分です。次に、オンラインでデプロイしましょう。

簡単なデプロイオプションは[Leapcell](https://leapcell.io/?lct=iug33)を使用することです。Leapcellは、FastAPIを含むさまざまな言語やフレームワークのプロジェクトをホストできるWebアプリホスティングプラットフォームです。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug33)

以下の手順に従います。

1.ウェブサイトでアカウントを登録します。

2.プロジェクトをGitHubにコミットします。手順については[GitHubの公式ドキュメント](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github)を参照してください。Leapcellは後でGitHubリポジトリからコードを取得します。

3.Leapcellページで「Create Service」をクリックします。

![LeapcellImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/72fd2a2a-c118-4d72-b5e2-756304b554e7.jpg)

4.FastAPIリポジトリを選択すると、Leapcellが必要な構成を自動入力しているのが表示されます。

![LeapcellImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/6d97fa36-b28e-4028-af38-211acaa5c2c3.jpg)

5.下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイホームページに戻ります。ここでLeapcellがドメインを提供していることがわかります。これはブログのオンラインアドレスです。

![LeapcellImageP3](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/b8231741-899c-4e5f-abf3-5a0feac7f36e.jpg)

まとめと次のステップ

この記事で、ドキュメンテーションサイトの最もコアな機能である動的なMarkdown-to-HTML変換を実装しました。

のPythonコードブロックに気づいたかもしれません。正しくコードとしてレンダリングされましたが、プレーンで色がなく、読みにくいです。

これは明らかにドキュメンテーションサイトに期待される体験ではありません。

次の記事では、この問題を解決します。レンダリングされたMarkdownコードブロックに構文ハイライトを追加します。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-docusaurus-fu-site-o-jian-zhu-steps-2-markdown-no-renda-ringu)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIでDocusaurus風サイトを構築：ステップ1 - HTMLテンプレート]]></title>
            <link>http://izanami.dev/post/3f6f420d-e019-4fe7-9119-044804e0dab4</link>
            <guid>http://izanami.dev/post/3f6f420d-e019-4fe7-9119-044804e0dab4</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Wed, 05 Nov 2025 06:51:29 GMT</pubDate>
            <description><![CDATA[多くのドキュメンテーションサイトツールがありますが、使っていくうちにフラストレーションを感じたことがあるかもしれません。単一のツールでは、あなたの特定のニーズすべてを満たしながら、使いやすいシンプルな]]></description>
            <content:encoded><![CDATA[多くのドキュメンテーションサイトツールがありますが、使っていくうちにフラストレーションを感じたことがあるかもしれません。単一のツールでは、あなたの特定のニーズすべてを満たしながら、使いやすいシンプルなものであり続けることは不可能のように思えます。

もしそうなら、自分で構築してみてはいかがでしょうか？

この一連の記事では、Docusaurusに似たドキュメンテーションサイトを段階的に構築していきます。

この記事が最初です。動的なHTMLテンプレートページを返すシンプルなバックエンドサービスを構築することから始めます。

ステップ1：環境セットアップと依存関係のインストール

まず、プロジェクトディレクトリを作成し、必要な依存関係をインストールする必要があります。

プロジェクトディレクトリの作成：



コア依存関係のインストール：
3つの主要なライブラリをインストールします。

  - ：Webフレームワーク。
  - ：FastAPIを実行するためのASGIサーバー。
  - ：HTMLテンプレートのレンダリングに使用されるエンジン。



ステップ2：プロジェクトのスケルトン設定

次に、のルートディレクトリに以下のファイルとフォルダを作成します。



  - ：ここにすべてのFastAPIアプリケーションロジックとルートが含まれます。
  - ：Jinja2はデフォルトでここにHTMLテンプレートファイルを探します。
  - ：FastAPIは、静的ファイル（次の記事で使用します）を提供するためにこのディレクトリを使用します。

ステップ3：最初のFastAPIアプリ（JSONバージョン）の作成

テンプレートレンダリングを開始する前に、まずFastAPI自体が正しく動作していることを確認しましょう。

を開き、以下の基本的なコードを入力してください。



ターミナルを開き、のルートディレクトリにいることを確認して、以下を実行してください。



  -  は、で作成されたインスタンスを指します。
  - ：このパラメータはコードの変更を監視し、サーバーを自動的に再起動します。

これで、ブラウザでにアクセスしてください。以下のように表示されるはずです。



ステップ4：Jinja2テンプレートエンジンの設定

素晴らしい、サーバーは実行中です。しかし、JSONではなくHTMLが必要です。

FastAPIにディレクトリを見つけて使用する方法を指示する必要があります。

を修正してください。



ステップ5：最初のHTMLテンプレートの作成

フォルダ内に、新しいファイルを作成します。です。



に注目してください。これは純粋なHTMLではありません。はJinja2の変数構文です。すぐに、「Homepage」のような値をFastAPIバックエンドからこの変数に動的に渡します。

ステップ6：TemplateResponseでのテンプレートレンダリング

最後のステップとして、ルート  をJSONを返さないように、代わりにテンプレートをレンダリングするように修正しましょう。

これを行うには、以下のツールをインポートする必要があります。

  - ：Jinja2が正しいURLとコンテキストを構築できるようにするために必要です。
  - ：HTMLの返却専用にFastAPIが提供するレスポンスクラスです。

を以下のように修正してください。



を有効にしていた場合、サーバーは自動的に再起動されたはずです。

ページ  をリフレッシュしてください。

JSONは消え、レンダリングされたHTMLページに置き換わり、タグの内容が動的に置き換わっているのがわかります。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/ae4c5ce5-3c49-489b-a8c9-f4757fb69519.png)

プロジェクトのオンラインデプロイ

ドキュメンテーションサイトは、みんなが訪問できるようにするためのものです。ローカルで実行するだけでは十分ではありません。次に、オンラインでデプロイできます。

簡単なデプロイオプションは[Leapcell](https://leapcell.io/?lct=iug32)を使用することです。これは、FastAPIを含むさまざまな言語やフレームワークのプロジェクトをホストできるWebアプリホスティングプラットフォームです。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug32)

以下の手順に従ってください。

1.Webサイトでアカウントを登録します。

2.プロジェクトをGitHubにコミットします。手順については[GitHubの公式ドキュメント](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github)を参照してください。Leapcellは後でGitHubリポジトリからコードを取得します。

3.Leapcellページで「Create Service」をクリックします。

![LeapcellImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/72fd2a2a-c118-4d72-b5e2-756304b554e7.jpg)

4.FastAPIリポジトリを選択すると、Leapcellが必要な構成を自動入力しているのが表示されます。

![LeapcellImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/6d97fa36-b28e-4028-af38-211acaa5c2c3.jpg)

5.下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイホームページに戻ります。ここでLeapcellがドメインを提供していることがわかります。これはブログのオンラインアドレスです。

![LeapcellImageP3](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/b8231741-899c-4e5f-abf3-5a0feac7f36e.jpg)

まとめ

おめでとうございます。FastAPIプロジェクトのセットアップと基本的なHTMLテンプレートレンダリングの実装という、最初のステップを無事に完了しました。

他のドキュメンテーションサイトを使用したことがあるなら、そのコンテンツはHTMLで手書きされていないことに気づいたかもしれません。あなたはMarkdownを書き、Webページが自動的に生成されます。

次の記事では、このコア機能、つまり実際のMarkdownファイル（例：）を動的に読み込み、HTMLに解析し、Webテンプレートに注入する機能を実装します。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-docusaurus-fu-saido-wo-gou-zhu-supiruto-1-html-tenpure-to)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築：ステップ10 - カテゴリ]]></title>
            <link>http://izanami.dev/post/f781221c-6e47-40a9-8e7b-d2527c416866</link>
            <guid>http://izanami.dev/post/f781221c-6e47-40a9-8e7b-d2527c416866</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Wed, 05 Nov 2025 00:35:39 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-9-upload-images)で、フォーラムに画像アップ]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-9-upload-images)で、フォーラムに画像アップロード機能を追加し、投稿のコンテンツを充実させました。

現在、すべての投稿が同じホームページフィードに混在しています。フォーラムのコンテンツが増えるにつれて、これは非常に整理が悪くなります。ユーザーは特定のトピックにのみ興味があるかもしれませんが、関係のないコンテンツに気を取られてしまいます。

これを解決するために、この記事ではカテゴリ機能を紹介します。「技術的な議論」「雑談」などのさまざまなボードを作成し、ユーザーが投稿時にカテゴリを選択できるようにし、カテゴリ別に投稿を閲覧できるようにします。

ステップ1：データベースモデルの更新

カテゴリ情報を保存するために新しいテーブルが必要であり、それをリンクするためにテーブルに外部キーを追加する必要があります。

を開き、モデルを追加し、モデルを更新します。

（更新後）



このステップでの主な変更点は次のとおりです。

1.  新しいモデルを作成しました。
2.  モデルにを外部キーとして追加しました。
3.  との間のを確立し、またはを介してカテゴリ情報にアクセスできるようにしました。

ステップ2：データベーステーブル構造の更新

次に、このテーブルをデータベースに実際に作成し、テーブルを変更する必要があります。

テーブルの作成



デフォルトカテゴリの作成

カテゴリをすぐに利用できるように、手動で2つ作成しましょう。



テーブルの変更



既存の投稿の処理

テーブルの既存のデータについては、デフォルトのを割り当てる必要があります。



Null不可に設定

最後に、データ整合性を確保するために、列をに設定します。



[Leapcell](https://leapcell.io/?lct=iug31)を使用してデータベースを作成した場合、

[![ImageLc](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug31)

これらのSQLステートメントをWebベースの操作パネルで直接実行できます。

![ImageDb](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/372eb627-0eab-41ed-9c1d-6b1126befed0.png)

ステップ3：投稿作成ロジックの更新

これで、ユーザーが投稿を作成する際にはカテゴリを指定する必要があります。ルートを変更してを受け入れるようにする必要があります。

（ルートの更新）



ステップ4：カテゴリ別閲覧の実装

を唯一の投稿リストページとして使用するのではなく、特定のカテゴリの投稿を表示する新しいルートを作成します。

既存のルートを、「すべての投稿」集計ページとして機能するように変更します。

（ルートの追加/変更）



新しいルートを追加しました。これはテンプレートを再利用しますが、そのカテゴリの投稿のみを渡します。また、ルートを変更し、カテゴリ情報が正しくロードされて渡されるようにしました。

ステップ5：フロントエンドテンプレートの更新

最後に、カテゴリナビゲーションを表示し、投稿時にカテゴリを選択できるようにし、投稿がどのカテゴリに属するかを示すためにテンプレートを更新する必要があります。

（更新後）



（更新後）

投稿詳細ページでも、カテゴリ情報を追加します。



実行と検証

uvicornサーバーを再起動します。



にアクセスします。

上部に新しいカテゴリナビゲーションバー（「すべて」、「Technical」、「General」）が表示されます。

「新しいスレッドを投稿」フォームには、新しく必須の「カテゴリを選択」ドロップダウンがあります。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/99d1d2af-796d-4a88-8bd0-7f99973c3745.png)

投稿リストでは、各投稿がどのカテゴリに属しているかを示します。

![ImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/af38b648-5d0f-49a9-91f3-9a1d3485bffe.png)

カテゴリ（例：「General」）をクリックしてみてください。ページはにリダイレクトされ、そのカテゴリの投稿のみが表示され、フォームの「カテゴリを選択」ドロップダウンは「General」にデフォルト設定されます。

![ImageP3](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/51e135a8-312e-4289-ad69-4bd53b30b43e.png)

結論

モデルを追加し、ルートとテンプレートを更新することで、フォーラムのカテゴリ機能を正常に実装しました。これにより、ユーザーがフォーラムのコンテンツを見つけて閲覧することがより便利になりました。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokuji-no-fɔːramu-wo-gouqi-suteppu-10-kategori)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)
]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築する：ステップ9 - 画像のアップロード]]></title>
            <link>http://izanami.dev/post/d183d8d0-a2c3-424d-a7b7-d63e9bb71f4d</link>
            <guid>http://izanami.dev/post/d183d8d0-a2c3-424d-a7b7-d63e9bb71f4d</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Sun, 02 Nov 2025 16:02:15 GMT</pubDate>
            <description><![CDATA[[前回の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-8-full-text-search)では、Postgr]]></description>
            <content:encoded><![CDATA[[前回の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-8-full-text-search)では、PostgreSQLの組み込み全文検索機能を使用して、フォーラムで投稿を検索できるようにしました。

次に、投稿への画像アップロードサポートを追加することで、サイトの機能をさらに強化していきます。

画像アップロードのプロセスは次のとおりです。

1.  ユーザーが画像ファイルを選択して送信します。
2.  FastAPIがデータを受信した後、S3のような専用オブジェクトストレージサービスに画像ファイルを転送します。

なぜサーバーに直接保存しないのか？

これは便利ですが、いくつかの問題があります。

     画像の永続ストレージを維持する必要があります。これは、アプリケーションをデプロイするたびに画像ファイルが失われないようにすることを意味します。
     サーバーから画像を配信すると、サーバーの高価な帯域幅とコンピューティングリソースが消費されます。オブジェクトストレージでこれを処理するとサーバーのコンピューティングリソースは使用されず、帯域幅ははるかに安価です。

そのため、S3のような外部オブジェクトストレージサービスを使用する必要があります。

ステップ1：S3ストレージバケットの準備

S3互換のストレージサービスが必要です。以下から選択できます。

     [Leapcell](https://leapcell.io/?lct=iug30)。Leapcellは、Webサイトの構築、データベースのデプロイを可能にするオールインワンのバックエンドサービスを提供するプラットフォームであり、S3互換のオブジェクトストレージも含まれています。
     Amazon S3（AWS公式サービス）
     S3互換とマークされている限り、他のクラウドプロバイダー。

次に、例として[Leapcell](https://leapcell.io/?lct=iug30)を使用します。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug30)

Leapcellのメインインターフェイスにログインし、「オブジェクトストレージの作成」をクリックします。

![Create Object Storage](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/6b583c07-53f9-4f18-a7ec-78e5e27b4939.jpg)

名前を入力してオブジェクトストレージを作成します。

![Object Storage P1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/bdc0502d-65eb-4e1b-a89f-e1d6a9d416f2.jpg)

オブジェクトストレージの詳細ページで、接続に使用するパラメータであるエンドポイント、アクセスキーID、シークレットアクセスキーを確認できます。これらは後でバックエンド構成で使用します。

![Object Storage P2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/0cb9da26-c92b-421f-8570-8c9febc7d808.jpg)

インターフェイスは非常に便利なUIも提供しており、ブラウザで直接ファイルをアップロードおよび管理できます。

![Object Storage P3](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/e1d8c80c-35ed-4080-9827-f92428c7806e.jpg)

ステップ2：依存関係のインストール

公式AWS Python SDKであり、すべてのS3プロトコルサービスと完全互換のを使用します。



ステップ3：構成の追加

すべてのオブジェクトストレージ構成を一元管理するために、プロジェクトのルートディレクトリにを作成します。





ステップ4：S3アップロードユーティリティの作成

ロジックを明確にするために、ファイルアップロードを処理するためだけの新しいファイルを作成します。





ステップ5：データベースモデルの更新

アップロードされた画像のURLを保存するために、テーブルにフィールドを追加する必要があります。

を開き、モデルを変更します。

 (Postモデルの更新)



データベーステーブル構造も更新する必要があります。対応するSQLステートメントは次のとおりです。



[Leapcell](https://leapcell.io/?lct=iug30)を使用してデータベースが作成された場合、

[![ImageLc](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug30)

これらのSQLステートメントは、Webベースの操作パネルで直接実行できます。

![ImageDb](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/372eb627-0eab-41ed-9c1d-6b1126befed0.png)

ステップ6：バックエンドルートのリファクタリング

次に、のルートを変更して、ファイルアップロードを受け付けるようにしましょう。

 (ルートの更新)



主な変更点は次のとおりです。

1.  パラメータにが含まれるようになりました。
2.  パラメータのコンテンツ（）を読み込み、を呼び出して画像をオブジェクトストレージにアップロードします。
3.  最後に、オブジェクトを作成するときに、前のステップから返されたをデータベースに保存します。

ステップ7：フロントエンドテンプレートの更新

最後に、ファイルアップロードフィールドを追加し、画像を表示するためにフロントエンドページを更新する必要があります。

 (更新)



 (更新)



実行と検証

uvicornサーバーを再起動します。



にアクセスします。

「Create New Post」フォームにファイル選択ボタンが表示されます。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/77cb6894-f54a-4620-9226-3005a017be16.png)

新しい投稿を作成し、画像を追加してみてください。送信後、投稿した画像が表示されます。

![ImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/67b7993a-b5c0-4fae-be81-485e83e7700f.png)

結論

オブジェクトストレージを使用して、フォーラムに画像アップロード機能を追加することに成功しました。

現在、すべての投稿が同じページに集中しています。フォーラムのコンテンツが増えるにつれて、これは非常に乱雑になります。

次の記事では、フォーラムにカテゴリ（サブフォーラム）を追加し、投稿をさまざまなトピックで整理できるようにすることで、フォーラムをより構造化されたものにします。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokuji-no-fōramu-wo-gouki-suru-suteppu-9-gazou-no-appuro-do)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)
]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築する：ステップ8 - 全文検索]]></title>
            <link>http://izanami.dev/post/1b41f66f-e23d-48b2-894d-7296603d101d</link>
            <guid>http://izanami.dev/post/1b41f66f-e23d-48b2-894d-7296603d101d</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Sun, 02 Nov 2025 07:52:32 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-7-permissions)では、フォーラムの基本的な権限]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-7-permissions)では、フォーラムの基本的な権限システムを実装し、「管理者」と「ユーザーの禁止」機能をサポートして、健全なコミュニティの基盤を築きました。

フォーラムにコンテンツが増えるにつれて、ユーザーは興味のある古い投稿を見つけるのが難しくなるかもしれません。新しい要件が発生しています。ユーザーが読みたい記事をすばやく見つけるための検索機能が必要なのではないでしょうか？

この記事では、フォーラムに全文検索機能を追加します。

SQLの知識があれば、「クエリを使用して検索を実装できないか？」と考えるかもしれません。簡単なシナリオでは、これは実際可能です。しかし、クエリは大量のテキストを扱う際には極端にパフォーマンスが悪く、言語的な複雑さを理解できません（たとえば、「create」を検索しても「creating」には一致しません）。

したがって、より専門的で効率的なソリューションを採用します。PostgreSQLの組み込み全文検索（FTS）機能を使用します。これは高速であるだけでなく、ステミング、ストップワードの無視、関連性によるソートもサポートしており、よりもはるかに優れた検索機能を提供します。

ステップ1：データベース検索インフラストラクチャ（SQL）

PostgreSQLのFTS機能を使用するには、まずテーブルにいくつかの変更を加える必要があります。最適化された高速検索可能なテキストデータを格納するために、特別な列を作成します。

tsvector列の追加

テーブルに型の新しい列を追加します。これは辞書のようなもので、投稿のタイトルとコンテンツを個々の単語（レキセム）に分解して処理します。



tsvector列を自動的に更新するためのトリガーの使用

列自体にはコンテンツはありません。タイトルとコンテンツを形式に変換し、この列に書き込む必要があります。

投稿が作成または更新されるたびに列を手動で更新する人は誰もいません。最善の方法は、トリガーを使用してデータベースにこの作業を自動的に実行させることです。

まず、関数を作成します。この関数の役割は、とを連結し、それらを形式に変換することです。



> 関数を使用すると、異なるフィールドからのテキストに異なる重みを設定できます。ここでは、タイトル（'A'）の重みをコンテンツ（'B'）よりも高く設定しています。これは、検索結果において、タイトルにキーワードが含まれる投稿がより高くランク付けされることを意味します。

次に、新しい投稿が挿入（）または更新（）されるたびに、作成した関数を自動的に呼び出すトリガーを作成します。



検索インデックスの作成

検索速度を確保するために、最後のステップは列にGIN（Generalized Inverted Index）インデックスを作成することです。



ステップ2：既存データのバックフィル

作成したトリガーは、今後作成または変更される投稿にのみ機能することに注意してください。データベースに既に存在する投稿については、フィールドはまだです。

既存のすべての投稿の検索ベクトルを生成するために、1回限りのステートメントを実行する必要があります。



データベースが[Leapcell](https://leapcell.io/?lct=iug29)を使用して作成された場合、

[![ImageLc](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug29)

これらのSQLステートメントをWebベースの操作パネルで直接実行できます。

![ImageDb](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/372eb627-0eab-41ed-9c1d-6b1126befed0.png)

ステップ3：検索結果ページの作成

検索結果を表示するための新しいHTMLページが必要です。

フォルダーにという名前の新しいファイルを作成します。このページはに非常に似ていますが、ユーザーの検索クエリも追加で表示されます。





検索ボックスの属性にもを配置したことに注意してください。これにより、検索後も検索ボックスにユーザーの検索用語が保持されます。

ステップ4：検索バックエンドルートの実装

データベースとフロントエンドページが準備できたので、に検索リクエストを処理するバックエンドロジックを追加します。

まず、Postモデルを更新します。





次に、を修正します。

 (新しいルートとインポートを追加)



新しいルートは主に以下のことを行います。

1.  パラメータ（検索用語）を読み取り、スペースをに置き換えます。これにより、クエリはすべてのキーワードに一致します。
2.  、、およびを使用して、専門的なFTSクエリを構築し、結果を関連性（）で降順にソートします。
3.  クエリ結果でテンプレートをレンダリングします。

ステップ5：ホームページへの検索ボックスの追加

最後に、フォーラムのホームページでユーザーに検索エントリポイントを提供する必要があります。

を修正して、に検索フォームを追加します。

 (ヘッダーを更新)



また、タグにリンクを追加し、ユーザーがタイトルをクリックしてホームページに戻れるようにしました。

実行と検証

機能が実装されました。uvicornサーバーを再起動します。



ブラウザを開き、にアクセスします。

ページの上部にあるタイトル横に新しい検索ボックスが表示されます。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/aa689715-4622-490a-a55e-bc302dde4497.png)

検索ボックスに任意の単語を入力してEnterキーを押します。ページはルートにリダイレクトされ、関連する投稿が表示されます。

![ImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/4e7750b0-ac89-4eda-afdd-8a48aedc0a00.png)

まとめ

PostgreSQL FTSを活用することで、フォーラムに強力でプロフェッショナルな全文検索機能を追加しました。ユーザーは過去の投稿を簡単に見つけることができるようになりました。

次に、フォーラムの機能をさらに充実させていきましょう。投稿はプレーンテキストのみで、画像を含めることができないことに気づいたかもしれません。

次の記事では、投稿作成時にユーザーが画像をアップロードできるように実装します。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokuji-no-forum-wo-daikou-kyou-step-8-zenbun-kensaku)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)
]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築：ステップ7 - パーミッション]]></title>
            <link>http://izanami.dev/post/b4936417-4711-4fd2-99d7-bf7892849d79</link>
            <guid>http://izanami.dev/post/b4936417-4711-4fd2-99d7-bf7892849d79</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Sun, 26 Oct 2025 23:26:13 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-6-comments-and-replies)では、フォー]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-6-comments-and-replies)では、フォーラムにコメントと返信を実装し、コミュニティのインタラクションを大幅に強化しました。

しかし、インタラクションが増えれば、必然的に対立が生じます。インタラクションが増えるにつれて、コミュニティ管理は私たちが直面しなければならない問題となります。悪意のあるコンテンツが投稿された場合はどうなるでしょうか？

この記事では、基本的なパーミッション管理システムを紹介します。私たちは「管理者」ロールを確立し、コミュニティの秩序を維持するために管理者にユーザーを「禁止」する能力を与えます。

ステップ1：データベースモデルの更新

ユーザーテーブル（）に2つのフィールドを追加する必要があります。1つは管理者かどうかを識別するため、もう1つは「禁止」されているかどうかをマークするためです。

を開き、モデルを変更します。

（User モデルの更新）



との2つのフィールドを追加しました。既存のユーザーに影響を与えないように、両方ともに設定されています。

モデルを更新した後、データベーステーブル構造を手動で更新する必要があります。対応するSQLステートメントは次のとおりです。



データベースの作成に[Leapcell](https://leapcell.io/?lct=iug28)を使用している場合、

[![ImageLc](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug28)

これらのSQLステートメントをWebベースの操作パネルで直接実行できます。

![ImageDb](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/372eb627-0eab-41ed-9c1d-6b1126befed0.png)

ステップ2：管理者の手動任命

私たちのフォーラムには、管理者Appointmentsするための「管理者バックエンド」がまだありません。管理者を作成することはまれな要件であるため、データベースを直接操作して、ユーザーを管理者に手動で設定することができます。

データベースで次のコマンドを実行します。



を登録したユーザー名に置き換えるのを忘れないでください。

ステップ3：管理者パネルページの作成

管理者がアクセスできるページが必要で、すべてのユーザーとアクションボタンが表示されます。

フォルダにという新しいファイルを作成します。





このページは、すべてのユーザーを反復処理します。ユーザーが管理者でない場合、その横に「禁止」または「禁止解除」ボタンが表示されます。これらのボタンは、これから作成するAPIルートにPOSTリクエスト経由で接続されます。

ステップ4：管理者バックエンドルートの実装

管理者パネルのロジックを処理する新しいルートをに追加する必要があります。

（新しいルートと依存関係の追加）



これには以下の主な変更が含まれます。

- に基づいて、さらにがであるかを確認する新しい依存関係を作成しました。
- すべてのユーザーをクエリし、テンプレートをレンダリングするルートを作成しました。このルートは、管理者のみがアクセスできるようにによって保護されています。
- 特定のユーザーを禁止/禁止解除するためのおよびルートを作成しました。

ステップ5：禁止の強制（投稿の防止）

ユーザーは「禁止」とマークできるようになりましたが、そのアクションはまだ影響を受けていません。禁止されたユーザーは引き続き投稿やコメントを作成できます。

アクションを実行する前にユーザーのステータスを確認するために、およびルートを変更する必要があります。

（との更新）



これで、禁止されたユーザーが投稿フォームを送信しようとすると、バックエンドはリクエストを拒否し、403エラーを返します。

ステップ6：フロントエンドUIの更新

バックエンドは安全になりましたが、ユーザーエクスペリエンスの観点からは、フロントエンドから投稿およびコメントフォームを非表示にし、管理者にバックエンドへのエントリポイントを提供する必要があります。

（更新）



（更新）



これには2つの主な変更が含まれます。

- ヘッダーで、現在のユーザーが管理者（）の場合、「管理者パネル」リンクが表示されます。
- およびで、元の条件がに変更されました。これは、禁止されていないユーザーのみがフォームを見ることができることを意味します。

実行と検証

uvicornサーバーを再起動します。



管理者アカウントにログインします。右上隅に「管理者パネル」リンクが表示されるはずです。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/65277178-628d-4c22-abfa-30e5515b4b2e.png)

それをクリックしてページに移動します。すべてのユーザーのリストが表示され、他のユーザーを禁止できます。

![ImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/8036ba57-c3ec-4bd1-8c1e-451ca76c2fb3.png)

を禁止します。としてログインしている状態に切り替えると、「新規投稿の作成」フォームが消え、「禁止されています」というメッセージに置き換えられていることに気づくでしょう。

![ImageP3](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/e9478695-9f4f-4221-85d9-441233d510ea.png)

結論

フォーラムに基本的な管理機能を追加しました。およびフィールドの使用により、ユーザーロールの区別とパーミッション管理をサポートしました。

このフレームワークに基づいて、シャドウバンやログイン禁止などの、より多くの管理機能をさらに拡張できます。

フォーラムのコンテンツが増えるにつれて、ユーザーは関心のある古い投稿を見つけるのに苦労するかもしれません。

これを解決するために、次の記事ではフォーラムに検索機能を追加します。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[本シリーズの他の記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokuji-no-fōramu-wo-gouzuki-suteppu-7-pāmishon)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)



]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[CouplePlan - AIが提案する、あなたにぴったりのデートプラン]]></title>
            <link>http://izanami.dev/post/bb177740-2e59-4c55-9877-cd1bcbdef643</link>
            <guid>http://izanami.dev/post/bb177740-2e59-4c55-9877-cd1bcbdef643</guid><dc:creator>小島怜央</dc:creator>
            <pubDate>Sun, 26 Oct 2025 16:33:00 GMT</pubDate>
            <description><![CDATA[CouplePlan - AIが提案するカップル向けデートプランアプリ

プロダクト概要

CouplePlanは、AIが自動でデートプランを提案し、カップルが共同で編集・カスタマイズできるデート計画]]></description>
            <content:encoded><![CDATA[CouplePlan - AIが提案するカップル向けデートプランアプリ

プロダクト概要

CouplePlanは、AIが自動でデートプランを提案し、カップルが共同で編集・カスタマイズできるデート計画アプリです。

核となる価値提案

「AIが最適なデートプランを提案し、カップルで一緒に計画を楽しもう」

デートプラン作成の悩みを解決し、カップルが一緒にデート計画を立てる楽しさを提供することで、より充実したデート体験を実現するプラットフォームです。
]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築する：ステップ6 - コメントと返信]]></title>
            <link>http://izanami.dev/post/a993cdf0-cbe9-4302-974c-edf6c7d04acf</link>
            <guid>http://izanami.dev/post/a993cdf0-cbe9-4302-974c-edf6c7d04acf</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Sun, 26 Oct 2025 06:27:45 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-5-editing-posts)では、フォーラムに投稿編集]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-5-editing-posts)では、フォーラムに投稿編集機能を追加し、ユーザーが公開したコンテンツを修正できるようにしました。

投稿以外にも、フォーラムではインタラクションが不可欠です。ユーザーは興味深い（あるいは物議を醸す）投稿を見たときに、自分の意見を表明したくなるでしょう。

この記事では、フォーラムにインタラクション機能を追加します。投稿のコメントと返信を実装し、ユーザーが投稿を中心に議論できるようにします。

ステップ1：データベースモデルの更新

コメントを保存するための新しいテーブルが必要です。さらに、コメント自体が階層構造を形成するために返信をサポートする必要があります。

で、モデルを追加し、リレーションシップを確立するためにおよびモデルを更新します。

（更新版）



ここで行った主な変更点は次のとおりです。

1.  モデルを作成し、それぞれおよびを介して投稿およびユーザーにリンクしました。フィールドは、別のコメントのを指します。の場合はトップレベルのコメントであり、それ以外の場合は返信です。
2.  およびモデルを更新し、へのリレーションシップを追加しました。は、ユーザーまたは投稿が削除されたときに、関連するコメントも削除されることを保証します。

次に、この新しいテーブルをデータベースに作成します。対応するSQLステートメントは次のとおりです。



[Leapcell](https://leapcell.io/?lct=iug27)を使用してデータベースが作成された場合、

[![ImageLc](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug27)

これらのSQLステートメントを、Webベースの操作パネルで直接実行できます。

![ImageDb](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/372eb627-0eab-41ed-9c1d-6b1126befed0.png)

ステップ2：投稿詳細ページとコメントセクションの作成

現在、すべての投稿はホームページに表示されています。コメントセクションのためのスペースを確保するために、各投稿に個別の詳細ページを作成する必要があります。

まず、フォルダに新しいファイルを作成します。





このテンプレートには、投稿の詳細、新しいコメントを投稿するためのフォーム、およびすべてのコメントを表示する領域が含まれています。簡単にするために、現在は1レベルの返信のみを表示しています。

ステップ3：バックエンドルートロジックの実装

次に、投稿詳細ページを表示し、コメントを送信するための新しいルートをに追加します。

（新しいルートを追加）



2つの新しいルートを追加しました。

   : に基づいてデータベースから投稿を検索し、その投稿に関連するすべてのコメントをクエリします。最後に、テンプレートをレンダリングし、投稿、コメント、および現在のユーザー情報を渡します。
   : このルートは、コメントと返信の送信を処理し、オブジェクトを作成してデータベースに保存します。フォームからとオプションのを受け取ります。が存在する場合、これは返信を意味します。

ステップ4：ホームページにエントリポイントを追加

すべて準備ができたので、ホームページから投稿詳細ページへのエントリポイントが必要です。を編集して、投稿タイトルをリンクに変換します。

をにリンクするタグでラップするだけです。

（更新版）



実行と検証

uvicornサーバーを再起動します。



にアクセスしてログインします。ホームページでは、すべての投稿タイトルがクリック可能なリンクになっていることがわかります。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/b41facce-4a4c-4f2d-a590-a874754a2690.png)

いずれかの投稿タイトルをクリックすると、ページがその投稿の詳細ページにリダイレクトされます。

詳細ページの最下部にあるコメントボックスにコンテンツを入力して、「Submit」をクリックします。ページがリフレッシュされた後、コメントがコメントセクションに表示されます。

![ImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/bb2c532c-f5bc-4331-b1a3-240a06a83bd8.png)

コメントの下に、より小さな返信ボックスがあります。そこにコンテンツを入力して送信すると、コメントが返信として表示されます。

![ImageP3](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/bd59fa34-7029-458c-911c-176c3ac24d1b.png)

まとめ

フォーラムは現在、コメントと返信機能をサポートしており、ユーザーが互いに交流できるようになりました。

フォーラムの機能が複雑になるにつれて、コミュニティの秩序を維持することがますます重要になります。ユーザーができることをどのように制御しますか？

次の記事では、権限管理を紹介します。管理者などのシステムを通じて、コミュニティの健全な発展を確保します。たとえば、ユーザーの発言を禁止することです。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[ブログでこの記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokuji-no-fōramu-wo-goukyuu-suru-suteppu-6-komento-to-henshin)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築する：ステップ5 - 投稿の編集]]></title>
            <link>http://izanami.dev/post/b42bffa8-dd97-4f8b-ab93-8505efb42d13</link>
            <guid>http://izanami.dev/post/b42bffa8-dd97-4f8b-ab93-8505efb42d13</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Sat, 25 Oct 2025 11:41:57 GMT</pubDate>
            <description><![CDATA[[前回の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-4-user-system)で、フォーラムのユーザーシス]]></description>
            <content:encoded><![CDATA[[前回の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-4-user-system)で、フォーラムのユーザーシステムを構築しました。これにより、ユーザーは登録、ログイン、および自分のIDの下での投稿が可能になりました。

しかし、投稿が公開された後、現在のところ変更することはできません。エラーを見つけたり、さらにコンテンツを追加したりしたい場合はどうすればよいでしょうか？

この記事では、新しい機能、つまりユーザーが作成した投稿を編集できるようにする機能を実装します。

ステップ1：投稿編集ページの作成

まず、ユーザーが投稿のタイトルとコンテンツを編集できる新しいHTMLページが必要です。このページは新しい投稿フォームと非常によく似ていますが、既存の投稿データで事前に埋め込まれます。

フォルダにという名前の新しいファイルを作成します。





このテンプレートの核心は、との2つの入力フィールドを持つフォームです。Jinja2のと構文を使用して、バックエンドから渡された投稿データでフォームを事前に埋め込みます。

ステップ2：編集用のAPIルートの追加

次に、編集ロジックを処理するためにに2つの新しいルートを追加する必要があります。ファイルを開き、次のコードを追加します。

（新しいルートの追加）



ここでは2つのルートを追加しました。

   ：このルートはURLからのに基づいてデータベースで投稿を検索します。次に、がと一致することを確認します。検証が成功した場合、テンプレートをレンダリングし、クエリされたオブジェクトを渡します。
   ：このルートは、フォームから新しいとを受け取り、オブジェクトの属性を更新します。この操作では、ログインステータスと投稿の所有権も検証します。

ステップ3：メインページにエントリーポイントを追加

ルートの準備ができました。次に、ユーザーが編集ページにアクセスできるように、投稿のエントリーポイントを追加する必要があります。

ファイルを変更します。

（更新）



投稿情報の下にJinja2の条件文を追加しました。


現在のユーザーがログインしている場合（が存在する）で、投稿のが現在のユーザーのと一致する場合、「Edit」リンク（を指す）が表示されます。

これにより、ユーザーは自分の投稿にのみ編集ボタンが表示され、他人の投稿は編集できなくなります。

実行と検証

uvicornサーバーを再起動します。



にアクセスしてログインします。

以前に公開した投稿を見つけ、「Edit」リンクが表示されるはずです。他のユーザーの投稿には「Edit」リンクは表示されません。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/55fe854f-d7ab-44c7-8abe-2c21390dec21.png)

「Edit」をクリックすると、投稿の元のタイトルとコンテンツで事前に埋め込まれた編集フォームにリダイレクトされます。

![ImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/1d532c68-8248-4756-b170-9bb312cec9ca.png)

コンテンツを変更して「Update Post」をクリックします。ページはホームページにリダイレクトされ、投稿コンテンツが正常に更新されたことを確認できます。

![ImageP3](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/14730298-f62c-4d07-8e88-20d8a410fa4a.png)

プロジェクトのオンラインデプロイ

最初のチュートリアルと同様に、このステップの結果をオンラインにデプロイして、友人たちにプロジェクトの変更と進捗を体験してもらうことができます。

簡単なデプロイソリューションは[Leapcell](https://leapcell.io/?lct=iug26)を使用することです。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug26)

以前にデプロイしたことがある場合は、コードをGitリポジトリにプッシュするだけで、Leapcellが最新のコードを自動的に再デプロイしてくれます。

Leapcellのデプロイサービスを初めて使用する場合は、[こちらの記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-1-a-minimal-forum)のチュートリアルを参照してください。

まとめ

フォーラムに編集機能が追加され、より完全なものになりました。

投稿以外にも、フォーラムでのインタラクションは不可欠です。ユーザーは興味深い（または物議を醸す）投稿を見たとき、その下に自分の意見を共有したくなるでしょう。

次の記事では、フォーラムにインタラクティブな機能を追加します。投稿へのコメントと返信を実装し、ユーザーがそれらについて議論できるようにします。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[ブログでこの記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokuji-no-fōramu-wo-kouchiku-suru-step-5-toukou-no-henshuu)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)


]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築する：ステップ4 - ユーザーシステム]]></title>
            <link>http://izanami.dev/post/01965d99-fedf-429f-829d-38a173f73224</link>
            <guid>http://izanami.dev/post/01965d99-fedf-429f-829d-38a173f73224</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Fri, 24 Oct 2025 11:24:22 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-3-html-template)では、Jinja2テンプレ]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-3-html-template)では、Jinja2テンプレートエンジンを使用して、バックエンドのPythonロジックからフロントエンドのHTMLコードを分離し、プロジェクト構造をより明確にしました。

現在のフォーラムでは誰でも匿名で投稿できるため、コミュニティの運営方法としては適切ではありません。フォーラムはユーザーを中心に構築されるべきです。各ユーザーには独自のID、独自の投稿、返信があります。

そこで、この記事では、ユーザー登録、ログイン、ログアウト機能を含む完全なユーザーシステムをフォーラムに追加します。

ステップ1：依存関係のインストール

パスワード暗号化を処理するライブラリが必要です。ユーザーのパスワードは、極めて危険であるため、プレーンテキストで保存することはできません。ここではとアルゴリズムを使用します。

次のコマンドを実行します。



ステップ2：データベースモデルの更新

ユーザー情報を保存するための新しいテーブルが必要であり、各投稿の作成者を記録するためにテーブルをテーブルに関連付ける必要があります。

ファイルを開き、以下の変更を加えます。

（更新版）



ここでは2つのことを行いました。

- モデルの作成：
  - 、一意の、フィールドを含むテーブルを定義します。
- との関連付け：
  - モデルに、テーブルのを指す外部キーとしてフィールドを追加しました。
  - SQLAlchemyのを使用して、との間に双方向の関連付けを確立しました。これで、を通じて投稿の作成者にアクセスでき、を通じてユーザーのすべての投稿にアクセスすることもできます。

これらのモデルを適用する前に、データベースを手動で更新する必要があります。テーブルを作成し、テーブルを変更する必要があります。

対応するSQLステートメントは次のとおりです。



[Leapcell](https://leapcell.io/?lct=iug25)を使用してデータベースを作成した場合、

[![ImageLc](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug25)

そのWebベースの操作パネルでこれらのSQLステートメントを直接実行できます。

![ImageDb](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/372eb627-0eab-41ed-9c1d-6b1126befed0.png)

ステップ3：パスワードの処理

新しいファイルを作成し、パスワードハッシュ化および検証用の関数を記述して、パスワードを安全に処理します。





- ：ユーザーが入力したプレーンテキストパスワードとデータベースに保存されているハッシュ化されたパスワードを比較して、一致するかどうかを確認します。
- ：プレーンテキストパスワードをハッシュ値に変換して、データベースに保存できるようにします。

ステップ4：ユーザー登録およびログインページの作成

と同様に、フォルダ内にとという2つの新しいHTMLファイルを作成します。









ステップ5：認証関連のAPIルートの実装

をリファクタリングして、登録、ログイン、ログアウト、および現在のユーザー状態管理機能を追加します。これは比較的大きな更新です。

（最終完全版）



このファイルは主にこれらの変更を行いました。

1.  関数の追加：この関数は、リクエスト内のCookieを読み取って現在のユーザーを識別します。後続のルートでは、を通じてログイン中のユーザー情報を直接取得できます。
2.  ユーザー登録およびログイン関連ルートの追加
    - 登録（）：GETリクエストは登録フォームを表示し、POSTリクエストはフォーム送信を処理します。ユーザー名が既に存在するかどうかを確認し、パスワードをハッシュ化してデータベースに保存します。
    - ログイン（）：GETリクエストはログインフォームを表示します。POSTリクエストは、ユーザー名とパスワードを検証します。成功した場合、レスポンスにという名前のCookieを設定し、ユーザー名を値として設定します。これはシンプルなセッション実装です。
    - ログアウト（）：Cookieをクリアし、ホームページにリダイレクトします。
3.  ルート保護：ルートは、に依存するようになりました。ユーザーがログインしていない場合、ログインページにリダイレクトされます。投稿時、投稿のは自動的に現在ログインしているユーザーのIDに設定されます。
4.  ビューの更新：などのルートは、現在のユーザー情報を取得し、テンプレートに渡して、ページにログイン状態を表示できるようにします。

ステップ6：ホームページテンプレートを更新してユーザー状態を表示する

最後に、を修正して、ユーザーのログイン状態に基づいて異なるコンテンツを表示できるようにします。

（更新版）



テンプレートは主にこれらの変更を行いました。

- 上部のナビゲーションは、ログイン状態を判断するためにを使用します。ユーザーがログインしている場合、ウェルカムメッセージと「Logout」リンクが表示されます。それ以外の場合は、「Login」と「Register」リンクが表示されます。
- 新しい投稿用のフォームは、ログイン中のユーザーのみが表示できるように制限されています。
- 各投稿の下部に、を通じて作成者のユーザー名が表示されます。

実行と検証

結果を確認する時です！uvicornサーバーを再起動します。



にアクセスします。ホームページの右上隅に「Login」と「Register」リンクが表示され、ページに投稿を作成するエントリはありません。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/77f41307-69ed-4755-96ff-a5ef1cb75e1e.png)

新しいユーザーを登録し、ログインしてみてください。ログイン後、投稿フォームが表示され、ページの上部にユーザー名が表示されます。

![ImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/e3e0e6b7-397c-4710-8661-cdba153399db.png)

投稿を送信すると、その作成者は正しくあなたのユーザー名として表示されます。

![ImageP3](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/5a944cfb-07dc-4f26-952c-e4bc3f612541.png)

まとめ

この記事を通じて、フォーラムのユーザーシステムを構築しました。これで、誰もが登録、ログイン、そして自分の投稿を公開できます。

投稿にユーザーが紐づいた後、次のことを検討できます。もしユーザーが自分で公開した投稿の内容を変更したい場合はどうなるでしょうか？

次の記事では、現在のユーザーシステムに基づいた新しい機能、つまりユーザーが既に作成した投稿を編集できるようにする機能を実装します。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[ブログでこの記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokuji-no-fōramu-o-kōchi-suru-suteppu-4-yūzāshisutemu)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)
]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築する：ステップ3 - HTMLテンプレート]]></title>
            <link>http://izanami.dev/post/e8eba28a-994f-435e-8e76-49badf50d0bf</link>
            <guid>http://izanami.dev/post/e8eba28a-994f-435e-8e76-49badf50d0bf</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Thu, 23 Oct 2025 10:25:35 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-2-integrating-database)では、フォー]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-2-integrating-database)では、フォーラムにPostgreSQLデータベースを導入し、サーバーが再起動してもデータが失われないように永続的なデータストレージを実現しました。

これにより、自信を持ってさらに改善を進めることができます。しかし、現在のインターフェーススタイル（HTML）がすべて  に直接記述されていることに気づいたかもしれません。これは、将来新しい機能を追加するたびに、さらに多くのHTMLを  に詰め込まなければならないことを意味するのでしょうか？

これは書くのが面倒なだけでなく、大量のHTML文字列がPythonコードに混在することになり、コードの可読性と保守性が低下します。

この問題を解決するために、この記事ではJinja2テンプレートエンジンを導入し、バックエンドロジック（Python）とフロントエンド表示（HTML）を分離し、プロジェクト構造をより明確で保守しやすくします。

ステップ1：Jinja2のインストール

FastAPIで公式に推奨されているテンプレートエンジンはJinja2です。仮想環境がアクティブになっていることを確認し、次のコマンドを実行してください：



ステップ2：templatesディレクトリとファイルの作成

プロジェクトをより整理するために、HTMLテンプレートファイルを保存するための専用ディレクトリを作成する必要があります。

プロジェクトのルートディレクトリで、 という名前の新しいフォルダーを作成します。



次に、 の  関数からHTMLコードを新しい  ファイルに移動し、Jinja2構文を使用して変更します。





主な変更点は  セクションです：

- Pythonのforループを置き換えるために  と  を使用します。
-  のような二重中括弧構文を使用して、変数を動的に挿入します。

 変数は、テンプレートをレンダリングする際にFastAPIバックエンドによって渡されます。

ステップ3：FastAPIでのテンプレートの設定と使用

HTMLが分離されたので、 を変更して、FastAPIがこれらのテンプレートファイルを見つけて使用する方法を指示する必要があります。

（最終版）



どのようなコアな変更を行いましたか？

1.   から  をインポートしました。
2.   でテンプレートエンジンインスタンスを作成し、テンプレートファイルが  ディレクトリに格納されていることを示しました。
3.  HTML文字列を連結するために使用されていた以前の  関数を削除し、 を返す代わりに、 を呼び出すようにしました。
4.   は、テンプレートファイル名（）と、テンプレートに渡されるすべてのデータを含むコンテキスト辞書というパラメータを受け取ります。 オブジェクトとデータベースからクエリされた  リストを渡しました。

ステップ4：実行して確認

uvicornサーバーを再起動します：



ブラウザを開き、 にアクセスします。ページの外観は以前とまったく同じで、すべての機能も正常に動作していることがわかります。

しかし、プロジェクトの内部構造は完全に異なります。Pythonコードはデータとロジックの処理のみを担当し、HTMLコードはコンテンツの表示に焦点を当てるようになりました。これにより、将来的にページスタイルを変更したり、新機能を追加したりすることが、はるかに簡単かつ効率的になります。

プロジェクトのオンラインデプロイ

最初のチュートリアルと同様に、このステップの結果をオンラインでデプロイして、プロジェクトの変更と進捗を友人と体験することができます。

簡単なデプロイソリューションは、[Leapcell](https://leapcell.io/?lct=iug24) を使用することです。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug24)

以前にデプロイしたことがある場合は、コードをGitリポジトリにプッシュするだけで、Leapcellが最新コードを自動的に再デプロイします。

Leapcellのデプロイサービスを使用したことがない場合は、[こちらの記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-1-a-minimal-forum) のチュートリアルを参照してください。

まとめ

これで、FastAPIプロジェクトにJinja2テンプレートエンジンを正常に統合しました。

現在のフォーラムでは誰でも匿名で投稿できますが、これは実際にはフォーラムとは言えません。真のコミュニティは、異なるユーザーがいるだけでなく、各ユーザーが独自のアイデンティティを持っている必要があります。

次の記事では、フォーラムにユーザーシステムを追加し、ユーザー登録とログイン機能を実装して、各ユーザーが独自のアイデンティティでフォーラムにアクセスできるようにします。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[ブログでこの記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokujino-forum-wo-gouzhu-suru-step-3-html-tinpure-to)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築する：ステップ2 - データベースの統合]]></title>
            <link>http://izanami.dev/post/6f28ee6f-3945-410c-af28-49a986e7f08e</link>
            <guid>http://izanami.dev/post/6f28ee6f-3945-410c-af28-49a986e7f08e</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Mon, 20 Oct 2025 08:38:00 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-1-a-minimal-forum)では、スクラッチから始]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-1-a-minimal-forum)では、スクラッチから始め、FastAPIを使用してフォーラムのプロトタイプを迅速に構築しました。機能は基本的でしたが、投稿とスレッドの表示というフォーラムのコア機能はすでに備わっていました。

このプロトタイプには、1つの重大な問題があります。インメモリデータベースとしてPythonリストを使用しました。これは、サーバーが再起動するたびに、ユーザーが公開したすべての投稿が消えてしまうことを意味します。

この問題を解決するために、この記事では、フォーラムに実際のデータベースであるPostgreSQLを導入し、SQLAlchemy ORMを介して操作することで、永続的なデータストレージを実現します。

始めましょう！

PostgreSQLの準備

チュートリアルを開始する前に、PostgreSQLデータベースを準備しておく必要があります。ローカルにインストールすることもできます。手順は[公式PostgreSQLウェブサイト](https://www.postgresql.org/)にあります。

より簡単な代替案として、[Leapcell](https://leapcell.io/?lct=iug23)を使用して、ワンクリックで無料のオンラインデータベースを取得できます。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug23)

                ウェブサイトでアカウントを登録した後、「データベースの作成」をクリックします。4

![DbImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2432a071-83d1-4270-ba29-2199e393af25.jpg)

データベース名を入力し、デプロイリージョンを選択すると、PostgreSQLデータベースが作成できます。

表示される新しいページで、データベースに接続するために必要な情報が表示されます。下部にはコントロールパネルがあり、ウェブページ上で直接データベースを読み取ったり変更したりできます。

![DbImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/e269964e-3082-4368-bc92-70d9c0076fc5.jpg)

この接続情報を使用すると、追加のローカル構成なしで、さまざまなツールからデータベースに直接アクセスできます。

ステップ1：新しい依存関係のインストール

PythonがPostgreSQLと通信できるようにするには、いくつかの新しいライブラリが必要です。仮想環境がアクティブであることを確認し、次のコマンドを実行します。



はPythonエコシステムで最も人気のあるオブジェクトリレーショナルマッパー（ORM）ツールです。これにより、煩雑なSQLステートメントを作成する代わりに、Pythonコードを使用してデータベースを操作できます。
は、PostgreSQLとPythonを接続するために使用されます。SQLAlchemyはこれを使用してデータベースと通信します。

ステップ2：データベース接続の確立

データベース接続関連の設定をすべて処理するために、という新しいファイルを作成します。





- は、データベースとの通信のコアとなるSQLAlchemyエンジンを作成します。
- は、データベース操作（作成、読み取り、更新、削除）を実行するために使用されます。
- クラスは、このチュートリアルで使用するすべてのデータベースモデル（データテーブル）の基本クラスになります。

ステップ3：データテーブルモデルの定義

これで、メモリをデータベースとして使用する必要はなくなりました。データベース内のテーブルの構造を実際に定義するSQLAlchemyモデルを作成しましょう。

という新しいファイルを作成します。





このクラスは、テーブルの構造に直接対応します。

- ：データベースに対応するテーブル名を指定します。
- ：整数型の主キーで、クエリを高速化するためにインデックスが作成されます。
- と：文字列型のフィールドです。

モデルを定義しただけでは、テーブルがデータベースにすでに存在することを意味するわけではありません。このテーブルを手動で作成するには、SQLなどのコマンドを実行する必要があります。

対応するSQLは次のとおりです。



[Leapcell](https://leapcell.io/?lct=iug23)でデータベースを作成した場合、そのウェブページで直接SQLを入力してデータベースを変更できます。

ステップ4：APIのデータベース利用のためにリファクタリング

これが最も重要なステップです。インメモリのリストを完全に削除し、APIルート関数をSQLAlchemyセッションを介してPostgreSQLとやり取りするように変更する必要があります。

まず、に依存関係関数を追加します。

（関数追加）



これで、APIパス操作関数でを使用してデータベースセッションを取得できます。

以下は、データベースの使用に完全に切り替わったの最終的な完全版です。

（最終完全版）



上記の手順により、以下が達成されました。

1.  インメモリリストが削除されました。
2.  データベースとやり取りするすべてのルート関数はに変更され、データベース操作の前にが使用されるようになりました。これは、非同期データベースドライバーとエンジンを選択したためです。
3.  とは、データベースからの読み取りとデータベースへの書き込みを行うように変更されました。

実行と検証

次に、uvicornサーバーを再起動します。



ブラウザを開き、にアクセスします。投稿のリストは空（データベースは新品であるため）で表示されます。

いくつかの新しい投稿を公開してみてください。以前と同じように表示されます。

次に、データ永続性をテストしましょう。

1.  ターミナルでを押してuvicornサーバーをシャットダウンします。
2.  サーバーを再起動します。
3.  に再度アクセスします。

以前に公開した投稿がまだ存在することに気付くでしょう！フォーラムデータは現在PostgreSQLに保存されており、永続的なストレージが実現しました。

プロジェクトのオンラインデプロイ

最初のチュートリアルと同様に、このステップの結果をオンラインにデプロイして、友人たちにプロジェクトの変更と進捗を体験してもらうことができます。

簡単なデプロイソリューションは[Leapcell](https://leapcell.io/?lct=iug23)を使用することです。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug23)

過去にデプロイしたことがある場合は、コードをGitリポジトリにプッシュするだけで、Leapcellが最新コードを自動的に再デプロイします。

Leapcellのデプロイメントサービスを初めて使用する場合は、[この記事](https://leapcell.io/blog/build-your-own-forum-with-fastapi-step-1-a-minimal-forum)のチュートリアルを参照してください。

まとめ

このチュートリアルでは、フォーラムのバックエンドストレージを信頼性の低いインメモリリストから堅牢なPostgreSQLデータベースに正常に移行しました。

しかし、ファイルに長いHTML文字列がたくさん含まれていて、コードの保守が困難になっていることに気付いたかもしれません。

次回の記事では、「テンプレートエンジン」の概念を導入し、Jinja2を使用してHTMLコードを独立したテンプレートファイルに分離し、フロントエンドコードの可読性と保守性を簡素化します。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[ブログでこの記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokujino-fōramu-o-gouyū-seisuru-suteppu-2-dētabēsu-no-tougou)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで独自のフォーラムを構築：ステップ1 - ミニマルフォーラム]]></title>
            <link>http://izanami.dev/post/fc3e225f-7905-456a-bd4a-85b3c73ac11a</link>
            <guid>http://izanami.dev/post/fc3e225f-7905-456a-bd4a-85b3c73ac11a</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Sun, 19 Oct 2025 13:38:02 GMT</pubDate>
            <description><![CDATA[市場にはすでに多くのフォーラム製品がありますが、どれもあなたのユニークなニーズを満たせず、まだイライラしていませんか？もしそうなら、なぜ自分でフォーラムをゼロから構築しないのでしょうか？

Disco]]></description>
            <content:encoded><![CDATA[市場にはすでに多くのフォーラム製品がありますが、どれもあなたのユニークなニーズを満たせず、まだイライラしていませんか？もしそうなら、なぜ自分でフォーラムをゼロから構築しないのでしょうか？

Discourseのような巨大なフォーラムSaaSプラットフォームに臆することはありません。フォーラムの構築は、思っているほど難しくありません。

今後の記事シリーズでは、人気のあるPython WebフレームワークであるFastAPIを使用して、完全に機能するモダンなフォーラムWebサイトをゼロから段階的にガイドします。

このチュートリアルシリーズは初心者向けです。この記事の最後までに、以下に示すような、実行可能なミニフォーラムが完成するでしょう。

早速始めましょう：

ステップ1：環境セットアップ

まず、開発環境を準備しましょう。

プロジェクトディレクトリと仮想環境の作成

プロジェクト専用のフォルダを作成し、その中に仮想環境を作成します。

簡単のため、Pythonの組み込みモジュールを使用します。のような、他にも素晴らしい仮想環境ツールがたくさんあります。これらについてはご自身で調べてみてください。



アクティベーションが成功すると、コマンドラインプロンプトの先頭にが表示されます。

FastAPIとUvicornのインストール

次に、この記事で必要となるコアライブラリ、とをインストールします。

- : フレームワーク自体。
- : FastAPIアプリケーションを実行するために使用されるASGIサーバー。



は、最適なパフォーマンスのために推奨される依存関係とともにuvicornをインストールします。

ステップ2：「こんにちは、フォーラム！」 FastAPIアプリを実行する

環境が整ったので、最初のFastAPIコードを記述しましょう。ディレクトリにという名前のファイルを作成し、以下の内容を追加します：





このコードは何をするのでしょうか？

1. のインスタンスを作成し、と名付けます。
2. はデコレーターです。これは、以下の関数がパスに来るリクエストを処理することを示しています。
3. ルートパスにリクエストが到達すると、関数はPython辞書を返します。FastAPIはこれを自動的にJSONレスポンスに変換します。

次に、ターミナルからアプリケーションを実行します：



- : ファイルを指します。
- : で作成したインスタンスを指します。
- : コード変更後にサーバーが自動的に再起動する、非常に便利なパラメータです。

これで、ブラウザを開いてにアクセスすると、以下のように表示されます：



おめでとうございます！最初のFastAPIアプリケーションが正常に実行されました！

ステップ3：コアデータ構造の定義

私たちのフォーラムは投稿を公開するためのものなので、「投稿」がどのようなものかを定義する明確なデータ構造が必要です。FastAPIでは、データ定義と検証にを使用することを推奨しています。これはFastAPIに組み込まれており、非常に強力です。

にモデルを定義しましょう。

（更新版）



を継承するクラスを作成しました。投稿には3つのフィールド、（整数）、（文字列）、（文字列）が必要であると定義しました。

また、という名前のリストを作成し、データベースをシミュレートするために2つのオブジェクトを事前に入力しました。

ステップ4：コアAPIの実装

基本的なフォーラムには、投稿の表示と投稿の作成という2つの機能が必要です。対応するAPIエンドポイントを実装しましょう。

1. 全投稿の取得

リスト内のすべての投稿を返すエンドポイントが必要です。に以下のコードを追加します：

（継続）



- : リクエストを処理する新しいパスを定義します。
- : このエンドポイントのレスポンスボディはオブジェクトのリストになることをFastAPIに伝えます。FastAPIはこれをデータ検証、変換、およびAPIドキュメントでの明確なドキュメントに使用します。

2. 新規投稿の作成

次に、新しい投稿を作成するためのエンドポイントです。

まず、フォームデータの処理をサポートするためにをインストールします：



（継続）



というパラメータ形式は、FastAPIにフォームフィールドからデータを抽出するように指示します。

入力/出力形式がフォームフィールドであるのはなぜですか？後でユーザーがフォームを通じて投稿コンテンツを送信できるHTMLページを作成するためです。

ステップ5：シンプルなインタラクティブページ

純粋なAPIはフォーラムとは呼べません。FastAPIのを使用して、ユーザーがブラウザで直接投稿を作成および表示できる、実行可能なHTMLページをすばやく作成できます。

このページを表示するために新しいパスを作成します。

（最終完全版）



関数を使用して、フォームと投稿リストを含む完全なHTMLページを動的に生成します。これは原始的ですが、この段階では完全に十分です。

は生成されたHTMLページを直接返します。これにより、ユーザーがにアクセスするとフォーラムインターフェースが表示されます。さらに、ルートパスはにリダイレクトされるため、ルートURLにアクセスしたユーザーは自動的にフォーラムページに移動します。

が削除されていることに気づくかもしれません。これは、投稿リストを取得するために別のAPIを必要としなくなったためです。ページはインメモリから直接データを読み取ります。

また、のロジックも変更しました。オブジェクトを返すのではなく、ページにリダイレクトするようになり、ユーザーは送信後に更新された投稿リストをすぐに確認できます。

フォーラムの実行

Uvicornサーバーがまだ実行中であることを確認してください。をリフレッシュまたは再訪問すると、既存の投稿と新しい投稿を作成するためのフォームが表示されたフォーラムページが表示されます。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2201df56-eb23-4350-b962-e2b0c85fd529.png)

フォームにコンテンツを入力して送信すると、新しい投稿が投稿リストに表示されます。

![ImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/5ee23575-89e9-4cfa-824d-4ee2180ecf9d.png)

プロジェクトのオンラインデプロイ

フォーラムは皆に使ってもらうためのものなので、ローカルで実行するだけでは十分ではありません。次に、オンラインでデプロイしましょう。

簡単なデプロイオプションは[Leapcell](https://leapcell.io/?lct=iug22)を使用することです。これは、FastAPIを含むさまざまな言語やフレームワークのプロジェクトをホストできるWebアプリケーションホスティングプラットフォームです。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2689dab6-d2c0-4e4d-8755-2b9e6f8cd2b3.png)](https://leapcell.io/?lct=iug22)

以下の手順に従ってください：

1. ウェブサイトでアカウントを登録します。
2. プロジェクトをGitHubにコミットします。[GitHubの公式ドキュメント](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github)を参照して手順を確認してください。Leapcellは後でGitHubリポジトリからコードを取得します。
3. Leapcellページで「Create Service」をクリックします。
   ![LeapcellImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/78344745-755f-4c44-be6f-d87d365925c1.jpg)
4. FastAPIリポジトリを選択すると、Leapcellが必要な構成を自動入力したことが表示されます。
   ![LeapcellImageP2](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/893e129b-a7f3-47be-8cd3-905f6099ee93.jpg)
5. 下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイホームページに戻ります。ここで、Leapcellがドメインを提供していることがわかります。これがご自身のブログのオンラインアドレスです。
   ![LeapcellImageP3](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/081f9097-4fcd-4d3b-bfd7-3b7680701e75.jpg)

結論

わずかなステップで、FastAPIを使用して、最も基本的な機能を備えたフォーラムプロトタイプをゼロから構築しました。

このフォーラムはまだ非常に不完全です。例えば、サーバーが再起動すると、すべての新しい投稿が消えてしまいます。これは明らかに許容できません。

次の記事では、永続的なデータストレージを可能にするために、実際のデータベースをフォーラムに導入します。

---

Xでフォローする：[@LeapcellJapan](https://x.com/LeapcellJapan)

---

[ブログでこの記事を読む](https://jp.leapcell.io/blog/fastapi-de-dokuji-no-forum-wo-gou-zhu-suru-step-1-minimamu-forum)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[FastAPIで完璧なブログを構築：タグでフィルタリング]]></title>
            <link>http://izanami.dev/post/aef251a6-dce0-4972-b9fb-34abdc31198f</link>
            <guid>http://izanami.dev/post/aef251a6-dce0-4972-b9fb-34abdc31198f</guid><dc:creator>Leapcell HQ</dc:creator>
            <pubDate>Mon, 13 Oct 2025 20:53:00 GMT</pubDate>
            <description><![CDATA[[前の記事](https://leapcell.io/blog/build-a-perfect-blog-with-fastapi-tags-for-post)では、ブログにタグを作成して表示する機能]]></description>
            <content:encoded><![CDATA[[前の記事](https://leapcell.io/blog/build-a-perfect-blog-with-fastapi-tags-for-post)では、ブログにタグを作成して表示する機能を追加しました。

次に、タグ機能の残りの部分、つまりタグで投稿をフィルタリングする機能を完成させます。

ユーザーがタグリンクをクリックすると、その特定のタグの下にある投稿のみを表示する新しいページに移動します。これを行うには、バックエンドに新しいルートと処理ロジック、およびフロントエンドに対応するビューを作成する必要があります。

ステップ 1: サービスロジックの拡張

まず、 に2つの新しいメソッドを追加する必要があります。1つはタグIDでタグを検索するため (その名前を取得するため)、もう1つはタグIDで関連するすべての投稿を検索するためです。

 ファイルを開き、次のコンテンツを追加します。



コードの説明:

   : プライマリキーでタグオブジェクトを取得するためのシンプルなヘルパー関数です。
   : これはコアとなるクエリロジックです。SQLModel の  および  メソッドを使用して、 関連テーブルを介して指定された  に関連付けられたすべての  オブジェクトをフィルタリングし、作成時間で降順に並べ替えます。

ステップ 2: タグルートの作成

次に、 リクエストを処理するルートを実装しましょう。

まず、 フォルダ内に  という名前の新しいファイルを作成します。



最後に、この新しいルーターモジュールを  に含めることを忘れないでください。



ステップ 3: フロントエンドビューの作成

最後のステップは、 フォルダに  ビューファイルを作成することです。このファイルは、タグでフィルタリングされた投稿リストを表示するために使用され、その内容は  と非常によく似ています。

 ファイルを作成します。



このテンプレートは、動的にタイトル (例: "Posts in Tag: Python") とそのタグの下の投稿リストを表示します。タグの下に投稿がない場合は、対応するメッセージが表示されます。

実行とテスト

アプリケーションを再起動します。



ブラウザを開き、タグが付いた投稿に移動してから、投稿の下にあるいずれかのタグリンクをクリックします。

対応するタグのフィルターページにリダイレクトされ、そのタグの下にあるすべての投稿のリストが表示されます。

![ImageP1](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/f5a1a7b8-7d38-477a-901b-4e0e2a52b699.png)

これらの2つのチュートリアルにより、ブログに完全なタグ付けシステムが追加されました。

この時点で、FastAPIブログプロジェクトは、基本的なインフラストラクチャからコア機能、コンテンツ編成、データ分析まですべてをカバーしています。

ブログ機能の可能性は無限です。現在のフレームワークに基づいて、さらに機能を追加し続けることができます。残りはあなたの想像力次第です！

[Leapcell](https://leapcell.io/?lct=iug21) にデプロイすることを忘れないでください。FastAPIサポート、PostgreSQLデータベース、Redis、Web分析、およびWebアプリケーションの構築に必要なすべてのツールを提供しています。

[![Leapcell](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/bab99f7d-0df8-4bab-b568-ba95d36dfa29/2a654a06-b3ef-400f-b031-d6825875af24.png)](https://leapcell.io/?lct=iug21)

---

Xでフォローする：[@LeapcellJapanHQ](https://x.com/LeapcellJapanHQ)

---

[ブログでこの記事を読む](https://jp.leapcell.io/blog/fastapi-de-kanpeki-na-blog-o-kouchiku-tagu-de-firutaringu)

関連記事：

- [Go言語プロジェクトを無料でホストする方法 (Ginの例)](https://jp.leapcell.io/blog/go-lang-purojekuto-o-muryo-de-hosuto-suru-houhou-gin-rei)
- [Rustプロジェクトをクラウドでホストする方法（無料）](https://jp.leapcell.io/blog/rust-purojekuto-o-kuraudo-de-hosi-suru-hoho-muryo)
- [無料のクラウドでPuppeteerを実行する方法：ソリューションの比較](https://jp.leapcell.io/blog/muryou-no-kuraudo-depuppeteer-wo-zikkou-suru-houhou)
- [Next.js プロジェクトホスティングのための Vercel 以外のおすすめ](https://jp.leapcell.io/blog/nextjs-purojekuto-hosutingu-no-tame-no-vercel-igai-no-osume)]]></content:encoded>
        </item>
    </channel>
</rss>