OmniAICreator/Qiita-1.07M huggingface dataset:
チームビルディングを怠ったチームの末路...

## むかしむかしあるところに…

あなたは新しいチームのリーダーに任命されました。

メンバーはあなた以外ほぼ新人

あなたはこのチームの最優先目的はメンバーの能力アップ、育成にあると考えました。

途中、回り道をしながらも着実にメンバーの能力はアップし

ようやくチームとして安定したアウトプットを出せるようになるのではと思っていたころ

とあるメンバーが休みがちになり、ついにはチームを去ってしまいました。

その1人をきっかけに、またひとりまたひとりとメンバーは去っていき

チームが結成されて1年後には、あなたひとりだけのチームになってしまいました。

そこであなたは考えます、「なにを間違っていたのだろう」と。

あなたは何を間違っていたのでしょうか？

なにかハラスメントをしたわけではありません。

過労働を強いたわけでもありません。

ただ、メンバーの育成に力を注いできただけです。

しかし、メンバーのことをふりかえってみると

メンバーが
**どんな考えをもっているのか
どんな風に成長したかったのか
どんな仕事が好きだったのか**
あまり知らなかったことに思い当たります。

それは、あなたがチームの心理的安全性の確保を怠っていた結果かもしれません。

## 心理的安全性って？
次の4つの不安をチームに対して感じたことはありませんか？

- 無知だと思われる不安
- 無能だと思われる不安
- 邪魔をしていると思われる不安
- ネガティブだと思われる不安

もし1つでも当てはまったことがあるなら、あなたのチームは心理的安全性が低い状態かもしれません。
心理的安全性の提唱者・エドモンドソン教授は、心理的安全性を **「対人関係においてリスクのある行動をしても、このチームは安全だというチームメンバーによって共有された考え」**
と定義しています。
心理的安全性が高いとどういったメリットがあるのでしょうか？
##### チーム内の情報共有の徹底
チーム内で自分の意見やアイデアを発表することに対する心理的ハードルが低いため、細かな情報共有や活発なアイデア交換ができます。
チームメンバーが今どういう状況で、何を考えているのかをお互いに知っている状態で働けるので、風通しの良い円滑なコミュニケーションが可能になります。
##### チームメンバーのポテンシャルを高める
お互いを認めあい、切磋琢磨できる土壌が出来上がっているため、個人が持つポテンシャルを最大化することができます。
##### 将来に対するビジョンが明確になる
目標や課題に対して建設的な議論を行えるため、ビジョンの共有化が可能になります。チームメンバーが同じ方向を向いて働くことで、目標達成までのスピードも上がります。
##### 人材流出を防ぐ
Googleでも実証されたように、心理的安全性が高いチームは離職率が低いです。居心地が良く、自分の能力を最大限に活かして働けるため、長く働きたいと思わせる環境が構築できるためです。
（メリットは※1より引用）

裏を返せば…
**チーム内で情報共有されない
チームメンバーのポテンシャルを発揮できない
将来に対するビジョンが不明確で、チームの動きが鈍足
人材流出する**
ということになります。

## 心理的安全性、高いですか？
冒頭の話はフィクションですが、過去似たような経験をしました。

そのあと、心理的安全性のこと、チームビルディングのことを知り

過去の私のチームに足りなかったことはこれではないかと気づき

記事のように、チームビルディングを積極的に取り組んでいこうとしています。

「自分には関係ない」「私のチームは大丈夫だ」

と思っている人も一度思い返してみてください。

今からでも心理的安全性の確保、チームビルディングを行なうことで

冒頭の話のような最悪のシナリオに陥らなくて済むかもしれません。

気になる方はぜひ参考ページのチェックシートを！

初めてチームビルディングをするなら[この記事](https://qiita.com/javano/items/4e6db46ee35304e9943a)のワークに取り組んでみてください。

##  参考・引用
- [心理的安全性の測定方法や尺度、高める方法](https://tunag.jp/ja/contents/hr-column/3771/) ※1
俺「バリデーションってなんやねん」

# 安全じゃないデータを取り除くで

バリデーションを英語ではvalidationと書く。

「確認」って意味があって、確認するらしい(?)。


# Web開発におけるvalidation

Web開発でバリデーションと言ったら、バックエンドで**入力されたデータが正しいかを確認する**よ！

# 正しくないデータ

例えば以下の要素を登録できる投稿サイトがあるとする。

- タイトル(*)
- 本文(*)
- カテゴリー
- タグ

この中で(*)を付けた要素は必須項目で、必ず何かしらのデータが必要だとする。

もしあるユーザーがタイトルと本文を空欄のまま投稿しようとすると、それはWebサイト的にはアウトの扱いとなる。

タイトルと本文が空のままのデータを登録されても困る。

こういうトラブルを未然に防ぐのがバリデーション。

# 要素を確認するよ

Laravelを例に紹介するけど、データが与えられてそれが登録されるまでの間にバリデーションを挟むことで、データに不備があるときはそれ以上処理が進まないようにできるし、不備がなかったら処理が先に進むようになっている。

```PHP
public function create(Request $request)
{
    // ココがバリデーション
    $request->validate([
        'title' => 'required|max:255',
        'body' => 'required',
    ]);
    // データに不備があると、これ以上先に進まなくなる

    // この下にデータを登録する処理がある
}
```

Laravelにあまり馴染みのない人は、この`$request`の中にフォームのデータが入っていると思ってもらってOK🙆‍♂️

上記はバリデーションの例だけど、こんな感じでデータの登録処理をする前に確認処理（＝バリデーション）を挟むことによって、事前に与えられたデータに不備がないかを保証できる。

# バリデーションのルールはこんな感じやで

ちなみに、上記の例で行われているバリデーションの内容はこんな感じ

| 要素 | バリデーションのルール |
|:---:|:---:|
| title(タイトル) | 必須項目である、最大文字数が255である |
| body(本文) | 必須項目である |


# まとめ

こんな感じでデータ処理の間にバリデーションを挟むと、そのデータが正しいフォーマットで送信されているのを確認できるよ😌

皆んなも使ってみてね！
ACMで複数ドメインを設定する

# 概要
表題のACM設定のメモです。
例えば、下記3つのドメインを一つのTLS証明書でひとまとめにすることができます。

- `example.com`
- `test.example.com`
- `test.login.example.com`


コンソールで下記のように設定できます。
![スクリーンショット 2022-06-10 18.43.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/56fdf0b2-2990-6d9f-b93b-6697172e75a7.png)

また、ワイルドカードを使って下記のように設定することも可能です。
![スクリーンショット 2022-06-10 18.43.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/697c1d36-8a09-89ef-02b2-274257a98e1b.png)

一方で、ワイルドカードは一つのサブドメインのみに有効なので、下記の設定では`test.login.example.com`をカバーできません。
![スクリーンショット 2022-06-10 18.44.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572098/21fedfdc-7bbf-f97a-8ee8-39ce119b6141.png)


# ALBへの関連付け
ALBへの関連付けは下記のようにできます。

```CFn.yml
  HTTPSLoadBalancerListener:
    Type: AWS::ElasticLoadBalancingV2::Listener
    Properties:
      LoadBalancerArn: !Ref PublicAlbArn
      Port: 443
      Protocol: HTTPS
      DefaultActions:
        - Type: fixed-response
          FixedResponseConfig:
            StatusCode: 404
            MessageBody: Not Found
            ContentType: text/plain
      SslPolicy: ELBSecurityPolicy-2016-08
      Certificates:
        - CertificateArn: !Ref AcmCertArn
```

また、一度リクエストした証明書は変更できないので、さらにドメインを追加する際は新たに別の証明書をリクエストします。
別のTLS証明書をALBに関連付ける場合は、下記のように行います。

```CFn.yml
  HTTPSLoadBalancerListener:
    Type: AWS::ElasticLoadBalancingV2::Listener
    Properties:
      LoadBalancerArn: !Ref PublicAlbArn
      Port: 443
      Protocol: HTTPS
      DefaultActions:
        - Type: fixed-response
          FixedResponseConfig:
            StatusCode: 404
            MessageBody: Not Found
            ContentType: text/plain
      SslPolicy: ELBSecurityPolicy-2016-08
      Certificates:
        - CertificateArn: !Ref AcmCertArn

  CertificatesList:
    Type: AWS::ElasticLoadBalancingV2::ListenerCertificate
    Properties:
      Certificates:
        - CertificateArn: !Ref AdditionalAcmCertArn
      ListenerArn: !Ref HTTPSLoadBalancerListener
```


# 参考
https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/acm-certificate.html

https://www.awstut.com/2022/02/19/attaching-multiple-acm-certificates-to-alb-to-support-multiple-domains/
Shopify オブジェクト Liquidでユーザー情報やカート情報を取得

Shopify オブジェクトを使用して顧客情報やカート内の商品情報を取得してみました。Shopifyで予め用意されているオブジェクトをLiquidに記載することでこれらの情報を取得、表示できます。一部ではありますが実際に使ってみたオブジェクトをまとめます。

## Liquidの構文について
- {{  }}  
{{ }}の中に、Shopifyであらかじめ定義されている「オブジェクト」、「オブジェクトのプロパティ」、「文字列」のいずれかを記述することでサイト上に出力される。Shopifyの公式ドキュメントではObjectsと呼ばれている

- {% %}  
{%  %}の中には、if文やfor文、変数の定義などのロジックを記述できる

- フィルター  
オブジェクトの出力結果を変更する機能  
`{{ <objects> | <フィルター名> }}`

## オブジェクトについて
Liquidにオブジェクトを埋め込むことで顧客情報やカート情報を取得できる

### 顧客
customer object  
https://shopify.dev/api/liquid/objects/customer

ログインしているユーザーの情報が取得できます。

- 顧客ID  
`{{customer.id}}`

- 名前  
`{{customer.first_name}}`, `{{customer.last_name}}`

- メールアドレス  
`{{customer.email}}`

### カート
cart object  
https://shopify.dev/api/liquid/objects/cart

- カート内に存在するすべてのアイテム  
`cart.items`  

cart.items で返された値を出力するには以下のようにfor文を使う
```
{% for item in cart.items %}
    //処理
{% endfor %}
```

- カート内の商品  
上記で取り出したカート内のitem に対して、以下に記載するproductオブジェクトを使用すると商品についての情報を取得できる

### 商品
product object  
https://shopify.dev/api/liquid/objects/product

- カート内の商品ID  
`{{item.product.id}}`

- カート内の商品タイトル  
`{{item.product.title}}`

- 商品金額  
`{{item.original_price | money }}`  
`money` フィルターを付けないと桁数が正しくならない  
その他合計金額なども取得可能
twitterを設計してみた

# 導入
こんにちはhagurereです。
今回はtwitterを設計してみました。

# 要件
今回の要件は以下です。
* タイムライン(フォローしている人のtweet一覧)
* スレッド(tweet詳細とそのリプ一覧)
* いいね

# 考慮事項
* スケーラビリティ
* 機能拡張性(今後増える機能を予想して設計する)

# RDBだけで設計してみる
以上の要件と考慮事項をもとに設計をしていきますがまず最初RDBだけで設計してみようと思います。
以下がざっと書いてみたE-R図です。
![スクリーンショット 2022-06-10 17.14.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178067/eef7f2f6-fd44-e6c8-7151-1e2c17799103.png)

シンプルでわかりやすいDB設計ですね

このDB設計ですとタイムラインの一覧表示は以下のようなクエリで行うことができます。
```
SELECT * 
FROM tweets
WHERE user_id 
IN (SELECT followed_id 
    FROM follows
    WHERE follower_id = ?)
ORDER BY created_at DESC
```
スレッドの表示だと以下
```
SELECT *
FROM replies
WHERE tweet_id = ?
ORDER BY created_at DESC
```

### 問題点
一見簡潔でよく見えますがこのDB設計、クエリですと以下のような問題点が出てきます。
* アクセスが増えるとサブクエリ（WHERE IN (SELECT ...)）が重くなる
* リツイート, 引用リツイート, 広告ツイートなどを含めてタイムライン表示させるようにするときこのテーブル設計じゃ不可能

### 改善策
上の問題点を改善したDB設計にしてみました。
![スクリーンショット 2022-06-10 17.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178067/ad9ba4a3-c1d2-bfbd-217a-ddd14b65bf73.png)

Tweetが作成されるたびにフォロワーの数Timelineテーブルにレコードを作成します
このようにすることでリツイート、引用リツイートに簡単に対応できますし以下のような軽いクエリでタイムライン一覧を取り出すことができます。

```
SLECT * 
FROM timelines 
INNER JOIN tweets
ON tweets.id = timelines.tweet_id
WHERE user_id = ?
ORDER BY created_at DESC
```

ただこちらにもデメリットはあります。
tweetの作成時フォロワーの数だけレコードを作成する。
つまり1000フォロワーなら1000レコード, 10000フォロワーなら10000レコード作成されてしまうということです。

# NoSQL(DynamoDB)と組み合わせる
RDBに一気に何千, 何万レコードの作成はかなりのコストがかかりますが大量のデータを扱うように作られたNoSQLならそこまでのコストにせずに可能です。
twitterではmemcachedを使っている（使っていた？）ようですが今回はDynamoDBを使います

DynamoDBを使って最適化させたDB構成が以下です
![スクリーンショット 2022-06-10 18.00.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178067/962042cc-3100-910c-8570-45cc89aede9e.png)

PKがパーティションキー, SKがソートキーです。
NoSQLにはリレーションがないので取り出したTimeline一覧にアプリケーション内でTweetをアタッチしてあげる必要がありますが最大30件程度ならそこまでコストにならないと思います。

# 最後に
実際のtwitterが今どのような構造で動いているかはわかりませんが10年前はこんな感じの構造で動いていたみたいです。
今はこんな感じじゃないのかとかここはこうしたらもっとよくないかとかのご指摘、ご質問があったらぜひ送ってください！
ActiveRecord の has_one 関連でサクッと Null Object パターンを実装する

小ネタです。

Rails の ActiveRecord で has_one 関連を使う場合、参照先が存在しないことがあります。

```ruby

class Account < ApplicationRecord
  def some_method
  end
end

class Supplier < ApplicationRecord
  has_one :account
end

Supplier.find(id).account # Account or nil
```

こうなると場合によってインターフェイスが合わなくなるため、メソッドチェーンをつなげるためにはあの目障りなボッチ演算子（`&.`）のお世話になる必要が出ます。

```ruby
Supplier.find(id).account&.some_method
```

これを解決する典型的な方法としては、参照先レコードが存在しない場合は `nil` の代わりに `Account` のダミーオブジェクト・いわゆるNullObjectを返すことでインターフェイスを保つ方法があります。

具体的には関連名と同じメソッドを定義するだけです。
```ruby
class Supplier < ApplicationRecord
  has_one :account
  def account
    # 参照先レコードが存在しない場合は has_one で自動定義される build_association を呼び出す。
    super || build_account
  end
end
```

これで憎きボッチ演算子が駆逐できました。

```ruby
Supplier.find(id).account.some_method # .account は必ず Account のインスタンスなのでボッチ演算子は不要
```

更にActiveRecordのメソッドだってチェーンできるようになります。便利ですね。

```ruby
Supplier.find(id).account.update(name: 'hoge') # insert or updateを自動判別
```

ここまでくるといいとこ尽くめですが、1点注意があります。

レコードが存在するかどうかの判定方法が変わります。 `.nil?`, `.present?` が使えません。（必ず `true` になる。）
`.new_record?`, `.persisted?`, `.id.nil?` などで判断する必要があります。

ただ、NullObjectパターンを使っていてレコードの存在を確認する必要があるということは、NullObjectパターンが適していないことが考えられますので、その場合は諦めたほうが良いかもしれません。
macでssh接続する際、権限エラーだった話

今回はssh接続出来なかった時の対処法について書いていきます。

## 発生したエラー
下記のようなエラーが発生しました。
エラー内容としては、秘密鍵は他のユーザーからアクセス出来るような権限では使えないよ！と言ってるようです。
```
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for 'hogehoge.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
```


## 対処法
今回ssh接続で使用しようとしていた秘密鍵の権限が`644`だった為、`600`に修正しました。
```
# chmod 600 hogehoge.pem
```

これで接続できるようになります
REACT TO-DOリスト　作り方　簡単　コピペでできる

# REACT TO-DOリスト　作り方　簡単　

srcフォルダ内にtodo.jsを作成。
あとは写すと完成。

src/todo.js
```
import React, { Component } from 'react';

export default class Todo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      name: ''
    };
  }

  onInput = (e) => {
    this.setState({
      name: e.target.value
    });
  }
  
  addTodo = () => {
    const { todos, name } = this.state;
    this.setState({
      todos: [...todos, name]
    });
  }

  removeTodo = (index) => {
    const { todos, name } = this.state;
    this.setState({
      todos: [...todos.slice(0, index), ...todos.slice(index + 1)]
    });
  }

  render() {
    const { todos } = this.state;
    return (<div>
      <input type="text" onInput={this.onInput} />
      <button onClick={this.addTodo} >登録</button>
      <ul>
        {todos.map((todo, index) => <li key={index}>
          {todo}
          <button onClick={() => { this.removeTodo(index) }}>削除</button>
        </li>)}
      </ul>
    </div>);
  }
}
```

src/index.js
```
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import App from './todo';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```

結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2702355/37159ec7-da6f-8e58-da63-68fa62478ef5.png)
俺「エラーメッセージってなんやねん」

# ユーザーに不備を伝えるで

とあるWebサイトがあって、そのサイトにはログイン機能があるとしよう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512610/5181294f-0773-b37b-4987-ec6c773abe30.png" width="750">

これは実際には私が運営しているWordPressサイトの管理者サイトのログインページであるが、このログインフォームに何も入力しないまま「ログイン」ボタンを押すと、こんなテキストが画面に出力された。

> **エラー**: ユーザー名を入力してください。
> **エラー**: パスワードを入力してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512610/6f2da961-4bba-24bb-f294-7c2251630c97.png" width="750">

これがまさしく「**エラーメッセージ**」である。

# 何がOKで何がダメか分かるで

このメッセージから読み取れるのは、

- ユーザー名は入力しないといけない
- パスワードは入力しないといけない

どうやらこのサイトではログインするのにユーザー名とパスワードを入力しないといけないらしい。

# 必要な分だけ表示される

今度はユーザー名だけ入れて「送信」ボタンを押してみる（実際のユーザー名ではないが仮に`testuser`と入力する）ことにする。

すると今度はこのように表示された。

> エラー: パスワードを入力してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512610/8bf7f0df-a833-dfd4-b422-fd20d07a216a.png" width="750">

ユーザー名だけを入力して、パスワードを空欄のまま送信したので、パスワードについてのエラーメッセージのみが画面に表示された。

サイトが送信されたデータを受け取って、もし不備があるときはそれをview側に返して画面に不備の内容を表示する。

これがエラーメッセージである。

# エラーメッセージ分かったかな？

このようにサイト側が不備があるフォームの要素にだけ反応して、ユーザーにその不備の内容を伝えるのがエラーメッセージです😊

他にもよく見かけるエラーメッセージはこんなのがあるかな？🤔

> ユーザー名は8文字以上です。

> パスワードが一致しません。

> 「タイトル」は必須です。

こんな感じでユーザーにしてほしいこと、何が不備かを伝えるのがエラーメッセージだよ！
Databricks SQLでテーブルを作成できるようになりました！

今更かというツッコミは覚悟しています。

:::note info
**プレビュー**
本機能は[パブリックプレビュー](https://docs.databricks.com/release-notes/release-types.html)です。
:::

詳細は[マニュアル](https://qiita.com/taka_yayoi/items/89eda6708b7c2e77d651)を参照ください。

1. Databricks SQLにアクセスします。
1. サイドバーから**作成 > テーブル**を選択します。
![Screen Shot 2022-06-10 at 17.42.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/099636d8-ed51-477e-5e2d-8065efe3960d.png)
1. ファイルアップロード画面が表示されます。
![Screen Shot 2022-06-10 at 17.42.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/649724d7-a30c-7574-6497-5378105915ca.png)
1. ローカルマシンからCSVファイルをドラッグ&ドロップします。
1. プレビューが表示されます。
![Screen Shot 2022-06-10 at 17.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/46a4297f-afc2-7f23-f455-2350d8a1e76f.png)
1. 必要に応じて、アップロード先のデータベースを指定し、カラム名やデータ型を変更します。
![Screen Shot 2022-06-10 at 17.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/d3c880a5-7a62-fb21-2908-d3229b302c18.png)
1. **作成**をクリックします。
1. これでテーブルが作成されます。
![Screen Shot 2022-06-10 at 17.44.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/35230401-425c-99c3-4f9f-386b3a58a829.png)

これまで以上にクイックにDatabricks SQLでBI作業に取り組めるようになりました！

クイックダッシュボードの機能を使用することで、ノーコードでダッシュボード作成までおこなうことができます。

![Screen Shot 2022-06-10 at 17.49.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/f0d4c797-cc4b-995f-4ace-974eebdea3df.png)
Watson QueryのAPIKEYを含む資格情報の作成と接続情報の取得

[Watson Query](https://cloud.ibm.com/catalog/services/watson-query)は、データの物理的なフォーマットや場所を理解する必要がなく、データを移動させることなくアクセス、操作(=[データ仮想化](https://qiita.com/nishikyon/items/ef2d60b4687b8a6c3e39#1-%E3%83%87%E3%83%BC%E3%82%BF%E4%BB%AE%E6%83%B3%E5%8C%96))、分析を可能にするIBMCloudのSaaSのサービスです。
Liteプランが存在し、作成してから1ヶ月で削除されてしまうのですが、無料で使えるようになりました。

Watson Queryのサービス作成方法は、@Shumpei_Kuboさんのこちらの記事「[データ仮想化機能である Watson Query を有効化する。](https://qiita.com/Shumpei_Kubo/items/1ff4f6d98de1435ce458)」 を参考に作成してみてください。



# 0. はじめに・ ・ ・APIKEY
外部のBIツールなどからWatson Queryには、Db2のJDBCドライバーが使用できればでアクセスすることができます。その際、useridではなくAPIKEYが必要です。

APIKEYはIBM Cloudのidに紐ついたものも作成可能です。その方法は
[IBM Cloud APIKEYの作成(取得)方法](https://qiita.com/nishikyon/items/fa8b951267efbe911fe7)で説明しています。こちらももちろんWatson Queryへの接続に使用できます。

この記事では、Watson Query専用のAPIKEYを含む資格情報を作成し、その情報を取得する方法について説明します。この方法で資格情報を作成するとWatson Queryへの接続情報も取得できます。

## 1. IBM Cloudダッシュボードからリソース・リストを表示
IBM Cloudダッシュボードからリソース・リストの表示します。
- [IBM Cloudダッシュボードからリソース・リストの表示方法](https://qiita.com/nishikyon/items/7a2cd423d87afed1c63e)

## 2. 「サービスおよびソフトウエア」からAPIKEYを作成したいWatson Queryのサービスをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/6193de6e-c1ef-8a95-7842-43c368d66aa5.png)

## 3. 左側のメニューから「サービス資格情報」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/63ed390f-808c-996e-85bb-8a5371d3563b.png)

## 4. 右上の「新規資格情報」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/747c7bf7-d7de-f66b-272a-d85602b30592.png)

## 5. 必要に応じて名前を変更、役割を選択して、「追加」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/56d90b84-9ced-e850-ac09-b0e7698f96b5.png)

## 6. APIKEYの表示
作成した資格情報の名前(鍵名)の横の`v`をクリックして表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/75072b43-ba67-4498-7e38-fd759a92aba2.png)

一番上のapikeyの値がAPIKEYの値です：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/b24c4913-38e7-d594-62d3-bfdd5062f236.png)

Watson Queryへの接続情報は`"connection"`の中にいろいろな方式(?)で記載されています。hostnameやport, Dbname(bludb固定)などが取得できます。尚接続にSSLは必須です。

db2cli での接続方法は`"db2cli"`の中：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/62cea460-2970-6cbc-16b6-6e32cc11788f.png)

jdbc での接続方法は`"jdbc"`の中：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d3648ca9-e23c-c8eb-6510-e5ae3b3e5460.png)

Userid＆Passwordを使うLegacy接続の情報は`"Legacy"`の中：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/87116823-8ed9-d4af-2986-a261feeaf412.png)

ここで特徴的なのは、
passwordにAPIKEYの値を入れ、
usernameは`IBM_SUBSTTOKEN_APIKEY`
とし、
**securityMechanismの値を15にセットできれば**
usernameとpasswordでログインできるということがさりげなく書かれています。
この情報はDBeaverなどのアプリで使えます。

以上です。
【PowerBI】データを直接手打ちで入力する方法

#### ただデータの見え方を確認したいだけなの！
PowerBIでデータを取り込むとき、
いちいちExcelファイルのあるURL、ローカルやサーバ上にあるSQLデータベースの情報を引っ張ってくるのって結構面倒臭い。

かといって、サンプルデータがデモ用やプロトタイプ用で見え方を確認したいデータではない。

そんな時私は、データを直接手打ちしたり、ちょこっとコピペしてBIをチェックしています。

## 「ホーム」の「データ入力」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/e98659b6-0e5b-b5c1-2e93-7a4c343922a1.png)

## 「テーブルの作成」画面で適当にデータ入れてみる
ぽちぽち直打ちでもよし、どっかのテーブルの一部をコピペでも入力できます★
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/05b6a978-090e-0a5e-d865-ea27e6adcf1d.png)

## 可視化してみる
適当にビジュアルを選択してデータを可視化して見ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/8bd2fc04-6895-8205-9b86-99ddc2eca5f1.png)

## PowerQueryから入力したデータを編集する

とりあえず可視化してみると、
💡「あ、この行列構成だとデータ足りないな」とか、
💡「データが既に集計されていて詳細が見れないな」など、
データの整形が必要だとか、これでイケるな～とかというのに気づくと思います。

「こういうデータの構成ではできるかな？」と、
追記や修正をしてデータを編集することができます。

「ホーム」の「データの変換」でPowerQueryエディターを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/9670cbce-becf-eac9-f994-09cd1ca9ab33.png)

対象のテーブルを選択すると、右側にクエリのステップが表示されています。「ソース」の右にある歯車アイコンをクリックして詳細設定を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/6d3016a6-9093-d043-c6ea-611c4d20bcd5.png)

テーブルは「+」ボタンで列を追加したり、列名の上で右クリックすると編集メニューが出てくるので列を挿入することもできます。
列名も、値も自由に編集できます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/840b0236-0004-6000-c03c-f240f7d7dcf3.png)
「OK」をクリックすれば、改めて編集したデータが読み込まれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/efdc81d8-b109-6c23-3c53-b1a6cc6a9731.png)
エラー表示が出ています。

「ソース」のステップは正常に読み込まれて、表示されてます。
後続のステップ「変更された型」を選択してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/74a91135-ce23-e00f-c5fa-b0a0841e0bfa.png)

先ほど、列名を変更したので、最初に読み取った時に生成されたクエリの列名と相違が合ってエラーになっているようです。
関数が表示されているボックスを展開して、列名を修正します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/872170af-9398-1e58-2f93-f619c4365513.png)

エラーが消えたので、「閉じて適用」をクリックしてPowerQueryエディターを閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/52628e35-d690-1a5d-2491-446bdf7de3d6.png)


列名が変わったり、新しい列が追加されているので改めて表示列を設定します。
初めのうちはどのグラフが自分が分析したい内容を可視化してくれるのかイメージしにくいので、いろんなビジュアルをクリックして切り替えてみると良いと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322371/1ac6c76a-2f9e-dfee-2db0-59a6fce72ebb.png)


以上、PowerBIでデータを直接入力する方法について紹介しました。
ちょっとだけ説明用に可視化のイメージを作りたいんだよな～とか、PowerQueryを使うまでもなく別の行列構成のテーブルを可視化し実現可否を確認したいときなど、開発中に知っていると便利だったのでQiita記事にしてみました。
mac(intel)で公式インストーラでインストールしたgoを1.18にアップデート

Go初心者の備忘メモ。
以下の記事を参考にしました！
https://shinshin86.hateblo.jp/entry/2020/05/08/060000

まず、どこにGoがインストールされているか確認。
```
$ go env | grep GOROOT
GOROOT="/usr/local/go"
```

Goが`/usr/local/go`配下にインストールされているので、そのディレクトリごと消す。
```
sudo rm -rf /usr/local/go
```

その後公式のダウンロードページから必要なインストーラを取得して、インストールするだけ。
https://go.dev/dl/

確認
```
$ go version
go version go1.18.3 darwin/amd64
```
完
Google Colaboratoryでcreate-react-appしてみた話

# TL;DR
セルにそれぞれこう入力して実行。
```
!npx create-react-app myapp
```
```Python
from google.colab import output
output.serve_kernel_port_as_window(3000, path="")
```
```
!cd MyApp && npm start
```
三番目のセルを実行中、二番目のセルの出力のURLにアクセスするとReactが立ち上がっている。

# 本編

Google Colaboratoryというのをご存知だろうか。簡単に言うと、Googleが提供する機械学習の教育・研究用のサイトだ。しかも __無料__ である。Pythonユーザにはお馴染みのJupyter labのWeb版のようなものである。

さて、このColabだが、**Linuxコマンドを実行する機能がある。**
```
!pip install pygame
!gcc hello.c -o hello && ./hello
```
みたいに頭に`!`をつければよい。なければ`apt install`すればいいのだ。

ここで思いついてしまった。**create-react-appとかも動くんじゃね？**

# やってみる
セルにこう入力する。（npmは最初から使えた）
```
!npx create-react-app myapp
```

![Screenshot 2022-06-10 16.54.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2610946/8e3fc5d4-fe5e-84c3-3e70-836e4512901a.png)

**動くのかよ。**
ちゃんと「Happy Hacking!」が表示された。正直予想外だった。

# だが、まだ問題がある
ここであせって`npm start`なんてしてはいけない。これで立ち上がるのはColab上の`localhost:3000`であり、我々のPCのそれには何ら影響がない。つまり、**起動ページを見ることができないのである。**

# 解法
https://zenn.dev/ohtaman/articles/run_webapp_on_colab

こちらの記事の方法を使わせてもらった。

```Python
from google.colab import output
output.serve_kernel_port_as_window(3000, path="")
```

この下に出てきたURLに、`npm start`の結果が出てくる。

```
!cd myapp && npm start
```
セルでコマンドを実行するときは常にルートから始まるようなので、`cd`してから鯖立てする。先程のURLにアクセスすると...

![Screenshot 2022-06-10 17.01.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2610946/baf598db-be29-2088-f982-5717f94b07ad.png)

ちゃんといつものが表示された。
AWS認定 高度なネットワーキング – 専門知識 (AWS Certified Advanced Networking - Specialty ANS-C00) に合格した

# 1. はじめに
- 業務でDirect Connectなどのネットワークサービスに触れる機会もあるが、より体系的な知識を持って設計・構築などできるようにするため、「AWS認定 高度なネットワーキング – 専門知識」を取得することにした。
- 2022/7 に試験バージョンがANS-C00⇒ANS-C01に更新されるため、受験記などのノウハウがあるC00バージョンのうちに受験した。

# 2. 勉強法
## 2.1 体験記など
- [AWS認定 高度なネットワーキング - 専門知識に合格したので、実践した勉強方法を共有します](https://qiita.com/chanhama/items/a3ad32882002d70e212e)
    - だいたいの出題範囲、雰囲気が把握できた。
- [新しいAWS Certified Advanced Networking – Specialtyのサンプル問題の構成図を書いてみた](https://dev.classmethod.jp/articles/aws-certified-advanced-networking-specialty-sample-questions/)
    - 各問題に対し、「問題文を読む」⇒「要件を洗い出す」⇒「構成図に書き出す」のプロセスが書かれており、「確かにこういう風に考えるとスムーズだな」と思い参考になった。

## 2.2 模擬試験
- サンプル問題([リンクはこちら](https://d1.awsstatic.com/ja_JP/training-and-certification/docs-advnetworking-spec/AWS-Certified-Advanced-Networking-Specialty_Sample-Questions.pdf))
    - 10問しかないが、解説もついているのできちんと実施。

- 2022/6時点で、模擬試験は存在せず。

## 2.3 書籍
- 2022/2/28に、本資格の対策本「 [要点整理から攻略する『AWS認定 高度なネットワーキング-専門知識』](https://www.amazon.co.jp/%E8%A6%81%E7%82%B9%E6%95%B4%E7%90%86%E3%81%8B%E3%82%89%E6%94%BB%E7%95%A5%E3%81%99%E3%82%8B%E3%80%8EAWS%E8%AA%8D%E5%AE%9A-%E9%AB%98%E5%BA%A6%E3%81%AA%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AD%E3%83%B3%E3%82%B0-%E5%B0%82%E9%96%80%E7%9F%A5%E8%AD%98%E3%80%8F-Compass-Books%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-NRI%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%A0%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE/dp/483997571X)」がリリースされており、一通り目を通し、模擬問題は全て正答できるよう実施した。
- 試験範囲について網羅されており、体系的に学べるのはもちろん、「現在の試験内容が古いのでこういう感じに出題されるが、最新のベストプラクティスはこうなっている」のように、試験対策と実際の設計の両方に役立つような解説方針となっており、非常に参考になった。

## 2.4 Udemy
- [Practice Exam - AWS Certified Advanced Networking Specialty](https://www.udemy.com/course/practice-exam-aws-certified-advanced-networking-specialty/)
    - 評価の高かったこちらを実施。65問で物足りないかなと思ったが、100%正答できるよう繰り返し実施。内容は実際の問題に近い感じ。
- [AWS Certified Advanced Networking - Specialty Practice Exam](https://www.udemy.com/course/aws-certified-advanced-networking-specialty-practice-exam-q/)
    - 量をこなして慣れるために念のためこちらも実施。(195問)

## 2.5 実機確認
- いくつかのネットワーク系のサービスについてあらためて実機確認した。（試験勉強前に実施したもの含めてリンク）
    - [【初心者】Amazon Route 53 Resolver インバウンド/アウトバウンドエンドポイント を使ってみる](https://qiita.com/mksamba/items/b16e99170e666b68f194)
    - [【初心者】AWS Site-to-Site VPN を使ってみる (GCPとのVPN接続)](https://qiita.com/mksamba/items/f6f2896a9456dd68bed8)
    - [【初心者】Amazon VPC フローログを使ってみる](https://qiita.com/mksamba/items/d8fe465dd31183822af9)
    - [【初心者】AWS クライアントVPN を使ってみる](https://qiita.com/mksamba/items/c5779509edc3aec955ee)
    - [【初心者】AWS PrivateLink を使ってみる](https://qiita.com/mksamba/items/20903940b8b256ef2487)
    - [【初心者】AWS VPC Traffic Mirroring を使ってみる](https://qiita.com/mksamba/items/3e3fad914c708d9c9379)

# 3. 受験

結果:　合格(835点) ※750点以上合格

# 4. 所感

- VPN、ELB、Route53など、ある程度自分で触って確認できるところは自信を持って正答できていた気がする。
- Direct Connectについて、Private VIFをVGWに繋いだり、オンプレとAWSのアドレス設計をしたり、という利用者レベルでの業務はしているものの、Direct Connect接続そのものの設計・構築・運用(BGPによる冗長化設計など)はしていないため、正直その部分が理解しきれていないが、AS Path Prependingとか、そういう専門用語の概念が分かっただけでも一歩前進としたい。
npx create-react-app . --template typescriptができない

npx create-react-app . --template typescriptができない


```
npx create-react-app . --template typescript
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
Cannot create a project named "20220610_最速で学ぶTypescript" because of npm naming restrictions:

  * name can only contain URL-friendly characters
  * name can no longer contain capital letters

Please choose a different project name.
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Username\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Username\AppData\Local\npm-cache\_logs\2022-06-10T07_29_21_021Z-debug-0.log 
```
#### フォルダ名が日本語だとエラーが出てしまう。

#### 解決策
英語で書く
npx create-react-app 好きな名前(英語で) --template typescript

注意：[--template typescript]を付けないと、作成ファイルが.tsではなく、.jsファイルになってしまう。

例）
```
npx create-react-app test_react --template typescript
```
Power Automate Desktopのブラウザ自動化でドロップダウンリストを値で選択する

Power Automate Desktopのブラウザ自動化でドロップダウンリストを選択するとき、名前(ラベル)かインデクスで指定できますが、HTMLが以下のような形だと値で選択することができません。

```html
<select id="dropdown">
  <option value="value1">label 1</option>
  <option value="value2">label 2</option>
</select>
```

選択肢が固定ならば名前でよいですが、
自動化していますから、おそらく入力データをエクセルから取り出したりするとおもいます。
その際、値しか取得できない場合に困ってしまいます。

DBからcsvで取り出していて、コードしかないというのは結構多いパターンではないでしょうか?

一つの方法として、JSを使用して設定できます。

```javascript
function ExecuteScript() { 
	document.getElementById('dropdown').value = "value1";
}
```

これでうまくいかない場合として、onchangeイベントが設定されている場合があります。
上のコードで値を変更したときには onchange イベントが発火しません。

そのため、このドロップダウンで選択したものに応じて、入力フォームが変わる場合、その後の入力ができなくなってしまいます。

そういうときは以下のようなコードでラベルを取り出して、変数にラベルを保存してから、
あらためて名前で設定することでonchangeイベントも発生させることができます。

```javascript
function ExecuteScript() { 
    const el = document.getElementById('dropdown');
	return Array.prototype.find.call(el.options, x => x.value == "value1").label; 
}
```
スクリプト内でも変数をつかうことができます。"%{variable}" のように値を渡すとよいでしょう。
docker networkでIPアドレスを固定する

* docker network作成

```sh:作成
docker network create \
 --subnet 172.100.0.0/24 \
 intra
```

* docker コマンドの場合

```sh:run.sh
docker run -it --rm \
 --net intra\
 --ip 172.100.0.254 \
 busybox
```

* docker-compose.yml

```yaml:docker-compose.yml
version: "3"
services:

  app:
    restart: always
    image: gogs/gogs
    container_name: "gogs"
    ports:
      - "3000"
      - "22"
    volumes:
      - ./data:/data
    networks:
      intra:
        ipv4_address: 172.100.0.253

networks:
  intra:
    external: true
```
クライアントプログラム、アプリケーションサーバーとは

# Webクライアント
Webシステムを利用するためのプログラムのこと。```サーバークライアント```と言う。
ユーザーとWebサーバーとの橋渡しを行う。

# Webブラウザ
 Webクライアントとしてもっtも利用されている。

# クライアントプログラム
Webブラウザでは利用できないものや、十分に機能を活かせないものができてしまう。専門のクライアントプログラムが用意されている。
代表的なものは```twitter```や```2ちゃんねるはクライアントプログラムを持っている。

# アプリケーションサーバー（中核、多機能）
Webアプリケーションの```中核```となるデータベースのデータを```検索```、```加工```しWebサーバーに応答する。
３層アーキテクチャの中でもっとも```多機能```なサーバーである。
そのため```メモリ容量やCPU性能が重視```されます。

## セッション管理機能（ログインからログアウトまで）
HTTPは基本的に```ステートレス```なプロトコルのため、今クライアントがどのような状況かを```把握することができない```。
なので
クライアントごとに発行した```ID（セッションID)```を通信データに含めることでクライアントの状況を把握する。
同じクライアントからの```いくつか```の通信を１つのセッションとする。
ログアウトするとセッションIDは破棄される。
```ログインからログアウトまでが一連の通信```１セッションと捉えることができる。

# トランザクション管理機能(まとめて管理）
セッション中で行われる一連の作業の最小単位のことを```トランザクション```という。
トランザクションの中は複数の処理が含まれている。それらを管理するために複数の処理を一つのトランザクションとして```まとめて管理```する機能のこと。
JuliaでCUDA.jlつかって行列積と固有値分解してみた

# 環境
GeForce RTX3090，Xeon Gold 6338 (2.0GHz)搭載のRocky LinuxマシンでCUDA.jl使って行列計算してみました。

```julia
julia> versioninfo()
Julia Version 1.7.2
Commit bf53498635 (2022-02-06 15:21 UTC)
Platform Info:
  OS: Linux (x86_64-pc-linux-gnu)
  CPU: Intel(R) Xeon(R) Gold 6338 CPU @ 2.00GHz
  WORD_SIZE: 64
  LIBM: libopenlibm
  LLVM: libLLVM-12.0.1 (ORCJIT, icelake-server)
```

CUDAをインストールした以外は特に変わったことはしてません。

# 行列積
CPUとGPU計算を比較。倍精度と単精度を両方比較。

```julia
using CUDA
using BenchmarkTools
using LinearAlgebra

N = 1000
dim = N


println("Float64")
A = randn(Float64, dim, dim)
B = randn(Float64, dim, N)
C = zeros(Float64, dim, N)

AC = CUDA.randn(Float64, dim, dim)
BC = CUDA.randn(Float64, dim, N)
CC = CUDA.zeros(Float64, dim, N)

@btime mul!(C, A, B)
@btime CUDA.@sync mul!(CC, AC, BC)


println("Float32")
A = randn(Float32, dim, dim)
B = randn(Float32, dim, N)
C = zeros(Float32, dim, N)

AC = CUDA.randn(Float32, dim, dim)
BC = CUDA.randn(Float32, dim, N)
CC = CUDA.zeros(Float32, dim, N)

@btime mul!(C, A, B)
@btime CUDA.@sync mul!(CC, AC, BC)
```

計算時間

```
Float64
  28.881 ms (0 allocations: 0 bytes)
  3.981 ms (71 allocations: 3.33 KiB)
Float32
  15.027 ms (0 allocations: 0 bytes)
  121.564 μs (27 allocations: 464 bytes)
````

実用的には，GPU上のデータをCPU側にもってくる時間がGPUの場合必要になると思われますが，それでもGPUのほうがご利益多そう。倍精度でも10倍近く早いです。単精度だと，100倍ちかい。

# 固有値分解
固有値と固有ベクトルを計算します。注意としては，CUSOLVER.syevd!は対称行列しか使えない，引数として与えた配列は固有ベクトルを与えたものに置き換わります。使用時にご注意下さい。

```julia
using CUDA
using LinearAlgebra
using BenchmarkTools

N = 2000

ac = rand(Float64, N, N)
a = CuArray(ac)

println("Float64")
@btime eigen!(Symmetric(ac))
@btime CUSOLVER.syevd!('V','U',a)


println("Float32")

ac = rand(Float32, N, N)
a = CuArray(ac)

@btime eigen!(Symmetric(ac))
@btime CUSOLVER.syevd!('V','U',a)
```

計算時間

```
Float64
  1.926 s (14 allocations: 61.75 MiB)
  141.056 ms (70 allocations: 4.03 KiB)
Float32
  1.705 s (14 allocations: 30.97 MiB)
  37.263 ms (23 allocations: 1.11 KiB)
```

倍精度で10倍，単精度で46倍早くなりました。

（補足）
行列サイズが小さいとCPUのほうが計算が早くなります。N=4はCPUが早かったです。N=400はGPUのほうが早かったです。
2022/6/10

for i in scores:
	if i==100:
		break
	print(i)

list = []
for i in range(1,100):
    if i % 2 != 0:
		list.append(i)
	print(list)

names = ["aaaa","bbbb","cccc","dddd"]
ages = [10,11,13,15,16]
for name,age in zip(names,ages):
  print(name,age)

names = ["takei","kitada","okura","shibaike"]
gender = ["男性","男性","女性","男性"]
for a,b in zip(names,gender):
  if b == "女性" :
    print(a)

scores = [94,82,94,100,76]
flag = True
i = 0
while flag:
   
   if scores[i] >= 100:
      break
   print(scores[i])
   i += 1
SPIRE v1.3.1変更点調査

SPIRE[v1.3.1](https://github.com/spiffe/spire/releases/tag/v1.3.1)の変更点を紹介します。

> :memo: がついた文章は筆者の補足です。


# 機能追加

-   Windowsのワークロード認証に新しく `sha256` セレクタが追加されました。これにより、ワークロードバイナリのSHA256ダイジェストを認証できます。([#3100](https://github.com/spiffe/spire/pull/3100))


# バグ修正

-   Registrationエントリ関連のデータベース行が適切に削除されます。([#3127](https://github.com/spiffe/spire/pull/3127), [#3132](https://github.com/spiffe/spire/pull/3132))
    -   :memo: エントリ削除時に `dns_names` が孤児になってしまう問題がありました。
-   Agentがサーバと同期する際に必須情報のみを要求することで、帯域幅の使用量を削減します。([#3123](https://github.com/spiffe/spire/pull/3123))
-   ホットスタンバイモードのPostgrSQLデータストアに対して読取・変更・書き込み操作時に発生する問題を修正しました。([#3103](https://github.com/spiffe/spire/pull/3103))
    -   :memo: ホットスタンバイモードのPostgreSQL環境に置いて、JWTがjournal.pemには存在しているがDBには存在しないという状態が発生してこのバグが発見されました。MySQLと同様に、PostgreSQLでもSelect時に `FOR UPDATE` が付与されるようになります。


# その他変更

-   変更が無い場合、FetchX509BundlesのRPCは更新情報を送信しなくなります。([#3102](https://github.com/spiffe/spire/pull/3102))
    -   :memo: 前回の送信内容と比較し、同じであればskipするようになっています
-   ビルドインのjoin\_tokenノード認証が外部プラグインによって上書きされる場合、警告を表示します。([#3045](https://github.com/spiffe/spire/pull/3045))
-   SPIREサーバの終了時に、データベースコネクションが能動的に閉じられます。([#3047](https://github.com/spiffe/spire/pull/3047))
    -   :memo: いままでテスト用にのみCloseが実装されていましたが、サーバ終了時もCloseした方がよいよねということで変更されています。
【Windows10】Please update your version of Node.と言われたとき

#### Windows10でPlease update your version of Node.と言われたとき、つまづいたので備忘録

現象
```
npx create-react-app . --template typescript
npx: 67個のパッケージを14.129秒でインストールしました。
You are running Node 12.18.1.
Create React App requires Node 14 or higher.
Please update your version of Node.
```

検索すると、下記を実行するように記載されているが、Windowsだとエラーになる。
```
npm cache clean -f
npm install -g n


npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for n@8.2.0: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! notsup Valid OS:    !win32
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:
npm ERR! 

```

どうやら、nはWindowsではネイティブにサポートされていないらしい。

#### 解決策
こちらにたすけられました。
https://www.suzu6.net/posts/295-node-update-windows/
GASでウィンドウを閉じる方法


ダイアログの閉じ方とかはよく見かけますが、
ウィンドウを閉じるのが見当たらなかったので備忘録として残しておきます。

window.top.close()を使います。

```HTML
<button onClick="window.top.close()">ウィンドウを閉じる</button>
```
バーンサイドの補題を用いてピザの色分け問題を解く


### 【例題】ピザの色分け問題
以下のように6個に切ったピザを3色で2個づつ塗る方法は何通りあるでしょう（回転したものは同じとみなす）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1922159/9af1f1c6-df7c-efc1-409d-7a505efca6be.png)

### 単純に円順列で考えると⁈

単純に円順列=(線順列/個数)で考えると$6!/2!2!2! \div 6 = 15$となりますが、残念ながら不正解です。この式はすべてのパターンが周期６を仮定していますが、なかに[1,2,3,1,2,3]のように周期が３の物があるからです。

### バーンサイドの補題

そこで[バーンサイドの補題（Wikipedia）](https://ja.wikipedia.org/wiki/%E3%83%90%E3%83%BC%E3%83%B3%E3%82%B5%E3%82%A4%E3%83%89%E3%81%AE%E8%A3%9C%E9%A1%8C)の出番となります。

```math 
|X/G| = \frac{1}{|G|}\sum_{g \in G}|X^g|
```
この式を見てもなんのこっちゃという感じですが。円順列で考えると　**「回転して同じ形になるもの数を数えて回転の種類の数で割ったもの」** ということになります。

従って例題の場合だと、

1. $0^{\circ}$回転で同じになるものは線順列そのものなので$6!/2!2!2! = 90$
1. $180^{\circ}$回転で同じになるもの[1,2,3,1,2,3]のパターンで[1,2,3]の順列が$3! = 6$
1. 合計が96なので回転の種類の数6で割って、**答えは16**となります。

### バーンサイドの補題のプログラム（その１）

この考えを一般化して$m$色で$n$個ずつ塗った時の円順列を計算するプログラムと書いて行きます。まずはバーンサイドの補題を忠実に実装します。

1. 線順列のパターンをすべて生成する(distinct_permutations)
1. 各々のパターンを回転して行き１周する前に重なるものを数える(np.roll)
1. 1.と2.を足して$m \times n$で割る

2.の回転で重なるものをprintしているので6種類のパターンを出ていることが分かります。

```python 
from more_itertools import distinct_permutations
import numpy as np

def f1(m,n):
  s = [i+1 for i in range(m) for k in range(n)]
  print(f"s={s}")
  c1, c2 = 0, 0
  for p in distinct_permutations(s):
    p = np.array(p)
    for k in range(1,len(s)):
      p2 = np.roll(p,k)
      if np.all(p==p2):
        c2 += 1
        print(k,p)
    c1 += 1
  return (c1+c2)//(len(s))

m, n = 3,2
print(f"f1({m},{n}) = {f1(m, n)}")
#s=[1, 1, 2, 2, 3, 3]
#3 [1 2 3 1 2 3]
#3 [1 3 2 1 3 2]
#3 [2 1 3 2 1 3]
#3 [2 3 1 2 3 1]
#3 [3 1 2 3 1 2]
#3 [3 2 1 3 2 1]
#f1(3,2) = 16
```

### バーンサイドの補題のプログラム（その２）

その１のプログラムは忠実に実装しているのでパターンがどんなものであっても正解がでるのですが、あまり効率的とは言えません。

$m$色で$n$個ずつ塗った時の円順列のように規則性があるパターンの場合には、以下のように約数を使って考えると計算のみで答えを出すことが出来ます。


1. $G = m \times n$の約数でmの倍数のもの $d_i$とする（例題では2）
1. $d_i$はmの倍数なので元のパターンを$d_i$個に分割できる。（例題では[1,2,3]）
1. この分割したパターンの順列の数を$mg[d_i]$とする（例題では6）
1. $d_i$の大きい方からその倍数で3.でまだ値を求めてないものがあれば$mg[d_i]$と同じ値にする（例題ではなし）
1. これらの合計をとってGで割る

プログラムにすると以下になります。**dperm**は同じものを含む順列の数を返す関数です。

ここではf2(2,6)を求めていますが、3.のケースが8と10で現れています。

* mg[8] = mg[4]
* mg[10] = mg[2]  （他の2の倍数の4,6,8は既に値が求まっている）

```python 
import sympy 
from math import factorial as fct
def dperm(a): # number of distinct permutation 
  ret = fct(sum(a))
  for r in a:
    ret //= fct(r)
  return ret 

def f2(m,n):
  G = m*n
  di = list(reversed([d for d in sympy.divisors(G) if d % m == 0 and d < G]))
  mg = [0]*(G+1)
  mg[G] = dperm([n]*m)
  for d in di:
    mg[d] = dperm([d//m]*m)
    for i in range(2, G//d):
      if mg[d*i] == 0: mg[d*i] = mg[d]
  print(f"m,n = {m},{n}, G = {G}, di={di}, mg = {mg}")
  return sum(mg)//

m, n = 2,6
print(f"f2({m},{n}) = {f2(m, n)}")
#m,n = 2,6, G = 12, di=[6, 4, 2], mg = [0, 0, 2, 0, 6, 0, 20, 0, 6, 0, #2, 0, 924]
f2(2,6) = 80
```
（開発環境：Google Colab）

この考え方はProject Euler: Problem 281 Pizza Toppingsを解くのに役に立ちます。
Rails7 button_toでdata: { turbo: false }でも確認ダイアログを表示させる

# やりたいこと
削除ボタンに対して、Turboは無効化し、確認ダイアログは表示させたい。
しかし、 turbo_confirmを用いた実装ではTurboが無効化されているため、確認ダイアログの表示ができない。

参照
https://qiita.com/jnchito/items/5c41a7031404c313da1f#confirm%E3%82%84disable_with%E3%81%BF%E3%81%9F%E3%81%84%E3%81%AA%E6%A9%9F%E8%83%BD%E3%81%A8turbo%E3%81%AF%E4%B8%8D%E5%8F%AF%E5%88%86

> また、GETリクエストを送るリンクであっても、Turboを無効化した上で確認ダイアログを出す、といったことはできません。なぜなら、Turboを無効化することで、turbo_confirm:オプションも無効化されるからです。

# 実装方針
JSを使って確認ダイアログを表示させます。

```erb
<%= button_to "削除する", reservation_path(reservation), method: :delete, data: { turbo: false }, form: { onSubmit: "return check()" } %>
```
```javascript
function check(){
  if(window.confirm('本当に削除しますか？')){ 
    return true;
  }
  else{
    window.alert('キャンセルされました'); 
    return false; 
  }
}
```
[NestJS] 認証でハマった

# 概要
[公式のドキュメント](https://docs.nestjs.com/security/authentication)を見て学習していたら、エラーがでて困った。
# エラー内容
```
[Nest] 3551  - 06/10/2022, 6:41:52 AM   ERROR [ExceptionsHandler] Unknown authentication strategy "local"
Error: Unknown authentication strategy "local"
･･･
```
# 対処
・ app.module.tsのimportsにAuthModuleを追加する。
```diff_typescript:app.module.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { UsersModule } from './users/users.module';
import { AuthModule } from './auth/auth.module';

@Module({
  imports: [
    UsersModule,
+   AuthModule
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

```
・ users.service.tsのexportsにUsersServiceを追加する。(ドキュメントの見落とし。。。)
```diff_typescript:users.module.ts
import { Module } from '@nestjs/common';
import { UsersService } from './users.service';

@Module({
  providers: [UsersService],
+  exports: [UsersService],
})
export class UsersModule {}
```
環境変数の設定【Next.js】

Next.jsのSSRを実装し、本番環境で確認すると
SSRページにアクセスすると404になってしまいました。

```javascript:
export async default getServerSideProps() {
  try {
    const API_URL = process.env.API_URL;
    await axios.get(`https://${API_URL}`;
  } catch {
    return {
      notFound: true,
    };
  }
}
```

かなり簡略化してますがこんな感じで、APIのURLをenvに入れて
それを読み込む形でAPIを叩いていましたが、例外処理になってしまい
catchの方のnotFound(404)が返ってしまっているようでした。
試しにconsole.logをフロント側にconsole.logで渡してみましたが、undefinedになりました。

```javascript:
export async default getServerSideProps() {
  const apiUrl = process.env.API_URL;
  return {
    props: {
      apiUrl
    }
  };
}

const Page = ({ apiUrl }) => {
  console.log(apiUrl); //結果：undefined
  return <></>;
}
```

## 解決策
調べてみたら、環境変数の設定が間違えていました。
元々は下記のようにしていましたが
```:envファイル
API_URL="example.com"
```

下記のように、`NEXT_PUBLIC`を頭につけてあげないといけないようです。
```:envファイル
NEXT_PUBLIC_API_URL="https://example.com/"
```

知らなかった！

変数変えてあげたら無事表示されました◎


## 参考
[NextJS における環境変数まわりの挙動まとめ](https://blog.ojisan.io/next-env/)
【備忘録】AWS LightsailのRedmineで検索エンジンに引っかからないようにする。

### はじめに
Redmineを環境構築した際、関係者以外には知られたくないもの。デフォルト設定の場合、検索エンジンに引っかかるため、検索エンジンから除外する設定を実施する。

```shell
cd /opt/bitnami/redmine/app/views/layouts

bitnami@ip-172-26-8-75:/opt/bitnami/redmine/app/views/layouts$ ls
admin.html.erb  base.html.erb  _file.html.erb  mailer.html.erb  mailer.text.erb
```
→`base.html.erb`を変更する必要あり！！

```html:変更箇所
<!DOCTYPE html>
<html lang="<%= current_language %>">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title><%= html_title %></title>
<meta name="robots" content="noindex,nofollow">　　←１行追加する。
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<%= Redmine::Info.app_name %>" />
<meta name="keywords" content="issue,bug,tracker" />
```
【Angular】RxJSまとめ(初級)

### 書こうと思ったきっかけ
Angularをさわりはじめて半年以上経ちましたが、実務で成り行きで使っていたところもあり、一度基本に立ち返り基礎的な部分をまとめてみようと思いました。


### RxJSとは
非同期処理やイベントハンドリングを扱いやすくするためのライブラリで、Angularに標準装備されています。

### RxJSを使うメリット
* 非同期処理を容易にできる
　Angularの場合はTypeScriptなので、Promise,async/awaitがあるので、そこまで容易にできると感じた
　ことはないですが、一応メリットにはなるかと思います。

* メソッドチェーンによるシンプルな記述
　　オペレータと呼ばれるメソッドチェーンをつないでデータを処理、加工しますが、ネストが深くならないので、
　　読みやすいです。

### 処理の流れ
処理の流れとしては、
1.ストリームの生成
2.データの加工
3.データの処理
の順で行われます。それぞれについて、詳しく書いていきます。

#### 1.ストリームの生成
RxJSの処理の流れは、よく川の流れに例えられます。
まずは、データを川に流してあげる必要がありますが、それを行なうのが、下記のようにストリームを生成します。


```typescript
// ①of
// 引数を幾つでも持つことができます。引数をそのまま流します。配列は持てません。
const observableOf = of(1,2,3);
observableOf.subscribe(data =>
  console.log(data));

//　結果
// 1
// 2
// 3


// ②from
// 引数に配列を持つことができます。配列要素を順次流します。
const observableFrom = of([1,2,3]);
observableFrom.subscribe(data =>
  console.log(data));

//　結果
// 1
// 2
// 3


// ③interval
//データを流す間隔(msec)を引数にとり、指定した間隔ごとにデータを流します。
//注意点としては、どこかで止めないと永遠に流れ続けるので、takeで止める必要がある。pipe,takeについては後述する。
const observableInterval = interval(1000);
observableInterval.pipe(take(5)).subscribe(
  (t) => console.log(t));
//　結果
// 0
// 1
// 2
// 3
// 4

```

#### 2.データの加工
次は流れてきてデータを加工します。もちろん、加工しない場合はここは不要です。
少しだけオペレータを紹介しますが、JSの配列が持っているメソッドと使い方が似ているので、難しくはないかと思います。
また、基本的にはrxjs6以降、オペレータはpipeメソッドの引数に渡さなくてはなりません。
```typescript
// ①map
// ストリームから流れてきたデータを一つずつ関数に渡していきます。
const numsMap = of(1, 2, 3)
  numsMap.pipe(
    map((n) => n * n))
  .subscribe((o) => console.log(o));

//　結果
// 1
// 4
// 9


// ②filter
// ストリームから流れてきたデータは、条件に合うものだけを次の処理に渡します。
const numsFilter = of(1, 2, 3, 4, 5, 6)
  numsFilter.pipe(
    filter((n) => n % 2 === 0))
  .subscribe((o) => console.log(o));

//　結果
// 2
// 4
// 6

// ※随時、追加していきます。
```



#### 3.データの処理
最後にデータの処理です。加工されたデータが最終的にはここに行き着き、ストリームの終端になります。
既に出てきていますが、データを受け取るためにsubscribeを使います。
subscribeは通常は引数は一つだけですが、３つ受け取れるようになっています。


```typescript
subscribe(next, error, complete)
```
next, error, completeの３つはそれぞれ、下記のように使用されます。

#### next 
通常時に使用する。ストリームから流れてきた数だけ処理する

#### error
ストリーム内でエラーが発生した際に呼び出される。

#### complete
正常に終了した場合に呼び出される。

```typescript
const numsMap = of(1, 2, 3)
  numsMap.pipe(
    map((n) => n * n))
  .subscribe(
    o => console.log(o),  
    err => console.error(err),
    () => console.log("complete")
);

```

また、subscribeの他にunsubscribeというものもあり、これはデータの受け取りを終了させるためにあります。
データの個数があらかじめわかっている場合や、takeオペレータを使って終了条件が定義されていればunsubscribe不要ですが、
（自動的にunsubscribeが呼び出されている）intervalオペレータ等はデータの終わりががないため、指定がない限り永遠に待ち続けます。
ここについては別記事で詳しく書く予定です。



#### 参考にした記事
https://qiita.com/FumioNonaka/items/b625ab4373de38beb2ed
RxJS 入門 著者　ponday_dev様
peerDependenciesMetaのoptionalとoptionalDependenciesの違いとは？

package.jsonに設定する項目に、`peerDependenciesMeta` `optional:true`と書かれているのを見て、`optionalDependencies`との違いが分からなかったので調べてみました。

:::note
もし間違いがありましたら、コメントか編集リクエストをお願いします
:::

## 違い

このように書かれていました。

https://github.com/npm/cli/issues/1247#issuecomment-729583821

> they're entirely different, albeit similar. optionalDependencies means, if the dep fails to install, don't fail the overarching install. peerDependenciesMeta allows you to provide extra information about peer deps, and marking one "optional" means "it's not an error if it's missing".

DeepL訳

> 似たようなものではありますが、まったく別のものです。optionalDependencies は、その dep がインストールに失敗しても、全体的なインストールを失敗させないことを意味します。peerDependenciesMeta は、仲間の dep に関する追加情報を提供することができ、optional とマークすることは、「それが欠けていてもエラーにはならない」ことを意味します。

とはいえ、これだけ見てもちょっと分からなかったので、それぞれがどのような時に使うのかを調べてみます。

## optionalDependencies

https://docs.npmjs.com/cli/v7/configuring-npm/package-json#optionaldependencies

> If a dependency can be used, but you would like npm to proceed if it cannot be found or fails to install, then you may put it in the optionalDependencies object. This is a map of package name to version or url, just like the dependencies object. The difference is that build failures do not cause installation to fail. Running npm install --no-optional will prevent these dependencies from being installed.

dependencyのインストールに失敗する可能性があり、失敗があった時にもエラーが起きないことを示す時に使います。
例えば、環境によってインストールに失敗することが想定されており、プログラム内でそのエラーをキャッチして処理を継続させられる時などに使うようです。

https://zenn.dev/catnose99/articles/7dfcd5b3e5b141

## peerDependenciesMeta

https://docs.npmjs.com/cli/v7/configuring-npm/package-json#peerdependenciesmeta

以下のように使い、peerDependenciesに追加情報を与えます。
`"optional": true`とすることで、そのpeerDependenciesがoptionalであることを表現できます。

peerDependenciesは、npm v7以降自動でインストールされますが、この設定をすることで自動でインストールする必要がないことを示せます。

```json
{
  "name": "tea-latte",
  "version": "1.3.5",
  "peerDependencies": {
    "tea": "2.x",
    "soy-milk": "1.2"
  },
  "peerDependenciesMeta": {
    "soy-milk": {
      "optional": true
    }
  }
}
```

これの使い道としては、peerDependenciesとしてサポートするバージョンを指定したいものの、それをインストール必須にしたくない時などです。

https://github.com/npm/rfcs/issues/221

webpack-cliにおいて、`@webpack-cli/serve`でwebpack-dev-serverがoptionalとして設定されていますが、これは`serve`コマンドを実行するときにはwebpack-dev-serverが必要なためのようです。

https://github.com/webpack/webpack-cli/pull/1712/files

## 参考

- https://docs.npmjs.com/cli/v7/configuring-npm/package-json#peerdependenciesmeta
- https://github.com/npm/rfcs/issues/221
- https://github.com/npm/cli/pull/224
- https://github.com/npm/cli/issues/1247#issuecomment-729583821
EC2で"Ubuntu 22.04"インスタンスを作成後にログイン出来ない

## 事象
2022/06/10起票
Ubuntu 22.04 LTSインスタンスを起動したが、ログインが出来ない

ユーザ名、使用キーに間違いは無い
```shell
ssh -i "rdgw-key.pem" ubuntu@ec2-11-111-111-111.ap-northeast-1.compute.amazonaws.com
Warning: Identity file rdgw-key.pem not accessible: No such file or directory.
The authenticity of host 'ec2-11-111-111-111.ap-northeast-1.compute.amazonaws.com (11.111.111.111)' can't be established.
ECDSA key fingerprint is SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'ec2-11-111-111-111.ap-northeast-1.compute.amazonaws.com,11.111.111.111' (ECDSA) to the list of known hosts.
ubuntu@ec2-11-111-111-111.ap-northeast-1.compute.amazonaws.com: Permission denied (publickey).
```

## 原因
Openssh8.8以降ではSSH鍵認証でのRSA認証が無効化されており、作成したUbuntu 22.04 LTSインスタンスではOpenssh8.9p1-3が使用されているため、インスタンス作成時に指定したキーペアのタイプがRSAの場合使用できない。
参考：[Jammy Jellyfish Release Notes](https://discourse.ubuntu.com/t/jammy-jellyfish-release-notes/24668)
参考：[https://www.openssh.com/txt/release-8.8](https://www.openssh.com/txt/release-8.8)
## 対応
[アクション]->[イメージとテンプレート]->[同様のものを作成]で同じ設定のインスタンスを再作成し、キーペアの設定でキーペアのタイプをED25519で作成しているキーを作成して使用する。
![ed25519.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298070/ea7b2f26-214f-15d8-7195-a94f9cfe05db.png)
SDGs　カラーリスト　HEX,rgba

# SDGs 17のアイコンのカラー設定

自分が、一覧で欲しかっただけです。
せっかく抜き出したんで。

|目標|HEX|RGBa|
|:--|:--|:--|
|1貧困をなくそう|#e5243b|rgba(229,36,59,1.00)|
|2飢餓をゼロに|#DDA63A|rgba(221,166,58 ,1.00)|
|3すべての人に健康と福祉を|#4C9F38|rgba(76,159,56,1.00)|
|4質の高い教育をみんなに|#C5192D|rgba(197,25,45,1.00)|
|5ジェンダー平等を実現しよう|#FF3A21|rgba(255,58,33,1.00)|
|6安全な水とトイレを世界中に|#26BDE2|rgba(38,189,226,1.00)|
|7エネルギーをみんなに。そしてクリーンに|#FCC30B|rgba(252,195,11,1.00)|
|8働きがいも経済成長も|#A21942|rgba(162,25,66,1.00)|
|9産業と技術革新の基盤を作ろう|#FD6925|rgba(253,105,37,1.00)|
|10人や国の不平等をなくそう|#DD1367|rgba(221,19,103,1.00)|
|11住み続けられるまちづくりを|#FD9D24|rgba(253,157,36,1.00)|
|12つくる責任、つかう責任|#BF8B2E|rgba(191,139,46,1.00)|
|13気候変動に具体的な対策を|#3F7E44|rgba(63,126,68,1.00)|
|14海の豊かさを守ろう|#0A97D9|rgba(10,151,217,1.00)|
|15陸の豊かさも守ろう|#56C02B|rgba(86,192,43,1.00)|
|16平和と公正をすべての人に|#00689D|rgba(0,104,157,1.00)|
|17パートナーシップで目標を達成しよう|#19486A|rgba(25,72,106,1.00)|


## 参考
SDGsのポスター・ロゴ・アイコンおよびガイドライン
2019年8月付、改定版

https://www.unic.or.jp/activities/economic_social_development/sustainable_development/2030agenda/sdgs_logo/

https://www.unic.or.jp/files/SDG_Guidelines_AUG_2019_Final_ja.pdf