OmniAICreator/Qiita-1.07M huggingface dataset:
tasks.jsonにpkg-configを記入する方法

# 対象読者

* VSCodeを使ってc/c++をビルドする人
* tasks.jsonでpkg-configを利用したい人

# 結論

* コマンドと引数を""で囲む
``` `pkg-config --cflags --libs gstreamer-1.0\` ```
　　　　　　　　↓↓↓
```"`pkg-config" "--cflags" "--libs" "gstreamer-1.0`"```

```
"args": [
                "-fdiagnostics-color=always",
                "-g",
                "${file}",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}",
                "`pkg-config",
                "--cflags",
                "--libs",
                "gstreamer-1.0`"
            ],
```

 # 経緯

 * コマンドラインでは次のように簡潔に書けるのだが、VSCodeでpkg-configを指定する方法が分からなかった
 ```gcc basic-tutorial-1.c -o basic-tutorial-1 `pkg-config --cflags --libs gstreamer-1.0\'```
 * 仕方がないのでインクルードパスとライブラリを一つずつtasks.jsonに記載していた
 ```
 			"args": [
               ・・・
                "-I/usr/include/gstreamer-1.0",
                "-I/usr/include/glib-2.0",
                "-I/usr/lib/x86_64-linux-gnu/glib-2.0/include",
                "-lgstreamer-1.0",
                "-lgobject-2.0",
                "-lglib-2.0"
```
 * GStreamerだけならなんとか我慢できたが、gtkを使用する際にインクルードパスを一つずつ記入するのは余りに面倒だったので、tasks.jsonにpkg-configを記入しようと考えた
 * Internetで調べたところ、次のように書けば出来そうだったがエラーとなり、原因がつかめず困ってしまった
 ```
 			"args": [
    　        ・・・
              "`pkg-config --cflags --libs gstreamer-1.0`"
              ],

 ```
 * 次のページを見つけて、引数類を""で囲んだところ、pkg-configが実行されるようになった
https://www.reddit.com/r/vscode/comments/1ages23/using_backticks_inside_tasksjson/
* 今後は別のライブラリが必要になっても簡潔に書けそうです！
WindowsでのDocker Networkを理解する

Windows上でWSLとDockerを併用しながら、Stable DiffusionやLLMなど生成AIの環境や、将棋AIの環境を構築するにあたって、Dockerコンテナとのネットワークがようやく理解できてきたので、解説したいと思います。

Docker Networkについて、本家のDocsのネットワークに関する解説や、Qiitaの記事等も参考にさせて頂きましたが、いずれもLinux環境における話のようで、Windows環境では食い違うことがあり、仕方がないのでLinuxとWindowsを比較し、実際にアプリケーションと通信させながら確認をしていきました。

# ポイント
Windowsでは、docker0というネットワークはできません。
Dockerのネットワークと、ホストのネットワークはIPルーティングできません。すべてIPアドレス変換(IP Masquerade)されます。
外部からのアクセスには、ポートフォワーディングの設定が必須です。

# ネットワーク構成図
以下の図は、特別な設定をせずに、Dockerをインストールしてコンテナを起動した場合のネットワーク構成になります。

![スクリーンショット 2024-03-27 094923.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212141/ba523506-250f-15a0-fd3e-c631591ea0dd.png)


点線が1台のWindows PCで、それがルーターを介してインターネットに接続されています。物理的にはそれだけの構成です。

PCの中に、仮想的にWindowsアプリケーションが動作するホストOS、WSL2で動作するUbuntu、そして、Docker上のコンテナが存在しています。
Virtual RouterやLocalhost Networkというのは私が仮に置いたもので、こう考えると分かりやすいので加えました。

青線がIPのサブネットとなっているのですが、一番上の物理ネットワーク(192.168.1.0/24)と、WSL2の仮想ネットワーク(172.20.64.0/20)は、Windowsを介してルーティング可能となっています。

しかし、コンテナのサブネット(172.17.0.0/16)は、物理ネットワークともWSL2ともつながっておらず、孤立したネットワークとなっています。

しかし、コンテナを単に起動した場合、コンテナからインターネットへの通信は可能です。

これは、左下のVirtual Routerが、アドレス変換を行って、PCの物理ポートのIPアドレスからの通信に変換することにより、外部に出ることができるようになっています。
これは、家庭内からインターネットにアクセスする際と同じ仕組みです。

逆に、外部のどのネットワークからも、コンテナのサブネットにはアクセスすることは当然できません。しかも、外部だけではなく、ホストOSのWindowsやUbuntuからもアクセスすることができません。

では、どうやってコンテナのサービスにアクセスするのか。ここで、コンテナ起動オプションの-pを使用します。

```
-p ホスト側のポート番号:コンテナ側のポート番号
```
とすることで、ポートフォワーディングの設定が行われます。

例えば、図の構成では、Container 1の起動オプションとして、-p 8080:80 と付加すると、2つのマッピングが行われます。

一つは、左下のVirtual Routerにおいて、外部からの送信先192:168.1.23:8080は、172.17.0.2:80に変換されます。また、内部からの送信元172.17.0.2:80は、192:168.1.23:8080に変換されます。

もう一つは、ホストOSのlocalhost:8080への通信は、コンテナの0.0.0.0:80に変換されます。

ですので、Container 1で、172.17.0.2:80でLitsenしておけば、外部からそのサーバーへのアクセスが可能になります。
同じく、0.0.0.0:80でLitsenしておけば、localhost:8080としてアクセスが可能となります。

-pの設定には、IPアドレスを含めることができます。
ネットワークが複雑になった場合でも、上記の考え方を応用すれば、どうすれば良いのかが分かってきます。

# 考察
Linux環境でも同じことをしてみましたが、Linuxの方がネットワーク的にすっきりしています。ただ、結局必要な設定は同じです。コンテナの内部ネットワークは、外部からの通信を遮断しており、ポートフォワーディングのような設定を行わなければ、ホストとの通信もできません。開発環境としては不便ですが、実運用の環境としてはそれがベターだと思われます。
私が一番はまったのは、ポートフォワーディングの設定をしたにも関わらず、コンテナ側でStable diffusion webuiが起動したWebサーバーにlocalhost:7860で全くアクセスできず、nginxのデフォルトのコンテナにはさくっとアクセスできるという状況に陥った時です。最初はLinuxのセキュリティの設定かと思い、一つ一つ潰していきましたが、ゲストOSの設定に違いはないという結論に至るまで数日掛かりました。結局、LitsenしているIPアドレスが違っているということが分かって、なんで？と思いました。だれか、なぜこんなことになっているのか、理由が分かる人はいないでしょうか？

# 参考

[Docker コンテナ・ネットワークの理解](https://docs.docker.jp/engine/userguide/networking/dockernetworks.html)
[Docker network 概論](https://qiita.com/TsutomuNakamura/items/ed046ee21caca4a2ffd9)
[外部ネットワーク側からDockerコンテナに通信できる環境を作成する](https://qiita.com/ttsubo/items/40162f5001a8c95040d9)
ChromeのアドレスバーからGoogleDrive内を直接検索する

# アドレスバーからGoogleDrive内を直接検索する方法
## 1.Chrome設定にいく
[chrome://settings/search](chrome://settings/search)にアクセス
（Qiitaの仕様上このアドレスは押してもリンクとして開かないみたいなのでコピペ願います）
「検索エンジンとサイト内検索を管理する」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/9741d99a-5f0f-6f8f-c36d-9a254769fd43.png)

## 2.[サイト内検索]の[追加]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/d12d7cda-fe56-66fb-0ed2-1dc26454d706.png)

## 3.設定を入力
検索エンジン
``Google Drive``
ショートカット(アドレスバーに入力するとき使うのでお好みで、自分がわかりすく短い方がいい)
``d``
URL
``https://drive.google.com/drive/search?q=%s``
上記入力して追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/67009046-0507-042a-f309-30577f50104c.png)


## 4.アドレスバーから検索できる
3で設定したショートカット（例の場合d）+スペースキー 入力でDrive内検索モードになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058523/65055e39-b922-c1a9-15fc-ed27e1d098e8.png)


終わり。
シェルスクリプトでUnixタイムを生成、解析（複合）する基本的なコマンドについて

Unixタイム（エポックタイムとも呼ばれます）は、1970年1月1日のUTCから経過した秒数で、シェルスクリプトやその他のプログラミングでよく使用されます。ここでは、シェルスクリプトでUnixタイムを生成、解析（複合）する基本的なコマンドについて説明します。

### Unixタイムの生成

現在のUnixタイムを生成するには、`date` コマンドを使用します。

```sh
# 現在のUnixタイムを取得
current_unix_time=$(date +%s)
echo $current_unix_time
```

### 指定した日時からUnixタイムを生成

特定の日時からUnixタイムを生成するには、`date` コマンドに `-d` オプション（GNU date）または `-j` オプション（BSD date）を使用して、日時を指定します。

```sh
# GNU dateの例（Linux等）
unix_time=$(date -d '2023-01-01 12:34:56' +%s)
echo $unix_time

# BSD dateの例（macOS等）
unix_time=$(date -j -f "%Y-%m-%d %H:%M:%S" "2023-01-01 12:34:56" +%s)
echo $unix_time
```

### Unixタイムの解析（日時への変換）

Unixタイムを人が読める形式の日時に変換するには、再び `date` コマンドを使用します。このとき、`-d` オプション（GNU date）または `-r` オプション（BSD date）を使ってUnixタイムを指定します。

```sh
# GNU dateの例（Linux等）
unix_time=1672410296
readable_date=$(date -d @$unix_time)
echo $readable_date

# BSD dateの例（macOS等）
unix_time=1672410296
readable_date=$(date -r $unix_time)
echo $readable_date
```

これらのコマンドはシェルスクリプトで簡単に使用でき、Unixタイムを生成したり、Unixタイムから日時を得たりする場合に非常に便利です。ただし、`date` コマンドのオプションはOSによって異なる場合があるので、使用するシステムの `date` マニュアルを参照することをお勧めします。
Udemy dockerを学ぶなら

## Udemy講座でdockerを学ぶならおすすめ講座

### 時間ない人向け
https://www.udemy.com/course/linux-docker-compose-dockerfile-kanzennyumon/

こちらは、海外でエンジニアをやられている方が作成しています。
作者の経験から難点やつまづきポイントを押さえて要点をはっきりさせてたった、4時間で完結します。
また、この講座が終了し、dockerの続きで次章として、kubernetes、awsへ導入などもシリーズ化されています。

私の感想
**おすすめの人**
dockerは触れたことあるけど、勉強したことはない。時間がない

**おすすめできない人**
完全に初心者、時間があってdockerをちゃんと学びたい人
このような方には向かないと思います。割と前提知識も必要な箇所がある。しかしながら、ポイントは抑えられていてわかりやすいという点には変わりはありません。

### 時間があり、しっかりと学びたい方
https://www.udemy.com/course/ok-docker/?couponCode=KEEPLEARNING

こちらは、動画時間が10時間ですが、他の動画と違う点は、
docker + webアプリケーション環境構築ではなく、
初めは完全にdockerのみについて触れているのでシンプルかつ丁寧でとてもわかりやすいです。
また、タイトルのように応用部分もあり、そこでは、webアプリケーションや実務ではどのように使われているのかも把握できます。

しかし、入門でしっかり基礎がマスターできるため自分の力で応用部分をこなすことが可能になります。

以上
commitを取り消す方法

# はじめに
今回は、意図しないブランチに対してコミットをしてしまった時の対処法を紹介します
### 本文
自分は普段、AndroidStudio内にあるgitを使って操作をしているのですが、誤って意図しないブランチに対してコミットをしてしまう時がごく稀にあります。
そんな時は下記のコマンドをandroidStudio内にあるターミナルに打ち込むことでコミット状態を差し戻してインデックス状態にすることができます
```terminal
git reset --soft HEAD^
```
### 最後に
今回は備忘録としての側面が強いですが、焦った時にすぐに見つけて落ち着けるように記事を書いてみました。
どなたかのお役に立てれば幸いです
【Nextjs】microCMSからデータを取得する方法

# はじめに
NextjsとmicroCMSでブログサイトを開発していたところ、microCMSからデータ取得するのに時間がかかったので共有します。

# 問題
SSRでどうやってデータを取得すればいいのかわかりませんでした。
データ取得にはmicroCMSが公式で出しているSDKを使いました。

まず以下のようにして、クライアントを作成
```ts:client.ts
import { createClient } from "microcms-js-sdk";

export const client = createClient({
  serviceDomain: process.env.MICROCMS_URL,
  apiKey: process.env.MICROCMS_API_KEY,
});

```

そして以下のようにデータ取得を試みる
```tsx
"use client"
/* 省略 */
const [ blogs, setBlogs ] = useState<Blogs[]>([]);

useEffect(() => {
    const fetchBlog = async () => {
        const { contents } = await client.get({ endpoint: "blogs" });
        setBlogs(contents) // blogsのstateがある。
    }
}, [])

/* 省略 */
```

ところが、以下のようなエラーが出てしまう。
```
Unhandled Runtime Error
Error: parameter is required (check serviceDomain and apiKey)

Source
app/lib/microcmsClient.ts (3:17) @ <unknown>

  1 | import { createClient } from "microcms-js-sdk";
  2 |
> 3 | export const client = createClient({
    |               ^
  4 | serviceDomain: "my-tech-blog-jisou",
  5 | apiKey: process.env.MICROCMS_API_KEY,
  6 | });

```
# 解決策
SSRでデータ取得を実装する。

```tsx
const { contents } = await client.get<{ contents: Blog[] }>({
    endpoint: "blogs",
+    customRequestInit: {
+      cache: "no-store",
+    },
});
```

https://blog.microcms.io/microcms-js-sdk-2_5_0/

# 原因
データ取得を実装した**コンポーネントでCSRを採用していた**ので、クライアントを作成するときの**環境変数**をうまく参照できていませんでした。

環境変数を定義する際にNEXT_PUBLICというprefixをつければブラウザでも環境変数を参照することが出来るようになりますが、APIキーなどの秘匿したい情報がブラウザから参照できてはセキュリティ的な問題があるので、今回の解決策を採用しました。

# 終わりに
Nextjsの仕様をまだいまいち理解していないので、今回躓いてしまったのかなと思います。どんどん使ってみます！

# ✨About Me✨
- 高専1年生です、今年から2年生。高専の方いたらぜひ仲良くしてください！
- X(Twitter)

https://twitter.com/shunii_hack
【HTML】Pythonを学習していたのに突然、HTMLに移行した理由

# はじめに
こんにちは! 中学2年生のWardHamamatsu67です! 今回は、Pythonの学習からHTMLに移行した理由について話そうと思います。
# なぜ??
自分がプログラミングについて本格的に学んだのは、自己紹介の時に説明した通り、中学1年生半ばの時です。しかし、自分はその直前にある友達から、「Google検索のアドレスバーに"**<font color="red">data:text/html</font>**"」と入力して検索すると、下の図のように、<font color="red">エラーが起こって、検索結果が出てこない</font>」という興味深い話を聞いたことがありました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3749972/2fb9b480-b0bb-3112-f481-9625a5c94676.png)
その時の自分はいったい何が起きているのか、全く理解っできていませんでしたが、これがHTML学習につながり、その真相を理解することになりました。
それからしばらく経ち、自分はプログラミングの学習を始めることにしました。ほかの友達は皆、Pythonを学習していたので自分も皆に合わせて最初はPythonの学習をしていました。
# Pythonでどこまで勉強したか
一応、for文の繰り返し処理のあたりまで学習しました。その途中で、簡単なじゃんけんゲームなども作りました。しかし、この当時の自分は、プログラミング<font color="red">**超**</font>初心者で、if文による条件分岐ぐらいしか理解できなかったと思います(マジかよ)。そのif文もたまに文法を忘れて(マジかよ)いたので、自分はPythonに向いていないな、と決めつけて<font color="red">Python廃人となりました。</font>
# HTML学習の始まり
Pythonを諦めた自分はこの後どうしようか、と考えていました。そこで思い出したのがあの話で、それについて極めてみようと考えました。その話を聞かせてくれた友達に聞いたら、「<font color="red">保護されていない通信</font>」が鍵を握っていることに気づきました。「保護されていない通信」というのは、安全ではない通信路でWebサイトと接続しページを開いたときに表示される警告のことで、アドレスバーに「https://」をつければ解除されます。そして、そのあとにいろいろな文字列を入力すると、HTMLのWebページが作成できます。が、アドレスバーだけでやると、長くなりすぎて、どこがどこなのかがよくわからなくなると思います。なので、VSCodeなどで作成すると決めました。ここからHTML学習が始まりました。はじめのうちはその友達に「HTML」で使える基本的なタグ(htmlタグ、headタグ、titleタグ、bodyタグ、pタグなど)や、下の図のような、タグの家系図?的なもの(htmlタグの長男にheadタグ、次男がbodyタグ、headタグの息子、孫にはtitleタグというような感じ)について教えてもらっていましたが、徐々に「HTML」についてわかってきたような感じがしました。
![canvas.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3749972/841db93d-2423-c6c0-c584-f25b504dd9a0.png)
# その後
HTMLについてだいたい学ぶことができた自分は、デザイン担当のCSSや動き担当のJavaScript,PHPについて興味を持ち始めました。そして今に至ります。
JavaScriptは今も勉強中です。
# HTMLに興味が湧いてきたかな??
皆さんもこの記事を読んで、HTMLについて興味が出てきましたか?もしそういう方がいれば幸いです。
この記事が良いと思った方はいいねとフォローをしてくれると嬉しいです。
見えなくなってしまった Google Chrome のショートカットキーの一覧表

# 存在するのに見えなくなってしまった Google Chrome の右クリック時の便利なショートカットキー

たとえば、画像を右クリックして「V」キーを押すと画像を保存できます。リンク先を保存したい場合は、右クリックして「K」でも保存できます。素早く効率的に画像を保存したい場合などに便利だったりしますよね。

![2024-03-25_16h12_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/a32648e5-194d-aacf-9e6f-42e0c4e74b53.png)

ですが、それがいつからか表示されなくなってしまいました。しかし、機能としては存在しているようです。~~未来ある若者の生産効率を上げるため、長老からこの秘伝のショートカットキーを伝承したいと思います。~~ いつか忘れてしまいそうなので、今のうちにまとめておきました。拡張機能なども不要なので覚えておくと役に立つこともあるんじゃないでしょうか。

ちなみにこのショートカットキーのようなものを正しくはアクセスキーと言うらしいのですが、今回初めて知りました。設定で表示を ON にする方法は記事の最後に記載しておきます。

# アクセスキー一覧表

「コピー」など、単独のショートカットキーがあるものは省略しています。

## 画像を右クリックした場合のアクセスキー

![2024-03-25_16h31_57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/9f0d4bc3-d57e-b7de-fb34-1f81411a7d43.png)

新しいタブで画像を開く：`I`
**名前を付けて画像を保存：`V`**
画像をコピー：`Y`
画像アドレスをコピー：`C`

## リンクを右クリックした場合のアクセスキー

![2024-03-25_16h32_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/6ea4f8a8-b685-ca0f-abfd-dc779de7342b.png)

新しいタブで開く：`T` （※中ボタンクリックでも可）
新しいウィンドウで開く：`W`
シークレットウィンドウで開く：`G`
**名前を付けてリンク先を保存：`K`**
リンクのアドレスをコピー：`E`

## URL を選択して右クリックした場合のアクセスキー

![2024-03-25_16h31_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/54d8f44c-b7ff-e55b-3771-cfe4298c9d64.png)

**選択した URL に移動：`G`**

## 選択範囲を右クリックした場合のアクセスキー

![2024-03-25_17h01_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/00f54a55-158d-1d72-1d57-df95e47fd526.png)

Google で選択した文字列を検索：`S`
選択範囲を翻訳：`T`

## 任意の要素を右クリックした場合のアクセスキー

![2024-03-25_16h33_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/1139386c-dd25-3514-3f6e-96fc51218a4b.png)

キャスト：`C`
お使いのデバイスに送信：`D`
翻訳：`T`
要素を検証：`I`

# 備考：設定が表示されるようにするには

記事を書いてから Windows の設定が存在することに気付いたので画像を差し替えました。

https://twitter.com/tksugimoto/status/1449276483638226944

Windows の設定 → 簡単操作 → キーボード、と辿ると「アクセスキーが利用可能な場合は下線を表示する」という設定があるそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/9c7df8f8-8bb3-43dc-4f48-739b8986baee.png)

それならアクセスキーを覚える必要もないし表にまとめる必要もなかったのでは！？ という……orz

# （余談）メモ帳の「変更内容を保存しますか？」ダイアログのアクセスキー

Chrome とは関係ない話なのですが、メモ帳を閉じる際の「保存する (S)」「保存しない (N)」というアクセスキーも Windows 11 では表示されなくなっていました。こちらは解決方法が分かりませんでしたが、単独の記事を立てるほどでもないと思うので余談としてここに記載しておきます。覚えておくと便利かと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78152/03aed65d-e3ee-2868-f742-4b38df1ffc1f.png)
ロック画面からpwd入力画面への遷移が上手くいかない時の対処法

# 症状
windows11においてロック画面であらゆるキー入力、マウス入力をしても受け付けず、パスワード入力画面に遷移しない。私の症状においてはCtrl+Alt+delのみは入力を受け付けたため毎度それを入力する必要があり煩雑であった。

# 対処方法
完全シャットダウン(Shiftを押しながらシャットダウン)により解決。

# 感想等
1か月ぐらい苦しめられた(放置していただけだが)症状が簡単な方法で改善して拍子抜けであった。原因についても突き止めようか考えたが、os周りのこうしたバグの根本的解決はコストパフォーマンスに合わないし正直困難であろうため断念。あまりに頻発する場合は原因を突き止め対処したいと考える。
【Go】math/randとcrypto/randの使い分けについて

# はじめに
こんにちは、kenです。お仕事ではGoを書いています。
最近「もう一段Goと仲良くなりたいなー」と思い、[Go Code Review Comments](https://go.dev/wiki/CodeReviewComments)というサイトを読んでいたところ、`math/rand`と`crypto/rand`の関係について初めて知ったことがあったので、今回はそれについて書こうと思います。
今まではどちらも乱数を生成するライブラリという認識でしたが、両者には明確な違いが存在していました。

# math/randとcrypto/rand
私が勉強になったGo Code Review Commentsの[Crypto Rand](https://go.dev/wiki/CodeReviewComments#crypto-rand)の節を引用します。
> Do not use package math/rand to generate keys, even throwaway ones. Unseeded, the generator is completely predictable. Seeded with time.Nanoseconds(), there are just a few bits of entropy. Instead, use crypto/rand’s Reader, and if you need text, print to hexadecimal or base64:
（筆者訳：`math/rand`パッケージを使用してキーを生成することは避けてください、たとえ一時的に使用するものであってもです。シードされていない乱数生成器は完全に予測可能です。`time.Nanoseconds()`でシードした場合でも、利用可能なエントロピー（ランダム性の度合い）は非常に限られています。代わりに、`crypto/rand`の`Reader`を使用してください。テキスト形式のキーが必要な場合は、生成されたデータを16進数またはbase64形式で出力してください。）

なるほど。`math/rand`は擬似乱数なので本当の乱数を得たいなら`crypto/rand`を使用するほうがよいということですね。この記述を実際にコードを動かして確かめてみます。
```go
package main

import (
	cryptoRand "crypto/rand"
	"fmt"
	mathRand "math/rand"
)

func main() {
	mathRand.Seed(123)
	fmt.Println(mathRand.Intn(100))
	fmt.Println(mathRand.Intn(100))

	buf := make([]byte, 16)
	_, err := cryptoRand.Read(buf)
	if err != nil {
		panic(err)
	}
	fmt.Println(buf)
}
```
上記を実行すると以下が出力されました。`math/rand`パッケージを使って生成する35と49は何度やっても結果が変わりませんが、`crypto/rand`パッケージを使用して生成したbyteスライスは実行するたびに結果が変わります。
```
35
49
[218 134 201 39 126 101 220 85 108 53 23 27 101 194 101 196]
```
実際に下のリンクから試していただけます。

https://go.dev/play/p/a5puschy_Yw


いざ手元で試してみると納得できますね。
そして「`time.Nanoseconds()`でシードした場合でも、利用可能なエントロピー（ランダム性の度合い）は非常に限られています」というのはおそらく乱数生成のシードに生成時間を用いたとしても安全性は担保できないということだと思います。
つまり攻撃者がこの乱数の生成日時を知っている場合、シード値がその瞬間のナノ秒に基づいていると推測する可能性があり、乱数列を突き止めるおそれがあるということです。


# crypto/randとmath/randの使い分け
さて、両者の違いはわかりましたが、これらはどのように使い分ければよいのでしょうか。
## crypto/randを使ったほうが良い場合
こちらはいわずもがなですが、暗号鍵やセキュリティトークンなど、予測不可能な乱数を生成したいときに使うべきです。逆にこのような場合では`math/rand`を使うべきではありません。
## math/randを使ったほうが良い場合
疑似乱数って乱数に勝てる要素あるの？パフォーマンスが良いくらい？と思ってましたが、テストを実行する際に便利な場合があるみたいです。

例えば、テスト対象の関数にランダムな入力を送りつけたい場面があったとします。その際疑似乱数を使っておけば、もしエラーが発生した場合にそのテストケースで使用したシード値を記録しておくことでテストケースを何度でも再現できます。「シード値が固定なら乱数も固定されてしまう」というデメリットがうまくメリットに置き換わっていますね。逆転の発想すごい...！

# 最後に
両者の特性を理解して、状況に応じて適した方を使うように心がけたいですね。
これからもGo Code Review Commentsで初めて知ったことがあれば記事にしていこうと思います。
最後まで読んでいただきありがとうございました。間違いなどあればコメントにてご指摘ください。
docker network の確認・削除方法

# はじめに
この記事では、docker network の確認・削除方法について記載します。

https://docs.docker.com/reference/cli/docker/network/

# docker network の確認方法
docker network の一覧確認コマンドは以下の通りです。

```powershell
# docker network ls [OPTIONS]
docker network ls
```

```powershell
NETWORK ID     NAME               DRIVER    SCOPE
5ba8cbcece9d   bridge             bridge    local
f818b24798fd   host               host      local
7959364c11a5   nest-api-network   bridge    local
2801b6847bed   none               null      loca
```

絞り込んで表示することも可能です。

```powershell
docker network ls --filter name=work-network
```

```powershell
NETWORK ID     NAME           DRIVER    SCOPE
65c39fdbf21e   work-network   bridge    local
```

docker network の詳細を確認したい場合は以下のコマンドで確認できます。

```powershell
# docker network inspect [OPTIONS] NETWORK [NETWORK...]
docker network inspect 5ba8cbcece9d f818b24798fd
```

```powershell
[
    {
        "Name": "bridge",
        "Id": "5ba8cbcece9deb06b2b4abf6ec3ff229970cf78cd16aa5cdf13e1e5d750d3a11",
        "Created": "2024-03-14T00:20:50.8832907Z",
        "Scope": "local",
        "Driver": "bridge",
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": null,
            "Config": [
                {
                    "Subnet": "172.17.0.0/16",
                    "Gateway": "172.17.0.1"
                }
            ]
        },
        "Internal": false,
        "Attachable": false,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": {},
        "Options": {
            "com.docker.network.bridge.default_bridge": "true",
            "com.docker.network.bridge.enable_icc": "true",
            "com.docker.network.bridge.enable_ip_masquerade": "true",
            "com.docker.network.bridge.host_binding_ipv4": "0.0.0.0",
            "com.docker.network.bridge.name": "docker0",
            "com.docker.network.driver.mtu": "1500"
        },
        "Labels": {}
    },
    {
        "Name": "host",
        "Id": "f818b24798fde3a705653f3d8f921274ea8670e5ef4600f5eacd028921785dc0",
        "Created": "2024-03-08T00:55:05.595967094Z",
        "Scope": "local",
        "Driver": "host",
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": null,
            "Config": null
        },
        "Internal": false,
        "Attachable": false,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": {},
        "Options": {},
        "Labels": {}
    }
]
```

# docker network の削除方法
docker network 削除コマンドは以下の通りです。

```powershell
# docker network rm NETWORK [NETWORK...]
docker network rm 7959364c11a5
```

# 参考
- [docker network](https://docs.docker.com/reference/cli/docker/network/)
Debian+podman+Directus(3)雑感

# Debian+podman+Directus(3)雑感
このページは、利用しながらわかったことなどを追記していく。
## 1. データベースとの関係
まずは、動画[Getting Started with Directus](https://www.youtube.com/watch?v=viURaw3oiBA)から。
<iframe width="560" height="315" src="https://www.youtube.com/embed/viURaw3oiBA?si=0bNiCs0w0sjwaUcc&t=34" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

* データベースの構造が独立している。
他のHeadless CMS がどうなっているのかよく知らない。しかし、SQLのデータベースと Directus とが基本的に独立しているという設計思想はいいと思った。既存のデータベースをそのままDirectus で使えるらしいし、データベースのデータを直接更新すると、Directus でも値が自動的に更新される。
データベースの（個人的に）厄介だと思うところは、ちょっと壊れると全体が失われてしまうような気がするところである。そうしたリスクが少ないように思う。
同順位のあるランク(RANKとDENSE_RANK) を作成する(SPSS Modeler データ加工逆引き3-28)

## 同順位のあるランク(RANKとDENSE_RANK) を作成する

![スクリーンショット 2024-03-15 18.18.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/2a517149-43e5-b5e9-fbb7-16fc81b33381.png)

## 1.想定される利用目的

・集計表の作成
・レコメンデーションアイテムの選別

## 2.サンプルストリームのダウンロード

https://github.com/yoichiro0903n/blue/raw/main/dense_rank.str

## 3.サンプルストリームの説明

![スクリーンショット 2024-03-15 18.15.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/136a82f9-eaeb-58d4-ff2e-b974d3a84c39.png)

a.入力するデータは以下の通りです。

![スクリーンショット 2024-03-15 18.20.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/85bcaa3b-8234-7c73-a806-00aeabd0a14a.png)

#### RANKを作成する

b.[フィールド作成]ノードを編集します。分類内のレコード番号を作成します。　@&#xFFF0;OFFSET（分類,1）は分類の1行上を参照するの意になります。1行上と同じ分類ならカウントアップし、分類が異なったらリセットします。

![スクリーンショット 2024-03-15 18.20.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/3e32e1ca-560a-2e50-059b-58e7d9d0e824.png)

[プレビュー]します。

![スクリーンショット 2024-03-15 18.21.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/31fafbea-1b60-ea02-8382-8a684ef50c61.png)

c.[フィールド作成]ノードを編集します。bと同じ要領で同順位が連続したらカウントアップさせます。
![スクリーンショット 2024-03-15 18.21.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/4770c791-a94e-5292-f2e6-0577b0b95afd.png)

[プレビュー]します。

![スクリーンショット 2024-03-15 18.22.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/718f312f-cb09-ba0f-1e0e-cb5b4fe18a7b.png)

d.[フィールド作成]ノードを編集します。値が同じだった場合にはcで作った同順位カウントの行数上−１を参照し、値が異なった場合にはレコード番号を引き当てます。

![スクリーンショット 2024-03-15 18.22.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/d460eb48-ba07-fcd7-9c6b-822f8d02e5e5.png)

[プレビュー]します。

![スクリーンショット 2024-03-15 18.22.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/e3484abd-79c9-fe99-430e-2c1836286b38.png)

#### DENSE_RANKを作成する

e.[フィールド作成]ノードを編集します。

![スクリーンショット 2024-03-15 18.23.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/5eb621b0-3b19-a371-b615-a9f9b04c621e.png)

[プレビュー]します。

![スクリーンショット 2024-03-15 18.23.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/f28d382a-d1ad-a66c-c101-b63903c6a54b.png)


#### 注意点

eは以下のように[増分条件]を設定したくなるのですが

![スクリーンショット 2024-03-15 18.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/7698d2f7-9c7e-ba3b-2d02-7f12ced834ac.png)

その場合以下のようになります。分類が変わると初期値が2になります。

![スクリーンショット 2024-03-15 18.25.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/286322/057d3e13-b60a-2211-ceac-5524e34cb86a.png)

## 4.　参考情報

#### 分類毎に通し番号を振る

https://qiita.com/416nishimaki/items/8cd1fc55261fd36a9013

#### SPSS Modeler ノードリファレンス目次

https://qiita.com/416nishimaki/private/503037195081d3323eee

#### SPSS Modeler 逆引きストリーム集（データ加工）

https://qiita.com/416nishimaki/private/4bf813e6cba84b2a1008
[SwiftUI] ログイン画面でFocusStateを使う方法

# はじめに
ログイン画面でIDやパスワードが未入力だった場合に対象の入力欄にフォーカスを当てたいと思い調べてみました。

# 環境
Xcode15.2
iOS15 ~

# 内容
`@FocusState`はiOS15から使えるものです。

https://developer.apple.com/documentation/swiftui/focusstate

このような簡単なログイン画面でボタンを押した際にバリデーションに引っかかれば対象のテキストフィールドにフォーカスを当てる実装ができます。

当然、バリデーションに引っかかった場合は何が問題なのかフィードバックしてあげる必要もありますが、今回はスキップします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/36f71807-5ca4-ce9b-bbb8-4e50cbe4f6ed.png" width="200">

```diff_swift
struct LoginView: View {
+   enum Field: Hashable {
+       case usernameField
+       case passwordField
+   }

    @State private var username = ""
    @State private var password = ""
+   @FocusState private var focusedField: Field?

    var body: some View {
        VStack(spacing: 20) {
            TextField("Username", text: $username)
                .autocapitalization(.none)
                .disableAutocorrection(true)
                .padding(8)
                .border(Color.gray)
+               .focused($focusedField, equals: .usernameField)

            SecureField("Password", text: $password)
                .padding(8)
                .border(Color.gray)
+               .focused($focusedField, equals: .passwordField)

            Button("Sign In") {
                if username.isEmpty {
+                   focusedField = .usernameField
                } else if password.isEmpty {
+                   focusedField = .passwordField
                } else {
                    // handleLogin(username, password)
                }
            }
            .buttonStyle(.bordered)
            .padding(20)
        }
        .padding(30)
    }
}
```

複数のViewに対して`.focused`で同じenumの値を入れたり、同じViewに対して複数の`.focused`を使わない限りこの実装で問題なくやりたいことはできます。

https://developer.apple.com/documentation/swiftui/view/focused(_:equals:)

ボタンを押したタイミングで上記の実装では空文字かどうかを調べていますが、独自のバリデーションをかけるのが良さそうです。

# おわりに
これまで`@FocusState`でBoolを使う実装はしておりましたが、enumを使う方法は知らなかったので実装もスッキリするしどんどん使っていこうと思います。
LumaAIをWebブラウザから使う方法覚書

# 

# はじめに
LumaAIのWebブラウザから使用する方法の記載がQiitaに見当たらなかったので覚書を残しておきます。
※LumaAIは、NeRFを使用して3Dデータを作成します。

https://twitter.com/i/status/1771911689774240141

# 必要なもの。
立体化したいものを撮影した動画ファイル、または画像ファイルが必要です。

下のように物体の周辺を少しづつずらしながら様々な角度で撮影したものを用います。

![robomit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594551/32b273ae-3430-3a45-f445-0659de8ba8cb.jpeg)


# 手順

#### １．下記のURLからLumaAIのページを開きます。
https://lumalabs.ai/
下記の画面が表示されますので、右上のLoginボタンをクリックします。


![無題1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594551/4defee21-c57d-f0c2-89fc-90dafe68fd04.jpeg)



Loginボタン押下後、下のような画面が表示されます。
アカウントが必要ですが、Googleなどのアカウントでもログインできます。
![無題2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594551/9def79d9-053f-ca10-4806-88cd8dcbea0c.jpeg)


#### ２．データアップロード
Lumaのトップページが表示されます。
右上の　Captures　ボタンをクリックします。

![無題3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594551/d5d48820-fdd1-554b-c9da-aaf87a3a718a.jpeg)


　下のような画面が表示されたら、右上の　Createボタンをクリックして画面を切り替えます。
 この画面で右上の　↑Create　ボタンをクリックします。

![無題4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594551/dae50315-78e1-f725-a6e2-087697c4d046.jpeg)


下のように、画面に「Drop a file in this area or click to select 」とポップアップが表示されます。
ここで準備した動画や写真をこの部分にドラッグしてアップロードします。
※写真の場合は複数枚の写真をZip圧縮して、Zipファイルをアップロードします。

![無題6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594551/751966c3-c87a-3017-2ebd-0922f6b7251e.jpeg)

ドラッグ＆ドロップすると、タイトルやパラメータを入力する画面が表示されます。
ひとまずタイトルを入力して、右下のUploadボタンをクリック。
![無題7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594551/91563b6d-f2f8-a841-a269-42f7c600e1cb.jpeg)

#### ３．待つ
この後アップロードが行われ、処理が始まります。
Preprocessing 〇〇%　と進捗が表示されます。
100%になるまでかなり時間がかかるので、ご飯でも食べて気長に待ちましょう。
![無題8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594551/a930bbc5-7de0-2763-e17d-f77ebb196820.jpeg)

　
　処理が終わるとサムネイルが表示され、サムネイルをクリックすると冒頭のように3D処理した結果が表示されます。
 まず点群を表示して、ぐわっとメッシュが出てくる演出がかっこいいですね。
　3Dデータなので、ドラッグやホイールで視点の変更やズームが出来ます。
　動画や3Dモデルのエクスポートもメニューがあるので可能です。
　
　使い方については、ひとまずここまで。

## 最後に
 Webブラウザから簡単に3Dの生成をするLumaAIのページについて記載しました。

 アプリ版のLumaAIや、その内部処理については他の方が有用な記事を書いてくださっているのでそちらを参考にしてください。
 
 特別なカメラやハイスペックなPCを用意せず気楽に使えるのでありがたいですね。
Bizrobo ビズロボ_開発時・運用時に学んだこと

## はじめに

Bizroboの開発・運用保守をメインに対応しておりますが、
業務の中で、もっと早くロボットの情報やドキュメントなどの情報を見つけられたら、
よりスピーディーに対応ができたなということは多々あります。

現場でおおむね１年のBizrobo開発・運用を経て、
多くの課題や改善点について見えてきた部分がありますので、
参考になればと思います。
<br>

## 対象
・Bizrobo開発・運用をされている方
<br><br>
### 結論
下記を意識して開発・運用をしていました。

１．ロボットタグの追加
２．ロボット内で積極的にコメントを残す
３．過去インシデント時の対応は詳細に記載
４．バッチなど外部ツールを使用している場合対応スコープを記載する
５．ドキュメント格納場所の統一
<br>
## 詳細

#### １．ロボットタグの追加
10.7からの機能となります。
ロボットの開発時にロボットタグを追加でき、
Management Consoleにて検索やフィルタリングが可能となります。

ロボットタグの追加は方針によって異なるとは思いますが、
ロボットタグを追加しておくと、
ロボットがどんなことをしているかの推測に役立ちます。

例えばVBAやAccessなどのタグを追加していると、
VBAを呼び出しているロボを探す際に、
このロボではVBAを呼び出しているなどと
欲しい情報をすぐに取ることができます。
<br>
#### ２．ロボット内で積極的にコメントを残す
Bizroboでは各ステップにてコメントを残せるため、
積極的に活用していくことで、開発者以外の人が見たときに、
ステップの処理内容やステップの意図などについて、把握することができます。

ロボット内にて変数が多くなってきたり、
コンバーターなどで加工することが増えてきた場合には、
処理内容の把握に時間がかかるため、コメントがあると非常にわかりやすくなります。
<br>
#### ３．過去インシデント時の対応は詳細に記載
インシデントが発生した際には、
どのように対応をしたのかを詳細に記録をしておくことで、
次回以降のインシデントに役立ちます。

忙しいときには、そこまで詳細に記載しなくてもわかるだろうといった
感情も出てしまうときがありますが、
詳細に記載することで、次回以降のインシデント対応スピードが上がりますし、
自分以外の方が対応する際にも役立ちます。
<br>
#### ４．バッチなど外部ツールを使用している場合対応スコープを記載する
Bizroboでは、外部ツールとの連携をした上で、
様々な業務に対応ができるようになります。

現場では、ツールについては、
別で作成しているというケースもありますので、
どこまでは自分たちで対応し、
どこからは確認依頼をしなければいけないのかなどの
対応範囲を明確にしておくこと、かつ記録をしておく必要があります。

担当者が変わった際に、前回と対応範囲が異なることで、
別のトラブルの原因になる可能性もあるため、
対応範囲や担当者については、まとめておくことが大切です。
<br>
#### ５．ドキュメント格納場所の統一
次回の対応のために、マニュアルなどを残すことがあると思いますが、
せっかく作っても誰も見なければ意味がありません。

ドキュメントの格納ルールについては、
しっかりと固めておく必要があります。

開発時のテンプレートやインシデント対応時のテンプレートなどを、
一つのフォルダにまとめておき、
対応の際には必ず参照するようにして、
過去と同じように回り道をしないようにしましょう。

特にIT業界では人の入れ替わりも多々あるとおもいますので、
誰が来ても対応ができるということが、運用において重要になってきます。
<br>
## おわりに
今回は、Bizroboの開発・運用保守について、
過去の反省を記事にしてみました。

会社の方針によって変わる部分ではありますが、
保守性を高める点という意味では、
できるだけ管理がしやすい形での開発、ドキュメント整備など、
共通項は多いと考えています。

限られた時間の中で生産性を上げるために開発をするのが、
RPAのメリットになりますので、
運用保守にかける時間はできるだけ減らしていくことを心掛けていきたいです。


<br>
最後まで見ていただきありがとうございました。
Bizrobo　Create Directories（ディレクトリを作成）の挙動について

## はじめに

Bizroboの開発時に、
Create Directoriesにチェックを入れたものの、
誤ってフォルダパスにブランク（変数に値を格納していない）を指定していた際の挙動についてです。

<br>

![002.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291018/9782bad7-c393-4513-230e-c3287462baeb.png)



## 対象者
・BizroboのDesign Studioを使用して開発をされている方
・Create Directoriesで想定通りのフォルダに出力がされていない際、
どこに出力がされたか確認をしたい方

## 結論
バージョン10.7.0.9では、アプリケーション自体が存在するフォルダ直下に出力がされていました。
（例：Kofax RPA 10.7.0.9 307 x64¥bin直下など）

バージョン10.7.0.4では、パスが存在していない場合は
下記のようにエラーとしてステップ通過することはありませんでした。
Error from the Write File action. Error writing to file. test.txt (アクセスが拒否されました。)

## まとめ

今回はBizroboのDSでのCreate Directories（ディレクトリを作成）についてでした。

パスが存在しない場合に、
エラーにせず、ディレクトリを作成してくれる機能となるため、
用途に合わせて使用すると便利です。

また、バージョンによって挙動が異なることを頭に入れ、
開発を進めていきたいです。

最後まで見ていただきありがとうございました。
ZED SDKを使いこなす　点群のデータの３通り


１．XYZと色データのfloat32の４つの値　
```.py:
point_cloud = sl.Mat() # まずは、データ構造の初期化
# 次の行で値が取得される。
zed.retrieve_measure(point_cloud, sl.MEASURE.XYZRGBA)
# xyz_rgba はnumpy のdtype=np.float32 のデータ形式になる。
xyz_rgba = point_cloud.get_data()
```

- 各点は（x, y, z, float32のrgbaデータ）が収納されている。
- [float32のrgbaデータをuint8に変換する](https://qiita.com/nonbiri15/items/2e0b82fe8f0513e16d26)

- この段階のデータでは、有限でない値も座標に含まれている。
- データの可視化のためには、そのことに対応したライブラリを用いることです。
- get_data()直後の形状は
```.py:
[:, :, 0] # x座標
[:, :, 1] # y座標
[:, :, 2] # z座標
[:, :, 3] # 色データ
```
となっています。

- xyz_rgba[画像のy座標, 画像のx座標, :] とすると画像上の画素に対応するx,y,z の座標と色データが得られます。

２. XYZ だけのデータ

３．(x, y, z, 1.0) のデータ
同次変換行列との積で座標変換をするためのもの。
[ZED SDK のTransform型 (同次変換行列)](https://qiita.com/nonbiri15/items/3744380ad6e4e2b618de)

## 注意点
- １と３とがともに点が長さ４のベクトルになる。
- 同次変換行列を使って、座標変換をするには、(x, y, z, 1.0) のデータでなくてはならない。
- 座標変換の際には、座標が有限の値の点だけにすること。
User acsessでサブフォームにクエリを表示させてそのレコードからデータを修正できるようにする方法

<h2>クエリの作成:</h2>
最初に、修正したいデータを含むテーブルからクエリを作成します。Access の[クエリデザイン]ビューを使用して、必要なフィールドを選択し、必要に応じて条件を指定します。
<h2>フォームの作成:</h2>
メインフォームを作成します。これは、サブフォームを含むフォームです。[フォームデザイン]ビューを使用して、フォームをカスタマイズできます。
<h2>サブフォームの追加:</h2>
メインフォームにサブフォームを追加します。サブフォームとして使用したいクエリに基づいて新しいフォームを作成するか、または既存のフォームを使用します。サブフォームを追加するには、[デザイン]タブの[サブフォーム/サブレポート]コントロールを使用します。
<h2>サブフォームの設定:</h2>
サブフォームコントロールのプロパティシートで、[データ]タブを開きます。[レコードソース]プロパティに、ステップ1で作成したクエリまたはそのクエリに基づいて作成されたフォームを指定します。
<h2>リンクの設定:</h2>
メインフォームとサブフォームの間でデータをリンクさせる必要がある場合は、サブフォームコントロールのプロパティシートで[マスター/チャイルドリンク]プロパティを設定します。これにより、メインフォーム上の特定のレコードを選択すると、サブフォームに関連するレコードのみが表示されます。
<h2>データの修正:</h2>
サブフォームに表示されるデータは、基になるクエリまたはテーブルに直接リンクされているため、サブフォーム内でデータを直接修正することができます。修正は基になるテーブルに自動的に反映されます。
【Nuxt3】StorybookにTailwind CSSを適応する

# はじめに
こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。

前回はNuxt3にStorybookを導入しました。

https://qiita.com/keitaMax/items/1d57960504b77503a032


今回はStorybookにTailwind CSSを適応しようと思います。

# 各ファイルの修正

`postcss.config.js`を追加します。

```js:postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

```

次に、`.storybook`の`preview.js`ファイルにTailwind CSSを読み込む設定を追加します。


```js:preview.j
/** @type { import('@storybook/vue3').Preview } */
import '../assets/css/main.css'; //追記
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

```

これで設定は完了です。

# 確認してみる

設定が完了したので実際に確認してみます。

以下のコマンドでStorybookを起動させてみます。

```
npm run storybook
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/6e93f367-d1d2-b952-7b70-64eff3c97e4d.png)

すると、背景が赤くなりTailwind CSSが適応できるようになっているのがわかります。



# おわりに

簡単にTailwind CSSをStorybookに適応することができました。

もし、もっといいやり方があるや、間違っている部分があるといったご意見をいただければ幸いです。

最後まで読んでいただきありがとうございました。

# 参考

https://n-laboratory.jp/articles/nuxt-storybook-tailwind-css
paizaで初心者が一ヶ月でBランクに行くまでに行ったこと。２０２４年版

## 備考
現在のランクはBランクです。google検索でも同じようなブログはあるのですが、ここ最近の記事が少ないので、ここ一か月で行ったことを書いていこうと思います。
## 一か月前の自分のスペック
* android studioでjavaを触って簡単なクイズゲームを作ったくらい。
* paizaではpythonを使っていますが、この時の時点ではまだ何も知らない。
* 基礎的な数学知識（高校数学)は抜けていて、かろうじて中学数学を覚えてるぐらい。
* アルゴリズムやデータ構造は聞いたことあるぐらい。（使ったことはない）

## 最初の一週間
###### progate or paizaラーニング
まずはC++ , python , javaあたりを学んでみてください。

:::note info
もし使い慣れていて、標準のライブラリを使いこなせるレベルなのであればこちらの言語でなくても大丈夫です！
しかし上記の言語のほうが回答が多いので、上の三つがおすすめです。
:::
簡単な標準入力、標準出力、配列なんかを体系的に学ぶにはprogateがおすすめです。（大体半日～２日で終わる量です）

###### 一か月だけpaizaの有料プランに課金する
課金する目的としては以下の通りです。
* 一か月という期間を設けることでその期間までに目標とするランクに到達することを強制的に強いる。
* 無料版では問題集の回答例を見るための学習チケットが必要になり、数に限りがあるため

それ以外にも課金することで利用できるサービスもありますが、僕自身はあまり使わなかったです。

###### Dランク獲得ストーリーand Cランク獲得ストーリー
paizaのDランク獲得ストーリーとCランク獲得ストーリーを講座から学んでみてください。
どちらとも無料で取り組めますので、こちらを行ってから課金してもいいかもです。
因みに両方で約80時間で終わると書いてありますので、一週間で終わらせれると思います。

## 一週間目～二、三週間目
###### Cランクスキルチェックに挑戦
ある程度講座（条件分岐、配列、for文etc..）を解けていればできると思います。
###### Bランク獲得ストーリー
こちらは一部有料なので課金してからがおすすめです。
Bランクになると回答例がjava,python,C++がほとんどなのでほかの言語でやるとここで回答に困ると思います。
ここは約80時間で終わると書いてありますが、プログラミング初心者かつ、数学の知識がない人は全部やるとこれ以上かかるかもしれません。

:::note info
因みに僕はここの累積和で挫折しかけました...
:::
解説をよんでもわからなかった場合書籍やブログで調べたりするとプログラマーとしてのサーチ能力が上がるので意識していきましょう。

###### 毎日スキルチェック（Cランク）
Bランクの講座を解いていると、Cランクは問題なく解けてくると思います。
無理がない程度でコンスタントに取り組んでいきましょう。

## 四週間目
Bランクの講座をやり終えたらBランク・スキルチェック見本問題セット、Bランク・スキルチェック過去問題セットを解いてみましょう。（目安としては、難易度が1500あたりが解けるのがベスト）
###### Bランクスキルチェックに挑戦
僕の山勘としては先ほど学んだアルゴリズムは使わなく、配列と連想配列なんかをつかえていれば解けると思います。（標準ライブラリを使えるようならより簡単になると思います。）
###### よりアルゴリズムを学ぶために書籍で勉強
Bランクを獲得したらAランクを獲得するためのアルゴリズムをより体系的に勉強する。
おすすめとしては以下です。
* 問題解決のための「アルゴリズム×数学」が基礎からしっかり身につく本（数学知識がない方におすすめ）
* 問題解決力を鍛える!アルゴリズムとデータ構造
* アルゴリズム実技検定　公式テキスト［エントリー～中級編］(pythonで書かれてるため、pythonユーザーおすすめ)

## 終わり
ここまでが僕のやったことです。
正直Bランクになるためアルゴリズムはいらないし遠回りした感じはありますが、Aランクをめざしているひとにとっては無駄ではないのかな、と思います。

あと、ここまで書いてなんですが、習得時間や容量なんかは人それぞれです。他人と比較して一喜一憂するのではなく、個々人の目標に向かって黙々とやるのが一番だと思います。モチベーションの維持として、友達と取り組むなんかはいいと思います。
ぼくもこれからアルゴリズムの勉強を継続したいと思いますので、何かあれば記事にしたいと思います。
EF Core 7.0から利用可能なJSON列を使おうとして"ndex was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')"

変にハマったので記録

### EFCore7から使えるようになったJSON列
* https://learn.microsoft.com/ja-jp/ef/core/what-is-new/ef-core-7.0/whatsnew
↑　公式より
これを使って追加情報とかをJSONでまとめとこうとした。

### モデル

``` cs
public class Customer
{
    public string Name { get; set; }
    public Status Status { get; set; }
}

public class Status
{
    // これはJSONマッピングする
    public CustomerAdditionalDetail Detail { get; set; }
}


public class CustomerAdditionalDetail
{
    // 後で定義しようとした
}
```

みたいな感じで、(modelbuilderのあたりは省略)
で、includeすると

``` cs
 context.Customers
            .Include(c => c.Status);
```

エラーが発生

```
System.ArgumentOutOfRangeException
Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')
```

デバッグ見るとクエリの発行すらされていない、なので何かリレーションが間違ってるのか…
と見直したが特におかしいところはない。


### 原因

後で中身を定義しようとした`CustomerAdditionalDetail`が原因だった。
とりあえず適当なプロパティを入れると問題なく出るようになった。
（いろいろググってもわからなかったので記録のため記事にしておいた）
PHP(7.1.33) 学習 備忘録1

とある案件でPHPを触れて、学んだことを書いておく。

# while-each

正式名称はわかりません。バージョンが上がると動かない場合があるので使っていたら修正したほうがよい。
~~（修正方法は未確認）~~
`foreach, list`で書き換えることができます。コメントに例があります。(YuneKichiさん、junerさんありがとうございます。)

```php
<?php
$req = [ 
    1 => 'apple',
    2 => 'banana',
    3 => 'calotto',
];

while(list($key, $value)=each($req)) {
    var_dump($key, $value);
}
?>
```

# コンストラクタ

phpの古い書き方です。修正してください的な注意が出てくると思います。バージョンが上がると使えないことがあります。

```php
<?php
class Person{
    function Person(){
        echo('this is Person');
    }
}

$person = new Person();
// Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Person has a deprecated constructor in /in/eBaAC on line 2
// this is Person
$person->Person(); // this is Person
?>

```

## 修正

気をつけることは、古い書き方はコンストラクタがメソッドとしても呼べること。継承した子クラスでもメソッドとして継承されている。

```php
<?php
class Person{
    function __construct(){
        $this->Person();
    }
    function Person(){
        echo('this is Person');
    }
}

$person = new Person(); // this is Person
$person->Person(); // this is Person
?>

```

新しい書き方`__construct`の中で古いコンストラクタ（クラス名のメソッド）を呼べば古いコンストラクタを残しながら修正できます。
これがベストか分からないので、別案もあると思います。

# メモ

## ブラウザでの実行環境

コードを試したい場合は使ってください。バージョンを指定できるのでバージョンによって動かないものを確認できます。

[3v4l(v7.1.33)](https://3v4l.org/#v7.1.33)
IPアドレスの切り替え

rcスクリプトで起動時のイーサーネットポートの接続ポートによってIPアドレスを変えるようにしてみました。

```sh
PORT=`ifconfig arge0 | grep active` 

if [ -n "${PORT}" ]; then
        ifconfig arge0 inet 10.0.1.28 netmask 255.255.255.0
        route add default 10.0.1.1
else
        ifconfig arge1 inet 192.168.1.100 netmask 255.255.255.0
        route add default 192.168.1.1
fi
```

arge0はPHY切り出しのWANポートでEtherswitchの機能でポートのステータスが分かります。WANポートがつながれていれば10.0.1.28で、つながれてなければLAN側に192.168.1.100が設定されます。
STM32C011を使い、RCサーボSG-90を角度(-90,0,90)でコントロールして遊ぶ。(map()化)(STM32C011J4M7)


x かころぐをみよ
x モバイルバッテリにつないで遊んでください。(パソコンが壊れます)

目的
サーボで遊ぶ


![o_cop993.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e8e0ac86-9379-7104-180e-be39d64aefdd.jpeg)



例


```

  Servo_S(-90); delay(2000); //2秒待つ

  Servo_S(0);   delay(2000); //2秒待つ

  Servo_S(90);  delay(2000); //2秒待つ

  Servo_S(0);   delay(2000); //2秒待つ


```




オンラインコンパイラーで試す


```c++



//左端 -90のステップ
#define V_M_90   531
//中心の0のステップ
#define V_0    1441
//右端 90　計算値
//#define V_90 2352

//-90から0までのステップ
#define STEP_Q (( (( V_0 - V_M_90 )*1000)  / 90 )+7)

//角度から0から255の数値に変換(マクロ)
//Vは、角度
#define KI(V) ( (V_M_90*1000) + ( (STEP_Q) *  (V + 90) )         )

//1000の割り算 だいたい正しい。
#define DIV1000(n) ((n+((n*25)>>10))>>10)

//ざっくり1000で割る
#define KJ(V)   DIV1000( (KI(V)) )

long map(long x, long in_min, long in_max, long out_min, long out_max) {
  return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

#include <iostream>
using namespace std;
int main(void){
    // Your code here!

    int ii;
    int jj;
    for(int i=-90;i<=90;i=i+15){
 
        ii=map(i,-90,0,V_M_90,V_0);
        
        jj=map(ii,0,20000,0,65536);
        
        printf("%5d %8d",i,KJ(i));
        printf(" %8d",ii);
        printf(" %8d",jj);
        printf("\n");
        
    }

    
}


```

結果


```

  -90      531      531     1739
  -75      683      682     2234
  -60      834      834     2732
  -45      986      986     3230
  -30     1138     1137     3725
  -15     1290     1289     4223
    0     1442     1441     4721
   15     1594     1592     5216
   30     1745     1744     5714
   45     1897     1896     6212
   60     2049     2047     6707
   75     2201     2199     7205
   90     2353     2351     7703


```

いろいろ
別のマイコンで遊んでいるのでちょっとまつてね!!(2024/03/28 10:03)
今日(202403281131)の6時に高円寺メーカーカフェがあるので準備している。


回転方向が逆の場合


```


//左端 -90のステップ
#define V_M_90 2352
//中心の0のステップ
#define V_0    1441
//右端 90　計算値
//#define V_90 531


```



結果

![o_cop99f.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/de3c8373-177e-be3e-d2f7-8b01bd02a03e.jpeg)


プログラム


```c++


//PWM_Servo_C011_2


//定義
//左端 -90のステップ
#define V_M_90   542
//中心の0のステップ
#define V_0    1441
//右端 90　計算値
//#define V_90 2352

#define DD PB7    // potentiometer connected to analog pin x


//サーボ関数
//入力は、-90から90 サーボが仕様の端から端まで動く値
void Servo_S(int b) {

  int ii=map(b,-90,0,V_M_90,V_0);  
  int jj=map(ii,0,20000,0,65536);
  analogWrite(DD, jj);   // analogRead values go from 0

} //Servo_S


//初期化
void setup() {

  delay(3000);//マッポの手先、消したら、いかんぜょ(斎藤由紀風)

  //GPIOの初期化
  pinMode(DD, OUTPUT);   // sets the LED pin as output
  analogWriteFrequency(50);   //周波数
  analogWriteResolution(16);  //分解能

} //setup


//メインループ
void loop() {

  Servo_S(-90); delay(2000); //2秒待つ

  Servo_S(0);   delay(2000); //2秒待つ

  Servo_S(90);  delay(2000); //2秒待つ

  Servo_S(0);   delay(2000); //2秒待つ

} //loop


```
【Git】エイリアス設定集

## はじめに
開発で多用するgitコマンドのエイリアス集です。
```~/.gitconfig```に直接記載するか、```$ git config --global alias.** 'command'```で自由にカスタマイズできるので、皆さんもぜひ。

## エイリアス設定例
``` sh
# ブランチの一覧
git config --global alias.br branch
# ブランチの移動
git config --global alias.co checkout
# ブランチの作成
git config --global alias.new 'checkout -b'
# 全変更をステージング
git config --global alias.stg 'add -A'
# ステージングの解除
git config --global alias.unstg 'reset HEAD --'
# メッセージ付きコミット
git config --global alias.com 'commit -m'
# 変更ファイル一覧(簡易表示)
git config --global alias.st 'status -sb'
# コミットログ参照(1行ずつ)
git config --global alias.ls 'log --oneline'
# コミットログ参照(1行ずつ,修正ファイル名表示)
git config --global alias.ll 'log --oneline --name-status'
```
(※ユーザ単位での設定)
gitを打つのすら面倒くさいという場合は、```~/.bash_profile```に直接記載してしまうのもよいでしょう。
```~/.bash_profile
alias pull='git pull'
alias push='git push'
alias fpush='git push --force-with-lease'
alias fetch='git fetch'
```
中小企業診断士　〜セグメント別損益分析〜

●セグメント別損益分析
事業別や、製品別などのセグメント別に損益分析を行うこと。
直接原価計算による損益計算書の形式で作成すると、
各セグメントの損益構造が明確になる。

・変動製造マージン
売上原価のうち変動費を集計したもの。
変動製造マージン　＝　売上高　ー　変動売上原価

・限界利益
売上から変動費から引いたもの。
変動販売費と変動売上原価を合計すると変動費の総額となる。

限界利益　＝　売上高　ー　変動売上原価 ー　変動販売費
※限界利益　＝　変動製造マージン ー　変動販売費

・貢献利益
限界利益から、個別固定費を引いた後の利益。

・個別固定費
セグメント個別の固定費。事業部別の損益分析の場合は、その事業部に関する人件費など。

・共通固定費
セグメントに共通に発生する固定費。
事業部別の損益分析の場合は、本社スタッフ部門の人件費など。
Linuxターミナル起動のショートカット登録

いちいち**アプリケーション→システムツール→端末**とターミナルを起動するのが面倒なので、ショートカットを割り当ててみました。

# 実行環境
CentOS7-VMware WorkStation17 Player

# 手順
1. アプリケーション→システムツール→設定→デバイス→キーボード
1. 最下部にある+を押下
1. 名前は自由（terminal-openなど）、コマンドは**gnome-terminal**
1. ショートカットの設定を押下し、割り当てたいキーを同時押し
（自分は無難にCtrl+Alt+Tにしています）
Prettierでファイルを作らずにフォーマットする

# ファイルを作らずにフォーマッターを使う

フォーマッターは使いたいのだが、ファイルを作るのは面倒な時があります。

例えば

- ブラウザのコンソールで JavaScript を書いていて、コードが読みづらくなってきた時
- ブログ等で、込み入ったコードを見た時 
- 作ったファイルを消すのが面倒な時

## 論よりコード

```shell
# --parser オプション
$ echo "const obj = {hoge:'fuga', piyo: 'piyo'};console.log(obj);console.log(\`hoge: \${obj.hoge}\`);console.log(\`piyo: \${obj.piyo}\`)" | prettier --parser babel

# ヒアドキュメントを使って改行を入れる
$ cat << EOF | prettier  --stdin-filepath foo.js
const obj = {hoge:'fuga', piyo:'piyo'};
console.log(obj);console.log(\`hoge:\${obj.hoge}\`);console.log(\`piyo: \${obj.piyo}\`)
EOF

# const obj = { hoge: "fuga", piyo: "piyo" };
# console.log(obj);
# console.log(`hoge:${obj.hoge}`);
# console.log(`piyo: ${obj.piyo}`);

```

## 今回の記事で使用した Prettier バージョン

```shell
$ prettier -v
3.2.5
```

## オプションの解説

Prettier はファイル名無しでコードを与えると、どのパーサーを使って良いかわからず`[error] No parser and no file path given, couldn't infer a parser.` エラーを出します。
したがって、パーサーを決定するためのオプションが必要になります。

- `--stdin-filepath foo.js`
    - ファイル名を与えるとそれを元にパーサーを選択してくれます。またこのファイルは存在しないファイルでも良いようです。`.js`と書いても動きました
- `--parser <flow|babel|babel-flow|babel-ts|typescript|acorn|espree|meriyah|css|less|scss|json|json5|jsonc|json-stringify|graphql|markdown|mdx|vue|yaml|glimmer|html|angular|lwc>`
    - 色々なターゲットをフォーマットできます。ピュアなJavaScriptならば`babel`でフォーマットできます

## 終わりに

調査中に、ChatGPTに質問したところ`--stdin`という既に廃止されたオプションを教えてくれたので、調べたついでにこの記事を書きました。

[Prettier 2.0 までのマイルストーンを眺めてみる](https://sosukesuzuki-blog.netlify.app/1oCL5vJNMOm8CfXJETSwlA)

## Link

[Options · Prettier](https://prettier.io/docs/en/options.html#parser)
[Prettier がファイルパスからパーサを推測するときの情報源](https://sosukesuzuki.dev/posts/prettier-infer-parser-from-filepath/)
【生成AIアプリ100チャレンジ】（2）TOEIC対策に!? 洋楽歌詞翻訳アプリ

# 公開中サイト

https://ai.nuevo.jp/lyric_trans/

# 開発環境

|              |              |
|:------------:|:------------:|
| Server       | lightSail    |
| Language     | Python3.11   |
| Framework    | Django       |
| DB           | sqlite3      |

ローカル環境ではPythonのvenvを使用。エディタはvs codeです。

# ChatGPT

　洋楽の歌詞の翻訳を整理して和訳してくれるアプリが欲しいと思って作成した。最初はChatGPTのAPIに洋楽の歌詞を入れてみたが、tempatureを0にすれば、毎回同じ翻訳を返してくれるが、プロンプトの内容のせいか出力データに安定性がなかった。ある歌詞は問題なく指示通りに返してくれるが、違う歌詞だと変な回答になって戻ってくる。おそらく英語歌詞の内容を「ここから先は歌詞です」とプロンプトをいれても食べてしまうのだ。トークン数も上限があるので英語歌詞でトークン消費もしたくない。

　何度かやってみて、ChatGPTは翻訳には向いていないという結論に達した。では普通の翻訳APIを使えばいいいと判断。GoogleとDeeplの２つが翻訳では有名なので、どっちかを使おうと。

# Google Translate API

![スクリーンショット 2024-03-27 15.39.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398694/19000806-dedc-28f4-4187-1daa7d929df2.png)

　Googleの翻訳API「Google Translate API」は料金プランがわかりにくく 1hour /  $45 とか書いてある。バカ高い。検索してみると古いGoogleのAPIなら無料で使えると出てくるので、ブログに掲載されていた古いヴァージョンをPYTHONにインストールして使用。結論からいうとNGだった。ヴァージョンが古いせいでHTTPXのバージョンを下げられると、他のライブラリがコンフリクトを起こしてHTTPXを新しくしろとエラーが出る。Googleの翻訳APIは料金プランがわかりにくいので使いたくない。Googleは平気で値段を上げたりするので個人開発では手を出しにくい。

# Deepl

https://www.deepl.com/ja/pro-api

　Deeplをみたところ、APIの使用料金がわかりやすく、500,000文字まで1月無料と書いてある。個人開発にはちょうどいい。クレジットカード登録しないといけないが50万文字オーバーで自動に有料プランに変わるわけでもない。使いたい放題にしても一月700円程度の安さ。pip install deepl してもコンフリクトは起こらない。翻訳精度も高いのでDeeplに決定。

# 実装

下記がDEEPLをつかったPYTHONのサンプルコード。
月間の上限があるので1回で翻訳できるのは2000文字に規定。原文と翻訳文を比較できるように、原文の次の行に翻訳文を出力。空行をいれて続きの文を出力というルール。

## my app/views.py
```
cdef index(request):

API_KEY = os.environ['DEEPL_API_KEY']

trans_results = ""
if request.method == "POST":
    form = ChatForm(request.POST)
    if form.is_valid():
        sentence = form.cleaned_data['sentence']
        if len(sentence) < 2001:
            def translate_text_with_deepl(text, auth_key):
                translator = deepl.Translator(auth_key)
                result = translator.translate_text(text, target_lang="JA")
                return result.text

            def get_translated_texts():
                auth_key = API_KEY
                original_texts = sentence
                lines = original_texts.strip().split('\n')
                translated_texts = []
                for line in lines:
                    translated_line = translate_text_with_deepl(line, auth_key)
                    translated_texts.append(f'{line}\n{translated_line}\n')
                return translated_texts

            results = get_translated_texts()
            for result in results:
                trans_results += result + "\n"
        else:
            trans_results = '文字数オーバーです'
else:
    form = ChatForm()

```

# 結果

 試しにテイラースフィウトの「クルーエル・サマー」を翻訳させてみました。期待通りの結果が戻ってきました。

![スクリーンショット 2024-03-27 15.51.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398694/da58f364-bc7c-1d88-379d-a7bce2eb9b4a.png)


 コードの開発など記述については説明しません。1年も経たないうちに有益な情報じゃなくなるので、公式マニュアルを参考にしてください。
「Need to perform AWS calls for account…」エラーへの対応

## 背景
Proxy環境にてCDKを活用した開発を実施している最中に`cdk bootstrap`コマンドを
実行してCloudFormationで利⽤するデプロイ用途のS3バケットを作成する際に
下記のエラーが発生した。

```
Need to perform AWS calls for account [AccountID], but no credentials have been configured
```

## 実施したこと
まずは同様のエラーに対応していると思われた下記の記事を参考に、
「~/.aws/config」ファイルの形式を確認したものの、特に形式に問題はなかった。

https://qiita.com/tomokon/items/9aace52fc19e8904ab26


その後`cdk doctor`コマンドを実行して、作成したcdkプロジェクトに問題点がないかの
確認を実施したところ、その結果にも問題なかった。


なかなか目ぼしい対処方法が見つけられない中で、ふと実行環境がProxy環境下に
あることが気になり始めた。そこで、下記のコマンドを実行してProxy設定をした後に
もう一度 `cdk bootstrap`コマンドを実行したところ、実行に成功した。

`set HTTP_PROXY=http://[proxyアドレス]:[ポート番号]`　
`set HTTPS_PROXY=http://[proxyアドレス]:[ポート番号]`
JavaのStreamAPIの「中間操作」について

Streamインスタンスを作成したら、次は任意の中間操作ができます。
Streamインスタンスの作成方法については、以下の記事を参照してください。
[JavaのStreamインスタンスを作成する](https://qiita.com/nakajima417/items/f80701b51dca680b719e)

## JavaのStream APIにおける中間操作
JavaのStream APIにおける中間操作は、ストリームの各要素に対して何らかの処理を行い、その結果を新しいストリームとして返す操作です。中間操作は遅延実行され、終端操作が呼び出されるまで実際の処理は行われません。以下に、よく使われる中間操作のいくつかを紹介します。

## filter
 __条件に合う要素だけを取り出します。__
filter 操作は、ストリームの各要素に対して条件をテストし、その条件を満たす要素のみを含む新しいストリームを生成します。条件はラムダ式で指定します。
この操作をすることで要素の数は減りますが、要素の型自体は変わりません。

例えば、次のコードでは、名前が "A" で始まる要素のみをフィルタリングしています。
```java
List<String> names = Arrays.asList("Alice", "Bob", "Charlie");
Stream<String> filteredNames = names.stream().filter(name -> name.startsWith("A"));
// 結果: "Alice"
```

## map
__各要素に対して何らかの処理を行い、その結果を新しいストリームとして返します。__
map 操作は、ストリームの各要素に対して指定された関数を適用し、その結果からなる新しいストリームを生成します。この操作は、要素を変換するのに便利です。

例えば、次のコードでは、各名前の文字数を取得しています。
```java
List<String> names = Arrays.asList("Alice", "Bob", "Charlie");
Stream<Integer> nameLengths = names.stream().map(name -> name.length());
// 結果: 5, 3, 7 (各名前の文字数)
```

## sorted
__要素を並び替えます。__
sorted 操作は、ストリームの要素を自然順序または指定された順序でソートし、その結果からなる新しいストリームを生成します。デフォルトでは自然順序（数値の場合は小さい順、文字列の場合は辞書順など）でソートされます。

例えば、次のコードでは、名前を辞書順にソートしています。
```java
List<String> names = Arrays.asList("Charlie", "Bob", "Alice");
Stream<String> sortedNames = names.stream().sorted();
// 結果: "Alice", "Bob", "Charlie"
```
## 複数の中間操作
これらの操作を組み合わせることで、データの処理を柔軟に行うことができます。
たとえば、名前が "A" で始まる人の名前の文字数をソートする場合、以下のように書くことができます。

```java
List<String> sortedFilteredLengths = names.stream()
    .filter(name -> name.startsWith("A"))
    .map(name -> name.length())
    .sorted()
    .collect(Collectors.toList());
// 結果: [5] (Alice の文字数)
```

このように、filter, map, sorted などの中間操作を使うことで、複雑なデータ処理のロジックを簡潔に記述することができます。