- 0.1. [React] React + Vite + TS 環境の構築
- 0.2. UnityとNode.jsにてAnt+心拍計の数値を取得、VRMに反映したかったのだが…2024
- 0.3. pnpm で使用するnodeバージョンを固定する&自動インストールする
- 0.4. 初心者によるReact,Node.js,MySQLの接続
- 0.5. IBM Cloud Object Storageを使ったWebアプリ開発
- 0.6. Exploring NPM Packages for Creative Name Generation, AI, and More
- 0.7. Lambdaのファイルディスクリプタ上限って、少なくない？
- 0.8. workbox-webpack-plugin@6.6.1: The engine “node” is incompatible with this module. の対処法【windows】
- 1. エラー内容
- 1.1. [Node.js]Satoriを用いて動的にOGPを生成する際のtips
- 1.2. AWS LambdaをNew Relicで簡単にモニタリング！
- 1.3. Node.js/Nest.jsのサーバーのメモリ使用量が知りたい時のコマンド
- 1.4. Lambda（Node.js）のDockerイメージをデプロイしてみた。（その１，EC2、Docker環境構築編）
- 1.5. AWS Amplify sandbox で Segmentation fault (core dumped) が出たときの対処方法
- 1.6. 知らないとやばいreadlineモジュール
- 1.7. Discord Activityのnested-messagesサンプルを動かす
- 1.8. OpenAI Realtime APIを動かしてみた
- 1.9. Node.jsを学ぶ #2
- 1.10. Node.jsを学ぶ ＃１
- 1.11. 休憩時間をライフゲームに委ねるアプリをつくってみた
- 1.12. (Node.js) @mapbox/geojson-areaモジュールを理解する
[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 でインストールした
にて公開しています。
このデモアプリには、次の機能があります。
– 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イメージをデプロイしてみた。（その１，EC2、Docker環境構築編）
# はじめに
LambdaをDockerイメージでデプロイする方法を、調査する機会があったので自分の備忘用にメモ書きを残します。# EC2に環境セットアップ
Amazon Linux：Amazon Linux 2023 AMI
インスタンスタイプ：t2.micro
のクリーンな環境のセットアップしました。
鳥のアスキーアート？ですかね。
+ 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,
Discord Activityのnested-messagesサンプルを動かす
# はじめに
Discord上でゲームなど遊べるDiscord Activityというサービスがあります。Discord Activityについては以下を参照してください。https://discord.com/blog/server-activities-games-voice-watch-together
そのDiscord Activityは、開発環境や方法が公開されており、誰でもアプリを作成してDiscord上で動かすことが出来ます。
https://discord.com/developers/docs/activities/overview
今回Discord Activityのサンプルの1つのnested-messagesを動かしてみます。
最終的に改良を加えて、以下の動作するDiscordアプリを作成します。
OpenAI Realtime APIを動かしてみた
作成日：2024年10月20日(日)
## １．はじめに
私たちがこれまでに生成AIで使用してきた自然言語処理(NLP:Neuro Linguistic Programming)はChatGPTなどのチャットボットに代表されるように話者が交互にしか会話できませんでした。通信の世界ではこれを半二重通信と呼んでいます。
しかし一般的な会社の会議や人との会話では、会話に割り込んだり（カットイン）したり、同時に話したりすることが多くあります。
これは通信の世界では全二重通信と呼んでいます。
交互にしか会話できない事例としてトランシーバーなどを想像してもらうとイメージしやすいかもしれません。
同時に会話できる事例としては電話が分かりやすいですよね。
子供の頃、玩具のトランシーバーなどで遊んでいて交互にしか話せない仕組みがスパイ映画などみたいでかっこ
Node.jsを学ぶ #2
## 学習の内容説明
> ポケモンデータの詳細情報を非同期処理で取得し、表示する部分です。以下のように概要をまとめます
1. ローディング表示の追加
– ポケモンデータを取得する際に、非同期処理が完了するまで「ロード中」と表示させる処理を追加しました。
– **状態管理**としてuseStateを使い、ローディング状態を管理。
– 初期状態を`true`に設定し、データ取得完了後に`false`に変更。
– JSX内で三項演算子を使って、ローディング中とデータ表示を切り替えるようにしました。
“`
// ReactのuseStateフックを使用して、loadingという状態変数を初期値trueで定義
const [loading, setLoading] = useState(true);useEffect(() => {
// コンポーネントがマウントされた時にfetchAllPokemonData関数を呼び出して
// データの取得が完了したら、setLoadingをfalseにしてローディングが完了したことを示す
fetchAllPokemonData()
Node.jsを学ぶ ＃１
## Node.jsに関する要点まとめ
1. Node.jsとは？
JavaScriptのサーバーサイド環境：
通常、JavaScriptはフロントエンド（HTML、CSSと組み合わせて動的なWebページを作る）に使われる。
Node.jsは、サーバーサイド（バックエンド）でもJavaScriptを使えるようにする環境。
2. Node.jsのインストール
公式サイトからダウンロード：
Node.js公式サイトで推奨版をダウンロード。
Windowsユーザーはそのままダウンロード。Macユーザーは「Node.js Mac」で検索して対応版をダウンロード。
推奨版の選択：
推奨版の方が安定しているため、こちらを選んでインストール。
3. インストール確認
ターミナルを開く：
インストール後にコマンドラインツール（ターミナル、コマンドプロンプト、Git Bashなど）を開く。
Node.jsのバージョン確認：
node -v コマンドでNode.jsが正常にインストールされたか確認。
npm（Node Package Manager）の確認：
npm -v コマンドでnpmがインストールさ
休憩時間をライフゲームに委ねるアプリをつくってみた
## こんなものをつくります
**デスクトップで動く休憩時間管理アプリです。**
開始してから黒いセルがなくなるまで休憩できる！というルールになっています。– 休憩中
– 休憩終了
 @mapbox/geojson-areaモジュールを理解する
# はじめに
node.jsのコードの中で@mapbox/geojson-areaモジュールを使用する機会があったので、どのようなモジュールであるのか簡単にまとめたいと思います。# @mapbox/geojson-areaモジュールとは
GeoJSON データから地理的な領域（面積）を計算するためのモジュールです。このモジュールは、GeoJSON オブジェクトに含まれるポリゴンやマルチポリゴンのジオメトリから面積を計算することができます。# サンプルコード
“`javascript:geojson-area.js
const geojsonArea = require(‘@mapbox/geojson-area’);const geojson = {
type: ‘Polygon’,
coordinates: [
[
[-73.981149, 40.768884],
[-73.961149, 40.768884],
[-73.961149, 40.748884],
[-73.981149, 40.748884
