OmniAICreator/Qiita-1.07M huggingface dataset:
【AWS】aws-vaultを使ってCredentials, Access Keyを管理する

今回はDjangoではなく、AWSがテーマです。

IAMユーザーでCredential情報を管理するにはどうしたらいいでしょうか？

CSVファイルをダウンロードして独自に管理するのは手間がかかるし、もしダウンロードしっぱなしにしてCSVファイルの存在を忘れた頃にPCがハッキングされる。なんてことがあったらたまりませんよね。

そこで、今回は__aws-vault__を使って管理しやすい環境を作っていこうと思います。

## aws-vaultとは？
aws-vaultは、AmazonのSTS(Security Token Service)APIを使った、Credentialsの管理ソフトウェアです。

AWSユーザー認証にこのTokenを使うことで、認証に__最大12時間の有効期限__をつけることができ、セキュリティが高まるというメリットがあります。また、CSVファイルなどを管理する手間も省けます。

## aws-vaultをインストールする
MacOSでHomebrewを使っている方は、

```terminal
$ brew install --cask aws-vault
```
その他の方は、公式の[github aws-vault](https://github.com/99designs/aws-vault#installing)をご覧ください。

## Access Keyをaws-vaultに保管する
以下の操作はCLIで行います。
`add`コマンドで、aws-vaultにIAMユーザーを登録します。

```terminal
$ aws-vault add ここにiamのusernameなどを記入
```
そうすると、Access Keyを聞かれるので、IAMのコンソールから保存したいAccess KeyのIDをコピーしてペーストします。

ちなみに初めて使う場合は、その前にaws-vault自体のパスワードを設定する画面が出るはずです。

```terminal
Enter Access Key ID: ここにペースト
```
その後、実際のSecret Access Keyを聞かれるので、IAMコンソールでshowを押してコピペして、ペーストします。

```terminal
Enter Access Key: ここにペースト
```

以上で`add`は完了です!

## MFAなどの設定
```add```コマンドによって、~/.aws/configファイルに[profile 入力したusername]のセクションが生成されています。ここにIAMユーザーのデフォルトの設定を記入することができます。

```~/.aws/config
[profile username]
region=ap-northeast-1
mfa_serial=arn:aws:iam::0123456789:mfa/iam.username
```
のように編集して、デフォルトのリージョンを設定したり、MFAのarnコードを保存しましょう。

細かい設定などは、[github aws-vault Usage](https://github.com/99designs/aws-vault/blob/master/USAGE.md#usage)を確認してください。

## 実際にaws-vaultを使って認証用Tokenを生成する

`exec`コマンドを使って、一時的な認証を行います。このコマンドによって、terminalのセッションに、aws-vaultが生成したCredentialが保存されます。

```terminal
$ aws-vault exec taichi.masuyama --duration=2h
```
--duration オプションをつけて認証情報の有効期限を設定できます。最大で12時間(12h)です。

MFAを設定した方は、MFAのコードが要求されるので、AuthyなどのMFAを設定したデバイスでコードを確認して入力してください。

```terminal
Enter token for arn:aws:iam::0123456789:mfa/iam.username: ここにコードを入力
```
これで、環境変数に認証に必要な変数がセットされています。`export -p`などで確認してみてください。

また、

```terminal
$ aws-vault list
```
で現在セッションに存在するユーザーや、残り時間を確認することができます。

## 終わりに
IAMのAccess KeyをCSVファイルで管理するのにはリスクもコストも伴います。aws-vaultはそれを簡単に解決してくれました。

## 参考
https://github.com/99designs/aws-vault#installing

https://github.com/99designs/aws-vault/blob/master/USAGE.md#usage
値渡しと参照渡し

```py
#参照渡し
i = [1,2,3,4,5]
j = i
j[0] = 100 #jを書き換えるとiも書き換わる
print('j=', j)
print('i=', i)

x = [1, 2, 3, 4, 5]
y = x.copy()
y[0] = 100 #この場合はxは書き換わらない
print('y=', y)
print('x=', x)

#値渡し
X = 20
Y = X
Y = 5
print(X)
print(Y)
```
実行結果：

```txt
j= [100, 2, 3, 4, 5]
i= [100, 2, 3, 4, 5]
y= [100, 2, 3, 4, 5]
x= [1, 2, 3, 4, 5]
20
5
```
お問い合わせフォーム~HTML側~

今回はお問い合わせフォームの実装を行います。

完成版はこちらです。

![スクリーンショット 2021-04-24 9.09.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/9579d60a-10f5-b130-5d64-ebc14a34ee2a.png)

見た目がダサいのは、ご容赦ください😅

# HTML
HTML側での実装はこのようになります。

```index.html
  <div class="header">
    <div class="header-logo">お問い合わせフォーム</div>
  </div>

  <form class="info" action="#" method="post">
    <dl class="contact">
      <dt>お名前</dt>
      <dd><input type="text"></dd>
      <dt>メールアドレス</dt>
      <dd><input type="email"></dd>
      <dt>電話番号</dt>
      <dd><input type="tell"></dd>
      <dt>パスワード</dt>
      <dd><input type="password"></dd>
      <dt>ご意見</dt>
      <dd><textarea></textarea></dd>
      <button type="submit">送信</button>
    </dl>
  </form>
```

①　description list (dlタグ)　
このタグは、情報がセットのものをさします。
②　description term　(ddタグ)
このタグは、項目を指します。
③　description,definition (ddタグ)
このタグは、内容を指します。
①〜③までの情報をformタグで囲みます。このタグで囲むことで、returnキーで送信することができます。

actionでは、送信されるURLを指します。今回は送り先は決まってないので、#とします。また、methodで送信形式を定めます。

以上で、HTML側の実装は終わりです。
次にJS側での実装を進めていきます。
【JAVA】整数型の標準入力の受け取り方による速度の比較

数値の標準入力の受け取り方で最初から数値型として受け取るのと、
後から型変換するのでどのくらい違いがあるのか気になったので調べてみた。

#使用したコード

```ruby:int型で受け取ったコード
import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        int num = sc.nextInt();
    }
}
```

```ruby:後から型変換したコード
import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        String first_row = sc.next();
        Integer num = Integer.parseInt(first_row);
    }
}
```

#結果

標準出力:123456

| コード     |       int型受け取り |       後から変換 |
|:----------------:|:-----------------:|:-----------------:|
| 実行時間(ms)             |              117 |              109 |
| メモリ(KB)           |            11708 |            11188 |


#まとめ
後から型変換を行う方がメモリを消費するかと思っていたが、今回のテストではint型で受け取った方がやや多く消費しているくらいだった。
今回のテストを見る限りだとそこまで気にしなくてもよさそうだが、最初からint型で受け取った方が変数の数は減るので変数の数が多くなってくれば逆転するのではないかと思う。
リストのメソッド

```py
r = [1,2,3,4,5,1,2,3]
print(r.index(3)) #3を検索して最初のインデックスを返す
print(r.index(3, 3)) #start=3 で検索

print(r.count(3))

r.sort()
print(r)
r.sort(reverse=True) #降順で並び替え
print(r)
r.reverse()
print(r)

s = 'My name is Mike.'
to_split = s.split(' ')
print(to_split)

x = ' '.join(to_split) #スペースで結合
print(x)
```
実行結果：

```txt
2
7
2
[1, 1, 2, 2, 3, 3, 4, 5]
[5, 4, 3, 3, 2, 2, 1, 1]
[1, 1, 2, 2, 3, 3, 4, 5]
['My', 'name', 'is', 'Mike.']
My name is Mike.
```
Windows10 Hone Insider Preview ビルド21364でWSLが起動できない

#1.問題の事象

Windows10 Hone Insider Preview ビルド21364に更新後，WSLでUbuntu 20.04 LTSを起動しようとすると「パラメータが間違っています」とエラーが出て起動できない問題が生じました．

#2.対処方法

C:\Users\ユーザ名\.wslconfig内に下記を記述して解決しました．
Ubuntu 20.04 LTSの再インストールが必要な場合もあるかもしれません．

```
[wsl2]
guiapplications=false
```

#3.関連リンク

* [WSL2 - Windows 19041.264 - WslRegisterDistribution fails with error 0x80070057 - Incorrect parameter](https://github.com/microsoft/WSL/issues/5293)
* [WSL2 distro not starting since 21364 build #6839](https://github.com/microsoft/WSL/issues/6839)
(小ネタ)Nextjsでreact-simplemde-editorを利用する

# 概要
Nextjsでマークダウンエディタを作成するため、`react-simplemde-editor`を利用したところ、SSRでは正しく動作しなかったため、CSRで動作させた際のメモです。

## 日時
2021年4月23日（金）

## 環境

- OS : macOS BigSur 11.2.2
- node.js : 12.13.1
- React : 16.12.0
- next: 10.0.7
- react-simplemde-editor(EasyMDE) : 4.1.3
- @codemirror/next: 0.16.0
- codemirror: 5.61.0
- codemirror-node": 0.1.0

# エラー内容
`react-simplemde-editor` を利用しているページに遷移すると、以下のようなエラーが発生する。
これはSSR(Server Side Rendering)をする際に、ブラウザ側にしか存在しないグローバルオブジェクト（navigatorやwindow）を参照しようとすると、発生するエラーです。

```console
Server Error
ReferenceError: navigator is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
```


# 解決策: Dynamic Importを使う
Dynamic Importで動的にモジュールを読み込むことがで、この問題を解決できます。

NextjsにはdynamicというモジュールでDynamic Importを利用でき、オプションでSSRを使用しない設定が可能です。
`react-simplemde-editor`をSSRなしで、Dynamic Importで読み込むことで、問題の解決ができます。

参考

https://nextjs.org/docs/advanced-features/dynamic-import

一方、`react-simplemde-editor`をDynamic Importしても、`EasyMDE`の静的メソッドを呼び出そうとするとエラーとなります。

```typescript:コンポーネントEditorの抜粋
import EasyMDE from "easymde";

export const Editor: React.FC<Props> = (props) => {

  const [instance, setInstance] = useState<EasyMDE>();

  const getInstance = (instance: EasyMDE) => {
    setInstance(instance);
  };

  const insertCodeMde = () => {
    if (!instance) return;
    EasyMDE.toggleCodeBlock(instance);  // ここでエラーが発生します
  };

  return (
    <>
      <SimpleMDE
              id="editor"
              className="editor"
              getMdeInstance={getInstance}
              onChange={props.onChange}
     />
    </>
  );

```

最終的には、`react-simplemde-editor`および、`EasyMDE`を呼び出しているコンポーネントをDynamic Importで呼び出すことで、エラーを解決しました。

```typescript:post/new.tsx
import dynamic from 'next/dynamic'

const Editor = dynamic(() => {
  const promise = import("@/components/parts/Editor").then((r) => r.Editor);
  return promise;
}, { ssr: false });
```

# まとめ
NextjsではSSRによるエラーがよく発生しますが、Dynamic Import + SSRなしの設定とすることで、問題を解決することができます。
リストの操作

```py
>>> l = [1,2,2,3,4,5,6,7,8,9]
>>> l.append(10)
>>> l
[1, 2, 2, 3, 4, 5, 6, 7, 8, 9, 10]
>>> l.insert(0,100)
>>> l
[100, 1, 2, 2, 3, 4, 5, 6, 7, 8, 9, 10]
>>> l.insert(2,200)
>>> l
[100, 1, 200, 2, 2, 3, 4, 5, 6, 7, 8, 9, 10]
>>> l.pop()
10
>>> l
[100, 1, 200, 2, 2, 3, 4, 5, 6, 7, 8, 9]
>>> l.pop(0)
100
>>> l
[1, 200, 2, 2, 3, 4, 5, 6, 7, 8, 9]
>>> l.pop(1)
200
>>> l
[1, 2, 2, 3, 4, 5, 6, 7, 8, 9]
>>> del l[0]
>>> l
[2, 2, 3, 4, 5, 6, 7, 8, 9]
>>> del l[3]
>>> l
[2, 2, 3, 5, 6, 7, 8, 9]
>>> del l
>>> l
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
NameError: name 'l' is not defined
>>> l = [1,2,2,2,3,4,5]
>>> l.remove(2)
>>> l
[1, 2, 2, 3, 4, 5]
>>> l.remove(2)
>>> l
[1, 2, 3, 4, 5]
>>> l = []
>>> l
[]
>>> a = [1,2,3,4,5]
>>> b = [6,7,8,9,10]
>>> x = a+b
>>> x
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
>>> a.extend(b)
>>> a
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
````
Python3での文字列から文字を検索し何番目の文字かを取得する処理

Python3で、文字列から文字を検索し、何番目の文字かを取得する処理のコードです

```Python
#文字列を入力する
input_line1 = input()
#検索したい文字を入力する
input_line2 = input()
#検索したい文字が0番から数えて何番目か取得する
num = input_line1.find(input_line2)
#検索したい文字が何番目か表示する（0番目から始まっているので1を足す)
print(num+1)
```

文字列でも配列でも0番目から始まることに注意して1番最後の行に1を足します。
systemd を用いたアクセス制御・ファイアーウォール

systemd には [IPAddressDeny と IPAddressAllow](http://0pointer.net/blog/ip-accounting-and-access-lists-with-systemd.html) という機能があるので、それを用いて特定のサービスやソケットのアクセス制御をする話題です。Linuxでは通常 `iptables`, `nftables`, `firewalld`, `ufw` などで行われる処理です。防御する機器はインターネットに直接接続されていて（例えばIPv6アドレスを割り振られている場合や固定IPv4アドレスサービスを契約している場合など）、その機器で防御手段を講じないと攻撃され放題になる状況を想定しています。

# 制御したサービスの特定
まず `lsof -i | fgrep LISTEN | fgrep '*'` で現在全世界に対して開いているポートを探します。以下実行例

```shell-session
root@raspi4b-router:~# lsof -i | fgrep LISTEN | fgrep '*'
systemd      1            root  256u  IPv6  15487      0t0  TCP *:9090 (LISTEN)
sshd       579            root    3u  IPv4  12942      0t0  TCP *:ssh (LISTEN)
sshd       579            root    4u  IPv6  12944      0t0  TCP *:ssh (LISTEN)
dnsmasq    584         dnsmasq    7u  IPv4  17425      0t0  TCP *:domain (LISTEN)
dnsmasq    584         dnsmasq    9u  IPv6  17427      0t0  TCP *:domain (LISTEN)
pmcd       805             pcp    0u  IPv4  13066      0t0  TCP *:44321 (LISTEN)
pmcd       805             pcp    3u  IPv6  13067      0t0  TCP *:44321 (LISTEN)
pmproxy    850             pcp   15u  IPv4  17695      0t0  TCP *:44322 (LISTEN)
pmproxy    850             pcp   16u  IPv6  17696      0t0  TCP *:44322 (LISTEN)
pmproxy    850             pcp   17u  IPv4  17697      0t0  TCP *:44323 (LISTEN)
pmproxy    850             pcp   18u  IPv6  17698      0t0  TCP *:44323 (LISTEN)
pmlogger  1648             pcp    7u  IPv4  21511      0t0  TCP *:4330 (LISTEN)
pmlogger  1648             pcp    8u  IPv6  21512      0t0  TCP *:4330 (LISTEN)
```

# systemdによるIPアクセス制御

これで、全世界に向かってポートを開いているサービスは `ssh`, `dnsmasq`, `pmcd`, `pmproxy`, `pmlogger` であることがわかります。またsystemdがポート9090で待ち受けして何らかのサービス（実はcockpit）を起動しています。ここでsshはそのまま全世界にポートを開き、残りは`localhost` と `192.168.1.0/24` だけ通信を許すことにします。以下のコマンドを`root`で実行します。

```shell
cd /etc/systemd/system
mkdir dnsmasq.service.d pmcd.service.d pmproxy.service.d pmlogger.service.d
cat >dnsmasq.service.d/ipfilter.conf <<EOF
[Service]
IPAddressAllow=localhost
IPAddressAllow=192.168.1.0/24
IPAddressDeny=any
EOF

ln dnsmasq.service.d/ipfilter.conf pmcd.service.d
ln dnsmasq.service.d/ipfilter.conf pmproxy.service.d
ln dnsmasq.service.d/ipfilter.conf pmlogger.service.d
```

これでポート9090以外の待ち受けは`localhost`ならびにLANに制限できました。のこりはsystemdが待ち受けしているポート9090の対応ですが、これは`cockpit.socket`が待ち受けの設定をしています。そこで以下のコマンドを実行します。

```shell
cd /etc/systemd/system
mkdir cockpit.socket.d
cat >cockpit-socket.d/socket-ipfilter.conf <<EOF
[Socket]
IPAddressAllow=localhost
IPAddressAllow=192.168.1.0/24
IPAddressDeny=any
EOF
```

これで設定は終わったので `systemctl reboot` で機器を再起動します。

# systemd socketファイルの安全な書き方
自作のプログラムを特定のTCPポートで待ち受けさせるときはsystemdの`ListenStream`を用いますが、ここで `ListenStream=64193` などと書くと全世界から待ち受けしてしまいます。LAN側だけで待ち受けしたくて、LAN側のIPアドレスが`192.168.1.2` なら`ListenStream=192.168.1.2:64193`と書くとWAN側からの接続要求を無視します。しかし、待ち受けがLAN側IPアドレスの設定以前に開始されるとエラーになるため、`FreeBIND=yes`もsystemd設定ファイルに書きます。まとめると、例えば以下のようなsystemd socket待ち受けファイルを作るとよいです。

```/etc/systemd/system/testhttp.socket`
[Socket]
FreeBind=yes
ListenStream=192.168.1.2:64193
Accept=yes

[Install]
WantedBy=socket.target
```
【初心者】名前解決って何なの？

#IPアドレス
IPアドレスと呼ばれる識別番号が端末やネットワーク機器に割り当てられている。
現在広く使われているIPv4では、IPアドレスは2進数32ビットで表現され、ネットワーク番号とホスト番号で構成されている。2進数では見づらいため8ビット区切り、10進数へ変換して表される。
![ip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/60f05ec4-8681-8860-5dae-a1bc814e902e.png)

この図でいう`248.100.196.50`が__IPアドレス__という。さらにこれをさらに人間に分かりやすくするために、アルファベットと数字や記号などで別名をつけたものを__ドメイン名__という。例えば、「www.qiita.co.jp」などである。

#DNS
Domain Name Systemの略。IPアドレスとドメイン名は一意に紐付ける必要があり、これを__名前解決__という。この名前解決を行うもののうち最もよく利用されているのが「DNSによる名前解決」である。

それを行うサーバーをDNSサーバーという。利用者がDNSサーバーへ問い合わせた際、相互に連携しているDNSサーバー同士が、それぞれ所有している情報を元に処理を行う階層構造になっている。

ホスト名（ドメイン名）からIPアドレスを求める操作を「正引き」、IPアドレスからホスト名(ドメイン名)を求める操作を「逆引き」という。

（DNSの構造は、図を見れば理解が容易なので、こちらをご参考にされてください。）
>https://www.kagoya.jp/howto/rentalserver/dns-server/

#FQDN
Fully Qualified Domain Nameの略。直訳すると「完全修飾ドメイン名」。「ホスト名+ドメイン名」を指す。つまりホストとドメインを合わせた情報を持つもの。


![fqdn1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/996ea892-fe6b-07a5-0dbb-5c37e19616d8.png)

* ホスト名・・・ネットワーク上のコンピュータを特定する
* ドメイン名・・・インターネット上のネットワークを特定する
* __FQDN・・・インターネット上の特定のコンピュータを特定する__

##ドメインツリー
ドメインの親子関係、つまり縦のつながりを持っているのを「ドメインツリー」という。

![fqdn2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/36481468-2ad5-28f1-5407-151bd011f79a.png)

例えばこの図では、「jp」というドメインによって「co.jp」というドメインが管理されているという構図になる。
同様の仕組みで管理しているため、最後にはホストであるコンピュータまでたどり着くというツリー構造になっている。
【COVID-19】なんとか型、変異株って放送するのまじでやめろ

# 要点

COVID-19の変異株を「なんとか型」と言って放送するのマジでやめろって話.


## Qiitaに書く内容じゃない

そんなこと知ってる.
ただ,私が何一つとしてSNSをやっていないことからここに書かせてください.本当にすみません.

だからあくまで「*型やめろ」という画期的なプログラムを`C++`で開発したって名目を保ちたい.

こちらが私が開発した画期的なプログラムの「*型やめろ」だ.

```cpp:main.cpp
#include <iostream>
using namespace std;

int main(void)
{
    cout << "*型やめろ" << endl;
}
```
 
# 違和感

私のほかの日本国民がどのように感じるのか知らないが,個人的に「なんとか型」とか「どこ産変異株」とか放送されることにとても違和感を感じる.

違和感の原因は**印象**だ.例えば,私は**どこどこ産変異株**に対して,あたかも**どこどこ**という地名が悪いみたいな印象を少なからず受ける.こんなの絶対間違ってる.

だって,意図して変異株を作ったわけではないだろ？おかしいだろそんなの.

いや,意図して作ってたらテロだよそんなの.明らかにおかしい.

## メリット

確かにいままで「なんとか型」って報道された理由もわからなくもない.
素人である一般市民にとって「なんとか型」はその特徴を理解する分類方式として優れているかもしない.

+ 「なんとか型変異株は感染力が非常につよい.」
+ 「なんとか変異株はワクチンが効きにくい.」

まあ確かにわかりやすいかもね.

だったら、インフルエンザはどうして「A型」「B型」なんだ.そのインフルエンザは「新潟県産か？（私の出身地）」ふざけてるよ.
もちろんコロナの識別番号`B16なんとか`とかで一般市民も識別しろとかは言わないよ.

ただね,悪印象を与えるようなことしなくてもよくない？と思うわけである.

## 解決策

じゃあ、どうやって放送したらいいのか...

みんなで考えようよ.コメントしていただけるとありがたいです!


# 終わりに

どうですか？私が作成した**画期的なプログラム**は最高に洗練されているとは思いませんか？
あくまで「*型やめろ」というプログラムに関する記事ですよ？

（学生の分際で小言を呈しました。本当にすみません。）
【TwitterAPI】アプリの削除方法

またまたどうもカラボンです。
今回はメモ用ですがアプリの削除方法をメモって行きたいと思います。

<h3>1.<a href="https://developer.twitter.com/en/portal/dashboard">Twitter Developers</a>でアプリを選択する。</h3>

<h3>2.アプリのEditを押す</h3>

<h3>下にDeleteがあるのでこれで消せる</h3>

これでヨシ！
CSS単位(px, em, rem, %, vh, vw...)を理解する

# 概要

CSS単位でよく見かけるpx, em, rem, %, vh, vwを明確に理解し使い分けられるよう、それぞれの違いと使い分け方(筆者が目安にする基準・個人の意見)に関してまとめました。

同様な記事は既にネット上に多く存在しますが、自分の理解もかねて改めてまとめてみました。

# CSS単位の分類

CSS単位は大きく下記の2つに分類する事が可能です。

1. 他要素や画面サイズに影響を受けず常に固定値を持つ`絶対値の単位(Absolute Units)`
2. 他要素の単位・大きさや画面サイズに応じて可変的な値となる`相対値の単位(Relative Units)`

# 絶対値の単位(Absolute Units)

## px

ピクセル(pixel)の略で上記で記しました通り、他要素や画面サイズに影響を受けず常に固定値を持つ`絶対値の単位(Absolute Unit)`です。

# 相対値の単位(Relative Units)

## em

親要素の`font-size`を1とした倍率を指定します。

例としまして、下記ですと`.parent`の`font-size`が10px、`.child`の`font-size`が0.5emで指定されています。

この場合の`.child`の`font-size`をpxで表すと、親要素の10pxを1としての表すので、`10 * 0.5 = 5 px` となります。

```css
.parent {
  font-size: 10px;
}

.child {
  font-size: 0.5em; /* 10 * 0.5 = 5 px */
}
```

直属の親要素に`font-size`が指定されていない場合、さらに上位へと遡っていきます。どの親要素にも明示的に指定されていない場合、最終的にbodyのデフォルトの`font-size`である16pxを基準とします。

## rem

rootの`font-size`を1とした倍率を指定します。

例としまして、下記ですと`:root`の`font-size`が10px、`.text`の`font-size`が1.2remで指定されています。

この場合の`.text`の`font-size`をpxで表すと、rootの10pxを1としての表すので、`10 * 1.2 = 12 px` となります。

```css
:root {
  font-size: 10px;
}

.text {
  font-size: 1.2rem; /* 10 * 1.2 = 12 px */
}
```

## %

emと似ていますが、%ではプロパティによって基準値が変わります。

例えば、`height` や`margin`等で%が使用された場合は親要素の`height`や`margin` の値を基準値にとります。

`font-size`であれば親要素の`font-size`を基準値にするのでemと同じとなります。

## vh(Viewport Height)・vw(Viewport Width)

`vh`と`vw`はそれぞれ、ビューポートの高さとビューポートの横幅を表します。

ビューポートとはブラウザ等で現在表示されている領域を表します。(※ビューポートに関してより詳しくは[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts))

`vh`・`vw`ではビューポートの高さ・横幅を100として表します。その為、1vhであればビューポートの高さの1%、1vwであればビューポートの横幅の1%となります。

# それぞれのCSS単位使い分け

下記はあくまでも筆者が目安にする基準であり、個人的な意見である事を前提とさせて頂きます。

| CSS単位      |用途 |
| ----------- | ----------- |
|px      | borderやboxshadowやoutline等の他要素に関わらず常にサイズが一定のもの     |
|%   | htmlタグでのフォントサイズの指定 <br> heightやwidthなど    |
|rem|margin/padding/font-sizeなど|
|em|メディアクリ<br> remと同じ用途で親要素を基準にしたい場合(頻度は少ない)|
|vh・vw|全体的なレイアウトで%の代わりに使用する場合もある|


https://gist.github.com/basham/2175a16ab7c60ce8e001

# その他の単位

絶対値の単位には他にも`cm`・`mm`・`in`・`pt`・`pc`等が存在します。

相対値の単位には他にも`ch`・`ex`・`vmin`・`vmax`等が存在します。

# 参考

- [Should I use px or rem value units in my CSS?](https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css)
- [When to use which units in CSS](https://daveredfern.com/use-units-css/)
- [CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained](https://www.freecodecamp.org/news/css-unit-guide/)
- [The difference between CSS units (px, pt, rem, em, vh, vw, ch, ex and the rest)](https://medium.com/level-up-web/the-difference-between-css-units-px-pt-rem-em-vh-vw-ch-ex-and-the-rest-b2cfdf069230)
- [📝ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い｜たかもそ／Web Creator.｜note](https://note.com/takamoso/n/nde1275183086)
- [What's The Difference Between PX, EM, REM, %, VW, and VH? | Elementor](https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/)
- [CSSの単位のpx・em・rem・vh・vwの違いと使い方](https://kt-life.net/css-tani/)
- [Guide: EM vs REM vs PX. Which should you use?](https://engageinteractive.co.uk/blog/em-vs-rem-vs-px)
- [CSS Units Best Practices](https://gist.github.com/basham/2175a16ab7c60ce8e001)
ずっとFPGA初心者（その８：外部入出力）

## 外部入出力を確認
今回は、FPGAというより、 いつも使っている[ボード(その１参照)](https://qiita.com/infinite1oop/items/4b0f03b97ed859fbd954)である[Odyssey MAX10 FPGA Eval Kit](https://www.macnica.co.jp/business/semiconductor/macnica_products/boards/121161/)の外部入力ピンが動作することを確認する。

## 外部入出力コネクタ情報
[Odyssey MAX10の回路図](https://www.macnica.co.jp/business/semiconductor/macnica_products/max10_board_revb1p04__1.pdf)から、ピン情報を引用。
![コネクタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/3ed41fe5-32ba-6c06-4006-e06b6018eb50.png)
ここでは、DIGITAL12（J4コネクタのPin1）とGND（J3コネクタのPin14）とを用い、前者にLEDを接続する。

## MAX10のピンアサイン情報
同回路図から、DIGITAL12は、MAX10のF12にアサインされていることがわかる。
![回路図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/d9ca4c11-6f73-fbe0-d991-60c893d4e6b5.png)
また、ボードのボタン１（PB1）も使う。これは、MAX10のJ12にアサインされている。

## 確認内容
ボードのボタン１を押したら、外部に接続されたLEDが点灯、、というシンプルなもの。

### VHDLコード
```vhdl:ExtLed.vhd
library ieee;
use ieee.std_logic_1164.all;

entity ExtLed is
 port (
   BUTTON:	in std_logic;
   EXTLED: 	out std_logic);
end ExtLed;

architecture rtl of ExtLed is
begin
	EXTLED <= not BUTTON;  -- '0':Off  '1':On
end rtl;
```

ほぼ自明のため、解説省略。

### Quartusでのピンアサイン
![PinPlanner1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/81f9f6a2-014c-7a6c-aaad-d3ce699aabbc.png)
こちらも自明。

### 実験
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634816/b06e0dcd-ae47-46c3-190c-e7022bcf3c72.jpeg", width=70%>

成功。

### おまけ
DIGITAL12(F12)ではなく、ANALOG_SIG1(D1)やLVDS_CLK(H5)にLEDを接続しても点灯。
【Rails × React】うわ…Railsのcreated_at、汚すぎ…！

Rails × React SPAの作成にあたり、投稿日時をフロントで表示したくなった。
Railsではデフォルトでcreated_at、というカラムが生成されるのでこれをうまくビューで表示したい。
というのもrailsのcreated_atはUTC時刻でdatetime型なので以下のように画面上にそのまま表示するとキモい
![MyRecommendedBooks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/4495e234-18ea-fcc4-409b-4051d950e475.png)
よってこれをなんとかしたい。

## 結論…momentを使おう

以下サイト参考にさせていただきました。
https://ryusou.dev/posts/react-day-momentjs

### 手順①…momentのインストール

以下のコマンドを実行

```
npm install moment
```

### 手順②…momentの読み込み

以下の記述をmomentを読み込みたいjsxファイルに記述

```jsx
import moment from moment
```

### 手順③…日付を表示したい箇所でmomentを呼び出す

```jsx
{this.state.outputs.map((output, output_index) => {
  return(
    <li key={output_index}>
      <h3>アウトプット{output_index+1}</h3>
      <h4>気づき</h4>
      <p>{output.awareness.content}</p>
      {output.action_plans.map((action_plan, action_plan_index) => {
        return(
          <div className="action-plan" key={action_plan.id}>
            <h4>アクションプラン{action_plan_index +1}</h4>
            <p>{action_plan.time_of_execution}{action_plan.what_to_do}{action_plan.how_to_do}</p>
          </div>
        )
      })}
      <p>投稿日：{moment(output.awareness.created_at).format('YYYY-MM-DD')}</p>
    </li>
  )
})}
```

今回は読書のアウトプット一覧にて、気付きとアクションプランを表示する箇所に実装。

```jsx
<p>投稿日時：{moment(output.awareness.created_at).format('YYYY-MM-DD')}</p>
```

この部分でmomentを使用。書き方としては

```jsx
moment(日付データ).format('表示したいフォーマット')
```

の形式になる。

## 実装結果

これで以下のようにcreated_atから日付だけを抜き出すことに成功。
日付もちゃんとUTCとのずれが修正されているし、見た目としてもとても見やすくなった。
![MyRecommendedBooks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/e95fa6aa-551c-715f-ec7a-eeeacaf4b653.png)
Vue.js テンプレート構文メモ

Vue.jsについて勉強したことのメモです

#テンプレート構文
Vueインスタンスのデータと描画されたDOMを宣言的に対応させることができる
HTMLではない

##テキスト
Mustache構文を利用したテキスト展開

```vue
<p>{{ message }}</p>
```

Mustache構文ではJavaScriptの単一の式も使える

```vue
<!-- scriptのdata内でokをtrueかfalseに設定 -->
<p>{{ ok ? 'Yes' : 'No' }}<p>
```


##ディレクティブ
v-から始まる属性

###v-bind
属性を対応付けられる
オブジェクト形式で書ける
v-bind:は:で省略可

```vue
<a v-bind:href="url"> ... </a>
```

###v-on
イベントを受け取れる

```vue
<button v-on:click="countUp">カウント</button>
```

###v-model
画面とデータのどちらでもデータを流すことができる双方向データディバイディングを書ける

```vue
<input type="text" v-model="message">
```
【覚書】preactをモジュールで使用かつVSCodeで補完を効かせる構成

軽いスケッチで GitHub Pages に簡単なページを載せるために、
HTML + JS のシンプルな構成で preact + htm が使いたいと思ったけど、
モジュール でコーディングすると VSCode で補完が効いてくれないので、
あるていど開発しやすくなる構成を考えてみた。

## 事前操作

### VSCode

```
ext install bierner.lit-html
```

### Term

```
npm init -y
npm i -D preact htm
```

## .gitignore

```
node_modules/
```

## preact.js

preact のインテリセンスを効かせたりする用。

hooks を使うときは `const { useState } = hooks;` みたくする。
オリジナル関数 `cp` は、コンポーネントの props の入力補完を補助するためのもの。

```js
import {
  html as _html,
  render as _render,
} from "https://unpkg.com/htm/preact/index.mjs?module";
import * as _hooks from "https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module";

/** @type {import("htm/preact")} */
const html = _html;
/** @type {preact["render"]} */
const render = _render;
/** @type {import("preact/hooks")} */
const hooks = _hooks;

const cp = (component) => (props, children) =>
  html`<${component} ...${props}>${children}<//>`;

export { html, render, hooks, cp };
```

## types.d.ts

TypeScript を使ってなくても、VSCode が JSDoc で評価してくれる仕組みを利用する。

```ts
type CP<C> = (
  props: C extends (props: infer R) => any ? R : never,
  children?: any
) => any;
```

## index.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="./index.js"></script>
  </head>
  <body></body>
</html>
```

## index.js

htm のテンプレートリテラルでは通常、props の入力補完は効かないが、
`@type {CP<typeof ComponentName>}` と `cp` を使うことで、
コンポーネントの props の入力補完を効かせた上でコンポーネントを指定できる。

```js
import { html, cp, render } from "./preact.js";
import App from "./App.js";

/** @type {CP<typeof App>} */
const cpApp = cp(App);

render(html`<h1>${cpApp({ name: "World" })}</h1>`, document.body);
```

## App.js

```js
import { html } from "./preact.js";

/**
 * @param {Object} props
 * @param {string} props.name
 */
export default ({ name }) => {
  return html`Hello <i>${name}</i> !`;
};
```

---

以上。こうすれば *.js であれば補完が効いてくれる。

ただし、ちゃんと厳密に型を決めてやりたいなら、素直に TypeScript 使ったほうがいい。
あくまでスケッチ向け。
cloud build の設定方法メモ書き

GCPでCI/CDを検討していて、Cloud buildついて調べたのでまとめたいと思います。

# 概要
Cloud build はGCPが提供するフルマネージド型のCI/CDで,特定のイベントに対して自分の処理を差し込みCI/CDを実現します。
また、githubなど既存のrepositoryと連携させたり、CLoud Source REpositoryなどのGCP上のリポジトリにも連携させることができます。


# イベントの設定方法
イベントの設定方法はシンプルでgithubでの連携だと

![スクリーンショット 2021-04-24 6.09.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179800/79bb8622-87bc-3c11-7d49-2d3d1b122512.png)

対象リポジトリに対して 
* 特定のブランチに対してpushされた時、
* tagがpushされたとき
* pull request

になります。

また詳細な設定として

![スクリーンショット 2021-04-24 6.13.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179800/f199e977-4b4f-b92f-6455-1e4590cb0520.png)

* ビルド設定ァイルの指定
* ビルド設定ファイルの置き場所
* 代入変数

などの指定が行えます。

代入変数とは、設定ファイルで使いまわしたい値をKEY-VALUEの形で登録しておき、ビルドファイルにKEYを入れると、VALUEが展開される機能です。

ここで注意なのですが、Cloud buildが言うビルドとは、ビルド設定ファイルに書かれている処理を実行することであり、ソースを実際にコンパイルすることではないです。
なので、CI/CDの処理の記述はビルドファイルに記載することになります。

# 設定ファイルの書き方
ビルド設定ファイルはyaml,jsonから選べます。
全体の値は下記の通りです。

```yaml
steps:
- name: string
  args: [string, string, ...]
  env: [string, string, ...]
  dir: string
  id: string
  waitFor: [string, string, ...]
  entrypoint: string
  secretEnv: string
  volumes: object(Volume)
  timeout: string (Duration format)
- name: string
  ...
- name: string
  ...
timeout: string (Duration format)
queueTtl: string (Duration format)
logsBucket: string
options:
 env: [string, string, ...]
 secretEnv: string
 volumes: object(Volume)
 sourceProvenanceHash: enum(HashType)
 machineType: enum(MachineType)
 diskSizeGb: string (int64 format)
 substitutionOption: enum(SubstitutionOption)
 logStreamingOption: enum(LogStreamingOption)
 logging: enum(LoggingMode)
substitutions: map (key: string, value: string)
tags: [string, string, ...]
serviceAccount: string
secrets: object(Secret)
availableSecrets: object(Secrets)
artifacts: object (Artifacts)
images:
- [string, string, ...]
```

今回は大まかn部分のみ解説します。

## step
stepは簡単に言うと処理のまとめです。この中で使うパッケージやタイムアウト、環境変数などを指定して、コマンドを実行します。

## name
これは cloud builderを指定します。cloud builderとは特定の言語のよく使うパッケージをインストールしたイメージです。javaであればgradle, rubyであればbundleといったものです。これを指定することで言語毎に使用するパッケージマネージャーを使えるようにします。

## args
これは nameで指定した環境で実行するコマンドの引数です。

## env
これは環境変数を指定します。

## サンプル
簡単なサンプルだと以下のようなものになります。

```yaml
steps:
  - name: 'spotlightcybersecurity/python-pipenv-builder'
    args: ['install']
  - name: 'spotlightcybersecurity/python-pipenv-builder'
    args: ['run','pelican','content','-o','output','-s','publishconf.py']
  - name: gcr.io/cloud-builders/gcloud
    entrypoint: gsutil
    args: ["-m", "rsync", "-R", "-c", "-d", "./output", "gs://YOURBUCKETHERE"]
```


上記のように
step -> name -> args といった形でコマンドと実行順を指定します

# 最後に
クラウドごとに思想が違うので,CI/CDや設定ファイルに特色が出ていて学ぶたびに結構を面をくらいます。
それでは良い cloud buildライフを
LinuxでK380のファンクションキーを、Fnキーを押さずに使う

Logicoolキーボード K380は、デフォルトではF1~12キーはショートカットキーに割り当てられており、
通常のファンクションキーとして使う場合は、毎回Fnキーを押す必要があり、面倒です。

WindowsLogicoolの専用アプリでF1~12キーの動作を変える事が出来ますが、Linux版での提供が無いため、別の方法が必要です。
最近ノートPCでWindows/Ubuntuのデュアルブート環境を作ったため、Ubuntu側でもK380のFnキーの動作を変えた時の備忘録です。

https://qiita.com/makisayo12/items/b740c677e021600c2c77

## 問題
F1~12キーの挙動を、デフォルトでファンクションキーにしたい。
Windowsでは[Logicool Options](https://support.logi.com/hc/ja/articles/360025297893)を入れたらOKだったが、Linuxはソフトが非対応。
## 解決

[jergusg](https://github.com/jergusg)という方が提供している[k380-function-keys-conf](https://github.com/jergusg/k380-function-keys-conf)を使えば解決できました。

### やり方

公式の手順そのままです

https://github.com/jergusg/k380-function-keys-conf

1. LinuxでK380をペアリング
   この時はF1~12キーのデフォルトはショートカットキーになっている

2. `gcc`と`make`のインストール

   ```shell
   sudo apt install gcc make
   ```

3. [Releases · jergusg/k380-function-keys-conf](https://github.com/jergusg/k380-function-keys-conf/releases/)からソースコードのダウンロード
   `/home/user/download`にSource code(tar.gz)をダウンロード

4. インストール

   ```shell
   cd /home/user/download/
   #解凍
   tar xf k380-function-keys-conf-1.1.tar.gz
   #インストール
   cd k380-function-keys-conf-1.1
   make install
   ```

5. F1〜12キーのデフォルトを変更
   /dev/直下に下記のようにhidraw*というファイルが複数あり、Linuxで認識している外部デバイスのようです。

   ```shell
   ls -l /dev/hidraw*
   crw------- 1 root root 242, 0  4月 24 05:21 /dev/hidraw0
   crw------- 1 root root 242, 1  4月 24 05:21 /dev/hidraw1
   crw------- 1 root root 242, 2  4月 24 05:21 /dev/hidraw2
   crw------- 1 root root 242, 3  4月 24 05:21 /dev/hidraw3
   crw------- 1 root root 242, 4  4月 24 05:21 /dev/hidraw4
   crw------- 1 root root 242, 5  4月 24 05:50 /dev/hidraw5
   ```

   K380を接続した日時と一致するファイルを指定して、下記コマンドを実行します。

   ```shell
   #hidraw5を指定
   sudo k380_conf -d /dev/hidraw5 -f on
   ```

6. リロード

   ```shell
   sudo make reload
   ```

これでF1~12キーのデフォルトの動作がファンクションキーに割り当てられました。
VSCodeでファイル保存時にESLintが動作しない。"(構成)からコード アクションを取得します"のポップアップが出る。

vscodeでファイル保存時にESLintが動作するように設定した。

しかしいつの間にか動作しなくなっており、保存時に下のポップアップが表示されるようになった。

![eslint.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596144/744b2ade-aaad-a8d4-204b-246cd87c12de.jpeg)

さらに赤波線によるLintエラーの警告も挙動がおかしくなっていた。

ただしコンソールからESLintを実行すると正しく動作した。

### 状況

(Prettierもファイル保存時に動作するよう設定しているが今回の問題とは関係ない)

ディレクトリ構成

```
　/
　├ .vscode/setting.json
　├ app/express/
　│　　　　　├ node_modules
　│　　　　　├ .eslintrc.js
　│　　　　　├ .prettierrc
　│         └ src/
　└ etc
```

`.vscode/setting.json`ではファイル保存時にESLintとPrettierが動作するよう設定している。

```json:.vscode/setting.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // Prettier
  "editor.formatOnSave": true,  // Prettier
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```

当然ながらESLint(とPrettier)のパッケージと拡張機能はインストール済み。

### 解決方法

`.vscode/setting.json`に設定`eslint.workingDirectories`を追加してから、VSCodeを再起動する。

```json:.vscode/setting.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": ["./app/express"] // 追加
}
```

### 解説

ESLintの設定ファイル`.eslintrc.js`はプロジェクトルートに置く必要がある。試しにプロジェクトルートに移動してみると正しく動作した。(そういえばディレクトリ構成を変更してからおかしくなった気がする)

プロジェクトルート以外に置きたい場合、`"eslint.workingDirectories": ["プロジェクトルートから.eslintrc.jsがあるディレクトリまでの相対パス"]`を追加する。
CentOSにNginxを導入

vagrantのCentOS6.10にNginxを導入する手順をメモとして残しておきます。

## 準備
yumのインストール

```
$ sudo yum install yum-utils
```
nginxリポジトリを追加

```
$ sudo touch /etc/yum.repos.d/nginx.repo
$ sudo vi /etc/yum.repos.d/nginx.repo
```

```
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
```
mainlineとstableについて( [NGINX Docs | Installing NGINX Open Source](https://docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/#stable_vs_mainline))

 - mainline 最新だがバグが含まれている可能性がある
 - stable  最新ではないが、バグ修正が含まれている安定版

追加されたか確認

```
$ yum info nginx
```

## インストール

stableを使用

```
$ sudo yum-config-manager --enable nginx-stable
```

nginxをインストール

```
$ sudo yum install nginx
```

インストールできたか確認

```
$ nginx -v
```

設定ファイル確認

```
$ cat /etc/nginx/conf.d/default.conf
```

## 起動

```
$ sudo service nginx start
```

ipアドレス確認

```
$ ifconfig
inet addr:192.168.33.10
```

デフォルトページ表示(`http://192.168.33.10`)

![スクリーンショット 2021-04-24 2.14.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619826/8a74c128-e7ab-32ea-d14a-49314ce82628.png)

終了

```
$ nginx -s stop
```

## 参考

公式サイトの通りに進めればできます。

http://nginx.org/en/linux_packages.html

http://nginx.org/en/docs/beginners_guide.html
yukicoder contest 292 参戦記

# yukicoder contest 292 参戦記

## [A 1485 運賃](https://yukicoder.me/problems/no/1485)

電車とバスの運賃を足すだけです.

```python
n, m = map(int, input().split())

print(n + m)
```

## [B 1486 ロボット](https://yukicoder.me/problems/no/1486)

*E*≦10<sup>9</sup>なので*O*(*E*)は無理だが、*F*=gcd(*A*+*B*,*C*+*D*)としたときに、*F*≦10<sup>6</sup>なので*O*(*F*)は可能. なので*F*秒間で2台のロボットが同時に動いている秒数をループで求める. あとは*E*を*F*で割ったあまりの秒数についても同様にループを回して同時に動いている秒数を求めれば、最終的な答えが求まる.

```python
from math import gcd

A, B, C, D, E = map(int, input().split())

x = (A + B) * (C + D) // gcd(A + B, C + D)
y = ([True] * A + [False] * B) * (x // (A + B))
z = ([True] * C + [False] * D) * (x // (C + D))

c = 0
for i in range(x):
    if not y[i] or not z[i]:
        continue
    c += 1

result = E // x * c
for i in range(E % x):
    if not y[i] or not z[i]:
        continue
    result += 1
print(result)
```

## [C 1487 ぺんぎんさんかっけー](https://yukicoder.me/problems/no/1487)

3辺の長さから三角形の面積を求める公式はググればすぐ見つかる. 直感的に各辺が半分になって2次元なので2乗されて1/4となる. サンプルで答えが合ったので、直感通りのようだ.

```python
from math import sqrt

def f(a, b, c):
    s = (a + b + c) / 2
    return sqrt(s * (s - a) * (s - b) * (s - c))

a, b, c = map(int, input().split())

print(f(a, b, c) / 4)
```

## [D 1488 Max Score of the Tree](https://yukicoder.me/problems/no/1488)

ある辺の長さを2倍にするとどれだけスコアが伸びるかというと、その辺の下にぶら下がっている葉の数×辺の長さだけ増える. DFS でそれぞれの辺の下にある葉の数と最初のスコアを求め、DP で増やせるスコアの最大値を求めれば解ける.

```python
from sys import stdin

readline = stdin.readline

N, K = map(int, readline().split())
links = [{} for _ in range(N)]
for _ in range(N - 1):
    a, b, c = map(int, readline().split())
    a, b = a - 1, b - 1
    links[a][b] = c
    links[b][a] = c


def dfs(parent):
    l = links[parent]
    if len(l) == 0:
        return (0, 1)

    total_score = 0
    total_leaves = 0
    for child in l:
        del links[child][parent]
        score, leaves = dfs(child)
        total_score += score
        total_leaves += leaves
        t.append((l[child], leaves))
        total_score += l[child] * leaves
    return total_score, total_leaves


t = []
result, _ = dfs(0)

dp = [-1] * (K + 1)
dp[0] = 0
for i in range(len(t)):
    for j in range(K - 1,  -1, -1):
        if dp[j] == -1:
            continue
        a = j + t[i][0]
        if a > K:
            continue
        dp[a] = max(dp[a], dp[j] + t[i][0] * t[i][1])
result += max(dp)
print(result)
```
Laravelのテスト結果をかっこよく！

追記：以下でAllureReportのDockerコンテナを使って利用する手順を書いたので良ければ以下を参照してみてください！

https://qiita.com/ijohnny/items/f00997db85283a82e9f9

Laravelのテスト結果をこんな感じに視覚的に見たくて、導入してみました。
走り書きです:bow:

![demo.qameta.io_allure_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364182/78222dd6-5268-6679-22ec-87169948cd89.png)


環境
Windows10
Laravel 5.6.39

Allure Frameworkのallure2を利用します。

https://demo.qameta.io/allure/


# レポートツールの用意

`scoop install allure`
※Macはbrewで導入できるみたい。
> scoopの導入：https://scoop.sh/
> allure2のGitHub：https://github.com/allure-framework/allure2

# allure-framework/allure-phpunitの導入

`$ composer require --dev allure-framework/allure-phpunit`
※今回のLaravelのバージョンだと以下のバージョン
`composer require --dev allure-framework/allure-phpunit^1.4`

レポートツールのPHPUnit用アダプターパッケージ。（ほかの言語も対応しているみたい）
> allure-phpunitのGitHub：https://github.com/allure-framework/allure-phpunit

# phpunit.xmlに追記

testsuiteタグの次ぐらいにいれておく

```xml:phpunit.xml
<listeners>
    <listener class="Yandex\Allure\PhpUnit\AllurePhpUnit" file="vendor/allure-framework/allure-phpunit/src/Yandex/Allure/PhpUnit/AllurePhpUnit.php">
        <arguments>
            <string>build/allure-results</string> <!-- XML files output directory -->
            <boolean>true</boolean> <!-- Whether to delete previous results on rerun -->
            <array> <!-- A list of custom annotations to ignore (optional) -->
                <element key="0">
                    <string>someCustomAnnotation</string>
                </element>
            </array>
        </arguments>
    </listener>
</listeners>
```

※Duskのxmlにも追記

`laravel/build/allure-results`にレポートファイル（xml等）が出力される
※4行目で変更可能

> GitHubの説明：https://github.com/allure-framework/allure-phpunit#installation--usage


# 結果を視覚化

PowerShell等で、`laravel/build`に移動し、

`allure generate -c`を実行する（`-c`は`clean`オプション）

`laravel/build/allure-report`に展開される。


# 結果を見る

展開されたファイルをchromeで開くもCORSに引っかかる。
そのため、CORSを回避するためにchromeのショートカットを作成し、リンク先に以下を追記
`--disable-web-security --user-data-dir="C://Chrome dev session"`
作成したショートカットのchromeを実行して、`build\allure-report\index.html`をD&D

> 参考Qiita：https://qiita.com/shika-e/items/808ccdd047133315b95c

# テスト実装時

テストを書く際に、レポートで分かりやすくできようなアノテーションも可能で、
タイトル、ディスクリプション、重要度、パラメータ情報、ストーリー、フィーチャー、と色々あるし書いていくほうが良い。
> アノテーションの説明：https://github.com/allure-framework/allure-phpunit#main-features

***

# 参考リンクまとめ


https://scoop.sh/

https://github.com/allure-framework/allure2

https://github.com/allure-framework/allure-phpunit

https://qiita.com/shika-e/items/808ccdd047133315b95c

https://docs.qameta.io/allure/
[Nuxt]Vueでcomputedが変更を検知してくれない場合

###考えられる原因
Vueでは普通ならcomputedは依存する変数などが変化すれば自動で値も更新されるはずですが、公式ドキュメントにも書いてあるように、配列やオブジェクトの一部の変更は検知できないようです。
https://jp.vuejs.org/v2/guide/reactivity.html#%E9%85%8D%E5%88%97%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6
###解決法
今回は配列でインデックス指定で値を変更する場合について話します。Vueにおいてどう対策すればよいかは公式ドキュメントにあるので割愛します。Nuxtの場合は以下のようにします。

関数名(引数) {
    this.$set(配列名, インデックス, 代入する値)
}

もしViewの部分で直接使いたいなら、$set(配列名, インデックス, 代入する値)で結構です。
ざっくりGitの設定をする

<h2>ざっくりGitの設定をして、pushまで</h2>
win環境でざっくりとGitHubにコードをpushするまでを書きます。

なお、すでにgithubにアカウントを登録済みであることを前提としています。

<b>【環境情報】</b>
windows：64bit
エディタ：VScode
対象のファイル：Rails6.0.3の設定
<h2>1.configにユーザー名、アドレスを設定する</h2>
Gitで管理したい対象のファイルがあるディレクトリに移動した後、まず、configの設定をします。

```
#ユーザー名を登録する
git config --global user.name "ユーザー名"

#メールアドレスを登録する
git config --global user.email "メールアドレス"

```

その後、以下コマンドでローカルリポジトリを作成して、ローカルリポジトリにファイルをコミットしておきます。

```
#gitのリポジトリを作成する
git init

#リポジトリに対象ファイルを追加する
git add -A

#リポジトリにファイルをコミットする
git commit -m "newRepo"
```

<h2>2.GitHubで新しいリポジトリを作成する</h2>

次に、<a href="https://github.com/">GitHub</a>にアクセスし、右上の十字ボタンから「NewRepository」を選択します。

ページが表示されましたら、
・Repository name
・公開：Private
に変更し、リモートリポジトリを作成します

<h2>3.リモートリポジトリにpushする</h2>
リモートリポジトリが作成できたので、そこにファイルをpushしていきます。

```
#リモートリポジトリのURLを登録する
git remote add origin リポジトリのURL

#リモートリポジトリにファイルをpushする
git push -u origin master
#githubで登録したユーザー名とパスワードを入力してpush
```

<h2>参考</h2>
GitHub
https://github.com/
Railsチュートリアル
https://railstutorial.jp/chapters/beginning?version=6.0#sec-development_environment
【 git init 】コマンド――Gitのリポジトリを作成する
https://www.atmarkit.co.jp/ait/articles/2003/12/news010.html
Laravel バリデーション内の共通処理をトレイトでまとめて定義する


こんにちは、JeffTechです。

# 説明
LaravelでAPIを作成している時に、バリデーションエラーを出力させるメソッドを全てのリクエストフォームに書くのがしんどくなったので、トレイトでまとめることにしました。


# 開発環境
- OS: MacOS
- PHP: 7.3
- Laravel 6.2

# 実装の流れ
1. トレイトの作成＆編集
1. トレイトをリクエストフォームでuseする



# 実装



## トレイトの作成＆編集
まずは、共通処理をまとめるトレイトの作成を行います。

```bash
$ touch app/Http/Requests/ValidationFailedTrait.php
```
次に、作成したトレイトの編集を行います。

```php:app/Http/Requests/ValidationFailedTrait.php
<?php

namespace App\Http\Requests;

use Illuminate\Contracts\Validation\Validator;
use Illuminate\Http\Exceptions\HttpResponseException;

trait ValidationFailedTrait
{
    /**
     * エラーメッセージを出力
     * 
     * @return viod
     */
    protected function failedValidation(Validator $validator)
    {
        $response['errors'] = $validator->errors()->toArray();

        throw new HttpResponseException(
            response()->json(
                $response,
                422,
                [],
                JSON_UNESCAPED_UNICODE,
            )
        );
    }

    /**
     * 共通エラーメッセージ（あれば）
     */
    public function messages()
    {
        return [
            //
        ];
    }

    /**
     * 共通エラー文言（あれば）
     */
    public function attributes()
    {
        return [
            //
        ];
    }
}
```

Response::json()の第4引数に、`JSON_UNESCAPED_UNICODE`を設定すると、unicodeで日本語をエスケープせずにそのまま返してくれます。



## トレイトをリクエストフォームでuseする
今回は、例としてPostRequest.phpというリクエストフォームがあったと仮定して、その中でトレイトをuseしてみます。

```php:app/Http/Requests/PostRequest.php
<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class PostRequest extends FormRequest
{

    use ValidationFailedTrait;

    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            //
        ];
    }
}
```
`PostRequestクラス`の中で`use ValidationFailedTrait;`と記述するだけです。
これを、各リクエストフォームに記述するだけで、エラーメッセージ出力の処理が共通化できました。


# 最後に
少しでも役に立った！という時は、いいねをポチッとして
フォローしてくださると嬉しいです、、、笑

役に立たなかった時は、怒らないでコメント頂けますと幸いです笑

Twitterもやってますので、よかったら見てみてくださいね！
https://twitter.com/jefftechsaku
「gitbucket」のアプリケーションが起動できない問題を解決！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283091/932d39f9-68fc-4294-2ba0-6607103e3d5d.png)
###エラー↓
`FAIL - コンテキストパス [/gitbucket] のアプリケーションが起動できません`

###logファイルから切り抜き↓
`Caused by: java.io.IOException: Directory '/.gitbucket' could not be created`

原因は**gitbucketが利用するフォルダーを作成できなかった**こと
本来はgitbucketを起動したユーザーのホームディレクトリに作成されるのだが、tomcatの場合ホームディレクトリが存在しない？のでフォルダーが作成できずエラーを出していたみたい。

##1. tomcatを停止↓

```bash:コマンド
sudo systemctl stop tomcat9
```
##2.tomcatのユーザーフォルダー作成↓

```bash:コマンド
sudo mkdir /home/tomcat9
```
##3.rootからtomcatにフォルダー権限を移動↓

```bash:コマンド
sudo chown tomcat:tomcat /home/tomcat9
```
##4.tomcatの「ホームディレクトリだよ」って事をOSに届け出↓

```bash:コマンド
sudo usermod -d /home/tomcat9 tomcat
```
##5.tomcat様起動↓

```bash:コマンド
sudo systemctl start tomcat9
```

勝手に起動していれば成功↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283091/d545f73f-61a5-2c39-02e4-65e83332f60e.png)
WordPressでカテゴリごとに処理を分けるPHPコード

WordPressでカテゴリごとにウィジェットとかの表示を切り替えたい時のコード。

まず外観のテーマエディターからheader.phpを開く。
他のファイルでも構いませんが、一番わかり易いのでheader.phpにしています。

bodyタグ付近に以下のコードを挿入。

```php
	$cat = get_the_category();
	$cat = $cat[0];
	$cat_id = $cat->cat_ID;
	if($cat_id == 特定のカテゴリID){
        //処理
    }
    else{
	    //処理
    }
```

PHPを書きたくない、本番環境をいじりたくない、といった方は「Widget Options」というプラグインを用いるのもおすすめです。

こちらのプラグインではカテゴリ以外にもデバイスやログイン状態、タグ、記事タイプなど様々な指標で表示させるウィジェットや処理を切り替えることができます。

https://ja.wordpress.org/plugins/widget-options/

## PHPのお役立ち情報

https://wagtechblog.com/programing/php-school

https://wagtechblog.com/programing/php-book
M1 MacにVue CLIを導入する

# はじめに
M1 Mac にVue CLIを導入した時のメモ。
nvmやnodeの導入も初めて。

# 手順
nvmをインストール。

```
% brew install nvm
```

何か言われるので、

```
Please note that upstream has asked us to make explicit managing
nvm via Homebrew is unsupported by them and you should check any
problems against the standard nvm install method prior to reporting.

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.zshrc or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

You can set $NVM_DIR to any location, but leaving it unchanged from
/opt/homebrew/opt/nvm will destroy any nvm-installed Node installations
upon upgrade/reinstall.
```

言われた通りにディレクトリ作成してnvmにパスを通す。

```
% mkdir ~/.nvm
% open ~/.zshrc
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion
```

ファイルの変更を適用。

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

パス開通確認。

```
% nvm version
v16.0.0
```

登録されているNode.jsバージョンの確認。

```
% nvm ls-remote
...
       v15.13.0
       v15.14.0
        v16.0.0
```

最新をインストール。

```
% nvm i v16.0.0
```

v16.0.0は2021/4/20にリリース（この記事の３日前）。
このバージョンからM1に正式に対応したらしい。
ちょっと嬉しい。

インストール内容の確認。

```
% node -v
v16.0.0

% node -p process.arch
arm64

% nvm current
v16.0.0

% npm -v
7.10.0
```

vue CLIのインストール。

```
% npm install -g @vue/cli
```

インストール内容の確認。

```
% vue --version
@vue/cli 4.5.12
```
CSS設計完全ガイドを読んで、PRECSSを学びました

#CSS設計完全ガイド
[CSS設計完全ガイド](https://gihyo.jp/book/2020/978-4-297-11173-1)
HTML/CSSで画面を作るのに、恐怖を感じていたため評判の良かったこちらを購入しました

結論・・・・・***めちゃくちゃおすすめ***です！！

##読んだ感想
今まで我流でHTMLの構造やら、CSSを書いていた自分にとって
どのようにHTMLをとらえるといいのか？
どうすれば再利用しやすいCSSとなるのか？
なにより、自分のCSSなんかわかりずらいな！！って思っていましたwww

そんな自分の道しるべになる本で、分厚いですがサクサク読み進められて２日くらいで読み切りました

##PRECSS（プレックス）とは?
クラスに接頭辞(prefix)をつけて、BEMなどのCSS設計のちょうどよい開発のしやすさを保ち、コードの見通しをよくしてくれる設計手法
（と自分ではとらえています）


##グループ分け

1. ベース
2. レイアウト
3. モジュール
    1.  ブロックモジュール
    2.  エレメントモジュール
4. ヘルパー
5. ユニーク
6. プログラム 

##命名規則
* 基本
接頭辞\_クラス名\_...  
el_btn  
bl_header_wrapper  
などなど

基本的にはローワーキャメルケースを使う

* モディファイア
 
基となるクラス名__モディファイア名
何をするモディファイアなのかを明確にすること
モディファイア名は基本__KeyValueの構成
__bgcRed
など、なにをどうするの形で記載する
（基本であり、必ずではない）

 
## PRECSSのモジュール群
各モジュール単位の分け方
厳密にこうだという規則はないので、開発のしやすさや利便性を優先する
経験を積んで最適化すること

| グループ| 接頭辞 | 意味 |備考|
|:-----------:|:------------|:------|:------------:|
| ベース      | なし|              |全体の標準となるスタイリングを設定|
| レイアウト  | ly_ |layoutの略    |大きなレイアウト全体の枠組みを定義|
| ブロック    | bl_ |blockの略     |エレメントなどが集まったひとかたまりを定義<br>ブロックモジュールにレイアウトに関わるスタイリングは**原則**しない
| エレメント  | bl_ |blockの略     |最小単位のモジュール|
| ヘルパー    | hp_ |helperの略    |基本的に一つのスタイルのみを定義し、部分的に使いたいスタイルを定義|
| ユニーク    | un_ |uniqueの略    |あるページのみに使われることを明示する。影響範囲がそこのみだと明確にできる|
| プログラム  | js_ |javascriptの略|jsで使用する要素を定義|
| プログラム  | is_ |動詞isの略    |jsで使用する要素の状態を定義|
x86_64 とは？

## 勉強前イメージ

32bitか64bitなのか・・・みたいなイメージしかない
カーネルのリリース番号見たときとかある

```
# uname -r
3.10.0-1160.11.1.el7.x86_64
```

## 調査

### x86_64 は何を表してるの？

そもそもx86・x64はCPUのbit数を表していて、
x86→32bit
x64→64bit
になります。

x86の由来はintelのマイクロプロセッサで、
16bitの1978年の型番 8086 から
32bitの1989年の型番 80486 まで
○○○86 という型番を使用されており、
命令セットアーキテクチャ・製品シリーズの名称がx86というところから来ています
そこから、64ビットに拡張されたのが64ビット版がx64になります。


### そもそもCPUのbit数は何に関係ある？

CPUのbit数で使用できるメモリの最大サイズが決まっています。

- 32bit
	- 2の32乗 → 最大4GBのメモリサイズ 
- 64bit
	- 2の64乗 → 最大128TBのメモリサイズ

## 勉強後イメージ

なんとなくイメージでは知ってたけど、由来とか全然知らなかった・・・
あとCPUのbit数がメモリに影響与えてるのもﾊｽﾞｶｼﾅｶﾞﾗ知らなかった。
てことはCPUが32bitだったらメモリどんなけ積んでも4GBまでしか見てくれないってことかな？

## 参考

- [ややこしい! PCソフトをDLする際に確認すべき「x86」と「x64」って?](https://news.mynavi.jp/article/20200416-1018112/)
- [CPUのアーキテクチャの違いまとめ（x86/x64/x86_64/AMD64/i386/i686とはなんなのか？）](https://blog.framinal.life/entry/2020/04/22/041548)
Herokuでpg:resetしてもErrorが消えなかったのをようやく解決した【初心者】


よく見る記事に、Herokuで```rails db:migrate:reset```出来なかったら、

```
$ heroku login -i
$ heroku pg:reset
```

すればいいよ！って書かれているのですが、どうしても```undefined local variable or method `locked_at' for #<User:0x007f28a212345> Did you mean? lock_access```のエラーが治らず:sob:

そもそもpg:resetって何ぞや？と思い始めました。
結論分からなかったんですが、pgというSQLをリセットするだから、マイグレートファイルは変わっていないんじゃないか？と思いました(db:dropみたいな効果かなあと)

という訳でこれで解決しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110799/6753beba-5a4d-81b5-f1be-e564f6730073.png" width=40%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1110799/30476da3-e941-4f11-8cdb-7a8538a4682e.png">

~~どこ隠せばいいのかわかんなくてやみくもにペイントを使用(笑)~~
Herokuの管理画面のところからデータベースをリセットした後に、```heroku run rails db:migrate```と```heroku run rails db:seed```したら治りました～！やった～！
量子プログラミング用SDKと実機対応

# はじめに

量子コンピュータの発展に伴って、数多の量子プログラミング用のSDKが出てきています。
各SDKは、多少の個性（得意なこと）を持っています。
また、SDK毎に対応している量子コンピュータ実機が異なります。[^1]

それをまとめたいと思います。
分かる範囲で書きましたが、色々抜けている部分はあると思います。
SDKは、よく見るものだけ書きました。数多あります。[^2]

# 一覧表

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/878664/bd893a3d-830e-f442-cf80-57948a30d279.png)

(解像度が悪い場合は、画像をクリックしてポップアップすると解像度が上がります）

# おすすめ

**初心者**には、そもそもゲートとはなんぞや？を理解する必要があるので、日本語チュートリアルが丁寧な
**Qulacs**およびその教材(Quantum Native Dojo) が良いかと思います。

ゲート操作がわかってきたら、やはり**実機を動かしたい**ですよね。
無料で使えるゲートの実機はIBMQしかありません。
サードパーティーのインターフェースも含めれば多くの言語でIBMQを利用可能ですが、
標準でサポートしているもののほうが戸惑いがないと思います。
となると、**Qiskit, blueqat, PennyLane**あたりが良いです。
日本語チュートリアルも欲しいとすると、Qiskitかblueqatになります。
Qiskitはチュートリアルの幅広さ、ライブラリの幅広さでは素晴らしいですが、呪文が長いです。
blueqatはコーディングが簡潔ですが、qiskitほどのライブラリはないので、自分で頭を使うことが多い気がします。
ただ、課金すればIBMQ以外の実機にもすぐ投げれるのは強いですね。
私はQiskitをやってからblueqatを使いましたが、どちらか使えれば十分と思います。

機械学習をしたい！と決まっている人は、PennyLaneでよいと思います。
こちらも、Qulacsからいきなりいっても大丈夫です。チュートリアルは英語しかないので頑張ってください。
（当方のQiita記事も参照下さい）

量子ゲートはほぼ機械語って感じなので、SDKを変えても記法は大差ありません。
自分が欲しい教材やデモが充実しているもの　で選びましょう。

# 開発環境

Google colaboratory でもいいですし、qiskitやblueqatの場合はcloud環境が無償提供されています。
localで構築すると、隙間時間に操作しやすいです。

# まとめ
とりあえず手を動かそう。
実機を使うと、あまりの性能の低さに絶望するかと思いますが、気長にやりましょう。


[^1]: ただし、基本的にOSSですので自前でインターフェース部分を開発すればなんとでもなります。
[^2]: Project Q, Quipper....
IE11でNuxt.jsを使用した際に「strict モードでは、プロパティの複数定義は許可されません。」とでたときの対応メモ

strictモードをやめれば解決しますが、その前に確認しておきたい点として componentを明示的にimportしているか という箇所になります。

nuxt.js はテンプレート部に直接 `/components` ディレクトリ配下のファイルを、importせずにファイル名をタグとして使用できる。
しかしどうもそれを多様しているとIE11で表題のエラーになる場合がある。

`<HeaderMenu></HeaderMenu>`

みたいな感じで components/HeaderMenu.vue  を呼び出している場合は以下に修正するとよさそう。

```page.vue 
import HeaderMenu from "@/components/HeaderMenu";
export default {
  components: {
    HeaderMenu,
  }
}

<template>
  <header-menu></header-menu>
</template>
```

内部コードを読むところまではしなかったけど、わたしの場合はこれで直りました。
あなたの場合はどうでしょう。ごきげんよう