- 1. Node.js+expressで一部ファイルのみあえてキャッシュさせない
- 2. npm install 実行時 脆弱性の警告を受けた
- 3. Scratchに画像を送信する
- 4. Fastify で 静的HTMLファイルのフロントエンドに書かれたロジックを AJAX を用いてバックエンドに移行するプロセス
- 5. node-canavasのビルド時に遭遇したエラー
- 6. 【scaffdog】スキャフォールディングを使用してAPIの雛形を生成する
- 7. 【Lambda】Parameter Storeの値を取得する処理を共通化する
- 8. 【Lambda】Supabaseに接続する
- 9. Docker-ComposeでGodot用のサーバーを立てようとした話(接続編)
- 10. Node.js のパッケージ「Node Web Bluetooth(webbluetooth)」の情報を見てみたり toio との組みわせを試して見る
- 11. glitch.comでgithubからデプロイする【Node.js】
- 12. itaiji-node を作成した
- 13. Mac で noble を使って BLE対応のデバイスをスキャンする+α(2024年5月版)
- 14. 【Playwright 】for .NETで非対応の機能を確認する
- 15. Node.js language-specific guide の備忘録
- 16. gRPCの通信をGo(サーバー)とNode.js(クライアント)で実装してみる。
- 17. やさしいsocket.io
- 18. Discord.js v14 botの作り方【基礎・メンション編】 (2024/現在)
- 19. JavaScriptで空の多次元配列を new Array(n) で作成する
- 20. 問い合わせフォームの内容をシステム入れ替えをしないでAIでいい感じにしてAsanaに投入する
Node.js+expressで一部ファイルのみあえてキャッシュさせない
# やりたかったこと
ブラウザのキャッシュは便利ですが、要件によっては邪魔になってしまうこともあります。
最新のソースファイルが取れないと困る時もあるし、それでバグが起きては元も子もないですからね…
そこで、あえて今回はキャッシュをさせないようにする設定をしてみます。# 実装してみる
今回の環境はタイトル通りNode.js+expressなので、HTTPヘッダをexpressのルーティングで制御すれば出来ます。
自力で設定してもよいのですが、npmにぴったりのモジュールである[nocache](https://www.npmjs.com/package/nocache)があるのでそれを使っちゃいましょう。
使い方はこんな感じ。“`javascript
import express from ‘express’;
import nocache from ‘nocache’;const app = express();
// キャッシュ無効化
app.use(nocache());
“`以上です。迷うことが無いくらいにシンプル!
後は以降の処理でレスポンスを記述してし
npm install 実行時 脆弱性の警告を受けた
# npm install 脆弱性問題による警告が発生
npm install ** Package Name** 実行時下記のエラーが出力されました。“`
# 以下警告文npm WARN using –force Recommended protections disabled.
added 7 packages, removed 26 packages, changed 33 packages, and audited 612 packages in 6s
15 packages are looking for funding
run `npm fund` for details21 vulnerabilities (6 moderate, 14 high, 1 critical)
To address all issues, run:
npm audit fixRun `npm audit` for details.
“`# 解決方法としてはNode JSの最新バージョンをインストールすることで解決!
Node JS の正式ホーム
ht
Scratchに画像を送信する
# はじめに
こんちゃ。Scratchでサーバーからプロジェクトに画像を送信できるようになったのでここに詳細を書きます
本編行きます# 使ったもの
[Node.js](https://nodejs.org/en/)## ライブラリ
[Scratch-api](https://www.npmjs.com/package/scratch-api)
[Jimp](https://www.npmjs.com/package/jimp)## サービス
[YouTube Data API (v3)](https://developers.google.com/youtube/v3?hl=ja)
[Google Apps Script](https://workspace.google.com/intl/ja/products/apps-script/) (以下GAS)# 仕組み
1. Youtubeからサムネイル画像のURLを取ってくる
2. それをいい感じのサイズに加工 (ここでは120×90)
3. それを15×15の画像に分割
4. 画像を送れるように変換
5. 送信する
Fastify で 静的HTMLファイルのフロントエンドに書かれたロジックを AJAX を用いてバックエンドに移行するプロセス
## 1. Fastify、AJAX とは
– FastifyはAPIサーバーの構築に非常に適した高性能なNode.jsフレームワークです
– AJAXとは、Asynchronous JavaScript and XMLの略称で、Web アプリケーションでデータを非同期的に転送する通信手法のことを指します## 2. 内容:
静的HTMLファイルをFastifyを用いてホスティングします。さらにスクリプト内のロジックをAJAXを用いてバックエンドに移行することを実現できたので、その過程・内容についてまとめます。
題材はAtCoderの問題 [ABC053A](https://atcoder.jp/contests/abc053/tasks/abc053_a)を簡易なwebアプリにしたものです。## 3. Fastify のインストール・実行・閲覧
Node.jsがインストールされていることを確認した上で、Fastifyをinstallします。
### インストール
“`
npm install fastify
“`
### 実行
“`
node server.js
“
node-canavasのビルド時に遭遇したエラー
# はじめに
Reactのライブラリである、React-Konvaを使用した際にnode-canvasを利用する必要があり、そのビルド時にいくつかエラーに遭遇したのでそのエラー内容と対処方法をまとめました。
## TL;DR
:::note
対象者:
ARM64アーキテクチャのPCで開発している方
ユースケース:
node-canvasを利用するライブラリを使用するシーン
TODO:
CLI上で以下のコマンドを実行“`bash
brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
“`
:::## node-canvasとは
node-canvasは2Dグラフィックスライブラリである[cairo](https://www.cairographics.org/)を用いてNode.jsに実装されているCanvasです。
## 使用したライブラリ
[canvas@npm v2.11.2](https://www.npmjs.com/package/canvas)
# 問
【scaffdog】スキャフォールディングを使用してAPIの雛形を生成する
新しい API を追加する際、複数のファイルを作成するケースはよくあると思います。
MVC パターンであれば、Model、View、Controller 各レイヤーの実装が必要だったり、また、アーキテクチャによってはそれ以上のレイヤーが存在したり。フレームワークの場合、自動生成機能が搭載されていることもあるかと思いますが、自前でアーキテクチャを組んでいる場合は、開発者による作成・実装が必要になります。
自前アーキテクチャ構成で API を追加する際は、既存 API のソースコードやボイラープレートからの流用、もしくは、開発者独自の実装をするケースが多いでしょうか。
これらのケースにおいては、流用コストや開発者独自の実装をした際の可読性の低下・レビューコストの増加が発生する可能性もあります。今回はこういった問題を避けるべく、Markdown 駆動で API の雛形を生成できるようにしていきます。
# scaffdog とは
Markdown に仕様を定義すると、その仕様に従ってファイルを生成できる Node.js のツールです。
以下は[公式](https://s
【Lambda】Parameter Storeの値を取得する処理を共通化する
## まとめ
処理をmjsファイルに記述してレイヤー登録する
—
例として、supabaseを使用するためのパラメータを登録・取得してみます
lambdaからsupabaseをいじいじする記事は[こちら](https://qiita.com/akitika/items/3ef5aeb279ac5e9fc97d)## 1. ファイルの用意
“`bash
touch getParameters.mjs
“`## 2. 処理をmjsファイルに記述
以下のように記述してみます
“`js:getParameters.mjs
import { SSMClient, GetParameterCommand } from “@aws-sdk/client-ssm”;const client = new SSMClient({ region: “ap-northeast-1” });
export async function getParameter(name) {
const params = {
Name: name,
WithDecrypt
【Lambda】Supabaseに接続する
## まとめ
zip化したnodejsをレイヤーとして使う
## 1. Node.jsランタイムを使用する
当初はpythonを使用するつもりだったのですが、pythonでsupabaseライブラリを使うのが結構面倒だったので、nodeを使用しました
## 2. レイヤーとして使用するnodejsを用意 -> デプロイ
“`bash
# nodejsディレクトリを作成
mkdir nodejs
cd nodejs# supabaseライブラリをインストール
npm init
npm install supabase# zip化
cd ../
zip -r hogehoge.zip nodejs
“`:::note alert
注意1: 作成するディレクトリ名は必ず**nodejs**という名前にすること
注意2: ファイルではなく**nodejsディレクトリ自体をzip化する**こと
:::
zipファイル自体の名前はなんでもOKです
作成したzipをlambdaのレイヤーとしてデプロイしましょうレイヤー登録のわかりやすい手順は[こちら](http
Docker-ComposeでGodot用のサーバーを立てようとした話(接続編)
これの続きでございます
https://qiita.com/typegarnet/items/5025ed18e42ad1d0d587
# Godotの資材をアップロードすれば行けるっしょ?
とりあえずPythonでWebSocketのバックエンドをコーディングをして、GodotのWebSocketPeerとの接続が成功すればあとはHTTPSのHTML置き場にアップロードすればチョチョイのパーっしょ。
そう思っていた時期が私にもありました。# とりあえずバックエンド
#### Python3でWebSocketのサーバーサイドのエコーバックを作る。
ポート番号に深い意味はない。
“`python
# coding: utf-8import asyncio
import websockets
class WebSocketServer:
def __init__(self, host, port):
self.host = host
self.port = portasync def server(self, ws, pa
Node.js のパッケージ「Node Web Bluetooth(webbluetooth)」の情報を見てみたり toio との組みわせを試して見る
以下の記事を書いている際に見かけた Node.js のパッケージ、「Node Web Bluetooth(webbluetooth)」が気になったので、まずは情報を見てみたという話です。
●Mac で noble を使って BLE対応のデバイスをスキャンする+α(2024年5月版) – Qiita
https://qiita.com/youtoy/items/44216ea20c6506d80ed8同じような名称のもので、ブラウザで BLE を扱う Web Bluetooth API がありますが、これと同じ使い方ができる Node.js のパッケージというもののようです。
●thegecko/webbluetooth: Node.js implementation of the Web Bluetooth Specification
https://github.com/thegecko/webbluetooth![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/
glitch.comでgithubからデプロイする【Node.js】
# はじめに
glitch.comというサイトをご存知でしょうか?
https://glitch.com/
静的サイト / Node.js / React / SqLite などのデプロイができるPaaSです。
:::note info
無料プランでも月1000時間のサーバー使用が可能です。めちゃくちゃ多い。
::::::note warn
その代わり、アクティブでない時間が5分続くとサーバーがスリープします。
アクセスがあると、サーバーの立ち上げから実行されます。個人的には気にならない長さ。サービスによっては相性が悪いと思います。
:::# 本題:glitch.comにGithubからインポート
今回は、そんなglitch.comにgithubのプロジェクトをインポートする方法を紹介します。
簡単です!
## 1. glitch.com にアクセスし、ログイン
:::note
Github / Google / Email でアカウント作成が可能です。
:::![スクリーンショット 2024-05-28 20.30.05.png](https://qi
itaiji-node を作成した
## はじめに
タイトルの通り、itaiji-node が必要になったので作成した。
異体字を正体字に変換するためのパッケージ。https://www.npmjs.com/package/itaiji
https://github.com/mziyut/itaiji-node/
## なぜ作成したか
元々 Ruby(Gem) には変換ライブラリが存在する事は認識していたが Node.js/npm パッケージとして存在していなかった。無いなら作るかくらいの気持ちでさっと作りました。
https://github.com/camelmasa/itaiji
ちなみに、 Ruby 以外に Rust/Python/PHP も存在しています。
https://github.com/camelmasa/itaiji-rust
https://github.com/yamamotoj/itaijipy
https://github.com/masanork/ikc
https://github.com/xearts/itaiji-converter
## 使い方
npm
Mac で noble を使って BLE対応のデバイスをスキャンする+α(2024年5月版)
以下の記事の、2024年5月バージョンの内容です。
●Mac で noble を使って BLE対応のデバイスをスキャンする(2021年4月版) – Qiita
https://qiita.com/youtoy/items/d9c8ff3a33985359f39b上記の BLE 絡みの話の一部は、久しぶりにやってみると OS のバージョンアップの影響など、何らかの要因で突然動かなくなるということがあるので、久しぶりに試してみたという話です。
## 試す環境
試す環境は以下の通りで、当時と異なる部分に「★」をつけてみました。– 機器
– MacBook Pro(13-inch, 2020, Four Thunderbolt 3 ports)
– OS
– ★ macOS Sonoma 14.5
– Node.js のバージョン
– ★ v22.1.0
– パッケージ
– [@abandonware/noble ]()## 軽く試してみる
### パッケージのインストール
それでは、パッケージをインストールします。“`zsh
npm i @abandon
【Playwright 】for .NETで非対応の機能を確認する
## あらすじ
Playwright for .NETにて使用方法を確認したが、
Python版・Java版を含め非対応の機能がある。https://qiita.com/noritama08/items/1d6006d2ec33d16038cd
→ Node.jsは、以下に対応している。
・レポート作成機能 https://playwright.dev/docs/intro#html-test-reports
・画像比較 https://playwright.dev/docs/api/class-snapshotassertions
・単体テスト https://playwright.dev/docs/test-componentsチームで主に使っている言語がJavaScript(TypeScript)以外の場合、
言語学習コストをかけてまで上記の機能が必要か。
実際に使用してみる。## 準備
最新版のPlaywright(Node.JS)を導入する。
“`cmd.exe
npm init playwright@latest
“`
この時点で以下のサンプルが生成される
Node.js language-specific guide の備忘録
[Node.js language-specific guide](https://docs.docker.com/language/nodejs/) でハマった・ハマりそうな箇所のメモです。
## 環境
– Windows 10 Home
– Docker Desktop 4.30.0 (149282)
– Docker version 26.1.1, build 4cf5afa
– https://github.com/docker/docker-nodejs-sample ([343b0ae](https://github.com/docker/docker-nodejs-sample/tree/343b0ae7434e74046fa3663ea5b0a7517fc6cc03))## [Containerize a Node.js application](https://docs.docker.com/language/nodejs/containerize/)
### [Initialize Docker assets](https://docs.docker
gRPCの通信をGo(サーバー)とNode.js(クライアント)で実装してみる。
# Go言語を勉強してみる。
JavascriptとかPHPとか自分がよく知っている言語以外で、あたらしいモノに触れてないなと思い、今になってGoogleが開発したというGoに触れてみている。いろいろ調べていく中でおなじくGoogleが開発したというgRPCというのが出てきたので、どんなものか自分でも実装してみる。サーバー/クライアントともGo(あるいはNode.js)という記事はいくつかあったが、違うサービス間で通信してるっぽくなるように、あえて違う言語で試した。
Nodeは元からホストにインストールしていたものの、Goはインストールしてなかったので、ここではDockerコンテナを用意した。
# 全体の構成
Dockerコンテナ側に配置するサーバープログラム。
“`
root/
├─docker-compose.yml
├─Dockerfile
├─.env
└─src/
├─go.mod
└─gRPC/
├─grpc_sample/
├─server.go
└─ex.proto
“`ホスト側に配置
やさしいsocket.io
# `node.js`のモジュールである`socket.io`の使い方
## 1. 概要
**webSocket**
サーバーからプッシュする(双方向)
たまに対応していないブラウザやバージョンがある## 2. 導入
“`sh
npm install socket.io
“`***
## 3. 基本的な記述方法
**Socket通信**
`emit` データの送信
`on` 接続の待ち受け### クライアント側
“`html:client.html
“`#
Discord.js v14 botの作り方【基礎・メンション編】 (2024/現在)
# 準備中…
2024/6月中に公開します!
JavaScriptで空の多次元配列を new Array(n) で作成する
### 結論
“`javascript
const n = 4;
const arr1 = new Array(n).fill(null).map(_ => []);
“`### 理由
fill の中身にオブジェクトを放り込むと、シャローコピーで反映されるため
“`javascript
const n = 4;
const arr1 = new Array(n).fill([]);arr1[0][0] = 1;
// [[1], [1], [1], [1]]
console.log(arr1);
“`これは仕様としてキチンと記載されている
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
“`javascript
// 配列の各スロットから参照される、単一のオブジェクト。
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = “hi”; // [{ hi: “hi
問い合わせフォームの内容をシステム入れ替えをしないでAIでいい感じにしてAsanaに投入する
## なにをしたいか
– 日々来る問い合わせフォームで効率よく処理をしたい
– タスク管理ツールで管理をしたい### できたもの
特定のメールアドレスに文章を投げるといい感じでAIがサマライズしてAsanaにタスクを作ってくれるサービス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4221/d5184ec8-5087-7ffd-365b-fd7d578f4b84.png)### Asanaに作られたタスク例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4221/2dd46da6-3022-c802-06b4-22ecac79ff1c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4221/d6543851-2b7f-f477-8262-4c0f72ad861f.png)