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

npmコマンドが使えなくなった。

# npm command not found

##　ターミナルを起動すると下記のエラーが

“`
bash: /Users/gouda/.bash_profile: line 20: syntax error: unexpected end of file
“`

## .bash_profile見てみる
大体、コピペで作っていたので、おかしい箇所が分からなかったが、
最後の方のif文が、fiで終わっていなかったことが原因みたい。

“`
# Setting PATH for Python 3.7
# The original version is saved in .bash_profile.pysave
PATH=”/Library/Frameworks/Python.framework/Versions/3.7/bin:${PATH}”
export PATH=”$HOME/.pyenv/shims:$PATH”
export DYLD_FALLBACK_LIBRARY_PATH=$HOME/anaconda/lib/:$DYLD_FALLBACK_LIBRARY_PA

Cloud Functions for Firebaseを使ってExcelファイル←→ Cloud Firestore を読み書きするサンプルコード

WEBアプリからExcelファイルを操作(アップロード・ダウンロードなど)する必要があったため、そのときに調べた内容の備忘メモ。

## イントロ

Cloud Functions for Firebase を使って、Excelファイル内のデータをCloud Firestoreへ投入したり、FirestoreのデータをExcelファイルとしてダウンロードしたりするサンプルコードです。

以下のことができるようになります。

– Excelデータを読み込んで、Firestoreへ保存
– Firestoreデータを読み出して、Excelへ流し込んでダウンロード
– Excelファイルを、Storageへアップロード(上記で用いるExcelテンプレートをアップロード)

それぞれ、図的には下記のようになります。

### Excelデータを読み込んで、Firestoreへ保存
ローカルのExcelファイルを、Cloud Functionsへアップロード。FunctionsはExcelファイルを読み込んでJSONデータを生成し、Firestoreにデータを書き込みます。

![upload.

花粉症LINE Botのデータをnode.jsを使ってFirebaseに出し入れする（花粉カレンダー作成③）

##概要

耳鼻咽喉科の開業医をしています。

今回、以前作成したLINE Botのデータをnode.jsを使ってFirebaseに出し入れできるようにしました。

以前作ったLINE Botの記事はこちら　
[花粉症の重症度を判定し自分に合う市販薬を教えてくれるLINE Botの作成](https://qiita.com/doikatsuyuki/items/767ebd22a3e6d5d39d33)

##作成
**1.Firebaseno秘密鍵を生成し準備**
こちらを参考にします。
[サーバーに Firebase Admin SDK を追加する](https://firebase.google.com/docs/admin/setup#add_firebase_to_your_app)

歯車マークからプロジェクトの設定を選択します

lighthouseを自動で指定回数動かしてWebパフォーマンスを確認する環境を構築する

# ~~pupeteerで~~lighthouseを自動で指定回数動かしてWebパフォーマンスを確認する環境を構築する

* 改めて整理し、今回はpupeteerは使わなくなりました。

## プロジェクトを作成する

“`sh:Terminal
$ mkdir node_js_api_sample_1
$ cd node_js_api_sample_1/
“`

## プロジェクト名やバージョンなどを管理する(NPM init)

* `npm init` を実行したカレントディレクトリに `package.json` が作成される
* [npmをインストールした後最初に使用する初期化処理を意味するコマンド](https://techacademy.jp/magazine/16151)ではなく、プロジェクトの初期化処理

##### 0. npmをインストールしていない場合

* `brew search`

“`sh:Terminal
$ brew search npm
==> Formulae
npm

ElectronでcontextBridgeによる安全なIPC通信

## はじめに
Electronの情報って、検索すると沢山出てくるのに、ところどころみな違っていて見極めが難しいですよね。まだまだ私自身よくわかっていないですが、調べた情報を共有します。

現時点での結論として、**セキュアなIPC通信にはcontextBridgeを使おう**、ということらしいです。

とはいえ、Electronの状況はversionによってかなり変わるようなので、以下の際内容には注意してください。こちらで検証した時点でのElectronのversionは7.1.9です。

## Electronにおけるセキュアな設計とは

前提として、Electronでは、**メインプロセス**と、webページ画面として動く**レンダラープロセス**が立ち上がります。最初にelectronコマンドの引数として指定したjsファイル(今回はmain.jsとします)がmainプロセス上で実行され、

“`
$ electron ./main.js
“`

その中で`BrowserWindow.loadURL()`関数などで読み込まれたhtmlがレンダラープロセス上で起動します(今回は

Node.js(Express) + Multer + S3で画像をフォームからアップロードする

#目的
フォームから画像やファイルをクラウド上(今回はS3)にアップロードするため

#背景
最近Nodeを触っていて、ググっても色々情報はあるものの、フォームからS3に上げるどうこうっていうのはまとまってなかったので。

#前提条件
・AWS
・S3
・環境変数、aws-sdk, multer, multer-s3をインストールしておくこと
上記のセットアップが終わっていること。

#コード

“`node.js
var express = require(‘express’);
var router = express.Router();
var path = require(‘path’);
var AWS = require(‘aws-sdk’);
var multer = require(‘multer’);
var multerS3 = require(‘multer-s3’);

const s3 = new AWS.S3({
accessKeyId: process.env.AWS_S3_ACCESS_KEY_ID,
secretAccessKey: pr

obnizのBLEでペリフェラルに接続する

BLEデバイスを見つけるだけでなく接続するというのをやってみます。
接続することで実際にデータを送ったり、データを受け取ることができるようになります。

## 見つけてから接続

接続するためにはまず、見つけなければなりません。
そして見つけたperipheralに対してconnect()を呼ぶことで接続できます。

接続とスキャンの同時実行はできないため、自動でスキャンは停止されます。
ただ、接続してしまったあとの両立はできますので再度スキャンの実行ができます。

それでは、同じくアプリで作ったBlankというBLEデバイスに対して接続してみます。

“`javascript
var obniz = new Obniz(“OBNIZ_ID_HERE”);
obniz.onconnect = async function () {
await obniz.ble.initWait();
var target = {
localName: “Blank”
};
var peripheral = await obniz.ble.scan.startOneWait

Microsoft Bot Framework SDK for JavaScript で特定のメッセージに特定の返答を返せるように実装してみる

#はじめに~目的
この記事ではMicrosoft Bot Frameworkをベースにボットの挙動を編集してみました。

Microsoftの公式チュートリアルでは質問に対しておうむ返しするものと、Q&Aのチュートリアルがあります。
ただ、Q&A対応ボットのチュートリアルはいろいろ複雑で、どの部分がどのように動いているかがパッとわかりにくかったので、そもそもどの部分がBotの制御にどうかかわっているのか実際に動かして確認してみました。

#目標
公式チュートリアル「[Bot Framework SDK for JavaScript を使用したボットの作成](https://docs.microsoft.com/ja-jp/azure/bot-service/javascript/bot-builder-javascript-quickstart?view=azure-bot-service-4.0)」で作ったボットに「こんにちは」というメッセージが来た時だけ、「Hi」と返し、それ以外はEchoするように書き換えてみます。

#前提条件
Windows10のローカル環境で実行します。

nodeのバージョンが古く、npmがアップデートできない(バージョン管理:nodebrewとanyenv)

# はじめに
### 概要
Webサイト作るお仕事をしている方向けの内容です。

– gulpを使用してフロントエンドの環境構築
– バージョン管理はnodebrewとanyenv
– 既にgulpを使用している

(nodebrewとanyenvに関しては後々記事を書いていこうと思います。)

# 出来事

gulpを使用したかったので、他の記事にもあるように

① Node.js
② npm
③ gulp

の順番で確認しました。
今回は私が普段からgulpを使用しているので、ダウンロードではなく**バージョンを確認してgulpを導入**する。という方向から進めました。
(もしバージョンが古ければ適宜アップデートする必要がある)

### nodeバージョン確認

まず、ターミナルから、Node.jsのバージョンを確認します。

“`node.js
node -v
“`
結果

“`node.js
v9.2.0
“`

nodeのバージョンが、9.2.0であることがわかりました。
(当時の最新バージョンは13.6.0、推奨バージョンは12.14.1なので若干古いことが分かり

Auth０で簡単にユーザー認証を実装（花粉カレンダー作成②）

##概要

耳鼻咽喉科の開業医をしています。
花粉症の患者さんに使ってもらえるような花粉飛散情報が分かるカレンダーアプリを作りたいと思っています。
前回カレンダーを表示して予定を入れるところまで挑戦してみました。
[Vue.js×FullCallendarでカレンダー作成（花粉カレンダー作成①）](https://qiita.com/doikatsuyuki/items/344b61459977a7ee2eff)

今回はユーザー個別のカレンダーを表示するために、ユーザー認証機能の実装に挑戦しました。

##完成動画

##作成
こちらの記事を参考にさせていただきました。ありがとうございました。
[Auth0 + GitHub Pagesでミニマムなログインサンプルを作る](https://protoout.studio/posts/auth0-github-pages)
[ファイル一つコピペで試すAuth0+Vue.jsのログインサンプル](https://qiita.com/n0bisuke/items/7de00908ac

Vue.js×FullCallendarでWEBカレンダー作成（花粉カレンダー作成①）

##はじめに
耳鼻咽喉科の開業医をしています。
花粉症の患者さんに使ってもらえるような花粉飛散情報が分かるカレンダーアプリを作りたいと思っています。
調べてみるとFullCallendarというオープンソースのJavaScriptライブラリがあり、カレンダーのUIと機能を簡単に実装できるようです。
今回カレンダーを表示して予定を入れるところまで挑戦してみました。

##完成図

##作成
こちらの記事を参考にさせていただきました。ありがとうございます。
[【忘却のJavaScript #3】Vue.jsでカレンダーを表示してみる](https://wing-degital.hatenablog.com/entry/2019/05/16/001013)

**１．vueプロジェクトの作成**

コマンドプロンプトから以下のコマンドを実行し、雛形

Node.js install for mac

何からNode.jsを入手したか忘れないためのメモ。

– [公式](https://nodejs.org/ja/download/)からLTS版mac用のinstallerをダンロードする
– installerを起動し、各設問をデフォルトのまま進めてinstallする
–
– nodeのバージョンを確認する

“`
$ node -v
v12.14.1
“`

– npm(パッケージマネージャ)のバージョンを確認する

“`
$ npm -v
6.13.4
“`

以上です。

参考:
https://jsprimer.net/use-case/setup-local-env/

Unity WebGL なゲームをNode.JS + jsdom + headless-glで動かしたかった

えっ このネタ続くの。。？

前回( [Unity WebGLで使われているシェーダを抜き出してARBアセンブリを眺める](https://qiita.com/okuoku/items/fe1840e88c93ec415e8b) )はWebGLビルドのUnityゲームをトレースして、使われているシェーダ命令があんまり多くないことを確認した。

ブラウザ上の動作では同期APIの実装に制約がありちょっと手を入れづらいため、Node.jsで動かしたかった。別案としてNW.jsを使うというのもあったが、今回の手法でもWebブラウザ側のDOMを使わないといけないところは一応クリアしている。

# 結果と手法

結局成功したんだか失敗したんだかよくわからないところまでは来たと思う。

## 結果

– Node.jsでもUnity WebGLは起動して描画コマンドも発行する
– でも描画がまっくらなので、まだ描画が正常かどうかは確認できていない

JSdomでWebAssemblyを使ったサイトがそのまま動くのは地味にすごい気はする。

## 手法

Node.jsにはWebAssemblyがあり

Express.jsコードリーディング

Express.jsのコードを読んでみたのでまとめることにしました。
普段の業務ではNode.jsもExpressも利用していないので、JavaScriptの基本的なコーディングやライブラリの内容なども合わせてまとめておこうと思います。
間違っている内容がありましたら編集リクエストをいただけますと幸いです。

## Expressコードリーディング
### 対象のコード
今回コードリーディングする対象のコードです。
ただHello Worldするだけのコードになります。

“`javascript:index.js
const express = require(‘express’)
const app = express()

app.get(‘/’, (req, res) => {
res.send(‘Hello World’);
})

app.listen(3000);
“`

nodeでindex.jsを起動します。
起動後curlでレスポンスを確認します。

“`console
$ node index.js
$ curl localhost:3000
He

Promiseとasync/awaitを使った同期処理

Node.jsを使ったプログラムを書いていて、同期的に処理してほしいところを全て非同期でやっちゃう可愛いnodeのおかげでいくつか勉強になったことをまとめる。

#同期処理を考える手順
###1.まずはコールバック関数を使う
まず最初に思いつくのはこれ。コールバックを使えば、処理1の値を使った処理2みたいなことができる。
が、簡単な処理に関してはこれで十分だが、処理が複雑になってくるといわゆる「コールバック地獄」と言われる見た目も処理も地獄のようなプログラムができてしまう。要はネストが深くなって何がなんだかよくわからなくなる。

“`sample.js
function 処理2{
callback(処理1)
}
“`

###2. Promiseを使う
そこで登場するのがPromise。こいつは結構優れもので、書き方を覚えてしまえばコールバック地獄を回避できる。
そもそもPromiseは何をしているかを簡単に説明すると、オブジェクト(引換券的なもの)を先に渡しておいて、resoleが返ってきた、つまり処理が終わればそのオブジェクトと結果を交換するよって感じ。
もっと砕いて言うと、

ejsの<%= >と<%- >の違い

htmlの要素として出力したいか、文字として出力したいかで使い分ける
→基本的には<%= %>で、子要素の出力を一緒に使いたいときには<%- %>を使用す

##そもそもEJSとは
ejsとはテンプレート機能を実現するNode.jsのパッケージです。

##1,<%= >
ejsに用意されている独自機能です。
このタグは、指定した変数の値を出力するものです。

“`
<%=変数 >
“`

##2,<%- >
ejsに用意されている独自機能です。
HTMLをエスケープ処理しないでそのまま出力する為のものです。

node.js製のlambdaアプリをコマンド一発でアップロードする方法

node.jsでlambdaのアプリを作っているのですが、コードやパッケージが増えてくるとインライン編集出来なくなったり、zipでアップロードする必要が出てきます。ちょっとした変更でもわざわざawsのサイトに行ってアップロードするのは面倒ですし、複数のlambdaアプリを作っていたら間違えて別の関数にアップロードしてしまった、といった事故も起きるかもしれません。そこで、コンソールからコマンドでアップロードできるようにする方法を書きます。

※動作確認環境: macOS 10.14.6

# aws CLIの設定

まずawsのCLIをインストールします。バージョンが出ればOKです。

“`
$ brew install python3
$ pip3 install aws
$ aws –version
“`

次にawsのユーザー情報を設定する必要がありますが、アクセスキーが必要になります。IAMでAdministratorAccessポリシーを持ったユーザーを作成しておきます。

[AWS]はじめてのIAMユーザ作成

アクセスキー、シーク

CentOS 8にNode.js 10をインストール（AppStream）

# はじめに

Application Stream(AppStream)を利用してCentOS8にNode.js 10をインストール
参考：[RHEL8のパッケージ構成 – BaseOSとApplication Stream – 赤帽エンジニアブログ]( https://rheb.hatenablog.com/entry/rhel8_baseos_and_appstream)

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux 8 Application Streams Life Cycle – Red Hat Customer Portal](https://access.redhat.com/node/4079021)より、2021-04がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

“`shell-session
# cat /etc/redhat-release
CentOS Linux release 8.1.1911 (Core)

# y

CentOS 8にNode.js 12をインストール（AppStream）

# はじめに

Application Stream(AppStream)を利用してCentOS8にNode.js 12をインストール
参考：[RHEL8のパッケージ構成 – BaseOSとApplication Stream – 赤帽エンジニアブログ]( https://rheb.hatenablog.com/entry/rhel8_baseos_and_appstream)

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux 8 Application Streams Life Cycle – Red Hat Customer Portal](https://access.redhat.com/node/4079021)より、2021-11がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

“`shell-session
# cat /etc/redhat-release
CentOS Linux release 8.1.1911 (Core)

# y

Express で簡単な WebAPI を作成

フォルダー構造

“`text
$ tree
.
├── app.js
└── routes
└── index.js
“`

“`js:app.js
//————————————————————————-
// app.js
//
// Jan/18/2020
//————————————————————————-
var express = require(‘express’)
var routes = require(‘./routes’)
var bodyParser = require(“body-parser”)
var cfenv = require(‘cfenv’)

var app = express()
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())