ローカル環境を構築するのに、いまだに苦労している私です。 最近Vue.jsでの実装のため、Node.jsとnpmをポータブルバージョンで環境構築しました。 何とか構築は終わったのですが、やり方を忘れてしまいそうだったので、ここに手順をまとめてみました。 かなり初心者向けなので、予めご了承ください。 そもそも、Node.jsとnpmは何者か？ Node.jsとnpmについて、超ざっくりに説明すると、 Node.jsは、サーバーサイドで稼働するJavaScript nmpは、Node.jsのパッケージを管理するツール となります。 パッケージとは、元々用意されている便利な機能をまとめたものです。 Node.jsとnpmをダウンロードする まずは、Node.jsとnpmを使用できるようにします。 zipファイルをダウンロード Node.jsのダウンロードページにアクセスします。 今回はzip形式で取得したいので、「Windows Binary(.zip)」を選択します。 32-bitか64-bitにするかは、お使いのPC環境によって異なります。 ダウンロードしたzipファイルは、ローカルディスクのDドライブに解凍しておきます。 cmdファイルの作成 解凍したフォルダ内に、「任意の名前.cmd」のファイルを作成します。 ファイルは「エディタ」か「メモ帳」で作成してください。 作成したファイル内に、下記の記載をします。 任意の名前.cmd @echo off set PATH=%PATH%;%cd% set NODE_PATH=%cd%\node_modules\npm\node_modules;%cd%\node_modules\npm cmd このとき、「メモ帳」を使って保存する場合は、文字コードをANSIにしないと上手く機能しません。 文字コードを確認するには、ファイルの「名前を付けて保存」をクリックします。 表示されるポップアップの「保存」ボタンの横に、文字コードが表示されていますね。 コマンドプロンプトで操作 先ほど作成したcmdファイルをダブルクリックすると、コマンドプロンプト（黒い画面）が開きます。 ここで、下記のコマンドを入力し、バージョンが確認できれば問題ないです。 cmd node -v npm -v パッケージをインストールできるようにする パッケージをインストールするには、プロキシ設定をする必要があります。 今回は、Vue.jsをインストールする際の手順をまとめます。 コマンドプロンプトで操作 先ほど作成したcmdファイルをダブルクリックして、コマンドプロンプトを出します。 コマンドプロンプトを立ち上げたら、下記のコマンドを入力します。 cmd npm -g config set proxy http://プロキシサーバアドレス:ポート npm -g config set https-proxy http://プロキシサーバアドレス:ポート npm -g config set registry http://registry.npmjs.org/ ご自身のプロキシサーバアドレスとポートの調べ方については、こちらが参考になります。 環境変数を設定 続いて、環境変数の設定方法です。 環境変数とは、OSそのものが持っている変数のことです。 [Windows]＋[R]キーで「ファイル名を指定して実行」を表示させます。 そして、「sysdm.cpl」と入力して実行します。 システムのプロパティが表示されますので、詳細設計タブをクリックします。 そして、詳細設定タブの下にある「環境変数」ボタンを押します。 「環境変数」画面が表示されると、ユーザ環境変数とシステム環境変数の2種類があります。 ここでは、ユーザ環境変数に「新規」ボタンで、下記の変数と値を追加します。 HTTP_PROXY http://プロキシサーバアドレス:ポート HTTPS_PROXY http://プロキシサーバアドレス:ポート 表にすると、次のような感じです。 変数名 値 HTTP_PROXY http://プロキシサーバアドレス:ポート HTTPS_PROXY http://プロキシサーバアドレス:ポート HTTP_PROXYとHTTPS_PROXYは、プロキシ設定やnpmで使用する変数です。 次に、ユーザ環境変数にPathという変数が登録されているかと思います。 Pathは、Node.jsコマンドを利用できるようにするための変数です。 Pathを選択し、「編集」ボタンを押します。 「環境変数名の編集」画面が表示されたら、「新規」ボタンを押して、Node.jsの解凍ファイルが格納されているフォルダのパスを追加してください。 例えば、D:¥〇〇〇のような感じです。 Vue.jsをインストール 最後に、コマンドプロンプトに下記のコマンドを入力して、Vue.jsをインストールします。 cmd nmp install -g @vue/cli npm install -g @vue/cli-service-global 無事インストールされているか、下記のコマンドでバージョン確認してみましょう。 vue -V Vue.jsのインストールがうまくいかない場合は、IEを起動し、Google画面を開いてから、コマンドプロンプトでインストールのコマンドを入力してみてください。 こうすることで、プロキシの認証ができるようになります。 終わり これで、Windows10でNode.jsとnpmをポータブルに活用する方法のまとめは以上になります。 ローカル環境を立ち上げるのにも一苦労しますね…。 なので、こうして手順をまとめる機会があって良かったです。 ここまで読んでいただき、ありがとうございました。 参考記事

TL;DR Node.js の python-shell パッケージを使うと VSCode 拡張機能内で Python が呼び出せます。 つくったもの VSCode の拡張機能は TypeScript で開発しますが、JavaScript や TypeScript に不慣れなため、Python で書きたいなと思っていました。調べると python-shell という Node.js のパッケージがあり、これを使えばできるのでは？、と思いやってみました。 動かすと以下のような感じです。見栄えしないですが、右下のメッセージは Python から出したものです。 やった手順 Your First Extension を作る VSCode 拡張機能の開発環境を作るのは、元々 VSCode を使っていれば非常に簡単です。以下の記事に従っていけばすぐにデバッグ環境が整います。 python-shell を追加 npm install python-shell で python-shell を追加します。その他の変更点は以下の通りです。 pn11/vscode-extension-with-python/compare/Your-First-Extension...For-Qiita README.md などは無視してもらって、Your First Extension を元に自分の手で変更したのは python/hello.py と src/extension.ts だけです。 Python 側 python/hello.py が拡張機能から呼び出すスクリプトで、今回は第一引数をプリントするだけのものにしています。Python2 でも Python3 でも動きます。 hello.py from __future__ import print_function import sys print(sys.argv[1]) TypeScript 側 呼び出し側の src/extension.ts ですが、まず L. 4 で python-shell をインポートしています。 extension.ts import { Options, PythonShell } from 'python-shell'; L.24 - L.30 で インストールされた拡張機能への path と、Python インタプリタへの path を取得しています。 extension.ts // ログ出力などは省略 let ext_path = vscode.extensions.getExtension('undefined_publisher.vscode-extension-with-python')?.extensionPath; let pythonpath = vscode.workspace.getConfiguration('python').get<string>('pythonPath'); 拡張機能名 'undefined_publisher.vscode-extension-with-python' は作った拡張機能によって変わります。vscode.workspace.getConfiguration('python').get<string>('pythonPath') は VSCode の現在のワークスペースで選択しているインタプリタになります。 L.31 - L.49 は Python スクリプトを作らず、Python の文をそのまま実行する例です (略)。 L.51 - L.69 が python/hello.py を呼び出しているところです。 extension.ts // ログ出力などは省略 let options2: Options = { mode: 'text', pythonPath: pythonpath, pythonOptions: ['-u'], scriptPath: ext_path, args: ['Hello world from Python'] }; PythonShell.run('python/hello.py', options2, function (err, res) { if (err) { console.log(err); throw err; } const res_str: string = (res || [''])[0]; vscode.window.showInformationMessage(res_str); }); まず python-shell に渡すための Options オブジェクトを作り、pythonPath, scriptPath, args などを設定します。オプションについて詳細は公式情報を参照してください。 scriptPath は実行するスクリプトの置かれた path です。実行したいスクリプトは 拡張機能のインストール場所/python/hello.py にあるので、 scriptPathを拡張機能のインストール場所に設定しておきます。 PythonShell.run('python/hello.py', options2, function (err, res) の部分で実行するスクリプトとオプションを指定して実行しています。 実行時にエラーが起こると if (err) {} の中が実行されます。正常に実行されると res に標準出力が改行で区切ったリストで入っているので1、1つ目の要素を取得して VSCode 内に表示しているのが vscode.window.showInformationMessage(res_str); の部分です。 おわりに VSCode 拡張機能から Python を呼び出す方法を紹介しました。筆者のように TypeScript は分からないけど、Python なら書けるという人にとっては便利なのではないかと思います2。本記事の TypeScript は雰囲気で書いているので、書き方がおかしいなどあればご指摘ください。 オプションの mode を json や binary にすると変わります。 ↩ もちろん、エディタとやりとりするには VSCode の API を使うので TypeScript で書く必要がありますが、例えば Web上の API にアクセスする処理を既に Python で書いている、といった場合に使えるかと思います。 ↩

はじめに Node.jsのバッチを保守していると、データ増加に伴いメモリー不足で処理が落ちてしまうことがありました。 エラー発生時にはChatworkに通知が飛ぶようにしていたのですが、そのときは通知が飛びませんでした。 そこで、メモリー不足で処理が落ちる前に、ある程度やばそうな量のメモリーを使っている時点で、警告を飛ばすようにしてみました。 処理内容 プログラムは次のような状態でした。 yabaiyo.js var メモリーを圧迫する変数 = [] function すごく繰り返す処理 (繰り返す回数) { for (var i = 0; i < 繰り返す回数; i++) { メモリーを圧迫する変数.push(new Array(10000)) } } try { すごく繰り返す処理(1000000) } catch (e) { チャットワークに警告を送信('やばいよ') } function チャットワークに警告を送信 (メッセージ) { console.log(メッセージ + 'をチャットワークに通知しました。') } これを実行すると、下記のようなログが出て処理が止まります。 <--- Last few GCs ---> [5414:0x100000000] 4874 ms: Mark-sweep 1824.4 (2051.4) -> 1824.4 (2044.9) MB, 692.6 / 0.0 ms (average mu = 0.075, current mu = 0.014) allocation failure GC in old space requested <--- JS stacktrace ---> ==== JS stack trace ========================================= (省略) FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory (省略) zsh: abort node yabaiyo.js やばいのにChatworkに通知が飛びません。 改善 これを防ぐために、次のような関数を用意しました。 多分ほぼアウトオブメモリー.js var v8 = require('v8') function 多分ほぼアウトオブメモリー () { var stats = v8.getHeapStatistics() var 五百メガバイト = 500 * 1024 * 1024 var ここを超えるとやばそう = stats.heap_size_limit - 五百メガバイト return stats.total_heap_size > ここを超えるとやばそう } 「すごく繰り返す処理」の中に、「多分ほぼアウトオブメモリー」を判定する条件文を入れて、やばそうだったら例外を投げて「チャットワークに警告を送信」するようにしました。 function すごく繰り返す処理 (繰り返す回数) { for (var i = 0; i < 繰り返す回数; i++) { メモリーを圧迫する変数.push(new Array(10000)) // ↓ ここに追加 if (多分ほぼアウトオブメモリー()) { throw new Error('多分ほぼアウトオブメモリー') } } } ファイルの全体像は下記になります。 yabaiyo.js var v8 = require('v8') function 多分ほぼアウトオブメモリー () { var stats = v8.getHeapStatistics() var 五百メガバイト = 500 * 1024 * 1024 var ここを超えるとやばそう = stats.heap_size_limit - 五百メガバイト return stats.total_heap_size > ここを超えるとやばそう } var メモリーを圧迫する変数 = [] function すごく繰り返す処理 (繰り返す回数) { for (var i = 0; i < 繰り返す回数; i++) { メモリーを圧迫する変数.push(new Array(10000)) if (多分ほぼアウトオブメモリー()) { throw new Error('多分ほぼアウトオブメモリー') } } } try { すごく繰り返す処理(1000000) } catch (e) { チャットワークに警告を送信('やばいよ') } function チャットワークに警告を送信 (メッセージ) { console.log(メッセージ + 'をチャットワークに通知しました。') } こうすることで、実行したときに次のように出力されます。 $ node yabaiyo.js やばいよをチャットワークに通知しました。

Webシステム開発において、色々なサーバサイドJavaScript実行環境が登場してきていますが、その中でもNode.jsは根強い人気があります。 MacにNode.jsをインストールするために、nodebrewを利用してインストールする方法をまとめました。 nodebrewをインストールする Node.jsのバージョンを切り替えやすくするため、まずはnodebrewをインストールします。 $ curl -L git.io/nodebrew | perl - setup ~/.bash_profileに環境変数を追加します。 $ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile 設定を反映させるために、以下のコマンドを実行するか、ターミナルを再起動します。 $ source ~/.bash_profile Node.jsをインストールする nodebrewを使ってNode.jsをインストールします。 $ nodebrew install-binary stable #安定版の場合 $ nodebrew install-binary latest #最新版の場合 $ nodebrew install-binary v14.7.0 #バージョン指定する場合 以下のコマンドでインストールされているか確認します。 初めてのインストールの場合、まだ利用するように設定していないため、「current: none」になっていると思います。 $ nodebrew ls v14.7.0 current: none 「nodebrew use」で利用したいバージョンを指定します。 $ nodebrew use v14.7.0 再度バージョンを確認してみると、以下のように「current」にバージョンが表示されているはずです。 $ nodebrew ls v14.7.0 current: v14.7.0 以上で設定は完了です。

背景 備忘録。 AWSLambdaの対応ランタイムは10が、7月ごろ対応期限だったから急遽アップデート。 1. brewのアップデート brew update brew upgrade brew doctorでこの際にチェック 2. nodenvにnode 14の最新を入れる nodenvで最新バージョンが取得出来ないので、これを参考してany envを使えるようにした。https://qiita.com/turara/items/6b7f4a8e3770a7074072 Node.js 14.16.1を選択。LTSだから長期サポート。 3. パッケージをメンテナンス パッケージ・モジュール・ライブラリ。言葉統一しよう。これからはパワーリフティングしよう。 ncuコマンドでマイナー・バッチアップデートから順にアップデートしつつ、gitへコミットしていく。

自作したアプリの仕様を解説します アプリ名：ひとこと日記ver2.0 これは見出し2 これはリスト これはリスト

はじめに 以前、こういった記事を書きました。 https://qiita.com/RAWSEQ/items/9467c4194849cfa548b4 その後APIドキュメント等参考にふと試して気づいた事といえば・・ https://docs.m5stack.com/en/api/m5paper/epd_canvas .pngファイル読めるじゃん！（時間かかるけど）という事はImageMagic変換必要なし。 画像を回転する必要ないじゃん！（むしろM5Paperとしては横型がデフォまである） 結論：Node.js(Puppeteer)で十分！！ となりました。という事で・・・ M5Paper-WebServiceなるものを用意しました！！ https://github.com/RAWSEQ/m5paper-webservice Windows Mac Linux 対応しています(多分) |【常時稼働しているPC,サーバー】 |（Webデザイン） | |　↓ | |（画像変換(screenshot.png)）| ===> (WIFI) ===> M5Paper ----------------------------- 常時稼働のPCが必要です。 構造としてはPCにてNode.js内で元の Webデザインとなるhtml,css,js用のWebサービス を立ち上げ、 更に、(screenshot.png)にアクセスすると Webデザインを画像変換して提供する ようになっています。 何故M5Paperに処理を委ねないのかという疑問があると思いますが、主に以下の点において有利です デザインが自由にできるから M5Paperをシンクライアントとするので電池長持ちになる（数日どころでなく数カ月単位） インストール・使い方 Node.js環境が無ければインストールします。（最新で問題ない） Githubから git や zip でダウンロードして展開します。 展開した /m5paper-webservice フォルダ内でターミナルのコマンド実行 npm install 同ターミナルで以下を実行して、（なにも反応が無いので、そのまま立ち上げたまま） node index.js ブラウザから http://localhost:3001/screenshot.png にアクセスすると 画像の様なHello, World.画像が表示されます。 元のHTMLといえば http://localhost:3001/view.html で確認できます。 フォルダ内の /web/view.html を編集すると反映されます。 ※ M5Paperから参照できるように、設定したポート3001はローカル（プライベート）ネットワークからアクセスできるようにポート開放する必要があります。 更に指定によっては外部サイトも表示可能 例) http://localhost:3001/screenshot.png?url=https://www.yahoo.co.jp/ なので、[url]パラメータの部分をよろしく遊ばせたら、ファーストビュー閲覧限定のウェブブラウザもどきが完成するという・・（外部ページを閲覧する場合はネット環境（表示速度）によって失敗することがあります。こちらは調査中です） （おまけ：http://localhost:3001/screenshot.png?url=http://localhost:3001/dash/index.html から例の日めくりも確認できます。フォントはフリーライセンスに切り替えた為、ひと狩り行きたくなる様な感じになってます） (RAWSEQ/m5paper-webservice)内の私が作った画像,HTML,CSS,JS類は再利用OK(MITライセンス)なのでデザインが得意でない方も自己の判断でご利用ください。 M5Paper側に書き込むプログラム （Arduinoの書き込み方は既にご存じかと思いますので省略） Arduino_sketch #include <M5EPD.h> #include <WiFi.h> M5EPD_Canvas canvas(&M5.EPD); # バッテリー残量表示関数 int Chk_battery() { char buf[20]; uint32_t vol = M5.getBatteryVoltage(); if(vol < 3300) { vol = 3300; } else if(vol > 4350) { vol = 4350; } float battery = (float)(vol - 3300) / (float)(4350 - 3300); if(battery <= 0.01) { battery = 0.01; } if(battery > 1) { battery = 1; } //uint8_t px = battery * 25; sprintf(buf, "BATT%d%%", (int)(battery * 100)); canvas.drawString(buf , 0, 0); return (int)(battery * 100); } # メインプログラム void setup() { M5.begin(); # ↓こちらが画面の回転。引数を0 → 90とすると縦型になります M5.EPD.SetRotation(0); M5.EPD.Clear(true); WiFi.begin("【WIFIのSSID】", "【WIFIのPassword】"); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } # キャンバスサイズ(横,縦)こちらも回転に応じて調整 canvas.createCanvas(960, 540); canvas.setTextSize(3); canvas.drawPngUrl("http://【M5Paper-webserviceのIP】:3001/screenshot.png"); Chk_battery(); canvas.pushCanvas(0,0,UPDATE_MODE_GC16); # 10秒待つ。失敗する様であれば調整 delay(10000); # 3時間おきに実行 M5.shutdown(10800); } void loop() { } M5Paperデバイス特性の注意： USBにつながっている際はどんな事があろうとも常時電源ONの状態になります。 USBケーブルを抜いて再起動完了後、背面の白いボタンを1回押すと電源停止。(3時間後にまた起動)　この状態で安定します。 通常はサイドの黒いダイアルを3秒押し込むと再起動（起動周期の調整にも使えます） 何かあったら、背面の白ボタン1回押す→サイドの黒いダイアルを3秒押し込みで何とかなると思います。 あと、M5.shutdown(10800); の記述は環境変数の設定の様なものなので、その後 M5.shutdown(); と宣言しても、電源停止しても永久に3時間後に再起動し続ける。完全停止したい場合は一度 M5.shutdown(0); と宣言しないといけない。