- 1. Node.jsのCLIツールでURLを既定のブラウザで開く
- 2. socket ioでビデオ通話+ユーザー名表示
- 3. コスパ最強IoT家電！TPLink製品をRaspberryPiから操作
- 4. node.js Firebase Functionで作ったGoogle Chat BotでChatからのリクエストであるかの検証を行う
- 5. ESLint7系を使っていると「TypeError: createRequire is not a function」が出る
- 6. virtual背景のロジックをnpm パッケージ化した件
- 7. Nodejs用のモデルライブラリを作ってみた【Express】
- 8. JavaScriptワンライナー #1 任意長のランダムな文字列を作る
- 9. TypeScriptでFormDataを良い感じに受け渡ししたい
- 10. Node.js のバージョン管理を nodebrew で行った際、VS Code に反映されなかった
- 11. Promise.all()内で軽率にawaitしてはいけない
- 12. Node.js（データベースを用いたWebアプリケーション）
- 13. 【JWT（JSON Web Token）】Node.jsで実際に使ってみた
- 14. Node.jsの基本的な使い方
- 15. Express+MySQLでログインする
- 16. CloudFunctionsで一定時間経過後に処理を実行する方法
- 17. Node.jsでルーティングを行う方法と、やってはいけないこと
- 18. Alibaba Cloud API Gateway を使ってみる
- 19. Javascriptで学ぶHTTP通信
- 20. Rails 6+Webpacker で Yarn, Node.js 環境をHerokuでもMacでも同じにする
Node.jsのCLIツールでURLを既定のブラウザで開く
[open](https://www.npmjs.com/package/open) パッケージを使用すると、クロスプラットフォームでその辺の処理をよしなにやってくれる。
実行したらlocalhost:3000にHTTPサーバを立てたり、実行時にライセンスなどを表示したりするようなCLIツールで便利かもしれない。## Install
“`sh
yarn add open
“`## Usage
非常にシンプル。
“`js
const open = require(‘open’);open(‘https://qiita.com/’);
“`async/await を使用した実用的な例などは [README](https://www.npmjs.com/package/open) を確認されたい。
なお、従来は[opn](https://www.npmjs.com/package/opn)という名称だったものがrenameされたらしい。
socket ioでビデオ通話+ユーザー名表示
# Zoomにあるようなビデオ映像に名前を入れて欲しい…
以前に作成した[socket.io にセッション情報を渡す](https://qiita.com/4201tosiyuki/items/80ee553ac42eeb323859)と[Express+MySQLでログインする](https://qiita.com/4201tosiyuki/items/7ece29ed48b49efcbe59)の続編です。改めて、このプログラムを書いた経緯です。
1. 自社ネットワーク内でビデオ通話をしたいという相談をうける
2. [hidden.in](https://qiita.com/ukiuni@github/items/a1372fac50a4ece1d5e8)を見つける
3. これは便利だと感動し、セットアップする
4. ユーザー名（支店名）を表示して欲しいと相談をうける
5. Node.jsを勉強するこのような経緯で今に至っております。
冒頭に紹介した記事で、MySQLにユーザー情報を保存しておき、passportモジュールを読み込み、ログイン判定をする。というところまでが
コスパ最強IoT家電！TPLink製品をRaspberryPiから操作
#TPLinkとは？
ルータを主力とする中国・深圳のネットワーク機器メーカーです。
近年はスマート電球、スマートプラグ等のIoT家電に力を入れており、コスパの良さからAmazonで独自の地位を築いています。
[スマートプラグのHS105](https://www.amazon.co.jp/Alexa%E8%AA%8D%E5%AE%9A%E5%8F%96%E5%BE%97%E8%A3%BD%E5%93%81%E3%80%91-%E7%9B%B4%E5%B7%AE%E3%81%97%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%B3%E3%83%88-Google%E3%83%9B%E3%83%BC%E3%83%A0%E5%AF%BE%E5%BF%9C-%E9%9F%B3%E5%A3%B0%E3%82%
node.js Firebase Functionで作ったGoogle Chat BotでChatからのリクエストであるかの検証を行う
皆さんこんにちわ。Chat Bot作ってますか？まだApps Scriptで作ってますか？
このごろは外部のG SuiteテナントユーザーともやりとりできるようになったGoogle Chat。
Apps Scriptのままじゃテナントまたげません[^1]。
やっぱりFirebase Functionsでしょう！ (Cloud Functionsもほぼ同じ)…ってことでCloud Functionsをnode.jsで作り始めると、開発ドキュメントの「[Verifying bot authenticity][1]」でGoogle Chatからのリクエストかどうかを検証するためのサンプルコードが書かれていることに気づきます。
この対策をしないと、Bot Function URLが知らんやつに知られたら、Bot messageのsender情報を偽装されちゃうかもしれません。Botでユーザー情報を保持していてメッセージよって返すようにしていたら、その情報が抜かれちゃいます。そりゃまずいってことでサンプルのとおりに実装しようとしたところ…### node.jsでBot Function作
ESLint7系を使っていると「TypeError: createRequire is not a function」が出る
# 概要
**ESLint 7** 系と**Node.js 12未満**をつかっていると以下のエラーがでる場合がある
> ESLint 7 がサポートしている Node.js バージョンは ^10.12.0 || >=12.0.0 となっています
↑だそうです。（コメントありがとうございました）
“`
TypeError: createRequire is not a function
Referenced from: /something/.eslintrc
at Object.resolve (/something/node_modules/eslint/lib/shared/relative-module-resolver.js:28:20)
at ConfigArrayFactory._loadExtendedShareableConfig (/something/node_modules/eslint/lib/cli-engine/config-array-factory.js:854:39)
at ConfigArrayFactory._l
virtual背景のロジックをnpm パッケージ化した件
### はじめに
先日、自分史上初めてnpmのパッケージを作成したので、記録として作業の流れを残しておくものです。
新しい情報は少ないかもしれません。
作成したパッケージは以前紹介したvirtual背景のコンポーネントです。https://qiita.com/wok/items/962929e63bc98e4033b9
もしよかったら使ってやってください。
### 概要
Typescriptを用いた環境でnpmパッケージを作成してpublishするまでの流れです。### 前提
– npmのアカウントは作っておく。
– githubのアカウントとリポジトリは作っておく。
– 作成したgitリポジトリをクローンして、そのディレクトリに移動している状態。### 作業の流れ
まずはじめに、npmの環境設定とログインをしておきましょう
Nodejs用のモデルライブラリを作ってみた【Express】
#リポジトリ
https://github.com/kbc18a11/oreoreExpress
ライブラリ本体は`oreoreExpress/database/AbstractModel.js`です。#解説用の構成や注意点
– FW：Express
– ディレクトリ構成：WebStormの新規Expressプロジェクトの状態に`プロジェクト名/database`と`プロジェクト名/model`というディレクトリを生成
– 本記事はチーム開発のメンバーのマニュアルとしても書いていますので、ライブラリには直接関係ないことも書いています。今回利用しているtestsテーブルは以下の構成になっています
| id | text | created_at | updated_at |
|:—|——|:———-:|:———-:|#使い方
リポジトリのものを利用するのであれば、以下のコマンドを実行してください。
“`
npm install mysql2
“`ライブラリだけを使用するのであれば、`mysql2`と`date-utlis`をイン
JavaScriptワンライナー #1 任意長のランダムな文字列を作る
シェル芸ならぬワンライナー芸@JavaScriptで色々やってみようという試みです。
—
今回はテストデータを作るときに役に立つかもしれない「任意長のランダムな文字列を作る」というのをやってみます。
「ランダムな文字列を作る」というのをざっと調べるとよく見つかるコードにこんなのがあります。“`js
Math.random().toString(36).slice(-8);
“`– 乱数を発生させます。
– それを36進数としてパースすれば`0～9a～z`で値が表現されます。
– そのままでは先頭に`0.`というのが付いてしまうのでお尻から使えるところを拾っています。都合の良いワンライナーですので、ここから発展させてみたいと思います。
## `0.`を捨てる
“`js
Math.random().toString(36).split(‘.’)[1];
“`
– ピリオドで分割します。
– 後ろを拾います。## もっと長くしたい
このままでは得られる文字列の長さに限界があるので適当に繋げてみます。
先ずは4つぐらいかな…“`js
[0,1,2,
TypeScriptでFormDataを良い感じに受け渡ししたい
# 概要
以前こんな記事を書きました。JavaScript上でObjectをRailsで取得できる形のFormDataへ変換する
https://qiita.com/dorarep/items/f3aa1463123c1ae75879今回、似たような形でNode.js上で動くサーバサイド側へ楽にデータを受け渡ししたいので、クライアント側、サーバサイドの変換ロジックをTypeScriptで実装しました。
# 実装
クライアント側
“`ts
/**
* Convert object to FormData which backend can use.
* This function is useful for uploading files.
*
* ex)
* { id: 1, hero: { id: 1, name: ‘NewHero’ }, items: [1, 2] }
* -> FormData with following parameters
* id: 1
* hero.id: 1
* hero.name: NewHero
* items
Node.js のバージョン管理を nodebrew で行った際、VS Code に反映されなかった
## Prologue
稼働しているプロジェクトで node.js のバージョンが低く、パッケージがインストールできない問題が発生しました。
単純にバージョンをあげてもよかったのですが、以前 node.js のバージョンがチーム内で異なっていて検証がうまく進まなかったことがあったため、これを期に `nodebrew` で管理することにしました。
インストール自体はそれなりにスムーズにできたのですが、VS Code で使用した際にエラーが出たため、その辺りも含めて記載しておきます。
内容は Try&Error のため、不要な内容も入っているのでご注意ください。
最後にスムーズにいく流れを記載しています。(-> [まとめ](https://qiita.com/miiiii/items/c3dbe4d5f82595a050fc#%E3%81%BE%E3%81%A8%E3%82%81))## 環境
– macOS: 10.15.4
– terminal: iTerm
– VS Code 使用– Project概要
– パッケージマネージャ: `yarn`***
参考: h
Promise.all()内で軽率にawaitしてはいけない
# 事前知識
## Promise.all()> Promise.all(iterable) メソッドは単一の Promise を返し、これは引数 iterable の中のすべての Promise が解決されるか、引数 iterable の中に Promise がない場合に解決されます。最初に拒否された Promise の拒否理由をもって拒否されます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
## JSONPlaceholder
例に用いるAPI
JSONを返してくれる
https://jsonplaceholder.typicode.com/#Promiseを返すことを意識する
Promiseを返さないとPromise.all()を使う意味が無い。。。
## 見かけ上並列で非同期処理を実行したい
下記のように、urlの配列があったとする“`js
const urls = [‘https://jsonplaceholder
Node.js（データベースを用いたWebアプリケーション）
# プログラミングの勉強日記
2020年6月18日 Progate Lv.130
Node.jsⅡ,Ⅲ##MySQL
データベースを管理するツールである。Node.jsからMySQLを操作するには、Node.jsからMySQLに接続する。そのためにmysqlパッケージを利用する。“`:ターミナル
$npm install mysql
“`“`javascript:app.js
//mysqlパッケージの読み込み
const mysql=require(‘mysql’);
//接続情報をcreateConnectionメソッドを用いて定数connectionに代入
const connection=mysql.createConnection({
//データベース名、パスワードなどを記述
});
“`##クエリの実行
`connection.query(‘クエリ’,クエリ実行後の処理)`と書くことで、Node.jsからデータベースに対してクエリを実行できる。
クエリ実行後の処理は
第1引数のerror：クエリが失敗したときのエラー情報
第2引数の
【JWT（JSON Web Token）】Node.jsで実際に使ってみた
# はじめに
認証方式の１つであるJWTについてのまとめと使用例# JWTとは
JSON Web Tokenの略
認証情報を含むJSONをbase64エンコードしたものに署名を付与したもの# 利用例
1. クライアント側から認証情報（例：ユーザー名、パスワード）をサーバーに送信
2. サーバー側で認証情報を確認し、認証OKの場合JWTを発行し、クライアント側に返却
3. クライアントは次回以降、JWTを付与したリクエストを送信
4. サーバー側はJWTを検証するなお、JWTの暗号化アルゴリズムは大きく分けて2種類ある。
– 共通鍵方式
HS256というアルゴリズムを使用する。
認証サーバとリソースサーバが同じ場合はこの方式が使われることが多い。– 公開鍵／秘密鍵方式
RS256というアルゴリズムを使用する。
認証サーバとリソースサーバが別々の場合にこの方式が使われる。
認証サーバに秘密鍵、リソースサーバに公開鍵が配置される。# JWTの構造
JWTの例は以下
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoidGFy
Node.jsの基本的な使い方
# プログラミングの勉強日記
2020年6月17日 Progate Lv.122
Node.jsⅠ
Webアプリを作るために使われるNode.jsを学んだ。JavaScriptをサーバーサイドで動かす仕組みである。
今回はNode.jsのフレームワークであるExpressを扱う。Node.jsには便利な機能を使えるようにまとめたパッケージがあり、Expressはそのパッケージのうちの1つである。##npm
パッケージを用意するために使うシステムである。Expressをnpmからインストールするには、`npm install`コマンドを使う。“`:ターミナル(入力したらEnterを押して実行)
$ npm install express
“`
インストールしたExpressを利用するためにはパッケージの読み込みと使用する準備が必要。以下の文は定型文として覚えてOK“`javascript:app.js
const express=require(‘express’); //expressの読み込み
const app=exprss(); //ex
Express+MySQLでログインする
[前回の記事では](https://qiita.com/4201tosiyuki/items/80ee553ac42eeb323859)ユーザーtestパスワードtestのみのログインユーザーであった為、MySQLにユーザー情報を入れ、そこを参照してログインするを実装した備忘録です。
**各バージョン**
* Node v12.13.1
* express-session 1.17.1
* passport 0.4.1
* passport-local 1.0.0
* mysql 2.18.1
* bookshelf 1.2.0
* knex 0.21.1では実装手順です。
必要なモジュールをインストールします。“`:terminal
npm install i mysql knex bookshelf
“`前回記事のユーザー名・パスワードをチェックするプログラムです。
“`javascript:index.js
passport.use(new localStrategy({
usernameField:’username’,
passwordFie
CloudFunctionsで一定時間経過後に処理を実行する方法
# はじめに
CloudFunctionsで何らかの処理を実行して、その何分後かに別の処理を呼び出したいことがあります。
だけどsetTimeoutを使いたくない。事前にジョブを登録しておくわけにもいかない。そんな時に以下の方法で実装してみました。
+ cloudSchedulerに対して、実行させたい日時（例：○分後）にジョブを登録。
+ 実行時刻になると処理が呼び出される。
+ 処理が終わったら不要になったジョブを削除。
参考：[CloudSchedulerリファレンス](https://cloud.google.com/scheduler/docs/reference/rest/v1beta1/projects.locations.jobs?hl=ja)
# サンプルコード
“`javascript:index.js
const functions = require(‘firebase-functions’);
const admin = require(‘firebase-admin’);
const { google } = require(‘googl
Node.jsでルーティングを行う方法と、やってはいけないこと
##ルーティング
ルーティングとは：アクセスするパスに応じて、表示する内容や行う処理を変えること##Node.jsでのルーティングの記述方法
・Node.jsアプリのファイル構成“`
├──app.js //アプリのメインのバックエンド処理
├── public //UI（css,クライアントサイドのjavascript）を記述
│ └── css
│ └── style.css
├── routes //ルーティング処理を記述
│ └── index.js
└── views //特定のパスにアクセスした時に引き渡すファイル。テンプレートエンジンを用いて記述
├── home.ejs
├── index.ejs
├── login.ejs
└── register.ejs
“`・app.js
“`javascript
‘use strict’
//共通変数
const path = require(‘path’);
const morgan = require(‘morgan’); //ターミ
Alibaba Cloud API Gateway を使ってみる
今回は、API Gatewayを使ってみます。API Gatewayのバックエンドには、Function Computeを使ってみます。
# Function ComputeでバックエンドAPIの作成
API Gatewayのトリガーを利用するには、テンプレートを使用するのが便利です。
Javascriptで学ぶHTTP通信
# はじめに
本記事は、Webアプリを作るための基礎知識の習得を目的とした学習記事です。主に、
* windows上でExcelVBA等、プログラミングの基礎知識は持っているものの
* Linuxなどサーバは全く扱ったことがなくバックエンドサーバが全くのブラックボックスで
* Webブラウザの挙動がよくわからず、何を使ってどこをどう見れば理解していることになるのか不安という人を対象にしています。
まず、Webサーバを実装してHTTP通信の実体を確認していきます。
—
# 開発環境の構築
Windows PCにWebサーバを導入します。Webサーバを作るので処理系をインストール。
## nodejs
nodejsはJavascriptの処理系です。
* [nodejs公式](https://nodejs.org/ja/)からwindows用のパッケージをダウンロード
* 展開して実行
* コマンドプロンプトを開いてnodeと入力
* 終了は.exit—
## Visual Studio Code(VSCode)
VSCodeは各種プログ
Rails 6+Webpacker で Yarn, Node.js 環境をHerokuでもMacでも同じにする
Rails 6+Webpacker開発環境をJS強者ががっつりセットアップしてみた（翻訳）
のなかの「再現可能な環境: Node.jsとYarn編」。
### .nvmrc
nvmを使用してNode.jsのversionを管理する
### .yarnrc
“`bash
$ yarn policies set-version 1.22.4
“`### package.json
“`js
},
“engines”: {
“node”: “13.13.0”,
“yarn”: “1.22.4”
}
}
“`## 依存関係の自動Update
> JavaScriptやRubyの依存関係の自動アップデートについては、Renovateを一度チェックしてみることをおすすめします。### Renovate
GitHub に無料で追加できた
