OmniAICreator/Qiita-1.07M huggingface dataset:
[Python] 自作関数の定義パタンと用語整理

### 目的
- Python勉強ノート
- パタン整理
- 用語まとめ

### 関数の定義方法 
```python:my_function
def my_function():
    #実行する内容1
    #実行する内容2
```

#### 実行方法
```python
my_function():
```
### パタン① パラメータに引数与えて関数の内容を実行する
#### 実行してみよう
2つの引数（"anna", "good"）をパラメータに与えて中の決まった処理をするコードを書いて実行してみよう。
```py:hello.py
def hello(name, weather):
    print(f"Hello {name}, The weather is {weather}.")
    print("Isn't it? Bye")

hello("anna", "good")  
```
```py:実行結果
Hello anna, The weather is good.
Isn't it? Bye
```

#### パラメータ（Parameter）と引数（Argument）の関係
実行結果で関数(hello)に渡されるParameterとArgumentについて
- name/weather = Parameter **値の名前**（パラメータ）
- anna/good = Argument **実際の値** (引数, Data/Value)

#### 補足 「Positional Arguments」と「Keyword Arguments」の違いと使い分け

今回は"good", "anna"の順番逆にして与えると？
```py:hello.py
def hello(name, weather):
    print(f"Hello {name}, The weather is {weather}.")
    print("Isn't it? Bye")

hello("good", "anna")
```

こんなバカげた結果を招く、つまり・・・
Pythonは「名前」「good or bad」の見分けをしないということ
```text:実行結果
Hello good, The weather is anna.
Isn't it? Bye
```
簡単なコードは気を付けて入力し、結果をテストすることで
「Positional Arguments」を使うことで問題ないと思う。

それに比べて「Keyword Arguments」は
```py:hello.py
def hello(name, weather):
    print(f"Hello {name}, The weather is {weather}.")
    print("Isn't it? Bye")

hello(weather = "good", name = "anna")
```

キーに値を直接指定することで意図した結果が得られるので、エラーを減らせるだろう。**ただ、めんどくさいかも・・・**
```text:実行結果
Hello good, The weather is anna.
Isn't it? Bye
```

### パタン② 関数が処理した実行結果を呼び出し元へ返す（return）
パタン①ではただ、画面に挨拶を表示するに比べて
「return」を利用すると呼び出し元へ値を返すことができる。
例えば

```py:total.py (「a」に「b」を足した結果を返す関数）
def add(a, b):
    return a + b
```

「total」という変数を作ってそのに「add」のリターンされた処理結果を代入し、「total」を出力する。
```py:実行
total = add(1, 3)
print(total)
4 # 結果２つの引数の合計が表示されることが確認できる。

```

任意の変数に代入した戻り値は何度でも利用できたり、別の関数で使えるので
「表示」だけではなく、「再利用」するのであれば「return」を使うべし。

#### 「return」と「print」を両方設ける関数では順番に気を付けよう。
例えばこのように両方使う場合、どうなるのか考えてみよう。
```py
def add(a, b):
    return a + b
    print("この関数は「a」に「b」を足した結果を返す関数です。")

total = add(1, 3)
print(total)
```
```text:returnをprintより先に書く場合の結果
4
```

「return」が実行されて関数の処理は終了されるので「print」を先に実行する必要がある。
```py:修正後
    print("この関数は「a」に「b」を足した結果を返す関数です。")
    return a + b
```

```text:printをreturnより先に書く場合の結果
この関数は「a」に「b」を足した結果を返す関数です。
4
```

### これ以外にも勉強する中でよく使うなと思うパタンがあると追記する予定
オレオレbase64を作ろう

# はじめに
はじめまして、普段はctfのcrypto問題を解いたりしているpond-eです
さて、今世の中にはbase64やハフマン符号など色々な符号化手法があります。
自分はctfでcryptoをしているうちに符号化について興味を持って色々調べたところ、baseXX(XXは任意の2の累乗)は実装が比較的簡単で自分の好きなように作れることに気が付きました。そこで、自分だけの符号化手法を作ろうと思ったのです。
# この記事で最終的に出来ること
base64で使われる64個の文字を違う文字にすることでオレオレbase64が出来た事とします！
# base64の原理
この記事ではbase64を例に説明していきます。base64が分かればbase32やbase128も同じ要領で理解できるのでとりあえずbase64だけ。
base64の変換手順は次のようになります。
1. 元データを先頭から6bitずつに分ける（6bitに満たない分は後ろに0を追加して調整）
2. 6bitの値を変換表に基づいて4文字ずつ変換
3. 4文字に満たないときは後ろに=を追加

変換表は次のようになります。
|ビット列|Base64文字|ビット列|Base64文字|ビット列|Base64文字|
|:--:|:--:|:--:|:--:|:--:|:--:|
| 000000 | A | 011011 | b | 111111 | / |
| 000001 | B | 省略 | 省略 |
| 000010 | C | 110100 | 0 |
| 000011 | D | 110101 | 1 |
| 省略 | 省略 | 省略 | 省略 |
| 011010 | a | 111110 | + |

base64の64は6bitで表現できる文字の数なので（2の6乗）もし、base32とかを作りたかったら手順1.で5bitずつに分けるという感じでやれば出来ます。（実際には手順2.も変える必要があるが省略）
# Pythonによるbase64の実装（encodeのみ）
Python 3.10.5 でbase64（encodeのみ）を実装してみました。（雑実装ですみません。。）。ちなみにdecodeはこれを逆実装するだけです。
```python:base64-python.py
base = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
text = input('')    # ASCIIのみ対応
tmp = 0
result = ''

# 定義からの直感的な処理, 3文字で一周しているのは6(bit)と8(bit)の最大公約数が24(bit)(3文字)であることを利用している.
for i in range(len(text)):
    if(i % 3 == 0):
        result += base[ord(text[i]) >> 2]
        tmp = ord(text[i]) & 0x03
    elif(i % 3 == 1):
        result += base[tmp*16 + (ord(text[i]) >> 4)]
        tmp = ord(text[i]) & 0x0f
    elif(i % 3 == 2):
        result += base[tmp*4 + (ord(text[i]) >> 6)]
        result += base[ord(text[i]) & 0x3f]
        tmp = 0

# 文字の末尾部分の処理
if(len(text) % 3 == 1):
    tmp = ord(text[-1]) << 4
    tmp = tmp & 0x3f
    result += base[tmp]
elif(len(text) % 3 == 2):
    tmp = ord(text[-1]) << 2
    tmp = tmp & 0x3f
    result += base[tmp]

# 最後の=についての処理
if(len(result) % 4 == 1):
    result += '==='
elif(len(result) % 4 == 2):
    result += '=='
elif(len(result) % 4 == 3):
    result += '='

print(result)
```
3文字で1週する様子。赤色は6bitの区切り線。黒色は8bitの区切り線。
base64適用前は3文字なのが適用後は4文字になっているのが分かる。
![base64.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550181/d6e1cbce-604d-5570-8462-dc03a2d4ef80.png "3文字で一周する様子")

# base64に使う文字を変えてみよう！
文字を変えるだけなら上記のコードのbase変数の中身を変えれば自分専用のbase64を作ることが出来ます！
これで今回のオレオレbase64の実装は終わりです。また機会があれば今度は基数も変えて作ってみたいですね
LambdaにRubyのソースファイルをアップロードする方法

## 概要
LambdaでRubyがかけるようになったのですが、画面上のコードをいじるより実際は手元の環境で動かしてそれをデプロイすることのほうが多いと思います。
そこで今回はLambdaに手元のrubyファイルをアップロードする方法を紹介します。
(今回はGemを使わないものを紹介します。Gemを使うものはまた次回記載予定です。)

## 既存の関数のエクスポート
まず、現在のLambda関数を手元の環境に持ってきましょう。
Lambdaの変更したい関数のページに行き、上の方のアクションボタンから「関数のエクスポート」を選択
![スクリーンショット 2022-12-14 23.07.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/6af000af-90ec-442e-961f-31d289f2c526.png)
ダイアログの「デプロイパッケージのダウンロード」を選択
![スクリーンショット 2022-12-14 23.07.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/24497fa9-581b-3c80-2561-86f2b27c1f2f.png)

すると手元のrubyファイルが取得されるかと思います。

## 既存のコードの変更
ここはしたいように変更していただいて結構です。
自分の場合初期の状態から変更していなかったので
```rb
require 'json'

def lambda_handler(event:, context:)
    # TODO implement
    { statusCode: 200, body: JSON.generate('Hello from Lambda!') }
end
```
このような状態だったものを
```rb
require 'json'

def lambda_handler(event:, context:)
    # TODO implement
    { statusCode: 200, body: JSON.generate('Changed') }
end
```
に変更しました。

## ZIPファイルの作成
### 注意点
ソースファイルをアップロードするにはZIPにする必要があるのですが、ここで注意なのが**作業ディレクトリがあった場合そのディレクトリをzipにしてしまうとだめ**というところです。
どういうことかというと
![スクリーンショット 2022-12-14 23.12.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/e0ff8f99-6944-b917-8d43-88b2ae14c58d.png)
このようにディレクトリの中にソースを入れて、そのディレクトリをzip化してしまうとだめということです。
アップロードしてみたらわかりますが、関数が入れ子になってしまいます....

### やり方
ではどうすればいいかという話なのですが、ただソースファイルだけをZIPにすればよいです。
#### GUIでやる場合
![スクリーンショット 2022-12-14 23.13.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/e13ac647-5546-4344-86c0-4721f0f2cdfa.png)
このボタンで圧縮

#### CLIでやる場合
```sh
zip lambda_function.zip lambda_function.rb
```
といった形でzip化

## アップロード
ここまでくればあとはアップロードするだけです。
画面の「zipファイル」を選択して
![スクリーンショット 2022-12-14 23.15.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/5ceaa3b2-6a0f-1a00-0064-ee2f5cf191ee.png)
zip化したファイルを添付して完了です。
画面の方にも反映されているのがわかると思います。
![スクリーンショット 2022-12-14 23.16.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/dd3430cb-a85b-1eb2-f8f7-1bb4cb772ed4.png)

以上！！
近いうちにGemを使ったアップロードも記述する予定です！！
【Linux】一時的にユーザーを変更してコマンドを実行する

## 実行方法

次のようにコマンドを実行すると一時的にユーザーを変更してコマンドを実行できます。  

```terminal
su ユーザー名 -c "コマンド"
```

```terminal
root $ su sample -c "whoami"
sample
```

以下のようにも記述できます。  

```zsh
su ユーザー名 <<-EOF
コマンド
EOF
```

```test.sh
su sample <<-EOF
whoami
EOF

whoami

```

```terminal
root $ bash test.sh
sample
root
```
【Alpine.js】x-forでプロパティをブン回せ！！


# x-forとは

https://alpinejs.dev/directives/for

配列またはオブジェクトのプロパティを1つずつ取り出すことができるやつです。

# 使い方
基本形
```html
<template x-for="単数 in プロパティ名">
```
::: note
templateタグを必ず使うので忘れずに。
:::

### 使用例①
```html 
<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="color in colors">
        <li x-text="color"></li>
    </template>
</ul>

// 結果
// Red
// Orange
// Yellow
```

### 使用例②
ループ回数を出力することもできます。
```html
<template x-for="(単数, index) in プロパティ名">
                       　 ↑ 
         indexを追加するだけでOK。　
        （x-dataでのプロパティ定義は不要）
```
```html
<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template x-for="(color, index) in colors">
        <li>
            <span x-text="index + ': '"></span>
            <span x-text="color"></span>
        </li>
    </template>
</ul>

// 結果
// 1: Red
// 2: Orange
// 3: Yellow
```

# まとめ
直感的につかえるindexで番号付きでブン回せるのイイネ👍
VBAでChromeスクレイピング②　ー実践編ー


これは[VBAでChromeスクレイピングに挑戦してみた①](https://qiita.com/mamineko/items/f9f9e54da9b9306871ac)の続きである。

①ではVBAでスクレイピングをするための準備を解説したが、ここでは実際にスクレイピングに挑戦したい。
まず、簡単なところでYahoo画面のトップニュースを利用し、それをスクレイピングしてみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772852/2cde3d5f-6a20-12ce-99cd-7ad31265951e.png)

## Yahooスクレイピングのポイント

まず、Yahooをスクレイピングするためには「XPATH」を知る必要がある。

### XPATHとは
XPath(XML Path Language)は、ツリー構造となっているXML/HTMLドキュメントから要素や属性などを指定するための決まった書き方（構文）。

そしてスクレイピングをするためには、このXPATHを検索し、ヒットしたらそこからブラウザ内のニュースを取得してExcelに出力する・・という流れでやっていくことになる。

### XPATHの確認方法

1. Yahooを開く
1. ニュースの欄にマウスを置き、右クリックすると「検証」が出てくる
1. 右側に検証画面が出てくるので、そこにあるニュースの部分を右クリックし「COPY XPATH」をクリック
1. これでXPATHがコピーされる

実際の動きは以下GIFの通り。
![2022-12-14_22h47_46-_online-video-cutter.com_.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772852/b073f20e-020e-dcc3-0217-d99b23797c96.gif)

そしてコピーされたXPATHはこちら。
**//*[@id="tabpanelTopics1"]/div/div[1]/ul/li[1]/article/a/div/div/h1/span**

これを使ってコーディングしていく。

## コーディング

実際の画面は以下の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772852/62032473-1fca-c9ed-37e7-755c405b0834.png)

まず、サイトURL（ここではYahoo）を枠内に入力し、ボタンを押すという動きを実現させる。

そしてボタンを押した後の実際のコードは以下の通り。

```vb
Option Explicit
Sub site_open()

    Dim driver As New Selenium.ChromeDriver 'Selenium制御
    Dim myBy As New By
    Dim siteURL As String
    Dim ws As Worksheet
    Dim ws_Tenki As Worksheet
    Dim i As Long
    
    Set ws = ThisWorkbook.Worksheets("Sheet1")
    siteURL = ws.Range("C4").Value
    
    If siteURL <> "" Then
        'ブラウザ立ち上げ時の設定
        driver.AddArgument "disable-gpu"
        driver.AddArgument "start-maximized"
    
        'SeleniumでChromeを使用する初期設定
        Call driver.Start("chrome")
        driver.Get (siteURL)
        
        Set ws_Tenki = ThisWorkbook.Worksheets("転記データ")
        
        'Excelに転記する（Yahooの場合TOPニュース件数は８件なので８行転記）
        For i = 1 To 8
            ws_Tenki.Range("A" & (i + 1)) = driver.FindElementByXPath("//*[@id=""tabpanelTopics1""]/div/div[1]/ul/li[" & i & "]/article/a/div/div/h1/span").Text
        Next i
        
        '終了メッセージ
        MsgBox "終了しました"
    Else
        MsgBox "サイトURLがありません"
    End If
    
End Sub
```

コードをよく見ると、以下の部分で先ほど取得したXPATHが使われていることが分かる。
ここでXPATHを使ってYahooニュースを取得しているということ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772852/99251281-b488-e692-96b1-fa52a47ed405.png)

### 結果

**Yahoo画面**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772852/795ca3b6-94cf-8a23-df82-47f6dba8b33d.png)

**実際のスクレイピング結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772852/ee6361ae-e6c2-4f1e-63b6-0ec5996bb743.png)

このように、きちんとスクレイピングされていることが分かる。

# まとめ
このように、設定をきちんとしていればVBAでも色々とスクレイピングは可能だということが分かる。
今、スクレイピング＝Pythonというイメージが強いが、実はそうでもないことが分かるし、
またVBAでスクレイピングできるということはその分VBAでスクレイピングしたデータを取得し、色々とデータ編集を行うなどの幅が広がるということにもなる。

これは一度やっておいて損はないかと思う。

それでは今回はここでおしまい。
[2022年版]MacOSにAWS CLIとAWS SAM CLIを導入する

## 概要
MacOSにAWS CLIとAWS SAM CLIを導入する方法を記述

## 導入方法
### AWS CLIをインストール
下記の２つのコマンドを叩く
```sh
curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
sudo installer -pkg AWSCLIV2.pkg -target /
```
これだけで導入できます

### AWS SAM CLI をインストール
下記のコマンドでaws sam cliをインストールします
```shell
brew tap aws/tap
brew install aws-sam-cli
```
AWS CLIが入っていたら上記のコマンドを叩くだけでこちらも導入できます。

## 参考文献

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html

https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-install-mac.html
Python周りの技術について調べてみた①

# Python周りの技術について簡単に調べてまとめてみた①

# 言語Python

## 言語Pythonについて知りたいときは

https://www.python.jp/

Pythonの言語や環境構築について調べたい場合はこちら

# Webアプリ

## Pythonで汎用性のあるWebアプリを作りたいときは

https://docs.djangoproject.com/ja/

Pythonで色々な機能をもったWebアプリを作りたい場合はこちら
※フレームワーク

## Pythonで簡単にWebアプリを作りたいときは

https://msiz07-flask-docs-ja.readthedocs.io/ja/latest/

Pythonで簡単な軽量なWebアプリを作りたい場合はこちら
※フレームワーク

## Pythonで非同期Webアプリを作りたいときは

https://www.tornadoweb.org/en/stable/

Pythonで非同期通信を使ったレスポンスが早いWebアプリを作りたい場合はこちら
※フレームワーク

# デスクトップアプリ

## Pythonで簡単にデスクトップアプリを作りたいときは

https://docs.python.org/ja/3/library/tkinter.html

Pythonで手軽にGUIを開発したい場合はこちら
※標準ライブラリのため、インストール不要

## Pythonでデザイン性のあるデスクトップアプリを作りたいときは

https://www.pysimplegui.org/en/latest/

Pythonでデザイン性のあるGUIを開発したい場合はこちら
※ライブラリ

## デスクトップアプリを実行ファイル化するときは

https://pyinstaller.org/en/stable/

https://cx-freeze.readthedocs.io/en/latest/

作成したデスクトップアプリを実行ファイルにしたい場合はこちら
※ライブラリ

# 自動化・スクレイピング

## PythonでExcelを自動操作したいときは

https://openpyxl.readthedocs.io/en/stable/

Excelを自動操作したい場合はこちら
※ライブラリ

## PythonでWordを自動操作したいときは

https://python-docx.readthedocs.io/en/latest/

Wordを自動操作したい場合はこちら
※ライブラリ

## Pythonでスクレイピングしたいときは

https://requests-docs-ja.readthedocs.io/en/latest/

https://www.crummy.com/software/BeautifulSoup/bs4/doc/

https://www.selenium.dev/ja/documentation/

スクレイピング、ブラウザ操作したい場合はこちら
※ライブラリ

## Pythonで画像編集したいときは

https://pillow.readthedocs.io/en/stable/

画像編集を自動化したい場合はこちら
※ライブラリ

## Pythonでメールを自動で送りたいときは

https://docs.python.org/ja/3/library/smtplib.html

https://docs.python.org/ja/3/library/imaplib.html

メール操作を自動化したい場合はこちら
※ライブラリ

## Pythonでファイル操作をしたいときは

https://docs.python.org/ja/3/library/os.html

ファイル操作をしたい場合はこちら
※標準ライブラリのため、インストール不要

## PythonでPDF操作をしたいときは



PDF操作をしたい場合はこちら
※ライブラリ

# 機械学習、AI

# データ分析、統計

# IoTシステム

# ロボット制御

# ゲーム
DoctrineとEloquent比較大全14: バッチ更新

day14の今日は、複数のデータを一気に更新するバッチ更新のやり方を見ていきます。

## Doctrine

```php
<?php

declare(strict_types=1);

use App\Entity\Author;
use App\Entity\Book;
use Doctrine\ORM\EntityManagerInterface;
use Doctrine\ORM\Query\ResultSetMapping;

require __DIR__.'/../vendor/autoload.php';

/** @var EntityManagerInterface $entityManager */
$entityManager = require __DIR__.'/bootstrap.php';

// エンティティを使ってやる
for ($i = 1; $i <= 100; $i++) {
    $book = new Book();
    $book->setTitle(sprintf('title%d', $i));
    $book->setPrice(100 * $i);
    $entityManager->persist($book);
}
$entityManager->flush(); // begin + 100件のinsert + commitがここで行われる

// エンティティを使えないぐらい多い件数を扱う場合
$conn = $entityManager->getConnection();
$conn->beginTransaction();
for ($i = 1; $i <= 1000000; $i++) {
    $conn->insert('books', [
        'title' => sprintf('title%d', $i),
        'price' => $i * 10,
    ]);
}
$conn->commit();

// updateもできる
$conn->beginTransaction();
for ($i = 1; $i <= 1000000; $i++) {
    $conn->update('books', [
        'price' => $i * 20,
    ], ['id' => $i]);
}
$conn->commit();
```
<https://github.com/77web/doctrine-vs-eloquent/blob/702e4b4c597f5afb043ad5d2d26b21ad44addf4e/Doctrine/Usecase/batch_insert_update.php>

- 通常のエンティティを用いた保存でもflush()を呼ぶまでinsertやupdateは発行されないので、バッチ更新的になる。
- エンティティはPHPのオブジェクトなので、大量にインスタンスを作るとPHPのメモリを消費しすぎる。それを避けるためにEntityManagerから `getConnection()` を使ってconnectionを取り出してinsert, updateを行うこともできる。（EntityManager::getConnection()の返り値は `Doctrine\DBAL\Connection` ）


## Eloquent

```php
<?php

declare(strict_types=1);

use App\Models\Book;
use Illuminate\Support\Facades\DB;

require __DIR__.'/../vendor/autoload.php';
require __DIR__.'/bootstrap.php';

// insert
DB::beginTransaction();
for ($i = 1; $i <= 100000; $i++) {
    Book::query()->insert(['title' => sprintf('title%d', $i), 'price' => $i * 100]);
}
DB::commit();

// update
DB::beginTransaction();
for ($i = 1; $i <= 100000; $i++) {
    DB::update(
        'UPDATE books SET title = ?, price = ? WHERE id = ?',
        [
            sprintf('title%d', $i),
            $i * 200,
            $i,
        ]
    );
}
DB::commit();
```
<https://github.com/77web/doctrine-vs-eloquent/blob/702e4b4c597f5afb043ad5d2d26b21ad44addf4e/Eloquent/Usecase/batch_insert_update.php>

- モデルを用いてバッチinsert, バッチupdateをするにはサードパーティパッケージが必要
【集え！JavaScript初心者】カレー作りで楽しむプログラミング～propsについて考えてみた～

![こんにちはせかい.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/48d5e313-1d82-3696-7694-610c90f810ca.jpeg)

こんにちは。最近Githubが大草原どころか荒れ地と化しているSarasaです（ただの更新不足）。

**「更新してねえってことはつまり君は勉強をサボっていたということじゃな！！」**

って声が聞こえてきそうなのですが、、、今まですっ飛ばしてきた基礎を改めて勉強していたためです、、涙

ということなので私がこの一ヶ月くらいに調べたことやら学んだことをいつも通りゆるーくまとめていきます。（シリーズ化したいなあ（フラグ

# propsが難しい
Qiita界のエンジニアレベルを下げている要因ランキングやったらダントツ一位獲得できちゃいそうなネタをぶっこみます。

え？でもぶっちゃけ「〇〇をprops化して××という関数にして～」って最初に読んだとき「？？？」ってなりません？？
意味は「コンポーネントに渡される任意のデータ」ってことらしいのですが、
データ渡す？
なんのため？？
状態の私にはこのレベルでも難しい。。

「**あ～もっと身近な話に例えたらわかりやすいのに。。。**」

# もしJavaScriptでカレーを作るとしたら
PC画面とのにらめっこに飽きたので、視点をがらりと変えてみます。
![props.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/4816faf8-2cc1-acee-106e-c6e458fa6f56.jpeg)


今日の晩御飯はカレー。ただ、うさママは日中は予定が詰まっていてどうも晩御飯の時間までに作れそうになく、娘のウサミに晩御飯づくりをお願いすることに。

ママ「ウサミ～」
ウサミ「？？」
ママ「多忙な母に代わってカレーを作ってほしいのだけれど、、」
ウサミ「いいけど材料と調理器具ってどこにあるんだｋっけ」
ママ「**調理器具**はシンクの下よ。あと、**材料**は冷蔵庫に入ってるから」

ここでの**調理器具**と**材料**がpropsになります。

まず、この**調理器具**と**材料**という言葉に含まれる情報を細かく分解してみます。

**調理器具**
なべ、包丁、まな板、木べら、おたまなど、、

**材料**
にんじん、たまねぎ、カレールーなど、、

これらの情報を口頭で伝える際にいちいち
「なべ、包丁、まな板、木べら、おたまetcを揃えてとにんじんたまねぎetcがあればカレー作れるよ」
と言うよりは
「調理器具はこれで、材料は冷蔵庫のやつから使って」
と言った方が簡潔に伝えられますよね。

ちなみに、カレー作りをざっくりとJavaScript風に言い換えると、、

**うさママ（親コンポーネント）から調理器具と材料を引数として受け取り、ウサミ（子コンポーネント）がカレー作りという処理を実行する。**

となります。

# カレー作りの秘訣は、、引数？？
まず、上記をコードとして起こしてみます。
```Makecurry.js
function Makecurry=(props)=>
{
const 調理器具=props.調理器具
const 材料=props.材料
///カレー作りの工程もろもろ///
}
```
（ざっくりしすぎやろ、、、

ここでやたらと``props.``と出てくるのは、「**親コンポーネントから持ってきた要素ですよー**」ということが一目見ただけでわかるようにするためです。

ウサミ（子コンポーネント）はあくまで「カレーを作る工程」をまとめたコンポーネントのため、**それ以外の部分は割愛する**ことで簡略なコードの記述を実現しています。


ちなみに、割愛されたコンポーネントの中身、、つまりうさママからの情報の詳細(**親コンポーネント**)については、

```App.js
<Makecurry
調理器具={[`なべ`,`包丁`,`まな板`,`木べら`,`おたま`]}
材料={[`にんじん`,`たまねぎ`,`カレールー`,`水`,`サラダ油`,`鶏もも肉`]}
/>
```
という記述になります。

# 「わかりやすさ」について分解して考える
この「**（いちいち細かくいうよりまとめて簡潔に言った方が楽っしょ**」という考え方は、プログラミングの中でもよく出てくるので、「なんか見たことない省略方法出てきたんだけど！！」ってなったときは**省略することによるメリット**について考えてみるよいかもしれません。







# 参考ページ
* [Reactを始める](https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
* [ReactコンポーネントへのPropsの渡し方/受け取り方大全](https://zenn.dev/ynakamura/articles/e562376735d398)
タブレットから自宅PC環境を使った開発が簡単にできる。そう、vscodeならね。

そうiPhoneならね。ってネタ今の新卒には通じないんだろうなー。

別にvscodeでなくても出先で開発はできるんだよなぁと思いつつ、最近vscodeに追加されたvscode server使って出先から開発してみようと思います。

厳密に言うとinsidersにはあったんですが、個人的にセキュリティに直結してそうな機能をinsidersで使いたくなかったというのもあって触れてきませんでした。
まあ現時点ではプレビュー版ではあるのですが、安定板の機能ではあるので大丈夫だろうと考えていきたいと思います。

## vscode serverとはなんぞや

2022年11月のver 1.74で紹介された`Remote-tunnel`機能のことです。
7月時点でprivate previewとして公開されていた機能で、ざっくり言うと設定したマシンに出先からアクセスできる機能です。

## 類似のOSSやクラウドサービスとは何が違うのか

従来、出先からコーディングできるツールとしてCoderやcloud9, Cloud Shell editorなどがありますが、それらとの違いはローカルの環境を手軽に引き継げる点です。

cloud9などのサービスは非常に有用なものなのですが、どうしても性能や入力反映のラグなどが気になるところではありました。
そのため、確かに手元の環境を無視して同一の環境を触り続けることができるという大きなメリットがありつつも、自宅に高性能PCを置いている環境では、なぜ手元の環境よりも低性能な環境でコードを書かねばならぬのかといった悩みが生じがちでした。

`Remote-tunnel`の利点は、これを解決できることです。
例えば、ビルドが重いのでローカルで開発が半ば必須となるようなアプリケーションの開発を出社日の朝から行っている際に、

「このビルドが通ったらここを修正してテスト流してgit pushするぞ」

といった場面でどうしても時間が足りず泣く泣く出社し、返ってきたときには進捗が頭から飛んでいる、なんてケースがあったとします。
タブレットからリモデしてなんとか実行することはできなくもないですが、色々と使いづらくあまり快適とは言えません。

`Remote-tunnel`があれば、数クリックで出先からその環境に触れる準備を整えることができ、電車の座席に座りながらタブレットからコマンドを実行してgit pushなんてことができます。

## 実際にやってみる

ウィンドウ左下のユーザーアイコンをクリックし、Githubアカウントにサインインして`リモートトンネルアクセスを有効にします…`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532032/7fa8ad7f-e96e-2b7b-5a76-0703000d093e.png)

すると、プレビュー機能であることを通知するポップアップが立ち上がるので、これを了承します。
了承するとウィンドウ右下に有効になった旨の通知が表示されるので、`ブラウザーリンクをクリップボードにコピーする`をクリックします。

コピーしたリンクをSlackなどで操作先の端末に共有し、操作先の端末からそのリンクを踏みます。

リンクを踏むとGithubアカウントへのログインを要求されるのでログインします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532032/92b6faf6-dc4b-3e35-b1a2-ccc005880576.png)


以上、終わりです。操作先の端末にインストールされているvscodeで操作したいなどの要件があればまた話は変わりますが、タブレットで自宅環境を利用してコードを書きたいなどであればこれ以上のことを実施する必要はありません。

ちなみに↑の画像はPCで開いた画面ですが、タブレットでも実行できました。
環境は出低スペ高コスパタブレットの代名詞、`kindle fire HD 10 Plus`です。自宅で眠ってたので引っ張り出しました。
ラグは無視できない程度にありましたが、実用上問題が生じるレベルではありませんでした。普通に利用できます。


## WSL環境の場合の注意点

これまでの操作をWSLにいるvscodeで実行した場合、期待した結果とは異なる結果が引き起こされます。
期待すべき結果はWSL環境にアクセスできることですが、実際はWindwsのユーザー直下が開くことになります。

これを回避するには、wsl側にcli版vscodeを持ってくる必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532032/c6c28cbb-4b51-e126-12cb-bbadab4dc487.png)

こちらから圧縮されたファイルを取得し、wsl側で解凍します。
解凍すると`code`ファイルが出てくるので、明示的にそれを指定する形で以下のコマンドを実行しましょう。

```
./code tunnel
```

するとvscode serverを立ち上げる旨とライセンス承認を求められるので問題なければyesと回答しましょう。
そしてgithubへのloginを求められるので、画面の案内に沿って進めます。
ログインが終われば、端末名を求められるので適当に答えます。

```
> ./code tunnel
*
* Visual Studio Code Server
*
* By using the software, you agree to
* the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
* the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
*
✔ Do you accept the terms in the License Agreement (Y/n)? · yes
To grant access to the server, please log into https://github.com/login/device and use code XXXX-XXXX
✔ What would you like to call this machine? · hogehoge
```

終わるとvscode serverが立ち上がります。

共有用のリンクが発行されるので、そちらをクライアント側で開きましょう。
AWS Cost Anomaly Detection のススメ

これは [デジタルキューブ ＆ ヘプタゴン Advent Calendar 2022](https://qiita.com/advent-calendar/2022/digitalcube-heptagon) 14日目の記事です。

re:Invent での怒涛のサービス発表も終わり、さまざまな気になるサービスが出てきましたね。
個人的に気になったのは、以下のトピック

[Amazon EFS](https://aws.amazon.com/jp/efs/) に新たに Elastic throughput モードが追加
[NEW – Amazon EFS Elastic Throughput の発表](https://aws.amazon.com/jp/blogs/news/new-announcing-amazon-efs-elastic-throughput/)
> 2022/11/27、Amazon EFS Elastic Throughput が利用可能になったことをお知らせします。これは Amazon EFS の新しいスループットモードで、アプリケーションに必要なだけのスループットを従量制料金で提供するように設計されています。この新しいスループットモードでは、プロビジョニングやキャパシティ管理を必要としない共有ファイルストレージを提供することで、AWS でのワークロードとアプリケーションの実行をさらに簡素化できます。

[Amazon RDS](https://aws.amazon.com/jp/rds/) で Blue/Green デプロイメントが可能に
[新機能 – Amazon Aurora と Amazon RDS でのフルマネージド型 Blue/Green Deployments](https://aws.amazon.com/jp/blogs/news/new-fully-managed-blue-green-deployments-in-amazon-aurora-and-amazon-rds/)
> データベースを更新する場合、ブルー/グリーンデプロイ手法の使用は、ユーザーがリスクとダウンタイムを最小限に抑えるための魅力的なオプションです。この方法でデータベースを更新するには、現在の本番環境 (ブルー環境) とステージング環境 (グリーン環境) の 2 つのデータベース環境が必要です。次に、変更を安全にテストして本番環境にアップグレードできるように、これら 2 つの環境を相互に同期させる必要があります。

Amazon Linux 2022 の公開が延期になり、Amazon Linux 2 の EOL がさらに1年伸びて 2025-06-30 に

[Amazon Linux 2 FAQs](https://aws.amazon.com/amazon-linux-2/faqs/?nc1=h_ls)
> Q. When will support for Amazon Linux 2 end?
>
> Amazon Linux 2 end of support date (End of Life, or EOL) has been extended by two years from 2023-06-30 to 2025-06-30 to provide customers with ample time to migrate to the next version.

仕事で、EFS, RDS, Amazon Linux にお世話になってるので、この辺気になります。

特に EFS の Elastic スループットモードは良い感じにしてくれるとのことなので、早速実践投入してみました。
...ところが、翌日 [AWS Cost Anomaly Detection](https://aws.amazon.com/jp/aws-cost-management/aws-cost-anomaly-detection/) さんから、恐ろしいメールが...
![スクリーンショット 2022-12-14 22.23.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25964/3d08efde-3c75-9945-f66b-348a1bab5c0c.png)

`Max Daily Impact 1,526.43` ! 1日で $1,500 ですと !
WordPress の Web ドキュメントルートとして使ってるのですが、どうも読み込みが多く発生してしまって、とんでもない数字になってしまったようです...
こんなん気づかずに放置してたら、致命傷になるところでした...

ちなみに Elastic スループットリクエストの料金体系は、こんな感じです。
- Elastic スループットリクエスト - 読み取り (転送 1 GB あたり)	0.03USD
- Elastic スループットリクエスト - 書き込み (転送 1 GB あたり)	0.06USD

今回ばかりは、即実践は危険だったのでした...ごめんなさい

# AWS Cost Anomaly Detection

さて、今回の異常なコストアップを検知したのは、[AWS Cost Anomaly Detection](https://aws.amazon.com/jp/aws-cost-management/aws-cost-anomaly-detection/) というサービスです。

仕組み
![cad_d.6836df83c95b867c3332ca93fff617df2f3a63c2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25964/797e3689-d9f3-6e5e-aa47-8fca4a60d66b.png)

要は、良い感じに支払額を監視しておいてくれて、いきなり跳ね上がったものを検知したら通知してくれる頼もしいやつです。
オーガニゼーションで AWS アカウントをまとめてあるのであれば、親アカウントで設定しておけば、子アカウントの請求額でも異常検出したら通知してくれるので便利です。
(まぁ、新機能に飛びつく前にまずはちゃんとコスト計算しなさいという話なのですが...)

通知先は [Amazon SNS](https://aws.amazon.com/jp/sns/) のトピックを指定できるので、メールでも Slack でもお好きなところに通知できます。
設定も AWS コンソールからぽちぽちするだけなので、とりあえず設定しておきましょー
[Cost Management](https://us-east-1.console.aws.amazon.com/cost-management/) の 「Cost Anomaly Detection」 から設定できます。
![スクリーンショット 2022-12-14 22.41.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25964/15ff342a-4fda-c7fc-8c15-e0d6e1de7379.png)

現場からは、以上です。
個人的なメモ

# 歩行速度と音楽のテンポに関して
音楽聞きながら歩く（orジョギングする）とテンション上がりますよね。
私は上がります。
さらに、流れている曲のテンポに合うように歩いたりするとMVの登場人物みたいな気分になります。

そこで、逆に現在の歩行速度を検知して、それに合致した曲を流してくれるシステムがあってもいいんじゃないかと思いました。
が、軽く調べてみてもそういったアプリや研究も見当たりませんでした。
もう少しサーベイすればなんか引っかかるかもしれないけど。

速度とか振動検知して、そのBPMに一致するような曲をレコメンドしてくれるシステムないかな～。
これだけだと、レコメンドというか、あれなので曲を流しているときのコンテキストも考慮するともう少しいいかも？

気が向いたらやるか～。
【技術書まとめ】HTML&CSS コーディング・プラクティスブック 4 実践シリーズ

引き続き現在のCSSを整理するために本書を手に取った。

## 作成したデモサイト
https://extraordinary-croquembouche-992086.netlify.app/index.html

## PCサイズのときだけ改行する

```css
h1 br {
  display: none;
}

@media (min-width: 768px) {
  h1 br {
    display: inline;
  }
}
```


## 画像の基本設定と高さ固定のレスポンシブ対応

```css
figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
```

## aタグをinline-blockにした基本のボタン

```css
.btn {
  display: inline-block;
  margin-top: 40px;
  padding: 10px 40px;
  border-radius: 4px;
  background-color: #f1a816;
  color: #ffffff;
  font-size: 16px;
}
```

## 横幅の最大値を32文字分にする（レスポンシブ対応含む）

```css
.msg p {
  max-width: 32.2em;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
}

@media (min-width: 768px) {
  .msg p {
    font-size: 16px;
  }
}
```

## max-widthとmargin:0 auto;で中央に配置する

```css
.msg p {
  max-width: 32.2em;
  margin: 0 auto;
}
```


## ヒーロー見出しの改行を有効化する

```css
.hero h1 br {
  display: inline;
}
```

## PCサイズのときには順序を入れ替えた横並びにする

```css
@media (min-width: 768px) {
  .hero {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1088px;  /*　最大幅を指定する */
    margin: 0 auto 74px;
    padding: 0 20px;  /* 最低限の余白をつくっておく */
  }
}
```

## 横並びにしたテキストdivのサイズを固定して画像を伸縮させる

```css
@media (min-width: 768px) {
  .hero {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1088px;
    margin: 0 auto 74px;
    padding: 0 20px;
  }

  .hero img {
    height: 100%;  /* 画像サイズをテキストdivと合わせるように可変させる */
  }

  .hero .text {
    flex: 0 0 485px;  /* テキストdivの幅を固定する */
    margin: 110px 0 39px;
  }
}
```

## 最後の要素以外にmargin-bottomをつける

```css
.sys:not(:last-child) {
    margin-bottom: 54px;
}
```


## 幅1088pxの場合に幅126pxとしたいが、レスポンシブで画面が小さくしたときにテキストが詰まってしまう

- `126/1088*100`の`12%`として余白を設定する

```css
  .sys .text {
    margin-right: 12%; /* 126px -> 12% に変更した */
  }
```
[#Node-RED]flows.jsonのフォーマットを見てみる

# 目的
Node-REDはビジュアル言語なので、他の言語のようなユーティリティは作りにくそうに思えます。しかし、プログラムはflows.jsonというJSONファイルに保存されますので、基本的な構造さえわかれば色々なツールを作ることができます。今回は、flows.jsonのフォーマットのうち、解析に役立ちそうな内容を説明します。

# flows.json
Node-REDのプログラムをデプロイするとユーザディレクトリ（デフォルトは~/.node-red）に出力されるのがflows.jsonです。このjsonファイルはプログラムそのもので、タブとタブ内のノード（モジュール）などのオブジェクトの各プロパティ（設定値）が保存されています。
flows.jsonは書き出しメニューから、全体、タブ単位、選択部分をクリップボードやファイルに書き出すこともでき、整形出力も可能です。

# すべては一つの配列に

複数の種類のオブジェクトが、すべて一つの配列に並んでいて、種類（type）で区別されます。種類ごとに配列を分けた方がわかりやすいかなとも思いますが、
- 階層が深くならない
- すべてのオブジェクトを同じように扱える
- 拡張性が高い
といった利点があると思います。

# 配列の並び順
配列の並び順は、タブ、グループ、オブジェクトの順で、同じ種類の中は基本的に作成した順に並んでいます。ただし、タブは表示位置を変えると表示順に並べ変えられます。

# オブジェクトはidで識別
タブ、グループ、ノードなどオブジェクトはidで識別されます。ノード間の接続はオブジェクトではないのでidはなく、接続先のノードのidが示されるだけです。

# ノード間の接続とタブは一方向、グループとリンクは双方向
ノード間の接続は接続元のwiresで、タブはノードのzで一方向に示されます。グループはグループのnodesとノードのg
で、リンクはlink in、link out、link callのlinksで双方向に示されます。エディタの操作の都合浄双方向にしないと不便なのでしょう。
なお、link outはmodeによってlinkとreturnが示されます。

# タブの名前はlabel、それ以外はname、説明はinfo
flows.jsonを解析すると名前を使いたくなると思います。タブの名前はlabel、それ以外はnameで示されます。なお、、説明はすべてinfoです。

# 今は昔
かつてのNode-REDはflows.jsonのバックアップファイルがなく、起動時の処理で無限ループになると整形されていないflowsjsonを編集して直すなどしていました。今はそんな必要はなくなりましたが、整形されたJSONはわかりやすいので、ぜひ一度覗いてみてください。Node-REDの処理の都合や様々なツールへの応用が思い浮かぶでしょう。

# サンプルフロー
[[#Node-RED]flows.jsonからノード一覧を作成する](https://qiita.com/sakaba37/items/14215a7d87317a8f67f3)
[[#Node-RED]flows.jsonからリンクノード一覧を作成する ](https://qiita.com/sakaba37/items/3b16abbb665d75165cfa)
shap の force plotを、グラフではなく、数値やデータとして取得したい。

# 起きた問題
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96675/29ccdfa5-4909-0933-fb23-57fcb568beea.png)
wsl上で、Shapの force_plotのグラフを出力しようとしたが、なんかもうレイアウトが崩れまくる。

特に特徴量の名前がぐっちゃぐちゃ。

# やりたいこと
このままでは、どの特徴量の影響度が高いのかわからない。
グラフで出すのは良いんだけど、テキストで見やすく出力したい。

できれば、数値のデータも取得して自分で分析できるようにしたい。

# 解決策

`force_plot` の `matplotlib` を `False`にすると、　`shap.force_plot` は `AdditiveForceVisualizer` のオブジェクトを返す。

`AdditiveForceVisualizer` はこんな感じの構造になっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96675/9df30399-b11a-6b81-19f8-5bc6b7cfd2b8.png)

つまり、`data` に特徴量の名前(`featureNames`)や、影響度(`effect`)を持っている。

ので、こんな感じで出力してやると `effect` の大きい順に出力できる。
```Python
ret=shap.force_plot(explainer.expected_value[0], shap_values=shap_values[0], features=prediction_row,feature_names=fn, matplotlib=False,link="logit",show=True, contribution_threshold=0.001)
feature_array = []
for i in ret.data["features"].keys():
    featureName = ret.data["featureNames"][i]
    feature = ret.data["features"][i]
    feature["name"] = featureName
    feature_array.append(feature)

feature_array = sorted(feature_array, key=lambda x: x['effect'],reverse=True)

for feature in feature_array:
    print(feature)
```
BlenderでMMDのモデルを読み込んで編集した後、Unity(URP)にfbx・Blendファイルで取り込む (2) ~モーション~

※11/17 修正　致命的な間違いがあったため修正しました。
# １.はじめに  
この記事は前回の続きである。MMDのBlenderでの編集やUnityでのモデルの取り込み方などは前回の記事を参照  
[・BlenderでMMDのモデルを読み込んで編集した後、Unity(URP)にfbx・Blendファイルで取り込む (1) ~モデルのインポート~](https://qiita.com/ksmkzs/items/2e0cc9afaf729cf522dc)

# 2.モーションデータのインポート  
## 2.1 必要パッケージのインストール

モーションデータ(vmdファイル)をインポートしてモデルに動きをつけるためには、UnityでMMDを読み込むための追加パッケージが必要である。~~本末転倒感。~~
[・MMD4Mecanim](http://stereoarts.jp)
こちらのページからMMD4Mecanimをダウンロード、解凍して、パッケージとしてUnity内にドラッグ&ドロップをする。  
その後、**MMD4Mecanim.unitypackage**、**MMD4Mecanim_URP.unitypackage**を実行する。

## 2.2　モーションデータを読み込むには  
まず、適当なpmxファイルがあるフォルダとモーションデータのあるフォルダをAssetウィンドウにドラッグ&ドロップする。  
今回はニコニ立体ちゃんを例として使用する。  
すると、{pmxファイルの名前}.MMD4Mecanimというファイルが生成されていることがわかる。
そのファイルを選択し、利用規約を読み同意するをクリックすると、以下の画面に遷移する。
![スクリーンショット 2022-12-14 22.24.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3066359/f2ae59f3-b338-c20d-ff8c-b3b9f6e0c758.png)
VMDと書かれている部分に、Unityに読み込ませたいモーションデータを好きな数ドラッグ&ドロップするなりして追加する。
※11/17 追記  
ここで画像右上のAdvanced Modeをクリックし、設定からBone4Mecanim、BoneRenameのチェックを外す。　他はチェックをつける(要検証)。
完了次第Processをクリックする。  
終了すると、FBX Pathで指定された場所にfbxファイルが生成されており、そこにモーションデータが存在することがわかる。  
その後fbxファイルを選択し[Rig]から[Humanoid]を選択し、[Configure]から[前回の記事](https://qiita.com/ksmkzs/items/2e0cc9afaf729cf522dc)と同様の設定をする。  
[Done]を押し設定を確定させると、モーションのインポートが完了する。 
# 3.モーションさせる  
確認としてモデルをモーションさせてみよう。シーン内のモデルを選択し、右側の[Inspector]タブから[Add component]をクリックし、Animeterを選択して追加する。
![スクリーンショット 2022-12-14 22.30.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3066359/a9049743-38fc-b065-e6a9-6488593af79b.png)
Animeter内の[Controller]には使用したいモーションやアニメーションコントローラーを追加する。Avaterは前回の記事でRigを作っている場合はデフォルトで設定されているはずだが、Noneになっている場合は[{モデル名}Avatar]を探すなどして追加する。 
この状態で[Play]を押すとキャラクターがモーションすることが確認できるはずだ。
Floss manager not present, cannot set Floss enable/disable. 【WARNING:bluez_dbus_manager.cc(247)】

フロス マネージャーが存在しないため、フロスの有効化/無効化を設定できません。

フロス マネージャーが見つからないようです。

# 参照

https://source.chromium.org/chromium/chromium/src/+/main:device/bluetooth/dbus/bluez_dbus_manager.cc;drc=697e7e0df4f2d9bc7189c1358100705662e4c4ef;l=74

https://source.chromium.org/chromium/chromium/src/+/main:device/bluetooth/dbus/bluez_dbus_manager.cc;drc=0db8484358ae6bbb88621f2dfc601a561a1e5ac6;l=247

https://picscels.site/conoha-wing-chromium-selenium/

https://github.com/microsoft/playwright/issues/15510

https://bugs.chromium.org/p/chromium/issues/detail?id=993686

https://laracasts.com/discuss/channels/testing/dusk-all-routes-fail-with-unknown-command
InitializeSandbox() called with multiple threads in process gpu-process.[WARNING:sandbox_linux.cc(380)]

```bash
$ google-chrome-stable --headless --disable-gpu --disable-dev-shm-usage --dump-dom https://domains.google.com/checkip
[1224/004108.222580:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
[1224/004108.242047:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.
<html><head></head><body>35.229.216.43</body></html>
```

# `--single-process`にすると警告がでません

```bash
$ google-chrome-stable --headless --single-process --disable-gpu --disable-dev-shm-usage --dump-dom https://domains.google.com/checkip
[1224/004248.774261:WARNING:audio_manager_linux.cc(60)] Falling back to ALSA for audio output. PulseAudio is not available or could not be initialized.
[1224/004248.777145:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.
<html><head></head><body>35.229.216.43</body></html>
```

# 参照

http://chrome.half-moon.org/43.html
Laravel のメソッドインジェクションの注意点

## コンテキストによる使い分け

https://readouble.com/laravel/8.x/ja/container.html#contextual-binding

Laravelでは↑にあるように、サービスコンテナに登録されたクラスなら、依存注入する際にコンテキストによって注入されるインスタンスを変更することができます。
例えば、以下のコードなら、
`VideoController::class` か `UploadController::class` にて、 `Filesystem::class` の依存解決をする場合に、 `Storage::disk('s3')` が注入されます。

``` .php
$this->app->when([VideoController::class, UploadController::class])
  ->needs(Filesystem::class)
  ->give(function () {
      return Storage::disk('s3');
  });   
```

## メソッドインジェクションでは適用されないっぽい

ただし、これはコンストラクタの引数における依存解決でしか適用されないようで、
メソッドの引数における依存解決ではこちらのコンテキストの処理は無視されるようです。
上記のコードだと、


`VideoController` の `__construct(Filesystem $system)` には `Storage::disk('s3')` が注入されるが、
`VideoController` の `someMethod(Filesystem $system)` には 注入されず、 `Filesystem::class` がそのまま使われます。

もちろん、 `Filesystem::class` が抽象クラスであれば `someMethod(Filesystem $system)` が呼ばれれば読み込みエラーになります。


## 検証環境

```
Laravel Framework 9.16.0

PHP 8.0.22 (cli) (built: Aug  4 2022 22:25:40) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.22, Copyright (c) Zend Technologies
```
MacによるJavaのセットアップ

# Homebrewをインストール
```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

# Javaインストール
```console
brew tap homebrew/cask-versions

# Java8
brew install --cask temurin8

# Java11
brew install --cask temurin11

# Java17
brew install --cask temurin17
```

# インストール済みバージョン確認
```console
/usr/libexec/java_home -V
```

# Javaのバージョン切り替え
```vim:~/.bash_profile
export JAVA_HOME=`/usr/libexec/java_home -v "<バージョン番号>"`
PATH=$JAVA_HOME/bin:$PATH
```

```console
source ~/.bash_profile
```
※Java8にする場合はバージョン番号に「1.8」を指定する


# 参考

https://amateur-engineer.com/mac-java-version/

https://engineering.mobalab.net/2022/06/06/how-to-install-java-on-macos-in-2022/
cat: 書き込みエラー: Broken pipe/cat: write error: Broken pipe

grepやheadが閉じてcatに`SIGPIPE`が送られるとタイトル回収

```bash
cat file.txt | grep "pattern"
```

```bash
cat 1000.txt | head
```

# 参照

https://qiita.com/ko1nksm/items/ce38f521506aa0fb08af

https://stackoverflow.com/questions/49664991/why-am-i-getting-cat-write-error-broken-pipe-rarely-and-not-always
フロントエンドエンジニアのための Riverpod

# はじめに

[Riverpod](https://docs-v2.riverpod.dev/) は状態管理パッケージです。フロントエンドエンジニアの方なら1度は聞いたことがある [Recoil](https://recoiljs.org/) と設計が似ているため、この記事では Riverpod と Recoil を比べていきます。

# 本題

## 使用するための準備

Recoil では [RecoilRoot](https://recoiljs.org/docs/introduction/getting-started#recoilroot) の設定を行います。

```src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { RecoilRoot } from "recoil";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

```

Riverpod では ProviderScope の設定を行います。

```lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}
```

## ステートの作成

Recoil では [Atom](https://recoiljs.org/docs/introduction/getting-started#atom) を使用してステートを作成します。

```src/states/count.ts
import { atom } from "recoil";

export const countState = atom({
  key: "countState",
  default: 0,
});
```

Riverpod では Provider を使用して作成します。今回は [StateProvider](https://docs-v2.riverpod.dev/docs/providers/state_provider) を使用します。

```lib/data/provider/count_provider.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';

final countProvider = StateProvider<int>((_) => 0);
```

## ステートの取得・更新

Recoil では useRecoilState を使用してステートを取得します。また、変更するための関数も useRecoilState を使用して取得します。

```src/components/Counter/index.tsx
import { useRecoilState } from "recoil";
import { countState } from "../../states/count";

export const Counter = () => {
  const [count, setCount] = useRecoilState(countState);

  return (
    <div>
      <div>count: {count}</div>
      <button type="button" onClick={() => setCount((prev) => prev + 1)}>
        add
      </button>
    </div>
  );
};
```

Riverpod では ConsumerWidget を継承したウィジェットを作成し、 WidgetRef を使用してステートを取得します。また、変更する際は `update` 関数を使用します。

```lib/ui/components/counter.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:sample/data/provider/count_provider.dart';

class Counter extends ConsumerWidget {
  const Counter({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(countProvider);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'count: $count',
          ),
          TextButton(
            onPressed: () {
              ref.read(countProvider.notifier).update((state) => state + 1);
            },
            child: const Text(
              'add',
            ),
          )
        ],
      ),
    );
  }
}
```

# おわりに

比べてみるとかなり似ていることが分かります。 Recoil を使用したことがある方はぜひ Riverpod を使用してみることをおすすめします。
VSCodeのPluginのキーマップを変更する。

## はじめに
普段はVSCodeでGolangやTypeScriptの開発をしております。VSCodeはPluginで自由にカスタマイズができる事がいいことなのですが、今回はPluginを入れたことで、キーマップが上書きされた場合の対処法を記載しました。

## 結論
VSCode Pluginのキーマップは下記ディレクトリの設定ファイルを変更すれば良い。
```:対象ディレクトリ
~/.vscode/extensions/plugin/{設定ファイル}
```

## 経緯
VSCodeでGolangの開発を実施時に、Interfaceの実装先をショートカットで飛びたいなと思う所が最初でした。
調べてみると`IntelliJ IDEA Keybindings`で実装先に飛べるとの事で、導入してみました！！その結果、`cmd + alt + b`で飛べた！！
やったーと思っていると、あれ？普段使っている`cmd + d`が行の複製になっている？？あれ？なんでと思っていると、あ、ショートカットが上書きされている。。。色々調べたのですが、VSCodeから変更する手段が見当たらず、Pluginの導入を諦めていました。

![スクリーンショット 2022-12-14 21.23.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/ef18befd-2546-e742-593d-754f4d3d450e.png)

https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings

そんな時、あれ？Pluginってローカルのどこかに置いてあるんだから、無理やり変更すれば良くない？？とおもい、VSCodeのpluginのインストール先を調べてみることに。すると、`~/.vscode/extensions`に配置されているのを発見。`k--kato.intellij-idea-keybindings-1.5.2`のどこかに定義ファイルがあるから、探してみた。
![スクリーンショット 2022-12-14 21.30.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/9162f2c4-b9c8-bf07-76bc-0f29ad0eed61.png)

あった！あった！！！これを変更したら、行けました！！
![スクリーンショット 2022-12-14 21.37.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/a8f31547-2a7d-8058-4d45-fc7a5b3bc4ba.png)

## 最後に
振り返ってみると大したことないんですが、ちょっとしたストレスが解消されてよかったです！！
JavaのDIについてまとめ+ おまけ(よく使ってた機能)

### DIとは

- Dependency Injection(依存性注入)の略
- オブジェクトの成立に必要なコードを分離し、プログラム実行時に注入する手法
- 例：2つのクラスの間に依存関係があり、そのうちの1つのクラスが完成していない場合
完成済みのクラスをテスト（単体テスト）はできない
しかし、依存性注入によってクラスの依存関係が解消され、完成済みクラスをテストすることが可能
- このため、システムを改修する場合も最低限の変更で済ませることができ、開発が楽になる

今回の学習では以下の手順でDIを導入(DIの有無で動作確認の為)

1. 非DIのプロジェクトをコピー
2. 以下を３つをBean化
    1. コントローラー
    2. サービス
    3. リポジトリ

## 実例

例：2つのクラスの間に依存関係があり、そのうちの1つのクラスが完成していない場合

### DIなし

![スクリーンショット_2022-04-06_14.35.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/3894b7fa-54e0-50ef-8a1f-673980b31de6.png)

※完成済みのクラスをテスト（単体テスト）はできない

### DIあり

![スクリーンショット_2022-04-06_14.35.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/0694ebb3-229e-3bf1-45ad-765897093dee.png)

**依存性注入によってクラスの依存関係が解消され、完成済みクラスをテストすることが可能**

### その他のテストの例

存在しないURL

### DIなし

![スクリーンショット_2022-04-06_15.42.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/69b4f7c9-a691-b34d-399f-2dba57e45681.png)

### DIあり

![スクリーンショット_2022-04-06_15.43.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/65d14fc1-e727-066f-5978-c05cdbe43186.png)

不要な文字が入っている場合

### DIなし

![スクリーンショット_2022-04-06_16.18.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/71744461-1a33-c0ec-3df8-141b863a239c.png)

### DIあり

![スクリーンショット_2022-04-06_16.19.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/2a0ab118-cc76-8a7f-9927-52382d0c1d7d.png)

### DIの有無のコード比較

![スクリーンショット_2022-04-06_21.23.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/907e8fbb-385d-b6cc-5534-5a80fa98226a.png)
![スクリーンショット_2022-04-06_21.26.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/158d770c-94f3-0467-9f27-57168c04d72b.png)


## 確認すること

- [ ]  spring-boot-starter-parentのバージョンが新しすぎないか

demoプロジェクト内のと比較しましたが問題なし

![スクリーンショット_2022-04-06_9.34.00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/08c3622a-c09a-8950-fa90-f0fe59beb3eb.jpeg)

- [ ]  Mavenの更新はしたか
1. pom.xmlで右クリック⇒Maven⇒プロジェクトの更新
    
![スクリーンショット_2022-04-06_9.39.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/f3ed022a-bd0c-513d-a91f-26a87332d05c.png)
    
2. pom.xmlのエラーが出ているプロジェクトを選択しOK
    
![スクリーンショット_2022-04-06_9.40.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/321e1f2d-785f-c499-c723-624edbe9933d.png)

### エディタの分割

ファイルのタブをクリックしてエディタのウィンドウにドラッグ

ドラッグの位置により水平か垂直か視覚的にわかるので好きな方で。

参考サイト：

[Eclipse - エディタ関連 - エディタ分割](https://freebsd.sing.ne.jp/tool/07/05/05.html)

### コードの比較

主な用途：同じコードを元に、違うコードを書くときに使用

![スクリーンショット_2022-04-06_21.25.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/383d3576-1476-6f6b-4602-d9c845dcc0e1.png)
![スクリーンショット_2022-04-06_21.26.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/8c92c91b-cd94-4b01-3904-5ae159c846ff.png)
競プロでRustを1年間使ってできるようになったこと・ならなかったこと

# はじめに

弊社ではRustが主要開発言語になっています。

私はRustが何もわからなかったので、せっかくなら競プロを再開するついでに使ってみようと考えました。そこから1年ちょっと経ち、なんやかんやあって青コーダーになれたので、1年間何をやったのか振り返って、結局何ができるようになって何ができないままなのかを紹介します。

![レーティング.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656409/9539ac67-a1f6-8b6d-f3d4-d2c582543d8d.png)
2021年の6月からRustを使い始めています。Rustで1000問解いたみたいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656409/768fa406-94e8-f06a-e2e2-97c0b2d10c53.png)


# 結論

* できるようになったこと
  * `HashMap`,`BTreeSet`,`BinaryHeap`,`VecDeque`などのデータ構造が困らない程度に使えるようになった
  * `Option`の`map`メソッドや`Iterator`の`sum`メソッドなどで（forやifを使用せずに）簡単に書けるようになった
* できるようにならなかったこと
  * 非同期処理, 並列処理
  * ライフタイムの理解
  * ファイル入出力
  * 1.42よりも新しいもの
    * オンラインジャッジシステムのバージョンが1.42なので......
  * Rustらしい書き方
    * 解くだけなら動けばOKなので、どう書くのがRust的なのかは身につきませんでした

要するに、競プロで要求される程度のことができるようになりますが、使わないものはできるようになりません（それはそう）。でもググって見つけたコードを読んだりコンパイルエラーに対処する能力は上がっている気がします。

# やったこと
1. 普通に解く
    コンテストの問題を普通に解きました。この時点で
    * usize型はマイナスになった瞬間にpanicするので不等号の比較はなるべく足し算で行う
    * 文字列型のn文字目を`s.chars().nth(n).unwrap()`でとると遅いので`s.chars().collect::<char>()`のようにしてベクタで保持しておく
    * `for v_i in v`みたいに書くとmoveされるので`for &v_i in &v`みたいに書く
    あたりを知りました。
    
2. シンプルな関数・構造体を自作ライブラリとして整備する
    簡単なアルゴリズムをwikipediaなどから引っ張ってきて実装しました。疑似コードをそのまま書いた感じでRust特有の問題は特に踏まなかったのですが、ドキュメンテーションコメントを書くのは楽しかったです。
    * UnionFind
    * 最大公約数、素因数分解など
    * modint

3. ちょっと複雑な関数・構造体を自作ライブラリとして整備する
    型パラメータを受け付けるものを整備し始めました。
    * 二分探索
      * クロージャを引数に渡すようにしましたが、クロージャで型パラメータが必要なんだぁとなりました
    * セグメント木
      * 木に乗せる型も演算する関数も型パラメータです。結構頑張って実装しました

# おわりに

12/24（土）に弊社主催のABCがありますのでよろしくお願いします！！！！！！！！

https://atcoder.jp/contests/abc283
PowerPointでカウントダウンのアニメーションを作る

PowerPointでカウントダウン(またはスロットマシーンとか)のアニメーションを作る方法を思いついたので共有します。

# 作り方
## 1.表示したい文字を用意する
テキストボックスを用います。中央揃えにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984781/0bc7d835-8469-944b-5e1b-dc0a4fe665e2.png)
幅を狭くしましょう。狭くしすぎると文字の位置がおかしくなるので注意してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984781/41246f75-73e6-06c2-17a3-2770bfe77e8d.png)

## 2.直線アニメーションを適用する
直線アニメーションを適用します。
アニメーションの移動先を9の次が1になるようにうまく調整してください。

:::note info
Shiftキーを押しながら移動させるとずれません。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984781/001a09bc-bc15-b298-7601-c5c7fc78984c.png)

アニメーションウィンドからアニメーションのプロパティを選択し、「滑らかに開始」と「滑らかに終了」の値を0にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984781/6040fa95-d438-dd68-8802-91c1ad5024ed.png)
タイミングも「開始」を「直前の動作と同時」
「繰り返し」を「スライドの最後まで」に変更します。
継続時間はお好みで変えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984781/eda50b2c-661e-f3f3-72ee-d8cda6a2bf7e.png)

## 3. 表示したい長さ分コピーする
表示したい長さ分コピーして貼り付けてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984781/cd0022b4-6fb8-ff33-a0a0-44651ae1da56.png)

## 4.上と下を隠す
背景色と同じ図形を2つ追加して上と下を隠します。
(今回はわかりやすくするために青色です。)
ただし、一番下の文字(今回は9)は隠さないでください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984781/cdacaaad-58d1-99a7-98be-31371b365bff.png)

## 完成
これで完成です。
あとは値を変えたり継続時間を変えたり開始時間にディレイをかけたりしてください。
![ezgif-1-0fda17ab37.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984781/a47a491e-ffab-30e8-b245-9bc596fbee4f.gif)
(0忘れてた。)
AWSの構築で困った時の調べ方フロー

# 初めに
「AWSの構築をしていてなんかうまくいかない...」
「ワッ...突然動かなくなっちゃった...」
こんな時、皆さんどのように対処していますか？
とりあえずサービス名+エラー文で検索したり、思い当たる仮説を片っ端から検索したりしていませんか？

圧倒的...効率の悪さ...！

こんな現状に危機感を覚えた私は、
構築がうまくいかない時の対処フローをまとめた記事はないかと調べてみたものの箸にも棒にもかからず...
なんで誰もまとめてないんだい！？！？！？
という思いでこのまとめを記しています。

私自身の経験が豊富なわけではないので、中身は薄いです。。。

他にもおすすめのリソース、手順があればどしどしコメントください！

# 構築で困った時のフロー
## 公式ドキュメントをよく読み、ミスがないか探す
何はともあれ、ドキュメントが命です。
カップヌードルの逸話があるくらいには読みにくいAWSのドキュメントを読みたくない気持ちもわかります。
ただ、読みにくくても公式ドキュメントをしっかり読むことで多くのことは解決します。
補助的にQiitaやZennを見るのはもちろんGoodです！

https://docs.aws.amazon.com/ja_jp/

## 現象を言語化する
ここでえいや！と検索したくなる思いをグッと堪えます...
まずは落ち着いて、現状の状況を **"言葉"** として整理します。
声に出す、紙に書く、Slackで質問する、どんな形でも良いので言語化しましょう。

慣れない人は5W1Hを意識すると良いかもです。
- いつ：今も起きているのか、毎回発生するのか
- 誰が：どのアカウント、どのIAMで発生するのか
- どこで：どのリージョン、どの開発環境、どのOS、どの端末で発生するのか
- 何を：どのリソースを
- どのように：発生した事象により何が起こったのか、どんなログが出ているか、発生する前と後で何をしたか

詳しくは[クラスメソッドさんの記事](https://dev.classmethod.jp/articles/aws-troubleshooting-links/)を参照すると良いです。

## 公式サポートドキュメントを見る
現象が言語化できたら整理された同様の過去事例がないかを探してみます。
以下の3つの公式リンクを参照するとよいそうです。
もはや公式認定のDevelopersIOですが、AWSテクニカルサポートノートというタグがあり、ナレッジセンターと同じQ＆A形式の記事があります。

https://docs.aws.amazon.com/ja_jp/awssupport/latest/user/troubleshooting.html

https://aws.amazon.com/jp/premiumsupport/knowledge-center/

https://dev.classmethod.jp/search?tags=AWS%E3%83%86%E3%82%AF%E3%83%8B%E3%82%AB%E3%83%AB%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%83%8E%E3%83%BC%E3%83%88&page=1

## Google検索で同様の事象を探す
ここでお待ちかねGoogle検索です。
サポートにない場合、先人の知恵を借りに行きましょう。
StackOverflowやGithubなどで質問されていないかを探しましょう。

## 仮説を立てる
それでも見当たらなかった場合、ニッチな部分のミスか自分の設定や環境に特有の問題であることが多いです。
現象が言語化できたら、一歩引いた視点で考えられる原因を羅列し、可能性が高そうな順に並べます。
エラーが同じでも原因は様々です。

他のサービスとの連携で起きている？
権限の問題？　IAMなのかポリシーなのか？
ネットワークの問題？
自分のPCのプロキシの問題？

これらはどのように検証できる？
等々...

デバッグをしているとどうしても近視眼的になりがちなので、この時間は意外と大切です。
運が良ければここでこれだ！というのがひらめくことも💡💡💡

## 原因を調査する
ここまでやっても治らないということはめっっっったにないミスや複雑な症状が発生しているはずです。
真因の調査を行いましょう。
仮説リストの上から1つ1つ検証していきます。
真因がもし見つかれば解決です。
（ここもうちょっと詳しく書きます...）
以下の動画を見ると良いかも

https://www.youtube.com/watch?v=tXDLy4WNbDw


## サポートに問い合わせる！
ここまでやってもできない場合、社内の有識者やAWSサポートに連絡しましょう。
緊急度、言語化した事象の説明、今まで試したこと、全てを託して待ちましょう！


# 参考文献
記事内には掲載しませんでしたが、本稿を作るにあたって読んだ参考文献たちです。
本稿よりも役に立つと思うのでさらりと見ていただけると良いかもです。。。

https://tech-nri--net-com.translate.goog/entry/encouragement_of_aws_documents?_x_tr_sl=ja&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=sc

https://zenn.dev/mn87/articles/b883d98a392472

https://www.sbbit.jp/article/cont1/81207

https://d1.awsstatic.com/webinars/jp/pdf/services/20210119_AWSBlackbelt_CloudTrail.pdf

https://qiita.com/saito_ry/items/6aada9113cc7810e4de7

https://dev.classmethod.jp/articles/aws-troubleshooting-links/