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財団賞は!?

2025-12-13
#js #AI 

カメラに写っている人の性別と年齢を推定したくなり、見つけたライブラリ「face-api.js」を使って実装「age-detector


「code4fukui/age-detector」

GitHubでのオープンソース。face-api.jsは、ESモジュール化しているので、上記ページをimportする形でも使えます。

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