✨️ オープンデータの資料作成 by takerucam · Pull Request #39 · jigintern/study_session_materials

takerucam · 2026-04-10T06:09:33Z

slide.html をローカルで開いてスライドを見ながらすすめてください
その中で不備があったら教えてほしいです

福井恐竜博物館おでかけプランナーを題材にした教材・サンプル・テンプレートを追加し、ハンズオンをそのまま始められる状態にする。

教材一覧と GitHub Pages のビルド対象に 2026 年のオープンデータ講座を登録し、公開ページへ辿れるようにする。

Copilot

Pull request overview

2026 年向けの「オープンデータで課題を解決する Web アプリ開発」教材一式（スライド・配布資料・完成版デモ・ハンズオン用テンプレート）を追加し、GitHub Pages で公開できるようにする PR です。

Changes:

2026/open-data に教材（slide.md/handout/README/CODE_REFERENCE）と完成版デモ（index/app/map/open-meteo/styles）を追加
ハンズオン開始用の template/（同梱 HTML/CSS/JS）を追加
gh-pages ワークフローとリポジトリ README の資料一覧に 2026 open-data を追加

Reviewed changes

Copilot reviewed 17 out of 22 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
README.md	2026 年作成の教材リンクを追加
.github/workflows/gh-pages.yml	open-data-2026 のスライド生成・公開を追加
2026/open-data/README.md	教材全体の仕様/構成/進め方を記載
2026/open-data/slide.md	講義スライド（Marp）を追加
2026/open-data/handout.md	参加者向け配布資料を追加
2026/open-data/CODE_REFERENCE.md	テンプレと完成版の参照導線を追加
2026/open-data/index.html	完成版デモの UI 骨格を追加
2026/open-data/app.js	完成版デモのロジック（fetch/Chart/Papa Parse 等）を追加
2026/open-data/styles.css	完成版デモのスタイルを追加
2026/open-data/map.html	Leaflet を使った地図デモを追加
2026/open-data/open-meteo.html	Open-Meteo 単体デモ（グラフ+表）を追加
2026/open-data/template/*	ハンズオン開始用テンプレ一式を追加

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

メイン index は予約人数のみでおすすめ日を並べる旨に修正し、予報との組み合わせは発展のヒントであることを明記した。

- オープンデータ表示 Web アプリとレポート（理由・データ選択・表示形式）の2点を明記 - slide.md の本編末尾に配置（付録からは削除） - 表の整形を含む README の体裁調整

m-sato-310 · 2026-04-14T02:40:06Z

+### 第3章：Chart.js で棒グラフを表示する（60 分）
+
+「数字の羅列では判断できない」から、グラフが必要になります。ここで **Chart.js** が登場します。
+
+#### Step 1：固定データで棒グラフを描いてみる
+
+[`template/`](./template/) をコピーしたフォルダで作業します。テンプレートの **`app.js` は骨格・定数・デモ・補助関数・`main()` を含み、パート4以降で追加する関数（`[4-*]`〜`[8-*]`）はブロックごとにコメントアウトされています。**`index.html` では Chart.js を先に読み込んでから `app.js` を読み込みます。
+
+スライドを見ながら、**`app.js` にコードを入力**して固定データの棒グラフを表示します（スライドでは `data` オブジェクトの形も説明します）。
+
+**確認ポイント**
+
+- [ ] 棒グラフが 5 本表示されるか
+- [ ] ラベル（5/1〜5/5）が横軸に表示されるか
+- [ ] Console にエラーがないか


ここの確認ポイントは、app.jsには3本分しか含まれていないので以下の記述になりそうです。

Suggested change

### 第3章：Chart.js で棒グラフを表示する（60 分）

「数字の羅列では判断できない」から、グラフが必要になります。ここで **Chart.js** が登場します。

#### Step 1：固定データで棒グラフを描いてみる

[`template/`](./template/) をコピーしたフォルダで作業します。テンプレートの **`app.js` は骨格・定数・デモ・補助関数・`main()` を含み、パート4以降で追加する関数（`[4-*]`〜`[8-*]`）はブロックごとにコメントアウトされています。**`index.html` では Chart.js を先に読み込んでから `app.js` を読み込みます。

スライドを見ながら、**`app.js` にコードを入力**して固定データの棒グラフを表示します（スライドでは `data` オブジェクトの形も説明します）。

**確認ポイント**

- [ ] 棒グラフが 5 本表示されるか

- [ ] ラベル（5/1〜5/5）が横軸に表示されるか

- [ ] Console にエラーがないか

### 第3章：Chart.js で棒グラフを表示する（60 分）

「数字の羅列では判断できない」から、グラフが必要になります。ここで **Chart.js** が登場します。

#### Step 1：固定データで棒グラフを描いてみる

[`template/`](./template/) をコピーしたフォルダで作業します。テンプレートの **`app.js` は骨格・定数・デモ・補助関数・`main()` を含み、パート4以降で追加する関数（`[4-*]`〜`[8-*]`）はブロックごとにコメントアウトされています。**`index.html` では Chart.js を先に読み込んでから `app.js` を読み込みます。

スライドを見ながら、**`app.js` にコードを入力**して固定データの棒グラフを表示します（スライドでは `data` オブジェクトの形も説明します）。

**確認ポイント**

- [ ] 棒グラフが 3 本表示されるか

- [ ] ラベル（5/1〜5/3）が横軸に表示されるか

- [ ] Console にエラーがないか

2026/open-data/slide.md:257 では labels: ["5/1", "5/2", "5/3"], 2026/open-data/slide.md:307では「サンプル 3 日分の棒グラフが画面に出る」という記述があるので、3日に合わせるで良さそうです。

修正しました

kamekyame

スライド中心に確認しました！気になったところをコメントしましたが全体的に良さそうに思いました 🙏

m-sato-310 · 2026-04-14T08:34:05Z

+| #   | 内容                                                       | 時間 |
+| --- | ---------------------------------------------------------- | ---- |
+| 1   | **VSCode を使ってみよう** ― 開発の準備をする               | 15分 |
+| 2   | **Web の三本柱** ― HTML・CSS・JavaScript                   | 15分 |
+| 3   | **問いを立てる** ― 身近な問題から考える                    | 45分 |
+| 4   | **Chart.js でグラフ** ― データを見える化する               | 55分 |
+| 5   | **fetch と async/await** ― データを自動で取得する          | 55分 |
+| 6   | **観光スポット一覧** ― DOM 操作と filter                   | 45分 |
+| 7   | **色分けと TOP 3** ― 直感的な UI を作る                    | 30分 |
+| 8   | **公開 API でおすすめ日を作る** ― CSV のつぎに JSON を足す | 40分 |
+| 9   | **改善タイム・発表** ― グループ内で共有                    | 60分 |


slide.mdと handout.mdの賞番号が一致しておらず、並べてみるときに読みにくいかなと思いました。

スライドの方に合わせてみたパッチを作ってみました。

test.patch

修正しました

修正ありがとうございます🙏

- 「正解」を「完成版」に統一（CODE_REFERENCE / README / handout） - ハンズオン確認ポイントをサンプル（3 本・5/1〜5/3）に合わせて修正 - スライド: 章タイトル・VSCode コマンド表記・Chart.js 表現・Open-Meteo 見出しなどを調整 - handout の表・コードブロックの整形

- 「はじめに：Web の三本柱」→ 第2章に昇格 - 旧第1章・第2章（問い関連2節）→ 第3章：問いを立てるに統合 - 旧第3〜8章 → 第4〜9章に繰り上げ（タイトル・時間も slide に統一） - 第1章：VSCode を使ってみようを新規追加（拡張機能・設定・使い方）

kamekyame

修正ありがとうございます！自分のコメント部分は大丈夫そうでした LGTM

koduno · 2026-04-15T09:08:19Z

不備はなさそうでした 🙏
スライドとhandout資料を進めていったのですが、コメントアウトを外すだけでコードが出来上がってしまったので体験としては微妙かなと思ってしまいました。ただ説明の方法にもよるので...と感じました

takerucam · 2026-04-15T09:23:39Z

不備はなさそうでした 🙏 スライドとhandout資料を進めていったのですが、コメントアウトを外すだけでコードが出来上がってしまったので体験としては微妙かなと思ってしまいました。ただ説明の方法にもよるので...と感じました

ありがとうございます🙏

コメントアウトを解除するだけというのは確かにそうなのですが、目的としてはコーディングもだけどそれよりも身近な課題をデータを使って解決する方法を学んでほしい（プロコンに活かしてほしい）というのもありコーディングはなるべくしないようにしました（その分課題でがっつり書いてもらいます）。それと学生の中にはタイピングが苦手な子もいることを考慮して今回はこういう形にしました。

takerucam · 2026-04-15T09:34:54Z

と思ったけど、さすがに全部コメントアウト解除はおもしろくないので一部穴埋め問題的なものを用意してみるか🤔

テンプレートの穴埋め進行に合わせて app.js に授業用の有効化判定・フォールバック・weatherScore を揃え、両ファイルの各関数に説明コメントを追加した。配布資料・スライド・生成 slide.html と template README を記述／解除の進め方に合わせて更新した。

m-sato-310

ありがとうございます。
全体を通して読んでみて問題なさそうです。LGTMです。

koduno

LGTMですmm

takerucam · 2026-04-17T00:28:17Z

レビューありがとうございました、マージしちゃいます

takerucam marked this pull request as ready for review April 10, 2026 06:11

takerucam marked this pull request as draft April 10, 2026 06:11

takerucam force-pushed the miyake/add-open-data branch from 375354b to ba26c9d Compare April 13, 2026 05:08

takerucam added 2 commits April 13, 2026 17:34

✨ オープンデータ講座の教材一式を追加

5b69ec8

福井恐竜博物館おでかけプランナーを題材にした教材・サンプル・テンプレートを追加し、ハンズオンをそのまま始められる状態にする。

🚀 オープンデータ講座の公開導線を追加

34da809

教材一覧と GitHub Pages のビルド対象に 2026 年のオープンデータ講座を登録し、公開ページへ辿れるようにする。

takerucam force-pushed the miyake/add-open-data branch from ba26c9d to 34da809 Compare April 13, 2026 08:35

takerucam marked this pull request as ready for review April 13, 2026 08:37

takerucam changed the title ~~オープンデータの資料作成~~ ✨️ オープンデータの資料作成 Apr 13, 2026

takerucam requested a review from Copilot April 13, 2026 09:36

Copilot started reviewing on behalf of takerucam April 13, 2026 09:37 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

takerucam added 6 commits April 14, 2026 09:16

fix(open-data): open-meteo の TOP 3 説明を slide と整合

5fc3872

メイン index は予約人数のみでおすすめ日を並べる旨に修正し、予報との組み合わせは発展のヒントであることを明記した。

不要なファイルを削除

7782421

fix(open-data): 地図ポップアップを DOM 組み立てにし CSV 由来の XSS を防止

7338f0f

docs(open-data): template/app.js の説明を実態に合わせる（骨格あり・パートブロックはコメントアウト）

b57ae85

refactor(open-data): formatDateLabel で未使用の年を分割代入から省略

7b07da7

m-sato-310 reviewed Apr 14, 2026

View reviewed changes

koduno reviewed Apr 14, 2026

View reviewed changes

Comment thread 2026/open-data/slide.md

Comment thread 2026/open-data/slide.md Outdated

Comment thread 2026/open-data/slide.md

kamekyame reviewed Apr 14, 2026

View reviewed changes

koduno reviewed Apr 14, 2026

View reviewed changes

Comment thread 2026/open-data/slide.md

Comment thread 2026/open-data/slide.md

m-sato-310 reviewed Apr 14, 2026

View reviewed changes

takerucam added 2 commits April 15, 2026 11:44

kamekyame approved these changes Apr 15, 2026

View reviewed changes

m-sato-310 approved these changes Apr 16, 2026

View reviewed changes

koduno reviewed Apr 16, 2026

View reviewed changes

Comment thread 2026/open-data/slide.md Outdated

open-data: 目次表直後の Day 1/2 行を削除（HTML で表示されないため）

5a13fc0

koduno approved these changes Apr 17, 2026

View reviewed changes

takerucam merged commit af5791f into main Apr 17, 2026

Conversation

takerucam commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

m-sato-310 Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

takerucam Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kamekyame left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

m-sato-310 Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

takerucam Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

m-sato-310 Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

kamekyame left a comment

Choose a reason for hiding this comment

Uh oh!

koduno commented Apr 15, 2026

Uh oh!

takerucam commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

takerucam commented Apr 15, 2026

Uh oh!

m-sato-310 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

koduno left a comment

Choose a reason for hiding this comment

Uh oh!

takerucam commented Apr 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

takerucam commented Apr 10, 2026 •

edited

Loading

takerucam commented Apr 15, 2026 •

edited

Loading