- 1. VSCodeを使ったGoogle Apps Script開発の環境構築
- 2. 仮想通貨APIで発注してみる
- 3. 仮想通貨APIをお触りしてみる
- 4. Access-Control-Allow-Credentials: trueにしないとsessionをCookieに保存できない
- 5. Salesforceしか開発経験のない自分が、Node.js(+LWR)でWebアプリを開発してつまずいたところ
- 6. ブックマーク集(LIFF, Messaging API, Next.js, Node.js, xserver, nginxなど)
- 7. LINE Bot ハンズオン
- 8. LINE Notify ハンズオン
- 9. Node16 + Nuxt2で@nuxtjs/i18nをインストールするとエラーが発生した
- 10. TurborepoのESLint及びPrettierをBiomeに移行した手順
- 11. Mac Node.js 1万件の情報が入ったcsvを出力するスクリプトを作ってみる
- 12. #プログラミング #Javascript #nodejs #chrome ビット演算・算術演算、領域管理の速度差
- 13. npm install時のエラー「npm WARN EBADENGINE Unsupported engine…」への対応
- 14. GPT-4oで簡単なWebアプリを作成
- 15. NodejsでreCAPTCHA実装
- 16. S3 Object Lambdaを利用したOn-Demandイメージ変換サービスの紹介
- 17. Node.js+expressで一部ファイルのみあえてキャッシュさせない
- 18. npm install 実行時 脆弱性の警告を受けた
- 19. Scratchに画像を送信する
- 20. Fastify で 静的HTMLファイルのフロントエンドに書かれたロジックを AJAX を用いてバックエンドに移行するプロセス
VSCodeを使ったGoogle Apps Script開発の環境構築
## はじめに
この記事では、VSCodeでGoogle Apps Script(以下`GAS`)開発の環境を構築する方法を紹介します。GASを開発するためにはGoogleアカウントが必要になるので、もしお持ちでない方は先に作成してください。また、ローカルからGoogleアカウントにアクセスするために`clasp`というNode.jsパッケージを使うので、Node.jsも必要になります。詳細は以下のドキュメントをご覧ください。https://developers.google.com/apps-script?hl=ja
https://github.com/google/clasp
### 最終的なディレクトリ構成
“`
myApp/
├── .clasp.json
├── .claspignore
├── appsscript.json
└── main.js
“`### Google Apps Script APIを有効にする
まずはGAS APIを有効にしましょう。使いたいアカウントにログインした上で設定してください。以下からアクセスできま
仮想通貨APIで発注してみる
# 前回
https://qiita.com/noritama08/items/11605e024d01e2cc1d9a前回に続き、GMOコインのAPI(Node.js)で遊びます。
前回: APIで情報を参照
今回: APIで注文を入れてみる
# 注文を入れる
### 方針
private APIの「注文」を参考にするhttps://api.coin.z.com/docs/?javascript#order
– レバレッジをかけず
= 現物取引
– 金額を指定
= 指値
を満たす様サンプルを書き換える
### 実装
“`order.js
const axios = require(‘axios’);
const crypto = require(‘crypto’);const apiKey = ‘YOUR_API_KEY’;
const secretKey = ‘YOUR_SECRET_KEY’;const timestamp = Date.now().toString();
const method = ‘POST’;
const endPoint
仮想通貨APIをお触りしてみる
# 背景
一昔前まで週刊SPAとか胡散臭い雑誌(主観)くらいでしか聞かなかった仮想通貨。
BitCoinの価値が100万円まで上がって以降あまり情報見てなかったが、最近は1,000万円を越えたらしい。いきなりまとまった金額を投資するのも怖い、、、ので
GMOコインで原資1万円で遊んでみる(本当に遊ぶわけではなく)## APIとは何か
・アプリケーション・プログラミング・インターフェース(Application Programming Interface)の略
・自作アプリに組み込み、提供元のサービスにアクセスする事ができる
### 例
・LINE、Slack などに自動投稿するbotを作成
・Google Mapをサイト内に表示
## 何故GMOコインなのか
・入出金で手数料がかからない
・APIを提供していてその利用手数料が無料
・国内でも信頼度が高い
### 対応言語
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214861/bdb34cdc-8ff1-410e-2252-
Access-Control-Allow-Credentials: trueにしないとsessionをCookieに保存できない
卒研でWebアプリを開発しており、ログインセッションの実現をしようとしていたところ思いのほか躓いたので記事書くことにしました。
:::note warn
ここではExpressでのsession構築、Redis構築の話は一切行いません。予めご了承ください。
説明は致しませんが、この記事の最下部にて私が参考にしたURLを貼っております。
:::## Cookieがセットされない…
[express-session](https://www.npmjs.com/package/express-session)というライブラリを使って、Redisにセッション情報を保存しつつログインセッションを実現しようと思い環境構築を行っていました。
いろんな方のブログや公式リファレンスを参考にして、いざやってみるとなぜかブラウザにCookieがセットされない。
ブラウザの検証ツールで確認してみると、**通信は正常**に行われており、**Set-Cookieもレスポンスヘッダーに存在**し、ますます路頭に迷う羽目となっておりました。## ざっくり環境
– **Front**: SvelteKit
Salesforceしか開発経験のない自分が、Node.js(+LWR)でWebアプリを開発してつまずいたところ
## はじめに
今までSalesforce Platform上でしかほぼ開発経験がなかったのですが、それなりに大きな案件となると、Salesforceだけで完結せずに外部のシステムと連携するパターンが多いと思うので、Node.js + Lightning Web Runtime(LWR)でWebアプリを開発してみました。一般的なWebアプリ開発知識が不足しているせいか、めちゃくちゃ初歩的な部分でいくつか躓いたので、それらをまとめたいと思います。## 目次
[1. 想定する読者](#想定する読者)
[2. 執筆者のバックグラウンド](#執筆者のバックグラウンド)
[3. 使用したテクノロジー](#使用したテクノロジー)
[4. 作成したアプリのデモ動画](#作成したアプリのデモ動画)
[5. npmが分からない](#npmが分からない)
[6. サーバーを起動するという概念が分からない](#サーバーを起動するという概念が分からない)
[7. アプリケーションという単位が分からない](#アプリケーションという単位が分からない)
[8. JSforceはとても簡単だった!](#js
ブックマーク集(LIFF, Messaging API, Next.js, Node.js, xserver, nginxなど)
# ブックマーク集
LIFF & MessagingAPIで、LINEミニアプリを作成した時に参考にした
Webサイトをここにまとめる。※編集中
***
### JavaScript* [JavaScriptで小数点以下の桁数を指定する方法 #JavaScript – Qiita](https://qiita.com/KenRoda/items/b6f57ec37d032bb054ba “JavaScriptで小数点以下の桁数を指定する方法 #JavaScript – Qiita”)
* [JavaScriptのNumberオブジェクト toFixed(x) メソッドの使い方 – 0xBrokers ブログ](https://0xbrokers.com/javascript-number-tofixed-method/ “JavaScriptのNumberオブジェクト toFixed(x) メソッドの使い方 – 0xBrokers ブログ”)
* [Number.prototype.toFixed() – JavaScript | MDN](https://developer.
LINE Bot ハンズオン
# はじめに
Messaging APIを使ってLINE Botを作成するハンズオン記事です。
ユーザーが送ったメッセージをそのままオウム返しで返すLINE Botを作成します。# 前提条件
* LINEアカウントを持っていること
* VS Codeがインストールされていること
* VS CodeへGitHub or Microsoftアカウントでサインインしていること
* Node.js v18以上がインストールされていること# ハンズオン
## LINE Developersコンソールへログイン
[Messaging APIページ](https://developers.line.biz/ja/services/messaging-api/)へアクセスし画面右上の「コンソールにログイン」ボタンをクリックし、ログインします。https://developers.line.biz/ja/services/messaging-api/
![image](https://gist.github.com/assets/22117028/948e5423-85a3-4c
LINE Notify ハンズオン
# はじめに
手軽にLINEへPush通知を行えるLINE Notifyのハンズオン記事です。
APIの実行方法はcurl、Node.js、Arduinoの3通りの方法を紹介します。# ハンズオン
**トークン発行**と**API実行**の2つのステップで進めていきます。
## トークン発行
[LINE Notifyページ](https://notify-bot.line.me/ja/)へアクセスし画面右上の「ログイン」をクリックし、ログインします。
(QRコードログインが楽です)https://notify-bot.line.me/ja/
![image](https://gist.github.com/assets/22117028/c8076aee-5b53-4624-8db2-e47b93b9b41e)
ログイン後にアカウント名をクリックし、表示されるメニューより「マイページ」を選択します。
![image](https://gist.github.com/assets/22117028/8c26d0c6-8964-4598-bbb0-8
Node16 + Nuxt2で@nuxtjs/i18nをインストールするとエラーが発生した
# 前提
* Node:16.13.2
* Nuxt.js:2.15.8
* Vue.js:2.7.10
* yarn:1.22.15# エラーについて
下記のようにインストールしようとしたところエラーが発生しました。
“`sh
$ yarn add @nuxtjs/i18n
yarn add v1.22.15
[1/4] Resolving packages…
[2/4] Fetching packages…
error globby@14.0.1: The engine “node” is incompatible with this module. Expected version “>=18”. Got “16.13.2”
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
“`
`globby@14.0.1`というパッケージがNode18以上でないといけないようです。ちなみに何回
TurborepoのESLint及びPrettierをBiomeに移行した手順
## はじめに
– Turborepoに標準インストールされていたESLintとPrettierを辞め、Biomeに移行する必要が生じたので、移行に要した手順を公開する
– パッケージ構成は以下の通り
“`
(root)
|—-apps
| |—-web ← ワークスペース
|
|—-packages
| |—-ui ← ワークスペース
| |—-eslint-config ← ワークスペース
“`## Turborepoの前提知識
### `turbo lint`を実行すると、なぜwebやuiのlintが実行されるのか?
– Turborepoのルートディレクトリに存在する`turbo.json`を見てみる
“`turbo.json
{
“$schema”: “https://turbo.build/schema.json”,
“globalDependencies”: [“**/.env.*local”],
“pipeline”: {
“build”: {
“dependsOn”: [“^build”]
Mac Node.js 1万件の情報が入ったcsvを出力するスクリプトを作ってみる
## 概要
Macのローカルでjsのスクリプトを動かして1万件の情報が入ったcsvを出力してみる。
## 方法
1. MacのローカルにNode.jsを導入(筆者はVoltaを使ってNode.jsを管理している。Node.jsのバージョンは20.11.1を使用)
1. 任意のディレクトリを作成
1. 下記コマンドを実行して初期化“`shell
npm init
“`1. 下記コマンドを実行してcsv-writerパッケージをインストール
“`shell
npm install csv-writer
“`1. 下記コマンドを実行してスクリプトファイルを作成
“`shell
touch generate_csv.js
“`1. 作成したスクリプトファイルに下記の記載を実施
“`generate_csv.js
const createCsvWriter = require(‘csv-writer’).createObjectCsvWriter;
const
#プログラミング #Javascript #nodejs #chrome ビット演算・算術演算、領域管理の速度差
**本内容を利用した場合の一切の責任を私は負いません。**
いつもコーディングする時に、コンバイル言語の名残で、書き方で違いがでるか迷うので実験してみた。
実験結果から、ソースが違うだろうから、node.jsとChromeではやはり挙動に違いがありそう。
書き方は意識した方がいいのかも。
最適化もありそうな気がする。# バージョン
– OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19045 N/A ビルド 19045
システムの種類: x64-based PC
– node.js
node-v20.9.0-win-x64.zip
– Chrome
バージョン: 125.0.6422.114(Official Build) (64 ビット)#ソース
“`javascript:a.js
function aa() {
let total;console.time(“elap3”);
total = 0;for
npm install時のエラー「npm WARN EBADENGINE Unsupported engine…」への対応
## はじめに
`$npm install` 実行時のエラーの内容と対処法について書きます。
## 環境
– Windows 10
– node v18.16.0## 経緯
Viteで環境構築を行うために`$ npm create vite@latest`を実行しました。
続いて`$ npm install`を行ったところ、以下のエラーになりました。
Node.jsのバージョンが低く、必要なパッケージがインストールできないようです。
“`bash
> npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@typescript-eslint/eslint-plugin@7.11.0’,
npm WARN EBADENGINE required: { node: ‘^18.18.0 || >=20.0.0’ },
npm WARN EBADENGINE current: { node: ‘v18.16.0’, npm: ‘9.5
GPT-4oで簡単なWebアプリを作成
# はじめに
GPT-4はプロンプトの応答が遅かったのですが、GPT-4oになってだいぶ早くなったというのを目にしていました。出力の精度も確認したかったので、簡単なWebアプリを作成してみようと思いました。# アプリケーションの概要
– Node.jsでTodo管理するWebアプリケーション
– ユーザ登録、ログイン、トークン認証あり
– プロジェクトと、プロジェクトごとのTodoの追加※あくまでサンプル的なものなのであまり期待せずでお願いします。
# GPT-4o プロンプト入力
プロンプトは以下で入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468278/a543ddfb-4ae1-3593-02bf-f0fcf6cc4490.png)# GPT-4o プロンプト応答
出力されたプロジェクト構造
“`
my-todo-app/
│
├── node_modules/
├── app.js
├── config.js
├── database.js
├── r
NodejsでreCAPTCHA実装
# 環境
OS: Ubuntu Server 22.04(SSHでローカルコンピュータから接続)
作ったProject名称: MIRAI
Nodejs: Nodejs v20.14.0# reCAPTCHAの`API key`の取得
[GoogleCloudPlatform](https://www.google.com/recaptcha/admin/create)にアクセスして、`API key`を取得します。
https://www.google.com/recaptcha/admin/create
ラベルという項目に認証を実行するドメインを入力します。
v2かv3かというラジオボタンがありますが、私は厳密に人間のみを通したかったのでv2を選択しました。
プロジェクト名を入力したら送信して完了です。# フロントエンドの作成
まずは、フロントエンドを作成します。
“`html
S3 Object Lambdaを利用したOn-Demandイメージ変換サービスの紹介
こんにちは。ムシンサ・コミュニティ開発チームのバックエンドエンジニア、チョ・ユシンです。 今回はAWS S3 Object Lambdaを利用してオンデマンドイメージ変換サービスを構築した事例を共有したいと思います。
### イメージ変換サービスとは?
一般的にサーバーでイメージを提供するためには、オリジナルイメージよりも小さいサイズのイメージを提供する方がサーバーのリソースおよびトラフィックコストを節約できます。最近ではスマートフォンの発展により、スマートフォンのカメライメージのサイズが基本的に10MB前後で保存されるため、100枚のイメージを提供するだけで1Gbpsのネットワーク帯域を占有してしまいます。また、イメージサイズが大きい場合、クライアント側でもイメージをレンダリングするのに時間がかかり、ユーザーエクスペリエンスにも悪影響を与える可能性があります。従来のイメージ変換および提供方法は、AWSチュートリアルにも記載されているように、S3の保存イベントを通じてリサイズされたイメージを保存し提供する方式です。変換されたイメージがオリジナルイメージと同様にストレージに保存され
Node.js+expressで一部ファイルのみあえてキャッシュさせない
# やりたかったこと
ブラウザのキャッシュは便利ですが、要件によっては邪魔になってしまうこともあります。
最新のソースファイルが取れないと困る時もあるし、それでバグが起きては元も子もないですからね…
そこで、あえて今回はキャッシュをさせないようにする設定をしてみます。# 実装してみる
今回の環境はタイトル通りNode.js+expressなので、HTTPヘッダをexpressのルーティングで制御すれば出来ます。
自力で設定してもよいのですが、npmにぴったりのモジュールである[nocache](https://www.npmjs.com/package/nocache)があるのでそれを使っちゃいましょう。
使い方はこんな感じ。“`javascript
import express from ‘express’;
import nocache from ‘nocache’;const app = express();
// キャッシュ無効化
app.use(nocache());
“`以上です。迷うことが無いくらいにシンプル!
後は以降の処理でレスポンスを記述してし
npm install 実行時 脆弱性の警告を受けた
# npm install 脆弱性問題による警告が発生
npm install ** Package Name** 実行時下記のエラーが出力されました。“`
# 以下警告文npm WARN using –force Recommended protections disabled.
added 7 packages, removed 26 packages, changed 33 packages, and audited 612 packages in 6s
15 packages are looking for funding
run `npm fund` for details21 vulnerabilities (6 moderate, 14 high, 1 critical)
To address all issues, run:
npm audit fixRun `npm audit` for details.
“`# 解決方法としてはNode JSの最新バージョンをインストールすることで解決!
Node JS の正式ホーム
ht
Scratchに画像を送信する
# はじめに
こんちゃ。Scratchでサーバーからプロジェクトに画像を送信できるようになったのでここに詳細を書きます
本編行きます# 使ったもの
[Node.js](https://nodejs.org/en/)## ライブラリ
[Scratch-api](https://www.npmjs.com/package/scratch-api)
[Jimp](https://www.npmjs.com/package/jimp)## サービス
[YouTube Data API (v3)](https://developers.google.com/youtube/v3?hl=ja)
[Google Apps Script](https://workspace.google.com/intl/ja/products/apps-script/) (以下GAS)# 仕組み
1. Youtubeからサムネイル画像のURLを取ってくる
2. それをいい感じのサイズに加工 (ここでは120×90)
3. それを15×15の画像に分割
4. 画像を送れるように変換
5. 送信する
Fastify で 静的HTMLファイルのフロントエンドに書かれたロジックを AJAX を用いてバックエンドに移行するプロセス
## 1. Fastify、AJAX とは
– FastifyはAPIサーバーの構築に非常に適した高性能なNode.jsフレームワークです
– AJAXとは、Asynchronous JavaScript and XMLの略称で、Web アプリケーションでデータを非同期的に転送する通信手法のことを指します## 2. 内容:
静的HTMLファイルをFastifyを用いてホスティングします。さらにスクリプト内のロジックをAJAXを用いてバックエンドに移行することを実現できたので、その過程・内容についてまとめます。
題材はAtCoderの問題 [ABC053A](https://atcoder.jp/contests/abc053/tasks/abc053_a)を簡易なwebアプリにしたものです。## 3. Fastify のインストール・実行・閲覧
Node.jsがインストールされていることを確認した上で、Fastifyをinstallします。
### インストール
“`
npm install fastify
“`
### 実行
“`
node server.js
“