OmniAICreator/Qiita-1.07M huggingface dataset:
private public について


アクセス修飾子ってなに？とりあえずつけとこ。という程度の理解しかなかったのですが、なぜ存在しているのかを学ぶことができたので自分の復習のためにかいときます。

publicとprivateの違い

![イラスト7 31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718337/7bbe7ea5-ceaa-19b5-56de-50b3ca69b332.png)


アクセス修飾子が必要な理由

・外部からアクセスされてはまずい変数やメソッドへのアクセスを遮断できる
わかる
・保守を容易にする
例　メソッドの修正が必要となる
　　　　　　　↓　　　　　　　
publicを使っているものがたくさんあることにより、アクセスできる機能がたくさんでてくる
　　　　　　　↓　　　　　　　
アクセスできる機能すべてが正常に動いているか確認しなければならない（修正により元の機能が失われていないか確認が必要）
　　　　　　　↓　　　　　　　
そうならないためにも必要不可欠なデータ以外はprivateに設定してアクセスできる範囲を絞っておく

他にも様々な理由があると思うのですが私が理解した範囲をかかせて頂きました。
GASでメール送信

# GAS はメール送信もできる！
GAS でメールを送ることができれば、例えば Google フォームに答えたユーザーへ自動返信メールを送ったり、スプレッドシートに名前とメールアドレス一覧を作成して、それらに一括してメールを送信したりもできる。便利。

# GmailApp を使う
GAS でメールを送信する場合は、**GmailApp** か **MailApp** を使う。どちらでもメールは送信できる。でも、送信者をメーリングリストにしたい（偽装）、のような案件があった際に MailApp ではうまくいかなかったので **GmailApp** の方がよいんじゃないかという結論に。

# 使い方
```javascript:GAS
var to = 'test@test.com';  // 送信先メールアドレス
// var to = ['test1@test.com', 'test2@test.com'];  // 配列にすることで複数の送り先を指定することも可能
var subject = '件名';
var body = 'メール本文';
var options = {  // 配列でいくつかのオプションを指定できる
  cc: 'test3@test.com',  // CC を指定する場合。
  // cc: 'test3@test.com, test4@test.com',  // 文字列内でメールアドレスを「,」で区切ることで複数メールアドレスを指定することも可能。
  bcc: 'test4@test.com',  // BCC を指定する場合。CC 同様に複数指定も可能。
  noReply: true, // true を指定すると送信者が noreply@ドメイン になる。
  from: 'dumy@test.com'  // 送信者を指定する場合。指定しなかった場合は GAS 実行者（ファイル所持者）が送信者になる。送信者が実行者と異なる場合は、Gmail の設定でメールアドレスの使用を許可しておく必要がある。
  // noReply と from が両方設定されていると noReply の設定が優先される（送信者はnoreply@ドメイン）になる
};
GmailApp.sendEmail(to, subject, body, options);
```
【Git】ローカルのブランチを削除しようとしたら「Cannot delete branch 'ブランチ名' checked out at...」とエラーが出た。

自分用のメモとして残します。


ブランチを削除しようとしたら、下記のようなエラーが表示された。

```shell
$ git branch -D hogeブランチ
error: Cannot delete branch 'hogeブランチ' checked out at '作業フォルダパス'
```

結論としては、**削除しようとしているブランチが現在チェックアウトされており**、自分自身が削除予定ブランチにいるため、エラーが表示された。

#■やり方

###1.とりあえず、マスターブランチに移動。
削除したいブランチ以外であればどこでもOK

```shell
git checkout master
```

###2.ブランチを削除
```shell
git branch -D 削除するブランチ
#git branch --delete 削除するブランチ
```
【Alexa】NatureRemoの操作で独自単語を登録する。

#はじめに
Alexaとリモコンで連携するためのNatureRemoは「アレクサ　リモ で 電気付けて」と「リモ」を付けないと反応しませんが、その発音無しに制御するための方法です。

#目的
**「アレクサリモで電気付けて」**を**「アレクサ電気付けて」**と3文字短縮します。
たった三文字と思いますが「リモ」って発音に違和感があるのに対して「アレクサ電気付けて」は非常に自然に発音出来ますよね。
そこまでのやり方を説明します。

#準備
IFTTTが必要ですのでIFTTTのユーザー登録とインストールは終わらせて下さい。

アプリ「NatureRemo」の操作から「＋」を選択
「シーンを追加する」を選択して「シーン名」と「操作」を登録します。
シーン名：電気を点ける　操作：照明の点灯操作
シーン名：電気を消す　操作：照明の消灯操作
の2つのシーンを作ります。

シーンも操作出来るので操作して動作を確認します。

#設定
IFTTTからAmazonAlexaスキルを探します。
AmazonAlexaスキルから「Getmore」を選択
「create」を選択
「This」を選択
「Select trigger service」に「電気をつけて」
「Recommended service」にNatureRemoを選んで電気を点ける　のシーンを選びます。

同様に電気を消す操作も登録します。

これで「アレクサ電気を点けて」というだけで照明が操作出来るようになります。

#おわりに
日常的によく行う操作は、こうやって短い単語で登録しておけば便利に使えるかと思います。
なおリモとは異なり返事は帰ってきません。
「async」「await」なんだこれ?　ついでにforEachの性質について



[Array.prototype.forEach() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
の


[forEach は同期関数を期待する](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach/#forEach_expects_a_synchronous_function)

のコード例を見ると

```js
let ratings = [5, 4, 5];
let sum = 0;

let sumFunction = async function (a, b)
{
  return a + b
}

ratings.forEach(async function(rating) {
  sum = await sumFunction(sum, rating)
})

console.log(sum)
// 本来期待される出力: 14
// 実際の出力: 0
```

関数の前に**await**という記述があったり、関数を定義する前に**async**が付いていて意味がわからなかった。


#「async」とは

そもそも「async」とは**「Async Function」を定義するためのキーワード**。


前提として、ES2017で非同期処理の関数を定義するための構文である**「Async Function」**が導入されていたらしい。Async Functionはpromiseインスタンスを返す関数を定義する構文。
([参考:非同期処理:コールバック/Promise/Async Function · JavaScript Primer](https://jsprimer.net/basic/async/#async-function))

##「async」の使い方

使い方は関数を定義する前に付けるだけ。これだけでpromiseインスタンスを返す非同期処理の関数を定義することができるようになる。

```js
async function testAsync() {
    return "Qiita";
}
// testAsync関数はPromiseを返す
testAsync().then(value => {
    console.log(value); // => "Qiita"
});

```

```js

/*ちなみにasyncを外すと「TypeError: doAsync(...).then is not a function」。
Promiseインスタンスが返されてないから当然thenメソッドは使えなくなる*/

function testAsync() {
    return "Qiita";
}

testAsync().then(value => {
    console.log(value); // => "TypeError: doAsync(...).then is not a function"
});
```


#「await」とは

**point**
1.promise処理が終わるまで待ってくれる
2.「async」をつけた関数の中で使う


**メリット**

非同期処理を同期処理のような見た目で書けるようになる。

##「await」、「async」を実際に使ってみる
ここでは、引数で与えられたpathを最終的に配列にして出力するといった処理を行うよう実装する。

```js
function dummyFetch(path) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (path.startsWith("/resource")) {//引数の文字列が"/resource"で始まるかで判定
        resolve({ body: `Response body of ${path}` });
      } else {
        reject(new Error("NOT FOUND"));
      }
    }, 1000 * Math.random())
  });
}

async function fetchAB() {
  const result = [];
  const responseA = await dummyFetch("/resource/A"); //待て!
  // 次の行はdummyFetchcの非同期処理が完了されるまで実行されない
  result.push(responseA.body);
  const responseB = await dummyFetch("/resource/B"); //待て!
  // 次の行はdummyFetchの非同期処理が完了されるまで実行されない
  result.push(responseB.body);
  return result;
}

//リソースを取得して出力する
fetchAB().then((results) => {
  console.log(results);
});
```





#「forEach」の性質を再確認。
「await」、「async」の正体がなんとなく掴めたところで最初のコード例に戻り、
forEachの性質を再確認してみます。

```js

let ratings = [5, 4, 5];
let sum = 0;

let sumFunction = async function (a, b) //Promiseを返す
{
  return a + b
}

ratings.forEach(async function(rating) {
  sum = await sumFunction(sum, rating)
  /*
    awaitの右辺にあるPromiseインスタンスの状態が変わる
    （≒sumFunctionの処理が終わる）のを、forEachは待ってくれない
  */
})

console.log(sum)
// 本来期待される出力: 14
// 実際の出力: 0
```
これは本来期待される出力結果は14だが、実際は0になってしまう。
原因は**forEach**はプロミス（非同期処理）を待ってくれない。**せっかち**なんですね〜。
今回の例で言うと、**「sumFunction」**を待ってくれない。

デバックして確認してみると、raitingの引数は「5→4→5」と最後まで渡されているが、**足し算の処理は行われていない**。
だから結局、sumは初期値で設定した0のままになっている。


まだ完全に非同期処理の概念だったりが分かったようなわかんないような感じなので~~（多分全然分かってない）~~、
今後の学習でさらに知識を増やしていきたい。
AWS subnet IP reservation

Small tip

特定SubnetのIPレンジにおいて静的IPを割り振ったEC2などを立てたいことが有ると思う。こういったときレンジの最初と最後以外にも避けておくべき（すでに予約されている）IPアドレスがあるのでご注意ください。私はハマった。

例) Sbunet CIDR 10.0.0.0/24の場合

- 10.0.0.0: ネットワークアドレスなので使えない
- 10.0.0.1: ネットワークアドレス＋１はVPCルーター用にAWSにより予約されている
- 10.0.0.2: ネットワークアドレス＋２はDNSサーバアドレスとしてAWSにより予約されている
- 10.0.0.3: ネットワークアドレス＋３は将来の用途のためにAWSにより予約されている
- 10.0.0.255: Networkブロードキャストアドレス

ref: [VPC and subnet sizing for IPv4](https://docs.aws.amazon.com/vpc/latest/userguide/VPC_Subnets.html)
【WSL2】CentOS8のVScode設定メモ

>動作環境



```edita:PowerShell

$ wsl --list --verbose
  NAME       STATE           VERSION
* centos8    Running         2
```

```edita:CentOS
$ cat /etc/redhat-release
CentOS Linux release 8.2.2004 (Core)
```
>参考サイト

* [Windows 10 用 Windows Subsystem for Linux のインストール ガイド](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)
* [Windows Subsystem for Linux で Visual Studio Code の使用を開始する](https://docs.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-vscode)

### VScodeの設定
1.Windowsに[VScode](https://code.visualstudio.com/download)をインストール。

2.VScodeに『Remote Development』をインストール。
![VSWSL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692347/49e6f398-1501-eaea-89b0-08481cd3d5b6.png)

### CentOSの設定

```edita:CentOS
$ sudo yum update
$ sudo yum install wget 
```
Chrome検証ツールで他デバイスの画面サイズをエミュレートする（ための情報の調べ方）


※キーボードショートカットはMac版Chromeの場合の情報です。

###手順
1. 検証ツールを開く。（`F12`または`Command`+`Shift`+`i`）
2. Toggle device toolbarを表示する。（`Command`+`Shift`+`m`）
3. デバイス選択欄（初期値が「Responsive」のところ）をクリックして、**Edit...**を選択する。
4. **Add custom device...**ボタンを押す。
5. 必要情報を記入して、**Add**ボタンを押す。
6. デバイス選択欄をクリックして、追加したデバイスを選択する。

###必要情報の調べ方

#####エミュレート対象の機種がオンラインの場合

[IPアドレスや画面解像度など確認くん](https://tools.m-bsys.com/development_tooles/kakunin.php)から下記項目を確認する。

#####エミュレート対象の機種がオフラインの場合

1. 検証ツールを開く。（`F12`または`Command`+`Shift`+`i`）
2. **Console**タブに切り替えて、下記を入力（＝取得）して調べる。

**Width:** `window.document.body.clientWidth`
**Height:** `window.document.body.clientHeight`
**Device pixel ratio:** `window.devicePixelRatio`
**User agent string:** `window.navigator.userAgent`
Psychopy から 低レイテンシ聴覚刺激のための Psychtoolbox を使う (Audio)

神経生理学において視聴覚刺激を行う際の選択肢は大体，

 - Psychtoolbox
 - Psychopy

である(筆者は最近はPsychopy を愛用している)．
これらのライブラリは排他的ではなく，Psychopy において聴覚刺激については Psychtoolbox (以下PTB) のバックエンドの使用がレイテンシの面から推奨されている．


> PsychoPy currently supports a choice of sound engines: PTB, pyo, sounddevice or pygame. You can select which will be used via the audioLib preference. sound.Sound() will then refer to one of SoundPTB, SoundDevice, SoundPyo or SoundPygame. This preference can be set on a per-experiment basis by importing preferences, and setting the audioLib option to use.
> The PTB library has by far the lowest latencies and is strongly recommended (requires 64 bit Python3)

https://psychopy.org/api/sound.html

インストール手順は下記の通り (Windows10 + Anaconda)．

```
pip install psychopy
pip install git+https://github.com/Psychtoolbox-3/Psychtoolbox-3
```

この状態で[Sound](https://psychopy.org/api/sound.html) のサンプルコード

```
import psychtoolbox as ptb
from psychopy import sound

mySound = sound.Sound('A')
now = ptb.GetSecs()
mySound.play(when=now+0.5)  # play in EXACTLY 0.5s
```

を実行するとおそらくインポートのエラーが発生する．
そこで，
 - libusb-1.0.dll
 - libusb-1.0.dll.a
 - portaudio_x64.dll

をPsychtoolbox のリポジトリから探し，コピーする．
筆者の場合は
> C:\Users\username\anaconda3\envs\psypy3\Lib\site-packages\psychtoolbox

にコピーした．

これで上記サンプルコードが動作する．実際に低レイテンシかどうかは，手元では未検証．

追記:
git と VS build tool が必要
 - https://anaconda.org/anaconda/git
 - https://visualstudio.microsoft.com/ja/downloads/
AthrillのDockerコンテナ最小化手順

# はじめに
以前書いたメモが出てきたので、記事にしときます。

AthrillをDockerで動かす方法は

https://qiita.com/kanetugu2018/items/f1368a6da7bdc773cfd9

で紹介されていますが、折角なのでできるだけ小さくしてみたいと思います。
箱庭で数匹・数十匹のAthrillを同時に動かしたりできると面白そうですよね。

今回は、Dockerのscratchから構成したいと思います。

# Athrillのstaticビルド
athrillを普通にビルドするとダイナミックリンクライブラリを利用するので、
何も入っていない環境で実行しようとするとコケます。

このため、スタティックにビルドしなおします。

Makefileをこんな感じに変えて、

```file:/trunk/src/build/target/linux_v850e2m/Makefile
28: $(GCC) -O3 $(LFLAGS) $(AROBJS) -o $(TARGET)  $(LIBS) -static
```

再ビルドします。

```
$ make clean; make
```

# Dockerfile
docker用にフォルダ作って、静的ビルドしたathrillと
利用するバイナリ、aspや設定ファイル類を集めておき、そこでDockerfile作ります。

```Dockerfile
FROM scratch

COPY athrill2 .
COPY asp .
COPY memory.txt .
COPY device_config.txt .

CMD ["./athrill2", "-i", "-m", "memory.txt", "-d", "device_config.txt", "asp"]
```

今更気づきましたら、CMDでオプション渡す必要ないですね。athrillだけ叩くようにして、
引数で渡す方が素直そうです。

# コンテナ作成
```
docker build -t athrill .
```
# 実行
```
docker container run -it athrill
```
JetbotでRoad Following + Collision Avoidanceを同時に走らせた。

![robo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617683/9659046e-e883-6b79-841c-6593c7a33045.jpeg)

GitHubのcollision_avoidanceとroad_followingが更新されていました。
https://github.com/NVIDIA-AI-IOT/jetbot
どちらもResnet18を使っているので、両方の学習モデルを同時に搭載して走らせてみました。
自動走行中、コースに人形（青）が侵入！人形の運命は如何に？
#動画
<衝突防止>
https://www.youtube.com/watch?v=YIbqgLoxDNM
<ラインフォロー＋衝突防止>
https://www.youtube.com/watch?v=U9pHLGSxvCQ
![col.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617683/2b114b14-2c02-eb56-a0ae-75c670c19e53.png)　![auto.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617683/7eb882f3-a515-9c1d-8e82-ced3c2792d96.png)


#準備
Road Following, Collision Avoidanceを通常どおり学習させます。
私はRoad Followingで350データ、Collision Avoidanceで各200データ入れました。

Road FollowingのフォルダにCollision Avoidanceのtrained modelを入れておく。
Road Followingフォルダでlive_demo.ipynbをコピーしこれを改造します。

```ruby:live_demo-Copy1.ipynb
#途中から始めています。
device = torch.device('cuda')
model = model.to(device)
model = model.eval().half()
#ここまではオリジナル。
#ここから下記5行追加、modelcが衝突回避用モデルです。
modelc = torchvision.models.resnet18(pretrained=False)
modelc.fc = torch.nn.Linear(512, 2)

modelc.load_state_dict(torch.load('best_model_resnet18.pth'))

modelc = modelc.to(device)
modelc = modelc.eval().half()
#ここまで追加
```

```ruby:live_demo-Copy1.ipynb
import time #この行追加しました。

angle = 0.0
angle_last = 0.0

def execute(change):
    global angle, angle_last
    image = change['new']
    xy = model(preprocess(image)).detach().float().cpu().numpy().flatten()
    x = xy[0]
    y = (0.5 - xy[1]) / 2.0
    
    x_slider.value = x
    y_slider.value = y
    
    speed_slider.value = speed_gain_slider.value
    
    angle = np.arctan2(x, y)
    pid = angle * steering_gain_slider.value + (angle - angle_last) * steering_dgain_slider.value
    angle_last = angle
    
    steering_slider.value = pid + steering_bias_slider.value
    
    
    #collision avoidance　　　　 #ここから追加です。
    x1 = preprocess(image)
    y1 = modelc(x1)
    
    # we apply the `softmax` function to normalize the output vector so it sums to 1 (which makes it a probability distribution)
    y1 = F.softmax(y1, dim=1)
    
    prob_blocked = float(y1.flatten()[0])
    
    #blocked_slider.value = prob_blocked
    
    if prob_blocked < 0.2:   #回避不要の時は、通常の制御。
        robot.left_motor.value = max(min(speed_slider.value + steering_slider.value, 1.0), 0.0)
        robot.right_motor.value = max(min(speed_slider.value - steering_slider.value, 1.0), 0.0)
    
    else:                   #回避制御時は停止する。
        #robot.left(0.2)
        robot.forward(0.0)
    time.sleep(0.001)          #ここまで追加。

    
execute({'new': camera.value})
```

Road Follwingの学習が荒いのと、2つモデルを走らせると制御が遅くなりました。
画面のサイズを小さくして、不要な画像を減らせばもっとすっきり走りそうです。
人形（青）は衝突回避学習済でしたが、人形（赤）は未学習、でもどちらも回避しました。
機械学習は奥が深い？
21世紀の統計学が消えている件を解決する

## 追記ここからダウンロードできた
https://www.jss.gr.jp/book/books/


# 日本統計学会創立75周年記念出版『21世紀の統計科学』(全3巻) 増補HP版 (2012年1月)

* 
http://web.archive.org/web/20190531233009/http://park.itc.u-tokyo.ac.jp/atstat/jss75shunen/Vol1.pdf

* 
http://web.archive.org/web/20190531233009/http://park.itc.u-tokyo.ac.jp/atstat/jss75shunen/Vol2.pdf

* 
http://web.archive.org/web/20190531233009/http://park.itc.u-tokyo.ac.jp/atstat/jss75shunen/Vol3.pdf


>
日本統計学会創立75周年記念出版『21世紀の統計科学』(全3巻) 増補HP版 (2012年1月)
2008年に日本統計学会75周年記念出版として刊行されました国友直人・山本拓監修『21世紀の統計科学』(全3巻)の増補版を， 日本統計学会のホームページを通じて提供することとなりました．本書の増補版の オンライン公開が統計科学の今後の発展に資することを期待しております．


via https://chalow.net/2012-03-24-1.html


名著がリンク切れを起こしていたのでここにWaybackする。
Google_images_downloadで画像をダウンロードできない

今回は画像認識を行いたいなーと思っていたので、google_images_downloadを使って画像を収集することにしました。

#実行環境
MacOS
Google Chrome

#詰まったところ
[Googleから画像を一括でダウンロードするツール「google-images-download」](https://co.bsnws.net/article/295)
こちらの記事を参考にして、画像を収集できるようにしようとしていました。


```
pip install google_images_download
```
このコードを実行して、google_images_downloadのインストールは完了したと思ったのですが、いざ画像を収集しようと思ったら、エラーが発生するという状況

なんでかな〜、と思い調べてみたら
[google image downloadが動かなかったのでその対応]
(https://qiita.com/taedookim/items/63759e79426514c8a729)
[google-images-download フォルダーはできるけどダウンロードされない](https://qiita.com/GeekMasahiro/items/8c5b6df476ce91adc698)
こちらの記事がありましたので、

```
git clone https://github.com/Joeclinton1/google-images-download.git gid-joeclinton
pip install -e gid-joeclinton
```
コードを実行して、再びgoogle_images_downloadを使って、画像を収集したら、上手くいきました！

#まとめ
なんでgitでクローンしたやつを実行する必要があったのかは、自分もわかりませんが、今回は動くようになったので、良かったかなと思います！

とりあえずは画像認識をやっていきたいと思います。
日付と時間が分かれたフィールドをくっつけてtimestampを生成する

はじめに
---
・ログのフォーマットがちょっと変わっていたとしてもSplunkは自由にあとからフィールド定義ができる
・たとえば日付と時間のフィールドが分かれている場合でもSPLで新たにtimestampを生成可能

| date |  time |
|:-----------|------------:|
| 30/03/2017 | 03:35:57|


How to
---
- dateとtimeフィールドが存在するデータ用意

![スクリーンショット 2020-09-16 10.18.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185759/e66fcb42-1cb0-cfa1-1e30-f2b5a612b2de.png)

- 以下サーチで_timeフィールドを新たに生成

`| eval _time=strptime(date." ".time, "%d/%m/%Y %H:%M:%S")`

![スクリーンショット 2020-09-16 10.20.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185759/f6db0b34-df7b-ce48-47a8-cbccd52daccd.png)


- めっちゃ簡単にtimestamp生成できました！
Linuxサーバー構築リンクまとめ(CentOS7)

#Linux(CentOS7)リンクまとめ

Centos old
http://vault.centos.org/

Linux bash
https://courses.cs.washington.edu/courses/cse390a/13sp/bash.html

Linux JNI 
http://a4dosanddos.hatenablog.com/entry/2013/06/17/232839
https://qiita.com/kiida/items/9d26b850194fa1a02e67

Linux java
https://51flya.com/linux/380.html
http://netlog.jpn.org/r271-635/2015/04/java_compile_exec.html

Linux コンパイラインストール
http://yohshiy.blog.fc2.com/blog-entry-292.html

Linux コマンド
https://qiita.com/0xfffffff7/items/028ff8c920a6a8c67dc5

Linux network
https://st40.xyz/one-run/article/537/

Linux tomcat
https://stackoverflow.com/questions/38172756/apache-tomcat-8-5-3-manager-app-403-error
http://www.lesstep.jp/step_on_board/tomcat/1285/

Wireshark
https://knowledge.sakura.ad.jp/6286/

linux instructons
http://masatolan.com/internet/linux-free-textbook/

ネットワークセキュリティの設定
https://www.turbolinux.co.jp/products/server/11s/user_guide/tcpwrapperconf.html

centos6 eth0
http://mukaer.com/archives/2012/08/21/centosniceht0/
https://server.etutsplus.com/centos-disable-persistent-net-rules/
https://www.linuxquestions.org/questions/linux-networking-3/device-eth0-has-different-mac-address-than-expected-516793/

centos manual 
https://www.server-world.info/query?os=CentOS_6&p=initial_conf&f=3

DHCP
https://www.faq.idcf.jp/app/answers/detail/a_id/569/~/%E8%BF%BD%E5%8A%A0nic%E3%81%AE%E8%A8%AD%E5%AE%9A%E4%BE%8B%EF%BC%88centos7%E7%B3%BB%E3%81%AE%E5%A0%B4%E5%90%88%EF%BC%89

samba
https://www.rem-system.com/centos-samba/

tripwire
https://zero-config.com/centos/install-epel.html

snort(下のリンクが正)
https://upcloud.com/community/tutorials/installing-snort-on-centos/
https://www.rootlinks.net/2018/04/22/install-snort-on-centos-7/

nmap
http://pcmemorin.blog.fc2.com/blog-entry-1315.html

Nessus
https://anditoyugowicaksono.wordpress.com/2016/10/28/install-nessus-di-centos-7/
https://centossrv.com/nessus.shtml
C,C++開発リンクまとめ

#C,C++

###基本
http://www9.plala.or.jp/sgwr-t/index.html
http://wisdom.sakura.ne.jp/programming/cpp/


###ストラクチャ、ダブルポインタ、ダブルキャスト、キャステイング、キャスト

https://xn--pckua2a7gp15o89zb.com/jb/6debf0faaaf81970448f5c8c9e4ef94a
https://haken.rikunabi.com/K/0383146038_190323378D.html
https://hb.en-japan.com/w_39250316/
RayCastPaddingをシーンビューで可視化する

https://qiita.com/ohbashunsuke/items/fbe423ac10dd4dbf4ce2
こちらの記事で便利な機能が紹介されていたので
SceneViewでどれくらい拡大されているか見るGizmoを書いてみました

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253279/b076f804-108f-965c-9865-c14a25eb861f.png)

表示と一致しているか確認
![RaycastPadding.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253279/259918df-7457-d433-8695-485a1c23287a.gif)


```csharp:RaycastPaddingDrawer.cs

using UnityEngine;
using UnityEngine.UI;

#if UNITY_EDITOR
using UnityEditor;
public static class RaycastPaddingDrawer
{
	[DrawGizmo(GizmoType.Selected, typeof(Image))]
	private static void DrawPadding(Image image, GizmoType gizmoType)
	{
		var pivot = image.rectTransform.pivot;
		image.rectTransform.SetPivotWithKeepingPosition(new Vector2(0.5f, 0.5f));
		image.rectTransform.ForceUpdateRectTransforms();
		var center = (Vector2)image.rectTransform.position;

		image.rectTransform.SetPivotWithKeepingPosition(new Vector2(0f, 0f));
		image.rectTransform.ForceUpdateRectTransforms();
		var leftBottom = (Vector2)image.rectTransform.position;

		image.rectTransform.SetPivotWithKeepingPosition(new Vector2(1f, 1f));
		image.rectTransform.ForceUpdateRectTransforms();
		var rightTop = (Vector2)image.rectTransform.position;

		//CanvasのRenderModeに対応
		var width = Mathf.Abs(leftBottom.x - rightTop.x);
		var ratio = image.rectTransform.rect.width / width;
		image.rectTransform.SetPivotWithKeepingPosition(pivot);
		image.rectTransform.ForceUpdateRectTransforms();

		//マイナスにすると広がるので値を反転させる
		var padding = -image.raycastPadding;

		var left = center.x - image.rectTransform.rect.width / ratio / 2f - padding.x / ratio;
		var right = center.x + image.rectTransform.rect.width / ratio / 2f + padding.z / ratio;
		var top = center.y + image.rectTransform.rect.height / ratio / 2f + padding.w / ratio;
		var bottom = center.y - image.rectTransform.rect.height / ratio / 2f - padding.y / ratio;

		Gizmos.color = Color.green;

		Gizmos.DrawLine(new Vector3(left, top), new Vector3(right, top));
		Gizmos.DrawLine(new Vector3(right, top), new Vector3(right, bottom));
		Gizmos.DrawLine(new Vector3(right, bottom), new Vector3(left, bottom));
		Gizmos.DrawLine(new Vector3(left, bottom), new Vector3(left, top));
	}

	// MIT License 
	// auther : Kohki Nakaji@nkjzm
	// Link   : https://qiita.com/nkjzm/items/297fb6921d5caca3eca9
	public static void SetPivotWithKeepingPosition(this RectTransform rectTransform, Vector2 targetPivot)
	{
		var diffPivot = targetPivot - rectTransform.pivot;
		rectTransform.pivot = targetPivot;
		var diffPos = new Vector2(rectTransform.sizeDelta.x * diffPivot.x, rectTransform.sizeDelta.y * diffPivot.y);
		rectTransform.anchoredPosition += diffPos;
	}
}
#endif

```
EC2 + Rails `No space left on device @ io_write` のエラー対応手順

EC2 + Rails で発生したエラー「No space left on device @ io_write」の対応手順をまとめます。

# 環境
* AWS EC2
* Nginx
* Rails 5.2.3

# 背景

AWS EC2 で動いている Rails アプリにて、バックグラウンド処理が失敗していました。

アプリ自体は普通に動いてそうなので、SSH接続して `rails c` してみると、次のエラーが発生。


```
No space left on device @ io_write - /tmp/execjs20200915-2847-13rxgx0js (Errno::ENOSPC)
```

# 原因

エラーメッセージの内容は「ディスク容量に十分な空きがない」ということです。

容量を確認すると確かに空きがありませんでした。

```
df -h
Filesystem      Size  Used Avail Use% Mounted on
/dev/xvda1      7.7G  7.7G   72M 100% /
```

「どうせログを消せば直るだろう」と思い、Rails のログを消してみましたが、引き続きエラーが出ます。EC2のインスタンスを再起動してみてもダメでした。

# 対応

## 原因ファイルの特定

何が悪さをしているかを突き止めるために、容量が大きいログファイルを探してみます。

```
sudo du -x -h / | sort -r -h | head -40 | grep log
802M	/var/log
793M	/var/log/journal/1d2e862128444912a1ce241cbc50a0b6
793M	/var/log/journal
```

すると `/var/log/journal` が怪しいことがわかりました。

## journal とは

journal は [systemd](https://wiki.archlinux.jp/index.php/Systemd) のログなので、消してしまっても問題ありません。

以下、[systemd/ジャーナル](https://wiki.archlinux.jp/index.php/Systemd/%E3%82%B8%E3%83%A3%E3%83%BC%E3%83%8A%E3%83%AB) より一部抜粋：

> systemd/ジャーナル
> systemd は、バージョン 38 から自前のログシステムである journal を搭載しています。
> デフォルトで (/etc/systemd/journald.conf 内で Storage= が auto に設定されているとき)、journal は /var/log/journal/ へ書き込みを行います。

## journalctl で削除

systemd ジャーナルは `journalctl` で操作できます。

次のコマンドで、3日分のログを残し、それ以外は全て削除します。

```
sudo journalctl --vacuum-time=3days
```

再度、ディスク容量を確認してみます。

```
df -h
Filesystem      Size  Used Avail Use% Mounted on
/dev/xvda1      7.7G  6.9G  835M  90% /
```

10%削減でき、アプリも正常に動くようになりました。

## journal の容量制限

今回のように journal の容量が膨れ上がらないように、設定ファイルを更新して容量を制限します。

```
sudo vi /etc/systemd/journald.conf
```
```:/etc/systemd/journald.conf
SystemMaxUse=200M
```

再起動して設定を反映させます。

```
sudo systemctl restart systemd-journald
```

これで同じ問題は起きないでしょう！

# References

- [journalctlログを削除する](https://mebee.info/2020/07/18/post-14146/)
- [systemd/ジャーナル](https://wiki.archlinux.jp/index.php/Systemd/%E3%82%B8%E3%83%A3%E3%83%BC%E3%83%8A%E3%83%AB)
- [サーバーのディスク容量が100%になった時の対応方法](https://tackeyy.com/blog/posts/process-of-solving-disc-full-on-ubuntu-server)
RedashでLet’sEncryptを導入して自動更新

redashでLet's Encrypt導入し、かつ、自動更新を入れようと思うとちょっと手間です。
しかもメンテもたまにしかしないので、忘れがち。

ということで、AWSでami作って公開してみました。

|AMI名|AMI ID|redashのバージョン|
|:---|:---|:---|
|redash-8.0.2_magonote1.0.1|ami-045fb01f3c937e84e| 8.0.2 |

## 導入手順
**1. 上記のAMIを起動し、DNSでを割り当てる**
**2. アクセスすると以下の画面が出てくるので、値を入れる**
![スクリーンショット 2020-08-31 9.27.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89696/9e177423-402a-d68e-e7be-30b8f1cccca0.png)

**3. Progress Barが出てくるので、暫く待つ**
![スクリーンショット 2020-08-31 9.29.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89696/f8f5b848-91d2-2c00-ed49-2d21b7c86756.png)

**4.以下の画面が出てくるので、Nextをクリックする**
![スクリーンショット 2020-08-31 9.40.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89696/a57d18bd-4df8-a7d6-1d36-2e46c3ddd9a2.png)

**5. そうすると以下のredashの通常の設定画面が出るので、あとはそのまま登録するば完了**
※ たまにNo2の画面が出てくる時があるが、キャッシュしているだけなので、リロードすれば、以下の画面が出てきます。
![スクリーンショット 2020-08-31 9.41.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89696/bf9f33cb-8d75-c282-0a73-ac3adc9372ab.png)

評判がよければ、もうちょっと改良してみるつもり。
バージョンアップ希望の場合はLGTMお願いします。 :bow:
苦戦中・・・ImageMagickのインストール（CentOS8編）

yum dnf ではインストールできなかったので、rpmでのインストール方法

１．rpmのダウンロード
　curl -OL https://imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-libs-7.0.10-29.x86_64.rpm
　curl -OL https://imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-7.0.10-29.x86_64.rpm

２．rpmのインストール
依存関係が不足している為、以下を実行
dnf -y install OpenEXR-libs.x86_64
dnf -y install ilmbase.x86_64
dnf -y install libwmf-lite.x86_64

rpm -Uvh ImageMagick-libs-7.0.10-29.x86_64.rpm

まだ、解決しない・・・
Node-REDノード公開方法が変わっていた件 (自動→手動登録)

# はじめに
Node-REDの自作ノードをnpmで公開しましたが、Node-REDノードライブラリになかなか登録されないので、いろいろと試行錯誤していたら、2020年4月に登録方法が自動から手動に変わっていることが判明しました！

![気づき1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/4e2671e9-b758-eddb-fdac-19cde19b86ec.png)

![気づき2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/01adca38-bb0e-4537-0eac-16ceb123e85d.png)

## 登録の流れ
<a href="https://github.com">GitHub</a>へレポジトリを作成
↓
<a href="https://npmjs.com">npm</a>へパッケージを登録・公開
↓
<a href="https://flows.nodered.org/">Node-RED</a>へノードライブラリを登録 (自動→手動)

### Node-REDノードライブラリへの登録手順
1. [＋]ボタンを押します
![登録.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/f34f2ab0-aeba-c253-d631-93ae4e89f01e.png)

2. Nodeを選択します
![手順2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/811081e6-685c-8f9e-8c0b-db5cd029651e.png)

3. フォームへnpmモジュール名を入力して「add node」ボタン押します
![手順3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/fbe2b5d4-3cee-3199-32a0-22d69a7757bf.png)

### 確認方法
1. フォームへノードライブラリ名を入力して検索結果に表示されることを確認します
![Screenshot_2020-09-16 node-red-contrib-ina-sensor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3199e656-2333-9245-1901-21006668ea90.png)

2. Node-REDのUIから「Manage palette」を選択して、フォームへノードライブラリ名を入力して検索結果に表示されることを確認します
![確認方法2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/19e408e8-2622-c1a8-9a7a-8e06ab7fd44e.png)
【VPC】サブネットへのサーバーの設置

## やること
1つのVPC内に設置したパブリックサブネットとプライベートサブネットに対して、Webサーバー用のインスタンスとDBサーバー用のインスタンスを配置する

## 1. Webサーバー用のインスタンスを作成・起動する
- AMIの選択 → Amazon Linux 2 AMI （HVM）を選択
- インスタンスタイプの選択 → デフォルト
- ストレージの追加 → デフォルト
- タグの追加 → 「Name: `test-publicserver`」を追加
- セキュリティグループの設定 → 「HTTP」と「HTTPS」を追加

## 2. インスタンスの詳細設定をする
- ネットワーク → インスタンスを配置するVPCを選択
- サブネット → パブリックサブネットを選択（Webサーバーとして使用するため）
![スクリーンショット 2020-08-14 19.32.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/aa23e662-54da-7148-6f86-0fad0f845552.png)

## 3. DBサーバー用のインスタンスを作成・起動する
- AMIの選択 → Amazon Linux 2 AMI （HVM）を選択
- インスタンスタイプの選択 → デフォルト
- ストレージの追加 → デフォルト
- タグの追加 → 「Name: `test-privateserver`」を追加
- セキュリティグループの設定 → 「HTTP」と「HTTPS」を追加

## 4. インスタンスの詳細設定をする
- ネットワーク → インスタンスを配置するVPCを選択
- サブネット → プライベートサブネットを選択（DBサーバーとして使用するため）
![スクリーンショット 2020-08-14 19.45.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/80cca18b-6b6c-68b5-50b9-3de60f655899.png)

## 作成完了
「<a href="https://qiita.com/777cb_/items/2d061172e83d6d5fa673">インターネットゲートウェイの設置</a>」で、パブリックサブネットに対してIPアドレスの自動割り当てを有効化したため、パブリックサーバーにはIPアドレスが割り当てられていることが分かる
![スクリーンショット 2020-08-14 19.49.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379501/a24d7830-158f-d490-eb1d-bd1a973cecfb.png)
はじめてのS3（AWS）での接続＋静的ページ（static host）の公開まで

## 今日のゴール

S3上で、サーバーレスで静的ページ公開を目指します

## S3との接続まで

AWSへのコンソールへサインインしたら、
S3の画面へ遷移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/3ded27e2-5698-2670-2477-a099d31d10b3.png)

### バケットを作成する

バケットを作成するをクリックした画面で、
バケット名を好きな名前で入力する。

注意点としては、AWS上で一意である必要があります。

その後も、オプションの設定、アクセス許可の設定と続きますが、
現段階では、何もいじらずにバケット作成までクリックします。

おめでとうございます！これで、バケットが作成されました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/8a320c27-969e-e19c-c287-be3ed639d43d.png)

ただし、現段階では、このストレージは、
一般公開されておらず、誰もアクセスできないので、公開可能な設定をしていきます。

## 公開の為の設定をする

作成したバケット名をクリックすると、右側にプロパティなどが含まれたエリアが表示。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/27116874-668b-17d8-1178-605da1e92462.png)

### Static web hostingの準備

プロパティの管理画面へ遷移するので、Static website hostingをクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/ad226362-3b1b-7dcc-d48c-3a00d7698407.png)

現段階で、エンドポイントへアクセスすると404となる
※何もファイルがないのだから当然である。

このバケットを使用してウェブサイトをホストするを選択と、
下記のような、設定画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/17a9cf03-b208-d86e-2c3a-eafcc5001d52.png)

基本的な設定をする為に、
インデックスドキュメント、エラードキュメントを
それぞれindex.html, error.htmlとして設定する


これで、静的Webサイトを公開する準備はできたので、再びエンドポイントへアクセスすると
404から403 Forbiddenへステータスが変化したことがわかる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/34f0b1d8-6727-a7cc-7e19-3f6fcee7e883.png)

まだ、index.htmlをs3にアップロードしていないこともあるが、
そこへのアクセス権限が設定されていないことが課題。

つづいて、アクセス権限の設定をしていきます。


### アクセス権限の設定

アクセス権限のタブをクリックし、設定画面へ遷移し、編集をクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/49c665d8-31a5-76bf-6b5e-f5dcc973b521.png)

↓編集

デフォルトでは、すべてのパブリックアクセスをブロックがオンとなっているので、
チェックを外し、パブリックアクセスを許可し、保存します。
※パブリックは推奨しないとか言われますが、今回の目的であればオフにして大丈夫です。
（本来はポリシーやACLで適切に設定すれば、よいかと）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/1592295c-8279-1fa2-fe8a-b1af51158bf1.png)

続いて、バケットポリシーを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/aace7da7-147c-a2c5-012b-16e31a22234e.png)

バケットポリシーエディタに下記のように設定

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::(backet name)/*"
            ]
        }
    ]
}
```

|name|summary|
|---|---|
|Principal|リソースへのアクセスを許可または拒否する対象を入力します。今回は*となっているので、全てのユーザということになります。|
|Action|許可を与える操作を指定します。GetObject操作を許可したいのでs3:GetObjectと入力しています|
|Resource|許可を与えるバケットを指定します|

## 表示確認

設定が保存できたら、
今回作成したバケットに、適当なindex.htmlをアップロードし、表示確認できたら終了です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/711655/4d6b66ba-2af2-c493-923a-53e5e95a6888.png)


おつかれさまでした。
railsの中間テーブルでデータの組み合わせを一意にする方法

## はじめに
Twitterのように、1人のユーザーは複数のツイートにいいね!ができて、1つのツイートは複数のユーザーにいいね
!されるような多対多の関係をよく実装することはあると思います。
あるユーザーは1つのツイートに対して1回しかいいね!はしないので組み合わせは一意である必要があります。
今回は中間テーブルのデータの組み合わせを一意にする方法を説明します。

## 開発環境
Rails 6.0.3
Ruby 2.7.1
テスト: Rspec, FactoryBot, shoulda-matchers

## 1. テーブル
今回使用するテーブルは下記の3つです。

### Userテーブル
|id|name|email|
|---|---|---|
|1|ユーザー1|a@a.a|
|2|ユーザー2|b@b.b|

### Tweetテーブル
|id|content|
|---|---|
|1|tweet1|
|2|tweet2|

### Likeテーブル(中間テーブル)
|id|user_id|tweet_id|
|---|---|---|
|1|1|2|
|2|1|3|

### 多対多の関係
多対多の説明に関しては今回は省略します。

```user.rb
class User < ApplicationRecord
  has_many :likes, dependent: :destroy
end
```

```tweet.rb
class Tweet < ApplicationRecord
  has_many_to :likes
end
```

```like.rb
class Like < ApplicationRecord
  belongs_to :user
  belongs_to :tweet
end
```

## 2. 組み合わせを一意にする方法
そして今回のメインに実装です。
やることは2つです。

1. migrationファイルにadd_indexでunique制約をつける (DBに制約をつける)
2. 中間テーブルのmodelにvalidationを追加する　(アプリ側でバリデーションを追加)


### 2.1 migrationファイルにadd_indexでunique制約をつける
`add_index :likes, [:user_id, :tweet_id], unique: true`を中間テーブルのmigrationファイルに追加します。
追加した後はmigrateを忘れないように!

```.rb
class CreateLikes < ActiveRecord::Migration[6.0]
  def change
    create_table :likes do |t|
      t.references :user, null: false, foreign_key: true
      t.references :tweet, null: false, foreign_key: true

      t.timestamps
    end
    add_index :likes, [:user_id, :tweet_id], unique: true   #ここを追加
  end
end
```
### 2.2 中間テーブルのmodelにvalidationを追加する
`validates :hotel_id, uniqueness: { scope: :staff_id }`を中間テーブルのモデルに追加します。

```like.rb
class Like < ApplicationRecord
  belongs_to :user
  belongs_to :tweet

  validates :user_id, uniqueness: { scope: :tweet_id }  #ここを追加
end
```
必要な実装は以上です。
コンソールで同一の組み合わせは一度しか登録できないことを確認してみてください。


## 3. 一意であることを確認するRspecテスト
参考までにテストもご紹介します。
Rspec, FactoryBot, shoulda-matchersの設定はできているものとします。

```like_spec.rb
require 'rails_helper'

RSpec.describe Like, type: :model do
  let(:user) { create(:user) }
  let(:tweet) { create(:tweet) }
  before { create(:like, user: user, tweet: tweet) }

  it { should belong_to(:user) }  # この行と下の行で多対多の関係を確認
  it { should belong_to(:tweet) }
  it { is_expected.to validate_uniqueness_of(:user_id).scoped_to(:tweet_id) } # ここで一意であることを確認
end
```

## おわりに
ちゃんと組み合わせを一意にできましたでしょうか？
今回のような実装はよく使われると思うので参考になれば幸いです。
Winter'21での不具合

困った不具合です。早く解消されないかな。

#Masking a user's email
https://trailblazers.salesforce.com/answers?id=9064S000000D8XNQA0

回答
**メールアドレスの変更通知の無効化**
https://help.salesforce.com/articleView?id=000324664&type=1&mode=1


#UI misalignment - Sandbox
https://trailblazers.salesforce.com/answers?id=9064S000000D8OVQA0

#Winter21 issue with Communities
https://trailblazers.salesforce.com/answers?id=9064S000000D8QMQA0

#Custom Labels in Flows not working on winter '21
https://trailblazers.salesforce.com/answers?id=9064S000000DDhK

#lightning:pillの不具合
自作したルックアップフィールドですが　Winter21で何やら見た目が変わってしまいました。


![自作ルックアップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/41b32c2d-17f1-f480-f8ed-1a7a915e54a9.png)

サポートによれば　cssでwidthを指定しているかららしい。
確かに、コメントアウトすると中央寄せはしなくなります。


.THIS .pillSize{
width:100%;
}

これも影響しているらしいが...
.slds-pill-container and .slds-pill__container are no longer supported. Please use .slds-pill_container instead.

https://www.lightningdesignsystem.com/release-notes/

#結果
何と、slds-pill-containerを使っていました。
slds-pill_containerに置き換えると、ちょっとだけいい感じになります。

![自作ルックアップ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/53a91715-bb84-0fd0-5d5c-2d7426ce078a.png)

widthの指定をすると　中央寄せになってデザインが崩れます。

結果としては
・slds-pill_containerに置き換える
・widthの指定はしない
RSpecの実行結果を分かりやすくするGitHub Actionを作った

## はじめに

CI/CDのサービスとして最近はGitHub Actionsを利用しているのですが、CircleCIと比較した時にRSpecが失敗した時の実行結果が分かりにくいのが不満でした。
そんなストレスを解消するために社内ハッカソンで作った以下のGitHub Actionを紹介します。

[RSpec Report · Actions · GitHub Marketplace · GitHub](https://github.com/marketplace/actions/rspec-report)

## 何が出来るの？

PRイベントの場合は失敗結果がコメントされます。
またコメントされることで同様の内容がメールでも通知されるので、失敗したテストの内容がGitHubにアクセスしなくても把握できるようになります。

![a23798fbb2f0e6454bf75a0e09034eb8.png](https://i.gyazo.com/a23798fbb2f0e6454bf75a0e09034eb8.png)

PRイベント以外の場合はChecks API経由で通知されます。

![0d3c61f6ecc3354a9734eb2b30a82211.png](https://i.gyazo.com/0d3c61f6ecc3354a9734eb2b30a82211.png)


## 使い方

```yaml:test.yml
name: Build
on:
  pull_request:

jobs:
  rspec:
    steps:
      # RSpec実行の為の事前準備は省略しています
      
      - name: Test
        run: bundle exec rspec -f j -o tmp/rspec_results.json -f p

      - name: RSpec Report
        uses: SonicGarden/rspec-report-action@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          json-path: tmp/rspec_results.json
        if: always()
```

## その他

### ポイント
- JSONフォーマットで出力したRSpecの実行結果を解析してコメントしています
  - `rspec`コマンドの`-f j -o tmp/rspec_results.json`オプションは必須です（保存先は任意）
- テストが全て通ればコメントは削除されます
- 繰り返し同じコメントが投稿されることはありません
- テストの並列実行にも対応しています
  - その場合は以下のようにタイトルがユニークになるように調整してください

```yaml
with:
  token: ${{ secrets.GITHUB_TOKEN }}
  json-path: tmp/rspec_results.json
  title: "# :cold_sweat: RSpec failure ${{ matrix.ci_node_index }}"
```

### リポジトリ

[GitHub - SonicGarden/rspec-report-action: A GitHub Action that report RSpec failure.](https://github.com/SonicGarden/rspec-report-action)

良かったら使ってみてください。
mindの研究 その11

#概要

mindが謎なので調べてみた。
vistaに入れた。
rpa、書いてみた。
googl検索を、叩いて見た。

#とりあえずの結論

mindは、rpaに最適。

#サンプルコード

```
出力ファイルは　ファイル。
エラー検査は
　エラー？　ならば
　　エラー文字列で　重大エラー
　つぎに
　。



メインとは
　結果は　変数
　４５０をつみ
　２８０をつみ
　"user32"と　"SetCursorPos"で　ＡＰＩ呼出し２　結果に　入れ
　エラー？　ならば
　　エラー文字列を　一行表示し　終り
　つぎに
　２をつみ
　０をつみ
　０をつみ
　０をつみ
　０をつみ
　"user32"と　"mouse_event"で　ＡＰＩ呼出し５　結果に　入れ
　エラー？　ならば
　　エラー文字列を　一行表示し　終り
　つぎに
　４をつみ
　０をつみ
　０をつみ
　０をつみ
　０をつみ
　"user32"と　"mouse_event"で　ＡＰＩ呼出し５　結果に　入れ
　エラー？　ならば
　　エラー文字列を　一行表示し　終り
　つぎに
　「c.vbs」で　出力ファイルを　新規オープンし　エラー検査し
　「Dim sh」で　出力ファイルに　一行書き込み　エラー検査し
　「Set sh = CreateObject("WScript.Shell")」で　出力ファイルに　一行書き込み　エラー検査し
　「sh.SendKeys "mind{tab}{enter}"」で　出力ファイルに　一行書き込み　エラー検査し
　「Set sh = Nothing」で　出力ファイルに　一行書き込み　エラー検査し
　出力ファイルを　クローズし　エラー検査し
　「cscript c.vbs」を　プログラム実行
　「おけ」を　一行表示する。



```

以上。
axiosでGET,POSTする

# axios読み込み

```html
    <script src="https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.js"></script>
```

#GET
```js
axios.get('/user?ID=12345')
.then(function (response) {
    // handle success
  console.log(response);
})
.catch(function (error) {
    // handle error
  console.log(error);
})
.finally(function () {
    // always executed
});
```

#POST

```js
const params = new URLSearchParams();
params.append('firstName', 'Mineo');
params.append('lastName', 'Okuda');
axios.post('post-api.php',params)
.then(function (response) {
    // handle success
  console.log(response);
})
.catch(function (error) {
    // handle error
  console.log(error);
})
.finally(function(){
})
```

#参考
###使い方
[axiosとは](https://www.willstyle.co.jp/blog/2751/)
[axiosライブラリを使って、柔軟にHTTP通信を行う](https://www.yoheim.net/blog.php?q=20170801)

###GET,POST
[CDN版Vue.js + axios でさくっとAjaxしてみる](https://www.webopixel.net/javascript/1471.html)

###JSDELIVER
[JSDELIVERのaxiosページ](https://www.jsdelivr.com/package/npm/axios)
【StereoDepth】stereo depth estimationの基礎理解(Deep Learning編)

Stereo CameraによるDepth(Disparity)推定についてざっくりと流れをまとめて見ました！

一般的なstereo matchingについては前の記事をどうぞ
https://qiita.com/minh33/items/55717aa1ace9d7f7e7dd

<h1>Depth Estimationのプロセス</h1>
1. Feature Extraction
   =>左右同じNetwork,同じweightを使って特徴取り出す(WxHxC)。ex)intensity, shape, .....etc
2. Cost Volume
   =>Pixelをshiftする事でDisparity Channelを作る(DxWxHxC)。
      Dは任意の値で、取り得る最大Disparity(pixel)を自分で決める。大きすぎると重くなるし、小さすぎると近い物体のマッチングがされない。
3. 3D Feature Matching
   =>求めた特徴量を(DxWxHxC)を畳み込む事で右と左の特徴量が近い所に大きな値が出るよう学習する(DxWxHx1)
4. Disparity Regression
   =>(DxWxH)から(1xWxH)に変換して最終的なDisparityを求める
5. Lossを計算する
　　=>Ground TruthにLiDARを使うか左と右の画像をwarpすることでLossを計算する。最近では画像のみで学習するのが多く見られる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/1b59d540-4b65-543b-c2d0-adad430a0084.png)

[<h1>Computing the Stereo Matching Cost with a Convolutional Neural Network(2015)</h1>](
https://www.cv-foundation.org/openaccess/content_cvpr_2015/papers/Zbontar_Computing_the_Stereo_2015_CVPR_paper.pdf#search='Computing+the+stereo+matching+cost+with+a+convolutional+%CB%87+neural+network')

右と左の画像の特徴量をintensityの代わりにconvolutionすることによって、多チャンネルの特徴量に代替することによって精度を向上
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/0415b038-b362-b23b-f7fa-56a4f34bc089.png)


[<h1>Spatial Pyramid Pooling in Deep Convolutional
Networks for Visual Recognition(2015)</h1>](
https://arxiv.org/pdf/1406.4729.pdf')


近くの物体をmatchingさせるためにはより広範囲のpixelを参照しなければいけない。その解決方法として特徴量マップの解像度を細かいものと粗いものを結合させることにより解決
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/1878385a-63bc-e87a-cce7-5cfb7c11d765.png)

[<h1>End-to-End Learning of Geometry and Context for Deep Stereo Regression(2017)</h1>](
https://arxiv.org/pdf/1703.04309.pdf')
今までと同じように右と左の画像をそれぞれに同じweightを使って畳込み特徴量マップ(WxHxC)を生成。右の画像に対して左の画像のpixelを0~maxDisparity(任意)まで横にshiftさせた特徴量マップ(DxWxHxC)を作る。単純にpixelを横(width方向)にシフトするだけ。3D Convolutionと3D Deconvolutionを1/2,1/4,1/8,1/16,1/32で行う事によって大まかな特徴と細かい特徴を学習できる。ここでの出力が(DxHxW)となる。1次元になったmatchingの値にDisparityを掛けて重み付け平均を取ることで最終的なDisparityを出力する。softArgMinによりsub-pixel accuracyでDisparityを求めることが可能になった。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/4297c09e-a51c-60f9-b399-e1ca28498225.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/32060acb-7dc1-5918-63c3-87540f1188c0.png)


[<h1>Self-Supervised Learning for Stereo Matching with Self-Improving Ability(2017)</h1>](
https://arxiv.org/pdf/1709.00930.pdf')
今までLossを求めるのにDisparityまたはDepthをLiDARから得ていた。LiDARの密度は画像よりも粗く、LiDARを用いないシステムでもTrainingをする為、右の画像を推定した右のDisparityだけpixelをshiftすることによって、左の画像を擬似的に生成する。生成された左の画像と、元の左の画像をSAD(intensityまたはRGBの差)やSSIM(構造的類似性)を見ることで、Lossを定義出来る。Disparityが正しく推定出来ているのであれば、warpをした画像はほぼ反対の画像と同じになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/3be3f881-984c-b180-76b4-66143c903c27.png)
3Dグラフのインタラクティブなプロット

#Jupyter Notebookでインタラクティブなプロット
シンプルな例を見つけられなかったので、メモとして作成。


詳細な説明やセットアップは下記を参照のこと。

* [matplotlibを使ってJupyterLab上でインタラクティブな3Dグラフを作成する](https://qiita.com/nognog/items/a3c24c10095c880fc4c9)
* [ipywidgets で気楽に条件をいろいろ変えてプロット （インタラクティブなプロット）](https://qiita.com/junkoda/items/ece64e50c130c06260f1)

```python
import matplotlib.pyplot as plt
from mpl_toolkits.mplot3d import Axes3D
from ipywidgets import interact, FloatSlider, IntSlider
import numpy as np

x = y = np.arange(-20, 20, 0.5)
X, Y = np.meshgrid(x, y)
Z = X*X + 2 * Y*Y


@interact(elev=IntSlider(min=-180, max=180, step=10, value=30, continuous_update=False), 
          azim=IntSlider(min=-180, max=180, step=10, value=30, continuous_update=False))
def plot_3d(elev, azim):
    # Figureの設定
    fig = plt.figure(figsize=(10, 10))
    
    ax = fig.add_subplot(111, projection='3d')
    # 3Dグラフを表示
    ax.plot_surface(X, Y, Z)
    
    # 3Dグラフの見る方向の初期値を設定
    ax.view_init(elev=elev, azim=azim)
    plt.show()

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455423/72b7e523-ed91-5888-8c17-166d78e71757.png)
任意のフォルダからファイル名を取得する

フォルダ構成をExcelに貼る時用

やる事は2ステップ
①フォルダの中にある任意の拡張子のファイルをテキストに出力させる
②出力されたテキストをバッチにドラックして同階層フォルダに出力させる


①
>**dir *.xlsx /b /a-d > ExcelList.txt**


解説
dir
カレントディレクトリにあるファイルとサブディレクトリの一覧を表示する
*.xlsx
拡張子が「.xlsx」のファイル全て（*＝ワイルドカード）
/b
オプション情報を消してファイル名のみ表示（←ごたごたを消してきれいにするやつ）
/a-d
ファイル名を取り出す


②
>**for /f %%a in (%1) do md %%a**


解説
for %変数 in (セット) do コマンド [パラメーター]
ループコマンド
/ｆ
テキストファイル内の文章に対してトークンを取り出して代入する（＝ファイル内容を繰り返す）
%%a
構成は「％％」と「a～zもしくはA～Zの一文字を指定」であれば良い
(%1)
バッチファイルに指定された第一引数
do md
mdは「mkdir」の略
%%a
上記参照

ExcelListという名前のExcelファイルに該当フォルダの「.xlsx」ファイルが出てくる。

下書きに戻したいんだけどどうしたらいいんだろう。
mindの研究 その10

#概要

mindが謎なので調べてみた。
vistaに入れた。
vbsの力を借りてhelloworld、書いてみた。

#写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/be15c8b6-db8b-476b-9a46-7597418369a6.jpeg)


#サンプルコード


```

出力ファイルは　ファイル。
エラー検査は
　エラー？　ならば
　　エラー文字列で　重大エラー
　つぎに
　。

メインとは
　「b.vbs」で　出力ファイルを　新規オープンし　エラー検査し
　「msgbox "hello world!"」で　出力ファイルに　一行書き込み　エラー検査し
　出力ファイルを　クローズし　エラー検査し
　「cscript b.vbs」を　プログラム実行
　「おけ」を　一行表示


```

以上。
vscode ショートカット（mac版）

vscode使い始めたばかりですが、効率を上げるためにショートカットを覚えていこうと思います。
他にもいろいろあるのは知っていますが、よく使うのもの追記していこうと思います。

  現在のカーソル位置にある単語と同じ単語を一括して選択する
［Shift］＋［Command］＋［L］キー

  現在のカーソル位置にある単語と同じ単語を1つずつ選択範囲に追加する
［Shift］＋［D］キー

  サイドバーを開く/閉じる
［Command］＋［B］キー

  パネルを開く/閉じる
［Command］＋［J］キー

　サイドバーにフォーカスを移動
［Command］＋［0］キー

　１つ目のエディタにフォーカスを移動
［Command］＋［1］キー
　　複数エディタグループを使用している場合[2]〜[8]まで使用可能

　前のタブに移動
［Shift］＋［Command］＋［[］キー

　次のタブに移動
［Shift］＋［Command］＋［]］キー

　１行削除
［Shift］＋［Command］＋［K］キー

　下に行追加
［Command］＋［Enter］キー

　上に行追加
［Shift］＋［Command］＋［Enter］キー
mindの研究 その9

#概要

mindが謎なので調べてみた。
vistaに入れた。
xorの真理値表、書いてみた。

#サンプルコード

```
メインとは
　Aは　変数
　Bは　変数
　「A B C」を　一行表示し
　Aに　０を　入れ　Bに　０を　入れ　「0 0 」を　表示し　Aと　Bを　XORして　数値表示し　改行し
　Aに　０を　入れ　Bに　１を　入れ　「0 1 」を　表示し　Aと　Bを　XORして　数値表示し　改行し
　Aに　１を　入れ　Bに　０を　入れ　「1 0 」を　表示し　Aと　Bを　XORして　数値表示し　改行し
　Aに　１を　入れ　Bに　１を　入れ　「1 1 」を　表示し　Aと　Bを　XORして　数値表示し


```

#結果

```


A B C
0 0 0
0 1 1
1 0 1
1 1 0

```

以上。
mindの研究 その8

#概要

mindが謎なので調べてみた。
vistaに入れた。
九九、書いてみた。

#サンプルコード

```
メインとは
　行１は　変数
　列１は　変数
　行１に　１を　入れ
　列１に　１を　入れ
　９を　回数指定し
　　９を　回数指定し
　　　行１と　列１を　掛けて　数値表示し
　　　「　」を　表示し
　　　行１を　一つ増加し
　　繰り返す
　　改行する
　　列１を　一つ増加し
　　行１に　１を　入れ
　繰り返す
```

#結果

```

1　2　3　4　5　6　7　8　9　
2　4　6　8　10　12　14　16　18　
3　6　9　12　15　18　21　24　27　
4　8　12　16　20　24　28　32　36　
5　10　15　20　25　30　35　40　45　
6　12　18　24　30　36　42　48　54　
7　14　21　28　35　42　49　56　63　
8　16　24　32　40　48　56　64　72　
9　18　27　36　45　54　63　72　81　

```

以上。
mindの研究 その7

#概要

mindが謎なので調べてみた。
vistaに入れた。
再帰で階乗、書いてみた。

#サンプルコード

```
階乗とは
　数１は　変数
　数１に　入れ
　もし　数１が　１より　小さい　ならば
　　１を　返す
　さもなければ
　　数１から　１を　引いて　階乗して　数１を　掛けて　返す
　つぎに
　。

メインとは
　６を　階乗し　数値表示し
　スタック検査する。

```

#実行結果

```
720
```

以上。
Django 認証機能がうまく反映されない

#はじめに
この記事ではDjango + Dockerでユーザー認証機能を盛り込む際に出たエラーの対処法について書いていきます。

#ModuleNotFoundError: No module named 'allauth'
このエラー文にめちゃくちゃ悩まされました。
どうしたら良いのかわからずあきらめかけていましたが、対処法はいとも簡単でした...。

まず「Docker」ファイルに次のように追記してください。

```Dockerfile:Dockerfile
RUN pip install django-allauth
```

次に「requirements.txt」にも追記していきます。

```requirements.txt:requirements.txt
django-allauth>=0.32.0
```

最後にターミナルに次のように打ち込みます。

```terminal:terminal
$ docker-compose build
```

最後にお決まりの作業をしていきます。

```terminal:terminal
$ docker-compose run --rm web python3 manage.py makemigrations

$ docker-compose run --rm web python3 manage.py migrate

$ docker-compose up
```
これで完了です。

#最後に
このエラーに何時間もかけてしまったので、同じようにつまずいている人の助けになれば幸いです。

コマンドについてはこちらにまとめておいたので、参考になれば幸いです。

[Django + Dockerコマンド](https://qiita.com/heku_777/items/b8d16bacc13320e9ed3d)
Django + Dockerコマンド


#はじめに
この記事では、Django + Dockerの開発で使うコマンド類をまとめました。

#startproject
プロジェクトをスタートさせる時のコマンドです。

```terminal:terminal
#ビルドと起動を同時に行う
#-dオプションはバックグランドで起動することを意味する
$ docker-compose up -d --build
```

```terminal:terminal
$ docker-compose run web django-admin.py startproject プロジェクト名 .
```

#runserver的なコマンド

Djangoのrunserver的なコマンドです。

```terminal:terminal
#一番最初はこっちを打ち込んでビルドする
$ docker-compose up --build
```

```terminal:terminal
$ docker-compose up
```

#とりま全部消す
コンテナを止めて、ネットワーク、ボリュームもイメージを削除してくれます。

```terminal:terminal
$ docker-compose down --rmi all --volumes
```

#アプリ作る

新しいアプリを作成する際のコマンドです。

```terminal:terminal
$ docker-compose run --rm web django-admin startapp アプリ名
```

#マイグレーション

```terminal:terminal
$ docker-compose run --rm web python3 manage.py makemigrations
```

#マイグレイト

```terminal:terminal
$ docker-compose run --rm web python3 manage.py migrate
```

#クリエイトユーザー
管理画面にログインする際に必要になります。

```terminal:terminal
$ docker-compose run --rm web python3 manage.py createsuperuser
```

#古いネットワークを取り除く

```terminal:terminal
$ docker system prune -a
```

#コンテナの停止

```terminal:terminal
$ docker-compose down -v
```

#最後に
今後も追記していくので参考になれば幸いです。
GitHub Pagesを使用し、静的サイトを公開する方法

GitHub Pagesは静的サイトを無料で公開することができる、GitHubが提供するサービスです。
HTML.CSS,JavaScriptで作成したプロフィールサイトを公開するために利用しましたが、とても簡単に公開することができたのでメモに残します。
少し戸惑った場面もあったので、それも共有できればと思います。
GitHubにアカウント登録している前提で記述していきます。
※GitHub desktopを使用しています。

---------------------------------------

###①GitHubのリモートリポジトリに作成したサイトを反映（push）させる
自分の場合はGitHub desktopでローカルリポジトリを作成していたので、そこからリモートリポジトリにpushしました。

###②GitHubの該当のリモートリポジトリで『settings』を選択し開く

###③ 『settings』を選択し、下にスクロールしていくと『GitHub Pages』というまとまりがある。そこに『None』となっている箇所があり、選択するとプルダウンで『master』を選択できるので『master』を選択する
『settings』を選択した後、ずっと下にスクロールしていくと『GitHub Pages』という場所があります。

###④『master』を選択した右横に『Save』とあるので『Save』を選択します

###⑤『Save』を選択すると、【Your site is published at "あなたのサイトのURL"】という形でURLが生成される
『GitHub Pages』のまとまりの1番上にURLが生成されるのでそのURLからサイトを見ることができます

---------------------------------------
**注意点**
URLが生成されてサイトを表示しても画像が読み込まれていない時があります。
どうやら画像の反映には時間がかかるようです。
自分はこれを知らずに色々といじってしまって大変な目にあったので、まずは数分待ってみましょう。
EclipseにMySQLデータベースを紐づける！

Eclipseの初期設定で必要なデータベースの紐づけ！

参考動画　➡　https://youtu.be/cqg1Eg-u4s4

webサーバーも設定したら、いよいよWebアプリケーションの作成が可能になります🎉
webサーバーの設定はこちらを参考に　➡　https://qiita.com/iwasaki-hub/items/cd1bf0545be6bde9360a

![web.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/b599e61b-593c-8862-254e-3812e2c94943.jpeg)
【Windows10】Caps LockをCtrlに変更

<!--#  Windows10でCaps LockをCtrlに変更 !-->
ぶっちゃけCaps Lockは必要ない。Macや英語配列キーボードに慣れていると打ち間違えることも。
Caps Lockに特に未練はないのでCaps Lockキーを削除し、Ctrlに置き換える。
レジストリエディタで変更してしまう。
左下の検索のところから```reget```と入力してレジストリエディタを起動。
ツリーから
```HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout```
を開く。

新規ファイルでバイナリ値を作成、```Scancode Map```と名前をつけて保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135111/5ffd9268-43c3-cd44-8822-b535d4a3d686.png)

右クリックで「バイナリデータの修正」を選択し、以下を順番に打ち込む。

```
00,00,00,00,00,
00,00,00,02,00,
00,00,1d,00,3a,
00,00,00,00,00
```

OKを押して、Windowsを再起動。

## 参考
[CapsLockキーって使ってますか？あまり使わないならCtrlキーと交換、あるいはCtrlキーに変えてしまいましょう](https://kekaku.addisteria.com/wp/20180531022629#toc8)
編集中のブランチの中身を編集前に戻す方法『GithubDesktop』

新しくブランチを作成していざ実装に取り掛かったはいいものの、失敗して最初からやり直したい時の方法を過去の自分に向けて残します。
同じ状況の方の参考になれば幸いです。

######状況は下記を想定しています
1.masterブランチがあって、機能を実装するために新しくブランチを作る
（ブランチ名は何でも大丈夫です。ここでは仮にユーザー管理機能実装のためのdeviseという名前のブランチとします、deviseを皆さんのブランチ名に読み替えて進めてください）
2.deviseブランチを編集していたが失敗してしまい、deviseブランチを1からやり直したい

---------------------------------------
上記方法を下記にまとめます。
すべてGithubDesktopでの操作です。

###①違うブランチを選択する
現在deviseにいるので、masterブランチでも他のブランチでも何でもいいので違うブランチを選択する

###②選択肢が2つ出るので、『Leave my changes on ブランチ名 Your in-progress work will be stashed on this branch for your to return to later』を選択する

###③deviseブランチを選択し、deviseブランチに戻る
deviseブランチに戻ると編集した記述が全て消えています

###④deviseブランチの中に『Stashed Changes』という選択できるものがあるのでそれを選択し、『Discard』を押します
『Stashed Changes』の中に編集前の情報が入っているので『Discard』で完全に消すことができました

---------------------------------------
上記を④まで行えば、編集前の状態に戻っています。