OmniAICreator/Qiita-1.07M huggingface dataset:
屋内用映像 IoT システムのWi-Fi接続と映像伝送手順 TP-Link Tapo C200の設定

## TP-Link Tapo C200の設定
特別な専門知識を必要とせずにTP-Link社のTapo C200 IPネットワークカメラを設定し、映像を簡単に伝送する方法についてご紹介いたします。

### セットアップ手順
#### 1) TP-Link Tapo アプリのダウンロードと初期設定
まず始めに、スマートフォンに「TP-Link Tapo」アプリをインストールすることからスタートします。アプリはAppStoreまたはGoogle Playからダウンロード可能です。

1. 「**TP-Link Tapo**」をダウンロードして、インストールします
1. アプリを開き、アカウントを作成します
1. カメラのアイコンをタップし、画面右上の「+」ボタンを使用してカメラをアプリに追加します

#### 2) RTSPの有効化とカメラ設定
RTSP（Real Time Streaming Protocol）を有効にすることで、外部デバイスからの映像アクセスが可能になります。カメラ設定でRTSPを設定する手順は以下の通りです。

1. アプリの「ホーム」画面からカメラを選択します
1. 「設定」アイコン（歯車マーク）をタップし、「高度な設定」へ進みます
1. 「カメラのアカウント」オプションを開き、新しいアカウント（ユーザー名とパスワード）を作成します。このアカウントはRTSPの認証に使用します

#### 3) RTSPストリーミングURLの設定と使用
カメラのRTSP URLは次の形式でアクセスできます
- 高画質ストリーム：`rtsp://<IP Address>/stream1`
- 低画質ストリーム：`rtsp://<IP Address>/stream2`

カメラのIPアドレスは、Tapoアプリの「カメラ設定」＞「端末情報」で確認できます。RTSP機能を有効にすることで、カメラのローカル記録機能やTapoCareサービスが利用できなくなる点にご注意ください。

#### 確認と結果
以上の設定を完了後、HpVT Webプラットフォームでのストリーミングが成功することを確認しました。これにより、屋内映像 IoT システムの設定が容易かつ迅速に行えることが証明されました。設定手順はシンプルであり、技術的なバックグラウンドがない方でも問題なく実施可能です。
RaspberryPiのSDカードをアップグレード 32GB → 512GB

## Raspberry PiのSDカードをアップグレード
多くの画像データを取り扱う際、標準的な32GBのSDカードでは容量が不足することが一般的です。この問題を解決するために、512GBのような大容量SDカードへの移行が推奨されます。以下に、専門的な知識がないユーザーでも実行可能な手順を詳しく説明します。

### SDカードのセットアップ手順
#### 1) SDカードのクローニング
安全性を最優先に、Raspberry Piを適切にシャットダウンし、microSDカードを取り外します。続いて、お使いのコンピュータ（ここではMacを例に）でSDカードを読み込み、`dd`コマンドを使用してデータの完全なコピーを作成します。このプロセスにより、オペレーティングシステム、設定、およびデータが新しいSDカードに移行されます。

実行手順は以下の通りです：

1. Raspberry Piを安全にシャットダウンし、SDカードを取り外します
1. MacにSDカードを挿入し、`diskutil list`コマンドでデバイスの識別子を確認します
1. `diskutil unmountDisk /dev/diskX`コマンドでデバイスをアンマウントします
1. `sudo dd bs=1m if=/dev/rdiskX of=~/sdcard.img`コマンドでディスクイメージを作成します
1. 新しいSDカードを挿入し、先にアンマウントした後、作成したイメージを`sudo dd bs=1m if=~/sdcard.img of=/dev/rdiskX`で書き込みます

#### 2) SDカードの容量拡張
データの移行が完了したら、SDカードの容量を拡張します。`raspi-config`ツールを使用して、未使用領域にファイルシステムを拡張することが可能です。

具体的な手順は以下の通りです：

1. `df -h`コマンドで現在のディスク使用状況を確認します
1. `sudo raspi-config`を実行し、「Advanced Options」を選択します
1. 「Expand Filesystem」のオプションを選択して、ファイルシステムを拡張します
1. Raspberry Piを再起動し、`df -h`で拡張が適切に行われたかを確認します

拡張プロセスには約10分ほどかかることがありますが、完了後は大幅に増加したストレージ空間を利用できるようになります。
トレイト

## はじめに

トレイトについてまとめる

### トレイトとは

いくつかのメソッド群を独立したクラスで再利用できるようにした仕組みのこと。
PHPの継承では単一継承しかできないが、トレイトを使えば多重継承のようなことが可能。

### 参考コード

```php:trait_multi.php
interface IFax {
    function send();
}

interface IPrinter {
    function print();
}

trait FaxTrait {
    public function send() : void {
        print 'sening Fax...sended!';
    }
}

trait PrinterTrait {
    public function print() : void {
        print 'printing...completed!';
    }
}

class FaxPrinter implements IFax, IPrinter {
    use FaxTrait, PrinterTrait;
}

$fp = new FaxPrinter();
$fp->send(); // 結果：sending Fax...sended!
$fp->print(); // 結果：printing...completed!

```

`FaxTrait`, `PrinterTrait`双方の機能を引き継いだ`FaxPrinter`クラスを定義している。
また、トレイトは実装を表すだけで型を定義できないため、インターフェイスを定義している。
Goで２進数の0,1の数を数えたい

## 結論
`math/bits`パッケージの
- TrailingZeros()
- LeadingZeros()
- OnesCount()

を使うと簡単に分かります。

https://pkg.go.dev/math/bits#LeadingZeros

## 背景
競技プログラミングで、2進数の末尾の0の数を求める問題を解いた際に
便利な公式パッケージがありましたので紹介します。


## どう使うの？
```go
    var n uint16 = 16 // 10000(2進数)
    
    // お尻から0がいくつ続くか
	fmt.Println(bits.TrailingZeros16(n))
	// 頭から0がいくつ続くか
    fmt.Println(bits.LeadingZeros16(n)) // 0000 0000 0001 0000(2進数)
    // ビットが1の数を求めたい場合
	fmt.Println(bits.OnesCount16(n))
```
uint型のbit数に応じて関数名が変わります。
（uint型の場合、bits.TrailingZeros）


### その他
(本題とは関係ありませんが) bitを逆順にする関数も便利そうですね。
```go
 	// 2進数の逆順を出力する
	fmt.Println(bits.Reverse16(n)) //0000 1000 0000 0000(2進数)
```

https://go.dev/play/p/1UeH8dbmVOw

## 終わりに
公式パッケージですが、実務では２進数を扱う機会がなく、
今回初めて `math/bits` パッケージを使用したため記事にしてみました。
Amazon S3 + Amazon CloudFrontでのコンテンツ配信

## はじめに
Amazon S3とAmazon CloudFrontを組み合わせてコンテンツを配信することは、ウェブサイトやアプリケーションのパフォーマンスとセキュリティを向上させるための強力な方法です。
本記事では、CloudFrontのコストやメリット等を解説します。

## CloudFrontとは
Amazon CloudFrontは、コンテンツ配信ネットワーク（CDN）サービスで、静的および動的なコンテンツを高速かつ安全に配信するためのプラットフォームです。
CloudFrontは、世界中に分散されたエッジロケーションを活用して、ユーザーに最も近い場所からコンテンツを提供することで、応答時間を短縮し、パフォーマンスを向上させます。

**主要な特徴**
①**高速なコンテンツ配信**: CloudFrontは世界中のエッジロケーションにコンテンツをキャッシュし、最も近いエッジロケーションからコンテンツを提供することで、ユーザーに高速なアクセスを可能にします。

②**スケーラビリティと信頼性**: AWSのインフラストラクチャを利用することで、高いスケーラビリティと信頼性を実現し、トラフィックの急増にも対応します。

③**セキュリティ**: CloudFrontは、SSL/TLSを利用した暗号化通信やAWS WAF（Web Application Firewall）との統合など、セキュリティに関する機能を提供します。

④**カスタマイズ可能な設定**: カスタムドメインの使用、キャッシュ制御、アクセス制御など、さまざまな設定オプションが利用できます。

## コスト
・リクエスト数/転送データ量/配信元エッジロケーションによって料金が変動します。
・「CloudFront Functions」や「Lambda@Edge」等の機能を使用する場合は、使用する機能に応じた料金が追加されます。
・「料金クラス」を設定することで配信元エッジロケーションを制限することが可能です。

https://aws.amazon.com/jp/cloudfront/pricing/

## メリット

S3静的WebサイトホスティングをCloudFrontと組み合わせることにはいくつかのメリットがあります。

①**高速な配信とパフォーマンス向上**: CloudFrontは世界中のエッジロケーションにコンテンツをキャッシュし、ユーザーに最も近い場所からコンテンツを提供します。これにより、ユーザーへのレスポンス時間を短縮し、ウェブサイトの読み込み速度を向上させることができます。

②**低レイテンシと高い可用性**: CloudFrontは分散型のネットワークを利用しており、リクエストを処理する最も近いエッジロケーションにトラフィックをルーティングします。これにより、ユーザーに低レイテンシと高い可用性を提供することができます。

③**スケーラビリティと負荷分散**: CloudFrontはAWSのインフラストラクチャを活用しており、トラフィックの急増にも柔軟に対応できます。また、CloudFrontは負荷分散機能を備えており、オリジンサーバーへの負荷を軽減することができます。

④**セキュリティ強化**: CloudFrontはSSL/TLSを利用した暗号化通信をサポートし、セキュリティを強化します。また、AWS WAFとの統合により、Webアプリケーションのセキュリティをさらに向上させることができます。

⑤**コスト削減**: CloudFrontはキャッシュを利用してコンテンツを配信するため、オリジンサーバーへのアクセス回数を削減し、コストを節約することができます。また、CloudFrontの料金はS3よりも一般的に低い場合があります。

## まとめ
Amazon S3 + Amazon CloudFrontを利用することで、ウェブサイトやアプリケーションのパフォーマンスを向上させ、ユーザーエクスペリエンスを向上させることができます。

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Introduction.html
神記事が話題にならない理由

# はじめに

**Qiitaには誰にも知られていない神記事がたくさん眠っています。**

「ここだけ少し変えれば多くの人に読んでもらえるのにもったいない」

そんなことを思いながら、始めてのいいねをつけるという瞬間が私にはたまにあります。

書いた記事がトレンドに乗っていいねがたくさんつくと嬉しいものです。
ぜひそのような神記事をしっかりと多くの人に見てもらえるようにする方法について今回は話していきたいと思います。いくつかの点を気をつけるだけで一気に見てくれる人が増えます。

1人でも読んで良いと思えば、拡散によって多くの人に広がります。
**大切なのは1人でもしっかりと見てくれる人を作る**ということです。

今回はQiitaを500本以上書いている私が多くの記事を投稿して気づいた「読まれる記事」と「読まれない記事」の違いをまとめていきます。

# なぜ神記事が眠っているのか

**<font color="red">これはQiitaのアルゴリズムの影響がものすごく大きいです。</font>**

記事を投稿して多くの人がみるきっかけはトレンドがすべてです。
**トレンドに載るには記事を投稿して1日以内に多くの人に記事をみてもらっていいねをもらう必要があります。**

実はQiitaは1日立ってトレンドに乗れなかった記事はその後にどんなにたくさんのいいねをもらってもトレンドに載ることはできません(私の経験から1日と出していますので現実とは違うかも知れません)

つまりどんなに神記事でも、初速がなかったら誰からもいいねが付かない記事になってしまうのです。

そのような記事はWebでの検索でヒットするしかリーチする機会は訪れません。
つまり神記事が眠っているという状態になり、目覚めることはないわけです。

# いいねが付かない記事の書き方

ここまでの話で、いかに初速が大切なのかということがわかったと思います。
つまり、投稿した新着記事として誰かにリーチして読んだ人が内容をしっかりと読んでくれるような記事を書く必要があります。

あとは内容がしっかりと有益なものであればいいねやストックに繋がります。
そうすると自ずとトレンド入りにつながってくるわけです。

ここでは、色々な記事を読んだり書いたりした経験からいいねがつきづらい記事(最後まで読んでくれる人が少ない)の書き方を紹介していきます。

## 1. ぱっとみで有益な記事かわからない

「人は見た目が9割」とよく聞きます。
これは個人的には信じていて、メラビアンの法則にもあるとおり、視覚情報が記事の印象をつけてしまうのでそこで読むか読まないかを判定しています。

ここで大切なのが**Markdownを適切に利用しているか**というところです。
Markdownを一切利用しないで書いた記事はメモ書きのような印象を与えますし、読みづらくどこが要点なのかがわかりません

現代の人はタイパ(タイムパフォーマンス)重視なので、そのような自分に必要な情報があるかもわからない記事を時間を書けて読もうと思わないわけです。

しっかりとMarkdownを利用して、重要なことを目立つようにしていくことはとても大切です。

## 2. 誰かに向けた記事を書く

これはいいねが付かないからといって全く悪いということはありません
誰かに向けた記事は世界中の誰か1人のために記事を書くのでいいねがつく必要はありません

**この記事に該当するのは「エラーを解決する記事」です**

エラーを解決する記事は万人が読むものではありません。エラーに遭遇した人がみる記事なのです。

しかしこのタイプの記事はものすごい価値があります。
あなたが遭遇したエラーは絶対世の中の誰かは同じエラーに遭遇します。

<font color="red">**あなたがエラー解決に10分書けたなら、誰かも10分を書けて解決します。その10分をあなたの記事で救うのがエラー解決記事なのです**</font>

エラー解決はいいねが付かない記事ですが、ものすごくいい記事になるので考え方を理解していいねがつかなくても投稿し続けてほしいです

## 3. タイトルが適切ではない

Qiitaは読んでもらえるか読んでもらえないかを決めるのはすべてタイトルで決まります。タイトルが正しく設定されていないとクリックすらされないわけです。

このタイトルをしっかりと考えてつけている人は案外少ないと思います。
私はコピーライティングなどを勉強してなるべく多くの人がみてくれるようなタイトルをつけるように意識しています。

**気になるようなタイトルを意識してつけるようにしましょう**

ときどき釣りタイトルで記事を書いたり、誰かを批判するようなタイトルをつける人がいますが、これは**タイトルから読者が期待する記事と中身が異なってしまう**のでいいねがつくことはありません。また炎上のリスクもあるので気をつけましょう

# おわりに

あなたが投稿している記事はいいねがつかない特徴に当てはまっていたでしょうか？
いいねがつくと本当に嬉しい気持ちになりますし、アウトプットをするモチベーションにもつながってきます。

ぜひ皆に読んでもらう記事を特徴を抑えながら書いてもらって、エンジニア業界に影響を与えていただけると嬉しいです。

ここまで読んでいただけた方は**いいね**と**ストック**よろしくお願いします。
@Sicut_study を**フォロー**いただけるととてもうれしく思います。

また明日の記事でお会いしましょう！

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします👇

https://projisou.jp
App Development Platform

この Note は Architectural Decision Record ( ADR ) の下書きです。Official ではありません。記載している内容は、ごく一般的な要件で、どこのサービスでも考慮している内容です。

---

## Status
- [ ] 提案済み
- [ ] 承認済み
- [ ] 破棄

## Context
- 私たちは Product の構築を進めている。このドキュメントでは、私たちが選択した最終的な Application Hosting とその背後にある理由を説明することを目的としている。
- 技術選定の前提条件は以下の通りである。
    1. Developer Experience。少人数で適切なスピード感で開発できる。ビジネスのスケールに柔軟に対応する必要がある。
    1. Stability。安定している必要がある。現状は少数精鋭の Team であるため破壊的仕様変更は回避する必要がある。
    1. Knowledge。サービスに対する経験と知識が組織に存在するかを確認する必要がある。メンバーの流動性が高い場合、組織の Knowledge が少ないサービスを選択すると組織にとっての負債となる。

|Service|Description|Developer Experience|Stability|Knowledge|AWS Marketplace|Notes|
|----|----|----|----|----|----|----|
|Amazon ECS|Amazon Elastic Container Service (ECS) はフルマネージドのコンテナオーケストレーションサービスであり、コンテナ化されたアプリケーションをより効率的にデプロイ、管理、スケールするのに役立ちます。|☀️<br>- 採用事例も多く成熟したサービスである。|☀️<br>- 最も安定したサービスの 1 つである。|☀️<br>- 最も採用事例の多いサービスの 1 つである。|AWS Managed Service|-|
|AWS Amplify Gen2 [^4]|モバイルおよび Web アプリケーションの開発を支援するためのサービスです。データベース、認証、ストレージ、API などの機能を提供しています。|☀️<br>- AWS サービスとの連携をシームレスに行える。<br>- AWS CDK で deploy できる。|☀️<br>- GA がアナウンスされた。2024/05/06 [^3]|☁️<br>- 採用実績が少ない。GA になって間もない。|AWS Managed Service|[^13]|
|Firebase [^5]|Firebase は、デベロッパーがユーザーに人気のアプリやゲームを開発できるよう支援する Google のモバイルおよびウェブアプリ開発プラットフォームです。|☁️<br>- 今回の構成 ( SSR ) では、ある程度の知識が必要になる。Functions を組み合わせる。|☀️<br>- 運用実績が多くより安定している。|☀️<br>- 多くのナレッジがある。|no|[^14]|
|Supabase [^1] [^7]|Supabase は、オープンソースの Firebase の代替品です。Postgres データベース、認証、インスタント API、エッジ関数、リアルタイム サブスクリプション、ストレージ、Vector 埋め込みを使用してプロジェクトを開始します。|☀️<br>- API と Database、認証をシームレスに連携できる。|☀️<br>- GA がアナウンスされた。2024/04/15 [^6]|☁️<br>- 公に出ている採用実績が少ない。GA になって間もない。|yes [^9]|[^12]|
|Hasura [^2]|オープンソースの GraphQL エンジンで、リアルタイムデータベースとしての機能を提供しています。Supabase と同様に PostgreSQL をベースにしていますが、アーキテクチャや機能に若干の違いがあります。|🌤️<br>- API サーバーを簡単に構築できる。<br>- RESTful にも対応できる。 [^10]|☀️|☁️<br>- 公に出ている採用実績が少ない。|yes [^8]|[^11]|

## Decision
`todo`
- Maybe we will opt for this one. `ECS` or `AWS Amplify Gen2`
- Chatwork は AWS をメインにしており、Deploy や Ops に割く時間を減らすことができる。効果検証のスピードを重視しており、より手堅い選択が必要である。

## Consequences
- 学習曲線。サービスを学習し実装するまでの学習曲線が必要になる。これは個人に依存する。
- その他サービスとの関連性。現在は App 単体ではなく、Application Hosting と Database や認証を組み合わせたサービスが多い。そのため Application の開発者体験を通して Database を選択する必要がある。

## Compliance
- N/A

## Notes
- Author: @danny-yamamoto

[^1]: https://supabase.com/
[^2]: https://hasura.io/
[^3]: https://aws.amazon.com/jp/about-aws/whats-new/2024/05/aws-amplify-gen-2-available/
[^4]: https://docs.amplify.aws/react/start/quickstart/
[^5]: https://firebase.google.com/docs?hl=ja
[^6]: https://supabase.com/ga
[^7]: https://www.publickey1.jp/blog/24/firebasebaassupabase.html
[^8]: https://aws.amazon.com/marketplace/seller-profile?id=9e6176b3-4d08-4d07-9022-4625c9b055cb
[^9]: https://aws.amazon.com/marketplace/seller-profile?id=471c9cd1-f79f-4a26-bf55-f3a7a2d6d895
[^10]: https://kou029w.github.io/hasura-rest-hands-on/index.html
[^11]: https://zenn.dev/rescuenow/articles/30135e098d8d87
[^12]: https://giginc.co.jp/blog/giglab/supabase-nextjs
[^13]: https://zenn.dev/gentamura/articles/a9834076fcc101
[^14]: https://firebase.google.com/docs/hosting/frameworks/nextjs?hl=ja
【TryHackMe】What is Networking? : WalkThrough

# 概要

TryHackMe「What is Networking?」ルームのWalkThroughです。
このルームではコンピューターネットワークの基礎を学べます。

https://tryhackme.com/r/room/whatisnetworking

# Task1

## **Q1**.*What is the key term for devices that are connected together?*

**A**.**network**

# Task2

## **Q1**.*Who invented the World Wide Web?*

**Hint**.*It was created in the Year 1989*

**A**.**Tim Berners-Lee**

# Task3

## **Q1**.*What does the term "IP" stand for?*

**A**.**Internet Protocol**

## **Q2**.*What is each section of an IP address called?*

**A**.**octet**

## **Q3**.*How many sections (in digits) does an IP address have? *

**Hint**.*This section is also known as an octet.*

**A**.**4**

## **Q4**.*What does the term "MAC" stand for?*

**A**.**Media Access Control**

## **Q5**.*Deploy the interactive lab using the "View Site" button and spoof your MAC address to access the site.  What is the flag?*

デフォルトではBobからのパケットはドロップされます。

![task3 q5 default.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/4ef9b730-4629-c550-43aa-0f7cbe4fb210.png)

BobのMACアドレスをAliceと同じものにすることで送信元を偽装します。

![task3 q5 change bobs mac add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/abb6dde4-da32-d163-8cb1-e8c6fad1f62e.png)

その状態でパケットを送信するとフラグをゲットできます。

![task3 q5 get flag.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/260f2dfc-f477-af82-79a1-410954d24460.png)

**A**.**THM{YOU_GOT_ON_TRYHACKME}**

# Task4

## **Q1**.*What protocol does ping use?*

**A**.**ICMP**

## **Q2**.*What is the syntax to ping 10.10.10.10?*

**A**.**ping 10.10.10.10**

## **Q3**.*What flag do you get when you ping 8.8.8.8?*

上部の`IP Address`欄に`8.8.8.8`を入力します。

![task4 q3 ip set.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/912db87f-6624-d15a-fe60-685816cda15c.png)

`Send Ping Request`ボタンを押し、pingを送るとフラグをゲットできます。

```
user@thm:~$ ping -c 4 8.8.8.8
PING 8.8.8.8 (8.8.8.8) 56(84) bytes of data
64 bytes from 8.8.8.8: icmp_seq=1 ttl=56 time=7.24 ms
64 bytes from 8.8.8.8: icmp_seq=1 ttl=56 time=8.10 ms
64 bytes from 8.8.8.8: icmp_seq=1 ttl=56 time=9.47 ms
64 bytes from 8.8.8.8: icmp_seq=1 ttl=56 time=9.81 ms
--- 8.8.8.8 ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 4006ms
rtt min/avg/max/mdev = 8.132/9.428/10.957/1.057 ms
Flag: THM{I_PINGED_THE_SERVER}
```

**A**.**THM{I_PINGED_THE_SERVER}**
TypeScript Framework

これは Architectural Decision Record ( ADR) の下書きです。Official ではありません。

そして、NestJS 以外に他 1 つは実装を確認したい。念のために。

---

## Status
- [ ] 提案済み
- [ ] 承認済み
- [ ] 破棄

## Context
- 私たちは Product の構築を進めている。このドキュメントでは、私たちが選択した最終的な Framework とその背後にある理由を説明することを目的としている。
- 技術選定の前提条件は以下の通りである。
    1. 少人数で適切なスピード感で開発できる必要がある。
    1. メンバーの共通の技術スタックである必要がある。
    1. (1)(2)を満たしつつ、アプリケーションの複雑さを将来に持ち込まない構成である必要がある。
- (1) は Framework で解決できる。(2) は TypeScript になる。(3) はドメイン駆動設計で進めており、必要に応じて各ドメインを module として分割できる構成が必要になる。
- (1)(2)(3) を満たす TypeScript の Framework を選定する。以下が 2024/05/02 時点での候補である。

|No.|Framework|Description|GitHub Star|Boilerplate|Case Study|
|----|----|----|----|----|----|
|1|[NestJS](https://nestjs.com/)|Node.jsのためのフル機能のフレームワークです。Angularの影響を受けており、Angularのような構造化されたアーキテクチャ、依存性注入、およびTypescriptを使用しています。NestJSは、大規模なエンタープライズアプリケーションを構築するためのツールとして設計されており、拡張性とテスタビリティを重視しています。|64,500|yes <br> - [REST](https://docs.nestjs.com/recipes/crud-generator#generating-a-new-resource) <br> - [GraphQL](https://docs.nestjs.com/graphql/quick-start)|- [Ubie](https://zenn.dev/ubie_dev/articles/53c5953b037e38) <br> - [KAKEHASHI](https://kakehashi-dev.hatenablog.com/entry/2022/03/07/100000)|
|2|[FeatherJS](https://feathersjs.com/)|リアルタイムWebアプリケーションを構築するためのツールキットです。|14,900|no|N/A|
|3|[LoopbackJS](https://loopback.io/)|Node.jsで構築されたオープンソースのフレームワークで、APIを素早く構築し、サービスとして公開するためのツールです。LoopBackは、RESTful APIを簡単に作成するための強力な機能を提供し、データベースや外部サービスとの連携も容易に行えます。|4,800|[yes](https://loopback.io/doc/en/lb4/Getting-started.html) <br> controller only|N/A|
|4|[AdonisJS](https://adonisjs.com/)|Node.jsでWebアプリケーションを構築するためのMVC（Model-View-Controller）フレームワークです。AdonisJSは、Express.jsにインスパイアされており、豊富な機能セットや強力なORM（Object-Relational Mapping）であるLucid ORMを提供しています。|15,500|[no](https://docs.adonisjs.com/guides/folder-structure)|N/A|
|5|[Ts.ED](https://tsed.io/)|Ts.ED は、Express/Koa.js の上にある Node.js および TypeScript フレームワークです。 Ts.ED は、TypeScript (または ES6) でアプリケーションを作成するための Express/Koa の上にあるフレームワークです。コードを読みやすくし、エラーを少なくするための多くのデコレータとガイドラインが提供されます。|2,700|no|N/A|
|6|[ExpressoTS](https://expresso-ts.com/)|保守性の高いサーバー側アプリケーションを作成するための、開発者に優しい Node.js フレームワークです。|1,600|[yes](https://doc.expresso-ts.com/docs/overview/first-steps)|N/A|

## Decision
- NestJS を利用する。
- 要件 (1)(2)(3) に合致する。日本国内での活用事例も多く、ナレッジとして利用できる。

## Consequences
- 学習曲線。NestJS を習得し実装するまでの学習曲線が必要になる。これは個人に依存する。しかし、より軽量な Framework に比べると、機能も多く学ぶべきことが多い。
- 複雑さ。Boilerplate を使用した場合、Layered Architecture となるため、構造的な複雑さを持ち込むことになる。

## Compliance
- NestJS CLI を使用して Boilerplate を活用しているか Code Review で確認する。

## Notes
- Author: @danny-yamamoto
Whisper.cpp + textlint で文字起こしの精度を爆上げした

# まえがき

[【CPU上の実行に対応】OpenAI Whisperの高性能推論ver Whisper.cppを試してみた](https://qiita.com/szktmyk38f/items/e38b6089bd05dba757c8) の続編となります。

1年以上前からチーム内ではwhisper.cppを利用してZoomやTeamsから作られる音声ファイルを元に文字起こしをし、議事録を作成しておりました。ただ、whisper.cppを利用するだけでは誤字もあるため、完璧なものはできません。そのためChatGPTを利用し、議事録を要約させたり、誤字をなくさせようと試してみました。
ただ、この試みは自チームでは受け入れられませんでした。
理由は以下の通りです。

- ChatGPTを介すると、要約されたりと、少しばかり違う内容になってしまう
- 業界用語、略語、独自用語に対応できない
- 話し言葉（口語）が書き言葉（文語）に変換されてしまう
- 顧客情報漏洩の可能性あり（AIサービス利用によるオプトアウトですら許容できない）

そのため、上記を覆せるような何か対応をできないかということで行きついたのが、文章校正（textlint）の利用です。

# 利用イメージ

1. Jenkins上からジョブを実行し、文字起こしを実行
1. 生成されたテキストファイルを確認し、ルールファイルに各自が追記適用
1. 次回以降同様の誤字が出た際はルールが適用され、文章校正が自動で実行される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533444/b098e37c-5a8f-f882-4392-8706c4af25d5.png)

# 文章校正実行結果

下の画像は実際に文章校正を実行した際の結果ですが、ルールが適用され自動で誤字が訂正されていることが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533444/8b9b97e1-95b8-9af9-6a4d-011760dae958.png)

# 総評
textlintの適用により、文字起こしの精度はさらに上がり、またルールを適用すればするほど完璧に近いものが出来上がることとなります。そのため、同じような課題を抱えている方は是非、textlintの利用を推奨します。

※textlintの適用方法は後日追記します。
◆HTML/CSS　備忘録③ 文字サイズの単位

文字サイズを指定する単位はいくつかありますが、
良く使われるものについて、説明いたします。

特徴を知っておくことで、レスポンシブ対応をする際に
どれが適しているかなどの判断がしやすくなります。

:::note info
よく使われる単位の種類
- px（ピクセル）
- %（パーセント）
- em（エム）
- rem（レム）
:::
#### px（ピクセル）

pxは、親要素やルート要素のサイズを他の単位で指定していたとしても影響を受けないため、直観的にサイズを指定したい場合に便利な単位です。（絶対的な指定）
コーディングの際、非常に分かりやすく第三者が調整しやすいという点も特徴です。
ただし、レスポンシブ対応をする際は、画面サイズに合わせてサイズを指定する必要があり、やや不便です。

#### %（パーセント）
%は、pxの絶対的指定に対して、相対的指定と言われている単位です。親要素に設定したサイズを基準にサイズが決まります。例えば、親要素のサイズが「32px」に設定されている場合、子要素に50%と設定すると「16px」になります。入れ子構造になっている際にフォントサイズがそれぞれ違う値で指定されている場合は、計算がややこしくなるため注意が必要です。

#### em（エム）
%と同様に相対指定が可能な単位です。100%=1emと同じものと考えて問題ありません。
%と同様に入れ子構造になっている際は計算がややこしくなるため、注意が必要です。

#### rem（レム）
remは、root emの略でroot＝htmlを基準とした単位となります。
例えば、htmlにフォントサイズを「16px」と設定した際、入れ子構造だろうと何処に設定しても1rem=16pxとなります。また、2remの場合は「32px」と計算が楽になります。

上記のように計算が楽なためレスポンシブを意識したCSSでの設定を行う際は、「rem」を使用するのが便利だと言われています。

上記だけでは、分かり難いのでremの使い方として
よく言われているやり方を補足として説明します。
※PCファースト前提の記載になってます。

```
html{
    font-size: 100px;
}

@media screen and (max-width: 976px)  {
    /*976px以下はここから読み込み*/
    html{
        font-size: 50px;
    }
}
```

少し大げさに設定していますが、PCサイズの場合「1rem=100px」に設定し、モバイルサイズになった場合「1rem=50px」に設定しています。こうすることで、remで設定した場所を自動的に半分のサイズに変更することができます。
よくPCサイズの部分を「62.5％」で設定すると記載されている参考サイト様があります。
こちらの場合は、62.5%は「10px」を表してます。これはブラウザのデフォルトフォントサイズが「16px」となっているため、計算しやすい「10px」に変更するためとなってます。

しかし、GoogleChromeでは最小サイズは10px以下に設定しても適用されない為、注意が必要です。
サーバレスでDatabricksジョブを実行してみる

サーバレスSQLに次いで、ジョブもサーバレス化されます。従来のジョブではジョブクラスターの起動に数分を要していましたが、サーバレスになることで十数秒でジョブクラスターが起動して、すぐにジョブが実行されます。

https://docs.databricks.com/ja/workflows/jobs/run-serverless-jobs.html

:::note info
**注意**
- 本機能は[パブリックプレビュー](https://docs.databricks.com/release-notes/release-types.html)です。
- こちらの機能は特定のリージョンで利用できます。執筆時点では日本リージョンでは利用できません。
:::

# ノートブックの準備

[クイックスタート](https://docs.databricks.com/ja/workflows/jobs/jobs-quickstart.html)に従ってノートブックを作成します。

```py:baby_names_csv_load
import requests

response = requests.get('https://health.data.ny.gov/api/views/jxy9-yhdk/rows.csv')
csvfile = response.content.decode('utf-8')
dbutils.fs.put("/Volumes/takaakiyayoi_catalog/workflow/my-volume/babynames.csv", csvfile, True)
```

```py:spark_babynames_year_filter
babynames = spark.read.format("csv").option("header", "true").option("inferSchema", "true").load("/Volumes/takaakiyayoi_catalog/workflow/my-volume/babynames.csv")
babynames.createOrReplaceTempView("babynames_table")
years = spark.sql("select distinct(Year) from babynames_table").toPandas()['Year'].tolist()
years.sort()
dbutils.widgets.dropdown("year", "2014", [str(x) for x in years])
display(babynames.filter(babynames.Year == dbutils.widgets.get("year")))
```

# ジョブの作成

上のノートブックを指定して、タスクを作成します。なお、ノートブックを選択する際に**最近使用したアイテム**タブを使うと、クイックにノートブックにアクセスできて便利です。
![Screenshot 2024-05-08 at 17.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/6acea13b-0dc7-2a94-2a11-c0fc27ee0898.png)

サーバレスワークフローが有効化されているワークスペースでは、デフォルトのクラスターが**サーバレス**になっています。
![Screenshot 2024-05-08 at 17.59.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/cdd771b6-688e-5546-c8d0-3b4eb595f4ef.png)

後段のタスクとして二つ目のノートブックも指定します。
![Screenshot 2024-05-08 at 18.00.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/0b1f9d7f-c9ff-38d7-0f28-fa1023cc2c41.png)

これでサーバレスのジョブが作成されました。

# ジョブの実行

こちらをご覧ください。従来のジョブですと数分待ちますが、数十秒でジョブの実行が始まります。
<iframe width="560" height="315" src="https://www.youtube.com/embed/EjWmtjAxAYU?si=YFB6IKZcr_J31dfP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

(日本リージョンに来たら)こちらの機能も是非ご活用ください！

### はじめてのDatabricks

[はじめてのDatabricks](https://qiita.com/taka_yayoi/items/8dc72d083edb879a5e5d)

### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
Amazon S3 Glacier Deep Archiveで自宅PCのバックアップを保存した話

## なぜAmazon S3 Glacier Deep Archiveなのか
1.外付けHDDのバックアップは取っているが、家が火事・津波・地震・噴火で消滅した際に対応できないため。
2.自宅の私用PCと言えども資産運用などに関わる情報なども多く入っており、もはや遊びに使うだけのPCではなく、冗長性の確保は重要だと感じたから。
3.クラウド技術を触ってみたかった。
4.安いから。（1TB1ドル。今の超円安と言えども150円程度になる。普通の人間は一人で10TBや100TBも容量を使ったりしないからね）

## 手順
①
https://aws.amazon.com/jp/s3/storage-classes/glacier/
から「Amazon S3の使用を開始」
②「新しいAWSアカウントの作成」
さすがにアカウントの作成ぐらいはIT屋なのでなんともないが独自のCAPTCHAみたいなやつが滅茶苦茶見にくくて1回失敗した。
③サポートはとりあえず無償プランのままで作成
④「バケットの作成」から保存先のバケットなるものを作成。
リージョンはとりあえずデフォルトのシドニーに。
想定する用途（自然災害からのバックアップ）である以上日本や日本近辺の東アジアでなければ割とどこでもいいが、まあシドニーであれば米中核戦争が起きても無事な可能性は比較的高そう。（ガンダム的には縁起が悪いが）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565403/8f563d2b-64bc-155d-08c5-412bcd917464.png)
他は全部デフォルト。
パブリックアクセスを全てブロック＋SSE-S3暗号化
とりあえずこういうのは外部からのアクセスをブロックしておけば問題ないんだよ（適当）
必要になったら必要になった時に必要な分開ければいいってポートが俺たちに教えてくれた（セキュリティの基礎）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565403/2c5bd944-53d8-7966-15b8-01fa1c2c8e65.png)
⑤あとは「アップロード」ボタンからローカルのバックアップをアップロードする
……が、回線がしょぼいというかデータ量が多すぎるので寝る前にアップロードすることにした。
それにしたって料金に大きくかかわってくるストレージクラスが折り畳みになってるのはどうかと思う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565403/9ba755d6-088e-a653-a5f4-d3279d70a92c.png)
⑥無事アップデート完了。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565403/f8f3c8bd-d1c1-9e1d-01b6-e832f2b5e460.png)


ついでに予算も設定。
保存するのはせいぜいが4TB程度の予定なので4ドルは超えないはずだが、とりあえず20ドルで予算設定＋10ドルでアラートメールが来るように設定。
まあGlacierで個人利用しててないとは思うが、クラウド破産、怖いもんね……
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565403/0ade695c-0966-0f78-fcf3-5b1fc5d54cff.png)

これでヨシ！
Firebaseプロジェクトの初期化方法

# はじめに
Firebaseでプロジェクトを作成し、初期化する際にいくつか選択する項目があったのですが、その選択内容をメモしておきます。

プロジェクト作成～デプロイまでの手順は下記の記事が丁寧に説明してくれています。

https://qiita.com/hiroki-harada/items/ca22ac177db68e3c3796
# 手順
下記のコマンドでプロジェクトの初期化ができます。
```
firebase init hosting
```
作成したいプロジェクトの内容に応じて、それぞれ質問に答えていきます。

・ Detected an existing Vite codebase in the current directory, should we use this?
**該当のプロジェクトに設定されているビルドツールやコードに合わせて、FireBase側が勝手に設定を行ってくれます。**
→（今回は）Yes

・ In which region would you like to host server-side content, if applicable?
**サーバーサイドのコンテンツをホストする場合に、どの地域でホストしたいかを聞かれています。日本の場合、asia-east1 (Taiwan)を選択します。**
→asia-east1 (Taiwan)

・Set up automatic builds and deploys with GitHub?
**GitHubと連携して、コードをプッシュするだけで自動的にビルドやデプロイをの設定を行ってくれます。**
→（今回は）No

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3675500/b030b9c2-4b27-0c67-c7bc-ad4b0a40ced9.png)

この後、`firebase deploy`でデプロイが成功するか確認します。
# おわりに
記事にすることでもないかもしれませんが。。
unity x tensorflow lite

# はじめに

Unityを使って、カメラでobject detectを行うための組み込み方を調べていたので覚書


# 必要なツールとパフォーマンスについての参考

この動画がとても参考になった

![スクリーンショット 2024-05-09 14.08.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/9cbf7018-2cde-192d-1f82-8e1fdee7d66c.png)

![スクリーンショット 2024-05-09 14.07.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/b7ed0d84-ddd4-2e83-a6d5-2f626765843f.png)

https://youtu.be/TOc8MJISbWs?si=erpJKKCK-QZLdP14&t=599

パフォーマンス的にBaracudaよりもTFLiteの推論ランタイムがおすすめ
..ということで、UnityでTensorflowLiteを使うために下記あたりを参考に組み込んでみようと調べてみる

https://github.com/asus4/tf-lite-unity-sample

他にもalia-sdkなどいくつかフレームワークは存在していたり。(未実装)

https://medium.com/axinc/ailia-sdk-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB-unity-257fa1e98777


# 手順


## manifest.json

```manifest.json
{
  "scopedRegistries": [
    {
      "name": "package.openupm.com",
      "url": "https://package.openupm.com",
      "scopes": [
        "com.cysharp.unitask"
      ]
    },
    {
      "name": "npm",
      "url": "https://registry.npmjs.com",
      "scopes": [
        "com.github.asus4"
      ]
    }
  ],
  "dependencies": {
    "com.github.asus4.tflite": "2.13.0",
    "com.github.asus4.tflite.common": "2.13.0",
    "com.github.asus4.mediapipe": "2.13.0",
    ...
  }
}
```

## modelのインポート
https://github.com/asus4/tf-lite-unity-sample/tree/master

## ファイルのインポート

![スクリーンショット 2024-05-09 15.47.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/d173a8c3-e258-914f-b176-4ffdd90ddbda.png)

https://github.com/asus4/tf-lite-unity-sample/tree/master/Assets/Samples/SSD




### MainCamera -> Camera Texture Background (Tensorflow Lite)

![スクリーンショット 2024-05-10 10.01.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/1099730a-50cd-df78-81d8-adeb315ff185.png)


### Demo -> Virtual Texture Source

https://github.com/asus4/TextureSource

![スクリーンショット 2024-05-10 10.10.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/d4d56495-a20b-cea5-f9d5-4b1f4334e269.png)


### WebCamTexture

```
using UnityEngine;
 
public class CamScript : MonoBehaviour
{
    void Start()
    {
        WebCamTexture webCamTexture = new WebCamTexture();
        Renderer renderer = GetComponent<Renderer>();
        renderer.material.mainTexture = webCamTexture;
        webCamTexture.Play();
    }
}
```


# Bugなど

Library/PackageCache/com.unity.xr.management@4.4.1/Editor/Metadata/KnownPackages.cs(12,70): error CS0117: 'BuildTargetGroup' does not contain a definition for 'VisionOS'

![スクリーンショット 2024-05-08 17.55.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/8e080159-56e0-6bd1-14ba-5df62f216a95.png)

https://forum.unity.com/threads/xr-management-visionos-error.1548119/


>Unityを使ってデバイスのカメラインプットを利用する場合、大体検索にヒットする方法はCanvasにrawImageを置いて、そのtextureにWebCamTextureを流し込む方法です。たしかにラップトップでは問題なくサンプルコードも動きますが、iOSで動作させた瞬間にアスペクト比、オリエンテーション（向き）がむちゃくちゃになります。

https://note.com/hrkd/n/n79bc34f5152c

WebCamTexture rotated and flipped on iPhone when applied to renderer.material.texture

https://forum.unity.com/threads/webcamtexture-rotated-and-flipped-on-iphone-when-applied-to-renderer-material-texture.126702/
Dragonflyを使ってみる

Go製のマイクラ統合版サーバーソフトウェア、Dragonflyを使ってみました。

## 環境
- Windows 10

## Goのインストール

Dragonflyを使うには勿論Goが必要です。
早速[ここから](https://go.dev/dl/)ダウンロードしておきましょう。（自分の環境のものを選んでください）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3225067/3acfe652-b7f0-0f04-995e-9cb2c89cf792.png)

ダウンロードしたファイルを実行して完了です。

Goのインストールができていれば、コマンドプロンプトから"go version"でバージョンを確認できるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3225067/59a1deab-faf8-e3d4-2709-addbcff61c3b.png)


## Dragonflyの導入

https://github.com/df-mc/dragonfly

適当な場所でコマンドプロンプトを開いて、`git clone https://github.com/df-mc/dragonfly test` を実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3225067/64386aab-3b35-9521-d02d-37e9f352663e.png)

cloneできたら `cd test` で移動して `go run main.go` でサーバーを起動してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3225067/97597dec-ebcb-9869-1eeb-fe594c5326e4.png)

無事、入ることができました。
これだけで満足してしまいそうですが、おなじみのHello Worldまでいってみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3225067/b2f4c2bb-edf4-9a9f-0339-8c783f387b60.png)

## Hello Worldしてみる

`main.go` のmain関数の内容を少しいじります。

👇 こうなってたのを

```main.go
for srv.Accept(nil) {
}
```

👇 こうしましょう。

```main.go
for srv.Accept(func(p *player.Player) {
  p.Message("Hello, World")
}) {
}
```

変更できたら、もう一度 `go run main.go`でサーバーを起動して、入ってみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3225067/b8a7c667-ee74-fff0-5007-7f43d9064106.png)

ちゃんとHello Worldできてますね。

続きを書くときがあればもう少し踏み込んだ内容になると思います。今回はこれで終わりです✋
Python初日

<p>HTMLがなんとなく掴めてきたので、Pythonを触ってみた。</p>
<p>VScodeで伝統のHello World!を記述し、ターミナルで表示されるかチェック。</p>
<h2>Hello World!を表示</h2>
<p><code>print("Hellow World!")</code></p>
<figure class="figure-image figure-image-fotolife mceNonEditable" title="　VScodeでHello World! を記述">
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/T/Temupura/20240508/20240508162701.png" width="1023" height="258" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>
<figcaption class="mceEditable">　</figcaption>
</figure>
<p>右上の△ボタンを押すとターミナル上でどう反映されるか確認できる。</p>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3776523/0f53a4b7-c57c-b93f-204f-3246b4b244aa.gif">
<h3>次に簡単な計算</h3>
<p><code>a = 5; b = 3; c = a + b <br />print(c)</code></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/T/Temupura/20240508/20240508163041.png" width="1021" height="222" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>
<p>a = 5 は「aに5を代入」という意味。</p>
<p>print()は関数で、「ブラウザに()で指定した引数を表示」という意味。</p>
<figure class="figure-image figure-image-fotolife mceNonEditable">
<figcaption class="mceEditable"></figcaption>
</figure>
<p>こちらも確認。</p>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3776523/06f2c424-0b49-f8db-7e37-a857a48e2b6d.gif">
<h4>文字列のフォーマット</h4>
<p>上述した要領で、文字を表示してみる。</p>
<p><code>name = "Yamada"<br />age = 30<br />print(f"My name is {name}.I'm {age} years old.")</code></p>
<figure class="figure-image figure-image-fotolife mceNonEditable" title="フォーマットも記述。">
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/T/Temupura/20240508/20240508163248.png" width="1026" height="285" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p>
<figcaption class="mceEditable"></figcaption>
</figure>
<p>name="Yamada" で「nameにYamadaを代入」</p>
<p>print()内のfはフォーマットを作るための記号。</p>
<p>f以降を"で括ると「{}内の式を参照」という意味になる。</p>
<p>こちらも確認</p>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3776523/e95c652d-cce7-e95c-b3f5-25af5a152ed6.gif">
<h5>感想</h>
<p>代数の知識が必要になる日が来るとは思わなかった。</p>
<p>記事を書くにあたり、「備忘録」をテーマにする為にスクショやGIFを載せたが、分からない→ググるを繰り返した結果さらにHTMLへの知識が深まった気がする。</p>
<h6>参考</h6>
https://www.tohoho-web.com/python/syntax.html
ABC351備忘録【C～D】

## C - Merge the balls
### 問題
https://atcoder.jp/contests/abc351/tasks/abc351_c

### 考えたこと
実際に$2^x$を格納して探索していくとTLEやMLEになってしまいます。よって、指数部分だけを考え、条件3については$2^x + 2^x = 2^{(x+1)}$となる性質を使います。ほかの条件は素直に実装すればOKです。

### ACコード
``` c.py
n = int(input())
A = list(map(int, input().split()))

ans = []

for i in range(n):
    ans.append(A[i])
    while True:
        if len(ans) <= 1:
            break
        elif ans[-1] != ans[-2]:
            break
        else:
            ans.pop()
            ans.append(ans.pop() + 1)

print(len(ans))
```

## D - Grid and Magnet
### 問題
https://atcoder.jp/contests/abc351/tasks/abc351_d

### 考えたこと
流れとしてはABC349のD問題と同じように、与えられた文字列を自分が探索しやすいようにグラフ化し、探索という方針です。ただし、以下の二点に注意しつつ有向グラフを作成します。
- 磁石自身と磁石が隣り合うところからスタートできない
- 各頂点の番号が$i*w + j$と表される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3631672/b2dca648-96f9-c4f9-0037-cd4acc0a6301.png)

また、図を眺めてみると以下の点に気が付きます。

- 磁石が隣りにない頂点同士の自由度は等しい
    - 行き来できるので自由度を共有する
- 頂点6は二つの頂点から行先として指定されている
    - BFSでは訪問済みの点をチェックしておくが、チェック方法を工夫しておく必要がある

以上の気づきから、訪問済みの点は再訪問する必要ない、訪問済みの頂点のチェック方法として以前訪問した頂点の情報を格納する、という方法をとることとしました。

### ACコード
``` d.py
from collections import defaultdict, deque

h, w = map(int, input().split())
s = [input() for _ in range(h)]
g = defaultdict(set)
dij = [(-1, 0), (1, 0), (0, -1), (0, 1)]

# グラフの作成
for i in range(h):
    for j in range(w):
        if s[i][j] == "#":
            continue
        u = i * w + j
        mag = False
        # 注目している頂点の四方向に磁石があるならばスキップ
        for di, dj in dij:
            nex_i, nex_j = i + di, j + dj
            if not (0 <= nex_i < h and 0 <= nex_j < w):
                continue
            if s[nex_i][nex_j] == "#":
                mag = True
        if mag:
            continue
        # 注目している頂点の四方向に磁石がないならば辺を張る
        for di, dj in dij:
            nex_i, nex_j = i + di, j + dj
            if not (0 <= nex_i < h and 0 <= nex_j < w):
                continue
            v = nex_i * w + nex_j
            g[u].add(v)

vis = [-1 for _ in range(h * w)]
ans = 0

for i in range(h):
    for j in range(w):
        # st: 始点となる点
        st = i * w + j
        if s[i][j] == "#" or vis[st] != -1:
            continue
        que = deque([st])
        free = 0  # 自由度
        # BFS
        while que:
            pos = que.pop()
            if vis[pos] == st:
                continue
            vis[pos] = st  # 訪問先として現在探索している頂点を格納する
            free += 1
            for to in g[pos]:
                que.appendleft(to)
        ans = max(ans, free)

print(ans)
```
autoron.aiでおしゃれリポジトリ用のバナーを爆速で作成する

## はじめに

こんにちは！[@nyakako13](https://qiita.com/nyakako13 "Qiita ページ") です。


[autoron.ai](https://autoron.ai/)を使って、おしゃれリポジトリ用のバナー画像を作ったら簡単だったので方法をシェアします。

↓このリポジトリの画像はautoronで作りました。
![スクリーンショット 2024-05-08 16.49.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2539365/9c43bcc1-96c4-4338-38dd-5963cb278b2d.png)

https://github.com/nyakako/react-js-study-record?tab=readme-ov-file#studyrecord


## おしゃれリポジトリとは？
https://qiita.com/Sicut_study/items/3b762364c95e4673bfbe


## autoron.aiって？
月額1,000円でChatGPT(GPT4)もClaude3(Opus)も画像生成も使えて
独自のAIアシスタントもつくれる仕事特化型生成AIサービスです。

https://prtimes.jp/main/html/rd/p/000000198.000010407.html

ChatGPT(GPT4)もClaude3(Opus)も使えて月額1,000円からというのはありがたいですね。（チケット制なので使い放題ではない）


## バナー画像の作り方
1.　[autoron.ai](https://autoron.ai/)にアクセスして**無料の会員登録**をします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2539365/05f32805-8dfd-5364-7f86-17e6488bc8c1.png" width=40% >

2.　[プランのページ](https://autoron.ai/app/plan)にトライアル用の30チケットが付与されています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2539365/7a067eb3-8a19-4453-f648-1ca5b64cb276.png" width=80% ><br>
3. 画面左の「画像作成」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2539365/1685ccb4-f62d-f7c3-b17f-0771a0fbafd2.png" width=50% >

4.「サムネイル」を選択、条件を入力し左下の「サムネイルを生成」をクリック。（下の画像は生成ボタン押下後です。）

:::note warn
注意
「バナー」の項目もありますが、文字のデザインが微妙なので「サムネイル」をオススメします！
:::



**コピー**：画像中央の文字（リポジトリ名やアプリ名など）
**サムネイルタイプ**：X(Twitter)　※サイズ変更可
**画像のスタイル**：アニメ
**プロンプト**：アプリの内容などを入力（今回はChatGPT作）
<details><summary>プロンプト全文</summary>

デスクの手前に、かわいい20代前半の女性が椅子に腰掛けて、メモ用紙を見つめながら何かを考えている様子です。柔らかな日差しが横から差し込み、女性の横顔が照らされています。背景は落ち着いた色合いのオフィス風景で、デスクの横に観葉植物が置かれています。このシーンを横長(1500px*500px)の構図で撮影してください。」
</details>

![スクリーンショット 2024-05-08 0.43.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2539365/3a5bc3a3-f55f-8238-545b-ebada7b57e88.jpeg)


この画像生成でのチケット消費は0.5枚でした

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2539365/98c1717f-81fc-9184-92f9-0e54d4f4bdca.png" width=50% >


条件で変動あるかもですが、2,30回くらいは試せそうかな？

ちなみにもっと簡単なプロンプトでもいけました。
![スクリーンショット 2024-05-08 17.12.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2539365/90e157d3-3c29-7f21-230e-3d6c625c0446.png)



## 感想
他にも無料で簡単にできる方法ありそうかな？と思いつつ、今回はautoron使ってみたかったのでやってみました。

もっと良い方法ご存知の方いたら教えて頂けると嬉しいです！！


## おわりに
よかったら[X(@nyakako13)](https://twitter.com/nyakako13 "Xプロフィール")もフォローしてもらえると嬉しいです。

[Qiita100投稿](https://qiita.com/nyakako13/items/03ad61cfb82a1582b5d1)まで残り91！

未経験や浅経験、厳しいと言われている年代でエンジニアへの転職活動されている方、負けずにがんばりましょう！！

## 参考
https://note.com/iritec/n/n045b2f2ca4f1
Reactで個人開発 ビジネスマッチングアプリ

# 動機・目的
普段はフロント・バックエンドのフリーランスエンジニアとして

3年半ほど活動していますが、

常駐案件の開発しか経験がなく、自分で1から開発して世に出すという経験がなかったため、

個人開発を経験したく、始めました。

技術は、個人的に今一番力を入れたい言語であるReactを選びました。

開発するテーマは、ビジネスマッチングアプリにしました。

特段理由はありませんが、某現場で開発経験があったため、選びました。

とにかく、未完成であってもリリースすることを目標にしたいです。

# 技術

- フロント 
React 18.3.1

- バックエンド
Laravel を採用してAPIサーバーとして切り分ける予定ですが、
今のところ、優先度が低いため導入していません。

- DB
MySQL を採用予定ですが、
今のところ、JSONでデータをモックしているため導入していません。

- デザイン
Material-ui を使っています。
凝った部品はまた別途デザインを当てこむことを想定しています。

# 軽く作成してみた
まずは簡単にコンポーネントを作成してみました。

デザインは全くこだわっておらず、データもモック化したりベタ書きしています。

- トップ画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3511372/82d2a2c7-5be9-1ac6-aaf5-3cb57bbafc9b.png)

- プロフィール画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3511372/867c5ece-d933-d580-55bd-1097e6000561.png)


- ヘッダー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3511372/3975ef1f-a936-2393-339d-c0f1bf496f7c.png)

- 未実装な機能やコンポーネント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3511372/0906975c-961c-2ec3-b4f2-3b4943d4d852.png)

# ひとこと
いつも何か作成しては途中でやめてしまい、ちゃんと世に出すことがなかったため、

今回はちゃんとある程度形にして世に出してみたいです。

複雑な機能や細かなデザインは後回しで、とりあえず手が止まらないように

進められたらなと思います。

これからReactに関する質問をQiitaに投げることがあるかと思いますが、

有識者の先輩方、お力添えください🙇‍♂️
[BigQuery API(V2)] Javaでテーブルのアクセス制御ポリシーを取得する

BigQuery API V2(Java)を使用して、
BigQueryテーブルのアクセス制御ポリシーを取得する方法についてご紹介します。

アクセス制御ポリシーを取得するには、
適切なIAM権限が付与されている必要があります。

権限付与に関しては
[⧉[BigQuery API(V2)] JavaでBigQueryを使う(2.権限付与)](https://qiita.com/doran/items/8b7ba29672527426e88d#2-権限付与)
を参照ください。

:::note info
APIを利用する環境の準備から始める場合や、コードを実行する際は、
[⧉[BigQuery API(V2)] JavaでBigQueryを使う](https://qiita.com/doran/items/8b7ba29672527426e88d)
を参照ください。
:::

|No||目次|
|---|---|---|
|1||[アクセス制御ポリシーを取得](#1-アクセス制御ポリシーを取得)|
||1|[スコープ](#11-スコープ)|
||2|[実行](#12-実行)|
||3|[レスポンスの内容](#13-レスポンスの内容)|

## 1. アクセス制御ポリシーを取得
指定したテーブルのアクセス制御ポリシーを取得します。

### 1.1. スコープ
このAPIを実行するには、以下のいずれかのスコープを指定してください。
```
BigqueryScopes.BIGQUERY
BigqueryScopes.CLOUD_PLATFORM
BigqueryScopes.CLOUD_PLATFORM_READ_ONLY
https://www.googleapis.com/auth/bigquery.readonly
```
[⧉[BigQuery API(V2)] JavaでBigQueryを使う(3.2. BigQueryインスタンスを取得)](https://qiita.com/doran/items/8b7ba29672527426e88d#32-bigqueryインスタンスを取得)
でスコープを指定してください。

### 1.2. 実行

```java
public static void main(String[] args) throws Exception{
    Bigquery bigquery = getBigquery();
    Bigquery.Tables tables = bigquery.tables();
    
    String resource = String.format("projects/%s/datasets/%s/tables/%s",
                "プロジェクトID","データセットID","テーブルID");
    
    GetIamPolicyRequest content = new GetIamPolicyRequest();
    Bigquery.Tables.GetIamPolicy policy = tables.getIamPolicy(resource,content);

    Policy res = policy.execute();
    System.out.println(res);
}
```
#### 1.2.1. HTTPリクエスト
POST:　https:\//bigquery.googleapis.com/bigquery/v2/projects/{プロジェクトID}/datasets/{データセットID}/tables/{テーブルID}:getIamPolicy

が実行されます。

#### 1.2.2. クエリパラメータ
クエリパラメータはありません。

#### 1.2.3. リクエストボディ
GetIamPolicyRequestsetメソッドにより、リクエストボディを追加できます。

|メソッド|引数|説明|
|---|---|---|
|setOptions|[GetPolicyOptions](#getpolicyoptions)|オプション指定|

#### GetPolicyOptions
|メソッド|引数|説明|
|---|---|---|
|setRequestedPolicyVersion|Integer|ポリシーのフォーマットに使用されるポリシーの最大バージョン|

### 1.3. レスポンスの内容
#### Policy
|メソッド|戻り値|説明|
|---|---|---|
|getVersion|Integer|ポリシーのバージョン|
|getBindings|List\<[Binding](#binding)\>|プリンシパルとの関連情報|
|getAuditConfigs|List\<[AuditConfig](#auditconfig)\>|クラウド監査ログ構成|
|getEtag|String|ハッシュ値|

#### Binding
|メソッド|戻り値|説明|
|---|---|---|
|getRole|String|割り当てられるロール|
|getMembers|List\<String\>|リソースへのアクセスをリクエストするプリンシパル|
|getCondition|[Expr](#expr)|関連付けられている条件|

#### Expr
|メソッド|戻り値|説明|
|---|---|---|
|getExpression|String|共通式言語構文での式のテキスト表現|
|getTitle|String|式のタイトル|
|getDescription|String|式の説明|
|getLocation|String|ロケーション|

#### AuditConfig
|メソッド|戻り値|説明|
|---|---|---|
|getService|String|監査ログを有効にするサービス|
|getAuditLogConfigs|List\<[AuditLogConfig](#auditlogconfig)\>|各タイプの権限のログを記録するための設定|


#### AuditLogConfig
|メソッド|戻り値|説明|
|---|---|---|
|getLogType|[LogType(enum)](#logtype)|この構成で有効になるログのタイプ|
|getExemptedMembers|List\<String\>|このタイプのアクセス許可のログを記録しないID|

#### LogType
|定義値|内容|
|---|---|
|LOG_TYPE_UNSPECIFIED|デフォルト|
|ADMIN_READ|管理人が読込|
|DATA_WRITE|データの書込|
|DATA_READ|データの読込|

<br>
<br>
おしまい。。
【Googleスプレッドシート】QUERY関数で同シート内の列指定をアルファベットで行いたくない

### 備忘録としての短記事です。

ちょっとした小技程度の内容なので先に結果を書きます。

**=QUERY(A1:D,"select D")
↓
=QUERY(<font color="red">{</font>A1:D<font color="red">}</font>,"select <font color="red">Col4</font>")**

以上です！😉

### 解説
表題の通り、QUERY関数で同シート内のデータを扱うとき、列の指定をアルファベット形式「A,B,C...」にしたくない場面が私にとっては意外と多いです。

なぜなら、
アルファベットでの列指定はいわゆる「絶対参照」に近い状態となっているからです。

:::note info
例えば、
「`=QUERY(A1:D,"select D")`」という関数を記入したとします。
指定した範囲「`A1:D`」内のD列だけを取得したいという記載です。

ではその後、
指定した範囲の「`A1:D`」内に列の増減、範囲自体の変更があったとき、欲しいデータは変わらずD列に存在しているでしょうか。

参照したい列がズレたり、D列が指定した範囲の外になれば「`NO_COLUMN: D`」といったエラーになるかと思います。

スプレッドシートでは、多くの場合で関数の引数の変化に合わせて自動で入力値を調整してくれます。ですが、QUERY関数の「"クエリ言語"」の範囲は自動で調整されません。

つまり、一度D列を指定してしまえば何があってもD列だけを追い続けます。
まさに「絶対参照」的と言えます。
:::

「絶対参照」的なのは嫌だ。
では「相対的な参照」に**近づける**ためにはどうすれば良いか。
列を数値で指定する「Col1,Col2,Col3...」の形式を使用します。

:::note info
「Col1,Col2,Col3...」の形式は
QUERY関数とIMPORTRANGE関数を併用したことのある方には馴染み深いかと思います。
「指定範囲の左から◯列目」という指定方法のため、列名をアルファベットで指定するよりも簡単に管理でます。
また、入力値が数字のためMATCH関数などとも組み合わせた応用が可能です。
:::
:::note warn
もちろん「Col1,Col2,Col3...」の形式になっても、
クエリ言語が「絶対参照」的な存在であることに変わりはありません。ですが、範囲の位置の変更毎に列名をA,B,Cと指差ししながら変更しなければいけないといった手間は減らせます。
:::

ところで、
「Col1,Col2,Col3...」の形式は **「他シート」のデータにしか使えない**と思っている方が実は多いのではないでしょうか。

QUERY関数とIMPORTRANGE関数を併用したことのある方は特にそのイメージがあるかと思います。IMPORTRANGEを学ぶ上で列指定をCol形式に変更するポイントは必ず通りますが、厳密にその理由までを説明した記事などは意外と目にしません。

正しくは、
対象が「**範囲**」である場合はA,B,Cのアルファベット形式で列を指定します。
対象が「**配列**」である場合はCol形式で列を指定します。

:::note info
ここで言う範囲と配列の違いは以下程度の認識で良いかと思います。
**範囲** ＝ `A1:D`など、シート内の特定の位置、座標
**配列** ＝ 計算を経て関数の内部などに生成されている数列や表
:::

つまりIMPORTRANGE関数で呼び出したデータは、
中身が「他シート」だからCol形式にしなければならないのではなく、
中身が「配列」だからCol形式にしなければならないのです。

　
なので、
「範囲を配列に変換」することができればクエリ内の列指定をアルファベットからCol形式にそのまま変更できます。

「範囲を配列に変換」これは実に簡単です。
波括弧「**{**」と「**}**」で範囲を囲ってしまえば良いのです。

**A1:D
↓
{A1:D}**

そしてこれを取り入れたQUERY関数は以下のような表記となります。

**=QUERY(A1:D,"select D")
↓
=QUERY({A1:D},"select Col4")**

記事冒頭に書いた結果の式と同じになりました。
もちろんこれは例文であり、selectだけでなくwhere句を使用していても同じです。

余計な関数を含めたり、式の長さをいたずらに長くしないで済む小技として活用できれば幸いです。
　
　
以上思いつきのままやった対応の備忘録でした。👋
[ReviewAI 使用例] チュクミドサ [新大久保 韓国料理店]


# はじめに

レビュー分析AIサービスの ReviewAI (レビューアイ) を開発しています。
本記事ではレビュー分析の例として、新大久保の韓国料理の人気店を取り上げていきます！
[人気店の記事をまとめているページはこちらです。](https://qiita.com/RetegyLink/items/3d94852bf25a724a82cc)

今回は、チュクミドサ の食べログに集まっているレビューを分析します。

## チュクミドサ

> 韓国No.1のブランドイイダコ専門店 チュクミドサ

[食べログ](https://tabelog.com/tokyo/A1304/A130401/13271829/)

## ReviewAI (レビューアイ)

弊社 RetegyLink が開発中のレビュー分析 AI です。
https://reviewai.next-seed.work/
試作版を公開中で、現在は
- [食べログ](https://tabelog.com/)
- [じゃらん](https://www.jalan.net/)
のレビューを分析できます。

# レビュー分析

さっそくですが、こちらが分析結果です！
タコ(蛸)・ホルモン・チャーハン・イイダコ(飯蛸)といった美味しそうな単語に加えて
店員という気になる単語もありますね。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3776808/4ec17b99-1e2f-8d42-7446-dc62fa99f57b.png)


## タコ(蛸)

<font color=steelblue>**良い評価**</font>

- 歯応えあるのが好きで、タコ好きだったら好きだと思います。
- タコがとにかく沢山入っていてとても満足しました。
- 私韓国料理が本当に大好きだけど、タコが1番好きなことに気づいた！！！！！


## ホルモン

<font color=steelblue>**良い評価**</font>

- タコはぷりぷりでエビやホルモンも食べられて満足です♡
- ホルモンがプリプリでとても美味しく
- 韓国のコプチャン(ホルモン)はジューシーでとても美味しいので、チュクミと一緒に食べられてとてもおいしかったです。


## チャーハン

<font color=steelblue>**良い評価**</font>

- そして〆のとびこチャーハンが最高！！！
- チャーハンは量多めなので人数分頼まなくても良いと思います
- 女子会でチャーハンまで食べるなら、3人で2人前ずつくらいがちょうどいいかなと思います。


## イイダコ(飯蛸)

<font color=steelblue>**良い評価**</font>

- イイダコをつまみながらチャミスルっていうのもナイス。
- イイダコ炒め食べながら、韓国ネタに一杯やりたいときに(∩´｡•ω•)
- 野菜もとれるし、イイダコ、エビはプリプリ、ホルモンは柔らかいし、トッポギも入っていて組み合わせが最高でした。
- チュクミ、とは、イイダコのこと。


## 店員

<font color=steelblue>**良い評価**</font>

- 店員さんが作ってくれる　システム楽しい空間でした食べる価値あり　結構量があるので　
- お店の雰囲気は活気があって店員さんは片言の日本語の方もいたりしますが明るく聞けば親切に教えてくれます。
- 新大久保からは少し歩きますが、お店も適度に混んでいて店員さんも親切でした。
- 鍋は店員さんがやってくれるので弄らず待つ。


<font color=chocolate>**黄色・橙色の評価**</font>

- 店員可もなく不可もなく。
- 客が多い割に店員さん少ないかな？


## ReviewAI の改善点

蛸や飯蛸などの食品名はカタカナ表記の方が読みやすいですね。


# おわりに

店員さんがタコやホルモンに始まり、〆のチャーハンまで作ってくれる
いたれりつくせりのお店のようです。

観点ごとの詳細を確認されたい方は、ぜひサイトにアクセスして確認してください！
レビュー分析AI の [ReviewAI](https://reviewai.next-seed.work/) は試作版を公開中です。
今回分析した HOGE_NAME の URL はこちらです。
```
https://tabelog.com/tokyo/A1304/A130401/13271829/
```

今後どんどん使いやすくしていく予定ですので、
ぜひ皆様の ReviewAI に関するご意見を[アンケート](https://docs.google.com/forms/d/e/1FAIpQLSc-yVTDeqqMc9GqM93BvzaYWCB6wyToesYj_wl8bhwKgw8LqQ/viewform?usp=sf_link)で教えてくださると幸いです。
Controllerメソッドの引数にアノテーションを付けない場合について

https://docs.spring.io/spring-framework/reference/web/webmvc/mvc-controller/ann-methods/arguments.html

@GetMapping(@PostMapping)でアノテーションされたメソッド(Controllerメソッド)に一般的な値を入れると`@RequestParam`が、自作クラスなど非一般的な値を入れると`@ModelAttribute`が自動的に付与される(または付与された扱いになる？)。
一般的かどうかは`BeanUtils#isSimpleProperty`で判定される。
定義はこちら 
https://docs.spring.io/spring-framework/docs/6.1.6/javadoc-api/org/springframework/beans/BeanUtils.html#isSimpleValueType(java.lang.Class)

つまりは、`@RequestParam("name") String name`は、単純に`String name`に置き換え可能(変数名をクエリパラメータのキーと一致させる必要あり)
`@ModelAttribute`は、
1. @Controller内で定義された@ModelAttributeメソッド
2. @SessionAttributes(セッション内でに存在するもの)
3. リクエストパラメータ内に存在するもの
4. デフォルトコンストラクタ
5. パラメータを初期化したものを引数としたコンストラクタ

が格納される
このとき、Modelに作成されたインスタンスがバインディング(`Model.addAtribute`)される。
バインディングされるモデルの初期のインスタンス名は、クラス名の最初の1文字目を小文字にしたものである。(@ModelAttribute()でname属性を指定することで変更可能)
Bitly インターフェースを英語から日本語に変更する方法 (チュートリアル)

私たちはブラウザ拡張機能を開発しました。 Bitly を開くと、言語パックが自動的に読み込まれ、インターフェイスが日本語に変更されます。 私はプログラム開発者ですが、日本語はあまり上手ではありません。 言語パックの日本語が適切でない場合は、この言語パックに基づいて再度修正することができます。修正されたデータはあなただけが使用し、他の人と共有されることはありません。

この拡張機能の名前は PinLG で、Chrome または Edge 拡張機能ストアで見つけることができます。 その特徴は、正式にリリースされたネイティブ言語パックに可能な限り近いことです。 Google Web 翻訳のように頻繁にクリックする必要はなく、翻訳はあまり正確ではありません。

興味があれば試してみてください。 この機能では無料です。

![截屏2024-05-08 11.43.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787420/73946fa4-987d-63d9-f419-8abe4ca7038e.png)

使い方は非常に簡単で、拡張機能をダウンロードし、無料で登録してログインします。 拡張機能の対象言語が日本語かどうかを確認してください。 Bitly 操作インターフェイスを開きます。 日本語になりました。 更新しても、ブラウザを閉じても、コンピュータを再起動しても。 それは問題ではありません。

Web インターフェイスの固定テキストを変更する必要がある場合。 ブラウザの右上隅にあるプラグインをクリックし、「Enter in PinLG」をクリックして、変更する必要があるテキストの上にマウスを移動し、Shift キーを押してテキストを変更し、保存します。 終了した。 他のすべての操作はこのメソッドに従います。

YouTube のデモビデオ：https://www.youtube.com/watch?v=LZM6Ixq0ZrQ

Chrome:
https://chromewebstore.google.com/detail/omdfbegdgeempoeceailgmjiplndjlmc

Edge:
https://microsoftedge.microsoft.com/addons/detail/kkbmihllpafdmfhbmmdjmoljhljhigkb