プロトアウト年末のお仕事改善制作 Advent Calendar 2025

【個人開発】薬剤師が感染症動向を可視化するWebアプリを作った話 (GAS + Chart.js)

Last updated at 2025-12-14Posted at 2025-12-14

国立感染症研究所が発表している「感染症発生動向調査（IDWR）」の速報データを、直感的に分かりやすく可視化するWebアプリ「Infection Surveillance App」を開発しました。
このアプリは、薬剤師業務支援Webアプリ 「Kusuri Compass」 の1機能として組み込まれています。

バックエンドに Google Apps Script (GAS)、フロントエンドに Chart.js を採用し、完全無料・サーバーレス で運用できる構成にしています。

この記事では、薬剤師としての開発の動機、システム構成、技術的なポイントについて紹介します。

開発の動機

私は普段、薬剤師として働いています。
実は、4か月前まではコードを目にする機会もない、アプリ開発とは無縁の生活を送っていました。

そんな私が開発に取り組んだ理由は、現場で日々感じている「感染症の流行状況によって、医薬品の需要が大きく変わる」という課題を解決したかったからです。

ある感染症が流行すれば、関連する医薬品の需要が急増します。このとき準備が遅れれば「欠品」を招き、最悪の場合、患者さんの治療に影響が出てしまいます。
特に昨今は医薬品の供給不安が続いており、「必要な医薬品を、必要な量だけ事前に確保すること」は、私たち薬剤師にとって非常に重要なミッションとなっています。

国立感染症研究所が発表するIDWR（感染症発生動向調査）は、こうした需要予測のための重要な情報源です。しかし、元データはPDFやCSV形式で提供されており、忙しい業務の合間に「今、どの地域で何が流行り始めているのか？」「先週と比べてどう変化したのか？」を瞬時に把握するのは困難でした。

そこで、「地図で流行状況をパッと一覧でき、クリック一つで詳細なトレンドが見られるツール」があれば、医薬品の適正な在庫管理（需要予測）に役立つのではないかと考え、このアプリを開発しました。

作ったもの

感染症動向可視化システム (Infection Surveillance App)

主な機能は以下の通りです。

全国感染症動向の可視化: インフルエンザ、COVID-19、急性呼吸器感染症 (ARI) に加え、手足口病やRSウイルス感染症など、その他の主要な5類感染症の状況も確認可能にしました。
地域別タイルマップ: 日本地図を地域ブロック（東北、関東など）に分け、流行レベル（注意報・警報など）を色分け表示。各ブロックをクリックすると、地域内の都道府県別詳細データが表示されます。
過去データ比較機能: グラフ上で「今年」と「過去の年」のデータを重ねて表示し、例年と比較して流行が早いか遅いかを一目で判断できるようにしました。
県別トレンドグラフ: 地域別詳細パネルや地図上の都道府県名をクリックすると、その都道府県の週次推移を表示。
その他の感染症一覧: 主要3疾患（インフルエンザ、COVID-19、ARI）以外の感染症について、都道府県別に週次推移グラフを一覧表示できる機能。
自動更新: 毎週発表されるデータを自動で取得・反映。

システム構成

個人開発として運用コストをかけないため、以下の構成を採用しました。

Frontend: HTML5, CSS3, JavaScript (Vanilla JS), Chart.js
Backend: Google Apps Script (GAS), Google Sheets
Infrastructure: GitHub Pages (フロントエンド), Google Drive (データ保存: GASの中間処理で利用)

処理の流れ

データ収集 (GAS):
- 毎週木曜日にトリガー実行。
- 国立感染症研究所のWebサイトから最新のCSVデータ（速報）をダウンロード。
データ保存・API提供 (GAS):
- 取得した最新CSVデータを解析し、Googleスプレッドシート（中間DB）に書き込み。
- 過去データも同様に処理し、年別にGoogleドライブにアーカイブ。
- GASの doGet 関数を利用してWebアプリとして公開し、フロントエンドからのリクエストに対し、最新データや過去データをJSON形式で返却するAPIを提供。
可視化 (Frontend):
- GASのWebアプリURLからデータを非同期取得。localforage を利用し、取得データをユーザーのブラウザに24時間キャッシュすることで、高速表示とAPIリクエスト数の抑制を実現。
- Chart.jsを用いてグラフや地図を描画。

技術的なポイント

1. GASを簡易バックエンドAPIとして利用する

GASの Web Apps 機能を使うと、簡単にAPIを作成できます。今回は doGet 関数でGoogleスプレッドシートやGoogleドライブ上のデータを加工し、JSON形式で出力するAPIを構築しました。

Code.gs

function doGet(e) {
  const type = e.parameter.type;
  let responseData;

  if (type === 'latest') {
    // 最新の定点、ARI、当該週の当該疾患データを取得しJSONで返す
    responseData = getLatestDataAsJson_(); 
  } else if (type === 'history') {
    // 過去のアーカイブデータを取得しJSONで返す
    responseData = getHistoryDataAsJson_();
  } else if (type === 'combined') {
    // latestとhistoryを組み合わせたデータをJSONで返す
    responseData = getCombinedDataAsJson_();
  } else {
    return ContentService.createTextOutput(JSON.stringify({ error: 'Invalid type parameter' }))
      .setMimeType(ContentService.MimeType.JSON);
  }

  return ContentService.createTextOutput(JSON.stringify(responseData))
    .setMimeType(ContentService.MimeType.JSON);
}

2. 定期実行によるデータ取得の自動化

GASの「トリガー」機能を利用し、データ更新日に合わせてスクリプトを自動実行しています。

// 毎週木曜日 18:00 に実行
ScriptApp.newTrigger('main')
  .timeBased()
  .onWeekDay(ScriptApp.WeekDay.THURSDAY)
  .atHour(18)
  .create();

また、元データの更新ページから正規表現を使って最新の「年」と「週」を特定し、動的にダウンロードURLを生成するロジックを実装することで、メンテナンスフリーな運用を目指しました。

3. Chart.js と地域別タイルマップの連携

フロントエンドでは、日本を地域ブロック（北海道、東北、関東、中部、関西、中国、四国、九州・沖縄）に分け、各ブロックのSVG矩形要素に対して、データの値（定点当たり報告数）に応じた色を動的に設定しています。

インフルエンザ: 30.0以上で赤（警報）、10.0以上でオレンジ（注意報）、1.0以上で黄（流行入り）
COVID-19: 15.0以上で赤（警報レベル相当）、10.0以上でオレンジ（注意報レベル相当）
急性呼吸器感染症 (ARI): 120.0以上で赤（流行レベル）、80.0以上でオレンジ（注意が必要）

地図上の地域ブロックをクリックすると、右側のパネルに地域内の都道府県別詳細データ（棒グラフ）が表示され、さらに都道府県名をクリックするとその県の週次推移グラフ（Chart.js）を描画します。

こだわりポイント

比較しやすいグラフ表現:
- Y軸の統一: 都道府県ごとのグラフを表示する際、Y軸の最大値を全国最大値に合わせることで、地域間の流行レベルの差を直感的に比較できるようにしました。
- 過去データの重ね合わせ: 当年のデータに加え、過去のデータをグレーアウトして重ねて表示。凡例をクリックすることで特定の年のデータを強調表示できるインタラクティブな機能も実装しました。
インタラクティブなUI: 地図からグラフへの遷移をスムーズにし、ユーザーがストレスなく詳細情報を掘り下げられるようにしました。
キャッシュ機能: localforage を用いて、取得したデータをブラウザに30分キャッシュ。これにより、表示の高速化とAPIリクエストの削減を実現しました。
エラーハンドリング: スクレイピングやデータ取得は相手先サイトの構成変更などで失敗する可能性があるため、リトライ処理やログ出力を実装しています。

まとめ

GASとGoogleスプレッドシートを組み合わせることで、サーバー代をかけずに実用的なデータ可視化アプリを作ることができました。

今回の開発における総コード行数は、HTML/CSS/JavaScript/GASを合わせて 約12,100行 に達しました。
4ヶ月前まではプログラミング未経験だった私がここまで作り上げることができたのは、生成AIによるコーディング支援 があったからこそです。
非エンジニアであっても、アイデアとAIの力を組み合わせれば、現場の課題を解決する実用的なアプリケーションを自分の手で作り出せる時代になったと実感しています。

【Kusuri Compass】のご紹介

今回の感染症動向アプリのように、私は薬剤師の業務をサポートするツールをいくつか開発しています。
それらをまとめたポータルサイト 「Kusuri Compass」 も公開していますので、もしよろしければ覗いてみてください。

Kusuri Compass

参考

国立感染症研究所感染症発生動向調査 (IDWR)
Chart.js Documentation
Google Apps Script Reference

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up