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

VRT用の大量パターンのStory作成をコード生成で自動化した話

[去年のアドカレ記事](https://qiita.com/sakamuuy/items/44a109532f06e0b619e3)もVRTのネタで書いて、今年は違うのにしようと思っていたのですが、またVRTのネタです。よろしくお願いいたします。

## はじめに
現在参画しているプロジェクトにて、下のような課題を持つ画面がありました。

– 1画面内で表示されるレイアウトが9パターン（今後更に増える想定）と、同画面内に入稿されるHTMLで使われるCSSが約40パターン（こちらも今後更に増える想定）存在し、これらの特有の組み合わせのみスタイルの崩れが発生することがある。
– これらを全パターン目視で確認することはかなり大変…

今回の記事はこの課題をVRTを使って解決した話と、その際に苦労した話です。
前半で軽く実装内容を紹介しますが、技術的な話はあまりしません。

また、前提としてVRTは[storycap](https://github.com/reg-viz/storycap)と[reg-cli](https://github.com/reg-viz/reg-cli)を使

Spotify物理リモコンを作ってみた

# はじめに
2022年のIoTLTにて何度かLTさせていただきましたが、アプリやWebのソフトウェアUIではなくコンポのリモコン感覚で物理ボタンをポチポチしてSpotifyをコントロールしたい、という思いからSpotify物理リモコンを作りました。

**[Spotify物理リモコン（ProtoPedia）](https://protopedia.net/prototype/3314)**

Spotify物理リモコンの本運用版はこんな感じです！

ダイソーリモコン
↓
M5ATOM Liteで赤外線受信
↓
M5ATOMとopnizでペアリングしてるラズパイからSpotify Web APIを実行#Spotify #M5ATOM #DAISO #opniz https://t.co/TS0qaA2NM9 pic.twitter.com/SxRocJXAS3

— 田中みそ (@miso_develop) May 28, 2022

# できること
赤外線リモコン（NEC、AEHAフォーマットのものならなんでもOK）でSpotifyを操作できます。操作できることとしては、

* 再生/停止
* 曲送り
* リピート切替
* シャッフル切替
* 音量調節
* 任意のプレイリスト再生
* 再生機器の変更（Google HomeやAmazon Alexa、スマホアプリやWeb UI等）
* 今聴いているプレイリストをもとにラジオ（関連楽曲プレイリスト）生成

といった感じで結構いろいろできて、それらの操作を

Code Engineで Node.jsサーバーを試して OpenTelemetryで Instanaにトレースを送るメモ

# はじめに
この投稿では、 [Code Engine](“https://www.ibm.com/jp-ja/cloud/code-engine”)を使ってアプリケーションの開発・運用する際のモニタリングツールとして、
[OpenTelemetry](“https://opentelemetry.io/”) と APMツールの[Instana](“https://www.ibm.com/jp-ja/products/instana”)でアプリケーションの性能情報(呼び出し数、エラー数、遅延）を可視化する方法を試した時のメモになります。

# OpenTelemetryとは
[OpenTelemetry](“https://opentelemetry.io/”)は、テレメトリデータ(メトリクス、ログ、およびトレース)を計測、生成、収集、そしてエクスポートを行うOSSのオブザーバビリティのフレームワークです。 OpenTelemetryはテレメトリデータを分析する機能がありません。ですので、今回は、Instanaにテレメトリデータを送信して表示・分析することにします。

# 前提作業

今ChatGPTで話題のOpenAiのDALL-E APIを使ってAIでイメージを生成するアプリを作ったら結果が非道かった

## OpenAiのDALL-E APIを使ってアプリを作る
今ChatGPTで話題、イーロンマスクも出資して設立に関わっている[Openai](https://openai.com/)ですが、チャットだけではなく、色々なAPIを公開しています。
イメージで言うと、彼らの作り上げた巨大な電脳の脳味噌に、APIを通じて接続し、色々なデーターを取得できると言うものです。
で、今回Traversy Mediaを見ていると、言葉でこんな画像ちょうだいって言うと、Aiがそれを生成して送り返してくれると言う暗黒アプリが簡単に作れそうだったので、作ってみる事にしました。Node.jsにて、製作時間１時間ほど。で、出来たのがこれ


欲しいイメージを入力するインプットと、画像の枚数を入れるインプットの２箇所だけの超シンプルなUIで

フルスタック機械学習エンジニア(MERN)

MERNとは、MongoDB、Express、React、Node.jsの4つのテクノロジーを組み合わせたフルスタックのWebアプリケーションフレームワークです。MERNスタックは、フロントエンド（React）とバックエンド（Node.js、Express、MongoDB）を提供することで、Webアプリケーションの開発を効率化します。

MongoDBは、ドキュメント指向のNoSQLデータベースです。このデータベースは、非構造化データをスキーマレスで保存し、JSONのような形式でデータを扱うことができます。

Expressは、Webアプリケーションフレームワークです。このフレームワークは、Node.jsで実装され、Webサーバーを構築するための様々な機能を提供します。

Reactは、JavaScriptのライブラリです。Reactを使用することで、Webアプリケーションのユーザーインターフェイス（UI）を構築することができます。

Node.jsは、JavaScriptの実行環境です。Node.jsを使用することで、JavaScriptをサーバーサイドで実行することができます。

[Windows対応]直接ブラウザをインストールしなくてもSafari・Chrome・FireFoxでテストする方法

## はじめに

[Playwright](https://playwright.dev/)というライブラリを使用して、各種ブラウザの起動ができるようになるまでを記載しています。
特に、windowsでsafariが(webkitですが)起動できるようになるのはうれしいです。
Playwright自体はNode.jsのE2Eテストライブラリですが、ブラウザを起動するだけならNode.jsのプロジェクトでなくても大丈夫そうです。

## 前提

サーバーはNuxt3を動かしていますが、適宜ご自身のアプリケーションに置き換えていただければと思います。
WEBアプリケーションでローカルのURLがわかれば大丈夫です。

## インストール方法

https://playwright.dev/docs/intro#installing-playwright
を参考にしながらインストールしていきます。

“`
yarn create playwright
“`
“`
// E2Eテストのディレクトリ。デフォルトのe2eでいいと思います。
Where to put your end-to-en

Cloud Functions+Node.jsを秒速でローカル実行する備忘録

[PONOS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ponos)の12日目の記事です。

昨日は[@sumborn](https://qiita.com/sumborn)さんでした。

# はじめに
Cloud Functionsを開発する場合、当然ローカルで実行させたくなります。その手順は[Googleの公式](https://cloud.google.com/functions/docs/running/overview?hl=ja)に載っています。
しかし、久々にFunctionsを触る時に “どうだったかな？” となることがあるので、今回は最低限の情報だけで秒速でローカル実行できる手順のみ記しておこうと思います。

# プロジェクト準備
1. とりあえず空のフォルダを作る
1. package.jsonを用意する。
なんでもいいですが、npmを使って用意しました。ここではエントリーとなるポイントはindex.jsとしておいてください。
“`console
npm ini

firebase login Firebase CLI v11.16.0 is incompatible with Node.js v16.0.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0

# ［エラー］firebase login( Firebase CLI v11.16.0 is incompatible with Node.js v16.0.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0)

## 環境
MacBook Air (M1, 2020)
nodeバージョン　v16.00

## ぶつかったエラー
“`
Firebase CLI v11.16.0 is incompatible with Node.js v16.0.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0
“`
日本語訳
Firebase CLI v11.16.0 は Node.js v16.0.0 と互換性がありません Node.js をバージョン ^14.18.0 にアップグレードしてください
( Firebase CLIにnode.jsのバージョンを合わせる必要があるようです)

## やったこと
1. エラーメッセージをgoogle翻訳する。
1. ダ

Node.js で小さな Docker イメージを求めて

## 小さなイメージを求めた時の記録

Node.js のイメージを小さくするという記事を読んで、以前、使っていた Dockerfile ではどの程度のサイズだったかを記録しておきたく思った。
読んだ記事と同じアプリケーション（[Node.js Web アプリケーションを Docker 化する | Node.js](https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/)）で。

ポイントは 2 つ。

– ncc を使う。 [vercel/ncc: Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.](https://github.com/vercel/ncc)
– 過去に ncc について書いていた。 [zeit の ncc コマンドで node.js アプリを 1 ファイルにコンパイルしてみたメモ – Qiita](https://qiita.com/high-u/ite

CloudFunctions(Node.js, 第2世代)でDiscordのslashコマンドを実装する

↓のGCP版です。AWS以外の部分は下の記事を参照してください。

https://dev.classmethod.jp/articles/discord-application-commands-aws-lambda-aws-cdk/

なぜかGCP版の記事が日本語にない。

※ URLやTokenが見え隠れしていますが、この記事の編集過程で作ったリソースはすべて削除してから投稿しています。

## discord の app を作る

https://discord.com/developers/applications


## bot を作る

アプリを作った画面から、そのままBotも作っておきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com

DIALというプロトコルについて足を突っ込んでみた

お久しぶりです。1年に1回 Qiita へ投稿する @Momijinn です。
この記事では DIAL というプロトコルについて軽く触れてみたという記事になります。

## DIAL とは

DIAL (DIscovery And Launch) とは、セカンドスクリーン端末(主にスマートフォン)が、ファーストスクリーン端末（主にテレビ）にインストールしているアプリを検出して、簡単にアプリを起動するためのプロトコルです。
※ あくまで DIAL はファーストスクリーン端末にインストールしてあるアプリを簡単に起動や終了をするのみ（ここ大事）。

### 分かりづらいので例を挙げて説明

スマートフォンにて動画再生アプリで再生している動画を、TVで再生したいとします。
このとき、DIALなしの場合だと以下の手順を踏むことになると思います。

“`
1. TVリモコンでTVにインストールしている動画再生アプリを立ち上げる。
2. TVで動画再生アプリをが立ち上がる。
3. TVの動画再生アプリと、スマートフォンの動画再生アプリをペアリング（PINコード等）する
4. ペアリングできたら、ス

AWS Lambdaでnode_modulesを使う時のメモ

AWS LambdaでNode.jsを使っていた時にnode_modulesにあるライブラリを使おうとした時にちょっと詰まったので、備忘録として残そうと思います。

あとは、アドベントカレンダーに沿ってアウトプットの大切さを書きます。

# node_modulesの導入

## 前提条件
– npm コマンドが使える環境があること
– ローカルマシンでも問題ありません

## 簡単な流れ
1. ディレクトリの用意
1. 必要なライブラリをインストール
1. ディレクトリのzip化
1. レイヤー登録
1. Lambda関数でレイヤー追加
1. Lambda関数のコードでライブラリを読み込む

## ディレクトリの用意
初っ端から一番大事です。作成する場所はどこでも良い（ローカルマシンでも可）ですが、ディレクトリの名前が重要です。
「nodejs」という名前のディレクトリを生成します。

“`
$ mkdir nodejs
“`

これについては[ドキュメント](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/conf

Node.jsでAzure Key Vaultに格納されたシークレットを取得してみる(超簡単)

# はじめに
従来のソフトウェア開発において、本番環境でのパスワードや暗号鍵、デジタル証明書、APIキーなどといったシークレットは環境変数に保管してアプリケーションからアクセスします。しかしクラウドサービスを利用したモダンなソフトウェア開発においては、アプリケーションは様々な実行環境に分散していて、それぞれ個別に設定ファイルを用意し、環境変数を設定する必要があります。Azure Key Vaultを利用すると、そのようなシークレットをクラウド上で一元管理することができ、それらの情報に対するアクセスをAzure ADによる認証で保護することができます。今回の記事では、Node.jsを用いて、Azure Key Vault上に保存されているシークレットにアクセスする方法をまとめていきたいと思います。

# Azure Key Vault リソースを作成する

Azure Key Vault リソースをAzure CLI を使用して作成していきます。

Azure Portal を使用したAzure Key Vault リソースの作成方法は以下の公式の記事を参考にしてください。

https

PipedreamとAirtableで緩く作るQRコード受付（の基盤サイド）

前回[「Pipedreamの紹介」と「ワークフローの作成例」](https://qiita.com/attakei/items/1455e56634db57e479b9)を書きました。
今回は、これを使って社内向けに作ったちょっとしたサービスの話をします。

## 何を作ったの？

社内のオフライン交流会向けに「QRコードによる受付」を作ってみました。
大まかには次のコンポーネントに分かれるのですが、今回話題の対象となるのは1.と2.です。

1. **Airtable上での、出席者・出席記録管理**
1. **Pipereamを使った、出席者用QRコード表示画面**
1. QRコード表示画面を案内するための、メール送信用ツール
1. QRコードをかざして出席記録を取るための、受付アプリ


## Airtableって何？

ま

日報作業でちょっと楽するCUIツールの作り方

# はじめに
アドカレに乗っかって初Qiitaを書きます。
私の所属先ではSlackに勤怠チャンネルがあり、業務終了時にその日の業務内容について投稿するようにしています。（ミニ日報みたいな感じです。）
投稿する内容はこんな感じです。
“`
【勤務時間】10:00 ~ 19:00
【稼働時間の合計】8時間00分（休憩：1時間00分）
【本日の作業】○○○_初回リリース, △△△_コンテンツ追加
【明日の作業】△△△_コンテンツ追加, □□□_リファクタリング
【共有・相談事項】
“`
特に大変というわけではないのですが、毎日「よし！業務終了だ！」と思ってから、このミニ日報を書くのは少し面倒でした。
そこで、その少し面倒くさい作業で楽するためにCUI上で簡単に日報を書いて投稿できるツールを作成したので、今回はそのツールの作成に使った技術について共有します。（以降作成したツールを退勤ツールと呼びます。）

面倒くさい作業で楽するために退勤ツールで実装したいと思ったことは以下の4つです。
1\. 時間を記入するときに対話型で入力する
2\. 作業内容はチケット管理ツールからデータを取得して

CSSのLiveReloadする！開発環境でのCSSのビルドをViteに任せてバックエンドとViteの開発サーバーを連携させる

この記事は「[はてなエンジニア Advent Calendar 2022](https://qiita.com/advent-calendar/2022/hatena)」の10日目の記事です。9日目は[@dekokun](https://qiita.com/dekokun)さんの「[みんなで会議をよくしていこう！と思ってやってるTips](https://dekotech.dekokun.info/entry/2022/12/09/143600)」でした。

—-

# はじめに

Webページはさまざまなファイルから成り立っており、それぞれのファイルはソースファイルをビルドすることで作られています。従って、ソースファイルの更新をブラウザから確認するためには、単純に考えればソースファイルをビルドしてファイルを配置してからWebページをブラウザから更新する必要があるように思えます。しかし、開発中これらの作業を都度するのは大変なので、開発サーバーを立ち上げてビルドの工程を自動化します。すなわち、ソースファイルの更新に応じてブラウザのリロードなしにWebページの表示にその変更を反映させる

Node.js(Express)でミドルウェアを簡単に実装してみる(ローカルサーバー立ち上げまで)

## 前提
この記事ではExpressで必要となるミドルウェアの実装を行う。そのため簡単に記事を読むことでミドルウェアの概要に触れることで、流れなどをインプットしたい人に向けて発信します。:fire:

## 大まかな流れ
Node.jsの紹介
↓
ミドルウェアについて
↓
実装:Node.jsのプロジェクトの作り方とローカルサーバー立ち上げ(この記事はここまで)
↓
調べてみた(モジュールの形式よって読み込み方の違いについて)

## ゴール
Node.jsにおけるミドルウェアの理解を深め、ミドルウェアとはどのようなことを示すのかまで落とし込み、ここをゴールとする。(この記事はローカルサーバーの立ち上げまでとする。)

## Node.jsとは
>Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 以下の「Hello World」の例では、たくさんの接続を同時に処理することができます。 各接続ごとにコールバックは発火され、何もすることがない場合、Node.js はスリープします。

こち

プログラミングを始めてみたい方へ

こんにちは、Ftpsです。
最近身近な人とかにプログラミングを教える機会があったりしたので、なんとなく書き綴ってみます。
一応いくつかのプログラミングの大会で優勝させてもらっています(実名でるので何かは言えない)

…高校生のくせにみたいな文章があるかもしれませんが、ご了承ください
()中は心の声です(え？)

:::note warn
警告
途中で雑になっているので、また書き直すかもです…
:::

# 大事なこと

まず最初に自分がプログラミングで何をしたいかできるだけ具体的に考えてみてください！
* Discordの入退出管理botを作ってみたい→(Python, Javascript…)
* タイマーを作ってみたい→(C#-WPF)
* ArduinoとかSpresenseとかを使ってミュージックプレイヤーを作ってみたい→Arduino言語(C/C++)

何か思いつきましたか？
それによって学ぶ言語が変わってきます

# 具体的に何するか

どの言語を学ぼうか決めて、やることは大きく分けて3つだと思います

* 言語の構文を学ぶ
* 標準ライブラリをある程度マスタ

【Node.js】数字をID（可逆部＋チェックサム）に変換して、APIのIFに使えるIDを生成する

## はじめに

開発をしていると何らかの数字を利用しているが、フロントエンドではその数字をそのまま露出させたくない場面はままある。具体的には[primary keyをオートインクリメントしている場合に、そのidを外に露出させない実装をしてみた？！](https://qiita.com/yuta-katayama-23/items/51f6a560cca755e08509)で見たような、オートインクリメントしている数字を露出させたくないが、APIではそれを何らかの形で可逆のIDに変換し、それをキーにしたIFを設計したい、というような場面。

今回はそんな時に使えそうな実装をやってみたので、備忘録を残す。

ソースコード全体は以下（テストも含めて）。

https://github.com/yuta-katayama-23/node-express/commit/1b678b47b2a7165e645c0ee618100322dc4b6192

※上記のコードのconfigに`destinationAlphabet`や`separetors`などセキュアな情報が載っているが、本来的にはこ

Node.jsでミニブログを作りました

こんにちはりちゃ丸です
この前はブラックジャックを作りましたが
今回はしっかり使えそうな物を作りました
ミニブログをつくりました

メイン画面です

クリックすると
詳細画面に行けます

次にjavascriptです
“`app.js
‘use strict’
const fs = require(‘fs’);
var http = require(‘http’)
const ejs = require(‘ejs’);
const url = require(‘url’);
v