Description gatsbyやangularでdockerを利用する際に、OSによりinstall内容が変わるmoduleがあり、手元のnode_modulesをそのままdocker環境で利用した場合にErrorを吐く場合があった。 dockerとlocalの環境で別にinstallしようと思い、docker-ignoreに追加 + docker内部でインストールを実施した際にエラーがでたため対処方法を追記。 Refs 関係ありそうだけどさっとしか見なかった。ごめんなさい。 yarnpkg/yarn#5500 yarnpkg/yarn#2240 TL;DR volumesにnode_modulesに追記する。 docker-compose.yml services: app: volumes: - type: volume source: dependencies target: /${WORK_DIRECTORY}/node_modules command: yarn dev volumes: dependencies: 対処方法 node_modulesをvolumeデータとして扱う databaseのデータと同じく、volumeにnode_moduluesを追加する。 雑に使ったdockerfile docker/server.dockerfile FROM node:16-alpine3.11 WORKDIR /app COPY package*.json ./ COPY yarn.lock ./ RUN rm -rf node_modules RUN yarn install --frozen-lockfile 簡易的に作ったdocker-compose.yml docker-compose.yml version: "3.9" services: app: container_name: app build: context: . dockerfile: ./docker/server.dockerfile tty: true restart: always ports: - "3000:3000" volumes: - type: bind source: . target: /app - type: volume　 #　volumeをtypeで指定 source: dependencies　 # volumeに記載した名前と同じもの target: /app/node_modules #　利用しようとしている場所をtargetに記載 command: yarn dev volumes: db-data: dependencies: #　volumeに登録する 気付いた点 dockerfileをXXX.dockerfileにするとVSCのファイルにiconがつく volumeで利用したため、複数のcontainerで使い回せる nocopyを使うとcontainerで相互更新しなくても利用できる cli系統のpackageを別のcontainerで区分けでき、 app: &node_containerで使い回しができる

こちらのプログラムの Telegraf の入力フォーマットを JSON に変更しました。プロトコルは udp のままです。 Telegraf で InfluxDB 2.0 にデータを入れる Telegraf の設定ファイル /etc/telegraf/telegraf.conf （省略） [[outputs.influxdb_v2]] urls = ["http://127.0.0.1:8086"] token = "1zIYs1taCm3pWQOBUNk0ssYccOF7YgJcdGyJDbiFYTBf7hcPvyl5nGyt71rNVkYtg2rB ceUwQ1r5Xzm7Mabcde==" organization = "ekzemplaro" bucket = "tochigi" （省略） [[inputs.socket_listener]] service_address = "udp://:8092" json_name_key = "name" data_format = "json" （省略） テストスクリプト # echo '{"name":"aaa","temperature":23.5,"humidity":42.3}' | ncat -4 -u -w 1 localhost 8092 sleep 10 echo '{"name":"aaa","temperature":24.6,"humidity":53.5}' | ncat -4 -u -w 1 localhost 8092 sleep 10 echo '{"name":"aaa","temperature":25.9,"humidity":64.3}' | ncat -4 -u -w 1 localhost 8092 sleep 10 echo '{"name":"aaa","temperature":26.7,"humidity":76.3}' | ncat -4 -u -w 1 localhost 8092 sleep 10 echo '{"name":"aaa","temperature":25.5,"humidity":55.3}' | ncat -4 -u -w 1 localhost 8092 sleep 10 echo '{"name":"aaa","temperature":25.1,"humidity":48.3}' | ncat -4 -u -w 1 localhost 8092 sleep 10 echo '{"name":"aaa","temperature":24.1,"humidity":43.7}' | ncat -4 -u -w 1 localhost 8092 Python3 のテストスクリプト udp_send.py #! /usr/bin/python # # udp_send.py # # Aug/29/2021 # ------------------------------------------------------------------ import sys import json import time from socket import socket, AF_INET, SOCK_DGRAM HOST = '' PORT = 8092 ADDRESS = "localhost" # ------------------------------------------------------------------ def udp_send_proc(temp,humi): unit_aa = {} unit_aa["name"] = "aaa" unit_aa["temperature"] = temp unit_aa["humidity"] = humi msg = json.dumps(unit_aa) # ss = socket(AF_INET, SOCK_DGRAM) ss.sendto(msg.encode(), (ADDRESS, PORT)) ss.close() # # ------------------------------------------------------------------ sys.stderr.write("*** 開始 ***\n") # udp_send_proc(25.4,55.2) time.sleep(10) udp_send_proc(26.4,56.2) time.sleep(10) udp_send_proc(26.2,56.9) # sys.stderr.write("*** 終了 ***\n") # ------------------------------------------------------------------ Node.js のサンプルです。 udpclient.js #! /usr/bin/node // --------------------------------------------------------------- // // udpclient.js // // Aug/29/2021 // --------------------------------------------------------------- // UDP Sample Client // UDP 接続先 const host = "localhost" const c_port = 8092 var dgram = require("dgram") var client = dgram.createSocket("udp4") // --------------------------------------------------------------- // サーバからメッセージ受信したときの処理 client.on("message", function(msg, rinfo) { console.log("recieved: " + msg.toString("hex")) client.close() }) // --------------------------------------------------------------- // メッセージ送信でエラーが起きた時の処理 client.on("err", function(err) { console.log("client error: \n" + err.stack); console.close() }) // --------------------------------------------------------------- // Socket をクローズした時の処理 client.on("close", function() { console.log("closed.") }) // --------------------------------------------------------------- // メッセージ送信 function send(message, host, port) { client.send(message, 0, message.length, port, host, function(err, bytes) { console.log("*** sent ***") client.close() console.error ("*** 終了 ***") }) } // --------------------------------------------------------------- console.error ("*** 開始 ***") var unit_aa = new Object () unit_aa["name"] = "aaa" unit_aa["temperature"] = 27.0 unit_aa["humidity"] = 56.3 const json_str = JSON.stringify(unit_aa) const message = new Buffer.from(json_str) send(message, host, c_port) // --------------------------------------------------------------- こちらのプログラムを参考にしました。 PythonによるUDP通信 Node.js で繰り返し送信するサンプルはこちら Node.js: 一定時間毎に udp 送信を行う

エラーケース ターミナルでnodeのバージョン確認をするコマンド「node --version」を実行したら、「command not found:node」というエラーが返ってきてしまう。”node”というコマンドが認識されていないみたい。 解決方法 「node」をインストールすればOK https://nodejs.org/ja/download/ npmも同様にインストールすればコマンドとして認識されるようになる。

概要 ちょっと前に SORACOM RS-LTECO2 を購入して、以下を参考に自宅の仕事場のCO2濃度や室温などのデータを SORACOM Lagoon で可視化までやっていました。 SORACOM レシピ：IoTで、CO2と温湿度を計測し換気促進 https://soracom.jp/recipes_index/9972/ とはいえ、確認のため SORACOM Lagoon をいちいち起動するのは手間で、普段使いしている kintone で CO2濃度や室温などのデータを確認できるように可視化してみました。 SORACOM RS-LTECO2 について SORACOM RS-LTECO2 は SORACOM さんが委託販売しているラトックシステム株式会社のCO2や温度、湿度が計測できるセンサ機器です。白でおしゃれなコンパクトな筐体にLEDで現在のCO2濃度を知らせる機能があり、SORACOM の SIM を差し込むことで簡単な設定で SORACOM Lagoon を利用して可視化が可能です。 僅かなサイズのバイナリーデータを指定間隔でLTE-M通信でバイナリーデータで送信するため、通信料も気にせずリーズナブルに利用できます。またUSB給電で、USBバッテリーなどと一緒に持ち運びして色々な場所で計測可能です。SORACOMのサイト、以下のメーカサイトのwifi版製品とともに消費電力のデータが無かったため計算はできませんでしたが、USBバッテリーでそれなりに長い時間運用可能ではと推測しています。 wifi版製品 RS-WFCO2 https://www.ratocsystems.com/products/subpage/wfco2.html SORACOM の設定 先に紹介した「SORACOM レシピ：IoTで、CO2と温湿度を計測し換気促進」を参考に、SORACOM Harvest Data の設定 まで行ってください。但し、SORACOM Harvest Dataの有効化 は以降のSORACOM Lagoon で可視化までやらずに、kintone のみで確認する場合は必須ではありません。 kintone の準備 kintone の複数スレッドを持つ適当なスペースに以下の項目を持つアプリを追加します。「お知らせ」を利用しますので、必ず複数スレッドを持つスペースでアプリを作成します。 フィールド名 種類 フィールドコード その他 計測日時 日時 dateTime CO2 数値 co2 少数以下0 温度 数値 temp 少数以下1 湿度 数値 humid 少数以下1 計測間隔 数値 interval 少数以下0 フォーム以外にはAPIトークンの発行を行います。その他は適宜以下のような今日のCO2を表示するグラフを作成しておくと便利でしょう。 APIトークンは次の AWS Lambda で SORACOM RS-LTECO2 より受け取ったデータを kintone 追加するために使用します。 以上で、一旦 kintone の準備は完了です。 AWS Lambda の準備 AWS 側の事前準備として、アカウントが必要になります。こちらの設定は以前 SORACOM GPS マルチユニット で説明した内容と同じですので、以下を参照ください。 AWS アカウントの追加 https://qiita.com/yukataoka/items/c07b78f5151c29ac8858#aws-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E8%BF%BD%E5%8A%A0 ユーザの追加に成功したら、アクセスキーIDと、シークレットアクセスキーは以降の設定で必要になりますので、控えておきます。 AWS Lambda で以下のように関数を作成します。 「一から作成」を選択し、適当な「関数名」を設定し、「ランタイム」（言語）は最新の Node.js を選択して関数を作成します。 関数のARNは以降の設定で必要になりますので、控えておきます。 コードは以下になります。 index.js 'use strict'; const request = require('request-promise'); const moment = require("moment"); const Url = "https://" + process.env['subdomain'] + ".cybozu.com/k/v1/record.json"; const AppId = process.env['appid']; const Token = process.env['token']; exports.handler = async function(event, context, callback) { console.log('Function Start.'); // 取得したデータをkintone用のJSONに編集 const dateTime = moment().format("YYYY-MM-DDTHH:mm:ssZ"); const json = { "dateTime" : { "value" : dateTime }, "co2" : { "value" : event.co2 }, "temp" : { "value" : event.temp }, "humid" : { "value" : event.humid }, "interval" : { "value" : event.interval }, }; // kintoneのアプリにデータを追加 await PostKintoneRecode(request, Url, AppId, Token, json); console.log('Function Stop.'); }; // kintoneにデータを追加 async function PostKintoneRecode(request, url, appId, token, json) { try { const options = { url: url, method: 'POST', headers: { 'Content-type': 'application/json', 'X-Cybozu-API-Token': token }, json: { app : appId, record: json }, }; await request(options); return true; } catch (err) { console.error(JSON.stringify(err)); return false; } } event の引数で受け取った CO2 などの値をAPIで追加するだけで、簡単に kintone にデータを追加できます。 AWS Lambda のコードにはは、以下の node.js のパッケージ環境 request-promise と moment を追加する必要があります。 https://www.npmjs.com/package/request-promise https://www.npmjs.com/package/moment request-promise は現在非推奨になっています。本格的に利用する場合は request-promise を使わず Aysnc/Await を使って HTTP リクエストを使って実装する方が良いでしょう。 Lambda で node.js のパッケージを使う説明は割愛しますが、以下などを参考に設定すると良いでしょう。 Lambda の Node.js でもっといろんなパッケージを使いたいとき https://tech-lab.sios.jp/archives/9017 AWS Lambda Layersでnode_modulesを使う https://xp-cloud.jp/blog/2019/01/12/4630/ その他の設定ではタイムアウトがデフォルトでは短すぎるので、15秒程度に値を変更しておくと良いでしょう。 kintone の環境が変わってもコードを変更しなくて済むように、process.env['キー'] で環境変数から設定値を取得するようにしています。 キー 値 appid 先に追加した kintone のアプリID subdomain kintone のサブドメイン xxxx.cybozu.com の xxxx の部分 token 先に追加した kintone アプリのAPIトークン 以上の設定が完了したら、SORACOM のコンソール画面で SORACOM Funk の設定を行います。 SORACOM Funk の設定 SORACOM のコンソール画面で、先の「SORACOM の設定」SIMグループで作成したSIMグループの設定を変更します。 「SORACOM Air for セルラー設定」のバイナリパーサーが以下のように設定されているか確認します。 co2:0:uint:16 temp:2:int:16:/10 humid:4:uint:16:/10 interval:6:uint:8 「SORACOM Air for セルラー設定」で、以下のように設定します。 関数のARMは先に控えたものを利用します。認証情報の設定については、先に控えたアクセスキーIDと、シークレットアクセスキーを使って以下を参照に行います。 SORACOM コンソールで SORACOM Funkの設定 https://qiita.com/yukataoka/items/c07b78f5151c29ac8858#sim%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%81%AE%E8%BF%BD%E5%8A%A0%E3%81%A8%E8%A8%AD%E5%AE%9A 以上を完了すると、kintone のアプリにデータが追加されるようになります。 kintone のスペースの「お知らせ」に表示 kintoneアプリを開かないとCO2などのデータを確認できないのは面倒ですので、kintone の JavaScript カスタマイズでよく利用するスペースの「お知らせ」にデータを表示できるようにします。但し、この作業には kintone の管理者権限が必要です。 kinotne のカスタマイズではスペース表示イベントを取得できるようになりましたので、このイベントのタイミングでスペースの「お知らせ」に最新のCO2等のデータを表示するようにカスタマイズします。 スペース表示イベント https://developer.cybozu.io/hc/ja/articles/900006291023 スペースの「お知らせ」に何かを表示させるためには、HTML の DOM 構造を解析して、データを表示したい部分の id か class に表示したい内容を追加します。但し、kintone の仕様変更があった場合は影響を受ける可能性が高く推奨できる方法ではありません。ですが他に手がなく現状ではこの方法を使って実装しています。とはいえ、全ての DOM 構造を解析するのは大変なので、今回は以下を参考に kintone-space-events.js を利用させていただきました。 kintone ポータルイベントが追加されたので、スペースイベント作ってみた。 https://qiita.com/Naoto00/items/a87312d5168de63543e5 後は、日付処理に Moment.js の後継的なライブラリにあたる Luxon を利用しています。 Luxon を使って kintone の日付や日時フィールドのフォーマットをカスタマイズする https://developer.cybozu.io/hc/ja/articles/900000985463 kintoneTop1.js (function() { "use strict"; // スペースの表示イベント処理 const space = new SpaceCustomize(8, 'kinotoeのサブドメイン'); kintone.events.on('space.portal.show', function(event) { funcEnvSetInfomation(); return event; }); // スペースのお知らせに最新の環境計測情報を表示 function funcEnvSetInfomation(){ // LTE-M CO2センサーサンプル（SORACOM）アプリから環境情報を取得しスペースのお知らせに表示 let params = { 'app': 'kintoneアプリのID', 'query': ' order by dateTime desc limit 1 ', }; // 最新の環境計測情報をアプリから取得 kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params, function(resp) { if (resp.records[0] !== null) { // 取得したデータから表示内容を編集 const dt = luxon.DateTime.fromSQL(resp.records[0]['dateTime'].value.replace('T', ' ').replace('Z', '')); let infoText = "<span style=\"font-weight:bold;font-size:120%;\">"+dt.plus({hours: 9}).toFormat('yyyy年MM月dd日 HH時mm分')+" 現在のオフィスの環境</span><br />"; infoText += "CO2濃度："+resp.records[0]['co2'].value+" ppm（1000ppmを超えたら換気を！）<br />"; infoText += "温度："+resp.records[0]['temp'].value+" ℃（28℃を超えたら熱中症に注意！）<br />"; infoText += "湿度："+resp.records[0]['humid'].value+" ％<br />"; infoText += "次回更新："+resp.records[0]['interval'].value+" 分後&nbsp;&nbsp;&nbsp;<a href=\"JavaScript:window.location.reload();\">表示更新</a><br />"; // スペースのお知らせに情報を表示 let info = space.getNtfWidget(); let elmText = info.getElementsByClassName("gaia-argoui-widget-menu"); elmText[0].style.display ="block"; elmText[0].style.marginTop ="1em"; elmText[0].style.marginLeft ="1em"; let newElm = document.createElement("div"); newElm.innerHTML = infoText; elmText[0].appendChild(newElm); } }); } })(); 通常ならアプリの設定画面で JavaScript プログラムをアップロードしますが、スペースのお知らせをカスタマイズする場合は、以下の kinotne のシステム管理から行います。 カスタマイズ表示の下の「JavaScript / CSSでカスタマイズ」を開きます。 以下の画面でライブラリィの追加と、ソースコードファイルをアップロードします。 以上で以下のように、スペースの「お知らせ」にCO2などの計測結果を表示できるようになります。 グラフなどはお知らせの標準機能で編集して出力できますので、以下のように組み合わせると SORACOM Lagoon の表示に近づけることができます。 おまけ（Windows アプリで通知） 普段PCに向かって仕事している間はCO2の上昇に気づきづらいため、Windowsフォームアプリケーション（.NET Freamwork）で以下のような通知する簡単なアプリを作成してみました。 興味ある方は以下にコードを公開しますので、お試しください。 設定メモ ・C# Windowsフォームアプリケーション（.NET Freamwork）のプロジェクト追加 ・ConfigurationManager 参照追加 　「ソリューションエクスプローラー」→「参照」右クリック→「参照の追加」 　アセンブリ：フレームワーク内にある「System.Configuration」にチェックを入れて「OK」。 ・NuGet で Newtonsoft.Json 13.0.1 を追加 　https://www.nuget.org/packages/Newtonsoft.Json/ 設定ファイル App.config <?xml version="1.0" encoding="utf-8" ?> <configuration> <appSettings> <add key="kintoneDomain" value="kintoneサブドメイン名" /> <add key="kintoneToken" value="kintoneトークン" /> <add key="kintoneAppId" value="kintoneアプリID" /> <add key="logFile" value="c:\work\AlertFromKintone\Error.log" /> </appSettings> <startup> <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.1" /> </startup> </configuration> フォーム Form1.cs using System; using System.Configuration; using System.IO; using System.Windows.Forms; namespace AlertFromKintone { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { label1.Text = ""; GetKintoneData(); timer1.Interval = 10 * 60 * 1000; // 10分毎に確認 timer1.Start(); } private void timer1_Tick(object sender, EventArgs e) { GetKintoneData(); } private void GetKintoneData() { DateTime dt = DateTime.Now; var dtNow = dt.ToString("yyyy/MM/dd HH:mm"); dt = dt.AddMinutes(-11); var kintoneDt = new DateTime(dt.Year, dt.Month, dt.Day, dt.Hour, dt.Minute, 0); var queryDate = kintoneDt.AddHours(-9).ToString("yyyy-MM-ddTHH:mm:ssZ"); var doQuery = " dateTime > \"" + queryDate + "\" order by dateTime desc"; var appId = ConfigurationManager.AppSettings["kintoneAppId"]; try { var json = KintoneTools.GetJsonData(doQuery, appId); if (json != null && json.totalCount > 0) { var co2 = (int)json.records[0].co2.value; if (co2 > 2500) { MessageBox.Show("室内のC02が " + co2.ToString() + "ppm です！\n危険ですので即座に換気してください！", "環境計測値警告", MessageBoxButtons.OK, MessageBoxIcon.Error); } else if (co2 > 2000) { MessageBox.Show("室内のC02が " + co2.ToString() + "ppm です！\n体調不良を避けるため換気してください！", "環境計測値警告", MessageBoxButtons.OK, MessageBoxIcon.Error); } else if (co2 > 1200) { MessageBox.Show("室内のC02が " + co2.ToString() + "ppm です！\n快適な環境にするため換気しましょう！", "環境計測値警告", MessageBoxButtons.OK, MessageBoxIcon.Error); } var temp = (float)json.records[0].temp.value; if (temp > 38) { MessageBox.Show("室内の気温が " + temp.ToString() + "℃ です！\n即座に冷房するか部屋から出てください！", "環境計測値警告", MessageBoxButtons.OK, MessageBoxIcon.Error); } else if (temp > 34) { MessageBox.Show("室内の気温が " + temp.ToString() + "℃ です！\n冷房してください！", "環境計測値警告", MessageBoxButtons.OK, MessageBoxIcon.Error); } else if (temp > 30) { MessageBox.Show("室内の気温が " + temp.ToString() + "℃ です！\n冷房しましょう！", "環境計測値警告", MessageBoxButtons.OK, MessageBoxIcon.Error); } label1.Text = dtNow + " 確認　CO2 " + co2.ToString() + "ppm　気温 " + temp.ToString() + "℃ 計測時刻 UTC " + json.records[0].dateTime.value; } else { MessageBox.Show("kintone から最新のデータが取得できません！", "環境計測値警告", MessageBoxButtons.OK, MessageBoxIcon.Question); } } catch (Exception ex) { File.AppendAllText(ConfigurationManager.AppSettings["logFile"], dt.ToString("yyyy/MM/dd HH:mm:ss") + " " + ex.Message); } } } } kintoneからデータを取得 KintoneTools.cs using Newtonsoft.Json; using System; using System.Configuration; using System.IO; using System.Net; using System.Text; namespace AlertFromKintone { public static class KintoneTools { private static readonly string domain = ConfigurationManager.AppSettings["kintoneDomain"]; private static readonly string apiUrl = "https://" + domain + ".cybozu.com/k/v1/records.json"; private static readonly string apiSinglUrl = "https://" + domain + ".cybozu.com/k/v1/record.json"; private static readonly string apiToken = ConfigurationManager.AppSettings["kintoneToken"]; private static readonly string logFilePath = ConfigurationManager.AppSettings["logFile"]; public static dynamic GetJsonData(string query, string appId) { var respons = GetRespons(query, appId); if (respons == null || respons.Contains("<!DOCTYPE HTML>")) { return null; } return JsonConvert.DeserializeObject(respons); } private static string GetRespons(string query, string appId) { ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls11 | SecurityProtocolType.Tls12; string url; if (query == "") { url = apiUrl + Uri.EscapeUriString("?app=" + appId + "&totalCount=true"); } else { url = apiUrl + Uri.EscapeUriString("?app=" + appId + "&query=" + query + "&totalCount=true"); } var request = WebRequest.Create(url); var enc = Encoding.GetEncoding("UTF-8"); request.Headers.Add("X-Cybozu-API-Token:" + apiToken); try { using (var respons = request.GetResponse()) { using (var stream = respons.GetResponseStream()) { var sr = new StreamReader(stream, enc); string text = sr.ReadToEnd(); sr.Close(); stream.Close(); return text; } } } catch (WebException) { DateTime dt = DateTime.Now; File.AppendAllText(logFilePath, dt.ToString("yyyy/MM/dd HH:mm:ss") + " " + "WebException. GET data = " + url + "\r\n"); return null; } } } } 参考情報 LTE-M CO2センサー RS-LTECO2 スターターキット https://soracom.jp/store/12112/ ** wifi版製品 RS-WFCO2 ** https://www.ratocsystems.com/products/subpage/wfco2.html SORACOM レシピ：IoTで、CO2と温湿度を計測し換気促進 https://soracom.jp/recipes_index/9972/ SORACOM GPS マルチユニット のデータを kintone に保存する https://qiita.com/yukataoka/items/c07b78f5151c29ac8858 request-promise https://www.npmjs.com/package/request-promise moment https://www.npmjs.com/package/moment Lambda の Node.js でもっといろんなパッケージを使いたいとき https://tech-lab.sios.jp/archives/9017 AWS Lambda Layersでnode_modulesを使う https://xp-cloud.jp/blog/2019/01/12/4630/ スペース表示イベント https://developer.cybozu.io/hc/ja/articles/900006291023 kintone ポータルイベントが追加されたので、スペースイベント作ってみた。 https://qiita.com/Naoto00/items/a87312d5168de63543e5 Luxon を使って kintone の日付や日時フィールドのフォーマットをカスタマイズする https://developer.cybozu.io/hc/ja/articles/900000985463 NuGet で Newtonsoft.Json 13.0.1 を追加 https://www.nuget.org/packages/Newtonsoft.Json/

動作環境 $ node -v v15.14.0 $ npm -v 7.7.6 $ npm list --depth=0 eslint@7.32.0 目的 eslint を使っていて、 while(1)を書くだけでeslintの警告が出るのをなんとかしたい。 コードを変えて警告を回避する方法 .eslintrc.json 設定を変更しない場合は、以下のように変更して回避する [NG] while (1) {} [OK] for (;;) {} .eslintrc.jsonを設定して回避する方法 .eslintrc.json 設定を変更して回避する場合は、以下のように指定する。 "rules": { "no-constant-condition": 0 }

はじめに 作成の動機はプレゼンやセミナーがWeb会議にシフトし、会場の空気感を感じない、発表時一人で話してる気がすることから、インタラクティブにしたいと思ったことです。 この手のアプリではCommentScreenがあるけど、無料版だと人数やアンケート回数の制限があったり、有料版の社内利用は決裁取得やらが面倒。 ネットで探してみると似たようなものを開発されてる記事があったので自分なりにカスタマイズして開発してみました。 Javascriptやnode.jsを扱うのは初めてでしたが、部署内のプレゼンや会議を盛り上げるツールができました。 本アプリの作成、記事執筆にあたり非常に参考にさせていただきました。ありがとうございます。heroku + electron でニコニコメソッドを作ってみました。その２（ルーム分け機能追加） 本記事ではアプリの紹介と利用方法を説明します。後日に別の記事で実装しながら自分が理解した内容と参考元アプリから改造して工夫した点を説明したいと思います。 アプリの動作イメージ コメント投稿画面(コントローラー)とコメント表示画面 アンケート画面 とりあえず使いたい方(64bit WindowsPC限定です) GitHubのhttps://github.com/mochiokun/nicomatsu-display/releases/tag/installer_win10_v2.0.0よりzipファイルをダウンロードして解凍してください。 「nicomatsu-display Setup 2.0.0.exe」を起動。 接続画面が表示されたら「nicomatsu」を入力。(デモサイトへの接続用) ルーム入力画面が表示されたら好きな名前を入力。 コントローラー画面とアンケート画面が表示される。 コントローラー画面や画面下部のQRコードを読み込んだスマートフォンで操作すると、PC画面にコメントが流れたりスタンプが表示されたり、アンケート結果に反映されます。 画面共有機能がついたWeb会議アプリ（Zoom、Teams、Webexなど）で、画面全体を共有すると共有資料の上にコメントやスタンプを重ねて共有可能です。 デモサイトではなく自分で使いたい方(Heroku利用で説明します。所要時間約10分) デモサイトはHerokuの無償枠で構築してるため、月間500時間までしか起動しません。またURLが公開されているので、ルーム名が被ってしまうと混線して他のプレゼン向けのコメントが流れてくる可能性もあります。 無料(2021年8月現在)で誰でも簡単に自分専用のアプリを構築する方法を説明します。 ※本説明は手段の一例です。Heroku以外のサーバーでもnode.jsが動作可能、かつインターネット接続されていればアプリケーションサーバーとして利用可能です。 今回の内容はGitHubのnicomatsu-serverのREADMEに記載している内容を少し易しめに説明しています。Git操作やサーバ構築など慣れている方には退屈な内容かと思います。 事前準備 GitHubのアカウント登録 HerokuへのデプロイをGitHub経由で説明するため。HerokuCLIでデプロイ可能な場合は不要。 Herokuのアカウント登録 無償で月500時間起動まで利用可能。30分アクセスがないとスリープして時間を消費しないので、1日16時間以上使わないのなら困ることはないはず。(クレジットカードを登録すれば月750時間まで無償枠が拡大されます。) アプリケーションサーバー構築 サーバー構築といっても全部ブラウザから操作するだけで、コマンド実行したり黒いターミナル画面とか出てこないので安心してください。 ソースコードを取得 GitHubのnicomatsu-server にアクセスして画面右上のForkボタンを選択。スマートフォンからのアクセスではForkボタンが表示されないのでPCでアクセスしてください。 (gitコマンド操作なしでの構築のためにフォークを利用している。認証機能を使いたい場合はフォークではなく、プライベートリポジトリを作成して利用を推奨する) 自身のアカウントにnicomatsu-serverがコピーされます。 Herokuでのアプリ作成 Herokuへログインしてダッシュボードを表示。 右上のNewを押してCreate new appを選択。 好きなアプリ名を入力してCreate appを選択。この名前がURLになる。 真ん中くらいにあるDeployment methodでGitHubを選択。 GitHubの認証情報を入力して接続する。 repo-nameにnicomatsu-severを入力してsearch。検索結果が下に表示されるのでconnectを選択。 画面を下にスクロールするとManual deployのエリアがあるので、Deploy Branchを選択。 画面上にログが出てきてしばらくすると、デプロイ成功した旨が表示される。 以上でアプリケーションサーバの構築は完了です。 クライアントアプリの使い方 Windows10ユーザーの方 本稿の「とりあえず使いたい方」に記載しているインストーラを取得していただき、接続画面でHerokuでのアプリ作成時に決定したアプリ名を入力してっ接続すれば利用可能です。 Macユーザの方 GitHubのnicomatsu-displayhttps://github.com/mochiokun/nicomatsu-displayにアクセスしてREADMEに従って操作をお願いします。（こちらはターミナル使います。） 最後に このアプリおよびHerokuでの構築に関して、セキュリティ面などの細かいことは気にしてません。重要な機密情報をコメントに書いてしまったりしないよう利用者へ呼びかけるよう気をつけてください。 気持ちセキュリティを高めたい場合は、nicomatsu-serverのTipsを参考に認証をONにするなどして活用ください。 スタンプ画像の変更・追加方法もTipsに記載してますので、盛り上がるスタンプなど追加してイベント事にご利用ください。 次回以降アプリの中身を紹介していく予定です。

目次 はじめに 開発環境 前提 生じた問題 対応策 まとめ 参考記事 はじめに この記事では、Vagrantを用いてnpm installを行おうとしたときに生じたエラーについて扱います。 私の開発環境は以下の通りですので、ホストOSがwindows環境の方などは注意してください。 なお、Laravelでの開発を行なっていますが、npmを用いてパッケージ管理をする場合、対処法は共通だと思われます。 開発環境 ハードウェア 項目 内容 OS mac OS Big Sur 11.5 端末種類 MacBook Air (Retina, 13-inch, 2020) プロセッサ 1.1 GHz クアッドコアIntel Core i5 メモリ 16 GB 3733 MHz LPDDR4X 　グラフィックス Intel Iris Plus Graphics 1536 MB ソフトウェア 項目 ホストOSバージョン ゲストOSバージョン Vagrant 2.2.13 - VirtualBox 6.1.16 - PHP 7.4.22 7.2.26 Laravel 6.20.32 5.5.28 node.js 16.0.0 8.16.2->10.16.2 npm 7.10.0 6.4.1->6.9.0 私の場合は、上記に加えて、チーム開発のためpackage.jsonが既に与えられている状態でした。 前提 Vagrantを用いて仮想マシン構築ができている 今回はvirtualboxを用いています。 仮想マシンに接続することができる vagrant sshで接続してください。 vagrantの使い方に関しては以下リンクを参照してください。 【Laravel超入門】開発環境の構築（VirtualBox + Vagrant + Homestead + Composer） 生じた問題 npm installを行うと、以下のようなエラーが出ました。 vagrant(terminal) npm ERR! path /home/vagrant/code/node_modules/acorn-dynamic-import/node_modules/acorn/package.json.2270336935 npm ERR! code ENOENT npm ERR! errno -2 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open '/home/vagrant/code/node_modules/acorn-dynamic-import/node_modules/acorn/package.json.2270336935' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent 対応策 まず、Vagrantの共有フォルダ上で'npm install'が動かない場合の対処法およびnpm トラブルシューティングを試してみてください。 私の環境下では、上記方法でも解決しませんでした。そのため、以下の対処を行いました。 vagrantにnvmをインストールした。 nvmのインストール方法はこちら(Vagrantで【nvm】を使用して《node.js》と《npm》を入れる方法)を参照してください。 nvmでなくても、node.jsとnpmのバージョン管理ができるものであれば良いです。 その後、nvmを用いて、node.jsとnpmのバージョンアップを行いました。 用いるべきバージョンは、各人によって異なります。 上記問題の原因は、package.jsonにおいて求められているnode/npmのバージョンが、ゲストOS環境のnode/npmバージョンと一致していないことにあります。 そのため、ホストOSのnode/npmのバージョンがpackage.jsonの必要とするバージョンを満たす場合、上記URLの「ホスト側でnpm installする」ことで解決することになります。 ホストOS, ゲストOSのどちらもがnode/npmのバージョン条件を満たさないために、エラーが残ってしまっていたみたいです。 私の場合は、nodeを10.16.2にアップグレードすることで利用可能になりました。 バージョンを上げすぎてもpackage.json側の要件によってはエラーが生じるため、いくつかバージョンを変えて試してみてください。 まとめ Vagrantの共有フォルダ上で'npm install'が動かない場合の対処法 npm トラブルシューティング node.jsとnpmのバージョンを、package.jsonの条件にしたがってアップデートする。 参考記事 gitにissueがありました。 NPM Install failing on clean homestead box

リモートコンテナ用のdockerイメージ（Debian11, Python3.8）の環境でnodeを使いたかったので入れた いろんなOSさわると、遭遇するエラーもさまざま 入れた対象OS root ➜ /workspaces $ lsb_release -a No LSB modules are available. Distributor ID: Debian Description: Debian GNU/Linux 11 (bullseye) Release: 11 Codename: bullseye Dockerファイルに記載してnvmとnodeをインストール（Rebuild Containerで実行して1分かからず） 操作しているユーザー環境変数の設定はしていない apt upgrade はしなくても良い node install ではビルドしない（-s 指定しない） install.sh が実行されると、/usr/local/share/nvm に nvmが入っていることを気づかずにやっていてつまづいた 作成したDeockerfile（https://gist.github.com/ssugimoto/acd7fe5d25b9adaf149dd3c8a3bdbf2a ）、以下も同じ FROM mcr.microsoft.com/vscode/devcontainers/python:3.8 RUN apt-get update \ && apt-get -y install curl \ && apt-get autoremove -y \ && apt-get clean -y \ RUN apt-get upgrade \ && apt-get -y install curl ENV NVM_DIR /usr/local/share/nvm ENV NODE_VERSION 12.22.1 # # Install nvm with node and npm RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash \ && . $NVM_DIR/nvm.sh \ && nvm install $NODE_VERSION \ && nvm alias default $NODE_VERSION \ && nvm use default WORKDIR /workspaces 入れたバージョンの確認 root ➜ /workspaces/test $ root ➜ /workspaces/test $ nvm --version 0.38.0 root ➜ /workspaces/test $ node --version v12.22.1 root ➜ /workspaces/test $ npm --version 6.14.12 root ➜ /workspaces/test $ python --version Python 3.8.11 エラーの対応 /bin/sh: nvm: not found docker , "bash: nvm: command not found" nvm コマンドがありません。 手動でインストールすると発生しないけど、Dockerfileだと発生する RUN コマンド１行で（まとめて）記載する必要があるんだけど、１行で記載しても解決できず。 そもそもnvmがインストールされる場所が想定と違ってた 参考 その１） https://zenn.dev/uttk/articles/a7b085c7774ae9 こちらでは、alpine linux のため少し異なる。環境変数適用が違う。Ubuntuの記載がある。 その２）https://stackoverflow.com/questions/25899912/how-to-install-nvm-in-docker こちらの stack overflowを参考にしました その３）https://gist.github.com/remarkablemark/aacf14c29b3f01d6900d13137b21db3a#file-dockerfile こちらも 参考にしました。ディスカッションが最もあり参考になる。 debianでのDockerファイルにnvm installを記載する例、ここでも /usr/local/nvm のパスで自身の環境とは一致しなかった ENV NVM_DIR /usr/local/nvm ・・・ . $NVM_DIR/nvm.sh の２つの箇所、 /usr/local/nvm にはインストールされないので変更が必要 なぜ、node用のリモートコンテナを使わないのか VSCodeリモートコンテナ Debian10 node12（node12または14）の環境が入っているOS Debian10ではPython3.7がインストール済で、Python3.8 を sudo apt-get install python3.8 ではインストールできなかった Pyhon3.8を使うには いくつかの xxx-devライブラリを入れ、 make altinstall する必要があり、コンテナが使えるまでの時間が長すぎた Dockerファイルに書かないで、通常のインストール ほぼ、以下のコマンド入る（sudo ついてるけど、rootで作業しています） # sudo apt update # sudo apt upgrade # sudo apt-get install curl nvm のインストール # curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash # nvm --version # nvm install v12.22.1 コンテナビルドに続いて Amplif cli 入れたら３分くらいかかった（176sec） devcontainer.json　に "postCreateCommand": "npm install -g @aws-amplify/cli@5.3.1", を追記した場合に、npm install が3分かかった npm install ログの最後 + @aws-amplify/cli@5.3.1 added 1404 packages from 775 contributors in 176.666s