2023-11-19_22-26

main
ocogeclub 2023-11-19 22:26:52 +09:00
parent 4469813846
commit b571a279c2
26 changed files with 391 additions and 66 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

File diff suppressed because one or more lines are too long

View File

@ -7,6 +7,13 @@
"description": "『情報コース』ご紹介、独自のブロックプログラミング環境『オコゲ』、教室での実習内容や周辺技術情報等のアウトプット"
},
{
"url": "/2023-11-20_oled/",
"title": "『オコゲ』で有機ELミニディスプレイ",
"date": "2023年11月19日",
"description": "SSD1306 搭載 OLED モジュールに線や文字を描画する『オコゲ』ブロック"
},
{
"url": "/2023-03-22_server/",
"title": "おこげ倶楽部自宅サーバについて",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -21,6 +21,7 @@
<url><loc>https://ocoge.club/assets/floatbox/resources/configurator/</loc></url>
<url><loc>https://ocoge.club/assets/floatbox/resources/video/</loc></url>
<url><loc>https://ocoge.club/img/</loc></url>
<url><loc>https://ocoge.club/2023-11-20_oled/</loc></url>
<url><loc>https://ocoge.club/ict-course-portal/</loc></url>
</urlset>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>おこげ俱楽部 - Ohiwa Code Generator - Portal</title>
<meta name="title" content="おこげ俱楽部 - Ohiwa Code Generator - Portal">
<meta name="description" content="Ohiwa Code Generator - Portal">
<meta name="keywords" content="オコゲ,デスクトップアプリ版,オコゲ,blockly,プログラミング,上野学習塾">
<meta name="author" content="ocogeclub">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://ocoge.club/template copy/">
<link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png">
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
<script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/assets/floatbox/floatbox.css" />
<script src="/assets/floatbox/floatbox.js" defer></script>
<link rel="stylesheet" href="/assets/css/ocmain.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/footer.css">
<link rel="stylesheet" href="/assets/css/post.css">
<meta property="og:image" content="https://ocoge.club/assets/img/.webp">
<meta property="og:title" content="おこげ俱楽部 - Ohiwa Code Generator - Portal">
<meta property="og:description" content="Ohiwa Code Generator - Portal">
<meta property="og:url" content="https://ocoge.club/template copy/">
<meta property="og:site_name" content="おこげ俱楽部">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ocogeclub">
</head>
<body class="flex flex-col h-screen bg-white text-gray-800 break-words">
<header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500">
<div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between">
<div class="sm:mr-8">
<a class="flex items-center" href="/">
<span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span>
</a>
</div>
<nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0">
<a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a>
<a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a>
<a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud/Mail</a>
<a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a>
</nav>
<form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0">
<label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label>
<input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm">
</form>
<div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</div>
</div>
</header>
<main class="mx-7 lg:mx-6 mt-32 flex-grow">
<article class="max-w-5xl mx-auto">
<header class="mb-14">
<h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3"></h1>
<div class="text-center"><i class="fa-regular fa-clock"></i> 2023年11月17日</div>
<div class="mt-3 text-center">
<a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a>
<a href="/tags/デスクトップアプリ版" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#デスクトップアプリ版</a>
</div>
<div class="mt-10 -mx-7 md:mx-0">
<img class="w-full max-w-2xl mx-auto" src="/assets/img/.webp" alt="This post thumbnail">
</div>
</header>
<div id="content" class="prose text-gray-800 max-w-none">
<div class="box_stripe"><p></p></div>
</div>
<div class="mt-10">
<div class="italic text-gray-700">Disqus comments only available for production</div>
</div>
</article>
</main>
<footer class="mt-20 px-10 py-8 bg-gray-200">
<div id="footer-badge"><a href="https://git.ocoge.club/" target=_new><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target=_new><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div>
<div class="max-w-5xl mx-auto text-gray-700 text-center">
© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>.
Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a>
using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br>
</div>
</footer>
<script src="/assets/js/bundle.js"></script>
</body>
<script>
window.addEventListener('load', (event) => {
document.getElementsByTagName('html')[0].style.display='block';
});
</script>
</html>

File diff suppressed because one or more lines are too long

View File

@ -4,9 +4,9 @@ description: "『オコゲ』デスクトップ版の機能を動画でご紹介
date: 2022-05-16
thumb: "ogp_janken.webp"
tags:
- ICT-Course
- 動画
- オコゲ
- ICT-Course
- 動画
- オコゲ
---
{% simplebox 'box_stripe' %}Raspberry Pi 専用デスクトップアプリ『オコゲ』は、Raspberry Pi の GPIO に直接アクセス{% annotate 1 %}することができます。また、特定のモジュールに対応した専用ブロック{% annotate %}も用意されています。
@ -29,7 +29,6 @@ tags:
ぐーちょきぱーがわかるタマちー
{% endcenterimg %}
なんかゲームとか作れそうですね。Raspberry Pi とあっちむいてほいとか勝てそうにないですね!
## 機械学習とは
@ -99,7 +98,7 @@ Google で「機械学習」を検索してトップに表示される野村総
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
{% endfloatbox %}
{% link_new {uri: 'https://www.switch-science.com/catalog/3395/',title: ''} %}Grid-EYE(AMG8833){% endlink_new %} は、Panasonic が開発した縦横ピクセル64画素の赤外線センササーマルカメラです。I2C接続で利用することができ、記事トップのカバー写真のような簡単な回路で温度データを取得できます。温度データは64画素それぞれの温度で、次のようなものです。
{% link_new {uri: 'https://www.switch-science.com/catalog/3395/',title: ''} %}Grid-EYE(AMG8833){% endlink_new %} は、Panasonic が開発した縦横ピクセル64 画素の赤外線センササーマルカメラです。I2C 接続で利用することができ、記事トップのカバー写真のような簡単な回路で温度データを取得できます。温度データは 64 画素それぞれの温度で、次のようなものです。
13.25,13.25,18,16.75,16.5,15.75,14.25,12.25,12.75,14,20,20,19.25,17.25,15.25,13.25,14,15.25,21,22,21.25,19.75,15.25,13.25,15,19.25,22,22.5,21.75,19.25,14.25,13,14.75,20.75,23.25,23.25,22.5,17,13.75,13,14.5,18,23,23.5,21.75,15.25,13.25,12.5,14.5,15.75,21.25,23.5,20,15,13.5,13.25,18.25,17.75,21.75,24,20.75,15.25,14.5,14
@ -113,14 +112,14 @@ Google で「機械学習」を検索してトップに表示される野村総
{% centerimg '8x8hand_nosmooth.webp' %}{% endcenterimg %}
20倍に拡大してみました。これでも何が映っているのかなんとなくわかりますが、スムージングをかけることで少し見やすくなります。
20 倍に拡大してみました。これでも何が映っているのかなんとなくわかりますが、スムージングをかけることで少し見やすくなります。
{% centerimg '8x8hand_smooth.webp' %}{% endcenterimg %}
手と言われれば、手。ちなみに左下のちょっとだけ赤い部分は、筆者の頭が写り込んだものです。最初、天井に温度が高い部分があるのかと思って上を見たりしていましたw
手と言われれば、手。ちなみに左下のちょっとだけ赤い部分は、筆者の頭が写り込んだものです。最初、天井に温度が高い部分があるのかと思って上を見たりしていました w
{% span "tsubuyaki" %}ところで、こんな感じの映像をどこかで見たことがありませんか?
そう、{% link_new {uri: 'https://www.nintendo.co.jp/switch/as3ma/traning/index.html?cat=yubi',title: ''} %}これ{% endlink_new %}です。まさか Joy-Con にサーマルカメラが内蔵されていようとは。テレビCMを見て「おおお…」などと一人で盛り上がっていたのは内緒です。そのほか距離センサなどが同時に使用できるようになっている様子。ジャイロも入っているしホンマどえらいコントローラーやでぇ…{% endspan %}
そう、{% link_new {uri: 'https://www.nintendo.co.jp/switch/as3ma/traning/index.html?cat=yubi',title: ''} %}これ{% endlink_new %}です。まさか Joy-Con にサーマルカメラが内蔵されていようとは。テレビ CM を見て「おおお…」などと一人で盛り上がっていたのは内緒です。そのほか距離センサなどが同時に使用できるようになっている様子。ジャイロも入っているしホンマどえらいコントローラーやでぇ…{% endspan %}
## やってみる
@ -143,7 +142,7 @@ Google で「機械学習」を検索してトップに表示される野村総
1. 同様にして「ぐー」「ちょき」「ぱ」を学習。いずれも2回クリックで正しい推論をするようになった。念のため3回クリック
1. その後はハンドポーズを正しく答えることができるようになる
なんということでしょう。たった3×4=12回のクリックでぐーちょきぱー判別の機械学習ができてしまいました。上のプログラムでは使われていませんが、学習したデータを保存・復元するブロックもありますので、育てた学習データを他のプログラムから呼び出して利用することができます。
なんということでしょう。たった 3×4=12 回のクリックでぐーちょきぱー判別の機械学習ができてしまいました。上のプログラムでは使われていませんが、学習したデータを保存・復元するブロックもありますので、育てた学習データを他のプログラムから呼び出して利用することができます。
## ちょっと詳しく
@ -153,7 +152,7 @@ Google で「機械学習」を検索してトップに表示される野村総
そこで考案されたのが「転移学習 (Transfer Learning)」です。ある分野ですでに学習済みのモデルを別の分野での推論に転用して、少ないサンプルデータと学習時間で成果を出そうという手法です。『オコゲ』の機械学習ブロックは、この転移学習を利用して簡単お手軽に機械学習を行うことができるようになっています。
今回のような「手のポーズの認識」であれば、そのまま使える学習済みモデルとして、Webカメラを使った {% link_new {uri: 'https://github.com/tensorflow/tfjs-models/tree/master/handpose',title: ''} %}MediaPipe Handpose{% endlink_new %}(または{% link_new {uri: 'https://github.com/tensorflow/tfjs-models/tree/master/hand-pose-detection',title: ''} %}こっち{% endlink_new %}も利用できるだろうと思いますが、当たり前だけど手にしか反応しない前述の「応用がきかない」のと、Webカメラなので Raspberry Pi である必要がない、なにより「学習をさせる」という面白みがないのでここでは扱うのをやめました。サーマルカメラを使ったここで紹介したやり方なら、ちょっと離れたところから上半身が映るようにして例えば {% link_new {uri: 'https://www.google.com/search?q=%E3%83%A4%E3%83%B3%E3%82%B0%E3%83%9E%E3%83%B3&client=firefox-b-d&channel=crow5&sxsrf=ALiCzsYBHeiV-1OPBaViMgeSnhYAEcV5sg:1652690019938&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjqqb-MzuP3AhUCad4KHUdKDN0Q_AUoAnoECAEQBA&biw=1006&bih=960&dpr=1',title: ''} %}「ヤングマン」のポーズ{% endlink_new %}の認識などもできるかもしれません。
今回のような「手のポーズの認識」であれば、そのまま使える学習済みモデルとして、Web カメラを使った {% link_new {uri: 'https://github.com/tensorflow/tfjs-models/tree/master/handpose',title: ''} %}MediaPipe Handpose{% endlink_new %}(または{% link_new {uri: 'https://github.com/tensorflow/tfjs-models/tree/master/hand-pose-detection',title: ''} %}こっち{% endlink_new %}も利用できるだろうと思いますが、当たり前だけど手にしか反応しない前述の「応用がきかない」のと、Web カメラなので Raspberry Pi である必要がない、なにより「学習をさせる」という面白みがないのでここでは扱うのをやめました。サーマルカメラを使ったここで紹介したやり方なら、ちょっと離れたところから上半身が映るようにして例えば {% link_new {uri: 'https://www.google.com/search?q=%E3%83%A4%E3%83%B3%E3%82%B0%E3%83%9E%E3%83%B3&client=firefox-b-d&channel=crow5&sxsrf=ALiCzsYBHeiV-1OPBaViMgeSnhYAEcV5sg:1652690019938&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjqqb-MzuP3AhUCad4KHUdKDN0Q_AUoAnoECAEQBA&biw=1006&bih=960&dpr=1',title: ''} %}「ヤングマン」のポーズ{% endlink_new %}の認識などもできるかもしれません。
{% talkicon_r {img: 'mimmy.webp', name: ''} %}{% says_r %}
ポーズをとるのが恥ずかしくて試してないんですって!
@ -166,11 +165,11 @@ Google で「機械学習」を検索してトップに表示される野村総
## 注釈
{% small 1 %}pigpio デーモンを利用するので厳密には直接ではないが...{% endsmall %}
{% small %} 2022年月現在、センサー専用ブロックは次の通り。
{% small %} 2022 年5月現在、センサー専用ブロックは次の通り。
● 赤外線アレイセンササーマルカメラAMG8833
● ジェスチャーセンサー PAJ7620
● 温湿度気圧センサー BME280
● 有機ELディスプレイ (SSD1306){% endsmall %}
● 有機 EL ディスプレイ SSD1306{% endsmall %}
{% small %}{% link_new {uri: 'https://www.tensorflow.org/js?hl=ja',title: ''} %}TensorFlow.js{% endlink_new %} は、JavaScript 上で利用できる TensorFlow 実装。
TensorFlow といえばプログラム言語は Python が定番だが、Raspberry Pi では最新の TensorFlow を使おうと思うと、できないこともないようではあるものの、環境構築やインストールなど、少々敷居が高い。ありていに言うと、面倒くさい。TensorFlow.js は、それ自体が JavaScript で書かれているため、ブラウザ上の JavaScript から簡単に扱うことができ、導入の手間もほとんどかからない。スクリプト言語で書かれているが故の速度的な問題も {% link_new {uri: 'https://github.com/tensorflow/tfjs/tree/master/tfjs-backend-wasm',title: ''} %}WebAssembly バックエンド{% endlink_new %} (wasm) でほぼ解決。そのまま使えるいくつもの有用な{% link_new {uri: 'https://www.tensorflow.org/js/models?hl=ja',title: ''} %}学習済みモデル{% endlink_new %}があらかじめ用意されているうえ、AI に触れたことのない Webフロントエンジニアを意識しているようで、初学者向けの平易なドキュメントも充実している。「画像の転移学習」にはステップバイステップの丁寧な{% link_new {uri: 'https://codelabs.developers.google.com/codelabs/tensorflowjs-teachablemachine-codelab?hl=ja#0',title: ''} %}チュートリアル{% endlink_new %}まで存在する。『オコゲ』を Blockly + Electron で開発してきたのは、もしかしたらこのためだったんじゃないかと思うほどの、あつらえたかのような環境であった。正味の話、前述の転移学習チュートリアルがなかったら機械学習ブロックの導入は諦めてたかもしれない。サンキューグーグル。
{% endsmall %}
TensorFlow といえばプログラム言語は Python が定番だが、Raspberry Pi では最新の TensorFlow を使おうと思うと、できないこともないようではあるものの、環境構築やインストールなど、少々敷居が高い。ありていに言うと、面倒くさい。TensorFlow.js は、それ自体が JavaScript で書かれているため、ブラウザ上の JavaScript から簡単に扱うことができ、導入の手間もほとんどかからない。スクリプト言語で書かれているが故の速度的な問題も {% link_new {uri: 'https://github.com/tensorflow/tfjs/tree/master/tfjs-backend-wasm',title: ''} %}WebAssembly バックエンド{% endlink_new %} (wasm) でほぼ解決。そのまま使えるいくつもの有用な{% link_new {uri: 'https://www.tensorflow.org/js/models?hl=ja',title: ''} %}学習済みモデル{% endlink_new %}があらかじめ用意されているうえ、AI に触れたことのない Web フロントエンジニアを意識しているようで、初学者向けの平易なドキュメントも充実している。「画像の転移学習」にはステップバイステップの丁寧な{% link_new {uri: 'https://codelabs.developers.google.com/codelabs/tensorflowjs-teachablemachine-codelab?hl=ja#0',title: ''} %}チュートリアル{% endlink_new %}まで存在する。『オコゲ』を Blockly + Electron で開発してきたのは、もしかしたらこのためだったんじゃないかと思うほどの、あつらえたかのような環境であった。正味の話、前述の転移学習チュートリアルがなかったら機械学習ブロックの導入は諦めてたかもしれない。サンキューグーグル。
{% endsmall %}

View File

@ -0,0 +1,37 @@
---
title: "『オコゲ』で有機ELミニディスプレイ"
description: "SSD1306 搭載 OLED モジュールに線や文字を描画する『オコゲ』ブロック"
date: Last Modified
thumb: "ssd1306_ja.webp"
tags:
- オコゲ
- デスクトップアプリ版
---
{% simplebox 'box_stripe' %}制御チップに SSD1306 を搭載した有機 EL ディスプレイ (OLED) モジュールに線や文字を描画するブロックを『オコゲ』に実装しました。{% endsimplebox %}
{% floatbox {
img: 'ssd1306_square.webp',
title: 'クリックで拡大',
width: '180px',
colortheme: 'silver'
} %}
線も描けます。
{% endfloatbox %}
{% blockprogram {
summary: '日本語表示例'
} %}
{% centerimg 'oled_iamacat_block.webp' %}
アイキャッチ画像の日本語表示プログラム
{% endcenterimg %}
{% endblockprogram %}
{% talkicon_r {img: 'mimmy.webp', name: 'ミミィ'} %}{% says_r %}
対応モジュールは I2C 接続のものヨ!
残念だけど SPI 接続(7ピン)は対応していないワ!
あと画面サイズも 128x64, 128x32, 96x16 の3種類だけヨ!
{% endsays_r %}
{% talkicon_l {img: 'tama.webp', name: 'タマちー'} %}{% think_l %}
そのうち PNG 表示とかもできるようにしたい・・・
{% endthink_l %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -1,19 +0,0 @@
---
eleventyExcludeFromCollections: true
title: "『オコゲ』Pico (MicroPython) 対応について"
description: "アプリ版『オコゲ』のオマケ機能として、Raspberry Pi Pico と互換ボードに(一部)対応しました。"
date: Created
thumb: "ogp_rp2040boards.webp"
tags:
- オコゲ
- デスクトップアプリ版
- Pico
---
{% simplebox 'box_stripe' %}一部のブロックで Raspberry Pi Pico (MicroPython) コードの出力に対応しました。{% endsimplebox %}
{% talkicon_r {img: 'mimmy.webp', name: 'ミミィ'} %}{% says_r %}
始めたばっかりなのでほんのちょっぴりだけヨ!<br>
具体的には「ゲーム電卓パイ」のページにあるブロックプログラムに対応しているワ!
{% endsays_r %}

12
src/posts/template.md Normal file
View File

@ -0,0 +1,12 @@
---
eleventyExcludeFromCollections: true
title: ""
description: ""
date: Last Modified
thumb: ".webp"
tags:
- オコゲ
- デスクトップアプリ版
---
{% simplebox 'box_stripe' %}{% endsimplebox %}