- 1. はじめまして、新人エンジニア·ハワードです
- 2. reg-suit の VRT (ビジュアルリグレッションテスト) を local だけで実行・レポート閲覧ができる reg-cli ライブラリ ( node js )
- 3. electron-forge –template=vite-typescriptで Error: crtypto.getRandomValues() not supportedと出るとき
- 4. Node.js (Typescript) で Bluesky に画像を自動投稿する Bot を作る (その1)
- 5. ServerlessFrameworkを使ってKindleの価格を通知するLINE Botを作ってみた
- 6. SpringBootアプリ上にTypescript環境を作ってみた
- 7. SpringBootで包み込むVue.js開発環境 カンタン構築
- 8. 【Node.js】Error: error:0308010C:digital envelope routines::unsupportedの解決法
- 9. Docker環境のNode.js + TypeScriptでDatadogAPMを検証する
- 10. Google Cloud Runでdeployできないエラー備忘録
- 11. [TypeScript] Expressをやってみる（10分で？）
- 12. Qiitaの記事をGithub で管理したくて、WSL にvolta でnode インストールしてQiita 記事をpull まで
- 13. NodejsでS3にファイルをアップロード・ダウンロード
- 14. npx コマンドでCLIを実行したら”could not determine executable to run”って言われた
- 15. 「Error: error:0308010C:digital envelope routines::unsupported」エラーでビルドができない
- 16. デジタルお小遣い帳を作ってみたい！by初心者 第1回目
- 17. Reactからffmpeg.wasmを使って動画にウォーターマークを埋め込んでみる
- 18. SvelteKitで稀にchunkファイルがNot foundエラーになる問題に遭遇した
- 19. Astroのススメ
- 20. sveltekit-view-transitionを使ってSvelteKitでView Transition APIを簡単に使う
はじめまして、新人エンジニア·ハワードです
ここって、
Markwordで書き残すサイトなんですね。私、少し不安だな……。
うまく働けるよう、お勉強頑張ります
どうかよろしくお願いします
reg-suit の VRT (ビジュアルリグレッションテスト) を local だけで実行・レポート閲覧ができる reg-cli ライブラリ ( node js )
# reg-cliとは
https://github.com/reg-viz/reg-cli
かなりマイナーなライブラリのようだが、localだけでVRTを実行してHTMLレポートで比較できるようだ
“`
npm i -g reg-cli
“`“`
reg-cli /path/to/actual-dir /path/to/expected-dir /path/to/diff-dir -R ./report.html
“`以下のように使う
“`
reg-cli <画像のあるディレクトリ(1)> <画像のあるディレクトリ(2)> <差分を生成するディレクトリ> -R <レポート用のHTMLを生成するファイルパス>
“`# 画像群はどうやって用意する？
何らかの方法で用意する。
方法は問わない。「比較したいgitブランチを切り替えて、それぞれスクリーンショットを生成するスクリプト走らせる」とか。
# reg-suit とは
[reg-suit](https://github.com/reg-viz/reg-suit)
画像を比較してHTMLのレ
electron-forge –template=vite-typescriptで Error: crtypto.getRandomValues() not supportedと出るとき
uuidを生成する際、ブラウザ版のuuidが呼ばれてしまいエラーになっている。
vite.main.config.tsを以下のように変更すればrollupに巻き込まれない。“`ts
import { defineConfig } from “vite”;// https://vitejs.dev/config
export default defineConfig({
resolve: {
// Some libs that can run in both Web and Node.js, such as `axios`, we need to tell Vite to build them in Node.js.
browserField: false,
mainFields: [“module”, “jsnext:main”, “jsnext”],
},
build: {
rollupOptions: {
external: [
“uuid”
],
},
},
});
“`たしかmongodbとかknexとかもelec
Node.js (Typescript) で Bluesky に画像を自動投稿する Bot を作る (その1)
# やりたいこと
2024年2月6日より、招待制を廃止して、誰でも登録できるようになった、短文投稿型SNSの「Bluesky」。
今後、X (旧Twitter) の後身として、注目されています。そこで、自分が運営している写真展示Webサイトから、「オススメ写真を毎日自動投稿するBot」を Bluesky でやりたいと思いましたので、作ってみました。
Twitter での完成イメージ
## 完成像
絵にするほどでもない
ServerlessFrameworkを使ってKindleの価格を通知するLINE Botを作ってみた
# 概要
Amazonのほしい物リストをスクレイピングし、その情報を通知するLINE Botを作成しました。
特に **_Kindle_** 向けに最適化されています。Amazon EventBridgeによる定期実行、もしくはメッセージに対する応答として、Kindle版と紙の本の価格やポイントを通知するLINE Botです。
# プロジェクトの目的と動機
Kindleの値下げを見逃さないために開発しました。
Kindleの価格はセール時に大きく下がることがありますが、AmazonのスマホアプリではKindleの価格を確認できず、値下げを逃すことがしばしばありました。
その課題を解決するために、このLINE Botを作りました。# 技術スタック
技術スタックは以下のようになっています。遷移したら右の方にある「+ New Key」というボタンを押下します。
適当な名前を入力してAPIキーを作成します。
実行中# 環境
WSL2 Ubuntu
Google Cloud SDK 463.0.0
node v21.5.0# エラーメッセージの確認
[公式tutorial](https://cloud.google.com/run/docs/quickstarts/build-and-deploy/deploy-nodejs-service?hl=ja)の以下のコード実行時に発生
“`sh
gcloud run deploy
“`
コンソール画面にログ確認用のURLが表示されるので、ブラウザでチェック# エラーメッセージ
“`
Step #1: ERROR: failed to build: executing lifecycle. This may be the result of using an untrusted
[TypeScript] Expressをやってみる（10分で？）
# はじめに
typescriptでAPIを作ってみたいなぁと思い、expressを始めてみました。そこで、めっちゃ初期のところは簡単だったので、書いてみる# Step1: フォルダの作成
最初に、プロジェクト用の新しいフォルダを作成します。任意の名前をつけてください。
今回は`express-ts-app` を使用します。“`bash: bash
mkdir express-ts-app
cd express-ts-app
“`# Step2: npmプロジェクトの初期化
プロジェクトフォルダ内で、以下のコマンドを実行してnpmプロジェクトを初期化します。
これにより、`package.json`ファイルが作成されます。“`bash: bash
npm init -y
“`ちなみにこのときの `-y`は、**yes**の略です。すべての質問に自動的に「はい」と回答します。`npm init`だけを実行した場合には、プロジェクト名、バージョン、説明、エントリポイント、テストコマンド、gitリポジトリ、キーワード、ライセンスなどについて、入力や回答を求めら
Qiitaの記事をGithub で管理したくて、WSL にvolta でnode インストールしてQiita 記事をpull まで
# 今回の趣旨
Qiita の記事をQiita 内で管理してもよかったのですが、どうせならGithub で管理してみたいなという欲望があったので、設定をしてみることにしました。その時にWSL と普段は連携しているので、WSL 上にnode をインストールする必要が出てきました。
# 今回の記事の前提
– Github のアカウントをもっていること
– Qiita でpersonal access token を発行済みであること
(後にGithub action を使うため)# volta install
curl でvolta をインストールします。
“`powershell
$ curl https://get.volta.sh | bash
“`volta のインストールの確認をしていきます。
“`
volta -v
1.1.1
“`(volta のバージョンを確認するコマンドでバージョンが表示されない時は、一度WSL などを閉じてから再度開いてみるとバージョン確認コマンドが通ると思います。)
# node install
今回 Qi
NodejsでS3にファイルをアップロード・ダウンロード
### 概要
こちら記事では、NodeJSでローカルでS3アップロードとダウンロードの基本的な方法を書かせていただきます。
内容として５つあります
1.環境
2.前提
3.初期設定
4.アップロード
5.ダウンロード
6.最後
7.参考
### 1.環境
– Nodejs v21.6.0
– MacOS### 2.前提
– デモ用のS3 バッケットが作成済み
– ローカルに認証情報ファイル設定ずみ （まだ設定しない場合は[こちら](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-files.html)をご参考してください）
– プロフィルにせめてS3アクセス権を付与
– デモ用画像を準備### 3.初期設定
作業のフォルダを作成
“`bash
desktop/m
npx コマンドでCLIを実行したら”could not determine executable to run”って言われた
# 動作環境について
デスクトップのWindows環境と、ラップトップのChromeOS(CrostiniでDebianが動作)環境の2種類で開発していた。Nodejsのバージョンはどちらもv20.22.0# 経緯
理由は分からないが、あるプロジェクトではnpxコマンドでfirebaseエミュレーターを起動させる構成になっていた。そしてなぜかWSLではエミュレーターが動いたのにCrostini側でエラーが発生して起動しないという問題が発生。“`bash
npx firebase emulators:start –export-on-exit=’./.emulator’ –import=’./.emulator’
npm ERR! could not determine executable to run
“`雑に訳すと「お前が入力したコマンドは実行できるように見えない」みたいな感じだと思われる。
# 原因:パッケージ名とコマンドが揃っていない。
エラーメッセージで検索するとすぐに情報が見つかった。https://kazuhira-r.hatenablog.co
「Error: error:0308010C:digital envelope routines::unsupported」エラーでビルドができない
# 問題
「Error: error:0308010C:digital envelope routines::unsupported」というエラー発生してビルドができない。# 環境
Mac OS# 原因
Node.jsの新しいバージョンにしたことで、パッケージやライブラリとの互換性に問題が生じたため。# 解決方法
nvmが入っていない場合はインストール
“`bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm –version
“`ここで
「-bash: nvm: command not found」というエラーが返ってきた場合は“`bash
source ~/.nvm/nvm.sh
“`
上記のコマンドを実行。その後、改めてお好きなバージョンのnvmをインストール
“`bash
nvm install 12.0.0
nvm use 12.0.0
“`再度ビルドを行なって確認
“`bash
npm run bui
デジタルお小遣い帳を作ってみたい！by初心者 第1回目
## はじめに
この記事は、初心者がWebアプリ制作を通して力をつけていこう！という趣旨の記事です。
途中で躓くかもしれません。その際はごめんなさい。
アドバイス等はとてもうれしいのですが、誹謗中傷はおやめください(泣きます)。## なぜお小遣い帳なのか
・自分で使えるものが欲しかったから
・家族が家計簿を欲しがっていたから(それっぽいものをつくって褒められたい！！)## 自分の技術力
JavaScriptを少し触ったことがある程度
なので実はハードル高め！## 使いたい思っている技術
・React
・Node.js
・Express
・MongoDB
・vite## 作りたいアプリに必要な機能(ページ)
・収入入力ページ
・支出入力ページ
↓ここからはいずれ挑戦
・ほしいものページ
・グラフビューページ
・サブスクページ
・目標ページ## 今回作るもの
アプリのひな型！### 1.開発用のフォルダを作る
・名前はそのまんま”money-book-mern”としました。
・フォルダをVScodeで開きます。
・viteを使ってプロジェクトを作成します
`
Reactからffmpeg.wasmを使って動画にウォーターマークを埋め込んでみる
## 概要
Reactでffmpeg.wasmを使って、選択した動画ファイルに対してウォーターマーク（透かし）を埋め込むツールを作ります。## ffmpeg.wasmとは
[ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm)は、FFmpegの純粋なWebassembly/Javascript移植版です。ブラウザ上でビデオやオーディオの録画、変換、ストリーミングを行うことができます。Webassemblyなので従来はサーバサイドで行っていた動画リソースに対するいろいろな処理をクライアントで処理することが可能になります。## Reactのプロジェクトを用意する
予めNode.jsのv16以上を使えるようにしてください。
“`bash
# バージョンをチェック
$ node -v
“`
### インストール
今回は[Vite](https://ja.vitejs.dev/)を使います。
“`bash
$ npm create vite@latest
“`
**Select a framework**で`React`を
SvelteKitで稀にchunkファイルがNot foundエラーになる問題に遭遇した
## 発端
クライアントでページ A を表示したまま放置して、サーバに新しいバージョンをデプロイした後、放置していたクライアントでページ B へ遷移した際、下記のようなエラーが発生しました。
“`
Not found: /_app/immutable/chunks/HogeComponent.2b502a68.js
“`## 原因
調査した結果、クライアント使用中に新しいバージョンをビルドしたことでチャンクファイルが存在しなくなってしまったことが原因のようでした。元々 SvelteKit にはスクリプトのバージョン確認機能が搭載されているみたいなのですが、ページのプリロードなどを使用していると先読みしたスクリプトでエラーが発生するケースも有るようです。
参考：[GitHub Not found /\_app/immutable/assets/xxx #9089](https://github.com/sveltejs/kit/issues/9089)
## 解決策
SvelteKit の公式ドキュメントに[バージョン管理に関する記述](https://kit.sve
Astroのススメ
## Astroとは
Astroは[コンテンツ重視](https://docs.astro.build/ja/concepts/why-astro/#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E9%87%8D%E8%A6%96)の高速なWebフレームワークです。サーバサイドの実装もできるので認証を組み込んだりヘッドレスCMSと連携することもできます。Astroは比較的新しいフレームワークで、
[2022.stateofjs.com](https://2022.stateofjs.com/en-US/)ではDeveloper RetentionとDeveloper Interest部門で1位を獲得しました。
2023/8/30にv3.0がリリースされましたが、v2のリリースが2023/1/25なので比較的速いスピードで成長していることが伺えます。https://astro.build/
[日本語のドキュメント](https://docs.astro.build/ja/getting-started/)が用意されているので学習
sveltekit-view-transitionを使ってSvelteKitでView Transition APIを簡単に使う
## View Transition APIとは
[MDN Web doc](https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API)によると
> ビュートランジション API は、異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組みを提供し、同時に DOM コンテンツも単一の手順で更新します。とのことです。つまりスマートフォンアプリなどで一般的なスムーズな遷移表現のWeb版ですね。
## SvelteKitとView Transition API
SvelteKitとView Transition APIについてはSvelte.devの[Blog記事](https://svelte.dev/blog/view-transitions)に記載の通り、SvelteKit 1.24で実装されたonNavigateライフサイクルで利用可能になりました。以下のコードはページ遷移時にクロスフェード効果を適用します。
“`js
onNavigate((navigation) => {
if (!
