OmniAICreator/Qiita-1.07M huggingface dataset:
理解していますか？各クラウドの「アカウント」

# いきなりですが
### 皆さんはAWS,GCP,Azureの「アカウント」の違いわかりますか？
### 私は分かりません

各クラウドで名称が違いますが
その中でも特に難しいのが**「アカウント」**だと思います
調べてまとめました


#アカウントの意味


AWS|（一応）完全に独立したリソースやユーザの集合<br>開発や本番などで分けると良い
---|---
**GCP**|**正確にはアカウントというものはない<br>個人ユーザで用いるGoogleアカウントと<br>マシンユーザで用いるサービスアカウントがある**
**Azure**|**Azure アカウントは、請求関係を表します。 Azure アカウントは、ユーザー ID、1 つ以上の Azure サブスクリプション、および関連する Azure リソースのセットです。**[[1]](https://docs.microsoft.com/ja-jp/azure/role-based-access-control/rbac-and-directory-admin-roles#azure-account-and-azure-subscriptions)

一般的なイメージだと**GCP**のように、個人を表すものかなと思います。
Qiitaもアカウントは個人ユーザを表していますね。
**AWS**の使い方は初めは違和感がありましたが、だんだん慣れて来きました。
一番理解しづらいのが**Azure**です。これはAzureADとサブスクリプションを理解していないと分かりづらいです。この辺りは別の機会にまとめようと思います。

# 最後に

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

# 参考資料

[1] https://docs.microsoft.com/ja-jp/azure/role-based-access-control/rbac-and-directory-admin-roles#azure-account-and-azure-subscriptions
[光-Hikari-のPython]08章-02 モジュール（パッケージのインポート）

#[Python]08章-02 パッケージのインポート
前節では、モジュールというファイルをインポートして関数を呼び出していました。そこでは、単体のモジュールをインポートしていましたが、今後いろいろなプログラムを作成していくと、モジュールが増えていき、最終的には管理が煩雑となってしまいます。

この節では、モジュールの管理が煩雑にならないように、パッケージ（package：小包）という単位にまとめることで、管理を容易にすることができます。これにより**モジュールをまとめることもできます**が、パッケージ内に**モジュールを階層化**して管理をすることもできます。この節では、そのようなパッケージの扱いについて触れていきます。

イメージとしては、**モジュール**がファイル、それを管理するフォルダが**パッケージ**です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/26a35d8c-3b68-afc6-f20d-34a325622cc3.png)


##パッケージの作成
パッケージを作成してみます。まず、以下の手順で空のパッケージを作成してください。
（[pythonフォルダを右クリック]→[New]→[Python Package]の順で選択）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/e6a094b2-c2d2-7e47-7236-67443c070d30.png)


パッケージ名を<font color="#0cc">pkg</font>とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/08e04c29-8762-da0c-ed4c-bc45d2acc6c6.png)

すると、以下のようにパッケージができます。空の**pkg**というパッケージを作成したはずなのに、**\_\_init\_\_.py**という中身が空のファイルが入っています。これがあると、pkgがパッケージであることを示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/a4899961-6c12-56d6-b6c3-497fdbade527.png)

では、作成した**pkg**内に、モジュールを作成していきましょう。今回は2つ作成していきます。
**pkgフォルダ**を右クリックし、**sampmodA**と**sampmodB**というモジュールファイルを作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/4d8e962c-9eeb-485f-d995-1d1fb598694b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/87a4518c-d5a0-5e0a-cc78-08a1d2478e8f.png)

それぞれのモジュールに以下のコードを記載してください。

```.sampmodA.py
def calc_plus(x, y):
    print('sampmodAモジュール内のcalc_plus関数が呼び出されました。')
    return x + y
```

```.sampmodB.py
def calc_mult(x, y):
    print('sampmodBモジュール内のcalc_mult関数が呼び出されました。')
    return x * y
```

##パッケージ内にあるモジュールのインポート
次にパッケージ内にあるモジュールをインポートすることを考えます。一般的には以下のように指定します。（いくつか方法があります）
**【方法1】**

```.py
import パッケージ名.モジュール名
```
この方法だと、関数を呼び出す際に、**「パッケージ名.モジュール名.関数名」**という指定となり、毎回、パッケージ名とモジュール名を記載するため、コードが煩雑になります。

**【方法2】**

```.py
from パッケージ名.モジュール名 import 関数名（または変数名）
```
この方法は、パッケージ内のモジュールから、ある関数だけ（変数だけ）を読み込むことができます。これにより、別ファイルから実行する際にも、関数名を指定するだけでパッケージ内のモジュールにある関数を呼び出せます。

次にパッケージにある上記2つのモジュールを実際にインポートします。今回は**【方法2】**のやり方でインポートをします。

**Python Console**から以下のコードを入力してください。

```.py
>>> from pkg.sampmodA import calc_plus
>>> from pkg.sampmodB import calc_mult
>>> calc_plus(10, 20)
sampmodAモジュール内のcalc_plus関数が呼び出されました。
30
>>> calc_mult(10, 20)
sampmodBモジュール内のcalc_mult関数が呼び出されました。
200
```

これにより、パッケージ内のモジュールのインポートができたことを確認できたかと思います。

##最後に
パッケージのインポートについて触れましたが、これについても今後外部モジュール（ライブラリ）をパッケージから読み込む際に必ず必要なものとなります。
今回は自分でパッケージを作成し、さらにモジュールを自分で作成してそれをインポートについてして実行させましたが、自作するということはほとんどありません。今後は外部にあるパッケージ内のモジュールをインポートすることがほとんどだと思います。
この節で、パッケージ内のモジュールのインポートの仕方についてはしっかり身に着けてください。

###[【目次リンク】へ戻る](https://qiita.com/ko0821/items/379e8bd9e6ea01089419)
tkinterで設定できる色一覧（備忘録）

##きっかけ

Pythonでちょっとしたアプリケーションを作成しておりまして。

UIにtkinterを採用して、実装を進めていたのですが、20年前のWindowsアプリケーション（VBとか）を彷彿とさせるデザインにしかならない。。。

ってことでせめて色だけでもいい感じにしようと考えたのですが、なんとRGBが使えない！？
Tkinter特有の配色用の定数があるそうで。。。

**2020/07/01 追記：
　どうやら、普通に色指定できるようですね。。。
　http://memopy.hatenadiary.jp/entry/2017/06/11/092554
　https://qiita.com/kuchida1981/items/ae04ded652bfc92a5e7e
　なんで見つけられなかったのかが不思議。。。**

　

##参考サイト１

一覧を検索してHitしたのがこのページ：
https://www.tcl.tk/man/tcl8.4/TkCmd/colors.htm


テキストベースで一覧化されてますが、非常に分かりにくい。
そうだ、もう見やすくしてしまおう！

##定数と色一覧

Excel VBAを使って、色を確認できるようにしました。
結果を画像にしましたので、ご参考までに。


※Uploadした画像は、Qiitaで勝手に圧縮（？）した画像へのリンクに変わってしまっております。
画像ファイルがしっかり見たい方は、以下URLをクリックして下さい。

[https://www.zero-one-system.co.jp/wp-content/uploads/2021/12/tkinter_colors.png](https://www.zero-one-system.co.jp/wp-content/uploads/2021/12/tkinter_colors.png)

![tkinter_colors.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/f6b49136-a44c-b2ea-e21e-98be50d0164e.png)






##参考サイト２
色々探した結果、上の画像を作り終えたあとに、以下サイトを発見しました：
https://stackoverflow.com/questions/4969543/colour-chart-for-tkinter-and-tix


Pythonコードを実行すれば、全部確認できるようです。



##Excel VBAについて

完全におまけですが、載っけておきます。

VBAコード：

```GenerateColor.xlsm


Private Sub CommandButton1_Click()
    ' 変数定義
    Dim n_row_st As Integer
    Dim n_col_nm As Integer
    Dim n_col_r As Integer
    Dim n_col_g As Integer
    Dim n_col_b As Integer
    
    Dim n_col_bg As Integer
    
    Dim i, n, m As Integer
    
    ' 変数設定
    n_row_st = 5
    n_col_nm = 2
    n_col_r = 3
    n_col_g = 4
    n_col_b = 5
    n_col_bg = 7
    
    ' 背景色をRGBから取得して設定する
    i = 0
    Do Until Cells(n_row_st + i, n_col_nm).Value = ""
        Cells(n_row_st + i, n_col_bg).Interior.Color = _
            RGB(Cells(n_row_st + i, n_col_r).Value _
               , Cells(n_row_st + i, n_col_g).Value _
               , Cells(n_row_st + i, n_col_b).Value)
        i = i + 1
    Loop
    
    ' 終わり
    Call MsgBox("OK")
    
End Sub


```


もし、こんなVBAを欲しい方がいれば、コメント等で一言下さいな。どっかにUPしますので。
Google Spread Sheet でURLだけを抜き出す方法

# 正規表現をつかいます

```
=REGEXEXTRACT(テキスト, 正規表現)
```

## URLの判定につかう正規表現

```
https?://[-_.!~*'()a-zA-Z0-9;/?:@&=+$,]+)
```

# せっかくなので判定もさせる

```
=IFERROR(値, [エラー値])
```

# 組み合わせる

```
=IFERROR(REGEXEXTRACT(A1,"(https?://[-_.!~*'()a-zA-Z0-9;/?:@&=+$,]+)"),"無し")
```

### 参考

- [googleスプレッドシートの関数を使ってURLとドメイン抽出](https://anfty.com/index/archives/1117/)
- [Googleスプレッドシートの正規表現でルートドメインを抽出する
](https://stackoverrun.com/ja/q/11419053)


### あとがき

スプレッドシート結構面白いです。
久し振りに頭使った感ありました。
print関数の便利な変数をデフォルト指定して活用する


# `print`関数にはいくつかの便利なオプションがある

```py:
# スペース以外で接続する
print("xxx", "yyyy", "zzzz", sep="-") # xxx-yyyy-zzzz

# 改行しない（改行コード以外で終わる）
print("xxx", end=" ")
print("yyyy", end=" ")
print("zzzz", end=" ") # xxx yyyy zzzz

# print実行時に強制的に出力させる
print("xxx", flush=True)
```

特に最後の`flush=True`は、`python xxx.py > out.log`のように出力ファイルを指定した時に、出力がなかなか書き込まれないデフォルト設定が解消される。

# 毎回オプションを入力するのが面倒

長いコードで複数箇所に`print()`があるといちいちオプションを追加するのが面倒くさい。
そんなときは、関数への部分入力を行う`functools.partial`を使う。

```py:
import functools
print = functools.partial(print, flush=True)
```

これで、`print()`のなかで常に`flush=True`の状態になる。

念のため動作確認。

```py:print_test.py
import time
# import functools
# print = functools.partial(print, flush=True)

for i in range(100):
    print(i)
    time.sleep(1)
```

このコードを、`python print_test.py > out.log`のように実行する。コメントアウトの部分を含めるか否かで、コード実行時にout.logが逐次更新されるかされないかが変わる。

# 編集後記

本記事を書いたら関連記事でコンソール出力の上書きが簡単にできる（[リンク](https://qiita.com/jabberwocky0139/items/b21ea53072fad1580f3d)）ことを知ったのでやってみた。

```py:print_test-console.py
import time
import functools
print = functools.partial(print, end="\r")

for i in range(100):
    print(i)
    time.sleep(1)
```

これで1秒ごとにコンソール出力の数字が上書きされる。すごい。
（ファイル出力では改行になってしまうので注意。）
Android + ViewPager2で特定のページ(ポジション)を最初に表示する

## 概要
ViewPager2を使ってカレンダーの実装をしていたのですが、みなさんもご存知だと思うのですがカレンダーは先の月だけではなく前の月もスクロールしたら見れますよね？
それを実装するためにはViewPagerで真ん中辺りのページを開く必要があったのでその方法を記載します。

## 試してだめだったこと

ViewPager2について調べてみると、currentItemなるものがあり、そちらが現在のItem（ページ）を示すみたいだったので、そこの値をかえればいいのでは？と思い

```MainActivity.kt
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        super.onCreate(savedInstanceState)
//        setContentView(R.layout.activity_main)

        val pager = ScreenSlidePagerAdapter(this)
        binding.pager.adapter = pager
        //ここで指定
        binding.pager.currentItem = 4
    }

    private inner class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
        override fun getItemCount(): Int = Int.MAX_VALUE

        override fun createFragment(position: Int): Fragment = CalendarFragment(position)
    }
```

一旦このように実装してみたのですが、起動してみると一番最初のページスタートになってしまいました...


## 成功した例

そこで色々調べてみると、ただcurrentItemの値を返るだけではだめなようで、オプションも設定する必要があるとのこと。
https://stackoverflow.com/questions/56311862/viewpager2-default-position
ここの記事では時間を開けて処理を実行してるのですが、おそらくそれはする必要がなく

```kotlin
        binding.pager.setCurrentItem(4, false)
```
こんな感じで特定のページを指定してあげるだけで良さそう。

## 実行結果

<img width="358" alt="スクリーンショット 2020-06-26 23.43.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/d2a315b6-0b36-a824-9f4f-1a195d08d5be.png">

昨日の記事を読んでいた方にはわかると思うのですが、月を表示するようにしたところ10月スタートになりました。(ただこれでは困るので6月の状態で途中スタートにしたい)


## (+α)月の表示調節

カレンダーはほぼ無限スクロールなので開始位置はIntのMAX_VALUEの半分スタートにします。

```MainActivity.kt
binding.pager.setCurrentItem(Int.MAX_VALUE / 2, false)
```

そしてフラグメントの方で今月(6月)を真ん中に表示しつつ月のラベルを渡すには

```CalendarFragment.kt
        val default = Int.MAX_VALUE / 2
        binding = FragmentCalendarBinding.inflate(inflater, container, false)
        inflater.inflate(R.layout.fragment_calendar, container, false)
        val calendar = Calendar.getInstance()
        val year = 2019
        val month = 6
        val minDay = 1
        calendar.set(year, month, 1)
        calendar.add(Calendar.MONTH, position - default)
        val maxDay = calendar.getActualMaximum(Calendar.DAY_OF_MONTH)
        val blankDays = calendar.get(Calendar.DAY_OF_WEEK)

        val dayArray: MutableList<String> = mutableListOf()
        for (i in minDay until blankDays) {
            dayArray.add("")
        }
        for (i in minDay..maxDay) {
            dayArray.add(i.toString())
        }
        binding.date = dayArray.toTypedArray()
        binding.monthData = (((month - 1 + (position - default)) % 12) + 1).toString() + "月"

        return binding.root
```

こんな感じに書けばよいかと。

## 最終的な実行結果

![無限スクロール_.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/11b481bd-b841-89b9-0fc7-96662d77c4f8.gif)

左右にスクロールでき、ちゃんと月も正しい値になりました！！
Raspberry Pi 4 Model B への Zabbix 5.0 インストール

# Raspberry Pi 4 Model B への Zabbix 5.0 インストール

## Zabbix Server 、フロントエンド、Agent のインストール
```
$ sudo wget https://repo.zabbix.com/zabbix/5.0/raspbian/pool/main/z/zabbix-release/zabbix-release_5.0-1+$(lsb_release -sc)_all.deb
$ sudo dpkg -i zabbix-release_5.0-1+$(lsb_release -sc)_all.deb
$ sudo apt update
$ sudo apt -y install zabbix-server-mysql zabbix-frontend-php zabbix-apache-conf zabbix-agent
```

## MySQL の設定

### パスワードの設定

「root DB password」の箇所に自分のパスワードを入力する。

```
$ sudo mysql_secure_installation

Enter current password for root (enter for none): Press the Enter
Set root password? [Y/n]: Y
New password: <Enter root DB password>
Re-enter new password: <Repeat root DB password>
Remove anonymous users? [Y/n]: Y
Disallow root login remotely? [Y/n]: Y
Remove test database and access to it? [Y/n]:  Y
Reload privilege tables now? [Y/n]:  Y
```

### データベースの作成
```
$ sudo mysql -uroot -p'rootDBpass'
mysql> create database zabbix CHARACTER SET UTF8 collate utf8_bin;;
mysql> grant all privileges on zabbix.* to zabbix@localhost identified by 'zabbixDBpass';
mysql> quit;
```

### 
```
$ zcat /usr/share/doc/zabbix-server-mysql*/create.sql.gz | mysql -uzabbix -p'zabbixDBpass' zabbix
```

### Zabbix Server の設定ファイルにデータベースの設定を加える

"sudo nano /etc/zabbix/zabbix_server.conf" で zabbix_server.conf に以下の設定を加える。

```
DBPassword=zabbixDBpass
```

### Zabbix Server の管理画面のフォントを変更
```
$ sudo apt install fonts-noto-cjk
$ cd /etc/alternatives/
$ sudo ln -sf /usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc zabbix-frontend-font
```

### Zabbix Server と Agent の開始
```
$ sudo systemctl restart zabbix-server zabbix-agent
$ sudo systemctl enable zabbix-server zabbix-agent
```

## Apache のインストール、設定
### Apache のインストール
```
$ sudo apt install apache2
```
### Zabbix 設定ファイルのタイムゾーン設定
”sudo nano /etc/zabbix/apache.conf” で apache.conf の以下の一文を更新する。

変更前：#php_value date.timezone Europe/Riga
変更後：php_value date.timezone Asia/Tokyo

### Apache を再起動し、OS起動時も自動起動するようにする。
```
$ sudo systemctl restart apache2
$ sudo systemctl enable apache2
```

### ブラウザで Zabbix Server にアクセスする。
http://server_ip_or_name/zabbix 

OKを押していくとログイン画面になるので、次のユーザ名でログインする。

Username: Admin
Password: zabbix

## Raspberry Pi 4 Model B の CPU温度も監視する。

### zabbix_agentd.conf の編集
"sudo nano /etc/zabbix/zabbix_agentd.conf"

```
UserParameter=system.cpu.temperature,cat /sys/class/thermal/thermal_zone0/temp
```

### Zabbix のアイテム追加
- Zabbix 管理画面に、管理者権限でログイン
- 「設定」→「ホスト」をクリック
- 設定を追加するホストの「アイテム」をクリック
- 画面右上「アイテムの作成」をクリック

| 項目  | 値 |
|:--|:--|
| 名前  | CPU temperature |
| タイプ  | Zabbixエージェント |
| キー  | system.cpu.temperature|
| データ型  | 数値(浮動小数) |
| 単位  | ℃ |
| 乗数を使用  | 0.001 |

-「追加」をクリック。エラーが発生せず「アイテムを追加しました」と表示されることを確認 

### グラフを追加

- 「設定」→「ホスト」をクリック
- 設定を追加するホストの「グラフ」をクリック
- 画面右上「グラフの作成」をクリック

| 項目  | 値 |
|:--|:--|
| 名前  | CPU temperature |
| アイテム  | CPU temperature |

- 「アイテム」は「追加」をクリックして該当アイテムを選択
- 「追加」をクリック
iOS 開発初心者による Xcode におけるビルドの使い分け

iOS 開発者の皆さん、 **ビルド** 、してますか！？ (当たり前)
ビルド待ちって筋トレしたくなるくらい暇な時間ですよね。

ビルド待ちの間についつい Twitter や Slack 見てて、気づいたら夜だったなんてこともあったりなかったり。

僕は iOS 開発を初めて 2 ヶ月の初心者ですが、そんな僕から「**ビルドの使い分け**」をシェアしたいです。
最初は **⌘ + R** しか知らなかった僕ですが、今ではその他に **2 つのビルド方法** を使い分けています。

## 本題

今日紹介するビルド方法は以下の 3 つです。

- ⌘ + R (`Run`)
- ⌘ + ⇧ + R (`Build for Running`)
- ⌘ + ⌃ + R (`Run without Building`)

この 3 つがあれば、以下のような使い分けができます。

- `Run`: ビルドして、実機 or シミュレータで動作を確認したいとき
- `Build for Running`: ビルドだけして、動作確認はしないとき
- `Run without Building`: ビルドはせずに、実機 or シミュレータによる動作の確認だけしたいとき

これで UseCase に応じてキーボードショートカットを覚えて帰っていただいても大いに結構なのですが、せっかくなのでそれぞれがどんなことをしているかを軽く説明しときます。

### ⌘ + ⇧ + R (`Build for Running`)
順番が最初と違いますが、まずはこれから。
ここでは **ビルドのみ** 行います。

ビルドとは、コンパイルしたりレジスタを初期化したりゴニョゴニョやる **下準備** みたいなものです。
これに関してもっと理解したい方は [この記事](https://qiita.com/shiz/items/b8d5126210de736d7986) が参考になります。
ざっくり、コードを変更したら必要になるのがビルドです。

そして、 "Build Succeeded" となって成功する or "Build Faild" となると失敗して終了です。

どんな時に使うかと言うと、

- コードを変更してとりあえずコンパイルだけしたいとき (エラーが出ないかだけ確認したい)
- 見た目に関する変更が無くて実機 or シミュレータによる動作確認が不要なとき

に使っています。
次、 ⌘ + ⌃ + R (`Run without Building`) を説明します。

### ⌘ + ⌃ + R (`Run without Building`)
これは知らなかった人は是非知ってください。
なんと **ビルド待ち時間が 0** になります。やばいですよね。

このコマンドでは、 `Run without Building` から分かるように、 **ビルドをしません**。
なのでビルド待ちが 0 になるわけです。

じゃあ何をするかというと、 **前回成功したビルド結果を元に実行** します。
ここでの実行とは、実機やシミュレータで動作確認することです。
前回成功したビルドなので、**どれだけコードを変更しても反映されません**。
ここだけは注意して使い分けて下さい。

このコマンドは必ず成功して実行されますが、それはあなたが追加・変更したコードがうまく行っていることとは無関係ということです。

どんな時に使うかと言うと、

- 実行したがクラッシュしてもう一度実行したいとき
- とりあえず実機による動作確認がしたいとき

などです。「前回のビルド結果でいいから実行したいとき」ですね。

### ⌘ + R (`Run`)
最後、一番知られてるやつです。
Xcode 画面左上の ▶ 押して実行するやつです。

このコマンドでは、 **ビルド + 実行** をしています。
今回紹介した中では最も時間がかかる処理です。
ビルド + 実行なので、先に紹介した 2 つのコマンドを直列実行しているということですね。

このコマンドは、

- コードを変更し、その変更を動作確認したいとき

などに使います。

## おまけ
ここでは、 `Run` に関するコマンドでしたが、`R` を `U` に変えるとユニットテストに全く同じ感覚で使えます。
さらに `R` を `I` に変えると Profiling とかいう謎のことにも使えるそうです。僕は使ったことないです。

## まとめ

まとめると以下のようになります。

| ショートカット | コマンド名 | 動作 | 使用例 |
|:--|:--|:--|:--|
|⌘ + ⇧ + R|`Build for Running`|ビルドのみ|とりあえずコンパイルだけしたいとき|
|⌘ + ⌃ + R|`Run without Building`|実行のみ|とりあえず実機による動作確認がしたいとき|
|⌘ + R|`Run`|ビルド + 実行|コードを変更し、その変更を動作確認したいとき|

使い分けてビルド待ちを最小にしましょう！！
くれぐれもビルド待ち中に筋トレしすぎてムキムキにならないように！！
[Java]メソッド

#メソッド定義
`public static void メソッド名(){処理;}`

```java
public static void hello() {
  System.out.println("hello world");
}
```

#オーバーロード
`引数の型、個数を変えることで可能`
同じメソッド名で引数が違う

```java
public static void hello() {
  System.out.println("hello world");
}

public static void hello(String name) {
  System.out.println("こんにちは" + name + "さん");
}
```
【Auth0】パスワードポリシー設定の内容

# はじめに
Auth0で設定できるパスワードポリシーの内容を紹介します。

# パスワードポリシー設定画面
管理画面の`Database`メニュー内の任意のデータベースを選択して`Password Policy`タブを開きます。

<img width="895" alt="スクリーンショット 2020-06-26 23.16.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/10d24d3c-d58a-8a96-de73-cf6e82076229.png">

この画面でパスワードポリシーに関する以下4項目が設定できます。

* Password Strength
* Password History
* Password Dictionary
* Personal Data

# パスワードの強度設定

<img width="682" alt="スクリーンショット 2020-06-26 23.21.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/1e0148f4-9008-8a52-df91-5bb93c0814d3.png">

パスワードの強度のポリシーを5段階で設定できます。
バーを上下するだけで簡単に設定が可能で強度に応じて`Excellet`、`Good`、`Fair`、`Low`、`None`と評価が変わります。

# 過去使用済みのパスワードの利用禁止

<img width="682" alt="スクリーンショット 2020-06-26 23.39.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/07f31ac3-d403-1a18-642f-bb5f3b2e4b94.png">

トグルスイッチをONにすると過去に使用済みのパスワードを再設定ができないようになります。
過去のパスワードの履歴の数も設定可能で最大24まで設定できます。

# 辞書に載っているパスワードの利用禁止
<img width="682" alt="スクリーンショット 2020-06-26 23.39.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/6f474028-b489-5972-9259-70b2c160a1e5.png">

トグルスイッチをONにすると利用されることの多いパスワードを集めた辞書に存在するパスワードが利用できなくなります。
辞書は以下で公開されています。
https://github.com/danielmiessler/SecLists/blob/master/Passwords/Common-Credentials/10k-most-common.txt

フォームに追加の辞書を入力することもできます。
標準の辞書に加えてフォームに記載したパスワードも使用できなくなります。

# 個人データを含むパスワードの利用禁止
<img width="682" alt="スクリーンショット 2020-06-26 23.40.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653972/1ec43e5a-4fd6-0381-ea3d-20eb14eacdb7.png">

トグルスイッチをONにすると以下のユーザー情報を含むパスワードが利用できなくなります。

* name
* username
* nickname
* user_metadata.name
* user_metadata.first
* user_metadata.last

上記以外にもメールアドレスの`@`よりも前の部分もパスワードに含めることができなくなります。

# おわりに
Auth0では柔軟なパスワードポリシー設定が可能です。
Auth0を利用するときは必ずパスワードポリシー設定を検討することをおすすめします。
バイオインフォ備忘録 | PANTHERを使ったGO解析

GOとはgene ontologyの略で、遺伝子につけられるアノテーション。生物学的プロセス、細胞内の構成要素、分子機能とGOにはいくつか種類があり、一つの遺伝子は複数のGOを持つ。

# PANTHERでGO解析

とある解析をして得られた酵母の遺伝子名のリスト sample_geneid.txt がある。
このリストに列挙された遺伝子名の機能には、酵母の全体と比較して偏りがあるのか調べる。

``` :sample_gene.txt
yal025c
yal038w
yal044c
yal061w
yar009c
   ・
   ・
   ・
```
PANTHER | http://www.pantherdb.org/
! 注意: ブラウザバックすると挙動が狂う

#### トップページでの操作 | サンプルのアップロードと解析方法

1.遺伝子名が列挙されたファイルをアップロードする。フォームに直接貼り付けても良い。
2.種名を選ぶ
3.解析方法を選ぶ。機能の偏りを見るときは statistical overrepresentation test 
4.submit

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380579/1602b3e8-3321-fd0c-bf1b-2b0e1bba8772.png)


#### 2ページ目 | reference list の選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380579/be93728c-ad33-4517-5bad-cba4e7fcebc1.png)

左側はデフォルトで良い。下か右上の方にreference list のアップロード欄がある。
reference list のGOとサンプルのリストのGOを比較してサンプルのGOの偏りを調べるので、基本はサンプルのリストと同じ種を選択する。

#### 3ページ目 | テストのパラメータの設定
3ページ目ではデフォルトでLaunch analysisをする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380579/3a558378-8a51-7174-21df-bb0a19493010.png)


Test typeで検定の種類を選べる。Correctionはおそらく多重検定の方法で、FDRを用いるかボンフェローニ法で多重補正するかを選べる。



Launch analysis をした後に下のtableから結果をダウンロードできる。GOを記した長い文字列と数字のtsvになっててそのままだとわかりづらいが、だいたいこんな構造になってる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380579/79b7e20f-36d2-8e41-87d4-71c2c1e113eb.png)

同ページでブラウザで結果を見れる。(ボンフェローニ法で多重補正した結果なのでFDR列はない )
1列目: Gene Ontology
2列目: そのGOに属するリファレンスリストの遺伝子数
3列目: そのGOに属するサンプルリストの遺伝子数
4列目: リファレンスリストから推定される、そのGOに属するサンプルリストの遺伝子数(期待値)
5列目: 観察値/期待値の値
6列目: 観察値が期待値より大きければ + 少なければ - 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380579/0c5d4b2f-c373-4c1a-8505-fca5d4848cbf.png)



GO は完璧なアノテーションではないけど一つの理解として便利ですね。
Vue-CLIで複数テストフォルダをまとめて実施対象にする

# 概要

Vue-CLIのテストコード格納フォルダを次の2つに分けてる際に、これをまとめてテストする方法。
と言う、極ニッチな要求にこたえるメモ

* tests/unit
* tests/utils

通常の「`"test:unit": "vue-cli-service test:unit"`」指定だと、tests/unit だけがテスト実行対象になる。
`"tests/utils"` の方は、Vueファイルじゃなくてjsファイルのみをテストするケースを格納している。

なお、公式を見れば答えは載っている。
https://cli.vuejs.org/core-plugins/unit-mocha.html#injected-commands
https://sysgears.github.io/mochapack/docs/installation/cli-usage.html

# 解決方法

次のようにすればよい。

`"test:all": "vue-cli-service test:unit tests/**/*.spec.js"`

これで、testsフォルダ配下が全部テスト実行の対象になる。

なお私は、あえて分けて実行したいときがあるので、次のように設定してる。

```package.json
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:mocha-no-vue": "cross-env NODE_ENV=test mocha --require @babel/register --recursive tests/utils/*spec.js",
    "test:mocha": "npm run test:mocha-no-vue",
    "test:all": "vue-cli-service test:unit tests/**/*.spec.js",
    "lint": "vue-cli-service lint"
  },
```

# オマケ

Vue-CLIで、Vueファイルを除いてjsファイルのみをテストしたいときは、VueコンパイルせずにBabelコンパイルのみ実施してMochaると早い。

`"test:mocha-no-vue": "cross-env NODE_ENV=test mocha --require @babel/register --recursive tests/utils/*spec.js"`

Vue-CLIに対して追加すべきパッケージは以下。

`npm install cross-env @babel/register --save-dev`

ルートに置く、Babelコンパイル用の設定ファイルは次のようにする。

```babel.config.js
module.exports = (api) => {
    return {
        presets: api.env('test') ? [
            [
                '@babel/preset-env', 
                {
                "targets": 
                    {
                        "node": "current"
                    }
                }
            ]
        ] : [
            '@vue/app'
        ]
    }
}
```
スタートアップフォルダを開くVBScript

　スタートアップフォルダに入れたショートカットは、パソコンの起動時に自動で立ち上がってくれるので、朝忘れずにしたい作業があるとき便利ですよね。
　しかし、Windows10になってから、スタートアップフォルダが見つけにくくなりました。
　見つけられなくてスタートアップフォルダを使わなくなった人が会社に一定数いたので、誰でもユーザーのスタートアップフォルダにアクセスできるようにVBScriptを書きました。

```vb:VBScript

Dim wShell,startUpFolderPath
Set wShell = CreateObject("wscript.shell")
startUpFolderPath=wShell.SpecialFolders.Item("Startup")

Dim shellApp
Set shellApp = CreateObject("Shell.Application")
shellApp.Explore startUpFolderPath
wShell.popup "スタートアップフォルダを開きました", 1,"VBScript", vbInformation
```
　実行すると、エクスプローラーでスタートアップフォルダを開きます。
ポートフォリオの開発日記4

今日は、ユーザ登録のページのバリデーション周りを実装した。
バリデーションライブラリがReactのclass構文では使えないため、やむえずスクラッチ実装することにした。
そのため、とても冗長なソース量になった。
ある程度機能を実装出来たら、別のバリデーションライブラリを探して、リファクタリングをしようと思う
HHKBをMacモードのままＷinで使う方法(英数、かなキー)

macのキーバインドに慣れすぎてWinが操作しずらくなったのでキーバインドをMac風に設定しました。

やることは簡単です。
https://www.autohotkey.com/
をインストールして設定するだけの簡単なお仕事…

じゃなかったので解説していきます。

# インストール
https://www.autohotkey.com/download/1.1/
から
AutoHotkey_1.1.26.01_setup.exeをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403521/96ec884b-b330-1956-4660-8a602b32e7ea.png)
※古いバージョンじゃないとこれから設定するファイルが動かないので1.1.26.01を入れています。

そのあとは適当に進めてください。

# 設定
適当なディレクトリに
XXX.ahkというファイルを作成してその中に

```
; タスクビューのバインド
LWin::#Tab
; 上で埋まったwinキーのバインド
LAlt::LWin

; スペースキーの左右をそれぞれ無変換、変換キーにバインド
*sc071 up::
SetKeyDelay -1
    Send {Blind}{vk1Dsc07B DownTemp}
Return

*sc072 up::
SetKeyDelay -1
    Send {Blind}{vk1Csc079 DownTemp}
Return
```
と追記して保存。

そして実行。

# IMEの設定
https://dtptransit.design/misc/windows/customize-keyboards-for-Japanese-input-method.html
を参考にして無変換キーはIMEオフ、変換キーはIMEオンにそれぞれ設定。

これでHHKBがMacモードのままWinでMacのバインドで快適に使えます。
まじで神。

# あとがき
バインドのところでつまりまくったので備忘録として。
結構WinとMacで同じHHKB使ってる人いると思うのでその方の役に立てればと。

これでぜひ快適なHHKBライフを！！

# 参考リンク
https://hyrorre.com/post/bootcampautohotkey/
https://dtptransit.design/misc/windows/customize-keyboards-for-Japanese-input-method.html
React-TypeScriptへ移行しむずしかったこと

# ReactをTypeScriptで記述した際に難しかったことについて

初めましてQiita初投稿です。<br>
初心者がReactをTypeScriptで記述した際に難しかったことについてまとめてみました。

### 複雑なデータの型定義
外部のAPIからデータを取得する際に取得するAPIのデータの型の定義に苦戦しました。

```sample
{
  0: {
    id: 1,
    name: 'sample',
    text: 'Hello World'
  }
}
```

このようなデータの型の定義の仕方に苦戦しました。<br>
私は`Type`や`interface`を用いて型の定義をしてみようとしていましたが、上手くできませんでした。

```type.ts
type ChildData = {
  id: number;
  name: string;
  text: string;
}

type ParentData = {
  [data:string] : ChildData
}
```
[stack overflow](https://stackoverflow.com/questions/35435042/how-can-i-define-an-array-of-objects)で解決策をいただきました。<br>
このように複雑なデータの型は分解して定義をするのが良いと分かりました。

### Reactのイベントの型
Reactでイベントを扱う場合には型が必要だと知らずにはじめたので最初は戸惑いました。

```sample.tsx
  const addState = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState(e.targer.value)
  }
```


`React.ChangeEvent<HTMLInputElement>`について最初は分かりませんでした。<br>
現在はイベントに対して型が必要だと理解しています。DOMのイベントの型を定義しているという認識です。


### tsconfig.json
初めて`tsconfig.json`を見たときは意味が分かりませんでした。
TypeScriptの設定を記述するファイルだと認識しています。
まだ理解できていないところが多いです。現在は`tsconfig.json`を編集せずに開発をしていますが、今後は`any`を使えないように設定して開発をしてみたいと考えています。
[WinForms] XAML Islands を使用する

・ 実行環境
エディション: Windows 10 Pro
バージョン: 2004
OS ビルド: 19041.264

・開発環境
ワークロード: .NET デスクトップ開発
インストールの詳細: .NET Framework 4.8 開発ツール

・プロジェクト テンプレート
Windows フォーム アプリケーション (.NET Framework)

# 0. NuGet で Microsoft.Toolkit.Forms.UI.XamlHost をインストールする。

# 1. WindowsXamlHostをデザイナで貼り付けようとする。

```
---------------------------
Microsoft Visual Studio
---------------------------
コンポーネント 'WindowsXamlHost' を生成できませんでした。  エラー メッセージ:

 'System.TypeLoadException: Windows ランタイム型 'Microsoft.Toolkit.Win32.UI.XamlHost.IXamlMetadataContainer' が見つかりませんでした。

   場所 Microsoft.Toolkit.Forms.UI.XamlHost.WindowsXamlHostBase..cctor()'
---------------------------
OK   
---------------------------

```
上記のエラーが発生しました。しかし、これを解消する方法は見つかりませんでした。

# 2-1. デザイナを使用せずに直接コードを記述する。

```C#
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        Microsoft.Toolkit.Forms.UI.XamlHost.WindowsXamlHost wxh = new Microsoft.Toolkit.Forms.UI.XamlHost.WindowsXamlHost();
    }
}
```
以下のエラーが発生しました。

```
WindowsXamlManager and DesktopWindowXamlSource are supported for apps targeting Windows version 10.0.18226.0 and later. 
Please check either the application manifest or package manifest and ensure the MaxTestedVersion property is updated.
```
上記エラーをぐぐると以下の様な情報にヒットします。
[Using XAML Islands on Windows 10 19H1](https://techcommunity.microsoft.com/t5/windows-dev-appconsult/using-xaml-islands-on-windows-10-19h1-fixing-the-quot/ba-p/376330)
[Windows-toolkit/Microsoft.Toolkit.Win32 issues #76](https://github.com/windows-toolkit/Microsoft.Toolkit.Win32/issues/76)

1) 「アプリケーション マニフェスト ファイル」を追加する
2) 「assembly -> compatibility -> application」の下に以下コードを追加する

```XML
<!-- Windows 10 -->
<maxversiontested Id="10.0.18358.0"/>
<supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />
```

とすれば良いと読み取れた。

# 2-2-1. 「アプリケーション マニフェスト ファイル」を追加する。

なぜかこの段階でエラーが発生しなくなりました。

# 2-2-2. 「assembly -> compatibility -> application」に追加する。

「2-2-1.」ですでに問題は解消しているため変化は無しです。

OSビルドが「10.0.18358.0」であったときの記事を参考にしているため、
今回の環境では不要なのかもしれないです。(詳細を調べ切れず原因は不明)

# 3. その他、注意点

LTSC版のWindows 10は、最新バージョンが1809(OSビルド:17763.1282)のため、
この機能は動作しませんでした。

大元の手順は以下のサイトを参考にさせて頂きました。
[Windows フォームアプリケーションで最新機能に対応する XAML Islands](https://rksoftware.hatenablog.com/entry/2019/01/03/214645)
[XAML Islands の Windows Community Toolkit でラップされたコントロール (WinForms編)](https://rksoftware.hatenablog.com/entry/2019/01/24/051445)
非技術者と会話するときに使える一見意味深な言葉

非技術者と会話するときに使える知らない人にとっては一見深い意味がありそうなかっこいい言葉集。

## 言ってみたいだけ

[技術的負債](https://bliki-ja.github.io/TechnicalDebt/)
なにか修正を渋るときに原因を過去の遺産の責任にできるかもしれない

[銀の弾丸はない](https://ja.wikipedia.org/wiki/%E9%8A%80%E3%81%AE%E5%BC%BE%E3%81%AA%E3%81%A9%E3%81%AA%E3%81%84)
何度目かのログ取得を頼む際にさもそれに意味があるかのように説明できるかもしれない

[許可を求めるな謝罪せよ](https://kawaguti.hateblo.jp/entry/2018/08/19/070501)
不注意でやってしまったことに対してわざとだと言い張れるかもしれない

[Don't repeat yourself](https://ja.wikipedia.org/wiki/Don%27t_repeat_yourself)
書きたくないドキュメントを省く言い訳に使えるかもしれない

[YAGNI](https://ja.wikipedia.org/wiki/YAGNI)
やりたくないことを断る言い訳に使えるかもしれない


## きっとまだある

[技術系の名言まとめ++](https://qiita.com/kkyouhei/items/38ba41fb6b877f160e99)
[ソフトウェア開発の格言](https://www.slideshare.net/RyosukeMiyahara/ss-39474085)
[心に響くエンジニアの名言を挙げてみた](https://keis-software.com/2016/08/29/%E5%BF%83%E3%81%AB%E9%9F%BF%E3%81%8F%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E5%90%8D%E8%A8%80%E3%82%92%E6%8C%99%E3%81%92%E3%81%A6%E3%81%BF%E3%81%9F/)

以上、現場からただのブラックジョークです。
JSONを返すAPIのCORS対策

注：筆者は「CORS」という言葉を１日前に知ったレベルです。

CORSを許可していなくても、APIにURLで直接アクセスした場合、データを取得できました。
(なんで？)

|CORS|禁止|許可|
|----|:----:|:----:|
|URLで直接(GET)|〇|〇|
|同鯖(fetch+GET)|〇|〇|
|同鯖(fetch+POST)|〇|〇|
|他鯖(fetch+GET)|×|〇|
|他鯖(fetch+POST)|×|〇|

上記の条件がすべてだと仮定した場合、
 
|CORS|禁止+POST|許可+POST|
|----|:----:|:----:|
|URLで直接(GET)|×|×|
|同鯖(fetch+GET)|×|×|
|同鯖(fetch+POST)|〇|〇|
|他鯖(fetch+GET)|×|×|
|他鯖(fetch+POST)|×|〇|

「POST」に限定すれば思い通りにアクセス制限できるかなと思いました。
(まだ調べ切れていないがメモのためにこの記事を書きました)

大元のコードは以下の動画を参考にさせていただきました。
[JavaScript入門#9 @しまぶーのIT大学](https://www.youtube.com/watch?v=Oi38X7mNixE)

テストデータは以下のサイトで生成させていただきました。
[テストデータ・ジェネレータ](https://yamagata.int21h.jp/tool/testdata/)

# index.html
```HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <ol id="lists"></ol>
    <button id="btnAdd">もっと</button>

    <script src="index.js"></script>
  </body>
</html>
```
# index.js
```JS
const button = document.getElementById("btnAdd");
const lists = document.getElementById("lists");

let _page = 0;

function addList(user) {
  const list = document.createElement("li");
  list.innerText = user.name;
  lists.appendChild(list);
}

async function getUsers() {
  const res = await fetch("https://u0001.shop/json.php?p=" + _page++, { method: "POST" });
  const users = await res.json();
  console.log(users);
  return users;
}

async function listUsers() {
  const users = await getUsers();

  if(users != false)
    users.forEach(addList);
}

window.addEventListener("load", listUsers);
button.addEventListener("click", listUsers);
```
# json.php
```PHP
<?php

require_once("./vars/vars.php");

if($_SERVER["REQUEST_METHOD"] == "GET"){
	$array = [
	    ["id" => "-1","name" => "Could not get data.","time" => "2000-01-01 00:00:00.000000"],
	    ["id" => "-2","name" => "Could not get data.","time" => "2000-01-01 00:00:00.000000"],
	    ["id" => "-3","name" => "Could not get data.","time" => "2000-01-01 00:00:00.000000"],
	];

	echo json_encode($array);

} else { // POST
	function get_connection()
	{
		return pg_connect(CONNECTION_STRING);
	}

	$con = get_connection();
	$result = pg_query($con, "SELECT * FROM profile LIMIT 10 OFFSET ".pg_escape_string($_GET["p"] * 10).";") or die("not work".pg_last_error());
	pg_close($con);
	echo json_encode(pg_fetch_all($result));
}

?>
```

# SQL(PostgreSQL)
```SQL
CREATE TABLE profile (
  id SERIAL PRIMARY KEY, 
  name VARCHAR(256),
  time TIMESTAMP WITHOUT TIME ZONE DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO profile (name) VALUES ('丹羽 幸郎');
INSERT INTO profile (name) VALUES ('庄司 忠博');
INSERT INTO profile (name) VALUES ('佐藤 希和');
...

```
Webページの読み込みが遅い対処方法

# プログラミングの勉強日記
2020年6月26日　Progate Lv.148
ポートフォリオ作成中
以前作成したWebページの読み込みに時間がかかってしまうのが気になり、ポートフォリオを作成する前にこの問題に対処する。

##読み込みが遅い原因
考えられる原因
　1. GitHubホスティングを利用して公開しているので、GitHubホスティング自体がWebページの読み込みが遅い？
　　→GitHubは関係なさそう。
　　　作成したサイトに原因がある、、

　2. 画像が原因で読み込みが遅い？
　　→たしかに多くの画像を利用しているので、これに原因があるかも！
　　　そこでlazy loadという方法を用いて解決する。

##lazy load
　多くの画像を含むWebページでは、表示速度が遅くなってしまう。HTMLでimgタグを使用して画像ファイルを読み込んでいる。この場合、ページ上のすべての画像がフルサイズで読み込まれている。しかし、下の画面の画像など現時点では必要のない画像もあるので、すべての画像を読み込む必要はない。そこで、<font color=blue>画像の遅延ロード</font>を行う。画像の遅延ロードは指定したときにユーザーの画面に画像をロードする。（スクロールの位置に応じて必要な分だけ画像を取得する）

##lazy loadの使い方
　まず、GitHub（ https://github.com/tuupola/lazyload ）からlazyload.jsとjQueryを読み込む。

```html:HTMLファイル
<!-- Google CDNからjQuryを読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- ダウンロードしたlazyload.jsの読み込み -->
<script src="js/jquery.lazyload.min.js"></script>
```

　imgのファイルパスをsrcからdata-originに変更して、遅延読み込み対象とわかるようにclassをつける。

```html:HTMLファイル
<img class="lazy" src="画像のURL" data-original="画像のURL">
```

JSファイルを読みこませた記述のあとに挿入する。

```javascript:JSファイル
$(function() {
    $('img.lazy').lazyload();
});
```

##オプション

###threshold
　読み込みのタイミングをずらしたいときに使う。マイナスの値を大きくするほど読み込みは遅くなる。

```js
$(function() {
    $('img.lazy').lazyload({
        threshold: -200
    });
});
```

###event
　画像が画像内に表示されたときではなく、指定したイベントが発生したときに表示される。
　`click`は画像をクリックしたとき、`mouseover`は画像にオンマウスしたときに表示される。

```js
$(function() {
    $('img.lazy').lazyload({
        event: 'click'
    });
});
```

###effect
　画像が表示されるときのエフェクトを設定できる。`effect_speed`を併用することで、速さも変更できる。

```js
$(function() {
    $('img.lazy').lazyload({
        effect : 'fadeIn',
        effect_speed: 2000
    });
});
```
##感想
　大量の画像を使っていたので、読み込みが遅くなっていた。lazy loadを使うことでWebページの読み込み速度を改善することができた。

##参考文献
http://cly7796.net/wp/javascript/plugin-jquery-lazyload/
https://alaki.co.jp/blog/?p=2527
Jestでモジュールの特定の関数だけモックする

Jestでモジュールをモックするのは便利ですが、モジュールの一部をモックしたい場合に困ることがあります。

```js
// my-module.js
export function foo() { ... }
export function bar() { ... } // bar だけモックしたい
```

```js
import { foo, bar } from "./my-module";

jest.mock("./my-module", () => ({
  bar: jest.fn(),
}));

describe("foo", () => {
  it("works", () => {
    expect(foo("yay")).toEqual("wow");
  });
});
```

上記のように書いた場合に、 `TypeError: foo is not a function` といったエラーになってしまいます。それを回避するには以下のように書きます。


```js
jest.mock("./my-module", () => ({
  ...jest.requireActual("./my-module"), // foo: jest.requireActual("./my-module").foo でも可
  bar: jest.fn(),
}));
```

Jest的に認められた書き方なのかは怪しいですがとりあえず `bar` をモックして `foo` はモックせず動かせます :sunglasses: 

### 参照

https://github.com/facebook/jest/issues/936#issuecomment-613220940
https://jestjs.io/docs/en/jest-object#jestrequireactualmodulename
初心者によるプログラミング学習ログ 355日目

#100日チャレンジの355日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
355日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日の作業・やったこと⇩<br><br>●読書　kindle 20分<br>●ブログ記事1記事作成<br>●プログラミング学習355日目 2h<br>・ポートフォリオのアイコンに3Dアニメーション追加<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E3%81%A4%E3%81%AA%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアとつながりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) <a href="https://twitter.com/ppmp65/status/1276516403349078018?ref_src=twsrc%5Etfw">June 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
HSPICEのデータをPythonで読み込んだ話

#はじめに
やりたかったこと。
HSPICEの中から必要なデータを読み取って機械学習などに利用するため行列演算すること。

#DeCiDaライブラリ
[DeCiDa](http://decida.org/)というPython3上で動く回路シミュレータライブラリを発見しました。
これを利用するとHSPICEの出力結果ファイルをPython上で読み込むことが可能です。
また、このライブラリを利用すると、DeCiDaから直接回路シミュレータの操作が可能であるっぽいですが、今回はデータ変換のみに利用しました。

#Code
```Python
import numpy as np
from scipy import interpolate
from decida.Data import Data

#変数の用意
d_sampling = 0.005
s_sampling = 0
e_sampling = 70

n_sampling = int((e_sampling - s_sampling)/d_sampling + 1)
time_r = np.linspace(s_sampling,e_sampling,n_sampling)

#.tr0ファイルの読み出し
d = Data()
d.read_hspice('xxx.tr0')
rows = d.nrows()
cols = d.ncols()

#必要のない列の消去
leave_cols = [0,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,42]
n_leave_cols = len(leave_cols)

for i in range( cols ):
    j = cols - i
    if not (j in leave_cols) :
        d.delete(j)
#d.delete( tuple of col_name )

#Numpy array に変換
original_data = np.empty((n_leave_cols,rows))
for i in range(n_leave_cols):
    original_data[i] = d.get(i)

#delete rows which is not change TIME
k = np.zeros(rows-1)
for i in range(rows-1):
    j = rows-i-1
    if (original_data[0,j] <= original_data[0,j-1] ):
        original_data = np.delete(original_data,j,1)

# resamp
def resamp(y):
    f = interpolate.interp1d(original_data[0], y, kind='linear')
    return f(time_r)

r_data = np.empty((n_leave_cols,n_sampling))
r_data[0] = time_r
r_data[1:] = resamp(original_data[1:])

np.save('rData.npy',r_data)
```

#コードの説明
DeCiDaのDataクラスを利用することで、HSPICEシミュレート結果をPython上で読み出し、同時に時間軸を等間隔にリサンプリングしています。

###変数の説明
・s_sampling, e_sampling
Spice内のシミュレートの開始時間、終了時間。
・d_sampling
読み出し時のサンプリング間隔。

###データ読み出し
d = Data()
d.read_hspice('xxx.xxx')でデータをdに保管できます。(CSVやNGSpiceに対応したメソッドもあるようです)

###必要のないデータの消去
計算上必要のないデータ配列がありますが(テスト用配線や子モジュールの端子など)、
d.delete(col)
で列を消す操作が可能です。
colは整数値orカラム名で指定可能です。列名タプルを渡すと複数消去することができるようです。（今回はひとつずつ消しています）

また、カラム名と列番号の対応は、d.index("zzz")で取得することができます。

###Numpy array に変換
d.get(col) で入手できます。
DeCiDa自体がNumpy使っているので、for文を回さなくてもできそうなのですが……。マニュアルをそこまで読み込めていないので暫定放置です。
 
###リサンプリング
HSPICEデータの時間軸が非等間隔（動きの大きなところで細かい）なので、SciPyのinterpolateを利用してリサンプリングを行います。
しかし、同じ時間のデータが複数ある場合があり、そうするとリサンプリングができないため、消去を行います。

そして、補完したデータをNumpyデータとして保存しています。

#まとめ
アナログ回路シミュレータとPythonデータの変換を行うコードを作りました。
現在、Spiceは別で回してその結果からデータを読んでいますが、マニュアルを読む限りDeCiDa自体にSpiceを操作するメソッドもあるので、そちらの利用による効率化を検討したいと思います。
【本番環境】rails db:create でAccess denied for user 'rails'@'localhost' (using password: YES)というエラーが出る問題の対処法

####環境

```ruby:terminal

■OS
Amazon Linux 2 AMI

-> % mysql -v
mysql  Ver 14.14 Distrib 5.7.29, for osx10.15 (x86_64) using  
EditLine wrapper

-> % rails -v
Rails 5.2.4.3

-> % ruby -v
ruby 2.5.3p105 (2018-10-18 revision 65156) [x86_64-darwin19]
```


####状況

AWSのサービスである、EC２とRDSを用いてローカルで作成したRailsのアプリを
デプロイしようと作業を進めています。

ローカルで作成したDBを本番環境に反映させるために
`rails:db create`、`rails:db migrate`
を行ったのですがエラーが出てしまいました・・・

####エラー文

```ruby:terminal
[ec2-user@ip-**** アプリのディレクトリ ]$ rails db:create RAILS_ENV=production

Access denied for user 'rails'@'localhost' (using password: YES)
Couldn't create 'アプリ名_production' database. Please check your configuration.
rails aborted!
Mysql2::Error: Access denied for user 'rails'@'localhost' (using password: YES)
/var/アプリ名/rails/アプリ名/bin/rails:9:in `<top (required)>'
/var/アプリ名/rails/アプリ名/bin/spring:15:in `<top (required)>'
bin/rails:3:in `load'
bin/rails:3:in `<main>'
Tasks: TOP => db:create
(See full trace by running task with --trace)

```

mysqlはデフォルトのrootユーザーではなく、新たにrailsという名前のユーザーを作成し、
このユーザーに権限を与えて使用しています。

```ruby:mysql

mysql>  SELECT User, Host FROM mysql.user;
+-----------+-----------+
| User      | Host      |
+-----------+-----------+
| root      | %         |
| mysql.sys | localhost |
| rails     | localhost |
| rdsadmin  | localhost |
+-----------+-----------+
4 rows in set (0.01 sec)
```
```ruby:config/database.yml

default: &default
  adapter: mysql2
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: rails
  password: 
  host: localhost

development:
  <<: *default
  database: アプリ名_development
  username: rails
  password:  


# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: アプリ名_test
  username: rails
  password: 

production:
  <<: *default
  database: アプリ名_production
  username: rails
  password: 

```
####エラーの原因

注目すべきは
`Access denied for user 'rails'@'localhost' (using password: YES)`
でした。

これは`railsユーザーでlocalhostに接続しようとしているけど、接続先が見つかりません`
というような意味合いのようです。

開発環境であれば`http://localhost:3000`で接続するので問題ありませんが
本番環境だとRDSに接続する必要があるため、RDSのエンドポイントを記載しないとエラーになるようです。

####解決策

config/database.ymlファイルの**host**を下記の様に書き換えます。

```ruby:config/database.yml

default: &default
  adapter: mysql2
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: rails
  password: 
  host: RDSのエンドポイント

development:
  <<: *default
  database: アプリ名_development
  username: rails
  password:  


# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: アプリ名_test
  username: rails
  password: 

production:
  <<: *default
  database: アプリ名_production
  username: rails
  host: RDSのエンドポイント
  password: 

```

これで無事に`rails:db create`が成功しました。

#####補足
今回はrailsというユーザーを新しく作成しましたが、
rootユーザーで試しても、問題なくデータベースを作成することができました。
CentOS  とOSXでphp, fetch,javascriptの挙動が違う

OSXはこれで行けたが、CentOSではダメ

Javascript

```javascript
function checkNewOrder(uuid) {
            var res = fetch("./test.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    //引数が色々あって...。
                })
            }).then((response) => {
                if (response.ok)
                    return response.json(); // レスポンスをテキストとして変換する
            }).then((rcvData) => {
                console.log("rcvData", rcvData); //とりあえず確認
                if (rcvData.length > 0) {
                    let msg = "新たにデータが入りました<br>\n";
                    //rcvData[i]["NAME"]とかを使って色々処理
                }
            });
        }

```
php

```php
$dbh->beginTransaction();
$stmt = $dbh->query("select * from TableName;");
$stmt->execute();
$dbh->commit();
$result = $stmt->fetchall(PDO::FETCH_ASSOC);
echo json_encode($result, JSON_UNESCAPED_UNICODE);
```

CentOSだとJSの `console.log("rcvData", rcvData);`のところで「rcvDataって何？」ってなってしまう。 

##結局こうやって対応できた
Javascript

```javascript
function checkNewOrder(uuid) {
            var res = fetch("./test.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    //引数が色々あって...。
                })
            }).then((response) => {
                if (response.ok)
                    return response.text(); // jsonからtextに変更した
            }).then((rcvData) => {
                var rcv = JSON.stringify(rcvData); //JSONオブジェクトに変換
                if (rcv.length > 0) {
                    let msg = "新たにデータが入りました<br>\n";
                    //rcvData[i]["NAME"]とかを使って色々処理
                }
            });
        }
```

` response.json();`を`response.text(); `にして`JSON.stringify`でオブジェクト化するとCentOSでOKだった。
OSXとCentOS で挙動が違うのはなぜ？

## でも、結局こっちかな
``` javascript
function checkNewOrder(uuid) {
    const response = fetch("./checkNewOrder.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            "uuid": ？？？；　//パラメータとか
        })
    }).then((response) => {
        if (response.ok)
            return response.json(); // JSON
　　　　　　　// return response.text(); 
    }).then((response) => {
        console.log("response", response);
        //var rcvData=JSON.parse(response);　//result.text()  だったらこっち
        //何らかの処理;
    });
}
```
「リーダブルコード」の読書感想文

リーダブルコード より良いコードを書くためのシンプルで実践的なテクニック
Dustin Boswell、Trevor Foucher 著　角征典 訳　須藤功平 解説
オライリー・ジャパン 2012年 発行
https://www.oreilly.co.jp/books/9784873115658/

この記事は主観を入れた「感想文」となっていることをご了承ください。
本書に興味があって要約を知りたいという方は、秀逸な記事がたくさんありますので是非調べてみてください！

# 秀逸な挿絵

本書を未読の方も、内容についてはある程度ご存じということもあるのではないかと思います。
**だからこそ挿絵を強く推したい。**
一目で「ああ...」と思ってしまう、含蓄に富んだ挿絵は必見です。
僕が好きなのは6章初め。
「コメントは正確で簡潔に」の章タイトルと挿絵の1ページは完璧な構成です。
(そしてクスッときます。)

# ソースコードは「斜め読み」できるように書く

本書では「読みやすさの基本定理」として以下のように書かれています。

> コードは他の人が最短時間で理解できるように書かなければいけない。(p.3)

例えば新聞やwebの記事であれば、最短時間で理解するためには、まずはタイトルや見出しを見て全体を把握し、さらに情報が必要なところを個別に読み込んでいく「斜め読み」になるでしょう。
ソースコードも同じことです。**視界に入った瞬間にどこまで情報を渡せるか**なのです。
広告や文章であれば、読みにくければ途中で読まれなくなってしまうものです。
しかし、仕事で出会うソースコードは、読みにくくても読まなければならないので、その状況に甘えて我々プログラマーは「読ませる工夫」をサボってしまっているのかも、と反省です。

# 「読みやすさ」の重要性について

ソースコードを書いている側からすると忘れてしまうこともあるかもしれませんが、ソースコードそのものは顧客にとって何の価値もないはずです。「動くシステム」だけに価値があるのです。
そして、顧客がシステムに必要とするものは常に変わり続けます。それに合わせてシステムも変わっていかなければ、適切に価値を提供し続けることができません。
**品質と変化への即応性、それらを実現する土台となるのが「読みやすいコード」です。**

ただ、土台というのは見えないもので、その重要性はしばしば見落とされるものです。
顧客にリファクタリングの必要性を理解してもらうことに苦労している方は大勢いらっしゃるのではないでしょうか。
「一方は知っている、他方は知らない」という状況で相互理解はとても難しいですが、こういう橋渡しができる人がいればいいのにな。。。

また、どんなに読みやすさを維持しようと思っても、改修が重なれば重なるほど、だんだんややこしくなっていくものです。
個人的には、定期的にシステムを「捨てる」ことができたら読みやすさを維持するのに役立つかな、と思ったりします。
システムを使う側の視点として、以前古くなった社内システムを刷新しようとしたものの、過去の資産の移行が大変でスケジュールが延期し続けるといったことがありました。
どんなシステムもいずれ乗り換えなければならないのだから、それを意識して「旧くなったもの、不要になったものは整理」をして身軽にできたら、使う側も作る側もハッピーになるのですが、まぁ人は必要に迫られないと動かないのも事実なのでなかなか難しい。。。

# 開発の手法について

本書でのソースコードの改善について、機能を満たしてからだんだん読みやすくしています。
展開の都合なのかもしれませんが、最初からいきなり読みやすいソースコードを書くのは難しいのではないかと思います。
ですから、解説の中で「添削コミット」という言葉が出てきますが、リファクタリングの要領で読みやすさを維持していくやり方が良いような気がします。
添削コミットで「どういうものが読みやすいか」という共通認識ができるという利点もあります。

ということを考えると、リファクタリングができる環境があるのが大事になるな、と。
テストの自動化とか、ソースコード管理の仕組みとか、そういうモダンな手法をチームの開発の中に取り込んでいく姿勢も、読みやすさの維持に関わってくるような気がします。

# 実際のソースコード改善について

ソースコードを読みやすくする具体的なテクニックについては、他の方が書いていらっしゃる読書メモを見ていただいたり、できれば実際に本書を手に取って読んでいただくのがベストなのですが、お勉強もかねて15章でのソースコードの改善のやり方を、Githubにまとめています。
~~現在作成中です。完成までしばしお待ちを。。。~~
**(2020/07/04)完成しました！**
※イシューとかプルリクエストとかいろいろ使おうとしたら、慣れてなくて見づらいかもしれませんが。。。
https://github.com/yoktave-yoknel/ReadableCodeCh15
書籍「テスト駆動開発」をPHPで写経するためのDocker環境構築手順

# はじめに

会社でテスト駆動開発の輪読会をやることになり、
あわせて書籍の中に出てくるコード（書籍内ではJavaで記述されている）をPHPで写経して理解を深めようと考えていました。

この勉強会のためだけに、自分のMacにcomposerをインストールするのは嫌だったので、
使い捨てのコンテナでcomposerおよびphpunitを動かす方法を調べました。

同じことを考える人が少なくとも10人くらいはいると思うので、記録に残しておきます。


# 対象の方

- 環境構築に時間をかけずに、さっさとPHPで書籍「テスト駆動開発」の写経をはじめたい方

# 前提条件

- **PHPおよびPHPUnitで**写経したい
- ローカルPCにcomposerを**インストールしたくない**
- ローカルPCにDockerをインストール済み

# 各種バージョン

```
PHP 7.4.7
PHPUnit 9.2.5
Composer version 1.10.7
```

# 手順

ご自身の環境にあわせて、適当なディレクトリを作り、手順を開始してください。

## composer.json の作成

```docker
docker run --rm -it -v $PWD:/app composer:latest composer init

ls
# composer.json
```

## phpunit のインストール

```docker
docker run --rm -it -v $PWD:/app composer:latest composer require --dev phpunit/phpunit

ls
# composer.json	composer.lock	vendor
```

## コード用ディレクトリ作成

```docker
mkdir src
mkdir test

ls
# composer.json	composer.lock	src		test		vendor
```

# composer.json に autoload の記載を追加

```vim
vi composer.json
```

記述例は以下の通りです。

```json
{
    "name": "root/app",
    "require": {},
    "require-dev": {
        "phpunit/phpunit": "^9.2"
    },
    "autoload": {
        "psr-4": { "App\\": "src" }
    }
}
```

# composer dump-autoload の実行

```docker
docker run --rm -it -v $PWD:/app composer:latest composer dump-autoload

ls vendor/autoload.php
# autoload.php ファイルが作成されていることを確認する
```

# phpunit.xml の作成

```vim
vi phpunit.xml
```

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<phpunit colors="true"
         verbose="true"
         bootstrap="vendor/autoload.php">
    <testsuites>
        <testsuite name="Sample">
            <directory>test</directory>
        </testsuite>
    </testsuites>
</phpunit>
```

# テストコード、テスト対象コードを書く

[サンプルコード](https://github.com/nagaakihoshi/tdd)

# phpunit 実行

```docker
docker run --rm -it -v $PWD:/app composer:latest vendor/bin/phpunit
```
google Colaboratoryでダークテーマでも図の目盛りとラベルを見やすくする設定

## こんな人におすすめ
・google colaboratoryでダークテーマを使用しているが、図の目盛りとラベルが見えづらくて困っている人

## google colaboratoryのダークテーマ
標準テーマでは味気ないですがダークテーマはクールです。
やる気も上がりますし夜でも目に優しい。
![WS000013.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533584/03397a16-2b7e-f028-062f-ce04d4291df9.jpeg)

## 問題点
ただし、難点が一つあります。それは図の目盛りやラベルが潰れてしまうこと。
適当にランダムな50個の散布図をプロットしてみます。

``` python:
import numpy as np
import matplotlib.pyplot as plt
a = np.random.rand(50)
b = np.random.rand(50)
plt.scatter(a,b)
```

![WS000010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533584/1a929baa-658d-4489-7d17-9c0cdb12f95c.jpeg)
見えない...
目盛りやラベル部分の背景が透過画像となっているため背景画像と同色の文字が見えづらくなっているのが原因です。

## 解決方法
下の文章を追加しましょう。

``` python:
import seaborn as sns
sns.set()
```
これで同じように

``` python:
plt.scatter(a,b)
```
とすると
![WS000011.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533584/d1ae10b0-9a57-7d0a-d6a5-483405961d1f.jpeg)
きれいに見えました。sns.set()をいれないと、seabornにしてもラベルと目盛り部分が透過画像となってしまうので注意しましょう。
curlコマンドにより作成したapiでデータを取得する


##環境
cloud9(api取得側)
local(api提供側)
ruby 2.6.3
Rails 6.0.2.1

##結論
```
controller

def index
  uri = `curl -v -X GET "http://stage-smartyoyaku-env.ap-northeast- 1.elasticbeanstalk.com/api/v1/tasks" \
        -H "Authorization: Bearer ここにTokenを書く"`
  @test = JSON.parse(uri)
end
```

*取得できているかブラウザで確認します

```
viewfile

<%= @test %>
```

##それまでのエラー内容
cloud9のターミナルでcurlコマンドを入力すると。。

```
curl: (7) Failed to connect to localhost port 3000: Connection refused
```

調べて見るとサーバーが立ち上がってない場合かポート番号が間違っているかのようです。
ブラウザでlocalhost:3000にアクセスしましたが問題なし。port番号もあっていましたが、、

##もう一度整理

・cloud9側のアプリでcurlコマンドを叩いている。(取得する側)
・local環境の3000portでapiを提供しているアプリを立ち上げている。(提供する側)←ここ重要

ん？cloud9(インターネット上)からlocalには接続できないんじゃ、、

```
$ lsof -i:3000
$

cloud9上で3000portが使われているか確認→表示されない
```

つまりapiを提供する側はherokuなどでネットにurlを公開し、そこからデータを取ってくる必要があります。

##注意点
ターミナルでcurlコマンドを打つ場合とcontrollerに書く場合は微妙に書き方が違う。
controllerではcurlコマンドを``で囲む。

```
ターミナルの場合

$ curl -v -X GET "http://stage-smartyoyaku-env.ap-northeast-1.elasticbeanstalk.com/api/v1/tasks" \
          -H "Authorization: Bearer ここにTokenを書く"
```

```
controllerの場合

def index
  uri = `curl -v -X GET "http://stage-smartyoyaku-env.ap-northeast- 1.elasticbeanstalk.com/api/v1/tasks" \
        -H "Authorization: Bearer ここにTokenを書く"`
end
```