OmniAICreator/Qiita-1.07M huggingface dataset:
M5Stack Core2で画面がフリーズしてしまう

超初心者がやっています
## UiFlowで作成した画面がフリーズする
ジャイロが搭載されているので、加速度、角速度、ピッチロール角のデータ表示の切り替えをやってみた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2660324/fb9699a4-872f-b118-60ab-2a40dbff20f8.png)

### 昨日の挑戦
SetUpで度表示状態からスタート
「ABCボタンが押されたら」ブロックで、赤色矢印を移動させる
　　→これは成功
ならあとは表示項目を変更させるだけでよいでしょう！とおもい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2660324/6298572d-b2e2-bf0d-a1e8-e47bae4d4b16.png)
ラベル表示ブロックをくっつけて実行してみた
。。。。画面フリーズ

他にもループ条件でイベントの「ボタンがwasPressedである」の時にこうするとか作ってみたのですが、全然だめ、切り替えしようとするとすぐ止まって再起動の繰り返しでした

繰り返しの処理がうまくできてないのだと思い
いろんな人のブロックを漁り、初心に帰ってコードで考えて眠りについたところ
頭の中が整理されたのか、すっと思い浮かんだ方法で解決☆彡
リファレンス読み直してブロックの理解していなかったことも原因でした
（論理のブロックで代入したつもりになっていたり）

### 問題解決、ボタンで表示内容の切り替え
流れとしては、
+ 変数ブロックでFlagを作る
+ 「ずっと」処理の中でボタンが押されたときの処理、Flagの数値ごとの処理を記述
+ 各ボタンが押されたときにFlagに0~2の数値を代入する
+ Flagの数値によって表示する項目を変える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2660324/8402d281-1822-360c-0898-31d2a2d2a88d.png)

今までコード書いてるときには何も思わなかったけど
こうしてブロックにするとわからなくなっちゃうこともあるのだと思いました
ブロックで困ってる人あんまりいないのかな

## 画面更新されないわけじゃなさそう
「ずっと」ブロックの中で表示が2回あったとしても、
画面が更新されるのは一番最後のブロックを実行した後みたい
停止しているのはあくまでも処理なだけで画面更新はまとめて最後に行われていそう。
そういうロジックになるように考えなきゃいけないってことね。。
自分用メモ: クエリパラメータ渡し&拡張子隠し

自分用にメモ。
```apache:.htaccess
<IfModule mod_rewrite.c>
    # RewriteEngineの起動
    RewriteEngine On
    # ファイル名の処理 (Ref: https://www.javadrive.jp/apache/htaccess/index9.html)
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME}\.php -f
    # クエリの抽出
    RewriteCond %{QUERY_STRING} (.+)
    
    # リダイレクト実行
    RewriteRule ^(.*)$ $1.php?%1 [L]
</IfModule>
```

## 実行例
`https://example.com/mypage?user=0` => `https://example.com/mypage.php?user=0`

## まとめ
もし困ってる人がいたら力になれればいいな…。
React の使い方 (その2)

こちらのページを参考にしました。
[Displaying Data with Props](https://nextjs.org/learn/foundations/from-javascript-to-react/displaying-data-with-props)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">
</head>
<body>
Hello World!<br />
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById('app')
function Header(props) {
	console.log(props.title)
     return <h1>{props.title}</h1>
   }
function HomePage() {
	const names = ['夏目漱石', '島崎藤村', '森鴎外']
  return (
	<div>
	<Header title="こんにちは" />
<ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
	</div>
	)
}
const root = ReactDOM.createRoot(app)
root.render(<HomePage />)
</script>
May/12/2022 AM 10:05<br />
</body>
</html>
```

ブラウザーでアクセスした結果
![react_may11_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/b0c15d4d-6a8c-2ce7-16a3-67dc8aaec563.png)
[Swift]UITapGestureRecognizerをUIImageViewに付けられないぃぃ！

# はじめに
こんにちは。UIImageにタップイベント付けたくて、UITapGestureRecognizer使ったのに全然反応してくれないじゃないかー！！って感じになったことありますよね。３日後には解決方法を忘れる自信があるので、記事にして残しておきます。それにしても親子丼って美味しいですよね。

# この記事でわかること
- UIImageView、UILabel、UIViewにUITapGestureRecognizerを使って、タップイベントを付ける方法

# 結論

早速結論なんですが以下のコードでタップイベントをつけることができます。
ポイントは`imageView.isUserInteractionEnabled = true`ですね。
この記述がないとタップしても全く反応してくれません。
以上です！
```Swift
    @IBOutlet private weak var imageView: UIImageView! {
        didSet {
            let gesture = UITapGestureRecognizer(target: self, action: #selector(tappedImageView))
            imageView.addGestureRecognizer(gesture)
            imageView.isUserInteractionEnabled = true
        }
    }

   @objc private func tappedImageView() {
        print("imageViewがタップされたよ。")
    }
```

# UILabelとUIViewにもタップイベントを付けてみる
UIImageViewだけでなく、UILabelやUIViewにもタップイベントを付けたくなることがありますね。
以下の画像のようなコードでタップイベントをつけることができます。
ポイントはやはり`isUserInteractionEnabled = true`ですね。
Label、UIImageViewはこの値が初期値ではfalseになっているので、`true`にしなければならないみたいです。
UIViewに関しては初期値が`true`になっているので、`isUserInteractionEnabled = true`を書く必要はないです。
紛らわしいですね。
![スクリーンショット 2022-05-12 10.00.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2644705/b61b6835-09a1-b0eb-4336-32e5fa8e4ec0.png)


## サンプルコード
一応コードをすべて載せておきます。
```Swift
import UIKit

final class ViewController: UIViewController {

    @IBOutlet private weak var label: UILabel! {
        didSet {
            let gesture = UITapGestureRecognizer(target: self, action: #selector(tappedLabel))
            label.addGestureRecognizer(gesture)
            label.isUserInteractionEnabled = true
        }
    }
    @IBOutlet private weak var imageView: UIImageView! {
        didSet {
            let gesture = UITapGestureRecognizer(target: self, action: #selector(tappedImageView))
            imageView.addGestureRecognizer(gesture)
            imageView.isUserInteractionEnabled = true
        }
    }
    @IBOutlet private weak var sampleView: UIView! {
        didSet {
            let gesture = UITapGestureRecognizer(target: self, action: #selector(tappedSampleView))
            sampleView.addGestureRecognizer(gesture)
        }
    }

    @objc private func tappedLabel() {
        print("labelがタップされたよ。")
    }

    @objc private func tappedImageView() {
        print("imageViewがタップされたよ。")
    }

    @objc private func tappedSampleView() {
        print("sampleViewがタップされたよ。")
    }
}
```

# おわりに
アウトプットすると自分の身になった感じがあっていいですね。
ではでは！
ここ近年、Firefoxをサポート外にしたサービス一覧

## 概要

[Statcounter Global Stats](https://gs.statcounter.com/)によると、日本国内のブラウザシェア（2022 年 4 月）を確認すると以下のようなシェアになっている。

| 順位 | ブラウザ | シェア |
| ---- | -------- | ------ |
| 1    | Chrome   | 62.54% |
| 2    | Edge     | 17.47% |
| 3    | Safari   | 7.11%  |
| 4    | Firefox  | 6.64%  |
| 5    | IE       | 3.96%  |

https://gs.statcounter.com/browser-market-share#monthly-202204-202204-bar

10 年ほど前はシェア率が 2 割ほどあり 2 位だった Firefox が今では 4 位となっている。

シェアを独占しているモダンブラウザをターゲットにウェブシステムが構築されることが多く、その場合はレガシィブラウザである IE をサポート対象外にしたり、シェアの低い Firefox などをサポート対象外としてサービスを提供しているサービスも少なくない（Abema TV など）。

---

## Firefox をサポート対象外にしたサービス

ここ近年、Firefox のシェア率を鑑みてか、サポート対象から Firefox を外すケースが出てきている。

以下、お知らせを記載する。

### PayPay 銀行

https://www.paypay-bank.co.jp/news/2022/0307.html

> 2022 年 3 月 25 日より、当社推奨ブラウザのうち Firefox を推奨環境の対象外とさせていただきます。

### NHK プラス

https://provision-plus.nhk.jp/operation/message.html?id=0000001068

> なお、ブラウザ「Firefox」での利用は従来から推奨しておりませんが、5 月 23 日以降に実施予定のアップデートによって、動画が完全に再生できなくなります。

### minne

https://minne.com/infos/2684

> 「Firefox」を推奨環境から対象外とし、サポートを終了いたします。

---

今後もサービスからお知らせがあれば追記していく。
emotion Attaching Props、親の中で子にcssを当てるやり方

コンポーネントを組み合わせてコンテンツを作っていく時、
子コンポーネントに `margin-top` を指定して隙間を設けたい場合が多々あります。
今回はそのやり方です。
[[私は[emotionの記事](https://emotion.sh/docs/with-props)を見てもできませんでしたが、このやり方は `Attaching Props` に当てはまると思っています。]]

## 理想の形

- 親の中で `marign-top` を指定したい。
- `Footer` は自身のcssだけ管理したい。(親のcssは気にしたくない)

```jsx
// 親
const marginTop = css`
      margin-top: 2rem;
    `
<Footer css={marginTop} />
```

```jsx
//子供 (親の都合は知らない)
export const Footer = () => {
  return (
    <footer>
     内容
    </footer>
  )
}

```

この時、やり方としては2パターンあるかなと思います。

### 1つ目：親側でdivやspanで囲ってしまう

```jsx
// 親
const marginTop = css`
      margin-top: 2rem;
    `
<div css={marginTop}>
  <Footer />
</div>
```

正しくstyleが当たります。
ただ、これだとcssを当てるためだけに `div` が生まれてしまいます。
これが続くとファイルの見通しも悪くなってしまいます。

```jsx
// 本当はいらないdivばっかり...
<div css={marginTop}>
  <SampleA />
<div>
<span css={marginTop}> // 注意
  <SampleB />
<span>
<p css={marginTop}>
  <SampleC />
<p>
```

*注意:span等のinline要素はmargin-topは当たらない。block要素で囲むか、display: block;しよう


### 2つ目：理想の形を実現する Attaching

```jsx
// 親
const marginTop = css`
      margin-top: 2rem;
    `
<Footer css={marginTop} />
```

```tsx
//子供 (親の都合は知らない)

type Props = {
  className? : string
}

export const Footer = ({className}:Props) => {
  return (
    <footer className={className}>
     内容
    </footer>
  )
}
```

子供の変更は `className` を持たせただけ。
それを当てておくだけだけで親で指定したStyleが当たります！

## まとめ

この方法を使えば、不要な `div` などを設けず、シンプルに実装できます。
ぜひ使ってください！

ちなみに。。。
純粋なAtomコンポーネントには、 `margin-top` や `margin-bottom` など、他のコンポーネントに影響する指定をする方法はお勧めしません。
後から「このページで使う時にはmarginいらないんだよね。。。」となってしまう時が必ず来る(来そう)からです。
ubuntuでMATLA2022aインストール時に「書き込みができない」エラーが出る

## 環境
1. Ubuntu 18.04.6 LTS
1. MATLAB 2022a
## 出たエラー
MATLABのインストーラーから、インストール時に以下のようなエラーが出る
![Screenshot from 2022-05-12 09-30-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2622495/23272814-1468-5cac-a840-1546e80cb45a.png)

そこで、以下の記事に従って、
```shell:
   $ sudo mkdir -p /usr/local/MATLAB/R2022a
   $ sudo chmod 777 /usr/local/MATLAB/R2022a
   $ ./insatll
```
を実行するも、解決しない。

https://jp.mathworks.com/matlabcentral/answers/471456-linux-matlab

## 解決策
```shell:
   $ xhost +SI:localuser:root
   $ sudo ./install
```
以下の記事を参考に、上のコードで解決した。

https://jp.mathworks.com/matlabcentral/answers/1470321-sudo-install-doesn-t-start-on-linux

R2021a以降から、環境変数がrootに上手く通らないことが原因であると以下の記事に書いてあった。

https://jp.mathworks.com/matlabcentral/answers/133944-why-can-t-i-install-matlab-with-the-root-account-in-linux-when-the-installer-works-for-my-user-accou
React の使い方

こちらのサンプルを React で書き換えました。
[DOM の使い方](https://qiita.com/ekzemplaro/items/a15ee2bd4d2e891e4d0f)
こちらのページを参考にしました。
[Getting Started with React](https://nextjs.org/learn/foundations/from-javascript-to-react/getting-started-with-react)
>react@18 に変更しました。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">
</head>
<body>
Hello World!<br />
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById('app')
const root = ReactDOM.createRoot(app)
root.render(<h1>こんにちは、皆さん</h1>)
</script>
May/12/2022 AM 09:20<br />
</body>
</html>
```

サーバーの起動

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

http://0.0.0.0:8000/ にブラウザーでアクセス
Databricksにおけるプラットフォームリリースプロセス

[Platform release process \| Databricks on AWS](https://docs.databricks.com/resources/platform-release.html) [2021/6/11時点]の翻訳です。

:::note warn
本書は抄訳であり内容の正確性を保証するものではありません。正確な内容に関しては原文を参照ください。
:::

Databricksユーザーに対する影響を最小化するために、リリースは定期的にデプロイされます。デプロイメントの期間、Databricksサービスが一時的に利用できない場合があります。

リリースデプロイメントは、お使いのリージョンの通常の営業時間外にスケジュールされます。

# 通知のタイプ

お使いのデプロイメントモデルに基づいて、デプロイメントが開始する前に表示される通知にはいくつかのタイプがあります。

以下のセクションでは、最も一般的な方法にハイライトします。

## ワークスペースのバナー

特定のデプロイメントタイプでは、Databricks[ワークスペース](https://docs.databricks.com/workspace/index.html)上に通知バナーとして表示されます。詳細を確認するには通知をクリックします。
![](https://docs.databricks.com/_images/workspace-notice-banner.png)

## ステータスページ

デプロイメントを開始する前に、影響を受けるリージョンを指し示すために、Databricks[ステータスページ](https://status.databricks.com/)が更新されます。

デプロイメントが終わると、Databricks[ステータスページ](https://status.databricks.com/)は通常オペレーションとして表示されるように更新されます。

## ステータスページの自動通知

自動通知の[サブスクライブ](https://docs.databricks.com/resources/status.html#subscribe)をすることで、デプロイメントが開始する前にアラートを受け取り、デプロイメントが完了すると2つ目のアラートを受け取ります。これらは、設定したサブスクリプションタイプに基づき、メール経由あるいはwebhook経由で受け取ることができます。

## メール通知のサンプル

以下に、スケジュールされたデプロイメントがスタートする際にサブスクライブした人に通知されるメール通知のサンプルを示します。

```text:Text
Title: Maintenance Notification from Databricks

Affected Infrastructure
Components: Authentication Service, Compute Service, Jobs Service, ODBC/JDBC Service, User Interface,API Service
Locations: us: us-west-1: West US 1: US West (Northern California)

Update:
Databricks has initiated scheduled maintenance in the listed regions. Review the release notes for more information on recent platform updates. An additional notification will be sent when maintenance is completed.
```

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
VirtualBox nagiosサーバーの各サービスのアラート無効化・有効化の手順

### はじめに
前回、以下の記事でホスト単位の監視アラート停止と有効化の手順を記載しました。
https://qiita.com/gama1234/items/f44d9cc46faecacbcae5

### 動作環境
VirtualBoxでnagiosサーバーを構築
nagiosサーバーはCentOS7です。

### サービス単位の監視アラート停止の手順
今回はHTTPのみの監視アラートを停止する手順を記載します。
#### 左側ペインのServiceをクリックし、対象ホスト(localhost)の中のHTTPをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/63d8f4ce-1927-6838-dff0-ab5ef7c0aa15.png)

#### 左側にあるサービスのアラートを無効にする設定をクリックする
Disable notifications for this service
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/73d7f077-b232-74f8-3b6d-fc9c709ae252.png)

#### 対象ホスト(localhost)とservice(HTTP)を確認し、commitをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/b9a702a1-cec4-c07f-0dd2-aef9d4387200.png)

以下のメッセージが表示されること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/926aa436-4d4e-e8a9-edbb-22bbabfff443.png)

#### HTTP アラートが停止されていること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/8f300ce3-2e47-211d-e2ec-a723a7fb4ed7.png)

### サービス単位の監視アラート有効の手順
今回はHTTPのみの監視アラートを有効にする手順を記載します。
#### 左側ペインのServiceをクリックし、対象ホスト(localhost)の中のHTTPをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/f92b7f7e-8922-6c25-57b7-0156ca6d2afb.png)

#### 左側にあるサービスのアラートを有効にする設定をクリックする
Enable notifications for this service
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/8ad4c6ad-9ea2-942b-ec4f-ff81ca8f894b.png)

#### 対象ホスト(localhost)とservice(HTTP)を確認し、commitをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/0dd9ed21-d046-ca92-dbdc-da91a2a562e6.png)

以下のメッセージが表示されること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/3f5f0fdb-26f9-5bd0-927f-766176eac64d.png)
#### HTTP アラートが有効になっていること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/553ac414-d578-1247-a69d-abb1bee02887.png)
100日後くらいに個人開発するぞ！day023

## 今日は検証ツール(デベロッパーモード)を使ってみた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/8a3cbe48-6681-b71b-d6b6-3697af028d96.png)



## 今日の学び
### Webページ上のHTMLを確認する方法
* 検証ツールを出す方法
    * 右クリック＞「検証」を選択
    * 「command」+「shift」+「c」
* HTMLを確認する方法
    * 検証ツールの左上に表示されてるカーソルアイコンをクリック
    * ページに表示されてるHTMLを見たい部分をカーソルで選択

### Webページ上のHTMLを編集する方法
1. 検証ツールで変更したい部分を選択して右クリック
1. 表示されたメニューの中から「Edit as HTML」を選択し編集
1. 編集後に「command」を押しながら「Enter」を押して書き換え

### Webページ上のCSSを確認する方法
* CSSを確認する方法
    * 検証ツール左上のカーソルアイコンをクリック
    * Webページ上の見たい要素を選択
    * 検証ツール内の下部または右に表示される「Style」にCSSのコードが表示される
* ボックス構造の確認
    * 検証ツール内の「Style」の下または右側にボックス構造が表示される
    * ボックス構造では要素の大きさや余白を確認できる
* 任意の状態でのCSSを確認
    * 「Style」の右上あたりにある「:hov」をクリック
    * 表示される「Force element state」という選択欄で確認したい状態を選択


### Webページ上のCSSを編集する方法
1. 検証ツールで変更したい部分を選択して右クリック
1. 「Style」内の変更したい箇所を編集し「Enter」

### Webページ上のCSSを追加する方法
1. 「Style」内の右上にある「＋」ボタンをクリック
1. CSSを記述できる欄が追加されるのでその欄にCSSを追記する
DOM の使い方

こちらのページを参考にしました。
[Updating the UI with JavaScript and DOM Methods](https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">
</head>
<body>
Hello World!<br />
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app')
const header = document.createElement('h1')
const headerContent = document.createTextNode(
	'こんにちは、皆さん')
header.appendChild(headerContent)
app.appendChild(header)
</script>
May/12/2022<br />
</body>
</html>
```

サーバーの起動

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

http://0.0.0.0:8000/ にブラウザーでアクセス

![dom_may1201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/2bd7573d-1a1b-067c-4a83-1506c871ca86.png)
GASでoAuth2で接続しようとしているときに「Grant type "authorization_code" not supported」が出たときにやったこと。

# GASでoAuth2で接続しようとしているときに「Grant type "authorization_code" not supported」が出たときにやったこと。

## 概要
https://github.com/googleworkspace/apps-script-oauth2
を使ってoAuthで外部アプリケーションと接続していた。久しぶりに動かしてみたら「Grant type "authorization_code" not supported」のエラーが出て動かない。これを治していこう。

## 前提条件
* ライブラリ　https://github.com/googleworkspace/apps-script-oauth2　を使っている
* アクセストークン取得のリクエストパラメータが下の表の通りである

| パラメータ名 | 有効な値 |
|:-:|:-:|
| client_id | アプリケーション詳細画面で確認できるクライアントID |
| client_secret | アプリケーション詳細画面に表示されているシークレット文字列 | 
| code | 取得した認可コード文字列 |
| grant_type | “client_credentials”を指定 |

## 結論
トークン取得時にclient_credentialsが指定できていなかった。
ソースから
```
Service_.prototype.handleCallback = function(callbackRequest) {
...略
  var payload = {
    code: code,
    client_id: this.clientId_,
    client_secret: this.clientSecret_,
    redirect_uri: this.getRedirectUri(),
    grant_type: 'authorization_code'
  };

```
となってコールバック処理時のデフォルトgrant_typeが'authorization_code'であることがわかる。このauthorization_codeが、このまま流れている。これを治すには、

```
const auth = OAuth2.createService('tetete')
auth.setGrantType('client_credentials')
```

などでは治らない。

```
  auth.setTokenPayloadHandler(function(tokenPayload) {
       tokenPayload.grant_type = "client_credentials";
        return tokenPayload;
      })
```
のように、コールバック処理中にpayloadを捕まえて変形させる必要があった。

## つまりsetTokenPayloadHandlerを使えば良い。
おつかれさまでした。
Linuxコマンド　メモ・リンク

自分用
随時更新

## ssh
```
ssh root@192.168.xxx.xxx
```

## telnet
```
telnet 192.168.xxx.xxx
```

## sshpass
```
sshpass -p 'pass' ssh root@192.168.xxx.xxx 'ls -l'
```

## xargs
標準出力から受け取った値を引数に渡すコマンド

時間順にls で抽出した3つのファイルをlessで閲覧
```
ls -t|head -n 3|xargs less
```

## less
ファイルごと中身を閲覧するコマンド

testで始まるファイルを(-c 画面をクリアして)閲覧
``` 
less -c test* 
```

:n 次のファイル
:p 前のファイル
q less終了

## find
ファイル数
```
find ./ -type f|wc -l
```

時間指定　３０日以上前のテキストファイルを削除
```
find ./ -mtime +30 -name "*.txt" -type f | xags rm -f
```

findで検索したX番目のファイルをcat
```
find . -type f -name "test*"|head -n X|tail -n 1|xargs cat
```

testから始まるファイルを検索(-maxdepth 1 1階層：カレントディレクトリのみ)
```
find . -maxdepth 1 -type f -name "test.*"
```

「.」も「./」も カレントディレクトリを指す

https://linux.just4fun.biz/?%E9%80%86%E5%BC%95%E3%81%8DUNIX%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89/find%E3%81%AB%E6%97%A5%E6%99%82%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E8%A9%B2%E5%BD%93%E3%81%99%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E6%A4%9C%E7%B4%A2%E3%81%99%E3%82%8B



## du

## df -h
全ファイルシステム
```
df -h
```
該当するファイルシステム
```
df -h /home/user
```

マウント位置:ファイルシステムの切れ目

## grep
```
ls -l|grep test
```
https://academy.gmocloud.com/lesson/20191009/7620

## pushd popd
https://atmarkit.itmedia.co.jp/ait/spv/0609/16/news022.html


## yum と dnf 使う上では全く違いがない話
>dnf が導入された以降のRHEL系のOS（RHEL 8、CentOS 8、AlmaLinux 8、Rocky Linux 8、RHEL 9、CentOS Stream 9 など）では、yum と dnf は /usr/bin/dnf-3 へのシンボリックリンクになっています。
ここ最近、yum を使うと古いパッケージがインストールされる(←間違いです)、yum と dnf を混在して使うと依存関係がおかしくなる(←これも間違いです)、といったすごい誤解を耳にすることがあったので記事にしてみました。yum と dnf の正しい理解が広まることを心から祈ります 

https://blog.apar.jp/linux/16100/

## touch
ファイルの更新時間更新
```
touch -d "2022-9-20 20:30" sample.txt
```
#### 大量のファイル作成
1000件の空ファイル作成(test_1~1000.txt)

```
touch test.file;for i in {1..1000};do cp test.file test_${i}.txt;done
```

## iconv
sjisのファイルを開く際に使用する
https://atmarkit.itmedia.co.jp/ait/articles/1609/12/news019.html

```
iconv -f sjis sampletext.txt |less
```
-l 文字コード一覧
「なんのために作るか分からへん」と愚痴っていたらPMさんが救ってくれた話

※今回はほぼ実話です。

# システム開発会社勤務　プログラマーワイ

ワイ「さあ、今日も開発をしていこか」
ワイ「とあるWebサービスの**管理画面**を作らなアカンのや」
ワイ「今日は、どんな機能を作らなアカンのやったかな」
ワイ「せや、クライアントさんからもらった**機能一覧.xls**を見てみよか」
ワイ「あとは、デザインデータも見ながら、詳細設計書でも作っていこか」
ワイ「・・・ふーむ、作るべき機能の一覧は書いてあるんやけど」
ワイ「なんか、やる気が出ぇへんなぁ」
ワイ「仕方ないから、社内のSlackで愚痴っとこか」

> ワイ「今のプロジェクト、誰のために何を作ってるのかがイマイチ分からんから」
ワイ「モチベーションが上がらへんなぁ」
ワイ「この管理画面を使って、どんな課題を解決したいのか」
ワイ「どういう風にユーザーさんの業務をうまく回したいのか」
ワイ「そんなんがピンと来てないから、作るべきモノもはっきり見えへんし」
ワイ「やる気が出ぇへんわ」

ワイ「よーし、これで少しスッキリしたわ」
ワイ「でも、もう少し愚痴っておこか」

> ワイ「なんか、ユーザーさんの業務の目的が分かるような資料が欲しいなぁ」
ワイ「ワイが今書いてるみたいな**独り言形式**で」
ワイ「業務のフローとか、ユーザーさんの思考とかが書いてあるような」
ワイ「そんな資料があったらやる気が出るかもしれんわ」

ワイ「これでよし、と」

**スッコココッ**

ワイ「お、PMさんからメンションが来たで？」

> PMさん「独り言形式で書けばええんやな？」
PMさん「待っとけ」

ワイ「おぉ、まじか」

# 2時間後

> PMさん「独り言形式の業務フローの資料、作ったったで」

ワイ「おぉ、仕事が早いこっちゃ」
ワイ「さっそく見てみよか、ポチッとな」
ワイ「おお、このスライド、15ページもあるやないけ」
ワイ「たった2時間で、すごいPMさんやで」
ワイ「ほな、読んでいこか」

> **【機能名】商品配送履歴検索**
ユーザー「私は株式会社Hogeの社員、ホゲ太郎だ」
ユーザー「弊社はショッピングサイトを運営している」
ユーザー「さっき顧客から問い合わせがあって、商品が届かないらしい」
ユーザー「管理用のWebサイトから、発送手続きの履歴を確認しよう」
ユーザー「ブラウザでアクセスして、ログインして」
ユーザー「左メニューから**商品配送履歴**をクリックして」
ユーザー「よし、該当の画面にアクセスできたぞ」
ユーザー「さっきのお客さんの注文を検索しよう」
ユーザー「顧客IDと、日にちで検索して」
ユーザー「お、該当の注文が見つかったぞ」
ユーザー「なるほど、配送のステータスは〇〇だな」
ユーザー「ということは・・・」

ワイ「おおー、ワイが作ってる管理画面が、何のためにあるのか」
ワイ「どんな場面で使われるのか、そういうのが分かって、業務理解が捗るわ」
ワイ「それに、独り言形式やから」
ワイ「なんか実際に体験したみたいに、脳にスッと入って来るわ」
ワイ「こう、ユーザーさんのストーリーが分かると、なんかエエな」
ワイ「**ユーザーストーリー**いうやつやな」
ワイ「なんか目的が分かって、やる気でてきたわ」
ワイ「この資料、**マークダウン**で書き直して」
ワイ「**GitHubで管理**しといたらええんちゃうかな」
ワイ「そしたら、仕様が変わった時とかに履歴を残せるよな」

> 〇月〇日 △△のため、□□機能の仕様を変更

ワイ「↑こんな感じで`Git`に`commit`しといたらええもんな」

# クライアントさんとのやりとりにも使えそう？

ワイ「クライアントさんとも、このストーリーを見ながら」

> クライアント「ここの機能のストーリーですが、私たちの認識と違います」
> クライアント「30行目の〇〇を、△△に訂正お願いします」

ワイ「とか、そんな風に要件を詰めていけそうやしな」
ワイ「うんうん、多少やる気が出てきたわ」

# それにしても

ワイ「それにしても」
ワイ「このPMさんは、プログラミングもガッツリできるし」
ワイ「データベースのテーブル設計もできるし」
ワイ「AWSとかのインフラも詳しいし、スーパーマンやな」
ワイ「感謝感謝や」
ワイ「さあ、明日から頑張ろか」
ワイ「もう15時やし、業務終了や」

**〜おしまい〜**

# 新しい記事もよろしくやで
- [6歳娘「パパ、条件によって変わる型を作りたいの」](https://qiita.com/Yametaro/items/9b2f0ab2037450004816)


# Zennにも記事を書いてみましたやで
- [独り言形式で綴る「OGP & SSR」](https://zenn.dev/tokumoto/articles/0098b3e850676f)

# noteも書いてますやで
- [ワイ「三角関数って、要らなくね？」](https://note.com/yametaro/n/n4ad2f07cde72)
ドイツで2年間完全テレワークをしてみて

１年ほど前、[[ドイツで1年間完全テレワークをしてみて](https://qiita.com/dg4101/items/9f83fbddf29e97302013 "ドイツで1年間完全テレワークをしてみて")]という記事を書きました。あれからさらに１年たって、変化があったことなどを書いてみようかと思います。

# ロックダウンと在宅勤務
ご存じのように、ヨーロッパの各国では強制力をもったロックダウンを何度か行ってきました。それに伴って、在宅勤務もほぼ強制的に行われてきましたが、デルタ株のピークが過ぎたころからロックダウンなどの規制は徐々になくなってきました。現在では普段の生活ではほぼ全面的に撤廃されている感じです。特定の場所、公共交通機関などではマスクの着用義務があったりしますが、それ以外ではお店の中でもマスクをする必要はありません。

規制がなくなったころから、在宅勤務からオフィス勤務に戻すかもしくはハイブリッドワーク（在宅と出社を組み合わせた勤務）にするかなどの話をよく聞くようになりました。自分が務めているところは、基本的には在宅ですが出社をすることもできます。

これはそれぞれの好みや家庭事情などもあるようですが、同僚でもオフィスのほうは仕事がはかどると言う人もいれば、在宅のほうがいいと言う人もいるようです。部署によって所属の社員がすべて同じオフィスで勤務しているようなところは、週に日を決めて出社とかしているようです。

オフィスも全員が毎日出社する前提のレイアウトではかなり無駄が出てほとんどが空席となるので、最近では固定席をなくしている会社もあるようです。この場合、普段一緒に仕事をしない、もしくはあったこともない人が隣で座っていて新しいネットワークはできますが、普段の仕事上でのコラボレーションが目的で出社している場合は逆に働くような気もします。

# 在宅勤務で変わったこと
* 以前のように９時ー５時ではなくなりました。もともと時差のある国の人と仕事をしていたので９時ー５時で成り立つ職種ではないのですが、以前のように通勤がなくなったので働いている時間の幅が以前より広がったと思われます。人によっては午前中は休んで、午後から夜遅くまで勤務したり、途中に長めの休憩をとったりと人それぞれの予定や事情に合わせて仕事をしているようです。
* 社員もそれに慣れてきているので、”誰々は何曜日の午前中はオフラインだからミーティングをずらそう”といったように同僚の事情により配慮して予定を組んでいるように見受けられます。
* エンジニア的にはこれはかなり助かり、集中して時間をとって仕事をできる時間がより増えて生産性が上がっていると思います。
* 複数のコラボレーションツールを使うようになりました。SlackやTeamsやZoomなど複数採用しているので、人によったらどちらかのツールに偏って使っていたり、ミーティングはTeamsでチャットはSlackなど両方を常に開いていないといけない状態になったりします。
* ワークショップなどは以前だと広めの会議室を週単位で借り切って行っていたりしたのですが、これもオンランでそれ用のツールなんかを使って行っています。オンラインで行うようになってから、以前のように１週間とか数日とか言った長い単位ではなく、午前中だけとか数時間だけといった短い単位でのワークショップをできるようになりました。
* 最近は普通の風邪やコロナで軽症の場合、在宅勤務なので休みを取らずに働いている人も見かけるようななりました。以前だと、風邪だと通勤するには大変で周囲の人にうつすので休みを取るのが普通でしたが、最近ではうつす心配もないし通勤の必要もないので仕事を続けている人もいるようです。

# エンジニアの仕事をしていて
* これは以前からもそうですが、同じプロジェクトのエンジニアのメンバーと仕事をしてるとリモートでもまったく差し支えなく、使えるツールを使って技術的な話や、コードレビューなどなんでも普通に行えます。むしろリモートのほうが複数人で同時に行えるのでやりやすかったりすると思っています。
* 特にエンジニア系の仕事をしている人はリモート率が高いので、会議でも”今どこにいるのか？”というのが話題になったります。リモートになって特にオフィスのそばに住む必要がないので、地元に帰ったり、休暇を兼ねてヨーロッパのほかの国から仕事をしている人もいるようです。
* エンジニア同士ではもとからあまりメールを使っていませんでしたが、SlackやTeamsを使うようになってからは本当にメールを使う機会が減りました。チーム内やプロジェクト内の連絡もほぼSlackやTeamsで済まされています。エンジニアの仕事はJiraなどのシステムを使って経過を追っているので、メールでやり取りすることもありません。

# 税制上の対策
ドイツではコロナ以後、在宅勤務をする人が増えたのでそれらの人の家庭での経費負担の削減のために控除項目ができました。以前は仕事専用の部屋などを持っていないと、自宅を仕事で使用した際の経費控除ができなかったのですが、すべての人が仕事部屋を持てるような家に住んでいるわけではないのでそのような人でも年間最大600ユーロまで控除出来うようになりました。ドイツでは会社員でも普通に確定申告が必要なので、このような控除項目を活用するといくらかは還付金がもらえることもできます。

# 最後に
最近、フランクフルトに滞在している人と話をしたのですが、コロナ以前はフランクフルトから１時間以上かけて、時には渋滞で２時間近くかかって通勤していたそうです。ホームオフィスになってそれが無くなり、また時差のあるところの人と会議をするために、夜遅く仕事をするので逆に朝は運動に時間を使えるようになったと言っていました。
自分も久しぶりにアウトバーンを運転してみましたが、以前のような渋滞は全くなくなっていました。多くの人がテレワークをすることによって渋滞の緩和もされ、車通勤も減るので環境にも良い効果があるのかと思ったりもします。今回のことでこれからの働き方は大きく変わるのではないかと感じられました。
2022/5/12主にITとかセキュリティの記事

「BIG-IP」脆弱性に注意 - 実証コード公開済み、探索や悪用も
https://www.security-next.com/136392

2021年に悪用多かった脆弱性トップ15 - 首位は「Log4Shell」、VPNも引き続き標的に
https://www.security-next.com/136375

しまむら、サイバー攻撃でシステム障害 - 全店舗の一部サービスに影響
https://www.security-next.com/136406

脆弱性管理避けられぬOSS、経産省が事例集を拡充
https://www.security-next.com/136391

企業がサプライチェーンのセキュリティに取り組む際に必要な6つのポイント(5/10)
https://news.mynavi.jp/techplus/article/20220510-2342223/

日本企業が標的型攻撃に取るべき対策は「侵入されても持ち出させない」(5/10)
https://news.mynavi.jp/techplus/article/20220510-2342459/

DNP P&Iセミナー
工場が今狙われている！サイバー攻撃から守る方法とは(6/7開催)
https://www.dnp.co.jp/biz/eventseminar/seminar/10162256_1595.html

2022年4月フィッシング報告件数は9万件超、過去最高の前月より9,714件増加(5/10)
https://news.mynavi.jp/techplus/article/20220510-2342231/

衣料品「しまむら」ランサムウエアによるサイバー攻撃受けたか(5/10)
https://www3.nhk.or.jp/news/html/20220510/k10013620031000.html

ブラザーオンラインの一部会員のアカウントに不正アクセスの可能性、サービス停止し調査(5/10)
https://s.netsecurity.ne.jp/article/2022/05/10/47565.html

ハイブリッド戦、安保戦略明記へ　サイバー司令塔検討
政府、ウクライナ侵攻踏まえ(5/9)
https://www.nikkei.com/article/DGXZQOUA241ZB0U2A420C2000000/

Discordを悪用するマルウェアに注意│手口と対処法を解説(5/10)
https://news.nifty.com/article/technology/techall/12276-1622814/

【許せん】「ウクライナ人道危機救援金の募集」を騙る極悪非道なフィッシング詐欺に注意！(5/10)
https://rocketnews24.com/2022/05/10/1630357/

会員向けサービスサイト「ブラザーオンライン」における不正ログインの発生について(5/10)
https://www.brother.co.jp/news/2022/incident0510/index.aspx

オープンソースソフトウェアの利活用及びそのセキュリティ確保に向けた管理手法に関する事例集を拡充しました(5/10)
https://www.meti.go.jp/press/2022/05/20220510001/20220510001.html

仮想通貨業界を襲う「マネロン規制」、そのヤバすぎる中身 「業界自体が吹っ飛ぶかもしれない」…！(5/10)
https://gendai.ismedia.jp/articles/-/94576?page=1&imp=0

【情報セキュリティ対策の道のりと今後の展望・1】標的型サイバー攻撃の被害を受けた企業の教訓(5/10)
https://www.weeklybcn.com/journal/explanation/detail/20220510_190791.html

「NoOps」のビジョンはどれほど現実的に？--今あらためて考える(5/10)
https://japan.zdnet.com/article/35186991/

TTFBを改善してサーバの応答速度を向上させよう（2）(5/10)
https://ascii.jp/elem/000/004/089/4089946/?rss

エーザイがMSとBoxで脱Notesを実現：直面した「コラボレーションとセキュリティの両立」という課題とその解決とは(5/10)
https://enterprisezine.jp/article/detail/15919

「Google広告」で34億件を停止・削除、ウクライナ戦争を利用した広告掲載は不可に(5/10)
https://webtan.impress.co.jp/n/2022/05/10/42737

ロシア衛星ＴＶにハッキング、「血まみれの手」と反戦メッセージ(5/10)
https://jp.reuters.com/article/worldNews/idJPKCN2MW0AB?il=0

イーサリアムのスマートコントラクトの仕組み
https://hedge.guide/cryptocurrency/guide/introduction-to-smart-contract

80歳超えアプリ開発者の至言　「プログラミングは料理と同じ」(5/11)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/052100112/042600039/

ブラウザーの中に「偽ブラウザー」　URL確認で防げないフィッシング(5/11)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/052100113/042700081/

Pathwaysの恐るべき威力　グーグルの万能AIが目指す究極形(5/11)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/052100111/042700073/

国内クラウドの能力は重要な国家課題　データは経済安保で守るべき国益
小林 鷹之 氏　経済安全保障担当大臣(5/11)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600001/050600109/

注目の「経済安全保障」　ITへの影響は(5/11)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600014/050600116/
論文まとめ：D-NeRF: Neural Radiance Fields for Dynamic Scenes

# はじめに
CVPR2021より以下の論文
[1] A. Pumarola, et. al. D-NeRF: Neural Radiance Fields for Dynamic Scenes. CVPR2021
のまとめ

- CVF open access
https://openaccess.thecvf.com/content/CVPR2021/html/Pumarola_D-NeRF_Neural_Radiance_Fields_for_Dynamic_Scenes_CVPR_2021_paper.html

- github
https://github.com/albertpumarola/D-NeRF
ライセンス不明

# 概要
- NeRF系で deformable な物体に対応した先駆け的な論文の１つ
- 3Dの正解データを必要としない
- 単眼カメラで撮影した動画を用いる（NeRFは同時に多方面から撮影）
- fieldを動きの変化を捉えるものとカラーや密度を推定するものの２つにわける

# problem formulation
## 目標

${\rm \bf x} = (x, y, z)$: 物体に関する３次元座標
${\rm \bf c} = (r, g, b)$: 推定するカラー
$\sigma$: 推定する密度
${\rm \bf d} = (\theta,\phi)$: view direction
としたときに目標は

```math
\mathcal{M} :({\rm \bf x}, {\rm \bf d}, t) \rightarrow ({\rm \bf c}, \sigma)
```

と写像する $\mathcal{M}$ を求めること。NeRF原論文との違いで言うと、物体が動くので時間の要素 t が加わっている。

この $\mathcal{M}$ を直接求めようとする手法もあるが、筆者らの実験では以下のように２段階に分けた方が上手くいくとのこと。

- 与えられたシーン（deformed scene）からcanonicalなシーン（scene canonical space）へ変換する $\Psi\_t$
- 与えられたシーン（deformed scene）からcanonicalなシーン（scene canonical space）へ変換する $\Psi\_x$

![スクリーンショット 2022-05-10 6.27.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/9532c1b8-8732-f288-d385-69276d064254.png)

この図にあるように $\Psi\_t : ({\rm \bf x}, t) \rightarrow \Delta {\rm \bf x}$ と default の状態（t = 0の状態）に対する差分を出力する。

こうして求まった scene canonical space に対して $\Psi\_x : ({\rm \bf x} + \Delta {\rm \bf x}, {\rm \bf d}) \rightarrow ({\rm \bf c}, \sigma)$ で色と密度を推定する。

## 入力として使うデータ
- ${\rm \bf I}\_t \in \mathbb{R}^{H \times W \times 3}$: t 時の画像
- ${\rm \bf T}\_t \in \mathbb{R}^{4 \times4} \ {\rm SE}(3)$: t 時のカメラの外部パラメータ

# ネットワークのアーキテクチャ

## canonical network
８層のMLP。NeRFのネットワークと違い、密度 $\sigma$ も最終層から出力される。

## deformation network
こちらも８層のMLP。

canonical network 、あるいは NeRF のMLPと同様、neural networkが高周波なものを再現しにくいという性質を補完するため、入力で以下のように座標 x や向き d encode する。

```math
\gamma (p) = <(\sin {\left( 2^l \pi p \right)}, \cos{\left( 2^l \pi p \right) } >_0^L
```

# volume rendering
canonical space上ではNeRFの neural radiance fieldと同様にレンダリング。

# loss
NeRFと同様レンダリングしたカラーと正解値のカラーとの差。

# 学習に関して
- 収束しやすいようにするため、初めは動画の最初の方の frame のみで学習し、徐々に後半の frame も加えていった
- 画像サイズは 400 x 400
- iterationは800K
- バッチサイズha4096 rays
- 各光線において64点のサンプリング
- 最適化：adam
- 学習時間は Nvidia GTX1080 使って２日かかった


# 定性的評価
以下の図は学習後の新たな視点に対する推論結果。

![スクリーンショット 2022-05-12 3.15.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/6014ea36-0c3b-ca05-ff0c-a08c023eb2e1.png)

各行は上からcanonical space(t=0), t=0.5, t=1.0。

各列は左からカラーをレンダリングしたもの、それを voxcel化してmarching cube algorithでmesh化したもの、depth、canonical spaceに対する変位を可視化するため同じ部位を同じ色としたもの。



# 定量的評価

以下はNeRFとT-NeRF（canonical spaceを用いず、直接 radiance fieldで変位まで学習したもの？）、とのMSE, PSNR, SSIMの比較。

![スクリーンショット 2022-05-12 3.20.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116706/3fe6cabb-3637-e178-323f-6bd2b2d1f3ac.png)

deformableなデータを用いているので、NeRFはこれに対応できず精度が悪い。T-NeRFとD-NeRFとではD-NeRFが若干よい。
commit時にESlintとPrettierを実行する【ESLint】【Prettier】

## はじめに
`git commit`をした際に`eslint --fix`と`prettier --write`を実行する方法について記載します。

### パッケージのインストール
以下のコマンドを実行して`husky`および`lint-staged`をインストールします。
```:ターミナル
$ yarn add -D husky lint-staged
```

### `lint-staged`の設定
lint-stagedの設定をします。
`package.json` に以下のように記述することでステージングしたファイルに対しコマンドを実行できます。
```package.json
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  },
```

### `Git hooks`を有効化
以下コマンドを実行して`Git hooks`を有効化します。

```:ターミナル
yarn husky install
```

以下のように`.husky`ディレクトリが作成されます。
![スクリーンショット 2022-05-12 午前2.42.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/e805ff5f-3178-31a2-18d7-b33fa0f9e9b4.png)


`git clone`してパッケージをインストールした際に`Git hooks`を有効化するため、`package.json`に`prepare`を記述します。

yarn2以降を使用している場合には`prepare`は使用でないので`postinstall`を記述します。

```package.json
  "scripts": {
    "prepare": "husky install"
  },
```

```package.json
  "scripts": {
    "postinstall": "husky install"
  },
```


### `hooks`を作成
以下のコマンドを実行して`hooks`を作成します。
```:ターミナル
$ yarn husky add .husky/pre-commit "npx lint-staged"
```
実行すると`.husky`ディレクトリに`pre-commit`ファイルが作成されます。

![スクリーンショット 2022-05-12 午前2.50.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/e34af6af-0665-9086-f13b-15a5405e3811.png)


```pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged
```


### 確認
正常に動作する確認します。

```:ターミナル
$ git add .

$ git commit -m "test"
✔ Preparing lint-staged...
✔ Hiding unstaged changes to partially staged files...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Restoring unstaged changes to partially staged files...
✔ Cleaning up temporary files...
[main bf38a3f] test
 1 file changed, 1 insertion(+), 1 deletion(-)
```
【Ruby】Rubyコードのパフォーマンスを計測したい

# 概要
Rubyのパフォーマンスを計測するためprofile.rbを使用して計測します。
実際に速度が遅くなっていないかを調べることがあったためメモとして残す。

# テストコード(フィボナッチ数列)

test_fib.rb
```ruby
def fibonacci(i)
  (i == 0 || i == 1) ? 1 : fibonacci(i - 1) + fibonacci(i - 2)
end
n = 20
puts "fib(%d) = %d" % [n, fibonacci(n)]
```

そのまま実行すると
```
$ ruby test_fib.rb 
fib(20) = 10946
```

profile.rbを使用して実行すると

```
$ ruby -rprofile test_fib.rb 
fib(20) = 10946
  %   cumulative   self              self     total
 time   seconds   seconds    calls  ms/call  ms/call  name
 85.25     0.52      0.52    21891     0.02     0.38  Object#fibonacci
  6.56     0.56      0.04    10945     0.00     0.00  Fixnum#+
  4.92     0.59      0.03    39601     0.00     0.00  Fixnum#==
  3.28     0.61      0.02    21890     0.00     0.00  Fixnum#-
  0.00     0.61      0.00        1     0.00     0.00  String#%
  0.00     0.61      0.00        2     0.00     0.00  IO#write
  0.00     0.61      0.00        1     0.00     0.00  IO#puts
  0.00     0.61      0.00        1     0.00     0.00  Kernel#puts
  0.00     0.61      0.00        1     0.00     0.00  TracePoint#enable
  0.00     0.61      0.00        1     0.00     0.00  TracePoint#disable
  0.00     0.61      0.00        1     0.00     0.00  Kernel#respond_to?
  0.00     0.61      0.00        2     0.00     0.00  IO#set_encoding
  0.00     0.61      0.00        1     0.00     0.00  Module#method_added
  0.00     0.61      0.00        1     0.00   610.00  #toplevel
```

となり、簡単ではあるがパフォーマンスを計測できる。
各フィールドの意味は左から順に次の通り。
* 全体時間のパーセンテージ
* 全体時間の総和(単位は秒)
* 正味時間の総和(秒)
* 呼び出された回数
* 1回の呼び出し当たりの平均正味時間(ミリ秒)
* 1回の呼び出し当たりの平均全体時間(ミリ秒)
* メソッド名

# 参考
profile.rb - Rubyリファレンスマニュアル
http://uralowl.my.coocan.jp/unix/job/UNIX/tool/ruby/profile_rb.html
python-controlで線形システムの固有振動数を求める

# 概要
python-controlで線形システムの固有振動数などの振動特性を求めるには `control.matlab.damp` が便利

# 振動特性を算出する `control.matlab.damp`
線形システムの固有振動数などの振動特性は `control.matlab.damp` で簡単に算出できる。

https://python-control.readthedocs.io/en/latest/generated/control.matlab.damp.html

```python
wn, damping, poles = control.matlab.damp(sys, doprint=True)
```

- 引数
  - `sys` : 線形システムオブジェクト
  - `doprint` : 結果の標準出力の有無
- 戻り値
  - `wn` : 固有角振動数
  - `damping` : 減衰比
  - `poles` : システムの極

# `control.matlab.damp` の使用例
バネマスダンパー系での `control.matlab.damp` の使用例を示す。

```python
from control import matlab
import numpy as np

m = 5.0
k = 2.0
c = 1.0

A = [[0.0, 1.0], [-k / m, -c / m]]
B = [[0.0], [1.0 / m]]
C = [[1.0, 0.0]]
sys = matlab.ss(A, B, C, 0)

wn, damping, poles = matlab.damp(sys, doprint=True)
```

```:標準出力
_____Eigenvalue______ Damping___ Frequency_
      -0.1   +0.6245j     0.1581     0.6325
      -0.1   -0.6245j     0.1581     0.6325
```

`doprint=True` による標準出力では単に `Frequency` と表示されているが、その下の値および戻り値の1番目 `wn` は**固有角振動数**である。固有振動数が必要な場合は $2\pi$ で除算する。

```python
frequency = wn / 2 / np.pi
print(frequency)
```

```:標準出力
[0.10065842 0.10065842]
```

確認として、固有角振動数と減衰比を次の数式から直接算出してみる。
```math
\omega_n=\sqrt\frac{k}{m}, \zeta=\frac{c}{2\sqrt{mk}}
```

```python
print("固有角振動数:", np.sqrt(k / m))
print("減衰比:", c / 2 / np.sqrt(m * k))
```

```:標準出力
固有角振動数: 0.6324555320336759
減衰比: 0.15811388300841897
```

`control.matlab.damp` による出力と整合が確認できる。
PythonでCLIアプリケーションを作る

# はじめに

Pythonを用いて，CLIアプリケーション作成を支援するパッケージを作ったので，その記録を残します．

```bash
❯❯❯ python3 -V
Python 3.9.7
```

必要なパッケージをインストールしておきます．

```bash
❯❯❯ pip3 install wheel twine
```

# PyBundleCli

今回，私が作ったパッケージに```PyBundleCli```と名前をつけました．

```bash
❯❯❯ pip3 install PyBundleCli
```

# 手順１　init

インストールができたら，初期設定をします．

```bash
❯❯❯ pybundle init
```

これは，```~/.pybundle/config.json```作ります．

```bash
❯❯❯ pybundle config set git_account 'gitのアカウント'
```

この情報は後で作成するファイルに使用されます．

また，```setup.py```に記載する情報を

```bash
❯❯❯ git config user.name

❯❯❯ git config user.email
```

で取得していますので，必要に応じて設定してください．

また，作成したアプリケーションをPyPIに登録してpipでインストールしたい人以下のステップも実行してください．

- https://pypi.org/
- https://test.pypi.org/

に登録してください．

そして，

```bash
❯❯❯ touch ~/.pypirc
```

お好きなエディタで，以下のように編集．

```:~/.pypirc
[distutils]
index-servers =
  pypi
  testpypi

[pypi]
repository: https://upload.pypi.org/legacy/
username: <username>
password: <password>

[testpypi]
repository: https://test.pypi.org/legacy/
username: <username>
password: <password>
```

それぞれのusernameとpasswordを編集してください．

# 手順２ プロジェクトを作成する

```bash
❯❯❯ pybundle new <project_name>
```

お好きなproject_nameで始めてください．
今回私は，```myappp```という名前でデモをします．


```bash
❯❯❯ cd myapp
❯❯❯ tree -a
.
├── .gitignore
├── LICENSE
├── README.md
├── myapp
│   ├── __init__.py
│   └── myapp.py
└── setup.py

1 directory, 6 files
```

このようなディレクトリ構造で自動的に作成されます．

# 手順３　ローカルにインストール

動作確認を兼ねて，ローカルにインストールしてみましょう．

```bash
❯❯❯ python3 setup.py sdist
❯❯❯ pip3 install dist/myapp-0.0.1.tar.gz
```

```myapp-0.0.1.tar.gz```というバージョン0.0.1の圧縮ファイルが作成され，それをpipでインストールしています．

バージョンを上げる際は，```myapp/__init__.py```を編集してください．

コマンドを叩いてみましょう．

```bash
❯❯❯ myapp
Hello, world!
```

無事に動いていますね！

たった，これだけで自分専用のCLIコマンドができました．

もちろん，```Hello, world!```と返ってくるだけのアプリは必要ありません．

編集するファイルは，```myapp/myapp.py```のmain functionです．

これは，```setup.py```の

```python:setup.py
entry_points={
        "console_scripts": [
            "myapp = myapp.myapp:main"
        ]
    },
```

で定義しているので，必要に応じて編集してください．
また，左辺はコマンド名になるので，ここも編集可能です．

# (オプション) pypiにアップロード

素晴らしいコマンドができたなら，世界に公開しましょう．

その前に，```myappp```という名前は誰かが使ってしまっているでしょう．あなただけの一意な名前をつけましょう．

```python:setup.py
name='PyBundleCli',
```

ここを編集します．

また，ローカルにインストールした際の情報が邪魔をしますので，


```bash
❯❯❯ rm -rf dist/ myapp.egg-info/
```

で削除しましょう．

test版にアップロードして，確認します．この際に```~/.pypirc```を参照しています．

```bash
❯❯❯ python3 setup.py sdist bdist_wheel
❯❯❯ python3 -m twine upload -r testpypi  --vorbose
```
うまくいけば，本番環境にあげましょう．

```bash
❯❯❯ python3 -m twine upload -r pypi  --vorbose
```

おめでとうございます！あなたの素晴らしいアプリが世界に公開されました！

これで，pipでインストールできるようになります．


# ローカルインストール，アップロードの自動化

ローカルにインストールする際や，アップロードする際のコマンドを覚えるの大変ですよね．

これもコマンド化しました！！

```bash
❯❯❯ git clone git@github.com:kyohei-horikawa/pypi.git
```

一意な名前が思いつかなく，pypiにアップしていないので，gitからcloneしてください．

ローカルにインストールしましょう．この煩わしい作業もこれが最後です．

```bash
❯❯❯ cd pypi
❯❯❯ python3 setup.py sdist
❯❯❯ pip3 install dist/*.tar.gz
```

## 使い方

ローカルインストール

```bash
❯❯❯ pypi local
```

pypiにアップロード

```bash
❯❯❯ pypi upload [pypi|testpypi]
```
自社にて「もくもく会」を10回ほど企画してみた

# 1.はじめに
どうも、ARIの名古屋支社に勤務している愛知県民です♪
(/・ω・)/

Qiitaで面白そうなイベントがやっていたので、参加ボタンをポチりました。

https://qiita.com/official-events/3f21c92121aa125807b4

何を書こうか悩んだのですが、いつもの自分の記事とは少し趣を変えて、
**もくもく会を10回ほど企画した感想**について記事にしたいと思います！
新人の方の参考になれば幸いです。
(*^^)v

# 2.用語の説明
## 2.1.もくもく会とは
もくもく会とは、**参加者がやりたいこと（資格勉強や読書やQiitaの記事執筆など）を「黙々」とする会**のことです。
自分が企画したのはオンラインですが、学生時代にみんなで集まってテスト勉強する様なイメージです。

参考URL：https://www.pasonatech.co.jp/workstyle/column/detail.html?p=2282

# 3.もくもく会を企画しようと思った理由
まず初めに、自分がなぜもくもく会を企画しようと思ったかを記載します。
2021年某日、とあるオンライン飲み会にて「**なかなか勉強する時間がとれないんだよねー**」という話が出て、
数人が共感して盛り上がりました。

「各人が勉強時間を確保できるような仕組みが作れないかな？」と色々考えたところ、
もくもく会を思いついたので、社内のチャットにてもくもく会に興味がある人がいるかどうかを聞いてみました。

何人かの方から返信があったので、「**やってみてダメならやめればよい。失敗してもいいから、やってみよう。**」
くらいの気持ちで、自分が所属している事業部署の人向けのもくもく会を企画・実施しました。

# 4.企画したもくもく会の情報
次に、具体的に自分がどのようなもくもく会を実施したのかをまとめます。
もくもく会の時間は固定で、その他はかなり自由にしました。

|項目|内容|
|---|---|
| 開催頻度 | 毎週水曜日 |
| 開催時間 | 19:30~23:00 |
| 開催形式 | Web会議室で開催 |
| 対象 | 同じ事業部の人（約80人） |
| 参加・不参加 | 自由 |
| 途中参加・退出 | 自由 |
| マイク・カメラのオンオフ | 自由 |
| もくもくする内容 | 自由 |

毎週3,4人の方に参加いただいて、**AWSの資格勉強、Qiitaへの記事投稿をもくもくしている人が多かったです。**
また、自分自身は19:30~21:00、22:00~23:00で参加することが多かったです。
（間の1時間はお風呂休憩）

# 5.もくもく会を企画した感想
## 5.1.勉強時間の確保ができた
毎回3,4人の方でもくもくして、**自分自身はもちろん、他の人の勉強時間の確保にもつながった**と感じました。
単純にもくもく会だけで約25時間勉強できたので、「塵も積もれば山となる」を体感でき、
「**各人が勉強時間を確保できるような仕組みを作る**」という目標も多少は達成できたと考えています♪
また、自分自身はカメラをオンにしていて、見られている状況だったので、スマホ等も触らずに集中することができました。

ただ、80人ほどいるチャットで発言していたので、**毎回3,4人は少ない**気もしました。
毎回8人ほど参加者がいるような会にするにはどうすればいいかを考えています。
（例えば、「5月はAWSの勉強強化月間」みたいにしてある程度テーマを絞るのはどうかなと思っています。）

人数を増やすことだけが目的になると趣旨がずれてしまうので、その点には気をつけます。

## 5.2.少しだけ交流の場になった
基本的に質問以外のおしゃべりはせず、もくもくするようにしていましたが、
誰かが参加したときは今日何をもくもくするか聞いたり、先に参加した人が何をもくもくしているかを話したりして、
少しではありますが交流の場にもなりました。

**個人的にはコロナの時代だからこそ交流は大切だと思う**ので、
もくもくしながら交流を増やすために何かできないかを考えています。

## 5.3.質問を通じて深い学びができるとより良い
上記2つはポジティブな内容でしたが、改善点もあるので記載します。

自分自身の経験が基になりますが、他の人に教える、他の人から教わることはお互いの勉強になると考えています。
もくもく会では質問はOKとしていましたが、**中々質問は出なくて、上記の様な学びの機会は少なかったと感じました。**

もっと気楽に質問ができるようにするにはどうすればいいかを考えています。
（思い切って、雑談OKのWeb会議室とそうでないWeb会議室を分けてみようかと思っています。）

# 6.おわりに
ここまで読んで下さり、ありがとうございます！！！
(^^)

もくもく会は勉強時間の確保に悩んでいる新人の方にはおすすめなので、是非やってみてください！
（「**勉強したいとは思っているけど、中々一歩が踏み出せない人**」は特におすすめです。）

自社で開催していない場合は、Web等で調べると一般向けのもくもく会が出てくるので、
1人で参加するのが緊張する場合は友達と2人以上で参加してみるのも良いと思います♪

最後に、**自分が企画しているもくもく会は30~40点くらい**と思っていて、
まだまだ盛り上げることはできると考えているので、適宜修正していこうと考えています。
次はもくもく会を30回くらいやったときに記事にしようかな、と考えているのでお楽しみに♪
(:3_ヽ)_
Visual Studio Codeでマークダウンが更に便利に書けるようになったぞ！

Qiita 初心者です。ご質問・ご指摘はコメントかツイッターまでお気軽にどうぞ！
よかったら**LGTM**や**拡散**していただけると励みになります。
# Visual Studio Code version 1.67 がリリース
2022年5月6日にVisual Studio Code(以下 VS Code)の 1.67 がリリースされました。
主な変化はブラケットの色付けをデフォルトで有効化されたのと、Markdown のサポートが強化されたことです。
その中でも今回は、「Markdown のサポートの強化」について記載していきます。

# Markdown って何？
> Markdown は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書から HTML を生成するために開発されたものである。(Wikipedia 引用)

つまりは、エディターなどから簡単に HTML の様な形式に変換しやすい記述ができる言語のことです。
Qiita や Github に載せるような文章を HTML を書かなくても簡単に記事にしてくれる言語です。
（また、それだけではなく、パワーポイント形式や LaTeX 形式のファイルへ変換できます。）

# 今回の新機能
それで、VS Code と何が関係あるかというと、Markdown を更に書きやすいように VS Code がパワーアップしたのが今回の Update です。

主に今回のアップデートは２点あり。

- ドラッグ＆ドロップで自動リンク挿入（画像も挿入できる）
- Find All References（すべての参照を検索）」機能が、Markdown に対しても使えるようになった。

という２つの機能が Markdown に関する主な変更点です。

## ドラッグ＆ドロップで自動リンク挿入（画像も挿入できる）
![md-drop-link.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600119/2802487d-737e-1050-6a19-d0f57f74bfb8.gif)
（画像引用：[Visual Studio Code リリースノート](https://code.visualstudio.com/updates/v1_67)）
VS Codeからこのように自動でリンクの挿入ができるようになりました。
「Shift」を押したままMarkdownファイルにドラッグアンドドロップするだけでこのように自動で画像やリンクがMarkdown形式で反映されます。

## Find All References（すべての参照を検索）」機能が、Markdown に対しても使えるようになった。
こちらの機能は少し上級編にはなりますが、例えば参照を持たせてリンクをしたい時（外部参照リンク）などに変数名を変える場合「F2」をクリックして変更すると、参照されている先の変数まで変えてくれたりします。

記事内で特定のタイトルまでリンクする際も「F2」でタイトル名を変更してくれたりします。

# VScodeも日々進化
最後に、VS Codeも日々進化してますね。自分も実務の中でしっかり使い方をマスターして少しでも効率的に働けるよう頑張っていきます。
リリースノートを見て当日中に公開したかったので走り書きの様になってしまいましたが、「こんな便利な使い方があるよ！」や「記事の内容間違ってるよ」などあればコメントなどでも教えてくれると助かります！

また、このような有益な情報を[Twitter](https://twitter.com/kihaya_tech)でもシェアしてますのでよければフォローお願いします。
foo_comserver2をrubyから操作するメモ

foobar2000をfoo_comserver2（COM Automation Server）経由で操作するときに詰まったところのメモ


```ruby
require 'win32ole'
ole = WIN32OLE.new 'Foobar2000.Application.0.7'

# index番目のプレイリストに移動。右辺はオブジェクト
ole.Playlists.ActivePlaylist = ole.Playlists[index]

# 名前で指定する場合
ole.Playlists.ActivePlaylist = ole.Playlists.each.find { _1.name == 'playlistname' }

# 現在のプレイリストのindex番目の曲を再生
# Playback.Stopは使えたが、Startは思ったように使えなかった。こちらを使う。
# メソッド名からすると、foobarの設定によっては再生以外のアクションになるのかもしれない
ole.Playlists.ActivePlaylist.DoDefaultAction index
```
callback関数ってなんだっけ？

# 背景
一度は学んだはずなのにしばらく使ってないとわからなくなることがよくある。callbackもその1つで今まであまり意識して使えていなかったので、メモする

# callback関数とは
- 関数の引数として渡す関数のこと
- 渡ってきた関数をその関数内で実行（call）するからcallback関数

# 例
例えば、以下のようにcallback関数を受け取って実行するrunCallbackとcallback関数であるplusをそれぞれ定義する。
```sample.js
const runCallback = (a, b, callback) => {
   return callback(a, b);
}
const plus = (a, b) => {
   return a + b;
}
runCallback(1, 2, plus);
```
上記を実行すると
```
3
```
となる。
# なぜ、callback関数を使う必要があるのか？
結論、渡すcallback関数によって関数の処理を変更ことができるから
例えば先程の例でも新たにminusというcallback関数を追加することでrunCallback関数の処理を変更することができる。
```sample.js
const runCallback = (a, b, callback) => {
   return callback(a, b);
}
const plus = (a, b) => {
   return a + b;
}
const minus = (a, b) => {
   return a - b;
}
runCallback(5, 2, plus);
runCallback(5, 2, minus);
```
上記を実行すると
```
7
3
```
このように、callback関数次第で関数の処理を制御できる点がcallback関数の便利なところ
Rails 7 の便利な ComparisonValidator でちとハマった

Ruby on Rails で日付の前後関係に関するバリデーションをどうやって書こうか調べていたら，Rails 7 で，ComparisonValidator なるものが導入されたことを知った。

この記事は，ComparisonValidator の簡単な紹介と，私がハマった落とし穴について。

# 概要

ComparisonValidator は，モデルオブジェクトの属性値を他の値と比較するバリデーター。

Rails 7 より前でも，数値に関しては NumericalityValidator を使って

```rb
validates :amount, numericality: { greater_than: 100 }
```

みたいなことができていた。この例は，`amount` の値が 100 よりも大きいことを要請する。

これを，数値以外の比較可能な値にまで広げよう，ということらしい。
文字列でも日付でもいいわけだ。

日付を固定値と比較するバリデーションは，たとえば

```rb
validates :start_date,
  comparison: { greater_than_or_equal_to: Date.new(1900, 1, 1) }
```

のように書ける。

また，他の属性値との比較は，属性名をシンボルで与えて，

```rb
validates :end_date,
  comparison: { greater_than_or_equal_to: :start_date }
```

というように書ける。この例は，終了日（`end_date`）が開始日（`start_date`）以降でなければならない，というバリデーションだ。

おお！　これこそまさに求めていた機能。
Rails 6 までに無かったのが意外だったが。

# Proc を与える場合の注意

ここまではよかったのだが，この先で一つの落とし穴にハマった。

やりたかったことは，「終了日（`end_date`）が本日以降でなければならない」というバリデーション。

これを

```rb
validates :end_date,
  comparison: { greater_than_or_equal_to: Date.today }
```

と書いてはダメなことは分かっていた。
`Date.today` の値はバリデーションを行うタイミングで求める必要がある。
しかし，上記のコードだと，モデルクラスを作る段階で式 `Date.today` を評価してしまうので，正しいバリデーションにならない。

どうすればいいかというと，`Date.today` の値を返すような Proc オブジェクトを与えればいい。その Proc オブジェクトは，バリデーションを行うタイミングで評価される。

こういうことは，私が ComparisonValidator を知ることになったどっかのサイト（失念）に書かれていて，サンプルコードも載っていた。

こんなふうに書けばよい（？）：

```rb
validates :end_date,
  comparison: { greater_than_or_equal_to: -> { Date.today } }
```

Proc オブジェクトを，いわゆるラムダ記法 `-> { }` で与えている。スマートだね。

た，確か，どっかのサイトにこういうサンプルが載ってたんだ。し，信じてくれ。

ところが，これでバリデーションをかけると，エラーメッセージが

```
"wrong number of arguments (given 1, expected 0)"
```

になる。えっ，ちょっ・・・，それ，どういうこと？　バグってね？

エラーメッセージの i18n がおかしいのかとか，いろいろ調べて数時間を溶かした。

結論としては，Proc オブジェクトの arity（引数の個数）の問題であった。
与えた Proc オブジェクトが呼ばれるとき，モデルオブジェクトが渡されるのだ。
そのモデルオブジェクトを使うかどうかは自由なのだが，`-> { }` で生成した Proc オブジェクトはラムダなやつなので，引数の不一致を許さない。
これが

```
wrong number of arguments (given 1, expected 0)
```

の原因であるらしい。

解決策は，

```rb
validates :end_date,
  comparison: { greater_than_or_equal_to: Proc.new{ Date.today } }
```

のように〈非ラムダな Proc オブジェクト〉を渡してやるか，

```rb
validates :end_date,
  comparison: { greater_than_or_equal_to: -> x { Date.today } }
```

のようにダミーの引数（ブロックパラメーター）を持たせてやるか。
ダミーの引数は `x` とかよりも `_` のほうがよいかもしれない。
MAX3232を利用してArduinoにRS232Cを追加する

# 概要

Arduinoでプログラムを書くとき、PCとArduinoをRS-232Cで接続したいことがあります。もちろんシリアルモニタでなんとかなる場合もありますが、そうじゃなくてもう一系統欲しいんだよ！という思いを解決します。

# 解決方法

MAX3232を間に挟むことで解決できます。AliExpressやawmazonでArduinoにRS-232Cを追加するためのモジュールとして普通に売っています。複数の商品がありますが、写真を見る限り同じように見えるので、どれを買っても同じだと思います。
例えば以下のパーツなんて5個で600円なので、びっくり安いです(5個もいらないですけど、私はこれを買いました)

https://www.amazon.co.jp/Ren-He-MAX3232%E3%83%81%E3%83%83%E3%83%97-RaspberryPi-%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC%E7%94%A8/dp/B095YKR4XG


# ソフトウェアシリアルを用いた通信

MAX3232をArduinoで利用する方法はとても簡単で、以下の図のようにDIGITALのピンとRXD/TXDのピンを接続するのみです。
MAX3232は5Vで動作するので電源は5Vから取り、GNDはGNDに接続します。


![max3232.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7029/769556e9-9c4a-3c7e-4e6e-93813647d80a.png)

あとは、接続したピンの情報をもとに、適当にスケッチを描くだけです。
以下のようにスケッチを描けば、1秒ごとに"cnt:1"などと表示されます。

```c
#include <SoftwareSerial.h>

// 第1パラメータがRXDと接続したPIN、第2パラメータがTXDと接続したPIN
SoftwareSerial max3232Serial(7, 8);

unsigned int cnt = 0;

void setup() {
  max3232Serial.begin(115200);
  max3232Serial.listen();
}

void loop() {
  ++cnt;
  char sprintfbuff[64] = {0};
  sprintf(sprintfbuff,"cnt:0x%02X", cnt);
  max3232Serial.println(sprintfbuff);
  delay(1000);
}

```

TeraTerm上の表示が↓

![teraterm](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7029/c09af47d-2c26-f641-2ab6-49b3af53a6ac.png)


# さいごに

ということで、MAX3232を用いてソフトウェアシリアルでRS232Cを追加する方法を書きました。
パーツを買って繋げるだけで動くのですが、それだけの情報が意外と無くて、Arduino初心者の私は困ったのを覚えています。

このMAX3232モジュールも問題が無いわけではないのですが、普通に動いてくれているので、この値段であれば及第点かなと思っています。


## 私が気が付いた問題点

このMAX3232モジュールは、アダプタ部分にスペーサが付いています。そして、私が利用しているUSB-シリアル変換ケーブルにもスペーサが付いています。
故に、これらが干渉して繋がらない！現象が発生しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7029/89c37e2d-d883-3773-460d-5576cad50a86.png)

なんでやねん！と思いながらMAX3232モジュール側のスペーサを取り外したら、なんかフレームごと取れました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7029/4b8ba515-58a1-9e4c-fef9-66d67c5ea8a7.png)

これこそDIYだぜ！！！!最高！


# 参考記事

[RS232C をUARTに変換し、Arduino で送受](https://qiita.com/UchiwaFuujinn/items/01ace8a588bb58bc0bc5)
localStorageデータ操作あれこれ（保存、取得、更新、削除など）

# データを保存

```jsx
localStorage.setItem("key", "value");
```

## 複数データを保存

```jsx
let user_data = {
  gender: "男性",
  win: 0,
  lose: 0
}
localStorage.setItem("key", JSON.stringify(user_data)); //JSON形式へ変換
```

# データを取得

```jsx
localStorage.getItem("key");
```

## 取得したデータをJSONに変換し出力

```jsx
JSON.parse(localStorage.getItem("key"));
```

JSONに変換する理由は、valueに複数の値がセットされている場合に `“.” で繋ぐことにより値を取得`できるため。

```jsx
//key => user

//value
{"name":"田中","password":"xxxxxxx","win":"0","lose":"0",}

let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name);

// 出力：田中
```

# データを更新

基本的には `localStorage.setItem("key", "value");` で上書き保存できるが、下記のように `value` に複数のデータが入っている場合、1つのデータのみ（nameの田中のみ）を更新し、その他のデータをそのまま保持させることはできない。
例えば、`name`データのみ更新する場合に`localStorage.setItem("user", "ブライアン");`としてしまうと`name`以外のデータは消えてしまう。なので下記のような記述が必要。

```jsx
//key => user

//value
{"name":"田中","password":"xxxxxxx","win":"0","lose":"0",}

//value
let data = {
	"name": "ブライアン", //名前のみの更新でも全てのデータを上書きが必要
	"password": "xxxxxxx",
	"win": 0,
	"lose": 0
}
localStorage.setItem("user", JSON.stringify(data));
```

# 特定のデータを削除

```jsx
localStorage.removeItem("key");
```

# 全データを削除

```jsx
localStorage.clear();
```

# 特定のキーが存在しているかチェックする

```jsx
if(localStorage.hasOwnProperty("key")) {
    console.log("このキーは存在しています");
}
```

戻り値はデータが存在すれば `true` 
データが存在しなければ `false`  

# 参考

- [localStorageの使い方・実例全９件！](https://blog.capilano-fw.com/?p=5341)
- [LocalStorageをもっとデータベースライクに使う方法](https://qiita.com/masamitsu-konya/items/ce7f6469434076448238)
- [jsonを配列に、配列をJSONに](https://notepad-blog.com/content/129/)