OmniAICreator/Qiita-1.07M huggingface dataset:
Processingでスレッドthread処理

# Processingでスレッド処理

https://processing.org/reference/thread_.html

標準でスレッド機能がある。
しかし、変数の受け渡しはできない。
```java
void setup() {
}

void draw() {
  thread("myThread");
}

void myThread() {
  println("Hi");
}
```
重い計算を並列に計算して、マルチコアCPUの性能を引き出したいときに困る。
スレッドにid番号を振って、処理を振り分けたい。

# Threadを使い、idを伴うプログラム
10個のスレッドを作成するサンプル。作成時にid番号を割り振る。
delayを追加することで、若干、処理のタイミングがズレて、printの実行タイミングがずれる。よって、実行のたびに、出力の順番が変わる。
実行後、1秒経過した時点で、一度に10個のprintが実行されるので、並列処理されていることが確認できる。
追記：
各スレッド終了を確認して、合算値を計算し、表示するようにした。285になっていれば、問題なし。


```java:processing
myThread myTh [] = new myThread[10];

void setup() {
  for (int i=0; i<10; i++) {
    myTh[i] = new myThread(i);
  }

  for (int i=0; i<10; i++) {
    myTh[i].start();
  }

  int result=0;
  for (int i=0; i<10; i++) {
    while(!myTh[i].finish){
      print("");
    }
    result+=myTh[i].r;
  }
  println(result);
}

void draw() {
}

class myThread extends Thread {
  int id;
  int r;
  boolean finish;

  myThread(int n) {
    id = n;
  }

  void run() {
    delay(1000);
    r = id*id;
    println(id+"^2="+id*id);
    finish = true;
  }
}

```

```:出力例
0^2=0
4^2=16
7^2=49
2^2=4
6^2=36
1^2=1
8^2=64
5^2=25
9^2=81
3^2=9
285
```

# Runnableを使ったidを伴うスレッド処理
未定

# Callableを使ったidを伴うスレッド処理

同様な処理をjavaのCallableを使って実装した。

```java
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.Future;
import java.util.concurrent.Callable;

void setup() {
  ExecutorService[] ex = new ExecutorService[10];
  Future<Integer>[] futureResult = new Future[10];
  for (int i=0; i<10; i++) {
    ex[i] = Executors.newSingleThreadExecutor();
    futureResult[i] = ex[i].submit(new myFunc(i));
  }

  try {
    int result = 0;
    for (int i=0; i<10; i++) {
      result += futureResult[i].get();
    }
    println(result);
  }
  catch (Exception e) {
    println(e);
  }
}

void draw() {
}

public class myFunc implements Callable<Integer> {
  int id;
  
  public Integer call() {
    delay(1000);
    println(id+"^2="+id*id);
    return id*id;
  }
  
  public myFunc(int _i){
    id = _i;
  }
}
```

```:出力例
4^2=16
6^2=36
0^2=0
1^2=1
8^2=64
5^2=25
9^2=81
7^2=49
2^2=4
3^2=9
285
```
【小ネタ】大文字と小文字の変換について



# 一般的な実装

大文字と小文字を変換するコードを書くとするなら、以下のようにするのが一般的だと思われます。

```cpp
char toUpper(char c) {
    return ('a' <= c && c <= 'z') ? ('A' + c - 'a') : c;
}

char toLower(char c) {
    return ('A' <= c && c <= 'Z') ? ('a' + c - 'A') : c;
}
```

<details><summary>修正前のコード</summary>

(2024/03/07修正) 「`diff` を用いるのはややこしいのではないか」というご意見をいただき、以下のコードから修正しました。

```cpp
char toUpper(char c) {
    auto diff = c - 'a';
    return (0 <= diff && diff <= ('z' - 'a')) ? ('A' + diff) : c;
}

char toLower(char c) {
    auto diff = c - 'A';
    return (0 <= diff && diff <= ('Z' - 'A')) ? ('a' + diff) : c;
}
```
</details>


# ビット演算を用いた変換

手元の環境で実行してみればわかりますが、これで本当に動きます。
ロマンあふれるコードですね。

```cpp
using byte = unsigned char;

char toUpper(char c) {
    char upper = c & ~0x20;
    return ('A' <= upper && upper <= 'Z') ? upper : c;
}

char toLower(char c) {
    char lower = c | 0x20;
    return ('a' <= lower && lower <= 'z') ? lower : c;
}
```

このコードについての説明は以下に記載します。

<details><summary>修正前のコード</summary>

(2024/03/07修正) `return`部分の比較演算を、以下から修正しました。

```cpp
using byte = unsigned char;

char toUpper(char c) {
    char upper = c & ~0x20;
    return ((byte)(upper - 'A') <= (byte)('Z' - 'A')) ? upper : c;
}

char toLower(char c) {
    char lower = c | 0x20;
    return ((byte)(lower - 'a') <= (byte)('z' - 'a')) ? lower : c;
}
```
</details>

# 簡単な解説

A~Z と a~z のASCIIコードをビットに直して見比べてみるとよく分かります。

| 文字 | 大文字        | 小文字        |
| :--- | :------------ | :------------ |
| A/a  | 01**0**0_0001 | 01**1**0_0001 |
| B/b  | 01**0**0_0010 | 01**1**0_0010 |
| C/c  | 01**0**0_0011 | 01**1**0_0011 |
| ...  | ...           | ...           |
| Y/y  | 01**0**1_1001 | 01**1**1_1001 |
| Z/z  | 01**0**1_1010 | 01**1**1_1010 |

大文字と小文字は, `0x20` でビットが立っている位置以外のビットは一致しているので、これを用いることで、大文字と小文字の変換を上のように記述することができます。

# ~~補足~~

:::note warn
(2024/03/07追記) このセクションの内容は本記事の主題から大きく逸れていたのと、C++ではこの方法には意味がないことが判明したため、修正しました。
:::

<details><summary>修正前の内容</summary>

上のコードで、returnの部分にかかれているこの条件式について説明します。

```cpp
(unsigned char)(lower - 'a') <= (unsigned char)('z' - 'a')
```

これは以下の条件式と同等です。

```cpp
0 <= (lower - 'a') && (lower - 'a') <= ('z' - 'a')
```

詳しい説明は、以下の記事が分かりやすいです。

https://qiita.com/Tokeiya/items/1ee03c3a0648e79439b2

</details>

# おわりに

ビット演算による実装は実際に様々なところで用いられており、[.NET API の実装](https://source.dot.net/System.Private.CoreLib/R/0b1d5ee861c6b309.html) でも見られます。

実際には元から用意されている関数を用いることが多いと思われますし、ここで紹介した方法ではàとÀの相互変換などには対応できません。

以上、小ネタでした。
【GitHub】プルリクエストのコメントにつけるラベルバッジを返信テンプレートに登録しよう【PullRequest】

ワイ「PullRequest立てたやで！」

開発者A「この部分、こうしたいよね」

開発者B「この部分、こうだな……」

ワイ「👀」

ワイ（Aさんが修正案きてて、Bさんが感想書いてくれてるみたいだ）

------

数時間後…

ワイ｢よっしゃ！直したやで！！！｣

開発者A「いや、その作業はこのPRでやらなくていいです。」
開発者B「ワイのはこのPRで対応してほしいやで。」

ワイ「」

ということにならないように、ラベルがついてると便利だよね！
@iganin san による記事：

https://qiita.com/iganin/items/aee297eade84849cc9cd

## Q. でも毎回手入力してない？

![返信テンプレートが登録済みのSaved repliesの画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/f8032b6b-f041-0d31-f417-6096e54d56ac.png)

:::note info
[Text Blazeのブラウザ拡張](https://blaze.today/)使えばいいじゃん？と思ったそこのあなた。
→ この記事は終了です。ありがとうございました😭
:::

今回紹介したいものは「[返信テンプレート](https://docs.github.com/ja/get-started/writing-on-github/working-with-saved-replies/using-saved-replies)」という機能です。
GitHubの返信テンプレートに以下のようなコードを登録しておくと、コメントを記入する際にGiHubの機能だけでバッジを挿入できます。

```md
![must](https://img.shields.io/badge/review-must-red.svg)
```

## 🔧 設定方法

||手順|備考|
|:-:|:--|:--|
|1|[Saved replies](https://github.com/settings/replies)にアクセス|ログイン後、ユーザ設定画面から行けます|
|2|「Add a saved reply」からテンプレートを登録|参考：[プルリクエストへのコメントでは Text Blaze でラベルバッジをつけよう！](https://qiita.com/iganin/items/aee297eade84849cc9cd#%E3%83%A9%E3%83%99%E3%83%AB%E3%82%92%E8%A6%96%E8%AA%8D%E3%81%97%E3%82%84%E3%81%99%E3%81%8F%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%83%90%E3%83%83%E3%82%B8%E3%81%AB%E3%81%99%E3%82%8B)<br>![Add a saved replyセクションの画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/05793c1d-6252-1fef-24ef-7ea14470c8c2.png)|



## 💡 使用方法

※ Issueでも同様に返信テンプレートは利用できます

||手順|画面キャプチャ|
|:-:|:--|:--|
|1|任意のPullRequestを開く||
|2|指摘をしたいコードの行コメントテキストフィールドを開く|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/02f6d0ec-5d83-e8c1-b70d-713768ccdacc.png)|
|3|`ctrl + .`またはSaved repliesボタンを押下|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/5b1748a7-12e5-9e38-a285-9d0c3b4d1df3.png)|
|4|テンプレートを選択|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/cacdfa64-92b4-9ed7-fcce-cb59b430e863.png)|
|5|本文を追記してから「Add single comment」か「Start a review」を押下[^1]する|![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/34651c66-61bf-3ac9-3c34-ce4ddeeeff3b.png)|

[^1]: 個人的には「Start a review」でいくつかレビューコメントを書いてもらったあと後に、「Submit review」ボタンから pending になっているレビューコメントをまとめて送信するタイプが好きです📝
世の中はどっちのほうが多いんでしょうか👀

## 以上です！

こういうラベルバッジ系はチームルールにしたいところ。
しかしながら、今の構造だとGitHubユーザそれぞれが設定するしかないのがお悩みポイントですね👀

返信テンプレートは全リポジトリ共通なので、関わっているチームや組織ごとにルールが決まってたら、テンプレートリストが長くなってちょっと大変です。
私の場合はルールとして明示されているチームに属したことはないのですが、一般的にどうなんでしょう🤔

IssueやPullRequestのテンプレートは`.github`ディレクトリにMarkdownファイルを置けば作れるので、将来的にはコメントのテンプレートもリポジトリに設定出来たり、organization単位で設定できるといいな～と思っています。

もし「それもうできるで！」ということであればツッコミお待ちしております😂🥒
[Ruby] Rails+NginxのDockerCompose環境

# はじめに

[Ruby on Rails](https://railsguides.jp/)のローカル開発環境のDockerCompose簡易テンプレートを作成しました。

https://railsguides.jp/

railsをインストールする際は、通常、railsプロジェクトを作成してからGemfileで依存パッケージをインストールする手順となっております。従って、依存パッケージのインストールをDockerのイメージレイヤに反映させるために`docker compose build`が必要でした。

私が今回作成した簡易テンプレートでは、Dockerfile内でGemfileを取得して依存パッケージをインストールし、そのあとに`WORKDIR`にRailsプロジェクトを生成する手順となっております。従って、Dockerfileの処理が完了したときには、すでに依存パッケージのインストールがDockerイメージレイヤに反映されているため、`docker compose build`の実行が不要となっております。

<font color="red">※ Dockerfile内でビルド用のRailsプロジェクトを作成しておりますが、これはあくまでGemfile取得用であるため、実装では使いません。</font>

Railsの通常のDockerCompose環境構築手順は以下をご参照くださいませ。

https://github.com/docker/awesome-compose/blob/master/official-documentation-samples/rails/README.md

# 前提環境

https://qiita.com/perilla/items/ef73cf57ade24bc94f19

https://qiita.com/perilla/items/f46c191e368ae64c14c4

# Docker Compose 構成

Docker Composeの構成を記述します。

# サービス一覧

- app
- web
- db_mysql
- db_mysql_admin

# app

[Ruby on Rails](https://railsguides.jp/)が動作するアプリケーションサーバー。

# web

[nginx](https://hub.docker.com/_/nginx)サーバー。
HTTPリクエストをappコンテナへとフォワード（中継）します。

# db_mysql

[MySQL](https://hub.docker.com/_/mysql)サーバー。

# db_mysql_admin

[phpMyAdmin](https://hub.docker.com/_/phpmyadmin)サーバー。

# Github

https://github.com/perilla0/rails_template
[Angular]親のFunctionを子で使いたい時のアレ

# こんな特殊なことするやついるんか？？？
ということで、
通常であれば子の変更をEventEmitterで受け取ってなんかするって処理はよくあるけど、
親で定義してるFunctionを子供で呼び出したいって時の実装を書いてみた。

こんなこと使う例としては、、、
一覧から選択するページングをするような共通小画面のコンポーネントで、
データ取得のAPIは呼び出し元の親画面により違うため、
親画面で定義したデータ取得APIを呼び出すFunctionを小画面で呼びたい！っていうアレ


こんなニッチな記事に来る人はとっとと正解が欲しいだろうから、
とりあえずこんなんで出来るんやでというサンプル
```typescript:子のコンポーネントのTS(抜粋)
@Component({
  selector: 'child-component',
  templateUrl: 'child-complete.html',
  styleUrls: ['child-complete.scss'],
  standalone: true,
})
export class ChildComponent implements OnInit {
  // @Inputで関数を受け取れる口を用意する
  @Input() searchApiCall: (
    filter: string,
    pageNo: number
  ) => Promise<{
    options: {
      text: string;
      value: string;
    }[];
  }>;

  @Output() changeSelect: EventEmitter<{
    value: string;
  }> = new EventEmitter();

  // SelectのOption
  public selectOptions: {
      text: string;
      value: string;
    }[] = [];

  // データ取得処理
  async getData(filter: string, pageNo: number) {
    // 起動時に呼び出してみる
    this.selectOptions = await this.searchApiCall(filter, pageNo);
  }

  変更を親に返すやつ
  changeSelect($event){
    this.changeSelect.emit($event.detail.value);

  }
}
```

まずは子供側の定義ですが、とりあえず親で定義してほしい関数の雛形を@Inputで定義します。

```html:親のコンポーネントのHTML(抜粋)
<ng-container>
  <child-component 
    [searchApiCall]="selectOptionsSearchApiCall" 
    (changeSelect)="changeSelect($event)"></child-component>
</ng-container>
```
親のHTMLからは子供のコンポーネントを設定
selectOptionsSearchApiCall　が親で定義する関数


```typescript:親のコンポーネントのTS(抜粋)
export class ParentComponent implements OnInit {

  changeSelect($event){
    // 変更処理
  }

  selectOptionsSearchApiCall = async (
    filter: string,
    pageNo: number
  ) : Promise<{
    options: {
      text: string;
      value: string;
    }[];
  }> => {
    // API呼び出し処理

    return []; // 取得結果の返却
  }
}
```

## 注意点
:::note alert
子供に渡すFunctionは必ず<font color="red">__クラス変数__</font>として定義すること。
:::
```typescript:ダメなやつ親のコンポーネントのTS(抜粋)
export class ParentComponent implements OnInit {

  // これダメ、ゼッタイ
  async selectOptionsSearchApiCall(
    filter: string,
    pageNo: number
  ) : Promise<{
    options: {
      text: string;
      value: string;
    }[];
  }> {
    // API呼び出し処理

    return []; // 取得結果の返却
  }
}
```

この書き方にするとAPI呼び出し処理の部分で __this__ を使おうとすると、thisがundefindedになってしまいエラーになりまして、どうにかこうにか試した結果がクラス変数として定義するというものになりました。

## まとめ
callback処理（EventEmitter）はよくあるけど、
こんな特殊な事することあるんか？と思うけど、
こんなページに辿り着いた人に役立ってもらえればと。
Terraform IaC（Infrastructure as Code）基礎

Terraformとは
インフラリソースをコードで定義して管理することをInfrastructure as Code（IaC）と呼びます。

Terraformは、HashiCorp社により開発されているオープンソースのIaCツールであり、クラウドを扱うIaCツールとしてデファクトスタンダードの地位を確立しています。
Terraformを使用すると、AWSやGCPなどのクラウドサービス上のインフラ環境（Webサーバーやデータベースなど）をコードで定義し、コードに基づいたインフラ環境を自動構築することができます。また、コードを見るだけでインフラの構成内容を理解できるようになりますし、インフラ環境もGitなどのツールでバージョン管理ができるようになります。
結果として、Terraformを利用することでオペレーションミスが無くなるほか、実体とドキュメントの二重管理から解放され、複数システムでコードを再利用することで効率化を図ることが出来ます。様々なリソースが必要となる場合に、手動で行うよりもアジリティの高いインフラ開発が可能になります。

Ansibleとは
AnsibleもIaCツールとしてはという有名でよく使われます。
Terraformはインフラ構築(サーバ／DB、ネットワーク設定)を得意とするIaCツールであるのに対し、Ansibleはアプリケーション環境の構築(ミドルウェアの導入、アプリデプロイ)を得意とします。
TerraformとAnsibleにはそれぞれ得意とするプロビジョニングレイヤが異なりますので、双方を効果的に使い分けることでIaCの効果を最大化することが出来ます。

その他のIaCツール
Terraformと同様にインフラ構築に強みを持つツールとしてGoogle Cloud Deployment ManagerやAWS CloudFormation、Azure Resource Managerなどが存在します。これらのツールはそれぞれのクラウドベンダーが自社サービスを扱うために開発されたツールですので、マルチクラウド環境においてはコードを統一して管理することが出来ません。その点、Terraformであれば１つのツールで複数のクラウドに対応可能なので、一貫性のある効率的な運用が可能となります。

 



Terraformの基本操作
TerraformのコードはHCL（HashiCorp Configuration Language）という言語で実装します。
（HCLはHashiCorp社が設計した言語）

init
Terraformのコードが格納されるディレクトリで「terraform init」コマンドを実行すると、リソースに必要なバイナリファイル（プロバイダなど）がダウンロードされます。

plan
「terraform plan」コマンドを実行するとどのような変更を実行するかという実行計画が出力されます。このコマンドにより、実際のリソースに変更を加えることなく、一連の変更の実行計画が正しいかどうかを確認することができます。

apply
「terraform apply」コマンドを実行するとplan の結果が表示され、最終確認が行われます。yes と入力するとリソース作成が行われます。

destroy
「terraform destroy」コマンドを実行するとapply と同様にplan の結果が表示され、最終確認が行われます。yes と入力すると作成されたリソースが削除されます。

Terraformのファイル構成
Terraformでは、tfファイル（拡張子が.tf）で定義された情報に従って各種リソースを構築します。
単一ファイルにすべてを定義することも可能ですが、分離することが一般的です。
標準構造に従った最小限の推奨モジュール構成として以下の構成が定められています。
.
├── README.md
├── main.tf
├── variables.tf
├── outputs.tf

（参考）Terraform公式サイト

README.md
tfファイルで定義したリソースについての説明ドキュメントとして用意します。作成されるリソースについての説明等を記述します。

main.tf
リソース定義（ファイル名は任意）を行うファイルです。以下のような項目をブロックを分けて定義します。

 

resourceブロック
作成するクラウドリソースを指定します。以下はAWSでEC2リソースを指定する場合の例です。
「resource “<リースの種類>” “<リソース名>” {}」という構文で定義します。
リソースの種類を指定する例として、VPCの場合は「aws_vpc」、セキュリティグループの場合は「aws_security_group」のように指定します。

resource "aws_instance" "web_server" {
    instance_type = "t2.micro"
    ami = "ami-00000000000000000" 
}
 

providerブロック
構築するリソースのプロバイダー情報を記載します。
プロバイダはAWS、GCP、AzureなどのAPIの違いを吸収するラッパの役割を果たします。
以下はAWSのリソースを作成する場合の例です。
provider には”aws”を定義し、regionには、リソース構築先のAWSリージョンを指定します。
プロバイダはTerraform本体とは別で管理されており、terraformm init コマンドで、指定したプロバイダのバイナリファイルをダウンロードする必要があります。

provider "aws" {
    region = "ap-northeast-1"
}
 

moduleブロック
Terraformコードを分割してモジュール化する仕組みがあり、以下のように定義することができます。
モジュールごとにディレクトリを分ける必要があり、モジュール定義では対象のディレクトリを指定します。

module "network" {
  source = "./network"
}
variables.tf
インプット変数情報を「variable」として定義します。
インプット変数は関数の引数のようなもので、これを使用することで、main.tfなどのモジュールのソースコードを変更せずにカスタマイズが可能です。
type として変数に受け入れられる値の型（string, number, list）を指定します。また、default にはTerraformを実行するときに値が設定されていない場合に使用する値を指定します。

variable "availability_zone_names" {
  type = list(string)
  default = ["us-west-1a"]
}
outputs.tf
アウトプット変数情報を「output」として定義します。
モジュール外から値を取得する場合や、apply時にターミナルに値を出力したい場合に使用します。

tfstateファイル
apply 実行時にTerraformが自動的に.tfstateファイルを生成します。このファイルにはクラウドリソースの現在の状態が記録されます。tfファイルとtfstateファイルの差分を見ることで必要な更新のみが行われるようになります。
react-hook-formのデータ(data)の型定義

# はじめに
どうもこんにちは！僕は現在1ヵ月本気の技術力向上を目指している現役高校1年生、@shuniiです！
今回はreact-hook-formで戸惑ったことを共有します。

# 問題
react-hook-formで作ったフォームの送信ボタンを押したときに返却されるデータの方を指定できない。

# 解決方法
> <font color="red">**useFormに定義する**</font>

以下はサンプルになります。
```tsx
type FormValues = {
    id: string;
    name: string;
};

export const SamplePage = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<FormValues>(); //  <=  ここ
}
```

# 終わりに
useStateと同じ定義の仕方でした～

# About Me
- X(Twitter)

https://twitter.com/shunii_hack

# 参考
公式ドキュメント最強💪

https://react-hook-form.com/get-started#TypeScript
(ポエム) 「判断ノート」のすすめ ( index )

転職先募集中 ( たぶん )

現在の勤務に一区切りがついたので、私が思うことを残そうかと思っています。
随時更新

# summary
「判断」の集合を仮定し、そこに何らかの有意性があるのではないか、という仮定を記したものです。

# index
0\. わたしにおこったこと
何故「判断ノート」という方法なのかが分かりにくいかな、と思ったので書く予定。

1\. 「意志の衝突」と「判断ノート」という測定方法
「判断ノート」という測定方法についての紹介です。

2\. Getting Started with 「判断ノート」
「判断ノート」のチュートリアル的な内容です。

https://qiita.com/IzakayaRyotaDetch/items/558efee50bef922322e5

3\. 「判断ノート」初級編

3-1\.「はかる」

https://qiita.com/IzakayaRyotaDetch/items/21f35c5fbd182816f870


10\. 私が判断した自社の状況

https://qiita.com/IzakayaRyotaDetch/items/40cdc036bc40434657f8
フォームの隠しフィールドによる意図しないNotNullViolationとその解決策

## 背景
Railsアプリケーションにおいて、予約システムの実装中に意図しない挙動が発生しました。その解決策を備忘録として記事に残します。

## 問題の詳細
具体的には、reservationsテーブルのTime型のtime_slotカラムの登録の際、`params[:reservation][:time_slot]`の値が`Time`型ではなく、`DateTime`型(`String`型)として認識される上に、ストロングパラメータを通過しているにもかかわらず、`create`アクションではparams[:reservation][:time_slot]が`nil`になるという不具合が発生しました。エラーメッセージは以下の通りです。

```ruby 
# エラーメッセージ
ActiveRecord::NotNullViolation - PG::NotNullViolation: ERROR:  null value in column "time_slot" of relation "reservations" violates not-null constraint
```

## 問題が生じた状況
```reservations_controller.rb
  def reservation_params
    params.require(:reservation).permit(:customer_id,
      :company_id,
      :request,
      :is_approved,
      :date,
      :time_slot,
      service_ids: [])
  end
```

```confirm.html.erb 
<%= form_with model: @reservation, url: reservations_path, method: :post do |form| %>
  <div class="field">
    <strong><%= form.label :time_slot, "Start Time" %></strong>
    <%= form.select :time_slot, @available_start_times.map { |time| [time, time] }, { include_blank: true }, { required: true } %>
  </div>
  
  ...
  
  <%= form.hidden_field :time_slot, value: @time_slot %>
  <div class="actions">
    <%= form.submit "Confirm Reservation" %>
  </div>
<% end %>
```

## 原因
```ruby
<%= form.select :time_slot, @available_start_times.map { |time| [time, time] }, { include_blank: true }, { required: true } %>
```
で`time_slot`をパラメータとして渡しているつもりでしたが
```
<%= form.hidden_field :time_slot, value: @time_slot %>
```
によってパラメータが上書きされ、意図しない値が送信されていたことが原因でした。

## 解決策
以下の行を削除することで解決しました。
```
<%= form.hidden_field :time_slot, value: @time_slot %>
```

## 残った疑問
削除前はストロングパラメータでフィルタするまでは`params[:reservation][:time_slot]`は`"2000-01-01 00:00:00 +0900"`でした。それがcreateアクションに遷移すると`""`になってしまう理由については今も不明です。詳細がわかる方がいらっしゃったらご教授いただけると幸いです。

## 学んだ教訓
- フォームで使用する隠しフィールドは発見しづらい不具合を生じさせることがあるので注意が必要
Unity フォルダが分かれているときのAssemblyの設定方法

## やりたいこと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/19fa22a8-c4d9-1119-0ede-5987b4b5a8ed.png)

フォルダが別でも一つのAssemblyとして定義したい。

## やり方
Assembly Definition Referenceを使う
Create>Assembly Definition Reference
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/a83c6b67-4154-8759-36eb-f19b098e3e8a.png)

作ったアセンブリを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/feb11f72-0029-24fe-1b1d-7f5874394ea4.png)
アタッチする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/0c9693ec-c72b-5f5d-7f68-2bfbf0ac2ad9.png)

結果
二つのフォルダが一つのアセンブリとして機能している
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/79bb3f9a-1302-7102-f6c0-305a8add3227.png)

やったね。
Optimizing the H-1B Visa Process: Practical Tips and Expert Insights for Employers

About
This insightful webinar delves into the key updates and crucial details of the H-1B visa program in Fiscal Year 2025. Gain expert tips to unravel the intricacies of the process, ensuring compliance, efficiency, and success in securing visas for your top talent.

Don't miss out on this invaluable opportunity to elevate your H-1B compliance efforts. Secure your spot now and empower your organization with the knowledge and tools needed for success in the competitive H-1B arena.
When
Thursday, March 7, 2024 · 12:30 a.m. IST (GMT +5:30) 
Agenda
Understand the H-1B visa process and key deadlines for FY 2025.
Demystify the lottery system and recent changes in the process, including fee increases.
Learn the details of the registration process and requirements like Organisational Accounts.
Avoid common pitfalls and ensure smooth submissions.
Discover how OnBlick attorney services support for your H-1B journey, from consultation to RFE assistance.
https://www.onblick.com/webinars/optimizing-the-h-1b-visa-process-practical-tips-and-expert-insights-for-employers
【備忘録】Flutterを学ぶためにVSCodeでDartを触ってみる

クロスプラットフォーム開発を学習するために、Flutterを触ってみることにしました。
以下の記事を読んでFlutterを選択しましたが、React Nativeもいつか触ってみます。
いつかクロスプラットフォーム開発について特徴を整理したい。

https://qiita.com/tetsukick/items/ed9306276942c34b3575
## 本題
Flutterを学習するために、Dart言語を触れる環境を構築したのでその進め方を備忘録として記載します。基本的にはサイトを集約しているだけです。

## 進め方

初学者がFlutterを学習するために、進め方を調べてみました。
こちらの記事が順序立ててやったことを整理しており、わかりやすかったです。

https://zenn.dev/st43/articles/1b56e54bc138ac
## 環境
Mac M1（OS：13.3）

## 環境構築：Flutter
Flutterの公式を元に環境構築
・flutter doctorでOKがでるまでやる。
・エラーが出た時はエラーログをググれば解決できました。

https://docs.flutter.dev/get-started/install/macos/mobile-ios
### 補足
公式サイトは簡潔でわかりやすいです。
ただし、もう少し補足情報が欲しいなと思い、以下のサイトも並行して確認しました。
・Flutterで有名なkboyさんの動画。動画を見ながらハンズオンで環境構築できます。

https://www.youtube.com/watch?v=I6TpDuSFbTc&t=952s

・VSCodeの環境構築について整理されているサイト。

https://zenn.dev/lisras/articles/9f4fe12f920e59
## 環境構築：Dart
VSCodeでDartをさらっと触りたかったが、そもそもどうやって動かすか。
こちらの記事を参考にローカルで触ってみました。

https://medium.com/@kawanojieee/dart-using-vscode-task-f15b0a4c5e75

```hello.dart
void main() {
  print('Hello World!!');
}
```
Run Build Task(cmd + shift + B)でビルドして「こんにちは」
```
Hello World!!
```


## Dartを触ってみる
Dartの公式サイトで基礎文法をコーディングしながら学んでみました。

https://dart.dev/language

こちらの記事はコメントで文法の説明を丁寧にしていたので一通り読みました。

https://qiita.com/teradonburi/items/913fb8c311b9f2bdb1dd
## おわり
Dartはオブジェクト指向言語なのでJava経験者であれば割と理解しやすいのかなと思いました。基礎的な部分は学べたため、後はFlutterで何か作りながら適宜学んでいこうと思います。
RSSを取得する方法

### はじめに
本記事は、JavaScript・HTMLでRSSの取得・表示を試みたときの簡単な備忘録です

### RSSを取得する方法
#### 結論
Javascriptで他所のサーバーのRSSを取得しようとするとCORSエラーが発生するためうまくいきませんでした
サーバーサイドで処理をすればCORSエラーを回避できるので、PHPを用いることによってRSSを取得することができました

#### ソースコード例
任意のRSSを取得・表示する最低限のソースコードを以下に記述します

```php:php
<?php
function rss_get($url){
    $curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, $url);
	$rss = curl_exec($curl);
	curl_close($curl);
 
    echo $rss;
}
?>

<!DOCTYPE html>
<html lang="ja">
<head></head>
<body>
    <main>
        <div>
            <?php rss_get("任意のURL"); ?>
        </div>
    </main>
</body>
</html>
```

##### 備考
- php 7.4
- 取得したデータの処理は別途必要です
- simplexml_load_file()でもRSSを取得できますが、simplexmlが入っていない場合があったので今回は上記を採用しました

##### 参考
https://www.php.net/manual/ja/function.curl-setopt.php
https://www.php.net/manual/ja/simplexml.examples-basic.php
表示してるWEBページのHTMLソースをダウンロードするJavascript

## HTMLファイルのダウンロード
現在表示してるページのHTMLソースをHTMLファイルでダウンロードするスクリプトです。
スクリプトを実行すると即時、
既存のダウンロードフォルダにファイルがダウンロードされます。
### Javascript原文
```Javascript
function getHTMLSource() {
    return document.documentElement.outerHTML;
}

function saveHTMLToFile(htmlContent) {
    var blob = new Blob([htmlContent], { type: 'text/html' });
    var downloadLink = document.createElement('a');
    downloadLink.href = window.URL.createObjectURL(blob);
    downloadLink.download = 'page_source.html';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

var htmlContent = getHTMLSource();

saveHTMLToFile(htmlContent);
```
### ブックマークレット
```Javascript
javascript:(function(){function%20getHTMLSource(){return%20document.documentElement.outerHTML;}function%20saveHTMLToFile(htmlContent){var%20blob=new%20Blob([htmlContent],{type:'text/html'});var%20downloadLink=document.createElement('a');downloadLink.href=window.URL.createObjectURL(blob);downloadLink.download='page_source.html';document.body.appendChild(downloadLink);downloadLink.click();document.body.removeChild(downloadLink);}var%20htmlContent=getHTMLSource();saveHTMLToFile(htmlContent);})();
```

好きにカスタマイズして使ってください。
以上
[ ChakraUI ] Inputコンポーネントのデフォルトのスタイルを変更する方法

# はじめに
どうもこんにちは！僕は現在1ヵ月本気の技術力向上を目指している現役高校生1年生、@shuniiです！
今回はChakraUIでめんどくさかったことがあったのでまとめたいと思います。

# 問題
ChakraUIでコンポーネント(ChakraUIが用意してくれている)のスタイルを変更できない。

僕はInputコンポーネントのスタイルを以下のようにグローバルに設定しようとしていました。Inputコンポーネントはinputとしてブラウザに表示されているのでこの書き方でいけるかなと思いました。
```ts:theme.ts
export const theme = extendTheme({
  styles: {
      input: {
        fontSize: "1em",
        h: "30px",
      },
    },
  },
});
```
```tsx
import //略
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ChakraProvider theme={theme}> {/* <= ここでthemeを適用 */}
      <App />
    </ChakraProvider>
  </React.StrictMode>
);
```

# 解決策
以下のように書き方を変える。
**<font color="red">componetsキーのところに書くと反映される**</font>
```ts
export const theme = extendTheme({
  components: {
    Input: {
      baseStyle: {
        field: {
          fontSize: "1em",
          h: "30px",
        },
      },
    },
  },
});
```

あと、コンポーネントによって少し書き方が異なるようです。defaultStyleを変更しても適用されない場合もあります。

その他のコンポーネントについてはこちらの方の記事を参考にしていただけると良いかと思います。

https://zenn.dev/kenfdev/articles/bb4e0868446f41

# 終わりに
大量のcssを書く必要がなくなるのだから、しっかりとルールくらいは読むべきですよね笑

# About Me
- X(Twitter)

https://twitter.com/shunii_hack

# 参考

https://zenn.dev/kenfdev/articles/bb4e0868446f41
踏み台サーバーを経由してプライベートなサーバーにアクセスする

※自分用の備忘録です。

# IPアドレス制限されているサーバーにアクセスしたい

開発案件で使っているサーバーがIPアドレス制限しているので、固定IP経由でないとアクセスできない、という状態です。
困ったことに5Gインターネットを使っているので、固定IPというものが取れない。
そこで自分のサーバー経由でアクセスすることにしました。

# not HTTP(s) Proxy Server

なんか昔、こんな記事を書いてました（書いたことすら忘れてた）

https://qiita.com/wf9a5m75/items/a78262532ac4823104f0

https://qiita.com/wf9a5m75/items/8cab26fc0ad88204d37a

このときは Squid3 使ってたんですねー。

調べたら、今どきは socks5 を使うのが良さそう。

https://nordvpn.com/ja/blog/socks5-proxy-vpn/

# 超簡単! Socks5

sshコマンドに `-D` を付ければ良い。

```
ssh -D 8080 me@myserver.com
```

このままだとサーバーにログインしてしまうので、`-f -N` を付けておく。

```
ssh -f -N -D 8080 me@myserver.com
```

使い方はこんな感じ。

```
# 何も付けない場合、モバイルルーターのIPアドレス
curl http://ifconfig.me
172.58.xxx.xxx

# --proxy で指定すれば、サーバーのIPアドレス
curl --proxy socks5://localhost:8080 ifconfig.me
35.194.xxx.xxx
```

おー、IPアドレスが変わった！

# ブラウザで Proxyを経由してアクセスする

Proxy用のChrome拡張「Proxy SwitchyOmega」
https://chromewebstore.google.com/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif

こんな感じにしてっと、、、
![スクリーンショット 2024-03-06 午前1.14.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39529/19ffc111-a2b3-4a06-b8c5-281cdcfe3a53.png)

auto switch として、このURLのときだけ proxy するようにしてあげればアクセスできる！
![スクリーンショット 2024-03-06 午前1.15.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39529/66a770a1-48cc-7802-ceb3-4ac9b6532822.png)

Before / After のスクショを載せれないのが残念！

# (おまけ) node.js の undici での使い方

おっしゃー。これでコードから呼び出せる！とか思ったら、そこからが長かった。

undici という（個人的には使いにくい）HTTPライブラリを使っているのですが、そのままだとProxyを経由してくれない。

試行錯誤の結果、[fetch-socks](https://www.npmjs.com/package/fetch-socks) を使って解決！

```typescript
import { socksDispatcher } from 'fetch-socks';
import { Dispatcher, request } from 'undici';

export type getRequestParams = {
  url: string;
  userAgent: string;
  headers?: { [key: string]: string | undefined };
};

export const getRequest = async ({
  url,
  userAgent,
  headers,
}: getRequestParams): Promise<Dispatcher.ResponseData> => {
  const dispatcher = socksDispatcher({
    type: 5,
    host: "localhost",
    port: 8080,
  
    //userId: "username",
    //password: "password",
  });
  
  return await request(url, {
    headers: {
      'user-agent': userAgent,
      ...headers,
    },
    dispatcher,
  });
};

```
Pythonで「len関数の使い方(オブジェクトの長さや要素数を取得する)」の動作を確認してみた

# 概要

Pythonで「len関数の使い方(オブジェクトの長さや要素数を取得する)」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/python/function/index4.html

# 実装

以下のファイルを作成しました。
```sample.py
print(len("Next week is a trip"))
print(len(["Yes", "No"]))
print(len({"Yamada":94, "Suzuki":82, "Nishi":64}))
```

以下のコマンドを実行しました。
```
$ python3 sample.py 
19
2
3
```

# まとめ

何かの役に立てばと。
Laravel 10のfonts.bunny.net参照に関する、脆弱性対策

## Laravel 10ではBunny Fontsを使っている

[laravel/resources/views/welcome\.blade\.php at 10\.x · laravel/laravel · GitHub](https://github.com/laravel/laravel/blob/10.x/resources/views/welcome.blade.php)を見ていると、こういう箇所がある：

![reference_of_bunny_font.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45595/c785cb7b-c4f7-4660-c1ea-0c557c72d49c.png)

ホスト fonts.bunny.net に置いてあるスタイルシートへの参照が記述されていて、このままにしておくと、脆弱性診断ツールに引っかかるので、その対策のメモ。

## Content Security Policy対策

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy

外部のリソース（スタイルシート）を参照するので、[style\-src](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy/style-src)に対して、「https://fonts.bunny.net」を加える必要がある。

もしも apache2.conf（httpd.conf） に記述するなら、例えばこんな風に「https://fonts.bunny.net/」を補う。

```apache2.conf
Header always add Content-Security-Policy "default-src 'self'; img-src (略); font-src 'self' https://fonts.bunny.net/; style-src 'self' 'unsafe-inline' https://fonts.bunny.net/; script-src (略)"
```

## Subresource Integrity対策

https://developer.mozilla.org/ja/docs/Web/Security/Subresource_Integrity

link要素にintegrity属性を加えて、改ざん防止のハッシュ値を持たせることになる。
ハッシュ値を求めるのには、[SRI Hash Generator](https://www.srihash.org/)を利用するのが便利。

![sha-384.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45595/a61f6e0c-2f3a-cdb0-2b1b-189464307f9f.png)

該当箇所を、`<link rel="stylesheet" href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" integrity="sha384-Q84ohXn86sVlcLmFrE8zrSSUb0KsvjjCgw5VGvBLLGMiTJB3mDUZZVWbl4TiP0hA" crossorigin="anonymous">`に修正すれば良いとわかる。
Lightsailで、基本読み取り専用だけど、ブラウザSSHだけは許可したい、IAMポリシー作ってみた

# はじめに

Lightsailで、Wordpressのコンテンツ制作を外部の会社さんに委託するにあたって、AWS関連操作は読み取り専用だけど、ブラウザSSHは許可したい。   
でも、Default Keyはダウンロードさせたくない。（変えるの大変だから、、、）

という事で、IAMポリシーを作ってみたら、ちょっとハマったのでメモ書きです。

# IAMのGUIで認識されてないアクションがいる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281768/30a0d24e-762e-55c1-2a8e-5d71a40593ba.png)

"lightsail:GetSetupHistory"

https://docs.aws.amazon.com/ja_jp/lightsail/2016-11-28/api-reference/API_GetSetupHistory.html

API上は確かに存在するし、許可してあげないと、Lightsailの画面表示にエラーになるので、許可はしたい。。。

# ブラウザSSHの拒否・許可って、なんてアクションだ？が分からない

こっちは解決。

GetInstanceAccessDetails

https://docs.aws.amazon.com/ja_jp/lightsail/2016-11-28/api-reference/API_GetInstanceAccessDetails.html

特定の仮想プライベート サーバーまたはインスタンスに接続するために使用できる一時的な SSH キーを返します 。（翻訳）

という事で、このアクションの許可・拒否を切り替えて、ブラウザSSHの利用可否を検証したところ、制御ができたので、このアクションだけは許可する必要がある、、、と。（フムフム）

# まとめ

+ IAMの警告が気になるなら、全許可した上で明示的に拒否
+ IAMの警告を気にせず、許可したい物だけを明示的に許可

どちらかで対応する必要があるようです。（2024/03/06時点）

# AWSの相談・お困りごとありましたら、、、

AWSの活用方法や、お困りごとの相談、随時、お仕事の受付しております。
AWSのLambda開発関連で、ライトな開発や、ちょっと、こんな事を自動化したい！等も、お気軽に問い合わせください。

https://www.cs-cloud-aid.com/
VS codeで簡単にステップ数を計測する方法

## 概要

- ステップ数を vscode で計測する方法を記載します。

## ステップ数とは

- プログラム内で実行される個々の命令やステートメントの数を表すもの
- ステップ数が多いほどプログラムが複雑であり、理解や保守が難しい
- ステップ数が少ないプログラムは、シンプルで理解しやすく、バグの発生リスクが低い
- プログラムのコード行数とは異なる
- ~~プログラムが実行される際の命令やステートメントの数を数えるもので、1 つのコード行に複数のステップが含まれることがあります。たとえば、条件文やループがある場合、その中の複数のステップが 1 つの行に含まれる~~

> 詳しくは[参考](#参考)の記事をご覧ください

## 計測方法

1. vscode の拡張機能から VS Code Counter をインストールする: https://github.com/uctakeoff/vscode-counter
2. F1(もしくは `ctrl + shift + p`)を押下し、VSCodeCounter:ディレクトリ内のコードを数えるを選択する
3. 計測したいディレクトリを選択する
4. 出力される Markdown ファイルから結果を確認する

   - アウトプット例

     ```markdown
     # Summary

     Date : 2024-03-06 11:06:42

     Directory c:\\Users\\その他\\sample

     Total : 1 files, 9 codes, 2 comments, 3 blanks, all 14 lines

     Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)

     ## Languages

     | language | files | code | comment | blank | total |
     | :------- | ----: | ---: | ------: | ----: | ----: |
     | Python   |     1 |    9 |       2 |     3 |    14 |

     ## Directories

     | path | files | code | comment | blank | total |
     | :--- | ----: | ---: | ------: | ----: | ----: |
     | .    |     1 |    9 |       2 |     3 |    14 |

     Summary / [Details](details.md) / [Diff Summary](diff.md) / [Diff Details](diff-details.md)
     ```

### 参考

- https://e-words.jp/w/%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%E6%95%B0.html
- https://wa3.i-3-i.info/word14228.html
VirtualBox 環境で node.js を実行すると、「Assertion failed: new_time >= loop->time, file c:\ws\deps\uv\src\win\core.c, line 327」のエラーが発生する

# はじめに

掲題の通り、node.js でのビルドや実行時にエラーになることがあるようです。
私が発生したときの環境は以下の通りです。

|  | バージョン |
| ---- | ---- |
| VirtualBox | 7.0.10 |
| ゲストOS | Windows10 |
| node.js | 20.9.0 |
| npm | 10.1.0 |


ネットで検索すると、

・node.jsをバージョンアップすると直った。
・時計を同期したら直った
・WSLでやればOK

などと出てきましたが、今回はこれでは解決しませんでした。
よく見たら、上記の記事はエラー発生の行数も違うようですので（「line 327」ではない）、別件のようです。

# 解決方法
以下の掲示板にあった通り、VirtualBoxの設定で、「Enable Hardware Clock in UTC Time」を有効にすれば回避できるようになりました。

https://github.com/nodejs/help/issues/2470

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/239aa58d-784a-d904-15fe-a607d095f9f9.png)

# 追記
その後、しばらくしてから実行するとまた同じエラーが発生。
「Enable Hardware Clock in UTC Time」は有効のはずなのに。
今度は時刻同期を行ってから実行したり、何度か繰り返して実行することによってエラー回避できていたのですが・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/73dcca86-8857-fc89-dc22-3dc689410b38.png)

何度も発生するので、VirtualBoxで実行するのは諦めて、普通にホストPCで実行することにしました。  
結局、根本原因はよくわからずです・・・。
ElasticSearchでompressor detection can only be called on some xcontent bytes or compressed xcontent bytesエラーが出る

# はじめに

ES6からES8に変わったことで躓いたことがあったので、まとめます

# 問題

以下のようにKotlinでインデックスに対してドキュメントを追加するようなコードを書きました

```kt
        fun putToIndex(index: String, id: String, json: String) {
            client.index { it.index(index).id(id).document(json) }
        }
```

そしてこのjsonには文字列のjsonが渡されています。
すると以下のエラーが発生しました

```
Compressor detection can only be called on some xcontent bytes or compressed xcontent bytes
```

おそらく文字列のjsonをjsonだと判断できていないようです。(es6ではjsonであることを第二引数で渡していたけどなくなったみたい)

# 解決方法

ドキュメントをよくみると渡すのはオブジェクトになっていました

```kotlin
GetResponse<Product> response = esClient.get(g -> g
    .index("products") 
    .id("bk-1"),
    Product.class      
);
```

ということでオブジェクトを渡せるようにして、その手前でjson文字列をオブジェクトにするように工夫しました


```kotlin
        fun <T> putToIndex(index: String, id: String, obj: T) {
            client.index { it.index(index).id(id).document(obj) }
        }
```

```kotlin
    fun insertDocument(index: String, id: String, json: String) {
        val company = Gson().fromJson(json, SampleJson::class.java)
        ElasticsearchV8Client.putToIndex(index, id, company)
    }
```

# おわりに

徐々にESに慣れてきて楽しくなってきました


# 参考

https://www.elastic.co/guide/en/elasticsearch/client/java-api-client/current/getting-started-java.html#_indexing_documents
エンジニア５年目が「リーダブルコード」を読み直す

# 本記事の概要
プログラミングを始めるときに、おそらくすべての人が読むであろう良書「リーダブルコード」をあらためて読んでみて、今の自分のコーディングを振返ってみようと思う。

## １. 良いコードの定義
 > かならずしも「良いコード」＝「簡潔なコード」ではない。

「他の人が見たときにわかりやすいコード」が良いコードと紹介されている。
　
 > 「いやいや、他の人が読める必要はないよ。どうぜ自分しか関わらないプロジェクトだし。」
  と思う方もいるかもしれないが。

　しかし、かくいう私も４年以上プログラミングをしていて「あれ？ここってなんでこんな風に書いたんだっけ？これって何の処理だっけ？」ということがしばしばある。
 
　保守や改修対応で、コードを読むところからはじめなければならず、無駄に工数がかかってしまう。
 
　「他の人」というのは「過去の自分」も包括しているので、自分が後々苦労しないようにするためにコーディングを見直そうと素直に感じた。

## ２. 名前に情報を込める
　エンジニア業界はそこそこ英語能力が求められるが、あまり深く考えずに変数やクラス名、メソッド名を命名すると、後になって後悔するのは自分だ。

 例えば、get()やsize()は目的語がなく、抽象的なので命名する際に意味を込めた方がよいと本書では紹介している（fetchPerlistPage(), imageVerticalSize()など）。

　個人的には、複数のイテレータ変数が登場する場合はそれぞれのイテレータが指しているリストも含めて命名するとミスが減るし、見た目にもわかりやすくなる（jigyosyoMapList⇒jm_index, personList⇒pl_index, searchList⇒sl_indexなど）という記述が感銘を受けた。

　地獄の２重３重ループ処理が発生することも少なくないので、「今のループはどこの何をしているんだっけ？」と画面をスクロールして頭がショートする経験をあなたもしたことがあるのではないだろうか。

　イテレータをみるだけで何をしているのかが判断できれば、それこそ開発うや保守対応の工数が大幅に削減できると思う。

## ３. 見た目にも美しさを感じるか
　初対面の人と会うときに見た目が９割というように、コードを見たときの第一印象が良いか悪いかは全体のコードの良さを決めるといっても過言では無いように感じる。

　例えば、同じ処理を３回繰り返す時に、
 
 - 各処理の改行は同じポイントで区切られているか
 - 変数や引数の記述開始場所がそろっているか
 - 処理のまとまりが一目でわかるようになっているか　など

　見た目でどんな処理のブロックがあり、何をしているのかがわかるような記述は読み手の負担を減らしてくれる。
　
　モダンなフレームワークではSQLの生のクエリをわざわざ生成する場面も減ってきたとは思うが、SQL分を書くにもインデントが整っているか否かで読み手の負担も、バグの発見までの対応時間も雲泥の差である。

　やはり”美しさ”はプログラミングでも重要視される要素である。

## ４、コメントするべきこと
　私自身もよくやってしまうのだが、処理内容を説明してしまうコメントを記載することがある。コメントで補足しなければ理解するのに時間がかかるようなら、コメントで補足するのではなく、そもそもプログラムの見直しを行うべきというのは、いまさらながらハッとする気づきだった。
 
　各プロジェクトでコーディング規約があると思うが、個人的にはコメントは目的や、課題事項、なぜそうしたのかなどの背景を説明することの方が重要かなと。
 
　例えば、ソースレビューをしてもらう際に、理由があって手の込んだ処理を行っている箇所についてレビュワーにコメントされると、わざわざ説明する工数が発生するし、親切なレビュワーであれば修正後のプログラム記述と動作検証の工数まで発生するかもしれない。
 
　予め、コーディングの背景、根拠、目的が記載されていれば読み手と開発者双方の負担を減らせられるので、コメントを効果的に使うことは重要だろう。

## ５、無関係の問題を抽出する
　基本的に１つのファンクションに１つの処理を実装するべきだが、やむを得ず同時に複数の処理を行う場合、何十行にも及ぶ複雑な処理をいくつも書かれると、読む気が失せるし、保守も大変である。
 
　処理のまとまりを抽出して、別ファンクションとして定義し、ファンクション名から処理内容がわかるように命名すれば、ファンクションの中身を追わなくても、処理の目的が明確になり、圧倒的に読み手の負担が軽減される。

 ## まとめ
　自身のエンジニアとしてのキャリアを振返ってみて、いかにあやふやな知識しか積み上げてきてないことを実感し、戒めの意味も込めて、これから投稿を継続していこうと思っての、１本目の記事である。

　誰かに読んでもらうことを目的としているわけではないので、読みにくい部分もあるし、何の役にも立たない記事だと思うが、似たような背景を持つエンジニアの方々と一緒に成長していけたらうれしく思います。
PowerApps フォーム編集か新規の判断方法

編集
If(SharepointForm.Mode = 0,[ThisItem.'option'.Value],["Low"])

新規
If(SharepointForm.Mode = 1,[ThisItem.'option'.Value],["Low"])

View
If(SharepointForm.Mode = 2,[ThisItem.'option'.Value],["Low"])

編集　OR　View
If(SharepointForm.Mode <> 1,[ThisItem.'option'.Value],["Low"])
ESP32からLINEに通知を送る方法

# 概要
ESP32からLINEのAPIを叩き、通知を送信する方法に関して整理してみました。また、本題からは逸れますが、今回はテストも兼ねて自作モジュールを活用してみました。Wi-FiやBLEを内蔵しつつも低消費電力なESP32を搭載し、リチウムポリマー電池によって駆動できるため、今回のようなIoTデバイスを試作する用途に最適です。
![picture.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951963/615fe597-8f8e-0dfc-4e90-e4d5747c6512.jpeg)
# 開発環境
* Windows 11 Home 23H2
* Arduino IDE 2.3.0
* Android 14
* LINE 8.6.0.3277
# トークンを取得する
LINEのAPIを利用する上で必要になるため、トークンを発行します。まずは[**こちら**](https://notify-bot.line.me/ja/)にログインし、マイページを開きます。LINEのアカウントが必要です。その下部に表示されるボタンをクリックし、ダイアログが開いたらトークン名を入力し、通知の送信先も選択します。トークン名は任意です。最後にトークンが表示されるため、確実にメモしておきます。ダイアログを閉じると再確認できないので特に注意してください。
# LINE Notify
公式の資料は以下の通りです。

https://notify-bot.line.me/doc/ja/

ここではcURLを使用し、簡単にLINEのAPIを試してみます。まずは普通にメッセージを送る場合です。最大1000字まで入力できます。
```
curl -X POST -H "Authorization: Bearer {token}" -F "message={message}" "https://notify-api.line.me/api/notify"
```
次にスタンプも併せて送る場合です。スタンプのID、そのスタンプが含まれるパッケージのIDを指定します。なんと動くスタンプにも対応しています。ただし、メッセージは必須なのでスタンプだけを送るようなことはできません。
```
curl -X POST -H "Authorization: Bearer {token}" -F "message={message}&stickerPackageId={package}&stickerId={sticker}" "https://notify-api.line.me/api/notify"
```
# プログラム
ボタンを押すとLINEに通知が送信されます。パラメータなどの詳細については上記の資料を参照してください。
```cpp:line_notify.ino
#include <WiFi.h>
#include <HTTPClient.h>

#define BUTTON_PIN 1

const char *ssid = "{ssid}";
const char *password = "{password}";

const String token = "{token}";


void setup() {
  WiFi.begin(ssid, password);

  Serial.begin(115200);
  Serial.print("Connecting...");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println();
  Serial.println("Connected to Wi-Fi");

  pinMode(BUTTON_PIN, INPUT_PULLUP);
}

void loop() {
  static int lastState = LOW;

  int state = digitalRead(BUTTON_PIN);
  if (state == LOW && lastState == HIGH) {
    sendMessage("LINE Notify");
  }
  lastState = state;
  delay(100);
}

void sendMessage(String message) { 
  HTTPClient client;

  String url = "https://notify-api.line.me/api/notify";
  client.begin(url);
  client.addHeader("Content-Type", "application/x-www-form-urlencoded");
  client.addHeader("Authorization", "Bearer " + token);

  String query = "message=" + message;
  client.POST(query);

  String body = client.getString();
  Serial.println("Sent the message");
  Serial.println(body);
  client.end();
}
```
# おまけ
改行コードに関して補足です。試した中では`\n`や`\r\n`、あるいはURLエンコードされた`%0A`や`%0D%0A`を挿入することで正しく改行されました。
# 結果
実際のトーク履歴です。トークン名は`Arduino`と指定しました。
![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951963/28674c79-a989-cbea-dd1b-a7fe87b36c01.png)
# まとめ
ESP32を使用し、APIを通じて普段から使い慣れたLINEと連携することができました。
PythonコードでPDF ファイルを結合する

## はじめに
PDFの結合とは、複数のPDFファイルを1つのPDFファイルにまとめることです。これにより、ユーザーは関連するPDFファイルの内容を1つのPDFファイルに結合して、ファイルの分類化、管理、および共有を簡素にできます。例えば、文書を共有する前に、似たような文書を1つのファイルにまとめて、共有プロセスをシンプルにすることができます。本記事では、Pythonを使ってPDFファイルを結合する方法を説明します。

## ツール
* Python 3.12.0
* [Spire.PDF for Python](https://www.e-iceblue.com/Introduce/pdf-for-python.html)

このライブラリは購入する必要がありますが、30 日間の無料試用版も提供されています。
もっと多いサンプルコードについて、[Spire.PDF for Python](https://www.e-iceblue.com/Download/Spire-PDF-Python.html)をダウンロードして参照してください。

## インストール
まず、Spire.PDF for Pythonと plum-dispatch v1.7.4を VS Code にインポートしください。
* Pythonをダウンロードしてインストールします。
* VS Codeで「Extensions」をクリックし、「Python」を検索してインストールします。
* 「Explorer」-「NO FOLRDER OPENED」-「Open Folder」
* フォルダーを選択し、そこに「.py」ファイルを追加します。
* 「Terminal」-「New Terminal」
* 次のコマンドを入力します。
**pip install Spire.PDF**

## 複数のPDFファイルを結合する
### ステップ
1. 必要なライブラリ モジュールをインポートします。
2. PDFファイルのパスを含むリストを作成します。
3. Document.MergeFiles(inputFiles: List[str])メソッドを使用して、これらのPDFを1つのファイルに結合します。
4. PdfDocumentBase.Save(filename: str, FileFormat.PDF)メソッドを呼び出して、結合されたファイルを PDF 形式で指定された出力パスに保存します。
### コード
```python
from spire.pdf.common import *
from spire.pdf import *

# PDFファイルのパスのリストを作成する
inputFile1 = "C:/Users/Administrator/Desktop/Sample-1.pdf"
inputFile2 = "C:/Users/Administrator/Desktop/Sample-2.pdf"
inputFile3 = "C:/Users/Administrator/Desktop/Sample-3.pdf"
files = [inputFile1, inputFile2, inputFile3]

# PDFファイルを結合する
pdf = PdfDocument.MergeFiles(files)

# 結果ファイルを保存する
pdf.Save("C:/Users/Administrator/Desktop/MergePDFFiles.pdf", FileFormat.PDF)
pdf.Close()
```
## PDFファイルの選択したページを結合する
### ステップ
1. 必要なライブラリ モジュールをインポートします。
2. PDFファイルのパスを含むリストを作成します。
3. リスト内の各ファイルをループし、PdfDocument オブジェクトとしてロードします。 次に、それらを新しいリストに追加します。
4. ターゲットファイルとして新しいPdfDocumentオブジェクトを作成します。
5. PdfDocument.InsertPage(PdfDocument, pageIndex: int)メソッドまたは PdfDocument.InsertPageRange(PdfDocument, startIndex: int, endIndex: int)メソッドを使用して、ロードされたファイルから選択したページを新しい PdfDocument オブジェクトに挿入します。
6. 最後に、PdfDocument.SaveToFile()メソッドを呼び出して、新しい PdfDocument オブジェクトを指定された出力パスに保存します。
## コード
```python
from spire.pdf import *
from spire.pdf.common import *

# PDF ファイルのパスのリストを作成する
file1 = "C:/Users/Administrator/Desktop/Sample-1.pdf"
file2 = "C:/Users/Administrator/Desktop/Sample-2.pdf"
file3 = "C:/Users/Administrator/Desktop/Sample-3.pdf"
files = [file1, file2, file3]

# 各PDFファイルを PdfDocument オブジェクトとしてロードし、リストに追加する
pdfs = []
for file in files:
    pdfs.append(PdfDocument(file))

# PdfDocumentクラスのオブジェクトを作成する
newPdf = PdfDocument()

# ロードされたPDFから選択したページを新しいドキュメントに挿入する
newPdf.InsertPage(pdfs[0], 0)
newPdf.InsertPage(pdfs[1], 1)
newPdf.InsertPageRange(pdfs[2], 0, 1)

# 新しいPDFドキュメントを保存する
newPdf.SaveToFile("C:/Users/Administrator/Desktop/MergeSelectedPages.pdf")
```
[Python] scipy.stats.describe：記述統計量の算出

# `scipy.stats.describe`：記述統計量の算出

↓公式ドキュメント

https://docs.scipy.org/doc/scipy/reference/generated/scipy.stats.describe.html


# 実装
## インポート

```python
import pandas as pd
from sklearn.datasets import fetch_california_housing
from scipy import stats
```

## データセットの読み込み
```python
housing = fetch_california_housing()

data_arr = housing.data
features = housing.feature_names
```

## 記述統計量の算出

引数とデフォルト値は以下の通り。
`scipy.stats.describe(a, axis=0, ddof=1, bias=True, nan_policy='propagate')`
* `a`：入力データ（配列）を渡す。
* `axis`：`=0(デフォルト値)`で列方向、`=1`で行方向、`=None`で配列全体の統計量を算出する。
* `ddof`：`=1`のとき不偏分散を出力する。`=0`だと不偏でない分散になる。

### 使用例
```python
stats.describe(a=data_arr)
```

**出力結果**
`サンプルサイズ`、`最小値`、`最大値`、`平均値`、`分散`、`歪度`、`尖度`が出力される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655949/56200495-030f-ced9-dbab-f307048ae45a.png)

### `pandas.DataFrame`に変換
```python
descriptive = stats.describe(data_arr)

idx = ['count',
       'min',
       'max',
       'mean',
       'variance',
       'skewness',
       'kurtosis'
       ]
df_descriptive = pd.DataFrame(index=idx, columns=features)

df_descriptive.loc[idx[0]] = descriptive[0]
df_descriptive.loc[idx[1]] = descriptive[1][0]
df_descriptive.loc[idx[2]] = descriptive[1][1]
df_descriptive.loc[idx[3]] = descriptive[2]
df_descriptive.loc[idx[4]] = descriptive[3]
df_descriptive.loc[idx[5]] = descriptive[4]
df_descriptive.loc[idx[6]] = descriptive[5]

df_descriptive
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655949/e1b10b8d-1ce0-8ebb-f636-ebbd08f3982f.png)
emoji（絵文字）の登録

# はじめに👆
海外のシステムで使える「emoji」について、大したことはないけど、調べたことをちょっとだけ。

「emoji」は海外でも「emoji」として認識されている、日本発祥の単語。ちゃんと単語なので、複数形で「emojis」となってたりもします。

日本の絵文字というと「ヾ(❛ᴗ˂ )⌒♥」を想像しますが、これは顔文字という別物です。海外でいうemojiはこういうの「😉」です。ちなみにQiitaの機能で、"絵文字"「:wink:」を入れる機能がありますが、これはQiitaというシステム内でだけ使えるアイコン。（Qiitaの絵文字は、日本人受けするために、色合いとかが柔らか）
ここでは海外でも通用するemojiの話をしたいので、区別する為に、以降ではemojiで統一します。

# 書き方✏
emojiの文字入力は、Windowsに組み込まれていてWindowsキーとピリオドを押すと、選択用の画面が出てきます。Macの場合は、Control + Command + スペースだそうです。💡
そして選ぶと、文字の間に入る。💯

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/4a01772a-e843-88a7-b660-f472d9331feb.png)

全部が"絵"ではなく、文字化けしそうな字になるものもありますね。↔⁉‼⚠
これはブラウザが対応していないのかも。

当然、Windows標準のメモ帳でも書けます。白黒にはなりますが。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/512a85fc-96f8-05d4-fd61-23b85270a556.png)

# HTMLでは💻
HTMLに埋め込む場合は、ウィンクの場合は`&#128521;`と書くか、Windows+.でアイコンを選んでも書けるようです。
`&～`は`&gt;`の仲間ですが、覚えられるわけがないので、使いづらいですね。🤪

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

一応、ググれば出てきます。🌍

[HTMLの絵文字 文字コード表 | GRAYCODE HTML&CSS](https://gray-code.com/html_css/list-of-emoji/)

# 文字コード🎸
emojiは、Unicode（UTF-8、UTF-16）で定義されているから、Unicodeを表示できるシステム≒ほぼすべてのシステムで、表示できるそうです。🏫

上で、アイコン化されない文字「↔(両矢印)」「✏(鉛筆)」「✈(飛行機)」などは、ブラウザが対応してないのかなって推測したのは、文字コードとしてはどの文字もUnicodeで同等に定義されているんだろうけど、そのあとアイコンになるものとならないものがあるということは・・・と考えたためでした。

それにしても、アイコン化されていないemojiは見づらいですね・・・。

# まとめ☕
海外製🚀のシステムも含め、いろいろな文字を入力するシステムで使えるのは本当に便利です。WindowsやMacでも共通の文字として表示できることを外国人は知ってるけど、おおもとの日本人が逆に知らないんじゃないかと思います。日本人（おじさん世代）は「文字化け👻」というのをよく知っていて恐れているから、システムに日本語を入れてはいけないと考えていて、ましてemojiなんて！😫

このQiitaを読むような人たち、HTMLや文字コードが気になっちゃうような人は、Unicodeで対応してるなら大丈夫か！ってなってると思うので、日本人（おじさん世代）の恐れを解いていってあげてください。😀

確認もかねてemoji多めでお伝えしました。🚚💨
Unityの旧Inputの文字列パラメータ一覧

# 旧Inputでの文字列パラメータ
Input.GetKeyDown(**string name**)等に渡せる文字列の一覧[^1]がヘルプを見ても載っていなかったのでメモ
[^1]: KeyCodeのリストはあり

https://discussions.unity.com/t/c-list-of-string-name-for-input-getkey-string-name/112629/3
```C#
private var keys : String[] = [
    "backspace",
    "delete",
    "tab",
    "clear",
    "return",
    "pause",
    "escape",
    "space",
    "up",
    "down",
    "right",
    "left",
    "insert",
    "home",
    "end",
    "page up",
    "page down",
    "f1",
    "f2",
    "f3",
    "f4",
    "f5",
    "f6",
    "f7",
    "f8",
    "f9",
    "f10",
    "f11",
    "f12",
    "f13",
    "f14",
    "f15",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "!",
    "\"",
    "#",
    "$",
    "&",
    "'",
    "(",
    ")",
    "*",
    "+",
    ",",
    "-",
    ".",
    "/",
    ":",
    ";",
    "<",
    "=",
    ">",
    "?",
    "@",
    "[",
    "\\",
    "]",
    "^",
    "_",
    "`",
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "l",
    "m",
    "n",
    "o",
    "p",
    "q",
    "r",
    "s",
    "t",
    "u",
    "v",
    "w",
    "x",
    "y",
    "z",
    "numlock",
    "caps lock",
    "scroll lock",
    "right shift",
    "left shift",
    "right ctrl",
    "left ctrl",
    "right alt",
    "left alt"
];
```
AWS認定試験の採点基準について

常々気になっていたAWS認定試験の採点基準について。

大体のサイトは「採点基準は非公開」としか書いていない場合が多いけど、
公式にちゃんと書いていたので備忘録として記載しておく。

https://aws.amazon.com/jp/certification/policies/after-testing/

「修正アンゴフ法」については以下の説明が分かりやすかった。

http://www.meal-jsme.jp/glossary/index.php/Angoff%E6%B3%95

難しい日本語で書いているが、要はこういう事らしい。

・簡単or難しい問題ばかり偏って出てくるような出題はしてないよ
・全体を見て問題が難しいor易しいで差分が出ても平等になるよう採点しているよ
・換算スコアの合格基準が基礎 700 点、アソシエイト 720 点、
　プロとスペシャリティは 750 点なのは変わらないよ

採点対象外については記載がないが、もしかしたら採点対象外でも
コンピテンシー内の他の問題の点数に連動しているのかもしれない。

そして悲しい事に、今回の内容は「今日は難しい問題だったから不合格だった」という言い訳が出来ないという事だ。

採点基準が分かってもやる事は変わらないので、今日も勉強頑張ろう。
TechTure Reviews: Your Guide to Tomorrow's Tech Today!

TechTure Reviews is a comprehensive online platform dedicated to providing insightful and unbiased reviews of the latest technology products and gadgets. TechTure With a focus on informing and guiding consumers, the website offers in-depth analyses, comparisons, and recommendations across various categories such as smartphones, laptops, cameras, smart home devices, and more.
More Info-
https://techturereviews.com/
面接官「なぜマウスカーソルは傾いているか」


# 面接官「なぜマウスカーソルは傾いているか」

真夏の暑い日、私は嫌な汗をかいた。エンジニアはそんなことを考えながら仕事しているのか。
ゆっくりとした時間が流れる中、私は面接官の質問に答えていた。

- 解像度の問題

昔は解像度は低かった。そのため、マウスは縦より斜めの方が長く描画できる。また、ピクセルレイアウトのため、斜めの方がよりなめらかに三角な部分を表現できる。  
そのため、マウスは傾いていた。その名残が今でも残っている。

面接官「解像度の高い回答ですね。」

室温が下がった。私はまた嫌な汗をかいた。

- 座標計算の問題

マウスのクリックの座標を計算する際、左上を原点として計算する。そのため、マウスは傾いている。

- 多くの人は、み、右利きだから

面接官「右利きだからですか？」

## 次回

面接官「なぜマウスカーソルの軸はズレているか」

## 備考

https://ux.stackexchange.com/questions/52336/why-is-the-mouse-cursor-slightly-tilted-and-not-straight#52338

ちなみに、マウスは最初は垂直だったそうです。