OmniAICreator/Qiita-1.07M huggingface dataset:
AWSを使ったCICDの仕組みがあるとき・ないとき

## はじめに
AWSのインフラ屋さんをやっていた時、「いつかシステム担当をすることになったら、Codeシリーズを駆使してシステムのCICDをやるから、学んでおいた方がいい」という言葉を貰い、勉強してから3か月後、まさかのシステム担当になっていました。ということで、今回は自分の復習も兼ねて
- 備忘録もかねてCICDとはなんなのか？
- AWSのCICD＝Codeシリーズっていっぱいあるけど、どれがどの役割を果たしているのか？

について記事にまとめていこうと思います！

## CICDとは？
CICDとは、「継続的インテグレーション (Continuous Integration) と継続的デリバリー (Continuous Delivery)」により、ソフトウェアの変更を常にテストして自動的に本番環境でリリース可能な状態にするものです。

何言うてんねんコイツと思った方、実際に、多くのユーザが使用しているアプリで「UI等の仕様を修正する」ことになり、それをリリースすることになったとします。ここでは某CMになぞってあるときないときで解説します。

### CICDがないときー！
CICDがない場合は、以下のように**全て人の手によって**リリースが行われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942158/2f42771b-8e5a-4ebe-a4d6-226c5114aa8d.png)
1. リリースのための手順書を作成する
1. 検証環境で手順書に従い、リリースを行い、問題がないか確認する
1. 問題があった場合、もう一度1. に戻り、ない場合は、再度手順書に従って商用環境にリリースする
1. 商用環境でも問題がないことを確認する

しかし、これだと、人為的ミスが発生しそうですよね。最近のアプリは非常に複雑な機能を持つことが多いです。その場合、リリースの手順もかなり複雑なものになると思います。そんな時、検証環境でどれだけ完璧に手順をこなせても、実際は、商用環境で再度同じ手順を踏むので、「確実に成功する」という保証は担保されていません。また、リリースは一発勝負なので、問題があった場合は切り戻しをすることになります。特にリリース後、問題が発覚して切り戻すとなると、かなり労力がかかりますよね。。。

### CICDがあるときー！
CICDは、これらの人為的ミスが発生しそうなリリース作業を「あとは、リリースしてください！」という状態まで**自動で持って行ってくれます。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942158/2407e772-cc98-40f1-ae9f-d9e523a75b30.png)

1. ユーザは変更箇所についてプロジェクトのコードを管轄しているところ (gitなど) にプッシュする
1. 仮想環境に変更部分のリリースを**自動で**行い、問題ないか**自動で**検証する
1. 商用環境の中で現行の場所 (Blue環境) とは異なる場所 (Green環境) にリリース分を**自動で**構築し、問題ないか**自動で**検証する
1. セットアップおよび検証結果をもとに、ユーザに対してBlueからGreenへの切り替えについて承認を待機する
1. ユーザは切り替えを承認し、自動的にGreen環境へ切り替える。この時、Blue環境は戻せるように指定時間の間は商用環境に残す。

これだと、人為的ミスはなくなると言っても過言ではないですよね！そして、この図では、手順2がCI、手順3~5がCDに当たります。
また、切り戻しについても手順5でBlue環境を残しているので、再度Blueに環境を戻すだけで元通りになります。以上のように商用環境に2つの環境を用意し、リリースなどのたびにその環境を切り替える (元の環境を残しておく) 戦略をBlue/Greenデプロイと呼び、CDにおいて重要な考えになっています。

## AWSにおけるCICDサービス
AWSにおいて、上で説明したCICDを実現するサービスは、「Codeシリーズ」です。

### CodeシリーズによるCICDがあるときー！
1. ユーザは変更箇所について[CodeCommit](https://aws.amazon.com/jp/codecommit/)にプッシュする
1. [CodeBuild](https://aws.amazon.com/jp/codebuild/)は、`buildspec.yml`などの作成した手順に従って、仮想環境でビルドを行い、成果物 (アーティファクト) を出力する
1. [CodeDeploy](https://aws.amazon.com/jp/codedeploy/)は、CodeBuildで出力されたアーティファクトに従って、Green環境にアプリを構築し、問題ないか検証する
1. セットアップおよび検証結果をもとに、ユーザに対してBlueからGreenへの切り替えについて承認を待機する
1. ユーザは切り替えを承認し、自動的にGreen環境へ切り替える。この時、Blue環境は戻せるように指定時間の間は商用環境に残す。

以上のようなリソースによってCICDを実現することが出来ます。また、この1~5の手順を作成するために、[CodePipeline](https://aws.amazon.com/jp/codepipeline/)があります。
CodeBuildによるCIを行うための`buildspec.yml`については以下の記事が参考になります！

https://qiita.com/s_ryota/items/803b44caacac12fd2439

また、CodeCommitは、2024年7月時点で新規受付を停止しています。そのため、新しくCICDをするためには、GitHubやGitLabといったGitプロバイダを使用することになります。(7月以前に使用していた方は継続して利用可能です)
詳しくはAWS公式の以下に記載されていますので、ご確認ください！！！

https://aws.amazon.com/jp/blogs/news/how-to-migrate-your-aws-codecommit-repository-to-another-git-provider/

## まとめ
開発のCICDがあるときー！：わっはっはっはっは！ (勝手にアプリ構築してくれるし、切り戻しも簡単やでー！)
ないときー...：あぁ...。(この量のリリースを手作業で！？)

ぜひ、CICDを覚えて使いましょう！！！
LaTeXで長い文章を書く

:::note info
長い文章を効率的に書くコツ

- ファイルが大きくなる　→　章ごとにファイルを分割
- コンパイル時間が長い　→　一部分だけコンパイル

:::

LaTeXを使って数十ページを超える長いドキュメントを作成しようとすると、
- ファイルが長くなってしまう
- コンパイル時間が長くなる
などの問題が発生します。

これらの問題を解決するためにいろいろ工夫する羽目になったので参考までに。

:::note warn
`lualatex`を使っていることを仮定しているので処理系によっては読み替える必要があります
:::

## ファイルを分割する

プロジェクト構造は

```
.
├─ preamble
|  ├─ page.tex
|  ├─ figures.tex
|  └─ ...
├─ main.tex
├─ part1
|  ├─ figures
|  |  ├─ figure1.png
|  |  └─ ...
|  ├─ chapter1.tex
|  ├─ chapter2.tex
|  ├─ chapter3.tex
|  └─ ...
├─ part2
└─ ...
```

のように`chapter`ごとに分けることが望ましです。
`section`が長くなるようであれば`section`ごとに分けるもの良いです。

:::note warn
実際に`part1`や`chapter1.tex`などのファイル名をつけてしまうと、章の順番の入れ替えが煩雑になる。内容に即したファイル名にするべし
:::

`import`パッケージを使うと、どのファイルでエラーが発生したかがわかりやすいのでこれを使います。（ただし、どのファイルで発生したかはわからないエラーもある模様）

```latex:main.tex
\documentclass{ltjsbook}

\usepackage{import}
\import{preamble}{preamble}

\begin{document}
\tableofcontents
\part{part1}
\subincludefrom{part1}{chapter1}
\subincludefrom{part1}{chapter2}
\subincludefrom{part1}{chapter3}
...
```
`import`パッケージを使うと、各`tex`ファイルからの相対パスで画像などの外部ファイルを指定できるようになります。

```latex:chapter1.tex
\begin{figure}[H]
    \centering
    \includegraphics[width=0.8\textwidth]{figures/figure1.png}
    \caption{figure1}\label{fig:fig1}
\end{figure}

```

## 一部のファイルのみをコンパイルする

`main.tex`のプリアンブル部分に
```latex:main.tex
\includeonly{part1/chapter4}
```
のように書くと、そのファイルのみがコンパイルされます。
参照の番号は全体をコンパイルする場合と変わりません。

この場合、`chapter4.tex`のみを編集しながらコンパイルをし、書き終わったらこの行を削除して全体をコンパイルすれば良いわけです（ただし最後のコンパイルする際には時間がかかる）。
Wordpressのサイト移管でScrape nonce check failed.

旧サイトから新サイトにwordpress移管途中でテーマのphp更新しようとしたら`Scrape nonce check failed.`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199750/115a182d-2931-4565-9edd-e5e2716556ee.png)

なんでや。

## 前提

- hogehoge.comのサイト移管
    - 旧サイトはA社のホスティング
    - 新サイトはB社のホスティングサービスを使う(IPアドレスが変わる）
- dnsは切り替え前で旧サイト側を指してる
- 開発者はhostsを使用して新サイト側を見てる


## scrapeチェックってなんぞや。

```php:wp-admin/includes/file.php
/**
 * Attempts to edit a file for a theme or plugin.
 *
 * When editing a PHP file, loopback requests will be made to the admin and the homepage
 * to attempt to see if there is a fatal error introduced. If so, the PHP change will be
 * reverted.
 *
 * @since 4.9.0
 */
function wp_edit_theme_plugin_file( $args ) {
```

要約:phpはエラーがあるとwordpress全体が死ぬから自身にループバックして死なないかチェックするぜ。エラーになったらやべーから更新はロールバックするぜ。

## どういうこと

ざっくりこんなかんじ。

```plantuml
Actor "user" as user
Participant "Wordpress" as  wp
Database "transient" as t

user->wp : テーマのphpを保存
activate wp
wp->wp : 実ファイルを更新(1)
wp->wp : scrape_keyとscrape nonceを作成(2)
wp->t : set_transientで(2)を登録
activate t
wp->wp : 自身のurlに(2)を付けて  wp_remote_get()
activate wp
wp->t : get_transient() ･･･(3)
t->wp
wp->wp : (2)と(3)が一致するか返答 (4)
deactivate wp
alt successful case
    wp-> user  : ok
else error case
   wp->wp : 実ファイルをロールバック
   wp->user : NG
end
wp->t : delete_transient()
deactivate t
```

1. とりあえず実ファイルを更新
1. チェック用の一時キーとしてscrape_keyとscrape_nonceを作る
1. DB一時保存用領域(transient)にscrape_keyとscrape_nonceのペアを更新する
1. wordpressのadmin_url()なりにscrape_keyとscrape_nonceのペアのパラメータ付きでwp_remote_get()
    - ここでやべーphpだとエラーで死ぬので望んだ答えが帰ってこないので失敗と判断する
    1. **ここから遷移先**
    1. 受け取ったadmin_url()のwordpressはscrape_keyからtransientを検索してnonceを取得する
    1. パラメータのscrape_nonceとtransientから取得したnonceが一致したら正しく動作したと返答する
    1. **ここまで遷移先**
1. 返答にscrape_nonceが含まれていたらOK、そうでなければ一律NG
1. NGなら実ファイルをロールバックする
1. (transientを削除もしとく)


## なにがおきてる
```plantuml
Actor "user" as user
Participant "Wordpress\n新サイト" as  wp
Database "transient\n新サイト" as t
Participant "Wordpress\n旧サイト" as  wp2
Database "transient\n旧サイト" as t2

user->wp : テーマのphpを保存
activate wp
wp->wp : 実ファイルを更新(1)
wp->wp : scrape_keyとscrape nonceを作成(2)
wp->t : set_transientで(2)を登録
activate t
wp->wp2 : 自身のurlに(2)を付けて  wp_remote_get()
activate wp2
wp2->t2 : get_transient() ･･･(3)
t2->wp2 : ねーよ
wp2->wp : (2)と(3)が一致するわけがない
deactivate wp2
   wp->wp : 実ファイルをロールバック
   wp->user : ばーか
wp->t : delete_transient()
deactivate t
```

新サーバー内から`admin_url()`に`wp_remote_get()`すると旧サイト側のwordpressが呼び出され、transientに当然scrape_keyは無いので死ぬ。**必ず死ぬ。**


## じゃどうする。

- 新サーバーがvpsなんかで管理者権限があるなら`/etc/hosts`を設定するなりして、**新サーバーでhogehoge.comが自身を指すように設定する**
- 管理者権限が無いなら **ftpなりで直接ファイルを更新する。**
- (非推奨) file.phpのチェックを迂回させちゃう(*1)

このケースってDNSが切り替わる前特有の問題とも言えるので、開き直って直接phpファイルを修正しちゃうのが正しい気がする。

### *1 非推奨:file.phpを書き換える方法

```php:wp-admin/includes/file.php
	if ( $is_active && 'php' === $extension ) {
    // ↓ 「false &&」を入れて強制迂回
	if ( false && $is_active && 'php' === $extension ) {
```

これやるとアップデートが失敗するかもしれんので、忘れずに戻しておかないと後々やべーことになるかも

## ちなみに

エラーメッセージで `Scrape nonce check failed.`と返ってくるのはドチャクソ古いwordpress。
今は「Scrape **key** check failed.」と返ってくる。

旧サイト。どんだけアップデートさぼってんねん。
[writeup] picoCTF "interencdec"

# 今回の問題
picoCTFより"interencdec"を解いていきます。


# 実際に解いていく
### 1. 問題文を確認する
![interen_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945501/07bb90e0-39ff-4123-9f83-e702ba06fb36.png)


以下の暗号が書かれたファイルをダウンロードできました。
```
YidkM0JxZGtwQlRYdHFhR3g2YUhsZmF6TnFlVGwzWVROclh6YzRNalV3YUcxcWZRPT0nCg==
```
それでは、この暗号を解読していきます。


### 2. 暗号の特徴を書き出す
この暗号の特徴を以下に書き出します。
- a ~ z, A ~ Z までのアルファベットが使用されている
- 数字が使用されている
- 一番後ろに = がついている


以上より、Base64だと予想しました。


### 3. 解読する
![interen_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945501/74d2567f-5fe2-4d89-95d2-e3aa7bb07830.png)
Base64でデコードしてみると、暗号が以下のようになりました。
```
b'd3BqdkpBTXtqaGx6aHlfazNqeTl3YTNrXzc4MjUwaG1qfQ=='
```

ここからシングルクオーテーションで囲まれた部分を取り出して
```
d3BqdkpBTXtqaGx6aHlfazNqeTl3YTNrXzc4MjUwaG1qfQ==
```
再び、Base64でデコードします

![interen_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945501/0d475405-e52b-4880-bd8c-2b34a12ed573.png)

すると、暗号が以下のようになりました
```
wpjvJAM{jhlzhy_k3jy9wa3k_78250hmj}
```
最後にROT13でデコードします。
今回は変化量を 13 → 19 にしました。理由は、先頭の「w」を「p」にするには、19個アルファベット順に動かす必要があるからです。

![interen_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3945501/66c59b15-a573-4f81-ace7-263e95c4da33.png)

これにて、FLAG
```
picoCTF{caesar_d3cr9pt3d_78250afc}
```

を獲得することができました。お疲れ様でした。


# もう少し考えてみる
今回の暗号が、なぜ Base64 だとわかったのでしょうか？
それは、今回の暗号の特徴がBase64の特徴に当てはまっていたからです。

Base64 の特徴
- A-Z, a-z, 0-9 （62 の文字と数字）
- ' + ' と ' / ' （2 つの特殊文字）
- = （パディングに使用される）
([Base64 に関して知っておくべきすべて](https://blog.logto.io/ja/all-about-base64)より引用）


# まとめ
今回の暗号は、Base64→Base64→ROT13 の順にデコードをすることでFLAGを獲得することができました。
暗号の特徴を見て、どの暗号に当てはまるかを見極めることがポイントでした。


# 補足
・なし
プログラミングが初めてでも大丈夫! Pythonで作るインベーダーゲームゲーム開発!

<h2>👾【1時間で完成】Pythonで作るインベーダーゲームが楽しすぎる！</h2>
<p>〜プログラミングが初めてでも大丈夫！Pythonでゲーム開発デビュー〜</p>

<p>こんにちは、韓国在住の日本人Sanaです。<br></p>

<p>IT初心者の方「ゲーム作りって難しそう…」と思っていませんか？
プログラミングを学び始めたばかりの頃、「何から手をつければいいか分からない」「コードを書いても成果が見えない」と感じたこと、ありませんか？

そんな方にこそおすすめしたいのが、Pythonでゲームを作るという学習法です！</p>

<hr>

<h3>🎮 初心者でもゲームが作れる！？</h3>
<p>Pythonを使って<strong>「スペースインベーダー風のゲーム」</strong>を1時間で完成！</p>

https://u.inf.run/4kPfjsj


<h4>✅ 私がこの講座をおすすめする理由</h4>
<ul>
  <li>Pythonの基本文法に自然に慣れることができる</li>
  <li>コードを書いて「動く結果」が見える</li>
  <li>何より楽しい！続けたくなる！</li>
</ul>

<p>「ゲームで楽しく学べるなら、Pythonへの苦手意識もなくなるかも…！」<br>
そんなきっかけになってくれたら嬉しいです:relaxed:</p>

<hr>

<h3>🐍 もっとPythonを使いこなしたい人へ</h3>
<p>1時間のゲーム開発講座でPythonの楽しさに触れた方には、次にこちらの講座もおすすめです！</p>

https://u.inf.run/4iAfRRg

<ul>
  <li>🧰 初心者向けでもやさしく解説されているので安心</li>
  <li>⏱️ 1〜2時間の短い動画でサクサク学べる！</li>
</ul>

<hr>

<p>今日は無料＋低価格で学べるPythonゲーム制作講座を紹介しました！<br>
　この2つの講座を通じて「Pythonって面白いかも！」と少しでも思ってもらえたら嬉しいです。</p>

<p>それでは、よいPythonライフを🐍✨<br>
（感想やフィードバックも大歓迎です！）</p>
React/TypeScriptでプロダクト選択フォームを作成＆カスタマイズしたまとめ

````markdown
# React/TypeScriptでプロダクト選択フォームを作成＆カスタマイズしたまとめ

## 概要
今日はReactとTypeScriptを使い、ECサイト向けの「商品選択フォーム」や「数量コントロール」、「ボタン共通コンポーネント」の実装と、細かいスタイル調整方法について学びました。さらに、Gitのpushコマンドの使い方も復習しました。

---

## 1. Inputコンポーネントのカスタマイズ

```tsx
type InputProps = {
  ...
  borderColor?: string
  borderWidth?: string
  borderRadius?: string
  backgroundColor?: string
  textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'
}

const Input = ({
  ...,
  borderColor = '#edeae2',
  borderWidth = '0.094rem', // 1.5px → rem変換
  borderRadius = '0.375rem', // 6px → rem変換
  backgroundColor = '#f8f6f2',
  textAlign,
}: InputProps) => {
  return (
    <input
      style={{
        ...,
        border: `${borderWidth} solid ${borderColor}`,
        borderRadius,
        backgroundColor,
        textAlign
      }}
      ...
    />
  )
}
````

**ポイント**

* `textAlign`や`borderColor`などをpropsで渡して自由にカスタマイズできるようにした。

---

## 2. ボタン共通コンポーネントの利用とリスト描画

```tsx
const buttonList = [
  { name: '今すぐに買う', variant: 'buyNow' },
  { name: 'カートに入れる', variant: 'addCart' },
  { name: 'カートへ', variant: 'gotoCart' },
] as const;

<div className={styles.buttonContainer}>
  {buttonList.map(btn => (
    <Button
      key={btn.name}
      name={btn.name}
      variant={btn.variant}
    />
  ))}
</div>
```

* `variant`とCSSクラス名を一致させることでスタイリングを統一。

---

## 3. CSSのrem単位変換＆box-sizing調整

```css
.container {
  width: 10.9375rem;    /* 175px */
  height: 16.5625rem;   /* 265px */
  box-sizing: border-box;
  ...
}
```

**ポイント**

* `box-sizing: border-box`でpaddingやborderを含めてサイズ調整がしやすくなった。
* px→remへの変換式：`1px = 0.0625rem`

---

## 4. 数量コントロール（QuantityControl）のonChange型問題対応

```tsx
<QuantityControl
  ...
  onChange={value => {
    if (typeof value === 'string') {
      const n = parseInt(value, 10)
      setRating(Number.isNaN(n) ? 1 : n)
    } else {
      setRating(value)
    }
  }}
/>
```

* `onChange`の型が`number | string`の場合、stringにも対応できるように変換処理を追加。

---

## 5. Gitのリモートブランチへのpushコマンド

```bash
git push origin feature/ProductSelectionForm:woo_gibeom
```

* ローカルの`feature/ProductSelectionForm`ブランチをリモートの`woo_gibeom`ブランチにpushする方法。

---

## まとめ・感想

React/TypeScriptでのフォームやコンポーネント設計は「柔軟なprops設計」「型安全性」「共通化」が重要だと感じました。
また、CSSのrem統一・box-sizing調整でレイアウト崩れも防げました。
今後も見た目と機能両面から「再利用性」と「保守性」を意識した設計を続けたいと思います。

---
ffmpegを使ってRTP送受信+V4L2経由で仮想デバイス化

ffmpegを使ってUSBカメラの映像をRTPで送信し、受け側ではV4L2経由で仮想デバイス化(USBカメラが付いているようにふるまう）する方法です。

# 1.RTPで映像送信する
## 1.1.必要ソフトウェアの準備
Ubuntu環境で下記をインストールします。
```
sudo apt update sudo apt install ffmpeg v4l-utils
```
v4l2をインストールすると、`v4l2-ctl --list-devices`コマンドで、接続されたUSBカメラを確認することができます。
## 1.2.カメラ映像のRTP送信
```
ffmpeg -f v4l2 -framerate 30 -video_size 1280x720 -i /dev/video0 \ -c:v libx264 -preset ultrafast -tune zerolatency -f rtp \ rtp://<DC_IP>:5004
```
- `<DC_IP>`：受信サーバIP
- `-f rtp`：RTP形式での出力   
- `rtp://` : UDP上のRTP送信。デフォルトでポート5004を使用

# 2.RTPで映像受信しV4L2経由で仮想デバイス化
## 2.1.v4l2loopback のインストール（仮想V4L2カメラ作成）
```
sudo apt update sudo apt install v4l2loopback-dkms
```
インストール後、仮想デバイスを作成します。
```
sudo modprobe v4l2loopback devices=1 video_nr=10 card_label="VirtualCam" exclusive_caps=1
```
上記コマンドの場合、`/dev/video10` に仮想カメラができます（`video_nr=10`）

## 2.2.GStreamer のインストール
```
sudo apt install gstreamer1.0-tools gstreamer1.0-plugins-base \
gstreamer1.0-plugins-good gstreamer1.0-plugins-bad gstreamer1.0-plugins-ugly
```
## 2.3.GStreamer パイプラインの例（RTP受信 → 仮想カメラ出力）
H.264形式のRTPを受信して仮想カメラに出力する例を示します。
```
gst-launch-1.0 -v udpsrc port=5004 caps="application/x-rtp, encoding-name=H264, payload=96" ! \
rtph264depay ! h264parse ! avdec_h264 ! videoconvert ! \
video/x-raw,format=YUY2 ! v4l2sink device=/dev/video10
```
適切なバッファリングが出来てない場合は、こちらを試してみてください。
```
gst-launch-1.0 -v udpsrc port=5004 caps="application/x-rtp, encoding-name=H264, payload=96" ! \
queue ! rtph264depay ! queue ! h264parse ! queue ! avdec_h264 ! \
queue ! videoconvert ! queue ! video/x-raw,format=YUY2 ! v4l2sink device=/dev/video10
```
私の場合、v4l2sinkでは、うまくいかなかったので、**fpsdisplaysink**でデコード状態を出力するようにしたら、いけました。
## 2.4.Cheese などで確認
```
cheese
```
設定メニューなどで `VirtualCam(/dev/video10)` を選べば、RTPで受信した映像が表示されるはずです。
各種LTをPodcast化しました。

# Speakerdeck にUpしたスライドをNotebookLMでPodcast化しました。

なお、MC_SEC_KB という表記が出てきますが、このスライドを作成した時のTwitterのIDです。
今は、_bou_3 に変更していますので、このIDは現状存在しません。

以下、Podcastと元になったスライドを載せていますが、新しいものｇできたら追記していきます。



---
## 古典で読み解くエクスプロイト　時そば編
![スクリーンショット 2025-06-02 17.49.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295123/177a982c-e1a2-40a2-af2d-3c175d671aee.png)

- スライド：https://speakerdeck.com/shumpei3/gu-dian-dedu-mijie-kuekusupuroito-shi-sobabian

- 音声（Spotify）：https://open.spotify.com/episode/2jYlElvk11I4k7i74WXrUA?si=bhNw-a3nSLy7-P9jbmFE4w


---
## サイバーキルチェーンで読み解く日本史上最大の標的型攻撃
![スクリーンショット 2025-06-02 17.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295123/027c4f5f-c07d-45bc-bc1c-c98be791a25c.png)

- スライド：https://speakerdeck.com/shumpei3/the-largest-targeted-attack-in-japanese-history-with-cyber-kill-chain-87f11cc9-eb33-4e42-b2e3-f712113b6d83

- 音声（Spotify）：https://open.spotify.com/episode/1FfO9mh0f839J65pke5U8n?si=9Iykq7jXTvG4Ys7alWeKnw

---
## 「ドラえもん のび太の宝島」で読み解く標的型攻撃

![スクリーンショット 2025-06-02 17.54.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295123/6db319d4-8289-44af-8433-3d9906c1ffb8.png)

- スライド：https://speakerdeck.com/shumpei3/advancedpersistentthreat-in-doraemonmovie-nobita-s-treasureisland

- 音声（Spotify）：https://open.spotify.com/episode/03rRpu7kcnhXrTxm9tqwH1?si=_JbajH7cQ_S2-1efWq1reg



---
## DataOpsハンズオンの設計と構築 

![スクリーンショット 2025-06-06 0.42.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295123/c865d124-4196-4cfe-b754-7d9cc7fa1f03.png)


- スライド：https://speakerdeck.com/shumpei3/design-and-build-about-dataops-hands-on

- 音声（Spotify）：https://open.spotify.com/episode/2KcCVbTNb6ODchswf3pavy?si=e_GbdSYWSQa823k6bWQt_g


---
## Exploit in Classic （古典で読み解くエクスプロイト　時そば編 の英語版）

![スクリーンショット 2025-06-08 10.50.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295123/dd66d188-0901-4ca1-a98c-c49aaa3b7399.png)


- スライド：https://speakerdeck.com/shumpei3/exploit-in-classic

- 音声（Spotify）：https://open.spotify.com/episode/5bfXBETTIBj0J8mkE6r1Bf?si=kVtxd6xxS3mfbnLTRyONwQ
Railsのnext_weekは「来週間」であって「来週」ではない

自分用の覚書

Railsではいろいろと便利な日付計算用のメソッドが用意されている。

https://api.rubyonrails.org/classes/DateAndTime/Calculations.html

---


その中でも`next_week`とか`prev_week`とかの、いかにも「来週（7日後）／先週（7日前）の日付を取得する」ように見えるメソッドがある

https://apidock.com/rails/v7.1.3.4/DateAndTime/Calculations/next_week

しかし実際にやってみると、ちょっと感覚とズレていた

```ruby
[1] pry(main)> date = Date.new(2025,6,1)
=> Sun, 01 Jun 2025
[2] pry(main)> date.next_week
=> Mon, 02 Jun 2025
```

来週の日曜日、つまり6月8日（Sun, 08 Jun 2025）が返ってくることを想定していたのに、実際には翌日の値が返ってきてしまった

これはRailsの初期値では`beginning_of_week`が`:monday`に設定されており、`next_week`の引数はこの値をデフォルトで受け取っている
この際のweekが「月曜日から始まり日曜日に終わる」という「週間」の意味になっており
　5/26(月) 〜 6/1(日)
　6/2(月) 〜 6/8(日)
　6/9(月) 〜 6/16(日)
といった形での捉え方がされているようだ

そのため6/1の「来週間」は、6/2 〜 6/8 となる
次のようにしてみると分かりやすい

```ruby
[1] pry(main)> ("2025-05-25".to_date .. "2025-06-02".to_date).each do |date|
[1] pry(main)>   puts "#{date} => #{date.next_week}"
[1] pry(main)> end
2025-05-25 => 2025-05-26
2025-05-26 => 2025-06-02
2025-05-27 => 2025-06-02
2025-05-28 => 2025-06-02
2025-05-29 => 2025-06-02
2025-05-30 => 2025-06-02
2025-05-31 => 2025-06-02
2025-06-01 => 2025-06-02
2025-06-02 => 2025-06-09
```

`next_week` は、来週間の始まりの日付を返すだけであって、来週の同じ曜日の日付を返すわけではない
引数に`:sunday`を渡してやったり、`config.beginning_of_week`を変更したりすれば、基準となる曜日が変わりはするが、本質的には変わらない



# 来週／先週の日付が欲しい場合
この場合は、大人しく`weeks_since` `weeks_ago`や`1.weeks` `7.days`とかをつかって計算しよう

```ruby
[1] pry(main)> Date.new(2025,6,1).weeks_since(1)
=> Sun, 08 Jun 2025
[2] pry(main)> Date.new(2025,6,1) + 1.weeks
=> Sun, 08 Jun 2025


[3] pry(main)> Date.new(2025,6,1).weeks_ago(1)
=> Sun, 25 May 2025
[4] pry(main)> Date.new(2025,6,1) - 1.weeks
=> Sun, 25 May 2025
```


# 次の◯曜日／前の◯曜日 が欲しい場合

## 参考
https://qiita.com/hotu_ta/items/4bd67c085cd46d71999b

```ruby
[1] pry(main)> Date.new(2025,6,1).next_occurring(:monday)
=> Mon, 02 Jun 2025
[2] pry(main)> Date.new(2025,6,1).next_occurring(:sunday)
=> Sun, 08 Jun 2025


[3] pry(main)> Date.new(2025,6,1).prev_occurring(:monday)
=> Mon, 26 May 2025
[4] pry(main)> Date.new(2025,6,1).prev_occurring(:sunday)
=> Sun, 25 May 2025
```



# 余談
じゃあDateクラス由来の`next_month`／`prev_month`、 `next_year`／`prev_year`は？　というと

https://docs.ruby-lang.org/ja/latest/class/Date.html

```ruby
[1] pry(main)> Date.new(2025,6,1).next_month
=> Tue, 01 Jul 2025
[2] pry(main)> Date.new(2025,6,1).prev_month
=> Thu, 01 May 2025


[3] pry(main)> Date.new(2025,6,1).next_year
=> Mon, 01 Jun 2026
[4] pry(main)> Date.new(2025,6,1).prev_year
=> Sat, 01 Jun 2024
```

うるう年も問題なさそう
```ruby
[1] pry(main)> Date.new(2024,2,29).next_year
=> Fri, 28 Feb 2025
[2] pry(main)> Date.new(2024,2,29).next_year(4)
=> Tue, 29 Feb 2028


[3] pry(main)> Date.new(2024,2,29).prev_year
=> Tue, 28 Feb 2023
[4] pry(main)> Date.new(2024,2,29).prev_year(4)
=> Sat, 29 Feb 2020
```

DateAndTime::Calculationsの`next_week`／`prev_week`の命名が悪いのでは……？
[Windows・Mac]Vim用にGoogle日本語入力をセットアップする

:::note ifo
設定の概要

- `esc`を押したときにIMEを無効化して英数字入力にする
- Insertモード日本語入力中に`esc`を二回押せばNormalモードに切り替わる
- Windows・Mac同様の設定で使える
:::

# Karabiner-Elementsではダメなのか？

Karabiner-Elementsで「単純に`Esc`キーが押されたときに半角入力になる」という設定をしていると、変換中に`Esc`キーを押すと、ターミナルとappleの日本語入力の両方に`Esc`が送られて単純に`Normal`モードに戻れないことが最近判明しました。

Karabiner-Elementsと日本語入力の両方が`Esc`キーを受け取っているのが問題そうなので、これをGoogle日本語入力で一元化すれば問題が解決しそうということでKarabiner-ElemensからGoogle日本語入力に切り替えました。

# Google日本語入力のインストール

公式サイトから普通にインストールします。

https://www.google.co.jp/ime/

## Macの場合

設定のキーボード欄からGoogleのひらがなとAlphanumericを選択して、Appleのデフォルトのキーボードを消します。

どうやらAlphanumericを追加してからでないと元のAppleのキーボードを消せない模様。
（常に英数字入力できることを保証するため？）

## Windowsの場合

`Win+Space`で入力を切り替えればGoogle日本語入力にできます。

# Google日本語入力の設定

Google日本語入力のアイコンをクリックするなどして設定を開きます。

キー設定で、`ecs`を押したときに「入力文字なし」のときに「IMEを無効化」する設定にします。

これで日本語を入力しているときに`esc`を二回押せばNormalモードに切り替えることができます。
day1-Y

-  Git Githubについて
   - アカウントの作成
- システム開発のスキル
- PowerShell
- VSCode

```
git clone https://github.com/***/***.git
(branch code copy)
git pull
git status
git add kuroda_add.txt
git commit -m "新しいファイル"
git push

git clone https://github.com/***/***.git
(branch code copy)
git pull
git branch
git fetch origin
git checkout (ブランチ名)
```
<br>

- PowerShellでGitを使いやすくする
  - posh-gitを有効化
  - git statusのフォント色を変える
<br>

-  [VSCode]Markdown PreviewをCSSで読みやすくする
   - 「Ctrl + Shift + P」で検索窓を出します
   - 「Markdown Preview Enhanced: Customize CSS」を入力してEnter
   - CSSを記述して保存
<br>

-  cliborダウンロードでコピペを簡単に
   - CTRL2回
<br>

- VSCodeでmarkdownとplantumlをコーディングできる環境を作成
  - シーケンス図の作成
    - 使い方の練習

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103496/cf7c11cb-f26d-4847-92f0-8154b9f00e84.png)


```
@startuml

title PC入出力シーケンス
header テストシーケンス
footer ページ %page% / %lastpage%



'上から順番に並ぶ
'ユーザ挿入はactor ユーザ

actor ユーザ
participant PC #99FF99
participant ディスプレイ
participant USB
participant CPU
box PC
participant 外付けHDD
participant ディスプレイアダプタ
participant プリンタ
end box


'条件分岐を定義
'alt条件分岐　最後にend
alt キーボード
    ユーザ -> PC : キー入力
else マウス    
    ユーザ -> PC : マウス入力
end

'分類子を中心に位置指定できる
note over 外付けHDD: 上部
note left ディスプレイ: 左側
note right プリンタ: 右側



ユーザ -> PC : <font color="blue">キー入力</font>
PC -> ディスプレイ : 文字
ディスプレイ -> ユーザ : 表示文字
ユーザ -> PC : キー入力
activate PC
note over PC : 処理中
PC -> プリンタ : データ送信
deactivate PC
プリンタ -> ユーザ : 印刷処理


@enduml

'改行したい場合には、「\n」を入れる。
'カラーコード変更　participant プリンタ #99FF99
'フォントの色HTMLのfontタグで指定 ユーザ -> PC : <font color="red">キー入力</font>
```
AWSのS3においてファイルサイズの上位をCLIで見る方法

# やりたいこと
S3の特定ディレクトリにファイルがたくさん格納されている。
そのファイルのうちサイズが大きいものをCLIで取得したい。

- S3の特定ディレクトリのファイル一覧が欲しい
- ファイルサイズの昇順でソートしたい
- ファイルサイズが大きい上位5件だけほしい

# S3においてファイルサイズの上位をCLIで見る方法
`aws s3 ls`のオプションにはなさそうなので他ののコマンドを合わせて使用する。

```bash
$ aws s3 ls s3://{バケット}/{ディレクトリ}/ --recursive | sort -k3nr | head -n 5
2025-05-30 10:10:00      987654321 large-document-1.zip
2025-05-30 10:15:00      876543210 large-document-2.zip
2025-05-31 08:20:00      765432109 large-document-3.zip
2025-05-29 10:25:00      654321098 large-document-4.zip
2025-05-30 02:00:00      543210987 large-document-5.zip
```

## recursive
`--recursive`を指定して全部ディレクトリではなくファイルを表示する。
それにより「1.日付」「2.時間」「3.サイズ」「4.ファイル名」が一覧で表示できる

> **recursive**
> このオプションを使用すると、指定のディレクトリ内またはプレフィックス内のすべてのファイルやオブジェクトに対してコマンドが実行されます。
> 引用 : [Using high-level (s3) commands in the AWS CLI - AWS Command Line Interface](https://docs.aws.amazon.com/ja_jp/cli/v1/userguide/cli-services-s3-commands.html#using-s3-commands-managing-objects-param)

## sort
`sort`にオプションをつけて「サイズの昇順」に並べる

- k : ソートのキーになる位置
    - 「k3」で「3.サイズ」を指定する
- n : 数値として扱う
    - キーになる値を数値として扱うために、「n」を指定する
- r : 昇順にする

## head
`head`にオプションをつけて「先頭の指定件数を取得する」

- n : 取得する件数
    - 「n 5」で5件取得する
【未来予想】学習指導要領が改訂、「国語」と「英語」が7割に？生成AI時代の教育改革とは

「AIが宿題をやってくれるなら、僕たちは“お願いの仕方”を学べばいいじゃない？」——とある中学生の叫びより。

要旨（Abstract）

近い将来、日本の教育改革により、全国の学習指導要領のうち約70％が「国語」と「英語」の学習に割り当てられるという仮説的なシナリオが展開される。本稿では、社会全体に広がる生成AI依存が言語表現の価値をどのように変容させたかを起点に、教育の再構築に至る流れを探る。リテラシー低下の傾向、AIの社会的定着、小中高における「プロンプト力教育」の設計と効果について分析する。結論として、プロンプトリテラシーは単なる技術ではなく、AI時代における人間の基礎能力であることを提言する。

1. はじめに

生成AIの急速な普及により、世界中で人間の認知、創造、コミュニケーションの再定義が始まっている。日本でも例外ではなく、教育はその最前線に位置づけられている。コードの記述からビジネス文書の作成まで、ひとつのプロンプトで完了できる時代において、重要なのは「自分でできること」ではなく、「やりたいことをどう依頼するか」に移行しつつある。

本稿では、「国語」と「英語」が学校教育の7割を占めるという架空の政策を通して、「できる力」から「伝える力」への教育のパラダイム転換を論じる。

2. 社会的背景：AIの定着と言語力の危機

2.1 リテラシーの現状

文化庁の2023年調査によると、月に1冊も本を読まない若者が60％を超える。

教師の現場感覚では、「比喩が伝わらない」「抽象語の理解が難しい」などの声が増加。

TikTokやYouTube Shortsといった短尺動画による情報摂取の影響で、持続的な思考・表現の機会が減少。

2.2 AIの社会的浸透

ChatGPT、Claude、Geminiなどの生成AIは、家庭・職場・学校に標準装備されつつある。

しかし、その能力は「与えられたプロンプトの質」に強く依存する。

もはや技術の壁ではなく、言語表現の明確さと深さが成果を分ける時代に入った。

3. 架空政策：学習指導要領の70％を言語に再配分

仮想の「第658回 教育制度改革合同審議会」にて、文部科学省が次のように発表したとする：

「202X年度より、全国の小中高すべてのカリキュラムのうち、70％を国語と英語に再編成します。目的は、AIに意図・感情・論理を正確に伝える『プロンプト建築士』を育成することにあります。」

このフィクションは、「言語＝命令インターフェース」となる未来の学びの姿を予示するものである。

4. 学校教育の再設計：プロンプトリテラシーの年齢別実装

4.1 小学校：「感情と言葉の芽生え」

目標：

「うれしい」「こまった」など、感情や願望を短い言葉で表現する

話しかけるようにAIに頼る体験を通じ、言葉の意味と影響を学ぶ

国語の授業例：

「明日は遠足。晴れてほしい気持ちをAIに伝えてみよう」
「あしたてんきになってください。たのしみにしています！」

英語の授業例：

"Please help me do my homework. I am sleepy."

文法よりも「伝える意志」を重視し、子どもたちは「通じる喜び」を体験する。

4.2 中学校：「文脈と意図の表現」

目標：

状況、理由、感情をセットで表現する力を身につける

AIの応答をもとに「どう伝えればもっと意図が届くか」を考える

国語の授業例：

「今週イライラしたことをAIに説明して、なぐさめてもらおう」

英語の授業例：

"I failed my test. Can you tell me something that makes me feel better?"

この段階で、プロンプトの「リライト」や「フィードバック反映」の概念が導入される。

4.3 高校：「言葉による設計と共創」

目標：

課題・背景・目的・感情を組み込んだ構造化プロンプトの作成

AIを「創作・計画のパートナー」として活用できる言語力の育成

国語の授業例：

「生徒会長として、予算削減からクラブ活動を守るため、AIに説得文を依頼するプロンプトを作成せよ」

英語の授業例：

"I am applying for an international scholarship. Help me write a persuasive motivation letter based on my values and achievements."

表現のトーン、感情の強度、想定する受け手を明示する訓練が行われる。

5. 社会的影響：この改訂がもたらす変化

この教育改革は単なるカリキュラムの変更にとどまらず、社会構造そのものを変える可能性を秘めている。

職場でのAI連携が加速：プロンプトの質が生産性を左右

民主参加の形が変わる：市民がAIを通じて政策提言・署名活動を展開

創造の再定義：絵・文章・音楽などが「プロンプトによる創作」へと移行

教育格差の懸念：プロンプトスキルの習熟度が格差の新たな要因に

「AIを使える人」ではなく、「AIと話せる人」が評価される社会へと変容する兆しである。

6. 結論

言語はかつて、感情と知識を伝える手段だった。だがAI時代において、それは「命令と設計のインターフェース」となる。

生成AIが社会の基盤になるほど、「プロンプト力＝社会参加の基礎力」として再定義される。

読み書きのリテラシーから、「問い、依頼し、共創する」リテラシーへ。

この仮想的な改革案は、私たちが直面している現実の写し鏡である。未来を形作るのは、明確に話せる者——人に対してだけでなく、アルゴリズムに対しても——なのかもしれない。

執筆手法について（Methodology）

本記事はすべて、ChatGPTへのプロンプト指示のみによって構成されている。構成・論理展開・語調調整も自然言語でのやり取りを通じて生成された。

記事そのものが「プロンプト力」の実践例であり、本稿が主張する価値を体現している。
【ChatGPT】古い白黒写真を復元してみました。完璧ではありません。


　どうも、カーブミラーです。

　今回は、古い白黒写真を復元してみました。完璧ではありません。

:::note info
本記事は、ChatGPT（Plus版）
で行なっております。
画像はあります。　あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　こちらも載せますね。
　　[ChatGPTが使えない？ログインできない・反応しない原因やエラー時の対処法を解説](https://aismiley.co.jp/ai_news/chatgpt-error-resolution-explanation/)
***
　著作権法については
　　こちらを参照するのが
　　　良いのではないかと。

　文化庁レポートをもとにした
　　著作権法についての動画（約20分）
　　　[かいちのAI大学　【警告】ChatGPTの画像生成は危険です...【4o Image Generation】](https://youtu.be/8VLUnG-iyo0?si=rAfjMboqmNqppDGq)
***
　さっそく、【本題】です。

　今回は、
　　古い白黒写真を
　　　復元してみました。

　まずは
　　元となる白黒写真をどうぞ。
　　　出典はこちら。
　　　　[AI Gardenさん](https://x.com/aigardenart/status/1929178081886884094?t=xErYWhYAMeJLaCKNOQJYDQ&s=19)

![20250602_140649.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/ff956d5e-c743-4a2c-845f-74cddc265cba.jpeg)


　ごらんのとおり、
　　かなり傷んでいますし、
　　　画質が粗いので、
　　　　復元というよりは
　　　　　想像に近いものになります。

　ちょっと時間（２時間くらい）を
　　掛けて、やってみた結果、
　　　一部が気になる程度には
　　　　復元できました。

　それがこちらです。
![file_00000000df44623087b6cad321fe0817.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/23b7f21e-6421-47d4-8722-df341fda9723.png)


　どうでしょうか？
***
　さて、
　　どうやったのかを
　　　説明します。

　まずは、
　　単純に写真をアップロードして
　　　下記のPromptでやりました。
```Text:最初の復元Prompt
古い写真です。
現像された直後の状態に戻して欲しい。
```

　ですがこれだと
　　左から２番目の人物が
　　　老人になってしまいました。

　　おそらく、
　　　帽子を白髪頭と
　　　　捉えたのでしょう。

　なので
　　“アメリカ海軍の人物”ということを
　　　付け加えてみました。

　　無事に出てきました。

　次に問題視したのは、
　　その右の人物。

　　復元すると
　　　本を持った女性になりました。
　　　　服装からですね。

　　この服装がよくわからない。

　　いろいろとやって
　　　エプロンだと気付きました。
　　　　それもオリジナルの。

　　その情報も
　　　Promptに含めました。

　さて、
　　右側の男性です。
　　　復元すると
　　　　若い男性になりました。

　　しかし、
　　　恰幅からいくと
　　　　どうやら水兵さんの
　　　　　父親ではないかと。

　そうしたこととともに
　　新たな情報として
　　　写真の画質に出てきたので
　　　　それを追加します。
***
　ここまでは
　　GPT-4oでした。

　ここからは
　　OpenAI o3を使います。

　上記で得られた情報を
　　Promptとしてまとめました。
```Text:次の復元Prompt
古い写真です。  
現像された直後の状態に戻して欲しい。  
  
撮影年代・場面	1940〜50年代。海軍に所属する兄（B）が一時帰省し、家族や親しい人物と庭で記念撮影。    
被写体配置	A＝左端：若い女性／ B＝水兵服：男性（兄）／ C＝“中右”：女性。白と黒の独自デザインで腰ひも付きエプロンをしている。スカートではなく、Bと似たズボンを履いている。／ D＝右端：男性（Bの父親かも）    
    
原板の問題	強い粒状ノイズ、スキャン縞（水平線）、ハイライト飛び。    
```

　これを使用して
　　ようやく海兵さんも
　　　ほかの人たちもよくなりました。

　しかし、
　　エプロンだけはダメ。

　エプロンに集中して
　　なるべく近い状態に
　　　持っていきました。

　出来上がったのが、
　　２番目の画像です。

　画像のPromptがこちら。
```Text:生成画像に近い描画Prompt
1940年代の白黒ファミリーフォト。中判フィルム風。芝生の上に立つ4人を木々の葉陰が包み、夕方のやわらかな光が当たる。  
左から──  
・袖なしの膝丈ワンピースとアンクルソックスを身に着け、穏やかに微笑む若い女性。  
・ネイビーブルーの制服と白い「ディキシーカップ」帽を被ったアメリカ海軍水兵。隣の人物にそっと腕を回す。  
・黒のノースリーブ・ベスト（胸に左右対称の白い矩形パネル2枚、腰にも同幅で上下2枚。中央を横切る黒い帯で上下が区切られている）と共布の黒ズボンを着た中年女性。温かな笑顔。  
・袖をロールアップした薄色ボタンダウンシャツと濃色スラックスの男性。落ち着いた表情。  
正面からの全身ショットで被写体は中央に等間隔で並び、背景は柔らかくボケる。  
銀塩プリントらしい滑らかな階調。修復済みで粒状ノイズや傷はなく、自然な淡い影が残る。
```

　さすがに
　　時間の掛けすぎですね。
　　　これが商売ならば
　　　　アリでしょうが😅

　また、
　　写真のアップスケールの方が
　　　いいのかもしれませんね。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
タイルの敷き詰め



Paizaの練習問題で「高さ H・幅 W の箱を 2×2 のタイルでピッタリ敷き詰められるか？」に挑戦した！
0 の時を考えてなくてミスった…。
問題概要

高さ`H`、幅`W`の箱を、2×2 のタイルで隙間なく敷き詰められるかを判定する。

<br>

入力例：

    6 2

出力例：

    YES

<br>

https://paiza.jp/works/mondai/conditions_branch/conditions_branch__complex_step8

<br><Br><br>

## ❌NG例
```js
const rl  = require('readline').createInterface({input:process.stdin});

rl.once('line', (input) => {
    const [H, W] = input.split(' ').map(Number);

    // 高さと幅が「条件を満たしていれば大丈夫」と思い込んだ
    if(H % 2 === 0 && W % 2 === 0){
        console.log('YES');
    } else {
        console.log('NO');
    }

    rl.close();
});
```

👉 この書き方だと、高さや幅が `0` でも条件を満たしてしまうので、タイルが置けないのに「`YES`」って出力しちゃう！

<br><br>

## ✅OK例
```js
const rl  = require('readline').createInterface({input:process.stdin});

rl.once('line', (input) => {
    const [H, W] = input.split(' ').map(Number);

    // 高さか幅が0なら、タイルは置けない
    if(H === 0 || W === 0){
        console.log('NO');
        return;
    }

    // 高さも幅も2の倍数なら、タイルをピッタリ敷き詰められる
    if(H % 2 === 0 && W % 2 === 0){
        console.log('YES');
    } else {
        console.log('NO');
    }

    rl.close();
});
```

<br><br>

## ✏️気づきメモ・まとめ


- 大事なのは「2の倍数」かどうか。タイルのサイズが 2 だから、その単位でピッタリ合わないとスキマが生まれちゃう。
<Br>
 
- 高さや幅が 0 でも「2の倍数判定」には引っかかるから、まず0かどうかを先にチェックして「NO」にするのがポイント。
- 

<br><br><br>[僕の失敗談(´;ω;｀)と解決法🐈](https://paizabeginner.wordpress.com/2025/06/02/paiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%ef%bc%9a%e3%82%bf%e3%82%a4%e3%83%ab%e3%81%ae%e6%95%b7%e3%81%8d%e8%a9%b0%e3%82%81/)
JavaScriptの「オブジェクト」「リテラル」「インスタンス」「new」を学び直した。

JavaScript学習を進める中で「リテラルとインスタンスの違いって何？」「new はいつ使えばいいの？」という初歩的謎が気になり学び直しました。
この記事では、オブジェクトや関数などの基本型に焦点をあてながら、リテラルで良い場合と new が必要なケースの判断基準を、わかりやすく整理してみます。
### 💡そもそも「オブジェクト」とは？
JavaScriptにおいてオブジェクトとは、**複数の値（プロパティ）や処理（メソッド）をひとまとめにしたデータの集合体**です。
```
const car = {
  brand: "Toyota",      // プロパティ
  drive: function() {    // メソッド
    console.log("Driving...");
  }
};

car.drive();     // => Driving...
```
ここで `car` はオブジェクト、`brand` はプロパティ、`drive` はメソッドといえます。
### 💡JavaScriptの「リテラル」と「コンストラクタ構文」

JavaScriptでは、**同じようなオブジェクトを「リテラル」でも「new（コンストラクタ）」でも書くことができます。**

##### オブジェクトの例：
```
// リテラル構文（おすすめ）
const obj1 = {};

// コンストラクタ構文（非推奨）
const obj2 = new Object();
```
どちらも同じ Object を生成しますが、**シンプルで読みやすいリテラルの方が推奨されます。**
##### ✏️ 主な型と書き方の比較表
<table>
<thead>
<tr><th>データ型<th>リテラル表現<th>コンストラクタ構文<th>推奨される方法<th>備考　
<tbody>
<tr><tr><td>Object<td>{} <td>new Object()<td>✅リテラル<td>読みやすくて簡潔
<tr><tr><td>Array<td>[]<td>new Array()<td>✅リテラル<td>newは引数の扱いが微妙
<tr><tr><td>String<td>"abc"<td>new String("abc")<td>❌非推奨<td>newはラッパーオブジェクトになる
<tr><tr><td>Number<td>123<td>new Number(123)<td>❌非推奨<td>同上
<tr><tr><td>Boolean<td>true<td>new Boolean(true)<td>❌非推奨<td>同上
<tr><tr><td>Function<td>function() {}　　　　または ()=>{}<td>new Function(...)<td>✅リテラル<td>newは危険・非推奨
<tr><tr><td>Date<td>なし<td>new Date()<td>✅newを使う<td>インスタンスが必要
<tr><tr><td>RegExp<td>/abc/<td>new RegExp("abc")<td>両方OK<td>動的なら new
</table>

### 💡ラッパーオブジェクトに注意！
`new String()`のような書き方をすると、「文字列オブジェクト」が生成されてしまい、プリミティブ文字列とは異なる挙動になります。
```
const str1 = "hello";             // プリミティブ
const str2 = new String("hello"); // オブジェクト

console.log(typeof str1);        // => string
console.log(typeof str2);        // => object

console.log(str1 === "hello");   // true
console.log(str2 === "hello");   // false ← 注意！
```
#### ✅ 原則として：
##### ・プリミティブ型はリテラルで使う！
##### ・ラッパーオブジェクトは使わない！

### 💡new を使うべきケースは？
#### ✅ 使うべきもの
・`new Date()`：日時のインスタンスが必要
・`new RegExp()`：正規表現を動的に作りたいとき
・`new Error()`, `new Map()`, `new Set()`：明確なインスタンス生成が必要
#### ❌ 避けるべきもの
・`new Object()` → `{}` に置き換える
・`new Array()` → `[]` に置き換える
・`new String()`, `new Number()`, `new Boolean()` → リテラルで！

### 💡 Functionコンストラクタは原則NG！
```
const fn = new Function("a", "b", "return a + b");   // ⚠️ 非推奨
```
**理由：**
・セキュリティリスク（コードインジェクションなど）
・デバッグしづらい
・グローバルスコープ依存で予測困難
#### ✅ 書くならこう
```
const fn = (a, b) => a + b;   // ✅ 安全・簡潔！
```

#### ✏️判断のポイントまとめ
1. リテラルで書ける？ → **YES** → リテラルでOK！
↓ **NO**
2. 状態を持つ必要あり？（例：日付、`Map`） → **YES** → `new` を使う
3. 静的メソッドだけ使う？（例：`Math`, `JSON`） → `new` 不要

### ✨ まとめ：JavaScriptでは「シンプル」が正解！
JavaScriptでは、余計なインスタンス化をせず、**シンプルなリテラルを使うことが基本です。**
そのほうが安全・可読性が高く、パフォーマンスにも優れています。


「なんとなく使っていた `new` は、本当に必要だったのか？」と問い直し、理解を深める一歩になりました。

この記事が、コードの書き方や設計を見直すヒントになれば嬉しいです。
お風呂場での快適開発環境構築2025年版

# 概要

お風呂にゆっくりくつろげる環境って幸せですよね。半身浴しながら本格的なソフトウェア開発をできる環境があればもっと幸せなはず。かといって防水性能のないのMacbookやWindowsラップトップを持ち込むのは危険ですだし、タブレットOSでは本格的な開発ができない。

この記事は、防水AndroidからリモートデスクトップでWindows環境へ接続するための最適な組み合わせ紹介記事です。

![IMG_7723.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99370/da48f1ed-6dde-40ab-8855-25635e21fc53.jpeg)

## 環境構築の概要

クライアント端末：防水Androidタブレット（Galaxy Tab S10 FE+）
マウス：防水スマホ+アプリ（Bluetooth Keyboard & Mouse）
キーボード：Pebble Keys 2 K380s
リモートデスクトップ：Chrome Remote Desktop（カーテンモードON）
リモートホスト端末：WIndows 11 Pro

## ハードウェア

### 防水Androidタブレット

Android OSを搭載した防水端末がいくつか各社から発売されています。2025年4月に発売されたGalaxy Tab S10がおすすめです。私は画面の大きいGalaxy Tab S10 FE+を利用しています。SamsungのGalaxyシリーズはDeXというデスクトップモードが用意されており各種Androidアプリをデスクトップアプリとして利用することが可能です。

![DeXの説明 Samsung公式サイトより](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99370/aa7b9240-fe41-470e-82d4-134110daf4a1.png)

https://amzn.to/4jEPmuA



### マウス

Android防水スマホをBluetoothマウスにするアプリであるBluetooth Keyboard & Mouseが便利です。お手持ちのスマホを防止マウス&キーボードにしてしまいましょう。私はマウス（トラックパッド）としてのみ利用しています。

![BluetoothMouseAndKeyboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99370/430d869c-1f6b-4dee-944b-050a40ca9f52.png)

https://play.google.com/store/apps/details?id=io.appground.blek&hl=ja


### キーボード

キーボードは防水ではなく、ワイヤレスキーボードPebble Keys 2 K380sの英字配列版を利用しています。使い慣れたキータッチのものを使いたいという理由以外に、下記の問題を回避するためです。水濡れで故障した場合は買い替えましょう。

- Androidでは外付けキーボードのファンクションキーがデフォルトでは音量変更や検索などの機能が割り当てられていてOS側でF1からF12キーに変更することができない。 
- Pebble Keys 2 K380sは、「Fnキー」と「ESCキー」を同時に長押しすることで、ソフトウェアでなくハードウェアレベルでファンクションキーのデフォルトの設定を変更。 
- 英字配列キーボードの場合：ハードウェア - 一般設定 - ハードウェアキーボード -  Pebble Keys2 K380sでEnglishも日本語も英語（アメリカ）キー配列に設定
- ハードウェア - 一般設定 - ハードウェアキーボード -  キーをカスタマイズ
    - 「Cmd」を「なし」に設定 => Chrome Remote Desktopホスト側ででWindows キーとして機能するようになる
    - 「ESC」を「なし」に設定 => Chrome Remote Desktopで全画面表示終了せずにホスト側でESCとして機能するようになる

![KeySettings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99370/a71432eb-ff6a-40cc-9919-724ea2cae12b.png)


Pebble Keys 2 K380s
![Pebble  K380s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99370/ce2142e4-f642-4ed7-be3d-0938c18b7d17.png)

https://amzn.to/4kK4dEI


### 手元のタオル
手についた水や汗を拭き取るために必須


## リモートデスクトップ

いつも利用しているVS CodeやUnityをお風呂でも利用したいため、自分のデスクトップPCへリモート接続して利用しています。いくつか試してみましたが、下記の設定を行ったうえで、私はChrome Remote Desktopを利用しています。（マイクロソフト製のWindows Appは漢字変換との相性が悪かった）

- ホスト：Windows 11 Pro
- リモートデスクトップソフトウェア：Chrome Remote Desktop

### カーテンモード設定

#### メリット
Chrome Remote Desktopのカーテンモードを有効にすることで
- リモート接続中にホストPCの画面がロック状態になるので物理的に覗き見されない
- 接続がRDP経由になるため、ホストの接続モニタの解像度に依存せずクライアントの環境に適した解像度で接続できる

#### 設定方法

下記のページを参考に設定を行う

https://atmarkit.itmedia.co.jp/ait/articles/2109/29/news029.html

1. リモートデスクトップ - リモートデスクトップを有効にする -> ON
2. リモートデスクトップ - コンピューターの接続にネットワーク レベル認証の使用を求める -> OFF
3. レジストリの変更
4. Chromeを再起動する

```
reg add "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations\RDP-Tcp" /v SecurityLayer /t REG_DWORD /d 1 /f

reg add HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome /v RemoteAccessHostRequireCurtain /t REG_DWORD /d 1 /f
```

# 最後に
みなさん、水分をきっちり補給してよい開発ライフを
Ciscoで定義されているアドレス

Ciscoルータでは、NATに関してIPアドレスを**内部ローカルアドレス、内部グローバルアドレス、外部ローカルアドレス、外部グローバルアドレス**といったように定義している。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387980/64902ba2-4b9f-405c-92de-1df0ee1cbfc4.png)
【備忘録】Raspberry Pi 5 で GitHub に一時的に SSH接続する方法（履歴を残さず安全に運用）

## 📝 はじめに

こんにちは、piyovateです！
Raspberry Pi 5 を使って GitHub に一時的に接続したいとき、

- Git のユーザー情報や履歴を残したくない  
- 作業後に SSH 鍵や設定をすべて消したい  
- 一時的に clone/push だけできればいい  

という用途に向けた **ミニマルかつセキュアな Git 設定手順**を紹介します。完全な備忘録スタイルです。

---

## ✅ 1. Git のインストールと仮ユーザー設定

```bash
sudo apt update
sudo apt install git -y
```

Git で commit するには、ユーザー名とメールの設定が必要です。設定していないと以下のようなエラーが出ます：

```
Author identity unknown
*** Please tell me who you are.
fatal: unable to auto-detect email address
```

以下のように設定して回避します：

```bash
git config --global user.name "Temporary User"
git config --global user.email "temp@example.com"
```

プロジェクト単位でのみ設定したい場合：

```bash
cd your-project
git config user.name "Temporary User"
git config user.email "temp@example.com"
```

---

## 🔐 2. SSH鍵の作成（パスワード付き）

```bash
ssh-keygen -t ed25519 -C "temp@example.com"
```

以下のように入力してパスワード（パスフレーズ）を設定します：

```
Enter file in which to save the key (/home/pi/.ssh/id_ed25519): [Enter]
Enter passphrase (empty for no passphrase): ********
Enter same passphrase again: ********
```

---

## 🔗 3. GitHub に鍵を登録

```bash
cat ~/.ssh/id_ed25519.pub
```

上記コマンドで表示される公開鍵をコピーし、  
GitHub → **[Settings] → [SSH and GPG keys] → [New SSH key]** にペーストして登録。

---

## ✅ 4. 接続確認

```bash
ssh -T git@github.com
```

以下のように表示されれば接続成功です：

```
Hi your-username! You've successfully authenticated, but GitHub does not provide shell access.
```

---

## 🚀 5. リポジトリ操作（clone / push）

### 既存のリポジトリを clone：
```bash
git clone git@github.com:yourname/your-repo.git
```

### 新規作成して push（必要に応じて）：
```bash
mkdir test-repo && cd test-repo
git init
touch README.md
git add .
git commit -m "initial commit"
git remote add origin git@github.com:yourname/test-repo.git
git push -u origin master
```

---

## 🧹 6. 作業後の削除（痕跡を残さない）

| 削除対象        | コマンド・操作                             |
|------------------|--------------------------------------------|
| GitHub 上の鍵      | GitHub → Settings → SSH Keys → 削除       |
| ローカル SSH 鍵   | `rm ~/.ssh/id_ed25519*`                    |
| Git設定の削除     | `git config --global --unset user.name`<br>`git config --global --unset user.email` |

---

## 📌 おわりに

最低限の設定で GitHub に一時的に接続し、作業後はすべて削除して安全に終える運用フローでした。  
ちょっとした検証や一時的な clone/push に便利です。

やってることは通常通りですが、久しぶりに git の初期設定をしたのでまとめておきました。  
誰かのお助けになれれば幸いです。
トランスフォーマーを支える数理構造：サイン波・ソフトマックス・活性化関数・誤差逆伝播・合成関数の微分・正規分布


## はじめに

トランスフォーマー（Transformer）モデルは、自然言語処理（NLP）や時系列予測などの領域で中心的に利用されている。その成功の背後には、複数の**数学的構造**の相互作用がある。本稿では、以下の要素を焦点にその数理的意味を整理する。

---

## 1. サイン波：位置エンコーディングと周期性

トランスフォーマーでは畳み込みや再帰的構造を持たないため、系列中の**位置情報**をサイン波でエンコードする：


$$
\text{PE}_{(pos, 2i)} = \sin\left(\frac{pos}{10000^{2i/d}}\right),\quad
\text{PE}_{(pos, 2i+1)} = \cos\left(\frac{pos}{10000^{2i/d}}\right)
$$


これはFourier級数の一部としても解釈でき、周期的情報を抽出可能にする。さらに、**微分可能**であるため、後述の勾配伝播とも整合性を持つ。

---

## 2. ソフトマックス関数：確率分布への正規化

自己注意機構では、スコア行列 $QK^\top$ にソフトマックス関数を適用して、重みを確率分布として解釈する：

$$
\text{softmax}(z_i) = \frac{e^{z_i}}{\sum_j e^{z_j}} \quad \text{with} \quad \sum_i \text{softmax}(z_i) = 1
$$

この性質により、注意重みは「全体の中でどこにどれだけ注目するか」という**確率的解釈**が可能となる。

---

## 3. 活性化関数：非線形写像の導入

各層に挿入される活性化関数は、ニューラルネットワークに**非線形性**をもたらし、表現能力を飛躍的に高める：

* **ReLU**: $\text{ReLU}(x) = \max(0, x)$
* **GELU**:

  $$
  \text{GELU}(x) = x \cdot \Phi(x) = x \cdot \frac{1}{\sqrt{2\pi}} \int_{-\infty}^x e^{-\frac{t^2}{2}} dt
  $$

GELUは正規分布の累積分布関数（CDF）を使うため、ここで\*\*確率積分（＝1）\*\*が数学的に関与している。

---

## 4. バックプロパゲーション：誤差の逆伝播

学習は誤差関数 $L$ を各パラメータ $\theta$ について微分することで実現される：

$$
\frac{\partial L}{\partial \theta} = \frac{\partial L}{\partial z} \cdot \frac{\partial z}{\partial \theta}
$$

この伝播はすべて\*\*連鎖律（chain rule）\*\*に基づき、勾配が前方の関数構造を通って伝播する。

---

## 5. 合成関数の微分：chain rule の応用

トランスフォーマーは、線形変換・活性化関数・Softmax などの合成で構成されている：

$$
f(x) = f_n(f_{n-1}(\cdots f_1(x)))
\Rightarrow
\frac{df}{dx} = \frac{df_n}{df_{n-1}} \cdots \frac{df_2}{df_1} \cdot \frac{df_1}{dx}
$$

これが\*\*誤差逆伝播（BP）\*\*の数理的基盤である。

---

## 6. 正規分布と確率の積分 = 1 の意味

活性化関数（例：GELU）や損失関数（例：KL divergence）では、正規分布などの\*\*確率密度関数（PDF）\*\*が関与する。

正規分布の性質：

$$
\int_{-\infty}^{\infty} \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x - \mu)^2}{2\sigma^2}} dx = 1
$$

この「**積分 = 1**」は、**Softmaxの総和 = 1** と同様に、**確率解釈**を与える上で本質的に重要である。

---

## まとめ：Transformerの構成要素と数理

| 構成          | 数学的役割           | 確率・解析との関係     |
| ----------- | --------------- | ------------- |
| サイン波        | 周期関数・Fourier基底  | 微分可能な位置表現     |
| ソフトマックス     | 確率分布への正規化       | 総和 = 1（確率解釈）  |
| 活性化関数       | 非線形性の導入         | GELUは正規分布の積分  |
| バックプロパゲーション | 勾配の逆伝播          | 合成関数の微分       |
| 合成関数の微分     | 連鎖律（chain rule） | 誤差を各パラメータに伝播  |
| 確率の積分 = 1   | 正規分布・GELU・損失関数  | 正則化・信頼度計算に不可欠 |

---

## おわりに

トランスフォーマーの構造は、単なる深層学習モデルというよりも、**連続解析・確率論・線形代数・微積分**の交差点に立つ**統合的な数理モデル**である。
それぞれの関数・構造の数学的背景を理解することは、実装・応用・拡張のすべてにおいて本質的である。

---
GitHub ActionsでZ80アセンブル

なんとなく思いつきで~~Geminiさんに作ってもらいました~~作ってみました。
アセンブラは [AILZ80ASM](https://github.com/AILight/AILZ80ASM) を使っています。ありがとうございます！

# リポジトリ
https://github.com/fuzz6001/test_z80_actions

# ワークフロー
プルリクすると走ります
```yaml:z80.yaml
name: Z80 Assembly CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v4

    - name: Install assembler
      run: |
        wget https://github.com/AILight/AILZ80ASM/releases/download/v1.0.29/AILZ80ASM.linux-x64.v1.0.29.zip
        unzip AILZ80ASM.linux-x64.v1.0.29.zip
        chmod +x AILZ80ASM
        sudo mv AILZ80ASM /usr/local/bin/

    - name: Assemble
      run: |
        AILZ80ASM test.asm -o out.bin

    - name: Upload artifacts
      uses: actions/upload-artifact@v4
      with:
        name: z80-binary
        path: out.bin
```

# テスト結果
## 入力
[[PC-6001] カートリッジから起動する](https://qiita.com/fuzzball/items/d68b99cdf362470d93ee) より
```z80:test.asm
        org     $4000
        db      'AB'
        dw      entry

entry:
        ld    a,'@'
        ld    ($821F),a
        ret
```

## 出力
```txt:out.bin
Offset(h) 00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F
00000000  41 42 04 40 3E 40 32 1F 82 C9                  
```
larastanの導入方法

## はじめに
larastanは、laravel向けのPHP静的解析ツールです。コードの品質を向上させ、バグの発見や問題を事前に発見することができます。型チェックやメソッドの存在確認、変数の使用状況など、様々な観点からコードを分析してくれます。

>公式引用:Adds code analysis to Laravel improving developer productivity and code quality.
>(deepL:Laravelにコード解析を追加し、開発者の生産性とコード品質を向上させます。)

## 導入

#### インストール

php8.2+ & laravel 11.15+は 3.0 利用可能
composer require --dev "larastan/larastan:^3.0"

https://github.com/larastan/larastan

#### 設定ファイル作成

アプリケーションのルートに`phpstan.neon`または`phpstan.neon.dist`を作成
level の初期値は 5 か 6 が良さそう

```
includes:
    - vendor/larastan/larastan/extension.neon
    - vendor/nesbot/carbon/extension.neon

parameters:

    paths:
        - app/

    # Level 10 is the highest level
    level: 6

#    ignoreErrors:
#        - '#PHPDoc tag @var#'
#
#    excludePaths:
#        - ./*/*/FileToBeExcluded.php
```


## 実行
```
./vendor/bin/phpstan analyse
```

メモリエラーの場合(Allowed memory size exhausted)

```
./vendor/bin/phpstan analyse --memory-limit=2G
```

#### OKの場合
![スクリーンショット 2025-06-02 15.41.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2139067/ba173f53-041f-4b18-a7f5-b809439bb293.png)

#### NGの場合
![スクリーンショット 2025-06-02 15.42.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2139067/50311278-b6c6-4df0-a458-b58f4cae716a.png)
(画像ではuseの定義がなく、エラーが出ています)


## ベースラインファイル作成
ベースファイルの生成
``` ./vendor/bin/phpstan analyse --generate-baseline```

phpstan.neonのincludeに追加
```
includes:
    - vendor/larastan/larastan/extension.neon
    - vendor/nesbot/carbon/extension.neon
    - phpstan-baseline.neon // 追加
```
ベースラインで生成されたエラーは以降では表示されなくなるのでプロジェクトの途中で導入して警告が多い場合や導入以降の追加コードのみ検証したい場合でも対応できます。
breezeのメモリ不足のエラーについて

**1.breezeをインストールしてログイン機能をつけた時点で
web.phpの記述がlogin,breezeに関するだけのものになった。**

→web.phpを書き直してみたが間違っている可能性がある。 

**2.メモリ不足のエラーにより、レスポンスとしてHTTP ERROR 500が返ってくる。**

普通のhtmlで書いていたものを
↓
```
@extends('layouts.app')
@section('content')
bodyタグの中身部分のhtml記述
@endsection
```
で使い回すようにした。


# 解決
```
@extends('layouts.app')
@section('content')
bodyタグの中身部分のhtml記述
@endsection
```
@extends('layouts.app')
@section('content')
@endsection
→これをコメントアウトして
```
    <!DOCTYPE html>
<html>
<head>
    <title>スケダチ</title>
</head>
<body>
bodyタグの中身部分のhtml記述
</body>
```
に変更したところメモリのエラーが出なくなった(レスポンスとしてHTTP ERROR 500)
ページを使い回さなくなったことで余分なページ処理を繰り返さず、メモリ負荷が正常になった？


$slotが未定義など出る→でなくなる。

フロント側のメモリが重くページが読み込めず、リスポンスとしてHTTP ERROR 500
login画面とregister画面は大丈夫




**3.registerのアカウント登録画面から登録しようとしても、
データベースに保存されておらず、
ページ遷移しない。login画面も同じ**

まだコントローラーとルーターを書いてないだけ？



**4.Breezeで作ったregister画面とlogin画面が
以前つくった依頼投稿機能などが別々のものになってる気がする。**

気のせいかもしれない
Azure DNS resolver providerの受信エンドポイントと送信エンドポイントについて

Azure DNS resolver providerは結構理解上には難しいので、
以下の4つのパタンで説明します。

パタン１：
Azure VMはDNS優先でDNS private Resolver inbound endpointのIP(10.10.0.4)を指定します。DNS private Resolver inbound endpointのoutendpoint はあります。Rule setは www.test.comの場合、10.10.11.12に転送するよう設定しています。
その場合、Azure VM からwww.google.comを名前解決する場合、名前解決の通信はどうなりますか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620054/b6955f68-6557-4c00-827f-44eafc8a3576.png)



 Azure VMがwww.google.comを名前解決する場合、DNSクエリはinbound endpoint（例: 10.10.0.4）に送信され、inbound endpointはこれをAzure DNS（168.63.129.16）に転送します。Azure DNSはフォワーディングルールセットを参照しますが、www.google.comにルールがないため、パブリックDNSサーバーに直接クエリを送信し、結果をVMに返します。
 Outbound endpointは、www.google.comに対するルールがないため関与しません（www.test.comのクエリであれば、10.10.11.12に転送される）。


パタン２：
Azure VMはDNS優先でDNS private Resolver inbound endpointのIP(10.10.0.4)を指定します。DNS private Resolver inbound endpointのoutendpoint はあります。Rule setは www.test.comの場合、10.10.11.12に転送するよう設定しています。Rule setはAzure VMのVnetにリンクしています。

その場合、Azure VM からwww.test.comを名前解決する場合、名前解決の通信はどうなりますか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620054/140bdfa3-ab86-46ab-abbe-95c8756666db.png)



パタン３：

Azure VMは既定のAzure DNS を利用しています。DNS private Resolver inbound endpointはありません。outendpoint はあります。Rule setは www.test.comの場合、10.10.11.12に転送するよう設定しています。
Rule setはAzure VMのVnetにリンクしています。
その場合、Azure VM からwww.test.comを名前解決する場合、名前解決の通信はどうなりますか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620054/9f629575-c206-4206-a77e-d9c52722f4fa.png)



パタン４：
Azure VMはcustom DNS 10.12.13.14を利用しています。custom DNS 10.12.13.14はAzure DNSに転送設定ています。
DNS private Resolver inbound endpointのoutendpoint はあります。Rule setは www.test.comの場合、10.10.11.12に転送するよう設定しています。 Rule setはAzure VMのVnetにリンクしています。
その場合、Azure VM からwww.test.comを名前解決する場合、名前解決の通信はどうなりますか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620054/83096c59-7a54-406a-8bb1-c6a70aa8c34b.png)