OmniAICreator/Qiita-1.07M huggingface dataset:
Promise と async function の 同期実行される範囲について

# Promise も async function も 同期実行される範囲があります。

これを実行したらどう実行されるかわかりますでしょうか？

```js
console.log('1');
new Promise(resolve => {
   console.log('2');
   resolve();
});
console.log('3');
```

これを実行したらどう実行されるかわかりますでしょうか？

```js
console.log('1');
(async function() {
   console.log('2');
})();
console.log('3');
```

答えは

```text
1
2
3
```
です。

なぜなら 
- Promise コンストラクタは同期実行されるから
- async await に於いて、非同期になるのは await されたときから

だからです

とりあえず同期で動いてほしくないならこれでいいです。

```js
console.log('1');
Promise.resolve()
.then(() => console.log('2'));
console.log('3');
```

```text
1
3
2
```


これと同等の処理を Promise コンストラクタを使って書くならこうです

```js
console.log('1');
new Promise(resolve => resolve())
.then(() => console.log('2'));
console.log('3');
```

async function を使って書くならこうなります

```js
console.log('1');
(async function () {
   await Promise.resolve();
   console.log('2');
})();
console.log('3');
```

これは Promise を使わずに書くならこうなります

```js
console.log('1');
queueMicrotask(() => console.log('2'));
console.log('3');
```

ちなみに queueMicrotask の polyfill は次の様な実装です、

```js
if (typeof globalThis.queueMicrotask !== "function") {
  globalThis.queueMicrotask = function (callback) {
    Promise.resolve()
      .then(callback)
      .catch((e) =>
        setTimeout(() => {
          throw e;
        }),
      );
  };
}
```

つまり、 非同期実行してほしい場合は Promise.prototype.then() ……つまり await しろって話です。

以上。

# 追伸

この実行順序はわかりますよね？

```js
console.log('1');
new Promise(resolve => {
   console.log('2');
   resolve();
})
.then(() => console.log('6'));

console.log('3');

(async function () {
  console.log('4');
  await null;
  console.log('7');
})();

console.log('5');
```

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

# 参考

https://developer.mozilla.org/ja/docs/Web/API/Window/queueMicrotask

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
作業煮詰まった時...どうしていますか？Vol.1

こんにちは。東です。
今回は技術的な内容を置いておいて、雑談のような内容になっております。
今回のテーマは
__「煮詰まった時の対処法」__ についてです。
これは決して技術職だからということはなく、ありとあらゆる場面で起きかねない問題ではあります。
ただ最近の業務中に、少しずつ意識することが増えたのでこの機会にお話させていただきます。
全部挙げていくと少々長くなってしまうので、2回に分けて投稿したいと思います。
それでは暫しお付き合いくださいませ。

## 景色を変える
個人的に作業が煮詰まった時、往々にして同じ画面を見続けていることが多いです。
こんな事ありませんか？
「エラーにあたり様々な解決法がWEB上にあるが上手く行かず、__同じようなサイトを徘徊している__」
「組んでみたコードを実行したが上手くいかず何度もやり直し、その度に __同じようなロジックを組んでしまっている__」
この __”同じような”__ という状況をループしている状態になっていると埒が明かないことがあります。

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/c9776946-bc10-27b7-db12-9df6c803f251.png">＜じっとしてしまうんですよね。

ですのでもしそうなっていることに気がついたら私は以下のことをやってみてます。

__1\. 椅子から立ち上がりしばらく立ってる__
__2\.モニタとか前に何かオブジェクト置いておく。それを見る時間を作ってみる（ガチャのフィギュアとか）__
__3\.目をつぶって画面を見ない時間を作ってみる__

景色が画面から他のものになるだけで、案外切り替えたりできます。
無限ループの思考から脱却できるかも。

## 体を動かしてみる
IT系の仕事をしていると意識が頭だけにいきがちですが、五感による刺激が転換になるときもあります。
私は現在テレワークで業務を進めており、部屋の中で動き回ることに制限がないためなんでもできます。（常識の範囲内で）
数分自転車こいでみたり、ダンスとは言えない動きをしてみたり...
ただ __「本社に出勤している」__ __「お客様の出向先で作業している」__
など動き回るのに制限がある方もいらっしゃると思います。
そんな時に私がやっていたのが __何か建物を回るルートを組んでおく__ ということでした。
本社のビルを一周、ファミマのある区間を一周等々......
本社出勤時期に同期に誘われて始めたことでしたが、彼がいなくなっても良い習慣だったのでしばらく続いていました。
出来そうな方は是非！

<img width="150" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/bc8d5ab7-2a82-86d3-7104-02239d86db9f.png">＜久々に動くと足がおじいちゃんになってたり。

## 誰かとやり取りしてみる
私はテレワークになってからこのことにしばらく悩みました。
本社に居ればもっと手軽に人とコミュニケーション取れていましたが、
誰もいないとわざわざ業務連絡以外で人と話すことがなくなりました。

<img width="150" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/b6e9aa34-c6dd-3d29-103b-ece8a195d29d.png">＜やり取りするのはきっと猫ぐらい。


ですので、定期的に誰かと雑談するように心がけました。
やはりずっと1人で作業というのは、
適当にスタンプを送るところから始まることもありますし、
気になったこと、最近の気になる趣味でも __なんでも__ いいです。
やり取りしてくれる相手が居たら是非おすすめしたいです。
但し、__業務に支障出ない程度の頻度にしておいてくださいね......__

## 呼吸に意識を向けてみる
普段意識することは無い分見過ごされがちな呼吸。
ですが、脳の働きは心拍数と大きな関係があり、__深呼吸__ することが注目されているらしいです。
（以下は健康との関連性についてですが、関係ないことはないはず......! ）

https://forbesjapan.com/articles/detail/20281#:~:text=%E8%BF%91%E5%B9%B4%E3%81%AE%E7%A0%94%E7%A9%B6%E3%81%AB%E3%82%88%E3%82%8A%E3%80%81%E5%91%BC%E5%90%B8,%E3%81%9F%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E3%82%92%E7%A4%BA%E3%81%97%E3%81%9F%E3%80%82

最近はやり取りさせていただいてるお客様との会議前に
深呼吸をするように心がけています。
これでとげとげしい物言いが減っている......はず。（そうでなければゴメンナサイ）

<img width="150" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/15cf2ab3-b04a-1a8d-4656-a2c551c567be.png">＜屋外で深呼吸出来たら一番気持ちいい！ 


場所問わず簡単にできるので、この機会に目を向けてみてはいかがでしょうか？ 



## まとめ
この記事で偉そうなことを書いておりますが、私も最近になって意識できるようになったので
まだまだ修行中の身です。
また複数の方法を書いておりますがいきなり全部は厳しいと思います。
ですので、見ていただいた方でご自分の環境に合わせて出来そうなものがあればご参考にしていただければ嬉しいです。
次回に続きます。
お付き合いいただきありがとうございました！
JPAリポジトリのネイティブクエリ実行後SELECT結果が古い...

こんにちは。東です。
今回はJPAでネイティブクエリを実行した際、詰まったことがありましたので
記録として残しておきたいと思います。

この記事の結論：__``＠Modifying(clearAutomatically = true)``を使った方がいいかも...?__

# 現象
※業務での状況をかなり簡略化して再現しました。
スクショは再現用にhtmlをいじっただけですので雰囲気だけ汲み取っていただけると幸いです。

WEBページにテーブルの内容を表示するだけのものを作りました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/ef70ec11-42b4-2733-9c47-10ec228029db.png)

対応する以下のようなテーブルがあったとします。

Account
| id| name | ver |
|:-:|:-:|:-:|
|  1 |  アカウントA |  1 |
|  2 |  アカウントB |  1 |
|  3 |  アカウントC |  1 |

そこでJPAリポジトリで以下のようなネイティブクエリを用意します。
単純にAccountテーブルのnameを更新し、verを+1インクリメントするだけのものです。

```ruby:Account
@Modifying
@Query("UPDATE Account set name =:name , ver+1 WHERE id = :id")
public void updateAccount (@param("name") String name, @param("id") Long id){
```
このパラメータに
nameに「__アカウントA更新__」
idに「__1__」
を渡し、実行すると...

Account
| id| name | ver |
|:-:|:-:|:-:|
|  1 |  アカウントA更新 |  2 |
|  2 |  アカウントB |  1 |
|  3 |  アカウントC |  1 |

テーブルは更新されました。
その後の処理でSELECTを行いWEB画面表示にレコードを表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/52bfcc08-62ba-8eaf-901a-b75cb992be48.png)
あれ、更新されない....

# 原因

https://www.baeldung.com/spring-data-jpa-modifying-annotation

こちらの記事にあります通り、``＠Modifying``を使用し updateやDeleteなどのDB操作を行うと
JPAで保持している永続コンテキストが古くなるみたいです。
そのため何もしないと __更新される前__ のDBの状態のままのようです。

# 対処
前置きが長くなりましたが、
こういった場合は``＠Modifyingに(clearAutomatically = true)``
を付与してあげることで永続化コンテキストをクリアすることができます。
```ruby:Account
@Modifying(clearAutomatically = true)
@Query("UPDATE Account set name =:name , ver+1 WHERE id = :id")
public void updateAccount (@param("name") String name, @param("id") Long id){
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/ad93537c-bab9-dee9-9ba7-213a946714f4.png)

この状態で実行したところ更新出来ました！

# まとめ
いかがでしょうか？
時間を割いて調査したのですが、仕組みは単純であったため、まだまだ勉強不足を感じました。
DB操作のトランザクション管理は難しい...
見ていただきありがとうございました！
HTMLの基本

備忘録的な感じです。初心者ですので間違っている箇所があるかもしれません。
お手柔らかにお願いいたします。
## HTMLのテンプレート
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- 文字コード -->
    <meta charset="UTF-8">
    <!-- 画面の幅をデバイスの幅に合わせる。拡大縮小無し。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
```
## HTMLの要素
### `<a>`要素
絶対URLの場合
```html
<a href="https://www.xxx.co.jp">株式会社○○のHP</a>
```
相対URLの場合
```html
<a href="./../employeeList.html">社員情報一覧</a>
```
### `<img>`要素
絶対パスの場合
```html
<img src="https://www.xxx.com/images/image.jpg">
```
相対パスの場合
```html
<img src="./../images/image.jpg">
```
### `<ol>`要素　`<li>`要素
順序付きのリスト
```html
<ol>
    <li>男性</li>
    <li>女性</li>
</ol>
```
### `<ul>`要素　`<li>`要素
順序無しのリスト
```html
<ul>
    <li>男性</li>
    <li>女性</li>
</ul>
```
## HTMLエンティティ
HTMLで予約済み文字や見えない文字を表示するために使用する。
[HTML MDN](https://developer.mozilla.org/ja/docs/Glossary/Entity)で一覧を確認することができる。
- `<` → `&lt;`
- `>` → `&gt;`
- `スペース` → `&nbsp;`
- `&` → `&amp;`
- `"` → `&quot;`

## テーブル
### テーブルの要素
- `<table>`要素
行と列で構成されたセルによって二次元の表形式のデータを定義する。
- `<tr>`要素
セルの行を定義する。`<th>`要素と `<td>`要素を混在させることができる。
- `<th>`要素
見出しとなるセルを定義する。
- `<td>`要素
データを包含するセルを定義する。
### セルの連結
- 縦方向に連結する場合
`<th>`要素または`<td>`要素に**rowspan属性**を設定する。
```html
<th rowspan="5">項目</th>
```
- 横方向に連結する場合
`<th>`要素または`<td>`要素に**colspan属性**を設定する。
```html
<th colspan="5">項目</th>
```
## フォーム
### フォームの要素
- `<input type="radio">`
```html
<input type="radio" name="gender" value="male" checked>男性
<input type="radio" name="gender" value="female">女性
```
- `<input type="checkbox">`
```html
<input type="checkbox" name="hobbies" value="movie" checked>映画<br>
<input type="checkbox" name="hobbies" value="book">読書<br>
<input type="checkbox" name="hobbies" value="cooking">料理<br>
```
- `<input type="file">`
ファイルをサーバにアップロードする場合に使用する。
`<form>`要素に**enctype="multipart/form-data"** と記述する。
```html
<input type="file" name="employeeList">
```
- `<textarea>`
rows属性で縦の行数を設定する。
cols属性で横の文字数を設定する。

```html
<textarea name="message" rows="5" cols="50"></textarea>
```
- `<select>`／`<option>`
```html
<select name="quantity">
    <option value="1" selected>1個</option>
    <option value="2">2個</option>
    <option value="3">3個</option>
    <option value="4">4個</option>
    <option value="5">5個</option>
</select>
```
- `<button>`
```html
<!-- フォームのデータをサーバに送信する。 -->
<button type="submit">送信</button>
<!-- フォームの値を初期値に戻す。 -->
<button type="reset">リセット</button>
<!-- JavaScriptで動作を設定する場合などに使用する。 -->
<button type="button">ボタン</button>
```
その他の要素は[HTML MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element)で一覧を確認する。
【学習】AWSのS3設定 画像関係①

# はじめに
ローカルでは画像を投稿できるのに、本番環境では画像を投稿できないエラー。
一度解決したかと思いましたが再度デプロイ等を行うとやはりエラー。
AWSのS3が関係しているかもしれないので、実際行った設定を残しておきたいと思います。
（画像は特になく、本当に私が行った流れを把握するためのものなので見にくいというをご承知おきください。）

## 環境
- Windows, WSL
- Docker
- Ruby 3.2.3
- Rails 7.1.3


## 1
awsログイン

サービス一覧からCtrl+Fで「S3」を検索

【バケットを作成】

バケット名を入力

ヘッダー右上のユーザー名の隣にあるタブからAWSリージョンをアジア・パシフィック（東京）で設定

**【オブジェクトの所有者】**

・ACL　有効

・オブジェクトライター選択

**【ブロックパブリック・アクセス設定】**

バケットポリシーというものを使用して、S3のセキュリティ対策を行うので、下3つと警告ボックス？の中のチェックボックスにチェックを入れる

バケット作成を押し完了

「詳細確認」のボタンが表示されるので押す。

作成したバケットの「プロパティ」タブを押すと「Amazon リソースネーム (ARN)」の欄があるのでコピーしておく



## 2【ルートユーザーでログイン後、IAMユーザーを作成】

https://qiita.com/iijima-naoya-45b/items/0a3efa0f7077233b1c6a

サービス一覧から「IAM」を選択

ユーザーを選択

ユーザーを作成を選択

ユーザー詳細：ユーザー名。「AWS マネジメントコンソールへのユーザーアクセスを提供する - *オプション」にチェック。「IAM ユーザーを作成します」にチェック。「カスタムパスワード」を選択して入力。「ユーザーは次回のサインイン時に新しいパスワードを作成する必要があります - 推奨」チェックはずす。*

- 次へから、許可を設定に移動

「ユーザーグループに追加」から「グループを作成」ボタンを押す

`「administratoraccess」`で検索し、グループに追加。ユーザーグループ名も入力

「ユーザーグループを作成」ボタンを押す。

「許可を設定」のページに今作成したグループ名のものがあるのでチェックを入れる

「次へ」を押す

「確認して作成」ページへ移動。「ユーザーの詳細」「許可の概要」を確認

「ユーザー作成」ボタンを押し、正常に作成されたことを確認。


## 3【budgets】

budgetsと検索をかけて選択。

「請求とコスト管理＞予算＞概要」から「予算を作成」を選択

カスタマイズを選択し、「コスト予算」を選択して「次へ」

```ruby
・予算名：AWS予算（例）
・間隔：月別
・予算有効日：定期予算
・開始日：そのまま
・予算設定方法：固定
予算額：2.00(例) 
・予算のスコープ(全てデフォルト)
```

「次へ」で「アラートの閾値を設定」

今回は、60%を閾値とします。E-mail受信者も設定

「次へ」次の項目は確認？

最後に「予算を作成」で正常に作成されたことを確認する


## 4【MFA導入（多段階認証）】

IAMのページにアクセスして左側のメニューバーから`ユーザー`を選択

先ほど作成した「ユーザー名」を選択。

「セキュリティ認証情報」のタブから`MFA デバイスの割り当て`を選択

「デバイス名」を入力。「**MFA device」で「認証アプリケーション」を選択**

「次へ」

デバイスの設定から、ワンタイムパスワードをそれぞれ打鍵。

(※30秒ごとにワンタイムパスが切り替わるので、連続するパスを打鍵してください。)

.MFAに作成できていれば完了。「仮想～」という欄が新たに作成されている


## 5【バケットポリシーの設定】

作成したバケットの「アクセス許可」タブを選択

`バケットポリシー設定`の、`編集`をクリック

以下ジェネレーターで作成したものを貼り付ける

https://qiita.com/libra_lt/items/284b2723eaae26c5a39b

```ruby
Select Type of Policy → S3バケットのポリシーを選択
Effect → Allow
AWS Service → S3の場合はS3のみしか選択できない
アクション　→　GET、PUT、Deleteを選択
```

設定が終わったら Add Statement を押します。

押すと、ボタンの下に詳細が表示されます。

いくつか同時にポリシーを設定できるので、他にも設定したい場合は、再度入力し、Add Statementを押すと、このエリアに表示されていきます。

最後に Generate Policy ボタンを押すと、ポリシーが表示されます。

このポリシーをS3のポリシー設定に貼り付ければOKです。

若しくは参考サイトの下記で👇（今回は上記コードだとうまくいかなかったためこちらで）

```ruby
{
    "Version": "2012-10-17",
    "Id": "Policy1699409320136",
    "Statement": [
        {
            "Sid": "Stmt1699409298149",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::◯◯◯◯◯:user/××××××"　# IAMユーザーARN
            },
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::バケット名" # バケットARN
        }
    ]
}
```

「変更を保存」ボタンを押し、「 バケットポリシーが正常に編集されました。」となったら完了


# 本番環境で、画像に関する知識とか。参考サイトとか
https://qiita.com/joinus_ibuki/items/050816c83234837167bc

https://www.airteams.net/media/articles/1833

https://ryo10leo.hatenablog.com/entry/2020/01/05/213559
Amazon の EIP をプールされた CIDR の範囲内で複数割り当てる

# 簡潔に内容

- 今まで
ランダムな パブリック IP が割り当てられる

- 今回のアップデート
EIP を作成する際にプールされた CIDR の範囲内で複数割り当てることができる

https://aws.amazon.com/jp/about-aws/whats-new/2024/08/amazon-provided-contiguous-ipv4-blocks/

例えば、NAT Gateway を利用していて外部の FW などで穴あけなどをしている場合、パブリック IP 1 つ 1 つ設定しなくとも、cidr で登録することができそうですね。

# 確認してみる

## IPAM を作成

「VPC IP Address Manager (VPC IPAM) 」から「IPAM」、「IPAMを作成」をクリック

![スクリーンショット 2024-10-01 17.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/0ce4a085-8955-bf94-69fd-1964f9c76b45.png)

「メンバーアカウントから委任された管理者アカウントに対して、および運用リージョンからホームリージョンに対して、Amazon VPC IP Address Manager がデータをレプリケートすることを許可します。」にチェック
※ IPAM の作成を続行するには、このチェックボックスをオンにする必要があります。

![スクリーンショット 2024-10-01 17.29.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/848d393b-8253-7830-9b22-189c1cb3cdf5.png)

「無料利用枠」をクリック
※ 「アドバンストティア」と「無料利用枠」の違いは以下コンソール上の説明通りのようですので割愛します。

![スクリーンショット 2024-10-01 17.30.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/b0f50da3-0c39-1224-045b-536496f54c59.png)

適当な「名前タグ」を入力し、「IPAM を作成」をクリック

![スクリーンショット 2024-10-01 17.44.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/84c44109-b598-41ab-5933-c54f6b03d2c2.png)

![スクリーンショット 2024-10-01 17.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/9c69b63a-8f06-00f8-4529-507c4e23f01d.png)

## プールを作成

「プール」から「プールを作成」をクリック
![スクリーンショット 2024-10-01 17.41.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/72586d8b-4cee-1c4e-d5aa-1a7399a26d8a.png)

IPAM スコープは「デフォルト - パブリック」を選択し、適当な「名前タグ」を入力
![スクリーンショット 2024-10-01 17.47.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/5b747cc3-5fd2-32c4-bf79-564d868b4bc2.png)

ロケールを「ap-northeast-1」、サービスを「EC2 (EIP/VPC)」、パブリック IP ソースを「Amazon 所有」にします
![スクリーンショット 2024-10-01 17.48.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/615d2595-1811-33ca-1827-e39fbcaf14d2.png)

プロビジョンする CIDR 今回を「/30（4 IPs）」にします。
※ /30（4 IPs）〜 /23（512 IPs）まで選択できました。
![スクリーンショット 2024-10-01 17.49.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/817f2e34-a2ea-5c44-9375-185bf3eaccbe.png)

最後に「プールを作成」をクリック
![スクリーンショット 2024-10-01 17.55.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/8554d3dd-82f8-14a6-822e-24b359b7008b.png)

「プールの詳細」タブを確認し、4 IP がプロビジョン済み CIDR になっていることが確認できました。
![スクリーンショット 2024-10-01 17.56.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/2ceff56c-8151-c8f8-b5ca-6007cb09a0eb.png)

## EIP の割り当て

EC2 > EIP > EIP アドレスを割り当てるの画面より、「Allocate using an IPv4 IPAM pool」を選択し、「割り当て」をクリック

![スクリーンショット 2024-10-01 18.01.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/b2306b28-778c-5d83-4cb2-abb640a054b3.png)

![スクリーンショット 2024-10-01 18.01.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/b1133e16-3b61-1feb-2891-4d447da1e93c.png)

IPAM pool から Amazon が所有する パブリック IP が割り当てられたことを確認できました。

 ![スクリーンショット 2024-10-01 18.02.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280929/f85c0fb3-d328-cd16-75d5-610033a54846.png)
【Rails】ルーティングの"collection"と"member"の違い

こんにちは！
初Railsの記事です:thumbsup_tone1:

今回は、ルーティングの member と collection の違いについて書きます！

![banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/83de7afc-66c8-8880-ad67-fd6231afad24.png)

 # 違い
* member を使った場合は id が付与される
* collection を使った場合は id が付与されない

# 前提
例として UsersController があり、hoge というメソッドを実行します。

# member
```
resources :users do
  member do
    get 'hoge'
  end
end
```
上記のように member を使用すると以下のルーティングが設定されます。
```
/users/:id/hoge
```

# collection
```
resources :users do
  collection do
    get 'hoge'
  end
end
```
上記のようにcollection を使用すると以下のルーティングが設定されます。
```
/users/hoge
```

# 最後に
ここまで読んでいただき、ありがとうございました！
idが必要な時とそうでない時があったので、備忘録として書いてみました。
いいねしてくれたら、スキップして喜びます:heartpulse:
install DCL（電脳地球ライブラリ） on Rocky Linux 8.8

# TL;DR

* install DCL（電脳地球ライブラリ） to /usr/local
* use gcc & gfortran
* rocky linux 8.8

# url

https://www.gfd-dennou.org/library/dcl/

# requirement

* GTK
* cairo

## install

必須パッケージ
```
dnf install wget gcc gcc-gfortran cairo-devel gtk3-devel
```

### TeX

Texはうまく入らなかったので、後日再挑戦します

```
dnf install texlive-latex texlive-dvipdfmx texlive-pslatex
dnf install latexmk
```

```
tlmgr path add
```

# DCL

## get binary

```
wget https://www.gfd-dennou.org/library/dcl/dcl-7.5.1.tar.gz
```

## extract

```
tar zxfv dcl-7.5.1.tar.gz
cd dcl-7.5.1
```

## config

```
export  FC=gfortran
./configure
```

.hファイルを出力するためにf95ではなくgfortranを使う

## install

```
mkdir /usr/local/share/fonts/
```

```
make
make install
```

# Test

```
cd dcl-7.5.1/demo
make

cd gokuraku/
./hop
```

ファイル出力を選ぶと、dcl.pdfが出力される
Bluetooth Core Specificationのバージョンは？

# 現在のバージョンは？
最近、Bluetooth Core Specification 6.0が発表されて、ふと「現在のSDKはどのバージョンまで対応しているのだろうか？」と気になったので調べてみました。
ちなみにHCIのログを有効にしていると普通に起動時のデバッグログで表示されたりするわけですが、ちゃんと調べるという名目でBLEスニファーを使って調べようと思います。
## nRF5 SDK 16.0
まずはレガシーSDKであるnRF5 SDK 16.0を調べてみます。
![nRF5_SDK16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797041/8a630ee1-30fa-9647-83f7-56769e82eed7.png)
接続時のネゴシエーションで5.1と表示されていますね。ただ、Bluetooth 5.1の最大のウリであるAoAやAoDにはnRF5 SDKは対応しないと早々に公式発表があり、実際にそのあたりでSDKの開発はストップしています。5.1と言いつつ、ほぼ5.0ということでよいと思います。
## nRF Connect SDK 2.0.0
あまり古いものを調べても仕方がないので、執筆時点(2024/10/1)でのメジャーバージョンである2.x.yの元祖2.0.0を調べてみようと思います。
![nCS2.0.0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797041/626dcb33-6f2b-59a2-dff2-38c4e4b1f85c.png)
お、なんと5.3と表示されますね。2.0の時点ですでにCore Specification 5.3に対応していたようです。ただ、Core Specificationが5.3に対応するのと、nRF5 SDKでAoA/AoDが使えないようにサンプルプロジェクトやAPIがちゃんと動くかはまた別の話なので、このCore Specificationのバージョンだけで全てが分かるわけでも語れるわけでもないのは注意が必要です。

::: note warn
コア仕様の詳細はここでは説明しません
:::

## nRF Connect SDK 2.7.0
執筆時点(2024/10/1)での最新バージョンのSDKです。こちらはと言いますと
![nCS2.7.0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797041/f90130c1-4e3b-702e-1ebf-3129b0e25b3b.png)
当然、と言うべきか、もちろんと言いますか、やはり最新の5.4に対応していますね。5.4で追加されたPeriodic Advertising with Response(PAwR)が使えるのだから当然と言えば当然ですよね。
# SDKのアップデートについていこう
バグ修正や新しい機能の追加があるのはもちろんなのですが、Bluetooth Core Specificationも日々更新されるわけで、こちらに対応するためにもやはり最新のSDKを使うのが望ましいですね。

::: note
いや、でも正直しんどいです(笑)
:::

# 余談
接続に使用しているのは個人のPixel 6です。Pixel 6って5.2なんだ……買い換えようかなと調べていて思ったのは内緒です(笑)
Chatwork APIを使って出勤退勤連絡を自動化する方法【GAS + iPhoneショートカット】

<br>

## ■はじめに
<br>

現在、私の会社では勤怠登録とは別に出勤・退勤連絡時の連絡をChatworkに手入力で行っているのですが、
この作業を効率化したいと思い、今回Google Apps Script（GAS）を使った自動化を実装しました。
さらに、iPhoneのショートカットアプリを活用し、手間を減らす仕組みを作りました。

この記事では、Chatwork APIを利用し、GASとiPhoneショートカットで出退勤連絡を自動化する手順を紹介します。

<br>

## ■解決したい問題
<br>
- 出勤日の出勤・退勤時に毎回Chatworkを開き、手動でメッセージを入力・送信する手間
  （現状は「出勤 氏名」のような形でメッセージを送信しています）
- 業務効率を上げるために、より簡便な方法を実現したい

<br>

## ■必要なもの
<br>

- Chatworkアカウント（無料プランでOK）
- Chatwork APIトークン
- Chatwork RoomID（メッセージを送信したい先のID）
- Googleアカウント（Google Apps Scriptを利用するため）
- 使用端末によりiPhone（ショートカットアプリ） または Android(ショートカット作成)

<br>

## ■1. Chatwork APIの準備
<br>

1. **Chatwork APIトークンの取得**  
   Chatworkにログインし、[APIトークン発行ページ](https://www.chatwork.com/service/packages/chatwork/subpackages/api/token.php)からAPIトークンを発行します。  
   このトークンは後でGASで使用しますので、メモしておきましょう。

<br>

## ■2. Google Apps ScriptでChatwork APIリクエストを実装
<br>
次に、Google Apps Script（GAS）を使って、ChatworkにAPIリクエストを送信するスクリプトを作成します。

### スクリプト

```javascript
// chatwork APIキー
var apiKey = 'API トークンを入力';
var roomId = 'xxxxxxxxx';
// 氏名
var username = '漢字フルネームを入力';

function doGet(e) {
  sendAttendanceMessage();
  return ContentService.createTextOutput('Message sent: 出勤 ' + username);
}

function sendAttendanceMessage() {
  var url = 'https://api.chatwork.com/v2/rooms/' + roomId + '/messages';
  var message = '出勤 ' + username;
  var payload = {
    body: message
  };
  var options = {
    'method' : 'post',
    'headers': {
      'X-ChatWorkToken': apiKey
    },
    'payload' : payload
  };

  var response = UrlFetchApp.fetch(url, options);
  // ログ確認用
  Logger.log(response.getContentText()); 
}

```

上記は出勤用として作成しましたが、同様に退勤用も作成します。
当初は自分用に動けば良いだけのものを予定して作成していたため、エラーハンドリングは行っていません。
（コード内で処理をかき分けても良いかもしれません。午前中に動いたら「出勤」、午後に動いたら「退勤」と判定するのも面白いかも）

## ■3. Google Apps ScriptをWebアプリとしてデプロイ
<br>
次に、上記のスクリプトをWebアプリとしてデプロイします。

1. **Google Apps Scriptエディタでデプロイ**  
   「デプロイ」→「新しいデプロイ」を選択し、「Webアプリ」を選択してデプロイします。

2. **URLの取得**  
   デプロイ後に表示されるWebアプリのURLをメモしておきます。
   このURLは後ほど、iPhoneのショートカットに使用します。

<br>

## ■4. iPhoneショートカットアプリを使った連携
<br>
上記までで作成したURLを実行することで当初の目的としていたことは達成することができますが、
それをさらに簡略化するためここではiPhoneのショートカットアプリを使用し、
WebアプリのURLを利用してワンタップでChatworkに出退勤メッセージを送信する設定を行います。

### ショートカット作成手順

1. **ショートカットアプリを開く**  
   ショートカットアプリを開き、「ショートカットを作成」を選択します。

2. **URLを設定**  
   「URLを取得」を選択し、先ほどGASでデプロイしたWebアプリのURLを入力します。

3. **Webリクエストを実行**  
   「URLを開く」アクションを追加し、このURLをタップするだけでリクエストを実行できるように設定します。

4. **ショートカットの名前を付ける**  
   それぞれ「出勤」「退勤」用のショートカットを作成し、ホーム画面に追加します。

<br>

## ■5. 結果
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3899074/d122acd5-cef2-cc34-7459-7f012d835b72.png)
|:-:|

iPhoneのホーム画面からワンタップでChatworkへ出勤・退勤のメッセージを送信できるようになりました。
これにより、アプリを開く必要がなくなり、業務効率が大幅に向上しました。

<br>

## ■まとめ
<br>
今回は、Chatwork APIとGoogle Apps Scriptを活用し、出退勤連絡を自動化する手法を紹介しました。
iPhoneのショートカットアプリを使うことで、さらに便利にメッセージの送信を簡略化できました。
似たようなことでも役立てられるかとも思うので興味のある方はぜひ試してみてください。

<br>

### ■参考リンク

- [Chatwork APIドキュメント](https://developer.chatwork.com/ja/)
- [Google Apps Script 公式ドキュメント](https://developers.google.com/apps-script/)
VBAセルの操作【プロパティ編】

# はじめに
学習記録・復習のためまとめています。IT業界2年目のひよっこです。

## セルの操作　プロパティ
### Endプロパティ
＜こんなときに使える＞
・行や列の増減がある場合にも汎用的にセルを指定したいとき

```
基準となるセル.End(方向)
```


| 方向 | 定数 |
|:-:|:-:|
|  上 |xlUp   |   |   |
| 下  |xlDown   |   |   |
| 左  | xlToLeft  |   |   |
|  右 |  xlToRight |   |   |

※VBAで使用できる定数は名前の先頭に「xl(Excel操作で使用)」「vb(他アプリでも共通して使用可能)」「fm(UserFormで使用)」のいずれかで始まる。


:::note info　
　対応するExcel操作
 　Ctrl + 矢印キー
:::
 

例　A1からG1までの1行分を選択したい
```vb
'基準となるセルを選択
Range("A1").Select

'Range(基準セル,右端のセル).select
Range(Selection, Selection.End(xlToRight)).Select
```
***

### CurrentRegionプロパティ
＜こんなときに使える＞
・行や列の増減がある場合にも汎用的にセルを指定したいとき
・表全部のセルを選びたい
・表の最終行の数が知りたい


```
'基準となるセルが入っている表全体を選択する
基準となるセル.CurrentRegion.Select
```

:::note info　
　対応するExcel操作
 　Ctrl + Shift + 矢印キー
:::
 

例　A1からG1までの全部の分を選択し、最終行も取得したい
```vb
'A1を含む表の全範囲を選択
Range("A1").Select
Selection.CurrentRegion.Select

'選択した表の行数を数える
Dim rowcount
rowcount = Selection.Rows.Count

'実際に表全体の行数が取得できているか確認する
MsgBox rowcount
```
※Rowsプロパティは次の項目で紹介する

***
### Offsetプロパティ
＜こんなときに使える＞
・基準となるセルから見て、指定したセル分だけ移動したい


```
基準となるセル.Offset(行,列)
```

:::note info　
　対応するExcel操作
 ？（あったら教えてください！）
:::
 :::note warn
基準となるセル.Offset(3,1)
→基準となるセルから見て、３行分下に・１列分右に移動する
※基準となるセルは(0,0)になる！
:::

***

### Rowsプロパティ
＜こんなときに使える＞
・行数を出したい
・行を選択したい


```
'4行目を選択する
Rows(4).Select
```

:::note info　
　対応するExcel操作
 　Shift + スペースキー
:::
 
| 書き方 | 選択範囲 |
|:-:|:-:|
|  Rows |  全行 |
|  Rows(1) | 1行目  |
| Rows("1:3")  | 1-3行目  |

※引数なしでも使用可能




# おわりに
学習したら随時追加予定です。
パスワードはなぜ「P@ssw0rd」なのか


# P@ssw0rd の謎

## 背景
社内で使っているシステムでは、しばしば `P@ssw0rd` のようなパスワードが登場する。

閉鎖的な環境であるため、本当に強いパスワードは要らない。しかしログインする部分があり、そこでパスワードも設定されている。それが `P@ssw0rd` だったりする。先輩からは「ユーザー名は `Administrator` で、パスワードは `P@ssw0rd` を使ってね」などと共有される。

なぜなのか。

`password` じゃダメなのか。

`1` とか `a` じゃダメなのか。

何なら設定無しではダメなのか？

……この辺の謎を追った。

## 鍵は二つほどありそうだ
**ポリシー** と **リート** の二点のようである。

## 1: ポリシー
パスワードポリシーやセキュリティポリシーなど呼び方は色々あるが、**ポリシー（Policy）** とは **従うべき約束事** を指す。

一般的には「早起きが私のポリシーなんだよね」などと使うが、このポリシーどころではない。コンピュータにおいては、「絶対に従ってください」「従わないと先に進ませません」くらいの圧がある。

特にコンピュータでは「鍵を掛けずに出かける」くらい不用心なことをするケースが多い。IT を知らないとそうなるし、知っていてもそうなる。だから仕組みとして「これこれは絶対やれ」と仕込んでおき、従わない限り進ませないようにする。それがポリシーのイメージ。

で、これはパスワードを設定する場面でも起きる。

たとえば、こういうの。

- パスワードは大文字、小文字、数字、記号のすべてを一文字以上含めてください
- パスワードは 8 文字以上の長さにしてください

もうおわかりだろう。

こういうポリシーが存在する場合、`a` とか設定無しとかいったことはできない。かといって、いたずらに複雑にすると使いづらい。

そこで Password をもじって `P@ssw0rd` とするわけだ。

## 2: リート
もう一つの疑問が、なぜもじった結果 `P@ssw0rd` になるのか、ということだ。

たとえばアットマーク `@` はどこから来たのか。数字のゼロ `0` は何なのか。先頭の P だけ大文字なのはなぜか、など疑問はつきない。これにも理由がある。

まず先頭が大文字なのは、単に英語の文法である。ポリシーで大文字を求められる場合、英語の文法に自然に従うだけでカバーできる。

残りが `@` や `0` だが、これは **リート（Leet）** と呼ばれる文化である。本来の文字と似た、別の文字や記号を使って表現するものだ。この場合、

- a → `@`
- o → `0`

としている。他にも数字の 3 を E にしたり、アルファベットの g を 9 にしたり、l（エル）を 1（いち）にしたりする。他にも色々ある。

顔文字やギャル文字もそうだが、こういう遊び心は世界共通なのだろう。また、リートはネット文化から来ているらしく、検索避け（援交を円交と書くようなやつ）としての使い方もあるそうだ。逆に厨二病的な心をくすぐらせて、自分の名前をもじるパターンもあるだろう。そっとしておいてあげよう。

おそらく、このリートを実用的にも応用しているのだろう。`a` から `@`、`o` から `0` はわかりやすい。

そうでなくとも、パスワードを作る際にも役に立つ。たとえば `i love usada pekora` をそのままパスワードにしても強度がカスで、おそらく突破されてしまうだろうが、リート化すれば `i10veus@d@p5k0r@` のようになって、強いパスワードになる。でも自分としては覚えやすい。また、Webサービスやゲームなどでアカウント名が取られているときも、リートにすれば回避できることが多い。`pekora123` にするか、`pek0r@` にするか、どちらが良いかは好みだろう。

# おわりに
ポリシーとリートの二点を掘り下げた。

特にリートは、コンピュータで文字を扱うのであれば意外と役に立ちそうである。
モダンWebアプリ開発用の基礎知識詰め込み

知っておくと話が早い。

## Vue.js
  - フロントエンドフレームワーク
  - TypeScript＋SCSS＋HTMLで実装する
  - 同様のフレームワークとして他にReactなどがある
  - 記法としてVueはSFC、ReactはJSXを活用するものが主流
  - JSX記法は過去の遺物である

## TypeScript
  - 型宣言付きのJavaScript
  - VueやReactなどのフロントエンドフレームワークの実装言語として採用されている
  - フレームワーク抜きで単独使用するケースはほぼ無い

## JavaScript
  - ブラウザ上で実行できる(ほぼ)唯一のスクリプト言語
  - Node.js という実行環境を導入することでサーバサイドでも実行可能
  - Node.js のパッケージマネージャとして代表的なものに npm がある
  - npm 管理下のパッケージ群は package.json ファイルに記載される
  - npm 管理下のパッケージ群は node_modules ディレクトリ下に格納される

## nginx
  - Webサーバアプリケーション
  - 例としてWebフロントエンドを構築する場合などに使用する
  - 軽量な他、リバースプロキシやスタブAPIなど必要な機能が手軽に扱えるのもメリット
  - 同様のアプリケーションとして他にApacheなどがある
  - Apacheは既に滅びた

## Python
  - 現状のトレンドであるスクリプト言語
  - AI系の開発をする上でLangChain(LLMライブラリ)の機能を最大限扱える点が何より重要
  - 他にPytorch(機械学習ライブラリ)、Nympy(ベクトル演算ライブラリ)などの存在も強力
  - パッケージマネージャとして代表的なものに pip, pipenv がある
  - pipenv 管理下のパッケージ群は Pipfile ファイルに記載される

## FastAPI
  - Webサーバフレームワーク
  - Pythonで実装する
  - 同様のフレームワークとして他にDjangoなどがある
  - 実装に必要なソースコード量が少なく、直感的なAPIスキーマ定義が可能

## SQLAlchemy
  - Pythonにおいて最もメジャーなORMライブラリ
  - SQLインジェクション耐性の観点からORMを使用しておくのが鉄板

## PostgreSQL
  - RDBMSの一種
  - 同様のRDBMSとしてMySQLなどがある
  - pgvectorという拡張機能によってベクトルDBとして扱えるようになる
  - ベクトルDBの機能は後述のRAGを構築するために必要

## LangChain
  - アプリケーションに対しLLMを組み込むためのライブラリ
  - オープン(≒ローカルに配置して実行可能)なものと比較して高精度なLLMを採用可能になる
     - 最近そうとも言えなくなったのでLocalLLMが熱いという背景あり
     - LocalLLMもLangChainから実行可能なのでどのみち採用しておくべき
  - TypeScriptなどでも扱えるが、Pythonとの親和性が最も高い

## RAG
  - LLMの回答を特定の内容へ特化させたいときに採用できる技術の一つ
  - 企業案件においてLLMを利用したいケースと合致するので流行している
    - 特化利用の例としては「自社製品の紹介」「問い合わせへの回答」など
  - 構築においては特化用の資料となる「データソース」と、ベクトル化したデータソースを保存する「ベクトルDB」の2つの概念が登場する

## Docker
  - コンテナ型の仮想環境プラットフォーム
  - 環境を再現可能な形で独立させることにより、環境依存の排除や移植性の担保を実現する

## DockerCompose
  - Dockerの補助ツール
  - 複数のコンテナからなるアプリケーションを開発する際に便利
  - 例としてWebアプリコンテナとDBコンテナの2つが存在するケースなど
セッションCookieとは

# セッションCookieとは
>`有効期限が設定されていないCookieはWebブラウザが閉じられると同時に削除`されます。このようなCookieを「セッションCookie」と呼びます。一方、`有効期限が設定されたCookieは、Webブラウザを閉じても削除されず、有効期限が来るまでWebブラウザ上に残ります`。CookieはWebブラウザの識別にも利用されるため、`盗まれると他人になりすましされる`ことがあります。そのため、セキュリティ上の観点からショッピングサイトなどではセッションCookieがよく利用されています。

https://www.sbcr.jp/product/4797388817/
DOMContentLoadedとloadの違いについて


# 発火するタイミングが違う

`DOMcontentLoaded`は HTML が全て読み込まれた時点で発火します。
`load`はページ全体（CSS や JS ファイル、外部リソースなども含む）の読み込みが完了した時点で発火する。

という違いあるようです。

# 使い分け

`DOMcontentLoaded`は、ボタンなどにイベントリスナーを追加したい場合に使用するなど。画面上に要素が存在しているので、仮にスタイルがあたっていなくても、ユーザーのリクエストに応じて、反応するようにするため。

`load`は、画像のスライダーなどに用いると良いようです。画像は非同期的に読み込まれるため、全てが読み込まれた時点で発火する`load`が適しています。

# まとめ

普段何気なく使用していたイベントですが、しっかりと違いなどを気にかけることは大事だと改めて気が付くことができました！
【Amazon Connect Customer Profiles】料金について

## はじめに
本記事ではAmazon ConnectのCustomer Profilesの料金について記載しています。
Customer ProfilesはAmazon Connect（コールセンターサービス）で使用できる顧客情報の集約サービスです。

## 本記事の注意点
本記事では以下のように使い分けをしています。
- Customer Profiles：サービスの名称
- 顧客情報：Customer Profilesに登録する顧客データ


## 料金について
公式ドキュメントには以下のようにあります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/688d1746-4592-3ac9-5d68-5af7ef3b8962.png)
https://aws.amazon.com/jp/connect/pricing/

サードパーティーのデータを使用するプロファイルとは、SalesforceやZendeskなどからインポートした顧客情報を指します(S3からのインポートも含みます!)。

またアイデンティティレゾリューションは重複する顧客情報が存在した場合に、マージする機能です。
つまり、Amazon ConnectのエージェントWorkspaceで手作業作成やコンタクトフローでの自動作成のみで、マージさせる機能を使わない場合は無料とのこと！
ただし、「100個以上のオブジェクトを保存するプロファイルの追加増分料金」が発生します。
こちらは100個単位で加算されます（AWSから回答あり）。

## 料金の例

### サードパーティからインポートした顧客情報に200個の通話履歴やケースなどが関連付けられている場合

| 重量対象                       | 料金        | 補足                      |
| ------------------------------ | ----------- | ------------------------- |
| サードパーティからのインポート  | 0.0025      |  __S3からのインポートもサードパーティとみなさます__ |
| 100個ごとの通話履歴やケースなど | 0.0025 * 2  | 今回は200個としているので2倍 |
| 合計                            | 0.0075(USD) |                           |


### Amazon Connect のデータのみを使用するアイデンティティレゾリューションを伴わないプロファイル
__「無料」！！__ です。
（ただし、100個以上の通話履歴やケースが紐づいていない場合）



### 【参考ドキュメント】
- [公式ドキュメント](https://aws.amazon.com/jp/connect/pricing/)
「エージェントの生産性」をクリックし、「Customer Profiles」をクリック

- 顧客情報の作成方法は以下の記事を参考にしていただければと思います。

https://qiita.com/oho-kiyotaka/items/83e25273ed72aa029edd


## まとめ
Amazon ConnectのCustomer Profilesは、基本的にアイデンティティレゾリューション(重複データのマージ機能)を使用しなければ無料で利用できます。
ただし、保存するオブジェクト数が100を超える場合は追加料金が発生します。
他のCRMと比較しても安価もしくは無料で試すことが可能なので、検討してみてはいかがでしょうか。
PythonでLaTeX文書とPDFを作成する

## はじめに

[PyLaTeX](https://jeltef.github.io/PyLaTeX/current/)というライブラリを使うことで、PythonプログラムからLaTeXおよびPDFを作成できます．

## 方法

以下のサンプルプログラムがこの記事の全てなので，ご覧いただくと早いと思います．

https://colab.research.google.com/drive/16csJN92dtpTNIqVmH2ixEoEbx0Ic96a_?usp=sharing

### プログラム

```python
# インストール
%pip install pylatex
!apt-get update
!apt-get install latexmk
!apt-get install -y texlive-lang-japanese

# ホームディレクトリのパスを取得
home_dir = os.path.expanduser("~")
latexmkrc_path = os.path.join(home_dir, ".latexmkrc")

# latexmkrcファイルの中身の定義
content = '''$latex = 'platex -synctex=1 -halt-on-error -interaction=nonstopmode -file-line-error %O %S';
$bibtex = 'pbibtex %O %S';
$biber = 'biber --bblencoding=utf8 -u -U --output_safechars %O %S';
$makeindex = 'mendex %O -o %D %S';
$dvipdf = 'dvipdfmx %O -o %D %S';

$max_repeat = 5;
$pdf_mode = 3;'''

# latexmkrcファイルを作成して内容を書き込む
try:
    with open(latexmkrc_path, "w") as file:
        file.write(content)
    print(f".latexmkrc file has been created successfully at {latexmkrc_path}")
except IOError as e:
    print(f"An error occurred while creating the file: {e}")

# PyLaTeXによりTexおよびPDFの作成
from pylatex import (
    Document,
    Section
)

doc = Document()
with doc.create(Section("はじめに")):
    doc.append("このファイルは，Google Colabから作成されたものです．")

doc.generate_pdf("sample", compiler="latexmk") # PDFファイルの作成

```
SQL Developer 使い始めの初期設定

## はじめに
お仕事でSQL Developerを使用する頻度は高いのですが、個人用の設定は初回に一度行ってしまうと以降触ることが殆どなく、プロジェクトにアサインされる度「あれ、ここの設定はどこからやるんだっけ？」と忘れてしまうので、半ば個人的な備忘録として便利な設定を記載します。

## バージョン
SQL Developer 23.1.1.345.2114

## 0.プリファレンスの表示
ツールバー＞ツール＞プリファレンス
!<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551450/dd445344-e1f3-9238-fcf1-270983aa4d41.png"/>

## 1.行番号の表示
コード・エディタ＞行の左余白
* 行番号の表示をチェック
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551450/1486f56d-8208-7ef6-62d4-e6d695d0012c.png"/>

ペアプロやクエリの相談を受ける際、行位置で会話できるようになりコミュニケーションが楽になります。

## 2.日付書式変更
データベース＞NLS
* 日付・タイムスタンプ書式をRR-MM-DDからYYYY-MM-DDへ変更
* 日付は更にHH24:MI:SSを追加
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551450/a02503d2-ef62-cc7a-dffb-0ae25c639c78.png"/>

過去日も未来日も設定されうるカラムだと、1950年も2050年も見え方が同じになってしまうので、必ず4桁表記にしています。
またOracleに限らない日付型あるあるですが、DATE型は時分秒も持っているのでそれも必ず表示するようにしています。

## 3.null項目の背景色変更
データベース＞拡張
* 背景色を使用したNullの表示に好きな色を設定
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551450/eadd4c99-938a-aa5f-bcfd-a3e49b185f12.png">

SQL Developerでは値が設定されていないカラムに「(null)」が表記されますが、これが文字列型のカラムに表示されていると、NULLなのか文字列'(null)'なのかがわかりませんよね。
そんな値を設定する奇特な人はいないと思いますが、視認性は間違いなく良くなるので背景色をいつもグレーにしています（色は皆さんのお好みで）。
第六正規化までしていればNULLの概念を捨て去れますが、そこまで頑張っているプロジェクトにはまだ出会えていません。私自身がDB設計する時もそこまで分解したくないです...

## 4.エクスポート時の書式設定
### Step1
データベース＞ユーティリティ＞エクスポート＞区切り文字
* デリミタをタブに変更
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551450/12f6139f-c086-74a2-e828-379ebbd4f016.png">

### Step2
データベース＞ユーティリティ＞エクスポート
* DDLオプションのエクスポート/表示のチェック除去
* フォーマットをdelimitedに変更
* 別名保存をクリップボードに変更
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551450/af1a17ff-bb84-a2a9-fcbc-2ced12e79caf.png">

サンプルデータを抜粋したり、エビデンス用に処理結果を抽出したりして、Excelに貼り付ける機会が多い場合のおすすめ設定です。
Excel上でCtrl＋Vの一発でエクスポートした結果を貼り付けられます。
Webアプリ開発～超初心者編～

# 1. はじめに
## 1.1. 自己紹介
普段は、pythonを使って機械学習や深層学習などを行っていますが、この度、webアプリ開発に興味を持ったので挑戦しました。
独学かつ初心者なので誤った情報を伝えてしまうかもしれませんがお手柔らかにお願いします。
今回は、ジャンケンを行ったのちにあっち向いてほいをするプログラムを作ってみました。
筆者は普段pythonを使用しているためpythonのオープンソースフレームワークであるstreamlitを使用して開発を行いました。
本来のアプリ開発では、JavaやC言語が良く用いられると思いますのでこの記事は
「普段pythonを使ってデータサイエンスをしてるけど、アプリ開発にも触れてみたい！」
という方向けになりますのでご理解ください。

## 1.2. 実行環境について
OS　Windows11
anaconda
Python 3.9

# 2.作業手順について
## 2.1. 環境構築
①anacondaをインストールして仮想環境を構築する。
anacondaには、NumPy、Pandas、Matplotlib、Scikit-learnなどのデータサイエンスでよく使われるパッケージが最初から含まれており、追加で簡単にパッケージをインストールできるため初心者には非常に便利です。
詳しい環境構築のやり方は下記の記事を参考にしてください。

↓anacondaのインストール
https://qiita.com/Raphael_de_murl/items/6942fee692de2f13c623

②実行環境を構築する。
筆者は、VScodeを使用しました。
詳しいインストールのやり方は下記でていねいに解説されているので参考にしてください。

↓anacondaのインストールからVScodeの設定まで
https://qiita.com/maami415/items/c0f382fd88e1d173d288

## 2.2.ディテクトリの作成
ディテクトリは以下のように構成しました。
ResultImageの中には、あっち向いてほいのイラストが入っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3889885/12a6ed94-773c-b3a0-ffeb-4ad2651a6388.png)

## 2.3.main.pyの作成
このコードでは、最初にジャンケンにおける選択肢とあっち向いてほいにおける選択肢を指定しています。
その後、if関数を用いて選んだ選択とランダムに選んだコンピュータの選択の関係性によって出力結果を変えています。
ジャンケンであれば、グーに対してチョキなら「あなたの勝ち！」と表示。

~~~~~~~~python:main.py
import streamlit as st
import random

st.title("あっち向いてホイ")

# じゃんけんの選択肢
janken_choices = ["グー", "チョキ", "パー"]
directions = ["上", "下", "左", "右"]

st.write("ジャンケンに勝った後、方向を選んでください。")

st.write("ジャンケンスタート！")

# プレイヤーのじゃんけん選択
player_janken = st.selectbox("出す手を選んでください：", janken_choices)

if st.button("ジャンケン！"):
    # コンピュータのじゃんけん選択
    computer_janken = random.choice(janken_choices)
    st.write(f"コンピュータの選択: {computer_janken}")

    # 勝敗判定
    if (player_janken == "グー" and computer_janken == "チョキ") or \
       (player_janken == "チョキ" and computer_janken == "パー") or \
       (player_janken == "パー" and computer_janken == "グー"):
        st.write("あなたの勝ち！方向を選んでください。")
        st.image("ResultImage/Win.png")
        
    else:
        st.write("残念！あなたの負け")
        st.image("ResultImage/Lose.png")


# プレイヤーの選択
player_choice = st.selectbox("方向を選択：", directions)

if st.button("あっち向いてホイ！"):
    # コンピュータの選択
    computer_choice = random.choice(directions)
    st.write(f"コンピュータの方向: {computer_choice}")
    
    # 勝敗判定
    if player_choice == computer_choice:
        st.write("あなたの勝ち！")
        st.image(f"ResultImage/{player_choice}.png")
        
    else:
        st.write("残念！あなたの負け")
        st.image("ResultImage/Lose.png")

    
~~~~~~~~~~

# 3.実行
## 3.1.実行方法
vscodeを開いて、menu_appフォルダを開きます。
ターミナルから新しいターミナルを開きpowershellからcommandpromptに切り替えます。
conda activate achimuite_hoi(仮想環境)と打ち込み実行します。
streamlit run main.pyと実行することで、アプリが起動

## 3.2.実行結果
以下のような感じで結果が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3889885/4e3233ce-ce12-9aed-c670-f06147eacd53.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3889885/6c421583-fdee-96be-4043-5922896bee9f.png)

# まとめ
以上、初めてのアプリを作成してみました。
今後も引き続きアプリ開発の勉強をしていきたいと思います。
Error: You must sign in or use a license key with Serverless Framework V.4 and later versions. Please use "serverless login".の解決方法

Serverless Frameworkをv3系からv4系にアップグレードしたところ、デプロイワークフローで以下のエラーが出たので、解消時の手順を記載します。

```
$ nest build && sls deploy


✖ Error: You must sign in or use a license key with Serverless Framework V.4 and later versions. Please use "serverless login".
    at Authentication.getAuthenticatedData (file:///home/runner/.serverless/releases/4.4.3/package/dist/sf-core.js:647:10535)
    at async Authentication.resolverAuthenticate (file:///home/runner/.serverless/releases/4.4.3/package/dist/sf-core.js:649:20575)
...
```

## エラーの原因
Serverless Framework V.4 以降、デプロイ時にCLIの認証が必要になったみたいです。このため、CI/CD環境(GitHub Actionsなど)では、自動的に認証するためにアクセスキーを設定するのが推奨されるとのことでした。

## 解決方法

### 1. Serverlessダッシュボードでアクセスキーを発行
Serverless Frameworkのダッシュボードにログインし、アクセスキーを発行します。
アクセスキーは以下のリンクから作成できます。
`https://app.serverless.com/{org}/settings/accessKeys`

![スクリーンショット 2024-10-01 15.50.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/c2099024-36d6-6e79-3ba9-7a71fb043500.png)

#### 参考ドキュメント

https://www.serverless.com/framework/docs/guides/dashboard/cicd/running-in-your-own-cicd


### 2. GitHub Secretsにアクセスキーを登録
発行したアクセスキーをGitHub Secretsに登録します。
`https://github.com/{org}/{repo}/settings/secrets/actions`

![スクリーンショット 2024-10-01 15.53.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/d1e2d9f1-f49e-1caa-e7d7-208cd05c04bb.png)

### 3. ワークフローのデプロイステップでアクセスキーを読み込む
CI/CD環境でアクセスキーを使用するため、GitHub Actionsのワークフローにアクセスキーを設定します。以下のように、デプロイステップで`SERVERLESS_ACCESS_KEY`を読み込むように設定します。

```yml
      - name: Setup environment
        run: |
          echo "SERVERLESS_ACCESS_KEY=${{ secrets.SERVERLESS_ACCESS_KEY }}" >> $GITHUB_ENV

      - name: Build and Deploy NestJS to Lambda
        run: yarn deploy:${{ env.ENV }}
        working-directory: ./backend
        env:
          SERVERLESS_ACCESS_KEY: ${{ env.SERVERLESS_ACCESS_KEY }}
```

`SERVERLESS_ACCESS_KEY`が適切に設定されることで、Serverless Frameworkは自動的にダッシュボードに認証し、`serverless login`を手動で実行する必要がなくなります。
Laravelのテーブルリレーションにおける1対多の関係について

# はじめに
以下の記事はLaravelでリレーション関係を構築した際に手順をまとめたメモになります

## 1対多のリレーション設定について
- `外部キーが存在するテーブル`はリレーションの 「多」 に相当します

- `外部キーで参照されるテーブル`はリレーションの 「1」 になります

## 例題
商品情報を扱うproductsテーブルとカテゴリの情報を扱うcategoriesテーブル存在します。２つのテーブルはリレーションの関係にあるとします

### categoriesテーブル(1）
| id | name     | description      |
|----|----------|------------------|
| 1  | 食品     | 食品カテゴリ      |
| 2  | 家電     | 家電カテゴリ      |

### productsテーブル（多）

| id | name    | price | category_id |
|----|---------|-------|-------------|
| 1  | 米      | 1000  | 1           |
| 2  | テレビ  | 50000 | 2           |
| 3  | パン    | 200   | 1           |

- 上記の例では、「米」と「パン」はどちらも「食品カテゴリ」に属しています
- 一方で「テレビ」は「家電カテゴリ」に属し、category_idが2です

## モデルのリレーション定義

- Categoryモデルは「1対多」を表すため、hasManyメソッドを使います
```php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use App\Models\Product;

class Category extends Model
{
    public function products()
    {
        return $this->hasMany(Product::class);
    }
}

``` 
- Productモデルは「多対1」を表すため、belongsToメソッドを使います
``` php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use App\Models\Category;


class Product extends Model
{
    public function category()
    {
        return $this->belongsTo(Category::class);
    }
}
```
これにより、各モデル間で正しくリレーションを設定でき、データベースから関連するデータを簡単に取得することができます。



## 多対多の場合

https://qiita.com/EasyCoder/items/770861cc21852a7ed0b0

## まとめ
テーブルに外部キーがある場合、そのテーブルはリレーションの『多』側となり、外部キーで参照しているテーブルが『1』側となる

## 参考文献
https://laravel.com/docs/11.x/eloquent-relationships
グラフライブラリ 0. 企画、データ構造

*この記事は韓国語から翻訳したものです。不十分な部分があれば、いつでもフィードバックをいただければありがたいです！ ([オリジナル記事](https://blog.chungjungsoo.dev/dev-posts/graph-library-0/), 同じく私が作成しました。)*


グラフライブラリを実装するために必要な企画と資料構造についてまとめてみました。 ([project repo](https://github.com/boostcampwm2023/and09-PriceGuard), [library repo](https://github.com/Taewan-P/material-android-chart))


## 企画

![graph_library_plan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3896189/bba0a5cc-674b-fd7c-15dd-37bebead4fe2.png)


まず、私たちのプロジェクト企画に合うようにグラフライブラリを実装するため必要な機能を整理してみたところ、上のように大きく二つに分かれました。シンプルモードと詳細モード。シンプルモードは単純にグラフだけを提供し、詳細モードでは軸とタッチすると価格表がオーバーレイされる機能を提供します。ここでは詳細モードを先に実装し、シンプルモードは詳細モードで入れた機能を削除するオプションを追加する方法で実装することにしました。また、このライブラリをオープンソースとして配布することを目標にしました。

これに基づいて実装の順番を定義してみます、 

1.カスタムビューを作る
2.グラフ軸を描く
3.グラフを描く
4.デザインを施す
5.タッチとインタラクションを実装する
6.配布する

上記の順番でブログポスティングをしようと思います。


## データ構造

```kotlin
interface ChartData {
    val x: Float
    val y: Float
    val valid: Boolean
}
```

まず、プロジェクトのUseCaseに合わせてデータを定義してみました。x,y座標を持っていて、validはそのデータが有効なデータかどうかを示します。(私たちのプロジェクトでは売り切れの場合、validがfalseになります)validがfalseの場合、その部分だけグラフラインの色を変更できるようにしました。また、x,yの値は企画に合わせてFloatで固定するようにしました。


```kotlin
interface ChartDataset {
    val showXAxis: Boolean
    val showYAxis: Boolean
    val isInteractive: Boolean
    val graphMode: GraphMode
    val data: List<ChartData>
    val gridLines: List<GridLine>
}
```

計画に基づいて、グラフライブラリから受け取るデータを定義してみました。シンプルモードと詳細モードのためにX軸、Y軸の活性化の有無、グラフのインタラクションの有無、グラフのモード(グラフを表示する期間の選択)、データ、そして目盛りのリストを追加しました。


```kotlin
enum class GraphMode {
    DAY,
    WEEK,
    MONTH,
    QUARTER
}

interface GridLine {
    val name: String
    val value: Float
}
```

結果的にチャートデータをこのように構築したことを見ると、とても残念な気がします。最初に企画する段階では誰でも使えるように汎用的なライブラリを作ってオープンソースで配布しようとしましたが、プロジェクトのUseCaseに合わせて構築及び実装していたら汎用性が低いライブラリになってしまいました。現在、X軸は時系列データのみ可能で、X,YデータともにFloat型のみサポートする変なライブラリになってしまいました。この部分は後日リファクタリングで必ず改善したいと思います。


次の記事ではカスタムビューを作成して初期設定する部分について説明します。
Wi-Fi環境でのUbuntu PCのIPアドレス手動設定

なぜかGUIでのIPアドレスの変更ができなくて、悔しくてターミナルから変更してみました。
調べた限りでは、おそらく他の方法もあると思いますが、せっかくなので記事に残しておこうと思います。

# 注意事項
- 今回は自宅のネットワーク環境を前提としています。
企業や公共のネットワークでは、管理者に相談してください。
(おそらく制限があると思いますが、念の為・・・)
- 今回は画像などがないので、あまり面白くないかもしれません。
ご了承ください。
# ネットワークインターフェース名を見つける
ネットワークインターフェース名を特定します。通常、Wi-Fiインターフェース名は wlp で始まることが多いですが、システムによって異なる場合があります。
``ip link show``
「wlp1s0」や「wlan0」を探してみてください。
# Wi-Fi接続プロファイルを確認、削除(必要に応じて)
- 現在のWi-Fi接続プロファイル名を確認します。
※Wi-Fi接続していない場合は表示されません。
※プロファイル名の設定をしていない場合、SSIDと同じ可能性が高いです。
``nmcli c``
- 見つけたプロファイル名を使用して、削除します。(必要に応じて)
``nmcli c delete [プロファイル名]``
# Wi-Fi接続プロファイルの作成と設定
先ほど見つけたネットワークインターフェース名とプロファイル名(または接続したいプロファイル名)を使用します。
``nmcli c add type wifi ifname "インターフェース名" con-name "任意のプロファイル名" ssid ”ルータのSSID”``
# セキュリティ設定
Wi-Fiのセキュリティ設定を行います。
- Wi-Fi接続のセキュリティ方式をWPA-PSKに設定します。
- 指定されたWi-Fiパスワードを設定します。
``nmcli c modify "任意のプロファイル名" wifi-sec.key-mgmt wpa-psk``
``nmcli c modify "任意のプロファイル名" wifi-sec.psk "Wi-Fiパスワード"``
# IPアドレス、ゲートウェイ、DNS設定
- "今回変更したいIPアドレス/サブネットマスク"：ご自身のネットワーク環境を確認して、範囲内のIPアドレスとサブネットマスクを使用してください。
(例)192.168.1.100/24
- 自分のゲートウェイ：ホームルータのIPアドレスを使用しています。
- 自分のDNSサーバー：ホームルータのIPアドレスを使用しています。
``nmcli c modify "任意のプロファイル名" ipv4.method manual ipv4.addresses "今回変更したいIPアドレス/サブネットマスク" ipv4.gateway "自分のゲートウェイ" ipv4.dns "自分のDNSサーバー"``
# 新しい接続プロファイルの適用
適用がうまくいけば変更は完了です。
``nmcli c up 任意のプロファイル名``
# 設定の確認
``nmcli c show 任意のプロファイル名``
設定したものが反映されているか確認しましょう。

# 最後に
そういえばUbuntuでIPアドレス手動で設定するのどうするんだろ・・・
から始まりました。
正直もっと簡単な方法があるんだろうなと感じています・・・
ご存知の方がいれば情報共有お願いします！
GUIからなんで変更できなかったんだろ・・・
とりあえず今回は設定できたので良しとします！ｗ
AIを使った異常検知に使えるデータセット6選🎯

## はじめに

製造業では、AIを使って製品の異常を早く見つける技術が大注目！📈でも、正確に異常を検知するためには、いいデータが必要です。今回は、産業向け異常検知に使える6つのデータセットを紹介します！

## 1. MVTecAD🔧

- ![Some images with good and bad examples](https://www.mvtec.com/fileadmin/_processed_/1/e/csm_dataset_overview_large_6f330dede4.png)
- **特徴:** 15種類の製品と素材（例: ボトル、金属、織物）をカバー。
- **活用:** AIで製品の異常を検出し、自動検査システムの開発に活用できます。
- **リンク:** [MVTecAD](https://www.mvtec.com/company/research/datasets/mvtec-ad)

## 2. VisA🛠️

- ![img](https://github.com/amazon-science/spot-diff/raw/main/figures/VisA_samples.png)
- **特徴:** 9つの製品カテゴリをカバーし、複数の異常タイプに対応。
- **活用:** 工場の生産ラインでAIを使った異常検知に役立ちます。
- **リンク:** [VisA](https://github.com/amazon-science/spot-diff)

## 3. MPDD🔩

- ![alt text](https://github.com/stepanje/MPDD/raw/main/samples.png)
- **特徴:** 金属部品の欠陥を検出するために作られたデータセット。
- **活用:** 自動車部品や機械部品の表面異常をAIで検出。
- **リンク:** [MPDD](https://github.com/stepanje/MPDD)

## 4. BTAD🏭

- ![img](https://github.com/pankajmishra000/VT-ADL/raw/master/image/bt_anomaly_dataset.png)
- **特徴:** 実世界の製造現場でのデータを元に作成。
- **活用:** 実際の工場での異常検知システム開発に活用。
- **リンク:** [BTAD](https://github.com/pankajmishra000/VT-ADL)

## 5. DAGM🖼️

- ![img](https://hci.iwr.uni-heidelberg.de/sites/default/files/node/images/1530652916/examples_small.jpg)
- **特徴:** 10種類のテクスチャを持つ合成データセット。
- **活用:** 大量の合成データでAIモデルをトレーニング。
- **リンク:** [DAGM](https://hci.iwr.uni-heidelberg.de/content/weakly-supervised-learning-industrial-optical-inspection)

## 6. DTD-Synthetic🎨

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208980/ae934273-fd94-cb6a-42c9-f547f726bda9.png)


- **特徴:** 47種類のテクスチャカテゴリをカバーする合成データセット。
- **活用:** 表面テクスチャの異常検知に特化したモデルを開発。
- **リンク:** [DTD-Synthetic](https://www.robots.ox.ac.uk/~vgg/data/dtd/)

## まとめ🎉

これらのデータセットを活用すれば、AIによる自動異常検知の精度がグッと向上！製品やデータに合ったものを選んで、最適なAIモデルを作りましょう。
オリジナルアプリ制作過程　〜wants〜


### 本日の進捗報告: Wantsアプリのリクエスト機能実装

#### 1. ルーティングの設定

まず、`config/routes.rb` を更新しました。リクエストに関連するルートを設定し、`requests#index` をアプリのルートパスに設定しました。

```ruby
Rails.application.routes.draw do
  resources :requests, only: [:index, :new, :create]
  devise_for :users
  root to: "requests#index"
end
```

#### 2. リクエストコントローラーの実装

次に、リクエスト一覧と新規リクエスト投稿機能を `app/controllers/requests_controller.rb` で実装しました。リクエストの一覧表示、リクエスト作成フォームの表示、リクエストの作成処理を定義しました。

```ruby
class RequestsController < ApplicationController
  def index
    @requests = Request.all
  end

  def new
    @request = Request.new
  end

  def create
    @request = Request.new(request_params)
    @request.user = current_user

    if @request.save
      redirect_to requests_path, notice: 'リクエストが作成されました。'
    else
      render :new
    end
  end

  private

  def request_params
    params.require(:request).permit(:title, :description, :category_id, :max_price, :min_price, :image, :shipping_charge_id)
  end
end
```

#### 3. ユーザーモデルの更新

また、ユーザーモデル `app/models/user.rb` にバリデーションを追加し、リクエストとの関連付けを行いました。これにより、ユーザーがリクエストを作成できるようになっています。

```ruby
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  validates :first_name, presence: true, format: { with: /\A[ぁ-んァ-ン一-龥々ー]/ }
  validates :last_name, presence: true, format: { with: /\A[ぁ-んァ-ン一-龥々ー]/ }
  validates :nickname, presence: true
  validates :password, format: {with: /\A(?=.*?[a-z])(?=.*?[\d])[a-z\d]+\z/i}

  validates :first_name_kana, presence: true, format: { with: /\A[ァ-ヶー－]+\z/ }
  validates :last_name_kana, presence: true, format: { with: /\A[ァ-ヶー－]+\z/ }
  validates :birthday, presence: true

  has_many :requests, dependent: :destroy
  has_many :products, dependent: :destroy
  has_many :question_response
  has_many :histories
end

```

#### 4. 振り返り

今回の進捗では、リクエスト一覧と新規作成機能をスムーズに実装できました。今後は、ビューの調整やエラーハンドリングの改善に取り組む予定です。
DirectX12でミクさんを躍らせてみよう１－概要

# 初めに
DirectX12を使ってFBXとVMD読み込んでミクさんを躍らせるプログラムを作ります。

DirectX12での基本的な描画の実装やポストプロセス効果などの実装について述べます。
記事は何回かに分けて作成する予定です。

もともとはDirectXを勉強するために始めたのですが、かなり時間をかけたので記録を残したいと思いました。また、3Dレンダリングに興味があって勉強を始める方に役立つのではないかと思い、記事を書くことにしました。

質問や指摘歓迎します。

# なぜDirectX12?
私が3Dプログラミングに初めて興味を持って使ったのがDirectX11だったからではないかと思います。DirectX11でも問題ないかもしれませんが、実際にはDirectX12のほうが最新のAPIであり、最近ではレイトレーシングなどの技術も導入されているため、古いAPIよりも最新のAPIを使ってみるのが良いと思います。そして、実際にコードもかなり異なるためです。

# 必要な知識
基本的なC++の知識と3D描画に必要な線形代数学の知識が必要です。
この記事の通りに進めればプログラムを作成することに問題はないと思いますが、3D描画に関する知識が全くない場合、内容を理解するのは難しいかもしれません。
そのような場合は、事前に線形代数学を学ぶか、記事を進めながら必要な情報を調べてください。

# 環境
私がプログラムを作成した環境は以下の通りです。
参考してください。
VisualStudio2019
AMD Ryzen7 3700X
NVDIA RTX2070 Super
MEMORY 32GB
Windows 10

# 全体記事
https://qiita.com/dpals39/items/5c521d0371a2de46f2c3

https://qiita.com/dpals39/items/0a9dee9e955e04629a79

https://qiita.com/dpals39/items/773846ab3c8f9abedc79

https://qiita.com/dpals39/items/c99a229c39f2a14256a0

https://qiita.com/dpals39/items/f296a458d4905dfa7341

https://qiita.com/dpals39/items/ea06391fc3aad92b2b65

https://qiita.com/dpals39/items/5ec6c9160b369643bcae

https://qiita.com/dpals39/items/efbc92204341bf65fd38

https://qiita.com/dpals39/items/528aa66a382c6747a35a

https://qiita.com/dpals39/items/e3d4bf20b0475cd9bd7c

https://qiita.com/dpals39/items/35d430a8128c31216a2d

https://qiita.com/dpals39/items/24ba358f533f12c516dd

https://qiita.com/dpals39/items/62e89592328e463ddf17

https://qiita.com/dpals39/items/dcdef753f40cfdfd7a60

https://qiita.com/dpals39/items/b9bd6cd0cc68b448e45a

https://qiita.com/dpals39/items/1681d9101e58b5aefa27

https://qiita.com/dpals39/items/8954c311149e9380c624

https://qiita.com/dpals39/items/52d5e842fa5be8815069

https://qiita.com/dpals39/items/ff8af2bb11ac24d66721