OmniAICreator/Qiita-1.07M huggingface dataset:
NestJs + Docker


##### プロジェクトをインストールして作成

一時的なDockerコンテナーを作成する

Make temporary docker container 

```bash
sudo docker container run -it -v $(pwd):/app -w /app node:12.13.1-alpine /bin/sh
```

そのDockerコンテナ内に「nest-cli」をインストールして新しいプロジェクトを作成します

Inside that docker container, install the `nest-cli` and make a new project

```bash
$ npm i -g @nestjs/cli
$ nest new project-name
```

プロジェクトが作成されたら、プロジェクトの内部に入り、依存関係をインストールします

Once your project is created, get inside the project, and install dependencies

```bash
$ cd project
$ npm install
$ npm run start
```

完了したら、コンテナを終了できます。

Once done, you can exit the container.

プロジェクトファイルの所有者を変更します。

Change the owner od the project files.

```bash
sudo chown -R myuser:myuser <project-name>
```

##### 開発モードを実行するようにDockerを構成する


プロジェクトディレクトリ内に「Dockerfile」を作成します

Inside the project directory, create a `Dockerfile`

```dockerfile
FROM node:12.13.1-alpine 

WORKDIR /app

RUN apk update && \
    apk add git && \
    npm install -g npm && \
    npm install -g @nestjs/cli

ENV HOST 0.0.0.0
EXPOSE 3000
```

また、 `docker-compose.yaml`も作成します

and also create a `docker-compose.yaml`

```yaml
version: '3'

services:
  nest:
    build: .
    tty: true
    command: npm run start:dev
    volumes:
      - .:/app
    ports:
      - "3000:3000"
```

作成後、 `localhost：3000`にアクセスすると、` Hello World`ページが表示されます。

Upon creation, you can visit  `localhost:3000`, you should see the `Hello World` page.

ウォッチをテストするには、 `app.services.ts`のgetHello（）を編集します。編集したら、ページを更新して変更を確認できます。

To test the watch, you can edit the `app.services.ts` getHello(), once edited, you can refresh the page, to see the change.

##### 新しいコントローラーを作成する


```bash
sudo docker-compose exec nest nest generate controller cats
```

これはプロジェクトの `src`ディレクトリの中に` cats`ディレクトリを作成します

This will create a `cats` directory inside the `src` directory of the project

私の例をコピーして貼り付けることができます

You can copy-paste my example

```typescript
import { Controller, Get, Req, Param } from '@nestjs/common';

@Controller('cats')
export class CatsController {
    @Get()
    findAll():Object{
        var test = {id:1,name:"my cat"}
        return test;
    }
    @Get("filter")
    getFilter(@Req() req):Object{
        return {id:req.query.id,name:"my cat id"};
    }
    @Get(':id')
    findOne(@Param() params): string {
    return `This action returns a #${params.id} cat`;
    }
}
```

`localhost:3000/`

`localhost:3000/filter?id=55`

`localhost:3000/20`
webkitブラウザでは、css mask画像を取得する時に、同一オリジン下でもリクエストヘッダーにOriginを付ける

# CSSマスクに関して、Safariにはバグがある
表題の通り、CSSマスクに指定した画像を取得する際に、同一オリジンのものであってもRequest headerにOriginを付けるようだ。

```css
  -webkit-mask: url(../images/mask.png) no-repeat center top / 100% auto;
  mask: url(../images/mask.png) no-repeat center top / 100% auto;
```

<img width="866" alt="スクリーンショット 2020-05-21 13.12.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31785/dbc0e064-3541-9667-c54f-1a7b91f28697.png">

他の画像ファイルでは、ヘッダーに`Origin`はついていない。
Safari以外のブラウザでもChromeでも同様に`Origin`がついているので、Webkit系の挙動なのだろう。どうも**cssマスク画像だけ、他の画像と違う扱いが行われている**ようなのだ。
Firefoxではついていないことを確認した。

## どのような問題があるか
リクエストヘッダーが他の画像と異なることでどのような問題が発生しているかというと以下の通りである。
（正確にはこれが原因というか、このことから推測されるブラウザの挙動に関連する問題というべきか。）
この問題は**Safariでのみ（Mobile Safariを含む）**発生する。

### Basic認証が複数回発生する
Basic認証をかけたサイトにアクセスする時、IDとパスワードを聞かれるわけだが、
通常は一度入力すれば、サイト全体が表示される。
しかし、`-webkit-mask`で指定した画像は、再度basic認証を聞かれるようなのだ。
調査したところ、他の画像との違いはリクエストヘッダーに`Origin`があるか否かという点だった。
おそらく別環境のソースだと認識され、なんども認証を求めてくるのではないだろうか。

#### 対処法
今のところ見いだせてない。
当然ながらこの問題は本番環境では発生しないわけなので、対処法を探しても詮無い。

#### 2回認証すればよいのではないか
それはそうなのだが、問題は受託制作でクライアント確認時に起こる。
1回目の認証で、サイト全体はロードされ始めていて、2回目の認証時ダイアログの裏ではもうサイトのレンダリングが完了しているように見えるので、そこで認証をキャンセルしてしまうという事態が発生する。
そして、`-webkit-mask`が読み込めずに表示崩れが起こり、「崩れているんだけど」と問い合わせが来る。
面倒だけど、サボらずに複数回のBasic認証をクリアしてくださいとしか言えない。
【rails6】bootstrapの導入

#はじめに
rails6でのBootstrapの導入につまづいたので備忘録として残しておきます。

##1.インストール
ターミナルで以下のように入力して、必要なものをインストールしてください。
*事前にyarnのinstallは済ませておいてください。

`yarn add bootstrap jquery popper.js`

##2.webpack
ここではwebpackについての詳細は省きます。
次にenvironment.jsの中身を以下のようにしてください。
プラグインとして読み込むための設定になります。

```Ruby:app名/config/webpack/environment.js
const { environment } = require('@rails/webpacker')

##以下追加
const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

```

## 3.application.scssの作成
app/javascript/packs/src配下にapplication.scssを作成します。そして中身を以下のように記述します。

```Ruby:app/javascript/packs/src/application.scss
@import "~bootstrap/scss/bootstrap";
```

最後に、以下のように追加してサーバーを立て直せばbootstrapが使えるようになっています！

```Ruby:app/javascript/packs/application.js
import "bootstrap";
import "./src/application.scss";
global.$ = jQuery;
```

##終わりに
何か修正点などがあれば教えていただけますと助かります。
PHP foreachで配列の最初と最後に処理を追加する

## 環境

- PHP 7.3 以上

## コード

```php
$items = [
    'tokyo' => '東京',
    'shibuya' => '渋谷',
    'harajuku' => '原宿',
    'yoyogi' => '代々木',
];

$keyFirst = array_key_first($items);
$keyLast = array_key_last($items);

foreach ($items as $key => $value) {
    if ($key === $keyFirst) {
        echo "$value is first" . PHP_EOL;
    }
    if ($key === $keyLast) {
        echo "$value is last" . PHP_EOL;
    }
}
```

## 実行結果

```
tokyo: 東京 is first
yoyogi: 代々木 is last
```

### 補足: 配列から最初と最後の値だけ取り出したい場合

```php
echo "{$items[array_key_first($items)]} is first" . PHP_EOL;
echo "{$items[array_key_last($items)]} is last" . PHP_EOL;
```

## 参考

- https://www.php.net/manual/ja/function.array-key-first.php
- https://www.php.net/manual/ja/function.array-key-last.php
Ubuntu20.04にChromeをインストールする

Ubuntu20.04にChromeをインストールしてみた。

## 環境
Ubuntu 20.04

## 手順
下記URLに移動し、赤枠のリンクをクリックする。
https://support.google.com/chrome/answer/95346?co=GENIE.Platform%3DDesktop&hl=ja
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/1beec4b1-3c12-eb74-7520-e5f1e5c6c828.png)
「Chromeをダウンロード」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/fa546758-bf88-20f3-ccbd-08001b9c3a2b.png)
「同意してインストール」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/6c22cc9a-d504-2285-d0d1-2e340d5dee97.png)
「ファイルを保存する」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/a61d484a-c7a3-c015-8477-a4a9fac8fd2b.png)
DLしたファイルを展開する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/9553bd4c-a7c7-7129-8cc1-f0c37eeb8782.png)
別のアプリで開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/5b5bdcbb-5eac-adaa-7999-e39305c31565.png)
ソフトウェアのインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/4f1e28ac-db95-6417-d570-93fd719ea7f4.png)
インストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/628d832e-8e4e-b8c8-2164-fa8775f42d2f.png)
認証パスワードを入力し、インストールを続行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/a5685948-e36a-3f75-2888-e94a7d169c43.png)
完了すると、アプリ欄にGoogleChromeのアイコンが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223945/ee77cd9e-8626-fa6b-df56-cfa2b74ae7f1.png)
完了!!!

P.S.
別のアプリではなく、パッケージをDLした場所に移動した後、
<pre>
sudo apt install ./google-chrome-stable_current_amd64.deb
</pre>
と入力してもOKです。
金融予測フィーチャーエンジニアリング編:　金融予測における特徴量とは 

# 前置き
どうも、KOです。いつも見ていただき、ありがとうございます。
ずっと金融のラベリングの話ばかりしていて、投資家であるならば、投資戦略を考えた上で、投資戦略を分析するためにはどうすれば良いのかについて考えている方も多いと思います。
多くの投資家は、先に市場を分析して投資戦略を考える方が多いと思いますが、こちらでは逆で、金融の機械学習では、投資戦略を考えてから市場にフィッティングさせる方が一般的だと思います。（一般的とか言って私だけに当てはまるのかもしれませんが（笑）

[参考文献はこちら](https://www.amazon.co.jp/Advances-Financial-Machine-Learning-English-ebook/dp/B079KLDW21)になります。

# 特徴量の考え方の基本
まず、投資戦略を一つ決め、ラベリングをします。そして、バックテストをします。
実は、これは何もしていないんですね。ここで良い成績が出たからといって、それがたまたまかもしれないですし、実際に運用するには考えなきゃいけないことは、「**この戦略が将来でも通用するのか**」だと思います。
つまり、バックテスト自体は成績を保証するものではなく、ただ単に過去の市場における投資戦略を表示しているに過ぎないんですね。
ここで重要な論理関係について説明しましょう。
「常に利益が出る戦略」⇒「過去でもその戦略は利益が出ている」
この論理関係は正しいですが、逆は明らかに成り立ちません。
厳しいことを言っているように聞こえますが、実務で応用するには、この原理を踏まえて分析をする必要があります。
つまり、特徴量とは投資戦略をよりマーケットにフィッティングさせるための変数であると考えています。鬼に金棒の金棒ってことですね。

# 特徴量エンジニアリングにおける定義

インサンプル(In sample):訓練データ
アウトオブサンプル(Out of sample):テストデータ
代替効果(substitution effect)：ある特徴量の推定重要度が他の関連する特徴量の存在によって削減されるときに生じる効果のこと。

# 代替効果による特徴量重要度

## 平均不純度減少量(Mean Decrease Impurity)

MDI(:=Mean Decrease Impurity)は、ランダム木(:=RF)のようなツリーベース分類器特有のインサンプルで説明上での重要度を図る方法である。
つまり、RFのfeature_importanceがたくさんあったときにどのように特徴量を見つけるかどうかである。
先にMDIの手法についてコードを通して解説する。

```python
def featImpMDI(fit, featNames):
    df0 = {i: tree.feature_importances_ for i, tree in enumerate(fit.estimators_)}
    df0 = pd.DataFrame.from_dict(df0, orient='index')
    df0.columns = featNames
    df0 = df0.replace(0, np.nan)
    imp = pd.concat({'mean':df0.mean(), 'std':df0.std()*df0.shape[0]**-.5}, axis=1)
    imp /= imp['mean'].sum()
    return imp
```

まずいくつかの特徴量を用意します。
ここで、このメソッドの中では、最初の4行は既にフィットしたモデルから、`model.feature_importances_`をデータフレーム化しています。
ランダム木なので、大量の木それぞれに対して特徴量の重要性が計算されています。
ここで、`0`と表示されてしまった特徴量に対しては`np.nan`にします。これは特徴量の重要度の最大値を`1`にするためです。
あとは、行方向(axis=1)に対して平均と標準偏差を計算し、それを平均特徴量として出力します。
以下にランダム木を使用したことない方に基本的な使い方を紹介します。

```python
from sklearn.ensemble import RandomForestClassifier as RF

model = RF(max_features=1)
model.fit(X_train, y_train)
model.feature_importances_
```

## ランダム木のパラメーターの選び方
- マスキング効果(分類気がある特徴量をシステマティックに無視し、他の特徴量を重視することである。)を回避するために、`max_features = int(1)`とする。そうすることにより、階層ごとにランダムな１つの特徴量のみが選択される。
- この手法はインサンプルでのみ用いるべきである。たとえ、ここで予測力が全くなかったとしても、全ての特徴量はある程度の重要度をもつことになる。
- MDIをツリーベース以外の分類器に対して一般化し、適用することは出来ない。
- 構造上、MDIには特徴量重要度の合計が1になり、各重要度は0から1の間になる。
- この手法は、相関を持つ特徴量が存在する際の代替効果を考慮していない。つまり、同じ特徴量が2つあれば重要度は半分になるので気を付けるように。これは結構重要な話なので、将来別の記事で書きたい。

- いくつかの予測変数に偏ることがある。単一の決定木においては、この偏りは一般的な不純度関数が多くのカテゴリを持つ予測変数を不公平に重視することによってもたらされている。（Strobl et al.[2007])

# 結論
今回は金融における特徴量の位置づけや予測における気を付けるべきことを紹介させていただいた。
特徴量の評価方法で投資戦略にどのように貢献させるか等についても技術的な話になるので、今後ゆっくり紹介していきたいと思う。
Git 空コミットを行う

## 〜宣伝〜

:::note info
個人開発でエンジニア専門マッチングサービスを開発しましたので、是非未経験からエンジニア目指している人！現役エンジニアで教えたい人！使ってみてください！
:::
https://dokupro.dev/

## 概要

- Gitにて空コミットを行う方法をまとめる

## 詳細

- 下記コマンドをGitによる管理が行われているディレクトリで実行する。

    ```terminal
    git commit --allow-empty -m "コミットメッセージ"
    ```

- リポジトリ作成時の最初期のコミットなどには下記を実行する。

    ```terminal
    git commit --allow-empty -m "first commit"
    ```

## 関連記事

https://qiita.com/miriwo/items/cfc7d486081d0b6aee1e
Vagrant CentOS8 v1905.1 で失敗する人

# 忙しい人向け

`config.vbguest.installer_options` というオプションを付けるとちゃんと`vagrant up`する

```:Vagrantfile
Vagrant.configure("2") do |config|
  config.vm.box = "centos/8"
  config.vbguest.installer_options = { allow_kernel_upgrade: true }
end
```

vagrantのバージョン: 2.2.9で確認


# 別解

```:Vagrantfile
Vagrant.configure("2") do |config|
  config.vm.box = "centos/8"
  config.vm.box_url = "http://cloud.centos.org/centos/8/x86_64/images/CentOS-8-Vagrant-8.1.1911-20200113.3.x86_64.vagrant-virtualbox.box"
```

この場合、一旦`centos/8`のイメージを削除する必要があるのでひと手間かかる。
ローカルイメージとして`centos/8`が出来るのかな。
boxの名前を変えれば(centos/8_localとか)イメージ削除しなくてもできるかもしれない（未検証）

# 参照記事

[VagrantでCentOS8を起動すると「Error: Unknown repo: 'C*-base'」のエラーが出る](https://qiita.com/You_name_is_YU/items/a7e2ca82ba48faee8e97)
TDPC N 木　

##問題
https://atcoder.jp/contests/tdpc/tasks/tdpc_tree
##見た感じ
ある頂点を固定して、そこを根とする木を上から順に塗っていけば計算しやすそうだなと思って、ノードがN<=1000個あるから、各ノードiについて、それを根とする木を考えて、その木における上から連結性を満たして塗る通り数を$count_i$とすれば、$ans=\sum_{i}count_i$で求める方向で考えた。
ここで、$count_i$をいかに早く計算できるか、できれば$O(N)$で計算できるかについて、結構悩んで時間がかかった。
それで、以下の漸化式が成り立ちそうだなと思った。

```math
 dp[now][past]=past番目のnodeからnow番目のnodeへの線を含まないnowを\\根とする部分木(これをtree[now][past]とかく)を塗っていく場合の数\\
v[now]=nowから線でつながるnode全体の集合\\
m=\sum_{w\in v[now]\wedge w\neq past}|~tree[w][now]~|\\
dp[now][past]=m!\prod_{w\in v[now]\wedge w\neq past} \frac{dp[w][past]}{|~tree[w][now]~|!}
```
つまり、node vのpastを除く子$w_1 ,\dots w_l$について、簡単のため$l=2$とすると、v以下の木を塗る場合の数は重複組み合わせから

```math
{ }_{|~tree[w_1][now]~|+|~tree[w_2][now]~|}C_{|~tree[w_2][now]~|}*dp[w_1][now]*dp[w_2][now]
```
になっている。
これで、部分木を塗る場合の数は計算できたが、ある頂点を根として数えるやり方では、例えばある葉を根とした時とその横の葉じゃないやつを根とした時で数え上げに被りがあるのがわかったので、最初に塗る線を固定して、それについて数え上げることにした。
##解法
各線{v,w}について$dp[v][w]$と$dp[w][v]$を計算て、それについて、上の要領で場合の数を計算して、$ans$に足していく。
##ソースコード
```c++
const int N_MAX=1001;
vector<edge> v[N_MAX];
long n;
combination c(N_MAX+5);\\combinationの表を生成
pint a[N_MAX];\\pint=pair<int,int>
typedef pair<mint,int> p;\\mint=int%mod=1000000007
p dp[N_MAX][N_MAX];

p solve(int now,int past){
    int s=v[now].size();
    if(dp[now][past].second>=0)return dp[now][past];
    if(s==1){
        return dp[now][past]=p(1,1);
    }
    p res=p(1,1);
    rep(i,s){
        if(v[now][i].to==past)continue;
        res.second+=solve(v[now][i].to,now).second;
    }
    int m=res.second-1;
    rep(i,s){
        if(v[now][i].to==past)continue;
        res.first*=c(m,dp[v[now][i].to][now].second);
        res.first*=dp[v[now][i].to][now].first;
        m-=dp[v[now][i].to][now].second;
    }
    return dp[now][past]=res;
} 

int main(){
    int i,x,y;
    //入力
    cin>>n;
    rep(i,n-1){
        cin>>x>>y;
        a[i]=pint(x-1,y-1);
        v[x-1].push_back(edge(y-1));
        v[y-1].push_back(edge(x-1));
    }
    //処理
    rep(i,n){
        rep(j,n){
            dp[i][j].second=-1;
        }
    }
    mint ans=0;
    rep(i,n-1){
        mint res=1;
        x=a[i].first;
        y=a[i].second;
        p resx=solve(x,y),resy=solve(y,x);
        res*=c(resx.second+resy.second-2,resx.second-1);
        res*=resx.first;
        res*=resy.first;
        ans+=res;
    }
    //出力
    puts(ans);
}
```
##　振り返り
部分木をnodeの順序のある組$(v,w)$に対応付けられるというのは発見だった。
An unsupported Java version エラーを消す方法

Visual Studio Code で Salesforce Apex Extension をインストールした際に表示される Java のバージョンエラーですが、特に実害もなかったのでずっと放置していました。ところが最近になってウェブセミナーの実施中に飛び出してくと格好悪いと思い、一念発起して解消しておくことにしました。今回は、その方法についてのご紹介です。
<img width="902" alt="Screen Shot 2020-05-21 at 13.35.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26378/51f9d067-b9f5-9b4b-42ac-82f027f83474.png">

# エラーの内容
エラーはメッセージは以下の通りで、Java 8 か 11 を使ってね、というメッセージとともに設定方法（英語）へのリンクが表示されます。

>An unsupported Java version was detected. Download and install [Java 8](https://java.com/en/download/) or [Java 11](https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-5066655.html) to run the extensions. For more information, see [Set Your Java Version](https://forcedotcom.github.io/salesforcedx-vscode/articles/getting-started/java-setup).

<img width="551" alt="Screen Shot 2020-05-21 at 10.14.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26378/407374b5-1c28-3384-2fe6-689a17deb034.png">

## Java 11 をダウンロードとインストール

[設定方法（英語）のページ](https://forcedotcom.github.io/salesforcedx-vscode/articles/getting-started/java-setup)では、以下の 4 つの JDK での設定方法が紹介されているので、環境に合ったものを選びましょう。

- AdoptOpenJDK
- Zulu
- Oracle Java 11
- Oracle Java 8

私の場合は、Salesforce コミュニティの先輩方に教えてもらった Zulu にしました。
Salesforce のデータローダーも[システム要件として Zulu OpenJDK バージョン 11 を指定している](https://help.salesforce.com/articleView?id=installing_the_data_loader.htm&type=0)ので合わせておくことにします。

## VS Coce の設定
あとは、[設定方法（英語）のページ](https://forcedotcom.github.io/salesforcedx-vscode/articles/getting-started/java-setup)の指示に従って VS Code の設定ファイルに以下の記述を追記します。

```json:setting.json
{
  "salesforcedx-vscode-apex.java.home": "/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home"
}
```

これで、エラーとはおさらば出来るはずです。
JWT認証とは? Session認証との違いを簡単なイメージでまとめてみた

# JWT認証とは
トークンによる認証方式のひとつ。
名称のとおり、JWT(JSON Web Token)形式のトークンを用います。
ちなみに、JWTは「ジョット」と読みます。

## JWTの構造
ヘッダー、ペイロード、署名の3つの要素で構成される。
下図のような構造になっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308386/0537a400-8729-287d-699e-7f2bba421c6c.png)


### ヘッダー
通常、2つの要素で構成される。

```json:header.json
{
    "alg" : "HS256",
    "typ" : "JWT"
}
```

`alg`：使用する署名アルゴリズム（HMAC SHA256やRSAなど）を指定する。
`typ`：トークンの形式を指定する。

上記のJSONをBase64UrlエンコードしたものがJWTの最初の要素です。

### ペイロード

認証情報などのクレームを格納します。
（トークン内で保持する任意の情報ををクレームと呼びます。）

```json:payload.json
{
    "id" : "1234567890",
    "name" : "John Doe",
    "exp" : "2020/05/18" 
}
```
標準で登録済みのクレームがありますが、独自のクレームを使うこともできます。
上記のJSONをBase64URLエンコードしたものがJWTの2番目の要素です。


### 署名

トークンが途中で改ざんされていないことを確認するためのものです。

署名を生成するには、

- エンコードされたヘッダー
- エンコードされたペイロード
- 秘密鍵

をヘッダーの`alg`で指定したアルゴリズムでハッシュ化します。
例えば、HMAC SHA256アルゴリズムを使用する場合、以下のように署名が生成されます。

```:署名
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)
```
以上のようにして生成した署名が、JWTの3番目の要素です。

## JWTの注意点

署名付きトークンの場合、この情報は改ざんから保護されていますが、誰でも読み取ることができることに注意してください。暗号化されていない限り、JWTのペイロードまたはヘッダー要素に秘密情報を入れないでください。

# Cookie（Session）による認証とJWT認証の違い

JWT認証とCookie（Session）による認証の違いを簡単なイメージにまとめてみました。

#### Cookie(Session)による認証

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308386/f2dbc0cc-6179-bd99-6360-e29a43019679.png)

セッションの状態（認証情報など）はサーバー側で保持されている。（ステートフル）
Cookieで保存されたセッションIDをリクエストとともに送信することでセッションの状態を取得できる。

#### JWT認証

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308386/75651e7f-81d7-ad8d-7ccc-6606ba1d259d.png)


サーバーは認証情報などの状態を保持しない。（ステートレス）
サーバー側に保管されている秘密鍵がないと改ざんはできない。

# 備考

より詳細については、随時追記していきたいと思います。
ReactのkeyにはMath.random()が使いやすい

オブジェクトのID等をkeyとして渡していた時に、意図せず同じオブジェクトをレンダリングして重複したIDが渡ると、コンポーネントの更新等に不具合が起きるので、Math.random()使っておけばいいという結論に達しました。
WindowsのVSCode上にAtCoder向けC++環境構築したときのメモ

AtCoderに挑戦するぞということでまずは環境を整えることからスタートしました！

基本の設定はこちらに従ってやっていきます。

Visual Studio Codeで競プロ環境構築(導入編)
https://qiita.com/AokabiC/items/e9312856f588dd9303ed

チュートリアルとの違いは
- Ubuntu 20.04をインストールした（最新版だったので）。
- ubuntuで```code```と入力して、vscodeの環境が整い、勝手にwslと繋がりました。
- C/C++ Compile Runというエクステンションをインストールしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15925/624cfe18-3700-c60d-dfb2-5ebfdbd2c0f3.png)

F6を押せばコンパイルと実行できるようになりました。

保存したときに```{}```の位置が勝手に下にいくので、こちらを参考に修正しました。

https://stackoverflow.com/questions/46111834/format-curly-braces-on-same-line-in-c-vscode

### この記事で結局良かったです。

https://qiita.com/2019Shun/items/5ab290a4117a00e373b6
DIとDIコンテナの理解しやすい資料

SpringのDIコンテナの動作イメージ(雰囲気)を掴もう

https://qiita.com/kazuki43zoo/items/7a0e96573e930ac934ed

@Component、@Service、@Repository、@Controllerの違いについて
https://qiita.com/KevinFQ/items/abc7369cb07eb4b9ae29
macOS High SierraのクリーンインストールUSBを作る（App Storeからだとシステム環境設定に飛ばされダウンロードできないとき）

# 概要
下記の公式の方法に従いApp Storeでダウンロードしようとすると、システム環境設定のソフトウェアアップデートに飛ばされ、ダウンロードできないのでその対処方法。
https://support.apple.com/ja-jp/HT201372
https://support.apple.com/ja-jp/HT208969
<img width="668" alt="Screen Shot 2020-05-21 at 11.41.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68213/dcdfd231-399d-9693-41d7-252ccc397f7b.png">

# 手順
下記記事のPtyhonスクリプトでダウンロードできた。
https://mrmacintosh.com/how-to-download-macos-catalina-mojave-or-high-sierra-full-installers/
https://github.com/munki/macadmin-scripts/blob/master/installinstallmacos.py
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68213/03feb8af-8ad4-c073-427a-c6c0fecc7e5e.png)
ただ、このようにHigh Sierraよりも前のものはリストに出てこないので、そうでないものは他の方法を探す必要あり。

その後、こちらのパッケージでアップデートをまとめてインストールしてみている。
https://support.apple.com/kb/DL2034?viewlocale=en_US&locale=en_US

# その他
このようなサイトもあるが、OS本体はない。
https://support.apple.com/downloads/macos
サーバから日本語を含むファイル名が正しく取得できない

## 先頭の日本語だけ消える？

```sample.php
// （１）「file」というディレクトリ内のファイル一覧を配列形式で取得（「./file/ファイル名.jpg」というパス情報が取れる）
// 拡張子を指定する時はglob("./file/*.jpg")のようにする
$fileArray = glob("./file/*");

// （２）（１）で取得したファイル名の配列を１つずつ処理する
foreach($fileArray as $filepath) {
  // basename()でファイル名のみ取得する。
  $file_name = basename($filepath);
}
```

これでファイル名を取得できるはずなのですが、
ファイル名が全て日本語文字の場合は全て消えて、一部日本語文字の場合は先頭の日本語文字が消えてしまいます。
たとえば
「ファイルsample名前.pdf」→「sample名前.pdf」
「ファイル名.pdf」→「.pdf」
というようになってしまう。
（ちなみにPHPのバージョンは7.1（CGI版）／サーバはheteml）

## 原因はロケールの設定に依存するため
php.iniでmbstring関連の設定をいじってみたのですが全くの無意味でした。
そして見つけたのが下記の記事
[fgetcsv関数を文字化け対応 setlocaleの文字コード指定](https://pentan.info/php/fgetcsv_char.html)

fgetcsv関数に関しての記事でしたが、症状は同じ…
ということでさっきのプログラムの頭にロケールの設定を足してみました。
（さっきのコメントは邪魔なので消しました）

```sample.php
// ロケールの設定
setlocale(LC_ALL, 'ja_JP.UTF-8');

$fileArray = glob("./file/*");

foreach($fileArray as $filepath) {
  $file_name = basename($filepath);
}
```

結果は…

わーい！取得できた！よかった！
RoBERTaで文字列を特徴量に変換

# 前提
・言語：Python3
・ライブラリ：transformers

# 実装
コードは[ここ](https://github.com/ishikawa-takumi/transformers-sample/blob/master/model_sample.ipynb)

###1. ライブラリインポート
```python
import transformers
import torch
```
###2. 文字数の最大値を決める
モデルに入力する文字列は、同じ長さにならないことがほとんどです。一方で、モデルでこの文字列データでテンソル計算をするためには長さを同じにする必要があります。なので、最大値を決めて、その長さに達しない物にはパッディング文字でその長さまで埋めていきます。（次節）

```
MAX_LENGTH = 192
```

###4. 文字をIDに置き換える＆Special Tokenを付加する
説明は[ここ](https://qiita.com/ishikawa-takumi/items/5fc45ddd121b23db5de9)で。

```
tokenizer = transformers.AutoTokenizer.from_pretrained("roberta-base")
text = "This is a pen."
text2 = "I am a man"

ids = tokenizer.encode(text)
ids2 = tokenizer.encode(text2)

token_ids = tokenizer.build_inputs_with_special_tokens(ids, ids2)
```

###3. パディング＆Attention Maskの作成
パティングは前節で説明した通りです。
Attention Maskはどこまで有効な文字で、どこからがパディングなのかモデルに知らせるためのものです。有効な文字では「１」、パディング文字では「０」になります。

```
#Attention Mask
mask = [1] * len(token_ids)

#Padding
padding_length = MAX_LENGTH - len(token_ids)
if padding_length > 0:
    token_ids = token_ids + ([1] * padding_length)
    mask = mask + ([0] * padding_length)
```

###4. モデルの生成
「roberta-base」を違うモデル名にすることで、そのモデルを生成することができます。他のモデルは[ここ](https://huggingface.co/models)。

```
model = transformers.AutoModel.from_pretrained("roberta-base")
```

###5. モデルで文字列を特徴量に変換
ここまで入力した文字列をIDにするところまでしました。list型なのでtorch.tensor型にしてあげます。
モデルに入力すると出力として、（１）BertLayerの最終層の出力と、（２）その（１）の出力をBertPoolerで処理した値が出力されます。
それぞれ、サイズとしては下記コードの出力結果通りです。

```
#IDとmaskをmodelに入力できる型(list -> pytorch.tenrsor)に変換
token_ids_tensor = torch.tensor([token_ids], dtype=torch.long)
mask_tensor = torch.tensor([mask], dtype=torch.long)

#変換
out = model(input_ids=token_ids_tensor, attention_mask=mask_tensor)

print(out[0].shape)
#output
#torch.Size([1, 192, 768])
print(out[1].shape)
#output
#torch.Size([1, 768])
```
【HTML5】タグ語源一覧

## HTMLとは
HTMLで呼び方は、エイチティーエムエルと呼びます。
2020年現在は、バージョンが5でHTML5(エイチティーエムエルファイブ)と呼んだりします。
**H**yper **T**ext **M**arkup **L**anguage(ハイパーテキストマークアップランゲージ)の略で、
Webブラウザで表示するように設計されたドキュメントの標準マークアップ言語のこと。

## タグ語源一覧

| タグ | タグ名 | 語源 |
|:-----------------|:------------------|:------------------|
| \<!DOCTYPE html\> | DOCTYPE宣言(ドックタイプセンゲン) | Document Type Definition |
| \<html\>\</html\> | HTMLタグ(エイチティーエムエルタグ) | html |
| \<head\>\</head\> | headタグ(ヘッドタグ) | head |
| \<body\>\</body\> | bodyタグ(ボディータグ) | body |
| \<title\>\</title\> | titleタグ(タイトルタグ) | title |
| \<link\> | linkタグ(リンクタグ) | link |
| \<meta\> | metaタグ(メタタグ) | meta information |
| \<style\>\</style\> | styleタグ(スタイルタグ) | style |
| \<script\>\</script\> | scriptタグ(スクリプトタグ) | script |
| \<header\>\</header\> | headerタグ(ヘッダータグ) | header |
| \<footer\>\</footer\> | footerタグ(フッタータグ) | footer |
| \<main\>\</main\> | mainタグ(メインタグ) | main |
| \<div\>\</div\> | divタグ(ディブタグ) | division |
| \<section\>\</section\> | sectionタグ(セクションタグ) | section |
| \<nav\>\</nav\> | navタグ(ナビゲーションタグ(ナビタグ)) | navigation links |
| \<article\>\</article\> | articleタグ(アーティクルタグ)) | article |
| \<aside\>\</aside\> | asideタグ(アサイドタグ)) | aside |
| \<h1\>\</h1\> | h1タグ(エイチワンタグ) | heading1 |
| \<p>\</p\> | pタグ(ピータグ) | paragraph |
| \<strong\>\</strong\> | strongタグ(ストロングタグ) | strong |
| \<br\> | brタグ(ブレークタグ) | line break |
| \<ol>\</ol\> | olタグ(オーエルタグ(オーダードリストタグ)) | ordered list |
| \<ul>\</ul\> | ulタグ(ユーエルタグ(アンオーダードリストタグ)) | unordered list |
| \<li>\</li\> | liタグ(リストタグ) | list item |
| \<pre>\</pre\> | preタグ(プレタグ) | preformatted text |
| \<code>\</code\> | codeタグ(コードタグ) | code |
| \<blockquote\>\</blockquote\> | blockquoteタグ(ブロッククオートタグ) | blockquote |
| \<figure\>\</figure\> | figureタグ(フィギャータグ) | figure |
| \<hr\> | hrタグ(エイチアールタグ(ホライゾンタルルールタグ)) | horizontal rule |
| \<a\>\</a\> | aタグ(エータグ(アンカータグ)) | anchor |
| \<span\>\</span\> | spanタグ(スパンタグ) | span |
| \<img\> | imgタグ(イメージタグ) | image |
| \<iframe\>\</iframe\> | iframeタグ(アイフレームタグ(インラインフレームタグ)) | inline frame |
| \<table\>\</table\> | tableタグ(テーブルタグ) | table |
| \<thead\>\</thead\> | theadタグ(ティーヘッドタグ) | table header |
| \<tbody\>\</tbody\> | tbodyタグ(ティーボディタグ) | table body |
| \<tr\>\</tr\> | trタグ(ティーアールタグ(テーブルロータグ)) | table row |
| \<th\>\</th\> | thタグ(ティーエイチタグ) | table header cell |
| \<td\>\</td\> | tdタグ(ティーディータグ) | table data cell |
| \<caption\>\</caption\> | captionタグ(キャプションタグ) | caption |
| \<colgroup\>\</colgroup\> | colgroupタグ(カラムグループタグ) | column group |
| \<col\> | colタグ(カラムタグ) | column |
| \<form\>\</form\> | formタグ(フォームタグ) | form |
| \<label\>\</label\> | labelタグ(ラベルタグ) | label |
| \<input\> | inputタグ(インプットタグ) | input |
| \<textarea\>\</textarea\> | textareaタグ(テキストエリアタグ) | textarea |
| \<select\>\</select\> | selectタグ(セレクトタグ) | select |
| \<option\>\</option\> | optionタグ(オプションタグ) | option |
| \<button\>\</button\> | buttonタグ(ボタンタグ) | button |
| \<details\>\</details\> | detailsタグ(ディーテイルズタグ) | details |
| \<summary\>\</summary\> | summaryタグ(サマリータグ) | summary |
terraformでeksを管理しつつ、managed nodegroupをspot起動させる

## 前提
- managed nodegroup自体がspot起動をサポートしていない
- eksctlで作るnodegroupはspot起動がサポートされている。
  - https://eksctl.io/usage/spot-instances/


以下のような設定でspot起動できた。(要awscli)

```
resource "aws_eks_cluster" "default" {
  name     = "default"
  role_arn = module.aws-iam-role-eks-cluster.aws_iam_role.this.arn

  vpc_config {
    subnet_ids = [
      module.vpc.aws_subnet.private[0].id,
      module.vpc.aws_subnet.private[1].id,
    ]
  }

  version = "1.16"
}

resource "aws_eks_node_group" "default" {
  cluster_name    = aws_eks_cluster.default.name
  node_group_name = "default"
  node_role_arn   = module.aws-iam-role-eks-worker.aws_iam_role.this.arn
  instance_types = [
    "t2.small",
  ]
  subnet_ids      = [
    module.vpc.aws_subnet.private[0].id,
    module.vpc.aws_subnet.private[1].id,
  ]

  scaling_config {
    desired_size = 1
    min_size     = 1
    max_size     = 10
  }

  release_version = "1.16.8-20200507"
  version = "1.16"
  lifecycle {
    ignore_changes = [
      scaling_config[0].desired_size
    ]
  }
}

data "aws_launch_template" "default" {
  filter {
    name   = "tag:eks:cluster-name"
    values = [split(":", aws_eks_node_group.default.id)[0]]
  }
}

locals {
  mixed_instances_policy = {
    LaunchTemplate = {
      LaunchTemplateSpecification = {
        LaunchTemplateId = data.aws_launch_template.default.id
        Version = tostring(data.aws_launch_template.default.latest_version)
      }
    }
    InstancesDistribution = {
      OnDemandBaseCapacity= 0
      OnDemandPercentageAboveBaseCapacity = 0
    }
  }
}

resource "null_resource" "this" {
  triggers = {
    launch_template_change = data.aws_launch_template.default.latest_version
    autoscaling_group_change = aws_eks_node_group.default.resources[0].autoscaling_groups[0].name
  }
  provisioner "local-exec" {
    command = <<-EOT
      aws autoscaling update-auto-scaling-group \
      --mixed-instances-policy '${jsonencode(local.mixed_instances_policy)}' \
      --auto-scaling-group-name ${aws_eks_node_group.default.resources[0].autoscaling_groups[0].name}
    EOT

    interpreter = ["/bin/bash", "-c"]
  }
}

```

## 説明
- aws_eks_node_groupはmanaged nodegroup
- 実態はautoscaling groupとlaunch template 

awscliで自動作成されるautoscaling groupでspotを使うようにmixed-instances-policyを更新している

```
resource "null_resource" "this" {
  triggers = {
    launch_template_change = data.aws_launch_template.default.latest_version
    autoscaling_group_change = aws_eks_node_group.default.resources[0].autoscaling_groups[0].name
  }
  provisioner "local-exec" {
    command = <<-EOT
      aws autoscaling update-auto-scaling-group \
      --mixed-instances-policy '${jsonencode(local.mixed_instances_policy)}' \
      --auto-scaling-group-name ${aws_eks_node_group.default.resources[0].autoscaling_groups[0].name}
    EOT

    interpreter = ["/bin/bash", "-c"]
  }
}

```

null_resourceのtriggersを使うことで更新された場合にコマンドを実行できる。

## 備考
- managed nodegroupのspotの公式サポートはよこい、、
command memo

### uptime

起動時間

```bash
uptime
12:43  up 97 days,  2:24, 1 user, load averages: 1.93 2.39 2.61
```

### hey

簡易なベンチマークツール

```
Summary:
  Total:        0.5759 secs
  Slowest:      0.5758 secs
  Fastest:      0.5758 secs
  Average:      0.5758 secs
  Requests/sec: 1.7366
  

Response time histogram:
  0.576 [1]     |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  0.576 [0]     |
  0.576 [0]     |
  0.576 [0]     |
  0.576 [0]     |
  0.576 [0]     |
  0.576 [0]     |
  0.576 [0]     |
  0.576 [0]     |
  0.576 [0]     |
  0.576 [0]     |


Latency distribution:
  0% in 0.0000 secs
  0% in 0.0000 secs
  0% in 0.0000 secs
  0% in 0.0000 secs
  0% in 0.0000 secs
  0% in 0.0000 secs
  0% in 0.0000 secs

Details (average, fastest, slowest):
  DNS+dialup:   0.0516 secs, 0.5758 secs, 0.5758 secs
  DNS-lookup:   0.0009 secs, 0.0009 secs, 0.0009 secs
  req write:    0.0001 secs, 0.0001 secs, 0.0001 secs
  resp wait:    0.4800 secs, 0.4800 secs, 0.4800 secs
  resp read:    0.0441 secs, 0.0441 secs, 0.0441 secs

Status code distribution:
  [200] 1 responses
```
WindowsでGitHubの複数アカウントをhttpsで使い分ける

# はじめに

GitHubの複数アカウントを使い分けるには片方のアカウントでSSH接続する方法があります。ですがGitHubでGit LFSのファイルはhttpsのみでSSHにできないのでダウンロードできません。そこでCredential Managerのnamespaceで複数アカウントをhttpsで使い分けます。

# 必須環境

[Git for Windows](https://gitforwindows.org/)のインストールウィザードで`Enable Git Credential Manager`をチェックして[Credential Manager for Git](https://github.com/microsoft/Git-Credential-Manager-for-Windows)を一緒にインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/6bd46dd5-05ce-35d9-4fb6-cd61a4c3a869.png)

# メインアカウントの設定

特に設定は不要です。git cloneなどを行って認証するとコントロールパネルの資格情報マネージャーのWindows資格情報に`git:https://github.com`が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/6ab0d27d-2a91-9639-760a-1e51f9deff62.png)

# サブアカウントでの設定

Credential Managerでnamespaceを設定すると資格情報の先頭の`git:`が変わり複数のアカウントを使い分けることができます。

1. cloneする時はnamespaceが設定されていないので`-c credential.namespace`で指定します。指定する名前は`git`以外の英数字なら何でも構いません。

	```
    git -c credential.namespace=sub clone https://github.com/[name]/[repository].git
	```

1. ダイアログが出てくるのでサブアカウントのアカウントとパスワードを入力します。
1. cloneできたらローカルコンフィグに`credential.namespace`を設定します。

	```
    cd [repository]
    git config credential.namespace sub
	```

1. pushして失敗しない事を確認します。

    ```
	git push
	```

cloneして認証が通った後に資格情報マネージャーを開くと`sub:https://github.com`が追加されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/1e2f1f18-d21a-c367-8c68-abf89310451d.png)

詳しくはCredential Manager for Windowsの[credential.namespace](https://github.com/microsoft/Git-Credential-Manager-for-Windows/blob/master/Docs/Configuration.md#namespace)を参照してください。

# 注意点

git configの[Conditional Includes](https://git-scm.com/docs/git-config#_conditional_includes)を使うと`gitdir:`で指定したフォルダに`credential.namespace`を設定できそうですがCredential ManagerがConditional Includesに対応していないので利用できません。issuesに要望を上げたので興味ある方はリアクションやコメントをお願いします。

- [Add support conditional includes #903](https://github.com/microsoft/Git-Credential-Manager-for-Windows/issues/903)


# 参考リンク

- [How to store credentials for two different github accounts? #749](https://github.com/microsoft/Git-Credential-Manager-for-Windows/issues/749#issuecomment-593300272)
- [credential.namespace](https://github.com/microsoft/Git-Credential-Manager-for-Windows/blob/master/Docs/Configuration.md#namespace)
[Python]繰り返し処理(for , while)

#for文(リストの場合)
**for 変数名 in リスト:**

```python
fruits = ["apple" , "banana" , "strawberry"]

for fruit in fruits:
    print("好きな食べ物は" + fruit + "です")
```
出力結果
好きな食べ物はappleです
好きな食べ物はbananaです
好きな食べ物はstrawberryです
_______________________________________________________

##for文(辞書)
**for 変数名 in 辞書:**

```python
fruits = {"apple":"りんご" , "banana":"バナナ" , "strawberry":"イチゴ"}

for fruit_key in fruits:
    print(fruit_key + "は日本語で" + fruits[fruit_key] + "です")
```
出力結果
appleは日本語でりんごです
bananaは日本語バナナです
strawberryは日本語イチゴです
____________________________________________________________

#while文
**while 条件式:**

```python
x = 1

while x <= 5:
  print(x)
  x += 1
```
出力結果
1
2
3
4
5
__________________________________________________________________

#break
繰り返し処理を終了させる
条件式と一緒に使う

```python
numbers = [1 , 2 , 3 , 4 , 5]
for number in numbers:
    print(number)
    if number == 3:
       break
```
上記の場合はnumberが3になると処理が終了する
出力結果
1
2
3
__________________________________________________________________

#continue
条件式の処理をスキップする

```python
numbers = [1 , 2 , 3 , 4 , 5]
for number in numbers:
    print(number)
    if number % 2 == 0:
       continue
```
2で割り切れる時に処理をスキップする
出力結果
1
3
5
スプレッドシート初級

#スプレッドシートを使いこなそう

###プルダウンの設定をしよう
####①セルの値からリストを作成
![①.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/c85da3b2-e381-a37e-b4f4-e2b826b5f7e1.png)
1.セルを選択
![②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/1dcf9cbb-8791-2fb2-c40b-05c7b11d7397.png)
2.データからデータの入力規則を選択
![③.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/75e05049-2996-575b-ed09-7916900cc624.png)
3.リストを範囲で指定を選択
![④.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/5fd29794-e690-a9cc-5330-5fa722ac0e0a.png)
4.値に設定したいセルを選択
![⑤.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/3b5fc945-75d2-3a7f-225f-4149cfd4c6f7.png)
5.設定完了
<br>
####②入力値からリストを作成
1.セルを選択
2.データからデータの入力規則を選択
![⑥.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/e6d77579-8d5f-0a7e-a13c-bbddd26dd50d.png)
3.リストを直接指定を選択
4.値を","で区切って入力
![⑦.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/e1bc1474-2fcd-2883-2b89-7401feadd136.png)
5.設定完了
<br>
###条件付き書式を設定しよう
####①セル単位での設定
![⑧.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/655859c7-3e0d-dce6-56f3-eb48a680d8d0.png)
1.適用したい範囲を選択
![⑨.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/bcdafe0f-972c-3e3a-0033-ada9f364dfea.png)
2.”表示形式”から”条件付き書式”を選択
![⑩.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/c55a2010-835d-a81d-71d6-689d2a910965.png)
![⑪.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/6d122388-63cb-0472-e70e-e36d682ec0bf.png)
3.”セルの書式設定の条件”を選択
![⑫.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/dfcdd019-245c-4dde-ce7d-891e17410f30.png)
4.設定した条件に当てはまるセルが”書式設定のスタイル”で設定したスタイルになる

####②行単位で設定
1.適用したい範囲を選択
2.”表示形式”から”条件付き書式”を選択
3.”セルの書式設定の条件”で”カスタム数式”を選択
4.数式を入力する

4-1 文字列判定
例：=$C3="完了"
「=セル」　= 「"文字列"」という形になります
![⑬.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/d3927cea-5cee-cb58-57b5-6a572b26f81c.png)

※[\$C3]の[\$]は絶対参照を表すので　[C]は固定され[3]のほうが相対参照になり<br>設定した範囲の一番上から一行下ではC4に対して値の判定が行われ、列に対して適用されます<br>[C$3]という書き方をすると3が絶対参照になるため、列に対して判定が行われます

4-2 日付による判定
例：=$E3=TODAY()
「=セル」　=(当日）or　<（過去）or　>（未来） 「TODAY()」という形になります
![⑭.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/31a47b6a-f22e-4704-b2c1-f940b7bff617.png)

4-3 空白判定
基本的には文字列と同じです
空白の時　「=セル」　= 「""」
空白でない時　「=セル」　<> 「""」
![⑮.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/81b28771-9a80-18d8-cce6-097b4f2bbb31.png)
![⑯.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/8581368a-7dae-4675-91a7-ebcba701c88c.png)

5.ルールの適用順
![⑰.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/26ca0922-782f-e26f-d64b-700e982e1f4a.png)
条件付き書式設定ルールの上から順に適用されます
![⑱.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550671/c04cc3f3-7f21-43eb-b40e-1f9fa9c0b597.png)
順番を変更したいときは各ルールの左側の4つの点の部分をドラッグアンドドロップで変更できます。
内積とベクトル : 線形代数をPythonで<2>

#線形代数
理系大学で絶対に習う線形代数をわかりやすく、かつ論理的にまとめる。ちなみにそれをPythonで実装。たまに、Juliaで実装するかも。。。
・Pythonで動かして学ぶ！あたらしい数学の教科書 -機械学習・深層学習に必要な基礎知識-
・世界基準MIT教科書 ストラング線形代数イントロダクション
を基に線形代数を理解し、pythonで実装。

#環境
・JupyterNotebook
・言語：Python3, Julia1.4

#数式表記
Markdown記法による記述なので、*などの積を表すものについて一部出来ていないところがある。また、数式については、`バックフォード`の部分については、数式の見やすさを重視するためであり、コードの一部ではない。

#長さと内積
v = (v₁, v₂)
w = (w₁, w₂)
というベクトルとする。
###内積
内積は、***v・w***と表す。ほかにも***ドット積と***呼ぶこともある。
`v・w = v₁w₁ + v₂*w₂`
となる。
このとき、***v・w = 0 であれば 直交する***。

###長さ
長さは、内積のベクトルが同じものになった時 => 2乗となった時 である。
***(内積v・v) = (長さの2乗)***

v = (1, 2, 3)としたとき、
***`│v│² = 1² + 2² + 3² = 14`***
->これは***長さの2乗を表す***
すなわち、この2乗を外せば、長さとなるので、
***`│v│ = √14`***
となる。別の書き方として、
***`norm(v) = √14`***
と書く。これからはnorm()で書く。
これに関しては、実際には[三平方の定理](https://ja.wikipedia.org/wiki/%E3%83%94%E3%82%BF%E3%82%B4%E3%83%A9%E3%82%B9%E3%81%AE%E5%AE%9A%E7%90%86)と比較してみれば明らかである。

####単位ベクトル
長さが１となるベクトルである。
上のようなベクトルvのとき、長さは√14なので、これを１にするには√14で割ればよい。すなわち、そのベクトルをもとの長さ自身で割れば単位ベクトルとなる。
単位ベクトルをuとするとき、
***`u = v/norm(v)`***
このことから、uはvと同方向の長さ１のベクトルを表すことになる。
具体的な数字で表すと、v = (1, 2, 3)としたとき、`norm(v) = √14`でなのでそれで割ると、
***`u = (1/√14, 2/√14, 3/√14)`***
となることがわかる。

ここで、内積を求めるプログラムと長さを算出するプログラムを書いてみよう。

Python

```python
import numpy as np
import math

v = list()
w = list()
# 要素が3つのベクトルの要素記入
for i in range(3):
    vvec = int(input())
    v.append(vvec)
for i in range(3):
    wvec = int(input())
    w.append(wvec)
# 配列の中身の変換
v = np.array(v)
w = np.array(w)
# 内積の計算
print(np.dot(v, w))
# 長さの計算
normv = math.sqrt(np.dot(v, v))
print(normv)
# 実際に計算する際には√をもちいるので
print("√",np.dot(v, v))
```

Juliaはpythonより難しいので、簡単なコードにする。

```julia
v = [1 2 3]
w = [3; 2; 1]
# 内積計算
v*w

# 長さの2乗
normv2 = sum(v.^ 2)
# 長さ
sqrt(normv2)
```
juliaのコードに関しては、内積計算では無理やり持って行ってるので、もう少し効率のいいコードを後程上げたいと思う。
#最後に
ノルムとかも本来はやるべきだが概要程度にするので省略。
Google Cloud Platform Essential Cloud Infrastructure: Foundation 受講まとめ

# 受講前に

たくさん出てくるので知っておくべき用語

エフェメラル : 束の間の、儚い、短命な

# GCPの使用

GCPのクライアントライブラリは2種類

* App API : サービスへのアクセス
* Admin API : リソース管理機能

管理にはモバイルアプリも使える。

# Virtual Private Cloud

GCPのVPCを使用するとリソースのプロビジョニングと相互接続/分離が可能
GCP内やGCPとオンプレミスまたはたのクラウド間できめ細やかなネットワークポリシーの設定が可能

# プロジェクト、ネットワーク、サブネットワーク

ネットワークには3タイプある

* デフォルト
    * プロジェクトにあらかじめ設定されている
    * 各リージョンに1つのサブネットが割り当てられている
    * CIDRブロックは重複を許可しない
    * ファイアウォールルールはあらゆる場所からのICMP,RDP,SSH上りトラフィックを許可
* 自動
    * 各リージョンに1つのサブネットが自動的に作成される。一連の定義済みIP範囲が使用される
    * カスタムモードに変換できる
    * 本番向けではない。
* カスタム
    * 自動的にサブネットは生成されない
    * サブネットとIP範囲を完全に制御できる
    * 自動モードに変換できない

ネットワークはサブネットの組み合わせにすぎない

# IPアドレス

* 内部アドレス
    * DHCPによって内部で割り当てられる
    * VMとVMが依存するサービス全てに割り当てられる
    * 同じネットワーク内のホストのURLとVM名は変換できる
    * 違うネットワークの内部IPアドレスに接続するにはVPCピアリングやVPNなどのメカニズムが必要

* 外部アドレス
    * 外部に対応する場合、割り当てることができる。オプション。
    * プールから割り当てるとエフェメラルアドレスになる
    * 予約済みのIPアドレスを割り当てると静的アドレスになる。予約済み外部IPアドレスは課金対象

# 一般的なネットワーク設計

* 可用性を高めるには2つのVMをそれぞれ別のゾーンに配置する。同じサブネット内のゾーン。
* 複数リージョンに配置すればさらに耐障害性を強化できる
* HTTPロードバランサを使えばユーザの近くのリージョンにトラフィックをルーティングできる


# Compute Engine

* 事前定義とカスタムのマシンタイプどちらでもメモリ容量とCPUの数を選択できる
    * カスタムマシンは通常費用が高め。カスタムマシンに近い仕様の標準マシンがある場合は標準マシンの仕様を検討すべし
* ディスクタイプ
    * 標準ハードドライブ
    * SSD
    * ローカルSSD
        * インスタンスを停止または削除するとデータは消える
        * 通常スワップディスクとして使われる
    * 混合
* 永続ディスクを選択すると同じディスクサイズ容量が提供される

# VMアクセスとライフサイクル

* Windowsインスタンスでは作成者はGCPコンソールでユーザ名とパスワードを生成できる。そのユーザを使えば誰でもRDPクライアントでインスタンスに接続できる
* VMをリセットするとメモリデータが消去され、VMが初期状態にリセットされる。リセット中はインスタンスは起動したまま
* VMを終了するとメモリとCPUリソースの料金は発生しない。ただし接続済みディスクと予約済みIPアドレスの料金はかかる

# ディスクオプション

* 永続ディスク
    * マシンには物理的に接続されない。VMが停止しても存続できる
    * VM実行中でも動的にサイズ変更できる（拡張のみ。縮小は不可。）
    * 読み取り専用モードで複数のVMに接続できる
    * 再起動とスナップショットの作成が可能
    * 容量を重視する場合はHDDの永続ディスクがおすすめ
* ローカルSSD
    * エフェメラル
    * 高いパフォーマンスが必要な場合はローカルSSDがおすすめ
* RAMディスク
    * エフェメラル

ディスクI/Oスループットを高くしようとするとネットワークの下りまたは上りのスループットとも競合する
VMに接続するドライブ数を増やす場合はこの点に注意


# その他

Cloud Shell では .profileファイルに起動時のコマンドを書くと起動時に必ず実行されるので環境変数などを永続化したい場合に便利。
rails db:system:change --to=...　に感動した


<h1>rails db:system:change --to=... が感動！</h1>

rails db:system:change --to=...　はrails6で追加された新機能です。
いままでdatabase.ymlを編集して、gemfileに記載して、bundle installしなければならなかったのですが、
rails6で追加されたこの機能を使えば一瞬にして、使いたいSQLに変更することができます。

<h2>rails5までの流れ</h2>
gemfileに

```rb
gem 'mysql2'
```
そしてbundle install

そしたら、database.ymlに

```yml
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /var/lib/mysql/mysql.sock

```

というふうに書いてあげないといけませんでしたが、
rails6になって

```
rails db:system:change --to=mysql
```

なんとこのコマンドをうって、

```
bundle install
```
するだけで、設定が完了します！(※エラーが出る可能性はあるから、手動で訂正しなければならない場合もある)

<h3>参考</h3>
https://qiita.com/ryohashimoto/items/622c3bcfb3336cb9317e

<h3>最後に</h3>
rails6本当に便利ですね！
あとはwebpackがもうちょっと早くなったら最高ですね。
今後のアップデートに期待しましょう。
npm publishせずにパッケージに同梱されるファイルを《ツリー形式で》確認する方法

npm publishせずに、.npmignoreや、.gitignore、そしてpackage.jsonのfilesフィールドの設定がどのように作用しているかを確認する方法として、以前『[npm publishせずにパッケージに同梱されるファイルを確認する方法 - Qiita](/suin/items/4a3ecb8a74ddf1c9ab66)』という記事を投稿しました。

この記事では`npm pack --dry-run`で確認する方法を紹介しましたが、表示されるファイルの順序がばらばらで、ファイル構造が複雑になると読みにくい出力になっていました。

読みやすさを考えると、`tree`コマンドのようなツリー形式で見たいものです。

## ツリー形式で表示するワンライナー

そこで、いい感じにツリー形式でパッケージの中身を一覧するワンライナーを考えました:

```bash
PACKAGE=$(npm pack 2> /dev/null) sh -c 'set -eu && tar tf $PACKAGE | tree --fromfile && rm $PACKAGE'
```

実行例:

```
.
└── package
    ├── CHANGELOG.md
    ├── LICENSE
    ├── index.d.ts
    ├── index.d.ts.map
    ├── index.js
    ├── index.ts
    └── package.json

1 directory, 7 files
```

## package.jsonにスクリプトとして追加しておくと便利

```package.json
{
  "scripts": {
    "pack:preview": "PACKAGE=$(npm pack 2> /dev/null) bash -c 'set -eu && tar tf $PACKAGE | tree --fromfile && rm $PACKAGE'",
  },
}
```

```bash
yarn pack:preview
# or
npm run pack:preview
```
種 is なに

型理論における種 *Kind* とはなにかを考えた思考ノート。

しばしば Haskell の話が出てくるが筆者は Haskeller ではないので誤解等を多く含む恐れがある。こいよマサカリ。

## `*`

値は型を持つ。例えば`1`という値は`Int`型だし,`‘A’`という値は`Char`型だ。

この関係を逆の視点からみて, **“値を持つ型”** のことを総称して **“具体型”** とか **“真の型”** とかいう。ここで,**具体型は`*`なる種を持つ**と “定義” する。

## `* -> *`

一方で, **“値を持てない型”** も存在する。たとえば,`Maybe`という型は存在するが,`Maybe`型の値というものはない。しかし,ここに`Int`を食わせて`Maybe Int`型としてやると,これは`Just 1`とか`Nothing`とかの値を持てる。この意味で`Maybe`は**型コンストラクタ**とかよばれる (項がない型コンストラクタとかいう存在があるらしいが見なかったことにする)。この挙動はあたかも **“具体型`*`を引数に渡して具体型`*`を返す”** かのようだ。`a -> b`な型の函数とよく似ている。函数に似た挙動であるから,アナロジーで表記してみよう。

- **値**を引数にとって**値**を返すのが**函数**(函数もまた**値**である)
- **型**を引数にとって**型**を返すのが**型コンストラクタ**(型コンストラクタもまた**型**である)

であるから,**`Maybe`の種は`* -> *`である**ということができる。以下記述のため`* -> *`なる種の型を **“一階の型コンストラクタ”** と呼ぶことにする (たぶんそんな用語はない)。

ややこしいが,**`a -> b`型の種は (`* -> *`ではなく) `*`である**。`a -> b`型の値 (つまり,函数だ) はラムダ式で表現できることを思い出そう。`a -> b`は具体型である。型と種で同じアロー演算子を使用していることが混乱を招く。アナロジー的には適しているのだが。

オブジェクト指向言語では,型コンストラクタは**ジェネリクスを使用したクラス**で喩えることができよう。Java を例にすると,`Optional`のオブジェクトというのは存在しないが,`Optional<Integer>`のオブジェクトは存在する。これもオブジェクト指向言語における関数の表記,`someFunction(param)`に類似している。

## `* -> * -> *`

さて,オブジェクト指向言語では`Pair<Integer, String>`のように**二つのクラスを取るジェネリッククラス**が存在できる。これはやはり`someFunction(param1, param2)`な二引数関数に類似している。

おさらいになるが,函数型言語においては (というか Haskell では) 函数とは**一つの値を入力とし,一つの値を出力とする**ものであるが,あたかも**二つの値を入力としているかのように扱う**こともできる。これは函数もまた値であることを利用している。

たとえば,単に二つの値を足し合わせる函数`add`を考える。これは`add 2 3`のように扱うが,函数は一つの値しか入力にできないので,**最初の`add 2`の時点で`add`の適用は終了してしまっている**。かわりに,`add 2`という函数適用は, **“引数に 2 を足して返す函数”** を返している。その**新たに生成された函数`add 2`に`3`を適用している**わけだ。

この函数`add`の型は`Int -> Int -> Int`と表記される。これはより理解しやすいよう表記すると`Int -> (Int -> Int)`で,**`Int`型の値をとり`Int -> Int`型の値 (つまり,函数だ) を返す**という意味になる。

これでオブジェクト指向言語における二引数関数が函数型言語の函数でどのように対応されるかのおさらいができたが,**型引数を二つもつジェネリッククラスが函数型言語の型コンストラクタでどのように対応されるか**もこれのアナロジーで考えることができる。

たとえば,`Either`という型コンストラクタは,`Either String Int`のように使用される。これは,**最初の`Either String`の時点で新たな一階の型コンストラクタを “生成”** し,それに**型引数`Int`を適用している**,と考えることができる。その意味で,**`Either`という型の種は`* -> * -> *`である**といえる。これも`* -> (* -> *)`すなわち, **“具体型`*`を引数に渡して一階の型コンストラクタ`* -> *`を返す”** わけだ。

かつて私は (`Maybe`や`List`や`IO`と同様に) `Either`もモナドである,というような記述を目にして混乱したことがある。モナドは一階の型コンストラクタだと考えていたからだ。しかし,種の概念をなんとなく理解することで,おそらくこれは`Either a`がモナドということなのだろうと思い直すことができた。先に示したとおり,`Either a`は一階の型コンストラクタを “返す” からだ。`Either ()`が`Maybe`相当と考えることもできるだろう。

## 総括

具体的な値や函数の型,ないしオブジェクト指向言語における (ジェネリックな / でない) クラスとのアナロジーを想定することで種に対する概説ができたと思う。

同様に,`(* -> *) -> * -> *`な種の “高階型コンストラクタ” を想定することもできそうだが Haskeller でもない筆者はそろそろ黙るべきと思われる。
oak で簡単な WebAPI を作成

こちらと同じことを、oak で行いました。
[Express で簡単な WebAPI を作成](https://qiita.com/ekzemplaro/items/1aa57e199b4fed4eb729)

サーバープログラム

```ts:oak_algebra.ts
// ---------------------------------------------------------------
//	oak_algebra.ts
//
//					May/21/2020
//
// ---------------------------------------------------------------
import { Application,Router } from "https://deno.land/x/oak/mod.ts"

const router = new Router()
router
  .post("/", (context) => {
    context.response.body = "Calculation test"
  })
  .post("/post_test", async context => {
	console.log("*** /post_test *** start ***")
	const body = await context.request.body()
	const aa:number = parseInt(body.value.aa)
	const bb:number = parseInt(body.value.bb)
	console.log("aa = ",aa)
	console.log("bb = ",bb)
	var dict_aa:{[key: string]: number} = {}
	dict_aa["aa"] = aa
	dict_aa["bb"] = bb
	dict_aa["sum"] = aa + bb
	dict_aa["diff"] = aa - bb
	console.log('dict_aa["sum"] = ',dict_aa["sum"])
	console.log('dict_aa["diff"] = ',dict_aa["diff"])

	const str_out:string = JSON.stringify(dict_aa)
	context.response.body = str_out
    })

const app = new Application()
app.use(router.routes())
app.use(router.allowedMethods())

console.log("*** start ***")
await app.listen({ port: 8000 })

// ---------------------------------------------------------------
```

サーバーの起動

```bash
deno run --allow-net oak_algebra.ts
```

クライアントのテストスクリプト

```bash
curl -X POST -H "Content-Type: application/json" \
	-d '{"aa":"15", "bb": "26"}' http://localhost:8000/post_test
```
LaravelでEloquentやQueryBuilderをきちんと書いているのにDBにデータが挿入されていない問題について

# ご挨拶
皆さんこんにちは。tyamahoriです。普段はWEB制作会社でサーバーサイドエンジニアをしています。

# 俺の屍を越えてゆけ
というわけで、本日(記事執筆日は2020.5.21)の午前中に発覚したしょうもないミスをここに書き残します。みなさんのお役に立つために恥ずかしい部分を晒していきます。

# LaravelのTransaction処理でDB::commit()は忘れるな。絶対にだ。
何を当たり前なことを言っている僕でしょうか。。はいそうです。僕です。この処理が漏れていてDBに入るべきデータが入っていないというだめな状況になってしまいました。原因を探るのに2時間位時間を消費してしまったため、猛反省しております。。

# 気をつけるところ。
例えばTransaction処理を使うところにおいて、以下のような処理があったとします。

```misstake.php

        DB::beginTransaction();

        try {

            return $this->sampleRepository
                ->persistSomeData($param1, $param2)
                ->getOrm()
                ->toArray();
        } ...
```

これではだめですね。。レスポンスは期待したもので正しくても、DB::commitがないためDBにデータが挿入されません。


```collect.php

        DB::beginTransaction();

        try {
            $arrayResponse = $this->sampleRepository
                ->persistSomeData($param1, $param2)
                ->getOrm()
                ->toArray();

            DB::commit();

            return $arrayResponse;
        } ...

```

こういうふうにちゃんとしなくちゃだめですね。。トホホ。。。。
デジタルコンテンツをダウンロード販売サービス調査＠202005

デジタルコンテンツもダウンロード販売できそうなウェブサービスを調べるメモ

## BOOTH
https://booth.pm/en
![NoName_2020-5-21_11-35-53_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/e2ac7b05-d8ec-685d-d152-5bea2ec79c36.png)

## BASE
https://thebase.in/
![NoName_2020-5-21_11-36-46_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/0d3cc182-534b-a619-66e1-7bf95b6ee023.png)

## STORES
https://stores.jp/
![NoName_2020-5-21_11-37-36_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/d670a46e-2691-c924-8b37-e3431923db54.png)

## COLOR ME
https://shop-pro.jp/
![NoName_2020-5-21_11-37-55_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/2e88039d-390e-3e7b-bd38-b4e92fa437f3.png)

## Shopify
https://www.shopify.jp/
![NoName_2020-5-21_11-39-5_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/556923e9-2e1c-e569-1ac6-dc7e04532744.png)

---

以下は発見メモなのでダウンロード販売できるかは不明。。


## Thinkific
オンラインスクールなど運営できるらようです
![NoName_2020-5-21_11-41-49_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/d4e461a7-3580-f1ae-7b78-a5d3cb0aa5f2.png)

https://www.thinkific.com/

## WooCommerce
WPのPlugin
https://ja.wordpress.org/plugins/woocommerce/
![NoName_2020-5-21_11-56-57_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/7cd7a422-11ba-2cf7-3782-2d53dc7f90f3.png)
Apache 2.4 + Basic Auth + IP Restrict

```httpd.conf
<Directory /aaa/bbb>
......
SSLRequireSSL
 <RequireAll>
AuthType Basic
AuthName "Login Auth"
AuthUserFile /etc/httpd/conf/.htpasswd
Require valid-user
  <RequireAny>
Require all denied
Require ip XXX.XXX.XXX.XXX
Require ip XXX.XXX.XXX.0/24
  </RequireAny>
 </RequireAll>
</Directory>
```