OmniAICreator/Qiita-1.07M huggingface dataset:
3-01基数変換

## 基数変換
### 進数
2進数　0と1の2種類の数字を使って，1の次が一つ桁上がりします。
8進数は，0から7までの8種類の数字を使って，7の次が一つ桁上がり
16進数は，0から9までの数字とA，B，C，D，E，Fを使って，Fの次が一つ桁上がり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/0bb465f8-fe57-fc7a-7b1d-d7acac3b4104.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/8f6ffacc-98d8-3d59-ed38-a15944159c22.png)
### 基数と重み対応表
基数は，各桁の重み付けの基本となる数
10進数123.45　⇒　1×10²＋2×10¹＋3×10⁰＋4×10⁻¹＋5×10⁻²　　⇒10進数の基数は10
2進数の基数は2，8進数の基数は8，16進数の基数は16
N進数の各桁の重みは，小数点を基準に左へN⁰，N¹，N²…と増えていき，小
数点を基準に右へN⁻¹，N⁻² …と減っていく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/270fec2e-4de6-6bc8-4652-2b90e7a837d5.png)

### N進数から10進数への基数変換
基数変換　　ある進数で表現されている数値を別の進数で表現し直すこと
二進数の101.101を10進数で表すと
1*4+0*2+1*.1*1/2+0*1/4+1*1/8　⇒　5.625
N進数の値を10進数で表すには，各桁にN進数の重みを掛けて足すこと

### 10進数からN進数への基数変換


### 割り算と掛け算を使う方法
10進数6.375を2進数で表現すると，2進数110.011です。この場合は，整数部（6）と小数部（0.375）に分けて考えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/45087dfa-0054-b065-11d2-53c65418226b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3293109/92bf7d4e-b584-4751-4cbc-4ca44058da43.png)
10進数の値をN進数で表すには，整数部はNで割って余りを下から並
べ，小数部はNを掛けて順に整数部を並べます。

10進数→N進数　	
整数部は，Nで割って下から余りを並べる
小数部は，Nを掛けて順に整数部を並べる

### 2進数と8進数・16進数の関係
2進数→8進数　　小数点を基準に，3桁ずつ区切って，8進数に変換する


2進数→16進数　小数点を基準に，4桁ずつ区切って，16進数に変換
VScode 複数の拡張子を1つのスニペットファイルで使い回す方法 (.js .jsx .ts .tsxファイルを一つのスニペットファイルで)

# 環境
Windows10
VSCode Insiders
※VSCode Insidersは、Visual Studio Codeの開発版であり、最新の機能や改善点を最初に試すことができるプレリリース版です。

※通常のVScodeでも同じようにできると思います。



# スニペットの登録方法
まず、VSCodeの左下の歯車アイコンから
ユーザースニペットを選択
新しいグローバルスニペットファイルを選択
そしてファイル名を入力すると・・・

下記のようなファイルが出力されます。

`[ファイル名].code-snippet`
今回はglobalと入力
`global.code-snippets`が出来ます。



# スニペットファイルの保存場所は
↓ここに
`*****\Code - Insiders\User\snippets\global.code-snippets`
というファイルが出力されます。

※自分はこのフォルダ内にある他のスニペットファイルがあった場合、すべて削除しています。(お試し用のスニペットファイルとか残っていたので)

# ファイル内容の書き換え

```global.code-snippets
{
  "Console log": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "c",
    "body": ["console.log($1);", "$2"],
    "description": "Log output to console"
  }
}


```

`"scope"`の場所で、拡張子をカンマ区切りで指定するだけで複数の拡張子に対応してくれます。

`"javascript,typescript,javascriptreact,typescriptreact"`の場合は
`.js`
`.jsx`
`.ts`
`.tsx`
に対応します。

あとはスニペットごとに"scope"を指定してあげればOKです。
洋服管理アプリを作ってみた

## 制作物
洋服を管理できるWebアプリ。洋服をトップスとボトムスに分けて保管でき、コーディネートの登録もできる。また、画像はトリミングや背景を透過して保存できる。

![スクリーンショット (655).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190511/93bf9faf-d90b-7541-661d-3efb56f6eb4d.png)
![スクリーンショット (657).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3190511/22d038b9-a87e-4fdc-4fad-f58fdc13bdad.png)

アプリのURL  

https://tomo324.pythonanywhere.com/

### 使い方
アカウントを作成しログインをしたら「Submit」というボタンをクリックして画像を登録できます。登録されたトップスとボトムスの画像をそれぞれクリックするとページ下部にクリックされた画像が新たに表示されるので、その下の「コーデを登録」ボタンを押してコーディネートを登録できます。登録したコーディネートは「Outfit」ページから閲覧できます

### 使用技術
・Python  
・JavaScript  
・Flask  
・MySQL 
・Google Cloud Storage  

### 制作期間  
約1ヶ月（2023年4月~5月）  
## 作った理由
外出先で洋服を購入する際に、既に所持しているものと同じ種類のアイテムを再度購入してしまうことがしばしばありました。そこで、持っている洋服を一箇所に整理できるアプリケーションを開発することで、この問題に対策を打つことができると考えました。

## 工夫した点
### GrabCut法の導入
アプリケーションの設計段階から、画像の背景を透過させて洋服だけを表示する機能を付けることを目指していました。しかしながら、既存のAPIを使用すると画像処理に時間がかかり、またコストも高くなるため、代替手段を模索していました。その結果、OpenCVを使ったGrabCut法による前景と背景の分離を採用することにし、外部のAPIに頼らずに背景の透過を実現することが可能となりました。

## 最も苦労した点
### エラーメッセージが表示されない不具合の解決
画像が適切に表示されないという不具合が発生しましたが、エラーメッセージが出てこなかったため、原因の特定に時間がかかってしまいました。そこで、デベロッパーツールを使って調査したところ、Data URIスキームが二重に存在することを発見しました。具体的には、JavaScriptとPythonの両方でエンコードが行われており、それが重複していたというものです。システム全体を把握し、本質的な部分を確認することの重要性を再認識する機会となりました。

## 改善点
### 画面表示の遅さ
Google Cloud Storageに画像データを保存しているためか、画面が遷移してからに画像が完全に表示されるまで時間がかかってしまいます。

## 改善案
### キャッシュを利用できるようにする
画像を表示する際、Data URIスキームにバイナリ形式で取得したデータをくっつけていますが、この方法ではキャッシュが無効化されてしまうため直接URLから表示するようにする必要があります。
### 別のホスティングサービスを利用するか、有料版に移行する
開発環境では画面表示の遅さは見られないため、pythonanywhereの無料プランの通信が遅いことも画面表示が遅い原因の一つとして考えられます。

## DB設計
```Python:app.py
class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), nullable=False, unique=True)
    password = db.Column(db.String(100))

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(30), nullable=False)
    detail = db.Column(db.String(100))
    category = db.Column(db.Enum('tops', 'bottoms'))
    user_id = db.Column(db.Integer, nullable=False)
    image_id = db.Column(db.Integer, db.ForeignKey('image.id')) # Imageモデルとの関連性を定義

class Image(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    object_name = db.Column(db.String(256), nullable=False)  # GCSのオブジェクト名
    public_url = db.Column(db.String(256), nullable=False)  # Google Cloud Storageの公開URL
    user_id = db.Column(db.Integer, nullable=False)
    post = db.relationship('Post', backref='image', uselist=False) # Postとの逆参照を定義

class OutfitImage(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    tops_image_id = db.Column(db.Integer, nullable=False)
    bottoms_image_id = db.Column(db.Integer, nullable=False)
    user_id = db.Column(db.Integer, nullable=False)

```

## GitHubのレポジトリ

https://github.com/tomo324/Closet-App/tree/main
PageUp / PageDownで入力途中のコマンド履歴を補完する

## 対象
- Linux
- Bash

## 概要
- 矢印の上下キーで、過去のコマンド履歴をさかのぼれることは有名
- さらにPageUpとPageDownキーで、途中まで打ったコマンドに続く過去の履歴を出してくれる機能がある
    - 例えばlsと打ってPageUpを押すと、過去に打ったlsコマンドの履歴が出てくる
- 一部のOSではどうやら使えないことに気づいた。使えるようにする方法を説明する

## 方法
- bashrcに次のキーバインドを追加
    - `"\e[5~"`と`"\e[6~"`がそれぞれPageUpとPageDownを表す
```
bind '"\e[5~": history-search-backward'
bind '"\e[6~": history-search-forward'
```

## 参考
- https://qiita.com/jonakp/items/278ece2c7a2441d3d8cf
- https://news.mynavi.jp/techplus/article/techp5472/
Laravelでドメインごとにルーティングを分ける

やったことなかったけど、一つのLaravelに別ドメインからアクセスしたら別サービスとしてふるまう的な案件があったのでメモ。

実験のためにLaravel Sailでやったので、そこから。

## 環境

- Windows10 WSL2(Ubuntu) php7.4.3

## Laravel + Sail インストール

```bash
# Laravelインストール
composer create-project laravel/laravel lara-routing-domain

# Sailインストール
cd lara-routing-domain/
php artisan sail:install
# DBを聞かれて、実験なので何でも良かったけどついクセでmysqlの0を入力してEnter
```

ここまで公式ドキュメント通り

## SailのDockerコンテナ起動

```bash
./vendor/bin/sail up
```

ブラウザに localhost と入力してEnter

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31281/79dc23d0-2ec1-8930-d3dc-661b6d427a37.png)

激かんたんですね。ホストはphp7.4.3でしたが、Sail内では最新の8.2系で動いてます。ありがた。

```bash
# Ctrl+Cで一旦コンテナを停止しとく
```

## ポート番号を変える

記事とは関係ないけど、今回の案件で元々のポート番号が80じゃなかったので、一応近い状態にする。デフォルトだとポート80で待ち受けるように動作しますが、ポート9876に変更します。

```.env
# 以下を追加
APP_PORT=9876
```

```bash
# shellの表示がうざいので -d をつけてバックグラウンドで動くように
./vendor/bin/sail up -d
```

ブラウザに localhost:9876 と入力してEnterすると、さっきの画面が出るはずです。楽チン♪

## 複数ドメインからアクセス

localhostじゃなくて、別のドメインでアクセスできるようにします。といっても適当につけたいドメイン名が自端末を向くようにhostsを編集するだけです。

Windowsでは管理者権限でメモ帳を開くなりして編集してください

```hosts
# C:\Windows\System32\drivers\etc\hosts に下記2行を追加
127.0.0.1 local1.com
127.0.0.1 local2.com
```

ブラウザに local1.com:9876 と入力しても、 local2.com:9876 と入力してもLaraveのページが表示されます。おちゃのこ♪

## ルーティングを分ける

あとはLaraelのルーティングを分離するだけです。あらかじめ `domain()`が用意されているので、それを使うだけのお仕事です。

```php:web.php
// 元はこれ
Route::get('/', function () {
    return view('welcome');
});
```

```php:web.php
// こんな感じに変更
Route::domain('local1.com')->group(function () {
    Route::get('/', function () {
        dd('local1.com');
    });
});

Route::domain('local2.com')->group(function () {
    Route::get('/', function () {
        dd('local2.com');
    });
});
```

ブラウザに local1.com:9876 でアクセスして画面に「local1.com」と、local2.com:9876 でアクセスして画面に「local2.com」と表示されました。ピースオブケイク…！

## まとめ

最近レガシー案件とかトラブル対応ばかりやっていたので、これぐらいの体験でも感動してしまいました（これぐらいの体験とかいうなめっちゃ便利に作ってくれとるぞ）

Laravelありがとう！
Docker初心者が「WSL2(Ubuntu)」と「MacOS」に同じLAMP環境を構築してみる（Windows編）

Windows DesktopでもMacBookでも、
同じ開発環境でPHPを書きたい！
-

そんな思いがあったので、Dockerは未熟レベル、WSL2に関しては知識0の状態から、
エラーと戦いながら手探りで環境構築してみました。（環境自体はあくまで学習用途）
※自分用のメモ書きなので理解してる範囲の説明は省略

バージョン
-
- Windows 11 Home（バージョン22H2）
- Docker Desktop 4.19.0
- docker-compose 1.27.4
- PHP 8.2.0
- mysql 5.7
- Apache 2.4.56

WSL2(Ubuntu)をインストール
-
PowerShell(管理者権限)でインストールコマンドを入力
~~~:PowerShell
PS C:\Users\xxx> wsl --install
~~~
インストールが終わるとUbuntuが立ち上がる
ユーザー名とパスワードの設定を入力したらUbuntuが使えるようになる

コマンドで起動状況が確認できる
~~~:PowerShell
PS C:\Users\xxx> wsl -l -v
  NAME      STATE           VERSION
* Ubuntu    Running         2
~~~
念のためにWSL 2 を既定のバージョンとして設定
~~~:PowerShell
PS C:\Users\xxx> wsl --set-default-version 2
~~~
公式ドキュメントはこちら

https://learn.microsoft.com/ja-jp/windows/wsl/install

上手くいかなかった際はこちらを確認

https://learn.microsoft.com/ja-jp/windows/wsl/install-manual

Docker Desktop for Windowsをインストール
-
Docker Desktop公式ページからインストールできる

https://www.docker.com/products/docker-desktop/

※最新バージョンである4.20.1をインストールしたところ、アプリ内でエラー文が表示された。
対処法を調べたが解決できず、Twitterで検索したところ他にも同じような不具合が発生しているようなので、今回はバージョン4.19.0をインストール

https://docs.docker.com/desktop/release-notes/

Ubuntuを最新状態に
-
パッケージ情報を更新
~~~:Ubuntu
sudo apt update
~~~
パッケージを更新
~~~:Ubuntu
sudo apt upgrade
~~~

ついでにtreeコマンドを使えるように
-
~~~:Ubuntu
sudo snap install tree
~~~

DockerでLAMP環境を構築する
-
今回のディレクトリ構造、docker-compose.ymlファイル、Dockerファイルの内容は下記の記事を参考に（ほぼ丸パクリ）しました。
docker-compose.ymlとDockerfileの書き方は現在学習中です。

https://qiita.com/fkymnbkz/items/bef22871a1029a427649

ディレクトリ構造
-
~~~
.
├── docker
│   └── php
│       └── Dockerfile
├── docker-compose.yml
└── src
    └── index.php
~~~

docker-compose.yml
-
~~~
version: '3'
services:
  app:
    build: ./docker/php
    volumes:
      - ./src:/var/www/html
    ports:
      - 80:80
  mysql:
    image: mysql:5.7
    environment:
      - MYSQL_ROOT_PASSWORD=root
    ports:
      - 3306:3306
    volumes:
      - dbdata:/var/lib/mysql
volumes:
  dbdata:
~~~

Dockerfile
-
~~~
FROM php:8.2-apache
RUN apt-get update \
    && apt-get install -y libpq-dev \
    && docker-php-ext-install pdo_mysql pdo_pgsql
~~~

起動
-
~~~:Ubuntu
# .ymlファイルがある場所で入力
docker-compose up -d
~~~

mysqlに接続
-
~~~:Ubuntu
docker exec -it mysql mysql -p
~~~
SPAとMPAとにおける、基本的なセキュリティ対策の比較

## はじめに
ウェブアプリケーションのアーキテクチャとしてSPA（シングルページアプリケーション）とMPA（マルチページアプリケーション）は広く使用されています。しかし、それぞれのアーキテクチャには異なるセキュリティ上の懸念事項があります。本記事では、SPAとMPAにおける主要なセキュリティ上の脅威とそれに対する対策についてざっくり解説します。
## XSS（クロスサイトスクリプティング）への対策
XSSは、ウェブアプリケーションへの悪意のあるスクリプトの注入による攻撃です。
ユーザーの情報の盗聴や操作、セッションの乗っ取りなどの被害に繋がります。
### SPAでの対策
* エスケープ処理

ReactやAngularのような現代のフロントエンドフレームワークでは、デフォルトでXSS対策が施されており、ブラウザにレンダリングされる前に値を自動的にエスケープすることで、悪意のあるスクリプトの実行を防ぎます。

* CSPの使用

しかし、信頼できないソースからデータを取得する場合や、ユーザからの入力をそのまま反映する場合など、自動的なエスケープが機能しない状況もあります。その場合は、CSP（Content Security Policy）を適用することで、特定のソースからしかスクリプトを読み込めないように制限を設けることが有効です。

webサーバのレスポンスヘッダに"Content-Security-Policy"を設定し、特定のドメインからのスクリプトやリソースの読み込みを許可します。

```
// 例
Content-Security-Policy: default-src 'self'; img-src \*; media-src media1.com media2.com; script-src userscripts.example.com
```
> default-src 'self'

すべてのコンテンツを、サイト自身のドメイン(サブドメイン除く)から取得させることを表す。

> img-src *

任意のドメインからの画像の読み込みを許可する。

> media-src media1.com media2.com;

音声や動画などのメディアは media1.com media2.com のみ許可される。

> script-src userscripts.example.com

userscripts.example.com のスクリプトのみ実行可能。
### MPAでの対策
* エスケープ処理

MPAにおけるXSS対策として最も一般的なのは、サーバーサイドでの出力エスケープです。これは、HTMLに含まれる特殊文字（例：<、>、&など）を安全な表現（例：&lt;、&gt;、&amp;）に置き換える処理を指します。
例えばPHPの場合、htmlspecialchars関数を使用してエスケープを行うことができます。
```
// 例
echo htmlspecialchars('<script>alert("XSS")</script>', ENT_QUOTES, 'UTF-8');
```
また、SPAと同様に、CSPを適用することも有効です。
## CSRF（クロスサイトリクエストフォージェリ）への対策
CSRFは、攻撃者が被害者の代わりに不正なリクエストを送信する攻撃です。
攻撃者は被害者の認証情報を利用し、意図しない操作を実行させることができてしまいます。
### SPAでの対策
SPAのCSRF対策においては、HTTP Only Cookieとともにトークンベースの認証方法を使用するのが一般的です。JWT (Json Web Token) のような状態を保持しない認証トークンを用い、これをlocalStorageやsessionStorageに保存します。
※「JWTの保存先はlocalStorageとsessionStorageのどちらが良いか」という話もありますが、自分はどちらでもいいのかなと思ってます。

しかし、トークンはJavaScriptからアクセス可能であるため、悪意のあるスクリプトによって盗まれてしまう可能性はあります。

### MPAでの対策
* CSRFトークンの使用

対策としてよく用いられる方法が「トークンを用いた対策」です。
各フォーム送信に対して一意なCSRFトークンを発行し、クライアントからのリクエストに対してそのトークンが含まれていることを確認します。
具体的には、以下の流れに沿っています。

ユーザーがアクセスした時、サーバーは一意のCSRFトークンを生成し、フォームとともにクライアントへ送信。
↓
ユーザーがフォームを送信する際に、このトークンをリクエストとともにサーバーへ送信。
↓
サーバー側では送信されてきたトークンを元にしたものと照合。
（一致しない場合はリクエストを拒否。）

## さいごに
Webのセキュリティの基本であるXSS及びCSRFへの対策について、SPAとMPAの両方の視点からそれぞれ簡単な対策をまとめました。
いやもっと他にもあるやろ......、と感じた方はコメント頂けますと幸いです。

## 参考文献
* [Cookie SameSite 属性メモ](https://qiita.com/KWS_0901/items/695bd1ecc17a8c2e6d69)
* [例を通してCSPの理解を深める](https://zenn.dev/mo_ri_regen/articles/content-security-policy)
* [WebアプリケーションでJWTをセッションに使う際の保存先は（自分なりに説明できれば）どちらでもよいと思います -日々量産](https://ryozi.hatenadiary.jp/entry/2022/02/12/073014)
A Tour of Goの英語版と日本語版のコマンドが違う

Goを基礎から勉強しなおしてみようかなと思い。
まずは有名なA Tour of Goをやってみています。

https://go.dev/tour/list

## 手順

Tourのインストール。

```shell
$ go install golang.org/x/website/tour@latest
```

Tourの起動。

```shell
$ ~/go/1.20.4/bin/tour
2023/06/09 00:35:35 Serving content from /Users/mitsuaki1229/go/1.20.4/pkg/mod/golang.org/x/website/tour@v0.0.0-20210616181959-e0d934b43647
2023/06/09 00:35:35 A browser window should open. If not, please visit http://127.0.0.1:3999
2023/06/09 00:35:36 accepting connection from: 127.0.0.1:58785
```

接続確認。

http://127.0.0.1:3999/welcome/1

## メモ

英語版と日本語版だとコマンドが違うので、日本語版が上手く動きませんね…。

### 英語版

https://go.dev/tour/welcome/3

![Screen Shot 2023-06-09 at 0.51.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25578/28faa0c4-2d3e-9964-79b5-a3c393c8d71f.png)

### 日本語版

https://go-tour-jp.appspot.com/welcome/3

![Screen Shot 2023-06-09 at 0.50.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25578/5f194287-57bc-1a0f-8220-95b73c2b03dc.png)
共用サーバーのPHP環境などに画像処理のモジュールが入っているか確認する方法

PHPで画像を扱うライブラリとして```intervention/image```が有名だと思われるのでそちらを使用するが、前提として以下のサーバー環境を満たす必要がある。

**PHP：ver5.4以上**
**必要モジュール：GD Library もしくは Imagick PHP extension**

特に共用のレンタルサーバーについては.htaccess以外の変更はできないので、画像を扱う場合は必要なモジュールがインストールされているか知っておきたい。

一応、各サーバー運営会社のHPに仕様情報はあると思うが、自分でチェックする方法は下記のようになる。

## GD or Imagick がインストールされているか調べる

取り扱うファイルの種類については個別に設定するので、例えばアップロードした画像をWebサイトで使用するのにwebp形式を用いるのであればそれらが対応しているかもチェックする必要がある。

### GDの場合

phpinfoの中身をコマンドラインで調べる。

supportについてはGDに関係ないものも表示されてしまうこともあるが、おおよそサポートされている画像形式については確認することができる。

```bash
$ php -i "(command-line 'phpinfo()')" | grep GD

GD Support => enabled
GD Version => bundled (2.1.0 compatible)

$ php -i "(command-line 'phpinfo()')" | grep Support

GD Support => enabled
GIF Read Support => enabled
GIF Create Support => enabled
JPEG Support => enabled
PNG Support => enabled
WBMP Support => enabled
XPM Support => enabled
XBM Support => enabled
WebP Support => enabled
BMP Support => enabled
```

### Imagickの場合

インストールされているImagickの情報が返ってくる。

```bash
$ convert -version

Version: ImageMagick 6.9.10-68 Q16 x86_64 2021-10-14 https://imagemagick.org
Copyright: © 1999-2019 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC Modules OpenMP(3.1) 
Delegates (built-in): bzlib cairo fontconfig freetype gslib jng jp2 jpeg lcms ltdl lzma openexr pangocairo png ps rsvg tiff wmf x xml zlib
```
【Git】Gitで共同開発をするために覚えておくべき内容まとめ


## はじめに

Git初心者の人向けに必要なコマンドや仕組みを解説していく予定です。
（初回編集では超最低限必要なことしか書けないので随時アップデート予定）

## そもそもGitって何？

Gitはバージョン管理システム(VCS)の中で一番メジャーに利用されているソフトウェアのことです。
同じバージョン管理システムとしてはMercurial、Subversionなどがあります。

## Gitの基本的な仕組み

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/86a06932-3684-b9c8-4f05-30fa948fe006.png)

Git自体はファイルの更新差分を管理するDBのようなものです。
普段の開発ではローカル環境内にあるローカルリポジトリに対して変更差分のコミットをすることで開発作業を行います。

## Gitを導入する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/90b0ca91-53d1-25e5-b4d0-7cfe9e5ed0cc.png)

リモートリポジトリがない新規の場合Gitを対象とするディレクトリ（フォルダ）内に作成する必要があります。

ローカルリポジトリを作成する場合は`git init`コマンドでリポジトリを作成できます。

## 変更差分をGitに登録する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/c100e01c-2736-91e2-31ce-8c3a7a9bf268.png)

例：

git initでローカルリポジトリを作成したディレクトリ内で「FileA.txt」を作成します。

```
touch fileA.txt
git status
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/72b068f2-2c25-441c-b906-9026e376b112.png)

```
git add fileA.txt (全部指定したい場合は . もしくは -Aでも良い)
git status
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/44b0c332-98bf-8469-b287-ba3248073437.png)

このようになっていれば、コミットの対象とするファイルがインデックスに登録された状態になっています。

この後に`git commit`で差分情報をリポジトリに登録します。

```
git commit -m 'first commit' (初回コミットはお作法的にこんな感じで書く)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/f53a2ac4-5043-4ed8-6569-c7ec75680abf.png)

gitに更新差分が登録され、`git log`コマンドを使うと更新したコミット情報が表示されます。

## gitのブランチを分割して他の変更に影響を与えないようにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/fd7a4ee2-5138-686f-17a9-e20a71310a4a.png)

以下のコマンドではブランチを作成して図のようにdevelopブランチに移動できます。

```
git branch develop 
git checkout develop 
(上記を省略したい場合は git checkout -b develop でもいい)
git branch 
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/0d7215db-b493-6ae6-2603-c825b9ee1daf.png)

この状態であれば他の開発メンバーがMainブランチに対して変更を加えたとしても自分のブランチが分かれているため影響を与えないようにできます。
MainブランチにDevelopブランチの差分を入れたい場合は別のマージという作業が必要です。（後で書く）

## ローカルリポジトリに更新情報を反映したい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/c9b1255b-c28e-d005-c8e4-76d6c285ed69.png)

開発チームでは自分のコードの成果物コードをリモートリポジトリに格納することで
コードの共有やレビューをします。

例えばリモートリポジトリに自分のMainブランチの差分を入れたい場合は初回に下記のようにプッシュ先を設定して`git push`コマンドを使ってリモートリポジトリに差分情報を送信します。
（サンプルはgithubのリモートリポジトリに送る場合）

```
git remote add origin https://github.com/tukapai/sample-git.git
git branch -M main
git push -u origin main
```

基本的にはこのような操作をすることでチーム開発で必要な情報のやりとりができます。

## その他 Tips

### リポジトリのコミット数の合計値を知りたい
`git rev-list --count`を利用する。

```
❯ git rev-list --count HEAD
266
```
20分でまとめる備忘録　Luaの文字列を連結する

# 備忘録するきっかけ
LuaにもC#のように+=で繋ぐ「+演算子」がある、と思っていたら無かった。
# 連結方法 
Luaで文字列連結をするには、以下二つしかない
* `..`演算子による連結
* string.format()を使用する連結

# `..`演算子による連結
`+=`のように既存の文字列に追加したい場合はこうなる。
スマートに見えない...　ただ、知らなくても読めるので、これで十分なのかもしれない。`+=`はエゴなのかも
```lua
local hello = "hello"
local hello = hello .. " word"
print(hello)
=> hello word
```
# `..`演算子による連結によるはまりポイント
文字列に数値を連結させたい場合、普通にこう書いたところエラーになった。
```lua
local price = 100
local priceStr = "price "..price
print(priceStr)
=> エラー
```
Luaでは数値を文字列と自動的に連結できないらしい。連結するにはいちいち`tostring()`で文字列にする必要がある
```lua
local price = 100
local priceStr = "price "..tostring(price)
print(priceStr)
=> price 100
```
# string.format()を使用する連結
C言語系の、printf（）的な書き方。string.format系はあまり使わない印象があったが、Luaに限るとこちらの方がスマートに見えてくる
```lua
local price = 100
local priceStr = string.format("price %d", price)
=> price 100
```
%dの部分は指定子といい、`%d`は整数(10進数)、`%s`の場合は文字列が代入される。他にも種類があるが９割この二つしか使わなさそう。

# 公式参照
https://www.lua.org/manual/5.3/manual.html#pdf-string.format
goenvの導入手順

## 手順

### goenvのインストール

Homebrewでgoenvをインストールする。

```shell
$ brew install goenv
```

環境がコンフリクトして上手く行かなくなるため、元々Goがインストールされている場合はアンイストールする。

```shell
$ brew uninstall go
```

環境変数の指定。

```shell
$ echo 'export GOENV_ROOT="$HOME/.goenv"' >> ~/.zshrc
$ echo 'export PATH="$GOENV_ROOT/bin:$PATH"' >> ~/.zshrc
$ echo 'eval "$(goenv init -)"' >> ~/.zshrc
$ source ~/.zshrc
```

```shell
$ goenv -v
goenv 2.0.7
```

### Goのバージョン指定

現在のGoのバージョンを確認する。

```shell
$ goenv global
system
```

```shell
$ go version
go version go1.20.2 darwin/amd64
```

最新のGoをインストールする。

```shell
$ goenv install -l | tail -n 1
  1.20.4
```

```shell
$ goenv install 1.20.4
```

```shell
$ goenv local 1.20.4
$ goenv rehash
```

```shell
$ go version
go version go1.20.4 darwin/amd64
```
二つの画像を分類する簡単なAIを作る

## 序論
こんにちは、今日はAIの世界に足を踏み入れてみましょう。具体的には、MNISTという手書き数字のデータセットを使って、数字の[3]と[4]を見分けるAIを作ります。この記事では、AIの作り方を一から説明します。プログラミングの経験がない方でも大丈夫。小学生でもわかるように説明しますので、一緒に楽しみながら学んでいきましょう。

## AIとは？
まずは基本から。AIとは何でしょう？AIはArtificial Intelligenceの略で、日本語では「人工知能」と訳されます。人間が持つ知能をコンピュータ上で再現しようとする技術のことを指します。例えば、人間が自然に行うような判断や学習、認識などをコンピュータにさせることがAIの目標です。

## 機械学習とは？
AIの中でも特に注目されているのが「機械学習」です。機械学習は、人間がプログラムを書く代わりに、コンピュータが自分で学習して問題を解く技術のことを指します。具体的には、大量のデータからパターンを見つけ出し、そのパターンを使って新しいデータに対する予測を行います。

## ニューラルネットワークとは？
ニューラルネットワークは、機械学習の一種で、人間の脳の神経細胞（ニューロン）の働きを模倣したものです。ニューロンは複数の入力を受け取り、それらの入力に基づいて出力を行います。ニューラルネットワークも同様に、複数の入力データを受け取り、それらのデータに基づいて出力を行います。

それでは、これらの概念を使って、実際にAIを作ってみましょう。

## プログラムの準備と今回作成するAIについて
今回は、MNISTデータセットを使って、数字の`3`と、`4`の画像を判別するAIを作ります。
まずは必要なライブラリをインポートします。今回は、PythonのライブラリであるTensorFlowとKerasを使います。TensorFlowは機械学習のためのライブラリで、KerasはTensorFlowをより簡単に操作するためのライブラリです。詳しくは[TensorFlowの公式チュートリアル](#https://www.tensorflow.org/?hl=ja)や[Kerasの公式ドキュメンテーション](#https://keras.io/ja/)を参照してみてください。

```Python
import tensorflow as tf
from tensorflow import keras
```

## データセットの準備
次に、MNISTの手書き数字データセットを読み込みます。MNISTは機械学習でよく使われるデータセットで、0から9までの手書き数字の画像とそのラベル（正解の数字）が含まれています。今回はこの中から`3`と`4`の画像だけを使います。

```Python
# MNISTデータセットの読み込み
(x_train, y_train), (x_test, y_test) = keras.datasets.mnist.load_data()

# [3]と[4]のデータだけを抽出
train_filter = (y_train == 3) | (y_train == 4)
test_filter = (y_test == 3) | (y_test == 4)

x_train, y_train = x_train[train_filter], y_train[train_filter]
x_test, y_test = x_test[test_filter], y_test[test_filter]

# ラベルを二値化（[3]を0、[4]を1に変換）
y_train[y_train == 3] = 0
y_train[y_train == 4] = 1
y_test[y_test == 3] = 0
y_test[y_test == 4] = 1
```

## モデルの構築
次に、ニューラルネットワークのモデルを構築します。今回はシンプルな全結合層（Dense）のみからなるモデルを作ります。全結合層は、前の層の全てのニューロンが次の層の全てのニューロンと結合している層のことを指します。

```Python
# モデルの構築
model = keras.models.Sequential([
    keras.layers.Flatten(input_shape=(28, 28)),
    keras.layers.Dense(128, activation='relu'),
    keras.layers.Dense(1, activation='sigmoid')
])
```

## モデルの学習
モデルを構築したら、次はモデルを学習させます。学習とは、訓練データを使ってモデルのパラメータを調整することを指します。モデルのパラメータとは、ニューロンの重みやバイアスのことを指します。

```Python
# モデルのコンパイル
model.compile(optimizer='adam',
              loss='binary_crossentropy',
              metrics=['accuracy'])

# モデルの学習
model.fit(x_train, y_train, epochs=5)
```

## モデルの評価
学習が終わったら、モデルの性能を評価します。評価とは、テストデータを使ってモデルの予測精度を確認することを指します。テストデータはモデルの学習には使われていない新しいデータで、これを使ってモデルの性能を評価することで、モデルが未知のデータに対してどれくらいの予測精度を持つかを確認します。

```Python
# モデルの評価
test_loss, test_acc = model.evaluate(x_test, y_test, verbose=2)
print('\nTest accuracy:', test_acc)
```

## モデルの利用
最後に、学習したモデルを使って、新しい画像が[3]なのか[4]なのかを予測してみましょう。ここでは、デスクトップに保存されている画像を読み込んで予測を行います。

```Python
from PIL import Image
import numpy as np

# 画像の読み込み
img = Image.open('desktop/my_image.png').convert('L')

# 画像をMNISTのデータ形式に変換
img = img.resize((28, 28))
img = np.array(img) / 255.0

# モデルを使って予測
prediction = model.predict(img[None, ...])

# 予測結果の表示
if prediction < 0.5:
    print("This image is [3]")
else:
    print("This image is [4]")
```

`
desktop/my_image.png
`　ここには自分のファイルパスを入れてください。
これで正解すれば、分類型AIは完成です。

以上で、MNISTの手書き数字データセットを使って、`3`と`4`を分類するAIの作り方を説明しました。AIや機械学習についてはまだまだ深いですが、この記事が皆さんの学習の一助になれば幸いです。
QGIS / Qt Designerが保存ダイアログで落ちる問題を解決（Dell環境）

※Dell環境に限る
# 結論

Dell Backup and Recoveryをアンインストールする！！（または最新版にアップデートする）

**結果**
保存ダイアログで落ちない！！！

# 経緯

QGISいじりは非常に楽しいものだが、長年地味に悩まされていた問題があった。
それが「保存ダイアログで落ちる問題」。
![保存ダイアログ。これが開くと間もなく落ちていた](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473993/d9baa0ac-db3e-768c-2379-83c7b8c742ba.png)


「名前を付けて保存」を行うと、そのままアプリケーションごとクラッシュしてしまう……
ときどき落ちないが、ほぼ再現するため不便極まりなかった。
あとQGISバージョンによっては落ちなかった印象もある。

ということでQGISはだましだましやっていたが、この度QGISプラグインづくりにチャレンジしよう！
と思った矢先、Qt Designerでも保存ダイアログが落ちてしまう……

さすがに作業どころではないため、一念発起放置していた問題を解決したかった。

# 対応

とりあえず、何もわからない状態なので調べるほかない。

**ChatGPT**
まずChatGPT3.5先生に聞いてみたが、最新の情報は知らんとしか言ってくれなかった。

**Google**
次にGoogle先生。以前もお伺いしたが、聞き方がわからず解決に至らなかった。Web検索もAIプロンプト並みに技術がいるよなあ。
今回の試行錯誤は以下の通り：
- "qgis" "保存" "落ちる"
- "保存ダイアログ" "落ちる"
- "Qt Designer" "保存できない"
- save dialog crashes

アホの子みたいな履歴だが、天啓降りて「save dialog crashes」と英語で打ち込み検索結果1ページ目をスクロールすると、そこに答えがあった。

https://help.world-machine.com/topic/crash-when-file-open-save-dialog-opens/

　※ 後で気付いたが、無関係の3D地形ツールの公式ページだったらしい。

**上記要約**

> Dell使いか？**Dell Backup and Recovery**があると**Qt**で怒られ発生するぞ
> **Dell Backup and Recovery**は最新版にするかアンインストールだ
> Dellのページも参照してな：
>
 https://www.dell.com/community/Productivity-Software/Backup-and-Recovery-causing-applications-using-Qt5-DLLs-to-crash/td-p/4590325/page/2


**Dell要約**
> アップグレードしろよ

---
QGISとQt Designerの共通項の1つが「**Qt**」だったようだが、初心者なので推測がつかなかったな。
わかっていたら、もう少し早く解決できたかも。

ということで、この**Dell Backup and Recovery**は使用予定がなかったためお役御免とした。
再起動後、無事QGISとQt Designerで保存ダイアログで落ちないことを確認できたので解決。よかった。
Rails6 x TypeScript x Reactで環境構築

Rails6, TypeScript, Reactを使って環境構築を行います。
画面にHello Worldという文字列を表します。
Dockerは使っていません。
RailsにReactを導入するには`react-rails`というgemが有名ですがそれも使わず、rails6のデフォルトである`Webpacker`を使ってReactを使えるようにしようと思います。

## 環境
`rails 6.1.4.4`
`ruby 3.1.0`
`webpacker 5.0`
`node 16.13.0`

## rails new
まず初めにrailsアプリケーションを作ります。
バージョンは6.1.4.4で固定にしました。

```terminal
rails _6.1.4.4_ new myapp
```

nodeのバージョンが新しすぎると、webpackのコンパイル時にエラーになることがあるので
`16.13.0`で固定にしました。

```terminal
nodenv local 16.13.0
```

## React導入
railsコマンドを使ってReactを導入します。

```terminal
bin/rails webpacker:install:react
```

## TypeScript導入
railsコマンドを使ってTypeScriptを導入します。

```terminal
bin/rails webpacker:install:typescript
```

## ルートページ編集
ルートページをカスタマイズしましょう。
homeコントローラとindexアクションを作成します。

```terminal
bin/rails g controller home index
```

ルートへアクセスしたらhomeコントローラのindexアクションが実行されるようにしましょう。

```rb:config/routes.rb
Rails.application.routes.draw do
  root 'home#index'
end
```

## React コンポーネント作成
トップページに表示するReactコンポーネントを実装します。
今回はHello Worldという文字列を表示するだけのコンポーネントです。

```tsx:app/javascript/packs/App.tsx
import * as React from 'react'

export default function App() {
    return (
        <h1>Hello World</h1>
    )
}
```

## Reactのエントリーファイル編集
先ほど作成したコンポーネントとDOMを紐付けます。
前の手順で自動的に`hello_react.jsx`というファイルが自動的に作成されていて、これを編集します。
`hello_react.jsx`を`index.js`にリネームして、IDがappとなっているDOMをマウントするようにします。

```js:app/javascript/packs/index.js
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'

document.addEventListener('DOMContentLoaded', () => {
  const app = document.getElementById('app')
  const root = createRoot(app)
  root.render(<App />)
})
```

## application.html.erb
`javascript_pack_tag`を使って先ほどのindex.jsを読み込みます。

```erb
<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div id="app"></div>
    <%= javascript_pack_tag 'index' %>
    <%= yield %>
  </body>
</html>
```

あとは`bin/rails s`でrailsサーバーを起動すると画面を確認できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551042/0ade4fdf-6a6f-8c94-90c0-c4f3bd9eefea.png" width="500" />


## 参考
https://zenn.dev/naoki0722/articles/272ef57c6dafba
https://zenn.dev/masanao/articles/de8cb66bb6e417
https://www.youtube.com/watch?v=oyjzi837wME
【Access】全角と半角の区別問題の再来

# はじめに
数ヶ月前にユーザーから Access アプリケーションが正常に動作しなくなったと報告があり、6月に入ってから同僚が原因を調査することになった。

しかし、会社のPC環境(Windows 10 バージョン 22H2 / Office バージョン 2303)で対象のAccess アプリケーションを動かしてみても正常に動作してしまいます。

# 原因
動作しない原因として、フォーム名やクエリ名やDB列名には日本語(全角と半角)が使用されており、全角と半角が区別されるためにエラーになり動作しなくなっている。

以前、そんな記事を書いた。しかし、この問題は Windows Update によって解決したと記憶している。

https://qiita.com/yaju/items/2df7114da828e45fceac

>Access のバージョンに依存性はなく Windows 10 バージョン 2004 / 20H2 /21H1 /21H2 上での Access アプリケーションで発生します。
>[Windows 10 バージョン 2004 以降で 半角カナのフォームを含んだ Access ファイルでエラーが発生する](https://social.msdn.microsoft.com/Forums/ja-JP/4e6223e2-34d0-4a5f-bb61-109bc28040b6/windows-10-1249612540124721251912531-2004-201973847712391?forum=officesupportteamja)

もしかしたらユーザーのWindows 10のバージョンが古いのかも知れないと思ったのですが、ユーザーの環境は、Windows 10 バージョン 22H2 / Office バージョン 2208　となっていました。

OS上は問題ないのです。Officeのバージョンをユーザーと同じ 2208 にダウングレードしてみたところ、同じ現象が出るようになりました。

https://support.microsoft.com/ja-jp/topic/%E4%BB%A5%E5%89%8D%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E6%88%BB%E3%81%99office-2bd5c457-a917-d57e-35a1-f709e3dda841

Office 2208 という観点から改めてネット検索してみたところ、バージョン 2206 から発生しているようです。

>７月に入ってから今まで正常に動作していたがAccessがエラーになってしまいました。
エラーは、「INSERT INTO ステートメントに認識できないフィールド <〇〇> があります。～」です。
Office Standard（2013以前あり）のPCで、Runtime2016で動作しているAccessのシステムです。
プログラムやデータに変更が無く複数PCで同時期に発生し、次第に増えてきているため、
WindowsUpdate／OfficeUpdateが原因ではないかと思い調査したところ、
Officeバージョンによって動作が異なることがわかりました。
[今まで動作していたAccess（Runtime2016）がエラーになってしまう](https://answers.microsoft.com/ja-jp/msoffice/forum/all/%E4%BB%8A%E3%81%BE%E3%81%A7%E5%8B%95%E4%BD%9C/a3ea437b-eaf8-4e28-a9c1-67527bf56034?page=1%7C)


>2022年08月30日 スタッフブログ　平川　開発　
先月のアップデート以降、それまで全く問題なく動作していた処理が突然エラーを
起こすようになりました。AccessにてADOを使用する際の、全角半角の認識に関する
ルールが変わってしまったようです。
[SQL実行時における全角・半角の識別について - 株式会社トウサイ](https://www.tousai.co.jp/blog/14058/)

# 対応
Office バージョンを上げてもらう。
どのバージョンから改善されたのか分かりませんが、2303以降なら問題が発生しません。

Office バージョンを上げれない場合、Access ランタイムだけでも最新版を入れればエラーは出なくなるのではないかな。ランタイムなので開発は出来ないですけどね。

ちなみに、Windows 10 の NLS (National Language Support) バージョンは、既に 6.2 になっているので、 レジストリを直してもこの問題は解決しません。

# 最後に
Microsoftは、Windows Updateの際に全角と半角の区別で日本で問題になっていたのだから、Officeのバージョンアップの時でも全角と半角の区別問題を検証項目に上げていれば、同じことを起こさないで済んだはずなんだけどね。
Notchとdisguiseを連携させてリアルタイムな映像演出をする！！

Notchで作ったエフェクトをdisguiseにもっていき、リアルタイムでMIDIで動かせるようにしたい！
という野望の元、どっちのソフトもノータッチの状態から奮闘した男の記録。
備忘録程度の記事なので参考程度に聞き流してください。

### 目次
[1.Notchでエフェクトを作る](#1-Notchでエフェクトを作る)
[2.Notchからdisguiseへエクスポート](#2-Notchからdisguiseへエクスポート)
[3.disguiseでエフェクト適用](#3-disguiseでエフェクト適用)
[4.MIDI割り当て](#4-MIDI割り当て)
[5.おわりに](#5-おわりに)

# #1. Notchでエフェクトを作る
今回はカメラエフェクトをつくって持っていきます。

が、まずはNotchをインストールしないことには始まりません。はい。ここからダウンロード＆インストールしてください。
https://www.notch.one/support/downloads_area/
僕はNotch Builder Learning, Base & Proというやつを入れました。ちな有料版はドングルぶっ刺した状態じゃないと動かないのでご注意を。
基本操作はこれなぞって覚えた。
https://youtube.com/playlist?list=PLQxv2qLCR1q3fMUGOv1le4We0Xs7wC8od
やっぱ日本語じゃないとやだよね。
でもNotch公式サイトやYoutubeも結構親切だからおすすめ。（公式サイトのノードの説明とかわかりやすかった）

さて、エフェクトができました。
![スクリーンショット 2023-06-08 230919.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473944/6c0d5f69-a6cb-e7d4-fd2a-05b819f7e44a.jpeg)
だいぶすっ飛ばしました。というのもこれマネしただけなので、
https://www.youtube.com/watch?v=f2Y2otBS1uY
かっこいいですね！

# #2. Notchからdisguiseへエクスポート
次は作ったエフェクトをdisguiseへエクスポート！
しかし、なにやらNotchの方で設定が必要なようです。
はい、全部やりかたここに書いてありますね。
https://qiita.com/sryser511/items/c71ae4f583c6ba4e3c83

僕はカメラ入力にエフェクトをかけたかったのでNotchの方でvideo in sourceのノードをつないでいたのですが、カメラ映像を取り込むのはdisguiseでやることだったので、普通にvideo loaderのノードでよかったです！
僕の場合だとglowとか色とかビデオソースをdisguiseで変えられるようにしたかったので、そこら辺のパラメーターの？ボタンをポチっと押しました。

# #3. disguiseでエフェクト適用
よーしエフェクトできたし、disguiseで動かすぞ～！

はい。まずはインストールですね。ここからどうぞ。
https://www.disguise.one/jp/get/
無料体験版でもライセンスの申込みが必要です。
<font color="red">※注意　</font>disguiseのインストール先は必ずファイル階層全てが英数字のファイルにしてください！（日本語が入っているとdisguise開けません。ここで僕は多くの時間を犠牲にしました。）

disguiseの概念、基本操作はこちらから。この動画一つでだいぶ動かせるようになりました。
https://www.youtube.com/live/E1sdvCzOtrU?feature=share

disguise側でNotchファイル動かすやり方は大体#2のリンク先に書いてあるので見てください。
僕は申し訳程度のTIPSを書きます。

・プロパティパネルの×をctrl+左クリックで固定
・タイムラインをAlt+ホイールでzoom in/out
・cam inは認識されないことがある。web cam抜き差ししてdisguise再起動で直った。

# #4. MIDI割り当て
実際にオペするとなるとMIDI割り当ては必須ですよね。
今回僕はnanokontrol2に割り当てました。やり方はこれ
https://www.youtube.com/watch?v=4YWZZoBt1LA&t=520s
頑張ってスペイン語リスニングしましょう。

これも最初disguiseがナノコンを認識してくれませんでした。（抜き差しして再起動で直った。）
また、動画内でも言ってくれてますが、ボタンはNoteボタンではなく、CCボタンにしましょう。じゃないとボタンが割り当てられません。
![スクリーンショット 2023-06-09 000330.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473944/87113f02-14e6-8dc2-d881-7c551c0d299c.jpeg)

# #5. おわりに
なんとかできました
https://youtu.be/juRPzReXLrw

まだまだdisguiseのタイムラインだとかNotchのエフェクトだとかいろいろ勉強しないといけないことは山積みですが、とりあえずやりたいことはできたので良かったです。
引用させていただいた記事やチュートリアル制作者の方々に多大なる感謝を申し上げます。

文章下手でごめんなさい。
今回はめちゃ初歩的な内容だったので次回はもっと発展させたいです。
誰かの役に立つことを信じて。。。。
ドットインストールのプログラミング勉強会256timesに参加しました

## フロントエンド案件修行 給食ぱん屋編に参加しました。

初めてゼロからWebサイトを作る経験として、とても楽しかったです。
こちらが４日間で作成した、<a href="https://colcmia.github.io/">給食ぱん屋のサイト</a>です。
![Screenshot 2023-06-08 20.55.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2976760/d42ce4ee-139c-55df-1390-424d3b5d1f4f.png)

ドットインストールの動画で学んだ知識を実際に利用する、貴重な経験が出来ました。採点されるわけでもなく、正解が1つではなく、他の仲間が全く違うサイトを作成するのを見て、学びを深めました。初学者が一歩前進したい場合は、本当にお勧めです。

覚え書きとして、工夫した点をまとめてみました。

#### ヘッダー
- 各項目へジャンプする為の、ボタンを設置しました。
- ハンバーガーメニューも勉強し、書いてみましたが、項目が解りにくいので、最終的にはボタン設置に落ち着きました。

#### ヒーローエリア 
- ３枚の写真を配置して、スライドショー的に切り替えるようにしました。最初、違うサイズの写真を配置したら、切り替わるごとに写真の大きさが代わり、この修正の仕方が解りませんでした。最終的には、同じサイズの写真でスライドショーをすることにしました。
- キャッチコピーを写真に重ねようとしましたが、文字が読みにくいのと、スライドショーの上にキャッチコピーを重ねる方法が解らず、スライドショーより上にキャッチコピーを置きました。

#### 商品紹介セクション
- 画像が交互に来るように配置しました。

#### お知らせセクション
- 大きさの違う画像を並べたので、少し違和感がありますが、修正の仕方が解らずそのままにしました。

#### 店舗情報セクション
- 最初は`<P>`タグで内容を羅列していましたが、位置が揃わずしっくりこないので、最終的には、テーブルで配置してみました。

#### お問い合わせセクション
- 3つの囲いの始まりを揃えたかったのですが、上手くいかず、中央揃えにしました。

#### フッター
- 著作者情報とSNSアイコンを並べて見ました。Bootstrap Iconsのアイコンを使いました。
SlackとDatabricksの連携に便利なPythonアプリをDatabricksクラスター上で動かす方法

# はじめに

SlackとDatabricksを連携する際に、連携するためのPythonアプリを別で動作させる必要があり、Databricks上で動かしたいなーと思っていたところ、こちらの記事が出てきました。
[Databricksクラスターのドライバーで動作するLLMアプリへのアクセス](https://qiita.com/taka_yayoi/items/f7538636e88bc8973769) (@taka_yayoi)

他のアプリも同じ要領で動作させられるのでは？　と思いこちらのSlack連携アプリを動作させてみました。
[Databricksのデータに SQLDatabaseChainを使ってSlackからアクセスしてみた](https://qiita.com/maroon-db/items/ed862592efb65b06d2a9)

これで、Databricksだけで環境を揃えることが出来るようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2206424/e9db9929-b91b-b24a-98ca-200b53fd8735.png)



# ノートブック

以下をDatabricks上にインポートしてください。

https://sajpstorage.blob.core.windows.net/maruyama/qiita_app/SQLDatabase_Flask.html

# 利用方法

1. Slack Appを作成します。
[こちらの記事](https://qiita.com/maroon-db/items/ed862592efb65b06d2a9)を参考に、Slack Appを作成し、Bot Tokenと App Tokenを取得してください。　　

1. OpenAI APIのSecret Keyを取得します。

1. 上記のキーを [Databricks Secret](https://sajpstorage.blob.core.windows.net/demo-asset-workshop2021/blog/databricks_cli_and_secrets.html)に登録します。
1. 対象とするデータベースやテーブルをノートブック内に指定します。（ノートブック内のテーブルはサンプルとしてデフォルトで用意されております）
1. ノートブックを全て実行

以上です。

# コードの紹介

今回は Flask AppとSlack Voltを組み合わせて動作させました。ポートに対して外部からアクセス出来るようにする必要があります。コードの全体はノートブックをご覧ください。

```python
from flask import Flask, request
 
flask_app = Flask("dbchain")
handler = SocketModeHandler(app, SLACK_APP_TOKEN)
 
@flask_app.route('/', methods=['POST'])
def slack_events():
  return handler.start(request)
 
if __name__ == '__main__':
    handler.start()
    flask_app.run(host="0.0.0.0", port="7777")
```

# 最後に

本番環境などの場合は、別でアプリサーバを用意した方がいいかと思いますが、デモや開発用途としては利用出来ると思います。是非お試しください。
2023年に開催される全国のPHPカンファレンスのまとめ

# 2023年に開催される全国のPHPカンファレンスのまとめ

## [PHPerKaigi 2023](https://phperkaigi.jp/2023/)
- 開催日 : 2023年3月23日（木）～3月25日（土）
- 開催場所 : 練馬区立区民・産業プラザ Coconeriホール およびニコニコ生放送
- Twitter : https://twitter.com/phperkaigi
- ハッシュタグ : [#phperkaigi](https://twitter.com/hashtag/phperkaigi?src=hash)

## [PHPカンファレンス福岡 2023](https://phpcon.fukuoka.jp/2023/) 
- 開催日 : 2023年6月24日（土）
- 開催場所 : 福岡ファッションビル
- Twitter : https://twitter.com/phpcon_fukuoka

## [PHPカンファレンス沖縄 2023](https://phpcon.okinawa.jp/) 
- 開催日 : 2023年9月16日（土）
- 開催場所 : 沖縄県内の会場
- Twitter : https://twitter.com/phpcon_okinawa

## [PHP Conference Japan 2023](https://phpcon.php.gr.jp/2023) 
- 開催日 : 2023年10月8日（日）
- 開催場所 : 大田区産業プラザPiO
- Twitter : https://twitter.com/phpcon/


## 過去のPHPカンファレンスまとめ
- [2022年に開催される全国のPHPカンファレンスのまとめ](https://qiita.com/akase244/items/f685b21ff2a8fbce6e0b)
- [2020年に開催される全国のPHPカンファレンスのまとめ](https://qiita.com/akase244/items/05c6090486b4c893be04)
- [2019年に開催される全国のPHPカンファレンスのまとめ](https://qiita.com/akase244/items/d74316f6ee8fa464cfa3)
- [2018年に開催される全国のPHPカンファレンスのまとめ](https://qiita.com/akase244/items/8b17a7caa7223574e22f)
- [2017年に開催される全国のPHPカンファレンスのまとめ](https://qiita.com/akase244/items/274e11da0196a4c26b2a)
- [2016年に開催される全国のPHPカンファレンスのまとめ](http://qiita.com/akase244/items/a390b775267ab095e912)
- [2015年度 全国の PHP カンファレンス のまとめ](http://qiita.com/mukaken/items/71dbe2dde462d459adc8)
nodeのDockerイメージを使うと Text file busy エラーが発生する

# はじめに

※備忘録的に、そして偶然この記事を発見した悩める人々への手助け目的なので、最小構成の特定までは行なっていません。

nodeのDockerコンテナを起動して何かしらのコマンドを実行した時に以下のようなエラーが出てしまう人には役に立つかもしれません。

```:発生したエラー
/usr/bin/env: 'node': Text file busy
```

# エラーが発生するイメージ

他にもあるかもしれませんが確認したものを列挙します。

- `node:slim`
- `node:20-slim`

ちなみに`node:slim`はバージョン指定なしですが、20系になります。

# 解決方法

以下のイメージを使うようにします。

- `node:18-slim`
- `node:16-slim`

# 参考

- [GitHub - Node 20 images give error /usr/bin/env: 'node': Text file busy](https://github.com/nodejs/docker-node/issues/1912)
Keynoteからの書き出しで変なcharが入る



# 症状

Keynoteから画像を書き出すときに，名前に変なコードが入る．lsとかでautocompleteできない．


# 解決法

原因とか，Keynoteのバージョンがわかんなかったので，とりあえず，Ruby コードでconverterを作った．役立つかな？？？


# コード

```ruby
 1  dir = './'
 2  Dir.glob(dir+"*.*").each do |name|
 3    p name
 4    p name.bytes
 5    correct_name = name.bytes.collect do |bb|
 6      bb.chr if bb< 128
 7    end
 8    p target = correct_name.join("")
 9    p target == name
10    system "mv #{name} #{target}"
11  end
```


# 結果

こいつを動かすと，

```bash
> ruby ../del_invisible_chars.rb
"./‎figs.‎001.png"
[46, 47, 226, 128, 142, 102, 105, 103, 115, 46, 226, 128, 142, 48, 48, 49, 46, 112, 110, 103]
"./figs.001.png"
false
"./‎figs.‎002.png"
[46, 47, 226, 128, 142, 102, 105, 103, 115, 46, 226, 128, 142, 48, 48, 50, 46, 112, 110, 103]
"./figs.002.png"
false
"./‎figs.‎003.png"
[46, 47, 226, 128, 142, 102, 105, 103, 115, 46, 226, 128, 142, 48, 48, 51, 46, 112, 110, 103]
"./figs.003.png"
false
```

となります．fishとかFinderでは見た目一緒なんですが．あ，emacsにpasteすると見えますね．でも，Qiitaでは表示されない．上の出力では，

    [226, 128, 142]

ですね．浸入の原因はわかりません．ネットにはそれらしい情報がなくて，ご存知ならお教えください．


# Another code <span class="timestamp-wrapper"><span class="timestamp">&lt;2023-08-22 火&gt;</span></span>

検索がうまくいかなくて，見つけられず，新たなコードを書いてしまいました．やれやれ．

ただ，こっちの方が直感的かも．

```ruby
  #!/usr/bin/env ruby
  require 'fileutils'

  p files = ARGV[0]
  puts "Usage: del_invisible_charc \'./*.png\'";exit unless files
  # optionとしてシングルクォート付で指定すべし，
  # するとshellで展開されずにRubyで処理

  Dir.glob(files).each do |file|
    puts file
    t_file = ''
    file.each_codepoint do |s| # 各コードポイントで呼び出し
      #    p s.to_s(16) # 16進数で表示
      t_file << s unless s.to_s(16) == "200e" # こいつが悪さしてるので削除
    end
    puts t_file
    puts file == t_file
    next if file == t_file
    FileUtils.mv(file, t_file, verbose: true)
  end
```



------
 - **source** ~/bin/del_invisible_chars.org
バックアップは大事

<h1>復元は大事です。バックアップやらはしておきます。</h1>
<p>AIを使ったマルコフ連鎖について検証しようとMecabをインストールしようとしたら、環境変数を設定する際に、間違ってほかのものを削除してしまうという大失態を起こしました。</p>
<p>戻す方法を調べるとwindowsの復元が有力であるとわかりましたが、SSDの容量を確保したり、めんどくさいからと復元設定をしてこなかったせいで、復元が不可能でした。ログなどからの復元も試みましたが難しい...。結局、パスをたどって設定しなおし、後でエラー起きそう...。</p>
<p>やはりバックアップや復元用の設定は重要です。今日から本体の復元設定もONにしました。</p>
<h1>バックアップや復元は大事!!</h1>
GitHubActionsをrubyのプロジェクトで使ってみた

# お題
GIthubActionsの簡単な説明と使い方の例を紹介します。

# 概要
GitHubActionsとはpushやissueやプルリクなどをきっかけに何かしらのプロセスを自動実行するものだと思ってます。
使い方はGitHubのアカウントを持っていれば簡単でリポジトリのルートディレクトリに.github/workflowsを作りその下に.yml形式のファイルを置くだけです。
GitHUbの知識とymlファイルの知識があれば簡単に試せます。
例はrubyでのテストと静的解析です。

# 用語
ymlファイルを書くために用語を少し紹介します。

- ワークフロー
    - 自動化したプロセスの大枠のこと
- ジョブ
    - ワークフローを構成するタスクのこと。1つのワークフローは複数のジョブから構成されている
    - ジョブ1が成功したらジョブ2を実行するような依存関係を持たせることができる
- ステップ
    - 複数のステップからジョブは構成される。ステップの役割はコマンドの実行やアクションの呼び出し
- アクション
    - GitHubActionsが提供する関数のようなもの自作もできて公開や共有ができる
- ランナー 
    - ワークフローが実行されるサーバーのことトリガーされるたびに新しいものが作られる

# Rubyでテストと静的解析をするCIの例
``` 
# ワークフローの名前を書く
name: Test

# トリガーの種類を書く今回はメインブランチにプッシュされた時とメインブランチ当てにプルリクが作成された時
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

# ここからジョブの設定
jobs:
  test:
    
    # ランナーを設定ubuntuの最新版を使っている
    runs-on: ubuntu-latest
    
    # ここからステップ
    steps:
    # 必ず必要なアクションみたい
    - uses: actions/checkout@v3

    # rubyをインストールするアクション
    - name: Set up Ruby
      uses: ruby/setup-ruby@ec02537da5712d66d4d50a0f33b7eb52773b5ed1
      with:
        ruby-version: '3.2'

	# ここから実行したいrubyのコマンドを書く
    - name: Install dependencies
      run: bundle install
    
    - name: Run tests
      run: bundle exec rspec

    - name: Run rubocop
      run: bundle exec rubocop
```

以上となります。
まとめるとpushなど何かきっかけがあった際に仮想の環境を作ってコマンドを実行してくれる機能です。

参考
GitHubActions実践入門
https://www.amazon.co.jp/GitHub-Actions-%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80-%E6%8A%80%E8%A1%93%E3%81%AE%E6%B3%89%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%EF%BC%88NextPublishing%EF%BC%89-%E5%AE%AE%E7%94%B0/dp/4844378716
VSCodeで爆速議事録！！！

## はじめに
最近議事録を取る機会が増えて、議事録作成環境をVSCodeで整えたので記事にします。

特に新人の方は議事録を取る機会が多いかと思うので、参考になれば幸いです。

## やること一覧
\*はoptional
1. VSCに拡張機能の「Vsnote」を入れる
2. 議事録用のフォルダをVSNoteに登録
3. 議事録用のスニペットをVSCに登録
4. 3で登録したスニペットを呼び出すための設定
5. md用のvimのキーマップ設定*

## 1. VSCodeに拡張機能の「Vsnote」を入れる
入れてください

## 2. 議事録用のフォルダをVsnoteに登録
settingsから「vsnotes default note path」などと検索して、デフォルトパスを設定します
![スクリーンショット 2023-06-28 22.06.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/15501668-411c-23b3-9973-414d0d26d913.png)

## 3. 議事録用のスニペットをVSCに登録
コマンドパレットで「Snippets: Conigure User Snippets」を選択します
![スクリーンショット 2023-06-28 22.15.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/e800c5a6-403d-c6c2-a99f-044675415d2c.png)

markdown.jsonを選択します
![スクリーンショット 2023-06-28 22.17.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/8407613e-6c41-497f-f92c-eb1e2030b61e.png)

markdown.jsonに以下をコピペします
```json
{
  "vsnote_template_mtg": {
    "prefix": "vsnote_template_mtg",
    "body": [
      "---",
      "tags:",
      "\t- mtg",
      "---",
      "## 日時",
      "$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE($CURRENT_DAY_NAME_SHORT)\n",
      "## 参加者(敬称略)\n",
      "## 持ち帰り事項\n",
      "## 次回日程\n",
      "## 議事録\n"
    ]
  }
}
```

## 4. 3で登録したスニペットを呼び出すための設定
ユーザ用のsettings.jsonを開き、以下を追記します
```json
"vsnotes.templates": [
    "mtg",
]
```

## 5. md用のvimのキーマップ設定*
optionalです
VSCでvimを使ってる人向けです

mdで議事録取ってると、かな/英数を行き来するので大変です。
なので、かな文字を英数文字にキーマップしてしまいます。僕はしばらく使ってみて割とアリだったので紹介します。

~/.vimrcに以下のキーマップを設定します
```vimrc
" mainly for markdown
inoremap っj <ESC>
inoremap ｊｊ <ESC>
inoremap ーー -<Space>
inoremap ” "
inoremap １。 1.<space>
inoremap １。 1.<space>
inoremap ２。 2.<space>
inoremap ３。 3.<space>
inoremap ４。 4.<space>
inoremap ５。 5.<space>
inoremap 「」 []()<Left><Left><Left>
inoremap ＃ #<Space>
inoremap ＞ >
inoremap ｀ `
inoremap ＊ *
inoremap 〜 ~
inoremap ｜ |
inoremap ： :
inoremap ； :
```
理想言うと全角スペースを半角スペースにするkeybindを追加したいところですが無理でした。。

## 使ってみる
コマンドパレットから、「VSNotes: Create a New Note」を選択します
![スクリーンショット 2023-06-28 22.39.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/371d896f-4e69-4c62-0307-9ffa44f606bb.png)

テンプレートを選択できるので、3で登録したスニペットを選択します
![スクリーンショット 2023-06-28 22.41.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/6f4ec0ec-5de5-11cf-2f10-e06fec563e39.png)

ファイル名を入力できます
何も入力せずにEnterを押すと、現在日時がファイル名になります（今回は何も入力せずにEnter）
![スクリーンショット 2023-06-28 22.42.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/5883e285-29bf-0d24-3e87-49acd094c56d.png)

するとこんな感じで新規ファイルが作成されます！
![スクリーンショット 2023-06-28 22.50.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2947418/312efd9b-a706-3eb5-65f6-7858b768537e.png)
CNNとViTのハイブリッドモデル【CoATNet】


**原論文**
CoAtNet: Marrying Convolution and Attention for All Data Sizes
https://arxiv.org/abs/2106.04803



**日本語解説**
畳み込み+Attention=最強？最高性能を叩き出した画像認識モデル「CoAtNet」を解説！
https://qiita.com/omiita/items/b97e68e1bbfdfa71ba79

# 関連研究

Vison Transformerの解説
https://qiita.com/wakanomi/items/55bba80338615c7cce73

CNN+ViTモデルの傾向【サーベイ】
https://qiita.com/wakayama_90b/items/96bf5d32b09cb0041c39



# 結論
浅い層でCNN，深い層でViTをやる．

# 概要

ViTの分析により，浅い層では局所的な認識を好み，深い層では大局的な認識を好む傾向がある．この傾向を引き継ぐように浅い層の局所的な認識を局所的な認識が得意な畳み込みに置き換える．具体的には，4ステージ構造の階層型で最初の1,2ステージを畳み込み，3,4ステージをself-attentionを採用する．CoATはImageNetかた3億枚の画像データセット（JFT-300M）においても高精度を叩き出した．




# モデル構造
CoATのモデル構造を下図に示す．1,2ステージを畳み込み，3,4ステージをself-attentionを採用する．これにより，ViTの苦手な局所的な認識を補助する．また，前半の畳み込みによって特徴量がダウンサンプリングされるため，SAの計算量を削減する．ステージ0として，畳み込みを使用して入力画像をダウンサンプリングする．ステージ間のダウンサンプリングにはmax poolingが採用する．

畳み込みブロックは，逆ボトルネックを採用する．1x1畳み込みによって，チャンネル数を4倍にして3x3DWConvを行う．その後，1x1畳み込みでチャンネル数を元に戻す．従来研究から，畳み込み認識は層を深くすることより，チャンネル数を増やすことが高い性能につながることが分かっている．


![スクリーンショット 2023-06-28 22.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457775/6e6d6801-5df7-e80a-51a1-b13219b8ff6e.png)



## 畳み込みブロックとSAブロックの組み合わせ
深層学習モデルの性能は以下の点で決まる．

- 汎化性能
- モデルのキャパシティ(大きいデータセットでも高精度)
- 転移学習時の性能



![スクリーンショット 2023-06-28 22.26.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457775/1748a6c2-9731-e97a-59c7-e28c8d028d2f.png)

### 汎化性能
ImageNetの性能の順位．ここで，Cは畳み込みブロック，TはSAブロックを示す．CNNの認識を多め．
1. C-C-C-C，C-C-C-T
1. C-C-T-T
1. C-T-T-T



### モデルのキャパシティ(大きいデータセットでも高精度)
JFT-300Mの超大規模データセットの順位．データセットが大きい場合はViTの認識を多め．
1. C-T-T-T，C-C-T-T
1. ViT
1. C-C-C-T



### 転移学習時の性能
JFTで事前学習してImageNet-1Kにファインチューニングの順位．半分ずつが良い．
1. C-C-T-T
1. C-T-T-T

![スクリーンショット 2023-06-28 22.33.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457775/6f57df16-f82d-899a-1a76-156e2e44fdf4.png)



最終的に「C-C-T-T」を採用した．



![スクリーンショット 2023-06-28 22.39.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457775/7e613262-0c64-465e-2411-12d1d0fdde93.png)


# 実験
CoATはImageNet,Imaget-21k，JFT-300Mで高精度を達成した．


![スクリーンショット 2023-06-28 22.50.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457775/8035a7d6-61c6-d06e-42db-6cd45417f202.png)



# まとめ
今回は，CNNとViTのハイブリッドモデルのCoATNetについて解説した．浅い層では畳み込み，深い層では畳み込みが有効になることが分かった．
基本情報対策：科目B「選択ソート」

<h1>選択ソートとは</h1>
対象となるデータの中から最小値（もしくは最大値）を探し先頭の値と交換、この作業を繰り返すことで全体を整列させていく手法です。 選択ソートは、未整列データ内の最小値と先頭の値を交換。 この作業を繰り返し整列していく整列アルゴリズム。


<h2>以下の場合に導入を検討する</h2>

<strong>①データセットが小さい場合: </strong>
データセットの要素数が比較的小さい場合に効果的です。データセットが少ない場合、選択ソートの実行時間は他の高度なソートアルゴリズムよりも短くなる傾向があります。
<br>
<strong>②追加のメモリ空間が制約されている場合:</strong>
追加のメモリ空間を必要としないアルゴリズムです。データセットをソートする際に追加のメモリを必要としないため、メモリの制約がある環境や組み込みシステムなどで使用されることがあります。
<br>
<strong>③安定性が重要でない場合: </strong>
同じ値を持つ要素の順序が変わる可能性があります。もし安定性が重要でなく、ソートの速度が優先される場合には、選択ソートが適切です。

ただし、データセットが非常に大きい場合やパフォーマンスが重要な場合には、選択ソートは効率的ではありません。そのような場合には、マージソートやクイックソートなどの高速なソートアルゴリズムが一般的に選択されます。


<h2>以下ソースコード</h2>

```java:Main.java

import java.util.Arrays;

public class Main {
    public static int[] selectSortMachine(int[] array) {
        int min; //最小値を格納する変数
        int j;   //最小値を探索するためのカウント変数
        int tmp; //一時退避変数

//        ２重ループで実現する
//        １巡目は最小値を配列に格納する、min変数の初期化処理を行う。
//        ２巡目は最小値の検索を行う
        for (int i = 0; i < array.length-1; i++) {
            min = i; //ソート済み範囲は対象外となる為 iを格納する

//            j = i + 1をすることで同値の比較を避ける(処理性能UP)
            for (j = i + 1; j < array.length; j++) {
//                配列要素がarray[j]より小さい場合はminに格納する
                if (array[j] < array[min]) {
                    min = j; //現在の配列番号に格納されたデータを比べて小さい値を保持している場合は配列番号を更新する
                }
            }

//          最小値が決まったらminを格納する
            if(min != i){
                tmp = array[i];
                array[i] = array[min];
                array[min] = tmp;
            }

            System.out.println(Arrays.toString(array));
        }
        return array;
    }
}
    

```

```java:TestMain.java

import org.junit.Test;

import static org.junit.Assert.assertArrayEquals;

public class MainTest {
    @Test
    public void testSelectSortMachine() {
        // テスト用のデータ
        int[] array = {5,4,2,3,1};
        // 期待される結果
        int[] expected = {1,2,3,4,5};
        // テスト対象のメソッドを実行
        int[] sortedArray = Main.selectSortMachine(array);
        // 期待される結果と実際の結果を比較
        assertArrayEquals(expected, sortedArray);

//[1, 4, 2, 3, 5]
//[1, 2, 4, 3, 5]
//[1, 2, 3, 4, 5]
//[1, 2, 3, 4, 5]
    }
}