OmniAICreator/Qiita-1.07M huggingface dataset:
[python]関数のローカルスコープ・グローバルスコープ

# なんのことか
pythonの変数の話

関数を呼び出した時に設定されるパラメータと変数→ローカルスコープ内に存在
関数の外で代入された変数→グローバルスコープ内に存在

スコープとは変数を入れる場所のこと

ローカルスコープ内に存在する変数をローカル変数という
グローバルスコープ内に存在する変数をグローバル変数という

グローバルスコープのコードはローカル変数を呼び出せない
ローカルスコープのコードはグローバル変数を呼び出せる
ローカルスコープのコードは他の関数で使われるローカル変数を呼び出せない

# global文

関数でグローバル変数を変更したい場合に利用する
global [変数名] と記載することで、この関数では[変数名]はグローバル変数を参照していると定義することになる
※この場合ローカル変数として同じ名称の変数は使えない

global文を利用してglobal関数を変更する例
```Python
def hoge():
    global name
    name = 'Yamada'

name = 'Suzuki'
hoge()
print(name)
```

この場合はglobal文がなくてもprint(name)で呼び出されるnameグローバル変数となる
```Python
def hoge2():
    print(name)

name = 'Yamamoto'
hoge2()

```
【IBM Application Gateway】IBM Cloud Monitoring with Sysdig で、ワーカースレッド数を監視してみる

# はじめに
以前の記事 [【IBM Application Gateway】IBM Cloud Monitoring with Sysdig に統計情報を送信する](https://qiita.com/fitz/items/4f04ba404abcce032436)で、IBM ApplicationGatewayの統計情報を送信する機能を構成しました。

実環境での監視をイメージして、IBM Application Gatewayのワーカースレッド数を監視する方法について試してみました。

- IBM Cloud Monitoring with Sysdig 通知設定
- IBM Cloud Monitoring with Sysdig アラート設定
- ワーカースレッド数が閾値を超えたときの通知確認


# 1.IBM Cloud Monitoring with sysdig 通知設定
[IBM Cloud Monitoring](https://cloud.ibm.com/catalog/services/ibm-cloud-monitoring) を開きます。

Profile-Setting-Notification Channelsで通知設定を新規作成します。
今回はメール通知するように設定しました。

![qiita (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/02771577-7032-ad2e-bcb3-5d00b8819695.png)


# 2.IBM Cloud Monitoring with Sysdig アラート設定

ワーカースレッドが枯渇したときに検知できるようにアラート設定をしていきます。
今回は、負荷生成上、アクティブなワーカースレッド数が1を超えたらアラート通知するという設定を行いました。

プロジェクト iag-ishikawa-statsd にiagという名前で始まるPodが2つデプロイされている状態です。
```
iag-5-69g8v    1/1     Running     0          90m
iag-5-n8d8t    1/1     Running     0          90m
```

Exploreで対象のプロジェクトを選択すると、アラート登録のためのアイコン（赤枠部分）が表示されます。
クリックして、アラートを作成します。
![qiita (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/3727fb08-8122-f9ac-d903-b18fff4ab4e1.png)

Metricを選択します。
 ![qiita (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/2548d7c3-0301-4ef0-a018-6ca713becd7a.png)

以下のような上限でアラート設定を定義しました、
- Severityはhighとする。
- アクティブなワーカースレッド数を示す iag.threads.active の最大値が1を超えたらという条件を設定する。
- ScopeでContainer.nameでPodの名称（iag）を含むという条件を指定する。

なお、コンテナ名を含めることで、同じプロジェクト内に複数のアプリケーションをデプロイしても、それぞれ監視設定を行えると思います。

![qiita (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/000b2136-45b7-a4bd-91ab-9e61d5869d4b.png)

通知設定は登録したメール通知設定を有効にしました。
![qiita (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/747eac60-6fdd-583a-9996-8c8cce454a98.png)

その他の設定はデフォルトのままアラートを保存すると登録完了です。
![qiita (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/04a82781-0915-065b-64ff-7e7de4b6e9fe.png)


# 3.ワーカースレッド数が閾値を超えたときの通知確認

負荷生成して、ワーカースレッド数を1を超える値になるようにします。
![qiita (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/b25c9356-2a7e-32e7-fa2a-b168a1c4c965.png)

無事にメール通知が行われました。
![qiita (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/8c4459c6-1b38-6538-7095-d76420ed1108.png)


IBM Cloud Monitoring with Sysdig のアラート画面でもアラームのようなアイコンが表示されて、アラートがあがったことを確認できました。
![qiita (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678692/56e28189-2a12-f9bc-e34a-31202e142925.png)

# 最後に
IBM Cloud Monitoring with Sysdig で、ワーカースレッド数の監視を行ってみました。
【AWS】CloudTrailログをAthenaで分析してみました

# はじめに
今回はCloudTrailに保管しているS3オブジェクトを、Athenaで分析してみました。
個人的にはじめてAthenaを使ってみたので、備忘録として記録しておきたいです。

事前準備としては、
・CloudTrailを有効化し、ログをS3バケットに保管するよう設定します。
・Athena用のS3を作っておきます。S3作成後に、Athena設定画面の「クエリの結果と暗号化の設定」で当S3を指定します。

# １．AthenaのDB作成
使ったコマンドは下記です。
```sql
CREATE DATABASE myathenadbtest
```
このような感じで、DBを作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/865613/b46fd0c2-b5c1-a14c-5e11-159bad3eb368.png)

作成完了後に、データベースを上記で作った``myathenadbtest``を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/865613/90972061-f5ce-59cc-8afd-2254a0021a18.png)


# ２．テーブルの作成
AWS公式サイトが提供していただいたテーブルテンプレートに準じて、作成しておきます。
公式サイトのURLは最後の参考資料にご覧ください。
```sql
CREATE EXTERNAL TABLE cloudtrail_logs (
eventversion STRING,
useridentity STRUCT<
               type:STRING,
               principalid:STRING,
               arn:STRING,
               accountid:STRING,
               invokedby:STRING,
               accesskeyid:STRING,
               userName:STRING,
sessioncontext:STRUCT<
attributes:STRUCT<
               mfaauthenticated:STRING,
               creationdate:STRING>,
sessionissuer:STRUCT<  
               type:STRING,
               principalId:STRING,
               arn:STRING, 
               accountId:STRING,
               userName:STRING>>>,
eventtime STRING,
eventsource STRING,
eventname STRING,
awsregion STRING,
sourceipaddress STRING,
useragent STRING,
errorcode STRING,
errormessage STRING,
requestparameters STRING,
responseelements STRING,
additionaleventdata STRING,
requestid STRING,
eventid STRING,
resources ARRAY<STRUCT<
               ARN:STRING,
               accountId:STRING,
               type:STRING>>,
eventtype STRING,
apiversion STRING,
readonly STRING,
recipientaccountid STRING,
serviceeventdetails STRING,
sharedeventid STRING
)
ROW FORMAT SERDE 'com.amazon.emr.hive.serde.CloudTrailSerde'
STORED AS INPUTFORMAT 'com.amazon.emr.cloudtrail.CloudTrailInputFormat'
OUTPUTFORMAT 'org.apache.hadoop.hive.ql.io.HiveIgnoreKeyTextOutputFormat'
LOCATION 's3://CloudTrail_bucket_name/AWSLogs/Account_ID/CloudTrail/';
```
ここで注意していただきたいのは、公式サイト上に提供しているSQL文に、パーティション化しているので、私はその行を削除しました。
```sql
PARTITIONED BY (region string, year string, month string, day string)
```
上記修正完了後に実行ボタンを押下してください。
実行完了後に、左側のテーブルに定義していた``cloudtrail_logs``が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/865613/5e7deb35-e40c-2c9b-077d-5dd975fa50ee.png)

# ３．クエリをかけて分析
以下のクエリを流して、ログが吐き出されているかを確認します。
```sql
SELECT
 useridentity.arn,
 eventname,
 sourceipaddress,
 eventtime
FROM cloudtrail_logs
LIMIT 100;
```
以下のように、CloudTrailのログが検索できていることを確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/865613/72fecdd9-8356-42c9-04e0-fb3399ce03bc.png)

# 参考資料：

https://docs.aws.amazon.com/athena/latest/ug/cloudtrail-logs.html
GitLab と Vercel の連携

こちらのページを参考にしました。
[Automatic Deployments with Vercel for GitLab](https://vercel.com/guides/getting-started-with-vercel-for-gitlab)

ローカルのファイル

```text
$ tree
.
├── README.md
├── go_upload.sh
├── index.html
└── jsx01.js
```

GitLab へアップロード

```bash:go_upload.sh
git add --all
git commit -m "Commit on May/12/2022 PM 15:00"
git push
```

GitLab の様子
![vercel01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/c8775f43-7a59-7cdd-bba3-54d830786442.png)

Vercel の様子
![vercel02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/3abf7f26-285c-7a86-4e3b-9895669a8016.png)

Visit をクリック
![vercel03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0defd508-71eb-8bd1-e77d-003a52f1ac9e.png)
MySQL group対象値の大文字小文字を区別する

# 前提データ
blacklistsというテーブルにkeywordというカラムがあるだけのシンプルなテーブルを想定します。
この中に大文字小文字3バリエーションのテストがそれぞれ登録されているとしますます。
- test->2行
- Test->2行
- TEST->1行

テーブル名: blacklists
|id|keyword|
|:--|:--|
|1|test|
|2|test|
|3|Test|
|4|TEST|
|5|Test|

# やりたいこと
以下のようなデータが欲しい！
|id|keyword|count|
|:--|:--|:--|
|1|test|2|
|3|Test|2|
|4|TEST|1|

# もちろんgroupする
上のようなデータが欲しい場合はもちろんgroupしますよね。
easy:v:
```sql
select id, keyword, count(id) keyword_count
from blacklists
group by keyword
having keyword_count> 1
```
【結果】

|id|keyword|count|
|:--|:--|:--|
|1|test|5|

ん？

...ああ大文字と小文字って区別されないんだ。

# 対策
「binary」をつける
https://dev.mysql.com/doc/refman/5.6/ja/charset-binary-op.html

```sql
select id, keyword, count(id) keyword_count
from blacklists
group by binary keyword
having keyword_count> 1
```

【結果】
|id|keyword|count|
|:--|:--|:--|
|1|test|2|
|3|Test|2|
|4|TEST|1|

easy:v:

# 余談
whereするときももちろん有効です。

```sql
select *
from blacklists
where keyword = binary 'test';
```

と

```sql
select *
from blacklists
where keyword = 'test';
```

ではもちろん結果が変わってきます。
B - Iron Bar Cutting AtCoder

## 問題
https://atcoder.jp/contests/ddcc2020-qual/tasks/ddcc2020_qual_b

## 回答

```
n = int(input())
a = list(map(int, input().split()))
yen = 0
a_sum = sum(a) #累積和
ans = 99999999999999999 #累積和
for i in range(n):
    yen += a[i] # 1回目はa[0]を足し、2回目はa[0]とa[1]をたす、、と足していく。累積和。
    a_sum -= a[i] #1回目はa[0]をひく、2回目はa[0]とa[1]を足したものをひく、、と引いていく。累積和。
    ans = min(ans, abs(yen - a_sum)) #絶対値との差

print(ans)
```

## ポイント
累計和の問題。
【PHP】phpのコールバック関数、無名関数なぐり書き

# コード
```PHP
<?php
$before = [
    'user1' => 15,
    'user2' => 3,
    'user3' => 20,
    'user4' => 8,
    'user5' => 5
];
$result = check_array($before,function($v){
  return $v % 3 === 0; 
});

function check_array($before,$callback){
    $after = [];
    foreach ($before as $key => $v){
        if($callback($v)){
            $after[$key] = $v;
        }
    }
    return $after;
}
var_dump($result);
```

# 結果
```
array(2) {
  ["user1"]=>
  int(15)
  ["user2"]=>
  int(3)
}
```
Vue3 チュートリアル まとめページ

このページはVue3のチュートリアルの説明と、各リンクをまとめてます。

## チュートリアルについて

本チュートリアルで学ぶ範囲は以下の通りです：

- [Vue](https://vuejs.org/)
    - テンプレート
    - フォーム
    - ディレクティブ
    - シングルファイルコンポーネント
    - ライフサイクルフック
- [Vue Router](https://router.vuejs.org/)
    - ナビゲーション
    - ダイナミックルーティング
    - ナビゲーションガード
- [Pinia](https://pinia.vuejs.org/)
    - グローバルステート
    - ステート
    - ゲッター
    - アクション
- テスト環境
    - テスト駆動開発
    - Vitest
    - Testing Library
    - Mock Service Worker
    - Prism

本チュートアリアルで学ばない範囲は以下のとおりです：

- HTML
- CSS
- JavaScript

HTML/CSS/JavaScriptについては良質なガイドがたくさんあるので、そちらを参考にしてください。

https://developer.mozilla.org/ja/docs/Web/Guide

https://developer.mozilla.org/ja/docs/Web/Tutorials

## コンテンツ

コンテンツは少しずつ公開していく予定です：

https://qiita.com/TakahiRoyte/private/5afc644b21fe4f79f891

https://qiita.com/TakahiRoyte/private/bd2496ccf181610dc072

https://qiita.com/TakahiRoyte/private/a9aac2f069b99f3378c7

https://qiita.com/TakahiRoyte/private/5230b7b3685e0ab3756d

https://qiita.com/TakahiRoyte/private/231aa3ac3aacbe25ebeb

https://qiita.com/TakahiRoyte/private/ee0cb0212e9d88a88292

https://qiita.com/TakahiRoyte/private/b09476670a91f1daa93d

https://qiita.com/TakahiRoyte/items/bb054ee83648537dcd9c
【AWS】EFSをEC2（Amazon Linux）にマウントする

# １．EC2 と EFS の準備
EC2 は Amazon Linux 2 をあらかじめ構築しておいてください。
本手順は構築過程を省略します。

# ２．EFS を EC2 にマウントする
使うコマンドは以下です。
```
#amazon-efs-utils ツールのインストール
$ sudo yum install -y amazon-efs-utils

#マウントポイントの作成
$ sudo mkdir efs

#EFS マウントヘルパーの使用してマウントする
$ sudo mount -t efs -o tls fs-XXXXXXXXX:/ efs

```

# ３．マウント後の確認
マウントできていることを確認できました。
```
[ec2-user@ip-172-31-16-138 ~]$ df -T
Filesystem     Type            1K-blocks    Used        Available Use% Mounted on
devtmpfs       devtmpfs           485340       0           485340   0% /dev
tmpfs          tmpfs              493848       0           493848   0% /dev/shm
tmpfs          tmpfs              493848     496           493352   1% /run
tmpfs          tmpfs              493848       0           493848   0% /sys/fs/cgroup
/dev/xvda1     xfs               8376300 1610376          6765924  20% /
tmpfs          tmpfs               98772       0            98772   0% /run/user/0
127.0.0.1:/    nfs4     9007199254739968       0 9007199254739968   0% /home/ec2-user/efs
[ec2-user@ip-172-31-16-138 ~]$ cd efs/
[ec2-user@ip-172-31-16-138 efs]$ sudo touch test.txt
[ec2-user@ip-172-31-16-138 efs]$ ls
test.txt
```
javaScriptでの配列コピーのいろいろなパターン

# はじめに
javaScriptでの配列のコピーのしかたについてまとめましたφ(・ω・ )
理由は自分が多次元配列をコピーしようとしたときに、どうしても参照渡しになってしまったからです(´+ω+｀)
「配列　コピー」で調べても、多次元配列のコピーについて言及されているものが出てこなかったので、
「配列　コピー」で調べた人も多次元配列のコピーの方法にたどり着けるように、ここにまとめましたφ(・ω・ )

# 目次
1. 参照渡し
1. 値渡し
1. 多次元配列の値渡し
1. まとめ

# 1.参照渡し
例えば下記のように配列をコピーするとφ(・ω・ )
```
const listA = [1,2,3]
const listB = listA
console.log(listA) //[1, 2, 3]
console.log(listB) //[1, 2, 3]
```
下記を追記するとφ(・ω・ )
```
listB[0] = 80
console.log(listA) //[80, 2, 3]
console.log(listB) //[80, 2, 3]
```
このようにlistBの値を変更しただけなのに、listAの中身も変更されてしまいます。
これはlistBがlistAと同じところを参照しているからです＿φ(．．)
# 2.値渡し
配列の値渡しのパターンはいろいろあるようですが、
ここでは4パターン紹介しますφ(・ω・ )
## slice
```
const listA = [1,2,3]
const listB = listA.slice()
console.log(listA) //[1, 2, 3]
console.log(listB) //[1, 2, 3]
```
下記を追記するとφ(・ω・ )
```
listB[0] = 80
console.log(listA) //[1, 2, 3]
console.log(listB) //[80, 2, 3]
```
これなら参照渡しにならず、新たな配列として値を渡せますφ(・ω・ )
## concat
```
const listA = [1,2,3]
const listB = listA.concat()
console.log(listA) //[1, 2, 3]
console.log(listB) //[1, 2, 3]
```
下記を追記するとφ(・ω・ )
```
listB[0] = 80
console.log(listA) //[1, 2, 3]
console.log(listB) //[80, 2, 3]
```
先ほどのsliceと同じ結果が得られますφ(・ω・ )
concatは配列と配列をくっつけるメソッドなので、
引数に何か配列が入っていたら配列と配列ががっしゃんこして出てきますφ(・ω・ )
```:こんな感じ
const listC = listA.concat(listB)
console.log(listC) //[1, 2, 3, 80, 2, 3]
```
## Array.from
```
const listA = [1,2,3]
const listB = Array.from(listA)
console.log(listA) //[1, 2, 3]
console.log(listB) //[1, 2, 3]
```
下記を追記するとφ(・ω・ )
```
listB[0] = 80
console.log(listA) //[1, 2, 3]
console.log(listB) //[80, 2, 3]
```
sliceのときと結果は同じですねφ(・ω・ )
## スプレッド構文
```
const listA = [1,2,3]
const listB = [...listA]
console.log(listA) //[1, 2, 3]
console.log(listB) //[1, 2, 3]
```
下記を追記するとφ(・ω・ )
```
listB[0] = 80
console.log(listA) //[1, 2, 3]
console.log(listB) //[80, 2, 3]
```
これもsliceのときと結果は同じですφ(・ω・ )
# 3.多次元配列の値渡し
ここは引っかかりポイントです(´+ω+｀)
まず下記をご覧ください(´+ω+｀)
```
const listA = [[1,2,3],[1,2,3]]
const listB = listA.slice()
console.log(listA) //[[1,2,3],[1,2,3]]
console.log(listB) //[[1,2,3],[1,2,3]]
```
下記を追記するとφ(・ω・ )
```
listB[2] = 80
console.log(listA) //[[1,2,3],[1,2,3]]
console.log(listB) //[[1,2,3],[1,2,3],80]
```
さらに下記を追記するとφ(・ω・ )
```
listB[0][0] = 80
console.log(listA) //[[80,2,3],[1,2,3]]
console.log(listB) //[[80,2,3],[1,2,3],80]
```
このような結果になりますφ(・ω・ )
つまり、先ほどの４つのどのパターンで多次元配列を値渡ししようとしても、
ネストされた配列は参照渡しになってしまうのです(´+ω+｀)
まいったまいった(´+ω+｀)
## JSON.parse(JSON.stringify())
ここで活躍するのがJSON.parseですφ(・ω・ )
```
const listA = [[1,2,3],[1,2,3]]
const listB = JSON.parse(JSON.stringify(listA))
// console.log(listA)
// console.log(listB)
```
さらに下記を追記するとφ(・ω・ )
```
listB[0][0] = 80
console.log(listA) //[[1,2,3],[1,2,3]]
console.log(listB) //[[80,2,3],[1,2,3]]
```
ちゃんと値渡しすることができました(｀・∀・´)ﾉ！！
# 4.まとめ
コピーの結果が変わってくるのは参照するところが変わるからで、
これを浅いコピーと深いコピーの違いというそうですφ(・ω・ )
ここにはその辺りの詳細は書きませんので、気になる方は調べてみてくださいφ(・ω・ )
以上、javaScriptでの配列コピーのいろいろなやり方でした　ε=ε=┏( ・＿・)┛
Next.js の使い方

こちらの React のプログラムを Next.js に変換します。
[React の使い方 (その3)](https://qiita.com/ekzemplaro/items/11a66ee54fb5ed9578a0)
こちらのページを参考にしました。
[Getting Started with Next.js](https://nextjs.org/learn/foundations/from-react-to-nextjs/getting-started-with-nextjs)

## フォルダーに package.json だけを用意します。 ##

```text
$ tree
.
└── package.json
```

```json:package.json
{}
```

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

```bash
npm install react react-dom next
```

フォルダーは次のようになります。

```text
$ tree -L 2
.
├── node_modules
│   ├── @next
│   ├── caniuse-lite
│   ├── js-tokens
│   ├── loose-envify
│   ├── nanoid
│   ├── next
│   ├── picocolors
│   ├── postcss
│   ├── react
│   ├── react-dom
│   ├── scheduler
│   ├── source-map-js
│   └── styled-jsx
├── package-lock.json
└── package.json
```

```json:package.json
{
  "dependencies": {
    "next": "^12.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
```

## プログラムと実行環境の用意 ##

pages というフォルダーを作成

```bash
mkdir pages
```

次を作成します。

```js:pages/index.js


import { useState } from 'react';
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}

export default function HomePage() {
  const names = ['夏目漱石', '島崎藤村', '森鴎外','芥川龍之介','太宰治']

  const [likes, setLikes] = useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      <Header title="こんにちは" />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  );
}
```

package.json の改造

```json:package.json
{
"scripts": {
        "dev": "next dev",
	"build": "next build",
	"start": "next start",
	"export": "next export"
    },
  "dependencies": {
    "next": "^12.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
```

## サーバーの起動　##

```bash
npm run dev
```

## ブラウザーでアクセス ##

http://localhost:3000
![nextjs_may1201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/e44d0a02-3ed6-487e-4dec-e21b4f5916cc.png)

次のバージョンで確認しました。

```text
$ node --version 
v18.4.0
$ npm --version
8.10.0
```

## Production Build ##

```bash
npm run build
```

サーバーの実行

```bash
npm run start
```

## Vercel 以外にデプロイ ##

```bash
npm run build
npm run export
```

サーバーの実行 （4種類のサーバーを使ってみます。）

```bash
serve -s out
```

```bash
cd out
http-server
```

```bash
cd out
python -m http.server
```

```bash
php -S 0.0.0.0:8000 -t out
```
JetpackComposeでpreview modeかどうかの判定方法


kotlinでソースを書いてると、
Activity参照とかで表示できなくなるときに
以下のif文が便利。


```kotlin
@Composable
fun Greeting(name: String) {
	//Previewモードでないとき
	if(!LocalInspectionMode.current) {

	}
}

```
何年もサーバを起動状態で放っておいたらポート枯渇してFTP接続ができなくなった件

# はじめに
本記事はインフラエンジニア歴6年の低意識へっぽこエンジニアが
エラーと戦った努力跡です。

つよつよエンジニアの皆様からは
そんなん知っとるわ！と言われる気がしてなりませんが

**アウトプットが大事だよ！(キラキラ)**

という言葉を意識高い友人エンジニアの助言を受け、投稿した次第です。
恥ずかしくなったら消します。

# 事態
あるWindows Serverへ定期的にFTP接続し、ファイルをPUTする処理がある。

その処理がここ数か月、かなりの高確率でtimeoutを検知するようになった。

何度も接続を試すと成功する事が多く、
ごまかしごまかし運用していた。

条件は同じはずなのに、
何故かうまくいくときといかないときがある。

以前いた運用者は本エラーを「気のせい」で片づけていたが、
その頃よりも明らかに悪化しているため改めて調査をしなおした。

# 調査したこと

とりあえずFTP接続処理を実行。
やはりうまくいく時といかない時がある事を確認。

PASSIVEで接続する要件のため、
もしかして特定のポートがバッティングとかしているのかも？と思い
コマンドプロンプトから「netstat -nao」を打つとTIME_WAITが死ぬほどでる。

TIME_WAITについて調べていくうちに、以下にたどり着く。

`TIME_WAIT：設定次第だが基本数分経てばコネクションはクローズされ、ポート開放される`

**されてへんやんけ**

# 何かがおかしい

ググった記事を頼りにTIME_WAITがいつクローズされるか設定を確認するも、
特段設定はされておらず、デフォルトのままっぽい事を確認。

~~なら数分でポート開放されるんちゃうんけ~~

ググっていた中に、497日問題ってワードを見つける。
以前、OS運用部隊にいたときにサーバを連続稼働させすぎてトラブルとかあったんだよって話を思い出す。

**あれ、このサーバいつ再起動したっけ**

コマンドプロンプトから「systeminfo」で直近のOS起動日を確認すると数年前・・・！
数年前ってあんた。。。

# 働かせすぎてごめんね。。。

速攻OS再起動を実施。

netstat打ってもTIME_WAITが表示されなくなった！やった！
FTP接続しまくってもTIME_WAITも増えないし、接続もちゃんとできる。

これにて復旧。

# 教訓
人もサーバも働かせすぎたら壊れる
Flowで追加したレコードを使う方法

[Flowに関するまとめページに戻る](https://qiita.com/Keiji_otsubo/items/55ebc9c634a3216f3990)


![手動で変数を割り当てる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/c86a7a49-1ff8-3de7-bd91-0f934190093c.png)



https://developer.salesforce.com/forums/?id=9062I000000DJaHQAW
LaTeXでテーブルを中央に配置する

boxに入れて中央に配置することで解決します．

```latex
\begin{table}
  \caption{Here is the caption}
  \label{tab:label}
  \makebox[1 \textwidth][c]{
    % \resizebox{1.3 \textwidth}{!}{   % 必要ならコメントアウトを外してリサイズする
      \begin{tabular}{lc}
        \toprule
        A & B \\
        \midrule
        C & D \\
        E & F \\
        \bottomrule
      \end{tabular}
    }
  }
\end{table}
```
xcodegenの使い方（その二：各設定）


# bundleID

ルートに下記コード:

```
options:
  bundleIdPrefix: com.yourdomain
```

# deploymentTarget

```
options:
  deploymentTarget:
    iOS: 14.1
```


> 注意：同じoptionsの下にある場合一個のoptionsにまとめる

例として：

```
options:
  deploymentTarget:
    iOS: 14.1
  bundleIdPrefix: com.yourdomain
```


# プロジェクト内のターゲット

```
targets:
  <your_target_name>:
    type: application
    platform: iOS
    sources:
      - <your_folder_path>
```

以上
PaizaCloudでの、Laravelプロジェクト作成

PaizaCloudでのLaravelプロジェクト作成で気になったことがあったので、共有します。

# welcomeページ（welcome.blade.php）の記述
新しく、プロジェクトを作ると、welcomeページのファイルが作られると思いますが、
その中に、プレビュー表示させたときのLaravelの文字の部分のHTMLがあると思いますが、
この部分です。
```
<div class="title m-b-md">
            Hello Laravel on PaizaCloud!
</div>
```
作成した環境にもよりますが、このコードが見当たらないことがあります。

ページがちゃんと表示されない環境でないとこのコードはないのでしょうか？
追記（5/13）
Laravelのバージョンの違いでした。
PaizaCloudの使い方の指示では、composer create-project laravel/laravel myapp --prefer-distと書いてあって、バージョンは8系。ドキュメント（ver.6系）で作成すると、上記のHTMLが表示されます。

# PaizaCloudの使い方通りにやっても
使い方通りにやっても、ポート8000で正常に表示できないとだめなんでしょうか？
追記（5/15）
社内LANで表示されないだけでした。家では表示されました。

よくわかりません。

皆さんはどう思うでしょうか？
React の使い方 (その3)

こちらのページを参考にしました。
[Adding Interactivity with State](https://nextjs.org/learn/foundations/from-javascript-to-react/adding-interactivity-with-state)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">
</head>
<body>
Hello World!<br />
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx" src="jsx01.js"></script>
May/12/2022 PM 13:25<br />
</body>
</html>
```

```js:jsx01.js
// ---------------------------------------------------------------
//
//	jsx01.js
//
//						May/12/2022
//
// ---------------------------------------------------------------
const app = document.getElementById('app')
function Header(props) {
	console.log(props.title)
     return <h1>{props.title}</h1>
   }

function HomePage() {
const [likes, setLikes] = React.useState(0)
	const names = ['夏目漱石', '島崎藤村', '森鴎外']

function handleClick() {
    console.log("increment like count")
	setLikes(likes+1)
  }

  return (
	<div>
	<Header title="こんにちは" />
	<ul>
        	{names.map((name) => (
	          <li key={name}>{name}</li>
       		))}
	</ul>

	<button onClick={handleClick}>Like({likes})</button>
	</div>
	)
}

const root = ReactDOM.createRoot(app)
root.render(<HomePage />)
//
// ---------------------------------------------------------------
```

ブラウザーでアクセスした結果
![react_may11_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/20de644f-590a-7797-3aba-cf46c2dc50e1.png)
dockerでphp, mysql環境作成時のはまりポイント

## apache2 で mod_rewriteを有効に

* `.htaccess`でmod_rewriteを利用しようとしたら有効になっていなかった。

```sh
# 以下コマンドで読み込まれているモジュール一覧を確認できる。
apache2ctl -M
```

/etc/apache2/mods-available/rewrite.load をコピーしてきて
/etc/apache2/mods-enabled/rewrite.load に置けば動く。



## php用のpdo mysqlライブラリの生成

```sh
# 生成
docker-php-ext-install pdo_mysql

# 以下にpdo_mysql.soが生成されている。(php 5.6の場合)
ls /usr/local/lib/php/extensions/no-debug-non-zts-20131226/
```

## php.ini

```sh
# error_logをdocker logコマンドで確認できるように
log_errors = On
error_log = /dev/stderr
error_reporting = E_ALL

# timezone
date.timezone = "Asia/Tokyo"

# extension
extension=pdo_mysql.so
```


## mysql コマンドで文字コード指定

```sh
mysql --default-character-set=utf8 -uroot -proot
```

## mysqlのクエリログを出力する

```sql
show variables like 'general_log%';

set global general_log = on;
```


## 起動方法

```yaml:docker-compose.yml
version: '3'
services:

  app:
    image: php:5.6-apache
    volumes:
      - ./www:/var/www/html
      - ./files/rewrite.load:/etc/apache2/mods-enabled/rewrite.load
      - ./files/php.ini:/usr/local/etc/php/php.ini
      - ./files/000-default.conf:/etc/apache2/sites-available/000-default.conf
      - ./files/no-debug-non-zts-20131226/:/usr/local/lib/php/extensions/no-debug-non-zts-20131226/
    ports:
      - 80:80

  mysql:
    image: mysql
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    environment:
      - MYSQL_ROOT_PASSWORD=root
    ports:
      - 3306:3306
    volumes:
      - ./mysql:/var/lib/mysql
```


----


## postgresql用

* phpコンテナから以下実施

```sh
apt install postgresql-server-dev-all

docker-php-ext-install pdo_pgsql

tar czf /pdo_pgsql.tar.gz \
  /usr/src/php/ext/pdo_pgsql/ \
  /usr/local/etc/php/conf.d/docker-php-ext-pdo_pgsql.ini \
  /usr/lib/x86_64-linux-gnu/libpq.so.5 \
  /usr/lib/x86_64-linux-gnu/libpq.so.5.9 \
```


なお `/usr/local/etc/php/conf.d/docker-php-ext-pdo_pgsql.ini` には
`extension=pdo_pgsql.so` が記述されている。
Latexで複数の参考文献 (reference) セクションを作成する

# はじめに

Latexで論文を書くときに本文とAppendixの両方に独立した参考文献セクションを付けたいとします．
そのようなときに必要な情報を軽くまとめます．
なお，「[Multiple bibliographies in LaTeX](https://www.andrewgclark.info/posts/2020-06-24_multiple_bibliographies_latex/)」を参照しました．

# コード

まず，適当に bibファイルを作ります．
```bibtex:ref.bib
@misc{A:2015,
  author = {Alpha, A.},
  year = {2015},
  title = {Title A},
}
@misc{B:2017,
  author = {Beta, B.},
  year = {2017},
  title = {Title B},
}
@misc{C:2019,
  author = {Charlie, C.},
  year = {2019},
  title = {Title C},
}
@misc{D:2020,
  author = {Delta, D.},
  year = {2020},
  title = {Title D},
}
```

適当に引用を付けた文書を作成します．
ここで `\newcites{参考文献スタイル名}{参考文献セクションに表示する文字列}` によって新しい参考文献セクションスタイルを定義します．
`\cite` ではメインの参考文献セクションから，`\cite<参考文献スタイル名>` で別途定義された参考文献セクションに引用を作成します．
以下のコードでは `\citeappx` によって2つ目の参考文献セクションから引用を行います．
最後に参考文献セクションの出力場所において，`\bibliographystyle<参考文献スタイル名>{スタイルファイル名}` と `\bibliography<参考文献スタイル名>{bibtexファイル名}`を宣言します．


```latex:main.tex
\documentclass{article}
\usepackage{multibib}
\newcites{appx}{References}

\begin{document}

\section*{Main Text}
Method A~\cite{A:2015} is stronger than Method B~\cite{B:2017}.

\bibliographystyle{plain}
\bibliography{ref}

\section*{Appendix}
We add the information of Methods C, D~\citeappx{C:2019,D:2020} along with Method A~\cite{A:2015}.

\bibliographystyleappx{plain}
\bibliographyappx{ref}

\end{document}
```

このようにして作成したファイルを以下のようにコンパイルを実行します．
ただし， `pbibtex appx` というように第二の参考文献用の bibtexは別途コンパイルする必要があることに注意してください．
```shell
pdflatex main.tex
pbibtex main
pbibtex appx
pdflatex main.tex
pdflatex main.tex
```

以下のようなコンパイル結果が得られます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355593/bc3d0088-b737-9ab2-e6ff-c4d0c4437921.png)
React で SSG して Vercel で gh-pages ブランチを配信する方法（Puppeteer の Error: Failed to launch chrome! というエラーに対応する）

## 概要
`FRAMEWORK PRESET` を `Other` に、`BUILD COMMAND` と `INSTALL COMMAND` は `:` （何もしないコマンド）にしてプロジェクトを作成し `Production Branch` を `gh-pages` にする。

※Vercel 上で Puppeteer を動かす方法ではありません。

## 事の起こり

React で作成したアプリ(SPA)を Vercel で配信しようとしたところ、「Error: Failed to launch chrome!」というエラーが出てしまいました。どうやらサーバー側で yarn build を実行しようとしたところ、chrome が起動できなかったようです。

```
[05:24:30.478] $ react-snap ; cp -R assets/ dist/
[05:24:30.988] Error: Failed to launch chrome!
[05:24:30.988] [0427/202430.981852:ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.
[05:24:30.988] 
[05:24:30.988] 
[05:24:30.988] TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
[05:24:30.988] 
[05:24:30.989]     at onClose (/vercel/path0/node_modules/puppeteer/lib/Launcher.js:348:14)
[05:24:30.989]     at Interface.<anonymous> (/vercel/path0/node_modules/puppeteer/lib/Launcher.js:337:50)
[05:24:30.989]     at Interface.emit (events.js:412:35)
[05:24:30.989]     at Interface.close (readline.js:530:8)
[05:24:30.989]     at Socket.onend (readline.js:254:10)
[05:24:30.989]     at Socket.emit (events.js:412:35)
[05:24:30.989]     at endReadableNT (internal/streams/readable.js:1334:12)
[05:24:30.989]     at processTicksAndRejections (internal/process/task_queues.js:82:21)
[05:24:30.994] Done in 7.02s.
[05:24:31.007] Error: No Output Directory named "public" found after the Build completed. You can configure the Output Directory in your Project Settings. Learn More: https://vercel.link/missing-public-directory
```

これは、↓の記事に従って react-snap でサイト全体を SSG (Static Site Generation) して配信しようとしていたことが原因のようでした。react-snap では Puppeteer を使用しているようですが、その Puppeteer が chrome を起動しようとしているようです。

https://qiita.com/sensuikan1973/items/70a8d954f24e89156d15

## 解決方法

解決方法は色々とあると思いますが、そもそもの話として、React というのは yarn build したファイルをサーバーで配信すれば済む話だったはずですので、今回はその方法を試したいと思います。 

まず、 gh-pages パッケージを導入して github にビルド済みのファイルをアップロードします。`dist/` ディレクトリにビルドしたファイルを配置する場合は以下のようなコマンドになります。

```bash
yarn add -D gh-pages
yarn build && yarn gh-pages -d dist/
```

そしたら Vercel で新しいプロジェクトを作成して、 `FRAMEWORK PRESET` を `Other` に、`BUILD COMMAND` と `INSTALL COMMAND` は何もしなくてよいので `:` に、`OUTPUT DIRECTORY` は `.` にしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/d89884bd-68e4-2137-124c-14f8cda7baab.png)

この状態で Deploy を押すと一旦 master (main) ブランチがデプロイされますが、index.html が無いので 404 となります。

## Production Branch の変更

配信したいのは master (main) ブランチではなく gh-pages ブランチなので、 `Project Settings → Git → Production Branch` と移動して、 `BRANCH NAME` を `gh-pages` に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/3c07c17b-a83b-f962-40df-9a11ecb1bbcd.png)

## デプロイの実行

Vercel は github にブランチを push したタイミングでデプロイがトリガされるようなので、再度 gh-pages ブランチを push します。

```bash
yarn build && yarn gh-pages -d dist/
```

するとビルドが実行されてファイルが配信されます。Vercel を使用しているので、 `/` 以外の URL にアクセスしてもページが表示されるようになっているはずです。また、カスタムドメインを指定している場合は自動でそのドメインにも配信されるはずです。お疲れ様でした！ 何か気になる点などありましたらコメントお願いします。
ゼロトラストのディープダイブ(7)-SSPM(SaaSセキュリティ状態管理)

[前回] [ゼロトラストのディープダイブ(6)-SSE(Security Service Edge)](https://qiita.com/mingchun_zhao/items/c2d76657238d8354462d)

## はじめに

前回まで、クラウド・セキュリティの四つの技術

- SASE(Secure Access Service Edge)
- SSE(Security Service Edge)
- SSPM(SaaS Security Posture Management)
- CNAPP(Cloud Native Application Protection Platforms)

の中から、SASEとSSEを勉強しました。
今回は、SSPM(SaaSセキュリティ状態管理)を勉強します。

## SaaSセキュリティの背景

- テレワーク導入が進み、SaaSアプリケーションの利用が増えた
    - SaaS(Software as a Service: サース)とは
        - インターネット経由のソフトウェア提供形態で、必要な機能を必要な分だけサービスとして利用できる
    - SaaSの例
        - Web会議システム
        - チャットツール
        - オンラインストレージ
- SaaSで機密データを扱うには、高度なセキュリティが求められる
    - SaaSアプリケーションから情報流出などインシデント発生
- インシデントの原因は二つ
    - サービス提供者: SaaSアプリケーションの脆弱性
    - サービス利用者: アクセス権限の設定不備による情報漏洩

## クラウドセキュリティの責任共有モデル

- セキュリティ設定の適切な実施/監視は、サービス利用者の責任
    - 全体のグローバル設定
    - 個々のユーザーロールと権限設定
- SaaS管理者による設定ミスや誤ったレポート共有などが情報漏洩の元
    - セキュリティ担当者は、アプリケーション/ユーザー/設定を把握し
    - 業界/企業のポリシーに準拠しているか確認する必要あり

## 現状、SaaSセキュリティ対策の問題点

- 大量のセキュリティ設定/アクセス権限の把握に、手間や負担が大きい
- SaaSアプリケーション設定が可視化されず、把握が難しい
- 進化が速く複雑化するクラウド・セキュリティに対するスキル不足
- SaaSアプリケーションにおける管理能力とガバナンスの欠如

## SSPM(SaaSセキュリティ状態管理)とは

- 定義
    - クラウドの設定不備を監視しセキュリティ状態を管理するソリューション
    - SaaSアプリケーションのセキュリティリスクを継続的に評価
- 目的
    - 脆弱性がサイバー攻撃に利用される前に、設定不備に気付き迅速に対処
    - 設定ミスを監査し、コンプライアンスに準拠しているか継続的にチェック
- 機能要点
    - モニタリング
    - アラート
    - 修復

## SSPMに求められる機能

- SaaSセキュリティ設定を詳細レベルで可視化
    - セキュリティ・チェックによりリスク領域を減らす観点から、SaaS環境の設定状況を把握
    - 設定に関する詳細情報を提供し、モニタリング/アラートを実施可能にする
    - ネイティブSaaSセキュリティ設定に関するレポート機能
- セキュリティ設定の継続的な監視と修復
    - 設定不備とリスクを継続的に監視
    - リスク軽減策の提案と設定ミスの修復
- SaaSアプリケーションとの統合
    - SSPMとSaaSアプリケーションの統合により、あらゆるタイプの設定ミスをチェック/対応可能
    - 簡単に導入でき、新しいSaaSアプリケーションを監視対象に追加可能
- セキュリティ・チェックの網羅性
    - セキュリティ・チェックの範囲と深さにおける網羅性
    - ドメイン全般に対し、セキュリティリスクを追跡/監視
- アイデンティティ許可の管理
    - 内部ユーザーのアイデンティティとアクセス管理
    - 外部ユーザーのアクセス制御
- プライバシー保護と制御
    - コンプライアンス・ポリシーの策定
    - セキュリティ・フレームワークの導入
    - ベンチマークによるセキュリティ診断

## SSPMが企業にもたらすメリット

- クラウド・セキュリティ障害の元となる構成ミスを継続的にスキャン/排除し、リスク低減
    - 担当者の目視では発見が困難な設定ミスを、機械的に検知可能なソリューションを提供
    - ※ CASB(クラウド・アクセス・セキュリティ・ブローカ)では対応しきれない
        - CASBも、SaaSレイヤーで機密データへのアクセスを保護するが
        - 高度な攻撃や複雑な構成ミスには対応できない
- SaaSセキュリティ体制を可視化し、業界標準や企業ポリシーへの準拠をチェック
    - 一部SSPMソリューションは、複雑化するSaaS設定ミスを自動修正する機能を提供
    - セキュリティ対策効率が大幅に向上し、機密データの保護が可能に

## おわりに

SSPM(SaaSセキュリティ状態管理)の理論について勉強しました。
次回は、クラウド・セキュリティの四つの技術で、残りの
CNAPP(Cloud Native Application Protection Platforms)
を勉強します。お楽しみに。

##### [次回] [ゼロトラストのディープダイブ(8)-CNAPP(クラウドネイティブアプリケーション保護プラットフォーム)](https://qiita.com/mingchun_zhao/items/90942f1cd11063636deb)
Laravel9 + Sail + WSL2 + Ubuntu + VScodeでXdebugが使えない時


# 現象
VScodeでブレークポイントを設定しても止まらない😥
# 構成
* Windows10 Pro
* WSL2
* Ubuntu
* Laravel9
* PHP 8.1.5
* Xdebug v3.1.2

# 解決方法1
VScodeの`launch.json`の設定に、**pathMappings**に加え、**hostname**を追記する
```
{
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            },
            "hostname": "0.0.0.0", // ← これ
        }
    ]
}
```

# 解決方法2
初回のリクエスト時、URL（ブラウザでもAPIでも）に`?XDEBUG_SESSION_START={xxx}`を付加する
※セッションを閉じる場合は**XDEBUG_SESSION_STOP**
```
http://localhost:80/api/user?XDEBUG_SESSION_START=debug
```

# その他設定
まだ使えない場合は、下記を確認👇

①.envに**SAIL_XDEBUG_MODE**が追加されているか
```
SAIL_XDEBUG_MODE=develop,debug
```

②docker-compose.ymlに**XDEBUG_~**の環境変数が設定されているか
※ 最新のLaravel9ではデフォルトで設定
※ 追加した場合は、再度ビルドが必要（`sail build --no-cache`）

```
version: '3'
services:
    laravel.test:
        ~~~
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}' # ← これ
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}' # ← これ
        ~~~
```

# 参考
本当に感謝です🙏
https://blog.shinki.net/posts/xdebug-not-work-docker-wsl
SpringBootでDBUnit 〜@ExpectedDatabase〜

SpringBootでDBのテストを書いています。
アノテーションの属性の意味を忘れないようにメモ。

# @ExpectedDatabase
## value
結果検証用のファイルのパスを記入する。
<br>
## assertionMode
DBと結果検証用のファイルを比較のしかたを指定する属性。
##### DEFAULT（または指定なし）
全てのテーブルとカラムの一致を比較する。
そのため、CSV等を用意したテーブル以外も調査対象となる。

このまま使うと、
```
junit.framework.ComparisonFailure: table count expected:<[3]> but was:<[47]>
```
と言った感じのスタックトレースが出力されてしまう。DB上の全てのテーブルが見られていることがわかる。
そのため、単体テストで用いる場合は以下の２つのどちらかを指定する必要がある。
<br>
##### NON_STRICT
結果検証用のファイルに存在しないテーブル、カラムがあっても無視する。
<br>
##### NON_STRICT_UNORDERED
NON_STRICTに加えて、行の順序についても無視する。
Github Pages "Failed to get remote.origin.url"の対処方法

## エラー内容
Reactの勉強のため[こちらの教材](https://www.techpit.jp/courses/127)でアプリを作成後、Github Pagesにデプロイする箇所で以下のエラーが発生した。
```sh
$ gh-pages -d build
Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option).
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

## 環境
macOS Monterey 12.3.1
react@18.1.0
yarn 1.22.17

## 原因
Githubリポジトリが登録されていなかった。

## 対処方法
Githubでリポジトリ作成
→ ターミナルで`git remote add origin <リポジトリのURL>`を入力
→ 再デプロイ`yarn run deploy`
→ 無事にデプロイ出来ました。

## 参考
https://github.com/tschaub/gh-pages/issues/192
ClamAVにlibcurl.so.4.5.0を削除された問題

/usr/lib64/libcurl.so.4.5.0が消えてしまって、yumも動かない状態に。

```
error while loading shared libraries: libcurl.so.4: cannot open shared object file: No such file or directory
```

# 原因

2021年11月頃に、ClamAVが誤検知を起こした模様。半年も気づいてなかった…。
現在はスキャンしてもlibcurl.so.4.5.0を削除する動きはない。

# 復旧させる

同じバージョンのlibcurlのrpmをダウンロードしようとしたが、リポジトリになくて断念。
ソースからビルドしてインストールしようとしたが、こっちもうまくいかずに断念…。

結局、他のサーバーに入ってたlibcurl.so.4.5.0をコピーすることで直した。

```
mv libcurl.so.4.5.0 /usr/lib64
cd /usr/lib64
ln -s libcurl.so.4.5.0 libcurl.so.4
```

# 参考情報

https://www.mail-archive.com/clamav-users@lists.clamav.net/msg51337.html

https://kaede.jp/2021/11/yum%E3%82%92%E5%8F%A9%E3%81%84%E3%81%9F%E3%82%89libcurl-so-4-not-found%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%81%9F/
Internet Explorer のサポートが終了

![out.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633992/b1a87953-d4f6-4f08-780b-80ee70e832e0.jpeg)

2021年10月時点での日本国内でのIE（Internet Explorer）のシェアは「2.5%」。
順番にChrome、Safari、Edge、Firefoxの次に利用されているブラウザです。

IE（Internet Explorer）のサポートが、2022年6月16日をもって、Microsoft社より終了となることが告知されました。
長年の利用されてきたブラウザですが、システムとして動作保障しているブラウザがIEである基幹システムはまだまだ多くあります。

企業としてはIEではなく、サポートされているブラウザへと対応させたいところですね。
しかし、調査結果ではまだ半数ほどIEのサポート終了対応が何もされていないみたいですね。

セキュリティやデスクトップアプリケーション並みの表現力と操作性を実現できるSPA（Single Page Application）に対応したフレームワークもIEのサポートを終了していっていますので、IEサポート終了への対応をしていくことをお勧めします。


## SPAに対応したフレームワーク

:::note warn
Angular
LTSは2022年11月までなので、そこでIEサポートは完全に終了の予定となっています。
:::

:::note warn
Vue
「Vue 3」ではIEのサポートしない方向となっています。
:::

:::note warn
React
「React 18」で導入された新機能は最新のブラウザ機能を使用して実現されるため、Internet Explorerのサポートがされておらず、サポート終了となっています。
:::


## それでもなんとかIEを活かしたいなら．．．

### １．Microsoft Edgeで「IEモード」に移行
”IEモード”とは、EdgeのタブでIE専用のWebページ／アプリをシームレスに表示できる機能です。
これには2種類の方法があり、1つは対象ページを開くたびに随時切り替える方法で、エンドユーザーでも操作できます。
もう1つは、特定のWebサイトを常にIEモードで開くようにあらかじめ設定する方法で、社内のシステム部門が主導して対処するのに適しています。

### ２．Google Chromeで「IE Tab」に移行
Google ChromeにBlackfish Software社の拡張機能「IE Tab」をインストールすると、Chrome内のタブの1つとして、IEのレンダリングエンジンを使ってIE専用ページを表示できるようになりますが、ただしビジネス利用は有償になります。

### ３．Google Chromeで「統合LBS」に移行
Google自身もIE Tabに似た機能として”従来のブラウザのサポート”（統合LBS（Legacy Browser Support））を提供しています。
指定のWebページだけ、自動的にIEを始めとするChrome以外のWebブラウザで開くように設定できます。

## 関連サイト
[Microsoft 社 Internet Explorer のサポート終了について](https://www.ipa.go.jp/security/announce/ie_eos.html)
[IE専用ページを緊急避難的にWindows 10／11のMicrosoft Edgeの「IEモード」で開く【Edgeトラブル対策】](https://atmarkit.itmedia.co.jp/ait/articles/2106/16/news026.html)
[Edgeの「IEモード」を、サポートが終了するIE代わりに使う方法](https://atmarkit.itmedia.co.jp/ait/articles/2009/02/news022.html)
[仕事に役立つおすすめGoogle Chrome拡張機能](https://atmarkit.itmedia.co.jp/ait/articles/1706/14/news022.html)
[Windows 向けの統合 LBS を設定する](https://atmarkit.itmedia.co.jp/ait/articles/2009/02/news022.html)


https://www.esprit-fort.co.jp/



https://www.esprit-fort.co.jp/recruit/
STM32G031のPWMで遊ぶ(PWMを完全に忘れていた。)(サーボも成功)


x まだ試していない　確認ずみ2022/5/12

x サーボーなくしたけど、プログラム的に成功

目的
遊んで見たかった。
面白そうだからやった。
タイマー割り込みを使ったやり方は、成功したので隣の記事をみてね!!

なんか失敗しちゃったけど!!
総力を使った再び総当たり戦の開始!!

ガチな総当たりやーーーーー　G0316 で　うごいた キターほほほ


![o_con432.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/61fc8f68-1a1d-edb1-3ce1-5833f1ec4f30.jpeg)


![o_con431.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/78573edf-3620-14ac-f1c4-dcda79fc7ca1.jpeg)




[大成功]や


仕様

1
2 VDD
3 GND
4

8 SWD SWCLK
7 SWD SWDIO
6
5 PA11 アナログサーボ信号　400us-2400us




いろいろ


サーボによつては、センターがずれたりフルに分解度を
使えなかったりするがそもそも、アナログだから精度が出ないのでOK
ためにならない情報、ふろ行ってくら2022/5/12 20:21
ふろの前に嬉しすぎてアイス食ってしもうた。
後で微調整とオシロ持ち出して検査しないと
たぶん0から255まで?
PA12が?
PA11がOK 薄暗くからフルまでPWM

RS485のプログラムとまとめれば成功や


計算式

65536 : 20ms


20,000uS / 65536 = 0.30517578125‬

0.30517578125 * 2,400

3.2768 * 20,000 = 65536

3.2768 * 400 = 1310

3.2768 * 1500 = 4915

3.2768 * 2400 = 7864

7864-1310=6554

25 * 256 = 6400
26 * 256 = 6656

1310 + 6656 = 7966

4915-1310 = 3605
? * 26 = 3605 (1500us)
138 * 26 = 3605 (1500us)
138 - 128 = 10 センターは、10大きい方にずれている

サーボ用に微調整


```c++




//PWM_servo_test_031_1


#include <Arduino.h>


#define DD PA11    // potentiometer connected to analog pin x

void setup() {

  pinMode(DD, OUTPUT);   // sets the LED pin as output
  analogWriteFrequency(50);
  analogWriteResolution(16);

}//setup


void loop() {

  int ii;

  for (ii = 0; ii < 256; ii++) {


    analogWrite(DD, 1310 + (26 * ii) );   // analogRead values go from 0
                                          // to 4095, pwmWrite values
                                          // from 0 to 65535, so scale roughly



    delay(20); //20mS

  }//for

}//loop





```





プログラム ゆっくり消灯

```c++


//PWM_test_031_1


#include <Arduino.h>


#define DD PA11    // potentiometer connected to analog pin x

void setup() {

  pinMode(DD, OUTPUT);   // sets the LED pin as output
  //pinMode(LED_BUILTIN, PWM);   // sets the LED pin as output
  analogWriteFrequency(50);
  analogWriteResolution(16);

}//setup


void loop() {

  int ii;

  for (ii = 0; ii < 4096; ii++) {

    //analogWrite(DD, ii>>4 );
    analogWrite(DD, (4096 - ii) * 16 );   // analogRead values go from 0
                                          // to 4095, pwmWrite values
                                          // from 0 to 65535, so scale roughly

/*
    digitalWrite(DD, 1 );
    delay(20); //1mS
    digitalWrite(DD,  0 );
    delay(20); //1mS
*/

    delay(1); //1mS

  }//for

}//loop



```

おまけ　1500usで固定



```c++



//PWM_servo_test_031_P

#include <Arduino.h>

#define DD PA11    // potentiometer connected to analog pin x

void setup() {

  pinMode(DD, OUTPUT);   // sets the LED pin as output
  analogWriteFrequency(50);
  analogWriteResolution(16);

}//setup

void loop() {

    int ii = 138; //1500us センター

    analogWrite(DD, 1310 + (26 * ii) );   // analogRead values go from 0
                                          // to 4095, pwmWrite values
                                          // from 0 to 65535, so scale roughly

    delay(1000); //1秒待つ
    
}//loop


```
console.log()だけじゃない　consoleオブジェクトの便利なメソッド

# はじめに
JavaScriptで開発を行っている際にconsole.log()で値を確認することがよくあると思いますが、consoleオブジェクトには便利なオプションがあることを見つけたので備忘録として残します。

# 1,console.error()
console.errorのメソッドではメッセージを赤色で強調表示させることが可能です。
コードをテストする際に便利なメソッドです。

# 2.console.warn()
console.warn()メソッドでは警告メッセージを黄色で強調表示させることができます。
警告ログを出力させたい場合に用いることができます。
console.logのオプションについて

# 3.console.clear()
console.clearメソッドではconsoleをクリアすることができます。
consoleがメッセージ等でいっぱいになった際に便利なメソッドです。

# 4.console.time() / console.timeEnd()
この二つのメソッドは併用して用いるメソッドです。
関数の処理時間を知りたいときに用いることで時間を計測することが可能です。

# 5.console.table()
console.table()メソッドではconsoleの可読性を上げるためにconsoleを表形式で出力することができます。
配列やオブジェクトを表形式で表示します。

# 6.console.group()  / console.groupEnd()
この二つのメソッドも併用して用いるメソッドです。
出力をブロックにグループ化し、インデントして表示することができます。


# まとめ
デバックによく用いられるconsoleオブジェクトですがconsole.log()以外にもデバックに役立つメソッドがたくさんあります。
少しでも開発の役に立ちましたら幸いです。
【AWS】S3のストレージクラスについて

# １．S3のストレージクラスについて
AWS公式サイト上にS3ストレージクラスが載せてあります。
実際利用上の観点から、その利用ケースを簡単にまとめていきたいです。

https://aws.amazon.com/jp/s3/storage-classes/

# ２．S3クラスとユースケースまとめ

|S3クラス種類  |可用性 |AZ |ユースケース |最小ストレージ期間料金 |
|:------------------|:------------------|:------------------|:------------------|:------------------|
|S3 Standard|99.99%|≥3 |アクセス頻度の高いデータ向けに高い耐久性、可用性、パフォーマンスのオブジェクトストレージを提供 |なし|
|S3 Standard-Infrequent Access|99.9%|≥3 |アクセス頻度は低いが、必要に応じてすぐに取り出すことが必要なデータに適しています|30日間 |
|S3 One Zone-Infrequent Access|99.5%|1 |アクセス頻度は低いが、必要に応じてすぐに取り出すことが必要なデータに適しています|30日間 |
|S3 Glacier Instant Retrieval|99.9%|≥3 |アクセスされることがほとんどなく、ミリ秒単位の取り出しが必要な、長期間有効なデータ用に最低コストのストレージを提供するアーカイブストレージクラス|90日間 |
|S3 Glacier Flexible Retrieval（旧 S3 Glacier）|99.99%|≥3 |1 年に 1〜2 回アクセスされ、非同期で取り出されるアーカイブデータ向けます。データをアクセスするのに数分から数時間かかります|90日間 |
|S3 Glacier Deep Archive|99.99%|≥3 |1 年のうち 1 回か 2 回しかアクセスされないようなデータを対象とした長期保存やデジタル保存をサポートします。データをアクセスするのに12時間かかります|180日間 |
|S3 Intelligent-Tiering|99.9%|≥3 |パフォーマンスへの影響、取り出し費用、運用上のオーバーヘッドなしに、アクセス頻度に基づいてデータを最も費用対効果の高いアクセス階層に自動的に移動することにより、きめ細かいオブジェクトレベルでストレージコストを自動的に削減できる初めてのクラウドストレージ|30日間 |
Decoratorをrailsに導入する

Decoratorの説明の前に例え話から。
Modelでは日時を”2018-07-12 18:12:34”という値で保持していますが、Viewでは”2018/7/12”と表示したい場合を考える。
前提としてモデルはデータの格納に関する情報だけを書くところ。ビューは情報を表示する役割だけを担うべき。じゃあ上の”2018-07-12 18:12:34”を”2018/7/12”に変える処理はビューとモデルのどちらに書くべきか？

正解はビューとモデルのどちらでもなくDecoraterに書くべき。

話が遅くなったがDecoraterとは名前の通りデコレーターで、情報を加工する処理を書き込む。
それはビューとモデルの間に置く。

### Decoraterを実装する

Decoraterを実装するにはDraperというgemを使う。
```
gem 'draper'
```
で```bundle install```を実行。

###Decoraterを使って置き換えを行う。

##### １、decoratorのメソッドを定義するファイルを作成する。
以下のコマンドである。
```
rails g decorator モデル名
```
userとしたのはモデル名である。今回はlast_nameとfirst_nameというuserモデルのカラムを扱うので、モデル名はuserとする。

##### 2,作成した```decorator.rb```にメソッドを定義する。
今回はuserモデルのlast_nameとfirst_nameを結合してフルネームを返す```full_name```メソッドを定義する。
```
class UserDecorator < Draper::Decorator
  delegate_all

  def full_name
    "#{last_name} #{first_name}"
  end
end

```
これで```userインスタンス```に対してメソッドが使えるようになるが、注意点が一つある。

##### 3,実際にビューファイルに出力してみる。

```
<%= current_user.decorate.fullname %>
```
定義したfull_nameメソッドを使用するには上記のように```decorate```メソッドを経由しなければいけない！

以上。

### [補足]Decoratorを使う場所

・コントローラー　→　×
表示に関わるファイルでのみ使用するので。（showアクションなどでフルネームを表示したい場合だったら使う。）

・ビュー　→ ○
表示に関わるファイルでのみ使用するので。

・モデル　→ ×
表示に関わるファイルでのみ使用するので！！！
（今回みたいにモデル内でフルネームを扱いたい場合は、モデル内で```full_name```メソッドを定義すれば良い）
MySQLのパーティションについて

# まとめ
**1つのテーブルを分割して管理できる機能**(MySQL 5.1〜)を**パーティショニング**という。
**パーティショニング機能によって分割されたテーブルの単位**を**パーティション**という。

**パーティショニングを使うメリット**
- パーティション単位でのDROP, CREATEが容易になる
- パーティションを絞ったSQLクエリを発行することで検索が高速化できる



MySQLでは、過去バージョン〜現行バージョン(8.0系 ※2022/05/12時点)まで、**レコード単位で分割する「水平パーティション」のみ対応**している。
分割パターンとしては以下が利用できる。

パターン|概要
-|-
RANGE|各レコードの1カラム値の「範囲(0〜5, 6〜10,…みたいな形)」で分割
LIST|各レコードの1カラム値の「リスト ([1,3,4], [2,5,6],...みたいな形)」で分割
HASH|各レコードの1カラム値の「ハッシュ値の計算結果」で均等に分割 (分割数と対象とするカラムを指定)
KEY|各レコードのユニークキーであるカラム値の「ハッシュ値の計算結果」で分割(分割数のみ指定)


**パーティションの設定はCREATE TABLE時**に同時に以下のようなSQL文で行うらしい。

```
CREATE TABLE
...
PARTITION BY <分割パターン> 
<分割の詳細設定(分割パターンによる)>
```

あとから**さらにパーティションを追加したい場合**は以下。

```
ALTER TABLE <対象テーブル名> ADD PARTITION (
  <分割詳細設定(CREATE TABLE時に設定した分割パターンによる)>
)
```

**作成したパーティションを削除したい(パーティション単位で)場合**は以下。

```
ALTER TABLE <対象テーブル> DROP PARTITION <パーティション追加時に名づけたパーティション名>;
```

# 参考
https://gihyo.jp/dev/serial/01/mysql-road-construction-news/0052

https://blog.katsubemakito.net/mysql/partition_confirm_add_remove

https://quarka.org/howto-create-mysql-partition/#qatoc_1
記事まとめ

# 経験
https://qiita.com/Shu25/items/4ba5be5b99cb3717b5f3

https://qiita.com/Shu25/items/f18d89920a874fda0f18

https://qiita.com/Shu25/items/3f9d1f4b4ccb7dbe1a6b

https://qiita.com/yokoshu25/items/042cb5d47bd780ec7a8b

https://qiita.com/yokoshu25/items/736ac7976469bb0a40e2

# 初心者向け

https://qiita.com/Shu25/items/e92e2ef0f2d4db0724b9

https://qiita.com/Shu25/items/714f3ae4c38c4b292596

https://qiita.com/Shu25/items/6404cf6041c915f65456

https://qiita.com/Shu25/items/2bd88ca97e536e9b5349

https://qiita.com/Shu25/items/a05d82f19518005c99a9

https://qiita.com/Shu25/items/f2184faaeb7d772cf3bb


# AI

### 階層線形モデル

https://qiita.com/Shu25/items/bf1b41485d260d0ec9f3

https://qiita.com/Shu25/items/c1b628169faa3de4fedb


### 地理空間データ

https://qiita.com/Shu25/items/e4d25dad669557c3fb8a

https://qiita.com/Shu25/items/41ea4eafbf8109483034

https://qiita.com/Shu25/items/449fd4aba0d0365b78de

https://qiita.com/Shu25/items/3c1317695d7923997b88


### モデル解釈性

https://qiita.com/Shu25/items/446d30d88ac64919aa77

https://qiita.com/Shu25/items/e9c191c02ecd56730c7a

https://qiita.com/Shu25/items/f6320d8612de42119d6e

https://qiita.com/Shu25/items/344c852830ed88557aea

# SQL 

https://qiita.com/Shu25/items/6404cf6041c915f65456

https://qiita.com/Shu25/items/6b01b8bccf5994cd3f2a

https://qiita.com/Shu25/items/8a5d3293fc177689ee9c

https://qiita.com/Shu25/items/40e8b86f1e83602e3fee



# プロジェクト
SNSのbotや、NFTアートのオートメーションプロジェクトなど、


https://qiita.com/Shu25/items/b3a22d107381d0d2b92d

https://qiita.com/Shu25/items/414452cff28c99e37f95

https://qiita.com/Shu25/items/1889bb6e46f62d59739d

https://qiita.com/Shu25/items/6e1adfb255d70fe30cbf
EC2(Ubuntu)で7dtdサーバを立ち上げる。


### EC2サーバ(Ubuntu)を立てる

###### Amazon マシンイメージ (AMI)
Ubuntu Server 18.04 を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2276454/66f11d57-9fb6-9dc7-42a4-a5a2f49a3b54.png)

###### インスタンスタイプの選択
3-4人で遊ぶ想定なら
c6i.largeかc6i.xlargeあたり


###### インスタンスの詳細の設定
特に変更なし

###### ストレージの追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2276454/b731b2ee-ed83-0bb7-5c7b-d90751c6d712.png)

:::note warn
デフォルトのサイズ 8GBだとゲームインストール時にエラーが出ます（ゲームサイズが12GBくらい）
余裕をもって15-20GBくらいにしておくと安心してインストールできます。
:::

###### タグの追加
特に変更なし

###### セキュリティグループの設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2276454/787f8317-2222-5b64-01b9-038a1bb68727.png)
デフォルトなら26900-26903を開けてれば良いみたいです。

上記で設定出来たら「確認と作成」でインスタンスを構築


### 7dtdサーバのインストール

lib32gcc1のインストール(steamcmd実行のための前準備）
```
$ sudo dpkg --add-architecture i386
$ sudo apt update
$ sudo apt install lib32gcc1
```
:::note info
Do you want to continue? [Y/n] 
が表示されたら Y　を押下
:::

steamcmdのダウンロード及び解凍
```
$ mkdir ~/steamcmd && cd ~/steamcmd
$ wget http://steamcdn-a.akamaihd.net/client/installer/steamcmd_linux.tar.gz
$ tar zxvf steamcmd_linux.tar.gz
```


steamcmdシェル実行
```
$ ./steamcmd.sh
```

インストールディレクトリンの設定とアノニマスユーザでのログイン
```
Steam> force_install_dir 7dtdserver
Steam> login anonymous
```

7dtdクライアントのインストール（294420が7dtdのID）
```
Steam> app_update 294420
Steam> quit
```
:::note info
バージョン指定をしない場合は、最新の安定版がインストールされる
beta版をインストールする場合は以下のようなオプションを指定する
```
Steam> app_update 294420 -beta latest_experimental
```
:::

サーバの起動
```
cd ./7dtdserver
./startserver.sh -configfile=serverconfig.xml
```

:::note info
以下の表示がされて止まりますが、問題なければゲームクライアントからIP指定で接続できるはずです。
```
Using config file: serverconfig.xml
Set current directory to /home/ubuntu/steamcmd/7dtdserver
Found path: /home/ubuntu/steamcmd/7dtdserver/7DaysToDieServer.x86_64
```
ゲームクライアントからも接続可能になっていると思うので、インスタンスのIPアドレスを入力して接続してみてください。
:::

### サービス登録
以降は作業として必須ではないですが、インスタンス立ち上げるたびに手動で立ち上げるのは面倒なので
サービス登録をして、インスタンスが立ち上がると7dtdサーバが起動するようにします。

サービス登録用のファイルを作成します。
```
sudo vim /etc/systemd/system/7dtd.service
```

vimでファイルを開いたら、以下の内容でファイルを更新します。
```
[Unit]
Description=7 Days to die server

[Service]
User=ubuntu
Group=ubuntu
WorkingDirectory=/home/ubuntu/steamcmd/7dtdserver/
ExecStart=/home/ubuntu/steamcmd/7dtdserver/startserver.sh -configfile=/home/ubuntu/steamcmd/7dtdserver/serverconfig.xml
ExecReload=/bin/kill -HUP $MAINPID
Type=simple

[Install]
WantedBy=multi-user.target
```

コマンドを実行して、サービス登録します。
```
sudo systemctl enable 7dtd.service
```

正常に完了したら、プロセスに7dtdサーバが表示されることを確認してください。（プロセスが居れば、ゲーム側から接続可能です）
```
ps -eaf | grep 7dtd
```

### おまけ

##### ①パスワード設定
serverconfig.xmlがデフォルトのままだと、誰でもアクセスできてしまうので、
「ServerPassword」だけでも設定しましょう。

以下のコマンドでアクセスして、「ServerPassword」にパスワード文字列を設定すれば完了です。
```
vim /home/ubuntu/steamcmd/7dtdserver/serverconfig.xml
```

#### ②Mods配置
この手順でサーバを作成した場合のMods配置場所は以下になります。
入れたいModがあればModsディレクトリを作成して、ファイルを展開しましょう。
```
/home/ubuntu/steamcmd/7dtdserver/Mods/
```