とうほくプロコン2025のテーマ部門「魚好きを増やせ！」の最優秀賞は、SICA-HEAL（しかへる）
「しかへる」とは、津軽弁で「教える」を意味するとのこと。
大きなマグロの切り分けできるぬいぐるみを使ってのARゴーグルでの調理支援実演！
IchigoJamを使ったピカピカ光るメガネもあって、盛りだくさん！
ゴーグルとメガネを使って、可愛く楽しくお魚好きに！
「SICA-HEAL」
しかへるは、GitHub Pagesで公開されているウェブアプリ。旬を伝えるオリジナルお魚データ data.json を発見！
「旬図鑑 お魚編」
data.json をJavaScriptのfetchを使って読み込むアプリ「test1.html」をつくり、ChatGPTを使っていい感じに表示するアプリ「test2.html」をつくって、組み合わせてできあがり！
メインのコードはこちら、HTML 1ファイル。
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:">
<title>旬図鑑 お魚編</title>
<link rel="stylesheet" href="style.css">
</head>
<script type="module">
import { SEASONS, SEASONS_JA, getSeason } from "./seasons.js";
const url = "https://guarana1230.github.io/sicaheal/data.json";
const data = await (await fetch(url)).json();
console.log(data);
for (const seasonen of SEASONS) {
const season = SEASONS_JA[seasonen];
const sec = document.createElement("section");
sec.className = "fish-set";
sec.dataset.season = seasonen;
const items = data.filter(i => i.season.indexOf(season) >= 0);
const div = document.createElement("div");
div.className = "grid";
for (const item of items) {
const parseSrc = (s) => s.substring(s.indexOf('"') + 1, s.lastIndexOf('"'));
const img = parseSrc(item.photo);
div.innerHTML += `
<article class="card">
<div class="thumb" style="background-image: url(${img})">
<span class="badge">旬: ${item.season}</span>
</div>
<div class="body">
<p class="name">${item.name} (${item.yomikata})</p>
<p class="desc">${item.memo}</p>
</div>
</article>
`;
}
sec.appendChild(div);
main.appendChild(sec);
}
// 現在季節をチェック
document.getElementById(getSeason()).checked = true;
</script>
<body>
<div class="wrap">
<header>
<div>
<h1>旬図鑑 お魚編</h1>
<p class="sub">季節を選ぶと、旬のお魚だけ表示します</p>
</div>
</header>
<div class="season-picker" role="radiogroup" aria-label="季節の選択">
<label>
<input type="radio" id="spring" name="season">
<span class="chip">春</span>
</label>
<label>
<input type="radio" id="summer" name="season">
<span class="chip">夏</span>
</label>
<label>
<input type="radio" id="autumn" name="season">
<span class="chip">秋</span>
</label>
<label>
<input type="radio" id="winter" name="season">
<span class="chip">冬</span>
</label>
</div>
<main id="main" class="encyclopedia">
</main>
</div>
<footer>
<div>DATA: <a href=https://guarana1230.github.io/sicaheal/>SICA-HEAL</a> <a href=https://github.com/guarana1230/sicaheal/blob/main/data.json>data.json</a> (<a href=https://tohoku-procon.jp/contest/2025/>とうほくプロコン2025</a> ノミネート作品)</div>
<div><a href=https://github.com/code4fukui/shun-zukan/>src on GitHub</a></div>
</footer>
</body>
</html>
こちらも同じく、GitHub Pagesを使ったオープンソース。
CSSでデザインを変えたり、読み込むデータを変えたり、いろいろ改造してみましょう！
links
- とうほくプロコン2025に登場、ARグラス！ three.jsとVRゴーグルで実験しよう
- とうほくプロコン2025
- とうほくプロコン2025最終審査会 結果速報！｜TOPICS｜とうほくプロコン2025
- 東北のこども達が活躍「とうほくプロコン2024」レポート、IchigoJam財団賞は!?
Fri Night
