![](https://img.sabae.cc/data/20240126/11b0c89c-e3d9-4a29-b931-5e854265f070.jpg)
産食率をご存知ですか?
産食率とは、Food Hub Project 神山が提唱する「地域で育てて、地域で食べている」割合(%)。カロリーや生産額ではなく、学校給食などで用いられる「食材品目数(町内産)÷ 食材品目数(総合計)」で算出されています。
![](https://img.sabae.cc/data/20240126/00792753-2acb-48c7-9956-45522ddaaadb.jpg)
産食率66%、ステキな日替わりランチ、!なかなかタイミングが合わず、初めていただきました。
![](https://img.sabae.cc/data/20240126/b08d7b2a-ef77-4fe6-8450-447f6b89c33b.jpg)
「産食率ダッシュボード」 data and src on GitHub
産食率のグラフを作らせてほしいとお話ししたところ、快諾いただいたのでダッシュボードを作成。産食率、鯖江や他の地域でもどうでしょう?
JavaScriptによるスクレイピング&CSV出力するプログラムはこんな感じです。
import { fetchOrLoad } from "https://js.sabae.cc/fetchOrLoad.js";
import { HTMLParser } from "https://js.sabae.cc/HTMLParser.js";
import { Day } from "https://js.sabae.cc/DateTime.js";
import { CSV } from "https://js.sabae.cc/CSV.js";
const url = "http://foodhub.co.jp/eat/self_sufficient/";
const html = await fetchOrLoad(url);
const dom = HTMLParser.parse(html);
const items = dom.querySelectorAll(".list-self_sufficient-archive li");
const data = [];
for (const item of items) {
const average = item.querySelector(".avarage")?.text; // average?
if (!average) continue;
const url = item.querySelector(".figure img").getAttribute("src");
const year = url.split("/")[6];
const date0 = item.querySelector(".title").text;
const date = year + "年" + date0.substring(0, date0.length - 1);
console.log(date, average);
data.push({ week: new Day(date).toString(), average });
}
await Deno.writeTextFile("sansyoku-rate_kamiyama_kamaya.csv", CSV.stringify(data));
HTMLの要素名などは、Chromeで開いて、右クリック、検証でOK!
![](https://img.sabae.cc/data/20240126/12190ab0-34ce-4b6f-9f73-760bdce88664.jpg)
クラス名やタグ名を使って必要な要素をクエリー(querySelector/querySelectorAll)して取得しデータにして、CSVとして書き出します。あとはGitHub Pagesで公開して、ApexChartsでグラフ化してダッシュボードアプリ完成!
![](https://img.sabae.cc/data/20240126/f66ca006-b27c-4fb6-98d0-dd34082e7507.jpg)
朝、鯖江を出発!
![](https://img.sabae.cc/data/20240126/a386434b-4c8d-4ff0-b0f8-da320d69c679.jpg)
バスから見えた太陽の塔!
![](https://img.sabae.cc/data/20240126/fecb00fc-6511-4539-802c-79e0da6f5278.jpg)
休憩スポットで名産ゲット!
![](https://img.sabae.cc/data/20240126/ee1956bf-3a89-4769-b179-ca82e2609d4a.jpg)
徳島県神山町、神山まるごと高専から車で数分、Food Hub Project 神山、かま屋!
![](https://img.sabae.cc/data/20240126/b064a3d2-0431-4af1-a078-dbcfef126b9a.jpg)
机の上に気になる冊子、産食率と食材に関するデータが紹介されていたのが産食率。
![](https://img.sabae.cc/data/20240126/b448213a-1123-4617-afa1-f196f6781b68.jpg)
おいしそうなドリンク。ホットにもできるのがうれしい!選んだのはもちろん・・・。
![](https://img.sabae.cc/data/20240126/60d44b9f-7ff6-4fb4-84bc-2a491dbacb9f.jpg)
落ち着けるステキな店内。電源も使えて、仕事も捗ります!
![](https://img.sabae.cc/data/20240126/d737a477-1ebe-4634-b75b-5ac8258feec3.jpg)
神山まるごと高専へ寄って、突如開催、ウェブ開発、ミニ講座!
![](https://img.sabae.cc/data/20240126/a4179cfe-f8ae-4b1e-8885-ac15276808ba.jpg)
夕食の時間、これが噂のごはん神山盛り!
![](https://img.sabae.cc/data/20240126/01892a3d-3cb4-46cb-a30f-8d4116119497.jpg)
親御さんも安心という、栄養抜群の寮のご飯!
![](https://img.sabae.cc/data/20240126/4798825e-fe0f-4263-a78b-9a05a24ffd5e.jpg)
案内してもらった、高専生が設置したイルミネーション!
![](https://img.sabae.cc/data/20240126/56bb2f1e-d3e5-457a-91df-fa8e35b685f7.jpg)
始まってもうすぐ1年、みんなたくましく育ってます!