OmniAICreator/Qiita-1.07M huggingface dataset:
Python Wrangling

# Python Wrangling
###### tags:`PicoCTF` `General Skills` `2021`

## 問題
> Pythonスクリプトは、ターミナルのプログラムのように呼び出されます...このパスワードを使用してこのPythonスクリプトを実行し、フラグを取得できますか?

> Python scripts are invoked kind of like programs in the Terminal... Can you run this Python script using this password to get the flag?

問題サイト:[PicoCTF](https://play.picoctf.org/practice)
配布されたファイル:
<details><summary>ende.py</summary>

```
import sys
import base64
from cryptography.fernet import Fernet



usage_msg = "Usage: "+ sys.argv[0] +" (-e/-d) [file]"
help_msg = usage_msg + "\n" +\
        "Examples:\n" +\
        "  To decrypt a file named 'pole.txt', do: " +\
        "'$ python "+ sys.argv[0] +" -d pole.txt'\n"



if len(sys.argv) < 2 or len(sys.argv) > 4:
    print(usage_msg)
    sys.exit(1)



if sys.argv[1] == "-e":
    if len(sys.argv) < 4:
        sim_sala_bim = input("Please enter the password:")
    else:
        sim_sala_bim = sys.argv[3]

    ssb_b64 = base64.b64encode(sim_sala_bim.encode())
    c = Fernet(ssb_b64)

    with open(sys.argv[2], "rb") as f:
        data = f.read()
        data_c = c.encrypt(data)
        sys.stdout.write(data_c.decode())


elif sys.argv[1] == "-d":
    if len(sys.argv) < 4:
        sim_sala_bim = input("Please enter the password:")
    else:
        sim_sala_bim = sys.argv[3]

    ssb_b64 = base64.b64encode(sim_sala_bim.encode())
    c = Fernet(ssb_b64)

    with open(sys.argv[2], "r") as f:
        data = f.read()
        data_c = c.decrypt(data.encode())
        sys.stdout.buffer.write(data_c)


elif sys.argv[1] == "-h" or sys.argv[1] == "--help":
    print(help_msg)
    sys.exit(1)


else:
    print("Unrecognized first argument: "+ sys.argv[1])
    print("Please use '-e', '-d', or '-h'.")
    
```
    
</details>
    
<details><summary>flag.txt.en</summary>
    
```
gAAAAABgUAIVX7N_dNxY0j5lWtsDEN2b-h0mN-Lyhm_9QaEdwFK4em1kGiAV52ewbKv8wZJL2QwecZ7kTsVQ11PYEL3BJLD4LVyKrCKAvTFu5-1yuNGFAXKBY8GO3nIReXuOUbaSwVHl
```
    
</details>
    
<details><summary>pw.txt</summary>
    
```
192ee2db192ee2db192ee2db192ee2db
```
    
</details>
    

## sys.argvとは
    
この問題で重要な要素となっているende.pyを読み解いていく上でこの問題で躓く人が最も多い関数はsys.argvの取り扱いかと思われる。これを簡潔に説明するとコマンド実行の際の引数を格納しているリストとなる。
pythonファイルを実行する時、コマンドでは`python3 ファイル名`とするがpython3コマンドも`ls -a`のようにコマンド+(オプションや引数)、という風になっていると解釈できる。
sys.argvにはpython3の後に来る実行するpythonファイル名を先頭の要素argv[0]とするリストであり、[1]以降はファイル名の後に入力された順番に格納される。
例を示すと次のようになる。
```
$python3 ende.py          #sys.argv = [ende.py]

$python3 ende.py -d       #sys.argv = [ende.py,'-d']
```
   
## 解法
上記の説明を踏まえて与えられたpythonファイルを読み解いていくと、実行時のファイル名指定の後に'-d'や'-e'、'-h'といったオプションが指定できるようになっている。また、そのあとには暗号化・復号化を行う対象のファイルが必要である。パスワードは求められた際にコピペでも良いが引数として一番最後に置いておくと勝手に読み込んでくれるようになっている。

以上より下のように実行するとflagの復元ができる。

```
$ cat pw.txt
192ee2db192ee2db192ee2db192ee2db
$ python3 ende.py -d flag.txt.en 192ee2db192ee2db192ee2db192ee2db
picoCTF{4p0110_1n_7h3_h0us3_192ee2db}
```

復元成功
**picoCTF{4p0110_1n_7h3_h0us3_192ee2db}**
ProxmoxでリストアしたVMのWindowsライセンスはどうなるの？というお話

Hyper-VとProxmoxを併用していて地味に疑問だったのが、Windows OSのライセンスはどうなるの？という点でした。

ちなみにHyper-VだとVMのエクスポート/インポートではライセンスは受け継がれますが、VHDX単位でリストアすると再アクティベーションとなります。（クローン扱いになる）

# 背景
Proxmoxでは常に試用版のWindows VMで検証しているため、そのテストができないというのが今回調べた経緯となります。

もう一つはProxmoxをリプレースアップグレードするとき、バックアップリストアで復旧することになりますが、その時のライセンスの挙動も気になっていました。

# 結論

**GUIDが受け継げれば問題なし**ということでした。
https://forum.proxmox.com/threads/windows-activation.118705/

:::note
AFAIK,the Windows Activation ID (at least for win 10) includes **the machines GUID, which is backuped.** If you clone the VM, the GUID changes and your activation will fail and needs to be reactivated. Changing the GUID back will reenable the activation status.
:::

Proxmoxのバックアップ＆リストアではVMのGUIDを保持しますので、一度アクティベーションしたWin10/11のライセンスも保持されるということですね。

Proxmoxを本番環境で使っている企業も徐々に増えているかと思いますが、ご参考になればと思います。

ただし数十台のVMを立て、**VDIとして業務利用をする場合はWindows E3などのVDIライセンスが別途必要**になりますのでご注意下さい。情シスとして数台のVMでテンポラリの検証環境で使う目的でライセンス認証が必要、といった事情であれば大丈夫かと思いますが。

Azure Virtual DesktopだとそのVDIライセンスが不要という認識です。

# 参考にさせて頂いたサイト

〜Windows VDA の概要、メリット、費用感、代表的な VDI サービスのご紹介〜
https://www.rworks.jp/cloud/azure/azure-column/azure-entry/26942/

Windows activation
https://forum.proxmox.com/threads/windows-activation.118705/
【Next.js】Atomic Designでの構成について

Atomic DesignをNext.jsプロジェクトで採用する場合、ディレクトリとファイルの構成は以下のようになります。

1. **Atoms（原子）**
   - 最も基本的なUI要素（例：ボタン、入力フィールド、ラベル）。
   - `components/atoms`ディレクトリに配置。

2. **Molecules（分子）**
   - 複数の原子を組み合わせた機能的なUIグループ（例：フォーム、カード）。
   - `components/molecules`ディレクトリに配置。

3. **Organisms（有機体）**
   - 複数の分子（場合によっては原子も）を組み合わせて、より複雑なUIセクションを形成（例：ヘッダー、フッター）。
   - `components/organisms`ディレクトリに配置。

4. **Templates（テンプレート）**
   - ページのレイアウトを定義し、実際のコンテンツを配置する前の構造を提供。
   - `components/templates`ディレクトリに配置。

5. **Pages（ページ）**
   - Next.js特有の概念。各ページはこのディレクトリに配置され、ルーティングが自動的に設定される。
   - `pages`ディレクトリに配置。

例のディレクトリ構造:
```
- components
  - atoms
    - Button.js
    - Input.js
  - molecules
    - SearchForm.js
    - UserProfile.js
  - organisms
    - Header.js
    - Footer.js
  - templates
    - MainLayout.js
- pages
  - index.js
  - about.js
```

この構造はAtomic Designの原則に基づいていますが、プロジェクトの要件や規模に応じて調整することが一般的です。また、スタイルやユーティリティ関数など、他の共通要素を管理するためのディレクトリも含めることができます（例：`styles`、`utils`）。

## Atomic DesignをNext.jsプロジェクトで利用する際の注意点

Atomic DesignをNext.jsプロジェクトで利用する際の注意点について解説します。

1. **データの取得は、ページ、Template、Organismで行う**
   - **目的**: コンポーネントの再利用性とテスト容易性を高めるため。
   - **実装**: データ取得は、ページやテンプレート、有機体レベルで行います。これにより、より低レベルのコンポーネント（原子や分子）は、データ取得の詳細から分離され、純粋にUI表示に集中できます。
   - **利点**: データ依存性が低いコンポーネントは、他のコンテキストやプロジェクトで容易に再利用可能になります。

2. **AtomとMoleculeを基本的にステートレスコンポーネントとして実装する**
   - **目的**: コンポーネントの単純化と再利用性の向上。
   - **実装**: 原子と分子レベルのコンポーネントは、内部状態（`useState` など）を持たないように設計します。これらは、単にプロップスを受け取り、UIをレンダリングする役割に集中します。
   - **利点**: 内部状態を持たないことで、これらのコンポーネントは予測可能でテストしやすくなります。

3. **AtomとMoleculeを基本的にサーバーコンポーネントとして実装する**
   - **目的**: 性能の最適化とサーバー側のレンダリングに焦点を当てるため。
   - **実装**: ステートレスな原子と分子コンポーネントは、サーバーサイドでレンダリングすることができます。これにより、クライアントサイドのJavaScriptの量が減り、ページの初期読み込みが高速になります。
   - **利点**: サーバーサイドでのレンダリングは、特に初回ページロード時のパフォーマンス向上に役立ちます。

4. **ステート管理が不要であれば、Organismもサーバーコンポーネントとして実装する**
   - **目的**: より大きなUIセクションでも、必要に応じてサーバーサイドレンダリングを活用するため。
   - **実装**: 有機体レベルのコンポーネントが内部状態やクライアントサイドの動的な挙動を必要としない場合、それらもサーバーサイドでレンダリングできます。
   - **利点**: これにより、ページのロード時間を短縮し、ユーザーエクスペリエンスを向上させることができます。

これらの注意点は、コンポーネントの責務を明確に分割し、パフォーマンス最適化と再利用性を高めることを目的としています。Atomic Designのアプローチは、コンポーネントの整理と維持管理において非常に効果的ですが、プロジェクトのニーズやチームの作業スタイルに応じて柔軟に調整することが重要です。
JointJS解説　〜Geometry API編〜

## Geometry APIとは

Geometry APIは、JointJSに同梱される軽量なライブラリです。主に座標に関する操作を行うための機能が搭載されています。
Geometry APIを使わなくてもJointJSを利用することはできますが、JointJSのメソッドの中にはGeometry APIのオブジェクトを引数にとるものも存在します。ですのでAPIが存在すること

なおGeometry APIのドキュメントは[こちらのページ](https://resources.jointjs.com/docs/jointjs/v3.7/geometry.html)で読むことができます。

## 主要なクラス

Geometry APIのクラスをいくつか紹介します。

### `Point`

`Point`は`x`, `y`からなる座標点を表します。
`Point`は`g.Point(x, y)`でオブジェクトを生成できます。

```js
const point = g.Point(10, 30);
```

JointJSではLinkの経由点を設定するメソッド[`vertices`](https://resources.jointjs.com/docs/jointjs/v3.7/joint.html#dia.Link.prototype.vertices)や、Paper内のViewを探すメソッド[`findViewsFromPoint`](https://resources.jointjs.com/docs/jointjs/v3.7/joint.html#dia.Paper.prototype.findViewsFromPoint)の等の引数に`Point`のオブジェクトを指定できます。[^1]

#### `vertices`での使用例

```js
const link = new joint.shapes.standard.Link();
// 始点・終点の引数にも使用できる
link.source(g.Point(100, 100));
link.target(g.Point(400, 100));

// 経由点を定義
const point1 = g.Point(200, 50);
const point2 = g.Point(300, 150);
link.vertices([point1, point2]);

link.addTo(graph);
```

#### 実行結果

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129526/d8869919-f636-862c-525f-fce62c2ab14a.png">

### `Line`

`Line`は直線を表します。
2個の`Point`を引数にとってインスタンス化します。

```js
const line = new g.Line(new g.Point(10, 20), new g.Point(50, 60));
```

指定した座標からLine上の最も近い座標を返す`closestPoint`や、指定した座標が直線上に存在するかを判定する`containsPoint`などのメソッドが用意されています。

以下は`closesPoint`を応用してLinkに対して垂直な線を引くサンプルです。

#### コード

```js
// 元となるLink
const link = new joint.shapes.standard.Link();

const start = g.Point(100, 100);
const end = g.Point(400, 200);

link.source(start);
link.target(end);
link.addTo(graph);

const line = new g.Line(start, end);

// 垂直な線を引く
const verticalLink = new joint.shapes.standard.Link();
const point = g.Point(200, 100);
const point2 = line.closestPoint(point);

verticalLink.source(point);
verticalLink.target(point2);

verticalLink.addTo(graph);
```

#### 実行結果

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129526/e2b3ea85-812b-7910-d87e-5fe7b39f9c97.png">

### `Rect`

`Rect`は四角形を表します。左上の頂点の`x`,`y`座標と、縦横の長さを指定してインスタンス化します。

```js
const rect = new g.Rect(10, 10, 300, 300);
```

先程のLinkにもありましたが、メソッドの`containsPoint`を使用することで指定した座標が領域内に含まれているかを判定できます。マウスイベントの処理判定などに利用できそうです。

```js
const rect = new g.Rect(10, 10, 300, 300);
console.log('判定１:', rect.containsPoint(g.Point(30,30)));
console.log('判定２:', rect.containsPoint(g.Point(311,30)));
```

#### 実行結果
```
"判定１:" true
"判定２:" false
```

## まとめ

今回はGeometry APIと、いくつかの利用可能なクラスを紹介しました。JointJSを使う中で、座標に関わる込み入った操作が必要になる場合は、Geometry APIを使用して解決できないかを検討してみてください。

※この記事は [JointJS Advent Calendar 2023](https://qiita.com/advent-calendar/2023/jointjs) の記事です。他の記事を読む場合はカレンダーのページを参照してください。

https://qiita.com/advent-calendar/2023/jointjs


[^1]: これらのメソッドは、厳密には`x`と`y`のプロパティを含むオブジェクトであれば何でもOKな仕様になっています。ただ、TypeScriptを利用するプロジェクトの場合では型なしのオブジェクトを使用するよりも`Point`クラスを使用するほうがしっくり来る場合が多いかと思いますね。
GitHub Actions で、Poetry を使用しているプロジェクトに対して Snyk を適用する

## はじめに
- この記事では、GitHub Actions で、Poetry を使用しているプロジェクトに対して Snyk を適用する方法について、メモとして残します。


## 適用手順
### Auth Token の設定
- https://app.snyk.io/account から Auth Token を取得し、GitHub の Secret に、例えば `SNYK_TOKEN` として設定する。

### ワークフローの作成
- `snyk/actions/python@master` の `args` の `--file` に、`poetry.lock` のパスを設定する。
```.github/workflows/backend-test.yml
name: backend-test
on:
  push:
    paths: backend/**
jobs:
  test:
    runs-on: ubuntu-22.04
    steps:
      - name: sparse checkout
        uses: actions/checkout@v3
        with:
          sparse-checkout: |
            backend
      - name: snyk
        uses: snyk/actions/python@master
        env:
          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
        with:
          command: test
          args: --severity-threshold=critical --file=backend/poetry.lock
```

## 参考
- https://docs.snyk.io/integrate-with-snyk/snyk-ci-cd-integrations/github-actions-for-snyk-setup-and-checking-for-vulnerabilities/snyk-python-action
パーセプトロンからニュートラルネットワーク

AI系のプロジェクトに入るので、ニュートラルネットワークくらいは勉強する。

まずは、[ゼロから作るDeep Learning](https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8BDeep-Learning-%E2%80%95Python%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%AE%E7%90%86%E8%AB%96%E3%81%A8%E5%AE%9F%E8%A3%85-%E6%96%8E%E8%97%A4-%E5%BA%B7%E6%AF%85/dp/4873117585/ref=sr_1_1?adgrpid=78743629850&gclid=Cj0KCQiAsvWrBhC0ARIsAO4E6f_2kmkKJDdQtAzsxDt-OEudfy9tND30KInYbeV9P3eRHYpulqZlCSgaAufcEALw_wcB&hvadid=665617091197&hvdev=c&hvlocphy=1009637&hvnetw=g&hvqmt=e&hvrand=173033341392134358&hvtargid=kwd-851214457148&hydadcr=27494_14701157&jp-ad-ap=0&keywords=%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8Bdeep-learning&qid=1702793334&sr=8-1)
の勉強から始める。

今日の話はパーセプロトンとニュートラルネットワーク。

## パーセプロトン

複数の信号を入力として受け取り、一つの信号を出力する。

```math
\begin{equation}
 y= \left \{
 \begin{array}{l}
 0　(w_1x_1 + w_2x_2 \leq θ) \\
 1　(w_1x_1 + w_2x_2 \gt  θ)
 \end{array}
 \right.
 \end{equation} 
```
で表現される。θは限界値の**閾値**と呼ばれる。

(w1, w2, θ)の組み合わせを下記とすると、それぞれの論理演算を表現できる。
AND : (0.5, 0.5, 0.7)
NAND : (-0.5, -0.5, -0.7)
OR : (0.5, 0.5, 0.2)
※ 表現は無限に存在することに注意する。

上記を組み合わせれば、XORも表現できる。
ちなみにXOR = AND(NAND, OR)で表現できる。
パーセプロトンの強みは、「複雑な関数であっても、それを表現できるだけの可能性がある」ことである。
しかし、「**重み**」を決める作業は「人間」であるということはAIとしてかなり弱みになる。

ここで出てきたのが、**ニュートラルネットワーク**である。
ニュートラルネットワークはパーセプトロンの課題を解決することを目指す。
具体的には、「適切な重みパラメータ」をデータから自動で**学習**できるということを目指す。

## 共通点
ニューロンの**つながり方**に関しては、パーせプロトンとニュートラルネットワークは同じである。
違いは、この後説明する「活性化関数」の選択肢である。

パーセプロトン：ステップ関数を選択
ニュートラルネットワーク：その他の関数を選択 (ex : シグモイド関数、ReLU関数)

この**活性化関数**がパーセプトロンとニュートラルネットワークの**架け橋**となる。

## 活性化関数とは
入力信号の総和を出力信号に変換する関数(h(x)のことを指す)

$$
y = h(b + w_1x_1 + w_2x_2)\label{a}\tag{1}
$$


```math
\begin{equation} \label{b}\tag{2}
 h(x)= \left \{
 \begin{array}{l}
 0　(x \leq 0のとき) \\
 1　(x \gt  0のとき)
 \end{array}
 \right.
 \end{equation} 
```

上記 (式 2) で表される活性化関数は、閾値を境にして出力が切り替わる関数である。
それは「ステップ関数」や「段階関数」と呼ばれる。
そのため、「パーせプロトンでは、活性化関数に**ステップ関数**を利用している」と言える。
つまり、活性化関数の候補としてたくさんある関数の中で、パーせプロトンは「**ステップ関数**」を採用している。

ニュートラルネットワークはこの活性化関数において、**別の関数**を利用する。

## シグモイド関数

ニュートラルネットワークでよく用いられる活性化関数の一つは**シグモイド関数(sigmoid function)**である。

```math
h(x) = \frac{1}{1 + e^{-x}}
```

![スクリーンショット 2023-12-17 15.02.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255565/af68544f-1b71-a231-5a07-897a93f007de.png)

シグモイド関数は活性化関数として古くから利用されていた。
最近は次に紹介するReLU (Rectified Linear Unit)という関数が利用される。

## ReLU関数

```math
\begin{equation} \label{c}\tag{3}
 h(x)= \left \{
 \begin{array}{l}
 x　(x \gt 0のとき) \\
 0　(x \leq  0のとき)
 \end{array}
 \right.
 \end{equation} 
```

![スクリーンショット 2023-12-17 15.07.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255565/9bad3091-e7b6-0f4b-682e-54b5600eefc2.png)

この関数を使ったものもニュートラルネットワークの一部である。

この関数の重みを変えながら、多重層にして出力を出していくのが次のステップである。
まずは、「パーセプトロンからニュートラルネットワーク」をまとめた。
次の記事では、ニュートラルネットワークをどう実装していくかを見ていくことにする。
【Next.js】クライアントコンポーネントとサーバーコンポーネントの使い分けについて

Next.js は、サーバーサイドレンダリング (SSR) とクライアントサイドレンダリング (CSR) をサポートする React フレームワークです。このフレームワークでは、どのコンポーネントがサーバーでレンダリングされ、どのコンポーネントがクライアントでレンダリングされるかを適切に選択することが重要です。

### サーバーコンポーネント (SSR)
サーバーコンポーネントは、ページの初期ロード時にサーバー上でレンダリングされます。これは、SEO最適化や初期ページロードのパフォーマンス改善に有効です。

**例:**
- **ブログの記事**: SEOに敏感なコンテンツであり、初期ページロード時にすべての内容が利用可能であるべきです。
- **静的なランディングページ**: ユーザーにすばやく表示される必要があり、ページのコンテンツは頻繁に変更されません。

### クライアントコンポーネント (CSR)
クライアントコンポーネントはブラウザで動的にレンダリングされます。これは、ユーザーインタラクションやリアルタイムのデータ更新が必要な場合に適しています。

**例:**
- **インタラクティブなダッシュボード**: リアルタイムで更新されるデータやインタラクティブな要素が含まれます。これらはクライアント側でレンダリングすることで、動的なユーザー体験を提供できます。
- **コメントセクション**: ユーザーからのリアルタイムのフィードバックを受け付ける場合、クライアント側で動的にレンダリングすると効果的です。

### ハイブリッドレンダリング
Next.js では、同一ページ内で SSR と CSR を組み合わせることも可能です。例えば、ランディングページの静的なコンテンツはサーバーでレンダリングし、ユーザーのフィードバックフォームはクライアントでレンダリングすることができます。

このように、Next.js を使用する際には、ページの性質や必要な機能に基づいて、サーバーとクライアントのコンポーネントを適切に使い分けることが重要です。

## 実装例

Next.js におけるクライアントコンポーネントとサーバーコンポーネントの実装例を示します。ここでは、サーバーサイドでレンダリングされるコンポーネント（SSR）とクライアントサイドでレンダリングされるコンポーネント（CSR）のコード例を示します。

### サーバーコンポーネント (SSR)

サーバーサイドでレンダリングされるコンポーネントは、Next.js の `getServerSideProps` 関数を使用してデータを取得します。この関数は、ページがリクエストされるたびにサーバー上で実行され、必要なデータをページコンポーネントに渡します。

**例: ブログの記事を表示するコンポーネント**

```jsx
// pages/posts/[id].js
import { useRouter } from 'next/router';

function Post({ post }) {
  // コンポーネントの実装
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// この関数はサーバー上で実行されます
export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://example.com/api/posts/${id}`);
  const post = await res.json();

  return { props: { post } };
}

export default Post;
```

この例では、ブログの個別記事を表示するために、記事の ID に基づいてサーバーサイドでデータを取得し、そのデータをページコンポーネントに渡しています。

### クライアントコンポーネント (CSR)

クライアントサイドでレンダリングされるコンポーネントは、主に React の `useState` と `useEffect` フックを使用してデータを動的に取得します。

**例: ユーザーのコメントを表示するコンポーネント**

```jsx
// components/Comments.js
import { useState, useEffect } from 'react';

function Comments() {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    async function fetchComments() {
      const res = await fetch('https://example.com/api/comments');
      const data = await res.json();
      setComments(data);
    }

    fetchComments();
  }, []);

  return (
    <div>
      {comments.map(comment => (
        <div key={comment.id}>
          <p>{comment.text}</p>
        </div>
      ))}
    </div>
  );
}

export default Comments;
```

この例では、コメントデータをクライアントサイドで動的に取得し、それらを表示しています。`useEffect` フックは、コンポーネントがマウントされた後に API からコメントデータを取得するために使用されます。

これらの例は、Next.js における SSR と CSR の基本的な使い方を示しています。実際のアプリケーションでは、これらの手法を組み合わせて、最適なユーザーエクスペリエンスとパフォーマンスを実現することが可能です。
Web開発スキルを爆上げできるYouTubeチャンネル10選（2023/12月時点）

## はじめに
こんにちは、普段はITコンサルをやっているまるやきです。
今回は、個人的にReactやTypeScriptなどのWeb開発技術を学ぶのにおすすめだと感じているYouTubeチャンネルをまとめていければと思います。
並び順は結果としておすすめ順になっていると思います。

## 本記事の想定読者
* これからWeb開発に挑戦してみたい方
* Web開発のTipsなどを学び、技術力をアップしたい方
* お正月が暇だから最新技術のキャッチアップをしたい方

## Web Dev Simplified
このチャンネルは、TypeScriptやReactなどのベストプラクティスや細かなテクニック(Tips)を学べるチャンネルです。
Web開発に関連していることを取り上げているチャンネルなので、上記の項目以外にもアクセシビリティやUI/UXなど色々扱われています。
個人的にはショート動画が結構好きです。

[Web Dev Simplified](https://www.youtube.com/@WebDevSimplified)

## Codevolution
このチャンネルは、Next.jsやReactの最新技術が学べるチャンネルです。
最近よく見ているチャンネルです。
Next.js v14に関する動画が多く上げられていて、テーマも絞って動画時間も短くなっているので非常に見やすいです。

[Codevolution](https://www.youtube.com/@Codevolution)

## プログラミングチュートリアル
このチャンネルは、Web開発関連の技術をハンズオン形式で学べるチャンネルです。割と最新の技術を扱っているので、手軽にキャッチアップしたいという方には良いと思います。
内容もUdemyのような感じで、一緒に進んでいけるので初学者の方でも楽しく学んでいけると思います。


[プログラミングチュートリアル](https://www.youtube.com/@user-hl9uv6cv7k)

## ByteGrad
このチャンネルは、Next.jsやReact、TailwindCSSなどのベストプラクティスを学べるチャンネルです。
コンセプトとしては1つ目に紹介したWeb Dev Simplifiedさんに似ているのですが、こちらの方がより最新の技術＋よりフロントエンドに特化したコンテンツを扱っている印象があります。

[ByteGrad](https://www.youtube.com/@ByteGrad)

## developedbyed
このチャンネルは、HTMLやCSS、JacaScriptの基礎をハンズオン形式で学べるチャンネルです。
ReactやTypeScriptに関しても扱っているので、このチャンネル1つでもWeb開発者としてのスキルを上げることができます。
HTMLやCSSに関しての動画の質はとても高く、ハンズオン形式で進めてくれるので、一緒に進めていけば格好いいサイトが作れます。
この方の動画でレスポンシブデザインというものを知ったのがちょうど4年前の貧乏大学生のときでしょうか。。懐かしすぎて泣きそうです。（[Responsive Navbar Tutorial](https://youtu.be/gXkqy0b4M5g?si=8bSKuqdT4XXpe6qh)）

[developedbyed](https://www.youtube.com/@developedbyed)


## トラハック
このチャンネルは、ReactやTypeScriptの入門講座を扱っているチャンネルです。
それ以外にもWeb開発のあれこれやTips系も扱っています。
少し動画が古いので、あくまで入門として扱い、その後最新動向をキャッチアップすると良いと思います。
ReactやTypeScriptが最近気になっているけどよくわからんという方にはおすすめです。

[トラハック](https://www.youtube.com/@1492tiger)

## しまぶーのIT大学
このチャンネルは、Next.jsなどの新しめの部分からHTMLやCSSなどの基礎部分まで幅広く入門講座を扱っているチャンネルです。
丁寧に進めてくださるので、初学者の方も学びやすいと思います。
個人的にはJavaScriptの講座は歴史部分から説明してくださっているので、納得感がありとても学びやすかったです。（[JavaScript 入門](https://youtu.be/pnsieVYy72M?si=GspnoflG2SH75Tvl)）

[しまぶーのIT大学](https://www.youtube.com/@shimabu_it)

## JavaScript Mastery
このチャンネルは、Next.jsやReactなどを用いてWeb開発をする講座を扱っているチャンネルです。
1つの動画が結構長いので大変ですが、一緒に進めていけば1つのアプリケーションを作成することができるので、何も作るものがないよ〜という方にはおすすめです。
個人的にはデザインが結構洒落ていると思っているので、個人開発の際に~~パクって~~オマージュさせていただいております。

[JavaScript Mastery](https://www.youtube.com/@javascriptmastery)

## Traversy Media
このチャンネルは、初級から上級まで様々なWeb開発講座を扱っているチャンネルです。
結構前からあるチャンネルなので、様々なコンテンツがありますが、最新技術に関しても扱っています。
まだBun.jsの動画しか見ていないのですが、明瞭でとてもわかりやすかったです。（[Bun.js](https://youtu.be/U4JVw8K19uY?si=3eBdteaoXefCfDDb)）

[Traversy Media](https://www.youtube.com/@TraversyMedia)

## Online Tutorials
このチャンネルは、おもしろいCSSデザインを学べるチャンネルです。
CSSを学ぶ際にどうせなら凝った面白いもの作ってみたいと思う方にはうってつけです。
個人開発のサイトとかであれば、ワンポイントでデザインを取り入れてみても面白いかもと思います。
こんなことできるんだと感心させられる動画がたくさんあります。

[Online Tutorials](https://www.youtube.com/@OnlineTutorialsYT)

## さいごに
10個の中でみなさまが勉強になると感じるチャンネルが1つでもあれば幸いです。
よければみなさまのおすすめチャンネルもコメントで教えていただけると嬉しいです！
最後まで見ていただきありがとうございました。
以下の個人サイトで別の記事も執筆しておりますので、みていただけると嬉しいです。
よろしくお願いいたします。

[MyCanvas](https://www.yoshiki-maruya.com/)
なぜエンジニア組織をうまくマネジメントできないと悩む経営者が多いのか？

:::note info
この記事は[さくらインターネット Advent Calendar 2023](https://qiita.com/advent-calendar/2023/sakura) 06日目の記事です。
:::

## はじめに
私は、さくらインターネットというクラウドサーバの会社の社長をしていて、よく経営者の方からのメンタリングのリクエストをいただくことがあります。
その中で多くの割合を占めるのが、ITエンジニア(以降、エンジニア)のマネジメントと、エンジニア組織の構築をどのようにすればいいのかというテーマです。
確かに、どんなビジネスをするにしても、単にSaaSやノーコードツールを活用するだけでは足りなくて、自分たちでシステム開発しないといけないケースが増えてきているのは、間違いないなと思います。
外注をしてシステム構築をするケースももちろん多いですが、基幹システムのような使いにくくても自社の社員が我慢すればいいものと違って、自社のお客様向けのシステムだと使いやすくないとお客様が離脱してしまいますし、常にアップデートをし続けて、最良のUI/UXを作ることが業績に直結します。
要は、今のデジタルシステムは、コストダウンのために用意するのではなくて、自社の売り上げを上げるために用意するためのものであるので、その成否は会社の存続自体にも影響することから、自社で開発をできるエンジニアを抱えたいと思う経営者も増えているわけです。
しかしながら、エンジニアが周りの人とうまくできないとか、言うことを聞いてくれないとか、なぜ他の人より高い給与を払わなければならないのかとか、多くの経営者が悩みさまざまな葛藤がある中で、結局エンジニア組織が崩壊したと言うような話もよく聞きます。

## エンジニアとそれ以外の人とは違う人種なのか
まずそのような話を経営者からされた時にする質問が、「社内のエンジニアをまるで外注先に依頼するかのように扱っていないか？」と言うものです。
例えば、申し込みをもう少し増やそうとして、営業会議とかマーケティング会議とかで色々と話をして、「申し込みのボタン大きくしてみたら、申し込みが増えそうだ」と言う結論に至ったとします。
この時に、エンジニアチームは参加していなくて、突然「ウェブサイトのこのボタンを大きくして」みたいな依頼をすることになると思いますが、受けたエンジニアチームはなんでこの作業をしないといけないのかは分かりません。
言われた通りにプログラミングするほど、やらされ感のある仕事はないですし、多くのエンジニアはモチベーションが上がりません。
場合によっては、なぜこのボタンを大きくするのですか？と聞けるエンジニアもいるかもしれませんが、申し込みを増やしたいんだと教えてもらった時に、そもそもこのボタンが表示される前に離脱していると言う事実をエンジニアが知っていたとすると、「いやその前にやることがあるよ」となります。
この時にエンジニアが「申し込み増やしたいんだったら、ボタンを大きくするより、そのページへの動線を変えるべきだ」とか言うと、頼んだ側からするとエンジニアが仕事を素直にやってくれなかった、みたいなことになるのでしょう。
本当は、どうすれば申し込みが増えるのかと言う会議にエンジニアが同席するなり、事前にエンジニアにヒアリングするなりして、他の方と同じフラットな立場で意見を言えるようにしておけばこのようなこと起こりません。
要は、エンジニアも非エンジニアも、専門性が違うだけで、一緒の社内の仲間だし、別の人種ではないし、一緒に仕事すればいいのです。
せっかく、社内にエンジニアを抱えているのに、非エンジニアの人たちだけで決めて、依頼だけするとなると、エンジニア側は面白くないし、もし意見をしたならば「エンジニアは批判的だ」みたいな話にしかなりません。

## なぜ高い給与を払わなければならないのか
シンプルに言うと、市場価値が高いからだというしかありません。
他の人よりも高い給与だと、周りの人が納得しないと言うのですが、じゃあ経営者であるあなたがなぜ給与が高いのかを合理的に説明できるんですか？と聞きます。
誰にどのように給与を支払うかは経営者が決めればいい話だし、それに納得できない社員がいれば辞められてしまいますが、いずれにせよエンジニアが欲しければ給与を上げるしかないと言うことを経営者側が納得するしかありません。
ただ、気をつけないといけないのが、エンジニアのスキルを評価できないまま高い給与を払い、かつとんでもないシステムを作られることです。
さくらインターネットは、半分以上がエンジニアですから、面接する人もエンジニアで相手のスキルを評価できますが、新たにエンジニア組織を作るとなると、どのような人がいいのかが分かりません。
このような場合には、副業のCTOに来てもらうと言う手もありますし、私自身も会社を辞めてプラプラしているエンジニアを紹介することもあります。

## システムをITリテラシーの低い人に合わせて選択しないように
あと、エンジニアが導入してくれというシステムが高いと渋る経営者の人がいます。
しかし、高いスペックのPCを導入して、さまざまなツールを導入することで、エンジニアの生産性は劇的に上がるわけですから、経営者と本来なら利害が合致しているはずです。
そしてそういった会社は、エンジニア以外の社員の方々のITリテラシーが低すぎて、エンジニアがフラストレーションを溜めてることが多いです。
その時にアドバイスするのは、エンジニア中心に社内のシステムを選定してもらって、ITリテラシーの低い人への教育を手伝ってもらったらどうかと言うことです。
要は、ITリテラシーの低い人に合わせてソリューションの選択をするのではなくて、自社にマッチするソリューションに対してITリテラシーを上げていかないと、エンジニアは離れていくよと言うものです。
究極的には、経営者が勉強してITリテラシーを上げていくことで、最終的には会社の業績はついてくるだろうと思っています。
エンジニアが動いてくれないではなくて、自ら勉強をして、エンジニアをちゃんとマネジメントしようという気持ちにならないといけないと言うことです。

## さいごに
この記事のターゲットは、エンジニアの皆さんではなく、経営者なので、Qiitaで書くのもおかしいかもしれません。
でも、さまざまなコメントをいただいたり、❤️がいただければ、経営者の人たちにも届くんじゃないかなぁと思っています。

あと、さくらインターネットではGPUクラウドやガバメントクラウドの開発強化にあたり、人材を全レイヤーで募集していますので、ぜひご覧ください！

https://www.sakura.ad.jp/lp/22engineer/
AWS EC2インスタンスの選び方：オンデマンドからセービングプランまで

# AWS EC2購入方法まとめ
EC2はAWSサービスの中でも費用に占める割合が高くなりやすいサービスなので、適切な購入方法を選択してお得に運用することが大事です。

EC2インスタンスの購入方法は4種類あります。

1. オンデマンドインスタンス
2. リサーブドインスタンス
3. スポットインスタンス
4. セービングプラン


これらの違いと、どの購入方法が最適解なのかを説明します。

## 1. オンデマンドインスタンス
特に指定しない限りデフォルトで適用される基本的な購入方法となります。

オンデマンドインスタンスは、サーバーを立ち上げている時間に応じて料金が発生します。（サーバーが稼働していない時間は料金が発生しない）

### 1.1 こんな人におすすめ
プロジェクトの初期段階やテスト、短期間のデータ分析など、短期間または不定期にリソースが必要な場合。

## 2. リザーブドインスタンス
特定のスペックとリージョンでインスタンスを1年や3年の期間固定することで割引を受けられる購入方法。

支払い方法によって割引率が異なります

1. **すべて前払い**: 契約期間の料金をすべて前払いすることで、最大割引を受けられます。（最大約60%～75%）

2. **一部前払い**: 一部を前払いし、残りを月額で支払う方法です。全額前払いほどではありませんが、割引が適用されます。（最大約約50%～70%）

3. **前払いなし**: 前払いをせずに、月額で全額を支払う方法です。このオプションは最も柔軟ですが、割引率は最も低くなります。（最大約約30%～50%）

### 2.1 こんな人におすすめ
長期間にわたって安定したリソースが必要な場合で、お得に運用したい人。

## 3. スポットインスタンス
AWSの余ったリソースを使用してEC2を購入する方法です。

**価格変動**: スポットインスタンスの料金は「スポット価格」として知られており、AWSの余剰リソースの状況に応じて変動します。

**大幅な割引**: オンデマンド料金に比べて、最大で約90%まで安くなる可能性があります。

**価格による終了のリスク**: スポットインスタンスを購入する際には、「入札価格」と呼ばれる最大限支払い可能な金額を設定します。この価格をスポット価格が上回ると、インスタンスは自動的に終了します。

アプリケーションの設計: 処理が途中で停止しても問題ないように、アプリケーションを設計する必要があります。

（ちなみに[スポットインスタンスアドバイザー](https://aws.amazon.com/jp/ec2/spot/instance-advisor/)を使うと、中断される頻度が低いインスタンスタイプを調べることができます）


### 3.1 こんな人におすすめ
コストを抑えたいが、インスタンスの終了が許容できるユースケースに適しています。例えば、バッチ処理やバックグラウンドでのデータ分析など、途中で停止しても再開可能な作業に有効です。

## 4. セービングプラン
1年間または3年間、1時間につき何ドル分AWSを使うという契約をして、対象サービスの料金が割引になる仕組み。（最大で72％）

インスタンスファミリー、リージョン、OSに限定されず、コンピューティングの使用量全体に対して割引を提供します。

これにより、インスタンスタイプの変更やリージョンの変更があっても、割引が適用される範囲が広がります。

### 4.1 こんな人におすすめ
インスタンススペックを変更する可能性があり、尚且つ長期的な使用を予定しているユーザー。

# 比較まとめ

| タイプ | おすすめユーザー |
| ---- | ---- |
| オンデマンドインスタンス | 短期間または不定期にリソースが必要な場合 |
| リザーブドインスタンス | 期間にわたって安定したリソースが必要な場合で、前払いによる割引を活用したい場合 |
| スポットインスタンス | コストを抑えたいが、インスタンスの終了が許容できる場合（例：バッチ処理やデータ分析） |
| セービングプラン | 長期的な使用を予定し、リソースの使用パターンが変動する可能性がある場合 |
アクセス禁止のサイトを設置する

## DNSサーバー
DNSサーバーを通じて、アクセスできないドメインを追加する可能：<br>
hostsファイルに以下の内容を追加：<br>
```
127.0.0.1 example.com
```

## 例：youtubeアクセス禁止
### Windows
1. エディタを管理者として開く
2. C:\Windows\System32\drivers\etcに移動、hostsというファイルを開く 
3. 以下の内容を最後に追加、保存：
```
127.0.0.1 www.youtube.com
```

### Linux or MacOS
1. ターミナル：
```
sudo vi /etc/hosts
``` 
2. 以下の内容を最後に追加、保存：
```
127.0.0.1 www.youtube.com
```
### その他
ドメイン名の記入について、三つの可能があります(youtubeの場合)：
```
127.0.0.1 www.youtube.com
127.0.0.1 youtube.com
127.0.0.1 m.youtube.com
```
PHP 関数の定義

## はじめに
プログラミングをしているとよく使う処理など関数を作ったりします。関数を作るまとめです。
return文が実行された時点で関数は終わります、またreturnがない関数はnullが返されます。

## 関数の定義
```php
function nameEcho($name) //$nameを仮引数と呼ぶ
{ 
    return "こんにちは{$name}さん" . PHP_EOL;
}
```
function 関数名(){
    処理
}と記述します。関数名は任意で引数はなしなら無記述です多分。


## 実際に使ってみる
```php
function nameEcho($name) //$nameを仮引数と呼ぶ
{ 
    return "こんにちは{$name}さん" . PHP_EOL;
}

echo nameEcho('keia'); //keiaを実引数と呼ぶ
```
```
こんにちはkeiaさん
```

## 実引数が記述されなかったら
実引数が記述されていない場合だとエラーが出ます。ですが、関数を定義する時に実引数が記述されていなかった場合のデフォルト値の設定が可能です。


```php
function nameEcho($name = '名無し') 
{ 
    return "こんにちは{$name}さん" . PHP_EOL;
}

echo nameEcho();
```
```
こんにちは、名無しさん
```

## 可変長引数
引数の前に...をつけることで複数の引数を受け取ることができ、受け取ったものは配列として渡されます。
```php
function add(...$scores)
{
    $total = 0;
    foreach ($scores as $score) {
        total+= $score;
    }
    return $total;
}

print_r(add(10, 20, 30, 40));
```
```
100
```

## リファレンス渡し
関数に渡す引数の前に&をつけることで関数に変数そのものを渡し、関数内で変数の値の書き換えが可能になります。
```php
function add(&$num)
{
    $num++;
}

$num = 7;
add($num);
echo $num;
```
```
8
```
変数の値そのものが書き換えられましたね。

## 名前付き引数
引数を渡すとき、引数名:値と書くことで書いた引数に値を渡すことができます。
```php
function register($name = null, $age = null)
{
    $users = ['name' => $name, 'age' => $age];
}

register($age :10); //ageのみ10を追加
```
$ageにのみ値を渡すことができました。


## スコープ
関数内で定義されていない変数を関数内の処理で扱うにはglobal 変数名;と記述しないといけません。
また関数内で定義した変数を関数外で使用することはできません。
```php
$rate = 1.1;

function calc($price){
    global $rate; //このように記述することで関数内で関数外で定義した変数が使用可能になる
    retuen $price * $rate;
}
```

## 可変関数
変数 = '関数名'とすることで変数を関数にすることができます
```php
function sum($a, $b)
{
    return $a + $b;
}

function sub($a, $b)
{
    return $a - $b;
}

$calc = 'sum'; //$calcはsum関数として扱える
echo $calc(10, 20);

foreach ()
```
```
30
```
変数を関数にできるなんて便利ですね。
## 無名関数(クロージャ)
ちょっと理解が曖昧ですがこうゆう方法もあるということで残しておきます。
```php
$sum = function($a, $b) //functionの後に関数名を記述しない
{
    return $a + $b;
}
```
上記は無名関数です。functionの後に関数名がないです。また、無名関数は関数の引数としても使えるそうです。

```php
$sum = function($a, $b) //functionの後に関数名を記述しない
{
    return $a + $b;
}

function calc($price){
    return price * 1.1;
}

echo calc($sum(100,200)); //(100+200)*1,1
```
```
330
```

## 関数の引数の型指定
関数で使う引数の型を指定することが可能です。
()外に型を記述することで戻り値の型の指定も可能です。型なしならvoid
```php
function scoreboard(string $name , int $score): void{
    echo '競技名:'. $name . ' スコア:' . $score;
}
```
ですが、PHPは都合よく型変換を行なってくれる場合があります。
```php
function scoreboard(string $name , int $score): void{
    echo '競技名:'. $name . ' スコア:' . $score;
}

scoreboard('keia','500');
```
```php
競技名:keia スコア:500
```
都合よく型変換されたくない場合はdeclare(strict_types=1);を最初に追加します。
```php
declare(strict_types=1);

function scoreboard(string $name , int $score): void{
    echo '競技名:'. $name . ' スコア:' . $score;
}

scoreboard('keia','500'); //'500'が引数ではないのでエラーが出る
```
また戻り値についてですが戻り値の型指定の前に「?」を付けることでnullを許容することが可能になります。
```php
function changer(int $point): ?int{
 return $point >= 500 ? 1000 : null;
}

$changedPoint =  changer(400);
var_dump($changedPoint);
```
```
NULL
```



## まとめ
とても勉強になりました。
モバイル表示が異様に遅いのは、通信速度がエミュレーションされているからかも？

この記事は、[ソフトウェアテスト Advent Calendar 2023](https://qiita.com/advent-calendar/2023/softwaretesting) の20日目の記事です。

12月某日、僕は悩んでいました。
開発しているプロダクトの開発環境へのアクセスが遅いことに。。

## きっかけ
現在開発しているプロダクトが本番環境と開発環境で分かれています。開発環境で動作確認をして、問題なければ本番リリースという流れです。僕も開発されたfeatureをチームと一緒に動作確認し、疑問点など画面共有をして話をするのですが、その度に「okauchiさん、ページの読み込み遅いですね。ネットワークがあまり強くないですか？」と言われていました。また直近開発環境を使ってE2Eテスト自動化の検討もしたく、こんな読み込みの遅さでは仕事にならないのでストレスが爆発しました。。

## 検証を始める
アクセスしているデバイス：2021 MacBook Pro（チップやメモリは性能高い）
同時に起動しているアプリ：ほとんどなし、VPN接続ソフトとChromeぐらい
インターネット速度：特段遅いわけでもなく、接続が不安定でもない
他に思い当たるフシは？：直接的にプロダクトコードを触らないので、他のエンジニアの方が起動している、メモリを食うアプリが多い。敷いていれば左手デバイス用のアプリをいくつか動かしているぐらい。
（余談ですが、ぼやかして書くと１つ１つの検証がずさんっぽく見えるなぁ・・w）
本番環境も遅い？：ここで気付き、遅いのはスマホ表示で動作確認をしている時だけだった！

## chromeの検証内から選べるスマホ表示を確認するアレ
![スクリーンショット 2023-12-17 14.34.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211061/434f0a91-c44e-7ea3-4c7f-be6e8ac98ed0.png)
この画像の左から2番目のアイコンを選択状態にしてページリロードするとスマホ表示が確認できます。皆さん、これを何て読んでいますか？モバイルモード？スマホ表示モード？社内ではSPモードと呼ばれているのですが、「chrome SPモード 遅い」なんてググってもちっとも答えに辿りつかずでした。。同様にモバイルモードとかシミュレータモードとか色々試してもダメ。
（余談ですが、英語で調べていれば答えに辿りつくのが速かったかもしれない）

## chatGPTに聞く
![スクリーンショット 2023-12-14 15.20.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211061/20a5921c-1532-adae-3d35-faefea7ebcda.png)
結論から言うとchatGPTがいくつか挙げてくれた要因からNetwork throttlingがslow 3Gになっていることに気づき、
![スクリーンショット 2023-12-17 14.44.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211061/c9f04323-f8c6-ea0b-d5e0-641605c488ac.png)
これをNo throttlingに設定することでPC表示同等の読み込みが出来るようになりました！

## おわりに
まさかNetwork Conditionもエミュレートされているのは盲点でした。。また一度設定をするとなかなか触る機会がないので、チームのエンジニアも覚えていなかったようです。未来の自分がまた苦しまないように記事化しました。経験が浅いドメインに関する問題を解決するのに、chatGPTにブレストしてもらうといい感じかも！
いい感じのリンクを楽々に作れる商品紹介します

:::note info
この記事は、[SmartHR Advent Calendar 2023](https://qiita.com/advent-calendar/2023/smarthr)(シリーズ2)の16日目の記事です。
:::

## これ何
* リンクを便利にコピーしてくれる chrome拡張: cocopy を紹介するだけの記事です
* SlackなどのチャットツールでMarkDownのリンク記法ややめんどいな〜と思っている方におすすめです

## ことの始まり
チャットツールでしばしば長めの文を見かけることがあると思います。その時に
![](https://s3-ap-northeast-1.amazonaws.com/kufutools-codimd/uploads/upload_ad507fefdb2dab057c8c63fb997a54f3.png)

とリンクが長いテキストの中にそのまま表記されているよりは、

![](https://s3-ap-northeast-1.amazonaws.com/kufutools-codimd/uploads/upload_b57fdb3411a03bb63f34ca0ffa4379a1.png)

↑のように表記されている方が、ただでさえ読む気が起きない長い文を読むきっかけの一つになると、個人的には思っています。

### とはいえ
普通にリンク貼り付けるだけよりは 3mmくらい工数がかかるのと地味に困ったケースがあったので以下に紹介します。

【ケース1】
```
[]() <- どっちにURL入れるんだっけ...？
```

【ケース2】
```
1: []() を用意
2: 表示テキスト用の文字をコピー
3: [コピーしたテキスト]() <- 貼り付ける
4: URLをコピー
5: [コピーしたテキスト](URL)
```

＿人人人人人人人人人人人＿
＞　地味にめんどくさい　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣


## そんな時にcocopy

[cocopy chrome拡張](https://blog.pokutuna.com/entry/introduce-cocopy)
[作者のブログ: js を書いて URL やページの内容を加工してコピーできる Chrome 拡張ココピーのご紹介](https://blog.pokutuna.com/entry/introduce-cocopy)

デフォルトのままでもボタン押すだけで、ページのタイトルとURLを [見やすい感じ](https://example.com/) にしてくれるので嬉しい！


「めちゃ便利〜」と思っていたある日、こんなことが...

![](https://s3-ap-northeast-1.amazonaws.com/kufutools-codimd/uploads/upload_8890bbf4cbfb052f49289d5593be3694.png)

↓こうなった

[自分のスクラム プロジェクト - アジャイル ボード - Jira](https://example.com/)

**...ちょっと思ってたんと違う（それはそう）**

そしたらタイトルがあるページ移動して押せばええか...

![](https://s3-ap-northeast-1.amazonaws.com/kufutools-codimd/uploads/upload_391a475aa941a64c6ccfe31da278ebeb.png)

↓こうなった

[\[SCRUM-1\] 素敵なユーザーストーリー - Jira](https://example.com/)

**` - Jira` がやや邪魔...**

＿人人人人人人人人人人人人人人人＿
＞　かゆいところに手が届かない！　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣


焦らないでください

### ここからがマグマなんです
[github: cocopy](https://github.com/pokutuna/chrome-cocopy)

![](https://s3-ap-northeast-1.amazonaws.com/kufutools-codimd/uploads/upload_7e66007e97bcde553e7401e1263db5f0.png)

デフォルトの `title` を受け取っている部分を `selectingText` に変えて...

```jsx=
// --- before ---
({title, url}) => {
  const escaped = title.replace(/[\[\]]/g, '\\$&');
  return `[${escaped}](${url})`;
};
```

`title` -> `selectingText`

```jsx=
// --- after ---
({seletingText, url}) => {
  const escaped = seletingText.replace(/[\[\]]/g, '\\$&');
  return `[${escaped}](${url})`;
};[]
```

こうして
![](https://s3-ap-northeast-1.amazonaws.com/kufutools-codimd/uploads/upload_3ef7824bba7150a0300c1579c32930c1.png)

### こう
![](https://s3-ap-northeast-1.amazonaws.com/kufutools-codimd/uploads/upload_39b1faa240ffe4518a9504b4f2effb72.png)

**:tada: ジャジャーン :tada:**
[素敵なユーザーストーリー](https://example.com/)

＿人人人人人人人人人人＿
＞　もうかゆくない！　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣


> 利用者が js を書いてフォーマットを追加できます。

と作者もおっしゃっているので、かゆくなったらまた何かできそうです。


# それではよいコピーライフを！
ジオメトリノードでダイナミックなアニメパース変形

3Dのアニメーションでは手書きで見られるようなダイナミックな誇張を再現するのに
カメラ方向に大きく腕を伸ばしたりといったことも行われます

今までも色々な方法が使われてきた手法ですが、ジオメトリノードを使うことで
より細かく　色々なコントロールができるので検証してみます
![23121601.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/fe1ab680-60f0-503b-0064-95362885ca2b.gif)
因みにBlenderにおいてジオメトリノードはモディファイアとして機能するので
上の動画のようなアーマチュアの他、シミュレーションで動かしたメッシュの見た目を制御するといったこともできます

## Blenderのカメラ座標
Blenderのカメラの座標は　カメラから見て右が**X**上が**Y**　奥行は手前方向に**Z**となっていて
オブジェクトとして回転が0の状態では　カメラが真下を向く座標となっています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/e58ad768-184f-9612-afeb-1242322bc657.png)
この座標軸に沿った方向にオブジェクトを変更できれば　カメラからの見た目を制御できることになります。

まずはメッシュ全てをカメラ方向に平行移動してみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/fe58f975-4f1e-3f27-f964-61401d09d21a.png)
「オブジェクト情報」で使用しているカメラの回転情報を取得して Z方向のベクトルを回転させるこどで
カメラ方向へ移動するベクトルを得ています。
オブジェクト情報のトランスフォーム空間の設定は「相対」に設定しておいてください

同様に　[1, 0, 0]や[0, 1, 0]のベクトルを　カメラオブジェクトの回転を利用して回転することで
カメラ基準でのX方向やY方向の移動に必要な単位ベクトルを得られます

## 距離に応じた変形

トランスフォーム空間を「相対」にしたオブジェクト情報の「位置」で取得できる値は
ジオメトリノードを使用しているオブジェクトと 指定しているオブジェクトの原点の**相対位置**です
各頂点の座標との差で 指定オブジェクトから見た各頂点の位置ベクトルを取得することができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/cf012cc0-a3f7-c53e-4de1-0d597b29b187.png)
この位置ベクトルと さきほどのカメラのZベクトルとの内積で　カメラ座標のZ値を取得できます
「範囲マッピング」を使って「一定のZよりZ値が小さい（カメラに近い）ほど移動量が大きい」ようにすると…

伸びた感じになりましたね


## XYでの補正
カメラから見たZ方向で伸ばすのみだと　オブジェクトがカメラから外れやすくなります。
カメラ座標のXYでの移動量を足します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/e5f32058-56f6-a65c-78b7-a4d8cfebafb0.png)
画面内に収めるよう調整できるようになりました

## ノードの整理
これまでのノードの計算をまとめて　ジオメトリノードとして使いやすいよう整理します
また　頂点グループで影響を制御できるようにしました
スイッチノードの部分は　頂点グループ名を指定していない場合にはこれまで通りの値にするための処理です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/5a3fe382-40fe-77f4-a8d7-930448339e35.png)
キャプチャの一番右の人形の腕だけにウエイトを割り当てています
真ん中では顔が伸びているものが　伸びていないのが分かるでしょうか

グループ入力のノードは複数配置することができるので　リンクの線を伸ばすのではなく散らして配置しています
## さいごに
ここまでの解説のノードには入れませんでしたが
上記のものとよく似た計算で　カメラからの見た目の平行移動ができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/35f4d171-676c-acd8-22d3-6728e9393bc9.png)
また、今回と違った計算で、伸ばすのではなく　近づくほどオブジェクトが大きくなるといった実装もできます
色々試してみてください。

今回の解説では[mixamo](https://www.mixamo.com/) からダウンロードしたFBXモデルを利用しましたが
デフォルト設定でインポートすると　親のアーマチュアオブジェクトに0.01のスケールが入った状態になり
変形のかかり方も100分の１になります。
この記事ではそれは考慮に入れず、スケールを適用したモデルで解説しました。

因みに途中から範囲マッピングの補完方法を　**SmoothStep**変更していますが
SmoothStep にすると効果のかかる境界が滑らかになって変形の違和感が出づらくなります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151493/27ded040-a890-d35a-b51c-7b302bfe4ccc.png)
SmoothStepの変換のグラフを図示すると右側のオレンジの曲線のようになります
PHP学習～出力・入力～

学習内容の備忘録。


参考サイト：paiza 

## 文字や数字の出力

```
<?php
    echo "Hello";  //文字列の出力
?>
<?php
    echo 12345;　　//数値の出力
?>
<?php
    echo "Hello".12345."\n";  //改行して出力する際には"\n"を末尾に記述する。
    echo "Hello".12345;　　//　「.」で連結する。
?>
```

## 文字や数字の入力

```
変数名 = fgets(STDIN);
変数名 = trim(変数名);
```

fgets→指定したデータから文字列を受け取る命令（標準入力からデータを受け取る場合STDIN）
trim→文字列の先頭や末尾にある空白を削除する命令。
Software Design 2023年10月号感想

# はじめに
[Software Design Advent Calendar 2023](https://qiita.com/advent-calendar/2023/softwaredesign) 17日目の記事です。
Software Design 2023年10月号を読んで気になったキーワードや所感を記載していきます。

# 第1特集 今さら聞けないネットワークセキュリティ 攻撃手法や防御システムの基本を押さえて守りを固めよう

普段からセキュリティのアップデートについてキャッチアップするようにしているが、あくまで点としての情報なのでこういう特集はありがたい。

- 2つのネットワーク形態、オープンネットワークとクローズドネットワーク
    - クローズドでも不正な持ち出しや内部犯などに目を光らせる
    - 企業内のネットワークはオープンとクローズドが混在している

情報セキュリティにおける7大要素と対策例の表は大事。
以下の要素は、気にするべき観点として備えていたが要素に含まれるものであることを忘れていたので反省。

- 真正性（本当にアクセスすべき人かどうかを担保）
- 責任追及性（トレーサビリティ）
- 否認防止（証拠を残して否認させない）

標的型攻撃を整理・監視するためのフレームワーク「サイバーキルチェーン」
7つのステップを順に紹介。図と説明、補足するようなコラムがあってわかりやすい。
（C&Cと聞くとカレー屋さんを思い浮かべるのは私だけではないはず）
図8の元ネタとなったトレンドマイクロさんの[サイト](https://www.trendmicro.com/ja_jp/security-intelligence/research-reports/threat-solution/bot.html)はじめて知った。他のコンテンツ含めて概要を掴むのによさそう。

- サイバー攻撃への対策
    - 多層防御
        - 入口対策
        - 内部対策
        - 出口対策

ファイアウォールで防げる攻撃、防げない攻撃がある。ファイアウォールの特徴を把握した上で対策が必要。ファイアウォール入れとけば安心ではない。
ファイアウォール、IPS、IDSの説明ありがたい。

- IPS：不正な動きを遮断
- IDS：不審な動きを検知
    - IDSでも通信の遮断機能を有している製品もある

WAFを登場させるまでの話の展開がよい。HTTPプロトコルでやりとりされるリクエストラインやヘッダなどをパースして分析する。
SASE（サシー）とXDR。XDRが検知・収集したテレメトリとリスク評価情報はSASEのポリシー強化に活用できる。自分の周りではXDRを最近よく聞く。

- CSAB

VPN機器を狙った攻撃はよく聞くようになってきた。VPNだからって安心ではない。
記事にある4つの対策を検討していく。VPNに多要素認証という観点抜けてた。
暗号化の部分は基礎的な説明にしますと記載してるけど、分かりやすく丁寧な解説。

コンテナセキュリティのRASP気になる。NISTの[ガイド](https://nvlpubs.nist.gov/nistpubs/specialpublications/nist.sp.800-190.pdf)も把握しておく。
最後の要件をまとめた表が最高。

# 第2特集 速習HTTP/3 次世代プロトコルに対応するための知識を身につけよう

時代に追いついてないのでHTTP/3特集に感謝。2022年6月にHTTP/3が標準化。もう1年以上経ってるのか。HTTPの歴史ありがたい。

- HOL Blocking
- HPACK
- プロトコル硬直化

HTTP/3では以下をQCUIKに任せている

- HTTP/2が持っていたストリームによる多重化
- TCPが担っていたコネクション管理

現代ではサーバプッシュよりも103 Early Hintsが有用として期待されている。パフォーマンス向上に繋がるかも。

2つ目の記事もHTTP/3について異なる表現で解説されていて理解がより補強される。
DCIDとSCIDでセッション維持やサーバへのルーティングなどの挙動を実現。図4のHOL Blockingの解消がわかりやすい。HTTP/3は暗号化必須、2023年7月現在はTLS1.3のみサポートしている。
ブラウザ側でHTTP/3で接続すべきかどうかを判断する2点

- Alt-Svcヘッダ
- DNSのHTTPSリソースレコード

UDP Flood攻撃について少し前にニュースで見かけた。
HTTP/3のメリデメとまとめが今時点の取るべきスタンスの参考になった。
3つ目の記事、実践HTTP/3は今までの記事を踏まえてより具体的な実装に踏み込んだ内容。これを読みながらnginxでHTTP/3を試してみよう。注釈の数が多くてわくわくする。

# 一般記事、広告記事、連載

気になる記事だらけだけど、いくつか抜粋

## ［特別企画］熟考クラウドセキュリティ「CNAPP」の実現のために

Cなんとか系で始まる用語が多くて混乱しているので、この記事で整理できる。
CSPM, CWPP, CIEMなどを組み合わせた形をCNAPP（シーナップ）と呼ぶ
cloudbaseさんが紹介されていた。[公式サイト](https://cloudbase.ink/)
iDOperationは利用した経験あり。国産サービスは長く続いて欲しいと思う。

## MLOpsのすすめ

第三回は方針策定とツール選定
ツールを使うことよりも先に、ツールを使う目的を明確にすることが最優先である。
モデルの比較、評価指標を定める、開発と運用のワークフローを作る。

そこそこの正解率でよいレベルで実現したいものがあれば積極的にMLOpsを採用していきたい。
パっと思いつくのは、システムのパフォーマンスチューニングとトラブルシュート。
SaaSもあるので、コスパを考えて検討していきたい。

## 位置情報エンジニアリングのすすめ

第三回は位置情報に触れる、加工する
QGISは、地理空間情報データの閲覧、編集、分析ができるOSSのGISアプリ。

区ごとの学校の数、数によってポリゴンを色分けしているのがおもしろい。
ツールの具体的な使い方が解説されていると理解しやすい。
QGISを使ってなにか面白いことできないだろうか。

# 全体的な感想

特集のネットワークセキュリティとHTTP/3は豪華な2本立てという感じがした。ネットワークセキュリティは、基本的なところから始まり、徐々に深掘りしていく展開は分かりやすかった。HTTP/3はゆるふわ理解だったので、最も収穫が多かった。

生成系AIの記事が増えている印象がある。進歩するスピードが早いため、こういう雑誌でのまとめが参考になる。その一方で新たなアップデートにより、古いものとなる可能性もある。継続的にチェックしていこう。
【Unity初歩】~効果音を鳴らしてみる~

# はじめに
前回、クリアするとクリアシーンに遷移するようになりました。
今回は🦀がジャンプをしたときに効果音が鳴るようにしてみました。

前回の記事

https://qiita.com/usomaru/items/d8c0f77ef31db5369e3e

# 使用した効果音

こちらのサイトのフリー効果音を拝借することにしました。

https://taira-komori.jpn.org/game01.html

利用規約はこちら

https://taira-komori.jpn.org/welcome.html

# 代表的な使用できる音源ファイルの拡張子
- .mp3
- .ogg
- .wav
- .aiff/.aif

# 効果音の鳴らし方

ダウンロードした効果音をプロジェクトウィンドウにドラッグアンドドロップで移動させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/c79d4f95-e78b-d28a-befd-4b40f6307e98.png)

音を鳴らしたいオブジェクト(今回は🦀)のコンポーネントを追加します。
🦀オブジェクトを選択し、Add Componentをクリックし、「Audio」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/c1dbda3b-e5a6-fc18-28e7-bfcc289019e1.png)

さらに、「Audio Source」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/af47338e-3230-26aa-f34e-891432732281.png)

コンポーネントが追加されたら、「AudioClip」にプロジェクトウィンドウにある効果音ファイルをドラッグアンドドロップで足します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/48ae6687-689a-103e-88f2-25c0144e09a5.png)

「Play On Awake」のチェックを外しておきます。
これにチェックが入っていると、ゲーム開始時点から音楽が流れてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201826/0a4a02e8-def4-529c-d8b6-c4a3f3c95447.png)

# 効果音を鳴らすソースコードの追加

PlayerControllerのジャンプする部分のソースコードに以下の効果音とコメントされている部分を追加します。

```C#
// ジャンプ
if (Input.GetKeyDown(KeyCode.Space))
{
    // 効果音
    GetComponent<AudioSource>().Play();

    this.rigidBody2D.AddForce(transform.up * this.jumpForce);
}
```

Playメソッドで音楽が流せます。

これでジャンプをした瞬間に音が鳴るようになりました。

# おわりに
このゲームもほぼ完成です！
クリスマス🎄も近いので、最後に🎄らしい装飾をしたいと考えています。
システムトラブル発生！どうする、ITサービスマネージャー？

前回、ITサービスマネージャーの価値をテーマに記事を書きました。
そんなITサービスマネージャーが大活躍するシチュエーションのひとつがシステムトラブル発生時です。
今回は、システムトラブル発生時にITサービスマネージャーがとるべき対応について書いてみたいと思います。

# システムトラブル発生！まず何をする？
運用保守端末の画面にエラーメッセージが出力され続けている…
電話が鳴り止まない…
システムトラブルが発生した瞬間、どのような行動をとりますか？

まずはメンバを召集し、トラブルからの早期復旧のため原因解析に全集中！メンバ全員で分析！
…となりがちですが、同時に、お客様業務やユーザへの影響範囲を見極めることが重要です。

ITサービスマネージャーとして、システムで実現すべきお客様やユーザの業務を成り立たせていくことが大切なミッションだからです。

# 何が起きている？マシン室から視野を拡げよう。
システムトラブル発生時にはマシン室でモニターとにらめっこになりがちですが、多角的に状況を把握することも大切です。

私の場合は長く公共系システムを担当していましたので、システムトラブル発生時には初動として、Twitter（X）で該当サービスをキーワード検索し「使えない！」とつぶやかれていたりしないか、ユーザからの問合せを受け付けるコールセンター部門に似たような電話がきていないかヒアリングする等の点検を行っています。

このように、マシン室から視野を拡げて、いま何が起きているかを多角的に把握することが重要です。

# 一手先、できるなら二手先を考える。
メンバが全力で目の前の対応をしているときでも、ITサービスマネージャーは「次に何をするか」を考え始めるべきです。

例えば、メンバの関心が原因分析に集中しているときには「次は対処の検討が必要になるから関係者を召集し○時に会議を設定しておこう」とか、
対処検討が終わり実行待ちのフェーズでも「対処が終わったらお客様への報告が必要だから、終わった前提で報告文書を作り始めておこう」と先々のことに考え及んでおくことが迅速なトラブル復旧に繋がります。

# まとめ
このようにITサービスマネージャーには、運用保守現場を仕切る役割だけでなく、大局的かつ将来を見据えたアクションが求められます。

システムトラブルが発生したときこそ、落ち着いた判断と前向きな行動でITサービスマネージャーが本領発揮するチャンスなのです。
サンタさんからいっぱいプレゼントもらおうぜ！（クソゲー）

# はじめに

本記事はプロもくチャット Adevent Calendar2023の19日目です

https://qiita.com/advent-calendar/2023/puromoku

# サンタさんからプレゼントもらうゲーム作りました

実装はTypeScript+Phaser3です

![CPT2312171400-802x602.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/c372c8d3-6a50-edee-d3cd-400b752d1c6d.gif)

れいによってSP版もある

![CPT2312171400-375x667.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/47d55cad-aa95-6367-6f02-8366f35de6d2.gif)

これでプレゼントもらい放題や！！！

ポチポチィ！！！ポチィ！！！！！ｗｗｗｗｗ！！！！ﾁｮｷﾌﾟﾘｰｗｗｗｗｗｗｗｗｗ

あ、なんか目から汗が・・・

# ルール

サンタさんが落としたプレゼントを地面に落としたらゲームオーバー

でもサンタさんはおっちょこちょいなので、たまにトナカイを落とします

トナカイはサンタさんのものなので拾ったらゲームオーバーです

# URL

https://babu-ch.github.io/santa/

# ソース

https://github.com/babu-ch/santa

メインのソースは↓
https://github.com/babu-ch/santa/blob/main/src/scenes/MyScene.ts

基本的には前回までの「スイカゲーム作ってみた」のコピペです

https://qiita.com/babu-ch/items/b5ac12d59b0be19d5e61

今回はサンタさんがプレゼントを定期的に落とすのでタイマーを使ってみました
```js
        // プレゼント落とすイベント開始
        this.dropPresentEvent = this.time.addEvent({
            delay: DROP_ITEM_DELAY,
            callback: this.dropPresent,
            callbackScope: this,
            loop: true
        });
```

イベントを止めるときはremoveEventを使います
```js
        this.time.removeEvent(this.dropPresentEvent!)
```

# おわり

gravityの設定で困ったこと
PCだと0.2でいい感じなのに、スマホ実機だとすげーおそかった
なんで？
```js
    physics: {
        default: "matter",
        matter: {
            // debug: true,
            gravity: { y: isPc ? 0.2 : 1.2 }, // PCとスマホ実機で落下速度が違ったのでとりあえず調整 なぜなのか？
            enableSleeping: true
        },
    },
```
要件定義から設計で完全を目指さない！諦める勇気を持とう！

「[人数半減の中で総開発量UPを実現させた秘訣 by エイチームコマーステック Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ateam-commerce-tech)」の8記事目(18日目)は村林がお送りします。よろしくお願い致します！

我々は少数人数でエンジニアを運営しています。トータルの工数が少ないため、当然やれることが限られてしまいます。
今までご紹介してきた効率化によってやれることは増えましたが、それでもすべてのやりたいことを実施するのは困難で取捨選択が必要になります。
今回の記事ではその取捨選択で重視している考え方の一部をお伝え出来たらと思います。

## 負債と工数のバランス

何らかの開発をするときに設計Aだときれいだけど開発工数がかかる、設計Bだとわかりにくいけど開発工数が短縮できる。このような選択で迷ったことはありませんか？
エンジニアであれば自分たちの作品(=ソフトウェア)をきれいに保ちたいという心理が働くでしょうから、開発工数が多少かかっても後に負債を残す設計にはしたくないという心理はあるでしょう。
一方で我々はビジネスの観点から見れば、早くユーザに使ってもらうということが重要であり、開発工数短縮が重要事項です。
この「負債」と「工数」はそれぞれ対立します。どちらが間違っていてどちらが正しいか？というのは一概に言えるものではありません。
「負債」と聞くと何やら悪いもののように聞こえますが、必ずしもそうではありません。前述したとおり負債を許容することで開発スピードが上がりビジネスが加速し儲けにつながる場面も存在します。一方で、負債の種類や量によってはその後の開発スピードを大きく落としてしまったり、重大な不具合に繋がるようなものもあります。
我々は少数組織であるため負債を完全につぶすために時間を使っても、負債がたまって開発効率が落ちても、問題が致命的になってしまいます。つまり、うまく負債を使えるかどうかで、ビジネスが加速するか、衰退するかがかかっています。

まず、我々の組織では「許容すべき負債」と「許容すべきでない負債」があることを全員の共通認識としました。
そのうえでこのような選択のシチュエーションが発生した際に、徹底的に議論をすることにしました。幸いなことに以前のお伝えしたコミュニケーションの改善でこれらのことが非常に気軽に話せるようになっていたので、多くの選択を抜けもれなく話すことができています。
またこれから開発しようとしている機能が一時的なものなのか、利用が拡大していくものなのかで大きく判断が変わる可能性もあります。場合によってはビジネスを考えている非エンジニアメンバーからの意見も募りながら判断をしています。


## ソフトウェア規模を抑えるということ

当たり前の話ですが、規模が大きなソフトウェアになればなるほど、追加開発や管理の工数が増加していきます。これらを小さく保つことが少数組織で運営する一つのカギになります。
使っていない機能や、コードを削除するのは当然行います。負債の話を前述しましたが利用していないコードがあるのは許容すべきでない負債だと認識しできる限り早く対処を行っています。そのコードが生んでいるビジネスインパクトが全くありませんし、比較的対応が容易であるためです。コードの削除は静的解析やE2Eの整備もしたので気軽に行うことができるようになっています。

使っている機能やこれから作ろうとしている機能の見直しも必要だと考えています。利用価値の低いと思われる機能や他機能と統合できそうな機能は対応します。当然利用している方々がいるため、エンジニアの独断では判断ができません。そのためビジネスの方針を考えているメンバーへ機能を消したいという話をエンジニアからしに行きます。

これらのことを行ったことで、機能開発も当然続けていたにも関わらずソースコードの増加量に変化がありました。

![____________________________2023-12-17_14.08.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316506/6c74f66b-a371-8a18-9a9b-8480c87e9cad.png)


これまでフロントエンドのコード行数は単調に推移し続けてきましたが、このような意識に改めたことにより減少傾向へと変化しました。
今後も増加と減少を繰り返しながらなるべくソフトウェアを肥大化させることなく運営していくことで、少人数組織でも開発し続けられる環境を目指していきます。

## 最後に

我々のような少数組織ではすべての開発を理想通り行うことは困難です。そのため一定設計においても、要件においても諦める必要が出てきます。何を諦めるかはエンジニアだけではなく、ビジネス観点の考えも持たないと判断を失敗してしまいます。エンジニアとビジネスを考えているメンバーの距離を近くにすることで、ビジネスを考えているメンバーの話を気軽に聞けますし、エンジニアにも様々な情報が入り自力での判断もしやすくなります。

今回の記事では諦めることも重要という話をしました。次回記事ではより具体的にやめたことやその理由を紹介する予定です。
ご興味ある方はぜひご購読をお願いします！
Flutterプラグイン"speech_to_text"のBluetoothをオフに

Flutterで端末の音声入力APIを利用できるspeech_to_text。権限周りの補足的記事です。

基本的な使い方については、既に多くの日本語記事がありますので、本記事では割愛します。

https://pub.dev/packages/speech_to_text

# プラグインによるBluetoothアクセスをオフにする

speech_to_textはヘッドセットなどBluetooth接続される外部デバイスに対応しています。

2023年12月現在、最新バージョンではデフォルトの動作はBluetoothアクセスをユーザーに求める形となっています。

外部デバイスを利用する前提なら問題ありませんが、そうではない場合は余計な権限要求は避けたいところです。そこで、プラグインインスタンスを作成する際に次のとおりオプション設定を行うことで、Bluetoothをオフにすることができます。

```Dart
import 'dart:io';
import 'package:speech_to_text/speech_to_text.dart';

final SpeechToText speechToText = SpeechToText();

//権限設定について環境に応じたオプションを指定
//Platformクラスはdart:io内に定義されています。
final options = [Platform.isIOS ? SpeechToText.iosNoBluetooth : SpeechToText.androidNoBluetooth];

//イニシャライズ時にオプションを指定
final available = await speechToText.initialize(options: options);
```
2/A - RGB Cards解説

倍数判定問題です。

```python

A = list(map(int, input().split())) #入力内容を整数リスト化する有名な方法。暗記。
num = A[0]*100 + A[1]*10 + A[2] #入力内容を題意に沿うように計算。

print('YES' if num%4 == 0 else 'NO')

'''
if num%4 == 0:
   print('YES')
else:
   print('NO')
でもいいですが、内包表記は使えた方がいいです。

'''
```
PostmanからNode-REDへMQTT接続してみた

# はじめに

2023年12月5日にPostman日本上陸記念イベントでLT登壇してきました。

https://www.postman.com/jp/events/postman-japan-launch/

https://www.slideshare.net/kitazaki/20231205postmankitazakiv11pdf

https://qiita.com/kitazaki/items/8c7511fdc1dbeaf62a88

そのイベントで、PostmanがMQTTプロトコルをサポートしたと聞き、リリースページを確認しました。

https://blog.postman.com/postman-supports-mqtt-apis/

MQTTはIoTではお馴染みの(欠かせない)通信機能です。
さっそく、Node-REDのAedes Brokerノードと接続確認をしてみました。

# MQTTコレクションの追加

「新規」(New)を押して「MQTT」を選択します。

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/66eb22aa-aa5f-c509-4743-9a9259d10296.jpeg)

![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/2637dccb-8232-c565-09c8-3a3861188542.jpeg)

![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/38344e10-4f09-f8ec-34b8-5cd68edc8cd0.jpeg)

接続先のホスト名を入力して「Connect」ボタンを押すと、「Switch to Postman Desktop Agent to connect with an MQTT Broker」と表示されます。

![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/9ec36686-8891-ac20-967d-ccd7759e0d85.jpeg)

まだ、Postman Desktop Agentを使用したことがなかったので、調べることにしました。

# Postman Desktop Appが必要

Postman Web App (ブラウザ)からはMQTTコレクションの設定は行うことができますが、実際に接続する(「Connect」ボタンを押す)とエラーが表示されます。

Learning Centerのページを確認すると、Postman Desktop Appが必要だと分かりました。

https://learning.postman.com/docs/sending-requests/mqtt-client/mqtt-client-overview/

デスクトップアプリケーションのダウンロードページはこちらです。

https://learning.postman.com/docs/getting-started/installation/installation-and-updates/

https://www.postman.com/downloads/

対象のzipファイル(私の場合は、Mac Apple Chip版)をダウンロードして解凍します。

![スクリーンショット 2023-12-13 9.49.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d51a6be0-715d-3c3e-7acc-59fa19ea4f89.png)

![スクリーンショット 2023-12-13 9.49.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/fa66754c-f848-1d4a-900f-b2f5ae2e48e7.png)

デスクトップアプリケーションを起動します。

# デスクトップアプリケーションで動作確認

見た目はウェブアプリケーションと変わりません。

![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d20025d8-bae0-fb53-b2a9-5750d5d2c4b8.jpeg)

「Connect」ボタンを押すと、今回は正常に接続されました。

![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/bfe5eb50-66c1-e9a3-ed3e-5ec5c79f7beb.jpeg)

「Message」タブでJSONメッセージを入力します。

![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a717ad67-e9c5-a185-d22b-b2371f53f988.jpeg)

「Topics」を入力して「Send」ボタンを押します。

![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/cd92c554-7644-eb3a-ac08-040e458fac3a.jpeg)

Node-REDで正常にMQTTメッセージを受信できていることを確認できます。

![9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/4dc08da0-f432-3ced-465e-40032caaf6a6.jpeg)