3.10 天気予報

navigator.geolocation.getCurrentPosition((position) => {
  const { latitude, longitude } = position.coords;
  // 最も近い地点を探して、予報を表示する（次項）
}, (error) => {
  // 許可されなかった、特定できなかった、時間切れのいずれか
  const reasons = {
    1: '位置情報の利用が許可されませんでした。',
    2: '現在地を特定できませんでした。',
    3: '位置情報の取得が時間切れになりました。',
  };
}, { enableHighAccuracy: false, timeout: 12000, maximumAge: 60000 });

function distance(latitude, longitude, spot) {
  const radians = (value) => value * Math.PI / 180;
  const a = Math.sin(radians(spot.lat - latitude) / 2) ** 2
    + Math.cos(radians(latitude)) * Math.cos(radians(spot.lat))
    * Math.sin(radians(spot.lon - longitude) / 2) ** 2;
  return 6371 * 2 * Math.asin(Math.sqrt(Math.min(1, a)));
}

const response = await fetch(url, {
  signal: controller.signal, credentials: 'omit', redirect: 'error',
  referrerPolicy: 'no-referrer', cache: refresh ? 'reload' : 'default',
});
if (!response.ok) {
  throw new Error(`気象庁XMLの取得に失敗しました（HTTP ${response.status}）。`);
}
const xml = parseXml(await response.text());

const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 20000);
try {
  const response = await fetch(url, { signal: controller.signal });
  // （中略）
} catch (error) {
  if (error.name === 'AbortError') {
    throw new Error('通信が20秒以内に完了しませんでした。処理を終了しました。');
  }
  if (error instanceof TypeError) {
    throw new Error('気象庁XMLに接続できません。回線・ブラウザの通信制限を確認してください。');
  }
  throw error;
} finally {
  clearTimeout(timer);
}

<Report xmlns="http://xml.kishou.go.jp/jmaxml1/">
  <Control>
    <Status>通常</Status>
    <PublishingOffice>福岡管区気象台</PublishingOffice>
  </Control>
  <Head>
    <ReportDateTime>2026-10-24T11:00:00+09:00</ReportDateTime>
    <InfoType>発表</InfoType>
  </Head>
  <Body>
    <MeteorologicalInfos type="区域予報">
      <TimeSeriesInfo>
        <TimeDefines>
          <TimeDefine timeId="1"><DateTime>2026-10-25T00:00:00+09:00</DateTime></TimeDefine>
          <TimeDefine timeId="2"><DateTime>2026-10-26T00:00:00+09:00</DateTime></TimeDefine>
        </TimeDefines>
        <Item>
          <jmx_eb:Weather type="基本天気" refID="2">雨</jmx_eb:Weather>
          <jmx_eb:ProbabilityOfPrecipitation type="日降水確率" unit="%" refID="2">90</jmx_eb:ProbabilityOfPrecipitation>
          <Area><Name>福岡県</Name><Code>400000</Code></Area>
        </Item>
      </TimeSeriesInfo>
    </MeteorologicalInfos>
    <MeteorologicalInfos type="地点予報">
      <TimeSeriesInfo>
        <Item>
          <jmx_eb:Temperature type="最低気温" unit="度" refID="1" condition="値なし"/>
          <jmx_eb:Temperature type="最低気温" unit="度" refID="2">21</jmx_eb:Temperature>
          <jmx_eb:Temperature type="最高気温" unit="度" refID="2">26</jmx_eb:Temperature>
          <Station><Name>福岡</Name><Code>82182</Code></Station>
        </Item>
      </TimeSeriesInfo>
    </MeteorologicalInfos>
  </Body>
</Report>

const nodes = (root, name) => Array.from(root.getElementsByTagNameNS('*', name));

function parseXml(text) {
  const xml = new DOMParser().parseFromString(text, 'application/xml');
  if (first(xml, 'parsererror')) throw new Error('XMLの形式が正しくありません。');
  return xml;
}

let requestId = 0;

async function showForecast(refresh = false) {
  const id = ++requestId;          // この要求の番号
  // （中略）取得中は、旧都市の予報を消しておく
  try {
    const result = readForecast(xml, spot);
    if (id !== requestId || stopped) return;   // 古い要求なら、表示せずに捨てる
    render(result, spot, url);
  } catch (error) {
    if (id !== requestId || stopped) return;
    status(error.message, true);
  }
}

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; connect-src https://www.data.jma.go.jp/developer/xml/; img-src data:; base-uri 'none'; form-action 'none'">

function allowedUrl(value) {
  const url = new URL(value);
  if (url.origin !== 'https://www.data.jma.go.jp'
    || !/^\/developer\/xml\/(feed|data)\/[A-Za-z0-9_.-]+\.xml$/.test(url.pathname)
    || url.search || url.hash || url.username || url.password) {
    throw new Error('許可されていないXML取得先です。');
  }
  return url.href;
}

# 天気予報ツール

# 目標
- 現在地の週間天気予報を表示する。

# ツール名称
天気予報ツール

# プログラム・ファイル名
weeklyWeather.html

# プロジェクト・フォルダ作成
- プログラム・ファイル名の拡張子を除いた主ファイル名と同じ名前のサブフォルダを作成し、以降の作業はサブフォルダで行う。
- すでにサブフォルダがあれば、そのサブフォルダに移動して以降の作業を進める。

## 画面構成と処理
- プログラム上部にツール名称、バージョン番号、著作権者を記載する。
- 現在、デバイスがいる位置情報を取得し、その地点に近い都市の週間天気予報を表示する。
- プルダウンで、地方、都道府県、都市名を選択し、その都市の週間天気予報を表示する。
- 処理は、`https://www.pahoo.org/e-soul/webtech/php06/php06-72-01.shtm` にあるPHPプログラムを参考にする。気象庁防災情報XMLを参照する。

## 記録
- なし

## 通信
- 気象庁防災情報XMLのみと通信する。

## 例外・エラー処理
- 無限ループに陥ったり、システム・エラーが出たときは、画面にエラー情報を表示して終了すること。

# テスト観点・合格条件
- Codexは、ランダムに都市名を5つ選択し、週間天気予報が画面に表示されることと、その内容が気象庁発表の予報と合致することを検証する。
- 前提条件、制約条件が守られていること。

# 前提条件
- 仕様変更があった場合は、本書を更新する。
- バージョン番号、著作権者、MIT Licenseであることを画面に表示する。
- 仕様で分からないことがあり、その違いが実装結果へ大きく影響する場合はユーザーに質問する。
- 安全かつ合理的に判断できる軽微な事項は、判断内容を明記して作業を進める。
- HTML、CSS、JavaScriptを1つのHTMLファイルに記述する。
- クライアントPCのブラウザで動作し、スマートフォンでも利用できること。
- HTTPサーバーやNode.jsなどのサーバー技術は使用せず、ブラウザの機能だけで完結すること。
- コーディングは「Airbnb JavaScript Style Guide」に可能な限り準拠すること。
- プログラムファイルのコメントに、名称、バージョン、目的、動作環境、著作権表示および使用条件、インストール方法、お問い合わせを記載すること。

# 制約条件
- 気象庁防災情報XML以外とのデータ送受信は行わないこと。
- 外部ライブラリを使用する場合は、下記のサイトに限定すること
  https://cdn.jsdelivr.net/
  https://cdnjs.cloudflare.com/
  https://ajax.googleapis.com/
  https://code.jquery.com/
  https://ajax.aspnetcdn.com/
- プログラムがMIT Licenseおよび第三者の権利に違反していないこと。
- ユーザーの許可なくプロジェクトフォルダ外のファイルを変更しないこと。
- ユーザーの許可なく既存ファイルを削除しないこと。
- Gitの履歴を破壊する操作を行わないこと。

# 合格判定
- すべての実装とテストが完了したら、テスト結果を一覧で表示する。
- 合格項目、不合格項目、未確認項目を明確に区別する。
- 不合格項目がある場合は原因と修正方針を表示する。
- 未確認項目がある場合は未確認の理由とユーザーによる確認方法を表示する。
- テスト結果を表示した後、合格としてよいかユーザーに質問する。
- ユーザーが合格と回答するまでは、Gitへの最終コミットと配布用ZIPファイルの作成を行わない。
- ユーザーが不合格と回答した場合は、指摘内容を修正して再テストする。

# 簡易取扱説明書の作成
- HTMLファイルと同じ場所に、簡易取扱説明書「README.txt」を作成する。
- 説明書には「プログラムの名称」「バージョン」「目的」「動作環境」「著作権表示および使用条件」「インストール方法」「使い方」「操作方法」「成績の保存」「既知の制限」「変更履歴」「お問い合わせ」を含める。
- インストール方法には、ZIPファイルを展開し、本ツールをブラウザで直接開く手順を記載する。
- マウス、キーボード、画面タッチの操作方法を記載する。

# 著作権表示および使用条件
このプログラムは OpenAI社の Codex によって作成し、作者が動作を確認しました。
このプログラムは外部とのデータ通信を行いません。

本アプリケーションはMIT Licenseです。
商用を含む無償利用が可能です。自由に改造できます。
再配布の際は、下記の著作権表記、URLおよび本使用条件を必ず明記してください。

Copyright by (c)studio pahoo
https://www.pahoo.org/

MITライセンスについては、下記のリンク先を参考にしてください。
http://ja.wikipedia.org/wiki/MIT_License
http://www.opensource.org/licenses/mit-license.php

なお、本アプリケーションの利用または改造によって生じた得失については一切関知いたしません。また、二次利用先の組織・企業・団体の目的・内容・活動については一切関知いたしません。

# お問い合わせ
ぱふぅ家のホームページ
https://www.pahoo.org/

- サイト案内
  - お問い合わせ

# リソース管理
- 作業開始前に、今回の作業が「新規作成（評価用）」「新規作成（配布用）」「メジャーバージョンアップ」「マイナーバージョンアップ」「不具合修正」のどれに該当するかユーザーに質問する。
- 新規作成（評価用）は0.1.0、新規作成（配布用）は1.0.0とする。メジャー、マイナー、不具合修正は既存バージョンを確認して適切に更新する。
- 既存バージョンを確認できない場合は推測せずユーザーに質問する。
- 決定したバージョン番号をツール、README.txt、本書、配布用ZIPファイル名へ反映する。
- ユーザーがテスト結果を合格と判定した後、プログラム、README.txt、本書、および必要なカード画像をGitへコミットする。
- Gitリポジトリが存在しない場合やコミットできない場合は、勝手に新規リポジトリを作成せず、理由を報告して指示を求める。
- コミットメッセージには、プログラム名、バージョン番号、変更区分が分かる内容を使用する。

# 配布ファイルの作成
- ユーザーがテスト結果を合格と判定した後、ツール、README.txt、本書を1つのZIPファイルに圧縮する。
- ZIPファイル名は「プログラム・ファイル名（拡張子を除く）_バージョン番号.zip」とする。
- ZIPファイル内に一時ファイル、テスト用ファイル、Git管理ファイル、デバッグ専用ファイルを含めない。
- 完了後、作成したZIPファイルの絶対パスをユーザーに伝える。