アプリを作ろう--妙高市雪情報グラフ-- 第1回：要件定義書を作るところから始めます

2025年12月31日 14:27

アプリを作ろう──妙高市雪情報グラフ

第1回：要件定義書を作るところから始めます

こんにちは。
この連載では、新潟県妙高市の「雪情報ホームページ」に掲載されている
降雪量・積雪量の表データを、グラフで見られるWebアプリを作っていきます。
最終的には、「年月と地点を選ぶと、妙高市の降雪量・積雪量がグラフで一覧できる」
そんなWebアプリを完成させます。

使う技術は、とてもシンプルです。

Python
Streamlit（PythonだけでWebアプリが作れるライブラリ）

いきなりコードを書き始めるのではなく、
「何を作りたいのか」を整理するところから始めます。

今回はその第1回、
要件定義書を作る回です。
ここでいう「要件定義」は、難しい設計書ではなく、
「このアプリで何ができればOKか」を言葉にしたメモくらいの意味です。

この連載のスタンス

この連載の読者ターゲットは、Pythonでのアプリ作成初心者です。
私も初心者なので、AIを用いたコーディングの体験を共有するイメージで進めます。

分からないところは、まず言葉で整理してAIに投げる
AIの出力は「うまくいった／ズレた」を含めて、そのまま見せる
コードで問題が出たら、その時点で人間が確認・修正する

なぜ、いきなり要件定義なのか？

コードを書く前に「迷子にならない地図」を作るためです。

プログラミング初心者の頃は、

とりあえずコードを書き始める
動かなくなって、何がしたかったか分からなくなる

ということが、よく起こります。

そこで今回は、

まず「やりたいこと」を言葉で整理
それをAIに清書してもらい
設計図（＝要件定義書）として残す

という進め方を取ります。

この設計図があると、
あとから AI Agentにコードを書かせるときも、
人間がコードを確認・修正するときも、迷いにくくなります。

まずは、考えていることをそのまま話す

最初にやったことは、とても雑です。

思いついていることを
まとまりなんて気にせず
口で話して
それをAIで文字起こし

しました。

その「生のテキスト」が、次のコードブロックです。

※ この文字起こしテキストは、誤字脱字や固有名詞の誤変換が含まれます。
今回は「AIで清書して使う前提」で進めるため、あえて手直しせず、そのまま掲載します。
読みにくいですが、この「混沌」こそが最初の状態なので、そのまま載せています。

要件定義（要件を話して、AIテキスト化）

上越市あ間違えた。新潟県。宮古市の。妙講師の。積雪情報のホームページからデータを
読み取って。グラフで表示するアプリケーションを作ります。
環境は？パイソンストリームリッドを使います。妙講師のホームページには月ごとに。 
積雪量と公設量が表になって表されています。
例えば 2025 年 12 月だと。12 月の 1 月から 31 日までの。 積雪量と高設量が
妙皇師の 3 地点。について表形式で記載されています。
このデータを読み取ってストリームリッドでグラフ表示します。降雪量は折れ線グラフで、
積雪量は棒グラフでえ重ねて表示します。 横軸は？日付縦軸は積雪量ないし、公設量とします。
 グラフ表示はデフォルトで。3 つ表示できるようにします。
デフォルトの表示はえ、その月のアプリを開いた月かな？アプリを開いた。月のえ、3 箇所の地点の
設量と積雪量を 3 つに並べて。 グラフにして表示します。え、左側には。粘土と月を選べる。
サイドバーがあって。デフォルトでえ最新付きの 3 箇所のグラフを表示した後はユーザーが
 2 位に。え、2 年度月場所、これを選べるようにしたいです。 
例えばえ昨年 2024 年の 1 月の地点 A 地点 B。3 年の地点 A とかまこういったように、
この 3 つをあのユーザーが 2 で選べて、その 3 つが縦に並んでグラフ表示できるような
そんなイメージです。 以上です。 ホームページの URL は？え CSV ファイルで提供します。 
粘土？月ごと？の URL が書かれています。ですから、そこにアクセスして。え、ホームページから
 HTML から表の部分を取り出してえ、参加者のデータを。グラフ化すればいいと思います。
ユーザーが誤って。え、データがない月データを冬しかないので、夏の月にはデータがないので
え夏の月を指定したり、あるいはユーザーが夏のアプリを開いた場合は当月はデータがありませんと。
 言ったようなエラーが出るようにしてください。 3。
地点の名称は？日本語です。 計測値は？新井消防署。妙高消防署。妙高市役所妙高支所。
この 3 箇所です。この 3 箇所についてえ、公摂量と積雪量が列で。表示されています。

要件定義（AIで文字起こしテキストを清書）

文字起こしテキスト全文をchatGPTに渡して、清書してもらいました。
「新潟県妙高市の雪情報ホームページの表からデータを読み取って、グラフに表示するWebアプリを作る要件定義書を書いてください。仕様は、音声録音をテキスト化した以下の文章を参照してください。雪情報ホームページの一部スクリーンショットもアップします」と指示して、その後にスクショのアップロードとテキスト全文をコピペして送信でOK。

※ ここで掲載する要件定義書は、AIが出力した内容をそのまま載せます（修正しません）。
もし後の回でコード実装中に問題が出たら、その時点で「要件側を直す／実装側で吸収する」を判断します。

※ この要件定義書は、私の「メモリ（記憶）」が残っているChatGPTで作成しました。
そのため、同じ指示でも別の環境（メモリ無し／モデル違いなど）では、出力内容が変わる可能性があります。

# 要件定義書  
## 妙高市 降雪・積雪データ可視化Webアプリ（Streamlit）

---

## 1. 目的
新潟県妙高市の「雪情報ホームページ」に掲載されている  
**月別の降雪量・積雪量（表形式）**を取得し、  
**Python + Streamlit** により **グラフ表示**するWebアプリを作成する。

- 降雪量：折れ線グラフ
- 積雪量：棒グラフ
- 同一グラフ上に重ねて表示する

---

## 2. 対象ユーザー
- 妙高市周辺の積雪状況を把握したい利用者
- 冬季の降雪・積雪の「日別推移」を視覚的に確認したい人
- データ可視化やStreamlitアプリの学習目的の利用者

---

## 3. 対象データ（データソース）

### 3.1 対象ページ
- 妙高市の雪情報ホームページ（月別ページ）
- 月ごとにHTMLの表形式で掲載されている

例：
- 令和7年12月：12月1日〜31日の日別データ

### 3.2 観測地点（固定：3地点）
- 新井消防署
- 頸南消防署
- 妙高市役所 妙高支所

### 3.3 取得項目
各日付について、以下の2項目を取得する。

- 降雪量（観測日の前日分）
- 積雪量（観測日当日分）
- 観測時刻：9時

※ 表中の「-」は欠測値として扱う

### 3.4 URL提供方法
- 年月ごとのページURLは **CSVファイルで提供**される
- アプリはこのCSVを参照して対象URLを取得する

---

## 4. スコープ

### 4.1 実施範囲（やること）
- HTMLページから表データを取得・解析する
- データを構造化（DataFrame化）する
- 年・月・地点を選択できるUIを提供する
- 最大3条件分のグラフを縦に並べて表示する
- データが存在しない月へのエラー対応を行う

### 4.2 対象外（やらないこと）
- ユーザー登録・ログイン機能
- データベースへの永続保存
- 積雪予測や統計分析
- 管理画面の提供

---

## 5. 画面要件（UI）

### 5.1 画面構成
- 1画面構成（Streamlit）
- 左：サイドバー（条件選択）
- 右：メイン表示エリア（グラフ・メッセージ）

### 5.2 サイドバー入力項目
ユーザーは **最大3件** の表示条件を指定できる。

#### 1条件あたりの入力
- 年
- 月
- 観測地点（3地点から選択）

#### デフォルト表示
- アプリ起動時は「最新データが存在する月」の  
  3地点分のグラフを表示する
- 当月にデータが存在しない場合は  
  「当月のデータはありません」と表示する

### 5.3 メイン表示
- 最大3つのグラフを縦方向に並べて表示
- グラフタイトル例  
  - `2025年12月 / 新井消防署`

---

## 6. グラフ要件

### 6.1 軸設定
- 横軸：日付（1〜31）
- 縦軸：降雪量・積雪量（cm）

### 6.2 表示形式
- 降雪量：折れ線グラフ
- 積雪量：棒グラフ
- 同一グラフ内で重ねて表示する

### 6.3 欠測値の扱い
- 「-」は欠測値（NaN）として処理
- グラフ上では非表示（線が途切れる／棒が表示されない）

---

## 7. データ取得・加工要件

### 7.1 HTML解析
- 指定URLへアクセスしHTMLを取得
- 表（table要素）を抽出
- 行・列構造を解析してデータ化する

### 7.2 内部データ形式（推奨）
縦持ち（tidyデータ）で保持する。

| year | month | day | location | snowfall_cm | snowdepth_cm |
|------|-------|-----|----------|-------------|--------------|

- location は日本語名称をそのまま使用
- 欠測値は NaN とする

### 7.3 キャッシュ
- 同一URLへの連続アクセスを避けるため  
  Streamlitのキャッシュ機能を利用する

---

## 8. エラー処理要件

### 8.1 データが存在しない月
- 夏季など、データが存在しない場合：
  - 「この月のデータはありません」と表示
  - グラフは表示しない

### 8.2 ページ取得失敗
- 通信エラー、HTML構造変更などの場合：
  - ユーザー向けに簡潔なエラーメッセージを表示
  - ログには詳細を出力する

### 8.3 入力不整合
- 同一条件を複数選択した場合：
  - 警告表示のみ（処理は継続）

---

## 9. 非機能要件

### 9.1 実行環境
- Python 3.10 以上
- Streamlit

### 9.2 使用ライブラリ（想定）
- requests または httpx
- pandas
- BeautifulSoup または lxml
- Plotly（推奨）または matplotlib

### 9.3 性能
- 初回表示：数秒以内
- キャッシュ後：即時表示に近い体感

---

## 10. 成果物
- Streamlitアプリ（app.py）
- URL一覧CSVファイル
- requirements.txt
- README（使い方・注意点）

---

## 11. 受入条件
1. 年・月・地点を最大3件選択できる
2. 選択条件ごとにグラフが縦に並ぶ
3. 降雪・積雪が指定形式で表示される
4. 欠測値があってもエラーにならない
5. データがない月で適切なメッセージが出る

---

## 12. 補足（実装時に決める事項）
- URL一覧CSVの列定義
- 「最新月」の判定方法
- グラフ描画ライブラリの最終選定

要件定義の確認

AIが書いた要件定義書は、少し冗長な部分はある印象ですが、
今回は AIの実力をそのまま伝えるため、ここでは修正せずこのまま採用します。
細かく書いた方が、イメージ通りのアプリが作れる可能性が高くなるので、このままでも問題はないと思います。
（コードで問題が生じれば、その時点で必要な修正を入れます）

要件定義書を確認して、気がついて追加した要件は次の2点です。

追加1：gitignoreの追加

`.env` やキャッシュファイルを管理対象外にする

追加2：雪データを取得する対象年月リスト

このリストは、「最新数年分」を特定するためのメモとして追加しています。

妙高市の積雪情報 URL
`https://www.city.myoko.niigata.jp/life-info/snow-info/snow/`

取得するデータの年月
令和1年度 降積雪観測(R1.1)
令和1年度 降積雪観測(R1.2)
令和1年度 降積雪観測(R1.3)
令和1年度 降積雪観測(R1.4)
令和1年度 降積雪観測(R1.11)
令和1年度 降積雪観測(R1.12)
令和2年度 降積雪観測(R2.1)
令和2年度 降積雪観測(R2.2)
令和2年度 降積雪観測(R2.3)
令和2年度 降積雪観測(R2.4)
令和2年度 降積雪観測(R2.11)
令和2年度 降積雪観測(R2.12)
令和3年度 降積雪観測(R3.1)
令和3年度 降積雪観測(R3.2)
令和3年度 降積雪観測(R3.3)
令和3年度 降積雪観測(R3.4)
令和3年度 降積雪観測(R3.11)
令和3年度 降積雪観測(R3.12)
令和4年度 降積雪観測(R4.1)
令和4年度 降積雪観測(R4.2)
令和4年度 降積雪観測(R4.3)
令和4年度 降積雪観測(R4.4)
令和4年度 降積雪観測(R4.11)
令和4年度 降積雪観測(R4.12)
令和5年度 降積雪観測(R5.1)
令和5年度 降積雪観測(R5.2)
令和5年度 降積雪観測(R5.3)
令和5年度 降積雪観測(R5.4)
令和5年度 降積雪観測(R5.11)
令和5年度 降積雪観測(R5.12)
令和6年度 降積雪観測(R6.1)
令和6年度 降積雪観測(R6.2)
令和6年度 降積雪観測(R6.3)
令和6年度 降積雪観測(R6.4)
令和6年度 降積雪観測(R6.11)
令和6年度 降積雪観測(R6.12)
令和7年度 降積雪観測(R7.1)
令和7年度 降積雪観測(R7.2)
令和7年度 降積雪観測(R7.3)
令和7年度 降積雪観測(R7.4)
令和7年度 降積雪観測(R7.11)
令和7年度 降積雪観測(R7.12)
令和8年度 降積雪観測(R8.1)

次回予告

次回は、この要件定義書をそのまま使って、
AI Agentにコードを書いてもらう工程に進みます。

どこまで自動で作れるのか、
どこを人間が確認・修正するのか。

その過程も含めて、書いていく予定です。

続く

書いている人について

投稿者の紹介です。
noteでは、次の3つを軸に、日々の学びや記録を残しています。

Python・AI
趣味の開発で試したこと、つまずいた点、学びの記録
健康・からだ
自分自身の不調や気づきをもとにした、学びと養生の記録
生まれ故郷への想い
新潟・妙高（小局）にまつわる歴史や記憶を残すための記録

👉 マイペースで続けている記録はこちら

👉アプリ開発に関するマガジン