- 1. Volta のインストールと使い方
- 2. nuxt.jsとlaravel8とmysqlで認証機能付きSPAを作る（nuxt編）
- 3. Web開発ど素人がNode.jsで多言語Webニュースアプリ作ってみた
- 4. node.jsでpresigned_urlを使用して画像データをs3に保存、表示する方法
- 5. 2段階でちょっと面倒！ボットからユーザにダイレクトメッセージを送る方法（Slack API編）
- 6. NestJSでアプリを構築する際に気をつけたいこと
- 7. Express の CORS 対応
- 8. Node.jsと JavaScriptの違いについて
- 9. Puppeteerをnode.jsで動かし、Webページにjsの処理を加えたスクリーンショットを自動で連続撮影する
- 10. DIについて考えてみた(クリーンアーキテクチャ×TypeScript)
- 11. Beebotte で外向きの HTTPリクエスト（Webhook）が扱える BeeRule（BeeRules Engine）を使う
- 12. Puppeteer で button を click しても効かないときに試したこと
- 13. Beebotte の REST API と MQTT の組み合わせを公式情報を見つつ試す（curl と Node.js）【2022年4月版】
- 14. モジュールバンドラーってなに？
- 15. Firebase Authenticationを使ってAPI Gatewayに認証機能を付与する
- 16. MQTTブローカーとしても使える Beebotte で MQTT.js を使った Pub/Sub（Node.js で実装）【2022年4月版】
- 17. CDK 2.20.0 と 2.19.0 はぶっ壊れてるので 2.18.0 を使おう
- 18. 夜集中して、寝ないで頑張れる環境をつくり、疲れたらLINEで癒しの曲を！
- 19. とかく、この世は住みにくい。対人関係の距離感をobnizで物理的に測り矯正するLINEBotを作成！
- 20. SequelizeでbulkCreateを使用してINSERTする際、値を指定していないAUTO_INCREMENTを付与したカラムの値を取得する
Volta のインストールと使い方
数年前から anyenv と nodenv で node のバージョン管理を行なっていたのですが、結局 node しか使いませんでした。
この度、別環境を構築したのを機に、他の node バージョン管理ツールを使うことにしました。いろいろ比べたのですが、volta が一番オシャレ（名前がオシャレ、公式サイトがオシャレ、使っている人がオシャレ：2022年4月時点での私感）だったので volta を採用しました。
※以前 Node や Node のバージョン管理ツールを使っていた人は Volta をインストールする前に削除しておいてください。
“` shell
# 環境
# MacOS : Monterey 12.3.1
# SHELL : zsh
# Homebrew : 3.4.5
“`# インストール
## Homebrew から volta をインストールする
Homebrew からでなくともインストールできますが、Homebrew からのインストールした方がオシャレ度 UP ✨ です。
### 1. インストールと確認
“`Shell
brew install
nuxt.jsとlaravel8とmysqlで認証機能付きSPAを作る（nuxt編）
# 前提
フロントをnuxt.js、API側をlaravel8、DBにmysqlを使って認証機能付きSPAの環境構築をしていきます。私の環境は下記の通りです。
OS: windows10
node.js: 14.17.6
php: 8.0.13
laravel: 8.83.8
nuxt: ^2.15.7
mysql: 8.0.13※尚、本記事は下記記事の続きとなっております。
https://qiita.com/ryuki1126/items/b52b879912f1466c1ef0
# nuxt.jsの構築
前回作成した`sample-app`ディレクトリ配下に新しくnuxtプロジェクトを作成する“`shell
$ npx create-nuxt-app sample-web// 質問は適当に答えました…
✨ Generating Nuxt.js project in sample-web
? Project name: sample-web
? Programming language: JavaScript
? Package manager: Ya
Web開発ど素人がNode.jsで多言語Webニュースアプリ作ってみた
# 目的
筆者自身はトリリンガル（自称）のため、簡単に日本語、英語、中国語などの複数の言語のホットニュースを読めるサービスがほしいです。「Google Newsで良くない？」って言われそうなところですが、Google Newsはじゃっかん使いづらいと感じました。
例えば、
– 言語を切り替えるのに「言語地域→候補から選ぶ→更新」3回クリックする必要がある
– 本当にヘッドライトしか閲覧したくないのに、「おすすめ」や「ピックアップ」などがうるさい
– モバイルのweb版が見づらい・アプリをダウンロードしたくない
– 芸能ニュースにまったく興味がないため、ニュースの表示をカスタマイズしたいまた、やってみないと（何かを残さないと）学んだ技術はすぐ忘れるのはもったいないのも考えて、多言語ニュースWebアプリを自作するという発想に至りました。
## 使った技術
– バックエンド
– NodeJS
– Express
– フ
node.jsでpresigned_urlを使用して画像データをs3に保存、表示する方法
この記事ではpresigned URLを使用してs3に画像を保存、表示する方法を学んでいきます。
### Presigned Urlとは？
presigned URLは、特定のS3オブジェクトへの一時的なアクセスを許可するために,
ユーザーに提供することができるURLです。URLを使用して、ユーザーはオブジェクトをREADするか、オブジェクトをWRITEする（または既存のオブジェクトを更新する）ことができます。### 環境,事前準備
– “aws-sdk”: “^2.1116.0”
– バックエンド(express（Node.js)), フロント（vue, react, angluar, Svelte etc)
– awsのアクセスキー （IAMでs3の操作権限を持つユーザーを作成し、アクセスキーを取得してください）
– s3にbucketを作成### Presigned Urlを作成するAPI
“`
const AWS = require(“aws-sdk”);
const uuid = require(“uuid/v4”);const s3 = new
2段階でちょっと面倒！ボットからユーザにダイレクトメッセージを送る方法（Slack API編）
React、node.js、Google Cloud Platform (App Enigine)で[SORTFUL](https://sinceretech.app/ “SORTFUL”)というチームビルディングゲームを作る際に出てきた疑問を、備忘録として記事にまとめています。
はじめに
SORTFULは参加者それぞれにダイレクトメッセージで「数字」を送るところから始まります。
この「メールアドレス情報から、ダイレクトメッセージを送る」というのが、今回の目的です。
Webexとslackを使いたいので、以下のような感じになります。Webex
例えば、Expressの脆弱性が発見された場合、サーバに対して攻撃を受ける可能性があります。
そこで、サーバ情報を隠す方法があります。—
### main.tsにimport文を１行追記します。
“`js:main.ts
import { NestExpressApplication } from ‘@nestjs/platform-express’; // 追記
“`### NestFactory.createを修正して、更にコードを１行追記します。
“`js:main.ts
// const app = await
Express の CORS 対応
こちらで作成したサーバーを CORS に対応させます。
必要なライブラリーのインストール
“`bash
sudo npm install -g cors
“`フォルダー構造
“`text
$ tree
.
├── app.js
└── routes
└── index.js
“`app.js のみ書き換えます。
“`js:app.js
//————————————————————————-
// app.js
//
// Apr/17/2022
//————————————————————————-
‘use strict’const express = require(‘express’)
const routes = require(‘./routes’)
const bodyParser = require(“body-parser”)
cons
Node.jsと JavaScriptの違いについて
今さらながらNodeについての知識を整理する
## Node.jsとJavaScriptの違い
・JavaScriptはフロントエンド、Node.jsは主にサーバーサイドで利用される(Nodeはフロントで使われることもある)
・JavaScriptはブラウザ側で実行され、Node.jsはサーバー側で実行される
## Noe.jsとは
大量の同時接続をさばけるネットワークアプリケーションの構築を目的に設計されたJavaScript実行環境。
JavaScriptでWebアプリケーション（Webサーバ）が作れるという特徴からNode.jsは「サーバサイドのJavaScript実行環境である」としばしばいわれている。近年ではBabelやwebpackなどを用いた「ブラウザで実行するJavaScript」を開発するための環境にもNode.jsが使われている。### なんでNode.jsが使われているのか
1. 新しい仕様のJavaScriptまたはTypeScriptでクライアントサイドのプログラムを書きたい。
2. Webアプリケーションを作りたい。
3. モバイル/デスクトップ用のア
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
