Node.js関連のことを調べてみた2020年05月06日

Puppteerでキャプチャ画像を取得 part2

## 概要
エンジニアもどき2年目に入りました。色々あって以下を行うLambda関数を作成することになりました。
色々学びがあったので備忘録がわり兼アウトプットのために書くことにしました。

1. 特定のページのキャプチャ取得
2. 取得したキャプチャをS3に保存
3. S3に保存したURLをDyanmoに記録

part2では`2. 取得したキャプチャをS3に保存`の実装とデプロイまで行います。
part2での実装内容は[こちら](https://github.com/syu-y/puppeteer-capture/tree/part2)

## 前提

[前回(part1)](https://qiita.com/yimi_getu/items/4c0dca38f8f55e8e6d3d)の続きです。part1に引き続き以下の準備は完了している前提です。
前回(part1)の実装内容は[こちら](https://github.com/syu-y/puppeteer-capture/tree/part1)

– nodejs
– ServerlessFramework
– yarn
–

家庭内フードロスを減らそう。LINEbotを使ったレシピの提案

夏が近づき暖かくなってきました。
食品も傷みやすい季節になってきましたね！
また、在宅ワークも進み家でのお昼ご飯などのレシピにも困っているのではないでしょうか？

ということで、今回は家庭内でのフードロスが減るよう、余っている食材をメッセージするとレシピのリンクを返してくれるボットを作って見ました。

１　材料に関連したレシピがある場合：

とりあえずできた。レシピを教えてくれる。#レシピ pic.twitter.com/ZRWcB88FyA

— shima-07 (@y_kawashima_) Express Generator で作成されたファイルを触って Express を理解したい1：生成, yarn start, express.static, path.join

`express-generator` による生成、`yarn start` の意味、`express.static()` の意味、`path.join()` の意味についてまで。記述しています。

「余談」とある項目はやや踏みこんだ内容になっています。必要に応じて読み飛ばしてくだい。(むしろ余談のほうが多いね…)

# 生成

下記のコマンドで `app_name` 以下に雛形を生成できる。

“`
$ express app_name –view=pug
“`

`–view=pug` を付けない場合、`views` 以下のファイルの拡張子が `.jade` になる。jade は pug に改名される予定(というか改名された)ので、今後は `.pug` に統一されていく(はず)。なので、これから `express` のアプリを作るなら `–view=pug` を付けて生成したほうが良さそう。

生成のコマンド名は `express` だけど、使用するには `express-generator` をインストールする必要がある。

“`
$ npm install expr

元記事を表示

tsoaを使ってAPIドキュメントを自動生成

## tsoa

[tsoa](https://tsoa-community.github.io/docs/)とは、TypeScriptとNodeを使用してOpenAPI準拠のREST APIを生成するためのモジュール。
2020-05-05時点の最新バージョンはv3.0.8。

– APIの唯一の信頼できる情報源としてのTypeScriptコントローラーとモデル
– Express、Hapi、Koa対応
– エンドポイントの説明などにはjsdocを使用

### メリット

– コメントと実装のずれがなくなる（JSDocで管理するモジュールもあるが、いつかずれる）
– ドキュメント上からリクエストが投げれる

### デメリット

– デコレーター祭り
– route.tsをプレコンパイルする必要があり、開発環境が少しだけ複雑に

## 導入方法

[Introduction \| tsoa](https://tsoa-community.github.io/docs/introduction.html#goal)を順に進めれば、以下のようなAPIドキュメントが `http://lo

Node.jsで仮想通貨取引botを作るまで

###この記事で得られること
– Node.jsで仮想通貨取引bot（以下、bot）を作りたいときに参考にすると良いかもしれない資料
– 筆者が作っためっちゃ基本的なbotのソースコード
– 当たり前ですけどこの記事・ソースコードは実際の取引の参考にはしないでください。筆者はソースコードの内容でbotを短時間動かして普通に損失出しています（笑） 数百円ですが。
– コード見ればわかりますが取引所はbitFlyerを使っています。

###この記事の対象者
– JavascriptおよびNode.jsの基本を終えて、何か作りたいなと思ってる人。
– ここでいう基本は、Progateの関連するレッスンの内容は理解している、AtCoderのABCはJavascriptで解ける・ソースコード読めるレベルぐらいを想定しています。

###参照した資料と進め方
####[Udemy: Node.jsの基礎から学ぶ、ビットコイン自動売買プログラム](https://www.udemy.com/course/nodejs-trading-basic/)
– この教材が作られたのが2年前(?)とかなので

【Node.js】Node.jsをインストールする方法

#Node.jsインストール

[Node.jsの公式サイト](https://nodejs.org/ja/)にアクセスする。

「推奨版」を押下する。

パッケージが開き、「続ける」を押下する。

「続ける」を押下する。

「同意する」を押下する。

「続ける」を押下する。

「インストール」を押下する。

パスワードを入力し、「ソフトウェアをインストール」を押下する。

「閉じる」を押下する。

#Node.jsインストール確認

ターミナルを開き、下記コマンドを入力し、バージョンが表示されれば確認OK。

“`
$ node -v
v12.16.3
$ npm -v
6.14.4
“`

AWS AmplifyのチュートリアルでJavascript(React)の環境を構築する

いつも忘れないように、コンセプトから。

###コンセプト
・お金かけてまでやりたくないのでほぼ無料でAWSを勉強する
　→ちょっとしたサービスを起動すると結構高額になりやすい。
・高いレベルのセキュリティ確保を目指す
　→アカウントを不正に使われるととんでもない額を請求されるので防ぐ

前回は[「AWSサーバーレスのWebアプリケーションをもっと勉強する」](https://qiita.com/auf/items/f3a84ae3bbf0a3b5cbec)でいろいろ考察してみました。実際に触って試していきたいと思います。

###まずはクライアントサイドから
実際に触って確認していくのですが、クライアントサイドの実装を選択します。前回も書きましたが、Angular、React、Vue.jsから選択します。
https://note.com/erukiti/n/na654ad7bd9bb
↑のサイトが参考になりましたが、Angularって下火になっているんですね。Google＝偉いみたいなイメージがあるので、有力候補になりそうな気がしますけど、今はReactが良さそうです。そもそもJa

【Babel】の使い方(Javascript・node.js)

#専用のディレクトリ作成

“`bash
$ mkdir babeltest
“`

#カウントディレクトリを移動

“`bash
$ cd babeltest
“`

#package.jsonを作成

“`bash
$ npm init -y
“`

上記のコードは、対話環境で対話する事なく、プロジェクト名など適当につけてファイル「package.json」を作成してくれます。

#必要なライブラリをインストール

“`bash
$ npm install –save-dev babel-cli
$ npm install –save-dev babel-preset-es2015
“`

Babel CLIとES 2015のプリセットの2つをプロジェクトにインストールします。
その際、package.jsonに設定を保存する様に、「–save-dev」オプションをつけておきます。

#.babelrcを作成
プロジェクトフォルダに「.babelrc」というファイルを作成し、そこに下記の内容を書き込みます。

“`javascript
{ “prese

Puppteerでキャプチャ画像を取得 part1

## 概要
エンジニアもどき2年目に入りました。色々あって以下を行うLambda関数を作成することになりました。
色々学びがあったので備忘録がわり兼アウトプットのために書くことにしました。

1. 特定のページのキャプチャ取得
2. 取得したキャプチャをS3に保存
3. S3に保存したURLをDyanmoに記録

part1では`1. 特定のページのキャプチャ取得`の実装とデプロイまで行います。
part1での実装内容は[こちら](https://github.com/syu-y/puppeteer-capture/tree/part1)

## 前提
以下の内容が出てきます。インストールなどの準備は完了している前提です。

– nodejs
– ServerlessFramework
– yarn
– webpack
– iamのユーザ作成済み

## 実装作業
### 1. 準備
フォルダとテンプレートの作成をします。

“`zsh
mkdir puppeteer-capture
cd puppeteer-capture
serverless create –template

Electron-builder実行時にpackage.jsonに記入したくない非公開設定を追加する

## やれること

Electron-builderのCLIでの実行時引数に`–config <追加の設定を書いたファイル.json>`を渡すとpackage.jsonに記入していない設定を追加(上書き)できます。ただし、package.json内の`”build”`セクション以下の項目だけが対象です。

## 例

### 問題のある状態(隠すべき項目がpackage.jsonに書かれている)

electron–builderでappxをビルドする時、Microsoft storeで発行される”publisher”項目等を追加する必要があります。`–config`を使わない場合には`package.json`に次のように書くでしょう。

“`json
{
…(略)…
“scripts”: {
“build-appx”: “electron-builder -w appx”
}
“build”:{
“artifactName”: “APPNAME_${version}_${os}.${ext}”,
“appx”: {
“publishe

Zoom Electron SDK 入門

#Zoom Electron SDKでできること
　昨今の新型コロナ騒ぎの中でWeb会議サービスZoomが注目を集めています。Zoomは高機能で非常に便利なサービスですが、ちょっとカスタマイズして使いたいと思うこともあると思います。
　そんな時のために、エンジニアがZoomを使ったアプリケーションを簡単に作ることが出来るSDKが公式に配布されています。しっかりとしたデモが付属しているので、それを基本として必要な機能を拡張する形で開発を進めることが出来ます。
　この記事では、Zoom Electron SDKの導入から、いくつかの機能の使い方までをご紹介します。
#Zoom App 登録（Tokenの取得）
　Zoom Electron SDKを始めとした開発者向けツールは、下のリンクから有効化できます。（Zoom App Marketplaceページの右上にある「Develop」メニュー内「Build App」からも同じページに移動できます）
[https://marketplace.zoom.us/develop/create](https://marketplace.zoom.us

ExpressのAsync Errorのハンドリング

## 問題点: `async`でリクエストハンドラを定義して処理中に例外が発生してもハンドリングできない

たとえば、`http://localhost:3333/notfoundroute`のように存在しないルートにアクセスしたら、`ステータスコード:404`、ボディコンテンツに`Route not found`を返したい場合において、以下のコードを実装したとする。

“`ts
import express, { Request, Response, NextFunction } from “express”;

const app = express();

app.get(“/hi”, (req, res) => {
res.send(“Say hi”);
});

// 問題の箇所
// ここで例外を発生させる
app.get(“*”, async (req, res) => {
throw new Error(“Route not found”);
});

// エラーを扱うためのハンドラ
app.use((err: Error, req: Request, re

Use Spotify Sign In with Firebase

Use Spotify Sign In with Firebase
https://github.com/firebase/functions-samples/tree/master/spotify-auth
をやってみた

## 環境
– Windows10
– PowerShell
– Visual Studio Code

## 作業フォルダ作成
適当な場所にgithubの内容をコピー

https://github.com/firebase/functions-samples

## Cloud Functionsの初期化

> Prerequisites
To learn how to get started with Cloud Functions for Firebase by having a look at our Getting Started Guide, trying the quickstart samples and looking at the documentation.

まずこれ読めとあるのでやっていく
https://firebase.google

npxコマンドの-p -cオプション指定時のNode.jsスクリプトのデバッグ

# はじめに

npxコマンドで -p -cオプションを使った場合にNode.jsスクリプトのinspectを使ったデバッグ実行ができなかったので、これの回避策を書きたいと思います。

ここでは、アスキーアートを生成するcowsayコマンドを例に使います。

# 通常の実行

npxコマンドにオプションを指定しない場合の通常の実行例です。

“`
$ npx cowsay ほげほげ
npx: 10個のパッケージを1.831秒でインストールしました。
__________
< ほげほげ >
———-
\ ^__^
\ (oo)\_______
(__)\ )\/\
||—-w |
|| ||
“`

npxコマンドに “`-n inspect“` あるいは “`–node-arg=inspect“`を渡すと、nodeのインスペクタが起動し、デバッグを行うことができます。

“`
$ npx -n inspe

「$ firebase list」のエラーに関して

はじめまして、初投稿になります。
ただいま、ポートフォリオサイトをVue.jsのSPAを用いて鋭意作成中です。

その中で、
「Vue.js + Firebase functionsでお問い合わせフォームを作成する」
を参照させて頂きながら、組み込もうと考えておりました。

大変些細な一件ですが、Firebase CLIをインストール中に起きたエラーの対応法を記事にさせて頂きます。

## 「firebase list」でエラーが返ってくる

Firebase CLI リファレンスに沿って、インストールしていると、

「Firebase プロジェクトを一覧表示し、CLI が正しくインストールされていて、アカウントにアクセスしていることをテストします。次のコマンドを実行します。」と出てきます。

しかしは、

`$ firebase list`

しても

nodeのバージョンを下げる@ubuntu18.04

# nodeの互換でエラーが出て困った
– nodeを最新バージョンで入れていて、そのバージョンでアプリが動かない
– その時の対処法のメモです。

# そもそもnodeのインストール方法をメモ
– 私はいつもこのサイトを参考にさせて頂いています。(https://qiita.com/seibe/items/36cef7df85fe2cefa3ea)

# 全てのバージョンを確認する
“`
sudo n ls-remote –all
“`

# 試すバージョンを切り替える
“`
sudo n 11.15.0
“`

#node command run script file – Error: Cannot find module ‘/not-exist-file.js’ ( internal/modules/cjs/loader.js )

– 存在しないファイルを実行しようとした時に、このエラーが発生した
– 実行ファイルを指定するとモジュール扱いになる？
– あまり親切なメッセージで教えてくれたりはしないっぽい

“`
$ node –version
v12.16.1

$ node /not-exist-file.js
internal/modules/cjs/loader.js:985
throw err;
^

Error: Cannot find module ‘/not-exist-file.js’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
at Function.Module._load (internal/modules/cjs/loader.js:864:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
at internal/

DockerでNuxt.jsを起動するまで

# 実施環境

・macOS 10.15.4
・Docker Desktop Community 2.2.0.5

この記事ではDockerのインストール方法は記述していません。
各自インストールした状態で記事を読み進めてください。

# Dockerの準備

アプリを作成したい、好みのディレクトリに移動します。
私は`MyNuxtApp`としました。

まず、Docker関連のファイルを作成します。

“`console:terminal
% mkdir MyNuxtApp
% cd MyNuxtApp
% touch Dockerfile docker_compose.yml

“`

## Dockerfile

“`dockerfile:Dockerfile

FROM node:12.4.0-alpine

WORKDIR /app

# コマンド実行
# linux 最新化、gitインストール、npm最新化、vue-cliインストール
RUN apk update && \
apk add git && \
npm install -g npm && \
npm

Windows 10 で express, nodist, node, yarn

# インストール

– windows 10 home (64bit) を用意
– git bash をインストール
– nodist をインストール
– nodeをインストール
– yarn をインストール
– express をインストール
– express-generator をインストール

# 手順

## git for windows をインストール

git bash のためだけに入れます。Power Shell でもできますが、以下では基本的に git bash を使うものとして書いてます。

– https://gitforwindows.org/

上記からダウンロードしてインストールします。必要に応じて日本語の設定をする。

– (参考) git bash で日本語が化けるのを防ぐ

## Nodist のインストール

下記からインストールできます。

– https://github.com/nullivex/nodist

下のほ

Node + TypeScriptの複数の実行方法（node, ts-node, nodemon, pm2）

プライベート開発時に使う[microsoft/TypeScript-Node-Starter](https://github.com/Microsoft/TypeScript-Node-Starter)の開発環境がwatchなどあり快適。
社内の開発環境もその水準にするために調べた際のメモです。

## nodeコマンドで実行する

tscでトランスパイルして、nodeコマンドで実行します。

“`
tsc
node dist/app.js
“`

### プロセスを確認

“`
xxx 20864 0.0 0.4 4594780 67820 s004 S+ 6:38PM 0:00.21 node /usr/local/Cellar/yarn/1.17.3/libexec/bin/yarn.js start
“`

## ts-node

tsc + nodeのハッピーセット :fries: :hamburger:

“`
ts-node src/app.ts
“`

### プロセスを確認

“`
xxx 23344 0.0