OmniAICreator/Qiita-1.07M huggingface dataset:
nodenvを使ってnode環境を作る

# はじめに

ちょっと仕事で AWS Lamdbaを使うことになりそうなので、いまさらながらお勉強。
WSL2のUbuntuに開発環境を作って、試してみようと思います。

## 環境
Windows 10
WSL2
Ubuntu 20.04 LTS

## nodenvをインストールする

git clone で必要なファイルを取得します。

```bash
git clone https://github.com/nodenv/nodenv.git ~/.nodenv
git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build
```

nodenvにパスを通します。

```bash
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.profile
echo 'eval "$(nodenv init -)"' >> ~/.profile
source ~/.profile
```

## Node.jsをインストールする

インストール可能なバージョン一覧を取得し、表示されたバージョンを指定してインストール。
ここでは最新のLTSを選択

```bash
nodenv install --list
nodenv install 12.18.3
```

利用するNode.js のバージョンを指定する
localを指定することで、コマンド実行した配下のディレクトリで、該当バージョンを利用することができます。

```bash
nodenv local 12.18.3
```

以下の通りで、全体で利用するバージョンを指定することもできます。

```bash
nodenv global 12.18.3
```


最後にバージョン確認。指定したバージョンが表示されればＯＫ

```bash
node -v
```

# さいごに

これで、準備はできたので、次はServerlessFrameworkだ。
.NetCoreのHttpContext.SignInAsyncで生成されるCookieの名前を変更したい

#問題点
.NetCoreのHttpContext.SignInAsyncで認証を行っていたが、その際に作成されるCookie名がダサイ。。。
(なんとなく使ってる技術がわかるのもよくない？)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658979/ce4ddd5f-2622-e67a-0155-e2f6a8d723d9.png)

#解決
Startup.csでAddCookieのオプションに普通にあった。。。

```C#:Startup.cs
        services
           .AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
           .AddCookie(options =>{
               options.Cookie.Name = "test";
           });
```
解決！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658979/041bc02b-8946-0a5d-bd3e-91c0ef7ca14e.png)
Ubuntu 20.04.1 LTS に nginx をインストール

## はじめに
nginx の学習目的で Ubuntu 20.4 デスクトップにインストールしたので、メモレベルで残しておきます。

## 参考
http://nginx.org/en/linux_packages.html#Ubuntu

## 環境
Ubuntu 20.04.1 LTS
nginx/1.18.0 (Ubuntu)

## インストール
nginx のバージョンには、

- 長期安定バージョンの stable
- 新機能が取り込まれていく mainline

の2つがある。
今回は推奨される mainline のインストールを行う。

まずは[公式サイト](http://nginx.org/en/linux_packages.html#Ubuntu)で前提条件とされているツールをインストールする。

```bash
sudo apt install curl gnupg2 ca-certificates lsb-release
```

次に、公式リポジトリをaptに登録する。

```bash
echo "deb http://nginx.org/packages/mainline/ubuntu `lsb_release -cs` nginx" \
    | sudo tee /etc/apt/sources.list.d/nginx.list
```

なお、私の環境ではfishをメインのシェルにしていたため、サブコマンドの展開は`(lsb_relese -cs)`としました。

続いて公式URLから nginx の公開鍵をインポートし、apt がパッケージを検証できるよう追加する。

```bash
curl -fsSL https://nginx.org/keys/nginx_signing.key | sudo apt-key add -
```

以下のコマンドで適切な鍵をインポートできたか確認。

```bash
sudo apt-key fingerprint ABF5BD827BD9BF62
```

次の出力が確認できれば鍵のインポートは成功。

```bash
pub   rsa2048 2011-08-19 [SC] [expires: 2024-06-14]
      573B FD6B 3D8F BC64 1079  A6AB ABF5 BD82 7BD9 BF62
uid   [ unknown] nginx signing key <signing-key@nginx.com>
```

準備ができたので、nginx をインポートする

```bash
sudo apt update
sudo apt install nginx
```

エラーがでなければインストールは成功です。

## 確認
nginxをバージョンを確認してみます。

```bash
$ nginx -V
```

出力は以下のようになります

```bash
Tue 11 Aug 2020 01:53:36 PM UTC
nginx version: nginx/1.18.0 (Ubuntu)
built with OpenSSL 1.1.1f  31 Mar 2020
TLS SNI support enabled
configure arguments: ---(省略)---
```

aptを使用してnginxパッケージの詳細を確認することもできます

```bash
sudo apt show nginx
```

インストールを確認できたら、systemdで起動します。

```bash
sudo systemctl start nginx
```

無事起動できた場合は何も出力されません。
ステータスを確認します。

```bash
sudo systemctl status nginx
```

`Active: active(running)` という表記を確認できれば成功です。

webブラウザで`localhost`にアクセスしてみましょう。

![スクリーンショット 2020-08-12 22-27-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607514/da358171-8594-3d77-0288-2eae54d81028.png)


サービスの停止は以下のコマンドです。

```bash
sudo systemctl stop nginx
```
JSONを返すMockサーバーをシェルからサクッと建てる

## JSONのレスポンスを返すサーバーが急に必要になったら...
`nc`コマンドを使ってMockサーバーを建てることができます🏗🗼
（Macとかだと`nc`コマンドはデフォルトで入っていたりします。）
余計なライブラリ等入れたりしないでモックサーバー建てたい場合にかなり便利に使える方法をご紹介します！

## Step1. JSONを用意する
下記のようなJSONの内容のファイルを用意します。

```json:response.json
{
  "text": "Hello World!",
  "status": 200,
  "error": null
}
```

## Step2. コマンド実行
上記のファイルを指定するように下記のコマンドを実行します。

```bash
$ bash -c "trap exit INT; while :; do (echo -e HTTP/1.1 200 OK\n;echo -e Content-Type: application/json; echo; cat response.json) | nc -l 8080; done"
```

### コマンドの内容解説
① httpレスポンスを返すコマンドです。(8080はポート番号の指定です)

```bash
nc -l 8080
```

② `nc`コマンドで返す内容をパイプで渡します

```bash
echo -e HTTP/1.1 200 OK\n;echo -e Content-Type: application/json; echo; cat response.json
```

③ `nc` コマンド自体は1回レスポンスを返すとプロセス終了してしまうので、何回も実行されるようにします

```bash
while :; do <実行したいコマンド>; done
```

④ Ctrl-cでプロセスを止められるようにします

```bash
bash -c "trap exit INT; <実行したいコマンド>"
```
(`trap exit INT;` でCtrl-c (SIGINT)を受け取って、プロセスを終了するようにしますが、`bash -c` で実行するようにして子プロセスで実行するようにして、そのプロセスを終了させるようにします。)


## Step3. ブラウザでアクセスしてみる
ncコマンドでportを8080で指定したので`http://localhost:8080`でアクセスします。

![スクリーンショット 2020-08-12 22.19.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73446/3c10fc2d-0f9d-b3e2-80b3-516665fe184a.png)

(Chrome拡張の[JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ja)の表示になっています）

ブラウザからも確認できたので、あとは開発中のシステムからアクセスしてみたりして利用できます🏄‍♂️
（利用が終わってサーバーを止めるときは`Ctrl-c`で止めましょう。）
Tableau Serverでキャッシュ利用を制御する

#tsmコマンドでパラメータを変更する

1. 以下のコマンドを実行する。

```
tsm data-access caching set -r <value>
```

\<value>はキャッシュを保持する期間を表す。（単位：分）
既定値は、空白または"low"
0にすれば、ページ読み込みのたびにキャッシュを更新する。<br>
2. 以下コマンド実行して変更内容を確定する。

```
tsm pending-changes apply
```



#URLの末尾に変数を付加してキャッシュを強制的に更新する。

VizのURLに以下記号を付加することで、キャッシュを強制的に更新してVizを読み込ませることができる。

> ?:refresh=yes

例:`http://servername/views/workbookname/dashboard1?:refresh=yes`


#参考サイト
- tsm data-access

https://help.tableau.com/current/server/ja-jp/config_cache.htm

- Tableau Server ビュー内のデータが古い　

https://kb.tableau.com/articles/issue/view-out-of-date?lang=ja-jp
WSL1(Ubuntu-20.04)へのheroku CLIインストール

WSL1(Ubuntu-20.04)へのheroku CLIをインストールしました。

### WSLへのインストールはinstall-ubuntu.shを使う
[Getting Started on Heroku with Node.js | Heroku Dev Center](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up)
公式のGetting Startedでは、snapで入れろとなっています。
しかし、WSL1では使えないようです。
[WSl環境におけるHeroku CLIの導入 - Qiita](https://qiita.com/RoaaaA/items/604f7538d9ef57d2f9c7)
上の記事を参考にさせていただいたところ、install-ubuntu.shをとってきて実行せよと。

```bash
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
```

### インストール(失敗)
しかし、失敗。

```bash
$ curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  1232  100  1232    0     0    131      0  0:00:09  0:00:09 --:--:--   294
This script requires superuser access to install apt packages.
You will be prompted for your password by sudo.
(中略)
gpg: can't connect to the agent: IPC connect call failed
```

`gpg: can't connect to the agent: IPC connect call failed`
というエラーとなりました。

[WSLでdockerをinstallするときにハマった話 - Qiita](https://qiita.com/obukoh/items/416c4cb1b88261bf3357)
上の記事と状況は異なりますが、エラーメッセージは「➀GnuPG」と同じです。  

> gpg、別名は「Gnu Privacy Guard」「GPG」「GnuPG」である。
> これは、公開鍵でファイルの署名を検証したり、公開鍵と秘密鍵のペアでメールの暗号化・復号化を行ったり署名を添付したりするツールである。

### gpg入れ直してから、インストール(成功)
上記事の「解決方法Ⅱ:gpgの入れ直し」を試みます。  

```bash
sudo apt remove gpg
sudo apt install gnupg1
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
```

成功しました。

```bash
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  1232  100  1232    0     0    186      0  0:00:06  0:00:06 --:--:--   315
This script requires superuser access to install apt packages.
(中略)
Unpacking heroku (7.42.6-1) ...
Setting up heroku (7.42.6-1) ...
heroku installed to /usr/bin/heroku
heroku/7.42.6 linux-x64 node-v12.16.2
```

### 動作確認
バージョン確認で動作を確認しました。

```bash
$ heroku --version
heroku/7.42.6 linux-x64 node-v12.16.2
```

### メモ書き
* 参考にさせていただいた最初の記事ではGnuPGはまともに動いていた。動かなかった原因は？
	* 未解決
* curlのデフォルトは標準出力
	* だから、パイプで`sh`に繋ぐコマンドが成立している
	* curlでもってきた内容をファイルにしたい場合、`-O`オプション指定
		* [【 curl 】コマンド――さまざまなプロトコルでファイルをダウンロード（転送）する：Linux基本コマンドTips（25） - ＠IT](https://www.atmarkit.co.jp/ait/articles/1606/22/news030.html)

### 参考リンク
* [Getting Started on Heroku with Node.js | Heroku Dev Center](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up)
* [WSl環境におけるHeroku CLIの導入 - Qiita](https://qiita.com/RoaaaA/items/604f7538d9ef57d2f9c7)
* [WSLでdockerをinstallするときにハマった話 - Qiita](https://qiita.com/obukoh/items/416c4cb1b88261bf3357)
* [【 curl 】コマンド――さまざまなプロトコルでファイルをダウンロード（転送）する：Linux基本コマンドTips（25） - ＠IT](https://www.atmarkit.co.jp/ait/articles/1606/22/news030.html)
ec2使用時にdockerの容量がいっぱいになった際の対処法

dockerを起動しようとしたら以下のエラーが発生した。

```
$ docker-compose build
Failed to write all bytes for _codecs_cn.so
fwrite: No space left on device
```
<br>
容量不足により起動不可となっているようだ。
以下のコマンドを叩くと容量を喰っているファイルを見つけることができる。

```
$ df -h
ファイルシス   サイズ  使用  残り 使用% マウント位置
devtmpfs         474M     0  474M    0% /dev
tmpfs            492M     0  492M    0% /dev/shm
tmpfs            492M   13M  479M    3% /run
tmpfs            492M     0  492M    0% /sys/fs/cgroup
/dev/xvda1       8.0G  8.0G   22M  100% / 　//容量不足
tmpfs             99M     0   99M    0% /run/user/1001
```

/dev/xvda1　というファイルがかなりの容量を占めている。
logなどの不要ファイルを削除しても解決できる場合もあるが、今回はEC2で使用しているEBSのサイズを変更して対応する。
無料利用枠のt2.microでは8GBがデフォルトで、今回は16GBに変更する。（若干料金が発生する：約1＄/月）

AWSのEC2に移動し、ボリュームに移動する。
目的のボリュームを選択した状態で　アクション→ボリュームの変更→サイズを変更(任意の数字：今回は16)→変更
変更が反映され状態がin-useになったらOK。
<br>
あとはターミナルからEC2にログインし、以下のコマンドを順に実行していく。

```
$ sudo growpart /dev/xvda 1
CHANGED: partition=1 start=4096 old: size=16773087 end=16777183 new: size=33550303 end=33554399
```

xvdaが16GBに変更されていることが確認できる。

```
$ lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda    202:0    0  16G  0 disk 
└─xvda1 202:1    0   8G  0 part /
```
ファイルシステム上は変更されていないので次のコマンドで変更できる。

```
$ sudo xfs_growfs /dev/xvda1
meta-data=/dev/xvda1             isize=512    agcount=4, agsize=524159 blks
         =                       sectsz=512   attr=2, projid32bit=1
         =                       crc=1        finobt=1 spinodes=0
data     =                       bsize=4096   blocks=2096635, imaxpct=25
         =                       sunit=0      swidth=0 blks
naming   =version 2              bsize=4096   ascii-ci=0 ftype=1
log      =internal               bsize=4096   blocks=2560, version=2
         =                       sectsz=512   sunit=0 blks, lazy-count=1
realtime =none                   extsz=4096   blocks=0, rtextents=0
data blocks changed from 2096635 to 4193787
```

変更が反映されていたら以下のように容量が8GB→１６GBに変更されており、
使用率が低減できていることが確認できる。

```
$ lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda    202:0    0  16G  0 disk 
└─xvda1 202:1    0  16G  0 part /

$ df -h
ファイルシス   サイズ  使用  残り 使用% マウント位置
devtmpfs         474M     0  474M    0% /dev
tmpfs            492M     0  492M    0% /dev/shm
tmpfs            492M   13M  479M    3% /run
tmpfs            492M     0  492M    0% /sys/fs/cgroup
/dev/xvda1        16G  5.6G   11G   35% /
tmpfs             99M     0   99M    0% /run/user/1001
```
<br>

無事に起動できるようになり、容量にもかなりの余裕ができた。

```
$ docker-compose build
Building web
:
Successfully built 99f5770ca10a
Successfully tagged app_web:latest

$ df -h
ファイルシス   サイズ  使用  残り 使用% マウント位置
devtmpfs         474M     0  474M    0% /dev
tmpfs            492M     0  492M    0% /dev/shm
tmpfs            492M   14M  479M    3% /run
tmpfs            492M     0  492M    0% /sys/fs/cgroup
/dev/xvda1        16G  8.1G  8.0G   51% /    //容量に余裕ができた
tmpfs             99M     0   99M    0% /run/user/1001
```
<br>

参考記事
https://www.souichi.club/aws/aws-ebs/
CentOS 7からは、xfs_growfsというコマンドを使うことになったようだ。
https://qiita.com/ponsuke0531/items/04153c6228516e48a55e
Javascriptを使って、白背景の楽譜の背景を透明にする

## はじめに

ドラム譜を作成しようと思い[MuseScore](https://musescore.org/ja)というのを使って楽譜を作成したんですが、書いた楽譜のスクリーンショットを撮るとこんな感じになります

![basic4beat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252348/70fc81c2-34c3-7fe7-3cfd-a08d5b830298.png)

こういう白背景（厳密には真っ白ではないが）の楽譜の背景を透明にしたい場合、いろいろな方法があると思いますが今回はJavascriptを使って行ってみました。

最終的に背景を透明にした画像はこの様に重ねて使えるようになります。

![スクリーンショット 2020-08-12 21.21.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252348/55c8f1a8-2603-a0ab-25fa-fbf7f6f70b47.png)

## 使うもの

- [mac](https://www.mcdonalds.co.jp/)
- terminal
- javascript
- node.js
- yarn
- [pngjs](https://www.npmjs.com/package/pngjs)

上についてわからないものがあれば、Googleで調べてから再度ここにきてください。僕の過去の記事でも説明しているものがあると思うので参考にしてみてください。

## 書いたコード

```javascript
const fs = require('fs')
const PNG = require('pngjs').PNG

fs.createReadStream('path/to/your.png')
    .pipe(new PNG())
    .on("parsed", function() {
        for (let y = 0; y < this.height; y++) {
            for (let x = 0; x < this.width; x++) {
                const index = (this.width * y + x) << 2;
                const r = this.data[index]
                const g = this.data[index + 1]
                const b = this.data[index + 2]
                if (r + g + b > 255 / 2 * 3) {
                    this.data[index + 3] = 0
                }
            }
        }

        this.pack().pipe(fs.createWriteStream('path/to/your/output.png'))
    })
```

## 解説

まずは[pngjs](https://www.npmjs.com/package/pngjs)のドキュメントを読みます。

最初からゴールが見えた様な状態のサンプルが書いてあったので、それを使いますが、前提知識として。

我々が普段使っているディスプレイは、1ピクセルという単位があり、1つのLEDのようなものです。例えばFullHDのディスプレイだと横に1920個・縦に1080個並んでいて、これらの色加減によって我々は画像を認識しています。

PNGの場合、1ピクセルは赤(red)・緑(green)・青(blue)・透明度(alpha)と言う4種類の単位で表現されます。rgbaとか言ったりしますね。

そして、データ上は先頭から`[1ピクセル目のr][1ピクセル目のg][1ピクセル目のb][1ピクセル目のa][2ピクセル目のr][2ピクセル目のg]...`という様に配列に格納されています。

それぞれ0~255までの256個の整数で構成されています。

ただこれだと全てのデータが横一列に並んでいるため、二次元の画像として使うためには高さ(width)と横幅(height)の情報が必要です。これもPNGファイルに含まれていて、その辺りはpngjsがうまいこと読み込んで処理してくれているのでこちらが考えることはrgbaデータをどの様に加工するかです。

ここまでが前提知識で、今回やりたかった白背景を透明にする部分ですが、途中に`if (r + g + b > 255 / 2 * 3) {`と書いた行があり、この条件式は`白に近い色`を判定するためのもので、この後の行`this.data[index + 3] = 0`の部分が透明にする処理です。

あとはサンプル通りですがファイルパスを正しく書き換えれば出力してくれます。

## おわりに

正直このコード書くより記事書く方が1000倍大変です。。。

ちなみにですが、この条件式と背景処理だと、出力される画像が若干ジャギーになってしまいます（丸みを帯びた物（音符）を表現するために、丸い部分は曖昧な色が使われているため）。

なので、もっと滑らかに透明にしたい場合は条件式と後処理にもっと手を加える必要がありますね。
f:ajaxでMethod not foundとなった時の対応方法

# 事象 : f:ajaxを動かそうとしたらコンソールにエラーが出て動かなかった

- 環境
    - CentOS Linux release 7.8.2003 (Core)
    - Eclipse IDE for Enterprise Java Developers.Version: 2020-03 (4.15.0)
    - openjdk version "11.0.7" 2020-04-14 LTS
    - JSF 2.3.9

```bash:Eclipseのコンソールのログ
javax.el.MethodNotFoundException: /base.xhtml @17,113 listener="#{uploadBean.uploadFile}": Method not found: class brans.UploadBean.uploadFile(javax.faces.event.AjaxBehaviorEvent)
    at com.sun.faces.facelets.el.TagMethodExpression.invoke(TagMethodExpression.java:69)
    at com.sun.faces.facelets.tag.jsf.core.AjaxBehaviorListenerImpl.processAjaxBehavior(AjaxHandler.java:403)
    at javax.faces.event.AjaxBehaviorEvent.processListener(AjaxBehaviorEvent.java:100)
    at javax.faces.component.behavior.BehaviorBase.broadcast(BehaviorBase.java:82)
    at javax.faces.component.UIComponentBase.broadcast(UIComponentBase.java:481)
    at javax.faces.component.UIViewRoot.broadcastEvents(UIViewRoot.java:847)
    at javax.faces.component.UIViewRoot.processApplication(UIViewRoot.java:1395)
    at com.sun.faces.lifecycle.InvokeApplicationPhase.execute(InvokeApplicationPhase.java:58)
    at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:76)
    at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:177)
    at javax.faces.webapp.FacesServlet.executeLifecyle(FacesServlet.java:707)
    at javax.faces.webapp.FacesServlet.service(FacesServlet.java:451)
...省略...
```

```java:UploadBean.java
...省略...
    public void uploadFile(FacesContext fc, UIComponent uic, Object value) throws IOException {
        if (!isUpload()) {
...省略...
```

```xml:base.xhtml
...省略...
<f:ajax event="change" execute="uploadArea" render="uploadArea" listener="#{uploadBean.uploadFile}" />
...省略...
```

# 原因 : メソッドのパラメータが違うから(オーバロード)
「メソッドのパラメータが違う」 = 「違うメソッド」 = 「listener属性に指定したメソッドはない」
いろいろ試していたら・・・うっかり・・・よく考えるとあたりまえだけど「えーーー？」っとなった

## 対応方法1 : メソッド名だけじゃなくて引数までlistener属性と合わせる

```java:UploadBean.java
    public void uploadFile() throws IOException {
// または
    public void uploadFile(AjaxBehaviorEvent event) throws IOException {
```

javax.faces.event.AjaxBehaviorEventを受け取っておけば`getFacesContext`でFacesコンテキストを取得できたりする。

> AjaxBehaviorEvent は、Ajax に固有のコンポーネントの動作を表します）。
> [AjaxBehaviorEvent (Jakarta EE 8 仕様 API) - Javadoc 日本語訳](https://spring.pleiades.io/specifications/platform/8/apidocs/javax/faces/event/AjaxBehaviorEvent.html)


## 対応方法2 : listener属性に指定したメソッドに引数を追加する
```xml:base.xhtml
<f:ajax event="change" execute="uploadArea" render="uploadArea" listener="#{uploadBean.uploadFile(hoge, fuga, value)}" />
```
【javascript】Mutation observerを使ってみる

動的な追加要素を検知していろんな処理ができるMutation observerについてまとめる。

これがあれば快適なネットサーフィンがで着ると思う。
例えばgifばかりの動画はブラウザが重くなるので、ファイルがgifならimgタグごと消してしまうことで軽くなる

そういうことができるMutation observerについて軽くまとめてみる

#Mutation observer
>MutationObserver とは、指定したコールバック関数を DOM の変更時に実行させる API です。この API は、DOM3 Events の仕様で定義されていた Mutation Events を新しく設計し直したものです。

出典：https://developer.mozilla.org/ja/docs/Web/API/MutationObserver
つまりは監視。
追加/削除された要素をいじれる

##インスタンス
```javascript
MutationObserver(
  function callback
);
```
callbackの第1引数にMutationRecord
第2引数にMutationObserver インスタンス自身を受け取る


##監視の開始 observe
```javascript
void observe(
  Node target,
  MutationObserverInit options
);
```
|引数|説明|
|---|---|
|target|DOM変更を検したいNode|
|options|取得したい変更の種類を指定|
###optionに指定できるもの
|プロパティ|説明|
|---|---|
|childList|対象ノードの子ノードでの追加・削除を監視|
|attributes|対象ノードの属性変更の監視|
|characterData|対象ノードのデータ監視|
|subtree|対象ノードとその子孫ノードの監視|
| attributeOldValue |対象ノードの変更前の属性値を記録|
| characterDataOldValue |対象ノードの変更前のデータを記録|

これらのオプションをオブジェクトで渡す。
###MutationRecordオブジェクト
オプションを説明したところで、MutationRecordが持つプロパティについて説明する。
オブザーバーのインスタンス時に書くが、変化があるとこのコールバック関数に渡される。

|プロパティ|説明|
|---|---|
|type|変化の種類。childList,attributes,charactorDataか|
|target|変化したノード|
|addedNodes|追加されたノード|
|remocedNodes|消されたノード|
|previousSibling/nextSibling|追加/削除されたノードの前後にあるノード|

##監視の停止 disconnect()
observe()を再び呼び出すまでコールバック関数は実行されない

#使い方
以下はこちらのサイトで挙げられている使用例

- https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

```javascript
// 対象とするノードを取得
const target = document.getElementById('some-id');
 
// オブザーバインスタンスを作成
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.type);
  });    
});
 
// オブザーバの設定
const config = { attributes: true, childList: true, characterData: true };
 
// 対象ノードとオブザーバの設定を渡す
observer.observe(target, config);
 
// 後ほど、監視を中止
observer.disconnect();
```
##解説
###対象とするノードを取得
監視したいノードを取得する
###オブザーバインスタンスを作成
ここで、変化した要素に何をするかを書く
###オブザーバの設定
ここで変化した要素の種類を指定する
###対象ノードとオブザーバの設定を渡す
ここで実際に実行
小技: S3 のバケットの中のファイルを一斉書き換え


S3 の間でファイルを一斉に移動させた時などに ACL で public read が付与されていなかったり、SVG ファイルの metadata がなぜか binary/octat-stream になってて image/svg+xml でなかったりしました。

なので、シェルスクリプトで一括で変換できるスクリプトを作りました。

PREFIX で、特定のフォルダ (Key) のみに限定して実行させることもできるようにしました。

# 特定 Bucket の prefix に ACL public read を加える

シェル

```s3-bucket-acl.sh
# /bin/bash
BUCKET=$1
PREFIX=$2
for KEY in $(aws s3api list-objects \
  --bucket ${BUCKET} | jq -r '.Contents[].Key')
  --prefix ${PREFIX}\
do
  aws s3api put-object-acl \
    --bucket ${BUCKET} \
    --key ${KEY} \
    --acl public-read
  echo "${BUCKET}/${KEY}"
done
```

実行例

```
sh s3-bucket-acl.sh [バケット名] [プリフィックス]
```

# SVG 形式のファイルに正しい image/svg+xml の content-type を付与する

```s3-bucket-svg.sh
# /bin/bash
BUCKET=$1
PREFIX=$2
for KEY in $(aws s3api list-objects \
    --bucket ${BUCKET}\
    --query "Contents[].[Key]" \
    --output text | grep "\.svg$")
    do
    aws s3api copy-object \
    --bucket ${BUCKET} \
    --copy-source ${BUCKET}/${KEY} \
    --key ${KEY} \
    --metadata-directive "REPLACE" \
    --content-type "image/svg+xml"
    echo "${BUCKET}/${KEY}"
    done
```

実行例

```
sh s3-bucket-svg.sh [バケット名] [プリフィックス]
```
【Rails】定数は、config gemで管理しましょう

#環境

```
$ rails -v
Rails 6.0.3.1
```
```
$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]
```

#まずは、Gemのインストール

```ruby:Gemfile
gem 'config'
```

```shell
$ bundle install --path vendor/bundle
```

#configの初期設定を行う

configの初期設定のために関連ファイルをインストールする

```shell
$ bundle exec rails g config:install
```

#定数定義と、使い方

```config/settings.yml
service: 
  name: 'vdeep' 
  url: 'http://vdeep.net'

authentication_password: "foobarbaz"
```

```shell
$ rails c

> Settings.service.name
=> "vdeep"

> Settings.service[:name]
=> "vdeep"

> Settings[:service][:name]
=> "vdeep"

> Settings.authentication_password
=> "foobarbaz"

```
moment-timezoneを使って、ISO 8601形式のUTCの日付を、ISO 8601形式のJSTに変換する

# はじめに

Moment.jsを使って、日付をJSTに変換したときのメモ。


# 変換する

```javascript
const momentTimezone = require("moment-timezone");

const utcDate = "2020-08-12T12:28:06.469Z";
const result = momentTimezone(utcDate).tz("Asia/Tokyo").format();

console.log(result);      // 出力: 2020-08-12T21:28:06+09:00
```
pythonでrequests使ってスクレイピングやろうとしたらSSLErrorでハマったので、対処法メモ

## 背景

題名の通り。結構ググっても、日本語でも英語でもなかなか解決方法見つからなかったので、再発時に参照できるようメモ

## エラーが発生したコード

実際はwikipediaではないけど、`https://~`のサイトをスクレイピングした際に発生した。
今触ってるPCだと、そのサイトが対象でもエラー出ずにスクレイピングできる。なぜだ・・・環境の問題？

```python
import requests

url = 'https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8'
response = requests.get(url)

result = response.text
print(result)
```

そのときのエラーメッセージは控えられてないけど、`SSLError`で`bad handshake`という単語が含まれてたのは覚えてる

## 対処法

`verify=False`作戦は使いたくなかったので色々調べ倒したところ、`urllib`と`ssl`を使ったらエラー発生せずにスクレイピングできた。
ココさえ乗り越えれば、あとはBeaurifulSoup4使って欲しい要素だけ抜き出せばOK

```python
import urllib.request
import ssl

url = 'https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8'
context = ssl.SSLContext()
req = urllib.request.Request(url=url)
with urllib.request.urlopen(req, context=context) as f:
    result = f.read().decode()
print(result)
```

## 参考にしたサイト

* [pythonでAPIを叩いた時にSSL認証エラーでハマったときの対処法](https://qiita.com/j_tamura/items/5a22b102a58d1fa93a78)
* [Python requests で SSLError が起きて毎回ググってるのでまとめた](https://qiita.com/sta/items/6d08151fd9b20fa8b319)
Ruby の paypal-sdk-rest gem で発生する OpenSSL::SSL::SSLError: SSL_connect の解決方法

詳しいことは後日、もう少し追記する予定。

# 経緯

2020年8月11日の夕方ごろ（日本時間）から `paypal-sdk-rest` gem を使った支払いで下記のエラーが発生するようになった。

```
OpenSSL::SSL::SSLError: SSL_connect returned=1 errno=0 state=error: certificate verify failed (unable to get local issuer certificate)
```

# 対応方法

https://curl.haxx.se/docs/caextract.html から最新の `cacert.pem` をダウンロードして、 `config/certs/cacert.pem` に配置して、 `config/paypal.yml` に `ssl_options` の `ca_file` の設定を追加する。

```yaml:config/paypal.yml
development: &default
  mode: sandbox
  client_id: xxx
  client_secret: xxx
  ssl_options:
    ca_file: config/certs/cacert.pem
production:
  mode: live
  client_id: xxx
  client_secret: xxx
```

この設定で、ローカル開発環境、 production 環境ともに想定通り動作することを確認した。

# 別の解決方法

- [PayPal Ruby SDKのSSL_connectエラーの解消方法 - Qiita](https://qiita.com/NYC-Blue/items/f7b92c1d8bd5196f7789)

# 参考

- [paypal/PayPal-Ruby-SDK: Ruby SDK for PayPal RESTful APIs](https://github.com/paypal/PayPal-Ruby-SDK)
- [ruby on rails - OpenSSL::SSL::SSLError: SSL_connect returned=1 errno=0 state=error: certificate verify failed (unable to get local issuer certificate) - Stack Overflow](https://stackoverflow.com/questions/63221087/opensslsslsslerror-ssl-connect-returned-1-errno-0-state-error-certificate/63256245)
- [Remove Support of Verisign G5 Root Certificate](https://www.paypal.com/va/smarthelp/article/discontinue-use-of-verisign-g5-root-certificates-ts2240)
- [curl - Extract CA Certs from Mozilla](https://curl.haxx.se/docs/caextract.html)
Ethereum2.0のクライアントPrysmでビーコンチェーンのバリデーターになる

# はじめに
Ethereum2.0の移行が延長されているが、最終版のtestnetが発表された。
実際に動かしてみる方法と使用感、どのような変化があるかを動かしてみた。

テストネットはmedalla testnet

# テストネットへ登録

https://prylabs.net/
からtestnetへの参加登録する。

ちなみにPrysmはビーコンチェーンを使用するクライアント
ここからはtestnetにつなぐまでの手順を解説していく

## 注意
注意事項を読む

## deposit toolのダウンロード
OSごとのdeposit toolの実行ファイルをダウンロードし、実行。

<img width="945" alt="スクリーンショット 2020-08-07 22.44.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382669/9b4b4843-1054-1dd6-3c92-bc5cf61c8c60.png">

上から
今回作成するバリデータ数         -> 1 (幾つでも...ethがある分だけ)
ニーモニックに使用する言語        -> english
ネットワークの選択               -> medalla (testnet)
validator keystoreのパスワード -> xxx

バリデータになるためのGöETH1つにつき`32GöETH`必要。
(FaucetからGöETHのもらいかた)[https://qiita.com/sot528/items/ce578e0938c71575a528]

(medalla Faucet)[https://faucet.goerli.mudit.blog/]

deposit toolを実行すると
指定した数のバリデータキーストア(keystore-xxx.json)と一つのデポジットデータ(deposit_data-xxx.json)が生成される。

バリデータキーストアとtool実行中に出てきたニーモニックは秘密の安全な場所に保存しておく。
デポジットデータは次のステップでアップロードする。

## デポジットデータのアップロード

`~/validator_keys/deposit_data-timestamp.json`をアップロード

## バリデータになる

バリデータになるためのGöETHのトランザクションを作成。
アカウントがバリデータになって登録完了

# Prysmのクライアントいれる
Prysmの指示通りにインストールする
筆者はmacなのでmacのインストール方法でインストール

```sh
~ % mkdir prysm && cd prysm
~ % curl https://raw.githubusercontent.com/prysmaticlabs/prysm/master/prysm.sh --output prysm.sh && chmod +x prysm.sh
~ % ./prysm.sh beacon-chain
```

エラーが出た。gpgなるものがないらしいので入れました。

```
gpg is not available. Either install it or run with PRYSM_ALLOW_UNVERIFIED_BINARIES=1.
~ % brew install gnupg2
```

# アカウントをインポートする

さっき作ったバリデータのファイルをインポート

```

~ % ./prysm.sh validator accounts-v2 import --keys-dir=$HOME/eth2.0-deposit-cli/validator_keys
```

# ビーコンノードとバリデータの立ち上げ
バリデーターノードを立てるにはビーコンノードを立てる必要がある。

ビーコンノードの立ち上げ

```

~ % ./prysm.sh beacon-chain
```


バリデータの立ち上げ

```

~ % ./prysm.sh validator
```

# pending確認
バリデータに使用するアドレスをブロックエクスプローラーで確認する。

<img width="1362" alt="スクリーンショット 2020-08-08 16.48.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382669/fa75467f-4d83-b2a9-2d3b-73f196e23e2a.png">

ノードがバリデータの登録を完了するのに時間がかかる。
大体5~12時間ぐらいかかるって書いてあったけど4日って書いてある、、、

# Validator Active

<img width="987" alt="スクリーンショット 2020-08-12 16.48.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/382669/7beb372c-3a53-e275-70d5-c5e590c8f318.png">

validatorがactiveになれば成功

# まとめ

バリデーターを維持するにはずっと立ち上げとかないとならんのでデーモン化する必要ありそう

なんでか僕のバリデーターは不安定なのですぐスラッシュされそう、、、(ネットワークが原因? 解決法がいまいちわからない、、、)
Flutter テキストウィジェットの中でドルマーク$を使う方法

#テキストウィジェットの中で$を使うには？
<img width="448" alt="スクリーンショット 2020-08-12 20.43.47.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/19e04e5a-a862-c9e6-722a-6d431a6344ce.jpeg">
普通にjavascript感覚で`+`を使って合体させようとしても、$だけ使えない。。。

どうやらDartはそう言う仕様のようだ。

#バックスラッシュ（＼）が必要
<img width="285" alt="スクリーンショット 2020-08-12 20.36.18.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/467ff30b-b8d7-dcf4-4785-ef2fe3d44f95.jpeg">
こんな感じでバックスラッシュを使う事で、テキスト内に$を出せるように。

**※`/`ではなく`\`です！**
Spring Boot セッション属性(@SessionAttributes)の使い方

Spring Bootのセッションのやり方です。


#Formクラス

```java:LoginForm.java
public class LoginForm implements Serializable {

	@NotEmpty(message = "Enter Id")
	private String id;

	@NotEmpty(message = "Enter Password")
	private String password;

	private String check;
	private String radio;
	private String select;
//getter,setter省略
```

#Controllerクラス

```java:IndexController.java
@Controller
@RequestMapping("/index")
//@SessionAttributesは1つのController内で扱う複数のリクエスト間で
//データを共有する場合に有効。
//types属性にHTTPセッションに格納するオブジェクトクラスを指定する。
@SessionAttributes(types=LoginForm.class)
public class IndexController {

	/*
	 * オブジェクトをHTTPセッションに追加する
	 */
	@ModelAttribute("loginForm")
	public LoginForm setUpLoginForm(){
		return new LoginForm();
	}

	//Modelから取得するオブジェクトの属性名は、@ModelAttributeのvalue属性に指定する。
	//今回だと、LoginFormクラスのselectを指定している。
	@PostMapping("check")
	public String loginCheck(@ModelAttribute("loginForm") @Validated LoginForm loginForm, BindingResult res,
			@ModelAttribute("select") String select, Model model) {
		//入力チェック
		if (res.hasErrors()) {
			return "login";
		}
	}

	//今回だと、LoginFormクラスのidを指定している。
	@GetMapping("form")
	public String create(Model model, @ModelAttribute("id") String id) {
		return "create";
	}

}
```

#Viewからアクセスする実装例

```html
<h3 th:text=${loginForm.id}></h3>
<h3 th:text=${loginForm.select}></h3>
```
Windowsから接続先へのTCPポート確認

# Linuxならtelnetでポート確認いけるのに、、、、
Windowsにもtelnet入れられますが、インストールが必要になります。
あまり環境に手を加えられないことはよくあるはず。
そんな時にWindowsでtelnet替わりに以下の手法でポート確認しました。



#使い方

コマンドプロンプトにてpowershellを呼び出し

```
PS C:\> $tcp_chk = New-Object System.Net.Sockets.tcpClient
PS C:\> $tcp_chk.connect("10.0.0.10",8800)
PS C:\> $tcp_chk.connected
```

これで結果が

```
True
```

ならポートが開いていることがわかる


オブジェクトを閉じる

```
PS C:\> $tcp_chk.close()
```

ポートが開いてない場合は、以下のようなエラーとなるようです。

```
PS C:\> $tcp_chk = New-Object System.Net.Sockets.tcpClient
PS C:\> $tcp_chk.connect("10.0.0.10",8080)
"2" 個の引数を指定して "Connect" を呼び出し中に例外が発生しました: "接続済みの呼び出し先が一定の時間を過ぎても正しく応答しなかったため、接続できませんでした。または接続済みのホストが応答しなかったため、確立された接続は失敗しました。 10.0.0.10:8080"
発生場所 行:1 文字:1
+ $tcp_chk.connect("10.0.0.10",8080)
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (:) [], MethodInvocationException
    + FullyQualifiedErrorId : SocketException

```
[備忘録] expectの後ろは()か{}か。 (Module: RSpec::Matchers)

# 本編

RSpecのマッチャの書式についての個人的な小メモです。

## RSpecのバージョン

~~~
RSpec 3.9
  - rspec-core 3.9.2
  - rspec-expectations 3.9.2
  - rspec-mocks 3.9.1
  - rspec-rails 4.0.0.beta3
  - rspec-support 3.9.3
~~~

## ``expect``の後ろは``()``か``{}``か？

### 結論

下記のgem(``rspec-expectations (3.9.2)``)のドキュメントでMathersのページに各マッチャの記法が列挙されています。用例も多く掲載されています。([#change](https://www.rubydoc.info/gems/rspec-expectations/RSpec/Matchers#change-instance_method)など)

#### [Module: RSpec::Matchers — Documentation for rspec-expectations (3.9.2)](https://www.rubydoc.info/gems/rspec-expectations/RSpec/Matchers)

### ``expect(..).to be_xxx``に``{..}``を誤用した例

実際にシステムスペックのファイル内で``(..)``を``{..}``と書いてテストを実行した場合のエラーメッセージです。
``be successful``のマッチャを使用するには、ブロックではなく引数を渡さなければならないということは教えてくれています。

~~~rb:エラーメッセージ例
You must pass an argument rather than a block to `expect` to use the provided matcher (be successful), or the matcher must implement `supports_block_expectations?`.
      
# ./spec/system/doing_edit_spec.rb:11:in `block (2 levels) in <top (required)>'
~~~
scipy で多次元データ補間のメモ

## 背景

たとえば三次元位置 + 時刻の４次元の値での法線(vector 値)の補間とかやりたい.
nearest neighbor or linear 補間でよい

## scipy

Pythonでn次元のデータを補間して利用する方法
http://salamann.com/python-multi-dimension-data-interpolation

SciPy補間 (interpolate)
http://www.yamamo10.jp/yamamoto/comp/Python/library/SciPy/interpolate/index.php


`scipy.interpolate.interpn`, `RegularGridInterpolator` でよさそう(両方とも同じ?)

https://docs.scipy.org/doc/scipy/reference/generated/scipy.interpolate.interpn.html

データは等間隔グリッドであるする. ただし間隔は不等間隔でもよいので, 軸は 4 点でそれぞれ対応する間隔は `[0.0, 0.1, 0.5, 1.0]` みたいなのは OK(のはず).

```
import scipy.interpolate

nx = 4
ny = 4
nz = 4
nw = 4
datanum = 3 # vector data at each grid point 

x1 = np.arange(4) / (nx - 1)
x2 = np.arange(4) / (ny - 1)
x3 = np.arange(4) / (nz - 1)
x4 = np.arange(4) / (nw - 1)

points = (x1, x2, x3, x4)

data = np.arange(0, nx * ny * nz * nw * datanum)
data = np.reshape(data, (nw, nz, ny, nx, -1))
#print(data)
          
#fn = pts(*np.meshgrid(*points))

ip = scipy.interpolate.interpn(points, data, (0.5, 0.5, 0.5, 0.5))
print(ip)

[[382.5 383.5 384.5]]
```

一応うまく補間できているっぽい?

* TODO
  * [ ] 不等間隔なデータグリッドでの補間を試す: LinearNDInterpolator
    * 三次元ポリゴン頂点で値を補間したいときとか? しかし計算量かかりそうなので可能な限り等間隔グリッドにしてから処理するのがよさそう. 
  * [ ] 多次元での cubic 補間を試す: xとf(x)が両方とも3次元なデータを補間 https://qiita.com/hajimen/items/021f83905f20645124ce
現役Vueエンジニアが参考にしているフロントエンド素材まとめおすすめサイト４選

今回の記事ではフロントエンド開発で参考にしているサイトを紹介していきます。
どれも動くCSS素材やコピペだけで簡単に実装できる素材がまとまっています。

気に入ったサイトを自己判断で参考にしてみてください。


# [TwinzLabo](https://www.twinzlabo.com/)

**コピペだけで作れるデザインレシピを公開しています。動きのあるデザインやオシャレなWebデザインなど様々な記事があるのでおもちゃ屋さんに来たかのように楽しめます。**記事に使用しているアニメーションはVue環境で作成されているので普段Vueで開発している方はコピペだけできれいに反映させることができて便利です。**記事で紹介されているコードひとつひとつに詳しく解説がついているので初心者にはありがたいかと思います。**

[<img width="1440" alt="スクリーンショット 2020-08-12 20.09.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666060/39e8fcbb-a7ee-e13c-1ec1-c32b1049314a.png">](https://www.twinzlabo.com/)

---
# [Free Frontend](https://freefrontend.com/)

By using freefrontend.com you accept our cookies and agree to our privacy policy, including cookie policy. Read privacy policy. OK! Free Frontend. HTML + CSS. HTML Examples · CSS Examples · Bootstrap Examples · Speed Code.
いわゆるCodePenのまとめサイトです。コピペOKですがコードにはライセンスがあるので気をつけて使ってください。**参考になるデザインは多いので初心者の方には刺激になり面白いかと思います。**

[<img width="1440" alt="スクリーンショット 2020-08-12 20.19.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666060/6c1ea2b8-8098-1d80-4bf6-1c9e629f2a90.png">](https://freefrontend.com/)

---
# [サルワカ](https://saruwakakun.com/)

サルワカはあらゆることを分かりやすく解説するメディアです。フロントエンドを学習している方ならだれもが知っているサイト。ガンガン動くようなアニメーションは少ないですが、基礎的なデザインやCSSのエフェクトを学習したい方にはぴったりのサイトです。**無料でフロントエンドを学習したい！という方は是非。**

[<img width="1440" alt="スクリーンショット 2020-08-12 20.25.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666060/c7d9401a-ab83-d725-c56d-61a0e961be24.png">](https://saruwakakun.com/)

---
# [1stWebDesigner](https://1stwebdesigner.com/)

海外のサイトです。Webデザインで参考になる素材が多く見ているだけでも楽しいです。頭が湧いてきた際に眺めているとアイデアが湧いてくるのでいつも感謝しています。ただ、ちょっとページの読み込みが重いのが難点。。

[<img width="1437" alt="スクリーンショット 2020-08-12 20.27.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666060/7d5a07f1-1138-4714-015e-153f09f3246f.png">](https://1stwebdesigner.com/)

他にもいくつかありますが、最近特に参考にしているサイトはこんな感じです。
初心者の学習の励みになれたら本望です。
Reactで簡単にアコーディオンを実装できるライブラリ

## 概要
HTMLでアコーディオンを実装する方法はいくつかあります。CSSだけで実装する方法もあれば、Bootstrapなどのフレームワークを利用する方法も挙げられます。今回はReactのライブラリで簡単にアコーディオンを実装できるライブラリ[react-accessible-accordion](https://github.com/springload/react-accessible-accordion#readme)を紹介します。

## サンプル
クリック前はこんな感じで、
<img width="300" alt="スクリーンショット 2020-08-12 2.49.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/0f424bad-75b9-72a6-b9fb-2224035029c7.png">


クリックすると中身が表示される
<img width="300" alt="スクリーンショット 2020-08-12 2.50.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/da8d8fbf-a588-e360-1654-c0474518f744.png">

アコーディオンの実装サンプルです。

```SampleComponent.js
import React from "react";
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
} from "react-accessible-accordion";
import "react-accessible-accordion/dist/fancy-example.css";

export default function SampleComponent() {
  return (
    <div>
      <Accordion allowZeroExpanded>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>ヘッダー</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>内容</AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

```

## その他出来ること
* 詳細はこの[デモページ](https://react-accessible-accordion.springload.co.nz/)にまとめられています。
* 今回の私のサンプルではヘッダーが一つですが、ヘッダーを複数設定して一つしか開けないようにする、といった制御もできます。
* アコーディオンを開閉したときのイベントを拾えたり、アコーディオンのstateも取得できるようです。
PytorchでTensorboardを使ったらエラーが出た話

# はじめに
PytorchでTensorboardを使おうと思いインストールしてコードを書いて実行したらエラーに出会ったので、それの対処法を書きます。

# Tensorboardのインストール
anacondaを使っているので、以下のコマンドでインストールしました。

```
conda install tensorboard
```

# コード
SummaryWriterでグラフを書くためにimportします。

```python:tensorboard.py
from torch.utils.tensorboard import SummaryWriter
```

# エラー
下記のようなImportErrorが出ました。

```
ImportError: cannot import name 'SummaryWriter' from 'torch.utils.tensorboard' 

During handling of the above exception, another exception occurred:

ImportError: TensorBoard logging requires TensorBoard with Python summary writer installed. This should be available in 1.14 or above.
```

# 対処法
## とりあえず、アンストして再インストール
うまくインストールができなかったのかなと思い、アンストして再びインストールしました。
同じエラーが出ました。
ここで血迷ってpipでインストールもしたりしました。(pipとcondaの混同はあまりよくない)
結局、同じエラーが出ました。

## Pytorchのバージョン確認
Pytorchではv1.2.0から正式にTensorboardが使えるので、とりあえずPytorchのバージョンを確認しました。

```Python:
import torch
print(torch.__version__)
```
***1.5.1***でした。Pytorchの問題ではなさそうです。

## Tensorboardのバージョン確認
エラー文には,Tensorboardのバージョンは1.14以上と書いてあるので、確認しましょう。

```
conda list
```
***2.2.1***でした。Tensorboardの問題でもなさそうです。  

## ファイル名の変更
PytorchとTensorboardのバージョンを確認して大丈夫だったので、もうすることがありません。
何が原因でエラーを吐いているのかわかりません。

ファイル名をみてみると、***tensorboard.py***と書いてありました。
まさか、ファイル名とmoduleが衝突してimportできないことが原因なのでは？と思いました。

ファイル名を***tb.py***に変更しました。
そして、実行してみるとエラーが出ませんでした！！！！

# まとめ
PytorchでTensorboardを使おうと思いインストールしましたが、moduleとファイル名を同じにしてImportErrorが出ました。ファイル名とmoduleは別々にしましょう。
また、condaとpipの混同は避けましょう。
vscodeでpipenv使うと端末が勝手にpipenv環境内に入り込むの対処法

# 概要
vscodeのpython interpreterの設定がpipenv環境である場合に，vscode内の端末を開くと，勝手に `source $VENV_LOCATION/bin/activate`が実行されて，pipenv環境内に入ってしまう．
それだと，.envで設定したpipenv環境内での環境変数が反映されず困る．

# やりたいこと
vscodeのpython interpreter設定でpipenv環境が選択されていたとしても，端末で自動的にpipenv環境がactivateされないようにする．（あとから `pipenv run` なり `pipenv shell`を叩きたいのだ）

# 対処法
vscodeの設定画面を開き，
`python.terminal.activateEnvironment`を検索して，enableチェックを外す．
ただこれだけだったが，日本語では僕の検索能力ではヒットしなかったので，一応書いておく．
【UFT】「予期せぬエラー」が表示された時の対処方法

UFTでスクリプトを作成・編集などをしていると稀に予期せぬエラーが発生します。
発生原因は不明です（だから予期せぬエラーなんですけどね）

**このエラーが発生すると、最悪編集内容などが消えてしまします。**

# 対処方法
1.予期せぬエラーが表示されたら、編集中のテストコードをメモ帳にコピペする（退避）
2.<font color="Blue">保存せずに</font>UFTを終了する ←<font color="Red">保存をするとデータが消える場合があります</font>
3.UFTを起動して、編集中だったテストを開く
4.メモ帳にコピペしていたコードを戻す

# おわりに
予期せぬエラーは**予期しないエラー**なので、対策はできません。
経験してきた中では、UFT以外にも複数のアプリケーションを起動し、
メモリ使用率が高い場合に起きることが多かったような気がします。

対策できないので、現象が起きたときは慌てずに本記事の対処方法を使って乗り切ってもらえたらと思います。
mongooseを使ってMongoDBのドキュメントを検索するときに、取得するフィールドを指定したい

# はじめに

今までMySQLは使ったことがあったのですが、初めてMondoDBを使って、フィールド（RDBでいうカラム）を指定する方法がわからなかったので、まとめます。

# やりたいこと

以下のようなドキュメント（RDBでいうテーブル）があったとします。

id | name | age | birthday | address
--- | --- | --- | --- | ---
1 | Jack | 30 | 19900812 | A City
2 | Amy | 31 | 19890812 | B Town
3 | David | 32 | 19880812 | C Street

このドキュメントから、`id`と`name`だけ取得したいです。

RBDなら、以下のSELECT文で取得できるでしょう。

```sql
SELECT (id, name) from USERS;
```


# やり方

mongooseだと、以下の様に取得するフィールドを指定できます。

```javascript
UsersModel.find({},{ id: 1, name: 1 });
```

`find()`の第2引数のオブジェクトの中に、`フィールド名: 1`と書くと取得対象になり、
`フィールド名: 0`と書くと、取得対象**外**になります。（デフォルトは`1`みたいです）。

私がやったときは、上記のように書くと`_id`が必ずついて来てしまった（MongoDBの仕様?）ので、以下のように書いていました。

```javascript
UsersModel.find({},{ _id: 0, id: 1, name: 1 });
```
Ahead-of-Time コンパイル用 Numba 環境の導入 (Windows)

#はじめに
競技プログラミングの練習用に、
Ahead-of-Time (AOT) コンパイル可能な Numba 環境を導入するにあたり、
基礎知識が無さ過ぎてハマったので、備忘録を兼ね手順を以下に共有します。
実行環境は Windows です。詳細は文末に付記します。

#手順1：Numba のインストール
以下の公式ドキュメントを参考にしました。
https://numba.pydata.org/numba-doc/latest/user/installing.html#installing-using-conda-on-x86-x86-64-power-platforms

当初 pip でインストールした numpy と
conda でインストールした Numba が共存していたので、
念のため、両方アンインストール後 conda で Numba をインストールしました。

ちなみに、この段階で Numba を実行すると、Microsoft C++ (MSVC) コンパイラツールセットが無い、
というエラーが出力されます。
msvc が何のことやら分からず、ここでハマりました。

```text:error.txt
RuntimeError:
Attempted to compile AOT function without the compiler used by `numpy.distutils` present. Cannot find suitable msvc.
```

#手順2：C コンパイラの入手
以下を参考にしました。
https://www.python.jp/install/windows/install_vstools2017.html

2020/8/12 現在、インストールしたバージョンは以下です。

・Visual Studio Build Tools 2019 16.7.1

インストール後、再起動が必要です。

Windows 以外の環境で必要なコンパイラに関しては、以下を参照ください。
https://numba.pydata.org/numba-doc/latest/user/installing.html#installing-from-source

#実行確認
以下のサンプルコードを元に、my_module.xxxx-win_amd64.pyd の生成と、
他の実行ファイルによる my_module のインポートを確認しました。

https://numba.pydata.org/numba-doc/latest/user/pycc.html#standalone-example


#おわりに
Python しかプログラミングの経験がないので、
プログラムを（一部でも）コンパイルして、実行するのが楽しいです。
拙文ですが、どなたかのお役に立てば幸いです。

#参考：実行環境
```text:system.txt
(py38) C:\Users\test>python -m numba -s
System info:
--------------------------------------------------------------------------------
略）

__OS Information__
Platform Name                                 : Windows-10-10.0.18362-SP0
Platform Release                              : 10
OS Name                                       : Windows
OS Version                                    : 10.0.18362
OS Specific Version                           : 10 10.0.18362 SP0
Libc Version                                  : ?

__Python Information__
Python Compiler                               : MSC v.1916 64 bit (AMD64)
Python Implementation                         : CPython
Python Version                                : 3.8.2
Python Locale                                 : ja_JP.cp932

略）

__Installed Packages__
Package         Version
--------------- -------------------
certifi         2020.6.20
cycler          0.10.0
icc-rt          2019.0
intel-openmp    2019.0
joblib          0.14.1
kiwisolver      1.2.0
llvmlite        0.33.0
matplotlib      3.2.1
msvc-runtime    14.27.29016
numba           0.50.1
numpy           1.19.1
pandas          1.0.3
pip             20.2.1
pycc            2.0.0
pyparsing       2.4.7
python-dateutil 2.8.1
pytz            2020.1
scikit-learn    0.23.0
scipy           1.4.1
setuptools      49.2.1.post20200807
six             1.14.0
threadpoolctl   2.0.0
wheel           0.34.2
wincertstore    0.2

略）
```
【初心者向け】検証：HTMLのブロック要素に効かないCSSはあるのか

# どうも、7noteです。検証記事です。

## 検証：ブロック要素に効かないCSSはあるのか

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/block-ng/
javaScriptでURLのget情報を簡単に取得したい

##はじめに

・更新日:2020/08/12
~~忘れないように、また忘れたとき用のメモです。
ちょっとずつ追加していきます~~
修正前:自分のためのjsメモ
修正後:javaScriptでURLのget情報を簡単に取得したい
コメントで指摘があったので修正しました。

・更新日:2020/08/15
**※IEブラウザのみsearchParamsが使えないらしい**
#javaScriptでURLのget情報を簡単に取得したい


```javascript:script.js
//http://localhost/index.php?text=hogehoge&page=18
let params = (new URL(document.location)).searchParams;
let text = params.get('text');
let page = parseInt(params.get('page'));
console.log(text);
//hogehoge
console.log(page);
//18
```
参考→[MDN](https://developer.mozilla.org/ja/docs/Web/API/URL/searchParams)
深層学習(多層パーセプトロンなど)で使われる活性化関数まとめ

Kerasを使って深層学習のモデルの構築の際に、いろんな関数が出てきて、少しこんがらがっているので、多層パーセプトロンで使われる一通りの活性化関数をまとめてみました。今後も追加していく予定です。

# 活性化関数とは
ざっくり言ってしまうと、データを判別しやすくするために用いられる関数です。


# 中間層で用いられる活性化関数

## ReLU関数
Kerasでの表記`'relu'`。
入力値が0以上であれば、そのまま値を出力し、そうでなければ0を出力する関数。

深層学習でモデルを組む際に、中間層の活性化関数として一般的によく用いられてる関数だそうです。


#出力層で用いられる活性化関数

## シグモイド関数
Kerasでの表記`'sigmoid'`。
二値分類をする時に使用されます。
逆に言えば、二値以上の分類をすることはできません。

## ソフトマックス関数
Kerasでの表記`'softmax'`。
シグモイド関数ではできなかった多値分類ができます。

## 線形関数
Kerasでの表記`'linear'`。
その名の通り線形関数。入力値をそのまま出力する関数です。
Pythonでの乱数があるときのテスト

# Scientific Computing with Pythonの続き
freeCodeCampでコツコツPythonを勉強しています。
[前回の記事](https://qiita.com/makky0620/items/2eb431775a4540526966)では、今回は*Probability Calculator*に挑戦します。

- Python for Everybody
- Scientific Computing with Python Projects
    - Arithmetic Formatter
    - Time Calculator
    - Budget App
    - Polygon Area Calculator
    - *Probability Calculator(今回はここ)*


# 5問目:[Probability Calculator](https://www.freecodecamp.org/learn/scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator)

今回の問題は、学生の時くらいに確率の問題で解いたことがありそうな問題。
帽子（袋）に入っている色付きボールを複数個取り出したときの確率を求める。
具体的には、

- Hatクラスの作成
- experimentメソッドの作成: 確率を求めるためのメソッド

# 個人的ポイント: 乱数を使ったときのテスト

今回は帽子の中からランダムにボールを取り出すという処理があります。
以下のようなテストを書きたいときにうまくいきません。

```python
 1 import unittest
 2 
 3 class UnitTests(unittest.TestCase):
 4     # 赤い玉が5個、青い玉が2個入った帽子から2つボールを取り出したとき、赤い玉が1つ、青い玉が1つであること
 5     def test_hat_draw(self):
 6        hat = prob_calculator.Hat(red=5,blue=2)
 7        actual = hat.draw(2)
 8        expected = ['blue', 'red']
 9        self.assertEqual(actual, expected, 'Expected hat draw to return two random items from hat contents.')
10        actual = len(hat.contents)
11        expected = 5
12        self.assertEqual(actual, expected, 'Expected hat draw to reduce number of items in contents.')
```

7行目で2つボールをひく時、内部の実装では乱数を使っているので、必ずしも赤い玉が1つ、青い玉が1つであるとは限らないです。
これを解決するために`乱数のシード`を使います。

```python

import random

balls = ['red', 'red', 'red', 'red', 'red', 'blue', 'blue']

random.sample(balls, k=2)
# ['red', 'red']
random.sample(balls, k=2)
# ['red', 'blue']

random.seed(0)
random.sample(balls, k=2)
# ['blue', 'red']
random.seed(0)
random.sample(balls, k=2)
# ['blue', 'red']
```

このように事前に乱数のシードを設定することによって、常に同じ挙動をさせることができます。


# 最後に
Scientific Computing with Pythonが一通り終わった！
次はData Analysis with Python Certificationをやり始めようと思います！
ReactでCanvasを使う

ReactでCanvas APIを使う場合どういうタイミングで初期化したらいいかとか
どう状態を持ったらいいか慣れないと結構悩みどころなのでざっくりシンプルなサンプルで実装

```jsx:app.js
import React,{useState,useEffect} from "react"
import ReactDOM from "react-dom"

const App = () => {
	// contextを状態として持つ
	const [context,setContext] = useState(null)
	// 画像読み込み完了トリガー
	const [loaded,setLoaded] = useState(false)
	// コンポーネントの初期化完了後コンポーネント状態にコンテキストを登録
	useEffect(()=>{
		const canvas = document.getElementById("canvas")
		const canvasContext = canvas.getContext("2d")
		setContext(canvasContext)
	},[])
	// 状態にコンテキストが登録されたらそれに対して操作できる
	useEffect(()=>{
		if(context!==null)
		{
			const img = new Image()
			img.src = "img.jpg" // 描画する画像など
			img.onload = () => {
				context.drawImage(img,0,0)
				// 更にこれに続いて何か処理をしたい場合
				setLoaded(true)
			}
		}
	},[context])
	useEffect(()=>{
		if(loaded)
		{
			// それに続く処理
		}
	},[loaded])
	return <canvas width="1280" height="720" id="canvas"></canvas>
}
ReactDOM.render(<App />, document.getElementById('root'))
```

のようにHooksのトリガーで順番に制御していけばタイミング問題でそれほど悩まずにReactでもCanvasが使えるはず
Pythonのクラス継承の問題を解いてみる

# Scientific Computing with Pythonの続き
freeCodeCampでコツコツPythonを勉強しています。
[前回の記事](https://qiita.com/makky0620/items/6b577f7f4ea8101ed261)では、今回は*Polygon Area Calculator*に挑戦します。

- Python for Everybody
- Scientific Computing with Python Projects
    - Arithmetic Formatter
    - Time Calculator
    - Budget App
    - *Polygon Area Calculator(今回はここ)*
    - Probability Calculator


# 4問目:[Polygon Area Calculator](https://www.freecodecamp.org/learn/scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator)

求められてることは以下の通り

- Rectangleクラスの作成
- Squareクラスの作成

```
rect = shape_calculator.Rectangle(10, 5)
print(rect.get_area())
rect.set_height(3)
print(rect.get_perimeter())
print(rect)
print(rect.get_picture())

sq = shape_calculator.Square(9)
print(sq.get_area())
sq.set_side(4)
print(sq.get_diagonal())
print(sq)
print(sq.get_picture())

rect.set_height(8)
rect.set_width(16)
print(rect.get_amount_inside(sq))
```

```
50
26
Rectangle(width=10, height=3)
**********
**********
**********

81
5.656854249492381
Square(side=4)
****
****
****
****

8
```

# 個人的ポイント: 特になし…

## Rectangleの実装

```python
class Rectangle:
    def __init__(self, width, height):
        self.width = width
        self.height = height

    def set_width(self, width):
        self.width = width

    def set_height(self, height):
        self.height = height

    def get_area(self):
        return self.width * self.height

    def get_perimeter(self):
        return 2 * self.width + 2 * self.height

    def get_diagonal(self):
        return (self.width ** 2 + self.height ** 2) ** .5

    def get_picture(self):
        if(self.width >= 50 or self.height >= 50):
            return "Too big for picture."

        row = "*" * self.width
        return "\n".join([row for idx in range(self.height)]) + "\n"

    def get_amount_inside(self, shape):
        return int(self.get_area() / shape.get_area())

    def __str__(self):
        return f"{self.__class__.__name__}(width={self.width}, height={self.height})"
```


# 最後に
唯一調べたのは、クラス名を取得するのってどうだっけ？という部分だけでした。
成長しているのか？

次の問題は[*Probability Calculator*](https://www.freecodecamp.org/learn/scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator)です。
PowerBIの上位Nフィルタで絞った順位と表示したテーブル順位がずれる


![名称未設定-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678689/81f6ce4a-6cf7-5d8e-0e1b-116b4d77df83.png)

番組名と番組開始時刻ごとの視聴率を表示するテーブルを作成しました。
視聴率で降順ソートかけて、視聴率が高い順に番組を表示しようと。
ただ、番組全部表示するとあまりにも多いので、番組名に「上位Nフィルタ」をかけて、8件だけ表示するようにしていました。

しかし、問題発覚。
上位8件だけ表示していたのを、30件表示しようとしてみたら、それまで8位以内に表示されていなかった番組が、急に2位に出てきたんです。

結論から言うと、単純なミスでした。

# 複数カラムのテーブルは上位Nフィルタかけないほうが無難
ただし、すべてのカラムがユニークでない場合は、です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678689/dd08207b-2117-9a5e-3f45-c62f7047b2f6.png)

上位Nフィルタってこんな感じでかけますよね。
例えば「番組名」というデータに対して、「平均視聴率」の上位N個を表示するように指定します。
しかし一方で、テーブルに表示されているのは「番組名」「視聴率」に加えて、「番組開始時刻」もあります。
ここで問題になるのが、番組名がユニークでない場合、つまり同じ番組の再放送があったりすると、表の中ではそれぞれ別の行として表示するんです。
つまり、テーブルの中に表示されるのは、放送時刻と番組名がバラバラなデータなのに対して、フィルタでは放送時刻を無視した、全ての再放送を含めた平均視聴率で計算されてしまいます。

例えば、上位8位のフィルタをかけているとき、8位の番組の番組平均視聴率が10%だったとします。
ある番組Aは、10回再放送されており、1回だけ30%の視聴率を取った回がありましたが、10回の平均を見ると9%です。
この番組Aは平均視聴率が9%なので、上位8フィルタの時点ではじかれてしまっています。
しかし、上位Nの数を30に設定したら、表示されるようになりました。
表示されるようになったものの、表示されるときは番組丸ごとではなく、放送時刻が違う回ごとで表示されるので、30%という視聴率を取った回が1位に躍り出ました。

というような感じです。

結論、ユニークではない複数カラムのテーブルをつくってソートするとき、上位Nフィルタは使わないほうが無難だなと思いました。
上位だけ表示させたい動機ってそんなに強くないですし。

ちゃんと放送時刻×番組名での上位Nを表示させたかったら、放送時刻×番組名での平均視聴率を算出するメジャーを作ってやるべきですかね。
ともかく、フィルタの集計に使うデータと表示されるデータを一致させておかないと怖いなと思いました。