Node.js関連のことを調べてみた2021年10月21日

`gcloud run deploy` で `Failed to start and then listen on the port defined by the PORT environment variable.` エラー

AWS をちょこっと触っていた人間による CloudRun への初めての deploy 作業。

image ( 呼び方あってるかわからない ) をビルドして、`gcloud run deploy` を実行。
以下のエラーが発生。

> Cloud Run error: Container failed to start. Failed to start and then listen on the port defined by the PORT environment variable.

以下の質問・回答がドンピシャでした。

https://stackoverflow.com/questions/55662222/container-failed-to-start-failed-to-start-and-then-listen-on-the-port-defined-b

環境変数で定義されたポートを用いないといけないようです。

“`Dockerfile:Dockerfile
# (略)

ENV PORT 4000
EXPOSE 4000

# (略)
“`

node

C#とNode.jsを連携する その２

####C#とNode.jsを連携する

#####コンソールアプリを利用する

EdgeJSはC#のソースを文字列にしそれをコンパイルしています。ソースだろうがファイルだろうがDllだろうがC#を一旦文字列化し、再度ビルドします。
Nugetを読んでたり、外部DLLを参照していたり、Puhblishで書き出したものをすべて読み込んだりすると、Dllが足りなかったり、バージョン違いのedgeJSを上書きしてしまったりで、いろいろうまく動作しないことが多いです。
プログラムが複雑になると開発が難しくなる懸念があります。
そこでC#のコンソールアプリを別個に作り、外部プロセスでコンソールアプリを実行し引数でjsonを投げ、結果をJsonで標準出力しNodeJs側で取得するというのが開発効率がよいと考えました。

####サンプルファイル

一式をGitに上げました

https://github.com/iotagtk1/nodeJsEdgeJSApp

####Node.jsから実行されるC＃

“`
process.env.EDGE_USE_CORECLR = 1;
process.

受信メールの検証、MailTrap

# 概要
以前、投稿した記事[「CodeceptJSで受信メールの検証、MailSlurp vs gmail　お薦めはMailSlurp」](https://qiita.com/KazuhiroYoshino/items/d55e570f3b9fb0fd24bc)に利用できるメールサーバを1つ追加という話。
まず簡単に、前回紹介したものも含めて比較してみます。

|メール受信|必要なインストール|受信手段|利用するメールサーバ|特記事項|
|:—|:—|:—|:—|:—|
|MailTrap|特になし|APIを参考に自作したLastMail受信メソッド|MailTrap|1つのinboxに50通まで。その後は古いメールから削除される。無料だと500通/月まで|
|MailSlurp|MailSlurp-client|メールがこちらに送信された後のLastMailメソッド|MailSlurp|利用頻度によっては有料プランが必要。無料だと100通/月まで|
|gmail|inboxおよびmailParserおよびiconv|メール待受け中の着信に反応|gmail|IMA

多分絶対誰も必要ないけど、node環境からapollo clientを使ってfileをアップロードする方法

# 問題

– apollo clientを使っている
– apollo-upload-clientを使っている
– node環境から使っている（nextjsのapi routesとか）

この場合、clientと同じようなコードを書いてもアップロードが機能しない。

# 解決方法

node環境では

– Fileがない
– Blobがない
– FormDataがない
– fetchがない（[nextjsならpolyfillしてる][1]けど）

なので、apollo-upload-clientのcreateUploadLinkを使う際にこれらのnode版を指定してやる。

そしてFile、Blobがないのでfsでファイルをstreamとして読み込み、それをアップロード対象のオブジェクトとするが、デフォルトではFileかBlobしか対象になっていないので、ReadStreamが対象になるように`isExtractableFile`で設定し直す。

“`tsx
import FormData from “form-data” // yarn add form-data
import

docker-composeでNuxt.js環境構築

Nuxt.jsはローカルにNode.jsを入れてあげれば動かすことができますが、
ローカルをできるだけ汚したくないので、***docker-compose***で動かします。

## 構成
– Vue.js v2.6.14
– Nuxtjs v2.15.7
– コンポーネント設計
– compositionApi
– Nuxt.js用のプラグイン(@nuxtjs/composition-api)を使用
– TypeScript
– Vuetify(UIフレームワーク)

## 環境構築手順
### コンテナでNode.jsのバージョン確認まで
– nodeのイメージを使用する
– 作成したnodeのイメージに、yarnを用いて使用するモジュールをインストールしていく

“`Dockerfile
FROM node:lts

EXPOSE 3000
ENV HOST 0.0.0.0

RUN apt-get update && \
apt-get upgrade -y && \
yarn global add @vue/cli && \
yarn

【個人開発】新旧漢字コンバートAPIを作成しました。

# 概要
* 旧漢字もしくは旧漢字がある漢字を受け取り、文字列を置換して返すAPI

例) 蛍柄の螢光灯

|No| 説明 | 返値 |
|:——————:|——————-|——————-|
|1|新漢字→旧漢字|螢柄の螢光灯|
|2|旧漢字→新漢字|蛍柄の蛍光灯|
|3|旧漢字が含まれるか|true|
|4|旧漢字存在する新漢字が含まれるか|true|
|5|存在した旧漢字数|1|

# きっかけ
業務上で旧漢字と新漢字を変換するプログラム開発があり、
API経由でコンバートしてくれる仕組みがあれば便利だと思い開発に至った。
※その時は一から実装しましたが、自分と同じ考えの人も少なからずいると思ったので…

またAPIを作成しても**周知しなければ使用してもらえない**と思い、初めてQiitaに投稿することにした。

# 環境
|環境 | 名前 | バージョン
|——————|——————-|———–

世界の偉人たちが残した名言と戯れる

##知らないことは恥ではない。知っているふりや「まあいいや」と知ろうとしないことが恥なのだ。（ホリエモン）
今の私に刺さる:cupid:名言です。堀江さん良いこと言いますね。
落ち込んだとき、人生の迷ったとき、暇なとき、偉人たちの名言を調べたりしますよね。

というわけで、人生を導いてくれる名言BOTを作成しました。

##LINE Bot 実演
名言を含む言葉を投げかけることでランダムで名言を返してくれます。
収録数はおよそ3000！
名言だけでは何なので、偉人たちの画像とプロフィールもつけています。
この名言が生まれた時の歴史的な背景に思いを馳せてはいかがでしょうか。

名言BOTできたよー#protoout#LINEBot #名言 pic.twitter.com/phuBiou91K

— tishiyama (@tishiyamaa) October 19, 2021

・・・動画が暗い＆地味すぎる。なぜ白黒写真の偉人を引いてしまうのか。

せっかくなのでお気に入りがみつかるまでリスエストし続けてみた結果、
イチロー（SSR）ゲット
レアリティは自分の心が決める。
![ichi_ssr.jpg](https://qiita-image-store.s3.ap-n

Ｎuxt ＋Firebase のメモ

# 内容

Nuxt + firebase で web アプリを作る方法についての内部向けメモです。基本、下記あたりの記事を見てそのままやっただけです。

– [Nuxt 公式](https://nuxtjs.org/ja/docs/get-started/installation)
– [Nuxt/Firebase 公式](https://firebase.nuxtjs.org/)
– [Nuxt.jsでfirebaseを使う方法](https://devsakaso.com/nuxt-firebase-installation/)
– [Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン](https://qiita.com/ririli/items/d0d3a6ae78c1b6e827fc)

# 手順

## 準備

Ubuntu 20.04LTS でやります。

“`
$ npm -v
6.14.15
$ node -v
v14.18.1
$ yarn -v
1.22.11
$ firebase —

メモ：node.js＋Postgres＋Basic認証の例

[前](https://qiita.com/DiveMasakazu/items/cecd5987023f7292665f)

前はテスト用に何も考えないRestサーバを立ててみたが、
認証とDBトランザクションを一応考えてもう少しまともなものにしておく。

## Postgresのプール
[ここ](https://qiita.com/sa9ra4ma/items/cea1abecf3434cbbc08c)を参考にpool.jsを作成してみた

“`node.js:pool.js
const { Pool } = require(“pg”);

const pool = new Pool({
user: ‘postgres’,
host: ‘localhost’,
database: ‘postgres’,
password: ‘password’,
port: 5432,
max: 2
});

pool.tx = async (cb) => {
const connection = await pool.connect()

メモ：node.jsでPostgreから簡単なデータをJSONで返す

手元で簡単にPostgres+Node.jsでRestAPI的なテストをしたい
という事もあるので自分用のメモ。
DB設計は別でやって、select文を発行してデータを受けたい。ORマッパー等は使わない。
（ORマッピングが嫌い、というのもある。SQLと実行計画は意識するべきだろ派）

環境はWindows
Node.jsとPostgresのインストールは省略。

## express

パッケージ管理のnpmを使う前にプロキシ設定が必要な場合は行う

“`
call npm -g config set proxy http://xxx:8080
call npm -g config set https-proxy http://xxx:8080
“`

プロジェクト用のディレクトリを作成し移動。
npm install express
でexpressをインストール。(新しいnpmではsaveオプション不要、らしい）

とりあえずexpressの動作見るだけならこんな感じ

“`
const express = require(‘express’);
const app = e

EdgeJsをC#側のソースコードからデバッグする

###EdgeJsをC#側のソースコードからデバッグする

####EdgeJs処理の流れ

| 場所　| 処理 | 処理2
|:———–|:————|:————|
| JS側 |require(‘edge-js’); を呼ぶ |edge-jsがC#側のbootstrapを呼ぶ|
| C#側 |bootstrapが呼ばれる ||
| C#側 |bootstrapが参照しているEdgeCompiler.Dllがbootstrap内にないなら | Edge.js.CSharp.csprojを呼びbootstrap内にEdgeCompiler.Dllがを生成する|
| C#側 |bootstrapが参照しているEdgeCompiler.Dllがbootstrap内にあるなら | bootstrap内のEdgeCompiler.Dllが参照される|

###node_modulesに入っているC#のプロジェクトをRiderに追加する

| プロジェクト名

dynamoDBのupdate時、配列やオブジェクトの値に対して条件をつけて書き込み(ConditionExpression)したい

dynamoDBの条件付き書き込みで、オブジェクト内の特定要素に対して制約を付ける方法をメモする

#dynamoDBのConditionExpressionについて

dynamoDBのあるレコードを更新する場合に下記のように条件をつけることができる

– レコードに特定キーが存在する場合のみput
– レコードの特定キー値がある値の場合のみput

例：productTable

“`js
{
name:”apple”, // hash key
price: 300,
isBought: false
}
“`

実行コード(lambda)

“`js

const AWS = require(‘aws-sdk’);
const dynamoDB = new AWS.DynamoDB.DocumentClient();

exports.handler = async(event, context) => {
const params = {
TableName: “productTable”,
Key:{

あなたの知らないディズニーキャラクターの世界

#君の名は
※今回、投稿主の重度のヲタクぶりによりDヲタ[^1]用語が頻出しています。注釈をつけていますのでご活用ください。

突然ですが、投稿主はこう見えて大のディズニー好きでございます。
アイコンも実はミニーちゃんカチューシャです。
現在のようにチケット入手が困難になる以前は月に1回はパーク[^2]に行っていました。
（ディズニー好きにしては少ない方です。）
そんなディズニー大好きな私ですが、パークでフリグリ[^3]に遭遇したとき
「あれ？あのキャラクターなんていう名前だっけ……？」となるときがあります。
パークを訪れているとき以外でも、イラストで見たとき、金曜ロードショーに登場したとき、などなど……。
なぜか思い出せないのです。こんなにディズニー愛に溢れているというのに……！

突然やってくる「あれ？なんだっけ？」のために、普段からディズニーキャラクターについて学んでおく必要があるのです。
そしていつの日か「なんでそんな脇役キャラクターの名前まで知ってるの？！」
と驚いてもらえるように、あなたも一日一回ディズニーキャラクターを覚え

LINE Botでお菓子好きによる お菓子好きのためのガチャを作成してみた

#お菓子好きですか？
私はお菓子が好きです。
クッキー、チョコレート、ケーキ、お団子・・・あぁ幸せ:two_hearts:
世の中には、期間限定や地域限定など様々なお菓子があり、普段の生活ではお目にかかるのが難しいお菓子もあり、お菓子ラバーとしては残念な状態:disappointed_relieved:
まだ見ぬお菓子に出会うため、無課金で遊べるお菓子ガチャを作成して妄想でのお菓子ライフを充実させましょう！

#お菓子ガチャ（LINE Bot）
LINE Botでお菓子の種類（チョコとか）を入力すると、ランダムで返答してくれるBotを作成しました。

お菓子好きには堪らないガチャが出来た#protoout pic.twitter.com/bcb

疑似彼氏、作りました。

# 彼氏を作ろう
何かと疲れている現代人。私もまたそのひとりである。
ちょっとしたときめきと癒しが欲しい。仕事帰りに誰かに「今日も一日頑張ったね」と優しく言われたい。私のどうでもいい話に「うんうん」と相槌を打ってくれるだけでいい。
そうだ、**LINE Botで彼氏を作ろう。**

# どんな彼氏？
**優しい言葉をかけてくれる**のは大前提で、**今日の天気**も教えてほしい。（よく傘を忘れてびしょ濡れになるので）
ついでに天気によって会話パターンもあるとよい。
ということで、やりたいことは以下の2点。

* 天気予報（天気によって返事のパターンあり）
* ある程度キャッチボールのある会話

# 環境
Visual Studio Code 1.61.0
Node.js 7.24.0
ngrok

# 彼氏、できました
実際に作って動かしてみたものがこちら。

ちゃんとそれっぽく会話をしている pic.twitter.com/d6PJeR85xm

— 7mst (@nnmshita) October 19, 2021

はじめまして、彼氏の**「タケシ(仮)」**（LINE Bot名）。
「タケシはきっとラーメン好き」という無駄な設

ジブリAPIでLINEBotを作ってみた

#ジブリ作品は好きですか？
最近、自分が好きだったアニメが〇〇周年を迎えた的なニュースをよく目にします:thinking:
あの頃のアニメは名作ばっかだなぁなんておっさんじみたことを思うわけですが、コアなものを話題に出すと「ナニソレ」って言われたりして、ちょっと寂しかったりするものです。

でも、**ジブリ作品のタイトルであれば、みなさんもいくつかご存じではないでしょうか。**
スタジオジブリは日本が誇るアニメ制作会社のひとつ。そこに異論はないかと思います。
**今回、ジブリAPIなるものを見つけたので、それを使ってLINEBotを作ってみました。**

[Studio Ghibli API (v1.0.1)](https://ghibliapi.herokuapp.com/)

なお、僕はジブリヲタではなく雑食系のアニヲタです。あしからず:raised_hand:

#用途
　
・ジブリヲタへ　　　　　監督・年代クイズなんかに使ってやってください。
　　　　　　　　　　　　画像を用いた

[Vue]d3.jsを用いてTSVデータをVue3で描画するまでの方法

– フロントエンド開発においてAPIではjson、コンテンツではmarkdownをfetchして加工したり描画することが多い。
– Vue2利用の際も当てはまるが、最近Nuxt3のBetaが発表されたことも相まって、そこで導入されているVue3やViteの注目率や利用率が日に日に上昇。
– そこで今回はデータ形式としてよく使うTSVのVue3での描画処理を記録していく。

## 環境
– Mac OS 11.2.3
– Node.js v14.16.0
– Vue 3.2.16

## 前提
– 利用するサンプルプロジェクトとして以下を満たしていることとする。
– Vue3の利用
– Vite2の利用
– 以下で上記を満たすサンプルを用意することが可能。

“`bash
npm init vite@latest sample — –template vue
“`

## 手順

### TSVデータの用意
– 描画対象のTSVデータとして以下を用意して任意のディレクトリに入れておく。

“`text:data/members.tsv
id name score
1 t