【Python】Flaskで社内FAQをカテゴリ検索できるWebアプリを作ってみた

「この手続き、どこで調べればいいんだっけ?」という社内の迷子を減らしたくて、PythonのFlaskで社内FAQをカテゴリ検索できるWebアプリを作ってみました。データベースなし・コードは1ファイル完結という最小構成ながら、トップページの全件表示とカテゴリごとの絞り込み、選択中カテゴリの反転表示まで一通り動きます。

実際に3種類の画面で動作を確認できたので、コードの要点からつまずきポイントまで初心者向けにまとめます。

作るのは、社内のよくある質問をカテゴリ別に閲覧できるFAQポータルです。IT・システム、経費精算、人事・労務、総務・オフィスの4カテゴリに12件のFAQを登録し、トップでは全件、カテゴリページでは該当分だけを表示します。

方針は徹底した「1ファイル完結」にしました。データベースも外部HTMLファイルも使わず、データはPythonの辞書とリスト、画面はrender_template_stringによるインラインHTMLで、app.py単体で動かせる構成です。

URLは/(全件表示)と/category/<slug>(カテゴリ絞り込み)の2つに絞り、存在しないslugには404を返します。この<slug>の部分はFlaskが標準でサポートする変数付きURLの仕組みで、公式ドキュメントでも次のように説明されています。

参考：

©Flask公式ドキュメント(Quickstart)

You can add variable sections to a URL by marking sections with <variable_name>. Your function then receives the <variable_name> as a keyword argument.

このプロンプトで一番意識したのは、「カテゴリ検索」という要件を曖昧にしないことです。カテゴリの一覧・件数表示・選択中の見た目の変化・404の扱いまで具体的に指定することで、LLMの解釈のブレを抑えました。

データベースを禁止してリストと辞書だけでデータを持たせたのは、Flask入門の題材として依存を減らすためです。コピペした瞬間に動くコードになり、読者はルーティングとテンプレートの理解に集中できます。

また、URLには日本語のカテゴリ名ではなく英数字スラッグを使うよう明示しました。仕上がりのURLが読みやすくなるうえ、表示名とURL用の値を分ける設計はそのまま実務でも通用します。

生成プロンプトで工夫したポイント

• FAQデータはPythonのリストと辞書でコード内に持ち、データベースや外部ファイルは使わない：依存ゼロでコピペ即動作になり、題材の本質であるルーティングとカテゴリ絞り込みに集中できます。
• カテゴリは「it」「keihi」のような英数字スラッグでURLに載せ：日本語をそのままURLに使うとエンコードで読みにくくなるため、表示名とURL用の値を分けるのはWebアプリ設計の定石です。
• 存在しないスラッグにアクセスされたら404を返す：異常系を一言指定しておくと、正常系しか考慮しないコードが生成されるのを防げます。
• 絞り込みのロジックは共通の関数にまとめ：トップとカテゴリページで同じ描画処理を重複させない構造を先に指示することで、生成コードの品質が安定します。

同じコードを作れる生成プロンプト（コピペ用・全文）

実際の生成時には、この記事のシステム都合の指定（図の保存先など）を少しだけ足していますが、以下はそのままコピペして同じものが作れるように整えた全文です。

この記事のセットアップ手順と掲載コードは、Windows 11 Pro、PowerShell 5.1、Python 3.13.3で動作確認しています。仮想環境を有効化せず、その中のPythonを直接指定するため、以下のコマンドはPowerShellとコマンドプロンプト（cmd）の両方で使えます。

python -m venv .venv
.\.venv\Scripts\python.exe -m pip install flask

macOS・Linuxでは仮想環境内のPythonパスが異なります。今回の動作確認環境とは異なるため、以下は環境差分を補う参考手順です。

python3 -m venv .venv
./.venv/bin/python -m pip install flask

• 起動は.\.venv\Scripts\python.exe -m flask --app app runで行い、ブラウザでhttp://127.0.0.1:5000を開いて確認します
• ポート5000が他のアプリで使用中の場合は--port 5001のように空きポートを指定してください

コード全体は、データ定義・HTMLテンプレート・共通関数・2つのルートという4ブロックで構成しています。上から順に読むだけで処理の流れを追える、素直な並びです。

絞り込みの本体は共通関数render_faq_list(current)に集約しました。引数currentがNoneならFAQSを全件、slugが入っていればリスト内包表記で該当カテゴリだけを取り出し、同じテンプレートに渡します。

ルートは/と/category/<slug>の2つだけで、どちらも最終的にrender_faq_listを呼ぶ薄い作りです。<slug>がCATEGORIESに無い場合はabort(404)でエラーページを返します。

カテゴリナビは選択中のカテゴリだけ.activeクラスで反転表示し、カテゴリごとの件数も集計して添えました。以下では、この中から特に重要な部分を抜き出して解説します。

from flask import Flask, render_template_string, abort

# FAQデータの定義(社内FAQを想定した自作ダミーデータ)
CATEGORIES = {
    "it": "IT・システム",
    "keihi": "経費精算",
    "jinji": "人事・労務",
    "soumu": "総務・オフィス",
}

FAQS = [
    {"slug": "it", "question": "社内Wi-Fiに接続できないときはどうすればいいですか?", "answer": "まず機内モードがオフになっているか確認し、SSID「CORP-WIFI」に再接続してください。改善しない場合は情報システム部のポータルから問い合わせを起票します。"},
    {"slug": "it", "question": "パスワードの有効期限が切れてログインできません。", "answer": "社内ポータルの「パスワードリセット」ページから本人確認のうえ再設定できます。リセット後は各端末の保存済みパスワードも忘れずに更新してください。"},
    {"slug": "it", "question": "業務で使いたいソフトウェアを新しくインストールできますか?", "answer": "許可リストに載っているソフトは自由に導入できます。リスト外のソフトは情報システム部へ利用申請を出し、承認後にインストールしてください。"},
    {"slug": "keihi", "question": "交通費の精算はいつまでに申請すればいいですか?", "answer": "当月利用分は当月末までに経費システムで申請してください。締めを過ぎた場合は翌月分としてまとめて申請できます。"},
    {"slug": "keihi", "question": "領収書をなくした場合はどう精算しますか?", "answer": "出金伝票に利用日・金額・目的を記入し、上長の承認を得たうえで経費システムに添付してください。"},
    {"slug": "keihi", "question": "出張時の宿泊費に上限はありますか?", "answer": "国内出張は1泊9,000円、海外出張は地域ごとの規程額が上限です。超過する場合は事前に部門長の承認が必要です。"},
    {"slug": "jinji", "question": "有給休暇の残日数はどこで確認できますか?", "answer": "勤怠システムのマイページ「休暇残数」タブで確認できます。付与日と失効日もあわせて表示されます。"},
    {"slug": "jinji", "question": "引っ越したときの住所変更手続きを教えてください。", "answer": "人事システムの「身上異動届」から新住所を届け出てください。通勤経路の変更がある場合は通勤費の申請も同時に更新します。"},
    {"slug": "jinji", "question": "時短勤務を利用したいときはどうすればいいですか?", "answer": "利用開始希望日の1か月前までに、人事部へ時短勤務申請書を提出してください。上長との面談後に適用が確定します。"},
    {"slug": "soumu", "question": "会議室はどうやって予約しますか?", "answer": "グループウェアのスケジュール機能から空き状況を確認して予約できます。利用後は原状回復と予約時間内の退室をお願いします。"},
    {"slug": "soumu", "question": "名刺を追加で発注したいです。", "answer": "総務ポータルの「名刺発注」フォームから申請してください。毎週水曜締めで、翌週金曜に各拠点へ配送されます。"},
    {"slug": "soumu", "question": "社員証を紛失したときはどうすればいいですか?", "answer": "すぐに総務部へ連絡して入館権限を停止してもらい、再発行申請書を提出してください。再発行には3営業日ほどかかります。"},
]

# 画面テンプレートの定義(1ファイル完結のインラインHTML)
PAGE_TEMPLATE = """
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>社内FAQポータル</title>
<style>
  body { font-family: "Segoe UI", "Hiragino Sans", "Noto Sans CJK JP", sans-serif;
         margin: 0; background: #f3f5f9; color: #222; }
  header { background: #1f3a5f; color: #fff; padding: 24px 32px; }
  header h1 { margin: 0 0 6px; font-size: 24px; }
  header p { margin: 0; font-size: 13px; opacity: .85; }
  .cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 32px 0; }
  .cats a { text-decoration: none; background: #fff; color: #1f3a5f;
            border: 1px solid #c9d4e4; border-radius: 999px;
            padding: 6px 14px; font-size: 13px; }
  .cats a.active { background: #1f3a5f; color: #fff; border-color: #1f3a5f; }
  main { padding: 16px 32px 40px; max-width: 860px; }
  h2 { font-size: 16px; color: #445; }
  .faq { background: #fff; border: 1px solid #dde4ee; border-radius: 10px;
         padding: 14px 18px; margin-bottom: 12px; }
  .tag { display: inline-block; background: #e8eef8; color: #1f3a5f;
         font-size: 11px; border-radius: 4px; padding: 2px 8px; margin-bottom: 6px; }
  .faq h3 { margin: 0 0 6px; font-size: 15px; }
  .faq p { margin: 0; font-size: 13px; line-height: 1.7; color: #444; }
</style>
</head>
<body>
<header>
  <h1>社内FAQポータル</h1>
  <p>カテゴリを選ぶと、該当するFAQだけに絞り込めます</p>
</header>
<nav class="cats">
  <a href="/" class="{{ 'active' if current is none else '' }}">すべて({{ total }}件)</a>
  {% for slug, name in categories.items() %}
  <a href="/category/{{ slug }}" class="{{ 'active' if current == slug else '' }}">{{ name }}({{ counts[slug] }}件)</a>
  {% endfor %}
</nav>
<main>
  <h2>{{ heading }} — {{ faqs|length }}件</h2>
  {% for faq in faqs %}
  <article class="faq">
    <span class="tag">{{ categories[faq.slug] }}</span>
    <h3>Q. {{ faq.question }}</h3>
    <p>A. {{ faq.answer }}</p>
  </article>
  {% endfor %}
</main>
</body>
</html>
"""

# Flaskアプリの生成
app = Flask(__name__)


# 一覧描画の共通処理(カテゴリ絞り込み+テンプレート描画)
def render_faq_list(current=None):
    faqs = [f for f in FAQS if current is None or f["slug"] == current]
    counts = {slug: sum(1 for f in FAQS if f["slug"] == slug) for slug in CATEGORIES}
    heading = "すべてのFAQ" if current is None else CATEGORIES[current] + "のFAQ"
    return render_template_string(
        PAGE_TEMPLATE,
        faqs=faqs,
        categories=CATEGORIES,
        counts=counts,
        total=len(FAQS),
        current=current,
        heading=heading,
    )


# ルーティングの定義
@app.route("/")
def index():
    return render_faq_list()


@app.route("/category/<slug>")
def category(slug):
    if slug not in CATEGORIES:
        abort(404)
    return render_faq_list(slug)


# キャプチャ
ROUTES = ["/", "/category/it", "/category/keihi"]

コード全文は上の折り畳みに入れてあるので、全部を上から読む必要はありません。ここでは特に重要な部分だけを抜き出して、何をしているのか順番に見ていきます。

Flask本体とabortの読み込み

from flask import Flask, render_template_string, abort

最初の1行で、アプリ本体のFlask、HTML文字列を描画するrender_template_string、404エラーを返すabortをまとめて読み込みます。このアプリで使う道具は、実質この3つだけです。

CATEGORIESでslugと表示名を対応づける

CATEGORIES = {
    "it": "IT・システム",
    "keihi": "経費精算",
    "jinji": "人事・労務",
    "soumu": "総務・オフィス",
}

カテゴリは、URLに使う英数字のslugをキー、画面に出す日本語名を値にした辞書で管理します。URLと表示名を分けておくと日本語をURLに含めずに済み、表示名の変更も1か所で完結するのが利点です。

FAQSに質問と回答を12件ためる

FAQS = [
    {"slug": "it", "question": "社内Wi-Fiに接続できないときはどうすればいいですか?", "answer": "まず機内モードがオフになっているか確認し、SSID「CORP-WIFI」に再接続してください。改善しない場合は情報システム部のポータルから問い合わせを起票します。"},

FAQ本体は{slug, question, answer}の3つのキーを持つ辞書を12件並べたリストです。slugがCATEGORIESのキーと対応していて、この値を手がかりにカテゴリ絞り込みを行います。

PAGE_TEMPLATEにHTMLを埋め込む

PAGE_TEMPLATE = """
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>社内FAQポータル</title>

画面のHTMLは三重クォートの文字列としてPythonコード内に直接書き、render_template_stringで描画します。テンプレートファイルを別に用意しなくてよいので、1ファイル構成のまま完結できるわけです。

.activeクラスで選択中カテゴリを目立たせる

  .cats a { text-decoration: none; background: #fff; color: #1f3a5f;
            border: 1px solid #c9d4e4; border-radius: 999px;
            padding: 6px 14px; font-size: 13px; }
  .cats a.active {

カテゴリナビのリンクは白背景の丸いボタン風に整え、選択中のリンクだけ.activeクラスで配色を反転させます。いまどのカテゴリを見ているかが一目で伝わる、小さいけれど効果の大きい工夫です。

プロンプトから作ったコードは、一見動いていても抜けや改善点が潜んでいることがあります。エラーにならない=正しい、ではないのが怖いところです。

そこで、コードを書いたClaude Codeとは別のAIであるCodexに同じコードをレビューさせ、指摘をそのまま載せます。書き手と読み手を別のAIに分けると、自分では気づきにくい問題を洗い出せます。

python app.pyで開発サーバーを起動し、ブラウザで3種類の画面を順に確認しました。まずトップページ/では、4カテゴリ12件のFAQが1つの一覧に表示され、HTTP 200で正常に応答しています。

次に/category/itを開くと、一覧がIT・システム関連の質問だけに絞り込まれました。ナビでは選択中のカテゴリが反転表示になり、いま何を見ているかが分かりやすい状態です。

/category/keihiでも同様に、経費精算のFAQだけが表示されることを確認できました。一連の操作はブラウザ録画にも収めてあり、カテゴリを切り替えると一覧が即座に入れ替わる様子が見て取れます。

Flaskを初めて動かすときに出会いやすいエラーを、原因と対処のセットで整理しました。どれも一般によくあるもので、落ち着いてメッセージを読めば解決できます。

Pythonのエラーは長いTracebackが出て面食らいますが、原因はほぼ最後の1行に集約されています。まず最終行を読み、それでも分からなければ行番号をたどっていくのが近道です。

このアプリで一番ハマりやすいのは、slugの不一致による「静かな失敗」です。絞り込みは文字列の完全一致なので、1文字違うだけでエラーも出ずに0件表示になることがあります。

また、1ファイル構成は学習用として最適ですが、そのまま画面や機能を増やすといずれ管理が苦しくなります。どこで限界が来るかを知っておくと、構成を分割するタイミングを判断しやすいはずです。

この構成の持ち味は、データを差し替えるだけで別用途に転用できることです。CATEGORIESとFAQSを書き換えれば、FAQ以外の「一覧+カテゴリ絞り込み」画面にもそのまま流用できます。

PythonのFlaskを使い、社内FAQをカテゴリ検索できるWebアプリを1ファイルで作りました。データは辞書とリスト、絞り込みは共通関数render_faq_listへの集約という素直な構成で、3種類の画面で表示と絞り込みの動作を確認できています。

設計の要は「slugでURL・データ・表示をつなぐ」「処理を共通関数に寄せる」の2点です。この型を覚えておくと、FAQに限らず一覧+絞り込みの画面全般に応用が利きます。

次のステップとしては、キーワード検索の追加、templatesフォルダへの分割、SQLiteへのデータ移行あたりが手頃な練習になります。まずは手元で動かして、自分の職場のFAQに差し替えてみてください。

参考にした一次情報

1. ^ Flask公式ドキュメント. https://flask.palletsprojects.com/en/stable/, (参照26-07-17).
2. ^ Flask公式クイックスタート(ルーティング・テンプレート). https://flask.palletsprojects.com/en/stable/quickstart/, (参照26-07-17).
3. ^ Jinjaテンプレート公式ドキュメント. https://jinja.palletsprojects.com/en/stable/templates/, (参照26-07-17).

※内容は執筆時点のものです。ライブラリやサイトの仕様は変わる可能性があるため、公式ドキュメントもあわせてご確認ください。

ITやプログラミングに関するコラム

• 
  【CSS】notで複数の件を除外する方法
• 
  【Git】remote設定を変更する方法
• 
  【VBA】コメントアウトを設定する方法
• 
  x86とx64の違いを分かりやすく解説
• 
  マークダウンで改行する方法
• 
  CapsLockキーを解除する方法
• 
  GitLabとGitHubの違いを解説
• 
  Linuxで環境変数を確認する方法
• 
  UbuntuのIPアドレスを確認する方法
• 
  パソコンのメモリの目安を用途別に選ぶ方法

ITやプログラミングに関するニュース

• 
  VercelがAI GatewayにSeedream 5.0 Proを追加、AI SDKのモデル指定で画像生成と編集が可能に
• 
  AWSがAmazon LocationのPlaces APIを強化、住所表記の指定と移動手段別の検索が可能に
• 
  VercelがトレースにTree・Waterfallビューを追加、ログ画面で処理の階層と所要時間を確認可能に
• 
  Googleがエージェント評価の再考を提唱、難易度を情報量で測るDiscovery Benchを解説
• 
  Google CloudがCloud Runサンドボックスを公開プレビューで提供、サービスヘルスは一般提供に
• 
  Google Cloud EMEAが英国金融の重要第三者に指定、イングランド銀行・PRA・FCAの直接監督下に
• 
  AWS DMS Schema ConversionがSQL Serverのオフライン変換に対応、ソースDBへ接続せずスキーマを変換可能に
• 
  EC2 G7インスタンスが米国東部（バージニア北部）で利用可能に、G6比でAI推論性能が最大4.6倍
• 
  SageMaker HyperPodが継続プロビジョニングでのAMIベース構成に対応、S3のスクリプト管理なしでSlurmクラスターを作成可能に
• 
  AWSがEMR on EKSでSparkトラブルシューティングエージェントに対応、失敗ジョブの原因分析を自然言語で依頼可能に