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

無料枠でGAEとAESを使ってみる

[Nuxt + Firebase + Elasticsearch 勉強用Qiita まとめ](https://qiita.com/YosukeAramaki/items/35f978e8e330c817514d)で
ローカル環境でFirebaseとElasticsearchをつなぐnodeとElasticsearchを構築できました。

これを本番環境に落とし込むためnodeをGAEに、ElasticsearchをAmazon Elasticsearch Serviceに移行してみました。

GCPとAWSに触るのは初めてだったのでかなり大変でした。

## GAE (Google App Engine)

Projectのセットアップはこちらのサイトを参考にしました
[Google App Engine Node.jsを試してみる。 GAE/Node.js](https://qiita.com/n0bisuke/items/fbea48562441a8314d45)
[App Engine スタンダード環境で Node.js を使用するためのクイックスタート](https://clo

ブロガーの買ってよかったものを集計してランキング化したら本当にいいモノが見つかった

## 動機
ジャバ・ザ・ハットリ(@jabba )さんの[技術書ランキングサイトをQiita記事の集計から作ったら、約4000冊の技術本がいい感じに並んだ](https://qiita.com/jabba/items/edefda09121877b79760)がとても面白かった。
特に面白く感じたのは「意見を集めてランキング形式に整える」と、良いモノはちゃんと上位に入ってくるところ。

この「意見を集めてランキング形式に整える」をブロガーの買ってよかったもの紹介記事に応用したら、紹介頻度の高い本当にいいものが見つかるのでは？

最近はAmazonのレビューもサクラコメントで溢れがちで、本当に良いものを見つけるのが難しくなっている世の中に多少のニーズはあるのでは？

と思ったのが今回のそもそもの動機。

## 作ってみた
実際にブロガーの買ってよかったもの紹介記事から紹介商品を集計してランキング形式で並べたのがこちら。

[ブロガー買ってよかったものランキング｜グッドグッズランク](https://www.wercat.net/goodgoodsrank)

この記事を書いている

Dockerでnode.jsプロジェクトの開発環境構築

# 動機
– 新しくMac Book Pro 2019を購入。nodeやpytonの開発環境構築にあたっては, 素の環境を綺麗なままにしたいことや、いろいろな環境での開発を行いためDockerを用いることにした。
– Docker周りの設定や概念の理解で少し躓いたのでここに記す。エキスパートには当たり前すぎる内容だとしてもだ。

# やりたいこと
node.js, angular, ionic, webpack を使ったweb appやPWAの開発を、
– ホストのローカル環境を汚すことなく(Dockerを用い)
– ホストで動くVS Codeを用いたコーディング&デバッグしつつ
– ホストのターミナルからgitを用いたバージョニングしつつ
– 仮想マシンでionic server等で起動したサーバとその上で動くweb appを、ホストのブラウザからアクセスし動作確認・デバッグ

# 手順
## 1. Docker desktop for Macをインストール

https://hub.docker.com からダウンロード。ユーザ登録も済ます。

## 2. プロジェクトのディレクト

めっちゃ簡単にNodejsでCLIツールを作る

## やりたいこと

そこまで凝ったことをしないCLIツールをNodejsで作りたい！
そこで[cac](https://github.com/cacjs/cac)を使ってそれを実現したいと思います。

[こちらの記事](https://qiita.com/sayama0402/items/9827cae2b4d7691cb42b)で作成したプロジェクトを元に進めたいと思います。

## パッケージとindex.jsの追加

“`sh
$ npm i cac

$ touch index.js
“`

## cacの基本

“`js
const cli = require(‘cac’)()

cli
.command(‘command’, ‘説明’) // コマンド
.option(‘–opt’, ‘説明’) // 引数オプション
.action((options) => {
// 実行したい処理
console.log(options) // 引数の値をオブジェクトで受け取れる
})

cli.help()

cli.parse()
“`

NPMでsudoを回避する技

##UbuntuにNodeJSをインストールしたらまさかの不便さに遭遇

先日UbuntuにNodeJSやらNPMをインストールしたところ
グローバルにモジュールをインストールしようとしたら失敗しました。

**sudo**で実行すればインストールできたのですが[Gatsby.jsのチュートリアル](https://scotch.io/tutorials/zero-to-deploy-a-practical-guide-to-static-sites-with-gatsbyjs)をやっていたときにGatsbyのプロジェクトを作成しようとしてエラーが発生しました

以下遭遇したエラーの一部

“`
gyp ERR! stack Error: EACCES: permission denied, mkdir ‘/home/【ユーザー名】/scotch-blog/node_modules/sharp/build’
“`

このエラーが発生したときに
***NodeJSをまたインストールしないといけないのかな***と暗い気持ちになっていましたが、***以下の方法で***npmパッケージをイ

DynamoDBのテーブルデータをNodejsでS3にBackupする

## はじめに

DynamoDBに大量にあるテーブルのデータを一括でS3にバックアップしたい。。みたいな状況があったので、メモとして書いておきます。

ちなみにテーブルが少量であれば、Data Pipelineを使って簡単に出来ます！！
`aws-sdk`ではData Pipelineの細かいオプションは設定出来なかったようなので、nodejsでData Pipelineを操作することはしていません。

## 環境

* Nodejs v11.1.0
* DynamoDB

## 事前準備

バックアップを行うためにS3に専用のバケットを作成しておいてください。
この記事では`backups`というバケットを作成したという例で進めます。

## プロジェクトを作成

適当ですが、`dynamodb-backuper`みたいなディレクトリを作成して進めていきます。

“`sh
$ mkdir dynamodb-backuper

$ cd dynamodb-backuper

$ npm init

$ npm install aws-sdk dynamodb-backup-res

AWS APIGateway/LambdaとJavascriptで簡易問い合わせサイトをつくる

#概要
問い合わせフォーム(javascript)　⇒　APIGateway　⇒　Lambda(Node.js)　⇒　Lambda(Node.js)　の流れで簡単な問い合わせサイトを作ります。

一応レスポンシブにします。

バリデーションもあります。
超初心者がwebpackerについて調べてみたぞ

Ruby on Rails を使って開発を始めた今日この頃。
サーバーサイドはそれとなく出来てきたからそろそろフロントも固めて行こうかしら。なんて思っていた僕はBootstrapをRailsで使おうと考えた。Bootstrapを使うのはいたって簡単。**htmlのhead内に以下のリンクをぶち込めばいいだけ**。

“`application.html.erb
“`
なんて便利だこと。
しかし、**Bootstrapを使うには他にも方法はある**。それは以下のリンクにある通りだ。
https://qiita.com/rhistoba/items/f724da

Reactの初期テンプレが作成出来なかった時の対処メモ

##始めに

node.jsのバージョンは`11.10.1`

久々にReactを勉強し直そうと、取り敢えず、技術書の手順に沿って、`create-react-app`でReactアプリのテンプレートを作ろうとしたら、出来なかったので、その時の対処方として残しておきます。

##問題となった事象
① Reactチュートリアルも一通り復習したし、何か１冊書籍でもこなしておこうと、Reactアプリの初期テンプレを作るため、`npx create-react-app react_app`を実行した。

② installが終わって、生成されたファイル群を見てみると、`node_modules`、`package-lock.json`、`package.json`しか生成されていない…。

③ おかしいな…と、Terminalのログを見ると、以下のようなログが出ていた。

“`terminal
A template was not provided. This is likely because you’re using an outdated version of create-r

NodeJSの画像処理ライブラリ「sharp」を使って画像を連結する

# はじめに
NodeJSでImageMagickのappendのようにサイズがバラバラの画像を単純に横並びで連結させたい機会があったのですが、~~単純すぎて~~中々記事が見つからなかったので備忘録的な意味合いも込めて書き残します。

# やること
– sharpで画像情報取得、連結

# バージョン
NodeJS: v12.14.1
sharp: v0.23.4

# 成果物

## 出来上がる画像

## ソースコード

“`bash:terminal
yarn init -y
yarn add sharp
“`
ソースはこちら
https://github.com/engabesi/appendImages

まず全文を貼ります。

“`javascript:index.js
const sharp = require(“shar

クラウドストレージ「Box」にAPIを使ってファイルをアップロードする

# 概要

クラウドストレージのBoxにAPI経由でファイルのアップロードを行う必要があったのですが、
調べてもあまり情報がなかったので記載しておきます。

# 環境

開発環境はMacでNodebrewを使っています。

“`
$ nodebrew
nodebrew 1.0.1
$ node -v
v12.14.1
“`

# カスタムアプリの作成と承認

## カスタムアプリの作成

BoxAPIを使うためにまずカスタムアプリを作成します。

デベロッパーコンソールにアクセスしてBoxアカウントにログインします。
https://app.box.com/developers/console

アプリの新規作成を押下します。

アプリの種類でカスタムアプリを選択します。

複数のファイルをアップロードしてExpressサーバーで保存する

# 概要

クライアントアプリからExpressサーバーへの複数ファイルのアップロード時にハマったので、
方法を記載します。

# 環境

開発環境はMacでNodebrewを使っています。

“`
$ nodebrew
nodebrew 1.0.1
$ node -v
v12.14.1
“`

# 単一ファイルのアップロード

まず単一ファイルのアップロード方法を記載します。

## Expressサーバー立ち上げ

express-generatorでExpressサーバーを作成します。

“`
$ npm install -g express-generator
“`

express-generatorをインストールしてexpressコマンドが使えるようになったので
アプリを作成します。

“`
$ express –view=ejs express-app

create : express-app/
create : express-app/public/
create : express-app/public/javascripts/

gulpでsassとbabel環境構築（nodeインストールから）

# gulpセットアップ
自分用メモなので、大まかな手順のみ。
作業詳細はリンクの各記事を参照。
環境構築を一から行ったことがない人向け（自分！）

## 作業環境
macOS 10.14.6

## 手順
1. node.jsインストール
nodeのバージョン管理をするため、下記記事を参照しインストール
[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)

2. gulp-sass設定
3. gulp-babel設定
[Babel](https://blog.triana.jp/?p=1338#Babel)
4. Autoprefixer設定
[Autoprefixer](https://blog.triana.jp/?p=1338#Autoprefixer)

## 参照
[絶対つまずかないGulp 4入門（2019年版） インストールとSassを使うまでの手順
](https://ics.media/entry/3290/)
[gulp3→4の変更点に気をつけよう！

Sonos で Lチカ してみた。

# はじめに
電子工作のはじめの一歩と言えば「Lチカ」ですね。
ワイヤレススピーカーシステム Sonos でも「Lチカ」を試すことができます。
Sonos One にはステータスライトがついており、このステータスライトの色や点滅で状態を確認することができます。(白色点灯状態が正常です)

ただ、夜中暗い中でステータスライトが点灯していると眩しいことがあるので、Sonos アプリからステータスライトを OFF にすることができます。

Laragonで簡単に開発環境を構築する

皆さん、学習するとき、開発をするとき、ローカルで確認を行うときの環境構築はどうされていますか？
恐らくMacを所有している方が多くDockerを使われている方が多いと思います。

自分が現在、所有しているはHPのSPECTRE X360 13、Windows 10 Homeです。Windows 10 Homeなのです。
ラップトップと言っても非力というほどではありませんがVagrantを立ち上げている間、かなりファンが回り気になります。
それに決して速いとは言えません。さらに現時点ではまだWSL2とDocker for WSLは正式リリースされていません。

ではどうするか？
https://laragon.org/

Laragonです。
Windows向けのAMP環境構築ソフトで
**PHP、Node.js、

import Vue from ‘vue’の意味を研究して、分かってきたもの

#import Vue from ‘vue’はなぜ使えるか？
Vuejsの開発の際、よく最初に出てくるこれ

“`js

import Vue from ‘vue’;
“`
下のような相対パスなどはまだわかりやすいけど、

“`js
import Example from ‘./Example.vue’;
“`

`vue`はなず`import`できるのか、みんな様こんな疑問はないのか。
もしかして俺一人の疑問かも?

少し研究してきたことをまとめてみた。

##importとは
Javascriptのモジュールシステムです。他のファイルを使いたい時、`require` functionで他のファイルの内容を引用する。
`es6`を使っている時、`import`を`require`にコンパイルする。
だから、実際に実行するコードは以下。

“`js

import Vue from ‘vue’;
⬇️
const Vue = require(‘vue’)
“`

##nodejs引用ルール

実は、nodejsの中に、`require`を使う時に、`require.resl

【ECMAScript】importでSyntaxError

ECMAScriptの記法を学習していたところ、外部モジュールのimportで詰まったので解決策を残しておきます。

## 実行環境
* Node.js : v12.12.0
* IDE: WebStorm(2019.3.1)

## ディレクトリ / ファイル
`index.js`から`add.js`で定義した関数を使うだけの簡単なものです。

“`sh
.
├── add.js
└── index.js
“`

“`index.js
import { add } from “./add.js”;

console.log(add(10, 15));
“`

“`add.js
export function add(a, b){
return a + b;
}
“`

## なぜかimportの箇所SyntaxErrorとなる
実行時、エラーが出力されたので調べてみたところ、以下の対応が必要とのこと。

* 実行時オプションに `–experimental-modules` を指定する
* ファイル拡張子を変更する(`js` -> `mjs`) or `pack

ネット環境なしで手持ちの端末をサーバーに接続させる。

# 発端
筆者はよく行きつけのカフェでイキりながらWEB開発をしております。

ところが困ったことに、カフェなどで設置されている公共Wifiでは、ルーターの設定で他機の存在が秘匿にされている場合が多いです。（当然pingも打てない）

セキュリティの観点から妥当な処置ではあるのですが、開発しているWEBサイトをスマホで確認する･･･といったことはできません。

対処法として、パソコン自体をルーターにして独自のLANを構築し、端末と通信することがあげられます。

パッと見では難しそうですが、Windowsでは7から**SoftAP**という機能が標準で用意されており、Microsoftが提供している仮想ネットワークアダプタを利用して、パソコンをルーターとして扱うことができるようになります。

そこで今回は、SoftAPを利用してパソコン単体でLANを構築し、Nodeでサーバーを起動、手持ちの端末でLANに接続して、サーバーからレスポンスを受け取ることを目標にします。

# LANの構築
1 . コマンドプロンプトを管理者権限で起動

2 . 以下のコマンドを実行

“` cmd
C:

NodeJSで、opencvを触るまで

Node jsは偉大ですよね！

一つのプログラムでhttpサーバーもwebscketサーバーも、ラズパイを使えばSPIやシリアル通信まで行えてしまいます！

しかも速度だってc++とそこまで変わらないし（ほんまか）

もうJavaScriptはクソだって言わせない!

さて、Nodejsを布教するのはこれくらいにして本題に入ります。

# 本題
**Nodejsから、webカメラの画像を読み込みたい!!**

調べていてよくあるのが、nodejsで建てたサーバーにクライアントから画像データを送るという記事。

しかし、私はnodejsをうごかしているパソコンにつながったカメラの映像を取得したいのです。

しかし、なかなか最適な答えにたどり着けなかったので、記事にまとめておきます。

# 手法
プログラムからカメラの画像を取得するといえば、やはりopenCVでしょう。

opencv3をサポートしている[opencv4nodejs](https://www.npmjs.com/package/opencv4nodejs)を使用します。

早速npmからインストール

“`
npm i

fetchの呼び出し @Javascript & Node.js 実験室

fetchは、HTTP呼び出しで標準的に使っていますが、Content-Typeに従った呼び出し方をいつも忘れてしまうので、備忘録として残しておきます。

実動作の確認のためのソースコードを以下のGitHubに上げておきました。
　https://github.com/poruruba/fetch_laboratory

Javascriptからの呼び出しを中心に示しますが、同じコードがそのままNode.jsでも動作します。
ちょっとだけ、Lambdaでの動作も示しておきます。

# 呼び出し方法の種類

今回扱う呼び出し方法は以下の通りです。

・Get呼び出し
　HTMLのページ取得でおなじみです。パラメータをQueryStringに指定します。例えば、以下のような呼び出しです。
　`http://localhost:10080/api?param1=abcd`

・Post（Content-Type: application/json）呼び出し
　パラメータをBody部にJSONで指定するWebAPI呼び出しでは一番一般的ですね。

・Post（Content-Type: ap