- 0.1. 【GraphQL】ApolloServer v4 × PrismaでSubscription実装時に関連するデータを取得する方法
- 0.2. Qiita API に Node.js の fetch() で認証つきのリクエストをする
- 0.3. アプリケーションはどのようにMySQLと接続するのか
- 0.4. ReactとNode.jsで作成したウェブサイトをVercelとRender.comを使用してデプロイする方法
- 0.5. symbol-sdk@3.0.7を試してみる
- 0.6. symbol-sdk@3.0.7で作るモザイクとネームスペースのトランザクション
- 0.7. 【Unity】WebRTCで複数クライアントをルームごとに相互接続する
- 0.8. 無料でインターネットペットカメラを作ろう
- 0.9. 【GraphQL】ApolloServer v4によるSubscriptionの実装方法
- 0.10. JavaScriptでPDF生成5パターン
- 0.11. symbol-sdk@3.0.7で作る転送トランザクション
- 0.12. ECサイトで決済システムStripeを使いたい
- 1. Node.jsとStripeを使った決済システムの作り方
- 1.1. Next.js v13 App route で Web Crypto API が undefined
- 1.2. google-api-nodejs-client で Calendar API をよんだら Rate Limit Exceeded (403)を踏んでリトライした話
- 1.3. nodebrewによるNode.jsのインストール手順まとめ
- 1.4. TypeScriptでAWS SQSを使う
- 1.5. nodejsでsqlite3のデータを表示する
- 1.6. npmでよく使うコマンド
- 1.7. 【AES256-GCM】暗号化メソッドをNode.js・TypeScriptで実装する
- 1.8. YouTube Data API v3 を使ってプレイリストを作成する(業務実例付き)
【GraphQL】ApolloServer v4 × PrismaでSubscription実装時に関連するデータを取得する方法
# はじめに
今回は`GraphQL`と`Apollo Server v4`によるDBでリレーションが組んであるデータをリアルタイムで取得する方法(Subscription)を実装していきます。# 前提
Subscriptionについてわからない人は、公式や以下の記事を参考にしてください。> – [Subscriptions in Apollo Server](https://www.apollographql.com/docs/apollo-server/data/subscriptions/)
> – [【GraphQL】ApolloServer v4によるSubscriptionの実装方法](https://qiita.com/curry__30/items/287f2bbcff55637374f7)# 実装
今回実装する機能としては、投稿に対して、投票を行う機能を実装していきます。(いいね機能と概念は同じです)## スキーマ定義
注意点として、今回はコード全体ではなく、関連する箇所をピックアップするような形で記載していきます。
:::note info
Pris
Qiita API に Node.js の fetch() で認証つきのリクエストをする
# アクセストークンの発行
まず、認証のためのアクセストークン発行から実施します。公式ドキュメントの認証認可の項目どおりに進めていけば OK です
https://qiita.com/api/v2/docs#%E8%AA%8D%E8%A8%BC%E8%AA%8D%E5%8F%AF
以下のいずれかの方法で発行できます
– ユーザーの管理画面から発行
– OAuth を利用した認可フロー今回は自分自身のアクセストークンだけ取得できれば十分なので、管理画面からの発行をやってみます。
まずは [ユーザーの管理画面](https://qiita.com/settings/applications) を開き、「新しくトークンを発行する」をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27471/e2616c0f-1b46-1361-30d0-50113a3edd55.png)
次は、アクセストークンの設定画面です
– 説明を埋める
– アクセストークンの管
アプリケーションはどのようにMySQLと接続するのか
# この記事について
アプリケーションがMySQLと接続する際、基本的には何らかのORMを使用することだと思います。
ORMではMySQLへの通信は**隠蔽**されており、実装の詳細を気にしなくてもよくしてくれています。この記事ではその隠蔽された**中身の仕様について調べ、その実装を解析**してみました。# MySQLプロトコル
MySQLは**独自の通信プロトコル**を持っており、そのまま「**MySQLプロトコル**」と名付けられています。
このプロトコルはアプリケーションレイヤーに位置しており、下のレイヤーとしてTCP/IPやUnixDomainSocketなどを使用できます。このプロトコルは2つの段階に分かれています。
1つ目のフェーズは通信の開始を行う「**ConnectionPhase**」2つ目のフェーズはSQLの実行を行う「**Command Phase**」です。[^1][^1]: https://dev.mysql.com/doc/dev/mysql-server/latest/PAGE_PROTOCOL.html#protocol_overview
ReactとNode.jsで作成したウェブサイトをVercelとRender.comを使用してデプロイする方法
はじめまして、エンジニア職へのキャリアチェンジのためカナダへ留学中のMayuです!
初めての記事で突然ですが、苦手なデプロイについて自分のメモ用に記録しておこうと思います。
まず今回デプロイしたいのが、下記を使用して作成したオンライン予約サイト。
デプロイURL: https://salon-booking-system-frontend.vercel.app/
・frontend: Vite+React(https://github.com/MayuHayakawa/salon_booking_system_frontend)
・backend: Node.js, MongoDB(https://github.com/MayuHayakawa/salon_booking_system_backend)そしてデプロイに使用したサイトが
・frontend: Vercel
・backend: Render.comなぜこの二つを使用したかという理由は特にありません
(というよりまだよくわかっていないという言い方の方が正しい・・・)
在学中の学校の先生に提示してもらったものをその
symbol-sdk@3.0.7を試してみる
# はじめに
こんにちは。symbol-sdkの3系が手軽に利用できるようになりましたね。
npmでは、執筆時点で3.0.7が公開されています。
https://www.npmjs.com/package/symbol-sdk/v/3.0.7
では、少し触ってみようと思います。
# インストール
今回はブラウザではなくて、Node.jsの環境で実施します。
以下
“`shell
npm i symbol-sdk
“`のコマンドで、
“`json
“symbol-sdk”: “^3.0.7”
“`が入りました。rxjsはいらないみたいです。
また、REST Gatewayとの通信のためにaxiosをインストールしておきます。
“`bash
npm i axios
“`# Typescriptは使えない
最初Typescriptで始めようとしたら、コンパイルでこけました。どうやらTypescriptは対応していないようです。
“`bash
> tscsrc/index.ts:1:23 – error TS7016: Could not
symbol-sdk@3.0.7で作るモザイクとネームスペースのトランザクション
# はじめに
こんにちは。
symbol-sdkの3.0.7、トランザクションシリーズ第二弾です。
今回はモザイクとネームスペースをやっていきます。
https://www.npmjs.com/package/symbol-sdk/v/3.0.7
## シリーズ
https://qiita.com/planethouki/items/860d9f1095c087ccd98f
## 注意事項
書いてあるコードについて、正確性や完全性を保証するものではありません。あくまで参考程度として頂き、最新情報は公式ドキュメンテーションをご確認ください。
# 共通
まずはモザイクのトランザクションとネームスペースのトランザクションで共通となる個所について。
デッドラインと鍵ペアです。“`jsx
import symbolSdk from ‘symbol-sdk’;const network = symbolSdk.symbol.Network.TESTNET;
const deadline = network.fromDatetime(new Date(Date.now(
【Unity】WebRTCで複数クライアントをルームごとに相互接続する
# この記事の概要
この記事では,[WebRTC for Unity](https://github.com/Unity-Technologies/com.unity.webrtc)の[DataChannelのサンプル](https://github.com/Unity-Technologies/com.unity.webrtc/tree/main/Samples~/DataChannel)をもとに作成した複数クライアントのP2P接続を行う方法について解説します.[WebRTC](https://github.com/Unity-Technologies/com.unity.webrtc)と[Websocket](https://github.com/endel/NativeWebSocket)のパッケージを使用しました.# Gif
![ouput.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3358989/1c0171b3-4d2d-8a62-7f20-98b86010de86.gif)#
無料でインターネットペットカメラを作ろう
## 概要
仕事中に、家でお留守番しているペットを見たくなったことはありませんか?
この記事では、
使わなくなったスマホやRaspberry Piを自宅のペットカメラにして外出先からペットを見ることができるシステムを作ります。
このシステムの特徴は
– 無料
– 3分で利用開始できる
– 自宅ネットワークの設定変更不要で、インターネットから見られるです。
完成すると、この図のように、いつでもペットが見られます!
![構成図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141013/1d5849c4-82e1-5104-725e-0bf955f2fb57.png)## さぁ始めよう
この記事では
1. SkyWayのセットアップ
2. デモサーバーを使ってインターネットペットカメラを動かす
3. SkyWayの説明
4. ローカルでペットカメラを動かす
5. GitHub Pagesを使ってホスティングする
6. プログラムの解説という流れで進めていきます。
1, 2だけでも、
【GraphQL】ApolloServer v4によるSubscriptionの実装方法
# はじめに
今回は、`GraphQL`と`ApolloServer v4`を用いて`Subscription`の実装を行いました。
(v4になると記事がないので大変でした・・・)備忘録として残しておこうと思います。
# Subscriptionとは
まず、簡単にですが、Subscriptionとはサーバーに登録や更新処理などのイベントが発生するたびに、データを即時に更新(反映)できるというものです。
(`結果整合性`がとれるApollo Serverの機能のことです)現実のサブスクの定期購入に近く、サーバーにサブスク登録されているクライアントにプッシュすることでデータを即時に更新することができるというものです。
(実際のコードを見るとしっくりくるはずです)# ライブラリの導入
以下のコマンドで必要なライブラリをインストールします。“`terminal
yarn add graphql-ws ws @types/ws @graphql-tools/schema graphql-subscriptions cors @types/cors express
“`
JavaScriptでPDF生成5パターン
PDFの生成は様々なシチュエーションで必要とされる機能です。JavaScriptではいくつかの方法があります。
以下5パターンについて一通り実装した経験からメリット・デメリットを簡単に書きます。## バックエンドでの生成
### 1. HTML + Puppeteer
PuppeteerはGoogle ChromeまたはChromiumをヘッドレス(UIなし)で操作するためのNode.jsのライブラリです。Puppeteerを使えばHTMLをレンダリングしてPDFとして保存することが可能です。
**メリット**:
– HTMLとCSSを用いたレイアウトなので、デザインの自由度が非常に高いです。
**デメリット**:
– レンダリングのためにはブラウザのエンジンが必要なので、サーバー側のリソース消費が大きいです。
– ブラウザのセキュリティ制限により、一部の機能が利用できない場合があります。### 2. PDFKit
[PDFKit](https://github.com/foliojs/pdfkit)は、PDFをプログラムで生成するためのNode.jsのライブラリ
symbol-sdk@3.0.7で作る転送トランザクション
# はじめに
こんにちは。
symbol-sdkの3.0.7がついに出ました。学習のために、様々なトランザクションを作ってみようと思います。https://www.npmjs.com/package/symbol-sdk/v/3.0.7
全部いっぺんに書くと長くなってしまうので、少しずつ分けて書いていく予定です。
今回は、転送トランザクションについて書いてみたいと思います。
## 注意事項
書いてあるコードについて、正確性や完全性を保証するものではありません。あくまで参考程度として頂き、最新情報は公式ドキュメンテーションをご確認ください。
# Transfer Transaction
まずはデッドラインと鍵ペアです。
“`jsx
import symbolSdk from ‘symbol-sdk’;const network = symbolSdk.symbol.Network.TESTNET;
const deadline = network.fromDatetime(new Date(Date.now() + 7200000)).timestamp;c
ECサイトで決済システムStripeを使いたい
Node.jsとStripeを使った決済システムの作り方
ユーザー側のWEBサイトの構築(index.html等)
→ サーバーサイドをnode.js
→ 決済システムはStripeを使用Node.jsの知識が少し必要かもしれないがそこはスルーします
—
好きなファイル名でフォルダを作成
フォルダ名はECサイトで決済システムStripeを使いたい(英語推奨)ターミナルを開いてpackage.jsonを構築
“`php:terminal
npm init -y
“`【index.js】の名前を今回は【server.js】に変えて作業をしようと思うので【package.json】を開き”main”:server.jsとscript ”dev”: “nodemon server.js”の記述を追記する
“`php:package.json
{
{
“description”: “”,
“main”:”server.js”,//ここを追記
“scripts”: {
“dev”: “nodemon server.js”
Next.js v13 App route で Web Crypto API が undefined
## TL;DR
以下の形でインポートする。
“`typescript
import { webcrypto as crypto } from “crypto”;
“`または、 Node.js を v19 以降にアップグレードする。
## 問題:Next.js App Route で Web Crypto API が使えない
Next.js v13 にて、 App Route を使っていた。
Web Crypto API、特に `SubtleCrypto` を使用したコードを書いたところ、以下のように `undefined` とエラーが出た。“`
TypeError: Cannot read properties of undefined (reading ‘digest’)
92| const hash = await crypto.subtle.digest(“SHA-1”, arr);
“`## 原因:Node バージョンまたは Next.js ランタイムの違い
v19 以前の Node.js では Web Crypto API は
google-api-nodejs-client で Calendar API をよんだら Rate Limit Exceeded (403)を踏んでリトライした話
## 概要
[google-api-nodejs-client](https://github.com/googleapis/google-api-nodejs-client)を使って、Calendar のAPIを叩くオレオレAPIを作ってみた際に、一定のアクセス量から、Rate Limit Exceeded を引いたため、それの原因っぽいものと、ある程度の緩和策について備忘録として記載しようかと思います。– ※ Rate limit など、Google に関する API の仕様などは常に変動する可能性があります。
– この記事の情報は2023/06/30時点の情報になります。– ※ 当人は Node.js もgoogleのAPI についても初学者です??♂️
## 何が起きた?
概要でも記載しましたが、[google-api-nodejs-client](https://github.com/googleapis/google-api-nodejs-client)を使って、Calendar のイベントを作るAPIを叩くオレオレAPIを作っていたのですが、APIの一
nodebrewによるNode.jsのインストール手順まとめ
# はじめに
nodebrewによるNode.jsのインストール手順をまとめました。
**実行環境**
– Apple M2 Max
– macOS Ventura 13.2.1# インストール手順
## 準備:Homebrewをインストール
Homebrewがインストールされているかを確認。
“`bash
brew -v
“`バージョンが表示されない場合はHomebrewをインストール。
([Homebrewのホームページ](https://brew.sh/index_ja)にあるインストール用のスクリプトを実行)## nodebrewをインストール
以下のコマンドでnodebrewをインストール。
“`bash
brew install nodebrew
“`インストールできたら以下のコマンドを実行しておく。
“`bash
nodebrew setup
“`パスに関する記述を`~/.zshrc`に追加する。
“`bash
export PATH=$HOME/.nodebrew/current/bin:$PATH
“``~/.zshr
TypeScriptでAWS SQSを使う
AWS SDK for Javascriptを使って、AmazonSQSを試してみます。
# AmazonSQS
公式サイト:https://aws.amazon.com/jp/sqs/マイクロサービス、分散システム、およびサーバーレスアプリケーション用の完全マネージド型メッセージキューです。
メッセージの順番が保証されず、ちょっと安く利用できる**標準キュー**と、高スループットでメッセージの順番が保証されている**FIFOキュー**の2種類のキュータイプがあります。細かい機能は公式サイトを見ていただけたらと思います。
SQSは使用した分で課金される&一定量を超えない限り課金されない、ので放置していても課金が発生せず、作った後に削除する必要がないのも試しやすい点です。
# AWS SDK for Javascript
公式サイト:https://aws.amazon.com/jp/sdk-for-javascript/JavaScriptから呼び出すAWS SDKです。AWSのサービスを簡単に使うことができます。
当たり前ですが、今の業務がTypeScript、No
nodejsでsqlite3のデータを表示する
## やりたいこと
sqliteにテストデータを作成しconsoleに表示する。## 書いたコード
“`terminal:install
npm install sqlite3
“`“`typescript:テストデータの作成と表示
const sqlite3 = require(‘sqlite3’).verbose();// データベース接続の作成
const db = new sqlite3.Database(‘mydatabase.db’);// テーブル作成のクエリ
const createTableQuery = `
CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT,
email TEXT
)
`;// テーブルの作成
db.run(createTableQuery, function(err) {
if (err) {
console.error(err.message);
} els
npmでよく使うコマンド
## 環境構築
### npm init
Node.jsプロジェクトを新規作成します。
具体的には `package.json` が作成されます。### npm install
`package-lock.json` を見てパッケージをインストールします。
`package.json` や `package-lock.json` は書き換えません。`package-lock.json` が存在しない場合、 `package.json` を見てパッケージをインストールします。
インストール後、 `package-lock.json` が作成されます。### npm install {パッケージ名}
指定したパッケージをインストールします。
インストール後、`package.json` と `package-lock.json` を書き換えます。`npm i {パッケージ名}` と省略できます。
`-g` オプションを付けるとグローバルにインストールします。(他のコマンドも同様)`–save-dev` オプションを付けると `dependencies` でなく
【AES256-GCM】暗号化メソッドをNode.js・TypeScriptで実装する
Node.js・Express・TypeScriptを使い、自前で暗号化処理を作成したので備忘録として書きます。この記事では、AES256-GCMという強固な暗号化アルゴリズムを利用して、データを安全に暗号化する方法を解説します。
## はじめに
この記事では、Node.js、Express、およびTypeScriptを使用して、AES256-GCM暗号化アルゴリズムを使ってデータを暗号化するプロセスを書いています。AES256-GCMは共通鍵暗号化方式の一部で、安全なデータ保護を目的として広く使用されています。## AES256-GCMとは
暗号化方式には主に以下の2種類が存在します。– 共通鍵暗号化
– 公開鍵暗号化AES256は共通鍵暗号化方式の一つで、特にセキュリティが強化されています。AES256には、ECBモードとGCMモードの2種類があり、GCMモードは認証付き暗号化を提供し、データの機密性と完全性の両方を保護するため、より堅牢です。
## bcryptとの違い
bcryptは、主にパスワードのハッシュ化に使用される一方向性関数です。ハッシュ化されたデータ
YouTube Data API v3 を使ってプレイリストを作成する(業務実例付き)
## はじめに
本記事では、Node.js上でYouTube Data API v3を使いプレイリストを一括作成する手順を紹介します。言語はTypeScript、[Google APIs Node.js Client](https://github.com/googleapis/google-api-nodejs-client)を用います。
https://github.com/googleapis/google-api-nodejs-client
そもそも大量のプレイリストを必要とするケースがどんなものか、さほど明白ではないと思われる[^1]ので、最初に筆者の業務実例を簡単に触れておきます。(記事本文に進みたい方は[こちら](#環境))
[^1]:日本語で書かれたYouTube Data API v3に関する過去記事を見ても「プレイリストへの動画の追加」を扱ったものはあっても、プレイリスト自体を作る記事は管見の限りありませんでした。
—#### 業務実例 〜コンクールでの動画審査
[全日本ピアノ指導者協会(ピティナ)](https://qiita.com/organ