OmniAICreator/Qiita-1.07M huggingface dataset:
Recoilのatomをデフォルト値にリセットしてもAPIが送信されない

# はじめに
RecoilのatomをパラメーターにしてselectorでAPIを送信してました。
`useResetRecoilState`でリセットしてatomの値を更新してもselectorがAPIを送信しないのが今回の問題です。
今回は **「ボタンを押すとデフォルト値に戻してAPIを送信する」** という動作を前提にしています

# サンプルコード
```ts
// defaultFuncには何かしらのデフォルト値が設定されます
export const atomValue = atom({
  key: "atomValue",
  default: defaultFunc,
})

```

```ts
// atomをパラメーターにとり何かしらのAPIを送信する。
export const apiSelector = selector({
  key: "apiSelector",
  get: async ({ get }) => {
    const atomParam = get(atomValue)
    const respnse = await getApi(atomParam)
    return respnse
  }
})

```

```tsx
export const sample = () => {
 const resetAtomValue = useResetRecoilState(atomValue)
　　return (
　　　　　<Button
  　　　　onClick={resetAtomValue}
　　　　　>
  　　　リセット
　　　</Button>
　}
)
```

# 色々と試してみた
- ボタンを押した時に `useResetRecoilState`を使用するのではなく、直接デフォルト値を設定する

- ログを仕込んでatomボタンがが更新されているか確認する

- useEffectを使用していたので、useEffectの副作用を疑って、できるだけレンダリングしないようにuseEffectを解体

- reset関数を使用してリセットを行っているが、reset関数内の更新でatomが競合している可能性があるため、useRecoilCallBackを使用してみる

その後、selectorにログを仕込んで確認したところ、atomが更新されているのにも関わらずにselectorが実行されていないということがわかりました。
通常、selector内でgetしているatomが変更されるとAPIが送信されるはずです。
selector内ではしっかりとgetしています。`const atomParam = get(atomValue)`

# 解決策



RequestseIDをselector内のsetに用意して、リセットボタンを押下するたびにset内の処理も実行されるように変更しました。
そうすることで、強制的に更新させてAPIを送信するように修正しました。
処理の流れは以下になります
・リセットボタンを押下する
・`resetAtomValue()`でatomがデフォルトの値にリセットされる
・` apiSelector()`でsetが更新されてAPIが送信される

```ts
// RequestseIDを管理するatomを作成
export const apiSelectorRequestId = atom<number>({
  key: "apiSelectorRequestId",
  default: 0,
})

```

```ts
export const apiSelector = selector({
  key: "apiSelector",
  get: async ({ get }) => {
    const atomParam = get(atomValue)
    const respnse = await getApi(atomParam)
    return respnse
  },

// setを使用してatomを強制的に更新させる
  set: ({ set }) => {
    set(apiSelectorRequestId, (n) => n + 1)
  },
})
```

```tsx
export const sample = () => {
 const resetAtomValue = useResetRecoilState(atomValue)
 const resetApiSelectorRequestId = useResetRecoilState(apiSelector)
　　return (
// resetAtomValue();でデフォルト値に戻してからapiSelector();でRequestseIDを更新することでAPIを送信
　　　　　<Button
  　　　　onClick={() => {
    resetAtomValue();
    apiSelector();
    }}
　　　　　>
  　　　リセット
　　　</Button>
　}
)
```
TailwindCSS のクラス名を自動補完を効かせつつ任意の変数名に代入する方法

TailwindCSSでクラス名を定義する際、VSCodeだと[拡張機能](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)をインストールしていると自動補完が有効になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552712/9e170e40-7a07-7403-7cd2-3d4bb80e47e4.png)

自動補完は`const className = "" `という変数名に対しても有効になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552712/03322785-37bd-8c0d-1957-ef5820d7f8fd.png)

ちなみに、デフォルトで自動補完が有効になる変数名は、

- "class",
- "className",
- "ngClass",

の３つです。

では、`const mySpecialStyles = ""` だとどうでしょう。もちろん自動補完は効きません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552712/8409e437-1777-4b7f-87cc-df30444b4945.png)

このような、任意の `mySpecialStyles` や `greatStyles`のような変数名であっても自動補完を効かせる方法はないのか？ しらべてみたところ、次の設定方法があったので共有したいと思います。

元は[GitHub Discussions](https://github.com/tailwindlabs/tailwindcss/discussions/7554#discussioncomment-3030988)で紹介されていたので、詳しくはそちらを御覧ください。


## VSCodeの設定

VSCodeの設定は簡単で、次の図を参考に Class Attributes の項目に移動して、 Add item で`.*Styles*`を追加してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552712/09f78d83-493a-a0b0-cf8f-126a1265c8c0.png)


`settings.json`に追記する場合は、以下のとおりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552712/891eddfa-bdb8-a6f2-a744-f2ce9ab49288.png)

これで、`mySpecialStyles` や `greatStyles`のような変数名でも自動補完が有効になります🎉

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552712/d1313139-0e94-c5d0-a29b-087583da8716.png)

---

基本的にインラインでクラスを定義していくのが TailwindCSS の推奨かと思いますが、重複した定義になったり、コードが読みづらくなるので、分離してスッキリしたい方はぜひ試してみてください🙂
JavaでWord文書を暗号化PDFに変換する方法

ドキュメントをPDFに変換することで、デバイス間の共有と読み取りが簡単になり、ドキュメントの見栄えを維持できます。
変換時に暗号化を適用することで、特定の人物のみがコンテンツを閲覧・編集できるように制限し、情報漏洩や改ざんを防ぐことができます。
この記事では、[Free Spire.Doc for Java](https://jp.e-iceblue.com/introduce/free-spire-doc-for-java.html)を使用して、**Wordドキュメントをパスワード保護のPDFに変換する方法**を紹介します。

- **[Wordドキュメントをパスワード保護PDFに変換する](#wordドキュメントをパスワード保護pdfに変換する)**

### 【依存関係の追加】
この記事の方法は、無料のWord文書処理Java API、Free Spire.Doc for Javaが必要です。このAPIは、[公式サイト](https://jp.e-iceblue.com/download/free-spire-doc-for-java.html)からダウンロードするか、Mavenでプロジェクトに導入することができます。Mavenのコードは以下の通りです。
```xml
<repositories>
    <repository>
        <id>com.e-iceblue</id>
        <name>e-iceblue</name>
        <url>https://repo.e-iceblue.com/nexus/content/groups/public/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.doc.free</artifactId>
        <version>5.2.0</version>
    </dependency>
</dependencies>
```

## Wordドキュメントをパスワード保護PDFに変換する
Spire.Doc for Javaでは、**Document.saveToFile(String, ToPdfParameterList)** メソッドを使用して、Wordドキュメントをパスワード保護のPDFに変換できます。
**ToPdfParameterList** パラメータを使用して、暗号化の適用など、WordからPDFへの変換設定を制御できます。
以下が詳細な手順です:
- **Document**オブジェクトを作成します。
- **Document.loadFromFile()** でWordドキュメントを読み込むみます。
- **ToPdfParameterList** のインスタンスを作成します。
- **ToPdfParameterList.getPdfSecurity().encrypt()** でPDFの開くパスワードと権限パスワードを設定します。
- **Document.saveToFile(String, ToPdfParameterList)** でWordをパスワード保護PDFに変換します。

#### コード例
**java**
```java
import com.spire.doc.Document;
import com.spire.doc.ToPdfParameterList;
import com.spire.pdf.security.PdfEncryptionKeySize;
import com.spire.pdf.security.PdfPermissionsFlags;

public class convertWordToPdfWithPassword {
    public static void main(String[] args) {
        // Documentオブジェクトの作成
        Document doc = new Document();

        // Wordドキュメントの読み込み
        doc.loadFromFile("サンプル.docx");

        // ToPdfParameterListの作成
        ToPdfParameterList parameter = new ToPdfParameterList();

        // PDFの開くパスワードと許可パスワードの設定
        parameter.getPdfSecurity().encrypt("openpassword", "permissionpassword",
                PdfPermissionsFlags.None, PdfEncryptionKeySize.Key_128_Bit);

        // Wordをパスワード保護PDFに変換
        doc.saveToFile("暗号化PDF.pdf", parameter);
    }
}
```

![Wordドキュメントをパスワード保護PDFに変換する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/e4a61ee1-0147-c916-eec1-a0d4b2b35e7d.png)


> **上記は、Free Spire.Doc for Javaを使用してWord文書をパスワードで保護されたPDF文書に変換する方法を示しています。 Free Spire.Doc for Javaのその他の機能については、[Spire.Doc for Javaのチュートリアル](https://jp.e-iceblue.com/tutorials/java/spire-doc-java/doc-java-program-guide-content.html)をご覧ください。また、Spire.Doc関連の問題について議論したい場合は、[Spire.Docフォーラム](https://www.e-iceblue.com/forum/spire-doc-f6.html)にアクセスしてください。**
任意の .onion ドメインを生成する

パッケージインストールが不要なコンテナでアドレス生成をしていきます。

https://community.torproject.org/onion-services/advanced/vanity-addresses/

:::note
56文字の Onion Service v3 アドレスです。
16文字の v2 はすでに使用できなくなっています。
:::

## シンプルに無限生成
大量のディレクトリが生成されるので作業用ディレクトリ内で実行していきます。
```sh
mkdir onion-vanityaddresses
cd onion-vanityaddresses

# `neko` から始まるアドレスを生成
docker run --rm -it -v $PWD:/keys ghcr.io/cathugger/mkp224o:master -d /keys neko
```
`neko`から始まるアドレスが生成されました。
```
nekotgxcl5psscafomta2azqfkpu2jfoj65r7whd6l32ckbodfty55ad.onion
nekojgraqhh2amewokas3f524ypmrw6bxtujgll2wtmgdffbqpdczlyd.onion
nekojqierdu5tc2uhqptkvk7do6tymvoy2p7tadjvndkjj5xscndzgid.onion
...
```
ディレクトリ内に各ファイルが入っています。
```
.
└── nekotgxcl5psscafomta2azqfkpu2jfoj65r7whd6l32ckbodfty55ad.onion
    ├── hostname
    ├── hs_ed25519_public_key
    └── hs_ed25519_secret_key
```

## 個数を指定して生成
デフォルトでは無制限に生成し続けるため、`-n`オプションで生成数を指定することもできます。
```sh
# 3つだけ生成
docker run --rm -it -v $PWD:/keys ghcr.io/cathugger/mkp224o:master -d /keys -n 3 neko
```

## 生成時間の目安
ツール作成者によると 6 文字程度であれば数十分ほどで生成できるとのこと。
> マシンが十分に強力であれば、6 文字のプレフィックスを入力するのに数十分もかからないはずです。
> if your machine is powerful enough, 6 character prefix shouldn't take more than few tens of minutes
https://github.com/cathugger/mkp224o#faq-and-other-useful-info

私の環境では6文字では一時間に3～5個ほど、8文字では一晩～一日ほどかかりました。

1 台の Raspberry Pi 2B と 4 台の Raspberry Pi Zero を使用したときの概算時間
https://www.jamieweb.net/blog/onionv3-vanity-address/#other-programs
```
Vanity Characters : Approximate Generation Time
1  : <1 second
2  : <1 second
3  : 1 second
4  : 30 seconds
5  : 16 minutes
6  : 8.5 hours
7  : 11.5 days
8  : 1 year
9  : 32 years
10 : 1,024 years
11 : 32,768 years
12 : 1 million years
13 : 32 million years
14 : 1 billion years
15 : 32 billion years
16 : 1 trillion years
17 : 32 trillion years
18 : 1 quadrillion years
19 : 32 quadrillion years
20 : 1 quintillion years
21 : 32 quintillion years
22 : 1 sextillion years
23 : 32 sextillion years
24 : 1 septillion years
25 : 32 septillion years
26 : 1 octillion years
27 : 32 octillion years
28 : 1 nonillion years
29 : 32 nonillion years
30 : 1 decillion years
31 : 32 decillion years
32 : 1 undecillion years
33 : 32 undecillion years
34 : 1 duodecillion years
35 : 32 duodecillion years
36 : 1 tredecillion years
37 : 32 tredecillion years
38 : 1 quattuordecillion years
39 : 32 quattuordecillion years
40 : 1 quindecillion years
41 : 32 quindecillion years
42 : 1 sexdecillion years
43 : 32 sexdecillion years
44 : 1 septendecillion years
45 : 32 septendecillion years
46 : 1 octodecillion years
47 : 32 octodecillion years
48 : 1 novemdecillion years
49 : 32 novemdecillion years
50 : 1 vigintillion years
51 : 32 vigintillion years
52 : 10^66 years
53 : 10^69 years
54 : 10^72 years
55 : 10^75 years
56 : 10^78 years (1,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000)
```
Visual Studio 2022の検索バーを非表示にする

# 目的
Visual Studio 2022の「検索バー」を非表示にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331961/24ff796b-7c60-7dc9-0611-33c21a5bc766.png)
※「キャプション バー」を表示化している為、使用者によっては異なる、やり方は後述の「参考にした記事」を参照

# 環境
:::note info
検証時は以下の通り
・Windows 10 Professional
・Visual Studio 2022 Community(x64) Ver.17.7.0
:::
:::note warn
注意
visual studio 2022 Professional 以上でも有効かは不明
:::

# 検証
拡張機能：SearchBarHiderをインストールする

https://marketplace.visualstudio.com/items?itemName=SzilardJanki.SearchBarHider
> Works with
> Visual Studio 2022 (amd64)

# 結果
見事に**検索バー**だけ非表示になる
~~標準でコレくらい実装して欲しいものだ、何故しない？~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3331961/dbf7e841-e88f-72fc-3449-2c4735bc8cf8.png)
起動直後は表示されているが、インストールした拡張機能の初期化が済んだ後に非表示化となる様子

# 所感
**邪魔な物が視界に入らなくなってスッキリ！**

# 余談

https://developercommunity.visualstudio.com/VisualStudio?q=search+bar

Visual Studio 2019の頃から叫ばれている代物であり、
頑なにSearch Barを非表示にする手段を用意しない姿勢の様だ。
理由もなくCloseしたりする姿勢は歓迎できないし、
Feedbackが重複投稿される理由を今一度考えて欲しい物だ。

# 参考にした記事
https://qiita.com/libraplanet/items/2a47c0102aee86b68cb4
Google でログイン　を設定

[Google でログイン](https://support.google.com/accounts/answer/12849458?hl=ja&ref_topic=12843167)  を Web クライアントで使う方法です。
次のページを参考にしました。
[Googleでログインを実装](https://nakanishi-s.jp/google%E3%81%A7%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85/)

## Client ID の取得

新しいプロジェクトを作成

![google_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/9f0f5d33-5b78-ac2c-f005-eee23f463b2e.png)

認証情報

![google_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/97dc8163-2784-1e3c-3a49-cd127adecc4b.png)

OAuth 同意画面

![google_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/08b73e72-4f84-a9fe-5bf6-80ba46e195e2.png)

アプリ名の入力

![google_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/7ac9bd3c-8c95-90c0-e398-f96e4fc1b718.png)

アプリ登録の編集

![google_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0891ef5c-2738-9bd0-bb96-9529f4864133.png)

アプリ登録の編集

![google_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/9af21f36-caff-a4c6-76f6-dc8f515331f0.png)

OAuth クライアント ID の作成

![google_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/3a73f06f-8edb-1df0-3e76-246379b5e292.png)

JSON をダウンロード

![google_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/3a447c84-1771-8c50-3510-557d69589304.png)

## Web ページの作成

index.html を作成

次を書き換えて下さい。
>data-client_id
>data-login_uri


```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
Login Test
</title>
</head>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
     data-client_id="371868132900-eg26ng307au********.apps.googleusercontent.com"
     data-login_uri="https://ekzemplaro.org/test_dir"
     data-auto_prompt="false">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>
<hr />
<p>Aug/11/2023 PM 18:08</p>
</body>
</html>
```

ブラウザーでアクセス

![google_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/ea157cd2-57df-ea97-56ce-5522b001ae02.png)

## 関連ページ
[HTML API](https://developers.google.com/identity/gsi/web/reference/html-reference?hl=ja)
モンテカルロ積分とは？ 〜ChatGPTに答えてもらってみた

モテカルロ積分のイメージをChatGPTに書いてもらった:writing_hand:

> 想像してみてください。大きな池があり、その中に浮かぶ特定の形をした浮き台があるとします。この浮き台の面積を知りたいと思いました。ただし、測定器具は何も持っていないとします。

> ここで、手持ちの小石を使って面積を推定する方法を思いつきました。池全体に向かってランダムに小石を投げ入れ、浮き台に当たった小石と外れた小石の数を数えます。投げた小石のうち、浮き台に当たった小石の割合を計算し、それを使って浮き台の面積を推定します。

> モンテカルロ積分も、この考え方と非常に似ています。数学的な関数や領域の「面積」（または高次元での「体積」）を計算するのに、ランダムな点を使ってその領域内の値をサンプリングし、そのサンプルを基に積分値を推定します。

> この方法の美しさは、非常に複雑な関数や領域でも、ランダムサンプリングを多く行うことで正確な結果に近づけることができる点にあります。しかし、多くのサンプルを取るほど計算時間がかかるという欠点もあります。

> 要するに、モンテカルロ積分は、ランダムなサンプルを使って複雑な計算を推定する方法です。

覚えやすいかも。
[備忘録] Error: spawnSync docker ENOENTの解消

# はじめに
AWS CDKで Lambda を作成、デプロイしようとしたところ下記エラーが発生した。

```
% cdk deploy
Error: spawnSync docker ENOENT
    at Object.spawnSync (node:internal/child_process:1111:20)
    at spawnSync (node:child_process:814:24)
    at dockerExec (/Users/user/Documents/app/node_modules/aws-cdk-lib/core/lib/private/asset-staging.js:1:3385)
    at Function.fromBuild (/Users/user/Documents/app/node_modules/aws-cdk-lib/core/lib/bundling.js:1:4085)
    at new Bundling (/Users/user/Documents/app/node_modules/aws-cdk-lib/aws-lambda-nodejs/lib/bundling.js:1:2315)
    at Function.bundle (/Users/user/Documents/app/node_modules/aws-cdk-lib/aws-lambda-nodejs/lib/bundling.js:1:599)
    at new NodejsFunction (/Users/user/Documents/app/node_modules/aws-cdk-lib/aws-lambda-nodejs/lib/function.js:1:1221)
    at new AppStack (/Users/user/Documents/app/lib/app-stack.ts:18:20)
    at Object.<anonymous> (/Users/user/Documents/app/bin/app.ts:7:1)
    at Module._compile (node:internal/modules/cjs/loader:1103:14) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawnSync docker',
  path: 'docker',
  spawnargs: [
    'build',
    '-t',
    'cdk-8d408efea9f2433343861a553b56c28ac5bcb99a4716e393c58d1b7029a59b35',
    '--platform',
    'linux/amd64',
    '--build-arg',
    'IMAGE=public.ecr.aws/sam/build-nodejs16.x',
    '--build-arg',
    'ESBUILD_VERSION=0',
    '/Users/user/Documents/app/node_modules/aws-cdk-lib/aws-lambda-nodejs/lib'
  ]
}
```

# 実施したこと
macOSを使用しており、後述する記事とエラーも一致していたたため、記載の通り esbuild をインストールした。
```
% npm install --save-dev esbuild@0
```

その後再度 cdk deploy を実行したところ、無事デプロイすることができた。

# 最後に
参考にした文献を記す。
- https://qiita.com/derodero24/items/a0b05ef026f63fca8f03
- https://docs.aws.amazon.com/cdk/api/v1/docs/aws-lambda-nodejs-readme.html#local-bundling
text-generation-webuiをアップデートする

condaを使いインストールしたtext-generation-webuiを、アップデートした時のメモになります。

text-generation-webuiのzip版のアップデートではないので、ご注意ください。

## 環境

| 項目 | 情報 |
| :-- | :-- |
| OS | Ubuntu 22.04 LTS |
| cuda | cudaインストール済み |
| ユーザ | textgen |
| conda環境名 | textgen |

### その他

text-generation-webuiを下記手順でインストール。

https://qiita.com/kararu88/items/86ed1e9314ddd3065c08


## アップデート手順

`text-generation-webui`ですが開発が活発です。
（使わさせていただいてる身としては、大変ありがたいことです。）

定期的にアップデートした方が、最新機能などを追うことができて便利かと思います。

また、`text-generation-webui`が利用しているライブラリ（※）も定期的にアップデートされているので、忘れないようにライブラリの更新も行いましょう。
※ requirements.txtでライブラリは管理されている模様

### アップデート

condaで管理しているtextgen環境をactivateし、`text-generation-webui`がインストールされているディレクトリへ移動する

```
(base) textgen@localhost:~$ conda activate textgen
(textgen) textgen@localhost:~$ cd text-generation-webui/
```

`git pull`コマンドを使い、`text-generation-webui`をアップデートする。

```
(textgen) textgen@localhost:~/text-generation-webui$ git pull
remote: Enumerating objects: 67, done.
remote: Counting objects: 100% (67/67), done.
remote: Compressing objects: 100% (28/28), done.
remote: Total 67 (delta 44), reused 59 (delta 39), pack-reused 0
Unpacking objects: 100% (67/67), 30.70 KiB | 2.05 MiB/s, done.
From https://github.com/oobabooga/text-generation-webui
   a3295dd..8dbaa20  main              -> origin/main
 * [new branch]      max_tokens_second -> origin/max_tokens_second
Updating a3295dd..8dbaa20
Fast-forward
 README.md                        |  3 ---

～～中略～～

 requirements.txt                 |  4 ++++
 10 files changed, 59 insertions(+), 119 deletions(-)
```

## ライブラリの更新を行う

`git pull`により、`text-generation-webui`をアップデートした際に、`requirements.txt`の更新が行われる時があります。

`requirements.txt`の更新が行われた際は、ライブラリの更新が行われたということなので、下記`pip`コマンドを使いライブラリの更新を行いましょう。
`requirements.txt`の更新がなかった場合は、本手順は不要です。

```
(textgen) textgen@localhost:~/text-generation-webui$ pip install -r requirements.txt
```

お疲れさまでした。
以上が`text-generation-webui`のアップデート手順になります。

## 参考HP

- [text-generation-webui](https://github.com/oobabooga/text-generation-webui)
- [text-generation-webuiライブラリ更新について](https://github.com/oobabooga/text-generation-webui#updating-the-requirements)
Web制作に便利なツールサイト集

# 便利そうなサイト集めました
Web制作時に便利そうなサイトを集めした。
気に入ったのがあったら、ブックマークなどしてください。

# CSS系
・グラデーションを簡単につくる

https://cssgradient.io/

<br>
<br>

・クリップパスを簡単につくる

https://bennettfeely.com/clippy/

<br>
<br>

・流体シェイプを簡単につくる。

https://9elements.github.io/fancy-border-radius/

<br>
<br>

・ローダー集

https://cssloaders.github.io/


# フォント・アイコン系
Googleが提供するフォント集

https://fonts.google.com/


<br>
<br>

・Google作成のアイコン集

https://fonts.google.com/icons?icon.query=date


# SVG系
・波のSVGを簡単に制作

https://getwaves.io/


# その他

・イージング関数(アニメーションの動き方)チートシート

https://easings.net/ja

<br>
<br>

・ChatGPTでコードを生成するノウハウ

https://www.promptingguide.ai/jp/applications/coding

<br>
<br>

・日本語 -> 変数名　に変換するサイト

https://codic.jp/engine
printとreturnの違い

# printとreturnの違いについて
勉強してたら違いなんだったっけ？と忘れてしまうので書いてみましたー

・<font color="PaleVioletRed">`print`は、文字列や数値などを画面に出力したい場合に使う。</font>
・<font color="MediumPurple">`return`は、処理された結果（戻り値）を何らかの形で、他の関数で利用したいという場合に使う。</font>

printは、結果を表示させるだけ。
returnは、結果を利用できる。
ということですかね:confused:

### printで見てみよう

```py:print
def number():
    print(1)

print(number())
```

```py:実行結果
1             # print(1)の実行結果
None          # print(number())の実行結果
```


### returnで見てみよう

```py:return
def number():
    return(1)

print(number())
```
```py:実行結果
1             # print(number())の実行結果
```

printでは「None」という結果が表示されています。
Pythonでは、`戻り値が無い`時`何も値が存在しない`時に「None」が返されるみたいです。

print(1)で出力されているだけなので
print(number())を実行させたら、number関数にreturn文がないので、「None」が返ってくる:raising_hand:

---

```py:print(1)→print 1に変えたみた
def number():
    print 1

print(number())
```
```py:実行結果
 print 1
    ^^^^^^^
SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
```
---
```py:return(1)→return 1に変えたら
def number():
    return 1

print(number())
```
```py:実行結果
1
```
【 Java 】スッキリわかるJava 実践編　ラムダ練習問題

<h2>#スッキリわかるJava 実践編　ラムダ練習問題</h2>

### ◾️ 練習問題3_1
```java:FuncListクラス
public class FuncList {
    
    public static boolean isOdd(int x) {
        return (x % 2 == 1);
    }
    
    public String passCheck(int point, String name) {
        return name + "さんは" + (point > 65 ? "合格" : "不合格");
    }
}
```

```java:Func1 / Func2 インタフェース
public interface Func1 { boolean call(int x); }

public interface Func2 { String call(int point, String name); }
```

```java:Mainクラス 問題 3_1
public static void main(String[] args) {

    FuncList func = new FuncList();
    // FuncListクラスに定義した静的メソッドの参照を変数に代入
    Func1 f1 = FuncList::isOdd;
    // FuncListクラスに定義したメソッドの参照をインスタンス変数を通して代入
    Func2 f2 = func::passCheck;
    
    System.out.println(f1.call(15));
    System.out.println(f2.call(65, "Test"));
}
```
***

### ◾️ 練習問題3_2
```java:Mainクラス 問題 3_2
public static void main(String[] args) {
    // FuncListの各メソッドをラムダ式で表現
    Func1 f1 = x -> x % 2 == 1;
    Func2 f2 = (point, name) -> {
        return name + "さんは" + (point > 65 ? "合格" : "不合格");
    };
    System.out.println(f1.call(15));
    System.out.println(f2.call(65, "Test"));
}
```

***
### ◾️ 練習問題3_3
```java:Mainクラス 問題 3_3
public static void main(String[] args) {
    // Func1,2を標準関数インタフェースに変更
    // IntPredicate = Int値の引数を評価
    IntPredicate isOdd = x -> x % 2 == 1;
    // Predicate<xxx> = xxx値の引数を評価
    Predicate<Integer> f1 =  x -> x % 2 == 1;
    
    // <Integer = 引数1(point), String = 引数2(name) , String = 戻り値>
    BiFunction<Integer,String, String> passCheck = (point, name) -> {
        return name + "さんは" + (point > 65 ? "合格" : "不合格");
    };
    
    // f1とisOddの結果は同じ
    System.out.println(f1.test(15));
    System.out.println(isOdd.test(15));
    System.out.println(passCheck.apply(65, "Test"));
}
```
***
### ◾️ 練習問題3_4
```java:Mainクラス 問題3_4
public static void main(String[] args) {
    // 登場人物を格納
    List<String> names = List.of("菅原拓真", "大江岳斗", "朝香あゆみ", "湊雄介");
    
    // フルネームが4文字以下の人にの末尾に「さん」をつける StreamAPIを使う
    names.stream()
        .filter(name -> name.length() <= 4)
        .map(name -> name + "さん")
        .forEach(System.out::println);
}
```
SageMath: plot elliptic curve on finite field

# ガロア体上の楕円曲線をplotしてみむとす

## GF(13) - secp256k1
GF(13)上にsecp256k1と同じパラメータの楕円曲線を構築し、plotする。

```
sage: E = EllipticCurve(GF(13), [0, 7])
```

```
sage: print(E)
Elliptic Curve defined by y^2 = x^3 + 7 over Finite Field of size 13
```

```
sage: E.plot()
Launched png viewer for Graphics object consisting of 1 graphics primitive
```

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443312/f6ef97b3-1f51-bf6a-b6e9-c8394fd38e56.png)





```
sage: E.cardinality()
7
sage: P = E.random_element()
sage: print(P)
(11 : 5 : 1)
sage: P.order()
7
```
python maya hud refresh 

add `attachToRefresh=True`
```python
theSection = 5
    nextFreeBlock = cmds.headsUpDisplay(nextFreeBlock=theSection)
    oHUD_Index = cmds.headsUpDisplay(
        "mHUD_currnetCam",
        section=theSection,
        block=nextFreeBlock,
        blockSize="small",
        labelFontSize="small",
        dataFontSize="small",
        label="",
        command=getCurrentCam,
        attachToRefresh=True
        # event="cameraChange",
        )
```
Oracle Cloud Infrastructure Architect Associate 勉強メモ（データベース：ADB)

# Autonomousデータベース(ADB)
従来のDBで行っていた**チューニング**、**セキュリティ**、**バックアップ・リカバリ**、**更新**などの日常的な管理タスクを機械学習を使用して自動化するクラウド・データベース。
DBの構築及び管理に費やす時間とコストを大幅に軽減。

### フルマネージド
- 新規DB構築の簡素化
- セルフスケーリング（自動的にスケーリング）
- パッチ・アップデートの適用の自動化
- バックアップ・リカバリの自動化

### デプロイメント・オプション
どのようなハードウェアに展開できるか。
- 共有インフラストラクチャ
顧客はAutonomasDBのみを管理（小さい単位から利用可能）
- 専用インフラストラクチャ
Exadataハードウェアを独占
- Cloud @ Customer　インフラストラクチ
専用のハードウェアを顧客データセンターに設置。

### ワークロードタイプ
何をさせるのか。大きく分けてこの２つ
- ATP(Autonomous Transaction Processing)
オンライントランザクション処理(OLTP)に特化。
- ADW(Autonomous Data Warehouse)
オンラインの分析処理(OLAP)用。

共有or専用インフラストラクチャではどちらも自動化される。
また他にも以下のようなものも用意されている。
- JSON
　JSONデータベース（JSON中心のアプリケーションの開発を簡単にするクラウド・ドキュメント・データベース・サービス）
- APEX
ローコード・アプリケーションを迅速に構築およびデプロイ。

# ADBへの接続
### ADWまたはATPへのパブリックインターネットからの接続
JDBC OCI(Javaプログラムからデータベースにアクセスするための標準インターフェース（API）)や、ODBC(Windows対応のアプリケーションからデータベース管理システム(DBMS)にアクセスするためのAPI。Microsoftが提唱)からSSHで通信する場合。
- ADBからWallet(証明書、証明書要求、秘密鍵などのすべてのユーザー資格情報を格納するファイルのセット)やKeystore（マスターキーが保管されるOSファイル。パスワードで保護）が提供されるので、これを使用し通信。
いわゆる秘密鍵・公開鍵による通信？
- アクセス制御リストにIPアドレスを登録し通信を制御。

# ADBのバックアップ
- DBを自動的にバックアップ
- 保存期間は60日間
- 保存期間内の任意の時点にDBを復元・復旧可能（スナップショット機能？）

# ADBのクローン
- フルクローン
データごとすべてクローンする。
- メタデータ・クローン
構成のみクローンする。データは引き継がれない。
- リフレッシュ可能クローン
読み取り専用のクローン（テスト用）

**同じテナント・同じリージョンでないと作成できない**

### データだけを抽出したい場合
**Oracle Data Pump Utility**を使用し、オブジェクトストレージにデータをエクスポート可能。
他のサービスにデータ移行する場合などに便利。
VisualStudio_stdafx.hでインクルードしている内容に対してIntellisenseがエラーを出す

## 環境
Visual Studio Community 2022 (64ビット)
## 問題

コンパイルは通るのにIntellisenseがエラーと判断して赤線が消えない。

![VisualStudio_stdafx_赤線.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3199929/96927546-d6cd-15eb-0055-ad8f36c7d2ce.png)
マウスオーバーすると以下のエラー内容が出る。
```
識別子"String"が定義されていません
```

エラーが出ているのはstdafx.hで定義しているはずの内容で、なぜかIntellisenseはそれらを「定義されていない」と判断している。

## 原因
stdafx.hをプロジェクトのルートディレクトリに置いており、この場所は自分の環境だとIntellisenseが効いていなかった。
```
プロジェクトのルート
  ├── src（自分が主にソースコードを置いている場所）
  ├── stdafx.cpp
  └── stdafx.h
```

## 解決
プロジェクト→「プロジェクト名」のプロパティ→構成を「すべての構成」にして構成プロパティ→C/C++→全般→追加のインクルードディレクトリに`$(ProjectDir)`を追加することで解決。
問題なくIntellisenseが効くようになった。
![VisualStudio_stdafx_追加のインクルードディレクトリ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3199929/08ad6660-e154-8f68-cfb8-ceb76915e773.png)

## 参考
[MS Visual Studio 2022 intellisense stdafx.h problem - Microsoft Q&A](https://learn.microsoft.com/en-us/answers/questions/1139242/ms-visual-studio-2022-intellisense-stdafx-h-proble)
[インテリセンスが効かない場合の対処方法（おいらの場合） - ir9Ex’s diary (hatenablog.jp)](https://ir9ex.hatenablog.jp/entry/20090517/1242566846)
【リンク集】アジャイルプラクティスの探し方

# プラクティスが多数掲載されているサイトや書籍
別記事で[アジャイル開発で使えるプラクティスを一覧化](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)していますが、もっと知りたい方向けに情報ソースを紹介しておきます。

## アジャイル全般

プラクティスを地下鉄路線図に見立てて紹介した以下の絵が有名です。

https://www.agilealliance.org/agile101/subway-map-to-agile-practices/

またAgile Japan 2016で上記の日本語版が印刷配布物として作成されました。

https://2016.agilejapan.jp/image/AgileJapan2016-pre-0-0-MetroMap.pdf

さらに日本アジャイルの草分けAGILE STUDIOさんの手により新たな路線図が作成されています。（2023年～）
とりあえずここに行けば基礎的なプラクティス知識は全部揃います！
路線図はひとまず完成とのことですが、今後も折をみて拡張していただけたら嬉しいな、と勝手な期待を抱いております。

https://www.agile-studio.jp/agile-practice-map

ちなみに海外コンサルの方が作成したさらに大きな路線図もありますが・・・、さすがにここまでくると数が多すぎてちょっと引くレベルです。(^^;)

https://www.slideshare.net/ChrisWebb6/agile-placemat-v9


## 技術系プラクティス

イチオシは以下の書籍です。技術系のプラクティスが豊富に載っているだけでなく、情報ソースについても満載です。プラクティスの探し方についてこの記事で足りなければ以下の本をあたるとよいかと。

https://www.shoeisha.co.jp/book/detail/9784798176826

次は説明不要の『XP』の第2版。第1版からの大幅な改訂＆さらに読みやすく。

https://www.ohmsha.co.jp/book/9784274217623/

プラクティスというよりプログラマの心構え（生活態度？）的な話が多いかもしれませんが。

https://www.ohmsha.co.jp/book/9784274066948/

## ふりかえり系プラクティス

質・量ともに圧倒的で、ふりかえりに関してこの一冊は外せません。

https://www.shoeisha.co.jp/book/detail/9784798168791

上記の著者、森さんが公開されている「[ふりかえりカタログ](https://qiita.com/viva_tweet_x/items/cc3bad3bd298406b6cc7)」も大人気のコンテンツなのでご存じの方も多いのではないかと思います。

さらに源流を辿るなら下記の一冊。ユニークで、すぐに使えるふりかえり手法がたくさん載っています。

https://www.ohmsha.co.jp/book/9784274066986/


## マルチチーム系プラクティス

複数チームでスクラムを実践するためのフレームワークLeSSの本。

https://www.maruzen-publishing.co.jp/item/?book_no=295180

## 海外サイト

英語サイトですがアイコン画像が明快なので直感的に探しやすいです。

https://openpracticelibrary.com/

アジャイル開発というより会議やカンファレンスなどのファシリテーションといった文脈になりますが、下記のサイトで35の手法が紹介されています。

https://www.liberatingstructures.com/

# おまけ

蛇足になりそうですが、僕がプラクティスを探す時の手順を晒しておきます。あくまでも自己流なのでこれが正解というつもりは全くないのですが、何かの参考になれば幸いです。

1. プラクティス名などのキーワードで**画像検索**する
1. 分かりやすいと思った画像のサイトをいくつか**眺めてみる**（まだ深く読み込まない）
1. この時点で概要ぐらいはおぼろげに掴めていると思うので、**検索ワードを整える**
（絞り込みのためのワードを追加する、メジャーな呼び方に改める、など精度を上げる）
1. **読むサイトを選び**、内容をしっかり読み込む
（書き手の情報が分かるようなら自社の業種・規模に近いものを選ぶと文脈のズレが少ない）
1. 少し賢くなった頭で、上記の手順を**もう一周してみる**

最低でも2つ以上のサイトを読んでみることをオススメします。理由は内容を比較することで、絶対に外してはいけないポイントとアレンジ部分が分かるからです。同じプラクティスでもやり方にはバリエーションがあります。それを知ることで実際に自分の職場に適用する際にどうカスタマイズすればよいか、の引き出しになります。

----------

以上、咀嚼できたプラクティスは自分の一覧にも随時追記して行こうとは思いますが、先は長そうです。世界は広いですね♪

　[アジャイルプラクティス一覧へ戻る](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)
【Python】逆ポーランド記法

# 作るもの
逆ポーランド記法（Reverse Polish Notation、RPN）を使用して表現された数式を計算する関数。

中置記法で表現された式「3 + 4」を逆ポーランド記法に変換すると「3 4 +」となる。この式をRPNで解釈すると、最初に「3」と「4」をスタックに積み、次に「+」演算子が来たときにスタックから2つの数値を取り出して演算し、計算結果をスタックに戻すという手順が続く。

# 実装
```python:rpn.py
def evaluate_rpn(expression):
    stack = []  # 演算対象の数値や中間結果を保持するスタック

    # RPN式の各トークンを順に処理
    for token in expression:
        # トークンが数値かどうかをチェック（負数も考慮）
        if token.isdigit() or (token[0] == "-" and token[1:].isdigit()):
            stack.append(int(token))  # 数値をスタックに追加
        else:
            b = stack.pop()  # スタックから2つの数値を取り出す（後に処理する数値）
            a = stack.pop()  # スタックから2つの数値を取り出す（先に処理する数値）
            # トークンに対応する演算を行い、結果をスタックに追加
            if token == "+":
                stack.append(a + b)
            elif token == "-":
                stack.append(a - b)
            elif token == "*":
                stack.append(a * b)
            elif token == "/":
                stack.append(int(a / b))  # 除算の結果を整数とする

    return stack[0]  # スタックの先頭に残るのが最終的な計算結果


# テスト
# RPN式の例：3 4 + 5 *
expression = ["3", "4", "+", "5", "*"]
result = evaluate_rpn(expression)
print("Result:", result)  # 出力: 35

```

# 参考
https://www.algoexpert.io
TOPPERS/箱庭上でPythonで動作する物理シミュレータ pybullet を動かす

Pythonで動作する物理シミュレータ pybullet というものがあります。

https://pybullet.org/wordpress/

物理シミュレータとして Unity とか Unreal Engine とか Gazebo とかとかありますが、セットアップが手間になりますよね。

これが、Pythonだけで物理シミュレーションができてしまうなんて素敵な環境です！

![スクリーンショット 2023-08-11 15.53.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/4eae5305-f372-8b49-4484-a019f1f0520e.png)



というわけで、早速、これを TOPPERS/箱庭（後述）に組み込んでみました。

# 箱庭とは
[TOPPERS/箱庭](https://toppers.github.io/hakoniwa/docs/)は、IoT/クラウドロボティクス時代の全体結合シミュレーション環境です。

箱庭の構成要素である箱庭アセットを、箱庭プラットフォーム環境上にポイポイっと放り込んで、手軽にシミュレーションできるようにすることを目指しています。

![スクリーンショット 2023-08-11 16.40.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/2e390740-6e2c-1da3-642f-8a339f095caf.png)

現時点で、箱庭アセットとしては以下のようなものがあります。

* マイコンシミュレータ [Athrill](https://www.toppers.jp/athrill.html)
* TOPPERS リアルタイム OS([ASP](https://www.toppers.jp/asp-kernel.html)/[ASP3](https://www.toppers.jp/asp3-kernel.html)/[ATK2](https://www.toppers.jp/atk2.html))
* 物理シミュレータ
  * [Unity](https://unity.com/ja)
  * [Pybullet](https://pybullet.org/wordpress/)(今回、新たに追加されました！)
* Unity上で動作するロボット
  * [EV3モデル](https://qiita.com/kanetugu2018/items/ee9b2bf0596a35e42b03)(HackEV, 電車、信号、踏切、荷物搬送ロボット)
  * [TurtleBot3モデル](https://qiita.com/kanetugu2018/items/c292ea92ef087bc5e68a)
  * [ドローンモデル](https://qiita.com/kanetugu2018/items/cacbc0b3632e070fb777)
* ロボット制御プログラム(開発者が作成するプログラムも箱庭アセットとして登録します)
  * Python上で動作する制御プログラム(Python)
  * ROS 上で動作する制御プログラム(C/C++)
  * RTOS上で動作する制御プログラム(C/C++)



# 動作環境

* OS
  * 現時点ではARM系Macのみ対応しています
  * 箱庭はクロスプラットフォーム対応していますので、今後、対応範囲を広げていきます！

# 必要なもの

* Python(version 3.10)
  * pyenvでインストールされたもの 
* 箱庭コンダクタ
  * インストーラ用意しています（後述）

# インストール手順

pybullet を箱庭に組み込んだ環境を以下の github リポジトリで公開しました。

https://github.com/toppers/hakoniwa-pybullet-simasset-plugin

Mac向けのインストール手順はこちらです。

https://github.com/toppers/hakoniwa-pybullet-simasset-plugin/blob/main/README-mac.md


# デモ

https://twitter.com/kanetugu2020/status/1689786612627218432
wiresharkを用いたパケットキャプチャ 3ハンドシェイク TCPとは

３ハンドシェイクを見つける場合

Stream index番号が同じであること
①送信元　→　送信先
seq = 0 

②送信先　→　送信元
seq = 1 Ack = 0

③送信元　→　送信先
seq = 1 Ack = 1

これで３ハンドシェイクが完成する

３ハンドシェイク通信を見つけたい場合は
パケットを右クリック　→　追跡　→ TCPストリームで
絞ることができます。
[Flutter]FlutterでAndroidのcompileSdkVersion,targetSdkVersion,minSdkVersionを変更する方法

## はじめに

以前までは、バージョン更新はapp直下のbuild.gradleの設定で行っていました。
変数を使う場合も同ファイルで行っていましたが、現在はflutter.minSdkVersionのようにflutterの設定ファイルから取得しているようです。ガン無視してダイレクトに記載しても動作しますが、作法がよろしくないので、flutterの設定をいじって直すにはどうしたらいいのかを調べました。

```kotlin
    defaultConfig {
        applicationId "com.example.hogehoge"
        minSdkVersion flutter.minSdkVersion
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
```

## 解決
flutterのSDKをインストール（デフォルトだとユーザ名直下）した場所から下記のパスの位置にあります
```
~/flutter/packages/flutter_tools/gradle
```
この中のflutter.gradleファイルです。
```
class FlutterExtension {
    /** Sets the compileSdkVersion used by default in Flutter app projects. */
    static int compileSdkVersion = 33 // ←これ

    /** Sets the minSdkVersion used by default in Flutter app projects. */
    static int minSdkVersion = 28 // ←これ

    /** Sets the targetSdkVersion used by default in Flutter app projects. */
    static int targetSdkVersion = 33 // ←これ

    /**
     * Sets the ndkVersion used by default in Flutter app projects.
     * Chosen as default version of the AGP version below as found in
     * https://developer.android.com/studio/projects/install-ndk#default-ndk-per-agp
     */
    static String ndkVersion = "23.1.7779620"

    /**
     * Specifies the relative directory to the Flutter project directory.
     * In an app project, this is ../.. since the app's build.gradle is under android/app.
     */
    String source

    /** Allows to override the target file. Otherwise, the target is lib/main.dart. */
    String target
}
```

上記のminSdkVersion、targetSdkVersion、compileSdkVersionの部分を更新することで解決します。

なんでこんな面倒になったのでしょうか。個人的にはこれらのバージョンはアプリ仕様によって変えるべきだと思っているので、共通部でこの設定はイマイチですね。まあapp直下のbuild.gradleを直接変更でも作法はよろしくないが、場合によりその方がいいかと思います。

## 最後に
FlutterはAndroidやiOSで個別にバージョンやアプリ名、ローカライズ、アイコン設定などなどやることがあるため、Android,iOS開発もある程度知見がないとまだまだ敷居がたかいものです。
エレベーターをJavaScriptで表現してみた

### そもそも何故、エレベーターをJavaScriptsで？
ずいぶん前に作りましたが、当時の筆者はどうかしていたのかもしれません。
しかも地味に時間がかかりました。

### できたもの
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNJvXqK" data-preview="true" data-editable="true" data-user="benjuwan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/benjuwan/pen/WNJvXqK">
  ElevetorByJS</a> by benjuwan (<a href="https://codepen.io/benjuwan">@benjuwan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

【使い方】
※ CodePen の表示画面が大きければ`0.5X`など選択して調整してみてください。
- 階数を意図した数字をクリックして下にある`昇順` or `降順`をクリックすると、その指定通りに上昇 or 下降します。
- エレベーターが起動中（黒い箱）に選択していない回数を押すと処理に追加できます
- 起動中に選択している回数（数字）をダブルクリックでキャンセル（処理から削除）できます

時間を取られたのは**ダブルクリックでキャンセル機能**でした。
<font color="Red">「今風のエレベーターは間違って押した階数をキャンセルできるでしょ！」</font>という無駄なこだわりから時間を浪費することに……。

### まとめ
本当に何故これを作ろうと思ったのでしょうね。しかもこういう無駄なものに結構ムキになってしまうという……。分かってくださる方は少なくないのではないでしょうか（希望）
まぁ、sortをはじめとした配列操作やイベントリスナー系の処理の勉強にはなりましたから「ヨシ！」ということでご容赦ください。

あ、もしやこれ。
重たいサイトやwebゲームのローディング中とかに、ちょっと遊んでもらう機能とかに使えないだろうか？
無いとは思いますが何か使いたい方がいらっしゃればご自由にどうとでもしてください～。

ここまで読んでいただいてありがとうございます！
About __str__ and __unicode__ (and six.python_2_unicode_compatible)

Let's define a class like this:

```py
class K(object):
    def __str__(self):
        return u'str'
    def __unicode__(self):
        return 'unicode'

print(repr( str(K()) ))
print(repr( unicode(K()) ))
```

And the result is like this:

```
'str'
u'unicode'
```

It is notable that str() converts unicode to str and unicode() converts str to unicode. **No errors are raised if different string type is returned.**

Now let's define other class:

```py
# copied from https://github.com/benjaminp/six/blob/1.16.0/six.py

import sys
PY2 = sys.version_info[0] == 2
def python_2_unicode_compatible(klass):
    """
    A class decorator that defines __unicode__ and __str__ methods under Python 2.
    Under Python 3 it does nothing.

    To support Python 2 and 3 with a single code base, define a __str__ method
    returning text and apply this decorator to the class.
    """
    if PY2:
        if '__str__' not in klass.__dict__:
            raise ValueError("@python_2_unicode_compatible cannot be applied "
                             "to %s because it doesn't define __str__()." %
                             klass.__name__)
        klass.__unicode__ = klass.__str__
        klass.__str__ = lambda self: self.__unicode__().encode('utf-8')
    return klass

@python_2_unicode_compatible
class S(object):
    def __str__(self):
        return u'str'
    def __unicode__(self):
        return 'unicode'

print(repr( str(S()) ))
print(repr( unicode(S()) ))
```

And the result is like this:

```
'str'
u'str'
```

Now take a deeper look at python_2_unicode_compatible implementation, it is doing two things:

1. (checks if py2)
1. copy `__str__` to `__unicode__`
1. set `__str__` to `unicode(self).encode('utf-8')`

So (along with wrapping with python_2_unicode_compatible) **the correct way to implement `__str__` is to return u-string.**

cf: https://wandbox.org/permlink/xHIO4C7HIk2J2kZL
【Unity】Unityでどの面を見ているか取得する方法

# 自己紹介
Unityアソシエイト試験の勉強しながら本格的にゲームを一本作ろうとしている大学生です。
# はじめに
ステルスゲームによくあるカバーのシステムを作ろうと思ったときに、今プレイヤーの視点が見ているのがX方向の面なのかZ方向の面なのか知りたいということがありました。
それをする方法です。
# コード紹介
```C#
    // hitはRaycastHit型の変数
    Vector3.SignedAngle(hit.transform.forward, hit.normal, Vector3.up) switch
    {
        < -135 => /*Z面*/,
        < -45 => /*X面*/,
        < 45 => /*Z面*/,
        < 135 => /*X面*/,
        <= 180 => /*Z面*/,
        _ => /*ここに来ることはないはず…*/
    };
```
## コード解説
なにをしているかというと、`hit.normal`と`hit.transform.forward`を比べてその角度によって判別しています。
特に難しいことをしているわけではないですが、その影響で非常に正確な判定が必要な場合、円などで不具合が生じる可能性があります。
もっと良いやり方をご存じでしたら教えてください。

## 今後の展望
UnityのMathematicsパッケージを使用してC# JobSystemに組み込めたらいいなーと思っています。
ただ、float3くんに詳しくないのでいったん保留です。

## TIPS:Switch式
このコードではSwitch式というC#の比較的新しい機能を使っています。
私は結構好きで使っています。良ければ調べてみてください。

# おわり
結構長い間どうやってやればよいか分からなかったので、誰かのお役に立てれば幸いです。
では、またどこかで…！
wiresharkを用いたパケットキャプチャ DNS問い合わせを見てみる

wiresharkを使ってパケットキャプチャを実施

Wiresharkのインストール

フィルタ条件：dnsserver

今回勉強になったこと

Transaction ID が同じものが同じ通信のやり取りということ

細かく見ていくと
DNS問い合わせ
Flags Standard query (0x0100) 

DNS応答
Flags Standard query response No error (0x8180) 
flagの下の行に

Queriesに問い合わせ内容の記載あり

Answersに問い合わせに答えたDNSサーバ情報あり

Time：　応用時間？
【Swift】アプリ内で外観（ライトモード・ダークモード）を変更するあれこれ

外観を変更する要件は以下の3つかなと思います。
1. アプリ全体で固定で適応する
1. アプリ内で変更でき、変更をアプリ全体に適応する
1. 画面単位で変更する

## 1. アプリ全体で固定で適応する
アプリ全体に固定の設定を適応させたい場合はinfo.plistに設定を記します。

```info.plist
<key>UIUserInterfaceStyle</key>
<string>Automatic</string>
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305854/31f66285-f2ee-9544-edc1-740e22e32b9b.png" width=60%>

設定できる値は`Automatic`・`Light`・`Dark`の3種類です。`Automatic`の場合はアプリのシステム設定に準拠します。

## 2. アプリ内で変更でき、変更をアプリ全体に適応する
アプリ内で動的に外観の設定を適応させることができます。その場合は以下のコードを記述するとアプリ全体に反映されます。

```swift
let scenes = UIApplication.shared.connectedScenes
let windowScene = scenes.first as? UIWindowScene
let window = windowScene?.windows.first
window?.overrideUserInterfaceStyle = .unspecified
```

設定できる値は`unspecified`・`light`・`dark`の3種類です。`unspecified`の場合はアプリのシステム設定に準拠します。

この実装はフレームのレンダリングが完了してから行う必要があるので、アプリで最初に表示されるViewの初期化の処理とかで行うと良いです。 つまり`AppDelegate.didFinishLaunchingWithOptions`で設定しても反映されないです。
[*フレームのレンダリング](https://qiita.com/_asa08_/items/914c6bcf69ec3f6cc906#initial-frame-rendering)

## 3. 画面単位で変更する
アプリ全体の設定から特定の画面のみ変えたい場合はUIKitとSwiftUIで実装が異なります。

- UIKitの場合以下の実装をViewControllerで記述します。
設定できる値は上記同様に`unspecified`・`light`・`dark`の3種類です。
```swift
overrideUserInterfaceStyle = .light
```


- SwiftUIの場合は以下の実装を設定を変更したい画面のトップのコンポーネントに記述します。
この場合VStack以下の画面に設定が適応されます。
設定できる値は`nil`・`light`・`dark`の3種類です。`nil`の場合はアプリのシステム設定に準拠します。
```swift
VStack {

}.preferredColorScheme(nil)
```
アーキテクチャ・デシジョン・レコード(ADR)について

# はじめに
「あれ、これこの前チームで決めた気がするけどどーなったんだっけ。」とか、
「なんでこんな風にしてるんだっけ。」とか、
開発作業を通して、記憶の回収作業に翻弄された経験はないだろうか。
私はある。自分の記憶力の低さが嫌になる。

話は変わるが、先日Developers Summit 2023に参加した。興味深い内容、あまり興味が湧かない内容、様々だったと個人的には感じているが、その中の1つにアーキテクチャ・デシジョン・レコード（以下ADR）についての講演があった。
簡単に要約すると、テンプレートを用いて日々の意思決定を記録するといいよ！というものだ。
これじゃん。と思った。そんなADRについて以下で紹介しようと思う。


# ADRとは
アーキテクチャ設計上の判断や決定事項を記録するドキュメント。

# 例えば
| 日付 | タイトル | 内容 | 理由 | ステータス |
| ---- | ---- |---- |---- |---- |
| 8/11 | ほにゃららアーキテクチャ | 新規システムのアーキテクチャにほにゃららアーキテクチャを採用する |ほにゃららだから|承認済み|
|  |  |
# ADRの産物
- プロジェクトを通しての意思決定が散逸しない。
- ドキュメントとして記述することで、メンバー全員の認識レベルが揃う。
- 「何を記録するべきで何を記録しないのか」が明確になる。
- 意思決定をカジュアルに記録しようという文化の形成

# おわりに
ADR(Architecture Decision Record)と言ってはいるが、アーキテクチャに無関心な意思決定においても、ADRは活用するべきだ。
口約束だけではなく、カジュアルにドキュメントとして記録することが重要だと感じる。
「これ今度決めよう」みたいなことも記録してもいいと思う。
記録形式におけるテンプレートも自分たちのチーム好みのものを作ることで、より良い効果が得られると思う。

以上の結果、チームメンバー各々の認識がぶれることは少なくなり、自分の記憶力の低さが嫌になることも少なくなるだろう。
OS X で 同時オープンできるファイル数の上限をあげる

## 背景

RubyでFiberSchedulerを作っている時に、UDPソケットを同時に1000個開こうとしたら、以下のようなエラーがRubyレイヤーで発生した。


```sh
Failure/Error: sock = UDPSocket.new(af)
     
Errno::EMFILE:
  Too many open files - socket(2) - udp
```

1000個同時に開きたい。

## 解決方法

ulimitコマンドを使う。

### 現在の設定値の確認

```sh
$ ulimit -a -H # ハードリミット (制限を緩めるにはroot権限が必要になる)

-t: cpu time (seconds)              unlimited
-f: file size (blocks)              unlimited
-d: data seg size (kbytes)          unlimited
-s: stack size (kbytes)             65532
-c: core file size (blocks)         unlimited
-v: address space (kbytes)          unlimited
-l: locked-in-memory size (kbytes)  unlimited
-u: processes                       4176
-n: file descriptors                unlimited  ## これ
```

```sh
$ ulimit -a -S # ソフトリミット (強い制限の範囲内であれば、ユーザー自身が制限を緩めることが可能)
-t: cpu time (seconds)              unlimited
-f: file size (blocks)              unlimited
-d: data seg size (kbytes)          unlimited
-s: stack size (kbytes)             8192
-c: core file size (blocks)         0
-v: address space (kbytes)          unlimited
-l: locked-in-memory size (kbytes)  unlimited
-u: processes                       2784
-n: file descriptors                256　　　　  ## これ
```

### 設定値を変更する

```sh
$ ulimit -S -n 1024 # -n -S の順ではだめ
```


## Ref.

https://atmarkit.itmedia.co.jp/ait/articles/1908/01/news031.html
Rover講座05 ArdupirotでIMU、地磁気センサーの初期設定をする

# 環境
この記事は以下の環境で動いています。

| 項目 | 値 |
|:-:|:-:|
| CPU | Core i5-8250U |
| OS | Windows10 |
| MissionPlanner | v1.3.80 |

| 項目 | 値 |
|:-:|:-:|
| Board| Pixhawk(v2.4.8) |
| Ardupilot | Rover V4.2.3 |

# 概要
ardupilotの初期設定の内、センサーの設定やキャリブレーションを行います。

![05_sensor.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254442/824556d4-1768-c783-edb0-6f3f1272c3c9.jpeg)

# 予備知識

## IMUのキャリブレーション
Pixhawk本体には加速度センサー、各速度センサーが内蔵されています。これらのセンサーには固有の誤差があり、それを測定して打ち消す作業がキャリブレーションです。
Ardupilotdでは複数の指定の姿勢の時の加速度センサーの値を取得して、誤差を打ち消すパラメーターを取得します。
各速度センサーにも誤差がありますが、これはEKFの処理の中で推定して打ち消しています。

## 地磁気センサー
Pixhawk本体にも地磁気センサー(IST8310)が内蔵しておりこれを使用することも可能です。しかし今回のRoverのようにPixhawk付近にモーターを配置する場合は地磁気センサーの値が不正確になります。このために今回は外付けの地磁気センサー（HMC5883）を使います。
地磁気センサーのキャリブレーションではセンサー自体や機体自体が持っている地場を推定します。そのために地磁気センサーのキャリブレーションは機体を組み替えたりした場合は再実行する必要があります。

## GPSモジュールの接続
Pixhawk用のGPSモジュールとして、GPS受信機(M8N)と地磁気センサーが一体化したものがよく市販されています。
ArdupilotのEKFの動作として、GPS情報を無効にしてもGPS情報をどこかしらで使ってしまう問題があります。そのため今回はGPS受信機はPixhawkに接続せず、地磁気センサーのみを接続します。

# 前提条件
以下の機器が必要です。

* WindowsPC
    * MissionPlanner導入済み
* Pixhawk
    * Ardupirot(Rover)インストール済み
    * WindowsPCからMissionPlannerでアクセス可能であること（XBee推奨）
    * 電源供給が出来ること（モバイルバッテリー推奨）
* 外付け地磁気センサー（GPSモジュールに内蔵）

# 手順

## 加速度センサーのキャリブレーション

* WindowsPCでMissionPlannerを起動して、Ardupilotを接続する。
*「初期設定」->「必須ハードウェア」->「Accel Calibration」を押して、加速度センサーのキャリブレーション画面を開く。

![accel_calib.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254442/e8dee179-e542-7965-4a1e-e574f531e2fd.png)

* 「Callibrate Accel」を押す。
    * キャリブレーション中はPixhawkのLEDが赤青黄色の順で点滅する。 
    * 最初は画面にPixhawkが水平になるよう置くという指示が出る。その方向に置いたら「完了したらクリック」ボタンを押す。
    * 残りの5方向も同様に行う。
* 「Callibrate Level」を押します。pixhawkを水平にしたらもう一度ボタンを押す。
    * この時には出来る限り精密に水平をとること。
* 上記の2つを行うと「Simple Accel Cal」という項目が出てくるのでこれも同様に実行する。

## コンパスセンサーの接続
* GPSモジュールの出力のピンの内I2C関連の物が以下のような接続になるようにハウジングに付け替える。
* このコネクタをPixhawkのI2Cのポートに刺す。

|モジュール機能|色||PicoBlade PIN#|
|:--|:--|:--|:--|
|VCC|赤||1|
|SCL|橙||2|
|SDA|白||3|
|GND|黒||4|
|TXD|黄||NC|
|RXD|緑||NC|

![DSC_1241.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254442/d6fd5d13-e939-f900-895e-c09aa6f02f47.jpeg)

## 地磁気センサーの設定・キャリブレーション

* WindowsPCでMissionPlannerを起動して、Ardupilotを接続する。
* 「初期設定」->「コンパス」を押して地磁気センサーのキャリブレーションページを開きます。
* 「Compass Priority」の画面で、接続した外付け地磁気センサの表示があることを確認する。
    * Externalにチェックが入っているのが外付けの地磁気センサーを示す。
* 使用する地磁気センサーの設定をする
    * 「Use Compass 1」のチェックを外す。
    * 「Use Compass 2」のチェックをつける（デフォルトのまま）。
    * 「Use Compass 3」のチェックを外す。
* キャリブレーションを実行する。
    * 「Onboard Mag Calibration」の「Start」を押す。
    * Pixhawkと地磁気センサーを固定して、このセットを色々な姿勢でで回転する。
    * ウィンドウ上の「Mag 2」の右のバーが右端に到達するまで続ける。
    * 終了後は再起動を求められるのでPixhawkの電源を再投入する。
![compass_calib1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254442/da9239cb-46f6-39a2-22a6-1528eb1a3791.png)

## キャリブレーション完了の確認

* Pixhawkの電源を切り、再起動する。
* しばらくたつと、ステータスLEDが黄色から青に変化することを確認する。

# 参考
[ardupilot calibration](https://ardupilot.org/rover/docs/common-accelerometer-calibration.html)

# 目次ページへのリンク
[ROS講座の目次へのリンク](https://qiita.com/srs/items/5f44440afea0eb616b4a)
[ROS2講座の目次へのリンク](https://qiita.com/srs/items/5f0d765343ca78f524ed)
c2kをスタンドアローンでブート

デバッグの時はカーネルをtftpで読み込み起動させてましたが、だいたい動くようになったので、flashに焼いてみます。

Bareboxはenv/configファイルを元にflashのパーティションを設定します。

```
Barebox-C2K >/ ls /dev
zero              defaultenv        mem               phy0
nor0              spi0              fastspi0          env0
nor0.uloader      nor0.barebox      nor0.env          nor0.data
nor0.caldata      nor0.config       nor0.bkpconfig    nor0.kernel
nor0.rootfs       nor0.bkpkernel    nor0.bkprootfs    
```

ターゲットにはbkrootfsというおそらく予備のパーティションがあるので、ここにNetBSDのカーネルを書き込みます。

何度も行うのでスクリプトにしておきます。

```
Barebox-C2K >/env/bin cat mmflash
#!/bin/sh

addpart /dev/mem 6M@0x3008000(uImage)
tftp netbsd-M86XXX.bb /dev/mem.uImage
erase /dev/nor0.bkprootfs
cp /dev/mem.uImage /dev/nor0.bkprootfs
```

これを実行しておくと、flashから起動できます。

```
Barebox-C2K >/ bootm /dev/nor0.bkprootfs
do_bootm start map_dual_image2
   Verifying Checksum ... OK
   Image Name:   NetBSD/m86xxx 10.99.6
   Created:      2023-08-11   0:33:10 UTC
   Image Type:   <NULL> <NULL> <NULL> (<NULL>)
   Data Size:    4869076 Bytes =  4.6 MB
   Load Address: 03008000
   Entry Point:  03008000
OK

Starting kernel ...

commandline: console=ttyS0,115200n8, init=/sbin/init mac_addr=00:0A:0B:0C:0D:0E,00:1A:1B:1C:1D:1E,
arch_number: 1094
[   1.0000000] uboot arg = 0, 0x446, 0x100, 0x10478b0

[   1.0000000] NetBSD/evbarm (m86xxx) booting ...
```

flashから起動してもネットワークはちゃんと使えています。
Groovy templatesの繰り返し表示でちょっと戸惑った話

# はじめに

以下の続きで、eachでの繰り返し処理を表の列で使おうと思ってやってみたら、すぐには上手くいかなかった。

https://qiita.com/nishide/items/b45f15b92daf18c55895

# 参考文献(前回と同じ)
https://www.shuwasystem.co.jp/book/9784798069166.html

# 詰まったこと
前回の状態から、tplファイルでAccoutテーブルのデータを表示しているところを表にしてみようと思った

```groovy:getData.tpl
yieldUnescaped '<!DOCTYPE html>'

html(lang:'ja') {
	head {
		meta(charset:"UTF-8")
		title("繰り返し")
		link(rel:"stylesheet", type:"text/css",
			href:"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css")
	}
	body(class:"container"){
		h1(class:"display-4 mb-4", title)
		p(message)
		div (class:"alert alert-primary") {
			if (flag1) {
				p("flag1がtrueの時に出力されるよ")
			} else {
				p("flag1がfalseだったら出力")	
			}
			if (flag2) {
				p("flag2がtrueの時に出力されるよ")
			} else {
				p("flag2がfalseだったら出力")	
			}
		}

// ------------ ここから前回と書き換えた部分 ------------

		table(class:"table") {
			thead {
				tr {
					th("ID")
					th("Name")
					th("Mail")
				}
			}
			tbody {
				data.each {
					tr {
						td(it.id)
						td(it.name)
						td(it.mail)
					}
				}
			}
		}
	}
}
```

実行してみると... (プロジェクトを右クリック > 実行 > Spring Boot アプリケーション)
エラーが出た
``java.lang.NullPointerException: Cannot get property 'id' on null object``

eachの繰り返し処理で、リストであるdataの中身が１つずつ取り出されて``it``という変数に入れられて情報が取得できるはずなのに、idがnullと言われてしまった。

# 考察
``data.each``と``td(it.id)``の間に``tr``が挟まっていることがよくないのかも

# 解決策
明示的に変数``item``に格納してみた
```groovy:getData.tpl(修正した範囲だけ)
table(class:"table") {
    thead {
        tr {
            th("ID")
            th("Name")
            th("Mail")
        }
    }
    tbody {
        data.each { item -> // ここ
            tr {
                td(item.id)
                td(item.name)
                td(item.mail)
            }
        }
    }
}
```

# 解決した！

![表作成.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1719849/824c9ca9-61d6-8610-7c91-b9a71c40796b.jpeg)

# 他にも...
以下のようにしてもうまくいった
```groovy:getData.tpl(修正その2)
table(class:"table") {
    thead {
        tr {
            th("ID")
            th("Name")
            th("Mail")
        }
    }
    tbody {
        for(item in data) {
            tr {
                td(item.id)
                td(item.name)
                td(item.mail)
            }
        }
    }
}
```
```groovy:getData.tpl(修正その3)
table(class:"table") {
    thead {
        tr {
            th("ID")
            th("Name")
            th("Mail")
        }
    }
    tbody {
        Integer i = 0
        while(i < data.size()) {
            tr {
                td(data[i].id)
                td(data[i].name)
                td(data[i].mail)
            }
            i++
        }
    }
}
```

# 終わりに
Groovyの文法をちゃんと理解したほうがいいな