OmniAICreator/Qiita-1.07M huggingface dataset:
闘魂Elixir ーー AtCoder Beginner Contest 346(A)をElixirで楽しむ

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>

<b><font color="red">$\huge{闘魂とは己に打ち克つこと。}$</font></b>
<b><font color="red">$\huge{そして闘いを通じて己の魂を磨いていく}$</font></b>
<b><font color="red">$\huge{ことだと思います}$</font></b>


# はじめに

[AtCoder Beginner Contest 346](https://atcoder.jp/contests/abc346)を[Elixir](https://elixir-lang.org/)で解いてみます。

[AtCoder](https://atcoder.jp/)を解くのが趣味で、休憩時間に解いているという若い人がいて、それってすごい意識の高い休憩時間の過ごし方だと思って、私も真似してみることにしました。


# [AtCoderをElixirでやってみる](https://zenn.dev/torifukukaiou/articles/ac84c87736ceebf4da01)

入力の読み取り方や解答の作り方は、別の記事にまとめています。


https://zenn.dev/torifukukaiou/articles/ac84c87736ceebf4da01

ご参照くださいませ。

[Elixir](https://elixir-lang.org/)で[AtCoder](https://atcoder.jp/)を楽しむためには、エントリポイントを`Main.main/0`にする必要があります。つまり`Main`モジュールを作って、その中に`main/0`関数を定義するわけです。

# [A - Adjacent Product](https://atcoder.jp/contests/abc346/tasks/abc346_a)

問題はリンク先をご参照くださいませ。
私の解答を貼っておきます。


<details><summary>私の解答</summary>

_問題文を読んでいることを前提にひとこと解説をしておきます。_

ひとつ前の要素と要素を掛け算したリストを作ればよいわけです。
解法の骨格には、[Enum.reduce/3](https://hexdocs.pm/elixir/Enum.html#reduce/3)を使いました。


```elixir
defmodule Main do
  def main do
    _n = IO.read(:line) |> String.trim() |> String.to_integer()
    a_list =
      IO.read(:line) |> String.trim() |> String.split(" ") |> Enum.map(&String.to_integer/1)
      
    solve(a_list)
    |> IO.puts()
  end
  
  def solve(a_list) do
    [head | tail] = a_list
    
    tail
    |> Enum.reduce({[], head}, fn a, {list, before_a} ->
      {[a * before_a | list], a}
    end)
    |> elem(0)
    |> Enum.reverse()
    |> Enum.join(" ")
  end
end
```




</details>




---

# さいごに

[AtCoder Beginner Contest 346](https://atcoder.jp/contests/abc346)を[Elixir](https://elixir-lang.org/)で解くことを楽しみました。

あなたのお好きなプログラミング言語でお楽しみください。

---


**闘魂**とは、  **「己に打ち克つこと。そして闘いを通じて己の魂を磨いていくことである」** との猪木さんの言葉をそのまま胸に刻み込んでいます。
知っているだけで終わらせることなく、実行する、断行する、一歩を踏み出すことを自らの行動で示していきたいとおもいます。
**アントニオ猪木さんのメッセージから元氣をもらったものとして、それを次代に語り継ぎ、自分自身が「闘魂」を体現するものでありたいとおもいます。**

---

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>
<b><font color="red">$\huge{１、２、３ ぁっダァー！}$</font></b>
大規模言語モデル入門 第5章 大規模言語モデルのファインチューニング(2)


[大規模言語モデル入門](https://amzn.asia/d/16Wzurj ) の輪読会を開催したので、発表に使った資料を一部修正して公開します。

# 自然言語推論
* JNLI
    * 自然言語推論のデータセット
    * 2つの文章の関係性を3パターンに分類する。（分類）
* 2つの文章を1つの文章として繋げて、エンコーダにぶち込む。
    * entailment=含意, contradiction=矛盾, neuetral=中立

# 意味的類似度計算
* JSTS
    * 意味的類似度計算のデータセット
    * 2つの文章の類似度を計算する。（回帰）
    * 2つの文章を1つの文章として繋げて、エンコーダにぶちこんでいる。
    * 回帰タスクなので相関係数や平均二乗誤差などで評価している。
    * 解答スコア：JSTSのスコアは0-5をとるように作られている。

# 多肢選択式質問応答
* JCommonsenseQA
    * 多肢選択式質問応答のデータセット。
    * 5択のクイズ問題形式になっている。
    * 質問と回答を繋げた5つの文章をそれぞれエンコーダに入れてスコアを出力し、最終的に1番高い選択肢を回答とする。

# メモリ効率の良いファインチューニング
ハードウェアの制限状況下でファインチューニングを行うためのテクニックが4つある。Kaggleとかで使えそうな話。

* 自動混合精度演算
    * FP32とFP16を使い分けて高精度かつ高効率な学習をする手法。
    * ネットワークの前向き計算と誤差逆伝播はFP16を使う。
    * パラメータ更新にはFP32を使う。
    * 値が小さくなりすぎて0になるのを防ぐために、損失スケーリング（＝値を定数倍する）なども行っている。
* 勾配累積
    * 小さなバッチサイズで計算した勾配を集約することで、メモリ使用量を抑えながら実質のバッチサイズを増やす手法
    * 例えばバッチサイズ16で2回勾配累積を行うと、バッチサイズ32で学習した場合と同じぐらいの精度が得られる。
* 勾配チェックポインティング
    * 前向き計算の途中の計算結果を間引く方法
    * torch.utils.checkpoints.checkpoints
* LoRAチューニング
    * LoRA(Low-Rank Adaptation)
    * 普通のファインチューニングはh=WXのWを更新するが、LoRAはh=(W+ΔW)Xとすることで、ΔWをチューニングしている。
    * 差分の行列とはなんぞや...？

# 日本語大規模言語モデルの比較
* LUKE (Language Understanding with Knowledge-based Embeddings)
    * Wikipediaから得られるエンティティ情報を取り入れた日本語モデル
    * エンティティとは
        * 特定の概念（人物、場所、組織、出来事）を指す。
    * エンティティを取り入れることによって、固有表現認識や質問応答などのタスクの性能を向上させる。

* DeBERT V2 (Decoding-enhanced BERT with disentangled attention)
    * Microsoftが開発したBERTのアーキテクチャを改良した日本語モデル
    * Enhanced Mask DecoderとnGiEという仕組みが搭載されている。

# 性能比較
* JCommonsenseQAはちょっと難しめのタスクであることがわかる。
* DeBERTはアーキテクチャと学習データがOSCAR分多いから性能が高いと考えられる。

# 参考文献
* [大規模言語モデル入門](https://amzn.asia/d/3xTMT8o)
pycharmからmatplotlibで動的にグラフを表示

# アニメーションが出力されない

pycharmのデバッグで連続描画をさせようと思ったのですが、IDEの右側のウィンドにpngとして出力されるだけで動画になってくれませんでした。同じスクリプトをターミナルから実行すると動画表示ができます。動画生成そのもののミソはfig.show()の代わりにfig.pause()を使うところです。

サンプルコードは
https://www.useful-python.com/matplotlib-realtime/
を流用させて頂いております。

どうもpycharmから動画表示するには、matplotlibのbackendというのを指定する必要があるようです。Intel mac Sonoma python3.12.4 の場合、下記の指定でIDEとは別ウィンドウにプロットが表示されました。


```
# モジュールの取得
import numpy as np
import matplotlib
from matplotlib.pyplot import subplots, pause

matplotlib.use("MacOSX") # !!これを追記!!かつブレークを貼る

# step1 データの作成
xs = []
y1 = []
y2 = []
fig, ax = subplots()

# プロット
for x in np.linspace(0, 10, 100):
    # 値を更新
    xs.append(x)
    y1.append(4 + 2 * np.sin(2 * x))
    y2.append(4 + 2 * np.cos(2 * x))
    # グラフ描画
    line1, = ax.plot(xs, y1, color='C0', linestyle='-', label='Sample1')
    line2, = ax.plot(xs, y2, color='C1', linestyle='--', label='Sample2')
    # 0.1秒停止
    pause(0.1)
    # 描画したグラフを削除
    line1.remove()
    line2.remove()
```

useのところでブーレークポイントを貼っておかないと、なぜかプロットウィンドが表示されないことがあります。

# windowが常に前に表示されるのは困る(追記)

上記のやり方だと、描画はできるもののウィンドウが更新されるたびに常に手前に出てきてしまいます。MacOSXの代わりにTkAggを指定する、という記事が見受けられます。ところがMacOSの場合、TkがPythonに入っていないようで、別にインストール必要がありました。

Pycharmのターミナルで python3 -v で現在実行されているpython のバージョンを確認して(
私の場合は3.10.14)


```
brew install python-tk@3.10
```

を実行してMacOSXの代わりにTkAggを指定すると、描画windowが出しゃばることはなくなりました。
UbuntuのMinecraft Java版でサーバーに入りプレイする方法

## 環境
バージョン : Ubuntu24.04LTS
カーネル : 6.8.0-35-generic

## 1. サーバーのアドレスの確認
まずは、入りたいサーバーのアドレスを確認します
今回は「できたてサーバー（猫）」にします

まず、[サーバーのWebサイト等](https://www.dekitateserver.com/)にアクセスして、サーバーのアドレスを確認します
アドレスをコピーしておきましょう

## 2. マイクラを起動＆設定
アプリ一覧から「Minecraft Launcher」を選択して、起動します
そしたら、「マルチプレイ」ボタンを押して、
「サーバーを追加」を押します
そして、「サーバー名」にわかりやすい名前を入力して、
「サーバーアドレス」の欄に、コピーしたアドレスをペーストします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691296/bcfe9b87-5129-ed34-a71e-25274d6395b7.png)

## 3. サーバーに接続
サーバーをリストに追加したら、
サーバーを選択して、「サーバーに接続」を押します
すると、せつぞくできます
marktextで画像を同一フォルダ内に保存する方法

# marktextで画像を同一フォルダ内に保存する方法

marktextでmarkdownファイルに画像を張り付けるとき、

クリップボードからコピーで保存される画像を、markdownファイルと同一ディレクトリ内に、置きたい

# 手順

”≡” → "File" → "Preference"

または、

”≡” → "edit" → "Open folder..." で開いたウインドウの左下に表示される設定マークをクリック

![2024-06-15-19-45-59-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780466/2378d635-b4ad-b555-e1b3-168de6203675.png)


"image"" をクリック。


"Prefer relative assets folder; "を有効にし、

以下の画面の赤丸を付けた部分に、ドット "."を入力

（.はカレントディレクトリの意味）

![2024-06-15-17-45-51-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780466/628f266e-8def-77df-aed5-998e2cc698b0.png)

# 注意

"Open folder..."で開いたmarkdownファイルの場合、

クリップボードから貼り付けた画像は、フォルダ直下に置かれる。

なので、今の方法では、ファイルを直接開いて編集する必要がある。



# 参考

[marktext/docs/IMAGES.md 開発中 · marktext/marktext · GitHub](https://github.com/marktext/marktext/blob/develop/docs/IMAGES.md)

[marktext/docs/i18n/ja.md at develop · marktext/marktext · GitHub](https://github.com/marktext/marktext/blob/develop/docs/i18n/ja.md)

[Typoraの移行先のマークダウンエディタを見つけたので紹介する｜fumi](https://note.com/note_fumi/n/n5c7879340087)
Macはデフォルトでtreeコマンド使えなかったので導入した(treeコマンドの概要)

macで何気なく`tree`コマンドを入力したらこんなことが返ってきた．
```bash
$ tree
```
```
zsh: command not found: tree
```
ないよって言われてしまった．どうやらデフォルトでは`tree`コマンドは存在しないみたいだ．
Windowsではデフォルトで使えたはずだと思うが...


# そもそもtreeコマンドとは
ディレクトリとその中のファイルをツリー状に表示するコマンドラインツール
こんな感じでディレクトリやファイル構造を出力してくれる
```
.
├── ディレクトリ1
│   ├── ファイル1
│   └── ファイル2
└── ディレクトリ2
    └── ファイル3
```
# どのような時に使うの？
1. **プロジェクトの構造の理解**
新しいプロジェクトに取り組む際や，既存のプロジェクトの構造を迅速に把握する必要がある時に，tree コマンドを使うと，どのようなディレクトリやファイルが存在しているか一目でわかる．

2. **ドキュメント作成**
プロジェクトのドキュメントや報告書を作成する際に，プロジェクトのディレクトリ構造を説明するために，tree コマンドの出力を利用することができる．例えばQiitaを書いたり，社内Wikiを書いたり，プルリクエスト送る際に有効である．

3. **バージョン管理の整理**
バージョン管理システム（例えば Git）を使用している場合，プロジェクトのディレクトリ構造を定期的に確認し，不要なファイルやディレクトリがトラッキングされていないか確認するのに tree コマンドが使える．これにより，リポジトリの整理を助け、誤ってファイルが追加されるのを防げる．

# treeコマンドを使えるようにする
macの場合homebrewがプリインストールされているはずなので以下のコマンドを入力して`tree`をインストールする．
```bash
brew install tree
```
これだけで使えるようになる．



# 実際の使用例
こんなディレクトリ構造だったとしよう
![スクリーンショット 2024-06-15 11.55.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/6398b30f-92f4-8c13-fc6e-2114a37824c3.png)
![スクリーンショット 2024-06-15 11.55.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/62beb545-d664-d32d-1fd2-a34482a14787.png)


:::note info
Macでは，`.`から始まるディレクトリやファイルは隠しファイルで通常の状態だと見ることができない
`cmd`+`shift`+`.`を同時に押すと表示，非表示ができる
:::




## tree
デフォルトの使い方．これだけでツリー状に出力してくれる．
```
tree
```
```
.
├── README.md
└── project
    ├── file1.txt
    └── src
        └── code.cpp
2 directories, 3 files
```

## tree -C
(対応していれば)ツリー状の出力に対してディレクトリやファイルに色をつけてくれる
```bash
tree -C
```
![スクリーンショット 2024-06-15 19.47.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3757442/67a9b9a9-9a89-8c94-a6fc-0bb244d0a9ea.png)




## tree -a
隠しファイル，隠しディレクトリも含めてツリー状に出力する．
```bash
tree -a
```

```
.
├── .DS_Store
├── .hiddendir
│   ├── .hiddenfile
│   └── file2.txt
├── README.md
└── project
    ├── .hidden.txt
    ├── file1.txt
    └── src
        └── code.cpp
```

## tree -d
ディレクトリのみツリー状に出力する
```bash
tree -d
```

```
.
└── project
    └── src

3 directories
```

## tree -L
ディレクトリの深さを制限してツリー状に出力する
```bash md:L=1の時
tree -L 1
```

```
.
├── README.md
└── project
```
## tree -f
各ファイルとディレクトリのフルパスをツリー状に表示する
```bash
tree -f
```

```
tree -f
.
├── ./README.md
└── ./project
    ├── ./project/file1.txt
    └── ./project/src
        └── ./project/src/code.cpp

3 directories, 3 files
```
# treeコマンドのオプションを組み合わせよう
このオプションを以下のように組み合わせて使えば隠しファイルも含めたすべてのファイルとディレクトリをフルパスで表示させられる．
```bash
tree -a -f
```
```
.
├── ./.DS_Store
├── ./.hiddendir
│   ├── ./.hiddendir/.hiddenfile
│   └── ./.hiddendir/file2.txt
├── ./README.md
└── ./project
    ├── ./project/.hidden.txt
    ├── ./project/file1.txt
    └── ./project/src
        └── ./project/src/code.cpp

4 directories, 7 files
```
このように使用することができる．
HTMLとCSSを使った横スライドアニメーションの実装

# はじめに
本記事ではHTML、CSSを使用しテキストに横スライドアニメーションをつける方法について記載します。


# ゴール
次のような横スライドアニメーションを作成する事を本記事のゴールとする。

![slideanimsa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/8a68ffd8-449a-6499-9b82-97523f37680b.gif)


# ソース

## HTML
htmlファイルを準備します。今回は`横からテキストをスライド表示`という`ht`タグのテキストをスライド表示させます。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横スライドアニメーション</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="animated-text">横からテキストをスライド表示</h1>
    </div>
</body>
</html>
```


## CSS

CSSファイルを準備します。
`keyframes`で横スライドアニメーション作成します。`transform`プロパティで画面外から横方向にスライドさせます。


```css:styles.css
body {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
}

.container {
  text-align: center;
}

.animated-text {
  opacity: 0;
  animation: slideIn 1s forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
```

https://developer.mozilla.org/ja/docs/Web/CSS/transform

https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode#forwards

# 実行 & 結果確認
サーバを起動し動作を確認すると下記画像のように、横スライドアニメーションが適用されている事を確認できます。


![slideanimsa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/8a68ffd8-449a-6499-9b82-97523f37680b.gif)
【勉強会資料】 大規模言語モデル入門 第4章 大規模言語モデルの進展


[大規模言語モデル入門](https://amzn.asia/d/16Wzurj ) の輪読会を開催したので、発表に使った資料を一部修正して公開します。

# モデルの大規模化
さまざまな手法が開発されていくにつれて、パラメータや学習データの容量が肥大化している。

* パラメータ数
    * 2018年：3.4億個（BERT）
    * 2019年：15億個（GPT-2）
    * 2020年：1,750億個（GPT-3）
    * 2022年：5,400億個（PaLM）
* 学習に使うコーパスの容量
    * 30億語（BERT）
    * 300億語（RoBERTa)
    * 3,000億語（GPT-3）
    * 1.4兆語（Chinchilla）

# プロンプトによる言語モデルの制御
いわゆるプロンプトエンジニアリング。

* 文脈内学習
    * パラメータを更新することなく、タスクの入出力例を見る中で学習すること。
        * ファインチューニングとは似ているが違う
    * 手法
        * zero-shot学習：質問のみ投げるやり方。
        * one-shot学習：質問の解答例を１つ合わせて聞くやり方。
        * few-shot学習：質問の解答例を複数合わせて聞くやり方。
    * chain-of-thought推論
        * 複数の段階の推論が必要な際に、推論過程の例示を与える手法。
            * 問題の解き方の順序を伝えるようなイメージ。
        * 大規模言語モデルは多段階の推論が必要なケースが苦手なことが多い。

# アライメントの必要性
人間や社会にとって有益で適切な挙動になるように大規模モデルを調整することを**アライメント**という。

アライメントの基準としては、HHHという基準が提案されている。
* 役立つこと（Helpful）
    * 大規模言語モデルは意図をうまく汲み取れないこともある。
* 正直であること（Honest）
    * 大規模言語モデルは虚偽の内容を生成することがある。
* 無害であること（Harmless）
    * 大規模言語モデルはトークンの内容をそのまま反映してしまうので、バイアスが生じることがある。

下記のP.44で言及されている。

https://arxiv.org/pdf/2112.00861

ちなみに虚偽の回答を生成することを幻覚（hallucination）という。
特定の属性を持つ集団の意見へのバイアスを持つことが課題となっている。

# 指示チューニング
指示文と理想的な出力で構成されるデータセットを使ったファインチューニングのことを**指示チューニング**という。

FLAN(Finetuned LAnguage Net)といった多数のタスクにおける質問と解答セットのテンプレートを使ってファインチューニングをする手法がある。

https://research.google/blog/introducing-flan-more-generalizable-language-models-with-instruction-fine-tuning/

指示チューニングの主な課題としては、下記２つがある。
* 人的コストがかかる。
    * 大規模で高品質なデータセットを作成することは難しい。
    * データやプロンプトの多様性確保
* 改善が難しい。
    * モデルの出力に対してはフィードバックを行えない。
    * 出力のテキストや画像に対して、理想的な解答を定義できない。
    * 特定の知識など学習されていないデータに対する解答が正確でない。

上記の課題を解決するために、この課題を解決するために下記を編み出した。

# 人間のフィードバックからの強化学習
RLHF: Reinforcement Learning from Human Feedback

人間の好みに対して直接的に最適化することでアライメントを行う。

* 報酬モデリング
    * モデルが生成したテキストに対して、人間の好みを反映した報酬を数値で表現する。
    * ここで用意するデータセットはモデルの回答は質問に対し、複数用意して順位づけしたデータセットを用意する。
* 正例 - 負例の差を最大化するように損失関数を定義する。
* 強化学習
    * その後に報酬モデリングの出力を使って、モデルをファインチューニングする。

RLHFにも欠点があり、タスクによっては性能が劣化したり、フィードバックの品質や一貫性（人による意見の違いなど）の影響が反映されるなどの課題がまだ残っている。（これは解決できるのか...？）

ちなみにChatGPTはRLHFが採用されているらしい。

# 参考文献
- [大規模言語モデル入門](https://amzn.asia/d/3xTMT8o)
AWS CloudWatch

# はじめに
この記事はAWS SAA試験勉強のための、AWS CloudWatchに関する知識のまとめです。

# AWS CloudWatchとは
AWS CloudWatchとはコストがしきい値を超えた場合にトリガーされる請求アラームを設定できるサービス。これは請求額全体に対するシンプルな監視と通知の機能となっており、個別に予算額を設定してアラートを通知する機能とは異なります。

CloudWatchではメトリクスに対してアラームと**アクション**を設定できます。例えば「EC2インスタンスのヘルスチェックに異常があったとき」というアラームに対して「インスタンスの復旧」というアクションを設定すると、条件を満たしたときにアクションが実行されます。

# AWS CloudWatchの基本性質
- CloudWatch Logsを利用するためには、対象のサーバーに専用のエージェントをインストールする必要があります。

- 個人アカウントでは、アカウントを作成した最初の日に設定することが普通です。

- X-Rayと連携してアプリケーションの分析にも利用されます。

# EC2インスタンスのメトリクスとして標準的に取得可能なもの

- CPU使用率
- ネットワーク使用率
- ディスクI/O

# カスタムメトリクス

カスタムメトリクスを設定するには、EC2インスタンスへ「CloudWatchエージェント」をインストールし、AWS CLIコマンドやAPIを用いて監視項目をCloudWatchへ送信します。


# 複合アラーム
CloudWatchの複合アラームにより、複数の条件を組み合わせたアラームを設定できます。

# CloudWatch Logsの別のサービスへの転送
別のサービスへ転送するには、CloudWatch Logsのサブスクリプションフィルターで、データの転送先を設定します。OpenSearch Serviceへは、CloudWatch Logsから直接データをストリーミング可能です。
【個人開発】「情報処理技術者試験ドットコム」の通知をBootstrap5のポップオーバーの中身をHTMLにして、外側クリックで閉じた件

# 情報処理技術者試験ドットコムの紹介
はじめまして、5月に還暦を迎え、定年退職したプログラマ 泓原敏夫@toshio_fukeharaと申します。

転職後の[九州国際情報ビジネス専門学校](https://cosmet.ac.jp/ "九州国際情報ビジネス専門学校")での講師業務のために「[情報処理技術者試験ドットコム](https://ipa-siken.com "ipa-siken.com")」というサービスを個人開発して立ち上げました。

https://qiita.com/toshio_fukehara/items/85dee36029f741ded024

# 通知機能の実装
増えてきた機能を紹介したい…そういや**通知がなかった**なと。仕様としては Qiita などと同様にベルのアイコンを出して、未読の数を表示する。アイコンをクリックしたらポップオーバーで一覧表示して、全件表示は別画面へのリンクにする。
ということで、とっととコーディング開始

* ベルのアイコンを表示する
  * Bootstrap5 のクラスだけではうまく位置調整できず
  * 専用のクラス(wx-notice-read)でstyleを定義
* 未読の数は非同期でバッジに表示する
  * 未読の通知を取得するAPIをサーバー側にささっと書く
  * どこまで表示したかは cookie に持たせる
  * Laravel のおかげで、まあ楽勝 
* ポップオーバーの中身をリスト表示にする
  * むむっ…Popover のコンテンツは data-bs-content に**文字列指定**となっている
* ベルのアイコンをクリックすると、ポップオーバーを表示させる
  * むむっ…Popover は**外側クリックでは閉じない**。いちいちベルのボタンを押さないと消せない

ということで、実現するのに少しだけ大変だったので、記事として起こしました。

# ポップオーバーのコンテンツを HTML にする
ベルアイコンの表示部分
```HTML:show-notice.html
<style>
  .wx-notice-read {
    position: relative;
    top: 7px;
    left: -3px;
    padding: 2px 5px 3px 5px;
    opacity: 0.75;
  }
</style>

<a href="#" class="show-notice text-decoration-none me-1" title="お知らせ" data-bs-toggle="popover">
  <i class="bi bi-bell-fill text-secondary opacity-75"></i>
  <span class="wx-notice-read badge rounded-pill bg-danger"></span>
</a>
```

結論から言うと、popover メソッドの option の html を true にして、content に HTML を入れればOKです。非同期で表示するので、いったん中身をスピナーにしています。
```javascript:popover-option.js
$('.show-notice').popover({
    html: true,
    content: `<div class="list-notice d-flex justify-content-center"><div class="spinner-border"></div></div>`,
    placement: 'left',
    trigger: 'manual',
});
```
非同期でデータ取得後に list-notice クラスの中身を入れ替えてます。

# 外側クリックで閉じる
option の trigger を 'manual' にして制御できるようにしておきます。
```javascript:popover-click.js
$('.show-notice').on('click', function(e) {
  e.stopPropagation();

  const isShow = document.querySelector('.popover.show');
  if (isShow) {
    $(this).popover('hide');
  } else {
    $(this).popover('show');
  }
});

$('.popover').on('click', function(e) {
  e.stopPropagation();
});

$('html').on('click', function(e) {
  $('.show-notice').popover('hide');
});
```
* ポップオーバーを表示しているかどうかは、'.popover.show'のクラスを持つ要素があるかで判断しています
* 外側で閉じることは、'html'のclickで行なっています
  * そのままではポップオーバーのウィンドウをクリックしても閉じてしまうので、'.popover'クラスのクリックでは、e.stopPropagation(); で現在のイベントのさらなる伝播を阻止しています

# 実装の結果
##### モバイル表示
![app-notice-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3024019/cf0d4f0c-6140-d4e1-0545-f0e890c05dee.png)
##### デスクトップ表示
![app-notice-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3024019/78300461-158e-8d1e-8062-1351528f2341.png)

# 終わりに
最後まで読んで頂いてありがとうございます！
無料でも結構使えます。情報処理技術者試験にトライされる際はぜひ使ってみてください。
副業で開発を請け負ってますので、ご依頼などありましたらご連絡ください。
[情報処理技術者試験ドットコム お問い合わせ](https://ipa-siken.com/contact "ipa-siken.com")
Vue 3 で作る！簡単 ToDo アプリ - 編集機能を追加しよう！

前回は、Vue 3 を使って基本的な ToDo アプリを作成したので今回は、ToDo アプリに **編集機能** を追加して、より使いやすく進化させたいと思います！

### 1. 編集モードの追加

まず、ToDo アイテムの編集を可能にするため、編集モードを追加します。

```TodoItem.vue
<script setup lang="ts">
import { ref } from 'vue'

/**
 * props
 */
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})
/**
 * emit
 */
const emit = defineEmits(['toggle', 'delete', 'edit'])

/**
 * リアクティブ変数
 */
const completed = ref(props.item.completed)
const editing = ref(props.item.editing)
const editText = ref(props.item.text)
const originalText = ref(props.item.text) 
/**
 * 関数
 */
const startEditing = () => {
  originalText.value = props.item.text 
  editing.value = true
}

const finishEditing = () => {
  editing.value = false
  emit('edit', props.item, editText.value)
}

const cancelEditing = () => {
  editing.value = false
  editText.value = originalText.value 
}
</script>

<template>
  <li class="todo-item">
    <input type="checkbox" v-model="completed" @change="emit('toggle', props.item)" />
    <span v-if="!editing" :class="{ completed }" @dblclick="startEditing">{{
      props.item.text
    }}</span>
    <input v-else type="text" v-model="editText" />
    <button v-if="!editing" @click="emit('delete', props.item)">削除</button>
    <div v-else>
      <button @click="finishEditing">編集</button>
      <button @click="cancelEditing">キャンセル</button>
    </div>
  </li>
</template>

<style scoped>
// お好みのデザインに変えてください
</style>

```

- `isEditing` は編集モードかどうかを表す `ref` です
    - 編集モードでない場合 (`!isEditing`) は、テキストと削除ボタンを表示します
    - 編集モードの場合 (`isEditing`) は、編集用のテキスト入力欄と「編集」ボタン、「キャンセル」ボタンを表示します
- `startEditing` メソッドは、編集モードを開始します
- `finishEditing` メソッドは、編集内容を保存し、編集モードを終了します
- `cancelEdit` メソッドは、編集をキャンセルし、編集モードを終了します
    - `originalText`で編集前のテキストを保持することでキャンセルを押下時に戻すことが可能です

### 2. 親コンポーネントでの処理

親コンポーネントでは特に追加下処理はないので割愛

### 3. まとめ
こちらの修正で、ToDo アイテムの編集機能が追加されました。編集ボタンをクリックすると編集モードになり、テキストを変更して保存することができます。

次回の記事ではデザインがシンプルすぎるのでCSSでデザインを変えてみたいと思います。
【SwiftData】@Query の引数と Descriptor の関係


初見で分かりにくかったが以下のように整理してみた。

![sc 2024-06-15 at 18.52.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588914/87141d76-6a57-26f8-5493-2e9e5012c3c8.png)

いまいち、サンプルやドキュメントが公開されてないのなんでなの ?

# 🧑🏻‍💻 引用

https://android.benigumo.com/20240325/macro-query-args/
Djangoで rest_framework_simplejwtを用いたテスト部分の認証方法

## テスト時にAPI認証の通し方
OAuthで認証を実装したら、ライブラリがうまいこと隠蔽してるのでテスト時に躓いた。
テストする際にサクッと認証を通す関数を作成した。


```python
from rest_framework_simplejwt.tokens import RefreshToken
....
    def auth_factory(self, user):
        # トークンを直接生成
        refresh = RefreshToken.for_user(user)
        token = str(refresh.access_token)

        client = APIClient()
        client.credentials(HTTP_AUTHORIZATION="Bearer " + token)
        return client
```
AWS DataSync

# はじめに
この記事はAWS SAA試験勉強のための、AWS DataSyncに関する知識のまとめです。

# AWS DataSyncとは

AWS DataSyncとは<font color="red">**EFS, FSx for Windows, S3, Snowcone, オンプレミス(NFS、SMBなど)**</font>などのデータコピーを、DataSyncエージェントとDataSyncサービスで高速に安全に実行できるオンラインサービスです。データはjsonファイルなどが扱えます。

<font color="red">**データ移行期間中もデータに更新が発生する場合**</font>は、AWS DataSyncなどのオンラインで移行する方法が適切です。

# メリットとデメリット
AWS DataSyncは、データ転送を簡素化し、効率的かつセキュアに実行するための強力なツールですが、コストやネットワーク要件に注意が必要です。特に大規模なデータ転送が頻繁に発生する場合、コストとパフォーマンスのバランスを考慮することが重要です。


# Snowcone

Snowconeは、他のSnowファミリーのように機器をAWSへ返送する方法のほか、DataSyncを利用してデータを移行することも可能です。SnowconeデバイスにはDataSyncエージェントがプリインストールされており、DataSyncを利用してSnowconeデバイスとAWSストレージサービス間でデータ転送ができます。
[備忘録]　読んだネットの記事 (FA業界) ver.5

# 備忘録

"三菱電機とNTTコムがAIによるふるまい異常検知が可能なOT向けセキュリティ提供"
https://monoist.itmedia.co.jp/mn/articles/2406/13/news076.html

[備忘録]
- AI分析エンジンを搭載
- IoTとOT機器のネットワークトラフィックを監視
- AIが異常を検知する
- ネットワークトラフィックの特徴量をAIが分析

"DMG森精機が工作機械向けヘルスモニタリングサービス、一部他社製機にも対応"
https://monoist.itmedia.co.jp/mn/articles/2406/14/news097.html

[備忘録]
- 定期的に主軸と送り軸の異常予知診断
- 機械の異常検知では膨大なデータに基づいて診断を実施する
- 定期的な診断レポートを用いて故障の予兆を確認
    - 診断結果はwebアプリで確認する


"中村留が切粉分断機能を角スライド機にも適用へ、旋削加工の経路を三角形に動作"
https://monoist.itmedia.co.jp/mn/articles/2405/15/news070.html

[備忘録]
- 切粉処理はプログラムで解決することが可能
- トライアングルカットは旋削加工の経路を三角形に動作させる
    - 結果として切粉が分断される
ECのインスタンス購入オプション

# 1.EC2 スポットインスタンス
スポットインスタンスはAWSから一時的に借りる予備のインスタンスであるために、突如停止する可能性があり、中断を許容できる数時間の用途にしか利用できません。通常、バッチ処理ジョブなどの一時的な処理に利用されます。

## 1.1 スポットブロック
スポットブロックが設定されたスポットインスタンスでは、インスタンス起動後、設定された時間に対して継続して動作することを保証するオプション(最大6時間まで)。

# 2.EC2 リザーブドインスタンス

## 2.1.スタンダード
割引率が最も高いです。

## 2.2.コンバーティブル

リザーブドインスタンスのコンバーティブル は属性変更とインスタンス自体の交換が可能。

## 2.3.AWS Savings Plans
1年間または3年間の継続利用が必要となるため、特定の曜日のみの利用には適していません。

### 2.3.1.Compute Savings Plans
Compute Savings Plansは、最も柔軟なSavings Planで、EC2インスタンス、AWS Fargate、AWS Lambdaなど、さまざまなコンピューティングサービスに適用されます。
インスタンスタイプ、テナンシー、リージョン、オペレーティングシステム、予約オプションに関わらず、割引が適用されます。

### 2.3.2.Instance Savings Plans
Instance Savings Plans は、そのリージョンのファミリー内におけるEC2インスタンス間で使用量を変更する柔軟性を提供します。これはFargate や Lambdaには適用できません。


# 3.オンデマンドキャパシティー予約
かつては定期処理用にはスケジュールドリザーブドインスタンスを利用することができたが、これは廃止されました。
代わりに定期的な容量を予約するためにオンデマンドキャパシティー予約 を使用することがAWSでは推奨されています。

# 4.Dedicated Hosts
EC2インスタンスを利用する際にユーザーが専有できる物理EC2 サーバー。ホスト単位で課金。

# 5.Amazon EC2 ベアメタルインスタンス
アプリケーションが基盤となるサーバーの [Intel® Xeon® スケーラブルプロセッサ](https://www.intel.co.jp/content/www/jp/ja/products/details/processors/xeon/scalable.html?cid=sem&source=sa360&campid=2024_ao_cbu_jp_gmocoma_gmocrbu_awa_text-link_brand_exact_cd_HQ-dcai-xeon_3500186468_google_b2b_is_non-pbm_intel&ad_group=DCAI_XEON_Scalable_Exact&intel_term=Xeon+%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%A9%E3%83%96%E3%83%AB+%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5%E3%83%BC&sa360id=43700080197699850&gad_source=1&gclid=Cj0KCQjwvb-zBhCmARIsAAfUI2sq5VNOmFA549Oh3vOMnn46uJhkOdoRAqHmnZ26f63CJGIdxDU3LecaAnU5EALw_wcB&gclsrc=aw.ds)とメモリリソースに直接アクセスできる特別なインスタンス。
9年前に作った絵文字サイトを作り直した

メモ帳に手打ちで作った絵文字サイトを、9年の時を経てリニューアルしました‼
ちなみにほぼChatGPTが作りました🤖✨

## 旧サイト

### スクショ
ウェブアーカイブにありました(*´・ω・)ノ=͟͟͞͞🍣=͟͟͞͞🍣=͟͟͞͞🍣=͟͟͞͞🍣

https://web.archive.org/web/20160714003153/http://emoshare.jp/search/index.php?page=3
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122701/ca8cebce-88b3-ea56-73dd-7a7825d5be53.png)

### サイト概要
絵文字を使ったAAを検索したりTwitterに投稿できる

### 技術
- 言語: PHP5.4
- DB: MySQL5.6
- フレームワーク: なし
- エディタ: メモ帳🤔❓


プログラミングなんもわからん状態なのでページネーションの処理も自力でゴリゴリ書いてました...🥹🥹🥹

### 閉鎖した理由
jpドメイン高すぎ😭💸💸

## 新サイト

Laravelで作り直しました👩‍💻
管理者機能を実装したので、新たなAAを追加することが容易になりました👏👏👏

ややお財布にやさしい .netドメイン

https://emoshare.net/

### スクショ
#### トップページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122701/ea24486e-9b10-f3c8-af61-dcbc70e3670f.png)

#### 管理画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122701/b0687005-d70d-0751-9f57-f1c2e882ffc7.png)

#### 技術
- 言語: PHP8.3
- DB: MySQL8.0
- フレームワーク: Laravel11
- エディタ: PhpStorm

### 方針
- 開発工数3人日でリリースする
- ユーザは管理者のみとする(品質の悪いAAの投稿を防ぐ + 工数削減)
- サイトの色はダークモードのみにする
- Vue.jsとかReactとか使わずBladeだけにする
- ChatGPTにできるだけやらせる
- 静的解析とテストは書く

### 制作時間
ワイヤフレーム作成～𝕏アカウント作成、リリースまで21時間で終わりました🙌
ChatGPT4oすごすぎる😭😭😭

### ChatGPTに指示したこと
- マイグレーションファイル、モデル、ファクトリ作成
- 管理者機能(新規投稿、編集、削除)全般
- ページネーションのデザイン調整
- パンくずリストのデザイン調整
- テストコード作成
- 静的解析のエラー対応

### 困ったこと
Laravel11になってmiddlewareの設定場所が変わっていたので地味に解決に時間がかかりました😿
postsテーブルのdataカラムにAAを保存する際にtrimしたくなかったので、以下の修正で対応しました‼✊😸✨

```bootstrap/app.php
<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
-        //
+        $middleware->trimStrings(except: [
+            'data',
+        ]);
    })
    ->withExceptions(function (Exceptions $exceptions) {
        //
    })->create();
```

### 今後やりたいこと
- もう少しAAを充実させる
- ハッシュタグで検索できるようにする
- 検索にサジェスト機能をつける
- コピーの回数で人気ランキングみたいなものをつくる
- アスキーアートの画像をOGP用の画像にする
[Javascript]Promise.all()は結果を返さない件

# はじめに
お久しぶり。また投稿をしに来ました。
最近はずっっっっっとbackendの開発をやっていて、frontendはもう忘れちゃう気がします。土日にelectron+reactでデスクトップアプリを開発してみて、frontendの知識も忘れない…かな？
さて、本題ですが、`Promise.all()`について皆さんはご存じでしょうか。複数のpromiseをまとめて実行する便利なメソッドですが、以前私は誤っていた書き方で大変なデバッグをしたのです。

# 正常例
まずは下記のソースコード：
```js
const promise1 = new Promise((resolve, reject) => {
  console.log("p1");
  resolve(1);
})
const promise2 = new Promise((resolve, reject) => {
  console.log("p2");
  resolve(2);
})
const promise3 = new Promise((resolve, reject) => {
  console.log("p3");
  resolve(3);
});

Promise.all([promise1, promise2, promise3]).then((result) => {
  console.log(result);
});
// Expected output:
// p1
// p2
// p3
// Array [1, 2, 3]
```
すべてのpromiseを順番に実行し、各promiseはコンソールにログを出力し、最後に`Promise.all()`もログを出力します。

# 異常例
次に悪い書き方を示します。
```js
const promise1 = new Promise((resolve, reject) => {
  console.log("p1");
  resolve(1);
})
const promise2 = new Promise((resolve, reject) => {
  console.log("p2");
  resolve(2);
})
const promise3 = new Promise((resolve, reject) => {
  console.log("p3");
  resolve; // ここが区別
});

Promise.all([promise1, promise2, promise3]).then((result) => {
  console.log(result);
}).catch((error) => {
  console.log("failed");
});
```
上記のコードを実行してみたら、各promiseは問題なくログを出力するけど、`Promise.all()`は配列も`failed`も、結果を返さなくなります。つまり、上記の書き方では`Promise.all()`から結果を取得できません。

# 結論
Promiseを書く際に、カッコ抜きの`resolve`をやめてください。返したい値がなくても、`resolve()`を書いてください、これも、`Promise.all()`のためです（笑）。
csurfを使ってCSRF対策だ！

# 手順
1. 必要なパッケージのインストールする。
    ```bash
    $ npm install csurf cookie-parser
    ```

2. ミドルウェアの設定を行う。
    ```main.ts
    import { NestFactory } from '@nestjs/core';
    import { AppModule } from './app.module';
    import * as csurf from 'csurf';
    import * as cookieParser from 'cookie-parser';
    
    async function bootstrap() {
      const app = await NestFactory.create(AppModule);

      // CookieParserミドルウェアを追加
      app.use(cookieParser());

      // CSRFミドルウェアを追加
      app.use(csurf({ cookie: true }));
    
      await app.listen(3000);
    }

    bootstrap();
    ```
3. CSRFトークンを提供するエンドポイントの作成する。
    ```app.controller.ts
    import { Controller, Get, Req } from '@nestjs/common';
    import { Request } from 'express';
    
    @Controller()
    export class AppController {
      @Get('csrf-token')
      getCsrfToken(@Req() request: Request): any {
        // CSRFトークンを生成してレスポンスする
        return { csrfToken: request.csrfToken() };
      }
    }
    ```
4. フロントエンドでCSRFトークンを含めてリクエストを送る。
以下のようなヘッダーを想定している。
CSRFトークンが含まれていない場合は403エラーを返します。

```json
headers: {
    "Content-Type": "application/json",
    "CSRF-Token": csrfToken
}
```


# 参考
[NestJS CSRF対策 やり方](https://zenn.dev/happou31/scraps/c381b1fd9098bf)
[csurf - npm](https://www.npmjs.com/package/csurf)
[csurf](https://github.com/expressjs/csurf)
いまさらdockerを始めてみる③

# 前回まで
公式のdocumentatinのgetting startedのDevelop with containersまで完了。コンテナ？内に含まれる、java/javascriptなどのファイルを編集してtodoアプリをカスタマイズ。

# next
'build and push your first image'とのこと。docker accountにサインインしてimage repositoryつくって、imageをpushするとのことだがアカウント系の作成は慎重に行いたいし、疲れるのでいったんスキップ

# what's next
であるので、今日からは
https://docs.docker.com/guides/getting-started/whats-next/
を一通り眺めて基礎を固めていく

# What is a container?
https://docs.docker.com/guides/docker-concepts/the-basics/what-is-a-container/

dockerのup?とrunnning?の確認
docker run -d -p 8080:80 docker/welcome-to-docker
docker ps
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269297/2711c7ab-9af0-60bf-4b00-bf8f542f44f3.png)

より複雑なprojectをやるときは、frontedn, backend, databaseそれぞれ別々にコンテナを定義しrunしたらとのこと

[docker run](https://docs.docker.jp/v19.03/engine/reference/commandline/run.html)
-d: コンテナをバックグラウンドで実行し、IDを表示
-p: コンテナのポートをホスト側に公開

コンテナは明示的に止めるまで動き続ける。ので、docker stopコマンドで止める必要がある
docker psでコンテナのIDを確認し、docker stopの引数に与える
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269297/f7cfd244-6a2f-39a3-36a5-6d478171bd38.png)

additional resources
https://docs.docker.com/engine/reference/run/
https://www.docker.com/resources/what-container/?_gl=1*1bunrzf*_gcl_au*MjEzOTk3ODMyMi4xNzE4Mjg3MDM2*_ga*MTc3OTg4OTUxOC4xNzE4Mjg3MDM3*_ga_XJWPQMJYHQ*MTcxODQzNzg4NC4zLjEuMTcxODQzOTE4Ni42MC4wLjA.

内容がボリューミーで難しそうなので後回し

# what is as image?
A container image is a standardized package that includes all of files, binaries, libraries, and configurations to run a container

例えばpostgreSQLはデータベースのバイナリとコンフィグファイルとdependenciesがある。python web appにはpython runtimeとapp codeとdependenciesがある。

二つの原則(principles)
- imageはimuutableで編集はできない。(on topにchangesをadd?することはできる)
- imageはlayersによりcomposeされる

on topにchangeをaddするとは、例えばpython imageから初めてその上にinstall app dependenciesするlayerを加えたり、コードを加えることを意味する

自分のPCで利用可能なdockerのimageの確認
docker image ls![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269297/6c6a3af4-1754-aefd-c899-4c4c3745bc39.png)

# 所感
imageは設計図。containerは設計図を基に作り上げた何か。
imageはlayerで構成される。layer1 -> install os, layer2 -> install python みたいな？
大枠はつかめたが、todo-appの構成だけがわからん。![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269297/e5e0b5bc-e091-9efe-5b58-64ef730be75c.png)
複数のコンテナをまとめた何かを定義できる感じかな？dockerコマンドにもimageコマンドにも'getting started todo app main'はでてこなかった。また別の概念なんだろう。進めていけばわかるか。今日はここまで
雑にCookieParserとは？

# CookieParserとは
Node.jsとExpressフレームワークで使用されるミドルウェアで、クライアントから送信されたHTTPリクエストのCookieヘッダーを解析し、JavaScriptオブジェクトとして簡単にアクセスできるようにします。
Cookieを上手いことサーバーサイドで使用できる形に変換できるものです。

# 使い方

1. 以下のコマンドでインストールする。
    ```bash
    $ npm install cookie-parser
    ```

2. アプリケーションにcookieParserを組み込む。
    ```main.ts
    import { NestFactory } from '@nestjs/core';
    import { AppModule } from './app.module';
    import * as cookieParser from 'cookie-parser';
    
    async function bootstrap() {
      const app = await NestFactory.create(AppModule);
    
      app.use(cookieParser());
    
      await app.listen(3000);
    }
    
    bootstrap();
    ```

3. 任意のコントローラーでcookieを扱う。
今回は、設定したCookieを返すエンドポイントを作成してみる。

    ```typescript
    import { Controller, Get, Req, Res } from '@nestjs/common';
    import { Request, Response } from 'express';
    
    @Controller()
    export class AppController {
      @Get()
      getCookies(@Req() req: Request, @Res() res: Response): string {
        // クライアントから送信されたクッキーを確認可能
        console.log(req.cookies);
        
        // クッキーをレスポンスに設定
        res.cookie('testCookie', 'testValue');
        
        return res.send('Cookies: ' + JSON.stringify(req.cookies));
      }
    }
    ```

## オプション一覧
| オプション名 | 説明 |
|--------------|------|
| `secret` | 署名付きクッキーの署名を検証するための秘密鍵を指定します。複数の鍵を使用する場合は、配列を指定できます。 |
| `decode` | クッキーの値をデコードするための関数を指定します。デフォルトでは`decodeURIComponent`が使用されます。 |
| `parse` | クッキーの値を自動的にパースするかどうかを指定します。`true`の場合、クッキーの値がパースされ、`false`の場合はそのまま文字列として扱われます。 |
| `key` | リクエストオブジェクトに格納されるクッキーのキー名を指定します。デフォルトでは`req.cookies`に格納されます。 |
| `signed` | 署名されたクッキーのみを解析するかどうかを指定します。`true`にすると、署名されていないクッキーは無視されます。 |
| `httpOnly` | クライアント側のJavaScriptからクッキーにアクセスできないようにします。`true`に設定するとセキュリティが向上します。 |
| `maxAge` | クッキーの有効期間をミリ秒単位で指定します。この期間を過ぎるとクッキーは無効になります。 |


# 参考
[NestJSでCookieを利用する](https://qiita.com/mu-suke08/items/5266ca6213026f23a8e3)
[cookie-parser - npm](https://www.npmjs.com/package/cookie-parser)
お父さん、明日からVtuberで食べていこうと思うんだ。音声変換編

## はじめに
今回は配信での音声変換について説明します。特に音声のリアルタイム変換の仕組みやツールについて取り上げます。
## 基本的な仕組み
マイクから入力された音声は音声変換ツールで変換された後、仮想オーディオデバイスに出力されます。Zoom等のアプリケーションでは、入力にマイクの代わりに仮想オーディオデバイスを指定することで変換後の音声を受け取ります。また、音声変換ツールにモニタ出力の機能がある場合、これをスピーカーに出力することで変換後の音声を聞きながら会話をすることができます。
※ようするに、この図をちゃんと理解すれば、ツールやアプリケーションが変わっても接続に迷うことはなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13477/8bc66e9e-774b-201f-5501-1de35e2cec87.png)
## 仮想オーディオデバイスの準備
この界隈では有名なVB-CABLEというソフトウェアを使用します。配布サイトからインストーラーをダウンロードしてインストールします。
配布サイト：https://vb-audio.com/Cable/
※Windowsではインストーラーを右クリックして「管理者として実行」する必要があります。
※無料ですがいわゆるドネーションウエアです。気に入ったら寄付しましょう。
## 音声変換ツールの準備
今年の5月頃に正式版がリリースされたばかりのParavoというソフトウエアを使用します。配布サイトからインストーラーをダウンロードしてインストールします。
配布サイト：https://parakeet-inc.com/paravo
インストールは2段構えになっていて、まずランチャーをインストールしてランチャーから本体をダウンロード＆インストールします。このとき、「安定動作版」と「開発段階版」を選択できますが、通常の使用なら「安定動作版」で良いでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13477/d76f7756-eaca-3c29-1b84-6556c3101d5b.png)
※「無料プラン」では、ずんだもんを含む5キャラクターの音声が使用できます。サブスクリプション、または、買い切りでキャラクターを買い足すことができます。
## 音声変換ツールの設定
Paravoが起動したら「リアルタイム」タブで「デバイス設定」を行います。「入力デバイス」にマイク、「出力デバイス」に上記で準備した仮想オーディオデバイスを選択します。「モニターデバイス」にスピーカーを選択すると変換後の音声を聞きながら会話することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13477/b8a0ff0a-6321-467d-0e21-1d83d231b894.png)
次に右上の設定(歯車アイコン)から、設定画面に移動し「もう一度録音」の「ヘッドフォン]アイコンをクリックします。「事前録音」画面が開くので指示に従って自分の音声を登録します。
をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13477/0a8ca006-14a7-d853-f9da-8cf105383003.png)
「リアルタイム」タブに戻ったら、「話者選択」の円をクリックし「キャラクター」タブから「すんだもん」を選択します。選択後、「リアルタイム」タブに戻ったら画面下の「開始」ボタンをOnにします。これで、音声変換が始まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13477/0db1a18c-4594-fcde-67cc-014b613f22cc.png)
## アプリケーションの設定
Zoomで変換した音声を使用するには「設定」→「オーディオ」の「マイク」で仮想オーディオデバイスを選択します。「マイクのテスト」をクリックし会話に合わせて「入力レベル」のバーが動くことを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13477/a7e78c27-b159-8932-3d6a-1f615f8b9b9c.png)
Meta AI (LLaMA) を同様のサービスAnthropic Claudeと比較してみた

## Meta AI (LLaMA) とAnthropic Claudeを比べてみた

### はじめに

人工知能（AI）の進化は急速に進んでおり、特に大規模言語モデル（LLM）の分野では、多くの革新的な開発が行われています。2024年において注目される主要なLLMのひとつとして、Meta AIが開発したLLaMA（Large Language Model Meta AI）があります。この記事では、Meta AI (LLaMA) をAnthropic Claudeと比較し、それぞれのモデルについて特徴や、優位性、使用例、安全性、ビジネスモデルについて詳しく比較してみました。

### Meta AI (LLaMA) の概要

**LLaMA 3 モデル**
Meta AIが提供するLLaMA 3は、8B、70B、400Bの3つの異なるサイズのモデルで構成されています。これらのモデルは、言語理解、プログラミング、数学的推論、論理など、多様なタスクに対して高い性能を発揮します。LLaMA 3の大きな特徴は、そのオープンアクセスと透明性です。研究者や開発者が自由にアクセスでき、共同での改善が促進されています。

**主な特徴**
1. **オープンアクセス**: モデルの内部構造やトレーニングデータが公開されており、研究コミュニティと広く共有されています。
2. **多様なタスク対応**: 言語生成、コード生成、自然言語理解において高い能力を発揮します。
3. **高性能**: 広範なベンチマークで高いパフォーマンスを示し、特に数学的推論や言語タスクに優れています。

**使用例**
LLaMA 3は、その高い性能と多用途性から、教育、研究、ビジネスなど幅広い分野で活用されています。例えば、教育現場では、複雑な数学の問題解決やプログラミングのサポートに利用され、ビジネス分野ではカスタマーサポートやデータ分析に活用されています。

**日本での利用について**
残念ながら、現在のところMeta AIのLLaMAは日本では利用できません。詳しい理由は開示されていませんが、規制や開発段階などによる制限などがあるのかもしれません。日本での利用が可能になるまでには、まだまだ時間がかかりそうですね。

### Anthropic Claude の概要

**Claude 3 モデル**
Anthropicが提供するClaude 3は、Haiku、Sonnet、Opusの3つの異なるサイズのモデルで構成されています。Claude 3は、AIの出力の安全性と倫理性を重視した設計が特徴であり、特に大規模データ処理やマルチリンガル対応に優れています。

**主な特徴**
1. **安全性重視**: "Constitutional AI"というフレームワークを採用し、AIの出力の安全性と倫理性を強化しています。
2. **大規模データ処理**: 最大100kトークンの入力サイズをサポートし、大量のデータを一度に処理する能力があります。
3. **多様な出力**: 高度なテキスト生成能力を持ち、エッセイ、記事、コード修正などの複雑なタスクにも対応可能です。

**使用例**
Claude 3は、その安全性と高いデータ処理能力から、医療、金融、法務などの分野で広く利用されています。例えば、医療分野では患者データの分析や医療レポートの生成に活用され、法務分野では契約書の自動生成やリーガルリサーチに利用されています。

### 比較と考察

**パフォーマンスと多用途性**
LLaMA 3とClaude 3はどちらも高い性能を持ち、幅広いタスクに対応していますが、その強みは異なります。LLaMA 3は数学的推論やプログラミングタスクに優れており、研究や教育分野での利用に適しています。一方、Claude 3は大規模データ処理や安全性に特化しており、医療や金融などの分野での利用に適しています。

**安全性と倫理性**
安全性と倫理性に関しては、Claude 3が優位性を持っています。Anthropicは"Constitutional AI"というフレームワークを採用し、AIの出力が安全であることを保証しています。これに対し、LLaMA 3も安全性に配慮していますが、オープンアクセスであるため、ユーザーの責任も大きいです。

**オープン性と透明性**
LLaMA 3はオープンソースとして提供されており、研究者や開発者が自由にアクセスでき、共同での改善が促進されています。これに対し、Claude 3はクローズドソースであり、Anthropicの管理下で提供されますが、その分、安全性と品質の管理が厳密に行われています。

**ビジネスモデル**
ビジネスモデルにおいて、LLaMA 3はオープンアクセスを推進し、科学的貢献を重視しています。これに対し、Claude 3は商業的なモデルであり、企業向けのカスタマイズや優先サポートを提供しています。

### まとめ

Meta AIのLLaMAとAnthropicのClaudeは、それぞれ異なる強みと特徴を持っています。LLaMAはオープン性と透明性を重視し、広範な研究と共同開発を促進する一方、Claudeは安全性と倫理性を最優先に設計されており、商業的利用に特化しています。どちらを選択するかは、ユーザーのニーズや利用目的によります。

これらの情報を参考に、LLaMAとClaudeのどちらが自分のニーズに合っているかを検討してみてください。どちらのモデルも、それぞれの強みを活かして多様な分野での利用が期待されます。日本でのLLaMAの利用が可能になる日も待ち遠しいですね。AIの発展とともに、私たちの生活や仕事がどのように変化していくのか、楽しみにしています。
AWS（linux環境）で標準時刻をJSTに変更する

## はじめに
新人の時から所属している現場は、
そろそろ15年くらいの大規模システムです。
また自分自身インフラチームではないのもあり、
サーバ構築とか特に環境設定を変更する機会はありませんでした。

そして先月末(2024/5)、初めてAWS EC2サービスを使ってサーバ立ち上げたのですが、
途中JSTになっていないことに気づきました。

色々ググってJSTへ設定が変更できたので、その手順を残します。


## 1) 必要なsetting fileの在処確認
```bash
#setting file
ls -la /etc/localtime
ls -la /etc/sysconfig/clock
ls -la /usr/share/zoneinfo/Asia/Tokyo
```

ここで勘づいて、確認したわかったこと！
/usr/share/zoneinfo　下位には、
地域ごとディレクトリー、
さらにその下位に地域ごと標準時刻ファイルが存在しています。


## 2) バックアップ
```bash
#backup
cp -ip /etc/localtime /etc/localtime_bk

#backup後、比較元と差分がないことを確認
diff /etc/localtime /etc/localtime_bk
```
シクったら怖いですからね。
（これは職業病みたいなもんかもしれないです）

:::note
バックアップは基本中の基本。
:::

## 3) localtime自体はいじらない。リンク機能を生かそう！

```bash
#標準時間（東京、JST）ファイルが、localtimeとして読み込まれるリンク付け
ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
```
これでできた！と思ったら・・・

サーバ再起動したらJSTからGMTになってしまうので、
さらに設定が必要でした。

## 4) 再起動しても、標準時刻は変更したままにする
```bash
#No turn back to GMTorUTC when reboot
ls -la /etc/sysconfig/clock

vi /etc/sysconfig/clock #iを押したらinsertモードになります！
-> ZONE="Asia/Tokyo" #に変更する
-> UTC=false #に変更する。
```

私が利用したAWSインスタンスは、ap2-southeast-2　でしたが
それと関係なく最初はUTCで設定されているようです。

:::note 
ちなみにリンク付けのコマンドは、なかなか使ったことがありません。
（インフラだったら使いますかね？）今回初めて試したコマンドでした。

```bash
ln #:link コマンド
 -s:symbolic link 
 -f:force #強制的にリンク付ける
```

(例) Bファイルを実行したら、Aファイルを読み込むことになります。
```bash
ln -sf A B
```
freee社のDevSecOpsが良かったので紹介したい

## この記事は何？
freee社のDevSecOpsループを紹介する記事です。

◆対象は？
アプリケーションの開発や運用に関わる方

## 先に結論

![devsecops.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616496/7c9941b5-900b-f885-494e-28ea64c10428.png)

DevSecOpsとは、DevOpsにsecurityを埋め込むことです。

**セキュリティ対策について、何を、いつ取り組んだら良いか**がわかりやすくなります。

## 知ったきっかけ

[「Software Design 2024年6月号」](https://gihyo.jp/magazine/SD/archive/2024/202406)で「成功するPSIRTの極意」という特集がありました。
著者はフリー株式会社の杉浦さんです。

PSIRTとは、「Product Security Incident Response Team」の略で、プロダクトのセキュリティ対応を行う組織です。

CSIRTは会社単位で活動するのに対して、PSIRTはプロダクト単位で活動します。

特集では、PSIRTの発足経緯やPSIRTの活動（DevSecOpsループ）が紹介されていました。

DevSecOpsループは、セキュリティ対策に関するアクティビティを整理できます。

## アクティビティの説明

DevSecOpsの左側が「Shift Left」、右側が「Shield Right」です。

「Shift Left」は開発者主導のセキュリティで、「Shield Right」はランタイムセキュリティです。

具体的には次のような活動をします。

◆Shift Leftの活動
- 設計レビュー（SDR）
    - 設計段階で、セキュリティレベルに応じたデータ保管、暗号化、アクセス制御が行われていることをレビューする
- 静的解析（SAST）
    - Static Application Security Test
    - ソースコードの静的解析
- 脆弱性スキャン(SCA)
    - Software Composition Security
- 動的解析（DAST）
    - Dynamic Application Security Test
    - 試験環境での擬似的な攻撃により、脆弱性を探索する

◆Shield Rightの活動
- 脆弱性診断
    - 新しいサービスがリリースされる前に擬似的な攻撃を行、未知の脆弱性を探索する
- 構成管理（IaC）
    - Infrastructure as Code
    - インフラ構成のコード管理
- ポリシー検証
    - クラウド設定の監視
- ログを取る/異常検知
    - ログをSIEM(Security Information and Event Management)に蓄積する
    - SIEMによる異常検知
- インシデント対応

## おわりに

この記事では、DevSecOpsループを紹介しました。

様々なセキュリティ対策がありますが、DevSecOpsループと一緒に考えることで、それらをDevOpsループのどこで実施するかを整理できます。

アプリケーションの開発や運用に関わる方の参考になれば幸いです。

## 参考


「Software Design 2024年6月号」


https://sysdig.jp/blog/strengthen-cybersecurity-with-shift-left-and-shield-right-practices/
NestJS勉強してたらuseGlobalPipesって出てきたけどなに？

# useGlobalPipesとは
NestJSでグローバルパイプ（Global Pipes）を設定するために使用されるもの。
ちなみにパイプは、リクエストデータの変換やバリデーションなどを行う役割を担っています。

## 役割
アプリケーション全体に対して共通の処理を適用します。
リクエストデータがコントローラに渡される前に、グローバルパイプを通してバリデーションやデータ変換を行います。

# 基本的な使い方
通常は`main.ts`にで使用します。
以下のように設定することで、バリデーションエラーが発生した際に適切なエラーレスポンスを返します。

```main.ts
import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // グローバルパイプとしてValidationPipe（NestJSが提供する標準的なパイプ）を設定
  app.useGlobalPipes(new ValidationPipe());

  await app.listen(3000);
}
bootstrap();

```
C_TS422_2021 SAP Certified Application Associate SAP S/4HANA Production Planning and Manufacturing対策（8/100）

【8日目】
トピック2：SAPS/4HANA生産計画の概要（2/5）

≪問題8≫
生産の作業期間を決定するデータはどこで設定しますか。
（２つ選択）
□部品表/配合表（BOM）
□作業手順
□作業区
□品目マスタ

≪解答≫
□部品表/配合表（BOM）
■作業手順
■作業区
□品目マスタ

≪解説≫
◆内製製品の調達の日程計画は、関連する作業区および作業手順から導かれます。個々の作業の期間は、標準値および計画数量に基づいて計算式を使用して算出されます。
◆作業区は、生産が行われる場所を示します。作業区では、標準値キーを使用して、計画プロセス中に考慮される標準時間要素（段取時間、機械時間、労働時間など）を指定します。作業区に保管されている日程計画計算式により、作業手順の利用可能な時間要素から期間が定義されます。
◆作業手順には、生産を行うために必要な作業ステップと、作業が実行される作業区および時間要素が含まれています。
構造的に捉えるREST API設計

Web、モバイルアプリ開発においてAPI設計は重要な要素である一方で経験をしないことにはなかなか自信を持って設計することが難しい。

ここで筆者が主張したいことは`API設計は構造的に捉えること`で設計をできるようになってほしいということである。

構造的に捉えることで、API設計の理解が深まり、設計の変更に対しても柔軟に対応できる。

ここからは設計のお題を提示し、構造的に捉えることで設計する練習をしていく。

## お題

SNSアプリを作っていてコメントを投稿する機能と一覧表示する機能があるとする。

このとき、コメントを修正する機能を追加することになった。

以下の要求を満たすAPIを設計せよ。

- コメントを修正できること
- 特定のユーザーじゃないと更新させないこと
- コメントの文字数制限を適切に設定

このお題に対してどのようにするかを考えてみてください。

ここから下には筆者の考え方の一例を示す。

## 考え方

REST APIを考えるにおいて、HTTPの構造を理解しておくことが重要である。

HTTPはリクエストとレスポンスの構造になっている。

### リクエスト

リクエストには
- リクエスト行
- ヘッダー
- ボディ

で構成される。

リクエスト行は
- メソッド（GET, POST, PUT）
- URI（Path）
- バージョン

ヘッダー/ボディは各keyとvalueで構成される。


### レスポンス

レスポンスには
- ステータス行
- ヘッダー
- ボディ

で構成される。

ステータス行は

- ステータスコード（200, 400, 500）
- メッセージ

ヘッダー/ボディは各keyとvalueで構成される。


### お題に対する設計

各要求に対してどこにどのような情報を持たせるかを考える。

- コメントを修正できること -> リクエストボディに修正内容を持たせる
- 特定のユーザーじゃないと更新させないこと -> ヘッダーに認証情報を持たせる（サーバーサイドでユーザーを判定する）

## 設計

ここから設計がどうなるかを書く。

### リクエスト

- メソッド: Put
- URI: /api/v1/posts/{post_id}
- ヘッダー: Authorization: token
- ボディ: {コメントの修正内容}

### レスポンス

レスポンスには正常系だけでなくエラー系も考える。

- 200（正常系）
  - bodyは特になし
- 400（クライアントエラー）
  - エラーの原因: ユーザーが不正
  - エラーの原因: 文字数が多い
- 401（認証エラー）
  - エラーの原因: 認証情報がない
- 403（権限エラー）
    - エラーの原因: 権限がない
- 404（リソースが見つからない）
    - エラーの原因: リソースが見つからない
- 429（リクエストが多すぎる）
    - エラーメッセージ: too many request
- 500（サーバーエラー）
    - エラーメッセージ: internal server error

## まとめ

今回は簡単なお題と簡単な回答例を記載した。

構造的にHTTPを捉えてどの情報を何処に持たせるかを考えてAPI設計をすることで、柔軟に対応できるようになりましょう。
Cloud Run で動くプロジェクト管理システムを作ってみた

私は、「Yuimarl」(ゆいまーる) という自作のプロジェクト管理システムをリリースしました。  
https://mnitta220.github.io/yuimarl/

グループまたは個人のプロジェクトを管理するためのシステムです。  
以下の特徴があります。

* グループまたは個人のプロジェクトを自由に登録することができます。
* 制限内であれば、無料で使うことができます。
* インターネットにつながった、パソコン、スマートフォン、タブレットの Webブラウザで使うことができます。
* サーバーをご自身で運用するための情報が公開されています。
* ソースコードが公開されているので、プログラミングの知識があれば、ご自身で機能を改変することができます。

プロジェクト管理システムは、一般的な会社では普通に使われているだろうと思います。
Yuimarl は、中学生、高校生、大学生、おじちゃん、おばちゃん たちにも、使っていただけることを想定して作りました。

現在は、以下の機能があります。

* プロジェクトを登録する。
* チケットを登録する。
* ガントチャートを表示する。

この記事では、Yuimarl のアーキテクチャーと実装の概要について、ご紹介させていただきます。


## アーキテクチャー

Yuimarl のサーバーは、 [Google Cloud](https://cloud.google.com/?hl=ja) のインフラで動作します。アプリケーションの実行環境は [Cloud Run](https://cloud.google.com/run?hl=ja)、データベースは [Firestore](https://cloud.google.com/firestore?hl=ja)、ユーザー認証には [Firebase Authentication](https://firebase.google.com/docs/auth?hl=ja) が使われています。  
プログラミング言語には、[Rust](https://www.rust-lang.org/ja/) と TypeScript が使用されています。

### Cloud Run
Cloud Run は、Docker コンテナのアプリケーションを実行することができます。  
Docker コンテナなので、どのプログラミング言語でも選択可能です。  
自動的にスケールアップ / スケールダウンします。アプリが実行されていない時は、ゼロまでスケールダウンし、料金が発生しません。Yuimarlのような、アイドルタイムの長いシステムの運用には適しています。  
コンテナ数ゼロの状態からのコールドスタートでも、非常に高速で、ほとんど気にならないほどです。

### Firebase Authentication
Googleアカウント / GitHubアカウント / メールアドレス のいずれかでログインすることができるようにしました。  
ユーザー認証を、自分で実装しようとすると、多大な工数が必要となってしまいます。
Firebase Authentication を使用することで、その工数を削減することができました。

### Firestore
私は今回、初めて Firestore を使いましたが、慣れ親しんだリレーショナルデータベースと比べても、大きな違和感なく、使うことができました。スキーマレスなのも便利です。
スピードも十分に高速だと思います。

## 実装

### バックエンドの実装

バックエンドの Docker コンテナ内では、Rust で作ったプログラムが動作します。  
Rust で作ったプログラムは、C言語並に高速ですし、ランタイムや仮想マシン(VM)が不要なので、高速に起動します。Cloud Run のような、コールドスタートが頻発する、コンテナ環境で実行されるシステムには向いていると思います。

Rust の Web フレームワークには、[axum](https://github.com/tokio-rs/axum) を使用しました。私は以前、axum を使用したコンポーネント指向の実装についての記事を投稿しました。Yuimarl でも、基本的に同じような方針で実装をしています。よろしければご参照ください。

[Kubernetes で動く Web システムを Rust で作ってみた](https://qiita.com/mnitta220/items/82561200ff31c5cb78f3)

### フロントエンドの実装

フロントエンドの Web ブラウザから発行されたリクエストに応じて、バックエンドの Rust が HTML を生成し、フロントエンドで表示します。  
フロントエンドでは、[Bootstrap](https://getbootstrap.jp/)、[Vite](https://ja.vitejs.dev/)、[Marked](https://github.com/markedjs/marked) などを使用しました。  
ガントチャート機能のフロントエンドのプログラミング言語は、TypeScript を使用しました。

画面を作るにあたっては、最初に、静的 HTML ファイルで画面のプロトタイプを作成しました。  
Bootstrap は、モバイルファーストで作られているので、モバイル用の画面を作るのは容易でした。  
静的 HTML を作成してから、それを動的な Rust のコードに置き換えていきました。これも、むずかしくなかったです。

----

Yuimarl のサーバーを、[ご自身で構築・運用するための情報](https://mnitta220.github.io/yuimarl/deploy.html)を公開しています。  
ご興味がありましたら、ご自身で構築してみてはいかがでしょうか？  
サーバー構築といっても、Cloud Run は「サーバーレス」に分類されていますので、この記事を読まれるようなエンジニアの方でしたら、容易にセットアップできるはずです。

もしご興味がありましたら、お使いいただき、ご意見や改善点など、お知らせいただけるとうれしいです。  
よろしくお願いいたします。
Spring Bootで設定ファイルを外部化したいし、設定値を再起動なしで変更したい

# 要件
- properties形式のファイルをclasspassの外、サーバ内の任意の場所に保持したい
- ファイルの内容書き換え時のプログラムでの再読み込みを再起動なしで実現したい

# 実装
外部ファイルのパスをapplication.propertiesに書いておいて、そのパスにプログラム内でアクセスする仕組み。

```java
private final ResourceLoader resourceLoader;

public class readingFile(){
    //1.設定ファイルオープン,2.読み込み
    Properties propertiesFile = this.getSettingFile();
    //3.設定値読み込み
    String value1 = propertiesFile.getProperty("example.value.first");
    //4.他クラスでプロパティファイル設定値を使いたい時はこのクラスから引き渡す
    Util.somethingUtility(value1,propertiesFile);
    
}

private Properties getSettingFile() {
    //1.ファイルオープン
    Resource resource = resourceLoader.getResource(settingFileLocation);
    Properties props = null;

    try {
        //2.設定ファイル読み込み
        props = PropertiesLoaderUtils.loadProperties(resource);
    } catch (IOException ioException) {
        log.error("Failed to load settings file.", ioException);
    }
    return props;
}
```

コード内のコメントに付けた番号と紐付けて説明します。
1. SpringFrameworkの`Resource`クラスと`ResourceLoader`クラスを利用してファイルオープンと読み込みを行う
2. 読み込んだ内容は`java.util.Properties`クラスのオブジェクトに保持する<br> `Properties`クラスではKey-Value(キー=値)形式の内容を扱うことができる
3. Propertiesオブジェクトから値を取得するときは、Propertiesクラスの`getProperty(key)`を利用する
4. 別のクラスでもファイルを利用したい場合、別クラスで再度ファイル読み込みを行うのではなく、このクラスで読み込んだPropertiesオブジェクトを呼び出し先に引き渡す


application.propertiesはclasspath内に配置する必要があります。
正確には、`java -jar`コマンドでクラスパス指定すれば外部化は可能ですが、application.propertiesの内容の動的変更はどちらにしろ不可能です。

また、読み込みたいpropertiesファイルのパスを記述する際は、記法に注意してください。
クラスパス内に配置した場合は、クラスパスまでは`classpath:`で省略できます。
```properties:記載例:クラスパス内に配置した場合
app.settingfilelocation=classpath:example.properties
```
クラスパスの外に置いた場合は、フルパスの記述と、先頭に`file:///`を書くことが必要です。
```properties:記載例:サーバ内の任意の場所に配置した場合
app.settingfilelocation=file:///C:/work/app/ext/example.properties
```

# 更に実現したい事
fileスキームでファイルパスを指定する際、アプリのルートからの相対パスで書きたい。

# 参考文献
https://tono-n-chi.com/blog/2015/02/read-properties-dynamically-in-spring/

https://qiita.com/rubytomato@github/items/bfeadd1e9f8d801e6d9e#resourceloader%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95
Remixとは？

# Remixについて知ろう！:sparkles:

こんにちは、みなさん！今日は最近注目されているフロントエンドフレームワーク、**Remix**についてお話ししようと思います。フロントエンドエンジニアとして、新しいツールやフレームワークを学ぶのはワクワクしますよね。では、早速Remixの魅力に迫ってみましょう！:rocket:

## Remixって何？

まず最初に、Remixがどんなフレームワークなのか簡単に説明しますね。Remixは、Reactのエコシステムに基づいたフルスタックフレームワークです。主にサーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）の両方をサポートしており、パフォーマンスとユーザーエクスペリエンスの向上を目指しています。

## Remixの特徴

### 1. データのフェッチが簡単

Remixでは、データのフェッチが非常に簡単に行えます。データローダーという機能を使うことで、サーバーサイドとクライアントサイドのデータフェッチが統一された方法で実装できます。これにより、コードの一貫性が保たれ、バグの発生も減少します。

### 2. SEOに強い

RemixはSEO（検索エンジン最適化）にも強いんです。サーバーサイドでのレンダリングを活用することで、検索エンジンのクロールがしやすくなり、SEO効果が期待できます。これにより、サイトのパフォーマンスが向上し、ユーザーの検索結果にも良い影響を与えます。

### 3. コードの分割が容易

リソースの効率的な配信は、ウェブパフォーマンスにおいて非常に重要です。Remixでは、コードのスプリッティングが自動的に行われ、必要な部分だけがロードされるため、初回ロード時間が短縮されます。これにより、ユーザー体験が向上します。

### 4. フォールバックなしの型安全

RemixはTypeScriptと非常に相性が良いです。型安全なコードを書くことで、バグを未然に防ぐことができるので、安心して開発を進められます。これも大きなメリットですね。

## 使い始めるには？

Remixの公式サイトには、丁寧なドキュメントとチュートリアルが揃っているので、初めての方でも安心して始められます。インストール方法や基本的な使い方は以下の通りです：

1. Node.jsをインストール
2. Remix CLIをインストール
    ```bash
    npm install -g create-remix
    ```
3. 新しいプロジェクトを作成
    ```bash
    npx create-remix@latest
    ```
4. 必要なパッケージをインストール
    ```bash
    npm install
    ```
5. 開発サーバーを起動
    ```bash
    npm run dev
    ```

これであなたもRemixの世界に飛び込む準備が整いました！:computer:

## まとめ

Remixは、Reactベースの新しいフルスタックフレームワークとして、多くの魅力的な機能を提供しています。データフェッチの簡単さ、SEOの強さ、コード分割の容易さ、型安全性など、フロントエンド開発者にとって非常に嬉しいポイントが満載です。ぜひ一度試してみて、あなたのプロジェクトに取り入れてみてくださいね！