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

Docker & Node.js & Socket.io & NGINXでよくあるエラー

# エラー内容
タイトルの構成でアプリケーションを作っていた時に以下のエラーが出てつまずいた

`socket io failed: Error during WebSocket handshake: Unexpected response code: 400`

# 何故起きたか

WebSocket接続のハンドシェイク時に `HTTP/1.1 101 (Switching Procotols)` というステータスコードと `Hop-by-Hopヘッダ` を使用してWebSocket通信への切り替えを行う仕様に `Nginx v1.3.13` から変更されたらしい。

>Since version 1.3.13, nginx implements special mode of operation that allows setting up a tunnel between a client and proxied server if the proxied server returned a response with the code 101 (Switching Proto

インスタンスが起動したら自動的にNode.jsアプリが起動するようにする

# Node.jsアプリの自動起動をしたい

## はじめに

AWSでインスタンスを再起動するたびにアプリケーションを再起動するのが非常に面倒だったため、インスタンスが起動したら自動的にアプリケーションが起動するようにしました。

今回はPM2というプロセスマネージャーを利用してアプリの自動起動を行う方法を、作業メモを兼ねて紹介します。

## PM2とは

PM2はデーモンプロセスマネージャーです。

プロセスをデーモン化しておらず、シェルを抜けたらアプリケーションが終了していた、といった経験はみなさんあるのではないでしょうか。

PM2を利用するとプロセスをデーモン化することで、アプリケーションを起動した状態に保つことができます。

そのため、Node.jsアプリケーションの本番運用などに利用されているようです。

公式サイト: [PM2](https://pm2.keymetrics.io/)

## 導入

下記コマンドでインストールできます。

Node.jsやnpmは事前に[nvm](https://github.com/nvm-sh/nvm)などを利用してインストー

Electronで作業中に使えるアプリを作っていたら残像が残った話

#症状
displayをnoneとした要素の影がついたままになって残像が残ってしまっていた(Macのみの症状)

“`javascript
dom.style.display=”none”;
“`
としましたが、

↓dislpay:none;

**残像が残っている！**

これは困りましたね(困惑)

調べて

Node.jsとMeCabで漢字・ひらがな・カタカナ辞書順ソート

Node.js, MeCabを使用した日本語の辞書順ソート用compare関数を実装しました。
漢字、ひらがな、カタカナに対応しています。

`String#localeCompare()` は概ね辞書順に動きますが、濁音半濁音を無視します。
これを補完し、漢字の読みにも対応しました。

コード全体はこちらにおいてあります。

https://gist.github.com/sujoyu/b93e83596e6de9142933ce7cc9cd711b

#必須環境

– Node.js
– MeCab

“`
$ npm install is-windows encoding-japanese –save
“`

# 使い方
“`js
const Comparator = require(‘./japanese-comparator’)

const list = [‘b’, ‘a’, ‘2’, ‘1’, ‘+’, ‘-‘, ‘-2’, ‘あがき’, ‘悪’, ‘赤城’]
// get関数は引数なしでも動作しますが、リストを渡してキャッシュを作ったほうが早くなります
cons

EC2にyumでnodejsをインストールしようとしたらできなかった話

#はじめに
右も左も分からない状態で、AWSにRailsアプリをデプロイする過程で躓いたときの話
##epel（？）レポジトリが見つからないと言われエラーになる。
リポジトリが見つからないと言われる。

“`:実際のコード
[tatsuki@ip-10-0-0-85 ~]$ sudo yum install nodejs npm –enablerepo=epel
[sudo] tatsuki のパスワード:
読み込んだプラグイン:extras_suggestions, langpacks, priorities, update-motd

Error getting repository data for epel, repository not found
“`
##epelリポジトリをインストール
epelリポジトリインストールについて調べ、以下を実行。

“`
[tatsuki@ip-10-0-0-85 ~]$ yum -y install epel-release
読み込んだプラグイン:extras_suggestions, langpacks, priorities

1行でコールバックをawaitする簡易Promisify

`Util`を`require`するほどでもないときに使うイディオム。

“`javascript
const buffer = await new Promise((ok, ng) => fs.readFile(path, (err, res) => err ? ng(err) : ok(res)))
“`

[こちら](https://qiita.com/suin/items/99aa8641d06b5f819656)を見て反射的にアウトプット^^;

`~Sync`使えよって話ですが非同期に統一したいもので。

Spotify Web API を Node.js で弄ってみる

# Spotify Web API を Node.js で弄ってみる
Spotify に Web API があるのを知ったので node.js で試してみた手順まとめ。

## Web API Tutorial
[Web API Tutorial](https://developer.spotify.com/documentation/web-api/quick-start/) を参考にすすめていく事にします。

### Dashboard を有効にする。
[Dashboard](https://developer.spotify.com/dashboard) にアクセスして Spotify アカウントでログインして Dashboard を有効にする。下のような画面が表示されるはず。
Electronインストール for Ubuntu18

Ubuntu18 PCへのElectron環境インストール手順とサンプルアプリの実行方法をまとめています。

## Electron環境構築

Node.js等の必要なパッケージ類をインストールします。

““
$ sudo apt install nodejs
$ sudo apt install npm
$ sudo apt install libappindicator1
““

Electron本体（中身はChromium + Node.jsライブラリ群）はグローバルな環境にパスを通してインストールしておきます。

““
$ sudo npm install electron -g
““

## サンプル実行
#### Quick start Electron demo app
よく出てくるElectronのクイックスタートサンプルです。

“`
$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install
$ npm s

Google Cloud Storageで画像操作したメモ

画像uploadするにはどうすればいいんだろう
いろいろな記事を参考にしてみた
うまくいかない？
ちょっと！よくよく見るとこの記事、[リファレンス](https://googleapis.dev/nodejs/storage/latest/Bucket.html#upload)に書かれてるものとオプション名違ってるじゃん！そりゃ期待通り動かないよ！
ってことがあったので、メモっておきます。

# 前提
– google cloud storage+nodejs
– キーを取得済み ()

# upload
“`js
const {Storage} = require(‘@google-cloud/storage’);
const storage = new Storage({
projectId: ‘hogehoge-project’,
keyFilename: ‘./serviceAccountKey.jso

PuppeteerでWebスクレイピングしてハマったところをまとめてみた

## 備忘録
`Puppeteer`を使ってWebスクレイピングをやっていた時にハマったことを整理しておく。

### インストール編
`Puppeteer`がそもそも起動しなくて困ったことがあった。

#### puppeteerが動作しない（Ubuntu）
初めてpuppeteerを起動した際にChromiumが立ち上がらなかったことがあった。
ログにhttps://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md にアクセスしてみろと書かれてたのでアクセスしたら、どうやらパッケージをインストールする必要があるとのこと。
端末に以下のパッケージが抜けてないか確認し、必要に応じてインストールする必要があるらしい。

“`
gconf-service
libasound2
libatk1.0-0
libatk-bridge2.0-0
libc6
libcairo2
libcups2
libdbus-1-3
libexpat1
libfontconfig1
libgcc1
libgconf-2-4

Node.jsでSOAP Clientを生成する際のoverridePromiseSuffixオプションについて

[公式のgithubに書いてある](https://github.com/vpulim/node-soap#options)んだけど、備忘のために記載する。

node-soapでクライアントを生成すると、自動で「（オリジナルメソッド名）＋Async」という非同期用のメソッドが生成される。
が、対象となるWSDLに「（オリジナルメソッド名）」「（オリジナルメソッド名）＋Async」の２種類がもともと定義されてると、node-soapが作ろうとする「（オリジナルメソッド名）＋Async」と元の定義がぶつかってエラーになってしまう。
このための回避オプションとして`overridePromiseSuffix`というのが用意されている。
`overridePromiseSuffix`でnode-soapがつくるメソッドのSuffixを書き換えることができる。

“`
let option = {
overridePromiseSuffix:”Async2″
};
let client = await soap.createClientAsync(wsdl_url ,

コピペ爆速で各言語環境を構築する方法

とりあえずさくっと言語環境だけ入れたいことはままある。ググるのすらめんどくさい！なので、各言語ごとにコピペ(大事!)で出来る環境構築方法をまとめる。※随時更新予定

# 対応言語
– Node.js
– Ruby

# Node.js
“`
git clone git://github.com/creationix/nvm.git ~/.nvm
echo ‘source ~/.nvm/nvm.sh’ >> ~/.bashrc
nvm help
nvm ls-remote
nvm install v10.16.3
node -v
npm install yarn -g
“`

# Ruby

“`
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
echo ‘export PATH=”$HOME/.rbenv/bin:$PATH”‘ >> ~/.

【簡単】GitHub Actionsを使って静的ファイルをFirebase Hostingにデプロイをする【PlayCanvas】

GitHub ワークフローを使用してPlayCanvasのプロジェクトをFirebase Hostingにデプロイをする方法を紹介します。

### PlayCanvasとは？

PlayCanvasは、インタラクティブなウェブコンテンツ用のビジュアル開発プラットフォームです。作成するツールとウェブアプリは、どちらもHTML5を使用しています。 プラットフォームはウェブでホストされているため、インストールするものは何もなく、対応されているウェブブラウザを実行する任意のデバイスからアクセスできます。

[https://developer.playcanvas.com/ja/user-manual/introduction/](https://developer.playcanvas.com/ja/user-manual/introduction/)

### GitHub Actionsを使用する

GitHubのリポジトリで「Actions」を選択します。
![1-2440c1b3-78e0-4618-a30d-39c1ea0da573.png](https://qiita-ima

bot用フレームワークなしでslack botを作る

# はじめに
以前slack botを作ろうとbotkitを用いて作成していたのですが、herokuで稼働した時にちょっとした問題があったのでbotkitなしでslack botを作った際の知見を共有したいと思います。
*記事書くのは初めてなので拙いと思います。

# botkitとherokuの問題点と解決策
問題は2つ
1. botkit内でexpressを使用しているため、1つのプロセス内に他の機能を盛り込めないこと
2. herokuの無料枠では1つのプロジェクトにつき1つのプロセスしか動作できないこと

この2つがいい感じに噛み合ってしまい、slack botの機能と外部に提供するAPI機能の両立ができないのです。
この問題の解決策として、機能を追加するための利便性とbot稼働とAPIサーバを両立するためにはbotフレームワークなしで自作するという考えに至りました。
自分でexpressを立てればbot以外の機能を盛り込みつつ、1つのプロセスで動かすことができるからです。

# 環境
Node.js (v11.11.0)
ESMAScript2015

Babel

【Firebase】Cloud FunctionsとVideo.jsで簡単にストリーミング動画配信する

Firebase Cloud FunctionsとVideo.jsで動画のストリーミング配信に挑戦してみました。

node.jsとExpressでサーバーを作り、htmlファイルを用意し、Video.jsを使いsafari以外のブラウザでHLSを再生できるようにします。

（この記事はざっと書き上げたので、細かい部分説明は追記で書き足していきます。。）

まずExpressは割愛するとして、ともかくNode.jsのRequestモジュールを利用して実装しますのでインストールします。

#Requestのインストール
“`
$ npm install –save request
“`

Requestには、HTTP通信を行うために必要で便利なモジュールがたくさん入っています。

**Request – Simplified HTTP client**
[https://www.npmjs.com/package/request#streaming](https://www.npmjs.com/package/request#streaming)

ここでのストリーミングは、データ

WebComponents だけでアプリの骨格を作ってみる

# はじめに

WebComponents、何がいいかというとブラウザでネイティブに対応してるとこですね。

そろそろ本家、3rdパーティーともライブラリが充実してきて、Vue とか React とかのフレームワークを使わずに WebComponents だけでいけそうな感じになってきたので、とりあえず下のようなアプリの骨格を作って検証してみます。


オフィシャルの [material.io](https://material.io) の [GitHub](https://github.com/material-components) にはメジャーな

* material-components-android
* material-components-ios
* material-components-

[養老乃瀧ハッカソン2019]ひたすらビールを注文するコースターを作った

# 目次
– はじめに
– 機能概要
– 実装コード
– 感想と反省点

# はじめに
◆飲み会で、周囲の人のグラスが空いていたら、「何か飲まれますか？」と聞いて飲み物を注文せねばならぬ。
◆俺はただ、ビールが飲みたいんだ！飲む物は決まってるんだから注文せずにズッて持ってこいや！

って思うこと、ありませんか？

少なくとも、私は常々思ってます。
なので、空いたグラスをドッと置いたらビールがズッと来るデバイスを作れないだろうかと思って、実際に作りました。
また、居酒屋にあると嬉しい(主に私が)ので、養老乃瀧ハッカソン2019で発表してきました。

# 機能概要
タイトル：自動お酒注文コースター「飲ま飲まWay！」

ESLint v6.6.0

前 [v6.5.0](https://qiita.com/mysticatea/items/195aa1f585a31b2153f2) | 次 (2019/11/23 JST)

ESLint v6.6.0 has been released: https://t.co/oHo5t86A0k

— ESLint (@geteslint) October 25, 2019

ESLint `6.6.0` がリリー

アプリエンジニアがNode.jsに入門してみる(概念理解、導入、HelloWorldまで)

## 背景と目的
エラー監視にNode.jsが使用されていたからです。私の所属するチームではアプリで発生したエラーをslackに通知する形でエラー監視を行なっているんですが、その実現にNode.jsを使用していました。今後通知するエラーの条件変更などを行う際にNode.jsとサーバサイドの知識が必要になるので、Node.jsの基本的な使い方と導入方法について理解しようと思いました。
じゃあ早速中身に入っていきましょう！！

## 1.Node.jsとは？

[Node.js公式サイト](https://Nodejs.org/ja/)
公式では以下のように説明されています。

> Node.js® は、Chrome の V8 JavaScript エンジン で動作する JavaScript 環境です。

**わけがわかりませんでした。**
Node.jsとは何かを理解するより先に、Node.jsで何ができるのかを調べてみます。
こちらのサイトが分かりやすかったです。
[フロントエンドエンジニアにおけるNode.jsのススメ](https://ameblo.jp/ca-1pixel/ent

GulpのBrowsersyncで立ち上げたローカルサーバに、スマホからアクセス出来ない時

# 概要

ブラウザの自動リロードを実現してくれる`Browsersync`という便利なプラグインがあり、ローカルIPアドレスでサーバーを立ち上げる事が出来ます。

同じLANネットワークの端末からアクセス出来るので、スマホ・タブレットでの表示確認に便利です。

割り当てられるIPアドレスは自動であるため、**ホストOSに複数のIPアドレスが割り当てられている場合、想定したIPアドレスが割り当てられず、同じLAN内の端末からアクセス出来ない**ケースに遭遇しました。

仮想ソフトを導入し、複数のNICが割り当てられているローカル開発環境も多いと思いますので、そのようなケースで**特定のIPアドレスを割り当てる方法**をメモしておきます。

# 同じLAN内の端末からアクセス出来ない例

私の環境の場合、`192.168.56.1`という、本来デフォルトゲートウェイ（ルータ）に割り当てられるようなIPアドレスでサーバーが立ち上がり、同じLAN内の端末からアクセス出来ない状況でした。

## このIPアドレスは何なのか

**VirtualBox**を導入してゲストOSを立ち上げた時に、ホ