OmniAICreator/Qiita-1.07M huggingface dataset:
OWASP ZAPでBasic認証設定を通過する

# Basic認証のログイン情報をOWASP ZAPに設定する

## 通常通りにスパイダーでスキャンを実施してみる
401 Unauthorizedが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3321301/db143f30-e63e-5833-9d57-b156d31a55de.png)

## Unauthorizedを既定コンテキストに含め、編集する
Unauthorizedを右クリックし、既定のコンテキストに追加します。
画面左上のファイルから、セッションのプロパティをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3321301/ec02c6d4-33ef-0f50-aa0c-b538a425699d.png)
認証をHTTP/NTLM認証に変更し、ホスト名、認証レルム、ポート番号を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3321301/76014e0c-34d1-6ac9-629e-7d9d00dad32a.png)
Basic認証のログイン情報を入力し、追加します。

## 実際にスパイダーを再実施してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3321301/5aa2d311-020a-e028-a52c-48c129a2b24a.png)
既定コンテキストを右クリックし、ユーザーを先程追加したユーザに変更してスキャンを開始します。


## 結果
無事にスキャンが完了しました。

## 終わりに
こちらも私の備忘録でした。
何回か実施したことはあるものの、久しぶりにしようとすると忘れます。
メディアクエリを使ってJavaScriptの処理を分岐させる

# メディアクエリを使った処理
```js
(function() {

  // メディアクエリの定義
  const mediaQuery = window.matchMedia('(max-width: 768px)');

  function handleScreenChange(e) {
    // デバイス別のclassを付与したい要素（例：.header）
    const header = document.querySelector('.header');

    if (e.matches) {
      // 768px以下の場合（SP）
      header.classList.add('is_sp');
      header.classList.remove('is_pc');

    } else {
      // 768pxより大きい場合（PC）
      header.classList.add('is_pc');
      header.classList.remove('is_sp');

    }
  }

  // メディアクエリの状態が変更されたときにhandleScreenChange関数が呼ばれるようにする
  mediaQuery.addEventListener('change', handleScreenChange);

  // 初期ロード時にも状態をチェック
  handleScreenChange(mediaQuery);

})();
```
VisualforceでLightning Design System(SLDS)のアイコンを使う

VisualforceでSLDSアイコンを使いたいとき、毎回書き方忘れて調べる羽目になるのでメモ書き。

## NGパターン
[Icons - Lightning Design System](https://www.lightningdesignsystem.com/components/icons/)
SLDSのサイトだと↓のように書いてあるけれど、これだと動かない。
```html
<span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
    <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
    </svg>
    <span class="slds-assistive-text">Description of icon when needed</span>
</span>
```

## OKパターン
```html
<apex:page lightningStyleSheets="true">
    <!-- ↓をapex:page配下に入れないとだめだよ -->
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="ja">

    <div>
        <span class="slds-icon_container slds-icon-utility-announcement">
            <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
                <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#announcement')}"></use>
            </svg>
            <span class="slds-assistive-text">Description of icon when needed</span>
        </span>
    </div>
</apex:page>
```

[Visualforce で SLDS アイコンを使用 | Visualforce 開発者ガイド | Salesforce Developers](https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/vf_dev_best_practices_slds_icons.htm)
Visualforce開発者ガイドに書いてある通り、以下2点を差し替える必要がある。

1. \<html\>タグにxmlns属性を追加
1. \<use\>タグのxlink:href属性をURLFORを使って$Asset.SLDSから参照するよう変更

## アイコンタイプについて
アイコンタイプは4種類。

* Utility 
* Doctype
* Standard & Custom
* Action

```html
<span class="slds-icon_container slds-icon-<TYPE>-<ICON>">
    <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
        <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/<TYPE>-sprite/svg/symbols.svg#<ICON>')}"></use>
    </svg>
    <span class="slds-assistive-text">Description of icon when needed</span>
</span>
```

`<TYPE>`にアイコンタイプ、`<ICON>`にアイコン名を入れればOK。
元ニートExcel使えなくてAIに泣きつく。

#  自己紹介
初めての記事投稿なので軽く自己紹介をさせていただきます。
ニートから実家を出て初めての一人暮らし・正社員生活を始めました24歳<font color=pink>すず</font>です。
IT業界未経験ですが、現在勉強中です！
# Excelの関数すら作れない
はい、元ニートなのでExcelはほぼ使ったことがありません。
しかし、弊社では講習会を行っているので安心です！

Excel講習会では以下の課題が出されました。
500人分のテスト結果が入力されたデータから、平均点の算出や合否判定などを実施します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524019/ebafa439-1490-c11a-e05a-e2a2ebc0709b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524019/54c9dafb-9db3-170b-3c05-d21031e0ceef.png)


別に”課題回答欄”シートがあり様々な問題が記載されています。まずは基礎の問題から始めて、その後に応用問題となっています。進めていく中で躓いた応用問題がこちらです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524019/9777f93e-1928-4934-01a8-969dd3a50df4.png)


…こんなの作れるわけがない！！

# chatGPTに作ってもらおうぜ

というわけで[chatGPT](https://chat.openai.com/)に泣きつきました。
>以下の条件で関数を作成してください。					
1)合計点が300点以上		→出身地が"東京"		→3教科(国語・数学・英語)の平均点	
　　		→出身地が"東京"以外		→3教科(国語・数学・英語)の合計点	
2)合計点が300点より低い		→出身地が"東京"		→2教科(社会・理科)の合計点	
		→出身地が"東京"以外		→2教科(社会・理科)の平均点	
>ただし関数のシートと名簿のシートがあるものとし関数のシートに名前書くと名簿シートからvlookupで検索してくるものとする

上記への回答で作成してくれた関数が以下となります。
```
=IF(VLOOKUP(A2, 名簿シートの範囲, 2, FALSE) = "東京",
    IF(SUM(VLOOKUP(A2, 名簿シートの範囲, {3, 4, 5}, FALSE)) >= 300,
        AVERAGE(VLOOKUP(A2, 名簿シートの範囲, {3, 4, 5}, FALSE)),
        SUM(VLOOKUP(A2, 名簿シートの範囲, {3, 4, 5}, FALSE))
    ),
    IF(SUM(VLOOKUP(A2, 名簿シートの範囲, {6, 7}, FALSE)) >= 300,
        SUM(VLOOKUP(A2, 名簿シートの範囲, {6, 7}, FALSE)),
        AVERAGE(VLOOKUP(A2, 名簿シートの範囲, {6, 7}, FALSE))
    )
)
```


いやほしいやつと違う！
# 何回も注文付けた結果

欲しい内容と違ったので、詳細な条件を加えて以下の内容を送りました。

>- 名簿シートはB列から　
名前　性別　出身地　国語　社会　数学　理科　英語　合計点
の順で合計点を参照してほしいです
>- 名簿シートの合計点が記載されている列はJ列です
合計点が300点以上かどうかを判定するときはそれを使ってくれませんか
>- 名簿シートの範囲を絶対参照でB3からJ502　名前入力欄をA40を参照するように書き換えてください
>- ごめんなさい名前入力欄は相対参照でお願いいたします
>- 名簿シートの名前は　データ　です
>- 300点以上の場合は東京なら平均点
東京以外ならば合計点
300点未満の場合は東京なら合計点
東京以外ならば平均点
としてください
>- 300点未満の場合には社会と理科の合計点、平均点を計算するように修正してください。
社会の列は5です。

そしてついに…！！

```
=IF(VLOOKUP(A40, データ!$B$3:$J$502, 9, FALSE) >= 300,
    IF(VLOOKUP(A40, データ!$B$3:$J$502, 3, FALSE) = "東京",
        AVERAGE(VLOOKUP(A40, データ!$B$3:$J$502, {4, 6, 8}, FALSE)),
        SUM(VLOOKUP(A40, データ!$B$3:$J$502, {4, 6, 8}, FALSE))
    ),
    IF(VLOOKUP(A40, データ!$B$3:$J$502, 3, FALSE) = "東京",
        SUM(VLOOKUP(A40, データ!$B$3:$J$502, {5, 7}, FALSE)),
        AVERAGE(VLOOKUP(A40, データ!$B$3:$J$502, {5, 7}, FALSE))
    )
)

```

欲しい回答が得られました。きっと模範回答もこれなのかなと…。
A40には名前が入ります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524019/07bf541c-b7ff-4a40-c5f2-8a4b967d5ea3.png)

課題終わったよありがとうChatGPT

# 最後に
当たり前ですが、**どんな設計としたいかがきちんと伝わっていないと本当に欲しいものは作れない**ことがよく理解できました。
今回はこちらがどう伝えるかということが課題でしたが、世の中のエンジニアの方々は相手の要望を汲み取っているのだなと実感できました。
こういったノリでやってみたことや勉強したことを書いていこうと思いますので、これからもよろしくお願いします！

（ちなみに課題カンニングしたのはすぐばれると思うので今のうち謝っておきますごめんなさい）
CloudWatchでログを抽出する

CloudWatchのログのインサイトでログを抽出した時のメモ。

### 対象のフィールドを指定

```
fields @timestamp, @message, @log
```

### ログをソート

```
fields @timestamp, @message, @log
| sort @timestamp desc
```

### 文字列で絞り込み

```
fields @timestamp, @message, @log
| filter @message like /ERROR/
```

### ログをパースしてフィールドして表示

```
fields @timestamp, @message, @log
| parse @message 'param1=*&' as param1
```
```
fields @timestamp, @message, @log
| parse @message "*\t*\t*\t*\t*" as datetime,statuscode,id,param1,param2
```

### 表示する項目を指定

```
fields @timestamp, @message, @log
| parse @message "*\t*\t*\t*\t*" as datetime,statuscode,id,param1,param2
| display datetime, statuscode
```
【JavaScript】非同期処理関連Promise＆async/await

度々忘れてしまうので、JavaScriptの非同期処理で使用するPromiseとasync/awaitの用途について簡単にまとめました。

## 非同期処理

非同期処理を簡単に表すと、以下のように処理が実行されている間に他の処理を実行させるような事をいいます。

```jsx
let a = 0;

setTimeout(() => {
	a = 1
}, 1000);

// 出力: 0
console.log(a);
```

## Promise

上の非同期処理の例ではconsole.log(a)の出力では0が返ってきていましたが、非同期処理実行後の結果をlogで出力したいとします。
そういった場合に、処理をチェーンのように繋げて、前の処理が終わったタイミングで他の処理を実行させたいような場合に使用するのがPromiseです。

**成功パターン**

```jsx
let a = 0;

new Promise((resolve, reject) => {
	setTimeout(() => {
		a = 1
    resolve();
	}, 1000);
}).then(() => {
  // 出力: 1;
	console.log(a);
});

// 出力: 0;
console.log(a);
```

Promiseの引数にはコールバック関数が入り、その関数の引数にはresolve, rejectが入ります。
.thenで繋げた処理に関しては、Promiseのコールバック内でresolve()が発火したタイミングで処理が移ります。

```jsx
new Promise((resolve, reject) => {
	setTimeout(() => {
		a = 1
    resolve(a);
	}, 1000);
}).then((b) => {
  // 出力: 1;
	console.log(b);
});
```

また、このようにresolveの引数に値を入れてあげると、thenの中のコールバック関数の引数に値が渡ってきます。

**失敗パターン**

```jsx
new Promise((resolve, reject) => {
	setTimeout(() => {
    reject();
	}, 1000);
}).catch(() => {
  console.log('error');
});
```

処理が失敗した場合などにはPromiseのコールバック関数内に定義した第二引数のrejectを実行します。そうする事で今度は.thenではなく.catchが実行されます。
また、thenと同様に引数を渡す事も可能です。

## async/await

簡単にいうとPromiseをさらに簡略化したものになります。

```jsx
let a = 0;

// 出力: 0
init();

function init() {
	new Promise((resolve, reject) => {
		setTimeout(() => {
			a = 1
	    resolve(a);
		}, 1000);
	});

  console.log(a);
}
```

上記のような場合、thenで繋いでいなければ、init関数内のconsole.log(a)は先に出力されてしまいます。

```jsx
let a = 0;

// 出力: 1
init();

async function init() {
	await new Promise((resolve, reject) => {
		setTimeout(() => {
			a = 1
	    resolve(a);
		}, 1000);
	});

  console.log(a);
}
```

ただこのようにawaitをPromise処理の前に書く事で、その処理が実行するまで先の処理は実行されないようにすることができます。また、awaitを関数内で使用する場合には、関数定義の際にasyncを入れてあげる必要があります。

## 参考

[【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript](https://www.udemy.com/share/106Nqw3@1dEK6HX-9DonjfX0ZL8MoT9mCjDEdmY7_7DYu9H-yF7Fqv5imm1HUvFUcEuT9Tdgxg==/)
自作のモデルを転移学習・ファインチューニングしようとして手こずったのでメモ

## functional APIを使って自分で作ったモデルを転移学習やファインチューニングしたい
自分が阿呆なのもあるが、思ったより手こずってしまった。
VGG16などの誰かが用意したモデルを使った例はあったのですが、自作のモデルを使う例があまりなく、include_top=Falseなどは使えないので、これどうすればいいんや？となることが多かったため、メモ的に残しておくことにしました。

## 作ったモデルを保存する
これはググったら簡単に出てきますけど一応。
base_modelという自作のモデルが既に学習済みだとします。
```python
#base_modelというfunctional APIで作った自作のモデルが既に学習済みであるとする
base_model.save('保存したいpath')
```

モデルを作る時に、以下のように各層にnameで名前をつけたほうが良いかもしれません。
```python
# こんな感じでnameを使って全部の層に名前をつけておいた方が後々被らなくて良いかも
x = layers.Dense(100, activation='relu', name='base_model_dense1')(inputs)
x = layers.Dense(100, activation='relu', name='base_model_dense2')(x)
outputs = layers.Dense(10, name='base_model_dense3')(x)
```
base_model.summary()で見れますが、名前をつけなかったらdense1などと番号を増やしながら自動で名前をつけてくれます。
保存する際にはその名前ごと保存されます。
この後、読み込んで、新たな層を追加して学習する際に、同じ名前の層があるとエラーが生じて困りました。

## モデルをロードする
保存したモデルを読み込みます。ググったら簡単に出てきます。
```python
base_model = keras.models.load_model('保存したpath')
```
## ロードしたモデルを使う
ここからがググってもあまり出てこなかったです。

### いくつかの中間層の重みを固定したい時
どの層まで重みを固定し、どの層から再学習を行うかを決めたい時
```python
for layer in base_model.layers[:-2]: #何層まで再学習不可にするか。
    layer.trainable = False #この場合、最後の2層以外は重みを固定し、最後の2層のみ再学習する

base_model.summary() #←コレでTrainable paramsとNon-trainable paramsの数を確認できる。
```
base_model.summary()でTrainable paramsとNon-trainable paramsの数を見れば確認できます。

参考にした[note.nkmk.me｜TensorFlow, Kerasで転移学習・ファインチューニング](https://note.nkmk.me/python-tensorflow-keras-transfer-learning-fine-tuning/)

### 層数など変更せず学習しなおして使う場合
そのまま学習しなおしたいなら、base_model.compileしてbase_model.fitすれば良いと思われる。

### 一部の層を削除し、新たに層を追加する場合
一部を削除した新しいモデルを作って、それに新しい層を追加して学習し直したい場合。

#### 一部の層を削除
```python
input_tensor = base_model.input
output_tensor = base_model.layers[-2].output # [-2]なので、最後の2層を削除したモデルができるらしい
new_model = keras.Model(inputs=input_tensor, outputs=output_tensor) # 元々のモデルの最後の2層を消したモデル

new_model.summary() # ←コレで確認できる
```

#### 新たに層を追加
```python

xx = new_model.output
xx = layers.Dense(50, activation='relu')(xx) # 普段の使い方で好きに層を追加できるはず
outputs2 = layers.Dense(10)(xx) # 10はテキトーな数字、1行上の50もテキトーな数字

new_model = keras.Model(inputs=base_model.input, outputs=outputs2) #層を追加した新しいモデル

new_model.summary() # ←コレで確認できる
```
2行目のxx = のところには普段のfunctional APIの使い方と同じで、持ってきたモデルに好きな層を追加できるはずです。
inputs=base_model.inputの所は、kerasのテンソルの形のものを入れないといけないようです。
転移学習の元々のモデルbase_modelに入力するのと同じサイズのものを入れるので、inputs=base_model.inputで良いということだと思われる。
参考にした[@kotai2003(ソンフン セルゲイ)様｜学習済みモデルから任意の特徴量を抽出する。](https://qiita.com/kotai2003/items/32a5a32dbff3d3806a29)

転移学習する元々のモデルbase_modelの層に名前をつけなかったら、今回新たに追加した層の番号がbase_modelの層の名前とかぶったらエラーになるようです。
私の場合は、base_modelの1層目がdense36だったので、繰り返し実行しているうちにdense36が被ってるでというエラーがでました。
optunaでハイパーパラメータチューニングしようとした際には、繰り返すうちに番号が被ってエラーになって途中で止まったりしました。

base_modelの番号次第ですが、番号を毎回リセットするという対処法でもなんとかなりました。
```python
from tensorflow.keras import backend as K
K.clear_session() #コレで層の番号がまた1から振られるようになる。
```

例えばoptunaでハイパーパラメータチューニングしたいが、番号がかぶるエラーが生じた場合には、optunaのstudy.optimize(objective,n_trials=100)のobjectiveの関数を定義している中にK.clear_session()を入れておくと毎回リセットしてくれて、エラーが生じなくなった。

参考にした[Kerasのモデルやレイヤーの識別子に付く番号をリセットする](https://analytics-note.xyz/machine-learning/keras-clear-session/)
静的ポリモーフィズムと動的ポリモーフィズム

## はじめに

[Clean Architecture](https://www.amazon.co.jp/Clean-Architecture-%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E6%A7%8B%E9%80%A0%E3%81%A8%E8%A8%AD%E8%A8%88-Robert-C-Martin/dp/4048930656) を読んでいたら「動的ポリモーフィズム」という単語が出てきて、読んだだけではあまり理解できなかったので自分のためにわかりやすくまとめてみました。

## 要約

静的ポリモーフィズム：コンパイル時に解決されるポリモーフィズム

動的ポリモーフィズム：実行時に解決されるポリモーフィズム

## ポリモーフィズムの復習

ポリモーフィズムはオブジェクト指向における概念の一つです。
簡単に説明すると、**同じ名前のメソッドの呼び出しに対して異なる機能・動作をさせること**です。
詳細は[こちらの記事](https://qiita.com/Nossa/items/b6e2f4ed0fa079359fc5)が個人的にわかりやすかったです。

## 静的ポリモーフィズム

静的ポリモーフィズムは、**コンパイル時に解決されるポリモーフィズム**です。
Javaにおいては、オーバーロードがこれに当たります。
オーバーロードとは、**引数の数とか型が違う、同じ名前のメソッドを複数個定義すること**です。そのため、オーバーロードをすることで「同じ名前のメソッドの呼び出しに対して異なる機能」を持たせることができ、ポリモーフィズムも実現されていると言えます。
例えば、以下のようなコードは `testMethod` をオーバーロードしています。
```java
class Test {
    public void testMethod(){
        System.out.println("テストメソッド その1");
    }

    public void testMethod(String str){
        System.out.println("テストメソッド その2");
    }

    public void testMethod(int a){
        System.out.println("テストメソッド その3");
    }

    public void testMethod(int a, int b){
        System.out.println("テストメソッド その4");
    }
}
```

Javaにおいては、このTestクラスをコンパイルするときにtestMethodメソッドを呼び出すための情報が作成されます。そのため、オーバーロードは静的ポリモーフィズムとなります。

## 動的ポリモーフィズム

動的ポリモーフィズムは、**実行時に解決されるポリモーフィズム**です。
Javaにおいては、継承がこれに当たります。
例えば、以下のようなコードがあったとします。

```java
class Test {
    public void testMethod() {
        System.out.println("hogehoge");
    }
}

class TestChild extends Test {
    @override
    public void testMethod() {
        System.out.println("fugafuga");
    }
}

class Main {
    public static void main(String[] args) {
        Test test = new TestChild();
        test.testMethod();
    }
}
```

TestChildクラスのtestMethodは、親クラスであるTestクラスのtestMethodをオーバーライドしています。
オーバーライドとは、**親クラスで定義したメソッドを継承した子クラスで書き換える**ことです。
上記コードでは、`Test test = new TestChild();`というコードを実行することで、親クラスの参照に子クラスが代入されます。そのため、testMethodは`Test test = new TestChild();`の実行時に解決されるポリモーフィズムであるため、動的ポリモーフィズムと言えます。
AWSのEC2にBasic認証を設定する

# AWSのEC上に立てたRHEL8上のWebサイト(Wordpress)にBasic認証を設定する

すぐに忘れるので、実行記録兼備忘録です。

## 実際に行った作業内容履歴

### .htaccessファイルの作成

```vim /var/www/html/.htaccess
AuthUserFile /var/www/html/.htpasswd
AuthName “Please enter your ID and password”
AuthType Basic
require valid-user
```

### .htpasswdファイルの作成

```vim /var/www/html/.htpasswd
ID:password
```

### /etc/httpd/conf/httpd.confの編集

```AllowOverride None```
と記載のある部分を
```AllowOverride All```
に編集する。（計4行ほど変更しました）

```
<Directory "/var/www/html/">
  AuthUserFile /var/www/html/.htpasswd
  AuthGroupFile /dev/null
  AuthName "Basic Auth"
  AuthType Basic
  Require valid-user
</Directory>
```
を最終行に追記する。

### apacheの再起動
``systemctl reload httpd``


## 1回目の失敗
サーバエラーが起きてしまいました。
なんとなくですが、httpd.confが問題かなと考えました。

#### エラー処置
切り分けのため、1行ずつAllをNoneに戻してみました。
#### 結果
```<Directory "/var/www/html"></Directory>```内の
```AllowOverride All```を```AllowOverride None```に戻すことでエラーが解消されました。


## 2回目の失敗
Basic認証の画面は出るようになりましたが、ログイン情報を入れてもはじかれてしまいました。

#### エラー処置
いろいろと調べていると、.htpasswdのファイルには平文で入力しないとの記事を発見。
下記のサイトがあるとのことで、ログイン情報入力内容を下記サイトで作成したものに変更。

https://www.htaccesseditor.com/

#### 結果
無事想定通りのログイン情報の入力でログインが成功しました。

## 終わり
以上の作業で、Basic認証の設定が無事完了しました。
ABC313 - B - Who is Saikyo? 自己解法

# 問題

https://atcoder.jp/contests/abc313/tasks/abc313_b

# 考察
最強の競技プログラマーを特定できるならそのプログラマーを教えてくださいという問題です。強さ関係が分かることから、各競技プログラマーを「頂点」、強さ関係を「有向辺」とした「有向グラフ」としてみることができます。最強といえるプログラマーであれば、その頂点から全ての頂点に移動できるはずです。そのため、各頂点を始点に幅優先探索を実行し、全ての頂点に移動できる頂点を調べていきます。
もし全ての頂点を移動できる頂点があればそれが答え、無い場合は最強のプログラマーは特定できないといえます。

# 提出コード(コンテスト後)

https://atcoder.jp/contests/abc313/submissions/44355867

ご不明点などがあれば教えていただけると幸いです。
【Mac】Macのひらがなと英語の入力切替方法

<< [【Mac】MacOSの基本操作を覚える](https://qiita.com/hiroyuki-eguchi-0731/items/99a0d771fda18adac9f0)

# Macのひらがなと英語の入力切替方法

USBのキーボードを利用したいなーと思って余っているキーボードを挿して動かしていたのですが、ふとMacBookと比べてひらがなと英語の入力切替の仕方がわからなくなってしまいました。
MacBookにある「かな」と「英数」のボタンを利用して切り替えていたので、それ以外の方法を知らなかったんです。

ネットで調べてみるとすぐに確認できましたが、備忘録としてまとめておきます。

* [control]+[space]で切り替える

知らなかった・・・。
これで手持ちのUSBキーボードで気軽にタイピングできるようになりました。
やはりショートカットキーは大切ですね。

---

2023-08-07 初稿
【JavaScript】浮動小数点の演算誤差対処法

## はじめに
小数点を含んだ演算では、演算結果に誤差が生じ、意図した結果が得られないが場合ある。
これは、内部的には数値を (10進数ではなく) ２進数で演算しているため生じた誤差。
本記事は小数点を含んだ演算で厳密に結果を得る必要がある、あるいは値を比較する場合の誤差対処法について紹介する。

## 対処法
### 方法1
**1. 値をいったん整数にしてから演算する**
**2. 1.の結果を再び小数に戻す**

```javascript
// 演算結果に誤差が生じる
console.log(0.2 * 3);
// 桁数を上げて演算して、結果を再び小数に戻す
console.log(((0.2 * 10) * 3) / 10);
```

```javascript:実行結果
0.6000000000000001
0.6
```

数値の組み合わせによっては、これでも正しく動作しない場合がある。
下記の例では積算 / 除算 (100) する際に、すでに小数誤差が発生してしまうため。

```javascript
let x = 0.14 * 100;
let y = 0.28 * 100;

console.log(x);
console.log(y);
// 100を積算 / 除算する際に、すでに小数誤差が発生してしまった
console.log((x + y) / 100);
```

```javascript:実行結果
14.000000000000002
28.000000000000004
0.4200000000000001
```

これを解消するためには、下記のようにMath.round関数を使用して小数点以下の値を四捨五入するなどを行う必要がある。

```javascript
let x = 0.14 * 100;
let y = 0.28 * 100;

console.log(Math.round(x + y) / 100);
```

```javascript:実行結果
0.42
```
### 方法2
**ライブラリーを利用する**

本記事はdecimal.jsライブラリーを例として挙げる。
decimal.jsでは、内部的な演算にも10進数を用いていることから2進数演算によって生じてしまう丸め誤差を防ぐため、より確実に小数点の演算を解決したい場合は、ライブラリーを使用することをおすすめする。

```html
<!-- CDN経由でライブラリインポート、 一例としてCDNを使用している -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/decimal.js/10.4.2/decimal.min.js"></script>
```

```javascript
// リテラルの段階で誤差が生じてしまう可能性があるため、コンストラクターに浮動小数点をそのまま渡すべきではない
let d1 = new Decimal('0.14');
let d2 = new Decimal('0.28');

// new Decimal()で生成したdecimal値をaddメソッドで加算する
// 演算結果はdecimal値なので、toNumberメソッドを呼び出して本来のnumber型に戻す (文字列化を行いたい場合は、toStringメソッドも利用できる)
console.log(d1.add(d2).toNumber());
```

```javascript:実行結果
0.42
```

以下が、一般的によく使われる四則演算、比較メソッドの一覧。他にも色々と用意されているので詳細な機能は[decimal.jsの公式サイト](https://mikemcl.github.io/decimal.js/)を参照。

| メソッド | 概要     |
|:------|:--------|
| add   | 加算     |
| sub   | 減算     |
| mul   | 乗算     |
| div   | 除算     |
| eq    | 等しい    |
| gt    | より大きい |
| gte   | 以上     |
| lt    | 未満     |
| lte   | 以下     |
Qiitaで使えるのは拡張マークダウン

DiscordでMarkdownを使いながら遊んでたら
**「それはMarkdownと呼べるのだろうか？」**
と言われた事を書く。

- 前回の記事で使ったMarkdownで文字に色を付けた
<font color="Red">umaskの値を変更してしまうと、
予期せずパーミッションがオープンになりすぎる危険性があるので注意</font>という所。
この時に今のHTMLの仕様にはない、古い**fontタグ**を使った。

# HTMLはHTML Living Standardというバージョンを使う
[HTML Living Standard](https://momdo.github.io/html/)
fontタグを使う人は今はいない。
**span style**を使う。
```sh
<span style="color: red; ">テキスト</span>
```
これでテキスト部分が赤色になるはずだが、Qiitaの記事では色が付かないため、fontタグを使用した。

- Qiitaの拡張マークダウンでは、**HTMLっぽいHTML**が書けるためfontタグとcolor属性を使う

しかし

>そもそも**色を付けたい**とか考えない方が良いのではないか？

>太文字でいいのではないか？

>あくまでMarkdownの記法だけ使って表現していくのが良いのでは？

>一般的なMarkdownにはHTMLは使えないものだが、実際はある程度装飾としてタグ使えると便利だから、「Markdown+タグ」という実装が世の中にはいっぱいある

>MarkdownはHTMLや、他のプログラミング言語と違って具体的な使用がない様なので、
「HTMLタグを利用したMarkdown」を一概にMarkdownじゃないと言い切るのは違和感がある

という声があったため、今後Markdownを使用する時は良く調べて使用したいと思う。

# 参考
[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
[Qiita マークダウン記法 一覧表・チートシート](https://qiita.com/kamorits/items/6f342da395ad57468ae3#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E6%8C%BF%E5%85%A5)
[HTML Standard 日本語訳](https://momdo.github.io/html/)
[Qiitaヘルプ](https://help.qiita.com/ja/articles/qiita-markdown)
アンケートの複数回答可 (MA)列をフラグに分解する(SPSS Modeler データ加工逆引き2-14)

# アンケートの複数回答可 (MA)列をフラグに分解する

![スクリーンショット 2023-08-07 13.14.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/3d22dbfe-7894-c4eb-2f33-0c1c028bfc70.png)


## 1.想定される利用目的

・アンケートデータの分析のためのデータ加工

## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/raw/main/ma.str

## 3.サンプルストリームの説明

#### レコード結合を利用する方法

![スクリーンショット 2023-08-07 13.15.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/7e4b47b2-6669-a74e-5c39-74889c58f20f.png)

a.入力するデータは以下の通りです。
![スクリーンショット 2023-08-07 13.14.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/d472e25f-7c8c-169f-3493-d9db833ab421.png)

b.入力するもう一つのデータは以下の通りです。
![スクリーンショット 2023-08-07 13.15.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/a151ab44-8158-c421-e799-a8a70c1f1756.png)

c.[レコード結合]ノードを編集します。　[レコード結合方法]を[条件]にして[多重回答]に[MA_NUM]の数字が含まれていたら結合します。この時カンマを前後につけて桁数の異なる数字を正確に識別します。
![スクリーンショット 2023-08-07 13.17.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/f728adb6-d366-18dc-e8cc-2c75599c6867.png)

[プレビュー]します。
![スクリーンショット 2023-08-07 13.17.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/ab20c0d5-bcbf-a59e-8bbb-cbc35631ae7d.png)

d.[データ型]ノードを編集します。[MA_NUM]を[順序型]に変更して[値の読み込み]ボタンを押します。
![スクリーンショット 2023-08-07 13.17.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/3537cdcb-9d47-c804-8b84-a886d69cfb61.png)

e.[フラグ設定]ノードを編集します。列に展開するメンバーが表示されていない場合にはdの設定を確認してください。
![スクリーンショット 2023-08-07 13.18.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/469b0cfb-50c4-49fd-216f-6bf8c23799d1.png)

[テーブル]ノードを実行します。
![スクリーンショット 2023-08-07 13.18.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/f22a9be7-c342-8739-50e5-81d3dc6714f2.png)

#### フィールド設定を複数配置する方法

![スクリーンショット 2023-08-07 13.19.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/ec7fb825-f50a-bbbf-4877-ecb41e514d3d.png)

f.[置換]ノードを編集します。前後にカンマを付加します。
![スクリーンショット 2023-08-07 13.20.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/9f3b7081-a481-8aa9-2776-9ed5cef38d95.png)

g.[フィールド作成]ノードを編集します。　[,1,]を持っていたら[MA1]にフラグ立つ設定です。
![スクリーンショット 2023-08-07 13.20.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/ef85c66b-6a1c-4c0c-60dc-2952ee4c9bc9.png)

#### 注意事項

cやgでカンマを強制的に付加しましたが、これは[13]という数字は[1]でも[3]でもあると読み違えてしまうことを防止する処理です。[,13,]と[,1,]が異なると認識できるようになります。


## 4.参考情報

#### 条件でレコードを結合する

https://qiita.com/416nishimaki/items/ad587a4683ef217af677

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
VScode+Devcontainerでpytorch-cuda開発環境を構築する

# 概要

自分用にVS Codeのdevcontainer機能を活用した機械学習環境を作ったのでメモ。

## リポジトリ

https://github.com/nphsgw/pytorch_devcontainer

## 使い方

リポジトリを見てください


## カスタマイズ

* デフォルトの`Dockerfile`は以下のように定義しています。
    * ベースイメージは使いたいpytorchのバージョンを指定してください。
        * GPGエラーが出る場合、参考サイトを見て新しいkeyに更新してください。
    * 新しいユーザーを追加していますが、rootユーザーで作成したファイルがホスト側から編集できなくなることへの対処です。必要なければ削除しても問題ありません。
    * 必要に応じてパッケージやライブラリを追加してください。

```Dockerfile
FROM pytorch/pytorch:1.11.0-cuda11.3-cudnn8-devel
# ベースイメージによってはdocker build時にGPGエラーが発生して途中で止まる。
# その場合、<https://zenn.dev/takakurasato/scraps/d3e0ee6132a5c5>を参考にして解決する。
RUN apt-key adv --fetch-keys https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/3bf863cc.pub
RUN apt-key adv --fetch-keys https://developer.download.nvidia.com/compute/cuda/repos/ubuntu1804/x86_64/7fa2af80.pub

RUN apt-get update && apt-get install -y \
    git wget libgl1-mesa-glx libglib2.0-0 \
    sudo \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# Add user
ARG USERNAME=developer
ARG GROUPNAME=localuser
ARG UID=1000
ARG GID=1000
ARG PASSWORD=pass
RUN groupadd -g $GID $GROUPNAME && \
    useradd -m -s /bin/bash -u $UID -g $GID -G sudo $USERNAME && \
    echo $USERNAME:$PASSWORD | chpasswd && \
    echo "$USERNAME   ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers
USER $USERNAME

RUN pip install jupyter black flake8 mypy numpy pandas matplotlib scikit-learn opencv-python torchinfo torchsummary
```

* デフォルトの`devcontainer.json`は以下のように定義しています。
    * nameはVS Code画面左下に表示される`開発コンテナー:XXXX`に表示される名前です。好きなものに変更してください。
    * `build`にはdevcontainer.jsonのパスからみたDockerfileの相対位置を指定しています。同じパスならファイル名だけ記述すればよいです。
    * `runArgs`はdocker runのオプションを記述する所です。必要があれば追加してください。
    * `customizations`には好きなVS Codeの拡張機能を追加してください。

```jsonc
{
    "name": "pytorch",
    "build": {
        "dockerfile": "Dockerfile"
    },
    "runArgs": [
        "--rm",
        "--shm-size",
        "1g",
        "--gpus",
        "all"
    ],
    "customizations": {
        "vscode": {
            "extensions": [
                // Python
                "ms-python.python",
                "ms-python.flake8",
                "ms-python.black-formatter",
                "njpwerner.autodocstring",
                // Jupyter
                "ms-toolsai.jupyter",
                // Git
                "eamodio.gitlens",
                "donjayamanne.githistory",
                // etc
                "visualstudioexptteam.vscodeintellicode"
            ]
        }
    }
}
```

## 参考

https://code.visualstudio.com/docs/devcontainers/containers

https://qiita.com/nyakiri_0726/items/a33f404b5e1be9352b85

https://zenn.dev/takakurasato/scraps/d3e0ee6132a5c5

https://qiita.com/Spritaro/items/602118d946a4383bd2bb
[初心者向け] とりあえずWSLとUbuntuを使いたい。(VS Codeのインストールを含む)

## はじめに
情報系の学科でCSを学習している学部2年のDot-P (@DotP_engineer) です。

今回は、WSL UbuntuとVscodeのインストールについて紹介したいと思います。
パソコンを変えて環境構築をし直したので備忘録としてここに手順を残しておきます。

ちなみに、環境構築した日は  2023/8/7  であり、使用端末はSurface laptop GOです。

あくまで、初心者向けなので、複雑なことは紹介しませんのでご了承ください:pray:
何か聞きたいことがあれば、気軽にTwitter(X)のDM (@DotP_engineer) までお願いします。

## 自己紹介
工学部の情報系学科２年。　普段は、C++やLinuxを触ることが多いです。

アルゴリズムや深層学習を学習中

競プロ、データ分析、人工知能、Web開発に関心があり、さまよっています (笑)

最近は、VSCodeやシェルスクリプトによってLaTeXのコンパイルを自動化したり、グラフを挿入しやすくしたりなど、魔改造するのにはまってます:stuck_out_tongue_closed_eyes:

## SNS
・Twitter:  @DotP_engineer (←モチベーションの増加になるので、フォローしてね)
・Qiita: https://qiita.com/DotP_engineer
・Github: https://github.com/Dot-P (今はあまり使ってないかも...)
・Atcoder: https://atcoder.jp/users/Dot_P (今年の2月から始めました！)

## WSLとUbuntuのインストールと設定

まず、WSL (Windows Subsystem for Linux) をインストールするためには、WindowsPowerShellを開きます。PowerShellを開くには、スタートメニューをクリックし、「Windows PowerShell」を検索して選択します。

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3169375/e19ff072-446b-556e-5ab0-9f8d7e66d288.png)


次に、以下のコマンドを入力してWSLのインストールを行います：

```: Windows PowerShell
$  wsl --install
```

このコマンドを実行すると、システムが必要なファイルをダウンロードし、インストールを開始します。インストールが完了したら、指示に従ってシステムを再起動してください。

再起動が完了したら、次にUbuntuのインストールを行います。Windowsの「Microsoft Store」を開き、「Ubuntu」を検索します。検索結果に表示されたUbuntuの中から選択し、「インストール」ボタンをクリックしてインストールを開始します。複数の種類のUbuntuが検索結果にでると思いますが、普通にUbuntuと書かれているもので結構です。(wsl --installをした際にUbuntuが勝手にインストールされている可能性もあります。)

![b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3169375/229eed77-7bdf-2402-e959-85fc7cab5178.png)


インストールが完了したら、「開く」ボタンをクリックしてUbuntuを開きます。初回起動時には、新しいユーザーネームとパスワードの設定が求められます。パスワードは、管理者権限が必要なコマンドを実行する際などに必要となるため、忘れないようにメモしておきましょう。


最後に、ダウンロードが完了したら一度Ubuntuを閉じ、システムを再起動して設定を完全に適用させます。

これで、WSLとUbuntuのインストールが完了しました。



## Visual Studio Code (VS Code) のインストールと設定方法

まず、Visual Studio Codeの公式ダウンロードページにアクセスします：
https://code.visualstudio.com/Download

そこからWindowsバージョンのVisual Studio Code (VS Code) をダウンロードします。ダウンロードしたインストーラーを開き、指示に従ってインストールを行ってください。

![c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3169375/a9a3c6b7-cdcc-3379-f893-818fd6a7a0c4.png)


インストールが完了したら、VS Codeを開きます。開いたVS Codeの左側にあるアクティビティバーから拡張機能 (Extensions) を選択します(拡張機能とは左の四角のマークのこと)。拡張機能の検索ボックスに「WSL」と入力し、該当の拡張機能を選んでインストールします。これにより、VS CodeからWSL Ubuntuを直接操作できるようになります。

![d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3169375/013c6ac7-8fa0-bea0-05c9-2df4ecf75d7c.png)


拡張機能のインストールが完了したら、VS Codeは一度閉じても大丈夫です。その後、先ほどインストールしたUbuntuを再度開き、以下のコマンドを実行します：

```: Ubuntu
$  code .
```

これはカレントディレクトリをVS Codeで開くというコマンドです。このコマンドを実行すると、自動的にVS Codeが起動し、カレントディレクトリがVS Code内で開かれます。今後、特定のディレクトリをVS Codeで開きたいときも同様にこのコマンドを使用します。

これでVS Codeのインストールも完了しました！

## まとめ
最後まで読んでくださりありがとうございます:relaxed:

皆さんもインストールできたでしょうか？
今回は、できるだけ簡潔にWSL、Ubuntu、Vscodeのインストール方法を説明しました。

Linuxは奥が深く、ここに書いた内容は序章にも満たないと思います。他の方の記事も参考にして、より快適な環境構築を行ってみてください:fire:
Thread 1: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional valueについて

# はじめに
ボタンの表示をコードにしただけで、特にnilが発生しないところで、以下のようなエラーメッセージが出ました。

Thread 1: Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value
![スクリーンショット 2023-08-07 10.34.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485517/8cd4cce9-f0c0-0e7d-ca0c-a224879a1ce8.png)

# 原因
いろいろと作業している間に、Outlet接続がなくなってしまい、Buttonそのものがnilになってしまった。「nilを入れようとしたから」ではなく「nilのまま使おうとしたから」というためのようでした。
![スクリーンショット 2023-08-07 10.35.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3485517/7710b2dd-f372-5417-1f9d-241136efc968.png)

# 対策
再度Outlet接続をしたらエラーが解消されました。

# 参考資料
https://qiita.com/nsy_python/items/372e6e3737c67bada9f5
commons-suncalc: Javaで太陽と月の位置を計算する

Java開発者の皆さん、太陽や月の位置、日の出や日の入りの時間、さらには月の相まで、これらの天文学的な情報を簡単に取得したいことはありませんか？
commons-suncalcは、そのためのJavaライブラリです。この記事では、このライブラリの主な特徴と使用方法、そして実装例を紹介します。

# **特徴**:
- **精度**: 結果の精度は約1分で、一般的なアプリケーションには十分です。
- **依存関係**: Java 8以上が必要ですが、他のランタイム依存関係はありません。
- **インストール**: Maven Centralで利用可能です。

# **Mavenでのインストール**:
commons-suncalcをMavenプロジェクトに追加するには、以下のスニペットを`pom.xml`に追加してください。
```xml
<dependency>
    <groupId>org.shredzone.commons</groupId>
    <artifactId>commons-suncalc</artifactId>
    <version>最新のバージョン</version>
</dependency>
```
※最新のバージョンはMaven Centralで確認してください。

# **利用方法**:
commons-suncalcは、以下の天文計算を提供しています:
1. 日の出、日の入、正午、真夜中の時間。
2. 月の出と月の入の時間。
3. 新月、満月、半月の日付と時間。
4. 太陽の位置。
5. 月の位置。
6. 月の相と角度。

# **クイックスタート**:
計算は以下のように呼び出されます:
```java
ZonedDateTime dateTime = // 計算の日付、時間、タイムゾーン
double lat, lng = // ジオロケーション
SunTimes times = SunTimes.compute()
 .on(dateTime) // 日付を設定
 .at(lat, lng) // 位置を設定
 .execute(); // 結果を取得
System.out.println("Sunrise: " + times.getRise());
System.out.println("Sunset: " + times.getSet());
```

# **実用的な例**:
1. **タイムゾーン**: パリでの日の出と日の入りの時間を計算する場合:
```java
ZonedDateTime dateTime = ZonedDateTime.now(ZoneId.of("Europe/Paris"));
double lat = 48.8566;
double lng = 2.3522;
SunTimes times = SunTimes.compute().on(dateTime).at(lat, lng).execute();
System.out.println("Sunrise in Paris: " + times.getRise());
System.out.println("Sunset in Paris: " + times.getSet());
```

2. **月の相**: 2023年の満月の日を取得する場合:
```java
Year year = Year.of(2023);
MoonPhase phase = MoonPhase.compute().in(year).fullMoon().execute();
System.out.println("Full moon in 2023: " + phase.getDate());
```

# **まとめ**:
commons-suncalcは、Javaで太陽や月の天文学的な情報を簡単に取得するための強力なライブラリです。その使いやすさと柔軟性により、さまざまなアプリケーションやプロジェクトでの使用に適しています。興味がある方は、公式ドキュメントを参照して、さらに詳しい情報を得ることができます。

Happy coding! 🌞🌙
[memo] git for windows (git bash) のバージョンアップ

## はじめに

git for windows (git bash) のバージョンアップをする機会があったので、将来の自分のためにメモします。

## git for windows のバージョン確認

git for windows のバージョン確認は、普通に git 本体のバージョンを確認すれば良いみたい。
具体的には git bash 上で以下のコマンドを実行すれば OK。

```
git version
```

## git for windows のバージョンアップ

git bash 上で、以下を実行すれば OK。

```
git update-git-for-windows
```

実体のコマンドは `git-update-git-for-windows` というシェルスクリプトで、先頭が `git-` で始まっていると git のサブコマンド化がされるため、`git update-git-for-windows` で実行が可能なようです。

```:git bash 上での実行結果
$ which git-update-git-for-windows
/mingw64/bin/git-update-git-for-windows
```

Windows 側から見た実体はインストールした場所によると思いますが `%ProgramFiles%\Git\mingw64\bin\git-update-git-for-windows` 等のはずです。

ただし、この update を実行すると `%ProgramFiles%\Git\bin\bash.exe` コマンド本体が入れ替わるため、Windows Terminal 上の git bash で実行するとエラーが起きるようです（Windows Terminal から見れば、実行しているコマンドがいきなり削除されるので）。
一度試してみたら、エラーにはなるもののアップデートは完了している感じでした。
でも、念のため、Windows Terminal からではなく通常の git bash の画面から実行したほうが良いかも。

【参考】Windows Terminal 上で git bash を使う方法

https://qiita.com/yoshi389111/items/877f3cd5328f633fb09c#git-bash-git-for-windows

## proxy 環境下でのバージョンアップ

上記は、通常の環境（非 proxy 環境）でのバージョンアップですが、proxy 環境下でバージョンアップしたい場合には多少設定が必要なようです。
（通常の git 操作で、 proxy 外とやり取りをしている人は、すでに対策済だろうと思います）

まず、proxy の設定が必要です。
前述の `git-update-git-for-windows` を見ると、内部で `curl` コマンドを使用しているので、`curl` 用の環境変数設定などが必要です。

普通に以下のようにすればよいはず（ユーザーID/パスワード/proxyサーバー名/ポート番号は全て仮の値です）。

```
export https_proxy=http://PROXY_USER:PROXY_PASSWD@proxy.exsample.com:8080
git update-git-for-windows
```

ちなみに、git の proxy 設定 `git config --get http.proxy` で設定が取得できる場合には、`git-update-git-for-windows` スクリプトの中で自動的に環境変数に設定してくれるようなので、手動での設定は不要です。

また、proxy を経由して `curl` 側でアクセスする際に、いくつかのエラーが発生する可能性があります。

- 証明書の検証でエラーが発生
- URL のリダイレクトが発生

それぞれ、`curl` のオプションとして `--insecure` (`-k` と同じ)あるいは `--location` (`-L` と同じ) をつければ回避できます。
ただし、`git-update-git-for-windows` スクリプトを直接書き換えるのは問題だと思うので、`~/.curlrc` ファイルを一時的に作ってから実行します。

```:~/.curlrc
--insecure
--location
```

（試してないけど `--insecure` の代わりに `--proxy-insecure` の方がいいかも）

また、proxy の設定も環境変数ではなく `~/.curlrc` で設定することも可能だと思います。


不要であれば、通常は消しておくとよいかも。

※もっと良い方法があればコメントください。
『データ指向プログラミング』を読んだ

データ指向プログラミングを読んだ。

https://www.shoeisha.co.jp/book/detail/9784798179797

オブジェクト指向(?)に課題を感じていたと言うよりは良いコードを書くこととそれを周知していくことの難しさを感じていて、もっとシンプルで安全なアーキテクチャは無いかなと思って、関数型っぽいけど既存の言語でも実装できます！という売り文句を見て読んでみた。

## 概要
カプセル化をやめてデータを独立させれば、関数はより自由に引数をとることができてロジックを集約、拡張することが簡単になるし、ロジックとデータが分かれることでそれぞれを理解するのが簡単になるよね。データをイミュータブルにして変更を管理するクラスを1つにすれば、安全だしデッドロックの問題を回避することができるよね(?)みたいな話だった。

## 全体感
RubyやJavaなどでこの考え方を使ってWebアプリ開発をやろうとはあまり思えなくて、Reactを使ったフロントエンド開発やClojureなど特定の言語ではうまくいくこともあるだろうなという感じだった。
というのもクエリの結果がインスタンスではなく連想配列とかで返されるCakePHP2を触ったことがあるが、この連想配列がイミュータブルになって変更を管理するクラスが1つになったと仮定してもあんまり良い方向には進まなさそうかなと。
どこでデータが書き換えられているのかを探し当てるのが本当に大変だし、テンプレートファイルがグローバルなヘルパ関数だらけになるしであんまり良い思い出がない…

逆に限定的な用途であれば使えるし、そこで守るべき原則を学べたのは良かった。
例えば検索のクエリをElasticsearchに投げるとき、FormObjectでリクエストを整形し、QueryBuilderを使ってクエリを作成し、gemで発行するようにしているが、この間を流れるデータはインスタンスではなくFreezeしたハッシュやStructを使っている。これによって各オブジェクトが必要な引数を明らかにしつつ、様々な形式の引数を受け取ることができる柔軟な形になっていると思う。
また、SPAでないReactのような特定の用途に絞られている状況では全容が把握しやすく、データがイミュータブルで安全であるという利点を活かすことができると感じた。ただ、昨今のTypeScriptによる型とconstとletの使い分けなんかで十分なんじゃないかな…

コードを書くことに慣れていない人(新入社員とか)に読ませられるかと言われるとかなり怪しくて、リーダブルコードとかCleanCode、ちょうぜつソフトウェア設計入門とかを理解した上で読んでほしい。
これ読んで、そうか！Rubyでもデータ指向プログラミングできるんだ！と思ってSinatraとかで書き始める、みたいなことは起きてほしくない。

内容に関しては413ページからの付録A"データ指向プログラミングの原則"がよくまとまっているので、まずそこを読んで概要を掴むことをおすすめする。
以下は内容に関する個別の感想。

## 内容に対して

データをコードから独立させることで、全てのフィールドがPublicにし、特定のデータ構造さえ合致していれば関数が使い回せるダックタイピングのような柔軟性を手に入れました！安全性はトレードオフだよね！みたいな感じのことが書かれておりめちゃめちゃびっくりした。大規模なシステム開発ではデータを適切にカプセル化することによって影響範囲を境界内にとどめて分業開発を可能にしてきたのではなかったのか…。データがイミュータブルであれば安全というのは、あくまで状態を持たないことによって参照透過性が担保されるよねという話であって、データを生成するロジックそのものが安全であることを保証してはいないよね、と思うのだが。
確かに入力と出力が単純な形になってテストを書くのは簡単になるのでそこで固めていきましょうね、みたいな話なんだろうか。

前述のデメリットが大きすぎると感じられたのだが、メリットとして上げられていることに納得できる点もあった。

1. データ構造とロジックの構造を分けることで複雑さが軽減される
2. 引数をJSONSchemaで定義することによって単体テストを自動化しうる
3. 検証対象のロジックに必要なデータのみを用意すれば良いのでデバッグが簡単

1に関して、確かにデータ上の関係性はないが、ロジック上の関わりはあるみたいなことはあってそこを分離するのは良い発想だと思った。しかし、本文中でも釈明があったがデータとロジックを分ける、ということは管理に必要なファイルは元のプロジェクトのファイル数をNとするとN~2Nになるということであり、またデータとロジックの間にある依存関係を意図的に無視してもいる。
そのため実際には確認しにいかなければならないファイル数は増えるし、そもそもデータはどの場所からでも改ざんしうるということなので、時折発生する調査タスクなんかを鬱陶しく感じている身からすると絶対にやめてくれと言いたくなる。

2に関してはJSONSchemaは表現力もあるし契約プログラミングっぽくて良いかなと思ったけど、実務上では引数のチェックって正規表現や数値の範囲だけでは収まらず、ユニーク制約をDBに問い合わせたりするわけで、それって関数内でクエリ発行するの？それとも全データを渡して`includes`とかでチェックするの？と。
てかそもそも1本のデータツリーだけを使う例しか出ていないが、あるロジックで元の引数のデータから関連的に遠いところのデータが必要になったとき、Reactのprops drillingみたいなことが起きるんじゃないの？と思う。
また、Stateを管理する場所をStateクラス1つにすることで、コードから状態管理を追い出すのは良いのだが、逆に言えばデータの変更を検知するタイミングがcommit時にしかないので、そこにValidationとCallbackが集中するだろうなというのも辛そう。
データはイミュータブルだから読み取りで差分がおきるようなこともないね！みたいな話もしていたが、全データをメモリ上に載せる気なのか、そういうスナップショット的なものをサポートするようなNoSQL系のDBを使う気なのかも分からなかった。

逆にClojureや他の関数型プログラミング言語がこれらの問題をどういう形で解決しているのか、というのはかなり興味が湧いたので機会があればそれらを読んでみようと思う。
Solving Five Key Challenges with a Security Operations Center (SOC)

Your current cyber security environment, your requirements, the nature of your company, and where your organization stands on the security maturity graph will all affect whether a Security operations center (SOC) is the best choice for you. However, if your cyber security team is having similar issues, you might want to think about using a Security operations center (SOC as a service).

Five Key Security Challenges and a Security operations center (SOC)’s Solution –

1. Incident Response Capability

The Problem

As security experts, we are aware that security incidents will happen despite our best efforts. When incident response is sluggish, inconsistent, or unreliable, there should be a worry. No matter how well-prepared your security is, if you can’t guarantee a quick response to incoming attacks, you’re exposed.

A Security Operations Center (SOC)’ Response

For the vast majority of cyberattacks, the commercial damage is mitigated the faster the reaction is. Security operations center (SOC)’s have the ability to use powerful defence tools, frequently combining automation, round-the-clock monitoring, and containment with on-site qualified professionals to give a quick incident reaction – the human factor.
2. Defending Endless Threats on a Limited Budget

The Problem

Tools for monitoring, detection, assessment, and correction are expensive. There may be pressure to keep investing in security solutions if your business is expanding, going through a digital transformation, or facing other substantial changes (to operations, regulatory duties, or compliance). This is to ensure that your organization keeps up with developments and stays secure.

A Security operations center (SOC)’s Response

When compared to the cost of deploying the same solutions and hiring the employees required to administer them efficiently internally, Security operations center (SOC)’s can offer access to a wide range of top-notch technologies. This reduces the danger of vendor sprawl and its related difficulties, helping to stabilize costs.

3. Resourcing the Expertise

The Problem

budgetary restrictions play a large role, but not only. With a 3.4 million+ workforce deficit, the worldwide cybersecurity business is now dealing with an alarming skills gap. This dearth of skilled expertise is making it difficult to find and keep employees, leaving security teams with worrying knowledge and resource gaps—something the bad guys are all too aware of.

A Security operations center (SOC)’s Response

A good Security operations center (SOC) should function as an extension of your current security team, giving you dependable access to the knowledge you lack on staff without having to worry about keeping in-demand employees or adding additional team members should your security stack grow.

source: https://www.esds.co.in/blog/solving-five-key-challenges-with-a-security-operations-center-soc/
Vitestでテストを実行すると出るエラーについて(Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.)

# 概要
Vue3で推奨されているテストフレームワーク「Vitest」を使用してテストを実行すると以下のエラーが出ました。

```sh
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
 ❯ formatError node_modules/vite/dist/node/chunks/dep-439026c8.js:43888:46
 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-439026c8.js:43884:19
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-439026c8.js:41641:22
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-439026c8.js:44178:30
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-439026c8.js:54813:29
```

# 原因
どうやらVitestの設定ファイル`vitest.config.js`の書き方が間違っていたみたいです。

# 解決法
`vitest.config.js`を以下のように書き換えたところテストが実行できるようになりました。
以下はVueアプリを作成した際にvitestを選択するとデフォルトで作成される`vitest.config.js`です。

```vitest.config.js
import { fileURLToPath } from 'node:url';
import { mergeConfig, defineConfig } from 'vite';
import { configDefaults } from 'vitest/config';
import viteConfig from './vite.config';

export default mergeConfig(
    viteConfig,
    defineConfig({
        test: {
            environment: 'jsdom',
            exclude: [...configDefaults.exclude, 'e2e/*'],
            root: fileURLToPath(new URL('./', import.meta.url)),
            transformMode: {
                web: [/\.[jt]sx$/],
            },
        },
    })
);
```

# 終わりに
比較的新しいフレームワークということでエラーの解決方法なども調べても出てこず苦労しましたが、いろいろ試してみると何とか解決できました。
OpenWrt PPPoE auひかり系 等

# こちらに統合しました
https://qiita.com/site_u/items/c6a50aa6dea965b5a774

# はじめに
::: note
### 初心者対応構成
- スクリプトでの自動設定
- UCIとLuCi及びWinSCPにて比較しながら作業がおススメ
:::

::: note
### [PowerShell](https://learn.microsoft.com/ja-jp/powershell/scripting/what-is-windows-powershell?view=powershell-7.4)で[SSHアクセス](https://openwrt.org/docs/guide-quick-start/sshadministration)

- [PowerShellの開始](https://learn.microsoft.com/ja-jp/powershell/scripting/windows-powershell/starting-windows-powershell?view=powershell-7.4) (キー入力)：`Win`+`x` > `a` > `はい`
※Windows7以降標準搭載

```sh
ssh root@192.168.1.1
```

<details><summary>ssh root@192.168.1.1のショートカット作成（デスクトップ）</summary>

```powershell:powershell
$DESKTOP = ([Environment]::GetFolderPath("Desktop") + "\192.168.1.1.lnk")
$WshShell = New-Object -comObject WScript.Shell
$Shortcut = $WshShell.CreateShortcut("$DESKTOP")
$Shortcut.TargetPath = "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe"
$Shortcut.Arguments = '-windowstyle hidden -ExecutionPolicy RemoteSigned "Start-Process ssh root@192.168.1.1"'
$Shortcut.IconLocation = "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe,0"
$Shortcut.WorkingDirectory = "."
$Shortcut.Save()

```

- `強制的に貼り付け`
- `yes`

---

</details>

<details><summary>SSHログイン出来ない場合:exclamation:</summary>

known_hostsクリア
- `C:\Users\yourusername\.ssh\known_hosts` ※Windows隠しファイル
```powershell:powershell
Clear-Content .ssh\known_hosts -Force

```
---
OpenSSHのインストール
※Windows 10 Fall Creators Update(1709)以降標準搭載
- 機能の確認
```powershell:powershell
Get-WindowsCapability -Online | Where-Object Name -like 'OpenSSH*'

```
- 機能のインストール
```powershell:powershell
Add-WindowsCapability -Online -Name OpenSSH.Server~~~~0.0.1.0

```
---

</details>

:::

:::note note
### 対応回線
- 対応回線 : PPPoE接続
:::

::: note
### 他回線
- [OCNバーチャルコネクト + ニチバン対策 全自動構成](https://qiita.com/site_u/items/298a6c2c4d6797e38cd0)
- [V6プラス & IPv6オプション + ニチバン対策 全自動構成](https://qiita.com/site_u/items/24bc0823986784cfb96c)
- [DS-LITE 各VNE事業者別 自動構成](https://qiita.com/site_u/items/b6d5097f5e3a0f91c95d)
:::

# 構成
::: note
### 構成
設定値

```bash
USER='PAP/CHAユーザー名' #プロバイダーより付与された接続ID
PASS='PAP/CHAパスワード' #プロバイダーより付与された接続パスワード

```
設定
```bash
uci set network.wan=interface
uci set network.wan.proto='pppoe'
uci set network.wan.username=${USER}
uci set network.wan.password=${PASS}
uci commit network
# restart
/etc/init.d/network restart
# 
exit

```
### 疎通確認
- [Google](https://www.google.com/)
:::

# [IPv6](https://qiita.com/site_u/items/1a684806a6eb36541fa5)
::: note
### [ルーターアドバタイズメントとDHCPv6](https://qiita.com/site_u/items/1a684806a6eb36541fa5#%E3%83%AB%E3%83%BC%E3%82%BF%E3%83%BC%E3%82%A2%E3%83%89%E3%83%90%E3%82%BF%E3%82%A4%E3%82%BA%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A8dhcpv6)

### [IPv6 の追加機能](https://qiita.com/site_u/items/1a684806a6eb36541fa5#ipv6-%E3%81%AE%E8%BF%BD%E5%8A%A0%E6%A9%9F%E8%83%BD)

:::
# [チューニング及びベンチマーク](https://qiita.com/site_u/items/599124e2904d1374c2c9)
::: note
### [SQMチューニング](https://qiita.com/site_u/items/599124e2904d1374c2c9#sqm%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0)
:::
Blockbenchでアニメーション機能をつかおう

# 準備しよう
1. Genericモデルでつくるよ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/276ab5fb-a980-981d-ff07-ff5cf1a74f4a.png)

1. 適当な名前をつけてプロジェクトをつくろう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/b569c777-2f60-4b6e-1543-16137269b65d.png)

# Editモードで作業しよう
1. 「グループを追加」をクリックして、「bone」をつくります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0672285f-e6da-473d-ff69-9ce4df8acf22.png)

1. 「メッシュの追加」または「キューブの追加」をクリックします。この記事では、キューブを追加しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/60133bdd-b6f4-6fac-ba0d-f1d4bf3e0c53.png)

# Animateモードで作業しよう
1. 「Animate」をクリックして編集モードをかえます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/cca66dec-1822-4ba2-1031-33a017d6307d.png)

1. 「+」マーク(アニメーションを追加)をクリックして、
・名前
・ループモード
を設定して、「決定」をクリックします。
(この記事では、ここだけ設定しています)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/17ba92db-6465-cb95-fbbd-8ab28bac602f.png)

1. 「アニメーションフィート」の数値を、ゼロからかえます。
この記事では、10にしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/072e8aff-521b-bf44-59e3-b127d878de05.png)

1. アニメーションさせたいグループをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4af4764a-6ebe-3421-cfc2-86e8f9ca05a4.png)

1. キーフレームがゼロのところで、「キーフレーム」メニューから「キーフレームを追加」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/25768e1e-ff1f-c571-c347-e992a642c858.png)

1. キーフレームが「◆」で追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/ebb2607e-b896-817b-b44f-39bdd1ac8ab9.png)

1. 「▶┃」(終端にジャンプ)をクリックして、終端(この記事では10フレーム)へ移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/aee8de46-e9c7-a7e2-2fc5-34a42919c3d7.png)

1. 終端にもキーフレームを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3d9a0bb2-8864-31e9-b833-6cffdb372fb0.png)

1. 「ギズモ」「ピボットツール」をクリックして、メッシュの中心点を編集できるようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/c3630b1d-b7b2-e974-059b-e78a99f77d34.png)

1. 「ピボットツール」で中心点を移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d6107fe0-8a65-f62c-542f-452bfaa3a823.png)

1. 中心点を移動できたら、Keyframe(キーフレーム)の数値をかえます。この記事では、ポジションのYの数値を5にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/77ac1aaa-23ef-3e8a-1128-6fcbe7c8939b.png)

1. 「▶」をクリックすると、アニメーションします。
この記事では、キューブがY軸に沿って5の高さ移動します。このアニメーションはループするようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/7fe22c2d-0e3f-c503-1677-13b01b7a2e50.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/cb204dd6-d3f1-dc3c-2d8e-e284785bdbd9.png)
![testRotation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/e08d3801-45cf-b204-0f60-0efb7953d3d4.gif)
php**-php-pecl-zip が無くなった場合

AmazonLinux2023等にアップグレードする際に パッケージに `php**-php-pecl-zip` が無い場合
「無くなった！zipモジュール非推奨になった？・・」となった時のメモ

PECLはサポートしているので、利用して導入。（ビルドツール必要となる為、容量増大は要覚悟）
```
yum install -y php【バージョン】-devel php-pear libzip libzip-devel
pecl install zip
```
（【バージョン】は各々置き換え。yum は dnf になるかも（エイリアス有る場合はどっちでも）

あと、設定有効にする為、以下コンフィグを足してに設定文を記載

```:/etc/php.d/20-zip.ini
extension=zip.so
```

zipは必須レベルなので、パッケージ化してもらいたい所・・
Wordpressで「アップロードされたファイルが php.ini の upload_max_filesize ディレクティブを越えています。」を解決する

# php.iniの場所を特定する
エラーメッセージの通り、php.iniファイルを探して、その中のupload_max_filesizeの上限を上げないといけません。
そのため、まずはphp.iniファイルの場所を探しましょう。

wordpressの現在有効にしているテーマのフォルダ中にあるfunction.phpの最終行へ以下を追加してサイトのTopページを開いてみてください。

```function.php
phpinfo();
```
PHPのロゴとと共に、表が表示されているはずです。その中で、Loaded Configuration Fileという行を探してみてください。ここへ、php.iniの所在が書いてあるはずです。



# php.iniを編集
どこにあるのか見つかったら、`vi /usr/local/etc/php/php.ini
`などのコマンドで開いて、**upload_max_filesize** と **post_max_size**などの値を増やします。
デフォルトだと20Mなので、それ以上にしてください。

max_execution_time、max_input_time、memory_limitも、Wordpressのインポート機能などで使うので、upload_max_filesize と post_max_sizeの上限値を上げるだけではうまくいかないときは調整してみてください。

```php.ini
; アップロード可能な最大ファイルサイズを指定
upload_max_filesize = 64M

; POSTリクエストで送信可能な最大データサイズを指定
post_max_size = 70M

; （必要に応じて）スクリプトの最大実行時間を指定（秒）
max_execution_time = 300

; （必要に応じて）スクリプトの最大入力時間を指定（秒）
max_input_time = 300

; （必要に応じて）スクリプトのメモリ使用量の上限を指定
memory_limit = 256M
```


# Loaded Configuration Fileが(none)になっている場合
Loaded Configuration Fileが(none)になっている場合はPHPのデフォルトで動いている状態なので、このような場合はphp.iniを新しく作る必要があります。

通常、/usr/local/etc/php/php.ini に配置されていることが多いので、そこへphp.iniを配置しましょう。

## Dockerの場合 
どのような環境で動かしているのかにもよるのですが、今回はDockerの場合を例にやり方を見ていきましょう。
docker-compose.ymlがあるディレクトリへ移動してphp.iniファイルを作って、**upload_max_filesize** と **post_max_size**などの値を増やします。

次に、docker-compose.ymlファイルを開いて、以下のように、php.iniファイルを、コンテナ内の/usr/local/etc/php/conf.d/php-custom.iniにマウントするように書き換えます。

```
services:
  wordpress:
    image: wordpress:latest
    volumes:
      - ./php.ini:/usr/local/etc/php/conf.d/php-custom.ini
      # 他のvolume設定...
```

できたら、Dockerコンテナを再起動しましょう。
```
docker-compose down
docker-compose up -d
```