OmniAICreator/Qiita-1.07M huggingface dataset:
【Flutter】FirebaseのlinkWithPopupについて調べてみた


:::note alert
注意点
調べた限りだと、iOSとAndroidは対応されていないらしいです。
別の実装方法を近いうちに共有できればなと思っています。
:::


# linkWithPopupとは
- 既存のユーザー アカウントに認証プロバイダの認証情報をリンクすると、ユーザーが複数の認証プロバイダを使用してアプリにログインできる
- ログインに使用した認証プロバイダに関係なく、同じ Firebase ユーザー ID でユーザーを識別できる


#### 具体例

- あるアプリをGoogleアカウントでログインして、その後に、Facebookアカウントでも同じアカウントにログインができる
- そして、Googleアカウントでログインした場合でも、Facebookアカウントでログインした場合でも、FirebaseのユーザーIDは同じままになる






# 実装例
Firebaseのセットアップについては割愛させていただきます。詳しくはこちら↓

https://blog.flutteruniv.com/flutter-firebase/


```shell
[✓] Flutter (Channel stable, 3.16.5, on macOS 14.0 23A344 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.87.2)
[✓] Connected device (4 available)
[✓] Network resources
```

- 使用するPackages

```yaml
dependencies:
  firebase_auth: ^4.17.4
  firebase_core: ^2.27.0
```


1\.<b> linkWithPopupを使うための `Auth Provider`を記載</b>

```dart
final twitter = TwitterAuthProvider();
final google = GoogleAuthProvider();
final facebook = FacebookAuthProvider();
final github = GithubAuthProvider();
```

2\. `linkWithPopup`を呼び出す

```dart
Future<void> twitterLinkWithPopup() async {
  final currentUser = firebase.currentUser;
   if (currentUser == null) {
      return;
    }
  await currentUser.linkWithPopup(provider);
}
```
駆け出しにとっては悩ましいprivateとprotected

### 注意
メモ書き程度ですので、間違っていても悪しからず。
なんなら修正コメントください。

## private
- そのクラス内でしか利用できない
- クラス固有の機能に使う

## protected
- 親子関係にあるクラスでのみ利用可能
- 子クラスでも利用したいときに使う

## public
- どの外部のクラスからでも利用可能
- ビジネスロジックとして共通化された関数で使うことが多い
第９回 オモシロAIごった煮会LT) 3月のイベント振り返り（AI博覧会/東京AI祭）

## 本日のイベントと資料
https://omoshiroai.connpass.com/event/311809/
https://qiita.com/nomurasan/items/80984a4752384937726f

![0330ごった煮AI QR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/075e0d32-ecff-73a8-01be-8df81e27491d.png)

---

## アジェンダ
- AI博覧会
- 東京AI祭

---

## 今日話さないこと
- セミナーの内容
- 運営批評
  - いつもですが、本稿でも意図していません

（せっかくだから他の方も入ってもらってOKのトークセッション形式にしたいなぁ、と思ってます）

---

### 今日いいたいこと
どちらもイベントやってる人がコンサルに入ってない？のか、どちらも一般参加者に優しくない😡
（これからの改善に期待したい）

---

## AI博覧会
https://aismiley.co.jp/ai_hakurankai_2024_spring/visitor/

次回は2024.8.29-30 東京渋谷のこと

---

### 課題
- 展示ブースの導線が一方通行で落ち着いて見れなかった（後述）
- 会場登録とセミナー（カンファレンス）参加の手続きが別
  - これを知らなかった＆忘れていたせいで参加を見送ろうと思ったぐらい
- 時間がカツカツ（中休みがそれぞれ20分・昼休憩なし）だったので展示ブース回りながらセミナー参加はかなり忙しい！
  - 会場の関係でカンファレンスホールと展示ブースが近かったのはGood!

---

### AI博覧会 会場マップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/f6a8843a-1736-2861-f19c-3d5a77696886.png)

---

## 東京AI祭
https://www.aisai.tokyo/

ここでは、3/23-24について言及します。
（セミファイナルやプレイベントの話はしません）

---

### 概要
- ハッカソンイベントとしてみるととんでもないボリューム！
  - 少なくとも大きなホールを借りて来場者プレゼントがあるセミナープログラムまでやってるぐらいなので本当にすごい
- いわゆるセミナーイベント＋展示ブース形式としてみると会場のまずさがいいところ全てを消してしまった感
  - セミナーホールは人が多すぎてホールの外から話を聞く人や、椅子がなくて床に座って聴くよう案内されたり
  - セミナーホールの様子は後日アーカイブ配信予定、とは聞いていますが今のところ動きが見えません…

どう評価していいか分かりませんが、イベント案内や盛り上がりがすごかったのでセミナー＋展示イベントで評価します。

---

### 課題
- 宣伝やチケット発行の規模に対して会場が狭すぎる！
  - 次回があれば、会場を広げるか予約制（入場orセミナー）で人数を絞るか…
  - 「セミナーの様子をオンラインで見れる」と現地で案内するだけでだいぶ違ったかもしれない

主催や会場スタッフまで「AI初学者を増やす＝新規参入を増やす」という意識はすごく強く感じた。
それだけに「家族連れは絶対に来てはいけないイベント」に感じてしまったのが残念。

---

### 余談
- この機会に家族が生成AI（LLM）にハマってくれたので個人的には満足！
- novelAIの1ヶ月無料サブスク券があたったのが大きい！

---

## 今日言いたいこと（まとめ）
- 色々あったけど、良い刺激になった！
- 人におすすめは出来ない（気軽に参加できるイベントではない）が、また行きたいと思ってはいる
JUnit　一時メモ

## @TestExecutionListeners
テストメソッドの実行前後にカスタムコードの挿入やテスト実行中に特定のイベントの検出を可能にする。これは、テストのセットアップやクリーンアップ、ログ記録、リソース管理など、さまざまなテスト関連のタスクを自動化し、カスタマイズするのに有用。

## @Transactional
全てのメソッドが完了した時点でコミット、エラーが発生した場合はロールバックする。仮にトランザクション管理をせずに途中でエラーが発生した場合、エラーが発生するまでの処理実行結果がそのまま残り不整合になってしまう。トランザクション管理を有効化することで上記課題を避けることができ、また他の処理結果に依存しない形を取ることができる。

## ReflectionTestUtils
ReflectionTestUtilsクラスのsetFieldメソッドを用いることで、@valueで付与している引数をmock化することができる。そのため、引数を持つメソッドにもテストができるようになる。

## 参考
https://qiita.com/yu-F/items/6cb6c4d38aec7e4111f9
https://zenn.dev/ryo7/articles/dev-app-by-spring-boot-mybatis02#api%E4%BB%95%E6%A7%98
MotionBuilderのRelationコンストレイントについて

MotionBuilderのコンストレントは、
Mayaで用意された仕組みと似たものはあるのですが、
任意でリグを組む…というのが少し苦手です。


▼用意されているコンストレイント
|Maya |MotionBuilder  |
|---|---|
|Orient |Rotation  |
|Point  |Position  |
|Scale  |Scale  |

<br>

例えば、
[移動] ⇒ [スケール]  
[スケール] ⇒ [回転]  
といった単純なものです。

そこで、Mayaでいうノードを繋げて入出力の仕組みを作っていくのが
Relationコンストレイントになります。


![Animation240330080026.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/af8e193a-a199-c378-359f-89baea5e453c.gif)

上記の画像はAssetBrowserに入っている
・Cylinder
・SkeletonRoot
を配置しただけのもになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/5dea67a1-8f03-28ec-296b-ad328f2e49e9.png)

AssetBrowser⇒Templates⇒Constraints の中に
Relationがあるので、それをViewerにドロップすると
Navigatorに新しいRelationコンストレイントが作られます。
（renameして、「Relation_TransToScale」にしました。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/894bffc4-be74-4705-0eb6-f1561cc041eb.png)

先ほどのSkeletonRootを入力にしたいので、
「Sender」として投げ込みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/a48c7f9a-7aaf-11dd-2a74-182bb3004ece.png)

Cylinderは出力先のReciverにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/5e970ac7-d67d-1db5-a475-9338fc6cdf7d.png)

今回作りたいコンストレイントは、
[X軸に移動]⇒[X軸にスケール]
になります。

なので、次にMayaでいうノード選びが始まります。ノードの正式名は「Relation オペレータ」です。
SkeletonRootのTranslationには、[0, 0, 40]
CylinderのScaleは、[1, 1, 1]
と３つの数値型・・・Vector型で数値が入っています。
今回は１つの数値・・・Number型を使ってX軸の数値だけ欲しいので、
「ScaleAndOffset(Number)」を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/137c294b-65d6-baae-7d30-3c0155840a23.png)
<br>
「ScaleAndOffset(Number)」は、
* ClampMax[Number] ：最大値
* ClampMin[Number] ：最小値
* Offset[Number] ：オフセット値、基準の値を設定
* ScaleFactor[Number] ：かけたい倍率
* X[Number] ：入力する数値
という構成になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/a4591dc4-5bea-9f38-16c0-c506a7f02a0b.png)

画像では、VectorToNumberやNumberToVectorが接続の間に挟まっていますが、
変換のために自動で作られています。
Offsetには初期値である「1.00」を右クリックでSetValueして、
ScaleFactorには移動値に「0.1」倍させるための値をSetValueしています。
あとは、0.1倍した数値をCylinderのScalingに接続して、
変換用に自動で作られたNumberToVectorのYとZに「1.0」をSetValueすれば、
[X軸に移動]⇒[X軸にスケール] のコンストレント完成です。
<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/18890711-b94f-c0f6-d624-f23fca4b5ea6.png)

もしこんな風にあったはずのCylinderが消えていたら、
Scaleに「0」が設定されて見えなくなっています。
<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/6990fe79-8647-c8ae-c85c-17a4776b37d0.png)

入力から出力まですべて繋いだ後だと、
ShowValueでどういった数値を送っているか把握しながらコンストレイントを作ることができます。

<br>

[余談]
今回、ScaleAndOffsetのオペレータしか使いませんでしたが、
AND・OR回路、IFの大なり小なり、加減乗除、三角関数なども用意されています。
MayaでMatrix型を使っていたとしても、
結局の中身は、XYZのVector型とTranslationに分解できるので、
そこを理解していればMotionBuilderのRelationコンストレイントも理論上作れるはず・・・！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410880/5240017b-44e8-bb5d-536b-122599eea70b.png)
プリザンターを活用したデータセンター運用管理

# 内容
データセンター運用管理をプリザンターを使用して業務改善した話になります。下記イベントで発表させて頂きました。

https://pleasanter.connpass.com/event/312923/

# 問題点とツールの選定
管理されるべき情報が管理されていない、運用フローがないなどの課題がありました。そこでツールを導入した業務フロー改善を計画しました。現在このようなツールはSaaS製品が主流になっていると思いますが、会社で仮想マシンのホスティングサービスを提供している関係上、オンプレの仮想マシンを利用することが出来ましたので、オンプレに無料で構築出来るOSSのプリザンターを選定しました。

![スライド4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/ff525ff7-1f0a-a1bd-e452-4e892e5a6f91.png)

# 必要な情報の一元管理
プリザンターではGUIで自由にデータベースを作成できるため、全顧客の一覧ページを作成しました。

![スライド5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/8b5d674f-5fe3-754d-2ad7-9363090a70b0.png)

さらに上記のレコードのうちの1つをクリックすると、必要な情報が一か所で全て確認できるデータベース構成としました。その顧客に関する「顧客情報」、「構成管理」、「インシデント管理」、「ナレッジ管理」を一か所で全て管理することが出来ます。

![スライド6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/277320e2-dd4e-7296-b340-17a846bf8536.png)

# その他工夫した点

その他に工夫した点として「インシデント管理の自動化」と「プリザンター活用の普及」を上げさせていただきます。

![スライド7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/e08c451f-2499-95ec-1cb5-663caa268d1f.png)

# インシデント管理の自動化
データセンター内の機器監視をZABBIXまたはその他のツールで行っています。インシデント管理の効率化のため、下記2点の対応を行いました。

![スライド8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/b9884470-cbed-4222-27fd-a7625e81ce4d.png)

## インシデント管理テーブルに自動取り込み
アラートメールをプリザンターのインシデント管理テーブルに自動的に取り込みます。そのまま全てのメールを取り込むと大量のレコードが生成されてしまうため、間に自社開発のメールフィルタリングツールを入れて、条件に一致したアラートのみを登録する構成にしています。

## アラートメールに顧客情報ページのリンク追加
ZABBIXのアラートメールに先ほど記載した顧客TOPページのリンクを追加しました。もちろんアラートによってリンク先は異なります。運用担当者はアラートメールを受信した際、メールのリンクをクリックすることによって直ぐに必要な情報にアクセスすることが出来ます。

# プリザンター活用の普及
今までツールを使わず、Excelに慣れている企業文化の中でツールを積極的に触ってもらうには一苦労します。そこでプリザンター活用に関する動画や確認テストを作成しました。動画を見てもらうというよりは何人かに動画を作成してもらうことで楽しみながらプリザンターを学んでもらい、プリザンターの利用推進に貢献頂きました。動画共有サイトはAWS上にサーバレスで構築しました。

![スライド9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/04a41351-96e0-c9f9-e8db-d04f6c552bf4.png)


# プリザンターの好きなところ
最後にプリザンターの好きなところを上げさせていただきます。

![スライド11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/2b87aa3e-5383-76c7-4d7d-2655e9e4166a.png)

# 資料
https://speakerdeck.com/toru_kubota/purizantawohuo-yong-sitadetasentayun-yong-guan-li
Figmaでデザインを作成する時のTips（準備編）

案件や個人学習をする時にFigmaを使う機会が増えてきました。
個人的に身につけて良かった内容を「準備編」「基礎編」「応用編」に分けて、投稿していきたいなと思います。
少しでもお役に立てたら幸いです。
※約5分で読めます。

:::note info
Figmaはインストールされている前提で記事を書いていきます
:::

:::note info
過去の記事はこちら
:::

https://qiita.com/hirokazu_nakao/items/ee1295796d584f62af9c

https://qiita.com/hirokazu_nakao/items/a93c8f688e6858d95a02

# 1. パネルを活用する

PC・タブレット・スマホ用のフレームを作成する時、以下のように自分でフレームのサイズを作成していませんか？

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Figma_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/37d5faa9-9fa7-4b3a-57e3-6416234aa096.gif)|

フレームを1枚だけ作成するならまだ良いですが、実務になると何十枚も作成が必要になるので大変です。そんな時は以下の様に、既に登録されているフレームを活用しましょう。
例えば、Mac Book Pro 14のフレームを準備したい時はこんな感じで対応すればすぐに準備できます。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Figma_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/ffbffe4b-e1b9-106d-7c4d-d2f262931bfd.gif)|

PCサイズ以外にもタブレットサイズやスマホサイズも準備されています。
ぜひ活用しましょう！

# 2. レイアウトグリッドを設定する

パネルの準備ができれば次はレイアウトグリッドの設定に入ります。
以下の手順で簡単に設定することができます。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Figma_3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/55dd7bbf-e20a-9aba-5d4f-9ff95faae95d.gif)|

| 項目| 設定内容|
|:-:|:-:|
| グリッドタイプ | 列 |
| 数 | 12 |
| 色 | 5% |
| 種類 | 中央揃え |
| 幅 | 64 |
| ガター | 32 |

設定したレイアウトグリッドは登録することもできます。
レイアウトグリッドを設定しておくと、フレームを配置していく際にレイアウトグリッドへ合わせるだけで均等に配置できます。
こんな感じ。

![スクリーンショット 2024-03-30 2.38.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/71c5e8d6-857f-ccc5-f839-80dd0d2bd817.png)

設定項目に関しては自由に調整できるので、自分好みの設定でOKです！


# 3. コンポーネント置き場を準備する

ボタン・アイコン・フォームなど、色々作成するのは手間ですよね？
そんな時は1つ作成して「コンポーネント化」するだけで、簡単に複製することが可能です。
作成したコンポーネントを一箇所に配置しておくことで、修正したい時もすぐ探せますね！

![スクリーンショット 2024-03-30 3.01.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/ca750708-a075-a4e8-d461-dd102366f18e.png)

コンポーネントの作成方法について「応用編」で投稿予定です。


# 4. 必要なプラグインを準備する

こんな感じで、Figma上から簡単にプラグインを導入することができます。
|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Figma_4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/0b36ceec-8f22-3fae-6270-bccd0b24ff0a.gif)|



以下、オススメのプラグインをご紹介します。

https://developers.google.com/fonts/docs/material_symbols?hl=ja

Googleが公式に提供している最新のアイコンフォントです。

https://unsplash.com/ja

Unsplashに掲載されている写真は全て無料で使用できます。

https://www.figma.com/community/plugin/1159123024924461424/html-to-design

参考にしたいデザインのURLを取得しhtml.to.designに読み込ませます。
読み込ませたURLのデザインがFigma上に表示されます。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![Figma_5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/e4c6f754-dba3-00bd-64fb-fbb7f90d21de.gif)|

完璧には読み込まないですが、参考にしたいデザインがあればこちらのプラグインを使うのもアリですね！


# 5. さいごに

Figmaでデザインを作るための準備ができました。いかがだったでしょうか？
次回は「基礎編」になります。
ショートカットコマンドをメインに投稿する予定です！

準備するにあたって「これした方が良いよ！」や「プラグインこれがオススメ！」があればぜひ教えてください！

最後までご覧いただきありがとうございました！
「現代数理統計学の基礎」演習問題解法メモ　第7章問7～9

これで第7章を終わります。
問9(2)など疑問の残ったままですが。
![第7章問7 P1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/415f36e9-bc86-85ee-1ec6-265c6a371b6e.jpeg)
![第7章問7 P2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/ea0990e8-b135-0005-49ae-078c5508b1d0.jpeg)
![第7章問7 P3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/9938479f-c75b-51bf-b5e6-6de255d5e5d0.jpeg)
![第7章問7 P4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/8f2e222a-70ba-8b2a-352b-a32bc6511217.jpeg)
![第7章問8 P1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/b6de93fa-9517-6bc7-d6a6-319f7e557f28.jpeg)
![第7章問8 P2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/aa658f69-07d6-e38a-64a1-dcb88c5bf0f6.jpeg)
![第7章問8 P3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/201a7e25-f54d-d31f-b634-0d84706c7fd9.jpeg)
![第7章問9 P1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/be3a9953-8b9b-082a-9fb6-61ed0a32b238.jpeg)
![第7章問9 P2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/bc4c93e1-6a60-86fe-98af-62b23cf3447c.jpeg)
Data Structure and Algorithm を学んだことで良かった点

## Introduction

1年ほど生活リズムがだいぶ朝方に変わりました。家事の合間に1時間ほど時間を確保することができたので、一人でなければできないことをやろうとして Data Structure and Algorithm の学習をしていました。その結果、一年頑張っただけで、概ね LeetCode で Easy はほぼ瞬殺、Medium レベルは概ね解ける、Hard は時折解けるというレベルまで成長することができました。

ただ、多くの人が FAANG などの外資系 IT 企業への就職を目指して DS&A を学習する一方で、それが直接業務に結びつかないと考えられがちです。そして、興味本位で基礎をおろそかにして最新のテクノロジを学ぼうとする人が少なくないようです。もちろんそれ自体は悪くはないのですが、個人的には DS&A の学習は大きなメリットがありました。

今回は、DS&A を学習することでよかった点を簡単にお伝えしておこうと思います。

## メリット

業務アプリケーション内では高い難易度の問題を解決でき、他分野の理解を促進できます。

### 複雑な処理になれる

業務アプリケーションにおいてなるべくシンプルに設計したとしても複雑になってしまう時がよくあります。そして、DS&A で出てくるようなコードも相当複雑になります。そして、この複雑なコードに慣れていると、業務側においては脳の余剰力が生まれます。その結果、適切な命名やコンセプトづくりといったより設計にその余分な力を活用することができるようになりました。

実際に経験した例ですと、携わっていたポイントシステムの構築プロジェクトにてポイントシステムの仕様が複雑でした。それに引きずられる形で実装も非常に難易度の高いものになりました。この時に、DS&A の問題と同じようなものと捉えた瞬間に何をしているのかが明確になりました。

### パフォーマンスチューニング

DS&A を学習する際に意識として芽生えるのは、どれだけ時間とメモリを消費するのかを意識する点です。そのため、どの処理に時間がかかっているのか、メモリを消費するのかを時間複雑度や空間複雑度の観点から意識することができます。

例えば、最大値を抜き出すことを考えるのであれば、ソートして値を取得するのではなく、地道に for で回す方が早いとわかります。さらに本当に必要であれば、最大値や最小値を格納するようにデータ構造を工夫する方が早いとわかります。

ただ、パフォフォーマンスチューニングをする際にはアーキテクチャの理解が一番重要です。求める性能がそもそも設計思想やその方針が適切かどうかを検討する必要がありますが、その上で、どこにボトルネックがあるのかを把握することも重要になってきます。

### 他のコンピューターサイエンス分野の理解促進

DS&A はコンピューターサイエンスの分野の基礎ですので、その他様々な分野に応用されています。そのため、DS&A を知っているとそれを応用することができます。

例えば、データベースのインデックスは私はあまり詳しくないですが、Hash Index が Hash Map 、BTree が Binary Tree と関連しているという点に気づけば自ずとその特性を理解することができます。ネットワークにはダイクストラ法というグラフにおいて最短経路を求めるアルゴリズムが用いられています。

このように、知っているとそれだけで他の分野の理解を促進します。

## どう学習するのか？

### NeetCode

DS&A の学習教材を提供するサービスです。動画で DS&A の分野を説明してくれるのが非常に良かったです。演習問題として LeetCode の問題とその解説のコーナーがあります。僕は他にも書籍をいくらか用いましたが、正直このサービスが一番理解しやすかったです。

### LeetCode

言わずと知れたコーディング試験が投稿されているプラットフォームです。

## まとめ

DS&A は他分野の学習や業務に間接的に役立つのでおすすめです。
後輩へAWS入門編を教えるには？

皆さん、こんにちは！　好きな牧草はチモシー、ITエンジニアのSkyfoxです！
今回は、後輩をもつ先輩向けに書いています。
後輩への教え方は、正解がなく聞き手に合わせておこなうと思うので、皆さんも他良い方法がありましたら、ぜひコメントで教えてください！

# この記事について
### 対象者
- 後輩をもつ先輩方
- 後輩にAWSについての教え方に困ってる方

### 本記事のゴール
後輩への教え方の参考になればと思います。

# 前提
ページはじめに書いた通り、私は後輩への教え方に関係なく、相手に何かを伝える際は、相手によって伝え方をカスタマイズする必要があると考えています。

# 突然ですが...
突然ですが、あなたは初めてAWSの話を聞く若手社員だとします。
ある日、先輩社員から、
「AWSでEC2を建てるための説明をします！
　下の図で説明します！！
　AWSとは、クラウドコンピューティングサービスで、・・・EC2は仮想サーバーになっていて・・・」
という説明を受けたら、どう感じるでしょうか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752776/4f2e44ef-c8b9-bb22-a5cd-8106d91ccf52.png)

おそらく、

「ちょっと待ってください！
　よくわからなかったので、もう一度お願いしてもよろしいでしょうか...？」

 となるかと思います。

少し極端な例でしたが、AWSを初めて見る後輩、ましてやIT初心者の後輩にIT用語が多い説明だと、頭がパンクしてしまいます。
そして、教えている先輩ももう一度説明することになり、時間を要してしまいます。

そのようなことにならないよう、私なりのAWSの教え方を次章から説明していきます。

# 私の結論
結論から言うと、以下の3点に気をつけて伝えていました。

1. 聞き手が知っている身近なものに例える
2. 図を用いて、視覚的に捉えやすくする
3. アウトプットする

それでは詳しく説明していきます！

# 詳細
### 1. 聞き手が知っている身近なものに例える
「突然ですが...」章でもありましたが、AWSがわからない状態で、ITワードを多めで説明すると、理解しづらいことに加え、「なんだか難しそう」と敷居が上がってしまいます。
私もはじめ教える際は、ITワードに沿って説明してしまい、聞き手だった後輩も理解していない表情でした。

そこで、まずはAWSの敷居を下げ、AWSを近い存在にするため、編み出した教え方が
「聞き手が知っている身近なものに例える」ことです。

先ほどのAWSのワードを身近な例に例えて、私なりにEC2を説明すると以下のようになります。

```
ex)
EC2とは、仮想のサーバーで、リクエストを送るとコンテンツを返してくれるコンピュータのことです。

例えると、マンションにある宅配BOXに似ています。
「配達をお願い（リクエスト）し、数日後、配達BOXの鍵を開けると、欲しかった荷物（コンテンツ）が届く」
この流れと似ています。
```

もちろん、厳密にいうと違う箇所があるのですが、
AWSの敷居を下げ、AWSを近い存在にするためには、イメージをつけやすくする必要があります。
正確な説明は、AWSの入り口を理解した後におこなうことで、より理解が進むと考えています。

### 2. 図を用いて、視覚的に捉えやすくする
とはいえ、口頭や文章のみですと、理解に限界があります。
人の情報の80%は視覚から得ているため、図や表を使用することで、より理解しやすい説明をすることができます。

私の場合、AWS構成図と身近な例えを使用した図の両方を用意し、見比べながら教えていました。

ex)
**AWS構成図**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752776/4f2e44ef-c8b9-bb22-a5cd-8106d91ccf52.png)

**身近な例えを使用した図**
![たとえ話.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752776/85c9606e-15cf-f15a-7c81-d82d36447d44.jpeg)

### 3. アウトプットする
以上の２点で、概念の理解・イメージはつき、インプットできたかと思います。
では、インプットの次はアウトプットです。

ここで、皆さんエビングハウスの忘却曲線をご存知でしょうか？
エビングハウスの忘却曲線とは、時間経過にともなう、記憶の変化やメカニズムについて研究した結果です。
この曲線を見てわかるように、私たちはインプットのみで何もしないと、時間が経過するごとに、物事をだんだん忘れていってしまいます。
逆に、インプットしたものを復習（アウトプット）し続けることで、記憶に定着しやすくなります。
そのため、私はアウトプットするところまで1セットとし、繰り返し教えていました。
また何より、実際にAWS環境を触らないと、理解できない箇所もあるため、AWS環境を使用したアウトプットは重要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3752776/8020b11b-86d8-b9ce-af27-259cfd8f8fdb.png)
※引用「[エビングハウスの忘却曲線とは | 朝日新聞社](https://smbiz.asahi.com/article/14828411)」

# 効果
以上の教え方をしていた結果、私の後輩にAWSのハードルが低くなったと言ってもらえ、現在その後輩は仕事で活躍中です。
また私自身も、反復練習になり、よりAWSの知識が定着しました。社会人1年目時は、抽象的に覚えていましたが、今回の方法で毎年後輩に教えていることで、抽象的だった理解がより具体的になりました。
そして、説明力も徐々に高くなってきていると実感しています。

# さいごに
以上、イメージをつけるAWS入門編の教え方でした。
より詳しい正しい知識をつけるためには、アウトプット後に反復勉強を兼ね、詳細な知識をインプット＆アウトプットしていく必要があると考えています。
ですが、その前にAWSについてのイメージがつくようにすることで、その後の知識理解もより効果的になると思います。

ぜひ皆さんも効果があった、教え方がありましたら、コメントで教えてください！
iOSでOCR

# 画像からテキストを読み取る

日本語も読める。

```swift
lazy var textRecognitionRequest = {
    var request = VNRecognizeTextRequest(completionHandler: recognizeTextHandler)
    if #available(iOS 16.0, *) {
        request.automaticallyDetectsLanguage = true
    } else {
        request.recognitionLanguages = ["ja-JP"]
    }
    request.recognitionLevel = .accurate
    return request
}()

func recognizeTextHandler(request: VNRequest, error: Error?) {
    
    guard let results = self.textRecognitionRequest.results else {return}
    for observation in results {
        let label = observation.topCandidates(1)[0].string
        let box = observation.boundingBox
        let confidence = observation.confidence
        print(label)
        print(box)
        print(confidence)
    }
}

func performTextRecognition(cgImage:CGImage) {
    do {
        let requestHandler = VNImageRequestHandler(cgImage: cgImage)
        try requestHandler.perform([self.textRecognitionRequest])
    } catch _ {}
}
```

![スクリーンショット 2024-03-30 7.55.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/cb052d29-c4fe-14ac-4adc-c939b8ea25a5.png)

縦書きは読めない。

🐣
****
フリーランスエンジニアです。
AIについて色々記事を書いていますのでよかったらプロフィールを見てみてください。

もし以下のようなご要望をお持ちでしたらお気軽にご相談ください。
AIサービスを開発したい、ビジネスにAIを組み込んで効率化したい、AIを使ったスマホアプリを開発したい、
ARを使ったアプリケーションを作りたい、スマホアプリを作りたいけどどこに相談したらいいかわからない…

いずれも中間コストを省いたリーズナブルな価格でお請けできます。

お仕事のご相談はこちらまで
rockyshikoku@gmail.com

機械学習やAR技術を使ったアプリケーションを作っています。
機械学習／AR関連の情報を発信しています。

[X](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
[GitHub](https://github.com/john-rocky)
Field Service Document Builder 

[FSL(フィールドサービス)のまとめに戻る](https://qiita.com/Keiji_otsubo/items/2b2a47e21d2a489e1391)

+ [【未解決】We can't generate your PDF. Try again later.](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007agU1f)
Prompt Builderのまとめ2



+ [Quick Start: Prompt Builder Get Started with Prompt Builder](https://qiita.com/Keiji_otsubo/items/2b37916fc3b0f7eef085)


+ [in promt templtete there is no quick summery option is help me to solve this problem](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007bKz67)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/47cc7b9e-73f3-8a4f-5de9-b6a90bd0582a.png)

:::note
You need to specify the object that you need , in this case is the object 'case'.
Quick summary is for a field input, but is not already visible.

必要なオブジェクトを指定する必要があります。この場合はオブジェクト「case」です。
クイック サマリーはフィールド入力用ですが、まだ表示されていません。
:::


+ [Einstein for Sales が設定時の Einstein Sales にリストされない](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007bLEKm)

 Prompt Builder の使用を練習するために、Einstein Generative AI の 5 日間のトライアル組織にサインアップしました。    Einstein for Sales で「営業メール」を有効にしてみました。ただし、クイック検索ボックスで検索してもオプションが見つかりませんでした。 「セールスメール」を有効にする手動の手順はありますか?

 :::note
 注 この機能は一般には利用できませんが、追加の利用規約に従って特定の顧客を対象に試験的に導入されています。これは購入したサービスの一部ではありません。この機能は、SFDC の独自の裁量により、いつでも変更され、予告なく中止される場合があります。また、SFDC がこの機能を一般公開しない場合もあります。購入の決定は、一般的に入手可能な製品と機能に基づいてのみ行ってください。この機能は現状のままで利用可能であり、この機能の使用はお客様自身の責任で行われます。
:::

+ [フローとApexクラスのオプションはプロンプトビルダーで使用できないと表示されますが、どのように使用すればよいでしょうか。](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000le2j)


# prompt builder が表示されない

+ [In ADD DATA TO A PROMPT TEMPLATE TO QUICKLY DRAFT EMAILS lab i was not able to find prompt builder when i searched can u solve the issue..thanks](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000SVkH7)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/4c7fd829-4f4b-4cf7-a018-15ab814556f1.png)

:::note
https://help.salesforce.com/s/articleView?id=ai.prompt_builder_enable.htm&type=5
:::


### 権限セットでエラー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/1a38431e-8252-4937-ae12-36d32e39cb3a.png)
wslで、最小のカーネルをコンパイル その37

# 概要
wslで、kernel.elfのコンパイル、やってみた。
さらに、上のkernel見つけたので、コンパイルしてみた。
俺言語インタープリタを、移植してみた。
プログラムをロードする機能を実装した。

# 写真

「l kuku.txt」で、「kuku.txt」を読み込む。
「0」で、リスト表示。
「#=1」で、実行。

![スクリーンショット 2024-03-30 065717.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/82ecf861-143b-b05e-049a-45399dfc4d11.png)

# サンプルコード

```
void ordr() {
	int i;
	int j;
	int k;
	unsigned char m;
	unsigned char n;
	getvr();//Vc Adr
	Ptr++;
	Ptr++;
	if (RD(Ptr) == '"')
	{
		Ptr++;
		putlp('"');
	}
	else if (Vc == 'l')
	{
		char str[30];
		char c;
		int i = 0;
		int fh;
		while (RD(Ptr) != '\0')
		{
			c = RD(Ptr++);
			//api_putchar(c);
			str[i] = c;
			i++;
		}
		str[i] = '\0';
		//api_putstr0(str);
		for (i = 0; i < 29; i++)
		{
			WR(i + Lbf, '\0');
		}
		Ptr = Lbf;
		fh = api_fopen(str);
		if (fh != 0)
		{
			for ( ; ; )
			{
				if (api_fread(&c, 1, fh) == 0)
					break;
				if (c == 10)
				{
					crlf();
					WR(Ptr++, '\0');
					run();
				}
				else
				{
					putchr(c);
					WR(Ptr++, c);
				}
			}
		}
	}
	else
	{
		expr();//Val
		if (Vc == 's')
		{

		}
		else if (Vc == 'o')
		{

		}
		else if (Vc == 'p')
		{

		}
		else if (Vc == 'r')
		{

		}
		else if (Vc == 't')
		{

		}
		else if (Vc == '?')
		{
			putint(Val);
			putchr(' ');
		}
		else
		{
			WR(Adr, Val);
		}
	}
}

```

以上。
最安のインターネット回線を手に入れる方法

昨日も実家に帰った折に、前回の続きを取り組んでいた。

https://qiita.com/EasyCording/items/36a078c92adfc75e0c52

# 要点
　今日の話について

```plantuml

@startmindmap
* 格安でインターネット回線を構築する
** 見守り電球(ハローライト)
***_ LTE回線を利用
***_ 大容量データ通信には不向き
** 格安SIM
*** 楽天モバイル
**** 使い放題プラン
**** たくさんのデータ使用が可能
*** デザリング自動化が課題
**** MacroDroidアプリ
***** トリガー: 電源接続、条件: USB接続
***** アクション: テザリングを有効化
*** 結果
**** 格安な料金で自宅インターネット環境を構築
**** 作業簡単で自動化に成功
@endmindmap
```


# インターネット回線

うちの行政区で年寄り向けの見守り電球が無料配布されているらしく、兄から連絡を受けた。

[ハローライトのホームページ](https://hello.inc/hellolight/?gad_source=1&gclid=Cj0KCQjwzZmwBhD8ARIsAH4v1gVVpG3IT6mOscK4VsNtdGNGJHssPrF8bO6VDNQby3V8N31ZcvyNvCgaAiX9EALw_wcB)
> ハローライトは、LTE回線を利用して通信します。具体的には、LPWAと呼ばれる低電力広域ネットワーク技術を用いて、省電力で長距離通信を実現しています。

残念ながらこれはインターネット回線とは違うみたい
>LPWAデバイスは、低消費電力で長距離通信を実現するため、デザリングのような大容量データ通信には向いていません。

ということで、やはり本題に戻る

# 楽天モバイルが最強

何といっても使い放題である。

ちなみに自分の場合、横浜での単身赴任手で固定回線代わりに使っている。

| 月                   |   データ使用量合計 (GB) |   平均データ使用量 (GB/日) |
|:---------------------|------------------------:|-------------|
| 2024年1月            |                  11.08 |                       0.36 |
| 2024年2月            |                 108.54 |                       3.87 |
| 2024年3月 (29日まで) |                 114.29 |                       3.98 |

この規模では他に追従できるプランは無い。

# 課題

やはり一番面倒なのが、デザリングの切り替えである。
>テザリングをUSB充電器接続時に自動有効化したいんですね！

Androidスマホの場合、以下の方法で自動化できます。

> アプリ「MacroDroid」を使う

* MacroDroidアプリをインストール
* 新しいマクロを作成
* トリガーを「電源接続」に設定
* アクションを「テザリングを有効にする」に設定
* 条件を「USB接続」に設定

# 結果

やってみたら、意外に簡単に出来てしまった・・・

これまでＧＰＳでエリアにはいったらＯＮ／ＯＦＦしていたが、これなら確実に充電中はモバイルルーターに切り替わる格安なインターネット回線を入手することが出来た。

# まとめ

格安SIMで自宅のネット環境を構築したい方は、ぜひ参考にしてみてください。

> 筆者は、自宅のネット環境を構築するために、どのような格安SIMプランを選びましたか？

現在は、楽天モバイルの使い放題プランを利用しています。

> 筆者は、MacroDroidを使ってテザリングを自動化する以外に、どのような工夫をしていますか？

特にありません。
M5stack StampS3を買ったのでシリアルで遊ぶ。(ESP32-S3)


目的
シリアルで遊ぶ

参考

https://note.com/rcat999/n/n3ba5c980d28a


結果(内蔵シリアルが動いたのでとりあえず成功)

![o_coq002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e9b208ab-790e-ea7b-1456-6384ccf87778.jpeg)


サンプルをそのまま

```c++

void setup() {
  Serial.begin(115200);
  Serial1.begin(115200, SERIAL_8N1, 44, 43);
}

void loop() {
  Serial.println("Serial0");
  Serial1.println("Serial1");
  delay(1000);
}

```
【Nuxt3】ESLintで自動テストをGitHub上で行う

# はじめに

こんにちは、エンジニアのkeitaMaxです。

今回はESLintを使用して自動テストをGitHubActionsを使用してPullRequestを出したときに、GitHub上で行えるようにしたいと思います。


前回の記事

https://qiita.com/keitaMax/items/11eea560a4dc91b0617a


# ESLintをローカルでたたく

すでに以下コマンドをするとESLintが走るように前回作成しました。

```
npm run lint
```

`package.json`の`scripts`は以下のように記載しています。

```json:package.json 
    "lint": "eslint --ext \".js,.vue,.ts,.cjs\" --ignore-path .gitignore . --fix",
```

これをGitHubActionsでGitにPullRequestを出したときに実行できるようにしたいと思います。

# GitHubActionsを作成

ルートディレクトリに`.github/workflows`フォルダを作成し、その下に`eslint.yml`ファイルを作成します。

```yml:eslint.yml
name: ESLint

on: [pull_request]

jobs:
  eslint:
    name: eslint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: npm install
        run: npm install
      - name: eslint review
        uses: reviewdog/action-eslint@v1
        with:
          github_token: ${{ secrets.github_token }}
          reporter: github-pr-review
          eslint_flags: './**/*.{vue,ts,js}'
          fail_on_error: 'true'
      - name: eslint
        run: npm run lint

```

GitHubActionsなどについては以下の記事でやっているので参考にしてください。

https://qiita.com/keitaMax/items/2a609a0e310375a2debd

# GitHubにPushしてPullRequestを出してみる

GitHubにPushしてプルリクを作成します。

すると、プルリクの画面が以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/544d6b11-f05a-cca9-51c1-95be34c98e78.png)

ESLintが走っていて、問題ないと以下のように緑のチェックが出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/abac0179-8c3b-e17d-b63d-9f989605b9c5.png)

# 失敗させてみる

次にしっかりと動いていることを確認するために、失敗させてみます。

`index.vue`に使用しない`xxx`という変数を用意してPushしてみようと思います。

```vue:index.vue
<script setup lang="ts">
  import { useCounter } from './hooks';

  const { counter, inc, dec } = useCounter();
  const xxx = '';
</script>

<template>
  <div class="bg-red-600">
    カウンター: {{ counter }}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </div>
</template>
```


これをPushするとGitHub上で以下のようにエラーになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/9abc1861-1761-8aed-d0bb-8e193bff7135.png)

これでGitHubActionsで正しく動いていることが確認できました。


# おわりに

GitHubActionsを使用すると簡単に自動テストをすることができるので今後積極的に使用したいです。

もっといいやり方があるよや、間違っているよというような指摘があればぜひ教えていただけると助かります。

最後までお読みいただきありがとうございました。


# 参考

https://qiita.com/keitaMax/items/2a609a0e310375a2debd
Ion Pro RT、Flare RT の取り扱い方法をまとめてみた

# Ion Pro RT

## 電源の ON、OFF
ON → 電源ボタンを2回素早く押す
OFF → ライトがOFFになるまで電源ボタンを長押しする

## ライトモード切替
電源ボタンを1回押すと次のモードへ切り替わる。

## ステータスLEDの見方
### ライト点灯時
|電源ボタン/ステータスLEDカラー|バッテリー残量| 
|-|-|
|緑の点灯|25% ~100%|
|赤の点灯|5% ~ 25%|
|赤の点滅|5% 以下|

### ライト充電時
|電源ボタン/ステータスLEDカラー|充電容量|
|-|-|
|緑の点灯|100%|
|緑の点滅|75% ~ 99%|
|黄色の点滅|25% ~ 75%|
|赤の点滅|25% 以下|

### ワイヤレス接続時
|電源ボタン/ステータスLEDカラー|状態|
|-|-|
|青色に点滅|ワイヤレス接続可動状態|

## ロックモード
ライトが点灯している時に電源ボタンを長押しし1回点滅後、電源ボタンを離す。

→点灯していた時のライトモードに固定されます

## リセット
ライトが点灯している時に電源ボタンを長押しし2回点滅後、電源ボタンを離す。

→設定がリセットされる

## ワイヤレス機能無効
ライトが消灯している時に電源ボタンを長押しし2回点滅後、電源ボタンを離す。

→ワイヤレス機能が無効になる

# Flare RT
## 電源の ON、OFF
ON → 電源ボタンを1回押す
OFF → ライトがOFFになるまで電源ボタンを長押しする

## ライトモード切替
電源ボタンを1回押すと次のモードへ切り替わる。

## ステータスLEDの見方
### ライト点灯時
|電源ボタン/ステータスLEDカラー|バッテリー残量| 
|-|-|
|緑の点灯|25% ~100%|
|赤の点灯|5% ~ 25%|
|赤の点滅|5% 以下|

### ライト充電時
|電源ボタン/ステータスLEDカラー|充電容量|
|-|-|
|緑の点灯|99% ~ 100%|
|緑の点滅|75% ~ 99%|
|赤の点滅|0% ~ 75%|

### ワイヤレス接続時
|電源ボタン/ステータスLEDカラー|状態|
|-|-|
|青色に点滅|ワイヤレス接続可動状態|

## ロックモード
ライトが点灯している時に電源ボタンを長押しし1回点灯後、電源ボタンを離す。

→点灯していた時のライトモードに固定されます

## 自動調光機能
ライトが消灯している時に電源ボタンを長押しし1回点灯後、電源ボタンを離す。

→デイフラッシュ、オールデイフラッシュ、デイステディモード時に自動調光される

## リセット
ライトが点灯している時に電源ボタンを長押しし2回点灯後、電源ボタンを離す。

→設定がリセットされる

## ワイヤレス機能無効
ライトが消灯している時に電源ボタンを長押しし2回点滅後、電源ボタンを離す。

→ワイヤレス機能が無効になる
How to Use Google My Business: A Step-by-Step Guide

Google My Business (GMB) is a powerful tool that allows businesses to manage their online presence across Google, including Search and Maps. It's an essential tool for local businesses looking to attract more customers and improve their visibility online. In this guide, we'll walk you through the steps to set up and optimize your Google My Business profile.
Sign Up or Log In:
Go to the Google My Business website and sign in with your Google account. If you don't have an account, you'll need to create one.
Add Your Business:
Click on the "Manage now" button and enter your business name. If your business doesn't appear in the suggestions, click on "Add your business to Google."
Enter Your Business Information:
Fill in your business category, address, phone number, and website. Make sure to enter accurate information as this will help customers find you.
Verify Your Business:
Google will send you a verification code by mail or text message to the address or phone number you provided. Enter the code to verify your business.
Optimize Your Profile:
Add photos of your business, products, and services. Include a logo and cover photo to make your profile stand out.
Write a compelling business description that includes relevant keywords related to your business.
Add your business hours, services, and any other relevant information that customers might find useful.
Manage Your Reviews:
Monitor and respond to customer reviews. Thank customers for positive reviews and address any negative feedback promptly and professionally.
Use Insights to Track Performance:
Use the Insights tab to track how customers are interacting with your business listing. Monitor how many people are viewing your profile, calling you, or visiting your website.
Post Updates and Offers:
Keep your customers informed about your latest news, events, and offers by posting updates on your profile. This can help drive engagement and attract more customers.
Respond to Messages:
Enable messaging so that customers can reach you directly with questions or inquiries. Respond promptly to messages to provide excellent customer service.
Keep Your Information Up to Date:
Regularly update your business information, including your hours of operation, services, and contact information, to ensure that customers have the most accurate information.
In conclusion, Google My Business is a valuable tool for businesses looking to enhance their online presence and attract more customers. By following these steps, you can create and optimize your GMB profile to improve your visibility on Google and connect with more customers in your area.
What Are Faucets and How Do They Work?


Faucets are an essential part of our daily lives, providing us with access to clean water for various purposes, such as washing hands, dishes, and food. Understanding how faucets work and the different types available can help you choose the right one for your needs.
Types of Faucets
There are several types of faucets, each with its unique design and mechanism:
Compression Faucets: These are the most traditional type of faucet, consisting of separate hot and cold handles that are turned to control water flow. They work by compressing a rubber washer against a valve seat to stop the flow of water.
Ball Faucets: Found in many kitchens, ball faucets have a single handle that controls both temperature and flow. They use a ball bearing to regulate the flow of water and are known for their durability.
Cartridge Faucets: Similar to ball faucets, cartridge faucets have a single handle that controls temperature and flow. However, they use a cartridge instead of a ball bearing to control the water flow.
Disk Faucets: These modern faucets use a pair of ceramic disks to control the flow of water. They are durable and require minimal maintenance.
Hands-Free Faucets: Also known as sensor faucets, these faucets use motion sensors to detect when hands are placed under the faucet, triggering the flow of water. They are often found in public restrooms for hygiene purposes.
How Do Faucets Work?
The basic principle behind all faucets is the same: turning a handle or lever controls the flow of water. When you turn the handle, it either lifts a valve or rotates a disk or ball inside the faucet body. This action opens or closes the pathway for water to flow through the faucet.
Faucets are connected to a water supply line, which provides water under pressure. When the faucet is turned on, the pressure forces water through the faucet and out of the spout. The temperature of the water is controlled by mixing hot and cold water using the faucet's handles or lever.
Maintenance and Care
To ensure your faucets work properly and last long, regular maintenance is essential. Here are some tips:
Clean your faucet regularly to prevent buildup of mineral deposits and soap scum.
Check for leaks and repair them promptly to prevent water waste.
Replace worn-out parts, such as washers or cartridges, to maintain proper functioning.
In conclusion, faucets are an integral part of our daily lives, providing us with access to clean water for various purposes. Understanding the different types of faucets and how they work can help you choose the right one for your needs and ensure it functions properly for years to come.
storybook-addon-a11yを日本語表示にする

``` ts
// .storybook\preview.ts
import type { Preview } from "@storybook/react";
// NOTE:
// axe-coreはstorybook-addon-a11yをインストールした時に一緒にインストールされていました
// 別途で yarn add axe-core を実行する必要はなかったです
import AXE_LOCALE_JA from "axe-core/locales/ja.json";

const preview: Preview = {
  parameters: {
    a11y: {
      config: {
        locale: AXE_LOCALE_JA,
      },
    },
  },
};

export default preview;
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501545/763c9e05-2843-6b14-4e0b-22bb2b10381d.png)
OOC 2024に参加してみた

初めてOOCに行ったので、感想と情報まとめを残しておこうと思います。


## 行ってみようと思った理由

普段Javaを使っているのですが、「オブジェクト指向を意識して設計していますか？」と言われると、う〜〜〜ん、まぁ、関連するものをクラスにはまとめてますけど……みたいな曖昧な感じで仕事をしています。

一応、SOLID原則とかデザインパターンとか一通り学んでみたものの、これをどうしたらいいんだろ……みたいな持て余し気味の状態で、設計について知識も経験もないし、皆さんの叡智を授かりに行こう……みたいな気持ちでゆるっと参加しました。



## 聴いたカンファレンス 感想

### オブジェクト指向のリ・オリエンテーション　～歴史を振り返り、AI時代に向きなおる～

大学でしかお目にかからない固定の長机とスライドする椅子に少し懐かしい気持ちになり、またオブジェクト指向の歴史を振り返るという内容も相まって完全に大学の授業を受けている感覚を取り戻しました。笑
（会場が大学の教室でした）

OOP関連の概念が頭の中でとっ散らかっており、段階論にまとめて説明してもらえてかなりスッキリしました。
ちなみに、残念ながら私はまだ段階3なので、段階4を腹落ちさせて実践していきたいです。

段階論はこちらのスライド。メモしか取っていなかったのでツイートお借りします。

https://x.com/tark_ann/status/1771727468036046853?s=20


### 変更に強いオブジェクト指向設計

<script defer class="speakerdeck-embed" data-id="aea945d947a444098a8dcb06cf09a43b" data-ratio="1.7772511848341233" src="//speakerdeck.com/assets/embed.js"></script>

この間、超肥大したメソッドを書いてレビューで指摘をもらったところだったので、神クラス化したクラスの切り分け話は身につまされました。
「10行以上のメソッドは見通しが悪いから切り分けろ」みたいな話もあったりしますが、この感覚は単一責任の原則の意識にもつながるんだなと感じました。

密結合の話に関しても自分の書いたコードを思い出して反省していました。
今までフレームワーク依存になってしまっていることの悪影響をあまり意識したことがなかったのですが、実際のリファクタ例を通してフレームワーク依存になっているコードたちが未来で抱えるだろう課題を理解できたのは良かったです。

今後は普段から意識してインターフェースを設計してみたいと思います。
（が、バッチ処理とかコードベースが大きくならなさそうな場合はいきなりやらなくてもいいのかも……という気も）


### せっかくモデル図描くのなら、嬉しいことが多い方がいいよね！

応用情報の勉強とかしているとモデル図の話題出てくるけど、実際あんまり描かないよな〜、どう活用してるんだろ、と思ったので参加。

ざっくり結論としては、先人たちが作り上げてきたモデルでほとんどの開発が賄えてしまっているので、現時点でわざわざゼロからモデル図を書く状況は少なそう。でも、モデル化して考える能力自体は大切。

冒頭に話されていた日本あんこ協会の話もちょっと気になった。


### 設計の知識と技能で駆動するソフトウェア開発

<script defer class="speakerdeck-embed" data-id="8b66e8877ddd412cb83c610b5652ebcf" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>

設計が解決したい課題というのは、コード自身が不必要に複雑になると変更しづらくなり、本質的な課題に対応できなくなってしまうという点なのだと理解するのは大事だなと感じた。
上記の課題を解決するために、設計で交換（変更）容易性を高める工夫というのが大前提にあるわけですね。

どうやって交換容易性を高めるのか、というのはいろんなアプローチがあると。
この辺りも意識してコードをかけるようになりたいです。


## 全体を通しての感想

設計で解消したい課題の感覚が掴めた感じがあり、大変楽しかったです。

気になっていたものの、のんびりお昼を食べていたら聞き逃したものなどもあり、またスライドなどが出揃ってきたらチェックしたいと思っています。

また次のOOCも参加したいです。
一番使いやすいエディターはどれだ！？

# はじめに
こんばんは、おがねそんです。深夜テンションでどのテキストエディターが使いやすいか私の<font color=green>独断と偏見</font>で決めたいと思います。戦争になりそうなので注意してください。

# エントリーナンバー１. VSCode
　最初はやっぱりこれ。筆者もプログラミング初学の時にこれを使ってプログラムを書いていたのだが、作業ディレクトリ（ワークスペース）を変えたいなと思った時にVSCodeでは**作業ディレクトリの中だけしか見ることができない**こともあってディレクトリを自由に移動できない点が不満点としてあり、筆者としては気に入らない。

# エントリーナンバー２. nano
　VSCodeでプログラミングを初めてから１年ほど経ち、VSCodeでの開発に慣れて徐々に上記のような不満点がストレスに感じていた頃、友人からCLIで開発するテキストエディターである**nano**を薦められ ~~（ゴリ押しされ）~~ 、使ってみたところ、**立ち上がりは早いし、軽い**のでとても開発しやすいと感じた。
 
 CLIのテキストエディターはエディターを立ち上げたり編集を保存、コピー&ペーストしたりするのにコマンドを覚えなくてはいけないのが難点だが、nanoの場合は下部にコマンドの一覧が載っている。なんてCLI初心者に嬉しいエディターなのだろう！

# エントリーナンバー３. Vim
　nanoを使うようになってから半年ほどたったある日、**Ubuntu18.04**で開発しなくてはいけない時がやってきた。いつものようにnanoを開いたらいつもと違う表示。

実はnanoを使いやすいエディターたらしめているのは`~/.nanorc`に書いた設定のおかげなのである。しかし、Ubuntu18.04ではその設定のほとんどが反映されないのである。

　このようなLinuxディストリビューションに左右されず、使いやすいテキストエディターがこの**Vim**である。

Vimは独特なキーバインド操作（j、kキーで上下の移動など）で最初は苦労したが、操作を覚えていくと編集がしやすい操作をできるようになるのでこれにハマってしまった。

　また、Vimは設定も凝ることができ、プラグインを導入したりしてさらに自分好みの究極のエディターを作ることも可能である。

 # エントリーナンバー４. NeoVim
 後輩の方が使っていると言っていたのでVimから乗り換えてしまった。カラースキームが自分の好みではないので、今後設定で変えていくつもり。Vimよりもプラグインが充実していそうで面白い。

 自分好みのエディターを作りたい人はおすすめ

# エントリーナンバー5. Emacs
先輩がテキストエディターといえばEmacsだと言っていたのを思い出し、インストールしてみた。**黒魔術**という人もいるくらいのエディターらしい。これからすごさを体感していきたい。

# 総評
筆者はまだプログラミング歴が短いのでこれというエディターへのこだわりは無いのだが、強いていうならCLIエディターがLinuxユーザにとっては使いやすいのではないだろうか。作業ディレクトリまで移動してコマンドを叩けばエディターが開くので手をベストポジションからあまり移動させなくて済むので快適になるからだ。

# おわりに
結論としてはやはり一番は**nano**ですね〜。０から書き始めるにはそこまでコマンドはいらないので。

最後まで見てくださってありがとうございました！
【GitHub】タグの活用

## タグとは
* コミットに対して付けることができる
* ２種類ある
    * 種類
        * 注釈付き（annotated）
        * 軽量（lightwieght）
    * 違い
        * 【注釈付き】
            * タグ名、注釈、署名を付与できる
        * 【軽量版】
            * タグ名のみ付与できる

## タグの作成
* タグ名だけのコマンドを実行した場合、HEADのコミットに対してタグ付けされる
### 注釈付きタグ
* 署名は自動で付与される
* コマンド
    ```
    git tag -a [タグ名] -m "[メッセージ]"

    git tag -a 20240301_01 -m "Ver01"
    ```
* コマンド解説
    * -aオプション
        * 注釈付きタグを作成する（annotatedの略）
    * -mオプション
        * commitと同じようにエディタの立ち上げを省略してメッセージを入力できる

### 軽量版タグ
* 名前（タグ名）しかつけられない
* コマンド
    ```
    git tag [タグ名]
    git tag -a 20240301_01 -m "Ver01"
    ```

### 後からタグ付け
* 注釈付き、軽量版どちらでも可能
* コマンド
    ```
    #後からタグ付けする場合
    git tag [タグ名] [コミット名]
    git tag 202403 0x0xxx0
    ```


## タグの一覧を表示
* コマンド
    ```
    git tag
    
    # 絞り込み表示(例：202403が含まれる)
    git tag -l "202403"
     20240301
     20240302
     .
     .
     .
    ```
* アルファベット順で表示される

## タグのデータを表示する
* コマンド
    ```
    git show [タグ名]
    git show 20240301
    ```
* 上記コマンドで、タグ名に関連付けられたコミットを表示する

## タグをリモートに送信する
* git pushしたときにタグ情報は送信されない
* 別途コマンドでリモートにタグ情報を送信する必要がある
    ```
    git push [リモート名] [タグ名]
    git push origin 20240301

    # タグの一斉送信
    git push origin --tags
    ```
* 上記コマンド実行後にGitHubのリポジトリ＞releases>tagsを選択することで、プッシュしたタグが反映されている
【Git】リベースの理解を深める

### リベースとは
* 履歴を統合して整える

#### 基本的なコマンド
```
git rebase <ブランチ名>
```
* ブランチの基点となるコミットを別のコミットに変更する

#### マージとの違い
###### 例）mainブランチの内容でdevブランチをマージする場合
* devブランチにチェックアウトしてから、git merge origin/mainを実行してマージする
* mainブランチの変更点と、devブランチの変更点を比較して両方の変更を反映した内容がdevブランチ側にコミットされる（競合時は解消対応が必要）

###### 例）mainブランチの内容でdevブランチをリベースする場合
* devブランチにチェックアウトしてから、git rebase mainを実行する
* mainブランチの最新のコミットが親コミットとして、devブランチの基点が変更される
* つまり、devブランチがmainブランチから枝分かれしたことをなかったことにして、現在のmainブランチの最新のコミット内容から、devブランチで変更を加えたことになるので、mainブランチの変更履歴が一直線になるのです
* リベースというのは、基点となるコミットをmainブランチの最新コミットから変更を加えたことにするのです
* devブランチで今までコミットしてきた内容は全てなかったことにするのではなく、mainブランチの最新の内容から、devブランチで行ったコミット内容の順番に変更していったことにしている

##### ★コンフリクトの解消
###### マージ
* 各ブランチの最新のコミットを１つにマージするため、コンフリクトの解消は１回のみとなる
###### リベース
* 枝分かれしたコミットを順番に、リベース先ブランチの最新コミットにマージしていくため、１度コンフリクトが発生して解消しても、２つのコミットをマージするときに再びコンフリクトの解消が必要になることがある
* 最新のコミット同士を

##### ★使い分ける判断基準
* プッシュしていないローカルの変更にはリベース
* プッシュ後は必ずマージ
* コンフリクトの可能性がある場合はマージ
###### マージ
* 【メリット】コンフリクトの解決が容易（マージコミット時の１回のみ）
* 【メリット】作業の履歴を細かく残せる
* 【デメリット】マージコミットが増えるので、履歴が複雑化しやすい
###### リベース
* 【メリット】履歴が単純化できる（きれいにできる）
* 【デメリット】コンフリクトの解決が面倒

##### 一連の流れ
1. mainブランチのコミット１がある
1. mainブランチのコミット１を基点としてdevブランチを作成する
1. mainブランチで変更を行いコミット２を作成する
1. devブランチで変更を行いコミット３を作成する
1. この時点でmainブランチからdevブランチは分岐している
【マージの場合】
1. 本来ならば、コミット２（main）の変更をコミット３にマージして、コミット４（dev）がマージコミットとして作成する
1. そして、コミット２（main）にコミット４（dev）をマージさせる（もしくはプルリクエスト）
【リベースの場合】
1. rebaseコマンドを実行して、mainブランチのコミット２をdevブランチの親コミットに変更する
1. つまり、devブランチの親コミットをコミット１からコミット２に変更している
1. この状態でmainブランチにチェックアウトしてから、git merge origin/devを実行すると、fast-forwardコミットになるので、マージコミットは生まれません

##### ★プルにはリベース型がある
* 通常のpullコマンドはマージ型である
* 以下のコマンドの場合はリベース型でプルできる
    ```
    git pull --rebase <リモート名> <ブランチ名>
    git pull --rebase origin main
    ```
* リベース型の場合でも、フェッチの機能は同じである
* マージコミットが残らないので、ワークツリーにGitHubの内容をそのまま持ってきたいときは、リベース型を使う
* プルを常時--rebase（リベース型）に設定することもできる

##### してはいけないこと
###### ①GitHubにプッシュしたコミットはリベースしてはいけない
* 【前提】リベースによって枝分かれ以降のコミットは最新コミットを除きすべて削除される
* 【前提】リベースはあくまでも自身のローカル内で履歴を統一しているだけで、GitHub側ではリベースしたことは把握していない
*  【制限】すでにGitHubにプッシュ済みのコミットがある場合、枝分かれは確定させることになるので、後からリベースをしてコミットを削除するようなことはできない
*  【理由】もしローカル側でリベースをしてしまった場合、GitHubとコミットの不整合が起こり、pushできなくなる
*  【補足】git push -fは絶対にやってはいけない。強制的にpushすることになるが、Gitの履歴が壊れてしまう


##### 自分なりの理解
* 歴史改変系の小説でありがちだが、平行世界というのがあって、過去の分岐点に戻って違う選択を行うと、そこで世界が分岐する
* 分岐した別の世界で行った行動は本来は元の世界には影響がないが、不思議な力が働いて、わかれた平行世界が１つの世界に統合される
* その際に取りこんだ世界には別の世界の出来事が、あたかも順当にこの世界で発生したようになる。誰も気づかない
* 買い物でリンゴを買って帰ってから、バナナを買うのを買い忘れていた→過去に戻ってバナナも買う→バナナを買った世界の出来事が元の世界に統合されて、元の世界の事象や記憶が改変される
* つまり言うと、本来別世界に存在していた世界をなかったことにしてしまうということですね
Microsoft Learnの日本語訳を探す方法

# はじめに
早く花粉いなくなってほしいです。。。涙が。。。
さて、Microsoft 製品を触っていると必ず目にするページがあります。それは `Microsoft Learn` ですね。

https://learn.microsoft.com/

検索していると英語の記事にあたり、日本語ないかなぁと思うこと多いと思います。
その方法について解説です。(もちろん英語にトライしています！が、日本語でも読めると補助になります)

# 1. Home 画面から選択する
↑のリンクから Home 画面に遷移すると、フッター左から言語選択できるページに遷移できます。そこで日本語を選択すると、日本語ページになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659255/bd97fd8b-41df-524e-0a94-81bf6272a31f.png)

https://learn.microsoft.com/ja-jp/locale/?target=https%3A%2F%2Flearn.microsoft.com%2Fja-jp%2F

# 2. URL を書き換える

1 の方法で、画面遷移は問題ないと思います。しかし、URL を共有された場合などはどうでしょう。例えば以下にアクセスしてみると、英語になると思います。

* 英語の URL

https://learn.microsoft.com/en-us/MicrosoftTeams/remote-learning-edu?tabs=accounts

これは、サブディレクトリが `en-us` になっているから。
ここを `ja-jp` に変更することで、日本語ページになります。
(いつも、`jp-ja` とどちらか分からなくなります。どなたか良い覚え方ご存じの方教えてください:cry:)

* 置換した日本語用 URL

https://learn.microsoft.com/ja-jp/MicrosoftTeams/remote-learning-edu?tabs=accounts

:::note warn
日本語訳が無いものもあります
:::

:::note warn
英語と日本語のページに差異がある場合は恐らく英語が正しい(英語が先に更新される)
:::



# 3. 番外編：英語に簡単に戻す方法
日本語にした後、翻訳が下手で原文に戻りたい時もたまにあります。再度 URL 変更するのは面倒です。そんな時はページ タイトルの右上にある地球儀マークを押すと、英語で読めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659255/0fb58a57-1447-c880-0c84-4b8e0a78e711.png)

# おわりに
Microsoft Learn を題材にお伝えしましたが、URL の変更は色々なサイトで見受けられます。en-us を URL 内に見かけたら、変更してみる価値はありです！


最後まで見ていただき、ありがとうございます。
少しでも読んでいただいた方の役に立てたら幸いです。
よかったらチャンネル登録（フォロー）、高評価（いいね:heart_decoration:）、コメント:pen_fountain:などなど何でもお願いします:pray:

週一で投稿目指しています。もし何かリアクションをしてくれるとやる気が出るので、次週は投稿することを約束します。今のところ約束は履行されています（投稿なかった週はリアクションが前週になかったのだからと正当化して休んでます:grimacing:）
Windows上でのUltraVNC に関するメモ

主にクライアント回り

# インストール
今はこれでよくなった

> winget install UltraVNC

# 接続設定を保存したい

UltraVNC Viewerで対象に接続後、アプリの右クリックメニューで「Save connection info as .. 」で .vnc ファイルを保存する

* この操作でパスワードも一緒に保存されます（暗号化はされる）

# コマンドラインで vnc設定ファイルをロードして接続したい
以下のコマンドになる。

> vncviewer.exe -config "hogehost.vnc"

# 関連付けで .vnc ファイルを開きたい

レジストリを操作し、上記の -config 引数を追加してやるといい

* \\HKEY_CLASSES_ROOT\Applications\vncviewer.exe\shell\open\command\ 以下のキー

![Clipboard_03-30-2024_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666068/121ff15b-9bd3-11c5-141c-f3011badfb9e.png)


# 接続先でIMEがONできない

英語キーボード問題。Ctrl+SPACE でIMEをON/Offするとよい

# 接続がタイムアウトする

Windows11で、無人スリープタイムアウトを無効化するといい
* https://zenn.dev/sion_pn/articles/c8cc446f518ef1

# サービスの再起動

>  powershell
>  Restart-Service -DisplayName uvnc_service
SQLのLIKE句でワイルドカードを文字列として検索をする

SQLでLIKE句の検索文字として「30%」などワイルドカード文字が含まれてる場合、%が検索文字列として認識されなかったため、文字列として検索するためにはどうしたらよいか調べた結果を備忘録として書きたいと思います。

## 参考
【参考URL】LIKE (Transact-SQL)
https://learn.microsoft.com/ja-jp/sql/t-sql/language-elements/like-transact-sql?view=sql-server-ver16

【SQL】LIKE句
https://qiita.com/chihiro/items/46da8571d4cf37d3123c

# 目次
　[ワイルドカード](#ワイルドカード)
　[エスケープ処理](#エスケープ処理)

## ワイルドカード
パターンマッチングに使用される特殊な文字または文字列のこと

|文字|概要|
|:---|:---|
|%(パーセント記号)|0 個以上の文字で構成される任意の文字列|
|_(アンダースコア)|任意の 1 文字|
|[ ]|\[](かっこ)のなかで指定した任意の１文字|
|[^ ]|\[](かっこ)のなかで指定した以外の任意の１文字|


## エスケープ処理
ワイルドカードに使われる文字を検索文字として変換する処理
[\\(バックスラッシュ)]が使われる

例えば、以下のLIKE句で検索すると「30%」の前方一致として検索することができる
LIKE '30\\%%'

また、ESCAPE句を使うことで「\\」以外にもエスケース処理の文字として指定することができる
LIKE '30!%%' ESCAPE '!'

ワイルドカードとの組み合わせ
LIKE '30[%]%'
VSCode拡張機能

新しいMacを購入した時
VSCode自分が入れておきたい拡張機能
どの言語で開発するにしても入れておきたい拡張機能に絞っている

## Japanese Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
## Auto Rename Tage
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
## Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
## Docker
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker
## Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
## ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
## Git History
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
## htmltagwrap
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
## Zenkaku
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

## おわり
VSCodeを1からセットアップする際は下記記事も参考にしたい

https://qiita.com/mikan3rd/items/d41a8ca26523f950ea9d

https://qiita.com/TS1engineer/items/1b54f65ee87cb49582f5

https://zenn.dev/redheadchloe/scraps/cde1c88d0801bc
[SwiftUI] Listに付けたバッジを簡単に目立たせる方法

# はじめに
iOS17からListに対して使える`badgeProminence`について調べてみました。

# 環境
Xcode 15.2

# 内容
SwiftUIのリストに対して`.badge()`を使うことでバッジ付与することができます
これはiOS15以降で使えます

https://developer.apple.com/documentation/swiftui/view/badge(_:)-6k2u9

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/1e56f7d2-8fc4-3dbb-c02d-8c6837127eb3.png" width="300">

```swift
struct ListBadgeView: View {
    var body: some View {
        let numBadgeView = Text("\(777)")
            .monospacedDigit()
            .bold()

        let newBadgeView = Text("NEW")
            .bold()

        List {
            Text("HogeHoge")
                .badge(numBadgeView)
            Text("HogeHogeHoge")
                .badge(newBadgeView)
        }
    }
}
```

より簡単に実装する場合は、直接`.badge()`に文字列や数字を渡してしまうでも良さそうです

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/258c18e5-cfcb-285c-5c4d-91d704a0ae48.png" width="300">


```swift
struct ListBadgeView: View {
    var body: some View {
        List {
            Text("HogeHoge")
                .badge(777)
            Text("HogeHogeHoge")
                .badge("NEW")
        }
    }
}
```

## `badgeProminence`

iOS17以降では`.badgeProminence(.increased)`を実装することで簡単にバッジを目立たせることができます

https://developer.apple.com/documentation/swiftui/view/badgeprominence(_:)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631585/d7e95710-05df-2103-6f25-4618225e6591.png" width="300">


```diff_swift
struct ListBadgeView: View {
    var body: some View {
        List {
            Text("HogeHoge")
                .badge(777)
            Text("HogeHogeHoge")
                .badge("NEW")
        }
+       .badgeProminence(.increased)
    }
}
```

ちなみにバッジの強調具合は`BadgeProminence`として定義されています

- `static let standard: BadgeProminence`
- `static let increased: BadgeProminence`
- `static let decreased: BadgeProminence`

# おわりに
簡単にバッジを共有できて良さそうでした。機会があれば使ってみようと思います！