【Windows】Virtualbox上のCentOSにDockerでNginxを立てExpressにアクセスした時のネットワークを図解してみた

## はじめに

アプリケーションの開発は普段やっているが、その際にはあまりインフラに関しては意識しないで開発している事が多かった。今回は少しネットワークがどうなっているか？が気になって図解してみたので、その備忘録を残す（理解に誤り等があればご指摘いただけると幸いです）。

## ネットワークの基本的な概念
いきなりどのようなネットワークになっているのか？を見ていく前に、ネットワークに関する重要そうな概念について理解を深めてみた。

### IPアドレス（IPv4）
ネットワーク内の住所。ネットワーク機器やPCなどネットワークにつながっている端末の場所を特定するための値。グローバルIPとプライベートIPがある。

表記は`192.168.56.2`のように10進数表記で4つの区切りで示される。コンピュータ内では2進数として扱われている。

–

M1 Macでzsh: command not foundに遭遇した場合の解決法

M1 Macでnpmのパッケージ追加時に`zsh: command not found`に遭遇してパッケージが使用できない場合の解決法を投稿させていただきます。私も何度かこの問題に遭遇しているので参考になれば幸いです。

1. global用にディレクトリを作成: “`mkdir ~/.npm-global“`
1. npm用のパスを1.で作成したディレクトリに設定: “`npm config set prefix ‘~/.npm-global’“`
1. “`.profile“`に以下を追加: “`export PATH=~/.npm-global/bin:$PATH“`
1. システム変数を更新: “`source ~/.profile“`

パッケージを一度アンインストールしてから再インストールしたところパッケージが使用できるようになりました。

参考記事

http://npm.github.io/installation-setup-docs/installing/a-note-on-permissions.html

ToDoアプリがいろいろありすぎるので、LINEにToDo機能を追加してみた。

## ToDoアプリは多すぎるし、スマホのアプリを増やしたくない
私はToDo系のアプリを使用していないのですが、使用していない理由としては以下が挙げられます。
1. **ToDoアプリが多すぎるのでどれを使えば良いかわからない**
1. **いちいちToDoアプリを開くのが面倒**
1. **使いなれるまでに時間が掛かる**

面倒臭がり屋の私でも、いろいろと試してみたときはありました。
だけど、どれもすぐにそのアプリの存在を忘れてしまったり、使い勝手が面倒で諦めてしまいました:dizzy_face:

でもそんな私も毎日のように使用しているアプリがあります。

そう、それはLINE!!

今まではこのLINEにToDo機能があればなー、って思っていたわけですが、あるじゃないですか！LINE Botなんて便利機能が！
LINE Botならプッシュ通知も可能なので、ToDoを知らせてくれるにはもってこいやないか:thumbsup:

ということで、LINE Botを用いて、ToDo機能をLINEに実装してみました！

## 最低

【Version確認】各ミドルウェアのVersion確認まとめ

## _Version確認まとめ_
アプリ作成時に、自分の環境のバージョン把握は必須となるため、各ミドルウェアのVersion確認方法を自分なりにまとめてみた…

## VersionUpのメリットデメリット
– __メリット__
1. Webサイトの安全性が向上する
セキュリティ上の問題や不具合へのサポートがあるため、サイト攻撃の可能性が低くなります。

2. 最新の環境での開発が可能になる
新しい機能やプラグインが利用可能になることで、今まで実現が難しかったことが簡単にできるようになり、開発内容の広がりが期待できます。

– __デメリット__
1. サイトが正しく表示されなくなる
過去に構築したサイトについて、最新のプラグインやテーマが非対応の場合があります。
その場合、Webサイトの一部が正しく表示されなかったり、最悪の場合はサイト全体が動かなくなったりする可能性があります。

2. 廃止された関数の改修が発生する
バージョンアップに伴い、今まで使えていた関数が廃止され、別の関数への置き換えを求められる場合があります。
サイトを今まで通りに表示させるためには、過去に構築したプロ

nodeのアップデート

https://phoenixnap.com/kb/update-node-js-version#:~:text=Update%20Node%20JS%20on%20Windows%201%20Navigate%20to,checking%20the%20box%20and%20click%20Next.%20See%20More.

npm ERR! Error: EACCES: permission denied, access ‘/usr/local/lib’

上記のようなエラーが出た。
sudo を付けて

sudo npm install -g n

上記のようなコマンドにすることで解決した。

芝生が好きすぎるので、芝活が捗るLINE botを作ってしまった。

# 芝生はいいぞ…

突然ですがみなさん芝生は好きですか？
僕はと言いますと、他人にドンびかれるくらい芝生を愛しています。
暇さえあればホーム芝生で酒を飲んでますし、土日は遠征して一日中芝生で過ごすみたいな生活をしています。
冗談抜きに、芝生にいくと人生が好転するので、みなさんにも味わってほしいのです。

# 実は、良質な芝生と出会うのは難しい

「さっそく芝生に行ってきてください！」と言いたいのですが、
実は良い芝生に出会うのはなかなか難しかったりします。
特に東京で見つけるのは至難の技で、
僕も上京したばかりの頃は失敗を繰り返して鬱になりそうでした。
東京で良い芝生を見つけるのが難しい理由は大きく分けて２つあります。
– 小規模の芝が無数にあり、かつ整備の質の差が激しい。
– 質の高い芝生でも、養生中で入れなかったり、季節によってコンディションに差が出る

How to use the 2captcha-solver plugin in Puppeteer.

Puppeteerでの2captcha-solverプラグインの使い方

この記事では2captcha-solverプラグインをPuppeteerで使う方法を説明します。 PuppeteerはNodeライブラリで、ブラウザを起動し、その中で複数のアクションを実行できます。使

Node.js: シリアルポートの出力

こちらのページのテスト用プログラムを Node.js で書きました。
[M5Stack Core2: シリアルで LED を制御](https://qiita.com/ekzemplaro/items/e4ddb0ba0b03a9004204)

“`js:led_control.js
#! /usr/local/bin/node
// —————————————————————
// led_control.js
//
// Oct/4/2022
// —————————————————————
‘use strict’;
require(‘date-utils’)
// —————————————————————
function send_proc(color)
{
port.write(color, function

超自分好みのなろう小説を検索してくれるLINE Botを作ってみた

## 好きななろう小説はありますか？
筆者は[小説家になろう](https://syosetu.com/)が好きで日々新たな作品との出会いを求めています。
検索機能も存在しておりよく使うのですが、非常に作品数が多く検索条件も幅広いためタイトルで惹きつけられるものの、読んでみたら自分の好きな感じではない、ということも多くありました。

そんな中、なろう小説のAPIが存在することを発見しました。
スマホで小説を読むことも多かった私としてはLINEと連携させることで超自分好みの条件で小説を検索・レコメンドするLINE Botができるのではと思い製作を開始しました。

## 自分好みのなろう作品検索Botが誕生しました。
キーワードを入力するとランダムで2件の作品が表示されます。
(一回の検索上限が20件だったため3件にすると被りが出やすく面白くありませんでした。)
自分が好きなキーワードはリッチメニュー化して入力の手間を省きました。
自由なキーワードでも検索が可能です。
Firebase(version9)をJavaScriptプロジェクトに追加してみる

# はじめに
Firebase JavaScript SDK（バージョン9）を新規のウェブアプリに追加しようとした時に少しハマったので、何かの役に立てばと思い、記事を作ってみました。

基本的には[公式のドキュメント](https://firebase.google.com/docs/web/setup?hl=ja “Firebase を JavaScript プロジェクトに追加する”)に解説があります。ただ自分はドキュメントに従って進めてもうまく行かない箇所があり、どうせ観ても分からないと思っていた英語の解説動画を自動翻訳付きで観てようやく理解しました。

ドキュメントでサラッと流されている所が意外と大事だった…というか、単純に自分がES6やモジュールバンドラについて無知だっただけなのですが…

# 前提

ウェブアプリの構成は、利用する言語やフレームワークによって様々な形があると思いますので、この記事ではなるべくシンプルな構成を例にすることで、応用しやすい形になればと思っています。

自分がハマったのはステップ４辺りなのですが、ヘタに途中を省略すると分かりにくくなる可能性もあるかと

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/


今回は、このPocketに登録したサイトをLINEボットから参照できるようにします。

最終的には以下のような画面になります。
まずこちらが、LINEボットを友達登録した後に、最新のサイトリストを表示させたときのものです。


次に、こちらが、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にしてモーダルを表示してオーバーレイを押すとエラーが発生する

## 解決策
リファレンスに書いてある
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
– 署名なしでデータ