OmniAICreator/Qiita-1.07M huggingface dataset:
HTML形式で社内DMを自作（ソフトと相性悪く不採用）したときのリファレンス

社内DMをHTMLメールでソフトを利用して配信する、ということで自作HTMLを作ってました。
結果的にHTMLを書くわけではなく画像を貼り合わせるだけで送信できるということが判明したのと自作HTMLはソフトと相性が悪くバグるため破棄するにいたりました。。

ひさびさにHTMLを書いたので引用した情報をまとめておきます。
HTMLページはゴリゴリコーディングするほうがはやい人で、スタイルシートには疎いレベルです。
（いにしえの2000年代にYahoo!のホームページビルダーをいじっていた口です。）

## HTMLメールの学習

HTMLページとHTMLメールは違うらしいことを学習。
HTMLでtableタグで万全を期す文化らしい。
（ブラウザや端末、メーラーのバリエーションが多すぎてスタイルシートが効かない等あるとのこと）


https://www.synergy-marketing.co.jp/blog/how_to_create_html_mail_01


区切り線のTipsも書かれている <a href="https://note.com/kanbara3">かんばらあい</a> さん。記事をありがとうございます！

--

OutlookメールをHTMLファイルに保存すれば？などいろいろ調べましたが
Outlookでもらった時点で当初のHTML構造は失われる、といった情報があったのと、
VBAを使って云々といった手法は取らずに力業でいくことにしました。

https://www.cuenote.jp/library/marketing/html-mag2.html


--

HTML5で記憶が止まっているのでその後のいきさつをこちら確認

https://web.havincoffee.com/html/html5/html5_a_ls.html


## HTMLメールのデザイン・テンプレートを見てみる

Pinterestでおしゃれなデザインを眺めるというデザイナーの方のTipsがありますが、
ここでは素敵なデザインのメールテンプレートを眺めたりソースコードを眺めました。


https://blog.codecamp.jp/html_mail_template


https://www.campaignmonitor.com/email-templates/


https://www.cakemail.com/templates/


## 背景色

単色のコンセプトカラーがある場合は色のHEXコードを取得します。
カラーピッカーはPowerToysに搭載されています。

https://qiita.com/negimijin/items/7308b96df439085d34d9


## ヘッダーの画像

####ヘッダーの画像をいいサイズにトリミングする


http://www.htmq.com/tips/image_trimming.shtml


## ボタンの画像


#### 画像の素材

今回はMS365のサービスのアイコンが必要だったので、Fluent UIから取得しました。


https://www.flicon.io/


#### ボタンの画像を作る

GIMPはどういじったらいいのか学習するのに時間がかかりそうなので
Canvaを利用しました（画像のサイズ変更は有料になります）


https://www.canva.com/


GIMP自体は[太田さんのブログ](https://idea.tostring.jp/?p=6309)で知りました

https://idea.tostring.jp/?p=6309


#### ボタン画像を角丸にする


https://www.nishishi.com/css/image-corner-round.html



## 本文に区切り線を追加する


https://note.com/kanbara3/n/nb2360eb5d629



## metaタグなどお約束の定義まわり

metaタグ


https://dekiru.net/article/12853/

https://web.havincoffee.com/html/tag/meta/index.html


レスポンシブ対応


https://willcloud.jp/knowhow/responsive_htmlmail/#HTML
[PLC]ラダー言語とかのリレー制御について

# リレー制御とは
- onとoffを同期できる装置を使った回路のこと。
- リレーという電気部品がその由来。その実装としてはコイルに通電しているときはその誘導磁力でonになるが、通電していないときはoffになる装置のようなものがある。その逆も容易にできる。
- かつてのコンピュータがこれを使用していたように複雑に組み合わせればpcと同等の機能を持たせられる。

# plc シーケンサとは
- 上のリレーを内部に多数(有限個)備えているプログラマブルな装置のこと。これにリレー回路を入力すれば、その通りに動く。
- 多くのものはメモリを持っていて、基本的にはレジスタが01でメモリ書き込みはパソコンのようにできるものだと考えればいい。
しかし、無駄な機能がのっていないため省電力でいい感じ。
- メモリ情報を外から読み出せる仕組みとかはメーカーが用意してくれている。
- メーカーがそのプログラム環境をビジュアルっぽくやそうでないようにも用意してくれているが拡張命令がそれぞれ違っているので、互換性はない。仕方ない気もする。
- プログラミング環境が高いい。。100000くらいするらしい。

## FPGAとの違い
- FPGAは組み合わせ回路単位で表現可能。リレーまでは降りられない。多分
- FPGAはハードウェア記述言語で書く。verilogとか
- FPGAよりは単純で早くあるべきやつをplcではやる。
- plcは箱が頑丈！！

# ラダー言語とは
- ビジュアルプログラミング言語のひとつ。
- ハードウェア記述言語のように組み合わせ回路全体に対応しているわけではなく、基本的に記述の単位はリレーとIOになる。しかし、各メーカーは拡張命令を追加しているので、プログラミング言語からif文だけを取り出したような感じ。
- アセンブリのようにコンパイラがいろいろ辻褄を合わせてくれたりするかは不明。
- 並列に書くと並列に動くのがいいところ。たぶん。。。

# 低水準言語を書く原則
- IOにどのIOレジスタを使っているかをすべて明記
- メモリの番地とその使用用途を全列挙
- 外部のハードウェアとつながるので遅延があることは前提

# リレー制御の注意点
- リレー制御は走り続けている。pcのように一レイヤーはさんで調整してくれない。
- 自己保持回路を組むことで状態を保持できる。しかし、それは内部状態を持つことになるので必要であるが高レベルな意味を明記するべき
- 内部のクロックで時刻を測るので時々時刻合わせしてあげないと因果関係があいまいになる。

# plcからデータを吸い出す手順
 1. plcからラダープログラムを吸い出し。
 2. IOの仕様書やメモリの使用データをもとにほしい情報をどこかに上書きしていく"リアルタイム"部を作る。ここでシリアルナンバーをつけることと時刻を追加しないといけない
 3. リアルタイム部を履歴部に書きこんでいく回路を追加。何件とかはここで書ける。
 4. あとは追記したラダーをplcに書き込んで、plcの仕様書からメモリのあるとこからあるとこまでを吸い出す。(通信の規格(イーサ)とかを使ったりする)
生医科学専攻の大学生がTECHCAMPをやった訳　〜第二章〜

今週は、生医科学専攻の大学生が、TECHCAMP転職コースを受けた理由について説明します❗️

学生でプログラミングを習いたい人、TECHCAMP転職コースを考えている人、などの役に立てたらと思います。

第二章は、実際やってみて、TECHCAMP転職コースのメリットデメリット。

5分で読めるよう、簡潔に書きます🙂👀。


1.TECHCAMP転職コースとは？
-
・受講期間10週間の短期集中コース、受講期間半年間の夜間・休日スタイルコースがある。

・転職までのサポート付き

・カリキュラムを一通り解いたら、オリジナルアプリを作成する

・同期で4~5人のチームが作られる

・もう一方の教養コースでは学習の期限がないが、転職コースでは期限がある。

2.このスクール、このコースに通ったメリット
-
・カリキュラムが圧倒的にわかりやすい：
説明が丁寧かつ、とても見やすい。(自主学習だけど、このカリキュラムならついていける！）
他の有料学習サイトと比較しても、圧倒的にわかりやすい。

・自分の学習をサポートする「メンター」がいる：
学習での悩みを相談したり、目標設定を一緒にしてくれたりするので、モチベーションの維持につながる

・スタッフさん（メンターや質問対応してくれる方達）が優秀：
どんな質問にも即対応してくれる。
どのスタッフさんも優しくて、丁寧で、教えすぎない対応が魅力的。

・同時期に入った　チームメンバーと、週一で、学習会(１０時間、私たちの代までらしい）が固定されている：
継続できる環境が整っていた。
10時間の勉強時間が確保される。
情報共有が、勉強になる。他メンバーの進捗報告で、焦りが出て頑張れる。

3.デメリット
-
・言わずもがな高額：
でも、高額だからこそ、強い意志を持った仲間が集まる。

・「メンター」にも当たり外れあるのかな：
半年間、ずっと寄り添ってくれる「メンター」は結構重要。
メンターの当たり外れで、学習者の成果はだいぶ変わっていた印象。（でも結局は自分の頑張りが重要）

4.最後に
-

今回は、実際にTECHCAMP転職コースに通ってみて感じた、メリットデメリットについて説明しました。

私は、TECHCAMPに通ってみて、本当によかったし、良い選択だったと思っています。
カリキュラムや指導の仕方がとてもわかりやすい上、学習相談できる「メンター」がいたことは心の支えになりました。
チーム学習では、自分の考えをアウトプットできる場が設けられ、情報を整理できました。

半年間の学習では、自分の弱い部分をたくさん見たし、何度も学習が嫌になった。サボったこともたくさんあった。でも、最後まで学習を続けた。場所を選ばず時間に縛られず、海外で働くためには、これしかないと思っていたから。
そして、そんな理由で今日も、学習を続けています。

迷っている方はぜひ、多くの体験談を参考にして、最適な選択をしていただきたいです🍀。

（（（私の意見は、あくまで一個人のものですので、参考までにしてください。）））
【Laravel】PHPのバージョンを変更する

# 環境

docker-compose: 1.29.2
Laravel Framework: 8.80.0
Laravel Sail: 1.13.2

Laravel Sailを使用したLaravelプロジェクトになります。

# 手順

## `docker-compose.yml`

Laravelの[ドキュメント](https://readouble.com/laravel/8.x/ja/sail.html#sail-php-versions)にも手順がありますが、
それに則れば実現できるとは思います。

```yml:docker-compose.yml
# PHP 8.1
# ...
services:
  laravel.test:
    build:
      context: ./vendor/laravel/sail/runtimes/8.1
    image: sail-8.1/app
# ...

# PHP8.0
# ...
services:
  laravel.test:
    build:
      context: ./vendor/laravel/sail/runtimes/8.0
    image: sail-8.0/app
# ...

# PHP7.4
# ...
services:
  laravel.test:
    build:
      context: ./vendor/laravel/sail/runtimes/7.4
    image: sail-7.4/app
# ...
```

変更したバージョンで記載されているように、
`laravel.test`の`context`と`image`を修正すれば万全です。

## `sail`をbuildし直す

あとは、修正した内容を反映してあげればOKです。
以下のコマンドを叩きましょう。

```terminal:sailをbuildし直す
$ ./vendor/bin/sail build --no-cache
```

少し時間がかかりますが、コーヒーでも飲みながら待ちましょう。
（私はコーヒーを飲めませんが・・・ｗ）

## 完了

これで基本的な対応は完了です。

```terminal:sailを立ち上げる
$ ./vendor/bin/sail up -d
```

本当に変更されているか確認しましょう。

```terminal:PHPのバージョンを確認
$ ./vendor/bin/sail php -v
```

以上です！！

# 注意点 ハマったこと

私はPHPのバージョンを8.1から8.0にしようとしましたが、
うまく変更されず8.1地獄に陥っていました。

もちろん上記の手順はしっかりと踏みました。
それでも、ダメだったんですね・・・。

## 原因は単純

原因は単純で、<font color="#f00">**PHPのバージョンの最新が8.1になったから**</font>です。

今までうまくいっていたのは、
7.4と8.0と**メジャー・バージョン番号（7と8のこと）が異なっていたため**です。

8.1が出た今では、**8系として8.1に優先度が吸われてしまい、
8系（8.1）にした後、8.0に変更する**という細かな指定が必要になった訳です。

そして、この対応が行われたのが、
**Laravel Sail: 1.13.1**
です。

## 解決方法

つまり、Laravel Sailのバージョンを上げましょう。

```terminal:Laravel Sailのバージョンを上げる
$ ./vendor/bin/sail composer update laravel/sail
```

これで、解決します！！

# まとめ

**PHPのバージョンを変えるなんて簡単だ**

そう思っていた時期が私にもありました・・・。

私はここに至るまでに2日以上の時間と、
先輩の時間をめっっっっっっっっっっっちゃ使ってもらってしまいました！！！！

この記事はその集大成という訳です。
同じ苦しみを味わってる人がいたら、早くバージョンを上げるんだッ！！！！！
Python: インターネットからjsonを取ってきてDictにする


```python
USER_AGENT_DUMMY = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36"
HEADERS = {"User-Agent": USER_AGENT_DUMMY}

r = requests.get("https://hogehoge.com/fuga.json", headers=HEADERS)
print(r.json())
# {'hoge': 'fuga'}
```
Python: インターネットからHTMLソースを取ってきて<body>の中身だけを抜く（レスポンスがHTMLのURLの場合）

```python
import urllib.request
from bs4 import BeautifulSoup

USER_AGENT_DUMMY = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36"
HEADERS = {"User-Agent": USER_AGENT_DUMMY}

def request(url: str, headers: Dict[str, any] = HEADERS) -> str:
    req = urllib.request.Request(url, headers=headers)
    with urllib.request.urlopen(req) as res:
        html = res.read()
        soup = BeautifulSoup(html, "html.parser")
        return soup.find("body").decode_contents(formatter="html")
```
AWS キーペアのインポート用の公開鍵作成はopensshコマンドでやろう

あるAWSアカウントでキーペアを自動生成した。公開鍵は自動的にAWSのキーペアサービス上に格納され、秘密鍵がローカルにダウンロードできる形になる。
その後、別のAWSアカウントで同じ秘密鍵を利用したいとなった。公開鍵はキーペア作成時にダウンロードされず手元にないので、秘密鍵から公開鍵を作成する。
秘密鍵からの公開鍵作成は以前何度かしたことがある気がしていて、opensslコマンドかputtygenだなって思ってた(これは間違い)。
で、秘密鍵をputtygenに食わせて公開鍵を作成。AWSの新アカウントのキーペアでインポートOK。EC2インスタンスを新規作成してそのキーペアを指定して起動。で普通に秘密鍵でSSHしようとしたら、ログインが弾かれる(泣)
puttygenで作る鍵ってちょっと特殊なイメージがあって(WinSCPとかで使うとかなんとか)、puttygenじゃだめなのかな?って思って、適当なLinuxサーバでopensslで秘密鍵を食わして公開鍵を作成。それをキーペアにインポートしようとすると、そもそもフォーマットが違うって蹴られて登録できない。あれーー??? この辺で、鍵長の制限あったっけ、パスフレーズ有無とかの影響受けるんだっけ、とか関係ないところを迷走して、ググってみるとあっさりクラメソさんが教えてくれた..
https://dev.classmethod.jp/articles/aws-import-key-pair/
記事のとおりopensshコマンドに秘密鍵を食わして公開鍵を作成して、それをキーペアにインポートしてあげて、EC2インスタンスを新規作成してキーペアを指定し直してあげると、普通に同じ秘密鍵でSSHできた

調べてみると、openssl/opensshの過去/現在で扱うフォーマットの違いは色々でてくる..
３０代初心者インフラエンジニアが知っておくべきWindowsコマンド

<H1>ファイルの所有者を自分にする【takeown】</H1>

```bat
takeown /F "対象のファイル"
REM 対象ファイルの所有者を自分（ログインユーザー）に変更

```
<H1>ファイルのアクセス権を変更する【cacls】</H1>

```bat
cacls "対象ファイル" /G Administrator:F
REM 対象ファイル にユーザー指定（この場合Administrator）でアクセス権を付与

cacls "対象フォルダ" /G /T Administrator:F
REM 対象ファルダと配下のファイル全てのユーザー指定（この場合Administrator）でアクセス権：フルコントロールを付与
```

<H1>FTP接続（IISに接続）【ftp/open/put/prompt/mput/lcd】</H1>

```bat
> ftp
REM ftpコマンドを実行する。

ftp>
REM ftpコマンドの実行で、FTPモードに変更される。

ftp> open
"255.255.255.255"
REM 接続先IPを入力。windowsユーザーとパスでログイン

ftp> put "PCからFTPサーバーに送るファイル"
REM ローカルPCからFTPサーバーにファイルを送る

ftp> prompt
対話モードオフ
REM デフォルトはオン　mputで毎回聞かれるときはオフ

ftp> mput 複数の送るファイルパス
REM 複数のファイルを一括で送ることができる

ftp> lcd 移動先パス
REM ローカルのディレクトリを移動
```

<H1>ファイルをリネーム【REN】</H1>

```bat
REN "test1.txt" "test2.txt"
REM test1.txtをtest2.txtに変更する

```
<H1>バッチを実行したユーザーの拡張子表示【フォルダオプション】</H1>

```bat
reg add "HKCU\Software\microsoft\Windows\CurrentVersion\Explorer\Advanced" /v "HideFileExt" /t REG_DWORD /d 0 /f
REM 登録されている拡張子は表示する(0=表示する,1=表示しない)　※反映にはエクスプローラーの再起動

```
<H1>コピーが失敗するときに確実にコピーする【robocopy】</H1>

```bat
robocopy コピー元 コピー先 /s /e /MIR
REM /sサブディレクトリもコピー /e空のディレクトリもコピー /MIRミラーリング

```
<H1>リモートデスクトップからログオフする※重要【logoff】</H1>

```bat
logoff
REM リモートデスクトップのログオフ
REM その他作業完了時に必ずチェックする作業などをいれとく
```
【ＰＨＰ】echo省略 PHPタグ省略 

セミコロンも省略できるし使いやすい

※バージョンが変わって<?= ?>タグが使えなくなる可能性もあるので、注意

#コード
```PHP
<?= $abc = 1234?>
<?= "ギブミーチョコレート" ?>
<?=$abc?>
<?php echo "ギブミーチョコレート"; ?>
```
#結果
```
1234ギブミーチョコレート1234ギブミーチョコレート
```
QA目線とは何なのか

記念すべき？1ポスト目は自己紹介にある嫌いな言葉「QA目線」について記載をしたいと思います。
コメント頂けたらうれしいです！

#QA目線とかユーザー目線とか
経歴書などの自己PR欄や採用面接などで

　**QA目線/ユーザー目線でユーザビリティを意識したテスト得意です！**

といった方としばしば出会います。
もちろんこんな質問はしないのですが

```
ユーザーは仕様書見ないから仕様書無しでテストして！それがQA目線でしょ！
正しそうに見えればOK！本当はどれが正しくてどれが正しくはわからないけどね ^^
```
みたいなノリの現場を潜り抜けてきたのでしょうか？＾＾

真面目にQA目線について質問すると多くの場合

　**ユーザーの気持ちで操作して、その時のユーザビリティやUXを意識してテストを行う**

という旨の回答を頂くのですが、これがいわゆるQA目線というものなのでしょうか。

# 疑問

開発組織の体制次第だと思いますが、私の経験上QAというポジションがある開発組織であればおよそ以下のような体制になっていることがほとんどでした。
　・仕様を決める人（PO、PDM、ディレクター、デザイナーなど）
　・実装をする人（何とかエンジニア）
　・テストをする人（QA、テスターなど）

仮に上記の3役で開発組織ができていた場合 **ユーザビリティやUXを意識する** のはQAの専門領域ではなく、<font color="OrangeRed">開発をしている3役全員が意識を持つべき</font> ことではないのでしょうか。

現実的な話で言えばデザイナーはユーザビリティやUIUXをあまり考えず要件を満たすだけの仕様を決め、エンジニアは仕様に書いていることを淡々と実装し、QAだけがユーザーのことを考えているということなんて無いと思います。私が一方的に信じているだけですが、「違うよ」と言われたらなかなかショックです。

QAがテストに自信を持っているようにデザイナーはUIUXに自信を持っていると思います。もっと言えば色が与えるイメージや見やすい配色などQAが持ち合わせていないような知識を駆使していると思うのでそこはやはりリスペクトが必要だと思うんですよ。
私が曲がった解釈をしているだけかもしれませんが、QA目線という言葉には何か他メンバーに対するリスペクトが足りなく感じてしまいます。

# こう表現して欲しい
QA目線ではなく、具体的に何が得意であったりできるのかを表現して欲しいです。
例えば

```
ユーザビリティを意識した提案や改善案などが得意
探索的テストが得意
仕様に未定義の性能指標やセキュリティ要件を定義できる
```
といった感じです。

そもそもQA目線やユーザー目線という予防線を張り、個人の感想になっているのにあたかも
　**個人でなくユーザーから見たらですよ（私個人は不満ありません）**
になっていませんか？

```
Qiitaの緑と白の文字がチカチカするのでユーザーとしてはもっと暗めの緑が良いと思うんですよ！
私個人としてはビビットな感じで大好きですけどね！
```
みたいな。「個人的にはこのままでも良いのですが、ユーザーとしては・・・」みたいなのも同じです。

「QA目線と言っていますが、それってあなたの感想ですよね？」とか言われたらぐうの音も出ないようならそれはやはり、個人の感想だと思います。
個人の感想でもきっとチームは聞いてくれるし、強い希望で意見が割れたら最終的には仕様を決める権限を持っている人まで巻き込んでしまって良いと思います。

法律などが関わらないシステムについては仕様の正解が無いので誰かが決めたものに意見を言うというのはハードルが高い場面もあると思いますが、健全なチームを目指すならどうにかここは乗り越えていけたら良いなと思います。
【JavaScript】数値の四捨五入や切り下げ、切り上げ

JavaScriptにおける数値の四捨五入や切り下げ、切り上げについてメモしておく。

#数値の四捨五入や切り上げ、切り捨て

## 四捨五入
四捨五入には、```Math.round()```を使用する。```Math.round()```は、数値を四捨五入してもっとも近似の整数を返す。

```javascript
const value = Math.round(3.14159);    // 3
const value = Math.round(3.51389);    // 4

// 任意の桁で四捨五入（小数第3位の場合）
const value = Math.round(3.14159 * 100) / 100; // 3.14
```

## 切り下げ
数値の切り下げには、```Math.floor()```を使用する。

```javascript
const value = Math.floor(3.14159);    // 3

// 任意の桁で切り下げ（小数第3位の場合）
const value = Math.floor(3.14159 * 100) / 100;    // 3.14
```
ただし、負の値に```Math.floor()```を使うと切り下げ、つまり与えた数値以下の最大の整数を返すため下記のサンプルのようになる。
単に小数点以下を削除したい場合は、```Math.trunc()```を使用する。

```javascript
// Math.floor()
const value = Math.floor(-3.623);    // -4

// Math.trunc()
const value = Math.trunc(-3.623);    // -3
```

## 切り上げ
数値の切り上げには、```Math.ceil()```を使用する。

```javascript
const value = Math.ceil(3.14159);    // 4

// 任意の桁で切り上げ（小数第3位の場合）
const value2 = Math.ceil(3.14159 * 100) / 100;    // 3.15
```
これも負の場合について、切り上げ、つまり数値以上の最小の整数が返されるので、```-3.14159```の場合は```-3```が返される。
M1 Macでno matching manifest for linux/arm64/v8が発生した

dockerイメージでMySQLを使用しようとしたら以下のようなエラーが出た


```
ERROR: no matching manifest for linux/arm64/v8 in the manifest list entries
```

#解決方法：

docker-compose.ymlにplatform指定をする

```
  db:
    platform: linux/x86_64 # M1チップ対応のため追記
    image: mysql:5.7
    container_name: app_db
```
ローカルのGitブランチを一括削除する

## mainブランチ以外（checkoutしているブランチ以外）を一括削除する
mainブランチに移動してから削除コマンド実行します。
すると現在選択中のmain以外のブランチが削除されます。

```sh
$ git checkout main
$ git branch | xargs git branch -d
```

`-d` の場合マージしていないブランチは消えません。
https://tracpath.com/docs/git-branch/
>-d, --delete
ブランチを削除します。ブランチはアップストリームブランチで完全にマージする必要があります。アップストリームが—trackまたは--set-upstream-toで設定されていない場合、HEADでマージする必要があります。

```sh
$ git branch | xargs git branch -d
error: The branch 'hoge' is not fully merged.
If you are sure you want to delete it, run 'git branch -D hoge'.
```


`-D` にすることで強制的に削除できます。

```sh
$ git branch | xargs git branch -D
```

## 削除したくないブランチを指定したい場合
mainブランチとfugaブランチ以外を削除します。

```sh
$ git branch | grep -v "main\|fuga" | xargs git branch -d
```

## コマンド解説
`git branch`でローカルにあるブランチが全て出力されます。

```sh
$ git branch                       
  fuga
  hoge
* main
```

`grep`を使うことで検索することができます。

```sh
$ git branch | grep fuga
  fuga
```

`grep -v`は選択したもの以外を表します。

```sh
$ git branch | grep -v fuga
  hoge
* main
```

複数選択したい場合は正規表現で表します。

```sh
$ git branch | grep -v "main\|fuga"
  hoge
```
こちらの正規表現は簡易的なので例えばmain-01、やhogefugaとも一致してしまいます。
もしもmainとfugaのみに完全一致するように正規表現を表記するならば以下のようになります。

```sh
$ git branch | grep -v "^\(  \|* \)\(main\|fuga\)$"
  hoge
```

xargsコマンドで左のコマンドの結果を右のコマンドの引数に渡すことができます。
`echo main`の結果は`main` となり、それを `git checkout` コマンドの引数に渡すことで `git checkout main` が実行されています。

```sh
$ echo main | xargs git checkout
Switched to branch 'main'
Your branch is up to date with 'origin/main'.
```

よって以下のコマンドは`git branch`から`grep`を使って絞り込みをし、その結果を`git branch -d`の引数に渡すことで、ブランチの削除を実行しています。

```sh
$ git branch | grep -v "main\|fuga" | xargs git branch -d
```
Dockerを使用してAWS lambdaのPython3.9.6実行環境を構築し、pandasのLayerを作成する

#はじめに
AWS LambdaのPython3.9ランタイムで使用するpandasのモジュールをローカルで作成してもうまくいかなかったので、DockerでLambda実行環境を再現し、pandasのLayerを作成した。
今回の記事を作成するにあたり、[こちらのQiita記事](https://qiita.com/hoto17296/items/a374efc2d8159d75bc71#fn2)を参考にさせて頂きました。


実行環境

- Windows 10 Pro

- Git Bash

#Dockerイメージの作成

```:Dockerfile

FROM amazonlinux:2

ARG PYTHON_VERSION=3.9.6

RUN yum update -y && yum install -y tar gzip make gcc openssl-devel bzip2-devel libffi-devel \
  && curl https://www.python.org/ftp/python/${PYTHON_VERSION}/Python-${PYTHON_VERSION}.tgz | tar xz \
  && cd Python-${PYTHON_VERSION} && ./configure && make && make install \
  && cd - && rm -rf Python-${PYTHON_VERSION}

RUN yum install -y zip \
  && mkdir /python \
  && mkdir /dist

ENTRYPOINT ["/bin/bash"]

```
[こちら](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/lambda-runtimes.html)より、Python3.9ランタイムはAmazon Linux 2で動いているため、該当するDocker Hubの公式イメージを活用した。
Pythonのバージョンは[こちら](https://www.python.org/ftp/python/)にあるものは指定可能。
pandasなどのモジュールをインストールするpythonディレクトリと、zipファイルを置くdistディレクトリを作成した。
Dockerコンテナ内でコマンドを実行するため、ENTRYPOINTを"/bin/bash"とした。

#Dockerイメージのビルド

```
$ docker build . -t lambda-layer:python3.9
```
イメージ名は何でも良いが、ここではlambda-layer:python3.9とした。

#イメージからコンテナを生成し、コンテナ内に潜り込む

```
$ winpty docker container run -it --name "test" lambda-layer:python3.9
```
ここでは、--nameオプションでコンテナ名を"test"とした。
また、Git Bushを用いてWindowsでbashを利用し、Dockerコンテナ内に入ろうとすると以下のようなエラーが出るので、先頭にwinptyを付けて実行した（詳しくは[こちら](https://mseeeen.msen.jp/what-does-winpty-command-do/)を参照）。

```
the input device is not a TTY.  If you are using mintty, try prefixing the command with 'winpty'
```

#コンテナ内でpandasをインストールする

```
# pip3 install -t /python pandas
```

コンテナ内で、pandasをpip3でインストールした。-tオプションでモジュールのインストール先をpythonディレクトリに指定した。
このときpandasと依存関係にあるnumpyやpytzなども一緒にインストールされた。

#pythonディレクトリ内のモジュールをzipで固める

```
# zip -r /dist/pandas.zip /python
```
固めたものをpandas.zipとし、distディレクトリに置いた。

#作成したzipファイルをローカルにコピーする

```
$ docker cp [CONTAINER ID]:/dist/pandas.zip ./
```
lambdaにアップロードするために、作成したzipファイルをローカル環境にコピーした。
CONTAINER IDは以下のコマンドで確認できる。

```
$ docker container ls -a
```
[py2rb] 部分適用

# はじめに
移植やってます。
( from python 3.7 to ruby 2.7 )
# partial (Python)
```python
from functools import partial

def partial_func(name, value):
    print(name, value)

func1 = partial(partial_func, 'aa')

func1('bb')

# aa bb
```
https://docs.python.org/ja/3.7/library/functools.html#functools.partial

https://qiita.com/sporty/items/4c7af5dd6a457dff3a57

ふむふむ。
# どうすRuby
```ruby:lambda.rb
func2 = lambda do |name|
  partial_func = lambda do |value|
    puts "#{name} #{value}"
  end
end

func1 = func2.call('aa')
func1.call('bb')

func2.call('aa').call('bb')
```
引数を２回に分けて渡すと考えるなら、`lambda`でも良さそう。
ありそうなパターン

```ruby
消費税設定 = lambda do |消費税|
  partial_func = lambda do |税抜き価格|
    puts (税抜き価格 * (1 + 消費税)).floor
  end
end

税込み価格 = 消費税設定.call(0.1)
税込み価格.call(100)
税込み価格.call(109)
税込み価格.call(110)

# output
110
119
121
```
https://qiita.com/jnchito/items/d704838aed7ce5bff53b

```ruby:curry
消費税設定 = lambda do |消費税, 税抜き価格|
  puts (税抜き価格 * (1 + 消費税)).floor
end.curry

税込み価格 = 消費税設定.call(0.1)
税込み価格.call(100)
税込み価格.call(109)
税込み価格.call(110)
```
`curry`すると、`lambda`を二重にしなくても上手くやってくれる。

```ruby:class.rb
class A
  def initialize(tax)
    @tax = tax
  end

  def taxin(value)
    puts (value * (1 + @tax)).floor
  end
end

a = A.new(0.1)
a.taxin(100)
a.taxin(109)
a.taxin(110)
```
まとめると、既存のメソッドを再利用する分には便利ですが、新規で作るならクラスで十分かも。
# メモ
+ Python の partial を学習した
+ 百里を行く者は九十里を半ばとす
お手軽にロジックとStoryshotsのテストを分離する(Create React App)

## はじめに
Create React Appで作成したReactアプリにて`npm run test`を実行すると、Storyshotsとロジックのテストが同時に実行されてしまいます。  

それぞれのテストを分けて実行しようと思い調べてみると`jest.config.js`やbabelの設定が必要となり、思っていた以上に手間だったので、もっとお手軽な方法を備忘録してメモしておきます。

## 確認環境
react: v17.0.2
react-scripts: v5.0.0
yarn: v1.22.17

## 実施内容

### storyshotsのためのtestファイルを作成
```storyshots.test.ts
import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({});
```
ここでは特にオプション等は指定しません。

https://storybook.js.org/addons/@storybook/addon-storyshots#:~:text=Configure%20Storyshots%20for%20HTML%20snapshots

### ロジックだけをテストするコマンド
```zsh
yarn react-scripts test --watchAll=false --testPathIgnorePatterns=src/storyshots.test.ts
```
Jest CLIオプションの`testPathIgnorePatterns`を使用してtest実行時に
Storyshotsの設定ファイルを無視するようにします。

https://jestjs.io/ja/docs/cli#--testpathignorepatternsregexarray

https://stackoverflow.com/questions/55632676/how-to-ignore-certain-files-when-running-npm-test-in-create-react-app

### Storyshots単体でテストを実行するコマンド

```zsh
yarn react-scripts test storyshots.test.ts
```
Storyshotsの設定ファイルだけが実行されるように指定します。

https://jestjs.io/ja/docs/cli#jest-regexfortestfiles

### 最終的なpackage.jsonの設定

```json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --watchAll=false --testPathIgnorePatterns=src/storyshots.test.ts",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "storyshots": "react-scripts test storyshots.test.ts",
    "storyshots-update": "react-scripts test --watchAll=false --update-snapshot storyshots.test.ts",
    "build-storybook": "build-storybook -s public"
  }
```
Storyshotsのupdateコマンドも含めて上記のようにするのが良いのかと思います。

:::note warn
注意
簡易的な方法なので、watchモード等でテストを再実行するとロジック、Storyshots両方のテストが実行されてしまうのでご注意ください。
:::
AWSChatbotでAWSリソースを取得しSlackに通知させてみた。

#はじめに
AWSChatbotを使用すれば、AWSリソースの変化をSlackに通知する仕組みを簡単に作ることができます。

例えば、ある特定のリソースがCloudwatchアラームで設定した閾値を超えると、その情報をSlackの指定したチャンネルに通知してくれます。

アラート対応時は、情報が不足しており、AWSコンソールに入って詳細を確認しますが、このように情報をSlackに飛ばす仕組みを作ることができれば、問題の特定や切り分けが素早くできるため、結果障害対応の品質を上げることにも繋がるのではないでしょうか。


今回参考にした記事は以下の記事です。

[Slack と AWS Chatbot で ChatOps をやってみよう](https://aws.amazon.com/jp/builders-flash/202006/slack-chatbot/?awsf.filter-name=*all)
[AWS Chatbot を使って Slack チャネルで Amazon EventBridge イベントを監視](https://aws.amazon.com/jp/blogs/news/monitor-amazon-eventbridge-events-in-your-slack-channels-with-aws-chatbot/)

上記手順が優秀なため、基本はこれを参考にしてください。

今回は実際にSlackへの通知のされ方に焦点を絞り、具体例と共に記載します。

#例: CPU使用率閾値超過80%
画像は、CPU使用率閾値超過80%時にSlackへ通知された情報です。

どのようにこの情報を引っ張て来たのかが気になりますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2230506/e2cd2b49-008a-7efc-a23c-17780947633d.png)

仕組みは非常にシンプルで…

１．SNSでトピックを作成する

２．AWS Chatbotのサービス画面でクライアント設定を行う
　　(ここで、対象のSlackチャンネルを指定し、先ほど作成したSNSトピックも指定します)

３．取得したいリソースをCloudwatchアラームで作成する
　　画像のような名前と条件を設定しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2230506/9712b478-c78c-f6c0-f0cd-4afbd36ed116.png)

これだけ設定すれば、あとは閾値が超過すると自動的にSlackへ通知してくれます。


#参考までに…

私は検証の際に、AWS SystemsManagerドキュメントのCPUストレスツールを使用しました。
[AWS FIS に関連する AWS Systems Manager SSM ドキュメント](https://docs.aws.amazon.com/ja_jp/fis/latest/userguide/actions-ssm-agent.html#awsfis-run-cpu-stress)

#まとめ
どうでしょう、これがChatOpsの一例です。

AWSは多くのサービスが次々にリリースされるため、ついていくことが大変のように感じられますが、実際に使ってみるとこれほどまでに簡単に、便利に楽しく使用することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2230506/2bb8cddf-1c4a-cbfb-ab01-4e22bcfef595.png)
人間のための http リクエスト検証サービス httpbin.org

意図した http リクエストが送信できているかを検証するのに便利な httpbin.org を紹介します。
(※ httpbin.org は "ほにゃらら for Humans"のフレーズでお馴染みの [Kenneth Reitz](https://github.com/kennethreitz) が作りました。)

# 意図した http リクエストが送信できなくて困ることはないですか?

私はとてもあります。
http クライアントは他種多用です。
私は Python と js で開発をする人ですが、
requests, axios, cURL, postman, http リクエストを実行してくれるノーコードサービス, etc...
と多くの http クライアントを使っています。
どのような設定をしたら、意図したリクエストが送れるかを正確に把握できていません。

# httpbin.org はどのようなリクエストが送信されたかを response で返してくれる

https://httpbin.org にリクエストを送れば以下のようにリクエスト内容を返却してくれます。
(method によってエンドポイントが異なるので注意です。)

```
$ curl "https://httpbin.org/get?name=hoge"
{
  "args": {
    "name": "hoge"
  }, 
  "headers": {
    "Accept": "*/*", 
    "Host": "httpbin.org", 
    "User-Agent": "curl/7.64.1", 
    "X-Amzn-Trace-Id": "Root=1-61f54cd0-01a05f18402690eb3be67b7a"
  }, 
  "origin": "<your ip address>",
  "url": "https://httpbin.org/get?name=hoge"
}
```

```
$ curl -X POST -H "Content-Type: application/json" -d '{"name":"太郎", "age":"30"}' -H 'Authorization: Bearer <token>' https://httpbin.org/post
{
  "args": {}, 
  "data": "{\"name\":\"\u592a\u90ce\", \"age\":\"30\"}", 
  "files": {}, 
  "form": {}, 
  "headers": {
    "Accept": "*/*", 
    "Authorization": "Bearer <token>", 
    "Content-Length": "29", 
    "Content-Type": "application/json", 
    "Host": "httpbin.org", 
    "User-Agent": "curl/7.64.1", 
    "X-Amzn-Trace-Id": "Root=1-61f54b74-17c581213c86478601e4c9ba"
  }, 
  "json": {
    "age": "30", 
    "name": "\u592a\u90ce"
  }, 
  "origin": "<your ip address>", 
  "url": "https://httpbin.org/post"
}

```

外部サービスにリクエストを送ることに抵抗がある場合は [docker コンテナ](https://hub.docker.com/r/kennethreitz/httpbin/)を使っても良いでしょう。


# リンク
https://httpbin.org/

https://github.com/postmanlabs/httpbin

https://kennethreitz.org
https://github.com/kennethreitz
https://hub.docker.com/r/kennethreitz/httpbin/
Edgeブラウザをキオスクモードで起動する方法

1. ショートカットを作成する
1. ショートカットのプロパティを開いて、リンクを以下のように設定して保存する。  
 ```
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --kiosk https://example.com --edge-kiosk-type=fullscreen
 ```

- 参考  
[Microsoft Edge キオスク モードを構成する](https://docs.microsoft.com/ja-jp/deployedge/microsoft-edge-configure-kiosk-mode)
AWSアカウント　作成日、利用開始日、無料利用期間を確認する方法

作成したAWSアカウントの無利用利用期間はいつまでだったっけ？
と思いつつ、調べるのを後回しにしていた。
⇒調べてみたけど、ずばり「何月何日から利用しているか？」は良くわからなかった
⇒が、「何月から利用しているか？」は確認できた。

◆確認方法
AWSにサインイン
「アカウント名」⇒「請求ダッシュボード」⇒左ペインの「請求書」
![aws利用開始日.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/718245/52f9f551-5990-b0d9-52f0-9dc74846dfc4.jpeg)

↑2021年9月から使用していることがわかった。
（けど、何日から利用しているのかは不明。
　わかる人教えていただけたらうれしいです。
　そもそも契約期間としては、月の途中とかがないのかも。。。）

以上😊です。
plotlyのContour plotやHeat mapでアスペクト比を設定する。

# はじめに
plotlyのcontour plotやheat mapを描画させる際に、描画エリアの縦横のサイズをきちんと設定したい、というときのメモです。

# 描画用データの作成
最初に$0 \leqq x \leqq 1$, $-1 \leqq y \leqq 1$の範囲にある描画用データを作成します。
このときx方向に1の長さ、y方向に2の長さなので、coutour plotを作成した際には、横１縦２の軸の長さになってほしいですね。

```python: 
import numpy as np
import plotly.graph_objects as go


# coutour plot用データの作成
xmin, xmax, dx =  0, 1, 0.1
ymin, ymax, dy = -1, 1, 0.1

values = np.array([[x**2+y**2 for x in np.arange(xmin, xmax+dx, dx)] 
                for y in np.arange(ymin, ymax+dy, dy)])
```

# 普通に描画した場合

```python:
# countour plotの作成その１
data=go.Contour(z = values,
                x0 = xmin, y0=ymin, dx=dx, dy=dy, 
                showscale=False,
                )
fig = go.Figure(data=data)
fig.show()
```
表示されている範囲は$0 \leqq x \leqq 1$, $-1 \leqq y \leqq 1$で正しいですが、x軸とy軸の単位長さが異なっています。
![newplot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517717/8e9d7e4e-45d4-6f1a-0086-b3ea80f8648e.png)

# 次にy軸にアンカーを設定する
layoutを作成して、その中で、y軸のscaleanchorをx軸に合わせます。

```python
# contour plotの作成その２（アンカーをy軸に設定)
data=go.Contour(z = values,
                x0 = xmin, y0=ymin, dx=dx, dy=dy, 
                showscale=False,
                )
layout = go.Layout(yaxis=dict(scaleanchor='x',),
                   )
fig = go.Figure(data=data, layout=layout)
fig.show()
```

![newplot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517717/0020db0c-184c-faa2-ccc6-0c118e991ec3.png)
x軸とy軸のスケールは合うようになりましたが、描画領域の余白が邪魔です。

# 更に余白とサイズを設定する
描画領域のx方向のサイズをpwidth = 250
描画領域のy方向のサイズをpheight = 500
描画領域外の余白サイズmargin = 50 (上下左右全て同じ）
として描画してみます。
このとき、レイアウト全体の大きさは次のようになることに注意します。
xサイズ: pwidth+2*margin
yサイズ: pheight+2*margin

```python
pwidth, pheight, margin = 250, 500, 50
data=go.Contour(z = values,
    x0 = xmin, y0=ymin, dx=dx, dy=dy, 
    showscale=False,
    )
layout = go.Layout(
    width=pwidth + 2*margin,
    height = pheight+2*margin,
    margin = dict(l=margin, r=margin, t=margin, b=margin, autoexpand=False),
    yaxis=dict(scaleanchor='x',),
    )
fig = go.Figure(data=data, layout=layout)
fig.show()
```
![newplot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517717/0375e849-8369-37f2-7807-8e42c26b0a42.png)
以上で、layout内でwidth, height, marginを設定することで、所望の描画を得ることができました。
ブログにルビや脚注（注釈）とか引用を付ける方法をメモ

メモ程度に、ブログ記事にルビや脚注、注釈や引用などを付けるときのHTMLを書いておきます。

それぞれのコードをブログ記事内に埋め込む是非については、各々の考え方だと思うので分かりません。

筆者の場合、主にCMSにはWordPressを使用していて多くのWordPRessテーマを利用しています。

また、個人的な経験として、特にルビや脚注（注釈）を利用したレスポンシブサイトだと、<b>「字が小さすぎる」</b>という指摘が出てきて対応する必要が出てくる可能性がありますのでご留意ください。

この辺りについては、様々な国際規格団体で色々と議論されているあたりなのですが、本当にメモなので<b>何の意見も考えも述べていません。</b>また、記述方法もちょっと古いかもしれないので、勉強したときに本内容をリライトしていくかもです。

<H2>前提条件</H2>
<ol><li>CMSはWordPress<li>埋め込むときは「カスタムHTML」を使用<li>テキストのポイント数はWordPressテーマの標準ポイント数
</ol>

<H2>ブログ記事内でルビを付ける方法</H2>
それでは、ルビの付け方を記載していきます。

<h3>HTMLでルビを付ける</h3>

ブログ<ruby><rb>記事<rb> <rp>（</rp><rt>きじ</rt><rp>）</rp></ruby>にルビを付ける

コード的には下記のような感じなります。

```
ブログ<ruby><rb>記事<rb> <rp>（</rp><rt>きじ</rt><rp>）</rp></ruby>にルビを付ける
```
ルビ部分の前後に```<rp>（</rp>```と```<rp>）</rp>```で<b>（かっこ）</b>を入れている理由は、ルビに対応していないブラウザ対策です。

なので、気にしない場合は入れなくても大丈夫です。

この他にも、ルビの入れる方向や位置などの調整方法は多種ありますが、ここでは単純な表記方法のみ紹介します。

<h2>ＨＴＭＬで脚注（注釈）を付ける</h2>

それでは、脚注や注釈の付け方を記載していきます。


ブログ記事に脚注<sup><a href=”#last”>【1】</a></sup>や注釈<sup>【2】</sup>を付けるときはこんな感じです。

ページ内リンク有りの時と無しの時の2パターンを入れておきます。
```
ブログ記事に脚注<sup><a href="ページ内移動のidを決める">【1】</a></sup>や注釈<sup>【2】</sup>を付けるときはこんな感じです。
```
ページ内リンク先は最下部にあります。

脚注や注釈についても、様々な表記方法がありますし、最近のWordPressには、標準ブロックエディタに付いていることが多いです。

自分でカスタムHTMLにベタ打ちすることは少ないと思いますが記載しておきます。

<h2>引用した部分を明確にする</h2>
これは利用機会の多いタグだと思います。
また、WordPressであれば、引用ブロックが普通に付いていますので、そちらの利用の方が良いと思います。




<b>引用タグ</b>

<blockquote>WordPressのインストールまで簡単にできる<p>引用元｜<a href="https://unicorn-blog.jp/archives/1733" target="_blank" rel="noopener noreferrer">ブログの始め方と人気ブログの作り方を完全初心者向けに解説｜ユニコブログ&reg;</a></blockquote>

表記の仕方は下記のような感じです。

```
<blockquote>WordPressのインストールまで簡単にできる<p>引用元｜<a href=”https://unicorn-blog.jp/archives/1733” target="_blank" rel="noopener noreferrer">ブログの始め方と人気ブログの作り方を完全初心者向けに解説｜ユニコブログ&reg;</a></blockquote>
```
フォントの大きさなどについては、CSSで制御した方が良い感じなので省略します。

以上、拙いながら

<ol>
<li>ルビ
<li>脚注や注釈
<li>引用
</ol>

のコーディングメモでした。



<h2 id=”last”>脚注</h2>

<sup>1</sup> 脚注や注釈の表記（ページ内リンク）

<sup>2</sup> 脚注や注釈を記載しておく（内部リンク無し）

```
<h2 id=”last”>脚注</h2>
<sup>1</sup> 脚注や注釈の表記（ページ内リンク）

<sup>2</sup> 脚注や注釈を記載しておく（内部リンク無し）
```

なんか、Qiitaだとページ内遷移のルールが違うっぽい？？
【JavaScript関数ドリル】を毎日やる【勉強用】

#【JavaScript関数ドリル】初級編のwithout関数の実装のアウトプット



##without関数の課題内容

https://youtu.be/N4pu8Lg4E4w

##without関数に取り組む前の状態

 - 第2引数以降の引数をまとめて受け取る方法が全くわからない
 - 元の配列から引きたい数値をループして引いていけば良さそうだ

##without関数に取り組んだ後の状態

 - 解説動画を見ずに実装できた
 - 最初はfor文を使って値を新たな配列にpushしようとしたが、ifを使う前にreturnしていたのが原因でうまく代入できなかった
 - 検索の過程で「Set」「indexOf」「lastIndexOf」について知ることができた

##without関数の実装コード(答えを見る前)
```
const without = (array, ...removeArray) => {
    const concatArray = array.concat(removeArray);
    return concatArray.filter((value, index, self, ) => self.indexOf(value) === self.lastIndexOf(value));
};

console.log(without([2, 1, 2, 3], 1, 2));
//[3]
```
検索したワード
「javascript 引数　まとめて受け取る」
「javascript 配列　重複を削除」
「javascript 配列　結合」等々

##without関数の解答コード
```
function without(array, ...values) {
  const newArray = [];
  for(let i = 0; i < array.length; i++) {
    const candidateToPush = array[i];
    // values : [1, 2]
    // array: [2, 1, 2, 3]
    // candidateToPush: 2, 1, 2, 3
    if( !values.includes(candidateToPush) ) {
      newArray.push(candidateToPush);
    }
  }

  return newArray;
}

console.log( without([2, 1, 2, 3], 1, 2) );
// => [3]
```
PHP インスタンス変数のクラスを判定する

# 概要

- PHPにてインスタンスが格納されている変数（インスタンス変数）のインスタンス化元クラスを判定する方法をまとめる

# 方法1 型演算子（instanceof）の使用

1. 下記の様に記載することでインスタンス変数がクラス名を元にインスタンス化されたものならtrue、そうでなかった場合falseが帰る。

    ```php
    インスタンス変数　instanceof クラス名
    ```

# is_a関数の使用

1. 下記の様に記載することで、インスタンス変数が当該のクラス、または親の一つに「クラス名」で指定したクラスが含まれる場合true、そうでなかった場合falseが帰る。

    ```php
    is_a(インスタンス変数, 'クラス名')
    ```

# 参考文献

- [https://www.php.net/manual/ja/language.operators.type.php](https://www.php.net/manual/ja/language.operators.type.php)
- [https://www.php.net/manual/ja/function.is-a.php](https://www.php.net/manual/ja/function.is-a.php)
AWS SSO で組織の管理アカウントに割り当てを行うと AccessDenied が発生する

## 事象
AWS SSO で AWS Organizations の管理アカウントにユーザーやグループの割り当てを行うと以下のように AccessDenied が発生してしまうケースがある。

````
Access denied by IAM. Please check your policy, or wait for role propagation to complete. 
IAM Error: User: arn:aws:sts::123456789012:assumed-role/AWSReservedSSO_DelegatedAdmin_xxxxxxxxxxxxxxxx/user@example.com is not authorized to perform: 
iam:GetSAMLProvider on resource: arn:aws:iam::123456789012:saml-provider/AWSSSO_yyyyyyyyyyyyyyyy_DO_NOT_DELETE 
(Service: AmazonIdentityManagement; Status Code: 403; Error Code: AccessDenied; Request ID: bd752e56-391c-4a21-bf82-zzzzzzzzzzzz; Proxy: null)
````

割り当て操作を行う SSO ユーザーの権限セット や IAM ユーザのポリシーに AWS 管理ポリシーの `AWSSSOMasterAccountAdministrator` 付与している場合でも発生する。メンバーアカウントへの割り当てでは発生しない。

メッセージ中の権限を追加してみるとわかるが、`iam:GetSAMLProvider` だけではなく、複数の権限が不足している状態。

## 対応
以下のドキュメントに記載されているように AWS Organizations の管理アカウントに割り当てを行うには IAM ユーザーまたは権限セットに以下のようなポリシーを追加する必要がある。

https://docs.aws.amazon.com/singlesignon/latest/userguide/iam-auth-access-using-id-policies.html

> **Note**
The additional permissions listed under the "Sid": "IAMListPermissions", and "Sid": "AccessToSSOProvisiondRoles" sections are required only to enable the user to create assignments in the AWS Organizations management account.

```policy.json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "iam:ListRoles",
                "iam:ListPolicies"
            ],
            "Resource": "*",
            "Effect": "Allow",
            "Sid": "IAMListPermissions"
        },
        {
            "Action": [
                "iam:AttachRolePolicy",
                "iam:CreateRole",
                "iam:DeleteRole",
                "iam:DeleteRolePolicy",
                "iam:DetachRolePolicy",
                "iam:GetRole",
                "iam:ListAttachedRolePolicies",
                "iam:ListRolePolicies",
                "iam:PutRolePolicy",
                "iam:UpdateRole",
                "iam:UpdateRoleDescription"
            ],
            "Resource": "arn:aws:iam::*:role/aws-reserved/sso.amazonaws.com/*",
            "Effect": "Allow",
            "Sid": "AccessToSSOProvisionedRoles"
        },
        {
            "Action": [
                "iam:GetSAMLProvider"
            ],
            "Resource": "arn:aws:iam::*:saml-provider/AWSSSO_*_DO_NOT_DELETE",
            "Effect": "Allow"
        }
    ]
}
```

## 原因
CloudTrail で `GetSAMLProvider` 等の履歴を確認すると、メンバーアカウントの場合は宛先アカウントのサービスロール (`AWSServiceRoleForSSO`) を通して割り当てに伴う各種操作を行っていることがわかる。しかし組織の管理アカウントの場合は操作を行うユーザー自身の権限が使用されるため、上記のようなポリシーが追加で必要となる。

組織の管理アカウントに割り当てを行う機会自体は少ないと思いますが、特定の管理者に AWS SSO の権限を委任している場合は遭遇するケースがあるかと思いますのでご注意ください。

以上です。
参考になれば幸いです。
ダウンロードをショットカットキーで開く

# いきさつ
ダウンロードしたファイルを確認するのに
①エクスプローラーを開く
②ダウンロードを選択
というプロセスをN 回繰り返すことに嫌気がさした

windows11のやり方があまりなかったのでメモ
windows10はすでに記事があります
# やり方
エクスプローラーを開きます
ダウンロードを右クリック
その他のオプション
ショートカットの作成
デスクトップに作成
ショートカットを右クリック
プロパティを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/811209/cef2a549-2b3b-83fe-4871-5adacbdd4c4a.png)
画像のショートカットの部分で好きなキーを押しましょう
例. Ctr + Alt + D
管理者権限で実行
# 発展
上記の方法で終わりなんですが
デスクトップが汚れるのが個人的に嫌なので、次のように自分は設定しています
ショートカットを`c:\ProgramData\Microsoft\Windows\Start Menu\Program\`に移動
>ProgramDataは隠しファイルなので表示から見えるように変更が必要

同じやり方でショートカットを設定
# ダウンロードフォルダ以外
お気づきの通り、ショートカットが作れればなんでも大丈夫です
googleのよく使うページなんかを右上の詳細>その他のツールからショートカットにできます
### ここからは筆者のやり方です
いくつかのファイルは右クリックするとタスクバーにピン止めという項目が表示されます
例. GmailとかNotionとか
これらをタスクバーにピン止めすることで、次のショートカットキーが割り当てられます
`windowsボタン + タスクバーの右から数えた番号`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/811209/d631a627-308a-147d-24c5-1665d7b4adbf.png)
こんな感じです
画像の場合、例えばwindowsボタン + 1を押すとchromが開きます
とっても快適なのでおすすめです
[UiPath] Wait for Download の ススメ

# TL;DR
- 画面操作でファイルをダウンロードするなら Wait for Download （ダウンロードを待機）アクティビティがおすすめ
- ファイルを「新規に生成する」ようにしないと使えないので注意

# ユースケース
- 画面操作でファイルをダウンロードする処理がある
- ダウンロードの処理において、次のような課題・ニーズがある
    - ダウンロードの所要時間が読めない（ファイルサイズやネットワークの問題で）
    - ダウンロード完了後に後続処理をスピーディに実行したい

# 使い方

公式ドキュメントに譲ります。
https://docs.uipath.com/activities/lang-ja/docs/get-last-downloaded-file

# 注意しないといけないこと
このアクティビティは、「ブラウザからのダウンロードを監視」しているのではなく、「指定したフォルダに生成される新規ファイルを監視」しています。したがって、次のようなシチュエーションでは正しく動作しない可能性があります。

- 既存のファイルを上書きする方法でダウンロードする
    - 新規にファイルが生成されないため、タイムアウトに至るまで待機し続けます
- ダウンロード以外の処理によって指定されたフォルダに新規ファイルが生成される
    - Office製品のファイルを編集する際に生成される一時ファイルも、この条件に該当します
    - 最新のアクティビティでは、検知対象外とするファイルの拡張子を指定できるようです

注意点ではありませんが、上述の動作仕様を鑑みるとダウンロード以外でも何かしらに使用できるかもしれません。例えば、クラウドストレージを利用するワークフローにおいて、他者が格納したファイルが自身の手元に同期されたことを検知する、ということが出来そうですね（未検証）。
Chart.js3.7でドーナツ円グラフの中心にテキスト表示する方法

# Chart.js3.7でドーナツチャートの中心にテキスト表示する方法


Chart.js 3.7.0で[ドーナツチャート](https://www.chartjs.org/docs/latest/samples/other-charts/doughnut.html)の中心にテキストを表示した。

![ドーナツチャート1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584743/b7edf36b-1320-7fcc-2d79-21096ae2ae2d.png)

※2系だとまた違う方法で実装することになる。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <style type="text/css">
    html, body {
      margin: 0;
      height: 100%;
      font-size: 12px;
    }

    .container {
      padding: 16px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
  </style>
</head>
<body>
  <div class="container">
    <canvas id="doughnut_chart"></canvas>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.min.js"></script>
  <script type="module" src="./graph.js"></script>
</body>
</html>
```

```js:graph.js
const doughnutChart = document.getElementById('doughnut_chart');

// 真ん中に表示するオブジェクト
const counter = {
  id: 'counter',
  beforeDraw(chart, args, options) {
    const { ctx, chartArea: { top, right , bottom, left, width, height } } = chart;
    ctx.save();
    ctx.fillStyle = 'black';
    ctx.fillRect(width / 2, top + (height / 2), 0, 0);
    ctx.font = '32px sans-serif';
    ctx.textAlign = 'center';
    
    // 位置調整
    console.log("width", width);
    console.log("height", height);
    console.log("top", top);
    console.log("width / 2, top + (height / 2)", width / 2, top + (height / 2));
    ctx.fillText('75%', width / 2, top + (height / 2));
  }
};

const centerDoughnutChart = new Chart(doughnutChart, {
  type: 'doughnut',
  data: {
    labels: ['項目1', '項目2', '項目3', '項目4'],
    datasets: [{
      label: 'votes',
      data: [10, 20, 30, 40],
      backgroundColor: [
        'rgba(255, 112, 166, 0.5)',
        'rgba(255, 151, 112, 0.5)',
        'rgba(255, 214, 112, 0.5)',
        'rgba(112, 214, 255, 0.5)',
      ],
      borderColor: [
        'rgba(255, 112, 166, 1)',
        'rgba(255, 151, 112, 1)',
        'rgba(255, 214, 112, 1)',
        'rgba(112, 214, 255, 1)',
      ],
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: false,
        position: 'left',
      },
      title: {
        display: true,
        text: '円グラフ',
        position: 'top',
        align: 'center',
      },
      counter: {
        fontColor: 'red',
        fontSize: '50px',
        fontFamily: 'sans-serif',
      },
    },
  },
  plugins: [counter]
});
```

ようはドーナツチャートの真ん中にテキストを表示するプラグインを作成している。

## 元ネタ

How to Add Text and Value at the Center of a Doughnut Chart in Chart JS?
by Chart JS
https://www.youtube.com/watch?v=E8pSF9JrEvE
Laravel 9.x「 AWS Cloud9＋Amazon Linux2 」で開発環境を作る


#この記事は「サポート解説動画を用意」しています

早く教えて～って方はページ下部の動画も見てください。



#１．PHPセットアップ
次の順番でコマンドを実行していけば環境が作れます！！


```bash:PHP8アップデート

#<重要！！必ず１行ずつコマンドを打つこと！>
// パッケージのアップデート
sudo yum update -y

// composerバージョンアップ
sudo composer self-update

// PHPのパッケージをすべてアンインストール
sudo yum -y remove php-*

// amazon-linux-extrasをアップデート
sudo yum update -y amazon-linux-extras

// amazon-linux-extrasで使用中のパッケージと使えるパッケージを確認
amazon-linux-extras

// lamp-mariadb10.2-php7.2を使用停止
sudo amazon-linux-extras disable lamp-mariadb10.2-php7.2

// PHP8.0を有効化
sudo amazon-linux-extras enable php8.0

// インストールするパッケージの案内があったので、表示されたコマンドを実行
sudo yum clean metadata && sudo yum install php-cli php-pdo php-fpm php-mysqlnd
sudo yum install php-cli php-common php-devel php-fpm php-gd php-mysqlnd php-mbstring php-pdo php-xml

// apacheなどを再起動
sudo systemctl restart httpd.service
sudo systemctl restart php-fpm.service

```

#２．DBのインストール

```bash:MaryaDBインストール

# MaryaDB 構築
#MariaDBデフォルト確認
sudo yum list installed | grep mariadb


#MariaDBのインストール

sudo amazon-linux-extras install mariadb10.5 -y


#Apache, MariaDBの起動

sudo systemctl start mariadb

sudo mysql_secure_installation


#MaridaDBの自動起動を有効化

sudo systemctl enable mariadb

sudo systemctl is-enabled mariadb


```

#Composerのインストール

```bash:Composerインストール

#３．Composerインストール

curl -sS https://getcomposer.org/installer | php

sudo mv composer.phar /usr/bin/composer

composer

```

```bash:Laravel9.xインストール

#Laravelインストール（最新バージョン）

composer create-project laravel/laravel cms


```
#サポート解説動画

<iframe width="560" height="315" src="https://www.youtube.com/embed/Fhh5ornkeJg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


🔽上記＋αのコマンドは、Githubに掲載してます
https://github.com/yamazakidaisuke/GsCodeSample/blob/master/AmazonLinux2_PHP8_Laravel9




以上
proxmoxの/etc/pveの中身が消えた。

# リブートしたら、proxmoxの/etc/pveの中身がない。
proxmoxの各種設定は、/etc/pveの設定ファイルで行われる。通常は、ブラウザ経由の設定でOKだが、ホスト名の変更やクラスタの追加などを操作するため、直接、/etc/pveのファイルを操作した。
再起動するまでは、正しいそうに動作していたが、再起動したら、ブラウザの操作ができませんでした。
## 現象
ブラウザ上の操作画面のURLが接続できなかった。そのため、sshでログインして、/etc/pveの設定ファイルを確認しようとしたら、まったく、データがありませんでした。
## 調査
proxmoxのフォーラムで、/etc/pve がemptyの記事を見つけ、pmxcfsが怪しそうなことが分かりました。
https://forum.proxmox.com/tags/etcpve/
https://pve.proxmox.com/wiki/Proxmox_Cluster_File_System_(pmxcfs)

```
root@pve:/var/lib/pve-cluster# systemctl status pve-cluster.service
● pve-cluster.service - The Proxmox VE cluster filesystem
   Loaded: loaded (/lib/systemd/system/pve-cluster.service; enabled; vendor pres
   Active: failed (Result: exit-code) since Wed 2022-02-09 11:30:42 JST; 14s ago
  Process: 5346 ExecStart=/usr/bin/pmxcfs (code=exited, status=255/EXCEPTION)

Feb 09 11:30:42 pve systemd[1]: pve-cluster.service: Service RestartSec=100ms ex
Feb 09 11:30:42 pve systemd[1]: pve-cluster.service: Scheduled restart job, rest
Feb 09 11:30:42 pve systemd[1]: Stopped The Proxmox VE cluster filesystem.
Feb 09 11:30:42 pve systemd[1]: pve-cluster.service: Start request repeated too
Feb 09 11:30:42 pve systemd[1]: pve-cluster.service: Failed with result 'exit-co
Feb 09 11:30:42 pve systemd[1]: Failed to start The Proxmox VE cluster filesyste
lines 1-11/11 (END)
```

## 真因
proxmoxの設定ファイルは、sqlite3のデータベースで管理しており、"pmxcfs"コマンドで、fuseファイルシステムとして、/etc/pveにマウントする形式でした。
今回は、sqlite3のデータベースで、"lxc"が重複しており、起動に失敗して、/etc/pveにマウントされなかったことです。

```
root@pve:/var/lib/pve-cluster# pmxcfs
[database] crit: found entry with duplicate name 'lxc' - A:(inode = 0x00000000000D7C4F, parent = 0x00000000000D7A60, v./mtime = 0xD7C4F/0x1644155700) vs. B:(inode = 0x00000000000D7CA4, parent = 0x00000000000D7A60, v./mtime = 0xD7CA4/0x1644155760)
[database] crit: DB load failed
[main] crit: memdb_open failed - unable to open database '/var/lib/pve-cluster/config.db'
[main] notice: exit proxmox configuration filesystem (-1)
```

## 暫定対処
sqlite3で、① dump出力を作成し、② エディタで重複している"lxc"を１行削除、③データベースを再構築して起動しました。

```
root@pve:/var/lib/pve-cluster# sqlite3 config.db   <- dump出力
SQLite version 3.27.2 2019-02-25 16:06:06
Enter ".help" for usage hints.
sqlite> .output dump_config.sql
sqlite> .dump  
sqlite> .quit
root@pve:/var/lib/pve-cluster# vi dump_config.sql  <- 重複行を削除
root@pve:/var/lib/pve-cluster# mv config.db config.db_o   <- config.dbの名前を変更
root@pve:/var/lib/pve-cluster# touch config.db            <- 空のconfig.dbを作成
root@pve:/var/lib/pve-cluster# sqlite3 config.db          <- データベースの再構築
SQLite version 3.27.2 2019-02-25 16:06:06
Enter ".help" for usage hints.
sqlite> .read dump_config.sql
sqlite> .quit

root@pve:/var/lib/pve-cluster# pmxcfs  <- エラーがなくなりました。
```

ブラウザからもproxmoxの操作が可能になりましたが、データの不整合があるので、正しく治していく予定です。

proxmoxの設定ファイルが無くなったときは、びっくりした。

以上
Amazon Elastic Container Service（ECS）のBlack Belt を文章でまとめてみた

# はじめに

AWSのECSを勉強するためにBlack Belt Online Seminerを視聴したので内容をまとめます。

https://www.youtube.com/watch?v=tmMLLjQrrRA

# 背景

著者は転職活動中ですが、志望する企業でDevOpsの知識が必要となるため、第一歩としてECSについて学習します。

# ECSとは
- クラウドでコンテナを本番番環境利用するためのオーケストレーター。
- 各種AWSサービスとの連携が可能。

## 主要要素

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951272/523b9353-7745-0cd6-3a24-1e1523affc7f.png)
###４つの主要要素
- タスク定義：タスクを構成するコンテナ群定義。
- クラスター：実行環境の境界
- タスク：タスク定義に基づき起動されるコンテナ群（実際の実行の単位）
- サービス：決められた数にタスクをコピーして維持する


## 起動タイプ
- EC2起動タイプ：インスタンスをクラスターに登録する。インスタンスの管理が必要。
- Fargate起動タイプ：EC2インスタンスのプロビジョン、スケール、管理が不要

## タスク定義の詳細
- 最大10個のコンテナを定義するJSON形式のテキストファイル。
- アプリケーションを実行するときは、タスク定義をインスタンス化した「タスク」を実行する。

### 代表的なパラメータ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951272/4ad4868e-21b3-b19f-d881-75e0bc99f891.png)

- 必須
 - ファミリー：タスク定義の名前。リビジョン番号と合わせて一意に特定することが可能。
 - コンテナ定義：タスク実行時にコンテナランタイムに渡されるコンテナ定義。コンテナの名前、イメージ、メモリーなどを定義。
  - environment：環境変数を平文で設定
  - secrets（AWS Secret Manager、AWS Systems Managerパラメータストア）：機密データを設定
  - dependsOn：実行順序の制御や依存関係を設定
- オプション
 - タスクロール：コンテナが利用できるIAMロールを指定。（APIなど）
 - タスク実行ロール：ECSコンテナエージェントが利用するIAMロールを指定。（コンテナのイメージをpullなど）
 - ネットワークモード：タスクのコンテナが使用するDockerネットワークモードを指定
 - ボリューム：利用するボリュームを指定。
 - タスクサイズ：CPUとメモリのハード制限を設定。

## コンテナの実行方法
- タスク：タスク定義に従って実行されるアプリケーションの実行単位。バッチなどで活用
- サービス：指定した数のタスクを維持する。Webアプリなどで活用。

## ECSとIAMの関係

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951272/f9d7018a-aca3-2662-714d-513788da7589.png)


- クラスターパーミッション：誰がクラスター内でタスクを起動/参照できるのかを制御
- コンテナインスタンスロール：コンテナインスタンスのECSからAPIへのアクセス
- タスクロール：アプリケーションのコンテナからのアクセス
- ハウスキーピング：タスク周りの下働きの実行許可
 - タスク実行ロール：コンテナエージェントが利用するIAMロール
 - ECSのサービスにリンクされたロール：ENIの作成、ELBへのターゲットの登録/解除
Cloudflare のダッシュボードを CSS で動的マスキングする

# きっかけ

これらの記事に触発されて、Cloudflare のダッシュボードでも作ってみました。

デモ用途や Qiita 用のスクリーンショット共有時に便利です。

- [スクリーンショットやライブデモ・動画撮影で大事な情報を隠せる、CSS3を使った動的マスキング - SORACOM公式ブログ](https://blog.soracom.com/ja-jp/2021/08/12/dynamic-masking-webpage-using-css3/#co-index-1)
- [AWS マネジメントコンソールで大事な情報を隠す動的マスキング - Qiita](https://qiita.com/sugimount-a/items/4a38f91c69544cfcb934)

# 事前準備

- Chrome (or Firefox, ※ Firefox は未確認です)
- [Stylus - Chrome Web Store](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)
- [stylus-cloudflare-core-dashboard.user.css](https://github.com/kyouheicf/stylus-cloudflare-core-dashboard/blob/main/stylus-cloudflare-core-dashboard.user.css) を Stylus にインストール
    - Stylus インストール後に [Raw Link](https://github.com/kyouheicf/stylus-cloudflare-core-dashboard/raw/main/stylus-cloudflare-core-dashboard.user.css) を開くとインストールできます。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101361/ec22b3e7-87b7-a6e6-b04b-a7aadaba8c4b.png)


# ユーザーCSS の説明

- Stylusにおける独自のユーザーCSSの適用範囲は `dash.cloudflare.com` のドメイン全てにしてあります。

- ` { filter: blur(5px); }` でボカしを入れていますが、`10px` とすることでよりボカすことができます。
- 手始めにCloudflare のダッシュボードで、DNS レコード、 Zone ID、Account ID、ドメイン名、メールアドレス等をボカし対象としています。
- 「新しいナビゲーションを有効」にし、Stylus が適用されていることを確認します。
  ![image-20220209134157179](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20220209134157179.png)

![image-20220209133710100](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20220209133710100.png)

![image-20220209133953566](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20220209133953566.png)

# 改善

要望・修正依頼があれば、[GitHub](https://github.com/kyouheicf/stylus-cloudflare-core-dashboard) で Issue か Pull Request を起票してもらえると対応できると思います。

CSS Selector の取得には Chrome Developer Tools と合わせて [CSS Selector Capture Pro](https://chrome.google.com/webstore/detail/css-selector-capture-pro/cpnkcffhllafbdbljkmhebnpbnlhapmd) も便利でした。

# 参考

- [CSS Selectors Reference](https://www.w3schools.com/cssref/css_selectors.asp)
Centos Stream 9 にパッケージ管理システム Snappy

<p><b>Centos Stream 9 にパッケージ管理システム Snappy</b></p>

<p>Centos Stream9 にやっと パッケージ管理システム Snappy が dnf で Install できるようになったようです。</p>

<b>最初に Snapd をインストール</b>

```
# dnf --enablerepo=epel -y install snapd
```
<p><b>Snapd 本体を Install するための準備</b></p>
<p>Snap 環境構築については右のサイトを参考にしました。
<a href="https://snapcraft.io/install/core/centos/">snapd runtime environment</a></p>

```
# ln -s /var/lib/snapd/snap /snap
# echo 'export PATH=$PATH:/var/lib/snapd/snap/bin'  >  /etc/profile.d/snap.sh
# systemctl enable --now snapd.service snapd.socket
    Created symlink /etc/systemd/system/multi-user.target.wants/snapd.service → /usr/lib/systemd/system/snapd.service.
    Created symlink /etc/systemd/system/sockets.target.wants/snapd.socket → /usr/lib/systemd/system/snapd.socket.
```
<b>証明書を取得するためのツール Certbot クライアントをインストール</b>
```
# snap install certbot --classic
   以下のようなメッセージが出ても、問題ないようです。
   　Warning: /var/lib/snapd/snap/bin was not found in your $PATH. If you've not restarted your session...
```

<b>再起動後、実行ファイルをリンク</b>

```
# ln -s /snap/bin/certbot  /usr/bin/certbot
```
<b>証明書を取得。Web サーバーが稼働していることが前提</b>

```
# certbot certonly --webroot  -w  /var/www/html -d ドメイン名
```

 <p>メールアドレス,利用条件への同意等に答えれば完了です</p>
 <p> 更新は自動で実行されます。</p>
Laravel Mix × TypeScript × React でのうごかいないなーってなった時のメモ

TypeScript と　React をそれぞれ導入するのはちょっと調べた方法でOK。

## ちょっとつまづくポイントたち

### tsconfig.jsonファイル に jsx設定忘れない

```
(省略)
  "jsx": "react",
(省略)
```

参考： https://ics.media/entry/16329/

### import React from 'react'; でエラー出る

拡張子が、`.ts` ファイルではなく `.tsx` になっているか確認

https://teratail.com/questions/302178
【AWS】CodeBuildでNodeのバージョンを指定する方法

ここ最近学業と就活が忙しく、全く記事が書けていないのですが、久しぶりに書きたい内容があったので書きます。

タイトルにも書いてあるとおり、今回はAWS CodeBuildでNodeのバージョンを指定します。

AWSはNodeのバージョンは10、12、14はサポートしているのですが、それ以上のバージョンはサポートされていません。

最近ではNodeの推奨バージョンが16になったので、なんともかゆいところに手は届きませんね。

そこで、２週間ほどネットサーフィンをしたところ解決に至りました。

# 結論

CodeBuildの環境イメージを以下に設定。

|ラベル|値|
|---|---|
|オペレーティングシステム|Ubuntu|
|イメージ|最新|
|イメージのバージョン|最新|
|環境タイプ|Linux|

Buildspecの``install``フェーズで任意のバージョンを指定。

```buildspec.yml
version 0.2

phases:
  install:
    runtime-versions:
      nodejs: 14 //ここはサポートされているバージョンであれば何でも良い
    commands:
      - n 16.13.1 //任意のバージョンをインストール
```

これで任意のNodeのバージョンをインストールできます。

こんなことをやらなくてもAWSがNodeのバージョンを対応できるようにしてほしいですね。

何はともあれ解決できたので良かったです。

以上、「【AWS】CodeBuildでNodeのバージョンを指定する方法」でした！

Thank you for reading.
laravel8 ルーティング情報 グループで複数の情報でグループ化する方法 個人メモ

# 内容

- laravel8でルーティング系の情報をグループ化する方法をまとめる。
- 下記の様にグループ化したい情報をgroup関数の第一引数に配列状に設定する、第二引数でクロージャを定義し、グループ化したいルート情報を定義する。

    ```
    Route::group(['prefix' => '/route', 'middleware => XXX', 'as' => 'route.'], function () {
        Route::post('/user/get', [UserController::class, 'get'])->name('user.get');
    });
    ```

- urlは/route/user/getになる
- route('route.user.get)でアクセスできるようになる