- 1. AWSでLINEのレストラン予約デモをデプロイした
- 2. WSL2 でホットリロードが効かない問題の解決方法
- 3. オンラインWeb対局時計（myokoym/webchessclock）構築メモ
- 4. GitHub ActionでJavaScriptのフォーマット漏れをチェックする
- 5. AWS Lambda(node.js)でyoutube APIを利用してJSON作成した話
- 6. Node.js便利パッケージ集
- 7. 「Glitch Sync From GitHub」を使ってみた（mainにPushでGlitchに自動更新する方法）
- 8. Puppeteerで自動入力を図ろうとしたときのTips
- 9. Lambda関数からAmazon SQSにデータを送信する時ハマったこと
- 10. コーディング時間を節約できる JavaScript１行コード２０点
- 11. 【別アカウントのLambda】を実行可能なLambdaをNode18 + AWS SDK for JavaScript v3で構築してみる
- 12. Firestoreでドキュメントに一括で書き込む（500件を超える場合にも対応）
- 13. Node.js のバージョン管理を fnm から Volta に乗り換えました（Windows）
- 14. Rails×MySQL dockerで開発環境を構築する
- 15. expoで作成したテンプレートが何もしていないのに動かない！
- 16. XSERVER BusinessでLaravelとNode.jsを動かす
- 17. Dockerとdocker-composeを使ってReactのコンテナを作成してみよう！
- 18. Hexabaseでアイテムの更新時にアクションスクリプトを実行する
- 19. Hexabaseのアクション拡張プログラムを使って、サーバーサイドでスクリプトを実行する
- 20. Node.jsで無料のタイムスタンプサービスに接続する
AWSでLINEのレストラン予約デモをデプロイした
たまたまLINE予約システムを見つけたので、試しにデモをデプロイしてみました。
予約システムに関しては、以下のサイトに説明があります。https://lineapiusecase.com/ja/usecase/reservation.html
サンプルは、以下のGitHubにあります。
AWS環境を前提としたサンプルで、AWS SAMでデプロイできます。https://github.com/line/line-api-use-case-reservation-Restaurant
# 目次
– [LINEチャネルの作成](#lineチャネルの作成)
– [バックエンドの構築](#バックエンドの構築)
– [フロントエンド環境構築](#フロントエンド環境構築)
– [テストデータ投入](#テストデータ投入)
– [動作確認](#
WSL2 でホットリロードが効かない問題の解決方法
# WSL2 でホットリロードが効かない問題の解決方法
先日から、WSL2 でホットリロードが効かない問題が発生していました。
主にフロントエンドの開発時に、結構困っていて、解決方法を探していました。
WSL2 側の google-chrome GUI を使えば、問題なくホットリロードできるのですが、Windows 側のブラウザで確認したい場合に、ホットリロードができずに困っていました。## 問題原因
問題の原因は、WSL2 で Windows の環境変数を読みに行っていたことが問題でした。
たまたま、Flutter 関連の環境構築でエラーが出ていて、その時に、WSL2 側の環境変数を確認したところ、Windows 側の環境変数が読み込まれていました。`flutter doctor` でエラーが出ていたので、WSL2 側の環境変数を確認してみました。
“`
/usr/bin/env: ‘bash\r’: No such file or directory
“`これをみて、そんなはずないのになぁと環境変数を確認していた時に発覚しました。
## 解決方法
Wind
オンラインWeb対局時計（myokoym/webchessclock）構築メモ
# 背景
ドミニオンというボードゲームを御存じでしょうか。ボードゲーム界におけるデッキ構築システムの金字塔で、第一版の発売から約14年が経った今も拡張が発売され続けている長寿コンテンツです。元はアナログゲームでしたが、現在はオンラインで遊べる[Dominion Online](https://dominion.games/)なども運営されています。さて、このDominion Onlineにはひとつ気になる仕様があります。それはプレイヤーに対してプレイ時間の制限がほぼ無いことです。そのためプレイングの速さはマナーで成り立っており、早い人と遅い人がマッチングしたりするとちょっとギクシャクする点が惜しい所です。
そこで今回は仲間内でDominion Onlineを遊ぶときに使えるWeb対局時計(myokoym/webchessclock)を立ち上げてみました。本ページではその構成要素と構築手順を整理しています。
でyoutube APIを利用してJSON作成した話
## どんな記事
・AWSを使ってyoutube APIにアクセスするLambda関数を作成したときのお話
node.jsの作成例が少なかったのでこんな感じでうまくいったよが伝われば・・## 利用技術
・AWS Lambda
・AWS S3
・youtube-node(youtube API) ※google developerに登録する
・node.js 16## 前提条件
・node.js 16での開発パッケージのインストール
“`
npm install youtube-node
npm install aws-sdk
“`## 作成したコード（抜粋）
“`
const AWS = require(‘aws-sdk’);
const s3 = new AWS.S3({‘region’:’＜地域＞’});const Youtube = require(‘youtube-node’);
const youtube = new Youtube();exports.handler = function(event, context, callbac
Node.js便利パッケージ集
# 私の推しパッケージ集
### chalk
コンソール装飾
https://npm.im/chalk
### chalk-animation
chalkのアニメーション
https://npm.im/chalk-animation
### express
言わずもがなのWebサーバー
https://npm.im/express
### express-session
Expressのアドオンのような感じ。
https://npm.im/express-session
### body-parser
リクエスト解析用
https://npm.im/body-parser
### ytdl-core
YouTubeダウンロード
https://npm.im/ytdl-core
### youtube-search
YouTube検索
https://npm.im/youtube-search
### puppeteer
Chromium操作
https://npm.im/puppeteer
### prism-media
Disco
「Glitch Sync From GitHub」を使ってみた（mainにPushでGlitchに自動更新する方法）
Node.jsを使ってWebアプリを作成しており、デプロイ先に [Glitch](https://glitch.com/) を活用しています。本記事では、GitHubの更新が即座にGlitchに反映されるようにする方法をまとめます。
## 内容
– GitHubにSecretを登録する
– GitHub Actionsを活用する### 必要な PROJECT_ID と AUTH_TOKEN を取得し、GitHub に Secret を登録する
https://github.com/kanadgupta/glitch-sync#inputs
にある通りです。
まずはGlitch にアクセスし、「Ctrl＋Shift＋I」で開発者ツールを有効にしてください。
その後、「Network」タブを開いてください
※「Preserve log」と「Disable cache」はチェックを入れなくても大丈夫です
;
AWS.config.update({region: ‘ap-northeast-1’});var sqs = n
コーディング時間を節約できる JavaScript１行コード２０点
はじめましてこんにちは、ひょうどうです。
今回は、コーディング時間を節約できる１行のJavaScriptコード２０点を紹介します。
> １）配列内の数値の最大値を取得する（配列が小さい場合）
“`
Math.max(…array)
“`
> ２）配列から重複を削除する
“`
[…new Set(array)]
“`
> ３）1 から 100 までの乱数をする
“`
Math.floor(Math.random() * 100) + 1
“`
> ４）文字列が有効な数値かどうかを確認する
“`
!isNaN(+string)
“`
> ５）現在の日時を取得する
“`
new Date().toString()
“`
> ６）変数が配列かどうかを確認する
“`
Array.isArray(variable)
“`
> ７）変数がオブジェクトかどうかを確認する
“`
typeof variable === “object”
“`
> ８）配列を文字列に変換する
“`
array.join(“,”)
“`
> ９）変数が関数かどうかを確認する
“`
【別アカウントのLambda】を実行可能なLambdaをNode18 + AWS SDK for JavaScript v3で構築してみる
## 先に結論だけ知りたい人のために （クロスアカウントでLambdaからLambdaをコールする方法）
この記事の要点を列挙するよ。
– 実行環境がNode18のLambdaにはAWS SDK for JavaScript v3が最初からインストールされていて便利だよ
– Invoke APIで別アカウントのLambdaをコールするよ
– コールされる対象の【別アカウントのLambda】には、リソースベースのポリシーが必要だよ
– コールする側のLambdaには、アイデンティティベースのポリシーが必要だよ“`json:コールされる対象の【別アカウントのLambda】に付与するリソースベースのポリシー
{
“Version”: “2012-10-17”,
“Id”: “default”,
“Statement”: [
{
“Sid”: “[任意の名前]”,
“Effect”: “Allow”,
“Principal”: {
“AWS”: “arn:aws:iam::[呼び出す側のAWSアカウントI
Firestoreでドキュメントに一括で書き込む（500件を超える場合にも対応）
# batch処理で一括書き込みできる
Firestore の batch write を使用することで、500件ずつのドキュメントの更新を行うことができます。以下は Node.js でのサンプルコードです。
“`javascript
const admin = require(‘firebase-admin’);admin.initializeApp();
const firestore = admin.firestore();async function updateDocuments(collectionName, batchSize = 500) {
const collectionRef = firestore.collection(collectionName);
const query = collectionRef.orderBy(‘timestamp’).limit(batchSize);
const documents = await query.get();let batch = firestore.batch();
docu
Node.js のバージョン管理を fnm から Volta に乗り換えました（Windows）
Node.js のバージョン管理は fnm (Fast Node Manager) を利用していましたが、
* シェルセットアップが面倒…:pensive:
* コマンドプロンプトで利用できない…:confounded:という不満がありました。
ちなみに、fnm のインストール方法と使い方については以前投稿しました。
https://qiita.com/taqumo/items/b25d486e6ead9f38a13d
そんな中、以下記事と出会い、Volta が良さげ:smirk:
https://zenn.dev/aiueda/articles/7dcecaa05d4f24#%E6%97%A2%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8Bnode.js%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%83%84%E3%8
Rails×MySQL dockerで開発環境を構築する
# 今回指定したバージョン
– Rails version 6.1.7.1
– Ruby version 2.7.7
– MySQLは最新version
– nodejsは互換性のある version16
# 条件
– docker-compose upでrails serverを起動できるようにすること
– ホストのファイルシステムとコンテナのファイルシステムを同期させること## Dockerfile
– まずは、apt-getでyarnを入れたもの
“`ruby
# Node.js & Yarn
FROM node:16-buster-slim
RUN yarn installFROM ruby:2.7.7
RUN apt-get update
RUN apt-get install -y \
build-essential \
libpq-dev \
nodejs \
default-mysql-client \
yarn
default-mysql-clientWORKDIR /rails-docker-mysql
expoで作成したテンプレートが何もしていないのに動かない！
# 問題
エラーが出てExpo startが失敗する
`
Error: Cannot find module ‘@expo/config/paths’
`
# 原因エラーの詳細を見ると
“`
Error: Cannot find module ‘@expo/config/paths’
Require stack:
– /Users/hogehoge/node_modules/@expo/webpack-config/webpack/index.js
– /Users/hogehoge/node_modules/@expo/webpack-config/webpack.config.js
– /Users/hogehoge/Documents/Expo/nest-navigation/node_modules/@expo/cli/build/src/start/server/webpack/resolveFromProject.js
– /Users/hogehoge/Documents/Expo/nest-navigation/node_modules/@expo/cli/bu
XSERVER BusinessでLaravelとNode.jsを動かす
XSERVER Business （エックスサーバー社が提供する法人向けレンタルサーバサービス）にLaravelアプリケーションを新規導入した際の手順メモです。
# 制約事項
– レンタルサーバなので、root権限がない。
– 対象のサーバが、かつて存在したシックスコアを継承したものであるため、最新ハード／ソフトが導入されたサーバに移行できない。という制約があります。
また、ディストリビューションなどの仕様は非公開となっています。https://support.xserver.ne.jp/faq/service_server_os.php
# 手順
## サーバーパネルでの操作
XSERVER Business のサーバーパネルにログインします。
はエンタープライズ向けのBaaS（Backend as a Service）を提供しています。主な機能としてはデータベース、ファイルストレージ、認証、リアルタイム通信などを提供しています。
データベースに関連した機能として紹介したいのがアクションスクリプトです。作成時、更新時などにスクリプト（Node.js）を実行する機能になります。トリガーとして利用できます。
今回はそのアクションスクリプトの使い方と、blastengineを使って更新通知メール送信を行う（ネットワーク通信を行う）方法を解説します。
## 開発者機能を有効にしてください
アクションスクリプトを使う場合には、Hexabaseの個人設定で `開発者向け機能` を有効にします。
## アクションス
Hexabaseのアクション拡張プログラムを使って、サーバーサイドでスクリプトを実行する
[Hexabase](https://www.hexabase.com/)はエンタープライズ向けのBaaS（Backend as a Service）を提供しています。主な機能としてはデータベース、ファイルストレージ、認証、リアルタイム通信などになりますが、それだけで全ての開発要件を満たせる訳ではありません。
そこで、足りない機能を開発し、コードをサーバーサイドで実行できるアクション拡張プログラムが用意されています。いわゆるFaaS（Function as a Service）のようにして、スケーラブルにコードを実行できます。
今回はそのアクション拡張プログラムの使い方と、[blastengine](https://blastengine.jp/)を使ってメール送信を行う（ネットワーク通信を行う）方法を解説します。
## 開発者機能を有効にしてください
アクション拡張プログラムを使う場合には、Hexabaseの個人設定で `開発者向け機能` を有効にします。
 に接続します。タイムスタンプリクエスト、タイムスタンプレスポンス、タイムスタンプトークンの出力、解析には[jsrsasign](https://kjur.github.io/jsrsasign/)を使用します。
## jsrsasign のダウンロード
NPMでダウンロードします。
“`
> npm install jsrsasign jsrsasign-util
“`## タイムスタンププロトコル
タイムスタンプに関わる仕様は、[RFC3161](https://datatracker.ietf.org/doc/html/rfc3161)、[RFC5816](https://datatracker.ietf.org/doc/html/rfc5816) で 定義されています。
HTTP通信で行う際の仕様が [RFC3161 の 3.4 Time-Stamp Protocol
