OmniAICreator/Qiita-1.07M huggingface dataset:
Temporal dead zoneと死の秘宝(var/const/let)

ChromeやNodeJSのJavascriptコンソール画面で動作確認する場合、
以下の様に間違ってエラーになってしまうことがあります。

```js
const obj = JSON.parse(""); // JSON形式じゃない文字列を指定
// Uncaught SyntaxError: Unexpected end of JSON input
```

JSON形式の文字列で指定するところに空文字を指定した場合ですが、``Uncaught SyntaxError``となってしまいます。


じゃあ間違えたのだからと訂正して再度実行すると

```js
const obj = JSON.parse("[]"); // JSON形式の文字列を指定
// Uncaught SyntaxError: Identifier 'obj' has already been declared
```
既に宣言済みなのでエラーとなります。



それでは、既に宣言済みなら変数が存在するのだと思って参照してみると

```js
console.log(obj); 
// Uncaught ReferenceError: obj is not defined
```
宣言されていないとエラーとなります。


グローバルに変数が残っているかなと思って``delete``を実行しても消えている様子は無いです。

```js
delete obj;
// false
const obj = JSON.parse("[]");
// Uncaught SyntaxError: Identifier 'obj' has already been declared
```


MDNのlet変数やconst変数の説明を見てみると**Temporal dead zone**の存在について紹介されています。
>undefined の値で始まる var 変数と異なり、 let 変数は定義が評価されるまで初期化されません。変数を宣言より前で参照することは ReferenceError を引き起こします。ブロックの始めから変数宣言が実行されるまで、変数は "temporal dead zone" の中にいるのです。

どうやら、宣言された``const``や``let``変数は**Temporal dead zone**の中に残ってしまっていて参照できない状態になっているようです。


エラーが発生するなどして変数の初期化が行われなかった場合、``let``や``const``については**Temporal dead zone**に変数があるため、宣言はされているが、参照出来ない状態となるらしいです。この状態だと変数を再使用することは出来なくなってしまいます。


``var``の場合だと変数を宣言する前に呼び出すと``undefined``が取得されます。

```js
console.log(pizza);
var pizza = 'Deep Dish 🍕🍕🍕';
// undefined
```

``let``の場合だと変数を宣言する前に呼び出すと``Uncaught ReferenceError``となり変数が取得できません。

```js
console.log(pizza);
let pizza = 'Deep Dish 🍕🍕🍕';
// Uncaught ReferenceError: Cannot access 'pizza' before initialization
```
変数pizzaは**Temporal dead zone**から取り出せずもう使用することは出来なくなってしまいます。

* [let - JavaScript | MDN]
(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let)
* [Chrome console already declared variables throw undefined reference errors for let](https://stackoverflow.com/questions/41255090/chrome-console-already-declared-variables-throw-undefined-reference-errors-for-l?rq=1)
* [Temporal Dead Zone ☠️ | Wes Bos](https://wesbos.com/temporal-dead-zone/)


対応策としては、
リロードなどをして最初から実行し直すか、
もしくは、``var``を使うか、

```js
var obj = JSON.parse("");
// Uncaught SyntaxError: Unexpected end of JSON input
var obj = JSON.parse("");
// Uncaught SyntaxError: Unexpected end of JSON input
```

もしくはスコープを指定するか、

```js
{
  const obj = JSON.parse("");
}
```

もしくは``let``を使っていったん宣言だけすれば最初に``undefined``がセットされます。

```js
let obj;
// undefined
obj = JSON.parse("");
// Uncaught SyntaxError: Unexpected end of JSON input
obj = JSON.parse("");
// Uncaught SyntaxError: Unexpected end of JSON input
```


闇の魔術とはちょっと違うかも知れないけれど、**Temporal dead☠️ zone**の呼び方が闇っぽいのでここに載せておきました。

と思っていたら、[The Temporal Dead Zone and the Deathly Hallows（Temporal Dead Zoneと死の秘宝）](https://ponyfoo.com/articles/es6-let-const-and-temporal-dead-zone-in-depth)と呼んでいる記事があったのでタイトルも合わせて変えました。
vue.jsでtextareaの高さを動的に変える

textarea_rowsプロパティを持つhogeコンポーネントがあるとする。

サーバーサイドから `\n` の数をカウントして返すなどし、textarea_rowsに代入したとする。

```js:hoge_component.vue             
<!-- textareaのrows属性に、computedのtextarea_rowsの戻り値を適用する -->
                                      <!-- v-bindは省略しても良い :rows="textarea_rows" -->
  <b-form-textarea id="conversation-label" v-bind:rows="textarea_rows" v-model="hoge.conversation"></b-form-textarea>

  computed: {
    textarea_rows: function() {

      // textarea_rowsの\nに +1 をして返す
      return this.hoge.textarea_rows + 1
    }
  }
```
Androidアプリ開発で国民の祝日を表示させるのに試行錯誤。前編

　どうも！ヨースケです。日記アプリもようやく1画面が終わったので、約10時間に及ぶ日帰りミニ旅をしていました。一眼レフでたくさん撮るぞーと意気込んでいましたが、ほとんど撮れませんでした...ただ疲れただけで、帰り道に前方後方不注意の車に二度轢かれかけるなどさんざんな一日でした(笑)。
　
　今回は日記アプリに取り入れたその日が国民の祝日ならば表示しタップするとその詳細をダイアログで表示する。というのを前編後編にわたって紹介します。

- 国民の祝日
- 日付が固定されている祝日
- 第〇月曜日の祝日
- 春分と秋分
- 振替休日

### 国民の祝日
　まず、日本にある国民の休日を記してみます。
**元日、成人の日、建国記念の日、天皇誕生日、春分の日、昭和の日、憲法記念日、みどりの日、こどもの日、海の日、山の日、敬老の日、秋分の日、スポーツの日、文化の日、勤労感謝の日**の16個あります。「体育の日」は2020年に「スポーツの日」と改められました。次はプログラムで重要になる日付の話をします。

### 日付が固定されている祝日
　プログラム的には楽な日付が初めから決められている祝日の一覧です。

| 祝日名 | 日付 | 備考 |
|:------:|:------:|:----:|
| 元旦   |1月1日|   -   |
|建国記念の日|2月11日| - |
|天皇誕生日|2月23日| - |
|昭和の日|4月29日| - |
|憲法記念日|5月3日| - |
|みどりの日|5月4日| - |
|こどもの日|5月5日| - |
|山の日|8月11日|2020年は8月10日|
|文化の日|11月3日| - |
|勤労感謝の日|11月23日| - |

### 第〇月曜日の祝日
| 祝日名 | 日付 | 備考 |
|:-------:|:-----:|:----:|
|成人の日|1月の第2月曜日| - |
|海の日|7月の第3月曜日|2020年は7月23日|
|敬老の日|9月の第3月曜日| - |
|スポーツの日|10月の第2月曜日|2020年は7月24日|
以上の表のようにオリンピック・パラリンピックがある2020年は祝日が動いてしまいますが、月と週と曜日が分かるので何とか判定できそうです。

### 春分と秋分
　この2つの祝日は厄介でした。まず、春分の日は3月の19日～22日うちの1日に、秋分の日は9月の22～24日のうちの1日になります。なぜ年によって日にが異なるのかと言うと地球の公転周期と関係があるようで詳しくは[こちら](https://www.nao.ac.jp/faq/a0302.html)をご覧ください(投げやり)。
　春分の日や秋分の日は逐一カレンダーを見ながら入れていかなければならないのか？と最初は肩を落としましたが、Wikipediaによれば西暦年を4で割ったあまりでその年の春分・秋分の日が決められるそうです。
春分の日：https://ja.wikipedia.org/wiki/%E6%98%A5%E5%88%86%E3%81%AE%E6%97%A5
秋分の日：https://ja.wikipedia.org/wiki/%E7%A7%8B%E5%88%86%E3%81%AE%E6%97%A5
　
### 振替休日
　振替休日は「国民の祝日の日曜日の翌日の月曜日以降の国民の祝日でない祝日の翌日」とちょっとややこしいですがそのように祝日法ではそう記されています。簡単に言えば日曜日が祝日なら次の平日が振替休日に充てられると考えた方がいいかもです。

　後編では考え方や実際書いたソースコードを載せて解説とは言い難いですが、説明をしていこうかなと思います。今週中には上げるのでよろしくお願い致します。

#### 参考文献
祝日法：https://www8.cao.go.jp/chosei/shukujitsu/gaiyou.html
国民の祝日：https://ja.wikipedia.org/wiki/%E5%9B%BD%E6%B0%91%E3%81%AE%E7%A5%9D%E6%97%A5
Swift：macのネットワーク上り下りスピードを取得する

- `Capabilities`の`Incoming Connections (Server)`または`Outgoing Connections (Client)`にチェックを入れる

```swift
class Network {
    
    private var lastUpBytes: Int?
    private var lastDownBytes: Int?
    
    // interval秒ごとのスピード
    func speed(interval: Int) {
        let process = Process()
        process.launchPath = "/usr/bin/env"
        process.arguments = ["netstat", "-bdI", "en0"]
        
        let pipe = Pipe()
        process.standardOutput = pipe
        process.launch()
        
        let data = pipe.fileHandleForReading.readDataToEndOfFile()
        guard var commandOutput = String(data: data, encoding: .utf8) else {
            return
        }
        commandOutput = commandOutput.lowercased()
        let lines = commandOutput.components(separatedBy: .newlines)
        let stats = lines[1].components(separatedBy: .whitespaces).compactMap({ (str) -> String? in
            return str.isEmpty ? nil : str
        })
        let upBytes = Int(stats[9]) ?? 0
        let downBytes = Int(stats[6]) ?? 0
        var upSpeed: Int = 0
        var downSpeed: Int = 0
        if lastDownBytes != nil && lastUpBytes != nil {
            upSpeed = (upBytes - lastUpBytes!) / interval
            downSpeed = (downBytes - lastDownBytes!) / interval
        }
        lastUpBytes = upBytes
        lastDownBytes = downBytes
        
        Swift.print("Upload: \(convert(byte: Double(upSpeed)))")
        Swift.print("Download: \(convert(byte: Double(downSpeed)))")
    }
    
    private func convert(byte: Double) -> String {
        let KB: Double = 1024
        let MB: Double = pow(KB, 2)
        let GB: Double = pow(KB, 3)
        var str = ""
        if GB <= byte {
            str = String((10 * byte / GB).rounded() / 10) + " GB/s"
        } else if MB <= byte {
            str = String((10 * byte / MB).rounded() / 10) + " MB/s"
        } else {
            str = String((10 * byte / KB).rounded() / 10) + " KB/s"
        }
        return str
    }
    
}
```

## 参考
[iglance/iGlance](https://github.com/iglance/iGlance)
pythonでハッシュ化して某大臣のエゴサから逃れる

#はじめに
先日、[こちら](https://qiita.com/namosuke/items/9b6dff13857f19cb30ec)の記事を読んで、私もハッシュ化して67344549d15075a087a77f88e1ad920b21a387a9大臣のエゴサを凌駕したい！と考えpythonのハッシュ化について勉強してみました。
ですので、今回は勉強した内容を共有したいと思います。

#ハッシュ化の概要
・アルゴリズムによって文字列を規則性の見えない文字列に変換する。
　（例）
　ハッシュ化前：サンプル
　　　　　　　　　↓
　ハッシュ化後：b80f059f7c6301c6fb2a34615edca2634bc65fa6

・ハッシュ化のアルゴリズムは何種類も存在する。
・ハッシュ化によって生成された文字列をハッシュ値という。
・ハッシュ値から元の文字列を推定することは困難である。
　つまり、「元データ→ハッシュ値」に変換するのは容易だけど「ハッシュ値→元データ」を推定するのは困難だよ〜ということです。
・規定のアルゴリズムにより生成されているため、何度同じデータをハッシュ化しても同じハッシュ値が生成される。
・元のデータが少し変わると生成されるハッシュ値は全く違うものになる。
といった特徴があります。




#hashlib対応アルゴリズムの確認
```hash_list.py
import hashlib

print(sorted(hashlib.algorithms_guaranteed))
#['blake2b', 'blake2s', 'md5', 'sha1', 'sha224', 'sha256', 'sha384', 'sha3_224', 'sha3_256', 'sha3_384', 'sha3_512', 'sha512', 'shake_128', 'shake_256']
print(sorted(hashlib.algorithms_available))
#['DSA', 'DSA-SHA', 'MD4', 'MD5', 'MDC2', 'RIPEMD160', 'SHA', 'SHA1', 'SHA224', 'SHA256', 'SHA384', 'SHA512', 'blake2b', 'blake2s', 'dsaEncryption', 'dsaWithSHA', 'ecdsa-with-SHA1', 'md4', 'md5', 'mdc2', 'ripemd160', 'sha', 'sha1', 'sha224', 'sha256', 'sha384', 'sha3_224', 'sha3_256', 'sha3_384', 'sha3_512', 'sha512', 'shake_128', 'shake_256', 'whirlpool']

```
_algorithms_guaranteed_：「標準サポート」のハッシュ・アルゴリズムを表示します。
_algorithms_available_ ：「利用可能」なハッシュ・アルゴリズムを表示します。

#サンプルコード
今回は、三つ紹介します。

```hash_sample.py
import hashlib
hash_before_word = '働きたくない'

# MD5
hash_after_word_md5 = hashlib.md5(hash_before_word.encode()).hexdigest()
print(hash_after_word_md5)
#450ba26c03d7740818d9b0f2bb97bc5

# blake2b
hash_after_word_blake2b = hashlib.blake2b(hash_before_word.encode()).hexdigest()
print(hash_after_word_blake2b)
#52e284d94dfdc8e88c2926f234907127e98738e03e96f21a510e4822e0891385154430de8c047a4c4868199aad8b8db093d3a995952d17c738e77cab7875acf9

# sha224
hash_after_word_sha224 = hashlib.sha224(hash_before_word.encode()).hexdigest()
print(hash_after_word_sha224)


```

このように複数のハッシュアルゴリズムによってハッシュ化できます。
他のハッシュアルゴリズムを使いたいときは、ハッシュアルゴリズム名を変更するだけです。

#まとめ
今回はpythonを使ったハッシュ化のアルゴリズムを紹介しました。
67344549d15075a087a77f88e1ad920b21a387a9大臣のエゴサ回避なり、パスワード管理なりご利用ください。（ただし、倫理は守りましょう）

いや〜、ffd4a94997286e73f1031aa7464b0d0cd1213bfdですね。

#参考
https://docs.python.org/ja/3/library/hashlib.html
モンテカルロ法で円周率 π を求める

# 0. 概要

####やりたいこと：
[MonteCalro method](https://en.wikipedia.org/wiki/Monte_Carlo_method)を用いて、円の円周率を求める。

####動機：
大学で履修している計算物理の講義で登場してきたから、ここでその考え方についてまとめたいと思ったから。



#1. 理論的なところ

####半径 r の円を準備する


```math
x^2 + y^2 = r^2
```

と記述できる円(中心が原点、半径 $r$ )を用意する。

<img width="299" alt="スクリーンショット 2019-12-15 13.27.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367076/bfac6e3d-1cee-4b54-8482-1f20b5e7e2b1.png">

この円を4分割したうちの1つを準備しよう。


####切り取ったものを正方形にぶち込む

切り取った円を、以下のように一辺 r の正方形に収納することを考える。

<img width="118" alt="スクリーンショット 2019-12-15 13.42.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367076/bd0090f3-fd07-7fc1-8231-8e8918f43940.png">


以下、簡単のために **r = 1** とする。

####乱数を落として考える

ここで、

```math
0 \le x \le 1 \\
0 \le y \le 1
```

で範囲を設定した乱数を発生させる。
(半径の任意の $r$ とするのであれば、乱数の範囲を $0\le x\le r$ までにしよう。)

この範囲内に乱数を $n$ 個落としたとする。そのうち、円の範囲内に $a$ 個落下したとする。すると、

正方形の面積：1/4円の面積 = $n : a$

```math
r^2 : \frac{1}{4}\pi r^2 = n : a \\
\pi = \left(\frac{a}{n}\right)\times 4
```

というふうに、円周率を求めることができる。これを実装していこう。

#2. 実装

```C++:Mntclo.cpp

#include <iostream>
#include <cstdllib>
#include <cmath>
using namespace std;
//乱数の定義
#define RAND()(float(rand())/(RAND_MAX + 1.0)) 

main() {
  int i;
  int ncout = 0;
  int ntry;
  float x , y , π;
  cout << "ntry=?";
  cin >> ntry;
  for(i = 1; i <= ntry; ++i){
    x = RAND();
    y = RAND();
    if (x*x + y*y <= 1) {
      ncout = ncout + 1;
    }
    π = (float(ncout)/i)*4;
    cout << "i=" << i << "π=" << π << "\n";
  }
}
 
```

#3.結果

1万回の試行結果は以下のようになる。円周率にかなり近似されている。

<img width="1348" alt="スクリーンショット 2019-12-30 14.19.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367076/f97d77f7-3c07-acdb-c7c3-9372f7f1a7a8.png">


という考えで実装ができる。
laravelでマルチログインを実装するために参考になった記事

オリジナルアプリとして、[タピオカなび](https://tapiocanavi.herokuapp.com/)というサイトを作ったのですが、ユーザーのログイン機能と、管理者用のログイン機能2つを作れたらなーと思ってました。

それで、まあ色々調べてなんとか実装できたんで、やり方紹介しようと思ったんですけど、普通に参考になった記事を紹介した方がいいなって結論（ほんとは書くのがめんどくさいだけ、、）になったんで、リンク置いときます。

[【Laravel】マルチログイン(ユーザーと管理者など)機能を設定してみた【体験談】](https://coinbaby8.com/laravel-multi-login.html)
障害対応時のメトリックの項目メモ

最近障害対応をすることがあったのだが、
メトリックってどうやって読むんだ? ということになったので、
メモがてら残しておきます。

# load average
`load average` はサーバー全体の負荷を考えるための指標です。
`average` と名の付く通り、これは平均を表していて、 `System load/CPU Load` といって、１CPUが実行待ちしているプロセスの数であり、それが単位時間(1分,5分,15分)当たりで平均でそれだけ存在しているか？
というのが大まかな定義です。

プロセスはCPUが実行可能な状態であれば即座に実行しようとするので、CPUにどれだけの負荷がかかっているかのを見るということになります。

例えば、シングルCPUのシステムで過去の1分のload averageが0.5、の場合は30秒はCPUは捌くプロセスが無くて待機中だった。言えます。 (処理の総量 < CPUの処理速度)

逆に単位時間1分の`load average`が 5.05の場合だと、1分間に平均して、5個のプロセスが実行待ちであったといえ、その分だけプロセスを実行できなかったといえます。(処理の総量 > CPUの処理速度)

今回は、CPUが一つしかないという前提でしたが、今時のマルチCPUでも見方や考え方は同じです。もし実際にこの指標をみる場合は、監視するサーバーのCPU数を把握して確認しましょう。

また、注意として、load averageが高いからといってCPU負荷も一緒に高いとは限りません。これはIO処理に負荷がかかっていた場合、そもそもIOwaitの状態になってCPUは仕事ができません。なので、load averageが高い場合は cpu と disk(IO)の値を見るようにしましょう。 
 

# file system

これは、 `シンプルにディスクサイズとその使用量` を表しています。

特にログやストレージサーバーのように何かのファイルを保存するといったサーバーであれば、
こまめに確認するなり、アラートを特定のディスク量を使用したらアラートを出すようすべきでしょう。

大抵の問題はディスクサイズを最大限使い切って、新しいログを吐けなかったり、ファイルをアップロードできないといった類なので、
特に↑のことを気に留めていれば問題ないかなと思います。

# disk
`ディスクの読み書き` ようはI/Oです。
これは IOPS(1秒当たりの読み書き量)が使われます。

計算式としては 
IOPS = 1/ (平均アクセス時間 + データ転送時間)

端的に言うと、　`書きたい場所にアクセスして、実際にデータを書き込む`という作業の時間が一秒間に何回できるかといった感じです。
これは、サーバーによって既に限界が決まっているものなので、サービスの想定する負荷に耐えられるか?
平常時、繁忙期、などの想定される負荷をさばけるかということを常に主眼に置きましょう。

また、レンタルサーバーとかだと、IOPS制限といって、一定期間に規定値を超えるIOがあった場合に制限を加えることがあるため、
そこも考えにおいて、負荷をさばけるか? といったことを考えましょう。

# interface
`ネットワーク帯域の使用量` の項目です。
単位は KB/秒
送信 tx
受診 rx

で表されています。

基本的に帯域には限界があります(帯域幅や使用量など)があるので、現在のサーバーではそれがどうなっているかを確認しましょう。
また、クラウドの場合だと従量課金制のため、帯域を使用するとガンガン料金が上がる可能性があるので、
料金の指標としても活用できると思います。

## 帯域とは
調べている最中にそもそも帯域とはんだっけ？となったので、そこらへんも書いておきます。

簡単に言うと `一度に送れるデータの量` みたいなものです。
昔の回線だと、この量が少なかったため、動画などの常にデータを送受信するタイプのものは一度に十分な量のデータを送ることができず、結果として速度がでないといったことが起こっていました。

## 帯域の単位
アナログ通信の場合だとHz
デジタル通信だとbps 

おそらく現在の監視項目はbpsになると思います。
これは、単位時間(今回場合だと秒)にあたり最大どれだけの容量を送れるか? という計算式でこれが多ければ多いほど、
遅れるデータ量も増えるということになります。

## 帯域と通信速度
注意点として、 帯域と通信速度は全くの別物です。

帯域はどれだけ一度に運べるかという容量に相当します。
そして、これを実際に運べる速度(転送速度)が通信速度になります。

なので、厳密には別物ですが、帯域が広いと結果的に通信速度が早くなったようなケースはあります。
例えば大容量のファイルをダウンロードする場合、如何に通信速度が速かろうと帯域(一度に送るデータ容量)が小さいと時間がかかたりします。
逆に、帯域(一度に送れるデータ)が広く、通信速度の普通の場合、一度に処理できる量が増えているため結果的にダウンロードする時間が減ったということになったりします。

# cpu
`CPU使用率` を表します。

CPUがどこで使われているか、そもそもアイドル状態かという部分を見てそこから、原因を探る方がいいと思います。
cpuのグラフは以下の四つを主に見ることがいいそうです。

1. cpu.user (カーネル以外、つまりユーザーが使用した割合)
2. cpu.iowait (I/O待ちでアイドルになった時間の割合)
3. cpu.idle (待機状態だった時間の割合)
4. cpu.system (カーネルが私用した時間の割合)

平常時にどのくらいの割合にどのくらいで障害時はどうなっているのか? 
といった推移、

load average は高い時に、cpu.iowaitの負荷はどうなっているのか? 
cpu.userが高くなっていないか

といった形でcpuの処理の流れで考えていくことがよさそうです。


# memory
`メモリの使用率や空き` を確認するための指標です。
一番の指標としてまず、 swapしていないか? ということですね。

あとはシンプル現在使用しているメモリ率をみて、そのプロセスは何なのか? 
キャッシュに乗っているものはないか? 

といった形で内訳から徐々に

* どのプロセスからの処理に負荷がかかっているのか? 
* ちゃんとキャッシュが解放されているのか? 

などを考えながら見るのがよさそうです。

# 最後に
重要なことは、どうゆう役割のサーバーかを頭に入れたうえでメトリックを見ることが重要だと思います。
ログやファイルアップロードがないサーバーでディスクサイズを確認しても不毛ですし、
ネットワーク通信が頻繁に発生しないDBにinterfaceの値を確認するのは意味がないと思います。

どういった役割から、見るべきメトリックを監視して、そこから平常時と異常時の差分を見ることが一番重要だと思います。

# 参考
https://blog.a-know.me/entry/2017/02/02/215641
https://www.storage-channel.jp/blog/iops.html
https://qiita.com/toshihirock/items/e2d187e91ee5446c7a69
レポート(応用数学)

#要点
##線形代数学

###線形回帰モデル
  スカラーは通常の数であり、ベクトルは「大きさ」と「向き」を持つ
  正則行列の場合、「ad − bc ≠ 0」が成り立つ→逆行列が存在する

####固有値と固有ベクトルの求め方
  行列Aに対する固有ベクトル

####特異値分解
　データを減らすとき、単純にデータを減らしていくと、元の画像と異なる画像になってしまう
　そのため、特異値を減らすことで、元の画像が分かるまま、データを減らすことがができる

##統計学

###集合
　ものの集まり
　
###確率
　頻度確率(客観確率)→発生する頻度
　ベイズ確率(主観確率)→信念の度合い

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491045/12fd6b6e-1c88-a0e3-e09d-e1ee25655d1b.png)


条件付き確率→ある事象Bが与えられた下で，Aとなる確率
　　　　　　→条件付きの場合、確率が高くなってしまうので注意が必要

###統計
　推測統計：集団から一部を取り出し、元の集団（母集団）の性質を推測する
　記述統計：集団の性質を要約し記述する


　二項分布・・・ベルヌーイ分布の多試行版
　ガウス分布・・・真の分布が不明な際、ガウス分布で仮置きをする


##情報科学

###自己情報量
　→どれだけ珍しいのか

###シャノンエントロピ
　→自己情報量の期待値(平均値)
　→最大になるとき、最も現実で起こりやすい

###交差エントロピー
　Qについての自己情報量をPの分布で平均

###カルバック・ライブラー　ダイバージェンス
　同じ事象・確率変数における異なる確率分布P・Qの違いを表している


![bnr_jdla.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491045/9701101a-dc3a-d8f2-b1b6-70fd721a2e62.png)
http://study-ai.com/jdla/
Web Speech Apiの紹介(ブラウザ上での音声認識の話題)

# はじめに
みなさんこんにちは。株式会社みんなのウェディングでデザイナーをしている私です。
12月もそろそろ折り返し地点ですね。くふうアドベントカレンダーも後半に差し掛かって来ましたね。
今回はWeb Speech Apiの音声認識についての紹介です。
詳しい実装方法などには触れてないです。こんなのもあるよ！程度です。

## Web Speech Apiとは
https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API

> Web Speech API は、音声データをウェブアプリに組み入れることを可能にします。Web Speech API は、SpeechSynthesis (Text-to-Speech; 音声合成) と SpeechRecognition (Asynchronous Speech Recognition; 非同期音声認識) の 2 つの部分から成り立っています。

音声認識の方は、リンク先で確認できる通り対応ブラウザがほぼ限られていますが、音声合成に関してはほとんどのブラウザで一応使えるみたいですね。今回は前者のみについて触れます。これを用いることで、ブラウザ上での音声認識が用意に実装できます。

特徴を挙げるとすれば、お金がかからないこと、使い始めるのが容易なことでしょうか。特に登録などもいらないので、「まずは音声認識を使ってみよう」というシチュエーションなどに適していると考えられます。

## 使い方
私が試しに使ってみたときは、こちらの記事を参考にしました。
丁寧に書かれているので、今すぐ使ってみたい方はこちらを読んでいただくのが早いです。
https://paiza.hatenablog.com/entry/2016/07/05/%E9%9F%B3%E5%A3%B0%E8%AA%8D%E8%AD%98%E5%85%A5%E9%96%80%EF%BC%81Web_Speech_API%E3%82%92%E4%BD%BF%E3%81%84Chrome%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%92%E9%9F%B3%E5%A3%B0%E6%93%8D%E4%BD%9C%E3%81%99

## Web Speech Apiの音声認識を使ってやったこと
卒論書いてた頃の私が、好きな二次元キャラクターと会話を試みる動画を発掘しました。
権利の関係でここで紹介することはできませんが、そういう使い方もできます。

この時やったのはかなり単純な実装で、
1. 好きなキャラクターの「おはよう」「おやすみ」ボイスを録音する
2. Apiで認識したテキストが「おはよう」だった場合、「おはよう」ボイスを返す…みたいな実装をする
3. ブラウザ上で、ボタンを押したら音声認識をスタートするようにする
みたいな感じだったと思います。
コードは適当だったのでお見せできないです。はずかC

## Web Speech Apiの音声認識でできそうなこと
今は限られたブラウザ(と、いうか、Chromeだけ…)にしか対応していませんが、このApiでできそうなことは色々ありそうです。

例えば、キャンペーンページなんかで、画面に向かってあるキーワードを発話させるようなものなんかは、良さそうな気がします。流行りの商品プレゼントキャンペーンページに取り入れたら、ただ大量の情報を流し見している現代の中でも、より強い印象をユーザーに与えることが可能になったりするのではないでしょうか。

あとは、ブラウザゲームへの応用も効きそうです。もうすぐ2020年になるのに何言ってんだって感じですが…私が遊んだ時のように、キャラクターに特定のワードを話しかけると反応が返ってくる、という機能は、昔からコンシューマゲームでもたまに見かけました。

もっと簡単なところだと、自社サイトでの音声検索の実装が容易になりそうです。

## Web Speech Api の現実
現在、この機能はおそらく様々な理由から、Chromeにしか対応していないという状況です。
なので、おそらく現実的な利用シーンとしては、ブラウザ上で音声認識を使った機能を実装したい時の、テスト利用でしょうか。
もし、自社サイトで音声認識使いたい！となった場合は、Google Cloud Speech APIなどを利用することになるでしょう。ちなみにGoogle Cloud Speech APIの場合は60分の無料枠があるようです。

# 終わりに

さて、単純にこんなのもあるよ！といった紹介に終わってしまいましたが、いかがだったでしょうか。

最初は、「このApiを使って、擬似恋人をJSで作ればクリスマスも安心♪さみしくない♡」みたいなノリで書き始めたのですが、やめました。
ただ、Web Speech Apiは調べてみると、丁寧に詳細を説明してくれている記事がたくさん出てきて面白いので、ぜひこの際に皆様も調べて見てください😁終わりです
DatadogカスタムCheckの一番小さなコード

# ゴール設定
Datadogエージェントが取得した監視データを、datadogダッシュボードで可視化したい。このときの最小コードをメモする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/b0cce042-4b9d-3702-77c4-c5107825b60e.png)

## datadogエージェントの設定
> ▼ 図解で、Datadogエージェントの設定手順
> https://qiita.com/1Kano/items/3533a8ebe5f6777840a6

## 監視エージェントのプラグインを作る
この検査スクリプトは例として、30秒毎に1から0までのランダムな値データをdatadog監視サーバーに送るだけのモノ。

```/etc/datadog-agent/checks.d/kano.py
import random
from datadog_checks.checks import AgentCheck

__version__ = "0.0.2"

class KanoCheck(AgentCheck):
    def check(self, instance):
        intRandom = random.random()
        self.gauge('kano.random', intRandom)

```
これも例だが、Configファイルは監視間隔のみ記載している。

```/etc/datadog-agent/conf.d/kano.yaml
init_config:

instances:
  - min_collection_interval: 30
```
datadogダッシュボードでのウィジェットでカスタムメトリックを選べるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/8098542b-be7a-6dba-20da-f6e75a956669.png)

# まとめ
datadogエージェントが取得できるデータは、datadogダッシュボードでグラフ可視化ができる。例えばラズパイに接続した温度計のデータをWEBでグラフ化できる。そう、インフラ監視だけではもったいない、IoT的な使い方もできると思った。

>▼ ラズパイにdatadogエージェントをインストールする
>https://docs.datadoghq.com/ja/developers/faq/deploying-the-agent-on-raspberrypi/

## Datadog関連記事

- [図解で、Datadogエージェントの設定手順] (https://qiita.com/1Kano/items/3533a8ebe5f6777840a6)
- [DatadogカスタムCheckの一番小さなコード] (https://qiita.com/1Kano/items/f1f897d8ee943f318c3e)
- [Datadogのデータ予測機能を使う] (https://qiita.com/1Kano/items/b6b484ae3e9afca3d296)
- [図解で、うちのワンコを真夏の暑さから守る（Datadogで）] (https://qiita.com/1Kano/items/5f2eed58794f13776a8e)
- [Datadog基本設定メモ（Windowsサーバ）] (https://qiita.com/1Kano/items/633b17fecec058a8eb2c)
- [Datadog基本設定メモ（CentOSサーバ）] (https://qiita.com/1Kano/items/6851fbe099f9be3fbe14)
- [Datadog基本設定（Log Explorer）] (https://qiita.com/1Kano/items/1c959c20cba3151db071)
- [Datadog基本設定（APM）] (https://qiita.com/1Kano/items/33dbcbc6bc86d369146a)
form_tagからform_withに変換したら問題が出た話[Validationエラーメッセージの表示]

個人アプリ作成中に発生した問題の概要と解決についてまとめます。

#はじめに（背景と発生した問題内容）
-背景：
Tweet機能を持たせたアプリを作成中、文字数制限をValidationで設定していたため、
Tweet時、文字数制限をオーバーしたときにValidationエラーメッセージを出そうとしていました。
その際に、form_tagを用いて以下の記述をしていました。

```rb:view
<div class="main posts-new">
  <div class="container">
    <h1 class="form-heading">編集する</h1>
    <%= form_tag("/posts/#{@post.id}/update") do %>
      <div class="form">
        <div class="form-body">
          <% @post.errors.full_messages.each do |message| %>
            <div class="form-error">
              <%= message %>
            </div>
          <% end %>
          <textarea name="content"><%= @post.content %></textarea>
          <input type="submit" value="保存">
        </div>
      </div>
    <% end %>
  </div>
</div>
```
こちらの記述を実行し、文字数制限をオーバーすると、Validationエラーメッセージが出てきました。
記述に問題はなさそうです。そこで、最近学習したform_withを使用しようとしたところ、
以下の問題が発生します。

-問題：
form_withの記述に変更したところ、Validationエラーメッセージが出なくなってしまった。
記述内容は以下の通り。

```rb:view
<div class="main posts-new">
  <div class="container">
    <h1 class="form-heading">編集する</h1>
    <%= form_with url:"/posts/#{@post.id}/update" do |form|%>
    <div class="form">
      <div class="form-body">
        <% @post.errors.full_messages.each do |message| %>
          <div class="form-error">
            <%= message %>
           </div>
         <% end %>
        <textarea name="content"><%= @post.content %></textarea>
        <input type="submit" value="保存">
      </div>
    </div>
    <% end %>
  </div>
</div>
```
Validationエラーメッセージが出ないこと以外は正常に動いていましたが、やりたいことができてません。。。
そこで、色々と調べた結果、以下のことがわかりました。

#解決方法
まず結論から、今回の問題はform_withの記載中にlocal:trueと記載する必要がありました！

```erb:view
#以下のようにlocal:trueと記載します！
<%= form_with url:"/posts/#{@post.id}/update",local:true do |form|%>

#他の箇所の変更は必要ないですが、念のため全体は以下のようになります。
<div class="main posts-new">
  <div class="container">
    <h1 class="form-heading">編集する</h1>
    <%= form_with url:"/posts/#{@post.id}/update",local:true do |form|%>
    <div class="form">
      <div class="form-body">
        <% @post.errors.full_messages.each do |message| %>
          <div class="form-error">
            <%= message %>
           </div>
         <% end %>
        <textarea name="content"><%= @post.content %></textarea>
        <input type="submit" value="保存">
      </div>
    </div>
    <% end %>
  </div>
</div>
```
上記記載に変更したところ、無事Validationエラーメッセージが出てきました！これで問題解決です！
以下にて今回の問題発生原因についても記載します！

#原因
今回の問題の原因はform_tag/form_forとform_withの仕様の違いが原因でした。
○form_tag/form_for:
 -localは、基本的にtrue設定で記載の必要なし。
 -remote(Ajax)は、記載の必要あり。

○form_with:
 -localは、記載の必要あり。
 -remote(Ajax)は、基本的にtrue設定で記載の必要なし。

今回はAjaxではなく、localでの処理であったため、form_with使用時はlocal:trueの記載が必要だったことになります！

以上となります。最後までご覧いただき、ありがとうございました！
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします！
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。

#参照
Rails 5.1のform_withでViewにvalidationエラー表示
https://qiita.com/k_senbei/items/a361171f653edcd888ad

【Rails】form_with (local: true)について
https://qiita.com/hayulu/items/5bf26656d7433d406ede
PythonでStripeでconnectの子アカウントを作る

[ここを参考にした](https://off.tokyo/blog/stripe%e3%81%a7connect%e3%81%ae%e5%ad%90%e3%82%a2%e3%82%ab%e3%82%a6%e3%83%b3%e3%83%88%e3%82%92%e3%82%b3%e3%83%bc%e3%83%89%e3%81%8b%e3%82%89%e4%bd%9c%e3%82%8b%e6%96%b9%e6%b3%95-python/)
WEBスクレイピングをして頻度を抽出してみた

# はじめに
自然言語処理に興味があり、知識としてWEBスクレイピングを学びたかったので作成しました。

## 環境
windows 10
python 3.7.1
Spyder 3.3.3 

## 環境を整える
Requestsをインストールする

~~~
pip3 install requests
~~~

BeautifulSoupをインストールする

~~~
pip3 install beautifulsoup4
~~~

形態素解析エンジンのjanomeをインストールする

~~~
pip install janome
~~~


## 実装
### スクレイピングしてCSVに保管
記事サイトのタイトルを取得し、CSVに保管する。
※サイトによってスクレイピングする方法が変わるので、サイトに合わせて修正する必要。

~~~
import csv
import requests
from bs4 import BeautifulSoup

#webページ取得
r = requests.get('記事サイトのURL')

#スクレイピング
soup = BeautifulSoup(r.content, "html.parser")

content_list = soup.findAll("div", "content")[0]
rows = content_list.findAll("h2")

outputFile='./test.csv'
with open(outputFile, "a", encoding="utf_8_sig") as file:
    writer = csv.writer(file,lineterminator='\n')
    csvRow = []
    for row in rows:
        str = row.text
        csvRow.append('\n')
        csvRow.append(str)
    writer.writerow(csvRow)
file.close()
~~~

### 形態素解析を行い、文字の頻度を抽出しグラフで視覚化

~~~
import numpy as np
import matplotlib.pyplot as plt
import japanize_matplotlib
from wordcloud import WordCloud
from janome.tokenizer import Tokenizer
from collections import Counter
from PIL import Image

input_file_path = './test.csv'
f = open(input_file_path,'r',encoding = 'utf_8_sig')
txt = f.read()
token = Tokenizer()

word_list = []
for t in token.tokenize(txt):
    word = t.surface
    partOfSpeech  = t.part_of_speech.split(',')[0]
    partOfSpeech2  = t.part_of_speech.split(',')[1]
    
    if partOfSpeech == u'名詞':
        if (partOfSpeech2 != u'非自立') and (partOfSpeech2 != u'代名詞') and (partOfSpeech2 != u'数'):
            word_list.append(word)

# 重複している文字をカウント
data_count = Counter(word_list)

# 使用頻度が高い順に２０番目までデータを格納
data_list = []
for data in data_count.most_common(20):
    data_list.append(data)

# グラフに必要な項目に値を詰める
data_name_list = []
data_value_list = []
for d in data_list:
    data_name_list.append(d[0])
    data_value_list.append(d[1])

# 棒グラフ化
left = np.array(data_name_list)
height = np.array(data_value_list)
plt.figure(figsize=(20, 5), dpi=100)
plt.bar(left, height)
plt.title('GIGAZINEサイト記事タイトル字_使用頻度_11/20-11/22')

for x, y in zip(left, height):
    plt.text(x, y, y, ha='center', va='bottom')
plt.savefig('./bar_basic.png')
plt.show()

# wordcloudグラフ
giga_text = ' '.join(word_list)
fpath = "C:\Windows\Fonts\msgothic.ttc"#フォントのパス
wordcloud = WordCloud(background_color="white",#背景を白に
                     font_path=fpath,width = 800,height=600,colormap="rainbow").generate(giga_text)
wordcloud.to_file("出力したい画像PNGのPATH")

# wordcloudグラフ マスク
img_color = np.array(Image.open("マスクした画像PNGのPATH")) 
wc = WordCloud(background_color="white",
                   width=800,
                   height=600,
                   font_path=fpath,
                   mask=img_color,
                   colormap="YlOrRd"
                  ).generate( giga_text )

# マスクされたwordcloudグラフを画像として出力
wc.to_file("出力したい画像PNGのPATH")
~~~

## 課題
・タイムスケジューラを用いて、定期的（日次）にスクレイピングする。
・同じ記事を取得しないように、制御する。
paizaでアセンブラ その12

#概要

paizaでアセンブラ、やってみた。
練習問題やってみた。

#練習問題

xorの真理値表を作成せよ。

#サンプルコード


```
.code32
.text
.global main

main:
	mov 	$sin, %edi
	mov     $0, %eax
	call 	printf
    mov	    $cr, %edi
	call	puts
	
	mov     $0, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
	mov     $0, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
	mov     $0, %eax
	mov     $0, %ebx
	xor     %ebx, %eax
	mov     %eax, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
    mov	    $cr, %edi
	call	puts
	
	mov     $1, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
	mov     $0, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
	mov     $1, %eax
	mov     $0, %ebx
	xor     %ebx, %eax
	mov     %eax, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
    mov	    $cr, %edi
	call	puts
	
	mov     $0, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
	mov     $1, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
	mov     $0, %eax
	mov     $1, %ebx
	xor     %ebx, %eax
	mov     %eax, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
    mov	    $cr, %edi
	call	puts
	
	mov     $1, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
	mov     $1, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
	mov     $1, %eax
	mov     $1, %ebx
	xor     %ebx, %eax
	mov     %eax, %esi
	mov 	$fmt, %edi
	mov     $0, %eax
	call 	printf
    mov	    $cr, %edi
	call	puts
	
	ret

.data
sin:
	.asciz 	"A B X"
fmt:
	.asciz 	"%d "
cr:
	.byte   13
	.byte   0	



```

#成果物

https://paiza.io/projects/w4g5s3WFAKs818uqP4Mg7g?language=python

以上。
Twitterすら続かなかったエンジニアが、アウトプットできるようになった理由

# 目的
「SNS怖い…」とLINE以外のSNSをやってなかった自分ですが、「完全SIer脱出マニュアル」や他の駆け出しエンジニアさんに触発され、Twitter・Qiita・ Github等でアウトプットするようになりました。本稿ではアウトプットするのに良いサイトやモチベーションの維持の仕方について自分なりにまとめたいと思います。

# 経歴
・大学時代は文系出身。プログラミング未経験。
・学生時代授業の関係でTwitterアカウントを作るも、全然反応が返ってこず挫折。アウトプットをする意味がわからなかった。
・就活が始まり、IT業界について右も左もわからぬまま、未経験でも入社可能なSESに就職。
・配属先は運用系の部署。実務経験がつかない業務担当。
・プログラミングやインフラ周りを勉強し始める。

# アウトプットするようになったきっかけ
運用系の業務で実務経験がつかず、「これはまずい！」と思い、オンラインのプログラミングスクールで勉強しました。スクール卒業後、「次に何したらいいんだろう…」と思っていた矢先、「完全SIer脱出マニュアル」をメンターさんから勧められ、その影響でTwitterすらまともにやったことない私が、SNSを通して情報発信をすることを意識するようになりました。

# アウトプットできるようになった理由
このようにプログラミングどころかSNSすらまともに使いこなせなかった私ですが、現在QiitaやTwitterなどでアウトプットできるように日々精進中です！理由としてはTwitterやQiitaだとView数やいいねなどで反応がわかる、Laprasなどのスキルチェックツールを使って日々の成長が実感できるというところが大きいと思います。また勉強会等通じ仲間を作ったり、転職サイトでスカウト来たりしてアウトプットに対するモチベーションが維持できるようなりました。

# やって良かったSNS/サイト
SNS初心者でも続けやすい・やって良かったSNS/サイトをまとめてみました。

・Twitter(SNS)
URL https://twitter.com/
文字数が少ないので、書きやすい。「#駆け出しエンジニアと繋がりたい」、「#Twitter転職」などとハッシュタグを付けると反応が大きく、モチベーションが上がった。

・Qiita(技術ブログ)
URL https://qiita.com/
Markdownで書きやすくView数が多い。サクサクと書けるのでちょっとした内容でもアウトプットのシェアしたくなる。

・Github(ソフトウェア開発のウェブサービス)
URL https://github.com/
開発エンジニア転職をするなら言わずもがな。書類選考だと「とりあえず草生えているか」といった所もチェックされるみたいなので、しょぼい内容でもアウトプットしてみよう。

・Lapras(プロフィールサイト)
URL https://lapras.com/
SNSなどのオープンデータから個人プロフィールが自動で作られる。Twitter,Github,connpass,Wantedly,Qiita,TeratailなどWebエンジニア向けの主要SNSと連携可能。自分のスキルが数値化するので、自分の成長を可視化できる。
例えばこんな感じ↓
![2725A100-A81B-4AB8-B24E-A0ACCB3313D6.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/80a7bdfe-3186-34ab-bcd4-fcb1bfaf77c3.jpeg)

![7B75E80C-FC35-4355-8D81-9AC86977C02F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449478/1480f559-131f-618c-cc0e-97b6d8f4494e.jpeg)

Findyなどもアウトプットの偏差値化できるが、Githubしか連携できないため、初心者には不向きかも。

・connpass/サポーターズcolab(勉強会サイト)
URL(connpass) https://connpass.com/
URL(サポーターズcolab) https://supporterzcolab.com/　
※現在はサポーターズcolabのサービスは終了。
connpassは言わずと知れた勉強会の日本最大SNS。ここに登録しとけば大体の勉強会は見ることができる。
サポーターズcolabは駆け出しエンジニア向けで面白い勉強会が多いのが特徴。オンライン勉強会や講演会もあるので、「そうはいっても勉強会行くのやっぱり怖い…」と言う人はそういった所から始めるのがおすすめ。

あとはこの記事も良さそう↓
「駆け出しエンジニアの為の信頼出来る情報源」
https://tech.blog.hisaju.org/2019/08/19/info/
（実際にTechcommitと紹介されているイベント全部参加したことありますが、駆け出しエンジニアにも優しいコミュニティでした。）

・ストアカ(スキルシェアサービス)
URL https://www.street-academy.com/tokyo/top
ITに特化している訳ではないが、様々な分野のセミナー・レッスンがあってオススメ。「ちょっとこの分野に興味あるから1dayレッスン参加して見たいな」という時に良い。

・Wantedly/Green(求人サイト)
URL(Wantedly) https://www.wantedly.com/
URL(Green) https://www.green-japan.com/
URL(forkwell jobs) https://jobs.forkwell.com/
Webベンチャーの求人が多い。カジュアル面談できるので気になっている企業に気軽に訪問できるのも魅力の一つ。プロフィールを充実させるとスカウトも来たりする。ちなみに自分はWantedlyスコアが56で18通のスカウトメールが来た。
その他に実務経験があったら「forkwell jobs」もオススメ。

SNSで情報収集＆インプット・アウトプット→勉強会で仲間を作る＆情報交換→転職活動で力試しという流れで行なっていくのがいいかと思います。
もっと情報知りたいという方は池上純平さん著の「完全Sier脱出マニュアル」を見ましょう！
https://www.amazon.co.jp/dp/B07TM9LWTN/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1
(※池上さんの回し者ではないです笑)

#まとめ
SNS初心者には最初から内容が濃いものや長文をアウトプットするとなると、なかなかハードル高いので、Twitter等で小出しに情報発信しつつ勉強していくと続きやすいのではと思います。駆け出しエンジニア同士、高め合っていきましょう！
また良いSNSなどあったら、追記します！
DNS構築 with CentOS7

###この記事の範囲
・vmを立ててunboundを使って名前解決できるようになるまで


###VM環境構築

```
$ vagrant box add centos7 https://github.com/holms/vagrant-centos7-box/releases/download/7.1.1503.001/CentOS-7.1.1503-x86_64-netboot.box
$ vagrant init centos7
$ vim Vagrantfile //vagrantfileを編集してprivateネットワークを設定しておく
$ vagrant up
$ vagrant ssh
```

###DNSサーバ構築

```
$ export LC_ALL=C //これをやっておかないと変なエラーが出る
$ yum update
$ yum install -y vim
$ yum install -y unbound
$ yum install -y bind-utils　←digコマンドのため
```

###unbound.conf設定

```
/usr/sbinと/etc/unbound/にフォルダーが追加される
$ cd /etc/unbound
$ vim unbound.conf //unbound基本設定
$ vim /etc/unbound/conf.d/unbound.conf //このファイルに社内ドメインゾーン情報を書き込んでいく
```

##unbound.conf設定内容

```
------------------------------
server:
       interface: 0.0.0.0　　　　　←すべてのアドレスからの問い合わせに回答(IPv4)
       interface: ::0　　　　　　　←すべてのアドレスからの問い合わせに回答(IPv6)       

       access-control: 0.0.0.0/0 refuse　　　←デフォルト拒否(IPv4)
       access-control: 127.0.0.0/8 allow　　←ループバックアドレスを許可(IPv4)

       logfile: "/var/log/unbound.log"
       use-syslog: no
        
       local-zone: "mtc." static ←mtc.が付いてるが設定にないドメインが来た時 ex hoge.mtc
       local-data: "test.mtc. IN A 192.0.2.51"

       forward-zone:　　　　　　　　　　　←アンコメントする
       name: "."　　　　　　　　　　　　←すべてのドメインに対してフォワード
       forward-addr: 8.8.8.8　　　　　　←フォワード先DNS(今回はGoogle Public DNS)
       forward-addr: 8.8.4.4
------------------------------
```


一旦以下のコマンドで間違いがないかチェックする

`$ unbound-checkconf`


次にこのコマンドで起動してみる

`$ sudo service unbound start`

設定ファイルをいじったら再起動を忘れずに！
JavaScript末尾セミコロンについて

##調べる動機
先日JavaScriptのコードをみていて、末尾コロンがない部分がほとんどだった。僕は今までつけたほうが間違いが少ないというなんとなくでやっていたので、今回調べてみることにした。

##末尾のセミコロンが必要ない場合(末尾コロン自動挿入)

3つほどパターンが存在する。
・①改行を挟んで、構文的にエラーが出るものであれば、セミコロンをいれて文を区切ってくれる
・②コードを最後まで見て、一番最後でエラーになったとき、セミコロンを入れてくれる 
・③特定文字の改行の場合、セミコロンを入れてくれる

[自動挿入パターン](http://var.blog.jp/archives/61938573.html)

###①改行を挟んで、構文的にエラーが出るものであれば、文を区切ってくれる

```
const a = 1
alert(a)

const b = 1;
alert(b);
```

【const a = 1】と【alert(a)】の後ろにそれぞれセミコロンが自動挿入されているため、問題なく動作します。

###②コードを最後まで見て、一番最後でエラーになったとき、セミコロンを入れてくれる

```
const a = 1
alert(a)
```

【const a = 1】には、①のルールが適用されますが、【alert(a)】には改行がないので、①のルールが適用されません。そこで②のルールが適用され問題なく動作します。

###③特定文字の改行の場合、セミコロンを入れてくれる
- return 
- ++ 、--
- break
- throw
- continue
- yield
- ArrowParameters

などの後の改行の際は、その後に続いてエラーが出なくても自動で改行が入る

```
return
3
```

これは、

```
return;
3;
```

return 3;となっても構文的にエラーは出ないが、特定文字のためreturn; 3;となり何も返してくれなくなる。つまり、書くときは

```
return 3;
```

とする必要がある。

###挿入されない例外

```
for(
 ここには自動挿入されない
)

if()
 セミコロン入れても空行の場合は自動挿入されない
else
 alert('a')
```

##セミコロンをいれるかどうか
セミコロンを入れる派が世間的には90%のようです。
入れない派の主張としては、セミコロンを入れるのは冗長、JavaScriptが多様な書き方ができるためなどがあります。

しかし、現実的にチームで開発する際は、間違いが起きにくいほうを選んだほうがいいと思う。そのため末尾には改行を入れるほうがいいと思った。

[JavaScriptの行末セミコロンは省略すべきか](https://blog.tai2.net/automatic_semilocon_insertion.html)
AWS CloudWatch - Alarm 異常検出 のテンプレート

こちらの記事は[ケーシーエスキャロット Advent Calendar 2019](https://qiita.com/advent-calendar/2019/kcscarrot)の15日目の記事です。
ちょっと遡って5日前の記事はgaramanさんの[くずし字を読む (準備編)](https://owlsmind.blogspot.com/2019/12/blog-post_10.html)でした。
子供の頃、百人一首をやった記憶はありますが、普通の日本語で書かれていました。
その為、`くずし字`をあまり見た記憶がありませんが、プログラムで解析しようとする発想がスゴいです。

さて、本日はメトリクスの値を監視する [AWS CloudWatch - Alarm](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/AlarmThatSendsEmail.html) に関して記載してみようと思います。

CloudWatch - Alarm の監視方法としては、指定した閾値を

- 以上 (GreaterThanOrEqualToThreshold)
- 以下 (LessThanOrEqualToThreshol)
- より上 (GreaterThanThreshold)
- より下 (LessThanThreshold)

となった場合にアラーム状態へ遷移する`静的しきい値`のみだったのですが、今年の夏ごろから`異常検出`という方法も可能になりました。

この`異常検出`をコンソールから設定する方法は、[異常検出に基づいて CloudWatch アラームを作成する](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/Create_Anomaly_Detection_Alarm.html)等のサイトに記載がありますが、CloudFormation でデプロイする際のテンプレート記載例が見当たらなかった(探し方が悪いかもですが)ので記載してみようと思います。

[CPU 使用率アラーム](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/quickref-cloudwatch.html#cloudwatch-sample-cpu-utilization-alarm)を異常検出へ書き換えた例。

```yaml:template.yml
CPUAlarmForAnomaly:
  Type: AWS::CloudWatch::Alarm
  Properties:
    AlarmName: anomaly-alarm
    AlarmDescription: CPU alarm for my instance
    AlarmActions: Ref: "logical name of an AWS::SNS::Topic resource"
    Metrics:
    - Id: m1
      ReturnData: true
      MetricStat:
        Period: 60
        Stat: Average
        Metric:
          MetricName: CPUUtilization
          Namespace: AWS/EC2
          Dimensions:
          - Name: InstanceId
            Value: Ref: "logical name of an AWS::EC2::Instance resource"
    - Id: a1
      Expression: ANOMALY_DETECTION_BAND(m1, 2)
    EvaluationPeriods: 3
    ThresholdMetricId: a1
    ComparisonOperator: GreaterThanUpperThreshold
```

**以上！** …だとそっけなさ過ぎるので、簡単に説明を記載すると、

```yaml
    - Id: m1
      ReturnData: true
      MetricStat:
        Period: 60
        Stat: Average
        Metric:
          MetricName: CPUUtilization
          Namespace: AWS/EC2
          Dimensions:
          - Name: InstanceId
            Value: Ref: "logical name of an AWS::EC2::Instance resource"
```
の部分が監視するメトリクスの宣言となります。
注意点としては、`静的しきい値`と比較すると`統計方法`の記載が異なる(`Statistic`⇔`Stat`)ことです。

そして、

```yaml
    - Id: a1
      Expression: ANOMALY_DETECTION_BAND(m1, 2)
```
の部分で、監視対象メトリクスの値を異常検出と見なす想定値の範囲を指定(`2`)しています。
![Anomaly_Detection_Graph2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218385/3ce166bb-5387-8490-f72d-f18152ad5901.png)
`異常検出`方式で Alarm として設定してみると、上図のような感じで実際のメトリクスの値に沿って想定値の範囲(グレーの部分)が設定(想定)されます。

詳細は[CloudWatch の異常検出の使用](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/CloudWatch_Anomaly_Detection.html)を参照。

因みに、監視方法(ComparisonOperator)も`静的しきい値`と異なっていて

- 想定値の範囲を上回った場合 (GreaterThanUpperThreshold)
- 想定値の範囲を下回った場合 (LessThanLowerThreshold)
- 想定値の範囲を上回った or 下回った場合 (LessThanLowerOrGreaterThanUpperThreshold)

の3つから指定可能です。

この`異常検出`の使いどころとしては、しきい値が設定しにくい(時間帯や日によって異なる等)場合に良いかもしれませんね。
Dockerの CentOS8 イメージのlocale 設定

# 概要

Docker の CentOS8 イメージを取得したが、locale にja_JPが存在しない。
ロケールの取得から設定までの手順を記載する。

# 手順

### 日本語localeの取得

```
dnf -y install langpacks-ja
```

下記コマンドでja_JPが存在するか確認する。

```
localectl list-locales
```

### 設定

```
localectl set-locale LANG=ja_JP.UTF-8
```

### 設定の反映

```
source /etc/locale.conf
```

以上
iOS13.3 @Publishedでの値更新からsinkが呼ばれなくなった？（ミス解決）

#iOS13.3では@Publishedでの値更新でsinkが呼ばれない？

##起きたこと
iOS13.3に更新したところ、SwiftUIのEnvironmentObject上の@Publishedの更新通知が受け取れなくなりちょっとハマりました。結局の所、もともと更新通知を受け取る処理を書き間違えていたことが原因でした。


##修正前
```swift:
    let _ = self.model.$text.receive(on: DispatchQueue.main)
    .sink { (value) in
        print("receive")
        self.text = value
    }
```


##修正後
```swift:
var task:AnyCancellable? = nil
...
    self.task = self.model.$text.receive(on: DispatchQueue.main)
    .sink { (value) in
        print("receive")
        self.text = value
    }
```

きちんと戻り値のAnyCancellableを保持していないことが問題でした。考えてみれば納得なのですが、iOS13.2までは動いていたので見落としていました。戒めの意味を込めて記録しておきます。
CentOS8 - Play - Django

## インストール〜起動まで
### アクティべート
~~~
$ source django/bin/activate
~~~ 

### プロジェクト作成
~~~
// プロジェクトを作成したいディレクトリに移動し、作成
(django) [*****]$ django-admin startproject hellodjango
~~~

### プロジェクト確認
~~~
(django) [*****]$ ls hellodjango/
hellodjango  manage.py

(django) [*****]$ ls hellodjango/hellodjango/
__init__.py  __pycache__  asgi.py  settings.py  urls.py  wsgi.py
~~~
- hellodjango（外側）：プロジェクトのただの入れ物。この名前はDjangoに関係しないため、好きな名前に変更可能
- manage.py：プロジェクトに対する様々な操作を行うためのコマンドラインユーティリティ
- hellodjango（内側）：プロジェクトの実際のPythonパッケージ
- __init__.py：このディレクトリがPythonパッケージであることを知らせるための空のファイル
- settings.py：プロジェクトの設定ファイル
- urls.py：DjangoプロジェクトのURL宣言（＝Djangoサイトにおける「目次」に相当する）
- wsgi.py：プロジェクトをサーブするためのWSGI互換Webサーバとのエントリーポイント

[参考：はじめての Django アプリ作成](https://docs.djangoproject.com/ja/1.11/intro/tutorial01/)

### 起動
~~~
(django) [*****]$ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

December 16, 2019 - 14:06:33
Django version 3.0, using settings 'hellodjango.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
~~~

### アクセス
ttp://127.0.0.1:8000/

The install worked successfully! Congratulations!
と表示されたら成功！


## アプリケーション作成
### アプリケーション作成
~~~
// manage.pyのあるディレクトリへ移動し、実行
$ python manage.py startapp hello
~~~

### データベース設定

いろいろ設定して…

~~~
python manage.py migrate
~~~

### モデル設定


### モデル有効化
paizaでアセンブラ その11

#概要

paizaでアセンブラ、やってみた。
練習問題やってみた。

#練習問題

九九やってみて。

#サンプルコード


```
.code32
.text
.global main

main:
    mov     $1, %esi
    mov     $1, %edi
loop:
    mov     %esi, %eax
    push    %esi
    mov     %edi, %ebx
    push    %edi
    mul     %bl
    mov     %eax, %esi
	mov 	$fmt, %edi
	mov 	$0, %eax
	call 	printf
	pop     %edi
    pop     %esi
	add     $1, %esi
	cmp     $10, %esi
    jnz     loop
    push    %esi
    push    %edi
    mov	    $cr, %edi
	call	puts
	pop     %edi
    pop     %esi
    mov     $1, %esi
    add     $1, %edi
    cmp     $10, %edi
    jnz     loop
	ret

.data
fmt:
	.asciz 	"%d "
cr:
	.byte   13
	.byte   0
```

#成果物

https://paiza.io/projects/bm5VWi95uq4Vd6vL_89u9A?language=python

以上。
S3バケットポリシーでAssumeロールのアクセス設定を行う 

# はじめに
S3のバケットポリシーでAssumeロールのアクセス制御設定の方法をまとめる。

# 詳細
アカウントAでIAMユーザー `hoge` からAssumeロールしアカウントBのS3バケットにアクセスする状況を想定。
S3バケットのバケットポリシーでは、そのAssumeロールでのみアクセス許可しその他のアクセスは拒否する設定を行う。

バケットポリシー設定方法は以下の２つ
1.アクセス制御にAssumeロール元のIAMユーザーarnを使用する
2.アクセス制御にAssumeロールのIAMロールIDを使用する

#方法1
アクセス制御にAssumeロール前のIAMユーザーarnを使用する場合。

```json:バケットポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Deny",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<バケット名>/*",
            "NotPrincipal": {
                "AWS": [
                    "arn:aws:iam::<アカウントID>:role/<ロール名>",
                    "arn:aws:sts::<アカウントID>:assumed-role/<ロール名>/<元のIAMユーザー名>"
                ]
            },
        }
    ]
}
```

`Principal` または `NotPrincipal` ではワイルドカード `*` を使用できないため、
会社等、複数のユーザーが同じAssumeロールを使用する場合、ユーザーごとに `NotPrincipal` を書く必要があり、この方法は向かない。




#方法2
アクセス制御にAssumeロールのIAMロールIDを使用する場合。
IAMロールIDはコンソール上では確認できず、AWS CLIでのみ確認可能。
以下のコマンドを実行し、IAMロールIDを確認する。

```
$ aws iam get-role --role-name <IAMロール名>
```

バケットポリシーに以下を記載する。

```json:バケットポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "2",
            "Effect": "Deny",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<バケット名>/*",
            "Condition": {
                "StringNotLike": {
                    "aws:userid": "<IAMロールID>:*"
                }
            }
        }
    ]
}
```
Catalinaにjavaをインストールできない場合

#javaをmacにインストールできない、、
macを買い替えたので、新たにjavaをインストールしようとしたときに問題が起こりました。
MacのOSはCatalina(10.15.1)です。

```
brew cask install java 
```
このスクリプトを実行してバージョンを確認しようとしたところ思わぬエラーが、、
<img width="690" alt="スクリーンショット 2019-12-15 12.47.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282033/a29b649a-e753-2546-cb68-9185dcfc7a15.png">
MacのOSがcatalinaになってからこのようなエラーが出ている人がちらほらいるみたいです。
##解決策
解決策としては、oracle公式のインストーラを使ってインストールすることで事なきを得ました。
[oracle公式](https://maysatsuki.com/mac/jdk/90)にあるインストーラ(<b>拡張子がdmgのほう</b>)を使うことでこの問題を解決することができます。
バージョンも確認できました。

```
$ java -version
java version "13.0.1" 2019-10-15
Java(TM) SE Runtime Environment (build 13.0.1+9)
Java HotSpot(TM) 64-Bit Server VM (build 13.0.1+9, mixed mode, sharing)
```


##注意点
oracle公式からmac用のインストーラが2つあるのですが、拡張子がtar.gzのほうを使うと同様のエラーが出てしまう可能性があります。
自分の環境ではエラーが出ました。
ESlintでno-unused-varsのチェックをオフにする方法

`.eslintrc.js`に`"no-unused-vars": "off"`を書くと、`eslint`全体で`no-unused-vars`のチェックがオフになります。

```conf:.eslintrc.js
    ...
    "rules": {
         "no-unused-vars": "off"
    }                                                                                                        
   ...
```
【Qiita】記事で使える 続きを読む もっと詳しく

Qiita記事で挨拶、はじめに、前振り、要約や概要、自分語り、以下略等が長い時に read more
アコーディオン メニュー 折りたたみ **CSSなし**

詳細折りたたみ要素 detales summary タグを使用する。
改行するとはみ出る。

- **Markdownの何が機能するのか**

<details><summary>続きを読む　Read more</summary>
**text** 強調（太字） 
*text* 強調（斜体）
~~text~~ 打ち消し線
`code` コードのインライン表示
[title](https://www.youtube.com/) リンク
画像埋め込み
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362315/f0cc0880-68fd-6e15-01d6-8d344a7b3289.png)
```ruby:qiita.rb
puts 'code with syntax'
```
\
| Left align       |       Right align |    Center align    |
|:-----------------|------------------:|:------------------:|
| This             |              This |        This        |
| column           |            column |       column       |
| will             |              will |        will        |
| be               |                be |         be         |
| left             |             right |       center       |
| aligned          |           aligned |      aligned       |
</details>

- **HTMLの何が機能するのか**

<details><summary>続きを読む　Read more</summary>
<dl>
<dt>A：</dt><dd>a.mp4</dd>
<dt>B：</dt><dd>b</dd>
</dl>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>

</detales>


```read_more.html
<details>
<summary>続きを読む</summary>
   
</details>
```
マンガでわかる Interpreter

![F6F1CB4E-161C-41BD-831F-478F0D1D767B.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/c2fd2aa5-3d6e-4f8e-8f8a-c6f351bfacd1.png)

あやうくシナリオライターの気まぐれのせいで、発売直前に何度も再コンパイルさせられる、地獄のデスマになるところでした。

Interpreter パターンは GoF のデザインパターンの中で、もっとも異色の存在です。メイン開発言語で柔軟性が得られないときは、別の言語インタプリタを使いなさいなんていう、ずいぶん乱暴な (オブジェクト指向と関係ないじゃんと思えるような ← だから何度も言ってるとおり、OOP 言語のためだけのものじゃないんですよこれ) 設計方針です。

...と思うでしょ。でもこれ、なんのことはない、別の言語で書かれた設定ファイルを使いましょう、あるいは、できるプログラマーは他の人でも書ける DSL のプロセッサーを作っておくようにすると楽ですよ、っていう、ごく普通のことを言っています。

Interpreter が処理する言語は、用をなすなら、条件分岐や繰り返しなんてなくてもかまいません。GOTO ジャンプだって場合によってはあり (ゲームのシナリオなんてとくに) です。上から下に逐次処理でなくても、XML/YAML で宣言された定義の依存をたどって、順序を再構成したってかまいません。もとが軽量言語なら、その文法パーサーを拝借して Array と HashMap のリテラル使った DSL だってかまわないでしょう。

ともかく、メイン開発言語のフル機能ではない、より簡易なプログラムコード的なものを、 Command の列をオブジェクトで表現し、それらを実行できるようにした仕組みというのは、柔軟性をすごく上げるよって、それだけなんです。

あ、外部設定ファイルといっても、変数名と値を結びつけるだけの ‘.env’ みたいなものはさすがに Interpreter とは言えませんよ。あと、軽量言語の言語内 DSL と言いながら、メイン言語を完全に習得していないと書けないようなものも、ちょっと違いますよね。何が目的だったか、よく考えましょうってことです。
MediaPipe を Windows の WSL (無印)で動かす （結論: カメラは無理だけど動画ファイルならOK）

raspbian のほうのコンパイルに時間かかって暇なので、先にWindowsで試してみる。Windows は WSL でしか mediapipe はサポートされてないようなので、WSL を有効化して Ubuntu 18.04 を入れるところからやる。

## 結論

WSLがカメラデバイスに対応してないそうな。
https://ja.stackoverflow.com/questions/59505/wslubuntu%E3%81%8B%E3%82%89web%E3%82%AB%E3%83%A1%E3%83%A9%E3%81%AB%E6%8E%A5%E7%B6%9A%E3%81%97%E3%81%9F%E3%81%84

無理やん。ファイルから読むようにすればできるかも。とりあえず手順だけ書いておく。

## WSL の準備

主に下記の要約
https://www.atmarkit.co.jp/ait/articles/1608/08/news039.html

Windows10 の PowerShell を管理者権限で起動して次のコマンドを実行する。

    Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Microsoft Store で Linux とか Ubuntu とか検索して、ディストリビューションをインストールする。

![tmp.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/c426d3ae-0398-88e2-ac16-3d0a6aa2368b.jpeg)

インストールされたら「起動」を押して起動する。

## mediapipe の準備

以下は、下記URLの通りにやるhttps://github.com/google/mediapipe/blob/master/mediapipe/docs/install.md#installing-on-windows-subsystem-for-linux-wsl

Installing on Windows Subsystem for Linux (WSL) の記述のところにあるとおりにする。

## hello world のビルド

GPU なしでビルトする。

    $ bazel run --define MEDIAPIPE_DISABLE_GPU=1 \
        mediapipe/examples/desktop/hello_world:hello_world

特に問題なくビルドと run できた。

## Hand Tracking はどうなの

ビルドは通るけど、カメラにアクセス出来ないといわれて無理。

    demo_run_graph_main.cc:52] Initialize the calculator graph.
    demo_run_graph_main.cc:56] Initialize the camera or load the video.
    demo_run_graph_main.cc:146] Failed to run the graph: ; capture.isOpened()(mediapipe/examples/desktop/demo_run_graph_main.cc:64)

WSL2になったらできるかも、ということらしい。

参考: https://github.com/google/mediapipe/blob/master/mediapipe/docs/hand_tracking_desktop.md#tensorflow-lite-hand-tracking-demo-with-webcam-gpu

## ファイルを読ませるのはどうか

    $ bazel build -c opt mediapipe/examples/desktop/hand_tracking:hand_tracking_tflite --define MEDIAPIPE_DISABLE_GPU=1
    $ export GLOG_logtostderr=1
    $ bazel-bin/mediapipe/examples/desktop/hand_tracking/hand_tracking_tflite        --calculator_graph_config_file=mediapipe/graphs/hand_tracking/hand_tracking_desktop.pbtxt \
      --input_side_packets=input_video_path=./in.mp4,output_video_path=./out.mp4

これは動いた。あらかじめ in.mp4 という動画を用意しておいて、上記コマンドで処理すると out.mp4 が出力される。リアルタイムにやるのと違ってフレーム飛びしない。

## 追伸

Android 用のバイナリをコンパイルすることはできる。ADBを使って apk を Android にアップロードとかもできる。けど、趣旨から外れるのでここではパス。

## Ubuntu 20.04LTS の追記

1. opencv2/core.hpp not found とか言われた場合：

```
$ sudo ln -s /usr/include/opencv4/opencv2 /usr/include/opencv2
```

としてみる。

2. opencv2/optflow.hpp not found とか言われた場合：

```
$ sudo apt install libopencv-contrib-dev
```

としてみる。

3. Numpy is Installed? とか言われた場合：

```
$ sudo apt install python-numpy
```

としてみる。

これくらいで通りました。