OmniAICreator/Qiita-1.07M huggingface dataset:
エンジニアなら一度は経験有り!? 502 BatGatewayに対処して学んだ知識

# はじめに
先日、開発中アプリケーションの本番環境にアクセスしたところ、もやは全エンジニアにとってお馴染みとなった**502 BadGateway**に出会しました。

**「またコイツかよ！今度はなんだよ！」**と正直心の中で思いましたが、この問題への対処を通して初めて知り学べたことがあったので備忘がてら残したいと思います。

![５０２エラー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669969/6d215a25-e71e-e4af-9059-cd9ffb5ce9ff.png)

---
※開発中アプリケーションは以下のような環境です。

【環境】

- EC2(Amazon Linux2)
- Webサーバ (nginx/1.20.1)
- アプリケーションサーバ (puma/3.12.6)
- Ruby on Rails5.2.5

RailsアプリケーションをNginxをインストールしたEC2上で稼働させている

# 調査
## Nginxのエラー確認

まずは、どのような状況になっているのか確認するため、EC2上でNginxのエラーログを確認

```bash:EC2
# nginxのエラーログを確認
$ sudo cat /var/log/nginx/error.log

=> [error] 2716#2716: *179 connect() failed (111: Connection refused) while connecting to upstream
```
どうやらWebサーバであるNginxとアプリケーションサーバのPumaとの通信が上手くいっていないようだ

ちなみに、`Connection refused`の現象の説明としては、以下記事がとても参考になりました。
[(111: Connection refused) が出る場合](https://qiita.com/ichihara-development/items/37ae6819e53d936fb03d#unicorn%E3%81%8C%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88)

さらにちなむと・・・
Nginxのエラーログの吐き出し場所は`/etc/nginx/nginx.conf`で設定されているので、ここを変えれば任意の場所に変更可能となっています。

```bash:/etc/nginx/nginx.conf
# エラーログ場所指定
error_log  /var/log/nginx/error.log;
```

## Pumaの確認
そもそもpumaがちゃんと起動されているのか？と疑問に思ったので確認すると・・・
起動していなかった。。。🥺

```bash:EC2
# pumaのプロセスを確認
$ ps aux | grep puma
=> 起動していない

# ちゃんと起動しているとこんな感じのがでる
=> 実行user  プロセス番号  0.5  2.8 1252212 223876 ?  Sl  起動時刻 　0:11 puma 3.12.6 (tcp://0.0.0.0:3000)
```
じゃあ手動で起動させようということで・・・
サーバ内アプリ配下(私の場合だと`/var/www/applications/workspace/アプリ名`)でpumaを起動

```ruby:/var/www/applications/workspace/アプリ名
# pumaを起動
$ bundle exec pumactl start
=> No such file or directory @ rb_sysopen - tmp/pids/server.pid
# どうやらpidsディレクトリなるものが無いらしい
```

# 解決方法と学んだこと
ここからが今回の問題の解決方法と初めて知った知識になります。

### 解決方法
```bash:/var/www/applications/workspace/アプリ名
$ ls -la /tmp
=> pidsディレクトリが無い

# tmpの下にpidsを作成
$ mkdir pids

# pumaを起動
$ bundle exec pumactl start
=> 無事起動し、502BadGatewayから解放！
```

### 原因・学んだこと
まず、pumaは起動と同時に、`/tmp/pids`ファイルを参照し、`server.pid`ファイルを作成します。
(`server.pid`はpumaを停止すると削除され、起動するとまたその都度作られるもの)

これは、Pumaに限らず、他のrubyのアプリケーションサーバの**Unicorn**などの**Passenger**などでも共通なんですね。

今回の場合だと、
`/tmp/pids`ディレクトリが無く、pumaが起動されてないことによりNginxと通信できないことが直接の原因と見られます。。。


では実際に確認。pumaの起動中にそれぞれ見てみると・・・

```bash
# 同じプロセス番号でpumaが起動していることが確認できる
$ ps aux | grep puma
=> プロセス番号

$ cat /アプリ名/tmp/pids/server.pid
=> プロセス番号
```

## 補足的にしたこと

`pids`ディレクトリ作成の変更を全てのブランチに反映させたあと、全環境にデプロイさせるため、以下２つを実行
これで、pidsと.keepがgit上で無視されることなく維持される。

1.`/tmp/pids`に`.keep`を作成
2.`.gitignore`を修正

```ruby
# アプリ名/tmp/pidsで実行
$ touch .keep

# .gitignoreに追記
/tmp/*
!/tmp/.keep
!/tmp/pids/.keep
```


なぜ、`pids`が無かったのかは定かではないですが、以上のような方法で対処しました。
私自身、ミドルウェア周りの知識にとても疎かったので、結構苦労してしまいました、、、

**502BatGateway**は開発中によく起きる現象だと思うので、たくさんの原因が考えられますが、この記事が同じ現象に当たった人の参考に少しでもなれば幸いです。


# 参考
https://lina-marble.hatenablog.com/entry/2016/04/12/153610

https://teratail.com/questions/74280
【Nuxt.js×Firebase】ログイン状態を永続的に保持させる（リロード対策）

#はじめに
こんにちは！
今回はログイン状態を永続的に保持させる（リロード対策）についてアウトプットしていきます！
※内容的にかなり難しいので、抽象的、間違いの部分があると思いますのでご了承ください。メモ感覚で本記事を執筆しております。

#対象
・ログイン状態を保持させたい方
・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方（[こちらの記事](https://qiita.com/Yudai_35_/items/cb6f360863cf2838b7d5)参考）

##使用環境

|使用技術  |バージョン  |
|:-:|:-:|
|nuxt.js  |2.15.7 |
|firebase |9.6.1  |
|firebase-tools |9.23.3  |
|@nuxtjs/tailwindcss |4.2.0  |

##使用ファイル,概要

|ファイル名  |概要  |
|:-:|:-:|
|middleware/authenticated.js  |firebase.jsの情報から処理内容の記述。stateへ再保存。|
|plugins/firerbase.js |'authState'の'inject'追加。login状態の管理|
|store/index.js |ログイン状態、ユーザー情報のstate。actions,mutationsの処理|

#実装

```javascript:plugins/firebase.js
  //authStateに情報が入ったら、middleware/authenticated.jsの処理が実行再開する。
  inject('authState', () => {
    //ログイン情報が入っている引数"resolve"をPromiseとしてinject,'authState'に返している。
    //authenticated.jsにて$authStateで記述可能
    return new Promise((resolve) => {
      //firebase上でログインの状態を確認(user)。ログイン状態の情報をを"resolve"に入れ引数で繋ぐ。
      firebase.auth().onAuthStateChanged((user) => {
        resolve(user || null)
      })
    })
  })

```

```javascript:middleware/authenticated.js
export default async function ({ store, route, redirect, app }) {

    const user = await app.$authState()
    //authStateでplugins/firebase.jsファイルの処理へ非同期処理実行
    //処理が返されたら以下の処理が実行
    console.log({ user })

    if (user) {
        //store/index.jsの"getDate"に情報を入れ直す
        store.commit("getDate",
            {
                email: user.email,
            }
        )
        //上記の処理が成功したら"yesLogin"発動
        store.commit("yesLogin")
    }
    else {
        //storeからログイン情報を消す
        store.commit("noLogin")
    }
}
```

```javascript:store/index.js
export const state = () => ({
    user: {
        email: "",
        login: false
    }
});

export const actions = {
    async confirmLogin({ commit }) {
        await this.$auth.onAuthStateChanged(function (user) {
            if (user) {
                commit("getData", {
                    email: user.email,
                });
                commit("yesLogin");
            } else {
                commit("noLogin");
            }
        });
    }
};


export const mutations = {
    getData(state, payload) {
        state.user.email = payload.email;
    },
    yesLogin(state) {
        state.user.login = true;
    },
    noLogin(state) {
        state.user.login = false;
    }
};

//firebase/userの情報を確認し、成功したら"yesLogin"、失敗したら"noLogin"が発動。

```


#参考記事
・Promiseについては[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)
・async/awaitについては[こちら](https://tcd-theme.com/2021/09/javascript-asyncawait.html?gclid=CjwKCAiA0KmPBhBqEiwAJqKK4_SWEaFiqiiuuVyqeYpBDifW_blBNExDBvB3aNZw_HARpvC1WgE3_xoCL48QAvD_BwE)
・resolveについては[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve)

#まとめ
今回はログイン状態を永続的に保持させるについてアウトプットしました。

今後も引き続きQiitにポートフォリオ制作での学びをアウトプットしていきます！

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

最後までご愛読ありがとうございました！
ws:WebSocketServerはBlobで受ける

「ws node.js」で検索して出てくるサンプルコードがどれも送信内容次第で失敗する。
テキストからBlobに変えたらうまく行った。根本的原因は不明だがとりあえず。

追記：iPhone Safari で static 使っちゃ駄目らしい。なんでだよ

```javascript:nodeApp.js
const WebSocketServer = require("ws").Server
const server = new WebSocketServer({ port: 5001 })
server.on("connection", client => {
	client.on('message', message => {
		server.clients.forEach(v => {
			if(v !== client) v.send(message)
		})
	})
	console.log('_connections',server._server._connections)
})
```
```javascript:plainWeb.js
$(e=>{
	var m = new Messenger.Nodejs().message(e=>{
		console.log(e)
	}).open()
	$('body').append(
		$('<button>').append('test').click(e=>{
			m.send({type:'text',value:'サンプルコードがどうも送信内容次第で失敗する。サンプルコードがどうも送信内容次第で失敗する。'})
		})
	)
})

var Messenger = {}
Messenger.Socket = class{
	constructor(){
		this.hook = {
			message	: e=>{},
			error	: e=>console.log(e),
			status	: e=>console.log(e),
		}
	}
	open(){}
	message(f){	this.hook.message	= f; return this}
	error(f){	this.hook.error		= f; return this}
	status(f){	this.hook.status	= f; return this}
	get connecting(){
		if(this.socket==null) return false
		return this.socket.readyState==WebSocket.OPEN
	}
	send(e){
		if(this.connecting){
			this.socket.send(JSON.stringify(e))
		}else{
			this.hook.error(e)
		}
		return this
	}
}
Messenger.Nodejs = class extends Messenger.Socket{
	static url = 'ws://192.168.10.3:5001/'
	open(url){
		if(this.connecting) return this
		try{
			var s = new WebSocket(url||this.constructor.url);
		}catch(error){
			console.log(error)
			this.hook.error(error)
		}
		if(s){
			var r = new FileReader();
			r.onload	= e=>this.hook.message(JSON.parse(r.result))
			s.onmessage	= e=>{
				if(e.data instanceof Blob){
			        r.readAsText(e.data);//BlobをFileReaderで読む
			    }else{
			    	this.hook.message(JSON.parse(e.data))
			    }
			}
			//s.onmessage	= e=>this.hook.message(JSON.parse(e.data))
			s.onerror	= e=>this.hook.error(e)
			s.onopen	= e=>this.hook.status(e)
			s.onclose	= e=>this.hook.status(e)
			this.socket = s
		}
		return this
	}
}
```
Python3をWindows10[64bit]へインストール  [2022/01/22] 


Windows10環境に、Pythonをインストールしてなかったのでメモも兼ねて記事にしてみます。

過去ログで、同様の記事がありますが、古くなってるので2022年度版ということでやってみます。

https://qiita.com/ssbb/items/b55ca899e0d5ce6ce963


#環境

・Windows10[64bit]  21H2

・Python 3.10.2



#Python 3.10.2 インストール

以前は、32bit版を入れないと動かなかった記憶があるのですが、現在は、64bitでも動くようです。

以下のリンクからダウンロードすると、自動的に64bit版が入るようです。

![イメージ75851.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/5a01a358-a8bb-f29b-10f1-f9b13263c593.jpeg)

[add Python 3.10 to Path]　にチェックを入れて、[install NOW]

![イメージ75861.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/24f00481-08fa-5c1c-0d59-a7697a775ce2.jpeg)


# バージョン確認

コマンドプロンプト

$ >python --version

$>pip --version

pip 21.2.4 from C:\Users\xxx\AppData\Local\Programs\Python\Python310\lib\site-packages\pip (python 3.10)

![イメージ75881.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/1190e2bd-5d28-467d-19cd-c9a3df9bbc17.jpeg)

訂正：
※インストール先は[C:\Python\Python310]に変更しました。


# モジュールインストール

$ pip install numpy

![イメージ7590.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/57407ded-0511-6895-f7b4-c230f2ed7b94.jpeg)


# ERROR: Command errored out with exit status 1

モジュールの「pyheif」をインストールしようとするとERROR

![イメージ75891.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/480f2a6b-ea8a-545a-5e98-cf10d4f50842.jpeg)

検索すると、ライブラリ用の.whlファイルが必要みたいです。

今回は、pyheifを入れようとしてエラーになったのでそれを探します。

https://www.lfd.uci.edu/~gohlke/pythonlibs/


![イメージ7592.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/d565f1ce-076d-c542-f687-6fd066d0faeb.jpeg)

バージョンに合わせて、「ad3-2.2.1-cp310-cp310-win_amd64.whl」をダウンロード

インストール

![イメージ7596.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/cf7c5323-7beb-6e62-7c79-27d5206d4ee6.jpeg)

今回は上手くいきました。


#モジュールインストール時のERROR対策

エラーが出る度に同じ作業をするのは面倒なので、Pythonでツールを作成すると良いかもです。


#pipのアップデート

上記で警告が出てるのでアップデート

# python -m pip install --upgrade pip


![イメージ7597.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/e908538e-deea-f042-295f-9ff2d196e72a.jpeg)


これで、警告が出なくなりました。



#予告

次は、exe化をやってみる予定です。


#その他、参考サイト

https://gammasoft.jp/support/python-32bit-64bit/
rails6でherokuにデプロイしたときにwebpackerに関するエラーに遭遇

# rails6で初めてデプロイしたときにエラーにつまずいた

##エラー内容
調べてみたところnode-scssのバージョンがnodeのバージョンと違うとのこと

```
warning " > webpack-dev-server@3.11.0" has unmet peer dependency
"webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
error /tmp/build_4354b829/node_modules/node-sass: Command failed.
```

# 解決方法

### ①webpackerのバージョンアップ

```
- gem 'webpacker', '~> 4.0' //削除
+ gem 'webpacker', '~> 5.0' //追加
```

### ②yarn.lockの削除

ファイルをそのまま消去

### ③package.json

次に、package.jsonに"@rails/webpacker": "5.4.3"を追記します。

### ④yarn install

```
$ yarn install
```

### ⑤ yarn add node-sass

```
$ yarn add node-sass
```

これで解決しました
【Python】Pandasのread_sql_queryでMariaDBからテーブルごと直接データフレームに収納するサンプルコード

# サンプルコード
```
import numpy as np
import pandas as pd
import pymysql.cursors

connection = pymysql.connect(host='localhost',
                             user='ユーザー名',
                             password='パスワード',
                             db='データベース名',
                             charset='utf8mb4',
                             cursorclass=pymysql.cursors.DictCursor)

sql = "SELECT * from テーブル名;"
df = pd.read_sql_query(sql, connection)
```
この方法を使うとカラムごとSQLのテーブルを直でDFに収納できる

※なお前提として予めユーザーに該当DBの操作権限が付与されている必要がある

##おまけ：DFを.xlsx化
```
df = pd.read_sql_query(sql, connection)
df.to_excel("test.xlsx")
```
Java - How to Configure Log4j2 Properties File?

# Console Logging
```
log4j2.properties
# Extra logging related to initialization of Log4j
# Set to debug or trace if log4j initialization is failing
status = warn
# Name of the configuration
name = ConsoleLogConfig

# Console appender configuration
appender.console.type = Console
appender.console.name = consoleLogger
appender.console.layout.type = PatternLayout
appender.console.layout.pattern = %m%n

# Root logger level
rootLogger.level = debug
# Root logger referring to console appender
rootLogger.appenderRef.stdout.ref = consoleLogger
```

# Rolling Files
```
status = warn
name= RollingFileLogConfig

# Log files location
property.basePath = /home/johnny/logs

# RollingFileAppender name, pattern, path and rollover policy
appender.rolling.type = RollingFile
appender.rolling.name = fileLogger
appender.rolling.fileName = ${basePath}/app.log
appender.rolling.filePattern = ${basePath}/app-%d{yyyy-MM-dd_HH-mm-ss.SSS}-%i.log.gz
appender.rolling.layout.type = PatternLayout
appender.rolling.layout.pattern = %m%n
appender.rolling.policies.type = Policies

# RollingFileAppender rotation policy
appender.rolling.policies.size.type = SizeBasedTriggeringPolicy
appender.rolling.policies.size.size = 10MB

# Because rolling filePattern is app-%d{yyyy-MM-dd_HH-mm-ss.SSS}-%i.log.gz, the minimum time unit is second.
# The 1 is meaning that creating rolling file/second.
#appender.rolling.policies.time.type = TimeBasedTriggeringPolicy
#appender.rolling.policies.time.interval = 1
#appender.rolling.policies.time.modulate = true

appender.rolling.strategy.type = DefaultRolloverStrategy
appender.rolling.strategy.delete.type = Delete
appender.rolling.strategy.delete.basePath = ${basePath}
appender.rolling.strategy.delete.maxDepth = 10
appender.rolling.strategy.delete.ifLastModified.type = IfLastModified

# Delete all files older than 30 days
appender.rolling.strategy.delete.ifLastModified.age = 30d

# Configure root logger
rootLogger.level = debug
rootLogger.appenderRef.rolling.ref = fileLogger
```

# Reference
https://howtodoinjava.com/log4j2/log4j2-properties-example/
円形コードダイアグラムをpythonで作成する

##はじめに
円形コードダイアグラムをpython環境で作成したときの手順を備忘録として書きます。
このグラフはchord chart, Cycle chord diagram, Arc chartなど複数の呼び方があるようです。
![ccd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2514817/daafd6b1-712f-2214-cb64-95adc109d2b1.png)

##必要なライブラリのインストール
pip、condaのパターンを書いておきます。どちらかお好きな方でインストールしてください。

```
pip install pyviz holoviews bokeh
```

```
conda install -c pyviz holoviews bokeh
```

##プロットするデータのフォーマット
本記事では2種類のデータファイルを用意して作成します。
1) ノード名のマスタファイル(nodes.csv)
流量の起点・終点となるノードのマスタとなります。
![01.nodes_index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2514817/280013f3-1bc0-af38-e415-2a417e9d9bbc.png)

2) 流量データ(data.csv)
起点(from)、終点(to)、流量(num)で定義したデータファイルです。
グラフの作成につかうholeviewsの関数は文字列を使えないため起点・終点となるノード名を1)のインデックス番号で置換しておく必要があります。
![02.flow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2514817/83eef93a-54c2-e630-c682-22863d6af52b.png)

##コード
png形式で円形コードダイアグラムを書き出すコードです。

```
import holoviews as hv
from holoviews import dim

hv.extension('matplotlib')
hv.output(fig='svg', size=300)

import matplotlib
import japanize_matplotlib

import pandas as pd


def main():
    # データを読み込み
    df = pd.read_csv('data.csv')
    df_nodes = pd.read_csv('nodes.csv')

    # 円形コードダイアグラムを作成
    nodes = hv.Dataset(df_nodes['name'], 'index')
    chord = hv.Chord((df, nodes))

    # 円形コードダイアグラムの色などを設定
    chord.opts(cmap='Category10', edge_color=dim('from').astype(str), labels='name', node_color=dim('index').astype(str))

    # PNGで書き出し
    hv.save(chord, 'ccd.png', fmt='png')

if __name__ == "__main__":
    main() 
```

PCのローカル環境でグラフ画像を出力するだけのコードです。
検索すれば沢山ヒットしますがjupyter notebook、Bokehで作ればインタラクティブなhtmlでグラフを作れます。


##カラーパレット
グッとくるものを選べばよいかと思います。
冒頭のグラフはCategory10を指定してます。
https://docs.bokeh.org/en/2.4.0/docs/reference/palettes.html

カラーパレットを変えたサンプルをいくつか載せます。
Paired
![ccd_Paired.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2514817/31ece461-8b2a-dc78-9faa-ab26db58e03f.png)

Set3
![ccd_Set3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2514817/05f41f58-7a83-bae8-bc6b-fe34ab408522.png)

Spectral
![ccd_Spectral.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2514817/6c001846-69bd-fc25-5b2a-446c1ce9ad53.png)

##最後に
円形コードダイアグラムはノードが10個程度までくらいが煩雑にならずインサイトを得られそうなグラフになると思います。
記事を書く励みになるので参考になりましたらLGTMくださいな。
SVGのtextをスマホブラウザで表示させた時にbaselineがズレる問題の対処

PCの複数ブラウザでは表示がズレないのに、スマホの複数ブラウザではSVGのtextのbaselineがずれる問題に少し悩み、対処ができたのでメモを残します。

```html
  <text x="10" y="10">
    <tspan>some text</tspan>
  </text>
  <text x="100" y="10">
    another text
    <tspan>somemore text</tspan>
  </text>

  <style>
    text {
      dominant-baseline: alphabetic;
      alignment-baseline: baseline;
      text-anchor: end;
    }
  </style>
```

上記のような感じのSVGを書いていたところ(実際のコードはtspanにfont-sizeなどを指定しているなどもっと複雑)、
`some text`と`somemore text`は上下の位置が同じになるのに、
`another text`が同じにならない、という症状にちょっと悩まされました。

また、PCの各種ブラウザでは問題なく表示されているので、スマホでの表示崩れに対処することが遅れました。

解決策は、

```html
  <tspan>another text</tspan>
```

といった感じで、 `tspan` が不要（と思っていた）部分も、tspanタグで括ってやるだけでした。

スマホの各種ブラウザ(iOSのFirefoxやChromeなど)は、tspanのあるなしで、
alignment-baselineかdominant-baselineが適用されるされないという感じで、解釈がPCと違うようでした。
（詳細はそこまで詰められていません..）

SVGのスマホブラウザにおけるbaselineのズレの問題は、結構ニッチな話かもしれませんが、
同じような問題に悩む方にはちょっと役立つかと思いメモを残します。

ブラウザのバージョンなどでも違いがあるかもしれませんが、そこまで今は調べて記載しません。悪しからず。

ではでは。
CloudWatchAlarmのアラーム発動時間をスケジューリングしました。(EventBridge + Lambda + CloudWatch)

#はじめに
こんにちは、山田です。
今回は、CloudWatchAlarmのアラーム発動時間をスケジューリングしました。

#構成図
EventBrigdeにて、CloudWatchAlarmを無効/有効化する時間帯をスケジューリングする。
Lamandaにて、時間になったら、CloudWatchAlarm無効/有効化アクションを実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/686c6f7c-fea9-a093-84ff-8aafd5422b9c.png)


#Lambdaの作成
① AWS管理コンソール -> Lambda -> 関数 -> 関数の作成をクリックする。

② 関数名を入力する。
　※今回は`「CloudWatchAlarm-enable-action」`と`「CloudWatchAlarm-disable-action」`としました。

③ 使用する言語は`Python3.8`を選択する。

④ 設定 -> アクセスの権限 -> 実行ロールの編集をクリックし、`CloudWatchAlarmへのアクセス権限を持つロール`を選択する。
※IAMロールがない場合、新規で作成する。

⑤ CloudWatchAlarm-enable-actionとCloudWatchAlarm-disable-actionのコードを入力する。

```python:CloudWatchAlarm-enable-action
import boto3

def lambda_handler(event, context):
    cloudwatch = boto3.resource('cloudwatch')
    alarm = cloudwatch.Alarm('test-alerm') #今回は「test-alarm」を対象。
    
    alarm.enable_actions()
```

```python:CloudWatchAlarm-disable-action
import boto3

def lambda_handler(event, context):
    cloudwatch = boto3.resource('cloudwatch')
    alarm = cloudwatch.Alarm('test-alarm')  #今回は「test-alarm」を対象。
    
    alarm.disable_actions()
```

#EventBrigdeルールの作成
① AWS管理コンソール -> EventBridge -> ルール -> ルールを作成をクリックする。

② 名前を入力する。
※今回は、`「CloudWatchAlarm-enable-action-rule」`と`「CloudWatchAlarm-disable-action-rule」`とする。

③ cron式でスケジューリングする。
今回は、毎年1月22日の午前10時30分にスケジューリングしてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/b78daa85-b2e8-a729-3fb0-23fea8eb97bb.png)

④ ターゲットに先ほど作成した、Lambda関数を選択する。
今回は`CloudWatchAlarm-disable-action`を選択し、時間になったらClouWatchAlarmが無効化になっていることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/3b805583-6ea9-b33e-1e13-3701cd699b89.png)


#動作確認
① AWS管理コンソール -> CloudWatch -> すべてのアラームをクリックする。
② アクションが無効化になっていることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1096361/91f4a1b3-daba-742f-c245-d8d8d4617630.png)
LWCの見た目におけるよく使いそうなコンポーネント【入門】

こんにちは！
今日もLWCに関するあれこれを理解していきたいと思います。

## lightning-card

```html
<lightning-card>カード</lightning-card>
```

lightning-card箱みたいなもんです。コンテナともいうんですかね。


![スクリーンショット 2022-01-22 10.04.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/7ff8699c-5e7c-d085-da26-de386ff3a9e5.png)

lightning-cardにはいくつか属性があるそうなのでちょっとだけ調べた内容をご紹介

### title

```html
<template>
  <lightning-card title="ハゲタコ">カード</lightning-card>
</template>
```

ヘッダーにタイトルを追加できる

![スクリーンショット 2022-01-22 10.10.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/f2c2be91-563b-e2d4-8c89-d41d4eba2569.png)


### icon-name

```html
<template>
  <lightning-card title="ハゲタコ" icon-name="standard:record">カード</lightning-card>
</template>
```

iconも追加できます。
iconは[こちら](https://www.lightningdesignsystem.com/icons/)から参照できます。

![スクリーンショット 2022-01-22 10.17.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/0a80a494-bc19-14b5-573d-6c650029c613.png)

## lightning-input


```html
<template>
  <lightning-card title="ハゲタコ" icon-name="standard:record">
    <div>
      <lightning-input label="Name" type="text" ></lightning-input>
    </div>
  </lightning-card>
</template>
```

HTMLのinputと使い方は似てますね。
labelを付けることでタグをつけることができます。

![スクリーンショット 2022-01-22 10.45.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/46054026-0860-1cb2-1990-099204fc2425.png)


## lightning-button

```html
<template>
  <lightning-card title="ハゲタコ" icon-name="standard:record">
    <div>
      <lightning-input label="Name" type="text" ></lightning-input>
      <lightning-button label="追加"></lightning-button>
    </div>
  </lightning-card>
</template>
```

こちらもHTMLに似てますね。

![スクリーンショット 2022-01-22 10.47.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435543/d440b2d3-d458-52f0-4f96-667226d676e8.png)
Qiita API v2 で403 Forbiddenが発生する

# 概要

タイトルの通りなのですが、昨年2021年11月？12月？頃からQiita API v2 で403 Forbiddenが発生するようになりました。原因を知りたい。。。

— 2022年5月1日追記
最近（2022年5月1日）改善されてます。
原因としては結局分からずですが、どうやらGoogleスプレッドシート x Qiita APIが発生条件のようです。
そして改善策としては、Googleスプレッドシートを **新しいスプレッドシートで作り直しました** 。
ソースコードの中身は変えていません。Googleスプレッドシートを新しくしただけ。これだけで改善しました。。。
ということは、Qiita API側ではなく、Googleスプレッドシートの実行環境側に何か原因があったということでしょうか。。。原因がは謎のまま。

## 詳細

私は [Google Apps Script から Qiita API v2 を使ってGoogleスプレッドシートに日々「いいね数」（LGTM数）と「閲覧数」を記録する](https://qiita.com/fkooo/items/65c98d386e01456858eb "Google Apps Script から Qiita API v2 を使ってGoogleスプレッドシートに日々「いいね数」（LGTM数）と「閲覧数」を記録する") の記事の通り、1日1回QiitaのAPIを使ってGoogleスプレッドシートにLGTMと閲覧数を記録していたのですが、昨年2021年11月？12月？頃から**403 Forbidden**が発生するようになりました。
最初は**2週間に1回**くらい、次第に**1週間に1回**くらいになり、ついに今週は**1週間で4回**ほど。。。
流石になんとかしたいなと思い調べたところ、特に同じ現象になっている方とかいないようで原因不明なので今回投稿してみました。

詳細にすると以下です。

* 1日1回の処理内容
    * GET /api/v2/authenticated_user/items：１回
    * GET /api/v2/items/:item_id：約50回
* 最初は1日のリクエスト数の上限数とかが減ったのかなと思ったけどAPIドキュメントには以下の記載があり違う。。。

> 認証している状態ではユーザごとに1時間に1000回まで、認証していない状態ではIPアドレスごとに1時間に60回までリクエストを受け付けます。

* [ユーザの管理画面](https://qiita.com/settings/applications "ユーザの管理画面")から**access_token**の再発行。
    * 12月は一旦これで改善。access_tokenに有効期限とかが設定されたのかなと思い、様子をみることに。
    * 最近1月になってからは、access_tokenの再発行でも改善されず。。。

* 処理のDEBUG実行
    * **0:0365**は GET /api/v2/items/:item_id を繰り返すところなので、GET /api/v2/items/:item_id に制限が追加されたかなと思いドキュメントを確認。特に制限の記載はなし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/272df297-3436-0f29-b89c-7b305a681408.png)
    * 試しにもう1回実行してみる。あれ、今度は GET /api/v2/items/:item_id までいかず GET /api/v2/authenticated_user/items でエラーになる。403 Forbidden ってエラーになったりならなかったりするものじゃなくないかな。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188544/2bec8fa2-8325-872b-3f39-d9b03ac2b6bb.png)

もしやアカウント毎ではなく、Qiita全体のリクエスト上限数に達してエラーになっている、、、？
ということで原因不明で投稿しました。
誰か回避策ご存知な方いたら教えて欲しいです。

## エラー履歴
2022年1月24日:0時　成功
2022年1月25日:0時、8時　403エラー発生
2022年1月26日:0時、8時　403エラー発生
2022年1月27日:0時、8時、12時　403エラー発生
2022年1月28日:0時、8時、22時　403エラー発生
2022年1月29日:0時　**成功！！**
2022年1月30日:0時　成功
2022年1月31日:0時、8時　403エラー発生
2022年2月1日:0時　成功
2022年2月2日:0時、8時　403エラー発生
2022年2月3日:0時、8時　403エラー発生
2022年2月4日:0時、8時　403エラー発生
2022年2月5日:0時　403エラー発生
2022年2月5日:8時　**成功！！**
2022年2月6日:0時　403エラー発生
2022年2月7日:0時　**成功！！**
2022年2月8日:0時　403エラー発生
2022年2月9日:0時　**成功！！**
2022年2月10日:0時　**成功！！**
2022年2月11日:0時　403エラー発生
2022年2月12日:0時　403エラー発生
2022年2月13日:0時、10時　403エラー発生

## 参考

Qiita API v2 ドキュメント
https://qiita.com/api/v2/docs
OpenSSLでプライベート認証局(CA)を構築する

# これはなに？

[OpenSSLでプライベート認証局の構築（ルートCA、中間CA）](https://qiita.com/bashaway/items/ac5ece9618a613f37ce5) を写経する記事です。

中間CAは作りません。

証明書の用途をクライアント認証のみにしています。

# 先にまとめ

下記手順をこちらにまとめました。

https://github.com/sengokyu/openssl-private-ca-sample

gitレポジトリをクローンして、**openssl-req.cnf**ファイルを作成し、**init-ca.sh** を実行すれば、同じ環境が出来上がります。


# CA構築手順

## CA用のディレクトリとファイルを作成

こんなディレクトリとファイルを作ります。

```
CA
├── crl
├── newcerts
├── private
└── var
    ├── crlnumber
    ├── index.txt
    └── serial
```

```console
mkdir -p CA/crl CA/newcerts CA/private CA/var
echo '01' > CA/var/serial
echo '01' > CA/var/crlnumber
touch CA/var/index.txt
```

## CAの秘密鍵と公開鍵を作成

### 鍵作成用の設定ファイルを作成

ここでの作業用の設定ファイルを作成します。
**openssl-req.cnf**という名前で保存しました。

`req_disinguieshed_name`セクションの内容は、作成したいCAに合わせてください。
ここでは国名と名前のみ指定しています。

```
[ req ]
distinguished_name  = req_distinguished_name
x509_extensions     = v3_ca
prompt              = no

[ req_distinguished_name ]
countryName         = JP
commonName          = My Sample Private CA

[ v3_ca ]
subjectKeyIdentifier = hash
authorityKeyIdentifier = keyid:always,issuer
basicConstraints    = critical,CA:true        # 必ずCA:trueにする。重要フラグも付ける。
keyUsage            = cRLSign, keyCertSign
```

### 秘密鍵と公開鍵を作成

自己署名で作成します。

```console
openssl req \
  -config openssl-req.cnf \
  -x509 \
  -nodes \
  -newkey EC \
  -pkeyopt ec_paramgen_curve:prime256v1 \
  -days 3650 \
  -out CA/cacert.pem \
  -keyout CA/private/cakey.pem
```

**CA/cacert.pem**ファイルと**CA/private/cakey.pem**ファイルが出来上がります。

ほんとは秘密鍵にパスフレーズをセットしてください。`-nodes`オプションを外せばOKです。





## CA業務用の設定ファイルを作成

CA業務で使う設定ファイルを作成します。**openssl-ca.cnf**という名前で保存しました。

発行する証明書のX509拡張セクションを指定して、クライアント認証用にしています。

```
[ ca ]
default_ca      = CA_default

[ CA_default ]
dir             = ./CA
crl_dir         = $dir/crl
database        = $dir/var/index.txt
new_certs_dir   = $dir/newcerts
certificate     = $dir/cacert.pem
serial          = $dir/var/serial
crlnumber       = $dir/var/crlnumber
crl             = $dir/crl.pem
private_key     = $dir/private/cakey.pem
x509_extensions = v3_client         # デフォルト使用するX509拡張
name_opt        = ca_default
cert_opt        = ca_default
default_days    = 365
default_crl_days= 30
default_md      = default
preserve        = no
policy          = policy_anything

[ policy_anything ]
countryName         = optional
stateOrProvinceName	= optional
localityName		= optional
organizationName	= optional
organizationalUnitName	= optional
commonName          = supplied
emailAddress		= optional

[ v3_client ]
basicConstraints    = CA:FALSE
extendedKeyUsage    = clientAuth   # 証明書の用途（ここではクライアント認証）
subjectKeyIdentifier = hash
authorityKeyIdentifier = keyid,issuer
```



# CAとしての業務

## 証明書を発行する

CSRファイルを受け取ったら、以下のコマンドを実行して署名します。

```console
openssl ca \
  -config openssl-ca.cnf \
  -in CSRファイル名 \
  -notext \
  -batch
```

**CA/newcerts**ディレクトリの下にファイルが出来上がります。





# 参考リンク

- [図解 X.509 証明書](https://qiita.com/TakahikoKawasaki/items/4c35ac38c52978805c69)
- [x.509 Certificates - Critical vs non-critical extensions ](https://www.securesenses.net/2013/05/x509-certificates-critical-vs-non.html)
PowerAutomateを使ってOutlookで受信したメールをExcelに自動転記する

## やりたいこと

- 特定のフォーマットで送られてくる問い合わせメールの内容をエクセルに転記して管理したい
- 例えば以下のフォーマットでメールがきたら

```bash
[対象製品]
テスト

[問い合わせ内容]
テストです
```

- エクセルにこう転記したい

![automate1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/148328fe-afe3-8849-df6c-ee5c490e8efd.jpeg)


## Power Automateでフロー作成

Office365のメニューからPower Automateを起動し、[マイフロー]→[新しいフロー]→[自動化したクラウドフロー]を選択します。

![automate2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/a1f99015-548d-6618-4cb6-e38bc56ec97a.jpeg)


フロー名は適当でOKです。フローのトリガーは「新しいメールが届いたとき(V3)」を選択して作成します。

![automate3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/42ab44ea-3457-04b9-d567-38dcceef8807.jpeg)


### Outlookから受信したメールを受け取る

「新しいメールが届いたとき(V3)」の設定をしていきます。
今回はテストとして自分から届いたメールのみを対象とします。実際に使う場合はシステムから送られるメールアドレスなど適切なものを設定してください。

![automate4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/9178b110-a594-807f-33a7-b588e63e434b.jpeg)


### メールの内容をパース

まずは、htmlメールをテキストで扱うために「Htmlからテキスト（プレビュー）」アクションを追加します。変換する対象は「本文」とします。（動的コンテンツから本文を選択してください）

![automate5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/b5339c8e-4b28-cf36-e053-db782c340e4f.jpeg)


次に対象の文字列を抽出するための変数を用意します。「変数を初期化する」アクションを作成してください。今回は、arrayという配列用の変数を作成しました。

![automate6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/b6a1265a-e59f-aa0b-a5af-86763d3feb9c.jpeg)


サンプルを元に[対象製品]、[問い合わせ内容]という文字で区切って変数に格納します。値の部分の式は以下に記載しています。

```bash
split(split(outputs('Html_からテキスト')?['body'],'[対象製品]
')[1] , '[問い合わせ内容]
')
```

この部分は自分の処理させたいメールの内容と照らし合わせてロジックを考えてください。
参考までにsplit関数で改行を認識させるにはそのまま改行をいれないといけないみたいです。（\nや¥nを試してもダメでした）

### Excelに転記する

最後に変数の内容やメールの受信日時をエクセルに転記するための「表に行を追加」アクションを追加します。
![automate8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/a0feacb1-5232-cc77-01b7-df67398dc210.jpeg)

この「表に行を追加」アクションで追記を行う場合、対象のエクセルにはテーブルを作成する必要があります。そのため、新規のエクセルをOneNoteなどPowerAutometeからアクセスできる場所に作成し、対象のセルを[挿入]→[テーブル]　からテーブルとして作成します。

![automate7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/73b1a3c9-328f-c911-d266-74c542e7a947.jpeg)


PowerAutomateの画面に戻り、テーブルを指定すると自動的に書き込み先のセルを補完してくれます。あとは、準備しておいた変数を利用してエクセルに書き込む設定を行います。
詳細は省略しますが、受信日時はGMTから変更して形式を変更したり、配列の変数から改行を削除したりしています。(改行を削除した変数がproductとdescriptionです。)

![automate9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/98cd6491-2641-2b7a-ac4e-1fbba21a27ea.jpeg)

あとはフローを保存して完了です。メールを受信すると自動でエクセルに追記されます！
![automate10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/cc4b49c4-2125-6d6e-4cdb-09f73c71d7c7.jpeg)
![automate11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/6ab20b59-3d81-b66c-8838-5144ca8deb59.jpeg)


## おわりに

そもそも今どきメールで受信せずにTrelloとかサービスで問い合わせ管理するよねってツッコミはあると思いますが、既存の仕組みのまま少しづつ改善をしていこうと思うとPowerAutomateのような自動化ツールが効果的だったりします。また、Excelでデータを独立して管理しておくとあとでこのデータを分析したり、別のアプリで活用したりと疎結合にできるのも個人的には好きなポイントです。
自作モジュールのinit関数を使いたい

#背景
先日、自作モジュールをGitHubにアップして使いました。その時はクラスにして使っていなかったので、init関数を定義していませんでした。

#目的
自作モジュールをクラスで作り、init関数を定義して使いたいと思います。

#方法
先日、GitHubからcloneして、入力と重みとバイアスを引数としてANDゲートとして出力しました。今回はクラスを定義して論理ゲート（ここではANDゲート）をインスタンス化して、同じように出力します。

#結果
以前、GitHubにアップした関数と同じ結果になりました。前回は入力まで引数にしていたので使い勝手が悪いと思っていましたが、インスタンス化する事でANDゲートを作った後、入力をすることができました。

[Colab：GitHubから自作モジュールを使ってみる.ipynb（testの項目に記述してます）](https://colab.research.google.com/drive/1wvyMOe2V8ynwUTiNcsG-OElp2U0fEnDA?usp=sharing)

#考察
今回は、単純パーセプトロンをクラスで定義しました。結果、論理ゲートをインスタンス化出来ました。インスタンス化した論理ゲートに任意の入力を入れる事で期待していた結果を得られました。

#課題
次回は、多層パーセプトロンを実装するためにレイヤーを重ねる構造や活性化関数を使ったりしてバックプロパゲーションまで実装できればと考えています。

#関連
[GitHubから自作モジュールを使ってみる](https://qiita.com/tan0ry0shiny/items/70da22955b44b8c03829)
これだけは覚えておきたいgit stashの使い方　ゴリラを添えて

## はじめに
チーム開発をしているなかで、

**「この編集したコード残しておきたいな、、、、でも、ほかの方法も試してみたいなぁ、、、、🤔🤔🤔」**

このようなときありませんか？

こんな時に使えるのがgit stashという方法。
ぼくがいつもやる方法をここにまとめておきます。
だれかのお役に立てたら幸いです。

## git stashを使いたいのはどんなとき？
![スクリーンショット 2022-01-22 9.09.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628093/c1b919f1-26e2-a0cc-414c-7b1713ad8cf5.png)


まずこんな感じで、編集したいファイルがあると思います。
このファイルを編集しようと思います。

↓

![スクリーンショット 2022-01-22 9.10.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628093/08de04af-aea1-f4ac-1f57-25c68ff27790.png)

このREADME.mdファイルに変更を加えました。

**この変更、やっぱりなんか違うな、、、、でも、あとで何かあったときのためにどこかに残しておきたいな、、、😬😬**

そんなときに使えるのがgit stashです。

## git stashを使ってみる
### git statusで現在の変更ファイルを確認
```
$ git status
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   README.md
```
まず、git statusで現在の編集されている状況を確認しましょう。(このgit statusで確認する癖をつけるといいらしい)
すると、README.mdが変更されていることが確認できます。

### git stahs savaで変更ファイルを名前をつけて退避

```
$ git stahs save "ゴリラさんへの返答"
Saved working directory and index state On main: ゴリラさんへの返答
```

はい、これでgit stashができました。これによって、自分が編集をした内容を一旦退避させることができます。

README.mdファイルを確認してみましょう。

![スクリーンショット 2022-01-22 9.17.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628093/54c0b6b7-98ef-a8f7-3926-5cf518d77a25.png)

はい！！！さきほどの``いや、お前もがんばれよ、さる``という変更が消えているのが確認できると思います。
それでは、git stash save "ゴリラさんへの返答"と打って退避させたものを確認してみましょう。

### git stahs listでstashしたものを確認

```
$ git stash list
stash@{0}: On main: ゴリラさんへの返答
```
このコマンドを打つことにより、git stashしている内容をいくつも確認することができます。

このgit stash listコマンドで、ゴリラさんへの返答として保存したものがリストで確認できます。

ちなみに、git stashは1つだけではなく、何個でもすることができます。

それでは、この退避させた変更を元に戻してみましょう。

### git stash applyでstashしたものを元に戻す

```
$ git stash apply stash@{0}
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   README.md
```

はい、これでさっきstashして退避させた編集した内容が戻ってきました。
それでは、README．mdファイルを確認してみましょう。

![スクリーンショット 2022-01-22 9.23.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628093/6b993606-d3e9-1afb-8e44-f1d15661c6e4.png)

はい！これで先程のstahsで退避させていた編集内容が戻ってきました。

## 最後に
他にもstashする方法は色々とありますが、僕は色々試したうえでここで説明したコマンドで対応することが一番安心で簡単という結論に行きつきました。

ほかにもググれば色々な方法がありますので、興味がある方はググってみてください。

ゴリラを添えて
Next.jsで削除したsvgの警告に対処する

# 解決したいこと
* 削除したはずのsvg画像参照エラーの警告が出る
* リポジトリ内を検索しても、どこからも参照されていない

## 警告文

```
warn  - ./xxx/images/ lazy ^\.\/.*$ namespace object Module not found: Can't resolve './xxx/xxx.svg in <folder path>' 
```

# 結論
* ただのキャッシュの問題なので、 `.next` フォルダを削除する

```sh
rm -rf ./.next
```

キャッシュだろうなというのは、すぐに思いついたけど
警告文でググってもすぐに出てこなかったので、検索に引っ掛かればいいなーと。

いつもQiitaには感謝しております。
サブネットを間違えると

# サブネットを間違えるとどうなるか
以前書いた[記事](https://qiita.com/infinite1oop/items/ee2425b95719b664a1dc)の姉妹編で、サブネットの設定を間違えるとどうなるかを書いてみたい。

## その１（外部OK、内部NG）
「ホームページは閲覧できるけど印刷できないのですが、、」のようなケース、具体的なネットワーク情報は下図参照。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/81f6b4f4-6567-8244-32ab-f2adfde3407e.png)

PCとGatewayとは同じサブネット（192.168.11.0/25）に属しているが、Printerは異なるサブネット（192.168.11.0/24）に位置している。PCから見ると、Printerは異なるサブネットにいるため、Printer宛のパケットは、Gatewayに送ってしまう。よって、印刷できず。

## その２（OKに見えるが(Case-a)）
動作しているが、実は正しく設定されていないケース（a）、下図参照。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/2d9b8f99-39ec-c3b7-f358-6a0973c26df1.png)

PCが属するサブネットは「192.168.11.0/25」、Printerが属するサブネットは「192.168.11.0/24」、同じではない。だが、お互いが、それぞれのIPアドレスをたまたま同じサブネットにいると判断してしまうため、PCからPrinterへの通信が可能（印刷できる）となる。

## その３（OKに見えるが(Case-b)）
動作しているが、実は正しく設定されていないケース（b）、下図参照。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/ff90d0d0-73e3-149c-3a07-039bebbefcbe.png)

その２とは多少異なり、PCが属するサブネットは「192.168.11.0/24」、Printerが属するサブネットは「192.168.11.0/25」、ここでも同じではない。だが、お互いが、それぞれのIPアドレスをたまたま同じサブネットにいると判断してしまうため、PCからPrinterへの通信が可能（印刷できる）となる。

## おまけ
こういったテスト（確認）は、VirtualBoxやVMwareなどで複数のVMを動作＆仮想ネットワークを作成して接続、、、といった環境で行うのがベター。

## 最後に
何かの設定を変更して、突然通信できなくなることもあり。IPアドレスなどを手動設定するときには、よく注意されたし。
Qiitaのアクセス数(viewsの数)を増やす小技

①しばらく?アクセス数の様子を見て、数が変わらないようだと、tagを追加及び変更する。
tag追加先・変更先のフォロワーさんが、見てくれるかもしれない。
tag変更前のフォロワーさんごめんなさい。
いけない事ですか?

期待して見てくださった方へ、この程度で申し訳ありません。


#参考
SEOなるものがあるらしい。

https://qiita.com/tags/seo

Qiitaに記事書くとアクセス数凄い
Qiitaは自分の書いた記事のViewが見える

https://yomon.hatenablog.com/entry/2019/11/try_qiita

以下は、私のゆうどう?です。
38万viewsを目標としています。
アドバイスをお願いします。私のゆうどうにのって下さい。
よろしくお願いします。


https://qiita.com/mrrclb48z/items/7c16cb5141a495bc5307
neosでlogix その55

# 概要

neosでlogixやってみる。
Set Local Positionノード、使ってみた。

# 写真

![2022-01-21 23.00.21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/3702249b-d98d-3d4f-a02f-c66743fe3a52.jpeg)


# Set Local Position

```
Inputs
 	Impulse	Set
 	Slot	Instance
 	Float3	Position
Outputs
 	Impulse	OnDone
```

# 手順

- devtooltipを装着
- 新規->3d->box
- logixtooltipを装着
- ノードブラウザを表示
- Slots>Root Slotをスポーン
- Slots>Find Child By Nameをスポーン
- Transform>Local Transformをスポーン
- Transform>Set Local Positionをスポーン
- Operators>×をスポーン。
- つなぐ

以上。
ffmpegでサムネイル抽出


Extracting a single frame

```
ffmpeg -i yosemiteA.mp4 -ss 00:00:18.123 -f image2 -vframes 1 yosemite.png
```

Periodic thumbnails

```
ffmpeg -i yosemiteA.mp4 -f image2 -vf fps=fps=1/10 ythumb%3d.png
```

i-frame thumbnails

```
ffmpeg -i yosemiteA.mp4 -f image2 -vf "select='eq(pict_type,PICT_TYPE_I)'" -vsync vfr yi%03d.png
```

Capturing scene change

```
ffmpeg -i yosemiteA.mp4 -vf  "select=gt(scene\,0.5), scale=640:360" -vsync vfr yosemiteThumb%03d.png
```


https://www.bogotobogo.com/FFMpeg/ffmpeg_thumbnails_select_scene_iframe.php
【Project Euler】Problem 44: 五角数

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 44. 五角数

原文 [Problem 44: Pentagon numbers](https://projecteuler.net/problem=44)

**問題の要約：2つの五角数$P_j$,$P_k$のその和と差がやはり五角数になるものでその$D=|P_k-P_j|$が最小となる$D$を求めよ**

五角数は[五角数(Wikipedia)](https://ja.wikipedia.org/wiki/%E4%BA%94%E8%A7%92%E6%95%B0)によると、一般項は以下の式で表され、逆関数は2番目の式になります。

```math 
\begin{align}
P_n &= n(3n-1)/2 \\

n &= (1 \pm \sqrt{1+24P_n})/6
\end{align}
```

これをもとに$D=|P_k-P_j|$が最小ということなので**j**を小さい順、**k**を大きい順に探して最初に見つかったものを答えとしました。、

```python 
import itertools
def Pt(n):
  return n*(3*n-1)//2
def isPt(x):
	f = (1 + (1+24*x)**(1/2))/6
	return f - int(f) == 0
  
def search():
  for k in itertools.count(1):
    for j in range(k,0,-1):
      if isPt(Pt(k)-Pt(j)): 
        if isPt(Pt(k)+Pt(j)):
          print(j, k, Pt(j),Pt(k),Pt(k)-Pt(j), Pt(k)+Pt(j))
          return Pt(k)-Pt(j)

print(f"Answer: {search()}") 
```

（開発環境：Google Colab）
【Project Euler】Problem 43: 素数の倍数の部分列

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 43. 素数の倍数の部分列

原文 [Problem 43: Sub-string divisibility](https://projecteuler.net/problem=43)

**問題の要約：10桁のパンデジタル数で$1 \le k \le 7$のとき$k+1,k+2,k+3$**の3桁の数が$k$番目の素数で割り切れる数の合計を求めよ。**

やや問題が分かりずらいですがプログラム的にはシンプルです。

```python 
from itertools import permutations

primes = [2,3,5,7,11,13,17]
dgts = "0123456789"

def divchk(ps):
  for k in range(7):
    if int(ps[k+1:k+4]) % primes[k] != 0: return False
  return True

print(sum([int(''.join(dp)) for dp in permutations(dgts) if divchk(''.join(dp)) ]))
```

（開発環境：Google Colab）
【Project Euler】Problem 42: 符号化された三角数

* 本記事は[ProjectEuler](https://projecteuler.net/about)の「100番以下の問題の説明は記載可能」という規定に基づいて回答のヒントが書かれていますので、自分である程度考えてみてから読まれることをお勧めします。

### 問題 42. 符号化された三角数

原文 [Problem 42: Coded triangle numbers](https://projecteuler.net/problem=42)

**問題の要約：添付の単語リストを読み込み単語スコアが三角数になるものの数を求めよ**

Google Colabでのファイルの読み込みは「[Problem 22: 名前のスコア](https://qiita.com/masa0599/items/cf9cc7e7f41692d20af4)」を参考にしてください。今回は**p042_words.txt**にファイルをuploadした後のコードになります。また単語の値を返す関数**charcost**, **wordcost**もそのまま使います。

```python
# triangle numbers up to 500
tris = [n*(n+1)//2 for n in range(1,32)]
print(tris)

#---- read words from file to name[]
f = open("p042_words.txt")
string = f.read()
f.close()
names = string.replace('"','').split(',')
print(len(names),names[:10])

print(f"Answer: {[n in tris for n in [wordcost(str) for str in names]] .count(True)}") 
```
（開発環境：Google Colab）
簡単yahoo検索プラグイン(Yahoo連動検索プラグイン 3.5)

# 概要
このプラグインは一般的なWebページで文字選択された語句を検索キーワードとしてyahooサーチページで検索します。
特別なWebページでなければ、ページ内のテキストを選択すると、その文字列でyahooサーチ結果が別タブで表示されます。
利用場面は、ある語句について調べたいときに使うと便利です。簡単に、yahooサーチすることができます。
以下にリンク先を示します。
# プラグインのリンク先

https://chrome.google.com/webstore/search/tecoyan?hl=ja&_category=ext/38-search-tools

是非、ご活用ください。
LocalStack を用いたAmazon SNS動作確認方法メモ

* LocalStack上で動作するAmazon SNSをAWS CLIで操作し、動作確認する。

## LocalStack準備

* `docker-compose.yml`

  ```yaml
  version: "3.8"
  networks:
    container-link:
      name: docker.internal
  services:
    localstack:
      container_name: "${LOCALSTACK_DOCKER_NAME-localstack_main}"
      image: localstack/localstack
      ports:
        - "127.0.0.1:53:53"                # only required for Pro
        - "127.0.0.1:53:53/udp"            # only required for Pro
        - "127.0.0.1:443:443"              # only required for Pro
        - "127.0.0.1:4510-4530:4510-4530"  # only required for Pro
        - "127.0.0.1:4566:4566"
        - "127.0.0.1:4571:4571"
      environment:
        - SERVICES=${SERVICES- }
        - DEBUG=${DEBUG- }
        - DATA_DIR=${DATA_DIR- }
        - LAMBDA_EXECUTOR=${LAMBDA_EXECUTOR- }
        - LOCALSTACK_API_KEY=${LOCALSTACK_API_KEY- }  # only required for Pro
        - HOST_TMP_FOLDER=${TMPDIR:-/tmp/}localstack
        - DOCKER_HOST=unix:///var/run/docker.sock
      volumes:
        - "${TMPDIR:-/tmp}/localstack:/tmp/localstack"
        - "/var/run/docker.sock:/var/run/docker.sock"
      networks:
        - container-link
  ```

* 起動

  ```shell
  docker-compose up
  ```

  

## 動作確認

### トピックの作成

```shell
aws sns create-topic --name test-topic --endpoint-url http://localhost:4566 --profile localstack 
{
    "TopicArn": "arn:aws:sns:ap-northeast-1:000000000000:test-topic"
}
```



### トピックへのサブスクライブ

* `email` プロトコルと `notification-endpoint` の E メールアドレスを指定する。

```shell
aws sns subscribe --topic-arn arn:aws:sns:ap-northeast-1:000000000000:test-topic --protocol email --notification-endpoint test@example.com --endpoint-url http://localhost:4566 --profile localstack 
{
    "SubscriptionArn": "arn:aws:sns:ap-northeast-1:000000000000:test-topic:ac2e3322-10a1-413d-98aa-f0fe5c34cb44"
}
```

### トピックへの発行

* トピックのすべての受信者にメッセージを送信する

```shell
aws sns publish --topic-arn arn:aws:sns:ap-northeast-1:000000000000:test-topic --message "Hello SNS!" --endpoint-url http://localhost:4566 --profile localstack
{
    "MessageId": "f39fe4ce-15e8-4333-a7b8-2c75d3b27ed9"
}
```

### トピックからサブスクリプションを解除する

* トピックのサブスクリプションを解除し、そのトピックに発行されたメッセージの受信を停止する。

```shell
aws sns unsubscribe --subscription-arn arn:aws:sns:ap-northeast-1:000000000000:test-topic:ac2e3322-10a1-413d-98aa-f0fe5c34cb44 --endpoint-url http://localhost:4566 --profile localstack

```



### トピックの削除

```shell
# トピック確認
aws sns list-topics --endpoint-url http://localhost:4566 --profile localstack
{
    "Topics": [
        {
            "TopicArn": "arn:aws:sns:ap-northeast-1:000000000000:test-topic"
        }
    ]
}
# トピック削除
aws sns delete-topic --topic-arn arn:aws:sns:ap-northeast-1:000000000000:test-topic --endpoint-url http://localhost:4566 --profile localstack

# トピック確認(削除されたことの確認)
aws sns list-topics --endpoint-url http://localhost:4566 --profile localstack
{
    "Topics": []
}
```



## 参考情報

* [AWS CLI での Amazon SNS の使用](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-services-sns.html)
LocalStack を用いたAmazon CloudWatch Logs ロググループ作成方法 メモ

* LocalStackを用いたAmazon CloudWatch Logsのロググループ作成方法などをメモする。

## LocalStack 準備

* [こちら](https://qiita.com/KWS_0901/items/f9579d9c360cf42dc97d)の手順でDocker LocalStack環境を準備しておく。



## ロググループ作成方法

* AWS CLIを使用し、ロググループを作成する。

### 1. ロググループを作成する

* ロググループ`test-log-group`を作成する。

```shell
$ aws logs create-log-group --log-group-name test-log-group --endpoint-url=http://localhost:4566 --profile localstack
```



### 2. ログストリームを作成する

* ロググループ`test-log-group`にログストリーム`test-log-stream`を作成する。

```bash
$ aws logs create-log-stream --log-group-name test-log-group --log-stream-name test-log-stream --endpoint-url=http://localhost:4566 --profile localstack
```



### 3.  ログイベントをPUTする

#### 初回PUT時

* ログストリーム`test-log-stream`にログイベントをPUTする

```shell
$ aws logs put-log-events --log-group-name test-log-group --log-stream-name test-log-stream --log-events timestamp=1635589048,message='LOG EVENTS 1' --endpoint-url=http://localhost:4566 --profile localstack
```

#### 2回目以降のPUT時

* トークンを取得してから、ログイベントをPUTする。

```shell
$ TOKEN=$(aws logs describe-log-streams --log-group-name test-log-group --query 'logStreams[].uploadSequenceToken' --endpoint-url=http://localhost:4566 --profile localstack --output text)
$ aws logs put-log-events \
        --log-group-name test-log-group \
        --log-stream-name test-log-stream \
        --log-events timestamp=1635589048,message='LOG EVENTS 2' \
        --sequence-token ${TOKEN} --endpoint-url=http://localhost:4566 --profile localstack
```



### 4. ログイベントを確認する

```shell
$ aws logs get-log-events --log-group-name test-log-group --log-stream-name test-log-stream --endpoint-url=http://localhost:4566 --profile localstack
{
    "events": [
        {
            "timestamp": 1635589048,
            "message": "LOG EVENTS 1",
            "ingestionTime": 1635591467580
        },
        {
            "timestamp": 1635589048,
            "message": "LOG EVENTS 2",
            "ingestionTime": 1635591480764
        }
    ],
    "nextForwardToken": "f/00000000000000000000000000000000000000000000000000000001",
    "nextBackwardToken": "b/00000000000000000000000000000000000000000000000000000000"
}
```



## 参考情報

* [Amazon CloudWatch Logs の概念](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/CloudWatchLogsConcepts.html)
* [[JAWS-UG CLI] CloudWatch Logs:#1 ロググループの作成](https://qiita.com/tcsh/items/075bef7422e046d0d07b)
* [AWS CLIを使用してCloudWatchLogsを操作してみる](https://dev.classmethod.jp/articles/operate-cloudwatch-log-group-using-cli-for-beginners/)
* [create-log-group](https://docs.aws.amazon.com/cli/latest/reference/logs/create-log-group.html#create-log-group)
Vuexのaction（mutation）への引数の渡し方

## 概要
今回はVuexにおけるactionやmutationに引数を複数渡す際に勘違いをしていたので、やり方を含めた備忘録として記載します。

## actionへの引数の渡し方
結論、引数に渡せるのは`payload`です。
`payload`とはデータの集合体のようなものです。
つまり複数の引数がある場合、集合体として渡さなくてはならないということです。

## 実例

### 引数が１つの場合
引数が１つの場合はそのまま渡せば機能します。

#### 前提
下記のアクションが定義されていると仮定します。

```js
export const actions = {
  exampleMethod({ commit }, payload) {
    commit('exampleMethod', payload) // mutationに'exampleMethod'が定義済みと仮定
  }
}
```

#### 引数の渡し方

```vue
<script>
export default = {
  methods: {
    this.$store.dispatch('exampleMethods', 引数)
  }
}
</script>
```

### 引数が複数ある場合
引数が複数ある場合は渡し方に工夫が必要です。

#### 前提
下記アクションが定義されていると仮定します。
引数が複数ある場合は一つにまとめなければなりません。
なぜならactionsやmutationsは__第２引数までしか取らないから__です。

```js
export const actions = {
  exampleMethod({ commit }, { message, status }) {
    commit('exampleMessage', message) // 各ミューテーションは定義済みと仮定
    commit('exampleStatus', status)
  }
}
```
#### 引数の渡し方
渡す際にオブジェクト型にして渡さないといけません。

```vue
<script>
export default = {
  methods: {
    this.$store.dispatch('exampleMethod', { message: 引数1, status: 引数2})
  }
}
</script>
```
## 勘違いしていたactionsの定義
私は複数の引数がある場合に下記のような定義をしてました。
下記の定義を見ると__第３引数__まで取ってしまっています。

```js
export const actions = {
  exampleMethod({ commit }, message, status) { // 第３引数まで取っている
    commit('exampleMethod', message, status)
  }
}
```

## まとめ
上記のような勘違いは公式ドキュメントをしっかり読み込めていないため起こったことだと思います。
改めて公式ドキュメントを熟読することの必要性を感じました。

## 参考文献
[Vuex公式ドキュメント](https://next.vuex.vuejs.org/ja/guide/actions.html)
Alfred アプリが検索できない（色々参考にしても解決できなかった）

## この記事について
**Alfredでアプリが検索できるようになった方法を紹介する記事**です。
自分で探した限りの日本語のページで見当たらなかった解決方法を記載してます。

### 背景

AlfredでSlackやらVScode等のアプリを立ち上げようにも以前までは問題なかったのに、いつからか検索結果に表示されないようになった。

![スクリーンショット 2022-01-21 9.19.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/a1106859-c71f-f47b-174b-be2ea6b1d7be.png)



日本語で「alfred 検索できない」とググって以下を参考にしたが、自分の問題は解決されなかった。他にも色々参考にしたけど、似たような記事が多かったと思う。

https://qiita.com/maru401/items/85d09ef300dd9ad15c1f

https://lovemac.jp/5454

https://webrandum.net/alfred-rebuild-macos-metadata/

https://dorobachi.com/pcit/alf-terminal/



### 環境

- macOS Catalina 10.15.7
- Alfred 4.6.1


## 解決できたページ
結局、公式が救ってくれる。

https://www.alfredforum.com/topic/12932-alfred-4-cant-find-applications/

この人の質問が自分の環境・問題が似ていたから、ここから参考に進めてます。

https://www.alfredforum.com/topic/15054-alfred-is-not-finding-apps-on-catalina/?do=findComment&comment=79865


## 検索できるようになるまでやったこと

自分の場合は、以下の１〜３のステップを経て直った。


### 1. Alfredのパーミッションを確認

> If you've recently upgraded macOS to Catalina, please remove Alfred from the permissions and re-add, as Catalina seems to forget previously granted permissions upon upgrade. 

> You will then need to run the reindex again from Alfred's Advanced preferences

Catalinaにアップグレートした時には、一度Alfredをパーミッションから除外して、再度パーミッションを与える必要があるらしい。
パーミッションの設定ができたら、AlfredでRebuildをする。


![スクリーンショット 2022-01-20 11.07.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/efc98f0a-edd0-c42b-9c61-98e4ad8dc486.png)


![スクリーンショット 2022-01-20 11.39.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/4b25994b-e273-8775-6712-52c690894e51.png)



### 2. Full Disk Accessを確認（※もしかしたら不要）

>  I can see that Terminal hasn't been granted Full Disk Access. This is necessary for Terminal to be able to run the indexing process, so please check the box next to Terminal and go through the process again.

フルディスクアクセスが許可されていないと、インデックス作成プロセスを実行できないから許可する必要があるらしい。

確認すると、確かに検索結果に出ないアプリにチェックが入っていなかったから、チェックを入れる。

![スクリーンショット 2022-01-20 11.03.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/29d4033f-c9d8-4cc0-7ab1-69bc17124608.png)


### 3. コマンドの実行

「このコマンドを実行したら直ったやで〜」と教えてくれる救世主の登場

>  I had the same issue. Resolved with the following:

1 . Disable indexing 

```
sudo mdutil -a -i off
```

2 . Enable again

```
sudo mdutil -a -i on
```
 

### ４. できた！！！！！
![スクリーンショット 2022-01-21 9.21.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653956/c728990a-9c83-52c3-a74f-072acb02abeb.png)


## ※
スッテプ２は必要のない作業かもしれない。
現状、パーミッションを許可してないアプリでも検索結果には表示されるようになっているから。