- 0.0.1. PlaywrightのDocker imageとactions/cache
- 0.0.2. Goでwebアプリケーションを作成してみよう! 第3回 ~フロントエンドの実装~
- 0.0.3. csv-parse で TSV/CSV をパースするときに型変換を行う
- 0.0.4. Bot Framework(Node.js)でstate管理をAzure Blobに設定する
- 0.0.5. Expressプロジェクトの始め方
- 0.0.6. Node.js の fs でフォルダ内の内容を列挙する
- 0.0.7. GPT-4o と Node.js の process.loadEnvFile() と OpenAI のライブラリを組み合わせる
- 0.0.8. Azure Functionsでdate-fnsのformat結果がローカル実行とAzure上で実行したときに差が出ていたメモ
- 0.0.9. docker-composeでNode.jsコンテナとMySQLコンテナを立ち上げる
- 0.0.10. [OpenShift Virtualization] Node跨ぎのLive Migrationで本当にVMは停止しないのか検証してみた
- 0.0.11. Nodemonを用いたExpress起動
- 0.0.12. (調査メモ)gulp5で画像ファイルが壊れた場合の対処
- 0.0.13. Node-REDのobnizノードでどちらのノードを選ぶか – 使い方概要
- 0.0.14. 「npx create-next-app」って何をしているの?
- 0.0.15. symbol-sdk@3.2.1でオフラインでアグリゲートコンプリートを完成させる
- 0.0.16. Goでwebアプリケーションを作成してみよう! 第2回 ~サーバーの立ち上げ~
- 0.0.17. Node.jsによるHTTPサーバの基本
- 1. Hello World!
PlaywrightのDocker imageとactions/cache
Github Actions上で動くPlaywrightを少しでも早くするために、ブラウザを毎回インストールする方法からDocker imageを使う方法に変更しました。
imageのバージョンはpackage.jsonに記載しているバージョンと同じものにします。(色々あってライブラリのインストールとテスト実行は別々のジョブにしている)
“` yaml
jobs:
setup:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v4
with:
fetch-depth: 0
– name: Cache node modules
uses: actions/cache@v4
id: cache-node-modules
with:
path: node_modules
key: node_modules-${{ hashFiles(‘yarn.lock’) }}
resto
Goでwebアプリケーションを作成してみよう! 第3回 ~フロントエンドの実装~
この記事では5回に分けてwebアプリケーションの作り方を説明していく
第1回
[webアプリケーションの構成、仕組み](https://qiita.com/Yutosaki/items/0c6f9349b427d4aee08e “第3回”)
第2回
[サーバー立ち上げ](https://qiita.com/Yutosaki/items/fcd773a278e9b8663f36 “第2回”)
第3回
フロントエンドの実装(この記事)
第4回
[バックエンドの実装](https://qiita.com/Yutosaki/items/da564b74d6fac87aa601 “第4回”)
第5回
メニュー画像の読み取り実際に作ったアプリケーション
https://github.com/Yutosaki/WiFiRader
# やること
以下のような画面構成にするための JavaScript を書く。また、Go で作成するアプリケーションサーバーに HTTP リクエストを送る。![今回作成した画像](https://github.com/Yutosa
csv-parse で TSV/CSV をパースするときに型変換を行う
# 前提
TSV ファイルを DB に insert するとき、 [csv-parse](https://csv.js.org/parse/) というモジュール[^1]を使ってパースを行いました。
ただその際、デフォルトでは数値や真偽値もキャストされず String として読み込まれてしまいます。# 方法
`cast` オプションにキャストを行うコールバック関数を書いて渡します。
コールバック関数は value と context を引数として受け取ります。
[context が持っている様々なプロパティ](https://csv.js.org/parse/options/cast/#context)を使って列を指定し、value をキャストして値を return します。
なお、今回は TSV ファイルを扱っていますが、 CSV ファイルについても同様です。# 環境
Bun 1.1.3### ファイル構成
“`
|–index.ts
|–joyokanji.tsv
“`
“`joyokanji.tsv
id grapheme_orth grapheme_alt
Bot Framework(Node.js)でstate管理をAzure Blobに設定する
# 目的
Bot Framework(Node.js)でstate管理する方法を記載します。(公式ドキュメントがメモリ管理の開発環境が前提になった記事ばかりで本番環境のstate管理の仕方が分からなかった・・)
> [基本的なボットを作成する \- Bot Service \| Microsoft Learn](https://learn.microsoft.com/ja-jp/azure/bot-service/bot-service-quickstart-create-bot?view=azure-bot-service-4.0&tabs=javascript%2Cvs)
動作確認をしたのは上記の `yo` コマンド(と `yo-teams` コマンドなど)で作成したBot Framework V4環境です。
# すること
## ライブラリのインストール
> $ npm install botbuilder-azure-blobs
`botbuilder-azure-blobs` をインストールします。
## ソース改修
stateをメモリ管理する開発環境で使用す
Expressプロジェクトの始め方
# 概要
Expressアプリを`express-generator`を使用して作成する。
viewsは`ejs`# 実装手順
## 前提条件
`npm`, `Node.js`, `express-generator`をインストールしていること。## expressプロジェクトの作成
“`shell
express –view=ejs HelloWorld
“`
`express –view=ejs HelloWorld`でテンプレートエンジンにejsを指定して、`HelloWorld`プロジェクトを作成する。プロジェクトディレクトリが作成されたら、そのディレクトリに移動して`npm install`を実行する。
依存パッケージがインストールされる。## 新たなルーティングの追加とviewsの追加
既存の`app.js`にルーターを定義してルーティングの追加をする。
“`js app.js
var createError = require(‘http-errors’);
var express = require(‘express’);
var pa
Node.js の fs でフォルダ内の内容を列挙する
## 環境
bun 1.1.3## 方法
[fs.readdirSync()](https://nodejs.org/api/fs.html#fsreaddirsyncpath-options) を使います。## コード例
### ファイル構成
“`
|–files
| |–fuga.txt
| |–hoge.txt
| |–piyo.txt
|–index.ts
“`“`fuga.txt
渚の砂は、崩しても、積る、くぼめば、たまる、音もせぬ。
“`“`hoge.txt
ただ美しい骨が出る。
“`“`piyo.txt
貝の色は、日の紅、渚の雪、浪の緑。
“`### 例1: シンプルにファイル名のリストを取得
`fs.readdirSync()` はディレクトリ内のファイル名のリストを返します。
厳密にはファイルだけでなくディレクトリもリストに含まれます。
ここでは `.forEach()` で全件ループしています。“`js:index.ts
import fs from ‘fs’;const dirPath = ‘files’
GPT-4o と Node.js の process.loadEnvFile() と OpenAI のライブラリを組み合わせる
リリースされたばかりの GPT-4o を API経由で試すのに、以前、以下の記事で書いた「Node.js の process.loadEnvFile()」を組み合わせてみたという内容です。
●【小ネタ】Node.js v21.7.0 の新機能で環境変数用のファイル読みこみを軽く試す: process.loadEnvFile() – Qiita
https://qiita.com/youtoy/items/ae838cacd43b3c3e61e1## GPT-4o について
GPT-4o については、既にいろいろな方が記事を書いていると思うので、詳細はそれらをご参照ください。●GPT-4o – Google 検索
https://www.google.com/search?q=GPT-4o## OpenAI の Node.js ライブラリ
今回、GPT-4o を API経由で試します。
その処理には、以下の OpenAI の Node.js用ライブラリを使います。●openai – npm
https://www.npmjs.com/package/openai
Azure Functionsでdate-fnsのformat結果がローカル実行とAzure上で実行したときに差が出ていたメモ
## 概要
[前回でローカル実行環境を構築した](https://qiita.com/hibohiboo/items/ddcc6125bf61d9b308cc)が、日付をDBから取得してフォーマットしたところで問題が起きた。環境|TimeZone|`format(d,’yyyy-MM-dd HH:mm:ss’)`
–|–|–
Azure|UTC|2024-05-14 **00**:00:00
ローカル|JST|2024-05-14 **09**:00:00結論からいうと、TimeZoneのlocaleの問題であった。
ローカル実行時の環境変数`TZ`に`UTC`を設定することでローカルもAzure上と同じ挙動にできることを確認した。[date-fns format](https://date-fns.org/v3.6.0/docs/format)より
> Return the formatted date string in the given format. The result may vary by locale.
> 指定された形式で書式設定された日付文字
docker-composeでNode.jsコンテナとMySQLコンテナを立ち上げる
# 目的
`docker-compose`を使用して、アプリコンテナとDBコンテナを起動する。
コンテナ起動のみを目的とするため、`docker-compose`の動作を確認することをメインに進める。## 目標
– DBコンテナ作成
– Nodeコンテナ作成とHello, World.
– DBにテーブル作成・初期データ投入# 起動方法
以下コマンドで`docker-compose.yml`をもとに起動される
“`shell
docker-compose up -d
“`# 実装手順
## DBコンテナを作成して、DBが作成されているか確認
`docker-compose.yml`でMySQLコンテナの作成
“`yml docker-compose.yml
version: ‘2.1’
services:
db:
# イメージの指定(オフィシャルMySQLイメージ)
image: mysql:8.4.0# コンテナ名
container_name: mysql-container# ポートの紐づけ
ports
[OpenShift Virtualization] Node跨ぎのLive Migrationで本当にVMは停止しないのか検証してみた
# はじめに
OpenShift Container Platformで仮想マシン (VM) を起動・管理できる標準機能である「OpenShift Virtualization (以下、OCP-V) 」では、Kubernetes Clusterを構成するBare Metal Nodeを横断して、Live Migrationが可能です。その実験をします。またついでに、OCP-VでVMを操作するコマンドラインツールである`virtctl`も試しに触ってみましょう。先に、OCP-VにおけるLive Migrationの仕組みを絵で示します。
すごく絵が雑で恐縮なのですが、VM (がContainer内でプロセスとして実行されているPod) がNode AにDeployされていたとしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3627586/4536199b-4aba-75b6-774f-ee6d13f3fa4d.png)このVMをNode BにLive Migratio
Nodemonを用いたExpress起動
# Express 毎回再起動するの面倒くさくない??
Node.jsでExpressを用いてWebサーバーを作成する記事を今まで記載してきました。
今後も学んだことを記事にしていきますがExpressで機能を追加した際に動作検証をするとき、
何度も再起動するのめんどくさいな、と思ったときに`Nodemon`を知って便利!となったので記事にします。## Nodemon
`Nodemon`はnpmに公開されているパッケージの一つです。
私が把握している機能は
`指定したディレクトリ内のファイルが変更された場合、自動的にnodeアプリケーションを再起動する`
⇒`Expressでファイルを変更した場合、サーバの再起動をNodemonが自動で行ってくれる`
です。
毎回コマンドで再起動しなくていいのは便利じゃないですか!?笑
※他にも機能があれば教えていただきたいです。## Nodemon 設定
下記記事で記載したフォルダ構成を元に説明します。
[ExpressでWebサーバーを立ててみる](https://qiita.com/moody_engineer/items/f57733
(調査メモ)gulp5で画像ファイルが壊れた場合の対処
### 結論
srcに`{encoding: false}`をつける### 問題
gulp5が2024/03/29に正式ローンチされたので、自前の開発環境をアップデートしようとした。
基本的にはgulp4のgulpfile.jsのままで動いたが、静的ファイルをコピーするタスクで、jpg, png画像が表示されなくなってしまった(コピー後のファイルが破損してしまった)。
svg, txtファイルは正しくコピーできていた。### 原因
gulp5の[changelog](https://github.com/gulpjs/gulp/blob/master/CHANGELOG.md#500-2024-03-29)にある
“`
Default stream encoding to UTF-8
“`
の影響と思われる。### 対処方法
gulpの[issue](https://github.com/gulpjs/gulp/issues/2777#issuecomment-2036776560)に記載があり、srcに`{encodin
Node-REDのobnizノードでどちらのノードを選ぶか – 使い方概要
Node-REDのobnizノードを使う時に結構悩む人が多いと思います。
## 3種類のノード(2種類 + 裏ボス1種)
(現時点バージョンだと)まずは3種類のノードがあり、1つは裏側の設定に隠されていて、2つは表に見える場所にあります。
> ![スクリーンショット 2024-05-13 1.28.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/3ca0e23e-448e-db98-b907-11d0b311e70c.png “スクリーンショット 2024-05-13 1.28.38.png”)
### obniz functionノード
**処理を1回実行**するときに使えます。
LEDやスピーカーなど **アクチュエーターやインジケーター**を操作したい **アウトプット系の処理**場合はobniz functionノードを利用するのがオススメです。
### obniz repeatノード
1分ごと、毎秒…など **定期的に処理を実行**したい時に使えます。
「npx create-next-app」って何をしているの?
## はじめに
最近、Next.jsでの開発を進めていて、いつも使っている 「**`npx create-next-app` って何してるんだ?**」という疑問が頭をよぎりました。
よく、ふとした瞬間に、「これって本当に理解して使ってる?」と自問自答することってありますよね。特に、誰かに説明しようとすると、理解を曖昧にしているせいで思った以上に言葉に詰まることが多いです。
例えば、公式ドキュメントの「Installation」を参照してプロジェクトをセットアップする際に、手順をコピー&ペーストして「動いたからOK」としてしまうことが多いかと思います。実は私もそんなタイプです😅
この記事では、Next.jsでプロジェクトを作る過程で、「なぜそうなるのか」を掘り下げながら、より深く理解していくことを目指します。
## Next.jsプロジェクトの作成
では、Next.jsのプロジェクトを作成していきます。
まずはいつも通り、[Next.js 公式ドキュメント](https://nextjs.org/docs/getting-started/installation) に記載さ
symbol-sdk@3.2.1でオフラインでアグリゲートコンプリートを完成させる
# はじめに
今回は、オフラインで、自分と他者の署名が必要なアグリゲートコンプリートトランザクションを作成してみようと思います。
登場人物はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/95bee689-05a2-7e17-0ddd-519e8d8e88f1.png)
この場合、アリスとボブの署名が要ります。
今回のシナリオでは、アリスがトランザクションを作成してボブに渡し、ボブが連署してネットワークに送信するような感じでやっていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/c40d92bc-61cb-effa-2008-4d84f4161c30.png)
アリスからボブへ渡すデータの形式は、16進数文字列のトランザクションデータにします。
![image.png](https://qiita-image-store.
Goでwebアプリケーションを作成してみよう! 第2回 ~サーバーの立ち上げ~
この記事では5回に分けてwebアプリケーションの作り方を説明していく
第1回
[ webアプリケーションの構成、仕組み](https://qiita.com/Yutosaki/items/0c6f9349b427d4aee08e “第1回”)
第2回
サーバー立ち上げ(この記事)
第3回
[フロントエンドの実装](https://qiita.com/Yutosaki/items/1058dea6e2246b650c7e “第3回”)
第4回
[バックエンドの実装](https://qiita.com/Yutosaki/items/da564b74d6fac87aa601 “第4回”)
第5回
メニュー画像の読み取り実際に作ったアプリケーション
https://github.com/Yutosaki/WiFiRader
# やること
今回のではサーバーの立ち上げ、アプリケーションサーバー(Go)に情報を送る。そして、以下のような画面構成にする。これらについて解説していく。![今回作成した画像](https://github.com/Yutosaki/
Node.jsによるHTTPサーバの基本
# 完成系
“`main.js
“use strict”;const http = require(“http”);
const port = 3000;const server = http.createServer((request, response) => {
response.writeHead(200, {
“Content-Type”: “text/html”
});const responseMessage = “
Hello World!
“;
response.write(responseMessage);
response.end();
console.log(`Sent a response : ${responseMessage}`);
});server.listen(port);
console.log(`The server has started and is listening on port number: ${port}`);
console.log(`
複数のサーバーでobnizが動いてしまっている時
Node-REDでobnizを使っていると、obnizがこんな感じでconnecting…から動かないってことがたまにあります。
> ![スクリーンショット 2024-05-11 22.52.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/c133058c-8f59-15f8-9263-b19c8defa417.png “スクリーンショット 2024-05-11 22.52.29.png”)
他のサーバーを見てみるとつながっていることが分かりました。
> ![スクリーンショット 2024-05-11 22.52.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/fde3a773-7b8c-7dc4-1b2a-ad06d6e3e5b0.png “スクリーンショット 2024-05-11 22.52.32.png”)
これをどうやって見つけるか。
## obnizのコンソールか
JavaScriptのコードをobnizノードで使えるように書き換える
Node-REDのobnizノードの使い方は少しクセがあるのでクセを把握しておきましょう。
## obnizノードの使い方概要
– 設定ノードという裏側のノードがいて、ここでピンアサイン(各ピンに何を設定するのか)などの初期化処理を記述すること
– 表側に見えて使えるノードは`obniz repeatノード`と`obniz functionノード`の2種類
– 2種類のノードは使い分けが必要で、それぞれのノードの中にJavaScriptノードを記載する
– センサーなどの数値を常に取得したいインプット系の処理はobniz repeatノードを使う
– LEDやスピーカーなどアクチュエーターやインジケーターを操作したいアウトプット系の場合は`obniz functionノード`を利用といった流れです。
[こちら](https://qiita.com/n0bisuke/items/072a8a1bf77525fef835)も参照ください
> [obnizノードの使い方概要](https://qiita.com/n0bisuke/items/072a8a1bf77525fe
カニ🦀になって絵日記書くSNSつくったので技術まとめ
# カニ🦀になって絵日記書くSNS作ったので技術まとめ
## はじめに
タイトル通りのSNS作りました🦀
みなさまは、slackなんかで「たしかに」の意味合いで🦀のスタンプでリアクションとったりしませんか?そんな、エンジニアのみなさまに馴染みのあるカニのサービスをリリースしました!
– サービスURL: https://diary-crab.com
– 気が早いけど公式インスタは[こちら](https://www.instagram.com/diary_crab?igsh=MW9xd2R2ZG9kNmV2dw%3D%3D&utm_source=qr)
– 怪しい人じゃないことが分かるようにという意図もありますどんなサービスか少しでも気になっていただけたら是非インスタ覗いてみてください🦀
## 技術まとめ
本サービスで活躍した技術たち🦀– バックエンド
– TypeScript, Node.js, Express, prisma
– フロントエンド
– TypeScript, Next.js, tailwindcss
– [インフラ](https://qiita.