Figma類似PenpotをSelfHost構築

さて、Penpot知ってますか？

Figmaの代替候補となるソフトウェアですね。

この時点で特定職種の方以外は興味なしのマイナー分野ですが、

わかる人はわかるよねの世界です。

 

Web上のサービスですがOpenSourceでセルフホストできます。

でもここ最近の日本語記事はほぼなく、海外でもそんなにない。

２年くらい前が熱かったみたいですが、着々とUpdateされている感じですよ。

まあ、お金払ってFigmaの人はそちらがベストでしょう。

私みたいな、「にわかデザイナ」はFigmaに課金は厳しい。

私などはこの機能を年に何度使うかですので、

OpenSourceでコード吐ける機能があるんで魅力的です。

 

SelfHostの方法の詳しくは下記のリンクを見て触発されたのでこの通りです。

 

gihyo.jp

 

マニアックな私は挑戦せねばですな。（笑）

この記事の方もわかってるねえ～～～ということでLXD上でDocker入れてますね。

さすがです。私の環境もこれでいきます。

この方法の利点はhttpでの構築になりますが、proxyをかましてhttps化できることです。

docker側を触らずnginxでhttps化できました。

ちょうどhttps化しているホストの/ が空いていたので好都合でした。

それで言語選択も日本語があります。

 

但し、今日時点でDocker ComposeでUpすると立ち上がらないです。

心が折れそうですが、SECRET_KEYをdockerファイルに書かないといけません。

掲示板見て値が書いてあったのでそれを入れたらOKとなりました。

とっても初見殺しですな。

なので素直に本家サイトでFree Planで使うのが楽です。

報告としては私の環境OCI Always Free ARM 4core 24Gで使えています。

Dockerの中身がJava , PostgresSQL , redisなど入っているので、docker提供も

納得です。

 

Selfホストができたのですが、自分のサイトがそっくり本家と同じになるので、

公開しておくと自分のサイトのユーザー登録が動くので、とっても困ります。（汗）

そう、サイト公開するのが目的じゃないのでね。

VPN内でもhttpでは使えているので、ここどうしようかと思っています。

Penpot流行るといいですな。

 

ではでは。

LinuxでWindowsアプリ

さて、仮想化大好きな変わり者です。（笑）

 

WINEでWindowsアプリをBottlesで動かして満足していたのですが、

DOCKER-Wineというワードがあることを知りました。

とてもそそりますが、こっちのほうがいいよというのが

下記です。

 

github.com

 

よさそうですね。Windowsアプリがブラウザ上で動いて、

WINEがDockerコンテナになっているんですね。

すごくないですか。

わくわくしますね。

 

まだ試していません。実はManjaroがVPNの仲間に入れなくて苦戦しています。

なので、それが終わったら試そうと思います。

 

ではでは。

 

UIFlow1.0のBug?

さて、UIFlowでプログラムして現在時刻を表示しましたが、

１時間違っていることに、さっき気づきました。（汗）

ということでNTPから取得してTimeZoneを指定するだけなのですが、

日本はUTC+9ですよね？

そうすると、１時間遅くなります。

なんでだ～～～

こんなとこ間違えてるはずもないのだが～～と

深読みしてみる。

＋１０にすると合うのでそうしたのですが、気持ち悪い。

経緯を知っている人いたら教えてください。

UIFlow2.0にしようかと思っていますが、

IDEがないので、Ｗｅｂエディタになるので、どうしようかと

思っています。

 

ではでは。

 

noderedでカレンダタイマー機能を使う

さて、noderedです。

周期的なタスクの実行を行いたいときどうしてますか？

定周期（５分に一度）などはInjectionノードでいいのですが、

休日は実行したくないとか、ホームオートメーションではいろいろ

制御したくなると思います。

 

最適なノードがあったので紹介します。

node-red-contrib-schedex

です。

全体的にわかりやすいですが、ちょっと癖があります。

 

タイマー動作で 6:00～7:00の間は実行して欲しいという場合

On Time欄とOff Time欄に開始時刻と終了時刻を入れます。

この時のOn Payload欄とOff Payload欄が文字列しか入れられないのです。

また開始時と終了時のみpayloadから送出されます。

エッジ動作となります。

 

なので出力ノードの後処理で、受信したpayloadの文字をみて、

任意のpayloadに書換えをすることになります。

通常はJavaScript Objectでtrue,falseが欲しくなると思いますのでswitchで

生成しました。

 

上記のようにエッジ動作なので、ゾーンに入っている時に起動すると

Onエッジが取れません。

なので入力ノードが用意されているのでこれを使います。

ここにInjection Nodeを入れたいですが、フォーマットが指定されているので

send_stateという文字をpayload指定してください。

これで入力ノードのタイミングで出力ノードから現在の状態を

出力してくれます。

これで、ゾーン中の起動でもOnエッジのpayload送出があるので、

状態が同期されます。

もちろんゾーン外の場合はOffエッジのpayload送出になるので、

初期状態の実行同期ができます。

 

まあケースバイケースですが、入力ノードの使い方を理解すれば

使えるノードになると思います。

私は大満足です。

 

ではでは。

UIFlowのTIPS2

さて、前の記事でスクリーンセーバーの回路を上げましたが、

さらに改良して、スクリーンセーバーの有無を外部からON.OFF

できるようにしました。時間によって常時表示したい時間帯と

そうでない時間帯で切替を外部指令したくなった為です。

MQTTでJSONにスクリーンセーバー有効・無効の意味を持たせた項目を

入れればいいだけなので、とても簡単に拡張できました。

JSONの柔軟性が発揮されます。

 

それで味気ないので現在時刻でも表示しようとしたのですが、

２桁フォーマットHH;MMになってくれないので、１桁の数字の時は

補わないといけないですな。

どの言語でも必ず使うものですがUIFlowでの方法が標準でない感じです。

知っていたらどなたか教えてください。

私はダサいとは思いながら以下の回路にしました。

現在時刻表示回路

可読性優先です。

zfillが使えないので、こちらにしたら使えました。

Execute Codeって複数行いけるのかなあ。

でも可読性が落ちそうなので、１行１Pythonコードにしてみました。

あまりごりごり書かないのがいいのですが、

機能がないと、pythonで書かないといけなくなりますな。

NodeRedのFunctionノードみたい感じでとらえています。

 

ノーコードなのにローコードでだんだんゴリゴリになるのが

常ですので自戒はしてますが。（笑）

ではでは。

UIFlowのTIPS

さて、UIFLOWに１日もて遊ばれました。（汗）

どうしても画面の背景色が変わらないのです。

こんな簡単な事～～～～！！！　なんです。

AIに聞いても文法間違ってませんか？（笑）とか.....

本当にいやになりました。UIFlow 2.0にしてみようかとか、

ファームのVersion下げたり、上げたり....  涙がでます。

それでジェミニに聞いたら最後にbugあるかもよ～～～

でなんと「Wifiの接続命令の特定のBlockを使うと絶対白になる」

という情報が...  これじゃん。

ということでBlockを替えたら「ビンゴ！」

「初見殺しです.....」

ということで、治らんのですかねえ。

気を取り直して、スクリーンセーバーの必要に迫られたので

ちょこっと回路組んだので恥を忍んで残しておきます。

設定と解除です。（ボタンを押すと解除にしてます）

 

こちらが設定30秒で開始

 

こちらが解除 (Cボタンで復帰します）

 

それからMQTTでJSON文字列を受信して、切り出して

要素ごとにラベル表示のBlockを示します。

JSON要素が T1,T2,T3,T4,T5とある例です。

ラベル名と合わないのは気にしないでください。

あんまりUIFlowのサンプルキャプチャって公式以外ないので、

書いておきます。

最適ではないかもしれないですが...

 

ではでは。

 

UIFlowで遊ぶ

さて、M5StackにUIFlowをセットアップしていました。

実はM5Stack Core2はNodeRed MCUの構築に使っていたのですが、

プログラムを組んでみたら、転送は成功するものの、

しばらくするとリセットがかかり、再起動を繰り返すという

症状がでてしまっていました。

DashBoardのTextを貼っただけでそうなるので、どうしようもありません。

UIサポートをOFFにすると動くので、画面UI周りで不具合があるよう。

 

なので他でM5Stack Core2で画面を簡単に作れる環境はUIFLowがあります。

Pythonをグラフィカルインターフェイスをかぶせたものですね。

UIFlow 2.0もあるのですが、安定していると思われる1.0で入れてみました。

お約束ではまりました（汗）

後、日本語表示にするとパーツも日本語表記になるが、むしろわからなくなります。

MINDみたい感じ（わかります？）

なのであえて英語でやったほうが、海外の事例もすぐに機能がわかるので、

私は英語が好きです。

MQTTを受信して、画面に温度を出すという単純なものですが、

MQTTが動かない。

どうもQosの指定の問題だったよう。MQTTの挙動を理解していない私のせい

らしい。

何とか受信できた後はJSONで受けたデータを切り出して、

画面に表示するだけなのですが、グラフィカルな操作でどうしたらいいか

わからないのでした。

裏でPythonソースが見れるので自分でタイプしたい衝動にかられたのですが、

そこを我慢して探索しました。

UIFlowはパズルのピースがはまらないと駄目なんですよね。

想像力が要ります。

JSONをMAPに入れて、キーを切り出してラベルへ割付すると

無事温度がでてきました。

ローコードですな。

 

わかれば簡単だけど一定のレベルに達しないと手が動かないという

ツールですね。

 

ではでは。