OmniAICreator/Qiita-1.07M huggingface dataset:
VS Codeで既存テーマの一部の色だけを上書きする方法

普段Qiitaの記事を書く時は基本的に「英語情報なら有るが日本語情報がない」という時だけに留めているのですが、今回はちょっと感動したので、既に日本語情報はありますが備忘録として残します。

## 背景

私が普段使用しているテーマは `Monokai Dimmed` というものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/f20d5d84-8ad9-16b4-2362-96b518ea07a1.png)

基本的には気に入っているのですが、クラス名や型名の赤色が濃すぎて視認性が悪いです。

## 準備

Ctrl + Shift + P でコマンドパレットを開き、 `[Developer: Generate Color Theme From Current Settings]` を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/004c2dbe-8369-b843-7729-924ef1b65e92.png)

すると配色テーマが生成されるので、目的の箇所を探します。
今回は `class` で検索することで見つけることが出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/646a18c3-d588-9d32-fc4b-aab328c147a3.png)

## 設定変更

お好みの `settings.json` を開き、以下の設定を追加します。

```jsonc
{
  "editor.tokenColorCustomizations": {
    "[Monokai Dimmed]": {
      "textMateRules": [
        {
          // 適用したい箇所をscopeとして入力。今回は生成された配色テーマからそのままコピーして再利用
          "scope": "entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution",
          "settings": {
            "foreground": "#FF8080", // ここを好きな色に
            "fontStyle": ""
          }
        }
      ]
    }
  }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/f5f2bd48-e7d3-b207-6d43-c1f1f998fd6d.png)

テーマの名前が曖昧な時は Ctrl + Space を押すことで候補を出すことが出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/454720c9-7a19-e99b-4393-8125310f4996.png)

## 結果

無事視認性の良い色に変わりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85205/f796a381-bfe9-e7ac-6da5-c86788504edf.png)

色が馴染んでない？
良いんだよ視認性が良ければ。
【flutter】ドロップダウンメニューを作る

こんにちは。
今回は、ドロップダウンメニューを作る方法を紹介します。

# 方法
![スクリーンショット 2023-08-13 20.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/ce57fee2-1687-ea40-8538-b4c8b9db94e0.png)

状態管理のsetstateを使うので、変数の定義をします。
```dart
String isSelectedValue = '1';
```

次にDropdownButtonのwidgetを使ってDropdownMenuItemで選択肢を指定します。
DropdownMenuItemのプロパティのchildとvalueは必須になっているので忘れずに！

次に、onChangedしたときに値をsetStateすることで、選択した値を表示します。

# 使用例
```dart
 import 'package:flutter/material.dart';

class DropDownPage extends StatefulWidget {
  const DropDownPage({super.key});

  @override
  State<DropDownPage> createState() => _DropDownPageState();
}

String isSelectedValue = '1';

class _DropDownPageState extends State<DropDownPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink,
      body: Center(
        child: Container(
          width: 100,
          color: const Color(0xffFFFFFF),
          child: DropdownButton(
            items: const [
              DropdownMenuItem(
                value: '1',
                child: Text('1'),
              ),
              DropdownMenuItem(
                value: '2',
                child: Text('2'),
              ),
              DropdownMenuItem(
                value: '3',
                child: Text('3'),
              ),
              DropdownMenuItem(
                value: '4',
                child: Text('4'),
              ),
              DropdownMenuItem(
                value: '5',
                child: Text('5'),
              ),
            ],
            value: isSelectedValue,
            onChanged: (String? value) {
              setState(() {
                isSelectedValue = value!;
              });
            },
          ),
        ),
      ),
    );
  }
}


```

# 実行例

![dropdown.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/0854da8f-99e7-0f7b-359e-724addfe524c.gif)


# 最後に
ここまで読んでいただき、ありがとうございました！
いいねしてくれたら、スキップして喜びます:heartpulse:
FFmpegをインストールしてみた with NVIDIA GPU

# 概要
FFmpegは人気のあるエンコード・デコードのSWです。NVIDIA GPUに入っているードウェアアクセラレータ(NVENC/NVDEC)を用いて、このエンコード/デコード処理を高速化することができます。

NVDEC/NVENCは、通常NVIDIA Video Codec SDKのAPIを通じて使用しますが、それを勉強するのは大変です。
FFmpegであれば、NVIDIAのアクセラレータを使用してENC/DECを高速化する仕組みを既に取り入れているので楽に使用することができます。

# 環境
* Ubuntu 22.04
* nvidia gpu driver 535.146.02
* NVIDIA RTX 4000 Ada

# やること
(GPUドライバはインストール済み)
* CUDA Toolkitのインストール
* FFmpegのインストール
* エンコード・デコードテスト


# 手順
## CUDA Toolkitのインストール
過去記事参考

https://qiita.com/alechan/items/b1690add57c14fdbecf3

* nvidia-smiでCUDAの対応Version確認
```
nvidia-smi
```

* runファイルを使って今回はv12.2をインストール
```
wget https://developer.download.nvidia.com/compute/cuda/12.2.2/local_installers/cuda_12.2.2_535.104.05_linux.run
sudo sh cuda_12.2.2_535.104.05_linux.run
```
既にドライバはインストールしているので、ドライバのチェックボックスを外してインストールした

* パスの設定
```
echo 'export PATH=/usr/local/cuda-12.2/bin${PATH:+:${PATH}}' >> ~/.bashrc
echo 'export LD_LIBRARY_PATH=/usr/local/cuda-12.2/lib64\
                         ${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}}' >> ~/.bashrc
```

* 再起動 & パスの確認
```
nvcc -V
```

## FFmpegのインストール

* ffnvcodecをインストール
```
git clone https://git.videolan.org/git/ffmpeg/nv-codec-headers.git
cd nv-codec-headers && sudo make install
```

* FFmpegのダウンロード
```
git clone https://git.ffmpeg.org/ffmpeg.git ffmpeg/
sudo apt-get install build-essential yasm cmake libtool libc6 libc6-dev unzip wget libnuma1 libnuma-dev
cd ffmpeg
./configure --enable-nonfree --enable-cuda-nvcc --enable-libnpp --extra-cflags=-I/usr/local/cuda/include --extra-ldflags=-L/usr/local/cuda/lib64 --disable-static --enable-shared
```

自分の環境だと./configureが上手くいかなかったので下記パッケージをインストール
```
sudo apt-get install pkg-config
```

* コンパイル & インストール
```
make -j 8
sudo make install
```

## FFmpegのテスト
Ubuntu 22.04ではMP4の再生が出来なかったので、メディアプレーヤー等足りないソフトウェアをインストール
```
sudo apt-get update
sudo apt-get install ubuntu-restricted-extras
```

* トランスコードのテスト
```
ffmpeg -y -vsync 0 -hwaccel cuda -hwaccel_output_format cuda -i input.mp4 -c:a copy -c:v h264_nvenc -b:v 5M output.mp4
```

最低限の動作確認終わり
エンコードデコードは次回
API 監視ツール API Monitor のインストール

API Monitor は無料で使えるライブラリ呼び出しを監視するソフトウェアです。プログラムがライブラリの関数を呼び出す際の引数や戻り値を解析することができます。ここでは 18 歳の新入社員向けに API Monitor のインストール手順を説明します。

## API Monitor の目的
API Monitor は以下のような用途で使われます。

### ライブラリのデバッグ
プログラムのライブラリ呼び出しが期待通りに動作しているか、予期しない動作やエラーが発生していないかを確認するのに使用できます。

### APIの監視
ソースコードのないプログラムの動作を解析する際、プログラムがどのライブラリを呼び出し、どのようなデータを処理しているかを明らかにするのに役立ちます。

### セキュリティ分析
マルウェアや悪意のあるプログラムがシステムのどの部分とやりとりをしているか、どのような行動を取っているかを特定するために使うことができます。

:::note warn
ソフトウェアの内部構造を解析し、動作原理を特定する行為は、リバースエンジニアリングと呼ばれます。商用ソフトウェアは使用許諾契約書でリバースエンジニアリングを禁止していることがあります。他人のソフトウェアをリバースエンジニアリングすることは避けましょう。
:::

## API Monitor のシステム要件
API Monitor は以下の環境で動作します。

- オペレーティングシステム:Windows 2000, XP, Vista, 7, 8 以降
- 対象API: C言語で書かれた Windows のダイナミックリンクライブラリ

ここでは API Monitor V2 Aplha r13 を例にして Windows 11 へのインストール方法を紹介します。

## API Monitor のインストール手順
### ダウンロード
API Monitor のダウンロードページにアクセスし、「**API Monitor v2 (Alpha-r13) - x64 64-bit**」のリンクをクリックします。

[http://www.rohitab.com/downloads](http://www.rohitab.com/downloads)

![01_officialsite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/6fcf12df-e37d-269e-6f83-8e2ed5e5a044.png)

### インストーラの起動
ダウンロードが完了したら、ファイルをダブルクリックし、インストーラを実行します。

![11_download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/7c1f47af-35b1-3c42-1100-064ed74697c3.png)

### セットアップ画面の確認

インストーラのセットアップ画面が表示されたら、「**Next**」をクリックします。

![21_installer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/3f8544ba-a15c-a0a4-f8ad-c68fbcc61604.png)

### ライセンスの確認
ライセンス契約の内容を確認して、「**I accept the terms in the license agreemt**」を選択し、「**Next**」をクリックします。

![22_installer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/bf081743-10e4-923f-74aa-067b4ce25d0c.png)

### インストールタイプの選択
インストールタイプの選択が表示されたら、「**Next**」をクリックします。

![23_installer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/03927a80-2bdb-05ea-13e2-c09fe91f2243.png)

### インストールの開始
インストーラのセットアップ画面が表示されたら、「**Install**」をクリックします。

![24_installer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/f517deb7-6c92-b358-9d51-298a8d7562e9.png)

### ユーザーアカウント制御の確認
ユーザーアカウント制御が表示されたら、「**はい**」をクリックします。

![25_installer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/987a080d-b60d-cb0b-27af-de41dd6cb766.png)

### インストールの終了
ファイルのインストールが完了したら、「**Finish**」をクリックします。

![27_installer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/f32f17c1-2f02-2110-e5a7-e412c17d4f01.png)

以上でインストール作業は終了です。
sh webui.sh --apiで出るエラーの解決策

研究で使用しているstable diffusion webUIをapiモードで実行した際に出たエラーと解決方法です。

## エラー内容

```bash
sh webui.sh --api                                                          

################################################################
Install script for stable-diffusion + Web UI
Tested on Debian 11 (Bullseye)
################################################################

################################################################
Running on kitsune_yk user
################################################################

################################################################
Repo already cloned, using it as install directory
################################################################

################################################################
python venv already activate or run without venv: ./stable-diffusion-webui/venv
################################################################

################################################################
Launching launch.py...
################################################################
Python 3.10.6 (main, Jan 11 2024, 16:37:36) [Clang 15.0.0 (clang-1500.0.40.1)]
Version: v1.5.1
Commit hash: 68f336bd994bed5442ad95bad6b6ad5564a5409a
Launching Web UI with arguments: --api --skip-torch-cuda-test --upcast-sampling --no-half-vae --use-cpu interrogate
Traceback (most recent call last):
  File "./stable-diffusion-webui/launch.py", line 39, in <module>
    main()
  File "./stable-diffusion-webui/launch.py", line 35, in main
    start()
  File "./stable-diffusion-webui/modules/launch_utils.py", line 390, in start
    import webui
  File "./stable-diffusion-webui/webui.py", line 44, in <module>
    import gradio  # noqa: F401
  File "./stable-diffusion-webui/venv/lib/python3.10/site-packages/gradio/__init__.py", line 3, in <module>
    import gradio.components as components
  File "./stable-diffusion-webui/venv/lib/python3.10/site-packages/gradio/components.py", line 55, in <module>
    from gradio import processing_utils, utils
  File "./stable-diffusion-webui/venv/lib/python3.10/site-packages/gradio/utils.py", line 339, in <module>
    class AsyncRequest:
  File "./stable-diffusion-webui/venv/lib/python3.10/site-packages/gradio/utils.py", line 358, in AsyncRequest
    client = httpx.AsyncClient()
  File "./stable-diffusion-webui/venv/lib/python3.10/site-packages/httpx/_client.py", line 1397, in __init__
    self._transport = self._init_transport(
  File "./stable-diffusion-webui/venv/lib/python3.10/site-packages/httpx/_client.py", line 1445, in _init_transport
    return AsyncHTTPTransport(
  File "./stable-diffusion-webui/venv/lib/python3.10/site-packages/httpx/_transports/default.py", line 275, in __init__
    self._pool = httpcore.AsyncConnectionPool(
TypeError: AsyncConnectionPool.__init__() got an unexpected keyword argument 'socket_options'
(venv)
```

## 解決策

ライブラリで使用しているhttpxのバージョンが古いのが原因みたいなので、下記コマンドを実行しhttpxのバージョンを変更する（[issue](https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/14190#issuecomment-1837719645)）

```bash
pip install httpx==0.24.1
```
Pythonプロジェクトの雛形を爆速で作成する

# はじめに
アメリカのIT系のWebメディアをみるとPythonプロジェクトのジェネレーターの記事があったので調べてみるとCookiecutterという雛形を作成するツールがあったのでご紹介します。

Cookiecutterについて公式サイトとGitHubページのリンクを載せました。

https://www.cookiecutter.io/

https://github.com/cookiecutter/cookiecutter

# Cookiecutterについて
Cookiecutterは、プログラミング言語に依存しないコマンドラインユーティリティで、プロジェクトテンプレートから新しいプロジェクトのディレクトリ構造を生成します。
Pythonプロジェクトに特化してはいませんが、Python開発者にとって非常に便利なツールです。

# テンプレート
Cookiecutterではプロジェクトのテンプレートが用意されています
+ データサイエンス
+ Django
+ FastAPI
+ Flask
+ Go
+ Kotlin
+ Postgres
+ Python
+ React
+ Swift

https://www.cookiecutter.io/templates

言語別にみるとPython、Go、kotlin、TypeScript(React)、Swiftがあります。

# 環境構築
Python3が必要なのでインストールします
```
brew install python3
```

Cookiecutterをインストールします
```
pip3 install cookiecutter
```

# テンプレートの使用
Cookiecutterでテンプレートを使用する方法は2つあります。
+ GitHubテンプレートを使用
+ ローカルのテンプレート(自作テンプレート)を使用

### GitHubテンプレートを使用する方法
1つ目はGitHubで公開されているテンプレートを使用する方法です
前述の「テンプレート」で紹介したページは様々な言語別のテンプレートが紹介されているページで、そこからGitHubへのリンクがあります。

GitHubで公開されているテンプレートを使用するコマンドを例に出すと以下のようになります

```
# pip3 run cookiecutter gh:[ユーザー名]/[リポジトリ名]
pip3 run cookiecutter gh:audreyfeldroy/cookiecutter-pypackage
```

### ローカルのテンプレート(自作テンプレート)
Cookiecutterはローカルにプロジェクトのテンプレートを作成することができます。
テンプレートの中にcookiecutter.jsonを配置することでjsonファイルに設定したパラメータに基づいてプロジェクトのテンプレートをコマンドラインから作成することができます。

テンプレートの作成の仕方は良いサイトがあったので下記をご覧ください。

https://blog.amedama.jp/entry/2016/01/09/111215#:~:text=directories%2C%2026%20files-,%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E8%87%AA%E4%BD%9C%E3%81%99%E3%82%8B,-%E5%A4%A7%E4%BD%93%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9

# おわりに
Cookiecutterを使用すると、Pythonなどのプロジェクトの雛形作成が簡単に行えます。
これにより、構成やセットアップに費やす時間を削減し、開発の本質に集中できます。

興味がある方は下記のチュートリアルをやってみてください！

https://cookiecutter.readthedocs.io/en/1.7.3/first_steps.html
プログラム開発ツール .NET 8 のインストール

.NET 8 は無料で使える C# プログラム開発ツールです。.NET 8 は Windows や Linux, macOS で動くソフトウェアを開発するために利用されます。この記事では 18 歳の新入社員向けに .NET 8 のインストール手順を説明します。

## .NET 8 の目的
.NET 8 は以下のような用途で使われます。

### クロスプラットフォーム開発
.NET 8 はWindows、Linux、macOS をサポートしています。１つのソースコードで複数のプラットフォームに対応するアプリケーションを構築できます。

### クラウドアプリケーションの開発
ASP.NET Core を使うと Azure クラウドで動く Web アプリケーションを開発できます。

### .NET アプリケーションの高速化
.NET 8 は多くの最適化が行われ、.NET 6 よりアプリケーションのパフォーマンスが向上しています。

## .NET 8 のシステム要件
[.NET 8 のシステム要件](https://github.com/dotnet/core/blob/main/release-notes/8.0/supported-os.md)は、使用する OS によって異なります。Windows OS のシステム要件を以下に示します。

- オペレーティングシステム:　Windows 10 (1607 以降), 11, Windows Server 2012 以降

ここでは .NET SDK 8.0.1 を Windows 11 にインストールする手順を説明します。

## .NET 8 のインストール手順
### ダウンロード
.NET 8 の公式ページにアクセスします。

[https://dotnet.microsoft.com/ja-jp/download/dotnet/8.0](https://dotnet.microsoft.com/ja-jp/download/dotnet/8.0)

ページが表示されたら、SDK 8.x.x（x はバージョン番号）の Windows OS のインストーラーの「**x64**」のリンクをクリックします。

![03_officialsite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/2595df48-de0f-5ab6-f61e-16a71d43f566.png)

### インストーラの起動
ダウンロードが完了したら、ファイルをダブルクリックし、インストーラを実行します。

![11_download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/8b27ea4c-b935-5271-9fa3-2b3b174d068c.png)

### ライセンスの確認
ライセンスの確認画面が表示されたら、「**インストール**」をクリックします。

![21_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/72a3214a-7fae-f1b1-3eb9-10b303398599.png)

### ユーザーアカウント制御の確認
ユーザーアカウント制御が表示されたら、「**はい**」をクリックします。

![22_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/07141216-75f2-548e-a4d1-c0f232aedcb9.png)

### インストールの終了
インストール完了画面が表示されたら、「**閉じる**」をクリックします。

![24_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/d8169eda-3ba9-b501-a9b5-e57d99e7c4c9.png)

以上で、インストール作業は終了です。

## 参考文献
- マイクロソフト > Learn > .NET > 基礎 > Windows に .NET をインストールする
https://learn.microsoft.com/ja-jp/dotnet/core/install/windows
読書感想　Github 実践入門

# 書籍名「Github 実践入門」

著：大塚 弘記

# 読もうと思った動機

Githubの機能を把握するため


# 印象に残った部分




## コミットを変更する操作（git）

### 歴史を戻る
```
git reset 
```


### コミットメッセージを修正
```
git commit --amend

```



## プルリクエストを途中で送る[WIP]

タイトルにWIPと加える
WIP = Work In Progress

具体的な進捗を報告するためにメッセージ内容にタスク記法を加える

```markdown:sample
- [x]  Task1
- [x]  Task2
- [ ]  Task3
- [ ]  Task4

``` 



# 実践できること or 感想

WIPのついて知ることができて良かったです。
中間報告の手段としてありです。

Gistはプライベートで使います。
VSCodeでdraw.ioを触る（インストールからGitLab連携まで）

## はじめに
設計作業に入っていきます。
とりあえず画面設計や画面遷移図の作成をしていきます。

draw.io公式サイト
https://www.drawio.com/

## Visual Studio Codeと連携
前回の記事でVSCodeとGitLabの連携をできるようにしました。
せっかくなので、draw.ioをVSCodeで設計できるようにしたいと思います。

## 手順
VSCodeに”Draw.io Integration”の拡張機能をインストールします。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/31ed46f1-446e-c87e-fbb9-04c75a6ff83d.png)
新規ファイルを作成し、拡張子を”.drawio”にするとdraw.ioを
VSCode上で操作することができます。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/68971733-4a64-6470-cea5-74442a8ca816.png)

## 成果物
初期画面は下記の感じにしました。至ってシンプルです。
細かいアニメーションなどは実装側で直接作成していきたいと思います。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/b0c16f78-f958-9521-cd6c-3c29063aa379.png)
画面遷移図は下記になります。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/883b67d6-6c7e-431c-4325-c6bba0795899.png)

テーブル設計はこちら
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/b6b89669-d099-eb9f-bb25-fe5b07befafb.png)

本システムの内容については、後述の仕様書でまとめて記載したいと思います。
## GitLabと連携
資料をまとめて管理したいので、GitLabへ作成した設計書を上げます。
前回と同じく、修正したファイルをステージングに上げて”コミット”ボタンを押下します。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/87532313-32e2-900e-6a59-4f26eb8d79ac.png)
”変更の同期”ボタンを押下します
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/2703655b-30bc-5df6-eade-6904f1bfbf85.png)
GitLabを更新してみると、無事設計書が格納されてました。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3194659/bd386921-31e9-7477-41f2-c3ec2aea0d29.png)

## 使ってみた感想
draw.ioは今回始めて使ってみたのですが、大変使いやすいですね。
UIがSpreadsheetに似ているので、結構直感的な操作ができるなと思いました。
何よりGitLabなどでコードベースとしての管理を行えるのがいいですね。

今回は個人での開発なので、恩恵は薄いかもですが
他の方も設計書を修正する際は、差分の確認をすることができるので
運用管理がとても楽になります。

次回はDBの設計を行っていきます。
プログラム開発ツール .NET 6 のインストール

.NET 6 は無料で使える C# プログラム開発ツールです。.NET 6 は Windows や Linux, macOS で動くソフトウェアを開発するために利用されます。この記事では 18 歳の新入社員向けに .NET 6 のインストール手順を説明します。

## .NET 6 の目的
.NET 6 は以下のような用途で使われます。

### クロスプラットフォーム開発
.NET 6 はWindows、Linux、macOS をサポートしています。１つのソースコードで複数のプラットフォームに対応するアプリケーションを構築できます。

### クラウドアプリケーションの開発
ASP.NET Core を使うと Azure クラウドで動く Web アプリ　ケーションを開発できます。

### .NET アプリケーションの高速化
.NET 6 は多くの最適化が行われ、.Net Framework 4 よりアプリケーションのパフォーマンスが向上しています。

## .NET 6 のシステム要件
.NET 6 の[システム要件](https://github.com/dotnet/core/blob/main/release-notes/6.0/supported-os.md)は、使用する OS によって異なります。Windows OS のシステム要件を以下に示します。

- オペレーティングシステム:　Windows 7 SP1, 8.1, 10 (1607 以降), 11, Windows Server 2012 以降

ここでは .NET SDK 6.0.26 を Windows 11 にインストールする手順を説明します。

## .NET 6 のインストール手順
### ダウンロード
.NET 6 の公式ページにアクセスします。

[https://dotnet.microsoft.com/ja-jp/download/dotnet/6.0](https://dotnet.microsoft.com/ja-jp/download/dotnet/6.0)

ページが表示されたら、SDK 6.x.x（x はバージョン番号）の Windows OS のインストーラーの「**x64**」のリンクをクリックします。

![03_officialsite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/9532e362-9604-3293-7547-678768d53a92.png)

### インストーラの起動
ダウンロードが完了したら、ファイルをダブルクリックし、インストーラを実行します。

![11_download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/266a8222-61b8-3518-fd85-7b23f6fee2ac.png)

### ライセンスの確認
ライセンスの確認画面が表示されたら、「**インストール**」をクリックします。

![21_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/f4b8d7bb-11d1-0e3c-fac4-4e3da6246100.png)

### ユーザーアカウント制御の確認
ユーザーアカウント制御が表示されたら、「**はい**」をクリックします。

![22_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/2a432813-bfe3-6ca6-8439-08281b9eb926.png)

### インストールの終了
インストール完了画面が表示されたら、「**閉じる**」をクリックします。

![24_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/c5750c9c-6b09-52ff-d0ad-d7f15edea123.png)

以上で、インストール作業は終了です。

## 参考文献
- マイクロソフト > Learn > .NET > 基礎 > Windows に .NET をインストールする
https://learn.microsoft.com/ja-jp/dotnet/core/install/windows
ベイズ統計モデリング 4.1

## 4.6 エクササイズ

``` r
show(HairEyeColor)
```

    ## , , Sex = Male
    ## 
    ##        Eye
    ## Hair    Brown Blue Hazel Green
    ##   Black    32   11    10     3
    ##   Brown    53   50    25    15
    ##   Red      10   10     7     7
    ##   Blond     3   30     5     8
    ## 
    ## , , Sex = Female
    ## 
    ##        Eye
    ## Hair    Brown Blue Hazel Green
    ##   Black    36    9     5     2
    ##   Brown    66   34    29    14
    ##   Red      16    7     7     7
    ##   Blond     4   64     5     8

性別全体の合計

``` r
eyeHairFreq = apply(HairEyeColor, c("Eye","Hair"), sum)
eyeHairFreq
```

    ##        Hair
    ## Eye     Black Brown Red Blond
    ##   Brown    68   119  26     7
    ##   Blue     20    84  17    94
    ##   Hazel    15    54  14    10
    ##   Green     5    29  14    16

同時比率(全体を1としたときの比率)

``` r
EyeHairProp = eyeHairFreq / sum(eyeHairFreq)
EyeHairProp
```

    ##        Hair
    ## Eye           Black      Brown        Red      Blond
    ##   Brown 0.114864865 0.20101351 0.04391892 0.01182432
    ##   Blue  0.033783784 0.14189189 0.02871622 0.15878378
    ##   Hazel 0.025337838 0.09121622 0.02364865 0.01689189
    ##   Green 0.008445946 0.04898649 0.02364865 0.02702703

性別と目の全体の合計

``` r
HairFreq = apply(HairEyeColor, c("Hair"), sum)
HairFreq
```

    ## Black Brown   Red Blond 
    ##   108   286    71   127

周辺確率(髪の色)

``` r
HairProp = HairFreq / sum(HairFreq)
HairProp
```

    ##     Black     Brown       Red     Blond 
    ## 0.1824324 0.4831081 0.1199324 0.2145270

性別と髪の全体の合計

``` r
EyeFreq = apply(HairEyeColor, c("Eye"), sum)
EyeFreq
```

    ## Brown  Blue Hazel Green 
    ##   220   215    93    64

周辺確率(目の色)

``` r
eyeProp = EyeFreq / sum(EyeFreq)
eyeProp
```

    ##     Brown      Blue     Hazel     Green 
    ## 0.3716216 0.3631757 0.1570946 0.1081081

条件付確率(目の色が青い時の、髪の毛が黒い確率)

``` r
EyeHairProp["Blue",]/eyeProp["Blue"]
```

    ##      Black      Brown        Red      Blond 
    ## 0.09302326 0.39069767 0.07906977 0.43720930
DockerコンテナをRenderから無料＆高速でデプロイする方法

![スクリーンショット 2024-01-20 151712.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364428/f691d2fc-3d41-a208-be8e-8f68ab539658.png)

## 最初に
今回は、GitHubから取得したDockerコンテナに含まれるFlaskアプリを、Renderの無料プランを使用してデプロイする方法を説明します。

### 前提条件
・GitHubアカウント
・Renderアカウント(https://dashboard.render.com/)
・Dockerに関する基本的な知識
・Flaskアプリが含まれるDockerコンテナ
## ステップ1: GitHubリポジトリの準備
最初に、Flaskアプリを含むDockerコンテナのソースコードをGitHubリポジトリにプッシュします。
```
git init
git add .
git commit -m "初めてのコミット"
git remote add origin <あなたのリポジトリURL>
git push -u origin main
```
ファイル構造はざっくりこんな感じです。
```
my-flask-app/
|-- app.py
|-- templates
|-- Dockerfile
|-- requirements.txt
|-- docker-compose.yml
```

## ステップ2: Renderでのデプロイ準備
次に、Renderにログインし、新しいWebサービスを作成します。

Renderのダッシュボードにアクセス 
「New +」ボタンをクリックして「Web Service」を選択します。
![スクリーンショット 2024-01-14 162009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364428/fc67736b-7aad-d294-23f5-e09d39b8f3ef.png)

GitHubリポジトリを選択
![スクリーンショット 2024-01-14 161901.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364428/0d03e98a-4902-8078-e9d3-d8c7fc21760b.png)

## ステップ3: Docker設定の適用
Renderでサービスを作成する際には、Dockerの設定を適切に行う必要があります。
必要に応じて「Dockerfile」のパスなど、その他の設定を指定できます。

インスタンスタイプで無料プランを選択します。

![スクリーンショット 2024-01-14 162312.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364428/6751b811-f7b2-3a98-44e8-ec650a9cf156.png)



## ステップ4: デプロイの開始
すべての設定が完了したら、「Create Web Service」ボタンをクリックするとデプロイが開始されます。

デプロイが完了しURLが発行されれば成功です！

## ステップ5: アプリの確認
デプロイが完了したら、Renderが提供するURLでアプリが実行されていることを確認します。
以下のようにデプロイ後のアプリケーション管理、更新はUIから行うことができます。
![スクリーンショット 2024-01-14 161219.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364428/835d187f-fb03-e317-4239-bfef8c367822.png)

## まとめ
今回は、GitHubから取得したDockerコンテナをRenderで無料でデプロイする方法を説明しました。Renderは使いやすく、デプロイ後のアプリの運用や更新も非常に簡単です。GitHubリポジトリに変更をプッシュするだけで自動的にアプリが更新されるため、迅速な反映が可能です。この機能により、開発者はより効率的にアプリケーションを管理し、アップデートを配信することができます。
BizRobo! DSのファインダーの設定方法~属性名と属性値~

就業先では、RPAツールのBizRobo!を使用しています。BizRobo!開発で悩み、BizRobo!ナレッジベースで日々検索しています。

WebサイトやExcelのシートなどの特定のページ上で操作することが多いRPA。
BizRobo!のDSでは、ファインダーを利用することで、処理する場所を特定することができます。
私は、BizRobo!のDSのファインダー設定、特に「属性名と属性値」の設定が苦手でしたが、就業先で設定の仕方を学ぶことができました。
今回は、BizRobo!のDSのファインダー設定について、共有いたします。

※時間が経過して変わってしまった箇所や間違っている箇所、不適切な表現があるかもしれませんが、その時は都度修正いたしますので、ご指摘いただけると幸いです。


## BizRobo!のDSのファインダーとは
RPAは、WebサイトやExcelのシートなどの特定のページ上で操作することが多いです。
ページのどの部分に対して処理を行うか指定しないと誤った場所を操作してしまいます。どの部分か特定する仕組みがファインダーです。
主にWebサイトのHTML/XMLページや、Excelワークシート内のセル、JSON内の検索などに使用します。

下記図は、国土交通省に関連したWebサイトから、ラジオボタンを選択した際の画面です。
<img width="75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955689/d1a72872-be76-3c60-c25a-a0da0cae3b32.png">

ファインダーの設定情報は、ウィンドウビューやソースビューからステップを作成した際に自動で生成されます。
Webサイトの構成が変更された場合、以前自動生成されたファインダーの設定情報は使えないため、処理が止まる可能性があります。
RPAの安定性のためにファインダーを正しく設定する必要があります。


## 「属性名と属性値」の設定方法
ファインダーはアクションビューのファインダータブにて設定や変更を行うことができます。
下記図は、国土交通省に関連したWebサイトから、ラジオボタンをクリックするステップのファインダーを示しています。
<img width="75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955689/1f7efb04-0b7b-f3be-6a46-d2819956f59c.png">

今回クリックしたラジオボタンのhtmlタグは下記となります。
『input id="rdoSelectKanji" name="rdoSelect" type="radio" value="2"』

ファインダーの属性名と属性値のテキストには、下記を入力します。
属性名：id
属性値のテキスト：rdoSelectKanji

私は当初、属性名と属性値のテキストに入れる値がわかりませんでした。

私の就業先で改修に携わっていたRPAがありました。それは、名刺を管理するWebサイトにアカウントを登録するRPAです。Webサイトのバージョンアップがあったため、ファインダー情報が変わってしまい、RPAがエラーになってしまいました。
「ウィンドウビューからステップを作成し、ファインダーを自動で生成する」のではなく、「ファインダーの設定情報を直接手動で変えなければならない」ため、やり方がわかりませんでした。
ナレッジベース上でも上手く検索することができなかったため、実際の改修作業の中で何度も試しながら、自力で見つけることができました。

こちらのURLを参考にしましたので、ご確認ください。
[DSのファインダーの設定方法](https://knowledge.bizrobo.com/hc/ja/articles/360030986951)
[DSのアクションステップのファインダー](https://knowledge.bizrobo.com/hc/ja/articles/360030641392)
[DSのWeb操作でHTML要素をファインダーで動的に指定する方法](https://knowledge.bizrobo.com/hc/ja/articles/360027216252)


## 最後に
BizRobo! DSのファインダーの設定方法について解説いたしました。

私はBizRobo!のDSのファインダー設定、特に「属性名と属性値」の設定が苦手でした。就業先で、ファインダーを設定する機会があり、この時にだいぶ理解することができました。自分の理解を整理したうえでアウトプットするために、今回の記事を書きました。今回の記事を書くことで、BizRobo!のDSのファインダー設定を理解・整理することができました。

今回の記事が、RPA開発で悩んでいる人の為になれば幸いです。
Windowsでnpmでローカルインストール(npm -i -D)したパッケージへのパスを通す

Windows11でnpmでローカルインストールしたパッケージへのパスを通す

# 対策前
```shell
npm i -D jest
```

パスが通っていない場合、実行ファイルが見つからない
```shell
jest src/sayHello.test.ts
'jest' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

# 対策

* 1 . Windows(田)キー+Rキー押下後にsysdm.cplを入力し、OK押下

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383255/ca79ea2e-dfc1-34c9-936c-97e734b0d4e9.png)

* 2 . 詳細設定タブ押下後に環境変数押下
 
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383255/1ff36b57-cd3f-b97e-e7a4-7a55499dbd9c.png)

* 3 . Pathを選択し、編集押下
 
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383255/ab36cc93-8a60-6256-2e75-7067e76b3280.png)


* 4 . 新規押下後に「.\node_modules\.bin」と入力し、OK押下 

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383255/e6db176d-252c-bdce-08a9-399da5481a02.png)

# 対策後
環境変数設定後にコマンドプロンプトを新しく立ち上げて、コマンド実行
```sh
jest src/sayHello.test.ts
  console.log
    Hello World!

      at sayHello (src/sayHello.ts:3:11)

  console.log
    Hello World!

      at sayHello (src/sayHello.ts:3:11)

 PASS  src/sayHello.test.ts
  √ sayHello (11 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.124 s
Ran all test suites matching /src\\sayHello.test.ts/i.
```
個人メモ

まとめ

[デフォルト引数](https://qiita.com/imokenpi/private/9ea2bbb33afc7e41b71a "デフォルト引数")

[配列と繰り返し処理](https://qiita.com/imokenpi/private/554e44a00bd5d68b60b0 "配列と繰り返し処理")

[連想配列](https://qiita.com/imokenpi/private/c75daa1b894dd409ba85 "連想配列")

[名前空間（自分用メモ）](https://qiita.com/imokenpi/private/1e73234de4621d484d1a "名前空間（自分用メモ）")

[クラス（自分用メモ）](https://qiita.com/imokenpi/private/29b2a36a2c9884b0a118 "クラス（自分用メモ）")

[HTTP通信GET・POST（自分用メモ）](https://qiita.com/imokenpi/private/a31468af84f722c59ec5 "HTTP通信GET・POST（自分用メモ）")

[データ型の宣言とstrictモード](https://qiita.com/imokenpi/private/f67aaff774c455e5ee25 "データ型の宣言とstrictモード")

[issetとempty](https://qiita.com/imokenpi/private/9102cc4f10bb69c99212 "issetとempty")

[外部ファイルからクラスを読み込み](https://qiita.com/imokenpi/private/5e35c6976328c9a38da5)

[MySQL（基本操作）](https://qiita.com/imokenpi/private/e2b8cfba2457f1fde8f6)

[PHPとMySQLを組み合わせる](https://qiita.com/imokenpi/private/6b32fe41a1ebb1767bbc)

[ひとこと掲示板](https://qiita.com/imokenpi/private/cd86cf1f343dcc6d289c)
VOICEVOXを利用したDiscord用のTTS（読み上げ）Botを作った

※書きかけにつきちょこちょこ追記するかも
下記記事の続きといえば続き
https://qiita.com/kmatsumoto630823/items/e9d078fd9654e84efa83

# モチベーション
とあるソシャゲのDiscord用サーバー（ギルド）に提供しているTTS（読み上げ）Bot
Javascriptの勉強がてらギルドメンバーを実験台に開発をしています

類似のサービスや公開されているコードもあるのですが、いろいろ自由にやってみたかったので独自に作りました

# TTS Botって？VOICEVOXって?
TTSはText To Speech、つまりテキストから音声に合成する処理のことです
TTS Botはテキストチャンネルの書き込みを音声に合成してボイスチャネルで再生します
これにより、喋らない人でもBotに代わりに喋らせることでボイスチャットに参加できます

VOICEVOXはヒホ氏によって開発されたオープンソースの音声合成ソフトウェアです
https://github.com/VOICEVOX/
音声合成にDeepLearning技術を用いており、人間に近い自然な読み上げを実現します。
また、音声合成のエンジンがWeb APIで実装されているので他のシステムへの組み込みも容易です。

# 特徴
- 単一のBotで複数のサーバー（ギルド）に招待可
- メンバーごとに話者の設定可（速度・ピッチの調整も可）
- VOICEVOX互換のAPIなら複数のエンジンを同時使用可
- カスタムスタンプにも対応した辞書機能
- リアクションスタンプの読み上げ（実験台共からうるさいと不評・・・無効化は可能）
- 設定の保管はjsonファイル（そのうちちゃんとしたい）

# 動作イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124801/fd914c4c-db26-2e03-15df-24ab2d08c9f8.png)

# スラッシュコマンド
```
/connect
　・・・zBotを接続します
/list
　・・・話者IDの一覧を表示します
/speaker
　・・・話者を変更します
/random
　・・・話者をランダムに変更します
/dict
　・・・単語または絵文字の読みを辞書登録します
/reaction
　・・・リアクションスタンプ読み上げの有効・無効を切り替えます
/export
　・・・zBotの設定をエクスポートします
/disconnect
　・・・zBotを切断します
/help
　・・・ヘルプを表示します
```


# 公開場所
※名称が某マルウェアと同じなので改名を検討してますがひとまずこのままで
※zBotのzはずんだもんのz
https://github.com/kmatsumoto630823/zbot

# 補足
複数のサーバー（ギルド）でも動作するように設計してますが、基本的にはサーバーごとにBotを用意してください
VOICEVOXエンジン側は大量のリクエストを想定していないので、パブリックに公開する用途で使う場合は冗長化するなりLB挟むなりして各自対策してください

VOICEVOXエンジンはデフォルトではローカルからのリクエストしか受け付けていません
BotスクリプトとVOICEVOXエンジンを別サーバーで動作させる場合はVOICEVOX側の起動オプションや通信経路を工夫してください
※私はNGINX置いてそこからVOICEVOXにリクエストを流してます

# 最後に
何分、趣味プログラマーなもので我流かつ稚拙な部分が多々あると思います
もっとこうゆう風に書いたほうが良いよとかありましたらご指摘いただければうれしいです

また、2024年はNPUの普及が楽しみです
IntelもAMDのCPUもNPUを搭載したものが出てきています
DirectMLには対応するようなのでお手軽にアクセラレーションする環境が整うとよいですね！

# 参考
コードをパクることまではしてませんが、ちょこちょこ参考にさせてもらいました

KuronekoServer 様
https://github.com/KuronekoServer

y-chan 様
https://github.com/y-chan/voicevox_discord_tts_bot
MacでCommonLispの環境を作成する(妥協)

# はじめに

元々は[Roswell](https://github.com/roswell/roswell) + `VSCode`でCommonLispの実行環境を作成したかったのですが、うまくいかなかったので、`VSCode` + `Alive` + `SBCL` + `Quicklisp`でどうにかした際の記録を書いていきます。

## インストール

以下のツールをインストールします

- SBCL
  - CommonLisp本体
- Quicklisp
  - パッケージ管理

```sh
brew install sbcl
curl -O https://beta.quicklisp.org/quicklisp.lisp
curl -O https://beta.quicklisp.org/quicklisp.lisp.asc
gpg --verify quicklisp.lisp.asc quicklisp.lisp
sbcl --load quicklisp.lisp
```

SBCLの起動中に以下のコードを実行します

```lisp
* (quicklisp-quickstart:install)
* (ql:add-to-init-file)
```

シェルの設定ファイル(`~/.bashrc`や`~/.zshrc`など)に以下のコード追記します

```sh
QUICKLISP_HOME=~/quicklisp
```

コンソールで以下のコマンドを実行し、設定を反映します

```sh
source ~/.bashrc
```

AliveのREPL環境をインストールします

```sh
git clone https://github.com/nobody-famous/alive-lsp.git $QUICKLISP_HOME/quicklisp/local-projects/alive-lsp
```

VSCodeの設定ファイル(`.settings.json`)に以下を追記します

```sh
{
  〜〜(省略)〜〜
    "alive.lsp.startCommand": [
        "sbcl",
        "--eval",
        "(require :asdf)",
        "--eval",
        "(asdf:load-system :alive-lsp)",
        "--eval",
        "(alive/server:start)"
    ]
}
```

VSCodeを起動して、拡張機能から[Alive](https://marketplace.visualstudio.com/items?itemName=rheller.alive)を検索します。

インストール後に、LispファイルがあるディレクトリでVSCodeを再起動すると、REPLが自動で起動します。

## 使い方

### コマンド一覧

|コマンド       |説明                               |
|---------------|-----------------------------------|
|Alt+Shift+Up   |カーソル下のS式全体を選択状態にする|
|Alt+Shift+Enter|カーソル下のS式をREPLに送る        |
|Alt+Shift+L    |ファイル全体を読み込む             |
|Alt+Shift+E    |インライン評価(*1)                 |
|Alt+Shift+C    |表示のクリア(*2)                   |
|Alt+Shift+R    |REPL上の実行履歴                   |

*1 : Alt+Shift+Enterと違いREPLに読み込んだコードが表示されない
*2 : 手元の環境だとクリアされなかった...

### 使用例

まず `sample.lisp` というファイルを作成し、以下の内容を記述してください

```lisp
(defun sample ()
  (print "Hello World"))

(sample)
```

`(defun sample ()`の部分にカーソルをあわせて `Alt+Shift+Enter`を実行すると式がREPに読み込まれます。

REPL上の `cl-user >`となっている箇所に `(sample)` と打ち込んで実行すると以下のように式が実行されます。

```
(sample)
"Hello Worlds" 
Hello Worlds
```

また、ソースコード上の `(sample)` と書いてある行で `Alt+Shift+Enter` を実行しても同様の実行結果を得られます。

## まとめ

とりあえず実行できる環境ができたので良かったのだが、この状態だと裸のSBCLとQuicklispを使って開発しないとイケない状態になっているので辛いです。
RoswellやMondoなどと連携してどうにかしたかったのですが、何故かうまくいかなったので、今回はここまでにしようかと思います...

## 参考

- https://github.com/nobody-famous/alive-lsp
- https://marketplace.visualstudio.com/items?itemName=rheller.alive
- https://gos-k.hatenablog.com/entry/2021/10/24/143530
ケース別！Dockerプロジェクトサンプル集





# Dockerイメージ一覧



#### python

https://docker.hatenablog.jp/entry/2023/05/10/184909




https://docker.hatenablog.jp/entry/2023/05/10/205250




https://docker.hatenablog.jp/entry/2023/05/12/212955


#### nginx

https://docker.hatenablog.jp/entry/2023/05/15/201510



#### Javascript



https://docker.hatenablog.jp/entry/2023/05/18/213054


#### Haskell


https://minegishirei.hatenablog.com/entry/2023/11/21/085934
RailsでDALL-E3のAPIを使ってみる

Ruby on Railsを使用してDALL-E3 APIを介して画像を生成する方法を紹介します。

## 環境

:::note info
ruby 3.2.2
Rails 7.0.8
:::

## 完成図

### 生成前
![rails-dall-e3-before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849608/2a5a9781-d604-bda1-d1fe-cbaac9f18d92.png)

### 生成後

![rails-dall-e3-completed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849608/5fdc3de8-c9f2-8662-2b03-47a8d326013c.png)

## アプリケーション作成
DALL-E3を使った画像生成は、servicesディレクトリ下のopen_ai_service.rbファイルです。

https://github.com/shanbenkazuki/dall-e3-rails

### 追加したgem
API通信を簡素化するhttpartyと、APIキーを安全に管理するためのdotenv-railsを導入しました。

:::note info
gem "httparty"
gem "dotenv-rails"
:::

## 資料
OpenAIのドキュメントを参考にしました。

https://platform.openai.com/docs/guides/images/introduction?context=node
データ型ってなに？

# データ型とは何か
データ型は、プログラミングにおいてデータの性質や取り扱い方を定義したもので、それぞれのデータには特定の型が割り当てられます。データ型はプログラミングが亜データを理解し、処理する際に役立ちます。
<br>
### データ型の例
#### 1.数値型（Number）
* 整数や乳動小数点数を証言します。　例）：'5', '3.14'
#### 2.文字列型(String)
* 文字のシーケンスを表現します。　例）: "Hello, World!"
#### 3. 真偽値型(Boolean)
* 'true' または 'false'のいずれかを表現します。 例）: 'true'
#### 4.オブジェクト型(Object)
* 複数の値やプロパティをまとめたものを表現します。 例): '{name: "John", age: 20 }'

# なぜデータに「型」があるのか
なぜデータに「型」があるのかについては、主に以下の理由が挙げられます
#### 1.　効率的なメモリ利用
 * データ型によって、プログラムはメモリの適切な領域を確保し、無駄なメモリの使用を防ぐことができます。例えば、整数と浮動小数店は異なるメモリ領域を必要とするため、それぞれの型を区別することでことでメモリの効率的な使用が可能です。
#### 2.　演算と処理の制約
* データ型によって、特定の演算や処理が適用できるかどうかが決まります。例えば、数値型に対しては四則演算が行えますが、文字列型には文字列連結などが適用されます。データ型があることで、不適切な操作が行われることを防ぎます。
#### 3.　可読性と保守性
* プログラムの可読性や保守性を向上させるためにも、データ型は重要です。変数や関数の名前に加えて、その変数や関数が扱うデータの型がわかることで、他の開発者や自分自身がコードを理解しやすくなります。

総じて、データ型はプログラミングにおいてコードの品質向上やエラーの予防に寄与し、より安全で効率的なプログラミングを可能にします。
.NET 逆コンパイラ ILSpy のインストール

ILSpy は無料で使える .NET の逆コンパイラです。.NET プログラムのバイナリコードを C# 言語のソースコードに変換することができます。ここでは 18 歳の新入社員向けに ILSpy のインストール方法を紹介します。

## ILSpy の目的
ILSpy は以下のような用途で使われます。

### デバッグと解析
.NET アプリケーションの内部動作を理解するために使われます。

### セキュリティ調査
セキュリティ研究者がアプリケーションのセキュリティ診断や悪意のあるコードの検出に ILSpy を使用します。

### リバースエンジニアリング
特定のアセンブリがどのように機能するかを理解し、必要に応じて改善や拡張を行うために使用されます。

:::note warn
ソフトウェアの内部構造を解析し、動作原理を特定する行為は、リバースエンジニアリングと呼ばれます。商用ソフトウェアは使用許諾契約書でリバースエンジニアリングを禁止していることがあります。他人のソフトウェアをリバースエンジニアリングすることは避けましょう。
:::

## ILSpy のシステム要件
ILSpy は以下の環境で動作します。

- オペレーティングシステム：Windows 7, 8, 10, 11 以降
- .NET Framework: .NET 6.0.21 以降
 
※参考：.NET 6 のインストールがまだの方は以下の記事を参照ください。

https://qiita.com/mmake/items/647d372f7c5e12bd2cf3

ここでは ILSpy 8.1.1 を例にして、Windows 11 へのインストール方法を紹介します。

## ILSpy のインストール手順
### ダウンロード
ILSpy のダウンロードページにアクセスします。ILSpy 8.1.1 の「Assets」セクションから「**ILSpy_binaries_8.1.x.x-x64.zip**」（x はバージョン番号）のリンクをクリックします。

[https://github.com/icsharpcode/ILSpy/releases](https://github.com/icsharpcode/ILSpy/releases)

![03_officialsite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/eec5b9ab-1f55-48f2-101d-440b6f5fbb41.png)

### ファイルの展開
ダウンロードが完了したら、ZIP ファイルを右クリックし、コンテキストメニューから「**すべて展開**」をクリックします。

![11_download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/18ba4cfd-ba3d-f617-ad97-9972d9fab7d8.png)

### 展開先フォルダの指定
ファイルの展開先を指定します。ここでは例として **C:\ProgramFiles\ILSpy_binaries_8.1.1.7464-x64** というフォルダに展開します。

![21_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/c52f11ec-f229-90ef-6c7f-858b7cb5c358.png)

以上でインストール作業は終了です。

ILSpy を使う時は **C:\ProgramFiles\ILSpy_binaries_8.1.1.7464-x64\ILSpy.exe** を起動します。

![22_install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/76d351d7-07d4-1b61-a0cc-793186a68106.png)
Google Cloud VMインスタンスでのSSHポート変更

GCPのVMインスタンスを外部から操作するにあたり、デフォルトのSSHポートは22で設定されているのですが、セキュリティ的なことを考慮してポート設定を変更したいと思います。
単純な話なのですが、設定した際に超基本的なことが抜けてハマったので今後のためにメモ。

# 1.ファイアウォールルールの設定
SSHのポート設定を変更して接続するには、まずファイアウォールルールを設定する必要があります。
GCPのVPCネットワークからファイアウォールルールを選択します。
<img width="70%" alt="スクリーンショット 2024-01-13 11.53.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456861/edb296fe-b688-79f0-e049-eb2bbcd1fae7.png">

デフォルトでいくつかのルールが登録済みで、その中に「defalut-allow-ssh」とSSHのルールが存在しており、この設定を変更するだけでもよいですが、今回は別途ルールを作成して適用させてみます。

まずは画面上部の「ファイアウォールルールの作成」をクリックします。

<img width="70%" alt="スクリーンショット 2024-01-13 12.01.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456861/bd009950-1c7c-07f3-7b61-668375081dca.png">

#### ⚪︎名前
名前は任意の名前で構いません。
今回は例えば _allow-ssh-999_ としておきます。

#### ⚪︎説明
ルールのことがわかる内容を記載します。入力なしでもかまいません。

#### ⚪︎ログ
オフのままでOK

#### ⚪︎ネットワーク
VMインスタンスで使用しているネットワークを選択します。
今回、インスタンスではdefaultとい名前のネットワークを使っています。

#### ⚪︎優先度
数値が小さいほど優先度が高いです。
default-allow-sshの優先度が65534（設定範囲は0〜65535）に設定されているのでそれよりも高い優先順位を指定します。
今回はデフォルトで入力されている1000でも問題ありません。

#### ⚪︎トラフィックの方向
VMインスタンスは「アクセスされる側（受信）」なので __上り__ を選択

<img width="70%" alt="スクリーンショット 2024-01-13 12.01.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456861/1c50376a-2ee5-c7f7-a451-2ac9f2a90de7.png">

#### ⚪︎一致したときのアクション
今回は一致した時に接続できるようにするので __許可__ を選択

#### ⚪︎ターゲット
このファイアウォールのルールを特定のインスタンスのみに適用するか、すべてのインスタンスに適用させるかの設定です。とりあえずすべてに適用で問題ないです。

#### ⚪︎ソースフィルタ
IPv6運用をしていなければIPv4範囲で構いません。
送信元も特定のIPアドレスを設定する必要がなければ _0.0.0.0/0_に設定しておきます。

2番目のソースフィルタ、送信先フィルタはデフォルトでOK

<img width="70%" alt="スクリーンショット 2024-01-13 12.01.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456861/87098d51-e25e-aeac-89a4-542739dd3ec7.png">

#### プロトコルトポート
ここでアクセスに使うポートの設定をします。
指定したプロトコルとポートを選択し、TCPにチェックを入れます。
その後ポート欄に任意の値を入力してください。
今回は例えば _999_ とします。

UDP、その他については今回は空欄で問題ありません。

以上まで設定したら __作成__ をクリックして完了させます。

ファイアウォールルールの一番上に作成した新しいルールが追加されていると思います。
<img width="80%" alt="スクリーンショット 2024-01-13 12.57.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456861/c13d9e56-b543-2510-e8ce-c223a295ae39.png">
※基本的に優先度順に並びます

# 2. インスタンスの設定
続いてVMインスタンス側に作成したファイアウォールルールを適用します。
適用したいインスタンスの編集をクリックしてネットワークタグににファイアウォールルールを追加してあげればOKです。
<img width="70%" alt="スクリーンショット 2024-01-14 15.22.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456861/f8a27e6d-057d-8115-016a-7f9253ceb31c.png">
作成したルール「allow-999」を追記し、保存します。
※画像では _default-allow-http_ と _default-allow-https_ タグも記載されていますが、今回のSSHのポート変更には関係ありません。

# 3.仕上げ
SSHの設定変更を適応するため、インスタンスを再起動します。
<img width="70%" alt="スクリーンショット 2024-01-14 15.39.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456861/fd1f5a3e-c906-920e-627c-1eae587f8bf4.png">

再起動したらポート番号を指定してアクセスしてみます。
```
ssh ユーザ名@インスタンス外部IPアドレス -p 999 -i (/User/xxx/.ssh/id_rsa)
```
パスワード入力を求められれば設定完了です。

# 4.おまけ
もし.ssh/configを設定している場合はそちらのファイルのポート番号を書き換えます。
そうすればconfigを引き続き使用できます
``` :config
HOST （任意の名前）
HostName インスタンス外部IPアドレス
User ユーザ名
Port 999
IdentityFile （id_rsaファイルの場所）
```
[Power BI] 3分でQiita の投稿実績レポートを作成しよう😊～実践編～

# はじめに

Qiitaの投稿記事の情報をサクッと可視化しましょう。
Power BIとQiita APIを利用して3分で完成します👌

https://qiita.com/api/v2/docs

# 記事のまとめ

先に結論を書いておきます。

Qiitaのアクセストークンを入力すれば完成するPower BI テンプレートを作成しました。

GitHubからDLしてご使用ください。使う方は、本記事に「いいね」お願いします😊

https://github.com/hanaseleb/Qiita-Power-BI-Report/releases/latest

テンプレートの中身解説は別途解説記事を書きます。

# Power BI テンプレート 使い方

## Qiita アクセストークンの取得

**設定→アプリケーション→個人用アクセストークン**

**新しくトークンを発行**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/813bc744-2c13-5bf0-b559-5ee391c7374f.png)

トークン名は任意です。管理しやすい名前をつけましょう。
今回はread権限だけあれば十分です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/774298ee-31fe-18e5-2d31-799b10878150.png)

発行した後のトークンは、コピーして安全に保存しておいてください。トークンはこの画面に一度表示された後は、再度表示はできない仕様になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/25099152-c0d9-bfc5-8c59-fced9b1cf3fe.png)

## Power BI テンプレートのDL

以下URLよりPower BI テンプレートをDLしてください。

**※利用条件 本記事に「いいね」すること😊**

https://github.com/hanaseleb/Qiita-Power-BI-Report/releases/latest

Power BI テンプレートをDLしたら、ダブルクリックして開きます。

開くと、パラメーターの入力画面になります。

 **page_num** には **1** を入力してください。

**your_token** には 先ほど取得したQiitaのトークンを貼り付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/249767c3-2644-162e-e662-bdcca5919025.png)

入力をしたら、**読み込み** を押せば完成です。

プライバシーレベルを求められる場合、データソースがQiita APIのみなので今回は「Public」で問題ないでしょう。

プライバシーレベルについては以下ドキュメントを参考にしてください。

https://learn.microsoft.com/ja-jp/power-bi/enterprise/desktop-privacy-levels

## 完成

これだけの手順で完成です。順調にいけば3分くらい！
レポートのデザインやデータモデルはシンプルなものなので、あとはご自身で改良して使用してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/b97e8fd1-fba2-f666-6f8f-fcea598b4a92.png)

# Power BI Serviceへ発行

レポートを作成したら、Webに発行して自動更新したいですよね。

発行しても、すぐに自動更新を有効にはできません。

セマンティックモデルの設定画面から、データソースの資格情報を編集しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/2e7286d6-77cc-2ce0-c535-0c5d8ec7f900.png)

ここで、認証は**匿名**、プライバシーレベルは再度**Public**を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/6268a888-e4f9-acba-5a76-dda2436336b4.png)

ここまでやると、自動更新を設定することができますので、任意の時間に設定しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80467/7d12510d-c8db-099b-9db1-3572e7b7c315.png)


# 関連記事、参考記事

QiitaやconnpassなどをAPI経由で可視化するのは先人も様々なアプローチで実現しています。過去の投稿記事は検索するといろいろ出てきます。それぞれ学びがあるため、参考にするのがよいです。

https://qiita.com/yugoes1021/items/1a59b5ba159e33f1d1fa

https://qiita.com/PowerBIxyz/items/1fc385fdd3727b312bdb

https://qiita.com/ishiayaya/items/61d194ee75f1824c560e

https://qiita.com/kenakamu/items/1274a71fcb5648d186a0

https://qiita.com/spumoni/items/419ffd1f07947a07cad0

# 最後に

可視化って楽しいですね。

Power Queryやレポート周りをどう作成しているか、解説編も書きます。
【AWS】EFS (Elastic File System) 備忘録

　Amazon Elastic File Systemは、ペタバイトデータまで自動的にスケールする共有ファイルシステムである。複数の異なるマシンからアクセスする必要のあるファイルシステムで有効である。高耐久性(負荷分散)と高可用性(スケール)の備えたよく見る構成 EC2 + Auto Scaling + ALB + EFS で使用される。

 https://docs.aws.amazon.com/ja_jp/efs/latest/ug/whatisefs.html
 
　料金体制は、使用した容量・通信で従量課金され、スタンダードクラスで 0.36USD(GB-月)、すべてのストレージクラスで読み取り 0.04USD(GB), 書き込み 0.07USD(GB)の料金がかかる。

https://aws.amazon.com/jp/efs/pricing/

制限としては、以下のようなものがある。

https://docs.aws.amazon.com/ja_jp/efs/latest/ug/limits.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/b444d7b7-bb26-1409-f8ca-069c5c06a95f.png)


## EC2でEFSをマウントする
EC2で使用するには、Linux のmountとEFSのDNS名を使用して、特定のフォルダにマウントする。

https://docs.aws.amazon.com/ja_jp/efs/latest/ug/wt1-getting-started.html

1. セキュリティグループを作成する
   EC2 -> セキュリティグループ -> セキュリティグループを作成を押す。
   下記の設定でセキュリティグループを作成する。
   - セキュリティグループ名：適当
   - VPC：EC2があるVPC
   - タイプ：カスタム TCP
   - ポート範囲：2049
   - 送信先：カスタム - EC2に付与しているセキュリティグループ
    ![securitygroup123.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/33e36ba7-0958-06b5-9d40-f9b6b4a628b3.png)
1. EFSを作成する
   EFS -> ファイルシステムの作成で、名前と対象のVPCを選択する。
   ![EFS1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/1b5d1361-9bf7-4dbd-689b-0290f8875f21.png)
   作成したEFSを選択し、ネットワークのタブ -> 管理を押す。
   セキュリティグループで、先ほど作成したものに変更する。
   (任意)作成したEFSを選択し、右上の編集を押す。
   (任意)自動バックアップを無効化する。
   (任意)ライフサイクル管理で全てなしにする。
1. EC2にEFSをマウントする
   EC2で下記のコマンドを実行して、NFS クライアントをインストールする。
   ```
   $ sudo yum -y install nfs-utils
   ```
   下記のコマンドで、EFSをマウントする。
   ```
   $ mkdir ~/efs-mount-point 
   $ sudo mount -t nfs -o nfsvers=4.1,rsize=1048576,wsize=1048576,hard,timeo=600,retrans=2,noresvport mount-target-DNS:/   ~/efs-mount-point
   $ cd ~/efs-mount-point  
   $ sudo chmod go+rw .
   ```
   mount-target-DNSは、EFSコンソールの右上「アタッチ」を押すと、マウントするコマンドが確認できる。
1. 自動的に再マウントするようにする
   マウントしたファイルシステムは、再起動後は保持されない。
    - EC2起動時にEFS ファイルシステムをマウントするよう設定する
      [ファイルシステム] で、マウントする EFS ファイルシステムを選択する。
      ファイルシステム ID の横に表示されるパスは、EC2 インスタンスが使用するマウントポイント。
      このマウントポイントは変更できる。
      ユーザーデータが自動的に生成される。
    - EFS /etc/fstab マウントヘルパーで設定する
      下記のコマンドで、/etc/fstab ファイルを開く。
      ```
      sudo emacs /etc/fstab
      ```
      下記の行を追加する。
      ```
      [file-system-id]:/ [efs-mount-point] efs _netdev,noresvport,tls,iam 0 0
      ```
       - file-system-id: Amazon EFS ファイルシステムの ID。
       - efs-mount-point: EC2 インスタンスの EFS ファイルシステムのマウントポイント
       
## まとめ
今回は、EFSで共有ファイルシステムを作成・マウントの仕方を紹介した。
JS ズンドコ コードゴルフ


数年前に散々こすられたズンドコキヨシプログラムをJSでコードゴルフしていく。

なお今回は改行文字はカウントしない流派だよ。

```js:81文字
t=''
for(c=1;c;)
t+=Math.random()<.5?(c++,'ズン'):(c=c<5,'ドコ')
console.log(t+'キ・ヨ・シ！')
```

## その他（没）

```js:86文字
for(t='';!t.includes`ズンズンズンズンドコ`;)t+=Math.random()<.5?'ズン':'ドコ'
console.log(t+'キ・ヨ・シ！')
```

```js:86文字
t=''
while(!t.includes`ズンズンズンズンドコ`)
t+=Math.random()<.5?'ズン':'ドコ'
console.log(t+'キ・ヨ・シ！')
```

```js:91文字
a='ズン'
b='ドコ'
for(t='';!t.includes(a+a+a+a+b);)t+=Math.random()<.5?a:b
console.log(t+'キ・ヨ・シ！')
```

## 改行をカウントする流派の場合

```js:83文字
for(t='',c=1;c;t+=Math.random()<.5?(c++,'ズン'):(c=c<5,'ドコ'));console.log(t+'キ・ヨ・シ！')
```

コメ欄にて、さらに短い方法があります。
SimpleImputerを使った欠損値の補完方法のまとめ

機械学習で使うデータは、多くの場合欠損値を含みます。scikit-learnではすべての項目に値が設定されていると仮定されているので、欠損値と相性が悪いです。

あまりにも欠損値が多い列は列ごと捨ててしまうこともありますが、一部だけ欠損している場合だともったいないですよね。なんらかの値で補完する場合の備忘録として、sklearn.impute.SimpleImputerの使い方をまとめました。

# SimpleImputerの使い方
## デフォルト
欠損値 np.nan を 平均値で補完します
```python
import numpy as np
import pandas as pd
from sklearn.impute import SimpleImputer
imputer = SimpleImputer()

# すべての列を補完する場合
# この方法だと列名が消えてしまうので、元に戻してあげる必要があります
df2 = pd.DataFrame(imputer.fit_transform(df))
df2.columns = df.columns

# 特定の列を補完する場合
df[['col']] = imputer.fit_transform(df[['col']])
```

## 欠損値の種類

np.nan 以外にも様々な値を欠損値として指定することができます。

```python
# int
imputer = SimpleImputer(missing_values=-1)

# float
imputer = SimpleImputer(missing_values=0.0)

# str
imputer = SimpleImputer(missing_values='NaN')

# np.nan（デフォルト）
imputer = SimpleImputer(missing_values=np.nan)

# pandas.NA
imputer = SimpleImputer(missing_values=pd.NA)
```

## 補完方法

平均値以外にも様々な補完方法が用意されています。

```python
# 平均値（デフォルト）
imputer = SimpleImputer(strategy='mean')

# 中央値
imputer = SimpleImputer(strategy='median')

# 最頻値
imputer = SimpleImputer(strategy='most_frequent')

# 固定値
imputer = SimpleImputer(strategy='constant', fill_value=0.0)
```

## メソッド

fit, transform, fit_transform がよく使われるメソッドです。
ユーザガイドを見ても使い方がよく分からなかったので、自分で試してみた上での理解を記載します。もし違っていたら指摘をお願いします。

```python
# fitで設定した引数から統計量（例えば平均値）を取得します
imputer = SimpleImputer()
imputer.fit([[1, 2, 3], [4, np.nan, 6], [7, 8, 9]])

# transformでは、fitで取得した統計量を欠損値に補完します
# transformに設定した引数の統計値ではありません
X = [[1,1,1],[1,1,1],[1,1,np.nan]]
X = imp_mean.transform(X)
print(X)
```
[[1. 1. 1.]
 [1. 1. 1.]
 [1. 1. 6.]]

```python
# fit_transformでは、引数Xから取得した統計量でXの欠損値を補完します。
# これが一番直感的かもしれません。
X = [[1,1,1],[1,1,1],[1,1,np.nan]]
X = imp_mean.fit_transform(X)
print(X)
```
[[1. 1. 1.]
 [1. 1. 1.]
 [1. 1. 1.]]

```python
# 取得済みの統計量を使って別のデータを補完する場合は、続けてtransformを使います。
X2 = [[10,10,10],[10,10,np.nan],[np.nan,np.nan,np.nan]]
X2 = imp_mean.transform(X2)
print(X2)
```
[[10. 10. 10.]
 [10. 10.  1.]
 [ 1.  1.  1.]]

# 欠損値の確認方法

欠損値の数を確認します。
もしほとんどの行が欠損値だったら、列ごと捨てたほうがいいかもしれません。
```python
# まず行数を確認します
print(X.shape)

# 欠損値を含むカラムごとの欠損値数を確認します
missing_val_count_by_column = (X.isnull().sum())
print(missing_val_count_by_column[missing_val_count_by_column > 0])
```

次に欠損値を含む項目の概要を確認し、どの方法で補完するかを検討します。
```python
# 「col」の部分には、欠損値を含むカラム名を指定してください
# 概要
print(df.col.describe())

# 先頭データ
print(df[df.col.isna()].head())
```

# 参考文献
* https://scikit-learn.org/stable/modules/generated/sklearn.impute.SimpleImputer.html
* https://www.madopro.net/entry/simple_imputer