OmniAICreator/Qiita-1.07M huggingface dataset:
P5.js 日本語リファレンス(textDescent)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の textDescent関数を説明します。

## textDescent() 

### 説明文

現在のフォントの現在のサイズでディセントを返します。ディセントとはベースラインより下のディセンダーが最も長い文字のピクセル単位の距離を表します。
![ascentDescent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/1217cd97-12df-88df-cc4a-9f6d74f42000.png)
### 構文

textDescent() 

### 戻り値

Number：ディセンダー(ピクセル単位)

### 例1

```javascript
function setup() {
  createCanvas(200, 200);
  
  let base = 100;

  // ディセントに乗ずる係数(フォントごとに異なります)
  let scalar = 0.6;

  textSize(32);
  
  // ディセントを算出します
  let desc = textDescent()  * scalar;

  // ベースラインにラインを描画します
  stroke(255, 0, 0);
  line(0, base, 50, base);

  // 文字のボトムにラインを描画します
  stroke(0, 0, 255);
  line(0, base + desc, 50, base + desc);

  // ベースラインにテキストを描画します
  text('dp', 0, base);
  
  textSize(64);

  // ディセントを算出します
  desc = textDescent()  * scalar;

  // ベースラインにラインを描画します
  stroke(255, 0, 0);
  line(60, base, 140, base);

  // 文字のボトムにラインを描画します
  stroke(0, 0, 255);
  line(60, base + desc, 140, base + desc);

  // ベースラインにテキストを描画します
  text('dp', 60, base);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/oaP4skQVW

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(textAscent)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の textAscent関数を説明します。

## textAscent() 

### 説明文

現在のフォントの現在のサイズでアセントを返します。アセントとはベースラインより上の最も高い文字の距離をピクセル単位で表したものです。
![ascentDescent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/0dfbcb81-2583-6862-1f0c-b80b065f9384.png)

### 構文

textAscent() 

### 戻り値

Number：アセント(ピクセル単位)

### 例1

```javascript
function setup() {
  createCanvas(200, 200);
  
  let base = 100;

  //アセントに乗ずる係数(フォントごとに異なります)
  let scalar = 0.9;
  
  textSize(32);
  
  // アセントを算出します
  let asc = textAscent()  * scalar;

  // ベースラインにラインを描画します
  stroke(255, 0, 0);
  line(0, base, 50, base);

  // 文字のトップにラインを描画します
  stroke(0, 0, 255);
  line(0, base - asc, 50, base - asc);

  //ベースラインにテキストを描画します
  text('dp', 0, base);
  
  textSize(64);

  // アセントを算出します
  asc = textAscent()  * scalar;

  // ベースラインにラインを描画します
  stroke(255, 0, 0);
  line(60, base, 140, base);

  // 文字のトップにラインを描画します
  stroke(0, 0, 255);
  line(60, base - asc, 140, base - asc);

  //ベースラインにテキストを描画します
  text('dp', 60, base);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/t7SwDYYj0



### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(textWidth)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の textWidth関数を説明します。

## textWidth() 

### 説明文

文字または文字列の幅(ピクセル単位)を計算して返します。

### 構文

textWidth(theText)

### パラメタ

- theText  
String：計算する文字または文字列

### 戻り値

Number：文字または文字列の幅(ピクセル単位)


### 例1

```javascript
function setup(){
  createCanvas(300, 300);

  textSize(14);

  let aChar = 'P';

  // テキストサイズ14の文字幅を取得します
  let cWidth = textWidth(aChar);
  
  text(aChar, 0, 40);
  
  // 取得したサイズの位置にラインを描画します
  line(cWidth, 0, cWidth, 50);

  let aString = 'p5.js';
  
  // テキストサイズ14の文字列幅を取得します
  let sWidth = textWidth(aString);
  
  text(aString, 0, 85);
  
  // 取得したサイズの位置にラインを描画します
  line(sWidth, 50, sWidth, 100);

  textSize(28);

  aChar = 'P';
  
  // テキストサイズ28の文字幅を取得します
  cWidth = textWidth(aChar);
  
  text(aChar, 100, 40);
  
  // 取得したサイズの位置にラインを描画します
  line(cWidth + 100, 0, cWidth + 100, 50);

  aString = 'p5.js';
  
  // テキストサイズ28の文字列幅を取得します
  sWidth = textWidth(aString);
  
  text(aString, 100, 85);
  
  // 取得したサイズの位置にラインを描画します
  line(sWidth + 100, 50, sWidth + 100, 100);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/WSc3auwdt


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(textStyle)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の textStyle 関数を説明します。

## textStyle() 

### 説明文

システムフォントのテキストスタイルを NORMAL、ITALIC、BOLD または BOLDITALIC に設定または取得します。
注：これは CSS スタイルによってオーバーライドされる場合があります。非システムフォント(OpenTypem、TrueType など)の場合は, 代わりにスタイル付きフォントをロードしてください。

### 構文

textStyle(theStyle)

textStyle() 

### パラメタ

- theStyle
定数：設定するテキストスタイル(NORMAL、ITALIC、BOLD、BOLDITALIC)

### 例1

```javascript
function setup() {
  createCanvas(200, 200);
  
  strokeWeight(0);
  textSize(12);
  
  textStyle(NORMAL);
  text('Font Style Normal', 10, 15);
  
  textStyle(ITALIC);
  text('Font Style Italic', 10, 40);
  
  textStyle(BOLD);
  text('Font Style Bold', 10, 65);
  
  textStyle(BOLDITALIC);
  text('Font Style Bold Italic', 10, 90);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/_jPKbmCl7


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
P5.js 日本語リファレンス(textSize)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の textSize関数を説明します。

## textSize() 

### 説明文

現在のフォントサイズを設定/取得します。フォントサイズはピクセル単位です。

### 構文

textSize(theSize)

textSize() 

### パラメタ

- theSize  
Number：設定するフォントサイズ(ピクセル単位)

### 例1

```javascript
function setup() {
  createCanvas(200, 200);

  textSize(12);
  text('Font Size 12', 10, 30);
  textSize(14);
  text('Font Size 14', 10, 60);
  textSize(16);
  text('Font Size 16', 10, 90);
}

```

### 実行結果
https://editor.p5js.org/bit0101/sketches/68BT2rvNr


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Firefox Sendでフォルダを送る方法


当たり前なのかもしれないが、なるほどと思ったのでまとめておく。
Firefox Send（https://send.firefox.com/）
ではファイルごとしか送れない。つまり、フォルダを送ることができない。

しかし圧縮することでフォルダ全体を送ることができる。

圧縮するには右クリックで「〇〇（ファイル名）を圧縮」をクリックすればいい。
そうするとzipファイルが作成されるので、それを送信すればいい。
[メモ]ファイル名とあわせてファイルの中身を標準出力

何ということもないですが、catのオプションとしては用意されてなさそうだったのでメモ

```bash
(function hoge() { basename $1;cat $1; }; hoge <ファイルパス>);
```

です。

```bash
for fn in ./*.txt; do (function hoge() { basename $1;cat $1; }; hoge $fn) >> ./all.txt;done;
```

とすればカレントディレクトリ内にある全ての`.txt`ファイルの内容をファイル名込みで`all.txt`内にまとめることができます。
P5.js 日本語リファレンス(textLeading)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の textLeading関数を説明します。

## textLeading() 

### 説明文

テキストの行間の間隔をピクセル単位で設定/取得します。この設定は textSize() の以降のすべての呼び出しで使用できます。

### 構文

textLeading(leading)

textLeading() 

### パラメタ

- leading  
Number：設定する行間隔のサイズ(ピクセル単位)

### 例1

```javascript
function setup(){
  createCanvas(200, 200);
  textSize(12);

  // 表示するテキスト。 '\n' は「改行」文字です
  let lines1 = 'ABC\nDEF\nGHI\nJKL\nMNO\nPQR\nSTU';
  // 行間隔を10に設定します
  textLeading(10);
  text(lines1, 10, 25);

  // 表示するテキスト。 '\n' は「改行」文字です
  let lines2 = 'ABC\nDEF\nGHI\nJKL';
  // 行間隔を20に設定します
  textLeading(20);
  text(lines2, 50, 25);

  // 表示するテキスト。 '\n' は「改行」文字です
  let lines3 = 'ABC\nDEF\nGHI';
  // 行間隔を30に設定します
  textLeading(30);
  text(lines3, 90, 25);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/hMPn3Obkn


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
React学習 propsとstate

#コンポーネントとは
Componentとは、特定の機能を持った汎用的な「部品」を指す言葉です。
Componentにより UI を独立した再利用できる部品に分割し、部品それぞれを分離して考えることができるようになります。
Component間のデータの受け渡しは「props」を利用する。

#propsとは
propsはプロパティの意味であり、関数の引数のように親からデータを渡して子のReact要素を返す役割を持っています。

```react:
// コンポーネント
class Greeting extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>{ this.props.type }</div>
    );
  }
}
// コンポーネントの呼び出し
ReactDOM.render(<Greeting type="Hello" />, document.getElementById('app'));
```
React がユーザ定義のコンポーネントを見つけた場合、JSX に記載のある属性と子要素をオブジェクトとしてコンポーネントに渡します。

#コンポーネントの作成方法
```react:関数の場合
function Greeting (props) {
 return <h1>{props.type}</h1>
}
```
```react:クラスの場合
class Greeting extends React.Component {
 render() {
    return <h1>{this.props.type}</h1>
 }
}
```
クラスの場合、コンポーネント定義でポイントとなるのは、React.Componentというコンポーネントを基底クラスとして継承することです。
そして、render()メソッドを定義することで、その戻り値でコンポーネントの表示内容を指定します。
また、タグ要素は、this.propsというオブジェクト型のプロパティを介して取得ができる。

```react:アロー演算子の場合
const Greeting = (props) => (
 <h1>{props.type}</h1>
)
```
アロー演算子の場合、1文であればreturn文を省略できるので、最小限の記述で簡潔にコンポーネントの定義が可能。

#コンポーネントの状態管理
状態を管理するためには、コンポーネント自体に状態の値を記憶させておく必要がある。
状態の記述を行うには、コンポーネントのstateオブジェクトを利用する。

#stateとは
stateは状態を管理するもので、関数内で宣言された変数のようにコンポーネントの内部でデータを更新する役割を持っています。

```react:
class CheckTest extends React.Component {
  //コンストラクタ
  constructor(props) {
    super(props)
  // 状態の初期化
    this.state = {checked: false}
  }

  render () {
    // チェックされていない場合
    let mark = '□'
    let style = { fontWeight: 'normal' }

    // チェックされた場合
    if (this.state.checked) {
      mark = '■'
      style = { fontWeight: 'bold' }
    }

    // クリック時のイベント指定
    const clickHandler = (e) => {
      const newValue = !this.state.checked
      this.setState({checked: newValue})
    }

    return (
      <div onClick={clickHandler} style={style}>
        {mark} Hello
      </div>
    )
  }
```
コンストラクタ内のthis.state = {...}で初期値を設定。
setStateは状態を更新すると自動的にrender()を実行する。
チェックボックスをクリックするたびに、変数「checked」の真偽値が変化し、render()が実行されることで画面が再描画されます。

#Reactでのイベント記述方法
##render()内でイベントハンドラを定義する場合
```react:
class コンポーネント名 extends React.Component {
  render() {
    const handler = (e) => alert('Test')
    return <button onClick={handler}>AlertTest</button>
  }
}
```
##クラスのメソッドとしてイベントハンドラを定義する場合
```react:
class コンポーネント名 extends React.Component {
  constructor {
    this.alertHandler = this.alertHandler.bind(this)
  }
  alertHandler () {
    alert('Test')
  }
  render () {
    return <button onClick={this.alertHandler}>
      alertTest</button>
  }
}
```
複数のイベントを記載する場合には、複雑にならないようにクラスのメソッドとして定義します。
しかし、render()内でalertHandlerを呼び出す際に、alertHandlerメソッド内のthisが書き換わってしまうため、メソッドとthisを結び付けるためにバインド(bind)する必要があります。
P5.js 日本語リファレンス(textAlign)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の textAlign関数を説明します。

## textAlign() 

### 説明文

テキストを描画するための現在の配置を設定します。 horizAlign(LEFT、CENTER、RIGHT) および vertAlign(TOP、BOTTOM、CENTER、BASELINE)の2つの引数を受け入れます。

horizAlign パラメータは text() 関数のx値を参照し、vertAlign パラメータはy値を参照しています。

したがって、textAlign(LEFT) と記述する場合、テキストの左端を text() で指定したx値に揃えます。 textAlign(RIGHT, TOP)と書くとテキストの右端をx値に、テキストの上端をy値に揃えます。

### 構文

textAlign(horizAlign, [vertAlign])

textAlign() 

### パラメタ

- horizAlign  
定数：水平方向の配置。LEFT, CENTER または RIGHT

- vertAlign  
定数：垂直方向の配置。TOP, BOTTOM, CENTER または BASELINE(オプション)


### 例1

```javascript
function setup(){
  textSize(16);
  strokeWeight(0.5);
  line(width/2, 0, width/2, height);
  
  // horizAlign = RIGHT のとき
  textAlign(RIGHT);
  text('ABCD', 50, 30);
  
  // horizAlign = CENTER のとき
  textAlign(CENTER);
  text('EFGH', 50, 50);
  
  // horizAlign = LEFT のとき
  textAlign(LEFT);
  text('IJKL', 50, 70);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/LFTwB-_ak


### 例2

```javascript
function setup(){
  createCanvas(120, 120);
  
  textSize(16);
  strokeWeight(0.5);

  // vertAlign = TOP のとき
  line(0, 12, width, 12);
  textAlign(CENTER, TOP);
  text('TOP', 0, 12, width);

  // vertAlign = CENTER のとき
  line(0, 40, width, 40);
  textAlign(CENTER, CENTER);
  text('CENTER', 0, 40, width);

  // vertAlign = BASELINE のとき
  line(0, 68, width, 68);
  textAlign(CENTER, BASELINE);
  text('BASELINE', 0, 68, width);

  // vertAlign = BOTTOM のとき
  line(0, 110, width, 110);
  textAlign(CENTER, BOTTOM);
  text('BOTTOM', 0, 110, width);
}

```

### 実行結果
https://editor.p5js.org/bit0101/sketches/xLU2NwpLc


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Windows 10 で OpenSSH server 起動し公開鍵認証ログインするメモ

## 背景

* Linux から, Windows 10 に ssh ログインしたい.
* 自身のアカウントは管理者権限とします.

## 方法

OpenSSH が最近では標準で入ってました(cygwin とかで ssh サーバ入れなくてもよくなった)

Windows 10にオンデマンド機能のOpenSSHサーバをインストールする方法
https://www.atmarkit.co.jp/ait/articles/1903/28/news005.html

### authorized_keys

デフォルトでは, authorized_keys は, 管理者権限アカウントでは以下のファイルを見にいきます.

```
C:\ProgramData\ssh\administrators_authorized_keys
```

ここに公開鍵追加します.

また, 以下を参考にして, powershell で permission 設定する必要があります.

https://www.concurrency.com/blog/may-2019/key-based-authentication-for-openssh-on-windows

```powershell
$acl = Get-Acl C:\ProgramData\ssh\administrators_authorized_keys
$acl.SetAccessRuleProtection($true, $false)
$administratorsRule = New-Object system.security.accesscontrol.filesystemaccessrule("Administrators","FullControl","Allow")
$systemRule = New-Object system.security.accesscontrol.filesystemaccessrule("SYSTEM","FullControl","Allow")
$acl.SetAccessRule($administratorsRule)
$acl.SetAccessRule($systemRule)
$acl | Set-Acl
```

## Bash にする

Windows10でSSHサーバーを立ててデフォルトシェルをBashにする
https://qiita.com/kenji0x02/items/3f4e7262e6de0d8c8702

ありがとうございます.

必要に応じて, `cmd.exe` or `powershell.exe` にすれば, command prompt, power shell に移ることできます.

## 問題点

画面を RDP で出していて, 画面に explorer 出そうとして `start .`(カレントディレクリを explorer で開く)とやるとターミナルがハングしますので注意です.
(ctrl + c か ctrl + z しても終わらない. しばらく待つと復帰する模様)

`explorer.exe` 単体はうまく行きました(ただし引数にパス指定するとなにも起こらない)
JavaScriptの日付フォーマットはこれだけあれば十分な気がする

日付フォーマットは言語やライブラリによって微妙に書き方が違ったりして覚えるのが面倒です。

JavaScriptならライブラリ不要で以下の定義を入れておけば足りそうな気がしたのでメモしておきます。

```javascript
Date.prototype.format = function(formatter, utc) {
  var month_en = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var wday_en = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  var wday_ja = '日月火水木金土';
  return formatter(utc ? {
    year: this.getUTCFullYear(),
    month: ('0' + (this.getUTCMonth() + 1)).slice(-2),
    month_en: month_en[this.getUTCMonth()],
    day: ('0' + this.getUTCDate()).slice(-2),
    wday: this.getUTCDay(),
    wday_ja: wday_ja.charAt(this.getUTCDay()),
    wday_en: wday_en[this.getUTCDay()],
    hour: ('0' + this.getUTCHours()).slice(-2),
    minute: ('0' + this.getUTCMinutes()).slice(-2),
    second: ('0' + this.getUTCSeconds()).slice(-2),
    ms: ('00' + this.getUTCMilliseconds()).slice(-3)
  } : {
    year: this.getFullYear(),
    month: ('0' + (this.getMonth() + 1)).slice(-2),
    month_en: month_en[this.getMonth()],
    day: ('0' + this.getDate()).slice(-2),
    wday: this.getDay(),
    wday_ja: wday_ja.charAt(this.getDay()),
    wday_en: wday_en[this.getDay()],
    hour: ('0' + this.getHours()).slice(-2),
    minute: ('0' + this.getMinutes()).slice(-2),
    second: ('0' + this.getSeconds()).slice(-2),
    ms: ('00' + this.getMilliseconds()).slice(-3)
  });
};
```

※IE8とかでも動くような書き方にしています。

```javascript
//年月日曜日なら
new Date().format(({year, month, day, wday_ja}) => `${year}年${month}月${day}日(${wday_ja})`)
//=> 2020年06月19日(金)
```

```javascript
//前０を消したいならNumber()で
new Date().format(({year, month, day, wday_ja}) => `${year}年${Number(month)}月${Number(day)}日(${wday_ja})`)
//=> 2020年6月19日(金)
```

```javascript
//年月なら
new Date().format(({year, month}) => `${year}/${month}`)
//=> 2020/06
```

```javascript
//時間なら
new Date().format(({hour, minute, second, ms}) => `${hour}:${minute}:${second}.${ms}`)
//=> 17:51:33.491
```

```javascript
//分割代入やアロー関数、テンプレートリテラルが使えない場合は
new Date().format(function(t) { return t.hour + ':' + t.minute + ':' + t.second + ':' + t.ms })
//=> 17:51:33.491
```

```javascript
//HTTPヘッダ用日付形式なら
new Date().format(t => `${t.wday_en.slice(0, 3)}, ${t.day} ${t.month_en.slice(0, 3)} ${t.year} ${t.hour}:${t.minute}:${t.second} GMT`, true)
//=> Fri, 19 Jun 2020 09:20:58 GMT
```

という感じで、どんな形式でもわりと直感的にかけるのではと思いました。
index.php

<?php 
require_once('data.php');
require_once('menu.php');
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Café Progate</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link href='https://fonts.googleapis.com/css?family=Pacifico|Lato' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="menu-wrapper container">
    <h1 class="logo">Café Progate</h1>
    <h3>メニュー<?php echo Menu::getCount() ?>品</h3>
    <form method="post" action="confirm.php">
      <div class="menu-items">
        <?php foreach ($menus as $menu): ?>
          <div class="menu-item">
            <img src="<?php echo $menu->getImage() ?>" class="menu-item-image">
            <h3 class="menu-item-name"><?php echo $menu->getName() ?></h3>
            <?php if ($menu instanceof Drink): ?>
              <p class="menu-item-type"><?php echo $menu->getType() ?></p>
            <?php else: ?>
              <!-- for文を用いて、spicinessプロパティの数だけ繰り返し処理を行ってください -->
              <?php for($i = 0; $i< $menu->getSpiciness();$i++): ?>
                <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/php/chilli.png" class="icon-spiciness">
              <?php endfor ?>
              
            <?php endif ?>
            <p class="price">¥<?php echo $menu->getTaxIncludedPrice() ?>（税込）</p>
            <input type="text" value="0" name="<?php echo $menu->getName() ?>">
            <span>個</span>
          </div>
        <?php endforeach ?>
      </div>
      <input type="submit" value="注文する">
    </form>
  </div>
</body>
</html>
//唐辛子を表示する
Mockitoで引数オブジェクトの内容の検証をする

Mockitoを使ってるときに、『メソッドが呼ばれたかどうか』 は verifyのtimes() を使って検証する、っていう話はよく出てくるんですが、メソッドに渡った引数（オブジェクトの中身）の検証できる方法はないのか？と思って調べてみました。

## 参考
https://javadoc.io/doc/org.mockito/mockito-core/latest/org/mockito/ArgumentMatchers.html
https://www.codeflow.site/ja/article/mockito-argument-matchers

### Matcherの作り方

org.mockito.ArgumentMatcher を継承して、カスタムMatcherを作ります。
HashMapだったらこんな感じかな。

```HashMapMatcher.java
import java.util.HashMap;

import org.mockito.ArgumentMatcher;

public class HashMapMatcher implements ArgumentMatcher<HashMap<String, String>> {
	HashMap<String, String> map;

    public HashMapMatcher(HashMap<String, String> map) {
        this.map = map;
    }

    @Override
    public boolean matches(HashMap<String, String> actual) {
		if (this.map.keySet().size() != actual.keySet().size()) {
    		return false;
    	}
    	for (String key : this.map.keySet()) {
    		if (!actual.containsKey(key)) {
    			return false;
    		}
    		if (!this.map.get(key).equals(actual.get(key))) {
    			return false;
    		}
    	}
        return true;
    }
    
    // Overrideして、mapの中身を全部出すようにしておけば、テストが失敗したときに楽。
    @Override
    public String toString() {
    	// どう出力するかはお好みで。
    	StringBuffer sb = new StringBuffer();
    	for (String key : this.map.keySet()) {
    		sb.append("[key:").append(key);
    		sb.append(", value:").append(map.get(key)).append("]");
    	}
    	return sb.toString();
    }

}

```

## 使い方

org.mockito.ArgumentMatchers.argThat にカスタムMatcherを渡して使います。

```HogeTest.java
// hoge.save(map); が呼ばれて、その引数が期待値と同じか検証する
verify(hoge,atLeastOnce()).save(argThat(new HashMapMatcher(map)));
```

## 終わりに

verifyじゃなくて、when ～ thenReturn のときの検証にも使えるっぽいです。
それではレッツエンジョイ　テストライフ。
結局pythonの可視化ツールはどれが人気なのか？

#あらすじ
matplotlib使いの僕，他の可視化ツールに興味をもつ．

いろいろ調べてみると，インタラクティブに操作できるツールがたくさんあるっぽい．

例えば，
[Pythonの可視化ツールはHoloViewsが標準になるかもしれない](https://qiita.com/driller/items/53be86cea3c3201e7e0f)
[Jupyter-notebook の作図ライブラリ比較](https://qiita.com/deaikei/items/b71c1ca2c4c2a2c37526)
[Pythonでボケ(Bokeh)よう ～ データ可視化ライブラリの紹介 ～](https://qiita.com/yuji38kwmt/items/4edf1d87568a860fc3b8)


など．では結局どれを使えばいいんだよ，という話ですが，現時点で多くの人が使っているもの，もしくは人気急上昇中のものを使っとけば問題ないでしょう，という考えを基に，それぞれの人気度を比較します．
人気ものを使うことには，エラーが起きてもググればたいていは問題解決できること，おそらく今後もアップデートされ続けるだろう，というメリットがあります．


#方法
googleトレンドを用いる．
調べるのは以下の5つ．説明には上記記事たちを参考にしました．

1. matplotlib　 (王道中の王道のグラフ描画ライブラリ)
2. Bokeh　(ぼけ，と読むらしい．インタラクティブなデータ可視化ライブラリ)
3. Plotly　(こちらもインタラクティブに動かせる)
4. HoloViews (matplotlibやBokehなどの可視化ツールを使いやすくしたラッパ,とのこと，シンプルさを売りにしている)
5. Pygal　([公式ドキュメント](http://www.pygal.org/en/stable/)によると”Sexy python charting”ができる．某政治家を思い出すね．)

#結果

見てください，圧倒的なmatplotlibの人気！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565132/cddf61f1-519c-4424-7314-6e0c26dad803.png)

なんというか，予想どおりでしたね．
では，matplotlib以外だとどうでしょうか．


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565132/ad9d8750-ee52-249b-ad75-7fdec0ae56f0.png)

plotlyが人気ということでした．
bokehもなかなか人気が衰えていないですね．
HoloView，Pygalはそれらと比較してもまだまだ人気はない，という印象です．



#まとめ

1，matplotlibがやはり人気
2，インタラクティブなグラフを作りたいなら，plotlyが人気，次点でBokeh


自分が好きなツール，目的にあったツールを使うのが一番良いと思いますが，どれが人気かという観点からは，以上のような結果になりました．
以下は自分のメモ用なのですが，plotlyの参考になるページをまとめてみました．

[公式ドキュメント](https://plotly.com/python/)
→ざっと見ただけでも，何ができるかがわかる，なんかいろいろ動いてて面白そう

[[Python] Plotlyでぐりぐり動かせるグラフを作る](https://qiita.com/inoory/items/12028af62018bf367722)
→基本的な使い方をまとめてくれている印象．最終更新日から1年以上が経過している記事なので，今も参考になるかは不明

[[Python] Plotlyで標高データを球面に描画し、グルグル回せる地球儀を描いてみる](https://qiita.com/rkiuchir/items/1243e66be57e89c4d254)
→はえ～～～，ってなる．

#さいごに
ないとは思いますが，googleトレンドの利用規約に反してる等ありましたらお知らせください
また，ざっと調べたことをまとめただけなので，きちんと裏はとっていません．間違いありましたらご指摘ください．
googleトレンドの画像は2020年6月時点のものです．
コードの命名を文系の観点から考察

# はじめに
Rubyで書いている時のコードの規約の経験まとめとして書いてます。

# 読み易いコードの定義
> 読んだ人が変更を加えたりバグを発見することができるようになるレベルで最短でコードを読み終えることができるということを目標にしてコードを書かなければならない

> 変数もメソッドもクラスも何を司っているのかを直訳した時に分かるようなっていること

## 表面上の改善として、任意に書けるものへの理解のしやすさを考える
　変数、メソッド、クラス、凡そ任意で書き、定義することができるこれらのコードの部分はよく考えて書かないと、前述のコード定義をクリアすることは至難である。正直、こちらが意図して書いていたとしても誤解を招くことすらある。誤読される可能性を出来る限り排除しないと、こっちが何も考えてないように思われるから腹立たしいものです。

### 明確な単語を使用する
　簡単な動詞、名詞、形容詞、前置詞を使用する。
　英単語を使用する上で、カチコチの英文法に則って書く必要はなく、むしろそれが混乱させることを招くこともあるので、その辺はプロダクトやチーム内のルールとして納得するような状況判断も必要になってくる。
　例えば、of。A of Bの訳詞方は、BのA単体ではなく、AのBと言う使い方も存在する。どちらを使っても問題無いような時でもBのAに慣れ親しんでいる人が多い場合、警告されたりします。

　口語表現は、強調の意味で文法を無視するなんてことも多々あることで、海外の人でもここまで気を遣って表現することはないのが事実なんですが、コーディングにおいては海外の契約書書くとかその辺の公式文書を書くくらいのカッチリさが必要みたいですね。

　多分、名詞として使われることが有名でも形容詞としても使える単語があったとして、使用すればそれも警告対象になりそう。例えば、product costとか。要は、見慣れてるか見慣れていないかと言うすごい経験的なものに依存しています。

　過去分詞も過去形の動詞と混同されるので避けた方がいい。
　文章読解における厄介な分詞もまた文脈依存で判断する必要があるので、表現としては避けるべきであろう。およそ文脈判断を要求される文法は使用しない方がいいと思われる。関係代名詞などはこの構文の性質上、流石に長くなる文法なので、使用されることは無いだろう。しかし、それぞれの文法が折り重なった場合の判断する術は数多くあるが、なるべく短く情報を入れ込む必要のある表現を余儀なくされるコーディングにおいて、文脈で委ねる表現はどれも避ける必要があると思われる。

### 意識すべき文法は多く無い

- 動詞を使用する時は5文型を意識する必要があるので、自動詞と他動詞の使い分けは意識する。
- 複数形と単数系

今のところ、気にするのはこれくらいですね。

#### 自明の言葉は不要
　例えば、registered userと言う変数名はuserで良い。DBに入ってきている時点で登録されていることは明白だからである。

### 汎用的な名前を避け、具体的な名付けを行う
　名詞単発で変数を作ると、コードが増えてきた時に読み手の誤解を招くことになる。例えば、あちこちにdataとしかない変数があると、読み辛さを増す。

### 略記は避ける
　これは納得。流石にget_user_dataをgudとかにされたら分からん・・・

### メソッドは動詞を使用
　処理を行うコードなので、動詞を使うのがベスト。

### クラス名や変数は名詞を使用
　何を司っているクラスなのか、何が格納されている変数なのかを意識する

### 言い換え表現は使用しない
　コードは文章では無いので、言い換え表現はしない方がいい。なんとなく文章書く感覚でやってるとやっちゃいがち。
　Memmber =  userなどのように殆ど同じ意味を持つものを使って表現することはせず、同じ意味の持つものは同一の単語で統一する。

### 非推奨な記法
　ハンガリアン記法と呼ばれる型やスコープなどの情報を変数名やクラス名に入れ込む命名法、現在非推奨であり、多くの場合のアンチパターンとなるらしいです。
　例えば、配列であれば、arr_dataとかにして変数にするなどは避けるべきである。
brew install pyenvをしようとしたら権限まわりのエラーが出た

##はじめに
今後同じエラーが出た時にパパッと解決できるように備忘録みたいな感じで書きます。
macOS 10.15.5

##対象読者
私と同じくターミナルでエラーが出るとよくわからなくなっちゃうプログラミング初心者

##経緯
pythonだとか機械学習だとかの初学者なのでチャットボットなるものを作ってみようと思い立ち、macでpythonの開発環境を整えようと思ったのですが…

```$ brew install pyenv
```
を実行したら以下のエラーが出ちゃった。

```
Error: The following directories are not writable by your user:
/usr/local/lib/pkgconfig

You should change the ownership of these directories to your user.
  sudo chown -R $(whoami) /usr/local/lib/pkgconfig

And make sure that your user has write permission.
  chmod u+w /usr/local/lib/pkgconfig
```

##解決法
調べたところ、ここを読んだら解決しました。めっちゃわかりやすい。
https://qiita.com/masa_36/items/a811c9335e2e985f6adc

具体的には、エラー文が教えてくれているように
```$ sudo chown -R $(whoami) /usr/local/lib/pkgconfig```
を実行した後
```$ brew install pyenv```
を実行。

この時点でエラーが出てこなかったため、pyenvがうまくインストールされたかの確認をしようと思い
```$ pyenv -v```
を実行しました。

その結果
```pyenv 1.2.19```
と表示され、pyenvがインストールできていることを確認できました。
Firestoreに今月と前月のデータがあるか調べる処理を実装した

Nuxt.js+Firebaseを勉強しています。

# やりたいこと
月ごとのデータを登録しているのですが、月初にログインしたとき今月分データがないときに前月分データをコピーして今月分データとする機能を実装したいと考えました。
ログインしてすぐにこの判定をしたいので、処理タイミングは `mounted` とします。

# 環境
- Firebase 7.3.0
- Vue CLI 4.0.5
- Nuxt.js 2.10.2
- VuexFire 3.2.0

# 課題１
[Firestoreのドキュメント](https://firebase.google.com/docs/firestore/query-data/queries?hl=ja) の「クエリの制限事項」にある通り、Firestoreでは論理 OR クエリを利用できません。

今月分と前月分をWHERE句のOR条件で検索するつもりでしたが、これができないことが分かりました。今月と前月の２回に分けてデータベースにアクセスすることもできますが、できればアクセスは１回で済ませたいです。

# 課題２

VuexFireを使っています。 `computed` でマッピングされた情報を `mounted` で使うことができればいいのですが、これもできませんでした。

`this.$store.dispatch` をするタイミングは `mounted` です。この `dispath` の後に続けてコピー処理を実装すると、`dispath` 完了よりも先にコピー処理が実行されます。データベースアクセスは非同期だからです。

# 実装したこと

Firestoreのデータベース構造を以下のようにしました。

コレクション|ドキュメント| サブコレクション|ドキュメント| フィールド
:----------|:----------|:--------------|:--------|:--------------
notes|(userID) | pages |  （年月） | （各データ）
notes|(userID) | index|  YM | （年月）

データを登録するときに、pagesサブコレクションの年月ドキュメントにデータを登録します。これに加えて、indexサブコレクションのYMドキュメントに登録した年月を記録することにしました。
`mounted` でindexサブコレクションのYMドキュメントを取得することで、どの年月がpagesサブコレクションに登録されているか判断できます。

```pages/index.vue
// 省略

<script>
  // 省略

  mounted () {
    if (this.$store.getters['auth/isLoggedIn']) { // ログインしている場合は以下の処理を続行
      let userID = this.$store.getters['auth/getUid'];
      
      let docRef = db.collection('notes').doc(userID).collection('index').doc('YM');
      let self = this;
      docRef.get().then( function(doc) {
        if (doc.exists) {
          // ドキュメントを取得できたら、ここでチェック＆コピー処理
        }
      });
    }
  },

  // 省略
</script>
```
ESLint7系を使っていると「TypeError: createRequire is not a function」が出る

# 概要

**ESLint 7** 系と**Node.js 12未満**をつかっていると以下のエラーがでる場合がある

> ESLint 7 がサポートしている Node.js バージョンは ^10.12.0 || >=12.0.0 となっています

↑だそうです。（コメントありがとうございました）

```
TypeError: createRequire is not a function
Referenced from: /something/.eslintrc
    at Object.resolve (/something/node_modules/eslint/lib/shared/relative-module-resolver.js:28:20)
    at ConfigArrayFactory._loadExtendedShareableConfig (/something/node_modules/eslint/lib/cli-engine/config-array-factory.js:854:39)
    at ConfigArrayFactory._loadExtends (/something/node_modules/eslint/lib/cli-engine/config-array-factory.js:763:25)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (/something/node_modules/eslint/lib/cli-engine/config-array-factory.js:702:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (/something/node_modules/eslint/lib/cli-engine/config-array-factory.js:647:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at ConfigArrayFactory.loadInDirectory (/something/node_modules/eslint/lib/cli-engine/config-array-factory.js:495:28)
    at CascadingConfigArrayFactory._loadConfigInAncestors (/something/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:355:46)
    at CascadingConfigArrayFactory._loadConfigInAncestors (/something/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:374:20)
```

# 対策

## その１

Node.jsを最新にする

## その２

ESLintをダウングレードする

```js:package.json　(ESLintを6系にダウングレード)
"eslint": "^6.8.0",
```
Vue.js コンポーネント作成

#コンポーネントを作成する
グローバル登録、ローカル登録、シングルファイルコンポーネントの作成方法がある

```html
    <div id="app">
        <paragraph></paragraph>
    </div>
    <script>
        Vue.component('paragraph',{
            data:function(){
                return {
                    counter: 0
                }
            },
            template:'<div><button @click="counter++">{{counter}}</button></div>'
        })
    </script>
```

` <paragraph message="hello"></paragraph>`の
messageプロパティを受け取り表示させる

```html
    <div id="app">
        <paragraph message="hello"></paragraph>
        <paragraph message="world"></paragraph>
    </div>
    <script>
        Vue.component('paragraph',{
            props:['message'],
            template:'<div>{{ message }}</div>'
        })
```

プロパティの値が長い場合、`<slot></slot>`で同様の動きが可能

```html
    <div id="app">
        <paragraph>hellohellohello</paragraph>
    </div>
    <script>
        Vue.component('paragraph',{
            template:'<div><slot></slot></div>'
        })
```
avy-migemoを使わずにswiper-migemoを実現する

1年ほど前からavy-migemoのメンテナンスが止まり、最新のswiperではmigemoが機能しなくなってしまいました。やむなくisearch-migemoで代用していたのでが、つい最近、下記のTipsを見つけて試したところ実に快適なので皆様にもご紹介します。

- [Ivy (Swiper) で雑に migemo を使う](https://www.yewton.net/2020/05/21/migemo-ivy/)

私の場合、Tipsにあるコードを下記のとおりそのままコピーして、あっさり動いてくれました。スペース区切りの複数keywordにも賢く対応します。

```emacs-lisp
(defun my:ivy-migemo-re-builder (str)
  "Own function for my:ivy-migemo."
  (let* ((sep " \\|\\^\\|\\.\\|\\*")
		 (splitted (--map (s-join "" it)
						  (--partition-by (s-matches-p " \\|\\^\\|\\.\\|\\*" it)
										  (s-split "" str t)))))
	(s-join "" (--map (cond ((s-equals? it " ") ".*?")
							((s-matches? sep it) it)
							(t (migemo-get-pattern it)))
					  splitted))))

(setq ivy-re-builders-alist '((t . ivy--regex-plus)
							  (swiper . my:ivy-migemo-re-builder)))
```
※ 当然ながらmigemo自体の設定は機能することが前提です。



## swiperの設定
regionからでも機能するように下記のように設定しています。以前は、swiper-isearch で動作していたのですが、なぜか躓くようになりました。私の場合、さほど巨大サイズのファイルを扱わないのでswiperのほうが使いやすい感じがしています。

```emacs-lisp
(bind-key
 "C-s"
 (defun swiper-migemo-or-region ()
   "If region is selected, `swiper-thing-at-point' with the keyword selected in region.
If the region isn't selected, `swiper' with migemo."
   (interactive)
   (if (not (use-region-p))
	   (swiper)
	 (swiper-thing-at-point))))
```

swiper-thing-at-pointの単体機能もごくたまに使うので別にキーバインドしています。こちらだけでもregionには対応するので我慢できるのですが、私の場合、連続した日本語文章から検索するケースが多いので上記をメインに使っています。

```emacs-lisp
(bind-key "C-M-s" 'swiper-thing-at-point)
```





## counsel-webとの連携を試す

emacsからのWEB検索は、いろいろあって、google-this, web-searchなどを使っていましたが、[counsel-web](https://github.com/mnewt/counsel-web) という面白そうなpackegeを見つけました。

keyword検索すると検索結果のリストがミニバッファーに表示されて選択すると、あらかじめ設定したプラウザ（w3m, browse-urlなど）でそのページが開かれるというものです。検索エンジンはdefaultは、DuckDuckGoですが、設定でgoogleにすることもできます。

複数キーワードもOKなのでプラウザで検索するのと同じ感覚なのですが、emacsを離れることなくつかえるのがみそでしょうか。さほど魅力があるとは思わなかったのですが、これに先の独自関数を紐つけてやるとmigemo検索が可能になるので試してみたところ、じつに楽しいtoolに変身します。ぜひお試しください。

![スクリーンショット_2020-06-19_17-49-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64499/46633e1c-88c0-a058-e5eb-bbfe93de420a.png)


```emacs-lisp
(leaf counsel-web
  :ensure t
  :bind ("s-s" . counsel-web-suggest)
  :config
  (setq counsel-web-search-action #'browse-url
		counsel-web-engine 'google)
  :init
  (defun my:ivy-migemo-re-builder (str)
	"Own function for my:ivy-migemo."
	(let* ((sep " \\|\\^\\|\\.\\|\\*")
		   (splitted (--map (s-join "" it)
							(--partition-by (s-matches-p " \\|\\^\\|\\.\\|\\*" it)
											(s-split "" str t)))))
	  (s-join "" (--map (cond ((s-equals? it " ") ".*?")
							  ((s-matches? sep it) it)
							  (t (migemo-get-pattern it)))
						splitted))))

  (setq ivy-re-builders-alist '((t . ivy--regex-plus)
								(counsel-web . my:ivy-migemo-re-builder)
								(swiper . my:ivy-migemo-re-builder))))
```

PS:counsel-rgでも機能するようですが私は試していません。counsel-agは駄目でした。
vistaでquartus その6

#概要

vistaでquartusやってみた。
fizzbuzzやってみた。
wait、入れてみた。

#環境

windows vista 32bit
quartus ii v13.0
ep2c5t144ボード

#写真


![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/fb9ca8a6-d417-8a0f-d762-185f8b59e1a9.png)

#サンプルコード


```
module test1(input clk, input rst, output tx);
	localparam NEXT = 4'b0000;
	localparam DONE = 4'b1111;
	localparam WAIT = 4'b1110;
	reg [1:0] mod3;
	reg [2:0] mod5;
	reg [7:0] char;
	reg [3:0] state = NEXT;
	reg [3:0] p_state;
	reg [3:0] dg2 = 0,
		dg1 = 0,
		dg0 = 0;
	reg send = 0;
	reg [23:0] wait_time;
	tx1 tx1(.clk(clk), .rst(rst), .send(send), .data(char), .tx(tx), .ed(ed));
	always @(posedge clk)
	begin
		if (!rst)
		begin
			mod3 <= 2'd0;
			mod5 <= 3'd0;
			state <= NEXT;
			dg2 <= 0;
			dg1 <= 0;
			dg0 <= 0;
		end
		else if (state == NEXT)
		begin
			if (dg2 == 1 && dg1 == 0 && dg0 == 0)
			begin
				state <= DONE;
			end
			else
			begin
				if (dg0 != 4'd9)
				begin
					dg0 <= dg0 + 1'b1;
				end
				else
				begin
					dg0 <= 4'd0;
					if (dg1 != 4'd9)
					begin
						dg1 <= dg1 + 1'b1;
					end
					else
					begin
						dg1 <= 4'd0;
						dg2 <= dg2 + 1'b1;
					end
				end
				mod3 <= (mod3 == 2) ? 0 : mod3 + 1;
				mod5 <= (mod5 == 4) ? 0 : mod5 + 1;
				state <= 1;
			end
		end
		else if (state == WAIT)
		begin
			wait_time <= wait_time - 1;
			if (wait_time == 63000)
			begin
				send <= 0;		
			end
			if (wait_time == 0)
			begin
				state <= p_state;
			end
		end
		else if (state != DONE)
		begin
			p_state <= state + 1;
			state <= WAIT;
			if (mod3 == 0 && mod5 == 0)
			begin
				case (p_state)
				2:
					char <= "F";
				3:
					char <= "I";
				4:
					char <= "Z";
				5:
					char <= "Z";
				6:
					char <= "B";
				7:
					char <= "U";
				8:
					char <= "Z";
				9:
					char <= "Z";
				10:
				begin
					char <= " ";
					p_state <= NEXT;
				end
				endcase
			end
			else if (mod3 == 0)
			begin
				case (p_state)
				2:
					char <= "F";
				3:
					char <= "I";
				4:
					char <= "Z";
				5:
					char <= "Z";
				6:
				begin
					char <= " ";
					p_state <= NEXT;
				end
				endcase
			end
			else if (mod5 == 0)
			begin
				case (p_state)
				2:
					char <= "B";
				3:
					char <= "U";
				4:
					char <= "Z";
				5:
					char <= "Z";
				6:
				begin
					char <= " ";
					p_state <= NEXT;
				end
				endcase
			end
			else
			begin
				case (p_state)
				2:
				begin
					if (dg2 == 0)
					begin
						char <= " ";
					end
					else
					begin
						char <= {4'b0011, dg2[3:0]};
					end
				end
				3:
				begin
					if (dg2 == 0 && dg1 == 0)
					begin
						char <= " ";
					end
					else
					begin
						char <= {4'b0011, dg1[3:0]};
					end
				end
				4:
				begin
					char <= {4'b0011, dg0[3:0]};
				end
				5:
				begin
					char <= " ";
					p_state <= NEXT;
				end
				endcase
			end
			wait_time <= 24'd70000;
			send <= 1;
		end
	end
endmodule
```

以上。
virtual背景のロジックをnpm パッケージ化した件

### はじめに
先日、自分史上初めてnpmのパッケージを作成したので、記録として作業の流れを残しておくものです。
新しい情報は少ないかもしれません。
作成したパッケージは以前紹介したvirtual背景のコンポーネントです。

https://qiita.com/wok/items/962929e63bc98e4033b9

![movie2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365991/8b03b47a-2754-0cea-c341-7373be540680.gif)


もしよかったら使ってやってください。

### 概要
Typescriptを用いた環境でnpmパッケージを作成してpublishするまでの流れです。

### 前提
- npmのアカウントは作っておく。
- githubのアカウントとリポジトリは作っておく。
- 作成したgitリポジトリをクローンして、そのディレクトリに移動している状態。

### 作業の流れ
まずはじめに、npmの環境設定とログインをしておきましょう。

```
$ npm set init.author.name "xxxxxx"
$ npm set init.author.email "xxxx@xxxx.co.jp"
$ npm set init.author.url "https://qiita.com/wok"
$ npm adduser
```

それでは、プロジェクトの初期化を行いpackage.jsonを作成します。

```
$ npm init -y
```

次に必要なモジュールをインストールします。
ここではtypescriptを用いてパッケージを作成するので、typescript用の環境を準備します。
`npx tsc --init`によりtsconfig.jsonが生成されます。

```
$ npm install -D typescript @types/node
$ npx tsc --init
```

パッケージを利用する人が型推論を使えるように、宣言ファイルを生成するようにtsconfig.jsonを変更します。
また、私はデバッグが楽になるようにsource mapも生成しておきます。これは好みです。
出力先は色んな場所で解説されているものに合わせて./distにしておきます。
moduleは用途により変える必要があるようですが、あまり理解できていません。今回はesnextにしています。
esnextにした場合は、moduleResolutionをnodeにしておかないとコンパイルが通らないようです。
（この辺がjsをいまいち好きになれないところなんだよな。そんなに覚えられないよ。）

```
"declaration": true, 
"sourceMap": true,
"outDir": "./dist",
"module": "esnext",
"moduleResolution": "node", 
```

この段階で、ソースコードを書き始めます。（実際はもともとのソースコードをコピペした。）
そしてコンパイル。エラーがなければ下記のようなファイルが出力されていると思います。

```
$ npx tsc
$ ls dist/
index.d.ts  index.js  index.js.map
```

次に、package.jsonを変更してエントリポイントを設定してあげます。
今回の場合は次のような記述になります。

```
  "main": "dist/index.js",
```

併せて、package.jsonにパッケージの情報を記載します。
nameはリポジトリ名が自動で設定されますが、すでに（他の人に）使われている名前はpublish時にエラーとなるので、かぶらないように設定します。なお、かぶったときに表示されるエラーメッセージは意味不明なものなので、ハマると辛いです。たしか、セキュリティが問題、という感じのメッセージだったと思います。

```
  "name": "local-video-effector",
  "author": "xxxxxx <xxxx@xxx.co.jp> (https://qiita.com/wok)",
  "license": "Apache-2.0",
```

ここまでできたら、あとはpublishするまであと少し。
バージョン情報追加します。gitリポジトリと同期させておくと、問題が発生したときに解析が楽になりそうです。

```
npm version patch
git push origin <tag>
```





最後にpublishして完了です。

```
npm publish
```

## 成果物

https://www.npmjs.com/package/local-video-effector

お疲れ様でした。＞自分

次回はここで作成したバーチャル背景のパッケージの使ったデモの開発を説明する予定です。

では、また。
アンケート調査データを分析してみる【第3回：形態素解析】

今回は、テキストマイニングの基本的な手法のひとつである形態素解析（文章を意味のある最小単位に分解し、意味や品詞などを判別する）について、Pythonで試してみました。

データは、以下のアンケート調査より「電子版お薬手帳を使いたい理由」に関する自由回答を使用しました。

「電子版お薬手帳に関する意識調査」を行いました
https://www.nicho.co.jp/corporate/newsrelease/11633/

①まずはライブラリをインポートします。今回はMeCabを使用しました。

```
import MeCab
from MeCab import Tagger
from matplotlib import pyplot as plt
from wordcloud import WordCloud
```

②テキストファイルを読み込み、形態素解析を行うことで文章を品詞別に分解してくれます。

```
df = "survey3.txt"

with open(df, "r", encoding="utf-8") as f:
    opinion = f.read()

tagger = MeCab.Tagger()
parse = tagger.parse(opinion)

print(parse)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265091/8a67f033-ca08-9ecf-5ea1-6f0e90c36d5a.png)

③ワードクラウドにより、よく使われる単語を視覚的に表現できます。今回は名詞を選び、ワードクラウドを作成します。

```
with open('survey3.txt', mode='rt', encoding='utf-8') as fi:
    source_text = fi.read()

tagger = MeCab.Tagger()
tagger.parse('')
node = tagger.parseToNode(source_text)

word_list = []
while node:
    word_type = node.feature.split(',')[0]
    if word_type == '名詞':
        word_list.append(node.surface)
    node = node.next

word_chain = ' '.join(word_list)
```

matplotlibで可視化します。

```
W = WordCloud(width=1280, height=960, background_color='white', colormap='PuBu', font_path='C:\Windows\Fonts\yumin.ttf').generate(word_chain)

plt.imshow(W)
plt.axis('off')
plt.show()
```

出力されたワードクラウドを見ると「便利」や「管理」といった言葉が目立ちます。手帳を電子化することによる利便性の向上や、管理のしやすさがポイントであることが伺えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265091/ac072f90-e14e-ee5b-2b83-7cd5226a9841.png)

今回は基本的な手法として、形態素解析を実施し頻出単語を調べてみました。ここからさらに、共起分析などを行うことでより深い分析が可能になります。
[AWS][CLI][S3]s3コマンド実行したら Credential named assume-role-with-web-identity not found エラー

# 背景

EC2(Amazon Linux)でS3へのログバックアップが機能していなかったので確認したところ
`aws s3 cp`コマンドで実行エラーが発生していました。

```bash
Credential named assume-role-with-web-identity not found
```

# 環境

| # | 説明 |
|:--|:--|
| OS  | Amazon Linux AMI 2018.03  |
| AWS CLI<br>`$ aws --version`の結果  | aws-cli/1.18.83 Python/2.7.18 Linux/4.14.165-103.209.amzn1.x86_64 botocore/1.12.152  |

ちなみに他サーバの以下のバージョンでは動作しています。

- aws-cli/1.16.34 Python/2.7.5 Linux/3.10.0-1062.12.1.el7.x86_64 botocore/1.12.33
- aws-cli/1.16.179 Python/2.7.18 Linux/4.14.165-103.209.amzn1.x86_64 botocore/1.12.169
- aws-cli/2.0.24 Python/3.7.3 Linux/4.14.165-103.209.amzn1.x86_64 botocore/2.0.0dev28

おそらく`botocore`あたりの問題だと思われますが、アップグレードや再インストールしてみても解決できず。

- [Strange "Credential named assume-role-with-web-identity not found." error · Issue #442 · 99designs/aws-vault · GitHub](https://github.com/99designs/aws-vault/issues/442)
- [Deploy with cloudformation fails from awscli >= 1.16.210 · Issue #4384 · aws/aws-cli · GitHub](https://github.com/aws/aws-cli/issues/4384)
- [amazon s3 - how to check awscli and compatible botocore package is installed - Stack Overflow](https://stackoverflow.com/questions/51911075/how-to-check-awscli-and-compatible-botocore-package-is-installed)

結局、AWS CLIのバージョン2が安定版としてリリースされて使用を推奨されているので素直に置き換えてみたところあっさり動作しました。

[Linux で AWS CLI バージョン 2 をインストールする](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2-linux.html)
javascript学習(2020/06/19)

###setTimeoutメソッド
```JavaScript:sample.js
setTimeout(ファンクション, 待ち時間)
```
待ち時間後にファンクションを一度だけ実行するメソッド。待ち時間はミリ秒で設定。ファンクション名の後ろに（）はつけない。

###日時を設定した状態でDateオブジェクトを初期化する
```JavaScript:sample.js
new Date(年,月,日,時,分,秒,ミリ秒);
```

###padStartメソッド
```JavaScript:sample.js
ある文字列.padStart(揃える文字列,埋め合わせ用の文字);
```
ある文字列をそろえる文字数に揃えるメソッド。もし、ある文字列の文字数が揃える文字数織少ない場合は先頭に埋め合わせ用の文字をくっつけて、文字数を揃える。

###Stringオブジェクト
```JavaScript:sample.js
String(数値データ).padStart(2,'0');
```
()内の数値データを文字列データに変換する。


###URLを書き換える(新しいURLを指定する)
```JavaScript:sample.js
location.href = 新しいURL;
```

###cssセレクタで要素を取得する
```JavaScript:sample.js
document.querySelector('CSSセレクタ');
```
document.querySelectorメソッドは（）内に書かれたセレクタにマッチする要素を取得する。
複数の要素にマッチした場合は最初にマッチした要素の一つだけを取得。

###selected属性の追加

```JavaScript:sample.js
document.querySelector('option[value="index.html"]').selected = true;
```

ブール属性であるselected属性をtrueにする(代入する)と、selected属性がオンになる。この場合,
＜option＞タグにselected属性が追加される。


###クッキー(cookie)
クッキーとは、ブラウザに保存される小さなデータのこと。クッキーのデータはブラウザとWebサーバーの間で送受信され、主にECサイトやSNSサイトなそでユーザーのログイン情報を管理するのに使われる。
クッキーは基本的にはブラウザとWebサーバーの間でデータをやり取りするものだが、javascriptからも読み取りと書き込みができる。javascriptでクッキーのデータを扱う場合は
・簡易的なアンケートや確認ボタンなどで過去に回答したことがあるかボタンをクリックしたことがあるかどうか
・そのwebサイトに何度訪問したか
・文字の大きさや背景色、使用言語などを変更できるサイトの場合は、その設定情報
などを保存するのに使われる。


###指定した条件でクッキーを保存するjs-cookieライブラリのメソッド
```JavaScript:sample.js
Cookie.set('クッキー名','値',{expires:　有効期限});
```
js-cookieはオープンソースのライブラリ

###HTML要素の削除
```JavaScript:sample.js
取得した要素.removeChild(削除する要素)；
```
取得した要素に含まれる子要素または孫要素のうち、()内のパラメータで指定した要素を削除する。

###マッチする要素すべての取得
```JavaScript:sample.js
document.querySelectorAll('CSSセレクタ');
```
（）内で指定されたCSSのセレクタにマッチする要素すべてを取得する。
取得した要素は配列になる。

##配列の繰り返し
```JavaScript:sample.js
配列.forEach(function(item, index){
　　処理内容
});
```
パラメータがitemで、これには配列の項目が一つ代入される。つまり、最初の繰り返しでは0番目の項目が代入される。2番目のパラメータはindexで配列の項目のインデックス番号が代入される。


###javascriptでdata-ナンデモ属性も値を読み取る
```JavaScript:sample.js
<タグ名 data-image="img.jpg">

imageの部分は自由に決めることができる
```

data-ナンデモ属性はナンデモの部分を自分で自由に決めてよい属性。
data-ナンデモ属性はjavascriptでその値を読み取るのに利用する。読み取るときは次のようにする。

```JavaScript:sample.js
取得した要素.dataset.ナンデモのところにつけた名前
```

###属性の値を読み取る
```JavaScript:sample.js
取得した要素.属性
```
###属性の値を書き換える
```JavaScript:sample.js
取得した要素.属性 = 値;
```
ブール属性の値を書き換えるには、実際の値ではなくtrueまたはfalseを代入する。


###配列に保存されているデータの項目数を調べる
```JavaScript:sample.js
配列.length
```
NervesにPhoenixを入れてHTTPのGETでLEDをウェブチカ〜Nerves準備編2/3〜

# 概要

NervesにPhoenixを入れてウェブチカできたので備忘録です。

- NervesにPhoenixを入れるとNerves起動時にPhoenixも起動します
- ウェブチカとは、とあるURLにアクセスするとNervesにつけているLEDをチカらせることを言ってます
- 前提としてNervesとPhoenixはインストール済みとします

```shell:fish
❯ mix nerves.new -v
Nerves Bootstrap v1.8.0

❯ mix phx.new -v
Phoenix v1.5.3
```

長編になりそうだったので3部作としました(^^ゞ
前回はPonchoプロジェクト準備編だったので、今回はNerves設定編です。

- [1/3　準備編](https://qiita.com/nishiuchikazuma/items/bfd04b36fb4524d49a59)
- [2/3　Nerves設定編（exineris）](https://qiita.com/nishiuchikazuma/items/175fdc4a646cbbfcc04d)　←いまここ
- [3/3　Phoenix設定・確認編（neosapi）](https://qiita.com/nishiuchikazuma/items/609c3faa4cfa36b77e90)

Nerves起動時にPhoenixが起動するための設定をおこないます。


# 関連ファイル

```
mix.exs
config/config.exs
```


## mix.exs

mix.exsファイルの`deps`に以下の行を追記します。

```elixir:mix.exs
defp deps do
  [
    {:neosapi, path: "../neosapi"},
  ]
end
```

追記した後、`mix deps.get`コマンドを実行します。

```shell:fish
❯ mix deps.get
```


## config/config.exs

config/config.exsファイルに以下の行を追記します。

```elixir:config/config.exs
import_config("../../neosapi/config/config.exs")
import_config("../../neosapi/config/prod.exs")

# config :neosapi, MyAppUiWeb.Endpoint,
config :neosapi, NeosapiWeb.Endpoint,
  code_reloader: false,           # Nerves root filesystem is read-only, so disable the code reloader
  http: [port: 80],
  load_from_system_env: false,    # Use compile-time Mix config instead of runtime environment variables
  server: true,                   # Start the server since we're running in a release instead of through `mix`
  url: [host: "192.168.5.55", port: 80]
```


# おまけ

`mix firmware.gen.script`を実行して`upload.sh`ファイルを作っておくとNervesのファームウェアの更新が楽になるので実行します。

```shell:fish
upload.shを作るコマンド（初回のみ）
❯ mix firmware.gen.script

実行例
❯ ./upload.sh 192.168.5.55
```

# つづく…
- [1/3　準備編](https://qiita.com/nishiuchikazuma/items/bfd04b36fb4524d49a59)
- [2/3　Nerves設定編（exineris）](https://qiita.com/nishiuchikazuma/items/175fdc4a646cbbfcc04d)　←いまここ
- [3/3　Phoenix設定・確認編（neosapi）](https://qiita.com/nishiuchikazuma/items/609c3faa4cfa36b77e90)
【Amazon Linux2】envで環境変数の設定

##環境変数を設定

環境変数を記述する場所を開く

```
[ec2-user@ip-172-31-23-189 <アプリ名>]$ sudo vim /etc/environment
```

environment下に、外部に公開したくない情報を入力。

```environment
DB_DATABASE='アプリで使用するデータベース名（test_productin等）'
DB_USERNAME='root等'
DB_PASSWORD='MySQLのrootユーザーのパスワード'
```

設定した環境変数を反映させるために、一度本番環境をログアウトし入り直す。

```
[ec2-user@ip-172-31-23-189 ~]$ exit
[ec2-user@ip-172-31-23-189 ~]$ ssh -i ファイル名.pem ec2-user@[Elastic IPの値]
```

設定した環境変数がきちんと反映しているか確認する。

```
[ec2-user@ip-172-31-23-189 ~]$ env | grep DB_PASSWORD
DB_PASSWORD='MySQLのrootユーザーのパスワード'
```

アプリケーションのディレクトリに入り、database.ymlを編集する。

```
vi config/database.yml
```
database.ymlの編集

```database.yml
production: 
　database: <%= ENV['DB_DATABASE'] %>
　username: <%= ENV['DB_USERNAME'] %>
　password: <%= ENV['DB_PASSWORD'] %>
```

以上で環境変数の設定は終了です！

◯参考サイト
https://qiita.com/mylevel/items/2ed53ba2b6f29dfea197
Gitでcommitするファイルを自動でフォーマットする

# Gitでcommitするファイルを自動でフォーマットする

コピペ用

```bash
echo "
#\!/bin/sh

cargo fmt

for FILE in \`git diff --staged --name-only\`; do
    git add \$FILE
done
" > pre-commit && \
chmod 755 pre-commit && \
mv pre-commit .git/hooks/pre-commit
```

備忘録です

Git フックを使っています

例として、Rustで書かれたソースコードをフォーマットしていますが、他の言語でも同じようにできます

## 方法

ファイル`pre-commit`を作成する

```sh:pre-commit
#!/bin/sh

cargo fmt

for FILE in `git diff --staged --name-only`; do
    git add $FILE
done
```

実行権限を付与する

```bash
chmod 755 pre-commit
```

ファイルを`.git/hooks/pre-commit`に`mv`する

```bash
mv pre-commit .git/hooks/pre-commit
```

これで毎回コミット直前に`pre-commit`がシェルスクリプトとして実行されるようになるので、`cargo fmt`を行いフォーマットしたあと、すでにステージング済みのファイルの内、変更があったファイルを再び`add`してくれます

そしてその後にコミットが行われます
Rails6でのcocoon

#スクールではrails5で開発を行ってcocoonを使っていて、。同じ方法でrails6でも親子関係のテーブルに複数画像データを保存しようとしたら、追加ボタンが作動しなかった。備忘録として投稿


##参考URL
https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

##原因
そもそもcocooonとjqueryの導入の仕方が変わっていました。
  
  

##rails5では以下のように実装をした
###1.gemのインストール


```Gemfile.
gem 'cocoon'
gem 'jquery-rails'

#画像投稿するためにrefileを使用
gem 'refile', require: 'refile/rails', github: 'manfe/refile'
gem 'refile-mini_magick'
```


###2.app/assets/javascripts/application.js


```application.js
//= require cocoon
//= require jquery
```


###2.親子関係を結びつける

```tour.rb
has_many :tour_photos, dependent: :destroy
accepts_nested_attributes_for :tour_photos, allow_destroy: true
```
####・accepts_nested_attributes_for
一度にまとめてレコードの更新ができるようにできるメソッド。今回の場合だと、Tourレコードを更新すると同時にTourPhotoレコードも一緒に更新できる

####・allow_destroy: true
accepts_nested_attributes_forで関連づけられた子レコードを削除できるようにする



```tour_photo.rb
belongs_to :tour
attachment :image
validates :image, presence: true
```

###2.フォームを作成

```new.html.erb
<%= f.fields_for :tour_photos do |tour_photo| %>
  <%= f.label "写真(５枚選んでください)" %>
  <%= render 'tour_photo_fields', f: tour_photo %>
<% end %>
<div id = "links">
  <%= link_to_add_association '写真を追加',f, :tour_photos %>
</div>
```


```_tour_photo_fields.html.erb
<div class = "nested-fields">
    <%= f.attachment_field :image %>
    <%= link_to_remove_association "写真を削除", f, class: "btn btn-danger remove-photo-btn photo-btn" %>
</div>

```


**以上のようにrails6で同じようにやると、cocoonの追加ボタンが反応してくれなかった**


##rails6でcocoonを使えるようにするために。


###jqueryの導入
```
yarn add jquery 
```


・config/webpack/environment.jsの編集

```environment.js
const { environment } = require('@rails/webpacker')

#追記ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
#追記ここまで

module.exports = environment
```


##cocoonの導入

```
yarn add github:nathanvda/cocoon#c24ba53
```

上記のコマンドでpackage.jsonに以下が追加されていれば、導入できている。

```package.json
"cocoon": "github:nathanvda/cocoon#c24ba53",
```


最後にapp/javascriptspacks/application.jsに追記

```application.js
require('jquery')
import "cocoon";
```



##まとめ
初めてバージョンの違うrailsを触りましたが、できてたことができなかったりするんですね。
あと、application.jsのファイルの場所が変わっていて、最初は亡くなったのかとビビリ散らかしました。

Rails6でwebpackerが標準になったことにより、Railsアプリの開発環境にyarnのインストールが必要になってるみたいのでお気をつけください。
webpackerとはRailsでモダンなJSフレームワークなどを利用するためのものみたいです。これについても勉強しなければ。
aspida でパスに特殊記号を使う

# TL;DR

ディレクトリ名/ファイル名をパーセントエンコードすればよい（`:`->`%3A` など）
コード中では `_3A` のようにアクセスできる
Issue: [aspidajs/aspida#462](https://github.com/aspidajs/aspida/issues/462)

# なにがあったか

とある API を aspida で叩こうとして定義を書き出そうとしましたが、パスに `:` が含まれるため、Windows 環境ではエラーが発生してしまいました。

解決策を求めて Issue を投げたところ、丁寧に調査・回答していただけました！
[aspidajs/aspida#462](https://github.com/aspidajs/aspida/issues/462)

実際にリクエストを投げるときはパーセントエンコードされていて問題ないですから、パスの定義時にエンコードされていても問題ないわけですね。

# aspida はいいぞ！

TypeScript で HTTP リクエストをする際に型安全にしてくれます。めちゃくちゃ便利。
<a href="https://github.com/aspidajs/aspida"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/aspidajs/aspida.png" width="460px"></a>