Node-REDでWebサーバを作ったときに、CSSなどの静的リソースファイルを使用するには?

Node-REDを使ってWebサーバを作ったときにCSSを別の静的ファイルにして保存したいこともあります。同じHTMLファイルにCSSを入れても同じことはできるのですが、内容の見通しがよくなるので別ファイルにする方がおすすめかなと思います。

例えば、以下のようにCSSファイル(sample.css)を指定するとなると、どこに配置することになるのでしょうか?

f:id:ueponx:20210927180758p:plain

ということで、今回は静的リソースを使用するための設定をメモっておきます。

今回はKatacode上のNode-REDを使用していますが、他の環境でもほぼ同じ設定を行うことになります。

www.katacoda.com

また使用しているフローは以下のものをベースにしています。

f:id:ueponx:20210927175507p:plain

[{"id":"8467c21d2545a7c7","type":"template","z":"7caeabc7e2fd0b0d","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n<head>\n<title>Sample Page</title>\n</head>\n<body>\n{{payload.stateName}}</br>\n{{payload.city}}</br>\n{{payload.street}}</br>\n</body>\n</html>","output":"str","x":300,"y":120,"wires":[["ca35503b3c8beeb4"]]},{"id":"25b6a7546553433d","type":"http in","z":"7caeabc7e2fd0b0d","name":"","url":"/api","method":"get","upload":false,"swaggerDoc":"","x":100,"y":60,"wires":[["3f1735bf6de77b35"]]},{"id":"ca35503b3c8beeb4","type":"http response","z":"7caeabc7e2fd0b0d","name":"","statusCode":"","headers":{},"x":490,"y":120,"wires":[]},{"id":"3f1735bf6de77b35","type":"http request","z":"7caeabc7e2fd0b0d","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"http://api.thni.net/jzip/X0401/JSON/{{{req.query.query1}}}/{{{req.query.query2}}}.js","tls":"","persist":false,"proxy":"","authType":"","credentials":{"user":"","password":""},"x":310,"y":60,"wires":[["8467c21d2545a7c7"]]}]

内部で以下のREST APIを使用しています。

project.iw3.org

そのまま動作させるとどうなる?

今回は以下のようなCSSファイルを準備しています。背景色を青っぽくするものになります。

f:id:ueponx:20210927180833p:plain

では、設定を何も行わずに上記のようにHTMLファイルに含めるとどうなるかをチェックしてみます。Chromeブラウザデベロッパーツールを開いてみると以下の様になっています。

エラーが発生

f:id:ueponx:20210815235418p:plain

読み込んだデータ

f:id:ueponx:20210815235421p:plain

うまく静的リソースを読み込めていないというよりもどこのパスにいるのかが不明なのでこのような状態になりますね。

設定を行う

そのような場合にはNode-REDをインストールしたパス/.node-redにあるsetting.jsファイルを編集することになります。以下の例では/rootでインストールを行っている場合の例になります。このファイルを編集します。

ファイルをスクロールして…

f:id:ueponx:20210815235431p:plain

作業を行う箇所はhttpStaticの項目になります。デフォルトではこの項目はコメント化されているので、コメントアウトして有効化します。これで、Node-REDをインストールしたパス/node-red-staticが静的リソースを格納するパスになります。

httpStaticの項目をコメントアウトする

f:id:ueponx:20210927173706p:plain

忘れずにNode-REDを再起動しておきましょう!

CSSなどの静的なリソースはここにコピーすることで使用可能になります。もし存在していない場合にはディレクトリを作成してください。

f:id:ueponx:20210815235442p:plain

作成したディレクトリにCSSファイルをコピーしておきます。そして実行すると以下の様になります。

エラーは解消

f:id:ueponx:20210815235453p:plain

背景色も無事に反映されました

f:id:ueponx:20210815235448p:plain

おわりに

Node-REDの静的なリソースを指定をおこなってみました。これでWebサーバーを仕立てたりする場合にもリソース指定を行えるようになり、静的な画像素材をいれること、 Javascriptなどが使用可能になります。かなりの自由度が増したのではないでしょうか。

参考

uepon.hatenadiary.com

uepon.hatenadiary.com

Windows10のDockerでRHEL8コンテナをインストールする

以前、CentOSがなくなり移行先をどうするかというようなことがネットでも話題になっていましたが、それに加えてRHELのライセンスも緩和されたということも同じように話題になっていました。自分はCentOSRHELも使用していませんが、今後のためにRedHat系のLinuxディストリビューションの状況も少しは見ておいたほうがいいかなと思いました。そこで、ライセンスが緩和されたRHELをWindows10のDocker環境に導入してみようかなと思います。Docker Desktopも有料化されるとか…この界隈も結構状況が変わってきましたね。 雑な説明になりますが、RHELは16台まで使用可能に緩和、Docker Desktopは個人利用は無償のままです。

【参考:「CentOS Linux」終了へ 開発者の動揺と救済の動き】 cloud.watch.impress.co.jp

【参考:開発者向けサブスクリプションサービス「Red Hat Developer」プログラムを改訂】 www.redhat.com

【参考:Docker Desktop有料化の影響】 qiita.com

DockerRHELのコンテナイメージをインストールするのはそんな難しくはないだろうなと思っていたのですが、あんまり情報がなくてびっくりしました。そういう使い方をしないということなのでしょうか?(ライセンスの問題?)

ネットで検索すると、RHELDockerをインストールしてコンテナ環境を構築するパターン、あるいはRedHat製のPodmanというDocker互換のアプリケーションでの導入するパターンといった情報はでてくるのですが、WindowsなどのDocker環境にRHELコンテナを導入する情報があまりありません。

そこで、RHELコンテナの導入に関する情報をまとめてみたいと思います。

続きを読む

WSL2の新機能WSLgを使ってX Window SystemのGUIアプリを動作させてみる

以前、‘‘‘WSL‘‘‘環境化でXのアプリケーションを実行してみました。

uepon.hatenadiary.com

当時はデフォルトではXアプリケーションの実行は‘‘‘WSL‘‘‘単体で対応していなかったため、 ‘‘‘X Window System‘‘‘のサーバになるアプリである‘‘‘VcXsrv Windows X Server‘‘‘をインストールしてGUI対応のアプリを実行していました。その時から状況も変わり ‘‘‘X Window System‘‘‘のサーバを別途インストールすることなく、‘‘‘WSL2‘‘‘のデフォルトで対応することができるようになったようです。 ‘‘‘WSL‘‘‘で‘‘‘Linux‘‘‘のGUIアプリを動かす仕組みは、‘‘‘「WSLg(Windows Subsystem for Linux GUI)」‘‘‘と呼ばれています。 WSL2を最新版にすれば、WSLgを使用することができます。※WSLgはWSL2でのみサポートされます。

今回はその‘‘‘WSLg‘‘‘を使用してGUIアプリを起動するかを確認してみようと思います。

続きを読む

PythonTutorを使うとPythonの勉強が捗りそう

自分はなんちゃって技術者といわれる部類の営業職なので、当然マニュアルなどを見ながら出ないとPythonはすんなり書くことができません(C言語などは体にしみこんでいるのでそこそこかけたりしますが)。とはいえ、もう少し体系立ててプログラミング言語を勉強できるといいなあと常々思っています。そんな中見つけたこちらのサイトですが、Pythonの実行時の状況(変数など)をビジュアル化(可視化)して表示しながらステップ実行ができます。

個人的にめちゃ便利じゃん!と思ったのでちょっとサイトの紹介がてら動作を確認してみます。

pythontutor.com

上記サイトにアクセスすると以下のような表示が行われます。

f:id:ueponx:20210913223355p:plain

このサイトはPython以外にもJavaCC++JavaScriptRubyといったプログラミング言語にも対応しているようです。

ページには以下の様に記載があります。

Python Tutorは、プログラミングを学ぶ上での根本的な障壁を克服するのに役立ちます。つまり、コンピューターがコードの各行を実行するときに何が起こるかを理解することです。 これを使用して、WebブラウザーでPythonJava、C、C、JavaScript、およびRubyコードを記述し、その実行を段階的に視覚化することができます。

Pythonに関しては即ステップ実行してくれるようですが、Javaなどのコンパイルが必要なプログラミング言語では実行時の前処理が必要のようです。

また、ページ下部にも実際のコードとデータの様子などが表示されていました。一見するとビジュアル的なデータなどの表示が行われるデバッガのような位置づけのようです。

実際にコードを試してみる

では実際にコードを実行して試してみようとおもいます。今回はPythonを使用するので画面上部にある【Python Tutor】というリンクをクリックします。

f:id:ueponx:20210913225439p:plain

クリックするとエディタモードに画面が遷移します。エディタモードでは【Write code in】というプルダウンメニューで言語やバージョンを選択することができます。 Pythonのバージョン3系は3.6が該当するので、プルダウンからPython 3.6を選択すればよいでしょう。サポート外ながらも2.7系のPythonも使用できるようです。

f:id:ueponx:20210913225630p:plain

使用可能なプログラミング言語の候補 f:id:ueponx:20210915005557p:plain

エディタ部分に実行可能なPythonのコードを記入すれば準備完了です。 今回はサンプルコードとして用意されたものを実行してみます。

サンプルコード

x = [1, 2, 3]
y = [4, 5, 6]
z = y
y = x
x = z

x = [1, 2, 3] # a different [1, 2, 3] list!
y = x
x.append(4)
y.append(5)
z = [1, 2, 3, 4, 5] # a different list!
x.append(6)
y.append(7)
y = "hello"


def foo(lst):
    lst.append("hello")
    bar(lst)

def bar(myLst):
    print(myLst)

foo(x)
foo(z)

f:id:ueponx:20210915010055p:plain

【Visualize Execution】ボタンをクリックするとステップ実行画面が表示されます。

f:id:ueponx:20210915010120p:plain

この画面ではコードを各行ごとにステップ実行し、変数の値や参照などを可視化してみながら実行を行うことができます。変数の値なのか参照なのかわかるので初学者にも非常にわかりやすく見えると思います。

f:id:ueponx:20210915010213p:plain

画面内にある【Next >】ボタンを押すことで順次コードを実行し、その時の状態を可視化してくれます。【Prev >】を押せば1つ前の状態に戻すことができます。また、【Last >>】ボタンをクリックすれば、その時点から最後までのコードまで一気に実行することができます。同様に【<< First】ボタンをクリックすれば、初期状態に戻すこともできます。ターミナルデバッガ的な使い方も簡単にできます。

f:id:ueponx:20210915010433p:plain

また、画面の右上には標準出力で表示される内容を示すボックスがあり、その下にデータの可視化が行われるエリアが存在します。

f:id:ueponx:20210915010632p:plain

では、このコードをステップ実行してみましょう。【Next >】ボタンをクリックします。

f:id:ueponx:20210915011302p:plain

すると、エディタ部分の左側にある矢印が1行下に移動します。そして、右側のエリアに実行したコードの内容が可視化されて表示されます。

f:id:ueponx:20210915011410p:plain

このような形で実行の状態が順次ステップ的に表示されます。また、この状態をパーマネントリンクとして保存する事もできます。

f:id:ueponx:20210915012928p:plain

先程のコードを最後まで実行すると以下のような状態になります。

f:id:ueponx:20210915013103p:plain

おわりに

Python Tutorを使用することで、Pythonの実行状態をわかりやすく確認しながら動作させることができます。 すべてのコードの実行ができるというわけでもありませんが、基本的なコード(教科書のようなコード)の動きを確認するのであれば、 かなりの助けになるサービスではないでしょうか。

このような勉強用のサイトは今まで知りませんでしたが、まだまだネットには有用なものがありますね。 うまく使ってPythonを勉強するのが捗るといいな思います。

特定のバージョンのNode-REDをインストールする

Node-REDのバージョンが割と目まぐるしく変化するようになってきています。そんなときにも特定のバージョンとの比較をやってみたいということはあるかなと思います。そこで、最新版ではなく特定のバージョンのNode-REDをインストールする方法がないかなと思って探してみました。

f:id:ueponx:20210912234758p:plain

続きを読む