- 1. node.js で VRT – PlayWright で Webページにアクセスしてスクリーンショットを撮影し、reg-cli で差分レポートを出力する例
- 2. Javascript Registry (JSR) とは
- 3. Node.js – npx なら package.json で管理している node モジュールのコマンドを直接実行できる
- 4. pnpmで管理しているWebフロントエンドをGitHub ActionsでGitHub Pagesにデプロイする
- 5. node js でdiscord のbot作成#2応答機能と作る
- 6. ChatGPTのチャットの返答をfetchでStream受信しようとしたらSyntaxError: Unterminated string in JSONが出たことと解決法
- 7. 【小ネタ】Node.js用の OpenAI パッケージ（OpenAI版・Azure版）を軽く見比べてみる
- 8. CloudFrontの署名付きCookieを用いてプライベートコンテンツを配信する
- 9. Exceljs でシートを保護し、特定のセルだけロックを解除して編集可能にする
- 10. 【Deno Deploy】md5sum api【md5】
- 11. [AWS]Serverless Frameworkを使ってAPI Gateway×Lambda×DynamoDBを使用したWebAPIを構築する
- 12. Vue.js + LaravelでシンプルなSPA構築チュートリアルについて
- 13. Denoってなに？試しに使ってみよう
- 14. Node.jsでHTML、CSSを反映させる（自分用メモ）
- 15. [パート２：実行]S3に保存する前ラムダでサムネイルに画像圧縮の前処理
- 16. [パート１：概要の設計] S3に保存する前ラムダでサムネイルに画像圧縮の前処理
- 17. node js でdiscord のbot作成#1 nodejsの導入botを起動
- 18. IP アドレス確認くんを作る!! powered by Node.js on Azure App Service
- 19. PowerShellでyarnをインストールしようとしたら、「yarn : このシステムではスクリプトの実行が無効になっているため～」とエラーが出た
- 20. Vite + React + Typescript 環境構築おためし
node.js で VRT – PlayWright で Webページにアクセスしてスクリーンショットを撮影し、reg-cli で差分レポートを出力する例
# 事前準備
## npm インストール
`package.json` の例
“`json
{
“devDependencies”: {
“playwright”: “^1.42.0”,
“@playwright/test”: “^1.42.1”,
“http-server”: “^14.1.1”,
“reg-cli”: “^0.18.1”
}
}
“``npm install`
## Playwright セットアップ
`npm init playwright@latest`
質問にはてきとうに Yes と答えておく
# localでWebサーバーを起動しておく
## HTML
見た目の違うページを2個用意しておく
例:
`example1.html`
`
Javascript Registry (JSR) とは
### 概要
JSRとはjavascriptのパッケージのためのレジストリです。npmやNodeとも互換性がありますが、npmを進化させたようなレジストリです。
### レジストリとは
パッケージ等を管理するストレージのようなものです。例えば `npm install lodash` をすると、通常はnpmに設定されているデフォルトのレジストリである `https://registry. npmjs.org/ ` からパッケージをインストールしようとします。ここで注意すべきはパッケージ管理ツールとレジストリは別の概念であることです。`npm`コマンドはあくまでもパッケージ管理ツールであり、`npm`コマンドを使っていても実際にパッケージをインストールしてくるストレージは自由に設定可能です。この記事で紹介しているJSRは**レジストリ**であり、したがってnpmコマンドを使ってJSRからパッケージを取得することが可能です。
例えば企業などでは独自のレジストリを管理しており、npmコマンドなどでもデフォルトのレジストリが会社の管理するものになっているケースも多いと思います。
Node.js – npx なら package.json で管理している node モジュールのコマンドを直接実行できる
# 概要
npxをインストールしておけば、 package.json で管理している node モジュールを直接コマンド指定で実行できる
## インストール
“`
npm install -g npx
“`## 利用例
たとえば次のような package.json がある場合
“`json
{
“dependencies”: {
“prettier”: “^3.2.5”
}
}
“`次のように自由にサブコマンド、フラグなどを指定して実行できる
“`sh
npx prettier some_dir
“`“`sh
npx prettier –cache other_dir
“`# 問題の前提 – npm run
package.json の script にコマンドを書いておけば、パッケージ管理しているバージョンでコマンド実行が出来るが、
– scripts に書かずに単発のコマンド実行がしたい
– 様々なバリエーションでコマンド実行したいという時に不便だった
# チャットメンバー募集
何か質問、悩み事、相談
pnpmで管理しているWebフロントエンドをGitHub ActionsでGitHub Pagesにデプロイする
# やりたいこと
`pnpm` でパッケージ管理をしている Web フロントエンドアプリケーションを、GitHub Actions を用いることで、`main` ブランチへ `push` されたタイミングで自動的にデプロイします。# 前提
[こちらの GitHub レポジトリ](https://github.com/Yuki-Imajuku/pnpm-ghpages-deploy) も参照してください。– Ubuntu (22.04.4)
– Node.js (20.11.1)
– pnpm (8.15.4)“`txt:ディレクトリ構成
pnpm-ghpages-deploy/
├── .github/workflows/ghpages-deploy.yml
├── frontend/
├── .gitignore
├── LICENSE
└── README.md
“`# プロジェクト作成
下記のコマンドでテンプレートの React アプリケーションを作成します。ビルドツールには Vite を採用しています。
“`sh
pnpm create vite@late
node js でdiscord のbot作成#2応答機能と作る
# 前回のコードの詳しい説明
“`javascript:index.js
const {Client,GatewayIntentBits, GuildTemplate} = require(“discord.js”)
const client = new Client({intents:[]})
client.on(“ready”,async (c) =>{
console.log(`${c.user.tag}でログインしました`)
})
client.login(“先ほどのトークン”)
“`“`js
const {Client,GatewayIntentBits, GuildTemplate} = require(“discord.js”)
“`
まずはここです
`require`は読み込み先を指定するためみたいな感じです
`const`は一度定義したら二度と再定義できない変数です
“`js
const client = new Client({intents:[]})
“`
操作するためのクライアントを制作するためのものですintentsはオプションみたいな
ChatGPTのチャットの返答をfetchでStream受信しようとしたらSyntaxError: Unterminated string in JSONが出たことと解決法
# エラーに遭遇した状況
openAIのchatGPTにAPIで質問を投げて、取得した回答を表示するということをしようと思いました。
chatのapiにはstreamというオプションがあります。これを使うと回答全体の構築を待たずに先頭から流してくれるようになります。
以下の記事を参考にこれを試してみようと思いました。https://zenn.dev/himanushi/articles/99579cf407c30b
# やったこと
まずフロントのページを用意しました。
// Sheet
const worksheet = workbook.addWorksheet(‘My Sheet’)// Header
worksheet.columns = [
{ header: ‘Name’, key: ‘name’ },
{ header: ‘Age’, key: ‘age’ },
]// Rows
worksheet.addRow({ name: ‘Alice’, age: 20 })
worksheet.addRow({ name: ‘Bob’, age: 30 })// Lock cell
const cell = worksheet.getCell(‘B2’)
cell.protection = { locked: false }//
【Deno Deploy】md5sum api【md5】
javascriptでmd5するの結構めんどいのでAPI作った
# 使い方
“`javascript
const md5 = text => fetch(‘https://md5sum.deno.dev/’ + text).then(r=>r.text())console.log(await md5(‘abc’))
“`# ソースコード
“`typescript
import { Md5 } from “https://deno.land/std@0.119.0/hash/md5.ts”const headers = { ‘Access-Control-Allow-Origin’: ‘*’ }
Deno.serve((req: Request) => new Response(new Md5().update(req.url.slice(24)).toString(), { headers }));
“`
[AWS]Serverless Frameworkを使ってAPI Gateway×Lambda×DynamoDBを使用したWebAPIを構築する
## インフラ構成
WebAPIの作成に当たって今回使用するAWSの各サービスを簡単にまとめてみます。・API Gateway
HTTPリクエストを受け付けて、他のAWSサービス(Lambda等)にルーティングする機能です。REST APIやWebSocket APIを簡単に作成できます。API Gatewayでは、リクエストのパスやクエリパラメータ、ヘッダー、ボディなどをLambda関数に渡すことができます。
https://aws.amazon.com/jp/api-gateway/・Lambda
サーバレスコンピューティングのサービスです。コードをアップロードするだけで、イベントやトリガーに応じて自動的に実行されます。サーバの管理やスケーリングを気にする必要がありません。Lambdaは、Node.js、Python、Java、Go、Rubyなどの言語に対応しています
https://aws.amazon.com/jp/lambda/・DynamoDB
DynamoDBは、NoSQLデータベースのサービスで、高速でスケーラブルなキーバリューストアやドキュメントストアを提
Vue.js + LaravelでシンプルなSPA構築チュートリアルについて
完全honaki用悪しからず
php7.4
Laravel6.x
node.js20## PHP7.4の導入
### homebrewのインストール
https://aiacademy.jp/media/?p=2817### PHPの導入
https://c-limber.co.jp/blog/1691## Composerの導入
ターミナルで以下を実行
“`
curl -sS https://getcomposer.org/installer | php
“`ターミナルで以下を実行でComposerインストール 確認
“`
composer -v
“`
以下画像の通りならOK
## NPMの導入(mac)
### Node.jsのインストール
https://nodejs.org/en/download
上記UR
Denoってなに？試しに使ってみよう
2か月前に投稿してそのまま放置してました。
~~まあUbuntuやらなんやらで遊んでただけですがね~~
さて本題に戻って、今回はDenoってなに？って人向けに簡単に説明を書きます。# Denoとは
Node.jsの作者のライアン・ダールがJSConf EU 2018での公演「Node.jsに関する10の反省点」で発表されたJavascirpt・Typescirptのランタイムです。# インストール方法
Windowsは
“`powershell:PowerShell
irm https://deno.land/install.ps1 | iex
“`
Mac・Linuxは
“`sh:Bash
curl -fsSL https://deno.land/install.sh | sh
“`
のコマンドを実行するとインストールされます。# 実際に使ってみよう
:::note warn
自分が使っているDenoのバージョンはv1.41.0です。
なのでバージョンが上がるにつれ動かなくなる可能性があります。
:::
まずDenoを実行してみましょう。
“`
deno ru
Node.jsでHTML、CSSを反映させる（自分用メモ）
# はじめに
ポートフォリオ用にウェブサイトを作りたいけどやり方が分からねぇってことで勉強したことをまとめました。最初の導入部分的なことしかまだわかっていませんが、もし似たようなことをしたくて困っている人の助けになればと思います。# 1.プロジェクトを作成
（最初はNode.jsの導入をする必要があります）
ターミナルにて好きなフォルダに行く
“`
cd プロジェクトファイル
“`
package.jsonの作成
“`
npm init
“`
express（モジュール）をインストール
“`
npm install express –save
(npm install モジュール名 オプション)
“`こんな感じにファイルを置く（by ChatGPT）
GPT先生は偉大
“`
プロジェクトフォルダ/
│
├── node_modules/ # npmによってインストールされたモジュール
│
├── public/ # 静的ファイルを格納するディレクトリ
│ ├── css/
[パート２：実行]S3に保存する前ラムダでサムネイルに画像圧縮の前処理
# 前提
せめてS3・Lambda・IAM権を持っているAWSアカウントそれともIAMアカウント用意
# 概要
こちら記事では詳細な実行を説明させて頂きます。主な内容が下記のように進めています。
1. バケツ作成
1.1 バケツ作成
2.2 ライフサイクル作成
2. ポロシー・ロール作成
2.1 ポリシー作成
2.2 ロール作成
3. ラムダファンクション作成
3.1 環境作成
3.1.1 初期設定
3.2 ファンクション作成
3.2.1 ロールや処理時間を設定
3.2.2 トリガー設定
3.2.3 環境変数
3.3 ラムダのNode modulesについて
4. テスト行い
4.1 S3アップロード
4.2 結果をチェック
4.3 ログをチェック
## 1. バケツ作成
2つのバケツを作成し、そのうち1つを一時的なバケツとして使用します。この一
[パート１：概要の設計] S3に保存する前ラムダでサムネイルに画像圧縮の前処理
前の[記事](https://qiita.com/17021084/items/e1078bacc2fbc32d3183)の次に、今回は実践のユーケースを説明させて頂きます。
以下の２つのパートに分かれています。
– パート１：概要の設計（本記事）
– パート２：[詳細な実行](https://qiita.com/17021084/items/0e077c7c85bd5fce657d)## **概要**
1. 前提
2. 背景
3. 目的
4. 構成・経過
5. 評価
6. その他## 1.前提
– Node Js 20.xx
– Lambda x86_64
– [sharp](https://sharp.pixelplumbing.com/install) (os linux, cpu x86)
– AWS console 操作ため、管理権があるアカウントは必要## 2.背景
SNS系アプリでよく見かけるサムネイルです。これらの処理には時間がかかりますが、たまにしか実行されません。メインのサーバーにサムネイル処理を置くと、他のサービスに影響を与える可能性があ
node js でdiscord のbot作成#1 nodejsの導入botを起動
# この記事を書いた自分の環境
| 名前(アプリ名とか)| バージョン |
|:-:|:-:|
| pc | Windows10 |
| nodejs | v21.6.2 |
| discord js | 14.14.1 |
# node js 導入
まず以下のリンクに飛びましょうhttps://nodejs.org/en
そしたら Current
Latest Features
って書いてある方を選びましょう
って感じのやつです21.6.2って書いてあるけれどこれが違ってもok“`bash:cmd
node -v
“`
って打ったら
“`console:cmd
v●●.●.●
“`
って出たら成功です※●はバージョン# bot制作
そしたら次のリンクに飛んでhttps://discord.com/dev
IP アドレス確認くんを作る!! powered by Node.js on Azure App Service
こんにちは、アーキテクトのやまぱんです。
補足コメントや質問、いいね、拡散、是非お願いします🥺！
間違ってたら優しく教えてください！node.js を触るのはこれが 5 回目ぐらいなんですけど、今回本来のメインの検証をするための下準備でハマってしまった。
## きっかけ
・検証のため IP アドレス確認くんを作りたくなった
・作ってみるとつまった
・**ローカルでは動くのに、Azure App Service にデプロイすると動かないっていう状態**にハマる、沼る
・他にも詰まってる人がいそうだった
Stack over flow や Qiita でも同じようなエラーになってる人がいた
・今後も作ることありそうなのでメモしとこ## 事前準備
node.js、Azure CLI ,Express Generator などはインストール済の Windows 環境で実施## 手順
+ 1.管理者権限のターミナルにて express のひな形を作る
“`powershe
PowerShellでyarnをインストールしようとしたら、「yarn : このシステムではスクリプトの実行が無効になっているため～」とエラーが出た
# 今回困ったこと
タイトルの通りですが、PowerShellで`yarn`を使おうと`npm`でインストールしようとしたら、以下のようなエラーが出て手詰まりになりました。
“`
yarn : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\hogehoge\nodejs\bin\yarn を読み込むことができません。詳細については、「about_Execution_Policies」(https://
go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:3
+ . ‘C:\Users\hogehoge\nodejs\bin\yarn
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : U
Vite + React + Typescript 環境構築おためし
# 概要
[vite](https://ja.vitejs.dev/)はwebpackの欠点を解消するように作られたビルドツール。
最近巷でよく聞くので、本家のサイトを参考にしてビルドをやってみようと思う。# 参考
https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%95%E3%82%9A%E3%83%AD%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B
# 環境
今の環境はこんなかんじ。– OS
– MX 21.3 Wildflower (64bit)
– CPU
– Intel(R) Core(TM) i3-2350M CPU @ 2.30GHz
– RAM
– 4G
– nvm
– version 0.35.0
– node
– version 20.11.1やけにスペックが低いのは古くなった大学生協PCに
