OmniAICreator/Qiita-1.07M huggingface dataset:
PowerShell から バッチファイルを実行して、ステータスや、標準出力を得る

PowerShell からバッチファイルを実行して終了ステータスをとるという単純なことを実行するのに、意外にくっそはまったので、もうにどとはまらないように書いておく。

# コマンドの直接実行が一番

PowerShell からコマンドを実行する場合は、`start-process`などは介せず直接実行がよい。

最初こんなものを書いていたのだが、これが全くうまくいかない。下記のコードでは、Standard Outputなどが出力されない。.NET の Process を使う方法もあるが面倒なので直接実行がよさげだ。

```powershell
function StopOnFailedExecution($exitCode) {
  if ($exitCode -Ne 0) 
  { 
    Write-Host $exitCode
    exit $exitCode 
  }
}

$result=start-process "cmd.exe" "/c .\Test.bat" -Wait -PassThru -NoNewWindow
$stdout=$result.StandardOutput
$stderr=$result.StandardError
Write-Host $stdout
Write-Host $stderr
StopOnFailedExecution($result.ExitCode)
Write-Host "success"
```

```cmd
echo Hello!
exit 1
```

# PowerShell ISE はBOMに注意

当初私は、`Test.bat` の編集を `PowerShell ISE` で実施していたが、これが悲劇を生んだ。PowerShell ISE は ファイルを BOM 付きで保存するのだが、cmd.exe は BOM を解釈しないようだ。下記のようなエラーになる。解決のためには、VSCode 等で

```
C:\Users\tsushi\Code\spike\PowerShell\TestExit.ps1

C:\Users\tsushi\Code\spike\PowerShell>ï»¿echo Hello! 
cmd.exe : 'ï»¿echo' is not recognized as an internal or external command,
At C:\Users\tsushi\Code\spike\PowerShell\TestExit.ps1:8 char:1
+ cmd.exe /c ".\Test.bat"
+ ~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: ('ï»¿echo' is no...ternal command,:String) [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError
 
operable program or batch file.
``` 

VScode 等で、bom なしにすると動作する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470/a3d0c4a7-6849-3308-7007-09caa1a141cf.png)


```powershell
function StopOnFailedExecution {
  if ($LASTEXITCODE) 
  { 
    Write-Host $LASTEXITCode
    exit $LASTEXITCODE 
  }
}
cmd.exe /c ".\Test.bat"
StopOnFailedExecution($result.ExitCode)
Write-Host "success"
```

## Result 
```powershell
> C:\Users\tsushi\Code\spike\PowerShell\TestExit.ps1

C:\Users\tsushi\Code\spike\PowerShell>echo Hello! 
Hello!

C:\Users\tsushi\Code\spike\PowerShell>exit 1 
1
```
JavaScript(TypeScript)の論理判定のベストプラクティスを考える

# 結論からいうと
- Truthy/Falsyは絶対利用しない（必ず`if (変数 === undefined)`のように書く）
- `if (変数 === undefined || 変数 === null)`といちいち書くのはやばいので、`null`は利用しない
- 外部APIとの接続で`null`が必要な場合は、必ずラッパーに閉じ込める。ラッパーの外に`null`を持ち出さない。
- Lintで設定しよう

# Truthy/Falsyを使いたくない

こうやって書きたい時、よくありますね。

```typescript

const user = getUser();
if (user){
    // userが存在する場合の処理
}
```

ぼくも上のように書いてたんですが、JavaScript/TypeScriptのTruthy/Falsyの仕様上バグりやすすぎるのでやめることにしました。

## JavaScript(TypeScriptも)のTruth/Falsyが罠
https://typescript-jp.gitbook.io/deep-dive/recap/truthy

上のケース、userが`object`なら（普通ならそうのはず）問題ないけど、`string`か`number`だったらまずい。

TypeScriptで`user: User`と書いたところでそれは保証できない。`type User = string`かもしれないし。

それに、「`string`か`number`以外ならTruthy/Falsyを利用してもよい」という運用は複雑でよくなさそう。

## Truth/Falsyは、常に利用しない
`if (user)` -> `if (user !== undefined)`
`if (!user)` -> `if (user === undefined)`

と書き換えるのが結局ベストプラクティスとおもう。

# nullだったらどうする？
`null`と`undefined`が混在してるコードでは、こう書かなきゃいけない。

`if (user)` -> `if (user !== undefined && user !== null)`
`if (!user)` -> `if (user === undefined || user === null)`

これは
- 見た目きたねえ
- 書くのだるい
- いつかミスる

ので絶対やめたほうがよさそう。

`if (user)` -> `if (user != undefined)`
`if (!user)` -> `if (user == undefined)`

とすれば`null`もみてくれるが、`==`は一律で禁止したいので却下。（仮にここだけ`==`を利用する運用にした場合、ミスって`===`と書くかもだし、そもそも誰かが（未来の自分含め）「あ、ここ`==`使ってんじゃん。だめだめ、`===`に修正、っと」としうる。ミスに見えうる書き方はだめってダグラス・クロックフォードもいってた。）

## `null`、やめよう。
そもそも`null`を使うメリットってあるのか？

- `undefined`だと「まだ定義してない」と「明示的にない」の区別がつかないじゃないか！
    - -> それを区別してどうしたいのか？仮にしたいなら、そんな曖昧な方法じゃなくてもっと明確に用意すべきじゃないか？

このへんの議論はまあいろいろあるので、興味あればこちらなど。
https://media-massage.net/blog/javascript-typescript%E3%81%A7null%E3%82%92%E4%BD%BF%E3%81%86%E3%81%B9%E3%81%8D%E3%81%AA%E3%81%AE%E3%81%8B/

null使わない派
https://typescript-jp.gitbook.io/deep-dive/recap/null-undefined

ということで、`undefined`統一した。もし問題がでたらまた考える。

# ESLintで設定する
こういうのはLintで機械的にみてほしい。

[ESLint - no-null](https://www.npmjs.com/package/eslint-plugin-no-null)　<- [言及してるイシュー](https://github.com/peerigon/eslint-config-peerigon/issues/71)
[ESLint - strict-boolean-expressions](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/strict-boolean-expressions.md)


TSlintなら
[TSLint - strict-boolean-expressions](https://stackoverflow.com/questions/56455915/is-there-eslint-or-tslint-rule-that-checks-that-truthy-falsy-logical-operator-is
https://palantir.github.io/tslint/rules/strict-boolean-expressions/)
no-nullは探してない

# 課題感
とはいえ毎回`if (arg !== undefined)`はごちゃつくから簡単にかけるリテラルがほしいなあ。

あと、外部APIのためのラッパーではどうしても`null`を使う必要があるけど、（試してないけど）no-nullでそこはいいかんじに除外できるんかな？
AWS RDSでマルチAZ配置できない場合の対処法

###はじめに
既存のAWS RDSをマルチAZ配置に変更したところ...
以下のようなエラーが出たので、解決方法を載せておきます！

````
DB Subnet Group doesn't meet availability zone coverage requirement. 
Please add subnets to cover at least 2 availability zones. 
````
###解決方法
このエラーは、以下の意味になります。
『サブネットグループに少なくとも２つのアベイラビリティーゾーンを設定してください！』
だから、解決方法としては、追加すればOKです

##サブネットグループの追加方法
AWSマネージメントコンソールでRDSを開いて、サプネットグループをクリックしてください
<img width="1440" alt="スクリーンショット 2020-07-07 15.00.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524511/c9a570f6-88a4-eeb7-9881-46c721fe74c6.png">

ボックスにチェックをして、編集をクリックします
<img width="1438" alt="スクリーンショット 2020-07-07 15.04.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524511/b0ba0edd-04bf-6a67-b5a8-3f0c19ad2043.png">

サブネットを追加で追加してください
<img width="1440" alt="スクリーンショット 2020-07-07 15.08.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524511/776ba99e-9170-4ad5-31d6-efe5e8df9ee1.png">

左のデーターベースに移動し、変更をクリックして、RDSをマルチAZ配置に変更します。
<img width="1120" alt="スクリーンショット 2020-07-07 15.14.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524511/cc5da1ce-032f-bf5e-7ee4-4f9ca72c3ceb.png">

RDSの設定を見て、マルチAZが以下のように反映されていれば、クリアです！
お疲れ様でした！
<img width="1440" alt="スクリーンショット 2020-07-07 15.31.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524511/c2ddfb4b-7318-1d71-d1bf-9122fe785b0d.png">
PythonでScientific Programmingプチテク集



Integrator (Propagator) 作成について
===================================
Pythonでintegratorを作成する場合、scipyのsolve_ivp()関数などが便利。その際は、ODEの関数定義はnumpy可してあげるようにする。例えば、円制限三体問題の場合、

```math
\begin{align}
    \ddot{x} -2\dot{y} 
        &= x -\dfrac{1-\mu}{r_{1}^3} (x+\mu) + \dfrac{\mu}{r_{2}^3} (1-\mu-x)
    \\
    \ddot{y} +2\dot{x} 
        &= y -\dfrac{1-\mu}{r_{1}^3}y - \dfrac{\mu}{r_{2}^3}y
    \\
    \ddot{z} 
        &= -\dfrac{1-\mu}{r_{1}^3}z - \dfrac{\mu}{r_{2}^3}z
\end{align}
```

となるので、これを6つのFirst Order ODEとして表すと

```math
\begin{align}
    \dfrac{d x}{d t} &= \dot{x}
\\
    \dfrac{d y}{d t} &= \dot{y}
\\
    \dfrac{d z}{d t} &= \dot{z}
\\
    \dfrac{d \dot{x}}{d t} 
        &= \dfrac{d^2 x}{d t^2} = 2\dot{y} +x -\dfrac{1-\mu}{r_{1}^3} (x+\mu) + \dfrac{\mu}{r_{2}^3} (1-\mu-x)
    \\
    \dfrac{d \dot{y}}{d t} 
        &= \dfrac{d^2 y}{d t^2} =-2\dot{x} + y -\dfrac{1-\mu}{r_{1}^3}y - \dfrac{\mu}{r_{2}^3}y
    \\
    \dfrac{d \dot{z}}{d t} 
        &= \dfrac{d^2 z}{d t^2} =-\dfrac{1-\mu}{r_{1}^3}z - \dfrac{\mu}{r_{2}^3}z
\end{align}
```
関数にすると

```Python
import numpy as np
from numba import jit

# deifne RHS function in CR3BP
@jit(nopython=True)
def rhs_cr3bp(t,state,mu):
    """Equation of motion in CR3BP, formulated for scipy.integrate.solve=ivp(), compatible with njit
    
    Args:
        t (float): time
        state (np.array): 1D array of Cartesian state, length 6
        mu (float): CR3BP parameter
    Returns:
        (np.array): 1D array of derivative of Cartesian state    
    """

    # unpack positions
    x  = state[0]
    y  = state[1]
    z  = state[2]
    # unpack velocities
    vx = state[3]
    vy = state[4]
    vz = state[5]
    # compute radii to each primary
    r1 = np.sqrt( (x+mu)**2 + y**2 + z**2 )
    r2 = np.sqrt( (x-1+mu)**2 + y**2 + z**2 )
    # setup vector for dX/dt
    deriv = np.zeros((6,))
    # position derivatives
    deriv[0] = vx
    deriv[1] = vy
    deriv[2] = vz
    # velocity derivatives
    deriv[3] = 2*vy + x - ((1-mu)/r1**3)*(mu+x) + (mu/r2**3)*(1-mu-x)
    deriv[4] = -2*vx + y - ((1-mu)/r1**3)*y - (mu/r2**3)*y
    deriv[5] = -((1-mu)/r1**3)*z - (mu/r2**3)*z
    
    return deriv
```
となる。前期の通り、大概の場合ODEの表現はnumba化が比較的容易に可能と思われるのでおススメ。あとは、```solve_ivp()```関数を呼べばいいので

```Python
from scipy.integrate import solve_ivp

# integrate until final time tf
tf = 3.05
# initial state
state0 = np.array([ 9.83408400e-01, -9.42453366e-04, 1.27227988e-03, 
                    7.03724138e-01, -1.78296421e+00, 1.13566847e+00])
# cr3bp mass parameter mu
mu = 0.012150585609624
# call solve_ivp
sol = solve_ivp(fun=rhs_cr3bp, t_span=(0,tf), y0=state0, args=(mu,))

```
ここで、```args```にはODEの状態行列 (state) と時間 (t) 以外に必要になるパラメータ（上記の例では```mu```を入れる。tupleなので、たとえエントリーが一つでもカンマ（,）を忘れずに。
Nuxt.jsでポートフォリオサイトを作ろう #7: サイトの公開

![nuxt.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/e2aebdc2-c25f-60ad-d2d6-2609a637e8ef.jpeg)

[前回](https://qiita.com/takahashitakuya031126/items/53c3e662b7ae6711dc0c)の続きです。

####Netlifyの利用

一般的にサイトを公開するには、独自ドメインを取得し、レンタルサーバを借りる必要があります。

当然、この方法だとお金がかかります。（といっても、そこまでたいした金額ではありませんが）

そこで今回はNetlifyを使って無料で公開する方法を説明します。

Netlifyで公開するためには、GitHubなどにソースコードを置いておく必要があるので、GitHubのアカウントを持っていない方は登録しておいてください。

参考までに以前私が書いた記事を載せておきます。

- [Git入門 - 最速でわかるGitの使い方](https://qiita.com/takahashitakuya031126/items/3921b583f733f2de1103)

####サイトの公開

GitHubにソースコードをアップします。

```
$ git init // すでに.gitがあるなら不要
$ git remote add origin https://github.com/ユーザー名/リポジトリ名.git
$ git add .
$ git commit -m "initial commit"
$ git push origin master
```

次に[Netlify](https://www.netlify.com/)にログインします。GitHubアカウントでログインできます。

ログイン後、New Site From Gitを選択します。

![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/2decf900-9224-96aa-a082-1d6700a92e08.png)

GitHubを選択します。

![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/d915000b-b8ca-7e2b-b29b-edbbe9ccc911.png)

公開したいリポジトリを選択します。

![img3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/96d73b46-09fb-73ed-b9e8-b801b15303e7.png)

Branch to deploy: master
Build commant: nuxt generate
Publish directory: dist
に設定し、Deploy Siteを選択する。

![img4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/97a276a1-bccb-df05-a010-e42ba5b21bac.png)

デプロイが完了するとURLが表示されるので、選択します。

![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/3d5f2fa3-d9de-53b5-8ee0-a5e5f3cd73f8.png)

これでポートフォリオサイトを公開することができました。
curlとwgetのcontinueオプション

# なにこれ
- 巨大なファイルをダウンロードするときに、ダウンロードが途切れても悲しまないようにするcontinueのオプションの付け方
- curlとwgetの両方についてメモ

# 結論

```bash
URL=https://xxx.xx.xx
```

```bash:curlの場合
curl -O -C - $URL
```

```bash:wgetの場合
wget -c $URL
```

# ちなみに
- curlで途中までダウンロードした後にwgetで再開することもできます
- continueオプションなしで途中までダウンロードした後、continueオプションをつけて再開することも可能です
- curlのCオプションは、[continue-at](https://curl.haxx.se/docs/manpage.html)、wgetのcオプションは[continue](https://www.gnu.org/software/wget/manual/wget.html#Invoking)です
- 知らずにダウンロードし直していた人も意外といると思う
Docker(Djnago)をHerokuへデプロイする方法


Dockerコンテナ上で開発したDjangoをHerokuにデプロイするにはいくつか方法があります。

１、Djnagoソースのみをデプロイする。
２、docke buildでimageをビルドしてHerokuにデプロイする。
３、herokuのコマンドでimageのビルドとデプロイを行う。
etc...

今回は3の方法を使ってデプロイしたいと思います。

heroku containerにログインしておきます。
herokuのAPI_KEYを予め環境変数へ設定しておけば下記のようにログインができます。

``` shell
$ heroku container:login
```

DockerImageのビルドとレジストリへのpushを行います。
引数に設定しているwebはherokuのプロセスタイプです。
--appオプションにHerokuのapp名を指定します。


``` shell
$ heroku container:push web --app HEROKU_APP_NAME
```

最後にpushしたDockerImageをHerokuにリリースしてます。
これを行うことでHerokuへデプロイされます。

``` shell
$ heroku container:release web --app HEROKU_APP_NAME
```

DockerfileにCMDを指定しておけばデプロイ後に実行されます。
LaTexの便利パッケージに関するメモ

LaTexで文章を書く上で覚えておきたいことメモ。
TL;DR
===
とりあえず全部入れるなら以下コピペ。

```LaTeX
\usepackage{amsmath}    % align equations
\usepackage{amssymb}    % use \mathbb{R} etc.
\usepackage{todonotes}  % to-do notes
\usepackage{siunitx}    % units
\usepackage{lscape}     % landscape page
\usepackage{listings}   % include codes
\usepackage[numbered,framed]{mcode}
```

Math mode内での改行他
===
まずインポート

```LaTeX
\usepackage{amsmath}
\usepackage{amssymb}
```
```\begin{equation} ... \end{equation}```のように使えるうえ、更に式の改行ができる。

```latex
\begin{align}
    \ddot{x} - 2 \dot{y} &= \Bar{U}_x
       \\
    \ddot{y} + 2 \dot{x} &= \Bar{U}_y
        \\
    \ddot{z} &= \Bar{U}_z
\end{align}
```
上記の三行は```&```で並んでおり、各行がnumberingされる。もしnumberingを一部スキップする場合は、該当する行に```\nonumber```を加える。全行についてnumberingをスキップするなら```\begin{align*} ... \end{align*}```。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656299/ac0369ee-5bdc-5747-da51-3af7e346657d.png" width=80%>

また、```\usepackage{amssymb}```を使うことで

```latex
\mathbb R
```
で
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656299/dd6c09c2-f0ba-27af-cb51-b04273bdaa49.png" width=60%>
が表示できる。

文章内にコメント : ```todonotes``` 
===
レポート作成時など、あとから修正が必要になる箇所にフラグを立てたり、あとから図を挿入するためのスペース確保用。PDF側に反省されるため、あとから見返したときに変更すべき点がすぐ分かるので有能。
まずインポート

```LaTeX
\usepackage{todonotes}
```
図のための位置確保には

```LaTeX
\missingfigure[]{I am missing a figure here!}
```
文章（PDF）内にコメント挿入には

```LaTeX
\todo{Need to fix my equation here!}
```
結果こんな感じ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656299/d82352d6-25fa-476d-88e2-3f19dbd7228e.png" width=50%>


参考
https://ctan.org/pkg/todonotes?lang=en

数値と単位 : ```siunitx```
===
**導入**
Preambuleに

```LaTeX
\usepackage{siunitx}
```

**使用**
マニュアル (http://tug.ctan.org/macros/latex/exptl/siunitx/siunitx.pdf) 曰く

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656299/b578619d-9a50-7a2b-0aac-76a9aa350718.png" width=50%>


**参考**
https://ctan.org/pkg/siunitx?lang=en
https://texwiki.texjp.org/?plugin=related&page=siunitx



MATLABコードの挿入
====
**導入**
Preambuleに

```LaTeX
\usepackage{listings}
\usepackage[numbered,framed]{mcode}
```
**参考**
https://www.overleaf.com/latex/templates/highlighting-matlab-code-in-latex-with-mcode/nhtksndnsmmx



その他
===
パッケージではないけどその他ラテフ関連の知識メモ

**```.tex```ファイルの挿入**
長めの文章の場合や複数人でレポートを作成する場合などは、本文をセクションごとに```.tex```ファイルに分割し、更にファイルに格納すると捗る。
例えばプロジェクトのホームディレクトリに```main.tex```などがある状態でsectionsフォルダを作り、その中に```introduction.tex```を格納。
これを```main.tex```に挿入するには

```latex
\include{sections/introduction}
```
と使うと自動的に```.tex```ファイル毎に改ページされてしまう現象は

```latex
\input{sections/introduction}
```
を使えば防げる。

参考
https://tex.stackexchange.com/questions/36176/include-puts-everything-on-a-new-page
MacでSafariとChromeのCORSを無効化する

<font color="RED">この記事を参照している時点で「何かを間違えている」可能性が高いです。CORSを無効化するのは正しい方法ではありません。それでも緊急性があったり、手抜き開発をしたい有識者はご利用ください</font>

# 良い子はマネしないでね

- **この状態でアクセスするのはlocalhostくらいにしておくこと**
- 他の方法（サーバの設定する、プロキシで解決する、~~JSONP使う~~、~~[https://cors-anywhere.herokuapp.com/](http://cors-anywhere.herokuapp.com/)を使用する~~、~~ブラウザの拡張機能を使用する~~）を採用すべき

## SafariのCORSを無効化する

1. 「Safari」 > 「環境設定」 > 「詳細」タブ > 「メニューバーに"開発"メニューを表示」を選択
2. 「開発」 > 「クロスオリジンの制限を無効にする」にチェックを入れる

## ChromeのCORSを無効化する

1. Chromeを終了する
2. ターミナルで下記のコマンドを叩く

```bash
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir=“/tmp/chrome_dev_test” --disable-web-security
```
初心者のためのpandas基礎②データ概要把握

#pandasとは
Pythonにて、構造化データ（テーブル型のデータ）を扱うためのライブラリです。ファイルの読み込みやその後の加工・抽出処理などを簡単に行うことができ（SQL的な感覚で行うことができ）、機械学習などのデータの前処理で必須となるライブラリです。
他項目への目次は[こちら](https://qiita.com/Yanagawa_Yoshihisa/items/e1d7d0e939f58e7301ea)になります。

#ライブラリインポート
`pandas`に`pd`という名前をつけて`import`する

```python:
import pandas as pd
```


#データ件数の確認
`dataframe`の件数を確認します。

```python:
print(len(dataframe))
```

#データタイプの確認
```python:
dataframe.dtypes
```

#統計量（数値データ）表示
```python:
dataframe.describe()
```
`count`(データの個数)、`mean`(平均)、`std`(標準偏差)、`min`(最小)、25% etc.(四分位値)、max(最大)を集計します。

#統計量（カテゴリカルデータ）表示
```python:
dataframe.describe(include='O')
```
ゼロではなくオーです。`count`(データの個数)、`unique`(uniqueデータの数)、`top`(最も多く出現した要素の値)、`freq`(要素の数)を集計します。数値と合わせて表示したい場合は`describe(include='all')`として下さい。

#欠損値の確認
欠損値の有無を確認します

```python:
dataframe.isnull().sum()
```

#pandas-profiling
概要把握のための処理を一括して実施し、レポートとして出力してくれるライブラリが｢pandas-profiling｣です。これについては下記の記事を参照下さい。
★ [探索的データ分析の第一歩に便利なpandas-profilingの導入と概要](https://qiita.com/Yanagawa_Yoshihisa/items/9374476984598a057155)

#最後に
初心者にもわかるように、Pythonで機械学習を実施する際の必要な知識を簡便に記事としてまとめております。
目次は[こちら](https://qiita.com/Yanagawa_Yoshihisa/items/a3fa521d89c471b3e71f)になりますので、他の記事も参考にして頂けると幸いです。
Windows10 でインストール済みのドライバをバックアップ

昨今の Windwos ではドライバが殆どオンラインでダウンロード出来るので大した意味は無いが、Windows7 な環境へ Windows10 のドライバが流用できたりするので、Tips 的忘備録である。

適当なディレクトリを作って以下のコマンドを実行で、各ドライバ毎にサブディレクトリが作成されて、その中に inf ファイルと共に一式がバックアップできる。

```
dism /online /export-driver /destination:.
```

環境によって Administrator でないとバックアップ出来ないけど、理由までは深く突っ込まない事。
初心者のためのpandas基礎①読み込み＆加工

#pandasとは
Pythonにて、構造化データ（テーブル型のデータ）を扱うためのライブラリです。ファイルの読み込みやその後の加工・抽出処理などを簡単に行うことができ（SQL的な感覚で行うことができ）、機械学習などのデータの前処理で必須となるライブラリです。
他項目への目次は[こちら](https://qiita.com/Yanagawa_Yoshihisa/items/e1d7d0e939f58e7301ea)になります。

#ライブラリインポート
pandasにpdという名前をつけてimportする

```python:
import pandas as pd
```

#ファイルの読み込み

```python:
dataframe = pd.read_csv('file.csv',encoding = 'utf-8')
```
Excel等も同様の方式で読み込み可能です。Pandasの公式ドキュメント[[Input/output]](https://pandas.pydata.org/pandas-docs/stable/reference/io.html )encodingにて拡張子の指定も可能です。特定の列だけ取り出す時は、usecols = ['column1']のようにオプションをつけます。


#データ確認
（）内に必要な件数を入力します。

```python:
dataframe.head(10)
```

最初からの表示が｢head｣、最後からの表示が｢tail｣です。

#データ件数の確認
｢dataframe｣の件数を確認します。

```python:
print(len(dataframe))
```
#データダンプ
csvでデータをダンプします。

```python:
dataframe.to_csv('dump_file.csv', index = False, encoding = 'utf-8', sep=",")
```
｢index｣はデータフレームのインデックス出力の有無、｢encoding｣はエンコード、｢sep｣は区切り文字を指定します。

#列操作
##列の作成
既存の｢column1｣と｢column2｣を足して、｢column3｣を作ります。

```python:
dataframe['column3'] = dataflame['column1'] + dataframe['column2']
```

##列削除
｢column1｣を削除します。

```python:
dataframe = dataframe.drop(columns = 'column1')
```
pythonのステートメント｢del｣を利用しても削除可能です。

```python:
del dataframe['column1']
```

#行操作
## 行抽出
いくつかの方法がありますが、ここではQueryメソッドをつかった方法を記載します。
｢column1｣が数値系の定義で、1の行を抽出することを想定します。

```python:
dataframe = dataframe.query('columns1 == 1')
```

｢column1｣、｢column2｣が数値系の定義で、双方が1の行を抽出することを想定します。

```python:
dataframe = dataframe.query('columns1 == 1 & columns2 == 1')
```

｢column1｣が数値系の定義で、1と9と11の行を抽出することを想定します。

```python:
dataframe = dataframe.query('columns1 in (1,9,11)')
```

｢column1｣がObject系の定義で、｢Yes｣の行を抽出することを想定します。ダブルコーテーションなので注意です。

```python:
dataframe = dataframe.query('columns1 == "Yes"')
```

#Joinする
｢dataframe1｣と｢dataframe2｣をカラム｢key｣で｢Left Outer Join｣し、｢join_dataframe｣とします。

```python:
join_dataframe = pd.merge(dataframe1, dataframe2, on = 'key', how = 'inner')
```
howは、内部結合（inner）、左外部結合（left）、右外部結合（right）、完全外部結合（outer）です。
※カラムを制限したい場合はdataframe1[['column1','column1']]のように付け加えます。

ジョインするテーブルのキーが違う場合は、下記のようにします。

```python:
join_dataframe = pd.merge(dataframe1, dataframe2, left_on = 'key1', right_on = 'key2')
```
#最後に
初心者にもわかるように、Pythonで機械学習を実施する際の必要な知識を簡便に記事としてまとめております。
目次は[こちら](https://qiita.com/Yanagawa_Yoshihisa/items/a3fa521d89c471b3e71f)になりますので、他の記事も参考にして頂けると幸いです。
Basic認証メモ

# Basic認証の手順

認証が必要なコンテンツにアクセスしようとすると、ユーザはユーザ名とパスワードの入力が求められる。
ユーザ名とパスワードがBase64でエンコードされて送信される。
Base64は暗号化ではなく、ただのエンコードなので盗聴の危険がある。
サーバ側で受け取ったユーザ名とパスワードを確認して問題なければ、コンテンツを送る。
多分このコンテンツ送信も暗号化されてない。

# Basic認証で使う.htpasswd

サーバ側のユーザ管理ファイルが.htpasswd。
Apache付属の`htpasswd`コマンドで生成・編集する。
暗号化はデフォルトでmd5が使われる。(apache2-utils 2.4.29-1ubuntu4.13で確認)


```bash
# テスト
htpasswd -n ユーザ名
# ファイル生成
htpasswd -c .htpasswd ユーザ名
```

生成されたファイル

```
<ユーザ名>:$暗号の種類$ソルト$暗号化されたパスワード$
```

md5の場合、以下の方法でパスワードを確認できる

```
openssl passwd -apr1 -salt <ソルト> <パスワード>
```
[Rails]新しいページを増やす方法


##Ruby on Railsのページを増やす手順
忘れないよう、自分用のメモ書きです。

手順
１．configのrouteファイルにURLと対応するアクションを記述
２．controllerに該当するアクションを追記
３．viewフォルダにhtml.erbファイルを新規作成

※まったく０からのサイト作成ではなく
既存のプログラムに追加する想定。

## routeファイルにURLとアクションを記述
〜書き方〜

HTTPプロトコル　”ページを表示させたいURL”　=>　”コントローラ名#アクション名”
のように記述します。

※「HTTPプロトコル」としましたが、ほとんどの場合「get」か「post」のどちらかです。

以下に具体例を示します。

```ruby:route.rb
get "images/index" => "images#index"
```

〜/images/indexというURLへリクエストを受けた時に、
このプログラムでは、imagescontrollerの中の、indexアクションを実行しますという書き方になっています。


## controllerに該当するアクションを追記
```ruby:images_controller.rb
def index
end
```
先ほど、routeファイルに書いたとおり、URLのリクエストを受けた後、
プログラムはimagescontrollerを見に来ます。そして、indexアクションを探して実行しようとします。
今回は、その流れそのものをひとつ増やす作業を行っているので該当するアクションを追記します。

## viewフォルダにhtml.rbを新規作成
最終的にブラウザ等で表示されるのはhtml.rbファイルです。
route→controller→html
※.rb省略
の順番で記述やファイルを追加していきましょう。

```html:index.html.rb
<h1>sample</h1>
```
typeScriptにWebpackを使用する

※あくまで個人の学習ノートなので参考程度に

<h2>１.package.jsonを追加

`npm init -y`

package.jsonが作成される

<h2>2.webpackインストール

`npm install --save-dev webpack webpack-cli`

node_moduleのフォルダとpackage-lock.jsonが作成される。

※作成されるnode_moduleはgitにpushしない

<h2>3.webpack.config.jsをディレクトリに追加

webpack.config.jsはwebpackの設定ファイル

```ruby:webpack.config.js
const path = require('path'); //requireはimportと同じ扱いでpathはnodejsがもっているモジュール

module.exports = {
  entry: './dist/main.js', //一番最初に読み込ませるjsファイル

  output: {    //生成したファイルをどこに格納するかを指定
    filename: 'bundle.js', //生成されるファイル名
    path: path.resolve(__dirname, dist), //生成されるファイルの格納ディレクトリ
  }
}
```

<h2>4.bundle.jsを作成

`npm run build `

bundle.jsが作成される。


<h2>5.HTMLファイルの記述変更

jsファイルの読み込み先を先ほど作成したbundle.jsに変更
（bundle.jsに全てのjsファイルのコードがまとまっているため）


```ruby:index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="dist/bundle.js" defer></script>
</head>
```


以上で終了。





<h3>-----------ここからはやってもやらなくても良い-------------

<h2>・sourceマップにjsファイルを表示したい場合

1.現在の状態だと以下のように検証ツール上にはbundle.jsしか表示されていない。
<img width="201" alt="スクリーンショット 2020-07-07 14.32.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472442/f9438dbe-f897-eb87-13fa-f7ab4ee4d2e1.png">

2.webpackの設定ファイルにdevtool: 'inline-source-map'と追加する

```ruby:webpack.config.js
const path = require('path');

module.exports = {
  entry: './dist/main.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, dist),
  },
  devtool: 'inline-source-map'  //この行を追加
}
```

3.再度buildすると以下のように変わる
<img width="213" alt="スクリーンショット 2020-07-07 14.39.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472442/0a2ea90a-7559-7792-cabe-1f5e68e4ad08.png">
httpd.confのDocumentRootを修正して再起動しても起動出来なくなった。


##【はじめに】 
Amazon EC2 LinuxからApacheのDocumentRootを変更時に
勝手にドツボにハマったので、対処方法を備忘録として残します。

またこれからAWS周りを勉強していく中で
作業中にハマったものをアウトプットとして残していこうと思います。

##【開発環境】

Amazon EC2 Linux
Windows 10 HOME
Apache/2.4.43
Tera Term 4.1.105

## httpd.confの編集

下記ファイルを編集していきます。

```
sudo vi /etc/httpd/conf/httpd.conf
```

```httpd.conf
DocumentRoot "/var/www/html"
↓
DocumentRoot "/var/www/html/sample/public”
```
DocumentRootを変更。

:wq (で保存)

```
sudo service httpd restart
```
Apacheを再起動すると。。

```
Redirecting to /bin/systemctl restart httpd.service
Job for httpd.service failed because the control process exited with error code. See "systemctl status httpd.service" and "journalctl -xe                           " for details.
```
何やらエラーが出ています。

```
systemctl status httpd.service
```
表示されているコマンドを打ってみると・・

```
httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; enabled; vendor preset: disabled)
  Drop-In: /usr/lib/systemd/system/httpd.service.d
           mqphp-fpm.conf
   Active: failed (Result: exit-code) since Tue 2020-07-07 14:00:14 JST; 13s ago
     Docs: man:httpd.service(8)
  Process: 4107 ExecStart=/usr/sbin/httpd $OPTIONS -DFOREGROUND (code=exited, status=1/FAILURE)
 Main PID: 4107 (code=exited, status=1/FAILURE)
   Status: "Reading configuration..."

Jul 07 14:00:14 ip-172-31-11-201.ap-northeast-1.compute.internal systemd[1]: Starting The Apache HTTP Server...
Jul 07 14:00:14 ip-172-31-11-201.ap-northeast-1.compute.internal httpd[4107]: AH00526: Syntax error on line 121 of /etc/httpd/conf/...nf:
Jul 07 14:00:14 ip-172-31-11-201.ap-northeast-1.compute.internal httpd[4107]: DocumentRoot '/var/www/html/sample/public\xe2\x80\x9d...ble
Jul 07 14:00:14 ip-172-31-11-201.ap-northeast-1.compute.internal systemd[1]: httpd.service: main process exited, code=exited, statu...URE
Jul 07 14:00:14 ip-172-31-11-201.ap-northeast-1.compute.internal systemd[1]: Failed to start The Apache HTTP Server.
Jul 07 14:00:14 ip-172-31-11-201.ap-northeast-1.compute.internal systemd[1]: Unit httpd.service entered failed state.
Jul 07 14:00:14 ip-172-31-11-201.ap-northeast-1.compute.internal systemd[1]: httpd.service failed.
Hint: Some lines were ellipsized, use -l to show in full.
```
この中のメッセージを見ていくと、、

```
 DocumentRoot '/var/www/html/sample/public\xe2\x80\x9d...ble
```

と何やら変更したDocumentRoot のパスの後ろの部分が文字化け？しています。
まさかと思って、httpd.confをもう一回見てみると

![httpd_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/4de511bc-ca85-043d-2ddb-3efc980452ae.jpeg)

半角のはずの　"(ダブルクォーテーション)　が全角で書かれていました。。
んでこれを半角に直して再び再起動すると、、

```
[ec2-user@ip-172-31-11-201 conf]$ sudo service httpd restart
Redirecting to /bin/systemctl restart httpd.service
```

エラーなく再起動が完了しました。
Macにて写真.appが動かなくなる

#Catalinaに更新したら写真.appが動かなくなった
[設定]→[ユーザーとグループ]
ログイン中のアカウントを、controlボタンを押しながら、詳細オプションを表示。
出ない場合は下の鍵マークのロックを解除する。

![q1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7178/2de0d765-6e47-1a01-91fe-4adede9ee13e.png)

ログインシェルが
/bin/bash になっているとNG

**※bash_profileやbashsrcなどはzshに移行する必要があります。**

/bin/zshに変更して再起動する。
#include ってどこにあるの？

正確な解説がコメントにあるので、それを読みましょう。
以下はメモです。

#TL;DR

cやc++の`#include<*.h>`で指定したライブラリは

ヘッダが`/usr/local/include/`に存在する。
本体は`/usr/local/lib/`に存在する。

#ライブラリの入れ方で困ったら

### ライブラリ名をコンパイル時に指定する
`g++ hoge.cpp -l<ライブラリ名>`
と入れるとライブラリを指定する事ができる。
`-l`と`ライブラリ名`の間にスペースは入れない。
`fuga`というライブラリの場合は`-lfuga`になる。

### コンパイル過程を出力してみる
`g++ -v hoge.cpp`
windowsでiverilog その44

#概要

windowsでiverilogやってみた。
polyphonyでcpu書いてみる。

#俺cpu仕様案

命令長　１６ビット
レジスタ　８ビット４本
命令メモリー　８ビット２５６バイト
データメモリー　８ビット２５６バイト
命令セット
bit15,bit14  算術命令、転送命令、ジャンプ、アドレスを分ける。
bit13,bit12  上の細分
bit11,bit10  レジスタ指定
bit9,bit8    レジスタ指定
bit7~bit0    アドレス、データ

#俺cpu命令セット案

|ニーモニック|bit15,bit14	|bit13,bit12|bit11,bit10|bit9,bit8|bit7,bit0|説明|
|:--|:--|:--|:--|:--|:--|:--|:--|
|+	|0	|0	|0-3	|0-3	|-	|加算|
|-	|0	|1	|0-3	|0-3	|-	|減算|
|*      |0	|2	|0-3	|0-3	|-	|乗算|
|/	|0	|3	|0-3	|0-3	|-	|除算|
|jmp	|1	|0	|-	|-	|0-255	|ジャンプ|
|if jmp	|1	|1	|-	|-	|0-255	|条件ジャンプ|
|>	|1	|2	|0-3	|0-3	|-	|条件|
|%	|1	|3	|0-3	|0-3	|-	|剰余|
|set    |2	|0	|0-3	|-	|0-255	|レジスタセット|
|set2   |2	|1	|0-3	|0-3	|0-255	|レジスタセット|
|out	|2	|2	|0-3	|-	|-	|出力|
|out2	|2	|3	|-	|-	|0-255	|出力|
|load   |3	|0	|0-3	|-	|0-255	|メモリロード|
|save   |3	|1	|0-3	|-	|0-255	|メモリセーブ|
|load2  |3	|2	|0-3	|0-3	|0-255	|メモリロード|
|save2  |3	|3	|0-3	|0-3	|0-255	|メモリセーブ|


#サンプルコード

```
				while pc != 0:
					iaddr = pc
					ins = imem[iaddr]
					pc = pc + 1
					op = (ins >> 14) & 0x3
					funct = (ins >> 12) & 0x3
					a = (ins >> 10) & 0x3
					b = (ins >> 8) & 0x3
					data = ins & 0xff
					addr = ins & 0xff
					if op == 0:#keisan
						if funct == 0:
							reg[a] = reg[a] + reg[b]
						elif funct == 1:
							reg[a] = reg[a] - reg[b]
						elif funct == 2:
							reg[a] = reg[a] * reg[b]
						elif funct == 3:
							reg[a] = reg[a] / reg[b]
						else:
							pc = 0
					elif op == 2:#jump
						if funct == 0:
							pc = addr
						elif funct == 1:
							if (reg[a] == 0):
								pc = addr
						elif funct == 2:
							reg[a] = reg[a] < reg[b]
						elif funct == 3:
							reg[a] = reg[a] % reg[b]
						else:
							pc = 0
					elif op == 3:#data
						if funct == 0:
							reg[a] = data
						elif funct == 1:
							reg[a] = reg[b] + data
						#elif funct == 2:
							#reg[a] = reg[b] + 1
						#elif funct == 3:
							#reg[a] = reg[a] < reg[b]
						else:
							pc = 0
					else:#mem
						if funct == 0:
							reg[a] = dmem[addr]
						elif funct == 1:
							dmem[addr] = reg[a]
						elif funct == 2:
							reg[a] = dmem[reg[b] + addr]
						elif funct == 3:
							dmem[reg[b] + addr] = reg[a]
						else:
							pc = 0
```

#アセンブラ案

a-zをout

```　

  r0set  0
  r0save  0
loop:
  r0load  0
  r1set  26
  r0  <  r1
  if  pass 
  r0load  0
  r1set  97
  r0  +  r1
  r0out 
  r0load  0
  r1set  1
  r0  +  r1
  r0save  0
  jp  loop
pass:

```



#メモリーに落とす。


```　

imem = [

0x8000,  #r0set  0
0xd000,  #r0save  0
       #loop:
0xc000,  #r0load  0
0x841a,  #r1set  26
0x6100,  #r0  <  r1
0x400f,  #if  pass 
0xc000,  #r0load  0
0x8461,  #r1set  97
0x0100,  #r0  +  r1
0xa000,  #r0out 
0xc000,  #r0load  0
0x8401,  #r1set  1
0x0100,  #r0  +  r1
0xd000,  #r0save  0
0x5002,  #jp  loop
0x500f, #pass:
]


```

以上。
競技プログラミング練習記 No.36【ABC125練習】

初回 -> [はじめに](https://qiita.com/easychoco/items/a9ae28aca97cfe47091f)

[ABC125](https://atcoder.jp/contests/abc125)を解きました。
4完です！
ABC125から前のコンテストは4問構成になります。

コンテスト時間内では2完でした。悔しい。

|問題|時間|アルゴリズム|実行時間
|:-:|:-:|:-:|:-:|
| A |  1min |-| 8ms|
| B |  3min |-| 7ms|
| C | 80min |gcd| 20ms|
| D | 40min |-|23ms|



## A - Biscuit Generator
```c++
  int a, b, t;
  cin >> a >> b >> t;
  cout << b * (t / a);
```
ビスケットが生産されるタイミングは`t / a`回(切り捨て)なので、それに`b`をかけると答えがわかります。

## B - 	Resale
``` c++
  int n;
  cin >> n;
  vector<int> v(n), c(n);
  for(int i = 0; i < n; ++i) cin >> v[i];
  for(int i = 0; i < n; ++i) cin >> c[i];

  int ans = 0;
  for(int i = 0; i < n; ++i)
  {
    ans += max(0, v[i] - c[i]);
  }
  cout << ans;
```
ナップサック問題化と思いましたが、コストに制限はないですね。
コストよりも価値が大きい場合に`X-Y`は大きくなるので、そのような場合の値を足せば答えになります。

## C - 	GCD on Blackboard
``` c++
  int n;
  cin >> n;
  vector<int> a(n);
  for(int i = 0; i < n; ++i)
  {
    cin >> a[i];
  }

  vector<int> L(n, 0), R(n, 0);
  for(int i = 0; i < n - 1; ++i)
  {
    L[i + 1] = gcd(L[i], a[i]);
  }
  for(int i = n - 1; i >= 1; --i)
  {
    R[i - 1] = gcd(R[i], a[i]);
  }

  int ans = 0;
  for(int i = 0; i < n; ++i)
  {
    ans = max(ans, (int)gcd(L[i], R[i]));
  }
  cout << ans;
```
GCDの計算は交換則と結合則が成り立ちます。つまり、演算をする順番に関係なく同じ値になります。

`N`要素ある数列から要素を一つ選び、同じ数列の他の要素に書き換えた場合を考えます。
このとき、その数列のGCDは、「選んだ一つの要素を除いた数列」のGCDと一致します。
つまり、数列から要素をひとつ除いた時のGCDを最大化する問題ととらえられます。

この場合、数列を左と右から見ます。
左側から`i`番目までの累積GCDを`L[i]`
右側から`i`番目までの累積GCDを`R[i]`
とすると、`i`番目を除いた数列のGCDは`gcd(L[i-1], R[i+1])`になりますね。

左端と右端で少し調整が必要ですが、この方針で解けます。
プログラムではインデックスを少しいじっています。

## D - Flipping Signs


``` c++
  int n;
  cin >> n;
  vector<int> a(n);
  int min_abs = 1000000007;
  int min_abs_i;
  for(int i = 0; i < n; ++i)
  {
    cin >> a[i];
    if(abs(a[i]) < min_abs)
    {
      min_abs = abs(a[i]);
      min_abs_i = i;
    }
  }

  ll ans = 0;
  for(int i = 0; i < min_abs_i; ++i)
  {
    if (a[i] < 0)
    {
      a[i] = -a[i];
      a[i + 1] = -a[i + 1];
    }
    ans += a[i];
  }
  for(int i = n - 1; i > min_abs_i; --i)
  {
    if (a[i] < 0)
    {
      a[i] = -a[i];
      a[i - 1] = -a[i - 1];
    }
    ans += a[i];
  }
  ans += a[min_abs_i];
  cout << ans;
```
問題文にある動作で、任意の場所の符号を変えられますね。
ですが、すべての場所を変えられるわけではなく、1か所だけ変えられないことになります。
つまり、`N`要素のうち、`N-1`要素だけ符号を自由に変えられます。
符号を自由に変えられない1つの要素はされるがままですね。

ここまでわかると方針が立てられます。
「自由に変えられない箇所」を一つ選んで、残りの箇所を正値になるように変更します。
「自由に変えられない箇所」を絶対値が最小の箇所にすれば総和は最大化できますね。

入力を受けながら絶対値が最小の要素を探して、その値以外の値の符号を入れ替えれば答えになります。

以上です。ありがとうございました。
Vue.js で プルダウンメニューの作り方 (基礎編)

# プルダウンとは?

検索バーとしてよく使用されるプルダウンメニューバー。
Webサイトなどにおけるメニューの表示方法の一種で、クリックなどの操作によって複数のメニュー項目を表示させるタイプの表示方法のことである。

# 完成コード
## HTML 
```html

<select v-model="selectedFruits">
  <option disabled value="">果物一覧</option>
  <option v-for="fruit in optionFruits" 
    v-bind:value="fruit.name" 
    v-bind:key="fruit.id">
  {{ Fruit.name }}
  </option>
</select>
```

## Vue.js
```javascript
export default {
  data() {
    return {
      selectedFruits: '', 
      optionFruits: [ 
          { id: 1, name: 'りんご' }, 
          { id: 2, name: 'みかん' }, 
          { id: 3, name: 'ぶどう' } 
      ], 
    }
  }
}
```

### 手順① dataを関数に
```javascript
export default {
  data() {
    return {
  }
}
```
コンポーネントの**dataオプションは関数**でなければいけないため、return 以下に初期設定したいdataプロパティの内容を記述します。

### 手順② dataの値を設定
```javascript

selectedFruits: '', 
optionFruits: [ 
  { id: 1, name: 'りんご' }, 
  { id: 2, name: 'みかん' }, 
  { id: 3, name: 'ぶどう' } 
], 
```
selectedFruitsプロパティにはからの**文字列（""）**で指定します。
そしてプルダウン指定値を**配列 []** で用意し、その中に複数の**{}オブジェクト**を用意します。

### 手順③ HTMLで表示する
```html
<select v-model="selectedFruits">
  <option disabled value="">担当</option>
  <option v-for="fruit in optionFruits" 
    v-bind:value="fruit.name" 
    v-bind:key="fruit.id">
  {{ Fruit.name }}
  </option>
</select>
```

selectタグにデータバインディングを作成するための**v-model**を指定します。
そしてその値の中に先ほど用意した、selectedFruitsプロパティにはからの**文字列（""）**をあてます。

```html

<select v-model="selectedFruits"></select>
```

次にoptionタグは**for文**で値を回し、それを一つ一つ選択できるように設定します。
その際、先ほど**配列 []**で用意したoptionFruitsをあてます。

```html
  <option v-for="fruit in optionFruits" 
    v-bind:value="fruit.name" 
    v-bind:key="fruit.id">
  {{ Fruit.name }}
  </option>
```

key, valueは実際にフォームとして送信したいケースに合わせて値を変更してください。


実際使用するケースとしては、
バックエンド側と連携するプルダウンを作成するために、**axios**を使用し、
apiを叩いてselectする値まで取得するケースが多いです。
そちらの記事はまた後ほど追加で書きます。
障害調査で使うS3コマンド

# 前提
- AWS CLIがインストールされていること。

# 対象ファイルをダウンロード

```bash:コマンド
aws s3 cp s3://<バケット名> <ローカルのディレクトリ> --exclude "*" --include "<取得したいファイル>" --recursive
```

取得したいファイルについては、ワイルドカードが利用できる。

例）hogeバケットから2020年06月分のログ取得

```bash:コマンド
aws s3 cp s3://hoge ~/log --exclude "*" --include "202006*/**/*.gz" --recursive
```

# 全文検索

zgrepでgzipのまま検索できる。

```bash:コマンド
zgrep -r "<検索対象文字列>" <検索対象ディレクトリ>
```
マルチコアとスレッド

めっちゃ参考にさせてもらいました！感謝です。

[マルチコアとスレッド](https://chimolog.co/bto-cpu-core-thread/#:~:text=%E3%80%8C%E3%82%B3%E3%82%A2%E6%95%B0%E3%80%8D%E3%81%AFCPU%E3%81%AE,%E3%81%A6%E3%81%84%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E6%84%8F%E5%91%B3%E3%81%A7%E3%81%99%E3%80%82)

マルチコア
１つのCPUに入っている脳みその数
スレッド
１つのCPUでできる仕事の数 (余力のある部分を効率よく使える)

# OSがいくつのCPUを認識しているか (例:6コア12スレッド)
$ cat /proc/cpuinfo | grep processor
processor	: 0
processor	: 1
processor	: 2
processor	: 3
processor	: 4
processor	: 5
processor	: 6
processor	: 7
processor	: 8
processor	: 9
processor	: 10
processor	: 11

# 物理CPU数
$ cat /proc/cpuinfo | grep "physical id"
physical id	: 0
physical id	: 0
physical id	: 0
physical id	: 0
physical id	: 0
physical id	: 0
physical id	: 0
physical id	: 0
physical id	: 0
physical id	: 0
physical id	: 0
physical id	: 0
0しかないので、物理CPUは1つ

# コア数
$ cat /proc/cpuinfo | grep "cpu cores"
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
cpu cores	: 6
この場合、物理CPUのコア数は6個
OpenAPIで、静的なデータと動的なユーザーの状態を含むレスポンスのスキーマについて考える

いわゆるマスターデータ（最近はマスターデータというのもだめなんだろうか？）と、そのマスターデータに関するユーザーの状態を一緒に返すAPIのスキーマについて考えます。
具体例として、雑誌という静的なデータと、その雑誌をお気に入りしているかというユーザーの状態を含むレスポンスをどのように構成するかについて考えていきます。

## パターン1: 両方同じオブジェクトに含めてしまう

```json
[
  {
    "id": 100,
    "name": "ジャンプ",
    "is_favorite": true
  },
  {
    "id": 200,
    "name": "マガジン",
    "is_favorite": false
  }
]
```

こういうのはよく見る気がしますが、あまり良くないと思っています。なぜならOpenAPIのschemaを再利用しにくいからです。

```yaml

components:
  schemas:
    magazine:
      type: object
      required:
        - id
        - name
      properties:
        id:
          type: integer
        name:
          type: string

```
OpenAPIでは上記のようにスキーマを定義し、$refを用いてそのスキーマを参照することができますが、例えば雑誌という静的なデータだけを返すようなAPIが欲しくなった、しかもそのAPIはログインしてなくても使えるAPIだ。となった場合に、is_favoriteというフィールドが邪魔になってしまいます。
なのでschemaの再利用がしにくいというわけです。

## パターン2: 静的なデータと動的なユーザーの状態を含むデータを別のオブジェクトにする

```json
{
  "magazines": [
    {
      "id": 100,
      "name": "ジャンプ"
    },
    {
      "id": 200,
      "name": "サンデー"
    },
  ],
  "favorite_magazines": [
    {
      "magazine_id": 100,
    }
  ]
```
magazinesとfavorite_magazinesという2つのオブジェクトに分けたことで、OpenAPIのSchema的には別物になり再利用がしやすくなりました。
リレーショナルデータベースを使っていれば、magazinesとfavorite_magazinesは別テーブルに保存していると思うのでこのJSONは作りやすいことでしょう。
ただこのスキーマの場合、レスポンスを受け取ったクライアント側がmagazinesとfavorite_magazinesをマッピングしなくてはなりません。そのため利用者側からすると不便でしょう。
OpenAPIではリレーショナルデータベースのように外部キーを設定できないので、favorite_magazinesとmagazinesのidが紐付いていることを説明する手間も発生します。

## パターン3: 静的なデータと動的なユーザーの状態を包含したオブジェクトを作る

```json

[
  {
    "magazine": {
      "id": 100,
      "name": "ジャンプ"
    },
    "user_state": {
      "is_favorite": true
    }
  },
  {
    "magazine": {
      "id": 200,
      "name": "サンデー"
    },
    "user_state: {
      "is_favorite": false
    }
  }
]
```
こうした場合OpenAPIのSchemaは下記のようになります。

```yaml

components:
  schemas:
    magazine:
      type: object
      required:
        - id
        - name
      properties:
        id:
          type: integer
        name:
          type: string
    magazine_user_state:
      type: object
      required:
        - is_favorite
# ↑のようにschemaを定義して

application/json:
  schema:
    type: array
    items:
      type: object
      required:
        - magazine
        - user_state
      properties:
        magazine:
          $ref: '#/components/schemas/magazine'
        user_state:
          $ref: '#/components/schemas/magazine_user_state'
# ↑のように利用する
```

このようにしておけば、雑誌という静的なデータだけを返すようなAPIが欲しくなった場合でもmagazineのschemaを用いれば再利用が可能です。
というわけで最近の弊プロジェクトではこのような形でSchemaを定義するようにしています。
ただ悩みが一つあり、この包含したオブジェクトをどのように名付けるのかというところが悩みです。包含したオブジェクトをmagazineとし、中にあるmagazineをmagazine_contentとかにするのが良かったりするのかも？

## まとめ

Schemaを再利用したい、かつ静的なデータと動的なユーザーの状態を一つのAPIで一緒に返したいという事情からこのような形になりました。
そういった事情がない場合はパターン1や他のパターンも考えられると思います。
いずれにせよOpenAPIはSchemaを定義し、それを再利用することがサーバ側にとってもクライアント側にとっても開発効率の向上につながるので、Schemaに良い感じにまとめられるよう考え続けるのが大事だと思います。
というわけでもし他に何か良い方法があれば教えてください！
図解pandasの関数適用処理

# `DataFrame`と`Series`

列（columns）が複数あるか否かの違い。
`DataFrame["列名"]`とすると`Series`を返す。

<img width=600 alt="q1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/c2ba920a-6272-efbd-5532-1f657d9e4176.png">

# `Series.map()`と`DataFrame.applymap()`

`map()`, `applymap()`は要素ごとの適用。
`Series.map()`については、NaNのある表に対して適用する場合は、`na_action="ignore"`を指定する。また、追加機能として、関数でなく辞書型か`Series`を入力にすると、"NY"を"NewYork"に変換するといった置換ができる（`DataFrame.applymap()`にはなし）。

<img width=350 alt="q2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/bf94d9f7-c094-fa2e-adc5-2c36bc46ee5a.png">

<img width=500 alt="q3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/5f02055a-2edc-9236-1412-a2496cfa0bac.png">


# `Series.apply()`と`DataFrame.apply()`

`DataFrame.apply()`はアイテムごと、もしくは列ごとの処理（`axis`にて選択）。例えば、アイテムごとの処理の際に、複数列の要素を使用したい場合はこれを用いる。

`Series.map()`よりも`Series.apply()`を用いる理由は特殊なケースを除けばあまりない。

<img width=250 alt="q4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/e52a170c-3266-5ab3-691a-400a4861fa29.png">

<img width=500 alt="q6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/2ea99bd6-e32b-7ab9-f53c-9f52d967ad96.png">

<img width=500 alt="q5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/de2271c2-e1bc-e208-9e02-10f1f53f934d.png">
filter_inputを使ってみて気になったこと

ユーザ登録機能を作成しながらfilter_inputの使用について学んだので、まとめてみました。

##filter_inputのメリット

容易にユーザが入力したこと、もしくは入力しなかったことを調査してくれる、素晴らしいメソッドです。

入力された値をチェックして、大丈夫なら変数に値を入れてくれるが、ふさわしくないものだったら弾いてくれます。

filter_inputを使えば、以前ならたくさんコードを記述しなければならなかった部分をすっきりとまとめられますね。

##filter_inputの使い方 ＋ まとめ

下記のように記述します。

```
filter_input ( 型 , 変数名, フィルタ, オプション);
```

今後、何度も使って、サクッとfilter_inputを利用できるようになりましょう。
GCP アップデート (7/3-7/9 2020)

### Compute: [July 6, 2020](https://cloud.google.com/compute/docs/release-notes#July_06_2020)
- E2マシンタイプでvCPUが32コアまで使えるようになったよ！

### BigQuery: [July 6, 2020](https://cloud.google.com/bigquery/docs/release-notes#July_06_2020)
- [Magnitude Simba ODBC ドライバ](https://cloud.google.com/bigquery/providers/simba-drivers)が更新されたよ！
  - 性能改善とバグフィックスを含む。
  - user defined functionsサポート
  - connection stringでタイムゾーン指定に対応。

### Config Connector: [July 1, 2020](https://cloud.google.com/config-connector/docs/release-notes#July_01_2020)
- [``--server-dry-run``](https://kubernetes.io/blog/2019/01/14/apiserver-dry-run-and-kubectl-diff/)をサポートするようになったよ！
- BigtableInstanecリソースでレコンサイレーションが定常的に起きる問題を修正したよ。
- BigtableInstanceで``spec.deletionProtection``がdeprecateしたよ。

### Dialogflow: [July 6, 2020](https://cloud.google.com/dialogflow/docs/release-notes#July_06_2020)
- メトリックとデータが見れる、[Analytics page](https://cloud.google.com/dialogflow/docs/analytics)がベータで追加されたよ！

### AppEngine: [July 6, 2020](https://cloud.google.com/appengine/docs/standard/nodejs/release-notes#July_06_2020)
- SEでNode.js 12がGAになったよ！

### Traffic Director: [July 7, 2020](https://cloud.google.com/traffic-director/docs/release-notes#July_07_2020)
- 自動でEnvoyをデプロイしてくれる[automated Envoy deployment](https://cloud.google.com/traffic-director/docs/auto-vms-options)が使えるようになったよ！
  - Compute Engineはベータ。

### LB: [July 7, 2020](https://cloud.google.com/load-balancing/docs/release-notes#July_07_2020)
- External HTTP(S) LBがAppEngine、Functions, Cloud Runをベータでサポートするようになったよ！！
  - 利用する場合は[Serverless NEG](https://cloud.google.com/load-balancing/docs/negs/setting-up-serverless-negs)という新しいNEGを利用する必要があるよ。
  - ArmorやCDNが使えるようになるので、世界が広がりそう:)

### Dataproc: [July 7, 2020](https://cloud.google.com/dataproc/docs/release-notes#July_07_2020)
- Dataprocのwebのエンドポイントにセキュアにアクセスできる[Dataproc Component Gateway](https://cloud.google.com/dataproc/docs/concepts/accessing/dataproc-gateways)がGAになったよ！

### Composer: [July 7, 2020](https://cloud.google.com/composer/docs/release-notes#July_07_2020)
- 新しいバージョン(composer-1.10.6-airflow-1.10.2, composer-1.10.6-airflow-1.10.3, composer-1.10.6-airflow-1.10.6)のお知らせ
  - デフォルトが1.10.6-airflow-1.10.3に
  - 1.10.6以降で``[celery] pool``がブロックされるよ。
- Airflow 1.10.6でDAG serializationが有効化されてるときにUIで正常にタスクのログが見えなかった問題を修正したよ。


### ディスクレーマ
- アップデートの内容はあくまでも個人の理解していることを書いています。正しい内容はリリースノート等を確認下さい。
- リリース内容できるだけ拾うようにしているのですが、抜けていそうなリリースノートが追加するのでぜひ教えて下さい！(一覧[ここ](https://qiita.com/kenzkenz/items/ac18a359b803dbb6b490)で更新してます。)
Nuxt.jsでポートフォリオサイトを作ろう #6: お問い合わせフォームの作成

![nuxt.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/c6e7c884-2690-cce7-4ebb-3fcfc1506723.jpeg)


[前回](https://qiita.com/takahashitakuya031126/items/2a8a39110f549232c2a9)の続きです。

####Google Formの利用

PHPの知識がない方のために、今回はGoogle Formでお問い合わせフォームを作成していきます。

Googleアカウントがない方は事前に作っておいてください。

まずは[https://docs.google.com/forms/u/0/](https://docs.google.com/forms/u/0/)にアクセスし、「新しいフォームを作成」の下にある「空白」を選択します。

![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/c596220a-e51e-c858-762e-c218223026e8.png)

下の画面のようなフォームを作ってください。

フォーム全体
![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/0fc5664f-c2dc-917d-59e4-43bf3ba49dec.png)

お名前
![img3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/de93aa2e-48ea-e656-2ac9-a68d18e746c9.png)

メールアドレス
![img4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/9ba56b00-56a9-3f2c-7ecd-d9f8e6e0e04b.png)

内容
![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/671744d6-7b02-0603-9566-60b8092ed679.png)

フォームの作成が終わったら、右上にある送信ボタンを選択します。

![img6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/8e230f9c-c6de-8748-f28b-d9491ac2c664.png)

<>タブを選択するとHTMLに埋め込むためのコードがあるので、それをコピーする。

####お問い合わせフォームの設置

index.vueにコードを追加します。

```JavaScript:pages/index.vue
<template>
    <div>
        <Top />
        <v-divider></v-divider>
        <Profile />
        <v-divider></v-divider>
        <Work />
        <v-divider></v-divider> // 追記
        <Contact /> // 追記
    </div>
</template>

<script>
import Top from '~/components/Top.vue'
import Profile from '~/components/Profile.vue'
import Work from '~/components/Work.vue'
import Contact from '~/components/Contact.vue' // 追記

export default {
  components: {
    Top,
    Profile,
    Work,
    Contact // 追記
  }
}
</script>
```

次にcomponentsディレクトリにContact.vueを作成します。

```JavaScript:components/Contact.vue
<template>
    <div id="contact">
            <v-container
            fluid>
                <v-card
                width="100vw"
                >
                <iframe
                  :src="src"
                  width="100%"
                  height="750px"
                  frameborder="0"
                  marginheight="0"
                  marginwidth="0"
                  >読み込んでいます…
                  </iframe>
                </v-card>
            </v-container>
    </div>
</template>
<script>
export default {
    data: () => ({
        src: "https://docs.google.com/forms/d/e/1FAIpQLSdqWDVjIQJwy1J2Tz4kBS9RnaKF_vmanmU2KipvHeqf4aeKUA/viewform?embedded=true"
    }),

};
</script>
```

ブラウザを確認してみましょう。

![img7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/d304bc72-a202-ea27-848e-cdf32a4ac15c.png)

これでお問い合わせフォームを埋め込むことができました。

次が最終回です。最後はインターネット上で公開する方法を説明します。

[Nuxt.jsでポートフォリオサイトを作ろう #7: サイトの公開](https://qiita.com/takahashitakuya031126/items/8e20c794637b8995b3b6)
[AWS] S3サーバアクセスログについて

# S3アクセスログ

- バケットに対する詳細ログが記録される
- アクセスログはセキュリティやアクセス監査に役立つ
- S3の請求についての理解にも役立つ

# ベストエフォート型のサーバーログ配信

- ログは記録された時間から数時間以内に配信される
    - 配信されない場合もある
- ログの目的はトラフィックの特性を理解すること
- ログの完全性や適時性は保証されない

> https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/ServerLogs.html#LogDeliveryBestEffort

# バケットのログ記録ステータスの変更が有効になるまでには時間がかかる

- ログ取得有効化してから数時間以内のログは記録されたりされなかったりする

> https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/ServerLogs.html#BucketLoggingStatusChanges

# アクセスログの取得

- アクセスログ取得はデフォルトで `無効` になっている
- 保存先バケットは取得元バケットと同一リージョンに作成する必要がある
- デフォルトではアクセスログの保存期間の設定はされていない
- `ログ配信グループ` と呼ばれる特別なログ配信アカウントを使用してアクセスログを書き込む
    - 通常のアクセスコントロールの制約に従われる

## 保存先バケットの作成

- 取得元と同一リージョンに作成する必要がある
- 取得元と保存先バケットは同一アカウント所有である必要がある
- 取得元にそのままアクセスログを保存可能だが非推奨
    - アクセスログを書き込みに対して更にアクセスログが書き込みされる

### バケット作成例

> 取得元と同一アカウントのS3にリージョン別の保存先を作成

- `s3-access-log-ap-northeast-1`
- `s3-access-log-us-east-1`
- `s3-access-log-us-west-2`

## ログ配信グループへの書き込み権限付与

- 取得元でログ取得を有効化すると保存先ACLにログ配信グループ書き込みアクセスが許可される

## 取得有効化

1. AWS マネジメントコンソールにサインインし、Amazon S3 コンソール (https://console.aws.amazon.com/s3/) を開きます。
2. [バケット名] リストで、サーバーアクセスログ記録を有効にするバケットの名前を選択します。
3. [プロパティ] を選択します。
4. [Server access logging (サーバーアクセスのログ記録)] を選択します。
5. [ログの有効化] を選択します。[Target (ターゲット)] で、ログレコードオブジェクトを受け取るバケットの名前を選択します。 ターゲットバケットは、ソースバケットと同じリージョン内になければならず、デフォルトの保存期間設定を持ってはいけません。
6. (オプション) [ターゲットプレフィックス] に、ログオブジェクトのキー名プレフィックスを入力します。これにより、すべてのログオブジェクト名が同じ文字列で始まります。
7. [Save] を選択します。

> https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/user-guide/server-access-logging.html

# ログ形式

- ログは `改行` で区切った複数のレコードが1つのファイルにまとまって出力される
- 各ログレコードは1個のリクエストを表している
- 各フィールドは `スペース` で区切られている

> https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/LogFormat.html

```text
79a59df900b949e55d96a1e698fbacedfd6e09d98eacf8f8d5218e7cd47ef2be awsexamplebucket1 [06/Feb/2019:00:00:38 +0000] 192.0.2.3 79a59df900b949e55d96a1e698fbacedfd6e09d98eacf8f8d5218e7cd47ef2be 3E57427F3EXAMPLE REST.GET.VERSIONING - "GET /awsexamplebucket1?versioning HTTP/1.1" 200 - 113 - 7 - "-" "S3Console/0.4" - s9lzHYrFp76ZVxRcpX9+5cjAnEH2ROuNkd2BHfIa6UkFVdtjf5mKR3/eTPFvsiP/XV/VLi31234= SigV2 ECDHE-RSA-AES128-GCM-SHA256 AuthHeader awsexamplebucket1.s3.us-west-1.amazonaws.com TLSV1.1
```

## フィールド

- https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/LogFormat.html

# ログファイルの削除

- ライフサイクル設定で削除する

# ログ検索

- Athenaを使ってクエリでの検索
- AWSドキュメトにクエリ例ものっている

> https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/using-s3-access-logs-to-identify-requests.html#querying-s3-access-logs-for-requests
> 
> https://www.youtube.com/watch?v=8mSxMK1FdSs
VSCodeでリモート環境下でペアプロ！



###  Caution :triangular_flag_on_post:

* この記事は リモート環境下でもペアプロをしたいという人を対象にしています。
* 筆者の知っている範囲の知識で作成したものなので、もっといい方法があるよという方はコメントお願いいたします！
* Macでの動作確認済み。windowsは未定。


###  Overview :airplane:

* 何が出来る？
    * リアルタイムで同じファイルを更新・削除できる (**コードの共同編集**)
    * 設定すればターミナルを操作する権限をペアプロ相手にも渡せる（**シェルの共有**）
    * localhost などを共有できるので 同じ環境をシェアして見ながら作業できる（**サーバの共有**）

* 何が嬉しい？
    * ココ見てほしいといった相談をしているうちに,回答者が **さくっと編集できるようになる**
    * **ローカルの環境をサーバに上げずに共有できる**ので、手間が少ない & ハードルが低い
    * ボタン一つで 上記3点が実現できるので**とっても楽**


####  Requirement :hammer_pick:

* [Visual Studio Code](https://code.visualstudio.com/)をインストールしておくこと
* [VS Live Share 拡張](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsls-vs) をインストール ＆ 一度起動して GitHub か Microsoft のアカウントを登録しておくこと
* Slack などの画面共有・会話ができるツールを用意しておくこと(LiveShareでも出来るが使いにくいので。。。)
 

###  How to Start :rocket:

* 以下3点で始められます。

#### :one: Live Shareを起動!

* Live Share ボタンがVsCode最下部にあらわれているのでそれをクリック！
![スクリーンショット_2020_06_16_12_49_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652518/82190a7f-197d-2c7b-9fd4-b5a02fa0cb10.png)

#### :two: ペアプロ相手にリンクをシェア!

* 自動的にリンクがクリップボードにコピーされるので、それをペアプロ相手に共有してあげる
    * ペアプロ相手が参加できたらOK！
    * 出来ない場合はトラブルシューティング :oncoming_police_car:

#### :three: 通話をつなげる！

* なんでもよいです。
    * 最近だと Zoomとかが有名ですが、いざというとき用の画面共有ができればいいです。
    * 通話品質が安定しているツールで良いと思います。（リモート環境下だと音飛びすることがままある為）


### In conclusion... :v: 

* コロナ禍であっても、ペアプロは簡単にできる時代です:relaxed:
* リモート環境だからこそ、ツールを最大限活用してコミュニケーションを密に取っていきましょう〜:family_mwgb: