OmniAICreator/Qiita-1.07M huggingface dataset:
jenkins:slaveしたwindowsマシンでgroovyをloadするとExceptionを吐く

最初は疎通系エラーかと思ったのですが、ログの下の方をみていくとこんなログになっていました。

```
 hudson.remoting.ProxyException: hudson.remoting.Channel$CallSiteStackTrace: Remote call to JNLP4-connect connection
....
したの方↓
hudson.remoting.ProxyException: java.nio.charset.MalformedInputException: Input length = 1 
```
JNLPだから疎通系かな？と思いきや。
groovyをload()するときに、エラーを吐いてることはわかりました。
charsetがどうとか言ってるので、encodigか何かか？という感じなのですが、load時にencoding指定したり、jobの設定時に何か指定する、と言ったことはできません。

悩んだすえ、groovy周りを軒並みscmでとってくる１ファイルに押し込めて回避しました。
原因についてはそのうち、調査したいですが、何故・・！ということがすぐわからないのが辛いですね。

jenkins version は、
jenkins-lts `2.375.2`です。

ちなみに、groovyのloadっていうのは以下のような書き方です。
```
hoge = load "hoge/hogeUtility.groovy"
```
windows系のパスじゃないんじゃ？と思うかもしれませんが、scm checkout自体はこの書き方でも、動いていました。（動いている方のマシンは、jenkins-lts `2.315`)

まあ、色々戻したら動くんじゃない？って話はある気はします。
とりあえずのメモ。
WordPressのアドレスにEC2の動的IPを設定してEC2を停止した場合の対処法

# 概要
WordPressの一般設定にEC2の動的パブリックIPv4 DNSを設定し、EC2を停止したためWordPressに設定したIPv4 DNSとは異なるドメインになってしまいWordPressが表示できなくなってしまいました。
いや～お金かかると思って何も考えず消してしまったことを反省します。。。

# 手順 
### WP-CLIをダウンロードする
下記のサイトを参考にWP-CLIをインストールしてもらえればOKです。
簡単にまとめると、`curl -o`でファイルをダウンロードして、/usr/local/bin に配置します。
> https://make.wordpress.org/cli/handbook/guides/installing/

### wpで変更
```bash
wp search-replace '変更前URL' '変更後URL'
```
上記で変更できます。ただ、自分は勉強用でサクッとWordPress環境を使うため終わったら消してしまいますが、大切なデータがある場合Optionで`--dry-run`を付ける方がよいみたいです。つけると、DBの値事態の書き換えは行わずどれくらいの影響範囲があるのかを確認できるみたいです。

>search-replaceのDoc
>https://developer.wordpress.org/cli/commands/search-replace/

>--dry-run参考
>https://analyzegear.co.jp/blog/156


# 結論
DBなどを直接触って変更することもできるみたいです。まぁ、動的なアドレスを設定する際は気を付けましょう!
Amazon ECSのタスク定義の問題によってコンテナ間接続ができないときの対処法

## 事象
BFF（Backend For Frontend）コンテナにログインし、GraphQLのリクエストを送ったところ、エラーログに以下のエラーが表示されてました！このリクエストは、BE（Backend）コンテナに接続します！
**Error: connect ETIMEOUT 0.0.31.144.80**

```
aws ecs execute-command --cluster <クラスタ名> --task <タスクID> --container <コンテナ名> --interactive --command "/bin/sh"
curl -X POST -H "Content-Type: application/json" -H "Authorization: Bearer <トークン>" --data '<クエリ>' <BFFエンドポイント/graphql>
```

## 対処法
タスク定義の環境変数でBEエンドポイントを設定する際に、スキーム（http://）を含め忘れていたことが原因でした！これを追加することで問題は解決しました！

なかなかないかもしれませんが、コンテナ間接続を行うにあたって、
タスク定義の環境変数(エンドポイント)にはスキームをお忘れなくということですね！

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！:clap:
また、なにか間違ってましたらご指摘いただけますと幸いです！:pray:
commit時にESlintとPrettierを実行する【Lefthook】


## パッケージのインストール
以下のコマンドを実行して`Lefthook`をインストールします。
```:ターミナル
$ yarn add -D lefthook
```

## Lefthookの設定
Lefthookの設定をします。
`lefthook.yml`を作成し、以下のように記述します。
```lefthook.yml
min_version: 1.3.0
pre-commit:
  parallel: true
  commands:
    eslint:
      glob: '*.{js,jsx,ts,tsx}'
      exclude: '^\.|/\.'
      run: yarn eslint --fix --max-warnings=0 {staged_files}

    prettier:
      run: yarn prettier --write --ignore-unknown {staged_files}
```

## 動作確認
以下のコマンドを実行し、正常に動作するか確認します。
```:ターミナル
＄ npx lefthook install && npx lefthook run pre-commit
```
JMeterのセットアップ方法

# JMeterとは
「JMeter」はWebアプリケーションのパフォーマンスをテストすることができます。サーバーやネットワークなどに負荷をかけてその強度をテストして、全体的なパフォーマンスを分析することが可能です。

# JMeterをインストール

↓の公式サイトからzipファイルをダウンロードして、解凍します。

https://jmeter.apache.org/download_jmeter.cgi

![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/a8795855-dd1b-87cb-4b89-de88639a4d85.png)

### Javaのインストール

JMeterはJavaの環境が必須のため、インストールされてない方は↓の公式サイトからjavaをインストールして、再起動してください。
https://www.java.com/ja/download/

### JMeterの起動
「jmeter.bat」を使用して起動します。
apache-jmeter-5.6.2\bin\jmeter.bat
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/8fe4faa0-2b3e-9378-7ec0-d1d328d5d3df.png)


# 日本語化

「Options->Choose Language->Japanese」で日本語に変更することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603981/e0cbf086-b314-abb0-7c78-30d746c76295.png)
しかし、アプリを閉じるたびに英語表記に戻ります。毎回変更しなくてもいいように、設定ファイルを編集します。

「jmeter.bat」をエディタで開き、77行目あたりにある言語設定の個所を修正します。

```bat:修正前
set JMETER_LANGUAGE=-Duser.language="en" -Duser.region="EN"
```

```bat:修正後
set JMETER_LANGUAGE=-Duser.language="ja" -Duser.region="JP"
```

これでセットアップは完了です！
【2】React（Next.js）学習記録

今日は2日目
昨日は環境構築が出来なくて結局何も進まずに終わりました
今日の放課後、少しだけ訓練校の先生にも聞き、同じようなエラーの人が何人もいるから調べていけば出てくるよ！ということを教えていただきました。
バイト終わって家に帰り、Reactとかのラインのオープンチャットに入っていたので、こんな感じのエラーが・・・って相談したら
create-react-app
が更新されていなくて最近はViteで作るっていうのを教えて貰いました。
それと一緒にVite+Reactの環境構築の動画も教えて貰ったので、さっそく見ながら試したら、初めてできました。
この感動は忘れないと思います
ほんと親切な方が多くてよかったです

さっそくViteとReactを使って画像検索アプリを作るYouTubeの動画を一から真似して作成しました。
真ん中くらいからケアレスミスとかでエラーが出てきました。
またオープンチャットで聞いたら親切に教えていただきました。
完成後、オープンチャットの中の1人から
「自分で調べる癖をつけないとできる人との差がすごく出る」という言葉を聞き、
今後はエラー文など、必ず調べてどうしてもわからないときにだけ聞くようにしようと思いました。

2日目の学んだこと
・自分で調べることがめっちゃ大切（googleやgoogle翻訳など）
・Viteという存在
可動式todoリスト作成記 / 拖動可更換次序的todolist

(JP)
8月。といえば旅行！

今年は青森，台湾に行く計画を立てた！

しかし、9月にさらに一大イベントがある。引越しだ。

私は同じところにずっといるのが嫌な性で、賃貸更新のタイミングで毎回引越ししている。

今年も田町から芝浦あたりに引っ越そうと思う！（近場に限る）

そうなると8月月初に飛行機予約，宿予約，賃貸物件選定と、やることが盛りだくさん。

何からやればいいのかわからん、、

そこでtodoリストを作りたいと思ったのだ！

作ってみたけど、結構手こずった。

コードはかなり煩雑になってしまったが、綺麗にする気力がない、、

今週か来週にはコード載せたいと思うので、誰かに手直しして欲しい、、

ちなみに、調べまくってドラッグで項目を入れ替えることも可能にした。

------
(CN)
最近很繁忙，要幹的事情好多，，，

8月份計劃去旅遊，9月要搬家等等

想整理一下該做的事情

於是做了一個只屬於自己的完全original的todolist

憑藉網友們的智慧，前天終於完成了！！（如下圖）

但編程碼非常凌亂，打算下禮拜發編程碼，希望有網友們來修改

這todolist還下了一個功夫，拖動就可以更換todo次序


![C2B111C5-9543-464A-926C-CF4DE7F71DC1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120035/630f9d86-10d3-668a-7131-66997bf75f31.jpeg)
Mulesoft コントロールプレーンとランタイムプレーン

# はじめに

MuleSoftは、API管理やインテグレーションプラットフォームなどの分野で広く使用されているツールです。
MuleSoftは、コントロールプレーンとランタイムプレーンの2つの主要なコンポーネントを備えています。

この記事では、MuleSoftのコントロールプレーンとランタイムプレーンについて説明していきたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3343120/b71b19a2-ecd4-7803-e035-08f1c2dd15c4.png)
HP：
https://docs.mulesoft.com/jp/general/intro-platform-hosting

## コントロールプレーンとは？

コントロールプレーンは、MuleSoftの管理コンソールとAPI管理機能を提供するために構築されたコンポーネントです。コントロールプレーンは、APIの設計、セキュリティ、トラフィック管理、アクセス制御などの作業を行います。また、コントロールプレーンは、企業内のすべてのAPIを簡単に管理できるようにするために、APIポータルを提供します。これにより、APIの利用者がAPIにアクセスし、ドキュメント、サンプルコード、利用統計などの情報を確認できます。

具体的には、コントロールプレーンは以下の機能を提供します。

### APIの設計

APIの設計は、APIの要件や目的を定義する作業です。コントロールプレーンはこの作業を支援するために、APIの設計に必要なツールを提供します。例えば、APIの要件定義やAPIのドキュメント作成に必要なツールなどが挙げられます。

### セキュリティ

APIのセキュリティは非常に重要です。コントロールプレーンは、APIのセキュリティに必要な認証やアクセス制御などの機能を提供します。また、コントロールプレーンは、APIのセキュリティの監視や改善に必要なツールも提供します。

### トラフィック管理

APIのトラフィック管理は、APIのパフォーマンスや可用性に大きな影響を与えます。コントロールプレーンは、APIのトラフィック管理に必要な機能を提供し、APIのパフォーマンスや可用性を維持します。

### アクセス制御

APIのアクセス制御は、APIのセキュリティに密接に関連しています。コントロールプレーンは、APIのアクセス制御に必要な機能を提供し、APIのセキュリティを維持します。

### APIポータル

APIポータルは、APIを利用するために必要な情報を提供するWebサイトです。コントロールプレーンは、APIポータルを提供し、APIの利用者がAPIにアクセスし、ドキュメント、サンプルコード、利用統計などの情報を確認できるようにします。

## ランタイムプレーンとは？

ランタイムプレーンは、MuleSoftのインテグレーションエンジンです。ランタイムプレーンは、APIとアプリケーションを接続し、データやメッセージを移動するための機能を提供します。ランタイムプレーンは、APIの処理、データ変換、例外処理、ロードバランシング、フェイルオーバーなどを行います。ランタイムプレーンは、各APIの実行環境を提供し、APIの信頼性、可用性、スケーラビリティを確保します。

具体的には、ランタイムプレーンは以下の機能を提供します。

### APIの処理

APIの処理は、APIの要求に応じて適切な処理を行うことを意味します。ランタイムプレーンは、APIの処理に必要な機能を提供し、APIのパフォーマンスや可用性を維持します。

### データ変換

APIのデータ変換は、APIの要求や応答のデータフォーマットを変換することを意味します。ランタイムプレーンは、APIのデータ変換に必要な機能を提供し、APIの相互運用性を確保します。

### 例外処理

APIの例外処理は、APIの要求や応答の処理中に発生したエラーを処理することを意味します。ランタイムプレーンは、APIの例外処理に必要な機能を提供し、APIの信頼性を維持します。

### ロードバランシング

ロードバランシングは、複数のAPIの実行環境間で負荷を均等に分散することを意味します。ランタイムプレーンは、APIのロードバランシングに必要な機能を提供し、APIの可用性を維持します。

### フェイルオーバー

フェイルオーバーは、APIの実行環境が障害を起こした場合に、別の実行環境に切り替えることを意味します。ランタイムプレーンは、APIのフェイルオーバーに必要な機能を提供し、APIの可用性を維持します。

## 終わりに

MuleSoftのコントロールプレーンとランタイムプレーンは、それぞれ異なる目的を持つ2つの重要なコンポーネントです。コントロールプレーンは、APIの設計、管理、セキュリティに重点を置いています。一方、ランタイムプレーンは、APIの実行、データ処理、例外処理に重点を置いています。企業がMuleSoftを導入する場合、コントロールプレーンとランタイムプレーンの両方を考慮する必要があります。

最後までお読みいただき、本当にありがとうございました。
RAMLに関する、すこし理解できましたら嬉しいです。フィードバックが頂きましたら幸いです。
Laravel Backpackとやらでadmin画面の作成した話

# LaravelBackPackとやらを導入してみた話

本日はadmin画面を作成するために、Laravel backpackとやらを導入してみました

https://github.com/Laravel-Backpack

こやつの導入に現在進行形で苦戦しています
admin画面の表示はできて、データベースの表示もできました、が
permissionを与えるUIが実装できなくて悩み中、、、

https://marble-heroes.com/blog/v86wyqw1d
↑この記事には非常に！お世話になりました。
ありがとうございます。


導入までの流れとしては、、
1.https://github.com/spatie/laravel-permission
Laravel permissionを導入

2.Laravel backpackを導入

3.https://github.com/Laravel-Backpack/PermissionManager
backpack permission managerの導入

この流れです。

が、
```
[Optional] Add a menu item for it in resources/views/vendor/backpack/ui/inc/menu_items.blade.php:
<x-backpack::menu-dropdown title="Add-ons" icon="la la-puzzle-piece">
    <x-backpack::menu-dropdown-header title="Authentication" />
    <x-backpack::menu-dropdown-item title="Users" icon="la la-user" :link="backpack_url('user')" />
    <x-backpack::menu-dropdown-item title="Roles" icon="la la-group" :link="backpack_url('role')" />
    <x-backpack::menu-dropdown-item title="Permissions" icon="la la-key" :link="backpack_url('permission')" />
</x-backpack::menu-dropdown>
```

何だこれ！
menu-dropdown-headerってどこだ！
resources/views/vendor/backpack/ui/inc/menu_items.blade.php:に記述してもUIに表示されないぞ！

、、、と困惑しています。悲しい、、、
導入できたら、報告します。

わかる人がいましたら、ご連絡ください
多少怪しくてもついていきます。

# ま・と・め
あとやることは、、、
・backpackで認証をつける！
・投稿画面とデータ格納とその表示を行う！×２
・詳細画面のデータ格納とその表示！

下二つは秒やで秒！（2346242342秒）


おわり。
jQuery　基本文法

# jQueryの書き初め
HTMLの読み込みが終わった後にjQueryが実行されるように，以下のように記述する．実際のjQueryの処理はこの中に記述していく．
```javascript
$(function(){
	//ここにjQueryの処理を書く
});
```


# jQueryの基本形
```javascript
//イベントの設定
$('セレクター').イベント(function(){
		
})

//メソッドの設定
$('セレクター').メソッド();
```
jQueryの処理は以下の３つの基本要素によって記述する．
**・セレクター**
操作する<ins>HTMLの要素</ins>を指定する．→　"何を"操作するのか
**・イベント**
jQueryによる操作する<ins>タイミング</ins>を指定する．→　"いつ"操作するのか
**・メソッド**
セレクタによって指定した要素に行う<ins>操作の内容</ins>を指定する．→ "どのような"操作するのか

イベントとメソッドはあらかじめ用意されているものを記述することで，使うことができる．
この３つの具体的な記述方法を以下にまとめる．

# セレクター：要素の選択
操作するHTMLの要素は以下のように指定することができる．
```javascript
// タグ名による要素の指定
$('tagName')

// idによる要素の指定
$('#elementID')

// クラスによる要素の指定
$('.elementClass')
```
HTML要素の特定にはタグ名・id名・クラス名が利用でき，セレクターの指定方法はCSSと同じである．

**要素の選択を変数に格納**
```javascript
//変数に格納
const variable = $('selector');

variable.eventName(function(){
	//処理
});
```
jQueryでは選択した要素を変数に格納することができる．格納した変数に対して，イベントやメソッドを別に設定することも可能である．

# イベント：タイミングの選択
要素にイベントを設定する方法は２つある．直接的にイベント設定する方法とonメソッドを利用してイベントを設定する方法である．

**１．直接的にイベントを設定する方法**
```javascript
// イベントの追加
$('selector').eventName(function() {
  // イベントが発生したときの処理
});
```

**２．onメソッドでイベントを設定する方法**
```javascript
// イベントの追加
$('selector').on('eventName', function() {
  // イベントが発生したときの処理
});

```
２つの設定方法の違いは以下に示す．
○直接的なイベント設定
* <font color="OrangeRed">簡潔な構文で記述することができる．</font>
* <font color="RoyalBlue">JavaScriptによって動的に追加された要素にはイベントが追加できない．</font>

○onメソッドのイベント設定
* <font color="OrangeRed">要素に対して複数のイベントの設定ができる．</font>
* <font color="OrangeRed">JavaScriptによって動的に追加された要素でもイベントを追加できる．</font>

**動的に追加した要素のイベント指定**
子要素を持つ(と予想される)親要素にonメソッドを指定することで，子要素が追加されても，実質的に子要素にイベントを指定できるという仕組みとなる．
したがって，動的に追加した要素にイベント指定をするためには，セレクタに"追加される親要素"，onメソッドの第二引数に"追加される小要素"を指定する必要がある．
```javascript
//例
$('parentElement').on('eventName','childElement',function(){
    //イベントの処理
});
```


**イベントの削除**
offメソッドを利用することで，付与したイベントの設定を削除することができる．
```javascript
// イベントの削除
$('selector').off('eventName');
```
これは，イベントの設定方法に関わらずイベントの削除をすることができる．

# メソッド：操作の設定
以下のように記述することで，要素に操作の設定をすることができる．
```javascript
//　要素に行う操作の指定
$('selector').methodName("parameters");
```
メソッドには指定したCSSを操作するものや，指定した要素を削除するものなど，たくさんのメソッドが用意されている．

### メソッドチェーンとは
メソッドチェーンとは，同じ要素に対して複数の操作の指定を行うために，メソッドをチェーン(鎖)のように繋いで記述する方法である．
```javascript
$('selecotor').method1().method2().method3();
```
１つの要素に対してピリオド`.`で繋ぐことで複数のメソッドを指定することができる．

# メソッド一覧
jQueryには数多くのメソッドが用意されている．以下のように分類されるが，それぞれ別の記事にまとめる．

**HTML系メソッド**
HTMLに関する操作を指定するメソッド

https://qiita.com/thirai67/items/4d7f32cb90f877f22f15

**CSS系メソッド**
要素のCSSに関する操作を指定するメソッド

https://qiita.com/thirai67/items/e47fd8ffdbe1fddfff3f

**属性系メソッド**
要素の属性に関する操作を指定するメソッド

https://qiita.com/thirai67/items/0bdaaa4e16288d01a173

**エフェクト系メソッド**
要素にアニメーションなど，エフェクトを加えるためのメソッド

https://qiita.com/thirai67/items/83d2f5542bbbde08be55

**イベント系メソッド**
要素の操作を「いつ」実行させるかを設定するためのメソッド

https://qiita.com/thirai67/items/8fd4daccdbe98ae0b225

これらの記事には基本的なメソッドをまとめた．他にもまとめきれなかったものもあるため，必要に応じて調べる．
[MR Dev Tips #2] HoloLens 2 マイクの音声を録音する方法

# はじめに
HoloLens 2 のマイク入力を処理する方法はいくつかありますが、今回は Unity Scripting API の Microphone クラスを使用して、HoloLens 2 のマイク入力を録音する方法について簡単に紹介したいと思います。

# HoloLens 2 マイクの音声を録音する方法

UnityEngine には ``Microphone`` の API が用意されています。
``Microphone.Start()`` メソッドを使用すると、録音を開始することができます。

```
public static AudioClip Start (string deviceName, bool loop, int lengthSec, int frequency);
```

```sample.cs
using UnityEngine;

public class Example : MonoBehaviour
{
    void Start()
    {
        AudioSource audioSource = GetComponent<AudioSource>();
        audioSource.clip = Microphone.Start(Microphone.devices[0], true, 10, 44100);
        audioSource.Play();
    }
}
```

| 引数  | 型 | 概要 |
| --- | --- | --- |
| deviceName | string | 録音するデバイス名 (マイク) |
| loop | bool | ループ録音を行うかどうか、``true`` の場合は ``lengthSec`` に到達した時にクリップの最初に戻って録音を継続する |
| lengthSec | int | 録音するオーディオクリップの長さ |
| frequency | int | 録音するオーディオクリップの周波数 |

``Microphone.Start()`` で開始した録音は、第三引数で指定した ``lengthSec`` 秒経過後、もしくは ``Microphone.End()`` メソッドをコールすることで終了させることができ、録音した音声データは ``AudioClip`` として返却されます。

**HoloLens 2 実機で ``Microphone.devices`` を取得した結果**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8bf8c7ac-7fec-414f-2d28-d4e6ab3d7bd6.png)

初めて ``Microphone.Start()`` メソッドをコールする場合、第一引数である ``deviceName`` に何を指定すれば良いのか迷ってしまう方もいらっしゃると思いますが、``Microphone`` クラスには ``devices`` というメンバ変数が用意されており、入力デバイスを取得することができます。第一引数は特別な事情が無い限りは、``Microphone.devices[0]`` を指定するのが良いかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ee3eeadf-e943-6c3a-4a4a-29bd43c7d1fd.png)

ちなみに、利用デバイスを PC 等を想定している場合は、外部マイクを使用している場合2つ以上の入力デバイスが取得できる場合も考えられるので、特定のプラットフォームでのマイクを指定したい場合は、別途条件分岐の処理、プラットフォームごとに処理内容を記述する必要があります。
SARA-R4のコマンドもChatGPTが教えてくれた！！ATコマンドリターンを教えてくれるなんて

今回は開発の記事ではないのですがすごく衝撃的だったので
つい記事にしました！！


最近SARA-R410MというLTE-M通信を使用した製品開発を行っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/13e4f21c-2214-780e-709d-b1793a833906.png)

その中でSARA-R410MにATコマンドを送信すると自分が送信したATコマンドを
わざわざ返してくるので面倒くさくて停止させたかったのですが、
その方法がなかなかわかりませんでした。

ちょっとマニアックなモジュールなのでChatGPTに聞いても無理だろうなと
おもったんだけど一応聞いてみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/13aad1f8-23a2-fcd2-de9b-ceec42d2e6a3.png)

**うっうそやん！！
こんなことまで教えてくれるん？！**

ということで皆さんもマニアックなことまで聞いてみるものありです！！
カイジクルーンの曲面形状のdxfデータを作る

# 目的
カイジクルーンの曲面形状を数式で求め、dxfデータに変換する。

# 曲面形状設計

## 目的

* 玉の回転半径を時刻に比例して減少サせる

## 支配方程式
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405484/a4e22ace-5479-bfc6-48e4-90f1659e9157.png)
クルーン上をまわる玉の断面

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405484/184452ac-af06-8656-d410-9bcd567de887.png)
玉自体の回転を無視すると

```math
N cos \theta=mg \\
\tan \theta = \frac{df}{dr}\\
```
となる。
遠心力と釣り合うと考えると

```math
mr \omega^2 = Nsin \theta\\
=mg tan\theta\\
=mg\frac{df}{dr}\\
```

よって

```math
r = \frac{g}{\omega^2} \frac{df}{dr}
```

となる。

```math
v=r \omega
```
で速度は空気粘性によって、$ma=-cv$を解いて

```math
v= A exp(-\frac{c}{m} t)
```
とすると（Aは初速によって決定する。クルーンに最大半径があるため、最大値が存在する）、

```math
\omega = v/r = \frac{A}{r} exp(-\frac{c}{m} t)
```

```math
r = \frac{g}{\omega^2} \frac{df}{dr} =  g \frac{df}{dr} \frac{r^2}{A^2} exp(2\frac{c}{m} t)
```

よって

```math
r = \frac{A^2}{g} exp(-2\frac{c}{m} t) \frac{df}{dr}^{-1}
```

となる。

### 傾きが一定の場合
傾きが一定の場合は回転半径は指数関数的に減少する。
一方で指数関数の乗数は$-\frac{2c}{m} t$ 物性値で定まる。

## Aを求める

```math
\begin{eqnarray}
mr_{max} \omega^2 =mg \frac{df}{dr}_{r_{max}}\\
\omega = \sqrt{ \frac{g}{r_{max}} \frac{df}{dr}_{r_{max}} }\\
v = r_{max} w\\
=\sqrt{ g r_{max} \frac{df}{dr}_{r_{max}} }\\
\therefore A = \sqrt{ g r_{max} \frac{df}{dr}_{r_{max}} }
\end{eqnarray}
```
改行機能してないのきつい
代入すると、まぁまぁ示唆的だね。

当たり前だけど、最大径での傾きは初速の狙い値から逆算して

```math
\frac{df}{dr}_{r_{max}} = \frac{1}{g} \frac{v_0^2}{r_{max}}
```
で与えるべきである。

### 傾きを指数関数的に

```math

\frac{df}{dr} = exp(-\frac{2c}{m} kt) 
```
とすると、

```math
r=\frac{A^2}{g}exp(-\frac{2c}{m} t(1-k)) 
```

$k<1$では回転半径rは指数関数的に減少する。
$k>1$では回転半径rは指数関数的に増加する。
傾きは時間立つことにゆるくなる　vs 球の速度は指数関数的に遅くなり、遠心力が小さくなる
の戦いのため、起きる現象である。
回転半径が大きくなりながら傾きをゆるくする＝どんどん平らになるということ。
そういう状態を狙うわけではないので$k<1$で考える。

```math
\frac{df}{dr} = (\frac{gr}{A^2})^{\frac{k}{1-k}}
```
よって

```math
f=B r^{\frac{1}{1-k}}
```

つまり、半径の累乗を曲面の高さにすれば、玉の回転半径の減衰の仕方も変わるということである。

# dxfデータの作成

https://qiita.com/GANTZ/items/0360a5639d6c271fff2a

以前書いた記事を参考にする。
rを動かしながら(r,f(r))の点を計算して、dxf多角形セクションに追加する。

今後書く

またクソ記事を書いてしまった
浮動小数点数の負値を unsigned int に代入すると未定義動作

C99 §6.3.1.5 第２段落及び注 50.
C11 も引用したほうがいいのかもしれないが手元にない。
実際には x86 Linux gcc では、あたかも符号付き整数型の負値を unsigned int に代入したかのような動作、つまり UINT_MAX+1 の剰余がとられて、たとえば -1.0 は -1 と同様に 0xFFFFFFFF になるのだが、x86 でさえそれをあてにしてはいけない（未定義だから違う値になっても落ちても文句はいえない）。［追記：コメントに実例あり］
さらに x86 Linux でなければ違う値になることがある。なのだが未定義動作なのでコンパイラのドキュメントには書かれない。なので引用して違うとお伝えすることはできない。
IoTで実現できる予知保全

# はじめに
毎週1本様々な技術に関する記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)

# 予知保全とは
予知保全は、産業界や製造業において使用される先進的な技術の一つであり、`機械や設備の状態をリアルタイムでモニタリングし、トラブルや故障を事前に予測・予防する手法`です。これにより、予期せぬダウンタイム（機械の停止時間）を最小限に抑え、生産性と信頼性を向上させることが可能です。

# 予知保全が求められる背景
従来の保全では、メンテナンスは定期的なスケジュールに基づいて行われていました。しかし、この手法では機械の実際の状態を考慮せず、無駄なメンテナンスコストがかかる場合があります。
予知保全は以下のような課題を解決するために、求められるようになりました。
- メンテナンスコスト削減
定期的な点検や予防保全の実施により、不要なメンテナンスコストを削減します。
- ダウンタイム最小化
機器のトラブルを事前に予測・予防することで、生産ラインの停止時間を最小限に抑えます。
- 高い信頼性と安全性
トラブルを未然に防ぐことで、製品品質の向上と安全性を確保します。

# 予知保全を実現する技術
### ◾️センサー技術
IoT技術の発展により、機械に内蔵しているセンサーから設備の状態を自動で検知できるようになりました。
例えば、加速度センサーや振動センサーを使用して機器の振動を監視し、異常を検出したり、温度センサーや圧力センサーなどを使用して、設備の温度や圧力の変動をモニタリングすることができます。

### ◾️ビッグデータとデータ分析
センサーから収集されたデータをクラウドに送信し、膨大なデータを収集・分析します。
ビッグデータ分析や機械学習アルゴリズムを用いて、異常のパターンやトレンドを検出することで、故障タイミングを予測することができます。

# 終わりに
予知保全は、産業界や製造業において革新的なアプローチをもたらす技術です。センサー技術とデータ分析の組み合わせにより、従来の保全手法では見逃していた問題を事前に検知し、設備の信頼性と効率性を向上させることができます。予知保全の普及と進化により、より持続可能な産業環境と安定した製造プロセスの実現が期待されます。

最後までお付き合いくださりありがとうございました。
jQuery 基本知識

# jQueryとは
jQueryはWebブラウザ用のJavaScriptのコードをより短く容易に記述できるように設計されたJavaScriptのライブラリ．
jQueryのキャッチコピーは「write less, do more（少ない記述で，もっと多くのことをする）」
![jQuery.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3133563/a58662d1-bd10-6a34-b3e1-b0c9e1584fd3.png)


# jQueryの特徴
jQueryには次のような機能や特徴を持つ．
**○DOM操作・変更**
簡単な構文とセレクターを提供して，DOMの要素を選択と操作，変更することができる．要素の選択，追加，削除，属性の変更などの操作が容易に行うことができる．

**○CSSの操作**
jQueryはCSSのプロパティを直接操作するためのメソッドを提供している．例えば，要素のスタイルを変更したり，要素の表示/非表示の切り替えが簡単にできる．これにより動的なUIの作成やスタイルの変更ができる．

**○エフェクトとアニメーション**
jQueryはエフェクトやアニメーションを実装するためのメソッドを提供している．要素のフェードイン/フェードアウトなど複雑なアニメーションを簡単に実装することができるため，Webアプリケーションに動きを追加することができる．

**○Ajax機能**
Ajax機能により，非同期でサーバーとデータをやり取りすることができる．更新する必要がない部分を無駄に読み込む時間が必要ないため，ユーザが快適にブラウザの操作ができる．

# jQueryの導入方法
アプリケーションにjQueryを導入するには，一般的に以下の２つの方法がある．
### jQuery自体をダウンロード
jQueryの公式サイトから，jQuery自体をダウンロードして，それを利用する方法．
１．jQueryの公式ウェブサイトにアクセスして，jQueryの圧縮バージョンファイル(.min.js)をダウンロードする．
２．ダウンロードファイルを開発しているプロジェクト内に配置する．
３．HTMLファイルで以下のScriptタグを使用してjQueryを読み込む．
```html
<script src="path/to/jquery.min.js></script>
```

### CSNを使う
CDN(Content Delivery Network)とは，公開されたネットワーク上のサーバからコンテンツを配信する仕組みである．CDNのjQueryを使用することで，jQueryを自分のプロジェクト内に配置しなくても，利用することができる．
HTMLファイルに以下を記述することでjQueryを読み込む．
```html
<script 
	src="https://code.jquery.com/jquery-3.6.1.min.js" 
	integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" 
	crossorigin="anonymous"></script>
```
`jquery-⚪︎.⚪︎.⚪︎.min.js`には使いたいjQueryのバージョンを指定する．特に理由がなければ最新のもので良い．

:::note warn
注意点
jQueryを記述したJavaScriptファイルより先に記述しないとエラーが発生する．
:::

# jQueryの基本文法
jQueryの実際の書き方については別の記事にまとめたので，そちらを参考にしてください．

https://qiita.com/thirai67/items/7a12cd33c1619ec1f6d6
[CDGC] July 2023 - What's new リリース情報

# はじめに
<!-- ★『インフォマティカが提供する、 CDGC(データガバナンス＆カタログ)を使って』までは定型文 -->
[インフォマティカ](https://www.informatica.com/jp/)が提供する、 [CDGC](https://www.informatica.com/jp/products/data-governance/cloud-data-governance-and-catalog.html)(データガバナンス＆カタログ)の2023年7月のメジャー・リリースの概要となります。メジャー・リリースとは、サービスにもよりますが、年に3回、実施される新機能追加をメインとした大型リリースとなります。
7月末に掛けてデータセンター毎に順次リリースが実施されていますので、詳細は後日に個別でアップデートさせて頂きます。2023/07時点の情報を元にしています。
 
<!-- 各チャプター -->
 
# カタログソースの追加
14つの新規カタログソースの対応を実施しています。特に目新しいものとしては、以下の通りです。
- 「**Microsoft Purview**」「**AWS Glue**」を始めとする他社データカタログ製品のスキャンができるようになり、CDGCの活用の幅が広がりました (現在は、Preview版と言う先行版の扱いとなります)
- Hadoop関連の「**Hive**」データベースや、「**HDFS**」ストレージに対応しました。
- 「**erwin**」、「**IDERA**」 等のモデリング・Caseツールに対応しました
- その他、Azure SQL Server、Synapse、Teradata等の**スクリプトファイル**に対応しています

# Excelファイルからのメタデータ取得
以前から要望の多かったExcelファイルのスキャンに対応しました。(現在は、Preview版と言う先行版の扱いとなります)
- Microsoft Excelファイルからメタデータを抽出できるようになります
- ワークブック、ワークシート、列を抽出できます。
- XLSX、XLS、XLSM に対応しています。

# Amazon Web Services (AWS) private link への対応
セキュリティ向上の施策として、データをインターネットに公開することなく、AWS上でデータガバナンス＆カタログを運用頂けます。
- Amazon Web Services（AWS）のプライベートリンクを使用して、Amazon Virtual Private Cloud（VPC）とサービス間のプライベート接続を構成できます

# リネージュの見栄えの改善
リネージ・インターフェイスに改良が加えられ、インターフェイスが使いやすくなり、操作性が向上しました
- 該当のアセットが現在のページに存在しない場合は、接続アセットを含むページ番号が強調表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110338/9749ea57-db67-f4cd-e6fa-c9d46d34cb8e.png)

- データ要素レベルでの表示の際に、リネージをフィルタリングし、対応するデータ要素を選択してリネージに含めることができます
- 検索機能がすべてのホップやオーバーレイに対して実施されます
- ループ表示の表示切替が可能となります
- デフォルトの表示ホップが変更され、開くポップ数も選択することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110338/6f85eef7-89fa-b108-1f32-102cf73e7d16.png)

# 検索の機能追加
検索機能の強化が実施されました
- カスタム属性を利用し、任意の検索条件の追加が実施できるようになりました。
- 検索結果に対し、動的に連動するフィルタ条件を利用できるようになりました。

 
# 参考文献
<!-- ★URLをそれぞれのカタログソースに応じて変更する -->
- [**マニュアル** ](https://docs.informatica.com/cloud-common-services/what%27s-new-in-idmc/current-version/what-s-new/data-governance-and-catalog/new-features-and-enhancements.html)
- [**Youtube**](https://www.youtube.com/watch?v=cI2umOvDYH0)
Next.js Material-UIの導入

## 開発環境

- Windows
- node v18.16.0
- Next.js v13.4.12

## 参考情報
[Installation - Material UI](https://mui.com/material-ui/getting-started/installation/)
[Next.js App Router - Material UI](https://mui.com/material-ui/guides/next-js-app-router/)

## 行った内容
◆公式を参考にライブラリのインストール
```bash
npm install @mui/material @emotion/react @emotion/styled
# Robotoフォントがデフォルトのためインストール
npm install @fontsource/roboto
# アイコン
npm install @mui/icons-material
```
◆公式を参考にPeerDependencesとlayout.tsxへ記載。
package.json
```tsx
"peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
},
```

layout.tsx
```tsx
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
```

◆動作確認
page.tsx
```bash
import * as React from 'react';
import Button from '@mui/material/Button';

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  )
}
```

ローカルで実行して以下のように表示されることが確認できた。
![m-ui_hello_world.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781232/a8956ebf-fbf1-e38b-ae0e-53635999ad08.jpeg)
【React】アコーディオンリストの作成

# はじめに
Reactで簡単なアコーディオンリストを作成するための実装例を紹介します。

# 作るもの
以下の画像のような、ボタンをクリックすると表示、非表示を切り替えることができるようなUIです。

![スクリーンショット 2023-07-26 22.37.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1850625/7bd4d738-d7c0-246d-cd44-286886fadb9b.png)

# 実装
・以下のコマンドで、Reactの雛形を作成する。
```terminal:terminal
npx create-react-app プロジェクト名
```

・作成されたApp.js、App.cssファイルを以下のように置き換える。
```js:App.jsimport { useState } from 'react';
import './App.css';

function App() {
  const [selected, setSelected] = useState(null)

  const toggle = (i) => {
    if (selected === i) {
      return setSelected(null)
    }
    setSelected(i)
  } 

  return (
    <div className="wrapper">
      <div className="accordion">
        {data.map((item, i) => 
          <div className="item">
            <div className='title' onClick={() => toggle(i)}>         
              <h2>{item.question}</h2>
              {/* 表示、非表示を切り替えるボタン */}
              <span>{selected === i ? "-" : "+"}</span>
            </div>
            <div 
              className={
                selected === i ? "content show" : "content"
              }
            >
              {item.answer}</div>
          </div>
        )}
      </div>
    </div>
  );
}

// サンプルデータ
const data = [
  {
    question: "Question 1",
    answer: 
      "Answer 1"
  },
  {
    question: "Question 2",
    answer:
      "Answer 2"
  },
  {
    question: "Question 3",
    answer:
      "Answer 3."
  },
  {
    question: "Question 4",
    answer:
      "Answer 4"
  },
]

export default App;
```

```css:App.css
.wrapper {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.accordion {
  width: 500px;
}

.item {
  background: #f0ebe1;
  margin-bottom: 5px;
  padding: 10px, 20px;
}

.title {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.content {
  color: #8b7f75;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.1, 0.1);
}

.content.show {
  height: auto;
  max-height: 9999px;
  transition: all 0.5s cubic-bezier(1.0, 1.0);
}
```

・以下のコマンドでサーバーを起動する。
```terminal:terminal
npm start
```

# 参考
https://www.youtube.com/watch?v=bGpZrr32ECw&t=605s
vSphereClientでクローン作成

## 環境情報
* ESXi 8.0.1
* vCenter 8.0.1

仮想マシンを複製するパターンは２つあり、指定した仮想マシンを対象にクローンで複製する方法。
もう一つは対象の仮想マシンをテンプレート化してデプロイする方法がある。
今回はクローンで複製する方法を記載する。


左上のホスト及びクラスタをプルダウンして複製したい仮想マシンにカーソルを置いて右クリック。
クローン作成⇒仮想マシンにクローン作成をクリックしていく。
<img width="600" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/eea57822-0915-f641-8335-30b11c20d4f2.png">

マシン名を記載して場所を選択。
<img width="600" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/b07ff848-a8c5-d8e7-547f-093ea57f72a3.png">

コンピューティングリソースを選択
<img width="600" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/25d186ed-c4c2-e33c-53b2-f7494221e38c.png">

データストアを選択して、仮想ディスクフォーマットをシン・プロビジョニングで選択。大規模開発の場合はシックプロビジョニングの場合が都合がいいときもある。
<img width="600" alt="clone4.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/05b17218-e16b-226e-e832-2328bb6679da.png">

ゲストOSのカスタマイズを作成している場合や、複製対象の仮想マシンのハードウェアの値から変更したい場合は、チェックを入れる。
<img width="600" alt="clone5.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/3d8afa74-ac0a-0b18-1e4c-f0ee7aa1481d.png">

作成したゲストOSカスタマイズを選択する。
仮想マシンをクローンで複製するとSIDもコピーされるので重複を防ぐためにsysprepでSIDを変更する必要がある。
ただ作成する度にコンソールで開けてsysprepを起動するのはめんどくさいので、sysprepを自動化するようにゲストOSカスタマイズを作成できる。
https://mseeeen.msen.jp/how-to-automate-sysprep-when-creating-virtual-machines-with-vmware/
<img width="600" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/b79b7581-5f57-e2b5-73b0-c278ff657657.png">

ハードウェアをカスタマイズ
<img width="600" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/3bb1f9dc-a2db-e357-67e0-9daf5d0dac21.png">

確認して完了をクリックすると複製完了。
<img width="600" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2929519/b20d5c84-82da-6feb-fa42-94f932daf2c8.png">
GraphQL周りでよくやることのまとめ(自分用)

# はじめに
今回は私の勉強も兼ねてGraphQLについて、よくやる流れをまとめてみた。GraphQLはよく触るのにも関わらずいまいち理解できていないので、これを機に理解を深めたい。

# GraphQLとは
APIを開発するためのクエリ言語である。サーバーにあるデータを得るためにqueryを送って欲しい情報だけ取ってくることができる、というようなざっくりとした理解をしている。

# queryとmutation
GraphQLには、queryとmutationという大きく分けて二つ(三つ)の指令の種類がある。(subscriptionというのもあるが、私は使ったことがない。)

- query
データを取得するときにサーバーに送る指令。データの変更はない。
- mutation
データを追加、更新、削除をする時にサーバーに送る司令。データの変更が生じる。

このような指令を使うことで欲しいデータをとってくることができる。ECサイトであれば商品の値段、名前、在庫などなどの情報を得るときに使うことになるだろう。

# queryのフィールドを追加
ではqueryやmutationのフロント側の実装を見てみよう。以下、graphqlファイル。

```graphql
query GetUser {
  user {
    id
    name
  }
}
```

これはシンプルにユーザー情報を得るためのquery.
ユーザー情報と言っても、これではユーザーidと名前しか使うことができない。
ここで、フロントエンドでユーザーの年齢が必要になった場合を考える。

#### ユーザーの年齢ageが存在するかを確認する
結論から言うとageをid,nameの並びに追加する必要がある。
```graphql
query GetUser {
  user {
    id
    name
    age
  }
}
```

ただ、queryの定義でageが存在しなければ、追加しても使えるようにはならない。どんな名前のフィールドが追加できるかを確認する必要がある。
追加できるフィールド名は、サーバーを立ち上げた状態でブラウザで
localhost:####/graphiql　　(####はそれぞれ個別で設定した番号)
を開いて確認する。
右の方にDocumentation Explorerと言うところでデータ構造が確認できる。そこでquery>user>まで辿っていき、フィールドにageが存在していれば、上の方法でageを追加することでフロントエンドでも年齢情報が使えるようになる。
graphiqlについては以下を参照。

https://dev.classmethod.jp/articles/try-graphiql/

# queryをReactで使う
reactのhookであるuseQueryでqueryを呼び出してデータをfetchする。
まずreactで使えるようにするために、先ほど書いたgraphqlファイルをJavaScriptが読み込める言語に書き換えることが必要。そのためには、generateしてgraphqlファイルに対応するJSファイル(TSファイル)を生成する。generateはコマンドを叩くと自動生成されるが、コマンド自体はおそらく開発環境による(?)ので割愛する。というか、よく分かっていませんw
ここは誤魔化すことにします。

実際には、useQueryではなくuse~Query()と言う、queryごとに使えるhookを使う方が引数なしで書けるためスッキリと書ける、と教わった。これについては自分は言語化できずよく理解もしてない。apolloと言うライブラリが関係しているので、apolloについても後日まとめたいと思う。以下は参考資料。

https://zenn.dev/furharu/articles/26557d977b1b8c

生成ファイル内には、queryに対応する、JS内で使えるものが書かれている。
例えば上の例では、

```javascript
export function useGetUserQuery() {}
```

こんなようなものがあるはず。つまり、useGetUserQuery()はJavaScriptで使えるもので、これを呼ぶとuser情報が得られる。具体的には、

```javascript
const { data, loading } = useGetUserQuery()
```

こんなふうにすると、dataにuser情報が格納されて、そのユーザーidが知りたければ、

```javascript
data.id
```
で得られる。


# まとめ
フィールドの追加などはいつもやり方があやふやになってしまうのでまとめてみた。まとめると、いろんな知識についての理解が必要だということにも気づくことができる。自分がいかに分かっていないかが体感できるのでoutput大事だなあと感じる。
【Python】webdriver-managerのエラーの話

webdriver-managerは、スクレイピングする際に、自動で使用しているブラウザに合わせて、適切なVersionのドライバーをダウンロードしてくれるライブラリ。最近、***GoogleがChromeのVersionをアップデートしたのに、Driverはちゃんと提供しない***から、自動で適切なドライバーをダウンロード出来なくなった。。。

https://pypi.org/project/webdriver-manager/

最近(2023/7/24)、Chromeのversionがアップデートされてから、このライブラリがエラーを起こすようになりました。

https://github.com/SergeyPirogov/webdriver_manager/pull/537


### エラーの理由
エラーはこんな感じで、version 115.0.5790.110のdriverねえぞってやつ。

```
Traceback (most recent call last):
File "C:\Users\Documents\Workfolder\Amazon_GetOrders\Amazon_GetOrders.py", line 73, in
driver_path = ChromeDriverManager().install()
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\AppData\Local\Programs\Python\Python311\Lib\site-packages\webdriver_manager\chrome.py", line 39, in install
driver_path = self._get_driver_binary_path(self.driver)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\AppData\Local\Programs\Python\Python311\Lib\site-packages\webdriver_manager\core\manager.py", line 33, in _get_driver_binary_path
file = self._download_manager.download_file(driver.get_driver_download_url())
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\AppData\Local\Programs\Python\Python311\Lib\site-packages\webdriver_manager\drivers\chrome.py", line 59, in get_driver_download_url
modern_version_url = self.get_url_for_version_and_platform(driver_version_to_download, os_type)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\AppData\Local\Programs\Python\Python311\Lib\site-packages\webdriver_manager\drivers\chrome.py", line 94, in get_url_for_version_and_platform
raise Exception(f"No such driver version {browser_version} for {platform}")
Exception: No such driver version 115.0.5790.110 for win32
```

Chrome Driverのサイトに行くと、こんな一文があり、**最新versionはテストとしてしか提供してへんぞ**って

>If you are using Chrome version 115 or newer, please consult the Chrome for Testing availability dashboard. This page provides convenient JSON endpoints for specific ChromeDriver version downloading.

Driverダウンロードサイト
https://chromedriver.chromium.org/downloads

テストサイト
https://googlechromelabs.github.io/chrome-for-testing/

このテストサイトに書いてあるアドレスが数日で変わってしまう。そのせいでライブラリの開発者？様達が、てんやわんやして、エラーがでて、直ったと思ったら、またエラーがでてってなった。。。
せんせー、XRってなに？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/94c726b9-508a-c171-b89a-30175b093050.png)

キーンコーンカーンコーン...
授業が始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/96208674-4348-f242-5ba6-a50592e735c9.png)

せんせー、XRってなに？

# XRとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/157770aa-588b-ef2f-547f-1960226830a2.png)

XRというのは、特別なメガネを使って見ることができる魔法のような世界を表す言葉です。

このメガネをつけると、
まるで別の世界に入ったかのように見えたり、
手元のおもちゃがロボットに変わったり、部屋の中に動物園が現れたりします。

たとえば、
ある日、ダイナソーに会いたくなったとしましょう。

でも、
現実ではダイナソーはもういませんよね。

でも、
この特別なメガネ、つまりXRを使うと、まるで本当にダイナソーが目の前にいるように見えるんです。

それから、
これを使って、遠くに住んでいるおじいちゃんやおばあちゃんと、
まるで同じ部屋にいるかのようにお話したり遊んだりすることもできます。

だから、
XRはまるで魔法のように、いろんな場所やものを見せてくれるすごい道具なんです。

ただし、
実際に触ったりすることはできないから、本物のおもちゃや遊び場に代わるものではないんです。

それでも、
新しい絵本やお話を見つけるのと同じように、新しいことを体験するのに役立ちます。

# まとめ

XRというのは、特別なメガネを使って見ることができる魔法のような世界を表す言葉
Google ColabratoryでPandasを高速化させる

## 
pandasでvalue_coutnsを4万行に適応しようとしたら5時間かかる見込みになったので、どうにか高速化できないかと思い調べたらcuDFというものがありました。

cuDFとは、NVIDIAが開発したオープンソースのデータ分析と機械学習のためのプラットフォーム（RAPIDS）から提供されています。Pandasに似たAPIを提供するGPU上で動作するデータフレームライブラリで、データの操作や変換を高速に行うことができます。

結果として、5時間が15分に短縮できました✌️



## 実行方法

Colaboratoryを開き、「編集」 > 「ノートブックの設定」からGPUを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255067/9bc632f3-dd51-386d-8722-212a0caa71f6.png)


次にcuDFをインストールします。

```
!pip install cudf-cu11 --extra-index-url=https://pypi.nvidia.com
```
https://docs.rapids.ai/install

実行結果にErrorが出ますが、気にせずランタイムの再起動をします。
再起動は「ランタイム」 > 「ランタイムの再起動」からできます。


```
import cudf
cudf = cudf.from_pandas(df)
```
これでデータフレームをcuDFに変換できます。

あとはこのcudfで操作を実行することで爆速実行できます。

ほとんどpandasと同じように操作できますが、一部互換性のないところもあるので適宜コードを改変する必要があります。

## 進捗状況の確認

```
from tqdm.notebook import tqdm
tqdm.pandas()

for i in tqdm(100, total=100):
    # ここにpandasの処理
```

tqdmを使うことでプログレスバーを表示できます。おおよその終了時間も出るので、実行時間の目安になります。
せんせー、AIってなに？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/2c47de5a-d81a-78f9-53c1-4d31d8398c36.png)

キーンコーンカーンコーン...
授業が始まります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/be1492ca-910f-2708-d0fa-8fcfcf14af73.png)

せんせー、AIってなに？

# AIとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194265/da229491-9c49-fb7a-a542-417180e256a7.png)

## AIって何？

みんな、ロボットやコンピュータを知ってるよね？AIは、コンピュータやロボットが自分で考えたり学んだりする魔法のような力だよ。

## どういうこと？

AIは、人が考えるように、コンピュータを教えて、いろんなことを学ばせることができる技術なんだ。たとえば、犬の絵と猫の絵を見分けることや、話しかけた言葉に答えることなど、いろんなことができるようになるよ。

## どうしてそれがすごいの？

人は学校に行ったり、友だちや家族と遊んだりしていろんなことを学ぶよね。AIも同じように、たくさんの情報から学ぶことができて、それを使って新しいことを考えたり、判断したりするんだ。

## だから、AIってなに？

AIは、コンピュータやロボットが自分で考える力を持つようにする魔法のようなもの。人のように学ぶことができるようになる特別な技術なんだよ。

# まとめ

このように、AIはコンピュータやロボットが人のように考えたり学んだりする力。それによって、私たちの生活がもっと便利や楽しくなるかもしれないね。
Velodyne VLP16 を使ってlidarslam_ros2でPCDマップを作成する

# はじめに

Velodyne VLP16とlidarslam_ros2を使ってAutowareで使用するPCDマップを作成する手順


https://github.com/rsasaki0109/lidarslam_ros2/tree/humble


# 環境

OS : ubuntu22.04
ROS : Humble

# Velodyne VLP16のセットアップ

Velodyneドライバのインストール

```bash
mkdir -p ~/velodyne_ws/src
cd ~/velodyne_ws/src
git clone https://github.com/ros-drivers/velodyne.git -b ros2
git clone https://github.com/ros/angles.git -b ros2
git clone https://github.com/ros/diagnostics.git -b humble
cd ~/ros2_ws/
colcon build --symlink-install 
```

またはaptで取得

```bash
 sudo apt install -y ros-humble-velodyne 
```

## ネットワークの設定

VLP16のIPアドレスはデフォルトの'192.168.1.201'になっているとする。

VelodyneをEthernetでPCに接続した状態でubuntuの設定画面からPCのIPアドレスの値を設定
（'192.168.1.100'の100には201 を除く 1 ～ 254 の範囲の適当な値を設定）


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/2517ff61-2530-4ed6-b4c1-d09bdb85bf34.png)

設定を適応したらpingで疎通確認

```bash
ping 192.168.1.201
```



# lidarslam_ros2 のインストール

```bash
mkdir -p ~/slam_ws/src
cd ~/slam_ws/src
git clone --recursive https://github.com/rsasaki0109/lidarslam_ros2
cd ..
rosdep install --from-paths src --ignore-src -r -y
colcon build --symlink-install --cmake-args -DCMAKE_BUILD_TYPE=Release
```


# 実行

Velodyneドライバの実行

```bash
ros2 launch velodyne velodyne-all-nodes-VLP16-launch.py
```

lidarslam_ros2の実行

```bash
ros2 launch lidarslam lidarslam.launch.py 
```

rviz2 でmapの確認

```bash
cd /slam_ws/src/lidarslam_ros2/lidarslam/rviz
rviz2 -d mapping.rviz
```

PCDファイルの保存

```bash
ros2 service call /map_save std_srvs/Empty
```

rqt_graph

![rosgraph.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/fb4c7634-eb4b-3606-27cb-a328f17d6602.png)












# 参考



https://ar-ray.hatenablog.com/entry/2023/01/14/135723



https://zenn.dev/naokitakahashi2/articles/6e6a9f730cce1d

http://wiki.ros.org/velodyne/Tutorials/Getting%20Started%20with%20the%20Velodyne%20VLP16
【Swift】配列に値を追加するときに、重複を避ける方法2選

# はじめに
配列に値を追加するときに、重複を避ける方法を紹介します。

# 対象者
最近Swiftを学び始めた初心者の方

# 追記（23/07/27）
もっと良いやり方が見つかったのでそちらを紹介します。

https://qiita.com/Shota-Abe/items/954e55b69df1bd18af91

# やり方
## 1. Setを使う
Setには配列によく似たデータ構造です。
しかし、Setは重複を許さないという特徴があります。
この特徴を活かし、配列をSetに変換してから、再度配列に変換することで重複を避けることができます。
ただし、Setは順序を保持しないので、順序を保持したい場合はこの方法は使えません。

```swift
var array = [1, 2, 3]
func add(_ value: Int) {
    array = Array(Set(array + [value]))
}
add(1)
print(array)
```

## 2. containsを使う
containsは配列に指定した値が含まれているかどうかを判定する関数です。
この関数を使って、配列に指定した値が含まれていない場合のみ、配列に値を追加することで重複を避けることができます。
```swift
var array = [1, 2, 3]
func add(_ value: Int) {
    if !array.contains(value) {
        array.append(value)
    }
}
add(1)
print(array)
```

# おわりに
重複させることなく配列に値を追加する方法を紹介しました。この記事が参考になったという方は、いいねとフォローよろしくお願いします。
ポリモーフィックリレーションでリレーション先のモデルが存在しないものは取得対象外にしたい

この記事は移行しました！[最新の内容はこちら](https://naoqoo2.github.io/blog/%E3%83%9D%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%83%AA%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%83%AA%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%85%88%E3%81%AE%E3%83%A2%E3%83%87%E3%83%AB%E3%81%8C%E5%AD%98%E5%9C%A8%E3%81%97%E3%81%AA%E3%81%84%E3%82%82%E3%81%AE%E3%81%AF%E5%8F%96%E5%BE%97%E5%AF%BE%E8%B1%A1%E5%A4%96%E3%81%AB%E3%81%97%E3%81%9F%E3%81%84/)をご覧ください😀


関連モデルが削除されているデータは取得対象外にしたい。
そんなときあるよねー！

例）
1. Aさんがコメントしました。
2. Aさんが`記事X`についてコメントしました。
3. Aさんが`記事Y`についてコメントしました。
4. Bさんが`記事X`についてコメントしました。
5. Aさんが`ビデオZ`についてコメントしました。

コメントの一覧を取得したい。
ただし記事Xが削除されたので、2,4は除く。

```php
->where(function ($query) {
     // そもそも関連モデルのないコメントは取得したい（1のこと）
    $query->whereNull('commentable_id');
     // 関連モデルIDがあり、関連モデルが生きているものを取得（3と5）
    $query->orWhereHasMorph(
        'commentable',
        [Post::class, Video::class],
        function ($query) {
            $query->whereNotNull('commentable_id');
        }
    );
})
```

## 余談（commentable_typeに登録する値）

ポリモーフィックタイプはデフォルトでモデル名が登録されるが、

- 将来的にモデル名（ディレクトリ）が変更されたり
- CQRSで同じモデルを複数クラス定義する可能性もあるので

文字列定義してそれを使用するのがオススメ。
（`App\Models\Post` ではなく `post` で登録しておこう的な話）

```php:const.php
    'POLYMORPHIC_TYPE' => [
        'POST' => 'post',
        'VIDEO' => 'video',
    ],
```

```php:Commentモデル
public function commentable()
{
    Relation::morphMap([
        config('const.POLYMORPHIC_TYPE.POST') => 'App\Services\GetCommentList\Query\Models\Post',
        config('const.POLYMORPHIC_TYPE.VIDEO') => 'App\Services\GetCommentList\Query\Models\Video',
    ]);
    return $this->morphTo();
}
```
Studio WebでZoomの会議を予約してみた

## はじめに
①本記事は、2023年7月開催の「UiPathブログ 発信チャレンジサマー」の26日目のブログです。
ブログの詳細、参加方法については以下のブログを参照ください。

https://note.com/shumpei_w/n/nd082bdf28853

②このブログ情報は、2023/7時点の情報です。
③UiPathはStudio Webを使用しています。
④ZoomのサポートのVersion？は1.888.799.9666です。

## Zoomのアクティビティ？
Studio Webは、Webサービスに関連するアクティビティが数多くありますが、実はZoom関連のアクティビティもたくさんあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/1b65966e-13f8-0008-1141-3b01c8f15395.png)

## 予約してみよう
試しに、1回だけのミーティングを設定してみましょう。
まずは、「1 回限りのミーティングをスケジュール」アクティビティを配置し、「Zoomに接続」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/db7a79cd-1439-f17f-a9ed-3c6d6b7a6e80.png)
UiPathとZoomを接続するため、「接続」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/903aaaa8-40b5-bf85-b122-39cb114ba411.png)
Zoomのログインを求められるため、サインインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/fd028935-21f6-da82-0ab1-10a7d3a3a9d4.png)
許可する場合は「Allow」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/8050d249-ca62-71d3-10af-5ac1c90f236d.png)

接続できると、以下のような画面が出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/643d6fd4-9219-dd52-705b-1b19f67c9fd0.png)

準備は整ったので、必要事項を入力しましょう。
今回はトピック、開始時間、アジェンダのみ設定しましょう。
(パスワードは今回なしで)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/555a147b-4704-aaff-ddfa-6732eedbdead.png)

・トピックは会議の題名を入力します。
今回は「MBA進学の件」と記載してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/58a6fc97-e9dd-e86b-4da3-4f93c927cd41.png)

・開始時間の入力欄*を押すと以下のカレンダーが出てきますので会議の日時を設定しましょう。(今回は2023/7/26の21:30で設定します)
設定できたら「適用」を押して日時を確定させましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/ecdfc065-f3b6-e1f9-7869-de785fa76b04.png)

*以下のカレンダーのマークを押しても上記の設定画面は出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/48a7859a-681e-f559-57be-e21e4b5bb9aa.png)
設定できたら以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/4a203ee3-f9eb-a784-f004-2ccdcc73c86d.png)

・アジェンダには会議の詳細についてある場合は記載しましょう。
(必須事項ではないので記載はなくてもOK)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/0fd9470d-17b0-115a-22ae-02c7fc1633df.png)


## 実行後、結果は...
Zoomへログインして、スケジュールを確認してみると...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/e975f982-c321-ebdf-adf6-9959a31d9d1d.png)
おお、会議の設定ができていますね！

ではアジェンダは入っているのでしょうか。
ここではちょっとわからないので、「編集」ボタンを押して確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/97ee7cf2-adbd-2514-a502-921d463a694d.png)
ちゃんと入っていましたね！

## まとめ
Studio WebではAWSやSalesforceも操作できるのですが、Zoomの操作も可能と知れてStudio Webの可能性に触れることができました。
次回は、(本記事ではすっ飛ばしてしまった)出力欄について触れていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502614/92fb8e04-b9ad-173d-7f42-d7fca3a9a960.png)

最後までお読みいただきありがとうございました。
【SwiftUI】Pull-to-Refreshの実装

# はじめに
`refreshable`を使ったことがなかったので簡単なサンプルを作成してみました

# サンプルアプリ
![Simulator Screen Recording - iPhone 14 Pro - 2023-07-26 at 20.47.34.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1cd3da1a-8140-90ea-9f4b-9df849d9a4a8.gif)

# 実装
```swift
import SwiftUI

struct ContentView: View {
    @State private var items: [String] = ["サンプルセル", "サンプルセル"]
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
        }
        .refreshable {
            try? await Task.sleep(nanoseconds: 3 * NSEC_PER_SEC)
            items.append("サンプルセル")
        }
    }
}
```

# おわり
Twitter的なアプリを簡単に作れますね
【作業メモ】GCPリソースをTerraformコードとしてエクスポートする（リソース指定）

前回記事でプロジェクト配下のリソースをエクスポートできるものは全部Terraformコードとしてエクスポートしたけど、
`実行するたびにプロジェクト配下のリソース全て.tfにするのも時間かかるので、
リソースを指定してエクスポートする方法とか、エクスポートがサポートされていないリソースを今後整理したい`
という締めにして今後の課題にしたので、今回はリソース指定してエクスポートをしてみる

今回は超短い

前回記事

https://qiita.com/Pretzelisa/items/00ed0506dffb90e879af


## 1. Config ConnectorのCLIをインストール
CloudShellで以下を実行。CloudShell立ち上げる都度コマンド実行しないとダメみたい
```
sudo apt-get install google-cloud-sdk-config-connector
```
## 2. デフォルトプロジェクト指定
```
gcloud config set project <プロジェクトID>
```

## 3. エクスポート
今回はデフォルトプロジェクトを指定していてもエクスポートコマンド内でプロジェクトIDを指定しないとエラーになった（`Missing required argument [--organization or --project or --folder]: Should specify the organization, or project, or the folder for root cloud asset.`と怒られた）

なので指定してあげる
```
gcloud beta resource-config bulk-export --project=<プロジェクトID> --path=<エクスポート先ディレクトリ> --resource-format=terraform --resource-types=storage.cnrm.cloud.google.com/StorageBucket,ComputeInstance
```
<br>

リソースの指定の仕方は以下を参考にした

https://cloud.google.com/sdk/gcloud/reference/beta/resource-config/bulk-export

エクスポート先のディレクトリはこんな感じ。指定したリソース名のディレクトリだけできてる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458266/edf78fa4-bbeb-c73a-2ce2-e23e61a962db.png)

リソース指定していないときがこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458266/bd575854-1837-1a2f-775b-d17e8c7977ae.png)

おわり
C言語で5種類の文字を標準入力から受け取る方法

# 学んだこと
・scanfの %c の前にスペースを入れることで、改行や空白文字を無視して1文字ずつ受け取れる。

```C
#include <stdio.h>

int main() {
    char characters[5]; // 5つの文字を格納する配列
    for (int i = 0; i < 5; i++) {
        scanf(" %c", &characters[i]); 
    }

    printf("入力された文字は以下の通りです:\n");
    for (int i = 0; i < 5; i++) {
        printf("%c\n", characters[i]);
    }
    return 0;
}
```
<b>入力例</b>
a
b
c
d
e
<b>出力例</b>
入力された文字は以下の通りです:
a
b
c
d
e
React + SpringBootアプリ　簡易まとめ

# 初めに

今回の記事ではReact、SpringBootを用いた旅行予約管理アプリケーションの作成を行った際に使用したコードを復習も兼ねて簡単にまとめていこうと思います。
今まではEclipseでコード編集を行っていましたが今回のアプリケーション開発ではフロントのコード編集にVC CodeとバックにはIntellijを使用しました。
環境構築などは[YouTube](https://www.youtube.com/watch?v=4LZKnegAm4g&list=LL&index=8&t=3405s)を参考にしました。

## フロント(React)からバック(Java)のAPI呼び出し
SpringBootを使用してアプリケーションを作成する際に使用するControllerに`@CrossOrigin`を使用します。
今回のReactアプリケーションではデフォルトのURL`http://localhost:3000`を使用しているのでControllerには`@CrossOrigin("http://localhost:3000")`とすればフロント側から指定のAPIのURLをたたけば処理が走るようになります。
```java:/src/main/java/com/example/demo/Controller/
@RestController
@CrossOrigin("http://localhost:3000")
public class Controller {
}
```
今回は旅行予約管理サイトでは「予約」「予約編集」「予約削除」機能を実施していたので基本的なPost、Get、Put、Deleteを使ったのでバックのControllerではアノテーション`@PostMapping`、`@GetMapping`、`@PutMapping`、`@DeleteMapping`を使用しました。
下記の様に任意のAPIのURLを指定することでバック側のAPIをたたくことができます
```js
await axios.post(`http://localhost:8080/booking`)
await axios.get(`http://localhost:8080/booking/${loginUserId}`);
await axios.put(`http://localhost:8080/booking/${id}`);
await axios.delete(`http://localhost:8080/booking/delete/${id}`);
```
下記の様にして任意のAPIにフロント側から値を渡したりバックから帰って来た値をフロント側で使用したりできます。
```js
const result = await axios.post("http://localhost:8080/signup", user);
const errorMessage = result.data;
```

## 最後に
簡易的なまとめですが以上にしたいと思います。
まだアプリケーション自体は作成中なので完成次第、他の機能、実装に苦労したことなどあれば記事にしていきたいと思います。
Laravelで削除確認メッセージを出す方法

# 概要
この確認は正直どこでも使うので
汎用性が高いと考え記事にしました。

# バージョン
* laravel 9.x
* composer 2.5.8
* php 8.1

# 対象コード
```html  
<form id="delete_{{ $contact->id }}" class="mt-40" method="post" action="{{ route('contacts.destroy', ['id' => $contact->id ])}}">
        @csrf
        <div class="p-2 w-full">
          <a href="#" data-id="{{ $contact->id }}" onclick="deletePost(this)" class="flex mx-auto text-white bg-pink-500 border-0 py-2 px-8 focus:outline-none hover:bg-pink-600 rounded text-lg">削除する</a>
        </div>
        </form>
        
<script>
        function deletePost(e){
            'use strict'
            if(confirm('本当に削除しますか？')){
                document.getElementById('delete_' + e.dataset.id).submit()
            }
        }

    </script>

```

# onclick
```html
<a href="#" data-id="{{ $contact->id }}" onclick="deletePost(this)" class="flex mx-auto text-white bg-pink-500 border-0 py-2 px-8 focus:outline-none hover:bg-pink-600 rounded text-lg">削除する</a>
```
onclickはクリックしたらどのような処理を行うか設定することができます。
今回は"deletePost(this)"という名前を設定して、javascriptでdeletePost(e)と指定しています。

this は function を呼んだ時の . の前についているオブジェクトを指します。ここで言うと
e.dataset.idのeを指します。

thisが分からない人は以下の記事がすごくわかりやすいので、見てください。

https://qiita.com/takkyun/items/c6e2f2cf25327299cf03


```javascript
<script>
        function deletePost(e){
            'use strict'
            if(confirm('本当に削除しますか？')){
                document.getElementById('delete_' + e.dataset.id).submit()
            }
        }

    </script>
```

getElementByIdはwebからマッチしたidの中身を取得する関数です。

e.dataset.idは分けるとこんな感じかな？
e=「クリックしたら」 dataset=「htmlのdata-id」　の　id=「form id="delete_{{ $contact->id }}"」を登録する
こんなイメージ。
分からなければ私の語彙力不足です。
申し訳ありません。

```javascript
document.getElementById('delete_' + e.dataset.id).submit()
```
# 結論
thisの解説がかなり良質なので、様々なサイトを見た後にこれを、見に来るとわかりやすいかもしれないです。
特定の日付の場合項目編集を防ぐSalesforce入力規則作成方法

特定の日付の場合に項目編集を防ぐSalesforce　入力規則作成方法を示します

※前提
項目のAPI参照名が
A__cとB__cとC__cの項目編集を防ぎます


# 例１　25日のみ項目編集を防ぐ

AND(
Day(TODAY())= 25,
OR(
ISCHANGED(A__c),
ISCHANGED(B__c), 
ISCHANGED(C__c)))


# 例2　25日以降の項目編集を防ぐ

AND(
Day(TODAY())>= 25,
OR(
ISCHANGED(A__c),
ISCHANGED(B__c), 
ISCHANGED(C__c)))

# 例3　25日以降でなおかつプロファイル「システム管理者」以外のユーザの項目編集を防ぐ

AND(
$Profile.Name <> 'システム管理者' ,
Day(TODAY()) >= 25,
OR(
ISCHANGED(A__c),
ISCHANGED(B__c), 
ISCHANGED(C__c)))


※プロファイル名を入力規則で入れる際は言語設定により入力規則が動かなくなる場合があるのでご注意ください

（参考記事）

https://qiita.com/Takaa/items/f0f863c7795dd975701c
M2チップのmacでfishを設定する

新しいmacにしたのでfishを設定していきます。
M1チップと少し手順が異なるのでメモです。

## 環境
MacBookPro
チップ: Apple M2 Max
macOS: Venture(13.4)

## 手順
### 1. finderでterminalを検索
### 2.「情報を見る」から「Rosettaを使用して開く」にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233386/4f523f5c-aa5a-7487-87ea-a8cdc3b4de74.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233386/6861b015-607b-3e51-f20f-12f578cfd4fd.png)

### 3. Homebrewのインストール
terminalを開いて公式サイトの以下のコマンドを実行
https://brew.sh/index_ja

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

### 4. Homebrewが入ったか確認
```
$ brew -v
Homebrew 4.1.1
```

### 5. fishをインストール
```shell
$ brew install fish
```

### 6. fishのインストール先を確認
localのbin以下にあればOK
```shell
$ which fish
/usr/local/bin/fish
``` 

### 7. デフォルトのシェルをfishにする
```shell
$ sudo vi /etc/shells
```
最後尾に以下を追加して保存
```shell
/usr/local/bin/fish
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233386/5c52676d-ea0e-770d-997b-2d4f562ed10d.png)

以下を実行
```shell
$ chsh -s /usr/local/bin/fish
```
terminalを再起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233386/a192d7cc-64f7-a2c9-33db-239f8545a5a5.png)
お魚の矢印でてたら終わり


## おわりに
intelの時と同じパスでHomebrewがインストールされてたり、手順はM1より楽になってるかも？