OmniAICreator/Qiita-1.07M huggingface dataset:
Build.csからプロジェクトのディレクトリパスを取得する

# はじめに
プラグインのBuild.csでSourceフォルダ以下のThirdPartyフォルダに外部のライブラリのファイルをコピーする場合などでModuleDirectoryを使ったり、エンジンモジュールのPrivateフォルダにあるヘッダーをインクルードするためにEngineDirectoryを使ったりすると思いますが、今回は起動中のプロジェクトのディレクトリパスを取得する方法をご紹介します。

ModuleDirectory
[How To link library in Build.cs correctly?](https://forums.unrealengine.com/t/how-to-link-library-in-build-cs-correctly/404851)

EngineDirecotry
[How to access a file in private folder in module](https://forums.unrealengine.com/t/how-to-access-a-file-in-private-folder-in-module/468990/3)

# やり方
``` ProjectDirectory.Build.cs
private string ProjectDirectory
{
	get
	{
		foreach (var CommandLineArg in Environment.GetCommandLineArgs())
		{
			var NameAndValues = new List<string>(CommandLineArg.Split('=', StringSplitOptions.RemoveEmptyEntries));
			if (NameAndValues.Count < 2)
			{
				continue;
			}
			if (NameAndValues[0] != "-Project")
			{
				continue;
			}
			NameAndValues.RemoveAt(0);
			var UProjectFilePath = string.Join("", NameAndValues.ToArray());
			return Path.GetDirectoryName(UProjectFilePath);
		}

		return null;
	}
}
```
Build.csは[UnrealBuildTool](https://docs.unrealengine.com/4.27/ja/ProductionPipelines/BuildTools/UnrealBuildTool/)(以降UBT)から実行されるため、UBTに渡されたコマンドライン引数からuprojectファイルのパスを取得することができます。
コマンドライン引数は以下のような感じです。
```
[EngineRoot]\Engine\Binaries\DotNET\UnrealBuildTool\UnrealBuildTool.dll [ModuleName] Win64 Development -Project=[FullPathToProject].uproject -WaitMutex -FromMsBuild
```
コマンドライン引数をパースするにあたって、パーサーとして[System.CommandLine](https://docs.microsoft.com/en-us/dotnet/standard/commandline/get-started-tutorial)を使用するか、正規表現でパスを抽出するために[System.Text.RegularExpressions.Regex](https://docs.microsoft.com/ja-jp/dotnet/api/system.text.regularexpressions.regex?view=net-6.0)を使用したかったのですが、どちらもnugetを使用する必要があったりと何かしら行う必要があったため、コピペしただけで動くものとしては上記のものになりました。

# もっと簡単に
もっと簡単にプロジェクトファイルのパスを取得する方法を見つけたので追記します。

``` ProjectDirectory.Build.cs
private string ProjectDirectory
{
    get
    {
        if (Target.ProjectFile != null)
        {
            return Path.GetDirectoryName(Target.ProjectFile.FullName);
        }

        return null;
    }
}
```

`Target.ProjectFile`からプロジェクトファイルの名前やパスなどが取得できるようです。
この変数は`null許容値型`なので、何かしらの条件下では値が空になる可能性がありそうです。
プラグインの`Build.cs`で使用する想定でプロジェクト、エンジンどちらの`Plugins`フォルダ以下に配置してもプロジェクトのファイルの情報が入っていました。

# おわりに
ちなみにはじめにで紹介したプロパティとは別でPluginDirectoryというものがあり、こちらを使うとBuild.csがあるSourceフォルダのパスではなくupluginがあるフォルダのパスを取得できるため、ModuleDirectoryの代わりにこちらを使ったほうがよさそうです。
プロパティ名からわかりますが、プラグイン以外のBuild.csでPluginDirectoryを使用するとエラーが発生します。
ちょっとプロジェクトのディレクトリパスを取得しようと思ったら以外と面倒だったので、今後同じことをやる方の助けになれば幸いです。
Rasspberry Pi OS をインストールしてみる

# 埋もれていたRaspberryPi2にSMBサーバを立ててみようと思う。
その準備として、OSを最新のものにしてみようと思う。

手順は以下の通り
1. 必要なものを準備する
1. インストーラーをダウンロードする
1. microSDカードにイメージを書き込む
1. インストールする
1. 初期設定を行う

# 必要なものを準備する
　Raspberry Pi
　microSD
　キーボード

# インストーラーをダウンロードする
　Raspbrry Pi OS をmicroSDカードに書き込むには、「Raspberry Pi Imager」を使用する。
　これは[raspberryPi財団のWebサイト](https://www.raspberrypi.com/software/)からダウンロードする。
　ダウンロードしたファイルを実行し、インストールを行う。

# microSDカードにイメージを書き込む
　「Raspberry Pi Imager」からインストールするOS、書き込み先のストレージを選択する。
　必要に応じて設定ボタンからSSHの使用の有無、ユーザー名等の設定を行ったうえで、「書き込む」をクリックする。
　なお、OSのプルダウンから「削除」を選択すると、microSDカードをフォーマットすることができる。

# 初期設定
　イメージを書き込んだmicroSDカードをRaspbrryPiに差し込み、USBケーブルを差すと
　Raspberry Pi OSが起動する。
　
1.　まずは、以下のコマンドでアップデートを行う。
```
 sudo apt update
 sudo apt full-upgrage
```
2.　次に、SSHなどで、RaspberryPiに接続するためにipアドレスを固定する。
　　viなどで、/etc/dhcpcd.confを開き、以下の設定を行う。
　（必要に応じて、事前にバックアップを残しておく。）
```config:dhcpcd.conf
 interface eth0
 static ip_address=192.168.1.123
 static routers=192.168.1.1
 static domain_name_servers=192.168.1.1
```
3.　Sambaをインストールする。
```
 sudo apt install samba
```

4.　smb.confに設定を追加する。　
　　ユーザー「pi」に「 /home/samba/share」を公開する場合
　　なお、当該ユーザに書き込みを行わせる場合には必要なパーミッションを設定すること。　
```config:smb.conf
 [share]
 comment = "なにがしかのコメント"
 path = /home/samba/share
 public = yes
 read only = no
 browsable = yes
 force user = pi
```
Androidプログラミングのimport一覧

Androidでプログラミング(Java)で書くときに、import設定が地味に面倒だったのでまとめる。



### アラート用ダイアログのインポート
``` java
import android.app.AlertDialog;
        //以降サンプルコード
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setMessage("ここにメッセージを表示します。");
        builder.show();
```

### SDKのバージョンチェックのインポート
``` java
import android.os.Build;

        //以降サンプルコード
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        //ここにプログラムを各
        }
```


### 通知で利用するインポート
``` java
import android.app.NotificationChannel;
import android.app.NotificationManager;
import androidx.core.app.NotificationCompat;
import androidx.core.app.NotificationManagerCompat;
```


### intentのインポート
``` java
import android.content.Intent;
```
D3.jsに入門してみた

# D3.jsとは
D3.jsとは、様々な種類のグラフを描くためのJavaScriptライブラリです。SVGで描画されるのできれいですし、アニメーションも可能です。
ここでは、はじめてD3.jsを使う方向けに円グラフを描画するコードを説明します。

### 環境情報
 - D3.js ver.7
 - Node.js ver.16
 - webpack ver.5

# グラフを描いてみよう
事前に`npm install -D webpack webpack-cli`でwebpackをインストール済であることを想定しています。（設定はデフォルトのまま）

## インストール
D3.jsはnpm/yarnでインストールできます。
```bash
$ npm install d3
# or
$ yarn add d3
```
## 描画領域をつくる
HTMLファイルにグラフを描画するSVG要素を作っておく必要があります。
```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>d3サンプル</title>
  </head>
  <body>
    <!--  ここにグラフを描画-->
    <svg id="sample" viewBox="0 0 500 500"></svg>
　　<script src="dist/main.js"></script>
  </body>
</html>
```

```JS:src/index.js
import * as d3 from "d3";

// データ
const data = [
	{ name: "やまだ", value: 5 },
	{ name: "たなか", value: 10 },
	{ name: "さとう", value: 15 },
	{ name: "いけだ", value: 30 },
	{ name: "こやま", value: 20 },
];

// データの各値に対して、円グラフ描画に必要な情報（描画開始/終了角度、順番など）を生成する
const pie = d3.pie().value((d) => d.value)(data);

// 円グラフの描画領域を作り、データを適用する
const node = d3
	.select("svg")
	.selectAll("g")
	.data(pie)
	.enter()
	.append("g")
	.attr("transform", "translate(300,300)");

// 円グラフの設定をする
const arc = d3.arc().outerRadius(100).innerRadius(0);

// 色分け
const colors = ["#e57373", "#9575CD", "#4FC3F7", "#81C784", "#FFF176"];

// 円グラフを描画する
node
	.append("path")
	.attr("d", arc)
	.attr("fill", (_, i) => {
		return colors[i % colors.length];
	});
```

## 初期化

## グラフを描く
```JavaScript
  // データの各値に対して、円グラフ描画に必要な情報（描画開始/終了角度、順番など）を生成する
  const pie = d3.pie()
                .value((d) => d.value)
                (data);
```
データが単純な数値の配列でない場合は`value()`の引数で値を指定します。こうすると、円グラフジェネレーターを返してくれます。これにデータを渡すことでグラフを描画するためのデータを作ることができます。

```JS
  // 円グラフの描画領域を作り、データを適用する
  const node = d3
    .select("svg")
    .selectAll("g")
    .data(pie)
    .enter()
    .append("g")
    .attr("transform", "translate(300,300)");
```
 1. `select()`：HTML内の描画場所を指定します。
 2. `selectAll()`：D3.jsではまず操作対象を指定する必要がありますので要素を指定します。（この時点ではまだ要素は存在しない）
 3. `data()`：データを渡し、これに続く処理をデータの個数分実行します。
 4. `enter()`：データのプレースホルダを作成し参照を返します。
![Frame 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20639/704b2cb4-bc58-4eaa-723d-43057764dad1.png)
 5. `append("g")`：プレースホルダに円グラフの各領域を描画するため、グループ要素`g`を追加します。
 6. `attr("transform", "translate(300,300)")`：デフォルトでは原点を中心に描画されるので、円グラフを移動させて全体が表示されるようにします。
![Frame 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20639/f67fb14b-e944-287b-e1fc-a69d156d3179.png)



円グラフを描くため、まずは円の大きさを設定します。
```JavaScript
const arc = d3.arc()
              .outerRadius(100)  // 円の大きさ
              .innerRadius(0);   // 中抜きの円の大きさ（ドーナツグラフを描くなら1以上を設定。）
```

最後に円グラフの各部分を描画します。
`path`はSVGで図形を描画するパス要素を指しており、`d`でその形状を、`fill`で塗りつぶし色を指定します。
```JavaScript
// 色分け
const colors = ["#e57373", "#9575CD", "#4FC3F7", "#81C784", "#FFF176"];

// 円グラフを描画する
node
 .append("path")
 .attr("d", arc)
 .attr("fill", (_, i) => {
    return colors[i % colors.length];
  });
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20639/a08b563c-b3e5-5045-9443-d457a164b991.png" width="300" />


# まとめ
D3.jsは独特の書き方があるため、最初はとっつきにくいですが簡単にグラフを描画することができます。
DjangoでGraphQLを触ってみる Part.2 (絞り込み実装)

# はじめに
[DjangoでGraphQLを触ってみる Part.1](https://qiita.com/abemaru/items/fcd64145168e7267e615)の続きです。
今回は、絞り込みの実装を行います。

7/20にリレーションありのバージョンを調べる中でもっと簡単に絞り込みが実装できそうだったので追記しています。
いつも通り環境構築や書くのが面倒な方は、[私のgit](https://github.com/abemaru/my_graphql_demo)を参考にしてください。

# パート解説
#### [Part1 : 入門向け環境構築と基本的な書き方](https://qiita.com/abemaru/items/fcd64145168e7267e615)
#### Part2 : GraphQLでリレーションなしの絞り込み実装 ←イマココ
#### [Part3 : データの追加、削除、編集(Mutation)の実装](https://qiita.com/abemaru/items/6f396991a0de716d1684)


# 環境
環境は[Part.1](https://qiita.com/abemaru/items/fcd64145168e7267e615)を参照してください。

# 絞り込み実装
`django-filter`を利用しますので、`requirements.txt`に追記します。
```requirements.txt
django-filter>2
```
djangoの設定でdjango-filterを利用するように設定します。
```settings.py
INSTALLED_APPS = [
    ... 
    'django_filters' # ここを追記する
]
```
django-filtersの設定ができたら、`schema.py`に`DjangoFilterConnectionField`を追加します。

```schema.py
import graphene
from graphene import relay
from graphene_django import DjangoObjectType

# フィルタ機能を実装するためimportする
from graphene_django.filter import DjangoFilterConnectionField

from graphql_sample.models import User, Item

class UserType(DjangoObjectType):
    class Meta:
        model = User
        # フィルタするカラムをここで指定する
        filter_fields = ['username']
        interfaces = (relay.Node,)


class ItemType(DjangoObjectType):
    class Meta:
        model = Item
        # フィルタするカラムをここで指定する
        # リレーション先のカラムを指定したい場合はアンダーバー二つで指定する
        filter_fields = ['name', 'description', 'brand', 'user__username']
        interfaces = (relay.Node,)


class Query(graphene.ObjectType):
    user = graphene.List(UserType, id=graphene.Int())
    item = graphene.List(ItemType, id=graphene.Int())

    # 以下のコードを追加するだけでフィルタができる
    all_user = DjangoFilterConnectionField(UserType)
    all_item = DjangoFilterConnectionField(ItemType)

    def resolve_user(self, info, **kwargs):
        return User.objects.all()

    def resolve_item(self, info, **kwargs):
        return Item.objects.all()


schema = graphene.Schema(query=Query)
```
追加ができたらコンテナを立ち上げ、[localhost:8000/graphql](http://localhost:8000/graphql)にアクセスします。

まずは、`brand`がちゃんと絞りこめているか確認できたら、次はGoogleブランドかつ、`username`がabemaruのものを絞り込みます。
![スクリーンショット 2022-07-20 0.16.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326068/96f5211f-0c3e-bcb3-acfd-047cc071ac47.png)

ちゃんと絞りこめていますね！リレーションのある絞り込みも`django-filters`を使えば簡単に実装できることがわかりました。
![スクリーンショット 2022-07-20 0.17.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326068/aaee63cc-6730-e5a3-5320-9b359a351ceb.png)




# さいごに
簡単な実装のみまとめたのですが、もっと進んだ方法を知りたい場合は[公式ドキュメント](https://django-filter.readthedocs.io/en/stable/index.html)を参考にしましょう。

次回は[データの追加、削除、編集(Mutation)の実装](https://qiita.com/abemaru/items/6f396991a0de716d1684)についてまとめます。
【第一回目/Java学習】初学者によるJava学習　開発の流れ

【この記事について】
=
Javaの勉強を始めた初学者のアウトプット記事となります。
間違いなどございましたら指摘等いただけますと大変勉強になりますので
お時間あればコメントお願いいたします。

1.本日の課題
=
Java基礎知識

2.参考図書
=
スッキリわかるJava入門　第三版　

3.勉強内容：開発の流れについて
=
Javaに関わらず、すべての開発についての流れは
　**①ソースコードの作成（コードを書く）**
　**②コンパイル（コンパイラを用いてソースコードを変換）**
　**③実行（結果を返す）**
のように行われる


**①ソースコードの作成：**
-
まず、テキストエディタなどでファイルを作成し、
各プログラミング言語の定める文法に従いコードを書く。

このコード、人が読める状態のプログラムを<font color=red>ソースコード</font color>といい
この際に書き込んだファイルを<font color = red>ソースファイル</font color>という。
```java:Hello.java　←　ソースファイル（Javaなので.java）
 public static void main(String[] args){ //---|
    System.out.println("Hello World!");  //   |←これがソースコード 
}                                        //---|
```

:::note 
**補足**
拡張子は各言語によって異なるため
"メモ帳"等で作成した後、保存する際には拡張子を変更する必要がある。
Javaであれば`.java`,Rubyであれば`.rb`となる。
:::

**②コンパイル**
-
①で作成したソースコードはあくまで人間にわかりやすいように書かれているため
PCで実行するためにはソースコードの変換、つまり<font color = red >コンパイル</font color>をする必要がある。
コンパイルを行うソフトウエアのことを<font color = red>コンパイラ</font color>といい、
コンパイラによってソースコードの文法チェックも同時に行われる。

ちなみにソースコードが変換された後の
ソースコードは<font color = red>バイトコード</font color>
ソースファイルは<font color = red>クラスファイル</font color>（拡張子`.class`）
と呼び方が変化する。

:::note
**補足**
Javaのコンパイラはjavac。
JDK*のインストールを行うとbinディレクトリ内にインストールされる（ファイル名：javac.exe）
※JDKの確認はコマンドプロンプト（Macはターミナル）にて`javac -version`を実行することで確認できる

:::



**③実行**
-
②で作成されたバイトコードはさらに<font color = red>マシンコード</font color>へ変換される
マシンコードとはPCの心臓部である<font color = red>CPU</font color>が解析できるコードで
変換には<font color = red>インタプリタ</font color>というソフトウエアを使用する。
インタプリタには<font color = red>JVM</font color>という仕組みがあり、
少しずつバイトコードをマシンコードに翻訳しCPUへ送信・実行している。

:::note 
**補足：**
各言語ごとに変換方式は異なり、
 ●コンパイル方式：ソースコードをすべてマシンコードに変換・実行する（C/C++、COBOL等）
 ●インタプリタ方式：ソースコードを一行ずつ読み込んで実行する（Pyson、Ruby、PHP等）
がある。
Javaはコンパイル方式とインタプリタ方式の両方の変換を行うことで
どのプラットホームでも実行をすることを可能にしている。
《参考URL》
[インタプリタとコンパイラについて：https://nyumon-info.com/program/bunrui.html](https://nyumon-info.com/program/bunrui.html)
:::
Go generics で指定された型のオブジェクトをインターフェイスとして返す

# これは何？

最近 Go を書く機会があって。

generics 関数内で引数型のインスタンスを作れなくて苦労したので、やりたかったこと、書いてみて駄目だったこと、うまく行ったコードを記す。

# やりたいこと

インターフェイス `Hoge` があり。`Hoge` を実装するクラスが `FugaType` 他多数あり。

```go:go
hogeCreator := CreateHogeCreator[FugaType](arg)
hoge := hogeCreator()
```

のように使う generics な関数 `CreateHogeCreator` が書きたかった。


### トライアル

まずは素朴に

```go:go1.18
func CreateHogeCreator[T Hoge](arg HogeInitArg) func() Hoge {
	return func() Hoge {
		v := T{} // invalid composite literal type T compiler(InvalidLit)
		v.Init(arg)
		return v
	}
}
```

と書くとエラー。T は インターフェイスかもしれないんだから、そりゃ作れない。

T がなにかのポインタであるべきなのかなにかであるべきなのかもごっちゃになっている。駄目。
しかしその辺りを整理して、呼ぶ側の調整をしても全然うまくいかない。

必要なのは「`Hoge` を実装している構造体（インターフェイスではない）」という制約。そうじゃないと `T{}` って書けない。

### 正解

正解はこう。

```go:go1.18
type HogeConstraint[X any] interface {
	Hoge
	*X
}

func CreateHogeCreator[T any, PT HogeConstraint[T]](arg HogeInitArg) func() Hoge {
	return func() Hoge {
		var v T
		pv := PT(&v)
		pv.Init(arg) // (&v).Init(arg) だとエラー
		return pv    // return &v だとエラー
	}
}
```

こんなの思いつかないよ。

この定義で、 `hogeCreator := CreateHogeCreator[FugaType](arg)` と呼べるようになる。

ちなみに。
単にファクトリ関数なら `hoge := CreateHoge(&FooType{}, arg)` のようにすればそもそも generics が不要になる。

しかし。
`CreateHogeCreator` のように、generics 内で型引数で指定された型のインスタンスを作りたいことはまあまああって、その場合このようなコードが必要になる。

# まとめ

go の generics、今のところすごく難しい。
私の理解が足りないからそう感じるのか、本当に難しいのかはまだわからない。

下記の記事のおかげで書けた。ありがとうございます。

* [Go言語のジェネリクス入門(1)](https://zenn.dev/nobishii/articles/type_param_intro)
* [Go言語のジェネリクス入門(2)](https://zenn.dev/nobishii/articles/type_param_intro_2)
【エイリアス】git,make,dockerなどのワードを楽に早く入力したい

## はじめに
初めてのQiita投稿ですが、
業務を行なっている中で色々と効率の上がる方法を教えていただいているので、
忘れないようにちょこちょこ記事にしていこうと思います
ペアプロなどやると自身の作業を見て気づきなど指摘いただけたりするのでありがたいです。

## 一時的に入力を楽にしたい
　以下のように入力すると、ターミナルで`ls`コマンドを`x`を押下することで実行できるようになる
（開いているターミナルのタブを閉じると設定は戻る）
```
alias x=ls
```

## 常に入力を楽にしたい
- ターミナルを開き以下コマンドを入力し`「.zshrc」ファイル`を編集できる状態にする（viで編集）
```
vi ~/.zshrc
```

- `alias`で省略したいコマンドを書き込む
```
alias g=git
alias m=make
alias d=docker
```

※viでの編集方法
`vi ~/.zshrc`コマンドでファイルが開かれたら「i」押下で入力できるようになる
編集完了後は「Esc」→「：wq」押下で編集した内容を保存 


- 以降は省略した形で単語を入力し実行できる
```
g add ●●
m up
d ps
```

## まとめ
どんどん作業効率化できるようにしてきたいです
【Python】画像を白黒に変換して出力してみた

## 概要
pythonでカラー画像を白黒画像に変換して出力する処理を作ってみました。

## 前提条件
Pythonが既にインストールされていること。

## open CVの導入
コンソールを開いて下記のコマンドを実行してopen CVをインストールする。
```
pip install opencv-python
```

## 白黒変換処理の実装
作成した白黒変換処理のプログラムは下記になります。

```py
# OpenCVライブラリを使う準備
import cv2
# sysライブラリを使う準備
import sys

# テスト画像の読み込み
img = cv2.imread("inui.jpg")

# テスト画面が変数imgに入っていない時は、エラーを表示してプログラムを終了
if img is None:
    print("テスト画像が正しく読み込めませんでした")
    sys.exit()

# テスト画像を白黒画像に変換（白黒画像にすることで顔の検出を高速化）
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

# 結果画像をパソコンに保存
cv2.imwrite("inui_gray.jpg",gray)
```

## 実行結果
実行前のカラー画像は下記になります。
![inui.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2056482/05f4094e-066f-0f85-f22c-e7846c2ca326.jpeg)


実行後の白黒画像は下記になります。
![inui_gray.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2056482/a76067d4-f4c2-5cbd-bdd7-d4858f961423.jpeg)
正規表現についてまとめてみた

<h1>はじめに</h1>
正規表現について学んだが、初学者の自分にとってとっつきにくかったため自分なりにまとめてみた内容になっています。
他の初学者の方で同じように思った方の参考になればと思いまとめていきます。

:::note info
正規表現とは文字列に特定の文字が含まれているか確認したり、特定の文字を取り除いたり、置き換えるときなどに使用する
:::
<h2>正規表現</h2>

|正規表現の例     |意味                            |使用例                       |
|:-------------:|:-----------------------------:|:--------------------------:|
|[]             |囲まれた文字のうちいずれかにマッチすること|name.match(/[a-z]/)=>aからzのいずれかに当てはまるか|
|a-z|aからzまでの文字、-で範囲指定できる|上記の例を参照|
|\b|数字が含まれている|age.match(/[\d]/)=>数字が含まれていればデータが返ってくる|
|{n,m}|最小n回,最大m回直前の文字がマッチすることを確認する|password.match(/[\d]{8,124}/)=>パスワードの中身が数字8文字以上124文字以内であるか|
|.|ハイフンやピリオドを含めた全ての文字|mail.match(/@.+/)=>メールアドレスの@以降の全てが1文字以上あればデータが返ってくる|
|+|直前の文字が１回以上繰り返しされている|上記の例|

***
<h2>正規表現を使用するメソッド</h2>

・subメソッド
文字を置き換える。
変数.sub(/置換前/,"置換後")
```
name = "kanon"

puts name => kanon

puts name.sub(/ka/,"co") => conon
```
***
・gsub
subメソッドの場合は指定した文字が複数含まれている場合は最初に一致した文字だけ置換するが、gsubは複数含まれている場合でも全て置換する
```
name = "kanon"
puts name.sub(/n/,"m") => kamon
puts name.gsub(/n/,"m") => kamom
```
***



・match
指定した文字が含まれていればその文字をmatchDataで返ってくる。マッチしなければnilが返ってくる
変数.match(/指定文字/)
```
name = "kanon"
puts name.match(/an/) => an
puts name.match(/ii/) => nil
```
***

他にもまだまだありそうなので学習したら追記していこうと思います。
【React】UIライブラリMantineで開発してみた感想。

こんにちは。
Web系自社開発企業に勤務しているフロントエンドエンジニアです。

つい最近、勤めている会社で新規開発が始まり、
UIライブラリとして「Mantine」を導入することにしたので、
開発を通して感じたことを共有しようと思います。

# はじめに
まずMantineとはどういったものなのか。
簡単にいうと、開発において多くの場合に必要になるであろうコンポーネントを提供してくれ、
さらに便利なHooksも提供してくれるUIライブラリです。

公式Docsに載っているコンポーネントを見てみると、
管理画面を作る場合、特に相性がいいなと感じます。

# なぜMantineなのか
じゃあMUIなど他のUIライブラリではなく、
なぜMantineにしたのか。

自分が感じたメリットとしては以下です。
- Tailwind CSSと相性がよく、細かくスタイリングをしやすい。
- フックスがめっちゃ優秀
- これもあるのかというほどコンポーネントが豊富

上記のメリットに関して詳しく話していこうと思います。

# Tailwind CSSと相性がよく、細かくスタイリングをしやすい。
UIライブラリといえばMUIやCahkraUIですよね。
自分も今までは、UIライブラリと聞けば主にこの２つがパッと思い浮かんでいました。

これらに対して前々から、めちゃめちゃスタイリングしにくくね？と思っていました。
さらにTailwindCSSのようなclassNameベースのCSSライブラリとの親和性の低さに悩んでいました。
そんな時に出会ったのが、Mantineです。

では早速、なぜMantineがTailwindCSSと相性が良いと思うのか説明していきます。

1番の理由としては、
MantineのStylesAPIで以下のように、部品の詳細にclassNameでスタイルを当てれます。
![スクリーンショット 2022-07-17 11.45.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692555/7dead28d-f990-231d-b5db-cc75befd915a.png)
これが大きすぎるメリットだと感じました。
今までは公式Docsとにらめっこしながらしていたスタイリングもこんな簡単にできます。

コード上では、以下のようにスタイリングできます。
```jsx
  <Button
    classNames={{
      root: "ml-2 bg-blue-600",
      label: "text-gray-300",
   }}
  >
    ボタン
  </Button>
```

これはボタンだけではなく、ほとんどのコンポーネントで可能です！
そして上記のボタンの例を見ていただけるとわかるのですが、
classNameで指定できるということから、TailwindCSSをすごく簡単に使用できるんです！

# フックスがめっちゃ優秀
もう１つMantineの大きな特徴としては、
提供しているフックスが充実していることだと思っています。

いくつかよく使っているフックスを紹介します。

まずはuseDisclosureです。
これはモーダルの開閉や、開けた時に処理を行いたいなど、そういった場合に使いたいフックスです。

https://mantine.dev/hooks/use-disclosure/

次はuseClickOutsideです。
これはその名の通り、指定した要素の外側をクリックした時に何か処理を行いたい場合に便利です。
ドロップダウンメニューなどによく使います。

https://mantine.dev/hooks/use-click-outside/

他にもuseMediaQueryやuseIntersectionなど、
多くのフックスが提供されているので一度目を通すだけでも見てみてください。
またuseFormも提供しており、使いやすいのでおすすめです。

# これもあるのかというほどコンポーネントが豊富
Mantineはほんとに多くのコンポーネントを提供してくれています。
例えばボタンやインプットフィールド、モーダルにアコーディオンなど、、。
加えてDropzoneやDatePicker/DateRangePickerなども提供してくれています。

上記のようなよく使う便利なコンポーネントから、
これってあんま使わないよな、って思うものもあったりします。

しかしどれも使い勝手が良いものだと思うので、
ぜひ試しに公式Docsを見てみてください！

# 最後に
自分はMantineを使ってみて、
すごく使いやすいなと感じました。

今まではUIライブラリを使うとスタイリングが大変ということもあり、
メンテナス性を担保するコストと開発の初期コストが見合わないと判断し、
TailwindCSSと自作のコンポーネントを自分で実装していました。

しかしヘッドレスなUIライブラリの中で、
提供しているコンポーネントなどがとても優秀なMantineを見つけてから、
開発効率を爆上げできるメリットが大きいと考えました。

そして実際に導入して、
その判断に間違いなかったと実感しています。
皆さんもぜひMantineを試しに使ってみてください！

# 参考にした記事

https://mantine.dev/
MySQLにユーザーを作成して権限をテーブルに与えるまで

## 経緯
アプリケーション開発でMySQLにDBを作成し、rootユーザーでアクセスするのはセキュリティ的にも問題があると思うので、専用のユーザーを作成して権限を付与するまでをまとめました
誰かの参考になればと思います

## 概要
1. DBの作成
1. ユーザーの作成
1. 作成したユーザーに権限を付与

### 1. DBの作成
```
mysql> CREATE DATABASE 'database_name';

Query OK, 1 row affected
```
作成が成功したらOKと表示されますので、
```
SHOW DATABASES;
```
で作成したDBがあるか確認しましょう

### 2. ユーザーの作成
```
CREATE USER 'user'@'localhost' IDENTIFIED BY 'password';
```
これで'user'という名前のユーザーが作成できますので、
```
SELECT user FROM mysql.user;
```
でユーザー一覧を確認できます。

### 3. 作成したユーザーに権限を付与
```
GRANT ALL ON 'database_name'.* TO 'user'@'localhost';
```
これで、1.で作成したDBに、2.で作成したユーザーからアクセスできるようになりました。
'*'については、'database_name'に関するすべての操作(閲覧、編集等)を可能にするという意味です。
```
FLUSH PRIVILEGES;
```
上記コマンドを入力し、すべての権限をリロードする
最後に先程作成したユーザーでアクセスし、対象にしたDBを操作できるか確認してみましょう。
[mac][VSCode][C++] デバッグ実行時に標準入力を受け付ける方法

競技プログラミング用の環境設定をしていたのですが、VSCodeのデバッグ実行時に標準入力を受け付ける設定でハマったのでメモを残します。

### 前提

#### 設定済みの内容
以下ページを元に環境設定済み。ただし、デバッグ実行時に標準入力が使えない。
https://qiita.com/EngTks/items/ffa2a7b4d264e7a052c6

#### 利用環境
- OS: MacOS Monterey バージョン12.4
- VSCode: Version: 1.51.1

### どうやって解決したか
CodeLLDB（`vadimcn.vscode-lldb`）という拡張機能を入れて、これを使うようにしたら標準入力が使えるようになりました。

### 導入手順
1 拡張機能「CodeLLDB（`vadimcn.vscode-lldb`）」をinstall
2 launch.jsonを以下に書き換える
```launch.json
{
	// Use IntelliSense to learn about possible attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"type": "lldb",
			"request": "launch",
			"name": "Debug",
			"program": "${workspaceFolder}/${fileBasenameNoExtension}",
			"args": [],
			"cwd": "${workspaceFolder}",
			"preLaunchTask": "C/C++: g++ build active file"
		}
	]
}
```
3 tasks.jsonを以下に書き換える(既にこの内容になっている場合は書き換えなくてOK)

```tasks.json
{
        "tasks": [
                {
                        "type": "cppbuild",
                        "label": "C/C++: g++ build active file",
                        "command": "/usr/local/bin/g++",
                        "args": [
                                "-g",
                                "${file}",
                                "-o",
                                "${fileDirname}/${fileBasenameNoExtension}"
                        ],
                        "options": {
                                "cwd": "${workspaceFolder}"
                        },
                        "problemMatcher": [
                                "$gcc"
                        ],
                        "group": {
                                "kind": "build",
                                "isDefault": true
                        },
                        "detail": "Task generated by Debugger."
                }
        ],
        "version": "2.0.0"
}
```

上記設定でC++のデバッグ実行時に標準入力が使えるようになりました
![debug3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122367/79c1ca2c-5ad1-cf1b-afa1-e8254f7489de.gif)

### 追記
デバッグ実行時にvectorの中身を見れなかったのですが、`tasks.json`にて以下コンパイルオプションを追加することにより解決しました。
```
 "-gdwarf-3",
```
「AWS Lambda実践ガイド 第2版」をレビューしてみる

# AWS Lambda実践ガイド 第2版
https://www.amazon.co.jp/dp/B09TVG5H17/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

久しぶりの3連休を生かして、少し前に購入し放置していた本書を取り組んでみた。

自分自身Lambdaは業務内で「アカウントがログインした時に通知がなる仕組み」を導入した時に使用した程度なので、Lambdaの理解をより深めたいなと思っていました。

# A. ずばり買いですか？
Q. 目的によります。

■本書で学べること
・Lambdaを業務で使用するにあたり必要な仕様や構成の知識
・現場にてよく使われるLambdaの利用方法
・サーバーレスな構成と関連サービス(DynamoDB、SQS、SNS、SAMなど)の知見
・上記を生かした3~4つのハンズオン

上記を目的にするならば十分買いだと思います。
※レベル感としてはサーバーレス初級者~中級者レベル

自分自身は非常に満足しており、Lambdaの基礎知識はもちろんDynamoDBやSQSといった個人では勉強し辛い箇所もまとめて触れたので満足しています。

ただ値段は4000円と高く、セールの日や第1版がKindle Unlimitedにて無料で読めるのでまずはそちらを確認してもいいと思います。

(また他のデメリットとしてKindle版ではコピペが防止されていて、ソースコードの作成がかなり手間。海賊版の防止とか色々理由があるのだろうけど、IT書籍でコピペ禁止は辞めた方が良い気がするんだよなあ)
ビットとバイトとその他の単位

# ディジタルデータの表し方
コンピュータの絵や音楽などのいろんなデータは```区切り```や```数値```と関係がある。

## 気づき
１と０がたくさん集まれば多彩なデータを表現できる。
とりあえず
ディジタルデータとは１と０がたくさん集まったものなんだな。

# ビットとバイトとその他の単位
* コンピュータの世界では８ビットをひとまとめにしたバイト（Byte)を使う。
* アルファベットを1文字を表すのに８ビットくらいがちょうど良い
* バイトの省略形は```B```
* ビットの省略形は```b```
* メモリの記憶容量は主に```バイト```で表す。
## １バイトで表せる数の範囲
１ビットでは２通りを合わせる。
それが
８ビットになると２５５通りを表せる。
数字は127〜-１２８を表せる。
```0```は符号なしで表せるから負の数が一つ多く表現できる。

## 気づき
アルファベットを表すのに８ビットも使うんだな。
まだ負の数が一つ多く表現できるのは腑に落ちていない。

# さまざまな補助単位
道案内する場合、４００００mとは案内しない。４０kmと案内する。
このように桁が多すぎて伝わらない。なので４０kmとh表示する。
このkを```補助単位```という。

## 大きい記憶容量など大きい数値を表す補助単位
```キロ(k)``` 10^3
```メガ（M）``` 10^6
```ギガ(G)``` 10^9
```テラ(T)``` 10^12

## 処理速度など小さい数値を表す補助単位
```ミリ（m）``` 10^-3
```マイクロ（μ）```　10^-6
```ナノ(n)``` 10^-9
```ピコ（p）``` 10^-12

### 気づき
k、m、G、T...が補助単位というのか。
大きい補助単位を使うときは記憶容量を説明するときに使うんだな。
逆も処理速度を説明するときに表す補助単位なんだな。
小さい補助単位で処理速度を説明するとはどういうことなんだろうか？

## １０Mバイトのデータを100,000ビット/秒の回線を使って転送するとき、転送時間は何秒か。ここで、何回の伝送効率を50%とし、１Mバイト=10^6バイトとする。

### 伝送効率とは何か？
* データ通信の効率の良さを表す。
データ通信の速度を意味する```転送速度には理論値と実効値```があります。通信では接続用のケーブルを用いた```有線接続```や、デジタルデータを用いた```無線接続```によって通信対象とのデータ通信を行いますが、```必ず何らかの損失```が生じます。

出典　https://bizdrive.ntt-east.co.jp/articles/dr00101-015.html#:~:text=%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%A7%E3%81%99%E3%80%82-,%E4%BC%9D%E9%80%81%E5%8A%B9%E7%8E%87,%E4%BD%95%E3%82%89%E3%81%8B%E3%81%AE%E6%90%8D%E5%A4%B1%E3%81%8C%E7%94%9F%E3%81%98%E3%81%BE%E3%81%99%E3%80%82

#### 気づき
通信は有線接続、無線接続で行う。そこには必ず何らんかの損失が生まれるのか。

## 回線速度と帯域とは？
* ネットワークの速さを表現する言葉として「回線速度」と「帯域」があります。
* この言葉は同じ言葉「回線速度＝帯域」として使っても問題無いと思います。
* ネットワークにおける帯域は「高速道路の幅」でよく表現されます。道の幅ひろければ多くの車を走らせることができた。

## 伝送効率とは？
実際にデータが相手に届くまでの時間（伝送時間）を求めていきたいところとなりますが、ここで「伝送効率」という言葉が重要となってきます。

例えば回線速度（帯域）が「100Mbps」だったとしましょう。この値は「1秒間に100Mビットのデータを伝送することができる」という意味になりますが、実際この値通りの速度が出るか？というとそんなことはありません。

ネットワークにはケーブルを使ったり、無線を使ったりしますが、```これらの媒体を通るときには損失```というものがあります。

さらにIPアドレス情報や誤り訂正のデータなど様々な情報（ヘッダー）によって```さらにデータサイズが大きくなり送信される。```

これらの条件を加味した```理論値の回線速度（帯域）に対する実際の速度の割合のことを「伝送効率」```と呼びます。

### 気づき
理論的にそうであっても実際はそうじゃないのか。
それで伝送効率を考えることになるのか。
なるほど

答えは１６００秒か。

出典 キタミ式イラストIT塾　基本情報技術者　令和03年
9年目SEが普段使っているツールを紹介

# 概要
現状整理も兼ねて普段使っているツールを共有します:hammer_pick:
ご参考になれば。

## 前提

### 開発機
Windows10

### 主な業務
* WEBシステムの開発・保守
* 突発的な見積やシステム改修

# ツール紹介

## 開発ツール

### Visual Studio Code
　コードエディタ

### WinMerge
　差分確認用
　Windowsでこだわり無ければこれでよさげ。

### Notepad++
　テキストエディタ(メイン)
　定期的なバックアップ機能があり、閉じても前回の情報を残してくれるので重宝しています。

### サクラエディタ
　テキストエディタ(サブ)
　矩形選択やマクロが便利。文字の整形などに使用。

### SourceTree
　Gitツール
　Gitツリーが可視化されて見やすい。
　CUIと比べ動きは少し遅いかも。

### Gitbash
　Gitツール　その2
　スピーディな作業を求められている時、込み入ったGit操作をしたい時に使用しています。

### VirtualBox
　Docker on VirtualBoxな開発環境であるため使用。

### A5SQL
　DB操作時のGUIツール

### DBeaver
　DB操作時のGUIツール　その2
　[A5SQLには日付時刻型周りで制約がある](https://a5m2.mmatsubara.com/wp/?topic=postgresql-%E6%97%A5%E4%BB%98%E5%9E%8B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)ため、こちらも併用している。

### Putty
　サーバーへの接続用
　TeraTermよりこちらのほうが個人的に使いやすい

### WinSCP
　サーバーへの接続用

### Excel
　設計書作成や文字整形で使用

### 7-zip
　解凍ツール

### Snipping Tool
　キャプチャやテスト時のエビデンス取得に使用。
　以前はScreenpressoを使っていたが、私はこちらのほうがスピーディに使えた。

### Keyprinha
　キーボードベースで色々操作できて便利

## その他
### Backlog
　個人的な知識蓄積に使用

### Todoist
　プライベートのタスク管理

### Notepad++
　仕事のタスク管理
　以前はTodoistで管理してましたが、
　今はベタ打ちで今日のタスクとか書いてます。

## WEBサイト
### [Codic](https://codic.jp/)
　命名に迷ったときに使用。

### [「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/)
　携わったことのない分野や単語に直面した時は、
　このサイトで超ざっくりの概要を知るところから始めている。
VSCodeのCodeRunnerでC#コードが実行できるようにする

# 概要

VSCodeの拡張機能[CodeRunner](https://github.com/formulahendry/vscode-code-runner)はC#のコード実行にも一応対応しています。
しかし、C#の場合はScriptCSを呼び出すように作られており、インストールしようと思ったのですが面倒そうだったので、
同じようなものをPowerShellで作ってコードの実行ができるようにしてみました。

# コード

```powershell:scriptcs.bat
<# :
@chcp 65001 > nul
@set args=%*
@powershell -c "iex((cat '%~f0' -Encoding UTF8) -join [Environment]::NewLine)"
@exit /b %ERRORLEVEL%
#>

$file = $env:args
$file = $file -replace '"(.*)"', '$1'
$filedata = @(Get-Content -Encoding UTF8 $file)
$filedir = Split-Path -Path $file

$assembles = @('System.Windows.Forms', 'System.Drawing')
$outputexename =  ($filedir + '\ScriptCSOutput.exe')

Add-Type ($filedata -join [Environment]::NewLine) -ReferencedAssemblies $assembles -OutputType ConsoleApplication -OutputAssembly $outputexename
if (Test-Path $outputexename) {
    Start-Process $outputexename -Wait -NoNewWindow -PassThru | Out-Null
    Remove-Item $outputexename
}
```

仕組みはいたって単純で、C#ファイルを読み込んでAdd-TypeコマンドレットでEXEファイルを作成し、実行しているだけです。

# インストール

コードをscriptcs.batとして保存し、PATHを通すか、プロジェクトフォルダ直下にコピーしてください。

# 使い方

C#ファイルを開き、右クリックするとCodeRunndrが入っていれば、RunCodeという項目があるはずなので選びます。
ruby returnの返り値が複数の場合

<h1>はじめに</h1>
メソッド内の処理後、返り値が複数になる場合はどうなるのか気になったので調査し、検証してみました。

<h3>returnを使わない場合の返り値</h3>

```test.rb
def return_test(value)
  sum_a = 5
  sum_b = 10
  sum_c = 15
  sum_a *= value
  sum_b *= value
  sum_c *= value
end

value = 10

x = return_test(value)

puts x
```
結果
```
=> 150
```
:::note warn
メソッドの最後の処理結果しか返ってこない
:::

<h3>returnで返り値を複数指定した場合</h3>

```test.rb
def return_test(value)
  sum_a = 5
  sum_b = 10
  sum_c = 15
  sum_a *= value
  sum_b *= value
  sum_c *= value
  return sum_a,sum_b,sum_c
end

value = 10

x = return_test(value)

puts x
```
結果
```
=> 50
=> 100
=> 150
```
:::note info
return返り値を複数指定しても値が返ってくる
:::
上記の例で言うとreturnに複数の式を指定すると変数xに配列の形で値が代入されているようで配列を指定してみるとreturnの後ろに記述した順番で配列が組まれていました。
```test.rb
puts x[0] => 50
puts x[1] => 100
puts x[2] => 150
```
今後も疑問に思ったことを調査、検証してブログに書いていきます。

参考
https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html#return
【AWS】各種通知サービス

# SWFとStep Functions
Amazon Simple Workflowの略。
システムの一連の処理の流れのことを「ワークフロー」と呼ぶ。
単純に「１→２→３」と処理が順番に流れていくものもあれ「１→２→３or４」といったように分散するケースもある。
Step Functionsには可視化機能があり便利。最近はSWFに代替されることが多い。



# SNS (Simple Notification Service)
多くのアプリで通知機能を搭載しているが、通知機能を構築するには多くのコストがかかってしまう。それらを一括に請け負ってくれるサービス。


SESとの違いは以下
>クライアントに通知をするサービスは、Amazon SNSの他にAmazon SESがあります。SESがＥメールの送信のみ利用できることに対して、SNSはプッシュ型の通知が利用可能でＥメールだけでなく、AWS Lambdaなど他のAWSサービスに送ることができます。しかし長文には対応しておらず、長文対応が必要な時はSESがおすすめです。


# SES (Simple Email Service)
基本的なコンセプトはSNSと同じ。ただEメールに特化している。
Eメールのいいところは長文対応が可能なところ。

バウンスメール(Bounce Mail、存在しないメアドへの送信等で配信不可能なメール)のコントロールを適切に行う必要がある。さもなくばアカウント停止。。。
>最良の結果を得るには、バウンス率を 2% 未満に維持する必要があります。これより高いバウンス率は、E メールの配信に影響する可能性があります。
バウンス率が 5% 以上になると、アカウントはレビュー対象になります。バウンス率が 10% 以上の場合は、高いバウンス率の原因となった問題が解決するまで、以後の E メール送信を一時停止することがあります。


# 参考
・[Amazon Simple Notification Serviceとは？（SNS）](https://www.skyarch.net/column/amazon-simple-notification-service/)

・[Amazon Simple Email Serviceとは？(SES)](https://www.skyarch.net/column/amazon-simple-email-service/)

・[Amazon SES バウンスメール対策（通知、収集、監視）](https://qiita.com/sasamuku/items/cd63f219a0a0f5ce425c)
Octave で幾何平均と調和平均

# Octave で幾何平均と調和平均



## 準備


```matlab
pkg load statistics % statistics が必要
format long % 表示精度を高くする（任意）
```


```matlab
x = csvread("iris.csv")(2:151, 2:5);
```

## 幾何平均

    usage:    
    geomean (x)
    geomean (x, dim)

    x: データ行列
    dim: 次元指定



```matlab
geomean(x)
```

    ans =
    
       5.785720390427728   3.026597849733557   3.238266844512271   0.841707546917601
    



```matlab
exp(mean(log(x(:, 1))))
exp(mean(log(x)))
```

    ans = 5.785720390427728
    ans =
    
       5.785720390427728   3.026597849733557   3.238266844512271   0.841707546917601
    


## 調和平均

    usage:
    harmmean (x)
    harmmean (x, dim)

    x: データ行列
    dim: 次元指定



```matlab
harmmean(x)

```

    ans =
    
       5.728905057850834   2.995815074916938   2.694165533991673   0.494670777492023
    


　`/` 　と `./` の違いに注意。 


```matlab
1 / mean(1 ./ x(:, 1))
1 ./ mean(1 ./ x)
```

    ans = 5.728905057850834
    ans =
    
       5.728905057850834   2.995815074916937   2.694165533991673   0.494670777492023
【AWS】SQS

# Amazon Simple Queue Service(SQS)
AWSが提供するMQサービスのこと。
AWSのサービス群の中では最古の歴史を誇り2004年からサービス開始している。EC2やS3は2006年。



# メッセージキューイング(MQ)
好きなタイミングで非同期で、異なるソフトウェアに対するデータ送受信を行うための「データの預け先」

>メッセージキューイングとは、異なるソフトウェア間でデータを送受信する手法の一つで、直接データを渡すのではなく一旦第三者のソフトウェアに預けることで、送信側も受信側も好きなタイミングで送受信処理をおこなうことができるようにする方式。



# 参考
・[メッセージキューイング 【MQ】 Message Queueing](https://e-words.jp/w/%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%AD%E3%83%A5%E3%83%BC%E3%82%A4%E3%83%B3%E3%82%B0.html)


https://www.acrovision.jp/service/aws/?p=2910
cscの作法 その241

# 概要
cscの作法、調べてみた。
練習問題やってみた。

# 練習問題
guiでhashをvirustotalに投げて、jsonを取得せよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b7dc7e3e-7a07-0a6c-2872-bd083af468b4.png)


# サンプルコード

```

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Security.Cryptography;
using System.Windows.Forms;
using System.Drawing;
using LitJson;
using System.Net;
using System.Net.Http;

class form1: Form {
	private TextBox textBox1;
	private TextBox textBox2;
	form1() {
		Text = "virustotal";
		ClientSize = new Size(300, 400);
		Button btn1 = new Button();
		btn1.Location = new Point(150, 150);
		btn1.Text = "send";
		btn1.Click += btn1_Click;
		textBox1 = new TextBox();
		textBox1.Location = new System.Drawing.Point(30, 30);
		textBox1.Multiline = true;
		textBox1.Size = new System.Drawing.Size(250, 50);
		textBox1.TabIndex = 2;
		textBox1.Text = "52d3df0ed60c46f336c131bf2ca454f73bafdc4b04dfa2aea80746f5ba9e6d1c";
		textBox2 = new TextBox();
		textBox2.Location = new System.Drawing.Point(30, 230);
		textBox2.Multiline = true;
		textBox2.Size = new System.Drawing.Size(250, 50);
		textBox2.TabIndex = 2;
		Controls.AddRange(new Control[] {
			btn1,
			textBox1,
			textBox2
		});
	}
	void btn1_Click(object sender, System.EventArgs e) {
		ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls | SecurityProtocolType.Tls11 | SecurityProtocolType.Tls12;
		string url = "https://www.virustotal.com/vtapi/v2/file/report?apikey=******&resource=" + textBox1.Text;
		HttpClient client = new HttpClient();
		string response = client.GetStringAsync(url).Result;
		LitJson.JsonData json = LitJson.JsonMapper.ToObject(response);
		Console.WriteLine("total: " + json["total"]);
		Console.WriteLine("positive: " + json["positives"]);
		textBox2.Text = json["positives"] + " / " + json["total"];
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}




```

以上。
Slack からtrello のカード作成をClaris Connect を使って実現する

この記事はQiita Engineer Festa 2022の記事投稿キャンペーン参加記事です。

https://qiita.com/official-events/eeadea1de45a11be944e

## 初めに

Claris Connect を実際に使って、ワークフローを作成するのを試しました。
無料で使える評価版を利用して作成しました(詳しくは[こちら](https://www.claris.com/ja/connect/))

## 作成するワークフロー

- Slack で特定のワードをトリガーにワークフローを実行する
- trello でSlack のテキストをタイトルとしたカードを作成した
- 作成完了後、Slack でtrello のURL をbot から通知する

## Project、Flows の作成

- Claris Connect の管理画面から、Project、Flows を新規作成します。

![スクリーンショット 2022-07-17 10.28.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/17dca11f-2ff1-452e-1fcd-38788a281aad.png)

![スクリーンショット 2022-07-17 10.29.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/0d93d8be-30c9-0d37-a914-38d30469c33b.png)

## Outbound WebHook の利用

特定のワードがSlack で投稿されたときにワークフローを実行するように設定します。
下記記事を参考にOutbound WebHooks　の設定をSlack で行いました。

https://qiita.com/JuppoWorks/items/72d9bfecbee868e9edcb

## trello でカードを作成するアクションを追加する

- 上で追加したトリガーから、アクションを作成します
  - trello を選択します

![スクリーンショット 2022-07-17 10.33.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/4adf7d3b-182f-1a02-f83d-812e78a0a13b.png)

- どのようなアクションを行うかを選択します
  - `Create card` を選択します

![スクリーンショット 2022-07-17 10.33.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/b5051ca9-00ff-1752-9e1d-8fb5bf2d881c.png)

- 設定を行なっていきます、下記が必須入力の項目です
  - `Board id`: trello のどのボードに対して、アクションを行うかを設定
  - `List id`: trello のどのリストに対して、アクションを行うかを設定
  - `Name`: 作成するカードのタイトル
- Board id、List id などに対しては、補完が効いています

![スクリーンショット 2022-07-17 10.33.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/dab42676-2282-cac9-090a-9eeb055ed7bf.png)

- 各項目の右側のリストのようなアイコンをクリックすると、他のアクションなどから受け取れる値を利用することができます。

![スクリーンショット 2022-07-17 10.43.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/0573e593-a4be-b58a-8bb9-c5309b9e6037.png)

- `Review and Test` というリンクから、実際に作成したアクションをテストすることができます。

## trello で作成完了した旨をSlack に通知する

せっかくなので、通知まで作成します

- Action をさらに追加し、Slack > Post message(quick) を選択します。
- 設定を行なっていきます、下記が必須入力の項目です
  - `Channel`: Slack のどのチャンネルに対してアクションを行うかを設定
  - `Message`: Slack のテキストメッセージを設定

![スクリーンショット 2022-07-17 10.53.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/e89a7119-4efc-50d0-a117-fe6a7907ed15.png)

## 動作の確認

- 作成したワークフローは下記になります。
- Enabled にして、こちらを有効化して確認します。

![スクリーンショット 2022-07-17 11.05.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/853f78b5-f10f-8fd4-c82f-5e2a730b4860.png)

![スクリーンショット 2022-07-17 11.03.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/47bc0647-4a79-eb76-68ad-39d38dc48d1b.png)

![スクリーンショット 2022-07-17 11.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166596/8f46b4d2-259b-f92e-3ad1-1ec64c47a0fa.png)

しっかり実行されていることが確認できました。

## 終わりに

Claris Connect を初めて使ってみて、直感的にこうしたワークフローを作成できるのがとても楽だなと思いました。
slack 以外のチャットツールの連携もあるので、移行時のワークフローの再作成のコストを下げることができたり、まだまだ連携できるサービスも多いので、とても面白かったです！
Route53のバックアップを確実に取得する方法

Route53にはzone情報のimportはあるがexportはない。確実にバックアップを取得するにはcli53を使用してバックアップを取得する。

# 準備

[cli53](https://github.com/barnybug/cli53)をインストールする。

# バックアップ方法

```bash
cli53 export --full 対象zoneの名称 > 対象zoneの名称.zone
```

# 復元方法

```bash
cli53 import --file 対象zoneの名称.zone 対象zoneの名称
```

# 参照

https://github.com/barnybug/cli53
cscの作法 その240

# 概要
cscの作法、調べてみた。
virustotalのapi叩いてみた。

# サンプルコード

```
using System.Collections;
using System.IO;
using System;
using System.Text;
using LitJson;
using System.Net;
using System.Net.Http;

namespace app
{
	class test0 {
		static void Main() {
			ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls | SecurityProtocolType.Tls11 | SecurityProtocolType.Tls12;
			string url = "https://www.virustotal.com/vtapi/v2/file/report?apikey=******&resource=52d3df0ed60c46f336c131bf2ca454f73bafdc4b04dfa2aea80746f5ba9e6d1c";
			HttpClient client = new HttpClient();
			string response = client.GetStringAsync(url).Result;
			LitJson.JsonData json = LitJson.JsonMapper.ToObject(response);
			Console.WriteLine("total: " + json["total"]);
			Console.WriteLine("positive: " + json["positives"]);
		}
	}
}



```

# 実行結果

```
>virustotal0
total: 67
positive: 55

>
```

以上。
pythonのレスポンス指標ー関数時間測定編

# この記事では.
データ分析でのレスポンス測定は以下の記事通り __timeit, time__ を利用します。
基本的にデータ加工などにかかる時間などワンライナーなコードを対して実行します。
https://qiita.com/binary2/items/6560a190b3fdb26cdaf9

```python
%%timeit
df_test["date_dt"] = df_test.datetime.dt.strftime("%Y-%m-%d")
# 2.18 s ± 55.4 ms per loop (mean ± std. dev. of 7 runs, 1 loop each)
```
今年度からraspberrypiを利用した開発をすることになったので、分析以外でpythonを利用することになった。
また、システム開発ではないのでセンサーなどのやり取りもしないといけなく、分からないことだらけ orz...

まずは、何の処理に時間がかかっているのか？を把握する必要がある。
ある程度汎用的にレスポンス測定できるようにする。

開発なら最終的にクラスにするべきだが、
処理関数だけ作ってutilltyに打ち込んで開発しているので、、（おサボり）
今回は関数と利用方法のみをまとめる。


# 測定方法
レスポンス測定は、誰もがよくやる方法でOK！

```python
import time

start = time.time() # 処理測定開始
# 処理関数
end = time.time() # 処理測定終了

print(str(end-start)) # 処理時間
```

# 実装
測定方法のコードを毎回測定したい処理に差し込めばOK！
だけど、当たり前だけど、汎用性が低すぎる orz..

↑を解消するために、レスポンス測定関数を作る。
実行関数は引数にして、関数名はprintで表示するようにする。

```python
# レスポンス測定関数
def measure_response(f):
    def func(*args, **kwargs):
        print("start:" + f.__name__)
        start = time.time()
        result = f(*args, **kwargs)
        end = time.time()
        print("end:" + str(end-start))
    return func
```

処理関数を作るときは、レスポンス測定関数をデコレートすればOK!
```python
@measure_response
def func1():
    sum_value = 0
    for i in range(1000):
        sum_value += i
    return sum_value

func1()

# start:func1
# end:6.4849853515625e-05

```

# まとめ
今回は、pythonの関数を測定する関数を作成および利用方法までをまとめた。
デコレーターを利用することで、処理とレスポンス測定が独立（干渉しない）で実装できた。
今後やるとしたらクラス化。
SwiftUIで文中に画像を入れたいとき

iOS14以降であれば、以下のように書くことで `Text` を使ってテキストと画像をひとかたまりの `View` として表示できます。

```swift
Text("Moon \(Image(systemName: "moon"))")
```

テキストと画像が混在したものを **動的** に作り出したい場合、以下のように `LocalizedStringKey` を生成する必要があります。

```swift
import SwiftUI

struct Item {
    let label: String
    let symbol: String
}

struct ContentView: View {
    let items: [Item]

    var body: some View {
        Text(string())
            .font(.system(size: 40))
            .foregroundColor(.blue)
    }
    
    private func string() -> LocalizedStringKey {
        // LocalizedStringKey.StringInterpolationでフォーマット
        var interpolation = LocalizedStringKey.StringInterpolation(literalCapacity: 100, interpolationCount: items.count * 2)
        items.forEach { item in
            interpolation.appendInterpolation(Image(systemName: item.symbol))
            interpolation.appendInterpolation("\(item.label) ")
        }
        return .init(stringInterpolation: interpolation)
    }
}

struct ContentView_Previews: PreviewProvider {
    private static let items: [Item] = [
        .init(label: "Sun", symbol: "sun.max"),
        .init(label: "Moon", symbol: "moon"),
        .init(label: "Globe", symbol: "globe")
    ]

    static var previews: some View {
        ContentView(items: items)
    }
}
```

ちなみに `Text` は `+` で連結することもできるので、以下のようにもできます。

```swift
    private func text() -> Text {
        return items.reduce(Text("")) { text, item in
            return text + Text(Image(systemName: item.symbol)) + Text("\(item.label) ")
        }
    }
```

折り返しにも対応できていいですね！

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25727/23729f53-dfad-e87e-5ae7-3acb6687cf24.png">
study javascript dya1_1

# 変数と定数
```
// 変数
let count = 0;
count = 30;
let newCount = 0;
// 定数
const daysInweek = 7;

console.log(count);

let additionResult = 2 + 5;
let result = 5;
result = result + 10;
result += 10;

// result +=1；と同じ意味
// result++;
// ++result;
console.log(result);
```
rails ヘルパーメソッドを使ってviewファイルを整える

<h1>はじめに</h1>
ヘルパーメソッドを自分で定義することについて学んだので学習したことをまとめて記述していきます。
<h1>ヘルパーメソッドを使うメリット</h1>
railsでビューファイルに対して行われる処理に関して繰り返して使用するようなメソッドはヘルパーメソッド(ビューファイルに対して使用するモジュール)を自分で定義して使用するとビューファイルの可読性を良くすることができ、また保守などの面から見ても修正しやすくなるメリットがある。


___
メッセージの投稿機能があるWEBアプリケーションでそのメッセージを一覧でメッセージテキストと投稿者を表示したい時などを想定してビューファイルを下記のように作成した場合

:::note warn
ヘルパーメソッド使用前
:::
```app/views/messages/index.html.erb
<div class="contents">
  <%= @messages.each do |message| %>
    <%= message.text %>
  <% end %>
</div>
```

:::note info
ヘルパーメソッド使用後
:::
```app/helpers/messages_helper.rb
module MessagesHelper
  def message_lists(messages)
    html = ''
    messages.each do |message|
      html += message.text
    end
    return raw(html)
  end
end
```

```app/views/messages/index.html.erb
<div class="contents">
  <%= message_lists(@messages) %>
</div>
```
このようにヘルパーメソッドを利用することでビューファイルの可読性が良くなり、今回の例だとあまり転用が実用的ではないが、他のビューファイルに同じ処理を埋め込むこともできる。
cscの作法 その239

# 概要
cscの作法、調べてみた。
練習問題やってみた。

# 練習問題
guiでファイルをhashせよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/6c6a0399-d9df-e34a-5f0d-f68382b3a775.png)

# サンプルコード

```
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Security.Cryptography;
using System.Windows.Forms;
using System.Drawing;

class form1: Form {
	private TextBox textBox1;
	form1() {
		Text = "sha256";
		ClientSize = new Size(300, 200);
		Button btn1 = new Button();
		btn1.Location = new Point(150, 50);
		btn1.Text = "hash";
		btn1.Click += btn1_Click;
		Controls.AddRange(new Control[] {
			btn1
		});
		textBox1 = new TextBox();
		textBox1.Location = new System.Drawing.Point(30, 120);
		textBox1.Multiline = true;
		textBox1.Name = "textBox1";
		textBox1.Size = new System.Drawing.Size(250, 50);
		textBox1.TabIndex = 2;
		textBox1.Text = "";
		Controls.AddRange(new Control[] {
			textBox1
		});
	}
	void btn1_Click(object sender, System.EventArgs e) {
		string BaseDirectory = Environment.CurrentDirectory;
		string fileContent = string.Empty;
		string filePath = string.Empty;
		using (OpenFileDialog openFileDialog = new OpenFileDialog())
		{
			openFileDialog.InitialDirectory = BaseDirectory;
			openFileDialog.Filter = "txt files (*.txt)|*.txt|All files (*.*)|*.*";
			openFileDialog.FilterIndex = 2;
			openFileDialog.RestoreDirectory = true;
			if (openFileDialog.ShowDialog() == DialogResult.OK)
			{
				filePath = openFileDialog.FileName;
				Console.WriteLine(filePath);
				byte[] byteValue = File.ReadAllBytes(filePath);
				SHA256 crypto = new SHA256CryptoServiceProvider();
				byte[] hashValue = crypto.ComputeHash(byteValue);
				var hash = String.Join("", hashValue.Select(x => x.ToString("x2")).ToArray());
				Console.WriteLine(hash);
				textBox1.Text = hash;
			}
		}
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}




```

以上。
RxJS　JavaScriptで　clickイベント記述　比較

```
<html>
    <head>
        <meta charset="UTF-8">
        <title>RxJs</title>
        <script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>
    </head>
    <body>
        <button type="button">BUt</button>
    </body>
    <script>
        const {fromEvent} = rxjs;
        let count = 0;

        const button = document.querySelector('button');

        //javascript　書き方(即時関数で記述した)
        // button.addEventListener('click', (() =>{
        //     return (event) => console.log(`cont: ${++count}`)
        // })(0));

        //RxJS　書き方
        // fromEvent(button,'click').subscribe(
        //     (count)=> console.log(`count: ${++count}`)
        // );

    </script>
</html>
```

RxJSを使用するため、今回head部にCDNを読み込ませています。
fromEventを使用してbuttonのclickイベント処理を記述しています。
https://rxjs.dev/api/index/function/fromEvent



```
(count)=> console.log(`count: ${++count}`)の部分を、

(event)=> console.log(event.type)に書き換えるとconsoleでの出力結果は変わります。

event.typeというのは、fromEvent(button,'click').subscribe(の行で記載している、
'click'イベントのことです。

```

<h1>RxJSの書き方をレベルアップしてみる</h1>
上記のコードから、改善します
結果は、一番上のコードと同じです。pipe()が追加されました。

```
//省略
        const {fromEvent} = rxjs;
        const {scan} = rxjs.operators;
        //let count = 0;

        const button = document.querySelector('button');

        //RxJS　書き方
        fromEvent(button,'click')
        //subscribeで実行された結果pipeがバケツのように蓄積するイメージ。
        //
        .pipe(
            //アロー関数で記述。第一引数:どういう処理にするか記述、第二引数：初期値を入力
            scan((count) => ++count, 0)
        )
        .subscribe(
             (count)=> console.log(`count: ${count}`)
        );
//省略
```
<h2>補足 </h2>
他にも便利なオペレータが沢山あります。
scan関数や、他にも様々な使用する関数がありますが
それはrxjsではオペレータと呼ぶらしい。

例えば、throttleTimeとかもオペレータと呼びます。
```
        .pipe( //subscribeの前に処理を挟む際に、pipeを記載
            throttleTime(3000),//3秒たたないと、次の処理を送らない処理(いくらクリックしても3秒以内は処理を送らない。)
            scan((count)=> ++count, 0)//受け取る値をどうするかを関数で書く。
        )
```

以下のRxJS公式サイトで、色々見ると勉強なると思います。
https://rxjs.dev/guide/operators
[GCP]TLS1.0/1.1を無効化

TLS1.0/1.1の脆弱性対策としてこれらのバージョンを無効化したいところではありますが、GCPのデフォルトのSSLポリシーでは有効になってます
TLS最低バージョンを変更したときのメモです

loadbalancerの画面
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726391/3b474f96-d56e-6971-d0cd-c969d225a92b.jpeg)


SSL policyの画面
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726391/67641b37-c9c3-8263-2810-99799d12e898.jpeg)



TLSの最低バージョンを変えるには、自分でSSL policyを作成してTLS最低バージョンを指定します
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726391/4b34e5cc-84d0-dce0-d6fc-097defce9aaf.jpeg)
cscの作法 その238

# 概要
cscの作法、調べてみた。
ファイルをhashしてみた。

# サンプルコード

```
using System;
using System.IO;
using System.Linq;
using System.Security.Cryptography;

class Program {
	[STAThread]
	static void Main(string[] args) {
		if (args.Length == 0)
		{
			Console.WriteLine("cert0 file");
			return;
		}
		byte[] byteValue = File.ReadAllBytes(args[0]);
		SHA256 crypto = new SHA256CryptoServiceProvider();
		byte[] hashValue = crypto.ComputeHash(byteValue);
		var hash = String.Join("", hashValue.Select(x => x.ToString("x2")).ToArray());
		Console.WriteLine(hash);
	}
}



```

# 実行結果

- certutilと比較

```
>CertUtil -hashfile myenc.txt sha256
SHA256 ハッシュ (ファイル myenc.txt):
f19413c1d259d3d9debdb5a6a9d8c2630201eb912b612fae3ada49d6077c5d80
CertUtil: -hashfile コマンドは正常に完了しました。

>

>cert0 myenc.txt
f19413c1d259d3d9debdb5a6a9d8c2630201eb912b612fae3ada49d6077c5d80

>
```

以上。
Salesforceでプロファイル設定画面を変更する方法

Salesforceでのプロファイル設定画面は2種類あります

今回は２種類のプロフェイル設定画面があることを理解し、どのの設定を変更すればそれぞれ画面が切り替わるのか確認しましょう

設定場所は「ユーザ管理設定」の「拡張プロファイルユーザインターフェース」です。

![プロファイル無効化.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/cd103102-39d7-45d8-7878-a792e2d57744.png)

こちらを無効化すると下記のように一覧で並んでいるプロファイル画面になります
![test01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/dddc0767-0d90-7946-5a4b-e32c7fbc45b2.png)



では、この「ユーザ管理設定」の「拡張プロファイルユーザインターフェース」を有効にします

![プロファイル有効化０２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/79d37b28-8a2f-b6d9-59f3-d6db947b59a6.png)

すると、プロファイル画面は画面のように変更され、
・アプリケーション
・システム
に分類されます

![プロファイル有効化１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/f5047b5c-4179-00d0-270a-3288017c47fa.png)


このプロファイルの画面切り替えは意外と覚えておいたほうがいいです。


というのも、Trailheadなどで「プロファイルの設定変更を確認しよう」という場合、Trailheadの画面と実際の画面で差異がある　と思ったことは私も過去にあります

今後はその際は
「ユーザ管理設定」の「拡張プロファイルユーザインターフェース」を有効化しよう（あるいは無効化しよう）ということを思い出してください。