OmniAICreator/Qiita-1.07M huggingface dataset:
未来を切り開く！JavaScript API 5選：初心者向けガイド



こんにちは！今回はあまり知られていないけれど、とてもパワフルで未来のウェブ開発に役立つJavaScript APIを5つ紹介したいと思います。それぞれのAPIの詳細な説明と、実際の使い方を見せるサンプルコードを提供します。早速見ていきましょう！

### 目次
1. [画面内に入ったら通知：Intersection Observer API](#1-画面内に入ったら通知intersection-observer-api)
2. [サイズ変更を感知：Resize Observer API](#2-サイズ変更を感知resize-observer-api)
3. [ユーザーの位置を取得：Geolocation API](#3-ユーザーの位置を取得geolocation-api)
4. [音声とテキストの変換：Web Speech API](#4-音声とテキストの変換web-speech-api)
5. [ウェブ上の決済を簡素化：Payment Request API](#5-ウェブ上の決済を簡素化payment-request-api)

## 1. 画面内に入ったら通知：Intersection Observer API


Intersection Observer APIは、ウェブページ上の特定の要素がビューポート（画面内）または他の特定の要素と交差したときに通知を受け取るためのAPIです。これを使用すると、要素が画面内に入ったときにアニメーションを開始するなど、ユーザーのスクロールと連動した動作を実装するのに役立ちます。

```javascript
let options = {
  root: null,
  rootMargin: '0px',
  threshold: 1.0
}

let callback = (entries, observer) => { 
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element has intersected!');
    }
  });
};

let observer = new IntersectionObserver(callback, options);

observer.observe(document.querySelector('#target'));
```

## 2. サイズ変更を感知：Resize Observer API


Resize Observer APIは、特定の要素のサイズ変更を監視するAPIです。このAPIを使用すると、要素のサイズが変更されたときにレイアウトを更新するなどの動作を実装するのに役立ちます。

```javascript
let observeSize = (entries) => {
  for (let entry of entries) {
    console.log('Width:', entry.contentRect.width);
    console.log('Height:', entry.contentRect.height);
  }
};

let resizeObserver = new ResizeObserver(observeSize);

resizeObserver.observe(document.querySelector('#target'));
```

## 3. ユーザーの位置を取得：Geolocation API



Geolocation APIは、ユーザーの現在の地理的な位置を取得するAPIです。ただし、プライバシーの理由から、このAPIを使用するにはユーザーの許可が必要です。

```javascript
navigator.geolocation.getCurrentPosition(position => {
  console.log('Latitude:', position.coords.latitude);
  console.log('Longitude:', position.coords.longitude);
});
```

## 4. 音声とテキストの変換：Web Speech API



Web Speech APIは、音声データを合成（テキストから音声へ）または認識（音声からテキストへ）するAPIです。このAPIを使用すると、ウェブページに音声インタラクションを追加することができます。

```javascript
let msg = new SpeechSynthesisUtterance('Hello, World!');
window.speechSynthesis.speak(msg);
```

## 5. ウェブ上の決済を簡素化：Payment Request API



Payment Request APIは、ウェブページで決済を行うためのAPIです。このAPIを使用すると、ユーザーの決済情報の入力と検証を簡素化し、より良いユーザーエクスペリエンスを提供することができます。

```javascript
let request = new PaymentRequest(
  [{
    supportedMethods: "basic-card",
    data: {
      supportedNetworks: ["visa", "mastercard"],
      supportedTypes: ["credit", "debit"]
    }
  }],
  {
    total: { label: "Total", amount: { currency: "USD", value: "100.00" } }
  }
);

request.show().then(payment => {
  console.log(payment);
}).catch(error => {
  console.log(error);
});
```

以上、5つのパワフルなJavaScript APIについて紹介しました。それぞれのAPIについては、さらに深く学ぶことで、さらに多くの可能性を探求することができます。ぜひ、あなたのプロジェクトでこれらのAPIを試してみてください！未来のウェブ開発を一緒に創造していきましょう！
最近設定してる settings.json

```json
{
    "python.linting.flake8Enabled": false,
    "python.linting.flake8Args": [
        "--ignore=W293, W504",
        "--max-line-length=120",
        "--max-complexity=20"
    ],
    "python.formatting.provider": "none",
    "[python]": {
        "editor.defaultFormatter": "ms-python.black-formatter",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
            "source.organizeImports": true
        }
    },
    "black-formatter.args": [
        "--line-length",
        "120"
    ],
    "isort.args": [
        "--profile=black"
    ],
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "python.testing.pytestArgs": [
        "--capture=no"
    ],
    "python.testing.unittestEnabled": false,
    "python.testing.pytestEnabled": true,
    "python.analysis.extraPaths": [
        "./"
    ],
}
```
sshdのポートフォワード設定

sshでポートフォワーディングがうまく動作しない場合、SSHサーバー側でポートフォワードが許可されいない可能性がある。

設定
```bash:bash
$ vi /etc/ssh/sshd_config
# ESXi is not a proxy server
AllowTcpForwarding no -> yes
```
設定を変更したら、sshdを再起動する
初心者でも分かる！JavaScriptのgetElementByIdとReactのuseRefの違いと使い分け方


# はじめに

HTML要素を操作するための手法として、JavaScriptの`getElementById`やReactの`useRef`が頻繁に使用されます。しかし、これらの手法はどのように異なり、どのように使い分けるべきなのでしょうか。今回は、初心者でも理解できるように`getElementById`と`useRef`の違いについて解説します。

## getElementByIdとは

`getElementById`はJavaScriptの基本的な関数で、特定のID属性を持つHTML要素を取得するために使用されます。

以下に、HTML要素からテキスト内容を取得するシンプルな例を示します。

```html
<div id="myDiv">こんにちは、世界！</div>
```

```javascript
let div = document.getElementById('myDiv');
console.log(div.textContent);  // "こんにちは、世界！"が表示されます。
```

このコードでは、`getElementById`関数を使用してIDが"myDiv"の`<div>`要素を取得し、そのテキスト内容をコンソールに表示しています。

### getElementByIdのメリット・デメリット

#### メリット

- `getElementById`は純粋なJavaScriptで、特定のライブラリやフレームワークに依存せずに使えます。
- ID属性が一意であることから、指定した要素を直接取得することができます。

#### デメリット

- Reactなどのフレームワーク内で`getElementById`を頻繁に使用すると、フレームワークの「宣言的」なパターンから外れる可能性があります。
- `getElementById`を頻繁に使用すると、直接的なDOM操作が増えるため、コードの管理が難しくなる可能性があります。

## useRefとは

`useRef`はReactのフックで、Reactのコンポーネント内で特定の要素を参照するために使用します。

以下に、ボタンクリック時に特定の要素のテキスト内容をコンソールに表示する例を示します。

```jsx
import React, { useRef } from 'react';

function MyComponent() {
  const myDivRef = useRef(null);

  const handleClick = () => {
    console.log(myDivRef.current.textContent);
  }

  return (
    <div>
      <div ref={myDivRef}>こんにちは、世界！</div>
      <button onClick={handleClick}>テキストを表示</button>
    </div>
  );
}

export default MyComponent;
```

このコードでは、`useRef`フックを使用して`<div>`要素の参照を作成し、それを`myDivRef`に保存しています。そして、ボタンがクリックされたときに、その参照を使用して`<div>`のテキスト内容をコンソールに表示します。

### useRefのメリット・デメリット

#### メリット

- `useRef`はReactのフックの一部で、Reactコンポーネント内で使用するのに適しています。
- `useRef`は参照の保持に使うため、一度設定するとその値は再レンダリング時にも保持されます。

#### デメリット

- `useRef`はReact特有の概念であり、その使用はReactのコンテキストに限定されます。
- useRefは主にDOM要素の参照に使用されますが、それ以外の用途（例えば値の保持）に使用するとコードが理解しにくくなる可能性があります。

# まとめ

`getElementById`と`useRef`の違いを理解することで、具体的な状況や必要性、さらには使用している技術スタック（純粋なJavaScriptかReactなどのフレームワークか）によって適切な手法を選択できるようになります。それぞれの特性を理解し、効率的な開発を進めるために適切に使い分けてみてください。

以上、読んでいただきありがとうございました。この記事があなたの学習に役立つことを願っています。いいねやコメントもお待ちしています！
Kaggleの無料データセットの確認  ~toyota_cars~

# 概要
Kaggleで公開されている無料データセットを確認してみた。
AIの開発に使用でき、色々な検討ができそう。

# 環境
OS: MacOS 13.4.1
DockerDesktop: 4.20.1
python3.8.5

# データのダウンロード
以下のサイトからダウンロードする。
https://www.kaggle.com/datasets/occultainsights/toyota-cars-over-20k-labeled-images

またその他にも様々なデータが公開されている。その他のものも今後確認してみる予定。
https://www.kaggle.com/competitions/google-universal-image-embedding/discussion/337384

ダウンロードしたファイルを解凍すると、車種ごとの名前でフォルダ分けされた画像があることが確認できる。

# クラス数のカウント
それぞれのフォルダの画像の枚数をカウントし、クラス数を調べる。
Pythonで記述。
```python: check_data.py
import os

def check_data():
    path_input = os.path.join('dataset')
    list_dir = [f for f in os.listdir(path_input) if os.path.isdir(os.path.join(path_input, f))]

    path_save = os.path.join('output', 'dataset_toyota_cars.csv')
    with open(path_save, 'w') as logfile:
        logfile.write('dir_name,file_count\n')
    for dir in list_dir:
        path = os.path.join(path_input, dir)
        list_files = [f for f in os.listdir(path) if os.path.isfile(os.path.join(path, f))]
        with open(path_save, 'a') as logfile:
            logfile.write('{},{}\n'.format(dir, len(list_files)))

if __name__=='__main__':
    check_data()
```


# 結果
各クラス数は以下のようになっていた。
```file: dataset_toyota_cars.csv
dir_name,file_count
4runner,946
alphard,64
avalon,497
avanza,63
avensis,167
aygo,109
camry,2246
celica,101
corolla,2311
corona,70
crown,77
estima,32
etios,74
fortuner,254
hiace,75
highlander,1119
hilux,435
innova,121
iq,27
matrix,63
mirai,57
previa,44
prius,1039
rav4,1786
revo,162
rush,23
sequoia,166
sienna,652
soarer,48
starlet,48
supra,173
tacoma,1318
tundra,1035
venza,122
verso,112
vios,141
vitz,102
yaris,844
```

# 最後に
Kaggleで公開されているデータセットを確認してみた。
他のデータセットも今後確認予定。

https://github.com/yujimats/check_data_toyota_cars.git
【備忘録】GitCliのgh browseが使えない

## 参考
https://qiita.com/yasuflatland-lf/items/02f1323e44e1af9f81b6

https://www.asobou.co.jp/blog/web/archilinux-on-wsl2

https://wslutiliti.es/wslu/install.html

## 症状
 Windows10 + WSL2 (Ubuntu)でgh browseを実行しようとしたときに、以下のエラーが出てブラウザが起動しない
```
exec: "xdg-open,x-www-browser,www-browser,wslview": executable file not found in $PATH
```

## 解決方法
 ```
# パッケージリポジトリを追加
sudo add-apt-repository ppa:wslutilities/wslu
sudo apt update
# WindowsとLinuxの統合がスムーズになる機能を持つパッケージをパッケージリポジトリからインストール
sudo apt install wslu
 ```
日本リージョンでもDatabricksアシスタントが使えるようになりました！

以前の記事ではUSリージョンで試していましたが、日本リージョンでもDatabricksアシスタントを使えるようになりました！

# Databricksアシスタントの有効化

1. [アカウントコンソール](https://accounts.cloud.databricks.com/login)にログインします。
1. サイドメニューの**設定**にアクセスし、**機能の有効化**タブにアクセスします。
1. **Enable third party services for AI assistive features**をオンにします。
![Screenshot 2023-07-28 at 9.45.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/32c278ca-d090-fbbe-dc3a-5b4eb3176263.png)
![Screenshot 2023-07-28 at 9.45.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/2afe26b5-4a05-9fb1-4251-47f79a17262a.png)

# Databricksアシスタントの活用

1. ワークスペースにログインしてノートブックを開きます。
1. 画面左側に新規アイコンが！
![Screenshot 2023-07-29 at 17.10.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/da2d687b-f5b3-82f9-ed0e-d56c0330fbec.png)
![Screenshot 2023-07-29 at 17.10.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/bb3dd4cf-9818-525b-087b-6674f51c8195.png)
1. 問い合わせてみます。`Sparkでのcsvの読み込み`と入力してみます。
![Screenshot 2023-07-29 at 17.11.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/503b74cd-50b6-f3ff-f2e5-72f94199a943.png)

動きました！ぜひお試しください。そして、フィードバックお待ちしております。

### Databricksクイックスタートガイド

[Databricksクイックスタートガイド](https://www.amazon.co.jp/dp/B09V1YXFVQ/)


### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
Firebaseで新着順に並び替えたり数値やデータでフィルタリングしたりする方法

## 概要
個人開発でFirebaseを使っていた際に新着順に並び替える必要があり、ドキュメントで何とか理解したが分かりにくかったのでまとめます✨

自分が初心者だからこそ、初心者に伝わりやすい記事を書けるかなと思っています

(もし気が向いたら、今回作った個人開発の[QuickURL](https://quick-url-b0462.web.app/)もチェックしてみてください🙇)
## 並び替えの方法
まず前提としてFirebaseにおいては受信したデータを並び替えるのではなく、先に並び替えたリクエストのqueryを作成してから受信します
```js
const sampleRef = collection(db, "sampleCollection");
```

まずはこのようにしてコレクションをしていしたRefを作成します
この時点で特定のDB内の特定のコレクションを参照しています

---

普通はこのままこのコレクションからデータを受信するのですが、並べ替えが必要な場合は受信前にqueryというものを作成して並べ替えをするそうです

実際にこの形の一例として公式ドキュメントに示されている例は以下↓
```js
const q = query(citiesRef, orderBy("name", "desc"));
```
この例の場合だと
「citiesRefというコレクションの中のドキュメントをnameのアルファベット順で並べる」
ということになります

つまりorderByの第一引数に「並べ替えの基準となるフィールド名」第二引数に「数値順や追加順などのルール」を入れるだけ。非常に簡単です
```js
const q = query(listsRef, orderBy("並べ替えの基準となるフィールド名", "数値順や追加順などのルール"));
```
あとは実際にこれで取得したqでデータを受信すれば、希望の並べ替えが行われたデータが受信できます！(以下は一例)
```js
getDocs(q).then((snapshot) => {
  snapshot.docs.forEach((doc) => {
    console.log(doc.data());
  });
});
```
## 並べ替えの順番
並べ替えの順番には「上から順」と「下から順」があります
orderByの第二引数にascをいれるかdescを入れるかで変えることができ

並べ替えの対象が"文字列"ならA-Zで「上から下から」
並べ替えの対象が"数値"なら「大きい順小さい順」

という風になっています

## ドキュメントへの追加順で並べ替える
ここまでで並べ替え方自体は分かりましたが、並べ替えるのにはその指標が必要です

ドキュメントへの追加順では、そもそもドキュメントを作成する際に指標をフィールドに追加しておかなければなりません

なので、ドキュメントを追加する際に「serverTimestamp()」という関数を使って値を格納しておきます
```js
    addDoc(collection(db, "lists"), {
      example1: example1,
      example2: example2,
      example3: example3,
      example4: example4,
      createdAt: serverTimestamp(), //ここで追加した時間を記録しておく！
    });
```
このようにしておいたのちに、実際にqueryにおいて…
```js
const exampleRef = collection(db, "exampleCollection");
const q = query(listsRef, orderBy("createdAt", "desc"));
```
こうすれば「追加した順」でリクエストするqを手に入れられます！
## まとめ
今回はFirebaseにおいての並べ替えについてまとめました

基本的な並べ替えを知るにあたって分かりやすいと思ってもらえてれば幸いです

もし何かアドバイスやご指摘がありましたらお気軽にコメントお願いします！
駆け出しのエンジニアキャリアを成功させたいならアウトプットしよう

# はじめに

皆さんは、アウトプットしていますか？
私はエンジニアになって3年間社内の誰よりもアウトプットをしています

現在Qiitaでは350以上の記事を上げていますし、Zennでは30本の記事を上げています。

https://qiita.com/Sicut_study

アウトプットをし続けて最近キャリア戦略として新卒のときからアウトプットをし続けて良かったなと思うことが多かったので、これからエンジニアとして仕事をするかたに向けて記事にしたいと思います。

私は今から話すことを実践すれば新卒エンジニアであれば、これからのキャリアうまく行くと思っています。継続して続けていくのが大変だと思います。

しかし、絶対にこの積み重ねは評価されてキャリアに大きく影響しますので、騙されたと思って今日から続けて貰えればと思います。

# アウトプットで変わった人生

私がアウトプットを始めたのはあるときに前職で尊敬していたメンターから言われた言葉でした

「転職は絶対エンジニアならするから今から転職サービスに登録して市場価値を可視化しといたほうがいいよ」

と言われて**LAPRAS**に登録し始めたのがきっかけでした

https://lapras.com/

このサービスは`Github`や`Qiita`などのアウトプットからエンジニアとしての技術力を可視化してくれます。

そのコンセプトが面白く、数字をどんどん増やしていきたいなと思うようになって、アウトプットをはじめました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/7ca8b42e-c35c-0c4c-4501-2ba2cba6c14e.png)

また、新卒で入社して「技術のことを周りの誰も教えてくれない」という状況がありとても苦労した経験から駆け出しエンジニアが私のようなつらい思いをしないように、**どんな小さなエラーもアウトプットする**を徹底していました

https://qiita.com/Sicut_study/items/2af125d08d7bf998898a

その2つが相まって**アウトプットする**ということは私の習慣となっていました

それから3年が経過して転職をしようと思いたち**転職ドラフト**に登録します。

https://qiita.com/Sicut_study/items/fc521bcb7a4634a019d3

そこで**アウトプットが人生を大きく変えます**

アウトプットをしていたことが評価されて、多くの指名を受けました
また、その一つであった**ユーザベース**に入社することになりました

これが1つの大きな成功体験だったと個人的には思います。

そして、転職をしたあと初めての**評価**を受けました
そこでも`アウトプット`が一番評価されて、給料も上がりました

アウトプットは継続して行うのが難しいので**評価されやすい**と実感しました
アウトプットがまさに人生を変えたと思っています

# アウトプットのモチベーション

アウトプットのモチベーションは以下の記事で詳しく話しています

https://qiita.com/Sicut_study/items/2af125d08d7bf998898a

大きく2つあります

1つに「**自分と同じことでつまづく誰かのために記事を残す**」
2つに「**転職など未来の自分のためになる**」

この2つを常に意識すればモチベーション維持にも繋がります
また1つ1つは実際大した記事を書いていません。雑にでも書いて記事にする
質(いいね数)も大事ですが、個人的には**量**も評価されると思っています

量を残すことでマニアックな内容、珍しいエラーでもきっと誰かの役に立つはずです

# 継続的なアウトプットのやり方

継続的なアウトプットをするには「**雑にでもいいから躓いて解決したエラーを記事に残す**」ことだと思っています

普段の私からすると今みなさんが読んでいるこの記事はかなり時間をかけています。
他の記事を見ていただくとわかりますが、普段は雑に記事を投稿しています

エラーを解決した系の記事であれば、問題と解決方法だけあれば記事として成り立ちます。なので、まずはそこから初めて見るのがおすすめです

**きっとあなたの将来の資産になります**

# これからの話

これからは「**気づきを与える記事**」を意識して書きたいなと考えています
まさにこの記事もその一環です

気づきを与える記事はエンジニアとしての経験も必要ですし、記事を書こうと思ってかけるものではなく、ふとした時に書く内容が浮かぶものだと思います

人の心を動かせるような記事がかけるかはわかりませんが、ちょうせんしていきたいとおもっています

# 他のアウトプットに関する記事

以下が私が以前にアウトプットの重要性をお話した記事になるので合わせて読んでみてください

https://qiita.com/Sicut_study/items/2af125d08d7bf998898a

# おわりに

よく周りの方からなぜアウトプットできるのか、モチベーションはなんなのかとき聞かれます。そこでモチベーションにしていたことが実際に役立つことが証明できたので今回は記事にしてみることにしました

記事にすることで自分のためにもなりますが、もちろん多くの方の*ためになったり*、*気づきを与えたり*します。

時間はかかってしまいますし、継続は大変ですがそれに見合ったメリットはあります。
ぜひとも今日から意識してアウトプットしてみてください

# 参考

https://lapras.com/
AWSのRHELのmanコマンドを日本語化する

以下のページにアクセスする。
https://linuxjm.osdn.jp/download.html

全体のアーカイブから最新のアーカイブファイルへのリンクを右クリックし、リンクのコピーをする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3502854/6ec27aec-c614-4488-ea63-adfcac59a27c.png)

以降はAWSのRHELにSSH接続後のコマンドライン上での操作。

rootにスイッチする。
~~~shell
sudo su -
~~~

curlコマンドで先ほどコピーしたリンク先からアーカイブファイルを取得。（例はコピーしたリンク先が右記だった場合の例：https://linuxjm.osdn.jp/man-pages-ja-20230715.tar.gz）
~~~shell
curl -O https://linuxjm.osdn.jp/man-pages-ja-20230715.tar.gz
~~~

tarコマンドでアーカイブファイルを展開。
~~~shell
tar xzf man-pages-ja-20230715.tar.gz
~~~

cdコマンドで展開したディレクトリへカレントディレクトリを移動。
~~~shell
cd man-pages-ja-20230715
~~~

以下のコマンドでインストール方法を参照し、記載されている手順に従ってインストールする。
~~~shell
less INSTALL
~~~

以上

参考サイト 感謝mm
[【man】Linuxコマンド_オンラインマニュアルを表示・日本語化](https://engineers-life.com/linux_command/basic_operation_linux/linux_man/)
給与明細WEBアプリ開発アプリ編

挨拶:このWEBアプリの開発は私がエンジンニアになって初めて携わった開発です。
以前はインフラ編を紹介しました。今回はアプリケーション本体を紹介します。
まだまだ勉強不足なところがありますので気になったところがあればお気軽にご指摘頂けたら幸いです。

作成経緯:会社の友人に頼まれて開発したアプリケーションです。
初めてアプリケーションを開発するため最初はflaskとjinja2で画面だけ作成しました。
しかし本番ではよくバックエンドとフロントエンドを分けて開発、運用することが多いと聞き
私も自分のアプリケーションをフロントエンドとバックエンドを分けました。
こっちのほうがセキュリティ面も改善できると思います。

構成:
フロントエンド:Vue.js+nginx
バックエンド:Flask+Gunicron+nginx
データペース:MySQL

このようにそれぞれのサーバーの間はjsonを使って通信しています。
```
from flask import jsonify
```

例えばこのようにフロント側からバック側にjsonデータを送信します。
```
const response = await this.$axios.post(get,delete)('http://localhost:8000/api/path
```
処理したデータを逆に今度バック側がこのようにjsonを使ってフロント側に送信します。

```
return jsonify(employee_pay_slips=employee_pay_slips, months=months, email=email)
```

実装した機能は
1.ログイン、ログアウト
これを実現するためにはFlaskのライブラリFlask-JWTを使用しています。

```
from flask_jwt_extended import JWTManager, create_access_token, jwt_required, get_jwt_identity
```
Flask-JWTを使用することにより認証トークンが作成され、こちらの認証トークンを使って
ユーザーの認証を行います。

2.csvファイルのデータをデータペースに保存
こちらを実現するにはFlaskのライブラリpandasを使用しています。

```
import pandas as pd
```

3.ステートレスの観点からファイルの保存はローカルではなくs3に保存しています。
こちらを実現するにはFlaskのライブラリboto3を使用しています。

```
import boto3

 client = boto3.client(
         's3',
         aws_access_key_id = os.getenv("AWS_ACCESS_KEY_ID"),
         aws_secret_access_key = os.getenv("AWS_SECRET_ACCESS_KEY"),
         region_name = os.getenv("AWS_DEFAULT_REGION"),
 )
key = 'test/test.csv'
bucket_name = 'bucket_name'
client.upload_file(filepath, bucket_name, key)

file_url = f's3://{ bucket_name }/{ key }'
df = pd.read_csv(file_url)
```

4.データペースの一連の操作はSQLAlchemyを使用しています。

```
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import create_engine, text
```
5.api通信を行うためにflask-corsを使用しています。

```
from flask_cors import CORS, cross_origin
```
例えばcross_originを使用して指定のドメインにapiを送信するなど使用しています。

6.そのたの機能
パスワードの暗号化、トークンの使用期限設定、環境変数の使用など
```
from werkzeug.security import generate_password_hash, check_password_hash
from datetime import timedelta
from dotenv import load_dotenv
import os
```

ページは7つのページを作成しました。
```
│   App.vue
│   main.js
│   router.js
└───components
        AdminLogin.vue
        MasterPage.vue
        MyPage.vue
        ReplacePass.vue
        TopPage.vue
        UserLogin.vue
        UserSignup.vue
```
このように以下のページがあります。

・トップ画面
・一般ユーザログイン画面
・一般ユーザ画面、
・マスターログイン画面、
・マスターページ画面、
・パスワード更新画面、
・csvファイルをアップする画面

一般ユーザーとマスターユーザーを完全に切り分けてます。

総括:このアプリケーションの作成は勉強の時間を入れてトータルで4か月かかりました。
いろいろ修正もありましたが作って楽しかったです。実際の現場はもっと複雑なものを
作っていると思いますがこれからもたくさん勉強していち早く一人前のエンジンニアになりたいです。
これからも自分が勉強したことをシェアしていきたいと思います。
初節句の雛人形いつからでもご用意できるの

初節句の雛人形いつからでもご用意できる

初節句は日本の伝統的な行事であり、特に女の子の成長を祝う重要なイベントです。初節句を迎える家族は、雛人形を飾るのが一般的ですが、その準備期間について知っておくべきことは重要です。

一般的な初節句は、赤ちゃんが生後1年を迎える頃に行われます。 このため、雛人形を用意するのはおよそ赤ちゃんが生まれてから11ヶ月目から12ヶ月目にかけてとなります。によっては、誕生日から１年後の特定の日に初節句を行う習慣もありますので、家族の伝統や地域の慣習に合わせて計画する大切です。

雛人形は、古いからの風習に基づいた格式高いものから、現代​​風の恋愛ものまで様々なデザインがあります。伝統的な雛人形は、天皇や皇后、従者などを模したもので、多くの段に飾られています。これらの本格的な雛人形を用意する場合は、早めの段階で購入手続きを進めることが必要です。 特に、手作りのものや希少なアンティークの雛人形を希望する場合は、入手が正義的なこともあるため注意が必要です。

一方、最近ではスペースの都合や手間を省くため、コンパクトなサイズの雛人形セットも人気があります。できます。

初節句の雛人形は、家族の願いや祈りを込めて飾られる大切な存在です。そのため、用意には時間をかけて、家族で選び、飾る楽しみを共有することが大切です。 、より理想的な雛人形を手に入れることができるでしょう。

初節句を迎える家族は、伝統的な行事日本文化を体験し、家族の絆を深めることができます。 大切な赤ちゃんの成長を祝福する初節句の準備は、家族にとっての特別な思い出となることでしょう。
AWSシステム構成図を作成するときに参考になった記事まとめ

## はじめに
この記事では、AWSシステム構成図を作成するときに参考になった記事を紹介します。

## 学びの要点
**省略するな**

## 参考になった記事


(1)「AWSのアーキテクチャ図を描きたい! でもどうすれば良いの ?」
AWS公式ブログです。
公式が「図を書くことに正解はない、心理的なハードルを下げていい」と言ってくれるのは安心できます。

https://aws.amazon.com/jp/builders-flash/202204/way-to-draw-architecture/?awsf.filter-name=*all

<br>

(2)「AWSのアーキテクチャ図を描くときに意識していること」
一番参考になりました。「省略しない」重要性がわかります。

https://zenn.dev/k_i/articles/6d76e43aa3bd84

<br>

(3)「draw.ioでAWSのインフラ構成図を書く」
draw.ioで実際に作成するときに参考になりました。

https://qiita.com/nave-m/items/68425f476b254a1a47b0


<br>

(4)「AWS構成図おすすめツール」
VSCodeで作成するときに参考になりました。

https://qiita.com/nisj/items/948f05f93dce4628fda5
Bootstrap｜ハンバーガーメニューを作成する

Bootstrapを用いて、ハンバーガーメニューを作成する方法

## 1. メニューを作成

⭐️div要素に classと idを追加する
　collapse, navbar-collapse ... ハンバーガーメニューで開く要素
　任意のid...ハンバーガーメニューで開く要素には任意のidを命名する

```
<nav>
    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul class="navbar-nav">
        <li>menu1<li>
        <li>menu2<li>>
        <li>menu3<li>>
        <li>menu4<li>
      </ul>
    </div>
</nav>
```

## 2.ハンバーガーメニュー部分を作成

⭐️解説
　button ... ハンバーガーメニューは button要素

　navbar-toggler ... ハンバーガーメニュー用のスタイル
　data-toggle="collapse" ... data-target の表示・非表示を切り替える
　data-target="#navbarDropdown" ... 
　idが navbarDropdown の要素が表示切り替えの対象になる
　aria-controls="navbarDropdown" ... アクセシビリティ対応のための属性
　aria-expanded="false" ... アクセシビリティ対応のための属性
　aria-label="Toggle navigation ... アクセシビリティ対応のための属性
　
　span, class="navbar-toggler-icon" ... ハンバーガーメニューのアイコン

```
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
</button>
```

## 3.ハンバーガーメニュー部分を、元のメニュー部分の上に設置

⭐️全てを nav要素で囲むこと

```

<nav> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul class="navbar-nav">
        <li>menu1<li>
        <li>menu2<li>>
        <li>menu3<li>>
        <li>menu4<li>
      </ul>
    </div>
</nav>

```
Service Cloud 学習メモ　ハンズオン①

# オペレーションの品質・⽣産性向上

# 【設定関連】
## １．マイドメイン
　　FY23時点、デフォルトで有効化ずみ

## ２．チャット有効化
　　機能設定＞サービス＞チャットの設定
　　✅チャットを有効化

## ３．オムニチャネル設定
　　機能設定＞サービス＞オムニチャネル＞オムニチャネル設定
　　✅オムニチャネルの有効化
　　✅オムニチャネルを含むコンソールの読み込み時にログイン確認を表示

## ４．ユーザー設定
　　ホーム＞管理＞ユーザ＞ユーザ
　　✅ナレッジユーザ
　　✅フローユーザ
　　✅チャットユーザ
　　✅Service Cloudユーザ　（デフォルトOn）

## ５．組織のアドレス
　　ホーム＞管理＞メール＞組織のアドレス
　　表示名：「組織のアドレス」
　　メールアドレス：受信可能なアドレスを入力
　　※：設定したメールアドレスに検証メールが届きのでリンククリックして検証する。

# 【Lightningナレッジ】

## １．ナレッジ有効化
　　ホーム＞機能設定＞サービス＞ナレッジの設定
　　✅はい、Salesforceナレッジ有効化の影響を理解しています。
　　「Salesforceナレッジを有効化」をクリック

　　✅Lightning Knowledgeを有効化
　　✅記事を編集時のリッチテキストエディタの自動読み込みを有効化

### 【Knowledge One】：
　　✅ケースの関連記事を推奨

### 【言語設定】：
　　知識ベースのデフォルト言語：日本語

### 【ナレッジの統計設定】
　　✅記事のプラス投票とマイナス投票を有効化（Classicのみ）

## ２．トピックの有効化

　　ビルド＞カスタマイズ＞トピック＞オブジェクトのトピック
　　Knowledgeオブジェクトを選択し、✅トピックを有効化

### 【オブジェクトの設定】：
　　Object Manager＞Knowledge　名称変更「ナレッジ」

　　質問(Q)に対する回答(A)に相当する項⽬がないので追加する。
　　項目名：内容（Content）
　　データ型：テキストエリア（リッチ）

### 【ページレイアウト】
　　情報セクション：タイトル、概要、URL名、内容
　　公開先セクション：
　　　　内部アプリケーションに公開
　　　　パートナーに公開
　　　　顧客に表示
　　　　知識ベースに公開
　　関連リスト：
　　　　昇格済み検索語、ファイル、ケース、承認履歴

　　Salesforceモバイル および Lightning Experience アクション：
　　　　●ドラフトとして編集：公開ナレッジをドラフトにする
　　　　●編集 ：ドラフトナレッジを編集
　　　　●公開 ：ドラフトナレッジを公開
　　　　●投稿 ：Chatterへ投稿する
　　　　●アーカイブ ：公開ナレッジをアーカイブにする
　　　　●ドラフトを削除 ：ドラフトナレッジを削除する
　　　　●記事を削除 ：アーカイブナレッジを削除する

### 【データカテゴリの設定】
　　機能設定＞サービス＞データカテゴリ＞データカテゴリの設定
　　※：英語で作成すること
　　※：カテゴリグループ項目のカギマーククリックして有効なカテゴリグループへ移動

### 【フィード追跡】
　　機能設定＞Chatter＞フィード追跡
　　✅Knowledgeのフィード追跡の有効化、保存

### 【ビューの調整】
　　ナレッジの有効化時に、日本語を選択した場合、
　　各ビューをフィールター条件を「言語：日本語」に変更

# 【Lightningコンソール】

　　ホーム＞アプリケーション＞アプリケーションマネージャー
　　「Service Console」を調整

## ■ユーティリティ項目を追加：Open CTIソフトフォン、マクロなど

## ■ナビゲーション項目を追加：
　　　●オムニスーパーバイザー ：SV向け機能、オムニチャネルの状況が把握できます
　　　●チャットのトランスクリプト ：チャットの履歴レコードです
　　　●ファイル ：Salesforceでファイルを共有できます
　　　●クイックテキスト ：定型⽂を利⽤できます
　　　●マクロ : 定型作業を⼀括実⾏できます

## ■ナビゲーションルール：
　　オブジェクトごとにごとに「ワークスペースタブ(主タブ)」とするか「次のサブタブ」にするかを選択可能

　　例：ケースは主タブ、取引先責任者はサブタブ　など

# 【メール-to-ケース】
　　機能設定 ▶︎サービス ▶︎メール-to-ケース
　　✅メール-to-ケースの有効化
　　✅HTMLメールの有効化
　　✅ケースソースをメールに設定

　　オンデマンドサービス：
　　✅オンデマンドサービスの有効化

## ■ルーティングアドレス
　　※：管理者アドレスは使えない。

## ■ケースページレイアウト
　　メールアクションを配置、同じボタンが複数あるので要注意。
　　配置されたアクションは「フィード」タブに配置される。
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159211/ab0c485e-378d-a41e-73ad-0e015e289dec.png)

　　ケースオブジェクトのメールアクションの新規定義済み項目追加
　　項目名：送信者、
　　特定値：メール-to-ケースで作成したアドレス

　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159211/1d164e81-858a-b279-f4f6-256383103067.png)


　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159211/1629d715-9f66-3228-6a4d-2a77959a90fb.png)

　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159211/e17cf027-104e-3cdd-9268-876f9776c76e.png)

　　
# 【マクロ】

## ■マクロビルダー

新規マクロ　⇒　命令編集　
⇒　命令追加　⇒　「メールアクション」　⇒　メールテンプレートを挿入
⇒　「送信」ボタンをクリック、

⇒　命令追加　⇒　「ケースの詳細」選択　⇒　「状況」を選択し、Closedを選択　
⇒　「保存」ボタンをクリック

## ■動作確認：
ケースを開き、ユーティリティバーでマクロ開き、マクロ選択、マクロ実行


# 【Lightning フロー】

画面にフローを配置して機能を強化
PL/pgSQLのリターンコードの制御方法

PL/pgSQLのリターンコードは、PL/SQLとは違い任意に設定することはできません。
この問題に対する対処方法を説明します。

# １．結論

Excceptionの場合にリターンコード3が設定されるように設定し、処理結果NGの場合にExcception発生させます。

# ２．環境

・OS：Windows10
・コンソール：コマンドプロンプト
・DB：PostgreSQL 14.7

# ３．実行例

## SQLファイル

~~~exception01.sql
SET CLIENT_ENCODING TO 'UTF8';
\set ON_ERROR_STOP ON

DO $$
declare
  resultFlag boolean;
begin

  RAISE NOTICE '処理結果NGの場合.';
  resultFlag = FALSE;

  if resultFlag then
    RAISE NOTICE '正常終了。';
  else
    RAISE EXCEPTION '異常終了。';
  end if;

end;
$$ language plpgsql;
~~~

【１】\set ON_ERROR_STOP ON
　　エラー発生時に処理を中断するための設定。
　　ONにするとException時にリターンコード3になる

【２】RAISE EXCEPTION '異常終了。';
　　任意にExceptionを発生させる。


## コマンド

    (psql -U postgres -f exception01.sql 2>&1) > foo.log
    echo %errorlevel%

## 実行結果（コンソール）
リターンコード3が出力されます（Exceptionが発生しない場合はリターンコードは0になります）。

    3

## 実行結果（出力ファイル「foo.log」）

    SET
    psql:exception01.sql:19: NOTICE:  処理結果NGの場合.
    psql:exception01.sql:19: ERROR:  異常終了。
    CONTEXT:  PL/pgSQL関数inline_code_blockの12行目 - RAISE

# ４．補足

「[こちらの記事](https://qiita.com/will01/items/c78df64e95333cb64b62)」の方法を使用すると、パイプ先のコマンドの結果がリターンコードの参照先になり、PL/pgSQLのリターンコードが参照できません。ご注意ください。
wslでelixir その24

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
nxやってみた。
練習問題、やってみた。
構想編。

# 練習問題
nxだけで、xorを学習して推定せよ。

# 方針
- Nx.Defn使う

- テンソーを組み合わせる

インプット x　2
ウェイト w1　2，8
バイアス b1　8
ウェイト w2　8，1
バイアス b2　1
アウトプット y 1

Nx.Random.normalで初期化する。

- ネットワークにして、活性化関数sigmoidを使う。
インプット
		|> Nx.dot(w1)
		|> Nx.add(b1)
		|> Nx.sigmoid()
		|> Nx.dot(w2)
		|> Nx.add(b2)
		|> Nx.sigmoid()

- ロスの計算　二乗誤差
		(y - preds)
		|> Nx.power(2)
		|> Nx.mean()

- 学習は、optimaizer無いので、次のようにgrad使う
		{grad_w1, grad_b1, grad_w2, grad_b2} = grad(params, &loss(&1, x, y))
		{w1 - grad_w1 * 0.09, b1 - grad_b1 * 0.09, w2 - grad_w2 * 0.09, b2 - grad_b2 * 0.09}

sgdぽい。

- 関数間でテンソーを使い廻す。

{w1, b1, w2, b2} = params

以上。
PDF・HTML出力機能を備えたマークダウンエディタ「McGwire-Markdown」紹介します

# McGwire Markdownを紹介します

この度、私がこれまでプライベートで開発し、使用してきたElectron製デスクトップアプリケーションのマークダウンエディタ、「**McGwire Markdown**」を公開しました。

![McGwire-Applicatoin-ja](https://github.com/itsuki-maru/McGwire-Markdown/assets/95027756/c42c2dbf-9753-4b92-bd75-979eafd5e0a6)

https://github.com/itsuki-maru/McGwire-Markdown

よく使うスキルセットは**Rustのaxumをバックエンドに、Vue3+TypeScriptをフロントエンドに使ったSPA開発**です。この組み合わせを使って、社内Wikiの開発などを行ってきました。

私自身は、あまりアウトプットを積極的に行ってきたタイプではないのですが、**チャレンジの一環**として、開発したマークダウンエディタ、「**McGwire Markdown**」を公開しました。

リポジトリは[こちら](https://github.com/itsuki-maru/McGwire-Markdown)です。

https://github.com/itsuki-maru/McGwire-Markdown

インストーラは[こちら](https://github.com/itsuki-maru/McGwire-Markdown/releases)です。

https://github.com/itsuki-maru/McGwire-Markdown/releases


## McGwire Markdownとは

McGwire Markdown（マグワイヤ・マークダウン）はマークダウン初学者が**記述方法を学びながら使用できることを目標に作成したエディター**です。そのため、**企業や学校などの様々な環境でも役立つツール**となり得ます。

もともとは、はるか昔、古の時代、個人的なWeb技術学習の一環として作成したもの発端でした。しかし、非技術系の職員「**マークダウンなど知らぬ**」という人にも使ってもらえるように機能拡張を繰り広げてきたきたものです。

**マークダウンの記述ガイド**
![qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2457409/6aff60a7-1140-51da-fc20-46a1752de8fb.png)

## 主要機能

- **リアルタイムプレビュー機能**
- **PDFとHTML出力機能**
- **印刷機能**
- **ヘルプ**
- **ガイド**
- **日本語と英語対応**

### 主要機能の技術選定

| 言語・機能・技術など | 使用ライブラリなど |
| --------- | ----------------- |
| 言語 | HTML、JavaScript、HTML |
| デスクトップアプリフレームワーク | Electron |
| エディタ部分 | Ace builds |
| マークダウンパーサー | Marked |
| ガイド | shepherd.js |
| PDF出力 | Chromiumの印刷API |

### ダウンロードとインストール

```shell
git clone https://github.com/itsuki-maru/McGwire-Markdown.git
cd McGwire-Markdown
npm install
electron .
```

## 公開直前

今回、公開するにあたり「**あ、アイコンないな**」、、、ということに気付き、**アプリケーションのアイコンはChatGPTに依頼して作成してもらいました**。

### 結論

一からアイコンを作成した（もしくは誰かに作成依頼する）場合、**アプリケーションの作成から公開までに相当時間を取られたでしょう**。

**プロンプト**

> 私はSVG形式の画像を作成したいと考えています。あなたは優秀なWebデザイナー兼フロントエンドエンジニアという立場で、私の指示に従い作成をサポートしてください。
>
> これからSVGを使って簡単なSVGアートを作成します。
>
> 1.ペンギンのイラストをデザインする
> 2.デザインしたイラストをブラウザ上に表示可能なSVGコードを生成する
>
> これらをひとステップずつ実行してください。

**ChatGPTによるSVG生成**
![qiita-chatgpt_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2457409/25321b3b-bf1e-b2b6-563d-19be3b424e3b.png)
**Code InterpreterでPNG形式に変換**
![qiita-chatgpt_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2457409/87e2b4f4-9dae-8ea3-5388-87b2b1739615.png)
**リサイズ**
![qiita-chatgpt_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2457409/946256cb-cb8a-a1aa-8e2c-95a3da8f87c6.png)
**完成**
![logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2457409/1093c293-6fa9-e921-9db0-56c3b0e66e2f.png)

ここまで読んでいただき、ありがとうございました。

皆さまのフィードバックやプルリクエストをお待ちしております。

リポジトリは[こちら](https://github.com/itsuki-maru/McGwire-Markdown)です。

インストーラは[こちら](https://github.com/itsuki-maru/McGwire-Markdown/releases)です。
bit全探索まとめ

# bit全探索まとめ
## この記事は何
今回の記事では復習兼見返す用にbit全探索をまとめていきます。実装言語はpythonとなっています。なにか気づきや指摘等ございましたらコメントください！
## bit全探索とは
bit全探索ってなんでしょう。この項では主に三つの観点からまとめていければと思います。
1. 使用場面
2. 実装方法
3. 他のアルゴリズムとの比較
### 1.使用場面
結論から述べると以下の条件を満たす際bit全探索の恩恵が得られると思います。
* 「N個の要素からなる集合の部分集合全体を判定する問題」
* 「大体$N\le{20}$の範囲」

例をあげると『使う・使わないを全探索』『選ぶ・選ばないを全探索』する問題などがあげられます。
### 2.実装方法
大きく分けるとbit全探索の実装は二つのステップからなります。
1. **全ての部分集合を列挙する。（pythonでは二つの列挙方法があります。）**
    itertoolsのproductを用いてタプルで列挙する場合
    ```python
    from itertools import product
    for pro in product((0, 1), repeat=N):
    ```
    range()を用いて整数で列挙する場合
    ```python
    for bit in range(1 << N ):
    ```
2. **その部分集合が条件を満たしているか判定する。**
    itertoolsのproductを用いてタプルで列挙する場合
    ```python
    def judge(pro):
    S = __ # その集合の状態を表現する。
    for i in range(N):
        if pro[i]: 
            # フラグがたっていればその要素が含まれていることを集合の状態に反映する。

    if S == W:  #　その集合の状態が条件をみたすなら１を返す。
        return 1
    else:
        return 0
    ```
    range()を用いて整数で列挙する場合
    ```python
    def judge(bit):
    S = 0
    for i in range(N):
        if bit & (1 << i):  #整数bitを2進法とみなしたときの、下からi桁目が1か判定

    if S == W:  # S == W なら +1
        return 1
    else:
        return 0
    ```
    


### 3.他のアルゴリズムとの比較
のちに記載します。

## この記事は以下を参考に執筆しています。
* [こわくないbit全探索2 基本編1: 簡単な例題でbit全探索をやってみよう！【競プロ解説】](https://qiita.com/u2dayo/items/8c1601a61841540b4947#%E3%81%8A%E3%81%BE%E3%81%91%E9%83%A8%E5%88%86%E5%92%8C%E5%95%8F%E9%A1%8C%E3%81%AF%E5%8B%95%E7%9A%84%E8%A8%88%E7%94%BB%E6%B3%95%E3%81%A7%E3%82%82%E8%A7%A3%E3%81%91%E3%82%8B)
* [けんちょんの競プロ精進記録 ](https://drken1215.hatenablog.com/entry/2019/12/14/171657)
DNSの「浸透いうな」問題（コントロール不可能というニュアンスが嫌われてるという話）

# はじめに

- ネットワーク詳しくないので、自分なりに調べてみた記事。
- 大きく２点を整理したもの。
    - 「浸透いうな」となぜ言われているのか？
    - 直近で発生したやつはなんでこんな感じになってるのか？

# 浸透いうな

もうここらへんを見るのが早いっぽいので、細かいところは以下を見てもらうのが良さそう。

http://www.e-ontap.com/dns/propagation/

https://qiita.com/getty104/items/b9c18c4d86f6a1274d18

https://jprs.jp/tech/material/iw2011-lunch-L1-01.pdf

まだ理解が足りてないけどばっくりと理解したところだと。

- 「DNSに変更を加えた際、実際に応答がいつ切り替わるかが **コントロール不可能** であり、単に待つしか無い」という **誤解** を元に「浸透」と表現されることがある。
- しかし、基本的には正しく設定変更を行えば基本的には **コントロール可能** なものであるため、「浸透」という表現が嫌われている。
- 詳しい人からすると、DNSの応答が切り替わるのが時間がかかるとしても、それは調べれば時間が把握できるものという認識がある。よって「浸透」という表現は知識の無い相手を煙に巻くように使っていると捉えられやすく、正確な説明が求められる場面で使ってしまうと、容易に炎上しうる表現。

# 直近の発生
直近、ちょっとだけですが X(旧twitter) のTLが盛り上がってたので、みんながどう見てるのか整理してみた。
※ツイート埋め込むと炎上を助長しかねないので、直接のツイートは埋め込みません。（炎上を助長したいわけじゃないので）
※事実だとしても炎上を助長しそうな反応は取り上げていません。
※また検索避けのため、反応の文言も少し変えてます。

**そもそも浸透しらない系の反応**

>- 「浸透」ってダメな言葉なの？

自分もこの感覚に近かった。ネットワークあんまり触れてないので、「浸透」って言葉が嫌われているのは知ってるけど、こんなに叩くもんなのか・・・？と思ってた。
（調べた結果、まぁ間違ってる用語だなぁ・・・とは感じたので使わないほうが良い言葉だと理解した）

**反映時間について触れてる反応**

>- 変なDNSキャッシュサーバもあるっちゃある。
>- 手順ミスで応答が切り替わる時間が不明となってしまって待つしかない状態ってこと？
>- TTLって1200秒がデフォルトじゃなかったっけ？そんな時間かかるもんなの？設定ミス？

「浸透」という表現が誤りであることを知っている人が具体的な反映時間を気にしてくれている系の反応。
最終的には「～時ごろに切り替わる見込みです」という応答を返していたので、社内でちゃんと確認して回答できたっぽい。

**窓口の人への教育/情報の引き継ぎが足りてない説**

- （技術屋ではない）窓口の人が間違った表現つかっちゃったケースなのでは？社内での教育や情報引き継ぎがうまくいってないのかな？

このケースが一番それっぽいなぁと思った。
窓口の人が聞きかじった知識で「浸透」という言葉で説明したことがあって、それが変にうまく通っちゃって、それを成功体験として記憶しちゃって使っちゃってるみたいな。
教育してないとかじゃなくて、たまにあるちょっとした外れケースかしら？（事実は知らないけど）

# 個人的なまとめ

- 「浸透」という表現は「DNSの応答切り替え時間が、実際はコントロール可能にも関わらず、コントロール不可能である、という誤解を招くような表現」である。
- 文脈的に「浸透」を使うときは、「DNS応答切り替えが遅いタイミングでの顧客説明」で使われることが多い。そのため技術者からすると、技術的な知識の無い相手を煙に巻こうとしているような表現に見えてしまうため、不誠実な対応として嫌われやすい。
- 炎上まで行くとちょっとどうかと思うけど、何かしらのキーワードが盛り上がって「これってどういう意味だろう？」って勉強の機会になるのはありがたいなって思いました。

自分自身聞きかじった知識で整理しただけなので、この記事も嘘混じってる可能性あるので、間違いあれば教えてほしいです！

# まだ残ってる疑問

まだ理解できてないので後で詳しい人に聞いてみること。

- プロパゲーションとは？（途中で見かけたけど置いてきたキーワード）
- 本当にコントロール可能なのか？（管轄外のサーバーが間にあって、コントロールできないとかあったりしないのか？）
- 応答が切り替わるタイミングは厳密に調べれるのか？（目処感くらいはわかりそうだろうと思ってるけど、厳密に何時何分！みたいなところまでわかるのか？）


以上です。
Rails | deviseのUserにnameを追加する方法

Ruby on Rails の Gemである deviseを利用し、
Userモデルに nameカラムを追加する方法。

# deviseのインストール

1️⃣ Gemfileに gem 'devise' を追記
2️⃣ bundle install コマンドを実行
3️⃣ rails g devise:install　コマンドを実行

# deviseの Userに nameを追加

1️⃣ rails g devise User コマンドを実行
2️⃣ deviseのコントローラー自体は編集することができない。
　 そのため、application_controller.rbを以下のように記載

```php:app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller? 


  protected

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
    end

end


```
## コード解説

✴️ before_action
　アクションを実行する前に行う処理

✴️ if: :devise_controller? 
　if: は、before_action 等の節で ifが必要な場合の書き方
　:devise_controller?　は、devise Gemによって提供されているメソッド

✴️ protected
　private以下はクラス内からしかアクセスできない。
　レシーバを指定して呼び出すことができない。
　protected以下はクラス内とサブクラス内からアクセスできる。
　レシーバを指定して呼び出すことができる。

✴️ devise_parameter_sanitizer.permit
　deviseが提供するメソッド。このメソッドを使って、devise のビューからコントローラーへ送信されるパラメーターをフィルタリングする。

✴️ :sign_up 
　deviseのアクション名

✴️ keys: [:name]
　キー：[:新たに許可するキー]


## 参考記事
https://qiita.com/nagao-koyanagi/items/0607cbbb3af812c60141
https://qiita.com/kaito121855/items/e1a80da8557258c497dc
オープンソースVircadiaを構成するプログラム

今回からVircadiaのプログラムや構成について紹介します。

## 各種サービス

Vircadiaは、大別すると3つのサービス群から構成されています。


* インターフェース（Interface）：利用者がVircadiaの仮想空間で活動するための各種ツールが含まれます。

* ドメインサーバー（Domain Server）：仮想空間の領域内のコンテンツや環境全般を管理および制御します。

* メタバースサービス（Metaverse Services）：すべてのドメイン（サーバー）を制御するサービスです。

※ https://docs.vircadia.dev/　から引用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3300143/98dd7621-42c4-bb6e-b2e5-73b1ec75fa20.png)

## 各種サービスとソースコード
上記の構成図の含まれる各サービスを制御するプログラムの紹介です。
これらのプログラムは、全てのソースコードがGithub上で公開されています。

### Vircadiaメイン
* Vircadiaメインのプログラム
ドメインサーバー内の各サービスのモジュール、Interface、ice-serverが含まれます。

https://github.com/vircadia/vircadia.git


### その他のモジュール
各機能のフロントエンドを提供しています。
* vircadia-metaverse

https://github.com/vircadia/vircadia-metaverse

* metaverseの利用者全般の管理画面

https://github.com/vircadia/metaverse-dashboard


## 次回は
次回は、ローカル環境でVircadiaを構築するためのビルド手順や起動方法について紹介します。
【Rails / 備忘録】Turbolinksとはざっくりと何ですか？注意すべき点は？

# 前提条件
この記事は、Rails６までの内容で以下のようにデフォルトで`Turbolinks`がGemfileに含まれていることを想定しています。
```:Gemfile（Rails6）
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
```

Rails7では、`Turbolinks`に代わりデフォルトで`turbo-rails`というgemが用意されており、以下の記事内容は当てはまらないと思われますのでご注意ください。
```:Gemfile（Rails7）
# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"
```

# はじめに

最近、Railsでチャットアプリを開発しているのですが、開発中にエラーが出て原因を調べていたら、どうやら`Turbolinks`というものがエラーに関わっていることが分かりましたので、`Turbolinks`についてまとめていきたいと思います:writing_hand:

![undraw_the_search_s0xf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117662/c62f643c-f7af-c9d1-0737-646ed95dd751.png)



# １. Turbolinksとは
Ruby on Railsフレームワークの一部として開発されたJavaScriptライブラリであり、利用しやすいようにGemとしてデフォルトで組み込まれています。そして、`Turbolinks`のおかげで画面遷移の高速化を実現することができます。

具体的に見ていきましょう:point_up:
通常、ユーザーが新しいページに遷移するとき、ブラウザはページ全体を再読み込みします。
つまり、HTML、CSS、JavaScriptなどのすべてのアセットをサーバーから再度ダウンロードするためページ遷移のたびに多くの時間とリソースを消費してしまいます。

そこで`Turbolinks`の登場です！
1. `Turbolinks`は、新しいページへのリンクをクリックすると、ブラウザにフルページの再読み込みを行わせずに、新しいページのHTMLをAjaxリクエストで取得します。
1. リクエストを受けたサーバーは、HTMLをレスポンスとして返します。
1. レスポンスとして返ってきたHTML要素にある、`body`タグの中身で現在のページの`body`タグの中身を置き換えます。`head`タグ内に含まれるJavaScriptやCSSが既に読み込まれているスクリプトやスタイルシートは再度読み込まれません。

こうすることで、ページ全体を再読み込みするのではなく、変更が必要な部分だけを更新するので画面遷移が高速になり、パフォーマンスを向上することができます。



# 2. Turbolinksを使用する際の注意点
一見、「`Turbolinks`めっちゃいいやつじゃん」と思うのですが、使用する際には注意が必要です。
`Turbolinks`はページ全体の再読み込みを行わないため、ページロード時に実行されるはずのJavaScriptが実行されない場合があります。そのため、JavaScriptを適切に動作させるためには、`Turbolinks`専用のイベントに合わせてコードを調整し、既存のJavaScriptを正常に動作させます。

```javascript:イベント書き方例
document.addEventListener("turbolinks:load", function() {
  // ここにページが読み込まれたときに実行するコードを書く
});

```


# 3. Turbolinksのライフサイクルイベント
`Turbolinks`専用のイベントの一例について以下に示します。

| イベント | 内容 |
| ------- | ------- |
| turbolinks:load   |  Turbolinksが新しいページを読み込み終わったときに発火します。これは最も頻繁に使用されるイベントで、新しいページが完全に読み込まれたときにコードを実行するために使用します。   |
| turbolinks:click | ユーザーがTurbolinksによって管理されるリンクをクリックしたときに発火します。 |
| turbolinks:before-cache | Turbolinksが現在のページをキャッシュに保存する前に発火します。 |
| turbolinks:before-visit |Turbolinksがページを訪問する直前に発火します。|
| turbolinks:request-start | Turbolinksが新しいページのHTMLをフェッチし始めたときに発火します。 |
| turbolinks:before-render | Turbolinksが新しい<body>要素をDOMに挿入する前に発火します。 |



# 4. おわりに

`Turbolinks`についてざっくりと理解できたので、次回はRails7よりTurbolinksの機能を`Turbo Drive`というもので実現しているらしいのでそちらについて調べたいと思います:seedling:

# 5. 参考文献

https://qiita.com/morrr/items/54f4be21032a45fd4fe9

https://qiita.com/zenfumi/items/a92c0385d361e04fb014

https://techtechmedia.com/turbolinks-rails/
deviseでログアウトできなかった件

躓いたところの備忘録として・・・:point_up:

Routing Error
No route matches [GET] "/users/sign_out"
というエラー

view側で

```application.html.erb
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: :logout %>
```

という記述をしており、method: :deleteも記述している！！

```route.rbに
 devise_scope :user do
    get '/users/sign_out' => 'devise/sessions#destroy'
  end
```

という記述もあるそうだが、ルーティングをいじりたくなかったので、

```config/initializers/devise.rbの
config.sign_out_via = :delete```
を:getに変更！！

変わらず、ルーティングエラーだったが、サーバーを再起動したところ、解決！！
気持ちいい！
UTF-8のPL/pgSQLのRAISEメッセージを文字化けなしで標準出力する方法

文字コード「UTF-8」のPL/pgSQLのRAISEメッセージは、コマンドプロンプトの文字コードをchcpで変更しても文字化けが直りません。
この問題に対する対処方法を説明します。

# １．結論

標準エラー出力をパイプを中継して標準出力します。

    psql -U postgres -f foo.sql 2>&1 | find "" /v

「2>&1」で標準エラー出力を標準出力に追加、それをパイプで渡した先で「find "" /v」を使用してそのまま標準出力します。
パイプの先は渡された文字列をそのまま標準出力できるコマンドであれば何でも大丈夫です。
（more等。echoだと標準出力ではなくON,OFF切り替えになるのでNG。）

# ２．環境

・OS：Windows10
・コンソール：コマンドプロンプト
・DB：PostgreSQL 14.7

# ３．実行例

## SQLファイル「foo.sql」

~~~sql
SET CLIENT_ENCODING TO 'UTF8';

DO $$
declare
begin
  RAISE NOTICE 'テストメッセージ.';
end;
$$ language plpgsql;
~~~
## コマンド

    chcp 65001
    psql -U postgres -f foo.sql 2>&1 | find "" /v

## 実行結果

    SET
    psql:foo.sql:8: NOTICE:  テストメッセージ.
    DO

# ４．補足

・上記で対応は可能ですが、以下の不明点があります。
　- chcpで文字化けが直らない理由（RAISEメッセージが標準エラー出力であることが関係している？）
　- 「2>&1」だけでは文字化けが解消されないが、パイプを中継すると文字化けが解消される理由。

・標準出力をファイル出力して参照する方法もあります。こちらの記事を参照下さい。
　[PL/pgSQLのRAISEメッセージをリダイレクトを使用してファイル出力する方法](https://qiita.com/will01/items/e4855220e67071a75188)
ElixirのString.codepoints()とString.to_charlist()の比較、そして<<>>記法と?演算子

## はじめに

Elixirで文字列を１文字ずつ分割して処理したい場合によく利用される関数として、
String.codepoints()とString.to_charlist()があります。

String.codepoints()は１文字ずつのListに変換されるのに対し、
String.to_charlist()は、（その名の通り）charlistに変換されます。

```Elixir
iex(1)> pattern = "012345"
"012345"
iex(2)> String.codepoints(pattern)
["0", "1", "2", "3", "4", "5"]
iex(3)> String.to_charlist(pattern)
'012345'
```

とりあえずここでは、それぞれ、変数a, 変数bに入れておきましょうか。

```Elixir
iex(4)> a = String.codepoints(pattern)
["0", "1", "2", "3", "4", "5"]
iex(5)> b = String.to_charlist(pattern)
'012345'
```

## 任意の位置の１文字を取り出す

次に、任意の位置の１文字を取り出す処理の例です。

- １文字目
```Elixir
iex(6)> Enum.at(a, 0)
"0"
iex(7)> a |> hd
"0"
iex(8)> Enum.at(b, 0)
48
iex(9)> b |> hd
48
```

- 6文字目
```Elixir
iex(10)> Enum.at(a, 5)
"5"
iex(11)> Enum.at(b, 5)
53
```

codepoints()では文字列がそのまま１文字ずつの文字列に変換されるので、
他の関数で再利用したり、出力する場合に処理が楽なのですが、

to_charlist()だと、char型なので再度文字列型への変換が必要な場合が多いです。

## <<>>記法

文字列に変換する場合は、<<>>で囲みます。
（よくこの記法を忘れるので、忘備録的な記事だったりします）

```Elixir
iex(12)> b |> hd
48
iex(13)> <<b |> hd>>
"0"
iex(14)> Enum.at(b, 5)
53
iex(15)> <<Enum.at(b, 5)>>
"5"
```

そのほか、<<>>記法の内部で値を列挙して、、
```Elixir
iex(16)> <<97, 98, 99, 100>>
"abcd"
```

でも、下記はエラーになります。
```Elixir
iex(17)> b
'012345'
iex(18)> <<b>>
** (ArgumentError) construction of binary failed: segment 1 of type 'integer': expected an integer but got: '012345'
    (stdlib 4.2) eval_bits.erl:143: :eval_bits.eval_exp_field/6
    iex:18: (file)
```

## to_string()での変換

この場合、to_string()で文字列に変換できます。

```Elixir
iex(19)> b
'012345'
iex(20)> to_string(b)
"012345"
```

では、、charlistの任意の１文字をto_string()で変換するとどうなるか？

```Elixir
iex(21)> Enum.at(b, 0)
48
iex(22)> to_string(Enum.at(b, 0))
"48"
```

'0'の文字コード48が、文字列に変換されて出力されてしまいます。
このあたり、間違えやすいので、記憶違いに注意ですね。

## ?演算子

ちなみに、任意の文字の文字コードを取得したい場合は、**?演算子** を使います。
（? が**演算子**なのか**記法**なのかは不明。とりあえずこの記事では **?演算子** と呼ぶことにします）
```Elixir
iex(23)> ?0
48
iex(24)> ?1
49
iex(25)> ?a
97
iex(26)> ?b
98
iex(27)> ?A
65
iex(28)> ?B
66
```

以上です。
他にも、思い出したら追記します。
ルーティングのnamespaceとは？？

Ruby on Railsを使ってアプリケーションを開発していると、namespaceという単語を耳にすることが多くあります。ここでは、特にルーティングのコンテキストでのnamespaceについて説明します。

# namespaceとは何か？
`namespace`とは、ルーティングを一定の範囲（名前空間）でグループ化するための方法です。これにより、同じコントローラー名やアクション名を異なる範囲で使い分けることができます。

##### `namespace`の基本的な使用法
例えば、管理者向けのページを作成する際には、namespaceを用いてadminという名前空間を作成します。
```ruby :routes.rb
namespace :admin do
  resources :users
end
```

上記のようにルーティングを設定すると、`Admin::UsersController`が作成され、その中にあるアクションへのルーティングが設定されます。また、ビューも`app/views/admin/users`ディレクトリの下に作成します。

#### namespaceの利点
`namespace`を使用することで、以下のような利点があります。

コントローラーやビューを整理しやすくなります。例えば、管理者向けのページと一般ユーザー向けのページを分けることができます。
URLがわかりやすくなります。例えば、`/admin/users`というURLが管理者向けのユーザー管理ページであることを明示的に示すことができます。
### 注意点
ただし、`namespace`を使用する際には、以下の点に注意が必要です。

コントローラーは`namespace`で指定した名前のディレクトリの下に作成する必要があります。例えば、上記の例では`Admin::UsersController`を`app/controllers/admin/users_controller.rb`として作成します。
`namespace`でグループ化したルーティングのコントローラー内で使用するヘルパーメソッド（例えば、form_withやlink_to）は`namespace`を考慮に入れる必要があります。例えば、`form_with model: [@admin, @user]`のように指定します。
OpenCVでpython wrapper関係のテスト

TL;DR
=====
Python Testの動かし方

`PYTHONPATH=/home/kmtr/work/opencv/modules/python/test ./setup_vars.sh python /home/kmtr/work/opencv/modules/python/test/test_misc.py`

課題
====
- Python wrapper周りの修正コードを書いた。
- あれ？テストコードってどう書いたらいいのかな？
- ソースコードは、opencv/modules/python/test にあるけど
- キックする方法がよく分からない・・・

結論
====
このあたりに書いてた。公式ドキュメントは、あとで見つかったら書いておこう。

- https://answers.opencv.org/question/225157/how-to-trigger-tests-in-miscpythontest/
- https://github.com/opencv/opencv/pull/16405#issuecomment-577096863

Opencvをbuildしていたフォルダで、こんな感じのコマンドを実行。

`PYTHONPATH=/home/kmtr/work/opencv/modules/python/test ./setup_vars.sh python /home/kmtr/work/opencv/modules/python/test/test_misc.py`

今回は、テストマクロは、test_misc.pyに追加する形としたので、ファイル追加は考慮していない。
M5stack(ESP32)でマルチタスクを実行する

# 概要
M5stack及びESP32を使ってセンシング・通信をする場合に複数のタスク(処理)を同時に実行させたいときがあります。
特にセンサーでセンシングを行いつつ、SDやサーバー・スマホなどとコネクション張りっぱなしで通信したい場合はマルチタスク処理が必須になるのではないでしょうか？

今回マルチタスクについて触れる機会があったので備忘録的にまとめておく。

# マルチタスクを使用する

## どの関数を使うべきか？

タスク作成関数には
* xTaskCreate()
* xTaskCreatePinnedToCore()
* xTaskCreateUniversal()
の3つが存在します。

ESP32では基本的にはCPUコアの指定ができる`xTaskCreatePinnedToCore()`を使用して問題ないと思います。

https://lang-ship.com/reference/unofficial/M5StickC/Functions/freertos/task/


###  xTaskCreatePinnedToCore()
タスクを生成します
```cpp
BaseType_t xTaskCreatePinnedToCore(
TaskFunction_t pvTaskCode, // タスク関数へのポインタ
const char *const pcName, // タスクの名前
const uint32_t usStackDepth, // スタックサイズ
void *const pvParameters, // タスクのパラメータ
UBaseType_t uxPriority, // タスク優先順位
TaskHandle_t *const pvCreatedTask, // タスクHandleへのポインタ
const BaseType_t xCoreID // 利用するコア
)　

```

## その他合わせて使う関数

### xTaskGetTickCount()
タスク起動時間ticks数を取得する。

```
TickType_t xTaskGetTickCount(void) PRIVILEGED_FUNCTION
```

### vTaskDelayUntil()
タスクを一時停止して他のタスクを実行する

```cpp
void vTaskDelayUntil(
TickType_t *const pxPreviousWakeTime,  // 最後にブロック解除された時間を保存するポインタ 
const TickType_t xTimeIncrement // サイクル時間
) PRIVILEGED_FUNCTION

```



# 雛形サンプルコード

```cpp  
#include <M5Stack.h>

// タスク1の関数
void task1(void *parameter) {
  portTickType xLastWakeTime;
  xLastWakeTime = xTaskGetTickCount();
  while (1) {
    // タスク1の処理をここに記述
    M5.Lcd.println("Task 1 running");
    vTaskDelayUntil(&xLastWakeTime, 1000 / portTICK_PERIOD_MS);
  }
}

// タスク2の関数
void task2(void *parameter) {
  portTickType xLastWakeTime;
  xLastWakeTime = xTaskGetTickCount();
  while (1) {
    // タスク2の処理をここに記述
    M5.Lcd.println("Task 2 running");
    vTaskDelayUntil(&xLastWakeTime, 1000 / portTICK_PERIOD_MS);
  }
}

void setup() {
  M5.begin();

  // タスク1の作成と開始（コア0に割り当て）
  xTaskCreatePinnedToCore(task1, "Task 1", 10000, NULL, 1, NULL, 0);
  
  // タスク2の作成と開始（コア1に割り当て）
  xTaskCreatePinnedToCore(task2, "Task 2", 10000, NULL, 1, NULL, 1);
}

void loop() {
  // メインループでは何もしない
}
```


## おわりに
今回は備忘録的に使い方を記述した。LCDやSDが既にあるM5stackはとても便利である。ちょっとセンサーを使って遊ぶ程度の使い方をする場合はここまで必要ないかもしれないが、マルチタスクを使いこなすことでPoC的なプロダクトにも十分使えるのではないか。
また、タスクスケジュール調整は実際に動かしてかつ経験が必要だと聞く。また引き続き調査したい。

# (おまけ)マルチコアとマルチスレッドのまとめ
毎度混乱しがちだがこちらの図が大変理解しやすいと思います。

https://qiita.com/Ninagawa_Izumi/items/5c3a9d40996836bd825f
【Ruby】テスト点数の降順で並べ替えて出力するプログラム

Rubyを使ったロジックの実装について学習しています。
今回は、並べ替えに関するロジックについてメモしていきます。

# やりたいこと

**テストの点数の降順で並べ替え、順位をつけて出力したい。**

```ruby
array = [["山田", 89],["菅野", 65],["田中", 59],["斉藤", 78],["竹下", 97]]
```

### こんな感じで出力したい

```ruby
1位: 竹下 97点
2位: 山田 89点
3位: 斉藤 78点
4位: 菅野 65点
5位: 田中 59点
```

### 補足
- 名前、点数の順番で、多重配列で保存されている。
- 降順は、数字の大きい方が上で、小さい方に向けて並べる。

# 完成コード

```ruby
array = [["山田", 89],["菅野", 65],["田中", 59],["斉藤", 78],["竹下", 97]]

sort_array = array.sort{|a,b| b[1] <=> a[1]}

sort_array.each_with_index do |data, index|
  puts "#{index + 1}位: #{data[0]} #{data[1]}点"
end
```

# コードの解説

- `sort_array = array.sort{|a,b| b[1] <=> a[1]}`
    - `sort`メソッドを使い点数の降順になるように並べ替えている。
    - 配列`array`を得点が高い順（降順）にソートして、その結果を`sort_array`に格納している。
    - `b[1] <=> a[1]`は、配列の要素bの得点とaの得点を比較して、bの得点がaの得点より大きければ1、等しければ0、小さければ-1を返す。

- `sort_array.each_with_index do |data, index|
  puts "#{index + 1}位: #{data[0]} #{data[1]}点"
end`
    - `each`メソッドを使ってループ処理を作成していく。
    - ここでは、`each_with_index`メソッドを使い、順位の数値も変数で出力している。



# 参考サイト

https://style.potepan.com/articles/30459.html


https://docs.ruby-lang.org/ja/latest/method/Array/i/sort.html
nvmのアップデート・nodeバージョン変更

nodeをv20に上げたいが、nvｍが古いようで選択肢に上がってこなかった。

## 環境
windows 10

## 参考

[https://watalogs.com/nvm-windowsをアップデートする方法/](https://watalogs.com/nvm-windows%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/)

## 手順

1. アップデート用のZipをダウンロードする

https://github.com/coreybutler/nvm-windows/releases

1. Zipを解凍してexeを実行
2. 確認

```bash
$ nvm -v
1.1.11
```

1. node v20をインストールし変更

```bash
nvm install 20 # インストール
nvm use 20.5.0 # 変更
```
入力チェックもしていないのか

https://www.47news.jp/9645173.html

> 「オー」と「ゼロ」誤入力　放射性廃棄物を過小評価
> 2023年07月27日共同通信
> 　日本原燃は27日、低レベル放射性廃棄物埋設センター（青森県六ケ所村）で受け入れた廃棄物の放射性物質濃度などが過小評価され、原因は検査装置のプログラムでアルファベットの「O（オー）」を入力するところに数字の「0（ゼロ）」を誤入力したことだったと発表した。

プログラムをどういうところに外注したのでしょうね。
Azure 学習のための環境構築：無料アカウント 作成＋最初にすべき設定

# この記事を書くきっかけ
Azure を学習したい。そのためには学習用の環境構築をする必要がある。
ただ環境をつくればいいという訳でなく、多要素認証の導入など最低限のセキュリティは考慮したい。

AWSだと、かの有名なClassmethodさんのブログでもこういった記事がまとめられています。

https://dev.classmethod.jp/articles/aws-1st-step-new-era-reiwa/

ここまでは書けないにしても、自分が最低限したい設定に関して調べて実施したので、備忘録もかねて記事にしました。

# 無料アカウント（Microsoftアカウント）作成
ここはいろいろ記事があるので、それを見て実施。
私の場合は以下を参照しました。

https://az-start.com/azure-create-free-account/

# 多要素認証の導入

私はスマホアプリで Microsoft Authenticatorを入れ、以下 ”アカウント管理者のMFA” の設定を行いました。これでアカウント乗っ取りのリスクを低減できるはず。

https://zenn.dev/tomot/articles/7ddeb902e8f426#%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E7%AE%A1%E7%90%86%E8%80%85%E3%81%AEmfa

# 作業用アカウントの作成
管理者アカウントを使い続けることは通常しない。作業用アカウントを作成し、それを使うようにする。
作業の流れとしては以下になる。

### 作業アカウントの作成　※「グローバル管理者」ロールの設定
”Active Directory > すべてのユーザ > +新しいユーザー” からユーザを新規追加する
作成時に、”グループトロール > 役割 > ユーザー” をクリックして下記画面を表示し、”グローバル管理者” を選択する。その他は任意。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038334/c4cd7fc3-121a-da3f-ff3f-0052b40ce6a7.png)


### サブスクリプションの共同管理者に設定
”サブスクリプション > 利用するサブスクリプション(以下画面例では Azure Basic Subscription > +追加 > 共同管理者の追加”
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038334/0bb29526-ceb8-3049-aacc-02ee63424f0a.png)

表示された ”共同管理者の追加” 画面で今回作成したユーザを選択し [追加] をクリック。

<img width="300" alt="qiita-square" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1038334/4b65e888-6a40-5304-0e08-97631f6b884d.png">



# 予算の作成と課金アラートの設定
以下記事を参照し、設定設定を行いました。これで思わぬ課金に素早く気付けるはず。

https://dev.classmethod.jp/articles/azure-setting-budget/


# さいごに
この記事はまだ十分でないかもしれません。今後も気づいたことがあれば追加していきますので、温かい目で見守ってください。