OmniAICreator/Qiita-1.07M huggingface dataset:
Goのloopclosureについて

ある日、vim-go が loopclosure というワーニングを吐いた。
for文の中で関数を定義して、そのループ内で作った関数を呼ばない場合は、その時のanswerを渡してくれるわけではないみたい。
下のコードは a, bと表示して欲しいのだが、b, bと表示されてしまう。

```
package main

import (
	"fmt"
)

func main() {
	answers := []string{"a", "b"}
	var funcs []func()
	for _, answer := range answers {
		funcs = append(funcs, func() {
			fmt.Println(answer)
		})
	}

	for _, f := range funcs {
		f()
	}
}
# =>
b
b
```

正しくはこう

```
package main

import (
	"fmt"
)

func main() {
	answers := []string{"a", "b"}
	var funcs []func()
	for _, answer := range answers {
++		answer := answer
		funcs = append(funcs, func() {
			fmt.Println(answer)
		})
	}

	for _, f := range funcs {
		f()
	}
}

# =>
a
b
```

並行処理したいときも要注意です。
下のコードだと、b, b が表示されちゃいます。（次のループに行く前にprintされたら別だけど）

```
package main

import (
	"fmt"
	"time"
)

func main() {
	answers := []string{"a", "b"}
	for _, answer := range answers {
		go func() {
			fmt.Println(answer)
		}()
	}

	time.Sleep(time.Second)
}

# =>
b
b
```
yahooニュースのタイトルを取得してセンチメント分析

#yahooニュースのコンテンツを取得

コンテンツの取得については自己責任でお願いします。

```.py
from tqdm import tqdm
import urllib.parse
import time

jp_keyword = ''#検索キーワードを入力
page_num=int()#()の中にトータルページ数を入力

#日本語をURLエンコーディングする
keyword = urllib.parse.quote(jp_keyword)

#題名リスト
title_list=[]
#投稿日リスト
date_list=[]
for i in tqdm(range(1,page_num-1)):
    
    url="https://news.yahoo.co.jp/search/?p="+keyword+"&st=n&ei=UTF-8&b="+str(i)+"1"
    print(url)
    res = requests.get(url)
    #サーバーに負荷をかけないように間を開ける
    time.sleep(2)
    # レスポンスの HTML から BeautifulSoup オブジェクトを作る
    soup = BeautifulSoup(res.content, 'html.parser')

    # title タグの文字列を取得する
    title_text = soup.find_all('h2')
    for x in title_text:
        title_list.append(x.text)
    
    date_text=soup.find_all('span', class_="d")
    for x in date_text:
        date_list.append(x.text)
    
```
#センチメント分析を行う関数を作成
###APIの取得については以下のサイトを読めばわかります。
[クイックスタート: Natural Language API の設定](https://cloud.google.com/natural-language/docs/setup?hl=ja)
[API キーの使用](https://cloud.google.com/docs/authentication/api-keys?hl=ja)

###APIの使用方法

```.py
key=""#APIkeyを入力
#APIのURL
url = 'https://language.googleapis.com/v1/documents:analyzeSentiment?key=' + key

def sentimental(text):
    header = {'Content-Type': 'application/json'}
    body = {
        "document": {
            "type": "PLAIN_TEXT",
            "language": "JA",#言語を指定
            "content": text
        },
        "encodingType": "UTF8"
    }

    #json形式で結果を受け取る。
    response = requests.post(url, headers=header, json=body).json()
    #スコアを返す
    return response["documentSentiment"]["score"]
```

scoreリストにスコアを入れる

```.py
score_list=[]
for word in tqdm(wordlist):
    score_list.append(sentimental(word))
```

```.py
import pandas as pd
df = pd.DataFrame()
df["word"]=title_list
df["date"]=date_list
df["score"]=score_list
```
#データフレームをpickleファイルに保存

```.py
import pickle
with open('sentimental_df.pickle', 'wb') as web:
    pickle.dump(df , web)
```

#データを取り出す

```.py
import pickle
with open('sentimental_df.pickle', 'rb') as web:
    df = pickle.load(web)
    print (df)
```

参考
-
[API キーの使用](https://cloud.google.com/docs/authentication/api-keys?hl=ja)
[PythonでGoogle Natural Language APIを叩いて感情分析](https://to-kei.net/programming/python/google-natural-language-api/)
[Natural Language](https://cloud.google.com/natural-language/?hl=ja)
[開発効率をあげる！Pythonでpickleを使う方法【初心者向け】](https://techacademy.jp/magazine/15826)
[PythonでURLエンコード・デコード（urllib.parse.quote, unquote）
](https://note.nkmk.me/python-urllib-parse-quote-unquote/)
[クイックスタート: Natural Language API の設定](https://cloud.google.com/natural-language/docs/setup?hl=ja)
Azure App Service でエラーを BLOB にロギングする

# Azure App Service でエラーを BLOB にロギングする

\# 以下の記事が書かれた時の版数は .NET Core 3.1 (3.1.201), ASP.NET Core 3.1 (3.1.3), Microsoft.Extensions.Logging.AzureAppServices 3.1.3 となります.

最低限エラーが残っていないと困るので…….

Azure Portal にログインして、該当の Azure App Service にアクセス. 左メニューの 監視 / App Service ログ から「アプリケーション ログ (Blob)」を設定.

nuget で Microsoft.Extensions.Logging.AzureAppServices をインストール. あとは Program.cs に AddAzureWebAppDiagnostics を追加すれば、Startup.cs の UseExceptionHandler の効果で、最低限 unhandled exception がロギングされるようになる.


```csharp:WebApplication1/Program.cs
                 .ConfigureWebHostDefaults(webBuilder =>
                 {
                     webBuilder.UseStartup<Startup>();
-                });
+                })
+                .ConfigureLogging(logging => logging.AddAzureWebAppDiagnostics());
     }
 }
```
静的サイトジェネレーター Hexo でブログを作ってみた

#はじめに
当記事は、ブログを構築してから数週間後に執筆しています。
ところどころ抜けがあったり、後々追記することがあったりするかもしれません。
ご了承ください。

#Hexoってなに？
Hexoとは、node.jsで動く**静的サイトジェネレーター**です。
記事データとテーマファイル（CSSとかのかたまり）とかを用意して実行させると、静的サイトを出力してくれます。

出力されるのは静的サイトなので、GitHubPagesなどで簡単に公開することができます。

## 実際に構築してみる
### 当記事の前提条件
- Ubuntu 20.04 LTS (Windows Subsystem for Linux)
- Gitやnodeなどセットアップ済み

上記環境で解説していきます。

今回は、GitHubPagesでの公開ではなく、Netlifyでデプロイ＆公開する方法で説明します。

### 導入
ブログを置くディレクトリに移動して以下を入力。

```shell
$ npm install -g hexo-cli 
$ hexo init ブログ名 
```

１行目でHexoをインストール。
２行目のコマンドでHexoの「雛形」を生成します。

これで導入は終わりです。

### 雛形を自分用に書き換え
雛形の生成が終わったら`_config.yml`というファイルを開きます。

```yml:_config.yml
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: ねころぐ
subtitle: '猫月あゆむの過去ログ倉庫'
description: '猫月あゆむのブログです。'
keywords:
author: 猫月あゆむ
language: ja
timezone: 'Japan'

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.nekozuki.me
root: /
permalink: :title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
```

こんな感じで書き換えます。
説明分読みながらいろいろ書き換えていってください。

### とりあえず１つ記事を書いてみる
書き換えが終わったら、１つ記事を書いてみましょう。

記事の「雛形」の作成は以下でできます。

```shell
$ hexo new post "記事タイトル"
...省略...
INFO  Created: ../ブログ名/source/_posts/記事タイトル.md
```

ちなみに`post`を抜くと固定ページが出来上がります。

上記で作成されたファイルをテキトーに編集して保存しておきましょう。
ちなみにMarkdownわからない！って人はhtmlタグでもできます。

記事を書いたら、以下のコマンドを入力します。

```shell
$ hexo server
...省略...
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
```

ブラウザで [localhost:4000](http://localhost:4000) にアクセスするとhexoのデフォルトデザインと先ほど書いたブログが表示されると思います。

### GitHubに上げる
GitHubにリポジトリ作って上げてください。

今回、Netlifyを使って公開するので、GitHubPagesの設定などはする必要はありません。

### テーマを変える
[https://hexo.io/themes/](https://hexo.io/themes/) から好きなテーマを選択して`fork`します。

Forkできたら、サブモジュールとして入れます。
入れたらテーマファイル内を色々いじります。

テーマファイルについては、テーマ次第でいろいろとファイルの拡張子が違ったり、configファイルの記述が違ったりとかなりバラバラなので色々調べてみてください。

### Netlifyでデプロイ＆公開する
色々と調整終わったら、とりあえずGitHubに上げましょう。

できたらNetlifyで公開します。

NetlifyにGitHubでログインし、設定します。
設定を終えて、正常にデプロイできればOKです。

ちなみに、ドメインの設定はサイトの Domein settings 内から可能です。

## メリット・デメリット
WordPressなど他のブログサービスと比べて、メリットとデメリットを簡単ですが紹介します。

### メリット
- 自分の好きなデザインに変えられる
- WordPressより細かい変更ができる
- サーバー維持が必要ない

### デメリット
- 導入に多少知識がいる（Wordpressよりは）
- テーマ次第で情報量に格差がある

# おわりに
習うより慣れろ！実際に構築してみるのが一番です。
HexoもNetlifyも無料で使えるサービスなのでぜひ構築してみてください。

ちなみにこちらがHexoで作ったブログです。参考に是非。
https://blog.nekozuki.me
P5.js 日本語リファレンス(blendMode)

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

## blendMode() 

### 説明文

指定したモードに従って表示ウィンドウのピクセルをブレンドします。ソースピクセル(A)を表示ウィンドウ(B)に既にあるピクセルとブレンドするには、次のモードを選択できます。

- BLEND  
色の線形補間：C = A\\*factor + B  
これはデフォルトの描画モードです。
- ADD  
AとBの合計
- DARKEST  
より暗い方の色が適用されます：C = min(A\\*factor, B)。
- LIGHTEST  
より明るい方の色が適用されます。：C = max(A\\*factor, B)。
- DIFFERENCE  
基になる画像から色を差し引きます。
- EXCLUSION  
DIFFERENCEに似ていますが, それほど極端ではありません。
- MULTIPLY  
色を重ねると, 結果は常に暗くなります。
- SCREEN  
反対の乗算。色の反転値を使用します。
- REPLACE  
ピクセルは他のピクセルを完全に置き換え, アルファ(透明度)値を利用しません。
- REMOVE  
アルファ強度がAのピクセルをBから削除します。
- OVERLAY  
MULTIPLYとSCREENのミックス。暗い値を乗算し, 明るい値をスクリーニングします。(2D)
- HARD_LIGHT  
50％を超えるグレーの場合は画面, 低い場合はMULTIPLY 。(2D)
- SOFT_LIGHT  
DARKESTとLIGHTESTの混合。 OVERLAYのように機能しますが, それほど厳しくありません。 (2D)
- DODGE  
明るいトーンを明るくし, コントラストを上げます。暗い部分は無視します。 (2D)
- BURN  
暗い領域が適用され, コントラストが増加し, 明るい部分は無視されます。(2D)
- SUBTRACT  
AとBの残り(3D)

※(2D)は, このブレンドモードが2Dレンダラーでのみ機能することを示します。  
※(3D)は, このブレンドモードがWEBGLレンダラーでのみ機能することを示します。

###  構文

blendMode(mode)

### パラメタ

- mode  
定数：キャンバスに設定するブレンドモード。  
BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, REMOVE, またはSUBTRACTのいずれか

### 例

```javascript
function setup() {
  createCanvas(400, 400);
}

function draw() {
  blendMode(LIGHTEST); // 左のクロス
  strokeWeight(30);
  stroke(80, 150, 255);
  line(25, 25, 75, 75);
  stroke(255, 50, 50);
  line(75, 25, 25, 75);

  blendMode(MULTIPLY); // 中央のクロス
  strokeWeight(30);
  stroke(80, 150, 255);
  line(125, 25, 175, 75);
  stroke(255, 50, 50);
  line(175, 25, 125, 75);

  blendMode(OVERLAY); // 右のクロス
  strokeWeight(30);
  stroke(80, 150, 255);
  line(225, 25, 275, 75);
  stroke(255, 50, 50);
  line(275, 25, 225, 75);
}
```

### 実行結果
![blendMode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/1ab618bf-1272-9116-10cf-b1ff748068ce.png)



### 著作権

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) に従います。
【Java】JUnitでnullかどうかをテストする方法

## 背景
既存のソースコードに対して単体テストを記載するにあたって、タイトルのとおりnullかどうかを検証するテストをする必要がありました。
その過程で学んだことを簡単にですが、まとめました。

なお、使用しているのツールとバージョンはJUnit4(.12)でHamcrestは1.3です。

今回は↓のPrefixAdderにテストを書く想定で記載します。

```java:PrefixAdder.java
public class PrefixAdder {
  public static String execute(String target, String prefix) {
    if (Objects.isNull(target)) {
      return null;
    }
    return prefix + target;
  }
}
```

## 失敗例
最初は普段の感覚で直感的に下記のように書いてみましたが、この書き方ではIDEに警告が出るレベルのコンパイルエラーとなります。

```java:PrefixAdderTest.java
public class PrefixAdderTest {
  @Before
  public void setUp() {
  }

  @Test
  public void returnNullWhenTargetIsNull() {
    String result = PrefixAdder.execute(null, "prefix");
    // ↓コンパイルエラー
    assertThat(result, is(null));
  }
}
```

## 成功例
ではどのように書くのかというと、HamcrestのIsNullクラスのnullValueメソッドを用います。

```java:PrefixAdderTest.java
public class PrefixAdderTest {
  @Before
  public void setUp() {
  }

  @Test
  public void returnNullWhenTargetIsNull() {
    String result = PrefixAdder.execute(null, "prefix");
    assertThat(result, nullValue());
  }
}
```

これで、nullであるかどうかのテストをすることができます。
なお、nullでないことをテストしたい場合は、同じくIsNullクラスのnotNullValueメソッドを用いればOKです。

## まとめ
JUnitで値がnullであるかどうかを検証するテストを描きたい場合はHamcrestのIsNullクラスのnullValueメソッドを用いましょう。
普段の感覚でIsクラスのisメソッドを用いるとコンパイルエラーとなってしまいます。

簡単ではありますが、本記事が少しでもお役に立てれば幸いです。

## 参考
[Hamcrest Tutorial](http://hamcrest.org/JavaHamcrest/tutorial)
[Hamcrest GitHub IsNullクラス](https://github.com/hamcrest/JavaHamcrest/blob/master/hamcrest/src/main/java/org/hamcrest/core/IsNull.java)
Raspberry Pi Imagerの使用方法

##はじめに
　Raspbainを簡単にSDカードにインストールできる「Raspberry Pi Imager」アプリが2020年3月に発表されました。ここでは、Windows版のRaspberry Pi Imager（以下、Imager）の使用方法を紹介します。最初にSDカードをフォーマットして、次にOSをSDカードに書き込む順番で解説します。
##準備するもの
・PC(Windows パソコン)
・Raspberry Pi 3/3B+ 4B
・microSDカード　容量16～64GB、Class10。
・microSDカードリーダー
##ダウンロードとインストール
　「Raspberry Pi Imager」は財団の[公式サイト](https://www.raspberrypi.org/software/)からダウンロードできます。
![download.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631966/477ea789-b57a-caff-a626-14d18209466c.jpeg)


　ダウンロードした**imager.exe**をインストールして、**Imager**を起動すると次の画面が表示されます。
![imager1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631966/603e37d7-4fe3-cddb-6927-13d3276bebe0.png)
##SDカードのフォーマット
　最初に、SDカードをSDカードリーダー等でPCにセットします。「CHOOSE OS」をクリックするとメニューが表示されます。ゴミ箱アイコンの「Erase」をクリックします。
![imager2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631966/94ad5ba9-9e76-a163-792f-922aa1d6f8b5.png)
　次に、「CHOOSE SD CARD」をクリックすると、認識されているメディアが表示されますので、SDカードをクリックします。
![imager3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631966/bc16ce53-8df3-5bd1-869a-f981d10f6d24.png)
　「WRITE」をクリックすると、SDカードのフォーマットされます。
![imager3-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631966/2ec97386-91c7-465d-e71d-01718fd4fb0b.png)
##Raspbian FullをSDカードへの書き込む
「CHOOSE OS」をクリックするとメニューが表示されます。1行目の「Raspbian」にはLibreOffice等のアプリが含まれていません。アプリ等を含めたフルセットをインストールする場合は、２行目の「Raspbian(other)」をクリックします。
![imager3-3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631966/4c18a7f8-856d-1ba6-3424-7df0aba7be4a.png)
　そして「Raspbian Full」をクリックし、「CHOOSE SD CARD」でSDカード、「WRITE」をクリックすると、ダウンロードが始まります。
![imager3-4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631966/3f3d806a-c661-c0c8-df16-e44908c7c64b.png)
　SDカードに書き込みが終わると、次のような終了画面が表示されますので、「CONTINUE」をクリックします。
![imager4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631966/86f149eb-386e-2275-2d19-24a2685c50fa.png)
##OSのセットアップ
　OSを書き込んだSDカードをRaspberry Piに挿入して電源を入れると、OSのセットアップが始まります。以降の手続きは、従来のNOOBSの場合と同じで、対話的にCountry, Password,WiFi等を設定します。
##補足
　SDXC規格のSDカードに対してFAT32フォーマット機能が付いて便利なImagerですが、ダウンロードに時間がかかります。ネットワークモニタの観察から英国にアクセスしているようで、Raspbian Full（約2GB）のダウンロードに相当する時間がかかります。ネットワークが空いているときに作業することをお薦めします。
P5.js 日本語リファレンス(createGraphics)

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

## createGraphics() 

### 説明文

新しい p5.Graphics オブジェクト(グラフィックスバッファオブジェクト)を作成して返します。画面外のグラフィックバッファに描画する必要がある場合はこの関数を使用します。 2つのパラメータは、ピクセル単位で幅と高さを定義します。

### 構文

createGraphics(w, h, [renderer])

### パラメタ

- w  
Number：グラフィックバッファの幅

- h  
Number：グラフィックバッファの高さ

- renderer  
定数：P2D または WEBGL　デフォルトはP2Dです(オプション)

### 戻り値

p5.Graphics：グラフィックバッファ

### 例

```javascript
let pg;
function setup() {
  createCanvas(100, 100);
  // p5.Graphics (Graphics Buffer Object)の生成
  pg = createGraphics(100, 100);
}

function draw() {
  background(200, 250, 0); // 黄緑色
  pg.background(150); // グレー
  pg.noStroke() ;

  // pgの中央に幅50、縦50で円を描画する
  pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);

  // pgの左上座標を(50,50)にしてpgを描画する
  image(pg, 50, 50);
  
  // pgの左上座標を(0,0)、幅50縦50に縮小してpgを描画する
  image(pg, 0, 0, 50, 50);
}
```

### 実行結果
![p5Graphics.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/2792d11d-8fcd-8d38-974f-ff87582e2288.png)




### 著作権

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) に従います。
Xplenty入門 Part2: 変換機能の使い方その１

Xplentyには様々な変換機能があります。
Part1では、その中でも、最も利用するSelectコンポーネントについて紹介したいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/2f0e2049-d792-2592-0c87-5764eb24083e.png)


#Selectコンポーネント
Selectコンポーネントは万能です。SQL的にはSQLのSelectにあたる機能だと考えていただいて差し支えありませんが、それだけではありません。Xplentyの豊富な関数により、JSONやテキストデータなどを分析で利用可能な形式に加工するための非常に便利な変換機能を有しています。

以下は、実際にAPIで取得されたJSONデータから必要なフィールドを個別に取得するためのSelectコンポーネントの例です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/89e4ce2f-7bf7-1b88-3fca-b84bf010e0b3.png)

式エディタを利用すれば、関数を使うことも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/b362d2cc-9762-6dbf-1bc7-e5e649e23bc8.png)


以下では、Selectコンポーネントを利用する具体的なケースについて紹介します。

###1. SQLのSelectにあたる機能
- フィールドの取捨
- フィールド名の変更
- 計算式
- フィールドのデータタイプの変更
- Datetime型のTimezoneの変更など
- CASE文による条件分岐処理(Case When ...)　
<BR>**CASE文では必ずELSE句を含めなければならない（ELSE句がない場合、エラーとなる）**

例1）メールアドレスに「xplenty.com」が含まれる場合はTrueを返す
`CASE
WHEN mail_address matches '.*xplenty.com.*' THEN true 
ELSE 
false 
 END`

例2)キャンペーン名が以下に合致する場合（カラム値の中身は数値でもデータ型がテキスト型の場合は、シングルクォーテーションで囲むようにする）
`CASE 
WHEN  ga_campaign=='jp_facebook' THEN 'JP_FB'
WHEN  ga_campaign=='jp_twitter' AND ga_date>='20200420' THEN 'JP_twitter_camp1'
WHEN  ga_campaign=='jp_twitter' AND ga_date<'20200420' THEN 'JP_twitter_camp2'
ELSE
'Unknown'
END`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/25f6ec12-4041-b972-f3bb-82568787748c.png)
注）イコールの場合は「==」を使用する点に注意。またパターンマッチング時は正規表現を使用。


###2.JSONデータやログデータの操作
JSONのデータ構造をデータベースのテーブル構造のようにフラット化しするための関数のほか、ログデータなどのテキストデータから必要なデータのみを正規表現を使って抽出することが可能です。

###3.Curl Function
Xplentyでは、データベースやRest APIで取得したデータについて、別のRest APIに対してデータを送信することが可能です。詳細は[こちらのブログ](https://qiita.com/Azabu10ban/items/b0b188c9f4c497dee617)をご覧ください。

#最後に
Xplentyでは、現在[無償トライアル](https://try.xplenty.com/jp/)を提供中です。
ぜひこの機会に操作感を試してみてはいかがでしょうか？
P5.js 日本語リファレンス(noCanvas)

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

## noCanvas()

### 説明文

キャンバスを必要としないp5スケッチのデフォルトのキャンバスを削除します

### 構文

noCanvas() 


### 著作権

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 日本語リファレンス(resizeCanvas)

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

## resizeCanvas() 


### 説明文

キャンバスを指定した幅と高さにサイズ変更します。キャンバスがクリアされ、draw() がすぐに呼び出され、スケッチがサイズ変更されたキャンバスに自分自身を再レンダリングできるようになります。

### 構文

resizeCanvas(w, h, [noRedraw])

### パラメタ

- w  
Number：キャンバスの幅

- h  
Number：キャンバスの高さ

- noRedraw  
Boolean：キャンバスをすぐに再描画しない(オプション)

### 例

```javascript
function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  if (frameCount < 200){
    // frameCount に合わせてキャンバスサイズを変更する
    resizeCanvas(frameCount, frameCount);
    background(0, 100, 200);
  }
}
```

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


### 著作権

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) に従います。
Rによるデータサイエンス 6章

#はじめに
本記事は「Rによるデータサイエンス第2班（金 明晢 著,森北出版）」を独学していく上でのメモになります。
ずっとRファイルにコメントアウト形式でメモを書いていたのですが、流石に見づらいのでこちらに記事という見やすい形で残していきます。
Rの基本的な使い方な部分は各手法のなかで学んでいけるだろうということで、具体的な手法に関する章からまとめていこうと思います。

#線形回帰分析
####__そもそも回帰分析とは__
血圧=_f_(年齢)とすると血圧を__目的変数__，年齢を__説明変数__と呼びます。
回帰分析とは説明変数を用いて、目的変数を説明する統計モデルをデータから求めるデータ分析の方法のことです。
また回帰分析に関して説明変数が一つだと__単回帰分析__，複数だと__重回帰分析__と呼びます。
さらにそれらの中でも直線関係でモデル化する回帰分析を__線形回帰分析__，非線形関係でモデル化する回帰分析を__非線形回帰分析__と呼びます。
下に簡単な包括関係を示します。非線形回帰のモデルの形は一例です。
<img width="1058" alt="スクリーンショット 2020-05-12 16.51.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626167/3f4ae210-7b52-115c-2ba4-0ce1ac8fd7d1.png">


線形回帰で用いられる方法として最小二乗法があります。
以下では簡単のため単回帰（一つの目的変数を一つの説明変数で予測）の場合を考えています。
最小二乗法とは、実データ$y_{i}$と統計モデル $\hat{y} = a + bx_{i}$ の差（残差）の二乗和である$S_{e} = \sum(y_{i} - a - bx_{i})^{2}$を最小にするような係数$a$および$b$を求める手法です。偏微分方程式を解くことで解を求めることができます。

####ケーススタディ
(1)関数lm
線形回帰分析の関数lmは以下の通りです。

```
lm(formula,data,weights,subset,na.action)
```
formula:モデルの形式を指定　回帰式y=a+bxにしたい時はy~x
                        回帰式y=bxにしたい時はy~-1+x
data:データセットの名前　用いるデータ形式はデータフレーム
weights:説明変数への重み（初心者は無視）　指定しなければ重みなし
subset:データセットの一部分を用いる際に用いる部分を明記
na.action:欠損値扱いを指定　指定がない時は、欠損値のデータを除いたデータを用いて計算（__欠損値__とはなんらかの理由でデータが取れなかった値のこと）

(2)用いるデータ

```
cars #速度（speed,第一列）とブレーキ後に止まる時間（dist,第二列）のデータ
plot(cars);cor(cars$speed,cars$dist) #散布図とピアソン相関係数（いわゆる相関係数）をプロット
```
carsのデータは省略しますが、plotの結果は以下のようになり、相関係数が0.8068949と求まります。この散布図からspeedとdistの間には相関関係があることがわかります。
<img width="646" alt="スクリーンショット 2020-05-11 15.56.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626167/e7a61932-c0d2-03bd-dff0-eeffa1684c3b.png">

(3)解析の結果

```
cars.lm<-lm(dist~speed,data=cars)
summary(cars.lm)
```
speedを説明変数，distを目的変数として線形回帰解析を行なった結果をcars.lmに代入しています。
またsummary(cars.lm)で解析結果の要約を見ることができます。
<img width="471" alt="スクリーンショット 2020-05-11 16.02.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626167/ab6b7bc8-0a99-cfc5-a8e2-a10d8a6596ff.png">

Residualsは残差を表し、以下のコマンドでも確認することができます。

```
residuals(cars.lm)
```

summaryのCoefficientsは回帰直線$\hat{y}=a + bx_{i}$の回帰係数を表し、
Interceptの行には係数$a$の推測値、標準誤差、$t$値、$p$値が、
speedの行には推測値と関連する統計量が記されています。

関数roundを使うことで小数点を丸め込むことができ、

```
round(coefficients(cars.lm),2) # 小数点第二位までで丸めている
```
この結果を用いると回帰式は dist = -17.58 + 3.93 $\times$ speedと書くことができます。
ASP.NET Core でカスタム 404 エラーページを返す

# ASP.NET Core でカスタム 404 エラーページを返す

\# 以下の記事が書かれた時の版数は .NET Core 3.1 (3.1.201), ASP.NET Core 3.1 (3.1.3) となります.

Visual Studio 2019 の新しいプロジェクトの作成で「ASP.NET Core Web アプリケーション」を選び、ASP.NET Core 3.1 の Web アプリケーション(モデル ビュー コントローラ) を選んで生成されるソースコードだと 404 エラーは、レスポンスボディが無い状態となる. UseStatusCodePagesWithRedirects か UseStatusCodePagesWithReExecute を使うことによってカスタムエラーページを表示することができる.

どちらが良いかだが、

1. UseStatusCodePagesWithRedirects だと 302 レスポンスの後に 200 レスポンスが返るので、本来のステータスコードが消えてしまう.
2. URL 欄に typo して 404 エラーになったときは、ちょちょっと直せば正しく表示できると思うが、UseStatusCodePagesWithRedirects だと 302 リダイレクトされてしまうので URL が変わってしまい、また最初から書き直しになる.

の2点からして、UseStatusCodePagesWithReExecute の一択だと思う. ということで、Startup.cs に UseStatusCodePagesWithReExecute を追加して、あとは HomeController の Error メソッドをチョチョイっと改造して完成.

```csharp:WebApplication1/Controllers/HomeController.cs
         }

         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
-        public IActionResult Error()
+        public IActionResult Error(int? id)
         {
+            if ((id ?? 500) == 404)
+            {
+                return View("Error404");
+            }
             return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
         }
     }
```

```csharp:WebApplication1/Startup.cs

         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
         {
-            if (env.IsDevelopment())
-            {
-                app.UseDeveloperExceptionPage();
-            }
-            else
-            {
-                app.UseExceptionHandler("/Home/Error");
-                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
-                app.UseHsts();
-            }
+            app.UseExceptionHandler("/Home/Error");
+            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+            app.UseHsts();
+            app.UseStatusCodePagesWithReExecute("/Home/Error/{0}");
+
             app.UseHttpsRedirection();
             app.UseStaticFiles();

```

```WebApplication1/Views/Shared/Error404.cshtml
+@{
+    ViewData["Title"] = "Error404";
+}
+
+<h1>カスタム Error404</h1>
+
```
P5.js 日本語リファレンス(createCanvas)

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

## createCanvas() 

### 説明文

スケッチにキャンバス要素を作成してその寸法をピクセル単位で設定します。このメソッドは、セットアップの開始時に一度だけ呼び出す必要があります。スケッチで createCanvas() を複数回呼び出すと非常に予測できない動作が発生します。複数の描画キャンバスが必要な場合は createGraphics を使用できます(デフォルトでは非表示ですが表示できます)

システム変数 width と height は, この関数に渡されるパラメータによって設定されます。 createCanvas() を使用しない場合、ウィンドウのデフォルトサイズは100x100ピクセルになります。

キャンバスを配置するその他の方法については, [キャンバスの配置Wiki](https://github.com/processing/p5.js/wiki/Positioning-your-canvas)ページを参照してください。

### 構文

createCanvas(w, h, [renderer])

### パラメタ

- w  
Number：キャンバスの幅

- h  
Number：キャンバスの高さ

- renderer  
定数：P2D または WEBGL(オプション)

### 戻り値

p5.Renderer

### 例

```javascript
function setup() {
  createCanvas(100, 50);
  background(200, 250, 0); // 黄緑色
  line(0, 0, width, height);
}
```

### 実行結果
![createCanvas.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/75f43471-dd4b-f28d-ac35-79252a1a9619.png)



### 著作権

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) に従います。
PythonでABC167-Dを解く

### はじめに
昨日解けなかったDを解きます

### [ABC167-DTeleporter](https://atcoder.jp/contests/abc167/tasks/abc167_d)

**考えたこと**
$K$が大きいのでどこかでループしていないと解けなさそう→ループ検知しよう。となり、$K$の大きさで場合分けとなります。
実装に必要なのは、訪れているかを判定するlistと訪ずれた順番を記録するlistです。前者のlistは無限ループを防ぎ、後者のlistは後の実装を楽にします。

```python
n, k = map(int,input().split())
a = list(map(int,input().split()))

s = [True] * n #訪れているかを判定するlist
c = [1] #訪ずれた順番を記録するlist
now = 0 #現在地
while s[now]:
    s[now] = False #訪ずれた地点を記録
    now = a[now] - 1
    c.append(now+1)

start_cycle = c.index(c[-1]) #ループに入る点
loop = c[start_cycle:-1] #ループのlist
cycle = len(loop)

if k < start_cycle: #ループまで到達できないK
    print(c[k])
else:
    k -= start_cycle
    k %= cycle
    print(loop[k])

```

### まとめ
落ち着いていればコンテスト中に解けたので悔しい。ではまた。
【Github actions】CypressのUIテストを実行するためのセットアップ

## 概要

Githubで管理しているrepoの特定ブランチにpushをすると、CypressでUIテストが実行されるようになる。

## 説明しないこと

Cypressのインストールなどは割愛させていただきます。

## Cypressのセットアップ

[Setup](https://docs.cypress.io/guides/core-concepts/dashboard-service.html#Setup)に記載があるように進めます。

```sh
$ yarn cypress open
```

### 1. Cypressダッシュボードにアカウントを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19716/84fdccb4-27d3-0bf7-e85f-053b11196d6c.png)

Loginをして、Cypressのダッシュボードにアカウントを作成もしくはログインします。

### 2. Set up Project to Record
Runsタブから、Set up Project to Recordボタンを押して、プロジェクトを作成します。

### 3. cypress.jsonを確認
Cypresss.jsonを確認すると、以下のようにprojectIdが自動で追記されているかを確認します。

```json
{
  "projectId": "プロジェクトIDが入る"
}
```

### 4. レコードキーを確認 & github secretsを設定

レコードキーを確認したら、githunのgithub actionsを設定したいrepoのsettingsページに移動します。

`Add a new secret`をクリックして `CYPRESS_RECORD_KEY`を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19716/77c9456f-47a3-47a2-62c6-8a2703fe142a.png)

## github actionsのワークフローを作成

cypressのgithub actionsを作成したいrepoに以下のファイルを追加します

`.github/workflows/cypress.yml`

cypress.ymlの中身は以下のようにします。

```yml
name: Cypress

on:
  push:
    branches:
      - browser-test

jobs:
  cypress:
    name: cypress
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1

      - name: Cypress run
        uses: cypress-io/github-action@v1
        with:
          record: true
          build: yarn build
          start: yarn start # github actionsのVM内でlocalhostを立ち上げ
          wait-on: 'http://localhost:3000' # localhostが立ち上がるまでwaitさせる
          spec: cypress/integration/sample/hoge_spec.js # テスト対象のファイル
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

今回は`browser-test`というブランチにpushを行うと、cypressのアクションが実行されるようにしました。
上記のポイントとしては、github actionsのVMの中でyarn startして、localhostを立ち上げてそこに対してUIテストを実行させるようにしています。



UIテストが終わると、[Cypressのダッシュボード](https://dashboard.cypress.io/)にテスト結果とビデオを保存するようにしているので、どのような動作がされたかを確認することが出来ます。
P5.js 日本語リファレンス(p5.Graphics)

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

## p5.Graphics

### 説明文
レンダラーの薄いラッパーです。Graphics バッファオブジェクトの作成に使用されます。画面外の Graphics バッファに描画する必要がある場合はこのクラスを使用します。 2つのパラメータは、ピクセル単位で幅と高さを定義します。このクラスのフィールドとメソッドは広範ですが、p5の通常の描画APIを反映しています。

p5.Element を拡張します。

### 構文

new p5.Graphics(w, h, renderer, [pInst])

### パラメタ

- w  
Number：width

- h  
Number：height

- renderer  
Constant：P2D または WEBGL

- pInst  
P5：p5インスタンスへのポインタ(オプション)

### メソッド

- reset()  
グラフィックバッファオブジェクトでは自動的にリセットされない Transform カテゴリや Lights カテゴリの関数によって変更された特定の値をリセットします。 draw() でこれを呼び出すと, 標準のキャンバスの動作がコピーされます。

- remove()  
ページから Graphics オブジェクトを削除し、それに関連付けられているリソースをすべて解放します。

### 例

```javascript
let pg;
function setup() {
  createCanvas(100, 100);
  // p5.Graphics (Graphics Buffer Object)の生成
  pg = createGraphics(100, 100);
}

function draw() {
  background(200, 250, 0); // 黄緑色
  pg.background(150); // グレー
  pg.noStroke() ;

  // pgの中央に幅50、縦50で円を描画する
  pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);

  // pgの左上座標を(50,50)にしてpgを描画する
  image(pg, 50, 50);
  
  // pgの左上座標を(0,0)、幅50縦50に縮小してpgを描画する
  image(pg, 0, 0, 50, 50);
}
```

### 実行結果
![p5Graphics.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/2792d11d-8fcd-8d38-974f-ff87582e2288.png)


### 著作権

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) に従います。
electron-builderでCSC_LINKに適用したBASE64エンコード済みの証明書が使えない場合の対処

# 目的
BASE64変換したコードサイニング証明書を利用して、
electron-builderでビルドしたElectronアプリをサイニングしようとした。
*https://www.electron.build/code-signing*

# バージョン情報
electron-builder: 22.6.0

# 発生した現象
`CSC_LINK` 定数にBASE64文字列を指定しているにも関わらずURLと判定されてエラーになる。
※ `CSC_LINK` をWindows向けビルドに利用しているため `WIN_CSC_LINK` と表示されている

```
InvalidConfigurationError: Env WIN_CSC_LINK is not correct, cannot resolve: *** doesn't exist
```

# 解決方法
* **BASE64文字列から改行コードを除去する（ワンライナーにする）**
* **BASE64文字列の末尾に「=」を付ける**

https://github.com/electron-userland/electron-builder/blob/4e454f8b4390a4bcc38a30f065e0ed1eba2acee9/packages/app-builder-lib/src/codeSign/codesign.ts#L25
AWS RDS Aurora MySQLの4種類の構成の比較

MultiMasterが東京リージョンに来たので、MultiMasterを含む4種類の構成を比較してみました。

ちなみにDB作成時にはこんな↓選択肢が出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21577/e19b3e25-384a-a294-1a64-38a31388ef9a.png)

比較表では以下のように表記することにします。

- 1つのライターと複数のリーダー → **Provisioned**
- 1つのライターと複数のリーダー - 並行クエリ → **ParallelQuery**
- 複数のライター → **MultiMaster**
- サーバーレス → **Serverless**

## 比較表

|項目|Provisioned|ParallelQuery|MultiMaster|Serverless|
|---|---|---|---|---|
|特徴|-|並行クエリ実行可能|Writerが複数|スペックをオンラインで切替可能|
|MySQLバージョン|5.6/5.7|5.6|5.6|5.6|
|フェイルオーバー時間|小|小|無し|大(キャパシティ変更では<br>フェイルオーバーしない)|
|Stop可否|○|○|×|○(自動停止と再開あり)|
|パフォーマンスインサイト|○(t2,t3除く)|×|×|×|
|インスタンスタイプ|t2, t3, r3, r4, r5|r3, r4, r5|r4|無し|

## 参考文献

- [Amazon Aurora マルチマスタークラスターが東京リージョンに対応しました(Amazon Web Services ブログ)](https://aws.amazon.com/jp/blogs/news/amazon-aurora-multi-muster-tokyo/)
- [Amazon Aurora MySQL の並列クエリの操作(AWS ドキュメント)](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/aurora-mysql-parallel-query.html)
- [Aurora Serverless の仕組み(AWS ドキュメント)](https://docs.aws.amazon.com/ja_jp/AmazonRDS/latest/AuroraUserGuide/aurora-serverless.how-it-works.html)
aiohttp Server でレスポンスを返した後に処理を続ける方法

aiohttp で Web サーバを作っていて、HTTP リクエストを受けたら少し重い処理を走らせたい [^job] というとき、そのまま処理を走らせると HTTP レスポンスを返すのが遅くなってしまい、クライアント側でタイムアウトエラーとして処理されてしまうかもしれない。処理結果は返す必要がないとして、いったん HTTP レスポンスを返して HTTP 通信を終わらせて、そのあとで少し重い処理を実行したいときはどうすればいいか。

## <del>`write_eof` する方法</del>
**この方法はよくないことがわかったので、追記を参照。**

``` python
from asyncio import sleep
from aiohttp import web


async def handler(request):
    response = web.Response()
    await response.prepare(request)
    await response.write_eof()

    await sleep(1)  # レスポンスを返したあとの処理


app = web.Application()
app.router.add_get('/', handler)

if __name__ == '__main__':
    web.run_app(app)
```

<del>
Response オブジェクトを作成して `prepare` して `write_eof` すればよい。

Response オブジェクトの作成時に何も指定しなかった場合、HTTP ステータスコードは 200 が返る。
</del>

## [2020.06 追記] ダメだった
上記方法だと、keep-alive で一定時間コネクションが維持される場合ではたまたま問題なく動いてしまうので気づかなかったが、基本的にうまく動かない。

レスポンスヘッダに `Connection: close` を追加して keep-alive を無効にしてみると、 `write_eof()` した時点で以降の非同期処理が実行されないことがわかる。

どうやらクライアントとのコネクションが切断された時点でリクエストハンドラの処理はそこで中止されてしまうようだ。(エラーメッセージも何も出ないので調べるのが大変だった)

参考： https://github.com/aio-libs/aiohttp/issues/4773

解決策としては、[aiojobs](https://github.com/aio-libs/aiojobs) を使った方が良さそう。

``` python
from asyncio import sleep
from aiohttp import web
import aiojobs.aiohttp as aiojobs


async def job():
    """レスポンスを返した後に実行したい処理"""
    await sleep(1)


async def handler(request):
    await aiojobs.spawn(request, job())
    return web.Response(text='ok')


app = web.Application()
app.router.add_get('/', handler)

aiojobs.setup(app)

if __name__ == '__main__':
    web.run_app(app)
```
odoo を migrate したら static file が読めなくなったり cache hit しなくなったりした場合

odoo を migrate したり、 http だったドメインに ssl を導入したりすると、ブラウザで static file の読み込みに失敗してスカスカなページを見せられたりします。
あとは下記のようなキャッシュミスが起きたりします。

```
web_1    | Traceback (most recent call last):
web_1    |   File "/usr/lib/python3/dist-packages/odoo/fields.py", line 996, in __get__
web_1    |     value = env.cache.get(record, self)
web_1    |   File "/usr/lib/python3/dist-packages/odoo/api.py", line 751, in get
web_1    |     raise CacheMiss(record, field)
web_1    | odoo.exceptions.CacheMiss: ('ir.attachment(333,).datas', None)
web_1    |
web_1    | During handling of the above exception, another exception occurred:
web_1    |
web_1    | Traceback (most recent call last):
web_1    |   File "/usr/lib/python3/dist-packages/odoo/addons/base/models/ir_attachment.py", line 103, in _file_read
web_1    |     with open(full_path,'rb') as fd:
web_1    | FileNotFoundError: [Errno 2] No such file or directory: '/var/lib/odoo/filestore/test1/2f/2f7028932480cdcb927f83b0165d577669e620fa'
web_1    | 2020-05-11 05:28:15,085 21 INFO test1 werkzeug: 172.21.0.4 - - [11/May/2020 05:28:15] "GET /web/image/website/1/favicon?unique=0ce65e3 HTTP/1.0" 200 - 8 0.003 0.010
```

そんなときは DB からキャッシュに関するデータを削除してキャッシュを構築しなおしましょう。

static file が読めないだけならこれでいけるはず。

```
DELETE FROM ir_attachment WHERE url LIKE '/web/content/%';
```

上記ログのように filestore/hogehoge とか言われてたらこれだけでは治らないので思いっきってまとめてキャッシュ関連のデータを消してしまいます。

```
DELETE FROM ir_attachment;
```

ブラウザのログもサーバのログも綺麗になれば成功です。
Golang Sliceに構造体をブチ込む

```
package main

import (
    "fmt"
)

type Person struct {
    Name string
    Age int
}

func Persons() []Person {
    persons := []Person{
        Person{"Aaron", 30},
        Person{"Harold	", 20},
        Person{"Ted", 5},
    }
    return persons
}

func main() {
    persons := Persons()
    for _, person := range persons {
      fmt.Printf("%s: %d\n",person.Name, person.Age)
    }
}
```
【Jest】最速セットアップ

jestをインストールし、テストファイルを作成します

```sh
yarn add jest -D
mkdir test
touch test/sample.test.js
```

---
nodeにはes6の記法を用いることができないので、
nodeでjestを実行するために、babelをトランスパイラーとして設定します。

```js:~/babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', { modules: false }]
  ],
  env: {
    test: {
      presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }]
      ]
    }
  }
}
```
---
jestのテスト対象ファイル拡張子にjsを指定します。

```js:~/jest.config.js
module.exports = {
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest'
  },
  moduleFileExtensions: [
    'js'
  ]
}
```
---
あとはtestを記述し実行するだけです。

```sh
npx jest
```
users/sign_inを指定してもリダイレクトしてしまう

結論)
すでにログインしている状態のためでした。
その際は、下記のようなエラーが出るようです。
<img width="1185" alt="loginzumi.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635167/2d0f49f2-d204-d061-3615-6dbca6a9b739.png">

「require_no_authentification」がポイントです！

そのため、ログアウトしてからであればリダイレクトされることも内容です。
まだログアウトボタンなどを実装していないからこその現象でした。
【学習メモ】Djangoでのアプリの作り方〜仮想環境からgithubにプッシュするまで〜


djangoを使っているが最初の作り方が覚えきれずまとまったメモが欲しいと思いまとめてみる。



#ターミナルを開きmkdirで新しいフォルダを作る


```
cd Desktop
mkdir myblog
cd ec
```
デスクトップのフォルダから先ほど作ったmyblogのフォルダを開く。


#仮想環境を作っていく


installでpipenvをインストールし、shellで仮想環境を開く

```
pipenv install
pipenv shell
```

#仮想環境内にDjangoをインストールする。


```
pipenv install django

```

#開発用のパッケージをインストールする


* --dev :サーバー側にアップロードする際に以下の二つは必要ないのでサーバー側のパソコンでインストールさせないためにつけている。

* autopep8 :PEP8に自動でフォーマットしてくれる。

* flake8 :pyflakes, pycodestyle, mccabeの3つのツールがまとめてあり、pycodestyleはpep8になってになっているか確認するもの。

```
pipenv　install --dev autopep8 flake8

```

#プロジェクトを作る


* config :設定関連のファイルの入ったディレクトリということ
* . :カレントディレクトリ(自分が今いるところ)にプロジェクトを作成すること

```
django-admin startproject config .

```

#settings.pyを変更する


```Django
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'
```

#マイグレートする


* migrate :モデルをデータベースに反映させる

```
python manage.py migrate

```

#gitに追加する


* init: gitを起動

* add . :gitに全て追加する

* commit :保存　-mでメッセージを付け足せる

```
git init
git add .
git commit -m "firstcommit"
```

#githubにpushできるようにする


githubの自分のページからnew repositoryを開き、Repository nameをつけcreateする。
その後のページで出てくるurlをコピーする。
ターミナルで

```
git remote add origin (コピーしたurl)
git push origin master

```



全てまとめると長くなってしまうので、今回はここまでにします。
Railsにおけるルーティング

#ルーティングとは
クライアント（ブラウザ）からのアクセス（URLとHTTPメソッド）を受けて適切なコントローラのアクションへと誘導する仕組み。

#ルーティングの役割

次に挙げる本質的に異なる**2つの構造の連携**を担っている。

１.URLやHTTPメソッドで表現する**インターフェイスとしての構造**
２.Rubyのプログラミング上の合理性で構造化した**コントローラ・アクションの構造**

それにもかかわらず``route.rb``には簡素にしか書かれていないので、中身が良くわからず難しく感じる。

#ルートを構成する要素
ルーティングはリクエストをアクションへと案内する「ルート」の集まりだと言える。

その「ルート」を構成するのは次の５つである。
・HTTPメソッド（GET,POST,PATCH,PUT,DELETE）
・URLパターン（/tasks, /tasks/:id）
・URLパターンの名前（new_task, tasks）
・コントローラ（tasks）
・アクション（index）

#ルートの役割
二つの役割がある。
1.HTTPメソッドとURLからアクションを呼び出す（ルーティングと同じ）
2.URLから、URLを簡単に生成するためのヘルパーメソッド（tasks_pathなど）を生成する


#ルート定義の例

```/config/route.rb
get '/login', to: 'sessions#new'
```
意味：
``GET``メソッドで、``'/login'``というURLに対してリクエストがきたら、``SessionController``の``new``アクションを呼び出す。
また、``'/login'``というURLを``login_path``というヘルパーメソッドで生成できるようにする。

URLパターン名をはっきりと定義している場所はないが、URLの内容からRailsが自動的に``login``がURLパターン名だと推定している。
SwiftUIで画面の左上にビューを配置する方法

```swift

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        VStack{
            HStack {
            Text("左上!")
                Spacer()
            }
            
                Spacer()
        }
        
    }

}

PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())
```

`Spacer()`を下と右に配置すれば良い。
【開発ログ⑥】メインとなるビューを作りました。

# 前提について
はじめまして、 プログラミングスクールに通ういりふねと申します。この記事は、スクールの課題である個人アプリの開発の記録を書くことで、自身のアウトプットに利用しています。もし、読んでいただけた方がいましたら、フィードバックをしていただけたら嬉しいです。

開発するのは「有給休暇管理ツール」です。仕様は過去記事をどうぞ。

アプリはデプロイまで行いますが、サービスとして提供するものではありません。あくまでも自学習の一環ですので、ご理解下さい。では本題へどうぞ。

# 今回実施する内容
前回までで、rootパスでアクセスし、「index.html.haml」を表示させることができました。今回は、この「index.html.haml」を編集し、メインのページを完成させます。作成するページは以下の通りです。
- ログイン中、常に表示されている左カラム
- メインページの有給休暇一覧表（内容は仮データ）
- メインページの有給休暇消化ログ

# 有給休暇一覧完成!!
まずは、メインページ部分です。左のカラムは、上部が社員の検索を行う検索窓、虫眼鏡のマークにsubmitを設定しています。それより下は、ユーザーが登録した支社が一覧で表示されている箇所と、消化ログや関連サイトのリンクなどがあります。
右側がメイン画面。header部分は、支社や社員の登録、有給休暇の消化登録をする部分になります。それより下は、有給休暇一覧となっております。１枚目の写真は、ほぼ全画面表示した状態。この状態ならば、表を一覧することができます。
<img width="1329" alt="スクリーンショット 2020-05-10 20.12.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614723/2fb54ff9-7c10-0e03-373a-10fdd1d4006f.png">

# 続いて消化ログ
続いては、有給休暇の消化履歴を確認する消化ログ（履歴）です。　登録された順番に全データを表示しています。有給休暇一覧だけでは、いつごろ、何日間、どんな理由で有休を使用したかがわからなくなるので、作成することにしました。
<img width="1408" alt="スクリーンショット 2020-05-10 20.59.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614723/c2521659-9d28-21f7-1d94-ca1ec723f53b.png">

# ウインドウを縮めても表を崩したくない
メインの有給休暇一覧を作成していて、気づいたのですが、ウインドウを縮めると連動して文字が折り返してしまいます。ウインドウを縮めながら作業したい方もいると思うので、連動して縮小せず、横スクロールできるように設定することにしました。
参考にさせていただいた記事は、[こちら](http://bashalog.c-brains.jp/18/04/03-110000.php)です。

①tableを囲うdivに「overflow: auto;」を追加する
　これで、ウインドウを小さくしたときに自動的にスクロールバーが出てきます。

```css:_main.scss
  &__body {
    ~ 省略 ~
    overflow: auto;
  }
```

②trとｔｈタグに表の幅を固定する記述を追加する
　trタグとthタグに「width」と「min-width」を設定します。幅を表す数値（今回は120px）は、同じ値を入れておきます。これで、基本的な実装は終了です。


```css:_main.scss
tr {
  width: 120px;
  min-width: 120px;

  th {
    width: 120px;
    min-width: 120px;
    ~ 省略 ~
  }
}
```

③一部のセルの幅を変える
　上記の設定を行ってうまくいったのですが、名前や入社日が入るセルの幅に合わせて設定したので、残日数などのセルの幅が短くて良いものも無駄に長くなってしまいました。そこで、別途、セルの幅を短く固定していきます。

まずは、「_main.html.haml」内のセルの幅を短くしたいthタグにidを付与しました。

```haml:_main.html.haml
.main__body
  %table 
    %tr
      %th 氏名
      %th 入社日
      %th{id: "short"}
        付与日
     ~ 中略 ~
    %tr
      %th サンプル社員1
      %th 2019/04/01
      %th{id: "short"}
        10/01

```


次にcssの編集を行います。先程、html.hamlファイルに設定したidで、同じように幅を固定する記述を加えていきます。


```css:_main.scss
tr {
  width: 120px;
  min-width: 120px;

  th {
    width: 120px;
    min-width: 120px;
    ~ 省略 ~
    #short {
      width: 80px;
      min-width: 80px;
    }
  }
}
```

# ウインドウを縮めた結果
ウインドウを半分の大きさに縮めた結果、表は崩れずに横スクロールバーが表示されました。氏名と入社日以外のセルも80pxで表示されているようです。
<img width="702" alt="スクリーンショット 2020-05-10 20.13.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614723/1c6bb5d8-7b97-5776-2ebe-ff6a64fdbf51.png">

# 今後実装したいこと
今後は、１行目や１列目を固定して、常にカラムや氏名が表示されている状態にしたいと考えております。これを行うためには、現在仮で入れているデータをなくして、正しくデータベースから表示されるようにしなければなりません。このまま仮データを無駄に増やしても後で削除するのが大変だからです。
そこで、メインページの作成は、ここまでとして次回からは、また機能の追加などを行っていきたいと思います。

# 今日の積み上げ
今回の記事で、初めてコードを表示させました。思ったよりも簡単でした。
参考にさせていただいた記事は、[こちら](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)です。
Next.jsをTypeScriptと使う

https://qiita.com/oubakiou/items/da7b2da3843fc20e5c06

10.2.1以降であれば上記参照

---

Next.js9.4.0を対象とし、npmは既に利用できるものとする。

https://nextjs.org/docs/basic-features/typescript

```shell
npm init next-app
✔ What is your project named? … hoge
✔ Pick a template › Default starter app
```
プロジェクト名を入力。テンプレートはデフォルトを選択。

```shell
cd hoge
touch tsconfig.json
npm install --save-dev typescript @types/react @types/node
npm run dev

We detected TypeScript in your project and created a tsconfig.json file for you.
```
作られたプロジェクト名のディレクトリへ移動して空のtsconfig.jsonを作成。ts利用に必要なパッケージをインストールした上で起動する事でtsconfig.jsonが自動的に構成(ただしstrict=false)される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47823/bc29882c-99df-68ed-d828-d153d4e65b34.png)

続けてpages配下に.jsで雛形ファイルが作成されているので.tsxへ拡張子を変更する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47823/ef54b4d9-8328-4ae2-0a40-ec980772a945.png)

最後にブラウザからlocalhost:3000にアクセスしてページが表示されていれば成功。
python3とFlaskでフロント実装の動作確認用APIサーバ構築


###概要
フロントの動作確認様に、WebAPIサーバをpython3で構築する。
その備考録


###前提
インストール済み

```
>$ python3 --version
Python 3.7.7
```

###Flaskのインストール

```
$ python3 -m pip install Flask
Collecting Flask
  Downloading Flask-1.1.2-py2.py3-none-any.whl (94 kB)
     |████████████████████████████████| 94 kB 792 kB/s 
Collecting Jinja2>=2.10.1
  Downloading Jinja2-2.11.2-py2.py3-none-any.whl (125 kB)
     |████████████████████████████████| 125 kB 6.5 MB/s 
Collecting Werkzeug>=0.15
  Downloading Werkzeug-1.0.1-py2.py3-none-any.whl (298 kB)
     |████████████████████████████████| 298 kB 3.8 MB/s 
Collecting itsdangerous>=0.24
  Downloading itsdangerous-1.1.0-py2.py3-none-any.whl (16 kB)
Collecting click>=5.1
  Downloading click-7.1.2-py2.py3-none-any.whl (82 kB)
     |████████████████████████████████| 82 kB 778 kB/s 
Collecting MarkupSafe>=0.23
  Downloading MarkupSafe-1.1.1-cp37-cp37m-macosx_10_6_intel.whl (18 kB)
Installing collected packages: MarkupSafe, Jinja2, Werkzeug, itsdangerous, click, Flask
Successfully installed Flask-1.1.2 Jinja2-2.11.2 MarkupSafe-1.1.1 Werkzeug-1.0.1 click-7.1.2 itsdangerous-1.1.0
```

###バージョン確認

```
>$ python3
>>> import flask
>>> flask.__version__
'1.1.2'
```

###ソース

```python:hello.py
from flask import Flask
from flask import jsonify

app = Flask(__name__)

@app.route('/')
def hello():
  return jsonify({"message": "Hello"})

@app.route('/good')
def good():
  return jsonify({"message": "Good"})

if __name__ == "__main__":
    app.run(debug=True)
```

```
$ python3 hello.py
```

###フロントからリクエストして確認
クロームの開発者ツール上からでも確認できる。
コメントアウトした変数urlを切り替えて実行すると、
レスポンスの中身が変わることがわかる。

```javascript
    //let url = 'http://127.0.0.1:5000/';
    let url = 'http://127.0.0.1:5000/good';
    let req = new XMLHttpRequest();
    req.open('GET', url);
    req.onreadystatechange = function() {
      if (req.readyState == 4 && req.status == 200) {
        console.log("XMLHttpRequest");
        //let data = eval('(' + req.responseText + ')');
        console.log(req.responseText);
        alert(JSON.parse(req.responseText).message);
      }
    };
    req.send(null); 
```



###参考
[Pythonの標準ライブラリでさくっとAPIサーバとWebサーバを立ち上げる](https://cloudpack.media/44251)
[1分でFlask!インストールからHello World出力](https://www.tech-tech.xyz/flask.html)
[Python フレームワーク Flaskのバージョンの確認方法](https://leben.mobi/blog/flask_version/python/)
[はじめての Flask #5 ~JSONを返すWebAPIを書こう~](https://qiita.com/nagataaaas/items/24e68a9c736aec31948e)
[jsonifyが定義されていない - 内部サーバーエラー
](https://stackoverrun.com/ja/q/2842164)[POST送信されたパラメータをFlaskで受けるときにrequest has no attribute 'form'（ついでにFlaskのスタートアップガイド）](https://qiita.com/bowtin/items/194c1f3b1211d7892ab8)
[Flask-Response Objects](https://flask.palletsprojects.com/en/1.1.x/api/?highlight=request#flask.request)
Excel VBAでリモート会議に使用するExcelシートで、説明している行を強調表示してみた

#Excel VBAでリモート会議に使用するExcelシートで、説明している行を強調表示してみた

Excelでいま説明しているところを、キーボードやマウスで移動して、見ている人に今どこを説明しているかを示すためのマクロを試しに作成。

ここでは、セルA～C列に入力されているタイトルをクリックした行だけ赤いボールド文字で表示するようにしてみた。
![Book1 - Excel 2020_05_11 14_33_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634486/e0c0cbb9-33e0-229a-3981-909ea9e9971f.png)

```ExcelVBA:
Dim maeCurRow

Private Sub Worksheet_SelectionChange(ByVal Target As Range)
  
    If IsEmpty(maeCurRow) Then maeCurRow = 1

    With Range("$A$" & Target.Row & ":$C$" & Target.Row).Font
        .Bold = True
        .Color = -16776961
    End With
    
    If maeCurRow <> Target.Row Then
        maeRange = "$A$" & maeCurRow & ":$C$" & maeCurRow
        With Range(maeRange).Font
            .ColorIndex = xlAutomatic
            .Bold = False
        End With
    End If

    maeCurRow = Target.Row

End Sub
```
データ可視化ツール(Metabase, Redash, Superset)の比較メモ

データをグラフで見たり、絞り込んで個々のレコードを見たりする目的のデータ可視化ツールとして Metabase, Redash, Supersetの3つを軽く調べました。どれも本格的に使う前にちょっと触っただけ、あるいは使ったことある人からの伝聞情報です。感覚的な感想に留まりますが、メモとして残しておきます。

Redashにでしか対応していないデータソースや機能が必須という場合を除いて、Metabaseが全体的によさそうな印象です。

Metabase

- JVMだけ準備すれば簡単に起動できる
- Clojureで実装されている（読める人が少ないという意味では懸念点）
- SQLの知識は不要
- 個々のレコードの表示も便利
- 棒グラフの棒をクリックするとレコード表示に遷移する
- 見た目がきれい
- グラフごとにURLが付与されるので社内共有などが楽
- 「無料なのにここまでできるのか」

Redash

- ネット上に知見は多い
- 対応しているデータソースの種類は多い
- 依存しているソフトウェアやビルドが必要だったり起動までに大変。運用も大変かも
- ダッシュボードは寂しい
- SQLを書く必要がある
- SQLの中にパラメータを入れる仕組みがあって、値を入れるだけで簡単にグラフ化できる
- 「無料だからこんなもんか」

Superset

- Metabase並に簡単に試すことができる
- 自由度は高い
- 不具合なのかハマることが多い印象
- インターフェースは癖が強い

Googleトレンドを見ると、Redash(赤)のほうが古くからメジャーで、Superset(黄)は伸び悩み、Metabase(青)はあとから知られてきたツールのようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490207/23acd303-560b-4a45-0560-c409b4f23cbe.png)
Docker Build kitでroot以外でsecret/ssh keyを使う

# はじめに
DockerでPrivateリポジトリをCloneするときなど結構手間取りますよね。
Docker 18.09から導入されているDocker Build kitを使うといいというのは知っていたのですがUserを切り替えるとうまく行きませんでした。
その解決方法を書いていきます。

# 参考文献
[moby/buildkit リポジトリ](https://github.com/moby/buildkit/blob/master/frontend/dockerfile/docs/experimental.md)に詳しく書いてあります。これ読めば大丈夫

# 設定例
## 前提条件
  - github.comにSSH接続できる公開鍵がある
  - ホスト側で下記コマンド実行例のような出力を得られる
  
    ```
    $ ssh git@github.com
    # 出力例
    PTY allocation request failed on channel 0
    Hi (User名)! You've successfully authenticated, but GitHub does not provide shell access.
    Connection to github.com closed.
    ```
  - Docker CE > 18.09
  - User: test(uid=1000,gid=1000)
## Dockerfile
ポイントとしては、ファイル先頭の`syntax`を記述する必要があること、`--mount=type=ssh,uid=100,gid=100`のようにUserのIDとGIDを記述する必要があることです。記述しない場合はUID=0,GID=0のrootのみしか使えません。

```
# syntax = docker/dockerfile-upstream:master-experimental
# 行頭にsyntaxが必要、1.0.2以降であれば使えるようです
~略~
RUN mkdir -p -m 0600 ~/.ssh && \
    ssh-keyscan github.com >> ~/.ssh/known_hosts
RUN --mount=type=ssh,uid=1000,gid=1000 cd $HOME_DIR && git clone git@github.com:$USER/$REPOSITORY.git

```
## Build例
`DOCKER_BUILDKIT=1`を宣言し、`--ssh`を宣言してbuildする必要があります。

```
$ DOCKER_BUILDKIT=1 docker build --ssh default=~/.ssh/id_rsa . 
```

# おわりに
以上で、プライベートリポジトリを`git clone`出来るようになるはずです。
【Ruby】インスタンスメソッドからクラスメソッドへ変更


#はじめに
本来、クラスメソッドとして定義するべき所をインスタンスメソッドで定義してしまっていたので、変更を行った。

#インスタンスメソッド（例）

・インスタンスメソッドの定義
app/models/hoge_fuga.rb

```ruby
class HogeFuga
  def method_name
    puts "インスタンスメソッドが呼び出される"
  end
end
```


・インスタンスメソッドの呼び出し
app/controllers/piyo_controller.rb

```ruby
class PiyoController < ApplicationController
  def piyo
    hogefuga = new.HogeFuga # インスタンス生成
    hogefuga.method_name #=> "インスタンスメソッドが呼び出される"
  end
end
```

インスタンスメソッドの場合は、
「newメソッド」で、インスタンスを作ってから、
`インスタンス名.method_name`ですね。



#クラスメソッド（例）
・クラスメソッドの定義

app/models/hoge_fuga.rb

```ruby
class HogeFuga
  def self.method_name
    puts "クラスメソッドが呼び出される"
  end
end
```
クラスメソッドの定義はメソッド名の前に「self.」を付けます

・クラスメソッドの呼び出し
app/controllers/piyo_controller.rb

```ruby
class PiyoController < ApplicationController
  def piyo
    HogeFuga.method_name #=> "クラスメソッドが呼び出される"
  end
end
```


#クラスメソッドにすべき場合

- まず、initializeメソッドで初期化を行う処理が含まれていない場合。

##initializeメソッド（例）
```ruby
class Phone
  attr_accessor :name, :version

  def initialize(name, version)
    self.name = name
    self.version = version
  end

  def suggestion
    puts "#{self.name}#{self.version}を使ってみませんか？"
  end
end

phone = Phone.new("iPhone", "X")
phone.suggestion
#=> iPhoneXを使ってみませんか？
```

このような初期化の処理がない場合に加えて、

- インスタンスごとに固有の処理が行われない場合

上記のような場合は、インスタンスを生み出す必要のあるクラスではないと判断してクラスメソッドを使った方が、分かりやすい。

逆にそれ以外は、基本的にインスタンスメソッドを使えないか、ということを先に考えた方が良い。

また、クラスメソッドはクラス全体に関する情報を処理する場合、
インスタンスメソッドは生み出したインスタンスに関する情報を処理する場合、
に使うといったイメージだと思いました。

例えば、上の例で生成したPhone(携帯電話)の数を数えるというメソッドを作る場合、そのメソッドはそれぞれのインスタンスに関するものではなく、Phoneクラス全体に関するものなので、クラスメソッドとします。


#hogeやfugaについてちゃんと検索してみた
・メタ構文変数という名前があり他にも、foo,barなど様々ある。
・ファミリーという概念があり、foo,bar,baz等一つの塊ごとに使う。


##参考にさせて頂いた記事
- [Rubyのクラスメソッドの使い方を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/19914)

##終わりに。
最後まで読んで頂きありがとうございます:bow_tone1:
転職の為、未経験の状態からRailsを学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
今現在、初心者だからといって言い訳はできないですが、投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。