OmniAICreator/Qiita-1.07M huggingface dataset:
【SwiftUI】DragGestureを使って画面タップを可視化する

# はじめに
昨日、`@GestureState`についての記事を書きました
今回はそれの応用で実用的なものを作ってみます

https://qiita.com/SNQ-2001/items/df8c61ff82ffc7bdad33

# サンプルアプリ
これは画面タップを可視化しています。
![Simulator Screen Recording - iPhone 15 - 2023-11-09 at 23.17.59.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/e524803a-fa7d-a502-fe04-fceb80d56e74.gif)

# 実装
```swift
import SwiftUI

struct ContentView: View {
    @GestureState private var location: CGPoint?

    var body: some View {
        VStack {
            if let location {
                Circle()
                    .frame(width: 50, height: 50)
                    .position(location)
                    .foregroundStyle(.cyan)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.red)
        .gesture(dragGesture)
    }
    
    var dragGesture: some Gesture {
        DragGesture(minimumDistance: 0, coordinateSpace: .local)
            .updating($location) { value, location, transaction in
                location = value.location
            }
    }
}
```

# おわり
`@GestureState`を使うと自動でnilになるので指を離したことを検知することが簡単に行えます。
パワーポイント用マクロ　

Sub ResizeHiragana()
    Dim oShp As Shape
    Dim oTxtRng As TextRange, oPara As TextRange
    Dim i As Long, j As Long
    Dim sText As String
    Dim charSize As Single

    ' アクティブなスライドのすべてのシェイプをループ
    For Each oShp In ActiveWindow.View.Slide.Shapes
        If oShp.HasTextFrame Then
            If oShp.TextFrame.HasText Then
                Set oTxtRng = oShp.TextFrame.TextRange
                For i = 1 To oTxtRng.Length
                    sText = Mid(oTxtRng.Text, i, 1)
                    ' ひらがなのUnicode範囲は3040-309F
                    If AscW(sText) >= &H3040 And AscW(sText) <= &H309F Then
                        ' 既存のフォントサイズを取得
                        charSize = oTxtRng.Characters(i, 1).Font.Size
                        ' フォントサイズを20%減少
                        oTxtRng.Characters(i, 1).Font.Size = charSize * 0.8
                    End If
                Next i
            End If
        End If
    Next oShp
End Sub
Docker環境でreactプロジェクトを構築してみよう

(追記)
1. ターミナルでの```docker -v```と```docker-compose -v```の時の表示内容の参考画像をgithubのreadmeに追記
1. プロジェクトのビルドツールをviteにした内容で変更しました


# 内容 
本番環境への移行を意識した環境構築として、dockerを用いたreactのプロジェクト作成の方法をまとめました。
(月に１本はqiita記事を投稿しようと思ったんですが、先月書けなかったのは失態でした)

## ファイル構成

```terminal:初期ファイル構成
tree
.
├── .gitignore
├── Dockerfile
└── docker-compose.yml

※ref-images-for-readmeはREADME.md用なので削除して構いません
```


# 詳細
githubにまとめています。こちらをdownload zipかcloneして試してみてください

https://github.com/TatsuyaMaeta/react-in-docker.git


### ==========================================
#### 参考リンク
https://qiita.com/shun198/items/18014c46901f256af9ee

https://www.youtube.com/watch?v=8UVRsJnD3Cc

https://hackmd.io/@nutmeg/HkZYGi-Yq
Logの別シートへの出力

同一ブック内にLog用シート(下記ではActivesheet)を作り、B2セルに時刻、C2セルにログ内容を追記していく方法。

LogMessageはお好みで。

```
Function writeLog(ByVal LogMessage As String)

    Dim LastRow As Integer
    Dim LOG As Worksheet

    Set LOG = ActiveSheet

    LastRow = LOG.Cells(Rows.Count, "B").End(xlUp).Row + 1

    LOG.Cells(LastRow, "B").Value = Now()
    LOG.Cells(LastRow, "C").Value = LogMessage

End Function
```
オブジェクト指向　インスタンス生成のたびにヒープ領域が使われる

オブジェクト指向プログラミングにおけるインスタンスの仕組みについて整理しています。

:::note
インスタンスを作る命令（newなど）を実行すると、そのクラスのインスタンス変数を格納するために必要な大きさのメモリがヒープ領域に割り当てられる。

この時、インスタンスを指定してメソッドを呼び出す仕組み実現するため、インスタンスからメソッドエリアにあるクラス情報への対応づけも行う。（クラス情報が保存されたメモリ領域のこと）
:::

オブジェクト指向プログラミングでは、従来のプログラミング言語と比較してインスタンスの作り方に特徴がある。

##### 従来のプログラミング言語
* ヒープ領域は、割り当て処理のオーバーヘッドがかかる上に、使い終わった後にメモリの解放を忘れてしまうことでメモリリーク問題も起こりやすい
* コードとグローバル変数を静的領域に配置し、サブルーチン呼び出しの情報はスタック領域を使って受け渡すことが多かった


##### オブジェクト指向プログラミング
* 有限のメモリ領域であるヒープ領域を大量に使って動く
* 最近はハードウェア能力も向上したため、ヒープ領域にメモリを確保したり解放したりすることによるオーバーヘッドは全体から見れば非常に小さくなった
* またガベージコレクションの仕組みにより、メモリの解放忘れによるメモリリーク問題もほとんど気にする必要がなくなった


:::note warn
メモリ容量が大きくなったとはいえ、一時期に膨大な数のインスタンスを作ると、CPUに大きな負荷がかかり、ひどい時にはメモリ領域不足でシステム障害になることもあり得る。

大量の情報をまとめて読み込んで処理をするアプリケーションのプログラムを書く場合、その処理によってヒープ領域をどれだけ使うのかをあらかじめ見積もって対応する必要がある。
:::
ResizeObserver で iframe の高さを自動調整 (2023年)

# 解決方法

iframeの中身の高さに応じて、iframe自体の高さを自動調整したいことは多いが、現時点では [ResizeObserver](https://developer.mozilla.org/ja/docs/Web/API/ResizeObserver)を使うのが良さそうだった。

```html
<!doctype html>
<html>
  <body>
    <iframe src="inner.html" id="myframe"></iframe>
    <script>
      const iframe = document.getElementById('myframe');
      const resize = () => {
        iframe.style.height = iframe.contentDocument.documentElement.offsetHeight + 'px';
      }
      const observer = new ResizeObserver(resize);
      iframe.addEventListener('load', () => {
        // 手元で試したときはobserveを開始したタイミングでcallbackが呼ばれたが、
        // そうでない場合はここで `resize()` を呼び出すこと
        observer.observe(iframe.contentDocument.documentElement);
      });
    </script>
  </body>
</html>
```

# 制限

試していないが、おそらくクロスオリジンでは使えない。

# その他

高さ自動調整の対象になるその他の要素は `<textarea>` だが、 `form-sizing` というCSSプロパティで自動調整されるようになるらしい。
UiPathでBox Driveを使用したところ、、、。

## 1,はじめに
Box Driveに切り替わったときに、エラーが頻発していました。その時の情報をまとめておきます。この後からはBox DriveのことをBoxと表します。
## 2,BoxとUiPathとの相性
**結論から言いますとAPI使わないと相性が悪いと思います。**
Boxからローカルディスクにファイルコピーのアクティビティで

:::note alert
**「システムに接続ができませんでした」**
:::
とエラーになります。
しかしローカルディスクからBoxへのコピーアクティビティは100％機能します。
## 3,Boxへの対応方法
下記の3つが対応方法としてあげられます。

:::note info
**(1)リトライスコープを使用する(リトライスコープについて：https://qiita.com/thxUVER2012/items/387160b6db55c480456e)**
:::
:::note info
**(2)Box(エクスプローラーにファイルを同期するデスクトップ常駐アプリ)をプロセスキルして、再度Boxを起動させる**
:::
:::note info
**(3)APIを使用する**
:::

## 4,結果
(1)を行い、エラーがあるので、(2)も加えて行いました。(3)は現場でAPIを使用できない状況なので結果はわからないです。

:::note info
**(1)リトライスコープを使用する**
これは効果ありましたが、Boxを使用している10ロボット中、1ロボットだけがエラーになりました。毎日稼働していて、この1ロボットだけ月のエラー率は0.35です。
:::

:::note warn
**(2)Boxをプロセスキルして、再度Boxを起動させる**
これは効果あったのかなという感じです。(1)であげたロボットが(2)の有無に関わらずエラーです。
:::

## 5,補足
(3)APIを使用する
こちらについては、

https://qiita.com/Gaboz/items/84a82bdd2d0396a86028

を参考にしました。
@Gaboz(ガボッツ)さんにはいつもお世話になっています。

## 6,さいごに
これら3つの対応方法はUiPath Friendsのもくもく会で聞くことができました！
下記になります。

https://uipath-friends.doorkeeper.jp/

参加して1年経ちますが、わからないことがあるときはよく聞きにいっています。
みなさんとても優しく熱心に教えてくれます！！

:::note info
11/18(土)にUiPath Friends Festival 2023 ～集え自動化ユーザー！AI x オートメーションで切り拓こう！輝く未来の扉～が開かれ、私はライトニングトークしますので興味があったら参加してみてください！！
:::

https://uipath-friends.doorkeeper.jp/events/162234
シェルの種類

# はじめに
ざっくりとしたよく知られているシェルの種類一覧。

| シェル | 説明                                                                                                    | 
| :----- | :------------------------------------------------------------------------------------------------------ | 
| sh     | Bourneシェル。UNIX系OSで古くから使われているシンプルなシェル。機能は少ない                              | 
| bash   | Bourneシェルを大幅に改良したシェル (Bourne Again SHell)。多くのディストリビューションで標準となっている | 
| csh    | BSD系UNIXで使われてきたシェル。sh系とはスクリプトが異なる                                               | 
| tcsh   | cshを改良したシェル                                                                                     | 
| ksh    | Bourneシェルを拡張したシェル                                                                            | 
| ash    | shの代替となる、小型かつ高速なシェル                                                                    | 
| dash   | Debian版のash。スクリプトの実行が高速な軽量シェル                                                       | 
| zsh    | kshにbashやtcshの機能を取り入れた非常に強力なシェル                                                     | 
| fish   | bashやzshのような高機能なシェル。ユーザーフレンドリーな操作が可能。POSIX非互換                          |
【MySQL 】mysqldポート番号との競合！ERROR 1045 (28000): Access denied for user 'root'@'localhost'エラーについて

# 概要
Dockerを利用してローカルDBに接続するDjangoアプリケーションを起動後、DBeaver(データベース管理ツール)でローカルDBに接続したら以下のエラーが表示されました。

```
ERROR 1045 (28000): Access denied for user 'root'@'localhost'
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/be626071-7693-8906-db86-9d6220c5e18a.png)

本記事ではこちらの原因と解決方法を記載します。

# 解決方法
まずは結論から。
以下の箇所を変更することで、解決しました。

### 修正前
```yaml
  mysql:
    image: mysql:latest
    container_name: xxxxx
    environment:
      MYSQL_ROOT_PASSWORD: xxxxx
      MYSQL_USER: root
      MYSQL_PASSWORD: xxxxx
      MYSQL_DATABASE: xxxxx
    ports:
      - "3306:3306"
```

上記の状態だとDBeaverの上述のエラーになります。
※ただし、上記でもDockerコンテナに入って`mysql -u root -p`でアクセスすると問題なく接続できます

### 修正後
```yaml
  mysql:
    image: mysql:latest
    container_name: xxxxx
    environment:
      MYSQL_ROOT_PASSWORD: xxxxx
      MYSQL_USER: xxxxx
      MYSQL_PASSWORD: xxxxx
      MYSQL_DATABASE: xxxxx
    ports:
      - "3310:3306" # MySQLコンテナを3310にマッピング
```

上記の通り、`ports`を変更することで、無事にDBeaverでローカルDBに入れました。

# 原因は...ポート番号の競合だった
原因はポート番号3306にありました。
なぜ3310に変更したら解決したのか？というと、3306ポートで競合が発生していたからです。
以下のコマンドで、3306が使われているのか確認できます。

```
sudo lsof -i :3306
```

`lsof`コマンドは`"List Open Files"`の略。
システム上で開かれているファイルやネットワークソケット、プロセスなどの情報をリストするためのコマンドです。これにより、ポート3306でリスンしているプロセスがわかります。

なにも返ってこない場合は3306ポートは使われていません。
しかし、自分の場合、以下のように返ってきました。

```
COMMAND  PID       USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
mysqld  1490 XXXXXXXXXX   20u  IPv4 XXXXXXXXXXXXXXXXXX      0t0  TCP localhost:mysql (LISTEN)
```

上記の出力結果から、プロセス`mysqld`によってポート3306が使用されていることが分かります。
つまり、ローカルマシン（ホストマシン）のMySQLサーバーがポート3306でリスンしているので、他のアプリケーションが同じポートを使用しようとすると競合が発生する、ということです。

3306のままでもDockerのmysqlコンテナに入ればアクセスできたのは、Docker上では、独自に確保したポートに接続しており、競合するポートがなかったからですね。
MySQLコンテナをポート3310にマッピングした場合、MySQLサーバーはポート3310でリスンし、MySQLクライアントはポート3310を使用して接続します。

新しいMySQLコンテナをDockerで起動する際、ポート番号を3306から変更する必要があったのです。上記では3310としましたが、3306以外であればOKです。これにより、複数のMySQLインスタンスを同じホストで実行できるようになります。

## 補足：`mysqld`ってなに？？
`mysqld`はMySQLデータベースサーバー（MySQLデーモン）の実行プロセスです。
デーモンとはUNIX系OSではバックグラウンドで動作するプロセスのことで、`docker compose up -d`のときの`d`と同じデーモンプロセスですね。

ちなみに以下コマンドで稼働しているかわかります。

```
$ mysqladmin ping -h 127.0.0.1
mysqld is alive
```
Formオブジェクト、中間テーブル、ActiveHashの比較

# Formオブジェクト、中間テーブル、ActiveHashの比較

Webアプリケーションの開発において、データ管理は重要な要素です。Railsには異なる役割を果たすツールがいくつか存在します。ここでは、Formオブジェクト、中間テーブル、ActiveHashについて、それぞれの特徴と使いどころを分かりやすくまとめてみましょう。

## Formオブジェクト

### 何に使うのか？

Formオブジェクトは、主に複雑なフォームや複数モデルとのやりとりを簡素化するために使用されます。通常、単一のモデルに紐づかないフォームの入力データを処理する際に役立ちます。

### コード例

```ruby
# app/forms/user_profile_form.rb
class UserProfileForm
  include ActiveModel::Model

  attr_accessor :user_name, :email, :profile_text

  validates :user_name, presence: true
  validates :email, presence: true
  validates :profile_text, presence: true

  def save
    # ビジネスロジックやモデルへの保存処理
  end
end
```

### 使いどころ

- 複数モデルとのデータのやり取りがある場合。
- 単一のモデルに依存しないフォームデータの処理が必要な場合。

## 中間テーブル

### 何に使うのか？

中間テーブルは、通常、多対多のアソシエーションを扱う際に利用されます。複数のモデル同士を結びつけるための仲介として役立ちます。

### コード例

```ruby
# Userモデル
class User < ApplicationRecord
  has_many :user_roles
  has_many :roles, through: :user_roles
end

# Roleモデル
class Role < ApplicationRecord
  has_many :user_roles
  has_many :users, through: :user_roles
end

# UserRoleモデル（中間テーブル）
class UserRole < ApplicationRecord
  belongs_to :user
  belongs_to :role
end
```

### 使いどころ

- 多対多のアソシエーションを構築する場合。
- 関連するモデル同士を柔軟に結びつけたい場合。

## ActiveHash

### 何に使うのか？

ActiveHashは、データベースにテーブルを作成せずに、モデルにデータを持たせるためのGemです。主に静的なデータを扱う際に有用です。

### コード例

```ruby
# app/models/prefecture.rb
class Prefecture < ActiveHash::Base
  self.data = [
    { id: 1, name: 'Hokkaido' },
    { id: 2, name: 'Tokyo' },
    # 他の都道府県データ
  ]
end
```

### 使いどころ

- データが静的で、データベースに保存するほどではない場合。
- カテゴリや都道府県などのマスターデータを管理する場合。

## まとめ

- **Formオブジェクト**はフォームの入力データ処理に使用され、複数のモデルとのやりとりを単純化します。
- **中間テーブル**は多対多のアソシエーションを表現し、関連するモデル同士を結びつけます。
- **ActiveHash**はデータベースに保存せずに、モデル内に静的なデータを保持するために使用されます。

これらのツールを適切に活用することで、Railsアプリケーションの開発がよりスムーズに進むでしょう。それぞれの特性を理解し、プロジェクトの要件に応じて使い分けることが重要です。
[React].envファイルの使い方

# はじめに
Reactでの.envファイルの使い方についてメモとして残しておきます。

# Reactにおける.envファイルの使い方
.envファイルにはアプリケーションで使用する、環境変数や設定値を設定することが多いです。

以下がサンプルコードになります。
``` .env
REACT_APP_SAMPLE_VALUE=Hello World
```
Reactでは、頭文字に「REACT_APP_」を付けないといけません。
それでは呼び出してみましょう。
```
export const Sample = () => {
  const envValue = process.env.REACT_APP_SAMPLE_VALUE;

  return (
    <div>
        <p>{envValue}</p>
    </div>
  );
};
```
呼び出すときは、「process.env.(環境変数名)」という風に呼び出します。
画面を確認していきましょう。

![スクリーンショット 2023-11-09 22.16.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/940a995a-9588-9c4a-7f12-6c602f95a9d9.png)

すると、画像のように.envファイルの変数の値を取得することができました!

ちなみに、APIのシークレットキーなどの情報は、管理すべきではないそうです。
※gitignoreで隠しファイルとして設定しても、ビルド時のログを確認すると見れてしまうらしいです。

https://qiita.com/ken-s/items/b6190283db28295155bb

# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
Rails migration 新規追加、カラム追加、カラム削除、データ型変更

<h1>なぜこの記事を書こうとしたか</h1>
自分んがよく使う　rails g migration　コマンドをまとめておけば
後々楽に確認できるためまとめておこうとした

<h1>コマンド集　</h1>
まずはわかりやすい名前でファイル名でmigrationファイルを作る
例えば新規の場合は"new"や追加の場合は"add"を使ったりして

```console
$rails g migration "ファイル名"
```

マイグレーションファイルを開こう

```rb
class "ファイル名" < ActiveRecord::Migration[7.0]
    def change
        #新規作成の場合
        create_table :"テーブル名" do |t|
          t."データ型" :"カラム名"
          t."データ型" :"カラム名"
          t."データ型" :"カラム名"
      
          t.timestamps
        end
        
        #カラム追加、削除の場合
        add_column :"テーブル名", :"カラム名", :"データ型" 
        remove_colomn :"テーブル名", :"カラム名", :"データ型"
        
        #データ型の変更
        change_column :"テーブル名", :"カラム名", :"データ型"
    end
        
```
テーブル名は複数にすること大文字にしたい箇所は"_"を挟むこと

<h1>最後に</h1>

他にもrails g migration のオプションにてデータ型やカラム名を指定してから、ファイルを作る方法があるが、一旦はファイルに直に書く方法で十分だと思いこれだけまとめてみた。余裕があったら他も覚えていこう。
grep・sort時にヘッダ行（一行目）を残すhdrコマンドを作ったよ

## はじめに

いきなりですが問題です。「👇ここ」は一体何の値でしょう？

```console
$ ps -u | grep bash          👇 ここ
koichi   2925430  0.0  0.0  10804  6040 pts/7    Ss   20:31   0:02 -bash
koichi   2970810  0.0  0.0   8824  5568 pts/23   Ss   20:35   0:00 -bash
koichi   3061064  0.0  0.0   8688  4204 pts/22   Ss   21:11   0:00 -bash
koichi   3309961  0.0  0.0   8820  5832 pts/0    Ss   22:03   0:00 -bash
```

というような問題を解くのが嫌になったので、`hdr` コマンドを作りました。コマンドの前に　`hdr` と書くだけでヘッダ行を残すことができます。

```console
$ ps -u | hdr grep bash       👇 ここ
USER         PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
koichi   2925430  0.0  0.0  10804  6040 pts/7    Ss   20:31   0:02 -bash
koichi   2970810  0.0  0.0   8824  5568 pts/23   Ss   20:35   0:00 -bash
koichi   3061064  0.0  0.0   8688  4204 pts/22   Ss   21:11   0:00 -bash
koichi   3309961  0.0  0.0   8820  5832 pts/0    Ss   22:03   0:00 -bash
```

## それ awk でできるよ？

面倒なので書きたくありません。`hdr` コマンドは対話シェル用です。シェルスクリプトの中に書く場合は以下の方法を使いましょう。

```console
$ ps -u | awk 'NR==1 || /bash/'
```

上記のコードは awk を使う前提となってしまいますが、`hdr` コマンドは任意のコマンドを呼び出せるので `rg` や `ag` などと組み合わせて使うことも出来ます。また **`sort` コマンドと組み合わせることもできます。**

```console
$ ps -u | hdr grep bash | hdr sort -k 5,5n
```

hdr コマンドは組み合わせて使えるコマンドを作るという Unix 哲学的な考え方のコマンドです。

## hdr コマンドの使い方

使用するときは以下のコードを `.bashrc` なり `.zshrc` なりにコピペするか、`.` (`source`) コマンドで読み込んでください。

```sh
hdr() {
  ( IFS= read -r REPLY && printf '%s\n' "$REPLY" )
  "$@"
}
alias hdr="hdr "
```

`( ... )` を使っているのは `REPLY` 変数をローカル化するためです。`local` コマンドでローカル変数にしていないのは、`local` 非対応の POSIX シェルにも対応するためです。`REPLY` 変数は bash などでは省略可能ですが、省略できない POSIX シェルもあります。`head -n 1` は1行ではなくある程度のサイズを読み込むので動作しません。`alias` については後述します。

ヘッダが二行以上の場合にも対応したいとかヘルプを表示したいとか高機能なものが欲しい人はこちらをどうぞ

```sh
hdr() {
  case ${1:-} in
    -h | --help) set -- ;;
    --) shift && set -- 1 "$@" ;;
    *[!0-9]*) set -- 1 "$@" ;;
  esac

  if [ $# -eq 0 ]; then
    echo "Usage: hdr [num | --] [command [args...]]"
  else
    (
      while [ "$1" -gt 0 ] && IFS= read -r REPLY; do
        set -- $(($1 - 1))
        printf '%s\n' "$REPLY"
      done
    )
    shift
    "$@"
  fi
}
alias hdr="hdr "
```

## なんでシェル関数にしたの？

普段私は特別な理由がない限り、ツールは単独のシェルスクリプトにするのですが、今回はそれでは不便だったので rc ファイルに定義するシェル関数にしました。理由はエイリアスです。

`grep` コマンドって普通色が付きますよね？ 人によっては付かないかもしれませんが。色がつく理由は次のようなエイリアスが設定されているからです。

```sh
alias grep='grep --color=auto'
```

しかし、ここで `hdr` を単独のシェルスクリプトにしてしまうと、このエイリアスは展開されません。

```sh
    👇ここは hdr コマンドの引数なのでエイリアスが展開されない
hdr grep bash 
```

仕方ないので `hdr` をエイリアスにする必要があります。なぜ `hdr` をエイリアスにするという話につながるんだ？と思うかもしれませんが、エイリアスのちょっとマイナーな機能を利用しています。

```sh
alias hdr="hdr "
              👆 末尾のスペースが重要
```

エイリアスの設定で末尾にスペースがあると

```sh
👇 hdr のエイリアスが展開されたあとに・・・
hdr grep bash 
    👆 hdr の次の単語もエイリアス展開の対象になる
```

という動作をします。これにより `hdr` コマンドを使っても `grep` コマンドは以前と同様に動作を行ってくれます。この機能は前から知ってはいたのですが、なにげに初めてまともな使い方をした気がします。

実際には `alias` 部分だけを rc ファイルに入れれば `hdr` コマンドは単独のシェルスクリプトにできるのですが、この程度なら分けるよりも一つのまとめたほうが良いかなと思いました。

## さいごに

前々から不便に感じてイライラしていたのですが、さっさと作っておくべきでしたね。記事を書く時間のほうが長かったです。自動化するためにシェルスクリプトがあるというのに、作る手間を惜しんで毎回手作業を行うのはシェルの正しい使い方ではありません。
部分テンプレートとヘルパーメソッドの比較

# 部分テンプレートとヘルパーメソッドの比較

Web開発において、Railsでは部分テンプレートとヘルパーメソッドが共通して使用されますが、それぞれが異なる目的で利用されています。ここでは、部分テンプレートとヘルパーメソッドの違いについて分かりやすく解説します。

## 部分テンプレート

### 何に使うのか？

部分テンプレートは、HTMLの断片を再利用するための仕組みです。同じようなコードを何度も書かずに済むようにし、メンテナンス性を高める役割があります。共通のレイアウトや部品を一か所で管理することができます。

### コード例

```ruby
<!-- app/views/shared/_header.html.erb -->
<header>
  <h1>My App</h1>
</header>
```

```ruby
<!-- app/views/pages/home.html.erb -->
<%= render 'shared/header' %>
<p>Welcome to my app!</p>
```

### 使いどころ

- 共通のヘッダーやフッター、サイドバーなど、複数のページで共有される部分のレイアウトを効果的に管理する場合。
- ビューファイル内の冗長なコードを減らす場合。

## ヘルパーメソッド

### 何に使うのか？

ヘルパーメソッドは、ビュー内でRubyのコードをシンプルに記述できるようにするための手段です。ビューでのロジックを簡素化し、可読性を向上させることが期待されます。特に、表示の整形や複雑な計算など、ビューでの処理を補助するのが役割です。

### コード例

```ruby
# app/helpers/application_helper.rb
module ApplicationHelper
  def format_date(date)
    date.strftime("%B %e, %Y")
  end
end
```

```ruby
<!-- app/views/posts/show.html.erb -->
<p>Posted on <%= format_date(@post.created_at) %></p>
```

### 使いどころ

- 表示の整形やフォーマットに関する処理をビューから分離し、可読性を向上させたい場合。
- ビュー内での繰り返しや条件分岐のロジックを簡素化する場合。

## まとめ

- **部分テンプレート**はHTMLの断片を再利用し、共通の要素を一か所で管理するためのものである。
- **ヘルパーメソッド**はビュー内でのロジックを簡素化し、表示の整形や複雑な計算などを補助するためのものである。

これらのツールを上手に組み合わせることで、Railsアプリケーションのビュー部分をより効果的に設計できます。部分テンプレートは再利用性を高め、ヘルパーメソッドは可読性を向上させるために活用することがポイントです。
【コンペ】初心者が「Kaggle - LLM Science Exam」からLLMについて学ぶ話

初めてKaggleのコンペに参加したは良いものの、何をすればいいか全くわからないまま終わってしまったので、（今更ながら）復習がてら簡単にまとめてみました。

# タスク
https://www.kaggle.com/competitions/kaggle-llm-science-exam/overview
GPT3.5によって生成された科学に関する多肢選択問題を解くタスク。具体的には、問題文テキストpromptと選択肢テキストA,B,C,D,Eが与えられ、この中で最も答えである可能性が高い順に3つの選択肢を出力する。Kaggle環境で実行するため、GPUや計算時間の制限がある点に注意。

# スターターノートブックを見る
まず、二つのノートブックがピン止めされているので、簡単に調べてみる。
https://www.kaggle.com/code/wlifferth/starter-notebook-ranked-predictions-with-bert
https://www.kaggle.com/code/inversion/science-exam-simple-approach-w-model-hub

前者は、各選択肢の先頭に問題文を連結させmultiple choice head付きのBERTモデルに入れることで、各選択肢の正解である確率を出力させるように学習・推論するという形式をとっている。
prompt + A             
prompt + B            
prompt + C -> model -> prob A,B,C,D,E
prompt + D             
prompt + E             

一方で後者は、"問題文に対して正しいと考えられる順に選択肢を並べてください"という文章の後に問題文とすべての選択肢を連結させFLAN-T5-baseテキスト生成モデルに入れて、解答テキストを出力させるという形式をとっている(学習は行わない)。ただしLLMは必ずしも正しくテキスト出力しないので、簡単な後処理を追加している。
preamble + prompt + A,B,C,D,E -> model -> answer text

どちらもスコアは0.5程度となっている。前者に関しては訓練データの拡張やモデルをDeBERTav3という新しいものに変更したノートブックがあるがそれでもスコアは0.7程（以下のリンク参照）。筆者はこのコードから、モデルやハイパラを変えてみたりアンサンブルをとってみたり訓練データ数を増やしたりしたものの、あまり大きな精度向上にはつながらなかった。
https://www.kaggle.com/code/radek1/new-dataset-deberta-v3-large-training

# 一位の解説を読んでみる
https://www.kaggle.com/competitions/kaggle-llm-science-exam/discussion/446422
(一位の方による解説)

![1_bTGY3fKIgNefQxNsOYpnBw_11zon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821158/5913c576-9ac3-db66-8aac-41b97710239d.png)
https://blog.gopenai.com/enrich-llms-with-retrieval-augmented-generation-rag-17b82a96b6f0

RAG(retrieval augmented generation)と呼ばれる、外部の知識ベース(wikipedia等)から関連文章を抽出してコンテキストとしてLLMに渡す手法が強力。具体的には、質問文と選択肢に類似した記事の内容を抽出し、質問文・選択肢に付け加える形でLLMに入れる。一位のチームは、MTEBと呼ばれるテキスト埋め込みベンチマークのリーダーボードで複数の上位のモデルを試している。
https://huggingface.co/spaces/mteb/leaderboard

![inbox_2675447_e304b1553bae71f790a313f92ea3bc1b_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821158/be3188ca-051f-8613-2dc1-b97f0c5b5555.png)

バックボーンには微調整された7B,13BサイズのLLM(llama等)をアンサンブルしたものを用いており、以下のようなフローで学習・推論が行われている。
- コンテキストと質問をバックボーンに通してpast_key_values(内部ステート)を保存する。
- past_key_valuesと5つの選択肢それぞれをバックボーンに通す。
- 次トークン予測として全語彙に対するロジットが出力されるので、簡単な分類ヘッドを取り付けてこの答えが正しいかを示す確信度を予測するよう学習する。

最終的には0.93以上のスコアをたたき出していた。

他のノートブックでは70BサイズのLLMを用いていたケースもあったらしい
https://www.kaggle.com/code/simjeg/platypus2-70b-with-wikipedia-rag

# 近年のLLMに関するリンク集
LLMに関する論文等の情報がまとまってるレポジトリ
https://github.com/Hannibal046/Awesome-LLM

2023年時点におけるLLMの歴史
DeBertaやFlan-T5,Llamaがどの系列なのかがわかりやすく可視化
![tree.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821158/d2e27450-79dd-5f6b-e90e-443350c4a2ee.png)
https://github.com/Mooler0410/LLMsPracticalGuide/blob/main/imgs/tree.png

（LLMの名前の由来）
https://www.kaggle.com/competitions/kaggle-llm-science-exam/discussion/445521

# 感想
自分はNLP初心者なのもありほぼ公開コードのコピペ＋α程度のことしかできなかったので、Kaggler凄いの気持ちになった。あと、NLPのコーディングとLLMのお気持ちが少しわかった気がします...

# 参考文献
https://zenn.dev/nishimoto/articles/aff1fba9c75c34
【組み込み開発】C言語の構造体の使い方例

## はじめに
今回の記事では、組み込み開発する上で身に付けた構造体の使い方例について書きます。

## 構造体の定義方法
構造体の定義方法は以下です：
```C:
typedef struct{

    // 以下にメンバー変数を定義する
    int a;
    int b;
    
}stExample; // 構造体型名
```

## 実際の使用方法例
CAN通信では、8バイト単位でデータの送受信をします。
そこで、8byteのデータを1つの構造体として定義します。
例えば、受信データの場合であれば、以下のような構造体を定義します。
```C:
typedef struct{

    uint8_t byte1; // 受信データの1バイト目を格納する 
    uint8_t byte2; // 受信データの2バイト目を格納する
    uint8_t byte3; // 受信データの3バイト目を格納する
    uint8_t byte4; // 受信データの4バイト目を格納する
    uint8_t byte5; // 受信データの5バイト目を格納する
    uint8_t byte6; // 受信データの6バイト目を格納する
    uint8_t byte7; // 受信データの7バイト目を格納する
    uint8_t byte8; // 受信データの8バイト目を格納する
    
}stCanRcvData;
```

memcpy関数を使うと受信した8バイトのデータを構造体にコピーすることが出来ます。
例えば、1バイト目の値によって処理を分けたいときは以下のソースコードのように記述します。
```C:
void funcA(uint8_t *pData)　// pDataには8バイトのデータが入っているとする
{
    // 変数定義
    stCanRcvData rcvData;

    // 受信したデータをコピーする
    memcpy(&rcvData, pData, 8); // 受信した8バイトのデータを構造体にコピーする

    // 受信したデータの1バイト目によって処理を分岐させる
    switch(rcvData.byte1){

    // 0x00のとき
    case 0x00:

        // 処理を書く
        break;
        
    // 0x01のとき
    case 0x01:

        // 処理を書く
        break;
        
    // 0x02のとき
    case 0x02:

        // 処理を書く
        break;
        
    // 上記以外のとき
    default:

        // 処理を書く
        break;

    }
    
}
```

1バイト目の値によって処理を分けるだけなら構造体を定義しなくてもよく、下記のコードでも上記と同様の処理が実現できます。

```C:
void funcA(uint8_t *pData)
{
    // 受信したデータの1バイト目によって処理を分岐させる
    switch(pData[1]){            // pData[1]で1バイト目にアクセスできる
    
    // 0x00のとき
    case 0x00:

        // 処理を書く
        break;
        
    // 0x01のとき
    case 0x01:

        // 処理を書く
        break;
        
    // 0x02のとき
    case 0x02:

        // 処理を書く
        break;
        
    // 上記以外のとき
    default:

        // 処理を書く
        break;

    }
    
}
```

## おわりに
組込み開発では知らないと思いつかないテクニックが多々あると感じています。
これから組み込み開発者になりたい方、または、なる予定の方に参考になれば幸いです。
最後までご覧いただきありがとうございました。
gnuplot テンプレ - データに数式適用して描画／epsファイルへの出力

超久しぶりにgnuplotを使ったときに色々忘れてたのでメモ書き。

```text:テンプレ.plt

# 設定をリセット
reset
# 出力先を画面に設定
set terminal window

set xlabel "N"
set ylabel ""
# 対数軸の設定
set logscale x
# 範囲指定
set xr [1000:]
# カレントフォルダ移動
cd 'C:\ログデータのあるフォルダ'

# epsファイルに出力する場合はこのコメントアウトを外す
# set terminal postscript eps enhanced color
# set output "sighat.eps"

# プロット。複数系列プロットするときはカンマで区切る
plot 'ログファイル名.txt' using 1:(log(1-$2*$3)) w l axis x1y1 title "系列の名前", 'ログファイル名.txt' using 1:(log(1-$4)) w lp axis x1y1 title "系列の名前"

```

- データに対して数式を適用してプロットしたいときは `using x指定:y指定` の`x指定`や`y指定`の部分を括弧で囲み、系列番号を`$`と数字で表すと行ける。

- ログファイル内のデータは、`#`でコメントアウト可能。メモ代わりにヘッダ行を入れられて便利。

- ログファイル内のデータに空行を挟むとプロットがそこで不連続になる。意図的に空行を入れることで分離した曲線を描ける。
CakePHP フォームの入力を検知して、背景色を変える

## 作成の背景
よく可変で入力フォームを作成する事があり、備忘録として参考コードを残そうと思ったから。
どんな感じで書くっけ？って、思った時すぐ思い出せるように、まとめます。

## 環境
JQUery
CakePHP4

## 概要
DBテーブルにある回答フォームの配列から可変で複数のフォームが自動生成されます。
そのフォームを入力した際、視覚的に入力済みを確認できるよう入力した場合、背景色を変更します。
この変更をJSでやろうという事です。

## さっそくコード
```js
    $(document).ready(function() {
        $('input[type="checkbox"]').change(function() {
            var infoBox = $(this).closest('.info-box');
            //ここでcheckboxのcheckedの有無を確認してます。
            if ($(this).is(':checked')) { 
            infoBox.css('background-color', '#dc143c');
            } else {
            infoBox.css('background-color', '');
            }
        });
    });
```
全checkboxが対象になります。
状態が変わったcheckboxを着火



```php
    <div class="row">
        <?php foreach ($questions as $question): ?>
            <div class="info-box" id="info-box-<?= $question->id ?>">
                <div class="spantag"><label><?= h($question->content) ?></div>
                    <div style="margin-top: 10px;">
                        <?php 
                        echo $this->Form->checkbox('answers.' . $question->id, ['value' => 1]);
                        ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
```

## 感想
バックエンドの処理を考えていると、フロントのこういう事が疎かになってしまいます。
今回でだいぶ整理できました。
最後までお読みいただき、ありがとうございました。
LaravelでDOMPDFを使ったPDF生成方法


LaravelでPDFを生成する機能の紹介です。dompdfライブラリをLaravelに実装するプロセスをステップバイステップで説明します。

## ステップ1: パッケージのインストール

最初に、Composerを使用してDOMPDFパッケージをインストールします。
```
composer require barryvdh/laravel-dompdf
```

## ステップ2: サービスプロバイダの設定

次に、`config/app.php`ファイルにサービスプロバイダとエイリアスを追加します。

```
'providers' => [
    // ...
    Barryvdh\DomPDF\ServiceProvider::class,
],

'aliases' => [
    // ...
    'PDF' => Barryvdh\DomPDF\Facade::class,
],
```

## ステップ3:ビューの作成
PDFで表示する内容を記述したビューファイルをresources/viewsディレクトリに作成します。例えば、invoice.blade.phpとして以下のように記述することができます。
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>請求書</title>
</head>
<body>
    <h1>請求書詳細</h1>
    <p>LaravelとDOMPDFを使用して生成されたサンプル請求書です。</p>
    <!-- その他の内容 -->
</body>
</html>
```

## ステップ４：PDFの生成とダウンロード
実際にPDFを生成するには、以下のようなコントローラメソッドを作成します。
```
use PDF;

public function generatePDF()
{
    $data = [
        'title' => 'サンプルタイトル',
        'content' => 'ここにコンテンツを記述します。',
    ];
    
    $pdf = PDF::loadView('your.view', $data);
    
    return $pdf->download('sample.pdf');
}
```
このメソッドでは、ビューファイルとデータをloadViewメソッドに渡し、downloadメソッドを使用してPDFをダウンロードします。

## まとめ
dompdfパッケージを使うと、Laravelアプリケーションで簡単にPDFを生成できます。
注意点ですが、デプロイをすると、viewのCSSが崩れたり、日本語表示ができなかったりしました。環境構築やライブラリの設定を変更し、対応できるようにする必要が出てくるかもしれません。
リンクリストの勉強

```Java
import java.util.Arrays;

class Node{
    public int data;
    public Node next;
    public Node(int data){
    this.data = data;
    }
}
class SinglyLinkedList{
    public Node head;
    public SinglyLinkedList(Node head){
    this.head = head;
    }
}
class Main{
    public static void main(String[] args){
        int[] arr1 =  {35,23,546,67,86,234,56,767,34,1,98,78,555};

        SinglyLinkedList numList = new SinglyLinkedList(new Node(arr1[0]));
                                
        Node currentNode = numList.head;

        for(int i = 1; i < arr1.length; i++) {
            currentNode.next = new Node(arr1[i]);
            currentNode = currentNode.next;
        }

        currentNode = numList.head;
        while(currentNode != null){
            System.out.println(currentNode.data);
            currentNode = currentNode.next;
        }
    }
    
    
}
```
Chromeのバージョンアップのデザインが嫌

Chromeのバージョンアップ(123)でデザインが大幅に改悪された。
もとに戻す方法

①chrome://flags/#chrome-webui-refresh-2023とアドレス欄（検索欄？）に入力
②「Disabled」を選択して再起動
chatGPTに頼り切った専門学生の行く先・・・

タイトルにもある通りchatGPTに頼りすぎでこの先が不安でしょうがない
完全に自業自得ですがよろしければ最後までお付き合いいただけるとありがたいです
## 自己紹介
　2年生の専門学校でITについての勉強をしてきました。
中学・高校の頃からパソコンのウイルスを実機に入れて駆除する動画が大好きだったしもっと小っちゃいころからなぜか分からないけどパソコンが好きでした。
　なので必然的に将来の就職先はIT企業や！と意気込んで専門学校に入りました。
## 専門学校入学～
　一年生の頃はITの基礎知識であったりSPIの勉強などを詰め込んで勉強してきた。ぶっちゃけあんまり頭は良くなくて分数もまともにできないくらいのお手本のような文系の学生でしたが、何とかやれました。正直ノー勉です。
　家で勉強するような性格でもなく、授業中も貸与してもらっているパソコンでXを眺めているような学生でした。
## 夏休み明け～
　この辺から少し技術的にもう少し踏み込んだような内容の授業になってきて、何とか頭を捻りながら追いついていました。そんなある時、学校の先生からchatGPTなるものを紹介されました。その時はあまり気にならなかったのですが課題で行き詰っている時にこの話を思い出して課題を丸々コピーしてchatGPTに投げてみたところあら不思議**1分もしないうちに課題が終わっていたのです。**
 ***しかしこれが本当の地獄の始まりでした。***
## ～現在
　ここから先はどんどん開発や就活が進んでいきました。chatGPTが作成したコードは意外と基本的なものだったり分からないのはなるべく自分が習った範囲で作成するようにと指示を出していたら意外とバレずに完成品のクオリティは上がるが自分の技術が一切無い人間が完成してしまったのです。しかもかなり早い段階から有料プランに入っていたので他の学生とは一味違うchatGPTを使用していたこともあり便利すぎてやめられませんでした。
　そして現在、卒業制作でチームでの開発を行っていますがぶっちゃけ周りのレベルについていけない:sob:
 マジで周りの人はみんなすらすらコードを書いているのに自分はchatGPTに「この機能を作成してください」みたいなの打ち込んで出てきたのをコピペしての繰り返し。
 HTMLとかCSSとか齧ったことがあるかないかくらいの知識しかないので微調整するのにも一苦労しているような状態です。
 
文章をまとめるのが苦手なので変な文章になってしまいましたが要するに周りのレベルについていけないのがつらいし恥ずかしいという話でした。自分が勉強していればこんなことにはならなかったしchatGPTなんかに頼らずに先生や友人に頼っていればもう少しマシなエンジニアになって社会人になれるのかな、なんて自己嫌悪に陥ってみたり自分の好きなことも諦めたくなりました。

しかし、来年の春からIT企業に内定を貰っている以上自分は成長していかなければならないし会社や同僚に迷惑もかけてられません。なのでこれから気持ちを切り替えて勉強していこう！という自分なりの決意表明としてこの記事を書きました。


長くなりましたがこんな下手くそな文章を読んでいただきありがとうございます。
自分と同じような悩みがある方やこんな人間でもまだやり直していけると思う方はぜひいいねをお願いします。自分のメンタルケアに繋がります。
もし自分と同じような境遇の人がいましたら傷を舐めあいましょう。笑

## おまけ
こんな記事を書きましたが最近ではどうやらプロンプトエンジニアリングという言葉があるようですが学校の課題をすべてchatGPTにやらせて来た僕から言わせてもらえば~~マジでダサくね？~~ です。絶対自分でプログラミングできた方がかっこいいし世の中に必要とされる人間だと思います。
なので将来はこのプロンプトエンジニアと言われないような人間を目指して勉強を頑張りたいなと思いました。

ここまでありがとうございました！
Vue.jsにおける<script> setup(){}と<script setup>の違い

# はじめに

Vue.jsを始めていろいろ検索していたところ、setupの書き方が2種類あって、違いが気になったので調べてみた。

## 共通点

- どちらも、**Vue 3で導入されたComposition APIで用いられる**
- **コンポーネントのセットアップを定義するため**に使われる
    - リアクティブなデータ、プロパティ、メソッドを定義できる

## 相違点

### `<script> setup(){}`

#### 概要

- Vue3.0から利用可能
- 古い書き方

#### 例

```html
<script>
export default {
  setup() {
    let message = 'Hello, Vue!'
    const increment = () => { message += '!' }

    return { message, increment }
  }
}
</script>
```

### `<script setup>`

#### 概要

- Vue3.2から導入された新しい書き方
- セットアップの中身を`<script setup>`直下に書けるので、より簡潔になる

#### 例

```html
<script setup>
  let message = 'Hello, Vue!'
  const increment = () => { message += '!' }
</script>
```

## 結論

機能的な違いはほぼないっぽいので、バージョンが3.2以上なら新しくて書きやすい`<script setup>`を使う方が良い。

## 参考

- [公式サイト :  script setupについて](https://ja.vuejs.org/api/sfc-script-setup.html)
- [公式サイト :  setup()について](https://ja.vuejs.org/api/composition-api-setup.html)
PowerShellよく使いそうな処理

ネット上からファイルを取得

```
$securepasswd = ConvertTo-secureString $Passwerd -AsPlainText -Force
$credential = New-Object System.Management.Automaion.PSCredential($UserId, $secrepasswd)
Invoke-WebRequest -Uri "【サイトのURL　http://～】" -Credential $credential -OutFile $downloadFileFullpath
```

コピー
```
Copy-Iten -Path $downloadFileFullPath -Destination $backupFileFullPath -Force
```

zip解凍
```
Expand-Archive -Path $downloadFileFullpath -DestinationPath $downloadFilePath -Force
```

ファイル削除
```
Remove-Item -Path $csvFilePath
```

CSV取り込み
```
$CsvData = Import-Csv $csvFile -Encoding UTF8
```
※ヘッダーが日本語だと、日本語のままになってしまう。。

ヘッダーがないCSVの取り込み
```
$headerstr = "組織,氏名,ID,性別"
$header = $headerstr -split ","
$csvData = Get-Content $csvFullPath | ConvertFrom-Csv -Header $header
```


指定文字が入っていたら削除
```
$characterToRemove = @("〇")
for($i=0; $i -le $userData.Count-1 ; $i++){
    if($userData[$i]."氏名".Contains("〇")){
        foreach($character in $characterToRemove){
            $userData[$i]."氏名" = $userData[$i]."氏名" -replace [regex]::Escape($character),""
        }
    }
}
```
ドット記法とブラケット記法の使い分け

# 概要
この記事では、**ドット記法**と**ブラケット記法**についての説明や、各々の違いと使い分けについてまとめたいと思います。
(こちらの自ブログのリライトになります。)

https://kt-tech.blog/blogs/hb2bt_0-v5

# ドット記法
この章ではドット記法について説明をしていきます。

## 説明
例えばデータとして次のjsonが存在していたとします。
```
res = {count: "100",status:"200"} 
```
この中から`count`の値を取り出すとするとドット記法だと下記のように書けます。
```
res.count
```
この取り出し方をドット記法と呼びます。

## メリット
- シンタックスが簡潔で読みやすく、最も一般的に使用されます。
## デメリット
- プロパティ名はリテラルでなければなりません。つまり、変数やキーワードではない固定の名前を使用します。
- プロパティ名にはスペースや特殊文字を含めることができません。
- 頭文字が数字から始まるプロパティ名も採用できません。

# ブラケット記法
この章ではブラケット記法について説明をしていきます。

## 説明
前の説明と同じように、データとして次のjsonが存在していたとします。
```
res = {count: "100",status:"200"} 
```
この中から`count`の値を取り出すとするとブラケット記法だと下記のように書けます。
```
res['count']
```
この取り出し方をブラケット記法と呼びます。

## メリット
- プロパティ名にスペースや特殊文字が含まれている場合や、数字で始まる場合にも使用できます。`res['10cm']`みたいな使い方ができるってことです。
- 計算されたプロパティ名や、動的にプロパティ名を決定する場合に便利です。ということは`res[${num}]`とかできるってことです。競プロとかやってる人だと結構馴染みが多い使い方だなと感じます。
## デメリット
- 文字列リテラルを使用する場合、タイプミスがコンパイル時には検出されず、実行時にのみ発見される可能性があります。これは、プロパティ名がハードコーディングされているためです。

- 一部のJavaScriptエンジンでは、ブラケット記法がドット記法に比べてわずかに遅くなる可能性があります。これは、ブラケット記法ではプロパティ名が文字列として評価されるため、追加の計算が必要になる場合があるためです。

# まとめ
個人的に覚えておく必要がありそうなところをpickするとすれば、固定のプロパティ名にはドット記法が向いており、変数や特殊文字を含むプロパティ名にはブラケット記法が適しているという点かなと思っています。
# 感想
PRを投げた時にご指摘をいただき、調べた内容をまとめてみたのですが、結構学びになりました。普段使っている記法ですが、メリデメあるので、今後はしっかり考えて選びたいと思います。
あとちょっと競プロが懐かしくなったので来年ちゃんとやろうと思います(多分)

# 参考文献

https://kt-tech.blog/blogs/hb2bt_0-v5
Datepickerが下に表示されるのを解消する

こんにちわ。

今回は自分が困った事象に対しての
参考記事がなかったため記載します。

目次
-UITableViewのdelegateメソッドとは
-1.実際に直面した場面
-2.処理方法
-3.処理後の画面

# Datepickerとは
・ユーザーが日付や時刻を選択するためのUI要素
・設定によっては日付や時刻など様々な表示が可能

# 1.実際に直面した場面
今回は時刻のみのDatepickerを使用しました。
ビルドすると下図のような状態に。。。。（赤枠）
![スクリーンショット 2023-11-09 19.18.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/1b359b2b-fe49-9299-bfa9-e38db584b818.png)

◯試した内容
①時刻テキストの連打、連打、連打っ！ﾀﾀﾀﾀﾀﾀﾀﾀ
②再ビルド
③シュミレーター内アプリ削除→再ビルド
④Xcode削除→シュミレーター内アプリ削除→再ビルド

ちょっと真面目に考えて・・・
⑤ビルド→I/O→KeyBoard→Toggle Software KeyBoard
　　　※通常のキーボードに有効
⑥ビルド→⌘ + シフト + K
　　　※通常のキーボードに有効

どれも全てダメでした。。。
まあ①〜④に関してはテキトーですが笑

# 2.処理方法
原因はtextFieldDidBeginEditingメソッド
（textFieldがタップされ、編集が始まった時に呼ばれるUItextFieldのdelegateメソッド）
に設定漏れしていたため表示がおかしくなってました。

下記にて外観のスタイル処理を追加した。

◯全文
```php
func textFieldDidBeginEditing(_ textField: UITextField) {
    //UIDatePickerの型を持つdatePickerViewを生成
    let datePickerView:UIDatePicker = UIDatePicker()
    //datepickerのモードを時間モードに設定
    datePickerView.datePickerMode = UIDatePicker.Mode.time
    //datepickerの外観のスタイルをホイールにする
    datePickerView.preferredDatePickerStyle = .wheels
    //テキストをdatepicker用の入力スタイルへ変更
    textField.inputView = datePickerView
            
    }
```

◯追加部分のみ
```php
//datepickerの外観のスタイルをホイールにする
    datePickerView.preferredDatePickerStyle = .wheels
```

# 3.処理後の画面
処理後の画面が下図です。
![スクリーンショット 2023-11-09 19.36.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/2a2e1aff-5dce-5e25-36b2-a0868b4c66a8.png)


おぉ！と声が出てしまった。
まあこ、こんなの朝飯ま、前やけどね！！！！！
テスト106

```vb
Sub Find_Color()

Dim myRange As Range
Application.FindFormat.Clear
Application.FindFormat.Interior.ColorIndex = 6
'色のついたセルを検索する...〆(･ω･ )ﾒﾓﾒﾓ

With ThisWorkbook.Sheets("入力表")
    'セルの色が黄色でも空欄だったら何も検索できない。何か値が入っていれば検索できる
    Set myRange = .Columns("B:B").Find(What:="*", SearchFormat:=True)
 
End With
 
If myRange Is Nothing Then

    MsgBox "該当データなし"
    Exit Sub
    
Else

    MsgBox Replace(myRange.Address, "$", "")

End If


End Sub
コントローラーからjsファイルへ簡単にデータを渡せるgonGem

# gon Gem: Rails開発のための簡単なデータ受け渡し

`gon` Gemは、Rails開発においてコントローラーからJavaScriptにデータを簡単に渡すための強力なツールです。このGemを使うことで、公開鍵などの変数を簡単にJavaScriptに受け渡すことができ、効率的な開発を実現します。

## インストールとセットアップ

まず最初に、Gemfileに `gem 'gon'` を追加して、`bundle install` を実行します。

```ruby
# Gemfile
gem 'gon'
```

次に、コントローラーで `gon` を有効にしましょう。

```ruby
class ApplicationController < ActionController::Base
  before_action :set_public_key

  private

  def set_public_key
    gon.public_key = ENV["PAYJP_PUBLIC_KEY"]
  end
end
```

そして、ビューで `include_gon` を使ってコントローラーで定義した変数をJavaScriptに渡します。

```erb
<%= include_gon %>
```

これで、`gon.public_key` がJavaScript内で利用可能になります。

## JavaScriptでの利用

JavaScriptファイル内で、`gon` で受け渡された変数を使えます。

```javascript
document.addEventListener('DOMContentLoaded', () => {
  const publicKey = gon.public_key;
});
```

このように、`gon` Gemを使うことで、コントローラーで定義した変数を簡単にJavaScriptに渡すことができます。例えば、ペイメント処理で必要な公開鍵など、セキュアで重要な情報を効果的に共有する際に便利です。 `gon` を駆使して、スムーズな開発プロセスを享受しましょう！
vJoy + C# を用いて、ゲームパッド入力をシミュレートする方法

# はじめに
プログラムでゲーム用コントローラーを操作する方法を探していて、見つけたので備忘録です

# 1. vJoyをインストール

これが仮想コントローラーで、これをSDKで操作する形になります。

https://sourceforge.net/projects/vjoystick/

# 2. vJoy SDK をダウンロード

vJoyを操作できるSDKです

https://sourceforge.net/projects/vjoystick/files/Beta%202.x/SDK/

今回はC#なので、以下を使います

```
SDK/c#/x64/vJoyInterfaceWrap.dll
SDK/c#/x64/vJoyInterface.dll
```

# 3. dotnet project

Visual Studio プロジェクトでもできますが、ファイルの参照等が見やすいので、vscodeで作成します。

## 1. C# コンソールアプリを作成

Visual Studio で.NET環境をインストールしていれば、`dotnet` を利用できるため、それを利用して新しいプロジェクトとして初期化します。

```powershell
dotnet new console
```

## 2. dll をコピー
プロジェクト直下に `lib`ディレクトリを作成し、その中に `vJoyInterfaceWrap.dll` `vJoyInterface.dll` をコピーします。
以下のようなディレクトリ構造にします。

```
project
|-lib
|  |-vJoyInterface.dll
|  |-vJoyInterfaceWrap.dll
|-obj
|  | ...
|-Program.cs
|-project.csproj
```

## 3. csprojに追加

このままでは参照してくれないので、参照に追加します。
C#のコーディングには、`vJoyInterfaceWrap`の方の参照のみで良いですが、実行時にどうディレクトリに`vJoyInterface` が必要になるため、これをリンクさせます。

```xml
<ItemGroup>
    <Reference Include="vJoyInterfaceWrap">
        <HintPath>lib\vJoyInterfaceWrap.dll</HintPath>
    </Reference>
    <None Update="lib\vJoyInterface.dll">
        <Link>vJoyInterface.dll</Link>
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </None>
</ItemGroup>
```

# 5. コード

以下操作するためのコードになります。

```csharp
using vJoyInterfaceWrap;

// vJoyオブジェクトの作成
var joystick = new vJoy();

// vJoyのバージョン確認
if (!joystick.vJoyEnabled())
{
    Console.WriteLine("vJoy driver not enabled.");
    return;
}

// vJoyデバイスが存在し、使用可能であるか確認
uint vJoyId = 1;
if (!joystick.isVJDExists(vJoyId))
{
    Console.WriteLine("vJoy Device with ID {0} is not available.", vJoyId);
    return;
}

// vJoyデバイスを取得
VjdStat status = joystick.GetVJDStatus(vJoyId);
if (status != VjdStat.VJD_STAT_FREE) {
    Console.WriteLine("vJoy Device with ID {0} is not free.", vJoyId);
    return;
}

// vJoyデバイスをアクティブにする
if (!joystick.AcquireVJD(vJoyId)) {
    Console.WriteLine("vJoy Device with ID {0} dose not activate.", vJoyId);
    return;
}

// 軸の値を設定
Console.WriteLine("MIN");
joystick.SetAxis(0x0, vJoyId, HID_USAGES.HID_USAGE_X);
joystick.SetAxis(0x0, vJoyId, HID_USAGES.HID_USAGE_Y);
joystick.SetAxis(0x0, vJoyId, HID_USAGES.HID_USAGE_RX);
joystick.SetAxis(0x0, vJoyId, HID_USAGES.HID_USAGE_RY);

Console.WriteLine("MAX");
joystick.SetAxis(0x8000, vJoyId, HID_USAGES.HID_USAGE_X);
joystick.SetAxis(0x8000, vJoyId, HID_USAGES.HID_USAGE_Y);
joystick.SetAxis(0x8000, vJoyId, HID_USAGES.HID_USAGE_RX);
joystick.SetAxis(0x8000, vJoyId, HID_USAGES.HID_USAGE_RY);

Console.WriteLine("CENTER");
joystick.SetAxis(0x4000, vJoyId, HID_USAGES.HID_USAGE_X);
joystick.SetAxis(0x4000, vJoyId, HID_USAGES.HID_USAGE_Y);
joystick.SetAxis(0x4000, vJoyId, HID_USAGES.HID_USAGE_RX);
joystick.SetAxis(0x4000, vJoyId, HID_USAGES.HID_USAGE_RY);

// vJoyデバイスの解放
joystick.RelinquishVJD(vJoyId);
```
Pythonで「大文字と小文字を変換する(lower, upper, capitalize, title, swapcase)」の動作を確認してみた

# 概要

Pythonで「大文字と小文字を変換する(lower, upper, capitalize, title, swapcase)」の動作を確認してみました。以下のページを参考にしました。

https://www.javadrive.jp/python/string/index12.html

# 実装

以下のファイルを作成しました。
```sample.py
print("Hello".lower())
print("APPLE".lower())
print("Ｈｅｌｌｏ".lower())
print("ＡＰＰＬＥ".lower())

print("Hello".upper())
print("apple".upper())
print("Ｈｅｌｌｏ".upper())
print("ａｐｐｌｅ".upper())

print("hello python".capitalize())
print("MY FAVORITE THINGS".capitalize())
print("ｈｅｌｌｏ ｐｙｔｈｏｎ".capitalize())
print("ＭＹ ＦＡＶＯＲＩＴＥ ＴＨＩＮＧＳ".capitalize())

print("hello python".title())
print("MY FAVORITE THINGS".title())
print("ｈｅｌｌｏ ｐｙｔｈｏｎ".title())
print("ＭＹ ＦＡＶＯＲＩＴＥ ＴＨＩＮＧＳ".title())

print("Hello".swapcase())
print("apple".swapcase())
print("Ｈｅｌｌｏ".swapcase())
print("ａｐｐｌｅ".swapcase())
```

以下のコマンドを実行しました。
```
$ python3 sample.py 
hello
apple
ｈｅｌｌｏ
ａｐｐｌｅ
HELLO
APPLE
ＨＥＬＬＯ
ＡＰＰＬＥ
Hello python
My favorite things
Ｈｅｌｌｏ ｐｙｔｈｏｎ
Ｍｙ ｆａｖｏｒｉｔｅ ｔｈｉｎｇｓ
Hello Python
My Favorite Things
Ｈｅｌｌｏ Ｐｙｔｈｏｎ
Ｍｙ Ｆａｖｏｒｉｔｅ Ｔｈｉｎｇｓ
hELLO
APPLE
ｈＥＬＬＯ
ＡＰＰＬＥ
```

# まとめ

何かの役に立てばと。
snapを利用してRocket.Chatの6系の最新版をEC2にインストールするときに、困ったこと


# Rocket.Chatをsnapでインストールしたときにつまづいた。
snapでRocket.Chatのパッケージをインストールして、接続したときに、永遠と読み込みをしていて、Chromeのデベロッパーツールで確認したところ、下記のようなエラーメッセージでつまづいた。

```
http://localhost:3000/__metor_/dynamic-import/fetch
```

## 解決策

Rocket.Chatのバージョン6系のバグのようだったので、Rocket.Chatのバージョン5系をインストールすることで回避した。

```
snap install rocketchat-server --channel=5.x/stable
```

5系のstableバージョンを入れたら起動した。

## メモ

下記のコマンで、ロケットチャットの公開されているバージョンなどを確認することができる。

```
snap info rocketchat-server
```

下記のコマンドでsnapでインストールされているパッケージを確認することができる。
```
snap list
```

下記のコマンドでsnapのパッケージを削除することができる。

```
snap remove rocketchat-server
```
国内スパコンのハードウェアスペック一覧表

### スパコンの概要

| スパコン          | TSUBAME 4.0 | Wisteria(Aquarius) | Wisteria(Odyssey) | ABCI 2.0(A) | 富岳         | ABCI 1.0(V) | TSUBAME 3.0 |
|-------------------|-------------|--------------------|-------------------|-------------|--------------|-------------|-------------|
| 運営組織          | 東工大      | 東大               | 東大              | 産総研      | 理研         | 産総研      | 東工大      |
| ベンダー          | HPE         | 富士通             | 富士通            | 富士通      | 富士通       | 富士通      | HPE         |
| 運用開始          | 2024/4月?   | 2021/05/14         | 2021/05/14        | 2021/05/10  | 2021/03/09   | 2018/08/01  | 2017/08/01  |
| ノード数          | 240         | 45                 | 7,680             | 120         | 158,976      | 1,088       | 540         |
| FP64              | 66.8 PFLOPS | 7.2 PFLOPS         | 25.9 PFLOPS       | 19.3 PFLOPS | 537 PFLOPS   | 37.2 PFLOPS | 12.15 PFLOPS|
| FP32              | 475 PFLOPS  | 56 PFLOPS?         | 52 PFLOPS?        | 151 PFLOPS  | 1074 EFLOPS  | 75 PFLOPS   | 24.3 PFLOPS |
| FP16              | 952 PFLOPS  | 113 PFLOPS?        | 104 PFLOPS?       | 301 PFLOPS  | 2148 EFLOPS  | 550 PFLOPS  | 47.2 PFLOPS |
| 共有ストレージ    | 44.2 PB     | 25.8 PB            | 25.8 PB           | 34 PB       | 150 PB       | 34 PB       | 15.9 PB     |
| ネットワーク      | InfiniBand NDR200 | InfiniBand HDR | Tofu Interconnect D | InfiniBand HDR | Tofu Interconnect D | InfiniBand EDR | Intel Omni-Path |
| スパコン          | TSUBAME 4.0 | Wisteria(Aquarius) | Wisteria(Odyssey) | ABCI 2.0(A) | 富岳         | ABCI 1.0(V) | TSUBAME 3.0 |
| CPU               | 2 x EPYC 9654 | 2 x 8360Y         | A64FX             | 2 x 8360Y   | A64FX        | 2 x 6148    | 2 x E5-2680 V4 |
| コア数           | 2 x 96 コア  | 2 x 36 コア       | 48 コア           | 2 x 36 コア | 48 コア      | 2 x 20 コア | 2 x 14 コア   |
| メモリ            | 768 GB      | 512 GB             | 32 GB             | 512 GB      | 32 GB        | 384 GB      | 256 GB       |
| CPUメモリ帯域    | 921.6 GB/s  | 409.6 GB/s         | 1024 GB/s         | 409.6 GB/s? | 1024 GB/s    | 256 GB/s?   | 153.6 GB/s   |
| GPU               | 4 x H100    | 8 x A100           | -                 | 8 x A100    | -            | 4 x V100    | 4 x P100     |
| GPUメモリ         | 4 x 94 GB   | 8 x 40 GB          | -                 | 8 x 40 GB   | -            | 4 x 16 GB   | 4 x 16 GB    |
| GPUメモリ帯域     | 4 x 2396 GB/s | 8 x 1555 GB/s     | -                 | 8 x 1555 GB/s | -          | 4 x 900 GB/s | 4 x 732 GB/s |
| ネットワーク帯域  | 800 Gbps    | 800 Gbps           | 560 Gbps          | 800 Gbps    | 560 Gbps     | 200 Gbps    | 400 Gbps     |
| 価格              | 未定        | 250 円/h          | 10.4 円/h         | 660 円/h    | 32.88 円/h   | 220 円/h    | 25 円/h      |

私が普段よく利用するスパコンを中心に調べた表になっており、上位からN個を選出したわけではありません。また、疑問符 (?) が付いているデータは不確実または推定値を示していることに注意してください。来年度運用開始のTSUBAME4.0が楽しみです。
Python + OpenCVでカメラの使い方メモ

# はじめに
pythonでカメラを使いたいときのコード。これが動くことを確認してから、各種の認識コードを試す。
多くのサンプルではカメラを簡単に表示できるのに、自分の環境ではDirectShowを書かないと動かず、解決までかなり時間を取られたのでメモ。

また、カメラの露出やピントを固定する際のamcap.exeのような設定画面を表示できるので、それも追加。

解像度を指定する方法も追加。

# 環境
Windows 11
Logitech HD Pro Webcam C920
python 3.11.6


```py:camera.py
import cv2 #openCV

cap = cv2.VideoCapture(0, cv2.CAP_DSHOW) #0番目のカメラ。DirectShow書かないと動かなかったwindows
cap.set(cv2.CAP_PROP_SETTINGS, 1)#カメラ設定ウィンドウ表示

cap.set(cv2.CAP_PROP_FPS, 30)
cap.set(cv2.CAP_PROP_FRAME_WIDTH, 800)
cap.set(cv2.CAP_PROP_FRAME_HEIGHT, 450)

while True: #永久ループ
    ret, video = cap.read()#画像取得

    cv2.imshow('camera' , video)#表示

    key =cv2.waitKey(10) #ESCで終了
    if key == 27:
        break


cap.release() #終了
cv2.destroyAllWindows()
```

# カメラ環境が特殊な場合
カメラが2台ついているとか、認識してくれない場合に、接続状況を確認するコード。

```py:camList.py
import cv2

for n in range(0, 20): 
    cap = cv2.VideoCapture( n, cv2.CAP_DSHOW )
    if cap.isOpened(): 
        print("VideoCapture(", n, ") : Found")
    else:
        print("VideoCapture(", n, ") : None")
    cap.release()
```



# 参考
https://irohaplat.com/python-opencv-camera-id-detection/
PsReadLineのIntelliSenseをデフォルトでリスト表示にする

## IntelliSenseについて
PowerShellにはPsReadLineというコマンドの入力を楽にしてくれる機能がある
その中のコマンドを予測して保管してくれるIntelliSenseという機能が結構便利

https://learn.microsoft.com/ja-jp/powershell/module/psreadline/about/about_psreadline?view=powershell-7.3

IntelliSenseは以下のコマンドで有効化できる
```PowerShell
Set-PSReadLineOption -PredictionSource History
```

## IntelliSenseの表示形式
IntelliSenseには`Prediction View`と`List view`の2種類の表示方法がある。

`Prediction View` 
履歴の中で一致するものが薄く表示されてTabで補完される
![pre.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589575/ebf990c3-4164-d550-2334-e7207bd0e224.png)


`List View`
入力中に一致する履歴が一覧で表示されて矢印キーで選択できる
![list.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589575/b29eb4cc-f523-e7b9-d768-4a013f1365b9.png)



これらの表示方法はF2で切り替えられる
デフォルトの表示方法は`Prediction view`に設定されている
設定は保存されないのでシェルを開きなおすと`Prediction view`に戻ってしまう
自分はよくコマンドを忘れるので`List View`のほうが使いやすい


## デフォルトの表示方法をList Viewに変更する方法

Powershellで以下の内容をコピペして実行
```PowerShell
notepad $PROFILE
```

 メモ帳が開いたら次の内容をコピペして保存
 ファイルが存在しないと言われた場合は新規作成
```PowerShell
Set-PSReadLineOption -PredictionViewStyle ListView
```

PowerShellを再起動すると設定が反映される
scaf-code: ChatGPTに複数のファイルを参照させつつ指示を出して雛形コードを生成する

# はじめに

先日 OpenAI から `gpt-4-1106-preview` というモデルがリリースされました。
128k token というかなり長いテキストを扱えるようになったので、通常のテキストファイルならいくつかあっても問題なく参照できるようになりました。

そこで 「前に作った似たようなプログラムを参考に、こういう仕様や型定義を参考にしつつ、こういうプログラムを書きたいなー」というような時に、ちゃちゃっと ChatGPTに雛形っぽいファイルを作ってもらうコマンド [`scaf-code`](https://github.com/mokemokechicken/scaf_code) を作ったので共有します。

# scaf-code の説明
ちなみに scaffold code というニュアンスです。
使うためには OpenAI の API Keyが必要です。
※ （料金もそちらにかかります）

## Install 方法
```
pip install scaf-code
```

## 使い方
まず OpenAIの API Key を環境変数にセットしてください。

```
export OPENAI_API_KEY=<your_openai_api_key>
```

### 最も単純な使い方
一番単純な使い方は `--out` と `--spec` を指定する方法です。

```
scaf_code --out tmp/add.py --spec "コマンドラインから複数の数値を入力にして全て足し合わせて出力するコマンドを作って"
```

とすると、以下のようなファイルができます。

<details><summary>tmp/add.py の 中身</summary>

```python:tmp/add.py
import sys

def main():
    # Initialize the sum
    total_sum = 0
    
    # Iterate over the arguments
    for arg in sys.argv[1:]:  # Skip the script name
        try:
            # Convert each argument to an integer and add it to the sum
            total_sum += int(arg)
        except ValueError:
            # Handle the case where the argument is not an integer
            print(f"Error: '{arg}' is not a valid number.")
            return
    
    # Output the sum
    print(f"The sum is: {total_sum}")

if __name__ == "__main__":
    main()
```
</details>

今のバージョンだと邪魔なコードフェンスが付いていてちょっと除去してあげないといけないのですが、除去すると一応実行できました。

```bash
python tmp/add.py 1 2 3 4
The sum is: 10
```

まあ、これくらいは今までもできました。

### 他のファイルを参照しつつコードを生成する
`--ref` Option で 複数のファイルを指定することで参照させることができます。ChatGPTには ファイル名部分だけは伝えているので 〜 を参考に というような指示も有効です。

```
scaf_code --out tmp/mul.py --spec "add.py を参考に引数を掛け算するコマンドを作って" --ref tmp/add.py
```

とすると、`tmp/mul.py` が生成されます。

### 本気な使い方

反復的にコードを作るような時は、ベースクラスや型ファイルや共通の仕様や指示などを念頭に置いてほしかったりします。なるべくそういうのをテキスト化しておいてから指定すると便利なような気がしています（しているだけですが）。

`--spec-file` Option で 「指示」の部分をファイルから読むようにできます。

ので、

```
# 新しい task を生成！
scaf_code --out src/tasks/new_awesome_task.py \
  --spec-file doc/tasks/new_awesome_spec.md doc/task_guideline.md \
  --ref src/tasks/{similar_task.py,task_base_class.py}

# 一緒に test も生成!
scaf_code --out tests/tasks/test_new_awesome_task.py \
  --spec-file doc/tasks/new_awesome_spec.md doc/task_guideline.md \
  --ref src/tasks/new_awesome_task.py tests/tasks/test_similar_task.py
```

みたいな感じで生成できないかな、という期待があります。


## VSCode + GithubCopilotChat で良いんじゃない？
Copilot でも似たような感じはできますが、なかなか明確にファイルを指定しにくかったり、PyCharmとか別のEditorを使っているとパッとそういうふうにはしにくかったりします。あと、CLIから使えるとやはり色々な反復に強いというのもあるかな、と。

128K Token受け付けられるようになったことで、普通のドキュメントや他の色々なファイルについても「〜を参考にしつつ、こういうの作りたい」というケースが出てきそうだなーと思ってとりあえず作っておきました。


# さいごに

まあ、まだまだ荒削りですが、画像も参照できるようにしたり、色々なファイル形式(docxとか?）も扱えるようにしたり、URLからファイルをとってきたり、[CodeInterpreter](https://platform.openai.com/docs/assistants/tools/code-interpreter) と連携したり、と色々拡張できて楽しそうです。
C# Vue3リロード時の対応

開発環境
・Vite
・Vue3
・NET6

以下対応によりリロード時の404エラーが出なくなった。

1. yarn buildにてwwwrootへ出力
2.
var opt = new DefaultFilesOptions();
opt.DefaultFileNames.Clear();
opt.DefaultFileNames.Add("index.html");
app.UseDefaultFiles(opt);

3.app.UseStatusCodePagesWithReExecute("/");
静态编译chrony 

转自

https://zhangguanzhang.github.io/2021/01/23/chrony/#/ubuntu-%E9%9D%99%E6%80%81%E7%BC%96%E8%AF%91

## git仓库下载最新版本源码

https://gitlab.com/chrony/chrony

`wget https://gitlab.com/chrony/chrony/-/archive/4.4/chrony-4.4.tar.gz`


## ubuntu静态编译 

```shell
docker run --name t1 -tid -v $PWD/chrony:/opt --workdir  /opt ubuntu
docker exec -ti t1 bash

apt-get update
apt-get install apt-file
apt-file update
apt-file search sys/timepps.h
apt-get install -y \
    bison asciidoctor \
    gcc \
    make \
    pkg-config \
    libcap-dev \
    pps-tools \
    libedit-dev \
    nettle-dev \
    libnss3-dev \
    libtomcrypt-dev \
    libgnutls28-dev \
    libseccomp-dev

CFLAGS='-static -s' LDFLAGS='-static -lm'   ./configure --enable-scfilter --enable-ntp-signd
make; echo $?
make install

$ chronyd -v

```