OmniAICreator/Qiita-1.07M huggingface dataset:
SwiftUIリファクタリング事例①

# 【リファクタリング前】
```swift
struct ContentView: View {
    var body: some View {
        TabView {
            Tab1View()
                .tabItem {
                    VStack {
                        Image(systemName: "1.circle")
                        Text("タブ1")
                    }
                }
                .tag(1)
            Tab2View()
                .tabItem {
                    VStack {
                        Image(systemName: "2.circle")
                        Text("タブ2")
                    }
                }
                .tag(2)
            Tab3View()
                .tabItem {
                    VStack {
                        Image(systemName: "3.circle")
                        Text("タブ3")
                    }
                }
                .tag(3)
            Tab4View()
                .tabItem {
                    VStack {
                        Image(systemName: "4.circle")
                        Text("タブ4")
                    }
                }
                .tag(4)
            Tab5View()
                .tabItem {
                    VStack {
                        Image(systemName: "5.circle")
                        Text("タブ5")
                    }
                }
                .tag(5)
        }
    }
}
```

# 【リファクタリング後】
```swift
struct ContentView: View {
    var body: some View {
        TabView {
            tabView(name: "ホーム",    icon: "house",               view: Tab1View(), tag: 1)
            tabView(name: "オプション", icon: "gearshape",           view: Tab2View(), tag: 2)
            tabView(name: "音楽",      icon: "music.note",          view: Tab3View(), tag: 3)
            tabView(name: "マイページ", icon: "person",              view: Tab4View(), tag: 4)
            tabView(name: "設定",      icon: "slider.horizontal.3", view: Tab5View(), tag: 5)
        }
    }
    
    @ViewBuilder
    private func tabView<V: View>(name: String, icon: String, view: V, tag: Int) -> some View {
        view
            .tabItem {
                VStack {
                    Image(systemName: icon)
                    Text(name)
                }
            }
            .tag(tag)
    }
}
```
systemctlでサービス登録

```
vi /etc/systemd/system/{アプリケーション名}.service
```
```
[Service]
WorkingDirectory=/root/{アプリケーションディレクトリ}
ExecStart=/root/.deno/bin/deno run --watch --allow-all --unstable server/index.js
[Install]
WantedBy=multi-user.target
```
```
systemctl enable {アプリケーション名}.service 
systemctl start {アプリケーション名}.service 
```
```
systemctl stop {アプリケーション名}.service 
systemctl disable {アプリケーション名}.service 
```
JavaScriptのdocumentオブジェクトでよく使いそうな用途

## 概要
JavaScriptには、ウェブページのHTMLドキュメントにアクセスするための`document`オブジェクトが用意されています。これを利用することで、ウェブページ内の要素を取得、変更、追加、削除など、さまざまな操作を行うことができます。

以下は`document`オブジェクトの主な利用方法をまとめます。

## `getElementById`メソッド

```javascript
const element = document.getElementById("id");
```

このメソッドを使うと、HTML要素のIDを指定して、その要素を取得することができます。

## `getElementsByClassName`メソッド

```javascript
const elements = document.getElementsByClassName("className");
```

このメソッドを使うと、クラス名を指定して、そのクラスを持つ全ての要素を取得することができます。

## `getElementsByTagName`メソッド

```javascript
const elements = document.getElementsByTagName("tagName");
```

このメソッドを使うと、タグ名を指定して、そのタグを持つ全ての要素を取得することができます。

## `querySelector`と`querySelectorAll`メソッド

```javascript
const element = document.querySelector(".className #id");
const elements = document.querySelectorAll("tagName .className");
```

これらのメソッドを使うと、CSSセレクタを使用して要素を取得することができます。`querySelector`は最初に一致した要素を、`querySelectorAll`は一致した全ての要素を取得します。

更に、CSSセレクタの疑似クラスを使用して、特定の位置の要素を絞り込むことも可能です。
```javascript
// ページ内の全てのp要素のうち、最初の要素を取得
const firstPElement = document.querySelector("p:first-child");

// ページ内の全てのp要素のうち、最後の要素を取得
const lastPElement = document.querySelector("p:last-child");

// ページ内の全てのp要素のうち、偶数番目の要素を全て取得
const evenPElements = document.querySelectorAll("p:nth-child(even)");
```

## `createElement`メソッド

```javascript
const element = document.createElement("tagName");
```

新しいHTML要素を作成するには、このメソッドを使います。

## `createTextNode`メソッド

```javascript
const textNode = document.createTextNode("text");
```

新しいテキストノードを作成するには、このメソッドを使います。

## `appendChild`メソッド

```javascript
parentElement.appendChild(childElement);
```

新しい子要素を既存の親要素に追加するには、このメソッドを使います。
Apache2.4でリバースプロキシ（https - http、wss - ws）

```
a2enmod ssl
a2enmod proxy  
a2enmod proxy_http  
a2enmod proxy_wstunnel  
vi /etc/apache2/sites-available/default-ssl.conf 
```

```
<IfModule mod_ssl.c>
  <VirtualHost _default_:443>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/{ドメイン名}/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/{ドメイン名}/privkey.pem
	ProxyPass /ws ws://localhost:8000/ws nocanon
	ProxyPass / http://localhost:8000/ nocanon
	ProxyPassReverse /ws ws://localhost:8000/ws
	ProxyPassReverse / http://localhost:8000/
    <FilesMatch "\.(cgi|shtml|phtml|php)$">
        SSLOptions +StdEnvVars
    </FilesMatch>
    <Directory /usr/lib/cgi-bin>
        SSLOptions +StdEnvVars
    </Directory>
  </VirtualHost>
</IfModule>
```

```
systemctl restart apache2
```
【Mac】コマンドでスリープ解除などのスケジュールを設定する方法

## 設定方法

`pmset`コマンドを使用してスリープ解除などのスケジュールを設定できます。  

### 繰り返し

繰り返すスケジュールを設定するには以下のように実行します。

```zsh
sudo pmset repeat 動作 曜日 時間
```

「動作」には以下を設定できます。

* sleep  
  スリープする。
* shutdown  
  シャットダウンする。
* wake  
  スリープを解除する。
* wakeorpoweron  
  スリープ解除または電源を入れる。
* poweron  
  電源を入れる。

「曜日」は以下の中から実行するものを選択します。  
上から月〜日です。

* M
* T
* W
* R
* F
* S
* U

毎日午前3時にスリープを解除するスケジュールを設定するには以下のように実行します。  

```zsh
$ sudo pmset repeat wake MTWRFSU 3:00:00

$ pmset -g sched
Repeating power events:
  wake at 3:00AM every day
```

`pmset -g sched`で現在設定されているスケジュールを確認できます。  

また繰り返しのスケジュールを削除するには以下のように実行します。

```zsh
sudo pmset repeat cancel
```

### 単発

繰り返さない単発のスケジュールを設定するには以下のように実行します。  

```zsh
sudo pmset schedule 動作 "日付 時間"
```

2022年11月1日午前10時にシャットダウンするには以下のように実行します。

```zsh
$ sudo pmset schedule shutdown "01/11/22 10:00:00"

$ pmset -g sched
Repeating power events:
  wake at 3:00AM every day
Scheduled power events:
 [0]  shutdown at 01/11/2022 10:00:00 by 'pmset'
```

また単発のスケジュールを削除するには以下のように実行します。

```zsh
sudo pmset schedule cancel 0
```

上記の`0`の箇所には`pmset -g sched`を実行した際にスケジュールの先頭に表示される番号を記述します。  
## コマンドでスリープする方法

以下のコマンドを実行するとすぐにスリープできます。

* スリープ

```zsh
pmset sleepnow
```

* ディスプレイオフ

```zsh
pmset displaysleepnow
```
macOSでls -lコマンドをエイリアスで楽に打つ

# 背景

```
$ ls -l
```

というコマンドを
と打てば `ll` コマンドと同じ挙動にはなりますが、面倒過ぎた。
一日何回打つんだ…

# 設定方法

以下の方法でalias設定すれば`ll`コマンドがmacOSでも使えます

```
$ vim ~/.zshrc

# 以下を入力
alias ll='ls -l'

# 以下で設定反映
$ source ~/.zshrc
```

確認

```
$ ll

drwx------+ 14 {ユーザー名}  {グループ名}   448  6 14 11:50 Desktop
drwx------+  3 {ユーザー名}  {グループ名}    96  6  6 15:29 Documents
drwx------+ 28 {ユーザー名}  {グループ名}   896  6 14 11:17 Downloads
drwxr-xr-x  14 {ユーザー名}  {グループ名}   448  6 13 18:57 workspace
…
```
上記のようになれば設定完了です。

# 終わり

めっちゃ楽！

ちなみに私は

```
alias ll='ls -la'
```

で設定しちゃってます。aオプションが好きです。
ChatGPTを使ってずんだもんとおしゃべり

# はじめに
ChatGPTを利用して、仮想キャラクターとの対話を楽しみたいと思い、ずんだ妖精ずんだもんとのおしゃべりできるサイトを作成してみました。この場では、音声とモデルが揃っている「ずんだもん」を使用しています。以下にリンクを添付しておきますが、「ChatGPTAPI」と「ずんだもん音声API」は利用制限がありますので、制限を超えた場合は利用できなくなりますのでご了承ください。また、「ずんだもんチャット」は迅速に作成されたものであり、セキュリティについては考慮されておりません。どうか、悪意のある行為はお控えいただきますようお願いいたします。

![zunndamon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878870/677bbefe-97f6-1912-b2d6-2aea1b12f8ac.png)

 ~~https://monokenn.com:3000/chatZundamon~~
 ※現在使用できませんm(__)m

# 目次

[1.はじめに](#はじめに)
[2.構成素材の紹介](#構成素材の紹介)
[4.おわりに](#おわりに)

# 構成素材の紹介
### モデル．音声．BGM．プロンプト

live2dモデル

https://www.youtube.com/watch?v=HY22aJlVMnI

ずんだもん音声API

https://voicevox.su-shiki.com/su-shikiapis/

ずんだもんBGM

https://piapro.jp/t/AV6D




# おわりに
今後は、他のキャラクターを自由に作成できる機能を追加する予定です。さらに、ユーザーがキャラクターの設定をカスタマイズしたり、ユーザー同士がコミュニケーションを取れる機能を導入することで、より面白い体験ができると考えています。もしも本プロダクトの詳細について知りたい方がいらっしゃいましたら、コメント欄からお問い合わせいただければ幸いです。また、著作権などの問題が生じた場合は、遠慮なくご連絡いただければ迅速に対応いたします。なお、本プロダクトは営利目的では運営されておりませんので、ご安心ください。

twitter -> https://twitter.com/suny79953824

おわり
ポケモン版アキネーターのwebアプリを作ってみた！ / 実装編

# 概要

皆さん, アキネーターというゲームはご存知でしょうか.
特定の人物を, 質問から当てるゲームです.
やったことある人はわかると思うのですが, 何回かの質問で目的の答えまでたどり着けるのはすごいですよね.

そんなアキネーターなのですが内部のアルゴリズムは秘密となっているそうです.
面白そうなので, 内部のアルゴリズムを妄想し, 実際に組んでみました!!

題材としては, 種類の多くデータのまとまっているポケモンをターゲットにしました.

https://pokemon-akinator.pages.dev/

よければ遊んでやってください

アルゴリズム編と実装編の２つを予定しています.

# アルゴリズム編の復習

https://qiita.com/tsukemono/items/2a18e5d307a978e8ab09

アルゴリズム編の結果から,
* 質問と実際の解答のデータセット
* ユーザーの回答

の2つがわかれば, 式をこねくり回すことで

* どのポケモンが選ばれるのか
* 次の質問をどれにすればいいのか

の２つが概算できることが示せました.

そのため, 残る課題は

* 式中のハイパーパラメータをどう決めるのか
* 質問と実際の解答のデータセットをどう作るか

が挙げられます

# ハイパーパラメーターをどう決めたか

自分の数式の場合では, softmaxの中の$\beta$がハイパーパラメータになります.

実際のユーザーログというのが得られない以上. ヒューリスティックに決め打ちするしかありません.
今回は, ｢ユーザーの回答｣と｢実際の状態｣の誤答率が5%くらいになるようにハイパーパラメータを調整しました.
(ユーザーは20回に一回くらい, 間違った答えを入力するだろうと)

この誤答率を高く見積もりすぎると, 特定するまでの質問の回数が多くなります.
逆に誤答率を低く見積もりすぎると, ユーザーが一問でも間違えにると, 必要な質問が急増します.

# 質問と実際の解答のデータセットをどう作るか

データセットの縦幅としては, 全ポケモン
横幅としては, 全質問になります
そのため, イメージとしては

|    |  赤色?  |青色?  |緑色?  |黄色?  |…  |
| ---- | ---- |---- |---- |---- |---- |
|  ヒトカゲ |  ○ |✗ |✗ |✗ |
|  フシギバナ  |  ✗  |✗ |○ |✗ |
|  ゼニガメ |  ✗  |○ |✗ |✗ |
|  … |  

といった表を作ればいいことになります.

ポケモンは1000匹程度いることを考えると, これを人力で行うのは不可能です.

そのため, ポケモンのデータベースであるpokeAPIを使いました

https://pokeapi.co/

このapiを叩くことで, ポケモンの必要な情報が得られます.

このapiで得られる情報などから質問を以下のように生成しました

* 種族について
* 性別の偏りについて
* 伝説･幻ポケモンか
* 身長体重について
* 世代について
* タイプやタイプ相性について
* 進化について
* 体色について
* 身体的特徴について
* 名前について


# 実装について

flutter×pythonなライブラリである, fletで実装を行いました
GUIだけだと2時間ぐらいで, 完成しました.
 気軽にサクッとpythonでwebアプリを組みたい方にオススメです!!
Shifter の使い方

次のページからサインアップします。
[WordPress のための Jamstack ホスティングプラットフォーム](https://ja.getshifter.io/)
クレジットカードの情報を入力しない場合は、無料で1週間使えます。

シフターの流れは次のようになります。
<ol>
<li>WordPress をスタート</li>
<li>WordPress でページやポストを作成</li>
<li>WordPress を停止</li>
<li>デプロイ</li>
ワードプレスから、静的なページへの変換して公開
<li>ページの確認</li>
私の場合は、次のアドレスが割り当てられました。

https://sharp-mendeleev8398.on.getshifter.io/
</ol>

## ログイン

[Shifter ログイン](https://go.getshifter.io/)

![shifter00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/94c02e63-a32b-a019-b04c-53474fcf8e6a.png)


![shifter01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/89e86542-98a0-5449-3dec-d336cdca9843.png)

## WordPress をスタート

![shifter02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/378ce769-f0d6-e1b3-7648-4d3212c06176.png)

![shifter03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/bc1c4848-e677-b5f3-b345-2c3398a8936a.png)

## WordPress でページやポストを作成

![shifter04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0a1bd70d-40cc-a712-4803-d891050da75d.png)

![shifter05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/7bada0bb-6b5c-2527-e419-6c19331a83a0.png)

## WordPress を停止

![stop01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a6f5ab92-2508-590e-bc0b-2f6d77563027.png)

![site02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0ae905cd-877c-3b59-9a53-729b4081b515.png)

## デプロイ

![deploy01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a2a594ed-5214-8c5d-a9f1-8db5106d8e4b.png)

![deploy02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/addc21b7-c1fd-6b80-e69d-bc64df4f42d8.png)

## ページの確認

![site01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/c5c85601-5825-0bdf-ddaa-2457a614f01b.png)

リンクをクリック
![site02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/d8392dd1-cc17-f9ef-eb28-823fa9c9b711.png)
【JavaScriptにおける】関数型プログラミングってなんぞや? 

## はじめに
ある程度開発をしていくと、関数型プログラミングや手続き型プログラミングとはいう言葉はちらほら耳にしますよね。

Reactは16.8.0のReacthooks導入により関数型プログラミングに大きくシフトしました。

関数型プログラミングについて知らなくてもコードは書けると思いますが、MetaがReactを関数型として設計している意図を汲み取れた方がより効率良く綺麗なコードが書けると思います。

自分自身のReactの学習のためにも今回はまとめさせて頂きます。


## その前に手続き(命令)型プログラミングとは
ブラウザなどへの命令を手順通り(手続き通り)記述していく手法になります！
デメリットとしてコード量が大きくなって可読性が悪くなる場合があります。

`例:配列にある数値を倍にする処理`
```jsx
let nums = [1,2,3];
let doubleNums = [];
for(let i = 0; i < nums.length; i++) {
    let double = nums[i] * 2
    doubleNums.push(double)
}
```
少し冗長にも見えますよね。
メリットとしては初心者でもコードが追いやすい、学習難易度が低いといったところがあります。
~~去年の自分はずっとこんな感じのコードを書いておりました。~~

## 関数型プログラミングとは
端的に言うと、関数だけでコードを組み立てるスタイルのこと。
手続きの方の制御を(なるべく)関数に分離し、
やりたいことに集中できるようにするプログラミング手法です。

`例:配列にある数値を倍にする処理`
```jsx
let nums = [1,2,3];
let doubleNums = nums.map(num => num * 2)
```
ループ制御をmapメソッドが担当して、やりたいことを関数で定義(開発者が担当)に分離することができます!

実際に手続き型に`i`などの変数を使わずに済みますしかなりスマートになります。

また、関数型プログラミングの重要なキーワードとして

**(値の) 状態管理と処理の分離**
→Reactで言うところの状態管理は`props`,`state`を通して行い関数コンポーネント自体はjsxを作成する処理に特化することになります

**純粋関数(副作用を排除する)**
→引数が同じ場合、常に同じ返り値となります。返り値引数に依存するためバグの検知もしやすいです。Reactの場合、基本的に関数コンポーネントや`state`に渡すコールバック関数についてはそういったものは純粋関数で基本的に書くようにします。

**不変性(Immutability)**
→関数の引数としてオブジェクトが渡ったときに、その中身を書き換えてはいけないという性質になります。
これを決めておかないと関数の外側に対しても影響を及ぼすことになってしまいます。Reactで言うと`props`が渡ってきてそれを書き換えられないことからもReactが関数型プログラミングとして設計されていることがわかると思います


これらのルールを守ることによって、下記のメリットを得ることが出来ます！


### 関数型プログラミングのメリット
- コードの可読性の向上
- 拡張性・再利用生の向上
- テスト生の向上
- モジュール化の向上
- Tree Sharkingの向上

## 最後に
Reactの記法に迷った際は1度関数型プログラミングの記法について、それに沿うように実装できているのか1度思い出してみてください。
実際にReactを設計している意図を汲み取るということが、遠まりのようには見えますが良いコードを書くことに繋がるのかなと思います!

今回の記事が皆さんの参考になれば幸いです。


## 参考動画、記事
- [【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript](https://www.udemy.com/course/react-complete-guide/)
- [純粋関数](https://qiita.com/oedkty/items/f5fb807390a87359da0f)
- [JavaScript関数型プログラミング入門](https://qiita.com/Anders/items/25e55051893b6eaa152c#12-%E9%96%A2%E6%95%B0%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%A0)
zshrc 個人的カスタマイズ

Ubuntu環境でもzsh使いたい！
Macっていいよなぁ
そんな軽い思いから始まり、またまた備忘録的なsomething。

### bashからzshへの切り替え（Mac用）
```bash
$ chsh -s /bin/zsh
```

### zshのインストール
```bash
$ sudo apt-get install zsh
```
#### zshへの切り替え
```bash
$ which zsh
```
→ ここで出てきたPATHをコピー(多分こんな感じ→)`/usr/bin/zsh`

```
$ chsh
```
```
Changing the login shell for root
Enter the new value, or press ENTER for the default
    Login Shell [/bin/bash]: <PATHを貼り付ける>
```

これでとりあえず完了！
あとはすきに.zshrcをいじればOK!

### bashの設定をzshに移行
もう二度とbashを使わない強い意志があればそのままファイルの名前を変えちゃえばOK。
でも、互換性などの問題があるから確認は必要。（要注意！）
```bash
$ cd
$ mv .bashrc .zshrc
$ mv .bash_profile .zprofile
```

### .zshrcを環境に適応させる
```bash
$ source .zshrc
```

### My.zshrc
ちまたでは「oh my zsh」っていうフレームワークを用いれば
幸せになるらしいですが、私はまだ導入はしてないので
気になった方がいればぜひ調べてみてください

以下、自分用

```.zshrc
# 42Tokyo用
alias cc='cc -Wall -Werror -Wextra'

# utils (Mac用)
alias code='open -a /Applications/Visual\ Studio\ Code.app'

# utils
alias ...='cd ../..'
alias ....='cd ../../..'

# Git関連
alias g='git'
alias gl='git log'
alias gc='git clone'
alias ga='git add'
alias gcm='git commit -m'
alias gp='git push'
alias gs='git status'
alias gl='git log'

# alias
alias so='source'
alias sudo='sudo '
alias vi='vim'


# .zsh_history関連
setopt auto_cd
setopt share_history
setopt hist_ignore_dups
setopt hist_ignore_all_dups
setopt HIST_IGNORE_SPACE
SAVEHIST=10000
HISTSIZE=10000
HISTFILE=~/.zsh_history

# 入力ミスへの対応
setopt correct
```
【Wordpress】the_title() と get_the_title() の違い、知っていますか？

# 前提
ページタイトルを出すのに、`the_title()` と `get_the_title()`があったり...
サムネ画像出力にも`the_post_thumbnail()` と `get_the_post_thumbnail()`があったり。

非常に似ているこちら、違いはご存じだろうか？

# echoを含むか否かの違い
結論としては、echoを含んでいて、その記述をするだけで出力できるのが`the_title()`や`the_post_thumbnail()`。

例えばHTML上で、`<?php the_post_thumbnail(); ?>`と記述するだけで出力できるので、記述量が減るので便利。

`get_the_title()`や、`get_the_post_thumbnail()`はechoを含まないので、例えばphpのコードブロック内でechoでHTMLと一緒に出力するときに便利。

# 実例
つまり、以下は同じ出力結果を得られる。

```php
<?php the_post_thumbnail(); ?>
<?php echo get_the_post_thumbnail(); ?>
```

Wordpressの他の人の作ったテーマフォルダを見てると、こういうのをよく見る。

```php
<?php if (condition): ?>

html code to run if condition is true

<?php else: ?>

html code to run if condition is false

<?php endif ?>
```

こうやって、phpのコードブロックに全ての記述を入れず、細切れにphpのコードをHTMLに埋め込む書き方をする場合は`the_title()`を使った方が便利だろう。

ただ、私のようにインデントがないと}の閉じ位置がわかりにくい人にとっては、phpのコードはまとめて記述したいので、`get_the_title()`をよく使うことになりそうだ。
ViTのキーとバリューを小さくして計算量削減【PvT】



**原論文**
Pyramid Vision Transformer: A Versatile Backbone for Dense Prediction without Convolutions
https://arxiv.org/abs/2102.12122



# 関連研究

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

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

PVTv2（改良モデル）
https://qiita.com/wakayama_90b/items/f3a48a2fb54db33614eb



# 結論
ViTのキーとバリューをダウンサンプリングして計算量削減した．

# 概要
ViTの問題点の一つとして，計算量が膨大である問題点がある．この問題点をキーとバリューをダウンサンプリングで解決しようとする．この考え方は，その後に提案される様々なViT派生モデルで採用されることになる．




# モデル構造
PVTのモデル構造はResNetやSwinのようなステージ4の階層型を採用する．従来の階層型モデルの傾向と同様にステージ3を深く設定する（下表のTransformer Encoderの繰り返し回数）．ステージ内ではパッチ特徴量変換（Patch Embedng）を行い，Transformer EncoderがL回繰り返させる．

![スクリーンショット 2023-06-02 14.24.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457775/22cfa443-901e-4d16-8d43-b9532f9087d2.png)


![スクリーンショット 2023-06-02 14.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457775/eb08ab4b-3a7a-c0e1-badf-bfab742feb0d.png)




## ステージ間のダウンサンプリング
ステージ間のダウンサンプリングで空間の縦横のサイズは半分，チャンネル数を倍にする．
これをパッチ特徴量変換の線形射影で実行される．具体的には，入力画像を一定の小領域（パッチ）に分割し，1次元化（flatten）する．1次元かされたパッチの特徴（$1 \times 1 \times c$）は線形射影で($1 \times 1 \times c/p$)に変換される．ここでpは下表で示される各ステージのPatch Embeddingで定義されているダウンサンプリング値である．






## キーとバリューのダウンサンプリング
ViTの計算量削減のために，キーとバリューを入力特徴量変換の前にダウンサンプリングする．Multi-Head Attention（Self-Attention（SA））を計算するために，線形射影を使用してQ,K,Vを作成する．線形射影とは，行列（w）をかけて特徴量を変換することである．SAの出力する特徴マップはクエリの大きさに依存するため，キーとバリューのサイズをダウンサンプリングしても，出力のサイズに影響ない．

ダウンサンプリングの式
~~~math

SR(x) = Nrom(Reshape(x,R)W)

~~~

クエリ，キーバリューの変換
~~~math

Q = xW_q \\
K=SR(x)W_k \\
V=SR(x)W_v 

~~~

ダウンサンプリングされたSA（SRA）の計算
~~~math

SRA(Q,K,V) = softmax(\frac{QK^T}{\sqrt{d}})V

~~~



![スクリーンショット 2023-06-12 14.46.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457775/1c386f57-307b-1f0a-dd2b-c801cc15e2dc.png)



# 実験結果
画像分類，物体認識，セグメンテーションで計算量を削減したけど良くなったよ．


# まとめ
今回は，ViTのキーとバリューを小さくして計算量削減するPvTについて解説した．計算量を削減しても精度は低下しなかった．
新しいPythonで古いTLSv1やSSLv3を使いたい

## 概要
Python3.10以降OpenSSLが1.1以上必須になったため、デフォルトではTLSv1が使えません。
OSのOpenSSLではたぶんSSLv3は無効にされているので使えません。

もちろん使えなくていいのですが、古いSSLv3を使っているサーバーがあるのかどうかをチェックする場合や大人の事情で必要な場合もあるでしょう。

ということで、OpenSSLとPythonを自前でインストールします。

ポイントは

- OpenSSLをSSLv3が使えるようにコンパイルする
- SSLv3、TLS1や脆弱なcipherが使えるように設定する
- Pythonを上でコンパイルしたOpenSSLを使用するようにしてコンパイルする
- CipherをpythonのものではなくOpenSSLのものを使用するようにしてコンパイルする

です。

今回はOpenSSL3.0.8、Python3.11.3の組み合わせで書きましたが、OpenSSL1.1や3.1、Python3.10との組み合わせでも動作します。

## 必要なライブラリのインストール
debian11の場合。他のOSは適宜変更してください
```sh
apt install -y wget make gcc g++ perl libffi-dev xz-utils libz-dev ca-certificates libreadline-dev
```

## OpenSSLのビルド
```sh
wget https://www.openssl.org/source/openssl-3.0.8.tar.gz
tar xzf openssl-3.0.8.tar.gz
cd openssl-3.0.8
./config --prefix=/usr/local/openssl --openssldir=/usr/local/ssl enable-ssl3 enable-ssl3-method enable-weak-ssl-ciphers
make
make install

cd /usr/local/openssl
ln -s lib64 lib

mv /usr/local/ssl /usr/local/ssl.org
cp -a /etc/ssl /usr/local/
```

## OpenSSLの設定ファイルの変更
```/usr/local/ssl/openssl.cnf
...
[system_default_sect]
# MinProtocol = TLSv1.2  <-- コメントアウト
# CipherString = DEFAULT@SECLEVEL=2  <-- コメントアウト
MinProtocol = None  <-- 追加
CipherString = DEFAULT@SECLEVEL=0  <-- 追加
```

## Pythonのビルド
```sh
wget https://www.python.org/ftp/python/3.11.3/Python-3.11.3.tgz
tar xvzf Python-3.11.3.tgz
cd Python-3.11.3
./configure --with-openssl=/usr/local/openssl --with-openssl-rpath=auto --enable-optimizations --with-ssl-default-suites=openssl
make altinstall
```
`--with-ssl-default-suites=openssl`を付けてコンパイルするのがポイントです。これがないと、OpenSSLライブラリはTLS1.2未満に対応していても、Pythonの標準の厳しいCipher Suiteを使用してしまいTLS1.2未満が使用できません。


## 確認

```python
>>> import ssl
>>> ssl.OPENSSL_VERSION
'OpenSSL 3.0.8 7 Feb 2023'
>>> ssl.HAS_TLSv1
True
>>> ssl.HAS_TLSv1_1
True
>>> ssl.HAS_TLSv1_2
True
>>> ssl.HAS_TLSv1_3
True
>>> ssl.HAS_SSLv3
True
```

いい感じです。
Glueの用語メモ

# はじめに
Glueを作成してみたのですが、用語の内容がよく頭にはいらない。。。
整理のため、Glueのサービス内で出てくる用語についてまとめたいと思います。

# Glueってどんなサービスなのか
ETL処理が行えるマネージドサービス。
多様なデータソースからデータカタログでデータを管理し、ETL(抽出、変換、ロード)を視覚的に実施することができる。
ロード後のデータについては、Athena、EMR、Redshift Spectrumでデータを検索することができる。

https://docs.aws.amazon.com/ja_jp/glue/latest/dg/what-is-glue.html

:::note info 
ETLとは
- データを抽出、変換、格納すること
:::

## クローラー
データカタログに格納する。
「分類子(classifiers)」を元にスキーマを返却する。
読み方は勝手に「クラシフィア」と読んでいる。
「分類子」という単語はいまいち馴染みがないところです。

:::note info 
分類子(classifiers)とは
- クローラーがデータソースを抽出する際のルールみたいなものだと認識している。
- 「GrokClassifier」、「XMLClassifier」、「JsonClassifier」、「CsvClassifier」がある。
:::

https://docs.aws.amazon.com/ja_jp/glue/latest/dg/aws-glue-api-crawler-classifiers.html

## データカタログ
データソースを元にクローラーが作成したメタデータ。

:::note info 
メタデータとは
- 元データの詳細みたいなもので、そのデータが付随して持つ情報。(更新者や更新日など。)
:::

上記からクローラーは「分類子(classifiers)」に記載されたルールを元にデータソース内のデータを検索し、データカタログにデータソース内のデータのメタデータを格納する。

https://docs.aws.amazon.com/ja_jp/glue/latest/dg/components-key-concepts.html

- AWS Glue Data Catalog

## トリガー
スケジュールや条件によって、ジョブとクローラーの開始タイミングを設定することができる。
Cron式を用いて、トリガーの開始時間やらを設定することができる。
> cron(Minutes Hours Day-of-month Month Day-of-week Year)

また、前のジョブやクローラーが条件を満たした際に起動するなどの条件付きトリガーの設定が可能。

https://docs.aws.amazon.com/ja_jp/glue/latest/dg/about-triggers.html

## AWS Glue Studio
ETLのジョブをGUIで視覚的に作成して実行することができる。

https://docs.aws.amazon.com/ja_jp/glue/latest/ug/what-is-glue-studio.html

## まとめ
- クローラーが設定したルール(分類子)を元にデータソースからデータを抽出し、メタデータを格納したデータカタログを作成する。
- 作成したデータカタログはS3などに格納し、「Amazon Athena」で抽出することが可能。
- 上記の処理については、「AWS Glue Studio」で視覚的に作成することや、トリガーを設定し、定期的に実行するなどの設定が行える。
ミーティング参加レベル表 - 会議をうまくやる

# 会議の大切さ

開発を進めるときにも会議大事ですよね。
実装の面だけでも様々なときにエンジニア同士で会話することがあります。
アーキテクチャを決めるとき、設計レビュー、開発プロセス、テストやシステムの品質などの目線合わせなど、実装を進めるときにも会議は絶対に必要なのかなと思います。

オンラインになったことでちょっとした会話だけでなく、しっかりした打ち合わせの時間を作ることで、集中する時間と会話する時間の線引きが強くなったように感じます。

また、オンラインになるとしっかりと会話の時間を設計しないとなかなか会話が出来ないことがあります。
今回は雑談のような時間ではなく、短時間で何らかのゴールに向かう会議についてのレベル表を作っていみいました。



# 会議は自分のスタンス次第で変わる

参加者、主催者、運営者としてどのように関わると良いのでしょうか？
今でのうまく行っていると思っているが、この会議レベルで、もっと良くする方法や理想とする会議に近づくための方法を考えてみるきっかけになると良いと思います。


参加者、主催者、運営者、会議に参加する立場は色々とありますが、どの立場であっても、ほんの少し会議を良くしたり、役に立つものに変えるための行動ができると思います。


# 会議の参加者レベル

| レベル | 内容 |
|---|---|
|C|聞いていない、内職している|
|B|聞くだけ、情報のキャッチアップ|
|A|自分が情報をどう判断し、どう行動するかを前提とした情報収集|
|S|自分の気持ちを発信し、リアクションする|
|SS|自分の意見を発信し、ディスカッションする|


# 会議の主催者レベル
| レベル | 内容 |
|---|---|
|C|とりあえず時間と人を抑えて集まった|
|B|テーマが決まっているが、決定に必要な情報が集まっていない|
|A|ドキュメントやアジェンダは打ち合わせの時間に共有され、ディスカッションする|
|S|事前にドキュメントが共有され、主催者はアジェンダと要点をまとめられている|
|SS|事前にドキュメントが共有され、参加者全員がそれぞれにアジェンダと要点をまとめられている|


# 会議の運営レベル
| レベル | 内容 |
|---|---|
|C|会議が定期で行われているため、とりあえず集まっている|
|B|会議の目的として、共有、発散、決定 のいずれかを目指すかが明確になっている|
|A|発散と決定が目的の会議の場合、会議の状況に合わせメンバーが常に変更され、発言しないメンバーが居ない|
|S|スポット会議と定例会議の使い分けが明確で、不用意な会議が行われない|
|SS|不要な会議は即座に廃止され、会議の目的や状況が変わったときには参加メンバーや進め方を積極的に変えている|







## これを作った経緯
会社で会議に参加する姿勢や意図って、色々大事なんだよって話を同僚から聞いて、ふと思いついて作りました。
なのでレベルに関する根拠はなく思いつきです！細かいことは気にしない！

主催者の設計も大事だし、参加者の姿勢も大事。
会議の中身はもちろん大事だけれど、会議の仕組みも変えていく必要がある。


個人的なレベル感としては
Cはダメ会議のあるあるだよね
Bは普通にやったらこれくらいかなという気持ち
A以上は良い会議が出来ている組織かな

と言う感じのイメージでレベルを書いてみました。


### 参加者
内職しまくりな自分ですが、これを書いて自分で反省した！
情報に対して受け身なのか積極的なのかという観点で書いてみました
結局その会議に参加する価値を決めるのは参加者１人１人の意識と関わり方次第


### 主催者
理想の会議は主催者だけが頑張るのではなく、全員参加の会議だと思ったのでSSは最初に決めた
ダメ会議は何故か集めてから議論の内容を決めようとするので、ある目的のために集まったのに最初からみんなの向きがバラバラ
主催者は質の高い会議にすることを目指して、最後は自分が居なくても回る会議を作ること

### 運営
運営は主催者と参加者が合わさって、会議をどのように上手く活用するかをイメージしました
会議の主催者だけでも参加者だけでも無く、組織全員がそういう雰囲気を作るんですよね

上位レベルには会議をなくすという意図や意思を強く持てることをハイレベルとした
目的あると会議を続けちゃうけど、会議をなくすことを思考実験することは大事だと考えました
思考実験することで会議の目的をシャープにすることが出来たり、目線を合わせたり出来る

会議というものは状況に合わせて常に変化するべきものなので、変化が出来ることが大切
ダメ会議はなんとなく定例だから集まってしまうという会議も良くあるよねという上でもあったやつ


# みなさんの会議はいかがですか？

開発を進めるときにも会議大事ですよね。
ちょっとしたペアプロももしかしたら会議なのかもしれません。
目的意識や参加意識、準備次第で大きく効果が変わると思います。

技術の価値を最大化するためにも会議の効果も最大化していきたいです。


みなさんの会議の実態や感想もコメントなどで教えてもらえると嬉しいです！！！
LazyLoadとは？



## はじめに

皆さんはウェブページを読み込むとき、すべての情報が一瞬で表示されると思いますか？それとも少しずつ表示されると思いますか？その答えは、「LazyLoad」の存在次第です。では、LazyLoadとは何なのでしょうか？

## LazyLoadの定義

LazyLoad（レイジーロード）は、ウェブページの性能を向上させるテクニックの一つです。直訳すると、「怠け者の読み込み」です。何が怠け者かというと、これはウェブページの中の画像や動画などのメディアファイルのことを指します。LazyLoadは、これらのファイルが必要になるまで読み込みを「待つ」機能です。

## LazyLoadの仕組み

LazyLoadの仕組みは簡単です。ウェブページを開いたとき、画面に表示されている部分だけのメディアファイルを読み込みます。スクロールして画面に新たな部分が表示されると、その時点で新たなメディアファイルを読み込みます。つまり、まだ表示されていない部分のファイルは「待機」状態になっていて、必要になったらすぐに読み込めるようになっています。

## LazyLoadのメリット

LazyLoadの最大のメリットは、ウェブページの読み込み時間の短縮です。全てのメディアファイルを一度に読み込むと、ウェブページの読み込みに時間がかかります。しかし、LazyLoadを利用すると、必要な部分だけを読み込むため、初回の読み込み時間が大幅に短縮されます。これにより、ユーザーは待ち時間をほとんど感じずにウェブページを閲覧することができます。

また、LazyLoadは通信データ量の節約にも役立ちます。全てのメディアファイルを一度に読み込むと、その分だけ通信データが消費されます。しかし、必要な部分だけを読み込むLazyLoadを利用すると、データ消費量を節約することができます。
実務半年経過したので振り返る

# はじめに
私は2022年10月から都内でWeb系エンジニアをやっています。それまではエンジニア未経験でした。前職は営業系の仕事です。
気付けば8か月経過しまして、少し遅いですが半年までの振り返りを書こうと思います。

# 入社当時のレベル感
最初から覚悟はしていましたが、実務を積む前の学習と実務に入ってからは、求められる技術力が想像をはるかに上回る難しさで驚きました。今は案件自体にはだいぶ慣れてきましたが、技術力においてまだまだだなと感じる場面ばかりです。

・入社前に自作したポートフォリオではRails+jQuery+AWS+SSL化+API使用+テストコード+Git/GitHub（Docker未使用）という感じでレベルはそこまで高くない。
・Docker使用したことなく全く分からない。
・GitGitHubは自己学習で使用してはいたが、チーム開発自体はやったことがなく最初はコマンド打つたびに緊張していた。
・フロント部分はVueもReactもやったことない。HTML,CSS,jQueryくらい。
・ちっちゃいSQLデータしか触ったことない。
・先輩に質問するたびに分からない単語が出てきて、ひたすらググる。

みたいな感じでした。拾っていただき、研修から育ててくださっている今の会社には大変感謝しています。

# 業務の振り返り

私が今いる会社は、

・受託開発
・メインの使用技術はPHP,Javascript,Smarty,SQL,Docker
・未経験エンジニアも入社して1～2か月ほどの研修後、開発案件で実装業務へと入る
・コードレビューしていただける
・年齢層は幅広く、多くの知見に触れられる

という感じです。研修をやったあととはいえ、案件に入ってからも使用の理解や既存コードの解析、技術のキャッチアップなど、ついていくのに必死でした。

知らないことにぶつかる→調べまくる→実装→レビューいただく→調べる、再思考→修正→レビューいただく...
一発でOKいただけることはほとんどなく、繰り返しレビューいただく毎日でした。ここまでフィードバックいただける環境に感謝しかありません。。

入社前と比べると出来ることも増え、自走力もそれなりについてきて確実に成長している実感はありますが、まだまだ学ぶべきことがたくさんあるなと感じている日々です。

# 意識していたこと
・仕様を理解し、振られたタスクの完了イメージを明確にする。
・タスクを自分なりにさらに細かく分け、1機能ずつ実装する。
・実装しようとしていることを可能な限り言語化して咀嚼する。
・自力で調べて考えて仮説を立ててなるべく1人称で実装する。
・しかし調べてみても分からなかったら、自分なりの考えを持って先輩方に質問する。
・詰まってから質問までの時間を決める。15～30分程度。（これは最初自分ひとりで抱え込みすぎて、こんなことで質問していいのかとなかなか質問できず、時間を浪費してしまっていた。）
・とにかくデキるひとの真似をまずはしてみる。
・社内の全メンバーと積極的にコミュニケーションをとる。
・明るく挨拶！

最後らへんは技術全く関係ないですが、チームとして円滑に業務をしていくうえで何よりも大切なことだと思っています。

# 最後に
こうやって振り返ると自分の成長やまだまだ足りない部分など客観的に分かって、これからさらにレベルアップしていこうと気持ちが引き締まりました。
先輩方の力を貸していただきながらやっと業務をこなせてきたくらいだと思うので、コードの可読性を高めたり、1人称での実装が確実にできるよう努めていきたいです。
とにかく今いる環境で自分なりに最大限努力してプロジェクトに貢献していきたいです！

また、今いる現場は割とレガシーな開発環境ですが、モダンな技術にも自分でキャッチアップしていきたいと思います。

私的なことながらここまで読んでくださりありがとうございます。
誰かの参考にもなれば幸いです。
terraformに自動コード生成機能が追加

# terraformのv1.5.0リリース
https://www.hashicorp.com/blog/terraform-1-5-brings-config-driven-import-and-checks

インポート機能の強化が肝。うれしい。

# terraformのインポート機能
これまでもインポート機能はあったが、既存のリソースを
terraformの管理下に置く(******.tfstateファイルに記載する）だけだった。
それをベースに書く事は可能だけれど。

今回のアップデートから、**tfファイルを自動生成**する事が可能になった。
これで特にterraformの知識が無くても、リソースさえ適切に作れてしまえば
リソース作成→terraform作成という流れでterraformコードを記載出来る。
勿論terraform内での構造は調整する必要はあるが。
Excel VBA書く時にめんどい部分をExcelのマクロを記録して、
それを元にコード書いてしまう様なイメージが近いかも。

# やり方
## 限界構成
これだけ。
```
  importer
    | -- generated(directory)
    | -- provider.tf
    | -- import.tf
```


### 中身
import.tfに対象のリソースのidと作成時のリソースを記載する。
何のリソースを取り込むかの指定をする必要があるので、
そこだけ事前に調べる必要がある。
下記はEC2インスタンスを指定した例。

``` import.tf
import {
  id = "i-xxxxxxxx" # リソースの識別子
  to = aws_instance.ec2          # import対象
}
```

# 実例
作成済EC2インスタンスのインスタンスIDをコンソールから拾う。
これがimport.tfのidに相当。

また、ステートマネージャのterraform上でのリソース記載は
**aws_instance**になるので、toにはこれを記載する。

実行は、importerディレクトリに移動した上で以下。
```
$ terraform init
$ terraform plan -generate-config-out=generated/instance.tf
```

上手く実行されると、実行時に指定された名称でtfファイルが出来る。
不必要なパラメータを外したり、変数にしたりして調整するとgood。
terraformの公式説明が分かり辛いので、この機能は便利だと思う。


``` generated/instance.tf
# __generated__ by Terraform
# Please review these resources and move them into your main configuration files.
resource "aws_instance" "ec2" {
  ami                                  = "ami-xxxxxxxx"
  associate_public_ip_address          = true
  availability_zone                    = "ap-northeast-1a"
  cpu_core_count                       = 1
  cpu_threads_per_core                 = 1
  disable_api_stop                     = false
  disable_api_termination              = false
  ....
```
freezedのwhenとかwhenOfNullの使い方

# Freezedクラスの定義

```Dart
@freezed
class Dummy with _$Dummy {
factory Dummy.dog(
    required String? name,
    required int? age,
)

factory Dummy.cat(
    required String? name,
    required int? age,
    required String? color,
)

// whenメソッドの引数の型がfactoryコンストラクタの名前に一致する
// 下の関数はwhenの例を示すだけの意味のないもの
String get name => when(
    dog : (_, _) => 'POCHI',
    cat : (_, _, _) => 'TAMA',
)

// whenOrNullであれば引数を限定することができる
String get name => whenOrNull(
    dog : (_, _) => 'POCHI',
)


}

```
今から始める - HTML / TypeScript / CSS 【経験0年】

# 概要
最近Tauriを使いアプリを作りたいと躍起になっている。
Rustも触ったことなかったので勉強し、いざ少しでもアプリを作ってみようとしたが、WEBアプリの知識も必要だということに気がついた。

https://qiita.com/RepublicOfKorokke/items/0facd84f54c2c5911e3c


HTMLなんて10年以上昔にFC2ブログをやっていた時以来触ってもいないため、全然わからない。
JavaScriptやTypeScriptなんて名前は良く聞くけど実際どういうものかもよくわからない。

こんな状況から色々勉強していくので、「何をどう学んだか」ということを残し、誰かの役に立つことを願いつつ自分がやったことを可視化して達成感を得るためのメモ書き記事。それがこれ。

# HTMLの知識
## HTMLの\<p\>とか\<div\>とかなんぞや?

https://html-coding.co.jp/annex/dictionary/html/

初めてHTML見た時に思った疑問に答えてくれる。
全てのタグを網羅しているわけではないが、良くみるやつは大体書いてある。
サンプルコードとこのサイトを行き来して読み進めていく。

## HTMLのヘッダーにあるviewportってなに？

https://seolaboratory.jp/48581/

responsiveなサイトを作る時とかに便利だということはわかった。
気になるから調べたけど、まだそこまで気にしないで良さそう。

## ヘッダーの順番って関係あるの?

https://on-ze.com/archives/4831

基本的になさそう。可読性が大事?
scriptやCSSは後読みのほうが優先とかなんとかあるらしい。



## HTMLのidとclassを使い分ける基準は?

https://it-biz.online/web-design/id-class/#:~:text=セレクタとは？-,id属性とclass属性の違いと使い分け,点で違いがあります%E3%80%82

classが大枠でidが単一要素らしい。
CSSとかJavaScriptで参照するときにつかうんだってさ。

# CSSの知識
## そもそもCSSってなんで必要なの?
「HTMLにデザインをあててオシャレにするため」
HTMLに要素をどんどん増やしても、これがないとほぼplain textのような見た目になる。

以下のサイトにCSSの有り無し比較画像があるが、デザインの大切さを感じた。
このサイトめっちゃわかりやすくて大好き。

https://saruwakakun.com/html-css/basic/css#section1

## 構文を知りたい

https://saruwakakun.com/html-css/basic/css#section3

## 要素の幅を設定したいけど長さの単位がたくさんあってわからない

https://www.sejuku.net/blog/75559

https://dev.classmethod.jp/articles/css-length-viewport/

単位多すぎない?
今でも使い分けをどうしたらいいかわからないけど、とりあえず知識としては持っておく。

## ボタンを横並びにしたい

https://saruwakakun.com/html-css/basic/display

CSSで実現しているということに感動した。HTMLじゃないんかい・・・
この辺りからCSSがいかに大切かが分かってきた。

# TypeScript
## そもそも何?

https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6

「型定義できるJavaScript」だそうです。
しかし自分はJavaScriptもわかりません。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript

> JavaScript のごく一般的な用途は、(先ほど例示した) Document Object Model API を介して動的に HTML と CSS を変更し、ユーザーインターフェイスを更新することです。

HTMLとCSSって基本固定値だけど、JavaScriptを使うと動的に変更できるらしい。
ボタン押した時の挙動とかも設定できるらしいので、ここからバックエンドに繋げたりすることになるはず。

## 変数宣言

https://qiita.com/findy-code/items/23cf2495d571723bf610

`let`と`const`が使えれば良さそう。

## !?

https://zenn.dev/oreo2990/articles/3d780560c5e552

最近良く見るアイツ。
式の左辺で使うとエラーになったので注意。

## async / await

https://future-architect.github.io/typescript-guide/async.html

非同期処理するための魔法の言葉。
Tauriのサンプルで良く見るので必須知識になりそう。

## cast

https://qiita.com/querykuma/items/e7667adba1477eb7d3a5

コードをいじっていると頻繁に「型違うかもよ？」エラーが出てきた。
キャストするにも方法が2つあるらしいが、`as`を使う方が良いらしい。


# 〆
とりあえずはこの程度の知識でTauriのGUI部分を作れています。
本当はReactとかのフレームワーク使ったほうが良いとかあるかもだけど、まずは基礎を固めたい。
そもそもフレームワーク多くてどれが良いかわからない。
Solidityのassembly{}, mload(), add()とは？

## `assembly{}`
Solidityでは、Ethereum仮想マシン(EVM)の低レベルな命令に直接アクセスできる`assembly`ブロックを使用することができます。これは通常、ガスコストを最適化したり、EVMが提供するより低レベルの機能を利用したりするために使用されます。

ただし、`assembly`ブロックは非常に注意深く使用する必要があります。なぜなら、Solidityの型安全性や他の高レベルの抽象化がないため、エラーを犯す可能性が高くなります。

`assembly`ブロック内では、以下のような命令が使用できます:

- `mload(p)`: メモリのアドレスpから32バイトのデータをロードします。
- `mstore(p, v)`: メモリのアドレスpに値vをストアします。値vは32バイトとみなされます。
- `sload(p)`: ストレージのアドレスpから32バイトのデータをロードします。
- `sstore(p, v)`: ストレージのアドレスpに値vをストアします。値vは32バイトとみなされます。
- `add(x, y)`, `sub(x, y)`, `mul(x, y)`, etc: 様々な算術命令。
- `jump(p)`, `jumpi(p, cond)`: 制御フロー命令。

以下に、`assembly`を使用して加算を行う簡単な例を示します:

```javascript
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Assembly {
    function add(uint _x, uint _y) public pure returns (uint) {
        uint result;
        assembly {
            result := add(_x, _y)
        }
        return result;
    }
}
```
このコードは`add`関数を定義し、それは2つの整数をパラメータとして受け取ります。関数は`assembly`ブロックを使用してこれらの数値を加算し、結果を返します。

再度、`assembly`の使用は注意が必要であり、可能な限りSolidityの高レベルの構造を使用することが推奨されます。また、私の知識は2021年9月までの情報であるため、最新のSolidityのバージョンで`assembly`の使用方法が変わっている可能性もあります。最新の情報を得るためには、公式のSolidityドキュメンテーションをご確認ください。

## add()についてもう少し詳しく
```javascript
function _split(bytes memory _sig) internal pure returns (bytes32 r, bytes32 s, uints v) {
	assembly {
		r := mload (add(_sig, 32))
		s := mload (add(_sig, 64))
		v := byte(0, mload(add(_sig, 96))
	}
}
```
このコードの中での`add`関数は、EVM（Ethereum Virtual Machine）のアセンブリーレベルでメモリアドレスを計算するために使われています。

引数として渡された`_sig`はバイト配列で、メモリに保存されています。配列の最初の32バイトは配列の長さを格納しており、実際のデータは33バイト目から始まります。

ここでの`add(_sig, 32)`は、`_sig`の実データ開始位置（すなわち、配列の長さを格納している32バイトを飛ばした位置）を示すメモリアドレスを計算しています。同様に、`add(_sig, 64)`と`add(_sig, 96)`は、それぞれ64バイトと96バイト先のメモリアドレスを計算しています。

そして、それぞれのアドレスから32バイトのデータをロードしています（`mload`関数がその役割を果たしています）。ここでロードされたデータは、それぞれECDSA署名の`r`成分、`s`成分、および`v`成分（回復ID）です。

ただし、ここでの`v`は単一のバイトであるため、96バイト先のメモリアドレスから32バイトをロードし、その最初のバイトを抽出しています（`byte`関数がその役割を果たしています）。

なお、コードの`uints v`は恐らく誤記で、`uint8 v`が正しいと思われます。`v`は通常、単一のバイト（27または28の値）を表すためです。

## See also:
https://qiita.com/uskayyyyy/items/19008d997d4c21954e9a
【学習】Ruby on Rails チュートリアル 第7版 - 第10章 ユーザーの更新・表示・削除

6/15 8:30 開始

*target="_blank"
リンクをクリックしたときに新しいタブ（またはウィンドウ）で開くようになる

*Railsが、新規ユーザー(POSTリクエスト)とユーザー編集用(PATCHリクエスト)をどのように区別するか
→Active Recordのnew_record?論理値メソッドで、ユーザーが新規か既存かを判断する。
新規ならtrueを返す。

    $ rails console
    >> User.new.new_record?
    => true
    >> User.first.new_record?
    => false


form_with(@user)を使ってフォームを構成すると、@user.new_record?がtrueの場合はPOSTを使い、falseの場合はPATCHを使う。


10.1.1まで終了

6/15 9:00 終了

6/19 8:15 開始

10.1終了

6/19 8:50 終了

6/20 8:25 開始

Webアプリケーションの文脈では...
*認証（authentication）:サイトのユーザーを識別すること
*認可（authorization）:そのユーザーが実行可能な操作を管理すること

・beforeフィルター
転送の仕組みを実装したいときに、コントローラの中で使用する。
before_actionメソッドを使って何らかの処理が実行される直前に特定のメソッドを実行する。

(例)

     class HogeController < ApplicationController
        before_action :logged_in_user, only: [:edit, :update]
          .
          .
          .
        # beforeフィルタ
        # ログイン済みユーザーかどうか確認
        def logged_in_user
          unless logged_in?
            flash[:danger] = "Please log in."
            redirect_to login_url, status: :see_other
          end
        end
    end


デフォルトでは、beforeフィルターはコントローラ内のすべてのアクションに適用される。
:onlyオプション（ハッシュ）を渡すことで、:editと:updateアクションだけに適用されるように制限をかけることができる。

10.2.2まで終了

6/20 9:00終了

6/21 8:30 開始

*フレンドリーフォワーディング
<現状>
 →保護されたページ(ユーザの編集画面など)にユーザーがアクセス
 →ログイン画面に遷移
 →ログインが成功すると自分のプロフィールページに遷移

<望ましい挙動>
 →保護されたページ(ユーザの編集画面など)にユーザーがアクセス
 →ログイン画面に遷移
 →ログインが成功すると"ログイン前にアクセスしたページ"に遷移


リクエストされたページを保存

    module SessionsHelper
      .
      .
      .
      # アクセスしようとしたURLを保存する
      def store_location
        session[:forwarding_url] = request.original_url if request.get?
      end
    end

request.get?
GETリクエストが送られたときだけ保存するようにしておくのがポイント
→POSTや PATCH、DELETEリクエストを期待しているURLに対してリダイレクト経由でGETリクエストが送信されてしまい、場合によってはエラーが発生する。

10.2まで終了

6/21 9:10 終了

6/22 8:30 開始

10.3.1 まで終了

6/22 9:00 終了

6/26 8:30 開始

・ページネーション
 1つのページで一度に表示する情報を制限する。
(例)1つのページで一度に最大30人ずつユーザーを表示する。

Gemfileにwill_paginate 
bootstrap-will_paginateを両方追加

    source "https://rubygems.org"
    git_source(:github) { |repo| "https://github.com/#{repo}.git" }
    
    gem "rails",                   "7.0.4"
    gem "bcrypt",                  "3.1.16"
    gem "faker",                   "2.21.0"
    gem "will_paginate",           "3.3.1"
    gem "bootstrap-will_paginate", "1.0.0"
    .
    .
    .



*indexビューにwill_paginateメソッドを追加。
will_paginateメソッドは、usersビューのコードの中から@usersオブジェクトを自動的に見つけ出し、それから他のページにアクセスするためのページネーションリンクを作成する。
※@users変数には、paginateメソッドで得た結果が必要
→indexアクション内の、「User.all」を「User.paginate(page: params[:page])」に置き換える。

10.4.1まで終了

6/26 9:00終了

6/29 8:30開始

10章終了!!

6/29 9:00終了
Solidityのecrecover()の使い方

## `ecrecover()`

`ecrecover`は、EthereumのSolidityプログラミング言語で使用される組み込み関数で、Elliptic Curve Digital Signature Algorithm (ECDSA) から公開鍵を復元します。主にメッセージが特定のアカウントから署名されたことを確認するために使用されます。

詳細については、関数は以下のパラメータを取ります:

- `hash`: 署名するメッセージのKeccak256ハッシュ
- `v`, `r`, `s`: ECDSA署名のコンポーネント

`ecrecover`関数は、署名したアカウントのアドレスを返します。このアドレスを比較することにより、署名が正当であること、つまりメッセージが特定のアカウントから発信されたことを確認できます。

次の例は、署名者がメッセージを署名したことを検証する方法を示しています:

```javascript
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract ECRecoverDemo {
    function recover(bytes32 hash, bytes memory sig) public pure returns (address) {
        bytes32 r;
        bytes32 s;
        uint8 v;

        // Check the signature length
        if (sig.length != 65) {
            return (address(0));
        }

        // Divide the signature in r, s and v variables
        assembly {
            r := mload(add(sig, 32))
            s := mload(add(sig, 64))
            v := byte(0, mload(add(sig, 96)))
        }

        // Version of signature should be 27 or 28, but 0 and 1 are also possible versions
        if (v < 27) {
            v += 27;
        }

        // If the version is correct return the signer address
        if (v != 27 && v != 28) {
            return (address(0));
        } else {
            // solhint-disable-next-line arg-overflow
            return ecrecover(hash, v, r, s);
        }
    }
}
```
このコードは、recover関数を定義し、それは署名されたメッセージのハッシュと署名そのものをパラメータとして受け取ります。関数は署名を分解し、それをecrecoverに渡して署名者のアドレスを取得します。これは特定のアカウントがメッセージを署名したことを確認するために使用されます。

## See also:
https://qiita.com/uskayyyyy/items/19008d997d4c21954e9a
Ethereumの署名に使用する"\\x19Ethereum Signed Message:\\n32"とは？

## 使用例
署名の検証コントラクトに以下のような形で使用されます
```javascript
contract VerifySignature {
    /*  Get message hash to sign */
    function getMessageHash(string memory _message) public pure returns (bytes32) {
        return keccak256(abi.encodePacked(_message));
    }

    /*  Sign message hash */
    function getEthSignedMessageHash(bytes32 _messageHash) public pure returns (bytes32) {
        // ここ
        return keccak256(
			abi.encodePacked("\x19Ethereum Signed Message:\n32", _messageHash)
        );
    }

    function verify(
        address _signer,
        string memory _message,
        bytes memory _sig // Signature that was created using MetaMask
    ) public pure returns (bool) {
        bytes32 messageHash = getMessageHash(_message); // Message hash
        bytes32 ethSignedMessageHash = getEthSignedMessageHash(messageHash); // Prefixed message hash
        return recoverSigner(ethSignedMessageHash, _sig) == _signer; // Compare signrer addresses
    }

    function recoverSigner(
        bytes32 _ethSignedMessageHash,
        bytes memory _sig
    ) public pure returns (address) {
        (bytes32 r, bytes32 s, uint8 v) = splitSignature(_sig);

        return ecrecover(_ethSignedMessageHash, v, r, s);
    }

    function splitSignature(bytes memory sig) public pure returns (bytes32 r, bytes32 s, uint8 v) {
        require(sig.length == 65, "invalid signature length");
        assembly {
            r := mload(add(sig, 32))
            s := mload(add(sig, 64))
            v := byte(0, mload(add(sig, 96)))
        }
    }
}
```

## 解説
`"\\x19Ethereum Signed Message:\\n32"` はEthereumでメッセージを署名する際の標準的なプレフィックス（接頭辞）です。これはEthereumクライアントによってメッセージに自動的に追加されます。

- `\\x19` は単一のバイトで、数値の25を表します。これは署名されるメッセージがただのデータであることを示すために追加されます。
- `Ethereum Signed Message:` は明示的なテキストで、署名されるメッセージがEthereumの署名メッセージであることを示します。
- `\\n32` は改行文字と32を示します。この32は、次に続くメッセージの長さ（バイト数）を表します。この場合、32バイトの長さは、Keccak256ハッシュ関数（EthereumのSHA3バージョン）によって生成されたハッシュの長さと一致します。

このプレフィックスは、ユーザーが署名するデータが偽造されたトランザクションではないことを確認するためのものです。つまり、Ethereumクライアントは、データがトランザクションではなく、単なるメッセージであることを示すためにこのプレフィックスを追加します。

そのため、`keccak256(abi.encodePacked("\\x19Ethereum Signed Message:\\n32", _messageHash));` のコードは、署名を検証する際に、Ethereumクライアントによって追加されたプレフィックスを考慮に入れるために使用されます。

## See also:
https://qiita.com/uskayyyyy/items/19008d997d4c21954e9a
パラメータと変数をBicepテンプレートに追加する

### はじめに

前回の続きです。

https://qiita.com/k-kimino/items/ca1ba6e9898e1f480b73

Microsoftのチュートリアルに沿ってBicepの使用感を確かめていきます。

https://learn.microsoft.com/ja-jp/training/modules/build-first-bicep-template/6-exercise-add-parameters-variables-bicep-template?pivots=powershell

### Bicepテンプレートに変数を追加

サンプルコードを以下に示します。
```
param location string = 'westus3'
param storageAccountName string = 'toylaunch${uniqueString(resourceGroup().id)}'
param appServiceAppName string = 'toylaunch${uniqueString(resourceGroup().id)}'

@allowed([
  'nonprod'
  'prod'
])
param environmentType string

var appServicePlanName = 'toy-product-launch-plan'
var storageAccountSkuName = (environmentType == 'prod') ? 'Standard_GRS' : 'Standard_LRS'
var appServicePlanSkuName = (environmentType == 'prod') ? 'P2v3' : 'F1'

resource storageAccount 'Microsoft.Storage/storageAccounts@2022-09-01' = {
  name: storageAccountName
  location: location
  sku: {
    name: storageAccountSkuName
  }
  kind: 'StorageV2'
  properties: {
    accessTier: 'Hot'
  }
}

resource appServicePlan 'Microsoft.Web/serverFarms@2022-03-01' = {
  name: appServicePlanName
  location: location
  sku: {
    name: appServicePlanSkuName
  }
}

resource appServiceApp 'Microsoft.Web/sites@2022-03-01' = {
  name: appServiceAppName
  location: location
  properties: {
    serverFarmId: appServicePlan.id
    httpsOnly: true
  }
}
```

コード上部に変数とデフォルト値を設定しています。リソース名称には`uniqueString()`関数が含まれており一意の値が設定されます。`environmentalType`は`prod`と`nonprod`の値をセットできる変数として宣言されていますが、デフォルト値は設定されていません。実行時に明示的に指定が必要です。もし指定しなかった場合は確認されます。
![Bicep3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3322105/d351a1f0-b298-aae0-1052-c12fcd01d92c.png)

こちらのコマンドで実行します。
```
New-AzResourceGroupDeployment `
  -TemplateFile main.bicep `
  -environmentType nonprod
```

デプロイが完了したことが無事に確認できました。
![Bicep4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3322105/fadc2c6d-41e7-495a-ba70-b49f80a5fe74.png)
![Bicep5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3322105/3a759eeb-326b-59e3-8035-bc1f62b076a2.png)
Flutter/Dartのbuild_runnerでの「Bad state: Unable to generate package graph, no `/.dart_tool/flutter_gen/pubspec.yaml` found.」エラー

# 何をしたら起こるエラーか
個人開発アプリを作成していて、[build_runnerパッケージ](https://pub.dev/packages/build_runner#publishing-packages)で`flutter pub run build_runner build`コマンドを実行して自動生成ファイルを作成することで使えるintlパッケージを利用しているのですが、このコマンドを実行すると下記のようなエラーが出てしまう（一部を書き出しています）
```shell
Built build_runner:build_runner.
Unhandled exception:
Bad state: Unable to generate package graph, no `{プロジェクトルート}/.dart_tool/flutter_gen/pubspec.yaml` found.
#0      _pubspecForPath (package:build_runner_core/src/package_graph/package_graph.dart:232:5)
#1      _parsePackageDependencies (package:build_runner_core/src/package_graph/package_graph.dart:206:21)
#2      PackageGraph.forPath (package:build_runner_core/src/package_graph/package_graph.dart:101:33)
```
## 解決策
下記のissueに同様の問題が記載されてました

https://github.com/dart-lang/build/issues/2835

どうやらビルドする際にintlパッケージを入れていてgenerate: trueの設定をpubspec.yamlに入れているとこのエラーになるようです。
この設定を削除して、`flutter clean`→`flutter pub get`を実行した上でbuild_runnerコマンドを実行するとうまくいきます

## これでもうまくいかない場合
### main.dartに下記のようにローカライズするコードが含まれている場合
  ```dart
  supportedLocales: const [
              Locale('ja'),
            ],
  ```
この時は.dart_tool/flutter_gen/pubspec.yamlファイルを作成して、下記のように記載するかこの設定を削除します
その後、`flutter clean`→`flutter pub get`を実行した上でbuild_runnerコマンドを実行するとうまくいきます
```yaml
name: test
description: A new Flutter application.
version: 1.0.0

dependencies:

dev_dependencies:
```

https://github.com/dart-lang/build/issues/2835#issuecomment-920640502
cscの作法 その362

# 概要
cscの作法、調べてみた。
書いたコードをコンパイルしたら、defenderにマルウェア扱いされた場合の対処法。

# 環境
windows 10

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/909a79ac-24ff-bc64-3807-722598de9a72.png)

# 方針
見逃してくれと土下座する。

# 書いたコードをコンパイルしたら、defenderにマルウェア扱いされた場合の対処法。

- 除外を追加する。

- [設定]タブの [更新>セキュリティ>脅威]に移動します。
- [ウイルス 対策] の設定で、[設定 の管理 ] を選択します。
- [ 除外] で[ 除外 の追加または削除] を選択します。
- 「フォルダー」を除外します。
- 「フォルダーの選択」が表示されます。
- 除外したい任意のフォルダーをクリックし、「フォルダーの選択」をクリックします。

- 「除外」画面に戻ったら、「除外の追加」欄に任意の除外フォルダーが表示されたことを確認します。

以上。
Markdown Like(マークダウンライク)な世の中にしよう

※個人的な見解になります。ぜひ意見やアドバイスなどあればコメントください!

# はじめに
私は、なんでもかんでもマークダウンで作りたがります。だってマークダウンって最高ですよね？
じゃあ何が最高か、説明します。


# なんでマークダウンなんすか（結論） 
キーワードは3つです。
 - 速さ：作業スピードが爆速になる。
 - 品質：より構造的に資料構成になる（論理的思考ライク）
 - 汎用性：さまざまなプラットフォームで活用できる。

```mermaid
%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#069467',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#069467',
      'lineColor': '#F8B229',
      'secondaryColor': '#00793D',
      'tertiaryColor': '#1E1E2E'
    }
  }
}%%
graph TB
    A[マークダウン]
    subgraph 速さ
    B[マークダウン記法によるフォーマット]
    BB[エディタの軽量性]
    end
    subgraph 品質
    C[論理的な資料作成]
    CB[PDCAサイクルの高速化]
    CC[迅速な図形作成]
    end
    subgraph 汎用性
    D[OS アプリケーション非依存]
    DB[HTMLへの容易な変換]
    end
    A --> B
    A --> BB
    A --> C
    A --> CB
    A --> CC
    A --> D
    A --> DB


```

## 速さとは
1. 文書の装飾に時間をかけることなく、ショートカットキーだけでフォーマットが可能
2. マークダウンエディタは基本的に軽量なため、立ち上げから使用までの時間が短縮される

## 品質とは
1. 論理的な構造を持った資料を容易に作成することができる
2. PDCAの速度が上がる。レビューと修正のサイクル（PDCA）が高速化され、作業の効率が上がる。
3. 図形作成が*思考の速度*で作成できる


## 汎用性とは
1. マークダウンはプレーンテキストで記述するため、OSやアプリケーションに依存することなく、どこでも利用できる。
2. HTMLへの変換が容易なため、ウェブ上での公開もスムーズに行える。
私がよく利用するのは、NotionとGithubです。互換性があるため文章の体系を維持して移行できます。

# ディスカッション（デメリット）
デメリットもあります
- エクセルには勝てない部分も多い。
複雑な置換処理、表計算、グラフ作成ここら辺は私の知識では対応できず、エクセルを使ってしまう。
- もちろんパワーポイントも（マークダウンからスライド作成ができるプラグインはある）
視覚的に画像の配置など決められたり、複雑な遷移図の作成はMermaidJSでは難しいです。
- 学習コストがかかる。シンプルな文書ではなく設計書レベルの資料作成では、高度なマークダウン習得者がいないと難しいかもしれませんね。（画像をほかのツールで作成し張り付けるだけなら可）

# 習得すべきこと
- マークダウン記法
- MermaidJSの記法（図形作成）
- 正規表現（最低限のことはエクセルを使用せずに作業を高速化する）

### マークダウン記法
-  [Markdown チートシート](https://gist.github.com/mignonstyle/083c9e1651d7734f84c99b8cf49d57fa)
- [Markdown チートシート Qiita](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

### MermaidJSの習得リンク
- [MermaidJSの図形サンプル](https://mermaid.js.org/syntax/examples.html)
- [Mermaidjs Editorですぐお試し](https://mermaid.live/)
- [ChatGPTにMermaidJSを書かせる](https://qiita.com/sakaki_developer/items/09babe95b7f32397dbe1)

### 正規表現学習リンク
http://www2.otani.ac.jp/fkdsemi/seikihyogen/mondai.html


# 最後に
マークダウンはその速さ、品質、そして汎用性から、情報を整理し伝えるツールとして無比の価値を持っています。それぞれの特性が相まって、一度マークダウンを身につけるとその手放せない魅力があります。

そして次は、このマークダウンの素晴らしさを皆さんと共有し、世の中を「Markdown Like」な世界にしていきたいと考えています。その一環として、このブログを通じてマークダウンの知識を深めていきましょう。一緒にマークダウンの世界を探求していきましょう！

# 参考
https://qiita.com/e99h2121/items/97168cad64ff40afb77d
Matplotlib_テスト

初投稿になります。

matplotlibの使い方_グラフ作成(y1:sin波、y2:cos波)
--------------------------------------------

```py
import numpy as np 
import matplotlib.pyplot as plt

#データの作成
x=np.arange(0,6,0.1)
print(x)
y1=np.sin(x)
y2=np.cos(x)

#グラフの描画
plt.plot(x,y1, label="sin")
plt.plot(x,y2, linestyle="--", label="cos")#破線で描画
plt.xlabel("x")
plt.ylabel("y")
plt.title('sin&cos')#タイトル
plt.legend()
plt.show()
```
ChatGPT Function Calling で足し算

gpt-3.5-turbo-0613 が発表されて Function Calling なる関数呼び出しができるようになりました。詳しい使い方などはクラスメソッドさんの解説がわかりやすいので参考にしてください。

https://dev.classmethod.jp/articles/openai-api-gpt-update-ver-0613/

せっかくなのでオリジナルの関数でも作ってみます。簡単に２つの数の足し算をしてみます。

```sample.py
import openai
import os


# OpenAI APIキーの準備
openai.api_key = "XXXXXXXXXXXXXXXXXXXX"


import json

def sum_two_numbers(number1, number2):
    info = {
        "number1": number1,
        "number2": number2,
    }
    return json.dumps(info)


functions=[
    {
        "name": "sum_two_numbers",
        "description": "２つの数の足し算",
        "parameters": {
            "type": "object",
            "properties": {
                "number1": {
                    "type": "string",
                    "description": "1つ目の数",
                },
                "number2": {
                    "type": "string",
                    "description": "2つ目の数",
                },
            },
            "required": ["number1, number2"],
        },
    }
]

model_name = "gpt-3.5-turbo-0613"

question = "１＋１０は？"

response = openai.ChatCompletion.create(
    model=model_name,
    messages=[
        {"role": "user", "content": question},
    ],
    functions=functions,
    function_call="auto",
)
message = response["choices"][0]["message"]
if message.get("function_call"):

    function_name = message["function_call"]["name"]

    arguments = json.loads(message["function_call"]["arguments"])
    function_response = sum_two_numbers(
        number1=arguments.get("number1"),
        number2=arguments.get("number2"),
    )

    second_response = openai.ChatCompletion.create(
        model=model_name,
        messages=[
            {"role": "user", "content": question},
            message,
            {
                "role": "function",
                "name": function_name,
                "content": function_response,
            },
        ],
    )

    print(second_response.choices[0]["message"]["content"].strip())
else:
    print(response.choices[0]["message"]["content"].strip())
```

![2023-06-14_12h22_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33704/f3c00c8c-533b-c6e9-f154-cd41ab9f7d20.png)


シンプルに関数の説明を「２つの数の足し算」として引数を２つ定義してあげるだけで勝手に答えを出力してくれます。便利です。