Compare commits
10 Commits
05ce68e723
...
5547797d0c
| Author | SHA1 | Date |
|---|---|---|
 ocogeclub
|
5547797d0c | |
|
ocogeclub
|
c005ebffb1 | |
|
ocogeclub
|
b70e78b3cd | |
|
ocogeclub
|
b571a279c2 | |
|
ocogeclub
|
4469813846 | |
|
ocogeclub
|
37309381fa | |
|
ocogeclub
|
c98acf006a | |
|
ocogeclub
|
44455d7782 | |
ichiju
|
7e6a82acb9 | |
|
ichiju
|
e76af16de2 |
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
|
|
@ -1,248 +0,0 @@
|
|||
<!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>おこげ倶楽部自宅サーバについて | おこげ俱楽部</title>
|
||||
<meta name="title" content="おこげ倶楽部自宅サーバについて | おこげ俱楽部">
|
||||
<meta name="description" content="ocoge.club は Orange Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ、Git サーバ稼働中。">
|
||||
<meta name="keywords" content="技術情報,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocogeclub">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/2022-05-08_server 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/opi-server.webp">
|
||||
<meta property="og:title" content="おこげ倶楽部自宅サーバについて | おこげ俱楽部">
|
||||
<meta property="og:description" content="ocoge.club は Orange Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ、Git サーバ稼働中。">
|
||||
<meta property="og:url" content="https://ocoge.club/2022-05-08_server 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> 2022年5月7日</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>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/opi-server.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<p>ocoge.club は Orange Pi 自宅サーバ（上写真）にてホスティングされています。現在 Webサーバ、メールサーバ、Git サーバが稼働しています。数千円で購入できる手のひらサイズのシングルボードコンピュータと3千円程度のSSDを使ってなかなか充実したネットサービスごっこwができます。</p>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p>タマちー</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
「おこげ俱楽部」は、軽量多目的 <s>Raspberry Pi</s> <a href="http://www.orangepi.org/" target="_new" title="Orange Pi">Orange Pi <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> サーバーとして絶賛改装中です...。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
市場でラズパイが枯渇している関係で、サーバのハードウェアを 4B(4GB) から、現状最も手に入りやすい中華<s>パチモン</s> <span title="シングルボードコンピュータ">SBC</span> の Orange Pi に変更したのよね！軽量化のために<span class="mfy"><a href="https://ja.wordpress.org" target="_new" title="シェア世界一の CMS">WordPress <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></span> をやめて <span class="mfg"><a href="https://jamstack.org" target="_new" title="ちょっと何言ってるか分からない">Jamstack <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></span> にするとかの対応中ヨ！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div> <div class="chatting">
|
||||
<div class="think-l-bal-s"></div>
|
||||
<div class="think-l-bal-l"></div>
|
||||
<div class="tamathink">
|
||||
<p>
|
||||
らずぱい売ってない... 困る...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
RSコンポーネンツの通販サイトに「11月入荷」とか書いてあるのよ！<br>
|
||||
鬼も笑えないわ！！
|
||||
</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>ハードウェア構成</h2>
|
||||
<ul>
|
||||
<li><a href="http://www.orangepi.org/Orange%20Pi%203%20LTS/index.html" target="_new" title="">Orange Pi 3 LTS <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></li>
|
||||
<li>Crucial SSD 120GB 2.5インチ (CT120BX500SSD1JP)</li>
|
||||
<li>Salcar USB-C 2.5インチ SATA HDD/SSDケース</li>
|
||||
</ul>
|
||||
<p>ケースは RPi 用を流用。ネジ穴が合わなかったので百均の耐震マットを小さく切って貼り付け。</p>
|
||||
<h2>ソフトウェア構成</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>種類</th>
|
||||
<th>名称</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>OS</td>
|
||||
<td><a href="http://www.orangepi.org/downloadresources/" target="_new" title="">Orange Pi3 LTS Debian Buster Server <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Webサーバ</td>
|
||||
<td><a href="https://nginx.org/en/" target="_new" title="">Nginx <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>サーバサイドインタプリタ</td>
|
||||
<td><a href="https://www.php.net/" target="_new" title="">PHP <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>データベース</td>
|
||||
<td><a href="https://www.sqlite.org/index.html" target="_new" title="">SQLite3 <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>メールサーバ (MTA)</td>
|
||||
<td><a href="http://www.postfix.org/" target="_new" title="">Postfix <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Webメールクライアント</td>
|
||||
<td><a href="https://www.rainloop.net/" target="_new" title="">Rainloop <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>POP/IMAP サーバ</td>
|
||||
<td><a href="https://www.dovecot.org/" target="_new" title="">Dovecot <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Git サーバ</td>
|
||||
<td><a href="https://gitea.io/" target="_new" title="">Gitea <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>このほか、スパムメール対策に <a href="https://spamassassin.apache.org/" target="_new" title="">SpamAssasin <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> であるとか証明書取得に <a href="https://letsencrypt.org/ja/" target="_new" title="">Let’s Encrypt (certbot) <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> であるとか</p>
|
||||
<h2>その他利用しているもの</h2>
|
||||
<p>独自ドメイン (ocoge.club)<br>
|
||||
<a href="https://www.mydns.jp/" target="_new" title="">MyDNS <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>（無料ダイナミックDNS）<br>
|
||||
インターネット接続回線（有線LANで接続）<br>
|
||||
静的サイトジェネレータ <a href="https://www.11ty.dev/" target="_new" title="">11ty <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a> 及びブログテーマ <a href="https://github.com/dafiulh/vredeburg" target="_new" title="">Vredeburg <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a></p>
|
||||
<h2>参考サイト</h2>
|
||||
<p><a href="https://samhobbs.co.uk/raspberry-pi-email-server" target="_new" title="">Sam Hobbs | Raspberry Pi Email Server <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a><br>
|
||||
英語でメールサーバのみの解説ではあるが、ステップごとにインストールや設定がうまくいっているかどうか確認を行うことができるようになっているため、長い作業の中でどこでミスをしたのか、または不具合が出ているのかがわかりやすい。また、設定をデフォルトから変更する箇所にそれぞれ設定の意味の説明があり、自分が何をしているのかがわかるため、ソフトウェアのアップデートで設定項目やその値に変更があり見本と齟齬が生じていても対処が容易である。わけもわからず言われた通り延々ソフトウェアのインストールと設定ファイルの書き換えを繰り返し、辟易しながら終わらせたものの結局動作せず問題のある個所も見当がつかないまま挫折、などという悲劇を起こしにくい、ナイスなサイト。</p>
|
||||
<div class="balloon">
|
||||
<div class="faceicon">
|
||||
<img src="/assets/img/tama.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says">
|
||||
WordPress と NextCloud の運用をやめた理由は実は別にあったりする...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p></p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
セキュリティアップデートが面倒だったのヨ！<br>
|
||||
仕事でもないのにあんなのやってられないワ！！
|
||||
</p></div>
|
||||
</div>
|
||||
</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
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
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
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
110
htdocs/404.html
110
htdocs/404.html
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
|
|
@ -1,10 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="background-color:#000;" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Video Player - Floatbox</title>
|
||||
<script>
|
||||
( function () {
|
||||
<!doctype html><html style="background-color:#000;" lang="en"><head><meta charset="utf-8"><title>Video Player - Floatbox</title><script>( function () {
|
||||
var
|
||||
$container,
|
||||
$player,
|
||||
|
|
@ -136,11 +130,7 @@
|
|||
script.src = fbOptions.scriptPath;
|
||||
document.head.appendChild( script );
|
||||
|
||||
} )()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, #container {
|
||||
} )()</script><style>html, body, #container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
|
@ -165,19 +155,4 @@ p {
|
|||
}
|
||||
video {
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<p>Uh-oh.<br />
|
||||
Video playback failed.<br />
|
||||
That's all we know.<br /><br />
|
||||
<a></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
}</style></head><body><div id="container"><p>Uh-oh.<br>Video playback failed.<br>That's all we know.<br><br><a></a></p></div></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
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: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -1,169 +1,2 @@
|
|||
|
||||
|
||||
/*
|
||||
Hide header on scroll down & show on scroll up
|
||||
*/
|
||||
|
||||
const header = document.getElementById('header');
|
||||
let lastPos = document.documentElement.scrollTop;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currPos = document.documentElement.scrollTop;
|
||||
|
||||
if (currPos > lastPos) {
|
||||
if (currPos > header.offsetHeight) {
|
||||
header.classList.add('-translate-y-full');
|
||||
header.classList.remove('header-shadow');
|
||||
}
|
||||
} else {
|
||||
header.classList.remove('-translate-y-full');
|
||||
header.classList.add('header-shadow');
|
||||
}
|
||||
|
||||
lastPos = currPos;
|
||||
}, false);
|
||||
|
||||
/*
|
||||
Toggle the menu when pressed on hamburger button
|
||||
Only on mobile devices
|
||||
*/
|
||||
|
||||
const menu = document.getElementById('menu');
|
||||
const searchBox = document.getElementById('search');
|
||||
const menuToggle = document.getElementById('menu-toggle');
|
||||
|
||||
menuToggle.addEventListener('click', () => {
|
||||
menu.classList.toggle('hidden');
|
||||
searchBox.classList.toggle('hidden');
|
||||
}, false);
|
||||
|
||||
/*
|
||||
Lazy load images
|
||||
*/
|
||||
|
||||
const lazyImages = document.getElementsByClassName('lazy');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
[...lazyImages].forEach((elem) => {
|
||||
const originalImage = elem.dataset.src;
|
||||
|
||||
elem.setAttribute('src', originalImage);
|
||||
elem.removeAttribute('data-src');
|
||||
});
|
||||
}, false);
|
||||
|
||||
/*
|
||||
Search for posts with keyword given in the parameter "q"
|
||||
Only run on search page ("/search/")
|
||||
*/
|
||||
|
||||
class SearchPosts {
|
||||
async init() {
|
||||
const params = new URL(location.href).searchParams;
|
||||
|
||||
this.start = Number(params.get('start')) || 1;
|
||||
this.size = Number(params.get('size')) || 12;
|
||||
|
||||
this.posts = await fetch('../index.json').then((res) => {
|
||||
return res.json();
|
||||
});
|
||||
|
||||
this.render(params.get('q'));
|
||||
}
|
||||
|
||||
render(query) {
|
||||
const wrapperEl = document.getElementById('wrapper');
|
||||
const searchBoxEl = document.getElementById('searchbox');
|
||||
const infoEl = document.getElementById('info');
|
||||
|
||||
query = typeof query === 'string' ? query.toLowerCase() : '';
|
||||
|
||||
history.replaceState(null, null, `?q=${query}&start=${this.start}&size=${this.size}`);
|
||||
|
||||
searchBoxEl.value = query;
|
||||
wrapperEl.innerHTML = '';
|
||||
|
||||
if (query === '') {
|
||||
infoEl.textContent = 'Enter keywords in the search box above';
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const matchedPosts = this.posts.filter((post) => {
|
||||
const postTitle = post.title.toLowerCase();
|
||||
const postDescription = post.description.toLowerCase();
|
||||
|
||||
return (postTitle.indexOf(query) !== -1) || (postDescription.indexOf(query) !== -1);
|
||||
});
|
||||
|
||||
if (matchedPosts.length === 0) {
|
||||
infoEl.textContent = `No results were found for "${query}"`;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const size = this.size;
|
||||
const offset = this.start - 1;
|
||||
const slicedPosts = matchedPosts.slice(offset, offset + size);
|
||||
|
||||
const lastPostIndex = offset + slicedPosts.length;
|
||||
const showingRange = this.start < lastPostIndex || this.start !== 1 ? `${this.start} to ${lastPostIndex}` : this.start;
|
||||
const extraS = matchedPosts.length > 1 ? 's' : '';
|
||||
|
||||
infoEl.textContent = `Showing ${showingRange} of ${matchedPosts.length} result${extraS} found for "${query}"`;
|
||||
|
||||
slicedPosts.forEach((post) => {
|
||||
const { url, title, date, description } = post;
|
||||
|
||||
wrapperEl.innerHTML += `
|
||||
<div class="w-full sm:w-1/2 md:w-1/3 self-stretch p-2 mb-2">
|
||||
<a href="${url}">
|
||||
<div class="rounded shadow-md h-full px-6 py-5">
|
||||
<div class="font-semibold text-lg mb-2">${title}</div>
|
||||
<p class="text-gray-500 mb-1 text-sm" title="Published date">${date}</p>
|
||||
<p class="text-gray-600 text-sm">${description}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (location.pathname === '/search/') {
|
||||
const searchBoxEl = document.getElementById('searchbox');
|
||||
const searchPosts = new SearchPosts();
|
||||
|
||||
searchPosts.init();
|
||||
|
||||
searchBoxEl.addEventListener('keyup', debounce(function () {
|
||||
searchPosts.render(this.value);
|
||||
}, 400));
|
||||
}
|
||||
|
||||
// https://github.com/sindresorhus/p-debounce
|
||||
function debounce(fn, wait) {
|
||||
let timer;
|
||||
let resolveList = [];
|
||||
|
||||
return function (...arguments_) {
|
||||
return new Promise((resolve) => {
|
||||
clearTimeout(timer);
|
||||
|
||||
timer = setTimeout(() => {
|
||||
timer = null;
|
||||
|
||||
const result = fn.apply(this, arguments_);
|
||||
|
||||
for (resolve of resolveList) {
|
||||
resolve(result);
|
||||
}
|
||||
|
||||
resolveList = [];
|
||||
}, wait);
|
||||
|
||||
resolveList.push(resolve);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
const header=document.getElementById("header");let lastPos=document.documentElement.scrollTop;window.addEventListener("scroll",()=>{const e=document.documentElement.scrollTop;e>lastPos?e>header.offsetHeight&&(header.classList.add("-translate-y-full"),header.classList.remove("header-shadow")):(header.classList.remove("-translate-y-full"),header.classList.add("header-shadow")),lastPos=e},!1);const menu=document.getElementById("menu"),searchBox=document.getElementById("search"),menuToggle=document.getElementById("menu-toggle");menuToggle.addEventListener("click",()=>{menu.classList.toggle("hidden"),searchBox.classList.toggle("hidden")},!1);const lazyImages=document.getElementsByClassName("lazy");document.addEventListener("DOMContentLoaded",()=>{[...lazyImages].forEach(e=>{const t=e.dataset.src;e.setAttribute("src",t),e.removeAttribute("data-src")})},!1);class SearchPosts{async init(){const e=new URL(location.href).searchParams;this.start=Number(e.get("start"))||1,this.size=Number(e.get("size"))||12,this.posts=await fetch("../index.json").then(e=>e.json()),this.render(e.get("q"))}render(e){const t=document.getElementById("wrapper"),s=document.getElementById("searchbox"),n=document.getElementById("info");if(e="string"==typeof e?e.toLowerCase():"",history.replaceState(null,null,`?q=${e}&start=${this.start}&size=${this.size}`),s.value=e,t.innerHTML="",""===e)return void(n.textContent="Enter keywords in the search box above");const o=this.posts.filter(t=>{const s=t.title.toLowerCase(),n=t.description.toLowerCase();return-1!==s.indexOf(e)||-1!==n.indexOf(e)});if(0===o.length)return void(n.textContent=`No results were found for "${e}"`);const a=this.size,r=this.start-1,d=o.slice(r,r+a),l=r+d.length,i=this.start<l||1!==this.start?`${this.start} to ${l}`:this.start,c=o.length>1?"s":"";n.textContent=`Showing ${i} of ${o.length} result${c} found for "${e}"`,d.forEach(e=>{const{url:s,title:n,date:o,description:a}=e;t.innerHTML+=`\n <div class="w-full sm:w-1/2 md:w-1/3 self-stretch p-2 mb-2">\n <a href="${s}">\n <div class="rounded shadow-md h-full px-6 py-5">\n <div class="font-semibold text-lg mb-2">${n}</div>\n <p class="text-gray-500 mb-1 text-sm" title="Published date">${o}</p>\n <p class="text-gray-600 text-sm">${a}</p>\n </div>\n </a>\n </div>\n `})}}if("/search/"===location.pathname){const e=document.getElementById("searchbox"),t=new SearchPosts;t.init(),e.addEventListener("keyup",debounce((function(){t.render(this.value)}),400))}function debounce(e,t){let s,n=[];return function(...o){return new Promise(a=>{clearTimeout(s),s=setTimeout(()=>{s=null;const t=e.apply(this,o);for(a of n)a(t);n=[]},t),n.push(a)})}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,116 +1,25 @@
|
|||
<!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>Untitled | おこげ俱楽部</title>
|
||||
<meta name="title" content="Untitled | おこげ俱楽部">
|
||||
<meta name="description" content="Ohiwa Code Generator - Portal">
|
||||
<meta name="keywords" content="オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocoge.club">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/img/">
|
||||
<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:title" content="Untitled | おこげ俱楽部">
|
||||
<meta property="og:description" content="Ohiwa Code Generator - Portal">
|
||||
<meta property="og:url" content="https://ocoge.club/img/">
|
||||
<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">Untitled</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2023年3月2日</div>
|
||||
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<!DOCTYPE html>
|
||||
|
||||
<body style="background-color: green;">
|
||||
<img src="./tama_ko.webp">
|
||||
</body>
|
||||
</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">ocoge.club</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) => {
|
||||
<!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>Untitled | おこげ俱楽部</title><meta name="title" content="Untitled | おこげ俱楽部"><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/img/"><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="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:title" content="Untitled | おこげ俱楽部"><meta property="og:description" content="Ohiwa Code Generator - Portal"><meta property="og:url" content="https://ocoge.club/img/"><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</a> <a href="https://mail.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">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">Untitled</h1><div class="text-center"><i class="fa-regular fa-clock"></i> 2023年11月22日</div></header><div id="content" class="prose text-gray-800 max-w-none"><!doctype html><body style="background-color: green;"><img src="./tama_ko.webp"></body></div><div class="mt-10"><div id="disqus_thread"></div><script>let disqusLoaded = false;
|
||||
let disqus_config = function () {
|
||||
this.page.url = 'https://ocoge.club/img/';
|
||||
this.page.identifier = 'img';
|
||||
};
|
||||
function loadComments() {
|
||||
if (!disqusLoaded) {
|
||||
disqusLoaded = true;
|
||||
const d = document, s = d.createElement('script');
|
||||
s.src = '//ocogeclub.disqus.com/embed.js';
|
||||
(d.head || d.body).appendChild(s);
|
||||
}
|
||||
}
|
||||
if(!!window.IntersectionObserver) {
|
||||
const disqusEl = document.getElementById('disqus_thread');
|
||||
const intersectionObserver = new IntersectionObserver(function(entries, observer) {
|
||||
if (entries && entries[0] && entries[0].isIntersecting) {
|
||||
loadComments();
|
||||
observer.unobserve(disqusEl);
|
||||
}
|
||||
});
|
||||
intersectionObserver.observe(disqusEl);
|
||||
}</script></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>
|
||||
});</script></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,13 @@
|
|||
"description": "『情報コース』ご紹介、独自のブロックプログラミング環境『オコゲ』、教室での実習内容や周辺技術情報等のアウトプット"
|
||||
},
|
||||
|
||||
{
|
||||
"url": "/2023-11-20_oled/",
|
||||
"title": "『オコゲ』で有機ELミニディスプレイ",
|
||||
"date": "2023年11月22日",
|
||||
"description": "SSD1306 搭載 OLED モジュールに線や文字を描画する『オコゲ』ブロック"
|
||||
},
|
||||
|
||||
{
|
||||
"url": "/2023-03-22_server/",
|
||||
"title": "おこげ倶楽部自宅サーバについて",
|
||||
|
|
@ -42,13 +49,6 @@
|
|||
"description": "Raspberry Pi と LCD キャラクタディスプレイモジュールで「ゲーム電卓」を再現してみる"
|
||||
},
|
||||
|
||||
{
|
||||
"url": "/2022-06-13_ocoge-desktop/",
|
||||
"title": "『オコゲ』デスクトップ",
|
||||
"date": "2022年6月13日",
|
||||
"description": "Raspberry Pi デスクトップアプリ版『オコゲ』について"
|
||||
},
|
||||
|
||||
{
|
||||
"url": "/2022-05-16_tf-janken/",
|
||||
"title": "『オコゲ』でぐーちょきぱーを機械学習",
|
||||
|
|
@ -81,14 +81,7 @@
|
|||
"url": "/2022-05-13_account/",
|
||||
"title": "受講生限定アカウントサービス",
|
||||
"date": "2022年5月13日",
|
||||
"description": "『情報コース』受講者でご希望の方に、『おこげ倶楽部』オリジナルのメールアドレスと Git アカウントを進呈しております。"
|
||||
},
|
||||
|
||||
{
|
||||
"url": "/2022-05-08_server/",
|
||||
"title": "おこげ倶楽部自宅サーバについて",
|
||||
"date": "2022年5月7日",
|
||||
"description": "ocoge.club は Orange Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ、Git サーバ稼働中。"
|
||||
"description": "『情報コース』受講者でご希望の方に、『おこげ倶楽部』オリジナルのメールアドレスとクラウドストレージを進呈しております。"
|
||||
},
|
||||
|
||||
{
|
||||
|
|
|
|||
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
|
|
@ -1,138 +0,0 @@
|
|||
<!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>『オコゲ』Pico (MicroPython) 対応について | おこげ俱楽部</title>
|
||||
<meta name="title" content="『オコゲ』Pico (MicroPython) 対応について | おこげ俱楽部">
|
||||
<meta name="description" content="アプリ版『オコゲ』のオマケ機能として、Raspberry Pi Pico と互換ボードに（一部）対応しました。">
|
||||
<meta name="keywords" content="オコゲ,デスクトップアプリ版,Pico,オコゲ,blockly,プログラミング,上野学習塾">
|
||||
<meta name="author" content="ocoge.club">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://ocoge.club/pico-intro/">
|
||||
<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/ogp_rp2040boards.webp">
|
||||
<meta property="og:title" content="『オコゲ』Pico (MicroPython) 対応について | おこげ俱楽部">
|
||||
<meta property="og:description" content="アプリ版『オコゲ』のオマケ機能として、Raspberry Pi Pico と互換ボードに（一部）対応しました。">
|
||||
<meta property="og:url" content="https://ocoge.club/pico-intro/">
|
||||
<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">『オコゲ』Pico (MicroPython) 対応について</h1>
|
||||
<div class="text-center"><i class="fa-regular fa-clock"></i> 2023年3月2日</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>
|
||||
|
||||
<a href="/tags/Pico" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#Pico</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-10 -mx-7 md:mx-0">
|
||||
<img class="w-full max-w-2xl mx-auto" src="/assets/img/ogp_rp2040boards.webp" alt="This post thumbnail">
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div id="content" class="prose text-gray-800 max-w-none">
|
||||
<div class="box_stripe"><p>一部のブロックで Raspberry Pi Pico (MicroPython) コードの出力に対応しました。</p></div>
|
||||
<div class="balloon_right">
|
||||
<div class="faceicon_right">
|
||||
<img src="/assets/img/mimmy.webp">
|
||||
<p>ミミィ</p>
|
||||
</div><div class="chatting">
|
||||
<div class="says_right"><p>
|
||||
始めたばっかりなのでほんのちょっぴりだけヨ！<br>
|
||||
具体的には「ゲーム電卓パイ」のページにあるブロックプログラムに対応しているワ！
|
||||
</p></div>
|
||||
</div>
|
||||
</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">ocoge.club</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
|
|
@ -3,26 +3,25 @@
|
|||
<url><loc>https://ocoge.club/2022-04-27_ict-motto/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-05-01_ocoge-about/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-05-07_demo/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-05-08_server/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-05-13_account/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-05-14_mascots/</loc></url>
|
||||
<url><loc>https://ocoge.club/petit-lesson/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-05-14_petitlesson-01_typewriter-1/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-05-16_tf-janken/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-06-13_ocoge-desktop/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-06-10_game-dentak/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-06-21_aqm0802a/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-07-26_rp2040/</loc></url>
|
||||
<url><loc>https://ocoge.club/2022-08-03_paj7620/</loc></url>
|
||||
<url><loc>https://ocoge.club/2023-03-22_server/</loc></url>
|
||||
<url><loc>https://ocoge.club/404.html</loc></url>
|
||||
<url><loc>https://ocoge.club/about/</loc></url>
|
||||
<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/</loc></url>
|
||||
<url><loc>https://ocoge.club/img/</loc></url>
|
||||
<url><loc>https://ocoge.club/search/</loc></url>
|
||||
<url><loc>https://ocoge.club/tags/</loc></url>
|
||||
<url><loc>https://ocoge.club/2023-03-22_server/</loc></url>
|
||||
<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
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
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
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "ocoge.club",
|
||||
"name": "ocogeclub",
|
||||
"homepage": "https://ocoge.club",
|
||||
"bio": "",
|
||||
"avatar": "/assets/img/author.gif",
|
||||
|
|
|
|||
|
|
@ -8,10 +8,15 @@
|
|||
"url": "/tags"
|
||||
},
|
||||
{
|
||||
"label": "Cloud/Mail",
|
||||
"label": "Cloud",
|
||||
"url": "https://cloud.ocoge.club/",
|
||||
"newTab": true
|
||||
},
|
||||
{
|
||||
"label": "Mail",
|
||||
"url": "https://mail.ocoge.club/",
|
||||
"newTab": true
|
||||
},
|
||||
{
|
||||
"label": "ocogIt",
|
||||
"url": "https://git.ocoge.club/ocogeclub/pages",
|
||||
|
|
|
|||
|
|
@ -24,4 +24,4 @@ Raspberry Pi の GPIO（汎用入出力端子）に接続したセンサや LED
|
|||
## その他技術情報
|
||||
|
||||
- {% link_new {uri: 'https://nodejs.org/',title: ''} %}Node.js{% endlink_new %} + {% link_new {uri: 'https://www.electronjs.org/',title: ''} %}Electron{% endlink_new %} によりデスクトップアプリケーションとして動作
|
||||
- GPIO ライブラリには {% link_new {uri: 'http://abyz.me.uk/rpi/pigpio/pigpiod.html',title: ''} %}pigpiod{% endlink_new %} を使用し、{% link_new {uri: 'https://git.ocoge.club/ocoge.club/ocoge/src/branch/master/local_modules/@ocoge.club/pigpio',title: ''} %}自作ネイティブモジュール{% endlink_new %}により『オコゲ』から直接 GPIO へのアクセスが可能。
|
||||
- GPIO ライブラリには {% link_new {uri: 'https://abyz.me.uk/lg/index.html',title: ''} %}rgpio{% endlink_new %} を使用し、{% link_new {uri: 'https://git.ocoge.club/ocogeclub/ocoge/src/branch/master/local_modules/rgpio',title: ''} %}自作ネイティブモジュール{% endlink_new %}により『オコゲ』から直接 GPIO へのアクセスが可能。
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
eleventyExcludeFromCollections: true
|
||||
title: "おこげ倶楽部自宅サーバについて"
|
||||
description: "ocoge.club は Orange Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ、Git サーバ稼働中。"
|
||||
date: 2022-05-07
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
---
|
||||
title: "受講生限定アカウントサービス"
|
||||
description: "『情報コース』受講者でご希望の方に、『おこげ倶楽部』オリジナルのメールアドレスと Git アカウントを進呈しております。"
|
||||
description: "『情報コース』受講者でご希望の方に、『おこげ倶楽部』オリジナルのメールアドレスとクラウドストレージを進呈しております。"
|
||||
date: 2022-05-13
|
||||
thumb: "ogp_ocogeclub-duck.webp"
|
||||
tags:
|
||||
- ICT-Course
|
||||
- ICT-Course
|
||||
---
|
||||
|
||||
『情報コース』受講者でご希望の方に、『おこげ倶楽部』オリジナルのメールアドレスと Git サーバアカウントを進呈しております。
|
||||
『情報コース』受講者でご希望の方に、『おこげ倶楽部』オリジナルのメールアドレスとクラウドストレージを進呈しております。
|
||||
|
||||
## 『おこげ倶楽部』メールアドレス
|
||||
|
||||
{% floatbox {
|
||||
img: 'rainloop.webp',
|
||||
title: 'RainLoop',
|
||||
img: 'snappymail.webp',
|
||||
title: 'SnappyMail',
|
||||
width: '400px',
|
||||
colortheme: 'silver'
|
||||
} %}
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
{% endfloatbox %}
|
||||
|
||||
お好きな名前@ocoge.club というメールアドレスを取得できます（※名前が使用済みでない場合に限ります）。また、画像のようなウェブメールクライアントをご用意していますので、特別なソフトウェアや設定をすることなしに、ウェブブラウザですぐにご利用になれます。
|
||||
お好きな名前@ocoge.club というメールアドレスを取得できます（※名前が使用済みでない場合に限ります）。また、画像のようなウェブメールクライアント（下記 Nextcloud プラグイン）をご用意していますので、特別なソフトウェアや設定をすることなしに、ウェブブラウザですぐにご利用になれます。
|
||||
|
||||
## Git サーバ
|
||||
## クラウドストレージ（Nextcloud）
|
||||
|
||||
{% floatbox {
|
||||
img: 'ocogit.webp',
|
||||
title: 'ocogIt',
|
||||
img: 'nextcloud-hub.webp',
|
||||
title: 'Nextcloud Hub',
|
||||
width: '400px',
|
||||
colortheme: 'silver'
|
||||
} %}
|
||||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
{% endfloatbox %}
|
||||
|
||||
> Git（ギット）は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。( {% link_new {uri: 'https://ja.wikipedia.org/wiki/Git',title: 'Git | Wikipedia'} %}Wikipedia{% endlink_new %} )
|
||||
> Nextcloud は、オンラインストレージの作成と使用のためのクライアント・サーバ型のソフトウェアである。機能的には Dropbox に似ている(略）。Nextcloud はフリーかつオープンソースなので、誰でも自分のプライベートサーバにインストールして利用することができる。( {% link_new {uri: 'https://ja.wikipedia.org/wiki/Nextcloud',title: 'Nextcloud | Wikipedia'} %}Wikipedia{% endlink_new %} )
|
||||
|
||||
コースで作成したプログラムソースなどの管理をすることができます。（Git についての緩い感じの解説は{% link_new {uri: 'https://wa3.i-3-i.info/word12778.html',title: ''} %}こちら{% endlink_new %}）
|
||||
コースで作成したプログラムソースなどをご家庭からも閲覧・利用できるよう、独自のクラウドストレージをご用意いたしました。
|
||||
|
||||
## セキュリティ対策
|
||||
|
||||
常時SLL対応済み、不要ポート閉鎖など
|
||||
常時 SLL 対応済み、不要ポート閉鎖など
|
||||
以下は、セキュリティチェックサイトでのスコア。
|
||||
|
||||
### メール
|
||||
|
|
@ -53,5 +53,5 @@ tags:
|
|||
<i class="fa-solid fa-magnifying-glass"></i> クリックで拡大
|
||||
{% endfloatbox %}
|
||||
|
||||
POP3などはポートを閉じているため No Info となっているようです。
|
||||
安心してご利用いただける範囲内である…と、思われます。
|
||||
POP3 などはポートを閉じているため No Info となっているようです。
|
||||
安心してご利用いただける範囲内である…と、思われます。
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ 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 %}も用意されています。
|
||||
{% simplebox 'box_stripe' %}Raspberry Pi 専用デスクトップアプリ『オコゲ』は、Raspberry Pi の GPIO に直接アクセス{% annotate 1 %}することができます。また、特定のモジュールに対応した専用ブロック{% annotate %}も用意されています。
|
||||
ここでは、デスクトップ版『オコゲ』の目玉機能のひとつ、GPIO と TensorFlow.js{% annotate %} を使った「機械学習体験」をご紹介いたします。{% endsimplebox %}
|
||||
|
||||
{% talkicon_l {img: 'tama.webp', name: 'タマちー'} %}{% says_l %}
|
||||
|
|
@ -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. 同様にして「ぐー」「ちょき」「ぱ」を学習。いずれも２回クリックで正しい推論をするようになった。念のため３回クリック
|
||||
1. その後はハンドポーズを正しく答えることができるようになる
|
||||
|
||||
なんということでしょう。たった3×4=12回のクリックでぐーちょきぱー判別の機械学習ができてしまいました。上のプログラムでは使われていませんが、学習したデータを保存・復元するブロックもありますので、育てた学習データを他のプログラムから呼び出して利用することができます。
|
||||
なんということでしょう。たった 3×4=12 回のクリックでぐーちょきぱー判別の機械学習ができてしまいました。上のプログラムでは使われていませんが、学習したデータを保存・復元するブロックもありますので、育てた学習データを他のプログラムから呼び出して利用することができます。
|
||||
|
||||
## ちょっと詳しく
|
||||
|
||||
|
|
@ -151,10 +150,9 @@ Google で「機械学習」を検索してトップに表示される野村総
|
|||
|
||||
しかし、機械学習を一からやろうとすると、大量（画像何千枚とかのレベル）のサンプルデータとそれを学習するための高い処理能力を持つコンピュータ、そして膨大な学習時間が必要です。Raspberry Pi のような非力な子はお呼びではありません。理論も難解で（{% link_new {uri: 'https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%B3%E3%82%BD%E3%83%AB',title: ''} %}テンソル{% endlink_new %}って何さ？）、「ばあさんや、なんか流行りらしいからちょっと齧ってみようかね」というわけにはなかなかいきません。先人が作った機械学習のデータ（モデルと呼びます）を利用するという手もありますが、応用がききません。犬種を分類する学習済みモデルを猫に使うことはできないからです。
|
||||
|
||||
そこで考案されたのが「転移学習 (Transfer Learning)」です。ある分野ですでに学習済みのモデルを別の分野での推論に転用して、少ないサンプルデータと学習時間で成果を出そうという手法です。言ってみれば成績の良い先輩からノートを借りてテスト勉強をするようなイメージです。
|
||||
『オコゲ』の機械学習ブロックは、この転移学習を利用して簡単お手軽に機械学習を行うことができるようになっています。
|
||||
そこで考案されたのが「転移学習 (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 %}
|
||||
ポーズをとるのが恥ずかしくて試してないんですって！
|
||||
|
|
@ -167,11 +165,11 @@ Google で「機械学習」を検索してトップに表示される野村総
|
|||
## 注釈
|
||||
|
||||
{% small 1 %}pigpio デーモンを利用するので厳密には直接ではないが...{% endsmall %}
|
||||
{% small %} 2022年５月現在、センサー専用ブロックは次の通り。
|
||||
{% small %} 2022 年５月現在、センサー専用ブロックは次の通り。
|
||||
● 赤外線アレイセンサ（サーマルカメラ）AMG8833
|
||||
● ジェスチャーセンサー PAJ7620
|
||||
● 温湿度センサー DHT11
|
||||
● 温湿度気圧センサー BME280
|
||||
● 赤外線アレイセンサ（サーマルカメラ）AMG8833{% 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 %}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ tags:
|
|||
- デスクトップアプリ版
|
||||
---
|
||||
|
||||
{% simplebox 'box_stripe' %}CASIO のレトロガジェット「ゲーム電卓」を、『オコゲ』と LCD キャラクタディスプレイモジュールで作成します。
|
||||
{% simplebox 'box_stripe' %}CASIO のレトロガジェット「ゲーム電卓」を、デスクトップ版『オコゲ』と LCD キャラクタディスプレイモジュールで作成します。
|
||||
※ コード開発と記事は同時進行ですので、まったり更新＆内容変更有です。{% endsimplebox %}
|
||||
|
||||
## 「ゲーム電卓」とは
|
||||
|
|
@ -29,12 +29,6 @@ tags:
|
|||
ミミィって歳いくつなんだろ・・・
|
||||
{% endthink_l %}
|
||||
|
||||
## 準備
|
||||
|
||||
以下の記事に従ってデスクトップアプリ『オコゲ』の導入と設定を行ってください。
|
||||
|
||||
{% blogcard {link:'http://localhost/2022-06-13_ocoge-desktop/'} %}
|
||||
|
||||
## ハードウェア
|
||||
|
||||
- Raspberry Pi 4B (8GB)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
eleventyExcludeFromCollections: true
|
||||
title: "『オコゲ』デスクトップ"
|
||||
description: "Raspberry Pi デスクトップアプリ版『オコゲ』について"
|
||||
date: 2022-06-13
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ tags:
|
|||
１行目に「ocoge」、２行目に「club」と表示してみよう・・・
|
||||
{% endsays_l %}
|
||||
|
||||
{% simplebox 'box_stripe' %}手順説明の下に『オコゲ』のブロックで組み立てたプログラムコードを畳んで置いてあります。クリックすると開きます。{% endsimplebox %}
|
||||
{% simplebox 'box_stripe' %}手順説明の下に『オコゲ』のブロックで組み立てたプログラムコードを畳んで置いてあります。クリックすると開きます。
|
||||
※一部ブロックの形状が現行バージョンと異なります。{% endsimplebox %}
|
||||
|
||||
{% talkicon_r {img: 'mimmy.webp', name: ''} %}{% says_r %}
|
||||
それとこの先の説明では16進数と2進数が何の説明もなく出てくるわ！
|
||||
|
|
|
|||
|
|
@ -2,51 +2,64 @@
|
|||
title: "おこげ倶楽部自宅サーバについて"
|
||||
description: "ocoge.club は Raspberry Pi 自宅サーバにてホスティングされています。Webサーバ、メールサーバ稼働中。さらに..."
|
||||
date: 2023-03-22
|
||||
thumb: "opi-server.webp"
|
||||
thumb: "ocoge-server_2023.webp"
|
||||
tags:
|
||||
- 技術情報
|
||||
---
|
||||
|
||||
{% simplebox 'box_stripe' %}唐突ですが「{% span "mfb" %}押し入れで眠っている RPi を活用しようプロジェクト{% endspan %}」の一環として、ocoge.club のウェブサーバマシンは Raspberry Pi 3B+ へ変更となりました。{% endsimplebox %}
|
||||
|
||||
ocoge.club は Raspberry Pi 自宅サーバ（上写真）にてホスティングされています。現在 Webサーバ、メールサーバが稼働しています。また、別マシン {% link_new {uri: 'http://www.orangepi.org/html/hardWare/computerAndMicrocontrollers/details/orange-pi-3-LTS.html',title: 'Orange Pi 3 LTS'} %}Orange Pi 3 LTS{% endlink_new %} にクラウドサーバを入れてリバースプロキシを通した２台体制で運用しています。数千円で~~購入できる~~手のひらサイズのシングルボードコンピュータと3千円程度のSSDを使ってなかなか充実したネットサービスごっこwができます。
|
||||
ocoge.club は Raspberry Pi 自宅サーバ（上写真）にてホスティングされています。現在 Webサーバ、メールサーバが稼働しています。また、別マシン {% link_new {uri: 'http://www.orangepi.org/html/hardWare/computerAndMicrocontrollers/details/Orange-Pi-3B.html',title: 'Orange Pi 3B'} %}Orange Pi 3B{% endlink_new %} にクラウドサーバを入れてリバースプロキシを通した２台体制で運用しています。数千円で購入できる手のひらサイズのシングルボードコンピュータと3千円程度のSSDを使ってなかなか充実したネットサービスごっこwができます。
|
||||
|
||||
{% talkicon_l {img: 'tama.webp', name: 'タマちー'} %}{% says_l %}
|
||||
「おこげ俱楽部」は、軽量多目的 ~~Raspberry Pi~~ {% link_new {uri: 'http://www.orangepi.org/',title: 'Orange Pi'} %}Orange Pi{% endlink_new %} サーバーとして絶賛改装中です...。
|
||||
「おこげ俱楽部」は、軽量多目的 Raspberry Pi サーバーとして絶賛開店中です...。
|
||||
{% endsays_l %}
|
||||
{% talkicon_r {img: 'mimmy.webp', name: 'ミミィ'} %}{% says_r %}
|
||||
市場でラズパイが枯渇している関係で、サーバのハードウェアを 4B(4GB) から、現状最も手に入りやすい中華~~パチモン~~ <span title="シングルボードコンピュータ">SBC</span> の Orange Pi に変更したのよね！軽量化のために{% span "mfy" %}{% link_new {uri: "https://ja.wordpress.org", title: "シェア世界一の CMS"} %}WordPress{% endlink_new %}{% endspan %} をやめて {% span "mfg" %}{% link_new {uri: "https://jamstack.org", title: "ちょっと何言ってるか分からない"} %}Jamstack{% endlink_new %}{% endspan %} にするとかの対応中ヨ！
|
||||
市場で一時期ラズパイが品薄・価格高騰した関係で、サーバのハードウェアを 4B(4GB) から、一世代古い 3B+ に変更したのよね！軽量化のために{% span "mfy" %}{% link_new {uri: "https://ja.wordpress.org", title: "シェア世界一の CMS"} %}WordPress{% endlink_new %}{% endspan %} をやめて {% span "mfg" %}{% link_new {uri: "https://jamstack.org", title: "ちょっと何言ってるか分からない"} %}Jamstack{% endlink_new %}{% endspan %} にするとかの対応をしたワ！
|
||||
{% endsays_r %}
|
||||
{% talkicon_l {img: 'tama.webp', name: ''} %}{% think_l %}
|
||||
らずぱい売ってない... 困る...
|
||||
らずぱい高くなった...
|
||||
{% endthink_l %}
|
||||
{% talkicon_r {img: 'mimmy.webp', name: ''} %}{% says_r %}
|
||||
RSコンポーネンツの通販サイトに「11月入荷」とか書いてあるのよ！
|
||||
鬼も笑えないわ！！
|
||||
在庫はだいぶ回復してきた{% annotate 1 %}ようで一安心ね！価格はもうこのご時世じゃ諦めるしかないワ！
|
||||
{% endsays_r %}
|
||||
|
||||
## ハードウェア構成
|
||||
|
||||
- {% link_new {uri: 'http://www.orangepi.org/Orange%20Pi%203%20LTS/index.html',title: ''} %}Orange Pi 3 LTS{% endlink_new %}
|
||||
### サーバ１
|
||||
|
||||
- {% link_new {uri: 'https://www.raspberrypi.com/products/raspberry-pi-3-model-b-plus/',title: ''} %}Raspberry Pi 3B+{% endlink_new %} + {% link_new {uri: 'https://geekworm.com/products/raspberry-pi-3-aluminum-alloy-heavy-duty-passive-cooling-case-black-p252',title: 'Geekworm Raspberry Pi 3B+/3B Aluminum Alloy Heavy Duty Passive Cooling Case-Black'} %}アルミケース{% endlink_new %}
|
||||
- Crucial SSD 120GB 2.5インチ (CT120BX500SSD1JP)
|
||||
- Salcar USB-C 2.5インチ SATA HDD/SSDケース
|
||||
|
||||
ケースは RPi 用を流用。ネジ穴が合わなかったので百均の耐震マットを小さく切って貼り付け。
|
||||
### サーバ２
|
||||
|
||||
- {% link_new {uri: 'http://www.orangepi.org/html/hardWare/computerAndMicrocontrollers/details/orange-pi-3-LTS.html',title: ''} %}Orange Pi 3 LTS{% endlink_new %}
|
||||
- グリーンハウス SSD 120GB (GH-SSDR2SA120)
|
||||
- GiGimundo 2.5インチ HDD ケース
|
||||
|
||||
## ソフトウェア構成
|
||||
|
||||
### サーバ１
|
||||
|
||||
| 種類 | 名称 |
|
||||
| --- | --- |
|
||||
| OS | {% link_new {uri: 'http://www.orangepi.org/downloadresources/',title: ''} %}Orange Pi3 LTS Debian Buster Server{% endlink_new %} |
|
||||
| OS | {% link_new {uri: 'https://www.raspberrypi.com/software/operating-systems/',title: ''} %}Raspberry Pi OS (64-bit) Lite{% endlink_new %} |
|
||||
| Webサーバ | {% link_new {uri: 'https://nginx.org/en/',title: ''} %}Nginx{% endlink_new %} |
|
||||
| サーバサイドインタプリタ | {% link_new {uri: 'https://www.php.net/',title: ''} %}PHP{% endlink_new %} |
|
||||
| データベース | {% link_new {uri: 'https://www.sqlite.org/index.html',title: ''} %}SQLite3{% endlink_new %} |
|
||||
| サーバサイドプログラム | CGI ({% link_new {uri: 'https://www.server-world.info/query?os=Ubuntu_22.04&p=nginx&f=8',title: 'Server World'} %}FastCGI Wrap{% endlink_new %}) ※ローカルアクセスのみ |
|
||||
| メールサーバ (MTA) | {% link_new {uri: 'http://www.postfix.org/',title: ''} %}Postfix{% endlink_new %} |
|
||||
| Webメールクライアント | {% link_new {uri: 'https://www.rainloop.net/',title: ''} %}Rainloop{% endlink_new %} |
|
||||
| POP/IMAP サーバ | {% link_new {uri: 'https://www.dovecot.org/',title: ''} %}Dovecot{% endlink_new %} |
|
||||
| Git サーバ | {% link_new {uri: 'https://gitea.io/',title: ''} %}Gitea{% endlink_new %} |
|
||||
|
||||
このほか、スパムメール対策に {% link_new {uri: 'https://spamassassin.apache.org/',title: ''} %}SpamAssasin{% endlink_new %} であるとか証明書取得に {% link_new {uri: 'https://letsencrypt.org/ja/',title: ''} %}Let’s Encrypt (certbot){% endlink_new %} であるとか
|
||||
### サーバ２
|
||||
|
||||
| 種類 | 名称 |
|
||||
| --- | --- |
|
||||
| OS | {% link_new {uri: 'https://www.armbian.com/orangepi-5/',title: ''} %}Armbian Jammy CLI{% endlink_new %} |
|
||||
| Git サーバ | {% link_new {uri: 'https://forgejo.org/',title: ''} %}Forgejo{% endlink_new %} |
|
||||
| クラウドサーバ | {% link_new {uri: 'https://nextcloud.com/',title: ''} %}Nextcloud HUB 4{% endlink_new %} |
|
||||
| Web メールクライアント | {% link_new {uri: 'https://snappymail.eu/',title: ''} %}SnappyMail{% endlink_new %}（Nextcloud プラグイン） |
|
||||
|
||||
このほか、証明書取得に {% link_new {uri: 'https://letsencrypt.org/ja/',title: ''} %}Let’s Encrypt (certbot){% endlink_new %} とか
|
||||
|
||||
## その他利用しているもの
|
||||
|
||||
|
|
@ -60,10 +73,6 @@ RSコンポーネンツの通販サイトに「11月入荷」とか書いてあ
|
|||
{% link_new {uri: 'https://samhobbs.co.uk/raspberry-pi-email-server',title: ''} %}Sam Hobbs | Raspberry Pi Email Server{% endlink_new %}
|
||||
英語でメールサーバのみの解説ではあるが、ステップごとにインストールや設定がうまくいっているかどうか確認を行うことができるようになっているため、長い作業の中でどこでミスをしたのか、または不具合が出ているのかがわかりやすい。また、設定をデフォルトから変更する箇所にそれぞれ設定の意味の説明があり、自分が何をしているのかがわかるため、ソフトウェアのアップデートで設定項目やその値に変更があり見本と齟齬が生じていても対処が容易である。わけもわからず言われた通り延々ソフトウェアのインストールと設定ファイルの書き換えを繰り返し、辟易しながら終わらせたものの結局動作せず問題のある個所も見当がつかないまま挫折、などという悲劇を起こしにくい、ナイスなサイト。
|
||||
|
||||
{% talkicon_l {img: 'tama.webp', name: ''} %}{% says_l %}
|
||||
WordPress と NextCloud の運用をやめた理由は実は別にあったりする...
|
||||
{% endsays_l %}
|
||||
{% talkicon_r {img: 'mimmy.webp', name: ''} %}{% says_r %}
|
||||
セキュリティアップデートが面倒だったのヨ！
|
||||
仕事でもないのにあんなのやってられないワ！！
|
||||
{% endsays_r %}
|
||||
## 注釈
|
||||
|
||||
{% small 1 %}2023年8月現在{% endsmall %}
|
||||
|
|
@ -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 接続（７ピン）は対応していないワ！
|
||||
あと画面サイズも 128x64, 128x32, 96x16 の３種類だけヨ！
|
||||
{% endsays_r %}
|
||||
{% talkicon_l {img: 'tama.webp', name: 'タマちー'} %}{% think_l %}
|
||||
そのうち PNG 表示とかもできるようにしたい・・・
|
||||
{% endthink_l %}
|
||||
|
|
@ -13,7 +13,7 @@ tags: ICT-Course
|
|||
|
||||
## クイックリンク
|
||||
|
||||
まず目を通していただきたいページをいくつかご紹介いたします。
|
||||
まず目を通していただきたい記事をいくつかご紹介いたします。
|
||||
|
||||
### 『情報コース』もっとくわしく編
|
||||
|
||||
|
|
@ -33,14 +33,10 @@ tags: ICT-Course
|
|||
|
||||
{% blogcard {link:'http://localhost/petit-lesson/'} %}
|
||||
|
||||
### 技術情報
|
||||
|
||||
初級者向け、Raspberry Pi や ICT について気付いたことや覚えておきたいことなどを記していきます。
|
||||
「技術情報」タグをご覧ください。
|
||||
|
||||
## おこげ倶楽部自宅サーバ
|
||||
|
||||
『おこげ倶楽部』は、{% link_new {uri: 'https://www.raspberrypi.com/products/raspberry-pi-3-model-b-plus/?resellerType=education',title: 'Raspberry Pi 3 Model B+'} %}Raspberry Pi 3 Model B+{% endlink_new %} を使った自宅サーバで稼働しています。ネット回線やハードウェアが専用業者のものに比べて貧弱であるため、表示に多少時間がかかることがありますことをご了承ください。
|
||||
これは、ちいさな SBC（シングルボードコンピュータ）でミニマルなサーバ運用のデモンストレーションの意味もあります。興味がおありでしたら、以下の記事もどうぞ。
|
||||
|
||||
{% blogcard {link:'http://localhost/2022-05-08_server/'} %}
|
||||
{% blogcard {link:'http://localhost/2023-03-22_server/'} %}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
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: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -46,11 +46,6 @@ tags:
|
|||
※ レンダリングエンジンに Blink (Chromium) を使用しているブラウザ（Microsoft Edge、Yandex Browserなど）は使用可能です。
|
||||
※ 使用できないブラウザの例：Firefox（「CODE」ツールボタン動作せず）、Internet Explorer（画面すらまともに表示されず:D~~）など。
|
||||
|
||||
### 1-Wire 設定は「無効」にしましょう
|
||||
|
||||
アプリケーションメニュー→メニューRaspberry Pi の設定→インターフェイスタブの「1-Wire」を有効にすると、 デバイスとの接続に 1-Wire 通信という規格が使用できるようになります。使用するピンはデフォルトで GPIO4 で、「1-Wire」有効時にこのピンを他の目的で使用すると予期せぬ動作をすることがあります。当教室で確認した具体的な例としては LED をつないで点灯させると数秒（一瞬のことも）で勝手に消灯してしまう、PWMを使ってLEDの明るさを変更すると意図しない点滅をするなどです。
|
||||
GPIO4 は隣が GND で使いやすいためか多くのサンプルで使用されています。{% span "mfr" %}1-Wire デバイス機器を使用しないのであれば、「1-Wire」は無効にしておく方が無難です。{% endspan %}
|
||||
|
||||
## 目次
|
||||
|
||||
{% blogcard {link:'http://localhost/2022-05-14_petitlesson-01_typewriter-1/'} %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
eleventyExcludeFromCollections: true
|
||||
title: ""
|
||||
description: ""
|
||||
date: Last Modified
|
||||
thumb: ".webp"
|
||||
tags:
|
||||
- オコゲ
|
||||
- デスクトップアプリ版
|
||||
---
|
||||
|
||||
{% simplebox 'box_stripe' %}{% endsimplebox %}
|
||||
Loading…
Reference in New Issue