- 1. 遊び・仕事・催し事の予定を画像にしてみんなで共有しやすくしよう！「Event Schedule Image Generator」
- 2. NestJS Provider の実装方法
- 3. kyselyのプラグインをつくってみた
- 4. Expressのメモ
- 5. Expressでnode_modulesのbootstrapをクライアント側から静的ファイルとして読み込む
- 6. Electronでアプリ作成3 ElectronでSqlite3を操作
- 7. DiscordでAIと音声対話できるBOTを作ってみる
- 8. 非同期でのNode.jsのReadStreamの振る舞いを確認してみる
- 9. Google Cloud Runのデプロイは.gitignoreを見ている
- 10. npm i –legacy-peer-deps
- 11. Flask + Webpack with VSCodeの開発環境
- 12. PreprosでNODE_ENVを使ってステージングと本番でJSの処理を切り替える
- 13. 【Node.js】コードからNFTを作成する方法
- 14. symbol-sdk@3.1.0でTypeScriptを試してみる
- 15. Node.JSのメモ
- 16. Express.jsプロセスのクラスタリング化について
- 17. NestJS でクライアントリクエストを受け取る
- 18. Node.js Error: EPERM: operation not permitted, mkdir の対応
- 19. 【Javascriptメモ】Node.jsで改行なしで出力する方法
- 20. Node.jsでmysql2を扱う時の備忘録
遊び・仕事・催し事の予定を画像にしてみんなで共有しやすくしよう！「Event Schedule Image Generator」
# はじめに
[前々回](https://qiita.com/syab-syab/items/b9961ef9727dbc2cc987)と[前回](https://qiita.com/syab-syab/items/568760669f65b046a955)に続いて、HTML + CSS + JavaScriptで作ったWebアプリをReact.jsで作り直し企画の第三弾です。
今回で最後です。
LINEやX(旧Twitter)などのSNSで遊びや催し事、行事などの予定を周知・共有する際に、
スマホやパソコンで文字で打ち込むのが面倒だったり字数制限があったりして少し不便な思いをしたことが幾度かありました。
そんな折、画像化して貼りつけることでタイプする量も減って字数制限もなくなるかもしれないと閃いて
このアプリを作りました。
タイトルはまんまです。
[Event Schedule Image Generator](https://syab-syab.github.io/reactImageMaker/)
[動画](https://youtu.be/oJdwm63Np8w?si=kH0U
NestJS Provider の実装方法
# はじめに
この記事では、NestJS の Provider の実装方法について記載します。# Provider とは
Provider の特徴は以下の通りです。– Services, Repositories, Factories, Helpers などの Nest の基本的なクラスの総称
– 依存対象 (Dependency) として注入 (inject) される# Provider の実装
クラスに “`@Injectable()“` デコレーターを追加することで、対象のクラスを Provider として扱うことができます。以下の例では、“`CatsService“` クラスに “`@Injectable()“` デコレーターを追加しています。
“`cats.service.ts
import { Injectable } from ‘@nestjs/common’;
import { Cat } from ‘src/interfaces/cat.interface’;@Injectable()
export class CatsServic
kyselyのプラグインをつくってみた
## kyselyとは
Node.js(など)から利用する、SQLクエリビルダーです。
少し前に紹介記事を書いています。https://qiita.com/mont_blanc/items/0564a946b0d6919ad3a0
## kyselyのプラグイン
kyselyには、プラグインという形で実行するSQLや実行結果を編集する機能を導入できます。
kysely本体にもいくつかプラグインが入っています。
以下の公式ドキュメントにも一部が紹介されています。https://kysely.dev/docs/plugins
今回は、前回の「ちょっとイマイチなポイント」をある程度解消するプラグインをつくって一応大体動きそうなのでそれについての話です。
## つくったプラグイン
https://www.npmjs.com/package/kysely-extends-pg-query
PostgreSQL用の(他で未試験の)プラグインです。
現在のバージョンは0.1.3、対応するkyselyのバージョンは0.26.3です。(少なくとも0.26.1だと型エ
Expressのメモ
### app.get()を使ったAPIの作成
“`JavaScript:main.js
import express from “express”;const PORT = 8080;
const app = express(); // 意味合いとしてhttp.createServerで記述した時のserverがappに当たる（慣習としてappと命名する事が多い）app.use(express.urlencoded({ extended: true })); // これを記述しないとPOST時のbodyが正常に受け取れない
// expressではgetメソッド, パスのURL, コールバック関数 を↓のように指定する
app.get(“/”, function (req, res) {
/* [プレーンなnodeとの違い]
whiteメソッド, endメソッドは記述しないで sendメソッド に処理をまとめる
sendは1つのブロック内で複数呼び出せない
*/
res.send(`
Expressでnode_modulesのbootstrapをクライアント側から静的ファイルとして読み込む# 方法
アプリ起動の起点となるjsファイル（多くの人は`app.js`が該当するかと）に以下のような1行を加える。
“`javascript:JavaScript
app.use(‘/bootstrap’, express.static(path.join(__dirname, ‘node_modules/bootstrap/dist’)));
“`
こうすることで`node_modules/bootstrap/dist`下のファイルに対して`/bootstrap`から始まるパスを指定すればアクセスすることができるようになる。
“`html:HTML
“`
# 何をしているのか（解説）
Expressの`app.use()
Electronでアプリ作成3 ElectronでSqlite3を操作
Node.js環境でブラウザベースのアプリが作成できるElectronですが、結構メジャーなアプリがElectronベースで作られているようでね。そんなElectornで取り扱いが簡単なデータベースのSqlite3が操作できたら、いろいろ便利だろうと思い、サンプルとなるアプリを作成しましのたで、投稿します。自分の知識不足で、結構ハマってしまった個所もありましが、とりあえずはデータの挿入、抽出は確認できています。
# 動作確認環境
Windows11
node.js v18.18.1
electron v27.0.0
sqlite3 3.43.0# 参考になる記事、サイト等
Electronアプリの作成については過去の記事で触れてもらっています。https://qiita.com/watmot/items/e79a3f3f8fe27fa54a33
https://qiita.com/watmot/items/5241c97350f3431bd09c
WindowsにSQLite3をインストールしています。こちらのサイト参考にさせてもらいました。大変丁寧で
DiscordでAIと音声対話できるBOTを作ってみる
# はじめに
どうも、限界受験生です。
会話する相手が欲しいけどいない時間帯やコーディングしている最中に音声で質問したいときありますよね(きっと僕だけじゃないはず)
そこで、タイトルにある通りDiscordでAI(ChatGPT)とボイスチャンネルでずんだもんの音声で会話できるBOTを作ってみようと思います。
GCPやOpenAIのAPIは無料枠があるので今回の記事では基本無料で出来るものとなっています。:::note alert
無料枠を超える場合は利用料金が発生するのでご注意ください。
また、バージョンにより、この記事とは違う部分が出てくるかもしれませんので、ご注意ください。
:::# 使用技術
今回は僕の得意なJSを使用して書きたいと思います。
APIはDiscord API、Google Cloud Speech API、ChatGPT API、VOICEVOX APIの4つのAPIを使用していきたいと思います。
GCPのKeyFile発行やDiscordのTokenの発行、ChatGPTのKeyの発行方法は以下の記事をお読みください。
+ [GCP KeyFile発行
非同期でのNode.jsのReadStreamの振る舞いを確認してみる
# 前準備
## 環境
OS：Windows 11 Home 64 ビット オペレーティング システム
CPU：11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz 3.00 GHz
RAM：32.0 GB
Node.js：Node.js v20.4.0.## 入力用テキストファイルを作成する
“`in.txt
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
（中略）
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
“`## ログ
Google Cloud Runのデプロイは.gitignoreを見ている
Cloud Runのビルドでハマったのでメモ
`gcloud run deploy`でCloud Runでデプロイ時に確実に含まれているはずのファイルが
`Module not found: Error: Can’t resolve ‘./setting’ in ‘/workspace/src’`
となる現象が発生。しばらく悩んだところ、
デバッグ用の設定ファイルをgit commitでいちいち更新扱いになるのが面倒くさかったので.gitignoreにファイルを追加していたのが原因のようでした。Cloud Runのビルドはどうやら.gitignoreを使用しているようで、ここでignoreしたファイルはdeployに含まれない模様。.gitignoreから削除したことで解消。
npm i –legacy-peer-deps
“`
https://github.com/MicrosoftArchive/redis
https://github.com/coreybutler/nvm-windows/releases
nvm install 8.10.0
nvm use 8.10.0npm i –legacy-peer-deps
“`
Flask + Webpack with VSCodeの開発環境
# 概要
個人開発中のFlaskアプリでjavascriptが大きくなりすぎたため、jsファイルを分割して管理することにしました。
しかし分割しすぎるとパフォーマンスに問題がでるらしく、回避のためwebpackで数個のjsファイルにbundle(build)する形をとることにしました。
ここで困ってしまったのが、「**FlaskとWebpackを併用する場合のフォルダ構造やデバッグ/ビルドの設定のあるべき姿**」とは?という点です。
結局正解は分からないままなのですが、備忘録がてら自分がどうしたかを記載しておきます。
# 前提知識
### Flaskとは
Webアプリのバックエンドをpythonで書くことができるフレームワークの１つです。他にはdjangoなどがあります。