簡易掲示板を作りたい、node.js+expressで ③/nodebbs/msgで投稿する

投稿

送信ボタンを押したら入力された文字を保存できるようにしていこう。

POSTで送られてきたデータを取得する

index.htmlのformのactionにmsgとしとく。

<form action="msg" method="POST">

app.jsは

app.post('/nodebbs/msg', (req, res) => {

})

で取得できる。

https://expressjs.com/ja/4x/api.html#app.post.method

req.bodyの中に入ってるそう。

https://expressjs.com/ja/4x/api.html#req.body

扱うために以下2行追加

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

https://expressjs.com/ja/4x/api.html#express.json

https://expressjs.com/ja/4x/api.html#express.urlencoded

そんでapp.postの中身を

 console.log(req.body)

フォームからなんか入力して送信するとコンソールに表示された!

データをファイルに保存

ファイル形式何にしようかなと思ったんですが、JSONでいーかなと思った。なのでlog.jsonという空のファイルを作っておく。

Node.jsにははじめからfsモジュールというファイル入出力用のモジュールが組み込まれているそうなのでそれを使う。

const fs = require('fs');

https://nodejs.org/api/fs.html

うーーーんと、取得したデータを一旦オブジェクトにして、JSON形式で書き出して、サーバーローカルのファイルに追記するみたいな感じでどうだろう。

var obj = { name: req.body['user_name'], msg: req.body['user_message'], dt: (new Date()).toJSON() }

こんな。名前と内容と今の時間。これでオブジェクトができた。これをJSON文字列に変換する。

var str = ',' + JSON.stringify(obj)

このままだと”,”が足りないので前につけとく。そしたらファイルに追記

fs.appendFileSync('log.json',str,'utf8')

書き込めた!で、なんかイキっぱなしになってしまうので、最後に

 res.redirect('/nodebbs')

とリダイレクトした。あとは読み込みかなー?

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON

カテゴリー: したい | タグ: , , | コメントする

簡易掲示板を作りたい、node.js+expressで ②/nodebbsにトップページを作る

最初のページ

とりあえずexpressでサーバーを立てて最初のHTMLを返せるようになろう。

準備

ディレクトリ作りーの

$ mkdir /home/dalomo/nodebbs

npm initしーの

$ npm init

expressインストールしーの

$ npm install express --save

expressのHello, world

https://expressjs.com/ja/starter/hello-world.html

こちら参考に

const express = require('express')
const app = express()
const port = 8850

app.get('/nodebbs', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

これで

https://dalomo.net/nodebbs/

にアクセスするとHello, worldという文字列が返る。

静的ファイルを返すようにする

んで静的ファイル置き場を作りーの

$ mkdir /home/dalomo/nodebbs/public

この中にindex.htmlを置いておく。

  res.send('Hello World!')

res.sendFile(__dirname + '/public/index.html')

に書き換え。そうすると

https://dalomo.net/nodebbs/

に行くとindex.htmlが表示される。まぁこれでもいいんだけど、ぶっちゃけ/nodebbsでやってることって静的ファイルを返してるだけだ。そういう場合

app.get('/nodebbs', (req, res) => {
  res.sendFile('index.html')
})

を消して

app.use('/nodebbs', express.static('public'));

でよいみたい。

https://expressjs.com/ja/starter/static-files.html

index.htmlの中身

とりまフォームさえあればええやろという事で

    <form action="" method="POST">
        <li>
            <label for="name">名前:</label>
            <input type="text" id="name" name="user_name">
        </li>
        <li>
            <label for="msg">内容:</label>
            <textarea id="msg" name="user_message"></textarea>
        </li>
        <li class="button">
            <button type="submit">送信</button>
        </li>
        </ul>
    </form>

とした。↓を日本語にしただけ

https://developer.mozilla.org/ja/docs/Learn/Forms/Your_first_form

ボタンを押したときに、actionの内容が実行される。フォームの内容はPOSTメソッドで勝手に飛ぶのでactionの内容を作ってやればいいんだなと思う。そしたら次はその処理を作ってこう。

カテゴリー: したい | タグ: , , | コメントする

簡易掲示板を作りたい、node.js+expressで ①見通し

掲示板

掲示板的なものが作れるようになっているのでは?と思ったので作ってみることにした。

やること

  1. なんか書き込めるフォームを作る
  2. フォームから送信されたデータをサーバーに保存する
  3. 保存されたデータを表示できるようにする

ほら、できそうじゃない?

何で作る

PHPで作ろうかとも思ったんだけど、Node.jsを使ってみたくなったのでそっちで作る。Node.jsにはexpressというフレームワークがあって、それ使うと簡単みたい。Socket.io使ってみたときに使ってたなぁ、もう忘れたけど。まぁとりあえずそんな感じでいこう!

カテゴリー: したい | タグ: , , | コメントする

Enviroを使ってみたい

Enviro

Pimoroniにラズパイ用のEnviroという環境計があった。

https://shop.pimoroni.com/products/enviro

ちょうど湿度計がほしいなと思っていたところだったので買ってみた。LCDもついてて表示もできるみたい。より高機能なEnviro+もあったけど空気汚染度はいらんかなーと思ったのでEnviroにした。

準備

買った!

ハードウェア

差し込むだけ。電源入ったまま差し込むとラズパイが再起動する。

ソフトウェア

githubからクローンする。Enviro+用のライブラリに見えるけど多分無印でも使えるんだろーなと思う。自分はOSがLiteなのでgitのインストールから。ちなみにpythonはもとから入ってる。

sudo apt install git

そしたらライブラリをクローンしてインストール

git clone https://github.com/pimoroni/enviroplus-python
cd enviroplus-python
sudo ./install.sh

インストール終わったらいったん再起動

sudo reboot

では例を動かしてこー。

計測

例を動かしてみる。

cd ./enviroplus-python/examples

移動したら

python weather.py

で実行したらエラー出た。

Traceback (most recent call last):
File "/home/pi/Pimoroni/enviroplus/examples/weather.py", line 4, in <module>
from bme280 import BME280
ModuleNotFoundError: No module named 'bme280'

うーむ?ライブラリがインポートできてないっぽい?

cd ./Pimoroni/enviroplus/examples

でこちらのやつ試してみても一緒。

https://forums.pimoroni.com/t/enviro-no-module-named-bme280/15240/2

https://forums.pimoroni.com/t/enviro-bme280-library-import-in-weather-py/10939

とかで挙げられてる

pip install pimoroni-bme280==0.0.2

を試すもpip入ってなかった。

sudo apt install python3-pip

でインストールして再度bme280を入れると

i2cdevice-0.0.7

も一緒に入って成功。もっかい例実行しようとすると

Traceback (most recent call last):
File "/home/pi/Pimoroni/enviroplus/examples/weather.py", line 7, in <module>
from smbus2 import SMBus
ModuleNotFoundError: No module named 'smbus2'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
File "/home/pi/Pimoroni/enviroplus/examples/weather.py", line 9, in <module>
from smbus import SMBus
ModuleNotFoundError: No module named 'smbus'

またエラー。なんか他のも入ってなさそうなんで

sudo apt install python3-numpy python3-smbus python3-pil python3-setuptools

としてインストール。いい加減動けと念じつつ再度実行すると

weather.py

2021-11-28 11:00:46.773 INFO weather.py - Print readings from the BME280 weather sensor.

Press Ctrl+C to exit!


2021-11-28 11:00:46.925 INFO Temperature: 26.08 *C
Pressure: 666.04 hPa
Relative humidity: 83.65 %

2021-11-28 11:00:47.937 INFO Temperature: 30.06 *C
Pressure: 1026.72 hPa
Relative humidity: 29.57 %

2021-11-28 11:00:48.950 INFO Temperature: 30.06 *C
Pressure: 1026.73 hPa
Relative humidity: 29.55 %

2021-11-28 11:00:49.962 INFO Temperature: 30.07 *C
Pressure: 1026.75 hPa
Relative humidity: 30.01 %

できた!一秒ごとに気温・気圧・湿度が表示される。Ctrl+Cで停止。こちらの温度はラズパイ本体の熱がプラスされてしまうのでちょっと高いらしい。

compensated-temperature.py

それを校正した温度を表示できるのが

python compensated-temperature.py

すると

2021-11-28 11:05:47.132 INFO Compensated temperature: 20.82 *C
2021-11-28 11:05:48.139 INFO Compensated temperature: 26.11 *C
2021-11-28 11:05:49.146 INFO Compensated temperature: 26.16 *C
2021-11-28 11:05:50.154 INFO Compensated temperature: 26.25 *C
2021-11-28 11:05:51.161 INFO Compensated temperature: 26.24 *C
2021-11-28 11:05:52.168 INFO Compensated temperature: 26.24 *C
2021-11-28 11:05:53.176 INFO Compensated temperature: 26.23 *C
2021-11-28 11:05:54.183 INFO Compensated temperature: 26.23 *C
2021-11-28 11:05:55.190 INFO Compensated temperature: 26.12 *C
2021-11-28 11:05:56.198 INFO Compensated temperature: 26.16 *C

おー。合ってるのか分からんが現実的な数字に変わった。

light.py

光センサーの例を実行する。

python light.py

だがしかし、またエラーが出る。

Traceback (most recent call last):
File "/home/pi/Pimoroni/enviroplus/examples/light.py", line 7, in <module>
from ltr559 import LTR559
ModuleNotFoundError: No module named 'ltr559'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
File "/home/pi/Pimoroni/enviroplus/examples/light.py", line 10, in <module>
import ltr559
ModuleNotFoundError: No module named 'ltr559'

これ多分、各種センサーの全ライブラリが入ってない気がする。ぐぐると

https://forums.pimoroni.com/t/enviro-bme280-library-import-in-weather-py/10939/10

https://forums.pimoroni.com/t/no-module-error/10962/7

python3 -m pip install pimoroni-bme280 pms5003 ltr559 st7735 ads1015

とか

sudo pip install pimoroni-bme280 pms5003 ltr559 st7735 ads1015

な感じでインストールする。そんでもっかい例を実行すると

2021-11-28 11:22:45.990 INFO Light: 72.89 Lux
Proximity: 00.00

2021-11-28 11:22:47.000 INFO Light: 73.18 Lux
Proximity: 00.00

2021-11-28 11:22:48.010 INFO Light: 72.89 Lux
Proximity: 00.00

2021-11-28 11:22:49.020 INFO Light: 13.39 Lux
Proximity: 23.00

2021-11-28 11:22:50.030 INFO Light: 12.21 Lux
Proximity: 30.00

光の値と、その値から近接性を計算してくれる。

LCD

Enviroには0.96インチのLCDがついている。これにいろんな値を表示できるみたい。

python lcd.py

とやると

Traceback (most recent call last):
File "/home/pi/Pimoroni/enviroplus/examples/lcd.py", line 5, in <module>
from fonts.ttf import RobotoMedium as UserFont
ModuleNotFoundError: No module named 'fonts'

またエラー。いい加減にしてくれやと思いつつ

pip3 install font-roboto

してまた実行すると

できたー!

all-in-one.py

LCD使って全部表示できるようにする。

python all-in-one.py

例によってエラーが出る。

Traceback (most recent call last):
File "/home/pi/Pimoroni/enviroplus/examples/all-in-one.py", line 16, in <module>
from enviroplus import gas
ModuleNotFoundError: No module named 'enviroplus'

そもそも俺が間違っとるんか、チュートリアルのママやってんだけどなぁ。

pip install enviroplus

表示された!光センサーをタッチすると表示が変わる。ただガスセンサーはついてないのでその表示になると動作が停止する。つーことで

python all-in-one-enviro-mini.py

とすることで

できた。

noise~

ついでに。PortAudio入ってないエラーは

sudo apt-get install portaudio19-dev

そんで

python noise-profile.py

だと

noise-profile.py – Get a simple noise profile.

This example grabs a basic 3-bin noise profile of low, medium and high frequency noise, plotting the noise characteristics as coloured bars.

そんで

python noise-amps-at-freqs.py

だと

noise-amps-at-freqs.py – Measure amplitude from specific frequency bins

This example retrieves the median amplitude from 3 user-specified frequency ranges and plots them in Blue, Green and Red on the Enviro+ display.

As you play a continuous rising tone on your phone, you should notice peaks that correspond to the frequency entering each range.

だって。dbでグラフになるのかと思ってたらそうじゃないようです。

enviro-monitorの使い方が分からんので、とりまここまで!

カテゴリー: したい | タグ: , , | コメントする

Raspberry Pi Imagerでモニター無しの初期設定セットアップ

Raspberry Pi Imager

知らんうちに公式でOSイメージライターが出ていた。前やったときはなかったのに。環境計が欲しいと思いEnviroを購入したが、いまノーパソしかなくモニターが無いからセットアップできなーいと思っていたので僥倖である。ちなみに以前からUSB経由でモニタ無しセットアップはできたらしい。そうですか。

インストール

https://www.raspberrypi.com/software/

公式で配布されているのをダウンロードしてインストール。私はWindowsだ。45秒の動画もある。

bootSD作成

そこら中に解説があるので今更ですが、せっかくなので備忘録を残しておく。

起動

シンプル。

OS&Strage選択

入れたいOSと保存先を選ぶ。今回はRaspberry Pi OS (other)の

Raspberry Pi OS Lite (32-bit)を選んだ。

保存先は保存したいドライブを選ぶ。今回はドンキで買った16GBのMicroSDカード。

拡張オプション

Ctrl + Shift + Xで拡張オプションが開く。

  • 今回のみか永続的か
  • オーバスキャンを無効化するか
  • hostnameの設定
  • SSHを有効化するか

 

  • パスワード認証の場合ーパスワードを設定できる
  • 公開鍵認証の場合ー自分の鍵情報が表示される
  • Wi-fi設定
  • 今PCで繋いでいるWi-fiのSSIDが表示される

 

  • Wi-fiパスワード
  • show~にチェック入れるとマスクが外れる
  • countryはJPに変更
  • ロケールの設定
  • タイムゾーンはAsia/Tokyo
  • キーボードはjpに変更
  • skip~はLiteだと関係なさそうだけど一応チェックする

 

  • 終わったら音鳴らすか
  • 終わったらメディアを排出するか
  • どのイメージを使用したかの統計に協力するか

なんかもうすごいよねー。進歩するんだなぁ。設定が終わったらWRITEをクリックして元のデータ消えちゃうよにOKして作成~。

TeraTermでSSH接続

できたSDカードをラズパイにセットし、電源だけ繋げてあげる。ちょっと待つ。WI-fiルータの設定画面を見ると

いますね!ということで

こうして

こうして

できたー!じゃあ次はEnviroを使えるようにしていこう。

カテゴリー: のーと | タグ: | コメントする

ジェニーハイLIVE アリーナジェニー@ぴあアリーナMMに行ってきた

ジェニーハイ

https://genie-high.com/

https://www.youtube.com/channel/UCZUm9b2e5w54cQM7MVVR_9A

ジェニーハイのことは何で知ったんだっけ。吉本芸人の小籔さんがドラム叩いてる動画をたまたまみかけて、そこから知っていったんだったかなぁ。まぁとにかく結構好きで、一度ライブに行ってみたいと思ってたんだけど、ワンマンツアーの抽選には外れてしまってそのままだった。んで、アリーナでやるっつーんで今度こそはと思い、滑り込みでチケット買った。

観光

思ってたより早く着いてしまったのでちょこっと観光することにした。

ランドマーク!

観覧車!

日本丸!

赤レンガ倉庫!

赤レンガ倉庫の赤レンガ!

飛鳥IIとかいう客船!

以上。

入場前

まず物販列に並んでグッズ買った。メンバーのサイン入りののぼりがあったので写真撮った。

くっきー!さんのだけ見つかんなかった…。

タオル、キーホルダー、ペンライト、あとラバーブレスレットも事前に買ったな。ペンライト買ったはいいものの点けただけでたいして振らなかった、すまぬ。

入場

4階席!でしたー。めっちゃ遠い~けど人との重なりはほぼ無くて、双眼鏡持っていったんですけどそれですごいよく見えた。購入ギリだったからなー、仕方ないね。

席にはカーセンサーの袋が。記事にイッキュウさんのインタビューが載ってた。

レポ

レポはメディアのを。

https://natalie.mu/music/news/446759

https://news.tbs.co.jp/newseye/tbs_newseye4368878.htm

https://www.oricon.co.jp/news/2208298/full/

https://www.musicvoice.jp/music/report/livereport/205330/

https://www.barks.jp/news/?id=1000208477

https://realsound.jp/2021/09/post-869136.html

すんごく楽しかったです。

夏嵐でおみくが来るかなーとやんわり期待してたんだけど来なかった。

次はもっと近くで見れるといいなぁ。

でもプリマドンナをやってくれなかったのは悲しい。

あの曲が一番好きなのでぜひ次は生で見たいなぁ。

夜観光

終わってからちょっと時間あったので、ついでに夜景撮った。

きれーだったなぁ~。またワンマンライブがあったら行きたいな。メンバー全員忙しいからいつになることやら。あ、でも早速10月22日の新垣さんのコンサート?のチケット買っちゃった。これも楽しみ~。

カテゴリー: のーと | タグ: | コメントする

はじめての自作PC⑫ 組み立て

組み立て

カテゴリー: のーと | コメントする

はじめての自作PC⑪【Wi-Fi+Bluetooth】Intel Wi-Fi 6 AX200NGW

Intel Wi-Fi 6 AX200NGW

https://ark.intel.com/content/www/jp/ja/ark/products/189347/intel-wifi-6-ax200-gig.html

カテゴリー: のーと | タグ: | コメントする

はじめての自作PC⑩【ケースファン】SCYTHE KAZE FLEX 140 SQUARE PWM 1200rpm KF1425FD12S-P

SCYTHE KAZE FLEX 140 SQUARE PWM 1200rpm KF1425FD12S-P

https://www.scythe.co.jp/product/fan/kf1425fd12s-p/

カテゴリー: のーと | タグ: | コメントする

はじめての自作PC⑨【ケース】AKLLA A3 CNC ITX

AKLLA A3 CNC ITX

https://item.taobao.com/item.htm?id=612690329138

カテゴリー: のーと | タグ: | コメントする