- 1. Discord.js v14 botの作り方【基礎・埋め込み編】 (2024/現在)
- 2. 外部トリガーからカメラを起動してTeachable Machineに繋げてみる
- 3. Discord.js v14 botの作り方【基礎・メッセージ編】 (2024/現在)
- 4. Object.entries()の型をつよつよにしたいんだ！@typescript
- 5. package.jsonのバージョンを自動で更新！Node.jsアプリ開発者のための時短テクニック
- 6. CesiumのQuickStartからつまづいた人がQuickStartを完全に理解してnode.jsで動かすまで
- 7. Discord.js v14 botの作り方【基礎・ワークスペース作成編】 (2024/5/21現在)
- 8. Discord.js v14 botの作り方【基礎・動作確認編】 (2024/5/21現在)
- 9. Discord.js v14 botの作り方【基礎・環境構築編】 (2024/5/21現在)
- 10. Discord.js v14 botの作り方【基礎・下準備編】 (2024/5/21現在)
- 11. Node.js の fs の代わりに Bun.file でファイル読み書きをやってみる
- 12. ChromeOS FlexのLinux環境でSVGエディターWEBアプリケーションのセットアップとビルド
- 13. Node.jsでかっこよくサーバーを開ける
- 14. コンソールからChatGPT質問する簡易チャット(Node.js)
- 15. Step Functionsを使ってみた
- 16. GPT-4o の入力に 2つ／3つの画像ファイルを使う（画像は Base64エンコード）：OpenAI の Node.js用ライブラリを利用
- 17. EBSデフォルト暗号化をカスタムリソースで実施〜Node.js編〜
- 18. m1 macでnodebrew installできないverがある時
- 19. GPT-4o の入力に Base64エンコードした画像ファイルを使う：Node.js の process.loadEnvFile() と OpenAI のライブラリの組み合わせ
- 20. PlaywrightのDocker imageとactions/cache
Discord.js v14 botの作り方【基礎・埋め込み編】 (2024/現在)
# 準備中…
2024/5月中に公開します！
外部トリガーからカメラを起動してTeachable Machineに繋げてみる
Node-REDからTeachable Machine（以下、TM）を使う時に[node-red-contrib-browser-utils](https://flows.nodered.org/node/node-red-contrib-browser-utils)のカメラで写真を撮影してを使うのが一般的？です。
## カメラボタン以外から起動させたい
このやり方だとカメラボタン以外からの起動ができず、外部のスイッチを押して起動、何かLINEが届いたらカメラ起動など外部トリガーからの起動ができません。
> 
[@sumit_shinde_84/node-red-dashboard-2-ui-webcam](https://flows.nodered.org/node/@sumit_shinde_84/node-red-dashboard-2-ui-webcam)というノードを使うことで外部トリガーからカメラ起動ができます。
> こちらのノードは入力の口
Discord.js v14 botの作り方【基礎・メッセージ編】 (2024/現在)
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！# 今回の目標
メッセージの仕組みと、複数の送信方法を理解する。
いろんな種類があるので、できるだけわかりやすく簡単に説明します！# メッセージについて
送信方法は大きく分けて3つあります。
1. チャンネルを探して、送信する
1. メッセージに対して、返信する
1. ユーザーを探して、ダイレクトメッセージ (DM) を送信するそれぞれ方法を簡単に説明します！
## チャンネルを探して、送信する
### チャンネルを探す とは
まず`探す`ってどういうことでしょうか？
Botは、複数のサーバーに導入されます。
また、チャンネルにはそれぞれ唯一無二のidが紐づけられ
Object.entries()の型をつよつよにしたいんだ！@typescript
## 環境
“`json:package.json
“typescript”: “5.0.4”
“`## 困りごと
TypeScriptで教科ごとのテストの点数を扱うクラスを定義しました。
“`tsx:typescript
class ScoreClass {
constructor(
public english: number,
public math: number,
public science: number,
public history: number
) {}
}
“`太郎くんのテスト点数を用いてインスタンスを生成し、英語が平均の79点以上であればそれを称えるスクリプトを書きました。
“`tsx:typescript
const taroScore = new ScoreClass(90, 80, 70, 60); // 英語は90点だ！Object.entries(taroGrade).forEach(([key, value]) => {
if (key === ‘english’) {
package.jsonのバージョンを自動で更新！Node.jsアプリ開発者のための時短テクニック
## バージョンいちいち上げるの面倒
Node.js でアプリを作ったときに、いちいちバージョン上げたりするの面倒じゃないですか？
自動アップデートされる場合は、ユーザからしたらバージョンなんて意識しないでしょうしちょっと無駄がある気がして、これを何とかしたい## リリース時に自動でバージョンを上げる
### バージョン表記
自動でバージョンを上げるなら、
“`
<西暦>.<月(一桁)>.<カウンタ>
“`
のような表記が良さそうですね。
(最後を <日> にしてしまうと、同日に複数回のリリースができなくなるため不採用)### package.json>version を書き換えるスクリプト
`versionCounter.js` という名前で以下の内容のスクリプトを作成。
“`
const fs = require(‘fs’);
const path = require(‘path’);const counterFilePath = path.resolve(__dirname, ‘build-counter.txt’);
const packageFileP
CesiumのQuickStartからつまづいた人がQuickStartを完全に理解してnode.jsで動かすまで
いやほんとJavaScriptとか普段触ってないから無理です……
# 概要
Cesiumを使って3次元データを可視化したいと思い立ったのがここ数日。ま，とにかく触ってみるか，ということで公式のQuickStartを動かしてみる……動かしてみる……動かない……
ということでイライラしていたものの最終的に動いたので備忘録。
# 注意
新しい技術なので仕方がないことだが，Cesiumは，たびたび，破壊的に仕様が変わるらしい（未確認情報）。なので，この内容がこの先どれだけ使えるか不明。
そもそも，同様の情報が見つからないところを見ると，とんでもなく基礎的なところで私が躓いているか，私の環境特有の問題なのかもしれない。
# QuickStartで詰まるまで
公式はココ
https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/
アカウントを作って，tokenを取得する。
取得したtokenに合わせてQuickStartのコードが変わるという近未来な仕様にビビる。さて，2つのコードがサンプルで掲載されている。きち
Discord.js v14 botの作り方【基礎・ワークスペース作成編】 (2024/5/21現在)
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！# ワークスペースとは
ワークスペースとは、簡単に言うとBotのプログラムのごちゃごちゃをまとめるフォルダのことです。
フォルダを作成するだけではなく、パッケージのインストールなどいくつかやることがあるので頑張ってください！また、僕はMacbookで作業しますが、Windowsの方もやることは同じです！
# ディレクトリの作成
ディレクトリ…? なにそれおいしいの って人向けに説明するつもりなので、分かる人は飛ばし飛ばしでも大丈夫です！
|手順|説明|備考|
|—|—|—|
|1|`エクスプローラー`または`Finder`を開きます。 (以下Finde
Discord.js v14 botの作り方【基礎・動作確認編】 (2024/5/21現在)
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！# 今回の目標
実際にbotを起動し、チャンネルにメッセージを送信してみることが目標です！
そんなにたくさんやることはありませんが、難しいので頑張ってついてきてください！# Botの情報をあつめる
Botを起動・動作させるうえで、botを操作させるための情報がいくつか必要になります。
|手順|説明|備考|
|—|—|—|
|1|[Discord Developer Portal](https://discord.com/developers/applications)にアクセスし、自分が作っているbotを選択します。|
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！# 環境構築とは
discord.jsというパッケージをインストールする`npm`と、
discord.jsを実行する`Node.js`をインストールしなければ、botを開発したり、動かしたりすることができません。そのための環境を作り、開発や実行を行える状況にすることを`環境構築`といいます。
# インストール方法
:::note warn
Node.jsのインストール方法は頻繁に変更される可能性がございます。
現時点でのインストール方法を記載しますが、できない場合は`Node.js install`などとググったほうが早いと思われます。
:::
|手順|説明|備考|
Discord.js v14 botの作り方【基礎・下準備編】 (2024/5/21現在)
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。今回は、botをプログラムするために、bot自体を作成していきます！
**※ 現時点での情報ですので、見た目などが今後変更される可能性がございます。**# Botを開発するサーバーを作ろう
|手順|説明|備考|
|—|—|—|
|1|Discordの画面左上にある「**サーバーを追加**」をクリックします。|| (File system) を使っていたのですが、せっかくなので Bun が用意している方法でファイルの読み書きをやってみます。## 方法
`Bun.file(path)` でファイルを読み込みます。
`Bun.write(path, text)` でファイルに文字列を書き込みます。## 環境
Bun v1.1.3### ファイル構成 (抜粋)
“`
|–ango_sakura.txt
|–index.ts
|–node_modules
|–package.json
|–tsconfig.json
“`“`text:ango_sakura.txt
彼は女の顔の上の花びらをとってやろうとしました。彼の手が女の顔にとどこうとした時に、何か変ったことが起ったように思われました。すると、彼の手の下には降りつもった花びらばかりで、女の姿は掻き消えてただ幾つかの花びらになっていました。そして、その花びらを
ChromeOS FlexのLinux環境でSVGエディターWEBアプリケーションのセットアップとビルド
:::note warn
この記事は初心者向けです
エンジニア向けの記事ではありませんのでご注意ください
:::## 0.はじめに
私は、非エンジニアで初心者です。
ChromeOS Flexで以下のSVGエディターWEBアプリケーションを試そうとして手間取ったので備忘録を残します。
https://github.com/SVG-Edit/svgedit
こんな感じの画面のSVGエディターです。
以下コマンドが並ぶだけです
## 1.セットアップとビルド手順
### 1-1.ChromeOS FlexのLinux環境（Debian11）を最新にする
Debian11ベースですがLXCコンテナ環境なので、素のDebian11とは異なるらしいです。
sudo apt update
sudo apt up
Node.jsでかっこよくサーバーを開ける
こんにちはAtsu1209です。
今回はNode.jsでかっこよくサーバーをあける方法を書いていきます。
初心者向けです。(私のメモでもある)# Node.jsとは
Node.jsは名前から読み取れるように基本的にはJavaScriptです。普通のJavaScriptはクライアント側(サイトを閲覧している側)で動きます。
しかしどこかの天才がサーバーサイドでJavaScriptを動かせるようにしたのが
Node.jsです。# 普通にサーバーを開ける
まず普通にNode.jsでサーバーを開けます。
ExpressというフレームワークとNodemonというツールを使います。### Express
ExpressとはNodeで最も人気なフレームワークです。
サーバーを開けるのがとても楽です、### Nodemon
Nodemonは普段ファイルを更新するたびにサーバーを開け直すところを
自動で更新してくれる便利なツールです。# ツールのインストール
“`console:Expressのインストール
npm install express
“`
“`console:
コンソールからChatGPT質問する簡易チャット(Node.js)
コンソールからChatGPT質問する簡易チャットです
`.env`ファイルにAPIキーを記載してから実行してください
“`:.env
OPENAI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
“`jsソース
“`js:index.js
/**
* ChatGPTにconsoleから質問する簡易チャット
* ・を.envにAPIキーが必要
* $ npm i openai
* $ node –env-file=.env index.js
*/
import * as readline from “readline”;
import OpenAI from ‘openai’;const openai = new OpenAI({
apiKey: process.env.OP
Step Functionsを使ってみた
# Step Functions使ってみた
仕事でStep Functionsを利用することになり、既に別サービスが稼働しているため私用パソコン・個人AWSアカウントを用いて動作の確認をしてみました。## ソースコード一式
私のGitHubの下記リポジトリに保存しております。
設定や事前準備は`src/README.md`を確認してください。
(AWS認証情報などは消しております)
[aws-step_functions](https://github.com/k-genki0913/aws-step_functions)作成したStep Functionsのワークフローは以下になります。
### Step Functionsに関して調べたこと
※全体のソースコードはリポジトリを見て下さい。#### ▪️sam te
GPT-4o の入力に 2つ／3つの画像ファイルを使う（画像は Base64エンコード）：OpenAI の Node.js用ライブラリを利用
以下の記事で試していた、GPT-4o での画像入力の話の続きです。
●GPT-4o の入力に Base64エンコードした画像ファイルを使う：Node.js の process.loadEnvFile() と OpenAI のライブラリの組み合わせ – Qiita
https://qiita.com/youtoy/items/3844c6904b6a39fdad64今回は、公式のドキュメントの以下に書かれている「Multiple image inputs」を試してみます。
（以下を見かけて、なんとなく試してみたくなったため）●Vision – OpenAI API
https://platform.openai.com/docs/guides/vision/multiple-image-inputs
上記の公式サンプルでは、入力画像
EBSデフォルト暗号化をカスタムリソースで実施〜Node.js編〜
# EBSデフォルト暗号化をカスタムリソースで実施〜Node.js編〜
以下の業務要件があったため、EBSデフォルト暗号化をカスタムリソース（Node.js）で実装することになりました。
– リソースの作成や設定値の変更は、コンソールやCLIからを行わずIaCで管理する
– ランタイムには、Node.jsを使用するPythonを用いた実装は、以下の記事が参考になります。
https://dev.classmethod.jp/articles/lambda-backed-custom-resources-enable-encryption-ebs/
早速、ソースコードの記載から始めていきます。
後半では、詰まったポイントも記載するので、興味がある方は一読してください。# ソースコード
“`yaml:EnableEBSDefaultEncryption.yaml
AWSTemplateFormatVersion: “2010-09-09”
Description: Template to enable EBS default encryption across all r
m1 macでnodebrew installできないverがある時
# 事象
m1 macでnodebrewを使用して指定のnodeのバージョンをインストールするときに、対応していないverがある場合がある。“`
nodebrew install v10.15.2
v10.15.2 is not found
“`# 原因
m1 mac（arm64）に対応していないnodeのバージョンのため。# 解決方法
arch -x86_64を頭につけるとインストールすることが可能
“`
arch -x86_64 nodebrew install [version]
“`
– archコマンドでアーキテクチャ(実行環境の設定)をx86_64に指定する
GPT-4o の入力に Base64エンコードした画像ファイルを使う：Node.js の process.loadEnvFile() と OpenAI のライブラリの組み合わせ
以下の記事のと同様に、「GPT-4o、Node.js、公式ライブラリ」が関係する記事です。
●GPT-4o と Node.js の process.loadEnvFile() と OpenAI のライブラリを組み合わせる – Qiita
https://qiita.com/youtoy/items/d535f9dd3db95b914fab今回も、上記と同様に OpenAI の Node.js用ライブラリを使って、GPT-4o の API を扱います。
また、処理の内容は GPT-4o での画像ファイルの入力で、さらに、その画像は自前で Base64エンコードするというものです。流れとしては、入力用の画像ファイルを用意して、それを Node.js の処理で Base64エンコードして、そのエンコードされた結果を GPT-4o の API にわたす形です。
## GPT-4o での画像入力
### Web上の画像を扱う（※ 公式サンプルベース）
まずは、公式サンプルをベースに、GPT-4o での画像ファイルの入力に URL指定を使うやり方を試します。元にするサンプルは以下
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
