OmniAICreator/Qiita-1.07M huggingface dataset:
初心者によるプログラミング学習ログ  302日目

#100日チャレンジの302日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
302日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>302日目　2h<br>・xdデザインカンプからのサイト模写<br>・レスポンシブ化<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1255230595501895690?ref_src=twsrc%5Etfw">April 28, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ubuntu20.04+apache+mod_wsgiで、日本語ファイル名がopenできなかった話

* ubuntu20.04
* apache2
* mod\_wsgi (`pip3 install mod_wsgi`でインストール)

ローカルPCで、flaskを使った自作アプリケーションをapache+mod\_wsgiで使っているのですが、ubuntuを20.04にしたら、例外が発生するようになってしまいました。

```
[Wed Apr 29 04:26:54.738674 2020] [wsgi:error] [pid 38764:tid 140083800012544] UnicodeEncodeError: 'ascii' codec can't encode characters in position 22-23: ordinal not in range(128)
```

発生しているのは`open`関数を呼び出しているところで、対象は日本語ファイル名なので、おそらくそれが問題ではないかと推測。
試しに`sys.getfilesystemencoding`メソッドで確認してみると、確かに「`ascii`」が返ってきました。
しかし、ubuntu19.10までは動いていたので、以前は「`utf-8`」だったんだろうか。

さて、[`sys.getfilesystemencoding`のマニュアル](https://docs.python.org/ja/3/library/sys.html#sys.getfilesystemencoding)によれば、「ロケールのエンコーディング」に設定されるそうなので、通常であれば環境変数「LANG」辺りを設定すればいいんでしょうけど、今回の場合はどうすればいいんだろう…。

とりあえず、`mod_wsgi`のマニュアルを読んでみました。

* [mod_wsgi - WSGIDaemonProcess](https://modwsgi.readthedocs.io/en/develop/configuration-directives/WSGIDaemonProcess.html)

どうやら「`locale=locale`」という設定項目があるらしいので(「`lang=locale`」もあるけど、どちらがいいのだろう)、それを設定してみました。

```
<VirtualHost *:80>
    WSGIDaemonProcess app locale=ja_JP.UTF-8
    WSGIScriptAlias /app /path/to/wsgi.py
    <Location /app>
        WSGIProcessGroup app
        Require all granted
    </Location>
</VirtualHost>
```

これで例外が発生しなくなりました。
自己紹介

# プロフィール
京都大学理学部5回生です。競技プログラミングをやっています。[AtCoder](https://AtCoder.jp)黄色[^AtCoder]、[Codeforces](https://codeforces.com)紫色[^Codeforces]です。[yukicoder](https://yukicoder.me)で作問経験があります[^yukicoder]。

# 使用言語
メイン言語はC++、サブ言語はPython3です。その他C, Haskell, Fortran, Octave[^Octave]を勉強したことがあります。

[^AtCoder]: https://atcoder.jp/users/Trineutron
[^Codeforces]: https://codeforces.com/profile/trineutron
[^yukicoder]: https://yukicoder.me/users/7918
[^Octave]: MATLABのオープンソース版
【初心者向け】panadasで移動平均の算出のメモ

### rolling関数使用の事例
データの分析や予測にあたって、グラフの作成等で移動平均が必要な場面は多いと思います。
sqlでもwindow関数を使用すれば、同様の事は可能だと思いますが、pandasのほうが簡単に実現出来る様に思います。

#### pandasのrolling関数を利用して、移動平均を算出する場合のメモを投稿します。
以下の様なcsvがあったとすると。
・ターミナルからheadコマンドの結果

```terminal:csvファイルの一部

$ head dexjpus_20200417.csv 
DATE,DEXJPUS
2015-01-01,
2015-01-02,120.2
2015-01-05,119.64
2015-01-06,118.26
2015-01-07,119.52
2015-01-08,119.51
2015-01-09,118.66
2015-01-12,118.32
2015-01-13,118.16
```

**【1】移動平均の場合、rolling関数は、以下の様に実行しました。**
- 1.ローリング関数のmeanで移動平均の処理
- 2.欠損値の処理(この例では、fillnaのbfillを適用)

```python:移動平均算出・欠損値処理

#rolling関数の使用
df = df.rolling('30D' ,min_periods = 1).mean()

#欠損値の処理
df = df.fillna(method ='bfill' )

```
*30日の移動平均の場合*
・頻度コード(D)を使用して、*'30D'*で指定しました 

このデータは、最初から空白の値があったのですが、欠損値が無い元データであっても、<font color=blue>移動平均を適用すると、nullが発生する為、欠損値の処理をfillna、若しくはdropnaでnullを処理</font>する事になると思います。 
・この例では、fillnaでmethodにbfillを適用し、初日の値に翌日の値を適用

```python:df.isnull()
df.isnull()

	DEXJPUS
DATE 	
2015-01-01 	True
2015-01-02 	False
2015-01-05 	False
2015-01-06 	False
2015-01-07 	False
```
欠損値の処理

```python:fillna

#欠損値の処理
df = df.fillna(method ='bfill' )

df.isnull().sum()

DEXJPUS    0
dtype: int64
```

<font color=red>【2】データの確認</font>

```python:修正されたデータフレームの一部

df

	DEXJPUS
DATE 	
2015-01-01 	120.200000
2015-01-02 	120.200000
2015-01-05 	119.920000
2015-01-06 	119.366667
2015-01-07 	119.405000
```

<font color=red>**初日のデータが翌日のデータと同じになっているのが確認できる。**</font>

データ・セットは、datareaderで取得したfredの為替相場(DEXJPUS)を、csv_readで再利用しました。因みに、以前は取引がない日は、DEXJPUSの値はドット(.)になっていたと思いますが、現在はnullになっている様です。
***

#### 実行したpythonのコードをまとめると、以下の様な感じです。

```python
# 移動平均の処理の例
# infile = './dexjp_20200417.csv'(fred 対＄USの円相場)
import pandas as pd
import numpy as np
import datetime

# csv読み込み
df = pd.read_csv('./dexjpus_20200417.csv' ,index_col=0 ,parse_dates=['DATE'])

# 移動平均の算出(roling関数のmeanを適用)
# 期間は30日で設定の場合(時系列データの場合、頻度コードでも指定できる)
df = df.rolling('30D' ,min_periods = 1).mean()
#欠損値の処理
df = df.fillna(method ='bfill' )
df.isnull().sum()
df
```
<font color=red>以上、初心者向けpandasで移動平均の算出でした。</font>
Python 処理速度向上 Tips

# 実行環境
MacBook Pro
python3.7.5

# ループ
### while i < N　vs　for _ in range(N)

```python
i = 0
while i < N:  # N=10**6
    i += 1
```
```python
for _ in range(N):
    pass
```
![loop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304572/043e54df-14b2-f4b4-edce-f35e9fdcb0d2.png)



# 1次元配列
## 配列の初期化
### [None for _ in range(N)]　vs　[None] * N　vs　np.empty(N)
```python
tmp = [None for _ in range(N)]
```
```python
tmp = [None] * N
```
```python
tmp = np.empty(N)
```
![initilize_1dim_arr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304572/943eff02-4af1-69cd-0a90-68240ad6268b.png)

配列の要素が全て数値で良いなら， Numpyを用いた方が速い


## 要素の変換
### 内包表記　vs　map関数
```python
tmp = [int(i) for i in range(N)]
```
```python
tmp = list(map(int,range(N)))
```
![comprihension_map.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304572/582ea8fa-24f7-c18b-1dd0-6f0c2ec0dd47.png)



# 2次元配列(N×N)
### [None for_in range(N)]for_in range(N)] vs [[None]*N for_in range(N)] vs np.empty((N,N))
```python
tmp = [None for _ in range(N]for _ in range(N)]
```
```python
tmp = [[None] * N for _ in range(N)]
```

```python
tmp = np.empty((N,N))
```

![initialize_2dim_arr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304572/2cecd83c-35e8-a574-214b-33104cb072aa.png)
dockerコンテナ起動時にシェルを実行する

### dockerコンテナ起動時にシェルを実行する方法

Dockerfileの最後に以下を追記する

```Dokerfile.
省略
〜〜〜〜〜
ADD  start.sh  /
RUN  chmod +x /start.sh
CMD  ["/start.sh"]
```
start.shに実行させたい内容を記述する

```start.sh
#!/bin/bash
echo "test" > test.txt
```

`docker-compose up -d`してbuildしたところ・・
#####イメージ作成してコンテナは起動されたが、エラーが発生！！！すぐにコンテナが終了してしまう。

```docker
Creating sls_sls_1 ... done
Attaching to sls_sls_1
sls_sls_1 exited with code 0
```
###解決方法
起動時のシェルの最後に`tail -f /dev/null`を追記することでコンテナを起動し続けて、コマンドを終了させない

```start.sh
#!/bin/bash
echo "test" > test.txt

#コンテナを起動し続ける
tail -f /dev/null
```
Excelセルで起きるエラーについて

#どういうエラーがあるか
|表示|エラー内容|
|:--|:--|
|#VALUE! | 入力した数式、関数か参照先のセルに問題がある|
|#NUM! | 数式、関数に無効な数値が含まれている。主に関数の数値の範囲を超えている場合に出現する。|
|#N/A | 参照の対象が見つからない。主にLOOKUP系、MATCH 関数などの検索用の関数でデータが見つからない場合に出現する。|
|#REF! | 数式、関数が有効でないセルを参照している。主に数式で参照されているセルが削除された場合、または貼り付けられたときに出現する。|
|#NAME? | 数式、関数名や定義値での文法エラー。主に数式、関数名の名前に入力ミスがあるときに出現する。|
|#DIV/0! | 割り算の分母が0|
|##### | 表示するためのスペースがない。列の幅がセルのすべての内容を表示するのに十分でないときに出現する。計算が正常にできている場合もあり、その時はISERRORもFALSEとなる。|

# エラーを出さないようにするには
受注率（受注数/問合せ数）の月別集計表を作っている場合に問合せ数が0件の月に#DIV/0!がでたり、LOOKUP系の関数やMATCH関数を使っている場合にマッチするデータがなくて#N/Aエラーが出ることがままあります。
このようなとき、以下の関数を使ってエラーの表示を隠すことができます。

## IFERROR関数
Excel 2007で実装された、指定した値がエラーかどうかで処理を分ける関数です。
引数を2個とり、1個目の引数の結果がエラーでなかったら1個目の引数の結果、エラーだった場合に2個目の引数の値が表示されるようになります。
以下のようにすることでエラーをラッピングすることができます。
=IFERROR(VLOOKUP(A1, B:C, 2, FALSE),”存在しません”)
=IFERROR(A1/B1,”計算不可能”)

## ISERROR関数
ISERROR関数でもエラーを判別することができますが、こちらはエラーかどうかで真偽値（TRUE・FALSE）を返します。
IF関数と組み合わせればIFERROR関数と同じことを実現することも可能です。
古いExcelでも表示できるようにする場合には、こちらを利用するとよいです。
SQLのJOINについてメモ

## はじめに
SQL書いたことないのですが
時間があったので、学習する機会をいただきました。
結合についてつまづいたので、足早にメモです。

## わからなかったこと
複数結合するとき、JOINする順番が（大切だということが）わからなかった。

## 簡単にイメージ

![iOS の画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224077/e5e516f3-b13b-136e-4cb9-6b41fb4bc204.jpeg)

うさぎ、ねこ、ひよこの３匹結合したい場合どうするか。
それぞれもっている旗に注目してください。

うさぎは◯、ひよこは×の旗を持っていますが、
ねこは、うさぎにもひよこにも持っている◯と×の旗を持っています。
そのため、うさぎとひよこの仲介としてねこを挟むことができます。
このようにすることで３匹が結合できるというイメージです。
（ここでは旗と言ってますが、実際SQLの場合は「カラム」や「値」）
DockerをWindows 10 Homeで使う方法の備忘録

Docker Desktop for Windowsは、
Windows 10 ProではHyper-Vを通して動きます。

Windows 10 HomeではHyper-Vが備わっていないため
代わりにOracle Virtual Boxを利用するDocker Toolboxの利用が必要です。

以下サイトからダウンロードできるはずなのですが
ダウンロードボタンが見つかりませんでした。
（私が見つけれなかっただけ？どなたかコメントほしいです）

https://docs.docker.com/docker-for-windows/docker-toolbox/

代わりにGitHub上に上がっていたため
**:point_down:ここからダウンロードできました。**

https://github.com/docker/toolbox/releases

また、Docker ToolboxはVirtual Box上に乗っているため
ローカルアドレスがデフォルトでは`192.168.99.100`となっているので注意。
Python Basic - Pandas, Numpy -

# 0. Introduction of Numpy
 NumPy is a Python package. It stands for 'Numerical Python', and Numpy is a linear algebra library to work with dimensional arrays, which contains useful linear algebra routines and random number capabilities.

# 1. Numpy arrange() method
 The **arange()** method in the Numpy module in Python is used to **generate linear sequence of numbers**.
If does it on the basis of the pre-provide starting and ending points along with a constant step size.

## Syntax
```python
import numpy as np
start = 1  # default 0
stop = 21
step = 1   # default 1
none = int
np.arange(start, stop, step, dtype=none)
```
**Output**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626074/87a62eeb-0f1a-ff3c-9145-86908f4a14f2.png)

## Omit
```python
data = np.arange(start, stop, step)
data
```
**Output**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626074/254b3e3c-dc39-4c7a-f0cc-5faa3d8fbf69.png)

## Combination of reshape() method
```python
data = np.arange(start, stop, step).reshape(4,5)
data
```
**Output**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626074/27e4e568-32b0-147e-1d84-865c8cbfb320.png)

## Combination of array() method

```python
title = np.array(['UserId', 'SomethingId', 'ProductName', 'Price', 'Ratings'])
df = pd.DataFrame(data, columns=title)
df
```

**Output**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626074/2c9eaf5c-75b6-609d-640a-8a1f555ab9d6.png)

## Pick up (Slice) specific data
```python
df_part = pd.DataFrame(data[:, 3:], columns=title[3:])
df_part
```
**Output**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626074/fd61d07d-811b-2602-9eea-2dfa2010c658.png)

```python
df_part = pd.DataFrame(data[:, :3], columns=title[:3])
df_part
```
**Output**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626074/af9a85ab-e748-6ae1-24dd-60dcd54a421b.png)

# 2. Pandas
 Pandas is a library providing fast, flexible, and expressive way to work with a relational or table of data, both easily and intuitive. It allows you to process your data in a way similar to SQL. Scikit-learn is a library of classic machine learning algorithms. It features various classification, regression, and clustering algorithms, including support virtual machines, random force, and a lot more. 

## concat() method

[**pandas.concat**](https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.concat.html)

```python
df12 = pd.concat([df_part2, df_part1], axis=1)
df12
```
**Output**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626074/892859c4-8461-3156-d1a6-dc45fa040656.png)



## References:
**LINKS**
   >-[Numpy-Official](https://numpy.org/)
   >-[Pandas-Official](https://pandas.pydata.org/pandas-docs/stable/index.html)
   >-[PythonでNumPyのarange関数を利用する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/28000)
   >-[GitHub : **neural-style**](https://github.com/anishathalye/neural-style)
   >-[GitHub : **Fast Style Transfer in TensorFlow**](https://github.com/lengstrom/fast-style-transfer)
HTML input要素で戻るボタンを実装する

# 目的

- input要素を使用してひとつ前のページに戻るボタンを実装する方法をまとめる

# 記載例

- ひとつ前のページに戻るためのHTMLのinput要素を用いたボタンを記載する。

    ```html
    <input type="button" onclick="history.back()" value="戻る">
    ```
【備忘録】VScodeで拡張機能「SFTP」を使ってサーバーにアップする手順

#手順１：SFTPをインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/c73d33f2-9ee2-99b9-47de-02291b8733be.png)


#手順２：command＋shift＋P > SFTP:Config
上記のコマンドでsftp.jsonを開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/6a041d5c-0167-1f71-890b-9f417c4a7de6.png)


#手順３：sftp.jsonを編集する
```json:sftp.json
{
    "name": "任意の名前", //省略可能
    "host": "ホスト名", 
    "protocol": "sftp", //sftp接続する場合
    "port": 22, //sftp接続をする場合
    "username": "ユーザー名", 
    "password": "パスワード",
    "uploadOnSave": true, //ファイルを変更したら自動でサーバーにアップする
    "remotePath": "/public_html/ドメイン名/対象のディレクトリ", //サーバーにアップしたいディレクトリを指定
    "ignore": [".vscode", ".git", ".DS_Store", "node_modules", "map"] //アップロードしたくないファイルやフォルダを指定 
}
```

####ファイルを保存して、以下のログが確認できればOK！
[04-29 01:05:16] [info] local ➞ remote
Juliaで色を徐々に変えながらプロットする方法

# やりたいこと

グラフを複数同じキャンバス(figureのほうが適切？)に描くとき、それぞれの線の色を変えたいですよね。
通常、PythonもJuliaも自動で色を変えてくれますが、それをきれいなグラデーションで少しづつ変化させるときれいです。
で、その方法はpythonだと簡単に見つかるんですが、Juliaだとなかなか見つからなかったので、記事にしようというわけです。

## 問題設定
```math
 f(x) = x^{n},  n = 1, 2, 3\cdots 10, x \in [-1, 1]
```
をプロットしたいとします。ただし、

- プロットは同じfigure中に描く
- nが変わったとき、色を変える
- 色は徐々に(連続的に)変化させる

としましょう。
最終的にこんなプロットができればゴールです。
![goal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349566/69680841-d287-178e-54bb-13456424fce3.png)



## Pythonだと
Python(正確にはmatplotlib)なら、以下のようにかける。

```python
import numpy as np
from matplotlib import pyplot as plt
from matplotlib import cm


x = np.linspace(-1,1,100)

N_max = 10
for n in range(1,N_max+1,1):
    y = x**n
    color = cm.viridis(float(n/N_max))
    plt.plot(x,y, color=color, label = 'x to the {}th'.format(n))
plt.legend(loc=0)
```

![byMatplotlib.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349566/4bb1c91c-97e2-cd4f-6a30-f6d3aa06fa5f.png)



ポイントは変化する指数$n$を$N_max$で割った値を、カラーマップスキームに引数として渡すところかと思う。

```python

color = cm.viridis(0~1のfloatを与える)
```
こうすると、指定したカラーマップスキームの中から、色を0~1のスカラー値でピックアップすることができる。


## Juliaだと

Julia(ここではPlots+GRやPlotlyを想定)だと少し難しくなる。
なぜかといえば、カラーマップスキームに引数として0~1のfloatを渡すことができないからである。

一応、カラーマップスキームは`c=:[なにかのscheme]`で渡すことができるらしいので、試してみる。

```julia
# cを指定
# 違う、そうじゃない
x = LinRange(-1,1,100)
p = plot()
N_max = 10

for n in 1:N_max
    y = map(xx-> xx^n, x)
    p = plot!(p,x,y,
              c=:viridis,
              label= string("x to the ", n,"th" ),
              legend=:bottomright)
end
display(p)
```

![mistake.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349566/8df4f125-00a6-7320-cf13-b88e06975719.png)

色が全部おなじになっちゃった(´；ω；｀)


### 解決策

[このExample](https://github.com/JuliaPlots/ExamplePlots.jl/blob/master/notebooks/cgrad.ipynb)が解決策だった。

さきに解決策を書こう。

```julia

# cgradをうまくつかうのか〜
x = LinRange(-1,1,100)
p = plot()

N_max = 10

#ここで色の候補を作っておく
C(g::ColorGradient) = RGB[g[z] for z=LinRange(0,1,N_max)]
# colormap schemeの指定
g = :viridis
# 色のリスト作成(パイプ使用)
colorlist  = cgrad(g) |> C 

for n in 1:N_max
    y = map(xx-> xx^n, x)
    p = plot!(p,x,y, c=colorlist[n],　# ここで色をピックアップ
　　　　　　　　 label= string("x to the ", n,"th" ), 　　　　　　　　　　　legend=:bottomright)　
    
end
display(p)

```
![goal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349566/fb28908f-07f5-9b5d-8285-12721f0af737.png)

やったね。

### 何してるの

何してるんだろう。
正直な話、

```julia
#ここで色の候補を作っておく
C(g::ColorGradient) = RGB[g[z] for z=LinRange(0,1,N_max)]
```
は何が起きているのかよくわからない。
関数CをRGBのリストとして定義しているけれど、その中にColorGradient型のgがあって、そのスライスとしてzが使われていて、、、、

正直良くわからない¯\_(ツ)_/¯
ただ、機能としては「指定のカラーマップ(`g`)を N_max 分割して、そのリストを作る関数を作成」みたいなことをしている。

ポイントはこの関数の引数に直接gを指定しているのではなく、`cgrad`関数の返り値を入れることである。

```julia
# colormap schemeの指定
g = :viridis
# 色のリスト作成(パイプ使用)
colorlist  = cgrad(g) |> C 
```

ここは実際にカラーマップスキームを指定して、色のリストを実際に作成している。
`|>`はいわゆるパイプであることに注意。関数Cの引数として`cgrad(g)`の値が入っている。


##　最後に

Matplotlibだったらできるのに・・・というときには、Backendとして`PyPlot`使う手もあるわけだし、どうしても必要というわけではないかもしれないし、よくわかってないけど、とりあえずできたからヨシ！
credential.ymlとmaster_keyについて　簡単なメモ

###はじめに
チーム開発においてpayjp導入を担当する事になりました。
導入にあたり、早々にエラーが発生したのですが、そのおかげ（？）で表題について勉強する事が出来ました。

環境
rails (~> 5.2.3)

####この記事で言いたいこと（最後の"まとめ"にも記載）
・payjp（をはじめとするAPI）を利用するにあたり、APIキーをcredential.ymlという”宝箱”にしまうというやり方がある。（※他に、環境変数から参照する方法もある）
・宝箱にしまわれたAPIキーを、宝箱を開けた上で見る（復号化）には、1アプリに1つしかないmaster_keyが必要。（暗号化された文章を、読める形に戻すことを復号化と言う）

####エラー発生までの間に実行した内容
クレジットカード決済機能を実装したく、gemfileにgem 'payjp'を追記のうえ、bundle install実行。
payjpのシークレットキーをcredentials.yml.encに追加するため、ターミナルでEDITOR="vi" bin/rails credentials:editを実行。

####ターミナル上に表示された内容
Adding config/master.key to store the master encryption key: 26fe97030a3ebb1817f57ba3fff16e2a
Save this in a password manager your team can access.
If you lose the key, no one, including you, can access anything encrypted with it.
  create  config/master.key

そのしばらく後の文章に
ActiveSupport::MessageEncryptor::InvalidMessageエラーが表示されました。


####エラーの内容
たくさんググって調べたのですが、自己解決に至らずメンターさんに相談させて頂きました。

今回の場合は、『今持っている鍵では宝箱が開かないよ！』というエラーである事がわかりました。

私たちのチームでは、私以外のAさんがrails newを実行しアプリを作成しました。
つまりAさんが今回のアプリのmaster_keyの値を把握しているということになります。
(rails newの際にcredential.ymlとmaster_keyが生成されます)

我々はアプリ立ち上げ当初から今までmaster_keyの情報共有をしていませんでした。
本来であれば、master_keyの情報共有をし、（rails newを実行したAさん以外の）メンバーが、各自のconfig/master.keyのファイルの内容を、master_keyの値に上書きしていれば起きていなかったエラーでした。

####まとめ
・payjp（をはじめとするAPI）を利用するにはAPIキーを、credential.ymlという”宝箱”にしまうというやり方がある。（※他に、環境変数から参照する方法もある）
・宝箱にしまわれたAPIキーを、宝箱を開けた上で見る（復号化）には、1アプリに1つしかないmaster_keyが必要。（暗号化された文章を、読める形に戻すことを復号化と言う）
・master_keyはrails newした人しか知らないため、チームメンバー間で共有する必要がある。
・rails newした人以外のメンバーは各自、エディタ(私たちはVS CODEを使用）上で、master.keyファイルに記載されている値を、共有したmaste_keyの値に書き換える。（メンバー全員がやらないと、API使用にあたり支障が生じる。同じ宝箱の中身(今回はpayjpのAPIキー)を共有したいのであれば鍵を共有する必要がある）

####感想
初見のエラーにぶち当たった瞬間は割と絶望的な気分になるものの、
自分でいろいろ調べたり、メンターさんに対して工夫しながら質問した上で頂いた回答を『○○という理解でよろしいですか？』とまとめる作業を経て、エラー解決に至る、というプチ成功体験をすると、大きなインパクトが自分の中で残り知識定着に繋がると感じました。

以上です。
初学者のメモ用記事です。何か誤っている内容等あればご指摘いただければ幸いです。
ご覧いただきありがとうございました！
Bundlerのグループのメモ

# メモ

- 環境
    - Ruby 2.7
    - Bundler 2.1.4
- 以下のようにGemfileを用意する
    - `rspec` は `g1` グループ
    - `rubocop` は `g1` と `g2` グループ
    - `pry` は `default` グループ
       - 何も記載しない場合は `default` というグループに入る

```ruby:Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "pry"

group :g1 do
  gem "rspec"
end

group :g1, :g2 do
  gem "rubocop"
end
```

## 特定の1つのグループを除外する

まず、 g1 グループを除外する設定を入れて、インストールしてみる
※ bundle install 時の `--without`オプションと `--path` オプションは非推奨となっていたため、 `bundle config` で指定する

```zsh
% bundle config set path 'vendor/bundle'
% bundle config set without 'g1'
% bundle
```

そうすると `rspec` はインストールされない。それ以外はインストールされる。 `rubocop` も g2 に所属しているのでインストールされる。
ちなみにGemfile.lockにも rspec もバージョン付きで記載されるが実際にはインストールされない。


<details>
<summary>このときのGemfile.lock</summary><div>

```ruby
GEM
  remote: https://rubygems.org/
  specs:
    ast (2.4.0)
    coderay (1.1.2)
    diff-lcs (1.3)
    jaro_winkler (1.5.4)
    method_source (1.0.0)
    parallel (1.19.1)
    parser (2.7.1.1)
      ast (~> 2.4.0)
    pry (0.13.1)
      coderay (~> 1.1)
      method_source (~> 1.0)
    rainbow (3.0.0)
    rexml (3.2.4)
    rspec (3.9.0)
      rspec-core (~> 3.9.0)
      rspec-expectations (~> 3.9.0)
      rspec-mocks (~> 3.9.0)
    rspec-core (3.9.1)
      rspec-support (~> 3.9.1)
    rspec-expectations (3.9.1)
      diff-lcs (>= 1.2.0, < 2.0)
      rspec-support (~> 3.9.0)
    rspec-mocks (3.9.1)
      diff-lcs (>= 1.2.0, < 2.0)
      rspec-support (~> 3.9.0)
    rspec-support (3.9.2)
    rubocop (0.82.0)
      jaro_winkler (~> 1.5.1)
      parallel (~> 1.10)
      parser (>= 2.7.0.1)
      rainbow (>= 2.2.2, < 4.0)
      rexml
      ruby-progressbar (~> 1.7)
      unicode-display_width (>= 1.4.0, < 2.0)
    ruby-progressbar (1.10.1)
    unicode-display_width (1.7.0)

PLATFORMS
  ruby

DEPENDENCIES
  pry
  rspec
  rubocop

BUNDLED WITH
   2.1.4
```

</div></details>

## `default` グループも外す

次は `g1` と `default` を外してみる
上述のコマンドで設定。
設定確認は以下コマンドで。

```zsh
% bundle config
without
Set for the current user (/home/xxx/.bundle/config): [:g1, :default]
```

そうすると、 `pry` と `rspec` は除外される。


# 参考

Bundler: bundle install https://bundler.io/man/bundle-install.1.html

Bundler: How to manage groups of gems https://bundler.io/v2.0/guides/groups.html
画像のGPS情報(Exif)で少しシェル芸して遊ぶ

以前画像のExif情報から位置情報を取得する作業があったのですが、
ぱっと調べてもファイルアップロードしたりツールを使ったりと簡単に地図に表示する方法の紹介が少ないように感じました。
なのでワンライナーで簡単に地図(google map)に表示する方法を紹介？します。

## dependency

Ubuntu: 18.04
ImageMagick: 6.9.7-4
firefox: 75.0

## 画像の位置情報の読み方について
identifyコマンドで簡単に表示できます。

```bash
$ identify -verbose sample.jpg | grep GPS
    exif:GPSAltitude: 56219/4096
    exif:GPSAltitudeRef: 0
    exif:GPSDateStamp: 2020:02:23
    exif:GPSDestBearing: 48287/361
    exif:GPSDestBearingRef: M
    exif:GPSImgDirection: 48287/361
    exif:GPSImgDirectionRef: M
    exif:GPSInfo: 1998
    exif:GPSLatitude: 34/1, 36/1, 4625/100
    exif:GPSLatitudeRef: N
    exif:GPSLongitude: 135/1, 31/1, 520/100
    exif:GPSLongitudeRef: E
    exif:GPSSpeed: 0/1
    exif:GPSSpeedRef: K
```

度分秒表記だと**北緯:34度36分46秒25 東経:135度31分5秒2**みたいです。

各数字の比率？を計算する必要があります。
具体的には経度だと「135/1, 31/1, 520/100」の「/」のあとの数字で各数字を割る必要があるみたいです。

```
(135 / 1)度 (31 / 1)分 (520 / 100)秒 (520 % 100) ⇒ 135度31分5秒2
```


緯度経度を10進数の表記で表すと下記のようになります。
**N34.6128,E135.518**

各数字を「1」,「60」,「3600」で割って足します。
つまり10進数表記での経度の計算は下記のようになります。

```
(135 / 1) + (31 / 1 / 60) + (520 / 100 / 3600) = 135.518
⇒ E135.518
```

あと正確にやるなら「GPSLatitudeRef」の「N」、「GPSLongitudeRef」の「E」も考慮しましょう。
それぞれ「N」が北緯と「E」が東経のはずです。
南半球だと南緯を表す「S」アメリカ大陸などでは西経を表す「W」になるのでしょうか。

他にも様々な表記があるので調べると面白いかもしれません。

この分野詳しくないので計算や文言が間違っていたら教えていただけると幸いです……

## google map で開いて確かめる

しかし数字だけ見ても面白くないですね。
google mapで開いてみます。

```bash
$ cat sample.jpg |identify -verbose -|grep -e 'GPSL.*,'|tr -d ' '|awk -F '[:/,]' '$0=$3/$4+$5/$6/60+$7/$8/3600'|xargs|tr ' ' ,|xargs -i firefox 'https://www.google.com/maps/search/?api=1&query={}'
```

生成されたURLは下記のようになります。
https://www.google.com/maps/search/?api=1&query=34.6128,135.518

google mapスクリーンショットは規約的にだめみたいなので実際に開いて確かめてみてください。
大坂の公園が表示されているかと思います。

## 複数の画像から移動ルートとか調べてみる

google map apiとか使うと自由に良い感じで出来ますが、気軽に調べたいときはシェル芸で十分ですね。
5枚の写真があるフォルダで実行します。

```bash
$ ls | xargs -i identify -verbose {} | grep -e 'GPSL.*,'|tr -d ' '|awk -F '[:/,]' '$0=$3/$4+$5/$6/60+$7/$8/3600'|xargs -n2|tr ' ' ,|tr \\n /|xargs -i firefox https://www.google.co.jp/maps/dir/{}
```
生成されたURLは下記のようになります。
スマホだと駄目みたいなのでPCで開いてください。

https://www.google.co.jp/maps/dir/34.6128,135.518/34.6136,135.517/34.6126,135.519/34.6099,135.519/34.6098,135.517/

○が書かれた場所が写真の場所になります。
**写真から公園を歩いた道筋がわかりましたね！わーい！**

またこの移動ルートを表示するURL作成方法は、googleの公式ドキュメントには書かれてない(自分が調べた限りでは)ので、正しいかどうかは分からないです。位置情報が多すぎると失敗する気がします。

## まとめ
GPSの情報計算とかは参考になるのではないでしょうか？
昔の写真フォルダを漁ってMapに表示し、旅行ルートを思い出したりして楽しめるのではないでしょうか。

この記事が誰かの参考になれば幸いです。

## 備考

使用した写真は知り合いから許可をもらって利用しました。
ちなみに最初は計算で比率を計算しておらず地図上のいろんな国に飛ばされて混乱したりしてました。
[Python] multiprocessで起動した子プロセスを別プロセスから簡単に落とす方法

 デーモンとして走るプログラムのテストを書いていたときに、一定時間後に強制終了する必要が出てきました。
 
## 用件
 
 ```
 main process
   |
   |--- subprocess1
   |--- subprocess2
   |--- subprocess3
```

サブプロセスたちは下記のように起動しています。

```python
# main.py
from multiprocessing import Process

ps = [
    Process(target=hogehoge1),
    Process(target=hogehoge2),
    Process(target=hogehoge3),
]
for i in ps:
    i.start()
```

**やりたいこと**

別プロセスからなんらかの方法でサブプロセスたちごと消す。


## まず SIGINT (ctrl + c)

ターミナルで動かしてるときはこいつで全消しできるのでやってみる。

```python
# other.py
import subprocess
from time import sleep
from signal import SIGINT

proc = subprocess.Popen(cmd)
sleep(5) # ちょっと待つ
proc.send_signal(SIGINT)
```

### 結果

親だけ消えてサブプロセスたちが残ります。


## 親で SIGINT をキャッチする

この方法でうまく行きました。親には信号がいってるはず（さっきの実験より）なので親からサブプロセスを消してみます。  
親ファイルを変更します。


```python
# main.py
from signal import SIGINT
import signal

def signalHandler(signal, handler) :
    for i in ps:
        i.terminate()
    exit(0)

if __name__ == "__main__":
    signal.signal(signal.SIGINT,  signalHandler)
    signal.signal(signal.SIGTERM, signalHandler)
```

注意：`exit(0)` を忘れると親プロセスが殺せなくなります。  


## まとめ

雰囲気でマルチプロセスをやるのはよくない。
Reactを使ってWebサービスを作るための基礎１

Reactを基礎から学ぶためのメモ．
まずは，Webサービスを作るにあたってのReactの挙動を理解．

#サービスをつくる構成要素の違い
まずはじめに，どちらも部品という意味を持つ"モジュール（Module）"と"コンポーネント（Component）"という言葉について確認する．
##モジュール（Module)とは
関数などの**機能を提供する**ソースコード中の部品．

##コンポーネント（Component）とは
GUIを構成する一つ一つのそれだけで**完結した部品**．
何かで利用することはできるが，交換可能というものではない．

#React
##React実行の流れ
トップページ（index.html）→index.js→App.js
の流れで処理が進む．

##index.html
下記,```<div id="root"></div>```の中に後述するindex.jsの中身が動的にレンダリングされることになる．
また，ここで読み込まれるbundle.jsはwebpackでビルドされたファイルである．

```html:index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <div id="root"></div>
  <script type='text/javascript' src="./dist/bundle.js" ></script>
</body>
</html>
```

##Reactコンポーネント（App.js）の作成
ReactコンポーネントのApp.jsを作成する．
その際以下の３つを守る．

* React.Componentを継承する
* renderメソッドでDOMを返す
* export defaultで外部から参照できるようにする

```js:App.js
import React from 'react'

export default class App extends React.Component {

  render () {
    return <h1>Hello, world!</h1>
  }

}
```

##index.jsファイルの作成
Reactアプリを実行する際，一番最初に呼び出されるindex.jsファイルを作成する．
下記，最も簡易的なindex.jsの例

```js:index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'

ReactDOM.render(
    <App />,
    document.getElementById('root')
)
```
<App />のようにReactDOMによって作成されたReactコンポーネントは，新しいDOMとして指定できるようになる．
そして最終的なレンダリングは，この各Reactコンポーネントのrenderメソッドにおいて返却されるDOMが描画されることになる．
TypeScript は import か export が無いと module として扱ってくれない

## これは何

TypeScript は import か export が1つも無いと module として扱ってくれない

## 困ってたこと

htmlAでは```<script type="module" src="scriptA.js"></script>```
htmlBでは```<script type="module" src="scriptB.js"></script>```
htmlCでは```<script type="module" src="scriptC.js"></script>```

を読み込むツールを作っていた際

特にimportもしないちっちゃなスクリプトで同じ関数名を利用していると
```Duplicate identifier "hogehoge"```と怒られる

とりあえずスクリプト全体を```{ hogehoge }```みたいに囲っていたが
かっちょよくなかった(；_；)

## 気づき

ふと「これプロジェクト単位の衝突か？全部エクスポート扱いになってるのか？」と思いつつ
でも同名のエクスポートって衝突しないよな？と適当にエクスポートしてみようと```export { };```まで書いたところ

```Duplicate identifier "hogehoge"```が消えた……🤔

## 原因

変な動作だなと思いつつググってみると

> トップレベルのインポートまたはエクスポート宣言のないファイルは、コンテンツがグローバルスコープで利用可能なスクリプトとして扱われます

```
＿人人人人人人人人人人人＿
＞　グローバルスコープ　＜
￣ＹＹＹＹＹＹＹＹＹＹＹ￣
```

なるほどな

## 対策

とりあえず行頭に空のエクスポートを書いて解決
```export { };```

## おわり

おわり

## 参考

https://www.typescriptlang.org/docs/handbook/modules.html

> In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).
ゼロから始めるLeetCode Day6 「1342. Number of Steps to Reduce a Number to Zero」

#概要
海外ではエンジニアの面接においてコーディングテストというものが行われるらしく、多くの場合、特定の関数やクラスをお題に沿って実装するという物がメインである。

その対策としてLeetCodeなるサイトで対策を行うようだ。

早い話が本場でも行われているようなコーディングテストに耐えうるようなアルゴリズム力を鍛えるサイト。

せっかくだし人並みのアルゴリズム力くらいは持っておいた方がいいだろうということで不定期に問題を解いてその時に考えたやり方をメモ的に書いていこうかと思います。

[Leetcode](https://leetcode.com/)

基本的にeasyのacceptanceが高い順から解いていこうかと思います。

前回
[ゼロから始めるLeetCode Day5 「1266. Minimum Time Visiting All Points」](https://qiita.com/KueharX/items/7949b94ac52e1b81147c)
# 問題

[1342. Number of Steps to Reduce a Number to Zero](https://leetcode.com/problems/number-of-steps-to-reduce-a-number-to-zero/)

与えられた自然数`num`が奇数であれば1を引き、偶数であれば2で割ります。それを0になるまで繰り返した回数をカウントし、その回数を返す関数を作成せよという問題です。

ひとまずパッと思いついたものを書きます。

```Python
class Solution:
    def numberOfSteps (self, num: int) -> int:
        steps = 0
        while num > 0:
            if num % 2 == 0:
                num //= 2 
            else:
                num -=1 
            steps += 1
        return steps
# Runtime: 28 ms, faster than 68.90% of Python3 online submissions for Number of Steps to Reduce a Number to Zero.
# Memory Usage: 13.8 MB, less than 100.00% of Python3 online submissions for Number of Steps to Reduce a Number to Zero.
```

書いた後に他の人のdiscussも色々見て見ましたがそこまで奇抜なものはありませんでした。
シンプルゆえにみな似通った答えになってしまうのかもしれませんね。

~~この問題に関しては正直あまり書くことないな・・・~~
ブラウザのXMLHttpRequest(xhr)で今日の東京の天気を取得する


Open Weather Mapを試してみます。livedoorの天気APIはhttpsが使えない模様でそろそろブラウザからアクセスするのには厳しそうでした。

## 東京の今日の天気を取得するサンプルリクエスト

こちらをブラウザから叩くと取得できます。 appidはユーザー登録をして取得しましょう。

```
https://api.openweathermap.org/data/2.5/weather?id=1850147&units=metric&appid=**************
```

Open Weather Mapは初めてでしたが、[OpenWeatherMapで気象情報をゲットしよう](https://www.sglabs.jp/openweathermap-api/)が参考になりました。返却値のオブジェクトはここをみるとだいたいわかります。

## ブラウザのxhrでGETリクエスト

```js
function getWeather(){
    const url = 'https://api.openweathermap.org/data/2.5/weather?id=1850147&units=metric&appid=xxxxxxxxxxxxxxxxx';

    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, false);
    xhr.onload = function () {
        const res = JSON.parse(xhr.response);
        const weather = res.weather[0].main;
        console.log(weather);
    };
    xhr.send(null);
}

getWeather();
```

## Promiseで使う

大体の場合、"天気が晴だったら何かする"とか"温度が何度以上だったら何かする"という使い方になると思うのでプロミスで使う用のもメモ

```js
function getWeather(){
    const url = 'https://api.openweathermap.org/data/2.5/weather?id=1850147&units=metric&appid=xxxxxxxxxxxxxxxxx';

    return new Promise(function(resolve, reject){
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url, false);
        xhr.onload = function () {
            const res = JSON.parse(xhr.response);
            const weather = res.weather[0].main;
            resolve(weather);
        };
        xhr.send(null);
    })
}

getWeather().then(function(res){
    console.log(res);
    if(res === 'Clouds'){//曇りならば~
        
    }
})
```
【Kotlin+Spigot】1.1 開発環境のインストール

## 0. 初めに

私がおすすめするIDE (統合開発環境: Integrated Development Environment) は [**IntelliJ**](https://www.jetbrains.com/ja-jp/idea/) です。
直接インストールしてもいいのですが、[**ToolBox**](https://www.jetbrains.com/ja-jp/toolbox-app/) を使うと楽にアップデートできます。
今後のことも考えて、そちらからインストールしましょう！

## 1. ToolBox のインストール
まず、[**ToolBox**](https://www.jetbrains.com/ja-jp/toolbox-app/) をクリックしましょう。
ダウンロード を押して指示に従って保存してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628547/53818e4a-b04f-3efa-74af-dbef73167477.png)

保存した .exe ファイルを起動して指示に従ってインストールしましょう。

## 2. IntelliJ のインストール
Windows と S を同時押しして検索バーを開きましょう。そこに、「toolbox」と入力してみてください。
**JetBrains ToolBox** を押すと開きます。押しても何も開かないよ？という人もご安心を。
右下のタスクバーを見てください。アイコンがあります。(画像だと一番左)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628547/0225ba47-df84-6c15-559e-a470800724b1.png)
開いてなければそこを押してください。

こんな画面が出てきたら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628547/d741c0d5-5640-795c-1adc-c7aa1f2054ba.png)

**IntelliJ IDEA Community** をインストールしましょう。

## 3. IntelliJ の起動
Installed になった **IntelliJ IDEA Community** をクリックすることで起動できます。
勿論、デスクトップにアイコンを置いたり、検索バーを使ったりしても大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628547/263ba433-c86d-d2e2-71e1-419e5e3b946b.png)

英語を読めばわかりますが、分からなくてもとりあえず同意したり次へ次へとやっていけばOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628547/b69de7f7-e035-2a12-87ff-f78603e5cbf3.png)

これが開いたらインストール終わりです。お疲れ様でした。


## リンク
### [次の記事に進む](https://qiita.com/sya-ri/items/1ecccdba38fd3260f5ff)
### [目次に戻る](https://qiita.com/sya-ri/items/bc7eb01ed687b9ff9566#%E7%9B%AE%E6%AC%A1)
MacにTeXを導入した

# はじめに
今回大学のゼミでTeXを使うという話を聞き、折角だし自分で入れてみるかと考えてちょこちょこいじってみた備忘録です。
TeXを入れようとして疑問に思ったことをちらちら書いてるだけです。
じぶんではなにもしてない。

# 導入
まずはじめにちょこーっと調べてみる。
tar.gzファイルを持ってきて、terminalで展開して、インストールして…

**めんどい**

そもそもにわかの自分にはtar.gzってなんだっけという初歩的なところから。

## tar.gz
そのまま「たーじーぜっと」って読むんですね。
zipとかの圧縮ファイルは分かるけど、tar.gzって深く考えるとなんだろう…？となった。
今どき解凍ソフトとか使っちゃえばボンと解凍自体はできるんだけど、どういう違いがあるのか。gui文化からcui文化に移行を目標にしているので、調べてみました。

### zip
ご存知の通り、圧縮しているファイル。サイズとかもちっちゃくなってる。

### tar.gz
gzipで作られたもの。サイズとかがちっちゃくならずに、複数ファイル（フォルダ）を一つとして扱えるようにしただけ

正直知らんかった。

# Homebrewを使う
結局Homebrewを使って導入しました。

tar.gzのやつ、何故か展開のときに

```terminal:terminal
$ tar xvf install-tl-unx.tar.gz
```

で実行したら、

`Error opening archive: Unrecognized archive format`

が出ちゃいました。
オプションが間違っているんですかね。今度tarコマンドについて調べてみます。


ここで面倒になった自分はhomebrewでそのまま

```terminal:terminal
$ brew cask install mactex-no-gui
```

を実行して一発でした。

TeXて容量めちゃくちゃでかいんですね…。

インストールしたあとは、パッケージアプデのために

```terminal:terminal
$ sudo tlmgr update --self --all
```
を実行。

このときtlmgrのPATHが通ってなくてエラーが出てしまったので、

```terminal:terminal
$ sudo /usr/local/texlive/2020/bin/x86_64-darwin/tlmgr path add
```

を実行した。2020の部分は導入するバージョンによりけり。

```terminal:terminal
$ sudo tlmgr paper a4
```
にてA4サイズに取り敢えず用紙サイズを設定。

更に**TeX Studio**を

```terminal:terminal
$ brew cask install texstudio
```

でばちこり入れて、取り敢えず環境は出来上がったかな…？

足りないものあったら教えて下さい。お願いします。

# 参考
https://www.momoyama-usagi.com/entry/tech-latex-mac-setting
https://kakubari-ryusei.hatenablog.com/entry/2017/07/03/193907
WSL環境におけるHeroku CLIの導入

#はじめに
`wsl`環境下では`Heroku`の提案している、`snap`コマンドが使えません。
私は`snap`しようとして、対応してないと怒られました。。。

別の方法を公式が提案してくれているので、そちらを使います。

#環境
`wsl`の環境です。

```
Editor: VSCode
Shell : bash version 4.4.20
Ubuntu: 18.04.4 LTS
```

#インストール
```bash:wsl
$ curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
```
```bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
(だいぶ中略)

heroku installed to /usr/bin/heroku
heroku/7.39.5 linux-x64 node-v12.16.2
```
#確認

```bash:wsl
$ heroku --version
heroku/7.39.5 linux-x64 node-v12.16.2
```
おつかれさまでした。

#ついでにCLIログイン
```bash:wsl
$ heroku login
heroku: Press any key to open up the browser to login or q to exit: 
```
`q`以外のキーを押すとCLIログイン用のページが自動的に開きます。
そちらで自分の`Heroku`のアカウントにログイン後
コンソールに戻ると、

```bash
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/967c69c4-6b8c-4279-b7cb-a1fbd3c25d10
Logging in... done
Logged in as {あなたのメールアドレス}
```
となり、ログイン成功です

#おわりに
wslでもHeroku。
たのしいWebアプリ制作ライフを！

さよなら:wave:

#参考
- [Heroku公式](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)
scpコマンド備忘録

#scpコマンドでファイルを送信
今回はホストがWindowsでリモートサーバーがLinuxを想定

##1.ホストからリモートサーバに送信
Powershellで以下のコマンドを実行

###ファイルを送信したいとき
```
 scp [送信したいファイルのパス] user@[リモートサーバのIPアドレス]:~/
```

リモートサーバーのホームディレクトリにファイルが送信できる.

###フォルダごと送信したいとき

```
scp -r [送信したいファイルのパス] user@[リモートサーバのIPアドレス]:~/
```
-rをつける.

##2. リモートサーバからホストに送信したいとき
```
 scp user@[リモートサーバーのIPアドレス]:[送信したいファイルの絶対パス] C:\Users\hoge
```

リモートサーバの指定ファイルがホストのC:\Users\hoge\以下に送信される．

フォルダごと送信するときは上記と同様に-rをつける．
競技プログラミングの際に必要な知識まとめ


## 素数
[【小5算数】偶数・奇数　そして・・・素数](https://www.youtube.com/watch?v=_zgRf_ZDG8A)
[【数学】中3-5 素数と素因数分解](https://www.youtube.com/watch?v=vvPzcNRqPoc)
## 順列
[【小6算数】並べ方①](https://www.youtube.com/watch?v=B-Ic7L2uNi8)
[【小6算数】並べ方②](https://www.youtube.com/watch?v=9pFtWI3hvRw)
[【小6算数】組み合わせ方](https://www.youtube.com/watch?v=2kFHRNn9LDs)
[【小６算数】小６並べ方？組み合わせ方？？](https://www.youtube.com/watch?v=VVcCq9vkYQg)

## 確率
[【数学】中2-78 確率の意味](https://www.youtube.com/watch?v=A3MkzHwnixw)
[【数学】中2-79 確率チャレンジ Lv.1（基本編）](https://www.youtube.com/watch?v=JwS3ASE2LQY&t=67s)
[【数学】中2-80 確率チャレンジ Lv.2（2つのさいころ編）](https://www.youtube.com/watch?v=jthgguIHCno)
[【数学】中2-81 確率チャレンジ Lv.3（コイン編）](https://www.youtube.com/watch?v=_f2QplF8p4E)
[【数学】中2-82 確率チャレンジ Lv.4（色玉編）](https://www.youtube.com/watch?v=TZBCV83rP1k)
[【数学】中2-83 確率チャレンジ Lv.5（くじびき編）](https://www.youtube.com/watch?v=nNyU7AXf3h0)
[【数学】中2-84 確率チャレンジ Lv.6（カード編）
](https://www.youtube.com/watch?v=CoAStQr8zdg)
## 直方体
[【小5算数】直方体と立方体の体積①](https://www.youtube.com/watch?v=0jA19hyxEvc&t=360s)


## 平方根
[【数学】中3-15 平方根①](https://www.youtube.com/watch?v=T_HwQ4iu0gk&t=145s)
[【数学】中3-16 平方根②](https://www.youtube.com/watch?v=GkxQp2XjF9E)
[【数学】中3-17 ルートの変形](https://www.youtube.com/watch?v=nkpt9KkNxh4)

## 比例・反比例
[【小6算数】反比例の性質](https://www.youtube.com/watch?v=UVIKefBQ4K0)
[【小6算数】反比例の式](https://www.youtube.com/watch?v=NFfMIo7gCAQ)
[]()

## 等式
[【中1 数学】中1-27 等式の性質](https://www.youtube.com/watch?v=kAW494c3xdk)

## 数B

[【高校数学】数B-数学的帰納法①](https://www.youtube.com/watch?v=IG0OBv9EHMY&t=1s)
[【高校数学】数B-漸化式①](https://www.youtube.com/watch?v=xuKbg3B5WT4)

## 数A
[【高校数学】数A－２ 集合②](https://www.youtube.com/watch?v=JWuGqiGUKH8)
[【高校数学(発展)】合同式①(modとは何か)【整数】](https://www.youtube.com/watch?v=6COGmURbrAw)
[【高校数学】　数A－７４　合同式](https://www.youtube.com/watch?v=wCSO5X5zE5o)
## 対数
[対数とは~対数のわかりやすい説明~](https://manapedia.jp/text/3127)

## 最大公約数 
[【高校数学】数A-ユークリッドの互除法](https://www.youtube.com/watch?v=yA7qf42FMqs&t=215s)
[数学のチート級裏技【#11】受験に役立つ「ユークリッド互除法」「最大公約数/最小公倍数」のわかりやす過ぎる解説！](https://www.youtube.com/watch?v=FglHDe8u9HQ)

## 2点間の距離
[二点間の距離を求める公式](https://mathwords.net/nitennokyori)

## 計算量について
[計算量オーダーの求め方を総整理！  〜 どこから log が出て来るか 〜](https://qiita.com/drken/items/872ebc3a2b5caaa4a0d0)
pythonからsql

w3schoolsのチュートリアルを最初からやったほうがいいかもしれない。
https://www.w3schools.com/python/python_mysql_getstarted.asp

ループで変数をinsertするときに%sするのを忘れていた
https://www.w3schools.com/python/python_mysql_insert.asp
'''
import mysql.connector

mydb = mysql.connector.connect(
  host="localhost",
  user="yourusername",
  passwd="yourpassword",
  database="mydatabase"
)

mycursor = mydb.cursor()

sql = "INSERT INTO customers (name, address) VALUES (%s, %s)"
val = ("John", "Highway 21")
mycursor.execute(sql, val)

mydb.commit()

print(mycursor.rowcount, "record inserted.")
'''




UNIQUE Constraintについて
https://www.w3schools.com/sqL/sql_unique.asp


pandasでto_sql
https://www.haya-programming.com/entry/2019/05/03/043334
シェルをbashからzshに変更する

# シェルをbashからzshに変更する
　1. zsh 導入
　2. sh-completion 補完拡張
　3. prezto コンフィグレーションフレームワーク
　4. peco コマンド履歴検索


# zsh導入手順
## １．zshインストール
```bash
$ brew install zsh
```

## ２．補完の拡張「zsh-completion」のインストール
`zsh-completion`をインストールする

```bash
$ brew install zsh-completion
```

`zsh-completion`を有効にする

```bash
$ vi .zshrc
if type brew &>/dev/null; then
 FPATH=$(brew --prefix)/share/zsh-completions:$FPATH
 autoload -Uz compinit
 compinit
fi
```

`zcompdump`を再構築する
`zcompdump`には、コマンドと関数が登録されている

```bash
$ rm -f ~/.zcompdump
$ compinit
```

[zsh compinit: insecure directories]が表示された場合

```bash
$ chmod go-w ‘/usr/local/share’
```

## ３．コンフィグレーションフレームワーク「prezto」のインストール

`zsh`を起動する

```bash
$ zsh
```

`prezto`のリポジトリをクローンする

```zsh
$ git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"
```

提供されている Zsh 設定ファイルをコピーして、新しい Zsh 設定を作成
`.zshrc`があるとエラーになるため、`.zshrc`を別名にする

> /Users/{user}/.zshrc: File exists

```zsh
$ mv .zshrc .zshrc_temp
```

`prezto`が設定された`.zshrc`を作成する

```zsh
$ setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done
```

コピーした`.zshrc`を追記する

```zsh
$ cat .zshrc_temp >> .zshrc
```

## ４．コマンド履歴検索「peco」のインストール

`peco`をインストールする

```zsh
$ brew install peco
```

`.zshrc`に以下を追加する

```zsh
$ vi .zshrc
peco-select-history() {
    BUFFER=$(history 1 | sort -k1,1nr | perl -ne 'BEGIN { my @lines = (); } s/^\s*\d+\*?\s*//; $in=$_; if (!(grep {$in eq $_} @lines)) { push(@lines, $in); print $in; }' | peco --query "$LBUFFER")
    CURSOR=${#BUFFER}
    zle reset-prompt
}
zle -N peco-select-history
bindkey '^r' peco-select-history
```

## ５．ログイン時のシェル変更

`/etc/shells`の最後の行にパスを追加する

```zsh
$ sudo vi /etc/shells
/usr/local/bin/zsh
```

ログイン時のシェルを変更する

```zsh
$ chsh -s /usr/local/bin/zsh
Changing shell for <user>.
Password for <user>: 
```

細かい設定は、おいおい。。やっていきます！

## ６．ターミナルから`zsh`を起動
<img width="755" alt="スクリーンショット 2020-04-29 1.16.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628225/d3effc99-275a-5bc5-f4a2-fa9976f0586f.png">

# 参考
* [zsh-completions](https://github.com/zsh-users/zsh-completions)
* [prezto](https://github.com/sorin-ionescu/prezto)
ITパスポート取得勉強開始

まずITパスポートを取得しようと思ったきっかけは、面接した企業の方から未経験からITに転職するにあたって取得して損はないと、教えてもらったことから。
プログラミングの勉強も、合間でやろうと思う。
### ITパスポート取得のためのアウトプット用に活用するのが目的
ITパスポートは、ITに関することの資格と思ったが、会社、法務、経営マネジメントに関するものも出てくる。
**出題範囲「ストラテジ系」「マネジメント系」「テクノロジ系」の３分野**

####ストラテジ系
**企業活動**
経営理念とは、企業の存在意義
株主総会は株式会社の最高意思決定機関
CSRとは、企業の社会的責任
ABC分析：重要度でランク付け
散布図：相関関係は「正の相関」「負の相関」「相関なし」
自己資本比率とは、自己資本÷総資本×１００
**法務**
著作権は、著作物を創作した時点で自動的に発生
プログラミング言語、アルゴリズム、プロトコルは、著作権法で保護されない
コンプライアンスとは、「法令」「社内ルール」「企業倫理」
個人情報の具体例、氏名と住所、社員名と役職、個人が識別できる映像や音声
コーポレートガバナンスとは、利害関係者が経営を監視する仕組み
JANコードは、商品を区別するためのコード
QRコードの特徴は「２次元」「英字や漢字も記録可」「どの角度からも読み取り可」
ISO 9000　　 品質マネジメントシステム
ISO 14000　　環境マネジメントシステム
ISO 27000　　情報セキュリティマネジメントシステム
**経営戦略マネジメント**
SWOT分析：自社を取り巻く経営環境を把握できる
SWOT分析：内部環境とは、ジスあの努力で変えられる
SWOT分析：外部環境とは、自社でコントロールできない
PPM：縦軸は市場成長率、横軸は市場占有率
マーケティングミックスの４P：「Product(製品)」「Price(価格)」「Place(流通)」「Promotion(販売促進)」
BSC：「財務」「顧客」「業務プロセス」「学習と成長」
ERP：経営資源(ヒト、モノ、カネ、情報)を統合的に管理する手法
styled-componentsの中でTailwind CSSのクラスを使えるようになるtailwind.macroの紹介

# はじめに
タイトル通り、styled-componentsの中でTailwind CSSのクラスを使えるようになるtailwind.macroの紹介です。

# 環境
* tailwindcss v1.3.5
* styled-components v5.1.0

#導入方法
Tailwind CSSとstyled-componentsの導入を前提にします。

[tailwind.macro](https://github.com/bradlc/babel-plugin-tailwind-components)を導入してstyled-components内でtailwind CSSを使用できるようにします。
とりあえずパッケージのインストール

```bash
npm install --save-dev babel-plugin-macros tailwind.macro
```
または

```bash
yarn add -D babel-plugin-macros tailwind.macro
```

ここで注意ですが、2020/4/28現在、Tailwind CSSの最新バージョンを使用する場合はv1.0.0-alpha.10を使用しないといけません。
https://github.com/bradlc/babel-plugin-tailwind-components/releases/tag/v1.0.0-alpha.2

なので、以下のコマンドを実行します。


```bash
npm install --save-dev tailwind.macro@next
```
または

```bash
yarn add -D tailwind.macro@next
```

tailwind.macroはbabelのプラグインなので.babelrcに以下を追加

```json:.babelrc
{
  "plugins": ["macros"]
}
```

これで導入が完了したので、次のような構文でstyled-components内でTailwind CSSを使用することができます。これによりTailwind CSSのクラスを擬似要素内で書くこと等ができるようになったりと表現の自由度が高まります。

```react:button.tsx
import styled from 'styled-components'
import tw from 'tailwind.macro'

const Button = styled('button')`
  ${tw`font-mono text-sm text-red hover:text-blue`};
`
```

# ハマった点
開発時にStorybookを使用しているのですが、rootにtailwind.config,jsを置いていた時にtailwind.config,jsを読み込めないエラーが発生してハマりました。
原因はStorybookで@storybook/preset-create-react-appを使用している時にsrc配下しか読み込めないことでした。仕方ないのでsrc配下にtailwind.config,jsを移動し、babel-plugin-macros.config.jsを作りパスを指定してやることで一旦回避しました。

```javascript:babel-plugin-macros.config.js
module.exports = {
  tailwind: {
    config: './src/tailwind.config.js',
    format: 'auto',
  },
};
```
Storybook v6.0ではsrcや.storybookディレクトリ内に記述しなければいけない制限がなくなるようなので、リリースを待ってリファクタをしようと思います。

#まとめ
styled-componentsの中でTailwind CSSのクラスを使えるようになるtailwind.macroの紹介をしました。Storybook v6.0のリリースに合わせて改善できる点があればこの記事を編集するか別記事で紹介すると思います。
ブラウザのXMLHttpRequest(xhr)でSlackとDiscordのWebhook URLにPOSTするサンプル


最近触っていて、それっぽい簡易サンプルがなかったのでメモしておきます。

jQueryやaxiosでやっても良いのですが、xhrでシンプルに。

## to Slack

Slackはこれまでのincoming webhookと作り方が変わったのでSlack側の設定で苦戦するかも。

```js
function toSlack(message) {
    const url = 'Webhook URL';
    const data = {
        text: message
    };
    
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url, false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    xhr.send('payload=' + JSON.stringify(data))
}

const msg = `hello slack~`;
toSlack(msg); //実行
```

## to Discord

Discrodは割とシンプルです。

Slackの`application/x-www-form-urlencoded`とは違い、`application/json`で送ります。(むしろこっちの方が多いか)

```js
function toDiscord(message){
    const url = 'Webhook URL';
    const data = {
        content: message
    };
    
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url, false);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data))
}

const msg = `hello discord~`;
toDiscord(msg); //実行
```
PMPのプロジェクト憲章はPMBOKガイドのどこに記載があるのか！

# PMPのプロジェクト憲章はどこに記載があるのか
PMBOKガイド(6th Edition)の81ページ `4.1.3.1 PROJECT CHARTER`に記載があるぞ！
75ページの`Figure 4-2`の`Develop Project Charter`の`ITTO`もチェックしよう！

## ITTO とは
インプット、ツール&テクニック、アウトプットのことである！
- Inputs
- Tool & Techniques
- Outputs

# プロジェクト憲章に記載すべき内容の例
- Project purpose
- Measureable project objectives and related success criteria
- High-level requirements
- High-level project description, boundaries and key deliverables
- Overall project risk
- Summary milestone schedule
- Preapproved financial resources
- Key stakeholder list
- Project approval requirements
    - what constitutes project success
    - who decides the project is successful
    - who signs off on the project
- Project exit criteria
    - what are the conditions to be met in order to close or to cancel the project or phase
- Assigned project manager, responsibility and authority level
- Name and authority of the sponsor or other persons authorizing the project charter

わからなくなったらPMBOKガイドを見ればいいね！

## プロジェクト憲章のテンプレート
こことかいろんなところにプロジェクト憲章のテンプレートはある
https://templatearchive.com/project-charter/

----
よかったよかった
gulp + postcss + autoprefixer でベンダープレフィックスが出力されなかった

## やりたいこと

gulp + postcss + autoprefixer でCSSのベンダープレフィックスの指定を自動化したい

参考: https://qiita.com/yushimasu/items/0125e72a8810658b70d3

## 問題

出力されるCSSにベンダープレフィックスが出力されない。

## 期待される挙動

出力されるCSSにベンダープレフィックスが含まれて欲しい。

## 対象のコード

ディレクトリ構造

```
.
├── css
│   └── style.css
├── gulpfile.js
├── node_modules
├── package-lock.json
├── package.json
└── sass
    └── style.sass
```

```package.json
{
  "name": "autoprefixer-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "gulp:sass": "gulp sass",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.6",
    "gulp": "^4.0.2",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.1.0",
    "node-sass": "^4.14.0"
  }
}
```

```gulpfile.js
'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
 
sass.compiler = require('node-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.sass')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
```

```style.sass
div
  display: flex
```

```style.css
div {
  display: flex; }
```

## 解決方法

`.browserslistrc`で対象ブラウザを指定する。

ex)

```.browserslistrc
> 1%
last 2 versions
IE 9
IE 10
IE 11
```

## 詳細

まずはドキュメントを確認してみる。

とりあえず [autoprefixer](https://www.npmjs.com/package/autoprefixer) の options を確認すると

> stats (object): custom usage statistics for > 10% in my stats browsers query.
> overrideBrowserslist (array): list of queries for target browsers. Try to not use it. The best practice is to use .browserslistrc config or browserslist key in package.json to share target browsers with Babel, ESLint and Stylelint. See Browserslist docs for available queries and default value.

という記載がありました。

上記のオプションは「ベンダープレフィックスをつけるブラウザはなんですか？」という指定で、デフォルトでは `> 10% in my stats` という指定らしい。

これがどのブラウザを対象とするのかよく分かりませんが、 [browserl.ist](https://browserl.ist/?q=%3E+10%25) でこの指定を確認してみると、どうやら実質Chromeしか対応されないみたい？

(指定の仕方は調べていないので、確認方法は間違っているかも)

ということで、この対象ブラウザを広げてあげればベンダープレフィックスつくのかな？って感じで指定を変更してみます。

前述の引用より、指定を変更するには `.browserslistrc` ファイルで指定するか、  `package.json` に `browserslist` というキーで指定してね、ということなので、 `package.json` に以下追加。

```
"browserslist": [
    "defaults",
    "IE 10",
    "IE 9"
]
```

これでコンパイルすると、 `display: -ms-flexbox;` が増えたので、どうやらブラウザの指定を追加する必要があるということであっているみたいです。

※ブラウザの指定は `.browserslistrc` で行うのが一般的ですが、今回はシンプルに検証するために横着しました。

`.browserslistrc` を使った方が良いと思います。
【今日のアブストラクト】Dataset Distillation【論文 DeepL 翻訳】

この記事は自分用のメモみたいなものです.
ほぼ [DeepL](https://www.deepl.com/home) 翻訳でお送りします.
間違いがあれば指摘していだだけると嬉しいです.

翻訳元
[Dataset Distillation](https://arxiv.org/abs/1811.10959)

# Abstract

### 訳文

モデル蒸留は, 複雑なモデルの知識をより単純なものに蒸留することを目的としている. この論文では, データセット蒸留と呼ばれる別の定式化を検討する: モデルを固定したままにして, 代わりに大規模な学習データセットから小さなデータセットに知識を蒸留しようとする. このアイデアは, 正しいデータ分布から来る必要はないが, 学習アルゴリズムに訓練データとして与えられたときに, 元のデータで訓練されたモデルに近似する少数のデータポイントを合成することである. 例えば, $60,000$ 枚の MNIST 訓練画像をわずか $10$ 枚の合成蒸留画像 (クラスごとに $1$ 枚) に圧縮し, 固定のネットワーク初期化を行うことで, わずか数回の勾配降下ステップで元のデータに近い性能を達成できることを示した. 我々は, 様々な初期化設定と異なる学習目的で我々の手法を評価する. 複数のデータセットを用いた実験により, 他の手法と比較して本手法の優位性が示された.


### 原文

Model distillation aims to distill the knowledge of a complex model into a simpler one. In this paper, we consider an alternative formulation called dataset distillation: we keep the model fixed and instead attempt to distill the knowledge from a large training dataset into a small one. The idea is to synthesize a small number of data points that do not need to come from the correct data distribution, but will, when given to the learning algorithm as training data, approximate the model trained on the original data. For example, we show that it is possible to compress 60,000 MNIST training images into just 10 synthetic distilled images (one per class) and achieve close to original performance with only a few gradient descent steps, given a fixed network initialization. We evaluate our method in various initialization settings and with different learning objectives. Experiments on multiple datasets show the advantage of our approach compared to alternative methods.