OmniAICreator/Qiita-1.07M huggingface dataset:
Androidスマホのカーソル移動小ネタ

# はじめに
Androidスマホ入力でカーソル位置を変えるとき、テンキー入力なら左右移動のカーソル釦があるが、QWERTY入力だと釦がなくてカーソル移動しづらく困っていた。pydroid3でPythonコード書く等、QWERTY入力がメインのときは特に。
![Screenshot_20231021-221502~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299802/e8ae2606-c16a-89dc-f066-dd2d8f67a101.png)


# 便利な方法
QWERTY入力でスペースキーを押しながら左右に移動させると、カーソルが移動する！こんなに便利な機能があったことを知らなかったので感動。
![Screenshot_20231021-222140~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1299802/1d6c9cc9-dabb-5919-8a3b-b12ae1aa5550.png)

以上
rails sをしたままターミナルを閉じてしまってA server is already running.が出る時の対処法

# 解決法手順

```rails s```をしている状態で、誤ってターミナルを閉じた後に”rails s”コマンドを実行したら、

「A server is already running. Check/Users/asakura/KiZUKAI_project/kizukai_mvp/tmp/pids/server.pid.」

が出てしまいました。

エラーメッセージ "server is already running" は、既に別のRailsサーバーが同じポートで実行中であることを示しています。このエラーを解決するには、いくつかのステップを踏んで再び同じポートでサーバーを起動することができるようになります。

## 1. 'server.pid'ファイルの削除

以下のコードでエラーが発生しているpidファイルを削除する。この場合は"/Users/asakura/KiZUKAI_project/kizukai_mvp/tmp/pids/server.pid."

```bash
rm /Users/asakura/KiZUKAI_project/kizukai_mvp/tmp/pids/server.pid.
```

## 2. 「Address already in use」のエラーが発生してしまう

再度「rails s」を実行すると、今度は別のエラーが発生します。最後の行で「Address already in use – bind(2) for “127.0.0.1” port 3000 (Errno::EADDRINUSE)」のエラーが発生してしまう。
別のポートでサーバーを起動する場合は

```rails s -p 3200```

のようにポート番号を指定することで、このエラーは回避できます。
しかし、慣れ親しんだポート3000でどうしてもサーバーを起動したい場合は以下のステップを踏む必要があります。

### [lsof -i:3000]コマンドで3000ポートの使用状況を確認
```bash
$ lsof -i:3000
COMMAND    PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
ruby    268504  moto   13u  IPv4  68224      0t0  TCP localhost:3000 (LISTEN)
ruby    268504  moto   14u  IPv6  68225      0t0  TCP ip6-localhost:3000 (LISTEN)
ruby    268504  moto   25u  IPv6  68293      0t0  TCP ip6-localhost:3000->ip6-localhost:50578 (CLOSE_WAIT)
ruby    268504  moto   27u  IPv6  69661      0t0  TCP ip6-localhost:3000->ip6-localhost:33754 (CLOSE_WAIT)
ruby    268504  moto   29u  IPv6  68298      0t0  TCP ip6-localhost:3000->ip6-localhost:32898 (CLOSE_WAIT)
```

### killコマンドで3000ポートで使用されているプロセスの削除

```kill -9 PID```
今回の場合は、PIDの番号が「268504」なので

```bash
 kill -9 268504
```

killコマンドを実行したら再度「lsof -i:3000」を実行します。先程のrubyプロセスが削除されていれば成功です。

これで再度```rails s```を実行することができるはずです。


参考記事は[こちら](https://asapoon.com/ruby/rails/2627/%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB%E3%82%92%E9%96%89%E3%81%98%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%A6rails-s%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E6%99%82%E3%81%AE%E5%AF%BE%E5%87%A6/#rtoc-2)
【TailwindCSS】カスタムテーマをダークモードとして設定する

TailwindCssには標準でダークモードに対応していて、[設定を行う](https://tailwindcss.com/docs/dark-mode)と、下記のようにhtml要素のクラス名に`dark`を設定した場合に、`dark:bg-black`を有効にすることができます。

```html
<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>
```

ただ、このままだと外部ライブラリが用意するテーマを使用したときに、暗めのテーマをダークモードとして認識しません。

具体的に、下図のような[DaisyUI](https://daisyui.com/docs/themes/)が用意する`Synthwave`のようなテーマを使いたいとします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552712/701d1e52-8fd4-c521-ca72-8e4c43cea71d.png)

[DaisyUIの公式の設定](https://daisyui.com/docs/themes/)に従って設定すると、

```html
<html data-theme="synthwave"></html>
<body>
  <div class="bg-white dark:bg-black"> <!-- dark:bg-black not worked
    <!-- ... -->
  </div>
</body>
</html>
```

とすることで、`synthwave`というテーマを使用することができますが、`dark:bg-black` は有効になりません。

どうすれば`synthwave`のような暗めのカスタムテーマをダークモードとしてTailwindCSSに認識させることができるのでしょうか？

## カスタムテーマをダークモードとして設定する

[TailwindCSSの公式ドキュメント](https://tailwindcss.com/docs/dark-mode#customizing-the-class-name)に以下の記述があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552712/436520cc-4f07-03ee-8c89-c16cc231e338.png)

これに従い、次のように`tailwind.config.js`を設定します。

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class', '[data-theme="synthwave"]'],
  // ...
}
```

`'[data-theme="synthwave"]'`を追加することで、先のほど例において

```html
<html data-theme="synthwave">
<body>
  <div class="bg-white dark:bg-black"> <!-- dark:bg-black now working
    <!-- ... -->
  </div>
</body>
</html>
```

カスタムテーマに対しダークモードとしてTailwindCssに認識させることができます。

以上です。
木

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/14c7a7a8-4e31-87be-79c3-62806586f94a.png)
１：完全二分木とヒープ
　接点が、上位階層から順、かつ、同じ階層では左から順に詰まっている二分木を完全二分木と言います。ヒープは、完全二分木において、
親節点の値＞子節点の値
あるいは
親節点の値＜こ節点の値
といった関係が、すべての接点で成立している木です。

「ヒープの条件」
・完全二分木である事
・親子館に一定の大小関係が成立していること

２：二分探索木
　二分探索木は、
　節点の値＜（節点の右についているすべての子の値）
かつ
　（節点の左についているすべての子の値）＜節点の値
といった関係が、すべての節点で成立している木です。

「二分探索木の条件」
・節点の値＜（節点の右についてついているすべての子の値）
　かつ
　（節点の左についているすべての子の値）＜節点の値
といった関係が、すべての節点において成り立つこと

３：木の巡回
　木のデータを順番に見ていくことを気を巡回すると言います。木の巡回方法には、幅優先探索と深さ優先探索があります。

①幅優先探索
　幅優先探索は、同じ階層の節点を優先して巡回します。
　　　上から順かつ　左から順
　に処理をしていきます。

②深さ優先探索
　ふかっさ優先探索は、下位階層の節点を優先して巡回します。左の子へどんどん進み、月当たったら、親へ戻って右の子へ進むことを繰り返します。

「深さ優先探索」
①先行順：行きがけ順。節点に到着したら、その節点をすぐに処理対象とする。
②中間順：節点に到着しても、すぐには処理対象とせず、まずは、左の子へ進む。そして、左の子から戻ってきたときに、処理対象とする。節点に左の子がないときには、その節点に到着した時点で処理対象とする。
③後行順：帰りがけ順。親に戻るときに処理対象とする。
WindowsDefenferのCPU使用率を制限する

Windowsで大量ファイル出力が発生する処理(ベンチマーキング、コンパイル、巨大リポジトリのクローン時など)実施時にタスクマネージャーを見ると、WindowsDefenderがCPUリソースを大量に使用していることが確認できる。  

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383255/5dc6911d-4b6f-0fb7-1b02-deb8b4450797.png)

CPUリソースをWindowsDefender以外に渡したい場合は、PowerShellにて管理者権限で下記コマンドを実行することでCPUの使用率上限値を設定できる。  
デフォルトでは50%になっているので、それ以下にすることで効果が見込める。

```
Set-MpPreference -ScanAvgCPULoadFactor <percentage>
```
10%に設定する場合

```
Set-MpPreference -ScanAvgCPULoadFactor 10
```
【Swift】CIFilterで画像にスッたようなぼかしを入れる

# はじめに

以前、CIFilterでぼかしを入れる記事を書きました
今回は前回書いたぼかしとは違った種類のぼかしを画像に適用させてみます。

https://qiita.com/SNQ-2001/items/fd09a2a85f92b514482d

# サンプルアプリ
![Simulator Screen Recording - iPhone 15 - 2023-10-21 at 21.37.37.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/de2cc731-2fc2-8455-504c-e104a72c4bf5.gif)

# 実装
```swift
import SwiftUI

struct ContentView: View {
    private let image = UIImage(named: "sample")!

    @State private var uiImage: UIImage?
    
    @State private var angle: CGFloat = 0.0
    
    @State private var radius: CGFloat = 0.0

    var body: some View {
        ScrollView {
            VStack {
                if let uiImage {
                    Image(uiImage: uiImage)
                        .resizable()
                        .scaledToFit()
                } else {
                    Image(uiImage: image)
                        .resizable()
                        .scaledToFit()
                }

                HStack(spacing: 15) {
                    Button {
                        applyMotionBlurFilter()
                    } label: {
                        Text("適用")
                    }
                    
                    Button {
                        uiImage = nil
                        angle = 0.0
                        radius = 0.0
                    } label: {
                        Text("リセット")
                    }
                }
                
                VStack {
                    Text("angle: \(angle.description)")
                    Slider(value: $angle, in: 0...360)
                }
                
                VStack {
                    Text("radius: \(radius.description)")
                    Slider(value: $radius, in: 0...30)
                }
            }
            .padding(.horizontal, 20)
        }
    }

    func applyMotionBlurFilter() {
        let context = CIContext()
        let inputImage = CIImage(image: image)!

        guard let motionBlurFilter = CIFilter(name: "CIMotionBlur", parameters: [
            kCIInputImageKey: inputImage,
            kCIInputAngleKey: angle,
            kCIInputRadiusKey: radius
        ]) else { return }
        guard let outputImage = motionBlurFilter.outputImage else { return }
        guard let cgImage = context.createCGImage(outputImage, from: outputImage.extent) else { return }
        self.uiImage = UIImage(cgImage: cgImage)
    }
}
```

# おわり
擦れたようなぼかしをかけることができました
APIデータ取得して表示のメモ

## はじめに
laravelで、trelloのAPIを使用してデータを表示する。
今回はボードリストを単純に表示することを行ってみる。
trelloのAPIを使用し、画面を表示させるまで。
前提として、larvelが動く環境はセットされているとする。

## 処理概要
Trello APIを使用してLaravelでデータを表示する基本的な手順は以下となる。

(1) **Trello APIキーの取得**
Trello APIを使用するには、まずAPIキーを取得する必要がある。以下のURLにアクセスしてAPIキーを取得する。
[https://trello.com/app-key](https://trello.com/app-key)

tokenに関してはAPI取得の画面で以下を行う。
手動でトークンを生成できます、がありクリックし、許可ボタンを推したら長いフレーズが表示される。

(2) **Laravelに必要なパッケージのインストール**
Guzzleを使ってHTTPリクエストを行う。Laravelプロジェクトのルートディレクトリで以下のコマンドを実行。
```
composer require guzzlehttp/guzzle
```

(3) **Trelloからデータを取得するサービスを作成**
直接コントローラから処理していいが、今回は一旦サービスを通す。
**この箇所が今回の主なポイント**
trelloのAPIに接続し、データを取得する箇所となる。

LaravelでTrelloのデータを取得するサービスを作成する。例として`TrelloService`を作成。
`app/Services`フォルダを作成し、
`app/Services/TrelloService.php`を以下のように編集。
ここで先ほど取得したAPIとtokenをセットする。
```php
<?php

namespace App\Services;

use GuzzleHttp\Client;

class TrelloService
{
    private $client;
    private $apiKey;
    private $token;

    public function __construct()
    {
        $this->client = new Client(['base_uri' => 'https://api.trello.com/1/']);
        $this->apiKey = 'YOUR_API_KEY'; // 1.で取得したAPIキーをここに入力
        $this->token = 'YOUR_OAUTH_TOKEN'; // 任意: OAuthトークンがある場合はここに入力
    }

    public function getBoards()
    {
        $response = $this->client->get('members/me/boards', [
            'query' => [
                'key' => $this->apiKey,
                'token' => $this->token,
            ]
        ]);

        return json_decode($response->getBody(), true);
    }
}
```

(4) **Controllerでサービスを利用してデータを取得**

例として`TrelloController`を作成。
先ほど作成したServiceを使用してデータを取得している。

```bash
php artisan make:controller TrelloController
```

`app/Http/Controllers/TrelloController.php`を以下のように編集する。

```php
<?php

namespace App\Http\Controllers;

use App\Services\TrelloService;

class TrelloController extends Controller
{
    private $trelloService;

    public function __construct(TrelloService $trelloService)
    {
        $this->trelloService = $trelloService;
    }

    public function index()
    {
        $boards = $this->trelloService->getBoards();

        return view('trello.index', compact('boards'));
    }
}
```

(5) **Viewの作成**
画面は今回bladeで作る。
`resources/views/trello/index.blade.php`という新しいViewファイルを作成する。

```blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trello Boards</title>
</head>
<body>

<h1>Your Trello Boards</h1>

<ul>
    @foreach($boards as $board)
        <li>{{ $board['name'] }}</li>
    @endforeach
</ul>

</body>
</html>
```

(6) **ルーティングの設定**
`routes/web.php`を編集して、以下のルーティングを追加する。

```web.php
use App\Http\Controllers\TrelloController;←追加


Route::get('/trello', [TrelloController::class, 'index']);
```

以上の設定を行った後、`http://your-laravel-app/trello`にアクセスすると、Trelloのボードのリストが表示される。

## おわりに
API接続で処理するイメージを簡潔に記載した。
APIを使用し複雑な処理を行うときに使用イメージを再確認できるはず。
WP CLIのインストール方法

# WP CLIのインストール方法 #
MacOSでWP CLIコマンドを使用した際に```zsh: command not found: wp```と表示されたので、wp cliをインストールしたときの備忘録

1. WP-CLIをインストールする:
   WP-CLIをインストールする必要があります。ターミナルで以下のコマンドを実行して、WP-CLIをインストールできます。

   ```
   curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
   chmod +x wp-cli.phar
   sudo mv wp-cli.phar /usr/local/bin/wp
   ```

   このコマンドはWP-CLIの実行ファイルをダウンロードし、実行可能に設定し、システムのパスに移動します。

2. WP-CLIが正しくインストールされたか確認:
   WP-CLIが正しくインストールされたか確認するために、次のコマンドを実行してバージョン情報を表示します。

   ```
   wp --version
   ```

   これでWP-CLIが正しくインストールされていれば、`wp dotenv salts regenerate` コマンドを実行できるはずです。

3. システムのパスを確認:
   インストール後、`wp` コマンドがシステムのパスに含まれているか確認してください。一般的には、`/usr/local/bin` などのパスにインストールされます。

4. ターミナルを再起動:
   インストール後、ターミナルウィンドウを再起動して、パスの変更が反映されていることを確認します。

これらの手順に従ってWP-CLIをインストールし、`wp` コマンドを正しく使用できるようにすれば、`wp dotenv salts regenerate` コマンドを実行できるはずです。
転職フェアに行ってきた

転職フェアに行ってきました。まだ記憶が残っている間にこの記事を
書いておこうと思います。

・・・結論から言うと<strong>「絶対に行け！」</strong>です

この記事が誰かの役に立つことを願っています。
<br>

～～～ 今日感じたこと ～～～


#### 1　インフラ系は強い
インフラ系はとにかく企業様の数が多く、量に圧倒されました。
全体の3割はインフラ系だったような・・・？

今日行ってきたことで割とイメージが変わりました。
根強い需要があるというのは明確な長所であるといえます。
<br>
#### 2　JAVA、C系は強い
これも↑と似たような理由です。大手企業もやはり・・というかこのタイプでした。
<br>
#### 3　JS系はまだ弱い
界隈では割と盛り上がってそうなモダンJS系（React,node,Vueなど）
ですが、まだまだ求人の数は少ないように感じました。

僕もこっち系を狙っていたので多少はがっかりしました。
メジャーになるのはもう少し時間がかかるのでしょうか・・・？
<br>
#### 4　AWSはすごい
今日一番多く見かけたのはこの<strong>【AWS関係】</strong>でした。
分野ジャンル問わず、とても大きく需要が拡大しているように見えます。

AWS関係の資格を取っておくと今後重宝されるかも？
今後、これを全く知らないのはとてもマズいと言えるでしょう。
今すぐにでも勉強しておく必要を感じました。

###  5　未経験は最強
未経験者は絶対に転職フェアに行ってください。
もう一度言います。<br>
<strong>未経験者は絶対に転職フェアに行ってください</strong><br>
なぜかと言いますと・・・

世の中には未経験者の育成に絶対の自信を持っている企業様が少なからず存在するからです。
そのような企業はむしろ、未経験者の方と積極的に面談をしています。
そういった企業に巡り合えるチャンスであり、実際に話をすることも出来るというまたとないチャンスも生まれてきます。<br>
言葉は適切ではないかもしれませんが、<strong>「確変状態」</strong>です。

もちろんそのまま気に入った企業で就職しても何も問題は無いわけでです。
自分に何が足りないのかを明確にするチャンスにもなりますし、

ぜひとも転職フェアを見つけたら絶対に行ってください。
間違いなく、今後の転職活動に大きくプラスになります。
<br>
<br>

・・・実は、↑こんな偉そうなことを書いている僕も未経験だったりします。
カジュアル面談のお話を3件いただき帰還しました。
1つでも通れば未経験は卒業となります。がんばります。
<br>

既にエンジニアの方も最新の技術をキャッチアップする目的で
行くことをおすすめします。損をすることはありません。

また何か思い出したら書きます。
Git超入門（初期設定）

# この記事について
この記事は、自身の学習振返り・アウトプットを目的として作成しました。
自身と同じく未経験でエンジニア転職を目指す初学者の方にも見易い内容にしていければと思います。

今回は、Gitの初期設定についてです。


## ユーザー名設定
git configコマンドを使います。
```
<!-- git config コマンド -->
git config --[設定ファイルの種類] [設定項目] [設定する値]
```

下記のコードでは、
[設定ファイルの種類]・・・global
[設定項目]・・・user.name
[設定する値]・・・"自身のGitHubユーザー名"
です。
エラーが無ければ何も表示されません。

```
git config --global user.name "自身のGitHubユーザー名"
```


## メールアドレス設定
続けて下記を入力しメールアドレスを設定します。
こちらもエラーが無ければ何も表示されません。
```
git config --global user.email "自身のGitHubメールアドレス"
```


## ユーザー名・メールアドレス設定確認
登録されたか確認する場合は、以下を一文ずつ入力すると、ユーザー名・メールアドレスが返ってきます。
```
git config --global user.name
git config --global user.email
```
設定全般項目を表示する場合は、listオプションを使います。
```
git config --global --list
```

## デフォルトブランチ設定確認
最後にデフォルトブランチを確認します。
```
git config init.defaultBranch
```
上記を入力して`main`が表示されない場合は、デフォルトブランチを`main`に変更します。
```
<!-- デフォルトブランチを`main`に変更 -->
git config --global init.defaultBranch main
```


以上です。
今回始めてQiita投稿させて頂きました。
今後も習熟度向上の為に継続していきたいと思います。
AWS BedrockのClaude2でgitの変更点をまとめてもらう

# 背景
GithubのプルリクやGitlabのMerge Requestを書くのって正直面倒ですよね。AIにやってもらいましょう。AWS BedrockのClaude2であればトークン長が100kらしいので大きめの入力もできるのが嬉しいですね。ChatGPTだと少し大きくなるとすぐに溢れちゃって実用的ではなかったのですが、こちらはいけそうな雰囲気。とりあえずやってみました。

# ソースコード
以下はPythonで記述されたスクリプトです。このスクリプトはGitの差分（diff）を取得し、それをClaude2に送ります。Claude2はその差分から変更点をまとめ、標準出力として返します。
```python
import json
import sys

import boto3


def request_to_claude2(prompt: str):
    client = boto3.client("bedrock-runtime", region_name="us-east-1")

    body = {
        "prompt": prompt,
        "max_tokens_to_sample": 2048,
        "top_p": 0.999,
        "top_k": 250,
        "temperature": 1,
    }

    response = client.invoke_model(modelId="anthropic.claude-v2", body=json.dumps(body))
    body = response["body"].readlines()

    completion = json.loads(body[0].decode("utf-8"))["completion"]
    return completion


def main():
    # 標準入力を取得する
    diff = sys.stdin.read()

    prompt = f"""
Human: 下記の変更のMerge Requestを作成します。変更点をまとめてください。
フォーマットは下記のように記載してください。

フォーマット:
変更点:
- 〇〇を追加
- 〇〇を変更
- 〇〇を追加
- 〇〇を削除

変更:
{diff}

Assistant: """

    print(request_to_claude2(prompt))


if __name__ == "__main__":
    main()
```

# 実行結果
スクリプトを実行すると、以下のような出力が得られます。

```bash
$ git diff master | python explain_diff.py
 変更点:

- admins/urls.pyにDebugViewSetを追加
- admins/views.pyにDebugViewSetを追加
    - get_timezoneアクションを追加:タイムゾーン設定を取得するAPI
- DebugViewSetでタイムゾーン設定の確認APIを追加
```

完璧じゃないけけどたたき台としては良さそう。

# コードレビューもいけるのでは？
と思ってやってみたのですが、存在しないコードをレビューし始めてしまったのでこちらは断念しました。ChatGPT4に入力できたら良いんですけどね。
自宅サーバーをcloudflare経由でSSH接続できるようにした話

## 目次

[はじめに](#はじめに)

[1. パスワードログインの無効化](#1-パスワードログインの無効化)
[2. SSHポートの変更](#2-SSHポートの変更)
[3. ファイアウォールの設定](#3-ファイアウォールの設定)
[4. クラウドフレアトンネルの設定](#4-クラウドフレアトンネルの設定)

[おわりに](#おわりに)

## はじめに
前回は自作サーバーにUbuntuをインストールしてメインPCとSSH接続できるようにしました。↓

https://qiita.com/piny940/items/f9d10fb2be3d7148d6ee

今回は自宅サーバーにファイアウォールなどを設定してサーバーを公開していきます。

前提:
- サーバーにSSH接続ができる
- 独自ドメインを取得している
- cloudflareのアカウントを持っている
- cloudflareを独自ドメインのDNSサーバーとして使用している


## 1. パスワードログインの無効化
サーバー側で`/etc/ssh/sshd_config`を開き、以下を追記します。

```
PasswordAuthentication no
```
ついでにrootユーザーでのSSH接続を無効化しておきます。
```
PermitRootLogin no
```
再起動をして設定を反映させます。
```
sudo reboot
```

## 2. SSHポートの変更
SSHポートをデフォルトの22番から変更しておくことでセキュリティを向上させることができます。

参考: https://dream.jp/vps/support/manual/mnl_security_03.html

`/etc/ssh/sshd_config`に以下を追記します。
```
Port {ポート番号}
```
ポート番号は1024以上の番号にしましょう。

最後にメインPCの`~/.ssh/config`でポート番号を指定します。
```~/.ssh/config
Host {サーバー名}
    User ...
    IdentityFile ...
    HostName ...
    Port {指定したポート番号} (←new!)
```

## 3. ファイアウォールの設定
サーバー側で以下のコマンドを実行します。
```
sudo ufw allow {SSHのポート番号}
sudo ufw enable
```

## 4. クラウドフレアトンネルの設定
### 4-1. サーバー側の設定
こちらのドキュメントに従って進めていきます。

https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/use-cases/ssh/

1. cloudflareのコンソールにログイン
1. 「Zero Trust」→「Access」→「Tunnels」でトンネルの設定へ行き、「Create a tunnel」を選択
1. 表示されたコマンドをサーバー側で実行
1. 「Public Hostname」からドメインを選択。**Service**はSSHを選択して`localhost:{SSHのポート}`を指定する
    - 指定したホスト名は後で使うのでメモっておきましょう

### 4-2. クライアント側の設定
こちらのドキュメントに従って設定をしていきます。

https://developers.cloudflare.com/cloudflare-one/connections/connect-devices/warp/deployment/manual-deployment/

まずはこちら↓のリンクからcloudflareのアプリをインストールします。

https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/

インストールが終わったら`where cloudflared`で実行ファイルへのパスを確認します。
```
$ which cloudflared
/usr/bin/cloudflared (環境によって結果は異なります)
```

`~/.ssh/config`の設定を以下のように修正します
```~/.ssh/config
Host {サーバー名}
    User ...
    IdentityFile ...
    Port ...
    ProxyCommand {先程確認したパス} access ssh --hostname {cloudflareで指定したホスト名}
```

これで`ssh {サーバー名}`とコマンドを実行するとサーバーにログインができるはずです。

## おわりに
今回はcloudflare経由でサーバーにログインができるようにしました。これで自宅以外の場所からでもサーバーにアクセスできるようになりました。
次回は自宅サーバー上でWebサーバーを立てて公開できるようにしようと思います。

## 参考資料

https://dream.jp/vps/support/manual/mnl_security_03.html

https://qiita.com/kazokmr/items/754169cfa996b24fcbf5

https://akkyorz.hatenablog.com/entry/2022/12/15/012728

https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/use-cases/ssh/

https://developers.cloudflare.com/cloudflare-one/connections/connect-devices/warp/deployment/manual-deployment/
Webアプリを初めてデプロイするまでにやったこと

# 概要
- どうやったらWEB上に公開できるのかよく分かっていない筆者が、可能な限りハードルを下げつつデプロイするまでにやったことを記す
- 全体の流れについて記述しており、詳細手順の説明は省いている
- 初期費用は 1,000円程度（のはず）

# 使用技術・環境・言語・ツール等
- サーバー
    - Amazon Lightsail
- OS
    - Ubuntu 20.04.6 LTS
- 言語
    - Java 17（Amazon Corretto 17）
- フレームワーク
    - Spring Boot 3.0.11


<details><summary>その他色々</summary><div>

- データベース
    - H2 Database
- AWS
    - Amazon Route 53
- ブラウザ
    - Google Chrome
- バージョン管理ツール
    - Github
- IDE
    - IntelliJ IDEA
- Maven
- JUnit
- Bootstrap

</div></details>


# アプリ作成
- Spring Boot を使用して実行可能なJarを作成する

# インスタンス作成
- Amazon Lightsail でOSのみを選択してインスタンスを作成する
- 最低 $3.5なので、毎月500円程の費用がかかる計算

# アプリの配置
- SSHを使用してインスタンスに接続する
- 作成したJarファイルを配置する

# 静的IP取得
- Amazon Lightsail の画面上で静的IPアドレスを作成して、インスタンスへ割り当てる

# ドメイン取得
- Amazon Lightsail の画面上からドメインを登録する
- 一番安いもので $3.00 の費用がかかった
- ドメインに静的IPを割り当てる

# デーモン化
- Jarを実行して常駐させるためにはデーモン化という作業が必要らしい
- `systemctl start hoge`のようにコマンドを打つと起動できる状態にした

# HTTPS対応
- 今どきはHTTPS対応しているのが普通らしい
    - HTTPのままではブラウザで警告が出てしまう
- Certbot というツールとLet's Encryptを利用することでHTTPS化することができた

# ポート転送
- 443番ポートへのアクセスが来るが、アプリは443番ポートで動かしてないため表示できない状態だった
- iptablesコマンドで転送設定することによって解決した

# アプリ起動～画面表示確認
- アプリを起動した後に、`https://ドメイン名/`をブラウザで開いて画面表示できることを確認した

# やらなかったこと
- セキュリティ考慮
- ユーザへの価値提供
- あるべき姿の追求
JavaScript アロー関数について

JavaScriptのアロー関数について、初心者の頃の僕に教えるつもりでまとめてみました。

前提として…

「関数」ってなんだろう？？

関数…初心者の方が一番最初につまずく概念だと思います。

これを私なりにひと言で言ってしまうとするならば…

<h2>見本の式<h2>

じゃないかなぁと思います。

例えば、車を販売するプログラムを作るとします。

その時、車はエンジンの大きさや種類、色、タイヤの大きさ等々…

車体番号も含めて全く同じものは二つとしてありません。

その時、一つ一つ車のエンジン情報、色の情報などを毎回設定して計算していたら大変な時間がかかります。

そんなときに使えるのが、見本（関数）です。

（車＋色＋エンジン）×（消費税）のような式をあらかじめ設定しておけば、

お客さんとの商談の時にこの式を使って計算すればすぐに見積もりが出せます。

```
let car_calucurate = (engine, color, brake) = > {
console.log((engine + color + brake) * 0.1);
}
```

上記のようにアロー関数を使って例を用意しておいて…

お客さんとの商談の際に、
```
car_calucurate(engine, color, brake);
```

と出力することですぐに商談が開始できます。

ちなみに、使うときのengine, color, brakeにはお客様の選んだものを入力します。
Firebase FunctionsとGatsbyのCORS問題

Gatsbyで作った静的サイトでのお問い合わせフォーム送信にFirebase Functionsを用いて実装した際に、CORSエラーが出て無駄に詰まったので、解決策を残しておこうと思います。

## 結論
以下のどちらかで解決するはずです。
- レスポンスに`set('Access-Control-Allow-Origin', '*')`をセットする
- ブラウザのキャッシュをクリアする

軽く解説しておきます。

### 手段1：レスポンスに`set('Access-Control-Allow-Origin', '*')`をセットする
詳しくは[こちら](https://nipo-plus-doc.sndbox.jp/tech/cors-error/
)の記事をご参考いただきたいのですが、結論的には以下のようにすると良いみたいです。（Firebase functions側）

```typescript
export const send = onRequest(async(req, res) => {
  res.set('Access-Control-Allow-Origin', '*')
  // 他の処理
})
```

### 手段2：ブラウザのキャッシュをクリア
各ブラウザの設定からキャッシュをクリアしてください。

自分の場合は、手段１を実行しても解決せず、なぜ解決しないのか途方に暮れていましたが、ブラウザを変えたらすんなりCORSエラーが消えていたので、そういうことかと。


## まとめ
GatsbyとFirebase Hostingのサイト、キャッシュのせいで何かと深みにハマるので、気をつけたいところです。

以前にも別のことで詰まり、結局キャッシュだったってことがあったので、あるあるなんですかね。。。
DockerでRailsサーバーが一瞬で落ちる件について（対処法）

最近Dockerを使うようになったよしはるです。今日はDockerのコンテナを起動したまま再起動（まぁ...ぶち切りですね笑）をしてしまったので、新たにコンテナを起動してもRailsサーバーが一瞬で落ちてしまうようになってしまいました。

結構解決に時間がかかったので、もし同じような感じで悩んでいる人がいたら参考にしてくださいね！！

## エラーの内容
dockerデスクトップで確認したら...
```docker: error message
2023-10-21 18:51:56 rails-web-1  | Exiting
2023-10-21 18:52:06 rails-web-1  | => Booting Puma
2023-10-21 18:52:06 rails-web-1  | => Rails 7.0.8 application starting in development 
2023-10-21 18:52:06 rails-web-1  | => Run `bin/rails server --help` for more startup options
2023-10-21 18:52:06 rails-web-1  | A server is already running. Check /samplerails/tmp/pids/server.pid.
```
こんな感じのエラーが出てしまった（もうちょっとあったんですが、消えてしまいました）
要するにすでにrailsサーバは起動してるから、こっちは消しとくねという内容です。
ちなみに、dbのコンテナは起動できるって感じですね。

もしよかったら、以下のコードを実行してください。
```bash:
cat tmp/pids/server.pid
```
そしたら、以下のような結果が返ってきたら、僕と同じところでつまづいてますね。
```bash:
1%  
```
こちらは1だけでも多分僕と同じですよ〜

## このエラーを解決した方法
結論、以下のコマンドを実行するだけです。
```bash:
rm tmp/pids/server.pid
```

ぶち切りしてしまったので、上記のtmp/pids/server.pidファイルが残ったままだったんですよね。
```docker:
docker compose down
```
を実行しても消えなかったので、エラーコードにもあるようにA server is already running.(すでに起動しているな）と落ちてしまうわけですね。

この記事が皆さんの役に立てれば嬉しいです！！
Ubuntu22にElixirをインストール(asdfで)

# 参考
https://asdf-vm.com/guide/getting-started.html#_1-install-dependencies

# 困ったこと

Elixirをインストールする際に、毎回検索して入れ方を探している。

# 原因

ちゃんとメモっておかないから

# 対応

ここにコマンドをメモっておく


必要なパッケージをインストールする
> sudo apt install -y libssl-dev make automake autoconf libncurses5-dev g++ gcc curl git

asdfをgit clone してくる（今回はv0.13.1　versionはgitで確認して最新入れる）
> git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.13.1

`~/.bashrc`にasdfを追記
> ASDF_DIR=$HOME/.asdf
> . "$HOME/.asdf/asdf.sh"
> . "$HOME/.asdf/completions/asdf.bash"

> source ~/.bashrc


Plug-inを追加する
> asdf plugin add erlang
> asdf plugin add elixir


erlangのインストールできるversionを確認する
> asdf list-all erlang

erlangをインストールする
> asdf install erlang 26.1.2

Elixirのインストールできるversionを確認する
> asdf list-all elixir


Elixirをインストールする
> asdf install elixir 1.15.7-otp-26


asdfの標準利用に設定する
> asdf global erlang 26.1.2
> asdf global elixir 1.15.7-otp-26

asdfで利用する現在のversionを確認する
> asdf current

確認する
> $ iex
> Erlang/OTP 26 [erts-14.1.1] [source] [64-bit] [smp:24:24] [ds:24:24:10] [async-threads:1] [jit:ns]
> 
> Interactive Elixir (1.15.7) - press Ctrl+C to exit (type h() ENTER for help)
> iex(1)>
Javaのネストしたクラスについての備忘録

## はじめに
Javaのネストしたクラスについて勉強したのでまとめてみた。
Javaにはクラス内にクラスを定義することができ、ネストしたクラスと呼ぶ。ネストしたクラスには次の種類がある。

・インナークラス（非static）
・staticインナークラス
・ローカルクラス
・匿名クラス
### インナークラス（非static）
・外部クラス（エンクロージングクラス）のフィールドやメソッドにアクセスできる。
・エンクロージングクラスのインスタンスからインスタンス生成が可能。
```OuterClass.java
public class OuterClass {
    private String hoge = "hoge";
    public class InnerClass {
        public void test(){
            System.out.println(hoge);
        }
    }
}
```
```Main.java
public class Main {
    public static void main(String[] args) throws Exception {
        // 外部クラス（エンクロージングクラス）のインスタンス生成
        OuterClass oc = new OuterClass();
        // インナークラス（非static）のインスタンス生成
        OuterClass.InnerClass ic = oc.new InnerClass();
        ic.test();
        // まとめて書くことも可能
        // OuterClass.InnerClass ic2 = new OuterClass().new InnerClass();
    }
}
// 実行結果
// hoge
```
### staticインナークラス
・エンクロージングクラスの非staticなフィールドやメソッドにアクセスできない。
・エンクロージングクラスのインスタンスなしでインスタンス生成できる。
```OuterClass.java
public class OuterClass {
    private String hoge = "hoge";
    private static String fuga = "fuga";
    public static class InnerClass {
        public void test(){
            // System.out.println(hoge); //コンパイルエラー
            System.out.println(fuga);
        }
    }
}
```
```Main.java
public class Main {
    public static void main(String[] args) throws Exception {
        // staticインナークラスのインスタンス生成
        OuterClass.InnerClass ic = new OuterClass.InnerClass();
        ic.test();
    }
}
// 実行結果
// fuga
```
### ローカルクラス
・メソッド内に定義する。他のメソッドからアクセスできない。
・参照するローカル変数は実質的finalでなければならない
```OuterClass.java
public class OuterClass {
    public void test(){
        final String message = "hello";
        class LocalClass {
           public void localTest(){
                System.out.println(message);
            }
        }
        // ローカルクラスのインスタンス生成
        LocalClass lc = new LocalClass();
        lc.localTest();
    }
}
```
```Main.java
public class Main {
    public static void main(String[] args) throws Exception {
        OuterClass oc = new OuterClass();
        oc.test();
    }
}
// 実行結果
// hello
```
### 匿名クラス
・クラス名がないためコンストラクタは定義できない。初期化したい場合は初期化子({})を使う。
・インスタンス生成するときにフィールドやメソッドを定義できる。
```Test.java
public interface Test {
    void testMethod();
}
```
```Main.java
public class Main {
    public static void main(String[] args) throws Exception {
    Test test = new Test(){
        // 匿名クラス
        @Override
        public void testMethod(){
        System.out.println("testMethod実行");
        }
    };
    test.testMethod();
 }
}
// 実行結果
// testMethod実行
```
Pygameド素人がRPGを作る　レベル1

次回→https://qiita.com/Red-Jersey/items/cf28a8821a8fab17b7cb
## 勇者の旅立ち
こんにちは。赤ジャージです。
唐突ですが、僕がプログラミングを始めた時からなんとなーくpygameでRPG作りたいなーと思ってました。そこで、本当に作ってみよう、というのが今回の趣旨です。
### この冒険(投稿)の意味
今の時代、このようなスレッドや投稿は、満ち溢れています。私がこれを投稿したとして、社会に対して何の意味もありません。しかし、学業をかなぐり捨てた不毛な学生生活の僅かばかりの成果として、見える形で記録に残しておきたいという**自らの願望**、これを満たすために書いていきます...

# スペック(前提)
・一応pythonに関する知識はある。
・pygameに関する知識が全くない(という設定)
・RPGを作りたいけどどうやったらいいか**全く**わからない

# What do I do ?
RPGは、数々のゲームの中で最も製作難易度の高いジャンルの一つです(他にも格ゲーとか3Dゲームとか...)。そのため、いくつかの手順を踏む必要があります。そのいくつかの手順を考える前にしばらくはpygameの機能の確認をしておきましょう。

## ウィンドウの表示
いきなり難関です。初心者の心を折りに来ている。きっとRPGを作ろうとした多くの冒険者が、最初の門の難しさに挫折し、そのウィンドウを閉じたでしょう。序盤のダンジョンが難しすぎて諦めるアレです。しかし、しつこく粘って理解しようとすれば意外と簡単です。この投稿で分からなければ他の数百倍わかりやすい所へどうz(殴

```python:ウィンドウの表示
# coding: utf-8
import pygame
import sys

pygame.init()
screen = pygame.display.set_mode((640, 480))
pygame.display.set_caption("ウィンドウの作成")
 
while True:
    screen.fill((0,0,0))
    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()
    pygame.display.update()
```
このコードを実行すると、このようになります。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3367669/44b13ade-1005-8a75-3a0f-eb6c5a36385e.png)

これが、pygameを使う上での基本的なコードになります。
まず、pygameを初期化し、Surfaceオブジェクトを作成、タイトルをセットする。そしてゲームループの中で様々な処理を行い、Surfaceオブジェクトを表示するという一連の流れになっています。

## 関数、変数、キーワードの解説
・`pygame.init()`: pygameを初期化します。
・`screen`: pygame上では、Surfaceオブジェクトのことを`screen`と表記するのが一般的です。
・`pygame.display.set_mode((640,480))`: この関数で、Surfaceオブジェクトを作成します。引数の`(640,480)`は`screen`の大きさを指します。
・`while True:`: ゲームループの処理を行います。pygameでは、ループ処理をすることによって1フレームごとに処理を行います。(パラパラ漫画みたいなイメージ)
・`screen.fill((0,0,0))`: 画面を引数の色で塗りつぶします。これはRGBで表記し、この場合`(0,0,0)`なので黒色です。
・`for event in pygame.event.get():`: イベント(何らかの入力)があるか調べます。これが、pygameの肝です。
・`if event type == QUIT:`: quitボタン(windowsでは右上の×ボタン)が押されたかどうか判定します。`event.type`とはイベントの種類を指します。
・`pygame.quit()`: pygameの機能を中止します。
・`sys.exit()`sysライブラリは、pygameのウィンドウ表示に関する制御を行っています。この`sys.exit()`の場合、ウィンドウを閉じます。
・`pygame.display.update()`: ウィンドウを更新し、表示します。pygameでは、ゲームループで行った処理を`screen`に表示し、それをウィンドウに貼り付け、最後にウィンドウを表示するという処理がなされています。`display`というのはウィンドウのことです。

# まとめ
処理の流れとしては、
**プレイヤーがゲームを起動する。
スクリーンを作る、変数を入手する
A(While True)
イベントがあるか判定する
処理を行う
ウィンドウを更新する
Aに戻る**
という流れになっています。

# Result
pygameって煩雑で分かりにくく奥が深い。疲れました。おそらく機能の確認は長くなりますが、それまで耐えてください。**まずは武器調達です。** 武器がなければ、戦えません。覚えましょう。まあ覚えることは**そんなにない**(当社比)ので安心してください！
テスト原因分析の考え方

## 直接原因
何が誤っていたのか
## 根本原因
設計で間違えたのか、どの工程の設計で間違えたか、試験でなぜすり抜けたのか、何工程の試験で間違えたか、どの観点が抜けていたかを追求する
## 発生箇所に詳しい人に確認したか
自分だけでなく、有識者に確認することでより精度の高い原因分析が可能になる
ex)
SIテストの異常系で下記のインシデントが発生
事象：A変数に値を受け渡すタイミングが誤っていたため、異常終了する場面で発生しなかった
直接原因：コードの誤り
根本原因：製造者の仕様書理解不足
【初学者・GitHub】草がかなり生い茂ってきたので改めて継続できる方法を考えてみた

# はじめに
学習をはじめてから、かなり草が生い茂ってきたので改めて継続できる方法を考えてみました。

![スクリーンショット 2023-11-18 12.47.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517817/8b9cd292-6552-f2d8-1df1-2a22ecb68601.png)


# そもそも「草を生やす」って何？

> GitHubの草とはGitHubのコントリビューションのことです。 コントリビューションとはGitHub上での行動履歴のことで、GitHubを活発に使用するとこの行動履歴の緑色が濃くなり、コントリビューションを反映させることを「草を生やす」と言います。

https://meister-kentei.jp/magazine/programming/4885/#:~:text=%E3%81%A8%E6%80%9D%E3%81%84%E3%81%BE%E3%81%99%E3%80%82-,GitHub%E3%81%AE%E8%8D%89%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B,%E3%82%92%E7%94%9F%E3%82%84%E3%81%99%E3%80%8D%E3%81%A8%E8%A8%80%E3%81%84%E3%81%BE%E3%81%99%E3%80%82

`GitHub`をたくさん活用しているという証で、**就職活動**で見られるポイントの一つでもあるそうです。



# ★☆☆ / TILを書く
`TIL`とは**Today I Learned**の略称で、今日学んだことをテキストでアウトプットする、いわば**日報**です。

**アプリ開発はまだ難しいけど、毎日草を生やしたい**という方におすすめです。



https://www.asobou.co.jp/blog/web/github-til

https://blogs.lisb.direct/entry/2016-03-28-100000




# ★★☆ / projectを活用する
`GitHub`には、カンバン形式でタスク管理ができる**project**という機能があります。アプリ開発のTodo管理はもちろんのこと、日常生活のTodo管理も**project**で行うことで、より活用しやすくなります。
この記事がとても参考になるので、ぜひ見て下さい。

https://qiita.com/haganenoubik/items/55700919e2e5b127e166




# ★★☆ / Qiita CLI or Zenn CLIを活用する
エディタ上で記事を書きながら、`GitHub`のリポジトリと連携することで、`push`時に草も生える様になります。
記事を書くこと自体がアプトプットにもなりますし、**Git操作**の練習にもなるので個人的におすすめな方法です。

https://qiita.com/Qiita/items/32c79014509987541130

https://zenn.dev/zenn/articles/connect-to-github





# ★★★ / アプリ開発をする
アプリ開発を始める、ブランチを切る、`add`、`commit`、`push`をする、`main`ブランチに`merge`する、という一番自然な流れで`GitHub`を活用しながら、草を生やすことができます。少し初学者にとってはハードルが高いですが、**Gitコマンド**や**プルリクエスト**の練習にもなりますし、学習が進んできたら試してみてください。



https://backlog.com/ja/git-tutorial/

https://prog-8.com/courses/git

https://qiita.com/yukiya1006/items/4a491df3595662d8f781

# おわりに
`GitHub`をもっと活用できる様にしたいです！
ありがとうございました！
ngModel 使い方

今回は現場でフロント開発を担当しており、その際に利用して興味を持った、ngModelに関して、まとめていきたいと思います。

## ngModelとは

ngModelを利用することで、プロパティを双方向（HTML ↔ TypeScript）でバインディングできる。

HTMLのフォームの要素である、　input　や　select　などの入力や選択を伴う操作は、
画面での入力が内部のTypeScriptのコードに反映させたり、
TypeScriptの処理で取得してきた文字や値を画面に反させたいような場合があります。
そのような場合に　ngModel　を使用して、画面と内部処理の双方向で値を扱うことができます。

## プロジェクトの準備

まずはAngularを使用できるようにするところから・・・
以下のコマンドでAngularをインストールすることができます。

```console
$npm install -g @angular/cli
```

Angularのインストールが完了したら、次はプロジェクトを立ち上げていきます。

```console
// new以降で、作成したプロジェクト名を指定します
$ng new ngModel-sample

// 以下から、プロジェクトの作成にあたり、オプションを聞かれています
// こちらはAngular上でrouting機能を実装するかどうかを聞かれています
? Would you like to add Angular routing? (y/N)

// 次にスタイルシートのテンプレートエンジンを選択します
❯ CSS 
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ]  

// この後に色々と必要な資材を作成してくれます

// そして以下の文言が表示されれば、プロジェクトの作成は完了です！
✔ Packages installed successfully.
    Successfully initialized git.
```

プロジェクトの作成が完了したら、簡単なngModelを使用したプログラムを作成していきます。

## app.module.ts

ngModel は angular/forms の FormsModule に含まれています。
そのため、まずは FormsModule をインポートします。


```typescript:/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// こちらを追加
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // こちらを追加
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

## app.component.html

次は、画面上で名前を入力するテキストボックスと、
入力された名前が反映される、 ngModel を使用したhtmlファイルを編集していきます。

```html:/src/app/app.component.html
<div>
  <!-- インプットタイプをテキストボックにし、入力された値を変数 name として受け取る -->
  <input type="text" [(ngModel)]="name">
</div>
<div>
  <!-- {{name}} に入力された値が反映される -->
  <p>あなたのお名前は {{name}} さん</p>
</div>
```

## app.component.ts

htmlファイルで入力された名前を、 name として扱うように設定しました。
ngModel で双方向バインディングとして扱うため、JavaScriptファイル側でも、
name をどのように扱うかを定義していきます。
今回は、 name = ' '; として初期表示状態では空欄になるように設定していきます。

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngModel-sample';
  // こちらを追加
  name = ' ';
}
```

## まとめ

ngModel の使い方と簡単な実装の紹介をさせていただきました。
実装自体はとても単純なものですが、便利な機能ですので忘れずに覚えておき、
実践でもしっかりと使いこなせるようにしていきたいと思います。
テストでよく使用するLinux コマンド

## 異常系試験時に使用するコマンド
chmod: 権限変更
ex) chmod 000 .tsv
rm:ディレクトリ削除
ex)rm -rf file1
オプション
-r: ディレクトリの中身ごと削除する
-f:確認を飛ばす
mkdir:ディレクトリ作成
ex)mkdir file1
### vi:テキストエディタを操作する
ex) vi シェルスクリプト名
i:入力可能な状態に遷移
escキー：ノーマルモードに遷移
:q!保存せず終了
:wq 保存して終了
exit：強制終了
ex)exit 1 終了ステータス1を返して終了

## テーブル一斉入れ替え
### 指定したサイズ以上のファイルのサイズを0にする
xxx = find . -type f -name '*.tsv' -size +1c
truncate $xxx --size 0
### 用意したデータに入れ替える
copy 用意したファイル $xxx

##　希望の文字列が含まれているファイルを見つける
find . type f -name '*txt' | xargs grep '検索文字列' 

## 階層ディレクトリ作成
mkdir -p ふぁいるめ
フロントエンド開発用にAPIスタブサーバーをDockerで立てる

## 悩み

フロントエンドの開発をする中で、APIのリリースを待っていられないのでモックを立てたり擬似サーバーを立てたりすると思います。
今回は、その一例として簡易的にDockerでスタブを構築してみました。

## ファイル構造
```
.
├── data/ # スタブデータを格納するフォルダ
├── Dockerfile
├── README.md
├── docker-compose.yaml
├── package.json
└── server.js
```

## 完成系のリポジトリ

https://github.com/Kurogoma939/stub-server

## 使い方
### 準備： リポジトリのクローン
まずはクローンして作業環境の用意をします。
```bash
git clone https://github.com/Kurogoma939/stub-server.git
```

### 1. dataフォルダ配下にファイルパスに応じたファイルを作る
例えば、エンドポイントが`/users/list/`の場合、`data`フォルダには`users-list.json`を作成してください。
練習として`data`フォルダの中に`hello.json`を作成してください。

### 2. 欲しいjsonファイルを格納する
次に、作成した`hello.json`を以下のようにしましょう
```json: hello.json
{
    "data": {
        "message": "Hello World"
    }
}
```

### 3. dockerコンテナを立ち上げる
以下のコマンドでコンテナを立ち上げましょう
```bash
docker-compose up --build -d
```

### 4. 動作確認
では実際にスタブサーバーが機能しているか確認しましょう。
Google Chromeの拡張機能である`Talend API Tester`を導入しましょう

https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm?hl=ja

立ち上げると以下のようになっていると思います

![Screenshot 2023-10-21 17.22.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/735195/cb570498-4d48-bc0f-dcf1-dc12646c3c3b.png)

このURLに、`http://localhost:3003/hello`を入力し、Sendボタンをクリックしてください。
そうすると、以下のように結果を取得することができると思います。

![Screenshot 2023-10-21 17.23.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/735195/7c7b0a4d-ce01-a4aa-7602-b6df5f4af05a.png)




## ファイルの中身
今回は、expressを使いながら実現しました。
細かい設定をしたい方はここらへんをいじっていただければと思います。

```js: server.js
const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();
const dataDirectory = path.join(__dirname, 'data');

app.use(express.json());  // POST リクエストのボディを解析するために必要

// 共通の関数でファイルを読み込む
const handleRequest = (req, res) => {
    // エンドポイントのスラッシュをハイフンに置換し、.json拡張子を追加
    const fileName = req.path.replace(/\//g, '-').substring(1) + '.json';
    const filePath = path.join(dataDirectory, fileName);
    
    fs.readFile(filePath, 'utf8', (err, data) => {
        if (err) {
            return res.status(404).send('File not found');
        }
        res.setHeader('Content-Type', 'application/json');
        res.send(data);
    });
};

// REST APIのエンドポイントを定義
app.get('*', handleRequest);
app.post('*', handleRequest);
app.put('*', handleRequest);
app.delete('*', handleRequest);

const PORT = process.env.PORT || 3003;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});
```
Bundlerとは

## はじめに
いまさらながらBundlerについて整理してみた。

## なぜ必要か？
- プロジェクトにおいて、様々な機能を実現したい。
  - 様々な機能を実現するために、何がしかのプログラミング言語を選定し、実装する。
  - 様々な機能を実現するために、みんなが一から作る必要はなく、先人たちが既に開発し、インストールすれば使えるライブラリというものがある。
  - Rubyでは、（他の言語と同様に）多くのライブラリが存在する。
  - Gemという、Rubyライブラリやアプリケーションをパッケージ化し、簡単に共有・インストールできるようにするための仕組みがある。
  - RubyGemsと呼ばれるGemのコマンドラインツールを使用して、gemのインストール、アンインストール、更新を行うことができる。
  - Gemは、他のGemが存在しないと使えないものもある。（＝直接的な依存関係）
  - 他のGemが、同じようにまた他のGemが存在しないと使えないということもある。（＝間接的な依存関係）
  - その依存関係には、Gemの"特定のバージョンでしか使用できない"という制約も存在する（＝バージョン制約）
- プロジェクトにおいて、多くのライブラリを使用しようとすると、依存関係や制約を”人力で管理するのは面倒"である。
- そこで、依存関係や制約を管理するツール（＝パッケージ管理ツール）が"Bundler＂である。


## Bundlerのインストール

```zsh
$ gem install bundler
```
Bundlerは、Gemではなく、ユーティリティツールらしいのだが、RubyGemsのコマンドでinstallできる。

ちなみに、
```zsh
$ brew install bundler
```
でもインストールできるのだが、以下のような違いがある。
```
$ gem install bundler → 特定のRuby環境（プロジェクト）にのみインストールされ、そのプロジェクト内でのみ利用可能
$ brew install bundler → システム全体にインストールされ、どのプロジェクトでも利用可能
```

## 使い方

### 1. 設定ファイルを作成

```zsh
$ bundle init
```

### 2. 設定ファイルを編集する
使いたいライブラリをよしなに記載する。

### 3. （設定ファイルを元に）Gemをインストール
```zsh
$ bundle install
```

## ちなみに
Dockerを使用していると、Bundlerをインストールした記憶がないのに、bundle installできるのは、そもそもRubyプロジェクトのイメージにBundlerのインストールが書いてあるおかげ。
【最新Xcode15】アプリ名の多言語対応

# はじめに
Xcode 15から**String Catalog**という新しいローカライズ方式が推奨されるようになりました。
本記事では、Info.plistに格納されている、アプリ名のローカライズ方法を説明します。

# プロジェクトに言語を追加
対応したい言語を「＋」ボタンで追加します。本記事では日本語を追加しました。
![312B18EB-DEEE-4DF7-8785-711488670150_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566752/08115ce5-fbc0-0242-75f7-6142626c94ae.jpeg)

# デフォルトのアプリ名を設定
Defaultとして設定してある、英語のアプリ名を入力します。
![6C07C8B2-E53E-4831-825A-3A7A8AC0AACD_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566752/fd51dd34-3347-4192-29a3-5fb98ca9b6d6.jpeg)

# ターゲットにInfoPlist.xcstringsを追加
ターゲットを選択して、⌘+NでString Catalogを選択します。
![C7394043-32FA-4FF0-9D14-0DA5B33F7E7A_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566752/658c5f00-dea1-f24c-cc97-9fe721267b9f.jpeg)
名前を`InfoPlist`にして、Createを押します。
![506ABFC7-3586-4644-BCE5-D962617E1DB8_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566752/71b62ec4-341f-abc4-05d4-4fb2fcad3862.jpeg)

# ビルドする
⌘+Bでビルドします。
![FEBC2ACC-B15D-4D93-95F1-4AF2522F7A50_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566752/1bbb5dfb-dbac-c256-20f0-5006e4cce3f0.jpeg)
ビルドすると、InfoPlist.xcstringsが更新されます。
![58AE6065-BFCA-42CC-9E3B-7E5A2E659642_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566752/d930de18-e5f1-f5d7-5b2f-b12a70727d68.jpeg)

# 日本語のアプリ名を設定
`CFBundleDisplayName`に、翻訳されたアプリ名を入力すれば完了です。
![24464B5F-435A-48FE-A569-15E5EFA22729_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566752/4851caac-6172-0070-4055-ab2a41abb150.jpeg)

# 参考
https://betterprogramming.pub/xcode-15-welcome-string-catalogs-fed937e64546
【Blender×Python】Pythonで作成したコードでメッシュの頂点を移動させる方法

# 背景
- Pythonでメッシュを3Dビューポートに追加する方法が知りたい方
- Pythonで書いたコードで頂点を移動させたい方
- 角柱のメッシュの作り方が知りたい方
- タイトルに興味を持ってくださった方

# 実行環境
- Blender 3.4
- Python 3.11.5

# コード
### ◆前提（初期状態）
:::note info
前提として、3Dビューウィンドウに何もメッシュがない事を想定しています。
重なると分かりにくいので、メッシュがある方は消去した方が分かりやすいと思います。
:::

・初期状態のイメージ画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/ecee2634-5f54-748f-feae-e304c19b0005.png)


### 1. コードを書く準備
**Scripting**をクリックします。
**新規**(**New**)をクリックし、コードを書くためのテキストエディタを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/8e5eb439-988f-83ce-e4ac-b78b04143f7f.png)


### 2. メッシュの追加
以下のコードで10角柱を3Dビューポートに追加します。
パラメーターの意味に関しては[こちら](https://docs.blender.org/api/current/bpy.ops.mesh.html#bpy.ops.mesh.primitive_cone_add)が参考になります。

```python
import bpy
import bmesh

# メッシュ追加
bpy.ops.mesh.primitive_cone_add(location=(0,0,0),vertices=10,radius1=1.5,
radius2=1,depth=5, rotation=(0, 0, 0))
```

上記のコードが書けたら画右上の「▶」をボタンをクリックし実行します。
実行すると以下の画像のように10角柱が3Dビューポートに表示されます。

・実行結果画像
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/d880ae78-8376-a10f-794c-09de95f055af.png)

### 3. メッシュの頂点の移動
続いて以下のコードを実行します。
(**2. メッシュの追加**の上記コードを実行されてる方は3Dビューポート内の10角柱を消去してから以下のコードを実行した方がメッシュが重ならずに分かりやすいと思います。)


```python
import bpy
import bmesh

# メッシュ追加
bpy.ops.mesh.primitive_cone_add(location=(0,0,0),vertices=10,radius1=1.5,
radius2=1,depth=5, rotation=(0, 0, 0))

# 編集モード
bpy.ops.object.mode_set(mode='EDIT')
# メッシュを非選択状態
bpy.ops.mesh.select_all(action='DESELECT')

b_mesh = bmesh.from_edit_mesh(bpy.context.object.data)
b_mesh.verts.ensure_lookup_table()

# indexが0の頂点をx軸方向に移動
vert = b_mesh.verts[0]
vert.co.x += 1.0
```
以下の部分のコードでメッシュの頂点のうちindexが0の番号の頂点をx軸方向に移動させています。
index番号を変更すれば別の頂点も移動する事ができます。
```python
# indexが0の頂点をx軸方向に移動
vert = b_mesh.verts[0]
vert.co.x += 1.0
```
・実行結果画像
赤枠部分の頂点（index番号0）の頂点が移動している事が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/2b0f028f-e122-766a-1276-db30b1942c23.png)

# 参考
- https://zenn.dev/hotcocoa/articles/5c5ab06c40862b
- https://docs.blender.org/api/current/bpy.ops.mesh.html#bpy.ops.mesh.primitive_cone_add
- https://docs.blender.org/api/current/bmesh.types.html#bmesh.types.BMesh.verts
- https://docs.blender.org/api/current/bmesh.html#bmesh.from_edit_mesh
switch文は見やすさのためだけじゃなくて、二分探索でコンパイラの最適化を図る場合もあったし、上から順に実行されるとは限らない？

## 経緯
リファクタリング中に私がswitch文を書き換えたのを見て、無口な先輩がすっ飛んできました。
「Switch文って何のために書いてる？」

## switch文の狙い
無口な先輩曰く、switch文には複数のif文を見やすくする利点と、設定によっては二分探索を用いてコンパイラの最適化を図る利点があるらしい。
例えば以下のコードがある。

```C#:before.cs
switch (a_int)
{
    case 1:
        // 処理1
        break;
    case 2:
        // 処理2
        break;
    case 3:
        // 処理3
        break;
    case 4:
        // 処理4
        break;
    case 5:
        // 処理5
        break;
    default:
        break;
}
```

これをコンパイラが最適化のために二分探索を用いて書き換えると、以下のようになるらしい。

```C#:after.cs
if (x <= 3){
    if (x <= 2){
        if (x == 1){
            // 処理1
        }
        if (x == 2){
            // 処理2
        }
    }else{
        if (x == 3){
            // 処理3
        }
    }
}else{
    if (x == 4){
        // 処理4
    }
    if (x == 5){
        // 処理5
    }
}
```

## まとめ
switch文の条件は上から検討されるとは限らず、caseは条件を満たすよう十分に設置する必要がある。
前の [Round関数が四捨五入か銀行丸かの件](https://qiita.com/yuzukami1/items/e9a8bb7a0cd43dcfe616) もそうですが、無口な先輩、よく知ってますよね。自分もいっぱい知りたい。

## 参考
- [C#のswitch文のコンパイラ最適化について](https://engineering.grani.jp/entry/2017/02/20/175816)
openxpkiをdockerで動かした際にI18N_OPENXPKI_UI_APPLICATION_ERRORが出る問題



# 問題

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283091/5445ebe5-ba46-7e59-e971-19e18825ae4d.png)

WebUIの言語を日本語に設定すると`I18N_OPENXPKI_UI_APPLICATION_ERROR`が表示される。

```openxpki-config/webui/default.conf
...
locale_directory: /usr/share/locale/
# default_language: en_US <-- デフォルト(コメントアウト)
default_language: ja_JP   <-- 追加

[logger]
...
```

# 原因

openxpki3に日本語のロケールが入っていない

# 解決

1. 日本語のロケールを追加するDockerfileを作成

    ```Dockerfile
    FROM whiterabbitsecurity/openxpki3
    
    RUN rm /etc/locale.gen && \
        (for lang in "en_US" "de_DE" "ja_JP"; do echo "$lang.UTF-8 UTF-8" >> /etc/locale.gen; done) && \
        dpkg-reconfigure --frontend=noninteractive locales
    ```

2. docker-compose.ymlで使用するdocker imageを修正

    ```docker-compose.yml
    ...
      openxpki-server:
    #    restart: always
        # image: whiterabbitsecurity/openxpki3 <-- コメントアウト
        build:                                 <-- 追加
          context: .                           <-- 追加
          dockerfile: Dockerfile               <-- 追加
    　　command: /usr/bin/openxpkictl start --no-detach
    
    ...
    
      openxpki-client:
    #    restart: always
        # image: whiterabbitsecurity/openxpki3 <-- コメントアウト
        build:                                 <-- 追加
          context: .                           <-- 追加
          dockerfile: Dockerfile               <-- 追加
        command: /usr/bin/start-apache
    ```

# 参考

https://www.mail-archive.com/openxpki-users@lists.sourceforge.net/msg02399.html

https://qiita.com/kai_kou/items/eaafa3cb15e1496f50ec


# 追記

Dockerfileを修正したらdocker compose buildしましょう！

```bash
docker compose build
```
【Maven】任意のsettings.xmlを指定する方法

# やりたいこと
プロジェクトのPOMファイルと同じディレクトリにsettings.xmlを配置。maven実行時にそのsettings.xmlを使用するようにしたい。

# 方法
`-s settings.xml`をつければいいだけです。何も指定しなければデフォルトの`~/.m2/settings.xml`が用いられる。

例
```
$ mvn install -s settings.xml
```

このような組み合わせもおすすめです
```
$ mvn clean package install -Dmaven.javadoc.skip=true -Dmaven.test.skip=true -s settings.xml
```
```
$ mvn clean package deploy -Dmaven.test.skip=true -Dmaven.javadoc.skip=true -s settings.xml
```

`clean`:targetディレクトリを削除
`package`:JAR、WAR等の成果物を生成
`install`:JARをローカルリポジトリにインストール
`-Dmaven.javadoc.skip=true`:javadoc作成をスキップ
`-Dmaven.test.skip=true`:テストコードの実行をスキップ
`-s settings.xml`:任意のsettings.xmlを指定
`deploy`:生成したJARまたはWARをリモートリポジトリにデプロイ

ちなみにsettings.xmlはPOMと同じディレクトリでなくても問題ないです。その際はsettings.xmlのパスを記述します。

mavenについてはhttps://qiita.com/KevinFQ/items/e8363ad6123713815e68
に詳しく載っていました。
PG BATTLE 2023 Writeup

# PG BATTLE 2023
ましゅまろに参加しました。
結果は60/100(4問中2問正解)でした。
後半の問題の解法が思い浮かびませんでした・・・

## 目次
- 【PGBATTLE2023 ましゅまろ】コイントス(AC)
- 【PGBATTLE2023 ましゅまろ】微分(AC)
- 【PGBATTLE2023 ましゅまろ】2 進数と 10 進数(回答できてない)
- 【PGBATTLE2023 ましゅまろ】ダンス(回答できてない)
-  感想

## 【PGBATTLE2023 ましゅまろ】コイントス(AC)
問題と解答
表、裏ともに``1/2``の確率で出るコインが全て裏になる確率を求めるコイントスの問題です。

コインが``N``枚ある時、全部で``2^N``通りであることがわかります。
また、コインが全て裏になる時はコインの数に関わらず``1``通りです。
したがって、``1/(2^N)``がコインが全て裏になるときの確率です。

C++やC言語の場合``printf``で``%.10lf``と出力すると
出力例と全く同じ桁数になります。

## 【PGBATTLE2023 ましゅまろ】微分(AC)
問題と解答
``Ax^B``が与えられるので、``Ax^B``を微分した``(A✕B)x^(B-1)``を求める問題です。

文字列で受け取った際に``A``と``B``が整数として受け取れるようにします。
そのため、``x^``の左側を``A``、右側を``B``として受け取ります。
そして、``A✕B``を``A``、``B - 1``を``B``として
``A``、``x^``、``B``と出力できればACとなります。

32bit符号付き整数型に収まらないというのは、
C++やC言語のint型だとint型の限界の数値をオーバーしてしまい
WAしてしまうということです。

## 【PGBATTLE2023 ましゅまろ】2 進数と 10 進数(回答できてない)
問題
正の整数A(10進数)、B(2進数)があり、その大小関係を求める問題です。
面倒くさいことにA、Bは共に5000桁まで考えられるので
整数型では解けなさそうです。

## 【PGBATTLE2023 ましゅまろ】ダンス(回答できてない)
問題
N人の人から連続している``M``、``F``を取り除く時
全ての列から人を取り除けるのは何通りかを求める問題です。
どうやって解くかの手がかりすらつかめませんでした・・・

## 感想
前半は比較的すぐにわかったのですが後半2問が難しく
3問目でいろいろ試行錯誤して時間切れになってしまい
自分の実力不足を強く感じました。
SecurtyHubのルールはこれを有効化しよう！

# はじめに
SecurityHubを利用する際にルールが複数ありどれをえらべばよいのだろうと思ったことはありませんか？
今回は各ルールの概要と、有効化すべきルールの考え方をまとめていきます。
SecurityHub等各種サービス概要配下を御覧ください。

https://qiita.com/Regryp/items/0e402d18d1a8ad0d3057

# SecurityHubのルール
・CIS AWS Foundations
・Payment Card Industry Data Security Standard (PCI DSS)
・AWS Foundational Security Best Practices
・NIST Special Publication 800-53 Revision 5
上記４つのルールがあります。

|#  |ルール名  |概要  |
|---|---|---|
|1  |CIS AWS Foundations |セキュリティ担当者がサイバーセキュリティ防御を実装および管理するのに役立つ、世界的に認められたコンセンサス主導の一連のベストプラクティス  |
|2  |Payment Card Industry Data Security Standard (PCI DSS) |カード所有者のデータ（CHD）や機密性の高い認証データ（SAD）を保存、処理、転送するエンティティに適用されるもの  |
|3  |AWS Foundational Security Best Practices |デプロイされたアカウントとリソースがセキュリティのベストプラクティスからの逸脱を検出する一連の統制  |
|4  |NIST Special Publication 800-53 Revision 5 |一般に、米国連邦政府情報システムに適用される基準。基本的に、情報および情報システムの機密性、完全性、可用性の十分な保護を確実にするためのものであるが、部門や規模に関わらず、どの組織でも使用できる推奨ベースラインとして、世界中の政府および業界で採用されている |

参考

https://aws.amazon.com/jp/what-is/cis-benchmarks/

https://aws.amazon.com/jp/compliance/pci-dss-level-1-faqs/

https://aws.amazon.com/jp/compliance/nist/

# どれを選ぶ？
結局どれをえらべばよいのだろうと思うことかと思います。
個人的な考え方ですが、以下のフローでよいかと思います。

![スクリーンショット 2023-05-05 14.46.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584167/25c86598-04ed-5620-fadd-57d3c75380b4.png)

ポイントは、２つ、PCIDSSに準拠させる条件があれば、PCIDSSを有効化、NISTに準拠する必要があればNISTを有効化です。個人的にはNISTもあまり意識せず有効化してしまってよいかと思います。
理由としては、NISTの基準はAWS Foundational Security Best Practicesのルールを内包化しているからです。このルールプラスαがNISTのルールなので、より厳しめということであればNIST基準になります。
CISは世界基準のセキュリテイベストプラクティスなので、どのような場合でも有効化してよいかと考えます。
AWS Foundational Security Best PracticesはNISTを有効化しないのであれば有効化しましょう。

https://dev.classmethod.jp/articles/securityhub-newcontrol-nist-special-publication-800-53/

https://docs.aws.amazon.com/ja_jp/securityhub/latest/userguide/standards-available.html

# まとめ
PCIDSSは必要であれば有効化、AWS Foundational Security Best PracticesはNISTを有効化しないのであれば有効化、NISTは特に思いがなければ有効化（NIST基準は厳しいというのであれば、AWS Foundational Security Best Practicesルールを有効化）、CISは問答無用で有効化問考え方でよいかと思います。細かいルールのチェック内容はSecurityHubの画面で確認可能ですので、プロジェクトに合わせて、無効化、有効化、対策を考えていきましょう。