ブロックプログラミング環境『オコゲ』
『オコゲ [ocoge: code generator]』は、 Google Blockly ライブラリを使用した、Raspberry Pi 用ブロックプログラミング環境です。 プログラム言語を覚える必要がなく、未経験の方でもすぐにプログラミングの楽しさを体験することができます。
デモンストレーション
『オコゲ』Web 体験版 | おこげ俱楽部
ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。
おこげ俱楽部機能と特徴
- Google Blockly を用いたブロックプログラミングによる開発・実行環境
特別な機能を持ったブロックをつなげていくだけでプログラムを組み立てることができます。プログラム言語を覚える必要がないため、アルゴリズム（処理の手順）を考えることに集中できます。また、作成したプログラムは『オコゲ』上ですぐに実行することができます。 - GPIO 入出力
Raspberry Pi の GPIO（汎用入出力端子）に接続したセンサや LED、サーボモータなどを操作するプログラムを作成・実行できます。 - Javascript コードジェネレータ
ブロックで作成したプログラムを Javascript 言語で出力・閲覧することができます。次のステップ（コードによるプログラミング）に進むための足がかりになります。
その他技術情報
- Node.js + Electron によりデスクトップアプリケーションとして動作
- GPIO ライブラリには pigpiod を使用し、自作ネイティブモジュール により『オコゲ』から直接 GPIO へのアクセスが可能。
ブロックプログラミング環境『オコゲ』
『オコゲ [ocoge: code generator]』は、 Google Blockly ライブラリを使用した、Raspberry Pi 用ブロックプログラミング環境です。 プログラム言語を覚える必要がなく、未経験の方でもすぐにプログラミングの楽しさを体験することができます。
デモンストレーション
『オコゲ』Web 体験版 | おこげ俱楽部
ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。
おこげ俱楽部機能と特徴
- Google Blockly を用いたブロックプログラミングによる開発・実行環境
特別な機能を持ったブロックをつなげていくだけでプログラムを組み立てることができます。プログラム言語を覚える必要がないため、アルゴリズム（処理の手順）を考えることに集中できます。また、作成したプログラムは『オコゲ』上ですぐに実行することができます。 - GPIO 入出力
Raspberry Pi の GPIO（汎用入出力端子）に接続したセンサや LED、サーボモータなどを操作するプログラムを作成・実行できます。 - Javascript コードジェネレータ
ブロックで作成したプログラムを Javascript 言語で出力・閲覧することができます。次のステップ（コードによるプログラミング）に進むための足がかりになります。
その他技術情報
- Node.js + Electron によりデスクトップアプリケーションとして動作
- GPIO ライブラリには rgpio を使用し、自作ネイティブモジュール により『オコゲ』から直接 GPIO へのアクセスが可能。
『オコゲ』Web 体験版
※ Web 体験版は Google Chrome (Chromium) 推奨です。それ以外のブラウザをご使用の場合、表示が乱れたり、機能の一部が使用できないことがあります。 ※ レンダリングエンジンに Blink (Chromium) を使用しているブラウザは使えます。例えば、Microsoft Edge（バージョン79.0.309.65以降）、Yandex Browser（日本じゃ誰も使ってないだろうけど）などです。
ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。下の方にあるサンプルプログラムを組んで試してみてください。それが済んだら「プチレッスン」にも挑戦してみましょう。
404
各部の名称と使い方
- コーディング
ツールボックスのカテゴリをクリックするとフライアウトが開きます。フライアウト上のブロックをドラッグしてワークスペースに配置します。
ワークスペース上に配置したブロックは、ドラッグで移動できます。基本的にはつまんだブロックは上のブロックと切り離され、その下のブロックとはつながったまま移動します。つまんだブロックだけを取り出したい場合はキーボードの Ctrl キーを押しながらドラッグします。
つまんだブロックは、ツールボックスかゴミ箱の上にドロップすると削除することができます。 - プログラムの実行
「実行」メニューボタンをクリックします。 - 実行停止（リロード）
自動的に実行が停止しないコードや画面上にエレメントを表示するようなプログラムの場合、「リロード」メニューボタン をクリックすることでアプリケーションをリセットすることができます。ワークスペース上にあるブロックはそのまま残ります。 - ワークスペース保存
「保存」メニューボタンをクリックすると、XMLファイルがダウンロードされますのでローカルに保存してください。 - ワークスペース読込
「開く」メニューボタンをクリックすると、ファイル選択ダイアログが開くので、ワークスペースを保存した XML ファイルを選択してください。 - ワークスペースをクリア
「新規」メニューボタンをクリックすると、ワークスペース上のブロックが全て消去されます。 - Javascript コードを見る
「CODE」メニューボタンをクリックします。
サンプルプログラム
Web体験版で作成・実行できるプログラムをいくつかご紹介します。ブロックプログラムの画像を見ながら、同じように組み立ててみてください。できたら、画面右上にある「実行」ボタンをおしてみましょう。
簡単な入出力
名前を入力するとその名前を呼んでくれるプログラムです。
実行すると入力欄が表示されるので、名前を入力してエンターキーを押すかチェックボタン をクリックしてください。
タイプライターもどき
「黒板」を表示し、アルファベットを1行に1文字ずつタイプできます。エンターキーやバックスペースキー、矢印キーなどの特殊キーを押してみると…？
※特殊キーを試す前に、ワークスペース上の何もない所をクリックしてブロックからフォーカス（ブロックが枠で囲まれて選択された状態）を外しておいてください。バックスペースを押したときにフォーカスされたブロックがあると削除されてしまうためです。
「プチレッスン」に、もっとタイプライターらしくする課題「タイプライターっぽいもの」を作成しました。
プチレッスン
『オコゲ』Web 体験版を使用して、問題形式でプログラミング学習を体験することができるレッスンをご用意しております。（準備中）
『オコゲ』Web 体験版
※ Web 体験版は Google Chrome (Chromium) 推奨です。それ以外のブラウザをご使用の場合、表示が乱れたり、機能の一部が使用できないことがあります。 ※ レンダリングエンジンに Blink (Chromium) を使用しているブラウザは使えます。例えば、Microsoft Edge（バージョン79.0.309.65以降）、Yandex Browser（日本じゃ誰も使ってないだろうけど）などです。
ブロックプログラミングを体験してみましょう。ハードウェアなどの制限から、Web体験版ではできないこともありますが、感触を確かめることはできます。下の方にあるサンプルプログラムを組んで試してみてください。それが済んだら「プチレッスン」にも挑戦してみましょう。
『オコゲ』Web 体験版
ブロックプログラミングを体験してみましょう
『オコゲ』Web 体験版各部の名称と使い方
- コーディング
ツールボックスのカテゴリをクリックするとフライアウトが開きます。フライアウト上のブロックをドラッグしてワークスペースに配置します。
ワークスペース上に配置したブロックは、ドラッグで移動できます。基本的にはつまんだブロックは上のブロックと切り離され、その下のブロックとはつながったまま移動します。つまんだブロックだけを取り出したい場合はキーボードの Ctrl キーを押しながらドラッグします。
つまんだブロックは、ツールボックスかゴミ箱の上にドロップすると削除することができます。 - プログラムの実行
「実行」メニューボタンをクリックします。 - 実行停止（リロード）
自動的に実行が停止しないコードや画面上にエレメントを表示するようなプログラムの場合、「リロード」メニューボタン をクリックすることでアプリケーションをリセットすることができます。ワークスペース上にあるブロックはそのまま残ります。 - ワークスペース保存
「保存」メニューボタンをクリックすると、XMLファイルがダウンロードされますのでローカルに保存してください。 - ワークスペース読込
「開く」メニューボタンをクリックすると、ファイル選択ダイアログが開くので、ワークスペースを保存した XML ファイルを選択してください。 - ワークスペースをクリア
「新規」メニューボタンをクリックすると、ワークスペース上のブロックが全て消去されます。 - Javascript コードを見る
「CODE」メニューボタンをクリックします。
サンプルプログラム
Web体験版で作成・実行できるプログラムをいくつかご紹介します。ブロックプログラムの画像を見ながら、同じように組み立ててみてください。できたら、画面右上にある「実行」ボタンをおしてみましょう。
簡単な入出力
名前を入力するとその名前を呼んでくれるプログラムです。
実行すると入力欄が表示されるので、名前を入力してエンターキーを押すかチェックボタン をクリックしてください。
タイプライターもどき
「黒板」を表示し、アルファベットを1行に1文字ずつタイプできます。エンターキーやバックスペースキー、矢印キーなどの特殊キーを押してみると…？
※特殊キーを試す前に、ワークスペース上の何もない所をクリックしてブロックからフォーカス（ブロックが枠で囲まれて選択された状態）を外しておいてください。バックスペースを押したときにフォーカスされたブロックがあると削除されてしまうためです。
「プチレッスン」に、もっとタイプライターらしくする課題「タイプライターっぽいもの」を作成しました。
プチレッスン
『オコゲ』Web 体験版を使用して、問題形式でプログラミング学習を体験することができるレッスンをご用意しております。（準備中）
おこげ倶楽部自宅サーバについて
唐突ですが「押し入れで眠っている RPi を活用しようプロジェクト」の一環として、ocoge.club のウェブサーバマシンは Raspberry Pi 3B+ へ変更となりました。
ocoge.club は Raspberry Pi 自宅サーバ（上写真）にてホスティングされています。現在 Webサーバ、メールサーバが稼働しています。また、別マシン Orange Pi 3 LTS にクラウドサーバを入れてリバースプロキシを通した２台体制で運用しています。数千円で購入できる手のひらサイズのシングルボードコンピュータと3千円程度のSSDを使ってなかなか充実したネットサービスごっこwができます。
タマちー
ミミィ
らずぱい高くなった...
在庫はだいぶ回復してきた1ようで一安心ね！価格はもうこのご時世じゃ諦めるしかないわネ！
ハードウェア構成
サーバ１
- Raspberry Pi 3B+ + アルミケース
- Crucial SSD 120GB 2.5インチ (CT120BX500SSD1JP)
- Salcar USB-C 2.5インチ SATA HDD/SSDケース
サーバ２
- Orange Pi 3 LTS
- グリーンハウス SSD 120GB (GH-SSDR2SA120)
- GiGimundo 2.5インチ HDD ケース
ソフトウェア構成
サーバ１
| 種類 | 名称 |
|---|---|
| OS | Raspberry Pi OS (64-bit) Lite |
| Webサーバ | Nginx |
| サーバサイドプログラム | シェルスクリプトCGI (FastCGI Wrap ) |
| メールサーバ (MTA) | Postfix |
| POP/IMAP サーバ | Dovecot |
サーバ２
| 種類 | 名称 |
|---|---|
| OS | Armbian Jammy CLI |
| Git サーバ | Forgejo |
| クラウドサーバ | Nextcloud HUB 4 |
| Web メールクライアント | SnappyMail （Nextcloud プラグイン） |
このほか、証明書取得に Let’s Encrypt (certbot) とか
その他利用しているもの
独自ドメイン (ocoge.club)
MyDNS （無料ダイナミックDNS）
インターネット接続回線（有線LANで接続）
静的サイトジェネレータ 11ty 及びブログテーマ Vredeburg
参考サイト
Sam Hobbs | Raspberry Pi Email Server
英語でメールサーバのみの解説ではあるが、ステップごとにインストールや設定がうまくいっているかどうか確認を行うことができるようになっているため、長い作業の中でどこでミスをしたのか、または不具合が出ているのかがわかりやすい。また、設定をデフォルトから変更する箇所にそれぞれ設定の意味の説明があり、自分が何をしているのかがわかるため、ソフトウェアのアップデートで設定項目やその値に変更があり見本と齟齬が生じていても対処が容易である。わけもわからず言われた通り延々ソフトウェアのインストールと設定ファイルの書き換えを繰り返し、辟易しながら終わらせたものの結局動作せず問題のある個所も見当がつかないまま挫折、などという悲劇を起こしにくい、ナイスなサイト。
セキュリティアップデートが面倒だったのヨ！
WordPress（とテーマ） と Nextcloud と RainLoop（ウェブメールクライアント）を手作業でアプデとか！
仕事でもないのにあんなのやってられないワ！！
今入れてる Nextcloud+SnappyMail は Snap 経由のインストールでそのうえ勝手に自分でアップデートしてくれる…楽…
注釈
1. 2023年8月現在
おこげ倶楽部自宅サーバについて
唐突ですが「押し入れで眠っている RPi を活用しようプロジェクト」の一環として、ocoge.club のウェブサーバマシンは Raspberry Pi 3B+ へ変更となりました。
ocoge.club は Raspberry Pi 自宅サーバ（上写真）にてホスティングされています。現在 Webサーバ、メールサーバが稼働しています。また、別マシン Orange Pi 3 LTS にクラウドサーバを入れてリバースプロキシを通した２台体制で運用しています。数千円で購入できる手のひらサイズのシングルボードコンピュータと3千円程度のSSDを使ってなかなか充実したネットサービスごっこwができます。
タマちー
ミミィ
らずぱい高くなった...
在庫はだいぶ回復してきた1ようで一安心ね！価格はもうこのご時世じゃ諦めるしかないわネ！
ハードウェア構成
サーバ１
- Raspberry Pi 3B+ + アルミケース
- Crucial SSD 120GB 2.5インチ (CT120BX500SSD1JP)
- Salcar USB-C 2.5インチ SATA HDD/SSDケース
サーバ２
- Orange Pi 3 LTS
- グリーンハウス SSD 120GB (GH-SSDR2SA120)
- GiGimundo 2.5インチ HDD ケース
ソフトウェア構成
サーバ１
| 種類 | 名称 |
|---|---|
| OS | Raspberry Pi OS (64-bit) Lite |
| Webサーバ | Nginx |
| サーバサイドプログラム | CGI (FastCGI Wrap ) ※ローカルアクセスのみ |
| メールサーバ (MTA) | Postfix |
| POP/IMAP サーバ | Dovecot |
サーバ２
| 種類 | 名称 |
|---|---|
| OS | Armbian Jammy CLI |
| Git サーバ | Forgejo |
| クラウドサーバ | Nextcloud HUB 4 |
| Web メールクライアント | SnappyMail （Nextcloud プラグイン） |
このほか、証明書取得に Let’s Encrypt (certbot) とか
その他利用しているもの
独自ドメイン (ocoge.club)
MyDNS （無料ダイナミックDNS）
インターネット接続回線（有線LANで接続）
静的サイトジェネレータ 11ty 及びブログテーマ Vredeburg
参考サイト
Sam Hobbs | Raspberry Pi Email Server
英語でメールサーバのみの解説ではあるが、ステップごとにインストールや設定がうまくいっているかどうか確認を行うことができるようになっているため、長い作業の中でどこでミスをしたのか、または不具合が出ているのかがわかりやすい。また、設定をデフォルトから変更する箇所にそれぞれ設定の意味の説明があり、自分が何をしているのかがわかるため、ソフトウェアのアップデートで設定項目やその値に変更があり見本と齟齬が生じていても対処が容易である。わけもわからず言われた通り延々ソフトウェアのインストールと設定ファイルの書き換えを繰り返し、辟易しながら終わらせたものの結局動作せず問題のある個所も見当がつかないまま挫折、などという悲劇を起こしにくい、ナイスなサイト。
セキュリティアップデートが面倒だったのヨ！
WordPress（とテーマ） と Nextcloud と RainLoop（ウェブメールクライアント）を手作業でアプデとか！
仕事でもないのにあんなのやってられないワ！！
今入れてる Nextcloud+SnappyMail は Snap 経由のインストールでそのうえ勝手に自分でアップデートしてくれる…楽…
注釈
1. 2023年8月現在