OmniAICreator/Qiita-1.07M huggingface dataset:
GCPにnginxをインストールしてウェブサイトを構築する

#GCP無料枠と90日間$300ドルの無料トライアル
GCPでは、無料枠と90日間$300ドルの無料トライアルがあります。
登録する前にしっかり読んで自分で判断して登録しましょう。
予期せず料金が発生する場合があります
https://cloud.google.com/free/docs/gcp-free-tier?hl=ja&_ga=2.36481120.-1980692516.1603712704


#GCPに登録#
https://cloud.google.com/?hl=ja

####・基本的な情報とクレカ情報を入力して登録

####・Cmpute Engine の VMインスタンスを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/5ded760d-fde6-48e9-9c99-3a8ef5e7a896.png)

####・「課金を有効にする」か聞かれるのでクリック
※料金システムについては、ご確認の上自分で判断して課金を有効にしてください

1分程待ちます

####・リージョン、とシリーズ、マシンタイプを選びます。
一番安いのは、N1のf1-microでした。無料枠は、「f1-micro」が対象でしたので、そちらを設定しました。
右に月の料金が出るので親切ですね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/d91afd58-512c-eddc-29fe-304b71e31cf1.png)

osはデフォルトで、debianが選択されているので、他のを使いたい場合は他のを選択する

####・今回は、ウェブサイトを構築したいので、HTTPを許可
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771936/921f2ea2-247d-9e47-dddf-0dc8ab06abb2.png)

####・aptをアップデートしとく
```sudo apt update```

####・nginxをインストール
```sudo apt install nginx```

####・次でufwが必要なのでインストールしとく
```sudo apt -y install ufw```

####・HTTP 80を許可
```sudo ufw allow 'Nginx HTTP'```

####・下記でnginxが起動しているか確認(インストールした時点で起動されているはず)
```systemctl status nginx ```

####・Activeになっていない場合は、下記で起動
```sudo systemctl start nginx ```

####・GCPに表示されているIPを入力
http://xx.xx.xx/

nginxのトップページが表示されていればオッケー

ここまで、15分くらいで構築できました。

お試しで作業している場合は、作業が終わったらインスタンスを停止することを忘れずに!!
Pythonで日付を取得操作する


#目的：日付を思うように操作する
今後スクレイピングで出力したcsvの日付を操作するときに必要だと思ったから。
##この記事で得られること
・応用で現在時刻を使用して、作成するcsv名に日付を指定することができる
・csvファイルに記入されているcsvの操作
・date型をstring型にまたその逆もしかり


##現在の時刻を出力する
```test.py
from datetime import datetime
now = datetime.now()
print(now)



-----result-----
2020-10-26 20:39:01.825495
```



##文字列を日付に変更する方法

```test.py
from datetime import datetime

#  2018/11/11 も同様にできる
str_date = '2018年11月11日'



#strptimeは文字列を日付に
#strftimeは日付を文字列に

one_date = datetime.strptime(str_date, '%Y年%m月%d日')
print(one_date)


-----result-----
2018-11-11 00:00:00

```


##過去未来の日付操作




````test.py
from datetime import datetime
from datetime import timedelta

str_date = '2018/11/11'
base_date = datetime.strptime(str_date, '%Y/%m/%d')

print(base_date)

-----result-----
2018-11-11 00:00:00
----------------


#10日前
before_10days = base_date - timedelta(days=10)
#10日後
before_10days = base_date - timedelta(days=10)

print(before_10days)


-----result-----
2018-11-01 00:00:00

```
##csvを使用した日付の操作
```day.csv
2016-10-01
2016-10-02
2016-10-03
2016-10-04
2016-10-05
2016-10-06
2016-10-07
2016-10-08
2016-10-09
2016-10-10
2016-10-11
2016-10-12
2016-10-13
2016-10-14
```

```day.py
from datetime import datetime

#csv読み込み
with open('day.csv', encoding='utf-8') as f:

    for row in f:
        day = datetime.strptime(row.rstrip(), '%Y-%m-%d')
        print(f'{day:%Y/%m/%d}')





-----result-----
2016/10/02
2016/10/03
2016/10/04
2016/10/05
2016/10/06
2016/10/07
2016/10/08
2016/10/09
2016/10/10
2016/10/11
2016/10/12
2016/10/13
2016/10/14

```



##Python機能
Python3.8の新機能
f'{ 式=}'式そのもの出力ができるようになった。　 
書式を出力する場合　f'{ 式=：書式}'　 



#csvから該当する日付を出力する

```test.py
from datetime import datetime
from datetime import timedelta

main_date ='2016-10-12'

#文字列→日付に
base_day = datetime.strptime(main_date,'%Y-%m-%d')

#一週間前の日付
before_7days = base_day - timedelta(days=7)

#csvファイルを選択
with open('day.csv', encoding='utf-8') as f:
 
    for row in f:

        #　　　　　　　　文字列→日付　行末の改行を削除
        day = datetime.strptime(row.rstrip(), '%Y-%m-%d')
        
        #print(day)
        #2016-10-02 00:00:00
        #2016-10-03 00:00:00
                #~
        #2016-10-14 00:00:00


        #2016-10-12 から７日間該当するものを表示
        if before_7days <= day < base_day:
                #Y/m/d 形式で
            print(f'{day:%Y/%m/%d}')


-----reult-----
2016/10/05
2016/10/06
2016/10/07
2016/10/08
2016/10/09
2016/10/10
2016/10/11


```
PostgreSQLでのあいまい検索

# 曖昧検索について
SQLで曖昧検索をするには、`LIKE句`を使用するのが一般的であるが、`Postgresql`では別の書き方もできるので、メモ程度に残していこうと思う。

## 演算子を使った曖昧検索
- 以下のレコードが投入されているテーブルがあるとする。


|id  |language  |
|---|---|
|1  | Java |
|2  |JavaScript  |
|3  |Ruby  |
|4  |PHP  |


```SQL
-- LIKE句を用いたSQL
SELECT * FROM hoge WHERE name LIKE 'Java%'

-- Postgresqlの演算子を用いたSQL
SELECT * FROM hoge WHERE name ~~ 'Java%'
```

上記のSQLを実行した場合両方同一の結果が得られる

```
+------------------+
| id | language    |   
+------------------+
| 1   | Java       |
| 2   | JavaScript |
+------------------+
```

## 大文字小文字を区別せずに曖昧検索をする
少し話がそれてしまうが、Postgresqlでは,曖昧検索で、大文字と小文字を区別せずに検索を行うための`ILIKE`が標準で実装されている。LIKE句に比べたら、そこまで使用頻度は高くないかもしれないが、知っておくことに越したことはない。

ユーザーが自由入力でき、大文字小文字の入力チェックを行わない項目には有効かもしれない。

先程のテーブルのレコードを少しばかり変更する。
`Java` → `java`
`JavaScript` → `javascript`

|id  |language  |
|---|---|
|1  | java |
|2  |javascript  |
|3  |Ruby  |
|4  |PHP  |


```SQL
-- ILIKE句を用いたSQL
SELECT * FROM hoge WHERE name ILIKE 'Java%'

-- Postgresqlの演算子を用いたSQL
SELECT * FROM hoge WHERE name ~~* 'Java%'
```

先ほどと同様に上記のSQLを実行した場合両方同一の結果が得られる

```
+------------------+
| id | language    |   
+------------------+
| 1   | Java       |
| 2   | javascript |
+------------------+
```
`~~`、`~~*`はいずれもPostgresql固有の演算子です。
もちろん`NOT LIKE`,`NOT ILIKE`と対になる`!~~`、`!~~*` 演算子もあります。


### 参考文献
[PostgreSQL 12.3文書 第9章 関数と演算子 9.7. パターンマッチ1](https://www.postgresql.jp/document/12/html/functions-matching.html)
ScrollViewのぐにゃんと動くものの制御

この言葉では表現しにくい、スクロール出来るコンテンツに出てくる**ぐにゃん**と動くものの制御方法についてです。

## it's ぐにゃん

- ぐにゃんでもうにょんでもいいんですが、スクロール出来るコンポーネントをスライドしたときに出てくるこいつです。
- 正式な名称は**EdgeEffect**ですね。（まずこの名称にたどり着かないと:frowning2:）

![gynyan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495289/0584d4bc-70cb-9048-8db8-8a61f2093605.png)

## EdgeEffect について
- APIバージョン `16` から存在している機能
- 何も設定しなければ、`Theme`の`colorPrimary`に設定されている色に20%(0x33)のアルファ値を設定した値が反映されている？（バージョンによって違うかも）

[Code](https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/android/widget/EdgeEffect.java;l=129?q=colorEdgeEffect)

## EdgeEffectの色を変える方法

### アプリケーションの`Theme`に割り当てる方法
- 影響範囲はアプリケーション全体
- `ScrollView`全部がかわるので、`RecyclerView`や`PullToRefresh付きのWebView`も影響を受けます

#### 設定方法
- Themeに追加して利用します。
- `Activity`で利用しているThemeであればActivity全体が変更されます。

``` xml
 <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    ・・・
    <item name="android:colorEdgeEffect">#0000FF</item> 
    ・・・
</style>
```

## EdgeEffectの表示をコンポーネントで切り替える

- EdgeEffectの表示切り替える設定には`overScrollMode`を利用します。
- `overScrollMode`には3つのパラメータが用意されています。

|パラメータ|動き|
|---|---|
|always|常にエフェクトを表示する|
|ifContentScrolls|表示している内容がスクロールするものの場合にのみエフェクトを表示する|
|never|エフェクトを表示しない|

### XMLで設定する

``` xml
<androidx.core.widget.NestedScrollView 
    ・・・
    android:overScrollMode="ifContentScrolls"
    ・・・
    tools:showIn="@layout/activity_scrolling">
```

### プログラムで設定する
``` kotlin
scrollView.overScrollMode = View.OVER_SCROLL_ALWAYS
```

## 最後に
- 機能の名前を忘れるとたどりつくのが大変になりますね。
- 名前を覚えておいて、必要なときに設定を変えてあげましょう。
ubuntu 20.04に、WI-U2-433DMSを認識させる

# 概要
　タイトルの通り、ubuntu 20.04に、WI-UW-433DMSを接続して認識させるための備忘録です。

　最近、TELLOというおもちゃのドローンを購入して、遊び始めました。(そのうち、何か上げるかも。)この機器、スマホで操作が出来て、ついでに、パソコンからプログラムでコントール可能とのこと。接続は、ドローン側がWi-FiのAPモードで立ち上がっているので、それに接続する形となります。てわけで、パソコンにもWi-Fiのクライアントが必要となり、とりあえず、適当に買ってみたのが、BUFFALOのWI-U2-433DMS。

　試しに何もせずにつないでみても、うんともすんとも言わない。まぁ、覚悟はしていましたが（笑）ドライバーの記事をgoogle先生に聞きながら探す。これが、どうも、うまく行かない。なにせ、ubuntu 18.04の記事は多々あれど、20.04の記事は見つからない。まぁ、まだ出て間がありませんし、こんなもんでしょう。というわけで、現時点(2020/10/26)時点の成功例の一つとして、備忘録としておきます。

　Ubuntuのバージョンは、次の通り。

```
$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="20.04.1 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.1 LTS"
VERSION_ID="20.04"
```

# 使用したドライバ
　この、WI-UW-433DMSが使用しているチップは、rtl8821auのようです。このチップ名で、探してみて、成功したドライバが、 [「aircrack-ng/rtl8812au」](https://github.com/aircrack-ng/rtl8812au) でした。タイトルは、rtl8812auとなっていますが、rtl8821auにも対応しています。

# インストール
　githubより、いつものように、クローンします。

```
$ git clone https://github.com/aircrack-ng/rtl8812au.git
```

　後は、素直に、README.MDにかかれている通り。まずは、DKMSが必要になりますので、拾ってきます。

```
$ sudo apt-get install dkms
```

　そして、クローンしてきたrtl8812auのディレクトリ内で、

```
$ sudo make dkms_install
```

　を実行すれば、これで終わり。
　ちなみに、dkmsは、linuxのバージョンがアップデートで変更になった時に、自動的にドライバの再構築をさせるためのツールです。本来、いくつかの設定が必要なのですが、全て、dkms_installのスクリプトが処理をしてくれます。(これを入れてから、一度、linuxカーネルのバージョンアップがかかりましたが、うまく、処理してくれました。)

　アンインストールするときは、

```
$ sudo make dkms_remove
```

　とこちらも、スクリプトがちゃんと用意されています。
　例のごとく、一応再起動をかけて、WI-U2-433DMSを挿してあげると、無事、認識できました。
　これで、一段落。

　まぁ、ubuntuに限らず、linuxのドライバ関係は、日々状況がころっと変わる可能性があるので、あくまで、現時点でのメモということで。
【OpenShift Container Platform】oc login時のトークン更新の挙動検証

# 概要
今回は**OpenShift Container Platform**（以降**OCP**）の`oc login`コマンドを実行時にセッションを確立するために使用されるトークンの動きが気になったので、調べた結果を記載する。


# 前提
- 検証環境：**OpenShift Container Platform 4.3** on **AWS**
- 作業端末：OCPデプロイ先のVPCのパブリックサブネット内にある**EC2 Amazon Linux2**インスタンス  
この作業端末にはOCPクラスタに接続するための設定情報kubeconfigファイルが格納されている。


# 結論
結論から言うと、CLIのログインコマンド

```shell:terminal
# oc login -u <user_name> -p <passwd>
```

を使用し、OCPにログインを行うと、OCPの認証情報が格納されている**kubeconfig**ファイルの以下の部分のトークンが更新される。


```shell:kubeconfig
- name: <user_name>/api-myopenshift-test-com:6443
  user:
    token: **************************
```


# 検証
#### 1. 作業端末にsshでログイン

```shell:terminal
ssh ec2-user@<remote-ip> -i <private-key-file>
```

#### 2. rootユーザーにスイッチ

```shell:tarminal
$ sudo su -
```

#### 3. OCPにログイン前のkubeconfigのトークンの値を確認

```shell:kubeconfig
# less <your-dir>/kubeconfig

(一部抜粋)
- name: <user_name>/api-myopenshift-test-com:6443
  user:
    token: nFKg1Clp00jQYBYJl-kPgvkU0wNN15-papWTeGLILCQ
```

`<your-dir>`はkubeconfigが格納されているディレクトリ


#### 4. kubeconfigを環境変数としてexport

```shell:terminal
# export KUBECONFIG=<your-dir>/kubeconfig
```
これを行うことで、格納されている認証情報を用いてocコマンドを実行できる。

#### 5. oc login実行

```shell:terminal
# oc login -u <user_name> -p <passwd>
```

#### 6. 再度トークンを確認

```shell:terminal
# less <your-dir>/kubeconfig

(一部抜粋)
- name: <user_name>/api-myopenshift-test-com:6443
  user:
    token: OTn3jUv5oonEx2wgUwE2pPJQxx68pvIomO2NrBBL5fA
```


このように、`oc login`毎にトークンが更新される。

以上、読んでいただきありがとうございました。
formタグは1つのまま、1つの要素クリックで複数の関連するnameだけを送信（post）させる方法

# どうも7noteです。綺麗に書きたいがあまりちょっと無理やり作りました。

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/namepost/
ruby on rails でのアプリの作り方（環境構築はできているものとします）

ターミナルにて、「cd　〜」でアプリ作成したいディレクトリを選択する。
rails _ 6.0.0 _  new （作成したいアプリ名） -d mysqlを入力すると「create　〜」がたくさん出た後に「Webpacker successfully installed」が表示されれば成功です。
rails newはrubyのフレームワークであるrailsがWebアプリケーションに必要なファイル一式を作成してくれるコマンドです。

もしエラーが表示された場合は、
「bundle config --delete build.mysql2」
「bundle config --global build.mysql2 --with-opt-dir="$(brew --prefix openssl)"」
「cd ~（作成したアプリ名）」
「bundle install」と順番に入力すれば大丈夫だと思います。

cd (作成したアプリ名)を入力すればそのアプリのディレクトリに移動し、ライブラリの追加などを行えます。

その後、VSCodeなどで(作成したアプリ名)のconfig/database.ymlの14行目くらいに「encoding: utf8mb4」と記述されていると思います。
「utf8mb4」の「mb4」を消し、「encoding: utf8」にします。
ターミナルに移動し、rails db:createを入力すると
「Created database　'（作成したアプリ名）_development'」
「Created database　'（作成したアプリ名）_test'」の二つが表示されていると思います。
rails sと入力した後、webにて「localhost3000」と入力すると「Yay! You’re on Rails!」の下に、地球に乗った世界各国の人たちがいるイラストが表示されていたら成功です。

初学者なので間違いなどあればご指摘いただけるとありがたいです。
vueのcss-scopedとcss-moduleの違い

# この記事の対象者

vueの基礎を理解している

## css-scopedのcss-moduleの共通点

両方ともコンポーネントのスタイルとして定義される

## css-scoped
```vue

<template lang="html">
  <button class="button">ボタン</button>
</template>
```

```scss
<style lang="scss" scoped>
.button {
  // スタイル定義
}
</style>
```

ビルドの後のHTMLではクラス名の変化は特になし

```html
<button data-v-015de462="" data-v-fae5bece="" type="button" class="button"> OK </button>
```

開発ツールでのCSSの見た目
クラス名の後ろに[data-v-015de462]が付与されている。

```css
.button[data-v-015de462] {}
```

## css-module
```vue

<template lang="html">
  <button :class="$style.button">ボタン</button> // $style.button という指定の仕方になる
</template>
```

```scss
<style lang="scss" module>
.button {
  // スタイル定義
}
</style>
```

ビルド後のHTMLを見るとクラス名が変化しています！！

```html
<button data-v-fae5bece="" type="button" class="Button_button_Mvymr"> OK </button>
```

開発ツールでのCSSの見た目
scopedとは違い[data-XXX]は付かずビルド後に変化したクラス名が使われています！！

```css
.Button_button_Mvymr {}

```

## css-scopedとcss-moduleの異なる点とは

- css-moduleの`$style.button`は`script`内でも使用することが可能。

公式ドキュメントから抜粋

```javascript
<script>
export default {
  created () {
    console.log(this.$style.red)
    // -> "_1VyoJ-uZOjlOxP7jWUy19_0"
    // filename と className に基づいて出力された識別子。
  }
}
</script>
```

- css-moduleは` ::v-deep`では決して上書きが決してできない

本来では下記の指定をすると子コンポーネントで`scoped`を指定していても`::v-deep`を使用するとスタイルを上書きすることが可能になりますが、css-moduleの場合は決して`上書きすることができません`。

```css

<style lang="scss" scoped>
::v-deep .button {
  background-color: green;
}
</style>
```

## 最後に

普段からクセで`scoped`を使いがちですが、今回はVSCodeの予測変換から`module`が表示されていたので気になって調べて見ました。
css-moduleであればtemplate, script, styleから`参照し合える`のでscopedより使いやすそうです。
【python】アルファベットを数字に変更

#はじめに
プログラムを書く時にアルファベットを文字にしたいと思ったときに使える方法を書く。
#アルファベット→数字
ordを使う

 ```
>>> ord('a')
97
```

ord('アルファベット')でアルファベットに対応した数字が出力される。

#数字→アルファベット
chrを使う

 ```
>>> chr(97)
'a'
```

chr(数字)で数字に対応したアルファベットが出力される。
【Amazon RDS】データベース作成時にエラー

RDSでデータベース作成時にエラーとなったので対処方法メモ
## データベース作成前の状態
VPC

| 名前 | IPv4 CIDR |
|:--|:--|
|my-vpc	|10.0.0.0/16	|

サブネット

| 名前 | IPv4 CIDRブロック | アベイラビリティゾーン |
|:--|:--|:-:|
|public-subnet	|10.0.1.0/24	|ap-northeast-1c|
|private-subnet	|10.0.2.0/24	|ap-northeast-1c|

セキュリティーグループ

| 名前 | インバウンドルール | 用途 |
|:--|:--|:-:|
|sample-web-sg	|SSH(22)とHTTP(80)を許可	|EC2用|


## データベース作成の設定情報
- マルチ AZ 配置：スタンバイインスタンスを作成しないでください
- VPC：my-vpc
- パブリックアクセス可能：なし
- VPCセキュリティグループ：新規作成
- セキュリティグループ名：sample-db-sg
- アベイラビリティゾーン：**ap-northeast-1c**

## エラー内容
> ご指定になった DB インスタンス choreslist-db の作成リクエストは実行されませんでした。
DB Subnet Group doesn't meet availability zone coverage requirement. Please add subnets to cover at least 2 availability zones. Current coverage: 1 (Service: AmazonRDS; Status Code: 400; Error Code: DBSubnetGroupDoesNotCoverEnoughAZs; Request ID: 1099fafb-cfe1-423e-a872-fac67560dd39; Proxy: null)

## 原因
RDSではアベイラビリティゾーンが別のサブネットが２つ用意する必要がある


## 対処方法
- サブネットをもう１つ作成する

| 名前 | IPv4 CIDRブロック | アベイラビリティゾーン |
|:--|:--|:-:|
|public-subnet	|10.0.1.0/24	|ap-northeast-1c|
|private-subnet	|10.0.2.0/24	|ap-northeast-1c|
|**private-subnet2**	|**10.0.3.0/24**	|**ap-northeast-1a**|

- サブネット作成後にデーターベースを再度作成  
    OK
マークダウン方式での改行方法

# 前提
README作成の際に改行を行いたい！

# 解決策

``文末に半角スペースを2つ入れる！``
他にも<ｂｒ>を入れたり、改行をもう一つ加えたりする方法があります。

個人的には、文末に空白スペースを入れるのがやりやすいと感じました。
ただ、<ｂｒ>をいれるとパット見でどこに空白をいれているかわかりやいというのもあるので、皆さんの好みに合わせて使ってみてください！

# 最後に
読んでいただきありがとうございます！
同じ悩みや壁にぶつかっている人の力になれたら幸いです！
_.debounce と _.throttle は何が違うのか

Vue.js 公式ガイドにて学習をしていたところ、`lodash`の`_.debounce`を使っている箇所があり、
以下のように記載されていた。
<br>

```javascript

    // _.debounce (とその親戚である _.throttle )  についての詳細は
    // https://lodash.com/docs#debounce を見てください。
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
```

<br>

参考URL先のドキュメントを読んでみたのですが
`_.debounce`と`_.throttle`の違いがいまいち分からず（英語苦手....）


挙動としては以下の感じの実装です。(ソースは[こちら](https://jp.vuejs.org/v2/guide/computed.html#%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81%E3%83%A3))
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/719555/91bdf30f-e6f9-a9be-2ac7-33966cb86930.gif)


文字を連続で入力したときに`getAnswer`の関数が何度も呼ばれないようにしているみたいです。


<br>
調べてみると以下の違いのようでした。

- `_.debounce`：連続して呼び出しても指定された時間以内なら処理は実行しない
- `_.throttle`：連続して呼び出しても指定された時間以内に1回しか実行しない


<br>


なるほど...（わからん）

ということでどっちも実装して違いを見てみました。

### `_.debounce`の場合

以下のように実装。
（2000ミリ秒で設定）

```javascript
this.debouncedGetAnswer = _.debounce(this.getAnswer, 2000)
```

これで一定の間隔で文字を入力してみます。

![ezgif.com-gif-maker (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/719555/b90b190b-42a2-2e31-b6fb-2c41a5374a9d.gif)


入力する間隔が2000ミリ秒以内だと`getAnswer`の処理が呼ばれない
＝**「連続して呼び出しても指定された時間以内なら処理は実行しない」**


### `_.throttle`の場合

以下のように実装
（2000ミリ秒で設定）

```javascript
this.debouncedGetAnswer = _.throttle(this.getAnswer, 2000)
```

こちらも先程と同じ間隔くらいで文字を入力してみます。

![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/719555/67e07c3c-0281-555d-bf38-60ce3fa76f7c.gif)


連続して入力しても2000ミリ秒に1回しか`getAnswer`の処理が呼ばれない
＝**「連続して呼び出しても指定された時間以内に1回しか実行しない」**



<br>
...ということでやっと違いが理解できました！
やはり実際に動かすだけで頭に入りますね。


<br>
ちなみに`lodash`を`_`としてるのは
`lodash` = `low(低い) + dash(-)` = `_`だからとかそんな理由らしいです。
<br>
引き続き勉強がんばります。
Excel で、表の修飾を CSS で書き出すアドイン

## ツール

[TachyPochy/tableStyle_withContextMenu](https://github.com/TachyPochy/tableStyle_withContextMenu)

## はじめに

　同様のコンセプトをもつツールは多いと思いますが、nth-child でセルを指定するのが特徴です。

　以下のような用途で使用します。reStructuredText/Sphinx だけでなく、Markdown でも使えるかもしれません。

[Sphinx、表の一部を装飾する（一部だけスタイルを変えたい） - Qiita](https://qiita.com/Tachy_Pochy/items/648dc5252a1916dabd94)

　Mac、Windows 両対応です。

## 対応

　以下の装飾に対応しています。

- 文字色（文字色が黒以外の場合に CSS を出力）
- 背景色（背景色が白以外の場合に CSS を出力）
- 太字
- イタリック
- 下線

## 使い方

　スタイルを適用したセルの範囲を選択し、コンテキストメニューから CSS to Clipboad を選択してください。

![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37554/50551366-1b85-3cd6-4689-a424c9999c99.png)

## サンプルの出力結果

　クリップボードには、以下のコードが出力されます。HTML カラーコードは、可能なら色名に変換します。

```html
    <style type='text/css'>
        #theTableBlock table tr:nth-child(1) th:nth-child(1) {
            color: Red;
            background-color: Yellow;
        }
        #theTableBlock table tr:nth-child(1) td:nth-child(2) {
            background-color: Red;
            font-weight: bold;
        }
        #theTableBlock table tr:nth-child(2) td:nth-child(3) {
            background-color: Blue;
            font-style: italic;
        }
        #theTableBlock table tr:nth-child(3) td:nth-child(4) {
            background-color: #E6B8B7;
            text-decoration: underline;
        }
    </style>
    <div id='theTableBlock'>

        <!-- TODO : write your table tag code here -->

    </div>
```

## 注意

　一行目は th として扱います。HTML を書くなら &lt;thead&gt;〜&lt;/thead&gt; と &lt;tbody&gt;〜&lt;/tbody&gt; が必要です。

```html
        <table>
            <thead>
                <tr>
                    <th>Test</th>
                    <th>Test</th>
                    <th>Test</th>
                    <th>Test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
            </tbody>
        </table>
```

### ブラウザでのレンダリング例

![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37554/9e876f1f-a31b-0391-f507-384ec8029f35.png)
指定したいURLから直接ルーティングを作成する方法+α

こんばんは
アロハな男、やすのりです！

今日はポートフォリオ作成時にルーティングの記述方法について、悪戦苦闘してしまったので同じことで悩まれている方や、自分が忘れた時用の備忘録として書き留めておこうと思います。

長くなりましたので、先に結論だけ載せておきますね。

#結論
検索用のボタンを押した際に移動するページのURLを、コントローラーの管理下にしたくない場合は、

```ruby:config/routes.rb
Rails.application.routes.draw do

    get '/:name', to: 'コントローラー名#edit' 

end
```
で、大丈夫です！！

↓参考ページはこちら
<a href='https://railsdoc.com/routes'>Railsドキュメント ルーティング</a>
<a href='https://qiita.com/aoitrain/items/d7ff027674af552b5864'>【ルーティング設計】1つのアクションで複数のビューを切り替えて表示する方法</a>


それじゃあ、下に詳しく書き連ねていきますね。

#状況
トップページから__『ホテル』__と書かれたボタンを押すとホテルカテゴリーの検索ページへ遷移する機能を作成したかったんですが、URLを`localhost:3000/hotel`という形にしたかったので、まずはコントローラーをそれぞれ別に作成してルーティングに記述してみました。

```ruby:config/routes.rb
Rails.application.routes.draw do

    resources :hotels, only [:index]

end
```

そうすると、
`hotels GET    /hotels(.:format)                                                            hotels#index`
というルーティングが作成されました。

これだとURLは希望に近い形で実現はできましたが、項目が多くなればなるほど別途コントローラーを作成しないといけません。

と、いうことは呼び出されるコントローラーを変更すればいいんだ！と思い

```ruby:config/routes.rb
Rails.application.routes.draw do

    resources :hotels, only [:index], controller: 'experiences'

end
```

こうすれば、アクセスした時に`experiencesコントローラーのindexアクション`が呼び出される様になるので、viewファイルはテンプレートファイル等を利用することで表示することができると思いますが、この場合は何も記述のない`hotelsコントローラー`が出来上がってしまいます。
今回は1つで記述していますが、どんどん項目が増えればその分ルーティングの記述も多くなってファイルも増えていってしまいます。

どうしたものか...と思っていろいろ調べていると見つけました！！
まずは、URLを指定のものにしたいなら

```ruby:config/routes.rb
Rails.application.routes.draw do

    get '/hotel', to: 'experiences#index'

end
```
と記載するだけで大丈夫でした！！

これは、Railsドキュメントのルーティングページに記載がされていました。


しっかりドキュメントを確認することの大切さを改めて実感しました...

さて、これだけでも当初の目標である『URLを`localhost:3000/hotel`にする』というのは完了していますが、今のままだとページが`/hotel`だけじゃなく他の項目も増えた時にどんどん記述が増えていってしまいますね。
せっかくなので、こちらも改善しちゃいましょう！！

#改善後
`experiencesコントローラー`に`editアクション`というものを新たに定義してそこに全てのルーティングがいく様にまとめることができるんです！！

```ruby:controllers/experiences_controller.rb
class ExperiencesController < ApplicationController

  def edit
    render "/#{params[:name]}"
  end

end

```

```ruby:config/routes.rb
Rails.application.routes.draw do

    get '/:name', to: 'experiences#edit'

end
```
また、URLの`/:name`という部分では、リクエストの送信時にparams内のキーに`:name`を設定して部分テンプレートのファイル名をバリューとして渡すことで、`editアクション`内の`renderメソッド`で該当するビューファイルを表示させています。

#今回の経験を経て
公式ドキュメントを読むことの大切さや、先人の方が残して下さった文献のありがたみが身に染みます...

これからも何か問題があれば、どんどん調べていきたいと思います！！
(他力本願な感じもするけど大丈夫かな...)
Heroku上にてPythonをPHP上で動かしてみた話

Qiita初投稿です。
今回は下手なところで3時間くらいつまずいた「Heroku上にてPythonをPHP上で動かす」方法を備忘録的に残したいと思います。
脳死で書いています。誤字脱字は温厚な目で見てくれると嬉しいです。

#思い立ち
最初はWebページにスクレイピングの情報を掲載できればいいかなーとか思っていました。
でもスクレイピングってPythonで書けば簡単じゃーん！とかいって始まったのが地獄の門の入り口でした。

#Pythonでスクレイピングする
取り合えずトップニュースを取得すればいいかなと思い、以下のコードを記述しました。

```python
# coding: utf-8

import requests
from bs4 import BeautifulSoup

# 現在のトップニュースのページIDを取得する
toppage_url = "https://news.yahoo.co.jp/"
html = requests.get(toppage_url)
soup = BeautifulSoup(html.content, "html.parser")
topic_element = soup.select_one("li.topicsListItem")
news_link = topic_element.find("a").get("href")
news_id = int(str(news_link).replace("https://news.yahoo.co.jp/pickup/",""))

# ニュースのトピック情報を取得する
news_url = f"https://news.yahoo.co.jp/pickup/{news_id}"
html = requests.get(news_url)
soup = BeautifulSoup(html.content, "html.parser")
news_element = soup.select_one("p.pickupMain_articleSummary")
print(news_element.text)
```

#PHPでexec()を利用しPythonの出力を取得する
execでコマンドラインのコマンドを実行し、出力を変数に入れることができます。PHPを以下のように書きます。

```PHP
<?php header("Content-type: text/html; charset=utf-8"); ?>
<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Python-PHP</title>
</head>
<body>
<?php
    exec("export LANG=ja_JP.UTF-8");
    exec('python news.py', $output);
    echo '<p>',$output[0],'</p>';
    return false;
?>
</body>
</html>
```

重要なことは、**exec("export LANG=ja_JP.UTF-8");**の部分。
※日本語が出力される場合、**utf-8を明示しないと文字化けする**ことがあります。日本語嫌い。
1行目はとりあえずレスポンスヘッダにも書いたほうがいいかなーとか思って付けました。~~必要性はわからないです~~

#文字コードのお話
先ほどからちょくちょくでているUTF-8。今回の苦戦の1つ目になります。
PHPは基本的に文字コードは**UTF-8**で書くべきとされています。
Pythonの出力もutf-8で統一する必要があり、最初の頃はそこで詰まっていました。(Python側がShift-JISだった)

#いざHerokuへDeploy！のはずがエラーの嵐
さあできた！デプロイして様子を見よう！とデプロイしてURLを開いてみると…

\\\\ 現在Herokuはリクエストを処理できません //

はい。ここでエラーです。デプロイには成功してるのにナンデ状態になりました。
結論から申し上げますと、Heroku上でPHPとPythonの両方を同時に動かす場合、2つのBuildPackが必要になります。
![e4d1a639c4938b5f126d5891784286ff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629114/d49efa8d-fd37-7436-f50a-f6204047be66.png)
こんな感じで設定しましょう。今回は**Webページがメイン**のため、順番はPHP->Pythonの順になります。

これで大丈夫だろう！こんどこそ！とデプロイしようとすると、

\\\\ Deploy failed //

うーんこの。今度は何・・・とlogを漁ると、以下のような内容がありました。

```
-----> App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/python.tgz
       More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
 !     Push failed
```

これを検索すると、Pythonアプリケーションのために必要となるファイルが無いとのこと。
それじゃあ作成しましょう。今回のPythonのコードに必要なものを詰めて以下のとおり:

```
#requirement.txt
beautifulsoup4==4.9.1
requests==2.24.0
```

```
#runtime.txt
python-3.7.7
```

これでデプロイするとうまく行きました。

#完走した感想
文字コードとHerokuの環境構築に悩まされた一日を過ごしました。日本語嫌い。
ちなみにXAMPPでテスト環境を作ってみたらHerokuよりも文字コードに関して悩まされました。
今回はとりあえず表示に成功したのでよしとします。

#参考資料
BuildPackが必要であることを知らされたサイト
https://stackoverflow.com/questions/12126439/run-python-and-php-in-a-single-heroku-app-procfile

PythonのHeroku上での実行環境を整えるために必要なファイルを知ったサイト
https://teratail.com/questions/258801

(密かに起きてたエラー対処に役立ったサイト)
デプロイ後にcode=H14 desc="No web processes running"
https://qiita.com/rebi/items/efd1c36f0a9e46222d80
メソッドについてのアウトプットです　その１

#メソッドについてのアウトプットをします！

なんとなーく頭の中では理解していたのですが、改めて説明出来るか？
と言われるとちょっと難しいな、と言うところが本音です。

より理解を深めるために言葉にして考えながら再認識したいなと思います。

##それではアウトプット開始します！！

###メソッドとは？
簡単に言うと処理のかたまり？みたいなものです。
`def、メソッドの名前（決めて下さい。)改行する
処理を書く、改行する
endを書く。`
 

```method.rb
def　メソッド名
  ここに処理を書く
end
```

何に使うの？
例えば、`計算の処理をメソッドを使用しない`場合では

```sample.rb

eraser = 110
pen = 150

puts eraser + pen
```

そして`メソッドを使う`と・・・

```sample.rb
def addition
  eraser = 110
  pen = 150
  eraser + pen
end

puts addition
```
となります。

簡単な内容ならばメソッドを使う意味や恩恵は感じられません。
しかし、処理が複雑になった時に絶大な恩恵を感じられます！！

メソッドの中ではif分などのいろいろな処理を記述することが出来ます。
例えば・・・

```sample.rb
def register
  eraser = 110
  pen = 150
  bill = eraser + pen
  if bill >= 200 #200円以上のお買い上げは10%off!!
    bill * 0.9
  end
end
  puts register　#registerメソッドを呼び出す。
```
と、この様に一つのメソッド（かたまり）で計算と割引を行ってくれます。

以上、本日のアウトプットでした。
その２、その３くらいまで続くと思います。
モニターもキーボードLANケーブルもないけどラズパイやるには

# 必要なもの

- Raspberry Pi
- microSDカード
 - 最低2GB、推奨4GB以上
- 電源ケーブル、ACアダプタ、手元のPC（以下略） 
- 手元のPCがWindowsであれば、bonjourをインストールすること
 - `ホスト名.local`でラズパイにアクセスできるようにするため
 - iTunesが入っていれば入っている
 - でなければ`choco install bonjour`


尚、type-C搭載のAndroidを持っていれば、termuxとISO2USBを使ってPC無しで行ける模様
[PC無し、Type-C搭載のAndroidスマートフォンのみでWindows 10インストール用USBメモリを作る方法 #USBTypeC #USBメモリ #Android #SanDisk](https://reviewdays.com/archives/62045)

僕の構成は以下

- Raspberry Pi 4 8GB
- microSD 256GB



# 1. SDカードにOSイメージを書き込み
[ここ](https://www.raspberrypi.org/downloads/raspberry-pi-os/)からダウンロードして、適当なソフトで書き込む
僕は[rufus](https://rufus.ie/)を使った

# 2. 各種設定

## 2.1. SSHサービスの自動起動設定
エクスプローラに「boot」という名前のドライブが表示されているはずなので、そこに`ssh`という名前のからファイルを作る
これで、起動時に自動的にsshdが起動する

## 2.2. Wi-Fiへ自動接続
bootドライブ下に以下のファイルを作成

```config:wpa_supplicant.conf
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=JP

network={
        ssid="SSID"
        psk="パスフレーズ"
}
```

ステルスSSID（アクセスポイント一覧に表示されないやつ）であれば、`psk=...`の下に以下を挿入（僕はここではまった）

```
        scan_ssid=1
```

# 3. 起動＆接続
SDカード差して電源ケーブル挿せば起動する
あとは、

```
ssh pi@raspberrypi.local
```

これで接続できる
MIDI format0データをマイコンで扱ったときのメモ


AVRマイコン(ATiny85)でformat0のMIDIデータで曲を演奏させたときのメモ。

## MIDI formata0
MIDIファイルの形式で演奏データをトラックごとに分けずに全てTrack0に入っている。
読み出しポインタが1つで良いので時間管理が容易でデルタタイムのサイズも小さいのでマイコンでの処理に向く、DOMINOなどのシーケンサソフトのsmfファイル書き出し時にオプションで指定、演奏に不要なデータ（トラック名とか著作権、サポートしていないMIDIイベント）はあらかじめ取り除いておけばサイズが小さくなる。

デルタタイム＝前イベントからの時間。

format0データのダンプ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205783/c42b632a-2ab7-c704-986a-852623317ea2.png)

####ヘッダ (ヘッダチャンク14byte,トラックチャンク8byte)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205783/eb46a103-72a6-1442-5369-5f1aceb894d0.png)
上がヘッダチャンク、下がトラックチャンク

最初の14byte+8byte、format0で演奏に使うのはヘッダチャンクの最後の2byteの時間単位(分解能)

####ヘッダチャンク

| 1 | 2 | 3 | 4 | 5 |
|:-:|:-:|:-:|:-:|:-:|
|タイプ(4byte) |データ長(4byte)   |フォーマットの種類 (2byte)|トラック数(2byte)   |分解能(2byte)|

####トラックチャンク
| 1 | 2 |
|:-:|:-:|
|タイプ(4byte)|データ長(4byte)   | 
分解能は時間の最小単位（１デルタタイム）を４分音符をこの値で割った値で表す、４分音符の長さはメタデータのSetTempoで設定。

分解能以外は使わない。

####データ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205783/43330439-93fb-8d71-301b-6a39c02970cd.png)

| 1 | 2 |
|:-:|:-:|
|デルタタイム(可変長) |データ(メタデータ、システムエクルシーブ、MIDIデータ)   |
#####デルタタイム
前のイベントからの待機時間、データ長可変
######可変長データ
有効下位7bit,MSBが立っている場合は次データ有り
0x7Fでマスクして7bit左シフトしてMSBが0のデータが来るまで繰り返す。

```deltatime_sample.c
		delta_time = 0;
		if( -1 == (sd_c = SMFDATA.smf_getChar())) break;
		while(sd_c & 0x80){  //次データあり
			delta_time = delta_time|(sd_c & 0x7f);
			delta_time <<= 7;
			if( -1 == (sd_c = SMFDATA.smf_getChar())) break;			
		}
		delta_time = delta_time | sd_c; 
```

#####MIDI データ
0xC0と0xD0は２バイトなので注意
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205783/c2281e15-54be-a287-db21-601afddd8aa9.png)

#####システムエクルシーブ
0xf0から始まって0xf7で終わる、サポートしないなら元データで消す。

#####メタイベント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205783/dc3eae42-4e94-f939-d0a1-db0729877ddc.png)

| 1 | 2 | 3 |4|
|:-:|:-:|:-:|:-:|
|メタイベント |イベントtype   |後続データ数   |データ|
|0xFF   |1byte   | 可変 (後続データを127byte以内にすれば1byte) |後続データ数で示されたデータが続く |

曲を演奏するのに最低必要なのはSetTempo,後は無視しても取りあえずは鳴らせる。
######SetTempo (0xFF,0x51,0x03, data1,data2,data3)
4分音符の長さ(uS)、１デルタタイムはこの値を分解能で割った時間。
dat1,dat2,dat3は8bitの値

```
long Tempo_val;
Tempo_val = dat1;
Tempo_val <<= 8;
Tempo_val |= dat2;
Tempo_val <<= 8;
Tempo_val |= dat3;
```

基準時間 = (四分音符の長さμS)/(分解能)
基準時間 = Tempo_val/midi_division;　　(midi_division:分解能)

この基準時間を実際のタイマで何クロック待てば良いかを計算して待つ。


delta_count = delta_time ×　(Tempo_val/midi_division) / ( 1/Clock)


例）
分解能=240 Tempo=193.5 で Tempo_val が　0x4BB3D(310077)

基準時間は 310077/240 = 1291.9875 us
Clock 32KHz
1clock =  1/32000000     32.25 us

1291/32 ≒ 40
これぐらいの値になるClockにする。 




イベント発生時にタイマをクリアして次のイベントはdelta_countまで待てば良い。
C# - TextBoxのサンプル　コードべた書き（Visual Studio不使用）

目次： [C# - Windows Formsでよく使うコントロールたち （Visual Studioなし環境向け） - Qiita](https://qiita.com/kob58im/items/a6cff48ce6bfbcf41c39)

# 単一行テキストボックス

## 単一行テキストボックスの画面キャプチャ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/f69a8a4a-a719-488b-59bd-fe48ca76ab15.png)

## 単一行テキストボックスのテンプレ（サンプルコード）

```csharp

using System;
using System.Drawing;
using System.Windows.Forms;

class TextBoxSample : Form
{
    TextBox txt;

    TextBoxSample()
    {
        ClientSize = new Size(300, 100);
        
        Controls.Add(txt = new TextBox(){
            Location = new Point(20, 30),
            Width = 250,
        });

        txt.TextChanged += Txt_TextChanged;
    }

    void Txt_TextChanged(object sender, EventArgs e)
    {
        Text = txt.Text;
    }

    [STAThread]
    static void Main()
    {
        Application.Run(new TextBoxSample());
    }
}
```

# 複数行テキストボックス

## 複数行テキストボックスの画面キャプチャ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/1a4fb6f2-879b-0ac5-7805-eeec45a184f8.png)


## 複数行テキストボックスのテンプレ（サンプルコード）

```csharp

using System;
using System.Drawing;
using System.Windows.Forms;

class TextBoxSample : Form
{
    TextBox txt;

    TextBoxSample()
    {
        ClientSize = new Size(300, 250);
        
        Controls.Add(txt = new TextBox(){
            Location = new Point(0, 0),
            Size = new Size(300, 250),
            Multiline = true,
            WordWrap = false, // 折り返し表示をしない
            ScrollBars = ScrollBars.Both,
        });
    }

    [STAThread]
    static void Main()
    {
        Application.Run(new TextBoxSample());
    }
}
```

# 文字数制限

デフォルトだと32767文字までしか入力できないっぽい。
`MaxLength = 0;`とすると、この制限を解除できる。（いちど0以外を設定する必要あるかも（？））

[TextBox.MaxLength Property (System.Windows.Controls) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.controls.textbox.maxlength?view=windowsdesktop-5.0)

defaultが0と書かれているが、謎。。


# 参考サイト

## 全般

https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.textbox?view=netframework-4.8

https://csharp-ref.com/form_textbox.html

## 個別ノウハウ

https://dobon.net/vb/dotnet/control/tbsuppressbeep.html

https://qiita.com/nicklegr/items/d3e97d6910a1353ff45b
MACローカルで公開鍵を作りたい時備忘録(AWSとか用に)

#項目
1. 目的(自分用)
2. 流れ

# 1.目的
GithubとかAWSとかでsshの公開鍵やらキーペアやらいるよって時の備忘録

# 2.流れ
```bash:ターミナル
$cd
$cd ~/.ssh #無いって言われたら下のコマンドを打つ
$mkdir ~/.ssh
$ssh-keygen -t rsa
```
この後三回質問されるので、基本的には
**エンター→好きなパスワード→もう一回同じパスワード**でOK

```bash:ターミナル
$ls #中に何かあれば成功
$pbcopy < ~/.ssh/id_rsa.pub
```

最後のコマンドで公開鍵の中身をコピーしている、これを必要な場所にペーストすればよろしい

# 3.終わりに
**終わり!**
"address already in use"と言われた

Jetsonでdockerizationしてネットワーク接続を試していた時、"address already in use"と言われてしまった。
どのプログラムがそのport を使っているのかなー、と知りたくなりました。
調べることができたので、メモしておきます。

## 方法：netstat -anp 

それだけです。以下メモ。

### 準備

netstat は net-tools のインストールで入った。

```
$ sudo apt install net-tools
```

### 探してみる

とりあえず```netstat -anp```でみる。ポート番号を指定したければ、pipe でつないで grep するのが楽。

```
$ netstat -anp
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 0.0.0.0:2101            0.0.0.0:*               LISTEN      6/./bin/ntripcaster
tcp        0      0 0.0.0.0:59999           0.0.0.0:*               LISTEN      7/str2str
tcp        0      0 127.0.0.1:48232         127.0.0.1:2101          CLOSE_WAIT  11/str2str
tcp        0      0 127.0.0.1:51384         127.0.0.1:59999         ESTABLISHED 11/str2str
tcp        0      0 127.0.0.1:2101          127.0.0.1:48232         FIN_WAIT2   -
tcp        0      0 127.0.0.1:2101          127.0.0.1:48228         TIME_WAIT   -
tcp        0      0 127.0.0.1:2101          127.0.0.1:48224         TIME_WAIT   -
tcp        0      0 127.0.0.1:59999         127.0.0.1:51384         ESTABLISHED 7/str2str
tcp        0      0 127.0.0.1:2101          127.0.0.1:48226         TIME_WAIT   -

$ netstat -anp | grep :2101
tcp        0      0 0.0.0.0:2101            0.0.0.0:*               LISTEN      6/./bin/ntripcaster
tcp        0      0 127.0.0.1:2101          127.0.0.1:48250         TIME_WAIT   -
tcp        0      0 127.0.0.1:2101          127.0.0.1:48248         TIME_WAIT   -
tcp        0      0 127.0.0.1:2101          127.0.0.1:48246         TIME_WAIT   -
```

なお、netstat のオプションの意味は（--helpで簡単にわかるが)、
 
- -n, --numeric            don't resolve names
- -p, --programs           display PID/Program name for sockets 
- -a, --all                display all sockets (default: connected)

とのこと。

## 

### ほかの方法

- 他に```lsof```を使う方法もネットであったが、良く分からなかった。

### 基礎知識

そもそも TIME_WAITとかよく分からない。(泣) 
いくつかメモをここに：

- [ぜんぶTIME_WAITのせいだ！](https://qiita.com/kuni-nakaji/items/c07004c7d9e5bb683bc2)
- [TCPの状態遷移](https://qiita.com/mogulla3/items/196124b9fb36578e5c80)

# まとめ

とりあえず"address already in use"のプログラムを見つけて止めることはできた。しかし、どのような状態なのか、netstat の結果の読み方が分からない。

今後の課題として

- TCPの状態遷移の理解する
- 実際にその遷移や状態をプログラムがどのように実現しているか説明できるようになる

があります。ふー。
(2020/10/26)
C# - NumericUpDownのサンプル　コードべた書き（Visual Studio不使用）

目次： [C# - Windows Formsでよく使うコントロールたち （Visual Studioなし環境向け） - Qiita](https://qiita.com/kob58im/items/a6cff48ce6bfbcf41c39)

# 画面キャプチャ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/d54c65c8-ee36-b270-634a-559ad4c42347.png)


# テンプレ


```csharp

using System;
using System.Drawing;
using System.Windows.Forms;

class NumericUpDownSample : Form
{
    NumericUpDown nud;

    NumericUpDownSample()
    {
        ClientSize = new Size(300, 100);
        
        Controls.Add(nud = new NumericUpDown(){
            Location = new Point(0, 0),
            Width = 80,
            Maximum = 20,
            Minimum = 0,
            Value = 5,
        });

        nud.ValueChanged += Nud_ValueChanged;
    }

    void Nud_ValueChanged(object sender, EventArgs e)
    {
        int n = (int)nud.Value; // NumericUpDownのValueプロパティはdecimal型なので、整数にしたい場合は、キャストが必要

        int prod = 1;
        // checked {}で囲むと、オーバーフローを検出したときにエラーを発生させる。
        // ※13の階乗(13!)は C#の intの最大値 (2^31)-1 を超えてオーバーフローする
        checked {
            for ( int k=1; k<=n; k++ ) {
                prod *= k;
            }
        }

        Text = n.ToString()+"! = " + prod.ToString();
    }

    [STAThread]
    static void Main()
    {
        Application.Run(new NumericUpDownSample());
    }
}
```

ついでにオーバーフロー仕込んでみた・・・[^1]

[^1]: `decimal`型のまま計算すればもうちょい行けるけど、論点がずれすぎるのと、精度とかややこしくなりそうなのでやめておく


# 参考サイト

 - [NumericUpDown Class (System.Windows.Forms) | Microsoft Docs](https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.numericupdown?view=netframework-4.8)
 - [NumericUpDown - C#プチリファレンス](https://csharp-ref.com/form_numericupdown.html)
単体テスト

#実行結果で空のTestResponseが返ってくること


```Groovy
def "渡す配列が空の時、空が返ってくる"
setup:
def empty = new ArrayList<~~>() //もっと簡単に def empty =[]

when:
def test = A.create(~~)

then:
test.getHoge.isEmpty()
```

備考:
//テスト先のメソッド

```java
public TestResponse create(List<Hit>){
省略・・・TestResponseが戻り値
}

＠Getter
class TestResponse{
private List<Hoge> hoge; 
}
```


#用語系
「叩く」＝押す、実行する、起動する
AnacondaをWindows10にインストール

## はじめに

当方IT、ソフトウェア畑ではなくハードウェア畑出身です。
ですので、プログラミングらしいものと言えば、エクセルの関数くらいしか使えないレベルで、
正直「Python？なにそれおいしいの？」と言った、超ド級の初心者です。
（よって専門の方からすると正確ではない解釈、適切ではない内容があるかもしれませんが、
　その際はご指摘、アドバイスをいただけると幸いです。）

そんな僕ですが、 <font color="blue">
①日常的によくあるデータ収集、前処理、分析の自動化、高速化を行いたい
②仕事の幅を広げたい（というよりこのままだと仕事の幅が狭まりそうで怖い・・・）
③自分の子供たちに教えてあげたい

と思い、2020年の春頃からかなり牛歩ですが、Pythonを勉強しています。
というわけで今回は、始めの一歩であるPython環境を構築する上でお手軽な、
**<font color="green">Anaconda**のインストールを実行していきたいと思います。


## 0.Anacondaとは？

Anacondaとは、Python及びPythonでよく利用されるライブラリ（いくつかの関数をパッケージ化したもの）を
まとめてインストールしてくれるもので、手っ取り早くPython環境の構築が可能です。
その後のライブラリの追加や管理なども行いやすく、フリー（無料）であることなどから、
幅広いユーザーに利用されています。

## 1.Anacondaのダウンロード

では、まずは　[こちら](https://www.anaconda.com/products/individual)　にアクセスしてください。
ページ下部にWindows版のダウンロードリンクありますので、該当する方（32bit or 64bit）をクリックし、任意の場所にダウンロードしてください。
(ご自身のbit数の確認方法は [こちら](https://qiita.com/susunusa/items/65c974919e86a3225dea) から）
ファイル容量が大きいのでダウンロードには数分以上かかると思いますので、完了までしばらく待ちます。
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824754/2355e4a9-9e71-b6f2-7070-8ea9325fff91.png" width=100%>

## 2.Anacondaのインストール
ダウンロードが完了したら、ダウンロードファイルをダブルクリックし、実行します。

以下のような画面出てきたら、`Next`をクリック
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824754/6d349d2d-b908-a169-3cf3-da18c759a269.png" width=50%>

規約内容に同意できれば　`I Agree`をクリック
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824754/14de7019-529c-ad21-486b-e32b1af4bb45.png" width=50%>

`Just Me`を選択し、`Next`をクリック
(ログインユーザーだけでなく、PCを共用している全ユーザーで利用可能にしたい場合は`All Users`を選択)
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824754/40bc927b-ee81-8e39-64dd-a63f1b2d60e3.png" width=50%>

インストールするディレクトリを指定。
任意で書き込み、またはデフォルト設定で問題なければ`Next`をクリック
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824754/a8a61ad6-7d88-b5d0-1bd3-314e2a488063.png" width=50%>

初めてPythonをインストールする場合は、上段にもチェックを入れて、`Install`をクリックしてください。
Not　recommended(非推奨）と書かれており、文字が赤くなりますが、気にしなくて大丈夫です。

<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824754/e1811f1f-087d-ce48-5025-029123c6b6a3.png" width=50%>

インストールが始まりますので、数分～数十分待ちます。
問題なくインストールできれば、以下のような画像が出てきますので、
`Next` -> `Finish` とクリックしてください。
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824754/808a850f-5d58-8c8b-18dc-94b91840aafa.png" width=50%>
※チュートリアルなど資料ページを開くにチェックが入っていますので、不要な場合はチェックを外してください。
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824754/c20cbd07-d44e-b54a-c5ac-dd9a6245c40b.png" width=50%>

## おわりに
以上でAnacondaのダウンロード->インストールが完了です！
v-bindの使い方。親のデータを子のテンプレートに渡す方法。

Vueのv-bindで、親から子へのデータ受け渡しを整理。

以下のようなvueファイルを見たときに、:keyなどタグの中身（任意で設定した属性）が何を表しているのかを理解できるようになる。


```vue:
<VrBtn
:key="key"
:disabled="disabled"
:command="command"
/>
```

```js:
export default {
  props: {
    value: { type: Boolean },
    disabled: { type: Boolean, default: false },
    command: { type: Object, required: true },
  },
}
```



<br>
##データ受け渡しの流れ

データ受け渡しの流れは４steps。
属性に変数を入れて、その属性を親と子で受けわたす。


```
親：①子に渡すデータを定義
　↓
親：②子のテンプレートタグに属性と変数を記述
　↓
子：③propsで受け取る属性を定義
　↓
子：④属性を指定してデータ呼び出し
```

**▼注意点**
・親から渡すデータは変数。
　┗ ダブルクオテーションで囲むがテキストではない。
　┗ `:属性名="変数名"`の形で記述。属性を子に渡す。
　┗ : は v-bind: の省略形

・子のpropsではデータの型などを指定可能
　┗ String:文字列、Boolean:真偽値
　┗ required: true データの必要性
　┗ default: false/true 真偽値のデフォルト設定


<br>
##データの受け渡し例

・使うファイルは２つ
親：parent.vue 
子：TmpBtn.vue　（vuetifyでボタンを表示）


・実現したいこと
親で定義したデータを子のテンプレート内で呼び出す。


```vue:（親）parent.vue
<template>
  <v-app>
    <TmpBtn
    <!--②子のテンプレートタグに属性と変数を記述-->
    :bind="text"
    />
  </v-app>
</template>

<script>
import TmpBtn from "./TmpBtn"

export default {
  name: "Parent",
  components:{
    TmpBtn
  },
  data(){
    return{
      //①子に渡すデータを定義
      text:"Text form Parent"
    }
  }
}
</script>
```

<br>

```vue:（子）TmpBtn.vue
<template>
  <v-btn
  width="20%"
  elevation="2"
  rounded
  >
  <!--④属性を指定してデータ呼び出し-->
  {{bind}}
  </v-btn>
</template>

<script>
export default {
  props:{
    //③propsで受け取る属性を定義
    bind: {type:String},
  }
}
</script>
```

<br>
**▼出力結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/f53b640e-4059-4e7e-99b4-c06ba41e974f.png)

子のテンプレートを表示したときに、無事、親のデータを受け渡すことができた。



<br>
##まとめ

以下のような記述を見たら、親から子にデータを渡していることがわかる。

```vue:
<VrBtn
:key="key"
:disabled="disabled"
:command="command"
/>
```

propsがあれば、子のテンプレートで親からデータを受け取っているなということがわかる。

```js:
export default {
  props: {
    value: { type: Boolean },
    disabled: { type: Boolean, default: false },
    command: { type: Object, required: true },
  },
}
```
C# - ComboBoxのサンプル　コードべた書き（Visual Studio不使用）

目次： [C# - Windows Formsでよく使うコントロールたち （Visual Studioなし環境向け） - Qiita](https://qiita.com/kob58im/items/a6cff48ce6bfbcf41c39)

# 画面キャプチャ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/f8b1c654-b07e-406a-9630-c3e3925477a0.png)

# テンプレ


```csharp

using System;
using System.Drawing;
using System.Windows.Forms;

class ComboBoxSample : Form
{
    ComboBox cmb;

    ComboBoxSample()
    {
        ClientSize = new Size(300, 100);
        
        Controls.Add(cmb = new ComboBox(){
            Location = new Point(0, 0),
            Width = 80,
            DropDownStyle = ComboBoxStyle.DropDownList, // 直接編集不可設定
            FormattingEnabled = true, // 頂いたコメントを受けて追加しました！
        });
        cmb.Items.AddRange(new string[]{"未選択","出勤","直行","不帰","不在"});
        cmb.SelectedIndex = 0;

        cmb.TextChanged += Cmb_TextChanged;
    }

    void Cmb_TextChanged(object sender, EventArgs e)
    {
        Text = cmb.Text;
    }

    [STAThread]
    static void Main()
    {
        Application.Run(new ComboBoxSample());
    }
}
```

# 参考サイト

 - [ComboBox Class (System.Windows.Forms) | Microsoft Docs](https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.combobox?view=netframework-4.8)
 - [ComboBox - C#プチリファレンス](https://csharp-ref.com/form_combobox.html)
Python：PythonでVlookup的な事をやってみた#2


　　　---目的---
　　　在庫情報など日々変わる数値をデータベースから読み込んで指定のデータに流し込んで
　　　指定フォーマットで書き出しする。

　　　使用インタープリタ：Python3.8

　　　---投稿者の作業環境---
　　　Windows10Pro 64Bit

# コード
```
#!/usr/bin/env python
# -*- coding: utf-8 -*-

###使用モジュール###
import sqlite3
import pandas as pd
import datetime

######タイムスタンプの取得
ThisDate = datetime.datetime.today().strftime("%Y%m%d")

#CurStocks <<参照元の在庫マスタのデータベースを入れるデータフレーム用の変数


######在庫情報マスタを在庫参照元データフレームに変換
#ここでは、在庫参照元のデータをSQlite3形式のファイルから引っ張ってますが、
#お好きなな形式をPandasでデータフレーム変換してください。

dbpath = 'C:/参照元/在庫SQLite/Zaiko.db' 
conn = sqlite3.connect(dbpath)
cursor = conn.cursor()
cursor=cursor.execute('SELECT * FROM TurnOver_Data')　
CurStocks = pd.DataFrame(cursor.fetchall())
CurStocks.columns=["index", "商品名", "商品ＣＤ", "バーコード", "在庫"]
conn.close()
#（備考）↑上記のやり方「cursor.fetchall()」だと
#　　　　 カラムのタイトルが抜けてしまうので、後から足してます。
#参照元のデータは上記のカラムタイトルという前提で。


######流し込み先のSqlite形式のファイルを用意

print("●在庫連絡ファイルの更新")
dbpath = 'C:/流し込み先/得意先_在庫FMT.db'
conn = sqlite3.connect(dbpath)
df_files=("C:/流し込み先ベースファイル/得意先_在庫FMT.xlsx")
#エクセルファイルで別で流し込み先のリストを作ってますが、これは対象アイテムが増えた時など
#メンテしやすいようにエクセルファイルでベースのリストを作っておいて書き換えるというやり方の為

df = pd.read_excel(df_files,encoding="cp932")
Chlist = (df["JAN"].transpose())
#df["JAN"].transpose()<<「JAN」のデータを1件つづ読み込めるように変換してます。
#流し込み先のカラムに読み取りキーとなる「JAN」というタイトルをつけてます。


######在庫参照用のデータを回して順次参照していく。

for item in Chlist:
    CurStocksult = CurStocks.query('バーコード == @item')
    #ここでさっき作った参照元のデータフレームのキーとなるJANコードを参照して回していきます。
    #参照元カラム：「バーコード」　流し込み先：「JAN」というカラムのタイトル
    #ここで参照元のデータフレームから1件つづ読み取りを行っていきます。

    if len(CurStocksult) >= 1:
        #在庫数カウント：参照元フレームに当該JANがある場合は、当該データ位置を参照
        CurStocksult = (CurStocksult.iat[0, 3])

        # インデックス番号の取得（2次配列のリストのデータ位置）
        DFindex=int(df.query('JAN == @item').index.astype("int64").values[0])

        if(CurStocksult) < 3 :
            Buf = 0
            df.iat[DFindex, 7] = "欠品"
        else:
            Buf=CurStocksult
            df.iat[DFindex, 7] = ""
            
        df.iat[DFindex, 6]=Buf
        df.iat[DFindex, 8]=ThisDate
        # 流し込み先の6列が在庫列、7列目がフラグ欄、8列目が更新したタイムスタンプという設定

df.to_sql("Stock_Data", conn, if_exists="replace")
df.to_csv('C:/更新した在庫データ.csv')
#SqliteとCSVを更新。

conn.close()
print("●更新を完了しました")

del df
del df_files

```

# 詰まったポイント等
１：ループ処理用のリストの作成
Chlist = (df["JAN"].transpose())
流し込み先のリストを1件づつ処理するために、流し込み先のキーとなるリストを
ループで回せるように変換したところ

２：インデックス番号の取得
DFindex=int(df.query('JAN == @item').index.astype("int64").values[0])
2次配列のリストのデータ位置（Y軸？）を取得するための変換処理
TypeError: Failed to execute 'fetch' on 'Window'について

fetch apiを使おうとして躓いたのでメモ

##問題
```js
createItems() {

  var opt = {
    "method": "POST", 
    "headers": {"Content-Type": "application/json"}, 
    "body": {
      "title": "テストタイトル",
      "content": "テストコンテンツ"
    }
  }

  fetch("/create", JSON.stringify(opt))
  .then((res) => res.json())
  .then((res) => alert("ok"))
  .catch((err) => alert(err));
    
}
```

```
TypeError: Failed to execute 'fetch' on 'Window': parameter 2 ('init') is not an object.
```
##解決方法
"init"はfetch関数の第2引数のことである。
見ると引数の値がobjectではなくstringになっていた。
なので正しい書き方は

```js
fetch("/create", opt)
```
である。Content-Typeがjsonなのでoptもjsonにしなければいけないと勘違いしていたことが原因。
jQueryをインストール

#インストール
```	
% yarn add jquery
```

#設定ファイルを書き換え
```config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
  })
)

module.exports = environment
```

```app/javascript/packs/application.js
// 省略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('../articles') //記述例で使用するjsファイル

// 省略
```
以上で導入完了

##補足
application.html.erbに以下のようにデフォルトで記述されているヘルパーメソッドのコードにより、JavaScriptの参照を行っています。

```app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>TryWebpacker</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%# 上記の記述でwebpackで管理されているJavaScriptを参照している %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```


#記述例
jQueryを用いた記述

```app/javascript/articles.js
$(function () {
  $(document).on("mouseover", "h1", function () {
    $(this).css({ "color": "blue" });
  }).on("mouseout", "h1", function () {
    $(this).css({ "color": "" });
  })
});
```

JavaScriptを用いた記述

```app/javascript/articles.js
window.onload = function () {
  document.querySelector("h1").addEventListener("mouseover", function (event) {
    this.style.color = "blue"
  }, false);
  document.querySelector("h1").addEventListener("mouseout", function (event) {
    this.style.color = ""
  }, false);
};
```