OmniAICreator/Qiita-1.07M huggingface dataset:
Unstructured APIを試してみた

## はじめに
本記事では、Unstructured API を Docker 上で動かし、PDFドキュメントなどからテキストや構造化データを抽出する手順を紹介します。背景としては、RAG (Retrieval-Augmented Generation) を構築するため、さまざまな形式の文書から効率的にテキストデータを取り出す必要があるからです。

## Unstructured APIについて
Unstructured API は、PDF、DOCX、HTMLなど、さまざまな非構造化データからテキストデータを抽出するためのツールです。利用方法は、サーバーレスサービスやライブラリ形式、自分でホスティング可能なAPI形式など、複数の形態が提供されています。


## 環境構築: DockerでUnstructured APIをインストール
Unstructured API を Docker イメージで取得し、コンテナを立ち上げる手順を以下に示します。これにより、ローカル環境でAPIを動作させることが可能です。

```sh
docker pull downloads.unstructured.io/unstructured-io/unstructured-api:latest

docker run -p 8000:8000 -d --rm --name unstructured-api downloads.unstructured.io/unstructured-io/unstructured-api:latest
```

### テスト実行

次に、APIをテストし、ファイルからデータを抽出してみます。以下のコマンドでリクエストを送信し、結果を確認します。

```sh
curl -X POST http://<host>:8000/general/v0/general \
  -H 'accept: application/json'  \
  -H 'Content-Type: multipart/form-data' \
  -F 'files=@<file name>' \
  -F 'unique_element_ids=true' \
  -F 'strategy=fast' 
```
##### オプション説明
多くのパラメータがありますが、まずは以下の2つのオプションを押さえておけば問題ありません。
- `strategy`
   - `fast`: デフォルトのオプションで、PDFや画像を処理する際にOCRを行いません。処理速度を優先する場合に最適です。
   - `hi_res`: OCR処理を実行します。画像内のテキストも抽出されますが、処理時間が大幅に増加します。

OCRを実行すると、処理時間が約20倍（体感的にはもっと）かかることがあります。まずは fast で試してみるのが推奨されます。

### 実行結果

2CPUのサーバーで16MB、62ページのPDFを処理したところ、OCRなしでは数秒で完了しましたが、OCRを実行すると約8分かかりました。この際、Tesseract が実行されていることが確認できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1590551/13e92d33-4e98-3d2d-6c9d-ff94f79e4740.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1590551/0a65f753-d040-875c-f2f3-22f5f18da6c3.png)

使用したドキュメント
- [コンテンツ制作のための生成AI利活用ガイドブック](https://www.meti.go.jp/policy/mono_info_service/contents/ai_guidebook_set.pdf)

## 所感
- Unstructured API はさまざまなファイル形式に対応しており、すぐにAPIとして利用できる点が非常に便利です。テキスト抽出の処理も速く、イベント処理やリクエスト処理においても使用できそうです。
- ただし、OCRを使用する場合は処理時間が長くなるため、実用性には制限があるかもしれません。特にOCRの精度を確認するための検証が必要です。


## 参考リンク
- [Unstructured API の公式リポジトリ](https://github.com/Unstructured-IO/unstructured-api)
Python環境の管理、運用方法のおすすめ！（pyenv ＋ pipenv）

# はじめに
こんにちは、もちもちMAXです。
今までPythonを使って色々なことをやってきたのですが、その中で困るのがPythonバージョン、ライブラリの管理です。ちょっと試そうにも今のPythonバージョンでは動かない、ライブラリのバージョンが全然違うなど、よくあると思います。また、大量に仮想環境を作っていると何が何だか分からない、ということもありますよね？
そんな時におすすめのPython環境の管理、運用方法を説明します！

# Python環境の管理とは
そもそもPython環境の管理というのは
- Pythonそのもののバージョン
- 使用するライブラリのバージョン

の2つを管理すること（と勝手に思っています）を言います。今回はそれぞれpyenvとpipenvでバージョンを管理していきます。

# pyenvのインストール
pyenvは複数のPythonバージョンを1つのシステムにインストールし管理するためのツールです。Windowsでpyenvをインストールするには、コマンドプロンプトで下記を実行します。
```text
pip install pyenv-win --target %USERPROFILE%/.pyenv
```
下記の2つのパスをユーザの環境変数の一番上に追加します。
```text
%USERPROFILE%\.pyenv\pyenv-win\bin
%USERPROFILE%\.pyenv\pyenv-win\shims
```
※ %USERPROFILE%は、Windowsのコマンドプロンプトで使用される環境変数で、ログインしているユーザーのプロファイルディレクトリのパスを表します。なのでそのままコピペして実行してもらえればいけるはずです。

pyenvによるPythonのインストールは下記のコマンドで可能です。
```
pyenv install 3.9.4
```

# pipenvのインストール
pipenvは仮想環境を作成し、プロジェクトごとに独立したライブラリのバージョン管理をおこなうツールです。pipenvのインストールはpipで簡単にできます。
```
pip install pipenv
```

pipenvで仮想環境を作成する際は、適当なディレクトリに移動し下記のコマンドを実行します。
```
pipenv install
```
仮想環境作成後に、下記のコマンドで仮想環境に入ることができます。
```
pipenv shell
```
最後に、下記のコマンドで所望のパッケージを仮想環境にインストールできます。
```
pipenv install numpy
```

ちなみに、pipenvの仮想環境では↑キーで直前のコマンドを表示することができません。これが地味にうざったいので、仮想環境に入る際に`pipenv shell`ではなく下記のコマンドを使うことをおすすめします。コマンドプロンプトではこれで↑キーが有効になります。
```
python -m pipenv shell
```

# pyenvとpipenvの運用
ここまでの説明で自由にPythonのバージョンとライブラリのバージョンを管理することができるようになりました。ただ、このまま何も考えずにPythonインストール、仮想環境作成を続けていくと意外とごちゃついてきます。複数のプロジェクトを同時進行しているときはpyenvでPythonバージョンを変えるのが面倒になってきますし、そもそもどのPythonバージョンを使っていたかも分からなくなってきます。

そこで、おすすめの運用方法を紹介します。といっても、特にツールを使うわけではなくディレクトリ構成と名前にルールを付けるだけなので簡単です。

### ルール1：pyenvはローカルで適用しPythonバージョンをディレクトリ名にする
文字で言っても分かりにくいと思うので、適用した結果のディレクトリ構成を示します。
```
working_dir
 │───python3803
 │───python3911
 └───python3104
```
こんな感じで、ディレクトリ名をPythonのバージョンにします。そして、それぞれのディレクトリでバージョンに合わせたコマンドを実行します。
```
pyenv local 3.9.11
```
このコマンドは実行時のディレクトリにのみpyenvを適用するもので、`python3911`のディレクトリで実行すればその配下でのみ3.9.11のPythonが有効になるということです。

### ルール2：pipenvはルール1で作成したディレクトリ配下で実行する
pipenvの仮想環境は`python3911`などの特定のPythonが実行可能なディレクトリ配下で作成します。基本的にはプロジェクトの名前をそのまま付ければ良いです。
```
working_dir
 │───python3803
 │───python3911
 │ │────deep_learning      機械学習系のライブラリを入れる
 │ └────web_server         webサーバ用のライブラリを入れる
 └───python3104
```

これらの2つのルールを守って運用するだけでpython環境で悩むことがかなり減るかと思います。

# さいごに
今回はPython環境の管理、運用方法について説明しました。この運用を始めてからPython環境がぐちゃぐちゃになることも無くなりストレスフリーで開発できています。運用方法は状況によって最適なものが変わると思うので今回紹介したものは色々ある内の1つと思ってください。もし合いそうであれば是非やってみてください！

最近、ブログと自作アプリのLPを立ち上げたので是非見てってください！それでは！！

ブログ↓
https://mochinochikimchi.com

アプリLP↓
https://mochinochikimchi.com/applications/mealmotion/index.html
テンプレートを引用するツールの修正案を探ってみます

## はじめに
こんにちは、水野です。
自分の現場ではメールテンプレートを多用するのですが、
運用が頻繁に変わるため、その都度テンプレートの変更を求められます。

マクロをつかうので、必要なテンプレートを比較的簡単に引っ張ってこれるのですが、
普段の業務にちょこちょこ修正作業をしないといけないというのがとても面倒くさいので、
簡単に修正できる方法がないか調べてみました。

### 簡単な仕様の紹介
１．使っているツールはシートにてどのテンプレートを引っ張ってくるかを選択
２．１で選択した内容から、テンプレート名,テンプレート格納先のパス,
　　,件名,宛先,CCがまとめられているシートの情報を引用
３.エクスプローラーに格納したテンプレート（.oftファイル）に、情報を張り付ける。
#### 難点

特定のパスにテンプレートファイル（.oft）を格納しているので、
テンプレートを修正するために以下の手順を踏まないといけない。
【修正方法】
```
・.oft ファイルをOutlookで開く。
・メールを .msg ファイルとして保存する。
・.msg ファイルを修正する。
・修正したメールを再び .oft ファイルとして保存する。
```
つまり面倒くさいのです。

#### 改善方法

件名,宛先,CCの情報等がまとめられているシートに並べて、本文情報もセルに記載する。

```
【Excelのシートからデータを取得】
Set ws = ThisWorkbook.Sheets("メールデータ")
    ToAddress = ws.Range("A2").Value  ' 宛先
    CCAddress = ws.Range("B2").Value  ' CC
    Subject = ws.Range("C2").Value    ' 件名
    Body = ws.Range("D2").Value       ' 本文


【新規メールを作成】
    Set MailItem = OutlookApp.CreateItem(0)

    ' メールの情報をセット
    With MailItem
        .To = ToAddress　' 宛先
        .CC = CCAddress　' CC
        .Subject = Subject　' 件名
        .Body = Body　' 本文
        .Display   ' メールを表示 (送信するには .Send に変更)
    End With
```

※メールデータがまとまっているシートのセルD2から本文を引っ張って
新規メールにセットする内容だけを記載したものになり、詳細は割愛しています。

・長所
上記の例でいるとD2に本文をそのまま入力していきます。
Excelでのセル内の複数行入力は、Outlookでの改行と同様に扱われるため
修正箇所を直接書き換えるだけでテンプレートの修正が可能

・短所
本文の改行等はOutlookにも反映されますが、.oftファイルとは異なり、
特定の単語だけ色を変える、フォントを変えるなどのフォーマットに制限かかる。
### 最後に
今回改善方法を調べた中で、.oftファイルを使った方法、シートのセルに直接記入する方法
なんだかんだで一長一短なんだなということを改めて痛感しました。

自分の業務内容的には注意点等をわかりやすく先方に伝える必要があるため
.oftファイルでテンプレートを利用する今現在の運用のほうがいいのかなと納得させられる結果となってしまいました…

以上、水野でした。
【React学習3ヶ月目】学習記録アプリをTypeScript, Jest, Chakra-uiでリニューアルした

## 今回作ったアプリはこんなです
学習内容、時間を登録すると合計時間が算出されるというもの。
登録、編集、削除機能をつけています。
![ezgif.com-video-to-gif-converter.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810842/e5ed9757-d601-88e3-542b-eb812664879b.gif)

バリデーション機能もあります。
![ezgif.com-video-to-gif-converter (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810842/d9556176-73bf-1189-feb2-f73215f9a9bd.gif)

## 前回との差分
・TypeScriptで型を使ったことで、コードの可読性と保守性を向上
・Jestでモックテストを使った
・Chakra-UIを採用
・モーダルを導入したことで、よりリッチなUIを実現した

前回は型にそれほど注力しませんでしたが、TypeScriptのクラスを使って型にロジックを持つ。ということをしています。
またテストではJestを使ってモックでデータベースに依存しないテストを書きました。
※前回のアプリ作成の記事
(https://qiita.com/shotaqiita/items/832f73f0923b83a0d52b)

## 3ヶ月前と比べてどう成長したか
### Reactの状態管理が怖くなくなった
1ヶ月目、初めてReactでアプリを制作したときは「なぜか値が更新されない！」というエラーに直面しました。しかし、今ではエラーが出た際にその原因を迅速に特定できるようになりました。

親コンポーネントでログを出して問題箇所を特定する方法や、状態を一箇所に集中させることでエラーの原因を絞り込む技術が身につきました。

### Chakra-UIが使えるよになった
今までは素のCSSで頑張っていましたが、Chakra-UIでデザインをいい感じに、しかも早く実装できました。
今回のアプリは見た目もすごく気に入っていますし、人気なものがなぜ人気かは触ってみるのが一番分かります。

## 学習の振り返り
### Write Code Every Day
John Resig氏の「Write Code Every Day」が有名ですが、私も毎日コードを書くことのメリットを実感しています。一番のメリットは、前回の作業を思い出す時間が減り、コードを書くことに集中できる点です。

僕の場合、副業やプライベートの予定があり時間が取れない時は10分でもいいからやるようにしています。
10分でも手をつけると結局やりたくなって30分くらいやっていることも多いです。

何かを毎日やることは難しいですが、私はモチベーション管理のために、勉強のコミュニティ「JISOU」で毎日日報を投稿しています。
投稿していないと、「今日はサボったな」と思われてしまうので、サボり防止にもなります。

### 最後に
3ヶ月間、Reactの学習を続けてきて、たくさんのことを学ぶことができました。

これからはReactの勉強を続けて、実際にユーザーに使ってもらえるアプリ開発を行いたいです。

### JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします:下向き指差し:
https://projisou.jp

## 参考
https://johnresig.com/blog/write-code-every-day/
テスト自動化ツールにMagicPodを選定した理由

## はじめに

こんにちは。
第三者検証業務を実施している部門で、業務のDX化を担当しています。
今回、検証業務の対象システムや検証業務の効率化を目的として開発しているシステムのE2Eテストやリグレッションテストを自動化する目的で、テスト自動化ツールの**MagicPod**を導入しました。この記事では、数ある自動化ツールの選択肢からなぜMagicPodを選んだのか、その理由を紹介します。

テスト自動化ツールには以下のようなさまざまな選択肢があります。

- **OSSのフレームワーク**  
  例: Selenium, Playwright, Cypress など
- **インストール型ツール**  
- **SaaS型ツール**  
  例: MagicPod, Autify, mabl など

## OSSのフレームワークを選択しなかった理由

OSSのテストフレームワークには、SeleniumやPlaywright、Cypressなどがあります。これらのフレームワークはエンジニアリングの自由度が高いです。しかし、当部門は**非エンジニアがメイン**のため、**コーディングが必須のツール**だとそもそも使われない、あるいは保守されないリスクが高いと判断しました。

エンジニアやコーディング経験のあるメンバーが部門に継続的に存在し、かつ十分な工数を割ける場合には、OSSフレームワークは有力な選択肢になります。しかし、当部門の状況では、**メンテナンスの容易さや非エンジニアが扱えること**が重要だったため、OSSフレームワークは今回の選定から外しました。特に第三者検証業務における自動化には、OSSのテストフレームワークは向いていないと判断しました。

## インストール型ツールを選択しなかった理由

インストール型のテスト自動化ツールも検討しましたが、以下の理由から対象外としました。

1. **対応環境が制限されている**  
   一部のインストール型ツールは、macOSやLinuxに非対応であることもあるなど、試験環境が限られてしまう可能性がありました

2. **スケーラビリティの制約**  
   利用人数が増えるにつれ、インストール型ツールではライセンス管理やインフラの対応が複雑になることが予想され、部門全体でのスケールを考慮すると適していないと判断しました

3. **バグ対応や機能改善のスピード懸念**  
   SaaS型ツールに比べて、インストール型ツールはバグ修正や機能追加のスピードが遅れるイメージがありました。あくまでイメージなので、実際はそんなことはないかもしれません

## SaaSツールの中でMagicPodを選択した理由

SaaS型のテスト自動化ツールには、**MagicPod**、**Autify**、**mabl**など、さまざまな選択肢が存在します。インストール型に比べ、スケーラビリティやメンテナンス性に優れている印象です。

その中でも**MagicPod**を選定した最大の理由は、**イニシャルコストの低さ**です。自動テストの経験が乏しい部門において、まずは低コストで試してみたいというニーズに最適でした。自動テストの有効性を実証し、徐々に展開を拡大するフェーズでは、初期投資の低いツールが選びやすいです。

さらに、**テスト実行回数に制限がない**点や、同僚の利用経験者からの**サポート体制が手厚い**という評価も、安心材料の一つでした。


機能面については、基本的な部分では、どのSaaS型ツールも大きく変わらない印象を受けました。

## MagicPodを導入してみて

実際に導入してみて、セットアップは非常に簡単で、**操作性も直感的**でした。定期実行や通知設定もすぐに行えました。

テスト作成時に、操作をトレースして自動でテストを作成してくれたら、より便利そうだなと感じました。

## 最後に

今回、さまざまなテスト自動化ツールを比較した結果、**完璧なツールは存在しない**と感じました。どのツールも何かしらの制限や制約があるので、組織の優先順位を決めて選定する必要があります。また、場合によっては複数のツールを組み合わせて利用することも有効な戦略となるかもしれません。
サクラエディタの個人的に便利だと思った機能（Grep検索）

こんにちは！エンジニアの篠原です:penguin:
今回もサクラエディタで個人的に便利だと思った機能を紹介します。

前回はこちら↓
(サクラエディタ自体の紹介とインストール方法も記載してます)

https://qiita.com/pesysyon/items/6559649ab6f60b8af749


## 便利機能（Grep検索）


一言でいうと、「**複数ファイルから特定の文字列を検索**」です！


実際にやってみます。
例えば、↓のように3つのテキストファイルとサブフォルダ(その中に1つのテキストファイル)があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/5ff928bb-d317-0137-1d17-4b1fb99b2adb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/e2ae4220-bf5e-6066-425f-6365a070279f.png)


それぞれ中身はこちら↓
1.txt 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/7705b5c4-bc0d-6958-2225-efbba11e216b.png)

2.txt 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/fa45b6fc-eb74-007e-db6f-e472ec646370.png)

3.txt 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/482e868a-5d21-44d1-dca5-079114ffdcf0.png)

4.txt
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/1f383edd-d6ec-b935-dd42-76e2cf6e6adb.png)

<br>
この4ファイルから、特定の文字列を条件にGrep検索してみます。
まずサクラエディタを立ち上げて[Ctrl]＋[G]を押します。
するとGrep検索画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/03fb1999-8cd2-3abf-190c-dd909c8e4dc4.png)

<br>
たくさん入力項目が出てきましたが、今回はとりあえずこれ入れればGrep検索を使えるよ！っていう項目を紹介します。

<br>

**条件**：検索したい特定の文字列(正規表現等を使えば複数の文字列も可能)
**ファイル**：*.txtのようにワイルドカードを使って拡張子で絞れます
**フォルダ**：検索したいディレクトリ
**サブフォルダからも検索する**：フォルダに指定したディレクトリ配下のサブフォルダも対象に入れてくれます
**正規表現**：ANDやOR等条件に正規表現を使いたいときは個々のチェックを忘れずに！

<br>

それでは実際に上記4ファイルから検索してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/f2485908-478b-b323-cb31-c8f3a486adae.png)

今回はファイル内に「かき」もしくは「つてと」が含まれていることを条件に
正規表現を使用して検索してみました。

すると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/b38927b8-a347-84e0-dfb5-f583d7368cf2.png)

**対象ファイルが表示されました**:clap:

例えば、大量のログファイルから日付を絞ったり
プログラミングエディタとしても使えるサクラエディタですので
使い方は∞ですね:sunglasses:


## まとめ
今回は「Grep検索」について紹介しました。
個人的にもよく使っている機能で、とても助けられています:pray:
まだまだサクラエディタには便利機能があるので
引き続き紹介していこうと思います！

以上、篠原でした:penguin:
OpenMediaVaultでのストレージマウント・アンマウントの手順覚書

# 概要

OpenMediaVault（OMV）をラズパイ上で使用しています。低コストで運用できるので重宝しています。ただ、USBポートが少なかったり、SATA USB変換アダプターを2つしか持っていなかったりするので、結構な頻度でストレージを繋ぎ変えます。
マウント/アンマウント、共有フォルダの作成/削除とその反映実行の操作手順によってはエラーになってしまいます。
ここに備忘録として手順をまとめます。

## 環境

- Raspberry Pi 4 Model B Rev 1.5
- Raspberry Pi OS Lite (64-bit) （リリース日: 2024-07-04、Debian GNU/Linux 12.6 (bookworm)）

## マウントと共有操作手順

ストレージ（HDD/SSD）をマウントし、SMB/CIFSでフォルダーを共有します

- (1) ストレージをUSB接続
- (2) OMVへブラウザからアクセスしログイン
- (3) 左メニューより、ストレージ > ファイルシステム
  - 該当のデバイスを「マウント」
    - ▶️マーク押下でマウント詳細画面から設定
    - 「ファイルシステム」を選択し「保存」押下
- (4) 画面上部の「保留中の構成変更」を「適用」
  - モーダルが表示されるので「はい」を押下
  - （完了すると、サーバ上のマウントポイント`/srv/ストレージのUUID/`が作成される）
- (5) 左メニューより、ストレージ > 共有フォルダ
  - 作成ボタン（「＋」マークアイコン）押下で共有ファオルダ詳細画面が表示される
  - 「名前」を適当に入力
  - 「ファイルシステム」に(3)でマウントしたファイルシステムを選択
  - 「相対パス」に共有したいディレクトリを選択
  - 「保存」押下
  - ※「保留中の構成変更」が表示されるが無視で良い
- (6) 左メニューより、サービス > SMB/CIFS > 共有
  - 「Shared folder」に(3)で設定した共有フォルダを選択
  - 「保存」押下
- (7) 画面上部の「保留中の構成変更」を「適用」
  - モーダルが表示されるので「はい」を押下

SMB/CIFSで指定フォルダーが共有されているので、WindowsであればエクスプローラにUNCパス（`\\サーバIP\`）入力、macOSであればFinderから「移動」>「サーバへ接続...」からパス入力（`smb://サーバIP`）。

## 接続できない場合

### SMB/CIFS設定

- 左メニュー > SMB/CIFS > 設定
- 一番上部の「有効」にチェックが入っていることを確認

### ユーザ設定

ユーザ設定がおかしい場合があるので下記メニューより確認する。

- 左メニュー > ユーザー > ユーザー
- 「名前」が想定したユーザ名となっていることを確認
- 「編集」押下で、パスワードを入力し直す

## 共有削除とアンマウント操作手順

- (1) サービス > SMB/CIFS > 共有
  - 該当の共有フォルダを「削除」（ゴミ箱のアイコン押下>モーダルで「はい」押下）
  - ※「保留中の構成変更」が表示されるが無視で良い
- (2) ストレージ > 共有フォルダ
  - 該当のフォルダを「削除」（ゴミ箱のアイコン押下>モーダルで「はい」押下）
- (3) 画面上部の「保留中の構成変更」を「適用」
  - モーダルが表示されるので「はい」を押下
- (4) ストレージ > ファイルシステム
  - 該当のデバイスを「アンマウント」（停止のアイコン押下>モーダルで「はい」押下）
  - 「保留中の構成変更」を「適用」
  - モーダルが表示されるので「はい」を押下
  - （サーバ上のマウントポイント`/srv/ストレージのUUID/`が削除される）
- (5) ストレージを取り外す

## 削除・案マウントできない場合

### device is busyエラーが出力される場合

下記状況のどれかだった。

- 誰かがSMB/CIFS等でフォルダーを閲覧中
- ssh等でマウントディレクトリにcdしている
  - マウントディレクトリは`/srv/dev-disk-by-uuid-11111111-2222-3333-4444-ffffffffffff`のようなディレクトリにマウントされています。

## OMVと実際の状態が乖離してしまった場合

OMVの状態とサーバの状態が異なっており、どのような各操作をしてもエラーになる状況に陥ってしまう時があります。例えば、ストレージをマウント・共有しっぱなしでサーバをリブートした、サーバ電源落とした後でストレージを取り外したなどがあります。その場合は、OMVの設定ファイル（xml）を手で編集します。

### 簡単な手順

OMVにてマウント・共有を行っていたすべてのストレージを取り外し、OMV設定ファイルを編集します。下記xmlのエントリをすべて削除します。

```bash
sudo xmlstarlet ed --inplace \
  -d  "/config/system/fstab/mntent" \
  -d "/config/system/shares/sharedfolder" \
  -d "/config/services/smb/shares/share" \
  "/etc/openmediavault/config.xml"
```

### 各操作で、OMV設定ファイルにどのような変化があるか

マウント時の各操作にて、設定ファイルにどのようなデータが追記されているのかを確認しました。xml解析ツール`xmlstarlet`を使用します。

```bash
# xmlstarletのコマンド
# -t output is text
# -c print copy of XPATH expression
xmlstarlet -t -c 'XPATH' target.xml
```

```bash
omv_conf=/etc/openmediavault/config.xml
# (3) `/config/system/fstab/mntent`が追記される
sudo cat $omv_conf | xmlstarlet sel -t -c '/config/system/fstab/mntent'

# (5) '/config/system/shares/sharedfolder'が追記される
sudo cat $omv_conf | xmlstarlet sel -t -c '/config/system/shares/sharedfolder'

# (6) '/config/services/smb/shares/share'が追記される
sudo cat $omv_conf | xmlstarlet sel -t -c '/config/services/smb/shares/share'
```
Raha Group - 建設と産業のリーダー

Raha Groupは、建設、工業、及びインフラプロジェクトのリーダーとして広く知られています。ウェブサイトでは、企業の提供する多様なサービスと専門分野について詳しく紹介されています。具体的には、商業ビル、住宅、インフラストラクチャーのプロジェクト管理を行い、高品質の施工を提供しています。また、企業のプロジェクトの実績や成功事例が掲載されており、信頼性と専門性が強調されています。Raha Groupは、地域経済の発展にも寄与し、持続可能な開発を目指しています。

詳細については、こちらのリンクをご覧ください: Raha Group
PL-900　合格体験記

# はじめ
PL-900を受験してきました。勉強法に癖があったので振り返ってみます。
# 受験概要
- 試験名…Microsoft Certified: Power Platform Fundamentals
- 受験日…2024年9月22日（日）（日本時間）
- 合格点…900点中700点
- 受験場所…テストセンター
- 結果…合格 838点

# 筆者の経験値
PowerPlatormを実務で開発したことはありません。
Microsoft関連だと、AZ-900は取得済み、かつ会社がM365環境ユーザーのため、なんとなくMicrosoftっぽい考え方のあてがあるレベル感です。
RPA製品はいくつか実務で使用しており、Power Automate Desktopは遊びで2、3ロボット作ったことがあるため、Power Automateだけ他の製品よりも知っていました。

# 勉強内容
以下の順番で勉強しました。回り道もしつつ合計で25時間程度かかりました。
模擬テストの解説にMicrosoft Learnのコース外の記事が多々出てきており、内容を押さえておくと理解が深まりました。
また、試験対策動画を見ると勘所のようなものが分かるようになり、実務からは離れますが試験勉強という観点でいうと役に立ちました。
- Virtual Traning Dayの受講（半額バウチャー目当て）
- 模擬テスト受験1回目(40点くらい)
- Microsoft Learn PL-900: Microsoft Power Platform Fundamentals　1周
- 模擬テスト受験2~4回目（50~60点くらい）
- 合格体験記を読む
- 試験対策動画を視聴　https://learn.microsoft.com/ja-jp/training/paths/power-plat-fundamentals/
- 模擬テストの解説先のURLやQiita記事で知識を補完しつつ5~8回くらい

# 参考にした合格体験記
こちらの合格体験記を参考にしました。
> https://qiita.com/Hiro_lcnc/items/5243d1d948010bee0e1a#:~:text=%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB%E6%9C%AC%E8%A8%98%E4%BA%8B%E3%81%A7%E3%81%AF%E3%80%81

> https://qiita.com/kozue-sh/items/6f385e1122940bf4c2f1#:~:text=%E8%87%AA%E5%88%86%E3%81%A7%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B%E3%81%A8%E4%BD%BF

# 試験勉強のポイント - 名称変更・表記のゆらぎを把握する
Microsoft Learnを1周行った後の模擬テストで点数が伸び悩みかなり焦っていました。
原因は、サービスや要素の表記が揺らいでおり、体系的な知識としてインプットできていなかったことでした。
日本語化によるばらつきもありますが、ここ3年くらい（2021年～2024年くらい）（？）で公式に名称が変更されたものもあります。
試験対策動画の中でも名称変更が言及されていますが、動画の公開後に名称変更されている内容もあるため、私が把握した範囲で列挙します。
なお、2024年9月30日時点の情報であり、この記事を読んでいるころにはさらに名称変更が行われている可能性があります。
1. サービス名称変更
    - Common Data Service → Dataverse
    - PowerApps ポータル → PowerPages ※PowerPagesは元々PowerAppsの一部でしたが、別サービス扱いに変ったらしいです
    - Vertual Agent → Copilot ※名称変更というより、Vertual AgentがCopilotに吸収されてような位置づけらしいです 
2. Dataverseの要素名変更
    - エンティティ → テーブル
    - フィールド → 列
    - レコード → 行
3. ゆらぎ 
    - 視覚化 = ビジュアル（PowerBIの要素）
    ※ゆらぎはこのほかにもたくさんあります。

# おわりに
PowerPlatformはおもしろいサービスがたくさんあり、実務で使えるようになると幅が広がりそうです。
この先はPL-500にも挑戦しようと画策しています。
Next.jsのAPI Routes

<h2>API Routesの使い方</h2>
Next.jsのAPI Routesは、APIエンドポイントを簡単に作成できる機能です。

API Routesを使用すると、サーバーサイドの処理をNext.jsアプリケーション内で直接行うことができ、Node.jsの環境でリクエストを処理し、レスポンスを返すことができます。

API Routesはpages/apiディレクトリ内にファイルを作成することで実装します。

これにより、特別なサーバー設定なしでAPIを簡単に構築できます。

<h2>シンプルなAPIの作成方法</h2>
pages/apiディレクトリ内にJavaScriptまたはTypeScriptファイルを作成し、そのファイル内でリクエストとレスポンスの処理を行います。

```

//pages/api/hello.ts

import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(
  req: NextApiRequest,
	res: NextApiResponse
) {
res.status(200).json({ message: 'Hello, world!' });
}json({ message: 'Hello, world!' });
}
```

/api/helloというエンドポイントが定義され、GETリクエストを受け取ると、{"message": "Hello, world!"}というJSONレスポンスが返されます。

<h2>外部APIとの連携</h2>
外部APIとの連携を行う場合は、API Routes内で外部APIへのリクエストを行い、その結果をクライアントに返すことができます。

```

// pages/api/user.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import fetch from 'node-fetch';

export default async function handler(
   req: NextApiRequest,
	 res: NextApiResponse
) {
const externalApiUrl = 'https://api.example.com/user';

try {
    const response = await fetch(externalApiUrl);
    const data = await response.json();
    res.status(200).json(data);
} catch (error) {
    res.status(500).json({ message: 'Error fetching data' });
  }
 }
 ```
 
/api/userというエンドポイントが外部のAPIからデータを取得し、そのデータをクライアントに返します。

<h2>まとめ</h2>
Next.jsのAPI Routesは、アプリケーション内で簡単にAPIを作成できる強力な機能です。

シンプルなAPIエンドポイントの作成や、外部APIとの連携を通じて、サーバーサイドでのデータ処理やAPIリクエストの処理を行うことができます。

これにより、フロントエンドとサーバーサイドの処理を同一のコードベースで管理し、効率的な開発が可能となります。
投稿 92 grab grabing カーソルプロパティ　手のマーク 2024/09/30

本日の勉強時間　3H

◾️grab

cursor: grab;
補足
ある要素がドラッグ&ドロップできることを視覚的に伝えたい場合に使用されます。



◾️grabbing

cursor: grabbing;
補足
grabとセットで使用されます。ある要素がドラッグされてからドロップされるまでの間に使用されます。
Salesforceでフローを作成しよう～Todo行動作成レコードを自動でフォローする方法

本橋孝昭です
今回はフローで行動作成時に自動でそのレコードをフォローする方法を解説します

## そもそもSalesforceのフォローとは？


レコードの右上にある、この「フォロー」ボタンです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/a54e97bb-f64f-1736-6811-a3cb6f237e9f.png)

　なおフォローしていないと「+フォローする」となります
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/f8d28f46-5527-0dc1-2d68-d485495e11bc.png)


## 通常レコード作成時に自動的に作成ユーザーがレコードをフォローする設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/13331fdf-f1c1-864c-84d1-197123019f14.png)

「私のフィード」から「作成したレコードを自動的にフォローする」をすることでTodo・行動など例外オブジェクト以外は作成時自動でフォローされます

※参考サイト

レコードのフォロー
https://help.salesforce.com/s/articleView?id=sf.collab_following_records.htm&type=5


>作成したレコードを自動的にフォローするには、次の操作を行います。
ページ上部にあるプロファイルアバターをクリックして、[設定] を選択します。
[クイック検索] ボックスに「私のフィード」と入力し、[私のフィード] を選択します。
[作成したレコードを自動的にフォローする] を選択します。
作成したレコードは自動的にフォローできますが、ToDo、イベント、ダッシュボードは自動的にフォローできません。

ここである例外のTodo,行動についてフローで自動フォローする設定を解説します


## フロー
参考までに行動作成レコードを自動でフォローするフローはこちらです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/b9cbc695-8fee-e46d-382b-cdaf84246c9b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/98daf4a9-2814-f273-6bed-e27e5091d119.png)



ParentIdは{!$Record.Id}
SubscriberIdは{!$Record.CreatedBy.CreatedById}　です



これで行動作成時に自動的に作成者はフォロー可能です



## 注意点

フィード追跡の有効化をしてください

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/ea7aeaa9-73dd-6979-9a8a-2654a6b7f1e9.png)




そうしないとこのようなエラーが発生します


「CreateEvent」処理失敗により、このレコードを保存できません。Salesforce システム管理者に次の詳細を報告してください。このエラーは、フローでレコードの作成が試行されたときに発生しました: INVALID_CROSS_REFERENCE_KEY: 行動でフィードが有効になっていません。ExceptionCode の値については、『SOAP API 開発者ガイド』を参照してください。 エラー ID: 1268223585-2167151 (-1023322916)になっていません。ExceptionCode の値については、『SOAP API 開発者ガイド』を参照してください。 エラー ID: 1268223585-2167151 (-1023322916)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/e9e9e0fd-cc3e-3017-bebc-6d3e3093fdd3.png)
先輩に学ぶ！プルリク提出前に確認したいチェックリスト７項目

「GitHubでプルリクエストを提出する際に気をつけたいこと、全て満たしている状態で出したいこと」
そんな自分なりのプルリクチェックリストを作りました。全てチームの先輩方からアドバイスいただいた内容です。

## ✅ そのプルリクを見て、何がどう変わるのか、ちゃんと伝わるか？

プルリクを提出するときは、どの部分がどのように変更されるのかを明確に記述しましょう。その変更の理由や背景も書くとより親切ですし、認識のズレもなくなりスムーズです。
私たちのチームでは、Before Afterの画面スクリーンショットを添付することで、画面上での実際の変更も見えるようにしています。視覚的に変更を認識しやすくなりますし、またレビュアーが画面を開きに行く手間も省くことができます。

## ✅ そのプルリクの変更が多すぎないか？

プルリクは、大きな機能・リリース単位で提出する必要はありません。できるだけ最小単位にして、こまめに依頼することが大切です。

最近、私たちのチームでも大きなリリースのタスクがあり、うまく分割することができず600ファイルを超える巨大プルリクを爆誕させてしまいました。

ここまで大きくなくても、「30ファイルを超えているくらいでも"レビューちょっと後回しにしたいな〜〜"と思ってしまう」という先輩の意見もありました。小さなプルリクは素早くレビューをもらうことにも役立ちます。

そのタスクで達成すべき要件が10個あったとしても、10個完遂してからじゃないとレビューに出してはいけない、、、と考えてはいけません。

むしろ、10個一気に出してしまうとレビュアーの負担が莫大になり、レビューの質も保ちにくくなり、さらに根本的な修正があった時には手戻りの手間が半端じゃありません。少しずつ、最適な最小単位で出せるように心がけていきたいものです。

## ✅ 自分で気付けるレベルのミスを残していないか？

ある日先輩から、「ちょっと雑さがあるね〜自分で気付けるようなミスも混じっていて、惜しいね〜」というアドバイスをもらいました。
初心者ほど気をつけたいところだと思います、、、が、提出までに時間をかけすぎていないか気にしてしまったり、見直しても気付ける精度が低かったり、、、

難しいところですが、いつまでも意識し続けたい項目です。私はRubyMineで開発しているのですが、RubyMineで差分を一つ一つチェックしてpushした後、もう一度プルリクの差分を見て、おかしな記述はないか、明らかにリファクターすべきコードはないかをダブルチェックするようにしています。


## ✅ プルリクを出すブランチを間違えていないか？

これも上の項目と近いですが、絶対に避けたいミスです。私はいつもプルリクを開ける前に、「into 〜　from 〜」の部分を見るだけでなく**声に出して読み上げて**、確認するようにしています。


## ✅ 自分の意図（なぜこのコードを書いたのか）や、迷った箇所、検討中の内容は伝わるか？

「これどういう意味？」「何でこうなったの？」「この箇所には後で修正が加わるの？」

そんな質問コメントをもらいそうな箇所がないか、あらかじめ自分でチェックするようにしています。質問を想像することによって、コードの中にコメントを残すべきかどうかの再検討もできます。

また、変更の方法やコードの書き方に迷った箇所がある場合は、自身の考えや検討内容、他の候補などを自分でプルリク上にコメントを残しておきます。あるいは、プルリクを提出すると同時に口頭で伝えるようにします。すると、レビュアーから必ず意見をもらうことができ、より少ないやり取りで修正していくことができます。


## ✅ レビュアーを指定しているか？

プルリクの提出時には、レビュアーを指定することを忘れずに行いましょう。（私はよく忘れてしまいます。）
指定されたレビュアーはGitHub内で通知の確認ができるので、レビューが忘れ去られにくくなるはずです。


## ✅ Rubocopやテスト、CIは通過しているか？

プルリクを提出する前に、CI等のエラーがないかを必ず確認しましょう。これを怠ると、レビュアーが指摘する前に修正できたはずのエラーやスタイル違反が残ったままになり、無駄なやり取りが増えてしまいます。
私たちのチームではプルリク提出時のマナーとして必ず全てクリアした状態でレビューを出すように決めています。


## 番外編：新人も積極的にレビューをしてみると良いことたくさん
チェックリストではないですが、「新人の方でも、積極的に他の人のコードをレビューしてみること」をおすすめしたいです。

実際に私も、先輩のプルリクを見ることで、「こうやってプルリクを出すと良いんだ」という発見がたくさんありました。チェック項目1つ目の「変更点をスクリーンショットで載せること」や、5つ目の「迷った箇所をコメントで残しておいて積極的に議論を始める」という取り組みも、先輩のプルリクを見て知ったことです。

初めは先輩のプルリクを見たところでレビューできることもありませんし、まずコードの意味もわかりません。でも、プルリクの出し方自体や、他の方のコメントでコードの書き方を学ぶことはできます！とってもたくさん。

なので、自分に対して出されていない先輩方のプルリクでも、ぜひ覗きに行って、色々吸収することをおすすめしたいです。

### まとめ

より分かりやすく、よりレビューのしやすいプルリクを出せるように。私自身チェック項目を守っていけるよう頑張ります。ご覧いただきありがとうございました。
Next.jsのレンダリングについて

レンダリングとは、簡単に言うとウェブページをユーザーに表示するために、どのタイミングでHTMLを生成するかを決める仕組みです。

いくつかレンダリング方法を見てみよう。

<h2>SSR(Server Side Rendering)</h2>
ユーザーはその場で生成された最新のコンテンツを見ることができ、常に最新の情報を見ることができる。

ユーザーの嗜好やその他の動的なデータに基づいて、ユニークなコンテンツを提供することができる。

<h3>メリット</h3>
・ページが表示されるまでの処理が速い

・SEOに強い

・ユーザーの通信環境に左右されにくい
<h3>デメリット</h3>
・ページ遷移のたびにサーバーへの通信が発生する

・サーバー側の負担が大きい

・Node.jsを実行できるWebサーバーが必要になる

<h4>実装例）</h4>

```
import React from 'react';

export async function getServerSideProps() {
// データをサーバー側で取得

const res = await fetch('https://api.example.com/data');
const data = await res.json();

 return {
    props: {
       data,
    },
};
}

export default function SSRExample({ data }) {
	return (
  <div>
    <h1>Server Side Rendering (SSR)</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
  </div>
  	);	
}
```

<h3>適しているサービス</h3>
・ニュースサイト

・ブログやメディアサイト　など

<h2>SSG(Static Site Generation)</h2>
ビルド時にデータフェッチやpropsの値の決定を行い、HTMLを構築する。 以降のリクエストではその静的なHTMLが返される。


<h3>メリット</h3>
・表示が速く、サーバー負荷が少ない

・キャッシュを気にしなくてよい

・SEOに強い
<h3>デメリット</h3>
・ビルド以降、更新されても画面に反映されない

・更新頻度の高いサイトには向かない

<h4>実装例)</h4>

```
import React from 'react';

export async function getStaticProps() {
// ビルド時にデータを取得

const res = await fetch('https://api.example.com/data');
const data = await res.json();

return {
  props: {
      data,
   },
  };
 }
 
 export default function SSGExample({ data }) {
    return (
     <div>
         <h1>Static Site Generation (SSG)</h1>
         <pre>{JSON.stringify(data, null, 2)}</pre>
     </div>
     );
}
```

<h3>適しているサービス</h3>
・企業ンコーポレートサイト

・ポートフォリオサイト　など

<h2>CSR(Client Side Rendering)</h2>
ページがクライアントサイドでJSによって動的にレンダリングされる。

最初は空のHTMLが送られブラウザがJSを実行してコンテンツを生成する。

<h3>メリット</h3>
・サーバー側の負荷が軽い

・ページ遷移が高速

・API連携が容易
<h3>デメリット</h3>
・ページが表示されるまでの時間が長い

・サーバーから返却されるHTML自体は空のため、Webクローラーからページの内容が認識されずSEOで不利

<h4>実装例)</h4>

```
import React, { useEffect, useState } from 'react';

export default function CSRExample() {
  const [data, setData] = useState(null);
	
useEffect(() => {
// クライアント側でデータを取得
fetch('https://api.example.com/data')
  .then((res) => res.json())
  .then((data) => setData(data));
}, []);

return (
   <div>
       <h1>Client Side Rendering (CSR)</h1>
       <pre>{data ? JSON.stringify(data, null, 2) : 'Loading...'}
	</pre>
  </div>
	);
}
```

<h3>適しているサービス</h3>
・ダッシュボードや管理画面

・リアルタイムチャットアプリ　など

<h2>まとめ</h2>
・SSRは、SEOが重要で、動的コンテンツが求められるサービスに適している

・SSGは、静的で頻繁に更新されないコンテンツを持つサイトに適しており、表示速度と低サーバー負荷がメリット

・CSRは、リッチなインタラクティブ性とリアルタイムデータ処理が求められるアプリケーションに適している

・それぞれの特性を理解し、サービスの要件に合わせて適切なレンダリング方法を選択することが重要です。
RDS ブルー/グリーンデプロイ作成時のエラーの解消

mysql5.7のRDSを8.0に上げるためにブルー/グリーンデプロイメントのグリーン環境を作成した際に、エラーで詰まりました。

### 解決
1. RDSのインスタンスを選択
1. ログとイベントタブのログで、PrePatchCompatibility.logを検索
1. PrePatchCompatibility.logを選択して見るをクリックするとエラーログが見れる。

私が出てたエラーは、こちらでした。
```
26) Check for indexes that are too large to work on higher versions of MySQL Server than 5.7
	The following indexes were made too large for their format in a version of MySQL prior to 5.7.34. Normally, indexes within tables with compact or redundant row formats shouldn’t be larger than 767 bytes. For more information, see https://bugs.mysql.com/bug.php?id=102597 and https://bugs.mysql.com/bug.php?id=99791.
 ```
 
調べると、ROW_FORMATに異常がありそうだったので確認してみました。
```
SHOW TABLE STATUS FROM [テーブル名];
```
mysql5.7ではutf8を使っていたので、ROW_FORMATがCOMPACTでも良かったのですが、
mysql8.0以降ではutf8mb4がデフォルトになるため、ROW_FORMATがDYNAMICまたはCOMPRESSEDでないとデータ量が少なくインデックスが効かなくなるので変更が必要でした。
詳しくはこちらの記事を参照ください。
https://qiita.com/TanakanoAnchan/items/a6459b44557f2bdd5726

そのため、PrePatchCompatibility.logで指摘されていたカラムのROW_FORMATをDYNAMICにしました。
```
ALTER TABLE m_product ROW_FORMAT=Dynamic;
```

これでグリーン環境を作ることができました。


### 余談
その他に調べてた時にやったことをメモしておきます。

ステータスで無効な設定というエラーが出ていました。

DBのupdateができるかのチェックをします。
```
$mysqlcheck -u [DBのユーザー名] -p --all-databases --check-upgrade -h　[RDSのエンドポイント]
Enter password:[パスワード入力]
```

そうすると以下が出てました。
```
Warning  : Trigger [テーブル名] does not have CREATED attribute.
```

TRIGGERを調べてみると
```
mysql>SHOW TRIGGERS LIKE　[テーブル名];
```
Createdがnullになっていました。
なのでTRIGGERを再作成してCreatedに日時が登録されました。
TRIGGERの再作成時の記事↓
[TRIGGERの作成時にsql_modeというものに出会った ](https://qiita.com/hndfavodaismi/items/2715e3a3378447c7c8cc)
これでmysqlcheckすると全てOKになりました。
データベース設計の学習_2

# はじめに
今回は、データベースの物理設計について学習したことをまとめていきます。

# 物理設計の概要
### 物理設計のステップ

```mermaid
graph TD;
    テーブル定義-->インデックス定義;
    インデックス定義-->ハードウェアのサイジング;
    ハードウェアのサイジング-->ストレージの冗長構成決定;
    ストレージの冗長構成決定-->ファイルの物理配置決定;
```
### ・テーブル定義
　論理設計で定義された概念スキーマをもとに、それをDBMS内部に格納するための「テーブル」の単位に変換していくフェーズ。
 　※　論理設計で作成されるERモデルを論理モデル、物理設計で作成されるモデルを物理モデルという
  
### ・インデックス定義
　インデックスとは、パフォーマンスに影響を与える概念本の索引をイメージすると分かりやすい。プログラミング的な表現をすると、ポインタに近いらしい。ちなみに、インデックスはなくても機能としては何の問題もない。
 　このフェーズではインデックスを定義する。

### ・ハードウェアのサイジング
　ここでは、キャパシティとパフォーマンスの観点からハードウェアの選定を行う。
　データベースにおいては、データの整合性とパフォーマンスの間に強いトレードオフが存在する。データの整合性とパフォーマンスの平衡点を上手く見つけることがこのフェーズを成功させるカギになる。

 **キャパシティのサイジング**
 　システムのサービス終了時のデータ量を正確に見積もれない場合がある。
 　そのときは以下のアプローチが一般的である。
  　　１．安全率を大きくとって、余裕を持たせてサイジングを行う
　　２．簡単に記憶装置が追加できる構成にしておく

**パフォーマンスのサイジング**
　１．性能要件の定義（処理時間とスループット）
 　２．リソース使用量の基礎数値の取得
  　　数値を取得するには→類似の稼働中システムのデータを流用する、プロトタイプシステムを構築して性能検証を実施する。

### ・ストレージの冗長構成決定
　このフェーズではRAIDという技術を用いて、ストレージの耐障害性を高める。また、RAIDはシステム全体の信頼性と性能を改善することができる。RAIDにはレベルがあり、それぞれ特徴を持っているためどのレベルを使うかを決める必要がある。
　以下に代表的なRAIDのレベルをまとめた。
  **RAID0（ストライピング）**
 　データを異なるディスクに分散して保持する。しかし、ストライピングはデータを保持しているどちらかのディスクが壊れるとデータを完全に復元することはできなくなるので、冗長性は全くない。

**RAID1（ミラーリング）**
　ミラーリングは2本のディスクに全く同じデータを持つため、どちらか一方のディスクが壊れてもデータを復元することができる。信頼性は高いが、データが分散されないため性能は1本のときと変わらない。

 **RAID5**
 　これはパリティ分散と呼ばれる方式。最低3本で構成し、データとともにパリティと呼ばれる誤り訂正符号を分散して格納する。3本でこうせいしたばあいは、1本までならディスクが壊れてもデータを復元することができる。また、データを分散できるため、I/O性能の向上も期待できる。
　データベースは通常、書き込みより読み出しの機会が多いため、読み出し機能が重視される。

**RAID10**
　これはRAID1とRAID0を組み合わせた方式。ストレイピングとミラーリングのいいとこどりをした方式であるため、信頼性、性能が高い。しかし、導入コストが高いため予算の少ないプロジェクトでは採用できない。

 ### ・ファイルの物理配置決定
 　物理設計の最終ステップでは、データベースのファイルをどのディスクに配置するかを決定する。そして、データベースに格納するファイルの種類は、約5種類に分けられる。
  　１．データファイル
　２．インデックスファイル
　３．システムファイル
　４．一時ファイル
　５．ログファイル

 **データファイル**
 　データベースに格納するデータを保持するためのファイル。アプリケーションがSQLを通じて参照、更新を行う。

**インデックスファイル**
　テーブルに作成されたインデックスを格納するファイル。

**システムファイル**
　DBMSの内部管理用に使われるデータを格納する。

**一時ファイル**
　SQLで使われたサブクエリを展開したデータや、GROUP BY句などを利用したときのソートデータが格納される。

**ログファイル**
　テーブルに対する変更を格納するファイル。DBMSはテーブルのデータに対する変更を受け付けた場合、即座にデータファイルを変更しているわけではない。ログファイルにため込んだ変更を一括してデータファイルに変更を反映している。

 　これらのファイルを配置する際には、容量とファイルI/Oの量を考慮する必要がある。データファイルとインデックスファイルはデータの増加と、ファイルI/Oがどちらも多くなると考えることができるので、格納するディスクは専用にする。逆に、システムファイル、ログファイルはデータの増加はなく、ファイルI/Oの量が少ないということが考えられるのでディスクをまとめることができる。

# 終わりに
今回は、物理設計の概要についてまとめました。設計に関しては概要を学ぶことができたので、より深いところを学んでいきます。次回は、恐らく正規化になると思います。
TypeScriptを導入するメリット

<h2>TypeScriptのメリット</h2>

<h3>1.型安全性の向上</h3>
TypeScriptは静的型付けを提供し、コンパイル時に型エラーを検出します。これにより、ランタイムエラーの発生を減らし、より信頼性の高いコードを書くことができます。

<h3>2.コードの可読性と保守性の向上</h3>
型情報が明示的であるため、コードの意図や構造が明確になります。これにより、コードの可読性が向上し、保守や理解が容易になります。

<h3>3.IDEのサポート強化</h3>
TypeScriptは、豊富な型情報に基づくインテリセンス（補完機能）やリファクタリングサポートを提供します。これにより、開発効率が向上します。

<h3>4.ドキュメント化の促進</h3>
型定義により、関数やクラスの使用方法が明確に文書化されます。これにより、チームでのコーディング時に、他の開発者が意図を理解しやすくなります。

<h2>型定義、インターフェース、ジェネリクスの使用例</h2>
<h3>型定義</h3>
TypeScriptでは、変数や関数に型を明示的に定義することで、型チェックを行います。以下は、基本的な型定義の例です。

```// 基本的な型定義
let age: number = 25;
let name: string = "John";
let isActive: boolean = true;

// 配列の型定
let numbers: number[] = [1, 2, 3, 4];
let names: Array<string> = ["Alice", "Bob", "Charlie"];
```

この例では、number、string、booleanなどの基本的な型と、配列の型を定義しています。TypeScriptはこれらの型に基づいて、値が適切であるかどうかをチェックします。

<h3>インターフェース</h3>
インターフェースは、オブジェクトの構造を定義するために使用します。これにより、オブジェクトがどのようなプロパティやメソッドを持つべきかを明示できます。

```
// インターフェースの定義
interface User {
id: number;
name: string;
email: string;
}

// インターフェースを使用したオブジェクト
const user: User = {
id: 1,
name: "John Doe",
email: "john.doe@example.com",
};
```

この例では、Userというインターフェースを定義し、それに基づいてuserオブジェクトを作成しています。インターフェースを使うことで、オブジェクトが期待されるプロパティを持っていることを保証できます。

<h3>ジェネリクス</h3>
ジェネリクスは、型をパラメータとして受け取ることで、柔軟で再利用可能なコンポーネントや関数を作成するための機能です。

```
// ジェネリック関数の定義
function identity<T>(value: T): T {
return value;
}

// ジェネリック関数の使用
const num = identity(42);        // 型はnumber
const str = identity("Hello");   // 型はstring

// ジェネリッククラスの定義
class Box<T> {
private value: T;
constructor(value: T) {
this.value = value;
}
getValue(): T {
return this.value;
}
}

// ジェネリッククラスの使用
const numberBox = new Box<number>(123);
const stringBox = new Box<string>("TypeScript");
```

この例では、identityというジェネリック関数と、Boxというジェネリッククラスを定義しています。これにより、関数やクラスが様々な型に対して動作するようにすることができます。

<h2>まとめ</h2>
TypeScriptの導入により、型安全性が向上し、コードの可読性や保守性が改善されます。型定義、インターフェース、ジェネリクスを活用することで、より堅牢で再利用可能なコードを書くことができ、開発効率が大幅に向上します。TypeScriptの機能を理解し、効果的に活用することで、より高品質なソフトウェア開発が可能になります。
v0を使ってみた

webエンジニアの風速です。
以前Vercelのサービスを触ってみたのですが、今回はVercelが提供しているv0というサービスを使ってみようと思います。

https://qiita.com/pesysyon/items/a256afcb279870365073

# v0とは
v0は、AIを搭載したVercelによる生成型ユーザーインターフェースシステムで、shadcn/uiとTailwind CSSに基づいて、コピペしやすいReactコードを生成できるサービスです。チャットでの対話形式でReactのコードを生成してくれて、プレビューまで確認できます。

# 使ってみた
今回はfreeプランで使用します。freeプランだと月に200クレジットという制限があり、初回の生成では30クレジット、追加の生成では10クレジット消費されます。

画面は以下のような感じです。
![スクリーンショット 2024-09-30 20.09.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/ec2e1482-5bf8-1bc6-3eda-2fb975566711.png)

`Generate a SaaS pricing calculator`というボタンがあったので押してみました。
ファイルが生成されて、以下のようなUIもプレビューできました。

![スクリーンショット 2024-09-30 20.25.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/167fe5e9-9476-79ec-c0bd-5cc522dc4d90.png)

実際にjs部分も動きます。

![スクリーンショット 2024-09-30 20.33.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/39332bf4-068c-2868-829e-f7439e60c710.png)

日本語でも動作します。実際に計算機を作ってと入力してみると、四則演算ができる計算機を作成してくれました。UIもちゃんと作ってくれています。

![スクリーンショット 2024-09-30 20.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/29d49fbb-67cc-591f-5293-95f18ddfdea2.png)

数字のボタンが見えにくかったので、お願いしてみると変更してくれて、変更箇所もチャット部分に表示してくれています。

![スクリーンショット 2024-09-30 20.40.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/98b0488d-18d4-106e-84ba-612c5737141e.png)

バージョンの管理もされています。
![スクリーンショット 2024-09-30 20.51.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/0cb04837-ad95-3190-5c15-6beee4cc6bc0.png)

右上のShareボタンからPublishを押すとURLが生成されて、UIを実際に確認することができます。

![スクリーンショット 2024-09-30 20.56.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/4b33045a-4c32-92ac-2c5f-9e5eb9285a21.png)


左のタスクバーからヒストリーも確認することができます。

![スクリーンショット 2024-09-30 20.53.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/5b6d2c6a-2ec7-6fcd-eda6-22e178ae6a88.png)

# まとめ
今回はv0をfreeプランで使用してみました。freeだとクレジットの関係でガッツリは使用できませんでしたが、UI部分やjs部分もしっかり作成してくれていて驚きました。コードを実際に見てみると、動き部分は結構力技でされていたりするので、そのまま使用することは難しいですが、パッと動くものが出てくるので、モックアプリやどんなUIにしよう。などの補助には重宝しそうだなと思いました。

以上、風速でした。

# 参考
https://v0.dev/chat
知らない（見たことない）メソッドをコードレビュー中に見たとき、どうしたらいいんだろう、、

# はじめに

きっかけは後輩のコードレビューをしているときです。後輩は私がその当時、知らないメソッドを使っていました（`flatMap` というやつ）（てか後輩私より優秀、、、）

具体的には以下のようなコードを後輩は書いていました。

```typescript
const roles: string[] = [
  ...groupMembership,
  ...realmRoles,
  ...clientRoles,
].flatMap((fullName) =>
  fullName.split("/").filter((name) => name.startsWith(rolePrefix))
);
```

```ts
const clientRoles: string[] 
= Object.values(loginInfo.resourceAccess ?? {}).flatMap((client: any) => client.roles ?? []);
```

この時自分は「やばい、自分のコーディング力がなさ過ぎて読めなさすぎる、、」
「ひとまず、こういった**自分が知らないメソッドは、自分の勉強不足として覚えて（調べて）いくのか、他のメジャーなメソッドで書きかえるよう指示するべきか**、どうしたらいいんだろう。。。」

なので、別部署にいる**つよつよエンジニアに上記の内容を質問してみました。**

# 回答

以下要約になりますが、回答です！

- **知らなくて当然、調べて当然**のスタンスでいった方がいい！
- そもそも頻繁に作成・更新され、使用言語も案件や時流で変わる業界で、全て把握している人なんていない
- **使い方次第でコードが自然な英語に近づいて可読性を高めるので、ガンガン使った方が良いと思います！！**

確かに回答の通りで、知らないことの方が多い業界なので、コードレビューしながら知らないことは自分も学習していくスタンスで行こうと思いました。

後は以下のような注意点や補足を教えてくれました。

## 注意点

- 脆弱性が指摘されていたり利便性の上がった代替メソッドが既にあり非推奨になっているメソッドは、代替手段に切り替える
- 新しすぎるメソッド(例えば ES2023 で追加されたもの)はトランスパイラが対応していない
- **そのメソッドを使うことで処理の説明になっていない場合は、別の手段を考える**

実際にさっきのコードで言うと、以下のような指摘をされていました。

つよつよ「`flatMap()` は配列に対して `flat()` と `map()` という別の処理を一度に行いますので、コードを読む人の脳みそのリソースを結構消費します。
以下の処理では `client.roles` の有無によるフィルタリングだけを目的としているので、`flatMap()` より、シンプルに `filter()` を使った方が理解しやすいです！」

**修正前**
```ts
const clientRoles: string[] 
= Object.values(loginInfo.resourceAccess ?? {}).flatMap((client: any) => client.roles ?? []);
```

**修正後**
```ts
const clientRoles: string[] = Object.values(loginInfo.resourceAccess ?? {})
  .filter((client: any) => client.roles)
  .map((client: any) => client.roles)
  .flat();
```

## 補足

- VSCode を使っていてなおかつ適切に型を定義していれば、マウスホバーでメソッドの説明が表示されるので、知らないメソッドをあえて避ける必要はない。
- javascript で比較的新しめの機能は[この辺](https://www.tohoho-web.com/js/what.htm)を見ると、キャッチアップ出来るとのこと。

# さいごに

つよつよエンジニアの助言・視点を基にこれからコードレビューしていきたいと思います。
また、ちゃんとわからないからってあきらめずに勉強していく姿勢は忘れないようにしたいですね。。
Script実行するSSM Documentをアカウント共有する際のTips

<!-- ================================================= -->
# SSM Documentと実行IAMロール
<!-- ================================================= -->
公式サイト：
[AWS Systems Manager Automation](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/systems-manager-automation.html)

**SSM Document**でScriptを実行するには**aws:executeScript**で**Python**なりの**Script**を記述すれば良いわけであるが、1つの注意点として「Documentのランブック属性にロールを割り当てる」ことが必須となる。

![01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3295992/ba5a7a28-ccc2-8d4c-343f-7f443e82bd95.jpeg)

ここにIAMロールを指定していない場合、**SSM Document**を実行したIAMエンティティが仮に**AdministratorAccess**権限を持っていたとしても「権限がない」エラーで実行できないが、指定はIAMロール名ではなくIAMロールのARNであるため、他アカウントへの共有と相性が悪いことになる。

結論を言えば、指定したIAMロールARNが所属するアカウントでしか権限を得ることができないため、アカウント共有しても他のアカウントで使用できないことになる。

2023年頃までは、ここにはIAMロールのARNを固定で入れるしかできなかったが、2023年11月17日のランブック強化の際にランブックの入力パラメータとして指定することが可能になり、実行用のIAMロールARNをランブックに埋め込まないようにすることが可能になった。

<!-- ================================================= -->
# 他アカウントへの共有
<!-- ================================================= -->
下の図のように他のアカウントへ**SSM Document**を共有する。

![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3295992/1b833203-1c36-cfb4-8b21-6d801a520237.jpeg)

共有される**SSM Document**は入力パラメータとしてIAMロールのARNを指定するようにする。

![03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3295992/1e9e304f-7aff-7483-4f6c-989b18e12e21.jpeg)
![04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3295992/5b2d28d8-2202-601d-0a46-e14a11baae93.jpeg)

共有するアカウントでは実行用のIAMロールを作成し、実行時に入力パラメータとしてIAMロールのARNを指定するようにする。

<!-- ================================================= -->
# よりセキュリティを高めるために
<!-- ================================================= -->
共有しているアカウント側を他人に操作させる場合(例えば、共有しているアカウント側を他社の人間に業務委託するような場合)、事故が起きないように仕組みを作っておくことが重要となるが、これまでの方式では入力パラメータとしてIAMロールを実行時に指定させる際、「IAMロールを取り違える」というリスクが発生する。

これを防止するには、共有しているアカウント側で新しい**SSM Document**を作成し(以後、これを呼び出し用Documentと称する)、**aws:executionAutomation**によって共有の**SSM Document**を呼び出す。

![05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3295992/b685965d-af84-c4a7-6447-61fa17fad39d.jpeg)
![06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3295992/ea5dc931-85d2-e18a-c578-d06ab970b207.jpeg)

呼び出し用Documentでは**aws:executionAutomation**のインプットとして**RuntimeParameters**を選択し、入力値として共有の**SSM Document**の入力パラメータである「実行用IAMロールのARN」を文字列として設定する。

![07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3295992/0af11fd4-88ad-e3ca-10b0-391886b4ad90.jpeg)

この呼び出し用Documentを実行することで、IAMロールを取り違えすることなく共有の**SSM Document**を安全に実行することができるようになるわけである。

<!-- ================================================= -->
## 履歴
<!-- ================================================= -->
- 2024/9/30 初稿
Secret Managerの編集を最小権限で行う

Google CloudのSecret Managerに新たなシークレットを作成、もしくはバージョンの作成を行いたい。ただし、シークレットが削除されたり、バージョンの中身を見られるのは防ぎたい。

`roles/secretmanager.admin`は、当然ながら強すぎる。
`roles/secretmanager.secretVersionAdder`は、バージョンの追加しかできない。API経由でバージョン追加のみを行うには、適している。Web UIから行うには、secretsのlist, getなどがないので不十分。加えて、シークレットの新規作成はできない。
では、カスタムロールを作って対応する。

## 最小権限を作る
Web UIで以下のみができるようにしたい。
- シークレットの作成
- バージョンの作成

つまり、以下のようなことはできない状態にする。
- シークレットの削除
- シークレットの権限付与
- バージョンの有効化
- バージョンの無効化
- バージョンの削除
- バージョンのアクセス

```terraform
resource "google_project_iam_custom_role" "secret_writer" {
  title       = "シークレット書き込み"
  description = "シークレットとバージョンの作成・更新を行うロール"
  role_id     = "secret_writer"

  permissions = [
    "secretmanager.locations.get",
    "secretmanager.locations.list",
    "secretmanager.secrets.create",
    "secretmanager.secrets.createTagBinding",
    "secretmanager.secrets.get",
    "secretmanager.secrets.getIamPolicy",
    "secretmanager.secrets.list",
    "secretmanager.secrets.listEffectiveTags",
    "secretmanager.secrets.listTagBindings",
    "secretmanager.secrets.update",
    "secretmanager.versions.add",
    "secretmanager.versions.get",
    "secretmanager.versions.list",
  ]
}
```
1年間Outsystems(O11)でReactiveWebアプリケーションを開発した感想

# 初めに
2024年9月でOutsystemsでの開発に参画して1年が経過しました。開発してきたのは主にReactiveWebによるWebアプリケーションです。
Outsystemsに触れる前まではPython、PHP、node.jsによるWebシステムのバックエンド側の設計・開発、Reactによるフロントエンド側の開発に携わってきました。フレームワーク等は用いてきましたがローコードツールによる開発はこれからが初めてです。
私は基本的にWebシステムのバックエンド側の設計・開発の経験が多く、フロントエンド側の知見は不足しております。

# Outsystems(O11)を使って感じたこと

## 画面の作成
- UIの作成は容易
基本的な部品（Widget）が十分そろっています。作りたいと思ったUIは容易に作成できました。基本的にパーツを画面にドラッグアンドドロップすれば必要な画面項目を配置できます。それに内部の変数をバインドすることで値の表、入力が簡単にできます。
これまでUIを1から作る経験が不足していた自分でも、それなりのUIが作成できているのではないかと思います。変数や関数などの基本的なことを押さえておけば、プログラム初心者でも簡単に画面を作成できそうだと感じました。

- サーバとのデータのやり取りについて
サーバからのデータの取得するにはいくつかの決まりとベストプラクティスがあり、それに沿わない形で実装してしまうとServiceStudioのWarningや後述のAIMenterStudioの指摘が発生します。この辺りは勉強と慣れが必要なところだと感じました。ただ、それぞれのベストプラクティスは納得のいくものが多いので、指摘に沿って実装することでおのずとユーザとサーバにやさしい画面ができると思います。

- 高度なデザインの適用は控えたほうがいいかもしれない
UIパーツのアップデートが年に何度か実施されるため、そのメンテナンスコストがある程度必要になってきます。廃止されるパーツがたまにあるので注意が必要です。
また、jsでDomの変更やcssでデザインのカスタマイズができますが、上記のメンテナンスコストを考えると標準のデザインで済むのであれば大幅なカスタマイズは加えないほうがいいのかと思います。
また、画面上のバリデーションも基本的なものはそろっており、画面の項目間のバリデーションを追加したり、カスタマイズすることができるため基本的に困ることはなさそうです。

- 権限のコントロールは容易
画面単位で「誰でも」・「ログイン済みユーザ」・「特定のロール持つユーザ」などのアクセスを制限できるため、権限のコントロールは容易です。ただし、データへのアクセスなど厳密な制限をかけるには、ServerActionでの権限の確認が必要になります。

## データの取得・更新
- Aggregateは強力で便利
AggregateはDatabaseから情報を取得するための仕組みです。SQLで詳細を指定することもできますが、とても簡単に取得条件や件数などを設定できます。パフォーマンスチューニングやキャッシュなども自動で制御してくれます。

- ServerActionでないとできないことがある
基本的にClientActionやScreenActionからはAggregate以外のデータの取得はできない。複雑な処理はServerActionとして実装する必要がある。その切り分けが分からず最初のうちは苦労した。

- 複数レコードの同時更新が複雑
SQLでは当たり前に実装できる特定条件のレコードの一括更新などは基本的な部品でサポートしていません。SQLを作成するかループで1件ずつレコードを更新する必要があります。

## ServerAction
- ループ、分岐など基本的な組み合わせが扱えればコーディングができる
- 例外・トランザクション・ログも扱える
実際にアプリケーションを運用するには、エラー処理やドラブルシューティングも必要になります。それに必要な例外処理、トランザクション処理、ロギングも簡単に扱えます。とはいえこれらも公式ドキュメントのベストプラクティスに合わせて要件にそって実装を落とし込む必要があります。この辺りはプログラミングが初めての人にも簡単に実装ができる部分ではないかもしれません。システム開発のイロハとして学習が必要なところかと思います。
- REST APIの実装が簡単にできる
- Timerによるバッチ処理が作れる
- Timerによりバージョンアップのためのマイグレーション処理が作れる

## デバッグ
ClientActionは容易にデバッグできました。ServerActionのデバッグが機能せず困っています。

## テスト
ServerActionやClientActionに関してはBDDFrameworkにて自動テストを作成することができます。ReactiveWebアプリケーションに関しては、ScreenやBlockに関してはCodeceptjsなどブラウザの自動化を使ったE2Eテストを導入することができそうです。

## インフラ
ある程度、一般的大きなシステムを組織的に開発運用していくにあたり開発環境、ステージング環境、本番環境と複数の環境を整備運用していく必要があります。LifeTimeというツールで管理が可能です。各環境へのデプロイやそのための権限の管理などができます。

## チーム開発
マージの機能はお世辞にも十分とは言えないかもしれません。ブランチ戦略を用いた複数人での開発と同じようにはいかないなと感じました。４、５名の少数でコンフリクトを意識しながらの開発が必要になりそうです。

## 品質分析と技術的負債について
AIMenterStudioというアプリケーションの品質分析を行い、ベストプラクティスを提示してくれるコード解析ツールがあります。

## 不満に感じたこと
最後に簡単に不満に感じた点を挙げてみます。

- Nullがない
- コンフリクトの解消が大変
- 日本語の資料が少ない
- 資格認定試験の料金が高い
- 導入金額の敷居が高そう

# 最後に
当たり前ですが、これさえ導入すれば簡単に大規模なシステムが開発できるというものではありません。コーディングの負荷自体は下がるかもしれませんが、システムのライフサイクルや運用を考えた設計を実装に落とし込んだりと通常のシステム開発におけるノウハウも確実に必要になってきます。
何を目的にローコード開発導入するかはしっかりと考える必要があるかと思います。
１エンジニアとしては苦手なUIが簡単に作成できるのはとても助かっています。
Learn holistic healing With wellness coach Amar Chandel

Elevate your health and wellness with the guidance of Amar Chandel, a trusted expert in holistic healing. This transformative learning experience will empower you with the knowledge and skills needed to enhance your overall well-being. So buy our book and make yourself a healthy human. Visit for more information: https://amarchandel.com/
![Learn holistic healing With wellness coach Amar Chandel.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3898548/f5f3c641-b7d9-6974-ab0a-07ddada96f0a.jpeg)
仕様変更後のお話

# はじめに
こんにちはプログラマー2年目の塚田と申します。
開発を進めていく中でトラブルはつきものです。
もともと決まっていた仕様通りにはいかず、その場で修正することもあるかと思います。ただ、後になって自分以外の人がそのコードを見た時に仕様通りの作りでなく困惑してしまうことが時折あると思います。
今回ではその対策について書いてみようと思います。

# 仕様変更後に詳細を記録すること
私のチームではRedmineで作成している機能の詳細が書かれたチケットを残しています。
仕様が変わればその度に既存の問題点と経緯、修正後の詳細を記載するようにしています。誰がいつ追記したかもRedmine側が残してくれるので修正後のテストも円滑に進めることができます。
また、テスト中に発覚したバグについても同じことが言えると思います。
どんなバグが発生し、その問題点や修正案、仕様確定後の詳細まで記述すると後になって質問をされてもしっかりとした受け答えができると思います。
「修正して終わり。」ではなく、今後の自分のためにも記録しておくことが重要だと考えます。


# おわりに
今回は「仕様変更後」のお話でした。
今後も自分が経験したこと、反省点や解決策などを発信していこうと思います。
以上、塚田でした。
サーバーを作り直したらVSCodeでリモート接続出来なくなった話

こんにちは、堀井です。

今回はAzureで作成したVMを作り直した後、VSCodeからリモート接続しようとしたらエラーになった原因と修正方法を備忘録として残しておこうと思います。

# 何が起きたのか？

昔に作成したCentOSのVMをAlmaLinuxOSで作り直したことが事の始まりです。
作り直し前までは普通にVSCodeから接続できていたのに、作り直してから接続できなくなってしまいました。

# 原因

原因は、VMを再作成する際に今まで使用していたパブリックIPアドレスをそのまま使ったことでした。
元々のVMに接続する際に対象のIPアドレスへの接続用に作成されたSHA256の情報がローカルのPCに残っており、それを使用しようとしてエラーになっていたようです。

# 対処内容

ローカルのPCに残っている設定を削除してあげることでエラーを回避し、接続した際に新たにSHA256の情報が設定されるようになります。

# 対処手順

1. 「C:\Users\○○○\.ssh」をエクスプローラーで開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/7df8e1e8-3cc2-df92-31f4-7c6ec5a7c1db.png)
2. 「known_hosts」ファイルのコピーを取っておく（何か起きた時用）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/5db6569d-2074-6e3d-48e0-9c5ec873cce2.png)
3. 「known_hosts」ファイルを編集し、対象のIPアドレスの行を削除する
4. VSCodeで再度接続を試す

以上の手順で接続できるようになりました。

# まとめ

今回は、備忘録としてVMの作り直しの際の問題と対処法をまとめてみました。

ちなみに、今回はWindowsのVSCodeから接続した際の手順を記述しましたが、Linuxからshhで接続する際も同じようにエラーになります。

その際は「/home/interoskw/.ssh/known_hosts」を同じように修正すると良いです。
同じような問題が起きた際に、この記事が役に立てばと思います。

以上、堀井でした。
Processing作品をWebブラウザで見せた～い

高井です。今回もProcessingで遊んでいきます。

# あらすじ
Processing普及活動に勤しむ高井は、
フラクタル図形を描き、OpenProcessingに投稿したのであった。

・これまでの記事
[フラクタル図形の描き方](https://qiita.com/pesysyon/items/579561b6576d5dc0c66f)
[OpenProcessingについて](https://qiita.com/pesysyon/items/a6f00d1e6d155eab7d67)

・投稿した作品

https://openprocessing.org/sketch/2333691/embed/

# 今回やること
前回OpenProcessingに投稿した作品は、
「ロードするたびにランダムなn角形のフラクタル図形が表示される」というものでした。

でもやっぱり
**自分で何角形にするのか、何回再帰するのか決めたい！**
**変な数字（小数とか）にして遊びたい！**
ですよね！

やっていきます！

# どうやるの？
Processingには、Webブラウザ上でProcessingを動かすための方法が2種類用意されています。

### processing.js
通常のProcessingで書いたソースコード(.pde)をそのまま使うならこちら。

用意するものは3つだけ。
・表示用HTML
・Processing作品(.pde)
・processing.js([ここ](https://github.com/processing-js/processing-js)からダウンロードまたはCDN)

用意したHTMLに以下のように定義するだけで、
Processing作品を読み込んで表示したり、HTML内に直接Processingのコードを記述したりできます。
``` html
<head>
  <script type="text/javascript" src="processing.js"></script>
</head>
```

簡単すぎる…！

### p5.js
ProcessingをJavascriptに移植したライブラリという感じです。
関数の宣言が`void setup(){...}`ではなく`function setup(){...}`だったり、
DOM操作に関する関数がふんだんに用意されていたりします。

こちらもp5.jsをインポートする一文をHTMLに書くだけで使えちゃいます。


今回はこちらを使っていきます。

# やってみた
というわけでOpenProcessingで制作開始です。

OpenProcessingの編集画面で右側タブの「HTML/CSS/JS」モードを選択すると、
**なんとHTML等のテンプレを出してくれます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/606fc6ae-d882-085b-2aea-7b2dfa1057c3.png)
スゲ～！

## index.html
HTMLには、
・各JSの読み込み
・図形や再帰回数を入力できるinput要素
・実行ボタン（図形を更新するボタン）
を用意します。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<!-- keep the line below for OpenProcessing compatibility -->
	<script src="https://openprocessing.org/openprocessing_sketch.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
	<script src="action.js"></script>
	<script src="fractal.js"></script>
</head>
<body>
	<input type="number" name="pointNum" size="2" /><span>角形を 再帰回数</span><input type="number" name="maxCount" size="2" /><span>回で描く</span>
	<button id="button">実行！</button>
	<p>※十角形以上は再帰回数3までを推奨。大きすぎると処理落ちします</p>
</body>
</html>
```

## action.js
実行ボタンを押したときのイベント処理です。
```javascript
var maxCount = 3; // 再帰回数
var pointNum; // n角形を描く

window.onload = function() {
 	document.getElementById("button").onclick = function(){
	maxCount = document.getElementsByName("maxCount")[0].value;
	pointNum = document.getElementsByName("pointNum")[0].value;
};
}
```

### fractal.js
フラクタル図形を描く処理が書いてあります。
前回の記事からほぼ変わっていませんので、ソースコードが見たい人はOpenProcessingから見てみてください。

# 完成したのがこちら！

https://openprocessing.org/sketch/2374389/embed

自由に数字を入れて遊んでみてください！
（再帰回数を大きくしすぎると処理に時間がかかってつまんなくなるのでやめておきましょう）

高井でした:art: