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

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

“npm run generate”してもfaviconが変わらない時の対処法【nuxt.js】

# 1. バグ内容
以下のような流れでデプロイをしたのですが、「**Nuxtのデフォルトアイコンがファビコンとして表示されるエラー**」が起こりました。

1. `nuxt.js (vue.js)`でプロジェクトを作成(`SPA / PWA`で作成)
2. `favicon.ico`と`icon.png`をカスタムのアイコンファイルに変更
3. `npm run dev`でファビコンが変わっていることを確認
4. `npm run build`して、`npm run generate`して、静的フォルダ(`dist`)を生成
5. `firebase hosting`へデプロイ

ホスティングしたサイトのタブを見ると以下のようになりました。
変えたはずのファビコンがなぜかNuxtのデフォルトアイコンのままになっていました、、、。
default_favicon.pngNodejsのインストール方法(Windows)

まずはNode.js公式サイトへGO!
https://nodejs.org/ja/

![nodejs1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748651/567faf27-0dbc-ca9a-3f30-e21005f7bf88.png)

「LTS 推奨版」と記載された緑色の左のボタンをクリック!
そうすると下図のようなインストーラーがダウンロードされます!
インストーラークリックして起動!

![nodejs3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748651/eabe1b99-5858-f6f1-b232-7b1243ff6a42.png)

「Next」クリック!
![nodejs4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748651/4f0ef96c-687d-3497-fb09-d43a6e87

元記事を表示

package.jsonの構造

#プログラミング勉強日記
2020年10月7日
package.jsonをよくわかっていないままnpmを使ってインストールしてたので、この機会に構造を学ぶ。

#package.jsonとは
 依存関係を示したファイルで、このファイルにプロジェクトに必要なパッケージの名前とバージョンを記述すればnpmが必要なパッケージをインストールする。
 package.jsonはnode環境のアプリの設定が書かれたファイルみたいなもので、Bundlerのようなもので、開発に使う依存ライブラリと本番で使う依存ライブラリを書くことができる。

 (RailsのGemfileみたいなものなのかな、、?[こちらの記事](https://qiita.com/mzmz__02/items/c8f5337f2991ccdd5d4f)でRailsのGemfileやGemfile.lockについて扱ってます)

#構造

“`json:デフォルトの構造
{
“name”: “express-app”,
“version”: “1.0.0”,
“description”: “”,
“main”: “

元記事を表示

Apex UpでNode.js × expressをAWS Lambda, API Gatewayに速攻デプロイしてみる

# はじめに
Node.js × expressのAPIのデプロイ先としてLambdaを使おうと思ったのですが
手取り早くデプロイして試したかったので、Apex Upを使ってみた。今回はその時の備忘録

# Upとは
APIや静的ウェブサイトをLambda × API Gatewayに`up`コマンドでデプロイしてくれるツールです。

# 使ってみる

Upのインストール

“`
curl -sf https://up.apex.sh/install | sh
“`

プロジェクト作成

“`bash
mkdir node-up
cd node-up
npm init
entry point: (index.js) app.js # 自分はapp.jsに変更
“`

expressのインストール

“`bash
npm install express
touch app.js
touch up.json # Upの設定ファイル
“`

app.js

“`javascript
const express = require(‘express’)
const app = e

元記事を表示

mongoseでfindして、そのobjectに値を追加できない | node.js

lean()使うとできるようになる。

“`
Item.findById(req.params.id).lean().exec(function(err, doc) {

});
“`
“`
doc.new = “Hi”
“`

https://stackoverflow.com/questions/18554350/unable-to-add-properties-to-js-object

元記事を表示

【備忘録】WindowsでNode.jsをアップデートする方法

#プログラミング勉強日記
2020年10月6日
Node.jsのバージョンをアップデートするときに少し詰まったので備忘録として記録する。
Windowsではnが使えないので、今回はnodistを用いてNode.jsをアップデートした。

#0. nodistをインストールする
 コマンドプロンプトで`nodist -v`を実行してnoditが使えるかどうかを確認する。使えない場合は、インストールする。以下のようになっていればインストールはできている。

“`:コマンドプロンプト
>nodist -v
0.9.1
“`

 [こちらのページ](https://github.com/nullivex/nodist/releases)からインストーラーをダウンロードしてインストールする。

![1005.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/f46e18a2-3dc9-fb6a-c2a3-4ac68254ace0.png)

#1. Node.jsをインストールする
 次に`nod

元記事を表示

WebアプリへのLINEログイン実装で少しハマったところ

WebサイトへLambda+Node.js+APIGateWayを含めて、LINEログイン機能を実装しようとした。
参考にしたサイトが
**「WebアプリにLINEログイン機能を組み込む」**
[URL] http://xp-cloud.jp/blog/2019/11/27/6116/

非常に分かり易くて参考になったが、一部どうしても動かない(LINE認証画面が出てこない)為、エラーメッセージを眺めてみると、「stateが無い」といったことを言われているので、あらためて、LINE公式を確認すると

“`
“queryStringParameters”: {
“error”: “invalid_request”,
“error_description”: “‘state’ is not specified.”
},
“`

stateというパラメータは「必須」ということだった。

![20201006-1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509691/bef57cfc-93b9

元記事を表示

VagrantにHerokuを入れる際に起きたエラーと解決方法と参考記事

#はじめに
ドットインストールで構築したローカル環境でアプリを開発し、公開するため、いざherokuを入れようとしたらエラーが起きまくりました。
[【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】](https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39#%E8%87%AA%E5%88%86%E3%81%AE%E7%92%B0%E5%A2%83)
この記事を参考にしていました。
しかし、herokuを入れる際に、この記事の開発環境が全く違うため、その先に進めずエラーと戦うことになりました。

#パスがない問題
エラー解決に必死だったため、エラーのコピーは取っていませんが、このようなエラーがでたと思います。

“`
↓エラーの最後の文
Your path is missing /usr/local/bin, you need to add this to use this installer.
“`
`/usr/local/bin`のパスが無いと言われているため、パスを作る必要があ

元記事を表示

Amazon Echo で Google Drive 上の mp3 を 再生する (その2)

# はじめに

[前回の記事](https://qiita.com/hokonin/items/7c497a9537032dbb7a46) のコード部分を説明します。
AudioPlayer のリファレンスは[こちら](https://developer.amazon.com/ja-JP/docs/alexa/custom-skills/audioplayer-interface-reference.html)。

# AudioPlayer の使い方(考え方)

プレイリストの曲をすべて再生することだけを考えるなら、最初に全ての曲をキューに登録してしまうという使い方もあります。しかし後に実装する次の曲、前の曲、シャッフル再生などは任意のタイミングで指示され、登録していたキューが無駄になることもあるため、以下の考え方で使用します。

* キューには 1 曲しか登録しない
* 次の曲、前の曲、曲の終了、などのリクエストにより、次に再生する曲をキューに入れ替え登録する
(再生中の曲をそのままに登録する方法と、再生中の曲を含めて入れ替える方法があり使い分ける)
* 機能に必要な情報はトー

元記事を表示

node.js ✖️ express.js ✖️ mysql のwebアプリheroku公開までの方法

#この記事でできること
node.jsとexpress.js, mysqlを使用したアプリをherokuで公開することができるようになる。
特にnode.jsをherokuでデプロイする時にどうmysqlと接続すれば良いか、かなり詰まったのでこの記事
にまとめる。

#参考記事

基本のデプロイの参考記事
[Vue.jsで作ったアプリをHerokuにデプロイ](https://qiita.com/kottyan/items/dbc1edb82e8562235fac)

herokuでアップロードするファイルでmysqlを使用する場合の参考記事
①[Tutorial: How to Create a MySQL Database with Heroku](https://www.youtube.com/watch?v=aEm0BN493sU)

②[Connecting MySql and NodeJS on a Heroku Server (Github code)
](https://www.youtube.com/watch?v=2OGHdii_42s)

①はherokuでc

元記事を表示

パッケージ管理ツールであるnpmについて解説します

今回は、パッケージ管理ツールであるnpmについて解説します。

npmはNode.jsのパッケージを管理するものです。従って、まずはNode.jsが何者なのかを簡単に説明します。

##Node.jsとは
結論から言うと、サーバーサイドで動くJavaScriptです。
クライアント側とサーバー側で同じJavaScriptで書けることは、パフォーマンスの向上に繋がります。

##npmとは
npmの正式名称は Node Package Manager です。
つまり、Node.jsのパッケージを管理するツールです。

##代表的なパッケージ例

– Express
– promise
– async
– Socket.io

中でもExpressはNode.jsのWebアプリケーション開発で利用できるMVCフレームワークであるため、Webアプリケーションを効率的に開発することが可能です。

##npmの使い方
######動作確認方法
######実行するコマンド

“`
npm –version
“`

######表示された結果

“`
6.14.8
“`

######パ

元記事を表示

Node.jsを介してWeb経由でICOS(IBM Cloud Object Storage)上の画像ファイルを参照する

#やりたいこと
てっとり早く、以下2点を実現したいときの方法を記載しています。
・ICOS上にあるファイルを、Node.js上のWebアプリから参照できるようにしたい ※1※2
・ファイルは認証した人だけに見えるようにしたい ※3

※1 ICOS上の画像ファイルをimgタグのsrcとして利用可能にするなど。
※2 単にWebサイトをホスト(ICOS上のhtmlファイルでサイトを公開)したい場合は、NGINXを立てれば良いようです。
 参考.NGINXを使用した静的コンテンツの提供
 https://www.ibm.com/cloud/blog/static-websites-cloud-object-storage-cos
※3 インターネット上に公開して良いファイルであれば、バケットごとパブリック・アクセスを許可すればOK
 参考.パブリック・アクセスの許可
 https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-iam-public-access

 参考.IBM Cloud Obje

元記事を表示

symbol-testnet-bootstrap (v0.9 以前)→ symbol-bootstrap (v0.10) update shellscript

※Symbol testnet node 自動構築 shellscript
https://qiita.com/dusanjp/items/7d1b82a18c97d7058f4b
を使用して testnet node を構築した node 向けです

これは 旧symbol-testnet-bootstrap(v0.9.6.4 含むそれより以前)で
動作している testnet node 用の symbol-bootstrap(v0.10 以降)への
update script です
OSの再インストールは 必要ありません

各々の設定している user名とパスワードで sshd portより ログインしたら
そのままの ディレクトリ に置いて 実行して下さい
実行後 IP と friendlyname を聞いて来ますので 入力してください
[Y/n] が出たら “y” です

保存するfile名は 何でも良いですw

#!/bin/bash

#input ip
echo “please input ip”
read ip

#inp

元記事を表示

FFmpeg 画面を分割して複数動画を合成する

# 実行環境

Node.jsでの実行を想定しているためJavaScriptコードになります。
コマンドラインで同様のコマンドを打てばNode.js以外でも実行可能です。

# 画面の分割と複数動画の合成

画面を4分割して、左上、右上、左下に動画を合成した場合の例です。

“`javascript
const { execSync } = require(‘child_process’);

function overlay(input1, input2, input3, output)
{
const stdout = execSync(`ffprobe -i ${input1} -show_streams -print_format json`);
let streamInfo = JSON.parse(stdout);
// 幅、高さを取得
let width = streamInfo.streams[0].coded_width;
let height = streamInfo.streams[0].coded_height;

元記事を表示

FFmpeg 動画の前後に無音黒画面を挿入

# 実行環境

Node.jsでの実行を想定しているためJavaScriptコードになります。
コマンドラインで同様のコマンドを打てばNode.js以外でも実行可能です。

# 動画の先頭に無音黒画面を挿入

“`javascript
const { execSync } = require(‘child_process’);

function Insert_haed_blank(input, duration, output)
{
execSync(`ffmpeg -i ${input} -vf tpad=start_duration=${duration}:color=black -af “adelay=${duration}s:all=1” ${output}`);
}
“`

### パラメータ
– input:入力動画パス
– duration:挿入する無音黒画面時間(秒)
– output:出力動画パス

### コマンド内容

`-vf tpad=start_duration=${duration}:color=black`がvideo、
`-af “adela

元記事を表示

commander.js でシェル風のCLIツールを作る

Node.jsではCLIツールを作る手段として、`commander.js`や`inquirer.js`が使える。ここでは、`commander.js`を使ってシェル風のCLIツール(mkdir, rmのようなコマンドを打って操作する)を実現してみる。なお、定型的な作業を、ユーザに質問しながら実行するCLIツールを作る場合は`inquirer.js`を使った方が良さそうだが、ここでは扱わない。

# コマンド本体
事例として、文字列を追加・削除・表示するコマンドを作成した。`push`は文字列を配列に文字通りpushする。`pop`は最後にpushした文字列から取り除く。`show`は配列内の文字列を表示する。`exit`はプログラムを終了して、コマンドプロンプトに戻す。

これらのコマンドは、そのまま`program.parse()`を実行しただけでは、1回コマンドを実行してプログラム自体が終了してしまいあまり意味がないので、シェル風にする工夫を付け加える。

“`index.ts
import { createCommand } from ‘commander’;

const

元記事を表示

JSエコシステムぶらり探訪(3): npmとyarnとnode_modules

前回はNode.js単独での機能に焦点をあてて説明しましたが、Node.jsはnpm/yarnなどのパッケージ管理システムと組み合わせて使うことが想定されています。本稿ではライブラリの依存解決としての側面を中心に、npm/yarnの挙動を説明します。

[←前](https://qiita.com/qnighy/items/067dd47c48b96e772a4e) [目次](https://qiita.com/qnighy/items/16fdd8e58309a1f706a0)

## モジュールからパッケージへ

モジュールは、JavaScriptプログラムを複数のファイルに分割し、必要に応じてロードする仕組みでした。 (1ファイル = 1モジュール)

一方**パッケージ**は、複数のモジュールファイルをまとめて1つの独立した単位として扱う仕組みです。パッケージというより大きなまとまりを作ることで、バージョン番号を付与し、パッケージをパッケージレジストリに登録し、依存管理をすることができるようになります。

## Node.jsと `package.json`

パッケージはおお

元記事を表示

ALB + Lambdaでお手軽3分ベーシック認証

## 概要

ALBのリスナールールの変更とLambdaの追加でベーシック認証を行います。

ベーシック認証の処理の流れとしては以下となります。

– ALBで`Authorization`ヘッダーを検証する
– 認証OKであれば、正規のターゲットグループに転送する
– 認証NGであれば、Lambdaをターゲットとするターゲットグループに転送する
– Lambdaではベーシック認証を要求するレスポンスを返す(なお、ALBからのヘルスチェックに対しては`200`を返すようにします)

## 1. Lambda関数の作成

まず、ALBが存在するリージョンで、Lambda関数を作成します。

– `一から作成`を選択
– 関数名を入力(今回は`BasicAuth`とします)
– ランタイムは`Node.js 12.x`を選択
– 実行ロールは`基本的な Lambda アクセス権限で新しいロールを作成`を選択
– VPCは特に何も選択しない
– `関数の作成`ボタンを押下

![Lambda関数の作成](https://qiita-image-store.s3.ap-northeast-1.

元記事を表示

Jestで関数から呼ばれてる関数をspyOnする

関数の中で呼んでる関数を`spyOn`するのにかなり手こずったので、やり方を残しておきます。

## 確認環境

| 環境 | バージョン |
| —- | ———- |
| Node.js | 12.18.3 |
| Jest | 26.4.2 |

## やりたいこと

以下の実装のときに、`parentFunc()`を呼んだ時に`childFunc()`が呼ばれることをテストしたいだけです。

“`javascript
function parentFunc() {
console.log(‘called parentFunc’);
childFunc(‘XXXX’);
}

function childFunc(param) {
console.log(`called childFunc ${param}`);
}
“`

## 各ケース紹介

### Case1 そもそも構文がおかしい

テストするためには関数を export する必要がありますが、愚直過ぎて構文的に実行不能になるケースです。

“`javascri

元記事を表示

LINEボットでゲームブックを作った、ついでにシナリオエディタ作ったので完成

前回の投稿( [LINEボットでゲームブックを作ってみた]( https://qiita.com/poruruba/items/28c1c4ba95c4eaf2b739) )で、ゲームブックを作ったのですが、ついでにシナリオエディタも作りました。
これで完成です。

画面はこんな感じです。

シナリオ作成画面です。
テキストを入力したり選択肢を入力したり、背景画像を決めて、重ね合わせる人物画像を指定したりします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/e38b8379-01ea-2879-a143-cda54c562be5.png)

こっちが、画像ファイルのアップロード画面。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/cc9f43c1-4691-f653-bd45-ca69f9b8bb5f.png)

こっちが、音声ファイルのアップロード画面。

元記事を表示

OTHERカテゴリの最新記事