OmniAICreator/Qiita-1.07M huggingface dataset:
AWS SOA-C01 勉強方法メモ（得点率95%）

## 本記事について
2021年7月26日 に、**AWS-SOA試験（SOA-C01）**に合格しました。
自分向けの備忘録と、勉強中の方への情報共有を兼ねて、私の勉強方法を記載します。

### 取得スコア
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/7440019c-fe03-7c16-43f6-8b09b6798000.jpeg" width="700px">

1,000 点満点で、959点でした。
期待以上の高得点で嬉しいです😆
100 ～ 1000 点のスコアレンジのため、得点率としては、95.4%となります。
※ (959-100) ÷ (1000-100) = 0.954


### 筆者の基本スペック
SIer勤務の新卒4年目。経済学部卒。
企画系の部署が長く、開発や運用の経験は浅い。
約2年前から趣味でAWSを触りはじめる。（サーバレスがメイン）
4か月前から仕事でもAWSを触りはじめる。（EC2やコンテナなど）
9か月前にAWS-SAA試験に合格済み。


## 勉強方法
### 勉強時間
期間は4週間くらい、業務後や休日に勉強をしました。
AWS-DVA試験も同時に勉強しており、それを含めての1か月です。
※ DVA試験の勉強方法については、[こちらの投稿](https://qiita.com/hayate_h/items/3aaa381195c8f616d8b9)をご参照ください。

### 勉強方法
主に３つのツールを使いました。

#### ツール1：[Udemy] Ultimate AWS Certified SysOps Administrator Associate 2021

https://www.udemy.com/course/ultimate-aws-certified-sysops-administrator-associate/

動画学習サイトの Udemy で提供されている、SOA のコースです。
ですが、**動画は少ししか見ていません！！**

こちらのコース、スライドを pdf でダウンロードできるため、スライドpdf を1週間かけて1週読みました。
これによって、基礎知識を習得します。　なお、動画は長くて飽きそうだったので少ししか見ませんでした😅

実はこのコース、フランス生まれの方が作成した全編英語の講座です。
そのため、動画もスライドもすべて英語です😱😱
と、言っても安心してください。スライドではそんなに難しい英語は使われていません。
（分からない部分は翻訳サイトを使えばOKです。）
広い範囲を網羅しており、説明も簡潔で分かりやすいスライドでした。
※ 動画はリスニングが追い付かないため、難しく感じました。。。英語も勉強せねば😇


#### ツール2：[学習コンテンツ] AWS Hands-on for Beginners

https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-hands-on/

とてもオススメです。
AWS公式が提供している、ビギナー向けのハンズオンコンテンツです。
これらのうち、興味があるものをいくつか実践しました。実際に手を動かすことで各サービスの解像度が上がります。
SOA 試験においては、EC2 / VPC / CloudFormation のハンズオンなどを実施することで、書籍で分からなかった部分の理解ができました。
※ ビギナー向けとされていますが、結構深掘りした内容もあり、試験勉強に限らず学びが多いです。

#### ツール3：[問題集] AWS WEB問題集で学習しよう（koiwaclub）

https://aws.koiwaclub.com/

Udemy のスライドpdf を一読した後は、[AWS WEB問題集で学習しよう（koiwaclub）](https://aws.koiwaclub.com/)で問題慣れをしました。
SOAの問題すべて（7問×89セット）を、2週間かけて2週しました。
こちらは1週目は全ての問題に目を通し、2週目は間違えた問題や理解が浅い問題に絞って実施しました。

最初は間違える問題が多くて嫌になるのですが、だんだんと問題のレベル感のようなものが分かってきて、正答率が上がってきます。（照準が合ってくるイメージ）
中には解説がイマイチで、読んでも「？」なものも多いです。
そういう問題は時間をかけても無駄なので、答えの文章を覚えてしまうか、ネットで検索してわかりやすい解説記事などを探しました。
例えば AWS-KMS の CMK などは、ネット上のサービス解説記事を見たことで、理解が深まり問題も解けるようになりました。

## 試験本番
### 試験会場
新宿駅前テストセンター（Daiwa西新宿ビル）で受験をしました。
駅チカ & キレイなのでオススメです。
※ AWSの試験は自宅受験も可能ですが、環境を整えるのが大変とのことで、テストセンターでの受験としました。

### 試験問題
問題集とほぼ同じ問題が3割近くありました。
他に基礎知識で難なく解けた問題が3割くらいでした。
残り4割のうち、約3割は選択肢に迷い、1割はお手上げでした。

### 時間経過
開始から50分くらいで一通り解き終わり、悩んだ問題を再考して終了としました。全体で60分くらいだったと思います。
自信を持って答えられない問題があったため、受験中は結構ドキドキしていたのですが、合格してよかったです。

### 難易度
主観ですが、難易度は、SOA ≦ DVA ≦ SAA と感じました。
これは、単純にSAAの方が試験範囲が広いためです。

### Tips1
問題文や選択肢の日本語がおかしいときは、英語に切り替えた方が楽です。
難しい英語ではないので、おそらく読めます。

### Tips2
SOA 試験に関しては、koiwaclub の WEB 問題集と全く同じ問題を多数見かけました。
そのため、解説を読んでも理解ができない問題については、問題と解答をそのまま覚えてしまうのもありかと思います。
(DVA 試験に関しては、WEB 問題集と同じ問題は少なかった気がします。)

### おまけ
DVA試験の勉強方法についても記事を書きました。

https://qiita.com/hayate_h/items/3aaa381195c8f616d8b9

<br>
以上です。
必ずしも、最適な勉強方法とは言えないかと思いますが、皆様のご参考になれば幸いです。
AWS DVA-C01 勉強方法メモ（得点率94%）

## 本記事について
2021年7月22日 に、**AWS-DVA試験（DVA-C01）**に合格しました。
自分向けの備忘録と、勉強中の方への情報共有を兼ねて、私の勉強方法を記載します。

### 取得スコア
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341404/f7d9a67f-a548-9107-b53a-b0ec4feb8599.jpeg" width="700px">
1,000 点満点で、947点でした。
期待以上の高得点で嬉しいです😆
100 ～ 1000 点のスコアレンジのため、得点率としては、94.1%となります。
※ (947-100) ÷ (1000-100) = 0.941


### 筆者の基本スペック
SIer勤務の新卒4年目。経済学部卒。
企画系の部署が長く、開発や運用の経験は浅い。
約2年前から趣味でAWSを触りはじめる。（サーバレスがメイン）
4か月前から仕事でもAWSを触りはじめる。（EC2やコンテナなど）
9か月前にAWS-SAA試験に合格済み。


## 勉強方法
### 勉強時間
期間は4週間くらい、業務後や休日に勉強をしました。
AWS-SOA試験も同時に勉強しており、それを含めての1か月です。
※ SOA試験の勉強方法については、[こちらの投稿](https://qiita.com/hayate_h/items/af1230a28befa9e6d93e)をご参照ください。

### 勉強方法
主に３つのツールを使いました。

#### ツール1：[書籍] ポケットスタディ AWS認定デベロッパーアソシエイト

https://www.shuwasystem.co.jp/book/9784798063409.html

分かりやすくて良い本だと思います。
基礎知識をインプットすることを目的に、10日かけて2週しました。
1週目は全て目を通し、2週目では理解が浅いところや、1週目に解けなかった問題を中心に見直しました。

#### ツール2：[学習コンテンツ] AWS Hands-on for Beginners

https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-hands-on/

とてもオススメです。
AWS公式が提供している、ビギナー向けのハンズオンコンテンツです。
これらのうち、興味があるものをいくつか実践しました。実際に手を動かすことで各サービスの解像度が上がります。
DVA 試験においては、Code シリーズのハンズオンなどを実施することで、書籍で分からなかった部分の理解ができました。
※ ビギナー向けとされていますが、結構深掘りした内容もあり、試験勉強に限らず学びが多いです。

#### ツール3：[問題集] AWS WEB問題集で学習しよう（koiwaclub）

https://aws.koiwaclub.com/

書籍を2週した後は、[AWS WEB問題集で学習しよう（koiwaclub）](https://aws.koiwaclub.com/)で問題慣れをしました。
DVAの問題すべて（7問×39セット）を、10日かけて2週しました。
こちらも1週目は全て目を通し、2週目は間違えた問題や理解が浅い問題に絞って実施しました。

最初は間違える問題が多くて嫌になるのですが、だんだんと問題のレベル感のようなものが分かってきて、正答率が上がってきます。（照準が合ってくるイメージ）
正直、DVAの問題集については解説がイマイチで、読んでも「？」なものが多かったです。
そういう問題は時間をかけても無駄なので、答えの文章を覚えてしまうか、ネットで検索してわかりやすい解説記事などを探しました。
例えば AWS-KMS の CMK などは、ネット上のサービス解説記事を見たことで、理解が深まり問題も解けるようになりました。

## 試験本番
### 試験会場
新宿駅前テストセンター（Daiwa西新宿ビル）で受験をしました。
駅チカ & キレイなのでオススメです。
※ AWSの試験は自宅受験も可能ですが、環境を整えるのが大変とのことで、テストセンターでの受験としました。

### 試験問題
問題集とほぼ同じ問題は1割。
基礎知識で難なく解けた問題は6割くらいでした。
残り3割のうち、約2割は選択肢に迷い、1割はお手上げでした。

### 時間経過
開始から55分くらいで一通り解き終わり、悩んだ問題を再考して終了としました。全体で60分くらいだったと思います。
自信を持って答えられない問題があったため、受験中は結構ドキドキしていたのですが、合格してよかったです。

### 難易度
主観ですが、難易度は、SOA ≦ DVA ≦ SAA と感じました。
これは、単純にSAAの方が試験範囲が広いためです。

### Tips
問題文や選択肢の日本語がおかしいときは、英語に切り替えた方が楽です。
難しい英語ではないので、おそらく読めます。

### おまけ
SOA試験の勉強方法についても記事を書きました。

https://qiita.com/hayate_h/items/af1230a28befa9e6d93e

<br>
以上です。
必ずしも、最適な勉強方法とは言えないかと思いますが、皆様のご参考になれば幸いです。
Visual Studio Code のタブを多段表示させる方法

ずっと不便だと感じていたタブをたくさん開いた時のスクロール表示。

久しぶりに多段表示できないものかと調べてみたら、標準機能に追加されているじゃーあーりませんか！

どうやら2021年1月アップデート（v1.53）で追加されたようです。

## 設定方法

以下のどちらかで設定画面を開きます。

* ファイル → ユーザー設定 → 設定
* `Ctrl + ,`

`wrap tabs` で検索し、チェックを入れたらオッケー！

![capture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/c11442de-815a-45bf-4e00-bf6b69244806.png)
WSL2の初期設定

# はじめに

困ったときの自分用メモ（関係無いのも入っている）

* Windowsから127.0.0.1で繋げられない
* WSL2からSSHで外に出られない
* WSL2で名前解決できない

とかなりませんように

Ubuntu 22.04

# WSL2側
## /etc/wsl.conf

```
[network]
generateHosts=false
generateResolvConf=false

[interop]
appendWindowsPath=false
```
## /etc/resolv.conf
```
# unlink /etc/resolv.conf
# vi /etc/resolv.conf
--
nameserver 192.168.X.X
--
# chattr +i /etc/resolv.conf
```

# Windows側
## %USERPROFILE%\\.wslconfig

```
[wsl2]
memory=12GB
swap=0
localhostForwarding=true
kernelCommandLine=ipv6.disable=1
```
emotionの型エラーが出たとき・スタイルが反映されないときの対処法

# バージョン
@emotion/react： 11.4.0

# 型エラーが出たとき
tsconfig.jsonに以下を追記。

```js
{
  "compilerOptions": {
    //・・・
    "types": ["@emotion/react/types/css-prop"],
   }
}
```

# コンパイルされないとき
emotionのコンパイルはemotion独自のコンパイラを通す必要があるみたいです。  
ソースコードの頭で以下の宣言をするとスタイルが効きます

```jsx
/** @jsxImportSource @emotion/react */ 
import React from "react";
import { css } from "@emotion/react";

const App = () => {
  return (
    <div>
      <p css={css`color: green;`} >hello</p>
     </div>
   )
}

```
この頭に書いたものを「JSX Pragma」というそうです。
単語の重要度の指標tf-idfの数式の感覚的な説明

# tf-idf stands for what?
tfはTerm Frequencyの略です。
また、idfはInverse Document Frequencyの略です。

ざっくりいうと、tfとidfを掛け合わせたものがtf-idfという指標です。

数式がわかりづらいと感じたので、自分なりの解説を載せます。


# 前提

単語文書行列の要素(i,j)には特定の単語の、特定の文書における出現回数$n_{ij}$が入っているとします。


# tf

Term-frequency、文書頻度の計算式には単語文書行列での添字i,jが両方ついていることに注目してください。
これは、tfが、特定の単語の特定の、特定の文書における頻度の指標として定められていることを表します。

```math
tf_{ij}=\frac{n_{ij}}{\Sigma_k n_{kj}}

```
分母ではすべての単語について和がとられています。
分母では、特定の文書に含まれている、注目している単語だけでなく、すべての単語の出現回数の総和を考えられています。つまり、ある文書での、そのような全単語の出現回数の総和に対する、注目している単語の出現頻度の比を考えたものが、tfということです。


# idf
Inverse document frequency

```math
idf_i=log \frac{D}{\Sigma_j sgn(n_{ij})}
```

ここで$D$は総文書数(**D**ocuments)です。

$idf$の添字はiしかないということは、idfは特定の単語に対して定められるものだということを理解してください。

分母の和を見ていきましょう。
sgnが混乱を招きますが、難しく捉える必要はありません。
特定の単語を考えたときに、すべての文章で、少なくとも一回以上出現回数があるような文書の数をカウントしているだけです。
つまり、インターネットでの特定の単語に対するヒット回数みたいなものですね。（全文書を検索エンジンにインデックスされているものと仮定した時。）


idfの私なりの要旨は以下です。
・**文章ベース**での出現回数を基準に、単語の出現頻度を考える。
・「逆」というのは、全文書に対する単語の出現頻度を示すもの、という直感的な頻度の定義の、逆数をとったような値を扱っている
・logで値をミニマムにする

# 最終形態

最後に掛け合わせます。左辺にi,jがついているのは、$tf_{ij}$に由来します。

```math
tf-idx_{ij}=tf_{ij}\times idf_i
```

# 参考文献
イラストで学ぶ人工知能　改訂２版
3D scatterのRuntimeWarningエラー

# RuntimeWarning: invalid value encountered in sqrt

```python:問題コード
plt.subplot(111, projection='3d')
plt.scatter(X, Y, Z)
```

```:出力
RuntimeWarning: invalid value encountered in sqrt
  scale = np.sqrt(self._sizes) * dpi / 72.0 * self._factor
```
## 解決策

```py:解決コード
fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')
ax.scatter(X, Y, Z)
```
-------

```py:全体コード
import matplotlib.pyplot as plt
from sklearn.datasets import make_swiss_roll
X, t = make_swiss_roll(n_samples=1000)

# RuntimeWarningエラー
plt.subplot(111, projection='3d')
plt.scatter(X[:,0], X[:,1], X[:,2], c=t)
plt.show()

# 成功
fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')
ax.scatter(X[:,0], X[:,1], X[:,2], c=t)
plt.show()
```
Railsで架空のCafeのHPを作ってみよう!【15日目】『1以上の半角数字の正規表現』編

#概要
基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

#設定と準備
・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！

#15日目の作業内容:round_pushpin:
・JQueryを使いエラーメッセージを非同期で表示

#15日目の気になった箇所:zap:
値段の入力で1以上の半角数字で入力させるエラーメッセージを記述したい。

#仮説:pushpin:
正規表現を使い半角数字かつ1以上のマッチした時以外でエラーメッセージを
出せば表現できるはず。

今回は正規表現の箇所だけ抜粋して仮説と結論を記述するので
エラーメッセージの表示のさせ方などは割愛させていただきます。

```error_messages.js
 if (price.match(/^[0]+[^0-9]/)){
    $('#price-error').html('1以上かつ半角数字で入力してください');
  } 
  return result;
}
```
このように 
^　← 先頭の1文字のマッチする　
[0]　　← 数字の0
[^0-9] ← 半角数字以外
先頭が0かつ半角数字以外にマッチするような正規表現で試したが
うまくいかなかった。
先頭が0だとダメなのでこの記述だと先頭は文字列を含んでしまい "a" などを
入力しても通ってしまう。

逆にして

```error_messages.js
 if (price.match(/[^0-9]+^[0]/)){
    $('#price-error').html('1以上かつ半角数字で入力してください');
  } 
  return result;
}
```

このように半角数字かつ先頭が0だとダメという正規表現を試してみたが
先頭を意味する ^ ←こちらは最初に記述する必要があるため機能しなかった。

#結論:star:
分けて段階を踏み、マッチさせていく必要があった。

```error_messages.js
 if (price.match(/[^0-9]/)){
    $('#price-error').html('半角数字で入力してください');
  } else if (price.match(/^[0]/)){
    $('#price-error').html('1以上でお願い致します');
}
  return result;
}
```

このように段階を踏みまずは、
/[^0-9]/　← 半角英数字のみ

その次に、
/^[0]/ ← 先頭が0だとダメ

という風に、大きな枠から順に狭めていくように
記述するとうまく記述することができる！
SkookumScript の初回コンパイル時に RenderToTexture_Enum などでエラーが出る

## TL;DR

解決策: Skookify時はエディタの言語を英語にする。

## 環境
UE 4.24.3-11590370+++UE4+Release-4.24
SkookumScript 4.24.0200

## エラー

[Create a cube Blueprint and rotate it using SkookumScript](https://skookumscript.com/docs/tutorials/create-rotate-cube/)に沿って進めていくと、16.でエラーが出た。

|Scope|Member|Message|
|---|---|---|
|`RenderToTexture_Enum`	|!	|`The data member '@@render_to_texture_max' does not exist in the class 'RenderToTexture_Enum'.`|
|`RenderToTexture_Flipbook_Enum`	|Project-Generated-BP	|`Duplicate data member! The '@@_' class data member in the class 'RenderToTexture_Flipbook_Enum' is already present as a data member in the same class 'RenderToTexture_Flipbook_Enum'.`|
|`RenderToTexture_Flipbook_Enum`	|!	|`The data member '@@render_to_texture_flipbook_max' does not exist in the class 'RenderToTexture_Flipbook_Enum'.`|
|`RenderToTexture_Enum`	|Project-Generated-BP	|`Duplicate data member! The '@@_' class data member in the class 'RenderToTexture_Enum' is already present as a data member in the same class 'RenderToTexture_Enum'.`|

自動生成された`RenderToTexture_Enum`の`!()`の内容は次の通り。

```s
// RenderToTexture_Enum
// EnumPath: /Engine/ArtTools/RenderToTexture/Enums/RenderToTexture_Enum.RenderToTexture_Enum
()
  [
  @@_:                     RenderToTexture_Enum!int(0)
  @@3d_:                   RenderToTexture_Enum!int(1)
  @@_:                     RenderToTexture_Enum!int(2)
  @@_:                     RenderToTexture_Enum!int(3)
  @@_:                     RenderToTexture_Enum!int(4)
  @@_:                     RenderToTexture_Enum!int(5)
  @@_:                     RenderToTexture_Enum!int(6)
  @@_:                     RenderToTexture_Enum!int(7)
  @@_:                     RenderToTexture_Enum!int(8)
  @@render_to_texture_max: RenderToTexture_Enum!int(9)
  ]
```

これだけでは自動生成のバグの原因は分からないが、エディタの言語設定を英語にして自動生成したものと見比べると分かりやすい。

```s
// RenderToTexture_Enum
// EnumPath: /Engine/ArtTools/RenderToTexture/Enums/RenderToTexture_Enum.RenderToTexture_Enum
()
  [
  @@material:                                     RenderToTexture_Enum!int(0)
  @@3d_imposter_sprites:                          RenderToTexture_Enum!int(1)
  @@unwrapped_mesh:                               RenderToTexture_Enum!int(2)
  @@depth_map:                                    RenderToTexture_Enum!int(3)
  @@lightmaps:                                    RenderToTexture_Enum!int(4)
  @@lightmaps_2_sided:                            RenderToTexture_Enum!int(5)
  @@flipbook_mesh_animation:                      RenderToTexture_Enum!int(6)
  @@physics_ground_tiling_physics_drop_of_meshes: RenderToTexture_Enum!int(7)
  @@tiling_material_from_hand_placed_meshes:      RenderToTexture_Enum!int(8)
  @@render_to_texture_max:                        RenderToTexture_Enum!int(9)
  ]
```

おそらく、前者では日本語の文字が`_`に変わっているのが原因。なので、初回のSkookify時(上のチュートリアルの11.)だけ英語設定にしておけば正しく生成され、コンパイルできる。
CASE式の中で集約関数を使って普通は2回SQLを書くところを1回で済ませるテクニック

## ポイント

- 集計結果に関する条件分岐は`HAVING`句を使うことが一般的かもしれませんが
    - CASE式を使えば、**SELECT句の中でも同等の条件が書けます**
- MAX、MIN、SUM、COUNTといった集計関数は
    - `WHERE`句や`GROUP BY`句で指定した条件で集約することが一般的かもしれませんが
        - 集計関数のカッコ内でも使える（カッコ内はカラム名だけではなく、式を入れることもできる）
            - なので、CASE式も使える

## 実例

テーブルのイメージ

店舗と、その店舗で働くスタッフを表現する中間テーブルをイメージして欲しいです。
スタッフが働く店舗が複数ある場合、主に働いている店舗以外は0というフラグが割り当てられます。
（設計の良し悪しに関する言及は不要）

テーブルのデータのイメージ（テーブル名 `shop_staffs`）

だいぶ簡略化しています。

| 店舗id（shop_id） | スタッフid（staff_id） | 主要店舗フラグ(main) |
|--------|------|--------------|
| 1      | 22   | 1            |
| 1      | 23   | 0            |
| 2      | 5    | 1            |
| 3      | 123  | 1            |
| 4      | 34   | 0            |
| 4      | 35   | 1            |
| 4      | 36   | 0            |
| 5      | 23   | 1            |

上記のテーブルに対して、1度のSQLで、以下のような条件のデータを取得したいとき

出力結果

| スタッフid | 店舗id |
|------------|--------|
| 1          | 22     |
| 2          | 5      |
| 3          | 123    |
| 4          | 35     |
| 5          | 23     |

店舗idの条件

- 働く店舗が
    - 1つなら、その店舗のidを取得
    - 複数なら、主要店舗idを取得

```sql
SELECT
	staff_id AS 'スタッフid',
	CASE WHEN COUNT(*) = 1 THEN MAX(shop_id)
	ELSE MAX(CASE WHEN main = 1
	         THEN shop_id
             ELSE NULL END)
	END AS '店舗id'
FROM shop_staffs
GROUP BY staff_id
```
## CASE式はどこでもかける

これまでに何回かCASE式を見てきましたが、CASE式はどこにでも書けます。

- SELECT 句
- WHERE 句
- GROUP BY 句
- HAVING 句
- ORDER BY 句
- 関数の引数
- 式の中（CASE式の中でも）

など

## 参照

https://www.amazon.co.jp/dp/4798157821/

18-20p

## アウトプット100本ノック実施中

https://qiita.com/ryosuketter/items/713474dbd009870e4103
Hyper-V/WSL/Docker

(自分メモ)仮想環境まわりのルーチンワーク

# 環境

- Windows 11 on Windows 11 Hyper-V
- Ubuntu 24.04 on Windows 11 WSL2

# Hyper-V

## ゲストWindowsの作成
- セキュリティ > TPM : 有効化

## ゲスト内での仮想化を有効にする - Nested Hyper-V
```powershell:ホストWindowsターミナル[管理者] VM一覧/確認/設定
Get-Vm
Get-VMProcessor -VMName * |ft VMName,ExposeVirtualizationExtensions # 確認
Stop-Vm <wsl-name>
Set-VMProcessor -VMName * -ExposeVirtualizationExtensions $true # 全部有効化なら'*'
Start-Vm <wsl-name>
```

# WSL

## Ubuntu導入

```powershell:Windowsターミナル 取得可能ディストリビューション一覧/導入
wsl -l -o # 入手可能なディストリビューションを列挙
wsl --install -d Ubuntu-24.04
```

## WSL1/WSL2の切り替え
- 仮想環境サポートが必要(例: Nested Hyper-Vゲスト)
```powershell:Windowsターミナル 導入済ディストリビューション一覧/設定
wsl -l -v
wsl --set-version <wsl-name> 2
```

## WSLのIPをホストと共有する設定
WSL2 ver2でWSL1のようにIPをホストと共有できるようになった
また、wslファイアウォール(デフォルトで有効)をオフに
```:%HOME%/.wslconfig
type con > %USERPROFILE%/.wslconfig
[wsl2]
networkingMode=mirrored
firewall=false
#localhostForwarding=true
^Z RET
```
[Hyper-Vファイアウォール](https://learn.microsoft.com/ja-jp/windows/security/operating-system-security/network-security/windows-firewall/hyper-v-firewall)もOFFに
```powershell
Get-NetFirewallHyperVVMCreator 
Get-NetFirewallHyperVVMSetting -Name '{40E0AC32-46A5-438A-A0B2-2B479E8F2E90}'

# 管理者
Set-NetFirewallHyperVVMSetting -Name '{40E0AC32-46A5-438A-A0B2-2B479E8F2E90}' -DefaultInboundAction Allow
```

```powershell:wsl再起動
wsl --shutdown
```

# Docker
```sh:導入
sudo apt install docker.io
```

# 余談 - containerd/ctr/nerdctl
containerdはDockerで使用する仮想環境レイヤ。使い勝手はdockerと[あまり変わらない。](https://www.tencentcloud.com/jp/document/product/457/31088)
```sh
export http_proxy=http://xxxxxx:xxxx
export https_proxy=http://xxxxxx:xxxx

ctr i pull docker.io/library/ubuntu:24.04
ctr run -t --net-host --no-pivot --privileged docker.io/library/ubuntu:24.04 ubuntu
ctr t exec -t --exec-id u1 ubuntu /bin/bash
ctr c rm ubuntu
```
 
```sh:/home/をbind
export HOSTHOME=/mnt/std_log/rmmagent/kyoya
ctr run -t --net-host --no-pivot --privileged --mount type=bind,src=$HOSTHOME,dst=/home/kyoya docker.io/library/ubuntu:24.04 ubuntu
```


https://github.com/containerd/nerdctl/releases

```
apt update && apt upgrade -y && apt install -y wget
wget https://github.com/containerd/nerdctl/releases/download/v1.7.6/nerdctl-1.7.6-linux-amd64.tar.gz
tar Cxzvvf /usr/local/bin nerdctl-1.7.6-linux-amd64.tar.gz
```
XBRLの勘定科目について

#目次
[1.基本的に共通の要素が設定されている](#1基本的に共通の要素が設定されている)
[2.業種別に勘定科目が設定されている](#2業種別に勘定科目が設定されている)
[3.提出者別の独自の勘定科目がある場合がある](#3提出者別の独自の勘定科目がある場合がある)
#ポイント
##1.基本的に共通の要素が設定されている

###例）売上高

+ 日本基準の場合
``NetSales``
+ IFRSの場合
``NetSalesIFRS``


##2.業種別に勘定科目が設定されている
###例) 海運業：海運業収益及びその他の営業収益
``ShippingBusinessRevenueAndOtherOperatingRevenueWAT``

##3.提出者別の独自の勘定科目がある場合がある
【初心者向け雑記】クラウドサービスの変遷

##`３行まとめ`
・集中型／分散型クラウドの違いは「データセンターがひとつか複数か」
・分散型クラウドを採用することで通信負荷の軽減を図る
・サービス提供プランの整備が今後の課題

#■クラウドとは（※初心者向け導入）
##`ネットワーク経由でサービスを利用すること`
ユーザーが必要なデバイスやソフトウェアを持っていなくても、
インターネットに接続するだけでサービスを必要な時／必要な分だけ
利用することができる概念。

例えば、Googleの`Gmail`は
ブラウザでGmailの画面を開けばそのままメールのやり取りが出来る。
対して、`Outlook`などのメールソフトは
ソフト自体のインストールやメールサーバーの構築を
ユーザー側で実施する必要がある。
##`クラウドを利用するメリット`
・複数の端末からいつでもアクセス出来る
・サーバー構築やソフトウェア導入等の初期費用を抑えることが出来る
・サーバーの保守やメンテナンスを自社で行う必要が無い
...etc

##`クラウドを利用するデメリット`
・自社の運用に即したカスタマイズをし辛い
・維持費用により結果的にコストが肥大化する可能性がある
・セキュリティ面のリスクが残る
...etc


#■「集中型」から「分散型」へ
##`従来の「集中型」クラウド`
従来のクラウドサービスでは、
大量のサーバーやストレージを大規模なデータセンターに詰め込み、
そこで集中的に処理を行う仕組みが主流である。

しかし、
IoTデバイスの普及や通信システムの進歩（5G等）などに伴い、
近年では膨大なデータが大量のデバイス間で生成／通信されている。

そのため、
データセンターに負荷が集中することで
トラフィックやリソース量の増加に繋がり、
結果としてパフォーマンスの低下やコストの増大を引き起こす可能性がある。

##`台頭した「分散型」クラウド`
集中型クラウドのリスクを解消するために考案されたのが
`複数のサブステーション（=小規模なデータセンター）からサービスを提供する`
分散型クラウドという概念である。

データ通信が分散されることで、
・データセンターへの過大なトラフィックが抑制される
・低レイテンシ（遅延）でのサービス利用が可能になる
という効果が見込まれる。

例えば以下など。

https://aws.amazon.com/jp/outposts/

https://www.ibm.com/jp-ja/cloud/satellite

##`分散型クラウドの課題`
サブステーションが設置されるということは、
近隣の企業とデータセンターを共有するということになる。

例えば、

>○集中型
　【データセンターX】 … A社、B社、C社、D社、E社、F社

という利用状況の場合、
サービスは一律「プロバイダ⇔ユーザー」での取引となる。

これが、

>○分散型
　【サブステーションA】… A社、B社、C社
　【サブステーションB】… D社、E社
　【サブステーションC】… F社

となった場合、取引形態はサブステーションごとに差が生じる。
具体的には

>・サブステーションAでは通信量が従来よりも増加してしまい、
　パフォーマンスを維持するためには帯域幅を拡大する必要がある。
・サブステーションCでは近隣で利用する企業が居ないため、
　利用コストは据え置きのままパフォーマンスが向上した。

など、一律のクオリティでのサービス提供が難化する懸念がある。

そのため、
・クオリティ維持のための追加コストを誰が誰宛てに支払うのか
・サブステーション毎に異なるパフォーマンスをどのように均一化するのか
など、サービスの料金体系や提供プランの整備が必要とされる。

#■参考文献
クラウドとは？初心者向けにわかりやすく解説！おすすめサービスも | テックキャンプ ブログ
https://tech-camp.in/note/technology/81880/

冗長性を高めたいけど国内にこだわりたい！そんな貴社必見の「分散型クラウド」とは - DirectCloud-BOX
https://directcloud.jp/contents/distributed_cloud/

CIOのための分散クラウドガイド：Gartner Insights Pickup（189） - ＠IT
https://www.atmarkit.co.jp/ait/articles/2101/08/news003.html
正規分布の再生性を実際に確かめてみた

# 再生性とは

(1) 確率分布$F$について、2つの独立な確率分布$X,Y$が$F$に従えば、それらの和
$$Z=X+Y$$
も常に$F$に従うとき、確率分布$F$は**再現性**をもつという

(2) すなわち、確率分布$F$が再生性をもつとは、次が成立することである。
$$ X \sim F, Y \sim F, XとYは独立 \Rightarrow X+Y \sim F $$

このように再生性は定義されます。

# 正規分布の再生性
## そもそも正規分布は再生性をもつのか(証明)

互いに独立な確率変数$X \sim N(μ_1,σ_1^2)$と$Y \sim N(μ_2,σ_2^2)$とおく。
$X$と$Y$の積率母関数は、それぞれ

$$\begin{array}{l}
m_{X}(t)=\mathrm{e}^{\mu_{1} t+\frac{\sigma_{1}^{2} t^{2}}{2}}
\end{array}$$

$$\begin{array}{l}
m_{Y}(t)=\mathrm{e}^{\mu_{2} t+\frac{\sigma_{2}^{2} t^{2}}{2}}
\end{array}$$

したがって、$X+Y$の積率母関数は、

$$\begin{aligned}
m_{X+Y}(t) &=m_{X}(t) m_{Y}(t)\\\
&=\mathrm{e}^{\mu_{1}+\frac{\sigma_{1}^{2} t^{2}}{2}} \mathrm{e}^{\mu_{2} t+\frac{\sigma_{2}^{2} t^{2}}{2}}\\\
&=\mathrm{e}^{\left(\mu_{1}+\mu_{2}\right) t+\frac{\left(\sigma_{1}{ }^{2}+\sigma_{2}^{2}\right) t^{2}}{2}}
\end{aligned}$$

これは、$N(μ_1+μ_2,σ_1^2+σ_2^2)$の積率母関数であり、積率母関数の一意性から、$X+Y$の確率分布は$N(μ_1+μ_2,σ_1^2+σ_2^2)$といえる。

よって、正規分布は再生性をもつと言える。

という感じで証明できます。

## 正規分布が再生性をもつということは

上記の$X, Y$に関して、$X+Y \sim N(μ_1+μ_2,σ_1^2+σ_2^2)$に従うということである。

# 検証
試しに、$X \sim N(50,100)$, $Y \sim N(70,25)$で実験してみます。 
グラフには、$X, Y, F(足した分布),T(理論値)$をプロットしました。 
np.random.normal()は、平均と標準偏差が引数になるので、分散の平方根を入力とします。

```python
import numpy as np
import matplotlib.pyplot as plt

x_mu, x_sigma = 50, 10
y_mu, y_sigma = 70, 5

X = np.random.normal(x_mu, x_sigma, 50000)  # 平均50, 標準偏差10, 分散100
Y = np.random.normal(y_mu, y_sigma, 50000)  # 平均70, 標準偏差5, 分散25
F = X + Y
theoretical = np.random.normal(x_mu+y_mu, np.sqrt(x_sigma**2+y_sigma**2), 50000)

plt.figure(figsize=(15,7))
plt.hist(X, bins=1000, label='X', alpha=0.7)
plt.hist(Y, bins=1000, label='Y', alpha=0.7)
plt.hist(F, bins=1000, label='F', alpha=0.5)
plt.hist(theoretical, bins=1000, label='theretical', alpha=0.5)

plt.legend()
plt.savefig("dist.png")
plt.show()
```

![dist (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187535/4b3cfa8c-6ae4-f128-b3c3-c3c9e1c165d3.png)


それっぽくなりました。

一応値を変えてみて、再度検証してみます

```python
import numpy as np
import matplotlib.pyplot as plt

x_mu, x_sigma = 50, 10
y_mu, y_sigma = -100, 10

X = np.random.normal(x_mu, x_sigma, 50000)  # 平均50, 標準偏差10, 分散100
Y = np.random.normal(y_mu, y_sigma, 50000)  # 平均-100, 標準偏差10, 分散100
F = X + Y
T = np.random.normal(x_mu+y_mu, np.sqrt(x_sigma**2+y_sigma**2), 50000)

plt.figure(figsize=(15,7))
plt.hist(X, bins=1000, label='X', alpha=0.7)
plt.hist(Y, bins=1000, label='Y', alpha=0.7)
plt.hist(F, bins=1000, label='F', alpha=0.5)
plt.hist(T, bins=1000, label='T', alpha=0.5)

plt.legend()
plt.savefig("dist.png")
plt.show()
```

![dist (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187535/1eb61cd8-b28e-b94d-0cb0-7180aa3c0d16.png)

裾の広がりも二つの分布に比べて広がってるのがわかります。

# 参考
- [積率母関数の証明](https://ai-trend.jp/basic-study/normal-distribution/nature/#i-4)
- [正規分布の積率母関数](https://ai-trend.jp/basic-study/normal-distribution/n-moment-generating/)
個人開発アプリにSwiftLintを導入する

## 投稿の経緯
機械的にコードチェックをおこない、コードの統一化、可読性の向上、、開発効率の向上を期待してSwiftUIで開発中の個人アプリにはじめて`SwiftLint`を導入したので記事にしました。

SwiftFormatを導入した記事はこちら👇
[[2021/07/30更新]個人開発アプリにSwiftFormatを導入する](https://qiita.com/nkekisasa222/items/a52f9dd24e64c57c0db9)

## 環境
Swift version 5.4.2
Xcode version 12.5.1

## SwiftLintとは
SwiftLintとはSwiftの静的解析ツールで、コンパイラよりも詳細にソースコードの解析をすることができます。こちらの[GitHubのルール](https://realm.github.io/SwiftLint/rule-directory.html)に沿ってコードを解析します。

## SwiftLintの導入
同一プロジェクトに導入した[SwiftFormat](https://qiita.com/nkekisasa222/items/a52f9dd24e64c57c0db9)をCocoaPodsで導入したので
統一してCocoaPodsで導入します。


PodfileにSwifLintをセットして`pod install`します。

```Podfile.
pod 'SwiftLint'
```

## コマンドラインからの使い方
ターミナルを開いて導入したアプリのディレクトリでコマンドを叩くと静的解析の結果が表示されます。

```
cd プロジェクトのルートディレクトリ
Pods/SwiftLint/swiftlint
```

## ビルド時に解析させるように設定する
コマンドラインで叩いた`Pods/SwiftLint/swiftlint`をXcodeで実行できるようにしましょう。

プロジェクトのアプリ用ターゲットの**左上の + ボタン**をタップして、Build PhasesにNew Run Script Phaseを追加し、SwiftLintを実行できるように設定します。

```
"${PODS_ROOT}/SwiftLint/swiftlint"
```
![wd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/d4826225-8c22-c44c-27c9-8277d413277f.png)

このようになればSwiftLintをXcodeで実行できます。

## ルールをカスタム
SwiftLintのデフォルトルールで発火する警告を発火させたくない場合などにルールをカスタムします。例えば、変数名の最小文字数や1行あたりの文字数などなど...

チーム開発の場合はルールの設定内容をチーム内で議論した方が良さそうですね。個人開発の場合はお好みで。ちなみに私はあまりカスタムせず、デフォルトに従ってコードを書いています。

それではルールをカスタムします！今回は以下のルールを設定します。

・**Podsを対象外にする**
・**multiple_closures_with_trailing_closureの無効化**
・**conditional_returns_on_newlineの有効化**
・**conditional_returns_on_newlineの有効化**
・**1行あたりの文字数制限を450に変更**
・**変数名が1文字以上なら許可に変更**
・**Type名が2文字以上なら許可に変更**

SwiftLintではルールの設定に`.swiftlint.yml`を作成し、そこに記述します。

```ターミナル.
touch .swiftlint.yml
```
でファイルを作成して

```ターミナル.
open .swiftlint
```
でファイルを開いて、ルールを設定します。

・SwiftLintの対象外とする場合は**`excluded:`**を使う
・無効とするルールを設定する場合は**`disabled_rules:`**を使う
・デフォルトで無効とされているルールを有効とする場合は**`opt_in_rules:`**を使う
・ルールをカスタムする場合は**`ルール名:`**を使う

今回カスタムするルールと👆こちらを組み合わせると。以下のようになります。

```.swiftlint.yml
# SwiftLintの対象外とする
excluded:
- Pods

# 無効とするルール
disabled_rules:
- multiple_closures_with_trailing_closur

# デフォで無効とされたルールを有効とする
opt_in_rules:
- conditional_returns_on_newline

# ルールをカスタム
line_length: 450 # 1行あたりの文字数制限を450に変更
identifier_name: # 変数名が1文字以上なら許可に変更
  min_length: 1
```
各ルールの詳細は[こちら](https://realm.github.io/SwiftLint/rule-directory.html)に記載されているのでざっと目を通すことをオススメします。

これでSwiftLintを導入できました。参考にしてください！

## お知らせ
現在、iOS開発案件を業務委託で募集中です（副業）。[TwitterDM](https://twitter.com/ken_sasaki2)でご依頼をお待ちしています。
Rails 投稿編集・更新画面

##記事編集画面
``` config/routes.rb
get"posts/:id/edit"=>"posts#edit"
```
posts/1/editというURLが送信されたときに、postsコントローラーのeditアクションが実行される

```posts/edit.html.erb
<%=link_to("編集”,"/posts/#{@post.id}/edit")%>
```
「編集」をクリックすると、URLが/posts/id/editのページに移動

```posts_controller.rb
def edit
  @post=Post.find_by(id: params[:id])
end
```
postsコントローラーのeditアクションにおいて、idがURLで入力された値の投稿データを変数@postに代入した。
##投稿更新画面
updateアクション=>フォームの内容への保存・投稿一覧画面への転送

```posts/edit.html.erb
 <%= form_tag("/posts/#{@post.id}/update") do %>
<textarea name="content"><%= @post.content %></textarea>
<input type="submit" value="保存">
<% end %>
```
保存ボタンをクリックすると、フォームに入力された内容がURL"posts/#{@post.id}/updateに送信される。

```posts_controller.rb
def update
    @post = Post.find_by(id: params[:id])・・１
    @post.content = params[:content]・・２
    @post.save・・３
redirect_to('/posts/index')
end
```
しかし、updateアクションに対応するビューがないので、URL"/posts/index"に転送する。
・・１idがURLで入力した値の投稿データを変数@postに代入した。
・・2カラム名がcontentで、そのcontentがname属性で指定したフォームに入力されたデータで変数@post.contentに代入した。
・・3作成したPostインスタンスをPostテーブルに保存。
4GBのGPUメモリで、CycleGANを動かしてみた。

# はじめに

https://github.com/eriklindernoren/PyTorch-GAN
に、沢山のGANがある。

このgithubのコードは、非常に簡単に動作させることができる。

# CycleGANを動かしてみた

以下が基本コマンド。

```
python3 cyclegan.py --dataset_name monet2photo
```

メモリが足りないと出る。
通常、まず、batch_sizeを小さくしたりするが、
既に、1になっているようなので、
仕方なく、勘で、画像サイズを小さく指定したら、動いてくれた。

```
--img_height 128 --img_width 128
```

# 動作結果
非力なPCなので、epochを極端に小さくした。2にした。
それでも、1日弱時間がかかった。
上段がmonet、下段がそれを入力とした実写(化)、のはず。
まだ、どっちがどっちというレベルではありますが。。。
別途、もう少し、わかりやすいサンプルでやってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635156/702da555-0811-9963-5b30-d7dc3bc1e040.png)

# コメント
特にありません。
このgithubは、お勧めーーーー。
MinecraftサーバーをPythonから制御

# MinecraftサーバーをPythonから制御
PythonからMinecraftサーバーを制御できるモジュールがあるらしい。
###### 環境
- Python3.9(だったっけ？)
- Windows 10 Pro
- Mcipc 2.3.3

server設定ファイルで

    enable-rcon=True

にしておいてください

## いんすとーる
    pip3 install mcipc
---
    python3 -m pip3 install mcipc
前者でできなければ後者を試してみてください。
できなかったら「python パス 通し方」ググってください。

## コードを書く。
###サーバーを停止する
まずはサーバーをストップさせることから。

~~~python
from mcipc.rcon.je import Client
with Client('127.0.0.1', 25575, passwd='minecraft') as client:
    log = client.stop()
print(log)
~~~

#### 補足
二行目のClient()はの引数は左からサーバーのIPアドレス、RCONクライアントのポート、
パスワードの順です。
log変数には実行結果が帰ってきます。
###よく使うコマンドをまとめる

~~~python
from mcipc.rcon.je import Client
while True:
    ans = input("")
    with Client('127.0.0.1', 25575, passwd='minecraft') as client:
        if ans == "1":
            log = client.stop()
        if ans == "2":
            log = client.kill("@e[type=player]") #[]の文字も同じ引数の中に入れる
        if ans == "3"
            log =client.effect.give("@p","speed") #client.effect("give","@p","speed")ではないことに注意
        print(log)
~~~

##(工事中) djangoから制御できるようにする


##参考

[公式ドキュメント](https://mcipc.readthedocs.io/en/latest/)
クリーンインストールしてしまったWin8.1タブレットの復旧 

#経緯
　購入したWin8.1タブレット(AT-02)で、easeUSでのドライブバックアップを取った上でWindows10のクリーンインストールを行った。
　しかし、オーディオ、タッチディスプレイ等が正常動作しない上、easeUSのリストアも失敗してしまった。
　様々な方法を試した結果、復旧に成功したので、備忘録をかねて掲載する。

#必要なもの
Windows10インストールUSB (Windows PEが立ち上がればOK)
USBメモリ
キーボード
USBハブ

#手順
※試行錯誤したものを思い出しながら書いているので、所々間違っているかもしれません。ご了承ください。

1. バックアップを取っていた回復パーティションから、install.wimを取り出して、USBドライブに保存しておく。
　 (EaseUSの機能では回復パーティション内にアクセスできなかったため、パーティションをUSBドライブに書き出した。)

2. Windows10 **(32bit)**のインストールメディアをUSBドライブに作成し、タブレットに接続する。
タブレットを起動し、Intelのロゴが出てきたところでEscキーを押してブートメニューを表示する。
 
3. Boot from file を選択し、Win10のインストールメディア→EFI→BOOT→bootia32.efiを選択してインストールメディアを起動。

4. このコンピュータを修復する から修復メニューを呼び出し、その中からコマンドプロンプトを立ち上げる。

5. Diskpartを呼び出し、タブレットのストレージ全体を初期化する。
その後ストレージをGPTに変換する。

    [diskpartコマンドでHDDを初期化する](https://qiita.com/sawawawawawa/items/2ddabd3c62e43c7af436)

    ```
    > diskpart
    DISKPART> list disk

    一覧からタブレット内のストレージを選択(例ではdisk 0)
    DISKPART> select disk 0

    DISKPART> clean
    DISKPART> convert gpt
    ```


6. ブート領域とシステム領域を作成し、ドライブレターを設定する。
このとき、ブート領域にはEFIの指定を忘れないこと。

    [【Win10】任意のディスクにEFIブートローダをインストールする](https://qiita.com/rerymd/items/638a4fcf8f23ce8aab2d)

    ```
    DISKPART> Create partition EFI size=200
    DISKPART> assign letter=B

    DISKPART> Create partition primary
    DISKPART> assign letter=C

    DISKPART> exit
    ```

7. 抽出したinstall.wimから、システムイメージを展開する。

     [Windowsイメージ操作まとめ](https://qiita.com/SkyLaptor/items/05532ed8ac037940b899#windows%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%92%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B)

    ```
    Dism /Apply-Image /ImageFile:(install.wimのパス) /Index:1 /ApplyDir:C:\
    ```

8. ブート領域にブート用のファイルを展開する。

    ```
    bcdboot c:\Windows /l ja-JP /s b: /f ALL
    ```

9. 復旧したWin8.1を起動する準備ができたので、一度シャットダウンした後USBドライブを外し、電源を投入する。

10. 「このコンピューターのハードウェアで動作するようにwindowsを構成できませんでした。」というエラーが出た場合、 Shift + F10 を押してコマンドプロンプトを開き、以下のコマンドを入力する。

    ```
    cd c:\windows\system32\oobe
    msoobe
    ```
    [Windows 7またはWindows 10のインストール中に「このコンピュータのハードウェアで動作するようにWindowsを構成できませんでした」エラーが発生する | Dell 日本](https://www.dell.com/support/kbdoc/ja-jp/000130942/windows-%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97-%E3%81%93%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%81%A7%E3%81%97%E3%81%9F-windows-7-%E3%81%BE%E3%81%9F%E3%81%AF-windows-10-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E4%B8%AD)

11. Windows8.1のセットアップ画面が立ち上がるので、初期設定を進める。
ライセンスキーがわからなければ、入力画面をスキップする。

12. セットアップが完了したら、ライセンスキーを調べる。(認証済みの場合は不要)
管理者権限のコマンドプロンプトで以下のコマンドを入力することで、ライセンスキーが表示される。

    ```
    wmic path softwarelicensingservice get OA3xOriginalProductKey
    ```

    [Windows 10のプロダクトキーを確認する方法 | マイナビニュース](https://news.mynavi.jp/article/20210726-1930922/)

13. 前の手順で表示したライセンスキーを使用して、ライセンス認証を行う。

14. (必要であれば)Windows10へのアップグレードを行う。
アップグレード後のWindows Updateに、オプションの更新プログラムとしてドライバの更新が表示されるが、適用すると該当するハードウェアが操作不能になるものがあるので注意。

#あとがき
　普段からWindowsイメージの展開に慣れている方なら常識なのだろうが、私の場合回復領域に.wimファイルが入っていることすら知らないまま復旧を試みていたため、この手順にたどり着くまでに相当な時間がかかった。
　また、復旧後に気づいたことだが、EaseUSでの復旧はストレージをGPTに変換した後に行えばうまくいったかもしれない。
【コピペでOK】開発者ツールでjQueryが動作しない時に、実行するスクリプト

# はじめに
jQueryは`$`と書くだけで、手軽にデバックができるので重宝しています。
もちろんjQueryが動作しないサイトもあるので、そういったサイトでjQueryが動作するためのスクリプトを作成しました。

# スクリプト
以下を開発者ツール＞Consoleにコピペします。終わり。

```javascript
var jquery = document.createElement('script');
jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
document.body.appendChild(jquery);
```

# 動作確認
▼ jQuery導入前 エラーを確認
![jQuery導入前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573011/f8e14243-544d-1aff-88db-4e6ddd8a027b.png)

▼ jQuery導入後 jQueryが動作することを確認
![jQuery導入後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573011/dacc4132-7c04-617e-15b7-9481f3f360c9.png)

# 解説
以下のscriptタグが生成されます。

```javascript
var jquery = document.createElement("script");
jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js';
```
⇓

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```

---

以下で、bodyタグの一番下に、jQueryをCDNで読み込むscriptタグが挿入されます。

```javascript
document.body.appendChild(jquery);
```

▼ jQeuryを読み込むscriptタグの挿入を確認
![jQuery導入後の資源.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573011/72f6beaa-0e99-3ebc-42f7-c92aee0a8afb.png)



# これで終わりにしようと思いましたが、おまけ
appleの公式サイトで上記のスクリプトを実行すると、以下のエラーが表示されます。

```
Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'unsafe-eval' blob: *.apple.com *.apple-mapkit.com www.instagram.com platform.twitter.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
```

▼ Google翻訳
>次のコンテンツセキュリティポリシーディレクティブに違反しているため、スクリプト 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'の読み込みを拒否しました： "script-src 'unsafe-inline '' 'unsafe-eval' blob：* .apple.com * .apple-mapkit.com www.instagram.complatform.twitter.com "。 'script-src-elem'は明示的に設定されていないため、 'script-src'がフォールバックとして使用されることに注意してください。

▼ コンテンツセキュリティポリシー(Content-Security-Policy)とは
>HTTP の Content-Security-Policy レスポンスヘッダーは、ウェブサイト管理者が、あるページにユーザーエージェントが読み込みを許可されたリソースを管理できるようにします。

ふむふむ。サーバー側でコンテンツセキュリティポリシーを設定しているので、それに違反するものはhttp通信できないってことでしょうか。不要なscriptを実行させない仕組みなようです。
今回は深追いしませんが、ちゃんとセキュリティのことを考えられているサイトでは、上記の方法でのjQueryの導入は難しいそうです。


# 終わりに
自分のためのメモとして書きましたが、誰かのためになればいいな〜といった感じです。
コンテンツセキュリティポリシーについて、もっと勉強しないと！
これならわかる深層学習入門 (2.43)の導出

# 2.4.3節の式(2.43)の別のルートでの導出法

### 注意点
本記事が初投稿です。手持ちの統計学の教科書を元に導出していき、間違いがないように注意して書いていきますが私の勘違いやタイプミスがあるかもしれない為、疑いの目を常に向けながら読んでいただけると安全かと思います。

# 設定と定義
記号の使い方は参考にした教科書である「入門・演習 数理統計(野田一雄・宮岡悦良 著)」で揃えさせていただきます。

- $X, Y$はある結合確率分布に従う確率変数
- $d(X)$は$X$の値を元にして作られるYの予測値
- $f_X(x)$は$X$の周辺確率関数($X$が連続型の場合は周辺確率密度関数)
- $f_Y(y)$は$Y$の周辺確率関数($Y$が連続型の場合は周辺確率密度関数)
- $f_{Y|X}(y|x)$は$X=x$が与えられた時の$Y$の条件付き確率関数(Yが連続型の場合は条件付き確率密度関数)
- $f_{X, Y}(x, y)$は結合確率関数($X, Y$が連続型の場合は結合確率密度関数)
- $X, Y$の期待値や条件付き期待値は存在すると仮定します。


#####定義
```math
E(X) := \left\{ 
\begin{array}{} 
\sum_i x_i f_X(x_i) & (離散型確率変数の場合) \\ \int_{-\infty}^\infty xf_X(x)dx & (連続型確率変数の場合) \end{array} 
\right.
```

```math 
f_{Y|X}(y|x) := \frac{f_{X, Y}(x, y)}{f_Y(y)}
```

```math 
Var(X) := E[\{X-E(X)\}^2] = \left\{
\begin{array}{}
\sum_i \{x_i-E(X)\}^2 f_X(x_i) & (離散型確率変数の場合) \\ \int_{-\infty}^\infty \{x-E(X)\}^2f_X(x)dx & (連続型確率変数の場合) \end{array} 
\right.
```

```math 
E(Y|X=x) = E[Y|x] := \left\{
\begin{array}{}
\sum_y y f_{Y|X}(y|x) & (離散型確率変数の場合) \\ \int_{-\infty}^\infty y f_{Y|X}(y|x)dx & (連続型確率変数の場合) \end{array} 
\right.
```





# 方針
先に式(2.43)を示すときに用いる命題を証明してから、その命題を使うことで結論を得たいと思います。

# 命題の証明
#####命題
$X$を確率変数とする。このとき、
任意の実数$c$に対して、$E[(X-c)^2] \geqq Var(X) = E[(X-E(X))^2]$
#####証明
$c$を任意の実数とし、$E(X) = \mu$とする。
この時、

```math 
\begin{align}
E[(X-c)^2] &= E[\{X-\mu-(c-\mu)\}^2]\\
&= E[(X - \mu)^2 -2(c-\mu)(X-\mu) + (c-\mu)^2]\\
&= E[(X - \mu)^2] -2(c-\mu)E(X-\mu) + (c-\mu)^2\  (\because 期待値の加法性と定数の期待値が定数になることから)\\
&= Var(X) -2(c-\mu)\{E(x)-\mu\} + (c-\mu)^2\ \ \ \ \ (\because上と同じ性質とVar(X)の定義から)\\
&= Var(X) + (c-\mu)^2\\
\end{align}
```
であり、$c, \mu$はどちらも実数であるから$(c-\mu)^2 \geqq 0$を満たす。
よって、$Var(X) + (c-\mu)^2 \geqq Var(X) + 0 = Var(X)$
以上からこの命題は成り立つことが示されました。




######参考:
命題:「入門・演習数理統計」p81 (2.6.3)
######注意点
参考文献をお持ちの方はわかるかもしれませんが、実は本書内では命題として述べられているわけではなく単に
"(2.6.3) cがどんな定数であっても$E[(X-c)^2] \geqq Var(X)$" (上記書籍のp81(2.6.3)より引用)
と述べられているので私の方で式が成り立つように命題として加筆させていただきました。
その為、条件として不足しているものがもしあれば指摘していただけると大変ありがたいです。

# (2.4.3)の導出
示すべきことは

```math 
任意のX=xに対して、E[\{Y-d(x)\}^2] \geqq E[\{Y-E(Y|x)\}^2]
```

が成り立つことです。

######導出
```math 
\begin{align}
&任意のX = xに対して、d(x)は定数であり、Yの期待値はE(Y|x) という条件付き期待値である。\\
&よって命題より、E[\{Y-d(x)\}^2] \geqq E[\{Y-E(Y|x)\}^2]が成り立つ。
\end{align}
```
以上から
$X=x$が与えられた時の$E[(Y-d(x))^2]$が最小になるような予測値$d^*(x)$は

```math 
d^*(x) = E(Y|x)
```
により与えられることが示せました。これが「これならわかる深層学習入門」(2.43)の主張になります。

以上でこの記事は終了になります。お付き合いいただきありがとうございました。
誤りがございましたら指摘していただけると幸いです。

# 参考文献
- これならわかる深層学習入門(滝雅人 著)
- 入門・演習数理統計(野田一雄・宮岡悦良 著)
SQL Server Management Studio でタブ文字と空文字を表示する

# はじめに
SQL Server Management Studio（SSMS）のデフォルトの設定では、タブ文字や空文字などが表示されません。

サクラエディタの場合
![サクラエディタの場合](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/a8169176-50af-342e-7ffc-d7063b801d00.jpeg)

SSMSの場合
![SSMSの場合](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/ffafa7f5-7343-a7e3-2f29-427fd83083f5.jpeg)


# 表示する方法
「編集」→「詳細」→「スペースの表示」
![設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/af5ba450-f572-6d37-0444-85ad4544285e.jpeg)


これでタブ文字と空文字が表示されるようになりました。
![004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/2fa2d527-17ce-8f24-370d-72d7d99d00ec.jpeg)


# 記号の意味
![記号](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/3924bb39-ac6b-9be5-f675-093111aa29ab.jpeg)

| 記号 | 意味 |
|---|---|
| ・ | 半角スペース |
| ◆ | 半角スペース |
| → | タブ文字 |

だいたいのアプリだと適当に触っていたら設定できるのですが、SSMSは設定がちょっと分かりづらいです。。。。
Google スプレッドシートのQUERY関数でBY列の値を取得する

# 問題
QUERY関数でBY列を指定しようとするとエラーになる。

```
=QUERY('シート1'!A:BZ, "select Y, AY, BY where A = 1", -1)
```

# 原因
「BY」はSQLの予約語のため。
GROUP BY句やORDER BY句で使用するため、PARSE_ERROR が起きています。。

```:エラーメッセージ
関数 QUERY のパラメータ 2 のクエリ文字列を解析できません: PARSE_ERROR: Encountered " "by" "BY "" at line 1, column 15.
```

# 解決策
列名を指定する「BY」をバッククォートで括ると値を取得できる。

```
=QUERY('シート1'!A:BZ, "select Y, AY, `BY` where A = 1", -1)
```
いつの間にか MusicKit JS V3 (Beta) が公開されていた件

# どうしたの？
いやーびっくりした。
MusicKit JS V2 を待ち望んでいたらいつの間にか V2 スキップして V3(Beta) が公開されているんだもん。しかも、2ヶ月前くらいに公開されていたっぽい。
MusicKit JS とは Web ブラウザで音楽をフルで再生出来る JS ライブラリです(すごい)。
ちなみに MusicKit JS V2 は公開されてはいませんが、 [Apple Music for Web] (https://music.apple.com/jp/browse) で実装されています。
これが Apple Music で実装されているバージョン↓

```js
MusicKit.version
> "2.2130.7"
```

私が運営している[ゲーム音楽](https://video-game-music.net/)では V1 なので V3 対応していこうかなと思います。
これがゲーム音楽で実装されているバージョン↓

```js
MusicKit.version
"1.1932.0-2"
```

# V1 Docs
https://developer.apple.com/documentation/musickitjs

私は毎週こちらのドキュメントを確認し V2 を待っていました。Docs がダークモード対応したんだなぁとか毎週少しの変化を楽しんでいました。しかし、なぜかこの Docs では V3(Beta) を確認することはできません。(謎)

# V3 Docs
https://js-cdn.music.apple.com/musickit/v3/docs/index.html

これが MusicKit JS V3 の Docs です。 Storybook で実装されていますね。
V1 の Docs にもリンクを貼って欲しいところ。

## 大きな変更点 ([参考](https://js-cdn.music.apple.com/musickit/v3/docs/index.html?path=/story/release-notes--page))
* Music Video が再生可能になった
  * これすごいですね。 Music Video で何かしらの Web サービス実装できますね。
* Live Radio や Station が再生可能になった
* バグ fix などなど。
* まだ確認していませんが、おそらく購入した iTunes の曲も再生可能になっているはずです。(V1 ではできず、 V2 では出来ていた。確認できたら更新します。)
  * 2021/08/03 追記: 購入した iTunes の曲も再生可能でした。やったぜ。

# おわりに
MusicKit V3 で Twitter で検索しても1件くらいしかヒットしないほど話題性ないですが、私にとっては大事件なので Qiita に書いた次第です。 Web で音楽フル再生出来るサブスクは Spotify API と Apple Music API しかないのですが、これがそんなに実装されていない理由はおそらく商用化しづらいからでしょうね。もう少し利用規約を緩くしてもらうと実装が増えるかもしれませんね。といっても提供していただけるだけで私はありがたいです。ありがとう Apple Music。
AtCoderログ：0046 - ARC 124 B

# 問題

https://atcoder.jp/contests/arc124/tasks/arc124_b

## 問題文
> 非負整数のみからなる長さ $N$ の数列 $a,b$ が与えられます。$a,b$ の 
$i$ 番目の要素はそれぞれ $a_i,b_i$ です。
> 非負整数 $x$ が以下の条件を満たすとき、$x$ を よい数 と呼びます。
> ・条件：$b$ を並べ替えて、$1 \le i \le N$ を満たすどの整数 $i$ についても $a_i~{\rm XOR}~b_i=x$ が成立するようにすることができる。ここで、
XOR はビットごとの排他的論理和である。
> よい数を小さい方からすべて列挙してください。

## 制約
> ・与えられる入力は全て整数
> ・$1 \le N \le 2000$
> ・$0 \le a_i, b_i < 2^{30}$

# 回答
## 回答1 (AC)
数列 $b$ の要素数は $N \le 2000$ なので、数列 $b$ の並び替えた全ての数列を列挙するのは無理です。また、$0 \le a_i, b_i < 2^{30}$ より $0 \le x \le 2^{30}$ となり、$x$ の全数探索も無理です。

そもそも よい数 $x$ はどのような条件を満たすでしょうか。$x$ が よい数 であるとき、ある $i$ に対して $a_i~{\rm XOR}~b_j = x$ となる $j$ が存在します。とくに $i=1$ とおけば $a_1~{\rm XOR}~b_j = x$ となる $j$ が存在することが必要です。したがって、よい数 $x$ は $N$ 個の値 $a_1~{\rm XOR}~b_1,~a_1~{\rm XOR}~b_2,~a_1~{\rm XOR}~b_3,~\ldots, a_1~{\rm XOR}~b_N$ に含まれているはずです。逆に、この $N$ 個の値以外に よい数 は考えられません。 つまりこの $N$ 個の数は 良い数 の候補として扱うことが出来るのです。

$a_i~{\rm XOR}~b_i=x$ の両辺に $b_i$ を XOR すると
$$ 
 a_i~{\rm XOR}~b_i~{\rm XOR}~b_i=x~{\rm XOR}~b_i
$$
となりますが、任意の値 $z$ に対して $z~{\rm XOR}~z=0$ となるので
この式は
$$ 
 a_i=x~{\rm XOR}~b_i
$$
と等価です。そこで、上記のそれぞれの候補 $x$ に対して $c_i=x~{\rm XOR}~b_i$ を計算し、数列 $c$ と $b$ が一致するかを調べれば良いでしょう。

以上の手順をコードにすると以下のようになりました。なお、C++ では XOR 演算は ^ で表します。

```C++:arc124b-1.cpp
#include <bits/stdc++.h>
using namespace std;
 
int main() {
  int n;
  cin >> n;

  vector<int> a(n);
  for ( int i=0; i<n; i++ ) {
    cin >> a.at(i);
  }
  sort( a.begin(), a.end() );
  
  vector<int> b(n), xcandidate(n);
  for ( int i=0; i<n; i++ ) {
    cin >> b.at(i);
    xcandidate.at(i) = a.at(0)^b.at(i);
  }

  set<int> x;
  vector<int> c(n);
  for( int i=0; i<n; i++ ) {
    for ( int j=0; j<n; j++ ) {
      c.at(j) = xcandidate.at(i)^b.at(j);
    }
    sort( c.begin(), c.end() );

    bool is_equal = true;
    for ( int k=0; k<n; k++ ) {
      if ( a.at(k)!=c.at(k) ) {
        is_equal = false;
      }
    }

    if ( is_equal ) {
      x.insert(xcandidate.at(i));
    }
  }

  cout << (int)x.size() << endl;
  for( auto xx : x ) {
    cout << xx << endl;
  }
}
```

$N$ 個の候補数のそれぞれに対して $N$ この要素からなる数列 $c$ を計算・ソートするので、全体の計算量は $O(N) \times O(N \log{N})=O(N^2 \log{N})$ となります。

# 調べたこと
## [AtCoder の解説](https://atcoder.jp/contests/arc124/tasks/arc124_b/editorial) → [公式解説](https://atcoder.jp/contests/arc124/editorial/2329)
回答1と同じ方針でした。

# リンク
## 前後の記事
- 前の記事 → [AtCoderログ：0045 - ABC 083 B](https://qiita.com/RoadLynton/items/5324eab487bec324fd45)
param is missing or the value is empty: の原因

# 結論 「無駄な記述」
初学者あるあるかと思いますが、今まで作ったものを基準に。そしてお手本にしながら作成をしていたから起きたエラーなのかなと思います。

###　エラーの原因について詳しく 
こちらが、お手本にしていたスクールで作成したものです。

```ruby
<%= form_with model: @purchase_address, url: item_purchases_path,  id: 'charge-form', class: 'transaction-form-wrap', local: true do |f| %>
```

 自分が記述していたコード

```ruby
  <%= form_with model: @sum_exp, url: skill_sum_exps_path,   id:'charge-form', class:'transaction-form-wrap', local: true do |f| %>
```

## 解説

エラーの原因は id: 'charge-form'　でした。　
これはスクールで作っていた クレジットカード決済の処理をJavaScriptでする為に必要なidの記述であって、フォームを送る処理には不必要な記述という事です。

スクールでの学習はついつい受け身になってしまい、いざ自分で作成するとこのようなエラーが起きるんですね。
自分で作るって大事ですね。
ライブラリ追加によるdockerイメージの作成(Python, tensorflow, sklearn)

#目的
前回の記事でdockerをインストールしてベーシックな機械学習環境を構築することまで行いましたが、拾ってきたdockerイメージには必要なライブラリが入っていませんでした。そこで拾ってきたdockerイメージにライブラリを追加して新しいdockerイメージを作成することを行います。

#実施内容概要
元となるdockerイメージ：tensorflow/tensorflow
追加するライブラリ：ScikitLearn、Pandas、imbalanced-learn
作成するdockerイメージ：my_ml

#実施環境
MacBookAir 　early 2020, RAM 8GB, CPU intel core i5 (非M1)
OS: macOS Big Sur Ver. 11.4

#実施内容

###dockerの起動
docker desktopのインストールとtensorflowのdockerイメージのダウンロードが完了していれば、以下のコマンドをterminalに入力するだけでdockerを起動できます。
-d　を追加して、バックグラウンドで動作してもらうことにしました。
--name TF　を追加して、コンテナの名前をTFと固定しました。

```
% docker run -d -it --name TF -p 8081:8888 tensorflow/tensorflow:latest-jupyter
```


#####注意
２回目以降、上記コマンドではTFはすでにあるとのエラーが出ます。この時はdocker desktopの再生ボタンを押せば良いみたいです。

![スクリーンショット 2021-07-21 15.28.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1710026/d5d75ad7-58db-8284-f0f0-6738f1f1fe98.png)

###CLIの起動
docker desktopのCLIと書いてあるボタンをクリックするとコマンドラインが起動します。どうやらここがdockerコンテナ上のterminal相当の場所の様です。例えば、このコマンドライン上で「Python3」と入力するとPythonが起動します。（今は起動しません）

![スクリーンショット 2021-07-21 15.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1710026/16da2233-f113-7574-3f5d-057a6a8a0add.png)

###pipによるライブラリのインストール

起動したコマンドライン上で以下のコマンドを実行してライブラリをインストールします。

```
$ pip install scikit-learn
$ pip install pandas
$ pip install imbalanced-learn
```

###インストールの確認

インストール完了後、起動しているコマンドライン上で以下を入力し、Python3を起動させます。

```
$ Python3
```

その後、起動したPython3にて以下を実行してエラーが出ないことを確かめます。

```
>>> import pandas
>>> import sklearn
>>> import imbalanced-learn
```

その後一旦起動したCLIを終了させます。（terminalを左上のバッテンマークで消しておきます。）

###terminalの再起動とdockerイメージ化

terminalを再度起動して、以下のコマンドを入力します。これで新たなdockerイメージの作成が完了しました！！

```
$ docker commit TF my_ml
```
commitの後の第一引数で起動中のコンテナを指定（今はTF)
第二引数で作成するイメージの名前をつける(今回はmy_ml)
イメージの名前には大文字は使えない様です。

```
$ docker images
```
と入力すれば、my_mlと記載されたイメージが追加されていることが確認できるはずです。

#結果

例えば、以下のコマンドをterminal上で実行すれば、
my_mlというdockerイメージから、
MLという名前のdockerコンテナを作成できます。
そしてこれにはすでに元にしたtensorflowはもちろん、pandas、Scikit-Learnとimbalanced-learnも含まれています！

```
$ docker run -d -it --name ML -p 8088:8888 my_ml
```
CSRとSSRとSSGの違い

# CSR（Client Side Rendering）
> クライアントサイド レンダリング（CSR）は JavaScriptを使用し、直接ブラウザでページをレンダリングすることを意味します。すべてのロジック、データフェッチ、テンプレーティングやルーティングは、サーバーではなくクライアント上で扱われます。

要するに`ブラウザでレンダリングする情報を取得したり、計算したりしてレンダリングする手法`です。

ただし、実行する処理が複雑で多いほど処理による負荷が増えてしまいます。負荷が増えれば増えるほど、ユーザーに対してページを表示するまでの時間が長くなります。

また、利用者の持つ端末の性能によってページを表示するまでの時間の差が生まれやすくなります。

このようにCSRはアプリケーションの大きさに比例して、JavaScriptの量も増えて処理が重なることでページ表示が遅くなるのが主要な欠点でした。

そこで上記の問題を解決する手法としてサーバーサイドレンダリング（SSR）が台頭します。

# SSR（Server Side Rendering）
CSRとは異なり、`サーバーで処理を実行して生成したHTMLをクライアントに返却する手法`です。

この手法ではブラウザで実行していた処理をサーバーで実行することにより、利用者の端末による差異を軽減することができます。また、JavaScriptをサーバーで事前に実行するので、大量のJavaScriptファイルをクライアントに送信する必要がなくなります。

ただし、サーバー上でページを生成するには時間を要するので、しばしばページがレンダリングされ始めるまでの時間が遅くなることがあります。

ちなみにSSRは全ページに採用しなければならない訳ではありません。一部の処理が多いページ等に対して、SSRを使用するのかを選択できます。このようにSSRとCSRの両方を使用する手法をハイブリッドレンダリングと呼称します。

# SSG（Static Site Generation）
日本語では静的サイト生成と訳されるページのレンダリングに関連する手法の一つで、`CSRやSSRとは異なり、ページを要求されるよりも前にHTMLを生成しておきます。`

事前にHTMLが生成されているので、ページが要求される度にHTMLを生成する手間がなく、高速なレンダリングを提供します。また、アプリケーションサーバーから直接HTMLを返却するのではなく、CDNにキャッシュしておくことでさらに高速にページを表示させることができます。

ただし、SSGにも代表的な問題点が2つほどあります。

1つ目は__全てのページのHTMLファイルを事前に生成しなければならない__ということです。例えば、Qiitaでは記事が投稿されると記事ページが必要になりますが、記事が投稿されるよりも前にHTMLファイルを生成することは不可能な訳です。

2つ目は事前にHTMLを生成した時に情報を取得しているので、それ以降に__更新された情報を表示することができません。__正確にはブラウザでJavaScriptを用いて更新された情報を取得できます。しかし、ページアクセスの度に情報を取得する必要があるので、SSGのメリットである高速なレンダリングの一部を犠牲にしてしまうのです。

これらの問題について一部のフレームワークでは上記の問題を解決する手段を用意しています。例えば、ReactのフレームワークであるNext.jsではgetStaticPathsの__fallback__や__ISR(Incremental Static Regeneration)__、[__SWR__](https://qiita.com/buttakyou/items/7ddf74ac8f63f5419822)という技術を提供しています。
※これらの手法については後日記事として投稿した後にリンクします。

# 参考サイト
[Rendering on the Web - Web上のレンダリング | Google Developers](https://developers.google.com/web/updates/2019/02/rendering-on-the-web?hl=ja)
[【Next.js】CSR,SSG,SSR,ISRがあやふやな人へざっくり解説する - Zenn](https://zenn.dev/akino/articles/78479998efef55)
[Next.jsにおけるSSG/SSR/ISR/CSRの違いと使い分け - Zenn](https://zenn.dev/a_da_chi/articles/105dac5573b2f5)
Node-REDで六曜お知らせLINEBotを作ってます

2021年8月1日、追記
お知らせ機能、届きませんでした:crying_cat_face:
作り直しました。
こちらの記事をご参照願います:bow:

https://qiita.com/tanaka_LV5/items/f1f89d02d404245a2c56


Node-RED、超初心者です。

六曜（大安や仏滅など）を気にする方でして、
生活する上で必要不可欠な情報ではないんですが、
ふと気になる時があります。

ただ、意外と探すとないんです。
スマホのカレンダーを見ればわかるんですが面倒です。
しかも、職場内はスマホの持ち込み禁止なので見れないんです。

そこで、
Node-REDで六曜お知らせLINEBotを作ってみました。
毎朝、LINEへその日の六曜とメッセージが通知されるという単純なものです。
![概要.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811885/9fc4a8b3-4d08-c035-8a1a-7ffd557b3038.png)


繰り返し設定で毎朝7:15にセット。
（Node-REDでは世界標準時基準なんですね。）
![inject.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811885/532bc718-e25f-339d-9575-4e9793c5f997.png)

今回使用したAPI
https://dateinfoapi.appspot.com/
![API.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811885/d3219f91-7661-09c0-0eb9-e2112d87a4e1.png)

取得した六曜に応じてメッセージを配信。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811885/2a55f6e7-d79d-3d81-6a8c-73cf518df22c.png)

試しに送ってみました。
（ちなみに本日（2021年7月31日）は”先負”でした。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1811885/0760312f-68e6-828f-1326-635ba699fffe.png)


明日（2021年8月1日）の朝7:15にお知らせが来るのを楽しみにしています。

読んで頂き、誠にありがとうございました。
【０日目】ゼロから始めるJava開発

#まずはじめに
こんにちは、総務で転職してきた会社で早３年。気づけばシステムのフロントチームというところに猫の手としてやってきました、Loniといいます。
エクセル関数も書いたことない状態だった自分が、今何故システム開発に？というのは分からないので置いといて…
人が次々と辞めていく中、仕事を教わるどころか、とりあえず戦力にならねばとなりの席のおっさんが死ぬんじゃないかと不安になるような今日この頃。

Javaを…Javaを書く人がいねえ。

という悲鳴が聞こえてきたので、とりあえずやってみようと書き始めました。

#ゴール
業務で必要な計算システムを作成します。
WEBページからCSVを読み込ませ、いろいろ計算させて、合計〇円でしたよ！みたいなCSVを吐き出します。

#ミニゴール設定
０．開発環境作る
１．WEBページを表示させる
２．WEBページに入力したデータを受け取って計算してWEBページに返す
３．CSVの読み込みをさせる
４．CSVに書かれた内容を分解して必要なところだけ取得する
５．取得した情報を計算させる
６．CSV吐き出しをさせる
７．大量のデータ（100万件×10万件×10万件みたいな？）を扱う

読んでくださった方で「いや、こっちのが早道じゃろがーい！」と心の中で感じたらコメントをください。お願いします。（切実）

#開発環境
SpringBootVersion 1.5.8.RELEASE
domaSpringBootStarterVersion 1.1.1
lombokVersion 2.17.0
SDKJavaVersion 1.8.0_162