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

play.jsとWorking Copyで、iPad上にNode.js実行環境を構築する。

iPad miniでNode.js実行環境を構築できたので、まとめてみました。

## この記事でできること

– iPadでNode.jsをローカル実行する。
– iPadからGitHub上のリポジトリに対してpush / pullする。

## 注意事項

これから紹介するNode.js実行アプリは、エミュレータであり、
本家Node.js / npmの一部しかサポートしていないので、
PCでできることがそのままできたりはしないことに注意してください。

## 筆者のハードウェア環境

– iPad mini 第5世代
– Ewin Bluetooth Keyboard ([Amazon](https://www.amazon.co.jp/dp/B081GYXN2M/ref=cm_sw_em_r_mt_dp_ARXHFb90Q8MQN))
– ロジクール ワイヤレスマウス Pebble SE-M350OW ([Amazon](https://www.amazon.co.jp/dp/B07SK1YZMY/ref=cm_sw_em_r_mt_dp_zVXHFbRKYWBHQ))

##

docker-composeのnode_modules問題にぶちあったたときにやった対処方法

# どんな問題？
最近、`docker-compose`で`node`の環境を構築するとき、コンテナ内の`node_modules`がどっかに行ってしまうという問題に遭遇した。

いろいろ調べてみると、`docker-compose`でローカルのディレクトリをコンテナ内にマウントする際に、上書きされてしまい、コンテナ内の`node_modules`が消えてしまっているようだ。

# どう解決したの？
https://qiita.com/suin/items/e53eee56da23d476addc の記事などを見ると、`volumes`を作成し、`node_modules`をそこにマウントすることで、回避することができるようだ。
しかし、これだとローカル環境に`node_modules`が生成されないため、`TypeScript`でパッケージの型定義を参照できず、`TypeScript`を使うことの旨味が薄れてしまう。

この問題を解決するために、`docker-compose`の`command`で`yarn install`もすることで、コンテナ内の`node_modules`をロ

Slackコマンドで社内APIを叩くときに気をつけたこと

# はじめに
遠い昔、緊急時などにサーバーへある設定を入れる必要があった際
`会社に来る→サーバにアクセスする→設定を入れる`
という流れを踏む必要がありました。
（当時は社内ネットワークが無く、このような方法を取らざるを得ませんでした）

この運用だと緊急にも関わらず、暫定対応ですら数時間後の対応となってしまい困っていました。

その解決のために、SlackとAPIを利用して設定を入れる方式を導入しました。
`Slackでコマンドを叩く → APIサーバーのAPIが叩かれる → 設定が入る。`

しかし、Slackから叩ける ＝ どこからでも叩けるサーバーになってしまうのでセキュリティをいかに担保するかが鍵になっていました。
今回は「どうやってセキュリティを担保したか」を説明していきます。

# 前提
– 対象サーバーがNode.jsで書かれていること（今回はNode.jsで実装したため、その説明になります）
– Slackのwebhook設定が完了しており、Slackからサーバーを叩けるようになっていること

【参考】[Slack での Incoming Webhook の利用](

Ubuntu20.04の新規VMへanyenvやnodenvやphpenvをセットアップした時のコマンド履歴

備忘のための記録なので解説などは無し。

“`
###################################
## https://cloud-images.ubuntu.com/minimal/releases/focal/release/
## のような minimal版のUbuntuを使う場合はgitを先にインストールしておく
###################################
sudo apt update
sudo apt upgrade
sudo apt install git

###################################
## anyenv のセットアップ
###################################
git clone https://github.com/riywo/anyenv ~/.anyenv
echo ‘export PATH=”~/.anyenv/bin:$PATH”‘ >> ~/.bashrc
echo ‘eval “$(anyenv init -)”‘ >> ~/.

Electron上でVulkanを動かすことに成功しました（しかも現実的な範疇で）

この話の続きです。

https://qiita.com/nanikore55554/items/4ad9fca5d23f2c459f98

要約すると「Electron上でVulkanは動かせたけど、遅すぎて10fpsも出せませんでした。」という話です。

で、今回はなんとか現実的な範疇にまでプログラムを軽くする方法はないかと考え、実際にやってみた結果です。

#1. そもそも何故重いのか？

前回も話しましたが、生の画像データ(RGBAのデータがそのまま入ってるconst char*型のデータ）からJpegへの変換が重すぎる事が原因です。とすれば、この部分をなくせば軽くなるはずです。

#2. 生の画像データをElectron上で表示する方法

だが、ここで問題があります。Electron（正確にはウェブブラウザ）には生の画像を表示する方法がありません。これがあったからわざわざJpegへデータを変換していたのです。

しかし、回避方法があります。前回も触れたWebGLで表示する方法です。WebGLはUint8Array型のデータをテクスチャとして扱う事ができます。生の画像データを

TypeScriptでExpress環境を構築してみた

# TypeScript/Express環境でローカルサーバを立て、Hello Worldを出力したい。

私自身はReact内で多少TypeScript触ってみた程度ですが、TypeScriptをこれから勉強する人の最初の一歩目を共に歩んでいければなと思います。

## 環境
“`
npm: 6.14.X
node: 14.13.X
npx: 6.14.X
“`
## プロジェクトの作成
“`
$ mkdir ts-app
$ cd ts-app
$ npm init -y
“`
– 作業ディレクトリを作成し、移動します。
– そのディレクトリ内でnpm initとコマンドを打つことで、このディレクトリをnpmの管理下に置くということになります。
– lsコマンドでディレクトリ内を確認すると、package.jsonというファイルが作られていることを確認できるかと思います。

## 必要なパッケージのインストール
“`
$ npm install –save typescript express
“`
– TypeScriptとExpressをインストールします。

Google Spread Sheet のデータを毎分チェックし、変更があったら Firestore に保存する(Node.js)

# TL;DR

タイトルから全てを察した方はこちらで十分かと思います。

“`ts
import * as functions from “firebase-functions”;
import admin from “firebase-admin”;
import { google, sheets_v4 } from “googleapis”;

// 公開関数
export const checkSpreadSheet = functions
.region(“asia-northeast2”)
.pubsub.schedule(“every 1 minutes”)
.onRun(async () => {

const sheetId = “スプレッドシートのID”
const ranges = [
{
sheet: “シート”,
start: “A1″,
end:”B1”
}
];

const sheetData = await getSpreadSheet

paralleldots APIをnode経由で使用してみた [感情分析編]

# はじめに
paralleldots AI APIというテキストから感情を分析するAPIがあるので、Nodeをプロキシとして利用し、このAPIを使ってみました。

[paralleldots](https://www.paralleldots.com/)

## 環境
・ node version : v12.18.3
・ npm version : 6.14.6

### URIと機能
|Path |HTTPメソッド |機能 |
|—|—|—|
|/api/v1/emotion |POST |入力テキストの全体的な感情と各感情ラベル（Happy、Sad、Angry、Excited、Bored、Fear）の信頼スコアを含むjson応答を返します。 |

### 使用したparalleldots AI API

**paralleldots AI APIとは？？**
開発者向けの包括的なドキュメント分類およびAPIのセットです。10億を超えるドキュメントでトレーニングされており、感情分析や感情検出などを提供しているそう。

今回は、paralleldots AI A

LINEボットでゲームブック、回想シーンを追加

前回の投稿（ [LINEボットでゲームブックを作った、ついでにシナリオエディタ作ったので完成](https://qiita.com/poruruba/items/c8673d4a57b9c77ed6d3) ）の続きです。

LINEボットでゲームブックを作りましたが、かのTyranoScriptを参考に、回想シーンを付けてみました。
気に入った画像があるページで、「記憶」 と言うと、その時の画像や音声を覚えておいてくれるので、いつでも見返せるようになります。
今回も、GitHubに上げています。

poruruba/LinebotGamebook
　https://github.com/poruruba/LinebotGamebook

回想シーンを思い出すために、LIFFアプリを追加します。
こんな感じの画面が、LINEアプリ内に表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/a6853df4-6d54-9aef-1bee-5dc55f1dcc9d.pn

LINEで画像にある日本語を認識しよう

# モチベーション
日本で働いている私にとっては辞書は一番使っているプログラムです。
もちろん、わからない単語がたくさんあります。普通、わからない単語があったら、単語をコピーして辞書にペーストしますが、時々写真にある単語に対して大変になりました。その漢字一つ一つを手で描けなければなりません。
で、今回、写真のテキストをAIで認識してもらって、デジタルの文字コードに変換するLINE BOTを作りましょう。

#　概要


## 要素
今回のシステムは要素が3つあります

+ クライアント：これユーザにつながる場所です。テキストの写真をアップロードして結果が表示されるところです。今回使いたいサービスはLine Botです。
+ サーバー：クライアントから画像をもらって、OCRサービスに送って、結果を処理してクライアントに送るところです。

Azure Communication Services ことはじめ (2) : 音声通話ができるまで

Azure Communication Services は、リアルタイム コミュニケーション基盤となるサービスで、テキスト | 音声 | ビデオ によるコミュニケーションのハブとなり、接続やコントロールを行うアプリやサービスを SDK などを用いて容易に開発できます。

今回は、Azure Communication Services を使ったアプリ開発の第一歩として、音声通話ができるまでを手順を追って確認し、Node.js の Web アプリを作成してみます。

# 開発環境

– 開発環境
– Windows 10 (Build 19042)
– Visual Studio Code (ver 1.50.0)
– Node.js (12.14.1)
– 利用ライブラリー、フレームワークなど
– Azure Communication Services
– azure/communication-common@1.0.0-beta.2
– azure/communication-administration@1.0.0

LINE Botに羊を数えてもらったら目が覚めた

#はじめに
　最近寝る時間が不規則で、すぐに寝つけないことが多いため、初めて作成するLINEBotに、羊を数えてもらうことで可能な限り早く眠りにつきたいと思いました。なお、本当に眠くなるLINEBotにするため、羊の画像をランダムで返す仕組みも考えたが、単純で、退屈で、眠気を誘うようなものをあえて目指しました。
#LINE Botの詳細
　LINEmessagingAPIのCountAPI（単純な数値カウンターを作成できるAPI ※参考：https://countapi.xyz/ ）を利用して、羊の数をカウントし、「眠れない」とつぶやくと、羊を数えてくれる。

#コード
“`ruby:server2.js
‘use strict’; // おまじない

// ########################################
// 初期設定など
// ########################################

// パッケージを使用します
const express = require(‘express’);
cons

LAN上にhttps対応のwebサーバを建て、Androidスマホのchromeから警告が表示されない状態でアクセスした手順

## 初めに
プログレッシブwebアプリ(PWA)を展開するには、HTTPS通信でつながる環境が必要になります。
レンタルサーバを借りることなく、LAN上でPWAを展開、動作確認できる手段はないかと、調査した結果です。

## 環境
– Windows10 Home
– Node.js(v12.13.0)
– Androidスマホ (KYOCERA TORQUE® G03 Androidバージョン 6.0.1)
– Visual Studio Code
– wifi環境

## Windows Subsystem for Linux(WSL)のインストール
https通信を行うにあたり、DNSサーバの構築、サーバ証明書の作成が必要です。
当方が調査したところ、DNSサーバの構築にはUnbound、サーバ証明書の作成にはOpenSSLが見つかりました。Unbound、OpenSSLはともに、Windwos版もありますが、仮想Ubuntuを用いたほうが、壁にぶつかることが少なく進めることができました。のちに、下記参考記事を見つけ、仮想UbuntuではなくWSLを用いたほうがよりスム

Unexpected end of JSON input while parsing near ‘…”:”^3.5.0″,”concurren’　のトラブルシューティング

#以下コマンドで解決

“`
npm cache clean -force
“`

パッケージインストール時に何らかの理由で汚いログが残っていることが原因のようです。
npmのキャッシュを強制的に消す事で解決。

LINEBotを使って海外現地金額から日本円を返してみた

# 目的
仕事で海外とやりとりすることが多くなってきました。
海外に行ったときに現地通貨が日本円ではいくらなのかをすぐに調べることができるツールがあれば便利だと思って今回、自分で作ってみました。

# 実現方法
### 入力
入力についてはLINEを使用しました。

### 使用したAPI
Foreign exchange rates API
https://exchangeratesapi.io/

### ロジック
LINEに入力する文字の形式は固定にしました。
　入力として受け付ける文字
　　（国名）:（現地金額）は日本でいくら？
　例
　　中国:1000は日本でいくら？

LINEで入力した内容をもとにAPIを利用して日本円に換算しています。
１．LINEで入力した国名をもとに通貨名を取得します。
　　連想配列でkey:国名、value:通貨名として紐づけを持たせています。
２．１．で取得した通貨名からレートを求め、日本円を取得します。
　　今回使用したAPIについては1ユーロあたりのレートが返却される仕様となっていました。
　　そのため、まず、入力した現地金額を何ユーロか求め

LINE BOTでYouTubeの検索をしてみたよ

#初めに
先日、LINE BOT の開発を教わったので、実際に作成してみました。
教わったのは簡単なテキストを返すものでしたが、LINE Messaging API でテンプレートメッセージのカルーセルを使ってみました。
LINE BOT の初期設定（事前準備）は以下を参考にしています。
[1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)

#目的
私はよくYouTubeで動画を見るので、簡単なYouTube検索ボットを作ってみました。
単純メッセージのレスポンスだとつまらないと思ったので、カルーセル形式に挑戦してみました。

#環境
Visual Studio Code v1.49.0
node.js v14.9.0
ngrok v2.3.35

#概要
自PCを（Node.js）サーバに見立て、LINEサーバからWebhookを受け取る為のトンネリングサービスはngrokを利用しています。
データの流れについて

位置情報を送ると近くの宿泊施設を返すLINEBotを作る

#初めに
LINEmessagingAPI　＋　WebAPIで、位置情報を送ると近くの宿泊施設を返してくれるLINEBotを作成しました。
ついでに最寄り駅も返します。

利用したAPI
■楽天トラベル施設検索API（宿泊施設の検索）
https://webservice.rakuten.co.jp/api/simplehotelsearch/

■HeartRails Geo API（最寄り駅の検索）
http://geoapi.heartrails.com/

#コード
“`javascript:
‘use strict’; // おまじない

// ########################################
// 初期設定など
// ########################################

// パッケージを使用します
const express = require(‘express’);
const line = require(‘@line/bot-sdk’);
const axios = req

WSL2でGUIアプリケーションを使えるようにする（ついでにPuppeteerでGoogle画像検索のスクレイピングに挑戦）

## WSL2 で GUI アプリケーション実行

[VcXsrv](https://sourceforge.net/projects/vcxsrv/) を使うことで WSL2 上で Linux GUI アプリケーションを実行することが可能です。

本稿では、GUIアプリケーションとして Google Chrome ブラウザを WSL2 上で実行できるように設定し、Puppeteer で Chrome ブラウザを自動制御してスクレイピングしてみます。

### Environment
[WSL2 + Ubuntu 20.04 + Docker 開発環境構築](https://qiita.com/amenoyoya/items/ca9210593395dbfc8531) で構築した環境を想定しています。

– OS: `Windows 10` (バージョン 2004, ビルド 19041 以上)
– WSL2:
– OS: `Ubuntu 20.04`
– Shell: `bash`

### Windows側の設定: VcXsrvの準備
[Chocolateyパッケージ

Electron上でVulkanを動かすことに成功しました

初投稿です。お手柔らかにお願いします。

今回はElectron上でVulkanを動かす事に成功した、という話です。
(ただし・・・）
#1. Electronとは？

早い話、「node.jsで書かれたウェブアプリをネイティブアプリにする」というフレームワークです。これにより簡単にクロスプラットフォームを実現できます。Visual Studio CodeやSlack、Discordなどがこの技術により作られています。

#2.Vulkanとは？

早い話、最新式のクロスプラットフォームの3D APIです。同じクロスプラットフォームであるOpenGLと比べてより高性能な3Dプログラムを書くことが出来ます。
（その分難易度は物凄く高いですが。)

#3.で、ElectronでVulkanを動かすと何が嬉しいの？

まず、Electronは「ネイティブアプリを作る際にウェブアプリの資産をそのまま持ってこれる」という非常に便利な代物で最近のクロスプラットフォームのネイティブアプリはElectron(とスマホだとFlutter)が主流だと言われているぐらいです。ところが、Electronで3D

Node.jsでiniファイルを操る 「properties-reader」

# properties-readerとは？
Node.js上でiniファイルを読み込めるようにしてくれるmodule。
(正確には、**[iniファイル形式](https://qx-nosusume.cocolog-nifty.com/qx/2014/05/ini_format.html)** で書かれていれば拡張子はなんでもOK)

# 何のために使うか？
Electronとかで実行ファイル形式に変換した際、あとから変更になった既定値(ファイルパスとか)のために **わざわざソース編集して再コンパイル…なんてやってられないよ！** って人が使うもの。

実際作成したソースを「コンパイルするのに30分かかります！」なんてのはざらで、ちょっとした変更の度に再コンパイル→検証→再コンパイル…ってのはかなりの手間。

そんな中でiniファイルやpropertiesファイルとしてパラメータもたせられたら便利じゃないですか？？？便利ですよね！！！

上記環境のような中でNodejs使ってるよ！って方は **今すぐproperties-readerの使用を検討してはいかがでしょうか？**