OmniAICreator/Qiita-1.07M huggingface dataset:
ゼロから始めるLeetCode Day31「581. Shortest Unsorted Continuous Subarray」

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

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

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

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

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

[ゼロから始めるLeetCode 目次](https://qiita.com/KueharX/items/6ee2502c3b620c795b70)

前回
[ゼロから始めるLeetCode Day30「234. Palindrome Linked List」](https://qiita.com/KueharX/items/73ec43d8c4f6da343fcd)

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

[Twitter](https://twitter.com/kueharx)やってます。


# 問題
[581. Shortest Unsorted Continuous Subarray](https://leetcode.com/problems/shortest-unsorted-continuous-subarray/)
難易度はeasy。
Top 100 Liked Questionsからの抜粋です。

問題としては、整数の配列が与えられます。
この配列を昇順で並べ替えると、配列全体を昇順で並べ替えられる連続したサブ配列を見つけてください。
それらの中で最短のサブの配列を見つけ、その長さを返してください、という問題です。

例をみながら考えてみましょう。

> Example 1:
Input: [2, 6, 4, 8, 10, 9, 15]
Output: 5
Explanation: You need to sort [6, 4, 8, 10, 9] in ascending order to make the whole array sorted in ascending order.

この中で並べ替えれば配列全体が昇順に整頓されるサブ配列の中最短のものは`6`から`9`までですので、その要素数を取得して5を返しています。


# 解法


ソートした変数と最初から要素を取得する変数`start`と最後から要素を取得する変数`last`を用意し、仮にソート済みの配列と元の配列の値が一致しないならばその要素のインデックスを`start`に代入します。それを`last`の方でも行い、その差分+1が求められている要素数の長さになります。

最後に、`last-start`が成り立つならば`last - start + 1`を、それ以外は`0`を返すという関数を実装しました。

```Python
class Solution:
    def findUnsortedSubarray(self, nums: List[int]) -> int:
        start = last = 0
        num = sorted(nums)
        for i in range(len(nums)):
            if nums[i] != num[i]:
                start = i
                break
        for i in range(len(nums)-1,-1,-1):
            if nums[i] != num[i]:
                last = i
                break
        return last - start + 1 if last - start else 0
# Runtime: 196 ms, faster than 98.85% of Python3 online submissions for Shortest Unsorted Continuous Subarray.
# Memory Usage: 15.2 MB, less than 5.00% of Python3 online submissions for Shortest Unsorted Continuous Subarray.
```

かなり単純な考え方でしたが思ったより良さげですね。
Top Liked Questionsのeasyもかなり少なくなってきたので今後はMediumばかりになる気がします。

Hardに関しては、ちゃんと解けるか分かりませんが機会があれば解きます。
Powershellでパスワード付きExcelファイル複数を開く

#概要
パスワード付きのExcelファイルたくさん（パスワードはすべて共通）をいっぺんに開きたいので、Poweshellスクリプトを書いた。

#使い方
1. 開きたいファイルを適当なフォルダにまとめておく。
1. 同じフォルダに以下のスクリプトを`open_excels.ps1`として保存（メモ帳を開きスクリプトをコピペ、`open_excels.ps1`と名前を付けて保存）。
1. エクスプローラで`open_excel.ps1`を右クリック、「Powershellで実行」を選択
1. （「実行ポリシーを変更しますか？」などの警告が表示された場合）y + Enter
1. パスワードを入力しEnter
2. ファイルが順番に自動で開く（開けなかった場合、「開けませんでした」と表示）
3. Enterを押して終了
 

#スクリプト
```powershell:open_excel.ps1
$password = Read-Host("パスワードを入力")
$filepaths = Get-Item *.xlsx

$excel = New-Object -ComObject Excel.Application
$excel.Visible = $true
$excel.DisplayAlerts = $true

foreach($filepath in $filepaths){
    try {
        Write-Output $filepath
    $excel.Workbooks.Open($filepath, [Type]::Missing, [Type]::Missing, [Type]::Missing, $password) > $null
    } catch {
        Write-Host "ファイル" $filepath "は開けませんでした"
    }
}

$excel = $null
[System.GC]::Collect()

Read-Host "Enterで終了"
```
nodebrewでnodeのバージョンが変更できない時（macOS）

#起こったこと
### nodebrewでnodeのバージョンが変更できない

```
nodebrew install v14.3.0
nodebrew use v14.3.0
```

上のコマンドを実行後、下記を実行。

```
node -v
v12.16.3　（実行結果）
```

nodebrewでインストールし、指定したバージョンと異なる内容が表示される。

#解決手順
1.nodebrewをアンインストール

```
rm -rf nodebrew　（nodebrewの削除）
brew uninstall nodebrew　（nodebrewをアンインストール）
```

2.nodebrewを再インストール

```
brew install nodebrew （nodebrewをインストール）
nodebrew setup　（nodeのインストールが可能な状態にする）
nodebrew install v14.3.0　（nodeをインストール）
nodebrew use v14.3.0　（nodeを指定）
```

3.nodebrewの環境変数を設定

~/.bash_profileを開く

```
vi ~/.bash_profile
```

以下を~/.bash_profileに追加

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```


4.指定したnodeのバージョンになっているか確認

```
node -v
```

### ※エラーが発生

以下のエラーが発生

```
-zsh: node: command not found
```

シェルを変更する必要がある（-zshの部分を-bashにする必要がある）

1.自分のシェルの確認

```
echo $SHELL
```

2.シェルの変更

```
chsh -s /bin/zsh
```

3.ターミナルを閉じて、再起動

4.再度以下を実行

```
node -v
```

以上。
jQueryで.on("change が動かない | JavaScript

## 動かない

```js
$(function(){
  $("#xxx").on("change", function(){
     console.log("動かない");
   });
});
```


## 動いた

```js
$(function(){
  $("#xxx").bind("input", function(){
     console.log("動いた");
   });
});
```

## 参考

https://gist.github.com/brandonaaskov/1596867
【Git】git: 'secrets' is not a git command. See 'git --help'.というエラーがでたときの解決方法

# 環境
```
macOS 10.15.4
git 2.20.1
```

# git: 'secrets' is not a git command. See 'git --help'.というエラーがでた場合の対処方法
```
$ git commit -m "commit"
git: 'secrets' is not a git command. See 'git --help'.
```
このエラーがでたときには**git-secrets**がインストールされていませんよ！というエラー表示になります。この**git-secrets**はAWSの鍵などを誤ってGitリポジトリにプッシュしてしまうのを防ぐためのツールです。この状態ですとCommitができませんのでインストールをします。

```
$ brew install git-secrets
```
※OSはmacOSです。ちなみにHomebrewのインストールが事前に必要なので済んでいない方は下記のリンクからインストールが必要です。
https://brew.sh/index_ja

これで無事にインストールされましたのでCommitが正常に行えます^_^
AtomでAnaconda Promptを使いながらコマンドマクロファイル自動書き込みをやりたいんだ！

##0.概要
ここでは，platformio-ide-terminalパッケージを用いてAtom上でターミナル操作を行う際に，『デフォルト端末をAnaconda Promptにする』のと『コマンドマクロファイルを端末起動時に自動で書き込む』のを，同時に実施するための解決方法をまとめています．

##1.背景
Atomは様々なパッケージをインストールすることで，自分好みに環境をカスタマイズできる非常に自由度の高いエディタです．自分もまだ使い始めて間もないですが，すでにその使いやすさの虜になっています．

このパッケージの中で，特に気に入っているものが，<font color="OrangeRed">platformio-ide-terminal</font>です．こいつのおかげで，いままで煩雑だった，ターミナルとエディタ間の切り替えが無くなり，すべてエディタ上の操作で完結させることができます．

これから構築しようとしている開発環境ではワケあってAnacondaの利用が必須であったため，下記参照ページの設定方法に従い，Atom上でのデフォルト端末をAnaconda Promptに設定しました．

参照URL：https://qiita.com/daizutabi/items/6e4e7042b764b61adf27

##2.環境
OS：Windows10 Enterprise 1809 64bit
Atom：1.47.0
platformio-ide-terminal 2.10.0
Anaconda Navigater 1.9.12


##3.困ったこと
さて，ここで困ったことが発生しました．というのもここ最近，Linux OSの環境で端末操作を行うことも増えてきたこともあり，コマンドプロンプト上では，Linuxライクな端末コマンドが使えるように設定したコマンドマクロファイルを活用していました．(コマンドマクロについては手前味噌ですが以下のページをご参照ください．)

参照；https://qiita.com/titanium0715/items/8bbad95f939017302d38

上記参照ページでは，コマンドプロンプトのショートカットのプロパティ上で，kオプションを追加することで対応していました．ところが，Atomではショートカットを介さずに直接cmd.exeを読み込みに行ってしまうため，上記解決方法を使用することはできません．なのでこれを解決するためには，platformio-ide-terminalのsettingより，Auto Run Commandに<font color="OrangeRed">①</font>```doskey /macrofile=C:\{Private Path}\{コマンドマクロファイル}.txt```を設定してやる必要があります．

↓↓↓　参照図　↓↓↓
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632866/55a83acd-8af1-c83c-d202-5ba677a134c6.png)


しかし，1.背景に挙げた参照URLにもありますように，Atom上でAnaconda Promptを動かそうとするには，Auto Run Commandには<font color="OrangeRed">②</font>```{Private Path}\{miniconda or Anaconda}\Scripts\activate.bat root```を記載する必要があります．

Atom上で，Anaconda Promptを使いながら，マクロファイルの設定も行いたい・・・．じゃあ<font color="OrangeRed">①</font>と<font color="OrangeRed">②</font>を二つとも書けばいいじゃん！って思ったのですが，単純に横に並べただけでは，Atom上で端末が立ち上がらなくなったり，どちらか一方の指示だけが通ってしまっていたりと，うまくいきませんでした．

##4.解決方法
いろいろと試した結果，以下の書き方でAuto Run Commandを記載してやれば，どちらの設定も反映させることができました！

<font color="OrangeRed">__doskey /macrofile=C:{Private Path 1}\{コマンドマクロファイル}.txt & C:{Private Path 1}\Anaconda3\Scripts\activate.bat root__</font>

ポイントは，『__二つのコマンドを"&"でつなぐこと__』，あとは『__①⇒②の順番で書く__』というところです．順番についてはかなり悩まされまして，②⇒①の順番で書いていたときは何をやっても適切な設定が行えてませんでした．以後，要注意です．
　
　
　
　
バッチファイルの文法とかが分かっていれば，こんな苦労はしなかったのかもしれないなぁ．
大阪府のコロナ追跡システムを考えてみる2

大阪府のコロナ追跡システムの開発費が80万円以内、14日間で納めるシステム開発続き。
初めての方は1もご覧ください。

# 基本設計(外部設計)
感染者を特定するのではなく、あくまで感染者に接触した可能性を通知するシステム。

##概要設計(システムのフロー)
すでにシステムイメージは公開されていますが、整理すると以下のような感じ。

<img width="1196" alt="4200E633-6BDB-4834-AA9F-32A63EB0213A.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640053/b5464f72-8ff1-4492-b04f-e1c49e2750f7.jpeg">

今回実現するのは、以下3箇所。
###ユーザサイド
①QRコードの登録
③メール通知
###オーナーサイド
お店のデータ管理

##方式設計
使用言語:Ruby(これしかできない。。。),PHP,MySQL
使用機器:施設ブレードサーバ内に仮想サーバ(VM)構築。NW含め、こちらの設計は範囲外。


##機能設計
1.ユーザのメールアドレスを登録する機能
2.事業者のQRコードを作成する機能
3.1と2を管理する機能
4.3を基に通知する機能

## 画面設計
1.メールアドレス登録する画面(GUI)
2〜4については、CLIで行うので設計するのは1画面。
時間があれば、GUIで改良する(まだ、そこまで考えていないし)。
###メールアドレス登録画面
店名の表示
メールアドレスの登録フォーム
登録ボタン
を記載する。
以下のイメージ。
<img width="482" alt="53B626ED-0593-4673-B2E3-208A335FA51A.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/640053/e376947f-ada2-59b9-2fff-2d20eaef34da.jpeg">

流石にもっとまともな画面だと思うが、必要な機能はあくまでも登録。
10年前地元の歯医者のWeb予約システムの画面もこんなもんだったし。。。

#まとめ
次回はいよいよ詳細設計(内部設計)に入る。
要件定義以降の呼び方は人(会社)によって変わる気がする。
「顧客が本当に必要だったもの」を目指す。
【記録用】Pandas備忘録

今回はPandasを使った際に、すぐに分からなかった事象のまとめです。
結構Pandasってどうやって操作すればいいのかな？って迷うことも多いので少しでも参考になれば幸いです。

#使用するデータセット作成
- まずは適当にデータセットを作成する。本記事はこの簡単なデータを例に書いていく

```Python:

index = ['製品A', '製品B', '製品C']
columns = ['春', '夏', '秋', '冬']
data = np.array([
    [0,10,20,30],
    [0,0,100,20],
    [50,100,20,40],
])

df = pd.DataFrame(data, index=index, columns=columns)
df.head()
```

|  |春  |夏  |秋  |冬  |
|---|---|---|---|---|
|製品A  |0  |10  |20  |30  |
|製品B  |0  |0  |100  |20  |
|製品C  |50  |100  |20  |40  |

#ケース①各行の最大値,最小値に対応しているカラム名、そしてその値を抜き出して追加

- つまり製品Aなら冬が一番大きく製品Cなら夏が一番大きい数字なので、新しいカラム「売れる季節」にその季節を挿入する

```Python:
for index, row in df.iterrows():
    
#     df.ix[index, '売れる季節'] = row.argmax()
    df.ix[index, '売れる季節'] = row.idxmax() #どっちでもできる

#     df.ix[index, '売れない季節'] = row.argmin()
    df.ix[index, '売れない季節'] = row.idxmin() #どっちでもできる
    
    df.ix[index, 'MAX'] = row.max()
    df.ix[index, 'MIN'] = row.min()

df.head()
```

|  |春  |夏  |秋  |冬  |売れる季節  |売れない季節  |MAX  |MIN  |
|---|---|---|---|---|---|---|---|---|---|
|製品A  |0  |10  |20  |30  |冬  |春  |30  |0  |
|製品B  |0  |0  |100  |20  |秋  |春  |100  |0  |
|製品C  |50  |100  |20  |40  |夏  |秋  |100  |20  |


#ケース②各行で最初に正の整数になるカラム名を抜き出して追加

- つまり各製品が初めて売れ始めた季節を出したい。Aなら夏、Bなら秋という感じ

```Python:
for index, row in df.iterrows():
#index[0]で最初に条件が成立したものを取り出す
    df.ix[index, '売れ始め季節'] = row[row > 0].index[0] 
    
df.head()
```

|  |春  |夏  |秋  |冬  |売れ始め季節  |
|---|---|---|---|---|---|
|製品A  |0  |10  |20  |30  |夏  |
|製品B  |0  |0  |100  |20  |秋  |
|製品C  |50  |100  |20  |40  |春  |

#ケース③0が１つも入ってない行を抜き出したい

- つまり年中売れている製品Cの行を抜き出したい

```Python:
#not_zero_df = df.query('春 > 0 and 夏 > 0 and 秋 > 0 and 冬 > 0')
#not_zero_df = df.query('春 != 0 and 夏 != 0 and 秋 != 0 and 冬 != 0')

# ↑でもいいが変数として外だしも可能。下で「@」をつければいい
hoge1,hoge2,hoge3,hoge4 = 0,0,0,0 
not_zero_df = df.query('春 > @hoge1 and 夏 > @hoge2 and 秋 > @hoge3 and 冬 > @hoge4')
    
not_zero_df.head()
```

|  |春  |夏  |秋  |冬  |
|---|---|---|---|---|
|製品C  |50  |100  |20  |40  |

- ちなみに夏のみに着目して0以外を抽出したい場合は同じくこう書けばいい(夏が0でない行を取り出す)

```Python:
hoge = 0 
not_zero_df = df.query('夏 != @hoge')
    
not_zero_df.head()
```
|  |春  |夏  |秋  |冬  |
|---|---|---|---|---|
|製品A  |0  |10  |20  |30  |
|製品C  |50  |100  |20  |30  |

<br/>


**今後も随時追記していく予定です**
初心者の単語Ｎｏ2(メソッド、フィールド、その他)

## メソッド
目的を達成する為に決められたルール。方式
オブジェクト指向では、**オブジェクトに対する操作を定義した手続き**。

## フィールド
・オブジェクト指向では、オブジェクトやインスタンスをもつ固有のデータのこと。
・言語によっては、**「プロパティ」**や**「メンバ変数」**と呼ぶ
・テーブルでは、行やレコードを構成する個々の要素やデータを指す
・ユーザーインターフェースでは、入力フォームなどを構成する個々の入力項目や書き込みランなどの事。
・フレームやパケットのフィールドでは、データの送受信多いん位において、ヘッダなど制御用のデータ領域に送信された個々のパラメータの為の領域

## インポート宣言
・パッケージ名を省力するクラスを指定する事。
ソースファイルのクラス宣言の前に、**「importパッケージ名.クラス名」**と指定する事で、
指定したクラスをパッケージ名を省略して使用することができる。

## コンストラクタ
メソッドの一種で、クラスをnewしたときに実行されるもの。
３つのルールがある。
**1.メソッド名をクラス名と同じ**
**2.戻り値型は記述できない**
**3.newと一緒にしか使えない**

## パッケージ
荷物、小包、筐体、一括などの意味を持つ英単語
ＩＴでは、関連する様々な要素を一つに纏めたもの。
パッケージの目的として
⇒1.名前空間を提供して、**同じ名前の衝突を避ける**
⇒2.アクセス修飾子（publicやprivateなど）と組み合わせて**アクセス制御機能を提供**する
⇒3.**クラスの分類を可能**にする
などがある。
Windows Terminal 1.0 のカスタマイズで役に立った情報源 (2020年5月)

※ Hyper Terminal の話じゃないんだからね！

ついに [Windows Terminal 1.0 が出ました](https://devblogs.microsoft.com/commandline/windows-terminal-1-0/) ね、嬉しい限りです！
2020年5月現在の Windows Terminal のカスタマイズや普段使いをするために必要な情報が得られた情報源をピックアップしておきます。

## `settings.json` のリファレンス

[Settings.json Documentation](https://github.com/microsoft/terminal/blob/master/doc/cascadia/SettingsSchema.md)
ここが設定項目のすべてとなります。

編集方法は [Editing Windows Terminal JSON Settings](https://github.com/microsoft/terminal/blob/master/doc/user-docs/UsingJsonSettings.md) をご覧ください。

※ `profiles.json` から `settings.json` にファイル名が変わっています。

### `settings.json` の格納フォルダ

`settings.json` は
`%LOCALAPPDATA%\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\LocalState\`
に保存されています。

```cmd:cmdプロンプト
start %LOCALAPPDATA%\Packages\Microsoft.WindowsTerminal_8wekyb3d8bbwe\LocalState\
```
で一発で開けます。

情報源: [Editing Windows Terminal JSON Settings](https://github.com/microsoft/terminal/blob/master/doc/user-docs/UsingJsonSettings.md)

### カスタマイズのポイント

`"profiles"` の中の `"defaults"` が各プロファイルの基になります。フォントサイズ等共通的な内容はここに記載して、差分を作るのが楽でしょう。

情報源: [Default settings](https://github.com/microsoft/terminal/blob/master/doc/user-docs/UsingJsonSettings.md#default-settings)

### 個人的に設定した内容

* Globals
    * `"alwaysShowTabs"`: **false** と `"showTabsInTitlebar"`: **false** // 1枚の時はタブが無くてもいいじゃない。
    * `"copyOnSelect"`: **true** // テキストを選択した瞬間にコピー完了、便利。
    * "profiles": {
        * "defaults": {
            * `"cursorShape"`: `"vintage"` // カーソル形状はこれが好き。
            * `"padding"`: `"12, 12, 12, 12"` // 標準(8) より少し大きめの余白があると選択しやすくなる。

## WSL 上での $HOME をstartingDirectory にする方法

例えば ディストリビューション名が **Ubuntu-20.04** で、その中で利用するユーザ名が **ubuntu-user** だったら以下のように設定します。

```json
{
    "name": "Ubuntu-20.04",
    "commandline" : "wsl -d Ubuntu-20.04",
    "startingDirectory" : "//wsl$/Ubuntu-20.04/home/ubuntu-user",
}
```

ディストリビューション名は `wsl.exe -l` で得られます。

情報源: [Setting the startingDirectory of WSL Profiles to ~](https://github.com/microsoft/terminal/blob/master/doc/user-docs/UsingJsonSettings.md#setting-the-startingdirectory-of-wsl-profiles-to-)

※ commandline に `wsl -d ~ DistroName` と `~` を使う方法は Obsolete のようです。

## OneDrive とシンボリックリンクを利用して複数 PC 間で settings.json を同期する方法

[Windows Terminal の設定(settings.json)を複数の PC で共有する方法 (OneDrive の場合)](https://qiita.com/ma2shita/items/a6256ef3d81329f52ec7) に移動しました。

## おわりに

WSL2 早く来い。

EoT
jupyter nteractをherokuサーバーで立ち上げてみた（jupyter notebookでもやることは同じ）

#きっかけ

flask、herokuを利用し、ちまちまとテキストマイニング・可視化webアプリを作っていた。
ある日、nteractを知る。

**nteract**
　https://github.com/nteract/nteract
　https://blog.nteract.io/designing-the-nteract-data-explorer-f4476d53f897
　・自動インタラクティブ可視化機能がついたjupyter notebookだとおもいねぇ。

「おう、pandasのDataFrame表示するんと同じ手間でこんだけ可視化できるんけ。こりゃ使うてみるしかあるまぁのう・・・（試用中）・・・なんぼか弱点はあるのう・・・
　弱点はあらぁが、webアプリとできれば、ハードを選ばずどこからでもやりたいときに速やかに可視化できよる。制限の多いGoogle Colaboratoryより、ある意味便利かのう。」

というわけで、
heroku上でnteractを稼働させてみた。

　
#参照
＊なぜかnteractの情報はあまりないのよね・・・

Pythonを使った機械学習の勉強にはJupyter NotebookをHerokuの無料枠で立ててスマホからでも実行できるようにして共有しよう
https://qiita.com/G-awa/items/8530a10cb847e4080df3

Deploy a Jupyter Notebook Online with Voila and Heroku
https://pythonforundergradengineers.com/deploy-jupyter-notebook-voila-heroku.html


#構成

heroku：アプリケーションサーバー
nteract：heroku上で起動させる
github private：ファイルサーバー


#コード

- 次のファイルを作成しデプロイ。指定されたアドレスを開けば動く。
- 注意：herokuの準備および説明は省略します。
- 注意：パスワードなどセキュリティ関連の処理は省略します。足すことを強くお勧めします。
- 注意：githubのpriveteをファイルサーバー代わりとしていますが、関連する処理は省略します。

```:ディレクトリ構成
xxxxxx (任意）
 ┣  Procfile
 ┣  requirements.txt
 ┣  start_jupyter
 ┗  （任意のipynbファイルなど）
```

```:requirements.txt　要事増減させてください
gunicorn==19.9.0
click==7.1.1
Flask==1.1.2
itsdangerous==1.1.0
Jinja2==2.11.2
MarkupSafe==1.1.1
numpy==1.18.3
pandas==1.0.3
plotly==4.6.0
python-dateutil==2.8.1
pytz==2019.3
retrying==1.3.3
six==1.14.0
Werkzeug==1.0.1
xlrd==1.2.0

nteract_on_jupyter
matplotlib
PyGithub
```

```:Procfile
web: chmod +x start_jupyter ; start_jupyter
```

```:start_jupyter
#!/usr/bin/env bash
jupyter nteract --no-browser --ip=* --port=$PORT
```

```
$ cd xxxxxx
$ git init
$ heroku create xxxxxx 
$ git add .
$ git commit -m "first"
$ git push heroku master
```

#稼働例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284074/81c13ec1-453f-4bc3-edd2-b6538ce1dc3b.png)

herokuサーバーに常最新の前処理コードを記載したipynbファイルを置いておきけば、実行するだけで簡単に分析ができる。


#使用上の注意
herokuの仕様上、作成したデータやファイルは一定期間で消えてしまいます。必要なファイルがあるならば、herokuサーバー外に保存しておくことを忘れないようにしましょう。
（実行するごとにファイルをメール送信するコードを書いておく、などありえるでしょう。自分はそうしています。）

#参考
＊要事mecabなど入れておいてもよいでしょう。
　HerokuにMeCabを入れる際ハマっていた記録
　　https://qiita.com/kzuzuo/items/1b3e9c9af57bd4464690

＊次、nteractベースに変更しても良いかな・・・
　特許など比較的長文の文章間　類似可視化手法:　tfidf/cluster vis: tfidf-word2vec-clustering visualization
　　https://qiita.com/kzuzuo/items/8a80d8974bf3a7db7e54

＊次のようにin/outのないipynbファイルを入れておくのもよい
　e-Gov法令APIとXML　Pythonを用いた特定ワードが含まれる条文抽出
　　https://qiita.com/kzuzuo/items/d53ff2e092a69424fea0

＊nteractではなくjupyter notebookであってもやることは同じ。
＊webアプリ単体として成り立たせるならば、Dashで良い気もしている。
＊pandasベースのインタラクティブ可視化手法には、Pandas-Bokehもあるらしい。
　https://github.com/PatrikHlobil/Pandas-Bokeh/blob/master/README.md
＊pandasベースのインタラクティブ可視化手法には、Cufflinksもある。
　https://medium.com/@ozan/interactive-plots-with-plotly-and-cufflinks-on-pandas-dataframes-af6f86f62d94
→pandasのplot()からplotlyが呼べるようになったそうです。

```
pd.options.plotting.backend = `plotly`
df.plot.bar()
```

＊インタラクティブ可視化手法には、もちろんplotlyもある。
Windows Terminal入門

#概要
インストールから、PowershellをOh-my-zshっぽい見た目にするまで。

# インストール
Microsoft Storeから Windows Terminalを検索、インストール

#テーマの設定
メニューバーの下向き矢印　>　Setting
settings.jsonファイルが開く

```
   "profiles":
    {
        "defaults":
        {
            // Put settings here that you want to apply to all profiles.
	    "colorScheme":"Tango Dark"
        },
```

"colorScheme":"カラースキーム名"
と設定する。
シェルに関係なくデフォルトとしたい場合は上記の場所に記述する。
設定可能なカラースキームは下記。
https://aka.ms/terminal-color-schemes

# Oh-my-zsh風の表示
posh-git, Oh-my-posh, PSReadline というモジュールがあるのでそれを使う。

powershellから以下のコマンドを実施

```
Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser
Install-Module -Name PSReadLine -Scope CurrentUser -Force -SkipPublisherCheck
```

PSReadLineをインストールする際 -AllowPrerelease を入れるとエラーが出るので、オプションを消す

`notepad $PROFILE`して、開いたファイルに下記を記入して保存。

```
Import-Module posh-git
Import-Module oh-my-posh
Set-Theme Paradox
```

Powershellを再起動。
scriptがLoadできないとエラーが出る場合は、Powershell上で
`Set-ExecutionPolicy RemoteSigned -Scope CurrentUser`
Run as Administratorが必要な場合あり

## フォント設定
https://qiita.com/rubytomato@github/items/e88cab84f36e44797cf2
を参照。

zipを解凍して CascadiaCodePL.otf ファイルをインストール。

再びWindows terminalのSetting

```
    "profiles":
    {
        "defaults":
        {
            // Put settings here that you want to apply to all profiles.
	    "colorScheme":"Tango Dark",
	    "fontFace":"Cascadia Code PL"
```
fontFaceにCascadia Code PLを追加。行区切りのカンマを忘れずに
AWS キャッシュの利用

AWSアーキテクチャーの5つの設計原則と11のベストプラクティス
具体的な説明は以下のリンクをご参考ください。
https://qiita.com/Jenny1025/items/ce55c8724daeef626201

<img width="1127" alt="スクリーンショット 2020-05-16 14.14.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/edab9093-6b93-cfc2-68b2-1650d7646af3.png">

AWSのキャッシュの利用は、AWSアーキテクチャーの5つの設計原則と11のベストプラクティスの「キャッシュの利用」と「最適なデータベース選択」、この２つに関わるものです。

##キャッシュとは
一度アクセスしたデータを保存して次回アクセス時に高速アクセスできるように仕組みです。

##キャッシュの利用
繰り返すとり出すデータやコンテンツについて、キャッシュを利用する構成となります。主なサービスは
①CloudFront
②ElastiCache
③S3

##インメモリキャッシュ
ElastiCacheはインメモリキャッシュというデータベースです。

##CloudFront
AWSが提供するCDN（Content　Delivery　Network）になります。
＊CNDはWEBコンテンツ配信処理を高速化するサービスです。
【Day73】積み上げ日記

##今日のやること
■匿名写真共有アプリ作成
－タイムライン画面
　－（受信）モデルを作って、Firebase受信用のクラスを作成
　　－各ユーザー情報のプロパティ作成
　　－各ユーザー情報の初期化
　　－自分の画面でのユーザー情報設定
　－（表示）タイムライン画面に受信したコンテンツ表示設定
　　－セルの数をユーザー情報の分だけ
　　－ユーザー情報を反映させたい各パーツにタグを打つ（＝Outletでつなぐ）
Snap Camera を Zoom で使えるようにする方法 (macOS Catalina - 2020年5月)


(2020/5/26 更新) 最新版、v5.0.4 で正式に仮想カメラが使えるようになりました。この方法は不要です。みなさん、最新版にアップデートしましょう！

-----

Zoom のソフトウエアアップデートで Snap Camera が使えなくなり、ジャガイモや、芋虫になれずに、オンライン飲み会で盛り上がれなくなって久しいです。

Snap Camera は DAL (Device Abstraction Layer) Plugins なので、macOS Catalina では、アプリが Info.plist に明示的に [com.apple.security.cs.disable-library-validation](https://developer.apple.com/documentation/bundleresources/entitlements/com_apple_security_cs_disable-library-validation?language=objc) を設定する必要があるらしく、Zoom はその設定をしていないかららしいです。

しかし、ターミナルから強制的に codesign することで使えるようになります！

codesign するコマンドはこちら

```
$ sudo codesign -f -s - /Applications/zoom.us.app
``` 

このコマンドを、管理者権限のユーザーで、ターミナルから実行し Zoom を起動すると、Snap Camera が使えるようになります！

Zoom のアップデートをすると、もしかすると codesign する必要が出てくるかもしれません。（未だ未検証）

# 免責事項

**免責**： このコマンドはセキュリティに影響を与えることになるということなので、実行する際は慎重に。

# 築地港

## コマンドの再実行の必要性

[obs-mac-virtualcam wiki - Compatibility](https://github.com/johnboiles/obs-mac-virtualcam/wiki/Compatibility) には、アプリを再起動するごとにコマンドを叩かないといけないと書いてありますが、僕はアプリを再起動しても不要でした。

## セキュリティ設定

コマンドを実行すると、Zoom のアクセシビリティや画面共有の設定をリセットする必要がありました。

特に画面共有は Zoom にすでに許可してあるのに画面共有ができないという現象が起こり、下記の動作が必要でした。

- システム環境設定のセキュリティを開いて、画面共有で Zoom のチェックを外す
- Zoom アプリを終了
- Zoom アプリを起動
- Zoom で画面共有を試みる。アラートが出る。
- システム環境設定のセキュリティを開いて、画面共有 Zoom のチェックをいれる
- Zoom アプリを終了
- Zoom アプリを起動

これで画面共有が再開できました。

# 参照ソース

- [obs-mac-virtualcam wiki - Compatibility](https://github.com/johnboiles/obs-mac-virtualcam/wiki/Compatibility)
- [ライブ配信アプリOBS Studioに仮想カメラを作り出し、ZoomやGoogle Meetなどに映像を直接配信できるOBSプラグイン「OBS (macOS) Virtual Camera」がリリース。 - AAPL Ch.](https://applech2.com/archives/20200520-obs-studio-for-mac-virtual-camera-plugin.html)
Windows 用パッケージマネージャ「winget」のプレビュー版を試してみた

Microsoft のオンラインイベント「Microsoft Build 2020」にて、コマンドラインから利用する Windows 用パッケージマネージャ「Windows Package Manager」のプレビューリリースが発表されました。
https://devblogs.microsoft.com/commandline/windows-package-manager-preview/
分りやすく例えると Chocolatey の Microsoft 公式版というイメージでしょうか。  

# 試してみる
### インストール方法
以下のいずれかの方法が選択できます。
1. Windows 10 Insider Preview に参加して Microsoft ストアから落とす
2. GitHub からパッケージを手動で落として入れる
3. 自分でソースからビルドする

今回は一番早そうな「2. GitHub からパッケージを手動で落として入れる」で試してみようと思います。

なおクライアントは Windows 10 1709 以降がサポート対象となります。
> Installing the client
The client requires Windows 10 1709 (build 16299) or later at this time.

GitHub の [wingetのリリースページ](https://github.com/microsoft/winget-cli/releases) から Appxbundle をダウンロードしてインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111810/91719cbb-058b-7443-fad1-ec204b64a930.png)

インストールが完了したら PowerShell から `winget --version` を実行してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111810/6c580a05-1971-c58f-1761-f4d22731903a.png)
正常にバージョンが表示されました。

# 使ってみる
`winget show` でパッケージリストを表示してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111810/7615cdb7-6bf6-f91c-0229-c1e0a26086a4.png)

今回は PDFsam というアプリを入れてみようと思います。
`winget install [アプリケーション名]` のように実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111810/61556cca-b23f-edf5-cdb1-08b7dbec8ad2.png)

以上。やっぱりコマンドでインストールできるのは楽ですね。
こういう部分が Linux ライクになっていくのは個人的に嬉しいです。

ちなみにアプリケーションリストは winget 本体とは別のリポジトリで管理されているようです。
https://github.com/microsoft/winget-pkgs
yaml で書いたマニフェストをプルリクして、マージされたらインストールできるようになるという仕組みのようですね。

Intune などの構成管理が入っていない組織では、キッティングやアプリ展開で役立ちそうですね。
現状はバージョン 0.1 でまだまだこれからなので、進化して便利になっていくことを期待しています。
【VMware】ディスクタイプについてアウトプットしてみる

# はじめに
vSphereで新しい仮想マシンを作成する際にハードディスクのディスクタイプを設定します。
今回は、こちらのディスクタイプについての知識をアウトプットしていきたいと思います。

![【ESXi】ディスクタイプ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/9abf8c1b-33e3-0ebe-5a18-19b25288c9a4.jpeg)


# シンプロビジョニング

仮想ディスク作成時に最低限の容量のみ確保するタイプになります。


図で表すとこんな感じになります。

![シンプロビジョニング.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/2c8bcbaa-d094-3e28-02dc-e695b051d8c0.jpeg)


例えば、シンプロビジョニングの仮想ディスクにOSインストールをしたとします。
仮想ディスクの容量は「OSインストール分のみ」になります。

**何かパッケージやファイルを入れていった場合、仮想ディスクの容量が大きくなっていく仕組みになります。**



# シックプロビジョニング(Lazy Zeroed)

仮想ディスク作成時に指定したサイズ分の領域を確保するディスクタイプです。

図で表すとこんな感じになります。

![シックプロビジョニング(Lazy).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/8e62c6b8-488c-2313-981b-1e2cd8c9535e.jpeg)

**ファイル書き込み時にゼロで初期化するタイプです。**


# シックプロビジョニング(Eager Zeroed)

シックプロビジョニング(Lazy Zeroed)と同様に仮想ディスク作成時に指定したサイズ分の領域を確保するディスクタイプになります。

違う点は、**「作成時にゼロ初期化する」**ということです。

図で表すとこんな感じになります。

![シックプロビジョニング(Eager).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/4418319c-49de-26a6-b97f-1ee8545365ef.jpeg)


作成時にゼロ初期化が掛かるため、シックプロビジョニング(Lazy Zeroed)より仮想ディスクの作成時間が長いです。

# まとめ

- **シンプロビジョニング**
仮想ディスク作成時に最低限の容量のみ確保するタイプ

- **シックプロビジョニング(Lazy Zeroed)**
仮想ディスク作成時に指定したサイズ分の領域を確保するディスクタイプ
**ファイル書き込み時**にゼロ初期化が実行される。

- **シックプロビジョニング(Eager Zeroed)**
仮想ディスク作成時に指定したサイズ分の領域を確保するディスクタイプ
**ディスク作成時**にゼロ初期化が実行される。

# 参考

**シンプロビジョニング と シックプロビジョニング の違い**
https://www.projectgroup.info/tips/VMware/comm_0009.html
onclickを用いて複数の関数を呼び出す

# Onclickで複数の関数を記述する
初心者プログラマーの備忘録です。

###記法１：関数をセミコロン（;）で区切る
`input type = "XXX" value = "a" onclick = "YYY;ZZZ"`
このように、関数をセミコロンで区切って記述した場合、YYY → ZZZの順に関数を実行。
仮に `YYY = true, ZZZ = false` であっても、XXXが実行される。
`YYY = false, ZZZ = true` の場合は、YYYの結果ではじかれるためXXXは実行されない。

###記法２：関数をカンマ（,）で区切る
`input type = "XXX" value = "a" onclick = "YYY, ZZZ"`
基本的にカンマで関数を区切ることはないが、上記のように記述した場合
カンマの右側の関数（ZZZ）の結果が `true` であれば、YYYの結果に依らずXXXが実行される。

###記法３：関数を「&&」で区切る
`input type = "XXX" value = "a" onclick = "YYY && ZZZ"`
このように記述した場合、関数 YYY および ZZZ の結果がともに `true` であれば、XXXが実行される。


#####おまけ
まだ試していないが、仮に
`input type = "XXX" value = "a" onclick = "YYY || ZZZ"`
とすれば、YYYあるいはZZZのどちらかの結果が `true` であれば、XXXが実行されると考えられる。
おうちのlocalhostで動作するwebをvps上のtlsで動作テストするためのapache2のReverseProxyの設定。


#・目的
##sshで繋がっている時だけおうちwebのテストができる環境を構築します。

#・行うこと
apache2をリバースプロキシとして動作させます。
sshでおうちwebのポートをvpsで応答できるようにします。

##・流れ
おうちwebのlocalhost:80(apache2)--(C) [ おうちweb ]
↑↑↑
hogehoge.comのlocalhost:8080 --(B) [ vpsのlocalhost ]
↑↑↑
hogehoge.com:8443 ReverseProxy ---(A) [ vpsのホスト名"hogehoge.com"のtest用ポート8443]
↑↑↑
UserAccess

（debian10[buster]でさくらのvpsでのサイト構築についての記録です。）
（ここではvpsのホスト名は"hogehoge.com"としています。）
（apache2が導入されており"a2enmod ssl"等が設定されていて、tlsが動作していることが前提です。）
（tlsサイトの構築はletsencryptのサイトを参照をお願いします。）

#・行なったこと

#(1) proxyのモジュールを有効にします。(＠vps [A])

```
# a2enmod proxy
# a2enmod proxy_http
```

##(2) 動作ポートを追加します。(＠vps [A])
`# vi /etc/apache2/ports.conf`
"Listen 8443"を追加。
(抜粋)

```
>   5 Listen 80
>   6 
>   7 <IfModule ssl_module>
>   8         Listen 443
>   9         Listen 8443
>  10 </IfModule>
>  11 
>  12 <IfModule mod_gnutls.c>
>  13         Listen 443
>  14         Listen 8443
>  15 </IfModule>
```
(参考) http://neetchanprogrammer.hatenablog.com/entry/2017/02/07/153623

##(3) apache2をリバースプロキシとして動作させます。(＠vps [A])
(tls部はletsencryptを参照をお願いします。)
localhost:8080のサービスを`https://hogehoge.com:8443`として受ける。
 `# vi /etc/apache2/sites-enabled/ssh-hogehoge.conf`

```
>   1 <IfModule mod_ssl.c>
>   2         <VirtualHost _default_:8443>
 (省略)
>  19     # proxy settings
>  20     <IfModule proxy_module>
>  21       ProxyRequests Off
>  22       ProxyPass / http://localhost:8080/
>  23       ProxyPassReverse / http://localhost:8080/
>  24     </IfModule>
```

## (4) sshでローカルで動作するwebポート（localhost:80）を"hogehoge.com"のport8080にアタッチします。(＠おうちpc [C])

```
ssh -g -N -l pi_user -i ~/.ssh/key_rsa hogehoge.com -R 8080:localhost:80 
```

※オプションの"-g"は接続した端末以外からのアクセスを許可するためのもの。
(いつでも終了できるように引数によるバックグラウンドでの実行は行わない("-f"を使用しない))


## (5) 物理的にアクセス許可を追加する。(＠vps [A])
(apache2のリバースプロキシが動作するポートへの接続を許可)

`# vi /etc/iptables/rules.v4`

```
 -A INPUT -p tcp --dport 8443  -j ACCEPT
```

iptableポリシーの反映を行います。

```
iptables-restore < /etc/iptables/rules.v4
```

##(6) BrowserよりURLにアクセスして表示を確認します。
`https://hogehoge.com:8443/`
JavaのBigDecimal

##BigDecimalについて少しまとめた
BigDecimalはJavaのAPIの一つで、
普通の数値型は２進数で処理されるため、意図しない数値が返って来ることがある。
しかし、BigDecimalを使うことで、10進数として扱うことができる。

```java:Number.java
import java.math.BigDecimal;
import java.math.RoundingMode;

public class Number {
  public static void main(String[] args) {
    BigDecimal number1 = new BigDecimal("0.2");     //引数は""で囲む
    BigDecimal number2 = new BigDecimal("4");
    System.out.println(number1);
          
    System.out.println(BigDecimal.ZERO);    //0
    System.out.println(BigDecimal.ONE);     //1
    System.out.println(BigDecimal.TEN);     //10

    System.out.println(number1.add(number2));         
    //加算 number1 + number2
    System.out.println(number1.subtract(number2));　　
    //減算 number1 - number2
    System.out.println(number1.multiply(number2));　　
    //乗算 number1 * number2
    System.out.println(number1.divide(number2, 3, RoundingMode.UP));  
    //除算 number1 / number2, 小数点第３位まで表示, 切り上げ
    //RoundingMode.は切り上げ、切り捨て、四捨五入などがある。

    BigDecimal number3 = new BigDecimal("0.22");
    BigDecimal value1 = number3.scaleByPowerOfTen(2);  //10の2乗
    System.out.println(value1);　　//22

    BigDecimal value2 = number3.scaleByPowerOfTen(-2);  //10の-2乗
    System.out.println(value2);　　//0.0022

    BigDecimal value3 = number3.negate();  //マイナス化
    System.out.println(value3);　　　//-0.22
     

  }
}

```


以上。
まだまだたくさんの機能があるので試してみたいです。
2Dにおける三角関数を使わないベクトルの90度回転

# 計算なしで回転できる?!
符号反転と数値の入れ替えだけで90度、180度、270度回転ができる。
## 前提条件
x軸とy軸に対する値を持つベクトルがあること

```csharp
// 今回使うクラス
class Vector2
{
    public float x = 0.0f;
    public float y = 0.0f;

    public Vector2(float _x, float _y)
    {
        x = _x;
        y = _y;
    }
}
```

## 90度回転の方法
yの値の符号を反転させて、そのうえでxとyの値を入れ替える。

```csharp
    vector = new Vector2(1, 0);
    // 実践
    vector = new Vector2(-vector.y, vector.x);
    // vector.x = 0とvector.y = 1になる
```
↑で変換した値を確認すると90度回転した値になる。

### 信じられない人へ
Vector2(1, 0)だったからできたと思ったかもしれません。
では別でも試してみます。

```csharp
    vector = new Vector2(3, 4);
    // 実践
    vector = new Vector2(-vector.y, vector.x);
    // vector.x = -4とvector.y = 3になる
```
一応図ものせておきます
<img width="560" alt="90度回転.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550435/fd7595c9-ff90-04f2-6159-8336b83790a1.png">

## 180度回転の方法
xとyの値の符号を反転させる。
## 270度回転の方法
xの値の符号を反転させて、そのうえでxとyの値を入れ替える。

# まとめ
三角関数を使用しなくても90度ずつの回転ができます。
テトリスやぷよぷよなどのパズルゲーム等にも使えるものですので、参考になればうれしいです。
TypeScriptでPromise.then()のコールバック関数の型を取る

タイトルの通りです。特に補足はありません。
Promiseに指定した型を、二重指定したくなくて作りました。

```typescript
type KeyType<T, K extends keyof T> = T[K];
export type FullFilledParams<PROMISE extends Promise<any>> = KeyType<Parameters<Extract<KeyType<Parameters<KeyType<Pick<PROMISE, 'then'>, 'then'>>, 0>, Function>>, 0>;
export type RejectedParams<PROMISE extends Promise<any>> = KeyType<Parameters<Extract<KeyType<Parameters<KeyType<Pick<PROMISE, 'then'>, 'then'>>, 1>, Function>>, 0>;

// 使い方
const promise = new Promise<number>((r) => r(0));
type F = FullFilledParams<typeof promise>;
type R = RejectedParams<typeof promise>;
promise.then((v: F) => { }, (e: R) => { });
```
【Git】他の人のリポジトリからgit cloneして、自分のリポジトリにpushする方法

## 本記事の対象者
「他の人のリポジトリをクローンして、修正したものを自分のリポジトリにpushしたい」

そんな方に向けてこの記事を書いています。

先日参加したオンライン学習会で、主催者のリポジトリを`$ git clone`してハンズオン形式で学習した際の手順をこの記事でまとめていきます。

### 他の人のリポジトリをクローンする
以下のコマンドで他の人のリポジトリを取得することができます。

```
$ git clone (クローン元のリポジトリURL）
```

### ソースコードを修正してコミットする
適宜ソースコードを修正して、以下のコマンドを使ってコミットしてください。

```
$ git add .
```

```
$ git commit -m "コメント"
```

### リモートリポジトリを作成
ローカルリポジトリと紐付けるリモートリポジトリを作成してください。

### リモートリポジトリへpushする
以下のコマンドを実行することで、クローン元のリポジトリではなく、自分のリポジトリと紐づいてpushすることができます。

```
$ git push （自分のリポジトリのURL） master
```

##　まとめ
以上の４ステップで、他の人のリポジトリから`$ git clone`して、自分のリポジトリにpushすることができました。共同で学習する際とかに活用してみてください。
また、`$ git clone`に似たものに`$ git fork`がありますが、以下の参考記事が分かりやすく解説されていたので、みて見てください。

## 参考（ありがとうございます！）
・https://qiita.com/matsubox/items/09904e4c51e6bc267990
【Rails】ActiveRecordでor()の中でjoins()を使うとエラーがでる時の対処方法


ActiveRecordで検索する際に、外部結合した検索条件と組み合わせると下記のエラーが発生したので、その時の対処法のメモです。

```
ArgumentError (Relation passed to #or must be structurally compatible. Incompatible values: [:joins]):
```

## エラーになるコード

```ruby
class Member < ApplicationRecord
  has_many :nicknames

  # ニックネーム部分一致
  scope :nicknames_cont, lambda { |val|
    joins(:nicknames)
    .merge(Nickname.where(ActiveRecord::Base.sanitize_sql_array(['word LIKE ?', "%#{val}%"])))
  }
  # 苗字完全一致 OR ニックネーム部分一致
  scope :freeword_cont, lambda { |val|
    where(last_name: val)
    .or(nicknames_cont(val))
  }
end

class Nickname < ApplicationRecord
  validates :member, presence: true
  validates :word, presence: true
  belongs_to :member
end

```

```ruby:
Members.freeword_cont('渡辺')
```
↑これだとエラー

```
ArgumentError (Relation passed to #or must be structurally compatible. Incompatible values: [:joins]):
```

## 修正したコード

.orを呼んでいる元と.orの中の構造を揃える必要があるので
`.orを呼んでいる元`、`.orの中`共に.joins()を呼ぶと解決します！

```ruby:members.rb
class Member < ApplicationRecord
  has_many :nicknames
  # ニックネーム部分一致
  scope :nicknames_cont, lambda { |val|
    joins(:nicknames)
    .merge(Nickname.where(ActiveRecord::Base.sanitize_sql_array(['word LIKE ?', "%#{val}%"])))
  }
  # 苗字完全一致 OR ニックネーム部分一致
  scope :freeword_cont, lambda { |val|
    where(last_name: val)
    .joins(:nicknames) # こいつを追加
    .or(nicknames_cont(val))
  }
end
```
コンストラクターとイニシャライザの違い

kotlinの勉強中です。コンストラクターとイニシャライザの違いを書いときます。

## コンストラクター
コンストラクターはクラスに続いて()の中を記述します。

```kotlin.kt
class Person(val name: String) {}
```

##イニシャライザ
kotlinのコンストラクターには処理を記述することができません。そのため、クラスからインスタンスを生成した時点で、実行したい処理があればイニシャライザに記述します。イニシャライザはinitの後にブロックを生成してコードを記述します。

```kotlin.kt
class Person(val name: String) {
   init {
      println("Hi, ${name}")
   }
}
```
ESC - EC2 環境でnginx + rails


こんな感じで行けそうだったので、全体像をメモ
![ecs-nginx-rails.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60267/dc86b16d-3b59-d6b9-7a87-91e356d1ec00.jpeg "ecs-nginx-rails.jpg")

- nginxとrailsを一つのサービスで定義、ネットワークのリンクでつなげる。
- railsのコンテナはポート公開しない
- ローリングデプロイや同時起動のため、nginxは動的ポートにしておく
with構文

#with構文とは

何かの処理の開始時と終了時に必須の処理を、絶対に実行します
何かの処理の開始時と終了時に必須の処理とは、通信処理やファイル処理やデータベース処理など

###使用方法
with 開始と終了を必要とする処理

###解説
通信処理やファイル処理やデータベース処理など、開始と終了を必要とする処理の先頭にwithを記載する

###実際例

```file.txt
あかさたなはまやらわ
```

##withを使用しない場合

```
fileread = open('file.txt', 'r')
 print(fileread.read())
fileread.close()
```
###表示結果

```
あかさたなはまやらわ
```
###解説
１行目のfileread = open('file.txt', 'r')では、open関数を利用してfile.txtを読み込む(r)為に開いています(open)。
そして、開いた内容をfileread変数に代入しています。
２行目のprint(fileread.read())では、fileread変数に対して、read関数を使用して読み込みながら、print関数を使用して表示しています。
3行目のfileread.close()では、開いたファイルを閉じています。この処理を忘れるとエラーになります。

##withを使用する場合

```
with open('fileread.txt', 'r') as fileread:
 print(fileread.read())
```
###表示結果
```
あかさたなはまやらわ
```
###解説
１行目のwith open('fileread.txt', 'r') as fileread:では
、open関数を利用してfileread.txtを読み込む(r)為に開いています(open)。
その際、開いたファイル名をasでfileread変数名に代入しています。
先頭にwithを記載しているのでclose()関数の処理は要りません。
２行目のprint(fileread.read())では、fileread変数に対して、read関数を使用して読み込みながら、print関数を使用して表示をしています。
参照
https://techacademy.jp/magazine/15823
【Rails】ActionCable を使う際の nginx の設定でハマった

# はじめに

Ruby on Rails で作ったアプリにリアルタイムチャットの機能を付けようとして、 ActionCable を使ったときに、

ローカル環境ではうまく動いたのですが、本番環境ではリアルタイムチャットの部分が動きませんでした。

原因を調べたところ、 ActionCable で使うwebsocket 通信をするために、 nginx の設定が必要なようでした。

自分へのメモ用に修正前と修正後のファイルだけ載せます。

## nginx.conf (修正後)

websocketの通信を扱えるようにするために
location /cable以下を追加しました。

~~~nginx.conf

# https://github.com/puma/puma/blob/master/docs/nginx.md
upstream app {
  server unix:///app/tmp/sockets/puma.sock;
}

server {
  listen 80;
  server_name ***.***.***.***; # アプリのIPアドレス
  keepalive_timeout 5;

  # static files
  root /app/public;

  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;

    # static files
    if (-f $request_filename) {
      break;
    }
    if (-f $request_filename.html) {
      rewrite (.*) $1/index.html break;
    }
    if (-f $request_filename.html) {
      rewrite (.*) $1.html break;
    }

    if (!-f $request_filename) {
      proxy_pass http://app;
      break;
    }
  }

  #以下を追加

  location /cable {
    proxy_http_version 1.1;
    proxy_set_header Upgrade websocket;
    proxy_set_header Connection Upgrade;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://app/cable;
  }

  #追加部分ここまで

  location ~* \.(ico|css|gif|jpe?g|png|js)(\?[0-9]+)?$ {
    expires max;
    break;
  }
}

~~~

##　nginx.conf (修正後)

元々のnginxの設定です。

~~~nginx.conf

 # https://github.com/puma/puma/blob/master/docs/nginx.md
upstream app {
  server unix:///app/tmp/sockets/puma.sock;
}

server {
  listen 80;
  server_name ***.***.***.***; # アプリのIPアドレス

  keepalive_timeout 5;

  # static files
  root /app/public;

  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;

    # static files
    if (-f $request_filename) {
      break;
    }
    if (-f $request_filename.html) {
      rewrite (.*) $1/index.html break;
    }
    if (-f $request_filename.html) {
      rewrite (.*) $1.html break;
    }

    if (!-f $request_filename) {
      proxy_pass http://app;
      break;
    }
  }

  location ~* \.(ico|css|gif|jpe?g|png|js)(\?[0-9]+)?$ {
    expires max;
    break;
  }
}

~~~
【NestJS/GraphQL】JSONを扱う方法

# 環境

- [NestJS 7.0.7](https://nestjs.com/)
- [nestjs/graphql 7.3.7](https://github.com/nestjs/graphql)

# Code first でのやり方

## インストール

```
yarn add graphql-type-json
yarn add -D @types/graphql-type-json
```

## 設定

```typescript
import graphqlTypeJson from 'graphql-type-json'
import { Field, ObjectType } from '@nestjs/graphql'

@ObjectType()
export class SomeClass {
  @Field(() => graphqlTypeJson, { nullable: true })
  json?: object
}
```

## 確認

`schemal.gql` ファイルに以下のエントリーが追加されていることを確認。

```
type SomeClass {
  json: JSON
}

"""
The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
"""
scalar JSON
```

# Schema first でのやり方

https://docs.nestjs.com/graphql/scalars#schema-first
pip install のエラーの解決策 【Python】【Mac】

pythonエンジニアで初心者の自分が困ってて解決したことをシェアします。
#pip install のエラー

```
pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.

Retrying (Retry(total=0, connect=None, read=None, redirect=None, status=None)) after connection broken by 'SSLError("Can't connect to HTTPS URL because the SSL module is not available.")': /simple/pip/
```
などのエラーが出た時の対処法

根本的な原因が全く分からないので、とりあえずエラー文章やsslとは、など初めて見る単語を調べてました。解決策自体はいろいろあるみたいです。

**-環境-**
macOS 10.14.6
python 3.6.6
venv(仮想環境)


###原因
>おそらくpip/pythonが古いopenssl(1.0.2s)を参照しているのではありませんか？ 情報を見る限り、質問者の方のopensslは最新版になっているので参照エラーが起きているように思います

下記でsslが使えるかチェックします。

```python:py
import ssl
```
```python:
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/Users/[username]/.pyenv/versions/3.7.0/lib/python3.7/ssl.py", line 98, in <module>
    import _ssl             # if we can't import it, let the error propagate
ImportError: dlopen(/Users/[username]/.pyenv/versions/3.7.0/lib/python3.7/lib-dynload/_ssl.cpython-37m-darwin.so, 2): Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
  Referenced from: /Users/LO/.pyenv/versions/3.7.0/lib/python3.7/lib-dynload/_ssl.cpython-37m-darwin.so
  Reason: image not found
```

エラーが出たので
###結論
```:sh
$ brew switch openssl 1.0.2s
```
[pip install でSSL関連のエラーが出たらこれを読め！！！](https://qiita.com/kj455/items/9c50b5457631850b3bca)
これだけです。<br>sslが切り替わってなかったんですね。
解決してみると原因はシンプルで分かりやすかったです。


---
自分なりに解釈してるところが、あるかもしれませんが助けになれば幸いです。
初心者の単語Ｎｏ１

## エントリーポイント
プログラムを実行するための、開始になる場所のこと。
**【追記】**
・適用ルール
⇒1.public(公開しているか)
⇒2.static(インスタンス生成しなくても実行可能)
⇒3.void（戻り値がない）
⇒4.main（メソッド名が）
⇒5.引数がString配列を１つ受け取り

## クラス
共通した特徴や動作をもつオブジェクトの抽象的な種類を表したもの
大雑把に言えば、**設計図**
（例えば、ファイルのような、アイコンというようなもの）

## インスタンス
クラスに基づいて生成されたオブジェクトの具体的な物
大雑把に言えば、**実際に作った物**
（例えば、「～というもの」の性質に沿った一つ一つの性質にあったファイルやアイコンを表す）

## オブジェクト
メッセージの受け手になれる実体。
または、プログラム上で実現したい概念を例えばとして使われるもの。
大雑把に言えば、**モノ**

## クラスの宣言とは
class　クラス名　{　クラス本体　}
でクラス宣言例で。
**1.クラス**
**2.メンバ変数**
**3.メソッド**
の3つに分かれる
それぞれ種類、慣例、例の順でルールが決められるているのか。
下記に記入。

| 種類 | 慣例 | 例 |
|-----|-----|-----|
| クラス | 単語の先頭文字を大文字と区切り文字を大文字にする | Insert、IntNumber、DeleteNoなど |
| メンバ変数 | 単語の先頭文字を小文字と区切り文字を大文字にする | IntNumber、DeleteNoなど |
| メソッド | 単語の先頭文字を大文字と区切り文字を大文字にする | Main、StringMainなど |

※下記参考資料のURLがあると見づらいとうありましたら、削除も検討したいと思います。
##参考資料
**・Javaコード入門**(https://java-code.jp/)
**・Java SE 8 Silver**
⇒問題集
https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5Java-SE-8-Silver%E5%95%8F%E9%A1%8C%E9%9B%86%EF%BC%BB1Z0-808%EF%BC%BD%E5%AF%BE%E5%BF%9C-%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-ebook/dp/B01ASGJYIE/ref=msx_wsirn_v1_5/356-4004999-4209143?_encoding=UTF8&pd_rd_i=B01ASGJYIE&pd_rd_r=53c5ed1b-d284-4886-a0a7-6e49029d6f21&pd_rd_w=nRMwE&pd_rd_wg=086CQ&pf_rd_p=8acfbc98-0f10-4ca5-ab7c-019f8ea70a4e&pf_rd_r=S0H2JK2BQNZ6JFDTVQQF&psc=1&refRID=S0H2JK2BQNZ6JFDTVQQF
⇒テキスト
https://www.amazon.co.jp/%E3%82%AA%E3%83%A9%E3%82%AF%E3%83%AB%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E6%95%99%E7%A7%91%E6%9B%B8-Java%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E-Silver-SE-8-ebook/dp/B01BLCJ984/ref=reads_cwrtbar_1/356-4004999-4209143?_encoding=UTF8&pd_rd_i=B01BLCJ984&pd_rd_r=dec512a8-0d6f-4504-8911-b494e43eedc4&pd_rd_w=d34ZI&pd_rd_wg=HsEei&pf_rd_p=64c49d12-7012-452e-9a49-e43c9513f9fc&pf_rd_r=HHR0H4PF0EYC0HSY2K7H&psc=1&refRID=HHR0H4PF0EYC0HSY2K7H
Float計算回路のVerilog-HDL実装について -その４(除算回路)

#Float計算回路のVerilog実装
~ FPGA に載せたい ~
オレオレ実装なので間違っていても知りません

加算回路編
[Float計算回路のVerilog-HDL実装について -その１](https://qiita.com/Soleiyu/items/5bbb991de443e61e318e)

デバッグツール作成編
[Float計算回路の(ry-その１.１(float値の16進数表記)](https://qiita.com/Soleiyu/items/1fbdc78c68ad69a6d34d)

補足とLeadingZeros編
[Float計算回路のVerilog-HDL実装について -その1.5 (LeadingZeros)](https://qiita.com/Soleiyu/items/2fbd44883cfb1cdd253d)

減算回路編
[Float計算回路のVerilog-HDL実装について -その2(減算編)](https://qiita.com/Soleiyu/items/b56d3db666bd93f9ef75)

回路共通化とタイミング調整編
[Float計算回路のVerilog-HDL実装について -その2.1(加算回路の共通化とタイミング調整)](https://qiita.com/Soleiyu/items/85e9543463f068fe5047)

共通化編
[Float計算回路のVerilog-HDL実装について -その2.5(共通化)](https://qiita.com/Soleiyu/items/5751c226d1e8008a3231)

0対応編
[Float計算回路のVerilog-HDL実装について -その2.7(0対応)](https://qiita.com/Soleiyu/items/23e1df40e67b05025990)

乗算回路編
[Float計算回路のVerilog-HDL実装について -その３(積算回路)](https://qiita.com/Soleiyu/items/8a17ce204d093e11773e)

## 目的
floatの勉強
float32のハードウェア実装

だいたい前回と一緒
0 に対応しない乗算回路の実装を行う

## 今回のHW
![div_timing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253609/f571cf9b-4c42-8dd5-b8ec-a03bc49917bd.png)

## コード
```
module float_div(
	input wire clk,
	input wire [31:0] v1,
	input wire [31:0] v2,

	output wire [31:0] vres
);

	assign vres = res;

	// TIM1
	reg [7:0] v1e;
	reg [7:0] v2e;
	reg [23:0] v1v;
	reg [23:0] v2v;
	reg v1o;
	reg v2o;

	// TIM2
	reg [7:0] re;
	reg [47:0] rv;
	reg ro;

	// TIM3
	reg [31:0] res;

	always @(posedge clk) begin
	// TIM1
		v1e <= (v1[30:23] - 8'h7F);
		v2e <= (v2[30:23] - 8'h7F);
		v1v <= {1'b1, v1[22:0]};
		v2v <= {1'b1, v2[22:0]};
		v1o <= v1[31];
		v2o <= v2[31];

	// TIM2
		re <= v1e - v2e;
		rv <= {v1v, 24'b0} / v2v;
		ro <= v1o ^ v2o;

	// TIM3
		if (rv[24]) begin
			res <= {ro, re + 8'h7F, rv[23:1]};
		end else begin
			res <= {ro, re + 8'h7E, rv[22:0]};
		end
	end

endmodule
```

## TIM2
![div_tim2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253609/3c5825cb-38db-59a2-e6ba-f5e6d4864517.png)
v1v も v2v も最上位ビットが 1 であるため、
そのまま除算すると１桁しか答えが出ないので 0 で拡張する

逆に商は上位２３ビットもしくは２４ビットが 0 となる

## シミュレーション結果と誤差
|値１| 値2| 結果|| 正答|
|:-:|:-:|:-:|:-:|:-:|
|123.4|7.25|17.020689||17.0206896…|
|7.25|123.4| 0.058752023||0.0587520259…|
|123.4|0.725|170.20688||170.206896…|
|0.725|0.00123| 589.43085||589.430894…|

ちょっとブレるけど誤差ということで・・・
乱出するCTAリンクの更新にイライラしているLP更新者の方への提案

#LPあるある
１ページ中に同じお問い合わせエリア（CTAボタンやら電話番号やら）が複数回でてくる

例えばこんな感じ

```html:LP/index.html：before
<body>
  <section id="sec1">
    <div><p>内容１</p></div>
  </section>
  <div class="cta">
    <div class="tel">
      <a href="tel:0123456789">0123-45-6789</a>
    </div>
    <div class="link">
      <a href="//google.com"><div class="button">お問い合わせはこちら</div></a>
    </div>
  </div>
  <section id="sec2">
    <div><p>内容２</p></div>
  </section>
  <div class="cta">
    <div class="tel">
      <a href="tel:0123456789">0123-45-6789</a>
    </div>
    <div class="link">
      <a href="//google.com"><div class="button">お問い合わせはこちら</div></a>
    </div>
  </div>
  <section id="sec3">
    <div><p>内容３</p></div>
  </section>
  <div class="cta">
    <div class="tel">
      <a href="tel:0123456789">0123-45-6789</a>
    </div>
    <div class="link">
      <a href="//google.com"><div class="button">お問い合わせはこちら</div></a>
    </div>
  </div>
</body>
```

「どんだけ、お問い合わせエリアで場所とってんねん:rage:」って気分になる
視認性も良くない

さらに「計測用のクリックイベントを追加して」「電話番号が変わりました」なんて修正依頼もあったり...

いちいち検索して手作業もたいへんだし
エディタで一括置換もできるけど、本当にちゃんと出来てるかも不安だし...

なんとか１箇所の変更で済むようにしたい（一括編集したい）

# JSに頼ろう

こんな感じにして解決　（JavaScript で HTML を書き換え）

```html:LP/index.html：after
<body>
  <section id="sec1">
    <div><p>内容１</p></div>
  </section>
  <div class="cta"></div> <!-- ← ココにお問い合わせ表示 -->
  <section id="sec2">
    <div><p>内容２</p></div>
  </section>
  <div class="cta"></div> <!-- ← ココにお問い合わせ表示 -->
  <section id="sec3">
    <div><p>内容３</p></div>
  </section>
  <div class="cta"></div> <!-- ← ココにお問い合わせ表示 -->
</body>

<!-- 表示させるお問い合わせのコード -->
<script id="cta_code" type="text/html">
  // ココから
  <div class="tel">
    <a href="tel:0123456789">0123-45-6789</a>
  </div>
  <div class="link">
    <a href="//google.com"><div class="button">お問い合わせはこちら</div></a>
  </div>
  // ココまで
</script>
<!-- END 表示させるお問い合わせのコード -->

<!-- .cta にコードを入れるスクリプト -->
<script type="text/javascript">
  var code = document.getElementById("cta_code").innerHTML; // 上記の「表示させるお問い合わせのコード」がつまった #cta_code を格納
  var cta = document.querySelectorAll(".cta"); // ソース中から .cta を見つけて格納
  var arr = Array.prototype.slice.call(cta); // forEach が使えるように配列に
  arr.forEach(function (e) {
    e.innerHTML = code; // 入れ替え実施
  });
</script>
<!-- END .cta にコードを入れるスクリプト -->
```


## 解説
### １）お問い合わせエリアに
お問い合わせを入れたい部分に`<div class="cta"></div>`を入れる

### ２）表示させるお問い合わせのコード
`// ココから` `// ココまで` の間に書き換えたいHTMLを置く

ポイントは`<script id="cta_code" type="text/html">`の部分
`type="text/html"`で、表には表示させないように。

（`<div id="cta_code" style="display:none">`でも動くと思うけど、どちらでも）

### ３）.cta にコードを入れるスクリプト
* `Array.forEach()`を使いたい
* IE11でも動くようにしたい

ということから`Array.prototype.slice.call()`を使うことに

参考サイト：[IEで NodeList を forEach するとエラーになる問題の対処方](https://qiita.com/snjssk/items/8d179566b023703c0663)

# 解決　:relaxed:
これで、今後に更新があっても、１箇所だけの修正で対応できます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/289061fe-05ec-6b19-b09e-7e639b545f23.png)

↑　レンダリングされたあとは冒頭の`LP/index.html：before`と同じソースになってる
ダイクストラ法(Dijkstra's Algorithm)をpythonで実装する

# やったこと
ダイクストラ法についての勉強を兼ねて、ダイクストラ法をpythonで実装してみた。  
例題としては、「Dijkstra AtCoder」でググって最初に出てきた「AtCoder Beginner Contest 035 の D -トレジャーハント」を用いた。  

## ダイクストラ法とDFSやBFSの違い
ダイクストラ法とDFS、BFSの違いがよくわからなくなったので、調べた結果を簡単にまとめる。  
（DFS、BFSについては下記で実装）
[深さ優先探索(DFS)と幅優先探索(BFS)をpythonで実装する](https://qiita.com/akebono-san/items/e87a61da827f161c49c1)

- DFS(深さ優先探索)・BFS(幅優先探索)
    - 重みのないグラフについての探索を行うためのアルゴリズム
- ダイクストラ法
    - 重み付きグラフについての探索を行うためのアルゴリズム（キュー(正確には重み付きキュー)を用いるため、BFSの拡張版のイメージ）

## Dijkstra's Algorithm
### メモ
 start→目的地に着くまでの最短経路を`g_list,go`
 目的地→startに着くまでの最短経路を`b_list,back` で管理

```python
# ABC035 D トレジャーハント

import heapq

def dijkstra(s, n, c_list):
    _list = [float("Inf")]*n
    _list[s] = 0
    hq = [[0,s]]
    heapq.heapify(hq)
    while len(hq) > 0:
        _ci, _i = heapq.heappop(hq)
        if _list[_i] < _ci:
            continue
        for _cj,_j in c_list[_i]:
            if _list[_j] > (_list[_i] + _cj):
                _list[_j] = _list[_i] + _cj
                heapq.heappush(hq, [_list[_j],_j])
    return _list
                
n, m, t = map(int, input().split())
a_list = [int(x) for x in input().split()]
g_list = [[] for i in range(n)]
b_list = [[] for i in range(n)]

for i in range(m):
    _a, _b, _c = map(int, input().split())
    g_list[_a-1].append([_c,_b-1])
    b_list[_b-1].append([_c,_a-1])

go = dijkstra(0, n, g_list)
back = dijkstra(0, n, b_list)
ans = 0

for i in range(n):
    _tmp = t - (go[i] + back[i])
    if a_list[i]*_tmp > ans:
        ans = a_list[i]*_tmp

print(ans)
```