OracleCloud に Node-RED をインスールして無料で使い倒す方法

OracleCloud の太っ腹すぎる Always Free Cloud Services（期間の制限なく使用できるサービス）で構築した VM へ Node-RED をインストールする方法です。

さも自分で考えたかのような書き出しですが、ほとんど公式ブログの手順に沿って作業しただけです🤤

Installing Node-RED In An Always Free VM On Oracle Cloud (えいご)

2019年の記事なので、今（2021年）とは少し異なる部分もありますがやることは同じです。

そのため基本的には、指示通り設定すれば OK なのですが、私が実際にやってみて、気がついた点がいくつかあるので、ここにメモしておきます。

あと、ついでに HTTPS 化とポート転送もやります。

ちゃんと Oracle Linux を選びましょう。

ついつい見知った Ubuntu を使いたくなるかもしれませんが、指示通り（？）Oracle Linux を選択しましょう。

もし Ubuntu を選択した場合、以降の手順が色々と変わってきてしまいます。
もし Ubuntu でないと残尿感があるという方は、Ubuntu で構築した方もいらっしゃるようなので、そちらを参考にしてください↓

NODE-REDをORACLEの無料VPSサービスで使う

インストールスクリプトの違いに注意！

Oracle Linux に Node-RED をインストールする際に使用するインストールスクリプトは、Ubuntu や Raspberry Pi OS（旧 Raspbian）へインストールする際に利用するインストールスクリプトとは、パスが違う点に注意してください。

ブログの指示通りに、

bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/rpm/update-nodejs-and-nodered)

を使用しましょう。

一見、Debian 系と同じに見えますが、微妙にパスが異なります。
Oracle Linux は Red Hat ベースなので、Debian 系のインストールスクリプトは使えません。

インストールスクリプトについては公式の「Linux Installers for Node-RED」をご覧ください。
あと公式の「ローカルでNode-REDを実行する」も見たらいいかも。

もし外部から繋がらなかったらポート設定してみて。

これはもしかしたらやらなくても良い手順なのかもしれないのですが、指示には書いてないのに私はうっかりやっちゃったので、一応書いておきます。

なお、Oracle Linux 7では、デフォルトのファイアウォール・ユーティリティは firewalld （firewall-cmd）です。（参考：Oracle® Linux 7セキュリティ・ガイド）
iptables では無いので注意！

VM インスタンスに対して、

sudo firewall-cmd --permanent --add-port=1880/tcp

した後、

sudo firewall-cmd --reload

して、ポート 1880 を有効にしました。

このドキュメント「Free Tier: Install Node Express on an Oracle Linux Instance」の「4. Create a Node Express Application + Install and Set up Node Express」を参考にしました。

てか、https 化する手順でも 80 番に対して同じようなことしてるので、やっぱ必要な手順だと思う。

リンクされている https 化の手順は古い

このページね。

「Free SSL Certificates In The Oracle Cloud Using CertBot And Let's Encrypt」

certbot-auto はもうサポートされていません。

ポート 80 番を開放する方法以外は参考にしていない。

は？んじゃどーすんのさ。

私が勘で行った方法でよければどうぞ↓

Oracle Linux で動いている Node-RED の HTTPS 化手順

※ そもそもドメイン側の設定は別途済ませておきます。
※ Certbot で Let's Encrypt から証明書を発行してもらう想定です。

まず snap をインストールします。
参考にしたのはこちらのページ「Installing snap on Red Hat Enterprise Linux (RHEL)」

sudo rpm -ivh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

sudo yum update

なんか指示が出たので、それに従って再度 update

sudo yum update --skip-broken

何度か確認させられるけど、Complete! した。

sudo yum install snapd

インストールできた。

sudo systemctl enable --now snapd.socket

sudo ln -s /var/lib/snapd/snap /snap

必要なのか分からないけどページの指示に従いやった。
そして再起動。

ここからは、Certbot の設定。

参考にしたのは「Web Hosting Product on CentOS 7」の組み合わせ。

sudo snap install core; sudo snap refresh core

コアなんて無いとかエラー出る。まぁ無視して次。

sudo snap install --classic certbot

インストールできた。

sudo ln -s /snap/bin/certbot /usr/bin/certbot

必要ない気もしたけど指示に従ってやった。

sudo certbot certonly --standalone

メールアドレス入力、利用規約に同意、メール送っていいかの確認、ドメインの入力をやった。

sudo certbot renew --dry-run

テストも成功した。

ここからは Node-RED の設定。

いつもの、

~/.node-red/settings.js

を編集します。
具体的な方法は「セキュリティ」のページを参照。

/** Option 1: static object */
https: {
  key: require("fs").readFileSync('/etc/letsencrypt/live/［ドメイン］/privkey.pem'),
  cert: require("fs").readFileSync('/etc/letsencrypt/live/［ドメイン］/cert.pem')
},

の項目のコメントを外して、秘密鍵と証明書へのパスを入力して有効にします。

［2024年4月8日追記：ここから］cert.pem （サーバー証明書のみ）では証明書チェーン（認証パス）が不完全なのでルート証明書、中間CA証明書、サーバー証明書が全部含まれている fullchain.pem を指定するほうが確実です。
例えば私の場合、cert.pem では Android 11 以降の端末から WebSocket 通信ができないなどの問題が発生しましたが fullchain.pem に変更することで解決することができました。［2024年4月8日追記：ここまで］

ただし、

/etc/letsencrypt/live/
/etc/letsencrypt/archive/

のパーミッションは、0700 になっていて Node-RED が読めません。
なので、

sudo chmod 0755 /etc/letsencrypt/live/

sudo chmod 0755 /etc/letsencrypt/archive/

して、さらに所有グループも自分（opc）に変更して↓

sudo chgrp opc /etc/letsencrypt/live/［ドメイン］/privkey.pem /etc/letsencrypt/live/［ドメイン］/cert.pem

Node-RED が読めるようにする必要があります。

以上でサーバーを再起動すれば、HTTP 化も完了です。

おしまい🤤

［2021年12月6日追記］

ポート 443（HTTPS）から 1880 へ転送したい

「https://ドメイン:1880/」ではなく「https://ドメイン」でアクセスしたいんじゃ！という場合の手順です。

まず今までの手順同様、ポートの設定をおこないます。

次に、firewalld で 443 へのアクセスを 1880 へ転送するようにします。

sudo firewall-cmd --permanent --add-forward-port=port=443:proto=tcp:toport=1880

そしたらリロードします。

sudo firewall-cmd --reload

これで :1880 なしでもアクセスできるようになります👍

めでたしめでたし🤤

Node-RED での CORS 対応まとめ（IBM Cloud版も対応）

CORS とはブラウザに「No 'Access-Control-Allow-Origin' header」とか言われちゃうアレです。

まず普通に GET とか multipart/form-data での POST なら

msg.headers = {};

msg.headers["Access-Control-Allow-Origin"] ="*";

って function ノードに書いてレスポンスすれば OK！👍

でも、application/json を POST したいんじゃ！ってなるとプリフライトリクエストが発生して、上記だけでは「No 'Access-Control-Allow-Origin' header」って言われちゃいます。

しかも、Node-RED 上ではリクエストが来ているのかも確認できません。

この場合は POST のレスポンスに Access-Control-Allow-Origin を付与するのではなく、POST の前に発生する OPTIONS メソッドに対して Access-Control-Allow-Origin を付与させる必要があります。

でも、Node-RED の HTTP in ノードには OPTIONS はありません。

なのでエディター上ではリクエストが確認できません。

これに対応するには、Node-RED の設定ファイル（setting.js）を修正する必要があります。

ちなみに、Node-RED IBM Cloud Starter Application の場合は、bluemix-setting.js です。

そのファイル内にコメントアウトされている httpNodeCors という記述があるので、それをコメント解除します。

IBM Cloud で bluemix-setting.js の場合はそもそも記述がないので、

var settings = module.exports = {…（略）…}

の中に

httpNodeCors:{

  origin:"*",

  methods:"GET,POST,PUT,DELETE"

},

とか追記しときゃ OK です。（methods に OPTIONS は無くていい）

まぁ Continuous Delivery 利用するか CLI でなんやかんやして push とかしないとダメなんでめんどいですが。

もしかしたら Cloudant 内の settings ドキュメントの編集でも対応できるかもしれませんので、誰かチャレンジしてみてくださいｗ

修正したら再起動して解決ですヤッタネ☆

CORS とかプリフライトリクエストについて詳しく知りたい方はこちら。

オリジン間リソース共有 (CORS)［https://developer.mozilla.org/ja/docs/Web/HTTP/CORS］

GDevelop 5 でゲームを作ってみた感想

GDevelop に関する記事をまとめた別ブログを用意しました。

GDevelop に関する情報をまとめたブログ
最新情報などはこっち↑を見てね。

---

以下は、かなり古いバージョン（2019年頃）の情報です。

GDevelop 5 を使ってみて、気が付いた点の備忘録。
こんなゲームを作りました ⇒ BomBomDig

地味便利機能

1. プレビューボタンを右クリックすると表示されるメニューから、開始シーンを固定できる。
2. イベントのグループやコメントは右クリックから Edit で色を変えることができる。
3. 「条件を追加」「アクションを追加」を右クリックするとショートカットメニューが表示される。

Pi （円周率）が無い！
Else が無い！
これタイルマップじゃない！ただのタイリングだ！
反転できない。エフェクトにフリップはあるが判定やポイントは反転しない。（ベータ版では対策済み）解決済み

条件でオブジェクトを絞り込んでも、そのアクションがオブジェクトの数だけ繰り返されるわけではない。
例えば対象を3つに絞り込んで、アクションで score + 1 としても結果は3ではなく1。

条件というより対象の絞り込みだと考える必要がある。
マスクオブジェクトが上に乗っていないボタンに限定したい場合、
Not mouse on マスクオブジェクト
and
mouse on ボタン
では、マウスが乗っていないマスクオブジェクトとマウスが乗っているボタンに絞り込まれるだけなので意味がない。

衝突マスクのないスプライトを消そうとすると止まる。

シーンエディタ上でオブジェクト変数を変更した直後に、別のオブジェクトを選択すると変更が反映されない。一度何もないところをクリックする必要がある。

Tweenが機能しない。
1つもステージに配置されていないオブジェクトを複製してTweenを設定しても機能しない。

1つもステージに配置されていないオブジェクトをマウスオン判定しようとしても機能しない。

テキストの幅指定ができないので一行だと右寄せ・中央寄せの意味がない。
エディターと実行環境で文字の位置がずれる（フォントによるかもしれん）

Android アプリのバージョンコードはバージョン番号が変換される。
1.0.1⇒10001

SubStr()は他の言語のように開始位置をマイナスにして末尾から数える方法は使えない。

シーンタイマーなどは一時停止するだけで生成される。
条件で確認するだけでも生成されるっぽい。 

Center Point を変更すると、当たり判定がおかしくなる。

https://forum.gdevelop-app.com/t/sprites-with-modified-points-do-not-collide-correctly/24785

報告済みだが対応されている気配なし。

条件の「＆ および」で反転条件にしても効果がない？

条件の「ではない」を利用すると対象のオブジェクトが存在しないのに実行されるイベントを作成することができてしまう。

三角関数（三角比）の翻訳がゴミ

正弦(サイン sine)、式は sin()

余弦(コサイン cosine)、式は cos()
正接(タンジェント tangent)、式は tan()
余接(コタンジェント cotangent)、式は cot()
正割(セカント secant)、式は sec()
余割(コセカント cosecant)、式は csc()

イベントの検索は繰り返しの設定箇所にはヒットしない。

Z Order が同じ値の場合、あとから生成されたインスタンスが下になる。

エディター上では、あとから生成したインスタンスが上になるが、再生時には下になる。

エクスポートされた Windows （自動インストーラーファイル）は、実行すると問答無用で
C:\Users\［ユーザー］\AppData\Local\Programs\
にインストールする凶悪仕様。

BB テキストのワードラップは半角スペースの箇所でのみ有効。

日本語や全角スペースでは改行しない。

オリジナルの衝突マスクと独自の衝突マスクが重なるとエラーになる？

ドラッグ＆ドロップ（ノンプログラミング）でアプリが作れるサービス2019年まとめ

ビジュアルプログラミングでアプリが作れるサービスをまとめてみました。
いずれもドラッグアンドドロップで、画面設計からプログラミングまでできるので、とても簡単（？）にスマホアプリが作れます。
Monaka に挫折した方や、Buildy、Yappli、アプスタ、BRAND などでは実現できないアプリを構築したい方向けです。

なお、2019年4月8日時点での評価です。

Thunkable

https://thunkable.com/
iPhone と Android の両方で機能するアプリを作ることができます。
無料版だと作成しているもの（プロジェクト）が Thunkable Public Gallery に公開されるという変った料金体系です。
つまり無料版で作られたものは、誰でも自由にプレビューしたりコピーしたりできます。
あまりパーツの種類は多くないですが、基本的なことから Firebase との連携、マネタイズは一通り可能です。

ただ、コミュニティーが、新しい Thunkable X（上記）と古い Thunkable Classic の記事が混在していて（タグ分けはされている）ちょっと混乱します。
個人的にアイコンフォントの利用が、まだできない点が残念です。（Classic だとできる）

AppyBuilder

https://appybuilder.com/

MIT App Inventor の派生サービス。そのため Android のみです。

その分、利用できるパーツの種類が多く、画面設計や機能の自由度は高いです。

さらに Firebase との連携やマネタイズなども一通り可能な上に、完全に無料という点が驚きです。
ただちょっと全体的に古臭いｗ

Kodular

https://www.kodular.io/

こちらも MIT App Inventor の派生サービス。やっぱり Android のみです。
AppyBuilder とできることに大差はありませんが、2017年にスタートしたサービスなので流行りの（？）画面構成などが作りやすいです。
当然のように無料で逆に怖いｗ

Composer 3

https://www.appgyver.com/
旧 AppArchitect かつ旧 Composer という、ややこしい過去を持つサービスです。
iPhone と Android の両方に向けたアプリを出力できるようですが、正直、利用できるパーツの種類が少なく、上記のサービスに比べると機能面で劣ります。
また、無料試用では実機テストができないようです。というかドキュメントが古い、または不足している印象です。
チャットでお話を伺ったところ、B2E（従業員向け）アプリにフォーカスしていて、最新版がリリース間近とのことです。

stencyl

http://www.stencyl.com/
これは2Dゲーム作成ソフトウェアです。
無料版では Flash や HTML5 での出力が可能です。
スマホアプリとして出力するには年間契約の購入が必要です。
ゲーム作成に特化していますが、それ以外のアプリを作ることも可能です。
ただ、文字入力や日本語表示に難ありｗ

Ionic Creator

https://ionicframework.com/creator

既に完全に放置されているサービスです。おすすめできません。

なお、本家の Ionic フレームワークそのものは順調に進化しているようですｗ

その他

諸々の理由で評価はしていませんが、以下のようなサービスもあります。

buildfire

店舗向けのアプリ作成サービス。国内サービスを利用したほうが良い。

yapp

基本有料。国内の yapp.li というサービスとは別物。

Appy Pie

主に店舗向けのアプリ作成サービス。機能を選択するだけで作れたりする。

appery.io

基本有料。全然ノンプログラミングじゃないｗ

applican

今回紹介する唯一の国内サービス。全然ノンプログラミングじゃないｗ

以上！

おしまーい。

Node-RED v0.19.5 の file ノードで日本語を出力すると文字化けする

まるで v0.19.5 が悪いかのようなタイトルですが、何が原因かは分かってません（ぉぃ）

AWS 上の Node-RED v0.19.4 なら大丈夫なのに Azure 上の Node-RED v0.19.5 だと file ノードで日本語を含むテキストを出力すると、ガッツリ文字化けします。
ちな、どちらも Ubuntu です。

しょうがないので Azure 上の Node-RED v0.19.5 では exec ノードを使ってテキストファイル書き出してます。

こーいうのどこに聞けば良いのかなー？(´・ω・`)

【2019/01/30追記】
Raspberry Pi (Raspbian) の Node-RED v0.19.5 でも文字化けしました。
えー、ダウングレードってどうやるーん？(´・ω・`)

【2019/02/12追記】
一度 npm で削除してから v0.19.4 を再インストールしたら文字化けしなくなりました。
ちなみに v0.20.0-beta.4 では化けました。ぬー…

Node-RED を 80番ポート（port 80）でアクセスできるようにする方法

Node-RED は通常 1880 番 port を使用しますが、ブラウザ（HTTP）でアクセスしたときに使用される標準の 80 番 port でアクセスできるようにする方法です。

なお、環境は Linux （Ubuntu）です。

Node-RED の設定は変更しなくて OK

さて、そもそも Node-RED の setting.js には uiPort という設定項目があるので、そこを変えればいいのかと思いきや、1024 以下のポートは root の権限が必要になるので、その方法では  Node-RED を root で実行しなければならなくなります。

しかし、それはセキュリティ的に良くないので、一般的には 80 番ポートへのアクセスを 1880 番へ転送する、という手法が取られます。

なので、uiPort の設定を変更する必要はありません。

80 番ポートから 1880 番ポートへリダイレクトする設定

では、具体的にどのようにリダイレクトさせるのかというと、Linux に標準でインストールされている iptables というツールを利用します。
iptables はパケットフィルタリングや NAT などの設定を管理することができるツールですが、詳細についてはググってくださいｗ

とにかく手順だけ説明しますｗ
次のコマンドを実行することで、1880 番ポートから 80 番ポートへ転送されるようになります。

sudo iptables -A PREROUTING -t nat -p tcp --dport 80 -j REDIRECT --to-port 1880

ただし iptables は設定をメモリ上に記憶しているだけなので Linux が再起動すると設定が消えてしまいます。

iptables の設定を保存・永続化する

そこで、多くの場合は iptables-save と iptables-restore というコマンドを利用して、iptables の設定をファイルに書き出して、システム再起動時に読み込ませるという手法が取られています。

しかしここではより手軽に、インストールするだけで設定を永続化できる iptables-persistent というツールを利用することにします。
下記コマンドでインストールします。

sudo apt install iptables-persistent

インストール中に現在の設定で IPv4 と IPv6 の設定ファイルを作成するか聞かれるので、どちらも Yes を選択します。
これだけで、再起動しても iptables の設定が有効なままになります。わー便利！

ちなみに、設定ファイルは以下の場所にあります。
/etc/iptables/rules.v4
/etc/iptables/rules.v6

また、任意のタイミングで保存や読み込みをさせたい場合は、以下のコマンドを用いるようです。（動作未確認）

sudo netfilter-persistent save
sudo netfilter-persistent reload

おしまいヽ(=´▽`=)ﾉ

Node-RED で簡単に Crypto を利用する方法（LINE の Bot とかで）

下記のノードを追加するだけで Crypto モジュールが使えるようになります。
settings.js（bluemix-settings.js）を書き換える必要はないです。

node-red-contrib-crypto-js

HMAC の MD5 とか SHA-2 とか使いたいぜ！ってときにサッと使えて便利です。（Encode と Decode が使い難いけどｗ）

LINE の X-Line-Signature 検証での利用例

そもそも必須じゃない処理を意地でも Node-RED でやろうという奇特な方向けの情報ですｗ
※LINE WORKSだと「X-WORKS-Signature」

LINE の改ざん検証用署名「X-Line-Signature」の検証方法

ニッチなので雑ですが、これでいけます↓

意地でもノードを使うの図

function ノードを使えばもっと簡単にできるところを、あえてノードを駆使してみましたｗ
ポイントは decode ノードの設定を Hex にしておくことです。
それ以外だと異なる値になります。

JSON 貼ると化けるブログなので、上の図を参考に各々頑張ってくださいｗ

settings.js を書き換える方法

ちなみに下記のようにすることで、function ノード内で crypto を利用することも可能になります。

１．settings.js の functionGlobalContext に追記

functionGlobalContext: {
  crypto: require( "crypto" )
},

２．Node-RED 再起動
３．function ノードで利用

const crypto = global.get('crypto');

上記ノードには含まれていない機能を利用したいときは、この方法にしましょう。

アップロードされたファイルを Node-RED で受け取る方法

例えば画像を Node-RED へアップロードしたい、とかの時です。

下のフロー図は、ファイルを送信できるアップロードページと、送られてきたファイルを鯖上に保存するフローのサンプルです。

フローの JSON コード貼ると化けちゃうブログなので、下記の説明を読んで各自で自作してくださいｗ

ただし環境によっては file ノード（ファイル作成ノード）がない場合もあります。（IBM Cloud のボイラーテンプレートで用意された Node-RED とか）

その場合は file ノードの代わりに、データベースなどへの保存の処理を行う必要があるわけですが、それはまた別のお話……

では、個々のノードについてザッと説明します。

アップロードページのフロー

まずは動作確認のためにも、ファイルをアップロードするためのページを用意します。

「[get] /upload」http 入力ノード

Node-RED 鯖の /upload に GET でアクセス（単にブラウザでアクセス）されたときのフローがここからスタート。

「HTML」template ノード

ここでファイルをアップロードできる HTML を msg.payload にぶち込みます。

HTML はこんな感じ。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>アップロード</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input name="file" type="file" id="file"><br>
<input type="submit" value="アップロード">
</form>
</body>
</html>

ちゃんと form 要素の method属性は post に、enctype 属性は multipart/form-data に設定しましょう。

http 出力ノード

上記の HTML をここで返します。

それにより無事、アクセスしてきたブラウザにはアップロードページが表示されます。

特に何も設定しなくてもデフォで Content-Type: text/html として返してくれるので楽ちん。

ファイルを受け取ったときのフロー

こっからが本題。

先のページからファイルがアップされた時のフローです。

「[post] /upload」http 入力ノード

アップロードページと同じ URL だけど、POST だった場合はこっちがスタートします。

ファイルがアップされるはずなので、ノード編集画面の「ファイルのアップロード」にチェックを入れましょう。

チェック入れておかないと msg.payload にバイナリバッファが入っちゃって意味不明になります。

入れておくことでファイルは msg.req.files に格納され、msg.payload には HTML の form の各値が格納された状態になります。

「処理」function ノード

ここでは簡単なエラーチェックをしつつ、応答のフローとファイル保存のフローに分けています。

出力数は 2 にして、return の [0] は応答のフローへ、return の [1] はファイル保存のフローへ分かれるようにしました。
コードは以下の通り。

let files = msg.req.files;
if (files.length === 0) {
msg.payload = "ファイルが添付されてないよ";
return [msg, null];
}
msg.payload = "たぶん保存したよ";
//
let msg2 = {};
msg2.payload = files[0].buffer;
msg2.filename = "/home/user/" + files[0].originalname;
return [msg, msg2];

まず、msg.req.files の数を見て、ちゃんとファイルが含まれているかをチェックしています。
もしファイルが含まれていなかったら、ファイル保存のフローへは null を返すことで、フローが進まないようにしています。
他にも必要であれば msg.req.files[0].mimetype などを確認して、想定外のファイル形式を弾いたりしても良いでしょう。

で、問題がなかった場合、新たにファイル保存フロー用のオブジェクト msg2 をこしらえます。
そして次の「ファイル作成」ノードのために、msg2.payload にファイルのバイナリバッファを入れます。
あと、保存先とファイル名もここで設定してしまいます。
サンプルでは鯖上の /home/user/ へ元のファイル名のまま保存するようにしました。

「HTML」template ノード　その2

応答フローの template ノードです。
ここでは応答用の HTML を作成して msg.payload に入れています。

予め先の「処理」function ノードで msg.payload にはメッセージが入れられているので、Mustache タグを利用して payload の内容を HTML に差し込んでいます。
↓こんな感じ。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>結果</title>
</head>
<body>
<p>{{payload}}</p>
</body>
</html>

ヒゲ便利ｗ

http 出力ノード

応答フローでも先の http 出力ノードを再利用。えこえこ。

「ファイル作成」file ノード

鯖上にファイルを保存します。

ノード編集画面で「動作」を「ファイルを上書き」にして「メッセージの入力のたびに改行を追加」のチェックは外しておきましょう。

「ファイル名」は先の「処理」function ノードで設定済みなので、ここでは空にしておきます。

（以前は何か入力されていても、msg 側が優先されてたけど、最近 msg 側で設定済みなのにノード編集画面でも何か入力されてると警告されるようになったっぽぃ）

以上、個々のノードの説明でした。

実際に /upload へブラウザでアクセスしてみて、動作を確認してみましょう！

そして何か間違えている場合、またはもっといい方法がある場合は教えてくださいｗ

おしまーいヽ(=´▽`=)ﾉ

Node-RED で base64 エンコードとかデコードしたい時

Node-RED は受信した画像とかローカルのファイルとかをバイナリバッファでやり取りするけど、Google さんの Cloud Vision API に画像送りたい時とかには base64 エンコードして送らなきゃいけなかったりするときのなんやかんや。

方法1：node-red-node-base64ノードを使う。

超楽ちん。
https://flows.nodered.org/node/node-red-node-base64
こいつをメニュー「パレットの管理」から追加して使うだけ。
msg.payload がバイナリバッファなら base64 にしてくれて、逆に base64 だったらバイナリバッファにしてくれます。

方法2：Node.js の Buffer クラスを利用する。

下記、new Buffer() は非推奨になりました。
今後は変わりに Buffer.from() を使いましょう。
https://nodejs.org/api/buffer.html

function ノードで

let buffer = new Buffer(msg.payload);
msg.payload = buffer.toString('base64');
return msg;

とかすれば base64 に変換できます。
これも楽ちん。
逆にバイナリバッファにデコードしたいときは

msg.payload = new Buffer(msg.payload, 'base64');
return msg;

てな感じ。

おしまい。

Stencyl 3.4.0 での HTML5 書き出しについて

Flash 死亡とともに、どうも Stencyl も衰退しつつあるようですが、実験的とは言え HTML5 書き出しもできるようなのでテストしてみました。

テスト環境は以下のとおりです。

• Windows 8.1 64bit
• Stencyl 3.4.0 (Build 9300)

まずいきなり Test Game はできるのに HTML5 での Pubilish が
「Encountered errors while building your game.」
などと表示されて失敗する現象に遭遇。

シーンを作っただけのゲームでも発生するので、初っ端から絶望モードですが、思い切って Stencyl を再インストールしたら、このエラーは発生しなくなりました。
ただし、単に再インストールするだけではなく事前に
C:\Users\｛ユーザー名｝\AppData\Roaming\Stencyl
を削除またはリネームしておく必要がありました。

なお、そのフォルダ内の
stencylworks\games
にはゲームデータが入っているので、再インストールして作成された同フォルダにコピーすれば、引き続き利用できます。
先の書き出せなかったゲームも新環境では書き出せたので、このフォルダ内の何かが悪さしていたのかなと思います。

ちなみに、そうしてインストールした Stencyl を立ち上げたら「パーミッションがないぞ」みたいなメッセージが出ましたが無視しても問題なく使えておりますｗ

HTML5での注意点

• IE11 では動かない。（Edge は未確認）
• Sound ファイルは ogg を要求される。
• iPhone では音が出ない。（Android は OK）
• Setting の項目は WEB っぽい
• Setting の Scale Mode は無視されるっぽい
• Setting の Start In Full Screen? をチェックすると動かない

PCの Chrome と FireFox そして Android の Chrome では問題なし。

SWF 向けに作ったものを HTML5 で書き出し直したアホなゲーム

いずれもスマホでは画面サイズとかタップとかの関係で遊べません。

IEON スーパーマーケット　｜　Flash版

分かりにくいけどタイトル画面で既に商品並び替えできますんで。

身を粉にして働け車　｜　Flash版

概ね問題なし。

鏡の女王　｜　Flash版

ドワーフに捕まった時のシーンリロードで Blur Out が機能していない。

他の効果では問題なかったけど、あえてそのままにしています。

あれ？結構いけるじゃないですか。

スマホ向けゲームもちゃんと意識して作ればいける気がします。

まぁミニゲームばかりなので、もっと大規模なゲームだとなにか問題が出るかもしれませんが、いつまでも実験段階なのは何が問題なのでしょうか。

購入者専用フォーラムとか見たら書いてあるのかなー。

しかし告知通り2017年中に HTML5 対応が完了していればワンチャンあったのではないかと思うだけに残念でなりません。

microbit で温度計（音とアニメーション付き）

micro:bit（マイクロビット） のJavaScript ブロックエティターで、音とアニメーション付き温度計を作ってみました。
簡単なスクリプトなのに、意外と覚えることが多かったので解説します。

ソースはこちら

音とアニメーション付き温度計

まず、「ずっと」ブロック内で「LEDに表示」を使いアニメーションをさせています。
コードエディターであれば「basic.showAnimation()」を利用することができますが、ブロックは用意されていないので、このような方法を用いました。
なお、「LEDに表示」のインターバルは 400ms です。（400ミリ秒後に次のブロックへ処理が進みます）

そしてアニメーション後に「表示を消す」をおこなっています。
これをしないと、アニメーション最後の表示が、その後に実行される「文字列を表示」のスクロールに巻き込まれてしまいます。

「音を鳴らす」で音も出るようにしてみました。
これによりずっとビッビッ言うウザい温度計になりますw
なお、この音を聞くにはイヤホンなどを、端子0番と GND 端子に接続する必要があります。

私はワニクリップで本体が傷つかないようにネジを通して繋いでいます。

つなぎ方はシミュレーションを参考にしてください。
ただし結構大きな音なので、耳には付けないほうが良いです。

最後に温度を表示するように記述していますが、ポイントは「数を表示」ではなく「文字列を表示」を使っていることです。
温度の数字だけであれば「数を表示」で良いのですが、温度に単位（℃）として "C" を付けたかったので、数字 + "C" をして文字列化しているためです。

また、こっそり温度を -3 していますが、これはそもそも micro:bit が返す温度は micro:bit の CPU の温度なため、周辺の温度より少し高い数値が返されるからです。
そのため少し減らして、つじつまを合わせているのです；
必ずしも -3℃ することで正しい温度が取得できるわけではありませんが、私の生活環境下では概ね許容できる誤差で温度を表示してくれました。(^_^;)

おしまい

microbit の使い方などのまとめ

micro:bit（マイクロビット）を実際に使ってみて書いている備忘録です。
随時更新中です。

WEBサイト

micro:bit 公式（日本語）
BBC micro:bit MicroPython ドキュメンテーション（日本語）

電源の入れ方・電力供給方法

以下のいずれかで電源が入ります。

• PC と USB（マイクロB）ケーブルで繋ぐ
• 電源用コネクタと単4電池2本（1.5v × 2 = 3v）を繋ぐ
• 3V 端子と GND 端子を利用して 3V の電源を供給する
• 裏面の給電パッドへ直接つなぐ

https://www.kitronik.co.uk/blog/powering-your-bbc-microbit/

電源の切り方

文字通り電源を切るｗ（電池を抜くなど）

電源スイッチなどというものは存在しない！
PC じゃないから電ブチしていいみたい。

初めて電源を入れた時

予めちょっとしたプログラムが入っていて、それが実行されます。

1. ハロー！
2. Aボタンを押せ
3. Bボタンを押せ
4. シェイクしろ
5. 傾けてドットを合わせろ
6. グレイト！
7. さぁコーディングしようぜ！

という流れのプログラムです。

リセット方法

裏側のボタンをぽちぃー

するとプログラムが最初から実行されます。

MICROBIT ドライブとして認識されない！

百均などの充電専用USBケーブルでは、電力供給はできるけど、ドライブとしては認識されないので注意。

ちゃんとデータ送受信が可能なケーブルを使いましょう。

Javascript と Python の違い

機能的な話ね。

Javascript でしかできないこと

• LED に当たる光の明るさを取得
• Bluetooth の利用

Python でしかできないこと

• Speech モジュールの利用
• 浮動小数点値の利用

他にもあるかも。

Javascript エディターで気をつけること

どうやら正確には TypeScript らしい。

• 1/5 も 4/5 も 0 が返される。（切り捨て）
• 色々と使えないメソッドがある。（Math.ceil とか Array.slice() などなど）
  基本的にブロックが用意されていないものは使えない。
  コードエディタであれば複合代入演算子（+=とか）は使えるけど、ブロックエディタには戻れなくなる。
• 配列のすべての要素は同じ型じゃないとダメ。
• シミュレーターは必ずしも正確ではない。
  例えば「数を表示」ブロックを繰り返すと、数字が連続して表示されるが、実機では1画面分区切られて表示される。

PCとシリアル通信

USB ケーブルでシリアル通信ができます。

シリアル通信のドキュメント

こっちはたぶん古いドキュメント

Windows ではドライバをインストールする必要があるみたい。

micro:bit 挿しても未インストール時はこうでした。

インストールしたらこうなって COM3 として使えるようになりました。
なお、ドライバーをインストールする時に micro:bit が挿さってると怒られるので抜いとくこと。

古いドキュメントへ飛ばされたり 404 へ飛ばされたりするかもしれないけど、最終的に arm MBED のサイトから「mbedWinSerial_16466.exe」をダウンロードできれば正解と思われ。（MBED ってのは micro:bit の兄貴分みたいなやつらしい）

投稿時点ではこれが最新のページかな？

https://os.mbed.com/docs/v5.6/tutorials/windows-serial-driver.html

ボーレートは115200。
デバッグの為であればシリアル通信ができるフリーソフトなどを利用しましょう。
プログラムから利用したい場合は、

• Python なら pyserial
• Node.js なら Node-Serialport
• Node-RED なら serial ノード

あたりを利用すると良いのではないでしょうか。しらんけど。

3V 端子から供給できる最大電流

公式サイトの安全のアドバイスからリンクされている虎の巻（PDF）では 100mA までと書かれている。

micro:bitの電源供給について
上記サイトでは 90mA まで、とのこと。

端子に使えるネジ（ボルト）やナットの種類

ネジって素材とかメッキとかアホみたいに種類があるので間違えて絶縁ネジとか買ってしまわないように注意。

• 形：皿ネジ
• サイズ：M3（長さはご自由に）
• メッキ：ニッケル、クロメート（ユニクロ）
• 素材：銅（黄銅、真鍮）、アルミ

より詳しい記事を書きました。

Bluetooth で接続

AとBボタンを押しながら、リセットボタンを押すとペアリングモードになる。

micro:bitモバイルアプリの使い方

iPhone のブラウザでコーディングして、micro:bit のアプリで micro:bit へ送信できました。
Bluetooth を利用して micro:bit と通信する方法は勉強中（むずい。特に親機（？）側が）

RPGツクールから自宅のWEBカメラを操作する

気は確かか？とか言われそうですが確かです。

昨今、あらゆる技術やサービスの敷居か下がってきていると感じたので、それらを組み合わせて何かできないかと考えた結果、このようなことになってしまいましたｗ

本件で使用した主なツールは以下のようなものです。

	■ハードウェア Raspberry Pi 3
	■サーバーソフトウェア Node-RED
	■ゲーム作成ツール RPGツクールMV

いずれも学習コストの低さが売りのツールなので、マニュアルとかを見ればすぐに扱えるようになると思います。
難易度的にも差はないと思うので、既にどれかひとつでも扱えるのなら、他のツールも余裕なはずです。
つまり、もしあなたがツクールでゲームを作れる根性があるのなら Raspberry Pi と Node-RED を駆使した IoT（モノのインターネット）くらい余裕な時代になったわけですよ！（暴論）

ラズパイとウェブカメラと百均のスピーカーとカービィとカービィ

出来上がったモノの紹介

ゲーム内で然るべき操作をすると、自宅のウェブカメラが撮影を行い、ゲーム上でその写真を確認することができます。

再現版ゲーム起動（PC・スマホ）

実動版を公開しても良かったのですが、Raspberry Pi で他のこともやりたいし、いつまで自宅で動かしてるかも分からないので、サーバー処理だけ除いたモノを公開しています。

とてもよくわかる構成と撮影の流れ

私が渾身の力を込めて描いた構成図をご覧ください。

わ　け　わ　か　ら　ん　ｗ
一応説明いたしますと、インターネットより上が自宅です。
Raspberry Pi がサーバーで、その中で Node-RED が動いていて、ゲームやら画像やらをプレイヤーに配信する、という構成で、ゲームからは以下のような流れで撮影が行われます。

1. プレイヤーがゲーム内で撮影ボタンを押す
2. すると、ゲームから Node-RED に XMLHttpRequest で HTTPリクエストが発生
3. リクエストを受け取った Node-RED が撮影と画像の更新の Linux コマンドを実行
4. その後、プレイヤーが写真を見るイベントを実行したら、ゲームのエラー表示要素「ErrorPrinter」を利用して画像を表示する

あ、図中のRPGツクールMVとは、RPGツクールMVで作られたHTML5形式のゲームということですよ。念のため。

もうちょっと詳しく

ここからは「おいらもやってみたい！」とかいう奇特な方へ向けた情報をダラダラと提供します。

それぞれどうやって入手するの？

2017年9月現在の情報です。

Raspberry Pi

買いましょう。
ラズパイ正規総代理店のアールエスコンポーネンツと契約を結んだ個人向けの正規代理店の Raspberry Pi Shop by KSY（ややこしいｗ）での購入をおすすめします。（アフィとか無いから素直にクリックしとけ）
Amazon などと比較しても安いことが多いです。

私は Raspberry Pi 3（5,000円くらい）を使用しましたが、恐ろしく安い Raspberry Pi Zero（700円くらい）とかでも可能なはずです。
初心者はACアダプターなども含まれるセットを買うのが無難です。

流行っているのでネットや本で多くの情報を得ることができます。
でも古い情報には注意です。（OSガー、ニホンゴガー、とかいう問題はもはや過去のもの）
あと、やたらコマンドを打たせたがるページが多いですが、ほとんどの作業は GUI 上でも行なえるので、CLI 恐怖症の人も安心だぞ（ちょっとウソです）

ちなみに公式サイトはこちら（英語が読めない人は Chrome の翻訳機能で頑張れ）

Node-RED

ラズパイの標準 OS 「Raspbian」に、もとから含まれています。
詳しくはこちら→Node-RED日本ユーザ会 : ドキュメント
比較的情報が少ないのがネック。

RPGツクールMV

税別7,980円。買いましょう。
ただし、まれに Steam で 80%OFF とかしているため買い時が難しいですｗ
詳しくはこちら→RPGツクールMV

ゲーム（ツクール）からどうやって XMLHttpRequest を送っているの？

PNDK_HttpRequest プラグインを利用しています。

◆プラグインコマンド：PNDK_HR clear
◆プラグインコマンド：PNDK_HR send http://sample.com:1880/shoot/

という感じに、リクエストを投げっぱなしにしてるだけです。

どうやってゲーム内に画像を表示しているの？

ぶっちゃけゲーム内じゃないんですよね。
ツクールは元々、エラー表示のために「ErrorPrinter」という ID をもつ ＜p＞ 要素が HTML 内に用意されているので、そこに ＜img＞ 要素を突っ込んでるだけです。
イベントコマンドの「スクリプト」で直接以下のような javascript を書いています。
【注】このBlogの制約で＜＞は全角になっています！

var elem = document.getElementById("ErrorPrinter");
elem.innerHTML = "＜img src='http://sample.com:1880/rpg/www/photo.jpg'＞";

消すときは以下のようなスクリプトを実行させています。

var elem = document.getElementById("ErrorPrinter");
elem.innerHTML = "";

え？なんでツクール使ってんの？HTML と JS でいいじゃん。

使いたかったからDEATH！

どうやってラズパイからWebカメラに撮影させてるの？

ラズパイに fswebcam パッケージをインストールして Node-RED の exec ノードで fswebcam コマンドを利用して撮影と画像更新を行っています。
こんな感じ（"写真を取って撮って保存"のところ）です↓

Node-RED で作ったフロー

ウェブサーバーは？

Node-RED の設定で httpStatic を指定しています。
指定したディレクトリに HTML とか JPEG とかを置いています。
詳しくこちら→ Node-RED日本ユーザ会 : 設定

ちなみに自鯖にはダイナミックDNSを利用

ダイナミックDNS（DDNS）のサービスは mydns.jp を利用しています。
先の Node-RED のフローの"1時間毎にDDNS更新"のところで IP を通知しています。

はんだ付けとかするの？

せーへんせーへん。
USB とか差し込むだけやで。

ポート開けるんだよね？

せやで。
Node-RED の初期設定での使用ポートは 1880 だに。
お使いのネットワーク機器の設定が必要たい。

最後に

べつに何千円もかけて部屋を覗かれるゲームを作りたかったわけではないですよ。ええ。

ラズパイに人感センサーとか赤外線リモコンモジュールとか追加してみたり、Node-RED で WebSocket サーバー動かしてツクールにオンライン要素追加してみたり色々やりたいことがあるので、またなんか作ったら公開したいと思います。

ゲームが作れる！簡単ビジュアルプログラミングツールのまとめ

学校とかでプログラミングを勉強して、ゲームを作りたくなっちゃうお友達がわんさか増えると見込んで、簡単にゲームが作れる初心者向けのソフト（ツール・ゲームエンジン）を紹介するよ！

とりあえずいきなり Unity に手を出して挫折した人にもオススメだぞｗ

Scratch（スクラッチ）

https://scratch.mit.edu/
［日本語］［無料］［パソコン（Flash）］

たぶん一番有名で、一番使われているであろうビジュアルプログラミングツール。
完全に日本語化されていて、チュートリアルなんかの使い方説明も充実しているので、初めての人でもかんたん安心！
ゲームの仕組みや作り方を学習するには、うってつけです。

でも、2020年に開発を終了することが決定した Adobe Flash を利用している点が将来的に不安。（このページは2017年に書かれたよ）
たぶん Adobe Air を利用したオフラインエディターが今後の主流になるのかも？
それとも HTML5 化されるのかな？

それと日本語化されているのはすごく嬉しいけど、あまりそのことに慣れてしまうと他のプログラミング言語は英語がベースなので、もう少し本格的なゲームを作りたくなった時に苦労するかも……

Code.org

https://code.org/
［一部日本語］［無料］［パソコン・スマホ］

マイクロソフトやフェイスブックなどが支援している団体のサイト。
チュートリアルでは（ほとんど）日本語でプログラミングの基本的な概念を教えてくれる。
何かを作る時は「プレイラボ」「アーティスト」「アプリラボ」「ゲームラボ」の中から作りたいもにあったモードを選んで作り始めよう。
ただしブロックが日本語なのは「プレイラボ」と「アーティスト」のみ（2018年4月の時点）なのでゲームを作るには「プレイラボ」を選ぼう。
出来上がったゲームはブラウザでプレイ可能なので、友達にシェアすれば遊んでもらえるぞ。
なお「ゲームラボ」より高機能なツールになるけど、英語な上に本格的なプログラミングが必要になるので注意だ！

プログラミン

http://www.mext.go.jp/programin/
［日本語］［無料］［パソコン（Flash）］

文部科学省が Scratch（スクラッチ）を参考にして作ったツールとのこと。
なんかやたらかわいくて、楽しくプログラミングの学習ができる。
反面、あまり本格的なゲーム制作には向かない。
あとなぜか Scratch とは逆にブロックを上に積み上げていく方式なのが、他の言語から見てもちょっと不自然……
Flash を利用しているという不安点は Scratch と同じ。

Viscuit（ビスケット）

http://www.viscuit.com/
［日本語］［無料］［パソコン（Flash）・スマホ（アプリ）］

かなり変わった方法で絵を動かしたりするので、ゲーム作りの勉強としては役に立たない。
（そもそも他とはコンセプトが違うようだ）
これも学習用ということで、ゲーム制作にはぜんぜん物足りないかな。
ちなみに食べるビスケット（Biscuit）とは文字が違うので注意。

プログル

http://proguru.jp/
［日本語］［無料］［パソコン・スマホ（ブラウザ）］

これゲームは作れない(/･ω･)/
勉強用だったわ。

「アクションエディター4」

http://omoshiro-game.com/
［日本語］［無料］［パソコン］

無料で 2D のアクションやシューティングゲームを制作できる Windows ソフト。
プログラムするというより、キャラクターの行動や強さを設定して作る、というイメージ。
画像の規格など、理解しないと使いこなせない部分も多いため、けっこう難しめだけどヘルプ（説明書）をザッと読んでみて理解できそうならチャレンジしてみよう！

RPGツクールMV

https://tkool.jp/
［日本語］［有料］［パソコン・スマホ（ブラウザ）］

その名の通り RPG を作るのに特化したゲーム作成ツール。
HTML5でゲームを出力できるので、スマホのブラウザでも遊べるゲームが作れるのが特徴！
ニコ動のサービス「RPGアツマール」にも投稿できちゃいます。
一応、ビジュアルプログラミングと言えなくもないと私は思ってるｗ

しかし1万円くらいするソフトなので、お子様はお年玉のチカラを借りる必要がある。
ちなみに学生には敷居が高いけど STEAM ではたまに半額セールとか（時には80%オフとか）やっているので興味のある人は Twitter でツクール開発部さんをフォローしておくと安くゲットできるチャンスをお知らせしてもらえるぞ。

ティラノビルダー（TyranoBuilder）

http://b.tyrano.jp/
［日本語］［無料］［パソコン・スマホ］

アドベンチャー・ノベル系ゲームが作れる開発ツールです。
イラストと文章を書くのが好きな人にピッタリなツールだね。
HTML5でゲームを出力できるので、スマホのブラウザでも遊べるゲームが作れるのが特徴！
ゲームが完成したら「ノベルゲームコレクション」というサイトに投稿しませう。

SMILE GAME BUILDER（スマイルゲームビルダー）

http://smilegamebuilder.com/jp/
［日本語］［有料］［パソコン］

プログラミング不要で 3D RPGを制作できる RPG 制作ツール。
しかし約1万円かつ購入は STEAM からのみと、ちょっと敷居は高め。
興味がある人は、まずは無料体験版を試してみよう。

Stencyl

http://www.stencyl.com/
［英語］［無料と有料］［パソコン・スマホ］

2D ゲーム作成に特化したゲーム作成ソフトウェア。
パソコンで作って Flash やスマホアプリとして出力することができる、どちらかというとプロ向けのツール。
バージョン3.5.0からは HTML5 に出力することもできるようになるらしいぞ！
でも残念ながら英語だ！

PlayCanvas（プレイキャンバス）

https://playcanvas.com/
［そこそこ日本語ｗ］［無料と有料］［パソコン・スマホ（ブラウザ）］

まず最初に言っておくがこいつは全然ビジュアルプログラミングじゃない（爆）
3D ゲームをブラウザ上で作って遊べるゲームエンジン。
作成画面は英語だけど、日本ではGMOクラウド社が販売をおこなっているので、マニュアルはひと通り日本語化されているし、作成画面も Google Chrome ブラウザの翻訳機能を利用すれば、そこそこ理解できる内容になるので、結構ハードルは低めなんじゃないかなと思う。
そんなことより 3D ゲームは 2D ゲーム以上に覚えることが多いので、そっちのほうが大変。

MIT App Inventor

http://appinventor.mit.edu/explore/
［英語］［無料］［スマホ（Android）］

ビジュアルプログラミングでスマホアプリが作れちゃうツールです。
スマホ特有の GPS や 加速度センサーなどを利用したアプリも作れます。
ただしゲーム専用ではなく、色々なアプリが作れるタイプのツールなので、アクションゲームなどを作るのには不向き。
そしてなにより英語だ！
ちなみに Scratch（スクラッチ）と同じくマサチューセッツ工科大学(MIT)が提供しているゾ★

おわりに

なんだかんだでビジュアルプログラミングからノンプログラミング、果ては全然プログラミングが必要なものまで色々と紹介してしまいましたｗ
Unity と Unreal Engine は本ページの目的とも違いますし、意図的に外しています。

確かにみんなが使っている Unity とかのほうが情報も多いし安心感は大きいと思うけど、どんなゲームでも Unity で作ればオールＯＫというわけでもなく、作る人の技量や作りたいゲームの内容にあったツールを使っていくほうが、きっと有意義であり効率も良いと私は思っています。

どのツールを使うかより、どんなゲームを作るかのほうが大事ですからね★