OmniAICreator/Qiita-1.07M huggingface dataset:
zoomのバーチャル背景を動画にして遊ぶ

## はじめに
昨今の情勢からリモートワークをしているわけですが、ちょっと変化が欲しいな〜とか思い始めた時期になりました。

僕はzoomの他にremoやGoogleハングアウト、たくのむなどオンラインビデオツールを試してきましたが、なんだかんだ長時間の会議などはzoomがいいですね。

さて本記事では、「いつも同じバーチャル背景だとつまらん、オンラインでも笑いがとりたいんだ！」という方のためにzoomの「ビデオ背景」と提案します。

設定はとても簡単なので早速いきましょう。

以下のような感じの設定ができます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">zoomのバーチャル背景動画にしたらカスタマイズ性ありすぎた笑 <a href="https://t.co/yJHwksMdMA">pic.twitter.com/yJHwksMdMA</a></p>&mdash; はがっち/隙あらばエンジニア (@uzr4b) <a href="https://twitter.com/uzr4b/status/1249305909102174208?ref_src=twsrc%5Etfw">April 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## QuickTime Playerで動画をとる
ごめんなさい、こちらMac用のアプリでの紹介になります。
ただし動画はスマホで撮っても良いですし、windowsにも同様のアプリがあると思うのでいい感じにお願いします。

Macには標準でQuickTime Playerというソフトがインストールされています。今回はこちらを使って動画を撮影していきます。

`QuickTime Player →　ファイル → 新規ムービー収録`
の流れで撮影してください。

## QuickTime Playerで動画をカットする
編集してゴリゴリアソビたい方は有料ツールとかを使用すれば良いと思いますが、今回は動画の撮り始めと終わりだけカットして自然に仕上げます。

QuickTime Playerでの動画のカットは以下の流れです。
`QuickTime Player → 編集 → トリム`

簡単にできますね、素晴らしい。

## zoomのバーチャル背景に動画で設定する
<img width="978" alt="スクリーンショット 2020-04-12 21.26.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416999/241fe331-ee09-2667-3ca4-b54d257cc30e.png">
画像のように`ビデオの停止`ボタンの横の上矢印をクリックし、`バーチャル背景を選択`します。

<img width="974" alt="スクリーンショット 2020-04-12 21.28.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416999/024e8645-b079-220a-1ea6-c2d55be90ae0.png">
上の画像のように画面右に[+]ボタンが現れるのでここで`動画を追加`を選択し、先ほど撮影した動画に設定してください。

## まとめ
三密禁止！外出るな！などストレスが溜まりやすい状態になっていると思います。
いい感じに動画を使ってストレスを解消してみてください！！
Laravel CSS反映されない事件

#前提
フレームワークでLaravelを使用。
ローカル環境にてCSSを当てようと修正し、リロードするもCSSが反映されない事件が発生。

##原因
scss(sass）ファイルはコンパイルしてcssに変換する必要がある。

##解決方法
Laravelにはlaravel Mixというビルドツールが最初から入っているので
ターミナルにて下記、コマンドを入力すると解決。

```ターミナル
$ npm run dev
```
Rubyで線形探索と二分探索を出力する

こんにちは、Ruby歴半年のプログラマです。

基本的なアルゴリズムを習得したいと考えて、『Pythonではじめるアルゴリズム入門 伝統的なアルゴリズムで学ぶ定石と計算量』を読んでいます。

本記事は『Pythonではじめるアルゴリズム入門』のPythonの**線形探索**と**二分探索**のサンプルコードをRubyで実装しました。

より良いコードの書き方などありましたら教えてもらえると嬉しいです。

## 環境

```bash
$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.4
BuildVersion:   19E287
$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]
```

## Rubyで線形探索

```ruby
def binary_search(data, input_number)
  data.each_with_index do |number, index|
    return index if number == input_number
  end
end

data = [10, 20, 30, 40, 50, 60, 70, 80, 90]
p binary_search(data, 40)
# -> 3
```

## Rubyで二分探索

```ruby
def binary_search(data, input_number)
  first_point = 0
  last_point = data.count - 1
  # 始点が終点よりも小さい間繰り返し処理をする
  while first_point <= last_point
    # 中央位置は始点と終点の間
    base_point = (first_point + last_point).div(2)
    if data[base_point] == input_number
      return base_point
    # 中央点が探索している数値よりも大きければ終点の位置を中央位置の右側にずらす
    elsif data[base_point] > input_number
      last_point = base_point - 1
    # 中央点が探索している数値よりも小さければ始点の位置を中央位置の左側にずらす
    else
      first_point = base_point + 1
    end
  end
end

data = [10, 20, 30, 40, 50, 60, 70, 80, 90]
p binary_search(data, 40)
# -> 3
p binary_search(data, 80)
# -> 7
```

探したい値`input_number`と中央位置`data[base_point]`との大小比較によって始点`first_point`や終点`last_point`の値を更新する処理がポイントですね。
Rubyでフィボナッチ数列を出力する

こんにちは、Ruby歴半年のプログラマです。

基本的なアルゴリズムを習得したいと考えて、『Pythonではじめるアルゴリズム入門 伝統的なアルゴリズムで学ぶ定石と計算量』を読んでいます。

本記事は『Pythonではじめるアルゴリズム入門』のPythonの**フィボナッチ数列**のサンプルコードをRubyで実装しました。

より良いコードの書き方などありましたら教えてもらえると嬉しいです。

## 環境

```bash
$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.4
BuildVersion:   19E287
$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]
```

## Rubyで再帰を使ったフィボナッチ数列

**2020年4月15日追記** @superrino130 さん @scivola さん より、`memo` がメソッド内に定義されているのでメモの意味がないとのご指摘をいただきましたので、実装を修正しました。なお修正前と修正後のベンチマークを計測しました。

```ruby
@memo = { 1=> 1, 2=> 1 }
def fibonacci(input)
  return @memo[input] if @memo
  @memo[input] = fibonacci(input - 2) + fibonacci(input - 1)
end

fibonacci(10)
# -> 55
```

例外条件(メモにすでにキーが含まれているか)を確認して、例外条件に合致すればそのバリューを返す、ガード節を定義しています。


```ruby
return memo[input] if memo.has_key?(input)
```

### メモ化の効果を測定するベンチマーク

```ruby

require 'benchmark'

n = 35
Benchmark.bm(7) do |x|
  x.report("memo") {
    # 修正前(メモがメソッドの定義内なので効果なし)
    def fibonacci(input)
      memo = { 1=> 1, 2=> 1 }
      return memo[input] if memo.has_key?(input)
      memo[input] = fibonacci(input - 2) + fibonacci(input - 1)
    end
    fibonacci(n)
  }
  x.report("@memo") {
    # 修正後(メモがメソッドのスコープ外なので効果あり)
    @memo = { 1=> 1, 2=> 1 }
    def fibonacci(input)
      return @memo[input] if @memo
      @memo[input] = fibonacci(input - 2) + fibonacci(input - 1)
    end
    fibonacci(n)
  }
end
```

```
memo      2.580194   0.025784   2.605978 (  3.037780)
@memo     0.000006   0.000001   0.000007 (  0.000007)
```

参考

- [Ruby でベンチマークを取る方法](https://qiita.com/scivola/items/c5b2aeaf7d67a9ef310a)
- [Benchmark.#bm](https://docs.ruby-lang.org/ja/latest/method/Benchmark/m/bm.html)
- [benchmark-driver](https://github.com/benchmark-driver/benchmark-driver)


## Rubyでループを使ったフィボナッチ数列

```ruby
def fibonacci(input)
  (2...input).inject([1, 1]){ |memo, number|
    memo << (memo[number - 2] + memo[number - 1])
  }
end

p fibonacci(10)
# -> [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]
```

初期値を用意して畳み込みの演算ができる[Enumerable#inject](https://docs.ruby-lang.org/ja/latest/method/Enumerable/i/inject.html)を使っています。
【Python】returnとreturn Noneどちらを使うべきか

# return文で関数処理を終了したい場合は`return None`と`return`どちらを使うべきか？

Pythonの関数を書いていたときにふと疑問に感じたことが。

それは関数の途中で処理を終了したい場合に、`return`と書くべきなのか`return None`と書くべきなのかという問題。

Pythonでは明示的に書くことが推奨されているため、return文で処理を終了するときも`None`を返すときも`return None`と書くべきなのかなぁと迷いました。（※Pythonでは、関数定義で`return`だけ書いた場合、あるいは`return`の記述が無い場合は`None`が返ってきます。参考：[【Python】returnを記述しなかった関数が返す値](https://www.takasay.com/entry/2015/06/14/010000)）


## 例をあげてみる
[return, return None, and no return at all?](https://stackoverflow.com/questions/15300550/return-return-none-and-no-return-at-all) が参考になりました。例をあげて説明してみます。

### `return None`を使う

```python
def hello_all():
    persons = ['Zepp', 'Eric']

    if persons:
        for person in persons:
             print('Hello ' + person)
    # リストが空だったらNoneを返す
    else:
        return None
```

### `return`を使う
戻り値のNoneを使いたい場合に明示的に`return None`と書くといいましたが、戻り値を使うのではなく関数を終了したい場合には`return`を使ってもOKです。下のコードではforループを抜けて関数を終了させるために使っています。

```python
def hello_zepp():

    persons = ['Zepp', 'Eric']

    for person in persons:
        print('Hello ' + person)
        # 処理を終了
        return
```

つまり**forループが一重の場合には`break`と同じ働き**をします。

多重forループでネストされたforループ内で処理を終了したい場合は`break`と異なって`return`を一つ書くだけで関数を終了できるので、コードが簡潔になります。

このように`return`を使う場合はループを抜ける場合など、強制的に関数の途中で処理を終了したい場合に使います。

####  :no_good: 注意すること
この場合、戻り値の`None`は使うことを想定していないと考えられるため、戻り値を変数に代入する使い方は多用するべきではないと個人的には思います。ただ、敢えて省略しているケースも多くあるとのことなので、ドキュメントに明示的に戻り値を書くなどすれば問題ないようです（コメント欄参照）。

```python
result = hello_zepp()
```

また、関数を途中で終了したい場合には、条件に合わずに処理を中断したい場合も含まれると思います。そのような場合は`return`を使うよりも、適切な例外クラスを作って例外をなげて、呼び出し元でエラーハンドリングをした方がよいケースもあるかもしれません。

### `return`の記述なし
Pythonの関数はreturn文を必ずしも必要としませんが、return文が無い場合でも戻り値として`None`が返ってくるようになっています。

```python
# return文は無いが戻り値としてNoneが返される
def hello_eric():

    persons = ['Zepp', 'Eric']
        print('Hello ' + persons[1])
```


## 結論
- 関数処理を中断したいだけのときは`return`を使う方がベター。
- 戻り値の`None`を利用する場合は`return None`を使うとわかりやすい。
-  多重ループを一気に抜けるときは`return`は便利かも。
Git で特定のコミットの特定のファイルだけ取り出したい

特定のコミットの内容を取り込むなら `cherry-pick` でできます。
だけどさらに、その中の特定のファイルの差分だけ取り込んで、他は無視したい場合はどうする？　という話です。

## TL;DR

`git checkout -p` でできます。

```
git checkout (-p|--patch) [<tree-ish>] [--] [<paths>...]
```

## 使い方

```sh
$ git diff HEAD daa154e hoge.txt  # カレントブランチとの差分を確認する
diff --git a/hoge.txt b/hoge.txt
index e42f4ce..2262de0 100644
--- a/hoge.txt
+++ b/hoge.txt
@@ -1,2 +1 @@
 hoge
-fuga

$ git checkout -p daa154e hoge.txt  # 差分をインデックスに反映する
diff --git b/hoge.txt a/hoge.txt
index 2262de0..e42f4ce 100644
--- b/hoge.txt
+++ a/hoge.txt
@@ -1 +1,2 @@
 hoge
+fuga
(1/1) Apply this hunk to index and worktree [y,n,q,a,d,e,?]? y

$ git diff --staged  # インデックスに反映されたことを確認する
diff --git a/hoge.txt b/hoge.txt
index 2262de0..e42f4ce 100644
--- a/hoge.txt
+++ b/hoge.txt
@@ -1 +1,2 @@
 hoge
+fuga
```

`(1/1) Apply this hunk to index and worktree [y,n,q,a,d,e,?]?` の部分はインタラクティブになっていて、 `y` を選ぶと表示されている箇所の差分が取り込まれます。
? で各コマンドの内容を確認できます。

```
(1/1) Apply this hunk to index and worktree [y,n,q,a,d,e,?]? ?
y - apply this hunk to index and worktree
n - do not apply this hunk to index and worktree
q - quit; do not apply this hunk or any of the remaining ones
a - apply this hunk and all later hunks in the file
d - do not apply this hunk or any of the later hunks in the file
e - manually edit the current hunk
? - print help
```

コミットハッシュの部分は [tree-ish](https://stackoverflow.com/questions/4044368/what-does-tree-ish-mean-in-git) なのでブランチ名やタグ名を指定して取り込むこともできます。

## おまけ

Git でこれやりたいけどコマンド分からん...ってときは [Git Explorer](https://gitexplorer.com/) というサイトが便利です。
今回の `git checkout -p` は "I want to" から "merge" -> "merge a single file from one branch to another." の順に選択して発見しました。
C++で1〜100までループや再帰を使わず描く方法

## 初めに
ことの発端はQuoraに[1-100をループ、goto、再帰関数を使わずに表示する方法](https://www.quora.com/How-can-I-print-1-to-100-in-C++-without-a-loop-goto-or-recursion)からでした。
海外のプログラマーたちが様々な工夫を凝らす中一人の男が数式を用いて回答しました。

> C++のことは知らないけど、ふと頭によぎった方法をシェアするね。
>>I don't even know C++, but I'd like to throw my hat into the ring anyway, just to offer the method I would use if I knew how.

> [Quora](https://www.quora.com/How-can-I-print-1-to-100-in-C%2B%2B-without-a-loop-goto-or-recursion/answer/Conner-Davis-2?ch=10&share=288215f4&srid=Jqvc)

彼は以下の数式を導き出しました。
$$\frac{x}{(1-x)^2}=\sum_{n=1}^{\infty} n \cdot x^n$$

これに`x=0.001`を代入すると、
$$\frac{x}{(1-x)^2}=.001002003004005006007008009010011012013014015...098099100...$$
のように小数点以下を３つ区切りにすると`001` `002` `003` ...`100`のように連番で出力されていきます。


## 証明

まず、`|x|<1`において、等比数列の和より
$$\frac{1}{1-x}=\sum_{n=1}^{\infty} x^n$$
両辺微分して、
$$\frac{1}{(1-x)^2}=\sum_{n=1}^{\infty} n \cdot x^{n-1}$$
`x`を両辺にかけて
$$\frac{x}{(1-x)^2}=\sum_{n=1}^{\infty} n \cdot x^n$$
これで証明は完了です。

## 前準備

この式をプログラムに書く前に少し変換を加えます。
まず、小数だとかなり高精度の計算が必要になるため整数の計算に変換します。

`x=1/b`として
$$\frac{1/b}{(1-1/b)^2}=\frac{b}{(b-1)^2}$$

10進数において`n`個区切りで、`1..m`まで出力したい場合、小数第`n*m`位までをみるので、そこまでを整数部にするために10の`n*(m+1)`乗します。
そして`b`は10の`n`乗となります。

つまり求める式は、

$$\frac{b*10^{n*(m+1)}}{(b-1)^2}$$

となります。

## 実装

C++で実装していきますが、桁数が`long long`などでは到底足りないので、多倍長演算ライブラリ[GMP](https://na-inet.jp/na/gmp_ja/)を使っていきます。

コードは以下のようになります。

```cpp
#include <gmpxx.h>
#include <iostream>
#include <regex>
#include <string>

using namespace std;

int main() {
    const unsigned int base = 10;
    const unsigned int n = 3;
    const unsigned int max = 100;

    mpz_class b;
    mpz_ui_pow_ui(b.get_mpz_t(), base, n);

    mpz_class res = 0;
    mpz_pow_ui(res.get_mpz_t(), b.get_mpz_t(), max + 1);
    res /= (b - 1) * (b - 1);

    regex re(".{" + to_string(n) + "}");

    cout << regex_replace(string(n - 1, '0') + res.get_str(base), re, "$&\n")
         << endl;
}
```

実行結果

```
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
```

一気に計算することはできないため、少しづつ分けて計算しています。`mpz_class`はgmpが提供する多倍長の整数を扱います。mpz_ui_pow_uiで累乗の計算を行います。

そして計算した結果を文字列に変換、正規表現で`n`個に分けて、表示させています。

## 効率化

さてここまでで1-100まではできたわけですが、ここまできたらもっと上まで表示したくなります。
そのためにまず、これらを2進数の演算で表現します。
シフト演算子を使っていきます。
具体的には、`mpz_ui_pow_ui(b.get_mpz_t(), base, n)`を`b<<=n`のようにします。

```cpp
#include <gmpxx.h>
#include <iostream>
#include <regex>
#include <string>

using namespace std;

int main() {
    const unsigned int base = 2;
    const unsigned long n = 31, max = 1 << 30;

    // res = ((b << (n * max)) / (((b - 2) << n) | 1));

    mpz_class b = 1;
    b <<= n;
    mpz_class res = b;
    res <<= n * max;
    res /= ((b - 2) << n) | 1;
    regex re("[01]{" + to_string(n) + "}");

    cout << regex_replace(string(n - 1, '0') + res.get_str(base), re, "$&\n")
         << endl;
}
```

このようにすると、計算部のみだと3-4s程度になります。
Windows10 で ssh-agent のサービスを登録する

# 状態

`scoop` や [Windowsのオプション機能](https://docs.microsoft.com/ja-jp/windows-server/administration/openssh/openssh_install_firstuse)でOpenSSHがインストールしてある状態で、

```powershell
gcm ssh-agent
```

はちゃんとパスが返ってくるのに

```powershell
get-service ssh-agent
```

は見つからない状態

# サービスの登録

管理者としてPowerShellを起動
以下コマンドを実行 
ssh-agent.exe のパスは `gcm ssh-agent -All | select -Property Source` で出力された内、好きなものを入力 

```powershell
New-Service -Name ssh-agent -BinaryPathName C:\Windows\System32\OpenSSH\ssh-agent.exe
```

# ssh-agent に鍵を登録する

```powershell
Start-Service ssh-agent
Get-Service ssh-agent
# Status が Running であることを確認する
ssh-add C:\Users\MYUSERNAME\.ssh\id_ed25519
```

# ssh-agent を自動起動する

```powershell
Set-Service -Name ssh-agent -StartupType AutomaticDelayedStart
```

# おまけ

ServiceまわりのPowerShellコマンドレットは以下で確認出来る

```powershell
❯ gcm -Noun service

CommandType     Name                                               Version    Source
-----------     ----                                               -------    ------
Cmdlet          Get-Service                                        7.0.0.0    Microsoft.PowerShell.Management
Cmdlet          New-Service                                        7.0.0.0    Microsoft.PowerShell.Management
Cmdlet          Remove-Service                                     7.0.0.0    Microsoft.PowerShell.Management
Cmdlet          Restart-Service                                    7.0.0.0    Microsoft.PowerShell.Management
Cmdlet          Resume-Service                                     7.0.0.0    Microsoft.PowerShell.Management
Cmdlet          Set-Service                                        7.0.0.0    Microsoft.PowerShell.Management
Cmdlet          Start-Service                                      7.0.0.0    Microsoft.PowerShell.Management
Cmdlet          Stop-Service                                       7.0.0.0    Microsoft.PowerShell.Management
Cmdlet          Suspend-Service                                    7.0.0.0    Microsoft.PowerShell.Management
```
Gmailで他のSMTPサーバー経由でメールの配信エラーになる問題

ここ最近なって、Gmailで他のメールサーバー経由でのメール送信がエラーになる問題が発生しているようです。

## 現象

メールを送信した後にこのようなエラーが返ってきます。

>  メールの配信エラー
> [名前] の機能を使用して、別のアドレスまたは別のエイリアスからこのメールを送信しようとしています。[名前] のアカウントの設定に誤りがあるか、設定が最新の状態ではありません。設定を確認して、もう一度送信してみてください。 

<img width="75%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8961/8257d87b-d2e0-5c3f-9cc9-69b0412be4fe.png">

SMTPの設定に問題があるのかな、と思い改めて入力してもこのエラー。

<img width="75%" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8961/a7ad6e6f-dfa6-a5d5-5b05-66251680915b.png">

エラーメッセージは
> TLS Negotiation failed, the certificate doesn't match the host., code: 0

とあるので、接続先のドメイン名と証明書のドメイン名が異なっている模様。


原因はおそらくGmailのセキュリティー強化。

[G Suite アップデート ブログ: デフォルトの TLS およびその他の新機能を使って Gmail のメール セキュリティを強化する](https://gsuiteupdates-ja.googleblog.com/2020/04/tls-gmail.html)

## 原因特定・対処

では早速SMTPサーバーで使用されている証明書のドメイン名を確認しましょう。このコマンドでご確認できます（Mac、Amazon Linuxで確認）。

```bash
openssl s_client -connect SMTPサーバーのドメイン名:587 -starttls smtp
```

コマンドを実行したらコマンド待ちの状態になるので **quit** で抜けます。

<img width="504" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8961/2133c00d-095d-651e-d8df-5e7747e30867.png">

コマンドを実行するといろいろ出力されますが、コマンド実行直後の表示を確認します。
**SMTPサーバーのドメイン名** と **証明書のドメイン名** が異なっていればそれが原因です。

GmailのSMTPサーバーで入力するドメインを **証明書のドメイン名** に変更することで解決するはずです。

### 対処不可能な場合

<img width="611" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8961/4879f2e5-e90c-1f9f-c530-d6e2a9bd4c73.png">

上記画像のように、結果に ```verify error:num=18:self signed certificate``` と出た場合は、書き換えても改善しません。 
メールサーバーを運営しているレンタルサーバー、プロバイダなどに問い合わせるか、サービスの乗り換えを検討しましょう。
自己代入演算子

 
##自己代入演算子
その名の通り自分自身に代入するということです。自己代入演算子は、通常の演算子を用いた書き方に直すことができます。




⬇︎通常の代入演算子

```sample.rb
number = number + 1
```


この式を自己代入演算子+=を使い書き直します。**上下の記述は同じ意味になります。**

⬇︎自己代入演算子

```sample.rb
number = number += 1
```
自己代入演算子を使った式 number += 1 は 変数numberに1を足した値をnumberに代入するという処理になります。


他にも代表的な自己代入演算子は以下のようなものがあります。



|自己代入演算子 |例 |  処理 |
|:-:|:-:|:-:|
|+=| number += 1 |numberに1足した値を number自身に代入|
|-=| number -= 3 |numberから3引いた値を number自身に代入|
|*=| number *= 5 |numberに5かけた値を number自身に代入|
|/=| number /= 7 |numberを7で割った値を number自身に代入|
public static final Stringとして宣言された文字列定数が埋め込まれる

# 事象

文字列定数(`public static final String`)ばかりが定義されたクラス`Const.java`と、その定数を利用する`Main.java`があるとします。

```java:Const.java
public class Const {
    public static final String VALUE = "BEFORE";
}
```

```java:Main.java
public class Main {
    public static void main(String[] args) {
        System.out.println(Const.VALUE);
    }
}
```

このふたつのjavaファイルをコンパイルし、実行すると、文字列定数`Const.VALUE`の値`BEFORE`が出力されます。

```
C:\qiita> javac Const.java Main.java

C:\qiita> java Main
```

ここで、文字列定数`Const.VALUE`の値が変更になったとします。

```java:Const.java
public class Const {
    public static final String VALUE = "AFTER";
}
```

`Const.java`を編集後、`Const.java`だけを再コンパイルし、ふたたび`Main`を実行したところ、画面には`Const.VALUE`の現在の値である`AFTER`ではなく、`BEFORE`が表示されました。

```
C:\qiita> del Const.class

C:\qiita> javac Const.java

C:\qiita> java Main
BEFORE
```

# 調査

`javap`コマンドで`Main.class`を逆アセンブルすると、`Main.class`には`BEFORE`という値が埋め込まれていることがわかります。

```
C:\qiita> javap -c Main.class
Compiled from "Main.java"
public class Main {
  public Main();
    Code:
       0: aload_0
       1: invokespecial #1                  // Method java/lang/Object."<init>":()V
       4: return

  public static void main(java.lang.String[]);
    Code:
       0: getstatic     #2                  // Field java/lang/System.out:Ljava/io/PrintStream;
       3: ldc           #4                  // String BEFORE
       5: invokevirtual #5                  // Method java/io/PrintStream.println:(Ljava/lang/String;)V
       8: return
}
```

コンパイラはコンパイル時に`Main.java`内の`Const.VALUE`を`BEFORE`という値に置き換えています。`Main.class`は`Const.class`をすでに参照していないため、`Const.VALUE`の値が変わっても、その変更が`Main.class`にまで伝播しませんでした。

ちなみに`Main.class`は`Const.class`を参照していないため、`Const.class`を削除してしまっても、`Main.class`は正常に動作します。

```
C:\qiita> del Const.class

C:\qiita> java Main
BEFORE
```

# 原因

なぜ文字列定数が埋め込まれてしまったのかというと、これはJavaの仕様に起因します。["Java Language Specs - 13.1. The Form of a Binary"](https://docs.oracle.com/javase/specs/jls/se8/html/jls-13.html#jls-13.1) には次の通り記述されています。

> A reference to a field that is a constant variable (§4.12.4) must be resolved at compile time to the value V denoted by the constant variable's initializer.
> If such a field is static, then no reference to the field should be present in the code in a binary file, including the class or interface which declared the field. Such a field must always appear to have been initialized (§12.4.2); the default initial value for the field (if different than V) must never be observed.


["Java Language Specs - 13.1. The Form of a Binary"](https://docs.oracle.com/javase/specs/jls/se8/html/jls-4.html#jls-4.12.4)には以下のとおり記述されており、文字列定数(`public static final String`)も埋め込みの対象であることがわかります。

> A constant variable is a final variable of primitive type or type String that is initialized with a constant expression (§15.28).

# 対策

文字列定数だけでなく、`public static final`として宣言された定数の値が変更になった場合、関連するソースコードはすべてコンパイルしなおすべきです。

また上記のような問題をはらんでいることからも`public static final String`の乱用は危険です。定数を表現したい場合は`enum`を利用することも検討しましょう。
在宅ワークの課題解消法

<h2>在宅ワークを2週間ほど行って気づいたことの共有</h2>
コロナウイルスの影響でチーム全体が2週間ほど前から在宅ワークになったのですが、在宅ワークは在宅ワークでなかなかやりづらかったり、しんどいことも多々。
チームで話し合って共有した、在宅勤務のおすすめのやり方などまとめてみます。

<h2>在宅勤務の課題</h2>
チームで振り返りを行った際にでた課題は以下のものが上がりました。
・コミュニケーションロス
・集中できない
・ずっと家にいることによる心身の影響

<h2>コミュニケーションロス問題</h2>
在宅ワークでは対面でなくなるため、コミュニケーションが圧倒的に少なくなり、
認識齟齬や互いの進捗状況が把握できないなど問題が発生します。
<h4>チームであがった解消法</h4>
・1日1回チームミーティングを行い全員が発言する機会を作る。
・会議や情報発信に対して反応が見えないため、リアクションを必ず行う。
・個人間で井戸端会議を行う。
・認識齟齬を防ぐべくこまめに電話を行う。
・とりあえず、電話をつないでおいて作業して、いつでも話せるようにしておく。
<br>
などなど、とりあえず人と話すことで進捗の状況や、タスクの認識を拾うことができます。井戸端会議など雑談を行うことにより、質問しやすい環境を作っていくことが大事ですね！

<h2>集中できない問題</h2>
いつもと違う環境のため作業に集中できない問題が発生します。

<h4>あがった解消法</h4>
・職場で行っていた習慣を自宅でも行う。(コーヒー飲むとか)
・着替える
・立って作業する
・昼休みとかシャワーを浴びる
・レビュー依頼などを設定し、スケジュールを細かく区切る。

などなど、人それぞれ集中できるスイッチがあると思うので、色々試してみて自分に合った方法を見つけましょうー

<h2>ずっと家にいることによる心身の影響問題</h2>
ずっと家で座って作業しているので「さみしい」「気分が沈む」「動かな過ぎて体がしんどい」などの問題が発生しています。
<h4>チームであがった解消法</h4>
・井戸端会議
・自宅で筋トレ
・夜に散歩・運動(感染しないように気を付けて)
・たまにベランダで作業する
・見たことないアニメとか気分リフレッシュ
<br>
などなど、ずっと家で一人という異常な事態なので時間が経つにつれてストレスが確実に溜まっていくはずです。解消法を見つけ出し、メンタルブレイクしないように対処しましょう！

<h2>まとめ</h2>
最初は新鮮で快適だなと思っていた在宅勤務も、時間が経つにつれて辛さ・難しさを感じます。なんとしてでも自分に合ったストレスを溜め込まない方法を確立してこの事態を乗り越えていきましょう！
サイトのセキュリティ上の脅威

# 前提
個人おさらい用にまとめたもの

# クロスサイトスクリプティング (XSS)  
> XSS は、攻撃者が Web サイトを通じて他のユーザのブラウザにクライアントサイドのスクリプトを挿入することを可能にする一連の攻撃を表すために使用される用語

# SQL インジェクション
> SQL インジェクションの脆弱性により、悪意のあるユーザはデータベース上で任意の SQL コードを実行することができ、ユーザの許可に関係なくデータへのアクセス、変更、削除ができる。

> SQL インジェクションの種類には、エラーベースの SQL インジェクション、ブールエラーに基づく SQL インジェクション、および時間ベースの SQL インジェクションがある。

## 脆弱性が存在するパターンの例

```vim
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
```
> HTML フォームから提供された特定の名前（ユーザー） を持つすべてのユーザを一覧表示することを目的としています。

> ユーザが実名を指定した場合、そのステートメントは意図したとおりに機能します。ただし、悪意のあるユーザは userName に太字のテキストを指定するだけで、この SQL ステートメントの動作を次の例の新しいステートメントに完全に変更する可能性があります。

```vim
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
```

> 変更された文は、users テーブルを削除し、userinfo テーブルからすべてのデータを選択する (すべてのユーザの情報を表示する) 有効な SQL 文を作成します。これは、挿入されたテキストの最初の部分 (a';) が元の文を完成させるために機能する。

### 回避方法
> SQL クエリに渡されるユーザデータがクエリの性質を変更できないようにする必要があります。これを行う1つの方法は、
SQL で特別な意味を持つユーザ入力内のすべての文字をエスケープすることです。

```vim
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
```

# クロスサイトリクエストフォージェリ (CSRF)
> CSRF 攻撃は、悪意のあるユーザが他のユーザの資格情報を使用して、そのユーザの知らないうちに同意なしでアクションが実行可能

## 例
> 特定のサイトでログインユーザがアカウント名と金額を含むHTTP POST リクエストを使用して特定のアカウントに送金できることを知っている悪意のあるユーザ


1. 顧客が攻撃対象のサイトにアクセスしてログインします。

2. 認証を行いOKであればセッションIDが顧客に発行されます。

3. 顧客が（気づかずに）悪意あるサイトにアクセスします。

4. 悪意あるサイトからレスポンスが返されます。

5. 仕込まれたJavaScriptがブラウザ上で実行されます。
 
6. 商品の注文確定処理が行われてしまいます。



# 参考
[https://developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Website_security](
https://developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Website_security)
【解決法】Chart.jsで作ったグラフが潰れてしまう。

#詰まったこと
Chart.jsで円グラフを作成すると、円グラフが潰れてしまう。
下の画像のようになってしまったわけです。

![スクリーンショット 2020-04-12 18.56.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/b7b0f302-6bc6-58de-8e4c-0a606e422b03.png)


#解決法
##optionsの設定を見直す
```javascript
    options: {
        maintainAspectRatio: false,
    }
```
maintainAspectRatioを追加することで、「サイズ変更の際に、元のキャンバスのアスペクト比(width / height)を維持します」、とのことです。

##canvasタグ内の設定を見直す
chart.jsでは、これ↓も

```html
    <canvas height="40vh" width="80vw">
```

これ↓も、無効な値となります。

```html
    <canvas style="height:40vh; width:80vw">
```

正しくは、下↓のように、親要素を追記して、そこにstyle属性を記載しなければなりません。

```html
    <div class="chart-container" style="position: relative; height:40vh; width:80vw">
        <canvas id="chart"></canvas>
    </div>
```

#結果
![スクリーンショット 2020-04-12 20.13.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/01ecc1ce-bcea-9bdb-6a35-f41450fe5742.png)


#解決はできた！今度はレスポンシブにしたい！
[ドットインストール：レスポンシブウェブデザイン](https://dotinstall.com/lessons/basic_responsivewebdesign_v3)を参考にレスポンシブにグラフの大きさを変えてみました。

```html
    <div class="chart-container">
        <canvas id="ageChart"></canvas>
    </div>
```

```javascript
    // 上であげた画像のように、0~90歳までの比率をグラフにしております。
      var ageChartTemp = new Chart(ageChart, {
        type: 'pie',
        data: {
          labels: array_age,
          datasets: [{
            backgroundColor: [
              "#BB5179",
              "#FAFF67",
              "#008080",
              "#00FF00",
              "#FF00FF",
              "#808000",
              "#800080",
              "#800000",
              "#3399FF",
              "#336666"
            ],
            data: array_age_total
          }]
        },
        options: {
          maintainAspectRatio: false,
        }
      });
```

怒涛のメディアクエリ設定！！！

```css
@media(max-width: 414px){
    .chart-container{
        position: relative;
        width:80vw;
        height:65vh;
    }
}
```

#まとめ
円グラフがきれいに表示できたので、気分が上がりました。

#参考文献
[Chart.js Document](https://www.chartjs.org/docs/latest/general/responsive.html)
ワンランク上のJavaScriptエンジニアになった気がするTip

# はじめに

JavaScript初心者の僕が脱初心者を目指して身に付けた知見を随時更新する記事第一弾です。

JavaScript初心者の同志は一緒に勉強しましょう。

# オブジェクトを展開して変数に定義する方法

JavaScript初学者の皆さん、下記のような記述を目にしたことはありますか？

```javascript
const { name, age } = person
```

僕も、この{}なんやねん！

ググろうにも、なんてググったらいいかわからない。。

って思って避けてた矢先、先輩エンジニアの方にコードレビューで指摘されたので、

いい機会なので学び直してみました。

これってつまりこういうことなんです。

```javascript
const person = {
  name: 'hogehoge',
  age: 22
}
```

上記のようなオブジェクトがあったとして、

nameの値を持った変数とageの値を持った変数をそれぞれ定義したいとします。

そんな時、我々初学者は、下記のようにコードを書くと思います。

```javascript
const name = person.name
const age = person.age
```

でも違うんです。

ワンランク上のJavaScriptエンジニアになるためにはこう書きましょう。

```javascript
const { name, person } = person
```

。。いかがでしょう！このスマートな記述！

なんだか自分ができるエンジニアになったような気がしてきませんか？

これができると何がすごいの？って感じかもしれませんが、いろんなところで真価を発揮します。

例えば、Reactで親コンポーネントから子コンポーネントにpropsで値を渡す時、

親コンポーネントで以下のようにnameをいう値を渡したとします。

```jsx
const app  = () => {
  return {
    <div>
      <Person name="hogehoge" />
    </div>
  }
}
```

親コンポーネントから受け取った値を、子コンポーネントで描画します。

```jsx
const Person = (props) => {
  return {
    <div>
      <p>私の名前は、{ props.name }です。</p>
    </div>
  }
}
```

子コンポーネントで受け取ったpropsは、オブジェクトで値が渡ってきます。

今回のコードでのpropsの実態は、下記の通りです。

```javascript
const props = {
  name: "hogehoge"
}
```

つまり、今回紹介したワンランク上のJavaScriptエンジニアになるためのTipsを使うことで子コンポーネントもすっきりと書くことができます。

```jsx
const Person = ({ name }) => {
  return {
    <div>
      <p>私の名前は、{ name }です。</p>
    </div>
  }
}
```

どうでしょう。

これだけでできるエンジニアっぽくないですか。。？（気がするだけ）

# おわりに

色々できるJavaScript最高。
英語リソース表示


日本語OSで、画面の英語リソースを確認したいときに、知っていると便利。
英語OSを用意することなく、画面の英語リソースを確認できる。

# CurrentUICulture
リソースに適用されるカルチャー。
カルチャーを変更することで、UIに表示されるテキストやメッセージ文字列を変更することができる。
```csharp
Thread.CurrentThread.CurrentUICulture = CultureInfo.GetCultureInfo("en-US");
```
# CurrentCulture
書式などに適用されるカルチャー。
カルチャーを変更することで、数値や日時の書式などを変更することができる。
```csharp
Thread.CurrentThread.CurrentCulture = CultureInfo.GetCultureInfo("en-US");
```
# 例
## 日本語
```csharp
Thread.CurrentThread.CurrentUICulture = CultureInfo.GetCultureInfo("ja-JP");
Thread.CurrentThread.CurrentCulture = CultureInfo.GetCultureInfo("ja-JP");
```
![ja.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64683/16541035-1faa-a297-8efe-7c428de12b4c.png)
## 英語
```csharp
Thread.CurrentThread.CurrentUICulture = CultureInfo.GetCultureInfo("en-US");
Thread.CurrentThread.CurrentCulture = CultureInfo.GetCultureInfo("en-US");
```
![en.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64683/ca0e7bb6-59f4-ab5b-e2e7-78c51b2d41e5.png)
IJuliaのインストールで困ったとき

#はじめに
新しいpc環境において、juliaを入れなおしているときに、IJuliaのインストールのところで、引っかかったので一つの解決法を記しておく。
jupyter notebookにjuliaを入れたいときに下の記事の内容を行う

The Julia Language始めてみた
https://qiita.com/jin237/items/d7cefa669dc952bfa560

#解決法
julia事態をインストールしたときに、

C:\Users\[username]\.julia
というディレクトリができるが、このファイルの中身が何かしらの邪魔をしているらしい。
.julia
を、まるまる消してみる。
この操作の実行後に、再度add IJuliaを行うとスムーズにいく。

#さいごに
ものすごく短い記事ではあるが、エラーはみんなが通る道なので一応記事にしておく。ほかの記事では、エラー原因がわかるように実験などしながらやってみたい。
VS Codeで選択範囲をHTMLタグで囲むショートカットキーを設定する

以下のようなことができるように設定する方法を書いていきます。
![vscode_wrapper.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454054/79ead22d-5d43-7e34-b40c-bd1669a72601.gif)
（この記事では VS Code Version: 1.44 を使っています。）

#ショートカットキーを設定する
まず `File > Preferences > Keyboard Shortcuts`を開きます。
![KeyboardShortcuts.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454054/9a9fe949-6755-418e-a245-d9c57601d979.png)
検索バーに emmet wrap と入力します。
![search emmet2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454054/3ba4d6c4-fe9e-75e2-0af3-8fe6b54a8615.png)
表示された項目をダブルクリックし、それぞれに割り当てたいショートカットキーを設定します。
1番目に表示されている`Emmet: Wrap Individual Lines with Abbreviation`は、選択した範囲の各行をタグで囲むコマンドです。
2番目に表示されている`Emmet: Wrap with Abbreviation`は、選択した範囲全体を囲むコマンドです。
それぞれのコマンドの詳細は[Emmetのドキュメント](https://docs.emmet.io/actions/wrap-with-abbreviation/)で読むことができます。

#ショートカットキーを使う

##選択範囲全体をタグで囲む
まずは使用頻度がより多いと思われる`Emmet: Wrap with Abbreviation`を使ってみます。
（冒頭のGIFとは逆の順番で説明します。）
タグで囲みたい範囲を選択して、`Emmet: Wrap with Abbreviation`に割り当てたショートカットキーを押すと、上に入力欄が表示されます。
![short1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454054/c0bed80b-cbad-1c11-d7f2-b8ec324ea824.png)
ここにタグ名を入力して`Enter`を押せば完了です。
![short2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454054/a64ac5fc-e636-f626-321c-9d71aaf68ebe.png)

##選択範囲の各行をタグで囲む
次に`Emmet: Wrap Individual Lines with Abbreviation`を使ってみます。
各行をタグで囲みたい範囲を選択して`Emmet: Wrap Individual Lines with Abbreviation`に割り当てたショートカットキーを押すと、上に入力欄が表示されます。
![short3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454054/e205d170-8d6b-ea17-318f-842b1387b097.png)
ここにタグ名を入力し、`*`を加えて`Enter`を押せば完了です。
![short4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454054/8e52934a-6f46-750a-36fe-1deac659913b.png)

#備考
この記事は[クリエイティブ・コモンズ 表示 4.0 国際 ライセンス](https://creativecommons.org/licenses/by/4.0/deed.ja)の下に提供されています。
<a rel="license" href="https://creativecommons.org/licenses/by/4.0/deed.ja"><img alt="クリエイティブ・コモンズ・ライセンス" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>
ancestryにてカテゴリー機能実装後の表示方法について

# はじめに
某フリーマーケットサイトのクローンを開発中に
ancestryで作成したカテゴリーをデータベースに保存する事はできたのですが、
いざ詳細画面に表示しよう！

これが意外に難しい。。。。

色々調べたのですが、ドンピシャの記事がなかったので忘備録として載せておきます。


## やりたいこと
出品時に保存したカテゴリーの値を商品詳細画面にて表示させたい。
<img width="1440" alt="スクリーンショット 2020-04-11 21.40.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617337/6e4e8f86-62cd-8683-281d-e47822aef103.png">
####データベース
<img width="1323" alt="スクリーンショット 2020-04-12 18.46.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617337/ceef42b9-1ce1-c920-a7ea-a9dd497342e9.png">


## 試したコード
最初に試したコードがこちら

```ruby:products_controller.rb
def show
    @product = Product.find(params[:id])
end
```
```ruby:show.html.haml
= @product.category_id.name
```

nameが分からないとエラーが出てしまいました。
<img width="1353" alt="スクリーンショット 2020-04-12 18.48.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617337/8ab19b27-34e7-186b-32dd-d4d2424b0c6d.png">

やはり一筋縄ではいかなかったようです。。。
そもそも、ancestryを深く理解できていなかったので、本当に保存できているのか不安でした(笑)

とりあえず全ての値を取り出せるか試してみようと思いコントローラーに@parentsを追加。

```ruby:products_controller.rb
def show
    @product = Product.find(params[:id])
    @parents = Category.all.order("id ASC").limit(607) #limitの数値はテーブルに入っているIDの最大値です。
end
```
```ruby:show.html.haml
- @parents.each do |parent| #eachで全てを取り出す。
  = parent.name
```
<img width="1440" alt="スクリーンショット 2020-04-12 19.08.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617337/f02a86c6-a417-ee6e-944a-8a579f20a234.png">

とりあえず全てを取り出すことに成功！！
ここから、出品された商品のcategory_id(今回は589)と結びつける必要があります。
そこで、ifを使い、

```ruby:show.html.haml
- @parents.each do |parent| #eachで全てを取り出す。
  - if @product.category_id == parent.id #取り出したIDと商品のIDが同じ物を表示
    = parent.name
```
<img width="1440" alt="スクリーンショット 2020-04-12 19.17.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617337/eb12f143-359c-76f9-7126-e6251c8e4873.png">
孫カテゴリーの名前を取り出すことに成功！
ここまできたらもう一息！！！

```ruby:show.html.haml
- @parents.each do |parent|
  - if @product.category_id == parent.id
    = link_to "#" do
      = parent.parent.parent.name #親カテゴリー
      %br
    = link_to "#" do
      = parent.parent.name #子カテゴリー
      %br
    = link_to "#" do
      = parent.name #孫カテゴリー
```
<img width="1422" alt="スクリーンショット 2020-04-12 19.25.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617337/8dff19f9-ca59-bac3-34a1-20c8bf84c0e0.png">
無事に３つのカテゴリーを表示することに成功しました！！

コード自体は単純で孫カテゴリーに**.parent**をつけることで、ひとつ上の階層にあるカテゴリー名(子カテゴリー)を取り出し、更に**.parent.parent**とすることで親カテゴリーを取り出すという仕組みです。

#まとめ
終わってみると案外シンプル。
しかし、私はこれを表示するのに２時間近く奮闘していました(笑)

もっと簡単な方法もたくさんあるとは思いますが、
自分はこれで実装ができたので、少しでも誰かの手助けになれば嬉しいです。
MySQLのインストール・ユーザー作成


#MySQLをインストール
`sudo yum -y install mysql`

##データベースの作成(utf8)
`CREATE DATABASE データベース名(任意) DEFAULT CHARACTER SET utf8;`

##データベースを表示する
`SHOW DATABASES;`

##データベースにWordPress管理者用のユーザーとパスワードを登録する
`CREATE USER 'ユーザー名'@'%' IDENTIFIED BY 'パスワード';`

##作成したユーザーにアクセスを付与
`GRANT ALL ON aqua_db.* TO 'ユーザー名'@'%';`

##権限の反映
`FLUSH PRIVILEGES;`

#ユーザーが登録されたかの確認
`SELECT user , host FROM mysql.user;`
Docker Toolbox 環境で npm install が reason: getaddrinfo EAI_AGAIN registry.npmjs.org により失敗する。

# 事象

Docker Toolbox 環境において、`npm install`が以下の理由により失敗する場合があります。

```
npm ERR! code EAI_AGAIN
npm ERR! errno EAI_AGAIN
npm ERR! request to https://registry.npmjs.org/vue-router failed, reason: getaddrinfo EAI_AGAIN registry.npmjs.org   
```

# 原因

__わたしの環境だと、原因は`registry.npmjs.org`の名前解決に失敗していることでした。__ とりたてて設定などをしていない場合、docker machine はホスト側(すなわちWindows)に名前解決を依頼します。そこで、ホスト側で`nslookup`を行ったところ、自分のマシンが利用しているDNSサーバには`registry.npmjs.org`が登録されていませんでした。

```
C:\>nslookup registry.npmjs.org
サーバー:  ntt.setup
Address:  2408:211:605:600:5a52:8aff:fe66:f4a5

*** ntt.setup が registry.npmjs.org を見つけられません: Query refused
```

# 対策

対策方法はいろいろあると思いますが、__「Dockerが利用するDNSサーバを`registry.npmjs.org`の名前解決ができるGoogle Public DNS (8.8.8.8)にする」__ことで問題が解消しました。

1. `%DOCKER_CERT_PATH%\config.json` の `HostOptions > EngineOptions > Dns`を編集し、DNSサーバとして`8.8.8.8`を登録する。
2. Docker Machineを再起動する (`docker-machine restart`)

```
"DriverName": "virtualbox",
"HostOptions": {
    "Driver": "",
    "Memory": 0,
    "Disk": 0,
    "EngineOptions": {
        "ArbitraryFlags": [],
        "Dns": [
            "8.8.8.8"
        ],
```

# 環境情報

- Microsoft Windows [Version 10.0.18362.720]
- docker-machine.exe version 0.16.1, build cce350d7

Dockerのバージョンは次の通り:

```
Client:
 API version:       1.40
 Go version:        go1.12.7
 Git commit:        74b1e89e8a
 Built:             Wed Jul 31 15:18:18 2019
 OS/Arch:           windows/amd64
 Experimental:      false

Server: Docker Engine - Community
  Version:          19.03.5
  API version:      1.40 (minimum version 1.12)
  Go version:       go1.12.12
  Git commit:       633a0ea838
  Built:            Wed Nov 13 07:28:45 2019
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          v1.2.10
 runc:
  Version:          1.0.0-rc8+dev
  GitCommit:        3e425f80a8c931f88e6d94a8c831b9d5aa481657
 docker-init:
  Version:          0.18.0
  GitCommit:        fec3683
```
[Video.js] JavaScriptで動画を再生する

# はじめに

JavaScriptで動画を再生するライブラリを紹介します。

Video.js
https://videojs.com/

今回使用したJavaScriptライブラリのバージョンは下記の通りです。

```Markdown:JavaScriptライブラリ
Video.js: 7.7.5
```

# Video.jsとは

Video.js とは JavaScriptのライブラリの一つ。JavaScriptでは、`video` タグを使用して動画を再生する機能があります。動画の再生や停止、シークバーの操作、フルスクリーン切り替えなどをコントロールするUIは、1から実装する必要があります。Video.js では、これらのUIを提供するライブラリです。

# ライブラリの読み込み

`video.js` を参照します。

```HTML:
<script src="../lib/video.js"></script>
```

# 基本的な使い方

`videojs` 関数を宣言します。
第1引数にIDを指定します。
第2引数にoptionを指定します。設定例は下記の通りです。

```JavaScript
let video = videojs('video1', {
    width: 640, // 幅
    height: 360, // 高さ
    autoplay: false, // 自動再生
    loop: false, // ループ再生
    controls: true, // コントロール制御表示
    preload: 'auto', // 読み込み制御
    poster: '../video/thumb.png', // サムネイル表示
});
```

`src` 関数でリソースを指定します。

```JavaScript
video.src({
    type: 'video/mp4', // mimetype
    src: '../video/Bullfinch.mp4' // ビデオファイルパス 
});
```

`on` 関数でイベントリスナーを登録します。配列で複数登録することが可能です。

```JavaScript
video.on(['loadstart', 'loadedmetadata', 'loadeddata', 'play', 'playing', 'pause', 'suspend', 'seeking', 'seeked', 'waiting', 'canplay', 'canplaythrough', 'ratechange', 'ended', 'emptied', 'error', 'abort'], (e) => {
    console.log(`EVENT: ${e.type}`);
});
```

# さいごに

[デモはこちら](https://yunbow.github.io/sample-video-js/01/)
[ソースファイルはこちら](https://github.com/yunbow/sample-video-js/tree/master/01)

以上です。
The "width" attribute must be missing or "auto"｜amp-imgでのエラー原因

# 結論
layouut属性をresponsiveにしたら治りました。

```error.html

<amp-img src="image.png" layout="fixed-height" width="100" height="100">

```

```ok.html

<amp-img src="image.png" layout="responsive" width="100" height="100">

```

# 経緯
当初からwidthは指定されていたので試しにlayouut属性を変えてみたら解消されました。

# 教訓
fixed-heightの時はwidthをautoに指定しないとエラーになります。
よく考えれば当たり前ですが（汗

# 参考ページ
非常にわかりやすくアニメーションまで作成してくれていました。
ampのマニュアルサイトの進化はすごいと思います。
[Demonstrating AMP layouts](https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/?format=websites#fixed-height)
Let's EncryptのDNS-01チャレンジでのSSL証明書更新（手動）

# 概要
2020/4/12現在、Let's Encryptでワイルドカード証明書を発行するためには、よくネットで見られるHTTP-01チャレンジでなくDNS-01チャレンジを用いて証明書を発行する必要がある。

本稿では、n番煎じではあるが、DNS-01での更新方法を記す。

# 環境
- ドメインとDNSサーバはfreenomを使用
- 証明書が対象とするドメインは、\*.example.comとexample.com

# 手順
まず、certbotの実行と、そのチャレンジのレコードへの追加を行う。

```bash
sudo certbot certonly --manual \
--server https://acme-v02.api.letsencrypt.org/directory \
--preferred-challenges dns \
-d *.example.com -d example.com \
-m webmaster@example.com \
--agree-tos \
--manual-public-ip-logging-ok
```

上記コマンドを実行すると、下記のメッセージが表示される。

```bash
Please deploy a DNS TXT record under the name
_acme-challenge.example.com with the following value:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx（ランダムな文字列）
Before continuing, verify the record is deployed.
```

ここで、DNSレコードの編集画面に行き、上記のランダムな文字列をレコードに追加する。

| Name | Type | TTL | Target |
| --- | --- | --- | --- |
| _acme-challenge | TXT | 3600 | xxxxx（上記のランダムな文字列） |

のように登録する。
反映まで時間がかかるので、お茶を入れるなりして5分ほど待つ。

しばらく経過したら、digコマンドでDNSレコードを確認する。

```bash
dig @80.80.80.80 -t TXT _acme-challenge.example.com
```
@の後ろのIPアドレスは、使っているDNSサーバのアドレスにする。
コマンドの結果のANSWER SECTIONに先ほど登録したレコードが表示されていれば、`certbot`でEnterを押下し、次へ進む。
Enterを押すと、再度DNSレコードに文字列を登録するよう指示されるので、再度同じように実行する。


最後に`Congratulations! Your certificate and chain have been saved at`が表示されれば、無事証明書の更新が完了となる。

# 自動化
DNSサーバでAPIが用意されていれば、この更新作業は自動化できそうである。
さくらインターネットでは、自動化の方法が紹介されていた（[参考](http://palloc.hateblo.jp/entry/2016/12/16/001037)）。
freenomでもAPIが公開されているので、自動化は実現できそうである。
k-means法でデータを分類

こんにちは、Mottyです。
今回は分類（クラスタリング）をPythonで行いました。

##分類とは
統計や機械学習においての分類とは、データを似た特徴のグループに分類することを指す。
事前に基準がない状態で行うので、「教師なし学習」の１つとなる。

#KMeans法
K平均法とはクラスタの平均を用いて与えられたクラスターの数（ｋ個）に分類するアルゴリズムである。各データが重心にどれくらい近いかでクラス分けをし、重心を逐次更新していくことで分類構造を最適化していく。

![ 2020-04-12 18.49.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302420/6dd3e946-7290-7316-6c80-9192a164316f.png)


#Pythonで実装
```KMeans.py
import numpy as np
import matplotlib.pyplot as plt
from sklearn.cluster import KMeans
from sklearn.datasets import make_blobs as mb


clf = KMeans(n_clusters = 3)
N = 100 #Number of sample

dataset = mb(centers = 3)
features = np.array(dataset[0])
pred = clf.fit_predict(features)

```

![ 2020-04-12 18.51.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302420/9fa4e785-a65f-89d0-0b72-2592f8234321.png)
綺麗に分類できた。


なおデータ自体が綺麗であること、Kの数が適切であること、アルゴリズムの選択が適切である事条件が揃っていない場合はこのように綺麗に分けられないケースが考えられる。
#異常値が存在する場合

```python
NOISE = [25,25]
features = np.append(features,NOISE).reshape(-1,2)
```

![ 2020-04-12 18.56.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302420/3130039a-4883-ebc1-f921-ed5f936634ed.png)

#クラスタ数が適切でない場合
```python
dataset = mb(centers = 4)
```
![ 2020-04-12 18.59.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302420/ef2b238d-26f5-d7e0-183d-c31906440925.png)

#分類アルゴリズムがそもそもKMeansに適していないケース

```makemoons.py
import numpy as np
import matplotlib.pyplot as plt
from sklearn.cluster import KMeans
from sklearn.datasets import make_blobs as mb

clf = KMeans(n_clusters = 2)

X1,y1 = make_moons(noise = 0.05, random_state=0)
pred1 = clf.fit_predict(X1)

for i in range(2):
    labels = X1[pred1 == i]
    plt.scatter(labels[:,0],labels[:,1])

plt.show()
```
![ 2020-04-12 19.03.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302420/55d04acf-1eaf-fea7-7778-4b5db7cb1c60.png)

#終わりに
分類アルゴリズムにも様々あり、今回はそのうち代表的なものの１つであるKMeans法について記述しました。
SVMやランラムフォレスト等の分類についても後々記述していきたいと思います。
Qiitaの使い方メモ

#Qiitaの使い方メモ

Qiitaを使うための手始めにQiitaの使い方をメモしてみる

#タイトル
タイトルは文字の先頭に「#（半角）」をつける

#コード
コードの文字の先頭行と最終行を「```（Shift+@）」で囲む

```
（コード）
```
こんな感じ↓
　```

　（コード）

　```
***

先頭行の```の後に「言語名（今回はcsharp）」を追加すると色でハイライトされる

```csharp
int num = 1;
Console.WriteLine("Helow World");
```


ファイル名を付ける場合はさらに「:{ファイル名}」をつける

```csharp:Program.cs
int num = 1;
Console.WriteLine("Helow World");
```

こんな感じ↓
　```csharp:Program.cs

　int num = 1;
　Console.WriteLine("Helow World");

　```
***
#画像
写真アイコンをクリックして画像を選択
または画像ファイルをドラッグアンドドロップ
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617902/413b61ad-2452-ae62-97f5-3df91334418e.png)

#おまけ
はてなマークをクリックするとMarkdownの書き方が表示されるのでそれを参考にすれば見出しのサイズや装飾等を細かく設定できる
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617902/22f4ebda-96ed-d976-9a2b-93cafc231348.png)
↓
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617902/0fe94986-db43-ba8a-be1a-d272580f7e2b.png)

***

Markdown記法 チートシート
　http://qiita.com/Qiita/items/c686397e4a0f4f11683d
Oracle 実行計画の取り方

#実行コマンド

```
EXPLAIN PLAN FOR
+ 実行計画を取りたいSQL;
```

```
SELECT PLAN_TABLE_OUTPUT FROM TABLE(DBMS_XPLAN.DISPLAY());
```
上記のコマンドを実行すると、直近で行われた実行計画の結果が出力される。

# SQL*Plusでの出力設定

- 横幅の設定
```set linesize 1000```

- 縦幅の設定
```set pagesize 1000```

- カラム幅の設定
```COLUMN {column_name} FORMAT a{桁数};```

- 自動的に実行計画を取得する設定
```set autotrace on explain```
```set autotrace off explain```

# 番外編

カラムのデフォルト値の確認

```
select DATA_DEFAULT from ALL_TAB_COLUMNS where TABLE_NAME = {table name} AND COLUMN_NAME = {column name} AND OWNER = {owner name};
```
試験投稿(Javaによるブロックチェーン向けSHA-256マイニング)

これは試験投稿です( ˶˙ᵕ˙˶ )
Javaを用いて、ブロックチェーンのSHA-256ハッシュ値のマイニングを実験中
![写真 2020-04-04 17 26 24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617906/5449014c-3d50-4fd3-792c-e68e1b9a20c5.jpeg)

- SHA-256によるハッシュ値計算
- ハッシュ値を求める入力データは、以下を文字列連結
 - データ本体
 - 任意の固定値(通常はタイムスタンプ)
 - ノンス(SHA-256のマイニングの計算値の目的の値を求めるのに必要な正解値)
- 100000回、ノンスを1加算しつつ、ハッシュ値を計算する。
 - ハッシュ値の先頭が「0000」ならば、それが目的の値となる(正解値)
 - 100000回経過しても見つからない場合は、そのハッシュ値をブロックチェーンに用いる

実験環境：Java(openJDK 12＋Eclipse)
大抵この難易度で、Windows 10(64bit)でCore i5の場合、1～3秒で計算できちゃう( ๑･∞･๑ )
Raspberry Piの場合だと30秒～数分

●ブロックチェーンを使う目的…

ブロックチェーンは仮想通貨(ビットコイン)のマイニングに用いられているが、データセンターのような大規模サーバーを使わずに、ラズパイなどの個人レベルのサーバーを複数接続して、分散したセキュアデータを改ざんされることなく安全に安定した格納を実現することが目的。民宿街や商店街で個人情報を共有する基幹システムを構築するときに、インターネットクラウドサービスを使わなくても、1店数万円の程度でも導入しやすいから、地元貢献のシステムレベルでの一つとして期待されている( ˘͈ ᵕ ˘͈ )♡

今後はJavaサーブレットを経由して、P2Pでのブロックチェーンを操作できないかを研究中…
Laravel 各種キャッシュクリアコマンド

## 基本的なキャッシュクリア

```
php artisan cache:clear
```

## configのキャッシュクリア

```
php artisan config:clear
```

## ルーティングのキャッシュクリア

```
php artisan route:clear
```

## viewのキャッシュクリアキャッシュクリア

```
php artisan view:clear
```

## 強力なキャッシュクリアコマンド

```
composer dump-autoload
```

## Configのキャッシュファイル削除

config キャッシュクリアコマンドで消えない場合は描きファイルを削除する

```
cd laravel_project/bootstrap/cache
rm -f config.php
```
[Python] 複数階層の自作モジュールの読み込み

# 前提
以下のような構造の時の `__init__.py` の書き方メモ。

----
root/
　├ `__init__.py`
　├ dir_a/
　│　　├ `__init__.py`
　│　　└ `test_a.py` (func_aが定義されている) 
　└ dir_b/
　　　　├ `__init__.py`
　　　　└ `test_b.py` (func_bが定義されている) 

----


`import root` をしたら、`root.func_a` で呼び出せるようにしたい。ということがあったので、これを実現します。

# root直下のinit
`root/__init__.py` については

```python:root/__init__.py
import os
import sys
sys.path.append(os.path.dirname(os.path.abspath(__file__)))

from root.dir_a import *
from root.dir_b import *
```

# dir_aのinit
`root/dir_a/__init__.py` については

```python:root/dir_a/__init__.py
from dir_a.test_a import *
```

# dir_bのinit
`root/dir_b/__init__.py` も `root/dir_a/__init__.py` と同様にして

```python:root/dir_b/__init__.py
from dir_b.test_b import *
```

# まとめ
やっていることは順次呼び出しているだけです。パスがやっかいですね。
ABC備忘録[ABC159 C - Maximum Volume] (Python)

>#問題文
正の整数$L$が与えられます。縦、横、高さの長さ(それぞれ、整数でなくてもかまいません) の合計が$L$の直方体としてありうる体積の最大値を求めてください。

>#制約
$1≤L≤1000$
$L$は整数

[C - Maximum Volume](https://atcoder.jp/contests/abc159/tasks/abc159_c)
#解法
縦、横、高さの長さをそれぞれ$a,b,c$とおくと3変数の相加相乗平均を利用して最大値を求める問題に帰着する。

```Python
L = int(input())
a = L / 3

print(a ** 3)
```

##3変数の相加相乗平均
$a,b,c \geq0$のとき$a+b+c\geq3\sqrt[3]{abc}$が成り立ち、$a=b=c$のときに等号が成立する。
この不等式を変形すると、$(\frac{a+b+c}{3})^3\geq abc$となり等号が成立するときに$abc$が最大となる。
Octokitを使って組織配下のリポジトリリストを取得する

Octokitのruby版を使ってあるOrganization配下のリポジトリリストを作ってみました。CSVで書き出してます。

コードはprivateとpublicだけ絞って出してます（forkは除きたかった）。access_tokenは[ここ](https://github.com/settings/tokens)で発行可能です。

```rb
# *****はGithubで発行したアクセストークン
client = Octokit::Client.new(:access_token => "*****")

privates = client.organization_repositories('組織名', {:type => 'private'})
publics = client.organization_repositories('組織名', {:type => 'public'})
repos = privates.concat(publics)

csv_text = CSV.generate do |csv|
  repos.each do |repo|
    csv << [
      repo[:name],
      repo[:private] ? :private : :public,
      repo[:html_url],
      Time.zone.parse(repo[:pushed_at].to_s).strftime('%Y-%m-%d %H:%M:%S'),
      Time.zone.parse(repo[:created_at].to_s).strftime('%Y-%m-%d %H:%M:%S')
    ]
  end
end

File.write(Rails.root.join('tmp', 'repos.csv'), csv_text)
```

`bin/rails console`で実行してるので少し依存したコードがありますけど当然rails関係ないです。素でやると`require 'csv'`とか`require 'octokit'`必要かと思います。また`pushed_at`みたいな時間計はUTCで来ますのでJSTへの変換が必要です。
PHPの基本個所についての復習①（echo）

#はじめに
PHPの基本についてアウトプットします。
#実行
書き方は色々あると思いますが、次のコードをhtml内に書きます。

```php
<? php 処理内容; ?>
```

今回はRubyの`puts`に当たる`echo`について書きます。

`Hello PHP!`と出力するには、次のように書きます。

```php
<? php echo 'Hello PHP!'; ?>
```
処理の最後に`;`を忘れないのがポイントです。

変数を使う時は、最初に`$`を付けます。

```php

<? php $word = "Hello PHP!"; echo $word; ?>
```

このままだと読みにくいので、改行します。

```php

<? php 
  $word = 'Hello PHP!';
  echo $word;
?>
```

これで、PHPを使った文字の出力が出来るようになりました。
[Ruby]シーザー暗号を出力するコード

# 対象読者
プログラミング初学者

# シーザー暗号とは
シーザー暗号（Caesar cipher）は単一換字式暗号の一種で、平文の各文字を、辞書順に3文字分シフトして暗号文を作る暗号である。

古代ローマの軍事的指導者ガイウス・ユリウス・カエサル（英語読みでシーザー）が使用したことから、この名称がついた。

# 例題
「khoorzruog」という文字列があり、これを３文字ずらす（戻す）と復号できることがわかっている。
それを実現させるコードを記述する。

## 事前知識

### splitメソッド
文字列を分割して配列にするためのメソッド。
型は以下の通り。

```ruby
文字列.split("")
```
例えば

```ruby
str = "abc"

array = str.split("")

p array # 出力結果 ["a", "b", "c"]
```

### joinメソッド
配列の中の要素を文字列にしてそのまま連結させるメソッド。
型は以下の通り。

```ruby
配列.join
```
引数を取ることも出来ますが今回は割愛。

### ordメソッド
文字列の最初の文字の文字コードを整数で返すメソッド。

例えば

```ruby
p "a".ord   # 出力結果 97
```
文字コードとは、電子媒体において、文章を画像などの図形データとして扱わずに、テキストの形式で扱う場合に、その各文字に対して持っているコードのこと。

### chrメソッド
ordメソッドの逆で文字コードから文字を返すメソッド。

例えば

```ruby
p 97.chr   # 出力結果 "a"
```

## 解答

```ruby
# シーザー暗号を変数に代入する。
caesar_cipher = "khoorzruog"

# splitメソッドで上記変数の文字列を分割する。
code = caesar_cipher.split("") # => ["k", "h", "o", "o", "r", "z", "r", "u", "o", "g"]

# 新たに配列を作成する。
array = []

# 分割された文字がordメソッドで文字コードに変換され、３文字ずらす（-3）ことで元のコードの文字コードに戻す。chrメソッドでその文字コードを文字に戻す。
code.each do |i|
  array << ( i.ord - 3 ).chr
end # 出力結果 ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

p array.join # 出力結果 "helloworld"
```

# 参考にしたサイト
[オブジェクト指向スクリプト言語 Ruby リファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/doc/index.html)
画像をクリックして画像を切り替える

# 画像をクリックするとメイン画像を切り替わるようにする
![ezgif-7-a2868021c67d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531549/32e456ea-dd0b-c451-c3c0-3f4b720a6645.gif)

上記のようにメイン画像と画像リストがあるようなページの場合に、
画像リストをクリックしたらメイン画像に切り替わるようにしたい。

上記の画像を表示させるための記事は以前書いた記事を参照にしてください
[商品詳細画面での画像の折り返し表示](https://qiita.com/1014Yawara/items/7266d584b30c7b82d9bd)

# 画像を切り替えるためにJQueryを使う

```haml:show.html.haml
.photo__box
  %ul.photo__innner
    %li
      = image_tag @item.images.first.src.url, class: "main__image"
      %ul
        - @item.images.each do |image|
          %li
            = image_tag image.src.url, class: "image__list"
```
上記のようなhamlを記述していまして、`main__image`のclassの場所にメイン画像がある状態で
`image__list`に画像リストを並べています。

やり方としては、`image__list`に入っている画像をクリックしたら
その配列要素を`main__image`の属性にいれるという形です。

記述は難しくないです。

```javascript:show_item.js
$(document).on('turbolinks:load', function() {
  $('.image__list').click(function () {
    var $src = $(this).attr('src');
    $('.main__image').attr('src', $src);
  });
});
```

`image__list`をクリックしたら、画像のテーブルの`src`を取り出して
`main__image`のsrc属性を上書きしてるようなかたちです。

（srcかどうかは画像のマイグレーションファイルでどう設定したかにもよるので各自の環境を確認してください）

この記述をするだけで画像を切り替えることができます。
ちゃんとクラスを当て間違えなければ簡単な設定かと思います。