f@ctor

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

Node.js関連のことを調べてみた2021年02月25日
目次

Puppeteerでドラッグ&ドロップ

#はじめに
最近、フロントテストに[Puppeteer](https://pptr.dev/)というライブラリを用いているのですが、ドラッグ・ドロップの動作においてかなり苦戦をしたので、これ以上犠牲者を増やさないために（）、ここに解決策を共有したいと思います。
#Puppeteerでドラッグ&ドロップができない！
「Puppeteer drag drop」というように検索をかけると、大体下記のようなコードが出てきます。

“`Javascript
await page.mouse.move(x1, y1);
await page.mouse.down();
await page.mouse.move(x2, y2);
await page.mouse.up();
“`
座標(x1, y1)にカーソルを合わせ、掴む→(x2, y2)に移動し離すという意味のコードです。

しかしこれ…

**動作しません!!!!!**

正確に言うと、一瞬だけ対象物が動くんですけど、(x2, y2)まで移動してくれないんですよね…
調べてみると、このことに関して

元記事を表示

npmのグローバルインストールをするためにパスを通す方法

## はじめに

npmのグローバルインストールをするために、パスを通す方法を紹介します。

## npm i -g @vue/cli でエラー発生

Vue CLIの環境構築のために

`npm i -g @vue/cli`

を実行すると下記のエラーが発生しました。

`i` はインストール、 `-g` はグローバル、という意味です。
グローバルにインストールされたものは、どのディレクトリでも実行できるようになります。

“`
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/joi@15.1.1: Switch to ‘npm install joi’
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported

元記事を表示

【Windows】node-gyp ERRで困ったときの対処法

electronでディープリンク（Custom URL Schema）実装時に[electron-deeplink](https://github.com/glawson/electron-deeplink) を使おうと思ったのですが、そこでnode-gypのエラーが出て躓いたので、その時の対処法をメモします。
ディープリンクについては[electron-deeplink](https://github.com/glawson/electron-deeplink)を使って実装したら（少なくとも開発環境では）簡単にできましたので割愛します。

# 結論
Python や Visual C++ といった必要なものをインストールする

# エラー内容
`yarn add electron-deeplink`したところ、

“`
gyp ERR! find Python
gyp ERR! find Python Python is not set from command line or npm configuration
“`
とか、Pythonをインストールした後も

“`
gyp

元記事を表示

Visual Studio Code の Remote Containers でNodeの仮装環境を作成する

# 概要

Visual Studio Code (以下、VSCode）の Remote ContainersでNodeコンテナを作成し、仮装環境で開発する。

## 環境

本記事を記載時点でのバージョン等を記載する

* macOS Big Sur 11.2.1
* VSCode 1.53
* Remote – Containers v0.158.0

## 手順

1. Nodeを使用するフォルダを作成
2. VSCodeの“`New Window“`で新しいWindowを開く
3. “`Open folder“`で作成したフォルダを開く
4. コンテナ設定ファイルを作成する
4. 左下のRemote Containerのボタン(><が重なったようなマーク)をクリック 5. コマンドパレットが開くので、```Remote-Containers: Add Development Container Configuration Files...```を選択 6. ```Node.js```を選択 7. バージョンを選択（この記事では```14`

元記事を表示

SpotifyのDaily Mixでは物足りないあなたへ送るサービス

# 背景

以下のQiitaの記事を読み、私もSpotify APIを使ってみたくなりました?

– [Spotify Web APIで明るい楽曲のみのプレイリストを作成する](https://qiita.com/oekaki0v0/items/c8a7084b28f7943b70b2)

# Spotify-Extension-A
完成したサービスがこちらです。
`たった3step`で、あなただけのプレイリストが作成可能です?

– https://spotify-extension.shijimi.work/

CBORってなんだろう？

# CBORとは
Webサービスでよく使われるデータ交換フォーマットとして有名なものはJSONだと思います。
ただ、サイズが冗長なこともあり、バイナリとして表現しようと様々なものが生まれてきました。(例えば、MongoDBで使われるBSONなど)

=> そんな中、今後注目されそうなものが**RFC8949**でRFC化された**CBOR**です。

## 特徴
* JSONデータモデル「数値、文字列、配列、マップ（JSONオブジェクト）、およびfalse、true、nullなどの値」に基づいている。
* エンコードされたデータは自己記述的である。
* デコードのためのスキーマ記述は不要である。
* JSONを使用したい一部のアプリケーションでは、**暗号化キー**、**グラフィックデータ**、**センサー値**などのバイナリデータを転送する必要があります。
JSONでは、これらのデータをエンコードする必要があり（通常はbase64形式）、複雑さとかさばりが増します。
=> CBORでは、このバイナリデータをそのまま受け入れることができます。

一番の特徴は、CBOR自体がバイ

元記事を表示

M1 Mac での環境構築の最適解

#本記事の執筆に当たって
M1チップ搭載のMacが発売されましたが、アーキテクチャの違いで環境構築に戸惑いを感じた方も多くいるのではないでしょうか。私もその一人でした。本記事では**2020年2月20日**現在の状況下で最も優れていると思われる環境構築方法を紹介したいと思います。
#環境構築の上での方針
– できるだけ**ネイティブ環境**(**arm64**)で構築する。
– ネイティブ環境で動作が不安定になる場合はRosetta2を使用して**Intel環境**(**x86_64**)で構築する。
– アーキテクチャ間の切り替えはスムーズにできるようにする。

#本記事で環境構築する開発ツール・プログラミング言語
– Homebrew(**arm64/x86_64**)
– gcc(**arm64**)
– Nodebrew(**x86_64**)
– Node.js(**x86_64**)
– npm(**x86_64**)

**Homebrewに関してはパッケージ管理システムとしてネイティブ環境とIntel環境のどちらにも採用することとする。**

#前提

元記事を表示

【Express】Hello Worldを出力する

#プログラミング勉強日記
2021年2月22日
[一昨日の記事](https://qiita.com/mzmz__02/items/03c4bb839a5e5abe02a8)でNode.jsの3大フレームワークについて取り上げた。今日は、ExpressでHello Worldを表示する方法をまとめる。

#Expressを導入する方法
　Node.jsの開発環境が構築されていることを条件とする。Node.jsの環境構築がまだの人は[こちらの記事(Windows版)](https://qiita.com/mzmz__02/items/6cc53f06205fd11367bc)を参考に環境構築してみてください。
　npmを使ってExpressをインストールするだけで、Expressを導入することができる。

“`
$ npm install express
“`

#Hello Worldを出力する
　JavaScriptファイルを作成する。今回は`app.js`という名前のファイルを作成した。ポート番号を8080に設定してるので、今回は`http://localhost

元記事を表示

Google DriveのAPIをNode.jsから触るメモ

Google Drive API v3を触ります。
google-auth-token-generatorを使ってtoken.jsonの作成をしてみる版です。

> 以前書いた記事も参考に: https://qiita.com/n0bisuke/items/ff1479cd14e7a0c0be0c

## 環境

* Node.js v15.9.0

## credentials.jsonを取得

チュートリアルを参考にAPIを有効にし、credentials.jsonを手元に保存しましょう。

> https://developers.google.com/drive/api/v3/quickstart/nodejs

## google-auth-token-generatorでtoken.jsonを作成

google-auth-token-generatorを使うとパーミッションをつけたtoken.jsonを作成しやすいです。

> 利用イメージ
> ![](https://camo.githubusercontent.com/91dc29cde99aa2b53b192532

元記事を表示

【nodist】`npm i`実行時の`cb.apply is not a function`【Windows環境】

nodistが`.node-version`ファイルを参照したり、自分でNode.jsのカレントバージョンを変更したりすると、Node.jsと`npm`のバージョンがずれてしまうことがあります。

“`
npm ERR! cb.apply is not a function

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\*****\AppData\Roaming\npm-cache\_logs\yyyy-mm-ddTXX_XX_XX_XXXX-debug.log
“`

そういうときは、次のコマンドを叩くかnpmをインストールしなおして`npm`コマンドのバージョンをNode.jsのバージョンにそろえてあげます。

“`shell
nodist npm match
“`

これで無事に`npm`コマンドが利用できるようになります。
もしこれでも改善されない場合は、npmを再インストールしてください。

そもそも`nodist npm match`が実行できない場合はtake

元記事を表示

M1 Macでasdfを使ってnodejsをインストールしたい (2021/02/22時点)

M1 Macでasdfを使ってnodejsを動かそうとしたら微妙にハマったメモ。

asdfでnodejsをインストールしようとすると

“`bash
$ asdf install nodejs xx.xx.xx
“`

> Binary not found for version xx.xx.xx

のようなエラーが出る人向け。

# 結論

この記事を書いている2021/02/22時点では、M1 Macに対してnodejsの `arm64` バイナリが提供されていない。 このため、シェルが `arm64` で実行されている場合、 `arm64` のバイナリを取得しようとして失敗する。asdfを `x86_64` で実行することで、 `x86_64` のバイナリを取得できる。

nodejsのインストール時にarchコマンドでアーキテクチャを指定する。

“`
$ arch -x86_64 asdf install nodejs xx.xx.xx
“`

参考: https://github.com/asdf-vm/asdf-nodejs/issues/189#issueco

元記事を表示

Node.js でローカルファイルに書き込む

「いまさらこんな記事かよ」と思われるかもしれませんが意外と落とし穴にハマる事が多いのでケース毎にまとめておきます。

https://nodejs.org/api/fs.html

## 一気に書き込む場合

### エラーチェックの必要がなくて、データが書き込まれる間ユーザーを待たせることができる場合。

**writeFileSync** を使います。

“`
const fs = require( ‘fs’ )
fs.writeFileSync( ‘some.file’, ‘abc’ )
“`

### エラーチェックが必要であるか、データが書き込まれる間ユーザーを待たせることができない場合。

**writeFile** を使います。

“`
const fs = require( ‘fs’ )
fs.writeFile( ‘some.file’, ‘very long string’, er => { if ( er ) throw er } )
“`

3番目の引数にはエラーが渡ってきます。例えばファイルを`/some.file`のようにしてルートディレクトリに作

元記事を表示

JavaScriptでcsvダウンロードを実装する方法

#はじめに
フロント(React)でcsvダウンロードを実装する機会があったため、備忘録です。
どうぞご活用ください。

#実装

“`javascript

const handleDLcsv = async () => {
//アイテムの定義
const download_items = [
{‘id’: 1, ‘name’: ‘apple’, ‘price’: 100},
{‘id’: 2, ‘name’: ‘orange’, ‘price’: 120},
{‘id’: 3, ‘name’: ‘melon’, ‘price’: 800}
];
//csvヘッダー
const array_data = [[‘id’, ‘name’, ‘price’]];

//文字コード
const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);

//csv用データ作成
download_items.map((

元記事を表示

IoTデータの可視化サービス「Ambient」を試す（Node.js のパッケージを利用）

以前からサービスについて知っていたものの、クラウドサービスでのデータ可視化はあまりやってこなかったのもあり、まだ利用をしたことはなかった [IoTデータ可視化サービスの「Ambient」](https://ambidata.io/)。
（これまでは、HTML+JavaScript でグラフ描画ライブラリを使っての可視化をやってた）

今回、よく自分が利用しているデバイス・サービスで利用する場合はどうすれば使えるのかを見てみたり、実際に Node.js のパッケージを使ってデータの送信と可視化の部分を試してみたりしました（送ったデータはランダムに生成したダミーデータを利用）。

## Ambient の概要
既に [Qiita でもタグ](https://qiita.com/tags/ambient)があり、記事もいくつも書かれていたりしますが、自分の理解を深めるためにも以下の公式ページをざっくり見ていって、その内容をメモしてみました。

●Ambient – IoTデータ可視化サービス
　https://ambidata.io/

![構成図.jpg](https://qiita-im

元記事を表示

Node.jsのバージョン管理

①“`node –verion“` で現在のNode.jsのバージョンを確認。

②“`n ls-remote –all“`でダウングレード/アップグレードできるバージョンを確認。

③“`sudo n 12.0.0“`で指定のバージョンにダウングレード/アップグレードできる。

元記事を表示

npmでcb.apply is not a function エラーが発生した対処

備忘録として。

### 現象
npmで何かパッケージをインストールしようとすると、以下のようなエラーが発生。
npmをアップデートしろとのエラーだが`npm update`や`npm instal`が同じようなエラーで実行できない。

“`powershell
npm WARN npm npm does not support Node.js v15.9.0
npm WARN npm You should probably upgrade to a newer version of node as we
…
npm ERR! cb.apply is not a function
…
“`

### 環境
– Windows 10 pro
– Node.js バージョン 15.9.0 （Chocolateyからインストール）
– npm バージョン 7.5.3

### 原因
原因は、私の場合、昔にインストールしていたNode.js（アンインストール済み）のキャッシュが残っていたためのようでした。
npmのバージョンを`npm -v`で確認すると、本来7.5.3のはずが

元記事を表示

ZoomAPIを使って、ミーティングルームを作成してみる。（Create Zoom Meeting）

#この記事について
表題の通り、ZoomのAPIを使って、ミーティングルームを作成したときのメモです。
Node.jsを使って作成しました。
認証方法はOAuthを利用しました。

#ゴール
この記事では、2021年2月25日 10時~ １時間のミーティングルームを作成することをゴールとします。

#手順
１．「Zoom」アカウント作成
２．「Zoom API」利用のための事前準備
３．認証コードの取得
４．アクセストークンの発行
５．必要パラメータの作成
６．実行

##１．「Zoom」アカウント作成
まだアカウントを取得していない方は、下記にアクセスしてアカウントを作成します。
https://zoom.us/jp-jp/meetings.html

##２．「Zoom API」利用のための事前準備
２－１．クレデンシャル情報の取得
下記にアクセスします。
https://marketplace.zoom.us/
その後、右上の「Develop」から「Build App」をクリックします。

「Choose your app type」と聞かれるので、
今回は、「OAuth」の中の

元記事を表示

【Node.js】WindowsでNode.jsの環境構築をする

#プログラミング勉強日記
2021年2月21日
友人にNode.jsの環境構築を教えるために一度調べたので、そのやり方をまとめる。

#Node.jsをインストールする
　[Node.jsの公式サイト](https://nodejs.org/ja/)からNode.jsのインストーラーをダウンロードする。(今回は推奨版をダウンロードした。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/6d5719ab-a923-0b88-dbc5-8af1593facb7.png)

　インストーラーをダウンロードしたら、開いて実行する。その後指示にしたがtt進めていく。基本的にはそのまま`Next`をクリックして進めていく。最後に`Finish`を押して終了する。

#Node.jsのバージョンを確認する
　それぞれコマンドで下記を実行すると、バージョンを確認することができる。バージョンが表示されない場合は、インストールができていない。

“`
$ node ^v
$ npm -v

元記事を表示

HerokuでNode.jsのアプリからPostgreSQLに接続できない時の対処

N予備校 【2020年度】プログラミング入門 Webアプリ
[第4章24節 【サービス開発9】セキュリティ対策と公開]

Herokuの設定で詰まったので解決した手順を記載。

Database / GitHubのOAuthなどの設定を終えてHerokuのアプリを起動し、ログインをしようとすると下記のエラーが発生

“`
2021-02-21T03:05:26.710859+00:00 app[web.1]: Unhandled rejection SequelizeConnectionError: no pg_hba.conf entry for host “XX.XXX.XXX.XXX”, user “xxxxxxxxxx”, database “xxxxxxxxxxxx”, SSL off
2021-02-21T03:05:26.710870+00:00 app[web.1]: at connection.connect.err (/app/node_modules/sequelize/lib/dialects/postgres/connection-manager.js:1

元記事を表示

OTHERカテゴリの最新記事