2025-12-16
#js 
とうほくプロコン2025の作品、SICA-HEALが教えてくれた魚の旬。季節を扱うクラスがあると便利なので、日時ライブラリ day-es に、Seasons.js を追記しました。


「code4fukui/day-es」

日時を扱う時に便利です!

テストコードは下記の通り。

import * as t from "https://deno.land/std/testing/asserts.ts"; import { getSeason } from "./Seasons.js"; Deno.test("simple", () => { t.assertEquals(getSeason(), "winter"); // 2025-12 t.assertEquals(getSeason(new Date("2025-12-01")), "winter"); t.assertEquals(getSeason(new Date("2025-03-01")), "spring"); t.assertEquals(getSeason(new Date("2025-06-01")), "summer"); t.assertEquals(getSeason(new Date("2025-09-01")), "autumn"); t.assertEquals(getSeason(new Date("2025-11-30")), "autumn"); }); Deno.test("ja", () => { t.assertEquals(getSeason(new Date("2025-12-01"), "ja"), "冬"); t.assertEquals(getSeason(new Date("2025-03-01"), "ja"), "春"); t.assertEquals(getSeason(new Date("2025-06-01"), "ja"), "夏"); t.assertEquals(getSeason(new Date("2025-09-01"), "ja"), "秋"); });

deno test コマンドで使うと、ライブラリにバグがないことをテストコードの範囲内で確認できます。

$ deno test Seasons.test.js running 2 tests from ./Seasons.test.js simple ... ok (0ms) ja ... ok (0ms) ok | 2 passed | 0 failed (3ms)

12月-2月を冬、3月-5月を春、6月-8月を夏、9月-11月を秋と定義しましたが、昨今の気象変動を勘案するとちょっとずらしたほうがいいのかも?

実は、テストコード、パラメータ指定なしで現在日時で季節を返すので、春がくるとテストがエラーとなります。

links
- ARゴーグルでお魚料理支援、とうほくプロコン2025作品データの活用法

2025-12-15

とうほくプロコン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財団賞は!?

2025-12-14

とうほくプロコンの最終審査会で再開、小学3年生のARグラス開発者!


ENGLISH CYBER GOOGLES(イングリッシュ・サイバー・ゴーグル)


開発者は小学3年生!
去年のScratchを使った作品「ニンジン嫌い克服ゲーム」の開発者、今年はPythonとハードウェア連携で参戦!


全世界の男子に刺さるビジュアル!


いいね、サイバーゴーグルの可能性!


匠部門の最優秀賞を獲得!


ARグラスも体験してもらいました!


「ar-clock」

ARグラスをシミュレーションするデモに、まずはシンプルな時計から。1/1000秒単位で表示! <!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:"> <title>vr-autumn</title> <link rel="stylesheet" href="https://code4fukui.github.io/ar-clock/style.css"> </head><body> <script type="importmap"> { "imports": { "three": "https://code4fukui.github.io/three.js/build/three.module.js", "three/addons/": "https://code4fukui.github.io/three.js/examples/jsm/", "three/nodes": "https://code4fukui.github.io/three.js/examples/jsm/nodes/Nodes.js" } } </script> <main><h1>ar-clock</h1> <a href="https://github.com/code4fukui/ar-clock/">src on GitHub</a><br> </main> <style> </style> <script type="module"> import { THREE, scene, camera, renderer, ambientLight, directionalLight } from "https://code4fukui.github.io/egxr.js/egxr.js"; import { PCControl } from "https://code4fukui.github.io/vr-beetle/PCControl.js"; import { Time } from "https://js.sabae.cc/DateTime.js"; import { createTextPlane } from "https://code4fukui.github.io/ar-clock/createTextPlane.js"; // control const pcctrl = new PCControl(camera, renderer.domElement); // light ambientLight.intensity = 2.0; // 環境光(全体を均一に明るくする) directionalLight.intensity = 7.0; // 平行光 directionalLight.position.set(2, 10, 1); // 上から光 const w = 0.1; const h = 0.03; const plane = createTextPlane("ar-clock", w, h); scene.add(plane); const clock = new THREE.Clock(); renderer.setAnimationLoop(() => { const delta = clock.getDelta(); pcctrl.update(delta); renderer.render(scene, camera); const t = new Time(); plane.setText(t.toString()); }); </script> </body></html> このHTML 1ファイルで動かせます!
RUN on ES-Jam!


こどもたちの可能性は無限大!
とうほくプロコンレポートを続けます。

links
- とうほくプロコン2025
- とうほくプロコン2025最終審査会 結果速報!|TOPICS|とうほくプロコン2025
- 東北のこども達が活躍「とうほくプロコン2024」レポート、IchigoJam財団賞は!?

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS