OmniAICreator/Qiita-1.07M huggingface dataset:
ＦｒｅｅＢＳＤで AWS Session Manager Plugin を導入してみる

# はじめに

[AWS Systems Manager Session Manager](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager.html)とは、

- 「ＡＷＳシステムマネージャー」サービスの一つであるところの、「セッションマネージャー」という機能である（石を投げないで！）。
- これはＡＷＳ管理コンソールやＡＷＳＣＬｉ等によりＥＣ２やＥＣＳ等のインスタンスにアクセスまたはログインするための機能である。
- この機能を使用してインスタンスへアクセスすると、（グローバルＩＰでの）受信ポートの維持や、踏み台サーバーの用意、ＳＳＨ鍵の管理といった準備が不要になる。
- バックエンドで稼動するインスタンスが多く、グローバルに公開して無い場合や、孤立した、いわゆるプライベートネットワーク内に設置されたサーバーにアクセスする場合に嬉しい、あるいは必要となる機能である。
- またＩＡＭユーザー（あるいはグループ）単位でアクセス制御が可能となるため、権限設定がワンストップで行える。
- ただし、この機能の利用にあたり、対となる [Session Manager Agent](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/ssm-agent.html) のインストールが必要で、サーバーのコンソール画面にアクセスできるというものではない。
- またＩＡＭポリシーによるアクセス制御、各種サービス（クラウドトレイル、クラウドウォッチ等）と連携してログ記録・監査が可能である。

# インストール

- ~~２０２１年１０月２９日現在ｐｏｒｔｓでは提供されていない。~~
- [２０２３年０１月１８日](https://cgit.freebsd.org/ports/commit/?id=b3cf3d7a458712063e30e35c45b2adf886010656)にｐｏｒｔｓに取り込まれた。
- 以後 `pkg install amazon-ssm-plugin` で一発インストール可能である。
- 使用時に必要となるケアは可能な限り施したつもりである。

# 使用方法

権限の話とか、エージェントの話をすっとばして話をすると、ごくシンプルに下記のようにして実行すればよい。
どのプロファイルを使うのか、リージョンの指定等については、aws コマンドの仕様に準拠する。

```shell-session
aws ssm start-session --target インスタンスＩＤ
```

# 本ｐｏｒｔｓ作成のモチベーション

- Ｗｉｎｄｏｗｓターミナルで操作していたが略。
- Ｌｉｎｕｘ環境はほぼ開発環境なので、運用に適した（複数案件のアクセスキーを収納するような）サーバーが手元には無かった。
- ドキュメントのＦｒｅｅＢＳＤ除外感。
- 昔ドキュメントを読んでたときには無かったＧｉｔＨｕｂへのリンク。ＧｉｔＨｕｂを見るとそこにはコードが…。
- 作るしか無いな。この無限の荒野に。

# 参考文献

- [amazon-ssm-plugin Amazon AWS Manages shell experience using SSM APIs](https://www.freshports.org/sysutils/amazon-ssm-plugin/)
- [AWS Systems Manager Session Manager](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager.html)
- [(オプション) AWS CLI 用の Session Manager プラグインをインストールする](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager-working-with-install-plugin.html)
- [ステップ 8: (オプション) Session Manager を通じて SSH 接続を有効にする](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager-getting-started-enable-ssh-connections.html)
- [セッションを開始する](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/session-manager-working-with-sessions-start.html)
- [SSM エージェントを使用する](https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/ssm-agent.html)
- [aws/session-manager-plugin: This plugin helps you to use the AWS Command Line Interface (AWS CLI) to start and end sessions to your managed instances](https://github.com/aws/session-manager-plugin/)
VSCodeのスニペットの設定に便利な拡張機能

VSCodeのスニペットはとても便利な機能です．スニペットを使えば，頻繁に使うコードのかたまりを一瞬で書き出すことができます．（スニペットがわからない方は[こちら](https://qiita.com/GrowUp-Haruno/items/b662d38ef2ed7e1d0480)．）

ですが，VSCodeのスニペットを使うには，JSON形式のスニペットファイルに，呼び出したいコードを`"",`で囲って登録するという，少々めんどくさい作業が要ります（詳しくは[こちら](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets)）．そこで今回は，スニペットをかんたんに登録できる拡張機能 [Snippet Utilities](https://marketplace.visualstudio.com/items?itemName=knttnk.snippet-utilities) をご紹介します（私が作りました）．

# Snippet Utilities のインストール
VSCodeを開き，拡張機能Marketplaceで， `Snippet Utilities` と検索し，インストールします．
![SnippetUtilities.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817119/966c47fb-2148-3b1f-8fae-0c3a50e03133.png)
このアイコンが目印です．

もしくは，[Snippet Utilities](https://marketplace.visualstudio.com/items?itemName=knttnk.snippet-utilities)にアクセスして，VSCodeにインストールします．

# Snippet Utilities の使い方

1. VSCodeにおいてコードの編集中に，スニペットととして登録したい部分を選択します．
![スニペット化する部分を選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817119/e0ef1b54-0b36-962e-c978-077b380138c8.png)

2. `Shift` + `Alt` + `S`（Macなら`Shift` + `Option` + `S`）を押します．もしくは，右クリックから "Add selection to user snippets."をクリックします．

3. どの言語のスニペットファイルに追加するかを選びます．
![言語を選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817119/b3dc76db-2261-0e3c-ad55-73ccaafc102f.png)

4. スニペットが追加されたと思います．スニペットの名前と，`prefix`，`description`をわかりやすいものに変更します．また，必要に応じて`body`に`${1:label}`などを追加します．くわしい文法は，[公式ドキュメントの Snippet Syntax](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax) を読めばすぐに理解できると思います．
![完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1817119/24542fd7-ab3c-9c14-14af-a93684496ef6.png)

# その他の機能
一文字も選択せずに`Shift` + `Alt` + `S`（Macなら`Shift` + `Option` + `S`）を押すと，単にスニペットファイルを開きます．これを使うと，素早くスニペットファイルを開いて直接編集することができます．

# おわりに
これでもう，1行1行`"",`で囲む作業とはおさらばです．
（拡張機能のアイコンの由来がわかりましたか？）

ちなみに，初めてのQiitaへの投稿でした．お気づきの点があればご連絡お願いします．
特に，新機能についてのご意見があれば，Qiitaか[GitHubのDiscussions](https://github.com/knttnk/snippet-utilities/discussions "GitHubのDiscussions")にお願いします！
非純正試薬で調整したライブラリーをIllumina Experiment Manager (IEM)に登録する

SMARTerを用いて調整したcDNAからKAPA HyperPrepおよびSeqCap adapterキットを用いてRNA-seqライブラリを構築した。

illuminaのシーケンサーで解析するためにillumina Experiment Manager（IEM）に登録する必要があるが、illumina社純正のキットしかIEMからは選択できない。

IEMにサードパーティー製のライブラリ調整方法やインデックス情報を反映させる方法を探した。KAPAの公式から出ているこのスライドを参考にした。https://www.n-genetics.com/products/1104/1024/18624.pdf

参考リンク通りの作業で解決した。
IEMが読み込む、”IndexKits”と”Applications”、"SamplePrepKits"のフォルダ直下にあるテキストファイルを書き換えるor追加でOK

特筆することでもないが、以下に注意
★元のフォルダごとバックアップを取りながら作業する　★近しいシステムのファイルをコピぺ＆修正して完成形に近づけていくこと（シングルエンドorペアドエンド？）　★IEMは起動時に読み込んだ”IndexKits”と”Applications”、"SamplePrepKits"を参照する。すなわち起動しながら作業しても、変更は反映されない。

インデックスはここを参考にいろいろやる（親の顔より見るPDF）
https://dnatech.genomecenter.ucdavis.edu/wp-content/uploads/2019/03/illumina-adapter-sequences-2019-1000000002694-10.pdf
正規表現で上司の無茶振りを解決してみた

## 正規表現とは？
- 正規表現は、強力で柔軟、かつ効率的なテキスト処理の鍵を握る存在
- 様々な用途に対応できる能力と表現力を持った一般的なパターン言語が発達してきた

いくつかの文字列を一つの形式で表現するための表現方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943494/a3dcd37f-cb29-711e-cb7c-2705b58fc4a2.png)

---
## 上司からの依頼(ユースケース)

「郵便番号を1つの項目で管理しているWebシステム。これを別項目で管理するようになるので移行します！
ただ、現状正しい書式で入っていないものもいくつかあるのでまずはその数を調査してほしい！」

---
## レコードは80万行あります！
---

## 依頼まとめ
1,住所項目に正しい郵便番号が設定されていないレコード数を調査
2,80万行のCSVファイルから(カンマで値を区切ったテキストファイル)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943494/9b7becea-7fdd-ff76-2989-82dd0e6c3b50.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943494/a1d7aed3-d05a-7fbb-c042-d9a6b6e41c46.png)

---
## 考えられる手法
1.CSVならEXCELが得意！Excelやスプレットシートに貼り付けて検索しよう！
→80万行、、やりたくない

2,俺の目に任せろ(目視で件数を数える)
→この根性は別のタイミングで活かしましょう

---
## この要件の法則
1. 行の中でカンマ3番目以降が郵便番号
2. 郵便番号は3桁数字+ハイフン+4桁数字 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943494/9b7becea-7fdd-ff76-2989-82dd0e6c3b50.png)

## 正規表現
この文字列で検索してみよう！
` \d{3}-\d{4}`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943494/bd7226c9-a538-3aa7-cdab-595f6c2be626.png)
`\d`：数字を表現
`{n}`：繰り返し

ただ、このやり方には問題が、、。

---

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943494/b3ba377e-caa8-1dac-6f29-2cf4a0d4e723.png)

- 1603-8135のような行がヒットする
- そもそも誤った郵便番号が設定されていない行を知りたい


---
この要件を満たすために以下の正規表現で検索をかけてみる。
`(?<=^([^,]*,){3})(?!\d{3}-\d{4}[^\d])`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943494/5894e58f-c43f-887f-955c-c71f79e76357.png)

### 解説
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943494/8961162d-9e52-16f8-736b-86787f61b985.png)

左の部分で先頭から3番目のカンマ区切り位置を表現して、右側で郵便番号の書式が存在しないことを表現している。


---
### まとめ

正規表現を使えばあらゆるパターンで合致できる。
否定的後読み(`?<=`)や肯定的先読み(`?=`)は初めて知った。
【SharePoine Online】リストのフォームでタイトルが非表示になってしまったのを表示させる

何の拍子かわからないのですが、新規アイテムを追加しようとすると
リストのフォームから「タイトル」が消える事象が発生することがあります。
そのとき小１時間かけて解消したときの手番メモです。

####手順

1. [コンテンツタイプの管理を許可する]を[はい]を選択

2. コンテンツタイプの「アイテム」に、既存列の「タイトル」を追加する

3. 「タイトル」追加後、[コンテンツタイプの管理を許可する]を「いいえ」に戻す

※「はい」のままだと、フォームに「コンテンツタイプ」が出っぱなしになってしまうため

####参考記事
逆にタイトルを非表示にしたい場合はこちら。

リストアイテム新規・編集フォームでタイトル列を非表示にする

https://www.sharepoint.jp.net/2015/01/22/%E3%83%AA%E3%82%B9%E3%83%88%E3%82%A2%E3%82%A4%E3%83%86%E3%83%A0%E6%96%B0%E8%A6%8F-%E7%B7%A8%E9%9B%86%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%A7%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E5%88%97%E3%82%92%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AB%E3%81%99%E3%82%8B/
S3に適切な権限を付与しよう


今回はAWS S3（Amazon Simple Storage Service）の適切な権限を付与して行きたいと思います。
静的なWebサイトの公開などの際に有効かと思います。

# S3のアクセス制限について

S3は必要に応じて特定のアカウント、IAMユーザー、AWSリソースにアクセス権限を設定することができます

## 　アクセスコントロールリスト(ACL)
・他の特定のAWSアカウントに対してバケット・オブジェクトへのアクセス権限を付与する
・誰にでもバケット・オブジェクトへのアクセス権限を付与できる

## 　バケットポリシー
・ACLより権限をもっと細かく設定できる（ex. 特定のIPアドレスからのアクセスを許可）
・主にALCよりこちらを使用していく

## 　IAMポリシー
・IAMユーザーに対してS3へのアクセス権限を設定できる

## 　パブリックブロックアクセス
・ACLとバケットポリシーについて、新規の公開を防ぐ設定と、既存の公開を修正する設定

以下のサイトがわかりやすいです↓↓↓

https://dev.classmethod.jp/articles/s3-block-public-access/

# 　実践

バケットポリシーを利用してHTMLファイルを公開する際に適切なアクセス権限をつけていきましょう。まず、パブリックブロックアクセスを設定していきます。ACLを介してアクセス権限の設定をしないのでブロックを「オン」、一方でバケットポリシーを介してアクセス権限の設定を「オフ」にします。

＊バケットポリシーを編集したあとは<strong>「新しいパブリックバケットポリシーまたはアクセスポイントポリシーを介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする」</strong>をオンにするべきです。

![スクリーンショット 2021-10-29 17.39.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1295942/acdde1e8-25f6-4a31-b786-1829cc17a7ad.png)



# 　バケットポリシー

## 全ての人に対して閲覧権限を付与

```yaml

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "BucketPlicy",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::＜バケット名＞/*"
        }
    ]
}

```

## 特定のIPアドレスのみアクセスを許可

```yaml

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "IpAddress",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::＜バケット名＞/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": "IPアドレス"
                }
            }
        }
    ]
}
```

## 　参考文献

https://zenn.dev/ymasutani/articles/019959e7c990b1

https://qiita.com/K5K/items/ef6a02aee760b128a25b#2-2-%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC

https://morizyun.github.io/infrastructure/aws-s3-bucket-policy.html

https://zenn.dev/mn87/articles/726f7e3574e2fb

https://aws.taf-jp.com/blog/25231
【Rails】validateはカスタムメソッド

よく使用する```validates```とめちゃくちゃ似てるカスタムメソッド
モデルの状態を確認し、無効な場合にerrorsコレクションにメッセージを追加するメソッドを作成できる


```model.rb
class Invoice < ApplicationRecord
  validate :expiration_date_cannot_be_in_the_past

  private

  def expiration_date_cannot_be_in_the_past
    if expiration_date.present? && expiration_date < Date.today
      errors.add(:expiration_date, ": 過去の日付は使えません")
    end
  end
...
end
```

###RSpecでテストする際

expiration_date_cannot_be_in_the_pastメソッドがprivateだった場合、
モデルの単体テストではなく、リクエストテストで期待するエラーが返るかのテストをする方がよいらしい。

##参考

https://railsguides.jp/active_record_validations.html#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89

https://railsdoc.com/page/validate
なんとなーく SPA と SSR を理解する


サーバーサイドエンジニアとして転職して、早 5 ヶ月が経とうとしています。
最近 Nuxt.js を勉強し始め、SPA と SSR の違いや、
転職の際に Laravel で作成したポートフォリオのようなものはなんと呼ぶんだろう？と疑問に思ったため、ざっくりまとめました。

## MPA とは

MPA というのが、Vue や React を組み込まず、Laravel や rails などの Blade などのテンプレートエンジンでフロント作成するやつです。
僕のように就活時に Laravel のみで作成したポートフォリオのことです。

M(multi)P(page)A(application)の略です。
ページごとに HTML を作成しているため、Multi(複数)のページで構成されたアプリケーションということです。

## SPA とは

S(single)P(page)A(application)の略です。
Vue や React は、1 つの HTML ファイルの中身を変えることで複数のページを表示しています。
Single(単一)のページで構成されたアプリケーションということです。

## SSR とは

S(serber)S(side)R(rendering)の略です。レンダリングについては[こちら](https://wa3.i-3-i.info/word1359.html)
サーバーサイドというので MPA と同じように思ってしまいがちですが、実はほぼ SPA なんです！

どういう意味？となりますが、SSR は SPA のデメリットを補うために現れたものなので、SPA のデメリットを理解すれば意味はわかってきます。

## SPA のデメリット

これら以外にもデメリットはあるかと思いますが、この記事の目的は「なんとなーく」の理解なので最低限にさせていただきます。

1.**_初期ローディングに時間がかかる_**
2.SEO が不利になる

今回は 1 のみを考慮した説明をしていきます。

SPA がなぜ初期ローディングに時間がかかってしまうかというと、
ユーザーからの初回リクエストではサーバーから全コンテンツが返ってきます。それをブラウザ側で組み立てるので、初期表示に時間がかかってしまいます。
JavaScript のファイルが多い程、処理時間がかかってしまいます。

## 簡単にまとめる

SPA のデメリットもわかったところで、そこをどうカバーしているのかを完結に説明します。

SSR は、初回リクエストをサーバー側で組み立てます.
SPA のようにブラウザ側に全て任せず、サーバー側も協力してくれるので早いというわけです。

ということは、MPA と変わらないんじゃ？と思いがちですが、
SSR では、2回目以降は SPA と同じ動きをします。

SPA の初回ローディングが遅いというデメリットを、**サーバーにも作業を共有する**ことで打ち消し、
MPA の HTML を複数作成する手間を、***SPAの処理を利用する***ことで打ち消しています。

## 参考

[SPA・SSR・SSG について整理してみた](https://kanat-blog.com/render-difference/)
djangoの可変長引数についてまとめてみた

本日のお題
-
今回は、djangoの可変長引数についてまとめます。

可変長引数とはその名の通りで、引数の数に自由度があるもののことを言います。

通常の関数は第一引数が名前、第二引数が年齢などと何番目になんの引数が来るのかを明確にします（例１）。

このため、引数の位置が逆になったり数が合わなかったりするとエラーになりますよね。

```python:例１
def info(name, age):
  print("私の名前はn" + name + "です。年齢は" + str(age) + "歳です。")
```
可変長引数に関しては数の指定がないので、いくつ引数を与えても処理をしてくれます。

目次
-

- 可変長引数その１〜*args
- 可変長引数その２〜**kwargs

可変長引数その１〜*args
-
可変長引数の一つ目は*argsです。

正確にいうと*が先頭についていればなんでも良いのですが、この引数を用いて定義された仮引数は可変長となります。

また、呼び出し時には、この部分に代入された引数全てがタプルの形で渡されます。

```python
def print_all(*args):
  print(args)

print_all(1, 3, 4)
# (1, 3, 4)
# print((1, 3, 4))と同じ処理
```
もし*argsと位置引数を併用する場合には、「可変長引数を最後に渡す」もしくは「可変長引数の後に渡す引数をキーワード形式にする」必要があります。

```python
# パターン１〜可変長引数を最後に配置
def my_families(name, *args):
  print(name + "さんの家族を紹介します")
  for arg in args:
    print(arg)

my_families("サザエ", "マスオ", "波平", "フネ", "カツオ", "ワカメ", "タラ")
# サザエさんの家族を紹介します。
# マスオ
# 波平
# ....以下省略......
# タラ

# パターン２〜可変長引数の後の引数はキーワード形式
def my_families(*args, name)
  print(name + "さんの家族を紹介します")
  for arg in args:
    print(arg)

my_families("マスオ", "波平", "フネ", "カツオ", "ワカメ", "タラ", name="サザエ")
```
可変長引数その２〜**kwargs
-
先程の*argsは不特定多数の引数をタプルの形で受け取りました。

**kwargs（正確にはアスタリスクが2つついた引数)ではキーワード形式の引数を辞書の形で受け取ります。

```python
def my_families(name, **kwargs):
  print(name + "さんの家族を紹介します")
  for kwarg in kwargs:
    print(kwarg + ":" + kwargs[kwarg])

my_families("サザエ", 夫="マスオ", 父親="波平", 母親="フネ", 弟="カツオ", 異妹="ワカメ", 息子="タラ")
# サザエさんの家族を紹介します。
# 夫：マスオ
# 父親:波平
# ...省略...
# 息子：タラ
```

なお、キーワード引数を用いて**kwargsを先に持ってくることは可能です。

終わりに
-
以上がpythonの可変長引数の取扱い方でした。

この話題について調べようとしたのは、以下のコードがきっかけでした。

```python
def PostForm(ModelForm):
  def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.fields["text"].required = False
```
modelFormクラスのrequiredオプションをfalseにしようと調べていたときに見つけたものです。

そちらも近々まとめます。
nginx: [emerg] zero size shared memory zone "one"

```
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: [emerg] zero size shared memory zone "one"
nginx: configuration file /etc/nginx/nginx.conf test failed
```

上記エラーはlimit_req_zoneが定義されていない場合にエラーが発生します

```nginx.conf
http{
	...
	limit_req_zone $remote_addr$http_x_forwarded_for zone=one:10m rate=100r/s;
	...
}
PRML 演習問題 1.4 解答

##はじめに
本記事は, 機械学習の教科書の決定版ともいえる, **Christopher Bishop先生**による[『Pattern Recognition and Machine Learning （パターン認識と機械学習）』](https://www.microsoft.com/en-us/research/people/cmbishop/prml-book/), 通称PRMLの演習問題のうち, 私が解いた問題の解答を記したものです. これは, 私の所属する[生物測定学研究室](https://www.ut-biomet.org/)の輪読会でPRMLを取り扱っており, その勉強の一環として演習問題を解いたときのものです. なお, 他の演習問題の解答例に関する記事については, [PRML　演習問題　解答集　まとめ](https://qiita.com/Lab_of_Biomet/items/15e38ca34fafa8176d89)をご覧ください.
# 問題
>
連続変数 $x$ 上で定義された確率密度 $p_x(x)$ を考える. $x = g(y)$ により非線形変換を施すと密度は(1.27)の変換を受ける. (1.27)を微分して $y$ に関する密度を最大にする位置 $\hat{y}$ と $x$ に関する密度を最大にする位置 $\hat{x}$ とが, ヤコビ因子の影響により一般には単純な $\hat{x} = g(\hat{y})$ という関係にないということを示せ. これは確率密度の最大値が, (通常の関数と異なり)変数の選択に依存することを示している. 線形変換の場合には最大値の位置が変数自身と同じ変換を受けることを確かめよ.

# 方針

素直に問題文に従って, (1.27)を微分して $y$ に関する密度を最大にする位置 $\hat{y}$ と $x$ に関する密度を最大にする位置 $\hat{x}$ とが, ヤコビ因子の影響により一般には単純な $\hat{x} = g(\hat{y})$ という関係にないということを示す.

# 解法

```math
\begin{align}
p_y(y) &= p_x(x)\left| \frac{dx}{dy} \right| \\
&= p_x(g(y))\left| g'(y) \right|
\tag{1.27}
\end{align}
```

まず、両辺を $y$ に関して微分する。

```math
\frac{d}{dy} p_y(y) = \frac{dp_x(g(y))}{dy} 
\cdot \frac{dg(y)}{dy} 
\cdot \left| \frac{dg(y)}{dy} \right|
+
p_x(g(y))\cdot\frac{d}{dy} \left| \frac{dg(y)}{dy} \right|
```

$\frac{d}{dx}p_x(x) = 0$ を満たす $x = \hat{x}$ を代入すると、

```math
\begin{align*}
\frac{d}{dy}p_y(y) 
&= 
\frac{dp_x(\hat{x})}{dy} 
\cdot \frac{d\hat{x}}{dy} \left| \frac{d\hat{x}}{dy} \right|
+
p_x(\hat{x}) \cdot \frac{d}{dy} \left| \frac{d\hat{x}}{dy} \right| \\
&=
\frac{dp_x(\hat{x})}{dx} \frac{dx}{dy} \frac{d\hat{x}}{dy} \left| \frac{d\hat{x}}{dy} \right|
+
p_x(\hat{x})\frac{d}{dy}\left|\frac{d\hat{x}}{dy}\right| \\
&=
p_x(\hat{x})\frac{d}{dy}\left|\frac{d\hat{x}}{dy}\right|
\end{align*}
```

となり、0になるとは限らない。よって $\hat{x} = g(\hat{y})$ は成り立たない。

一方で、 $x = g(y)$ が線形変換であるならば、

```math
\frac{d}{dy}\left|\frac{dg(y)}{dy}\right| = 0
```

よって、 $\hat{x} = g(\hat{y})$ が成り立つ。
自動化テストと手動テスト を比較する

![1-.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927922/4737e0ef-7a18-1186-2edf-b488983c5b6c.jpeg)

テスト自動化は、2020年のモバイルアプリテストのトップトレンドのの1つです。なぜQAチームがテスト自動化を好むでしょうか。自動化と比べて手動テストのメリットは何でしょう？この記事では、 自動化テストと手動テスト のメリットデメリットと短所をリストして、最適な方法を選択できるようにします。

 
<dt>1/ 自動化と手動テストの比較</dt><dt> 1.1. 手動</dt><dt>テストの実行：</dt>QAテスターによって手動で実行
<dt>テスト効率：</dt>時間がかかり、効率が悪い
<dt>タスクの種類：</dt></dt>完全に手動のタスク
<dt>テストカバレッジ：</dt>十分なテストカバレッジを確保するのが難しい
<dt> 1.2. 自動化</dt><dt>テストの実行：</dt>自動化ツールとスクリプトを使用して自動的に実行
<dt>テスト効率：</dt>短時間と高い効率で多くのテストが実行できる
<dt>タスクの種類：</dt></dt>実際のユーザーのアクションのシミュレーションなど、ほとんどのタスクは自動化でる
<dt>テストカバレッジ：</dt>十分なテストカバレッジを確保するのは簡単
<dl>

[【デモ動画】複数のモバイルデバイスで同時に自動化テストを実行する](https://jp.lotus-qa.com/qaservices/)。

<dt>2/ テスト自動化</dt>
 

<dt>2.1. テスト自動化のメリット</dt>

 <dd>回帰テストの実行、テスト環境のセットアップ、同様のテストデータの入力など、反復的なタスクを減らす。 </dd>
 <dd>テスト活動の制御と透明性の向上（テストプロセス、パフォーマンス、エラー率に関する統計とグラフがある)。 </dd>
 <dd>テストサイクルタイムを短縮し、ソフトウェアリリースの頻度をスピードアップする。 </dd>
 <dd>より良いテストカバレッジ </dd>
<dt>2.2. 自動化テストのデメリット</dt>
 <dd>自動化テスト（ツールのガイダンスとプロセス）に関するトレーニングに時間がかかる。 </dd>
 <dd>実際のユーザーの観点からテストを実行することはできません。 </dd>
 <dd>自動化テストツールが必要なため、企業はベンダーからツールを購入するか、無料のツールを使用することを検討する必要があります。 それぞれに長所と短所があります。 </dd>
 <dd>自動化テストは単なるテストツールであるため、テスト範囲を完全にカバーすることはできない。 </dd>
 <dd>テストスクリプトのデバッグの問題により、テストのメンテナンスにはコストがかかる。 </dd>
 
<dl>
<dt>動画をみる : 素晴らしいモバイルアプリ：スマートに自動化を活用する</dt>https://www.youtube.com/watch?v=OxJUPIlcRTU 
<dl>


<dt>3/ 手動テスト</dt><dt>3.1. 手動テストのメリット</dt>
<dd>より複雑なテストケースを扱うことができる </dd>
 <dd>より安価で、ツールのコストを削減する。 </dd>
 <dd>小さな変更のテストに適している（自動化テストを設定するための時間と労力が無駄になる）。 </dd>
 <dd>アドホックテストまたは探索的テストを実行できる。 </dd>
 <dd>GUI（グラフィカルユーザーインターフェイス）など、ソフトウェアの視覚的側面をテストする。 </dd>
<dt>3.2. 手動テストのデメリット</dt>
 <dd>間違いを犯さないように人間による手動。 </dd>
 <dd>テストプロセスを書き換えることができないため、再利用できない。 </dd>
<dd>多数のテストケースがある大規模なプロジェクトでは時間がかかる。 </dd>
 <dd>負荷テストとパフォーマンステストを実行できない。 </dd>
多くの企業が自動化テストを使用することで恩恵を受けていますが、それらが生成する値はほとんど変わりません。 どちらの方法にも長所と短所があるため、自動化は手動テストに取って代わるべきではありません。 企業は、自動化テストをDevOps、モバイル、IoTでの新しい作業方法を実行するチャンスと見なす必要があります。
<dl>
自動化がソフトウェア開発プロジェクトにどのように役立つかについてさらに知りたい方は、お問い合わせください。
Website: https://jp.lotus-qa.com/
Tel: (+84) 24-6660-7474
Fanpage: https://www.facebook.com/LotusQualityAssurance
【無料トライアル】セキュリティの「めんどくさい」を解決したい！デベロッパーファーストのSnyk入門編

この記事は、デベロッパーファーストのセキュリティプラットフォームSnykの入門編です。[Snykのドキュメント](https://docs.snyk.io/)の [Introduction to Snyk](https://docs.snyk.io/introducing-snyk/introduction-to-snyk?utm_medium=Referral&utm_source=Qiita) 及び [Getting started with Snyk products](https://docs.snyk.io/getting-started/getting-started-snyk-products?utm_medium=Referral&utm_source=Qiita)を翻訳した内容になります。
![logo-vertical-solid-background.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2216557/cab870a4-7d28-977c-6e8a-0f294554117f.png)


#Snykとは
Snyk（スニーク）はデベロッパーファーストのセキュリティプラットフォームです。Snykは、コードやオープンソースとその依存関係、コンテナやIaC(Infrastructure as a Code) における脆弱性を見つけるだけでなく、優先順位をつけて修正するためのツールです。
Gitや統合開発環境（IDE）、CI/CDパイプラインに直接組み込むことができるので、デベロッパーが簡単に使うことができます。

##対応言語とインテグレーション（IDEやCI/CDなど）
JavaScript、Java（Gradle、Maven）、.NET、Python、Golang、Swift、Objective-C（CocoaPods）、Scala、Ruby、PHP、Bazelなど、Snykは以下のような様々な言語をサポートしています。詳細は[こちら](https://docs.snyk.io/products/snyk-open-source/language-and-package-manager-support)をご覧ください。

デベロッパーファースト（開発者を第一）に考えておりますので、Snykは主要なIDE、リポジトリ、CI/CDなど、さまざまなツールと統合可能です。詳細は[こちら](https://docs.snyk.io/features/integrations?utm_medium=Referral&utm_source=Qiita)ご覧ください。

##セキュリティと脆弱性データ
Snyk Intel Vulnerability Database（スニーク脆弱性データベース）として知られる当社のセキュリティ・インテリジェンス・データベースは、専門の研究チームが管理しています。公開ソース、開発者コミュニティからのご支援、独自の研究、機械学習を組み合わせて、最新の脅威情報に日々対応しています。
詳細は[こちら](https://snyk.io/snyk-intelligence-security/?utm_medium=Referral&utm_source=Qiita)をご覧ください。

#【無料トライアル】Snykを試してみよう！
まずはSnykを無料で試してみましょう。
ステップ１　弊社Webサイト（[https://snyk.io](https://snyk.io/?utm_medium=Referral&utm_source=Qiita)）に進み、右上のSign upボタン（下記の赤枠）を押す
![スクリーンショット 2021-10-29 15.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2216557/0204f67f-39c5-49e2-8ecf-db771245758e.png)
ステップ２　お好きなログイン方法でアカウントを作成
![スクリーンショット 2021-10-29 15.18.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2216557/54b6dc63-b075-a32e-3be1-4a22c0f3ebb5.png)
ステップ３　画面の内容に沿って情報を入力し、アカウントが作成される
ステップ３　アカウントが作成されたら、Snyk dashboard（[https://app.snyk.io](https://app.snyk.io?utm_medium=Referral&utm_source=Qiita)）にアクセスしてSnykを試す

##Snykの製品
* [Snyk Open Source](https://docs.snyk.io/products/snyk-open-source/open-source-basics): オープンソースコードの脆弱性を発見し、修正することができます。
* [Snyk Code](https://docs.snyk.io/products/snyk-code): アプリケーションコードの脆弱性を発見し、修正することができます。
* [Snyk License Compliance Management](https://docs.snyk.io/products/snyk-open-source/licenses): オープンソースのライセンス問題の発見と修正
* [Snyk Container](https://docs.snyk.io/products/snyk-container): コンテナイメージの脆弱性を発見し、修正することができます。
* [Snyk Infrastructure as Code](https://docs.snyk.io/products/snyk-infrastructure-as-code): Kubernetes、Helm、Terraformの設定ファイルの脆弱性を発見し、修正します。
* [Snyk Intel Vulnerability Database](https://snyk.io/product/vulnerability-database/): オープンソースやコンテナにおける、包括的で実践的な脆弱性に関するデータにアクセスできます。

##Snykのツール
* Snyk.io: ウェブベースのUI
* [Snyk CLI](https://docs.snyk.io/snyk-cli): コマンドラインのインターフェース
* [Snyk API](https://snyk.docs.apiary.io/#): Snykとの統合をプログラムで行うことができます

#最後に
いかがでしたでしょうか？少しでも参考になれば嬉しいです。なお、SnykではTwitterをはじめました！ぜひフォローと応援をお願いします。SnykJP Twitterは[こちら](https://twitter.com/snykjp)。
Laravelチュートリアルを進めていく中で環境構築でつまずいた話

Windows 環境で Laravel アプリケーションの開発を行うチュートリアルを行いました。
ブラウザ（chrome）で、URLを入力しても狙い通りの画面が出力されませんでした。

発生していた問題・エラー
「
Fatal error: Composer detected issues in your platform: Your Composer dependencies require a PHP version ">= 8.0.0". You are running 7.2.34-24+ubuntu20.04.1+deb.sury.org+1. in /home/vagrant/code/sample/vendor/composer/platform_check.php on line 24
」
image.png
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2225353/7d785776-e8b2-7045-177b-4c929981e623.png)
自分による自分のためのクラス理解

##はじめに
pytorchによる分類をトライする中でClassが出てきた。
テンプレートがあるのでわかってなくても何とか(？)なるかもしれないけど、今後のために少し学んでおこうと思った。
感覚をできるだけ図に落とし込んで少しでもモヤモヤを晴らしていく。


##そもそもClassとは何ぞや？
本やネットの中に、「オブジェクトの設計図」という表記で説明されていることがある。またオブジェクトは関数で定義されるので、データとして存在するだけでなく、自身が動くこともあるとのこと。
上の説明でも雰囲気はつかめるが、まだイメージしにくいので図でまとめてみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/53c7a1ce-42be-54fb-0ff0-0430029b08c3.png)
人間という入れ物の中に、その人を構成するデータが入っている。例えば趣味は「○○すること」というように動作で記録されているので、趣味をやりなさいと指示したら動く感じで捉えられるかも。

##initについて
インスタンス化を実施する時に必要な関数でデータの初期化を行う、というのがよく見る説明。
Classで定義しただけでは設計図のままなので、何か作りたい場合はインスタンス化(実現化)する必要がある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/d5d90181-93d2-4018-8dc9-02c915d16a65.png)
インスタンス化したけど時には間違えたりすることもあるはず。できたものを再修正するのは面倒だし、修正によっては前の情報が残ってしまうので最初に戻ってきれいにしますと宣言している。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/274b2907-7ad0-41d8-da9f-66d0b7634592.png)

##selfについて
インスタンス自身を指す、とのこと。
インスタンス化した後は更にこの関数を使うというように指定が必要になる。

a = 【Class名】　#インスタンス化
a.【Class内の関数名】 #情報(変数)の呼び出し

この時インスタンス自身も引数として取らないといけないので、実行できるようおまじないとしてselfが使われる(これは決まり)。
メインの方であってなおかつサブ？の引数にもならないといけないなんて複雑。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/fbbd15ef-caec-5788-ec06-583528f13031.png)

でも確かに図にしてみると、引数として改めて情報がある方が分かりやすいかもしれない(手のひら返し)。

##super()について
別のクラスの情報を継承できる。
確かに普段の生活でも、一旦作ったプロットを基に新しく作ることはよくある。全部一から書いていたら面倒。そこでsuper()を使うことで簡単にテンプレート化できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/27edb732-e72a-e04f-fe1e-358b6ab53e6e.png)

super()で継承し、テンプレート化したイメージ。ちょっとすっきりした？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/32f3fd46-51b9-f69d-297e-5ae832b5e723.png)


##まとめ
イメージを図にすることで少しもやもやはとれたかもしれない。
正しいかどうかは別なのでまだ勉強は継続しないと(説明を読めば読むほど深みにはまっていく気もする…)。



##参考
たくさん参考にさせていただきました。
https://xtech.nikkei.com/atcl/learning/lecture/19/00108/00005/
https://qiita.com/ishigen/items/2d8b6e6398743f2c8110
https://python.ms/class/#%E3%81%AF%E3%81%97%E3%82%99%E3%82%81%E3%81%AB
https://coush.jp/280.html
https://prograshi.com/language/python/py-self-in-class/
Vue.jsで外部JSONファイルを定期的に読み込んで、動的に子供コンポーネントに表示させる

## はじめに
定期的にJSONを読み込み、そのまま表示させたい。
そんなことをしるならなにやら、Vue.jsがいいのかなぁ。どうなのかなぁ。
Vue.jsでの方法を検証してみた。

## 開発環境
ide:IntelliJ IDEA
os:Windows10


## 開発
ターミナルで開発環境を作ります。

``` 
vue create .
``` 

public内にjsonを用意。

```data.json
{
  "data": [
    {
      "name": "name1",
      "message": "file data 1"
    },
    {
      "name": "name2",
      "message": "file data 2"
    },
    {
      "name": "name3",
      "message": "file data 3"
    }
  ]
}
```


srcフォルダに子供コンポーネントを用意。

```Child.vue
<template>
  <div>
    <div>Child</div>
    <div>{{ name }}</div>
    <div>{{ message }}</div>
  </div><br>
</template>

<script lang="ts">
export default {
  name: "Child",
  props: [
      "name",'message'],
}
</script>

<style scoped>
</style>
```


App.vueを変更します。

```App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div v-for="item in items" :key="item">
    <Child v-bind:message="item.message" v-bind:name="item.name"></Child>
  </div>
</template>

<script lang="ts">
import {Options, Vue} from 'vue-class-component';
import Child from "@/Child.vue";
@Options({
  components: {
    Child
  },
  data() {
    return {
      items: [],
    }
  },
  methods:
      {
        load: function () {
          console.log("load start")
          fetch('./data.json')
              .then(response => {
                return response.json();
              })
              .then(json => {
                this.items = json.data;
                setTimeout(() =>
                {
                  console.log("reload start")
                  this.load();
                } , 1000)
              })
        }
      },
  mounted() {
    this.load();
  }
})
export default class App extends Vue {
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
```


## まとめ
思ったより、参考サイトがすくなかった。
なんか間違った使い方なのかな。
それとも当たり前過ぎて、サイトにまとめないのか。
不安。


## Git
vue-ts-load-interval
https://github.com/kawamurashin/vue-ts-load-interval/

## 参考
リストレンダリング
https://jp.vuejs.org/v2/guide/list.html
bootstrap テンプレート　横並び　コメント

```php
                {{--                        TODO:↓コメント機能のブランチにてコメント入力欄、コメントボタンの設置--}}
                {!! Form::open(['url' => route('comment')]) !!}
                <div class="row g-3 pt-4">
                    <div class="col-md-10">
                        {{Form::textarea('content', null,['class' => 'form-control border-success', 'rows' => '4', 'placeholder'=> 'コメントを入力'])}}
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        {{Form::submit('コメント', ['class'=>'btn btn-outline-success rounded-pill'])}}
                    </div>
```
【メモ】react-native-mapsインストール時にERESOLVE unable to resolve dependency tree

# 環境
- macOS 11.6
- Node: 12.13.0
- npm: 8.1.1
- react: 17.0.1
- react-native: 0.64.2
- react-native-web: 0.17.1

# 経緯
React-Native + Expoを使用してiPhone, AndroidにGoogle Mapsを表示したく、
ライブラリのreact-native-mapsをインストールした時に発生しました。

npmでreact-native-mapsをインストール

```
npm install react-native-maps
```

下記のエラーが発生

```
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react-native-web@0.17.1
npm ERR! node_modules/react-native-web
npm ERR!   react-native-web@"0.17.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-web@"^0.13" from react-native-maps@0.29.3
npm ERR! node_modules/react-native-maps
npm ERR!   react-native-maps@"^0.29.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution
```

内容は、react-native-webのバージョンが0.17.1でmapsの最新である0.29.3は使用できないから、依存関係が解決できないと言う内容でした。

0.13まで下げる必要があるのか、疑問に思いmapsのIsuueを覗くと同じ現象に陥っている人がいました。

[react-native-web@^0.13.0 peer dependency breaks npm install for Expo 43](https://github.com/react-native-maps/react-native-maps/issues/3992)

Isuueを上げた人は元々mapsをインストール済みでExpoのバージョンアップを行おうとしてエラーになったみたいで、今回はそもそもmapsがインストールできないと言う状況。

# 結論
とりあえずインストールして試してみたかったので、
以下の記事を参考にして
[npm v7でERESOLVE unable to resolve dependency tree Could not resolve dependency](https://qiita.com/masato_makino/items/06011fcecc91be583636)

```
npm install --save --legacy-peer-deps react-native-maps
```
でとりあえずは強制インストールしました。

結局は何も解決していない気もしますが、Isuueを確認しつつ現状でいきたいと思います。
【RSpec】shoulda-matchersを使ってテストを1行で書く

##環境
Ruby 3.0.2
Rails 6.1.4.1
shoulda-matchers 5.0.0

shoulda-matchersを使えばバリデーションテストが1行で書けるので大変便利

##enumのテスト

```model.rb
enum weather: { sunny: 0, cloudy: 1, rainy: 2 }
```

- define_enum_for

```spec.rb
describe 'enum' do
    it { is_expected.to define_enum_for(:weather).with_values(
      sunny: 0,
      cloudy: 1,
      rainy: 2
    ) }
end
```

##バリデーションテスト

```model.rb
validates :firstname, presence: true
validates :lastname, presence: true
validates :number, presence: true, uniqueness: true
validates :email, presence: true, uniqueness: true
```



- validate_presence_of
- validate_uniqueness_of

```spec.rb
describe 'バリデーション' do
    it { is_expected.to validate_presence_of :firstname }
    it { is_expected.to validate_presence_of :lastname }
    it { is_expected.to validate_presence_of :number }
    it { is_expected.to validate_uniqueness_of :number }
    it { is_expected.to validate_presence_of :email }
    it { is_expected.to validate_uniqueness_of(:email).ignoring_case_sensitivity }
end
```


*ignoring_case_sensitivityについては過去記事参照

https://qiita.com/kat0/items/36efc46df83584c722b1

##参考

https://github.com/thoughtbot/shoulda-matchers


http://matchers.shoulda.io/docs/v4.1.0/Shoulda/Matchers/ActiveRecord.html
discord.pyでコマンドを組み込む方法

# discord.pyでcommandを使う
disocrdでbotのコマンドを組み込む方法として簡単なのは組み込まれている`on_message()`を使っている人も多いかと思います．しかし`on_message()`を用いている場合，条件分岐でやや工夫が必要になることがあり，可読性が下がると思います．そこでdiscordpyが用意している拡張を利用してこの記事ではコマンドを組み込んでいこうと思います．

## もともとの`on_message()`を利用した場合
```python
import discord

TOKEN = ''
client = discord.Client()

@client.event
async def on_message(message):
    if message.author.bot:
        return
    if message.content == '!good':
        await message.channel.send('evening')

client.run(TOKEN)
```

## discordの拡張を利用した場合
```python
import discord
from discord.ext import commands

TOKEN = ''
bot = commands.Bot(command_prefix='!')

@bot.command()
async def good(ctx):
    await ctx.send('evening')

bot.run(TOKEN)
```

このようにすることで簡潔に書くことができます．
ウェブサイト作成用備忘録・１９号：ブックマークレットの学習【サンプル有り】

webGlの学習をひと段落させ、今回はブックマークレットについての学習を行いました。

実際の学習では実務に直結する内容のブックマークレットを作成した為この記事で解説等は出来ないのですが、ここに投稿する為にごく簡単な内容のブックマークレットを作成してみました。

#####学習記録　※どこか間違っていたらすみません…

#####１・概要
ブックマークレットとは、ブラウザのブックマークのURLにjavascriptのソースコードを入力する事で現在アクセスしているページに対してjavascriptで処理を行う方法です。

#####２・作り方
１・即時関数を作成して、ブックマークレットでやりたい事を一通り書き込みます。

２・作成した即時関数を下記のサイトでブックマークレットに最適な書式に変換します。
https://crocro.com/tools/item/gen_bookmarklet.html

３・ブラウザのブックマークに ２ で変換したソースコード一式をコピペする。

完成！

そして、記事投稿用に作成したサンプル用ブックマークレットがこちらです。

####スクリーンショット用著作権バリアー
#####ブックマークレット
javascript:(function(){const copyright=Array.from(document.body.querySelectorAll("img, svg, iframe")).map((value)=>{value.style.filter="blur(10px)"})})();void(0);

#####※コード成型前
```javascript
(function () {
const copyright = Array.from(document.body.querySelectorAll("img, svg, iframe")).map((value) => {
  value.style.filter = "blur(10px)";
});
})();
```
#####解説
このブックマークレットを使用すると、現在表示されている全ての画像・SVGデータ・iframeにstyleでfilter:blur(10px)を追加します。
（…実務に関係しない簡単なサンプルを考えた結果、このブックマークレットが誕生しました。）

このブックマークレットを例えば某動画投稿サイトのTOPページで使用すると、以下の様な状態になります。
![FireShot Capture 025 - YouTube - www.youtube.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/667042/80dea325-6098-9cd4-7730-c79d7c13591e.png)

どうでしょう、不思議と著作権が守られている様な気持ちになるのは自分だけでしょうか…？

今まで実務とは直接関係ないジャンルを通して各種プログラミングの勉強を行ってきましたが、いざ実務に直結する内容のツールを作ってみると、まだまだ至らない部分はあるものの、今まで学習してきた事が点と点が繋がっていくようにツール作成に役立ってくれたので、自分の成長度合いを測る為のいい機会になったと思います。
S3導入時のcapistranoエラー(ArgumentError: Missing `secret_key_base` for 'production' environment, set this string with `rails credentials:edit`)

#はじめに

S3導入の際に自動デプロイでエラーとなりました。
復習も兼ねて投稿します。

#S3の導入

スクールのカリキュラム通りに記述しました。(本番環境のみS3を適用させました)

#### Gemfile記述

```:gemfile
gem "aws-sdk-s3", require: false
```

ターミナル内で「bundle install」を実行

```:ターミナル
% bundle install
```

#### production.rbを編集

```:config/environments/production.rb

config.active_storage.service = :local

#上記で記述している画像の保存先の設定を「:local」→「:amazon」に変更します。

[変更後↓]
config.active_storage.service = :amazon
```

####環境変数を設定(←ここでエラー)

私の場合は環境変数を`credentials`で管理しているため、S3に必要な**`Access key ID`** **`Secret access key`**も`credentials.yml.enc`で管理する事にしました。

ローカル環境内の開発中のアプリで実行

```:ターミナル
$ EDITOR="vi" bin/rails credentials:edit 
```

上記のコマンドでファイルが開きます。

```
# User as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: 00000000000

db:
 NAME: データベース名
 USERNAME= root 
 PASSWORD= 0000
 HOSTNAME= ap-northeast-1.rds.amazonaws.com 
```

私の場合はすでにDBにアクセスする環境変数があるので上記にawsのidを記述しました。

```
###記述
 aws:
  access_key_id:　0000000
  secret_access_key: 0000000
###上記記述


# User as the base secret for all MessageVerifiers in Rails, including the one protecting cookies.
secret_key_base: 00000000000

db:
 NAME: データベース名
 USERNAME= root 
 PASSWORD= 0000
 HOSTNAME= ap-northeast-1.rds.amazonaws.com 
```

escキー :wqで完了。

### datebase.ymlの書き換え

```config>datebase.yml
production:
  <<: *default
  database: <%= Rails.application.credentials.db[:NAME] %>
  username: <%= Rails.application.credentials.db[:USERNAME] %>
  password: <%= Rails.application.credentials.db[:PASSWORD] %>
  host: <%= Rails.application.credentials.db[:HOSTNAME] %>
  socket: /var/lib/mysql/mysql.sock
```

###最後に自動デプロイ
ローカル環境の開発中のアプリで実行

```
%　bundle exec cap production deploy
```

するとエラーとなりました。


#エラー内容

```
00:10 deploy:assets:precompile
      01 $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile
      01 rake aborted!
      01 ArgumentError: Missing `secret_key_base` for 'production' environment, set this string with `rails credentials:edit`
```

今回のエラーで二つミスをしました。

####githubにpushし忘れ

credentialsに記述後これで終わりと思い、すぐに自動デプロイコマンドをしました。(unicornなどはkill済)
credentialsを記述する事で`credentials.yml.enc`が上書きされるのでpushしなければなりません。

####ymlの書き方

ymlの書き方が特殊で、インデントでも評価される事を知りました。

https://magazine.rubyist.net/articles/0009/0009-YAML.html#yaml-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

空白スペースなどにも忠実に記述しなければならないのでもう一度credentialsを確認しました。

問題だった箇所が下記になります。

```
###記述
 aws:
  access_key_id:　0000000
  secret_access_key: 0000000
###上記記述
```

「aws」の左隣に空白が入っていました。

```
aws:
 access_key_id:　0000000
 secret_access_key: 0000000
```
こうする事でエラーは解消しました。
自動文字起こしサービスNottaが選ばれる理由

![notta-vs-others-voice-transcription.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2226142/2575b057-a3c6-ab42-fc77-dc1f308484ea.png)

元記事：[https://www.notta.ai/blog/notta-vs-alternative-voice-transcription](https://www.notta.ai/blog/notta-vs-alternative-voice-transcription)

AI自動文字起こしサービスNottaは2020年5月以来、80万DLを突破する会社員・フリーランス・学生等向けの文字起こし・記録・翻訳サービスを提供しています。

# 使用範囲ーー音声ソースの収録範囲が幅広い
- スマホアプリ（iPhoneやAndroid）に対応、場所を問わずにどこでもリアルタイム文字起こし
- Zoom会議に自動・代理出席機能つき、Web会議内容を記録して議事録作成がより効率的に
- Chrome拡張機能によりWebページの音声コンテンツをワンクリックで録音・文字起こしできる
 
Nottaがあれば、あらゆる音声コンテンツの録音・文字起こし・翻訳は、楽々こなせます。


# 使用方法ーーテキスト編集・翻訳など様々な機能にも対応
- 日本語・英語・中国語・韓国語・ドイツ語・フランス語など104ケ国に対応する
- アプリで文字起こしPCで手軽に編集し、また画像の插入もできるので議事録の作成が楽々
- 文字起こし結果の翻訳（４２言語に対応）ができるから多言語の学習に役立つ
- テキストや音声データのエクスポート・リンクで他人と簡単共有

Nottaは、基本の文字起こし機能だけではなく、作業をより楽にする機能が豊富にあります。自分にあった使い方で、作業効率化の幅を広げることができます。

‍
# R社サービスとの徹底比較
高精度の文字起こしかつ多種な機能をお手頃な価格でご用意しています。無料会員プランもありますので、お気軽にお試しください。

| 機能・料金 | Notta | R社 |
|:-|:-|:-|
| スマホに対応 (iOS・Android) | ⭕  | ❌  |
| 「Notta Bot」<br> Zoom会議に代理出席 | ⭕  | ❌  |
| Chrome拡張機能<br>Webページの音声をテキスト化 | ⭕  | ❌   | 
| 無料文字起こし時間 | ⭕ <br> 120分/毎月 | ➖ <br> 60分のみ |
| 多言語の文字起こし | ⭕ <br> 日本語・英語など104言語 | ➖ <br> 日本語のみ |
| 文字起こし結果の翻訳 | ⭕ <br>42言語の翻訳 | ❌   | 
‍| タグ付け機能 | ⭕  | ❌  |
| 画像の挿入 | ⭕  | ❌  |
| キーワード分析 | ⭕  | ❌  |
| 音声データの導出 | ⭕  | ⭕  |
| 音声ファイル導入で文字起こし | wav/mp3/m4a/caf/aiff	 | m4a/wav/mp3 |
| 動画ファイル導入で文字起こし | mp4/mov/avi/flv/rmvb/wmv	 | mp4/mov |
| 文字起こしデータの共有 | ⭕  | ⭕  |
| 会員料金 | 音声・動画文字起こし：1,500円/1,800分 | 音声の文字起こし：72,000円/1,800分<br>動画の文字起こし：108,000円/1,800分 |

---

Nottaは無料体験できますので、試してみましょう。
‍
‍**Web版**
‍‍Google ChromeやMicrosoft Edgeから[Web版](http://www.notta.ai/)をアクセスできます。（無料）
‍
‍**Chrome拡張機能**
‍Chrome web storeから[Notta拡張機能](https://chrome.google.com/webstore/detail/notta-speech-to-text-tran/kdelkaogljjcbjffjmahedaobfjineig?hl=ja)をインストールできます。（無料）
‍
‍**アプリ版‍**
iOSアプリは[App Store](https://apps.apple.com/jp/app/notta-%E9%9F%B3%E5%A3%B0%E3%81%AE%E9%8C%B2%E9%9F%B3%E3%81%A8%E6%96%87%E5%AD%97%E8%B5%B7%E3%81%93%E3%81%97-ai%E9%9F%B3%E5%A3%B0%E8%AA%8D%E8%AD%98%E3%82%A2%E3%83%97%E3%83%AA/id1480649572)からダウンロードできます。（無料）
Androidアプリは[Google Play](https://play.google.com/store/apps/details?id=com.langogo.transcribe&hl=ja&gl=US)からダウンロードできます。（無料）
VPC内でプライベートIPを利用してほかのサーバにsshする簡単６ステップ(Windowsの場合)

今回は下記のようなVPCの構成をイメージしています。![ssh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1999131/5d4f2cbc-46f1-72c2-8743-85d5b8856047.png)

上記の図は、Pubulic subnet にあるインスタンスを踏み台にして、Private subnetにあるインスタンスにssh接続することをイメージしています。プライベートサブネットにあるインスタンスにはグローバルIPがふられていません。この構成にすることで、外部から直接インスタンスにアクセスすることはできなくなり、セキュリティ面で強固なものになります。

Windowsを使っている人の場合、Tera Termなどで、パブリックIPを使用することでサーバの中に入ることができますが、プライベートIPでは入ることはできません。この場合は下記の６ステップの方法を実施することで、簡単にssh接続をすることができます。

１.メモ帳を作成する

２．EC2インスタンス作成時にできる秘密鍵(~~~.pem)のファイルをメモ帳にペーストする。

３．踏み台サーバ（上記の図のパブリックIPの振られているサーバ）にログインする。

４．ユーザec2-userで、適当な場所に秘密鍵を作成する。ここにメモ帳の秘密鍵コピーして張り付ける。
vi private_key.pem

５．chmod 400 private_key.pem

６．ssh -i private_key.pem ec2-user@10.0.2.54（ログイン先のプライベートIP）

これで、パブリックIPを経由せず、プライベートIP経由でログインすることができます。
Djangoで、JWT認証+Grapheneでエラー。"'NoneType' object has no attribute 'fields'"

## 出ていたエラー

GraphiQLの画面で以下のようなエラーが、ずっと出るようになった。
一発目の認証のクエリは成功し、それ以降は何を投げても以下の結果が右のペインに表示される。

```
{
  "errors": [
    {
      "message": "'NoneType' object has no attribute 'fields'",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "path": [
        "tokenAuth"
      ]
    }
  ],
  "data": {
    "tokenAuth": null
  }
}
```

## 原因

queryとmutationに、graphene.ObjectTypeを継承しQueryという名前以外のクラス名を設定していた。
Mutationも同じ。

```graphql_root_schema.py
schema = graphene.Schema(query=QueryType, mutation=MutationType)
```

## 解決方法

queryとmutationに指定するクラスは、QueryとMutationじゃないといけないみたい。

```graphql_root_schema.py
schema = graphene.Schema(query=Query, mutation=Mutation)
```
Rails7に標準装備されるライブラリのカタカナ読み一覧

## イントロダクション
開発現場とか、クライアント面談とかで何て発声したら良いか迷ったので、共有。
随時更新するかもしれません。

## 一覧

import maps（インポート マップス）

Hotwire（ホットワイヤー）

Stimulus（スティミュラス）
仮想化とクラウドってどう違うのか？

## 目標・きっかけ
仮想化の学習にて、そもそも仮想化とクラウドってどう違うの？という疑問があったため、他のメンバーと議論をした
その内容をまとめて、仮想化とクラウドについてより知識を掘り下げる

## 仮想化とは
複数の物理端末を仮想化ソフトウェアを使用して1台の端末として扱うこと
さらに仮想サーバを構築することで、物理端末のOSに左右されることなく、仮想サーバは複数のOSを構築することができる

例えば、Windows OSの物理端末を仮想化してWindowsサーバーとLinuxサーバーの2つの仮想サーバーを構築することができる。

![スクリーンショット 2021-10-29 13.37.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1603537/f7267d36-61f3-0397-a7b1-ff99574b241c.png)

もちろん物理端末を集約することで運用効率が上がったりメリットはあるものの、物理端末のリスクも集約してしまう。
つまりA~Dで仮想化する、Aで障害が発生するとB〜Dも障害になってしまうため、影響範囲が大きい。
そのため、クラスター構成は必須。

ちなみに現代ではほとんど全ての企業、サービスで導入されているため、インフラエンジニアとしては必須スキルとも言える

### ハイパーバイザ
仮想化を行うためのソフトウェア

![20200608112339.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1603537/bb6cc06a-fafc-a7f2-34c8-a302b64efd2c.gif)

図で言うとゲストOSが仮想サーバーとなる

### ホスト型（ホステッド型）
物理端末にホストOSを導入し、ハイパーバイザをアプリケーションとして扱い、仮想化を行うこと
ホストOSが入っているため、操作性が高い

### ベアメタル型
物理端末に直接ハイパーバイザを導入し、仮想化すること
イメージとしては物理端末にホストOSを導入する代わりにハイパーバイザを導入するようなこと

### ホスト型とベアメタル型どちらが良いのか？
ホストOSは物理端末にOSを導入するため、導入するOSの分だけ物理端末のリソースが減る
ベアメタル型は直接物理端末に導入するため、リソースはホスト型より多い

例えばVMwareであれば数百MBしかない、Windowsサーバーは10GBほど。
あとは操作性は当然ながらホスト型の方が操作しやすい、UIも全く違う。
そもそも物理端末によっては対応していないこともある。

以前はホスト型の方が処理速度が劣る、と言うこともあったが、今はほとんど変わらない

#### 有名な仮想化ソフトウェア
- virtual BOX
- VMware Workstation player

両方とも基本は無料で使える
VMwareはフル機能を使おうとしたら有料になる

## クラウドとは
ITリソースを仮想化してサービスとして提供したり、管理すること

## 違いとは
クラウドサービスにおいてもほとんどが仮想化という技術が使用されている。
AWSやAzureも仮想化された環境にユーザーが仮想サーバーを構築することができる。

というか、クラウドって要するに物理端末もサービス側が用意してくれて、仮想化ソフトウェアもサービス側が用意してくれて仮想化した状態のものをユーザーが使用できるってこと？？？？？？？

## プライベート・パブリック・ハイブリッドの違いとは？

プライベートクラウド：使う人が限定的
パブリッククラウド：使う人が不特定多数
ハイブリッドクラウド：使う人が限定的な環境と
プライベートクラウドとハイブリッドクラウドの違いは？
そうなると世の中のほとんどがハイブリッドにならないかな？？？？

### オンぷれみすとプライベートクラウドの違い
同じ
オンプレミスというのは自社内でデータセンターを管理していることを指す。
プライベートクラウドは自社内で管理しているクラウド環境のこと。
クラウドは仮想化された環境のことで、仮想化された環境を自社内で管理していることになるため、プライベートクラウドとオンプレミスは同義

#### 「オンデマンド性が高い」
ビジネスなどでスピーディにスケーラブルに対応できること

#### VT
CPUの機能。
無効にしていると64bit版の仮想マシンの構築ができないので、必ず有効になっているかどうかを確認する
BIOSの画面にて設定できる。

#### 仮想マシン（VM）と仮想サーバは違うのか？
結局、同じ。
もちろん導入するゲストOSや運用方法によってはサーバとしての役割を持たないこともある。
ただ、物理＞（ホストOS）＞ハイパーバイザ＞ゲストOSという順番は仮想マシンも仮想サーバも同じ。

## まとめ
仮想化とクラウドは別物。
しかし親戚に近い。
クラウドは仮想化を使用して、サービスを提供しており、仮想化はクラウドの手前の物理端末を統合することを指す。
クラウドは仮想化なくして実現はできない、だからややこしくなっている。
【PHP/Laravel】input type="file"でファイルが送信できない（受け取れない）

fileを選択しているのに、受け渡しがうまくできなかったときの解決策メモ。

①name属性のタイプミス

②form に enctype="multipart/form-data" が抜けている

③inputにdisabledが入っている（jsで動的についてたりするので注意）

あとでちゃんと清書します。
PythonからSQLite3を操作する基本的な使い方



#SQLite3とは
***SQLite3***は、オープンソースのデータベース管理システムです。特徴としては軽量で、アプリケーションに組み込むことで利用する。
***SQLite3***は、コマンドラインからも操作することができるが、今回はPythonから操作する場合の基本的な使い方をまとめた。


#SQLite3の使い方
PythonからSQLite3を操作する基本的な方法を紹介する。

###1. sqlite3をインポート 
まず使用するモジュール「***sqlite3***」をインポートする必要があるため、次のように書く。

```python
import sqlite3    
```
 
###2. DBの接続とカーソルの作成
「sample.db」というファイル名のDBへ接続する場合は次のように書く。

```python
connection = sqlite3.connect('sample.db')  // DBへ接続、作成
cursor = connection.cursor()               // カーソルの作成
```

もし、指定したBDファイルが存在しない場合は自動的にDBが作成される。
また、ファイル名の部分に「***:memory***」と指定するとメモリー上にデータベースが構築される。

###3.SQLの実行
SQLを実行するためには、***execute***メソッドを呼んでSQLコマンドを実行する。
例えば、テーブルを作成する場合は、***CREATE TABLE***を使って次のように書くことができる。

```python
cursor.execute('CREATE TABLE sample_table (id INTEGER, name TEXT)')
```

###4.登録・変更を反映
DBへの登録や変更を行った場合、それを反映させるためには、コミットする必要がある。

```python
connection.commit()
```

###5.DBから切断する
操作が完了したらDBとの接続を切断する必要があり、次のように書く。

```python
connection.close()
```
M1 Macでdocker-composeを用いてjupyter-notebookを動かしたい

#背景

機械学習を用いて分析環境を構築したかったため『データ収集からWebアプリ開発まで実践で学ぶ機械学習活用ガイド』という書籍で学習をしていたが、docker-composeを用いた際にjupyter-notebookは起動するもののpythonを動かせない状況に陥ってしまった。

#目的

+ M1 Macでdocker-composeを用いてjupyter-notebookを正常に動かすこと
+ docker-composeについてなんとなく理解すること


#環境(M1 Mac)

| 　 | 実行環境 | 想定環境 |
|-----------|------------|------------|
| Docker Desktop| 4.1.1 ||
| Docker Engine | 20.10.8 | 18.0.9.1 |
| Docker Compose| 2.0.0 | 1.23.2 |

#現状起きているエラー
背景で記述したように、jupyter-notebookを起動してlocalhostにアクセスすることはできるが、画像のようにコードを実行してもそもそも実行されない。
![Screen Shot 2021-10-29 at 14.14.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551489/db61848f-0867-feaa-d175-d0e0e10e153a.png)

docker-composeを終了してSTATUSを見てみると**exited(143)**で終了したことがわかる。この情報から色々調べてみる。
![Screen Shot 2021-10-29 at 14.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551489/4f721dc7-4da9-3bf0-1a5d-0b08faab46b5.png)


#解決策
##Docker Desktop for mac 4.0.1にダウングレード
https://githubmemory.com/repo/The-Japan-DataScientist-Society/100knocks-preprocess/issues/98

いろいろ検索しているうちに私と同じような症状に陥っている記事をみつけたが、どうやらDocker Desktopのバージョンによる問題とのこと。試しにダウングレードしてみる。想定環境であるEngineが18.0.9.1となっているバージョンにする。

https://qiita.com/A-Kira/items/8ae66838b019683704d1

結果、以下のようにコードを実行できた。

![Screen Shot 2021-10-29 at 15.19.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551489/30b76d19-b7bb-d62b-e84e-9d1e7d2e3fcf.png)




##Docker Desktopとは
![Screen Shot 2021-10-29 at 12.21.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551489/aeaff25c-1900-b3e8-8fe8-bbce060322c6.png)

参考書籍にはdocker環境の作り方について特に言及されていなかったため検索窓に打ち込んでdocker環境を用意した。以下画像の[公式サイト](https://www.docker.com/get-started)からダウンロードした。![Screen Shot 2021-10-29 at 12.33.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551489/5e569414-c399-95b9-de80-40dc757930fd.png)

https://docs.docker.jp/desktop/index.html

このサイトを見ると、以下のように記述されている。
>Docker Desktop は任意の開発ツールや言語と連携しながら、 Docker Hub 上にある、認定イメージとテンプレートの巨大なライブラリにアクセスできるようにします。これにより、開発チームは環境を拡張したり、素早い自動ビルドをしたり、継続的インテグレーションや、安全なリポジトリを用いた共同作業が可能になります。
スクラム開発ってなんぞや

前の記事で流行りのアジャイルについて手法を含め少しまとめましたが、今回はアジャイルでよく聞くスクラム開発とはなんぞということで深堀していく。
＜前回の記事＞
https://qiita.com/matsukazu/items/319008d9fd7c5d129018

##スクラム開発ってなに？
- アジャイルの手法がスクラム開発
- アジャイルの中でもスクラム開発が一番使われている手法
- そのほかに、かんばんやXPなどの手法があるが、単体で使うというより組み合わされて使われることが多い（スクラムとかんばん、スクラムとXPとか）

##メンバー
###ステークホルダー
- 利害関係者（発注元、顧客など）

###プロダクト・オーナー
- プロジェクトの方向性を決める責任者
- ステークホルダーとのコラボレーション
- すべてのワークフローにかかわる
- 予算の支出の管理
- 計画の責任
- 受け入れ基準を定義し、それらを満たしていることの確認
- 大規模な場合はプロダクトオーナーチームを作る場合もある

###スクラムマスター
- プロジェクトの進行役
- 開発チームのコーチング
- サーバントリーダー
- チームの注力が散漫することを削除する（プロジェクトに関係のない仕事などをできるだけ排除）
- 開発チームの進行状況を常に確認する

###開発チーム
- エンジニア、デザイナーなどなど（4~6人くらい）
- 大規模な場合は開発チームを増やしていく
- T字スキルがあると良い
    - 専門分野だけではなく、いろいろできると良い
    - 流動的に動く

##スクラム開発の流れ
- 製品ビジョンに対して、下記の工程を繰り返して製品を作り上げていく
    1. プロダクトバックログの作成、見直し
    1. スプリントプランニング
    1. スプリントバックログ作成
    1. スプリント
        - デイリースクラム
    1. インクリメント
    1. スプリントレビュー
    1. スプリントレトロスペクティブ

##用語解説
###プロダクトバックログ
- 製品ビジョンに対して、実現したい機能のリスト
- ユーザーストーリーと呼ばれる形式で書くことが多い
- 実現したい機能の優先順位をつける
- 常に見直して、最新に保つ

###スプリントプランニング
- スプリントで何を実現したいのかを決める
    - プロダクトオーナーは何が欲しいのか
    - 開発チームはどれくらいできそうか
    - 開発チームはどのように実現するのか

###スプリントバックログ
- 実行するプロダクトバックログ項目と実行計画
- プロダクトバックログを具体的な作業に分割する
- 後から増えることもある

###スプリント
- 頑張って機能を作る
- 大体二週間くらい（プロジェクトの方針による）

###デイリースクラム
- ゴール達成に向けて進んでるか確認する
- 作業進捗を確認し、問題や課題などを共有する
- スクラムチームごとに毎日やる

###インクリメント
- これまでと今回のスプリントで作成したプロダクトバックログの項目を合わせたもの
- リリースするか関係なく、動作して検証可能でなければならない

###スプリントレビュー
- スプリントのインクリメントをスクラムチームとステークホルダーがレビューする
- 必要に応じてプロダクトバックログの適応を行う

###スプリントレトロスペクティブ
- チームの改善アクションの検討
- チームの文化を育てる
- 知識などの共有

## チーム構成

- フィーチャーチーム
    - 機能ごとにチームをわける
    - クロスコンポーネント
- コンポーネントチーム
    - 機能実装に必要な一般的な機能を開発する
- スクラム・オブ・スクラム
    - チームごとの技術者リーダーの情報交換の場

## 顧客とのエンゲージメント
- ウォーターフォール
    - ほとんど初期の段階と製品の完成のみ
- スクラム
    - 常に一定に顧客とのエンゲージメントをとる必要がある

##作業強度
- ウォーターフォール
    - 時間がたつにつれて上がってくる
- スクラム
    - 期限に向かって上がっていくことはあまりない

##まとめ
- 個人的にはウォーターフォールより楽しそう
- 管理ツールはとりあえずJIRAを使うといいらしい
npmパッケージをGitHubでFrokして使う

# はじめに
npmパッケージのGitHubリポジトリをフォークして、npmではなくGitHubからインストールして使うことがあったのでやったことのまとめです。

# やったこと
## 1. GitHubリポジトリをフォークする
npmパッケージの `package.json` の `repository` にリポジトリのURLが書かれていることが多いので、そこからアクセスします。
リポジトリを自分のアカウントにフォークします。
参考: https://docs.github.com/ja/get-started/quickstart/fork-a-repo

## 2. ビルドファイルをリポジトリに含める
パッケージによってはビルド済みのファイルはnpmにのみプッシュされており、Gitには含まれていないことがあります。
その場合はGitHubからパッケージをインストールしても、ビルドしないと使えません。
インストールのたびにビルドするのは面倒なので、ビルドしたファイルをGit管理するようにします。

`package.json` の `files` に記載されているファイルがGitで管理されていない場合はビルドが必要です。
ビルド方法はパッケージによって異なりますが、いくつかのリポジトリを見たところ`package.json` の `script` に `build` コマンドが用意されていることが多いようです。

## 3. フォークしたパッケージをインストールする
リポジトリのURLをforkしたリポジトリのページから取得します。
URLはクローン用のURLと同じなので、こちらを参考に取得してください。
参考: https://docs.github.com/ja/get-started/quickstart/fork-a-repo#cloning-your-forked-repository

パッケージをインストールするコマンドは普段と少し異なり、このようなコマンドになります。

```shell
yarn add "パッケージ名@git+リポジトリのURL#ブランチ・タグ名"
```

参考: https://classic.yarnpkg.com/en/docs/cli/add#toc-adding-dependencies