OmniAICreator/Qiita-1.07M huggingface dataset:
AWSのWebサービスのロードバランサー「ALB」とは？

皆さん、こんにちは！　好きな羊の種類はサフォーク、ITエンジニアのSkyfoxです！
今回は、新人さん向けにALBを教えるために作成した資料を共有します。
この記事を読んで、ALBのイメージがつくようになれば嬉しいです！

# この記事について
### 対象者
- AWS ALBについて、概要を知りたい方

### 本記事のゴール
- ロードバランサーの意味がわかる
- ALBの概要・用途を理解する

# ALB
ALBとは、Application Load Balancerの略で、Webサービスにおける負荷分散させるロードバランシングサービスのことです。

### そもそもロードバランサーとは
ロードバランサーとは、Load（負荷）＋Balancer（バランスを保つもの）の通り、負荷を軽くするために処理を分散するもののことです。
わかりやすいよう、「あなたがWebページを見る」例で見てみましょう。
まずは、シンプルにサーバーが1台だった時の流れは以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752776/49fd2bdb-dcc2-1e5f-8777-08e351b07662.png)

- 矢印で起きている動き
    - ①ブラウザで見たいWebページをクリック
    - ②Webサーバーに「あのWebページをちょうだい」とリクエスト
    - ③Webページをブラウザに渡す
    - ④見たかったWebページが表示

上の例は、1人だけしか描いていませんが、実際は1つのWebページに多くの人がアクセスします。
アクセスが多すぎると、ブラウザからWebサーバーの通信（②と③）がたくさん発生します。　すると、Webサーバーが忙しくなり、ブラウザはWebページを受け取るのに、順番待ちが出てしまいます。　その結果、ブラウザのWebページの表示が遅くなってしまいます。
ですが、ここでWebサーバーの忙しさを解消するために、Webサーバーを複数台用意したとしても、忙しさが偏ってしまう可能性があります。

**このWebサーバーの忙しさを解消するのが、「ロードバランサー」です！**

ブラウザとWebサーバーの間に、案内人としてロードバランサーを入れることで、Webサーバーの忙しさを減らし、均一にすることができるのです。
ロードバランサーを入れた流れは、下の図のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752776/034aa5ad-abd8-f6e7-24b6-3ed1cc4c9be3.png)

:::note info
**サーバーにとってのLoad（負荷）**
サーバーにアクセスがあると、サーバーはその機器に搭載されているCPUやメモリーなどのリソースを使用し、処理をします。その結果が利用者のパソコンに送られて、指示内容がブラウザに表示されます。
負荷が高いとは、上の例でいうと、アクセスが多すぎ、ブラウザのリクエストを受け取りWebページを渡すまでの処理が遅くなっていることです。

つまり、サーバーの処理数が増えすぎ、処理が滞っている状態です。
:::

### ALBとは
では本題に戻ると、ALBとはAmazonが提供している、Webサービスにおける負荷分散させるロードバランシングサービスのことです。
詳しく書くと、HTTPやHTTPSなどの特定のプロトコルに基づいて通信を振り分けることができます。
さらに、ただ適当に振り分けるだけではなく、来たアクセスに合わせ、最適なサーバーを選んでリクエストを送ることができます。
例えば、画像が多いページは処理が早いサーバーに、データベースを使用するものはまた別のサーバーに、ALBは振り分けてくれます。

# ALBのメリット
ALBのメリットとしては以下があります。
1. **Webサイトのスピードアップ**
サーバーの負荷分散ができるので、Webページの表示が早くなり、ユーザーが快適にWebサイトを使用することができます。

2. **信頼性**
複数のサーバーを使用し、Webサイトを運営するので、もし1台のサーバーが故障しても、他のサーバーで継続することができます。
それにより、Webサイトが突然停止し、ユーザーが困ることはありません。

3. **柔軟なトラフィック管理**
特定のURLもアクセスした時、特定のサーバーに接続することができるので、細かいコントロールをすることができます。

4. **簡単なセキュリティ強化**
ALBはデータのやり取りを暗号化することができます。そのため、個人情報や機密データを安全に守ることができます。また他のAWSサービスと連携し、悪意のある攻撃からWebサイトを守ることができます。

5. **スケーラビリティ**
Webサイトへのアクセスが増えすぎたときに、ALBが自動的にアクセスを分散させるので、Webサイトが遅くならずに済みます。

#### 使用イラスト
- イラスト「Loose Drawing」
    - https://loosedrawing.com/
【AtCoder】multiset を使い方

## はじめに
筆者はsetを使って問題を解いていると、「setでは解けないぞ」となってmultisetに行きつきました。「これ使う時ありそうだな！」と思って、「multisetで解けそう」と思ったら、multisetでは中々解けなくてmapで解けたことがありました。そこで、それらの例題を通してmultisetの使い方を自分なりに考えたので記事に書こうと思いました。

## multisetが使える場面

- 重複度を考慮しての何番目かに大きい/小さい要素を取得する場合にmultisetが使える。配列を違ってソートする必要がないので、計算量的に優れている
- 要素の存在有無だけでなく、重複度も考慮したい場合にmultisetが使えるが、その場合にmapでバリューに重複度を持たせれば、multisetで書けることはmapで書けることも多い

[ABC241D - Sequence Query](https://atcoder.jp/contests/abc241/tasks/abc241_d)

```C++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
#define rep(i, n) for (int i = 0; i < (n); ++i)

int main() {
  int Q; cin >> Q;
  multiset<ll> ms;
  rep(qi, Q) {
    int t; ll x;
    cin >> t >> x;
    if (t == 1) ms.insert(x);
    if (t == 2) {
      int k; cin >> k;
      auto it = ms.upper_bound(x);
      bool ok = true;
      rep(i, k) {
        if (it == ms.begin()) { ok = false; break; }
        it--;
      }
      if (ok) cout << *it << endl;
      else cout << -1 << endl;
    }
    if (t == 3) {
      int k; cin >> k;
      auto it = ms.lower_bound(x);
      bool ok = true;
      rep(i, k) {
        if (i != 0) it++;
        if (it == ms.end()) { ok = false; break; }
      }
      if (ok) cout << *it << endl;
      else cout << -1 << endl;
    }
  }
}
```

## multisetが使えない場面

- multisetは要素の種類数は求めることができないが、重複を考慮した要素数をO(1)で取得できる
- mapはバリューに要素(キー)の重複度を保持することで、処理過程で要素の重複度を考慮できる上に要素の種類数をO(1)で取得できる。ただし、重複を考慮した要素数取得の計算量はO(N)である

例題：[典型90問034 - There are few types of elements（★4）](https://atcoder.jp/contests/typical90/tasks/typical90_ah)

```C++
#include <bits/stdc++.h>
using namespace std;
using vi = vector<int>;
#define rep(i, n) for (int i = 0; i < (n); ++i)

int main() {
  int N, K; cin >> N >> K;
  vi A(N); rep(i, N) cin >> A[i];
  
  map<int, int> mp;
  int j = 0, ans = 0;
  rep(i, N) {
    mp[A[i]]++;
    while (mp.size() > K) {
      mp[A[j]]--;
      if (mp[A[j]] == 0) mp.erase(A[j]);
      j++;
    }
    ans = max(ans, i-j+1);
  }
  
  cout << ans << endl;
}
```

## おわりに
自分がAtCoderの問題を解いてきた中で、multisetを使って解くような問題はほとんど見かけていないのですが、色々なデータ構造を知ることで問題を解く際に考えられる幅も広くなると思います。

もし間違っている箇所や補足したいことなどがありましたら、コメントをいただけますと幸いです。
tomcat 10.1。同時接続数の設定変更

Tomcat 10.1で同時接続数（同時処理できるリクエスト数）の設定を変更するには、server.xmlファイルでコネクタの設定を調整する必要があります。具体的には、<Connector>要素の属性を変更します。

#### 1. server.xml ファイルの場所
通常、server.xmlファイルはTomcatのインストールディレクトリの以下のパスにあります。

```bash
$TOMCAT_HOME/conf/server.xml
```

#### 2. コネクタの設定
HTTPコネクタの場合、以下のような設定が含まれています：
```xml
<Connector port="8080" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443"
           maxThreads="200"
           minSpareThreads="10"
           acceptCount="100"
           ...
           />
```
ここで、調整すべき主なパラメータは以下の通りです。

maxThreads: 同時に処理できる最大スレッド数（デフォルトは200）。この値を増やすことで同時接続数を増やすことができます。
minSpareThreads: 最低限確保しておくスレッド数。システムが低負荷時にでもこの数だけのスレッドが常に待機状態になります。
acceptCount: リクエストがmaxThreadsに達した後に、キューに入れることができるリクエストの数。これが超えると、新しいリクエストは拒否されます。

#### 3. 設定の例
例えば、同時接続数を増やすためにmaxThreadsを300に設定し、キューに入れられるリクエスト数を200に増やす場合、以下のように設定します。

```xml
<Connector port="8080" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443"
           maxThreads="300"
           minSpareThreads="10"
           acceptCount="200"
           ...
           />

```

#### 4. Tomcatの再起動
設定を変更した後、Tomcatを再起動する必要があります。これにより、設定が反映されます。

```bash
# Tomcatの停止
$TOMCAT_HOME/bin/shutdown.sh

# Tomcatの起動
$TOMCAT_HOME/bin/startup.sh
```

これで、Tomcatの同時接続数の設定が変更され、設定した通りに動作するようになります。
Tomcatの設定をテストおよび検証するために非常に有効な方法

JMeterを使用することは、Tomcatの設定をテストおよび検証するために非常に有効な方法です。特に、maxConnectionsのようなパラメータが適切に設定されているか、また設定が期待通りに動作しているかを確認するには、JMeterのような負荷テストツールが役立ちます。

## JMeterを使用する利点
#### 1. 負荷テスト:

maxConnectionsの設定が適切かどうかを確認するために、JMeterで複数のスレッドを使用して負荷をかけるテストを実施できます。これにより、Tomcatが指定された接続数に達した場合にどのように動作するかを評価できます。
#### 2. ストレステスト:

JMeterで非常に高い負荷をかけ、Tomcatがどの時点で性能が低下するか、または接続を受け付けられなくなるかを確認することができます。
#### 3. スループットと応答時間の測定:

maxConnectionsを含む設定が、応答時間やスループットにどのように影響するかを測定できます。これにより、実際の運用環境に最適な設定を見つけることができます。
#### 4. エラーハンドリングの確認:

過負荷時にTomcatが正しくエラーハンドリングを行っているかどうか、例えばタイムアウトや接続拒否が正しく処理されているかを確認できます。
## JMeterでの具体的なテスト手順
#### 1. シナリオの作成:

JMeterでスレッドグループを作成し、シミュレートしたいユーザー数を設定します。
HTTPリクエストサンプラーを追加し、Tomcatサーバーに対してリクエストを送信します。
#### 2. 負荷の調整:

スレッド数（ユーザー数）を徐々に増加させて、maxConnectionsに到達するまで負荷をかけます。
#### 3. レポートの確認:

テスト実行後、JMeterのレポート機能を使って応答時間、エラー率、スループットなどを確認します。
## 注意点
テスト環境が本番環境と異なる場合、JMeterの結果も異なる可能性があるため、テスト環境を本番環境にできるだけ近づけることが重要です。
負荷テストを実施する際、他のシステムやネットワークに影響を与える可能性があるため、テストの範囲と影響を事前に確認しておくことが重要です。
JMeterを使用することで、設定が適切かどうかを確実に評価できるため、maxConnectionsの調整やTomcatのパフォーマンス最適化に大いに役立つでしょう。
Tomcat。maxconectionを0にしたら、tomcat再起動失敗する理由

maxConnectionsを0に設定すると、Tomcatの起動が失敗するのは予期された動作です。これは、maxConnectionsが同時に受け付けることができる最大の接続数を定義するものであり、0に設定すると、Tomcatがクライアントからの接続を一切受け付けられなくなるため、正常に動作できなくなるからです。

通常、maxConnectionsは以下のように設定されます。

```xml
<Connector port="8080" protocol="HTTP/1.1"
           maxConnections="200"
           connectionTimeout="20000"
           redirectPort="8443" />
```
ここで、maxConnectionsの値を指定しない場合、Tomcatはデフォルトの最大接続数（通常は10000）を使用します。maxConnectionsに0を設定すると、Tomcatは接続を受け付けられず、結果的にサーバーが正しく起動しないか、即座に停止する可能性があります。

解決策
・maxConnectionsは、通常の使用で0に設定することは避けてください。代わりに、実際の負荷に応じた適切な数値を設定してください。

・Tomcatを正常に起動させるために、maxConnectionsを例えば100や200などの正の整数に設定し、再度Tomcatを再起動してください。

もし依然としてTomcatの動作に問題がある場合、エラーログ（logs/catalina.outやlogs/localhost.logなど）を確認することをお勧めします。エラーメッセージが原因解明に役立つ可能性があります。
【Vite】envファイルはあってるはずなのに Error: hoge is not defined.になってしまった時の対処法

# はじめに
viteでreactとsupabaseを用いて自分専用のログインページを作ろうとしていた。
自分のログインページってなんかかっこいいですよね。
# 結論
環境変数のプレフィックス`VITE_`をtsx側でもつける必要がある。
# 環境
- vite/5.4.2
- darwin-x64
- node-v20.17.0

# エラー内容
supabaseのurlとkeyを.envに載せていたがどうもその内容を使ってるtsxでエラーが起きる。
エラーハンドリングによるとどうも中身が空らしい
# 原因
`.env`の方では`VITE_`をつけているけど実際に使う方ではつけていなかった。

```
❌const supabaseUrl = import.meta.env.SUPABASE_URL;
⭕️const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
```

今となれば何を当たり前のことをと思うが、なぜか`.meta`が`VITE_`の役割をしてくれそうと勘違いしていた。
# おわりに
ちなみに著者は半日このエラーに悩まされ続けたので今回初めてながら執筆してみた。
もし参考になる人がいたら僕の半日は報われると思うので供養してあげてください。
Dockerボリュームを利用したMySQLデータ移植をしてみた


- 私は韓国人として、日本語の勉強とコンピュータの勉強を同時に行うために、ここに文章を書きます
- 翻訳機の助けを借りて書かれた文章なので、誤りがあるかもしれません
## 紹介

最近、Linuxサーバーに問題が発生し、MySQLデータを復元する必要がありました。幸いにも、Dockerボリュームでデータをバックアップしておいたので、それを基にMySQLコンテナを再構成することができました。この記事では、バックアップしたDockerボリュームを使用してMySQLコンテナを再構成し、データをダンプする簡単な手順を共有したいと思います。

- 写真は事件を再現するために撮った写真です。

## 状況概要
最近、運用中のLinuxサーバーに問題が発生し、MySQLコンテナが起動しない状況でした。Dockerの問題により、MySQLデータを直接ダンプしたり、正常にバックアップを進めることができない状態でした。そのため、Dockerを実行できる環境にMySQLのDockerボリュームを持ち込みました。

残る作業は、このバックアップされたDockerボリュームを利用してMySQLデータを復元し、安全にダンプファイルとして保存することでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815412/a636347a-3cdd-dd81-6981-fb3067c96909.png)

## 初めての試み
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815412/fef60666-fe8d-f866-cf33-c3b76a851308.png)
次のようにパスに直接取り込んだボリュームをマウントし、コンテナを実行するスクリプトを作成し実行しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815412/4e5fecce-055c-0212-57f8-b9aae3fdd5c9.png)

次のようなエラーが発生しました。 要約すると、 サーバーのlower_case_table_namesの値は「2」に設定されています。これはファイルシステムが大文字と小文字を区別しない場合に使用する値です。 データ辞書のlower_case_table_namesの値は「0」に設定されています。これは大文字と小文字を区別するファイルシステムで使用する値です。 つまり、設定値の不一致が原因で、MySQLコンテナが完全に実行されずに終了してしまいます。

### 理由は何だろうか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815412/44fae8e7-68f3-8fc3-e097-366178cc1649.png)

以前、私はUbuntuのファイルシステム内にDockerデーモンがディレクトリを割り当てて管理しており、その中にMySQLデータが入ったDockerボリュームが位置しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815412/6220ce8c-a96d-0b44-9690-61a3a150c408.png)

DockerのボリュームをMacに持ってきて、直接マウントしようとしました（バインドマウント）。しかし、このボリュームがmacOSのAPFSファイルシステムによって管理されることで、Linuxのext4ファイルシステムとの環境の違いが生じました。この違いにより、MySQLの設定で互換性の問題が発生し、エラーが発生しました。

https://docs.docker.com/engine/storage/volumes/

- 公式ドキュメントにもっと詳しい説明がありますので、参考にしてください！

## 2回目の試み
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815412/d7e13fb9-54d6-51bb-b8e2-c3c47aa5819f.png)

解決策として、持ってきたDockerボリュームをDockerが自動で割り当てるdockerエリアにコピーしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815412/ee4f7d38-b3df-b08f-de37-403a7566f9b4.png)
Dockerエリアでは、Dockerがディレクトリを直接管理するため、ファイルシステム間の違いによる環境問題なくボリュームのデータを活用することができました。こんな風にmysqlダンプができて幸せでした。
AtCoder 勉強記録[C++] その60

AtCoderで入茶を目指して勉強しています。
勉強を継続するために投稿を始めました。
もともとアカウントを作成していましたが、今年の4月から本格的に勉強を始めました。
一応自分用に解法を書いていますが雑です、自分で読み返して困ったら修正します。
[私のアカウント](https://atcoder.jp/users/nanami_brother)
[解いた問題](https://kenkoooo.com/atcoder/#/table/nanami_brother)
# 本日解いた問題
## B - ASCII Art
[B - ASCII Art](https://atcoder.jp/contests/abc294/tasks/abc294_b)
解答
```c++
#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using ull = unsigned long long;
using vec = vector<ll>;
#define rep(i, n) for (int i = 0; i < (int)(n); i++)
#define mod 998244353

int main() {
  ll h, w;
  cin >> h >> w;
  vector<vector<ll>> a(h, vector<ll>(w));
  vector<vector<char>> s(h, vector<char>(w));
  rep(i, h) rep(j, w) cin >> a[i][j];
  rep(i, h) rep(j, w) {
    ll tmp;
    if(a[i][j] == 0) s[i][j] = '.';
    else {
      tmp = 'A' - '0';
      tmp += a[i][j]-1;
      s[i][j] = tmp +'0';
    }
  }
  rep(i, h) {
    rep(j, w) {
      cout << s[i][j];
    }
    cout << endl;
  }
}
```
### 解法
`A[i][j]`が0以外の場合、`A[i][j]`の数値をアルファベットに変換することで結果が求まる。
技術習得や開発のモチベーションを上げる方法

# 🔧 はじめに
技術習得や開発のモチベーションを上げるため，私なりに実践したり意識していることや感じていることをまとめました．ここに書いてあることは開発度素人の完全主観ですので気に触るようなことが書かれていたら申し訳ありません．また，酒が入った状態で書いたので誤字や文法がおかしい部分もある可能性があります．ご了承ください．

# 🔧 自己紹介
初めまして．趣味でweb開発を勉強している273*(ﾂﾅｻﾝﾄﾞ) / Kei.と申します．関西の大学生です．最近はフルスタック開発やツール制作を行なっています．まだまだ初心者です．

# 🔧 本題

### ものづくりを楽しむ
- 何か作るって楽しい．曲作りやDIYなどのものづくりが好きな人は開発を楽しめると思う(重要)．

### あくまでプログラミングは課題解決の手段であることを忘れない
- 忘れがちですが，プログラミングや技術は課題解決の手段に過ぎないです．
- ~を楽にしたいとか自動化したいとか，~のようなツールを作りたい！などの目的を持っていないと正直楽しくないです．
- よって給料がいいとか，とにかくフルリモートで働けるなどのいいとこだけをみて目指すのは後々苦しくなると思う．もちろんそれしかないから目指すなというわけではありません．

### コミュニティに参加
- 技術やものづくりが大好きな同士が身近にいると，自分も頑張ろうって思える．
- 人脈を広げたり情報収集をしたり，質問をしたり．．．いいことだらけです．

### XやQiitaなどでトレンドを見る習慣をつける
- web技術は特に技術が入れ替わりが激しいです．これについていけるかも大事な気がします．私は技術大好き人間なので楽しいです．
- XやYouTubeで技術系インフルエンサー特に，海外のインフルエンサーをフォローしておくと最新情報がすぐに手に入る．
- QiitaやGitHubのトレンドを常にチェックしておく．GItHubはスマホアプリもあるのでおすすめ．

### ひたすら開発をし続ける
- 一日一時間でもPCの前に座ってGitHubの草を生やせられるように習慣化する．
- 気になる技術や用語はすぐにチェック追加．
- とりあえずやってみようの精神でやる．完璧に使いこなせる必要はない．座学より手を動かした方が身に付く．
- 分からないところは未来の自分が解決してくれると信じてとりあえず放置．
- 習慣化すると，開発以外何もできなくなるので要注意ではある．
- 休憩も忘れずに．

### 挑戦する，動く
- とにかくやってみること．行動する．

### 定期的にアウトプットをする
- GitHubやQiitaなどになんでもいいのでとりあえず作ったものや学んだことをアウトプットします．Notionでもメモ帳でも手書きノートでもなんでもいいので．
- 記録にもなるし忘れた時に見返せるのでよきです．

### 周囲と比較せず過去の自分と比較する
- 映像やデザイン界隈でもそうだが，Xとかをみていると自分よりすごい人が大量にいる．映像をやっていた頃は一時期病みそうになった．上には上がいると割り切って過去の自分と比較することでモチベーションを保つことができます．

# 🔧 最後に
普段は技術や開発系のことしか投稿していないので初めてこういった記事を書きました．たまには行動やマインド的なものをまとめてみるのもいいですね！現状はこれらを実行しているとモチベーションが上がりますし，やる気がなくなることはありません．人による部分もあると思いますが参考になったら幸いです．
最後まで読んでいただきありがとうございました．それでは！
CodeWars オススメ問題 #2

# はじめに

個人的に好きなアルゴリズム学習サイト「CodeWars」の問題をシェア。

週1くらいのペースで、全10回を目指す予定。

:::note
CodeWarsはいいぞ！の紹介は[こちら](https://qiita.com/kohki_takatama/items/2ae2808b931e943262b8)

CodeWarsの始め方は[こちら](https://qiita.com/javacommons/items/7c473cda7825ab99e08c
)
:::
# オススメ問題

https://www.codewars.com/kata/550f22f4d758534c1100025a/javascript

### 例
「東西南北に移動する時、無駄な移動を省け」という問題です。

「無駄な移動」とは、「北に行って南に行く」等です。
ただし、「北に行って東に行って南に行く」は「無駄な移動」ではありません。
```
["NORTH", "SOUTH", "SOUTH", "EAST", "WEST", "NORTH", "WEST"]

-> [West]

["NORTH", "WEST", "SOUTH", "EAST"]

-> ["NORTH", "WEST", "SOUTH", "EAST"]
```
### 難易度
分類は 5kyu です。
シンプルな解法のため、他の「複雑で例外を多く含む」5kyuと比べると簡単ですし、良問です。

# オススメの回答
「評価が高い回答」の中から、学びの多い回答をピックアップしてご紹介。

:::note warn
<details><summary>解答の方向性（ヒント）</summary>

```
1. ["SOUTH", "EAST", "WEST", "NORTH"]

-> []

2. ["NORTH", "WEST", "SOUTH", "EAST"]

-> ["NORTH", "WEST", "SOUTH", "EAST"]
```

1 では`SOUTH`と`NORTH`は隣り合っていませんが、最終的には削除されるべきです。
2 では同じ用に隣り合っていませんが、削除されるべきではありません。

この２つのケースが問題の最小単位だと思います。
</details>
:::

:::note
<details><summary>オーソドックスな解法</summary>

https://www.codewars.com/kata/reviews/551075dcaacf809d25000248/groups/5516e513a5808bc4a2000074
```js
function dirReduc(plan) {
  var opposite = {
    'NORTH': 'SOUTH', 'EAST': 'WEST', 'SOUTH': 'NORTH', 'WEST': 'EAST'};
  return plan.reduce(function(dirs, dir){
      if (dirs[dirs.length - 1] === opposite[dir])
        dirs.pop();
      else
        dirs.push(dir);
      return dirs;
    }, []);
}
```
スタック・LIFO（後入れ先出し）と呼ばれる手法です。

1. 新しいスタック（配列）を用意する
1. 入力配列の各要素を順に処理する
1. スタックが空でない場合、スタックの一番上の要素と現在の要素が反対方向（例：NORTHとSOUTH）であれば、スタックから要素を取り除く（つまり、ペアを消す）
1. 反対方向でない場合、現在の要素をスタックに追加する
1. 最終的にスタックに残った要素が、最適化された経路となる

具体的なアルゴリズムは以下

1. とりあえず`dirs`（direction: 方角 の略かつ複数形）配列に入れます
1. もし`dir`（現在扱っている方角）が`dirs`の最後と逆なら
つまり、`dir`の逆方向（`opposite[dir]`）が`dirs`の最後（`dirs[dirs.length - 1]`）と等しいなら
1. `dirs`から削除する（`pop`は最後の要素を削除するメソッド）

</details>
:::

:::note
<details><summary>正規表現 & 短い解答</summary>

https://www.codewars.com/kata/reviews/551075dcaacf809d25000248/groups/5511603aaacf8071e400087f
```js
function dirReduc(arr) {
  var str = arr.join(''), pattern = /NORTHSOUTH|EASTWEST|SOUTHNORTH|WESTEAST/;
  while (pattern.test(str)) str = str.replace(pattern,'');
  return str.match(/(NORTH|SOUTH|EAST|WEST)/g)||[];
}
```

変則手を使用し、極限まで短くした解法です。以下と同等です。

```js
function dirReduc(arr) {
  const pattern = /NORTHSOUTH|EASTWEST|SOUTHNORTH|WESTEAST/;
  let str = arr.join('');
  
  while (pattern.test(str)) {
    str = str.replace(pattern, '');
  }
  
  const result = str.match(/(NORTH|SOUTH|EAST|WEST)/g);
  return result || [];
}
```

正規表現は考えたのですが、この解答は思いつかなかった・・・！

素晴らしい点を列挙します。

- `while(pattern.test(str))`と書くことで、`for`を使うよりも簡潔に書けている
- また、`for`で条件に関わる配列を操作するとバグが発生するが、この書き方であればバグは発生しない
- `return`においても、`match`を使用することで簡潔に書けている

どれも思いつきませんでした。非常にエレガントです。脱帽。

</details>
:::


# おわりに
以上、CodeWarsオススメ問題でした。
【合格体験記】AWS Certified SysOps Administrator - Associateに合格しました(2024/08/10)【SOA-C02】

# 目次
[#1.はじめに](#1はじめに)
[#2.筆者のスペック](#2筆者のスペック)
[#3.学習内容](#3学習内容)
[#4.学習期間](#4学習期間)
[#5.試験当日](#5試験当日)
[#6.反省点](#6反省点)
[#7.あとがき](#7あとがき)

# 1.はじめに

題名の通り、AWS Certified SysOps Administrator - Associateに合格しました。

https://twitter.com/ss_IT_study/status/1822232522270384180

SOAの範囲はSAPやSCSと被ってたり、普段AWSを利用している範囲に近いという点もあり、あまり対策せず受験して一度落ちています。
2週間後にリベンジし合格することができたので、記録を残しておこうと思います。

# 2.筆者のスペック

* 大学は情報系
* SIerで10年程度勤務
* AWSの利用経験は2年程度
* AWS SAA取得済み([【合格体験記】AWS Certified Solutions Architect - Associateに合格しました(2022/11/19)【SAA-C03】](https://qiita.com/ss_IT_study/items/d14b81ea4c92ced86786))
* AWS DVA取得済み([合格体験記】AWS Certified Developer - Associateに合格しました(2023/02/23)【DVA-C01】](https://qiita.com/ss_IT_study/items/ae5e612f6f0affe7bf8a))
* AWS SAP取得済み([【合格体験記】AWS Certified Solutions Architect - Professionalに合格しました(2024/03/16)【SAP-C02】](https://qiita.com/ss_IT_study/items/3f9ba1321476e2b8bc9e))
* AWS SCS取得済み([【合格体験記】AWS Certified Security - Specialtyに合格しました(2024/06/30)【SCS-C02】](https://qiita.com/items/2cc0321223e0022e5b6e))

# 3.学習内容

①[ポケットスタディ AWS認定 SysOps アドミニストレーター アソシエイト](https://www.amazon.co.jp/%E3%83%9D%E3%82%B1%E3%83%83%E3%83%88%E3%82%B9%E3%82%BF%E3%83%87%E3%82%A3-AWS%E8%AA%8D%E5%AE%9A-SysOps%E3%82%A2%E3%83%89%E3%83%9F%E3%83%8B%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%BF-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88-%E6%B5%B7%E8%80%81%E5%8E%9F%E5%AF%9B%E4%B9%8B/dp/4798065315)

対策本です。ポケットスタディを選択した理由としては、細かい内容というよりはざっくりとしたサービスの復習をしたかったためです。
上記目的のため、全体の流し読みと問題演習だけ取り組みました。

②BlackBelt

公式リソースのBlackBeltです。
SOAの試験の中で重要なCloudFormationの復習のため、以下のオンラインセミナーを主に利用しました。

https://youtu.be/4dyiPsYXG8I?si=aSLJrO1Nq1FiqylD

③公式模擬試験

AWS スキルビルダーで公開されている公式模擬試験です。
試験直前の習熟度確認に利用しました。
実際の試験に近い形式で問題演習することができます。

④Cloud License

有償ですがとにかく問題演習で知識量を増やしたい場合は最適だと思います。

# 4.学習期間
|#|教材|期間　|
|:---|:---|:---|
|1|ポケットスタディ AWS認定 SysOps アドミニストレーター アソシエイト|5日|
|2|BlackBelt|1日|
|3|公式模擬試験|1日|
|4|Cloud License|7+14日(再受験前はこちらのみ)|

# 5.試験当日
過去の試験と同様にテストセンターを予約の上受験しました。
予約より少し早めに到着したところ、試験自体も少し早く開始できました。
一度落ちているので見直しも慎重に行い、それでも30分程度は余って退出しています。

過去のバージョンでは受験後すぐに画面上に合否が出力されたみたいですが、
私が受験した時は試験終了後即時結果が分かるわけではなく、
しばらく経ってから試験履歴が更新されました。
※ざっくりですが、10:00開始の試験を受けて19:00くらいに結果が閲覧可能になったと思います

# 6.反省点
1回目に不合格となった理由として考えたことを少し記録しておこうと思います。

* 直近でSAP、SCSに合格したためアソシエイト試験を甘く見ていた
⇒プロフェッショナルやスペシャリティに合格していても別の試験なので慢心はNGです。
* サービスの概要は理解していてもSOAレベルの内容まで理解できていなかった
⇒SOAでは2択まで絞って不正解となることが多く、細かい設定を理解する必要がありました。
* ネスペの不合格から他の資格の合格を求めて急いで受験してしまった
⇒不純な動機で無理のあるスケジュールを組んでもいいことはないですね。

# 7.あとがき
AWS SOA(SOA-C02)の合格体験記でした。
AICやMLAのベータ試験が始まってますね。気になってはいるのですが、2024秋期のプロジェクトマネージャー試験を予定しているので、そこまではAWS認定はおやすみしようかなと思います。
いつかJapan AWS All Certifications Engineersを申請してみたいですが、まだ5冠なのであと2年くらいはかかりそうです…。
【Homebrew】CaskをGUIで管理する方法

Appliteを使用することでHomebrewのCaskをGUIで管理できるようになります。

https://github.com/milanvarady/Applite

インストールするには以下のコマンドを実行します。

```terminal
brew install applite
```

以下のような画面でCaskの検索、インストール、更新、アンインストールができます。

![スクリーンショット 2024-09-03 23.56.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/6ef40e0e-e88b-4741-149b-1bff524d0d62.png)
Flask　ブラウザ上に表示


Flaskの環境構築はこちらを参照してください。
https://qiita.com/akhr0711/items/2f3e2c371106ddb5421b
今日はその続きでブラウザ上に表示されるようにしたいと思います！

vscodeを立ち上げ前回作成したmyprojectに
app.pyというファイルを作成します。

https://flask.palletsprojects.com/en/3.0.x/
公式ドキュメント内にある
Quickstartの
A Minimal Application![スクリーンショット 2024-09-03 220248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3686008/9c47a2b5-cfec-4b2e-13ac-34b7a343993f.png)
ここをapp.pyにコピペします。



## 環境変数の設定

続いてブラウザ上に表示させるための設定を行います。
vscode上部にあるターミナルから新しいターミナルを実行します。
パワーシェルやコマンドプロントなど選べますので
今回はコマンドプロントを使用します。

仮想環境の有効化を行うために
```
 .venv\Scripts\activate
```
と入れます。
するとディレクトリの前に（venv）と表示されます。

続いて環境の設定を行います。
```
set FLASK_APP=app
```
次に開発環境の設定
```
set FLASK_ENV=development
```

この２つを入れたあとに
```
flask run
```
と入れます。
ターミナル上に

![スクリーンショット 2024-09-03 234955.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3686008/7ad8d283-59de-424d-aa87-c688d718574b.png)

と表示されます。
http: //127.0.0.1:5000
ここを[ctrl]を押しながらクリックすると
Hell,World!
と表示されます。
【flutter】起動時に表示される画面をカスタムしてみた。

こんにちは！
今回はflutterアプリを起動した際に表示される画面をパッケージを使ってカスタムしていきたいと思います。
最後まで見ていただけると、幸いです！

## 使用パッケージ
https://pub.dev/packages/flutter_native_splash

## 参考記事
https://zenn.dev/susatthi/articles/20220406-061305-flutter-native-splash

https://iret.media/102983

## 手順

### flutter_native_splashパッケージを追加
```php
flutter pub add flutter_native_splash
```

### pubspec.yamlの修正

```php
dependencies:
  flutter:
    sdk: flutter
  flutter_native_splash: ^2.4.0

  assets:
    - assets/images/画像

flutter_native_splash:
  ios_content_mode: center
  image: assets/images/画像
  fullscreen: true
  color: "#FFFFFF"

```

### スプラッシュ画像の生成
```php
flutter pub get
flutter pub run flutter_native_splash:create
```

↓こんな感じのが出たらOK!
![スクリーンショット 2024-09-03 23.31.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/6f0378e5-5535-7b12-35e0-1af1fbd74006.png)


### 実装内容

![Qiita_20240903.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524127/dec81f30-99b9-4929-2003-b6942e9dd10d.gif)


## 終わりに

今回も最後まで見ていただき、ありがとうございました！
では、また次の記事で〜！
【useCallback】関数のキャッシュがなぜ重要なのか体感する

## useCallbakの基本的な使い所

react公式より引用
>再レンダー間で関数定義をキャッシュできるようにする

https://ja.react.dev/reference/react/useCallback#optimizing-a-custom-hook

つまり再レンダリングが走った時に新しく関数を生成するのではなく、キャッシュを行いそれを実行できるようにするという意味です。（特に何もしない場合、reactは再レンダリングされるたびコンポーネント内の関数を新規作成している。）

useCallbackを使うと関数を所謂メモ化できるということです。
自分は少し分かりにくいというか、恩恵を受けずらそうだなと感じたので以下に具体例を示していきます。


## 関数がキャッシュされたかどうかコンソールで確認できる例

```page.tsx
"use client";
import React, { useCallback, useEffect, useRef, useState } from "react";

export default function page() {
	const [text, setText] = useState("");

	//useCallbackを使わない関数
	const nonMemoFunc = () => {
		console.log("非メモ化関数が実行されたぜ！");
	};

	//useCallbackを使ってメモ化した関数
	const memoFunc = useCallback(() => {
		console.log("メモ化関数が実行されたぜ！");
	}, []);

	//前回の関数参照を保持するためのuseRef
	const prevNonMemoFunc = useRef<() => void>();
	const prevMemoFunc = useRef<() => void>();

	//関数の参照が変わったかどうかを確認できる
	useEffect(() => {
		console.log(
			"メモ化していない関数の参照が変わったか:",
			prevNonMemoFunc.current !== nonMemoFunc
		);
		console.log(
			"メモ化した関数の参照が変わったか:",
			prevMemoFunc.current !== memoFunc
		);

		//現在の関数参照を保存する
		prevNonMemoFunc.current = nonMemoFunc;
		prevMemoFunc.current = memoFunc;
	});

	return (
		<div>
			<input
				type="text"
				value={text}
				onChange={(e) => setText(e.target.value)}
			/>
		</div>
	);
}

```

テキストフィールドに何か入力することでステートを更新し、再レンダリングされるようにしています。

そこで、メモ化した関数・していない関数で参照先の関数が新しくなってしまっているか・いないかをコンソールで確認できるようにしました。↓（メモ化していない方は参照先を変更する必要がないにもかかわらず関数が新規作成され、参照先が変わっている）
![スクリーンショット 2024-09-03 23.00.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486141/2db1b15b-6b4d-0124-031c-306d79b486a6.png)


以下のようにメモ化（useCallbackを利用）した関数「memoFunc」はコンポーネント内で再レンダリングが起きたとしてもreactによって新規作成されるのではなく、キャッシュされることで再利用できます。
```page.tsx
const memoFunc = useCallback(() => {
		console.log("メモ化関数が実行されたぜ！");
}, []);
```

今回は無理やり再レンダリングを起こし、特に意味のない関数でそれらがメモ化されている・されていないかを確認しました。実際は「再レンダリングが起きたとしても関数を新規作成するのではなく、キャッシュしておきたい、かつ描画パフォーマンスを落としている」というケースで登場するのがuseCallbackです。

自分はそこまで大規模なアプリケーションを開発したことがないので、レンダリングパフォーマンスが悪くなってしまうことにあまり遭遇したことがないですが、今後使う機会があったら本記事のことを思い出して使っていきたいなと思います。
AppiumとFlutterを使ったE2Eテスト自動化

この記事では、AppiumとFlutterを使ったE2Eテスト自動化の概要について説明します。

## E2Eテストとは

E2E（End-to-End）テストは、アプリケーション全体の機能を統合し、実際のユーザーの操作を模擬してテストを行う手法です。このテストは、アプリの重要な部分で不具合を発見するための最終的な防衛策となります。たとえば、ユーザーがログインして商品を購入するまでの一連の操作が正常に機能するかを確認します。自動化ツールを使用することで、人間のテスターよりも低コストで迅速かつ正確にテストを実行でき、いつでも繰り返し実行可能です。

## FlutterDriverの概要
[FlutterDriver](https://api.flutter.dev/flutter/flutter_driver/FlutterDriver-class.html)は、Flutterアプリ専用のテストフレームワークで、アプリのウィジェットツリーを直接操作することができます。以下のような操作を自動化できます。

- UIエレメントの操作
- テキスト入力のシミュレーション
- ボタンクリックの自動化

これにより、FlutterアプリのUIテストを実現し、UIの動作が意図した通りであることを確認できます。

## Semantics

FlutterDriverを効果的に利用するためには、[Semantics](https://api.flutter.dev/flutter/widgets/Semantics-class.html)の設定が重要です。Semanticsは、UI要素に意味を持たせることで、テストフレームワークが要素を正確に識別し操作できるようにします。以下のコード例のように、ボタンやテキストフィールドにラベルを付けることで、テストスクリプトが特定のUI要素を簡単に見つけ、操作することができます。

```dart
Semantics(
  label: 'Increment',
  child: ElevatedButton(
    onPressed: _incrementCounter,
    child: Text('Increment'),
  ),
)
```

この設定により、テストスクリプトがUI要素を簡単に特定し、操作することができます。XCUITestでのアクセシビリティラベル設定と同様の考え方です。　

## テストスクリプトの作成例

FlutterDriverを使用したE2Eテストの基本的な流れは以下の通りです。

1. `flutter_driver`パッケージをプロジェクトに追加
2. テストファイルを作成（例：`test_driver/app_test.dart`）
3. テストスクリプトを記述

以下は、カウンターアプリのテスト例です：

```dart
import 'package:flutter_driver/flutter_driver.dart';
import 'package:test/test.dart';

void main() {
  group('Counter App', () {
    FlutterDriver driver;

    setUpAll(() async {
      driver = await FlutterDriver.connect();
    });

    tearDownAll(() async {
      if (driver != null) {
        await driver.close();
      }
    });

    test('increments the counter', () async {
      final counterTextFinder = find.byValueKey('counter');
      final buttonFinder = find.byValueKey('increment');

      await driver.tap(buttonFinder);
      expect(await driver.getText(counterTextFinder), "1");
    });
  });
}
```

このスクリプトでは、インクリメントボタンをタップし、カウンターの値が正しく増加するかをテストしています。

## Appiumを使ったFlutterアプリのテスト

[Appium](https://appium.io/docs/en/latest/)は、iOS、Android、Flutter、モバイルWebアプリを対象にした強力な自動テストツールです。Appiumを使用すると、FlutterコンポーネントとWebViewの両方を同じテストフレームワークで自動化できるため、WebViewを含むFlutterアプリのテストでも一貫性を保つことができます。これにより、クロスプラットフォームのテストが効率的になり、テストスクリプトの再利用性が高まり、保守コストも削減されます。

Appiumを使わずにFlutterアプリを自動化する場合、FlutterDriverを使用しますが、WebViewなどの非Flutterコンポーネントを直接操作するのは難しいです。別のツールや手動テストが必要となり、テストの一貫性が欠けるリスクがあります。

## Appiumの例

実装例はこちらの記事が詳しいです。

https://qiita.com/hiesiea/items/d018f1f5ed6e563b4337


## MagicPod

[MagicPod](https://magicpod.com)は、使いやすい操作画面とプログラミング不要でテストを作成できる機能が特徴のE2Eテストサービスです。特に日本の市場向けに調整されており、初心者でも簡単に使えるとされています。内部的にはAppiumというツールが使われているようです。QAEがプログラミングをせずにテストシナリオを作成できるため、ソフトウェアエンジニアの工数を使わずにテスト整備できるのが魅力です。


## テスト実行のタイミング

E2Eテストの自動実行は、PR作成時などのCI実行のタイミングで行うのが理想的です。また、倹約的に実行タイミングを減らすなら、夜間やチームが作業していない時間帯に絞ってテストを実行することも考えられます。これにより、コード変更があるたびにテストが自動で実行され、不具合を早期に検出できます。少なくともリリース前にはテストを実行し、リリース後の安定性を確保しましょう。

## まとめ

AppiumとFlutterを組み合わせたE2Eテスト自動化は、特にWebViewを含む複雑なアプリケーションで効果的です。クロスプラットフォーム対応のテストを一貫して実施できるため、開発効率が向上し、品質の高いアプリを迅速にリリースできます。E2Eテストの自動化により、バグの早期発見が可能となり、結果的にユーザー満足度の向上につながります。
【プログラミング初心者】0から始めるReact学習 #1 ~勉強計画~

## はじめに
できるだけお金をかけずにReactを勉強したい。
Qiitaで公開されている記事で学習したら本当にReactを習得できるのだろうか。
そんな思いで本日から学習記録として記事を投稿します。

何か簡単なアプリやサイトを作れるようになっていると良いな。

## プロフィール
年齢：20代半ば
学歴：某私立大学文系学部卒
前職：インフラエンジニア
現職：営業（IT業界）
プログラミング歴：コードを少し読める程度
趣味：ゲーム、お笑い

## 参考記事
[【2024年最新版】0からReactを勉強するならこのロードマップに従え！](https://qiita.com/Sicut_study/items/7d8c6f309dddda1a3961)

## 学習計画（2ヶ月間）
ひとまず目標は2ヶ月で立ててみます。
実際はこの通り行かないと思うので、3カ月で終われば良いかな～（笑）
くらいで考えています。

1.Web開発の基本（10日間）9/4-9/13
2.CI/CDの導入（10日間）9/14-9/23
3.TypeScriptの導入（10日間）9/24-10/3
4.名刺アプリの開発（10日間）10/4-10/13
5.個人開発アプリのリリース（20日間）10/14-11/2

## さいごに
これから学習記録として記事を投稿をしていく中で、
プログラミング初心者故にめちゃくちゃな内容を書いてしまうかもしれません。
ですが、一生懸命学習しますので温かい目で読んでいただけると嬉しいです。
よろしくお願いいたします。
Markdown/Asciidocで、チェックマーク(✓)を表示する方法

# はじめに

　MarkdownまたはAsciidocで、チェックマーク(✓)を表示する方法を紹介する。例えば、表中などでチェックマークを表現したい場合に有用。チェックボックスに関する情報は多くあったが、チェックマークに関する情報が少なかったのでメモとして残す。


# 方法

　```&check;```でチェックマークとなる。表中に利用したい場合は以下のようにする。

例：Markdownの表
```markdown
|項目|チェックマーク|
|:-:|:-:|
|項目名|&check;|
```

# まとめ

　MarkdownまたはAsciidocで、チェックマーク(✓)を表示する方法を紹介した。チェックボックスではなく、編集不可としたい場合に有用。

# 参考


https://stackoverflow.com/questions/47344571/how-to-draw-checkbox-or-tick-mark-in-github-markdown-table/55523035

https://gist.github.com/pchaigno/1826ba1151890b751862?permalink_comment_id=2837082#gistcomment-2837082
【個人メモ】webエンジニアになるために

webエンジニアになるために必要なことをまとめていきます
※随時更新中
# 目的
web系企業に独学でバックエンドエンジニアとして転職
### なぜ独学？
- webエンジニアは独走力が大事であるであり、自分で学び続けることができることを証明するため
- プログラミングスクール等を利用する人たちとの差別化のため
### なぜwebエンジニア？
- webサービスの開発に興味をもったから
- webエンジニアの自由な働き方に憧れたから
- webの技術が好きだから
# 必要なもの
- ポートフォリオ
- webに関する知識、技術
# 身に着けたいスキル
- HTML、CSS、JavaScript、Ruby
- Ruby on Rails
- Docker
- git、GitHub
- AWS
### なぜRubyを選んだのか
Rubyは日本語の教材が多く学習のハードルが他言語に比べ低いため
なるべく早く転職したいから
求人数が多いから
### 手段
- UdemyやProgate、書籍、Qiita等で学習
- QiitaやXにアウトプット
# 転職するまでの期間（超ざっくり）
### 1〜2か月目
必要な技術についての学習
### 3〜4か月目
学びを継続しつつポートフォリオの作成
### 5か月目〜
転職活動
THM: c4ptur3-th3-fl4g Writeup

## c4ptur3-th3-fl4g

暗号化された文字列・データを復号化するルームになります！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2152468/ec597d35-faf6-bc00-8413-3c74d59ec0f3.png)


https://tryhackme.com/r/room/c4ptur3th3fl4g

あまり、この分野の問題をしたことがないので、どうなることやら、、、

## Task1:


だいたいChatGPTに与えれば解読してくれます。
便利な世の中ですね（堕落）（後で痛い目みるやつ、、、）


ただ一つだけRot47というものを初めてみたので、調べてみました。

Dencodeから引用しています。https://dencode.com/ja/cipher/rot47

>ROT47について
ROT47は、文章の文字を他の文字に置換することで暗号化する単一換字式暗号のひとつです。
文字の置換は、「!」から「~」までの文字を「!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~」の94文字の中で47文字シフトさせることで行います。
例えば、「!」は「P」、「A」は「p」、「0」は「_」に暗号化されます。

最後の問題は複数の暗号化がかされていたものでした。
ここでChatGPTの限界が。。。

ということで、まじめにやっていきます

まず与えられた文字列がはみ出ているので、ダブルクリックしてからコピーしてメモ帳に貼り付けます
大文字小文字の英字と数字だったので、おそらくBASE64だと思われます。
[Dencode](https://dencode.com/ja/)でBase64でデコードするとBase64のところがモールス信号のようになっています。
さらにモールス信号を復号化すると01のビット列のようなものがでてくるので2進数にエンコードされた文字列のようです

2進数文字列をまたしてもDencodeで変換すると、読むことができない文字列がでてきました。。

読めない、かつ記号がいろいろあるので、Rot47かなと思って変換すると数字の羅列が、、、！

これはアスキーコードのようだったので、変換してあげれば答えがでてきました


## Task2: Spectrograms

ルームの説明分のGoogle翻訳は以下になります。

>スペクトログラム  は、時間とともに変化する信号の周波数スペクトルを視覚的に表現したものです。オーディオ信号に適用された場合、 スペクトログラムは ソノグラフ、ボイスプリント、ボイスグラムと呼ばれることもあります。データが 3D プロットで表現される場合、ウォーターフォールと呼ばれることもあります。

THMの解説はよくわからなかったので、いろいろ調べましたが、以下のサイトがわかりやすかったです。
https://logicalyze.com/understanding-spectrograms/
すごい雑にいうと、縦軸：大きさ、横軸：時間 でよく表現される音の波形を変換したものみたいですね
（違っていたらごめんなさい）

この処理をするためにSonic Visualiserを使います

まず以下のサイトからダウンロード
https://www.sonicvisualiser.org/download.html

拡張子がAppImageという変わったものなので、以下の手順に従って、実行できるようにしてから、ダブルクリックするとファイルが開きました
https://discourse.appimage.org/t/how-to-run-an-appimage/80


THMのサイトからダウンロードした.wavのファイルをドラッグアンドドロップで読み込ませて、Layer＞Add Spectrogramを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2152468/07d9ba5c-6a60-6c28-038b-ee3e746827fb.png)



右下の赤枠のところをいい感じ操作していくと（これが難しい！）、文字が浮かび上がってきました。。。。！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2152468/9a093ab5-8014-c0ef-daea-2fb0c6506775.png)



## Task3: Steganography 

説明文の日本語訳です。

>ステガノグラフィーとは、ファイル、メッセージ、画像、
または動画を別のファイル、メッセージ、画像、または動画内に隠す手法です。



Steganographyからメッセージを抽出するにはパスワードが必要なのですが、それをパスワードなしで復号化するツールでstegseekというものがあります。


使い方は以下になります。
ターゲットファイルはメッセージをsteghideで隠しこんだファイル、パスワードリストは総当たり攻撃を実施するためのものです
```
stegseek [ターゲットファイル] [パスワードリスト]
```

例えば以下のような感じに使います！
```
 stegseek stegosteg_1559008553457.jpg /usr/share/wordlists/rockyou.txt 
```



## Task4:

これは最初、問題の意図が全く読めなかったです。。。
ただ、filenameとextensionを答えろ、と書いてあったので、見えているものとは違うものがあるのかな？と思って、ファイルのバイナリデータから可読部をstringsコマンドで抽出したら、課題が終わってしまいました（笑）


## 最後に

暗号化・難読化について手を動かしなら学べるよいルームでした！！
初めてのインターンで打ちのめされた話

# はじめに

8月27日から8月30日の4日間、都内の某IT企業のインターンに参加しました。この記事では、そのインターンでの体験や学んだことを振り返り、アウトプットしていきます。

# 事前準備

インターンではRuby on Rails、React、TypeScriptを使用する予定だったため、以下の教材を通じて基礎を学びました。

- [Ruby on Rails チュートリアル](https://railstutorial.jp/chapters/beginning?version=7.0)
- [Rails 7とReactによるCRUDアプリ作成チュートリアル](https://techracho.bpsinc.jp/hachi8833/2022_05_26/118202)

しかし、RubyやRailsに初めて触れることもあり、学習の進捗は全体の5割程度と感じました。もっと事前に準備をしておくべきだったと後悔しています。

# インターンの形式

インターンは4〜5人のチームに分かれてハッカソン形式で開発を行うものでした。初対面のメンバーと数時間のうちにテーマを決めて進めるのは大変でした。

また、このインターンではユーザー役の方にヒアリングを行い、ユーザーが求める機能を把握しながら、チーム内で認識を合わせていく形式でした。まるで実際の開発プロジェクトのようで、とても現実的な体験ができました。

# 1日目

初日は顔合わせとオリエンテーションが行われ、その後、テーマが発表されました。私たちのチームは、開発よりもユーザーヒアリングと設計に時間をかけました。

具体的には、

1. 現在のユーザーの課題を理解
2. チームで解決策を考え、簡単なページ案を作成
3. ユーザーに再度確認し、認識の齟齬を埋める

という流れで進めました。この時点では、「何とかなるだろう」と楽観的に考えていましたが、翌日以降にその難しさを痛感しました。

# 2〜3日目

2〜3日目は開発がメインでした。私はもう一人のメンバーと共にバックエンド（Rails）を担当し、他のメンバーはフロントエンドを担当しました。自分の技術力が他のメンバーに比べて低いと感じ、非常に恐縮しました。

開発はOpenAPIの設計から始まり、その設計に基づいてRailsでデータベースやモデル、コントローラーを作成しました。当初は1日で終わると考えていましたが、設計の過不足が多く、何度も修正することになりました。また、OpenAPIをドキュメント代わりにする方針だったため、後回しにすることもできず、フロントエンドチームにも迷惑をかけてしまいました。

# 4日目（最終日）

最終日は全力でMVPを完成させ、プレゼン用のスライドを作成しました。私は主にデモ用のデータ作成を担当しましたが、意外と手間がかかりました。

３日目でも同様でしたが、frontとbackでAPIの接続等が意外と手間取ってしまいました。
やはり、自分がもっとfrontendをわかっていれば、より良いアプリができたと感じてしまいます...

# 反省点

- **見積もり不足**: 進捗を時間単位で設定せず、「今日中に終わればいい」という程度で進めてしまったため、予定通りに進みませんでした。
- **一度に多くを進めすぎた**: APIを一つずつ作成すればよかったのに、一気に進めようとしたため、非効率になりました。
- **フロントとバックのコミュニケーション不足**: お互いの進捗状況が明確でなく、連携がスムーズにいきませんでした。時間があればGitHub Projectを使いたかったです。
- **取捨選択の甘さ**: やりたいことが多く、時間が限られていたため、MVPをより具体的に絞り込むべきでした。
- **技術力不足**: Rails初心者であり、フロントエンドの開発経験も少ないため、他のメンバーに比べて貢献できなかったと感じています。一応Copilotのおかげで、GitHub上では一定の貢献ができたようですが...

# 学んだ技術

- OpenAPI
- Ruby on Rails
- React
- MVP開発
- チーム開発の進め方

など多くの技術を学べました！
多分思い出せてないだけで、もっとあります！

# 最後に

今回のインターンでは、多くのことを学びました。優秀なチームメンバーに刺激を受け、同時に自分のモチベーションも高まりました。

また、毎日の始業・終業時に「今日やること、今日できたこと、今日の反省、明日やること」などを言語化する時間があり、これが自分にとって大変でした笑
そういうわけもあって、練習としてこの記事を書いています！
RaspberryPi5のGPIOをPodmanから操作

## 経緯
- MicroShiftからRaspberryPiのGPIOを操作する前実験として、PodmanからGPIOを操作した
- 今回はLチカでなく、圧電スピーカーを鳴らした

## 環境
- Raspberry Pi5
- AlmaLinux 9.4
- Podman version 4.9.4-rhel

## 手順
### 0. 事前準備

https://qiita.com/yoshi1006/items/c458e328957330ac5005

### 1. Raspberry Pi5回路準備
- 接続：GPIO12 (PWM0) - 圧電スピーカー - Ground

> ![RPI5 pinout](https://www.hackatronic.com/wp-content/uploads/2024/03/Raspberry-Pi-5-Pinout--1210x642.jpg)
ref) https://www.hackatronic.com/raspberry-pi-5-pinout-specifications-pricing-a-complete-guide/

### 2. Podmanインストール・AlmaLinux設定
1. Podmanインストール
    ```bash
    $ sudo dnf install -y podman
    ```
1. gpiochipへアクセスできるようにPermissionを設定
    ```bash
    $ sudo chmod 666 /dev/gpiochip*
    ```
    - これですべてのユーザーがgpiochipにアクセスできるようになる
1. 上の設定を再起動しても変わらないようにする
    ```bash
    $ sudo nano /etc/udev/rules.d/99-gpio.rules
    ```
    - 上のファイルに下記を追記
    ```text
    KERNEL=="gpiochip*", MODE="0666"
    ```
1. 再起動
    ```bash 
    $ sudo reboot
    ```
### 3. プロジェクト用意
- 下記のようにファイルを用意
    ```
    project
    ├─Containerfile
    └─chime.py
    ```
- Containerfile
    ```Dockerfile
    FROM python:3.11-slim

    RUN pip install lgpio gpiozero
    
    WORKDIR /app
    
    COPY . .
    
    CMD ["python3", "chime.py"]
    ```
- chime.py
    ```python
    from gpiozero import PWMOutputDevice
    from time import sleep
    
    # PWM0 is on GPIO 12
    buzzer = PWMOutputDevice(pin=12, frequency=440)  # 440 Hz is the frequency of the A4 note
    
    try:
        print("Playing sound on buzzer...")
        while True:
            buzzer.value = 0.5  # 50% duty cycle for a continuous tone
            sleep(1)            # Play the tone for 1 second
            buzzer.off()        # Turn off the buzzer
            sleep(1)            # Wait for 1 second before playing again
    except KeyboardInterrupt:
        print("Program stopped")
    finally:
        buzzer.close()
    ```
### 3. コンテナビルド・起動
1. コンテナビルド
    ```bash
    $ podman build -t gpiozero-sound .
    ```
1. コンテナ起動
    ```bash
    $ podman run -it --privileged gpiozero-sound
    ```
ブザーが鳴ったら成功
StepFunctionsのHTTP Endpoint Call third-party APIを諦めた話

## はじめに
Step Functions + LambdaでAPIからデータ収集していたものを、HTTP Endpoint Call third-party APIを使ってStep Functionsのみで実装しようとしたけど諦めた話。

## 結論
HTTP Endpoint Call third-party APIを利用する際には、タイムアウトが最大5秒までしか対応しておらず、今回利用するAPIはレスポンスに５秒以上かかることがよくあるためLambdaでAPIを実行することにした。

## どういうことか
HTTP Endpoint Call third-party APIを使う際には、EventBridge Connectionを介してAPI接続することとなる。

EventBridge Connectionのコンソールにわかりやすい下記の図がある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177290/5cce066e-f8f6-d977-3d08-026f55c7df58.png)


このEventBridge Connectionが5秒以上のレスポンスには対応していない。
※デフォルト設定だと185回までリトライされてしまうので、注意が必要。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177290/7cda710b-65b7-01fc-ed9a-a948cc7bc68e.png)

https://docs.aws.amazon.com/ja_jp/eventbridge/latest/userguide/eb-api-destinations.html
【Java】Mapの概要及び使い方について

# はじめに
現場で新規参画者に対してMapの説明をする機会が度々あるため、
自身の説明用のレジュメも兼ねて記事として投稿しようと思いました。
# Mapとは
Mapは、Javaの標準APIであるコレクションフレームワークのインタフェースの一種です。
ListやSetといった、Collectionインタフェースとの違いとしては、キーと値をペアとして管理するデータ構造であることが挙げられます。
Mapは一意のキーに対して一つの値を関連付けることができるため、キーを使って効率的にデータを管理できます。
上述の通り、Mapはインタフェースのため、
一般的にプログラム上で扱う際にはMapの各クラスをインポートして使用します。

# Mapの種類
Javaでよく使われるMapの実装には、以下の3つがあります。
* HashMap: 
  最も一般的なMapの実装で、キーのハッシュコードを使って高速な検索と格納を行います。注意点として、要素の順序は保証されません。
* TreeMap
  キーを順序通りに自動でソートするMapです。ここでいう順序とは、自然順序を基本としますが、指定したコンパレータで順序づけることも可能です。順番通りに要素を管理したい場合に使用します。
* LinkedHashMap: 
  挿入された順序やアクセスされた順序で要素を保存するMapです。キャッシュの実装などに役立ちます。

# Mapのインスタンス化
Mapのインスタンス化の方法です。
例としてHashMapで記載します。

```java:java
Map<String, Integer> wkMap = new HashMap<String, Integer>();
```
このコードでは、キーがString型、値がInteger型のHashMapを作成しています。

# よく使うメソッド
## put(key, value)
putメソッドは、Mapに要素を追加するためのメソッドです。一つのキーに対して一つの値しか関連付けられないため、同一のキーで複数回putすると、値は上書きされます。

```java:java
wkMap.put("key1", 100);
wkMap.put("key1", 200); // "key1"に対応する値が"100"から"200"に上書きされる
```


## isEmpty()
isEmptyメソッドは、Mapが空であるかどうかを判定します。

```java:java
boolean empty = wkMap.isEmpty();
```

## values()
valuesメソッドは、Mapに格納されているすべての値を取得します。たとえば、特定の計算に利用する際に使用します。

```java:java
Collection<Integer> values = wkMap.values();
int total = 0;
for (Integer value : values) {
    total += value;
}
```

## entrySet()
entrySetメソッドは、Mapに含まれるすべてのキーと値のペアを取得します。キーを取得する場合はgetKey()、値を取得する場合はgetValue()を使用します。

```java:java
for (Map.Entry<String, Integer> entry : wkMap.entrySet()) {
    String key = entry.getKey();
    Integer value = entry.getValue();
}
```

## keySet()
keySetメソッドは、Mapのすべてのキーを取得します。キーのみを使用する場合に便利です。

```java:java
Set<String> keys = wkMap.keySet();
```

## clear()
clearメソッドは、Mapの全ての要素を削除します。

```java:java
wkMap.clear();
```

## remove(key)
removeメソッドは、指定したキーに関連付けられた要素を削除します。

```java:java
wkMap.remove("key1");
```

# 終わりに
Mapは用途に応じてさまざまな方法で使い分けることが重要です。適切なMapの実装を選び、メソッドを活用することで、コードの効率化と可読性を向上させましょう。
誤り等ありましたらご指摘ください。
2日間で「データ」を学んだ

## Recursionで初級「データ」を学んでみた
1週間に1回記録としてqiita書けたらいいなって思ってたけど、アウトプットの場としてもう少し更新頻度上げられそう。

昨日と今日でCS初級編「データ」を学んでみた。
時間としては昨日1.5時間でインプットして（調べてもよく分らんところはとばしたｗ）今日1時間程度で紙に起こして昨日よく分らんかったところを理解するのに努めた。
だから時間としては2.5Hくらいかな？
進数はITパスポートでもさらっとやったから何となく覚えていたのでそこまでアレルギーは出なかったｗ

## 学んだことを雑に書き出してみる

* コンピューターは0と1のデータを扱っている
* データ型
    * 整数型（真偽）
    * 整数型=int型（整数）
    * 浮動小数点型
    * 文字型=char型
    * 文字列型=str型
* 2進数/10進数/16進数
    * 2進数=0、1で表す
    * 10進数=0~9で表す
    * 16進数=0~9、A～Fで表す
        * 10進数と区別するために頭に0xを入れる
            * 0xFF=1111 1111
            * 0x4Ð=0100 1101
    * 2進数⇆10進数⇆16進数の変換方法
* 2進数
    * 指数が1=1ビット、2=2ビット・・・8=8ビット=1バイト
* 整数型
    * 符号付き整数型/符号なし整数型
        * int型　32ビット=4バイト
        * long型　64ビット=8バイト（最後にLを挿入）
* 文字コード
    * ASCII
    * Unicode
* 固定小数点型
* 浮動小数点型
    * 仮数×基数（指数）
        * 正規化　仮数の最初の数字が1桁で表現するように変換する
    * Eで表す
        * 例　3.4×10⋆38　→　3.4E+38
              3.4×10⋆−38　→　3.4E−38
* float型/double型
    * float 32ビット
    * double 64ビット

なんか最後のfloat/doubleはよく分らんかったので調べたら下記の記事がすごく分かりやすかった。

https://kisaragi2342.com/float-or-double/

## いや断片的すぎるだろ

学んだこと並べてみたはいいけど談判的すぎて草しか生えない。
今は、こういう概念があるんだというのをイメージで理解しているにとどまっていては、じゃあつまりなんなのかと聞かれたら答えられない。
まあでも一旦はこれで良いと思っている。後々断片的な知識が繋がって関係性が見えてきたらちゃんと説明できるようになるだろう…（甘い）

## 正直ちょっと不安ではある

私これ勉強し続けられるんか？と2日目にして不安になっている。
何故かというと私は今迄難しいことから逃げつけてきたから🥹
本読んでもわからないところとかすっ飛ばしちゃうタイプ。

でも何を学ぶにも基礎ができていないとそのあとがしんどくなることは痛いほどわかっているのでとにかく理解するまで色んな記事読んで勉強し続けるよ。

今日もお疲れ様でした！
Ubuntu 24.04でPyAutoGuiを使おうとしたとき、Xlibのエラーが出る

## エラーの内容

```python
import pyautogui
```
しようとすると、

```
Xlib.error.DisplayConnectionError: Can't connect to display ":0": b'Authorization required, but no authorization protocol specified\n'
```
XlibライブラリがXサーバへの接続に失敗している

## 解決方法
xhostで許可を与えてやれば良い

```
xhost +
```
htmlのinput要素だけでバリデーションを設定する

## 概要

htmlのinput要素だけで簡単にバリデーションを設定する方法をまとめる。

## 内容

下記のように記載することでhtmlだけでバリデーションチェックをする事ができる。

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div>
    <form action="post">
      <div>
        <label for="name">名前（必須チェック）</label>
        <input id="name" type="text" required>
      </div>
      <div>
        <label for="email">メールアドレス（必須 + メールアドレス形式チェック）</label>
        <input id="email" type="email">
      </div>
      <div>
        <label for="username">ユーザー名（必須 + 最小文字列と最大文字列チェック）</label>
        <input type="text" id="username" name="username" minlength="1" maxlength="3" required>
      </div>
      <div>
        <label for="age">年齢（必須 + 数値範囲チェック）</label>
        <input type="number" id="age" name="age" min="18" max="99" required>
      </div>
      <div>
        <label for="zipcode">郵便番号（必須 + 正規表現パターンチェック）</label>
        <input type="text" id="zipcode" name="zipcode" pattern="\d{3}-\d{4}" title="XXX-XXXXの形式で入力してください" required>
      </div>
      <button type="submit">登録</button>
    </form>
  </div>
</body>
</html>
```

ただし、よくあるフレームワークなどのバリデーションと違い、上位の要素から値をチェックしてバリデーションエラーがあったものだけエラーメッセージを出す。
一括ですべてのフォームの値チェックすることはできないので注意
RSpec の request spec で css_select を使って HTML の内容を確認する

# やりたいこと

RSpec の request spec であるエンドポイントが返す HTML の内容を確認したいです。

# 例

例えば、あるエンドポイントが

```html
<table>
  <thead>
    <tr><th>No</th><th>名前</th><th>絵文字</th><th>日時</th></tr>
  </thead>
  <tbody>
    <tr><td>3</td><td>さぶろう</td><td>🐈</td><td>2024/09/01 00:00:00</td></tr>
    <tr><td>2</td><td>はなこ</td><td>🐕</td><td>2024/08/31 23:59:59</td></tr>
    <tr><td>1</td><td>ジローラモ</td><td>🦘</td><td>2024/08/01 00:00:00</td></tr>
  </tbody>
</table>
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6697/e8b8b9e4-44c6-5b24-0171-6f80ad7d7a5e.png" alt="table" width=420>

という table 要素を含む HTML を返すとします。この table 要素の行が意図した順番で並んでいるか確認したいです。

# 方法

request spec 内で使用可能な [css_select](https://github.com/rails/rails-dom-testing/tree/da0d96bc872e7e9b2656bc17ef3467bdf4bd9d48?tab=readme-ov-file#selector-assertions) メソッドを使います。

```rb
describe 'GET /animals' do
  it 'includes emojis in the correct order' do
    get(animals_path)

    emojis = css_select('tbody td:nth-child(3)').map(&:inner_text)
    expect(emojis).to eq(%w(🐈 🐕 🦘))
  end
end
```

css_select メソッドは [Nokogiri::XML::NodeSet](https://nokogiri.org/rdoc/Nokogiri/XML/NodeSet.html) オブジェクトを返します。これは具体的には以下のように [Nokogiri](https://nokogiri.org/rdoc/Object.html#method-i-Nokogiri) メソッドと [Nokogiri::XML::NodeSet#css](https://nokogiri.org/rdoc/Nokogiri/XML/Searchable.html#method-i-css) メソッドを使用するのと同じです。

```rb
describe 'GET /animals' do
  it 'includes emojis in the correct order' do
    get(animals_path)

    emojis = Nokogiri(response.body).css('tbody td:nth-child(3)').map(&:inner_text)
    expect(emojis).to eq(%w(🐈 🐕 🦘))
  end
end
```

# バージョン情報

- Ruby 3.3.4
- Rails 7.2.1
- rspec-rails 7.0.1

# 参考

- [Rails テスティングガイド > 10.1 その他のビューベースのアサーション](https://railsguides.jp/testing.html)
- [rails/rails-dom-testing: Extracting DomAssertions and SelectorAssertions from ActionView.](https://github.com/rails/rails-dom-testing)
[IP Adress] IPアドレスと周辺知識

# 一覧
|名称|詳細|
|:--|:--|
|IPアドレス|IP（ネットワーク層のプロトコル）で利用されるノードエを特定するアドレス<br>IPv4は32桁2進数（8ビット区切り10進数）|
|サブネットマスク|IPアドレスのネットワーク部とホストアドレス部を識別する<br>- `1`の部分がネットワークアドレス部<br>- `0`の部分がホストアドレス部|
|ネットワークアドレス部|同上|
|ホストアドレス部|同上|
|ネットワークアドレス|ホストアドレス部が全て`0`のアドレス<br>- ネットワーク自体を指す<br>- 同じネットワークに属しているノードのネットワークアドレスは同値になる|
|ブロードキャストアドレス|ホストアドレス部が全て`1`のアドレス<br>- 同じネットワークに属しているノード全体に通信する際に使用|

# 活用
`IPアドレス`と`サブネットマスク`の活用方法を下表に示す。
|活用法|結果|
|:--|:--|
|論理積|ネットワークアドレス（部）の取出し|
|サブネットマスク反転→論理積|ホストアドレス部の取出し|
|サブネットマスク反転→論理和|ブロードキャストアドレスへの変換|


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/e50e26b9-87dd-1219-f62d-2efc158e6bfa.png)

# 参考リンク
- [令和3秋35](https://www.ap-siken.com/kakomon/03_aki/q35.html)
- [平成21春36_IPネットワーク_LAN](https://www.ap-siken.com/kakomon/21_haru/q36.html)
- [令和4秋33](https://www.ap-siken.com/kakomon/04_aki/q33.html)
Arcブラウザでマウススクロールが効かない時の対処法

## 00．はじめに
The Browser Companyによって開発された新しいウェブブラウザ「Arc」。評判は良いようですが、実際に自分で触ってみるまでは何とも言えません。というわけで、さっそくインストールして使い始めたところ、すぐに予想外の問題に直面しました。今回はその体験を備忘録としてまとめてみました。


## 01．マウススクロールが効かない
Arcブラウザを立ち上げ、少し戸惑いながらもブラウジングを開始したところ、思わぬトラブルに遭遇しました。

**マウススクロールが効かない！！！！**

最初は「マウスが壊れたのか？」と疑いましたが、他のブラウザやアプリケーションではスクロールが問題なく機能しています。このため、マウスの不具合ではなく、Arcブラウザ特有の問題の可能性が高いと考えました。


## 02．解決方法
困ったときのAIアシスタントということで、Copilotに相談してみました。いくつかの解決策を提案され、ブラウザのアップデートや拡張機能の確認も試みましたが、私の環境では効果がありませんでした。

最終的に、**Windowsのマウス設定を変更**することで問題が解決しました。具体的には、以下の設定を有効にすることで、Arcブラウザでも正常にマウススクロールが機能するようになりました。

### 「ホバーしたときに非アクティブウィンドウをスクロールする」を有効にする
1. Windowsの「設定」を開く
2. 「Bluetoothとデバイス」をクリック
3. 「マウス」をクリック
4. 「ホバーしたときに非アクティブウィンドウをスクロールする」をオンにする

![スクリーンショット 2024-08-30 214434.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/8436d4c7-82e0-43db-1bb9-d431a7a12401.jpeg)

この設定を有効にすることで、Arcブラウザ内でのマウススクロール問題が解消されました。

## 03. さいごに
Arcブラウザを使い始めてすぐにこのような問題に遭遇しましたが、無事に解決できました。
ブラウザ自体は非常にユニークな機能やデザインを備えているので、引き続き使用し、その使用感についても改めて記事にまとめたいと思います。
機械学習全般のできる画像認識屋になる方法

画像認識屋がキャリアを広げていくうえでおすすめなのが、機械学習全般もできるエンジニアになることだ。

## そのためにおすすめする技術分野
- 主成分分析
- サポートベクターマシン
- クラスタリング

#### 分野が違う人向けの説明
###### 主成分分析とは:
やたら変数の数が多すぎる状況から、データにありがちな傾向を少ない数で表現し直すこと。
変数がやたらありまくっても、うまく特徴をつかんで分析ができるということです

###### サポートベクトルマシンとは：
変数の数がありすぎて、グラフで分布を見ることなんてできないデータに対して、
いいようにデータの分類や回帰計算をしてくれる方法。
できるだけ、誤分類が生じにくいようにマージンを考えてくれるという優れもの。


## それぞれを勧める理由
- 主成分分析
　主成分分析は、多数の変数がある分野で、線形の関係性から何らかの規則性を発見するためのものだ。
 人は、多次元の空間で物事を考えることが苦手だ。
 少ない次元で少ない変数で考えたほうが圧倒的に理解しやすい。
 多次元の変数の分布の多くは、少ない数の主成分の累積寄与率で説明がつく。

 そうすることで、物事を単純化することができる。
 多くのパラメータのままモデルを作ると、学習データに対して過学習したモデルができやすい。
[Scikit-learn の主成分分析](https://scikit-learn.org/stable/modules/generated/sklearn.decomposition.PCA.html)

 - サポートベクターマシン
 　２値判定、他値分類などの分類問題に対して、有効な手法だ。
  　サポートベクトルマシンでは、分類のマージンを十分に広くとろうとする性質があることも好まれる点だ。
   主成分分析で、入力データの次元を減らしておいてから、それをサポートベクターマシンにで学習・推論するのは機械学習の常套手段だ。
   分類の際に、その分類の確からしさの値を出力させることもできる。
   サポートベクターマシンの利点：
   分類問題で、少ない数の学習データでも良好な結果を得やすい。
   ポジティブサンプル・ネガティブサンプルの境界付近のデータが学習に寄与するので、簡単すぎるデータを学習に加えすぎて、逆に性能がでなくなるという生じにくい。そのため、分類問題には使いやすい。
   さらに、サポートベクターマシンには、回帰推定を行うバージョンもある。
 [Support Vector Machines](https://scikit-learn.org/stable/modules/svm.html)
 [1.4.2. Regression](https://scikit-learn.org/stable/modules/svm.html#regression)
 - クラスタリング
 サポートベクターマシンでは正解データを予め人が与えていた。教師あり学習ですね。
 それに対して、クラスタリングでは、データそれ自体の中にある関係性によってクラスターを作る。そのため予め人が正解データを与えることがありません。教師なし学習

[2.3. Clustering](https://scikit-learn.org/stable/modules/clustering.html)
 

#### 付記：対象とする分野が違えば、分析のしかたも変わる
ナイーブベイズ（単純ベイズ）
決定木
random forest
などがのぞましい場合もある。

#### 付記：対象とする分野が違えば、分析のしかたも変わる(時系列データ)
時系列データには、時系列データに特徴的なアプローチがある。
- リカレントニューラルネットワーク
- 時系列データの季節変動・曜日による変動の除去をするよく使われるノウハウもあるだろう。

物理現象であって、線形の遅れ系を仮定できることがわかっているのならば、
なにも機械学習というアプローチをとらずに、通常の計測分野でのモデル化の手法をとればいい。


## 古い時代の画像認識の開発（サポートベクターマシン）
深層学習以前の機械学習で活躍していたのは、サポートベクターマシン（SVM）だった。
多次元空間のデータを分類するのに、サポートベクターマシンを用いていた。
非線形な事例でも分類できるうえに、汎化性が高いことが理由だった。
前段の特徴量にHOGを用いた用いたものが使われ、HOG-SVMの検出器として利用された。

```
hog = cv2.HOGDescriptor()
hog.setSVMDetector(cv2.HOGDescriptor_getDefaultPeopleDetector())
found = hog.detectMultiScale(img, winStride=(8, 8), padding=(32, 32), scale=1.05)
```

などのコードが書かれた。
画像の縮小倍率を変えて、ラスタースキャンすることで、検出するものだった。

そのため、この時代の画像認識エンジニアは、サポートベクターマシンを使うことが多かった。
- [libSVM](https://www.csie.ntu.edu.tw/~cjlin/libsvm/) も典型的なライブラリの一つだった。

## 古い時代の画像認識の開発（主成分分析）
古い時代の画像認識は線形代数を前提としていた。
画像はグレースケールにしても、画素数が多くなるので、高次元での分類問題となった。
そのため、高次元で問題を解くよりは、より低次元の空間で問題を解くように前処理を行なっていた。
それが主成分分析です。
主成分分析では、
入力ベクトルの基底を、直交なベクトルで取り直します。
しかも、寄与率の高い順に取り扱います。
32x32 の画素数グレースケール画像は32x32 = 1024 次元になります。
しかし、累積寄与率が98 % に達する次元は格段に小さくなります。

この直交なベクトルは、固有値ベクトルと呼ばれます。

入力として、顔照合用の正規化された顔画像を用いたときに、
その固有値ベクトルを画像として表示したものを
固有顔(Eigenface) と呼びます。

このような事例もあって、古い時代の画像認識エンジニアは、主成分分析をも使っていることがある。

#### 自動顔登録とクラスタリング
顔照合は、教師なし学習としても定式化できるはずである。
あの顔とこの顔は、同一人物であるかどうかという判断である。
同一人物に属する顔データの一群を作っていく処理である。
クラスタリングには、様々なロジックがある。