Node.js関連のことを調べてみた2022年04月17日

Puppeteerをnode.jsで動かし、Webページにjsの処理を加えたスクリーンショットを自動で連続撮影する

大量のスクリーンショットを撮影する必要があるときに、ヘッドレスブラウザを使うと楽ですが、撮影の際にjsで少し処理を加えたうえで撮影をするような場面で、Puppeteerを使ったら便利だったのでメモ。

# Puppeteer

[https://github.com/puppeteer/puppeteer](https://github.com/puppeteer/puppeteer) によると、以下のように謳われている。

> Puppeteerは、 DevToolsプロトコルを介してChromeまたはChromiumを制御するための高レベルAPIを提供するノードライブラリ。ブラウザにて手動で実行できるほとんどのことは、Puppeteerを使用して実行できます。

ヘッドレスChromeをシェルで扱うような方法より細かい調整が楽そうだったので今回使ってみた。

## スクリーンショットを撮影

まずは適当なページを開いてスクリーンショットを撮影するところまで。

適当なディレクトリにnodeの環境を用意し、index.jsを配置。

“`zsh
% npm init -y
%

DIについて考えてみた(クリーンアーキテクチャ×TypeScript)

久しぶりに記事投稿します！
最近、実務でNode.js+Typescript×クリーンアーキテクチャで開発していて
その中でDI(依存性の注入)を使っている部分があるのですがメリットがあまりわかっていなかったので本記事で纏めてみようと思います。

## クリーンアーキテクチャについて軽く

DIを語る前に軽くクリーンアーキテクチャについて少し説明します。
クリーンアーキテクチャは関心事の分離をするという目的を達成するための1つの手法として提唱されています。
クリーンアーキテクチャでは、4層の円が描かれており、各円はソフトウェアの領域を表しています。そして、最も重要なルールとして、依存性は内側だけに向かっていなければならないとしています。


具体的にいうと、
Domain層(Entities)はUseCase層に依存してはいけない。
UseCa

Beebotte で外向きの HTTPリクエスト（Webhook）が扱える BeeRule（BeeRules Engine）を使う

過去に、以下の記事でも扱った [Beebotte](https://beebotte.com/) に関する記事の 第4弾となるものです。

– [Beebotte の REST API と MQTT の組み合わせを公式情報を見つつ試す（curl と Node.js）【2022年4月版】 – Qiita](https://qiita.com/youtoy/items/be1ffffa2f003082bef8)
– [MQTTブローカーとしても使える Beebotte で MQTT.js を使った Pub/Sub（Node.js で実装）【2022年4月版】 – Qiita](https://qiita.com/youtoy/items/e2539558b67e708b905d)
– [Beebotte のダッシュボードで M5StickC から送った数値をグラフ化する（UIFlow ＋ MQTT でデータ送信） – Qiita](https://qiita.com/youtoy/items/b65ddfc89a03117a0ee3)

## 今回の記事の内容
今回扱うのは、以下の [Be

Puppeteer で button を click しても効かないときに試したこと

現場でWebスクレイピングする機会がありました。
pupteer を使っていくなかで詰まったことがあったので、もし同じ状況で詰まっている人がいれば、参考になるかもしれません。

今回“click()“メソッドが期待する動作をしなかったので、その時の状況と解決策を書いていきます。

## 開発環境
– Windows10 version: 21H2
– Node.js version: v16.14.1
– Puppeteer version: 5.5.0

## 原因
– セレクタが間違っている
– ブラウザを開いているが、“–window-size“に問題がありクリックするボタンが表示されていない
– クリックする要素が表示される前に“click()“が実行されてしまっている
– なぜか“click()“が使えない　※後述します。

おそらくクリックが効かない原因のほとんどは、該当すると思います。
期待する動作にならないなら、まずはこのあたりをしっかり確認すると解決するかもしれません。

### セレクタが間違っている
まず最初に確認してみましょう。
ここが間違

Beebotte の REST API と MQTT の組み合わせを公式情報を見つつ試す（curl と Node.js）【2022年4月版】

過去に、以下の記事でも扱った [Beebotte](https://beebotte.com/) で、REST API と MQTT を組み合わせて使う話です。

– [MQTTブローカーとしても使える Beebotte で MQTT.js を使った Pub/Sub（Node.js で実装）【2022年4月版】 – Qiita](https://qiita.com/youtoy/items/e2539558b67e708b905d)
– [Beebotte のダッシュボードで M5StickC から送った数値をグラフ化する（UIFlow ＋ MQTT でデータ送信） – Qiita](https://qiita.com/youtoy/items/b65ddfc89a03117a0ee3)

## 通信方法に関するドキュメントを見てみる
### Beebotte の MQTT
MQTT を使う話は、冒頭でも掲載していた[過去記事](https://qiita.com/youtoy/items/e2539558b67e708b905d)をご参照ください。

### Beebotte の R

モジュールバンドラーってなに？

## モジュール化とは
モジュール化とは、別ファイルに分割すること。コードの管理をしやすくすることで、大規模開発などにも対応できる。
* 他のコードとの依存性を少なくし、変更、拡張がしやすくなる
* 変数名の競合をさせないことで、名前空間の汚染を防ぐことができる
* 機能ごとにモジュール化するため、再利用がしやすい

## モジュールバンドラーとは

> **モジュールバンドラーは複数のJavascriptファイルの依存関係を解析して、一つのファイルとしてまとめてくれる（バンドル）機能**があります。モジュールバンドラーによってバンドルされたファイルはそのまま読み込ませて使用することができます。これにより、開発者はファイルの依存関係を気にすることなく、Javascriptファイルを使用することが可能になりました。依存関係を気にすることがなくなったおかげで、大規模な開発などでもJavascriptを導入しやすくなりました。
>
引用：[https://it-kyujin.jp/article/detail/1675/](https://it-kyujin.jp/article/deta

Firebase Authenticationを使ってAPI Gatewayに認証機能を付与する

# 概要
Firebase Authenticationに登録されているユーザーだけがAPIを使えるようにするため、
エンドポイントであるAPI Gatewayにオーソライザーを設定します。

処理の流れは以下の通りです。
1. **Firebase Authentication SDK**を使用し**IDトークン**を取得する
2. 取得したIDトークンをヘッダーに付与し、APIGatewayのエンドポイントへリクエストを送る
2. API Gatewayの**オーソライザー**が**Firebase Admin SDK**を使用しIDトークンを検証する
2. 認証できた場合、Lambda関数を実行する

# 対象読者
Firebase Authenticationの機能が分かる方
API GatewayとLambdaでAPIを作成

MQTTブローカーとしても使える Beebotte で MQTT.js を使った Pub/Sub（Node.js で実装）【2022年4月版】

この記事では、以下の REST・WebSocket・MQTT が扱えるサービスの「[Beebotte](https://beebotte.com/)」を扱います。

●Beebotte
　https://beebotte.com/

Beebotte については、以前、ダッシュボードを使った可視化の話を記事にしたことがありました。

●Beebotte のダッシュボードで M5StickC から送った数値をグラフ化する（UIFlow ＋ MQTT でデータ送信） – Qiita
　https://qiita.com/youtoy/items/b65ddfc89a03117a0ee3

今回試すのは、IoT関連の話でも良く登場する　MQTT です。

## Beebotte で MQTT を扱う
冒頭に書いたとおり、Beebotte を使うとリアルタイ

CDK 2.20.0 と 2.19.0 はぶっ壊れてるので 2.18.0 を使おう

# もしかすると

これで解決するかも？

– https://qiita.com/siruku6/items/701ca518c126dc5ba571

# tl; dr

> npm install aws-cdk@2.18.0

# 何が起きるか

## 2.20.0 を入れようとすると

“`
% npm install aws-cdk@2.20.0
npm WARN tar zlib: incorrect data check
npm WARN tarball cached data for aws-cdk@https://registry.npmjs.org/aws-cdk/-/aws-cdk-2.20.0.tgz (sha512-rs9LTpvrlbsMcenZ3t7TuLDGbHhbnDocrE63Xb2PT++VptR/A8svllK8k1W7hPl77L9QS75GNK5gh+ShkEzsnw==) seems to be corrupted. Refreshing cache.
npm WARN tarball tarball data for aws-cdk@

夜集中して、寝ないで頑張れる環境をつくり、疲れたらLINEで癒しの曲を！

## Obniz X LINE Botで勉強を頑張れる「環境づくり」にチャレンジ！
最近仕事が特に忙しく、**プログラミングスクールとの両立に苦労していました**。辛酸をなめる状況が続き、まとまった時間を捻出するのが難しい環境だからこそ、**よなよな勉強を頑張れる環境を整えたい。**

特に、**仕事後の夜の勉強時間を増やし、質も向上させたい**。そのために今回は、**IoTの力**を利用して、**３つの課題解決**に取り組んでみました。

##### ①　妻が部屋に入ってきて話し込んでしまう　→　集中モードの時は赤いLEDを点灯させる
##### ②　眠くなってくると、寝てしまう　→　ベッドに寝ようとするとき、警報を鳴らす
##### ③　休憩すると、長くなってしまう　→　疲れたよ！と送ると、自動的に癒しの音楽が流れ、その間だけ休憩する

**今回のイメージ動画をご覧ください。**

勉強に集中できる部屋作りに、IoTの力を借りてモノづくりしてみた#protoout pic.twitter.com/wlK667w1Qi

— Nori (@NORI30363592) April 14, 2022

## 課題①　妻が入ってきて、話し込んでじゃうので集中モードの時間を

とかく、この世は住みにくい。対人関係の距離感をobnizで物理的に測り矯正するLINEBotを作成！

## 目的
みなさん、毎日生きづらいですか？ちゃんと懊悩してますか？この世の悩みごとの多くは対人関係から生まれると言いますが、他人との距離感の取り方って難しいですよね。私個人としては他人と距離を置き気味で迷惑をかけることもあるのではと思っているのですが、その自己認識すらずれているかもしれません。悩ましい。

というわけで、友人知人に対して、自分が心地よいと思っている距離感が、果たして客観的に見てどれぐらいなのかをセンサーで図り教えてくれるLINEBotを作ろうと思います。


こちらの42カ国、9000人を対象にしたパーソナルスペースの調査によると、ルーマニアやハンガリーなどは、130センチ以上距離を取り、アルゼンチンやペルーは80センチを下回る超情熱系のインファイターと、国によってもパーソナルスペースにかなり変動がある

SequelizeでbulkCreateを使用してINSERTする際、値を指定していないAUTO_INCREMENTを付与したカラムの値を取得する

## 初めに
SequelizeでbulkCreateメソッドを使用する際に、AUTO_INCREMENTを付与しているカラムを指定せずに挿入した場合に、thenメソッドの引数に挿入したカラムの値がNULLで格納されていた。
検索した際に日本語の情報が少ないと感じたため、AUTO_INCREMENTを付与したカラムの値を取得する方法を記載する。

■ Sequelizeのバージョン
3.30.4
■ MySQLのバージョン
5.7.37
## 解決方法
bulkCreateメソッドに以下の記述を追加することで解決した。

“`js
individualHooks: true
“`

#### 例
“`js
Model.bulkCreate(
[ { coulumn: “test” }, { coulumn: “test” } ],
{ individualHooks: true }
).then((results)=>{
// 引数resultsに挿入されたAUTO_INCREMENTを付与したカラムの値が格納されている
})
“`

## trans

Node.jsでリバースプロキシを書いた

# リバースプロキシとは
インターネットにてリクエストをほかのサーバの代わりに受けて（代理：proxy）他のサーバへ中継してくれるサーバ

# なぜわざわざNode.jsで書くのか
ふつうはNginxを使う。
今回は小規模な自分用サーバのために使うので、ほかの機能で使っているnode.js
にまとめて載せられると便利だと思い書いた。

# コード
https://github.com/wonderhorn/nodegate

ポイント
– [http-proxy](https://github.com/http-party/node-http-proxy)を使う、プロキシもリバースプロキシもこれでできる
– http-proxyのバグでPOSTが通らないのでヘッダをいじる：https://github.com/wonderhorn/nodeg

照度センサーを使って灯りがついている時間を計測し、電気料金がわかるものづくりに挑戦してみた！！

こんばんは。

現在小売業で働いており、新入社員の受け入れの研修をしています。
講義の中で「**店舗で使用しているものはすべて経費が掛かっていると思ってください。**」と
新入社員に伝えましたが、こんなぼんやりしている説明はないなと反省・・・

**なので、経費としてわかりにくいものを**
**分かりやすくするための装置を作ろうと実装してみました。**

（ひとまず照度センサーを使って電気料金がわかるものを作りたくなったので、
まずは家のトイレで使用している電気料金を調べてみることにしました！）

## 作ろうとしたもの
照度センサーを使って電気がついている時間を分単位で計測し、
電気料金がわかるものを作ろうとしました。


↑の画像は電気をつけている状態でNode.jsを実行して、
0.15v以下になった時間を計測してくれるものです。

お手軽構築！docker-compose+Circle CI環境下でのスペルチェック環境

## この記事 is 何

ソースコードをcommit/push（後の本流へmerge）した後に「あっ、これtypoしてる…」という経験はありませんか？
英語が苦手な私はよくあります。VSCodeの拡張機能でスペルチェッカーを入れてますが、それでも見落としがちです…
そのようなときにCIで自動で検出/ブロック出来たらいいですよね！

この記事では、その対策方法について解説しました。

## この記事では解説しないこと
解説している素晴らしい記事はたくさんあるので、既存の記事にお任せしました！

– Docker、Docker-composeの導入方法/解説
– Circle CIとは？
– githubとCircle CIの連携方法
– Visual Studio Codeの導入方法/解説

## 動作環境

– Local環境
– Windows 10
– Docker Desktop 2.2.0.4
– docker-compose 1.25.4
– Visual Studio Code 1.66.1
– Code Spell C

Node.js×TwitterAPIでツイートを連続取得

# search_metadataによる連続取得
TwitterAPIは一度のリクエストで最大100件までしかツイートを取得できません。
例えば`#ゲーム実況`というタグが付いたツイートを収集しようと思っても最新の100件を取得したらそこで次の取得を打ち切ってしまいます。
どうにかならないかということで調べてみたところ以下の記事がヒット。
[Node.jsでTwitter検索から100件を超えるツイートを取得したい](https://qiita.com/ryo-a/items/53fe9eadcf719b817c9a)

詳細はリンクを参照してほしいのですが、以下のようなコードで連続取得が可能になります。
“`
const Twitter = require(‘twitter’);
const client = new Twitter({
consumer_key: “—“,
consumer_secret: “—“,
access_token_key: “—“,
access_token_secret: “—”
});

const

Nginx html うまく表示できない エラー[ Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.]

## きっかけ
1. viteでつくったサイトをwebブラウザで表示させようと思ったらなにも表示されない
1. コンソールを見るとエラー
“`:Chrome コンソール
Failed to load module script:
Expected a JavaScript module script but the server responded
with a MIME type of “application/octet-stream”.
Strict MIME type checking is enforced
for module scripts per HTML spec.
“`

## 改善方法の結論
httpコンテキストに以下を追記
“`conf:nging.conf
http{
+ include /etc/nginx/mime.types;
+ default_type application/octet-stream;

..省略
}
“`

– include /etc/nginx/mime.type

WSL2上でwebpackのホットリロードが効かない

# はじめに

上記の本を参考にTypeScriptの勉強をしていたところ、webpack serveによる自動ビルドがうまく働かず少し悩んだため、解決策を備忘録として残しておきます。

# 状況

webpack serveでサーバーを起動するこ

Node.jsで使えるExcelライブラリ調査

Excelファイルを扱うライブラリが多すぎてどれを使ったらよいかわからないので・・・

# 結論

データの読み込みだけなら __xlsx__
Excelのテンプレートに書き込むなら __ExcelJS__ or __xlsx-populate__
ただし、ExcelJSはかなり多くのバグが放置されているので注意

| | TypeScript | 読み込み | 書き込み | スタイル設定 | スタイル保持 | 画像挿入 | セルコメント |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| xlsx | ○ | ○ | ○ | | | | ○ |
| xlsx-js-style | ○ | ○ | ○ | ○ | | | ○ |
| node-xlsx | ○ | ○ | ○ | | | | |
| ExcelJS | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
| excel4node | | | ○ | ○ | | ○ | ○ |
| officegen | | | ○ | |

BoxにNode.jsからファイルアップロードメモ

[Box](https://www.box.com/ja-jp)のAPIを使ってファイルアップロードを試してみます。

## シンプルなサンプル

https://github.com/box/box-node-sdk

こちらのSDKを使って試してみましたが、割とシンプルに動きました。

ドキュメントを見つつasync/awaitに書き換えてます。

> https://github.com/box/box-node-sdk/blob/main/docs/files.md#upload-a-file

“`js
‘use strict’;

const BoxSDK = require(‘box-node-sdk’);
const fs = require(‘fs’);

// Initialize the SDK with your app credentials
const sdk = new BoxSDK({
clientID: ‘xxxxxxxxxxx’,
clientSecret: ‘xxxxxxxxxxxx’
});
const client = sdk.g