OmniAICreator/Qiita-1.07M huggingface dataset:
URG Benriに測域センサ(UST-20LX)が繋がらないときの対処法＆接続方法

## 前置き
ヤフオクで北陽の測域センサ(UST-20lx)を購入し、PCに接続しURG Benriを起動！
いざ接続とボタンを押しても、測域センサと繋がる様子もなく・・・

「接続は失敗しました。　理由：Connection to socket failed.」
とアラートだけ。。

1週間死闘した私の備忘録となります。

## 解決策

### センサのIPアドレスを確認しよう
#### １．コントロールパネルでIPアドレスを設定している場合は「IPアドレスを自動的に取得する」を選択する
```
コントロールパネル ＞ ネットワークと共有センター ＞ 識別されていないネットワーク ＞ イーサネット〇 ＞ プロパティ ＞インターネットプロトコルバージョン4(TCP/IPv4) ＞ プロパティ
```
上記の順序で開き、プロパティで「次のIPアドレスを使う(S)」が選択されていれば一旦、「IPアドレスを自動的に取得する」へ変更してください。
既に「IPアドレスを自動的に取得する」が選択されている場合は次へ進んでください。

#### ２．測域センサに設定されているIPアドレスを調査する
新品で購入された場合、デフォルトのIPアドレスは「192.168.0.10」の様ですので、調査する必要はありません。中古で購入した場合は、IPアドレスが設定されている可能性がありますので設定されているIPアドレスを調査しましょう。


https://www.advanced-ip-scanner.com/jp/

上記のリンクから「Advanced IP Scanner」をダウンロードしてきてください。
そして下記の様に「192.168.0.1-192.168.255.254」と入力し、スキャンを実行してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553823/0a92d265-fb09-7f39-4358-625863cdc19f.png)
※スキャンにはかなり時間がかかるので気長に待ちましょう
スキャンが完了すると接続された機器等のIPアドレスの一覧が出力されます。
ここから製造社が「Hokuyo Automatic Co., Ltd.」と書かれた項目の名前、つまりIPアドレスを取得します。
※存在しない場合、社名が異なるかLANとの接続に失敗している可能性が高いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553823/1742892b-fb3e-b5af-4845-209e9607d8e6.png)

#### ３．IPアドレスの設定
![スクリーンショット 2023-12-30 221221.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553823/c27c41a4-2053-1b9c-9be4-722782bc4b97.png)

ここで「接続：イーサネット2」をクリックしてください。
(状況によってはイーサネット2ではないかもしれません。測域センサと思しきネットワークを見つけてください)

![スクリーンショット 2023-12-30 221409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553823/74d49b51-8307-94be-2ab4-84cca1b07d6c.png)

するとイーサネット2の状態といったウィンドウが開くので**プロパティ**を開いてください。

![スクリーンショット 2023-12-30 221515.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553823/ae6791a7-6327-d1ab-0571-0b3e7548f2fe.png)

次にインターネットプロトコルバージョン４(TCP/IPv4)をクリックしてください。

![スクリーンショット 2023-12-30 221655.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553823/3f85c92d-8cd9-5829-369e-0a4652a75d88.png)

プロパティが開いたら上記のように設定してください。
「次のIPアドレスを使う(S)」を選択し、下記の様に入力してください。

項番３で取得したIPアドレスの3番目の数字まで同じ数字を入力してください。
続きである4番目の数字は正直なんでもいいのですが、公式が「100」と設定しているので倣います。

つまり、測域センサに設定されているIPアドレスが、
・「192.168.0.10」だった場合は「192.168.0.100」
・「192.168.3.56」だった場合は「192.168.3.100」
・「192.168.6.42」だった場合は「192.168.6.100」
とこのように設定します。

次にサブネットマスクですが「255.255.255.0」と入力してください。
以上で、プロパティの設定を終わりにします。

#### UrgBennriPlusで接続
UrgBennriPlusを起動してください。
ビューアを「イーサネット１」に選択します。
次にコネクタを「イーサネット１」とし、赤枠の部分にIPアドレスを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553823/01833969-687b-e002-0921-a81d6b065695.png)

ここで入力するのは項番２で取得した「測域センサに設定されたIPアドレス」です。
誤ってプロパティで設定した項番３のIPアドレスを入力すると接続できないので注意してください。

これで接続ボタンを押下すると接続できるかと思います。

## 結論
項番３で設定したIPアドレスが誤っていて接続できないケースが殆どです。
測域センサに設定されているIPアドレスを正しく取得し、測域センサのIPアドレスの3番目までの数値を同じものにしたIPアドレスをイーサネットのプロパティに設定するだけで簡単に接続することができます。

これIPアドレスを変更する場合は、再度項番3と同じようにプロパティを設定しなおす必要がありますのでご注意ください。
Railsの命名規則

### -命名規則が必要な理由-
1. 命名を制限してプログラマの揺らぎを減らすため。
→開発者をあえて縛って、迷いにくく手間も少ない開発環境を実現するため。

1. 名前から意味を把握するできるようにする。
→コードを読むのに文中に登録する要素の中身がある程度推測できれば、可読性をあげる。

#### Modelの命名規則
**Model名**

単数形で、
コード中 = **キャメルケース**
ファイル名 = **スネークケース**
になります（Rubyのクラス名の命名規則と同じ）。

キャメルケース
→単語の頭文字を大文字・それ以外を小文字で記述する表記法です。
例：`Book`,`MyName`など

スネークケース
→単語をすべて小文字にし、単語の区切りを_で記述する表記法です。
例：`book`,`my_name`など

**Modelの属性名**
**キャメルケース**で記述します。

ActiveRecordの予約語は避けてください。
例：`type`など。

誤作動を起こす可能性があります。

制約ではありませんが、日時型の属性は`_at`に命名するのが基本です。
属性名を見ただけで中身のデータ型が推測しやすくなります。

#### Viewの命名規則

ファイル名の命名規則は、
`views/`の下に`コントローラ名/`でディレクトリを作成して、その中に`アクション名.html.拡張子`で表記します。

例：booksコントローラのindexアクションに対応するViewファイルを作成したい場合
→`views/books/index.html.erb`

#### Controllerの命名規則
基本的には**複数形**です。
必ず守る必要はありませんが、ルーティング周りの仕組みにおいても、コントローラ名が複数形である方が取り回しやすい作りになる。

最後に
ファイル名 = _controller
クラス名 = Controller
をつける必要があります。

例：`books_controller`,`BooksController`
Dockerというものを短めに…。

## Dockerとは？
Dockerとは、Linuxカーネルを使用したコンテナシステム。
特徴として、基本イメージをベースとしたコンテナの構築が可能。

## コンテナとは
ホストと隔離された空間。
DockerではLinuxの上でコンテナが動作している。
コンテナは単独での動作以外にも複数を同時に実行できる。
また、ポートマッピングも可能。
ファイルまたはディレクトリ単位で、マウントを指定可能。

## ポートについて
0.0.0.0でバインドしたものに関しては、
ホスト側ではlocalhostとして表示できる。

## マウント
イメージに外部記憶を割り当てる仕組み。
例えば、永続的なもの、または一時的なもの。

## コンテナのメリット
ホスト側に影響を与えない。ライブラリの不整合が起きない。
構築手順の自動化で再構築が行いやすい。

## 組み立て方
あらかじめ用意されたイメージを利用する。
必要であればオーケストレーションを行う。

## Dockerfile
イメージを作成するもの

## docker-compose.yml
オーケストレーションを行うためのもの
【SwiftUI】HomeIndicatorを非アクティブにしてミス操作でホーム画面に行かないようにする（iOS16）

# はじめに
以前、HomeIndicatorを非表示にするって記事を書きました。

https://qiita.com/SNQ-2001/items/077524f3c3a494f15dbb

今回は非表示にする訳ではなく、非アクティブ？(表現が適切かどうかは不明)にして、1度のスワイプでホーム画面に行かないようにします。

# サンプルアプリ
`all`と`bottom`でしかわかりませんが、HomeIndicatorがグレーになっていることがわかります。
![Simulator Screen Recording - iPhone 15 - 2023-12-30 at 22.19.17.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/434bcced-ec8c-de84-d748-fa4268471ca3.gif)

# 実装
```swift
import SwiftUI

struct ContentView: View {
    @State private var edgeSet: Edge.Set = .all
    
    var body: some View {
        VStack {
            Button {
                edgeSet = .all
            } label: {
                Text("all")
            }
            .buttonStyle(.borderedProminent)
            .disabled(edgeSet == .all)
            
            Button {
                edgeSet = .vertical
            } label: {
                Text("vertical")
            }
            .buttonStyle(.borderedProminent)
            .disabled(edgeSet == .vertical)
            
            Button {
                edgeSet = .horizontal
            } label: {
                Text("horizontal")
            }
            .buttonStyle(.borderedProminent)
            .disabled(edgeSet == .horizontal)

            Button {
                edgeSet = .top
            } label: {
                Text("top")
            }
            .buttonStyle(.borderedProminent)
            .disabled(edgeSet == .top)
            
            Button {
                edgeSet = .bottom
            } label: {
                Text("bottom")
            }
            .buttonStyle(.borderedProminent)
            .disabled(edgeSet == .bottom)
            
            Button {
                edgeSet = .leading
            } label: {
                Text("leading")
            }
            .buttonStyle(.borderedProminent)
            .disabled(edgeSet == .leading)
            
            Button {
                edgeSet = .trailing
            } label: {
                Text("trailing")
            }
            .buttonStyle(.borderedProminent)
            .disabled(edgeSet == .trailing)
        }
        .defersSystemGestures(on: edgeSet)
    }
}
```

# おわり
ゲームなどでよく見ますね。
ゲーム最中にホーム画面に行ったら困りますもんね。
スワイプをすることの多いアプリはこの実装をした方が良さそうですね

# 公式ドキュメント
https://developer.apple.com/documentation/swiftui/view/deferssystemgestures(on:)
Asynchronous programmming in Rust(8)

AUTOSAR (AUTomotive Open System ARchitecture)
http://autosar.org

は、２０１９年以降は、毎年１１月に新しい標準を発行している。
今年も一般公開を始めた。

Explanation of ARA Applications in Rust, AUTOSAR 1079, R23-11, AP
https://qiita.com/kaizen_nagoya/items/3d3e3349e00a598a5718

参考文献の最初は、

[1] Programming rules to develop secure applications with Rust https://www.ssi.gouv.fr/en/guide/programming-rules-to-develop-secure-applications-with-rust/

本に書いてあることをdocker, macOS(M2)で動作させてみる。bookが、本に書いてあること。その次のbashが自分の機材での動作。

<この項は書きかけです。順次追記します。>
This article is not completed. I will add some words in order.
# docker
```macOS:bash
$ docker run -it rust /bin/bash

# apt update; apt -y upgrade
# apt install vim
```

翻訳例：
>はじめる
Rust の非同期プログラミングへようこそ! 非同期 Rust コードの作成を開始したい人は、ここで初めてください。 Web サーバ、データベース、オペレーティング システムのいずれでも、この本は、Rust の非同期プログラミング ツールを使用してハードウェアを最大限に活用する方法を説明します。
この本の内容
この本は、初心者にも熟練者にも役立つ、Rust の非同期言語機能とライブラリを使用する包括的な最新の手引きです。初期の章では、非同期プログラミング一般と、それに対する Rust の特別な取り組みについて紹介します。
中間の章では、非同期コードを作成するときに使用できる主要なユーティリティと制御フロー ツールについて説明し、パフォーマンスと再利用性を最大化するためにライブラリとアプリケーションを構築する経験則について説明します。
この本の最後の章では、より広範な非同期体系を説明し、一般的なタスクを実行する方法の例を多数示します。
それでは、Rust の非同期プログラミングのすばらしい世界を探索してみましょう。

# 参考資料(reference)
Programming Rust on docker(149)
https://qiita.com/kaizen_nagoya/items/d71b2c1932562ac1ecfc

dockerでRUST
https://qiita.com/kaizen_nagoya/items/c07350f6ab6ec656c42c

初めてのRUST
https://qiita.com/kaizen_nagoya/items/dd8f5e3b218d48fb79e1

Rust入門
https://qiita.com/kaizen_nagoya/items/b3a42bf5a849dabe52c5

## 補足資料（Additions）
2023 Countdown Calendar 主催・参加一覧
https://qiita.com/kaizen_nagoya/items/c4c2f08ac97f38d08543

CountDownCalendar月間　いいねをいただいた記事群　views　順
https://qiita.com/kaizen_nagoya/items/583c5cbc225dac23398a

＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong.
# 文書履歴(document history)
ver. 0.01 初稿 　20231230
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
The Rust Programming Languageの数当てゲームをFsharpで実装してみる

```fsharp
open System

printfn "Guess the number!"

let rnd = System.Random()
let secretNumber = rnd.Next(1, 101)

let tryParseInt (input: string) =
    match Int32.TryParse(input) with
    | (true, i) -> Some i
    | _ -> None

let rec loop () =
    printfn "Please input your guess."
    let input = stdin.ReadLine()
    printfn "You entered %s" input
    let parsedInput = tryParseInt input

    let result =
        match parsedInput with
        | Some i when i = secretNumber -> "You win!"
        | Some i when i < secretNumber -> "Too low!"
        | Some i when i > secretNumber -> "Too high!"
        | _ -> "Invalid input!"

    printfn "%s" result

    match result with
    | "You win!" -> ()
    | _ -> loop ()

loop ()
```

matchの結果をresultで取得して、You win!かどうかを判定しているのが微妙。
本来は型に変えて、その型に応じて出し分けたり処理を変更したりしたほうが良いでしょうね。win low highの文字が変わったら対応できなくなるので、ユニオン型にして処理したほうが良いか。
年末休み：幼児のおもちゃとセグメンテーション

# 年の締めになにか作りたい

:::note info
インフォメーション
- モノ売りだけで、エンジニアはただの手足でのいいのか・・・
- 会社との乖離を感じた一方でいろいろな人に助けられた１年
- ここ１ヶ月は真面目な開発で疲れた！

:::

# AIが背中を押してくれたことは間違いない
- リアル壁と話していたが、AIはヒントを返してくれた（俗に言うガセはご愛嬌）
- 効率が上がり、行き詰まりから抜けられた
- アナログ仕事をわざわざで作る社員とコラボしてボトルネックを排除したいと思った
- チャレンジをする若者に刺激を受けて、応援したくなった。ニュータイプとの出会い。

# 来年は公認で新技術に触れることができそう
- ロボット
- AI利用の自動化
- 分析
- データ解析

# 最後は子供を笑わせよう

https://github.com/mi-kaneyon/man-yard/tree/main

の中の

https://github.com/mi-kaneyon/man-yard/blob/main/rainbow/README.md

に人間などセグメンテーションパリピを表現。
くだらないので、表示は遠慮させていただきます。

**来年は真面目なものを１つ完成させたいです**

:::note info
インフォメーション
自腹でゲーミングノートを買い、AIやってます。
- デスクトップの３０６０は使い勝手いいんですが、ノートの機動性もいいですね。
:::

# 2024 更新分
## スカウターとかパワー計測とかうちの子供がよろこ未曾有なネタを透過

https://github.com/mi-kaneyon/man-yard/tree/main/DragonBL

- スカウターなどもありますのが、役に立つとは到底思えない。
- 学校でプログラミングが行われるらしいので、スクラッチだけでも・・・と４年間塗り絵になった。
- お暇な方はご覧ください。
【Ruby】ブロックとProc


# Proc
本来オブジェクトにできないブロックをオブジェクト化するもの。これにより再利用性を高め、柔軟で動的なコードにすることができる。


:::note info
ブロックとは？
- ブロックは、メソッドに渡すことができるコードの塊
- {} または do..end で囲まれたコードで表される
- メソッドは yield を使用してブロックを呼び出すことができる
- Rubyは全てのコードがオブジェクトと言われているが、例外的にブロックはオブジェクトではない。従来であれば、ブロックはオブジェクトにできなかったが、Procを用いることでブロックをオブジェクトとして扱うことができる

```ruby
# do..endの箇所がブロックで、timesの引数
3.times do |i|
  puts a 
end
#=> 0 1 2

# {}の箇所がブロックで、timesの引数
3.times { |i| puts i }
#=> 0 1 2
```
:::



## 何が嬉しいの？ある時代とない時代の処理の違い
### 可搬性・再利用性・柔軟性
Procがない時代には、ブロックをオブジェクト化できないため、同じような処理を行う場合に同じコードを何度も書かなければならなかったり、特定の構造の中でしかコードを実行できないという制限があった

しかし、Procを使うと、コードの断片を変数に割り当てたり、メソッドの引数として渡したりすることができるため、プログラムの可搬性・再利用性・柔軟性の向上を期待できるようになった。

```ruby:メソッドを使った場合（その1)
def handle_text(text, mode)
  # modeが増えるたびに条件分岐を増やさなければならない
  if mode == :uppercase
    puts text.upcase
  elsif mode == :reverse
    puts text.reverse
  else
    puts text
  end
end

handle_text("hello", :uppercase)  # "HELLO"
handle_text("hello", :reverse)    # "olleh"
handle_text("hello", :normal)     # "hello"
# modeが増えるたびにhandle_textに条件分岐を追加しなければならないが、これはメソッドの柔軟性やテスタビリティを損なう。
```


```ruby:Procを使った場合（その1)
def handle_text(text, operation)
  operation.call(text)
end

uppercase_proc = Proc.new { |t| puts t.upcase }
reverse_proc = Proc.new { |t| puts t.reverse }

handle_text("hello", uppercase_proc)  # "HELLO"
handle_text("hello", reverse_proc)    # "olleh"
# Procの利用は、プログラムの柔軟性を高め、既存のメソッドを変更せずに新しい機能を追加できるようにするという点で、オープン・クローズドの原則と似た目的を持っている
```

```ruby:メソッドを使った場合（その2)
# 通常のメソッド
def multiply(number, factor)
  number * factor
end

def divide(number, factor)
  number / factor
end

def add(number, factor)
  number + factor
end

def perform_calculation(number, factor, operation)
  case operation
  when :multiply
    result = multiply(number, factor)
  when :divide
    result = divide(number, factor)
  when :add
    result = add(number, factor)
  end
  puts "結果: #{result}"
end

# 異なる計算を実行
perform_calculation(10, 3, :multiply)  # 乗算: 結果: 30
perform_calculation(10, 3, :divide)    # 除算: 結果: 3.333...
perform_calculation(10, 3, :add)       # 加算: 結果: 13
```

```ruby:Procを使った場合（その2)
# Procの例
multiply = Proc.new { |number, factor| number * factor }
divide = Proc.new { |number, factor| number / factor }
add = Proc.new { |number, factor| number + factor }

def perform_calculation(number, operation)
  result = operation.call(number, 3)
  puts "結果: #{result}"
end

# 異なる計算を実行
perform_calculation(10, multiply)  # 乗算: 結果: 30
perform_calculation(10, divide)    # 除算: 結果: 3.333...
perform_calculation(10, add)       # 加算: 結果: 13
```
Python ショートコーディングのメモ帳

Pythonを使ってショートコーディング（コードゴルフ）を行うときのテクニックまとめ

:::note 
AtCoderでのみ確認
自分のメモの為わかりにくいものがあります
最善がほかにあるかもしれません
:::

# 入力
```python:入力
,*a=map(int,open(0)) # 各行1つのみの場合
n,*a=map(int,open(0).read().split()) # 上ではない場合
(h,w),*e=[[*map(int,t.split()]for t in open(0)] # 各行個別にしたい場合
```
# 出力
```python:出力
print("YNoes"[f(x)::2])
print("NYoe s"[f(x)::2]) # AtCoderのみ
print(f(x)and"Alice"or"Bob")
print("Alice"*f(x)or"Bob")
print(*S,sep="")
exit(print(10))
```
# 数値演算
```python:例
-~n = n + 1
~-n = n - 1
-(-x//y) = (x+y-1)//y = math.ceil(x/y)
.99 # 0.99
1e7 # 10 ** 7
```
# List関係
```python:list
A=[]
A+=5, # A.append(5)
A+=[3,7]

[*eval("[],"*n)] # [[] for _ in range(n)]
```
# その他
```python
F=lambda x:x*2 # def F(x):return x*2
for a in range(h*w):i,j=a//w,a%w

for _ in[0]*n: # for _ in range(n)
```
【初心者向け】TypeScript 導入方法

## インストール
コマンドラインで以下の２つのコマンドを実行してTypeScriptコンパイラをインストール。
（事前にNode.jsをインストールしておく必要がある）
```
npm install -g ts-node
npm install -g typescript
```

インストール完了の確認には、以下コマンドでバージョンを確認する。
`Version x.x.x`の様な出力がされればOK。
```
tsc –v
```

## コンソールで実行してみる
テストとして、以下ファイルを作成する。
```test.ts
const test:string = 'test...';
console.log(test);
```

コマンドで以下を実行 -> `test.js`ファイルが生成される。
```
tsc test.ts
```

以下コマンドで、JSコードを実行 -> コンソールに`test...`が出力される
```
node test.js
```
そういえば、普段使う機会少ないけど、`node`コマンドで`JS`実行できるんでしたね笑

## 補足（`power shell`が原因でコマンドが効かない）
`Visual Studio Code`で`tsc -v`のコマンドが効かない事象が発生したのですが、ターミナルの種類が`power shell`であることが原因でした。
`windows`で、同様の事象が発生した際は、`command prompt`に変更することで、問題が解消されるかもしれません！
pipのパッケージのアンインストール

本当に今更なのかもしれないけど、自身のプロジェクトにpipでインストールしたものを消す方法を今まで知らなかったので自分用にメモ。

こちらが、参考にしたサイト
https://atmarkit.itmedia.co.jp/ait/articles/2212/13/news013.html

## やり方
こうするだけ
```
pip uninstall (削除したいパッケージの名前)
```
[25日目] Leaflet.js 自分なりのメモ

こんにちは、なりかくんと申します。
この記事はなりかくん Advent Calender 2023の25日目の記事です。メリクリ！！（30日に言ってる）

今回は Leaflet.js で自分がよく使うコードをまとめます。

# 地球ではない地図
mapにcrsでSimpleを指定する。
https://leafletjs.com/examples/crs-simple/crs-simple.html

```js
L.map('map',{
        crs:L.CRS.Simple
})
```

# 画像のマーカー
画像のマーカーを作りたいときに使う。
```js
let icon = L.icon({
        iconUrl: "Icon URL",
        iconSize: [50, 50],
    });
}
new L.marker([x, y], {
    icon: icon,
});
```

# グループレイヤーをリセット
レイヤーを削除ではなく中身のマーカーなどをすべて削除する。

```js
let group = L.layerGroup();
group.eachLayer(function (layer) {
    map.removeLayer(layer);
});
```
文法エラーメッセージが改善されたそうだが...

Julia 1.10.0 では，Syntax error の表示が｛改善｝?された?

```Julia:Julia 1.9.4
julia> x = (a - b)^2 - (c - d)^2 - x)

ERROR: syntax: extra token ")" after end of expression
Stacktrace:
 [1] top-level scope
   @ none:1
```

```Julia:Julia 1.10.0
julia> x = (a - b)^2 - (c - d)^2 - x)
ERROR: ParseError:
# Error @ REPL[1]:1:30
x = (a - b)^2 - (c - d)^2 - x)
#                            ╙ ── extra tokens after end of expression
Stacktrace:
 [1] top-level scope
   @ none:1
```

よほどの初心者でもなければ，「わかりやすいエラーメッセージになった」とは評価できないかなあ？

「どの行にエラーがあったよ」だけで十分だ。
EKS node groupアップグレード時NodeCreationFailureを解決

## 背景

AWSのドキュメントに従ってEKS（k8s）のバージョンアップする時、
EKS clusterをアップデートした後、
node groupを同一バージョンに更新する必要がある。
今回は1.24 -> 1.25。前は1.21 -> 1.22 -> 1.23 -> 1.24 と更新してきた。

## 問題

node groupを更新しようとたら、`NodeCreationFailure Couldn't proceed with upgrade process as new nodes are not joining node group`のエラーで失敗。

下記の記事のどれも当てはまるようには見えず、スタックした。

https://repost.aws/knowledge-center/eks-node-group-update-failures

## 解決方法

`kube-proxy`のバージョンが原因のようで、
なぜか過去の更新で`kube-proxy`がv1.21から上がっていない。

下記の記事で、現在の`kube-proxy`のバージョンを特定できた。
そこで、v1.24をインストールして、再度node groupを更新したら、うまくいった。

https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/managing-kube-proxy.html

### 補足
問題発見に辿り着くまでのプロセス：
podの一覧を確認したところ、`crashLoopBackOff`のpodをいくつか発見した。
ログを漁ると、`Unable to connect to the server: dial tcp 10.0.0.1:443: i/o timeout error`が共通だった。そこから色々調べて、`kube-proxy`のバージョン問題に辿り着いた。
[24日目] JavaでWebSocket (SSL可)

こんにちは、なりかくんと申します。
この記事はなりかくん Advent Calender 2023の24日目の記事です。（執筆は6日遅れの30日とか言えない。）

今回は、JavaでWebSocketを扱う方法を紹介します。Javaの記事ってなかなか出てこないんですよね。特にSSL対応のやつとか。
（調べ方が悪いのかもしれない。）

# Java標準機能のHttpClientでWebSocket
Java標準機能のHttpClientでWebSocketを接続できます。調べてもなかなか出てこなかったのでコードを紹介します。

```java
import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.WebSocket;
import java.util.concurrent.CompletableFuture;
import java.util.concurrent.CompletionStage;
import java.util.concurrent.ExecutionException;

public final class NarikakunWebSocket {
    private WebSocket ws;

    private void webSocketStart() {
        HttpClient client = HttpClient.newHttpClient();
        WebSocket.Builder wsb = client.newWebSocketBuilder();
        WebSocket.Listener listener = new WebSocket.Listener() {
            @Override
            public void onOpen(WebSocket webSocket){
                // 接続時
                ws.sendText("Hello", true);
            }

            @Override
            public CompletionStage<?> onClose(WebSocket webSocket, int statusCode, String reason) {
                // 切断時
                return null;
            }
        };
        CompletableFuture<WebSocket> comp = wsb.buildAsync(URI.create("WS URL"), listener);
        try {
            ws = comp.get();
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        } catch (ExecutionException e) {
            throw new RuntimeException(e);
        }
    }
}
```

少しでも参考になればいいなと思います。
【Ansible】GitLab RunnerでAnsible実行環境のコンテナイメージを使いたい～第1章：GitLabの構築～

## はじめに

2021年頃からAnsible実行環境のコンテナ化が進んできています。今回は、Amazon EC2を用いて、GitLab Runner経由でAnsible実行環境のコンテナイメージを使用可能にするまでの流れを紹介します。  
第1章では「GitLabの構築」を実施します。  

## TL;DR

- GitLab構築手順はRHELやGitLabのバージョンにより異なるため、必要に応じて公式ドキュメントを確認する

## 前提条件

- AWSでEC2インスタンスの作成方法がわかること

## 実行環境

- Red Hat Enterprise Linux: 9.2
- GitLab: v16.7.0-ee
- Python: 3.9.16

## 詳細

### 1. EC2インスタンスの作成

1. AWSにログインする
2. [サービス] -> [EC2] を選択する
3. [インスタンスを起動] を選択し、以下の条件でEC2インスタンスを起動する
    - Amazon マシンイメージ (AMI)
      - RHEL-9.2.0_HVM-20230503-x86_64-41-Hourly2-GP2
    - インスタンスタイプ
      - t2.xlarge（任意）
        - [Gitlab > Installation system requirements][1]記載の機能要件にもとづいて選択
        - スペックが低すぎるとGitLabのインストール中に止まることがある
    - セキュリティグループ
      - インバウンドルールにて、SSHとHTTPの通信を許可

### 2. GitLabのインストール

1. ターミナルソフト（Tera Termなど）でサーバーにログインする
    - IP Address
      - \<GitLab Global IPv4 Address>
    - user
      - ec2-user

    > :warning: RHEL9に対してRSA鍵でSSHログインする場合、Tera Termのバージョンは5以上にする必要がある

2. GitLabに必要なPythonパッケージをインストールする
    - [Red Hat > RHEL 9 の採用における考慮事項][3]によると、RHEL 9では`python3-policycoreutils`に変更されたようです

    ```console
    $ sudo dnf install -y curl python3-policycoreutils openssh-server perl
    ```

3. GitLabのパッケージをリポジトリに追加する

    ```console
    $ curl https://packages.gitlab.com/install/repositories/gitlab/gitlab-ee/script.rpm.sh | sudo bash
    ```

4. GitLabをインストールする

    ```console
    $ sudo EXTERNAL_URL="http://<GitLab Global IPv4 Address>" dnf install -y gitlab-ee
    ```

5. パスワードを確認する

    ```console
    $ sudo grep "Password:" /etc/gitlab/initial_root_password
    ```

6. ブラウザからGitLabにログインする
    - URL
      - http://\<GitLab Global IPv4 Address>
    - user
      - root
    - password
      - 前の手順で確認したパスワード
7. パスワードを変更する
    - 左上のユーザーアイコン -> [Edit profile] を選択
    - 左の``Password``から変更

## さいごに

- GitLab構築手順はRHELやGitLabのバージョンにより異なるため、必要に応じて公式ドキュメントを確認して下さい

## 参考URL

- [Gitlab > Installation system requirements][1]
  - GitLabに必要な機能要件など
- [GitLab > Install self-managed GitLab][2]
  - GitLabのインストール方法
- [Red Hat > RHEL 9 の採用における考慮事項][3]
  - RHEL 8 とRHEL 9 の主な相違点をまとめたもの

## 関連記事

- [【Ansible】GitLab RunnerでAnsible実行環境のコンテナイメージを使いたい～第2章：Runnerの登録・実行～][4]

---

[1]: https://docs.gitlab.com/ee/install/requirements.html
[2]: https://about.gitlab.com/install/#almalinux
[3]: https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/9/html-single/considerations_in_adopting_rhel_9/index
[4]: https://qiita.com/masa2223/items/d287a2f2b6f6a9367a51
🧠【QQQ】技術記事の投稿（トップ）

##### QQQ:bow_tone1: 3Q! 

### 記事構造
技術記事の投稿につきましては、下記の階層構造に基づいて構成しております。
ご期待に添えず、誠に申し訳ございません。
LC（コース Course）：コース目的とレッスン一覧
LM（レッスン Module）：レッスン目的とステップ一覧
LP（ステップ Process）： やってみよう！
LW（なぜ Why）：なぜかを学ぼう！
LQ（探究 Quote）： 探って、本質を考えよう！

```mermaid
graph TD
　TOP[トップ]
 
  TOP --> LC1[LC1]
  LC1 --> LM1_1[LM1_1]
  LM1_1 --> LP1_1_1[LP1_1_1]
  LP1_1_1 --> LW1[LW1]
  LW1 --> LQ1[LQ1]
  
  TOP --> LC2[LC2]
  LC2 --> LM2_1[LM2_1]
  LM2_1 --> LP2_1_1[LP2_1_1]
  LP2_1_1 --> LW2[LW2]
  LW2 --> LQ2[LQ2]

  TOP --> LC3[LC3]
  LC3 --> LM3_1[LM3_1]
  LM3_1 --> LP3_1_1[LP3_1_1]
  LP3_1_1 --> LW3[LW3]
  LW3 --> LQ2[LQ2]
  
  TOP --> LC4[LC4]
  LC4 --> LM4_1[LM4_1]
  LM4_1 --> LP4_1_1[LP4_1_1]
  LP4_1_1 --> LW3[LW3]
  LW3 --> LQ4[LQ4]

   
    style LC1 fill:black,stroke-width:3px;
    style LC2 fill:black,stroke-width:3px;
    style LC3 fill:black,stroke-width:3px;
    style LC4 fill:black,stroke-width:3px;

    style LM1_1 fill:#505050,stroke-width:3px;
    style LM2_1 fill:#505050,stroke-width:3px;
    style LM3_1 fill:#505050,stroke-width:3px;
    style LM4_1 fill:#505050,stroke-width:3px;

    style LP1_1_1 fill:#808080,stroke-width:3px;
    style LP2_1_1 fill:#808080,stroke-width:3px;
    style LP3_1_1 fill:#808080,stroke-width:3px;
    style LP4_1_1 fill:#808080,stroke-width:3px;

    style LW1 fill:#004000,stroke-width:3px;
    style LW2 fill:#004000,stroke-width:3px;
    style LW3 fill:#004000,stroke-width:3px;

    style LQ1 fill:#009000,stroke-width:3px;
    style LQ2 fill:#009000,stroke-width:3px;
    style LQ4 fill:#009000,stroke-width:3px;
    
     
    %% 改变LC2的箭头颜色为绿色
    linkStyle 5 stroke:green,stroke-width:2px;
    linkStyle 6 stroke:green,stroke-width:2px;
    linkStyle 7 stroke:green,stroke-width:2px;
    linkStyle 8 stroke:green,stroke-width:2px;
    linkStyle 9 stroke:green,stroke-width:2px;
    
    %% 改变LC3的箭头颜色为绿色
    linkStyle 10 stroke:blue,stroke-width:2px;
    linkStyle 11 stroke:blue,stroke-width:2px;
    linkStyle 12 stroke:blue,stroke-width:2px;
    linkStyle 13 stroke:blue,stroke-width:2px;
    linkStyle 14 stroke:blue,stroke-width:2px;
    
    %% 改变LC4的箭头颜色为黄色    
    linkStyle 15 stroke:brown,stroke-width:2px;    
    linkStyle 16 stroke:brown,stroke-width:2px;
    linkStyle 17 stroke:brown,stroke-width:2px;
    linkStyle 18 stroke:brown,stroke-width:2px;
    linkStyle 19 stroke:brown,stroke-width:2px;
  

  
```
:::note info
階層構造について
[LC、LM、LP] の階層構造：
　これらの階層は相互に必ず紐づいている必要があり、単独での存在（離散）は認められません。
　簡潔に表現する場合は、LC・LM・LPを同一ページ内に統合して記述しても構いません。

[LW、LQ] の階層構造：
　これらは任意で追加可能な補助階層であり、他のコンテンツとの再利用が可能です。

採番ルール（ID 命名規則）:
x_x_x：LCのID _ LMのID _ LPのID（例：1_1_1）
LW / LQ：順番に採番（1, 2, 3, …）
:::

# 🧑‍🏫 コース一覧
-  [【初心者から】組み込み一体開発_RL78G14篇　LC1](https://qiita.com/zhb/items/a8749effa03b8dd31b0e)
- 【初心者から】組み込み一体開発_STM32篇　LC2
##### QQQ:bow_tone1: 3Q!
[Grafana Loki+Fluent Bit] "400 Bad Request ... has timestamp too new"の解決方法

# Grafanaでsyslogが表示されない

Dockerコンテナで動かしているGrafana Lokiに、FluentdでRaspberry Pi ４のsyslogを収集する環境を構築したのですが、Fluentdより軽量なFluent Bitに変えたところ、エラーが発生してGrafanaに表示されない問題が発生しました。解決までに結構苦労したので参考になれば幸いです。

Docker、Grafana Loki、Fluent Bitなどのインストール、設定方法は、公式やその他の記事を参照してください。

## エラー内容

Lokiにrsyslogのデータを転送すると、Lokiから"400 Bad Request ... has timestamp too new"というエラーが返ってきて、Grafanaにsyslogが表示されませんでした。

```
2023-12-30 18:44:15 +0900 [warn]: #0 failed to write post to 
http://192.168.0.15:3100/loki/api/v1/push (400 Bad Request 10 
errors like: entry for stream '{app="dev", host="raspberrypi", pid="95412"}' 
has timestamp too new: 2023-12-30T18:44:13Z)
```

## 解決方法

結局、Fluent Bitのsyslogパーサーに`Time_Offset`を追加したというGitHubのissuesを見つけて試したところ、エラーがなくなりGrafanaでsyslogが表示されるようになりました。

```diff:parsers.conf
[PARSER]
    Name        syslog-rfc3164
    Format      regex
    Regex       /^\<(?<pri>[0-9]+)\>(?<time>[^ ]* {1,2}[^ ]* [^ ]*) (?<host>[^ ]*) (?<ident>[a-zA-Z0-9_\/\.\-]*)(?:\[(?<pid>[0-9]+)\])?(?:[^\:]*\:)? *(?<message>.*)$/
    Time_Key    time
    Time_Format %b %d %H:%M:%S
+   Time_Offset +0900
    Time_Keep   On
```
## 参考情報

https://grafana.com/docs/loki/latest/setup/install/docker/#install-with-docker-compose
https://docs.fluentbit.io/manual/installation/linux/debian
https://docs.fluentbit.io/manual/pipeline/inputs/syslog#rsyslog_to_fluentbit_network
https://docs.fluentbit.io/manual/pipeline/outputs/loki
https://docs.fluentbit.io/manual/v/1.3/parser
https://github.com/fluent/fluent-bit/issues/4206

以上です。
Google App Engineのデプロイに必要なサービスアカウントを用意する

# 概要
掲題の通りです。いつも忘れるんで、備忘として記述してます。

## 想定
Github Actions (みたいなCI)でGoogle App Engineにデプロイするためのサービスアカウントを作ります。

# 結論
以下で作成する。

```bash
# 変数
EXPORT PROJECT_ID=[プロジェクトID]
EXPORT SERVICE_ACCOUNT_ID=[サービスアカウント名] #例: ci-deploy とか

# サービスアカウントの作成
$ gcloud iam service-accounts create ${SERVICE_ACCOUNT_ID} \
  --description="Use to CI Deploy" \
  --display-name="CI Deploy" \
  --project ${PROJECT_ID}

# 必要なロールの設定
$ gcloud projects add-iam-policy-binding ${PROJECT_ID} \
   --member="serviceAccount:${SERVICE_ACCOUNT_ID}@${PROJECT_ID}.iam.gserviceaccount.com" \
   --role="roles/appengine.deployer"

$ gcloud projects add-iam-policy-binding ${PROJECT_ID} \
   --member="serviceAccount:${SERVICE_ACCOUNT_ID}@${PROJECT_ID}.iam.gserviceaccount.com" \
   --role="roles/appengine.serviceAdmin"

$ gcloud projects add-iam-policy-binding ${PROJECT_ID} \
   --member="serviceAccount:${SERVICE_ACCOUNT_ID}@${PROJECT_ID}.iam.gserviceaccount.com" \
   --role="roles/iam.serviceAccountUser"

$ gcloud projects add-iam-policy-binding ${PROJECT_ID} \
   --member="serviceAccount:${SERVICE_ACCOUNT_ID}@${PROJECT_ID}.iam.gserviceaccount.com" \
   --role="roles/compute.storageAdmin"

$ gcloud projects add-iam-policy-binding ${PROJECT_ID} \
   --member="serviceAccount:${SERVICE_ACCOUNT_ID}@${PROJECT_ID}.iam.gserviceaccount.com" \
   --role="roles/cloudbuild.builds.builder"

# Optional: サーバーレスVPCを利用する場合
$ gcloud projects add-iam-policy-binding ${PROJECT_ID} \
   --member="serviceAccount:${SERVICE_ACCOUNT_ID}@${PROJECT_ID}.iam.gserviceaccount.com" \
   --role="roles/vpcaccess.user"
```

## ダウンロード

```bash
$ gcloud iam service-accounts keys create [任意の名前].json \
--iam-account=${SERVICE_ACCOUNT_ID}@${PROJECT_ID}.iam.gserviceaccount.com

created key [xxxx] of type [json] as [xxx.json] for [xx@xxxx.iam.gserviceaccount.com]
```

# ちなみに
GitHubは一昨年くらいにOIDCトークンを導入したからWorkload Identity 連携でGoogle Cloudに認証するというのもできるらしいです。

https://cloud.google.com/blog/ja/products/identity-security/enabling-keyless-authentication-from-github-actions

# 参考
https://qiita.com/_masaokb/items/7bb7354d2b22cb90fdc5
【Python】ModuleNotFoundError: No module named '_tkinter'

# MacでTkinterを使用する
TkinterはPythonの標準的なGUIライブラリとして広く利用される。またよく知られている通り、MacOSにはPythonがプリインストールされており、実行環境を構築しなくとも、Pythonを利用することができる。

https://docs.python.org/ja/3.11/library/tkinter.html#module-tkinter

しかし、MacOSでTkinterを使用しようとした場合、以下のようなエラーが発生するケースがある。
```
ModuleNotFoundError: No module named '_tkinter'
```
# 対処法
原因の一つとして、Tkinterがインストールされていない、もしくはそのバージョンがPythonのバージョンと一致していないことが考えられる。その場合、以下のコマンドでPythonのバージョンを確認し、バージョンに合ったtkinterをインストールする必要がある。
```:ターミナル
$python --version
Python 3.11.5

$brew install python-tk@3.11
```
ここでは、Pythonのバージョンが3.11のため、homebrewを使用してpython-tk@3.11をインストールしている。
また、homebrewをインストールしていない場合、以下を実行し別途インストールの上、上記を実行する必要がある。
```:ターミナル
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
https://brew.sh/ja/

# 参考
https://original-game.com/mini_howto/what-to-do-if-no_module_named_tkinter-is-displayed-in-tkinter/

https://zenn.dev/k41531/articles/6133b1b045d1aa
ROIとは

ROI（Region of Interest）は「関心領域」と訳され、画像処理、画像認識、機械学習などで用いられる用語です。具体的には、画像または動画の中で特に注目して、処理や分析を行いたい部分を指します。ひと昔前では、このROIを手動で設定していましたが、現在は、色検出や差分などを用いてROIを設定する事が主流です。

## ROIの使用例:
物体検出: 画像内の特定の物体や特徴を識別する際、その物体が存在する領域をROIとして特定し、分析の対象とします。

画像処理: 特定の操作やフィルタリングを画像の特定部分にのみ適用する場合、その部分をROIとして定義します。

追跡: ビデオ内の特定の物体を追跡する際、フレームごとの物体の位置を表す領域がROIとなります。

特徴抽出: 機械学習やパターン認識で、特定の特徴を抽出するためにROIを用いて、画像の特定の部分に焦点を当てます。

## ROIの選択方法:
手動: ユーザーが直接、画像上で関心領域を選択します。

自動: アルゴリズムが特定の基準（例：色検出、差分、エッジ検出）に基づいてROIを決定します。

事前定義済み: 特定のアプリケーションやタスクに基づいて、ROIがあらかじめ定義されている場合もあります。(例:定点カメラなどで、特定の座標を見ていればよい場合、その場所を事前にROIとして設定する。)

## ROIの利点:
効率性: 全体の画像ではなく、関心領域のみを処理することで計算時間と計算コストを節約できます。

精度: 分析や処理をROIに限定することで、ノイズや不要な情報の影響を減らし、結果の精度を向上させることができます。
本の読み方試行錯誤

### 本の読み方を試行錯誤しています
技術書や仕事に関わる本を読む時に、どうすれば効率的に読むことができるのか、頭に内容が残るのか試行錯誤しています。現在は、西尾 泰和 著『エンジニアの知的生産術』（技術評論社　2018）を参考に、少し自己流にアレンジしています。まだ「これが最高の読み方だ！」とは思えないですが、今の読み方を記録してみようと思います。

↓『エンジニアの知的生産術』

https://www.amazon.co.jp/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E7%9F%A5%E7%9A%84%E7%94%9F%E7%94%A3%E8%A1%93-%E2%94%80%E2%94%80%E5%8A%B9%E7%8E%87%E7%9A%84%E3%81%AB%E5%AD%A6%E3%81%B3%E3%80%81%E6%95%B4%E7%90%86%E3%81%97%E3%80%81%E3%82%A2%E3%82%A6%E3%83%88%E3%83%97%E3%83%83%E3%83%88%E3%81%99%E3%82%8B-WEB-PRESS-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4774198765

### 『エンジニアの知的生産術』に記載されていたやり方概要
- 読み方には「速い読み方（有用な情報を見つける）」と「遅い読み方「情報をもとに理解を組み立てる）」がある
### 速い読み方
    1.  準備：目的を明確化する。
    2.  プレビュー：1冊５分くらいで全体をみてキーワードをメモして情報収集し、本を読むべきか、目的を修正すべきかチェックする。
    3. （フォトリーディング：目のフォーカスをぼかしてページ全体を眺める。１冊3~5分 ※著者の方はあまりおすすめしていない）
    4. 質問をつくる：再度5~15分本を眺めて、具体的な質問をつくる。まだ答えは探さない。読書の目的を具体的にしていく。
    5. 熟成する：１０〜２０分、できれば一晩おく。
    6. 答えを探す：4の答えを探すためにまたざっと読む。 
    7. マインドマップをつくる：学んだことをノートに書く。
    8. 高速リーディング： 自分が必要と思う速度ではじめ〜おわりまで読む。
    ※この時、見出し・図・箇条書きを特にチェックする。大事な情報が記載されていることが多い。

### 遅い読み方
    1. 予備調査・選書：3時間くらい。 
    2. 通読：4時間くらい。章の見出しをノートに記入していく。→読みながらノートを埋めていく。わからないことは何度でも記録する。頻出単語を記録する。関係や理由などは矢印でつなぐ。
    3. 詳細読み：上記で記録した「わからないこと」を解決しつつ読む。

### 考えをまとめる
    1. レポートで言及するとよさそうな情報をふせんに書き出す。１００枚目標。
    2. 書き出したふせんを並べる。関係がありそうなものを近くに異動する（KJ法）。集めたグループに表札をつける（これは省略可）。
    3. 束ねたふせんをまた広げる。ふせん同士やグループ同士の関係を図解化する。
    4. 図解を元に文章化する。全体を見る⇄詳細を見るを繰り返す。

## 現在の自己流の読み方
上記を参考にしつつ、時短のため、速い読み方・遅い読み方を混ぜてアレンジしたような読み方になっています。4の部分は両方試しているところです。

    1. 目次をチェックする：全体像を把握しようと努める。
    2. ざっと読む：見出しを中心に、30分くらい目標で１度最後まで眺める。気になった単語はマーカーを引く。
    3. マーカーを引きながら読む：大切そうな部分にマーカーをマーカーを引きながら読む。
    4. マーカーを引いた部分を中心に、ノートに転記する：まとめ資料を作るイメージで、ノートに転記する。
    or
    4. マーカーを引いた部分を中心に、ふせんアプリ（Post-it)に転記する：この場合はこの後ふせんをグループ分けして、タイトルをつける。
    5. 4で作成したノートやふせんを見返す。


## 考えていること・悩み
- 目的意識を明確にするために、2の時に気になった単語や疑問を書き出したらいいのかもしれない。しかし、そうすると2の実施時も、iPad(ノート）も必要になるので、少し面倒。
- 4でやたらと時間がかかってしまう。もう少し短縮したい。特に４の部分をふせんにすると、時間がかかってしまう。ふせんに書くと、確かに全体を見る⇄詳細を見るを繰り返すことができるメリットは感じたが、読み返す際のハードルを考えても、ノートにまとめ資料を作る方がよいように感じている。マインドマップも昔やってみたことがあるが、これも見返してみた時の理解度がいまいちに感じた。ただ、コピペではなく手書きで書き写すことで、少し頭に入る度合いはあがっているのではないか？と感じる。

## もう少し時短で効率的に読めるようになっていきたい
読むのに時間がかかりすぎてしまうと、読むハードルもあがってしまうので、１冊にもう少し時間をかけずに読めるようになっていきたいです。理解の必要な度合いなどから、まとめ資料の細かさを変えてもいいかもしれないと思っています。他の方がどう読んでいるのかも気になります。
【Tailwind CSS】Vite×React×TypeScriptにおける環境構築方法

# Tailwind CSSとは？
Tailwind CSSは、HTML内で直接クラスを使用してスタイルを適用するCSSフレームワークです。

- tailwindcss
 
 https://tailwindcss.com/

# 実行環境
- Vite：5.0.8
- react：18.2.0
- typescript：5.2.2
- tailwindcss：3.4.0

# 環境構築方法
[**tailwindcss**](https://tailwindcss.com/docs/installation/framework-guides)のドキュメント通りにやれば構築できますが、フレームワークごとに環境の構築方法が若干異なっていたので、注意が必要かと思います。
今回はViteを使用するので、Framework Guides > [**Vite**](https://tailwindcss.com/docs/guides/vite)を参考にします。

### 1. プロジェクトの作成

以下のコマンドでVite プロジェクトを作成します。
```
npm create vite@latest
```

https://ja.vitejs.dev/guide/

### 2.Tailwind CSSのインストール
以下のコマンドでtailwindcssをインストールします。
コマンドを実行すると次の2ファイルが生成されます。
- postcss.config.js
- tailwind.config.js

```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

`postcss.config.js`と`tailwind.config.js`の中身はデフォルトで以下のようになっていると思います。

```react:postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```

```react:tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### 3.`tailwind.config.js`ファイルの内容を変更
`content`の中身を以下のように更新します。

```diff_javascript
/** @type {import('tailwindcss').Config} */
export default {
- content: [],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
https://tailwindcss.com/docs/guides/vite

### 4.ディレクティブをファイルに追加
プロジェクトを作成した際に作成される`index.css`ファイルに以下のディレクティブを追加します。

```css:index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

`@tailwind`ディレクティブについて、
詳細は以下のドキュメントが参考になるかと思います。

https://tailwindcss.com/docs/functions-and-directives

https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#css_statements

### 5.起動
ここまでできたらApp.tsxにtailwindcssを使用したコンポーネントを記載し、
tailwindcssが適用されている事を確認します。
今回はApp.tsxは以下のように記述しました。

```react:App.tsx
export default function App() {
    return(
        <>
            <h1>hoge</h1>
            <p className="text-blue-600 font-bold text-5xl ">
              Hello Tailwind
            </p>
        </>
    )
}
```
:::note info
補足：スタイルの詳細
`text-blue-600`：テキストを青色（度合600）に指定。
`font-bold`：テキストを太字に設定。
`text-5xl`：テキストのサイズを5xlに設定。
:::

index.cssはmain.tsxで以下のように読み込んでいます。
```react:main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './css/index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

```
次のコマンドで起動します。
```
npm run dev
```

# 実行結果
実行した結果以下のように、tailwindcssが適用された`Hello Tailwind`が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/12dc6ea0-1089-a069-c027-0b98a92ad917.png)

# 参考
https://tailwindcss.com/docs/guides/vite
【CSS】子要素が特定の数以上ある場合にスタイルを適用する方法

以下のように`:has()`を使用することで指定した数以上子要素が存在する場合にのみスタイルを適用できます。

```css
ul:has(> :nth-child(N)) li { }
```

2つ以上ある場合にスタイルを適用するには以下のようにします。

```css
ul:has(> :nth-child(2)) li { }
```

https://developer.mozilla.org/ja/docs/Web/CSS/:has

https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator

https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
Vector Map Builderでlanelet2 mapを編集してみる [aichallenge2023-racing ]

自動運転AIチャレンジ2023シミュレーション大会の記事

# はじめに


以下記事でタイム短縮のためにはlanelet2の地図を編集する影響が大きいとのことでVector Map Builderでlanelet2 mapを編集してみたので操作方法などのメモ。


https://zenn.dev/ttanaka3/articles/3dc507df539985


Vector Map Builder使い方講座

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



Vector Map Builderのリンク

https://tools.tier4.jp/vector_map_builder_ll2/


Vector Map Builderのマニュアル

https://docs.web.auto/user-manuals/vector-map-builder/how-to-use/edit-maps


# ファイルのインポート

/aichallenge2023racing/docker/aichallenge/aichallenge_ws/src/aichallenge_submit/aichallenge_submit_launch/map にあるマップをインポートする

- Fileのタブから`Import Lanelet2 map`を選択してlanelet2マップ [lanelet2_map.osm]をインポート
- Fileのタブから`Import PCD`を選択してPCDマップ[pointcloud_map.pcd]をインポート

インポート完了した状態

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/df486f75-8fdd-632a-cc87-eff24af6e392.png)



# Laneletの分割

最初の状態はLaneletが大まかに分かれているので、さらに細かくLaneletを分割する


- 分割したいLaneletのLinestringを選択し、上のLanelet2MapsタブからInsertPointToLinestringをクリックしてLanelet区切りたい箇所に点を追加する（反対側のLinestringも同様に点を追加する）


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/e01a087c-99d9-5fb4-d9f0-1e579f501dee.png)

- Shiftを押しながら追加した2点とLaneletを選択すると右上に`Sprit lanelet`というのが出てくるのでクリックするとlaneletが分割される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/3df71036-78f8-3e9b-98e8-007a2b33ced3.png)

## 分割したLaneletを結合する


Shift押しながら2つのLaneletを選択すると右上に`Unify Lanelets`というのがでてくるのでクリックすると選択したLaneletが結合される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/0f5a90ee-a534-0136-5b1a-a928bd80dc2a.png)



# 制限速度の変更


Laneletを選択してEditでspeed limit を変更する。
（デフォルトのsimple_pure_pursuitだとこの値がlongitudinalの速度になってる）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/1e9b7b7b-860d-c451-d07b-56d044032305.png)


# 点などをまとめて選択

Shiftを押しながらドラッグすると青い矩形がでるので点などの要素をまとめて選択できる。


# 曲線をつくる

- Create Centerlineでcenter lineを作成
- 間に細かい点があるので削除して直線で大まかな形状を作る
- 直線の間にInsertPointToLinestringで点を追加し点をクリックして動かして曲線の形状を作る

# おわりに

最初は操作方法のコツが分からず苦労しましたがだんだん慣れてきました。
マニュアルにない操作方法など気づきがあったらまた追記していきます。
2023年の振り返りと2024年の資格目標について

# はじめに
2023年ももうすぐ終わります。一年は早いです。40代のため健康を維持して自己学習を続けるエンジニアになります。

# 2024年　目標

### 更新するAWS資格
2021年11月　awsソリューションアーキテクトプロフェショナル
2021年10月　awsセキュリティスペシャリティ
2021年9月　awsデータベーススペシャリティ
2021年5月　aws Developer アソシエイト
**2024年からAWS資格取得に全力で頑張ります**

### LPIC1再認定する
**経験年数が増えても基礎知識がしっかりあるエンジニアであることを証明したいです。**

### LPIC2の学習
LPICレベル1に合格したら、LPICレベル202を学習する。

### 技術本
休日に以下の本を読む日を作る

**ネットワークがなぜつながるのか**
https://www.amazon.co.jp/dp/4822283119

**システム障害対応の教科書**
https://www.amazon.co.jp/dp/4297112655

**運用改善の教科書**
https://www.amazon.co.jp/dp/4297120704/

### 学習計画

平日はlinux各章づつ読む、問題を解く
AWSは1日1サービスを学ぶ、本を一通り学んだら問題を解く

休日に技術本を読む日を作る。

### 小説
技術の勉強以外に本を読む　1ヶ月に1冊本を読む

火車　読み終えた
後悔病棟　読み中

### 健康管理
フルリモートのため、毎日運動を20分続けます。
ヨガを15分以上続ける
睡眠6時間はとる。

### 仕事
障害対応、運用改善を積極的に行う。
OpenLDAP zabbixを学ぶ


# 2023年　振り返り

### 取得した資格
2023年 2月 Google Cloud Associate Cloud Engineer
2023年 9月　aws Sysope アソシエイト 



### 今年達成したこと
Qiitaのバッチが手に入りました。日々の自己研鑽のおかげです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599002/63eaa6ca-b7e6-4592-ecc1-61ca2810a546.png)


### 過去の業務振り返り 
***2014年から運用保守メインのインフラエンジニアです***
※ IT業界のみ記載してます。

2023年
別のグループに移動になりました。以前のチームでは私一人でインフラの運用保守をしていましたが、異動後、チームの雰囲気が変わりリーダーも変わりましたが上手く、運用保守の案件について引継ぎが出来て協力しながら進めることが出来ています。


構築の業務をするようになって仕事の難易度が上がりました。
難しくて躓きながら構築のベテランにフォローして頂きながら業務をしています。

2022年
AWSのシステム保守で障害対応のマニュアル作成・各種定型作業・引継ぎをしました。
裁量があり2名体制で業務をしてきました。不明なものが多く休日たくさん勉強して引継ぎが無事完了しました。


2019年
Gsuiteのシステム運用の業務は電話対応9割と定型作業でしたが、新人フォローしながら残業平均少なくて30時間で一年半働きました。システム運用の基本を学びメールの送り方や電話対応が抵抗がなくなりました。

2014年10月～2017年
金融系のオンプレミスのシステム保守案件でJP1 AJS システム運用保守の基本を学びました。
様々な派遣先で働きました。

### 利用している有料講座
#### LPICレベル2の有料講座
2023年8月ごろにLPICレベル2の有料講座に入りました。
LPICレベル2のパッケージ、LDAPをご教示いただきました。
3年間有効のため、週一ペースでLPICの学習は続けようと思います。

#### インフラカレッジ
実務での基本的なインフラの知識など質問しています。
CentOS7になりますが、講座が大変役に立っています。

#### cloudtech
AWSの永久ライセンスをだいぶ前に購入してAWSの勉強する際に利用しています。
大変分かりやすくよく利用しています。
Flaskのmodelクラスを別モジュールに切り出す方法


## はじめに

Flaskのmodelクラスを別モジュールに切り出したので、その方法をまとめます。

ベストプラクティスとは思えませんが、今のところ動いてます。

## どんな時に使うか

Flaskでアプリをガシガシ作ってきて、あるタイミングでmodelクラスを別のアプリからも使いたいと思った時。

クリーンアーキテクチャのモデルとして使いたいので、データベースの詳細には依存したくないとき。

## 免責

クリーンアーキテクチャと言いつつ、flaskのSQLAlchemyにおもいっきり依存しているのだが、そこはOKの前提。

## 方法

### 1. 別モジュールのためのディレクトリを作成

たとえばこんなかんじ。
```lua
shared_models/
|-- shared_models/
|   |-- __init__.py
|   |-- models.py
|-- tests/
|   |-- __init__.py
|   |-- test_models.py
|-- setup.py
```

### 2. setup.pyを作成

```python
from setuptools import setup, find_packages

setup(
    name='shared_models',
    version='0.1',
    packages=find_packages(),
    install_requires=[
        # Any dependencies required
    ],
)
```

### 3. models.pyを作成

すでに作成済みのモデルクラスを`MyModel`と`YourModel`とします。`init_models`は、モデルクラスの定義をアプリのライフサイクルでただ一度だけ行います。データベースへの依存を、引数の`db`で注入しています。これにより、`shared_models`は外部に依存しないモジュールになります。

```python
_IS_ALREADY_DEFINED = False

def init_models(db):
    global _IS_ALREADY_DEFINED
    if _IS_ALREADY_DEFINED:
        return
    _IS_ALREADY_DEFINED = True

    global MyModel, YourModel

    # すでに定義済みのモデルクラスをここにコピー
    class MyModel(db.Model):
        # My model definition
        pass

    class YourModel(db.Model):
        # Your model definition
        pass   
```

### 4. コンシューマー側のアプリでshared_modelsを使う

`shared_models`を使いたいコンシューマーアプリは、`init_models(db)`を呼び出してモデルクラスを定義しておきます。その後は、モデルクラスをインポートできます。

`database.py`がこうなってたとします。
```python
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
```

```python
# app.py
from database import db
from shared_models.core_models import init_models
init_models(db) # 依存性の注入とモデルクラスの定義
from shared_models.core_models import MyModel, YourModel # モデルクラスのインポート

@app.route('/api/my_api')
def my_api():
    my_model = MyModel.query.all()
    ...
```

別のファイルからも、まったく同じようにモデルクラスをインポートできます。
`init_model`は何度呼び出しても、モデルクラスの定義は一度しか行われません。
```python
# other_file.py
from database import db
from shared_models.core_models import init_models
init_models(db) # 依存性の注入とモデルクラスの定義
from shared_models.core_models import MyModel, YourModel # モデルクラスのインポート

def my_function():
    your_model = YourModel.query.all()
    ...
```

### 5. モデルクラスを継承する
shared_modelsで定義したモデルクラスを継承することもできます。
```python
from database import db
from shared_models.core_models import init_models
init_models(db) # 依存性の注入とモデルクラスの定義
from shared_models.core_models import MyModel, YourModel # モデルクラスのインポート

class CustomMyModel(Utterance):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    def say_hello(self):
        return f"Hello from Custom Model"


# 通常通りインポートして使える ##############
from app.models import CustomModel
custom_model = CustomMyModel.query.get(1)
print(f"TEST {custom_model}")
```
完全無料でサイトを作成する方法

とある理由でサイトを作りたくなったのですがお金を使いたくなかったので方法を探しました。その備忘録的な記事です。

# 前提
HTMLやCSSファイルは完成しているものとします。

# 使うサイト
・GitHub

https://github.com

・DDNS Now

https://ddns.kuku.lu/index.php

# リポジトリを用意
まずGithubにログインして作成したファイルをリポジトリにアップロードします。
無料で公開するにはパブリック リポジトリにする必要があります。

# ドメインを用意
(これはやらなくても公開できますが短いURLが作れるのでやるのをおすすめします)

WEBサイトを公開するにはドメインが必要ですがドメインは持ってるだけで更新料がかかります。
無料のドメインも無い訳ではないですが安全性に不安があるのでここではダイナミックDNSサービスのDDNS Nowを使います。

DDNS Nowは永久無料で維持費やドメイン購入費などもかかりません。
.f5.siのサブドメインが取れて削除しない限り、他人にドメインが取られることがないという優れものです。

https://ddns.kuku.lu/index.php

まずサブドメインをここから取得します。
メアドなどは要りません。
既に取得されているサブドメインを取得しようとすると枠が赤くなって「」は既に登録されています。と出ます

![64E6B81D-CEE8-4F4C-8CD2-BDF315EC384F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638241/78595593-c2f4-1329-6256-b986b609051a.jpeg)

取得できたら設定のDNS設定を開いて「CNAMEレコードやURLリダイレクト」の項目に
```
[githubのユーザー名].github.io.
```
と入れて保存します

![80B24DC3-6385-4BBF-A296-AE9FDB11827C.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638241/bc72232b-1aa6-e970-5fea-08b15dc38c4c.jpeg)

# Github Pagesで公開
最後にGithubに戻って、リポジトリのSettingからPagesを開きます。

![D9212EFE-DEA9-43E8-8392-009DC94AE860.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638241/f1dc4cf7-c1a6-02fe-f23d-c68b30d72554.jpeg)

なぜかカスタムドメインの枠がないので一回SourceをGithub ActionsにしてDeploy from a branchにもどします。

次にデプロイするブランチとさっき取得したサブドメインを入力してSaveを押します

![9E37BFB3-13F1-4DA8-9427-A4B870A8FA4F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638241/64c9d34a-54d4-aa67-2813-07fc59791845.jpeg)

するとDNS Check in Progressとなるので終わるまで待機します

![89B35259-AF48-4DBA-B3B8-E94DD0E82308.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638241/f257e49e-1822-a7be-84d9-b378b3da1502.jpeg)

DNS check successfulとなってしばらくするとこのような表示になってアクセスできるようになります

![34F52A70-A423-41AD-8932-41D9D4727F97.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638241/94dd8725-97f3-5025-65f9-48b5e931e333.jpeg)


# 注意点
~~・.f5.siだとおそらくGoogle Adsenseに通らないので乗り換える必要があるが乗り換えるとドメインの評価はリセットされる。
・Github Pagesは100GBを越すと追い出されるのでサイトが膨大になってきたらCloudflare Pages等のサービスに乗り換える必要がある。~~

追記(5/9)
f5.siドメインがPublic Suffix Listに登録され通常ドメインと同様に扱われるようになりました

https://magical.kuku.lu/?num=3732

~~これにより全ての注意点が解消されましたがCloudflareの登録はまだできないそうです。反映を待ちましょう。~~

~~https://zenn.dev/trans/articles/ef972043c090cb~~

追記(6/20)
Cloudflareの登録が可能になったみたいです

# メモ的なやつ
最初はCloudflare Pagesを使おうしましたがサブドメインは使えないらしいのでしょうがなくGithub Pagesを使いました。

追記(6/20)
今は使えます。
# 追記(2024/3/25)
https://www.digitalocean.com

Github Pagesは規約上商用利用不可だったのでDigitalOceanにサイトをホスティングを乗り換えました

# 最後に

https://replit.com/

Repl.itを使えばIpadでも開発も出来るのでパソコンがない人もサイトをとりあえず作ってみるといいと思います。
Kubernetesをローカルで動かしてみる(前編)

## はじめに
世間では数年前からクラウドサービスが増え始め、最近でも勢い衰えることなくクラウドに移行するところも多く、エンジニアにも求められるスキルとして定着しつつあります。
そして、セットでよく語られるのがコンテナ技術で、kubernetesを使用した経験があるかどうかは現在進行形で重要性が高いものとなってます。
そんな中、kubernetesは触ったことがなかったなと反省し、これを機にまずはローカルで動かしてみよう。というのをまとめたものになります。

## Kubernetesって？
「Kubernetes」(通称:k8s)とは、コンテナ仮想化ツールの運用管理・自動化を行うために開発されたオープンソースソフトウェアのことです。
Dockerは、作成したimageをもとにコンテナ化してくれるツールでしたが、kubernetesはコンテナに閉じた上で、コンテナごとにスケーリングやフェイルオーバーなどコンテナの管理をしてくれる大変ありがたいものとなっております。

※ちなみに略称であるk8sは、Kubernetesの先頭文字「K」と最終文字「s」の間の文字数が8文字なのでk8sと呼ばれているようです。

## Kubernetesでやってくれること
**1.自己回復機能（セルフヒーリング）**
定義ファイルのマニフェストに記載している状態から逸脱した場合に、自動で修復してくれる機能

**2.スケジューリング/負荷分散**
マニフェストに記載している通りに自動で適切なリソース配置を行ってくれる機能

**3.オートスケーリング**
負荷に応じてPod数を自動で増減してくれる機能

**4.ローリングアップデート**
アップデートを行う際にダウンタイムが発生しないように順番に一つずつアップデートをしてくれる機能

**5.ロールバック**
アプリに何か問題が発生した時に前のバージョンにロールバックすることができる機能

**6.永続ストレージ**
コンテナに永続でデータを保存することができないので別で保存領域を設けて割り当てることでストレージとして使用することができる機能

## もしKubernetesを使わずコンテナを管理した場合
手動でコントロールしていくことを考えると以下のような管理コストが発生してしまう可能性がありそうです。
コンテナが増えるほどコストもさらに膨らんでいく一方なのと、kubernetesで担保される部分もあるので、導入するメリットは非常に大きいのかなと思われます。
**・処理負荷に合わせたスケーリングをする。**
**・各コンテナをチェックし正常に動いているか確認したり、問題があった場合は都度対応する。**
**・各コンテナを負荷分散させる。**
...etc

## Kubernetesのコンテナイメージ
実際のAPIなどはコンテナ内のサーバにて動作するので枠組みとしてはPodの中でコンテナを立てて、そこにAPIがデプロイされているイメージ。
（アクセス数が増えることによって水平スケーリングが行われる場合、このPod単位で増えて負荷分散を行うような形になる。）
下図は1ノードごとに2Podで1Podあたり2コンテナの場合のイメージ図になります。

**図1．コンテナイメージ図**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480753/f376fd27-7f60-509f-040a-1fa5c4a432a2.png)


## ローカルでKubernetesを動かす
どうやらMinikubeと呼ばれるツールを使用することでローカルでもKubernetesを利用できるようなので
後編ではこちらを使ってKubernetesを動かしてみようと思います。

https://kubernetes.io/ja/docs/setup/learning-environment/minikube/
腐らない運用を作るために意識しておくこと

# 腐らない運用とはなにか
働く上でたくさんの腐っている運用を目にしました。そこで腐る運用の自分なりに解釈した運用が腐る理由を書いておきたいと思います。

## 緊急性が低い
その運用があることで、将来的には役に立つが、直近のクリティカルパスに対して影響をあまり与えない運用の場合、腐る場合が多い。

## 周知が弱い、根拠が弱い
周知が弱いというのはその通りで、例えばSlackで周知しただけの場合、その運用は続かない可能性が高い。（チケットの運用方法等）
根拠が弱いというのは、この運用をすることでなにかしらいいことを期待するが、根拠の上で成り立っている可能性が低いということ。（将来無駄な運用になる可能性が高い）

## 強制力が低い
強制力が低い運用は腐る可能性が高い。緊急度が低いというのと若干被る部分がありますが、例えば不明点などをスプシに記載する、といった運用は総じてうまく行っていなかった覚えがあります。

## 振り返らない
その運用が本当に機能しているか、意味のあるものなのかというものを振り返らない場合、腐る場合が多いなという印象です。

# CI/CD観点での話
UnitテストやAPIテスト、E2Eテストを作成することがあると思います。CI/CDでの組み込みはどの組織でも行いたいと思いますが、これをやりたい理由の1つが「運用に強制力を持たせること」なのかなと考えています。このやり方はとても効果的だと思います。

# QA観点での話
QAとして働いていると、たくさんやりたい運用というのは出てきます。ただし、プロジェクトに関わるPM、QA、開発に対して横断的な運用を作る場合、上記の腐る運用の特徴に対してクリアするのはなかなか難しいですし難易度が高いと感じました。
ここで機能しているのは大抵リリースに影響するようなクリティカルな運用しか機能していません。

# 腐らない運用の特徴
- 強制力が高いこと
- 運用に対して、複数人がよくみている
- 定期的に効果、検証がされている
- わかりやすく周知されている

# おわりに
現在QAチームでは運用を考える機会はあるものの、雑な運用、よりよく活用されない運用、振り返られない運用があるため棚卸しした上で再度、運用のあり方を考えていきたいと思います。
WSLのUbuntu内のフォルダにWindowsからフォルダをコピペできなかった時

# 問題

https://www.youtube.com/watch?v=uhnASau7fB4&list=PLAYMgc8c_QezzZAEcnhI_Awo1QHWxE6FD&index=3

この動画を見ながらAtcoder用に環境構築を行っていたら、ac-library-masterがUbuntu内にコピペできなかった。


# 解決方法

https://teratail.com/questions/306908

~~~
cd lib
sudo chmod 775 -R ac-library-master
~~~
を打ち込んだ後コピペできた。

# メモ
ほかのサイトを参考に環境構築しようとしていたが、Intelisenseが非推奨に代わっていたりエラーが発生した時の対処法について書かれていなかったために詰まっていたところ上記の動画を見つけることができた。