OmniAICreator/Qiita-1.07M huggingface dataset:
言語処理100本ノック 第1章 解いてみた

# はじめに
* YouTubeでPythonの基礎文法の動画見たことあるくらいのレベル
* 開発経験はほぼありません。業務でJavaを3週間程度触りました
* Google Colaboratoryを使用しています
* 誤りや変なコーディングあればご指摘頂けると幸いです
* 第2章以降も頑張りたいと思っています。

# 00. 文字列の逆順
```python
str = "stressed"
print(str[::-1])
```

# 01. 「パタトクカシーー」
```python
str = "パタトクカシー"
print(str[::2])
```

# 02. 「パトカー」+「タクシー」=「パタトクカシーー」
```python
str1 = "パトカー"
str2 = "タクシー"
for c1, c2 in zip(str1, str2):
  print(c1 + c2, end='')
```

# 03. 円周率
```python
s = "Now I need a drink, alcoholic of course, after the heavy lectures involving quantum mechanics."
result = []
for word in s.replace(",", "").replace(".", "").split(" "):
  result.append(len(word))
print(result)
```

# 04. 元素記号
```python
s = "Hi He Lied Because Boron Could Not Oxidize Fluorine. New Nations Might Also Sign Peace Security Clause. Arthur King Can."
word_list = s.replace(".", "").split(" ")
num_list = [1, 5, 6, 7, 8, 9, 15, 16, 19]
result = {}
for index, word in enumerate(word_list):
  if (index + 1) in num_list:
    result[word[:1]] = index + 1
  else:
    result[word[:2]] = index + 1
print(result)
```

# 05. n-gram
```python
def make_n_gram(n, text_list):
  n_gram = []
  for i in range(len(text_list) - (n - 1)):
    n_gram.append(text_list[i:i+n])
  return n_gram

text = "I am an NLPer"
c_bi_gram = make_n_gram(2, list((text.replace(" ", ""))))
w_bi_gram = make_n_gram(2, text.split(" "))
print(c_bi_gram)
print(w_bi_gram)
```

# 06. 集合
```python
text1 = "paraparaparadise"
text2 = "paragraph"
bi_gram1 = make_n_gram(2, list(text1))
bi_gram2 = make_n_gram(2, list(text2))
# listはset(list)でsetに変換できるという記事を読んだができなかったので、list→tuple→setに変換
bi_gram1 = [ tuple(item) for item in bi_gram1]
bi_gram2 = [ tuple(item) for item in bi_gram2]
X = set(bi_gram1)
Y = set(bi_gram2)
# 和集合
print(X | Y)
# 積集合
print(X & Y)
# 差集合
print(X - Y)
print("se is ", "" if ("s", "e") in X else "not ", "in X", sep="")
print("se is ", "" if ("s", "e") in Y else "not ", "in Y", sep="")
```

# 07. テンプレートによる文生成
```python
def template(x, y, z):
  return "{}時の{}は{}".format(x, y, z)

print(template(12, "気温", 22.4))
```

# 08. 暗号文
```python
def cipher(text):
  result = []
  for c in text:
    if c.islower():
      result.append(chr(219 - ord(c)))
    else:
      result.append(c)
  return "".join(result)

message = "Apple Banana Chocolate"
encoded = cipher(message)
decoded = cipher(encoded)
print("暗号化：{}".format(encoded))
print("複合化：{}".format(decoded))
```

# 09. Typoglycemia
```python
import random

def typoglycemia(text):
  l = []
  for w in text.split(" "):
    if len(w) <= 4:
      l.append(w)
    else:
      tmp = list(w[1:-1])
      l.append(w[0:1] + "".join(random.sample(tmp, len(tmp))) + w[-1])
  return " ".join(l)

  text = "I couldn't believe that I could actually understand what I was reading : the phenomenal power of the human mind ."
print(typoglycemia(text))
```
オブジェクトのメソッドとプロパティの整理

```diff_javascript
<body>
  <header>
    <div class="container">
      <h1>タイトル</h1>
      <h2>サブタイトル</h2>
    </div><!-- /.container -->
  </header>
  <main>
    <div class="container">
      <section>
-        <p id="choice">ここに日時を表示します</p>
      </section>
    </div><!-- /.container -->
  </main>
  <footer>
    <div class="container">
      <p>JavaScript Samples</p>
    </div><!-- /.container -->
  </footer>
+  <script>
+    'use script';
+   document.getElementById('choice').textContent = new Date();
+    console.log(document.getElementById('choice').textContent);
+  </script>
</body>
```

:::note info
オブジェクトには`windowsオブジェクト`、`documentオブジェクト`、`consoleオブジェクト`などがあり、それぞれには固有のメソッド、プロパティが存在する。
:::

**メソッド**：オブジェクトにさせたい指示する　`例）　　log()やById()`
**プロパティ**：オブジェクトの状態を表す　`例）　　textContent`
**パラメータ**：（）内に含まれる文字列や数列　`例）　　textContent`

```diff_javascript
//documentオブジェクト内のid名を取得して、id名のコンテンツを日付（new Date()）に書き換える
document.getElementById('choice').textContent = newDate();

//documentオブジェクト内のid名を取得して、読み取り。consoloに表示させる。
console.log(document.getElementById('choice').textContent);
```
【運用・保守】SQLiteを調査に使う

## はじめに
エンジニアの長谷川と申します。
現場でログ調査をする際にSQLiteを使用したところ、
便利でしたので書きのこしておきます。

## SQLiteとは
DBです。
Oracleとかのようなサーバではなく、ライブラリです。
下記からダウンロードできます。
https://www.sqlite.org/index.html

## どのように使用したか
導入は他の方の記事に任せるとして、
どのように使ったかを記載します。

１．ログファイルをCSVに加工
ホストごと、時間（秒）ごとのアクセス数を調べることになったので、
日付、時間、ホストのCSVに加工しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/f4ab48d4-c51c-a546-4d94-9e7409a6d3bc.png)

２．加工したCSVをSQLiteに読み込み
```.mode```でcsvを指定し、
```.import```で加工したCSVを指定し、読み込み先のテーブル名を指定します。
この時、テーブルが存在していなければ、CSVの1行目をカラム名として使ってくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/b8ede896-4613-efa5-bbe7-2b40e8579eb0.png)

３．読み込まれたことの確認
普通にSQLで確認します。
この時、```.headers on```としておくとカラム名も出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/94dd21e0-2d33-e067-6285-2dbb91ed2bda.png)

４．ホスト毎、時間（秒）ごとのアクセス数調査
SQLで確認しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/1c0746d8-44ec-b905-3247-7dd1660d15a1.png)

５．CSV出力
４で上手く集計出来たのでファイルに出力しました。
```.output 出力ファイル名```
でselect結果を出力するファイルを指定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/02ac52e9-fa85-3701-a6fd-e73df0405d99.png)

６．出力ファイルの中身を確認して、報告
念のため、ファイルの中身が問題ないか確認して、報告しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/793902a2-1145-b9e0-c2e3-f675f9789bc9.png)

## 終わりに
如何でしたでしょうか？
アプリケーションのログやアクセスログを集計する必要が出てきた場合、
CSVに加工する手間はあれど、SQLiteに食わせてしまえば、
あとはDMLで如何様にも出来ます。
エクセルでフィルタを駆使する必要はもうないのです。

以上、長谷川でした。
LLMからアドバイスを貰うためにディレクトリ構成とファイル内容を1つのテキストファイルに書き出すスクリプト

1. `gen_codes.sh`を配置する。

    ```sh
    #!/bin/bash
    
    # スクリプトのファイル名を取得し、拡張子を変更して出力ファイル名を設定
    script_name=$(basename "$0")
    output_file="${script_name%.sh}.txt"
    
    # 除外するディレクトリ名とファイル名を配列で指定
    exclude_dirs=("__pycache__" "venv" ".dart_tool" "build")
    exclude_files=("$script_name" "$output_file" ".gitignore" "__init__.py")
    
    # 出力ファイルを初期化
    > "$output_file"
    
    # 除外パターンを作成
    exclude_args=()
    for dir in "${exclude_dirs[@]}"; do
      exclude_args+=( -path "*/$dir/*" -prune -o )
    done
    for file in "${exclude_files[@]}"; do
      exclude_args+=( -name "$file" -o )
    done
    
    # ディレクトリ構造をtree形式で出力
    echo "Directory Structure" >> "$output_file"
    echo "===================" >> "$output_file"
    find . \( "${exclude_args[@]}" -false \) -o -print | sed -e 's|[^/]*/|    |g' -e 's|    |├── |g' -e 's|──  |── |g' >> "$output_file"
    echo "" >> "$output_file"
    
    # 出力ファイルのヘッダーにファイル内容の概要を追加
    echo "File Contents" >> "$output_file"
    echo "=============" >> "$output_file"
    echo "" >> "$output_file"
    
    # findコマンドを組み立てて実行
    find . \( "${exclude_args[@]}" -type f -print \) | while read -r file; do
      # ファイルパスの先頭 "./" を "/" に置き換え
      relative_path="${file#./}"
      echo "=== /$relative_path ===" >> "$output_file"
      cat "$file" >> "$output_file"
      echo -e "\n\n" >> "$output_file"
    done
    
    echo "Directory structure and contents have been written to $output_file"    
    ```
    
1. `./gen_codes.sh`を実行すると、`gen_codes.txt`が出力される。
1. LLMに投入して会話を続ける。
Flutterでの画面遷移

Navigator, MaterialPageRoute
onPressed:(){}の波括弧の中にルーティングを記述して、画面遷移を実現する。

#### 画面の移動
```dart
Navigator.of(context).push(
  MaterialPageRoute(builder: (context) {
      // 遷移先の画面のウィジットを指定
      return MoveToPage();
  }),
);
```

#### 前画面に戻る
```dart
Navigator.of(context).pop();
```
1年7ヶ月で辞めた会社に関して何をやったのかをまとめる

はじめましての方は初めまして、お久しぶりの方はお久しぶりです白々さじきです。
2024年の7月末で入社した会社を退職することにしました。
1年7ヶ月という今までで一番短い期間での退職となりました。
色々あって自主都合での退社となりました。
ここでは、私が学んだ技術的なことを記載していきたいと思います。

## なぜ書くのか
今まで自分が学んだことを忘れないうちに記録するためと、今後技術的にどう成長させるかをまとめるためです。

## 学んだIT技術スタック
- システムに対しての負荷試験のシナリオ作成

## 技術以外で学んだこと
- プロジェクトを進める前に本来の目的を確認する重要性
- スキルセットがマーケティングよりでITに詳しくないPdMに対しての仕様の提案
- 複数の部署との調整作業
- 松竹梅で提案内容を選べるように準備する

最初は社内プロジェクトのエンジニアとして入っていましたが、DBのチューニングを依頼され別のプロジェクトに移動しました。
実際にプロジェクトに入って状況を確認してみると、依頼してくれた上司と現場の状況が異なると判断しDBのチューニングの前にシステムの負荷試験を実施するようにPdMに提案しました。
その後、PdMとの調整を行い負荷試験をするために、インフラの部署と開発の部署、PdMの部署と調整しながら進めることができました。
実際にシステムの最大同時接続ユーザー数を150倍にすることができました。
ただ、運用費にどの程度余裕があるかわからなかったので、上司の勧めで運用費と接続ユーザー数を松竹梅で分けて提案することで、決定時に追加のヒアリングをすることなくスムーズに進めることができました。

## 今後したいこと
初めてエンジニア以外の人にIT関係の説明をする機会を得ることができ、いろいろ考えながら話すのが大変でしたが、自分の経験になったと思います。
エンジニアから離れてみたんですが、やっぱりコードは書きたいと思いました。

なので、現職ではコードを書きつつ、前職で体験した改善の目的をちゃんと確認し、自社のサービスにとって一番いい形を提案できるように自分のスキルもちゃんと育てていければと思います。

## 最後に
短い間ではありましたが、様々なことを学ぶきっかけを頂いたことに感謝しています。
次の会社でも学んだことを生かしながらがんばっていこうと思います。

また、個人的な技術ブログも始めてみましたー
よければこちらも見てもらえるとモチベがあがるのでうれしいですー！！
https://sirajira-sajiki-tech.com/
カンバンボードのようなガントチャート

私は、「Yuimarl」(ゆいまーる) という自作のプロジェクト管理システムを開発しています。  
https://mnitta220.github.io/yuimarl/

このシステムに、ガントチャートを表示する機能を追加しました。機能の概要については、次のページをご覧ください。  
https://mnitta220.github.io/yuimarl/ganttchart.html

このガントチャート機能は、カンバンボードのような使い方をすることができます。  
「カンバンボード」は、「タスクボード」または「スクラムボード」と呼ばれることもありますが、この記事では、これらを総称して「カンバンボード」と記述します。  
(参照) https://www.insurtechlab.net/glossary/task-board/

カンバンボードでは、主に、「ToDo」(未着手)、「Doing」(実行中)、「Done」(完了) のタスクを縦のレーンに並べます。ホワイトボードに付箋を貼って、チーム内のタスク管理に使われたりします。  

Yuimarlのガントチャート機能は、チケット(タスク)の階層をツリー状に表示することができます。
それを使って、カンバンボードのように使うことができます。  
ツリーを自由に作成できますが、私が実際の開発で使っていて、皆様にもお勧めしたいのは、以下のような構成です。  
一番上位に、プロジェクト名のチケットを配置し、その下に以下の子チケットを作成します。

* Release
* Doing
* ToDo
* Backlog

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839302/7b1a43c7-e858-055b-dac3-bf26ddb57bf5.png)


「Release」の下には、リリース計画のチケットを配置します。（「version1.0.17」、「release202408-01」など）  
「Backlog」の下には、実現したい要求のチケットを配置します。  
「Done」がありませんが、進捗を見れば完了済みかわかるので、なくてよいと思います。  

これを実際に運用していくと、次のようになったりします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839302/d6df21b1-af9f-03a4-dd35-147b5f29493e.png)

チケットをドラッグ＆ドロップで移動することができます。並び順を変えたり、ToDo から Doing に移動したりすることができます。

Doing の下のチケットは、どのリリースに入れるかが決まったら、リリースチケットの子チケットに移動します。（そのリリースに入れられることがほぼ確実にならないうちは、移動しない方がよいと思います。）

完了済みになって、ガントチャートに表示する必要がなくなったチケットは、「ガントチャートに表示する」をOFFにします。

この機能を使えば、ガントチャートにカンバンボードを加えたようになり、タスクの可視化の度合が高くなります。  
スマートフォンやタブレットからでも使えるので、いつでも確認することができます。  
ご興味がありましたら、お使いいただけるとうれしいです。
プロのシェルスクリプトの書き方（k）

## 変数宣言方法

### 1 設定項目読み込み
```
[[ -r /etc/profile ]] && . /etc/profile
```

### 2　変数エクスポート

exportを付けている理由は子スクリプトでも使用できるように。

https://qiita.com/kure/items/f76d8242b97280a247a1

```
export SHELL_NAME=$(basename -- $0)
export SHELL_NAME2=$(basename $0)
export SHELL_ARGV="$@"
export SHELL_ARGV_NUM=$#
export SHELL_YMD=$(date +%Y%m%d)
export SHELL_PID=$$
export SHELL_BASE_PATH=$(cd $(dirname $0); pwd)
export SHELL_BIN_PATH=${SHELL_BASE_PATH}/bin
export SHELL_CONF_PATH=${SHELL_BASE_PATH}/conf

for i in ${SHELL_NAME} ${SHELL_NAME2} ${SHELL_ARGV} ${SHELL_ARGV_NUM} ${SHELL_YMD} ${SHELL_PID} ${SHELL_BASE_PATH} ${SHELL_BIN_PATH} ${SHELL_CONF_PATH}

do
     echo $i


done
```

### 3　ディレクトリ用変数　記載方法
```
export SHELL_BASE_PATH=$(cd $(dirname $0); pwd)
export SHELL_BIN_PATH=${SHELL_BASE_PATH}/bin
export SHELL_CONF_PATH=${SHELL_BASE_PATH}/conf
```

### 4 declare

export不要だったり
連想配列なんかもできて便利

```
declare -x 
declare -Ax ZZZZ

ZZZZ[TTT1]="123 456"
ZZZZ[TTT2]="789 aaa"
```

https://future-architect.github.io/articles/20210401/

### 5 変数文字数抜き出し

```
if [[ "${HOSTNAME:0:6}" = "docker" ]]; then

echo "GOOD"

fi
```

https://qiita.com/miriwo/items/20118c23b16f7e3edb43

### 6.ログ記録 ※デバッグにも使えます。
※少し上級者向けですね


```
function LOG_OUTPUT {

echo "$(date +'%Y%m%d %H:%M:%S') $@" | tee -a aaa.log

}

sh aaa.sh | while read line

do

        LOG_OUTPUT $line

done
```

aaa.sh
```
#!/bin/bash
echo "ZZZ"
echo "YYY"
echo "XXX"
echo "QQQ"
pwd
ps
```
選択問題の正解並び替えコード

選択問題の中身は同じにしたまま、正解番号だけかえたいときあるけど、手作業で並び替えるのも面倒と言えばめんどうです。

ちなみに正解がすべて1の場合です

### 「爆笑」と「大笑い」の言葉の、意味の違いは何でしょう？

1 笑う人の数 2 笑う声の大きさ

### お医者さんや看護師さんは、基本的に白い白衣を着ますが、手術の時には、青緑色の制服を着る人が多いです。一体なぜ？

1 目を疲れにくくするため 2 菌が繁殖しないための、特殊な加工をしているから

### 「不意打ちなことに驚く」様子を「寝耳に水」って言いますね。この「水」って何をさしている？

1 洪水 2 井戸の水

# コード例

Pythonを使用して選択問題の正解を並び替えるためのコードを以下に示します。

```Python
# 問題と選択肢のリスト
questions = [
    {"question": "「爆笑」と「大笑い」の言葉の、意味の違いは何でしょう？", "choices": ["1 笑う人の数", "2 笑う声の大きさ"], "correct": 1},
    {"question": "お医者さんや看護師さんは、基本的に白い白衣を着ますが、手術の時には、青緑色の制服を着る人が多いです。一体なぜ？", "choices": ["1 目を疲れにくくするため", "2 菌が繁殖しないための、特殊な加工をしているから"], "correct": 1},
    {"question": "「不意打ちなことに驚く」様子を「寝耳に水」って言いますね。この「水」って何をさしている？", "choices": ["1 洪水", "2 井戸の水"], "correct": 1}
]

# 正解を並び替える
questions[0]["correct"] = 2  # 問1の正解を2
questions[1]["correct"] = 1  # 問2の正解は1
questions[2]["correct"] = 2  # 問3の正解を2

# 結果を表示
for q in questions:
    print(f"問題: {q['question']}")
    for choice in q["choices"]:
        print(choice)
    print(f"正解: {q['correct']}\n")
```
【セッションレポート】「『type 就活』DX 成功は Amazon RDS から AlloyDB への完全移行にあった」に参加しました

# はじめに
本記事はGoogle Cloud Next Tokyo 2024 のDay1(8/1)において キャリアデザインセンター 森さん、システムサポート 山本さん、Google Cloud 田野倉さん がディスカッションされた「『type 就活』DX 成功は Amazon RDS から AlloyDB への完全移行にあった」のレポートです。

# 公式セッション紹介
> 就活生向けのサービスである『type 就活』は、コロナ禍の就活市場における学生の行動変化により、この数年で会員数が 1.5 倍、トラフィックは 10 倍に。今後、さらに拡大が予想される『type 就活』ですが、安定かつ高品質なサービス提供を考えた際の最適解が、既存の AWS から BigQuery や AlloyDB がある Google Cloud への完全移行だった背景を、ビジネスとシステムの両側面から紹介いたします。

# 発表資料
- アーカイブ動画は9月に公開されるとのこと(Google Cloud Next Tokyo 2024として)

# 概要／おすすめポイント
もともと RDS for MySQL で稼働していたシステムを(分析基盤としてBigQuery+Looker Studioをすでに利用していた)Google Cloudへ寄せていく(移行する)にあたり、AlloyDB for PostgreSQLを採用することになった、というお話になります。
Google CloudではMySQL互換のDBaaSとしては Cloud SQL for MySQLもありますが、AlloyDBでは(カラムナエンジンも搭載されているため)集計・集約クエリも実行できることが決め手となり、(エンジンを変更するコストを考慮しても)AlloyDBの採用に至ったとのことでした。

# セッション内容の紹介
ビジネス的な背景などについても時間を割いてディスカッションされていましたが、こちらでは Google Cloudへの移行 にフォーカスして紹介します。
ディスカッション形式でしたためそれぞれの内容については概要に触れるくらいでしたが、私は次の2点がポイントかと思いました。

1. MySQL から PostgreSQLへの移行について、そんなに難易度が高くなかった
    - pgloaderを使用してテーブル毎に移行を実施
1. 全体的に性能が向上した
    - Query Insightsで負荷の高いクエリをチューニングすることで、最終的にピーク時DB負荷が 1/4 程度に低減

MySQLからPostgreSQLへの移行は、もちろん行うことはできますがテーブル定義やSQLなど含めて互換性がないものもあるので、移行を決断してやりとげた、というのはお互いに信頼して実施されていることが伝わってきました。
また、負荷の高いクエリを自分たちでもチューニングを簡単に行える、という点は運用を行っている中で今後何か起こっても大丈夫、という安心感を得ることができるのため運用側にとっても助かるポイントだなと思いました。

可能であれば両方とももう少し深堀してお話が聞けると良いかと思いました。特にPostgreSQLへの移行時に気を付けたポイントやはまりポイントは知見を知りたい人も多くいると思います。
また、性能についてもMySQLを利用していた時のボトルネックとどのような違いが出てきたのか、辺りを知りたいと思いました。

# まとめ
リレーショナルデータベースの移行をおこなう際には、なるべくデータベースエンジンの変更を行わずに移行を行いたい、というのがスタンダードですが、それを乗り越えても AlloyDB for PostgreSQLを採用された、というのが驚きでした。
詳細は触れられていませんでしたが、リアルタイムの集計・集約クエリがそのまま実現できるというところがニーズにマッチしていたと思われます。

タイミング的にAsk The Speakerに並べなかったのが残念です。。
村上謙吉「レオロジー基礎論」のメモ・正誤表

読んでいて気付いた点、誤植と思われる点をメモする。(公式の正誤表が見当たらないので)
https://cir.nii.ac.jp/crid/1573950401911964672
初版に基づく。更新中。

# 1. レオロジーとは何か？
特になし

# 2. 典型的な弾性変形
(2.4)は$\sigma=\frac\beta\alpha=\frac\beta\gamma$
ガラス転移の微視的説明がいまいちしっくりこない
(2.35), (2.37)は 係数$\frac{1}{q}$が抜けている
(2.36)はベクトル和の絶対値の意味だろう
2.3.1 結合角90°の場合は必ずしも図2.18のようになるのではなく、3次元的にいろいろな方向に向くはず。(2.39)の内積の値が$a^2, 0, -a^2$のいずれかにランダムになるので、自由ランダム回転差の場合と同じように第2項が消えると言いたいのだろう
2.3.3 nとNの記載が混乱している。スターリングの公式が間違っている。
(2.56)から(2.57)への近似は、lnを2次の項まで近似すれば出てくる
イメージで理解するHTTPリクエスト

## はじめに
HTTPリクエストと聞いて、「言葉は聞いたことがあってもいまいちよく分からない。」といった状況の人がいると思います。そのような方向けに今回はHTTPリクエストついてイメージで理解できるように解説します。
※かっこ内は、イメージしやすくするための翻訳みたいなものです。

## HTTPとは何か？
HTTPとは、HyperText Transfer Protocol の略で、**WebブラウザとWebサーバーの間で情報をやり取りするためのプロトコル**（データの送受信の約束事）のことです。このHTTPがあることで、インターネット上の情報のやり取りが可能になります。HTTPには、クライアント（ブラウザ）が情報やリソースを要求するリクエストと、サーバーがクライアント（ブラウザ）のリクエストに応じて返すレスポンスがあります。

## HTTPリクエスト

HTTPリクエストは、リクエストライン、ヘッダー、ボディの3つに分けられます。
### リクエストライン

リクエストラインは、宛先に目的を伝える「手紙の宛名と件名」のようなものです。具体的には、メソッド（データをどのように扱いたいか）、ファイル名、HTTPのバージョンが記載されてます。
```
GET /index.html HTTP/1.1
```
例えば、上記のリクエストラインでは、HTTP/1.1（というバージョンを使って、）index.html（というファイルを）GET（取得したい）という意味です。

### ヘッダー

ヘッダーは、コンテンツタイプ（受け入れることができるデータの種類）の指定やリクエスト先のホスト名（接続先の名前）の指定、クライアントのソフトウェアの情報などが含まれます。
```
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
```
例えば上記のヘッダーでは、
- www.example.comという宛先に接続します
- クライアントの情報は、Mozilla/5.0です
- HTML形式のコンテンツを受け入れます
- 英語（米国）を好み、それに次いで他の英語も受け入れることができます
- gzipやdeflate、br形式で圧縮されたデータを受け入れます

というような意味を持ちます。

### ボディ

ボディは、リクエストの本文のようなようなものです。ウェブサイトのフォームに入力されたデータをサーバに送信したいときなどに使われます。GETメソッド（Webサイトを取得したい目的）では、ボディは必要ないので空です。
```
POST /posts HTTP/1.1
Host: api.example.com
Content-Type: application/json
Content-Length: 85

{
  "title": "花火大会",
  "content": "浴衣をきて花火大会に行った。かき氷がおいしかった。",
  "author": "太郎"
}

```
上記は、POSTメソッド（データをサーバーに送信するという目的）を使って、ブログの記事を投稿する際のリクエストライン、ヘッダー、ボディです。ヘッダーの部分で、`Content-Type: application/json`というのがありますね。これは、
- コンテンツタイプ（送信するデータの種類）は、JSON形式（データを名前と値のペアで表現する形式）です

という意味です。そのJSON形式というのがボディである{}で、このHTTPリクエストを送信することで、ブログに投稿をアップすることができます。

## まとめ
HTTPリクエストは、WebブラウザとWebサーバーの間で情報をやり取りするための基本的な仕組みです。HTTPリクエストは以下の3つの部分で構成されています

### リクエストライン

これは宛先に目的を伝える部分で、メソッド（データをどう扱いたいか）、ファイル名、HTTPのバージョンが含まれます。
### ヘッダー

ヘッダーには、コンテンツタイプ、リクエスト先のホスト名、クライアントのソフトウェア情報などが含まれます。
### ボディ

ボディはリクエストの本文で、フォームに入力されたデータをサーバーに送信する場合などに使用されます。GETメソッドでは通常空です。


HTTPリクエストを理解することで、Webブラウザがどのようにしてサーバーから情報を取得しているかを知ることができます。イメージしながら理解していきましょう。
vscode The window is not responding

# The window is not responding
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637403/ec273738-7b49-5f12-0349-aa34ffc97b18.png)
パソコンが修理から返ってきた後(初期化された状態)にvscodeをインストールしたら直面した問題
この問題はvscodeを開くのがとても遅くなっていまうというストレスフルなもの

# 原因&解決法
調べてみるとMcAfee のリアルタイム スキャンがcode.exeもスキャンしているためらしい。そのためcode.exeのスキャン設定を外せば元に戻るとのこと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637403/5511239c-20e9-57de-b778-3ba12402f195.png)
ただ、McAfeeから声明がでており、この問題は昨年解決しているとのこと(修理に出したこのパソコンは昨年購入したもので運悪くタイミングが被っていた)。そのため、今の人は恐らく困らないだろう。
私の解決方法としては過去にMcAfeeに苦汁を飲まされたこともありMcAfeeを削除した。

https://qiita.com/shunsho/items/586424dc5536c195dbed

McAfeeを消したくない場合は以下からスキャンを無視するファイルとして追加する必要がある。
My Protection > Real-Time Scanning > Excluded Files > Add File
無視するファイルは以下の場所にある。
C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code
## 参考文献
https://stackoverflow.com/questions/75931344/vs-code-is-not-responding-slow-startup-and-unresponsive-even-with-extensions-d

https://github.com/microsoft/vscode/issues/178962
react-markdown使用時にJestでテスト実行すると"Must use import to load ES Module"のエラーが出る

# はじめに
react-markdownを使用したコンポーネントに対して、**Jestでテストを実行すると"Must use import to load ES Module"のエラー**が出ました。

**react-markdownはESMで提供されていますが（v7以降）、CommonJS の形式で読み込まれてテスト実行されてしまっている**と思われます。
# 解決方法
テスト時にreact-markdownをモック化しました。
```Test.tsx
jest.mock("react-markdown", () => (props) => {
  return <>{props.children}</>;
});
```

# おわりに

Jestの設定をいじることでESMを扱う方法もあります。
（私はうまくいきませんでした。）

https://zenn.dev/t_yng/scraps/d701cdae1071fd

# 参考

https://github.com/remarkjs/react-markdown/issues/635
WIndows+GnuradioでHackRF One使うための初期設定

## radiocondaのインストール
こちらに従ってインストール。
Gnuradioを動かすためのいろいろがまとめてインストールできます。
今回は楽をしたいのでこちらを使います。
https://github.com/ryanvolz/radioconda#additional-installation-for-device-support
自身のOSに合わせてインストーラをダウンロードして実行します。
このとき、既にAnacondaがインストールされていてもそのままで問題ないそうですが、私の環境だとかなり古いAnacondaが導入されていたので、念の為事前にアンインストールしておきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118586/09852bb1-16ac-935d-fcf4-c9096535aa79.png)

## Zadigを使ってHackRF One のドライバーをインストール
こちらに従ってドライバーインストール。
https://github.com/pbatard/libwdi/wiki/Zadig
まず、Zadigをダウンロードし、実行する。
HackRF OneをPCにUSB接続し、ZadigのドロップメニューからHackRF Oneを選択する。
ドロップメニューになにも表示されない場合は、Options>List All Devices にチェックを入れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118586/ac2ed20d-e310-b95e-3a01-e4245ee4f059.png)
ドロップメニューからHackRF Oneを選択したら、Install WCID Driverをクリックする。

## 起動してみる
WindowsのスタートメニューにGnuradioが現れたので、こちらをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118586/ac467296-d304-bb14-120d-93f3bb6ba2c8.png)
すると、ちゃんと起動しました。
画面右側にはHackRF Oneで入出力を行うための、OsmoSDRという機能ブロックが追加されていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118586/14f4795c-e066-5a0f-0c56-27ef950bbefc.png)
NFCを使ってみる

# はじめに
[ファームウェアのアップデート](https://qiita.com/AkimotoMasane/items/ded2e5ee1b5058bfadf9)を行うことができたので、
今回は、ISO/IEC 14443 TypeAとISO/IEC 15693の検出を行ってみたいと思います。

# 使用機器
PN5180 NFC RFセンサーモジュール
NFC ISO 14443 TypeA
ISO/IEC 15693

:::note info
PN5180 NFC RFセンターモジュールを購入したときに付属している
キーホルダー型のNFCがISO/IEC 14443で、カード型のものがISO/IEC 15693のようです。
:::

# 接続
NFCタグを読み取るためには5Vの接続も必要となります。

![接続.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148400/db4636e0-f506-3312-5075-96dfb87abc1c.png)

# 手順
NFCにアクセスする手順は、NXP社で公開さている
[アプリケーションノート](https://www.nxp.jp/products/rfid-nfc/nfc-hf/nfc-readers/full-nfc-forum-compliant-frontend-ic:PN5180#design-resources)
AN12650.pdf
4.1 ISO/IEC 14443
4.2 ISO/IEC 15693
に従って通信を行えばNFCを検出することができます。

### ISO/IEC 14443
アプリケーションノートのwaitForCardResponseで行っていること。
カードの存在を確認するために、
sendSPI(0x09, 0x07, 0x26)
でREQA（Request Command）をカードに送っているそうです。
カードからはREQAコマンドに対して、ATQA（Answer To Request Type A）という応答があるので、それを待っているようです。
レジスタリードコマンドで、IRQ_STATUSレジスタ（アドレス：0x02）を読み出して、ATQAの応答があったのか確認しています。

### ISO/IEC 15693
アプリケーションノートの下記の処理で行っていること
```C
for (SlotCounter = 0; SlotCounter < 16; SlotCounter++)
{
    if (CardHasReponded)
    {
        sendSPI(0x0A, 0x00);
        readSPI(UIDbuffer);
    }
}
```
レジスタリードコマンドで、RX_STATUSレジスタ（アドレス：0x13）を読み出して、カードからの応答を確認しているようです。
RX_STATUSレジスタの8ビットから0ビットが受信データのサイズを表しており、この値が0より大きければ応答があったと判断しているようです。
この応答のサイズ分のデータをREAD_DATAコマンドで読み出しているようです。
sendSPI(0x0A, 0x00);
readSPI(UIDbuffer);

# 参考
[NXP社](https://www.nxp.jp/products/rfid-nfc/nfc-hf/nfc-readers/full-nfc-forum-compliant-frontend-ic:PN5180#design-resources)

# 編集後記
次回は、FeliCa Lite-Sを使ってみたいと思います。
【図解】アジャイル開発とは？

![アジャイル開発とは？-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/84041551-85e1-2dce-f70c-f08d76016581.png)
![アジャイル開発とは？-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/9881d94b-b453-e743-37fe-7798cd6d06d0.png)
![アジャイル開発とは？-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/c22f2cd4-0569-9eeb-d753-33e69189b555.png)
![アジャイル開発とは？-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/f4af75c6-bb3c-89f1-009d-1f2879a58884.png)
![アジャイル開発とは？-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/901e3971-bc30-4dab-5b2f-685a820c5db4.png)
![アジャイル開発とは？-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/dc27be20-0e41-e388-5e64-b992b26cca72.png)
![アジャイル開発とは？-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/015b1527-cda2-5c52-0b2f-fc8af0de7dea.png)
![アジャイル開発とは？-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/8636edc7-8a4d-cd23-d009-54c0317151db.png)
![アジャイル開発とは？-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/69c8b9d6-71a4-248f-c498-034f0857f0f6.png)
![アジャイル開発とは？-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552881/d81ceaa7-cfb0-f2d9-e2dd-d5fcc2f35543.png)
C/C++コンパイル方法

# 前提
・mingwをインストールした状態
・Windowsのcmdで実行

# Cのコンパイル
コンパイルするとexeファイルができあがるので、-oオプションで任意のファイル名をつけると良い。
```
gcc -o [任意のexeファイル名] [コンパイルしたいcファイル名]
```
上記が通れば以下で実行できる
```
任意のexeファイル名
```

# C++のコンパイル
Cの時と同様で、gcc → g++に変わっただけ
```
g++ -o [任意のexeファイル名] [コンパイルしたいcppファイル名]
```
上記が通れば以下で実行できる
```
任意のexeファイル名
```
OpenSSH Serverに公開鍵を転送しよう

## 前書き
今回初めてQiitaに公開をさせて頂きます。拙い知識ですがどなたかの参考になれれば幸いです。

### 環境について

クライアント　MacOS Sonoma 14.5
サーバー側　Ubuntu Desktop 24.04　LTS

# クライアント側での準備

まずはSSH Keyの作成をする必要があります。ターミナルを開いて下記のコマンドを入力してください。

```
ssh-keygen
```
保存するファイル名や場所、パスフレーズと順番に聞かれて公開鍵と暗号鍵が生成されます。
下記のような表示がされたら成功です。
```
The key's randomart image is:
+--[ED25519 256]--+
|      ++oo .     |
|     ...= *      |
|      .* B.o   . |
|      ..=o.     o|
|      o S.o  . + |
|     . B.= .. + .|
|      = E.=..  o |
|       ..oo@  .  |
|        .+*.*o   |
+----[SHA256]-----+
```
```
ls ~/.ssh
```
と叩くと
```
id_*     //こちらが暗号鍵
id_*.pub　　　　　　//こちらが公開鍵
```
の二つのファイルが生成されていることが分かります。このうち公開鍵であるid_*.pubファイルをサーバーに転送します。

# サーバー側での準備

まずopenssh-serverがインストールされていることを確認してください。ここから先はインストールされているものとして続けます。
```
sudo vi /etc/ssh/sshd_config
```
中身の下記の#を外して有効化してあげてください。
```
# Port 22　　　　　　　　// ポート番号　デフォルトのまま
# PasswordAuthentication yes　　　　　　　　//パスワードログインの許可
```
できたらsshdを再起動して設定を反映します。
```
sudo systemctl restart sshd
```

# 公開鍵の転送
クライアントに戻ります。

```
ssh-copy-id -i .ssh/id_*.pub [username]@[相手のIPアドレス]
```
これでサーバーに公開鍵が送られました。
以上になります。お疲れ様でした。

# 補足
https://qiita.com/MitsukiYamauchi/items/50ef7db5657cd74dc700

とても参考にしました。ありがとうございます。

## 補足の補足
sudo systemctl restart sshdで起動できなかった時
```
systemctl list-unit-files | grep ssh
```
でサービスの名前を確認します。きっとsshdな筈。
```
systemctl status sshd
```
enableか確かめる。
CloudFormationの!Ref と!GetAtt

## この記事の対象者
CloudFormationを使い始めたばかりの初心者
## !Refとは？

!Refは、CloudFormationテンプレート内で他のリソースやパラメータを参照するための関数

#### !Refの主な用途と特徴

1. **パラメータの値を参照する**
   - パラメータ値の参照には常に!Refを使用

2. **リソースの基本的な情報を取得する**
   - リソースID
   - リソース名
   - 一部のリソースの基本的な属性（例：EC2インスタンスIDなど）

#### ポイント

- !Refは、パラメータとリソースの両方に対して使用できる
- リソースに対して使用した場合、通常はそのリソースを一意に識別する値（多くの場合、IDや名前）を返す
- パラメータに対して使用した場合、そのパラメータに設定された値を返す

## !GetAttとは？

!GetAttは、CloudFormationテンプレート内で特定のリソースの属性値を取得するための関数

#### !GetAttの主な用途と特徴

- リソースの詳細な情報（IPアドレス、ARN、エンドポイントなど）を取得する
- より詳細なリソース属性（例：EC2インスタンスのプライベートIP、パブリックIP、DNS名など）を取得する

#### 使用形式
形式：`!GetAtt 論理ID.属性名`
例：`!GetAtt MyEC2Instance.PrivateIp`

#### ポイント
- !GetAttはパラメータには使用できません。リソースにのみ使用可能
- 使用する際は、参照したいリソースの論理IDと、取得したい特定の属性名を指定する必要がある


## 使用例

### 1. !Refと!GetAttの組み合わせ使用

`!Ref`を使ってElastic IPをEC2インスタンスに関連付け、`!GetAtt`を使ってElastic IPのパブリックIPアドレスを取得する例:

```yaml
Resources:
  MyEC2Instance:
    Type: AWS::EC2::Instance
    Properties:
      InstanceType: t2.micro
      ImageId: ami-0c55b159cbfafe1f0
  MyEIP:
    Type: AWS::EC2::EIP
    Properties:
      InstanceId: !Ref MyEC2Instance

Outputs:
  InstanceId:
    Description: The ID of the EC2 instance
    Value: !Ref MyEC2Instance
  
  PublicIP:
    Description: The public IP address of the EC2 instance
    Value: !GetAtt MyEIP.PublicIp
```

### 2.EC2インスタンスのプライベートIPを取得
MyEC2Instanceが論理ID、PrivateIpが属性名の例:
```yaml
Resources:
  MyEC2Instance:  # 論理ID
    Type: AWS::EC2::Instance
    Properties:
      InstanceType: t2.micro
      ImageId: ami-xxxxxxxxxxxx

Outputs:
  PrivateIP: 
    Description: Private IP of the EC2 instance
    Value: !GetAtt MyEC2Instance.PrivateIp
```

### 3.RDSインスタンスのエンドポイントを取得
`MyDBInstance`が論理ID、`Endpoint.Address`が属性名の例:
```yaml
Resources:
  MyDBInstance:  # 論理ID
    Type: AWS::RDS::DBInstance
    Properties:
      Engine: mysql
      MasterUsername: admin
      MasterUserPassword: password123
      DBInstanceClass: db.t3.micro

Outputs:
  DBEndpoint:
    Description: Endpoint of the RDS instance
    Value: !GetAtt MyDBInstance.Endpoint.Address
```
## まとめ

!Refは主にパラメータの値やリソースの基本的な情報を取得するのに使います。
!GetAttはリソースのより詳細な属性情報を取得するのに使います.


## 参考

[!Ref](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference-ref.html)のドキュメントでは下記の通りになっています。
>組み込み関数 Ref は、指定したパラメータまたはリソースの値を返します。AWS::LanguageExtensions 変換 変換を使用するとき、組み込み関数を Ref と Fn::GetAtt のパラメーターとして使用できます。
パラメータの論理名を指定すると、それはパラメータの値を返します。
リソースの論理名を指定すると、それはそのリソースを参照するために通常使用できる値を返します (物理 ID)。
組み込み関数を指定すると、その関数の出力を返します。
テンプレートでリソースを宣言するときに別のテンプレートリソースを名前で指定する必要がある場合は、Ref を使用して別のリソースを参照できます。一般的に、Ref はリソースの名前を返します。たとえば、AWS::AutoScaling::AutoScalingGroup の参照は、Auto Scaling グループリソースの名前を返します。
一部のリソースでは、リソースのコンテキストにおいて別の重要な意味を持つ識別子が返されます。たとえば、AWS::EC2::EIP リソースは IP アドレスを返し、AWS::EC2::Instance はインスタンス ID を返します。


[!GetAtt](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/intrinsic-function-reference-getatt.html)のドキュメントでは下記の通りになっています。
>Fn::GetAtt 組み込み関数は、テンプレートのリソースから属性の値を返します。AWS::LanguageExtensions 変換 変換を使用するとき、組み込み関数を Fn::GetAtt のパラメーターとして使用できます。特定のリソースに対する GetAtt の戻り値の詳細については、「リソースとプロパティのリファレンス」でそのリソースのドキュメントを参照してください。
yukicoder No.69 文字を自由に並び替え　解説

[問題文](https://yukicoder.me/problems/no/69)

# 解説
まず、同じ文字を組み合わせてできた別の単語があったとする。これらは$A$と比較した結果が同じになるだろう。順番は気にしてないのだから。
つまり、$B$は自分の都合のいいように並び替えても問題がないといえる。
では、今回の場合どうすれば都合がよくなるか、それは**昇順ソート**である。
$A$と$B$を事前に昇順ソートしてしまえば後は$A$と$B$が一致するかという問題に帰着する。

# C++での解答例
```C++
#include <bits/stdc++.h>
using namespace std;

int main(){
  string a,b;cin>>a>>b;
  sort(a.begin(),a.end());
  sort(b.begin(),b.end());
  cout<<(a==b?"YES\n":"NO\n");
}
```
よきメンターになろう：ネタに困らない1on1

## はじめに

ITエンジニアの仕事ってなんでしょう？

パソコンに向かってカタカタプログラムを書くことかと思われがちですが、それは作業のほんの一部であり、それ以外の作業が大半を占めています。

顧客がほしいのは「プロダクト」であり「プログラム」ではないからです。

プログラムのこともプロダクトのことも全く分からない顧客が、ビジネスや業務視点で「こんなことをしたら儲かるな」とか「こんなことをしたらコストを下げられるな」とか考えたものを形にしていくのが「プロジェクト」であり、ITエンジニアの仕事です。

## プロジェクトを進める上で重要なスキル

以下の X のポストが分かりやすいので引用します。

https://x.com/hpeo_jp/status/1507967844814065666

プロジェクトには立場や知識や利害関係が異なる多くの人が関わります。

例えば、営業の人は、プログラムは全く分かりませんが開発案件を取ってきたりプロダクトを売ったりしなければいけません。
そうすると、営業Aが『すべて「できます！」』と答えてしまうことも理解できます。

一方で、開発責任者は、やっぱりプログラムは全く分かりませんが[^1]、開発メンバーのハンドリングがどのくらい大変なのかはざっくり分かっています。その上で開発案件はほしいです。
そうすると、プロSES事業の開発責任者Fがプロジェクト炎上の覚悟をしつつも黙って話を聞くというスタンスを取るのも分かります。

議事録を書いている開発担当Eは、初歩的なプログラムしか分からず、工数やスケジュールを考えてパニくっているかもしれませんし、営業Aの言葉は引っ込められないのでワークアラウンドを考えた挙げ句に「技術的には可能」と書くかもしれません。

開発担当Dは、やっぱりプログラムが全く分からない未経験エンジニアで全く議論についていけないけれども、その場のおかしな空気だけは察知して半笑いをしているかもしれません。

そんな感じ（？）で、プロジェクトを進める上では「プログラミングスキル」よりも「コミュニケーションスキル」が大事になってきます。
営業Aが『すべて「できます！」』と答えた **要件全てを予算内で作り切り障害なしを保証できるスキル** があれば技術的には可能かもしれませんが、現実的には難しいと思います。

ビジネスや業務視点では、**本当に必要なもの**を必要なタイミングでリリースできることが大事です。
それを適切に着地させるためには「**立場や知識や利害関係が異なるプロジェクトメンバーとコミュニケーションを取ること**」が重要になってきます。

逆に言うと、コミュニケーションスキルがないとプロジェクトに参画することはできません。
作業員として指示に従いプログラムを製造することはできますが、変えのきく人材枠になってしまうので、**給与や単価は上がりません**し、下にメンバーを抱えるなどもできません。

## コミュニケーションスキルと1on1

ということで、全ITエンジニアが身につけるべきスキルはコミュニケーションスキルとして話を進めます。

SESのBP面談でも、スキル要件に色々書いて募集しても、最終的には「**コミュニケーションがとれて自走できる人**」を求める傾向が年々強まっているように思います。[^2]

一方で「**コミュ力がないから、なんとかして**」と言ってなんとかなった話を聞いたことはありません。
伝え方だったり話し方だったりの本[^3]が山程出ていますが、本を読むだけではコミュニケーション力が上がることはないです。
「コミュニケーション力」は楽しく会話する力ではなく、「コミュニケーション（伝達）」という単語の通り相手に伝わったかどうかが評価軸だからです。誰かに話してフィードバックをもらわないとカイゼンが難しいので、本を読むだけではなく実践もする必要があります。

ということで、ようやくタイトルの 1on1 の登場です。もっと会話しようという企画です。
1on1というと相手のキャリアのことを考えたり離職されないようにウォッチしたりを1対1で会話するという高尚な目的で実施されるも、以下のような理由で定着しない印象です。

- 話すことがない
- キャリアのことなど考えていない
- 漫然と会話しても得られるものがない

## ネタに困らない1on1

「課題図書を用意して会話をする1on1」を提案してみたいと思います。
実施要項は以下となります。

- 事前に15分程度読んでメモ書きを作成してもらう
- そのメモ書きを元にプレゼンをしてもらう
- プレゼンに対してフィードバック、議論

ポイントは「事前に15分読み書き」があることです。
15分読み書きを継続することで基礎的な日本語力が向上します。また、議論の対象が明確なためポイントを絞って会話ができます。

課題図書は、業務を行う上で共通認識として持てるとよいものにしておくといいでしょう。
「当然やるよね」って暗黙に思っていることをすり合わせすることもできますし、メンター側も勉強する時間が確保できるのでお互い勉強になると思います。
軌道に乗ってきたら、相手との会話の中で次の課題図書を決めていけるのがよいでしょう。

(課題図書例)

- [マンガでわかる! 入社2年目の教科書](https://www.amazon.co.jp/dp/4827211655/)
- [「あなたにお願いしたい」と言われる仕事のコツ88](https://www.amazon.co.jp/dp/4827212384)

## おわりに

**「コミュニケーションがとれて自走できる人」** になるのはとても大変です。
「コミュニケーションが取れない人」枠にカテゴライズされてしまうと、コミュニケーションを取ってもらえなくなり、そのことに気づく機会、カイゼンをする機会がなくなります。

年令が上がれば上がる程、「あの人はそういう人」と判断されるまでが早くなり、年令の割に重要な仕事を任されることもなくなります。また、そのような経歴をたどると、職務経歴書の時点で「重要な仕事はできない人」と判断されたり、カイゼンできる機会が二次関数的に減っていきます。

みんなでプロジェクトのゴールに向かってコミュニケーションを取って仲良く仕事ができる世界になったらよいなとは思うところです。

## おまけ

- [kaku3 - Qiita記事一覧](https://kaku3.github.io/workbooks/Qiita/)
ポエム多め。PM、メンター、未経験エンジニアや新卒向け記事など。

- [エンジニアのためのお仕事問題集](https://github.com/kaku3/workbooks)
2030年にIT人材が最大79万人不足するとのことで、学習用の資料をgitで無料公開してます(不定期更新)。

よろしければどうぞ。

[^1]: 個人差があります。
[^2]: それって、わたしの感想です。
[^3]: 「人は～が９割」の本、2021年時点で157冊ぐらい出ていたようです。[全157冊！「人はxxxが9割」のバリエーションから見えること](https://note.com/dhjnk/n/n9a2b134f317b)
WSL上でpbcopy,pbpasteを実現するエイリアス

### 答え

```.bashrc
alias pbcopy='powershell.exe -command "[Console]::InputEncoding = [System.Text.Encoding]::UTF8; Set-Clipboard -Value ([Console]::In.ReadToEnd())"'

alias pbpaste='powershell.exe -command "[Console]::OutputEncoding = [System.Text.Encoding]::UTF8; Get-Clipboard"'
```

### 実行結果

```
$ echo あいう🐏 | pbcopy
$ pbpaste
あいう🐏
```

### clip.exeもつかえるけどギリ使えない

以下の記事のように
https://forest.watch.impress.co.jp/docs/serial/yajiuma/1612972.html
clip.exeを使うという手もある。ただ何も設定しないとclip.exeはSJISでの入力を求めるので、日本語を渡すときにはエンコードの変換が必要。

```
echo "窓の杜" | iconv -t cp932 | clip.exe
```
とすれば、日本語も通せるが、SJISの範囲を超える絵文字を渡すとエラーになる。対応策としてuclipという別のアプリをインストールするという案内があるが、標準で入ってるものだけにしたい。

そもそも、cp932という変換が必要なのは日本語Windows縛りのエイリアスになってるので、そもそも言語設定依存のロジックにしたくない。

ということで、最初からpowershellの範囲でやればいいじゃないってことで、powershellに対してinputエンコーディングとoutputエンコーディングをUTF8を指定する形で、Set-ClipbordとGet-Clipbordを呼び出してる。

コマンドの呼び出しはMacにそろえてpbcopyとpbpasteにしている。
二次元〜多次元正規分布データの生成

昔，以下のような関数を作りました。
2次元正規分布から，k次元正規分布までに対応しています。
指定した相関係数の通りのデータを作ります。

---

## 指定された相関係数行列を持つ変数の生成

特定の相関係数行列を持つ多変量データを生成する。


```python
import numpy as np
from scipy.linalg import eigvals, inv, svd, cholesky
from scipy.stats import zscore

def gendat(n, r):
    #
    #
    def trimat(x):
        l = len(x)
        n = int((np.sqrt(1 + 8 * l) + 1) / 2)
        if l != n * (n - 1) / 2:
            raise Exception("length of vector is not just required")
        r = np.tri(n, n, -1)
        r[r == 1] = x
        r = r + r.T + np.identity(n)
        return r
    #
    #
    r = np.array(r)
    if np.ndim(r) == 0:
        r = np.array([[1, r], [r, 1]])
    elif np.ndim(r) == 1:
        r = trimat(r)
    size = r.shape
    if size[0] != size[1]:
        raise Exception("'r' must be a square matrix.")
    if any(np.diag(r) != 1):
        raise Exception("some diagonal of 'r' is not 1.")
    if any(np.ravel(r != r.T)):
        raise Exception("'r' is not a symmetry matrix.")
    if any(abs(np.ravel(r)) > 1):
        raise Exception("some element of 'r' is not in a range [-1, 1].")
    if any(eigvals(r) <= 0):
        raise Exception("'r' is not positive definite.")
    x = np.random.randn(n, size[0])
    x = zscore(x, ddof=1)
    r2 = np.corrcoef(x.T)
    solver2 = inv(r2)
    vec, val, junk = svd(r2, full_matrices=False)
    coeff = solver2 @ (np.sqrt(val) * vec)
    z = x @ coeff @ cholesky(r)
    return z

```



## 使用法

gendat(n, r)

## 引数

n サンプルサイズ
r 1 個の相関係数または相関係数行列またはその下三角行列のベクトル

## 戻り値

データ行列

## 使用例

### 2 変数データの生成

第 2 引数に，1 個の相関係数を指定する。


```python
a = gendat(10,0.5)
print(np.corrcoef(a, rowvar=False))
```

    [[1.  0.5]
     [0.5 1. ]]


### 3 変数以上のデータ生成

#### 下三角行列をベクトルで与える場合


```python
x = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6]
a = gendat(10, x)
print(a)
print(np.corrcoef(a, rowvar=False))
```

    [[-0.53063107  1.03494526  1.07697067  0.6647251 ]
     [ 1.80820393  0.84075517  0.63006879  1.3337293 ]
     [ 1.02865631  0.20310229 -0.9718502   0.256431  ]
     [-0.87312874  0.19745704 -1.60090653 -1.95769795]
     [ 0.99255704 -1.68064095  0.80260234 -0.80927951]
     [-1.19798238 -1.86824642 -1.06679755 -0.86365449]
     [-1.08642493  0.51215329  1.02922946  0.65986376]
     [-0.08134605  0.51709947 -0.2893305  -0.46295722]
     [ 0.06823093 -0.24408027 -0.48852991  0.84976087]
     [-0.12813504  0.48745513  0.87854342  0.32907914]]
    [[1.  0.1 0.2 0.4]
     [0.1 1.  0.3 0.5]
     [0.2 0.3 1.  0.6]
     [0.4 0.5 0.6 1. ]]


#### 相関係数行列を与える場合


```python
r = [[1.0, 0.5, 0.4], [0.5, 1.0, 0.3], [0.4, 0.3, 1.0]]
a = gendat(2000, r)
print(np.corrcoef(a, rowvar=False))
```

    [[1.  0.5 0.4]
     [0.5 1.  0.3]
     [0.4 0.3 1. ]]



```python
import matplotlib.pyplot as plt
plt.axes().set_aspect('equal', 'datalim')
plt.scatter(a[:, 0], a[:, 1], s=9, alpha=0.3)
plt.text(1.0, -3.0, "r = "+str(np.corrcoef(a.T)[0, 1]))
plt.xlabel("x1")
plt.ylabel("x2")
```

![output_8_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/76ee1570-f069-c150-fc7c-ab2ef7c4e0d7.png)
LaravelエンジニアやDocker利用者向け、便利なMakefile集 

## 初めに
コマンドの省略をしたいときに手軽に導入できてかなり効率を上げてくれる`Makefile`のリストを記載していきます。

## Makefileのどこが便利なの？🤔
例えば
```
docker compose up -d
```
のようにコマンドを打たなくても、設定さえしておけば

```
make up
```
で同じことができます！
※コマンドが長ければ長いほどスペルミスが起きやすかったりもするのでありがたみが増します！

## Makefile集
以下のファイルをルートディレクトリ直下に設置
```: Makefile
build:
	docker compose build

nbuild:
	docker compose build --no-cache

up:
	docker compose up -d

down:
	docker compose down

api:
	docker-compose exec api bash

rapi:
	docker-compose exec -u root api bash

wlog:
	docker-compose logs web

alog:
	docker-compose logs api

dls:
	docker container ls
```
DR戦略まとめ

## はじめに
今回はSAPを学習していくなかでごちゃごちゃになっていたDR戦略についてまとめてみました。

## 記事の対象者

- AWS初学者
- SAA、SAPを取ろうと思っている方

## DR目標
- 目標復旧時間（RTO）：サービスの中断からサービスの復旧までの最大許容遅延時間。これによりサービスのダウンタイムの許容可能な期間が決まります。
- 目標復旧時点（RPO）：最後のデータ復旧ポイントからの最大許容時間。これにより許容できるデータの損失とみられるものが決まります。
実際の試験でもこの2つの目標を要件にして出題されることがあります。

## DR戦略
### バックアップと復元
本番環境を別リージョンにバックアップする。バックアップからのデータリカバリに加えてリカバリリージョンに本番環境を復元する。
![バックアップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812406/76c6ad98-f9ed-4953-dbd5-4144d147e5b1.png)


### パイロットライト
稼働している環境とは別で停止している環境を別リージョンに用意しておいて、障害発生時にそれらを立ち上げる。
![パイロットライト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812406/c9ce5f7b-736a-23da-c625-e1ab5984d388.png)


### ウォームスタンバイ
稼働している環境の一部を待機系として別リージョンに用意して、障害発生時には非同期の待機系から稼働系と同じ環境を立ち上げる。
![ウォームスタンバイ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812406/22f3b712-92f6-fe78-71b2-73b3c424528c.png)


### マルチサイトアクティブ/アクティブ
２つ以上のリージョンに稼働する環境を立ち上げてデータをレプリケートする。障害発生時でも片方のリージョンにルーティングする。
![マルチサイト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812406/c02b3702-b5ba-b60c-6fb7-b385ce5519c1.png)



## DR戦略各パターン
上記の戦略をRTO、コスト、簡単なタスクで見てみます。
|DR戦略|RTO|RPO|コスト|タスク|
|--|--|--|--|--|
|バックアップと復元|数時間|数時間|💰|スナップショット|
|パイロットライト|数十分|数十分|💰💰|リードレプリカ|
|ウォームスタンバイ|数分|数分|💰💰💰|Iac|
|マルチサイトアクティブ/アクティブ|ほぼゼロ|ほぼゼロ|💰💰💰💰|DynamoDBグローバルデータベース|

## 参考資料
[AWSのDR対策の4パターン](https://self-edifying.com/aws/aws-001/)
[クラウド内の災害対策オプション](https://docs.aws.amazon.com/ja_jp/whitepapers/latest/disaster-recovery-workloads-on-aws/disaster-recovery-options-in-the-cloud.html)
[DR戦略の定義](https://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/strategy-database-disaster-recovery/defining.html)

## 最後に
DR戦略は試験の中でもほぼ確実に問われます。改めてまとめてみて、各戦略のタスクが明確になりました。
またこれらの災害復旧のソリューションをうまく選定することで、災害や障害に対する対応力やビジネスの持続性を高めることができると思います。
楕円形に分布する乱数を生成する

他人に PCA（主成分分析）などを説明する際に、いつも「楕円形に分布する乱数を作りたいなぁ」と思う。
あるあるですね。

でもその度に毎回

* 各軸がガウス分布に従う２次元の変数だから、numpy.random の multivariate_normal か
* cov ってなんだっけ・・・、あ、共分散行列か
* 作りたい形の共分散行列ってどうやって作るんだよ・・・
* （適当な値の cov をつっこむ）"covariance is not symmetric positive-semidefinite." いやまぁそうだろうけどね

となって、途方に暮れる。

なので、ちゃんと作って見た。

# 関数

```python
from numpy.random import Generator, default_rng
from numpy.typing import NDArray

def generate_random_ellipse(
    corrcoef: float,
    degree: float,
    size: int,
    seed: int = 12,
) -> NDArray:
    """楕円形に分布する２次元の乱数を生成する。

    Args:
        corrcoef (float):
            生成する乱数の、角度を回転させる前の相関係数。
            楕円の平べったさになる（回転した後の相関係数はこの値とは異なる）。
            0 だと真ん丸で、1 だと平べったい。
        degree (float):
            楕円の長径の x 軸との角度。
        size (float):
            乱数の個数。
        seed (int):
            乱数シード。

    Returns:
        NDArray: (size, 2) の行列
    """
    rng: Generator = default_rng(seed)
    x: NDArray = rng.normal(loc=0, scale=1, size=size)
    y: NDArray = rng.normal(loc=0, scale=1, size=size)
    z: NDArray = corrcoef * x + (1 - (corrcoef**2)) ** 0.5 * y
    d: NDArray = np.concatenate([x.reshape(1, -1), z.reshape(1, -1)], axis=0)
    rad: float = np.deg2rad(degree - 45)
    m: NDArray = np.array(
        [[np.cos(rad), -np.sin(rad)], [np.sin(rad), np.cos(rad)]]
    )
    return np.dot(m, d).T
```

相関のある２つの疑似乱数の生成は、[こちら](https://qiita.com/horiem/items/30a8783604ae67cdd63e)を参照させていただきました。
上記で楕円形の乱数を発生させて、それを回転させているだけ。

# 使ってみる

例えばこんな感じで生成します。

`x: NDArray = generate_random_ellipse(corrcoef=0.8, degree=70, size=1000)`

するとこんなのが出来ます。

![20240803_141256.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84885/27fe0f3d-72f0-06f7-2fa1-7cc6addca07c.png)

もういつでも楕円形に分布する乱数が作れますね！

# ちなみに

作った乱数の相関係数は、もちろん指定した値とは変わってしまいます。

```
>>> np.corrcoef(x, rowvar=False)

array([[1.        , 0.63088707],
       [0.63088707, 1.        ]])
```

そしてこの乱数の共分散行列は以下。

```
>>> np.cov(x, rowvar=False)

array([[0.38510963, 0.49677686],
       [0.49677686, 1.61003414]])
```

これを numpy.random の multivariate_normal にあげれば、同様の乱数が作れます。

```python
rng: Generator = default_rng(12)
x2: NDArray = rng.multivariate_normal(
    mean=np.array([0, 0]),
    cov=np.array([[0.38510963, 0.49677686], [0.49677686, 1.61003414]]),
    size=1000,
)
```

![20240803_141852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/84885/d4c0fa59-8e05-f9e9-f226-2ba9c73a98af.png)
量子化したLLMを低GPUリソースでfinetuningする

# 本記事の構成
関連キーワードを列挙して、最後の最後にタイトルへのアンサーをする流れになってます。

### ・QLoRA
量子化したLLMをfinetuningするためのLoRA。

### ・bitsandbytes
HuggingFaceがサポートする、LLMを量子化するライブラリ。シンプルで高速。
量子化手法は他にもAWQやGPTQがある。精度はAWQやGPTQの方が高いが量子化に時間がかかる

### ・PEFT
LLMをLoRAでfinetuningするためのライブラリ

### ・使用するメモリに関するtips
モデルそのもののデータ量以外にも、トレーニングで使う文章もメモリを食う。しかし使用しているメモリのほとんどはモデルそのもののデータによるものである。

### ・バッチサイズ
一度に処理するデータの数。一個ずつやってたらキリがないから複数個ずつ処理する。増やすと早くなるが、必要なメモリサイズは大きくなる。

### ・device_map = "auto"
分散処理手法。例えばGPU8台で140GBのモデルを学習するなら、一個あたり17.5GB分の処理が自動で割り当たる。しかし並列処理ではないので、1台が使われている時に残りの7台は順番待ちをしている。

### ・DDP（Distributed Data Parallel）
分散処理手法。全てのGPUにフルのLLMをロードし、学習をそれぞれ同時処理する。速いが、フルモデルをロードできるだけのGPUメモリが必要。

### ・FSDP（Full Shared Data Parallel、開発元：Meta）
分散処理手法。device_map = "auto"とDDPのいいどこどり。つまり、モデルを分割してロードしつつ並列処理を行う。コンパクトかつ速い。
でも、モデルを分割する処理するために最初にGPUへフルモデルをロードする必要があったため、結局大きめのGPU必要じゃんってなった、というプチトラブルを乗り越えて構築完了したらしい。
FSDPをtransformers,accelarate,PEFTの生態系に適応させることに成功しました。

### ・Gradient Checkpoint
一部のデータで処理した結果を保存して、次のデータで処理をして、結果保存して、を繰り返す手法。バッチ処理が可能になる。

### ・CPU offloading
使用してない重みデータをCPUに保存しておく手法。GPUリソース使用量を抑えられる。

### ・Flash Attention 2
CUDAで効率的にアテンション計算する手法。アテンション計算では、入力データのどこに注目するべきかを計算。データそのものをいじるのではなく、データのどこに注目すべきかというデータを追加するイメージ。

### ・AWQとLora
現在、AWQで量子化したLLMをLoRAでfinetuningすることはできないっぽいです。

# ・上記を総合すると、、、
QLoRA（PEFT）とFSDPを使うと、量子化された70BのLLMを低GPUリソースでfinetuningできそう！
でも量子化方法はGPTQやbitsandbytesに限るよ、って感じですかね。
プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦！～WEBデザイン～

## はじめに
　　この記事は、以下の記事の続編です。まだ読んでいない方は、ぜひ先にこちらの記事をご覧ください。
<br>

[プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦！ ～企画～](https://qiita.com/CatLogic_Blue/items/0f3048af85afb117828c)
[プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦！～設計～](https://qiita.com/CatLogic_Blue/items/f6d8b369e7f971eed3d9)
[プロジェクト運営・設計から運用まで学ぶための個人開発に挑戦！～さくらのレンタルサーバー～](https://qiita.com/CatLogic_Blue/items/5e0584c0ba9559f9c316)
<br>

この記事では、前回の内容を引き継ぎ、WEBデザインのまとめを記載します。

## WEBデザインについて
####  参考にした書籍

　本業はサーバーサイドが中心のエンジニアなので、WEBデザインはよくわかりません。ですので、以下の書籍を参考にしております。<br>
    
[いちばんよくわかるWebデザインの基本きちんと入門](https://amzn.asia/d/04uBKJki)

　書籍名に入門という文言が記載されているだけあり、WEBデザインについてわかりやすいです。

#### デザインの素材　

　サイトを遊び心満載かつカッコよくしたいので、フリー素材を探しました。
　商業目的で開発しているわけではないですが、今後の活動のために商業フリー、著作権フリーの素材サイトを探しました。

[写真・Ai画像のフリー素材なら「ぱくたそ」オフィシャルサイト](https://www.pakutaso.com/)

　他には、自分が趣味で風景写真を撮っているので、それを加工しました。

#### 素材加工ツール
　特別なツールは使っておりません。
　私のPCはWindows11で、元々入っていたツールの「ペイント３D」で加工してます。

#### ペイント３Ｄの加工技術
　　今回は素早くサイトを作りたいため、手の込んだことは実施しておりません。<br>
    ・クリックボタンを作成するために、素材から形を切り取る方法
    ・背景を切り抜く方法
    ・素材に文字を入れるため、見やすくする方法
    ・文字入れ
    ・背景透明化
    
 実施方法は、後ほど別個の記事に上げさせていただきます。

#### サイトの色
　ちょうど紫陽花の時期ということもあり、これから夏に向かうタイミングにぴったりな「青」を中心としたサイトデザインを考えました。私自身も「青」が好きな色でもあり、この色をメインにすることで、個性と季節感を同時に表現できると感じています。

#### ロゴについて
　WordPressでは、サイトの外観をカスタマイズするためにアイコンを設定する箇所があります。アイコンはサイトの第一印象を左右する重要な要素ですが、過度にこだわりすぎるとセンスの低さが目立ってしまうこともあります。そのため、シンプルなデザインを貫くことが大切です。

　特に、着物に関するサイトですので、日本らしい文字やデザインを取り入れることで、サイト全体の雰囲気を引き立てることができると考えてます。日本の美意識は「侘び寂び」や「簡素美」に重きを置くため、シンプルなアイコンはそのコンセプトと合致すると考えます。


 ![和残新ロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646863/a9f5dd33-a585-a8be-1fac-ce7df055610f.png)
<br>
<Br>
WEBデザインを意識した作業は以上です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
今回はWEBデザインの作業をまとめてみました。
こちらの作業時期は7月の２週間あたりまで。

次回は、WordPressについて記載します。
70歳の挑戦... 普通のESP32-S3-DevKit-Cにカメラを外付けしてみました

　今回はカメラインターフェイスの無い普通のESP32-S3ボードに、OV2640を外付けして<a href="https://github.com/Freenove/Freenove_ESP32_WROVER_Board/tree/main/C/Sketches">Sketch_06.1_CameraWebServer</a>を試してみました。使用したのは以下です。
 
 ![外付けカメラ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3189926/90e7cc30-a444-10ce-78f6-ef6efd0d0063.jpeg)
 
    １．FPC/FFC 24ピン フラットケーブル ⇒ ピンヘッダ 変換基盤（Amazonで3枚組を購入）
    ２．ESP32-S3-DevKit-C（Arduino IDE 2.3.2 では "ESP32S3 Dev Module"）
    ３．USB DC-DC昇圧コンバータ（Amazonで2個組を購入）

OV2640フラットケーブルのピンアサインをネットで探しました。

|camera_pins define|ESP32-S3|フラットケーブル(変換基盤) NO.と役割|
|--------|---|--------------------------------|
|||1 NC|
||GND|2 AGND|
|SIOD|4|3 SDA|
||3.3V|4 AVDD(2.8V/3.3V)|
|SIOC|5|5 SCL|
|||6 RESET|
|VSYNC|6|7 VS|
|||8 PWDN|
|HREF|7|9 HS|
||外部電源から1.2V|10 DVDD(1.2V~1.8V?)|
||3.3V|11 DOVDD(2.8V/3.3V)|
|Y9|16|12 D9|
|XCLK|15|13 MCLK|
|Y8|17|14 D8|
||GND|15 DGND|
|Y7|18|16 D7|
|PCLK|13|17 PCLK|
|Y6|12|18 D6|
|Y2|11|19 D2|
|Y5|10|20 D5|
|Y3|9|21 D3|
|Y4|8|22 D4|
|| |23 NC|
|| |24 NC|

1.2Vや2.8Vが必要ということですが、2.8Vはボードからの3.3Vを使用し、1.2Vは昇圧コンバータを使用しました（電圧印加は自己責任でお願いします）。
　PSRAMは使えないようなので、ArduinoIDE2.3.2のToolsの設定は次のようにしました。他はデフォルトです。
 |Tools|
 |-----|
 |8MB(64Mb)
 |Huge APP|
 |OPI PSRAM|
 
![ESP32S_Cam.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3189926/4067ed94-8467-0200-5f0c-2be71acfc4a3.jpeg)

![192.168.0.3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3189926/7f631cb3-640f-a4b9-79c0-46e42b3cf881.jpeg)

調子が良ければ解像度は「800x600」も出来るようです。Arduino のスケッチ全体は冒頭のサイトのものをそのまま使っていますのでここには載せません。"camera_pins.h"の使った部分のみ次に示します。

```html:camera_pins.h
//#include "camera_pins.h"

//#define CAMERA_MODEL_ESP32S3_EYE // Has PSRAM

#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM -1
#define XCLK_GPIO_NUM 15
#define SIOD_GPIO_NUM 4
#define SIOC_GPIO_NUM 5

#define Y2_GPIO_NUM 11
#define Y3_GPIO_NUM 9
#define Y4_GPIO_NUM 8
#define Y5_GPIO_NUM 10
#define Y6_GPIO_NUM 12
#define Y7_GPIO_NUM 18
#define Y8_GPIO_NUM 17
#define Y9_GPIO_NUM 16

#define VSYNC_GPIO_NUM 6
#define HREF_GPIO_NUM 7
#define PCLK_GPIO_NUM 13
```
【追加情報」
　使用しているESP32S3ボードの刻印が "MON16" だったので再度"esptool"で確認しました。

 ![ESP_Flash16l.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3189926/abfbf95e-003e-c8e8-ef88-ab6ca90de3be.jpeg)

    Flash size: 16MB
    Flash type  : quad
    
とありましたので、コンパイルオプションや

 |Tools|
 |-----|
 |QIO 120MHz
 |16MB(128Mb)
 |Huge APP|
 |QSPI PSRAM|

カメラのパラメーターを

```html:
  config.xclk_freq_hz = 40000000;
  config.frame_size = FRAMESIZE_SVGA;//800x600
  config.jpeg_quality = 12;
```
と変更してみました。心なしか動作も速く安定しているように思えます。

![ESP32_OV2640.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3189926/9ad81b92-b53b-8679-a3bd-0ce11f853a6d.jpeg)

　最後まで見ていただきありがとうございました。
【JavaScript】のincludesメソッドの使用方法

## includesメソッドとは

配列や文字列に特定の要素や文字列が含まれているかどうかを確認するために使用します。このメソッドは、要素が存在する場合にtrueを、存在しない場合にfalseを返します。

## 基本的な使い方

### 配列に対するincludesメソッド

```javascript:javascript
const fruits = ['apple', 'banana', 'cherry'];

console.log(fruits.includes('banana')); // true
console.log(fruits.includes('grape'));  // false

```

### 文字列に対するincludesメソッド

```javascript:javascript
const sentence = 'JavaScript includes method';

console.log(sentence.includes('includes')); // true
console.log(sentence.includes('method'));   // true
console.log(sentence.includes('Methods'));  // false

```

知っておくと便利なメソッドの一つです。
Jetson Orin NanoとJetPack 6.0でYOLOv8.2.60を動かす

* Jetson Orin Nano 8GB
* logicool C270N
* SanDisk 64GB microSD Extreme PRO micro SDXC A2
* JetPack 6.0

## QSPI bootloaderのアップデート
※JetPack 6.0が起動できるようにQSPI bootloaderをアップデートします。

JetPack 5.1.3をSDメモリに書き込み起動します。
bootloaderアップデートパッケージをインストールし、更新します。

```
sudo apt-get install nvidia-l4t-jetson-orin-nano-qspi-updater
```

参考：https://developer.ridgerun.com/wiki/index.php/JetPack_6_Migration_and_Developer_Guide/Migrating_from_JetPack_5_to_JetPack_6/Upgrade_Orin_Nano_without_a_Linux_host

## torchのインストール
```
pip3 install --no-deps torch-2.3.0-cp310-cp310-linux_aarch64.whl
pip3 install --no-deps torchaudio-2.3.0+952ea74-cp310-cp310-linux_aarch64.whl
pip3 install --no-deps torchvision-0.18.0a0+6043bc2-cp310-cp310-linux_aarch64.whl
```

参考：https://forums.developer.nvidia.com/t/pytorch-for-jetson/72048

## その他ライブラリのインストール
```
pip3 install psutil==5.9.5
pip3 install typing_extensions==4.12.2
pip3 install tqdm==4.66.4
```

## YOLOv8のインストール
### YOLOv8.2.60をダウンロードします

* 「pypi.org」から「ultralytics-8.2.60-py3-none-any.whl」をHome直下にダウンロードします。

https://pypi.org/project/ultralytics/#files

### YOLOv8.2.60をインストールします。
```
pip3 install --no-deps ultralytics-8.2.60-py3-none-any.whl
```

## YOLOv8の動作確認
```
yolo predict model=yolov8n.pt source="https://ultralytics.com/images/zidane.jpg"
```
:::note info
検出結果は「Home/runs/detect/predict」内に保存されます（zidane.jpg）。
:::

```
yolo task=detect mode=predict model=yolov8n.pt source=0 show=True imgsz=256
```

:::note info
Jetson Orin Nano：1 frame：21.4ms（46.7fps??）
:::