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

[Memo]DockerでDjango+Nuxt.jsの開発環境構築

##はじめに
2つのDockerコンテナで構成される、Webアプリ(バックエンドにdjango、フロントエンドにNuxt.js)の開発環境をdocker-composeで構築した際のメモ書きです。

##手元の環境
– macOS Catalina v10.15.1
– Docker version 18.09.2, build 6247962
– docker-compose version 1.23.2, build 1110ad01

##ディレクトリ構成
“`
home
|- backend
| |- code (djangoプロジェクトのソースコードが入る)
| |- Dockerfile
| |- requirements.txt
|- frontend
| |- src (nuxtプロジェクトのソースコードが入る)
| |- Dockerfile
|- .gitignore
|- docker-compose.yml
|- README.md
“`

## Dockerコンテナを立てる
今回は、フロンエンドにnuxt、バックエンドにdjangoを採用して、2つのDoc

Node.js + Express で ES6を使う

# 確認環境
node v10.17.0

# アプリケーションテンプレートの作成
ここでは`play_express`というアプリを作る前提で進めていきます。
※npxコマンドの使用には、`npm 5.2.0`以降がインストールされている必要があります。

“`
npx express-generator play_express
“`

次に依存関係をインストールします。

“`
cd play_express
npm i
“`

一旦、動作確認をします。アプリのカレントディレクトリで以下のコマンドを実行します。

“`
npm start
“`

このあと、webブラウザから`http://localhost:3000/`にアクセスすると、「Welcome to Express」画面が表示されます。
動作確認を終了するには、`npm start`実行中のコンソール上で、**Cmd(Ctrl)+c** を押下します。

# Babelのインストール
ES6を使うため、babelをインストールします。

“`
npm i @babel/core @babel/node

Node.jsでTwitterを自動化する

https://adventar.org/calendars/4650
OUCC(大阪大学コンピュータクラブ)のアドベントカレンダー12日目です。

Node.jsのtwitterモジュールでtwitterAPIを叩きました。
モジュールの更新が2017年で止まっており、一部機能が使えなくなっています。
先駆者の皆さんの記事のコードが動かないこともありました。

# ツイートする
twitter APIを取得して、API key, API secret key, Access token, Access token secretを取得しました。これに関しても参照ページからほかの方の記事をご覧ください。

送信できる環境が整ったので、ひとまずtwitterモジュールからツイートしてみました。

“`
//モジュールの読み込み
const twitter = require(‘twitter’);

//ツイート内容
const text = ‘test’

//上からAPI key, API secret key, Access token, Access token secret
c

スクレイピング & サーバレスAPIでNode.jsの雰囲気を体験してみる

みなさん、今年ももう終わりです。1年早いですね。
今回はチュートリアル形式でNode.jsとサーバレスを体験していただきたいなと思っています。
初心者の方にもとっつきやすく、目に見えるフィードバックがあるのでモチベーションも続きやすいと思います。

### 対象の読者
– 面倒なので5分で試したい （大事）
– プログラミングやったことあるけど、もっと踏み込んだものを作りたい
– そもそもJavaScript触ったことない
– JavaScriptを触ったことがあるけどそこまで深く知らない
– asyncとawaitってなに？
– API作ってみたい
– 無料がいい
– サーバレスって聞いたことあるけど触ったことない or メリットがわからない

## 使うもの
APIが動作環境 -> Zeit NOW
スクレイピング -> Puppeteer

## なんでこの構成にしたか
– 僕がPython触ったことがなく、Selenium触るのがちょっとめんどうだった。（JSはある程度触れる）
– スクレイピングは、割とオンデマンドな面があると思っていて、要求があった時に対象のWebサイトの情

前々回の記事で作成したオウム返しチャットボットにQ&Aエンジンを実装する

#前々回の記事で作成したオウム返しチャットボットにQ&Aエンジンを実装する

　
※本記事は最終的にQ&Aチャットボットを構築するための一部分となります。
[本編はこちら](https://qiita.com/abemaki/items/8c611cc63ec109ab3835)

###Q&Aナレッジを格納するベースファイルを作成します

テストの為に気象庁のQ&Aを元にQ&Aエクセルを作成します
QANDA.xlsxというファイル名で保存します

出典：https://www.jma.go.jp/jma/kishou/know/faq/faq10.html


　

　
　
knowledgeBaseというフォルダを作成し、QANDA.xlsxを配置します
![image.png](https://qiita-image-stor

IBM Cloud App ID Node.js Webクイックスタート

#はじめに
IBM Cloud App IDは、ユーザー認証を手軽に組み込めるサービスです。
AWSでいうとCognitoに相当するサービスです。

今回は、IBM Cloudのドキュメントで公開されている[Node.js Webクイックスタート](https://cloud.ibm.com/docs/appid?topic=appid-web-node&locale=ja)を補足＆若干の変更を加えてながらやってみたいと思います。

なお、本記事で紹介するソースコードは、[ここ](https://github.com/yo24/APPID-Quitck-Start)からダウンロード可能です

#環境

ローカルPC上のNode.js(v10.6.3)を利用します。
Node.js自体のセットアップ手順は割愛します。

#クイックスタートでやること

クイックスタートでは、OAuth 2.0 [認可コードフロー](https://openid-foundation-japan.github.io/rfc6749.ja.html#grant-code)を用いた認証するアプリケーションを作成

NestJS アプリケーションをプロダクションレディにする

この記事は [NestJS アドベントカレンダー](https://qiita.com/advent-calendar/2019/nestjs) 6 日目の記事です。

## はじめに

サンプルコードのリポジトリは以下になります。

https://github.com/nestjs-jp/advent-calendar-2019/tree/master/day6-prepare-for-production-usage

なお、環境は執筆時点での Node.js の LTS である v12.13.1 を前提とします。

## cli で雛形アプリケーションを作成

この記事では `@nestjs/cli` で生成される雛形に対して、プロダクションで実行するための設定を加えてゆきます。

“`bash
$ nest new day6-prepare-for-production-usage
“`

## config を作る

公式ドキュメントの [Configuration](https://docs.nestjs.com/techniques/configuration) の

ローカルでデバッグ＆テスト可能なLINEチャットボット開発環境（Node.js Express LINESimulator ）を作成する

#ローカルでデバッグ＆テスト可能なLINEチャットボット開発環境（Node.js Express LINESimulator ）を作成する

　
※本記事は最終的にQ&Aチャットボットを構築するための一部分となります。
[本編はこちら](https://qiita.com/abemaki/items/8c611cc63ec109ab3835)

※前段の記事で作成したオウム返しチャットボットベースとなります。
[まだ未作成の方はこちら](https://qiita.com/abemaki/items/44d2015561c31ea9628e)

###DEBUG環境を作成する

####１．DEBUG環境を作成します

構成の追加からlaunch.jsonを生成します


DEBUG用の設定情報を追加します。DEBUG時はシュミレータ

Heroku + LINE + node.js (Express.js)でオウム返しボットを作成する

#Heroku + LINE + node.js (Express.js)でオウム返しボットを作成する

　
※本記事は最終的にQ&Aチャットボットを構築するための一部分となります。
[本編はこちら](https://qiita.com/abemaki/items/8c611cc63ec109ab3835)

##何故、オウム返しなのか？

オウム返しはチャットボット構築の基礎中の基礎になります。
オウム返しすることで以下の３点が確認・理解できます。

①単純な疎通確認
　・今回だと、スマホ ←→ LINE ←→ メッセージングAPI ←→ Herokuで稼働するアプリまでの疎通確認になります

②単純な動作確認
　・LINEで発話した内容を正常に受信できることの確認
　・アプリケーションから発話した内容がLINEで正常に受信できることの確認

③疎通に必要な手順の理解、メッセージのやりとりに必要な手順の理解

はじめて使う技術でWebアプリケーション作成するときに最初にやるhello worldと同じですね。
単純なことですがこれらを最初にやるかやらないかでは技術の習得レベル

Node.jsでBASIC認証.

# Node.jsでBASIC認証

Node.jsでexpressを使ったWebサーバでBASIC認証を導入する場合の実装方法について紹介します．
本記事上では，パスワードを暗号化・ハッシュ化せずにソースコード上に記載しております．セキュリティ上望ましくない点にご注意ください．

# BASIC認証の導入
expressでBASIC認証を導入するには[express-basic-auth](https://www.npmjs.com/package/express-basic-auth)を使用します．下記がそのサンプルコードです．

“`javascript
const express = require(“express”)
const basicAuth = require(“express-basic-auth”)

// 正解のユーザ名とパスワード
const correctUserName = “hiroyky”
cosnt correctPassword = “password”

const app = express();
app.use(basicAuth({

Expressコマンドがありません（Windows）

# 一週間悩んだ・・・
“`bash
bash: express: command not found
“`

#ググり、そして出版会社にもメールを投げた
パスが通ってないっていうのがかなり記事としてあがっていたが、どうも違う。
出版会社に問い合わせたらnpm install -g express-generator をsudoで実行するというのもあったが、
そもそもsudoの時点でコマンドがありません。お手上げ。

#もしかしてnode.jsのバージョンが古いのでは？
一旦アンインストールし、最新版をインストールしてからnpm install -g express-generator

#そして・・・expressコマンド実行

“`bash
$ express -e ex-gen-app
“`

#コマンドが通った！

“`
$ express -e ex-gen-app

warning: option `–ejs’ has been renamed to `–view=ejs’

create : ex-gen-app\
create : ex-g

コマンドラインからスマートLEDランプ(TP-Link KL110/KL130)をつける

TP-Link社のWifiスマートLEDランプ KL110/KL130 を使って、同一ネットワーク内にあるmacbookからランプをコマンドライン制御します。

このランプの良いところは、電灯のON/OFFだけでなく色温度や輝度を調節できる点です。
例えば

– 暖色系の色で輝度を落として落ち着いた雰囲気で集中作業する
– 手元でモノを探すときに輝度を上げる
– 物理本を読むときに色温度を変える（Kindleの背景の白とセピアくらい紙の色味が変わる）

といったことが手元でできるのが良いです。

特に色温度を変えるとだいぶ色味が変わります。
↓実際にランプの色温度最低値と最高値で見比べた写真：2500K<--->9000K
【Node.js】zxcvbnを使ってパスワード強度をチェックする

「パスワード強度チェックするようなライブラリって何かあるのかな？」
と興味本位で調べてみたら`zxcvbn`というものが見つかったので、ご紹介。

# zxcvbnとは

Dropbox社製のパスワード強度チェッカーです。
Node.js以外にも色々な言語に対応したライブラリが作られています。

[dropbox/zxcvbn: Low\-Budget Password Strength Estimation](https://github.com/dropbox/zxcvbn)

# 準備

“`bash
$ npm i zxcvbn
“`

# 基本的な使い方

とりあえず`hogehoge`という文字列に対してパスワード強度をチェックしてみましょう。

“`javascript
const zxcvbn = require(‘zxcvbn’);

const result = zxcvbn(‘hogehoge’);
console.log(result);
“`

基本的な使い方はとても簡単ですね。
第2引数に入力を渡して更に細かい設定をすることも可能なようですが、今回は

React で eject せずに Scoped SASS (.scss) を使う

## 概要
– scoped sass (ファイル内限定で適用されるスタイル) を使いたいでござる
– でも`npm run eject`はしたくないでござる
– `cra-sass` を導入するとかんたんにできるでござる

## 参考文献
– [How to use Sass and CSS Modules with create-react-app](https://blog.bitsrc.io/how-to-use-sass-and-css-modules-with-create-react-app-83fa8b805e5e)
– [leighs-hammer/cra-sass](https://github.com/leighs-hammer/cra-sass)

## 実行環境
– `create-react-app` で作った react project
– 既存プロジェクトなのでversionわからん　すまん
– TypeScript

## サンプルコード (変更前)
`node-sass` を入れてふつーにscssを使うとこうなる。

### Sample.t

はじめてのGitHubActionsMarketplace公開 – PRにマイルストーンをつけるActionをつくってみた

Actions使ってなにかするworkflowをつくるんじゃなくてAction自体をつくる話。

なにか簡単にGitHubActionsをつくってみたいと思い、GitHub公式の[actions/labeler](https://github.com/actions/labeler)を参考にPRにラベルじゃなくてマイルストーンをつけるActionをつくろうと考えた。
[Marketplace](https://github.com/marketplace?utf8=%E2%9C%93&type=actions&query=milestone)で検索した結果、labelの方はちょいちょいあったがmilestoneの方はそんなにはまだなかった。マイルストーンの作成や更新がしたいのではなくてPRに既存のマイルストーンを結びつけたいってなると1,2件ぐらいしか無さそう。それらもこちらのやりたいこととは違った。
最終的につくったのは[iyu/actions-milestone](https://github.com/marketplace/actions/pull-request-milesto

堅牢な node.js プロジェクトのアーキテクチャとは？


>こちらの記事は、[Sam Quinn](https://softwareontheroad.com/author/santypk-4/) 氏により2019年 4月に公開された『 [Bulletproof node.js project architecture ](https://softwareontheroad.com/ideal-nodejs-project-structure/) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。

[GitHub repository](https://github.com/santiq/bulletproof-nodejs)での実装例: 2019/04/21 アップデート

# 始めに

Express.jsは、node.js のREST APIを作成するための優れたフレームワークですが、node.jsプ

Firebaseをなるべく安い料金で頑張りたい人へ

この記事は[Firebaseアドベントカレンダー](https://qiita.com/advent-calendar/2019/firebase)の5日目の記事です。

どうも！ハムカツおじさんという名前でtwitterやってます([@hmktsu](https://twitter.com/hmktsu))?
自分でだったり弊社でだったりなどFirebaseを使ってサービスを作っています。

ちなみに先日Firebase Meetup #15 Cloud Functions Dayにて下記のスライドを発表させていただいたので、興味ある人はご覧になってください！
[Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか？](https://speakerdeck.com/watanabeyu/firebaseonri-plus-react-nativedeapuriwozuo-rutoguo-tasitejian-dan-ninarufalseka)

## はじめに
色んなツールを作るのにFirebaseを使うととても便利だなぁという感想を持って

node.jsを触るために簡単なチャットシステムを作る（メッセージ送信編）

Node.js を触ってみたいと思ったので、備忘録も兼ねて以下に記します。
よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。

今回は「メッセージ送信編」ということで、クライアントからサーバーへのメッセージの送信の処理を作成します。

※前回 [node.jsを触るために簡単なチャットシステムを作る（サーバー接続編）](https://qiita.com/sunnyG/items/2e7b9d89acfc2b0938e4) という表題で、サーバー接続の処理を作成していますので、まだな方はこちらを参照ください。

# クライアントからサーバーへメッセージを送信する

## メッセージ入力フォームを作成

`/public/index.html` に、以下のメッセージ入力フォームを追加します。

“`html:index.html

Send

Unityの.alfファイルから自動で.ulfをダウンロードしたい！

# CIのActivateとかでライセンスを自動でActivateさせたい！

CIでUnityを扱う時はJenkinsとかであれば問題ないのですが、CircleCIやGitHub Actionsを使用するときにDockerでのライセンス認証では.ulfファイルというのが必要になってきます。

現在.ulfファイルをコマンドラインから生成することはできません。生成するにはブラウザ経由の一択です。
それを今回Puppeteerというnode.jsのツールを使って自動化してみました。

※今回の認証フローはPersonalEdition固定になります。

Puppetterとは、Webブラウザでの操作をソースコードから行えるものになります。
詳しくはこちら
[Puppeteer](https://developers.google.com/web/tools/puppeteer)

今回のリポジトリはこちら
[MizoTake/unity-license-activate](https://github.com/MizoTake/unity-license-activate)

## 実装

Custom Vision Service を使用してインテリアの樹種分析

##CustomVisionService　を　簡単なサイトを作って使えるようにしたい

今週はMicrosoftAzureから画像認識を試したのでそちらの成果を簡単に使えるサイトを作ろうと
思いました。内容はせっかくなので本業にちなんでインテリアの画像から樹種を解析してくれるものを目指しました。
内装を考える時にテーマとなる樹種を一つ決めて組み合わせていくと空間にまとまりが出るので、
自分が良いなと思う家具や内装がどの樹種なのかを調べられると買う家具や似合う色が決まってきて
インテリアを構築する時の参考になると良いなと思いました。

##環境
Node.js v10.16.3
Windows 10 pro
Visual Studio Code v1.39.1

##概要

①MicrosoftAzureでアカウントを作成
②Microsoft Custom Vision Service を使用して画像解析のプロジェクトを作成、トレーニング
③作成したプロジェクトをAPIとして使用する
④APIを取得する為のコードを書く

##参考資料

主に①～②の参考にいつもどおり先陣