OmniAICreator/Qiita-1.07M huggingface dataset:
CentOS7のPCでlaravelの動作環境構築時にすること

# 目的

- CnetOS7のPCでlaravelの動作環境構築時に個人的時に実施していることをメモ的にまとめる

# 作業

1. [CentOS 7 selinuxを無効化する](https://qiita.com/miriwo/items/64950324c86d4e542542)
2. [CentOS7系にChromeをインストールする](https://qiita.com/miriwo/items/9b43678bec462c8db70f)
3. [CentOS7 Apacheを使ったWebサーバを立てる](https://qiita.com/miriwo/items/a3fe176d45c9032f2d0f)
4. [CentOS7 MySQLを入れてデータベースを作成する](https://qiita.com/miriwo/items/2d5ad51df95ad6671b36)
5. [CentOS7 Laravel環境構築のためにPHP7.4をインストールする](https://qiita.com/miriwo/items/04326679e95420be0670)
6. [CentOS7 Composerをインストールする](https://qiita.com/miriwo/items/b4dcf5cb4250fcca89ea)
7. [CentOS7 Gitを導入する](https://qiita.com/miriwo/items/22c8ec43f7a7ceb096c2)
8. [Apache ローカルネットワーク内限定でIPでアクセスできる様にする](https://qiita.com/miriwo/items/4308ddfaab8d34ad052e)
最新の Perl を Mac にインストールする方法

M2 MacBook Pro[^1] にプリインストールされている [Perl](https://www.perl.org/) のバージョンは、以下の通りで、

[^1]: [MacBook Pro (14-inch, 2023)](https://support.apple.com/kb/SP889?locale=ja_JP)・macOS Ventura 13.3.1

```
% perl -v

This is perl 5, version 30, subversion 3 (v5.30.3) built for darwin-thread-multi-2level
(with 2 registered patches, see perl -V for more detail)

Copyright 1987-2020, Larry Wall

Perl may be copied only under the terms of either the Artistic License or the
GNU General Public License, which may be found in the Perl 5 source kit.

Complete documentation for Perl, including FAQ lists, should be found on
this system using "man perl" or "perldoc perl".  If you have access to the
Internet, point your browser at http://www.perl.org/, the Perl Home Page.
```

より最新の Perl を使いたいという人は、かなりの少数派かもしれませんが、

個人的には、これまで Ruby と Python について、以下のような記事を書いてきたということもあり、

https://qiita.com/normalsalt/items/c49f5afd854bfe2678ab

https://qiita.com/normalsalt/items/47de0c59d273a382cf03

一応、Perl についても、同様に最新のものを使えるようにしておきたいと思い、本記事もリライトしてみました。

次のコマンドを実行し、[Homebrew](https://brew.sh/) で管理できるようにしておけば、

```
% brew install perl
```

以後、バージョンを上げる際には、次のようなコマンドを実行するだけで、簡単にアップグレードできます。

```
% brew upgrade perl
```

:::note info
Homebrew のインストールについては、公式サイトを参照してください。

https://brew.sh/

今回、利用した Homebrew のバージョンは、以下の通りです。

```
% brew --version
Homebrew 4.0.16
Homebrew/homebrew-core (git revision 15bc37bb1ce; last commit 2023-02-17)
Homebrew/homebrew-cask (git revision b17568b22a; last commit 2023-02-17)
```

ちなみに、次のコマンドを実行すれば、Homebrew 自体をアップデートできます。

```
% brew update
```
:::

Ruby をインストールした時と同じように、次のコマンドを実行するなどして、PATH を通すこともお忘れなく。

```
% echo 'export PATH="/opt/homebrew/opt/perl/bin:$PATH"' >> ~/.zshrc
```

これで、ターミナルを再起動するか、新しいウィンドウを開くか、あるいは、次のコマンドを実行するなどして、設定を更新すれば、

```
% source ~/.zshrc
```

新しいバージョンの Perl が、利用できるようになっているはずです。

```
% perl -v        

This is perl 5, version 36, subversion 0 (v5.36.0) built for darwin-thread-multi-2level

Copyright 1987-2022, Larry Wall

Perl may be copied only under the terms of either the Artistic License or the
GNU General Public License, which may be found in the Perl 5 source kit.

Complete documentation for Perl, including FAQ lists, should be found on
this system using "man perl" or "perldoc perl".  If you have access to the
Internet, point your browser at https://www.perl.org/, the Perl Home Page.
```

:::note info
インストール時の出力には、以下のような（ モジュールのインストール先の ）設定についても書かれていたので、念の為、ここにメモしておきます。

```
By default non-brewed cpan modules are installed to the Cellar. If you wish
for your modules to persist across updates we recommend using `local::lib`.

You can set that up like this:
  PERL_MM_OPT="INSTALL_BASE=$HOME/perl5" cpan local::lib
And add the following to your shell profile e.g. ~/.profile or ~/.zshrc
  eval "$(perl -I$HOME/perl5/lib/perl5 -Mlocal::lib=$HOME/perl5)"
```
:::
【React】storeの状態を監視する「Redux Devtools」の導入方法

Reactにおいて、Reduxを用いて開発を進めるにあたり、storeの状態を都度確認できると便利です。Udemy講座「 Modern React with Redux [2020 Update] 」（ https://www.udemy.com/course/react-redux/ ）にて、このような機能を持つ「Redux Devtools」というChromeの拡張機能があることを知ったので、共有させていただきます。（この講座は、Reactの知識だけでなく、こういったTipsなども教えてくれます。本では学べないことも多く、Udemyの講座は新たな学びにも有効だと思います。）

## 「Redux Devtools」の機能
store内の状態を監視し、stateの内容を視覚的に確認することができます。
![images001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993442/c22e69ab-9b3e-a2f3-1bfa-69bb57122825.png)


## 導入方法

chromeウェブストア（https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja）から拡張機能をchromeに追加することで導入できます。

次に、自分のプロジェクトのコードで、storeの宣言をしている箇所に次のコードの3行目を加えます。

```javascript
 const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
```

ReduxThunk等のmiddlewareを使っている場合は次のようにします。

```javascript
import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(...middleware)
));
```



尚、自分のプロジェクトだけでなく、企業のサイトなどでもこのツールでstateを見ることができる場合があります。その場合はアイコンの色がモノクロからカラーに変化します。
![images002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/993442/0b413d0b-4fa6-43e0-9d51-fd4170610a0a.png)
Python3をデフォルトにする方法。


asdfで言語環境構築やバージョン切り替えを使うのでめっちゃ便利です。
Python２を削除しPython３をインストールする方法はあるけど
Python２使っているプログラムが残っていたらコンフリクトの原因になるので下記のやり方にしましょう。

##　とにかくインストールから(インストール済の方は先に進んでください)

---

[asdfをインストールするにはこちらを！](https://asdf-vm.com/#/core-manage-asdf)
zshを使っているからにはGitからのインストールをお勧めします。
HomebrewからだとZshとの相性の問題でコンフリクト発生することはあるのです。



Pythonとpipをインストールしてください。

```bash
asdf plugin-add python
asdf install python 3.8.7
asdf global python 3.8.7
pip install pipenv
asdf reshim python
```



## Python3 デフォルトにする方法。

1. Open Terminal.
2. cd.
3. nano ~/.bashrc. (zshを使用な場合、nano ~/.zshrc)
4. alias **python**=**python3** (一番上のところにつけてください。)
5. ^X Exit (で保存しEnterで閉じます)
6. source ~/.bashrc (zshを使用な場合、source ~/.zshrc)

## 上手くいったか確認しよう

```bash
$ which python 
/usr/local/opt/asdf/shims/python
$ python --version
Python 3.8.7
$ which pipenv
/usr/local/opt/asdf/shims/pipenv
$ pipenv --version
pipenv, version 2020.11.15
```
Railsのjoinsメソッドについて（SQL練習②）

## 背景
- Railsで検索フォームを作っています
- お手本のコードに読み慣れないメソッドがいっぱい＆SQL自体慣れていないので、勉強しながらノートにまとめてみました

▼環境
- Rails 5.2.3
- Ruby 2.6.0

なお、このメソッドについては下記の記事が大変丁寧に紹介してくれています。本記事はこちらの記事の自分なりの焼き直しです。

[【Rails】joinsメソッドのテーブル結合からネストまでの解説書](https://pikawaka.com/rails/joins)
## `joins`メソッドについて
SQLの`INNER JOIN`を実現するメソッドです。
`INNER JOIN`とは、ある２つのテーブルについて**AかつBの部分**を取り出すSQL文です。

基本の構文はこちらです。

```SQL
> User.joins(:posts)
SELECT `users`.*
FROM `users`
INNER JOIN `posts`                      /* 結合先のテーブル */
ON `posts`.`user_id` = `users`.`id`     /* 結合の条件 */
```

この時、

- postsがないuser
- userがないposr

のデータは取り出されません。
発行されるSQLが複雑なのでびっくりしますが、結構シンプルなメソッドですね:relaxed:

１点、注意したほうが良いなと思ったのは、`User.joins(:posts)`の`:posts`の部分は、**テーブル名ではなく、関連名だということ**でしょうか...？

例えば、以前こんなアソシエーションを組みましたが、

```ruby
class User < ApplicationRecord
  has_many :like_posts, through: :likes, source: :post
end
```

この場合は、`User.joins(:like_posts)`のように書く必要があるようです。
適用ボタンでイライラが少し減る

##__今回は少しでもイライラを減らすTips__##
データ量が少ない場合は気になりませんが、Tabaleauサーバにある大量データを読み込んで、
がちゃがちゃ可視化や探索をやってる際のイライラの１つを少し軽減できる超小さ目なTipsです。

##__フィルタで項目を選択するときのあるある__##
大量データをTableauで処理している際のあるあるの1つで、
フィルタ表示しているフィールドで複数チェックしたい場合、
1つチェックしただけで、処理が動いてしまうことはありませんか？
裏でクエリをセットしていたら、いちいちサーバにデータを取りに行くことから始まってしまい、数分待つイライラを経験したことはあるのではないのでしょうか...
![01_前振り.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036899/74141e0c-1c74-a90f-13ba-fa251d8c6941.png)
その度に、もうちょい待てよ、と思ったり、
チェックのスピードを極限まで速めて、Tableauに勝とうとしたり、私はしてました。

そんな小イライラを一発で減らす小技があります。

##__それが適用ボタン__##
適用ボタンを利用することで、複数チェックしたいとき、TableauがこちらがOKだすまで、待ってくれます。
やり方も超簡単です。

__①デフォルトでフィルタを表示している状態__
最初のフィルタはこんな感じです。
![02_デフォルト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036899/32108a47-1374-01ae-3051-993095a56941.png)

__②適用ボタンを表示__
そこからフィルタフィールドの右隅にある▼から
適用ボタンを表示させます。
![03_適用ボタン表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036899/2f1a63e5-7472-2761-b969-e303377acdbf.png)
すると、フィルタのフィールドの下にあのボタンがうっすら表示されます。
![04_表示後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036899/1c77fb6d-48c2-b1b0-a4c1-3754da3b4c25.png)

__③その状態で複数チェックしてみると__
フィルタで複数チェックしてみても、何と即レスしてくれなくなっており、
こちらがGOサインを出すまで待ってくれるようになります。
![05_複数選択してみる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036899/d4de1e38-2acf-7c0f-266a-625397c59b2d.png)

__④例のボタンを押してみる__
そして、こちらが適用ボタンを押すと、ようやくTableauがレスを返してくれます…！
![06_ボタン押下.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036899/1e9537ff-f1a8-9bda-38d1-c41f0997c92f.png)

##__まとめ__##
ということで、フィルタフィールドで適用ボタンを表示させた状態にすると、
フィルタで複数チェックしても、こちらが適用ボタンを押すまで、処理を待ってくれます。

小さな小さなTIPSですが、少しでもイライラが減ると、世の中うれしいですよね。
それでは、最後まで読んでいただきありがとうございました。:beers:
vscodeでhtmlを開いた時に文字化けする

##### ※すげー適当に書いてるので、詳しく知りたい人はコメントしてね



### 環境
- macOS Catalina 10.15.7
- vscode 1.52.1


### 課題
- Djangoのプロジェクトのthmlファイルを開いた時に文字化けしちゃう
- 文字コードがwindows 1252とやらで開いちゃう


### やりたきこと
- htmlファイルを文字化けさせずに開きたい


### 試したこと
1. 右したの文字コードをいじるとこ押して、「エンコード付きで再度開く」を選択し、utf8を選択 →成功したけど、毎回これをやる必要がありめんどい
 ![スクリーンショット 2021-01-31 10.33.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270632/d1990827-7369-5197-0e88-aaeb4f5cb395.png)

2. 基本設定からencodeをutf8にしてみたり、encodeの自動推測を有効にしてみたりした（ユーザー設定&ワークスペース設定両方）→失敗、、、
![スクリーンショット 2021-01-31 10.36.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270632/f87fe918-9a88-7db9-bcb8-5c955214245b.png)

3. .vscode/setting.jsonを画像の様に編集→失敗、、、
![スクリーンショット 2021-01-31 10.39.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270632/2d45025e-c037-9f6e-6157-342532672cbf.png)


### ベストアンサー
原因は拡張子htmlのファイルがhtmlファイルとして認識されていなかったことみたい。

[こちら](https://qiita.com/program-beginner/items/e3db5406588f97a1486a)の記事を参考に設定したらうまくいった！！！

1. 右下の言語モードの選択の部分をクリック
2. （あとはがんばれ！）

/Library/Application Support/Code/User/settings.json にこれを追記した気がする

```settings.json
"files.associations": {
        "*.html": "html"
    }
```


実は初記事です。こんなゴミみたいな記事でごめん
IIS とTomcatを連携させる

IISとTomcatを連携させたときの備忘録。
Tomcatはeclipseをインストールしたときのものを利用した。

#設定

####連携モジュールのダウンロード
　isapi_redirect-1.2.28.dll

####dllをコピーしたフォルダに設定ファイルを作成
各設定ファイルを任意のフォルダ(C:\inetpub\connector)に作成

isapi_redirect.properties

```
extension_uri=/jakarta/isapi_redirect.dll　//仮想ディレクトリ(jakarta)の参照先
log_file=C:\share\isapi_redirect.log
log_level=debug
worker_file=C:\inetpub\connector\workers.properties
worker_mount_file=C:\inetpub\connector\uriworkermap.properties
uri_select=unparsed
```

workers.properties


```
ps=\
worker.list=tomcat //「tomcat」が共通箇所
worker.tomcat.port=8009
worker.tomcat.host=localhost
worker.tomcat.type=ajp13
```
uriworkermap.properties


```
/examples/*=tomcat //共通箇所「tomcat」の参照先
```
「examples」はデフォルトサイトの参照先

####IISの有効化
「ISAPIおよびCGIの制限」にdllを追加(名前は任意でOK)
 「ISAPIフィルター」にdllを追加(名前は任意でOK)
 「仮想ディレクトリ」追加
→ エイリアスにisapi_redirect.propertiesのextension_uriで指定した名称と一致
→「/jakarta/isapi_redirect.dll」と指定したら、エイリアスを「jakarta」
→ 管理パスはdllをコピーしたフォルダ(C:\inetpub\connector)
作成した仮想フォルダの「ハンドラーマッピング」で「スクリプトマップの追加」を設定
→ 要求パス：*
→ 実行可能ファイル：isapi_redirect.dllへのパス
→ 名称：任意
→メッセージが出てきたら、「はい」でISAPI拡張を有効
IIS再起動

####Tomcat設定(IISとの連携モジュールを有効)
conf\server.xmlのAJP設定を有効
再起動

```
  <!-- Define an AJP 1.3 Connector on port 8009 -->
  <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" />
```

####Tomcat再起動

#動作確認
　URLアクセス

```
http://localhost/パス/test.jsp
```

#整理
仮想ディレクトリにアクセスしたときに、リダイレクト発生すると思っていた。
実際は、IISにアクセスがあった場合に、ハンドラが作動して、dll実行。その時に、仮想ディレクトリを利用して、設定したパスの場合はリダイレクトが行われる。

仮想ディレクトリを設定する理由が分からない。
ハンドラが作動する時点で、dll起動してそうなのに。
Docker for Windowsでエラーが出た時の対処法

#初めに
**「Dockerをインストールしたけれどエラーが出て実行できない！」**という方が居られると思います。自分もそうでした。ということで半ば備忘録的な感じで記事にまとめてみました。ただ、自分は２つのエラーにしか遭遇しなかったので、その２つしかまとめられません。ご了承ください。

#目次
**1. Docker Desktop - Access denied**
**2. Dokcer Desktop - Requires logout**

#1. Docker Desktop - Access denied
注）これは管理者権限が必要です。

まず、``Windows PowerShell``を管理者として開きます。その後、

```
net localgroup docker-users (追加したいユーザー名) /add
```

と入力します。完了です。
**確認する方法↓**
引き続きPowerShellです。今度は

```
net users (追加したユーザー名)
```

とし、下のほうの``所属しているローカル　グループ``の項目に``*docker-users``とあれば、成功です。PowerShellは閉じてもらって結構です。多分次の項目のエラーも発生すると思います。

#2. Docker Desktop - Access denied
再起動すれば終了です。
その後、``Docker``を起動すれば、おそらく**Docker is starting**という通知が来ると思います。

#終わりに
如何でしたでしょうか。実は自分Dockerのことあんまりわかってないんですよｗ

よきDeckerLifeを！ｗ
Auto Encoderを用いた異常検知 PART3 （学習）

# ライブラリのimport

```Python
import torch
import torch.utils.data
import torch.nn as nn
import numpy as np
import torch.nn.functional as F
import pickle
from detection_model import autoencoder # 有料
```

# データのロード

```Python
with open('normal_data.pkl', 'rb') as f:
	normal_data = pickle.load(f)
with open('anomaly_data.pkl', 'rb') as f:
	anomaly_data = pickle.load(f)
```

# ハイパーパラメータ

Deep Learningのハイパーパラメータを下記のように設定します。

```Python
# ハイパーパラメータ
LEARNING_RATE = 0.0001
BATCH_SIZE = 10
EPOCHS = 50
```

# Auto Encoderの訓練データの設定

Auto Encoderで訓練するデータを設定します。

```Python
train_data = normal_data[:900]
```

# モデルの設定

```Python
model = autoencoder()
```

![特徴表現.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1053943/fea028c2-d887-ef4c-f6b3-22296a66b069.jpeg)


# DataSet、DataLoaderの設定

```Python
class MyDataSet(torch.utils.data.Dataset):
	def __init__(self, data):

		self.data = data
		self.length = len(data)

	def __len__(self):

		return self.length

	def __getitem__(self, index):

		data = self.data[index]

		return data
		
trainset = MyDataSet(train_data)
trainloader = torch.utils.data.DataLoader(
	trainset, batch_size=BATCH_SIZE, shuffle=True)
```

# 損失関数、最適化手法の設定

```Python
criterion = nn.MSELoss()
optimizer = torch.optim.AdamW(model.parameters(), lr=LEARNING_RATE)
```

# 学習

```Python
for epoch in range(EPOCHS):
	print(epoch)
	train_loss = 0
	total = 0
	model.train()
	# cnt = 0
	for data in trainloader:

		optimizer.zero_grad()

		output = model(data[0].float())
		target  = data[0].float()

		loss = criterion(output, target)

		train_loss += loss.item()

		total += data[1].size(0)

		loss.backward()
		optimizer.step()

	train_loss = train_loss / total
	print(f"{train_loss}")
```

# モデルの保存

```Python
torch.save(model.state_dict(), "autoencoder.pth")
```

# 続き
この続きに興味のある方は、以下のリンクに続きがありますので、よろしくお願いします。
https://zenn.dev/deepblackinc/books/c2181d607d772b
Railsのdistinctメソッドについて。（SQL練習①）

## 背景
- Railsで検索フォームを作っています
- お手本のコードに読み慣れないメソッドがいっぱい＆SQL自体慣れていないので、勉強しながらノートにまとめてみました

▼環境
- Rails 5.2.3
- Ruby 2.6.0

なお、本記事は下記の記事の内容を自分の環境で試しながら、知見をまとめたものです。

[Rails distinctメソッドについて](https://qiita.com/toda-axiaworks/items/ad5a0e2322ac6a2ea0f4)

## distinctメソッド

`distinct`メソッドは、レコードを一位にまとめてくれるメソッドです。[APIドキュメント](https://api.rubyonrails.org/classes/ActiveRecord/Associations/CollectionProxy.html#method-i-distinct)はこちら。

例えば、`User`が`Post`を投稿するアプリにおいて、

```Ruby:
> Post.select(:user_id)
```
とすると、

```SQL
Post Load (1.2ms)  SELECT `posts`.`user_id` FROM `posts`
=> [#<Post:0x00007f826d51c290 id: nil, user_id: 1>,
 #<Post:0x00007f826d51c150 id: nil, user_id: 1>,
 #<Post:0x00007f826d51c010 id: nil, user_id: 2>,
 #<Post:0x00007f826d527e88 id: nil, user_id: 2>,
 #<Post:0x00007f826d527d48 id: nil, user_id: 3>,
 #<Post:0x00007f826d527c08 id: nil, user_id: 4>,
 #<Post:0x00007f826d527ac8 id: nil, user_id: 5>,
 #<Post:0x00007f826d527988 id: nil, user_id: 5>]
```
と出てきます。これに`distinct`を加えると

```SQL
> Post.select(:user_id).distinct
  Post Load (1.6ms)  SELECT DISTINCT `posts`.`user_id` FROM `posts`
=> [#<Post:0x00007f8268b1f8e0 id: nil, user_id: 1>,
 #<Post:0x00007f826d51c010 id: nil, user_id: 2>,
 #<Post:0x00007f826d527d48 id: nil, user_id: 3>,
 #<Post:0x00007f826d527c08 id: nil, user_id: 4>,
 #<Post:0x00007f826d527988 id: nil, user_id: 5>]
```
と、投稿が`select`で選択した項目によって一意になります。ちなみに、[先の記事](https://qiita.com/toda-axiaworks/items/ad5a0e2322ac6a2ea0f4)にもありますが。**`select`と一緒に使わないと、全ての`post`をとってきます。**

```SQL
> Post.distinct(:user_id)
SELECT DISTINCT `posts`.* FROM `posts`
/* 全てのpostが表示される */
```

発行されるSQLを見比べればわかるのですが、

```SQL
/* selectがある時 */
> Post.select(:user_id).distinct
Post Load (1.6ms)  SELECT DISTINCT `posts`.`user_id` FROM `posts`

/* selectがない時 */
> Post.distinct(:user_id)
SELECT DISTINCT `posts`.* FROM `posts`
```

`select`がないと、**全てのカラムを持ってきて、それらについて一意の値を呼び出してくるの**ですね。
逆に「重複する投稿を表示しない」などでしたら、シンプルに

```SQL
> Post.distinct
SELECT DISTINCT `posts`.* FROM `posts`
```
で良さそうです。

なお、親子関係のあるレコード（例えばpostのコメント）に関しては、

```SQL
> post = Post.first
> post.comments.select(:user_id).distinct
/* ある投稿に紐づくコメントについて、user_idが一意のレコードを取得する */
```
こんな感じで指定ができるようです！
useEffectとライフサイクルメソッドの対応関係

　classコンポーネントでは、ある決まったタイミングでメソッドを呼ぶことができるライフサイクルメソッドというものがあります。一方で、関数コンポーネント自体にはこのような機能がないため、hooksを利用することになります。

　関数コンポーネントでは、hooksのuseEffectがclassコンポーネントにおけるライフサイクルメソッドの代わりになるため、useEffectとライフサイクルメソッドの対応関係をおさえることが重要です。

## useEffectの第1引数

useEffectの第1引数には、処理したい内容を記述した関数を渡します。この関数で、例えばクリーンアップする処理を含んだ関数をreturnすれば、マウント時（Mounting）のcomponentWillUnmountメソッドに相当するタイミングで実行されます。

## useEffectの第2引数

useEffectでは、第2引数の書きぶりでclassコンポーネントにおけるライフサイクルメソッドのどれと対応するのかが変わります。

```
useEffect(()=>{
	//処理
},【第2引数】);
```

### 空の配列の場合：[ ]

コンポーネントの初回レンダリング時に、１度限りで呼ばれます。マウント時（Mounting）のrenderメソッドに相当します。

### 何も指定しない場合：nothing

コンポーネントがレンダリングされる度に呼ばれます。ただし、このケースはあまり見られません。マウント時（Mounting）のcomponentDidMountメソッドと更新時（Updating）のcomponentDidUpdateメソッドに相当します。

### 中身のある配列の場合：[data]

コンポーネントの初回レンダリング時に呼ばれるほか、dataが変更される度に呼ばれます。尚、[data,data2,data3...]のように複数要素がある場合は、この内どれか1つでも変更が生じれば呼ばれます。

## 参考

・Udemy講座「 Modern React with Redux [2020 Update] 」（ https://www.udemy.com/course/react-redux/ ）
今回、hooksとライフサイクルに関してここで学んだ内容について、備忘録を兼ねて共有させていただきました。hooksはclassコンポーネントの内容を押さえた後に学習するという進め方が効率的だと思います。本講座でも、classコンポーネントの解説がhooksの解説に先行しており、新たな学びにおいて正しい順序で効率的に進めるにも、Udemyの講座は有効だと思います。
PythonでGoogleスプレッドシート操作時の初歩的エラー

## 前置き
ProgateのPythonコースを完了し、いくつかの書籍を学んだ程度の駆け出しです。
原因が分かった時、初歩的なことだったのですが、意外と国内外でも検索すると質問されている方が多く、でも初歩的だからか回答得られずに迷っている方がいたので、解決方法を残しておきます。M1 Macbook Proで同エラーに悩まされ、原因がわからずWindowsで調べましたが、Macでも同じ方法で解決可能です。

## 開発環境
Windows10
Visual Studio Code
Python v3.8.5
Conda v4.9.2


## json keyfileが見つからないエラー
下記のエラーは`ファイル、またはディレクトリが見つからない`というエラーです。
エラーの意味はわかるんだけど、なんで見つからないの・・・という気持ちで調べていました。

```
service_account.py", line 219, in from_json_keyfile_name
    with open(filename, 'r') as file_obj:
FileNotFoundError: [Errno 2] No such file or directory: '~~~~~~.json'
```

頭を抱えながらTerminalをぼーっと見ていたら、解決しました。
condaでmyenv385という名前の環境を作っていますが、pyファイルはDドライブのPythonフォルダの中に、内容ごとにフォルダを分けてアウトプットしています。

Dドライブ
└ Python
  ├ gspread
    ├ googlecredential.json
    ├ spreadtest.py
  ├ test
  ├ ...

VSCのワークスペースをDドライブのPythonに指定している為か、conda activate myenv385を実行すると下記のようになります。

```
(myenv385) D:\Python>
```

spreadtest.pyをVSCのターミナルでPythonファイルを実行を行った際に発生しました。
つまりどういうことかというと、D:\Pythonにはgooglecredential.jsonが見つからないということなんですね。

下記コマンドをターミナルに入力し、ディレクトリを移動しましょう。

```
(myenv385) D:\Python>cd gspread

# 下記のように移動できればOK
(myenv385) D:\Python\gspread>
```

この状態で再度VSCのPythonファイルを実行すればエラーが出ずにpyファイルが正しく実行されます。


## 結論
実行時の仕組みを勘違いしていることが原因でした。
実行させるpyファイルから見たときに、相対パスで同じディレクトリに存在していれば問題ないと思っていたこと。
flutterでfirebase環境構築

#bundle identifierをxcodeで設定しよう![bundle_identifier.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/832092/f7cb3f7b-ae79-6cdd-0b0c-e96bf0a2c18a.png)


xcodeでちゃんと設定しないと、firebaseと連携してくれないという話
GoogleClassroomAPIを使うときに『ReferenceError: Classroom is not defined』とエラーが出て困った話

こんにちは！GoogleAppsScriptを使った業務効率化に夢中の初心者プログラマー、太郎です。
Google Classroom APIを使いたいと思い、公式ドキュメントに載っている以下のテストコードを入力したのですが、、、
（自分が所属しているクラスルームの名前とIDを10個取得するコードです。）

```javascript
/**
 * Lists 10 course names and ids.
 */
function listCourses() {
  var optionalArgs = {
    pageSize: 10
  };
  var response = Classroom.Courses.list(optionalArgs);
  var courses = response.courses;
  if (courses && courses.length > 0) {
    for (i = 0; i < courses.length; i++) {
      var course = courses[i];
      Logger.log('%s (%s)', course.name, course.id);
    }
  } else {
    Logger.log('No courses found.');
  }
}
```

こんなエラーが起きてしまいます。
`ReferenceError: Classroom is not defined`
参照エラー：クラスルーム定義されていません
![スクリーンショット (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108046/c5233c8e-b3b8-45ce-2613-0f1820d23563.png)

『はっ？？？Classroomが定義されてないってどういうこと？ClassroomはClassroomでしょ！』とプログラミング初心者の私には早くも意味ぷーさん（もはや死語、、、）な状況が訪れたわけですが、[公式ドキュメント](https://developers.google.com/classroom/quickstart/apps-script)にしっかりやり方が載っていました。

どうも、ClassroomのAPIは使用できるように**拡張**しないと使用できないようです。
『なんでスプレッドシートとかはそのまま使えるんだよ！？』ここにもプログラミング初心者にとっての発狂ポイントがあるのですが、もうそういうものだと諦めましょう。

拡張の仕方はコチラ。
GoogleAppsScriptの編集画面で『サービスを追加』をクリック
![スクリーンショット (23)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108046/cbbb773a-bb51-24e3-52bb-1a983d7a4d9f.jpeg)

APIを追加できる画面が出てくるのでGoogle Classroom APIを選択して追加
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108046/50dc1b4b-dea0-845e-0d44-421b550fb5aa.png)

サービスの下に「Classroom」と表示されているのを確認してください。

これでClassroom APIが使えるようになりました！
再度プログラムを実行してみると、
![スクリーンショット (30).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108046/b9619246-c349-57f2-27f2-a41a62ee73d5.png)

無事、自分の所属しているクラス名とIDを取得できました。

なお、組織としてG suiteを利用している場合、外部サービスのAPIを勝手に利用できないような設定になっているケースもあり、その場合はシステムの管理部に問い合わせないとClassroomのAPIは使用できません。

ClassromのAPIに関しての日本語の情報が少ないので、今後も引き続き発信していきたいと思います。
pythonで定数はサポートされています。「エンクロージャ内のローカル変数」が「クロージャの定数」です。

例えば次のクラス`log2計算機`はクラス変数として`底`が存在する。

```python:クラス変数を持つクラスの例
>>> import math
>>> class log2計算機:
...     底 = 2
...     def __init__(self, 真数):
...         self.__真数 = 真数
...     def 計算(self):
...         return math.log(self.__真数, log2計算機.底)
...
>>> log2計算機(8).計算()
3.0

```

が、外部から容易に変更可能であるため、「クラス**定**数」と呼ぶことができない。

```python:変数は容易に変更可能
>>> log2計算機.底 = 4
>>> log2計算機(8).計算()
1.5 # これはlog4(8)の結果である
```

定数を実現する一つのアイデアとして「クラスを返すエンクロージャ」を作ってしまうというものがある。
エンクロージャ内のローカル変数は、外部から変更できない。この性質によって、**「エンクロージャ内のローカル変数」を「クロージャの定数」とみる**ことができる。

```python:エンクロージャの変数こそ定数である
>>> def log2計算機を返すエンクロージャ():
...     エンクロージャの変数としての底 = 2
...     class log2計算機:
...         def __init__(self, 真数):
...             self.__真数 = 真数
...         def 計算(self):
...             return math.log(self.__真数, エンクロージャの変数としての底)
...     return log2計算機
...
>>> log2計算機 = log2計算機を返すエンクロージャ()
>>> log2計算機
<class'__main__.log2計算機を返すエンクロージャ.<locals>.log2計算機'>
>>> log2計算機(8).計算()
3.0
```
後から、スコープ`__main__.log2計算機を返すエンクロージャ.<locals>`内の変数である`エンクロージャの変数としての底`を書き換えることはできない。故に`エンクロージャの変数としての底`はクロージャ`log2計算機`の定数とみることができる。
AtCoder ABC190 Python 解説

久しぶりにA, B, C, Dの４完できた．

```A.py
A, B, C = map(int, input().split())

if A > B:
    print('Takahashi')
elif A < B:
    print('Aoki')
elif A == B:
    if C == 0:
        print('Aoki')
    else:
        print('Takahashi')
```

```B.py
N, S, D = map(int, input().split())

for _ in range(N):
    X, Y = map(int, input().split())

    if X < S and Y > D:
        print('Yes')
        exit()

print('No')
```

bit全探索してしまったけど，解説ではもっとシンプルだった．

```C.py
N, M = map(int, input().split())
AB = [list(map(int, input().split())) for _ in range(M)]
K = int(input())
CD = [list(map(int, input().split())) for _ in range(K)]

n = len(CD)

max_n = 0

for i in range(2**n):
    a = set()
    for j in range(n):
        if ((i >> j) & 1) == 1:
            a.add(CD[j][1])
        else:
            a.add(CD[j][0])

    c = 0
    for ab in AB:
        
        if ab[0] in a and ab[1] in a:
            c += 1
    max_n = max(max_n, c)  

print(max_n)
```

```D.py
N = int(input())

if N == 1:
    print(2)
    exit()

n = 2*N


A = []
i = 1
while i * i <= n:
    d = []
    if n % i == 0:
        d.append(i)
        if i != n // i:
            d.append(n // i)
            A.append(d)
    i += 1

count = 0
for a in A:
    if not (a[0] % 2) == (a[1] % 2):
        count += 1

print(count*2)
```
Android EpoxyでSticky

# Epoxyについて
Androidで何らかのリストを表示する場合、RecyclerViewを用いることが多いです。
EpoxyはRecyclerViewによるUI構築をシンプルにするライブラリです。
特に複数の種類を保有するリストなど複雑なリストを構築する場合、Adapterなどの実装内容は複雑になるので、Epoxyが役立ちます。

開発元はAirbnbでリポジトリはこちらです。
https://github.com/airbnb/epoxy

# Stickyとは
リストをスクロールする際に、リスト内の特定要素を得定位置に貼り付ける機能です。
下記の例だとスクロールする際に「アイテム」を上部に貼り付けています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356260/5239f4a2-e670-a547-2fa9-3f43acbdeecc.gif" width=30%>

## EpoxyにおけるSticky
Epoxyを使っている場合Stickyを実現する場合、独自実装する必要がありましたが、[3.10.0](https://github.com/airbnb/epoxy/releases/tag/3.10.0)からEpoxyにStickyの機能が搭載されました。上記のGifはEpoxyのSticky機能を使って実装した例です。

この記事ではEpoxyのSticky機能を使う方法を記載しています。
(Epoxyの基本的な説明と基本機能は記載していません。)


# 実装方法
非常に簡単で2ステップで終わります。

## ステップ1 EpoxyRecyclerView側の実装
EpoxyRecyclerViewのLayoutManagerにStickyHeaderLinearLayoutManagerを指定します。

```Kotlin:MainActivity.kt
val epoxySampleController = EpoxySampleController()
binding.epoxyRecyclerView.apply {
    adapter = epoxySampleController.adapter
    layoutManager = StickyHeaderLinearLayoutManager(context)
}
```

## ステップ2 EpoxyController側の実装
EpoxyControllerにisStickyHeaderメソッドを追加します。

```Kotlin:EpoxySampleController.kt
class EpoxySampleController : TypedEpoxyController<SampleData>() {
    override fun buildModels(data: SampleData) {
        // ...
    }

    override fun isStickyHeader(position: Int): Boolean {
        return adapter.getModelAtPosition(position)::class == SampleDataItemBindingModel_::class
    }
}
```
isStickyHeaderメソッドはどのポジションのEpoxyModelでStickyを実現するかを判定するメソッドです。
この例では`adapter.getModelAtPosition(position)`でポジションに紐づくEpoxyModelを取得し、`SampleDataItemBindingModel`(「アイテム」の要素)の場合のみStickyが有効になるように判定しています。

# 最後に
EpoxyにStickyの機能が搭載されより便利なライブラリとなったように感じます。他にも便利な機能があるので、まとめておきます。

| 機能 | 説明 |
|:-:|:-:|
| 差分検出 | リスト表示した後に再度表示する場合、差分がある要素のみを更新機能 |
| Pagingライブラリのサポート | Android Architecture ComponentsのPagingライブラリのサポート |
| ModelGroup | 意味のある単位で小分けリストを小分けする機能 |
| EpoxyTouchHelper | リストのアイテムをドラッグ&ドロップして並び替える機能 |
| Carousel | 横方向リスト表示しスクロールする機能 |
Flutter×FireStoreでのTimestampの扱い(toJson,fromJson)

 FireStoreにTimeStamp型のデータを保存する場合、jsonのシリアライズ・デシリアライズにDateTime型とは異なる対応が必要。

モデルクラスにJsonKeyをつける

```dart
  @JsonKey(fromJson: fromTimeStampJson, toJson: toTimeStampJson)
  Timestamp date;
```

### toJson (シリアライズ)

```dart
Map<String, dynamic> toTimeStampJson(Timestamp timestamp) {
  return {'date': timestamp.toDate().toIso8601String()};
}
```

### fromJson (デシリアライズ)

```dart
Timestamp fromTimeStampJson(Map<String, dynamic> json) {
  final date = DateTime.parse(json['date'] as String);
  return Timestamp.fromDate(date);
}
```


ちなみにパッケージには、
https://pub.dev/packages/json_serializable
https://pub.dev/packages/json_annotation
https://pub.dev/packages/build_runner
の３つを使用している。
ところで、Redshiftの「列指向データベース」って何？

# はじめに
* 現在、AWSソリューションアーキテクトアソシエイト試験に向けて勉強中
* Redshiftの「列指向データベース」についてよくわからなかったので、調べてみました。

# そもそも、「行指向データベース」ってあるの？
* 普段みなさんが使っているリレーショナルデータベースは行指向データベース
* SQLなどを使ってデータを抽出する時は、行を抽出する

# 「行指向データベース」の問題点
* 特定の列だけを抽出したい場合でも、まずは行全体を読み取らないといけない
* 必要以上のデータを読み取らないといけないため、データ量が膨大になれば処理が遅くなってしまう

# 「列指向データベース」
* 行指向データベースではできなかった、列だけを抽出することができるデータベース
* これによって、必要データを効率的に抽出することができる
* 特定の列のデータを使ってデータ分析をしたい場合に有効
* AWSでは、Redshiftが代表例

# まとめ
* Redshiftに代表される「列指向データベース」は、特定の列データを抽出できるデータベースで、データ分析時に活用される
* 実際のRedshiftの使い方などは、今後勉強してアップデートしようと思います

# 参考
* https://www.jtp.co.jp/techport/2015-11-11-003/
Swift Device Orientationをコードで制限する

![memo](http://www.cloudsquare.jp/kumonosu/wordpress/wp-content/uploads/2021/01/orientation_01.png)

## Device Orientationをコードで制限するには
プロジェクトファイルのTARGETS-General-Deployment InfoのDevice Orientationのチェックは全て外す。
1つでもチェックが入っているとコード側は無視される。

## コード
```swift
override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
    var result: UIInterfaceOrientationMask = [.portrait, .portraitUpsideDown, .landscapeLeft, .landscapeRight]
    return result
}
```

superは全て許可が設定されている。

```swift
super.supportedInterfaceOrientations
```

## コードで制御したかった理由
ある条件下で.portraitのみにしたかった。

```swift
override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
    var result = super.supportedInterfaceOrientations
    if self.stopLandscape == true {
        result = .portrait
    }
    return result
}
```
Lambda@edgeとは【Amazon ソリューションアーキテクトアソシエイト試験対策メモ】

# はじめに
* AWS ソリューションアーキテクトアソシエイト試験合格に向けて勉強中
* Lambda@edgeについて良く分からなかったので、調べてみる

# Lambda@edgeとは
* Amazon CloudFrontの機能
* アプリケーションのユーザーに近いロケーションでコードを実行できる
* これにより、パフォーマンスが向上し、待ち時間が短縮される
* 課金に関して、通常のLambdaと同様に、実際に使用したコンピューティング時間に対してのみ発生し、コードが実行されていないときには料金は発生しない
* 参考URL：https://aws.amazon.com/jp/lambda/edge/
* 現状は、US-East-1 (バージニア北部) リージョンで作成した Node.js または Python 関数を実行可能な模様
    * 参考URL：https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-at-the-edge.html
* Lambda＠edgeではファイル圧縮処理は出来ない。CloudFrontのgzip圧縮によってエッジロケーションでファイル圧縮を実施可能

# まとめ
* 基本的にはAmzon CloudFront + Lambdaを掛け合わせた機能と考えて良さそう
* 実際の使い方や、ユースケースについては今後勉強します。
CVE-2021-3156: Sudoの脆弱性(Baron Samedit)は深刻。すぐにアップデートを!!!

「Ubuntu 16.04 - 20.04」と「Linux Mint 18.1」で修正しました。

## 概要
2021年1月26日（現地時間）、sudoにおけるヒープベースのバッファオーバーフローの脆弱性（CVE-2021-3156）に関する情報が公開されました。sudoersファイル(通常は/etc/sudoers配下)が存在する場合に、脆弱性を悪用することにより、<b>ローカルユーザがrootに権限昇格する可能性があります。</b>

Sudo
Buffer overflow in command line unescaping
https://www.sudo.ws/alerts/unescape_overflow.html

なお、本脆弱性を発見したQualys社より、脆弱性の技術的な解説や脆弱性を実証する動画が公開されています。今後、脆弱性を悪用する実証コードなどが公開され、攻撃の中で権限昇格に悪用される可能性もあるため、影響を受けるシステムを利用している場合は、<b>早急に対策を実施することを推奨します。</b>
(コピペ元): https://www.jpcert.or.jp/at/2021/at210005.html

## 自身のバージョンや、脆弱性の有無の確認方法

まずは、現状把握。
端末から以下のコマンドを入力すれば確認可能。

```bash
bash:~$ sudoedit -s /
usage: sudoedit [-AknS] [-C num] [-D directory] [-g group] [-h host] [-p prompt] [-R directory] [-T timeout] [-u user] file ...
bash:~$ |
```
と出れば今回の脆弱性の対象じゃないかアップデート済みなので大丈夫です。
以下のどちらかを試した結果がこのようになれば脆弱性が存在するままでHeap-Based Buffer Overflowの餌食に、、、

```bash
bash:~$ sudoedit -s /
sudoedit: /: not a regular file
bash:~$ |
```

```bash
bash:~$ sudoedit -s '01234567890123456789\'
malloc(): corrupted top size
zsh: abort (core dumpe) sudoedit -s '01234567890123456789\'
bash:~$ |
```

Qualys社は、"sudoedit -s /"コマンドを実行し、"sudoedit:"から始まるエラーが表示されると脆弱性の影響を受け、"usage:"から始まるエラーが表示されると影響を受けない、という情報を公開しています。

## 本脆弱性の対象
- sudo バージョン 1.8.2 から 1.8.31p2
- sudo バージョン 1.9.0 から 1.9.5p1


バージョン確認

```bash
bash:~$ bash -c sudo --version
Sudo version 1.9.5p2
Sudoers policy plugin version 1.9.5p2
#...(略)
bash:~$ |
```

## 対策
各ディストリビュータより、本脆弱性を修正したバージョンが公開されています。各ディストリビュータの情報などを参考に。
確認できた範囲では、Ubuntu LTS(16.04, 18.04, 20.04)と Ubuntu20.10 と LinuxMint(18.1) ではもうすでに```apt update && apt upgrade -y``` コマンドで修正されたSudoにアップデートされる。



## 参考元
sudoの脆弱性（CVE-2021-3156）に関する注意喚起
https://www.jpcert.or.jp/at/2021/at210005.html

CVE-2021-3156: Heap-Based Buffer Overflow in Sudo (Baron Samedit) - Qualys, community
https://blog.qualys.com/vulnerabilities-research/2021/01/26/cve-2021-3156-heap-based-buffer-overflow-in-sudo-baron-samedit

Youtube - 『Patch sudo NOW! CVE-2021-3156』John Hammond
https://www.youtube.com/watch?v=2_ZaNBl6qNo
【Docker】`vue-cli-service serve`した際に`Hot module reload`が効かないときの対処法

## 結論

以下を追加します。

```vue.config.js
module.exports = {
  devServer: {
    watchOptions: {
      poll: true
    }
  }
};

```

## 環境

Docker Desktop: Version 3.1.0
Alpine: Version 3.12
@vue/cli: 4.5.11

```package.json
{
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"
  }
}
```

## 問題

> Control options related to watching the files.
>
> webpack uses the file system to get notified of file changes. In some cases, this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. In these cases, use polling:

引用: [devServer.watchOptions](https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-)

Vagrant 等のネットワークファイルシステム（NFS）使っている場合、webpack がファイル変更の通知を受け取れないことがあるらしいです。
Docker でも発生する模様。
そのため、定期的にポーリングを行うことでこの問題を解消します。

この[Issue](https://github.com/vuejs/vue-cli/issues/2051#issuecomment-420320469)が参考になりました。
[無線LAN+Windows]おうちインターネットを速くしたいっ!!

[本記事は、自分サイトのこの記事と同一内容です。](https://hagiayato.github.io/my-site/jekyll/update/2021/01/31/MyWifiSpeedUp.html)

# はじめに
コロナ禍で昨年から弊社でもテレワークが始まり、その他私生活でZoom、Meetのようなオンライン会議システムを使い始めました。
そこで起きていた問題がインターネット(無線LAN/wi-fi回線)の遅さ。

 - テレワークでは、会社との通信が遅くテレワーク用ツールがフリーズする
 - オンライン会議は映像が途切れ途切れになる

というレベルです。

この場合本来やるべきは、無線LANルータやプロバイダを変えること。
ですが、諸事情あってすぐにそれらを変更できないのが私の現状です…
そこで、無線LANルータやプロバイダを変えずにインターネットを高速にできる方法を色々試してみました。
その中で有効だったものを3つ紹介します。

# 1.受信ウィンドウ自動チューニングレベルを引き上げ
受信ウィンドウ自動チューニングレベルを引き上げることで、通信の高速化を図るというものです。
どうやら、Windowsによるネットワーク最適化機能を最大限使う設定らしい…

方法：下記コマンドを、管理者として開いているコマンドプロンプトで実行

```batch
rem Windows 10/8.1/7の場合
netsh interface tcp set global autotuninglevel=restricted
rem Windows Vistaの場合
netsh interface tcp set global autotuning=restricted
```

引用元：[Windowsで光回線の速度が出ない場合のチェックポイント(受信ウィンドウ自動チューニングレベル編)](https://freesoft.tvbok.com/web/network/autotuninglevel.html)

簡単に実行できるよう、私の方でバッジファイルを作成しました。
これを管理者として実行することで、簡単に設定変更が可能です。
[Network_Speed_Up.bat](https://github.com/HagiAyato/MyWindowsBat-and-Reg/blob/main/Network_Speed_Up.bat)

※サイトによっては、この機能を無効化(=disable)した方が高速になるという情報もあり。

# 2.DNS設定
DNSサーバーは、インターネットのドメインとIPアドレスを変換するサーバです。
PCのデフォルト設定は"自動"ですが、これを高速の物に手動設定します。
なお、PCでなくルータで設定してもOKです。

```
案1. Google Public DNS
　IPv4：優先DNSサーバ　8.8.8.8　代替DNSサーバ　8.8.4.4
　IPv6：優先DNSサーバ　2001:4860:4860::8888　代替DNSサーバ　2001:4860:4860::8844
案2. 1.1.1.1
　IPv4：優先DNSサーバ　1.1.1.1　代替DNSサーバ　1.0.0.1
　IPv6：優先DNSサーバ　2606:4700:4700::1111　代替DNSサーバ　2606:4700:4700::1001
```
参考：WikipediaのDNSサーバ名記事
# 3.無線LANルータの設定
無線LANルータの設定のうち、"20/40MHz 共存方式"をONにします。
無線LANルータが飛ばす電波の帯域(幅)を広げることで、インターネットの高速化を図ります。
設定方法は無線LANルータ次第…説明書を読むか型番で調べれば出てくるはず。
参考：[パソコンのWi-Fi(無線LAN)が遅い・途切れるときに試してほしい対処法
](https://sittoku.net/slow-wifi-approach.html#2040MHz)

# 上記の結果
上記対応の結果、おうちインターネットの速度は下記の通りになりました。
使用ツール：[Google スピードテスト](https://www.google.com/search?q=%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%83%86%E3%82%B9%E3%83%88)
![2021-01-31SpeedTest.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655112/93e73b33-9caa-0680-6955-f6053ee1b8a7.jpeg)
この測定は回線が混雑する深夜に行ったのですが、
対応前の速度はダウンロードが2-4Mbpsだったのでその8-4倍程度になりました。

# まとめ
無線LANルータやプロバイダを変えなくても、インターネットの高速化は可能!
ぜひお試しください。
LinkStation(LS210D)にムーブした録画番組をBRAVIA(KJ-49X9500G)で見る方法

# できたこと

NasneからLinkStationに録画番組をムーブしました。
それをBRAVIAで再生しようとしたところ
BRAVIAのサーバーリストにLinkStationが表示されず、
録画リストアプリからはLinkStation内部の録画番組が再生できないことがわかりました。

やっちまったか、と思いましたが、別の手段で無事再生することができました。
スマホの Video & TV Side View アプリを利用します。

(図解) 録画番組アプリでLinkStationが見つからない！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/ff15d862-911e-aff4-3aac-69a5ca929b93.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/7f158b50-10ae-e187-322e-d467e4645f24.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/34ae9beb-77dd-ddd4-8234-a54c1a402147.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/37314498-5771-f87d-221b-82724c611849.png)

# 必要なもの

* ブラビア(AndroidTV / [KJ-49X9500G](https://www.sony.jp/bravia/products/KJ-X9500G/))
* LinkStation ([LS210D](https://www.buffalo.jp/product/detail/ls210d0101.html))
* スマホ
* Video & TV Side View アプリ

# 手順

## 1. Video & TV Side Viewアプリを起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/d2b62af6-0a0a-4a20-32b0-c1220bf5af13.png)

## 2. メニュー(左上の三本線) >> ホームネットワーク >> LS210D409[LinkStation ...] を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/930dd10d-e49c-82bc-1f25-5e9db7cde144.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/849853be-44ec-08f8-bd7b-a4113a53be69.png)

## 3. ビデオ >> ジャンル から録画した番組を探します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/0c9d8343-7803-279a-d14b-2246757c5933.png)

## 4. 視聴機器で リビングルームの... を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102797/9bccc069-ce88-159e-a7f2-77b119d73d82.png)

無事再生されました
JavaScriptのアロー関数、コールバック関数を理解する

ES6で新たに登場したアロー関数をあまり理解してませんでしたが、ちゃんと勉強するととても簡単に理解することができました。
そしてコールバックという言葉に恐怖を抱いていたので、それも調べてみると意外と簡単だとわかりました。
忘れないようにアウトプットしておきます。
間違いがあったらご指摘いただければと思います。

## アロー関数とは

アロー関数はES6で導入された関数の定義方法の一つです。ES5までは関数を定義する場合はこんなふうに定義していました。

```js
var like = function() {
  console.log("I like it!");
};

like();
// => I like it!
```

ES6では、スペルが長くてタイポもしやすい`function()`と書くよりも、便利なアロー関数を使うことが多くなりました。

```js
const like = () => {
  console.log("I like it!");
};

like();
// => I like it!
```

アロー関数を使うと`function()`の部分が`() =>`だけでよくなります。
はじめはちょっと戸惑いますが、すぐに慣れます。

#### [ちょっと寄り道] var, let, constについて

上記の例でアロー関数の定義に使用した`const`はES6からの定数定義の仕様です。
ES6では`var`、`let`、`const`を使うことができ、ES5までは`var`のみを使うことができました。

`var`は変数の定義に使い、同じ変数名を再定義してもエラーを出すことはありません。
`let`も変数の定義に使いますが、同じ変数名を定義するとエラーを出します。
`const`は定数の定義に使い、一度定義した定数の値は再代入することができません。

本稿ではくわしく説明しませんが、これらを使い分けることにより、思いも寄らない再代入や再定義を防ぎ、バグを予防することができます。
関数を再定義してしまうと思いも寄らないバグが発生してしまうことが多いので、関数の定義には基本的には`const`を使うのが良いでしょう。　

## 関数に引数を渡して汎用的にする

先程の`like()`関数は、出力する文字列が`I like it!`と固定されていましたが、
__it__の部分を__かんぱち__とか__山登り__とかにしたくなりました。
そこで、like関数に引数を渡せるようにしましょう。
こんな感じ。

```js
const like = (str) => {
  console.log(`I like ${str}!`);
};

like("かんぱち");
// => I like かんぱち!
```

関数の定義で`str`という引数を渡せるようにしました（`(str) =>`の部分）。
ところで、この引数は、この例では文字列を渡すようにしましたが、それ以外に数値や関数を渡すこともできます。

## コールバック関数とは

引数に数値を渡すのはわかりやすいですね。先程の文字列の代わりに数値を渡すだけです。渡された数値を使って計算でもするイメージですね。
では、関数を引数として渡すっていうのはどういうことでしょうか？ちょっとイメージしにくいですね。
以下の例では、
1. `like()`という関数を定義する
2. `person()`という関数を定義する
3. `person()`関数の引数に`like()`関数を渡す

ということをしてみます。
わかりやすくするため、一旦`like()`は固定文字列バージョンに戻します。

```js
const like = () => {
  console.log("I like はまち!");
}

const person = (func) => {
  console.log("My name is Naoyuk");
  func();
}

person(like);
// => My name is Naoyuk
// => I like はまち!
```

`person`関数の引数に`like`関数を渡し、`person`関数内で`like`関数をさらに呼び出しています。
この時、`person`関数に渡された`like`関数のことを**コールバック関数**と言います。
`like`関数は単体でも呼び出せますが、その場合はコールバック関数とは言いません。
コールバック関数とは、**ある関数の引数として渡された関数**のことを指します。

以上、アロー関数、コールバック関数はそんなに怖くないよ、という内容でした。（コールバック関数に関しては未だにちょっと恐怖心が残っていますが。）
Material UIの導入について

#Material UIの導入方法

世界で最も人気のある**React** UIフレームワークである**Material UI**の導入方法について、
今後導入方法を忘れたときに確認するために記事にしました。

①Material UIのHPにアクセス
https://material-ui.com/ja/

②画面中央の始めましょうクリック

③コンソール(MacOS)かコマンドプロンプト(Windows)を開き、以下を実行
// npmの場合
npm install @material-ui/core

// yarnの場合
yarn add @material-ui/core

<font color="red">**※自分の作業ファイルで実行すること！！！**</font>
作業フォルダまでは「cd フォルダ名」を実行することで、たどり着くことができる。
cd以外のコマンドについては、下記のリンクを参照。
https://qiita.com/baby-degu/items/abe4adb81750e13362e2

一旦ここまで
コルーチンとconcurrent.futuresの備忘録

# はじめに

Twitterで一時期流行していた 100 Days Of Code なるものを先日知りました。本記事は、初学者である私が100日の学習を通してどの程度成長できるか記録を残すこと、アウトプットすることを目的とします。誤っている点、読みにくい点多々あると思います。ご指摘いただけると幸いです！

# 今回学習する教材

- [Effective Python](https://www.amazon.co.jp/Effective-Python-%E2%80%95Python%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92%E6%94%B9%E8%89%AF%E3%81%99%E3%82%8B59%E9%A0%85%E7%9B%AE-Brett-Slatkin/dp/4873117569/ref=sr_1_3?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=Effective+python&qid=1609408832&sr=8-3)

    - 8章構成
    - 本章216ページ

- 第5章：並行性と並列性

## 多くの関数を並行に実行するにはコルーチンを考える

スレッドには、以下の3つの問題があります。

- コードが複雑になる
- スレッド1つの実行に約8MB という多量のメモリを必要とし、数万の関数を実行することは困難
- スレッドの開始にコストがかかる

Pythonでは、これらの問題を**コルーチン**（処理を中断、再開できる構造のこと）で回避できます。
コルーチンは、ジェネレータの拡張として定義され、たった1KB以下のメモリで関数呼び出しから終了まで実行します。コルーチンで並列的振る舞いを真似ることができるのは、多くの別々のジェネレータ関数を次のyield式までそれぞれ進めておくことができるからです。

コルーチンでは、ジェネレータから値を取得するコードが、yield式を実行した直後のジェネレータに値を戻せます。コルーチンの例を示します。

```python
def my_coroutine():
    while True:             
        received = yield             # sendメソッドで渡された値がyieldの値になる
        print('Received:', received)

it = my_coroutine()
next(it)              # コルーチン開始
it.send('First')     
it.send('Second')
# Received: First
# Received: Second
```

nextへの呼び出しをすることで、sendを受け取る準備をしています。
この準備をしないと、以下のようなエラーが出ます。
`TypeError: can't send non-None value to a just-started generator`

## 本当の並列性のためにconcurrent.futures を考える

Pythonの組み込みモジュールconcurrent.futuresのmultiprocessingを使うことで、複数CPUを活用し、子プロセスとして並列実行することができます。子プロセスは、それぞれGILも別になっているので、相互排他ロックのせいで逐次処理になることはありません。

例として、2数の最大公約数を見つける計算を逐次処理と、並列処理で実行してみます。

```python
def gcd(pair):
    a, b = pair
    low = min(a, b)
    for i in range(low, 0, -1):
        if a % i == 0 and b % i == 0:
            return i

def main():
    numbers = [(12323221, 12341235), (82325471, 34352234),
            (38542512, 21384512), (29346852, 58192122)]
    start = time.time()
    results = list(map(gcd, numbers))
    end = time.time()
    print('Sequential: %.3f seconds' % (end - start))

    start = time.time()
    pool = concurrent.futures.ProcessPoolExecutor(max_workers=2)
    results = list(pool.map(gcd, numbers))
    end = time.time()
    print('Multi Process: %.3f seconds' % (end - start))

if __name__ == '__main__':
    main()
```

実行結果

```result
Sequential: 6.036 seconds
Multi Process: 4.034 seconds
```

2倍とまでは行かないものの、1.5倍近く処理が速くなりました。
ただし、この方式は、分離した（プログラムの他の部分と状態を共有する必要が無い）、レバレッジの高い（少量のデータだけを親と子のプロセス間でやり取りすれば、大量の計算が可能）タスクでしか効力を発揮しません。
Twitcastingの録画をダウンロードする

※現在、Twitcastingの仕様変更のためダウンロードできません。
# はじめに
[Twitcasting](https://twitcasting.tv/)の録画を簡単にダウンロードできるサイト・ライブラリがなかったためPythonで書きました。あくまで自分用にテキトーに書いたので再現性・安全性[^1]は保証しません。また実行はColaboratory上で行うことを想定(推奨)しています。していることは録画のURLからm3u8ファイルのURLを取得して、後はffmpegで処理してるだけです。

# パッケージのインポート・関数の定義

```
import re
import time
from urllib import request

from bs4 import BeautifulSoup


def get_m3u8_url(url):
    time.sleep(1)
    response = request.urlopen(url)
    soup = BeautifulSoup(response)
    response.close()
    wanted_line = ''
    for line in str(soup).split('\n'):
        if 'data-movie-playlist' in line:
            wanted_line = line
            break
    wanted_url = re.findall('https:[^ ]*m3u8', wanted_line)[0].replace('\\', '')
    return wanted_url


def dl_mp4_from_m3u8_url(m3u8_url, output_path=None):
    if output_path == None:
        try:
            output_path = re.findall('v/([0-9]+)-', m3u8_url)[0]+'.mp4'
        except:
            output_path = 'output.mp4'
    print(f'!ffmpeg -i "{m3u8_url}" tmp_output.mp4')
    print(f'!mv tmp_output.mp4 "{output_path}"')
    return output_path


def get_audio_from_mp4_file(mp4_file_path, output_path=None):
    if output_path == None:
        output_path = mp4_file_path.replace('.mp4', '_audio.mp4')
    print(f'!ffmpeg -i "{mp4_file_path}" -vn -acodec copy  tmp_output.mp4')
    print(f'!mv tmp_output.mp4 "{output_path}"')
    return output_path


def dl_movie_from_url(url, output_path=None):
    m3u8_url = get_m3u8_url(url)
    output_path = dl_mp4_from_m3u8_url(m3u8_url, output_path=output_path)
    return output_path


def dl_audio_from_url(url, output_path=None):
    path = dl_movie_from_url(url, output_path=output_path)
    output_path = get_audio_from_mp4_file(path, output_path=output_path)
    return output_path
```

# 使用例
urlにダウンロードしたい録画のURL、pathに保存するファイル名を指定して以下を実行すると実行すべきコマンドが出力される。

```
url = 'https://twitcasting.tv/twitcasting_jp/movie/189032259'
path = "ツイキャス公式_2015-08-02.mp4"

output_path = dl_movie_from_url(url, output_path=path)

# 音声だけダウンロード
# output_path = dl_audio_from_url(url, output_path=path)

# 出力
# !ffmpeg -i "https://dl01.twitcasting.tv/tc.vod/v/189032259-1612037427-1612066227-00bbfdf5-84e78fc7ace57fe9/fmp4/index.m3u8" tmp_output.mp4
# !mv tmp_output.mp4 "ツイキャス公式_2015-08-02.mp4"
```
出力されたコマンドを実行するとダウンロードできる。[^2]

```
!ffmpeg -i "https://dl01.twitcasting.tv/tc.vod/v/189032259-1612038902-1612067702-00bbfdf5-e8edeb25aafecafa/fmp4/index.m3u8" tmp_output.mp4
!mv tmp_output.mp4 "ツイキャス公式_2015-08-02.mp4"
```

[^1]: 例えばカレントディレクトリにtmp_output.mp4があれば上書きされます。
[^2]: subprocessでしようとしたらなぜかエラーが...
自作の業務効率化ツールで使った関数一覧

array_unique　重複排除
array_multisort　連想配列の特定キー名でのソート
array_merge　配列同士をマージ（結合）する
asort　配列のソート
implode 配列の中身を連結する
require_once htmlの共通パートのインクルード目的で使用
preg_replace　正規表現による文字列置換
file_get_contents　HTTPレスポンスの値を取得
mb_convert_encoding　文字コード変換
json_decode jsonを配列に変換
fgetcsv CSVファイルを読み込む

11個の関数を使用しました。
そのうち5つは配列操作に関するものです。
いかに配列操作が重要かを物語っているかのようです。
メンバー、変数、メソッド、まとめ


##なんとなく理解していたクラスの要素を整理


![fafa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457922/92c5e848-1efa-6c50-9506-428a43fa9ef1.png)


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457922/0932a66e-e92b-622c-1cfd-95bad3f41eb7.png" width=50%>
link_toにcssを適用する方法

Bootstrapでナビバーを作り、リスト形式でログインボタンを作っていた時の事です。
ログインしている時としてない時のボタン表示を `if user_signed_in?`で分けています。
link_to形式の記述にcssが効かなくて、検索しても「サッ」と出て来なかったので簡単にまとめました。

## link_toにcssを効かせるには？
ログアウト・新規登録・ログインボタンのサイズを変更したかった時の記述です。

```erb:header.html.erb

 <% if user_signed_in? %>
  <li class="nav-item active">
   <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link" %>
  </li>
 <% else %>
  <li class="nav-item active">
   <%= link_to "新規登録", new_user_registration_path, class: "nav-link" %>
  </li>
  <li class="nav-item active">
   <%= link_to "ログイン", new_user_session_path, class: "nav-link" %>
  </li>
<% end %>
```

```css:application.css
 .nav-link {
   font-size: 0.8rem;
 }
```
このように、

```
<%= link_to "リンク名", ***_path, class: "クラス名" %>  #=> ここのクラス名にcssを適用する
```
と書く事で、cssが適用されます。

## 間違ったパターン
僕が間違って書いたダメなパターンも書いておきます。
これではcssが適用されません。

```erb:header.html.erb

 <% if user_signed_in? %>
  <li class="nav-item active">
   <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
  </li>
 <% else %>
  <li class="nav-item active">
   <%= link_to "新規登録", new_user_registration_path %>
  </li>
  <li class="nav-item active">
   <%= link_to "ログイン", new_user_session_path %>
  </li>
<% end %>
```

```css:application.css
 .nav-item {
   font-size: 0.8rem;
 }
```
このように書き、

```
<li class="クラス名">      #=>　ここのクラス名にcssを適用しようとしていた
<%= link_to "リンク名", ***_path %>
```
これではcssが適用されません。

## まとめ
かなり初歩的なミスで同じように困る方はいないかもしれませんが、
もし同じような事でお困りの方がいた時の参考になれば嬉しいです。
最後までお読みいただき、ありがとうございました。
Githubへのソースコード流出を検知する方法



## 動機
なんとかBCのソースコードがGithub上に公開される形で流出するという騒ぎについて、これを防ぐにはどうすればよかったのかを考えます。
題名にあるように、公開されてほしくないソースコードがGithubに公開されていれば検知し、公開してる本人や関係者に通知する仕組みが出来れば今回の騒ぎは防げたような気がします。
その経緯を雰囲気で見てみると、
 * 実際にソースコードが公開されてすぐに騒ぎになっているわけではなく、公開されてから騒ぎになるまである程度の期間がある。
 * 公開した本人はGithubをほとんどわかってなく、公開してはいけないソースが公開されている状態にあることを理解していなかった。
とある気がするので、もしソースコードの公開自体をやってしまったとしても、すぐに対処できていれば、騒ぎには至らなかったと思います。

## 方法
一般公開されてほしくないリポジトリにダミーのAWSキーペアを追加します。もしくは第３者に渡っても問題なく、かつそれが使用された場合、関係者に通知されるようなAWSキーペアを一般公開されてほしくないリポジトリに追加しておきます。
AWSキーペアは、もしGithubに一般公開された場合、それを利用してくれたり、公開されていることを通知してくれる方々がいます。その通知を受けることでAWSキーペアと同時にソースコードが一般公開されていることを察することができる気がします。
実際、常にGithubをクローリングし、AWSキーペアが流出してないか調べ、見つけたら実際に利用するという有難い人たちが存在するそうです。またAWS、Githubも、キーペアが公開されていると教えてくれるそうです。


参考 GitHub に AWS キーペアを上げると抜かれるってほんと？？？試してみよー！
https://qiita.com/saitotak/items/813ac6c2057ac64d5fef

## この方法の問題点

git-secretsなどのツールと競合します。


## というか
筆者が題名のようなことをやるまともな方法を知らない

この記事の後にLeakCopというサービスが発表。サービス開始は3月を予定だそう。料金などそれ以上の詳細は記事に書いてないので不明です。
https://news.allabout.co.jp/articles/o/27641/