OmniAICreator/Qiita-1.07M huggingface dataset:
【アンケート結果あり】社内でテスト駆動開発の体験会を開催したお話【当日編】

# はじめに
こちらの続編です！

https://qiita.com/does_not_exist/items/e5fc79cb49408312932c

# 開催目的(おさらい)
- テスト駆動開発を体験してもらい、メリットとデメリットを実感してもらう
- 開発の流れを体験してほしいので、コーディングスキルは求めない

# 開催後に期待する結果(おさらい)
- 参加者がテスト駆動開発の進め方を理解している
- 参加者が自身のプロジェクトに導入したいかを考えてくれる

# 開催後のアンケート結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/6ee11cd8-1ba9-a890-93a0-d478e6a375d3.png)


開催目的が「体験会を通してテスト駆動開発の導入について考える機会にしてもらう」なので、
評価基準を厳しめに設定してみましたが平均約4点(実践してみたい)という高評価でした！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/e2f8df72-0465-5970-ee14-b378c1584153.png)

テスト駆動開発について、体験会前の理解度も聞いてみました。
実践したことがない・知らないという方が半数以上だったため、体験会を通して半数の方に実践してみたい(評価約4)と感じてもらえたようです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/ddd63cbf-eba0-76d8-6412-3d78d0feb863.png)

とはいえ、テスト駆動開発を知っているけど実践したことがないという方は何かしらの課題を感じているはずなので聞いてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/2a44a2ad-68c5-4354-effb-bcf9cfc11f92.png)

<font color="Red">このような結果でした。<font color="Red"></font>

・結果的には早そうと思いつつ部署内、特に営業サイドへの布教が進んでいないため納期優先になりがち
<br>

・テストを書くのが面倒に感じていた
<br>
・テスト駆動する分の工数がデフォルトで計上されていない
<br>
・テストの書き方がわからない
<br>
・やったことがないと調べながらの実装となるので、まず実装することを優先してしまう

<br>

そして体験会を通してテスト駆動開発の導入を検討してもらいたかったので、導入にあたってのメリット・デメリットも聞いてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/b40edca9-8086-3841-3d15-eb12dbdca2de.png)

- 実装優先でテスト・リファクタリングは後から！→保守工数確保できなかった
みたいなパターンに皆さん耐性がありそうだなと感じました…

<br>

- テストを先に書いているとテストの書き方が悪いのかコードの書き方が悪いのか分からなくなり、とりあえず動くものを作っていました。改めてテスト駆動でやる利点と方法を理解できたら取り入れやすいなと思いました。

<br>

- テスト→処理を書く⇒テスト→処理を書くでリファクタリングの時間が減りそうな気はしています。

<br>

- 営業やお客様にその分の工数がかかるという理解が必要だと思いました。

<br>

- 手戻りが発生しづらそう。

<br>

- テスト駆動開発を行えていない点として、実際に動いている画面や結果を逐一確認しながら構築しているのが要因になっているのかなと思ってます。(何が返ってくるのかを完全に把握できていない)
よりシンプルなコードやテストを期待してテストから記載する意識を持っていこうと思います

<br>

- 仕様の把握と認識合わせはやりやすくなりそうだと思いました

<br>

<font color="Red">
テスト駆動開発のメリットである、仕様の早期理解や動作するきれいなコードについて実感した、という意見が多かったです。一方、関係者に理解してもらう必要があるという課題も挙がりました。</font>


# 開催情報
- 月一で開催している部署MTGの枠でオンライン開催
- 参加者は自分を除き10名ほど

# 体験会のようす

### 環境構築の時間(10分)
- 事前に環境構築できなかった参加者が数名いましたが、時間内に構築できました。思ったよりスムーズで驚きました
- 環境構築の所要時間はおよそ3~5分程度

### 導入(5分)
- パワポ資料を使ってテスト駆動開発について簡単に紹介

### 体験会(30分)
- READMEを参考に参加者が各自ハンズオンする形式で実施
- スタバのBGMを流し、ゆるい雰囲気に
- 体験会準備の裏話をしたり
- 質疑応答したり
    - テスト駆動開発を導入するにあたっての懸念点
    - 他の人に勧める場合はどのようにしたら良さそうか

### まとめ(5分)
- テスト駆動開発のメリット・デメリットなどを紹介

# 体験会後

- 参加のお礼とアンケートを展開



# おわりに
特急開催でしたが、テスト駆動開発を紹介できて良かったです。
これを機に他の方にも少しずつ紹介していきたいです。

【当日編】の次は【振り返り編】です！

https://qiita.com/does_not_exist/items/536322f67881d493a190
サービスを作る時の技術スタックを妄想してみた

# 背景

今新規プロダクトを０から設計構築といったことが発生したときに
エンジニア組織メンバーの属性を一切考慮せずに
自身がやりたい前提で考えてみた。

個人が使いたい技術を並べただけなので
ベストプラクティスとかは考慮していません。

あくまでも技術は手段。

## フロントエンド

TypeScript + (React + Next.js)
かなー

TypeScriptは現状CDKで使っているので
場合によってはフロントエンド側も携われたりするのかなと思ってこの選択。

## バックエンド

GO言語

実際に業務では使ったことなくチュートリアルレベルだけど
速度も快適で使いやすかった気がするw

ゴーファーくんとたわむれたい。

時点でPython
AIがこれだけ蔓延っている現在だとPythonをやっておけば
しばらくは職に困らないのではという安定感。

## インフラ

今までほぼAWSしか触ってこなかったけども、
クラウドであればAWSでもGoogleCloudでもAzureでも
いいかなと考えている。

円安の今場合によっては国産クラウドも選択肢に入れるかもしれない。

## APMツール

Datadog

今でも使っているし、
犬のアイコンに癒される。

## VCS(Version Control System)

GitHub

オクトキャット！

Bitbucket、Codecommit, GitLabも使ったことあるけど
IssueやGitHubActionsや、他ツールとの連携のしやすさなどで
一歩抜き出ている気がする。

もうCopilotなしでは開発ができない体になっているので。。


## IaC(Infrasturcture as Code)

Terraformかな。

CDK や　CDKTFも使っているけど
やはり安定感使いやすさが○

プロバイダーが豊富なので
理論上Datadogの設定も全てTerraformで管理できる。

唯一のデメリットはHCLの書き方を覚えないといけないことだが、
moduleをうまく利用すればコンフィグを書くだけ。

楽しさは。。ないかもしれないw

## CI/CD

GitHubActionsもしくはCodebuild（AWSの場合）かな。

マネージドが楽

Terraformの重要度にもよるけど場合によっては
HCP Terraform(旧Terraform Cloud)も選択肢に入れるかもしれない。

HCP Terraformの名称にまだ慣れないw
https://japan.zdnet.com/article/35218132/


## コンテナ

Docker Desktopは使わないようにする。

ローカルで利用する場合はDocker Engineだけをインストールする。

企業規模に応じて課金されるのと
WEBUIは不要なので。

なのでクラウドのアーキテクチャもAWSであればECSを利用する前提の設計になる。

Kubernetesも興味あるので選択肢に入る。

## プロジェクト管理

JIRAが慣れてはいるけど
Backlogも使ってみたい。

GitHub機能のProjectでも実現可能なのか試してみたい感はある。

## ドキュメント管理

Confluenceがあまり好きくないので
Notionかな

Notionを使うのであればプロジェクト管理も必然的に
Notionになるのかな。

使ったことないのでイメージわかず。


## コミュニケーションツール

Slack

Slackはやっぱり便利。


## エディタ

VSCodeで統一

拡張機能便利だし無料だし


## 番外編

### 開発端末

MacBook Pro のUSキーボード Arm 16GB 以上

JISキーボードはもうわからないw
メール関係のUIの不具合



+ [【未解決】アクティビティ メールのポップアップには、ページの下部にある [テンプレートの挿入、作成、または更新] ボタンがありません。](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007eoujT)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/75919fbb-5f71-6fd1-20ad-f35b6e34b7de.png)

# メールの本文が表示されない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/f48725e2-ede3-985f-cbdf-184f775a526a.png)

解決策

根本原因は Gloogle Chrome の Cookie 設定 [サードパーティの Cookie をブロックする] に起因します。

上記の Google Chrome 権限を無効化する必要があります。
[メールの本文セクションが Lightning Experience のメールコンポーザに表示されない](https://help.salesforce.com/s/articleView?id=000384148&type=1)

# Unable to send an e-mail as the page is empty!?!

+ [Unable to send an e-mail as the page is empty!?!](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000PeFNP)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/6b0039ae-a3b6-43b5-d4fb-4578ecefb648.png)

:::note
The issue has been solved by the Salesforce support team.
It was just the display of the global action which was empty!??!

この問題は Salesforce サポート チームによって解決されました。
それは空のグローバル アクションの表示だけでした!??!
:::

# テンプレート

+ [コーディングが Lightning と Classic で異なるように見えるため、Classic のメール テンプレートを Lightning のメール テンプレートに読み込むと、HTML エラーがあると表示されます。結合フィールドは {} から {{{}}} に変更されたように見えます。結合フィールドを手動で変更しようとしましたが、結合フィールドが間違っているという HTML エラーが繰り返し表示されました。](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000MZoHp)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/3853b795-68fd-48c3-a486-18f550d71a9c.png)


:::note
ブラウザの Cookie 設定にプレイグラウンドを追加して、クロスブラウザ Cookie を許可し、ブラウザを再起動すると、Salesforce のクラシック メール テンプレートとレター ヘッドを使用できるようになりました。その後、拡張レター ヘッドと拡張メール テンプレートを削除する必要がありました。
:::
MongoDB を Windows11 にインストール

# はじめに
この記事では、Windows11 に MongoDB を導入する手順を記載していきます。

https://www.mongodb.com/

# ダウンロード
今回は [MongoDB Community Server](https://www.mongodb.com/try/download/community) をダウンロードします。
サイトにアクセスして、ダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/ef0311ed-34ef-2563-7768-22ab41f9df92.png)


# インストール
ダウンロードしたファイルをクリックしてインストーラーを起動します。
起動したら「Next」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/738192f2-8e67-02df-8eec-1e4d191d0159.png)

ライセンスにチェックして、「Next」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/b3f2096b-efc2-a17f-eba5-085a8110800a.png)

「Complete」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/057769e3-0591-7800-77a1-d19250f073fc.png)

デフォルトの状態で「Next」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/3d841c2a-661c-8d57-297f-761a91e11a1a.png)

「Next」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/65bd9e3a-36b5-630b-dade-0a742aab6586.png)

「Install」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/1d29269a-a54a-b462-fcb9-a4d3c3246aba.png)

インストールが完了すると以下のダイアログが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/b9ab35f1-5bc6-31f7-7389-a02dd7aee746.png)

また、同時に MongoDB を操作するためのGUIツールである MongoDB Compass もインストールされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/a6d06689-13f3-5861-cbaf-0343b059f7fd.png)

これでインストールは完了です。
```C:\Program Files\``` に ```MongoDB``` フォルダが作成されます。

# 関連記事
https://qiita.com/Yasushi-Mo/items/fe67cae83a71840460ea

https://qiita.com/Yasushi-Mo/items/c8bb9fb9ed816a5bf7a3
組織 / チームの崩壊を防げ！「組織効力感」とは？

# はじめに

スクラムマスターをしているtakateinです。

みなさんはこんな経験ありますか？
`「ピンチだけど、この仲間/会社なら乗り越えられる」`
`「ぶっちゃけ、自分だけでなんとか出来るのでは…？」`

昨年度、転職したこともあり、組織やチームに対して自分ってどうあると嬉しいのか考える機会が少し増えました。

同僚から酒井風太さんの動画や記事を勧められて面白かったので本記事に1部抜粋して、簡単にですがまとめていきます。

# 参考にした動画

まずは観た動画から紹介
(タイトルは簡略化してます。)
- 【Z世代育成はスラムダンク学べ】組織効力感を高める方法
https://youtu.be/SwvR743bscc?si=uD5Av8_P2WLFAKd2
- 【組織崩壊を防ぐメカニズム】優秀なリーダーはこうして潰される
https://youtu.be/W_b2vp19nWA?si=FE5TIqQhYm7LK3ua

# なぜ組織は崩壊していくのか

組織のあるべき姿は、メンバー同士が依存し切磋琢磨して、より良いプロダクトを作り利益を上げられる状態、つまり、**働きがい**がある組織だと思います。

ただ、メンバーの自己効力感(後に説明)が強くなりすぎると、`組織のメンバーが相互依存せずに、全部自分でやれると感じる単独依存性`が発生します。

結果、**この会社で働く必要がない**と感じてしまうことが起きてしまいます。
後に転職へと繋がることがあります。

そのため、自己効力感が高く、組織効力感が低い組織は空中分解し、崩壊していきます。

![IMG_2912.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/9fdf2d17-1b49-6661-a6d3-5bb020a331c1.png)

![IMG_2917.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/9766a5f1-ec79-e02c-07bc-a023e4680fa3.png)

では、組織効力感とそれに対する自己効力感とは何かを説明していきます。


# 自己効力感とは

`「挑戦に対して自分は達成出来る/出来るようになる という自信を持っている」`と認識することです。

この状態を獲得するには以下4つのパターンがあります。
1. **達成体験** - 目標を建てて実施する成功体験とはで、出来ないことが、"気付いたら"出来てたこと
1. **社会的説得** - 自分の能力やスキルを他者から褒められること(結果よりもプロセスや努力)
1. **代理体験** - 周りの人ができてるなら自分も出来ると感じること (マウントを取るのはNG)
1. **感情的状態** - 心身のコンディション

![IMG_2915.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/507315c8-0522-5d32-0d34-54916b2db6ed.png)


# 組織効力感とは

`組織のメンバー一人ひとりの自己効力感の相互作用によって、組織全体が「目標を達成できる、成功できる」`と認識する状態です

## 組織効力感がないとどうなるのか？

組織効力感が低く、利益が出なくなった時に自己効力感の高い人材が抜けてしまうと、挑戦する力がかなり減ります。
結果、芋づる式に他の人材もどんもん辞めていく現象が発生します。

そのため、何か事故があったり、人が抜けても`「この会社/チームとならまだまだいける」`という状態が理想です。

![IMG_2918.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/c3b74235-9737-52d6-c028-c6be552ae73a.png)

## どうすれば組織効力感が上がるのか

まずは自己効力感を上げて、組織の目標達成に活躍でき状態を作るのが大事です。

参考にした動画内では以下2点を述べられてました。

1. **集団的達成経験** - "みんなで"業績を達成した、組織で出来なかったことが出来た
1. **貢献可能性の自覚** - 自分がここを頑張れば業績が伸びることを知ること

集団スポーツのように、一人一人に「〇〇さんがここをやってくれれば、このビジョン達成に繋がる」とかを的確に伝えることが良さそうです。
`"小さな能力、大きな主役"` と動画の中では説明されていました！
野球とかバスケやアメフトだとその辺想像しやすいですよね。特にアメフト！

# まとめ

- ピンポイントでもいいので、組織に活躍して、相互依存関係を作ることが大事。小さな能力、大きな主役
- シンプルにみんなで、助け合うの大事
- 組織効力感を上げて、組織を守れ！

酒井風太さんのnoteや動画は面白いので是非！
【オンプレミス】SMB over QUIC環境構築時に気付いた小ネタ

[前回の記事](https://qiita.com/hidekko/items/385301500337dbbca498)を書いていて気付いた小ネタです。

# SMBへの証明書マッピングを解除するには
以下のコマンドでマッピングの解除ができました。

```サンプルコード.ps1
Remove-SmbServerCertificateMapping -Name [証明書の名前]
```
[証明書の名前]の部分は証明書の[Display Name]になると思います。(未確認ですがたぶんあってるはずです・・・)
私の環境では以下のようになります。
```remove-smb-cert-mapping.ps1
Remove-SmbServerCertificateMapping -Name win2k25-02.sh-style.info
```
実行結果として```Y```か```N```かを聞いてきますので、マッピング解除して良ければ```Y```を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643392/559ebc28-5c74-ef83-a241-84618668f394.png)
```Y```と```N```(それ以外の選択肢もありますが)を選択後はうんともすんとも言いませんが、エラーなくコマンドが終了すれば(何もなく改行されコマンド待ち受け状態になれば)マッピングの解除は完了です。
(Successとか出して欲しいな・・・コマンド実行結果なんて気にせず、何某かの確認用コマンドで状態確認しろってことかもしれませんが・・・)

# Windows 11 Proでの証明書とインストール時の挙動
**何回もやってる作業と言いながら今更気付いたんですが**、この画面、[現在のユーザー]を選択すると[次へ]のボタンからUACのアイコンが消えて、[ローカルコンピューター]を選択するとUACのアイコンが出てくるんですね。
[現在のユーザー]と[ローカルコンピューター]とで証明書の配置位置が違い、その配置位置の違いからUACを聞いてくるかどうかが変わる(証明書配置という行為に必要とされる権限が違う)ので、当たり前といえば当たり前なんですが、細かいUIまで作りこんでますね。

比較のために[現在のユーザー]と[ローカルコンピューター]を選択した場合の[次へ]のアイコンをご覧ください。

[現在のユーザー]を選択した場合の[次へ]のアイコン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643392/31fb76d0-2b37-023b-80a6-317575651f09.png)

[ローカルコンピューター]を選択した場合の[次へ]のアイコン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643392/1270f0d5-47e0-1dac-73f0-f7ba654ddcc1.png)

はい。
明確にアイコンの表示も変わり、当たり前ですが[次へ]をクリックした後の挙動が違いますね。
<font color="Red">**さすがMicrosoftという感じですね。**</font>

今回の小ネタは以上です。

そろそろ業務開始時間なので本日はこれまで。
Dockerコンテナ内でAtlasを使う際の留意点

# はじめに
こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉）
この記事はマイグレーションツールAtlasをDockerコンテナ内で使用したい場合の留意点を簡潔にまとめたものになります。

Atlasに関しては以下の記事で説明しています。

https://qiita.com/Senritsu420/items/17fccac51ca33bb5479d


# Atlasの仕様
Atlasでは`atlas migrate diff`で現在のデータベーススキーマとの差分から新しいマイグレーションファイルを生成し、`atlas migrate apply`で生成されたマイグレーションファイルをデータベースに適用します。

しかし、仕様として`atlas migrate diff`と`atlas migrate apply`は別々のデータベースで実行する必要があります。

https://atlasgo.io/versioned/diff

公式リファレンスにもあるように、`atlas migrate diff`でマイグレーションファイルを生成する際には、マイグレーション検証用のデータベースを仕様する必要があります。

``` 
atlas migrate diff create_users \
  --dir "file://migrations" \
  --to "file://schema.sql" \
  --dev-url "docker://mysql/8/dev" # Or: "docker://mariadb/latest/dev"
```

# Dockerコンテナ内で使用する場合
AtlasをDockerコンテナ内で使用する場合は、以下の2通りがやり方として考えられます。

1. Dockerコンテナ内でDockerを使用できるようにする
1. データベースを2つ用意し、検証用と稼働用に分ける

順番に説明していきます。

### Dockerコンテナ内でDockerを使用できるようにする

先ほど出てきたコマンドを見返してみます。
``` 
atlas migrate diff create_users \
  --dir "file://migrations" \
  --to "file://schema.sql" \
  --dev-url "docker://mysql/8/dev" # Or: "docker://mariadb/latest/dev"
```

ここでは、`docker://mysql/8/dev`というデータベースを検証用として使用しています。
しかし、Dockerコンテナ内では使用できません。（単純にDockerの動作環境が無いだけです）

そのため、Dockerfileに`docker-io`をインストールするコマンドを使うことで解決できます。

### データベースを2つ用意し、検証用と稼働用に分ける

こちらはDockerコンテナにDockerをインストールしたく無い方向けとなっています。
公式で使用していたデータベースを使用するのではなく、自前でもう一つ用意します。

MySQLコンテナを作っている場合は、以下の記事のやり方で初期起動時にデータベースを1つ追加で作成する事ができます。

https://qiita.com/NagaokaKenichi/items/ae037963b33a85df33f5

初期データに投入する際、以下のようなSQL分を記述することで作成できます。

``` sql
CREATE DATABASE IF NOT EXISTS `検証用DBの名前`;
GRANT ALL PRIVILEGES ON `検証用DBの名前`.* TO 'DBのユーザ'@'%';
FLUSH PRIVILEGES;
```

これにより、Dockerコンテナ内でもAtlasが扱えるようになります。

# おわりに
今回はニッチな情報をお届けしました！
コマンドによるマイグレーションの制御ではなく、コンテナ起動時に実行させたいなどの要望がある場合に上記のような方法で実現するので、もしあればやってみてください！😉

最後までご覧いただきありがとうございました！
以上、センリツでした。🤓
フローのUpdate Triggering Record　アクションは無くなった？


+ [I can't find "Update Triggering Record" in the flow canvas.](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007cmD3bSAE)

あんまり気にしたことは無かったのですが、Update Triggering Recordが現在のバージョンではないですね。

ヘルプを見るとあるんだけど...（Spring 22）

+ [Easily Add Frequently Used Elements to Record-Triggered Flows via Shortcuts](https://help.salesforce.com/s/articleView?id=release-notes.rn_automate_flow_builder_shortcuts.htm&release=236&type=5)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/99aa5fd3-e92c-2924-b704-0121f4beccd2.png)

今のバージョンでは高速更新でもないな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/9de3e54b-6174-b69f-c4c1-f8854002fa29.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/3cac443d-f7f1-dd5b-752e-c2eb2f9035b4.png)
簡単！TeraTerm時短術

こんにちは。篠原です。

TeraTermの手動ログインって複数接続するとき大変ですよね。
今回は少しでも時短できるように自動ログイン＆ログ保存ができる
マクロを組んでみました。

## Step1 ttlファイルを作成する

まず、マクロを記載するファイルを用意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/1d693cd6-2e2e-2603-251a-250ff79936b9.png)

またダブルクリックで実行できるように
TeraTermと関連付けをしておきます。
作成したttlファイルのプロパティ＞全般＞プログラム変更から
インストールしたTera Term Macro Interpreterを選択しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780649/437ebf16-638c-afad-9c89-6b7ba569df75.png)



## Step2 自動ログインマクロを組んでみる
それでは実際に自動ログインマクロを組んでいきます。
設定情報に接続先、ユーザー名、パスワードを設定しておくと
ダブルクリックでログインできるようになります。

```
;; 設定情報
HOSTADDR = '接続先ホスト' 
USERNAME = 'ユーザー名' 
PASSWORD = 'パスワード' 

;; ①コマンド組立て 
COMMAND = HOSTADDR 
strconcat COMMAND ':22 /ssh /2 /auth=password /user=' 
strconcat COMMAND USERNAME 
strconcat COMMAND ' /passwd=' 
strconcat COMMAND PASSWORD
 
;; ②接続 
connect COMMAND
 
;; マクロ終了 
end
```

## Step3 自動ログ保存を追加する
ログイン後、自動でログを保存するマクロを追加します。
ログ保存場所、ファイル名を設定しておきます。

```
;ログ保存場所
path_log_folder = 'ログフォルダの絶対パス'

;ログファイル名
LOGFILE = 'ログファイル名.log'
changedir path_log_folder

;ログ記録開始
logopen LOGFILE 0 0
```

## マクロ全文

```
;; 接続先ホスト／ユーザ名／パスワード設定 
HOSTADDR = '接続先ホスト' 
USERNAME = 'ユーザー名' 
PASSWORD = 'パスワード' 

;; ①コマンド組立て 
COMMAND = HOSTADDR 
strconcat COMMAND ':22 /ssh /2 /auth=password /user=' 
strconcat COMMAND USERNAME 
strconcat COMMAND ' /passwd=' 
strconcat COMMAND PASSWORD
 
;; ②接続 
connect COMMAND


;; ③自動ログ記録
;ログ保存場所
path_log_folder = 'ログフォルダの絶対パス'

;ログファイル名
LOGFILE = 'ログファイル名.log'
changedir path_log_folder

;ログ記録開始
logopen LOGFILE 0 0
 
;; ④マクロ終了 
end
```
## まとめ
接続先ごとにマクロを組んでおくととても便利です！
以上、篠原でした。
Linux デーモン(daemon)メモ

Linuxデーモン（daemon）は、バックグラウンドで動作し、特定のタスクを実行するプログラムです。デーモンは通常、システムの起動時に開始され、ユーザーの直接の操作なしにサービスを提供し続けます。デーモンは典型的にはログファイルの監視、ネットワークサービスの提供、システムメンテナンスタスクの実行などを行います。

### デーモンの特徴

- **バックグラウンドで実行**：ユーザーの直接の操作なしに実行され、システムリソースを継続的に監視・管理します。
- **独立したプロセス**：デーモンはシステムの他のプロセスから独立して動作し、一般的にはルート（root）ユーザーによって管理されます。
- **特定のタスクに特化**：特定の機能やサービスを提供するために設計されており、一般的には長時間にわたって稼働します。

### 主なLinuxデーモンの例

1. **cron**：
   - 定期的なタスクのスケジューリングを行うデーモン。
   - `/etc/crontab`やユーザーごとの`crontab`ファイルに基づいて、指定された時間にコマンドやスクリプトを実行します。

2. **sshd**：
   - SSHプロトコルを使用して、リモートシステムへの安全な接続を提供するデーモン。
   - 通常、ポート22でリッスンしています。

3. **httpd**：
   - Apache HTTPサーバーデーモン。
   - ウェブサーバーとして機能し、HTTPリクエストを処理します。

4. **mysqld**：
   - MySQLデータベースサーバーデーモン。
   - データベースの管理とクエリの処理を行います。

5. **systemd**：
   - システムおよびサービスマネージャーデーモン。
   - システムのブートプロセス、サービスの管理、ログの収集などを行います。

### デーモンの管理

デーモンの管理には通常、`systemctl`コマンドを使用します。以下は、`systemctl`を使用したデーモンの基本的な管理方法です：

1. **デーモンの開始**：
   ```bash
   systemctl start <daemon_name>
   ```
   例:
   ```bash
   systemctl start sshd
   ```

2. **デーモンの停止**：
   ```bash
   systemctl stop <daemon_name>
   ```
   例:
   ```bash
   systemctl stop sshd
   ```

3. **デーモンの再起動**：
   ```bash
   systemctl restart <daemon_name>
   ```
   例:
   ```bash
   systemctl restart sshd
   ```

4. **デーモンのステータス確認**：
   ```bash
   systemctl status <daemon_name>
   ```
   例:
   ```bash
   systemctl status sshd
   ```

5. **デーモンの自動起動の有効化**：
   ```bash
   systemctl enable <daemon_name>
   ```
   例:
   ```bash
   systemctl enable sshd
   ```

6. **デーモンの自動起動の無効化**：
   ```bash
   systemctl disable <daemon_name>
   ```
   例:
   ```bash
   systemctl disable sshd
   ```

### デーモンの設定ファイル

デーモンの設定ファイルは通常、`/etc`ディレクトリ以下に配置されています。各デーモンには独自の設定ファイルがあり、これを編集することで動作をカスタマイズできます。例えば、`sshd`の設定ファイルは`/etc/ssh/sshd_config`にあります。

デーモンはLinuxシステムの重要なコンポーネントであり、システムの運用やメンテナンスにおいて重要な役割を果たします。デーモンの管理と設定を理解することで、システムの安定性と効率性を向上させることができます。
拡張機能について

# 便利なchromeの拡張機能の紹介
今回は知っておくと便利なchromeの拡張機能について紹介しようと思います。普段から調べものや検索でブラウザを開く機会が多いと思います。特にWEB関連でお仕事をしているのであればコードを書いているよりググったり学習したり、リサーチしたりってことが半分以上を占めている可能性もあります。

拡張機能をダウンロードすることで検索や学習に掛かる生産効率を上げることができ、よりコードやプライベートに時間を割く余裕も出来るので、是非活用していきましょう。今回は個人的に役に立つ拡張機能のOneTabを紹介します

## ダウンロード方法
まず初めにダウンロードします。chromeの拡張機能は無料で手に入ります

chrome ウェブストアのページ
↓
https://chromewebstore.google.com/

今回は「One Tab」を検索してみましょう

![chromeストアトップページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/404ca729-059e-a2f5-f288-7efad4ea0f29.png)

検索すると該当の拡張機能があるので「Chromeに追加」ボタンを押しましょう
![onetabダウンロード画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/b3139654-d80e-72d2-da5d-45d5a5d2ee6c.png)

これで拡張機能が追加されました



## ツールバーに固定する方法
次は追加した拡張機能をツールバーに固定してみましょう
固定することで常にツールバーに表示されているので頻繁に使いたい拡張機能は固定しておきましょう

![スクリーンショット 2024-06-26 073937.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/b8890a8b-6bcd-b3f5-0f8b-44a88080b09d.png)


## オススメの拡張機能5選
### one tab

![スクリーンショット 2024-06-27 055247.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/3be09eb3-f4d7-982b-0465-f66e11b0a653.png)


OneTabでできること
* 開いてるタブを収納出来る
* ブラウザで開いているページをグループ化出来る
* タブグループとして名前を付けて保存が可能


オススメの人
* ウィンドウのタブが常に散らかっている方
* いろいろな情報をスッキリと収納したい方

調べ物をしてるうちにたくさんのタブが溜まって散らかっている、ということはありませんか？調べているうちに何を調べているのか、どのページを参考にしたいのか忘れてしまう時があります。そんな時に役立つのがOneTabです

![スクリーンショット 2024-06-27 060607.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/5b249d96-26d2-a1b1-9713-0417e6023d88.png)

OneTabアイコンにて収納が可能です
「すべて復元する」にて一斉に復元が可能、「すべて削除する」で一斉に削除できます
個別で復元したい場合は対象をクリック、個別を削除する場合はマウスを合わせると✕ボタンが左に表示されるので、そちらで削除可能です
![スクリーンショット 2024-06-27 062011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/2ffe619f-c7ed-482f-414c-663b251095fa.png)


**グループ化する方法**

グループ化する場合は分けたいページで右クリックして「OneTab」を選択してもらうと下記の図のようにメニューが出るのでOneTabに送る条件を選択できます
例えば「右側のタブをOneTabに送る」を選択すると選択中のページより右側のタブを一斉にOneTabに送ることが出来ます

![スクリーンショット 2024-06-27 064404.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/6599066f-965e-f8a9-ce46-7a7ea7dc9000.png)


![75a41292-e98c-4b3c-a9b9-5df27873ae45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/d01398f1-664e-57a3-8819-b0c5b22f5754.png)

このようにグループ化されました。
仮にこの時点でグループ化したいタブがごっちゃになっていても大丈夫です
保存したタブをドラッグ＆ドロップで移動することもできます

![スクリーンショット 2024-06-27 072839.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/f6221888-ac68-12a7-8dff-d995cf57bce2.png)


**グループに名前を付ける**

グループ化したグループにそれぞれ名前を付けることが出来ます
「その他」を押すと下記図のようなメニューが出現するので「このタブグループに名前を付ける」を選択します

![スクリーンショット 2024-06-27 073517.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/fcec0ed0-b9eb-25f2-f12d-f3b2e76d6bf2.png)


今回は各グループにHTML,CSSという名前を付けました

![スクリーンショット 2024-06-27 074324.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3451993/167f46d9-2f06-59b2-fbb1-3c3227d4bf29.png)


このようにOneTabはタブを整理しグループ化することが出来ます
まだ他にも役立つ機能があるので実際に使ってみながら覚えてみると良いです


## おわりに
本当は他にもいろいろ拡張機能を紹介したかったのですが、長くなったので今回は拡張機能のダウンロード方法と便利なOneTabについてご紹介しました。他にも絶対に使った方が良い！という拡張機能があったら教えてください
systemctlメモ

`systemctl`は、systemdを使用するLinuxディストリビューションでサービスやユニットの管理を行うためのコマンドです。systemdは、サービスの起動と停止、プロセスの管理、システムのログ記録などを行うシステムおよびサービスマネージャです。

### 基本的な使い方

#### サービスの管理

1. **サービスの開始**：
   ```bash
   systemctl start <service_name>
   ```
   例:
   ```bash
   systemctl start httpd
   ```

2. **サービスの停止**：
   ```bash
   systemctl stop <service_name>
   ```
   例:
   ```bash
   systemctl stop httpd
   ```

3. **サービスの再起動**：
   ```bash
   systemctl restart <service_name>
   ```
   例:
   ```bash
   systemctl restart httpd
   ```

4. **サービスのリロード**（設定ファイルの再読み込み）：
   ```bash
   systemctl reload <service_name>
   ```
   例:
   ```bash
   systemctl reload httpd
   ```

5. **サービスの有効化**（ブート時に自動起動）：
   ```bash
   systemctl enable <service_name>
   ```
   例:
   ```bash
   systemctl enable httpd
   ```

6. **サービスの無効化**（ブート時の自動起動を無効化）：
   ```bash
   systemctl disable <service_name>
   ```
   例:
   ```bash
   systemctl disable httpd
   ```

7. **サービスの状態確認**：
   ```bash
   systemctl status <service_name>
   ```
   例:
   ```bash
   systemctl status httpd
   ```

#### システム管理

1. **システムの再起動**：
   ```bash
   systemctl reboot
   ```

2. **システムのシャットダウン**：
   ```bash
   systemctl poweroff
   ```

3. **システムの休止**：
   ```bash
   systemctl hibernate
   ```

4. **システムのサスペンド**：
   ```bash
   systemctl suspend
   ```

#### その他のユニット管理

1. **ユニットの一覧表示**：
   ```bash
   systemctl list-units
   ```

2. **全ユニットの一覧表示**（アクティブと非アクティブの両方）：
   ```bash
   systemctl list-units --all
   ```

3. **ユニットファイルの一覧表示**：
   ```bash
   systemctl list-unit-files
   ```

4. **依存関係の確認**：
   ```bash
   systemctl list-dependencies <unit_name>
   ```

### ユニットファイル

ユニットファイルは、systemdによって管理されるサービス、スワップ、マウントポイント、デバイスなどを定義するテキストファイルです。これらは通常、以下のディレクトリに配置されます：

- `/etc/systemd/system/`
- `/lib/systemd/system/`
- `/usr/lib/systemd/system/`

### 例

Apache HTTPサーバーを管理する場合：

1. サービスの開始：
   ```bash
   systemctl start httpd
   ```

2. サービスの状態確認：
   ```bash
   systemctl status httpd
   ```

3. サービスの自動起動を有効化：
   ```bash
   systemctl enable httpd
   ```

4. サービスの自動起動を無効化：
   ```bash
   systemctl disable httpd
   ```

これで、`systemctl`コマンドの基本的な使い方と主なオプションについての説明を終わります。
modprobeメモ

`modprobe`はLinuxシステムにおいてカーネルモジュールを動的に挿入および削除するためのコマンドです。カーネルモジュールは、特定のハードウェアやファイルシステムのサポートなど、カーネルの機能を拡張するためのコードです。

### 基本的な使い方

1. **モジュールの挿入**：
   ```bash
   modprobe <module_name>
   ```
   例:
   ```bash
   modprobe snd_hda_intel
   ```

2. **モジュールの削除**：
   ```bash
   modprobe -r <module_name>
   ```
   例:
   ```bash
   modprobe -r snd_hda_intel
   ```

### オプション

- **-v**（verbose）：詳細な情報を表示します。
  ```bash
  modprobe -v <module_name>
  ```

- **-n**（dry run）：実際には変更を加えずに実行される動作を表示します。
  ```bash
  modprobe -n <module_name>
  ```

- **-f**（force）：警告やエラーを無視して強制的にモジュールを挿入します。
  ```bash
  modprobe -f <module_name>
  ```

- **-r**（remove）：指定されたモジュールを削除します。
  ```bash
  modprobe -r <module_name>
  ```

- **--show-depends**：モジュールの依存関係を表示します。
  ```bash
  modprobe --show-depends <module_name>
  ```

- **-C**（config）：指定された設定ファイルを使用します。
  ```bash
  modprobe -C /path/to/config/file <module_name>
  ```

### モジュールの依存関係

`modprobe`は依存関係を自動的に処理します。つまり、あるモジュールが他のモジュールに依存している場合、`modprobe`は必要な依存モジュールを先にロードします。

### カーネルモジュールの確認

ロードされているカーネルモジュールを確認するには、以下のコマンドを使用します：
```bash
lsmod
```
これにより、現在ロードされているすべてのモジュールと、それぞれのモジュールの依存関係やメモリ使用量が表示されます。

### モジュール設定ファイル

`/etc/modprobe.conf`や`/etc/modprobe.d/`ディレクトリ内の設定ファイルを編集することで、モジュールのロードに関する設定を変更できます。これにより、特定のオプションを指定したり、モジュールのエイリアスを設定したりできます。

### 例

サウンドカード用のカーネルモジュールをロードする場合：
```bash
modprobe snd_hda_intel
```

その後、ロードされたことを確認するために：
```bash
lsmod | grep snd_hda_intel
```

### 注意事項

モジュールの挿入や削除はシステムに重大な影響を与える可能性があるため、特に`-f`オプションを使用する際は注意が必要です。また、モジュールの依存関係やシステムの整合性を常に考慮することが重要です。

これで、`modprobe`の基本的な使い方とそのオプションについての説明を終わります。
Linux各ディレクトリ役割

Linuxのファイルシステムは、特定の目的に基づいたディレクトリの階層構造を持っています。以下に主要なディレクトリとその役割を説明します。

1. **/**（ルートディレクトリ）：
   - ファイルシステムの最上位ディレクトリです。すべてのディレクトリとファイルはこのディレクトリから始まります。

2. **/bin**：
   - システムの基本的なコマンドが格納されています。例えば、`ls`や`cp`など。

3. **/sbin**：
   - システム管理用のコマンドが格納されています。例えば、`ifconfig`や`reboot`など。

4. **/etc**：
   - システムの設定ファイルやスクリプトが格納されています。例えば、ネットワーク設定ファイルやユーザー情報ファイルなど。

5. **/dev**：
   - デバイスファイルが格納されています。これにより、ハードウェアデバイスがファイルとして扱われます。例えば、ハードドライブは`/dev/sda`などになります。

6. **/proc**：
   - システムやプロセス情報を仮想的に提供するディレクトリです。例えば、システムのメモリ情報は`/proc/meminfo`にあります。

7. **/var**：
   - 可変データファイルが格納されています。ログファイルやメールスプールなどが含まれます。例えば、`/var/log`にはシステムのログファイルが格納されます。

8. **/tmp**：
   - 一時ファイルが格納されるディレクトリです。システム再起動時にクリアされることが多いです。

9. **/home**：
   - ユーザーのホームディレクトリが格納されています。例えば、ユーザー`john`のホームディレクトリは`/home/john`になります。

10. **/usr**：
    - ユーザー向けのプログラムやデータが格納されています。`/usr/bin`には多くのユーザープログラムが含まれ、`/usr/lib`にはライブラリが含まれます。

11. **/lib**：
    - 基本的な共有ライブラリとカーネルモジュールが格納されています。

12. **/opt**：
    - オプションのソフトウェアパッケージがインストールされる場所です。主にサードパーティのアプリケーションが含まれます。

13. **/mnt** と **/media**：
    - 一時的にマウントされたファイルシステムのためのマウントポイントです。例えば、外付けハードドライブやUSBメディアがここにマウントされます。

14. **/boot**：
    - ブートローダーやカーネルイメージが格納されています。システム起動に必要なファイルが含まれます。

15. **/root**：
    - スーパーユーザー（root）のホームディレクトリです。

各ディレクトリの役割を理解することで、Linuxシステムの管理やトラブルシューティングがより容易になります。必要な情報が特定のディレクトリにあることを知っておくことが重要です。
SC-100合格体験記

## はじめに
Azure経験は小口案件のPM経験１回のみのシニアSEです。
会社の推奨でAzure試験を何回か受験しており、エキスパートはDevOps Engineer ExpertとAzure Solutions Architect Expertを取得済みです。
今回Cybersecurity Architect Expertに挑戦するためにSC-100を受験しました。
事前に前提となるAz-500に合格しております。

SC-100は３度目での合格でした。それぞれどのような教材を使ったかを以下に記載しますので参考にしていただけると幸いです。

## 試験の体験談
### 第１回目（2024年2月受験：スコア446 不合格) ＊合格は700以上
最初は今まで受験してきたようにUdemyの模擬試験講座を受講しました。更新が最近のもので問題数が480問のものを入手し、１ヶ月ひたすら問題を繰り返し解き続けました。
ほぼ全問解けるようになり受験しましたが結果は上記の通り散々なものに。

理由ですが模試の問題と実際の問題の内容の乖離が大きすぎました。Udemyの問題は一問一答形式がほとんどでしたが、実際の問題は事例形式が主体でした。
試験後に他のUdemyの問題をサンプル的に覗きましたが同様に一問一答形式が主体で即席の知識での再チャレンジには使いにくいと思いました。

### 第２回目（2024年5月受験：スコア654　不合格)
出題傾向にあわせたUdemy教材が新たにリリースされることを期待して様子を見ていましたが、新しくリリースされる問題集も一問一答形式であり、Udemy以外を探すことにしました。
ネットを検索したところexamtopicsというサイトでSC-100の問題が販売されておりこれを利用することにしました。
理由は以下のとおりです。

- 無料で見ることができる範囲の問題をみたところ、実際に受験したものと同じ内容の問題がいくつかあるのを確認できた。
- 有料で180問程度の問題と回答・解説さらにコミュニティでの回答のトークについて一定期間自由にアクセスできる。
- コミュニティでのVOTE数を見ることでどの回答がベストアンサーなのか確認できる
- PDFにしたものを入手できる（別料金）
PDFは購入しませんでしたが１ヶ月間サイトの問題の答練をひたすら行いほぼ全問の回答が理解できるようになったところで再度受験しました。

出題した問題の９割がこのサイトに掲載されていた問題でありほぼ合格できたという手応えを感じながら終了しましたが・・・結果は上記の通りまさかの不合格。

気を取り直して不合格の理由を調べたところ、このサイトの回答にかなり間違いが多いことが判明しました。
コミュニティについているベストアンサーと比較したところ全問題の3分の１ぐらいが違っており、それらの問題を調べてみるとコミュニティのベストアンサーのほうが正しいものが多いということがわかり、このサイトの回答をどこまで信じていいかわからない状態になりました。

### 第３回目（2024年6月受験：スコア895　合格)

他にも実践に即した模擬試験がないか検索したところ、CertyIQというサイトを見つけました。
以下の理由からこのサイトの問題を購入して再挑戦することにしました。

- 無料で見ることができる範囲の問題をみたところ、上記examtopicsと同じ内容の問題であった。
- コミュニティはついていないが、examtopicsのコミュニティのベストアンサーと比較したところ、全てベストアンサーの回答と一致しており、自分で調べても妥当な回答になっていた。
- 有料で全ての問題を一定期間自由にアクセスできる。
- PDF版を別料金を払わずに入手できる。

２回目の試験で使った模試の回答と情報を比較しながら知識を整理し、翌月に再度受験。
８割程度見覚えのある問題が出題されようやく合格点をとることができました。

## 最後に
３度の受験とそれぞれの受験対策で時間と費用をそれなりに使いました。
上記３つ以外にもいくつか模試を見ましたが本試験の傾向と合致しない問題を掲載したものが多く、また模範回答も精度に疑問のあるものも散見され、注意して模試を選ばないと合格は難しいと感じました。
エキスパートレベルの試験なので当然といえば当然ですが模試に頼りすぎることなく前提知識の整理をしながら時間をかけて準備していくことが大事だと思いました。
入力が楽になる便利ツールキット Emmet【HTML CSS】

# はじめに

Emmet というツールキットを使用すると、HTML・CSSの入力効率が大幅に上がります。
生産性爆上がりというやつです。

# Emmetのメリット

https://emmet.io/

こちらの公式動画を見るのがわかりやすいです。

<details><summary>動画を見れない方用</summary>

|     |
| :-: |
|   ![スクリーンショット 2024-05-09 20.17.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/214da3b8-b044-2757-613a-86a0339719a4.png)|
| `!` → `Enter` / `tab` だけで・・・ |
|![スクリーンショット 2024-05-09 20.19.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/8cd877cf-f386-c739-0fc4-b7153fa4ac98.png)|
| webの雛形ができる！ |

|     |
| :-: |
| ![スクリーンショット 2024-05-09 20.20.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/c92760f1-b370-6466-58e7-2e544c80e6e6.png)|
| 補完候補から `script:src` を選択すると・・・ |
|![スクリーンショット 2024-05-09 20.21.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/89b1b9ee-07a6-303a-d2c8-afc2fb7faa64.png)|
| `<script src=""></script>` が自動入力され、カーソル位置も適切に移動！ |

などなど・・・

---

</details>

ツールキットですが、<font color="LimeGreen">VSCodeでは標準搭載されてます！</font>
# Emmetの使い方

さっそく使ってみたい方は、公式のチートシートを眺めて試してみるのがオススメです。

https://docs.emmet.io/cheat-sheet/

いくつかピックアップ

```html
p.text ->
  <p class="text"></p>
```
`tag.class_name` で、入力クラスを持つHTMLタグを生成できます。

```html
.container ->
  <div class="container"></div>
```
`.class_name` は、デフォルトで `div` タグになります。

```html
.container>p ->
  <div class="container">
    <p></p>
  </div>
```
`>` を使用すると、下層構造のタグを生成できます。

```html
div+p ->
  <dif></dif>
  <p></p>
```
`+` を使用すると、同じ階層のタグを生成できます。

```html
p*5 ->
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
```
`*` を使用すると、指定回数繰り返し生成できます。

# Emmetの対応言語

- HTML（`.html`）
- CSS（`.css`）

その他、VSCodeでは `.slim` でも使用可能でした。
`.erb` では使用できませんでしたが・・・
## `.erb` でも使用する方法

設定を変更することで、Emmetを `.erb` でも使用可能です。

|                                                                                                                                                    |
| :------------------------------------------------------------------------------------------------------------------------------------------------: |
| ![スクリーンショット 2024-05-09 20.30.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/6c915594-2332-5709-2826-ac081ac59429.png) |
|                                                                   設定を開く（画像はMac）                                                                    |
| ![スクリーンショット 2024-05-09 20.44.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/b74c32f5-cb7f-4a68-e2ed-c091da124c12.png) |
|                                                                    `emmet` と検索                                                                     |
| ![スクリーンショット 2024-05-09 20.45.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/186489f6-a9d1-ebd9-168a-cbdd962d9791.png) |
|                                  Include Languages の「項目を追加」 <br>→ 項目（key）に`erb`、値（value）に`html`と入力<br>→ OK をクリック                                   |

`.erb` 以外の拡張子でも、同様の方法で追加可能だと思います。

# おわりに

以上、Emmetの紹介でした。

次は何を書こうかしら・・・
vscodeでターミナルの表示行数を増やす

vscodeでのターミナルのデフォルト表示行は1000行ですが，最大表示行数を変更します．

## vscodeでのデフォルト設定

デフォルトの設定ファイルには

```json:defaultSettings.json
	// ターミナルがバッファーに保持する最大行数を制御します。スムーズなエクスペリエンスを実現するために、この値に基づいてメモリを事前に割り当てます。そのため、値が大きくなると、メモリの量も増えます。
	"terminal.integrated.scrollback": 1000,
```

とあり，1000行がデフォルトのようです．

コメントにもあるように，表示行数を増やすとメモリの使用量も増えます．

## 設定方法

設定方法についてです．

ユーザー設定で上記の設定を上書きします．

## 1. 設定画面を開く

`ctrl + ,` で設定画面を開きます．

左下の歯車マークからでも開けます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825073/6427499e-77ac-6be5-3355-8615ea970683.png)

## 2. settings.jsonを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825073/f4554d7d-7e2e-9daf-16d3-fac4d3cc6b75.png)

画面右上にある，上記のアイコンをクリックすることでファイルが開けます．

## 3. settings.jsonに書き込む

jsonの末尾に

```json:settings.json
	// ターミナルがバッファーに保持する最大行数を制御します。スムーズなエクスペリエンスを実現するために、この値に基づいてメモリを事前に割り当てます。そのため、値が大きくなると、メモリの量も増えます。
	"terminal.integrated.scrollback": 2000,
```

のように書き込みます．

コメントの行は消すなり書き換えるなりしても構いません．

表示させたい最大行数に合わせて数字を変えてください．

## 4. 保存する

設定ファイルを `ctrl + s` で保存してください．

## 最後に

ターミナルの最大表示行数を変更できました．

何かあればご連絡ください．

## 参考

https://qiita.com/TS1engineer/items/1b54f65ee87cb49582f5
https://qiita.com/y-w/items/614843b259c04bb91495
https://www.web-dev-qa-db-ja.com/ja/terminal/visual-studio-code%E3%81%AE%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E8%A1%8C%E6%95%B0%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B/830755112/
wslでelixir その147

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

# 練習問題
Livebookで、時計を表示せよ。

# 方針
- Kino.listen使う。

# setup

```
Mix.install([
  {:kino, "~> 0.10.0"}
])
```

# サンプルコード

```
frame = Kino.Frame.new() 
	|> Kino.render()
Kino.listen(2000, fn i ->
	time = DateTime.utc_now()
		|> DateTime.to_time()
		|> Time.to_iso8601()
	res = "The time is now: #{time}"
	content = Kino.Markdown.new(res)
	Kino.Frame.render(frame, content)
end)

```


# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/3cadee10-f0e1-d720-208a-570523b50cd8.png)



以上。
コンフォートゾーンの外に立つ、立たせる

## コンフォートゾーンとは

コンフォートゾーンとは、人が心地よさや安心感を感じる行動や状況の範囲を指します。
このゾーン内では、ストレスや不安が少なく快適ですが、自己成長や学びを追求する際には、意図的にコンフォートゾーンを抜け出すことが推奨されます。

![comfortzone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/03279f98-8572-8342-8f69-721a6e37f5aa.png)


## キャリア形成

キャリアを形成する、スキルを深掘りする、広げる、ということはラーニングゾーンに立ち向かい、コンフォートゾーンを広げることと考えています。
日々取り組む仕事が、安心して不安なく進めることができる仕事だけでは、出来ることは増えずに次第に周囲の期待に添えなくなります。

少し未知な部分、不安が多い事柄、ストレスを感じる新たな挑戦というのは繰り返すうちに慣れていき、コンフォートゾーンの中に入っていきます。

## コンフォートゾーンを広げるのはちょっと辛い

コンフォートゾーンを広げるのは少し辛いです。

座学やセミナーや研修などで知識を得るということだけでは不十分で、お金を払う側ではなく、お金をもらう側としてそこに立ち、責任を追及される立場で汗をかきながら進め、ときには「こうするべきだった」などと悔やみながら力をつけていくものだからです。

「高い壁を乗り越えた時、その壁はあなたを守る砦となる」みたいな言葉がありますが、まさにコンフォートゾーンを広げるとはこういうことでしょう。

## マイクロマネジメントで機会を奪わないように

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/d733fcb6-e24c-eec9-87d9-92e525bc172b.png)


コンフォートゾーンの外に立つことは自分自身も辛いですが、人にそれをさせるのもまた辛いものです。
苦しみや苦悩がわかる分、作業に分解したものや、道筋をたてものを提供して手助けしたくなります。
また、実案件では顧客に迷惑がかからないかヒヤヒヤすることもあります。

一方で、マイクロマネジメントになりすぎるとラーニングゾーンでの学びの機会を奪ってしまいます。

エンジニアリングの仕事でいうと、困っているときに答えのコードをすぐに提供するのではなく、本人がどう考え、仮説や道筋をたてて、どのようなステップで取り組むんでいるのか、説明してもらいながら「なぜそう考えたか。」「なぜそう思ったのか。」「どのような要因がその判断に影響しているのか。」などの確認をするようにしています。

お金をもらう立場では責任を負うこと、思考すること、説明することの義務が発生します。
だからこそ成長の糧ともなります。

具体的な方法論を常に指示したり、裁量と責任を引き取ってしまうことはなるべく我慢しなければなりません。
これは強く意識しないと、とても難しいことだったりします。

目の前のことだけのことでなく、長期的な視点で安定した組織になるため、より良い価値提供のため、個人だけでなくチームとしてコンフォートゾーンを広げていきたいと思います。
Javaで「数値を文字列に変換する」の動作を確認してみた

# 概要

Javaで「数値を文字列に変換する」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/start/string/index11.html

# 実装

以下のファイルを作成しました。
```JSample11_1.java
class JSample11_1{
  public static void main(String[] args){
    int i = 10;
    long l = 12L;
    double d = 7.82;
    boolean b = true;

    String si = Integer.valueOf(i).toString();
    String sl = Long.valueOf(l).toString();
    String sd = Double.valueOf(d).toString();
    String sb = Boolean.valueOf(b).toString();

    System.out.println(si);
    System.out.println(sl);
    System.out.println(sd);
    System.out.println(sb);
  }
}
```

```JSample11_2.java
class JSample11_2{
  public static void main(String[] args){
    int i = 10;
    short s = 21;
    long l = 12L;
    double d = 7.82;
    boolean b = true;

    String si = String.valueOf(i);
    String ss = String.valueOf(s);
    String sl = String.valueOf(l);
    String sd = String.valueOf(d);
    String sb = String.valueOf(b);

    System.out.println(si);
    System.out.println(ss);
    System.out.println(sl);
    System.out.println(sd);
    System.out.println(sb);
  }
}
```

```JSample11_3.java
class JSample11_3{
  public static void main(String[] args){
    int i = 10;
    long l = 12L;
    double d = 7.82;
    boolean b = true;

    String si = "" + i;
    String sl = "" + l;
    String sd = "" + d;
    String sb = "" + b;

    System.out.println(si);
    System.out.println(sl);
    System.out.println(sd);
    System.out.println(sb);
  }
}
```

以下のコマンドを実行しました。
```
$ javac JSample11_1.java 
$ java JSample11_1 
10
12
7.82
true
```
```
$ javac JSample11_2.java 
$ java JSample11_2 
10
21
12
7.82
true
```
```
$ javac JSample11_3.java 
$ java JSample11_3
10
12
7.82
true
```

# まとめ

何かの役に立てばと。
【参加日記#01】Gemini API デベロッパー コンペティション

Gemini API デベロッパー コンペティションに参加してみよう！と思い立ったのです。ということで、どうせなら記録を残そうと...


# 1.まずは参加登録


すでに始まってから約1か月半だ、まにあうのか！？
まずはここ！！[公式サイト](https://ai.google.dev/competition?hl=ja)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310274/8597f515-f83c-6fdc-5c71-40576e44e354.png)

「ログインしてコンペティションに参加する」と・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310274/5301fb9a-2896-0ec3-aa2a-dcf0160dc248.png)
ボタンが「アプリを送信」に変わる！

これで、参加登録はOKです。
あっ、もちろん[公式サイト](https://ai.google.dev/competition?hl=ja)上に公式ルールと制限事項があるので、その辺りはしっかり読んでね。

# 2.何のアプリをつくるの？
ここで、悩みます。なんとなくこういうの作りたいっていう漠然としたイメージはあるものの、まだ仕様を固めていくには貧弱すぎるイメージしかない。

ふとメールを見ると、Gemini API Developer Competitionさんから
>Thanks for joining. You’re all set! 

というタイトルのメールが届いてます。
ふむふむ・・・
①[Google AI Studio](https://ai.google.dev/aistudio?hl=ja)でGeminiモデルを試せるよ
②[Gemini API ドキュメント](https://ai.google.dev/gemini-api/docs)読んで学習しなさい
③困ったときは、[Google AI フォーラム](https://discuss.ai.google.dev/)で質問してね
との事です。

まぁ、まずはドキュメントから読んでいきますか(笑)

それでは、また[次回](https://qiita.com/arc-lab-jp/items/e195361b5181b21819be)！
[Vercel] 環境ごとにビルドコマンドを変える方法

## この記事が役立つかもしれない人
Vercel で Production, Preview, Development 環境ごとにビルドの処理を変えたい人


## 方法

Vercel の Project Settings にアクセスします。
ナビゲーション上では Settings と表記されています。

![Project Settings の画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2038389/5f7fa930-33bb-74a8-174c-b5c9c13507c4.png)

Project Settings の General > Build & Development Settings に **Build Command** という項目があるので、そこに次のようなスクリプトを入力します。

```bash:Build Command
if [ "$VERCEL_ENV" = "production" ]; then npm run build:prod; else npm run build:dev; fi
```

コマンドに対応する package.json の例は次の通りです。

```json:package.json (対応する部分のみ抜粋)
"scripts": {
  "build:dev": "npx prisma db push && nest build",
  "build:prod": "npx prisma migrate deploy && nest build"
}
```

---

上記のように設定すると production 環境でビルドされるときは `npm run build:prod` が実行され、それ以外の preview 環境、development 環境の際は `npm run build:dev` が実行されます。


## Build Command の解説

Build Command に入力した bash スクリプトですが、改行とインデントを入れると次のような形になります。

```bash
if [ "$VERCEL_ENV" = "production" ]; then
  npm run build:prod;
else
  npm run build:dev;
fi
```

シンプルな条件分岐ですね。

`$VERCEL_ENV` は Vercel が提供している環境変数で、デプロイ環境が `production` `preview` `development` のいずれかの値で入っています。
そのため、どの環境で実行されているのかを判別してビルドの処理を変えることが可能です。

`$VERCEL_ENV` のような環境変数は他にも色々と用意されています。

https://vercel.com/docs/projects/environment-variables/system-environment-variables

Vercel によって自動作成される URL を取得できる `VERCEL_URL` なんかも便利そうですね。

---

この記事が役に立ったら 🩷 を頂けると嬉しいです！
【ActiveRcord】ActiveRcordとは！

# ActiveRecordについて
Ruby on Railsで使われるライブラリ（ツール）の一つ。
ActiveRecordを使用することで、SQL文を直接書かずとも、わずかなアクセスコードを書くだけで、DBとやり取りができる。
言わば、RailsとModel（DB)との仲介役的な存在。
単体でも使用可能。

# ActiveRecordの基本メソッド
```ruby:create
User.create(name: "David", occupation: "Artist")
#発行されるSQL -> INSERT INTO users (name, occupation) VALUES ('David', 'Artist') ;
#createメソッドでインスタンスを作成する場合、オブジェクトはDBに保存される。
#newメソッドでインスタンスを作成する場合、オブジェクトはDBに保存されない。

```
```ruby:read
User.all
#SELECT * FROM users ;

User.find_by(name: "David")
#SELECT * FROM users where name = 'Davit' limit = 1 ;
```
```ruby:update
User.update(name: "David")
#UPDATE users SET name = 'David' ;
```
```ruby:destroy
User.destoroy
#DELETE FROM users WHERE users.id = 1 ;

```
[MacOS]codeコマンドでVSCodeを起動できない時

# はじめに
ターミナル上から`code ファイル名`でVSCodeを起動するシーンを見ました。
クールだなぁと思い早速試したところ
```terminal
-> % code .
zsh: command not found: code
```
盛大に肩透かしを食らいました
<font color="green">zshさん「codeコマンドが見つからないよ」</font>

# PATHにcodeコマンドを追加する
1. VSCodeを起動(ここからはVSCode内の操作)
2. `Cmd+Shift+P` or `F1`でコマンドパレットを開く
3. `>shell command`と入力すると候補が表示される
![スクリーンショット 2024-06-27 1.29.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3080004/6b7bbbcd-4b10-355d-0b11-709121302a98.png)
4. 今回はcodeコマンドを使えるようにしたいので`Install`を選択
4. ダイアログが表示されるので「OK」を押す
4. 「PATHに正常にインストールされました」と表示されたら完了

# 動作確認
- ターミナル上で`code ファイル名`を入力し、VSCodeが立ち上がれば成功
- コマンドが存在するかだけを試すなら`code --version`(バージョン表示)でバージョン情報の表示を確認するのでも良い

# おまけ: Cursorでは
- CursorというVSCodeをもとにしたAIエディタがありますが、Cursorを起動後に同じような手順を踏むことで`cursor`コマンドを追加することができます
- コマンド追加後は、`cursor ファイル名`でCursorが起動します

# 参考

https://code.visualstudio.com/docs/setup/mac
Cloudflare R2 CLIを使ってバケット内部のオブジェクトを削除する

## 概要

CloudflareのR2内部のオブジェクトをCLIを使って削除する方法を簡単にまとめる。

## 前提

- 下記の内容が完了していること（AWSCLIのconfigureの設定が正常に行われている事、当該APIキーがオブジェクトの削除にも対応した権限が付与されていることが条件）

https://qiita.com/miriwo/items/adb718c86d455ab5ba6c

## 方法

::: note alert
紹介するコマンドは実行するとなんの確認もなしに指定オブジェクトが削除されるので注意
:::

1. 削除する際のコマンドの例

    ```sh
    aws s3 rm s3://バケット名/削除オブジェクト名 --endpoint-url 「S3クライアントエンドポイント」
    ```

1. 「S3クライアントエンドポイント」が分からない場合は下記を参考に割り出す事が可能

https://qiita.com/miriwo/items/1335d27e068958ed589b
Cloudflare R2 S3クライアントエンドポイントの確認方法

## 概要

R2のバケットのS3クライアントエンドポイントの確認方法を簡単にまとめる

※ちなみに「CloudflareなのにS3、、？」と疑問に思うかもしれないが間違いではなく、CloudflareのR2のCLIはAWSCLIを使う

## 方法

「S3クライアントエンドポイント」はAPIキー確認画面を閉じてしまっても部分的に確認する事ができる。
「S3クライアントエンドポイント」は下記のような構成になっている。

```
https://アカウントID.r2.cloudflarestorage.com
```

この「アカウントID」さえ知ることができれば問題ない。
その「アカウントID」はR2の画面の右側の「Account details」に存在する。

![CleanShot 2024-06-27 at 02.20.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/209d2cac-10ae-da93-fdb4-c29d7ec22fef.png)
これであなたもマルチリンガル！？色んな言語であいさつしてみよう

# はじめに
みなさん，言語を学び始めるときにはじめに覚えるものはなんですか？そう！**『あいさつ』** です．これは自然言語に限らず，プログラミング言語でもそうです．どんな言語もまずは`Hello World!`の出力方法から学ぶはずです!!っということで，今回は全何種の言語であいさつをしてみましょう．この記事を読めばあなたもマルチリンガルになっているはずです^^

# 人気言語10選
ここに書かれているランキングですので，自分にとっての好きな言語ランキングなどあれば，コメントに書いておいてください！！

https://codezine.jp/article/detail/19530#:~:text=2024%E5%B9%B4%E4%BA%BA%E6%B0%97%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0%E3%81%AF%E3%80%811%E4%BD%8D,%E3%83%A9%E3%83%B3%E3%82%AF%E3%82%A4%E3%83%B3%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82

### 10位:c++
C言語の拡張として設計されたオブジェクト指向プログラミング言語です！競技プログラミングの言語といったらコレ！！
システムプログラミング、ゲーム開発、組み込みシステム、デバイスドライバ、高性能アプリケーションなど、幅広い分野で使用されている．
```HelloWorld.cpp
#include <iostream>

int main() {
    std::cout << "Hello, world!" << std::endl;
    return 0;
}
```
### 9位:Swift
Appleによって開発されたプログラミング言語です．iOS、macOS、watchOS、tvOSなどのAppleプラットフォーム上でアプリケーションを構築するために使用される！
```HelloWorld.swift
print("Hello, world!")
```
### 8位:Go(別名Golang）
Googleによって開発されたオープンソースのプログラミング言語です.シンプルさ、効率性、並行性を重視して設計された．大規模なシステムの開発を容易にすることを目的としており、特にクラウドコンピューティングやネットワークサービスの分野で人気が高まっている！

```HelloWorld.go
package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}
```
### 7位:TypeScript
Microsoftによって開発されたオープンソースのプログラミング言語です.JavaScriptに静的型付けを追加した言語で,
大規模なJavaScriptプロジェクトの開発に適している！
```HelloWorld.ts
console.log("Hello, world!");
```

### 6位:C#
Microsoftによって開発された多目的プログラミング言語です．.NETフレームワークとともに使用され，Windowsデスクトップアプリケーション，ウェブアプリケーション，Unituでのゲームなどの開発に適しています！！

```HelloWorld.cs
using System;

class Program {
    static void Main(string[] args) {
        Console.WriteLine("Hello, world!");
    }
}
```

```HelloWorld(unity).cs
using UnityEngine;
using System.Collections;

public class HelloWorld : MonoBehaviour {

    void Start () {
        Debug.Log("Hello, world!");
    }
}
```

### 5位:Ruby
シンプルで読みやすい構文を持つ動的型付けのオブジェクト指向プログラミング言語です!Webアプリケーション開発や,スクリプティング,自動化タスクに広く使用されている
```HelloWorld.rb
puts "Hello, world!"
```
### 4位:Python
読みやすく,学習が容易な高級プログラミング言語です.データ分析,機械学習,ウェブ開発,自動化など,幅広い分野で使用されている!!
```HelloWorld.py
print("Hello, world!")
```

### 3位:PHP
サーバーサイドのWebアプリケーション開発に特化したスクリプト言語です．動的なウェブサイトやウェブアプリケーションの構築に広く使用されている!
```HelloWorld.php
<?php
echo "Hello, world!";
?>
```

### 2位:JavaSprict
ウェブブラウザ上で動作するクライアントサイドのプログラミング言語です.
ウェブページにインタラクティブ性を追加し,ユーザーインターフェースを強化するために使用される!
```HelloWorld.js
console.log("Hello, world!");
```

### 1位:Java
オブジェクト指向プログラミングをサポートする汎用プログラミング言語です.クロスプラットフォームの特性を持ち,エンタープライズアプリケーション,Androidアプリ,組み込みシステムなど、幅広い分野で使用されている!!

```HelloWorld.java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}
```

# 最後に
今回は人気順な10選の言語であいさつをしてみました！プログラミングの登竜門の`Hello, World!`を出力して，マルチリンガルになりましょう^^
おすすめの言語，これで書かんかい!!というものがあれば，コメントください！随時追加していきます．
それではみなさん，いいエンジニアライフを〜👋

# 追加枠
### Processing
視覚芸術やインタラクティブなプロジェクトのためのプログラミング言語および開発環境です.そのため，アニメーションやゲーム制作ができる．Java言語をベースにしており，シンプルでわかりやすい構文を持っている！
```HelloWorld.pde
void setup() {
  size(400, 400);
  background(255);
  textSize(32);
  textAlign(CENTER, CENTER);
  fill(0, 0, 0);
}

void draw() {
  text("Hello, world!", width/2, height/2);
}
```
Cloudflare R2 CLIを使ってファイルをバケットにアップロードする

## 概要

CloudflareのR2のバケットにCLIを使ってファイルをバケットにアップロードする方法を簡単にまとめる。

## なぜCLIなのか

CloudflareのR2はブラウザ経由のドラックアンドドロップのファイルアップロードにも対応している。
しかしながら「一度に100ファイルまで、1ファイルは300MBを超えてはならない」という成約がある。
そのためその上限に抵触するファイルをアップロードするときはCLIを使わないといけない。

## 前提

- 今回は下記のような内容が記載されたindex.htmlファイルをアップロードを行う

    ```index.html
    <h1>Hello Cloudflare R2</h1>
    ```

- ローカルPCにで`$ aws`コマンドが実行できること（実行できなかった場合はこちら→ [Mac AWS CLIコマンドを実行できるようにする](https://qiita.com/miriwo/items/7687eb0be7661ed82101)）
- アップロード先のR2のバケットが作成されていること（　筆者はtestというバケットを用意）

## 方法

嘘のようで本当の話だが、CloudflareのR2のコマンドラインからの操作ではAWSCLIを用いる。
その方法を順を追ってまとめてみる。

### APIトークンの用意

1. Cloudflareにログインし、サイドバーでR2をクリック

    ![CleanShot 2024-06-27 at 01.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/e46a9641-c391-a525-6874-645fec19f44c.png)

1. 「R2 API トークンの管理」 をクリック

    ![CleanShot 2024-06-27 at 01.59.31@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/0362ce76-3313-7f68-7d6b-dc31718e81ec.png)

1. 「APIトークンを作成する」をクリック

    ![CleanShot 2024-06-27 at 02.00.55@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/43b8aaef-0967-b500-c1bd-3061a33ff3e3.png)

1. 下記のように設定、完了後「APIトークンを作成する」をクリック
    - トークン名： R2 Token
    - 権限: オブジェクト読み取りと書き込み
    - バケットの指定: 特定のバケットにのみ適用（testバケットを指定）
    - TTL: 無制限
    - クライアント IP アドレスフィルタリング: 設定しない

    ![CleanShot 2024-06-27 at 02.03.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a1ceffd4-f534-8639-60de-837983206b2a.png)

1. 「アクセスキーID」「シークレットアクセスキー」「S3クライアントエンドポイント」が出力されるのでそれぞれメモしておく（画面上の案内の通り、それぞれの値はこの画面から遷移してしまうと再表示が未来永劫できないので注意する。忘れてしまったら素直にAPIキーを作り直すしか無い。実は「S3クライアントエンドポイント」だけは部分的に確認する事ができる）

    ![CleanShot 2024-06-27 at 02.04.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/06224d0b-7051-31f6-b96e-867c58976943.png)

### 各種キーの割当

前述の作業で取得したAPIキー類をAWSCLIの設定に保存する

1. 下記を実行してAWSCLIの設定を実施

    ```sh
    aws configure
    ```

1. 下記のように設定する

    ```
    AWS Access Key ID [None]: 先ほど生成した「アクセスキーID」の値
    AWS Secret Access Key [None]: 先ほど生成した「シークレットアクセスキー」の値
    Default region name [None]: us-east-1
    Default output format [None]: json
    ```

### アップロード

いよいよアップロードだ。デスクトップにあるindex.htmlをtestバケット直下にアップロードしたい。

1. アップロードする際のコマンドの例

    ```sh
    aws s3 cp ローカルPC側のファイル s3://バケット名/アップロード先のファイル名 --endpoint-url 先ほど生成した「S3クライアントエンドポイント」
    ```

1. 実際のコマンドは下記（一部一意な情報は伏せる）

    ```sh
    aws s3 cp index.html s3://test/index.html --endpoint-url 先ほど生成した「S3クライアントエンドポイント」
    ```

1. エラーが出なかったらアップロードはおそらく成功しているはずなので、R2のバケット直下を見てみるとindex.htmlを発見、どうやらアップロードは成功した模様

    ![CleanShot 2024-06-27 at 02.17.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/ea7fc5d2-6e2a-de95-a6c0-4254d6c3304a.png)

1. ここまでできれば完了

### 「S3クライアントエンドポイント」を失念してしまったら

下記で割り出す事ができる。



## 参考文献

https://developers.cloudflare.com/r2/api/s3/api/

https://developers.cloudflare.com/r2/api/workers/workers-api-usage/#5-access-your-r2-bucket-from-your-worker

https://developers.cloudflare.com/r2/get-started/#3-upload-your-first-object

https://developers.cloudflare.com/r2/api/s3/tokens/