- 1. FirebaseをJavaScriptプロジェクトに追加する
- 2. Node.js: タイマーの使い方
- 3. LINEボットでPocketに登録したお気に入りサイトを参照する
- 4. fetchしたデータに型を付与する
- 5. WSL2 で VSCode 拡張機能 (Node.js) のテストコードを実行する
- 6. あれ? Voltaを使ってるんだけど「node」にPATHが通ってないぞ?
- 7. Node.jsでEDINET APIから有価証券報告書を自動で取得してみる
- 8. Node.jsのSession StoreとしてIBM Cloudantを使ってみる
- 9. エラーハンドリングはResult型活用しようぜ
- 10. 【Vuetifly:Dialog】オーバーレイを押してモーダルを非表示
- 11. ニフクラ mobile backendを拡張するNCMBプロキシを開発中です(署名なしのスクリプト実行)
- 12. AzureFunctionsでGoogleForm自動入力
- 13. graphql-tools + GitHubでGraphQLサーバとスキーマ定義を分離する
- 14. 【Node.js】Expressで存在しないパスにアクセスした時の404エラーハンドリング
- 15. ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MACの対処メモ(Windows10、node v16.17.0)
- 16. 【Express】ミドルウェア関数スタックを勘違いしていた話
- 17. nodebrewでのNode.jsのインストール方法(Mac)
- 18. 【初心者向け】Node.jsのインストール方法(Mac)
- 19. 【NestJS】基本アーキテクチャまとめ(Module,Controller,Service)
- 20. Module
- 21. 郵便受けと会話するためにobnizとLINE BOTでIoT装置を作ってみた
FirebaseをJavaScriptプロジェクトに追加する
# はじめに
Firebase JavaScript SDK(バージョン9)を新規のウェブアプリに追加しようとした時に少しハマったので、何かの役に立てばと思い、記事を作ってみました。基本的には[公式のドキュメント](https://firebase.google.com/docs/web/setup?hl=ja “Firebase を JavaScript プロジェクトに追加する”)に解説があります。ただ自分はドキュメントに従って進めてもうまく行かない箇所があり、どうせ観ても分からないと思っていた英語の解説動画を自動翻訳付きで観てようやく理解しました。
ドキュメントでサラッと流されている所が意外と大事だった…というか、単純に自分がES6やモジュールバンドラについて無知だっただけなのですが…
# 前提
ウェブアプリの構成は、利用する言語やフレームワークによって様々な形があると思いますので、この記事ではなるべくシンプルな構成を例にすることで、応用しやすい形になればと思っています。
自分がハマったのはステップ4辺りなのですが、ヘタに途中を省略すると分かりにくくなる可能性もあるかと
Node.js: タイマーの使い方
こちらのページを参考にしました。
[Node.jsでsetTimeoutを使ったタイマー](https://qiita.com/rjegg/items/63a9ce3bd2b133efb7e3)ライブラリーのインストール
“`bash
sudo npm install -g date-utils
“`“`js:timer_test.js
#! /usr/local/bin/node
// —————————————————————
// timer_test.js
//
// Oct/3/2022
// —————————————————————
‘use strict’
require(‘date-utils’)var count = 0
function counter () {
var dt = new Date()
var formatted = dt.toFormat
LINEボットでPocketに登録したお気に入りサイトを参照する
Pocketはご存じでしょうか。
PCやスマホから、気に入ったWebサイトをブックマークとして保存し、共有できるサービスです。https://getpocket.com/ja/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/a1fe3576-87ed-446b-9513-021bd61b4116.png)
今回は、このPocketに登録したサイトをLINEボットから参照できるようにします。
最終的には以下のような画面になります。
まずこちらが、LINEボットを友達登録した後に、最新のサイトリストを表示させたときのものです。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/5eac2f0d-cb19-33ec-0e97-e1d34226307e.png)
次に、こちらが、LIFFアプリとして表示させたときのものです。LIFFは、LINEアプリ内で起動
fetchしたデータに型を付与する
こちら移行しました。
https://zenn.dev/thefirstpenguin/scraps/1811b8a355f13c
WSL2 で VSCode 拡張機能 (Node.js) のテストコードを実行する
# 概要
Node.js で VSCode 拡張機能を作ると、 `npm run test` でテストを実行できる。
このとき WSL2 上でいくつか生じるエラーがあるので、対処を残す。# 環境
“`
$ npm –version
8.11.0$ node –version
v17.9.1
“`VSCode 1.71.2
Ubuntu 18.04
Windows 10 Pro# error while loading shared libraries: xxx
パッケージがインストールされていないので追加する。
xxx に出たパッケージをインストールすること。“`bash
sudo apt-get install libatk1.0-0
sudo apt-get install libatk-bridge2.0-0
sudo apt-get install libgtk3.0
sudo apt-get install libgbm
sudo apt-get install libgbm1
sudo apt-get install libasound2
あれ? Voltaを使ってるんだけど「node」にPATHが通ってないぞ?
毎回忘れててググっているのでメモ
# 環境
MacOS 12.5.1
Volta 1.0.8# 事象
`node`コマンドが通らない
“`terminal
% node -v
zsh: command not found: node
“`# 解決策
PATHを通す
“`~/.zshrc
︙
export VOLTA_HOME=”$HOME/.volta”
export PATH=”$VOLTA_HOME/bin:$PATH”
“`# 参考
https://zenn.dev/taichifukumoto/articles/how-to-use-volta#%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%9F%E3%81%93%E3%81%A8%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B
Node.jsでEDINET APIから有価証券報告書を自動で取得してみる
# プロローグ
きっかけは[こちら](https://qiita.com/XBRLJapan/items/27e623b8ca871740f352)のEDINET APIに関する記事を読んだこと。内容としては、EDINET APIを活用して任意の期間にEDINETに提出された有価証券報告書をローカルに一括ダウンロードするというもので、書類一覧APIのレスポンスに含まれる`提出者 EDINETコード`を使えば特定の業種とか特定の企業の提出書類とかに絞ってダウンロードする、とかも出来そうだし、何よりそうしてダウンロードしてきたフォルダのxbrlを解析して分析につなげる([エピローグ](https://qiita.com/furi-kake/items/0e9c6c60a33e7e745991#%E3%82%A8%E3%83%94%E3%83%AD%E3%83%BC%E3%82%B0xbrl%E3%81%AE%E5%88%86%E6%9E%90%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AB%E3%81%AF)も参照)ことも出来て面白そうだなといった感じだった。
Node.jsのSession StoreとしてIBM Cloudantを使ってみる
# はじめに
Webアプリケーションではsessionを用いることが多いと思いますが、前回の記事で触れたように`express-session`のデフォルトの実装を用いる場合はメモリにsessionの情報を保持するため、アプリケーションの再起動等で情報は失われてしまいますし、アプリケーションのインスタンスが複数ある場合などに問題が起きるため、プロダクションでは外部のデータストアを用いることになると思います。この用途にはRedisが使われることが多いようですが、IBM Cloudでは(2022年1月現在)RedisにLiteプランがないため、最小構成でもそこそこのコストがかかることになり、実験には向かないようです。そこで今回はIBM Cloudantをsessionのストアとして用いることを検討してみます。# IBM Cloudant
[IBM Cloudant](https://cloud.ibm.com/catalog/services/cloudant)はJSON document databaseです。IBM Cloudのコンソールから検索するなどしてトップページを開き、L
エラーハンドリングはResult型活用しようぜ
## Result型って何ですか
RustやSwiftだと馴染み深い`Result`型とは、その名の通り**結果**を表すものです。
TypeScriptだとその実装例として以下のものを私は使用しています。“`tsx
export type Result
=
| { ok: true; value: T }
| { ok: false; error: E }export const Ok =
(value: T): Result => ({
ok: true,
value,
})export const Err =
(error: E): Result => ({ ok: false, error })
“`## どう活用できるんですか?
エラーの種類に応じて処理を変えたい場合に相性良く活用できます。
例えば、Sign in処理を行う際に、ユーザーのリクエストが不正である場合と、それ以外のネットワーク起因の場合とで処理を使い分けたいときを想定してみます。
【Vuetifly:Dialog】オーバーレイを押してモーダルを非表示
# オーバーレイを押してモーダルを非表示にする
VuetiflyでOverlayを押した時にモーダルを削除する方法## 発生したエラー
dialogをtrueにしてモーダルを表示してオーバーレイを押すとエラーが発生する
![スクリーンショット 2021-11-14 19.16.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2230428/6187684e-a1cd-ff5b-c759-7d854e1fffd6.png)## 解決策
リファレンスに書いてある
https://vuetifyjs.com/ja/api/v-dialog/#events-click:outside**click:outside : **アクティブなダイアログの外側をクリックしたときに発生するイベント
### 使い方
“`
子
~~~~~~~~~~~~~~
ニフクラ mobile backendを拡張するNCMBプロキシを開発中です(署名なしのスクリプト実行)
[ニフクラ mobile backend](https://mbaas.nifcloud.com/)では認証やデータストア(クラウドデータベース)、ファイルストア(ファイルストレージ)、プッシュ通知など様々な機能があります。そして、サーバーレスで拡張できるスクリプト機能もあります。
しかし、実際のアプリ要件は多彩で、場合によっては他にも様々な機能が望まれます。すべての需要を満たすのは困難な場合もあります。そこで、NCMBのフロントとして動作するプロキシソフトウェアを開発中です。
このプロキシを使うことによって、小さなニーズはプロキシ側で実装できるようになります。今回は個人的に欲しかった「署名なしでのスクリプト実行」について解説します。
## 追加する機能(予定)
現状は透過的なプロキシでしかありませんが、以下のような機能を実装する予定です。
– 認証をJSON Web Tokenに
– GitHub認証
– ソーシャル認証(標準ではサーバー認証が必要ですが、プロキシだけで認証できるように)
– WebSocket(リアルタイム通信)
– Webhooks
– 署名なしでデータ
AzureFunctionsでGoogleForm自動入力
現在編集中
# 開発環境
– Windows11
– Azure Functions Core Tools (記事中で解説・インストール)
– VSCode +拡張機能
– Azure Functions
– Node.js +npmパッケージ
– Playwright-chromium
– Ubuntu (WSL2 (Windows Subsystem for Linux))
# AzureFunctionsの作成
## 関数アプリの作成
Azure Portalから、関数アプリを作成する。
主要な設定項目:
– 基本
– ランタイムスタック:Node.js
– バージョン:16 LTS
– 地域:Japan East (Westだとうまくいかない?)
– __オペレーティングシステム__ : __Linux__
– (プランの種類:消費量/サーバーレス)
– ホスティング
– ストレージアカウント:(新規作成)
– 監視
– Application Insights:(新規作成)以上の通り設定して、作成
graphql-tools + GitHubでGraphQLサーバとスキーマ定義を分離する
## 目次
1. [目次](#目次)
1. [前書き](#前書き)
1. [本題](#本題)
1. [GraphQLサーバとスキーマ定義を分離する](#graphqlサーバとスキーマ定義を分離する)
1. [スキーマ定義用のGitHubリポジトリを作成する](#スキーマ定義用のgithubリポジトリを作成する)
1. [GraphQLサーバでGitHubからスキーマ定義を読み込む](#graphqlサーバでgithubからスキーマ定義を読み込む)
1. [まとめ](#まとめ)## 前書き
### 経緯
GraphQLを使ってアプリケーション開発を試していたところ、
GraphQLサーバとスキーマ定義が一体化していると開発しづらいと感じたため、
分離する方法を調査して試してみました### 対象読者
– GraphQLサーバとスキーマ定義を分離したい人
– Node.jsを使用してGraphQLサーバを構築したい人
– graphql-toolsを使用している/使用を検討している人
– GitHubを使用してリポジトリを管理して
【Node.js】Expressで存在しないパスにアクセスした時の404エラーハンドリング
## 初めに
Expressのエラーハンドラは存在しないパスにアクセスした時のエラー(404)はハンドリングしてくれません。
じゃあどうしたらいいか? を調べたのでここにまとめます。## サンプルファイル
ここにExpressを使ったserver.tsファイルを用意します。
ポート3000でサーバを起動し、/usersというルータのみ用意しています。“`js
import express from “express”
const app: express.Express = express()// サーバ起動
app.listen(3000, () => {
console.log(“Start on port 3000.”)
})// ユーザ一覧
app.get(“/user”, (req: express.Request, res: express.Response) => {
res.send(“OK”)
})“`
## エラーハンドラを定義してみる
Expressでデフォルトのエラーハンドラをミドルウェアに用意するなら一番下に以下を追記
ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MACの対処メモ(Windows10、node v16.17.0)
Vuepressのプロジェクトをリポジトリから取得し、“npm install“したときに標題のエラーが出たので、その対処をメモしておきます。
以下は実際のエラーです。
“`
$ npm install
npm ERR! code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC
npm ERR! 5228:error:1408F119:SSL routines:ssl3_get_record:decryption failed or bad record mac:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:677:
:
npm ERR! A complete log of this run can be found in:
npm ERR! 【..local npm log dir..】\2022-09-29T02_57_10_549Z-debug-0.log
“`エラーが出た環境は以下になります。
|名称|バージョン|備考|
|:-|:-|:-|
|OS|Windo
【Express】ミドルウェア関数スタックを勘違いしていた話
## はじめに
現在Expressのエラーハンドリングについて勉強しており、その為に公式ドキュメントを閲覧していました。https://expressjs.com/ja/guide/error-handling.html#%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E5%87%A6%E7%90%86
「デフォルトのエラー処理ミドルウェア関数は、ミドルウェア関数スタックの最後に追加されます。」という記述があり、この「ミドルウェア関数スタック」が原因で頭を悩ませることになりました。
概要だけご説明すると「スタック」の意味が分からないという話です。## Expressのミドルウェアについて
※本題からずれるのでExpressのミドルウェアとは何かなどの説明は省略します。app.jsが読み込まれたときにuseメソッドやmethod(get,post,put,delete)メソッドによりミドルウェア関数がスタックに追加されます。そ
nodebrewでのNode.jsのインストール方法(Mac)
## Node.jsとは
JavaScriptを**PC上**で動かすための実行環境です。
**ブラウザ上**で動くことが有名なJavaScriptですが、Node.jsをPC上にインストールすることで、PC上でもJavaScriptが動作します。詳しく知りたい人は[公式サイト](https://nodejs.org/ja/about/)をご確認ください。
## nodebrewとは
Node.jsのバージョン管理ツールです。
複数のバージョンを管理することができます。## インストール方法
2種類のインストール方法があります。
1. 公式サイトからのインストール
2. nodebrewを利用する(今回の方法)今回は、2の方法でNode.jsをローカル上にインストールします。
1の方法は↓をご確認ください。https://qiita.com/s_yamaoka927/items/4fd8dacffa73bd64de1b
## 手順
以下の手順でNode.jsをインストールします。
1. nodebrewをインストールする
2. Node.jsをインストールする#
【初心者向け】Node.jsのインストール方法(Mac)
## Node.jsとは
JavaScriptを**PC上**で動かすための実行環境です。
**ブラウザ上**で動くことが有名なJavaScriptですが、Node.jsをPC上にインストールすることで、PC上でもJavaScriptが動作します。詳しく知りたい人は[公式サイト](https://nodejs.org/ja/about/)をご確認ください。
## インストール方法
2種類のインストール方法があります。
1. 公式サイトからのインストール(今回の方法)
2. nodebrewを利用する:warning:
今回は、1の方法を行いますが、本格的な開発にはオススメしません。
Node.jsのバージョンが変わると、予期せぬバグを引き起こす可能性があるためです。
本格的な開発では、バージョン管理ができる、2の方法をおすすめします。
2の方法は↓をご確認ください。https://qiita.com/s_yamaoka927/items/cf1bbd755c5636c3ce35
## 手順1
以下の公式サイトに行き、『ダウンロード macOS (x64)』の**推奨版*
【NestJS】基本アーキテクチャまとめ(Module,Controller,Service)
大きく分けて3つある
Module
@Moduleデコレータのプロパティ
・providers: @Injectableデコレータが付いたクラスを記述
・controllers @Controllerデコレータが付いたクラスを記述
・imports: モジュール内部で必要な外部モジュールを記述
・exports: 外部のモジュールにエクスポートしたいもの以下はサンプル
・ユーザー機能を作成したとする“`app.module.ts
import { Module } from “@nestjs/common”;
import { AppController } from “./app.controller”;
import { AppService } from “./app.service”;
import { UsersModule } from “./users/users.module”;@Module({
imports: [UsersModule], // 作成したUsersMo
郵便受けと会話するためにobnizとLINE BOTでIoT装置を作ってみた
# ■はじめに
郵便受けを実際に見に行かなくても投函物の有無を確認できるIoT装置を初心者が奮闘しながら作成してみました。
IoT初心者の方でも読みやすくなるような執筆に努めていますが、なにぶん初心者の文書になりますので、温かい目で読んでいただければ嬉しく思います。# ■こんなもの作りました
郵便受けの底に重量センサー(ロードセル)を置き、プログラムを実行しておくことで、LINE BOTから投函確認されたときに投函有無を返答するものを作りました。
0gより軽いときに投函確認すると「投函物はありません」と返答してくれ、
0g以上のときに投函確認すると「投函物があります」と返答してくれました。https://youtube.com/shorts/XT1WT0I6q4o?feature=share
動画は以下の順で確認し