- 1. 【Express】GitHubでよく見るあのアイコンを実装する
- 2. Next.jsプロジェクトに追加したい設定11個
- 3. Boltでローカル支援botを作る
- 4. UIが良くて高速なOSSのWiki「Wiki.js」とは?
- 5. 既存のMySQLを利用したNodeJSにPrisma導入する手順
- 6. LINE Botのアイコンや表示名をNode.jsから変える
- 7. 水泳部マネージャーがFINAポイントの計算用APIを公開した話
- 8. 環境構築からサーバサイドレンダリングでbootstrap5を使うまで
- 9. WebSocketで引っかかったこと(SSL対応)
- 10. NVSを使ってNode.jsをWin11にインストールする
- 11. Node.jsからAzure Open AIのWhisperを使う
- 12. Open AIのAPIで音声合成・TTS (text-to-speech) してみる
- 13. OpenAIのWhisperをNode.jsで触って会議音声の文字起こしを試してみる
- 14. S3互換OSS MinIO&Node.jsでローカル開発
- 15. Node.jsでAzure Open AIのライブラリ(@azure/openai)を使ってAzure Open AIを使うメモ
- 16. OpenAI公式npmモジュールでAzure Open AIのGPT APIを使うコピペサンプル
- 17. 【v4対応】シンプルにNode.jsからOpen AIのGPT APIを使うメモ
- 18. Slackの会話履歴の取得をTypeScriptで実装する ~conversations.replies~
- 19. TypescriptでCloud Loggingにログを出力する方法
- 20. Switchbot 温度計をobnizに対応した話
【Express】GitHubでよく見るあのアイコンを実装する
# あのアイコンって?
![github-identicon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348923/13dd16b3-b9a3-187d-1c02-e5c00ee6585a.png)
– GitHubの初期アイコンの事です。
– identiconと呼びます。
# 準備
### express-generatorを使って雛形を作成する
express-generatorがインストールされていない場合はnpm install -g express-generator
express –views=ejs identicon-express
cd identicon-express
npm installexpress-generatorがインストールされている場合は
express –views=ejs identicon-express
cd identicon-express
npm ins
Next.jsプロジェクトに追加したい設定11個
# はじめに
[create-next-app](https://nextjs.org/docs/pages/api-reference/create-next-app)を使うと、Next.jsに必要なパッケージの導入や設定が完了した状態になり、複雑な作業をせずにプロジェクトを開始できます。
しかし私は、いつももう少し追加設定を行っています。本日はその内容を紹介いたします。なお、割と万人に納得してもらえそうなものもあれば、かなり個人の好みのものもあります。
## 当記事の前提バージョン
| ソフトウェア | バージョン |
| ———————————————————————————————————————– |
Boltでローカル支援botを作る
## はじめに
この記事は、[Supershipグループ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/supership)の8日目の記事になります。
作業していると自動化したいなということが多々あります。過去いろいろ作って試していたのですが、管理が分散化してしまい使わなくなったものもあります。そこでまとめて管理するためにローカル環境にbotを常駐化させて1本化を試みました。
botにやってもらっていることは簡単で主に CronJob で作業を一定の日時に行ってもらってます。それだけでもいいのですが、Slack を介して一定の作業をしたいことがあったのでBoltを採用しました。
## 環境
– Mac
– ターミナル
– Slack
– Node.js v20.6.0
– npm 9.8.1## Node.js の環境構築
まずは Node.js をインストールします。今回は Homebrew を利用してインストールします。
“`sh
brew install node
“``node
UIが良くて高速なOSSのWiki「Wiki.js」とは?
OSS の Wiki といえば、Wikipedia に使われている「 Media Wiki 」をはじめとして、データベースが不要な「 DocuWiki 」、「 CROWI 」「 GROWI 」 などいろいろあります。
その中でも Wiki.js は 2017 年に発表されたかなり新しい OSS の Wiki で、高速な JavaScript のエンジンを使用しているために高速で、デザインも良く、とても多機能です。
公式ドキュメントをざっと読んで、その機能と特徴をまとめます。
https://js.wiki/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/abfaad74-06e2-bb1e-828d-26c885d827a3.png)
公式は、「最もパワフルで、拡張性のあるオープンソースのWiki」を謳っています。
次のような特徴があるとしています。
– どこにでもインストールできる
– だいたいどんな仮想環境にもインストールできて、大抵のRDBに
既存のMySQLを利用したNodeJSにPrisma導入する手順
# はじめに
自身の忘備録として、MySQLを利用したNodeJSプロジェクトにPrismaを、後から導入する手順をまとめます。
※ ***注意点***
Prismaは ***Node.js >= 16.13*** を必要とするので、バージョンが適していない場合はターミナルにて、以下によって指定しtNodeJsをインストールし“`bash
nodebrew install-binary インストールしたいNodeJSのバージョン
“`
または
“`bash
nvm install インストールしたいNodeJSのバージョン
“`以下を実行することでバージョン変更します。
“`bash
nodebrew use インストールしたNodeJsのバージョン
“`
または“`bash
nvm use インストールしたNodeJsのバージョン
“`# Prismaを導入
大きな流れは[公式ドキュメント](https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-
LINE Botのアイコンや表示名をNode.jsから変える
少し前にBOTのアイコンや名前を変更する追加されていて、APIで操作できるのでNode.jsからやってみました。
表示名 form "元々のBOT名" という表記に #linedc #protoout pic.twitter.com/cx3IBft5su
— 菅原のびすけ (プロトアウト9期募集中) (@n0bisuke) 水泳部マネージャーがFINAポイントの計算用APIを公開した話
# はじめに
この記事は、Qiita Advent Calendar 7 日目の記事です。
以下の記事より、すべての記事をご覧になれます。https://qiita.com/0_terarin_0/items/0f367210e2465f7772c9
# 筆者について
– 現在高校2年生
– 水泳部マネージャー
– 生徒会長
– とある団体の代表# 本編
この API は MIT でオープンソース化しています。気になる方はぜひ下のリポジトリまで!
https://github.com/0-terarin-0/api-getFinaPoint
## API 概要
FINA ポイントを計算するための API です。ここで、多くの方は「FINA ポイントとはなんぞや?」というふうに思います。簡単に説明すると「どんだけ泳げるか」というのを 1000 をマックスに数値化したものです。以下に World Aquatics(旧 FINA)の分と翻訳を載せておきます。
> (原文)
> The World Aquatics Points Table allows compar環境構築からサーバサイドレンダリングでbootstrap5を使うまで
## 背景
初めてサーバサイドレンダリングを使った.
忘れないうちに,環境構築からサーバでCSSを読み込むまでをメモしておこうと思う.
bootstrap5を使えるようにするまでに結構詰まったので役にたつ人がいればなと思う.
今回は,Node.jsとpugをベースにbootstrap5を使ってみる.## 雰囲気理解のサーバレンダリング
![ssr概要.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3600683/eb459a8d-64bc-05cf-90d5-c1dd31306e10.png)
サーバサイドレンダリングは,アプリケーションサーバでページ(HTML)を生成して提供する方式.
サーバでページを生成することで,スマホなどの低めの性能を持つ端末でも,比較的早い速度でブラウザでの表示が可能となる.
(最近はそこまで低い性能端末がないのでクライアントサイドレンダリングでもいいと思ってる)
今回は,ブラウザとアプリケーションサーバのやり取りだけ実装する.## 前提の環境について
OS
WebSocketで引っかかったこと(SSL対応)
本記事は、[めんどい太郎の Advent Calendar 2023](https://qiita.com/advent-calendar/2023/mendoitarou_first_calendar) 7日目の記事です。
# はじめに
この記事は初心者が書いています。
この前、WebSocketを利用したWebページを作成したところエラーが出てうまく行かなかったのでその原因と解決策をご紹介いたします。
# エラー
Node.jsのwsでWebSocketのサーバーを建て、JavaScriptで接続しようとしたところ以下のようなエラーが発生しました。
“`
Uncaught DOMException: Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
“`これはつまりHTTPSのサイトでHTTPのWebSocket接続をしたらセキュリティ的によくないから接続しないよというエラーです
NVSを使ってNode.jsをWin11にインストールする
こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。今回はNode.jsをNVSを使ってWin11環境にインストールしていきたいと思います。
# 用語
## Node.js
あっているかはおいておきますが、JavaScriptの派生形みたいなイメージなんだなぁと思ってます。JavaScriptそれ自体はHTML/CSSと一緒に使うことでWebページに動きを出せるヤツ。ただ、このJavaScriptはこのままだとWebブラウザ上でのみしか動作できないみたいで、それをサーバ上でも実行できるようにしたのがこのNode.jsらしいです。
確かにそういわれてみると、”node”という言葉は”サーバ”みたいな使われ方をすることがありますし、NodeのJavaScript、略してNode.jsみたいな感じで覚えるとなるほど?と思ったり思わなかったりしました。## NVS
Node Version Switcherの略
Node.jsのバージョンを簡単に切り替えられるようにするツールみたいです。
自分の環境に複数のNode.jsのバージョンを持たせることが出来るので
Node.jsからAzure Open AIのWhisperを使う
Open AIのAPIでWhisperは使いましたが、Azure Open AIでも使ってみようと思います。中身は変わらないはず。
https://qiita.com/n0bisuke/items/2e69cbf64fc890900bd0
## モデルのデプロイまで
### リソース作成 – 米国中北部または西ヨーロッパ リージョン
**そもそも全てのリージョンで使える訳じゃない**ってのがあります。
> ![スクリーンショット 2023-12-06 20.32.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/ea148367-86c3-4d04-7156-cf0a6183657e.png “スクリーンショット 2023-12-06 20.32.02.png”)
> https://learn.microsoft.com/ja-jp/azure/ai-services/openai/whisper-quickstart?tabs=command-line&pivots=r
Open AIのAPIで音声合成・TTS (text-to-speech) してみる
ChatGPTなどのGPTモデルを使うのと同じように、同じOpen AIのSDKでTTS(Text to Speech = テキストから音声を生成)を試せます。
ちなみに、逆のSSTはこちら
https://qiita.com/n0bisuke/items/2e69cbf64fc890900bd0
## the quick brown fox jumped over the lazy dogs
というテキストを読み上げてもらいました。mp3などを指定するとその形式で生成されます。
[こんな感じ](https://i.gyazo.com/84b13aefd42dccf142ed72fbc099ce45.mp4)です。
## tts-1モデル
モデルはtts-1とtts-1-hdが使える模様ですね。
> ![スクリーンショット 2023-12-06 16.53.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/005486a5-084c-75b7-4cd3-115bfb660
OpenAIのWhisperをNode.jsで触って会議音声の文字起こしを試してみる
文字起こしで使えると話題のWhisperを使ってSTT(Speech to Text)してみます。
ちなみに逆のTTSはこちら
https://qiita.com/n0bisuke/items/10c9a9aa02bfb62fd158
## 公式にはPython版サンプルはあるけど
https://platform.openai.com/docs/guides/speech-to-text?lang=python
公式にはPython版はありましたが、JavaScript版がなかった感じです。
Node.jsから触りたいですが、以外とコピペできそうなコードが落ちてなくて
こちらのYouTubeが参考になりました。
## まずは文字起こし用音声 – 25MBまで
Google Meetで録画したMP4ファイルをMacで書き出してm4aファイルにしました。
調べてると
> File uploads are currently limited to 25 MB and the
S3互換OSS MinIO&Node.jsでローカル開発
# はじめに
最近、開発のためにMinIOを導入したが、Node.jsの`aws-sdk`でMinIOを操作するサンプルコードがなかなか見つからなくて少し苦労したので、備忘録のために投稿します。
(AWS CLIやNode.jsの`@aws-sdk/client-s3`でMinIOを操作するサンプルはたくさんある)前半はMinIOの導入方法で、本題は後半の [Node.jsでMinIOを操作(本題)](#Node.jsでMinIOを操作(本題))です。
# MinIOを導入
1. docker-compose.yamlファイルを用意する“`yaml:docker-compose.yaml
version: ‘3.9’services:
minio:
image: quay.io/minio/minio:latest
container_name: example-minio
environment:
MINIO_ROOT_USER: root
MINIO_ROOT_PASSWORD: password
com
Node.jsでAzure Open AIのライブラリ(@azure/openai)を使ってAzure Open AIを使うメモ
[前回の記事](https://qiita.com/n0bisuke/items/9ee0627ea79ccc414b84)で、`The completion operation does not work with the specified model, gpt-35-turbo. Please choose different model and try again. You can learn more about which models can be used with each operation`というエラーがでるという話をしていましたが、どうやら使おうとしているモデルとメソッドの対応がよくなかった模様でした。
タイトル、冗長ですが、、前回は公式OpenAIライブラリでAzure Open AIを使ったので今回の表現で良い気がする…
## 準備
こちらの記事を元に、モデルを準備します。
https://qiita.com/n0bisuke/items/9ee0627ea79ccc414b84
次にライブラリは@azure/openaiを使います。
ht
OpenAI公式npmモジュールでAzure Open AIのGPT APIを使うコピペサンプル
Azure Open AIのAPIをNode.jsから使ってみます。Azure Open AIのライブラリ(@azure/openai)を使ったら上手くいかず公式(openai)を使ったら上手くいきました。
https://zenn.dev/n0bisuke/scraps/c18f0da1fdc980
## 色々準備
### まずはOpenAIのライブラリインストール
ライブラリを入れておきましょう。
“`bash
$ npm i openai
“`公式を使う場合のはこちらに残しています。
https://qiita.com/n0bisuke/items/6759ff0b0e481892f810
### モデルを作成する
Azureの管理画面からOpenAIのリソースを作成し、モデルデプロイをします。
(ちなみに、現状この時にどこのリージョンを選ぶかで、GPT4が使えたり使えなかったりします)> ![スクリーンショット 2023-12-06 13.53.29.png](https://qiita-image-store.s3.ap-northeast-1
【v4対応】シンプルにNode.jsからOpen AIのGPT APIを使うメモ
2023年8月頃にOpenAIのライブラリがv3からv4にSDKがアップグレードがあり、今までのコードが使えなくなったりしてました。 某授業で先生が詰まってましたね… ということでメモです。
## 準備
APIキーを取得してライブラリもインストールします。
– APIキー発行
– https://qiita.com/okinakamasayoshi/items/247c58342e5cf15c7bcd
– npmライブラリのインストール“`bash
$ npm i openai
“`## コピペ実行用
“`js
const OpenAI = require(‘openai’);
const key=’API キー’const openai = new OpenAI({
apiKey: key, // defaults to process.env[“OPENAI_API_KEY”]
});async function main() {
const completion = await openai.chat.completions.c
Slackの会話履歴の取得をTypeScriptで実装する ~conversations.replies~
# 目次
1. 概要と前提
1. 実装のポイント
2.1. [`conversations.replies`](https://api.slack.com/methods/conversations.replies)のスコープ
2.2. [`curosr`ベースのページネーション](https://api.slack.com/docs/pagination#cursors)
2.3. [Rate limits](https://api.slack.com/docs/rate-limits)
1. ソースコード
1. 感想# 1. 概要と前提
Slackのメッセージの会話履歴の取得をTypeScriptで実装していきます。
本記事では、私が実装する上で躓いたところを中心に解説していきます。そのため、全ての手順を詳細に解説するわけではありません。上記の目次を参考に、必要な箇所だけつまみ食いしていただければ幸いです。
**注意**:そもそも、Slackには、会話履歴などのデータをexportする機能が備わっています。
参考:[ワークスペースのデータをエクス
TypescriptでCloud Loggingにログを出力する方法
# はじめに
本記事は、私が、Typrscript を使用して、Cloud Logging に出力しようとした際に、
以下の点が分からず少し調べるのに時間が掛かってしまったので解決した方法を記事にしました。– Typescript で構造化ログを出力する方法
– ログフィールドを変更する方法
– ロギングパッケージの種類# 想定読者
– Typescript で構造化ログを出力する方法が分からない
– 「Nodejs 構造化ログ フィールド変更」で調べてもそうじゃないって記事ばかりあった人
– ぱっと、解決方法が知りたい人# 解決法
ロギングのインスタンスを生成する際に以下のカスタムフォーマットを設定する
1 . winston をインストール
“`bash:npm
npm install winston
“`2 . loggerr インスタンスを生成
“`javascript:src/middleware/logger.ts
import winston from ‘winston’;const myCustomFormat = winst
Switchbot 温度計をobnizに対応した話
SwitchbotのBluetoothAPIが公開されていると聞いたので、obnizと連携できるなと連携させてみました。
あんまりパーツライブラリの開発過程って書いたことないなと思って、今回はライブラリの使い方というよりは作り方を書いてみます。## SwitchbotAPIを読んでみる
SwitchbotのGithubにて、APIが公開されていました。
ちょっとわかりにくいのが、SwitchBotAPIと書いてあるのはwebのapiで、
https://github.com/OpenWonderLabs/SwitchBotAPI
SwitchBotAPI-BLEのほうがBluetooth APIの仕様書のようです。
https://github.com/OpenWonderLabs/SwitchBotAPI-BLE
手元にあるのがSwitchbot 温度計なので、温度計の仕様を見てみます。
温度計は英語名がMeterっぽいので、Meterのところを見てみます。目次を見るとできることの全体像がわかりますね。
![SS20231205171345.png]