OmniAICreator/Qiita-1.07M huggingface dataset:
Spring bootでセッションのタイムアウト時刻を変更する

ログインして操作が行われなくなったら、セッションを無効化したいという要件があるときに使います。

# 環境
Spring Boot 3.3.0

# 変更方法
### application.properties（またはapplication.yaml）で設定する

```properties
server.servlet.session.timeout=3h
```

```yaml
server:
  servlet:
    session:
      timeout: 3h
```

指定の方法は上記の通りです、
数字＋単位「s(秒)」「m(分)」「h(時間)」で指定します。デフォルトは30分です。
Dockerの超基礎

# Dockerの基礎

●構造_イメージからコンテナを作成しそこでアプリケーションを実行する
　○イメージ
　　■実際に実行するコンテナを作るためのテンプレート
　　　<作成方法>
　　　└Dockerレジストリと呼ばれるライブラリのようなものから取得する方法
　　　└Dockerファイルを作成しイメージを作る方法
　　　※Dockerレジストリから取得したイメージをカスタマイズしてDockerファイルを作成してイメージを作る事が多い
　○コンテナ
　　■イメージを基に作成された実行環境のこと
　　■アプリケーションの実行に必要なすべてのもの（コード、ライブラリ、設定ファイルなど）を含んでいる

### Dockerの基礎コマンド
 <table>
    <thead>
        <tr>
            <th>項目</th>
            <th>操作</th>
            <th>コマンド</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>イメージ</td>
            <td>取得</td>
            <td>$ docker image pull</td>
        </tr>
        <tr>
            <td>イメージ</td>
            <td>ビルド</td>
            <td>$ docker image build</td>
        </tr>
        <tr>
            <td>コンテナ</td>
            <td>生成</td>
            <td>$ docker container create</td>
        </tr>
        <tr>
            <td>コンテナ</td>
            <td>起動</td>
            <td>$ docker container start</td>
        </tr>
        <tr>
            <td>コンテナ</td>
            <td>停止</td>
            <td>$ docker container stop</td>
        </tr>
        <tr>
            <td>コンテナ</td>
            <td>削除</td>
            <td>$ docker container rm</td>
        </tr>
    </tbody>
</table>

### Docker Composeについて
　●複数のコンテナを実行したい時に使う
　●PHPなどの言語やMySQLのデータベースなど複数の環境をコンテナを統合して使える
　●複数のコンテナを「docker-compose.yml」というファイルで定義できる

### Docker Composeの基礎コマンド
 <table>
    <thead>
        <tr>
            <th>操作</th>
            <th>コマンド</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ビルド</td>
            <td>$ docker-compose build</td>
        </tr>
        <tr>
            <td>生成, 起動</td>
            <td>$ docker-compose up</td>
        </tr>
        <tr>
            <td>停止</td>
            <td>$ docker-compose stop</td>
        </tr>
        <tr>
            <td>削除</td>
            <td>$ docker-compose rm</td>
        </tr>
    </tbody>
</table>


### Docker Composeでよく使われるコマンド
 <table>
    <thead>
        <tr>
            <th>項目</th>
            <th>コマンド</th>
            <th>用途</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>exec</td>
            <td>$ docker-compose exec</td>
            <td>起動中のコンテナでコマンドを実行</td>
        </tr>
        <tr>
            <td>ps</td>
            <td>$ docker-compose ps</td>
            <td>コンテナの一覧を表示</td>
        </tr>
        <tr>
            <td>logs</td>
            <td>$ docker-compose logs</td>
            <td>ログを表示</td>
        </tr>
        <tr>
            <td>system</td>
            <td>docker-compose system prune</td>
            <td>使用していないコンテナ, イメージなどの削除</td>
        </tr>
    </tbody>
</table>
AndroidでOpenCVを使って疑似カラー変換する

# 疑似カラー変換とは
モノクロの画像を画素の濃淡で色を当てはめてカラーにする変換する処理
カラーの画像をモノクロ画像に変換するなどして使うと写真の加工フィルターとしても使えます

イメージとしてはこちらのサイトのグレースケールと色の関係を示すカラーバーがわかりやすいかもしれません
http://home.u08.itscom.net/makoigkn/pseudo_color.html

# 実装
AndroidへのOpenCVの入れ方については省略
下記がコードになります。

```kotlin
// BitmapをMatに変換
val mat = Mat()
Utils.bitmapToMat(bitmap, mat) // 対象となるbitmapを入力

// グレースケールに変換
Imgproc.cvtColor(mat, mat, Imgproc.COLOR_BGR2GRAY)

// 疑似カラー変換
val colorMap = Mat()
Imgproc.applyColorMap(mat, colorMap, Imgproc.COLORMAP_JET)

// MatをBitmapに変換
val pseudoColorBitmap = Bitmap.createBitmap(colorMap.cols(), colorMap.rows(), Bitmap.Config.ARGB_8888)
Utils.matToBitmap(colorMap, pseudoColorBitmap)

// ImageViewに表示
val imageView: ImageView = findViewById(R.id.imageView)
imageView.setImageBitmap(pseudoColorBitmap)
```

疑似カラー変換のために、まずはグレースケールに変換
グレースケールとなった画像をImgproc.applyColorMapにて疑似カラー変換
第三引数には適用したいカラーマップを指定する、サンプルとしてCOLORMAP_JETを指定
<br>

Imgproc.applyColorMapには以下のふたつの関数があり

`public static void applyColorMap(Mat src, Mat dst, int colormap)`
`public static void applyColorMap(Mat src, Mat dst, Mat userColor)`

上はあらかじめ用意されたカラーマップを指定
下は自分で用意したカラーマップを使用することができる（Matで作成）
<br>
公式よりカラーマップタイプが確認できる（22種類ある）
https://docs.opencv.org/4.x/d3/d50/group__imgproc__colormap.html  
<br>

### サンプルとして何種類かのカラーマップタイプで変換した画像を掲載

- COLORMAP_JET
- ![COLORMAP_JET.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245797/0472f4dd-8f44-b38b-9340-3023cc8acad3.png)
<br>

- COLORMAP_SPRING 
![COLORMAP_SPRING.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245797/9f0c2d37-1429-c692-0687-ac652b95194c.png)
<br>

- COLORMAP_TWILIGHT 
![COLORMAP_TWILIGHT.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245797/cbcf940f-2a81-90a5-321d-b4f1c98865b6.png)
<br>

- COLORMAP_DEEPGREEN 
![COLORMAP_DEEPGREEN.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245797/c3b3b24e-efba-380c-0477-81e65eec1eca.png)

# 終わり
OpenCVを用いることで簡単に画像処理をすることができる
カメラから入力した画像をそのまま変換などしても面白いかもしれない
Raspberry Pi piユーザ削除方法

ラズパイで最低限のセキュリティ確保においてpiユーザ確保は必須であると考える。

### 事前に
1. piユーザを削除する前に事前に新規ユーザを作成し、piユーザと同じ権限を渡しておくというような処理を行っておく。
2. piユーザ内のファイルを、新規ユーザにコピー
3. piユーザのオートログインを無効化する。

```:オートログイン無効化
$ sudo nano /etc/lightdm/lightdm.conf`
-------------------------------------------
autologin-user=pi
↓
#autologi-user=pi
```

<br>

### 再起動後
新規ユーザでログインし、
ユーザの削除方法としては以下のコマンドを入力する。

```:ユーザ削除コマンド
$ sudo userdel -r pi
```



しかし、下記のようにエラー文を出し、piユーザを削除することができない。

```:
Looking for files to backup/remove ...
Removing user `pi' ...
Warning: group `pi' has no more members.
userdel: user pi is currently used by process 440
```

プロセス確認を行ったところ、現在のユーザのプロセスだけでなく、piユーザのプロセスも稼働している。

### 理由として、
オートログインを無効化する設定を行ったつもりができていない？

### ゴリ押しで削除
etcディレクトリ下のpasswdとgroupのpiと名の付くものを削除することでpiユーザを削除する。
```:ユーザ削除
$ sudo nano /etc/passwd
$ sudo nano /etc/group
```

### 結果的には
piユーザは削除できたが、あまりよくない方法なのだろう。
【GoogleAppScript】GCPなしでAPI構築&デプロイ

# GASを使おうとしている人へ
クライアント用にwebアプリのデモシステムを、GoogleAppScript + Googleスプレッドシートを使って実装していました。先に言っておくと、ちゃんとしたwebアプリを作るならFastAPIやNodejsのexpress、honoなど得意な言語でvscodeをしばいて作った方がいいです。

理由は主にこうです。
* REST APIの構築がめんどい
* エラーハンドリング未対応
* ログが出力されない
* `post`時のjson通信がまじでやばい


# Google App Scriptの立ち上げ
今回はSpread SheetをデータベースとしてAPIを組んでみます。
テキトーに無題のスプレッドシートをつくり、拡張機能からリンクできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092163/4d9ed15d-df86-bebc-1e44-20a52ed04324.png)

「概要」をみたときに、コンテナにリンクしたスプシが表示されていればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092163/be8bbd78-f9cc-0273-5f51-3dc97d7e6d1d.png)

# APIを書いていく
### Getメソッド
`doGet()`とすることで、`get`メソッドにあたる処理をかけます。
```javascript:コード.gs
function doGet() {
    return ContentService.createTextOutput("get is ok")
};
```
`return ContentService`で基本リクエストボディを返すのですが、何をミスったか`text`で返すことが前提となっており、`json`を返したい場合は以下のようにする必要があります。
```javascript:コード.gs
function doGet() {
    let response = JSON.stringify({
    text: "get is ok"
    });
    return ContentService.createTextOutput(response).setMimeType(ContentService.MimeType.JSON)
};
```

## Postメソッド
`doPost()`とすることで、`post`メソッドにあたる処理をかけます。
```javascript:コード.gs
function doPost(request) {
    return ContentService.createTextOutput("post is ok")
};
```
`json`リクエストを受け取る場合、引数の`request`に対し、以下のようにします。これで通常通りjsonとしてプロパティを参照できます。
```javascript:コード.gs
function doPost(request) {
    let request_body = JSON.parse(request.postData.getDataAsString());
    let response = JSON.stringify({
    text: request_body.text
    });
    return ContentService.createTextOutput(response).setMimeType(ContentService.MimeType.JSON)
};
```


# デプロイ & `fetch`
以下のようにしてデプロイしましょう。
![SS 2024-06-12 20.45.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092163/c002066c-4fb9-ba9c-a7e0-4fa7f8741565.png)


URLが公開されるので、`post`メソッドに`fetch`してみます。
```javascript:fetch.js
fetch("https://script.google.com/macros/s/[デプロイID]/exec",
    {
        method: "POST",
        body: JSON.stringify({text: "post is ok"})
    }
).then(
    (response) => response.json()
).then(
    (data) => {
        console.log(data);
    }
);
```
ここで、`Content-Type: "application/www-form-urlencoded"`とかいうheaderをつけないと、受け取れなかったり。CORSのエラーが発生した場合は、`mode: no-cors`をつけると解決したりします。
ご自身の環境で試してみてください。
【論文メモ】Multi-Scale Distillation from Multiple Graph Neural Networks


https://ojs.aaai.org/index.php/AAAI/article/view/20354

# この論文を読んだ理由
GNN-to-MLPの知識蒸留(KD)手法をサーベイしている際に見つけた論文．
GNN-to-MLPではなく，GNN-to-GNNの手法ではあるが，考えていたアイデアに近い内容だったから読んだ．

# 解いている課題
- タスク：ノード分類

- GNNの層が異なれば，得意とするノード次数が異なるという性質があるが，これまでの知識蒸留手法は1つのGNNしか教師にしていない．
  $\rightarrow$**層が異なる複数の教師GNNを用意して知識蒸留を行えば，多様なトポロジー情報を捉えた生徒GNNが出来るのでは？**
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3583007/7ba331e6-aa72-49cf-41d8-39c689982b2e.png)

# 提案手法のアプローチ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3583007/bc09027b-fd11-3bd0-a930-87e40aa6e93f.png)

- **生徒GNNの中間表現を複数の教師GNNの中間表現に近づける．ここでは，ノードペア間の距離を似せる．**<br>
  ```math
  LS_i^{t_l} = \text{softmax} \left( \exp \left( -\frac{1}{2} \left\| h_i - h_j^{t_l} \right\|^2 \right) \right)
  ```
  ```math
  \text{Dist}(LS^s, LS^t) = \mathcal{L}_{\text{KL}} (LS^s, LS^t) 
  ```
  ただし，LSはLocal Structureで，sとtはStudentとTeacherを表す．<br>
  $\rightarrow$KLダイバージェンスで分布間の距離を計算する．
<br>

- **attentionを導入して，教師GNNごとに重要度を決定する．**<br>
  ```math
  \alpha_l = \frac{\text{MLP}(F^s)^\top \text{MLP}(F^{t_l})}{\sum_{l=1}^{L} \text{MLP}(F^s)^\top \text{MLP}(F^{t_l})}, \quad l = 1, 2, \ldots, L\\
  ```
  ただし，Fは最終層の出力を表す．
  $\rightarrow$sとtの出力が似ていたら，その教師GNNは重要である．（実装ではMLPを使用せずにそのままFを使用していた．）
  <br>
  ```math
  \mathcal{L}_{MSKD} = \sum_{l=1}^L \alpha_l \text{Dist}(LS^s, LS^{t_l}) = \frac{1}{N} \sum_{l=1}^L \sum_{i=1}^N \sum_{j:(j,i) \in \mathcal{E}} \alpha_l LS_{ij}^s \log \left( \frac{LS_{ij}^s}{LS_{ij}^{t_l}} \right)
  ```
  ただし，$\mathcal{E}$はエッジ集合を表す．
  $\rightarrow$attentionを使用したKLダイバージェンスロスの重み付き和
<br>

- 全体のロス関数
  ```math
  \mathcal{L} = \mathcal{L}_{KD} + \lambda \mathcal{L}_{MSKD}
  ```
  $\rightarrow$既存の知識蒸留ロスに新たなたMSKDロスを追加．$\lambda$で調整可能．
<br>

- 実験結果：既存のGNN-to-GNNの知識蒸留手法を上回った


# 次に読む論文
- FF-G2M (Extracting Low-/High- Frequency Knowledge from Graph Neural Networks and Injecting it into MLPs: An Effective GNN-to-MLP Distillation Framework)
  →ノードペア間の距離を似せる，という考えがこの論文でも使用されている．
【Python】辞書内包表記

辞書内包表記(dict comprehension)は、既存の辞書やイテラブルオブジェクトから新しい辞書を作成する際に便利な記法です。リスト内包表記に似ていますが、辞書の場合はキーと値のペアを指定する必要があります。
# 基本的な構文
```python
new_dict = {key_expr: value_expr for var in iterable}
```
- key_expr: 新しい辞書のキーを生成する式
- value_expr: 新しい辞書の値を生成する式
- var: イテラブルオブジェクトからキーと値を生成するための変数
- iterable: キーと値の元となるイテラブルオブジェクト(リスト、タプル、range()など)
## シンプルな例
```python
squares = {x: x**2 for x in range(1, 6)}
print(squares) # 出力: {1: 1, 2: 4, 3: 9, 4: 16, 5: 25}
```
上記の例では、1から5までの整数をキーとし、そのキーの2乗の値が辞書のValueとして設定されています。
# 条件付きの辞書内包表記
```python
even_squares = {x: x**2 for x in range(1, 11) if x % 2 == 0}
print(even_squares) # 出力: {2: 4, 4: 16, 6: 36, 8: 64, 10: 100}
```
ifを使うことで、辞書に含める要素を条件付きで指定できます。
# 2つのイテラブルから辞書を作成
```python
names = ['Alice', 'Bob', 'Charlie']
scores = [90, 85, 92]

# zip()関数を使って2つのイテラブルから辞書を作成
records = {name: score for name, score in zip(names, scores)}
print(records) # 出力: {'Alice': 90, 'Bob': 85, 'Charlie': 92}
```
zip()関数を使えば、2つのイテラブルから辞書を簡単に作成できます。
辞書内包表記を活用することで、コードをコンパクトに記述でき、可読性も向上します。ただし、複雑な式になると可読性が低下する可能性があるので、適切に利用する必要があります。
######
参考)　[東京工業大学情報理工学院 Python早見表](https://chokkan.github.io/python/index.html)
【Python】辞書型

辞書型は、キーと値のペアを含む組み込みのデータ型です。辞書はキーによってユニークに値にアクセスできるため、連想配列や、ハッシュとも呼ばれます。
# 辞書の作成
```python
# 空の辞書
empty_dict = {}

# 値を含む辞書
person = {'name': 'Alice', 'age': 25, 'city': 'Tokyo'}
```
キーは整数やストリングなどのイミュータブル(変更不可能)なオブジェクトを使用します。値には任意のオブジェクトを設定できます。
# 要素へのアクセスと変更
```python
person = {'name': 'Alice', 'age': 25}

# 値へのアクセス
print(person['name'])  # 出力: Alice

# 値の変更
person['age'] = 26

# 新しいキーと値の追加
person['city'] = 'Tokyo'
```
# 辞書のメソッド
```python
person = {'name': 'Alice', 'age': 25}

# キーの存在確認
print('name' in person)  # 出力: True

# 値の取得(キーが存在しない場合はデフォルト値)
print(person.get('city', 'Unknown'))  # 出力: Unknown

# キーと値のペアを追加(update)
person.update({'city': 'Tokyo', 'job': 'Engineer'})

# キーと値のペアをリストで取得
print(person.items())  # 出力: dict_items([('name', 'Alice'), ('age', 25), ('city', 'Tokyo'), ('job', 'Engineer')])

# キーのみをリストで取得 
print(person.keys())  # 出力: dict_keys(['name', 'age', 'city', 'job'])

# 値のみをリストで取得
print(person.values())  # 出力: dict_values(['Alice', 25, 'Tokyo', 'Engineer'])
```
# 辞書の反復処理
```python
person = {'name': 'Alice', 'age': 25, 'city': 'Tokyo'}

# キーを反復
for key in person:
    print(key, person[key])

# キーと値のペアを反復
for key, value in person.items():
    print(key, value)
```
```console
name Alice
age 25
city Tokyo

name Alice
age 25
city Tokyo
```
辞書型は、キーと値の関連付けが容易にでき、検索や更新が高速に行えるので、データの格納や管理に適しています。ただし、順序は保証されないことに注意が必要です。辞書内包表記を使えば、より簡潔に辞書を作成できます。
######
参考)　[東京工業大学情報理工学院 Python早見表](https://chokkan.github.io/python/index.html)

https://qiita.com/Akuuuun/items/b6a39450867a0c34c84e
【OutSystems】資格試験対策にUdemyを使用してみた

# はじめに
OutSystems資格試験を何回か受験してみましたが、
基本情報やAWS等と比較すると試験対策テキスト的な教材がないので、問題形式での対策がしづらく、
実際に問題形式で対策できるのがオンラインコースのクイズや試験詳細のサンプル試験ぐらいしかないので、
やりづらさを感じていたところでした。もしかしたら他に感じていた人もいるかもしれません。
そこで先日Mobile Developer Specialist (OutSystems 11 and ODC)を受験する際の対策で
[Udemy](https://www.udemy.com/ja/)というe-learningを使用しましたので、ご紹介させていただきます。
# Udemyの特徴(2025/5/23更新)
* コースが豊富（220000以上）
* カテゴリが豊富（開発、IT・ソフトウェア、ビジネススキル等）
* クロスデバイス対応
* 基本的には1コースずつ課金していく
* セールが多い、かつ割引率が高い（今回使用したコースは通常3600円を1300円で購入）
* 30日間返金保証あり
→一定の使用量を超えると30日以内でも返金できない場合がある
* アプリよりWebで購入する方が安い場合がある
# OutSystems資格試験対策コース状況(2025/5/23更新)
現状日本語版はない。英語版の一覧は[こちら](https://www.udemy.com/courses/search/?lang=en&p=1&q=OutSystems&sort=relevance&src=ukw)
2025/3に資格体系が変更されたのもあって英語版も含めて、コースがない資格や
新体系はないが旧体系のコースがある資格がある
### コースがない資格
* Web Developer Specialist (ODC)
* DevOps (O11)
* Professional Traditional Web Developer (O11)
* Expert Traditional Web Developer (O11)
### 新体系はないが旧体系のコースがある資格
* Platform Ops (O11)
# 今回使用したコース(2025/4/9更新)
* コースは[こちら](https://www.udemy.com/course/outsystems/)
→現状利用できない
* 内容はドキュメントがなく、演習テストを解くのみ
* 演習テストは制限時間が付いており、中断・再開が可能
* 問題の解説はない
* 繰り返し解答することができ、過去の正解・不正解を振り返ることができる
* 1週毎に出題順や選択肢がシャッフルされる
* 問題の質自体は、対策するのに適している印象を受けた
* 外国人が作成したのもあり、日本語表現がイマイチの箇所があった
# まとめ
まだ使用したのは1コースのみですが、試験対策に役立ったので、
今後もUdemyを活用するのもいいかなと思っています。
【Python】 参照渡しは存在しない

Pythonの参照渡しについて調べていると以下のような内容の記事が見つかったりします。
## 間違っている記事の内容

> Q：Pythonで関数に渡した引数を関数内で変更すると関数を抜けたとき渡した変数の値が変わっていたり変わっていなかったりするがどういうこと？
> A：引数がイミュータブルなオブジェクトかミュータブルなオブジェクトかで動作が変わる。
    * イミュータブル：値はそのまま
    * ミュータブル：値が変更される
つまり、イミュータブルなら値渡しでミュータブルなら参照渡しということですね。
値渡しと参照渡しについては以下を参照。
https://wa3.i-3-i.info/diff345programming.html

## 実際は？
@shiracamus (しらかみゅ) さんにコメントいただいた通りです。
Pythonは参照渡し出来ない言語であり、すべて値渡しです。

https://docs.python.org/ja/3/faq/programming.html#how-do-i-write-a-function-with-output-parameters-call-by-reference

上記FAQにある
> [出力引数のある関数 (参照渡し) はどのように書きますか？](https://docs.python.org/ja/3/faq/programming.html#how-do-i-write-a-function-with-output-parameters-call-by-reference)
前提として、Python では引数は代入によって渡されます。代入はオブジェクトへの参照を作るだけなので、呼び出し元と呼び出し先にある引数名の間にエイリアスはありませんし、参照渡しそれ自体はありません。

ということですね。


## なぜ参照渡しが存在すると勘違いするのか？
過去の私のような過ちが発生するのはなぜでしょう？

先ほどのFAQにて続きで
> 望む効果を得るためには幾つかの方法があります。

とあり、その方法4にて
```python
def func3(args):
    args['a'] = 'new-value'     # args is a mutable dictionary
    args['b'] = args['b'] + 1   # change it in-place

args = {'a': 'old-value', 'b': 99}
func3(args)
# {'a': 'new-value', 'b': 100}
```
と記載があります。
値渡しされる参照が参照しているオブジェクト自体を変更することで参照渡しもどきのような動作を起こしています。

ですが、実際は以下のように変数そのものに代入すれば元のオブジェクトには影響を与えず参照渡しではないことが確認できます。
```python
def modify_list(lst):
    lst = lst + [3]  # 3を追加したリストを変数に代入

my_list = [1, 2]
modify_list(my_list)
print(my_list)  # [1, 2] と出力され、元のオブジェクトに影響していない
```
実際は「参照の<font color=red>**値渡し**</font>」が行われているわけですね。

方法4のような挙動を勘違いした過去の私のようなアホが冒頭に記載したような誤った内容を拡散してしまう要因だと思いました。

## まとめ
Pythonに参照渡しは存在しない。すべて値渡しである。

改めてコメントいただきました@shiracamus (しらかみゅ) さんに感謝申し上げます。
これからも日々精進していきます。
【新入社員必見】PowerShellからアプリを立ち上げて、作業効率アップ！

# 概要
現在のPCは、マイクロソフトのWindowOSやアップルのMacOSのようにGUIのOSが中心であるため、脱マウスをしている方は多くないと思います。
ですが、以前記載した下記の記事もそうですが、脱マウス（CLI）することで、慣れてくれば飛躍的に作業スピードが上りますので、もう少し脱マウスにお付き合い頂ければと思います。

https://qiita.com/kyuu2197/items/b641cf17bcec0d30646d

ということで、今回はPowerShell（コマンドプロンプトの後継アプリ）からアプリを呼び出していきたいと思います。
PowerShellやコマンドプロンプトはGUIベースで作られったWindowOSを、CLI（コマンドラインインターフェース）として扱うためになくてはならないアプリになります。
詳しい使い方は後程色々記載していきたいと思いますが、今回の記事ではあくまでPowerShellからアプリを呼び出す所に注力したいと思います。

# 前提
PowerShellはCLIベースのオペレーションとなる為、コマンドを覚えていないと使うことが出来ません。（そこが一般の人が敬遠する所以の大きな理由ですが。。。）

ということで、アプリの実行には必要不可欠な以下の必要最低限のコマンドをまとめておきたいと思います。
<table>
<tr><th>コマンド</th><th>開くアプリ</th></tr>
<tr><td>pwd</td><td>現在のパスを表示</td></tr>
<tr><td>cd</td><td>フォルダ移動</td></tr>
<tr><td>ls / dir</td><td>フォルダの中身を表示</td></tr>
</table>

この辺りのコマンドを使えば、CLI上でもフォルダ（ディレクトリ）の移動やフォルダ内の一覧の表示が出来ます。

# As Is（現状・・・）
ということで、まずはGUIで表示をしてみましょう。
```
Ctrl + E
```
を押して、エクスプローラを表示します。
マシンにもよるかもしれませんが、これだけで２・３秒かかるマシンもあるかと思います。
そこからお目当てのファイルまでフォルダを移動します。

そして、やっとファイルをダブルクリックして、ファイルを開く。。。


# To Be（これから・・・）
では、CLIではどうでしょうか？
```
Ctrl + R
```
で、『ファイル名を指定して実行』を開き、
```
powershell
```
と入力。
そして、目的のファイルのディレクトリが分かっていれば

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618971/c4f7ec96-ee39-2c15-0773-09b37020ea9d.png)

のように『cd』コマンドを使用して、ディレクトリを直接してして、
「ls」コマンドでディレクトリ内部を確認し、ファイルをコピー。
以下のようにファイルを直接貼り付け。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618971/b42e05c8-865a-dc73-1504-0cfe0c4b8c3b.png)

ただし、一度ディレクトリを移動して、ファイル名を直接入力する場合は
```
.\[ファイル名]
```
とする必要があるので注意が必要です。
勿論ファイルまでの絶対パスをそのまま入力することも出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618971/6a9a81f2-ae89-17cd-1180-ca47995c57bf.png)

慣れてくると本当に便利ですので、実直にやってみてくださいな！！


## 最後に
最後になりますが、この記事が皆さんの成長の少しでも手助けになることを祈って、この記事を閉めたいと思います。
最後までお読みいただきありがとうございました。
LLMを利用したシステム開発を失敗させないため心構え 運用とか評価とか

俺はもうプロジェクトが失敗するのを見ていられないんだ...!!!


# 心構えリスト

### LLMを信用してはいけない
LLMがどんな文字を出すかは神のみぞ知る。
機械学習モデルは学習データでトレーニングしなければ意味のない出力をするだけの存在で、長時間じっくりと学習を繰り返すことで「なんかしらんけどいい感じに」意味ありげな出力をする関数である。
クリティカルな部分の自動化に使ってはいけない。欠損値を許容できるシステムであるべき。

### 基礎設計をおろそかにしてはいけない
LLMは確かに多様なタスクを解くことができる。
それが原因なのか（？）、LLMの関係ないロジックがおろそかにされがちである。
ビジネスロジックは必ずメンバー全員で理解するべき。

### LLMの入出力は明確にするべき
アーキテクチャ図にOpenAIのロゴを載せただけで設計した気になるな。
その中でどのような処理をさせるのかは明確にするべき。
- LLMを使う理由は？
- 何をさせるか？
この二つに焦点を合わせて入出力とそれに伴うシステムを設計する必要がある。


### 安易にチャットUIを作ってはいけない
LLMは人語を真似る従順な猛獣なので、ユーザーの指示を聞いたらその通りに返答します...
「自由度が高くていいね！」...?
これに伴うデメリットが多すぎる
- ユーザーが何を入力するべきか迷う
- 出力が特定できないので、何かに特化した処理が困難
- Function Callingをしようにも、利用者が関数の存在を理解していないと適切に呼び出されない
- 実装が単純に難しい。メッセージとスレッドを保持するのが大変
チャットUIである必要があるなら、まずGPTsとしての開発を検討する。

https://zenn.dev/naoya_tech/articles/ef5e5d0f876b1f

https://note.mntsq.co.jp/n/n0f3b8d327a54


### テストケースと性能指標を設定する
LLMの出力は不安定なので、テストケースは多ければ多いほど良い。
可能であれば同じ入力でも複数行うべきである。GPUの仕組み上、どれだけtemperatureを下げても同じ結果にはならない。
テストケースは開発メンバーにとってもスコープと要件を理解する重要なデータになる。
導入後のモニタリングでも必要なので、必ず適切なものを設定すること。


### テスト計画を作る
かんたんに言えばPDCA。
回せるだけ回す。

http://www2.toyo.ac.jp/~fujimatsu/kikai2/EXP_report.pdf

```
１．目的
２．理論
３．実験方法
４．実験結果
５．考察
```
1. Plan
    -  目的
    -  仮説設定
    -  実験方法
1. Do
    - 実施
1. Check
    - 結果
1. Act
    - 考察

### 意思決定は数字で行う
データの扱いはLLMがどれだけ進化しても変わらない。
MLモデルに誤差は必ずあるのでざっくり単語だけでも覚える。

よく使う評価指標
- MSE, RMSE
    - 数値出力で使う
- Recall, Precision
    - カテゴリ出力で使う
- IoU
    - 抽出タスクで使う

レポートでよく使う数字
- 相関係数
- p値
ブラウザでお手軽Raspberry Pi PICO プログラミング

Raspberry Pi PICO をブラウザでお手軽にプログラミングしようといろいろ試しました
BIPES(https://bipes.net.br/ide/) という環境を利用するとインストール不要でGoogleChromeさえ動けば、Windows, Nac, Chromebook, Linux とOSを選ばずに利用可能です。
![Screenshot 2024-06-12 8.34.45 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199447/cae88e89-55a5-9636-056e-cc9753758af5.png)

１．準備
　Raspberry Pi PICO は、MicroPython か CircuitPython のどちらかの環境で利用することが、一般的です。
　今回紹介する BIPES(https://bipes.net.br/ide/) では、MicroPython を使用します。そのため事前にMicroPython のインストールをします。
MicroPython 環境のダウンロード
MicroPython.org https://micropython.org/ から最新のものをダウンロードします。
![Screenshot 2024-06-12 8.42.50 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199447/5154355a-16f9-6363-d894-1b016c08a353.png)
Download から Raspberry Pi PICO を探して
![Screenshot 2024-06-12 8.44.33 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199447/c3702e65-328e-013f-0156-aa4ac23c0929.png)
最新の Firmeware をダウンロードする。
![Screenshot 2024-06-12 8.50.22 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199447/f93d5d47-364f-8172-d5a6-e3aa773b656d.png)
Excel VBA 最終行取得方法

Excel VBA で最終行を取る時の書き方いろいろ【1】 自分メモ

### 1つめ End(xlUp)

Cells(Rows.Count, 指定列インデックス).End(xlUp).Row
Range("列"& Rows.Count).End(xlUp).Row
ピンポイントで列を指定できて、途中に空白セルがあっても問題がない
実務ではほぼこれを使っている

例) C列の最終行を取得する

```vb
Dim LastRow as Long
LastRow = Cells(Rows.Count,3).End(xlUp).Row
LastRow = Range("C" & Rows.Count).End(xlUp).Row
```
### 2つめ SpecialCells

Range("セル番地").SpecialCells(xlCellTypeLastCell).Row
この書き方も途中に空白セルがあっても問題ない
ただし、例えばA列からB列まで値が入っていると、B列の最終行をとる
ピンポイントで列を指定して最終行を取りたいときには不向き

例) 
```
Dim LastRow as Long
LastRow = Range("A1").SpecialCells(xlCellTypeLastCell).Row
```
「３点リーダーを使うことは説明放棄で敗北だ」と考えてSlackを使って半年が経ちました

**最初に注意ですが、この記事では全ての３点リーダーを否定するものではなく、チャットツールにおける３点リーダーの個人的な考えを記載しています。**

今回は普段の仕事の中で使っているSlackでコメントを書く際に意識していることをまとめました。
タイトルの通り「３点リーダーを使わないこと」を意識することを利点について書いていきます。

# 3点リーダーとは
下記のリンクから引用します。3点リーダーとは以下のようなものです。

「3点リーダーとは、約物とよばれる特殊記号の一種で、点を3つ横に並べた形をした記号のことである。
和文では全角一文字で「…」と表示される。 欧文ではピリオドを3つ並べて「...」と表示される。 」
「文章中で沈黙の状態や文の省略を表したり、文末で余韻を残したりするために用いられる。 また、箇条書きで項目名と内容をつなげる点線として用いられる。」

https://japan.zdnet.com/glossary/exp/3%E7%82%B9%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC/?s=4#:~:text=3%E7%82%B9%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%81%A8%E3%81%AF&text=3%E7%82%B9%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC%E3%81%A8%E3%81%AF%E3%80%81%E7%B4%84%E7%89%A9%E3%81%A8%E3%82%88%E3%81%B0%E3%82%8C%E3%82%8B,.%E3%80%8D%E3%81%A8%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%80%82

# 今回の記事の３点リーダーとは
今回の記事で取り扱うのは「文章中で沈黙の状態や文の省略を表したり、文末で余韻を残す」ために使用する使うことを目的として使用される3点リーダーとします。

# チャットツールにおける敗北とは何か
リモートワークの拡大でSlackなどのチャットツールでのテキストコミュニケーションが拡大していると思います。特にツールの機能拡大でエンジニア以外の非エンジニア部門での利用も拡大していると思います。
チャットツールの利点は非同期コミュニーケーションによって、受取手側が受信タイミングを選べることになったことやテキストに残るので後から見返したり検索ができることで振り返ることができることだと思います。
特に大人数で作業をする開発や小さな確認などのツールとしてなくてはならないものになっていると思います。
そういったコミュニケーションツールにおける敗北とは何かと考えると、文字通りコミュニケーションがうまくできずに誤解や認識齟齬が生まれることだと考えています。


:::note warn
チャットツールにおける敗北＝誤解や認識齟齬を生むコメントを使う
:::

# 3点リーダーを使う起こる問題
上記のコミュニケーションの敗北を生み出す要因として、3点リーダーを使用することが要因の一つだと考えています。
3点リーダーは文章の省略や文末の余韻を残すために使用されるので、物事の解釈を受け手側に委ねるというものになります。

文章を考える時どのような場合に使うか考えたり、実際にSlackのコメントで３点リーダーを使用している場面を見てみると以下のような場合があるかと思います。

```
「なぜか思っていたことと違っている…(誰か知っている人はいるかな)」
「こうした方がいいと思うが…(違う方法をしている理由を知りたい)」
```

書いている時の心情を考えると書いた本人は次に誰かにしてほしいことを考えていたり手詰まりで誰かの助けが必要だと思っていることが多いと思いました。
ただ時間を空けて３点リーダーを使っている自分のコメントを見てみると、書いた後に次の行動に移っていいなかったり、放置して忘れていたり有耶無耶になっていることが多いと去年の年末に見ていて思いました。

# 2024年に入って３点リーダーを使わないようにするために何をしたか
コメントを書いた後に行動へ繋がっていなかったり、有耶無耶になっていることをなくすために何をすれば良いかを考えたときに「３点リーダーを使わない」というのを決めました。

この時にそれでも何かと理由をつけて使いそうになることはありそうだと思い以下のルールを自分に課しました。

:::note info
[ルール]
・3点リーダーを打っても消して、考えている意図に書き換えてコメントしたらまだ負けていない
・３点リーダーを使ってコメントしたら説明をする努力を怠ったと判断し1敗としてカウント
・使わない期間が続いている間は勝利
:::

結果は以下のとおりでした。

|  | 敗北数 | 
|:-----------|------------:|
| 1月|3 |
| 2月|3 |
| 3月|2 |
| 4月|1 |
| 5月|0 |
| 6月|0 |


# まとめ
３点リーダーの全てが悪いとは思いません。「一位は…」など期待感を持たせたり興味を引く表現では有効な表現だと思っています。
ただ仕事の上で何かを伝える際の最優先事項は正しく早く伝える事なので、曖昧な表現をなくす表現を意識的に無くしていくことを意識していくことができたのは良かったと思いました。
するしないより勝ち負けと思うことで使ったら自分にとってマイナスになると感じるので、使わないことを習慣化が早く行えたのも良かったです。
初心者から見たVue3コンポーネントの実装のしやすさについて Vision.2

# Vue3コンポーネントの実装のしやすさについて Vision.2

Vue3のコンポーネントの実装について、前回はVue3コンポーネントの概略から、
単一ファイルコンポーネントと子コンポーネントについて、
シンプルな実装を体験しました。

前回：親コンポーネントと子コンポーネントについて

https://qiita.com/babel_0101/items/deaf4d50c25a33bcec85

今回は、propsの受け渡しとイベントの購読を以下にまとめます。
## Vue3のコンポーネントの基礎2

公式ページ：[コンポーネントの基礎](https://ja.vuejs.org/guide/essentials/component-basics#passing-props)を読み進めながら、以下のように解釈。

1. **propsの受け渡し(Passing Props):** コンポーネントに登録できるカスタム属性。<br>`defineProps`マクロを`script setup`内で使用することで、
あるコンポーネントから、別のコンポーネントに任意のパラメータを
渡すことができます。<br>
「コンポーネントの基礎」ページ内では、コンポーネントの初期化時に
必要なパラメータを渡すことができる機能と見られますが、**propsの完全ガイド**
という別ページが存在していますので、本記事でも別途、追いたいと思います。<br><br>

2. **イベントの購読(Listening to Events):** コンポーネントに登録できるカスタムイベント。
propsがコンポーネントのパラメータとして定義できたことと同様
コンポーネントのイベント（振る舞い）も定義することができます。<br>
「コンポーネントの基礎」ページ内では、親コンポーネントで定義したイベントを
子コンポーネントから実行できるような例を記載しています。<br>`defineEmits`マクロを`script setup`内で使用することで親コンポーネントの<br>任意のイベントを、子コンポーネント側で実行させられます。<br>こちらも**カスタムイベントの完全ガイド**という別ページが存在していますので<br>別途、追いたいと思います。

なんかこう、直感的な言い方じゃないというか、**プロパティ定義**と**イベント定義**という<br>記載の方がすっと読める気がして、「コンポーネントの基礎」ページの記載では、<br>認知負荷を感じますね。
## 実装してみた
### defineProps および defineEmits
#### 子コンポーネント
definePropsで定義した`msg`をh4フォントで表示されるように実装しています。
親コンポーネントから`msg`に対応する文字列が渡される想定です。

また、defineEmitsについて、親コンポーネントで定義した`enlarge-text`イベントを設定
ボタンのクリックイベントで`enlarge-text`イベントが実行されるようにしています。
![スクリーンショット (443).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813799/49aea743-b231-8262-f531-d6cf176f2632.png)

#### 親コンポーネント
公式サンプルを見てみると、`ref`というオブジェクトが必要と伺えますが、
この時点では、詳細が分かりません。別途、追いたいと思います。
ひとまず、今回の目的であるイベントの実行ができるかを優先して確認します。
![スクリーンショット (440).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813799/fe828a23-262a-675c-3cb2-f32b5b27cdd3.png)
### 動作実験
設置した「Enlarge text」ボタンを連打すると
![スクリーンショット (437).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813799/e5beb09e-b4b2-fa61-5ab4-ade546c0bb39.png)

確かに親コンポーネントで定義したイベントが実行され、表示文字列のフォントが
大きくなったことを確認できました。
![スクリーンショット (438).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813799/70138e9b-c169-fb00-e447-6e0e4e5afa8b.png)

まだ簡単に実装できる範囲ですね。
気になった点はdefinePropsの書き方が現時点で2種類ある点です。
```vuejs:child.vue
<script setup>
defineProps(['title'])
</script>
```
もう一方
```vuejs:child-another.vue
<script setup>
defineProps<{
  title: string
}>()
</script>
```
現時点では、後者の書き方では型指定が行えて、numberでもbooleanでも
対応できました。前者はstring特化に見えます。

## 追記
definePropsの書き方は3種類あるとコメント頂きました。**propsの完全ガイド**を含む今後の体験で深掘りできるようなので、一通り学んだあと、本記事の修正も含めて対応したいと思います。

次回：スロットを使ったコンテンツ配信と動的コンポーネントについて

https://qiita.com/babel_0101/items/7eec3d164096ed09014c
【markdown AI】使用できる/できないMarkdown記法を徹底解説

# TL;DR

:::note info
この記事は株式会社トップテンが協賛する、Qiita Engineer Festa 2024のキャンペーンテーマ「[markdown AIを使った記事を投稿しよう！](https://qiita.com/official-events/142fdd0d69ff6bb2d547)」の参加記事です。
:::


今回、上記キャンペーンがきっかけで初めて「markdown AI」を触りました。手軽に公開可能なMarkdownドキュメントが作成できるサービスらしいです。

Markdownが書けるサービスは多々ありますが、各サービス微妙に対応している記法に差があります。この記事ではMarkdown Guideに記載されている<font color=red>Basic SyntaxとExtended Syntaxを一通り試し</font>、使用できる/できないMarkdown記法を検証しました。

https://www.markdownguide.org/

# 検証結果

早速ですが、各種記法を試した結果を下記markdown AIのサイトで公開してみました。

https://storage.googleapis.com/topdowncom/content/ihLKcUDL2daQOZ5PgvvlRGOxIDQ2/396c7278-66fa-4e75-badc-341152fb8761/index.html

使用できない記法については下図のようにタイトルを<font color=red>赤字</font>にしているため、わかりやすいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/901d39e6-269e-35b0-a72b-c31dcbbc751c.png)

また、使用できない記法一覧を表にもまとめます。逆に言うと、下記以外の記法は使用できました。使用できない記法の中には自分自身あまり使ったことの無いものが多い印象です。

| 記法                                   | 現象                           | 
| -------------------------------------- | ------------------------------ | 
| 他の記法と組み合わせた箇条書き         | 行間のスペースが微妙           | 
| バッククウォートのエスケープ           | テキストがコードになってしまう | 
| コードブロックのシンタックスハイライト | ハイライトされない             | 
| 脚注                                   | 脚注にならない                 | 
| 定義リスト                             | 定義リストにならない           | 
| 絵文字                                 | 絵文字にならない               | 
| ハイライト                             | ハイライトされない             | 
| 添え字                                 | 取り消し線になる               | 
| 上付き文字                             | 上付き文字にならない           | 
| リンク無効化                           | テキストがコードになってしまう | 


# まとめ

確かに手軽。アカウント登録からドキュメント作成、公開までは早い。これからに期待です。
Ubuntu24.04LTSでMinecraftにForgeでModを導入する方法

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

## 1. Forgeのjarファイルをダウンロード
まずは、Forgeをダウンロードしてきましょう
[Forge](https://files.minecraftforge.net/net/minecraftforge/forge/)にアクセスして、自分がしたいバージョンのForgeのjarファイルをダウンロードします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691296/acaf6b5a-bb18-8580-711a-4d6e8246a0f6.png)

## 2. Forgeをインストール（導入）
次に、Forgeをインストールします
ターミナルを開いて、
jarファイルがあるディレクトリに移動して、以下のコマンドを実行します
```
chmod u+x jarファイル名
java -jar jarファイル名
```

これを実行することで、以下のようなダイアログがでてきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691296/34b73775-6942-66dc-0df0-a5ade4efc61a.png)

ディレクトリが正しいことを確認して、OKを押してください
すると、インストールが始まります
少し待って、インストールが終了しましたというダイアログがでてくるので、OKを押します

## 3. Modを導入
Forgeをインストールしたら、MODを導入します
~/.minecraft/modsの中に、好きなMODのjarファイルを入れてください
そして、Minecraft Launcherから、ForgeMinecraftを起動すると、
Modがちゃんと導入されていることがわかります！

## 終わりに
上記の方法をすれば、Modで遊ぶことができます
ですが、Modを使うと,最悪Minecraftが壊れるので、
**全て自己責任**でしてください

それでは、良いMODライフを〜〜
Go言語で簡単に請求書を生成：Invoice Generatorリポジトリの紹介

請求書作成をもっと簡単にしたいと思いませんか？

[Quaily](https://quaily.com "Quail.ink") が提供する [Invoice Generator](https://github.com/quailyquaily/bizdocgen "Invoice Generator by Quaily") を使えば、プロフェッショナルな請求書を簡単に生成できます。この強力で使いやすいライブラリをGo言語で活用して、請求書作成プロセスを効率化しましょう。

![](https://camo.githubusercontent.com/340c844b04bc236cb8b8bf11b44619c8b81ce7d3dbb1ac86125d8b6566948144/68747470733a2f2f7374617469632e717561696c2e696e6b2f6d656469612f717a35757a7635712e77656270)

### なぜこのInvoice Generatorを選ぶべきか？

**1. Go言語とシームレスに統合**
   - 既存のGoプロジェクトに簡単に統合可能。
   - すぐに始められるサンプルコードが提供されています。

**2. カスタマイズ可能なフォント**
   - CJK文字を含むカスタムフォントをサポート。
   - ブランドのスタイルに合わせて請求書をパーソナライズ可能。

**3. PDF出力**
   - 高品質なPDF請求書を生成。
   - デジタル配布や印刷に最適。

### 始め方

リポジトリには、ライブラリの設定方法と使用方法が詳細に説明されています。以下は、すぐに使える包括的なコードサンプルです：

```go
func main() {
    // 請求書のヘッダーを設定
	builder, err := invoice.NewBuilder(Config{},"./sample-params-1.yaml")
	if err != nil {
		log.Panic("failed to create builder")
	}

    // 新しい請求書を作成
	buf, err := builder.GenerateInvoice()
	if buf == nil || err != nil {
		log.Panic("failed to generate invoice")
	}

    // PDF請求書を生成
	filename := "sample-invoice.pdf"
	if err := os.WriteFile(filename, buf, 0666); err != nil {
		log.Panic("failed to write to file")
	}
}
```

### カスタムフォントの設定例

CJK文字を正しく表示するために、NotoSansCJK-JPでビルダーを設定する方法の例：

```go
builder, _ := invoice.NewBuilder(
	Config{
		FontName:       "noto-sans-cjk",
		FontNormal:     "./fonts/NotoSansCJK-JP/NotoSansCJKjp-Regular.ttf",
		FontItalic:     "./fonts/NotoSansCJK-JP/NotoSansCJKjp-Italic.ttf",
		FontBold:       "./fonts/NotoSansCJK-JP/NotoSansCJKjp-Bold.ttf",
		FontBoldItalic: "./fonts/NotoSansCJK-JP/NotoSansCJKjp-BoldItalic.ttf",
	},
	"./sample-params-2.yaml")
```

### サンプル設定ファイル

以下は、請求書の設定ファイルのサンプルです：

```yaml
id: "20240210-SAMPLE"
date: 2024-02-10
currency: "JPY"
company_name: "春日町株式会社"
company_addr: "Cocoro BG 404, Shinbashi 1-2-3\nTokyo, Japan, 100-1234"
company_email: "hi@hruhimachi.com"
company_seal: "sample-seal.png"
tax_number: "T1234567890000"
bill_to: "湯ちち株式会社\nShinbashi 4-2-1, Tokyo, Japan, 100-0001"
summary:
  period_start: 2024-01-01
  period_end: 2024-02-29
  title: "System Development and Design Service"
  total_exclude_tax: 500000
  tax_rate: 0.1
detail_items:
  - date: 2024-01-31
    title: "Implementation of the System"
    desc: "Implementing the system based on the requirements."
    url:
    total_exclude_tax: 0
  - date: 2024-01-01
    title: "System Design Draft"
    desc: "Drafting the system design document."
    url: https://github.com/hruhimachi/project-draft
    total_exclude_tax: 0
payment:
  receive_account_bank: "三井住友銀行"
  receive_account_branch: "本店営業部(001)"
  receive_account_number: "12345678"
```

詳細な設定情報については、[リポジトリ](https://github.com/quailyquaily/bizdocgen)をご覧ください。今日から請求書作成プロセスを効率化しましょう！
popupの検証（開発者ツール）【Chrome拡張開発】

# はじめに

知ってれば簡単なのですが、少し罠です。

Chrome拡張機能開発の「検証」・・・
いわゆる「開発者ツール」「`console.log()`」の確認方法について

# `background` の検証

まずはわかりやすい `background` の検証方法

https://zenn.dev/eloy/articles/4b2415426bd3ad

こちらの記事がわかりやすいです。
拡張機能設定画面からアクセスできます。

> ![](https://storage.googleapis.com/zenn-user-upload/91a782d41b83-20240204.png)

> ![](https://storage.googleapis.com/zenn-user-upload/0c1c281a8ace-20240204.png)

# `popup` の検証

popupも、拡張機能設定画面から検証できるのでは？
・・・できないんです。

popupの検証方法はこれ


![スクリーンショット 2024-06-12 20.06.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/b1e32286-732d-b6f0-16fd-8cdc60f66782.png)

拡張機能アイコンを右クリック → ポップアップの検証

この手順で検証可能です。

popupを閉じると検証ウィンドウも閉じます。
# おわりに

以上、少し罠なpopupの検証方法についてでした。

次は何を書こうかしら・・・
dockerでつくったlaravelのmigrateが失敗


dockerでlaravel環境を構築していてmigrateすると接続エラーになったので備忘録。

```
SQLSTATE[HY000] [2002] Connection refused (SQL: select * from information_schema.tables where table_schema = database and table_name = migrations and table_type = 'BASE TABLE')
```

.envファイルのDB情報が違った。
DB_PORTを3307にしていたが、3306だった！！
```
DB_CONNECTION=mysql
DB_HOST=hoge
DB_PORT=3307
DB_DATABASE=hoge
DB_USERNAME=root
DB_PASSWORD=root
```
↓
```
DB_CONNECTION=mysql
DB_HOST=hoge
DB_PORT=3306
DB_DATABASE=hoge
DB_USERNAME=root
DB_PASSWORD=root
```
rocky linux9 vscode導入

ダウンロード
wget -O vsc.rpm https://go.microsoft.com/fwlink/?LinkID=760867
インストール
sudo dnf -y install vsc.rpm

コマンドで立ち上げの場合
code

rootでログインしているとvscodeの立ち上げ時に余計なコマンドを打ち込む必要があるためユーザで入る
Spring Bootstrap　テーブルを中央揃えする方法　備忘録#2

# テーブルを中央揃えする方法

#### 初めに
今回は、Springbootを使って、掲示板機能を作成した際に、テーブルを中央揃えの仕方を調べて扱ったので、備忘録として残したいと思い記述しました。

テーブルだと、**text-center**や**justify-content-center**を使用してもなかなか中央に行ってくれないので、私はこれを試しました。


###完成図（イメージ)

![スクリーンショット 2024-06-12 19.48.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3807467/9697ab5a-cd3e-8501-6c00-f4c43a0c3884.png)
↑このような感じでテーブルを真ん中に持っていきます！


###HTMl

```diff_java

+  <div class="col-10 mx-auto">
    <table border="1" class="table">
        <tr class="table-secondary">
          <th>タイトル</th>
          <th>内容</th>
          <th>作成日</th>
        </tr>
        <tr th:each="post:${posts}">
          <td><a th:href="@{/detail/{postId}/show(postId=${post.id})}" th:text="${post.title}"></a></td>
          <td><a th:href="@{/detail/{postId}/show(postId=${post.id})}" th:text="${post.content}"></a></td>
           <td th:text="${#temporals.format(post.createDate, 'MM/dd')}"></td>
       </tr>
      </table>
    </div>
```

↑このHTMLの一行目のように、tableをの親要素であるdivタグに対して、`class="mx-auto"`とすることで、テーブルを中央揃えできます。

# 参考ページ
https://getbootstrap.jp/docs/5.3/getting-started/introduction/
Ubuntu24.04LTSでMinecraft Java版をプレイする方法

Ubuntu24.04LTSにMinecraftをインストールして,プレイする方法を解説します

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

## 1. debファイルをダウンロード
まずは、MinecraftLauncherのdebファイルをダウンロードします
[このサイト](https://www.minecraft.net/ja-jp/download/alternative)にアクセスして、debファイルをダウンロードします


## 2. MinecraftLauncherのインストール
次に、debファイルからMinecraftLauncherをインストールします
ターミナルで、debファイルをダウンロードしたディレクトリに移動して、
以下のコマンドを実行してください
```
sudo apt -y update
sudo apt -y install libpango1.0-dev libcurl3
sudo apt -f install 
sudo dpkg -i Minecraft.deb
```

処理が完了して、アプリ一覧に「Minecraft Launcher」が追加されれば成功です！

## 3. Microsoftアカウントでログイン
次に、自分のMicrosoftアカウントでログインします

## 4. Minecraft Java版を起動
Minecraft Launcherを起動できたら、
Java版の欄に移動して、Minecraftを起動しましょう！

## おまけ : ForgeでModを導入したい場合
MinecraftにForgeでModを導入したい場合は、
以下の記事を参考にしてください
[Ubuntu24.04LTSでMinecraftにForgeでModを導入する方法](https://qiita.com/kawaharu869/items/c3fa4312efcc3314b20a)

良いMinecraftライフを！
変数について考えてみました

※この文章は初心者向けです。

# 自分について #
自分はツール開発をするSESエンジニアをしています。
主にVBAとRPA(WinActor)を使います。
工程は要件定義からリリースまでです。

# 変数について何を考えたのか #
考えた事は変数の使いまわしと量について考えました。
変数は寿命を短く、使いまわさず、限られた範囲のみで有効にするのが一般的かと思います。
これは非常に大事なことだと思います。
なぜ大事なのかについて文章を作成しました。

# 実際の変数 #
考え方や経験値の違う人たちが作ったツールを改修してきた経験から、大体は何を意味しているのかわからない名前の変数が津波のように押し寄せるのがベターです。
※日常生活でお互いに何を言っているかわからない事があるくらいの頻度です。

# 実際の業務 # 
実際の業務では自分が作成する以外にも、他人が作成したツールを改修する事がまぁまぁあります。
実際の変数でお伝えした津波のように押し寄せる変数を理解しながら処理を追うのは無理ではないかと思います。
開発ではなく分析がある程度必要なテストでもツールを理解する必要があります。
その場合もやはり押し寄せる変数に襲われる事になります。
※その理由はドキュメントが壊滅、もしくは存在しない事がある事もまぁまぁあるからです。

# VBAの場合 #
モジュールを作成してプロシージャの中に変数を定義した状態、これがVBAでの最も隔離された変数です。
ただし一つのプロシージャの事だけ考える事はあまりありません。

# WinActorの場合 #
グループ化という機能で、見やすく変数を定義する事が出来ます。
ただし一枚の変数を確認するウィンドウに羅列して表示されます。

# そろそろ本題 #
人生をかけてバルマーピークについて検証しているため、無駄に話が長くなる傾向があります。
なので、そろそろ本題に入ろうと思います。
※今のところ楽しくはなるが性能の向上は無し、長期的観察を要すると思います。

そして早速、自分の結論を羅列します。
※飲みながら羅列したので要否は自分で考えてください。（この考えるという事がそのうち役に立ちます。たぶん。）
①各範囲の外に変数が出ることは無いと明記する。
②各範囲の外に変数が出る時はどの範囲が変数生存範囲なのか明記する。
③変数の名前は意味が分かるようにする。
④使いまわし変数も時には有り。

## ①について ##
readmeとか読んでとか設計書の中や外に最重要ドキュメントとして存在する事がありますが、
そこに書いてください。
テスターでも開発者でもそれで安心します。
書いてあるのに外に出てた場合は人のせいにすればいいから。

## ②について ##
どこかの範囲の外にも名前はあります。
プロシージャの外はモジュールなど。
ただしモジュールにはたくさんのプロシージャがいます。
ここが肝でその変数はどのプロシージャに関係しているのかが分からないのです。
ローマ字のA-Zの内に関係するのはXYZのみだったみたいなことです。
ちゃんとわかるところに記載する必要があります。

## ③について ##
酷いものだと[値]_ファイル名などあります。
※今の案件の話なのですが。
こんな変数名を名付ける人は信用できないので、結局全部調べることになります。
※変数名には明らかに使う範囲が分かり、範囲を超えたら使わないと思える名前を使う事が大事だと思います。
※上記の場合はファイルが存在する限り永遠に疑い続ける必要があります。

## ④について ##
これはWinActorの話になるのですが、
WinActorでは複数のExcelファイルでの値受け渡しはRPAの変数を介す必要があります。
つまり値を保持する変数が必要です。
これをしっちゃかめっちゃかの名前を付けた変数で保持するので、
結果的に膨大な変数を理解する必要が出てきます。
※明らかに不要な変数は破棄してる事が分かればいいのですが、そんなうまくいきません。
状況によっては一時ファイル的な変数って結構ありなんじゃないの？って思いました。
本当はしっかり寿命あるのが良いと思うけど。

## 最終的に言いたい事 ##
始めて投稿したし、プログラマの友達あまりいなし、いろんな話が聞きたいなぁと。
[6/11 AWSアップデート]Amazon GuardDuty Malware Protection for Amazon S3でマルウェアスキャンしてみた

## はじめに

- Amazon GuardDutyの新機能として`Amazon GuardDuty Malware Protection for Amazon S3`が発表され、Amazon S3に対するマルウェアスキャン・隔離をマネージドサービスのみで実装できるようになりました！
    - [Amazon S3 Protection in Amazon GuardDuty](https://docs.aws.amazon.com/guardduty/latest/ug/s3-protection.html)
    - [Detect malware in new object uploads to Amazon S3 with Amazon GuardDuty](https://aws.amazon.com/jp/about-aws/whats-new/2024/06/detect-malware-object-uploads-amazon-s3-guardduty/)
- 本記事では、新機能を試してみた結果を取り急ぎシェアします。

## 有効化手順

- AWSコンソールにログインし、Amazon GuardDutyのサービス画面にアクセスします。
- 保護プラン配下に`S3のMalware Protection`が新規追加されているので、アクセスしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562653/11b33fba-20cf-517f-fe23-6e80878d9595.png)

- `有効にする`ボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562653/f8a963b1-b3db-e497-a16d-7d0e4315ec27.png)

- 有効化画面に遷移するので、ナビゲーションに従い、必要な情報を入力します。
    - アクセス許可設定に注意が必要です。`アクセス許可を表示` を押下した際に表示されるポリシー・信頼関係が設定されたIAMロールを指定する必要があります。(本検証では新規IAMロールを作成しました。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562653/0f29ef4d-6498-7cbb-6e56-3eefb8db6adb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562653/baaf47f9-8dac-8d22-d73f-e309824512bf.png)

- 設定を有効化したところ、`保護されたバケット`セクションに保護対象S3バケット情報が表示されました。

## 動作検証

- eicarファイルをダウンロードして、Amazon S3バケットにアップロードしてみます。

```bash
# eicarファイルを取得
wget https://secure.eicar.org/eicar_com.zip

# S3アップロード
aws s3 cp eicar_com.zip s3://バケット名/eicar_com.zip
```

- Amazon S3のサービス画面から当該オブジェクトのタグ情報を確認するとキー`GuardDutyMalwareScanStatus`に値`THREATS_FOUND`が付与されていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562653/31c32cbc-332a-cf0c-8997-de5e1606ef5a.png)

- AWSコンソールの`S3のMalware Protection`画面に戻り、`保護されたバケット`セクションから対象バケットの詳細画面にアクセスすると、メトリクス情報として`完了したスキャン`情報が表示されていることが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562653/57b12820-4d35-7319-49a3-83429954ed70.png)


- 同詳細画面からリンク`検出結果を表示` を押下すると、GuardDutyの検出結果画面に遷移し、重要度及び検出結果タイプが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562653/b7354aca-b6c5-e297-2c16-4c28d7222f9b.png)

## まとめ

- `Amazon GuardDuty Malware Protection for Amazon S3`について、AWSコンソールから簡単に設定有効化できました。
- 公式ドキュメントを見る限り、自動タグ付けとバケットポリシー設定を組み合わせた隔離も実装できそうなので、夢が広がりますね！
    - https://docs.aws.amazon.com/guardduty/latest/ug/s3-protection.html


## 注意事項
- 本記事は万全を期して作成していますが、お気づきの点がありましたら、ご連絡よろしくお願いします。
- なお、本記事の内容を利用した影響について、筆者は一切の責任を負いませんので、予めご了承ください。
cloudflareを利用してwebアプリを公開したい!part3(HTTP送受信)

# はじめに
　前回はWorkerを作成しました。今回はWorkerから情報を取得してwebページに表示するところまでやります。だいぶ短めになるかも。

# フロントエンド
　単純にリクエストを出すだけです。app.vueを以下のように編集して送受信のチェックをしてみました。
 ```vue
 <template>
  <div>
    <h1>cloudflare testpage</h1>
    <p>{{ helloWorld }}</p>
    <p>{{ response }}</p>
  </div>
</template>
<script setup lang="ts">
import axios from "axios";

const helloWorld = "Hello World!";

const fetchTest = async () => {
  const response = axios
    .get("https://[Workerのアドレス]/")
    .then((res) => {
      return res.data;
    })
    .catch((err) => {
      console.log(err);
    });

  return response;
};
const response = await fetchTest();
</script>
 ```
 　今回は、前回生成したWorkerが"Hello Axum"を返してくるのでそれを確認できればOK。
  ![helloaxum.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3808364/6bea77b6-9864-99c5-3c3d-b982a9217561.png)

　corsの設定は普通にaxumですればいいらしいです。今回はこんな感じにしてみました。
 ```rust
 use axum::{http::HeaderValue, routing::get, Router};
use tower_http::cors::CorsLayer;
use tower_service::Service;
use worker::*;

fn router() -> Router {
    Router::new().route("/", get(root)).layer(
        CorsLayer::new()
            .allow_origin(
                "[フロントのOrigin]"
                    .parse::<HeaderValue>()
                    .unwrap(),
            ),
    )
}

#[event(fetch)]
async fn fetch(
    req: HttpRequest,
    _env: Env,
    _ctx: Context,
) -> Result<axum::http::Response<axum::body::Body>> {
    console_error_panic_hook::set_once();
    Ok(router().call(req).await?)
}

pub async fn root() -> &'static str {
    "Hello Axum!"
}
```
　しかし、試しにcurlやローカルのフロントからリクエストを送ると正常にgetできてしまう......なんでだろう？
 　TODOとして継続して調査します。何か手がかりがあればご提供いただけますと嬉しいです！

# おわりに
　今回は少し課題が残ってしまいました。こちらについては完成までに解決したいので調査を続けます。
 　次回はcloudflare D1を使ってデータベースとの連携周りを作ろうと思います。
Gitで現在の状態や変更箇所を確認する方法（diff,log）＋.gitignoreについて

# この記事を書くきっかけ
Webアプリケーションをデプロイした後も、何度もファイルを修正してきました。主に、VSCodeのソース管理やSourceTreeを利用してきました。でも、いちいちVSCodeやSourceTreeを開かなくても、コマンドラインで直感的にコミット履歴やステータスを確認できたら良いですよね。

というわけで、今回はGitで現在のファイルの状態や変更箇所を確認する方法を勉強します。また、Gitで管理したくないファイルを設定するファイル（.gitignore）についても併せて勉強します。

# 現在の状態の確認

### コミットの情報を確認する方法
| コマンド | 内容 |
|:-|:-|
| git log  | コミット履歴を確認する  |
| git log --oneline  | コミットメッセージだけを表示する |
| git log -1 |  直近から1件だけコミットログを表示する |
| git log -2|直近から2件だけコミットログを表示する|
| git log -p | ファイルの差分を確認できる  |

`git log`を実行すると、以下の情報が表示されます。
- コミットのSHA値（ハッシュ値）
- コミットの実行者（ユーザー名とメールアドレス）
- コミットを行った日時
- コミット実行時に記載したコメント

***
### コミットしていないファイルがあるか確認する方法
| コマンド | 内容 |
|:-|:-|
| git status  | ローカルリポジトリの状態を確認する |
| git status -s | ステータスをシンプルな形式で表示する  |

`git status`コマンドの後に表示されるのは、以下の通りです。
- Untracked files: 
    - 一度も登録されていない、新規に追加したファイルを表示します。Untrackedとは、追跡されていないという意味です。
- Changes to be committed:
    - ステージングエリアに仮登録されているファイルが表示されます。
- Changes not staged for commit:
    - 変更済み(modified)のファイルが表示されます。
- nothing to commit, working tree crean
    - すべてコミットされて、変更済みのファイル（Unmodified）がないときに表示されます。


# 変更箇所を確認
ファイルの修正前と修正後の違いを差分といいます。ファイルをうまく修正したと思っても、自分の意図しない変更や間違いがある場合もあります。そこで、差分を確認し、自分の思った変更になっているかを確認します。
| コマンド | 内容 |
|:-|:-|
| git diff  |  ①ワーキングディレクトリと②ステージングエリアを比較する |
| git diff --cached  |  ②ステージングエリアと③最新コミットを比較する |
| git diff HEAD  |  ①ワーキングディレクトリと③最新コミットを比較する |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642333/9e35fd7f-3daf-72a9-6ae4-5ff457bee142.png)


# Gitで管理しないファイルを設定
Gitでは、管理すべきではないファイルというものが存在します。例えば、アプリをビルドするときに自動作成されるファイル、WindowsやMacのOSのファイル、パスワードが書かれたファイルなどです。
Gitで管理するには不要なファイルや他人に知られては困るファイルは、当然Gitに登録しないようするべきです。リモートリポジトリで共有してメンバーに見られても大丈夫なのか、コミットする前に確認するべきです。


### Gitで管理しないファイルの設定方法(.gitignore)

.gitignoreファイルというテキストファイルに無視したいファイル名やディレクトリ名を書き、それをローカルリポジトリに配置することで、Gitで管理しないファイルを設定できます。テキストファイルに書くだけで、Gitが勝手に無視してくれます。
.gitignoreファイルは、そのファイルが配置されたディレクトリ配下のパスにしか効果がありません。ローカルリポジトリ内の全てのディレクトリに設定を反映するには「.git」ディレクトリと同じディレクトリに.gitignoreを保存するようにしましょう。

Gitで管理する必要のないファイルついて、GitHubが.gitignoreファイルのテンプレートを公開しているそうです。自分用にPython.gitignoreを見てみましたがと、思ったより多くてびっくりしてます。

https://github.com/github/gitignore

### .gitignoreの一例
- /node_modules または /packages のコンテンツなどの、依存関係のキャッシュ
- コンパイルされたコード (.o、.pyc、および .class ファイルなど)
- ビルド出力ディレクトリ (/bin、/out、または /target など)
- 実行時に生成されるファイル (.log、.lock、または .tmp など)
- 非表示のシステムファイル (.DS_Store または Thumbs.db など)
- .idea/workspace.xml などの個人用 IDE 設定ファイル

https://www.atlassian.com/ja/git/tutorials/saving-changes/gitignore

# まとめ
今回は、Gitで現在の状態や変更箇所を確認する方法（diff,log）と.gitignoreについて勉強しました。`git status`や`git log`はよく使いそうです。

以前、Webアプリを作成したときに.gitignoreファイルを作成しましたが、もう一度見直してみると、登録していたのはパスワードの書かれた「.env」ファイルと「.pyc」ファイルのみでした。自分のWebアプリのバージョン管理をSourceTreeで見てみると、余計なファイルがたくさんあって、なんだかごちゃごちゃとしていました。macOSの「.DS_Store」ファイルや「.log」ファイルも.gitignoreに設定する方がいいと学んだので、早速自分の.gitignoreファイルを修正しました。

こうしてみると、SourceTreeは、どのファイルをGitで管理しているのかを視覚的に確認できて便利です。Gitのようなコマンド操作するCUIなサービスと、SourceTreeようなGUIのサービスを自然に使い分けることができたらとてもかっこいいですね。
ImageMagickで白抜き文字を書き込む

# コマンド

```sh
convert input.jpg -gravity southeast -pointsize 200 -fill '#000' -stroke '#000' -strokewidth 50 -annotate 0 'test' -fill '#FFF' -strokewidth 0 -annotate 0 'test' output.jpg
```

以上のコマンドで、画像の右下に白抜き文字を書き込むことができます。

# 解説

まず、ImageMagickのコマンドは、おおよそ記載した順に処理が行われていくことに留意してください。

```
convert input.jpg
```

まず、下地になる画像が用意されます。

```
-gravity southeast
```

画像の上から何かしらを配置する際の基準位置を設定します。
`southeast`の場合は右下になります。

```
-pointsize 200
```

フォントサイズを設定します。この例では200です。

```
-fill '#000'
```

文字色を設定します。今回はRGB形式で黒に設定しています。

```
-stroke '#000' -strokewidth 50
```

文字の縁取りの色と幅を設定します。今回は文字色と同一の黒に設定しています。
ちなみに、文字色と縁取りの色を変えて白抜き文字にすることもできますが、縁取りで文字本体が削り取られたような出力になります。縁取りが細ければ好みの問題になりますが、縁取りが太い場合は視認性の問題が出てきます。

```
-annotate 0 'test'
```

`-gravity`で設定した基準位置からずらさず(`0`)、`test`という文字を配置します。

ここから、黒い文字の上に書き込む白い文字の為の設定を行っていきます。
上書きすべきパラメータ以外はそれまでの設定に準ずることに注意してください。

```
-fill '#FFF'
```

文字色を白に変更します。

```
-strokewidth 0
```

上から書き込む文字は細い必要があるので、縁取りの幅を0にします。

```
-annotate 0 'test'
```

先ほど書いた文字の上から、同一の文字を書き込みます。
基準位置・フォントサイズについては上書きを行っていないため、下にある文字に被るように書き込まれます。

```
output.jpg
```

最後に、指定したファイル名で書き出されます。
Macでデスクトップにフォルダが表示されない

### 自己紹介
こんにちは、**よわよわエンジニア**のちゃったまです。

普段の開発作業では**MacBookPro**を使用中なのですが、Macユーザーとなりようやく1年が経とうとしています。

Windows歴=年齢からのMac移行で、最初はかなり戸惑いました。

- キーボードの違い
- トラックパッドの操作
- Finderの使い方
- アプリケーションのインストール
- ブラウザのスクロール方向（これは設定で変えられるけど）
etc...

Windowsにどっぷりだった分、なかなかクセが抜けませんでした。
***

### デスクトップにフォルダやファイルが表示されない問題
ここで本題です。
突然、デスクトップにフォルダやファイルが表示されなくなりました。

（こんな感じ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3221751/ac481e94-74d7-28ff-6169-cba5f7067c70.png)


「何もしてないのに壊れた」的な感覚です。
実際そんなはずはなく、<<何か>>はしてはいるんですけど、記憶にございません状態でして・・・。

#### Google先生に聞いてみました。

- Finderを再起動しよう：効果なし
[Macのデスクトップにアイコンが表示されない時の簡単な直し方(Finderの再起動)](https://hirooooo-lab.com/development/restart-finder-for-mac/#google_vignette)
  というかこの現象が発生してから何度か再起動してる気がする。念の為試してみるも効果なし。
  <br>

- バックアップの復元：試してない
  [Macのデスクトップから消えたファイルを復元する方法](https://4ddig.tenorshare.com/jp/mac-recovery-solutions/recover-lost-files-from-mac-desktop.html#id1)
  そもそも、Finderの「デスクトップ」には表示されているし、復元は違うと思ったため実施せず。
![スクリーンショット 2024-06-12 14.56.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3221751/53a86362-3cea-ce20-03b7-a0c197c73afd.png)
  <br>
  
- Finderの設定：効果なし
[Macでデスクトップに商品のアイコンが表示されません](https://www.buffalo.jp/support/faq/detail/12872.html#:~:text=1.%20Dock%20%E3%81%AE%E3%80%8CFinder%E3%80%8D,%EF%BC%89%E3%80%8D%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82&text=2.,%E9%A0%85%E7%9B%AE%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82)
    バッファローの商品サイトから、アイコン表示がおかしい場合の対処法。
    何か関係あるかもと試し。

    Finder＞設定＞Finder設定
  ![スクリーンショット 2024-06-12 18.15.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3221751/3873f0e6-b39d-4bb4-bde2-33ae392b0d18.png)

  全てにチェックを入れてみる。
  ![スクリーンショット 2024-06-12 18.31.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3221751/d69125b6-f48e-daef-fc60-faff50968a4a.png)
  変わらず。
 <br>

- システム設定を変更：直った！
  それっぽい記事が見つからなかったため（検索下手すぎ問題）しらみつぶしに設定周りをみてみようとシステム設定を確認することに。

  システム設定＞デスクトップDock
  スクロールしていくと・・怪しい項目が。

  項目を表示の「デスクトップに」、にチェックを入れてみた。

     ![スクリーンショット 2024-06-12 18.36.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3221751/edfaef4a-8dc6-b562-57ea-e59edfd05267.png)
    #### アイコンが表示された！！！
    ![スクリーンショット 2024-06-12 18.47.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3221751/e3a8fe0a-a51a-b647-ac2f-86f31cb0016c.png)

こんなところ設定した記憶はないんだけど・・・
きっとどこかのタイミングでいじってしまったんだろうな。（反省）

先ほどのFinderの設定でHDが表示されていたため、元に戻す。
     Finder＞設定＞Finder設定
    ![スクリーンショット 2024-06-12 19.00.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3221751/818cbd2d-feaf-3fa0-c36e-7017e9e522b0.png)

表示周りでおかしくなったら、まずはシステム設定をみてみようと思ったのでした。