OmniAICreator/Qiita-1.07M huggingface dataset:
GitHubのリポジトリーをpublic、privateに切り替える方法


# リポジトリーの公開、非公開の切替方法
リポジトリーの可視性[visibility]の変更方法をこの記事では記載します。

# Public から Private
![スクリーンショット 2022-05-22 224426.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600119/cb70e691-c907-7aa1-49b4-78f7b38c1846.png)
* 上部メニューからSettingsをクリック

![スクリーンショット 2022-05-22 224748.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600119/2ac4fecc-7931-272d-88b0-3a63e4b1b0a6.png)

* 一番下部のDanger Zoneから[Change repository visibility]の項目の[Change visibility]をクリック

![スクリーンショット 2022-05-22 225507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600119/3be1a225-3f1a-9fc6-876a-8460d510407f.png)


* [Make Private]のラジオボタンをクリック
* フォームに太文字部分を入力して
* [I understand, change repository visibility.]をクリック

これで公開(Public)から非公開(Private)の状態に変更できます。

# Private から　Public
![スクリーンショット 2022-05-22 231617.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600119/7770563d-36a3-38f5-90f7-a8b3f71359e9.png)

* 上部メニューからSettingsをクリック

![スクリーンショット 2022-05-22 230018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600119/cda15edf-b261-974d-c2f5-be7ea73b4dc2.png)


* 一番下部のDanger Zoneから[Change repository visibility]の項目の[Change visibility]をクリック

![スクリーンショット 2022-05-22 230210.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600119/7aface36-f1af-9779-9818-5146cc984118.png)


* [Make Public]のラジオボタンをクリック
* フォームに太文字部分を入力して
* [I understand, change repository visibility.]をクリック
これでPrivate(非公開)からPublic(公開)の状態に変更できます。
【SQL Server入門】SQL Serverの基礎まとめ

# はじめに
SQL Serverを勉強したのでまとめてみました。

# SELECT, FROM
SELECTは列（カラム）を選択します。
FROMは表（テーブル）を選択します。

~~~sql
SELECT *
FROM consumer
~~~

SELECT文の * は、全カラムを取得するという意味。

また、次の例のように * を使わなくても良い。
~~~sql
SELECT name, age
FROM consumer
~~~

FROM文でも複数テーブルを指定できるがおすすめしない。
なぜなら、1つ目のテーブルにくっついて2つ目のテーブルが表示されてしまうから。


# WHERE
WHERE文では、SELECTするカラムに条件を付け加えることができる。
~~~sql
SELECT *
FROM consumer
WHERE age >= 20
~~~
20歳以上のお客さんの情報を全て表示する。

**論理演算子**
`a = b` a と b は等しい
`a < b` a は b より小さい
`a > b` a は b より大きい
`a <= b` a は b 以下
`a >= b` a は b 以上
`a <> b` a と b は等しくない

ANDやORなどを組み合わせて条件指定もできる。
~~~sql
SELECT *
FROM consumer
WHERE age >= 20 AND name = '山田太郎'
~~~
memberテーブルから、20歳以上の”山田太郎”さんの情報だけを全て表示する。


# ORDER BY
デフォルトでは昇順で並べられる。
ASC：昇順
DESC：降順
~~~sql
SELECT age, name
FROM consumer
ORDER BY age DESC
~~~
この例では、降順の年齢順に名前を表示していく。


# JOIN ON
複数テーブルの共通部分を連結させることができる。
よくあるのがIDで連結させる。
~~~sql
SELECT consumer.age, consumer.name
FROM consumer
JOIN goods
  ON consumer.id = goods.consumerID
~~~
JOINに連結させたいテーブル名、ONに条件を書く。
”テーブル名.カラム名”と表記して、どのテーブルのどのカラムかを区別する。

この文では、consumerテーブルのidカラムとgoodsテーブルのconsumerIDカラムが同じであれば連結させて表記する。


# AS
別名をつけることができる。
~~~sql
SELECT name AS '名前', age AS '年齢'
FROM consumer
~~~
このように書くとカラム名がそれぞれ「名前」、「年齢」として表示される。


次のようにJOIN ONと一緒に使うことも多い。
~~~sql
SELECT c.age, c.name
FROM consumer AS c
JOIN goods AS g
  ON c.id = g.consumerID
~~~



# 終わりに
以前MySQLを少しの間勉強したことがあったのですが、実際の膨大なデータを扱うのは今回が初めてでした。
ですが、めちゃめちゃおもしろい、、、！！
業務でも使っていくので極めたいと思います！
統計学的検定の論文・レポートの書き方

# 独立二標本データの平均値の差の検定の実施例

いわゆる **t 検定** だけど，正確に言うとこういうことになる。

R に用意されている，試料別のひよこの体重を例としてあげる。

Crowder, M. and Hand, D. (1990), Analysis of Repeated Measures, Chapman and Hall (example 5.3)
Hand, D. and Crowder, M. (1996), Practical Longitudinal Data Analysis, Chapman and Hall (table A.2)
Pinheiro, J. C. and Bates, D. M. (2000) Mixed-effects Models in S and S-PLUS, Springer.

The ChickWeight data frame has 578 rows and 4 columns from an experiment on the effect of diet on early growth of chicks.

そのうちから，飼料 1, 飼料 2 で育てられた，21 日目のひよこ 16 羽，10 羽の体重データをもとに検定を行う。


```python
import numpy as np

wt1 = [205, 215, 202, 157, 223, 157, 305, 98, 124, 175, 205, 96, 266, 142, 157, 117]
wt2 = [331, 167, 175, 74, 265, 251, 192, 233, 309, 150]
```


```python
print(np.mean(wt1), np.std(wt1, ddof=1))
```

    177.75 58.702072649382096



```python
print(np.mean(wt2), np.std(wt2, ddof=1))
```

    214.7 78.1381255640719


**結果から導いたわけではなく**（これ重要），飼料2で育てられたひよこは体重が重いという仮説がある。

帰無仮説：どちらの飼料で育てようが，体重は同じ。
対立仮説：飼料 2 で育てると体重が重い。
有意水準 5% で，片側検定を行う。

行うことは単純。


```python
from scipy.stats import ttest_ind
ttest_ind(wt1, wt2, equal_var=False, alternative='less')
```




    Ttest_indResult(statistic=-1.2857113549029495, pvalue=0.10881629286792402)



**$p$ 値は 0.10881629286792402** である。

結論: $p$ 値 > 有意水準（0.05) なので，帰無仮説は棄却できない。<br>
したがって，「飼料 2 で育てられたひよこは体重が重いとはいえない」が結論。

**これ以外，何も必要ない。**

検定統計量の導出の計算式も，検定統計量が $t$ 分布に従うという証明も必要ない。そんなのを論文に書いたら，必ず（哀れみを持って）削られる。


```python

```
【Android】個人的によく使うアノテーションについてのメモ

# はじめに
最近個人的にアノテーションの意味について、調べたのものを個人用のメモとして記事に残します

>アノテーションとは、「注釈」を意味する語であり、とりわけIT用語としては「特定のデータに対して情報タグ（メタデータ）を付加する」という意味で用いられる言葉である。

# アノテーション表

※”＠”をつけるとアドレス認識になってしまうので省略

|アノテーション|意味|
|:---|:---|
|propaty|どんなものかを表す情報|
| param |パラメータの説明|
| HiltViewModel|HiltによるViewModelの注入を有効にする|
| Inject |クラスのインスタンスの作成方法を Dagger に伝えます|
|Serializable|シリアライズ可能にする,バイト配列に変換できます|
|Parcelize|Parcelable を簡単に実装する,インスタンスがシリアライズ化される|

# さいごに
何度か目にしたものから優先して調べてみましたが、それぞれにちゃんと意味や機能があり
コードの理解力が増した気がします
今後も気になったアノテーションを見つけたら調べて記事にしてみようと思います
WPA3だと一般的なWIFIのQRコードが使えない場合がある

## WPA3だとWIFIのQRコードが使えない

Wifiの接続設定をQRコードで表すやつは便利で，ググれば生成サイトが色々あるので普段から使っていたが，先日購入したルータでは認証ができなかったので仕様を色々と調べてみた．

## 仕様

なかなか見つからなかったが[Wi-Fi Allianceの仕様書](https://www.wi-fi.org/download.php?file=/sites/default/files/private/WPA3_Specification_v3.0.pdf)があったので色々とメモしておく．(7.1がQR関連)

```
 WIFI:[T:{type};][R:{trdisable};]S:{ssid};[H:{hidden};][P:{password};];
```  
  


上が一般的な，QRの内容である．パラメータのざっくりとした説明は，


| パラメータ  | 説明                                                                                  |
| :---------: | ------------------------------------------------------------------------------------- |
|   {type}    | 暗号化のタイプ．WEPとかWPAとか．暗号化しない場合はなくていい                          |
| {trdisable} | WPA3の時，後方互換性を持たせないかどうか．持たせるときは1．  持たせる場合はなくていい |
|   {ssid}    | SSID                                                                                  |
|  {hidden}   | SSIDを隠しているかどうか．隠しているときはtrue．なくていい．                          |
| {password}  | パスワード．なくていい                                                                |

他にも設定項目はあるが使った事のないものばかりなので割愛．  


大半のQRコード作成サイトは，TypeとSSIDとパスワードだけを実装しているので，WPA3-Onlyモードで使っていた僕はtridisableの項目がなくて認証できなかったというわけだった．

## QR生成サイト

WPA3対応のwifi用QRコードジェネレータを作ったので困っていたら使ってください．

[QR生成サイト](https://www.nakanishi.dev/posts/wifi_qrcode/)
【2022年】Electronについてリサーチした

## メモ
WEB技術でデスクトップアプリケーションを開発できるFWのElectronについて、メモしました。

## 目次
- IPC通信について：メインプロセスとレンダラプロセス
    - IPC通信とは何か？
- `main.js`の説明
    - `ipcMain.handle()メソッド`
- `renderer.js`の説明
    - `ipcRenderer.invoke()メソッド`
- `preload.js`の説明
- アプリケーションの実行方法


## IPC通信とは何か？

### メインプロセス側： `main.js`
`ipcMain.handle()`メソッドを使用します。

`ipcMain`モジュールはメインプロセスで、レンダラプロセスから送信されるメッセージを受信して処理します。
基本的にメインプロセスは受け身で受信したら送信元のレンダラプロセスに対して返信するみたいな動きになります。

### レンダラプロセス側： `renderer.js`
`ipcRender.invoke()`メソッドを使用します。
メインプロセスに対して、同期、非同期のメッセージを送信できるメソッドが用意されています。もちろん返信を受け取ることもできます。

### メインプロセスとレンダラプロセスの橋渡し役： `preload.js`
`preload.js`では Node.jsの機能が使用できます。

`preload.js`にて`ipcRenderer`を利用できるようにするためには、メインプロセスである`main.js`内で下記のように設定しておく必要があります。

```js:main.js
mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // ここに、preload.jsに関する記述を行う
    preload: path.join(__dirname, 'preload.js')
  }
})
```

## エントリポイントについて
Electronと似ているFWのNW.jsなどもWEB技術でデスクトップアプリの開発が可能ですが、Eletronの差異の1つにエントリポイントの指定方法があります。

Nw.jsの場合は、HTMLファイルを直接指定するようなのですが、Electronの場合は、`main.js`といったJSファイルを`package.json`などでエントリーポイントとして指定し、そのJSファイルのメソッド中で、`mainWindow.loadFile("index.html");`といった形で、具体的なHTMLエントリーポイントを柔軟に制御することができるようです。

## メインプロセスについて
最初に起動するエントリポイントとなっているファイル、`package.json`の “main” に設定されているjsファイルが動くのがメインプロセスです。
Node.jsで動くのでOSネイティブのAPIを使えます。
Fileの読み書きなどを行う場合はこのメインプロセスで行う必要があります。
このメインプロセスを終了するとアプリケーションが終了します。

## レンダラプロセスについて
画面のレンダリングを行っているプロセスです。ブラウザで表示されているhtmlファイルの数だけ、つまりタブの数だけレンダラプロセスがあるイメージです。
ElectronはChromiumで動いているのでこのような仕組みになっています。
したがって当然ブラウザ上で動くJavaScriptと同じ機能しか使えません。

## 
ElectronではIPCを行うためのモジュールである `ipcMain`と`ipcRenderer`が提供されます。これを使ってプロセス間での通信を実現します。

IPCには同期通信と非同期通信の2種類があります。基本的には非同期で使うのがいいと思います。

### `contextBridge`について
ただし、contextBridge API の用法には注意が必要な点もあります。たとえば以下のコードは、contextBridge を利用しているにもかかわらず危険です。

#### この記述は危険
この myAPI.renderer() は ipcRenderer という強力な API を無制限かつ包括的にレンダラープロセスへ曝してしまっているからです。

```js
const { ipcRenderer, contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  // NGな記法
   renderer: ipcRenderer
})
```

#### 推奨する記法
IPC ベースの API を公開する正しい方法は、代わりに IPC メッセージごとに 1 つのメソッドを提供することです。

「IPCメッセージ（のチャンネル）ごとに1つのメソッドを提供する」ように書き直すと次のようになります。
```js
const { ipcRenderer, contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  openDialog: async () => ipcRenderer.invoke('open-dialog'),
})
```


## アプリケーションの起動・実行
`npx electron ./src`で可能です。

余談ですが、`package.json`のscriptsに下記を記述することで、コマンドをカスタマイズできます。

```json
"start": "npx electron ./src"
```
これで、`npm run start`で起動することができます。


## 参考記事

- 最新版で学ぶElectron入門
https://ics.media/entry/7298/

- Erectronでマルチプラットフォームなデスクトップアプリケーションを作ろう
https://zenn.dev/isana_citrus/articles/233072fb48b5d6
VSCode のカレントディレクトリを Windows Terminal で開く

VSCode 画面下部の統合ターミナル（PowerShell）で以下のコマンドを実行すると、統合ターミナルのカレントディレクトリで Windows Terminal が起動します：

```powershell
wt -d .
```

なお、統合ターミナルのカレントディレクトリは通常ワークスペースのルートディレクトリですが、設定で `terminal.integrated.cwd` を変更している場合は異なります。

特定のプロファイルで開きたい場合は `-p` オプションでプロファイル名を指定します。以下の場合、Windows Terminal は Visual Studio 2019 の開発者コマンドプロンプトでカレントディレクトリを開きます：

```powershell
wt -d . -p "Developer Command Prompt for VS 2019"
```

既に Windows Terminal を起動している場合、新規ウィンドウではなく新規タブで開いてほしい時もあるでしょう。`-w` オプションと `nt` サブコマンドを組み合わせることで実現できます：

```powershell
wt -w 0 nt -d . -p "Developer Command Prompt for VS 2019"
```

その他のオプションやサブコマンドは Microsoft 公式のドキュメント([日本語版](https://docs.microsoft.com/ja-jp/windows/terminal/command-line-arguments?tabs=windows)/[英語版](https://github.com/MicrosoftDocs/terminal/blob/main/TerminalDocs/command-line-arguments.md))を参照してください。たとえば、以下の画像のようにタブではなくペイン分割で表示させることもできます：

![Windows Terminal command line argument for split panes](https://raw.githubusercontent.com/MicrosoftDocs/terminal/main/TerminalDocs/images/terminal-command-args.gif) [^1]

[^1]: https://github.com/MicrosoftDocs/terminal/blob/main/TerminalDocs/command-line-arguments.md

## 参考リンク

* [Windows ターミナルに対するコマンド ライン引数を使用する](https://docs.microsoft.com/ja-jp/windows/terminal/command-line-arguments?tabs=windows)
* [Windows Terminal でエクスプローラーのカレントディレクトリを開く](https://qiita.com/yokra9/items/8b771583fe4404646841)
* [Windows Terminal で Git Bash を表示する](https://qiita.com/yokra9/items/bdd0882268b308cf22ca)
Twitterのユーザーフォロー解除を無効化する

# はじめに
Twitterで通知来たときに間違えてFF内の神絵師のフォローを外してしまうという重大インシデントを起こしてしまいました。このような重大インシデントを今後おこさないよう、再発防止策を考え実行します。

# 結論
Adblock系の拡張機能を使い `https://twitter.com/i/api/1.1/friendships/destroy.json` 宛のリクエストをブロックするのが、最も手っ取り早いです。見かけ上は解除されますが、リロードしたらフォローが解除されていないのがわかるかと思います。

# 過程
過程に興味ある人は御覧ください

## 1 リクエスト先を調べる 
Chromeの DevToolのNetworkタブを開きます(Ctrl+Shift+I)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/c5d13105-f6d1-ff8b-6dd5-e89b9d055e65.png)

destroy.json といういかにも危なそうなリクエストがあることがみてわかります。
パラメータを見る限り明らかに こいつがフォロー解除をしているようです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/cc045984-bcd4-7328-4327-90186472a733.png)

アドレスは `https://twitter.com/i/api/1.1/friendships/destroy.json` ということがここからわかりました

## 2 TamperMonkeyのUserScriptの書き方を調べる
自分のChromeにはUserScript実行用にTamperMonkeyを入れているので
それを使ってリクエストにちょっかいをかける方法を調べてみます

https://stackoverflow.com/questions/10786475/intercepting-with-xmlhttprequest-for-a-specific-address-using-greasemonkey

1つ目の回答に 方法はちゃんと書いてあったのですがその下を見ると
Adblockという言葉がでてきました。そういえばAdBlockは指定されたドメイン宛のリクエストをブロックする機能がありました、じゃあ正直それでよくないか?

## 3 AdBlockの設定を変える
利用しているAdBlockによるとは思いますが
自分が使っているのはAdBlockPlusなのでそちらの設定を記載します

まず設定画面を開き
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/538006d3-33a9-732e-40da-cb38cc9dc792.png)

詳細設定の下の方のマイフィルターリストに 例の危険なリクエスト先を 追加します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/f940f480-8f41-7b3e-c331-0d741b58be95.png)

## 4 完了
Twitter上でAdBlockPlusを有効化した状態で DevToolを開き、`blocked:other`というのが出ていればOKです。実際のfecthの上に`HTTP 202 CachedForSync`という応答がサービスワーカーから返ってきていますが、どういう挙動なのかイマイチわかりませんでした。まぁとりあえずこれで実際のフォロー解除リクエストは発生しないということでいいみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254984/e54851ad-90ec-5065-a374-fd793dc54f99.png)


## 参考
ちゃんとUserScriptを書きたい人にはこのページが参考になりそうです

https://github.com/Tampermonkey/tampermonkey/issues/397#issuecomment-299949037
Requirements on Debugging, Tracing and Profiling support of AUTOSAR Components, No.916, AUTOSAR R21-11(118) CP

Requirements on Debugging, Tracing and Profiling support of AUTOSAR Components, No.916, 

https://www.autosar.org/fileadmin/standards/classic/21-11/AUTOSAR_RS_ClassicPlatformDebugTraceProfile.pdf


AUTOSAR R21-11記事一覧はこちら。

AUTOSAR 21-11, 84文書読んだ。2022年6月中に半分到達予定。

https://qiita.com/kaizen_nagoya/items/9935c9e58bf82e1e63d2

AUTOSAR 21-11, 62文書読んだ。2022年5月中に半分到達予定。

https://qiita.com/kaizen_nagoya/items/648b32867635993410c8

AUTOSAR R21-11(0) 仕様ダウンロード一覧。単語帳。参考文献資料作成

https://qiita.com/kaizen_nagoya/items/9b3a1b9b8d1e8d7e288e

# 用語(terms)

|Term| Description|
|:--|:--|
|ARTI| AUTOSAR Run Time Interface
|OS| Operating System
|SWC| Software Component

## 英日
日本語は仮訳

T.B.D.

# 参考(reference)

[1] Requirements on Debugging, Tracing and Profiling support of AUTOSAR Components
AUTOSAR_RS_FoundationDebugTraceProfile
[2] Standardization Template
AUTOSAR_TPS_StandardizationTemplate
[3] Glossary
AUTOSAR_TR_Glossary
[4] Main Requirements
AUTOSAR_RS_Main
プロンプトに使用できる主な特殊文字（zsh）

今回はプロンプトに使用できる特殊文字についてメモしていく。
ディレクトリやブランチ名の表示を変えたいときに使えるかなと思った。

## 特殊文字
| 指定 | 意味 |
|:----------:|:-----------:|
| %m       | ホスト名を表示させる名前 | 
| ％n      | 現在のユーザー名 | 
| ％dまたは％/ | カレントディレクトリ | 
| ％N         | シェル名 |
| ％D       | 日付 | 
| 開始/終了 | 意味 |
| ％B / %b   | 太字の表示の開始と終了 | 
| ％U/％u     | 下線の表示の開始と終了| 
| ％F{色名}/%f | 文字色表示の開始と終了| 
| ％K{色名}/%k| 背景色指定の開始と終了 |

＊他にも多くありますが、あくまで個人的に知っておくと初心者（自分自身）にとっていいかなと思ったものです。＊
参考になれば幸いです。
Explanatory Document for usage of AUTOSAR RunTimeInterface, No.896, AUTOSAR R21-11(117) CP

Explanatory Document for usage of AUTOSAR RunTimeInterface, No.896, 2021-11

https://www.autosar.org/fileadmin/standards/classic/21-11/AUTOSAR_EXP_ClassicPlatformARTI.pdf


AUTOSAR R21-11記事一覧はこちら。

AUTOSAR 21-11, 84文書読んだ。2022年6月中に半分到達予定。

https://qiita.com/kaizen_nagoya/items/9935c9e58bf82e1e63d2

AUTOSAR 21-11, 62文書読んだ。2022年5月中に半分到達予定。

https://qiita.com/kaizen_nagoya/items/648b32867635993410c8

AUTOSAR R21-11(0) 仕様ダウンロード一覧。単語帳。参考文献資料作成

https://qiita.com/kaizen_nagoya/items/9b3a1b9b8d1e8d7e288e

# 用語(terms)

なし

## 英日
日本語は仮訳

T.B.D.

# 参考(reference)

Glossary も　参考に入れましょう。
https://www.autosar.org/fileadmin/standards/foundation/21-11/AUTOSAR_TR_Glossary.pdf

[1] Specification of Operating System
AUTOSAR_SWS_OS
[2] Specification of AUTOSAR Run-Time Interface
AUTOSAR_SWS_ClassicPlatformARTI
[3] Specification of RTE Software
AUTOSAR_SWS_RTE
[4] Recommended Methods and Practices for Timing Analysis and Design within the
AUTOSAR Development Process
AUTOSAR_TR_TimingAnalysis
Specification of AUTOSAR Run-Time Interface, No.923, AUTOSAR R21-11(116) CP

Specification of AUTOSAR Run-Time Interface, No.923, 2021-11

https://www.autosar.org/fileadmin/standards/classic/21-11/AUTOSAR_SWS_ClassicPlatformARTI.pdf


AUTOSAR R21-11記事一覧はこちら。

AUTOSAR 21-11, 84文書読んだ。2022年6月中に半分到達予定。

https://qiita.com/kaizen_nagoya/items/9935c9e58bf82e1e63d2

AUTOSAR 21-11, 62文書読んだ。2022年5月中に半分到達予定。

https://qiita.com/kaizen_nagoya/items/648b32867635993410c8

AUTOSAR R21-11(0) 仕様ダウンロード一覧。単語帳。参考文献資料作成

https://qiita.com/kaizen_nagoya/items/9b3a1b9b8d1e8d7e288e

# 用語(terms)

|Terms| Description|
|:--|:--|
|ORTI |"OSEK Run Time Interface", an OSEK specification (in its version 2.2) that defines how debuggers can access OSEK OS internal information.
|Debugging |"Debugging" refers to halting a system, either as a whole or in parts, for the purpose of - inspecting the contents of the system in a frozen state - single stepping, setting breakpoints, starting and stopping in C or Assembly code
|Tracing |"Tracing" refers to collecting run-time information over a certain period of time - either as a pure software solution, or with hardware assistance - may include processor instruction trace, OS scheduling trace, and/or pure data trace - including time-stamping for further timing analysis
|Timing Measurement |"Timing Measurement" refers to capturing of timing information - by instrumentation, e.g. via Pre-/PostTaskHooks or other hooks or callouts or  - by dedicated hardware support, e.g. hardware performance counters - does not stop execution
|Profiling |"Profiling" refers to the process of gaining timing parameters/timing statistics - of functions, tasks, runnables, modules etc. - possibly with minimum/maximum/average statistics - possibly with worst case analysis - possibly calculated out of trace data, repeated snapshots, or Timing Measurement


## 英日
日本語は仮訳

T.B.D.

# 参考(reference)

[1] Glossary
AUTOSAR_TR_Glossary
[2] Specification of Operating System
AUTOSAR_SWS_OS


# 関連文書(Related document)
Specification of AUTOSAR Run-Time Interface, AUTOSAR R22-11, CP, No.923

https://qiita.com/kaizen_nagoya/items/bfc172c83c93ff218b67

# 文書履歴(document history)
ver. 0.01 初稿 20220522
ver. 0.02 URL追記　20221229
Pylanceでclass名やrangeなどのカッコ()が自動補完できない現象

VSCodeのPylanceを使用しているときに`range`,`list`,`int`,`str`,classのインスタンス化などで括弧を補完してくれない問題の備忘録です
設定の`python.analysis.completeFunctionParens`が既に有効で、`print`関数などは普通に補完されている状態が前提です
## コード例
```Python
rang #ここで補完
range() #想定した挙動
range #実際の挙動

class Hoge():
    pass
Hog #ここで補完
Hoge() #想定した挙動
Hoge #実際の挙動
```

## 対処法
設定の`python.languageServer`を`Pylance`や`Default`から`Jedi`に変更します
後述のように、今のところ(これからも)これしか方法がないと思います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092391/44cdfaa2-188c-fb0f-93ab-addb68bb942d.png)

## 原因
仕様です
[PylanceのIssue](https://github.com/microsoft/pylance-release/issues/404#issuecomment-906849337)を見ると、`int`やclass名などを型アノテーションとしてに使うときに、補完されると邪魔になるからみたいです

ちなみに、Jediでは[mypyを使用しないと言っている](https://github.com/pappasam/jedi-language-server/issues/136)(=型アノテーションをサポートしない？)らしいので、型アノテーションよりブラケットの補完を優先したい方はやっぱりJediを使うのがよさそうです
Xcodeのテンプレのプログラムの意味<Swift>

自分用のメモです．Xcodeのテンプレのプログラムについて自分なりに調べてまとめました．言語はSwiftです．参考にさせていただいた記事は最後に載せています．
```diff_swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}
```



<h2>1．初めに</h2>
「2.プログラムの解説」を読む際に必要そうな知識を簡単にまとめてみました．

○クラス
　・オブジェクトのデータを管理する設計図
　　(オブジェクト：アプリケーションやシステムのこと)

○メソッド
　・型に紐づいた関数
　　(関数：特定のタスクを実行するためのコード群)
　・クラス，構造体，列挙型はメソッドを定義できる

○フレームワーク
　・アプリ開発の土台として機能させるソフトウェアのこと


<h2>2．プログラムの解説</h2>

```diff_swift
import UIkit
```
○インポート
　・予め用意されたフレームワークをswift内で使えるようにするためのプログラム
　・「import」から始まる

○UIKit
　・「UIKit」フレームワークにはiPhoneアプリ画面のレイアウトや管理するためのクラスが含まれている
　・importを使うことでUIKitフレームワークが使える

```diff_swift
class ViewController: UIViewController {
}
```
　・↑ class クラス名: スーパークラス名{
　　　}
　・既に存在するクラス"スーパークラス"の派生として新しいクラスを定義している(継承)

```diff_swift
    override func viewDidLoad() {
    }
```
　・↑ override func 継承元で定義されているメソッド名(){
　　  }

○オーバーライド
　・スーパークラスからメソッドを受け継ぐ際，スーパークラスのメソッドの機能を上書き(オーバーライド)するとメソッドをアレンジできる
　・オーバライドするには，メソッドの宣言である「func」の手前に「override」を書く
　・メソッド名はスーパークラスに定義されているメソッド名と同じ名前

○viewDidLoad
　・アプリ画面上に表示された際に自動的に呼び出されるメソッド
　・このメソッドをオーバーライドして，画面に表示されたときに好きな動きをさせられる


```diff_swift
        super.viewDidLoad()
```
　・↑ super.メソッド名
　・スーパークラスの同名のメソッドを呼び出すプログラム
　・この下にプログラムを書くと，元のメソッドに新しい処理を追加できる




以上です．
以下のサイトを参考にさせていただきました．
まだ勉強を始めたばかりで何もわかっていませんでしたが，この記事のおかげで理解が進みました．これからもSwiftの勉強を頑張っていきます！

https://atmarkit.itmedia.co.jp/ait/articles/1601/08/news059_4.html

https://qiita.com/Kenta-Okuda/items/733ecafbf67dfd5ad9ea

https://atmarkit.itmedia.co.jp/ait/articles/1511/17/news015.html

https://swift.codelly.dev/guide/型の構成/メソッド.html#メソッドの定義方法

https://swift.codelly.dev/guide/関数/
Vue.js watchプロパティ

# 概要
Vue.jsで多数の値を扱う場合には「監視プロパティ」を使うのが便利です。
監視プロパティには`watch`を使います。

# 記述方法
`watch`は以下のような形で定義します。
```
watch: {
    名前1: function(value){...処理1...},
    名前2: function(value){...処理2...},
    .
    .
```
`watch`はオブジェクトになっており監視する値の名前とその値が更新された時に実行される関数を定義します。
引数には更新するための値を入れます。

# 実例
```vuejs
<template>
  <div class="hello">
    <table>
      <tr><th>add:</th><td>{{ add }}</td></tr>
      <tr><th>sub:</th><td>{{ sub }}</td></tr>
      <tr><th>multiple:</th><td>{{ mult }}</td></tr>
      <tr><th>divide:</th><td>{{ div }}</td></tr>
    </table>
  </div>
</template>
<script>
export default {
　　　　name: 'HelloWorld',
  data:function() {
    return {
      val:0,
      add:0,
      sub:0,
      mult:0,
      div:0,
    };
  },
  watch:{
    val: function(value) {
      this.val = value;
      var val = parseInt(value);
      this.add = Math.floor(val + 2);
      this.sub = Math.floor(val - 2);
      this.mult = Math.floor(val * 2);
      this.div = Math.floor(val / 2);
    }
  },
  created: function(){
    this.val = 1;
  },
}
</script>
```
上記のように実装するとValueに入れた値に対して四則演算が行われます。
![スクリーンショット 2022-05-22 21.52.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594871/6d8d626c-47e7-caba-4486-68e1bb5ffa5b.png)

# まとめ
Vue.jsで多数の値を扱う場合には「監視プロパティ」を利用すると便利です。
「監視プロパティ」は常に値を監視しているため、処理によってはパフォーマンスが下がってしまう可能性があります。
実装内容に応じて「算出プロパティ」と使い分けると良いと思います。
inkscape で数式入り画像pdf ファイルを作るには

最近のLaTeXはpdfファイルを画像ファイルとしてincludeすることができる。pdfファイルの画像を作るには、tgif などでベクター画像からepsファイルを作って、そのファイルをpdf化することもいいが、inkscapeには、pdfファイルでテキストデータと画像データを分離して保存する機能がある。これを使った、数式入りpdfファイルの作り方を説明する。なお、このやり方はDebian 10 + inkscape + TeXLive で行っているが, python は使っていないはずなので、windowsでも同様のやり方が可能であると思われる。pythonが必要ないので、コマンドプロンプトの簡単な知識があれば、inkscapeのエクステンションを使うよりも簡単？に作業できると思われる。

# inkscape でpdfファイルを作る

inkscapeで画像ファイルを作る。この際に、gnuplotでsvgデータを出力するなどで作るなんてこともできるだろう。注意すべき点は下記の通り

* 数式を入力したいTextはTeXの数式同様に $$ 囲みにする。LaTeXコマンドを使いたい部分はそのコマンドをベタ打ちする。
* ファイルを保存する時に pdf を指定する。そのときにText output options を「Omit text in PDF and create LaTeX file」とする

上記によって、`hoge.pdf` と　`hoge.pdf_tex` の2つのファイルができる。

# 上記のpdfファイルを処理する

TeXのソースにもよるが、

```
\begin{figure}[htbp]
\centering
\def\svgwidth{20cm}
\input{hoge.pdf_tex}
\end{figure}
```

をソースに加えれば、数式部分をTeXで処理した画像が挿入される。ただ、これをそのまま使うのは、画像流用のときに面倒でもあるので、数式入り画像pdfファイルを作ってみる。

``` fuga.tex
\documentclass[dvipdfmx]{ujarticle}

\usepackage{graphicx,color}
\usepackage{newtxtext}
\usepackage[varg]{newtxmath}
\usepackage{mathrsfs}
\usepackage{bm}
\usepackage[noto-otc]{pxchfon}

\renewcommand{\vec}[1]{\bm{#1}}
\renewcommand{\kanjifamilydefault}{\gtdefault}

\begin{document}
\thispagestyle{empty}

\mathversion{bold}
\LARGE

\begin{figure}[htbp]
\centering
\def\svgwidth{20cm}
\input{hoge.pdf_tex}
\end{figure}

\end{document}
```

を作り、uplatex + dvipdfmx で pdf ファイルを作る。(中身のusepackageなどは適宜入れ替えれば良い)

# pdfcrop で画像を切り取る

上記で得られた fuga.pdf は画像だけでなく、余白のあるpdfファイルである。これは使いづらいので、pdfcrop を用いて余白を切り抜く。

```
pdfcrop fuga.pdf final.pdf
```

とすることで、余白部分を切り抜いた`final.pdf`が出来上がる。
【Swift】数字の省略表記

# 数字の省略表記とは？
![IMG_0372.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/de73c8f7-59bc-f9b7-4e10-dfc4f9aa070d.jpeg)

SNSでフォロワーの数が省略されている事があります
正直、日本では使わないと思うのでぱっと見ではこれが何桁の数字なのか分からないと思います。

簡単に説明すると
**1K = 1,000**
(000が1個ならK)

**1M = 1,000,000**
(000が2個ならM)


このような法則があります。


数字から省略表記に変換する拡張を作る機会が合ったので共有したいと思います。

# 作ったもの
`1.0K`のような場合は`.0`を削除しています
```swift
import Foundation

extension Int {
    func calcNumericalValue() -> String {
        if self >= 1000000 {
            let i = Double(self) / 100000
            if "\(Double(round(i) / 10))M".contains(".0") {
                return "\(Double(round(i) / 10))M".replacingOccurrences(of: ".0", with: "")
            } else {
                return "\(Double(round(i) / 10))M"
            }
        } else if self >= 1000 {
            let i = Double(self) / 10000
            if "\(round(i * 100) / 10)K".contains(".0") {
                return "\(round(i * 100) / 10)K".replacingOccurrences(of: ".0", with: "")
            } else {
                return "\(round(i * 100) / 10)K"
            }
        } else {
            return "\(self)"
        }
    }
}

// 使い方
print(11146.calcNumericalValue()) // 11.1K
```

# おわり
コードが汚いですね
おそらくextensionで引数を取らない場合にfuncを使うのは良くないと思うんですよね

リファクタリングしてくれる方がいれば編集リクエストください
ノンビン塾～エンジニアとしての成長記録１～

## 背景
30代未経験でキャリアチェンジした手前、
如何に効率よく成長するかが大事だと思っている。
（成長曲線的な意味で）

そんな想いを先輩エンジニアも理解して頂き、
本当に嬉しい事に、週に一度エンジニアのノウハウを基礎から教えて頂くことになった。
周りの環境に本当に恵まれているKenny♪

インプットで学ぶだけではなく、
アウトプットしてこそ自分の知識として定着していくもの。
という事もあり、
内容をQiitaにてアウトプットしていく事にする。

また、前職まではこういったアウトプットする機会が皆無だった為、
そのトレーニングも兼ねて継続していこうと思う。
（お手柔らかにお願いします）

### 名付けて、【 ノンビン塾 】


## ノンビン塾の目標・考え方
### １）設計力を養う
　　→頭の中で絵（設計）を描ける事。一番重要。
### ２）論理的思考の組み立て
　　→言葉のとおり、ロジカルな考え方は必須。
### ３）納期に間に合う技術を磨く
　　①技術力が高く、良いプログラムを書いても、納期に間に合わなかったら意味がない。
　　②最初はコードは汚くても良い。
　　　まずは動くもの（見せられるデモ）をなるはやで作り上げる技術を磨く。
　　　その納期を如何に短くするかが重要。


## 進め方
　基本的には、１時間/週　で実施

【初回】
　講義　→　実践　→　課題提示（次回ノンビン塾にて共有）
【二回目以降】
　課題提出　→　フィードバック　→　講義　→　実践　→課題提示（次回ノンビン塾にて共有）


## 講義
【テーマ】
　シーケンス図を覚える
　
　シーケンス図とは、
　誰・何がどういう時系列で、どんな動きをするかを表す図
　（現時点では、この理解で良い）

例）Aさんが上司に業務内容を報告するシーケンス図
![スクリーンショット 2022-05-21 133146.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627323/827bddfe-e2e5-cd0f-8189-6ffceddd2acf.png)
Aさんは最終的に上司へ報告しOKをもらうまでの動きが、時系列で読み取ることができる。

このように、仕事やプライベートで普段やっている動きは、
すべてシーケンス図で表すことができる。

例えば、業務で何らかミスをしてしまった時、シーケンス図を書いてみると良い。
シーケンス図を持って上司や同僚に相談してみることで、
指摘をもらったり、アドバイスをもらいやすくなったりする。
（どの動きを改善したらよいのか、抜け漏れ等）


## 実践
例題）
　今、田舎の駅Aにいて、３つ先の駅までローカルの電車で移動する。
　駅Aに到着してから電車に乗るまでをシーケンス図で示そう。

以下が私が田舎の駅を想像しながら初めて書いてみたシーケンス図。（デビュー作！）
![スクリーンショット 2022-05-21 134040.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627323/cdd0fe0e-a1ab-9325-b69e-c063a746da08.png)
細かいところで改善点はあるものの、基本的にはOKをもらえた。
例:「改札は人がいない時開いてて、人が改札前に来た時に、閉まる」動きが抜けてないか？


### 次回N塾までの課題
　ご飯を食べにお店（マックor田舎の食堂）に行く。
　お店に入り料理が提供されて、お会計が終わって出るまでをシーケンス図で示そう。


## 感想

率直に一言。
めっちゃ面白かった。
これに尽きる。

シーケンス図は昨年独学していた時、ネット上でチラッと見たことはあったものの、
当たり前のように、実務内容に基づくシーケンス図であった為、
内容が難しく、全然頭に入ってこなかった。
今回は、普段の何気ない日常をシーケンス図にしてみるという、
非常にとっつきやすい＆理解しやすいテーマだった為、理解度は非常に高かったと思う。

実務経験が浅い現在では特に、
シーケンス図を持った状態で上司や同僚にも相談しやすい。というのが、目から鱗だった。
（そもそものシーケンス図作成に時間はかかってしまうが。。。）

近い将来、他の人と会話をしながら頭の中でシーケンス図を描けるようになりたい。
・・・ではなく、なってみせる。
PowerAutomate: 一括で、再動作と停止が出来るようになってますね

# 背景
- テスト時に沢山実行して、"running" 中になったフローが沢山残ってて、一個ずつキャンセルするのがだるい
- エラーなどで停止したフローが沢山あるが、それらのデータを使って再度実行したい

こんな時用の機能が有効になってたので紹介まで

こんな感じで、沢山キャンセル（停止）させたいものがある場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/d234fd4b-e2ea-d076-7383-8d0e0d7fc9fa.png)

# 方法
1. All runs で履歴ページに飛ぶ<br>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/7cd1f44d-40e8-6a01-dc30-f76a2f7be3ef.png)
1. 右上のフィルターを利用で選択を楽に
1. 対象を選択する（左上に全選択・解除もあり）
1. Resubmit or Cancel で、実行

# あとがき
All runs に飛ばなければ気付きかないので一応メモまで
Visual Studioでタスクランナー(Gulp)を使用できるようにする

## はじめに
タスクランナーとは、Web開発において様々なタスクを自動化するツールのことです。  
[Grunt](https://gruntjs.com/)と[Gulp](https://gulpjs.com/)が有名です。
本記事ではVisual StduioでGulpを使用できるようにするまでの手順を記載します。

## 前提条件
- Windows 10以上
  - Macでも動くかは未確認です。
- [Visual Studio 2022](https://visualstudio.microsoft.com/ja/vs/whatsnew/)がインストール済みであること。
  - Visual Studio 2015以上であればGruntとGulpが標準でサポートされています。
- [Node.js](https://nodejs.org/ja/)の最新版のLTSがインストール済みであること。

## 手順

### 適当なプロジェクトを作る

Visual Studioを開き、適当なプロジェクトを作ります。

コンソールプロジェクトを作る![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60328/f873f20a-b038-cc85-3cf3-1ccf0624035e.png)

### Node.jsのpackage.jsonを作る

`Ctrl + @`でターミナルを開き、`npm init`を実行します。
色々と聞かれますが、何も入力せずにEnterキーを押し続けます。
すると、ソリューションファイル(sln)がある場所にpackage.jsonが作成されます。

### Gulpをインストールする

ターミナルで`npm install -D gulp`を実行します。
すると、Gulpがローカルにインストールされ、package.jsonにgulpが追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60328/b1b200c1-b500-a3cb-08c2-5ad5a00be9c4.png)

### gulpfile.jsを追加する
ソリューションエクスプローラーのソリューションを右クリックし、追加 > 新しい項目 を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60328/14d38e4f-541d-152a-13f3-ac8ab2878870.png)

JavaScriptファイル を選択し、`gulpfile.js`と入力して、追加 を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60328/822cf868-9a17-5f9a-3a5c-a5983adb6180.png)

### gulpfile.jsにタスクを追加する

後はgulpの仕様に従ってタスクを追加していきます。
とりあえずコンソールに出力するだけのタスクを追加してみます。

```js
const testSample = (done) => {

    console.log('testSample');

    done();

};

exports.testSample = testSample;
```

### タスクを実行する

Visual Studioのツールバーの検索ボックスに「タスクランナー」と入力して、タスクランナーエクスプローラーを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60328/66a4ca5b-db4f-08af-83f7-9996281409e7.png)

先ほど追加したタスクが表示されるので、実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60328/2046f2bc-b50a-bfb7-3ac6-8a9e7408bea6.png)

タスクが実行されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60328/ec4906e1-b181-b4a6-79ea-7b42fc04c0ca.png)

## おわりに
Visual Studioとうまく統合されており、コマンドでタスクを実行しなくても、UIから簡単にタスクを実行できることが分かりました。
Gruntも似たような手順になります。

## 参考リンク
- [絶対つまずかないGulp 4入門(2021年版) インストールとSassを使うまでの手順](https://ics.media/entry/3290/)
[Swift]Storyboard生成をコードで１箇所にまとめる

## はじめに

Storyboardの生成をする時、コードをあちこちに書くことがあると思います。

しかし可視性も悪くなるし
スペルミスの可能性も高まる・・

そこでStoryboardの読み込みを１箇所にまとめると楽です。

```ruby: Storyboard＋.swift
import UIKit

extension UIStoryboard {
  static var firstViewController: FirstViewController {
    UIStoryboard.init(name: "First", bundle: nil).instantiateInitialViewController() as! FirstViewController
  }

  static var secondViewController: SecondViewController {
    UIStoryboard.init(name: "Second", bundle: nil).instantiateInitialViewController() as! SecondViewController
  }

  static var thirdViewController: ThirdViewController {
    UIStoryboard.init(name: "Third", bundle: nil).instantiateInitialViewController() as! ThirdViewController
  }
}

```

別ファイルでextensionを使います。

## 呼び出し方

```ruby:  ViewController.swift
let secondVC = UIStoryboard.firstViewController

self.present(secondVC, animated: true, completion: nil)

```
　
こんな感じで、記述ミスをしにくく簡潔に書けます。

R.Swiftを使えばもう少し楽にできますが、自前でサクッと実装したい時はこっちのがいいかもです。
React で stripe 決済 を実装する

備忘録。


## react で stripe 決済を実装する

実装には、推奨されている paymentIntent を使う。
実装のフローとしては、

１：フロントで決済画面に移行する
２：フロントからサーバーに paymentIntent を create する通信を投げる
３：サーバー側で paymentIntent を create ( [paymentIntent](https://stripe.com/docs/api/payment_intents) を参照) し、client_secret をフロントに返す
４：サーバーから返ってきた client_secret と 顧客が入力したカード情報で、決済を行う ( [confirmCardPayment](https://stripe.com/docs/js/payment_intents/confirm_card_payment) を参照)。

のようになる。

サーバー側 (Express)

```javascript:app.js
import express from "express"
import Stripe from "stripe"

const stripeSecret = new Stripe(STRIPE_SECRET_KEY)

app.post("/api/payment/create", async (request, response) => {
  const total = calculate_total(request.body.total) // 合計金額を計算する関数を作る
  const paymentIntent = await stripeSecret.paymentIntents.create({
    amount: total,
    currency: "JPY"
  })
  response.status(201).send({
    clientSecret: paymentIntent.client_secret
  })
})

```

フロント側 (React)

```javascript:App,js
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY)

function App() {
  return(
    <Elements stripe={stripePromise}>
      <CheckoutPage/>
    </Elements>
  )
}

export default App
```

```javascript:CheckoutPage.js
import React, {useEffect} from "react"
import {CardElement, useElements, useStripe} from "@stripe/react-stripe-js"

function CheckoutPage () {

  const stripe = useStripe()
  const elements = useElements()

  const [clientSecret, setClientSecret] = useState("")
  const [errorMsg, setErrorMsg] = useState("")
  const [processing, setProcessing] = useState(false)
  const [success, setSuccess] = useState(false)

  useEffect(() => {
    async function getClientSecret(total) {
      try {
        const {data} = await axios.post("/api/payment/create", {total: hogehoge})
        setClientSecret(data.clientSecret)
      } catch(error) {
        setErrorMsg(error.message)
      }
    }
    getClientSecret(total)
  }, [total])

  async function paymentHandler(e) {
    e.preventDefault()
    if (!stripe || !elements) {
      return
    }
    setProcessing(true)
    const cardElement = elements.getElement(CardElement);
    if (!cardElement) { return }
    await stripe.confirmCardPayment(clientSecret, {
      payment_methods: {
        card: cardElement,
      }
    })
    .then(({paymentIntent}) => {
      setErrorMsg(false)
      setProcessing(false)
      setSuccess(true)
    })
    .catch((error) => {
      setErrorMsg(error.message)
      setProcessing(false)
      setSuccess(false)
    })
  }

  return (
    <div>
      <Form onSubmit={paymentHandler}>
        <CardElement/>
        {errorMsg && <div className="errorMsg">{errorMsg}</div>}
        <button disabled={!stripe || !elements}>Pay Now</button>
      </Form>
    </div>
  )
}

export default CheckoutPage;
```

## 参考資料

https://dev.to/roopalisingh/how-to-start-with-stripe-3pip

を参考にしました
レプリケーション遅延とは【対応策含め】

# レプリケーション遅延とは

## まずはじめに
「**レプリケーション遅延**」という言葉は、サーバー、主にDB周りを扱っている方なら時折耳にすることは多いと思います。
私も業務内にて耳にする機会はあり、その上でおおざっぱな理解はしていたもののレプリケーション遅延が「**なぜ起きるのか**」「**生じた場合どのように対応すればよいのか**」というものを改めて確認がてらメモを残して置こうと思い記載させていただきます。

また、今回例として挙げているものはMySQLとなります。

**間違っている部分や補足点あればご指摘いただけるととてもありがたいです。。。**

## レプリケーション遅延とはどういうものか
レプリケーション遅延を語る上で欠かせないものとして、まず**レプリケーション**から進めていきます。

### レプリケーションとは
MySQLを使用する際、主に**障害対策**や**負荷分散**を目的として**レプリケーション**を使用しているケースは多くあると思います。
レプリケーションというものは、「複製（レプリカ）をつくること」を意味しており、今回のMySQLにおけるレプリケーションもDBの複製を他サーバーに作成することで**特定のDBが破損した場合に他のものに切り替える**、また複数の複製を作成しサーバーに配置することで、**DBアクセスの負荷分散を行う**というものです。

## レプリケーションはどのように行われているのか
おおまかな流れは以下になります。

1.マスタ(オリジナルのDB)のバイナリログにDBへの処理内容を記録
2.スレーブ(レプリケーション先)側でマスタからバイナリログを取得
3.スレーブ側で取得したバイナリログの内容をDBに反映

上記手順を確認すると、「**毎回遅延起きるんじゃない？**」と疑問に感じると思います。
その通り、細かい部分まで確認すると実際毎回遅延は生じています。しかしながらなぜ日頃問題にならないのかというと、このレプリケーションが遅延が日頃**問題にならないほどに高速に行われている**からです。

しかしながらこの高速に行われており遅延が問題にならなくなっているレプリケーションが、問題になるほどに遅延してしまっている状態、これが**レプリケーション遅延**です。

## レプリケーション遅延はどういう時に起きるのか
大まかな要因としては、以下が挙げられます。

### ネットワークの遅延
レプリケーションはネットワークを通じて行われるため、ネットワークの状態や送信するデータ量の影響を受けることになります。
そのために**ネットワーク回線が遅延している場合**やスレーブ数が多く**マスターからの送信データ量が大きい場合**に生じる可能性があります。

### 巨大なドランザクションの実行
マスターとなるDBにて、処理に膨大な時間がかかるトランザクション(DBシステムで実行される処理のまとまり、 または作業単位のこと)が実行された場合、上記の手順にある通りスレーブ側でも同様のトランザクションが実行されることになります。
その場合、例えば反映に1時間かかるトランザクションがマスターで実行された場合、**スレーブ側でその更新が反映されるのもまたその約1時間後ということになります。**

### スレーブの過負荷
スレーブ側で処理できる量を超えた更新がマスター側から送られると、スレーブ側では更新が滞った状態となります。これは一つの大きなトランザクションによる遅延ではなく、次々と処理が溜まっていくことで生じる遅延となります。

## レプリケーション遅延の対策はどうするか

### まずどのように遅延を調査するか
こちらは`SHOW SLAVE STATUS`を実行し、その中の`Seconds_Behind_Master`を確認することで遅延が発生しているか確認することができます。(数値が1であれば1秒の遅延が生じている状態です。)

また、その要因を追求するために、`SHOW SLAVE STATUS`内の`Relay_Log_Pos`をファイルサイズ(`Relay_Log_Space`)と比較するなどし、読み込みや実行途中となっているのであればスレーブ側で遅延が生じていることが分かります。

次に、遅延の調査に大きく役立つのが**スロークエリログ**です。こちらを確認することで巨大なトランザクションが発生しているかどうかは即座に判断できます。

また、上記の確認を行う上で`ZABBIX`などの監視ツールや、その他レプリケーション監視ツールを利用するとより確認がしやすくなります。

### 対策について
対策として挙げられる方法としては、

1. 巨大なトランザクション(一度に大量の行を更新するもの)は実行しない
 可能であればコミットする行数を少しずつに絞り込むようにしましょう。また、大きなテーブルに対してALTER TABLEを実行する際のような致し方ない場合は、メンテナンスを実施するなど準備を行った上で実施しましょう。

2. CPUの増設やスレーブの追加
 CPUリソースが枯渇している場合はCPUを増設したり、スレーブを追加するなどの方法があります。 

上記以外にも対策はあると思いますが(参考サイトには他にも記載があったのでご覧いただければと思います、)、それぞれの状態にあった対策を講じていければと思います。

## 最後に

今回の記事は以下ブログ・記事を参考として記載を進めさせて頂きました。
参考先にはより詳細の記載であったり図を用いた説明もございますので、ぜひご覧になっていただければより理解が深まると思います。

[MySQLにおけるレプリケーション遅延の傾向と対策/漢のコンピュータ道](http://nippondanji.blogspot.com/2011/12/mysql.html)
[とほほのWWW入門/MySQL/MariaDBレプリケーション](https://www.tohoho-web.com/ex/mysql-replication.html)
zshのスニペット＆補完プラグイン zeno.zsh と略語展開プラグイン zsh-abbrev-alias を共存させる

[yuki-yano/zeno.zsh](https://github.com/yuki-yano/zeno.zsh) はあらかじめ登録したスニペットの展開をしてくれるzshプラグイン。
例えば `gs` を `git status` に登録すると、`gs<SPACE>` で `git status` に展開してくれる。
あと、コマンドラインが特定のパターンにマッチすると [fzf](https://github.com/junegunn/fzf) を使った補完モードに入ってくれる。
これの詳しい魅力については [作者の記事](https://zenn.dev/yano/articles/zsh_plugin_from_deno)や [この人の記事](https://www.m3tech.blog/entry/dotfiles-bonsai) を見るといいだろう。

しかし略語展開プラグイン [mono-lab/zsh-abbrev-alias](https://github.com/momo-lab/zsh-abbrev-alias) （[紹介記事](https://qiita.com/momo-lab/items/b1b1afee313e42ba687b)） と競合する。
abbrev-alias は勝手にスペースキーとエンターキーにバインドして、これが zeno.zsh と競合するのだ。

スペースキーとエンターキーの取り合いを解消するために以下の設定をした。
zinit プラグインマネージャーの機能を使っている。

```zsh
# zeno.zsh のインストール設定
zinit ice lucid depth"1" blockf
zinit light yuki-yano/zeno.zsh

# zsh-abbrev-alias のインストール設定
# 遅延読み込みにして zeno.zsh より後に読み込ませる。
# atload プレフィクスで読込終了時に ___abbrev-alias--loaded 関数を呼びだす
zinit ice wait'!0' lucid atload'___abbrev-alias--loaded'
zinit load "momo-lab/zsh-abbrev-alias"

# この関数内でスペースとエンターに2つのプラグインを合成させたアクションを割り当てさせる
# この関数は zsh-abbrev-alias ロード後に呼ばれる。
function ___abbrev-alias--loaded(){
  _mixed-space(){
    zle __abbrev_alias::magic_abbrev_expand
    zle zeno-auto-snippet
  }
  zle -N mixed-space _mixed-space
  bindkey ' '  mixed-space

  _mixed-enter(){
    zle __abbrev_alias::magic_abbrev_expand
    zle zeno-auto-snippet-and-accept-line
  }
  zle -N mixed-enter _mixed-enter
  bindkey '^m'  mixed-enter
}
```

初めに abbrev_alias が起動して略語展開を行ったのち、zeno が起動するようにした。

### zeno.zsh と zsh-abbrev-alias を併用できて何がうれしいのか(zeno.zshだけで充分でないか？)についての回答
- zsh-abbrev-alias で登録した略字展開は zeno-insert-snippet (fzf でスニペットを検索する）の候補に登場させずに済む
- HIST_IGNORE_SPACE オプション（行頭空白）に2022年5月24日現在、zsh-abbrev-alias は対応している(zeno.zsh は未対応)
GitHubでのブランチ作成からローカル環境へのクローンまで

# はじめに
先日、[「GitHubでのリポジトリ作成からREADME作成まで」](https://qiita.com/cats_2311/items/2d986a5a5743b2f324e0)にて、GitHub上でのリポジトリの新規作成についてまとめました。
今回は、「GitHub上でのブランチ作成〜ローカル環境へのクローン」について、まとめたいと思います。
※MacBookで作業しております。

# 前提
- GitHubのアカウントを作成済であること。
- GitHubに公開鍵を登録済であること。
- Gitリポジトリを作成済であること。

# 本題
## (1)ブランチの新規作成
GitHub.comでブランチを作成するため、リポジトリのメインページにアクセスしておきます。
ブランチセレクタメニューに新しいブランチ用の名称を入力し、「Create branch」を押下します。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/d737b139-d2d4-e52e-10f6-d00544f3d62e.png)
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/215ed309-9f94-5384-7042-dd4231196969.png)

「Branch created」のメッセージが表示され、「branches」が、1→2に増加していることを確認できました。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/f844c1bb-a6ec-729b-8317-de30576804d2.png)

## (2)ブランチのクローンとブランチの切り替え
作成したブランチをローカル環境にクローンします。
対象リポジトリの「Code」をクリックし、表示されたURLをコピーして使用します。
※私の場合、SSHキーを使用してリポジトリのクローンを作成するため、「SSH」をクリックして表示されたURLを使用します。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/c2984f64-94f4-5424-10fc-6735eae4eaba.png)

ターミナルで操作を行います。
クローンしたい場所にカレントディレクトリを移動し、`git clone`コマンドで、コピーしたURLと基にクローンを実行します。
```
cd 任意のディレクトリ
git clone 対象URL
```

私の場合、デスクトップに適当なディレクトリ(Spring-Boot勉強用)を作成して作業しました。

- カレントディレクトリ状況の確認(コマンド実行前)
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/bd3f7d6f-430b-9350-2dda-96420c97c32c.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/7b087b53-a72e-bc14-a7c8-ab68d6227a55.png)
- コマンド実行
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/fc369b4b-7983-7c03-b9eb-2954dab65c04.png)
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/56714e18-11a1-4527-3f79-26c6f8192a9d.png)
- カレントディレクトリ状況の確認(コマンド実行後)
コマンド実行時、オプション等も指定していないため、ブランチ名と同じ名称で作成されていることを確認。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/2fd8c15c-eed3-e43c-ba8a-c0b3f43ee370.png)

## (3)対象ブランチへの切り替え
対象ブランチへの切り替えを行います。
※私は、切り替えを忘れがちなので注意しております。。

`git checkout`コマンドで、対象のブランチへの切り替えを実行します。
```
git checkout 対象ブランチ名
```

- ブランチ状況の確認(コマンド実行前)
「masetr」がアクティブであり、使用したいブランチが非アクティブになっていることを確認。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/8e38b16e-723a-31ae-7b3c-23662780a3cd.png)
- コマンド実行
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/fb382510-b408-a975-243d-37814ec62d01.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/da9d2f4f-ad21-8efb-5ce5-18cf72d93e15.png)
- ブランチ状況の確認(コマンド実行後)
使用したいブランチがアクティブになっていることを確認。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602721/30f45e57-55e5-3693-055b-9a47f20eca7f.png)

# 参考文献
分かりやすい情報に大変感謝致します。

https://docs.github.com/ja/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-and-deleting-branches-within-your-repository

https://docs.github.com/ja/repositories/creating-and-managing-repositories/cloning-a-repository
Specification of Memory Abstraction Interface, No.285, AUTOSAR R21-11(113) CP

Specification of Memory Abstraction Interface, No.285, 2021-11

https://www.autosar.org/fileadmin/user_upload/standards/classic/21-11/AUTOSAR_SWS_MemoryAbstractionInterface.pdf


AUTOSAR R21-11記事一覧はこちら。

AUTOSAR 21-11, 84文書読んだ。2022年6月中に半分到達予定。

https://qiita.com/kaizen_nagoya/items/9935c9e58bf82e1e63d2

AUTOSAR 21-11, 62文書読んだ。2022年5月中に半分到達予定。

https://qiita.com/kaizen_nagoya/items/648b32867635993410c8

AUTOSAR R21-11(0) 仕様ダウンロード一覧。単語帳。参考文献資料作成

https://qiita.com/kaizen_nagoya/items/9b3a1b9b8d1e8d7e288e

# 用語(terms)

|Term|Description|
|:--|:--|
|EA| EEPROM Abstraction
|EEPROM |Electrically Erasable and Programmable ROM (Read Only Memory)
|FEE| Flash EEPROM Emulation
|LSB |Least significant bit / byte (depending on context). Here it’s bit.
|Mem| AUTOSAR Basic Software Module Memory Driver
|MemAcc| AUTOSAR Basic Software Module Memory Access
|MemIf |Memory Abstraction Interface
|MSB |Most significant bit / byte (depending on context). Here it’s bit.
|NvM| NVRAM Manager
|NVRAM |Non-volatile RAM (Random Access Memory)
|Address area |Contiguous memory area in the logical address space. Typically, multiple physical memory sectors are combined to one logical address area.
|Fast Mode| E.g. during startup / shutdown the underlying driver may be switched into fast mode in order to allow for fast reading / writing in those phases. Note: Whether this is possible depends on the implementation of the driver and the capabilities of the underlying device. Whether it is done depends on the configuration of the NVRAM manager and thus on the needs of a specific project.
|Slow Mode |During normal operation the underlying driver may be used in slow mode in order to reduce the resource usage in terms of runtime or blocking time of the underlying device / communication media. Note: Whether this is possible depends on the implementation of the driver and the capabilities of the underlying device. Whether it is done depends on the configuration of the NVRAM manager and thus on the needs of a specific project.
|Vendor specific library|A vendor specific library is an ICC-2 implementation of the FEE/FLS and EA/EEP modules respectively. It provides the same upper layer interface (API) and functionality as the corresponding ICC-3 implementation.


## 英日
日本語は仮訳

T.B.D.

# 参考(reference)

[1] List of Basic Software Modules
AUTOSAR_TR_BSWModuleList.pdf
[2] Layered Software Architecture
AUTOSAR_EXP_LayeredSoftwareArchitecture.pdf.pdf
[3] General Requirements on Basic Software Modules
AUTOSAR_SRS_BSWGeneral.pdf
[4] General Requirements on SPAL
AUTOSAR_SRS_SPALGeneral.pdf
[5] Requirements on Memory Hardware Abstraction Layer
AUTOSAR_SRS_MemoryHWAbstractionLayer.doc
[6] Specification of Default Error Tracer
AUTOSAR_SWS_DefaultErrorTracer.pdf
[7] General Specification of Basic Software Modules
AUTOSAR_SWS_BSWGeneral.pdf
[7] Specification of NVRAM Manager
AUTOSAR_SWS_NVRAMManager.doc
[8] Specification of Flash EEPROM Emulation
AUTOSAR_SWS_FlashEEPROMEmulation.pdf
[9] Specification of EEPROM Abstraction
AUTOSAR_SWS_EEPROMAbstraction.pdf
Djangoプロジェクト作成

# 前提
いつもどうやって作成するか忘れてしまうので、簡単にまとめます。
参考にしているのは以下のページ。
https://docs.djangoproject.com/ja/4.0/intro/tutorial01/

# 環境
- macOS 11.6.4
- python: 3.8.12
- anaconda navigator: 2.1.1
- PyCharm: 2021.2.1 (Community Edition)

# 手順
### 各種インストール
- anaconda navigator: 2.1.1
https://www.anaconda.com/products/distribution#macos
- PyCharm: 2021.2.1 (Community Edition)
https://www.jetbrains.com/ja-jp/pycharm/download/#section=mac

### anaconda navigatorをセットアップ
#### anaconda navigatorを起動
Environmentタブを押下し、下部にあるCreateボタンを押下
<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/422bc94c-98d2-f525-f502-837ea0c33b20.png">

#### 任意の環境名とPythonのバージョンを指定してCreateボタンを押下
<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/5a1c1b47-2652-41dc-1a55-71d667088fec.png">

#### 環境が作成される
<img width="300" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/f28e5845-1549-1724-cc45-2ffe0e789cef.png">

#### 環境右にあるライブラリ検索でDjangoを探し、Applyを押下してインストールする
<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/b82271f5-c275-198b-e3d2-058f0e85196f.png">

### プロジェクト作成
ターミナルで、PC内の任意のディレクトリで実行。mysiteをプロジェクト名に置き換えてください。
```
django-admin startproject mysite
```

### アプリケーションを作成する
myappをアプリ名に置き換えてください。
```
cd mysite
python manage.py startapp myapp
```

### PyCharmを起動
プロジェクトのあるディレクトリを指定して開く

#### 環境を設定
PyCharm > Preferences > Project: mysite > Python Interpreter > 歯車を押下して、Addボタンを押す
<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/188fe0ea-a36d-85a6-7c03-7b4794ce05ce.png">

VirtualEnv Environment > Exisiting environmentで先ほど作成した環境を選択する
<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/1628090b-76f8-33ef-b82a-012679b65e76.png">

#### プロジェクト起動
プロジェクトが存在するディレクトリで実行
```
python manage.py runserver
```

`http://127.0.0.1:8000/`にアクセスし、ページが表示されていたらOK
<img width="500" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2433961/16a753c9-6931-7f87-690c-1d0a99313d11.png">
OpenSSFのscorecardを使ってlog4j2のリポジトリのセキュリティスコアを出してみた


※実務１年未満の駆け出しエンジニアが勉強のためにまとめた記事です。
悪意なく多分に間違いが含まれている可能性があります。

※2 scorecardのスコアを出していますが、それによりlog4j2のセキュリティが脆弱であることを意味する、log4j2を批判しているわけではありません。

※3 導入情報が日本語で見つからなかったので頑張って英訳しましたが間違いがある可能性があります。

以上のことなどを踏まえて、注意して読んでいただければ幸いです。

***

#### 【豆知識】OpenSSFとscorecardとは？なぜOSSの評価が必要なのか？

**【OpenSSFとscorecardとは？】**

OpenSSFとは？
 Linux Foundationの傘下にある組織。
 OSS導入時の安全性の検証作業の効率化などを行っています。

scorecardとは？
 OpenSSFが開発したOSSのGithubリポジトリをセキュリティ的にチェックするアプリ。
 使用者目線ではあるOSSの導入の根拠に使えます。
 開発者目線では自身の開発するOSSのセキュリティ上の安全性をアピールできます。
 また、自身のOSSの既存の脆弱性の発見に使うことができます。

**【なぜOSSの評価が必要なのか？】**

企業のプロダクトにOSSを組み込むことが近年増えています。

それにより、企業には組み込みたいOSSのセキュリティ上の安全性を検証する必要性が生まれました。

しかし、大規模なOSSの評価には膨大な時間がかかります。

scorecardはそんなセキュリティ検証を自動化してくれるツールです。

すでの多くの人気OSSはscorecardを導入済み（らしい）です。

***

#### scorecardをMacで使ってみた

Linux、Windowsでも使えるようですが、今回はMacで行いました。

MacのバージョンはMacOS Catalina 10.15.7になります。

【必要なもの】

**・GOの実行環境**

Homebrewをインストール済みでしたら以下のコードで自動で入ります。
```
brew install go
```

Homebrewがインストールされていない場合、以下のサイトから手動でインストールしてください。

https://go.dev/doc/install

私の環境ではうまく手動導入できなかったので、Homebrewから導入しました。

導入完了の確認はターミナルで以下を実行してください。
```
go -version
```

**・scorecard本体**

今回はローカルでコマンドを使って操作しますので、scorecardのGithubからファイルをダウンロードします。
各OS毎にダウンロードファイルは違いますので、御自身の環境に対応したものを選択してください。

https://github.com/ossf/scorecard/releases

解答したファイルの中にあるバイナリファイルをusr/local/go/binにコピーしてください。

もしusr/localへの行き方がわからないならこちらです。

https://pointsandlines.jp/env-tool/mac/usr-pass

※Win、LinuxはGoがインストールされたディレクトリのbinフォルダと読み替えてください。

**・Github Access Token**

https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

こちらのページを参考にGithubのAccessTokenを入手しておく必要があります。

AccessTokenを作成する際には、「public_repo」にチェックをつけて作成してください。

私は検証に使いたかったので、１日で期限切れになるAccessTokenを作成しました。

作成したAccessTokenは環境変数に登録しておきます。

ターミナルで以下のコマンドを実行してください。
```
export GITHUB_AUTH_TOKEN=ここにアクセストークンを入力
```

#### scorecardを実行する

ここまでの環境準備が整っていれば、あとは簡単なコマンドを入力するだけでscorecardを利用することができます。

例えばlog4j2のリポジトリをチェックしたいならこちらのコマンドになります。

（実行すると終了までに少し時間がかかります。）
```
scorecard --repo=https://github.com/apache/logging-log4j2
```

結果はこちらになります。

![スクリーンショット 2022-05-22 19.15.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2636207/0ed12a32-7cce-ce4e-cbda-0d29f934817a.png)

コードをマージする前にレビューしてる？

ワークフローで変なコーディングしてない？

みたいなことをチェックしているそうなのですが、実際に開発に携わっていない＋該当箇所のコードを読んでいないので、正確なところがどうなのかはわかりません。

はい。ここが重要です。

scorecardで出てきたscoreをきちんと読めないのであれば、それは意味がないでしょう！

でも大丈夫、Linux Foundationならね。

https://training.linuxfoundation.org/ja/training/developing-secure-software-lfd121/

近年のセキュリティ知識と、OpenSSFについて（たぶん）まとまっています。

英語ができるようであれば14−18時間程度で読めます。
（私はまだ途中までです。）

DeepLなどに入れると割と自然な日本語で読めます。

前提知識としては情報セキュリティマネジメントなどのIPA初級の知識か、各種クラウドのセキュリティ関連の資格の１番簡単なやつの知識があれば良さそうです。

#### まとめ

近年企業ではOSSの採用が増えている。そのためセキュリティチェックを効率よく行わなくてはいけない。

その補助ツールとしてscorecardが使える。
scorecardはLinuxFoundation参加のOpenSSF開発で信頼性も高そう。

ただし、scorecardの数値を適切に評価して活用するにはエンジニアとしての高い素養が必要。

####　おまけ

![スクリーンショット 2022-05-22 19.42.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2636207/52b7514a-38ef-12d8-210b-3d6c0ccce6b2.png)