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

azure app service で kintone アプリデータ公開その２（環境変数利用）

kintone のアプリデータをazure app service で公開その２です。
kintone への接続情報を環境変数で管理してみます。

# 概要

[azure app service で kintone アプリデータ公開その１](https://qiita.com/rex0220/items/c38939eea69e0eff37a3)の続きです。
kintone 接続用の情報を環境変数に設定して、利用してみます。

# 環境変数の参考情報

npm dotenv を使うとよさそうです。

– [環境設定を行う！Node.jsのenvの使い方【初心者向け】](https://techacademy.jp/magazine/16243)
– [Node.jsで環境変数を取得する](https://qiita.com/setouchi/items/274d9eebc8c9d3470ac1)
– [環境変数とnpm scriptとかpackage.json周りの話](https://gist.github.com/kenmori/ef48f09e9f1bfb30fe34cc11d

Node.js で DynamoDB のデータを読む

参考ページ
[Amazon DynamoDB Step 3.2: Read an Item](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/GettingStarted.NodeJs.03.html#GettingStarted.NodeJs.03.02)

“`js:get_item.js
#! /usr/bin/node
//
//
var AWS = require(“aws-sdk”);

AWS.config.update({
region: “us-east-1”,
})

var docClient = new AWS.DynamoDB.DocumentClient()

var table = “Movies”
var user = “Scott”

var params = {
TableName: table,
Key:{
“user”: user,
}
}

docClient.get(params, function(err, data

AWS S3 の使い方 (Node.js)

AWS S3 を Node.js で使ってみます。

１）バケットの一覧

“`js:s3_list.js
#! /usr/bin/node
//
// s3_list.js
//
// Mar/02/2020
// —————————————————————
var AWS = require(‘aws-sdk’)

s3 = new AWS.S3({apiVersion: ‘2006-03-01’})

s3.listBuckets(function(err, data) {
if (err) {
console.log(“Error”, err)
} else {
console.log(“Success”, data.Buckets)
}
})

// —————————————————————
“`

２）バケット内のファイル一覧

“`js:s3_listobjects.js
#!

入門者もプロもJAMスタックからはじめよう！

## JAMスタックとは何か

JAMスタックの[公式サイト](https://jamstack.org/)によると、ビルドが自動か手動か、もしくはフレームワークがNext, Gatsby, Hugoどの種類でも共通しているのはサーバーに依存しないということであると説明されています。ではではJAMの頭文字について説明していきます。

#### Javascript
上記で「サーバーに依存」しないため、メイン使用することになるのはフロントエンドで大活躍しているJavascriptです。Angular, React, Vueなどのフレームワークやライブラリを使用したものももちろん含まれます。

#### API
全てのサーバーサイドの処理やデータベースアクションは再利用可能なAPIとして抽象化されており、JavaScriptによるHTTPS経由でアクセスされます。

#### Markup
デプロイ時に静的サイトの生成ツールやアプリケーションのビルドツールによって事前にビルドされていなければい。

## JAMスタックを始めるのは難しいか？
これまで技術構成を表す用語として下記のようなもの

JavascriptのテストフレームワークJestを導入して、非同期関数をテストする

Javascriptのテスト用ツールには、MochaやChaiなどいろいろあります。
今回は多様なテストツールの中でも、Facebook製の**jest**というフレームワークを導入して使ってみます。

## jestとは

Jest · ?快適なJavaScriptのテスト
https://jestjs.io/ja/

>Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

>It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

Jestはシンプルで、Babel、Typescript、Node、React、Angular、Vueなどに対応しています。

## 前提

今回はTypescriptプロジェクトにjestをインストールする想定です。

## 導入手順

Getting Started · Jest
https://jestjs.io/docs/ja/g

RSSの表示の仕方(express,node.js)

express(express-generator)を使って東京メトロのリリースニュースを表示します

#xmlモジュールのインストール

“`bash
npm install –save xml2js
“`

#xmlを使っているサイトを見つける
今回は、
https://www.tokyometro.jp/news/rss/news.xml
このサイトを使います。

#モジュールのロード
router内のjsファイル内で

“`javascript

var http = require(‘https’);
var parseString = require(‘xml2js’).parseString;
“`

途中です。

Nuxt.jsのpluginsにaxiosの共通部品を実装する

# はじめに
Nuxt.jsにてクライアントサイドのvueからサーバのREST APIを呼び出す際に、vue内のスクリプトにロジックを書くと、他の場所で流用できない。そのため、外部のjsに共通ロジックとしてサーバのAPIを呼び出す処理を記述したかったが、あまり良い例が無かったので、検討&実装してみた（正しいかは不明）
Vuexストア内でaxiosを使ってサーバAPIを呼び出すみたなことをやってる人も居たけど、それはちょっと違うだろう（というか気持ち悪い）ということで、pluginsに共通ロジックを作成することにした。

## 構成
修正する対象は以下の3ファイル（pages/index.vue , plugins/axios.js , plugins/api.js）

“`
ROOT
├─.nuxt
├─assets
├─components
├─layouts
├─middleware
├─pages
│ index.vue
├─plugins
│ api.js
│ axios.js
├─server
├─static
├─s

node.jsをインストールの際、Chocolateyの提案を受けたのでインストールしてみた

#概要
windowsでnode.jsをインストールしてみた。
ネットのインストール画像にはない、Chocolateyに関するインストール確認がでてきたたため、合わせてインストールしてみた。

#環境
windows 10
node-v12.16.1-x64

#インストール画面
![Node.js Setup 2020_03_01 17_06_48.png](https://qiita-im

nodejsのorマッパー sequelize のaccociaton

# associationのまとめ
## belongsTo
1つの関連をもつ。

– 例) Players.belongsTo(Teams)
Playersに外部キー`teamId`が自動追加される。

## hasOne
1つの関連をもつ。

– 例) Players.hasOne(Profiles)

Profilesに外部キー`playerId`が自動追加される。include時、最初の１つのみ出力される。

## hasMany
複数の関連をもつ。

– 例) Players.hasMany(Profiles)

Profilesに外部キー`playerId`が自動追加される。include時、複数件出力される。

## belongsToMany
多対多の中間テーブルを持つ。

– 例1)Players.belongsToMany(Teams, { through: TeamPlayers })
中間テーブル’TeamPlayers’が作成され、そこに外部キー`teamId` `playerId`が自動追加される

– 例2)Teams.belongsToMan

node-canvasで絵文字を扱う

ユーザ生成コンテンツは、OGPを画像化して見せるのがデファクトスタンダードのようになってきました。
node.jsから、画像処理をcanvasのように扱える [node-canvas](https://www.npmjs.com/package/canvas) を使う人も多いのではないでしょうか。

その方法は色々紹介されています。例えばこちらの記事など。
[node.jsではてなブログ風アイキャッチ画像を動的に生成する](https://qiita.com/ampersand/items/805e75b5a54797923885)

このnode-canvasですが、デフォルトでは絵文字は描画ができません。

今回は、node-canvasで、絵文字を [Twemoji](https://twemoji.twitter.com/) の見た目で描画するモジュールの紹介です。

# node-canvasで絵文字を扱う

node module を [npm](https://www.npmjs.com/package/node-canvas-with-twemoji) で公開しておき

Node.js Expressフレームワークを使用する為の準備作業

#はじめに
本格的な開発をするにはフレームワークを活用します。
フレームワークを活用することで効率よく、開発することが出来るようになります。

今回は「Express」というフレームワークを採用しました。

#環境
OS:Windows 10 Pro 64bit
node.js:v12.16.1
npm:v6.13.4

#Express Generatorのインストール
Expressを使用するには、Express Generatorを使用するのが便利です。
まず、Express Generatorをインストールします。
コマンドプロンプトを立ち上げで、以下のコマンドでインストールします。

“`Bash
npm install express-generator – g
“`
上記コマンドはグローバルインストールと呼ばれるインストール方法になります。
Express Generatorはプログラム中で使用するものではありませんので、グルーバルな領域にインストールします。
ですので、コマンドを打つ場所（カレントフォルダ）はどこでも良いです。

#確認
以下のコマンドでインストール

node.jsでswitchbotの温湿度計データ取得

switchbotの[温湿度計](https://www.amazon.co.jp/dp/B07L4QNZVF)を購入したので、node.jsでデータを取得し、s3にアップロードしてみた。

# データの取得
データの取得には[noble](https://github.com/noble/noble)を使用した。
nodeのv9以降では動かないようなので、v8系をインストールすること。
nobleの使い方は割愛。

microbotの開発元？のOpenWonderLabsがAPI仕様を公開しているので、それを参照しながらデータを読み取る。
https://github.com/OpenWonderLabs/python-host/wiki/Meter-BLE-open-API
ビットの操作はとっても苦手なので、苦労した。
例えば、4バイト目の後ろ7ビットには温度のデータが入っているようなので、このようにして取得。

“`js
const temperature = data.readUInt8(4) & 0x7f;
“`
&（ビット演算子）で0x7f(1111111)をビットAN

azure app service で kintone アプリデータ公開その１

kintone のアプリデータをazure app service で公開してみます。

# 概要

プラグインを購入いただいたお客様のサポートやプラグインのバージョンアップなどで、kintone アプリを使ってどうにか出来ないかと調べています。
kintone アプリデータを外部に公開する外部サービスがありますが、簡単にできる反面、いろいろ制約があったりします。
azure app service で、kintone アプリデータを外部に公開する試作をしてみます。

# 環境
いつも使っている PC 環境で開発・テストして、azure へデプロイ。

– 開発環境
– Windows 10
– Visual source code
– node.js, Express, pug
– [kintone JS SDK](https://developer.cybozu.io/hc/ja/articles/360025484571)

– azure環境
– east asia (東京)

# 開発準備

vscode, node, npm あた

TypeScriptのExpressアプリケーションを作る

## 動作環境

– macOS Mojave
– node v12.14.1
– npm 6.13.4
– express 4.16.4
– typescript 3.8.2

## 最終的なコード

最終的なコードは以下に上げてあるので、先に見たい方は御覧ください。
https://github.com/jumperson/quick-start-express-typescript

## 作成手順

### JavaScriptのExpressアプリケーションを作成する

[Express のアプリケーション生成プログラム](https://expressjs.com/ja/starter/generator.html) に従って作成していきます。

グローバルにexpressをインストールします。

“`
$ npm install express-generator -g
“`

インストールしたコマンドで作業ディレクトリに `quick-start-express-typescript` という名のExpressアプリケーションを作成します。

“`
$ expre

コメント欄はいらない！Webmentionを使ってブログにツイッターでの反応を表示する　（Part 1）

2020年。Gatsbyなどを使ってブログをゼロから一晩で作れる時代になった。特に投稿を、レポジトリの一部として、Github/Gitlabに保管すると、staticなプロジェクトとしてデプロイもすごく楽。だが、コメント機能を実装したければ、もともと不要だったデータベースが必要になって、一気にめんどくさくなる。自分でDBを管理したくない人は、Disqusのようなthird-partyサービスを使う選択肢もあるけど、有料。そこにWebmentionが登場する！

## Webmentionとは

厳密にいえば[Webmention](https://ja.wikipedia.org/wiki/Webmention)というのは**プロトコル**の名前である。そして現在は、[W3Cの勧告](https://www.w3.org/TR/webmention/)である。

ただ、SNS・チャットによくあるみんなお馴染みの「メンション」のような概念として理解しても良い。Twitter/FB/Instagramと違って、自分のブログを誰が読んで、どこでリンクをシェアしているかは、Googleの分析を

localStrageメモ

#localstrageとは
クライアント側のみで動く、データを保管するもの。
「情報をブラウザ上に保存しておく場所」

クライアント側のみで動く為、メッセージを送信する際はIDも一緒に送る必要がある。
(inputのvalueに値を指定などで)

#身近な例
ユーザーがあるサービスにログインした場合、ログイン情報をローカルストレージ上に保存しておくことで、次回ユーザーが訪れた時に自動ログインが完了しているパターンなどが考えられます。

#参考
https://toukei-lab.com/localstrage

TypeScriptのクラスをドラクエ風のステータスを実装しながら学んでみた

## はじめに

– `npm: 6.13.7`
– `node: 13.8.0`
– `TypeScript: 3.8.2`

TypeScript 学習のため、ドラクエ風のステータス出力をクラスで実装してみました。

– ステータス

“`
HP: 体力
ATK: 攻撃力
DEF: 防御力
“`

今回はステータスの出力までですが、次の機会はダメージ計算なども追加して実際にバトルをさせてみたいと思います。

## TypeScript のクラスについて

– 完成

“`dorakue_style.ts

class Brave {
name: string;
hp: number;
atk: number;
def: number;

constructor(name: string, hp: number, atk: number, def: number) {
this.name = name;
this.hp = hp;
this.atk = atk;
this.def = def;
}

node.jsからWebsockets経由でOBSを操作する

動画配信ソフトのOBSをコードから操作して自動化したいなと思ったので調べたメモです。

## obs-websocket
WebSocketsでOBSを操作出来るようにするプラグインです。
https://github.com/Palakis/obs-websocket

インストーラーが用意されているのでGUIからインストールするだけでOBSメニューの「ツール」に`WebSockets Server Settings`という項目が追加されます。

## obs-websocket-js
上記のWebsockets APIのJSラッパーです。
https://github.com/haganbmj/obs-websocket-js

READMEに書いてある通りに書けば動きます。
exampleそのままですがコメント付きのサンプルコードも乗せておきます。

“`javascript
// ライブラリのimport
const OBSWebSocket = require(‘obs-websocket-js’);

// インスタンス初期化
const obs = new OBSWeb

nuxtでDOMException: Failed to execute ‘appendChild’ on ‘Node’エラー

#Failed to execute ‘appendChild’ on ‘Node’
`nuxt` でこんな感じのエラーが出る
因みに`dev` では出ない。

“`
DOMException: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.
at Object.appendChild
“`

#原因
`