- 0.1. npm testについて npm run testとの違い
- 0.2. Docker上でffmpegを用いたBlobをエンコードする処理を実装する(Next.js版)
- 0.3. 複数チームでも使える Web スコアボードアプリを作りました
- 0.4. Electronで自動アップデートをしたい
- 0.5. Vitest でデフォルトの exclude ルールをベースに Project のルールを設定する。
- 0.6. 初心者がブログサイトを作成する①(作成方法を決める)
- 0.7. [React] React + Vite + TS 環境の構築
- 0.8. UnityとNode.jsにてAnt+心拍計の数値を取得、VRMに反映したかったのだが…2024
- 0.9. pnpm で使用するnodeバージョンを固定する&自動インストールする
- 0.10. 初心者によるReact,Node.js,MySQLの接続
- 0.11. IBM Cloud Object Storageを使ったWebアプリ開発
- 0.12. Exploring NPM Packages for Creative Name Generation, AI, and More
- 0.13. Lambdaのファイルディスクリプタ上限って、少なくない?
- 0.14. workbox-webpack-plugin@6.6.1: The engine “node” is incompatible with this module. の対処法【windows】
- 1. エラー内容
npm testについて npm run testとの違い
# npm testとは
npm testとはnode.js環境でよく使用するコマンドである。
– どのようなコマンド動作にするかは開発者側で決められる
– testには任意のコマンドを指定できる(任意のコマンドをnpm testに置き換えられる)
– 指定せずにこのコマンドを使っても何も返ってこない### npm testを動作させるために何をする?
1. package.jsonをアクティブ化し
1. 必要なパッケージをインストールし
1. package.jsonの内容を一部(test)を定義する部分を書き換える**実際の流れ**
(今回は”cowsay”というかわいい馬を表示するコマンドを用いるけど、任意のコマンドで大丈夫だよ)
1. “npm init”をコマンドラインに入力、実行
英文がたくさん表示されるが無視してEnterキーを押しまくる
1. “npm install cowsay –save-dev”を実行
1. package.jsonを
“`:before
“scripts”: {
“test”: “echo \”Error: no test
Docker上でffmpegを用いたBlobをエンコードする処理を実装する(Next.js版)
## この記事は何
最近Next.js上でffmpegを用いたBlobのデータのエンコードを行う処理を実装しました。
実装の方法があまり調べても出てこなかったので記事としてまとめます。## 実装の流れ
### Dockerの準備
まずはDockerで環境の準備を行います。
今回はNext.js上で実装をする想定なのでdocker-compose.ymlの設定はNext.jsの開発環境サーバーを立ち上げる前提にしています。
ポイントはDocker内で`ffmpeg`のインストールを行っているところです。
こちらでインストールしていた`ffmpeg`をこの後利用します。“`Dockerfile:Dockerfile
FROM node:[versionを指定]-alpine
WORKDIR /appCOPY . /app
RUN apk add –update –no-cache ffmpeg
RUN npm install
“`“`docker-compose.yml
services:
app:
build:
context: .
複数チームでも使える Web スコアボードアプリを作りました
## はじめに
未経験採用から半年の新人エンジニアである私が、Web スコアボードアプリを作成しました。
https://unscoreboard.unreact.jp/?from=qiita
未経験での採用から約半年、React について勉強させていただいたり、Liquid を使った Shopify アプリの開発を行なってきました。
最近は、React、Next.js、TypeScript を使って簡単な Web アプリを開発しています。
そして、今回は Web スコアボードアプリを開発させていただくことになりました。
この記事では、このアプリの開発に至った経緯から、実装内容、反省点について書いていきます。## Web スコアボードを開発することになった経緯
スコアボードアプリを作ることになった経緯から書いていきます。
それは、複数チームで使える良い感じの Web スコアボードアプリが見当たらなかったからです。
弊社では、余暇時間に「モルック」をする文化があります。
「モルック」というのは、12 本の木の棒を立てて並べ、離れたところから別の棒を投げて倒し、点数を競
Electronで自動アップデートをしたい
:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::# Electronで自動アップデートをしたい
知り合いの自転車屋さんに、商品のポップを簡単にデザインできるツールを作れないか相談を受けたので、Electronを使ったデスクトップアプリで作ってみることにしました :bike:実際に使ってもらって、そのフィードバックを反映した新しいバージョンのアプリを配信したいのですが、毎回exeファイルを送ってインストールしなおしてもらうのはちょっと手間ですよね。
こちらが新しいバージョンのアプリを登録したら、アプリの起動時にアップデートチェックが走って勝手に再インストールされる仕組みを導入してみます。# Electron自動アップデートの概要
軽く調べてみたところElectronアプリの自動アップデートを実現したい場合、いくつかの方法があるようです。https://
Vitest でデフォルトの exclude ルールをベースに Project のルールを設定する。
## はじめに
– Vitest を導入した Project で Vitest に参照してほしくない path が出てきた
– 今回はテストカバレッジの集計から除外したかった
– デフォルトの設定を維持しつつ設定を追加したい場合以下のように設定すれば良い## default 設定を維持したまま除外する
`coverageConfigDefaults` を import し、 `Other exclude config here …` と記載している場所に設定を追加すれば良い。
“`diff_typescript:vite.config.ts
import { defineConfig } from “vite”;
+ import { coverageConfigDefaults } from “vitest/config”;export default defineConfig({
test: {
exclude: [
+ …coverageConfigDefaults.exclude,
// Ot
初心者がブログサイトを作成する①(作成方法を決める)
初心者が学習しながら作成しています。
誤っている部分等あれば教えていただけると嬉しいです!# 今回行うこと
初投稿です!
自分用のブログサイトを勉強しながら作っていこうと思っています。
> ブログ用サイトなのでとりあえず静的サイトとして動作させる予定です。今回は**作成方法**や**使用するツール**を決めていきます。
# 目的の明確化
### 何を発信したいのか?
– 日記
– 技術ブログ
etc…### デザイン・機能・コスト
– デザインはこだわりたい
– 後々機能を自由に追加できるようにしたい!
– あまりお金をかけたくない# プラットフォームの選択
### CMSかSSGか
#### CMS(コンテンツマネジメントシステム)の場合
– 短期間で構築ができる(**WordPress**など)#### SSG(静的サイトジェネレーター)の場合
– 軽量で高速
– Gitで管理できる
– デザインのカスタムや機能拡張の自由が利きそう?今回はデザイン(**React**を使用したい)やSEOを考慮して**SSG**にしたいと思います!
> SSGはGat
[React] React + Vite + TS 環境の構築
## 環境
– M1 Mac
– macOS Ventura 13.7
– Node.js v20.17.0
– NPM 10.8.2## Node.jsのインストール
### 管理用ツール(nvm)をダウンロードする
nvmとは、Node Version Managerの略称でありNode.jsのバージョン管理ツールです。
– Node.jsは更新頻度が高いため、バージョン管理ツールの利用が推奨されています。今回はmacOS環境想定のため、
下記コマンド([nvm公式より参照](https://github.com/nvm-sh/nvm))でダウンロードを行います。
“`
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
“`
コマンドの処理が完了した後、
ターミナルを再起動し以下コマンドでバージョンが表示されることを確認します。
“`
nvm –version
“`
### nvmを利用して、Node.jsのLTS版をインストールする
nvmを利
UnityとNode.jsにてAnt+心拍計の数値を取得、VRMに反映したかったのだが…2024
私が以前使用していた
Advanced ANT+はもうなくなってしまったので以下のページを参考に行いました。
心拍を表示するところまではうまくいったのですが、うまくいかず停滞中です。参考にさせていただいたページ
https://qiita.com/GenkiOkuma/items/bc0469fc3b29ed2f88cf
私の前提知識:node.jsに関して全くの無知。
ode.js(ノードジェイエス)は、JavaScriptというプログラミング言語を使って、サーバーサイド(裏方)で動くアプリケーションを作るための環境。もっと簡単に言うと、普通はウェブページを作るのに使うJavaScriptを、パソコンやサーバーの中で動かして色々な処理を行えるようにするツール
ということだけ理解。もっと勉強します。インストール
npm install ant-plus
※node.jsではなくコマンドプロンプトで実施する。C:\ant_plus を作成し、
cd C:\ant_plus でフォルダに移動
npm install ant-plus でインストールした
![スクリーン
pnpm で使用するnodeバージョンを固定する&自動インストールする
“`package.json
{
“name”: “web”,
“version”: “1.0.0”,
“private”: true,
“engines”: {
“node”: “20.10.x”,
“npm”: “10.8.x”,
“pnpm”: “8.7.x”
},
…
}
“`このように書くことで、開発に使うnodeのバージョンを指定することができます。
開発者毎でフロントのコードがビルドできる・できないを解消するためによくやるやつですね。仮にバージョンが異なるnodeでビルドしようとすると、次のようなエラーが出てビルドが早期エラー終了します。
“`
$ v18.17.0
v18.17.0$ pnpm dev
Your Node version is incompatible with “/Users/lapis/Projects/web”.
Expected version: 20.10.x
Got: v18.17.0This is happening because the package
初心者によるReact,Node.js,MySQLの接続
## はじめに
React,Node.js,MySQLを使ってデータベースをフロントエンドを接続し、データを画面に表示する手順を説明します。⚠︎初心者なので不備があれば指摘してください!!
### 必要なツールのインストール
以下のツールをインストールします。
* Node.js
* MySQL
* Vite
#### ViteでReactプロジェクト作成
1. プロジェクトフォルダを作成し、clientとserverフォルダを作ります。
2. clientフォルダ内で以下のコマンドを実行し、ViteでReactプロジェクトを作成します。
“`
npm create vite@latest .
npm install
npm run dev
“`
## MySQLでデータベースとテーブル作成
次に、MySQLでデータベースとテーブルを作成し、サンプルデータを挿入します。
MySQLにログインし、以下のコマンドを実行してデータベースとテーブルを作成します。
“`ruby:sql
CREATE DATABASE my_project_db;
USE my_project_db;C
IBM Cloud Object Storageを使ったWebアプリ開発
## はじめに
この記事では、IBM Cloud Object Storageを活用したファイルのアップロード、ダウンロード、削除機能を備えたWebアプリの開発方法について、デモアプリを通して紹介します。
IBM Cloud Object Storageは、高い可用性と耐久性を持ち、画像やドキュメントなどの非構造化データを効率的に管理できるクラウド・ストレージ・サービスで、複雑なインフラ構築をせずに手軽に利用できます。
この記事を通じて、以下の技術に関する知識を得ることができます。
– IBM Cloud Object Storageのリソース作成と接続方法
– Webアプリにおけるファイルのアップロード、ダウンロード、削除の実装方法## デモアプリの概要
デモアプリのソースコードは[GitHub](https://github.com/mountln/icos-demo)にて公開しています。
このデモアプリには、次の機能があります。
– IBM Cloud Object Storageへのファイルアップロード
– ファイルの一覧表示
– ファイルのダウンロード
– フ
Exploring NPM Packages for Creative Name Generation, AI, and More
In the world of software development, leveraging packages from platforms like NPM can save time and effort, offering pre-built solutions for various functionalities. From creative tools like name generators to AI-powered features, the range of available packages is impressive. This article dives into some notable packages, providing insights on their use cases and relevance for developers.
## Franchise Name Generator
One interesting tool for those working in branding or game development is the
Lambdaのファイルディスクリプタ上限って、少なくない?
# 背景
最近組織内の全アカウントのリソース情報を収集するタスクをやっていますが、一日多くて一回走らせるくらいの処理なのでとりあえずAWS Lambdaを採用しました。結果ファイルディスクリプタ(ファイル記述子、本文ではFDと略称する)上限というものを知るようになりました。
引用[WikiPedia](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E8%A8%98%E8%BF%B0%E5%AD%90):
>ファイル記述子(ファイルきじゅつし、英語: file descriptor)とは、コンピュータプログラミングにおいてファイルへの参照を抽象化したキーである。Lambdaにおいては、tcpコネクト(ex. EC2のクライアント)を作ったり、S3からファイルを開いたりするとFDが消耗されますね。
本筋に戻ります。例えば、全組織には100個のAWSアカウントが存在するとしましょう。加えて15個のリージョンが使用可能です。
全アカウントの全リージョンにおいてEC2インスタンスの情報が欲しいという
workbox-webpack-plugin@6.6.1: The engine “node” is incompatible with this module. の対処法【windows】
エラー内容
yarn add react-router-domを実行した際に以下のエラーが発生しました。
“`terminal:yarn add react-router-dom
yarn add react-router-dom
yarn add v1.22.11
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages…
warning react-scripts > e
[Node.js]Satoriを用いて動的にOGPを生成する際のtips
## TL;DR
– SatoriによるSVG生成にはフォントファイルの読み込みが必要
– フォントファイルの読み込みはモジュールバンドラーとの相性が良くない
– `vite-plugin-arraybuffer`を利用してインラインでフォントファイルを読み込むことですっきりビルド## 動的OGP生成の手法
筆者所属のMIERUNEにて最近[QGIS LAB](https://qgis.mierune.co.jp/)というWebサイトをリリースしました。
https://qgis.mierune.co.jp/
このサイトの記事ページでは、記事タイトルから動的にOGP画像を生成しています。
https://qgis.mierune.co.jp/posts/howto_1_download_ksj-data
動的OGPの生成は下記の手順がポピュラーのようです。
1. [vercel/satori](https://github.com/vercel/satori)で、SVGを生成する(JSXによる記述が可能)
2. SVGを画像化(Node.jsなら[lovell/sh
AWS LambdaをNew Relicで簡単にモニタリング!
New RelicのAWS Lambda 統合をLambda関数に導入することで、関数のパフォーマンスや、トレースを監視し、パフォーマンス劣化やエラーの原因を迅速に特定できるようになります。本記事で導入手順を紹介します!
# New Relic Lambda 統合 とは
New RelicのAWS Lambdaの統合は、Lambda レイヤーでエージェントが提供されており、関数のコードを変更することなく、関数の内部動作を詳細に可視化します。 関数にレイヤーでNew Relicのエージェントを追加すると、関数が呼び出されるたびにDuration、スループット、トレースなどの主要なパフォーマンス メトリックを取得できます。レイヤーを使わない計装方法やコンテナ化されたLambda関数への計装方法もありますので、手順の詳細は以下公式ドキュメントをご確認ください。
https://docs.newrelic.com/jp/docs/serverless-function-monitoring/aws-lambda-monitoring/instrument-lambda-function
Node.js/Nest.jsのサーバーのメモリ使用量が知りたい時のコマンド
# 目的
表題の通りです。
開発を行っているとローカルでは問題なく動いていましたが、デプロイなど環境が変わると動かなくなることがよくあります。
環境と発生したエラーは以下です。
– Heroku
– Basicプラン
– Nest.js
“`
Memory quota exceeded
Error R14 Heroku
“`容量が大きいデータを処理する際に発生し、エラーメッセージの内容からメモリの使用量について調査しました。
記事で紹介するコマンドはそのメモ書です。# コマンド
以下のコマンドで取得できます。
“`
node -e ”
const os = require(‘os’);
const fs = require(‘fs’);
const v8 = require(‘v8’);console.log(‘=== システム全体のメモリ情報 ===’);
console.log(\`全体メモリ: \${(os.totalmem() / 1024 / 1024).toFixed(2)} MB\`);
console.log(\`使用メモリ: \${((os
Lambda(Node.js)のDockerイメージをデプロイしてみた。(その1,EC2、Docker環境構築編)
# はじめに
LambdaをDockerイメージでデプロイする方法を、調査する機会があったので自分の備忘用にメモ書きを残します。# EC2に環境セットアップ
Amazon Linux:Amazon Linux 2023 AMI
インスタンスタイプ:t2.micro
のクリーンな環境のセットアップしました。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281768/c0b63fde-d25e-692e-2b37-0fdd7b6c97cd.png)
鳥のアスキーアート?ですかね。
+ yumの最新化
+ dockerのインストール
+ 自動起動の有効化
+ 権限回りの設定“`shell
sudo yum update -y
sudo yum install -y docker
sudo systemctl start docker
systemctl status docker
sudo systemctl enable docker
systemctl is-enabl
AWS Amplify sandbox で Segmentation fault (core dumped) が出たときの対処方法
表題の通りです、サクッと行きましょう。
# 実行コマンド
“`shell
npx ampx sandbox
“`# エラー
“`shell
Segmentation fault (core dumped)
“`# 原因
node のバージョンが 20 とかだと発生するようです、18 系に変更することでエラーを回避可能。
1. node のバージョン変更(nodenv 利用時の例)
“`shell
# 18 系のインストール
nodenv install 18.20.4# ローカル環境で利用するバージョンに設定
nodenv local 18.20.4# バージョン確認
node -v
“`“v18.20.4“ と出力されればOK
無事デプロイが実行されるようになりました。
“`shell
$ npx ampx sandboxAmplify Sandbox
Identifier: hoge
Stack: amplify-awsamplifygen2-hogeTo specify
知らないとやばいreadlineモジュール
`readline` モジュールは、Node.js の標準ライブラリの一部であり、コマンドラインインターフェース(CLI)を作成する際に非常に便利です。ユーザーからの入力を行ごとに読み取るための機能を提供します。以下に、`readline` モジュールでよく使われるメソッドやイベントを説明します。
—
### **1. `readline.createInterface(options)`**
– **説明**: 新しい `readline.Interface` インスタンスを作成します。
– **引数**:
– `input`: 読み取り用のストリーム(通常は `process.stdin`)。
– `output`(オプション): 書き込み用のストリーム(通常は `process.stdout`)。
– **使用例**:“`javascript
const readline = require(‘readline’);const rl = readline.createInterface({
input: process.stdin,