OmniAICreator/Qiita-1.07M huggingface dataset:
orderプロパティで並び順を指定する

# はじめに
学んだことを忘れないように備忘録として残しています

## orderプロパティとは
 flexやgridで並び替えた要素を自由に並び替えができるプロパティです。
 通常はHTMLで記述した順序がそのまま表示に反映されますが、orderプロパティを使うと、要素ごとに独自の順番を指定でき、異なる順番で表示させることが可能になります。


## 使い方
例.１〜５の箱をフレックスで横並びにして、１,２,４,５,３順番に並び替える。


### 【通常時】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834252/a008e6e9-86d3-03ba-57eb-972b4d45d86f.png)


 【HTML】
```html
      <div class="box-wrapper">
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div class="box">box3</div>
        <div class="box">box4</div>
        <div class="box">box5</div>
      </div>
```

【CSS】

```css
.box {
  padding: 20px;
  border: 1px solid #000;
  text-align: center;
}
```
---


### 【orderプロパティ使用時】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834252/6c62293c-87af-010c-1574-93bb4b6f7620.png)



nth-child()を使って、３番目の要素に対してorder:1を適用する

```css

.box:nth-child(3) {
  order: 1;
}

```






**orderに入る数値が小さいほど前に表示され、大きいほど後に表示されます。**
デフォルト値は0であり、同じ数値の要素同士は、【通常時］のようにHTMLの記述順に表示されます。



## 使いどころ
主にレスポンシブ対応で、PC版とスマホ版で要素の順番を変えたいときに使用します。

但し、過度に使用するとHTML構造が把握しづらくなる可能性があるため、使用頻度には注意が必要です。


## まとめ
orderプロパティは、FlexboxやGridレイアウトで要素の並び順を柔軟に変更するための便利なプロパティです。
特にレスポンシブデザインで、デバイスごとに要素の順序を調整したいときに役立ちますが、過度な使用はHTML構造の理解を難しくする可能性があるため、注意が必要です。適切に使うことで、デザインやユーザー体験を向上させることができるので、目的に応じてバランスよく活用していきましょう。
ngrokの登録＆WSL環境にngrokをインストールする手順

https://qiita.com/Usyuuu/private/4fbf4d02790b1b2226d4

この記事の続き

# ngrok(エングロック）とは
本来自分でしか閲覧できない「Localhost」（ローカルサーバ）を外部公開する際に用いる、トンネリングツールの事。

# ngrokのアカウント作成手順

1. [ngrok公式ページ](https://ngrok.com/) にアクセスし、右上の「Sign up」をクリックする。（ページを開くと「Your Privacy」という題のウィンドウが表示されるが無視でOK（右上の×を押せば消えます））
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/a7509263-8276-4542-0c6f-b853526414db.png)

2. メールアドレスとパスワードを入れてSign up
3. Multi-factor authenticationしよといわれるけど、気にせず「Got it」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/c8e8901d-581f-3838-b405-d5cb69f4fe16.png)

4. Welcome to ngrok！と表示される。適当な理由を入れてContinue
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/caf01371-2112-76d3-62b9-a3c528107510.png)

# ngrokのインストール＆認証トークン（AuthToke）の登録手順

https://zenn.dev/claustra01/articles/c4d22f187943cf

こちらのページの通りに進めればOKです。
**インストール手順はこのブログの「ngrokをインストールする」に丁寧に解説されてます。**
認証トークン（AuthToken）の登録については、もう少し内容を丁寧にしたものを以下に記載します。

## ngrokの認証トークン（AuthToken）をWSL環境に登録する
1.  [ngrok公式ページ](https://ngrok.com/) にログイン
2.  ページ左の「Your AuthToken」メニューをクリック
3.  右窓の「Copy」をクリックし、自分のAuthToken情報をコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/57a9031d-99b1-53ba-0da6-eaa4520e0746.png)
4. 以下コマンドの（$YOUR_AUTHTOKEN）の部分を自分のAuthTokenに書き換え、**WSL側で入力する**

```
ngrok config add-authtoken $YOUR_AUTHTOKEN
```
例：自分のAuthTokenが123456789だったら
```
ngrok config add-authtoken 123456789
```

# 固定サブドメインの取得手順

1. ngrok公式ページにログインする
2. ページ左の「Domains」をクリックする
3. 「+Create Domain」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/e5c26eef-db09-c2a3-58f9-47a332f26dba.png)

4. 以下画面が表示されるので、赤枠部分をクリックしてコマンドをコピーしてください。
コマンドのフォーマットは以下の通りです。
```
ngrok http --url= <hostname> <port>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247553/65a4de97-b195-ef49-d220-db7a450c48d8.png)

このコマンドを端末上で打てば、「https://"hostname"」が外部公開されます。
※　ポート番号は各自の環境に合わせて適宜変えて下さい。
※　**WSL2を活用する場合は、WSL側のコマンドラインでコマンドを打ち込んでください。**

次の記事から、RTAイベントTwitterツールのコード修正方法＆使い方を解説します。

https://qiita.com/Usyuuu/private/e5665c34c23884faffe5
なぜCodeceptJSを選ぶべきか？E2Eテストの効率化と保守性向上を実現

## はじめに
エンドツーエンド（E2E）テストは、アプリケーション全体の品質を確保するために欠かせません。しかし、複雑な操作を簡潔に記述するのは容易ではありません。そこでおすすめしたいのが、直感的なシンタックスを持ち、保守性を高められるCodeceptJSです。

今回は、CodeceptJSを使うメリットや導入方法、実際の活用例について解説します。

## CodeceptJSの特徴とメリット
1. 直感的なBDDスタイル
CodeceptJSは「Given-When-Then」のBDDスタイルでテストケースを記述できるため、コードの可読性が高く、テストシナリオが自然言語に近い形で書けます。これにより、非技術者でもシナリオを理解しやすくなり、チーム全体での共有が容易です。

2. 多様なバックエンドサポート
CodeceptJSはPlaywright、Puppeteer、WebDriver、TestCafeなど、多くのエンジンをサポートしています。これにより、プロジェクトや環境に応じた最適なバックエンドを選べる柔軟性があります。

3. 強力なヘルパーとプラグイン
テスト作成を容易にするためのヘルパーや、スクリーンショット自動取得、リトライ機能などの豊富なプラグインが揃っています。テストの信頼性が向上し、保守性が高まるため、開発スピードが上がるのも大きなメリットです。

## CodeceptJSの活用が適しているユースケース
1. 複雑なユーザーインタラクションのテスト
    - CodeceptJSは、複雑なフォーム入力やマウス操作、ドラッグ＆ドロップなども簡単に実現できるため、ユーザー操作が多いアプリケーションに最適です。
2. 回帰テストの自動化
    - 頻繁にUIが変わる場合でも、CodeceptJSのシンプルな設計によりテストケースを保守しやすく、効率的なリグレッションテストが可能です。最初はAutifyなどのツールと併用しつつ、長期的にはCodeceptJSへ移行してテストの一元管理を目指すのも良い戦略です。

## 実際にCodeceptJSを使ってみよう
### インストールとセットアップ
CodeceptJSのセットアップは簡単です。以下のコマンドでインストールできます。

```bash
npm install codeceptjs playwright
npx codeceptjs init
```
インストール後、プロジェクトにテスト構成ファイルが生成されるので、必要に応じて設定を行います。

### サンプルテストの作成
シンプルなテストシナリオを書いてみましょう。以下はGoogleで検索するシナリオの例です。

```javascript

Feature('Google Search');

Scenario('search text on Google', ({ I }) => {
    I.amOnPage('https://www.google.com');
    I.fillField('q', 'CodeceptJS');
    I.pressKey('Enter');
    I.see('CodeceptJS');
});
```

このようにシンプルで読みやすい構造のため、テストケースが直感的に理解しやすくなります。

## CodeceptJS導入時の注意点

1. 非推奨メソッドの更新
   - waitForNavigationなどの非推奨メソッドが存在するため、最新バージョンを使用する際はドキュメントを確認し、waitForURLなどの推奨メソッドに置き換えましょう。
2. CodeceptJSと他ツールの併用
    - Autifyを初期段階のテストに使用し、CodeceptJSに段階的に移行することで、テストの効率的な管理が可能です。最終的にはCodeceptJSで統一し、複雑なテストシナリオも一元管理することで、より一貫性のあるテスト体制が構築できます。

## まとめ
CodeceptJSは、そのシンプルさと柔軟性で、特にJavaScript環境でのE2Eテストに優れています。BDDスタイルでの記述により、チーム全体でテスト内容を共有しやすく、効率的なテスト自動化が可能です。テストの効率化を図りたい方や、シンプルかつ強力なツールを探している方は、ぜひCodeceptJSを試してみてください。
線形サーチして遊ぶ。(数値)(線形探索)


x 過去ログを見よ
x M5NanoC6で使う予定は、未定


うるおぼえのネットで見た、どっか工業大学の問題と答え(C言語)(例題の為の例題)


学校に山田くん、田中くん、斎藤さん...が居て
出席番号順で最初にテストで100点を取った人の出席番号を求めよ。
あと、平均、試行回数を求めよ。(たぶん　n/2　の事)


図に1.num[i]==s、2.i++、3.break;を埋めろ(みたいな問題)(図てなんだ)


いろいろ
それなりにアクセスカウンターが回ったのでほぼ、答え合わせ。
線形サーチを酒のつまみにするのは、専門家以外は、いろいろおかしいと言う認識。
これ、まちがえるやつ、いるんか、学校来てないんじゃないか?
ミスは、だれにでもあるからな。答えの欄を間違えることは、あり得る。
いつも言うが、アルゴリズム=ソート、サーチだからね。
((エキシビジョン)グラフ理論(地図の塗分け)、高速フーリエ変換、暗号(素数(並び変えと置き換え)))



オンラインコンパイラー


```c++

#define N 10

#include <stdio.h>
int main(void){
    // Your code here!
    
    int num[N] = {43,64,100,89,43,
                  25,87,67,100,38};
    int s = 100;
    int i;
    
    for(i = 0;i < N;i++){
        if(num[i] == s) {break;}
    }
    printf("%d\n",i);
    
}

```

```

2

```
Apache HttpClientで、リクエストヘッダーに"Accept-Encoding" の設定でgzipを自動設定しないようにする方法について

## 案１
リクエストヘッダーの "Accept-Encoding"の値を ""：空文字、または、 "identity" 設定

参考URL
https://siguniang.wordpress.com/2014/02/23/what-is-identity-content-encoding/

## 案２
以下のような実装で、自動コンテンツ解凍を無効にできそうです
HttpClient client = HttpClients.custom().disableContentCompression().build();

参考URL
https://stackoverflow.com/questions/32354232/how-to-disable-compression-handling-in-apache-httpasyncclient
https://hc.apache.org/httpcomponents-client-4.5.x/current/httpclient/apidocs/org/apache/http/impl/client/HttpClientBuilder.html#disableContentCompression()
転職活動を振り返って思ったこと

# この記事は何?
2024/10/04〜2024/11/08で転職ドラフト×Qiita記事投稿キャンペーン

* **「今年の転職活動で考えたこと・やったことを書き残そう」**

が開催されています。

https://qiita.com/official-events/9687d5419295cd871fdc

この機会に転職経験を振り返ってみようと思い、記事を書くことにしました。

# 記事のテーマ
イベントタイトルは「今年の転職活動で考えたこと・やったことを書き残そう」ですが、今年の転職活動はしていないため、

* **過去の転職活動を振り返って思ったこと**

について書きます。


# 想定読者
このあとに書きますが、自分が転職を考えた理由のひとつは

* 自分のスキルアップを狙って能動的に転職活動した

などポジティブな理由ではなく、

* 自分のスキル不足により担当業務がスケジュールとおりに推進できなくなったことへ負い目を感じた

という、どちらかといえばネガティブな理由です。

この記事では当時を振り返って、今、考えられることを書いています。

もし当時の私と同じ・近い状況で転職を考えられている方や気になっている方へ考え方のひとつとして何か参考になれば・・・という立ち位置で記事を書きます。

# 転職活動時の背景
転職時の仕事は組込みソフトウェア開発です。
転職前の会社は2006年入社で転職までの2012年9月末まで6年ほど所属していました。
マイコンを使った受託開発や自社製品の組込みソフトウェア開発を経験していました。
ハードウェアマニュアルをにらめっこしながらレジスタを読み・書きしたり、デバイスドライバを書いたり低レイヤのお仕事がメインでした。
自分の組込みソフトウェアのスキルの基礎はこの会社で身につきました。

## 転職を考えたきっかけ
アサインされた仕事を自分のスキル不足により担当業務がスケジュールとおりに進められなくなってきたことへ負い目を感じたためです。
スケジュールとおりに進めようと残業、休日出勤をしていました。
お客様先への打合せに朝起きれず寝過ごし、無断欠席してしまうなど悪い影響が多く発生していました。

# 転職活動を振り返って思ったこと
## 自分は悲劇のヒーローと思っていた
転職時期を振り返ると自分を悲劇のヒーローと思っていたなぁと思います。
こんな大変な目に遭い、なんて自分は可哀想、みたいな・・・。
悲劇のヒーローを気取っても状況は何も好転しないと思うので、つぎの行動をとればよかったなと今は思います。

* 事実を俯瞰的・客観的に見る
* わかりやすい報告
  * xx機能はxxまでにここまではできますが、xxの制約があります、などトレードオフを意識した報告
  * 今の自分の能力でできることを事実を事実のまま冷静に、正確に伝える（自分の思い、主観を排除する）。


悲劇のヒーローモードになっていると、俯瞰・客観的に自分をみることができていなかったと思います。

報告の仕方もよくなかったかなと思います。上司としては、いついつまでにできない、とだけ言われても当然困ってしまいます。いつまでにここまではできますが、xxの制約があります、などトレードオフを意識した報告をすることで上司も状況を理解し、対策を考えることができると思います。
客観的に状況を見てわかりやすい報告・相談をする。そのあとの判断は上司にゆだねる、という姿勢でもよかったかなと今は思います。

振り返ると当時の私は担当者なのだから自分で何とかしなくては!、という思いも強かったように思います。それが空回りし、残業・休日出勤を行い、遅刻、体調不良につながるという悪循環でした。


## 本当に転職しないとダメですか?
前述の状況が続き、転職を考えていることを上司に話した後、ハードウェアグループのエンジニアの方から呼ばれました（私はソフトウェアグループに所属）。
要件はハードウェアエンジニアの方の下について、ハードウェア確認用のテストコードを書く仕事にチェンジしないか？というお話でした。

そのお話をいただいたときに非常にありがたく、素直に嬉しかったです。まだこの会社に自分を必要としてくれる方がいるんだ、と思えて泣けてきそうでした。

そんな思いも持ちましたが、当時の私は自分がこの会社にいるとまた仕事が推進できず周りに迷惑をかけてしまう、という思いが強く結局、いただいたお話はお断りし転職しました。

このエピソードを読んでくださった方、もし転職を検討している方に一旦落ち着いて考えてみても良いかもしれないと思うことはつぎになります。

* 本当に転職しないと希望は叶いませんか?
* 現在の会社の別の場所にあなたが活躍できる場所はありませんか?


## 健康第一
なにはともあれやはり**健康第一**と思います。
健康面の不安から転職を考えている方は頑張りすぎず、カジュアルに転職活動してみると良いと思います。

# おわりに
最後まで読んでいただきありがとうございました。
読んでくださった方の転職活動が上手くいき、自分らしく、幸せになることを祈っています。
この記事が何か参考になれば嬉しいです。
高速・軽量なGoフレームワークGinの魅力とセットアップガイド

## はじめに
Ginは、Go言語で作られた高速かつ軽量なWebフレームワークで、特にAPI開発に強みを持っています。本記事では、Ginの特徴やおすすめの利用シーンについて説明し、その後、実際にアプリケーションを構築する基本的なセットアップ手順をご紹介します。

## Ginとは？その魅力と特徴
Ginは、高速なレスポンスを必要とするサービスや、API開発に特化したシンプルな構文を提供するフレームワークです。以下が主な特徴です。

### 高速かつ軽量
Ginは、C言語で実装されたhttprouterをベースにしており、パフォーマンスが非常に高いです。大量のリクエストを処理するサービスに適しています。

### API開発のための機能が充実
JSONレスポンスの生成が簡単にでき、RESTful APIを素早く実装可能です。また、バリデーションやパラメータのバインディングなどの機能もサポートしています。

### シンプルで直感的な構文
Ginのコードは読みやすく、Goの初心者でも比較的簡単に学ぶことができます。

### ミドルウェア対応
Ginでは、ロギング、エラーハンドリング、認証といった機能をミドルウェアとして追加できます。これにより、コードの保守性が向上し、再利用が容易になります。

## Ginがおすすめな利用シーン
以下のような要件を持つプロジェクトにおいて、Ginが最適です：

### 高パフォーマンスが求められるAPIサーバー
レスポンスタイムが重要視されるプロジェクトや、リクエスト数が多いAPIサーバーの構築に適しています。

### スケーラブルなマイクロサービス
Ginの軽量性は、複数のサービスが連携するマイクロサービス構成での利用に理想的です。アプリケーション全体のパフォーマンスを維持しつつ、スケーラビリティを実現できます。

### シンプルなRESTful APIの構築
JSONレスポンスがメインのサービスでは、Ginの直感的な構文で効率的にAPIを構築できます。

### プロトタイプ開発やスタートアップ
開発スピードが重視されるプロトタイプやスタートアッププロジェクトにも、Ginのシンプルな構文が適しています。初期開発やアイデア検証が素早く行えます。

## Ginを使ったアプリケーションの基本セットアップ
以下に、Ginを使ったシンプルなWebアプリケーションの構築手順を示します。

### 1. プロジェクトの作成
最初に、プロジェクトのためのディレクトリを作成し、移動します。
```
mkdir my-gin-app
cd my-gin-app
```
### 2. Ginのインストール
次に、Go Modulesを使用してGinをインストールします。
```
go mod init my-gin-app
go get -u github.com/gin-gonic/gin
```
これで、Ginの依存関係がgo.modに追加され、モジュールの管理が容易になります。

### 3. 基本的なアプリケーションの作成
main.goというファイルを作成し、Ginを使ってシンプルなWebサーバーを実装します。

```go
package main

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func main() {
    r := gin.Default()

    // ルートエンドポイントを設定
    r.GET("/", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H{
            "message": "Hello, World!",
        })
    })

    // サーバーの起動
    r.Run(":8080")
}
```
このコードでは、Ginのデフォルトルーターを作成し、ルートエンドポイントにアクセスした際に「Hello, World!」というメッセージをJSON形式で返す簡単なエンドポイントを設定しています。

### 4. アプリケーションの実行
アプリケーションができたら、以下のコマンドでサーバーを実行します。

```bash
go run main.go
```

ブラウザで http://localhost:8080 にアクセスすると、以下のようなJSONレスポンスが表示されます。

```json
{
    "message": "Hello, World!"
}
```
### 5. プロジェクト構成のベストプラクティス
プロジェクトが大きくなるにつれて、ディレクトリ構成を整理することが重要です。以下は、拡張性を持たせるための構成例です。

```
my-gin-app/
├── main.go         // エントリーポイント
├── go.mod          // Go Modules
└── handlers/       // 各エンドポイントのハンドラを管理
```
エンドポイントの処理をhandlersディレクトリにまとめることで、コードの保守性を高めることができます。

## まとめ
Ginを使ったWebアプリケーションのセットアップは簡単であり、特にAPI開発や高パフォーマンスが求められるサービスで威力を発揮します。今回は基本的なセットアップを解説しましたが、Ginには強力なルーティング、ミドルウェア、リクエストバリデーションなど、便利な機能が豊富に用意されています。

これをきっかけに、ぜひGinを使った開発を進めてみてください。
GitHub ActionsでReactアプリをViteでビルドしFirebaseにデプロイする

## 概要
GitHub ActionsでReactアプリをViteでビルドしFirebaseにデプロイしたときに経験したことやエラー内容を紹介します。

## 参考
https://medium.com/@muhammadali01/creating-a-github-actions-workflow-for-vite-project-deployment-to-firebase-f5e889b1ef38

英語の記事ですが分かりやすく手順が記載されています。
ほぼこの手順で進められるかと思います。

## 補足
基本的には参考記事を翻訳するなどして手順通り進めていけばいいですが、`firebase login:ci`を実行したときにターミナルにトークンが表示されるので忘れずにコピーします。

コピーしたトークンはGitHubの`Settings > Secrets and variables > Actions`に移動後、`New repository secrets`を押下して、ペーストします。

![スクリーンショット 2024-11-08 23.16.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289947/c398c0a2-e5b1-fef2-5acf-e495e4523fda.png)

## エラー内容
参考記事の内容でymlファイルを作成すると下記のようなエラーが2箇所発生します。
エラー内容を読んで詳細のリンクに飛ぶとバージョンに関するエラーの説明があるのでymlの該当箇所のバージョンをv2からv4に上げて再度コミットをpushしましょう。

![スクリーンショット 2024-11-08 23.18.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289947/841e2438-5e07-bf83-72bc-924050ac9d3d.png)

## エラー内容2
私の環境ではこのままデプロイすると、環境変数に記述したsupabaseのURLとKey情報が読み込まれないためエラーが発生します。
検証モードで見てみると「Uncaught Error: supabaseUrl is required.」というエラーが出ており画面が真っ白の状態です。

こちらのエラーの解決はこちらの記事を参考にさせていただきました。

https://qiita.com/gantarooou_js/items/bc493bba82a8a6b1ab32

環境変数で記述していたsupabaseのURLとKey情報をGitHubに登録します。
登録の仕方は前述のFirebaseのトークンと同じです。

![スクリーンショット 2024-11-09 0.09.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3289947/7ff55f2e-00e5-4c91-5fce-6dd2f54e41ca.png)

yml側でもenv:で環境変数を読み込む設定を追記します。

      - name: Build
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}

## まとめ
ymlファイルの記述はインデントも厳しくチェックされるので、気をつける必要があると知りました。

今回初めてGitHub ActionsでCD（継続的デプロイメント）を行い、細かい箇所まで全部理解することは難しいですが、エラーを経験しながら仕組みを理解していきたいと思いました。
ユーザー登録機能で誕生日の年月日を一覧表示して選択する　【備忘録】

## はじめに
新規ユーザー登録で誕生日を入力することはよくあると思うので記録残しておきます。
```new.html.erb

<div class='input-birth-wrap'>
    <%= f.label :birthday, "誕生日" %>
    <%= f.date_select :birthday, 
                      use_month_numbers: true, 
                      start_year: 1930, 
                      end_year: (Time.now.year - 5), 
                      field_order: [:year, :month, :day], 
                      prompt: { year: '--', month: '--', day: '--' }, 
                      date_separator: '' %>
    <p>年</p> <p>月</p> <p>日</p>
  </div>
  ```
 ### f.date_selectの説明
  f はフォームビルダー（`form_with` や `form_for` で定義）の意味で、`.date_select` メソッドは、そのフォームの特定のフィールド（ここでは `:birthday`）を日付形式のセレクトボックスとして表示してくれる。
この `date_select` メソッドを使うと、年・月・日それぞれの数値ドロップダウンで表示してくれて選択で入力できるようになる。
## おわりに
ユーザー登録はWebアプリでまず実装する機能なのでこれは今後も使いそうですね！
【受託から自社サービスへ】ワイの転職ポイント

## 前職〜キッカケ
・新卒で入った、受託系
・webアプリやスマホアプリ、ゲームなど色々やらせてもらえた。（自分としてはゲーム志望だったけど）
・ある時、優秀な先輩社員がメンタル崩して続々辞める
・ワイの直属上司も辞めてしまった。
・それがきっかけ

## 転職方法
・とりま新卒就活でお世話になったとこがエージェント紹介業もやっていたのでそこ経由でエージェントと巡り合い相談に乗ってもらった
・ワイは遠慮気味な志望企業だったがそこの人は某有名会社をいきなり勧めてきた
・そこまで言うなら・・とそこに絞って対策を始めた

## 対策
### webテスト(対策はこれだけ)
・よくあるspiとかいうやつとweb gab? とかいうやつ
・両方ともwebで練習問題や解き方のコツがあるからそれをやろう

## エントリー(ここがポイント)
・実はエージェントに隠してもう一社志望した
・第一希望と同じ業種、規模、いわゆる**ど競合**
・面接日スケジュールも**敢えて近くに設定した**

## 面接当日
・「他社は受けていますか？」←これ十中八九訊かれるだろ笑
・ここで上記の戦略が活きる
・同じような進み具合ですと正直に話す
・相手、明らか焦る。目の前の魚を逃すまいと。ライバルのアイツに獲られまいと
・「どちらが第一希望ですか」「もちろんオンシャです＾＾」

## 結果
### はい採用。対戦ありがとうございました。

## も一度ポイント
・相手に **「自分は貴重な人材」** だと思わせる
・オリジナリティ、クオリティ、パーソナリティ・・・etc
・ワイは「機会」でそれを作った

# ここまでお読みいただきありがとうございました！
# ↓いいね、ストックしていただけると嬉しいです😊
Docker上のmacOSコンテナにiPhoneをUSB接続する際のエラー解決法

### 概要
Docker環境でmacOSコンテナを使い、iPhoneをUSB接続する際に発生したエラー
```
% sudo usbfluxd -f -r 172.17.0.1:5000
...
ERROR: Could not connect to 172.17.0.1:5000
ERROR: Failed to add 172.17.0.1:5000 to list of remotes
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/e2020276-03c4-2fd6-e462-826b1fc4e38a.png)

---

### 1. 環境と前提条件
- ubuntu desktop 24.04を利用する
- Docker上でmacOSコンテナを使ってiPhoneを接続する

### 2. 解決方法

- Ubuntuのファイアウォール（`ufw`）がポート5000での接続をブロックしていた可能性があるため、ポートを開放するコマンドを実行。
    ```bash
    sudo ufw allow 5000
    ```
- 再度`usbfluxd`を起動し、macOSコンテナからの接続が成功したことを確認。

### 3. 接続成功

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/2d0a875e-acf6-1fa8-70ba-1f6c3074020f.png)


## Refer
https://github.com/sickcodes/Docker-OSX
QAはゴールキーパーではない！開発プロセスに品質を浸透させる新たなQAの役割

## はじめに
QA（品質保証）と聞くと、リリース前にバグを防ぐ「最後の砦」としての役割を想像される方が多いかもしれません。しかし、現代のQAの役割はそれだけではありません。今回は、品質を開発の初期段階から守り、チーム全体で作り上げる「品質促進者」としての新しい役割についてお伝えします。

## 従来のQA：ゴールキーパー的な役割
従来のQAは、製品リリース直前の最終チェックを担当し、バグや仕様不備を発見して修正を促す役割に留まっていました。このアプローチでは、リリース寸前に問題が集中し、手戻りコストやスケジュール遅延のリスクが高まります。

## 現代のQA：品質促進者としての新しい役割
今求められているのは、開発初期段階から関わり、リスクや問題を未然に防ぐ「プロアクティブな品質保証者」としてのQAです。このアプローチにより、リリース前の手戻りを減らし、製品の信頼性を向上させることが可能です。

## 具体的な取り組み
1. 仕様策定・設計段階からの関与: QAがプロジェクトの早期段階で仕様や設計のリスクを把握し、品質を意識した設計を促します。
2. 自動化による効率化: リグレッションテストやユニットテストを自動化し、手作業の負担を減らしつつ迅速なフィードバックを提供します。
3. 開発チームとの連携: QAと開発が密接に連携し、テストの視点から早期にフィードバックすることで、仕様と実装のギャップを解消します。
##  ゴールキーパーから品質促進者へ
「ゴールキーパー」的なQAには限界がありますが、「品質促進者」としてのQAは、早期のリスク発見・対策により、プロジェクト全体の進行を円滑にします。結果として、チーム全体が品質を意識する文化が育ち、顧客に信頼される製品を提供することができます。

##  まとめ
QAの役割が進化することで、開発プロセス全体の品質が向上し、リリーススピードも速まります。チーム全員で品質を作り上げる姿勢が、現代の開発には必要です。
格安高品質国産の汎用はんだスペーサー

それはガラスビーズ、トーホー 丸小 バラビーズ 外径 約2.2mm。100円程度で数百個入っている。

メーカーサイトはここなんだけど、製品そのものを見つけられない。

http://www.toho-beads.co.jp/

あきばお〜だと、これ。色は沢山あるのでお好みで。

http://p.akibaoo.co.jp/c/item/4964291000414/

もともとの切っ掛けは Sunhayato のチェック端子を見て、ビーズで良くねっと思ったところから。

https://shop.sunhayato.co.jp/products/slc-2-g-kuro?_pos=18&_sid=2e50aa540&_ss=r
新卒3年目、はじめての転職活動を終えて

今年の2月ごろから転職を始めて、5月に内定をいただき、7月に入社しました。

# 転職時のレベル
- ジュニアレベル, エンジニア3年目
- ほぼ Ruby, Ruby on Rails のみ

# 利用した転職サービス
- 直応募
ホームページから応募したのが多かったです。
応募しきったなっていうタイミングでエージェントを2社利用(以下で紹介)しました。

- LAPRAS
スカウト形式で自分で企業とやり取り！
スカウト形式大好き！

- offers(エージェント)
色々と合いそうな求人を紹介してくれました。
カジュアル面談できるかどうかエージェント経由で聞いてくれます。

- Findy(ユーザーサクセス)
キャリアの壁打ちや職務経歴書のアドバイスももらえます。
ユーザーサクセスに申し込むとスカウトがあった企業と必ずカジュアル面談ができます◎

# やっておけばよかったこと
日々やっていたことを職務経歴書にこまめに書いておくべきでした。
去年にやったことを細かく覚えていないので、メモ程度の記録を頼りに職務経歴書を作成しました。
面接の時に、頑張ったタスクの説明がしどろもどろになってしまった時があってもったいなかったです。

最終面接の日を揃えておくべきでした。
特に意識せずに面接を進めていたので、オファー内容を複数社と比較できずに終えました。
(今の会社、めちゃくちゃ楽しいので入社したことは全く後悔していないです！！)

転職ドラフトさんのタイミングが合わなかったので次転職するときには使いたいです！

# ちょっと苦労したこと
転職はタイミングが大事だなと思うことがありました。
私が転職を検討していた会社がジュニアの募集をしていないことがあり、どこも即戦力ができれば欲しいという状態でした。

# ふりかえり
たくさんの企業とカジュアル面談できて、貴重な機会でした！
特にtoB企業は自分の知らない業界/企業があって世界が少し広がりました。
優先順位全部！みたいな少し欲張った条件で探していたのですが、自分が満足する会社に入社できて本当によかったです。
また、転職をして、自分が挑戦したかったことができるようになってやりがいを感じています。
文化祭でクラスのWebページ作った話

## 導入
こんにちは。
とある[納豆高専](https://www.ibaraki-ct.ac.jp/)で学生やってます。

今年の10月末に実施した茨香祭（本校の文化祭）でクラスのWebページを作ったのでブログにまとめようと思います。

https://github.com/Juna1013/3m2-shikousai-marugame

https://3m2-shikousai-marugame.vercel.app

## サイト概要
僕のクラスではクレープを出店しました。
「丸亀クレープ」ということで具材を自由にカスタマイズできるシステムでした。
サイトの内容は以下のとおりです。
- 開催日時
- 出店内容の説明
- メニュー表
- 場所など
- Instagramのリンク

それぞれの内容をタイル形式で配置しました。
反省点として、レスポンシブデザインを作る時間がなかったためスマホ専用の構成で開発したことです（PCでは見ないで）。

![Screenshot_2024-11-08-22-58-57-98_1c337646f29875672b5a61192b9010f9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930232/18aa7693-69ce-5407-d2e1-8c8e87884192.jpeg)

## 技術スタック
基本的にHTMLで直書きしてます。イベント当日までのカウントダウンはJavaScriptで動かしました。唯一のフレームワークとしてTailwindCSSを使っています（すごい便利だった、特にクラス名を管理しなくていいのが）。
今度作る時はAstroとかReactを使いたいです（実行委員会のWebページは使ってました）。

## タイムライン
以下、開発の軌跡になります。
詳しくは後述しますが、サーバーにデプロイする過程で1番苦労しました（しかも原因がダサすぎる…）。
### 7月
部活の先輩が前回の茨香祭でWebアプリを作っていたのを思い出し作ろうと決心。この時はWebアプリを作ろうと志していましたが技術が足りずすぐに諦めて静的サイトに逃げました。
### 8月
前期期末テスト終了後に開発を始めました。
最初はHTMLとCSSのみを使ったシンプルなサイトをイメージしていました（Figmaは使いませんでした、後悔…）。
Webページで使うために作ったアイコンがクラスのサークルカットにも起用されたので嬉しかったです。
### 9月
夏休みということもあり少しJavaScriptに挑戦してみました。
結構コピペしましたが、結果的にイベント当日までのカウントダウンを入れることに成功しました。
また、公式ドキュメントとチートシートを使いながらTailwindCSSも取り入れました。最初は結構難しかったですが、慣れるととても便利でした（特にクラス名）。

ここで1つ問題が、先述したとおりサーバーへのデプロイです。
部活の先輩が前に使っていたVercelを使おうとしましたが、サイトへ飛んでも404…。クラスでLinux使ってるイケメンに聞いたところファイル名が原因とのこと…。修正したら一発でデプロイに成功しました。
### 10月
クラスの出し物のコンセプトが「冷たいクレープ」になったため、サイトのデザインを暖色系から寒色系に変更しました。
あとはメニュー表を追加しました。
土台は夏休み中に作れていたので直前で焦ることがなくてよかったです。

## 終了後
実は1年生の後輩も同じようにクレープを出店していて、そのサイトを作っていました。ちなみにクオリティは完敗です…。
次に開発する時はもっとフレームワークを使って機能的なサイトにしたいです。
加えて別の後輩が会計アプリを開発していたと知り、バックエンドが羨ましくなりました。ただ、「先輩はまずフロントエンドのお勉強を」と言われ冷静になりました。React頑張ります。

## 感想
今回の開発を通して様々な技術に触れることができました。
やはりプログラムを学ぶうえで大切なことは理論のインプットだけでなく実装を通してアウトプットをしていくことだと思います。
初めてのWeb開発でしたがとてもいい経験になりました。
今後はもっとハイクオリティな開発をしていけたらなと考えています。

ここまで読んでいただきありがとうございました。
新人エンジニア向け‼︎アジャイルまたはスクラム開発用語集

# この記事を書いた背景
スクラム開発に参画した時、専門用語が飛び交っていました。
これって現場独自の用語かと思ったらアジャイル開発でよく使われる用語でした。
スクールでも教えてくれなかったり、使っていない現場もあったりします。

今日はそうならないためにアジャイル開発用語集を書いて見ようと思いました。

状況を見て更新していこうと思います。

# そもそもアジャイル、スクラムとは
```アジャイル開発```は***決められた通りに開発せず、顧客の要望やビジネス方針の変更などによって
作るものを変えていく開発手法の考え方や価値観の総称***です。
```スクラム開発はジャイルを実践する具体的なフレームワーク```です。

# スプリント
大きな目標を小さな「```スプリント```」という区切りに分けて作業をしていきます。

ex)
2週間のスプリントの中で「できること」だけをやりきるイメージです。
例: 夏休みの宿題を1週間ごとに分けて少しずつ進める感じ。

# スプリントレビュー
***スプリントの終わりに「どんな成果が出たか」を見せ合う会議***です。

# スプリントレトロスペクティブ(レトロ)
スプリントの後で、***「何がうまくいったか」「次はどう工夫できるか」を振り返り、
次のスプリントをもっと良くするためのアイデアを出し合う会議***です。

# スプリントプランニング
スプリント開始時に、「このスプリントで何ができるのか、どうやって達成するか」、を確認するミーティングです。

# デイリースクラム
毎日短いミーティングを行い、各メンバーが「昨日の進捗」「今日やること」をやる。

# バックログ
***やらなきゃいけないTodoリスト***です。

# インクリメント
スプリントの終わりに***少しずつ出来上がった「完成品のかけら」*** のことです。

# PO(プロダクトオーナー)
***チームの中で「みんなが何を作るか」を決める人***です。

# PM(プロジェクトマネージャー)
***プロジェクトを成功させるためのマネジメントをする人***です。

# スクラムマスター
***チームのメンバーがスムーズに仕事を進められるように助ける人***です。

# スクラムイベント
スプリント
スプリントプランニング
デイリースクラム
スプリントレビュー
レトロ

など

# ベロシティ
***チームがどれくらいの速さで仕事を進められるかを示す速さの目安***です。

# ストーリーポイント
***ある仕事や作業がどれくらい大変かを表す数字***です。

# リファインメント
やるべき仕事（バックログ）の内容をチーム全員で話し合って、
***作業を分けたり、分かりやすく整理したりすること***です。

# AC(Acceptance Criteria)
日本語では「受け入れ条件」とも呼ばれます。アジャイル開発において、ユーザーストーリーやタスクが「完了した」と判断するための条件や基準を示すものです。

# PBI
***Product Backlog Item（プロダクトバックログアイテム）***のことで、が開発する製品やサービスに関する***作業項目や要件***のことです。

# 資料

https://qiita.com/newnakashima/items/5c28c1f208e9517154c6

https://enlyt.co.jp/blog/agile/

https://designthinking-agile.jp.ricoh/n/n1a57dac35c86
Arduino 2.x.x 系で ATtiny を使えるように設定

# はじめに
Arduino 2.x.x 系で 追加のボードマネージャのURLに、
http://drazzy.com/package_drazzy.com_index.json を貼り付けてOKをしても、ボードマネージャに表示されませんでしたので、使えるように設定してみました。

![スクリーンショット 2024-11-08 21.33.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111210/b535d6af-7f97-60dd-c13d-10c4708138af.png)

# giphub から zipファイルをダウンロード
下記 github より、zipファイルをダウンロードして解凍したファイルを hardware フォルダに入れて試してみます。

https://github.com/SpenceKonde/ATTinyCore/blob/v2.0.0-devThis-is-the-head-submit-PRs-against-this/Installation.md

Manual Installation
Option 1: Download the .zip, extract, and place in the hardware folder inside your sketchbook folder (if there is no hardware folder, create it). You can find/set the location of the sketchbook folder in the Arduino IDE at File > Preferences -> Sketchbook location.

![スクリーンショット 2024-11-08 21.37.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111210/c3798ecc-82b1-8323-5d14-f7caed388938.png)

# zip ファイルのダウンロード
Code のプルダウンメニューで、Download ZIPをクリックします。

![スクリーンショット 2024-11-08 21.37.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111210/4192cd5c-1c10-1c24-c47b-fb55eddeeb39.png)

ダウンロードした zip ファイルを解凍して hardware フォルダにコピーします。

![スクリーンショット 2024-11-08 21.39.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111210/df8a9130-a072-14e2-dc6b-378f6bc1d629.png)

![スクリーンショット 2024-11-08 22.16.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111210/4284d1a2-1835-494e-2bd8-b9dacec41b64.png)

Arduino立ち上げると ATtinyCore が、見えるようになります。
char型とint型の関係

## はじめに
文字列探索のアルゴリズムのひとつである**Boyer-Moore法**(BM法)を学習しているときに、とある疑問が浮かんだ。

まずは、BM法のコードを示す。(BM法の詳細は割愛)
```java:BM法
package org.example;

public class StringSearch {
  public static int bmSearch(String text, String pattern) {
    int textLength = text.length();
    int patternLength = pattern.length();

    int[] skipTable = new int[256];  // 1byteの文字に対応
    for (int i = 0; i < 256; i++) {
      skipTable[i] = patternLength;
    }
    for (int i = 0; i < patternLength - 1; i++) {
      skipTable[pattern.charAt(i)] = patternLength - i - 1;
    }

    int i = patternLength - 1;
    while (i < textLength) {
      int j = patternLength - 1;
      while (j >= 0 && text.charAt(i - (patternLength - 1 - j)) == pattern.charAt(j)) { 
        j--;
      }
      if (j < 0) {
        return i - (patternLength - 1);
      }
      i += skipTable[text.charAt(i)];
    }
    return -1;
  }
}
```
## 疑問
`skipTable[pattern.charAt(i)]`や`skipTable[text.charAt(i)]`の部分でインデックスの指定に`int`型ではなく`char`型の値が指定されている。
なぜ？`int`型じゃないとエラーが起きるのでは？
※ `文字列.charAt(i)` は、文字列のi番目の文字を返すメソッド。


疑問に思い調べてみると、`char`型は整数のUnicode値を持っており、Javaでは暗黙的に `int`型へと自動変換されるため、配列のインデックスとして利用可能とのこと。
例えば、`'A'`はUnicodeで`65`、`'g'`はUnicodeで`103`のように変換される。

```java:char → int
package org.example;

public class TypeCast {
  public static void char2int(char c) {
    int n = c;
    System.out.printf("「%c」 はUNICODEで %d%n", c, n);
  }

  public static void main(String[] args) {
    char2int('A');  // 「A」 はUNICODEで 65
    char2int('g');  // 「g」 はUNICODEで 103
  }
}
```
逆に`int`型を`char`型にキャストしてみるとどうなるだろうか？
結果としては、`65`は`'A'`に、`103`は`'g'`に変換された。 
```java:int → char
package org.example;

public class TypeCast {
  public static void int2char(int n) {
    char c = (char)n;
    System.out.printf("「%d」 のchar型は %c%n", n, c);
  }

  public static void main(String[] args) {
    int2char(65);  // 「65」 のchar型は A
    int2char(103);  // 「103」 のchar型は g
  }
}
```

## まとめ
`char`型と`int`型を相互に変換することは可能。
転職活動で自分と相性の合う企業とマッチするための準備と心構え

面接成功の鍵は「自分と企業との相性」を見極めること。事前準備、心構え、そして自己アピールの工夫により、相手にポジティブな印象を与えるだけでなく、あなた自身も企業が本当にふさわしい場所かどうかを判断する場です。本記事では、面接を通じて相性を見極めるためのポイントと実践的な準備方法についてご紹介します。

# 1. 面接は「相互選考の場」であるという心構え
まず、面接の意義を理解することが大切です。面接は、企業があなたを評価する場であると同時に、あなたも企業を評価する場。ただ内定を得ることを目標とせず、「自分が本当に働きたい場所か」を見極める機会だと考えましょう。

あなたと企業は対等な関係にあり、企業文化や仕事のスタイルが合わない場合、選考で進まない結果になっても自分に非があるわけではありません。むしろ、採用されることがゴールではなく、自分に合った企業を選ぶことが真の成功です。内定を受ける際も、冷静に考えたうえで「本当に自分に合った場所かどうか」を基準にすることが重要です。

# 2. ポートフォリオを通じて具体的なスキルを示す
エンジニアやデザイナーなど、実績が求められる職種では、ポートフォリオが決定的な要素となります。ポートフォリオは百聞は一見に如かずの最たるもので、自分の技術力やスキルを具体的に伝える手段です。

さらに、技術面だけでなく、なぜそのプロジェクトに取り組んだのか、どのような工夫を凝らしたのかをストーリーとして伝えることで、より深い印象を与えられます。このような背景を含めてポートフォリオを説明することで、あなたの「人間性」や「意欲」が企業側に伝わり、面接時のミスマッチを防ぐ効果が期待できます。

# 3. 自己紹介で「フック」を作り、効果的に印象を残す
面接での自己紹介は、面接官にあなたの印象を残す絶好のチャンスです。面接官は多数の自己紹介を聞き慣れているため、一般的な自己紹介に留まると埋もれてしまいがちです。そのため、自己紹介には「フック」を入れましょう。特に、あなたが深掘りしてほしい点や自信を持って伝えたいことについて簡潔に触れ、関心を引くことで、あなたの強みをアピールする流れを作り出すことができます。

例として、「個人開発でサービスを作ったがうまくいかなかったため、ビジネス視点も学びたい」というエピソードを交えると、成長意欲や学びへの姿勢をアピールできます。さらに、自身の課題や弱みも率直に伝えることで、相手に誠実で自然な印象を与えられ、自己評価や向上心の高さが評価される場合もあります。

# まとめ
転職活動は「内定を得る」ことがゴールではなく、「自分に合った企業を見極め、選択すること」が目的です。面接の場で自分を過度に装うのではなく、正直かつ自然体で臨むことが、企業と良い関係を築くための第一歩です。

- 面接は企業選びの場でもあると認識し、自分にとってふさわしい企業かを見極める。
- ポートフォリオを活用して、技術力だけでなく人間性もアピールする。
- 自己紹介にフックを作り、面接官にあなたの強みを引き出してもらうように工夫する。

これらのポイントを押さえて、転職活動を通じて自分に合った職場を見つけましょう。
手動で.NET Framework 4.7.2` をターゲットとするWPFプロジェクトの作成方法

.NET Framework 4.7.2`を直接ターゲットにしてWPFプロジェクトを作成する際に、visual stadioに4.7.2が入っていない場合に、以下の手動作業が必要になるのでメモします。

#### 手順1: プロジェクトの作成
まず、`dotnet new wpf`コマンドで、別のターゲットフレームワークを指定して仮のプロジェクトを作成します。例えば、`netcoreapp3.1`を指定してプロジェクトを作成します。

```sh
dotnet new wpf -f netcoreapp3.1 -o MyWpfApp
```

#### 手順2: プロジェクトファイルの編集
プロジェクトディレクトリに移動し、`MyWpfApp.csproj`ファイルを編集します。

```sh
cd MyWpfApp
```

`MyWpfApp.csproj`ファイル内の`TargetFramework`を以下のように変更します：

```xml
<TargetFramework>net472</TargetFramework>
```

#### 手順3: 必要なパッケージのインストール
`.NET Framework 4.7.2`のプロジェクトには必要なパッケージをインストールします。

```sh
dotnet restore
```

#### 手順4: プロジェクトのビルドと実行
最後に、以下のコマンドでプロジェクトをビルドして実行します。

```sh
dotnet build
dotnet run
```

---

### Visual Studioを使用する場合の手順

1. Visual Studioを開き、「新しいプロジェクトの作成」を選択します。
2. 「WPFアプリケーション (.NET Framework)」を選択します。
3. プロジェクト名と保存場所を指定し、「次へ」をクリックします。
4. フレームワークとして`.NET Framework 4.7.2`を選択し、「作成」をクリックします。

これで、Visual Studioを使用して`.NET Framework 4.7.2`をターゲットとするWPFプロジェクトが簡単に作成できます。
JavaScriptでスクロールバーのWidthを計算する方法

こんばんは。

今日は「JavaScriptでスクロールバーのWidthを計算する方法」について説明いたします。

一般的なスクロールバーの幅を計算する方法は、以下の手順で行います：

- スクロールバーの幅を取得する要素を準備する
仮の要素（例えば `div`）を作成し、幅を`100px`などに設定します。
- スクロールバーを表示させるためにオーバーフローを設定する
その要素に`overflow: scroll;`を設定し、スクロールバーが常に表示されるようにします。
- 要素の内側と外側の幅を取得
    - 内側の幅（スクロールバーが除かれた部分の幅）を`clientWidth`プロパティで取得します。
    - 外側の幅を`offsetWidth`プロパティで取得します。
- 幅の差を計算
`offsetWidth`と`clientWidth`の差が、スクロールバーの幅になります。

例えば、`JavaScript`でスクロールバー幅を取得するコードは以下のようになります：

```javascript
function getScrollbarWidth() {
  const div = document.createElement('div');
  div.style.width = '100px';
  div.style.height = '100px';
  div.style.overflow = 'scroll';
  div.style.position = 'absolute';
  div.style.top = '-9999px';
  document.body.appendChild(div);

  const scrollbarWidth = div.offsetWidth - div.clientWidth;

  document.body.removeChild(div);
  return scrollbarWidth;
}

console.log(getScrollbarWidth()); // スクロールバーの幅が表示されます
```

この関数は一時的にスクロールバーを表示するための要素を作成し、その幅の差からスクロールバーの幅を計算します。

# まとめ

一般的なスクロールバーのWidthは、オペレーティングシステムやブラウザによって異なりますが、主に以下のような値になります

- Windows（ほとんどのブラウザ）： 約 17px
- MacOS（Chrome、Safariなど）： 通常、スクロールバーはデフォルトで表示されず、ユーザーがスクロールするときのみ細く表示されます。しかし、スクロールバーを常に表示する設定にした場合、約 15px 程度になります。
- モバイルブラウザ： ほとんどのモバイル環境では、スクロールバーが自動的に隠れるか、細く表示されるため、幅の影響はほとんどありません。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
ibusをログアウトせず再起動する

# 概要

キーボードレイアウト変更時に再起動を求められた。しかし、その方法がすぐわからなかったのでメモ。

## ibusをkillする

ps axにてプロセス番号を調べてkillする。

```sh
ps ax | grep ibus
```

私の環境では以下のプロセスをkillした。

```sh
/usr/bin/ibus-daemon --replace --panel disable --xim
```

## ibus起動

以下のコマンドにて再起動する。

```sh
ibus-daemon -R
```
Rover製作18 Feetechサーボを動かす

# 環境

この記事は以下の環境で動いています。

| 項目 |	値 |
|:--|:--|
| CPU | Core i5-8250U |
| OS | WIndows11 |

# 概要

STS3215は安価なfeetech製シリアル通信方式のサーボで、秋月で販売さています。EspressoFrameではこれで2軸のパンチルトカメラを作っています。
パンチルトカメラの組み立てをするためには、サーボのIDの書き換えとサーボをセンターに向かせる必要があります。そのためにここでは公式のWindowsのアプリで動作させます。

![M-16312.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254442/64d09457-b409-19fa-ac3e-bbbe77c58721.jpeg)
[秋月電子web](https://akizukidenshi.com/catalog/g/gM-16312/)より

# feetech STS3215

## 機能
STS3215はシリアル通信方式のサーボで以下の特徴があります。

* 電圧6~7.4V
* 最大トルク19.5kg・cm
* 最大速度0.192sec/60deg
* 360deg回転
* 両軸（出力軸の逆側にもフリー軸がある）
* 3線シリアル接続（デイジーチェーン可）
* 速度制御可能

[公式サイト](https://www.feetechrc.com/74v-19-kgcm-plastic-case-metal-tooth-magnetic-code-double-axis-ttl-series-steering-gear.html)に詳細の情報があります。

[秋月電子Web](https://akizukidenshi.com/catalog/g/gM-16312/)で3000円弱で販売されていて、この性能のサーボにしては大変安価です。
またUSBシリアル変換基板であるインターフェイス基板が同様に[秋月電子web](https://akizukidenshi.com/catalog/g/gM-16295/)にて1500円弱で売っていると、まさにROSとつなぐのにうってつけの部品です。

## HW接続

本体はM2タッピングねじで止めるのですがねじ穴の周りが複雑な形状をしていて、それをよける板を作成する必要があります。Top側とBottom側で形が違うのですがそれぞれ以下のような切り欠きがある板を作る必要があります

↓Top側
![servo切り抜きtop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254442/a21e5d32-ffe2-2668-93cd-81839ff43fcb.png)

↓Bottom側
![servo切り抜きbottom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254442/77ff182a-2886-d212-13cd-858f9a481505.png)


また付属のケーブルが15cmで今回の形に組み立てようとすると長さが足りませんでした。3Pinシリアルのコネクタは以下のMolexの物を使っています。

* ハウジング Molex5264-03 [千石web](https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-0HWD)
* ピン Molex5263 [千石web](https://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-0HWF)


# FT SCServo Debugを使った試運転(on Windows)

Feetech純正のサーボモーターの試運転や設定をする純正アプリがあります。

## HW接続

![FE-URT-01接続.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254442/104f70b7-a08b-9573-8d0a-e2df0001a8be.jpeg)

* USBをPCと接続
* 電源(G & V1)を7.2V電源と接続
* SCSと書かれた側のコネクタをサーボモーターと接続
* スイッチは5V側に倒す

## ソフトウェアの起動

インターフェイス基板はUSB-シリアル変換ICの「CH340」が使われています。最新のWindowsならドライバーはすでに入っているはずです。

[秋月web](https://akizukidenshi.com/catalog/g/gM-16295/)より「FT-SCServo Debug V1.9.8(FD1.9.8-EN_200923.zip)」をダウンロードして解凍します。
中の「FD1.9.8-EN_200923」の「FD.exe」を起動します。

[公式](https://www.feetechrc.com/software.html)からでもダウンロードできます。

![FD1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254442/1d7bd5ac-690f-7100-e214-483b87af5a96.png)

* 左の「Com Setting」の「Com」でポートを選択します。
* 「BaudR」は「1000000」を選択して、「Open」ボタンを押します。
* 「Servo List」の「Search」ボタンを押すとつながっているサーボモーターのIDをスキャンします。
* 出てきたリストの中から操作したい行を選択します。
* 「Servo Control」のスライダーを操作すると、サーボの軸が動きます。

## IDの書き換え

* 「Programming」タブに切り替えます。
* ここの「ID」の部分の値を書き換えます。

# 目次ページへのリンク
[ROS2講座の目次へのリンク](https://qiita.com/srs/items/5f0d765343ca78f524ed)
Flutterで新しくアプリを開発する際の手順（Firebaseのセットアップ、git、ProvisionigProfile等）

①新規作成、Firebaseのセットアップ

1.フォルダを作成したいディレクトリに移動
2.flutter create --org com.yourcompany your_project_nameで新規作成
（flutter createのみだと、例のごとくバンドルidがcom.exampleになってだるいので、必ず--org以降で指定する）
3.Firebaseのサイトにおいて、新しくプロジェクトを作成する
（コマンドからやろうとしたら、idを入力する際になぜかバグるので、普通にサイトから作成する）
4.2で作ったやつにおいて、flutterfire configureを打ち、3で作成したプロジェクトをターミナル上で選択する
5.（選択したOSのアプリが自動で登録される）
6.flutter pub add firebase_core打つ
7.flutterfire configure打つ（←4と同じことすることになる。但しアプリは登録済みなので再登録はされない）
8.main.dartで
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
して、main()をasyncにして冒頭に
await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);
を追加する
9.flutter run打つ

参考:
https://firebase.google.com/docs/flutter/setup?hl=ja&platform=ios

②ProvisioningProfileをXcodeに自動で作成してもらうための準備

1.https://developer.apple.com/account/resources/certificates/list
2.certificateにおいて、dev・disそれぞれのcertificateが切れてないか確認
3.deviceにおいて、実機が登録されているか確認
4.Identifierにおいて、プラスボタン→App Idsを選択&continue→Appを選択&continue→Discriptionに適当にアプリ名、BundleIDに、ios/Runner.xcodeproj/project.pbxprojでPRODUCT_BUNDLE_IDENTIFIERで検索して出てくるやつ、リストからPush Notificationを選択してcontinue
5.vscode上でiosフォルダを右クリック→xcodeを開く
6.Runnerを選択し、Signing&Capabillitiesを選択
7.Signingタブにおいて、Automatically manage signingを選択
8.Teamで自分のチームを選択
9.実機とケーブル繋いでflutter runして起動すれば（Automoatically signingによって自動で適切なProvisioning Profileが生成されるので）問題なし
（※何も表示されなかった）

③gitの接続

1.githubのサイトからリポジトリを新規作成
2.git init打つ
3.git add .打つ
4.git commit -m "意気込み"打つ
5.git remote add origin https://〜打つ
6.git push -u origin main打つ
7.githubのサイトからリポジトリ開いてプッシュされてるか確認
gnomeでcapsとctrlの入れ替え

# CapsLockとCtrlの入れ替え

GUI上でログインしたときにCapsLockキーとCtrlキーを入れ替えたり戻したりを行いたい。以下のコマンドは一般ユーザーで入力して変更を行う。

## CapsLockキーをCtrlキーにする

```sh
gsettings set org.gnome.desktop.input-sources xkb-options "['ctrl:nocaps']"
```

## CapsLockキーとCtrlキーを入れ替える

```sh
gsettings set org.gnome.desktop.input-sources xkb-options "['ctrl:swapcaps']"
```

## CapsLockキーの設定を初期状態にリセットする

```sh
gsettings reset org.gnome.desktop.input-sources xkb-options
```

# 参考

https://linuxfan.info/capslock-ctrl
RDBMSの設計について要点を洗い出す

#### RDBMSの設計で考慮する点についてまとめてみました
## 目次
[・3層スキーマ](#3層スキーマ)
[・論理設計](#論理設計)
[・物理設計](#物理設計)
[・データベースのパフォーマンス](#データベースのパフォーマンス)

## 3層スキーマ
データベースのデータ構造

- **外部スキーマ（ビュー）**
  - SQL取得結果
- **概念スキーマ（テーブルの骨組み）**
  - テーブルの内容・テーブル同士の関係性
  - 論理設計
- **内部スキーマ（データ格納の骨組み）**
  - カラム名・型・インデックスなど…
  - 物理設計（DDLやストレージ）

## 論理設計
概念スキーマを設計するもの
1. **エンティティ（テーブル）の洗い出し**
2. **エンティティの定義決め**
3. **正規化**
   - 目的：データ重複の排除
   - ***第一正規形***
     ・ 1つのフィールドには原子的な値（単一の値）しか含まれない
     ・ 偏りのあるデータパターンを回避する
     ・ 例：「住所」として「郵便番号」「市区町村」「番地」などを1つのカラムに入れるのではなく、各要素を別々のカラムに分ける
   - ***第二正規形***
     ・ 部分関数従属性（ y（テーブル）= x（カラム） = z（カラム）)を排除
     ・ 正： y = x,  y’ = z
     ・ 例：「受注テーブル」に「顧客名」を直接持たせるのではなく、「顧客テーブル」を別に作り、顧客情報を管理
   - ***第三正規形***
     ・ 推移的関数従属性を排除
     ・ データパターンとして存在するが、テーブル（データ）には存在していない
     　  → データパターンはマスタで管理することが多い
     ・ 例：「部署番号」に基づく「部署名」を「社員テーブル」に持つのではなく、「部署テーブル」を作成し、そこに「部署番号」と「部署名」を記録
4. **ER図**
   - 目的：エンティティ同士の関係を表現する図
   - ***リレーションパターン***
       ・ 1対1　→　例：社員テーブル、社員証テーブル（※一意社員に対して、一意の社員証が発行される場合）
       ・１体多　→　例：社員テーブル、部署テーブル（※一意の部署に対して、複数の社員が属している場合）
   - ER図の書き方については下記を参照
    https://www.ntt.com/business/services/rink/knowledge/archive_58.html

## 物理設計
1. **テーブル定義**
1. **インデックス定義**
1. **ハードウェアのサイジング**
   - キャパシティのサイジング
       - システム利用のデータ量
       - データの増加量
   - パフォーマンスのサイジング
       - 性能要件
   - ストレージの冗長構成
       - オンプレの場合
            - RAID
                - 0：ストライピング
                - 1：ミラーリング
                    - 最低2本
                - 5：パリティ分散
                    - 最低3本必要
                - 1＋0：1と0の組み合わせ型（コスト高）
                    - 最低4本必要
            - レプリケーション
                - 同期 or 非同期
                - 災害対策・負荷分散
                - RPO、RTO
            - データベースファイルの配置先
                - データファイル
                    - データベースに格納するデータを保持するファイル
                - インデックスファイル
                - システムファイル
                - 一時ファイル
                - ログファイル
                - 全てのファイルが異なるRAIDに分けるのが理想だが、
                  コストが高いのでシステム・ログファイルは統合…など考慮が必要になる
      - クラウド（AWS）の場合
        - RAID、災害対策はマルチAZ（リージョン）でカバー
        - データベースファイル配置はRDS、Aurora、S3などPJの要件によって左右される
    - バックアップ方式
        - フルバックアップ + 差分 or 増分バックアップを検討する
        - リカバリ、リストア、ロールフォワードの手順検討が必要
            - クラウドではPITRやを使用して対応する
    - DDL構文
        - DROP
        - CREATE
        - ALTER
## データベースのパフォーマンス
   - 結合しないSQLを作るためのテーブル設計を考慮する
       - 非正規化になりうるためトレードオフが必要になる
   - インデックス
        - B-tree
            - 対象テーブルが大きいこと
            - カーディナリティが高いこと
                - 他にもいくつか条件があることに注意が必要
   - 統計情報（実行計画）
        - SQL構文でデータを絞り込む順番を理解
        - 個人的に富士通さんの下記サイトがかなり参考になりました
          https://www.fujitsu.com/jp/products/software/resources/feature-stories/postgres/article-index/implement-sqltuning/          
   - その他
        - パーティション
        - ヒント句
            - バージョン変更で取得パターンが変わったりするので、個人的にはあまり好きじゃない
        - マテビュー
            - 取得データの日付など厳格な決まりがあらかじめ必要
 ## さいごに
サイジングや冗長構成のオンプレは実機を作って触らないと理解するの難しそう…。
クラウド（AWS）は無料枠が設けられていたり様々なチュートリアルがあるので、そちらを学んで行けばいくらか精通できそうな気がしました。
【イベントレポート】LiON主催ミートアップ「エンジニアのキャリア戦略を考えよう」

## はじめに
こんにちは、エンジニアコミュニティ LinuC Open Network （LiON）の運営事務局に参加させていただいております伊藤です！

今回は、10月に開催したLiON主催のミートアップイベント「令和版！エンジニアのキャリア戦略を考えよう」について、その様子をレポートします。

connpassのイベントページはこちら。

https://lion.connpass.com/event/333109/

## イベント概要
今回のイベントは、ITエンジニアの成長と活躍を促すコミュニティ「LinuC Open Network（LiON）」が主催するミートアップイベントで、どなたでもご参加いただけるものです。講演を聴くだけではなく、参加者全員の自己紹介や、懇親会も組み合わせた全員参加型イベントとなっております。LiONでは、こうした交流イベントをリアルとオンラインを交互に毎月開催しています。


今回のトークセッションは、「令和版！エンジニアのキャリア戦略を考えよう」と題し、ゲストに日本PostgreSQLユーザ会　理事長　喜田紘介 氏を迎えてお届けしました。

## イベントの様子
さて、イベント当日の様子を写真を交えてご紹介していきます。

### LinuC Open Network コミュニティのご紹介
まずはオープニングとして、私からコミュニティの紹介をさせていただきました。
LiONはLPI-Japan様のサポートのもと、有志によって運営される、ITエンジニアのためのコミュニティです。
エンジニアの成長と活躍を強力に後押ししていくことを目指しています。

![20241024_191057.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810512/a0f93f5d-12cc-67b2-4dc8-397d615bf1e1.jpeg)

## コミュニティメンバーによるLT（ライトニングトーク）
今回は、まだ社会人2年目という若いメンバーが、ベテランエンジニアとタッグを組んでペアで発表していただきました。キャリアをテーマに、どのような価値観で、どのように取り組んでいるかなど、等身大の共感ができるのも、コミュニティだからこそですね！

![20241024_192416.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810512/308b5704-ae95-f768-7de7-f835dba219c9.jpeg)


## トークセッション「令和版！エンジニアのキャリア戦略を考えよう」
ゲストスピーカーとして、日本PostgreSQLユーザ会　理事長　喜田紘介 氏を迎え、エンジニアのキャリア戦略をテーマにお話を伺いました。聞き手は私です。

印象深かった話を3つご紹介します。

#### コミュニティへの参加
喜田さんは若手の頃から業界のコミュニティに積極的に参加し、そこで自社内にはないような知見や情報を獲得して持ち帰ることによって、社内での評価も高めることができたとのことです。また、コミュニティでは業界の有力者の方等からも様々な機会を与えていただき、まさに業界の先輩方に自身を引き上げてもらえたと。「飲み会も大事です！」と笑い話を交えながら、自身のキャリア事例を紹介していただきました。

#### 転職のきっかけは「情報発信」
コミュニティ活動等を通して、積極的に情報発信をしていた喜田さんですが、そのような取り組みが目に止まり、現在お勤めの企業への転職につながっていったそうです。
情報発信に取り組む姿勢って大事だなと、改めて実感するお話でした。

#### 資格を取る意味
資格を持っていること自体が直接的にキャリアに有利に働くということはあまりないような気がすると前置きしつつも、資格はとても便利だと言います。まず、特定の分野を体系的に学ぶ際には、やはり資格取得に向けて勉強するのが非常に効率的であるとのことです。また、資格取得によってその分野を体系的に学ぶことで、他のエンジニアとのコミュニケーションが非常にスムーズになるそうです。確かに、保持資格によって、相手との共通言語を即座に把握できれば、より深い話もしやすいですね。

といった形で、会場の参加者からの質問も交えつつ、キャリア話が展開されました。

![20241024_194013.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810512/2aa330df-100b-329a-2fe3-d4b3e7306d40.jpeg)

### 参加者自己紹介＆交流会
トークセッションの後は、ドリンクを片手に一度乾杯し、参加者全員が1人ずつ自己紹介を行なっていきます。そして緩い交流会へと突入。こうしてイベントをきっかけにお互いを知り合い、slackでの継続的なコミュニケーションへと発展していくことで、相互に協力し合える仲間づくり、コミュニティづくりへと繋がっていきます。交流会の後は2次会へと足を運ぶメンバーも多々いらっしゃいました。

![20241024_204825.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810512/7e479dbf-1399-8e85-f38c-4221c12ca409.jpeg)


### 事後アンケート
イベント後には匿名でアンケートを取らせていただきましたが、非常に高評価で、自由記述欄でも、「とても楽しいイベントでした！」「モチベーション上がりました！」「自分のキャリアに参考になるヒントが見つかりました。」「また参加したいです！」と、ポジティブなメッセージをたくさんいただきました。
イベントを企画・運営する私としても非常に励みになります。ありがとうございます。

### おわりに
エンジニアコミュニティ LiONが開催した10月のイベントについてレポートさせていただきました。LiONでは毎月このようなイベントを開催していますし、slackでエンジニア同士の交流が可能です。そして、エンジニアならどなたでも無料でご参加いただけます。興味を持っていただいた方は、ぜひLiONに参加してみてください。あるいは、来月以降のイベントにぜひご参加ください。

次回は11月21日に、オンラインイベントを開催します。詳しくは、下記のconnpassイベントページをご覧ください。

https://lion.connpass.com/event/336339/

<br>
LinuC Open Network で皆様とお会いできるのを楽しみにしております。
<br>
<br>

https://linuc.community/
#csharp #プログラミング # #paiza の環境は.NET Coreではなく.NET Framework(4.0.30319.42000)っぽい

**本内容を利用した場合の一切の責任を私は負いません。**

# 概要
問題の中でArray.Clearメソッドを1引数で使おうとしたらエラーになった。

# バージョン
- Chrome  
バージョン: 130.0.6723.117（Official Build） （64 ビット）

# 詳細
下記がエラー内容。

![core1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397476/f40bad01-2c84-b9fb-545f-add4f6048d60.png)

.NET Coreの仕様は下記。

https://learn.microsoft.com/ja-jp/dotnet/api/system.array.clear?view=net-8.0

.NET Frameworkの仕様は下記。

https://learn.microsoft.com/ja-jp/dotnet/api/system.array.clear?view=netframework-4.8.1

てことで、.NET Coreではないっぽい。
ちなみにバージョン出力は下記。

![core2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397476/b1db7787-c0e3-5f80-2a70-50be21a212c2.png)
Python使ってみた

## Python始めて1週間経って思ったこと

- #### とっかかりが簡単
print ("h.w.") 　これだけで表示される。40年位前にあったBASIC同様。
プログラミング初の人には良いだろうが逆に簡単すぎて他言語やるとき戸惑うかも。

- #### 変数定義
var句すら不要。ただvar句ないと初めて変数を使用したのか書き換えなのかわかり辛
い。

- #### GUIアプリ
IDE次第なんだろうがWinFormsみたいにコントールをポトペタできないらしい。
GUIアプリ作る方法が多数あるようで混乱。
A開発部ではTkinter、B開発部ではPySimpleGUIを使ったり。
Tkinterはコントロールの位置を数値で入れるみたいだが、まるでVC++6.0以前、十数年前のWin32APIの開発みたいで絶句。コントロールが数十個ある場合とか。
使ってたGUI開発ライブラリにバグがあって改修されず開発が終わったらどうなるんだろう。

- #### ブロック構造
インデント、スペースでブロック構造にしているのでコード整形でスペース入れて見栄え直している最中に手違いで違うコードになり動作しなくなる。
ネストが深いと特に気を付けないといけない。cppなら}の位置はどうでも良いがPythonはきちんと整形しないと動作しない。
Webにプレーンテキストとして貼り付けした場合、スペースが消えてしまう事もある。
整形でインデント・スペース消しただけで別コードになるのは理解しがたい。

- 誰が書いても同じになるので良いと書籍にあったが、
if abc==1: xxxx
と
if abc==1:
　　xxxx
の二通りの書き方がある。前者は不可の方が良かった。

コードの最後が、例えば
while (1):
　　n+=1
　　print (n)

こんな風だと最後が尻切れトンボみたいな感じで気持ち悪い。
続きがあるのかないのかよくわからない。
慣れの問題だろうがc,cpp等の使い手には{}がないのは厳しい。

- #### Ver違い

2系と3系の二通りあり互換性が無い為、2系統リリースしている。
互換性持たせるか、諸事情はあるにせよ古い2系はバッサリ捨てるべきだった。

- #### インクリメント、デクリメントが無い
cppでいう所の n++ (--n)が無い。1足したり引いたりする事はよくある。

- #### 画像解析など
Pythonはこういう事ができるとあったがOpenCV等外部ライブラリ使ってる模様。
これらのライブラリは他言語でも使えるし要はライブラリ次第ということ(?)
AIはPythonが良いという記事がありそれ関係のライブラリが豊富にあると言う事だろうか。

- #### 速度
インタープリタ型なので仕方ないがやっぱり遅い。

- #### まとめ
・兎に角、コードが短い。3行でEXCELのデータが表示できた。初心者にはハードルが低い。
・WinForms,WPF(XAML)みたいな感じでGUIが構築できるIDEがあれば良い。
・そもそもPythonはGUIアプリは向かないのだろうか。
・いろいろ便利なライブラリがある模様。

WPF使いがPython始めて1週間目の感想でした。
正確に言うと3日目。
c,c#等の経験があれば初心者用の書籍1冊すんなりと使えると思う。

<HR>

#### 円周率算出 (初Pythonコード)
#print (cnt,4.0*c/cnt)　の# を消すと遅くなりますが収束具合が分かります。
 
```
import random
import datetime

cnt = 1
c = 0
x=0.0
y=0.0

max=1000000000

print (datetime.datetime.now())

while (1):

    x = random.uniform(0.0, 1.0)
    y = random.uniform(0.0, 1.0)

    if (x * x + y * y < 1.0) : c=c+1
    #print (cnt,4.0*c/cnt)
    if (max <= cnt): break

    cnt+=1

print (cnt,4.0*c/cnt)
print (datetime.datetime.now())
```
10億回ループで10分掛かります。3.141568512まで収束しました。
ネイティブCでやった所、6秒でした。100倍の速度差になります。
OSError: libnvToolsExt.so.1: cannot open shared object file: No such file or directory

# 事象

`import pytorch`すると、`OSError: libnvToolsExt.so.1: cannot open shared object file: No such file or directory`エラーが発生する。

下記は、JetPack 6.1にPyTorch 2.3(torch-2.3.0-cp310-cp310-linux_aarch64.whl)をインストールした後、`import pytorch`したとき。

```bash
$ python
Python 3.10.12 (main, Sep 11 2024, 15:47:36) [GCC 11.4.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import torch
Traceback (most recent call last):
  File "/home/jetson/.local/lib/python3.10/site-packages/torch/__init__.py", line 176, in _load_global_deps
    ctypes.CDLL(lib_path, mode=ctypes.RTLD_GLOBAL)
  File "/usr/lib/python3.10/ctypes/__init__.py", line 374, in __init__
    self._handle = _dlopen(self._name, mode)
OSError: libnvToolsExt.so.1: cannot open shared object file: No such file or directory
```

# 原因

libnvToolsExt.so.1がインストールされていない。

# 解決方法

CUDA Toolkitをインストールする。

```bash
sudo apt update && sudo apt install cuda-toolkit-12-6 cuda-compat-12-6
```

> 未検証だが、cuda-libraries-dev-12-6だけでも良いのかも？

インストールすると、/usr/local/cuda-x.y/lib64/にlibnvToolsExt.so.1が配置される。

```bash
$ ls -l /usr/local/cuda-12.6/lib64/libnvToolsExt.so.1
lrwxrwxrwx 1 root root 22  8月 15 03:00 /usr/local/cuda-12.6/lib64/libnvToolsExt.so.1 -> libnvToolsExt.so.1.0.0
```
Rover製作17 実機をROS2で動かす

# 環境

この記事は以下の環境で動いています。

| 項目 |	値 |
|:--|:--|
| CPU | Core i5-8250U |
| Ubuntu | 22.04 |
| ROS2 | Humble |

# 概要
ここまで機体の組み立てやデバイスのドライバレイヤーの解説をしてきました。
ここではサンプルアプリを動かして機体を駆動させます。

# ソースコード
以下のリポジトリで起動に必要な

https://github.com/project-srs/espresso_frame_robot

```shell
cd ~/ros2_ws/src
git clone https://github.com/project-srs/espresso_frame_robot.git
cd ~/ros2_ws/src/espresso_frame_robot
git submodule update --init
```

# ビルド

```shell:ビルド
source /opt/ros/humble/setup.bash
cd ros2_ws
colcon build
```

# 実行

```shell:実行
ros2 launch espresso_frame_bringup main.launch.py sample_app:=true
```

* sample_app:=trueをつけることでサンプルアプリを一緒に起動します。
* 起動前にT6Kのスイッチをすべて上or奥に倒しておきます。
* launchをした後に右肩のスイッチ手前に倒します。ARMが実施されます。奥に戻しておきます。
* 右スティックの上下で機体の前後移動、右スティック左右で旋回します。
* 左スティックの上下左右でRealSenseカメラのサーボが動きます。

# 目次ページへのリンク
[ROS2講座の目次へのリンク](https://qiita.com/srs/items/5f0d765343ca78f524ed)
【Shopify】Windows11環境でのShopify CLI3系のインストール手順

:::note info
別環境でshopify CLIを使うことになったのでインストール手順のメモ
:::

### 環境
Windows11

# Rubyのインストール

バージョン確認

```:ターミナル
ruby -v
```

Rubyが入っていなければインストール
https://rubyinstaller.org/downloads/

# Gitのインストール
バージョン確認
```:ターミナル
git --version
```

入っていなければインストール
https://gitforwindows.org/

# Node.jsのインストール
バージョン確認
```:ターミナル
node -v
```

入っていなければインストール
https://nodejs.org/en

# Bundlerのインストール
バージョン確認
```:ターミナル
bundle -v
```

入っていなければインストール
```:ターミナル
gem install bundler
```

# Shopify CLIのインストール
念の為バージョン確認
```:ターミナル
shopify version
```
npmコマンドでインストール
```:ターミナル
 npm install -g @shopify/cli @shopify/theme
```
※3系のインストール
AWS SNS - Chatbot 経由でメッセージが送信されない要因の3例

## はじめに

AWS の運用で 

:::note info
何らかの AWS サービス → SNS → Chatbot → Slack チャンネル
:::

という具合に、通知をSlack チャンネルに流すユースケースは色々あると思いますが、
設定をしていざ上流でトリガーされてもSlackまで流れなくて、SNS - Chatbot 間で止まってしまっている３つのケースがこれまでにありました。

たまに忘れるので備忘録として残しておきます。

## SNS トピックが バージニア北部 (us-east-1) になかった

これは

:::note info
AWS Cost Anomaly Detection → SNSトピック → Chatbot → Slack チャンネル
:::

の流れで構築した際に、いつものように 東京リージョン (ap-northeast-1) で作成していました。

Chatbot が Cost Anomaly Detection と連携するためには、**SNS Topic を us-east-1 リージョンで作成する必要がある**(※)ようで、そのため以下のエラーが出ていました。グローバルサービスは us-east-1 リージョンでホストされているからでしょうか。

(※公式ドキュメントに記載は見当たりませんでしたが、このときはこれで回避しました)

```
We were unable to publish to your SNS topic arn:aws:sns:ap-northeast-1:999999999999:xxxxx-slack-notification for the alert subscription xxxxx-immediate. As a result, you won’t be notified of all of the anomalies that have been configured with that alert subscription. 
To resolve the issue, check that you’ve entered the correct SNS ARN, or follow the user guide (https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/ad-SNS.html) to ensure the alert is set up correctly to work with AWS Cost Anomaly Detection. 
If you have any questions, contact us at https://aws.amazon.com/support.
```

エラーメッセージやドキュメントにも特に記載はありませんでしたが、試しにバージニア北部リージョンにSNSトピックを作成し直し試したところ流れるようになりました。

Cost Anomaly Detection に限らず、グローバルサービスのものは当てはまるかもしれません。


## Chatbot には対応していない AWS サービスだった

RDS の OSアップデート関連の通知を Slack で受け取りたいユースケースがありました。
RDS には、インスタンスやデータベースに発生する特定のイベントを監視し、それらのイベントに対して通知を受け取るための「イベントサブスクリプション」という仕組みがあります。

これには「OS のアップデートが可能になった」というイベントの監視も可能で、このときはそれを使用し、SNS, ChatBot を介して Slack まで通知する機構を構築しました。

しかし、Chatbot が RDS イベントサブスクリプションに対応していませんでした。最初からこれを見とけばよかった。。

https://docs.aws.amazon.com/chatbot/latest/adminguide/related-services.html

そのため EventBridge を介して通知するパターンに変更しました。

OS のアップデートが可能になった場合に発生するイベント `RDS-EVENT-0230` を EventBridge で検知し、SNS, ChatBot を介して Slack まで通知する機構を構築しました。

:::note
RDS  <--(検知)-- EventBridge →SNS → Chatbot → Slack チャンネル
:::

## カスタム通知のメッセージフォーマットが不正だった

前述の対応サービス以外(Lambda や Fargate の中などから)でも、カスタム通知として SNS トピック - Chatbot 経由で送れますが、フォーマットに準規していないとエラーとなります。
ただ単に `test` と送ろうとしていましたが、フォーマットに準規していなくてエラーとなっていました。

https://docs.aws.amazon.com/chatbot/latest/adminguide/custom-notifs.html

以下のフォーマットである必要があります。
```
{
    "version": "1.0",
    "source": "custom",
    "content": {
        "description": "test"
    }
}
```