- 1. 【Azure OpenAI】gpt-4oのAPIが使えるようになったので試してみる
- 2. Bedrockのストリーミングレスポンスをストリームのまま返却するLambdaの作り方(LangChainも対応)
- 3. Discord.js v14 botの作り方【基礎・埋め込み編】 (2024/5/22現在)
- 4. 外部トリガーからカメラを起動してTeachable Machineに繋げてみる
- 5. Discord.js v14 botの作り方【基礎・メッセージ編】 (2024/5/22現在)
- 6. Object.entries()の型をつよつよにしたいんだ!@typescript
- 7. package.jsonのバージョンを自動で更新!Node.jsアプリ開発者のための時短テクニック
- 8. CesiumのQuickStartからつまづいた人がQuickStartを完全に理解してnode.jsで動かすまで
- 9. Discord.js v14 botの作り方【基礎・ワークスペース作成編】 (2024/5/21現在)
- 10. Discord.js v14 botの作り方【基礎・動作確認編】 (2024/5/21現在)
- 11. Discord.js v14 botの作り方【基礎・環境構築編】 (2024/5/21現在)
- 12. Discord.js v14 botの作り方【基礎・下準備編】 (2024/5/21現在)
- 13. Node.js の fs の代わりに Bun.file でファイル読み書きをやってみる
- 14. ChromeOS FlexのLinux環境でSVGエディターWEBアプリケーションのセットアップとビルド
- 15. Node.jsでかっこよくサーバーを開ける
- 16. コンソールからChatGPT質問する簡易チャット(Node.js)
- 17. Step Functionsを使ってみた
- 18. GPT-4o の入力に 2つ/3つの画像ファイルを使う(画像は Base64エンコード):OpenAI の Node.js用ライブラリを利用
- 19. EBSデフォルト暗号化をカスタムリソースで実施〜Node.js編〜
- 20. m1 macでnodebrew installできないverがある時
【Azure OpenAI】gpt-4oのAPIが使えるようになったので試してみる
# はじめに
2024年5月22日にAzureOpenAIにてgpt-4oが正式にリリースされました。
APIの仕様等に大きな変化がないか検証するついでに記事を作成しています。
API検証のためのソースコードは前回の記事にて作成したものを流用しています。https://qiita.com/kawai_k/items/729bcabc4c982feb18bf
# モデルをデプロイしよう
現在、gpt-4oは6つのリージョンで使用可能です。
今回はeast usにてgpt-4oのデプロイを行います。
引用:[Azure OpenAI Service models](https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/models)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760635/5a77d140-a364-bdac-d120-1e90547ffd87.png)
はじめに、AzureOpen
Bedrockのストリーミングレスポンスをストリームのまま返却するLambdaの作り方(LangChainも対応)
Bedrockを使ったアプリをLambdaで動作させたい!
レスポンスはストリームで返したい!!と思って調べたところ、結構条件があることがわかりました。
https://aws.amazon.com/jp/blogs/news/introducing-aws-lambda-response-streaming/
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/configuration-response-streaming.html
## ストリーミングレスポンスを返却するための条件
ストリーミングレスポンスを返却するためにはいくつか条件があります。
### Lambdaの実装方法の条件
Lambdaの実装方法が、以下の方法である必要があります。
* Node.jsのマネージドランタイム
* カスタムランタイム([参考](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/runtimes-custom.html#runtimes-custom-response-s
Discord.js v14 botの作り方【基礎・埋め込み編】 (2024/5/22現在)
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください!# 埋め込みとは
見たほうが早いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794632/e9f599f1-93c4-cfa4-8cc6-362bbeadca13.png)
これです。
この埋込みはすべてのプロパティが入っていますが、タイトルだけ や 画像だけ という埋め込みを送信することもできます。### 送信方法
`send()`関数の中にオブジェクトで`embed`を入れます。
これも見たほうが早いです。
“`js:index.js
const { C
外部トリガーからカメラを起動してTeachable Machineに繋げてみる
Node-REDからTeachable Machine(以下、TM)を使う時に[node-red-contrib-browser-utils](https://flows.nodered.org/node/node-red-contrib-browser-utils)のカメラで写真を撮影してを使うのが一般的?です。
## カメラボタン以外から起動させたい
このやり方だとカメラボタン以外からの起動ができず、外部のスイッチを押して起動、何かLINEが届いたらカメラ起動など外部トリガーからの起動ができません。
> ![](https://i.gyazo.com/f6915251699613d95e424ed0ce8cf77b.png)
[@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/5/22現在)
# 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を選択します。|![image.png](https:/
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)をごらんください!# 環境構築とは
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の画面左上にある「**サーバーを追加**」をクリックします。|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794632/a466c895-9b8f-31e3-fe9d-0741c430226b.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794632/17a3
Node.js の fs の代わりに Bun.file でファイル読み書きをやってみる
## はじめに
Bun で始めたプロジェクトで、これまではテキストファイルの読み書きに [fs](https://nodejs.org/api/fs.html) (File system) を使っていたのですが、せっかくなので Bun が用意している方法でファイルの読み書きをやってみます。## 方法
`Bun.file(path)` でファイルを読み込み、 `file.text()` でファイルをテキストとして読み出します。
`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エディターです。
![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35574/ee3aa982-6b4a-8316-f5dd-21001f190ada.png)
以下コマンドが並ぶだけです
## 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質問する簡易チャットです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276579/e2c279ea-a059-1058-23fa-a2c1b89db93c.png)
`.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![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fd8341b7-8a23-3ecf-05c4-8b740ee65db5.png)
上記の公式サンプルでは、入力画像
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に指定する