…L@ iGf#;|E€X K" Y^ÒšTy"È¡a"²* µöz½0uü°êN(x`¶X@Þ¢à —×‚,v"Ðié³_ÄÔuØö3œF¾ˆw^Ö¬¦•¬²;eú \º°³å-¨^æ-‰§^ò÷ZƒY ›§bidddates2025-12-15T20:15:00etitlex]ARゴーグルã§ãŠéšæ–™ç†æ”¯æ´ã€ã¨ã†ã»ãプãƒã‚³ãƒ³2025作å“データã®æ´»ç”¨æ³•dtagsx*#megane #KidsIT #tohoku #sendai #IchigoJamcurlxhttps://fukuno.jig.jp/4891dbodyy p
ã¨ã†ã»ãプãƒã‚³ãƒ³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財団賞ã¯!?
cimgxGhttps://img.sabae.cc/data/2058/aeb2cb72-3fb3-490d-9339-4a82180e872f.jpg