OmniAICreator/Qiita-1.07M huggingface dataset:
Go言語(Golang)  並行処理(goroutineとchannel)


```go
package main

import "fmt"

// goroutineは整数スライスsの要素の合計を計算し、結果をチャネルcに送信します。
func goroutine(s []int, c chan int) {
    sum := 0
    // スライスsの各要素をループで回し、sumに加算していきます。
    for _, v := range s {
        sum += v
    }
    // 計算した合計値sumをチャネルcに送信します。
    c <- sum
}

func main() {
    // 整数のスライスsを初期化します。
    s := []int{1, 2, 3, 4, 5}
    // 整数型のチャネルcを作成します。
    c := make(chan int)
    // goroutineをゴルーチンとして起動します。これにより並行処理が行われます。
    go goroutine(s, c)
    // チャネルcから値を受信し、それを変数xに代入します。
    x := <-c
    // 受信した値（スライスsの合計値）を出力します。
    fmt.Println(x)
}
```

### 解説

1. **goroutine関数**:
    - `goroutine`は整数スライス`[]int`とチャネル`chan int`を引数に取ります。
    - この関数は、スライス内の全ての整数の合計を計算し、その結果をチャネルに送信します。

2. **main関数**:
    - スライス`s`を初期化します。ここでは`{1, 2, 3, 4, 5}`という整数の列です。
    - `make(chan int)`を使って、整数型のチャネル`c`を作成します。
    - `go goroutine(s, c)`を呼び出すことで、`goroutine`関数をゴルーチンとして起動します。これにより、`goroutine`は並行して実行されます。
    - `x := <-c`はチャネル`c`から値を受信します。この操作は、`goroutine`がチャネルに値を送信するまでブロックされます（待機します）。
    - 最後に、受信した値（スライス`s`の合計値）を`fmt.Println(x)`で出力します。

### ゴルーチンとチャネルのポイント

- **ゴルーチン（goroutine）**:
    - ゴルーチンは軽量なスレッドのようなもので、`go`キーワードを使って関数を並行処理として実行します。
    - ゴルーチンは非常に低コストで生成でき、多数のゴルーチンを同時に実行することが可能です。

- **チャネル（channel）**:
    - チャネルはゴルーチン間でデータを受け渡すための通信手段です。
    - チャネルを使うことで、ゴルーチン間の同期を簡単に行うことができます。
    - チャネルにデータを送信する操作は、受信者がデータを受け取るまでブロックされます。同様に、チャネルからデータを受信する操作も、送信者がデータを送るまでブロックされます。
2024/9/2主にITとかセキュリティの記事

新たなランサムウェア「Qilin」が猛威 – Chromeに保存されたパスワードが狙われる！？
https://cybersecurity-park.com/2813/

ストレージのアップデートを検討する際に思い出していただきたい6つの要素(9/1)
https://www.jiji.com/jc/article?k=000000022.000134767&g=prt

ドライバーレス車のAIの安全性を調査、脆弱性を発見(UB researchers probe safety of AI in driverless cars, find vulnerabilities)(8/31)
https://tiisys.com/blog/2024/08/31/post-142829/

ALB のカスタムドメインへの HTTP 接続を HTTPS へリダイレクトする構成を AWS CDK で実装する(8/31)
https://dev.classmethod.jp/articles/implementing-http-to-https-redirect-for-custom-domain-on-alb-using-aws-cdk/

【独自調査】過信が命取り！ランサムウェアなどの攻撃を受けた企業の7割は、自社のセキュリティー対策が十分だと思い込んでいた(8/31)
https://news.yahoo.co.jp/articles/231af73758b58ecd9ab7ce5afcb8325a7bd1e248

偽サイト判別に生成AI　サイバー犯罪捜査、全国で体制強化　警察庁(8/31)
https://news.yahoo.co.jp/articles/44aa44a39815d6f6df0502327280ed8622762ade

iPhoneのSafariとGoogle Chromeの脆弱性のサイバー攻撃への悪用確認(8/31)
https://news.mynavi.jp/techplus/article/20240831-3015475/

「QRコード」の“QR”は何の略？　知っている人はわずか1割(8/31)
https://nordot.app/1202481582190822200

米国 GAO 環境保護庁は上下水道システムに対するサイバーセキュリティリスクに対処するための戦略を早急に立案すべき (2024.08.01)(8/31)
http://maruyama-mitsuhiko.cocolog-nifty.com/security/2024/08/post-8c1e52.html

空港とコックピットのセキュリティがSQLインジェクション攻撃で突破可能だったという指摘(8/30)
https://gigazine.net/news/20240830-bypassing-airport-security-via-sql-injection/

「トロイの木馬に感染しました」のセキュリティ警告がブラウザに表示されたらどうしたらいいの？(8/31)
https://news.yahoo.co.jp/articles/89b85975f940fead730bc3708b84d4d00a5c2268

7割以上の企業がIT予算を昨年度より増加！最も注目されるIT投資分野は「サイバーセキュリティ」【リンクアンドパートナーズ調査】(8/30)
https://manamina.valuesccg.com/articles/3636

「Windows 10“サポート切れ後”も使いたい」を叶える、Microsoft公認の延命策(8/31)
https://techtarget.itmedia.co.jp/tt/news/2408/31/news01.html

デジタル庁が目指す未来のデジタル社会とは何か
https://news.3rd-in.co.jp/article/a5a712a6-66cf-11ef-9624-9ca3ba083d71#gsc.tab=0

ハッシュ関数とハッシュ値(8/31)
https://qiita.com/j_uehara/items/631531c17f93cecb30c2

仮想通貨交換のマウントゴックス破綻10年、元社長に聞く(8/31)
https://www.nikkei.com/article/DGXZQOUB301FX0Q4A830C2000000/

41年前にスティーブ・ジョブズが予見した未来：2024年8月に最も読まれた10本のストーリー(8/31)
https://wired.jp/article/10-most-read-stories-august-2024/

中国 2025年までにIoT分野で30以上の新しい国家標準と業界標準を開発する見込み(8/31)
http://maruyama-mitsuhiko.cocolog-nifty.com/security/2024/08/post-4877de.html
Railsの`serialize`を使ってオブジェクトを簡単に保存・読み込みする方法

#### はじめに

Railsで開発を行う際、モデルの属性としてハッシュや配列などの複雑なデータを扱いたい場面があります。そのような場合、Railsの`serialize`メソッドを使うことで、手軽にオブジェクトをデータベースに保存し、また読み込むことが可能です。この記事では、`serialize`の基本的な使い方と注意点について解説します。

#### `serialize`の基本的な使い方

`serialize`は、モデルの属性をオブジェクトとして保存するためのメソッドです。通常、データベースのカラムは文字列や整数などの単純なデータ型を想定していますが、`serialize`を使用すると、これを簡単に回避できます。

例えば、`preferences`という配列を`User`モデルの属性として保存する場合、以下のように定義します。

```ruby
class User < ApplicationRecord
  serialize :preferences, Array
end
```

この場合、`preferences`はデータベース上ではテキストとして保存されますが、Railsは自動的にシリアライズ（オブジェクトを文字列に変換）とデシリアライズ（文字列をオブジェクトに変換）を行ってくれます。

```ruby
# 配列を保存
user = User.new(preferences: ['dark mode', 'email notifications'])
user.save

# 配列を読み込み
user = User.find(1)
user.preferences
# => ['dark mode', 'email notifications']
```

#### `serialize`を使う上での注意点

- **パフォーマンスの問題**: `serialize`されたデータは一つのテキストとして保存されるため、データベースレベルでのクエリが難しくなります。例えば、`preferences`の中の特定の要素を条件に検索することはできません。そのため、クエリ性能が重要な場合は、`serialize`を使わずに別のテーブルを作成する方が良い場合もあります。

#### `json`形式でのシリアライズ

Rails 5以降では、`serialize`を使う際に`JSON`形式でシリアライズすることも推奨されています。これにより、将来的にデータベースの移行や他のシステムとの互換性が向上します。

```ruby
class User < ApplicationRecord
  serialize :preferences, JSON
end
```

#### おわりに

Railsの`serialize`を使うことで、モデルの属性に柔軟なデータ型を扱えるようになります。ただし、パフォーマンスやデータの扱いには注意が必要です。
2年間遊び呆けた大学生が、エンジニアを目指すまでの道のり

## はじめに
2022年、私は「なんかカッコ良さそう」という理由で情報系の学部に入学しました。当時はコロナ明けで、大学の授業はオンデマンド形式が多く、実際に大学に通うのは週に3〜4日程度でした。入学当初の私は、プログラミングの授業を受けて「まあまあ楽しいな」と感じていましたが、それ以上に自分から進んでプログラミングを学ぼうとは思っていませんでした。何を始めたらいいのかわからない、という言い訳をしていたのです。

## 1年生の過ごし方
1年生の間は、ほとんど遊びに夢中でした。飲食店でのアルバイトを週に3回くらいして、大学の帰りには友達と運動系のサークルやカラオケに行くという平凡な日々を送っていました。将来について真剣に考えることもなく、特に大きな目標もなく過ごしていました。

そんな中、1年生の終わり頃に大学でエンジニアコミュニティのサークルが立ち上がるという話を聞き、「なんとなく面白そうだな」と思い参加することにしました。しかし、サークル活動初日はまさかの飲み会でした。そして春休みに突入。オンラインでも活動していると聞いていたサークルでしたが、結局一度も参加することはありませんでした。

## 2年生と気づき
1年生が終わると、単位はフル単で取得していたものの、「このままでいいのだろうか」と漠然とした不安を感じ始めました。2年生になると、通年で実験があり、レポートに追われる日々が始まりました。バイトに行く余裕もなくなり、気づけばお金も減っていくばかり。しかし、実験や他の授業を通じて仲の良い友達ができたこともあり、大学生活自体はそこそこ楽しいものでした。

2年生も終わり、いよいよ春休み。そこで私はふと「この2年間、自分は何もしていなかったのでは？」と気づきました。そして、これからの就職活動やガクチカについて真剣に考えるようになりました。しかし、その時点で「ガクチカ」に書けるようなエピソードが何もないことに気づき、焦りを感じました。

## エンジニアを目指す決意
まずはYouTubeでIT関連の情報を調べてみることにしました。職業についての動画をいくつか見ているうちに、「エンジニア」という職業に強く惹かれました。振り返ってみると、自分は昔からモノづくりが好きだったことを思い出し、「これだ！」と思いました。そして、エンジニアという職業が自分にはピッタリだと感じ、エンジニアになることを決意しました。それに、エンジニアってなんだかカッコ良さそうだったのも大きな理由です。

こうして、私はついに自分のエンジンをかけ始めました。これからは本気でエンジニアを目指して、学びと挑戦の日々を過ごしていくことを決意しました。

## おわりに
振り返ってみると、遊び呆けた2年間は決して無駄ではありませんでした。その時間があったからこそ、自分の進むべき道に気づき、エンジニアという夢を持つことができたのです。この記事を通して、同じように悩んでいる学生や、何かに迷っている人たちに少しでも勇気を与えられたら嬉しいです。
AWS-S3のSSL認証エラーのデバッグ

## この記事の内容
ストレージとしてS3を使おうと思ったのに、保存ができなかったので調べつつデバッグしました。
備忘録として対応内容を残します。

### 環境
- Windows11にUbuntsを入れて実行
- WSL2を使用

## エラーの詳細

### エラーが発生する状況
- article/id/edit　の画面で画像ファイルを添付し、保存ボタンを押すタイミングで発生
- 保存先のストレージを`:local`から`:amazon`に変更後に発現

### エラーの内容
```
Seahorse::Client::NetworkingError - SSL_connect returned=1 errno=0 state=error: certificate verify failed (unable to get local issuer certificate):
  app/controllers/articles_controller.rb:33:in `update'
```

- 下記はchatGPTにエラーメッセージの内容を確認した際の返答
>Seahorse::Client::NetworkingError - SSL_connect は、AWS SDK for Rubyを使用している際に発生するネットワーク関連のエラーです。具体的には、SSL/TLS接続を確立しようとした際に失敗したことを示しています。

## エラーに対する仮説

### エラーについて調べたこと
1. chatGPTにエラーの原因と解決策を確認
2. "S3 Seahorse::Client::NetworkingError - SSL_connect" でGoogle検索し以下の公式チュートリアルを確認
  - [AWS SDK for Ruby の Hello World チュートリアル](https://docs.aws.amazon.com/ja_jp/sdk-for-ruby/v3/developer-guide/hello.html#aws-ruby-sdk-quick-start-windows)

### エラーが発生しうる状況
- SSL証明書が最新の状態になっていないとき
- 証明書バンドルが適切にインストールできていないとき
- Windowsにおいて、公式チュートリアルにある設定をしていないとき
- プロキシサーバーやファイアウォールなどの設定に問題があるとき
- Access Key ID や Secret Access Key の設定ミスではない
  - 上記の場合は別のエラーメッセージが出る

## デバックとして実行したこと
1.SSL証明書を最新の状態に更新する
  - 実施したこと：
    下記のコマンドをUbuntsのルートディレクトリで実行
    ```
    sudo apt-get update
    sudo apt-get install --reinstall ca-certificates
    ```

  - 結果：
    状況が変わらない

2.aws-sdk-s3が適切にインストールできているか確認

  - 実施したこと：
    gemfileの記述とgemfile.lockの記述を確認

  - 結果：
    gemfile.lockに下記の記述を確認。適切にインストールされていると判断
    ```
    aws-eventstream (1.3.0)
    aws-partitions (1.968.0)
    aws-sdk-core (3.201.5)
      aws-eventstream (~> 1, >= 1.3.0)
      aws-partitions (~> 1, >= 1.651.0)
      aws-sigv4 (~> 1.9)
      jmespath (~> 1, >= 1.6.1)
    aws-sdk-kms (1.88.0)
      aws-sdk-core (~> 3, >= 3.201.0)
      aws-sigv4 (~> 1.5)
    aws-sdk-s3 (1.159.0)
      aws-sdk-core (~> 3, >= 3.201.0)
      aws-sdk-kms (~> 1)
      aws-sigv4 (~> 1.5)
    aws-sigv4 (1.9.1)
      aws-eventstream (~> 1, >= 1.0.2)
    ```

3. 公式チュートリアルに記載のある設定を実施
  - 実施したこと：
    config/initializer内に`aws_sdk.rb`ファイルを作成し、以下を記述
    ```
    Aws.use_bundled_cert!
    ```
  - 結果：`uninitialized constant Aws (NameError)`が出る
  - 追加で実施したこと：`aws_sdk.rb`ファイルの先頭に以下を記述
    ```
    require 'aws-sdk-s3'
    ```
  - 結果：画像の保存、表示が可能に！
(ABC369)C - Count Arithmetic Subarrays

## はじめに
8/31開催のABC369のC問題です。
私の解答は実行時間制限超過になってしまったので、
解説のアルゴリズムを覗いてみます。

https://atcoder.jp/contests/abc369/tasks/abc369_c

## 自分の解答
```py:ABC369_C.py (TLE)
def count_tohsa(N, arr):
  cnt = 0
  for l in range(N):
    for r in range(l, N):
      if r - l + 1 < 3:
        cnt += 1
      else:
        is_tohsa = True
        diff = arr[l + 1] - arr[l]
        for i in range(l + 2, r + 1):
          if arr[i] - arr[i - 1] != diff:
            is_tohsa = False
            break # 等差じゃなくなったら以降ループやめ
        if is_tohsa:
          cnt += 1
  return cnt

N = int(input())
nums = list(map(int, input().split()))

ans = count_tohsa(N, nums)

print(ans)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/a6c81759-9989-c846-9c46-0ac4c81443f4.png)

引数となる数列$A$の個数は、$0 \leq A_i \leq 10^9$ なので、計算量2~3重ループだと厳しいか。

## 考え方

### 公式解説

https://atcoder.jp/contests/abc369/editorial/10834

### 解説を読んでの理解

- l = r のときは確実に等差数列を作るので、 n を加算する
- l < r のときについて以下のように考える
    Aの差分配列Bを作成する。
    たとえば、
    $$A = \left(87,42,64,86,72,58,44, 30\right)$$だと、差分配列Bは
    $$B = \left(45, 22, 22, 14, 14, 14, 14\right)$$このとき、Aの部分数列$A_l \cdots A_r$が等差数列になるということは、
    $$B_l = B_{l+1} = \cdots = B_{r} $$ということになり、この問題はこの組(l, r)がいくつあるのかを求める問題になる
- まずは数列$B$をランレングス圧縮して配列$B_{runlen}$をつくる。
    上記例だと$B_{runlen}=[(45,1),(22,2),(14,4)]$
- 問題文に合うようにそれぞれの組で取れる等差数列の組み合わせは、
    - $(45,1)$は$45$が1つなので、1通り
    - $(22,2)$は$22$が2つなので、$22_a$,$22_b$と識別すると
      　  数字1つの場合$(22_a)$,$(22_b)$の2通り、数字2つの場合$(22_a,22_b)$の1通りで計3通り
    - $(14,4)$は数字1つの場合4通り、 2つの場合3通り、3つの場合2通り、4つの場合1通りなので、$ 4 + 3 + 2 + 1 $の 10通りになる
- 配列$B_{runlen}$の整数の組を$(C_1,D_1),(C_2,D_2),...,(C_k,D_k)$としたとき、$C_i$を$D_i$個つなげた列を$f(i)$とする
- $B$は$f(1),f(2),...,f(k)$を順につなげた列となり、$f(i)$で取れる等差数列の数は、$1+...+D_i$なので$\frac{D_i(D_i+1)}{2}$となり、求める$f(1)$～$f(k)$までの合計は$$\sum_{i=1}^{k}\frac{D_i(D_i+1)}{2}$$となる
  
## 回答例
```py:ABC369_C
def run_length_compression(B):
    # B が空リストの場合、空のリストを返す
    if not B:
      return []
    
    # ランレングス圧縮の結果を保持するリスト
    compressed = []
  
    # 最初の要素を設定
    current_value = B[0]
    count = 1
    
    # B の2番目の要素からループを開始
    for i in range(1, len(B)):
      if B[i] == current_value:
          # 連続して同じ値が現れた場合、カウントを増加
          count += 1
      else:
          # 違う値が現れた場合、ペア (値, カウント) を追加し、カウントをリセット
          compressed.append((current_value, count))
          current_value = B[i]
          count = 1
    
    # 最後の値のペアを追加
    compressed.append((current_value, count))
    
    return compressed

def sum_count(d):
    return d * (d + 1) // 2

N = int(input())
A = list(map(int, input().split()))
B = []

for i in range(N - 1):
  B.append(A[i + 1] - A[i])

ans = N # l=rの分

# ランレングス圧縮
compressed_B = run_length_compression(B)

for value, count in compressed_B:
    ans += sum_count(count)
    
print(ans)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296985/fd095fd9-4a06-f5a8-7b4b-bf11cda78f10.png)

ソースが長くなってしまった。しかし、実行時間制限内におわりました。
自宅のWi-Fi（プロバイダー）を変更したら、会社のVPNにリモートアクセスできなくなった件

リモートワークにおいて、安定したインターネット接続は非常に重要です。特に、会社のネットワークにVPNを利用して接続する必要がある場合、ネットワーク設定やプロバイダーの選択が大きな影響を与えます。今回、私が実際に経験したプロバイダー変更によるVPN接続の問題について、時系列順にその背景、問題点、そして解決策を紹介します。

## ネットワークの基本知識
まず、今回の問題を理解するために、いくつかの基本的な用語を説明します。

#### IPv4とIPv6: 
IPv4（インターネットプロトコルバージョン4）は、従来のインターネットアドレス方式で、32ビットのアドレス空間を持ちます。IPv6は新しいアドレス方式で、128ビットのアドレス空間を持ち、より多くのデバイスをサポートできます。
#### デュアルスタック:
これは、IPv4とIPv6の両方を同時に利用できる方式です。これにより、IPv4しかサポートしていない古い機器やサービスと、IPv6を利用する新しい機器やサービスの両方に対応できます。
#### IPv4 over IPv6:
IPv6ネットワークを通じて、IPv4のパケットをカプセル化して送信する技術です。IPv6ネットワーク上でIPv4を利用する場合に使用されますが、ネイティブなIPv4接続を必要とするサービスには不向きです。

## 背景
### 私の環境と変更点
・以前のプロバイダー: SoftBank光（IPv4/IPv6デュアルスタック）
・現在のプロバイダー: andline（ドコモ光、IPv6 over IPv4方式）
・会社のルーター: IPv4のみ対応
・使用デバイス: Mac
・目的: 自宅から会社のVPNを使用してフルリモートワークを行う

## 問題の発端と初期対応
#### 問題の発端
プロバイダーをSoftBank光（IPv4/IPv6デュアルスタック）からandline（ドコモ光、IPv6 over IPv4方式）に変更したところ、会社のVPNルーター（IPv4のみ対応）に接続できなくなりました。問題は、andlineの接続方式が「IPv4 over IPv6」であるため、VPNがネイティブなIPv4を必要とすることが原因と考えました。

#### 試したこと
・テザリングでの検証
スマホのモバイルデータ通信を使い、PCでテザリングを介してVPN接続を試みました。この時点では、IPv6を使用しての接続でした。
#### わかったこと
テザリングの設定による成功: スマホのモバイルデータ通信を使い、Wi-FiよりもVPN接続を優先するように設定したところ、VPN接続が成功しました。ただし、自宅のWi-Fiを利用した場合は接続ができないままでした。

#### 可能性として考えたこと
IPv4のみの必要性: 会社のVPNはネイティブなIPv4接続のみを許容しているため、IPv6 over IPv4方式（IPv4 over IPv6）では接続ができないのではないかと推測しました。

## 対応策と再検証
#### 対応策
・andlineに設定変更を依頼
andlineに連絡し、回線をIPv6からIPv4に戻すよう依頼しました。

#### 再検証と結果
IPv4での再検証: IPv4に戻した設定で再度Wi-Fiを利用し、VPN接続を試みたところ、無事に接続が成功しました。しかし、回線速度は遅くなりました。特に12時〜14時半の間は、ほぼ仕事にならないレベルの遅さでした。

#### 数日間IPv4で仕事
実際の使用感: IPv4設定のままで数日間仕事を続けましたが、昼間の時間帯は極端に遅くなり、仕事に支障をきたす状態が続きました。

## さらなる調査と販売店での対応
#### 再調査
ドコモ光の公式情報確認: 調査の結果、ドコモ光の公式サイトにはデュアルスタックを提供していると記載されていました。しかし、これはおそらく過去の契約者に対する情報であり、現行の新規契約者には適用されないようです。
#### 問い合わせ
andlineのサポートに確認: 現在では、「IPv4 over IPv6」しか提供していないことがandlineから確認されました。
#### 再々調査
他のプロバイダーの確認: ドコモ光の別のプロバイダーでもデュアルスタックが利用できる可能性があることが分かりました。
#### 販売店での対応
別プロバイダーへの変更依頼: ドコモ光の販売店に別のプロバイダーに変更したい旨を伝えたところ、ドコモ光自体が2022年3月末でデュアルスタックのサービス提供を終了していることが判明しました。

## 結論と最終解決策
#### 結論
SoftBank光に戻す他なし: ドコモ光ではデュアルスタック方式の利用が不可能であるため、再びSoftBank光に戻すことにしました。現在、デュアルスタック方式を採用しているプロバイダーはYahoo! BB（SoftBank光）だけとのことでした。
#### 最終解決策
SoftBank光との再契約: SoftBank光と再契約することで、リモートワークに必要な安定したネットワーク環境を確保することにしました。
#### 違約金
かかってしまう違約金について、ドコモは負担してくれませんでしたが、softbankはキャッシュバックという形で半年後に返金してくれます。この辺の対応の差もかなりあるなと思いました。実際、サイトに書いてある内容と実際のサービスに乖離がある点を指摘し、他プロバイダーに契約を移る際の違約金を免除する対応をして欲しいと依頼したところ、できないと回答されました。なぜできないのか問うたところ、他の人にはやっていないからだそう。まあ特別扱いできないのは理解できますが、ここまでサービス品質が悪いと流石にそちらに落ち度があるのでは？と個人的には思ってしまいました。（実際あと1日早くプロバイダーを移らないといけないことが確定できていれば、クーリングオフが効いたので）

# まとめ
今回の経験から、リモートワークで会社のVPNを利用する際には、プロバイダー選びが非常に重要であることを実感しました。特に、ネイティブなIPv4接続が必要な場合、現在もデュアルスタック方式を提供しているSoftBank光のYahoo! BBをお勧めします。

#### 教訓
今回の対応全般、サービス品質やややこしや等を含め、できる限りドコモ系列には関わりたくないなと思いました。スタッフの知識が取ってつけた私の調査した知識より劣っていることが多かったことも一つの原因です。実際、softbankのスタッフはドコモのスタッフに比べ、他社知識や通信の知識が多かったです。（全員代理店の人だとは思いますが）
GMKtec Nucbox K6の分解とグリスの塗りなおし（7840HS, ミニPC分解）

# 追記(2024/9/23)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242971/fc3a578a-7e1b-9f8f-cb10-2f1b24a88f9d.png)

+ メモリ周りの確認。HWiNFOを利用して、ゲーム中のメモリクロックを確認した。
+ メモリはCrucial DDR5 5600MHzが２枚。どうもDDR5 5600MHzメモリは１枚でデュアル接続（2800MHz x 2）らしく、メモリ２枚で2800MHzのクワッドチャネルになるらしい。
+ ゲーム中で2800MHzを長時間維持している。
+ 上蓋をあけて空冷することを推奨しているコメントもあるが、初期の状態で十分冷却できているらしい。
+ NVMeにはヒートシンクが付属しており、温度は40-45度程度。
+ メモリの温度はシステムから計測できなかった。

# やったこと
最近の一部のRyzen CPUはRyzen AIなるものを搭載しており、面白そうだったので、安い中華ミニPCを購入しました。しかしながら、購入時点の状態でCPUのサーマルスロットリングに当たってしまう状態だったため、グリスの塗りなおしを行いました。その結果、温度が下がり、サーマルスロットリングに当たらなくなったので報告します。ミニPCで同様の症状をお持ちの方の参考になれば幸いです。

![IMG20240923011617.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242971/fb39db9c-d232-a77f-6ef8-92dd71d4e0ec.jpeg)

# 初期症状
+ GMKtec Nucbox K6 購入。以下構成。
    + Ryzen 7 7840HS, 780M
    + DDR5 5600MHz 32GB(16GBx2)
    + PCIe 4.0 SSD 1TB
    + Wifi + Bluetooth
+ Windows11クリーンインストール
+ ファームウェアとドライバの更新 (https://www.gmktec.com/pages/firmware-update)
+ AMD Software: Adrenalin Editionインストール
+ Cinebench R23実行結果。 約13万点、 CPUクロックの低下(3.8GHz)、 CPU温度92度（Adrenalinで確認）
+ また、負荷の高いソフトウェアが強制終了するなど。

# 分解とCPUグリスの塗り替え。
以下注意点。

+ マザボは筐体にねじ止めされてるだけだが、引き抜くときに筐体の爪にCPUクーラーの放熱板が当たるため、力技で筐体（プラスチック）を変形させてマザボを引き抜く必要がある。
+ CPUクーラーのねじ止めは面倒な場所にある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242971/0e98627b-f2fd-6c2f-4936-2560a51b718f.png)

+ CPUファンとヒートシンクが粘着テープで引っ付いている一部を剥がせば、CPUクーラーのねじにアクセスできる。
+ 奥の2本のねじを外すために、ピンセットか磁化されたドライバーがあった方がよい。

![IMG20240829002249.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242971/c2e6ce7d-cd2d-8a73-4595-3c37f79278b2.jpeg)

+ 画像は外してすぐの状態。グリスにかなりのムラがある。グリスの塗りなおし。
+ 症状の改善。CPU温度はCinebenchで82度程度で安定、CPUクロックの低下なし、ただし、BIOSにてCPU設定をBalanceからPerformanceに変更した場合は92度になり、制限がかかる模様。
+ Cinebench　R23の結果、Balance:15.5万、Performance:16.3万。PerformanceではCPU最大消費電力62W、サーマルスロットリングにより、定常消費電力58W。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242971/9d74f762-36bd-fb66-10d8-0e6004bd0f00.png)

# 気付き
ヒートシンクとファンの重さを４つのステンレス板バネだけで支えているのは大丈夫なのか。

# 便利なもの - AMD Software: Adrenalin Edition
状態の確認にかなり便利です。内臓GPUの設定にも使います。ゲーム中のCPU温度やGPUの状態、FPSの確認はオーバーレイを使えば簡単にできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242971/916d9a45-4f03-d1dd-c081-5fe7c9ba290f.png)

# ゲーム
比較的軽量なゲームなら問題ないようです。GTX1650と同等などと言われていますが、GTX1650の方が安定しているように思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242971/30c1b927-629c-a383-b97b-d7a91dd9b0c4.png)

# 今後
AIチップ搭載らしいのでその確認がしたい。
LinuxOS(Ubuntu)上でNW設定変更した備忘録(NW接続名変更)

# 前置き

本記事はLinuxを操作している際にNW設定を変更する際の備忘録です
使用するディストリビューションはUbuntu22.04です

# NW接続名変更
NW設定を確認する際にnmcliコマンドを使って確認しています。
```
$ nmcli connection show
```
```
出力結果

NAME        UUID                                  TYPE      DEVICE 
有線接続 1  18062e55-6ee4-364e-8d8f-2bbf6605f751  ethernet  ens33  
```
**NAME**が日本語で設定されています(VM生成時のデフォルト)
この表記を英字に変更します。
今回は **"wired"** に変更します
```
$ nmcli connection modify 有線接続\ 1 connection.id "wired"
```
```
設定変更確認

NAME   UUID                                  TYPE      DEVICE 
wired  18062e55-6ee4-364e-8d8f-2bbf6605f751  ethernet  ens33  
```

変更できたことを確認できました。

# NW接続名変更2

NAMEが不明であったり重複していたりなどして、設定変更がうまくいかない時はUUIDを使って変更が可能です！

:::note info
**UUIDって何？**

UUID (Universally Unique Identifier) とは、ネットワーク接続やその他のリソースを一意に識別するために使用される128ビットの識別子です。UUIDは、非常に高い確率で重複しない一意の値を生成するため、システム内のリソースを確実に識別することができます。
:::

UUIDを確認する(先程のコマンドと同じ)
```
$ nmcli connection show
```
```
出力結果

NAME   UUID                                  TYPE      DEVICE 
wired  18062e55-6ee4-364e-8d8f-2bbf6605f751  ethernet  ens33  
```
UUIDを使ってNAMEを **"new-wired"** へ変更する
```
nmcli connection modify uuid 18062e55-6ee4-364e-8d8f-2bbf6605f751 connection.id "new-wired"
```

```
設定変更確認

NAME       UUID                                  TYPE      DEVICE 
new-wired  18062e55-6ee4-364e-8d8f-2bbf6605f751  ethernet  ens33  
```

**蛇足**
NW設定関連の記事を他にも掲載しています。よければ参考にどうぞ！

https://qiita.com/tacky0127/items/75c65dee17991e048a4c

https://qiita.com/tacky0127/items/704ae1e171def56677ab
Railsアプリにおける複数のRead replicaを利用した負荷分散を自作Resolverで実現する

Railsでは6.0から複数データベースへの対応を開始しました。
primaryと単一replicaのへの接続が実装されており、GETリクエストをreplicaで処理することなどで負荷分散を行うことができます。
しかし、複数のreplicaを利用しての負荷分散は実装されていません。

https://railsguides.jp/active_record_multiple_databases.html#replica%E3%81%AE%E8%B2%A0%E8%8D%B7%E5%88%86%E6%95%A3

とはいえ、ちょっと工夫をすると簡単に行うことができるので実際に作成してみましょう。

:::note info
※ 以下の文章は [Active Record の複数データベース対応](https://railsguides.jp/active_record_multiple_databases.html) を一度読んでいただいているのが前提になります
:::

## 以下のような手順で行います。

- 複数のreplicaの定義
- モデルとの関連付け
- resolverの定義


## 複数のreplicaの定義

- `config/database.yml` に primary と複数の replica に対するデータベース接続の定義を記述します
    - 今回は既に replica が一つある状態から replica は二つに変更します
- development環境で定義します

```diff_yaml:config/database.yml
development:
  primary:
    database: my_database
    adapter: mysql2
  replica:
    database: my_database_replica
    adapter: mysql2
+ secondary_replica:
+   database: my_database_secondary_replica
+   adapter: mysql2
```

## モデルとの関連付け

- 先ほど定義したデータベース接続の定義を使って、各データベースに接続できるように定義します
    - 新しく secondary_replica という role を作成して、呼び出せるようにします

```diff_ruby:app/models/application_record.rb
class ApplicationRecord < ActiveRecord::Base
  # 中略
- connects_to database: { writing: :primary, reading: :replica }
+ connects_to database: { writing: :primary, reading: :replica, secondary_reading: :secondary_replica }
end
```

## 自作Resolverを作成する

- [ActiveRecord::Middleware::DatabaseSelector::Resolver](https://github.com/rails/rails/blob/main/activerecord/lib/active_record/middleware/database_selector/resolver.rb) を継承した自作Resolverを作成します
- primaryを利用しないGETリクエストの半分をreplica、もう半分をsencondary_replicaに行わせる場合、`application_record.rb`のrole定義を利用して以下のように記述できます
    - replicaで処理するところをsecondary_replicaを使うように上書きしています
- 今回はrand関数で分散していますが、ここを工夫すると負荷を自在に変えられたりできるようになります

```ruby:lib/database_resolver/secondary_replica_resolver.rb
module DatabaseSelector
  class SecondaryReplicaResolver < ActiveRecord::Middleware::DatabaseSelector::Resolver
    private

    # @override {::ActiveRecord::Middleware::DatabaseSelector::Resolver#read_from_replica}
    def read_from_replica(&blk)
      if rand(2).eql?(0)
        ActiveRecord::Base.connected_to(role: :secondary_reading, prevent_writes: true) do
          instrumenter.instrument('database_selector.active_record.read_from_secondary_replica', &blk)
        end
      else
        super
      end
    end
  end
end
```

## 自作Resolverを利用するように指定する

- 自作Resolverを扱うようにResolverを変更
    - これにより、replicaとsecondary_replicaのリクエスト負荷が半々になる

```diff_ruby:config/initializers/multi_db.rb
require Rails.root.join('lib', 'database_selector', 'secondary_replica_resolver')

Rails.application.configure do
  config.active_record.database_selector = { delay: 2.seconds }
- config.active_record.database_resolver = ActiveRecord::Middleware::DatabaseSelector::Resolver
+ config.active_record.database_resolver = DatabaseSelector::SecondaryReplicaResolver
  config.active_record.database_resolver_context = ActiveRecord::Middleware::DatabaseSelector::Resolver::Session
end
```

## まとめ

自作Resolverが行えることは多岐にわたり、その一つとして簡単に複数replicaを活用した負荷分散は実現できます。
他にもデータベースの設定に合わせて様々な構成を試せるので、ぜひ要件に対して適切なResolverを作成してみてください。
①Laravelのクエリビルダー

## クエリビルダーとは
SQLの命令文（クエリ）を作成して実行するための機能

## やりたいこと
・各月ごとに投稿されたブログ数の集計

まず

```
$blogCounts = DB::table('blogs')　
```
Laravelのクエリビルダーを使用してblogsテーブルに対してクエリを構築します

```
->select(
    DB::raw("DATE_FORMAT(created_at, '%Y-%m') as month"),
    DB::raw("COUNT(*) as blog_count")
    )
```
DB::raw 生のSQLを直接クエリへ組み込むために使用します
created_atを'2024-09-01 12:34:56'→'2024-09'として、monthというエイリアスにし、
その月のブログ投稿数をカウントして、blog_countというエイリアスにします

※DATE_FORMAT 関数を使用すると引数に指定した日付を
指定のフォーマットで整形した文字列にして取得することができます

```
->groupBy(DB::raw("DATE_FORMAT(created_at, '%Y-%m')"))
->orderBy('month', 'desc')
->get();
```
月ごとにグループ化をして、その結果を月別に降順で表示します

```
$blogCounts = DB::table('blogs')
            ->select(
                DB::raw("DATE_FORMAT(created_at, '%Y-%m') as month"),
                DB::raw("COUNT(*) as blog_count")
            )
            ->groupBy(DB::raw("DATE_FORMAT(created_at, '%Y-%m')"))
            ->orderBy('month', 'desc')
            ->get();
```
このクエリを実行すると
```
[
 {
  "month": "2024-09",
  "blog_count": 10
  },
 {
  "month": "2024-08",
  "blog_count": 7
  },
]
```
こんな感じでデータを取得することができました
Tableau Prepの基本をざっくりまとめてみた

## はじめに
今回は、現場で使用しているTableau Prepというツールについて、何ができるか、何ができないかのかをざっくりまとめました。

## Tableau Prepとは
Tableau Prepは、Salseforceが提供している、Tableau製品群の一つです。Tableauには、Tableau Desktop、Tableau Cloud、Tableau Prepなどの種類があります。その中でTableau Prepは、データ分析の前段階としてデータの加工を行うためのツールです。

以下のような形で、データの結合やクレンジングなどの処理を行います。
![スクリーンショット 2024-09-01 23.44.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486510/3f72410b-f837-2d94-0cef-ce7f9ba1ce3c.png)
> 画像の引用元：https://www.tableau.com/ja-jp/products/prep/download

## できること
Tableau Prepは、複数のデータソースに同時に接続し、取得したデータを結合・クレンジングしたりして、CSVやExcelなどの形式に出力することができます。

#### 接続可能なデータソース

- MySQL
- Googleスプレッドシート
- CSV
- Excelなど

#### クレンジング時に主に使用する機能

- 空白の除去
- フィルタリング
- 関数の適用
- 集計
- 結合
- ユニオンなど

#### 出力可能な形式

- CSV
- Excel
- Hyper（Tableau独自の形式）

## できないこと
- データを分析に適した状態に整えるためのツールであるため、グラフの作成はできません
- 変数のような概念はありますが、加工したデータを変数に代入することはできません
- 独自の関数を作成することはできません

## 注意点
Tableau Prepはプログラムのロジックを作成する感覚に似ており、直感的に処理を作成すると、処理が複雑化し、後で見直す際にロジックの理解に時間がかかることがあります。加えて、他の人に引き継ぐ際にも、複雑さが問題になることがあります。
また、大量のデータを扱う場合、処理が重くなることがあります。

## さいごに
ここまで、Tableau Prepについてざっくりまとめました。内容に不備や誤りなどあるかもしれませんので、その際はご指摘いただけると幸いです。


## 参考
https://www.tableau.com/ja-jp/products/prep
Linux (Debianベース) に Firefox Developer Edition をインストールする

## リポジトリの追加
公式サイトを参考に設定をする
一度追加すればaptコマンドで管理できるので楽
同様の方法を用いてNightlyもインストール可能

https://support.mozilla.org/ja/kb/install-firefox-linux#w_debian-be-sunodeisutoribiyu-shiyonni-firefox-no-deb-patsuke-ziwoinsuto-rusuru

## インストール
aptを用いてインストールする
・firefox本体
```
$ sudo apt install firefox-devedition -y
```
・日本語化パッケージ
```
$ sudo apt install firefox-devedition-l10n-ja -y
```

Nightlyの場合は
・firefox本体
```
$ sudo apt install firefox-nightly -y
```
・日本語化パッケージ
```
$ sudo apt install firefox-nightly-l10n-ja -y
```

これで無事にインストールできたと思います。

それでは
Galaxy Watch 7 急速充電をする方法

Galaxy Watch 7はサムスンが製造するスマートウォッチです。
https://www.samsung.com/jp/watches/galaxy-watch/galaxy-watch7-44mm-green-bluetooth-sm-l310nzgjxjp/

Galaxy Watch 7は専用の充電器のみ充電可能としているため、備忘録として残しておきます。
また、このドキュメントでは、Amazon等で見かけるサードパーティ製品には言及しません。

# 充電に関して読むべきドキュメント
- https://www.samsung.com/jp/support/mobile-devices/how-to-recharge-in-galaxy-watch/
- https://www.samsung.com/jp/support/mobile-devices/all-about-the-wireless-charging-and-wireless-power-sharing-features-on-the-samsung-galaxy-watch-ultra-and-watch7/

# 急速充電の条件 (上記公式ドキュメント引用)
- Galaxy Watch5 以降発売した Watch シリーズで急速充電をすることが可能です。（Watch FE は除く）
- 付属している専用の充電パッドと USB-C ケーブル、PD 充電器（5V/2A）の併用することで利用可能です。

# 急速充電に対応した充電器
- 付属しているワイヤレス充電器 (EP-OL300)

# Galaxy Watch 7 に対応した充電器
サポートに確認したところ、下記製品もGalaxy Watch 7対応製品として挙げられました。ただし、急速充電まで対応しているかは未確認のため、ご存じの方はコメントより教えてください。
- 25W Wireless Battery Pack 10,000mAh（EB-U2510）https://www.samsung.com/jp/mobile-accessories/wireless-battery-pack-10-000mah-beige-eb-u2510xuegjp/

# 急速充電非対応の製品
直販では取り扱いを終了しているようですが、Amazonには充電パッドの取り扱いがあります。
ただし、急速充電非対応として例に挙げられているため注意されたい。
https://www.amazon.co.jp/dp/B08L8YRDYX

# 付属しているワイヤレス充電器 (EP-OL300)
- "部品"としての調達になるため、市販されていない
- Samsungカスタマーサポートセンター 0120-363-905 (9時～20時 年中無休) へ電話注文する
- 本体5,500円 (税込・クレジットカード可とのこと) + 送料 (現金のみ) + 代引き手数料 (330円・現金のみ)
- 佐川急便による代引きでの支払い
- 納期は1週間〜10日間ほど。月初3営業日程は10日？
- 日時指定は可能
- 購入にあたり、購入理由・(日本向けのモデルか確認するために) 技適マークの確認・モデル名・製造番号が確認された
- 注文後の顧客都合による返品・返金はしないとのこと


# 25W Wireless Battery Pack 10,000mAh（EB-U2510）
- https://www.samsung.com/jp/mobile-accessories/wireless-battery-pack-10-000mah-beige-eb-u2510xuegjp/ から購入可能。
- https://www.samsung.com/jp/explore/news/galaxy-battery-pack-20000mah/ によると、直販限定としているとのこと。

# 試したが動作しなかった充電方法
- Pixel 6 ワイヤレスバッテリーシェア
- qi対応充電器 (Anker Power Wave 7.5 Stand)
【Next.js】Local Imagesの場合のsrcの記述方法【Imageコンポーネント】


## Local Images

`.jpg`, `.png`, `.webp`のいずれかのファイルを`import`する。

```jsx
import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
    />
  )
}

```

上記の方法で　`src` を記述すると画像の `width`と `height` は自動的に決定されます。
また、`blurDataURL` も自動で設定され、 `placeholder` を `blur` に設定するだけでプレースホルダーが表示されるようになります。

以下は `placeholder`　を　`blur`に設定した場合のデモページです。

https://image-component.nextjs.gallery/placeholder

## 参考

https://nextjs.org/docs/app/building-your-application/optimizing/images
E2Eテスト自動化の段階

# 概要・注意
E2Eのテスト実行方法に色々グラデーションがあると思いまとめてみました。
※こちらは仕様保証するテストの自動化についての話で、テストファーストなテスト自動化の話ではなく前段階の話なのでご注意ください。

- メリット
    - 準備不要で誰でも行うことができる

# E2E実現の方法
## ①手動動作確認
自身のクライアントPC（仕事で使っているノートPCなど）のブラウザで動作確認をする。

## ②記録されたテスト再現
SeleniumIDEなどを使って操作を記録し、記録した動作確認を再現できるようにする

- メリット
    - 挙動がプログラムによって規定されるので、人に依らない

## ③スクリプトベースの自動化
Pythonなどでブラウザ自動操作ツールのSeleniumなどを使ってブラウザを動かす

- メリット
    - プログラム化ゆえのメリットを享受できる
        - SeleniumIDEなどの記録ソフトで記録できないこともテスト化可能
        - コードの共通化も可能
    - 狭義のE2Eと離れるが、やろうと思えば操作の結果DBのデータがどう変わったかも確認できる
- 制約
    - Pythonなどプログラミング言語を書ける必要がある（②の記録からコードを生成することは可能）

## ④データ独立の自動化
テスト用のDBをテスト用に持ち、各テストのたびに初期化・クリーンアップを行う

- メリット
    - それぞれのテストが独立するため、他のテスト結果の干渉を受けない
- 制約
    - ③の制約
    - 初期化・クリーンアップのコードを書く必要がある
    - テストを行いたいシステムの中に、そのシステムと同じプログラミング言語でテストコードを書く必要がある
        - DBのセットアップとクリーンアップを行うのに、DBのスキーマを必要とする
        - そのシステムが設定したテスト用DBで動いている必要がある

## ⑤完全自動化
GUIが使えないサーバでも動くようヘッドレスで起動させ、システムのエコシステムにブラウザを取り込み、実行する環境に依存しないテスト環境を実現する。

- メリット
    - サーバ上で実行できるので、誰かのPCでしか動かないという制約にとらわれない
    - CIツールでも実行可能なため、人手ではありえない、変更のたびに大量の回帰テストを行うことも可能となる
- 制約
    - ④の制約
    - ブラウザをシステムで持つ
    - GUIを持たないブラウザでも起動できるようにヘッドレスで動かせるようにする

# 各方法での特徴比較

|段階|再現性|期待値確認方法|テスト後のデータ|起動ブラウザ|
|--|--|--|--|--|
|①手動動作確認|実施者の塩梅で粒度が揺れる|目視|自身で手動で消す（消す作業までシナリオに組み込むことは可能）|ローカルクライアントPCのブラウザ|
|②記録されたテスト再現|コードが同じなら同じテストが保証される|同上|同上|同上|
|③スクリプトベースの自動化|同上|プログラム内でチェック|同上|同上|
|④データ独立の自動化|同上|同上|テストごとに初期化される|同上|
|⑤完全自動化|同上|同上|同上|任意のPCのブラウザ（サーバであろうとローカルクライアントPCであろうと問わない）|
UbuntuにZedエディタをインストールしてみる

## はじめに
基本的にコーディングに使っているエディタはNeoVimかVSCodeを使っていましたが、「思考のスピードでコーディングをする」というコンセプトの`Zed`というエディタを使ってみようと思い立ちました。
インストール方法から、使い方等備忘的に記していこうと思います。

## Zedとは
[公式サイト](https://zed.dev/)より
「Zedは人とAIの高性能なコラボレーションを実現するために設計された次世代コードエディタです。」
```
Zed is a next-generation code editor designed for high-performance collaboration with humans and AI.
```

## インストール
- os: Ubuntu 24.04

```bash
curl -f https://zed.dev/install.sh | sh
```

## 設定
### Vim mode
Zedを開いて下記のように`Enable vim mode`にチェックを入れます

![Screenshot from 2024-09-01 22-06-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693040/5b3294d8-2ac3-0ff3-5bb3-e3062d4f756a.png)

### theme…VSCode Monokai Charcoal
下記Themeの設定方法です。
1. 画面右上のSign inを押下します。
1. `Extensions`を押下します。
1. 検索バーに「monokai」を入力します。
1. 「VScode Monokai Charcoal」のインストールボタンを押下します。
1. `Welcome`画面で`Choose a theme`を押下します。
1. 「Monokai Charcoal（Gray）」押下します。

## 使い方
使い始めなので、個人的な使い方が確立したら追記や編集をしていきたいと思います。

|動作|ショートカットキー|
|---|---|
|プロジェクトの起動|Ctrl+o|
|Terminalの起動|Ctrl+`|

## まとめ
以上、UbuntuにZedエディタのインストール方法とちょっとした設定、使い方をまとめました。

少し使ってみて感想等も追記していきたいと思います。

読んでいただきありがとうございました。
エンジニアがUIに迷った時に使えるshadcn/uiコンポーネント

## UIに迷った時に使えるshadcn/uiコンポーネント

結論：Drawer

https://ui.shadcn.com/docs/components/drawer

## なぜDrawerなのか
### スマートフォンでの操作が非常に直感的であるため

YouTubeやInstagramのコメント欄は多くの人が利用しているかと思います。
指でスワップするだけで開閉ができ、非常に使いやすいWEBパーツです。

shadcn/uiのDrawerコンポーネントはこれとほぼ同じものを瞬時に実装可能です。
（またtailwind cssでUIカスタマイズも容易です。）

https://ui.shadcn.com/docs/installation

↓ディスコードのユーザープロフィールとかもですね。
<img width="300" alt="A572242D-19B9-40E7-A699-9046AECD13CC.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486141/f0869ead-ad5b-0b31-083d-ddd646c049ce.png">

とにかく触ってみると、「あ、これいいな」って感じる方が多いと思います。
個人的に　クリックよりスワップで操作できる（どちらもできるのが一番ユーザー体験いいかもしれない、、笑）方が使いやすく感じます。


### 多くのWEBコンテンツと親和性があると考えているため

先ほど述べたYouTubeやInstagramではコメント欄、ディスコードではプロフィール情報、配車アプリのGOでは検索フォーム等々、様々なコンテンツでdrawer UIが使われています。

これには割としっくりくる理由があると考えていて、 独立してかつ、on/offの特性を持つUIはdrawerが強いんじゃないかと思います。

drawerの特性はなんと言ってもスワップで楽にコンテンツの表示、非表示を切り替えられる点です。

そこで、コメント・プロフィール・検索などの「独立していて、ユーザーが一旦立ち寄るけど（on）またすぐ立ち去る（off)UI」にはdrawerは最適です。
個人的にはもう全部これでいいじゃん！くらい気に入っています笑

逆にユーザーが立ち寄って（on）なかなか立ち去らない（offらない）UIには向いていないとは思います。
（例えば地図・記事・動画・等のコンテンツ。特にそのアプリでユーザーによく使ってもらいたいメインコンテンツ）
表現が難しいですが、drawerにすることでサブコンテンツ感が出てしまうのと、単純に画面幅いっぱいコンテンツを見せることができないからです。
またdrawerの強みである、楽なスワップも無駄になります。

## 利用時の注意点
以下はdrawerのソースコードです。これをみると、あ、ここいらないなーとかtitleいらないから消して自分で作ろう！とかはしない方がいいです。
というのも、shadcn/uiはアクセシビリティも担保してくれているためです。デフォルトのものを利用しないとこの機能が失われ、アクセシビリティが下がります。
デフォルトのものとなるだけUIを合わせる努力が必要です。
```hoge.tsx
<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```


## 終わり

ここのUIどうしようか、、と考えることがあったらshadcn/uiのdrawerを一度検討してみるとよいUIを実現できるかもしれないです。

（ほぼ自分の感想ですが、、、笑）
【rtkQuery】Postmanのモックサーバーから返却される値が編集後も古い値になってしまう現象の解決法

# はじめに
今回は、rtkQueryを利用したAPIフェッチで、Postmanのモックサーバーから返却される値が、モックサーバーのレスポンスを編集したあとも編集前の値が返却されてしまう問題の解消法について書いていきたいと思います。

## 発生した環境

フロントエンド
- react native
- Redux toolkit
- rtkQuery

モックサーバー
- Postman

## 発生した問題・状況
- rtkQueryのhookから返却される`data`が、Postmanで構築されたモックサーバーのレスポンスをどれだけいじっても編集前から変わらない。
- curlで叩くとちゃんと編集後の値が返却される。
- アプリの再ビルド、シミュレーターの再起動を試しても編集前の値が返却される。
- `keepUnusedDataFor`などのrtkQueryのキャッシュビヘイビアをいじっても何も変わらない。
- アプリ内でaxiosを用いて叩くとちゃんと編集後の値が返却される(その上、それ以降はrtkQueryで叩いてもしっかり編集後の値が返却される)

## 解決法
rtkQueryのヘッダーに`"cache-control": "no-cache"`(ないし"no-store")を追加する。

この場合においては"no-store"の方が適切かも。

<details><summary>蛇足 : この現象に遭った時の思考</summary>

> rtkQueryのhookから返却される`data`が、Postmanで構築されたモックサーバーのレスポンスをどれだけいじっても編集前から変わらない。

Postmanのバグかと思い、curlなどで再現するかそう

> curlで叩くとちゃんと編集後の値が返却される。

Postmanのバグではなさそう？ rtkQueryまたはシミュレーターの問題か？

> アプリの再ビルド、シミュレーターの再起動を試しても編集前の値が返却される。

ここで本当に意味がわからなくなる(正直、今でもなぜ再ビルド・再起動してもそのままっだたのかわかってない)
仕方ないのでrtkQueryの設定を色々変えてみようかと思う

> `keepUnusedDataFor`などのrtkQueryのキャッシュビヘイビアをいじっても何も変わらない。

rtkQueryだけいじっていても事態は好転しなさそうなので、axiosやfetch apiで試してみようと思い立つ

> アプリ内でaxiosを用いて叩くとちゃんと編集後の値が返却される(その上、それ以降はrtkQueryで叩いてもしっかり編集後の値が返却される)

カッコ内の現象も相まってまさかの結果。シミュレーターやreact nativeの問題ではなさそうだったのでプロジェクト内のrtkQueryに関連するコードを見直す。
ヘッダーを設定する箇所があったので、まさかとは思いつつも"cache-control"を設定し解決に至る。

</details>
wslを1から2へupdate


作業ログ  

2024/09/01  

# wslを1から2へupdate  
  
## 発端  
wsl上のubuntuからcodeでvscodeを開いた際、「wsl1で動いてるからwsl2にすることをおすすめするよ」って感じのメッセージが出た。

## 調査
普通にwsl2のつもりだったので何言ってるのかなと思ったら
```powershell
wsl --version
```
が実行できず。
```powershell
wsl -l -v
```
で
見てもVERSIONが1。

## 対処
ということで、
```powershell
wsl --update
```
を実行。
端末再起動をはさみつつ、
```powershell
wsl --set-version Ubuntu-24.04 2
```
無事vscodeにも怒られなくなりました。

## その他効果
嬉しい効果として、wsl上のubuntuで、ssが機能するようになった。

以上
『Docker × Django』とりま、開発環境をつくるゾイ！

# 概要です
pythonのフレームワークであるdjangoを触ってみたかったので、とりあえずdockerで環境構築してみます。
※ docker公式サイトをもとに作成してます。docker公式のままやると、エラーが発生したので若干変更しています。


https://docs.docker.jp/compose/django.html

# 手順です
#### 1. ディレクトリを作成する
```bash
mkdir django-sample
cd django-sample
```

#### 2. Dockerfileを作成する
```
vi Dockerfile

# pythonは現時点で最新版の3系
FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install -r requirements.txt
ADD . /code/
```

#### 3. requirements.txtを作成する
```
vi requirements.txt

# Djangoは現時点で最新版の5.1以上
Django>=5.1
psycopg2
```

#### 4. docker-compose.ymlを作成する
```yml
vi docker-compose.yml


# dockerのバージョンによってはversion記述でwarningになるので注意
# version: '3'

services:
  web:
    build: .
    command: python3 manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db
  db:
    image: postgres
    ports:
        - "5432"
    environment:
        - POSTGRES_DB=postgres
        - POSTGRES_USER=postgres
        - POSTGRES_PASSWORD=postgres
```
公式サイト同様、データベースはpostgresを使用してます。
`POSTGRES_PASSWORD`を記載しないとdockerの立ち上げで失敗します...



#### 5. docker立ち上げ
```
docker compose build
docker compose run web django-admin startproject composeexample .
```

#### 6. composeexample/settings.pyを編集
```
vi composeexample/settings.py

# DATABASES部分を編集
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'postgres',
        'USER': 'postgres',
        'PASSWORD': 'postgres',
        'HOST': 'db',
        'PORT': 5432,
    }
}
```

#### 7.カラム作成と環境立ち上げ
```bash
# コンテナへGO
docker compose exec web bash

# カラム作成
# 失敗する場合は以下試してみてください
# ・docker compose psでdbコンテナが動いていることを確認
# ・dbのパスワードが同一か確認（docker-compose.ymlとsettings.py) など...
python manage.py migrate

# superuser作成
python manage.py createsuperuser

# run server
python manage.py runserver 0:8000
```

起動後、localhostにアクセスしてデフォルトページが表示されれば完了です！

http://localhost:8000/

http://localhost:8000/admin/login/?next=/admin/
Unreal Engine 5の勉強しはじめで詰まったところ

## 初めに
初めまして、私はITエンジニアになって2年の駆け出しエンジニアです。
普段の業務では、Java, Go, Typescript, Vueなどを利用したWebアプリ開発を行っています。

C++は学生時代に必要だったためすこしだけ書いたことがありますが、UnrealEngineは全くの素人でゲーム作りもやったことがありません。
そんな私ですが、とある事情でモチベーションがわき個人的にUnrealEngineを勉強し始めました。
いろいろと良い記事はあるものの独学でプログラミングをしているとはまってしまう箇所がいくつか出てきました。
本記事は、ハマってしまった箇所と抜け出した方法について備忘録的にまとめていくものです。

なお私の学習は基本的にはこちらの本に沿って進めていっております。
[教科書：Unreal Engine 5から始める C++ & Blueprint](https://zenn.dev/posita33/books/ue5_starter_cpp_and_bp_001)

## ビルドクリーン

C++で開発するときに引っかかったポイントその１はソリューションのリビルドです。
UnrealEngineならではではないというか、ほとんど関係ないのですがリビルドが通らない！となりました。

![スクリーンショット 2024-09-01 225535.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3349645/687b6f8f-19c4-3cb2-bef5-b03d2d79717b.png)

### どうやって解決したか？

AndroidStudioなどでも似たような経験があったため気が付きました。ビルドが通らない時には、クリーンしてみることは大事ですね！
[参考記事：【Visual Studio】ビルド・リビルド・クリーンとは](https://qiita.com/k26ust97a/items/dfc5bbeb740d4ca5a500)

## UPROPERTY

UPROPERTYをヘッダーファイルに書く必要があるのですが、UPROPERTYは１つの変数に対して付与しないといけないものらしく、ビルドは通るのに！BluePrintの結果が完全には再現できない！となり悩みました。
正しくは以下のような書き方になります。
![スクリーンショット 2024-09-01 230456.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3349645/38d2a748-24bf-8ee0-358e-bc49a1ca5d9a.png)

### どうやって解決したか？

BluePrintで作成したオブジェクトのヘッダーファイルを見られる機能がUE5.1からあるそうでして、これで確認したときに気が付きました。とりあえず読み進めてみることは重要ですね！
[参考記事：Unreal Engine 5から始める C++ & Blueprint #chap_02_cpp-component](https://zenn.dev/posita33/books/ue5_starter_cpp_and_bp_001/viewer/chap_02_cpp-component#c%2B%2B-header-preview)

![スクリーンショット 2024-09-01 231837.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3349645/8fde4717-239e-08a0-6906-a2936c2630f4.png)

## 終わりに
私のつまづいたところはこれだけではないのですが、とりあえず記事に残しておいてよさそうなものを残してみました。誰かの参考になれば幸いです。
【Python】Tkinterで動的に要素を追加する（仮）

:::note warn
※この記事で紹介する方法はあくまで自己流です。セキュリティ面でのリスクがあるので、一般向けにデプロイするソフトウェアなどには極力使用を避けた方が良いと思います。
:::
## 1.概要
Tkinterを使ってGUIソフトを作っている時、ユーザーがGUI内の要素・ウィジェットを増減させられるようにしようとしました。ネットで調べてみたところ、

・ウィジェットを非表示にしておき、適宜表示を切り替える
・クラスで管理する

等の方法が見つかったのですが、下の理由で却下しました。

・追加できるウィジェット数に上限がある
・単純にクラス構文が嫌い（インスタンスが増えていくのがなんか嫌）

一部、超個人的な理由が入っていますが許してください。

これら以外の手段を考えた結果、下の結論に至りました。

### 辞書で管理する

簡単に言えば、dict型でウィジェットを管理し、辞書の各要素のキーとして各ウィジェットの一意のIDを、その内容としてリストを格納します。
そのリストにTkinterのウィジェットのインスタンスと、作成日時等のデータを格納します。

# 2.メリット・デメリット
この方法のメリット・デメリットについて自分の思いつく範囲内でご紹介します。

## メリット
・外部モジュールを必要としない
・ウィジェットのキー・IDに様々な型を指定出来る
・外部ファイルへの保存が容易

## デメリット
・機密性を要する情報の管理には向かない
・辞書内のデータを消去してもウィジェットのインスタンスはそのまま
・管理方法を変更する際に面倒

# 3.サンプルコード

現在製作中です！
近日追加します！
LiveViewでmount時にRepo.allを2回通過するのを防ぎたい

結論2回目のmountを判断する
connected?(socket)を使う

```diff_elixir:lib/hoge_web/live/user_live/index.ex
  def mount(_params, _session, socket) do
+    IO.inspect("--------------------mount-------------------------------")
+    users = if connected?(socket), do: Accounts.list_users(), else: []
+    {:ok, stream(socket, :users, users)}
-    {:ok, stream(socket, :users, Accounts.list_users())}
  end
```

検証の為IO.inspectを入れています
```diff_elixir:lib/hoge/accounts.ex
  def list_users do
+    IO.inspect("-----------------list_users-------------------")
    Repo.all(User)
  end
```

下記の実行結果により１回だけRepo.allができました
```:実行結果
[info] GET /users
[debug] Processing with HogeWeb.UserLive.Index.index/2
  Parameters: %{}
  Pipelines: [:browser]
"--------------------mount-------------------------------"
[info] Sent 200 in 3ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 67µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "CihefRoAHAEDZCFvGBhgD00COn8kIQEQ_afNBoejq3O8lvYZ7qIKAWtg", "_live_referer" => "undefined", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
"--------------------mount-------------------------------"
[debug] MOUNT HogeWeb.UserLive.Index
  Parameters: %{}
  Session: %{"_csrf_token" => "UI83XoykrWnWtn9Uzss4evuw"}
"-----------------list_users-------------------"
[debug] QUERY OK source="users" db=0.2ms idle=1152.7ms
SELECT u0."id", u0."name", u0."inserted_at", u0."updated_at" FROM "users" AS u0 []
↳ HogeWeb.UserLive.Index.mount/3, at: lib/hoge_web/live/user_live/index.ex:10
[debug] Replied in 1ms
[debug] HANDLE PARAMS in HogeWeb.UserLive.Index
  Parameters: %{}
[debug] Replied in 76µs

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/5b9ca433-1327-e8a1-c528-8a1038f31a73.png)
vscode dev container(開発コンテナー) 環境を作ってみよう ～ vscode-remote-try-* リポジトリで始める環境づくり～

# 前提となる環境

* Windows 10 以降 (私の環境は Windows 11)
* vscode
    * winget からなら `winget install vscode` で入れられます
* DockerDesktop
    * winget からなら `winget install --id Dokcer.DockerDesktop` で入れられます

# vscode dev container

vscode での開発には vscode remote development … vscoede のリモート開発 というものがあります。 コンテナー、リモートコンピュータ、WSL をフル機能の開発環境として使用するものです。

これは ローカルマシンの構成に影響を与えないことができる為、とても便利です。

今回はそのうち、[Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) ... つまりローカルに Docker 環境を用意してそこに vscode を繋ぐ環境を用意してみましょうという話です。

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

## とりあえず 環境の作り方 (序文)

インストールした vscode の左下に `><` みたいなマークがあるのを確認できると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32143/b102cb60-1480-ed67-423d-e72478d273a4.png)

フォーカスすると `リモートウィンドウを開きます` と出るそれです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32143/e3ac3f0b-8cf4-49a9-ec87-4e124f682a37.png)

クリックすると リモートウィンドウを開くオプション が出ますので 今回用事のある Dev Container を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32143/97502f32-aeb6-2249-5b57-a7ccedfa234e.png)

するとインストールして このドロップダウンは閉じます。

再び `><` を押すと Dev Containers 関連の項目が先頭に追加されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32143/c3173a83-6704-7994-b54b-a2de02023124.png)

そこで  `新しい開発コンテナー...`(`New Dev Container...`) を選択することで 新しい環境を用意することができます………

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32143/e4e1f1c3-476a-a223-6f34-4adce97f0be8.png)

例えばその検索欄で `php` と入力すれば php関連の Dev Containers テンプレートが選択できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32143/2d272908-a2f9-a8c0-3426-57057f383e84.png)

で、そこを選択すればこと足りるのですが………今回は別に用意された テンプレートを使ってみましょうという話です。

# vscode-remote-try-* リポジトリ

microsoft の github リポジトリには vscode-remote-try- で始まる dev containers 向けのリポジトリが幾つかあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32143/bd5ecd33-4412-cc1f-d48d-b848a03c96e9.png)

https://github.com/orgs/microsoft/repositories?q=vscode-remote-try-

好きな リポジトリを開いて `Code` ボタン から `Download Zip` を選択してダウンロードしてプロジェクトを置くフォルダ等に配置して vscode で開いてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32143/063ccd7d-1907-2054-e266-f2e4be4dd6fd.png)

vscode を開いて フォルダを開くでそのフォルダを選択してもいいですし、 
ターミナルから vscode の実体名である code コマンドの 第二引数に 対象となるフォルダのパスを含めて 実行して開いてくのも手です。

そうしたのであれば 左下の `><` から `コンテナーで再度開く` を実施します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32143/15100e09-fcd9-e897-5f9a-fde26c9e068b.png)

これで 環境（デバッグ込み）が作成できました。

詳しい環境情報については フォルダの `.ddvcontainer/devcontainer.json` および README.md から確認することができます。

サンプルファイルもあるのでとりあえず作ってみる際には参考になると思われます。

以上。
[Github] Private・Internalリポジトリとssh通信できない

インターンではよくPrivate/internalリポジトリに招待され、招待された人しかcloneができないリポジトリをよく使う。

このリポジトリにプッシュ、プルしたりしてインターンの活動を進めるが、なぜか私のパソコンでは、**ssh通信ができなかった**。

Publicリポジトリだとssh通信ができるが、internalだとできない。(どうして….)

その原因は、SouceTreeにあった。

# 今までSouceTree産の公開鍵・秘密鍵を使っていた

SouceTreeは鍵をアプリ内のUIで作ることができ、その公開鍵をアカウントに登録するだけでssh通信ができるようになる。しかし、招待限定のinternalなどはssh通信できない鍵なのである。

よって、この鍵を消して、自分で新しく作らなければならない。

対策

SouceTreeの生成鍵を消して、新しく自分で作る。

# まずはopen ~/.ssh/configで調査

.ssh配下にあるconfigを開きます

```bash
open ~/.ssh/config
```

```
# --- Sourcetree Generated ---
Host github.com
	HostName github.com
	User takokke
	PreferredAuthentications publickey
	IdentityFile /Users/ユーザー名/.ssh/アカウント名-GitHub
	UseKeychain yes
	AddKeysToAgent yes
# ----------------------------
```

発見しました。今回の悪さの原因が。
これを丸ごと消しちゃいます。

これを消さないと優先的に、SouceTree産の鍵は使われてしまいます。

```bash
code ~/.ssh
```

そして、SouceTreeで作られた公開鍵、秘密鍵を消す。

これでやっとSouceTreeの鍵とおさらばです。

ここからは、他の記事を参考にして公開鍵の登録を行います。

```bash
ssh-keygen -t ed25519 -C "githubアカウントのメールアドレス"

```

キーエージェントをバックグラウンドで動かす

```bash
eval "$(ssh-agent -s)”
```

configを開く

```bash
open ~/.ssh/config
```

作成した公開鍵とホスト名をセットにしてconfigに記録。

```
Host github.com
	AddKeysToAgent yes
	IdentityFile /Users/ユーザー名/.ssh/id_ed25519
	User 自分のアカウント名
```

キーエージェントに登録

```bash
ssh-add --apple-use-keychain ~/.ssh/id_ed25519
```

コピー

```bash
pbcopy < ~/.ssh/id_ed25519.pub
```

Github → 設定 → SSH キーと GPG キー に移動し公開鍵を登録します。

最後に通信の確認

```bash
ssh -T git@github.com
# =>Hi アカウント名!You've successfully authenticated, but GitHub does not provide shell access.
```

なぜか``git@github.com``の部分が``github.com``で間違えている記事が多い。
[Unity]プライベートリポジトリでもUPMを使いたい

# はじめに
プライベートリポジトリでもUPMで制作したアセットを公開したいなー。verdaccio自分でホストすると大変なんだよな～と思ってたら
めちゃくちゃシンプルなソリューションがあったので共有

# GCMをつかう
Gitをインストールする際に、オプションでGCM(git Credentinal Manger)をインストールする。  
これだけです。あとは普通にリポジトリ指定したらブラウザで認証させられ、以降はキャッシュした認証情報で簡単にプライベートリポジトリからインストールできます。
参考 
・https://medium.com/tichise/unity-package-managerでプライベートリポジトリのgit-urlを用いてpackageを追加する-ecaa46fda2eb  

・https://docs.github.com/ja/get-started/getting-started-with-git/caching-your-github-credentials-in-git  

# 最後に
なんでこの機能を見つけられなかったのか全くの謎...と思ったのですが、僕がお熱になってた時はUPM化(サービスとして)についてで、今回は単一のリポジトリの公開に絞ったからでした。  
なので、未インストールのリポジトリを列挙することはできないのですがそれ以外は全く同じことができたので結果オーライという感じ
色　3つの属性

## すべての色は3つの属性から成り立つ
### 色相
色合いのことです。
「赤」,「青」,「緑」など。
### 彩度
鮮やかな色のことです。
### 明度
白を100、黒を0にした時の明るさを表すのが明度。白に近づくほど明度が高くなり、黒に近づくほど明度が低くなる。

### 色の3原色
cyan, magenta, yellow, (black)
（1冊ですべて身につく）扉が開くようなアニメーションに挑戦

お疲れ様です。

今日も「1冊ですべて身につくJavaScript入門講座」を使って勉強しました。
タイトルにあります通り、今日もアニメーションです。今回はコラムにあった内容で、コードは見ず、自分で考えたり調べてやってみました:computer:

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYVJQwN" data-pen-title="Untitled" data-user="mtzkmy" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mtzkmy/pen/zYVJQwN">
  Untitled</a> by mtzkmy (<a href="https://codepen.io/mtzkmy">@mtzkmy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

開くアニメーションのところまでは30分でコードを書けたのですが、なかなか動かなくてanimateの書き方を調べなおしたりし、約1時間で完成しました！

この記事を書きながら参考書のコードを見ましたが、全然違う感じでした…
自分のコードでは position: fixed; で画面の固定をしていますが、参考書では **transform-origin** というプロパティが使われていました。
また知らないプロパティを発見しましたので、 position:fixed との違いも含めておさえておこうと思います。

ただ同じようなアニメーションでもコードは様々とよく聞きますが、その通りだなと感じました！
私が知っているのは初歩の初歩でしょうが、それを使うだけでも作れるものだなーと思いました:relaxed:
GitHubのリポジトリの名前を変えたときのターミナルコマンド

リポジトリ名を間違えてしまって、GitHub上で変更しただけだとpushできない、、、
でもなかなか変更したときの対処がのっていなかったためと、備忘録として投稿です。

## 1. まず、リモートリポジトリのURLを更新する
    git remote set-url origin git@github.com:ユーザー名/変更された名前.git

これで更新されます。

## 2. リモートリポジトリとの同期をとる
    git pull origin main --rebase

これはリモートのmainブランチの最新の変更をローカルに取り込み、必要に応じて自分の変更を再適用します。

`すでに試行錯誤された方はもしかしたらリモートリポジトリとの差分がありエラーが出たりします。`
**そのときは、エラー文の中にどのファイルで差分があるのか、どっちのデータに合わせるのか困っているのでそのファイルを開いてください。普段のファイルと表示が異なっているためわかると思います。**
その画像は無いです。。。

## 2.5 上のエラーが解決した人
git add で変更点を保存します。
git rebase --continue　で 2 の続きを始めます。

## 3. Pushする。

以上になります。
***
:::note warn
注意
個人的な環境で説明が不十分であるがゆえにこれで解決しない場合があります。
エンジニアの方や、知識なある人に確認をお勧めします。
:::
fedora40でCapsLockをCtrlへ入れ替える

# はじめに

capslockとctrlを入れ替えたく。この位置にCtrlがあることになれてしまった。

# 設定内容

/etc/X11/xorg.confへ以下の内容を記述。

```sh
Section "InputDevice"
    Driver "keyboard"
    Option "XkbOptions" "ctrl:swapcaps"
EndSection
```

# 参考

https://docs.redhat.com/ja/documentation/red_hat_enterprise_linux/6/html/deployment_guide/s2-x-server-config-xorg-conf-d

https://lambdalisue.hatenablog.com/entry/2013/09/27/212118