OmniAICreator/Qiita-1.07M huggingface dataset:
Power AutomateのShare Point OData Filter Query 対応表

## Power AutomateのShare Point OData Filter Query 対応表を作ってみました


SharePointのOData Filter Queryはとても便利なのですが
フィルタークエリのことについて説明するには結構大変…なので対応表を作成してみました。
![Automate_logo (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/00929905-14b7-d635-cfc2-dda00acf0cda.jpeg)
上記は複数の項目を取得するアクションなどでフィルタークエリと書かれている項目のことです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/ed1ea5df-c30c-16ad-3147-5ea61ee85595.png)

全てが記載されたサイトがなかったので、一通り調べてまとめて下記画像のように張っておきます。※クリックすると大きくなります
![Power AutomateのSharePointODataFilterQuery対応表_page-0001 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3111714/62799571-3798-2878-c35a-d226a8231784.jpeg)


シングルクォーテーションを忘れないようにお気をつけください～

追記:PDFverは自サイトができたら掲載しようと思います！
Flutterで作成した地震情報アプリ

## はじめに

この記事では、FlutterとDartを使って作った地震情報アプリについて語りたいと思います。最初の一歩として、初心者の私がどうして挑戦したのかなどを書いていきます。初投稿なのであんまりうまく書けないと思いますが最後まで読んでもらえると嬉しいです。
[apkはこちらからどうぞ](https://u.pcloud.link/publink/show?code=XZTv8X0ZEei9SYB9hImCpzL4eBKxjpoiWrHX)

## アプリの概要

このアプリは、日本気象協会の公開APIから地震情報を引っ張ってきます。それを使って、ユーザーはリアルタイムで地震の発生日時や場所、マグニチュードなどを確認できます。

## 技術的な詳細

FlutterとDartを使ってこのアプリを開発しました。FlutterはGoogleの開発したUIフレームワークで、色んなプラットフォームで動くアプリが作れるんですよ。ほとんどphindとcopilotに実装してもらいました。

アプリの中身はこんな感じです：

- **地震情報の取得**：日本気象協会のAPIからJSONデータを取得して、Dartの魔法を使って`Earthquake`クラスに変換します。

- **日付の扱い**：地震の日時はISO形式で来るんですが、これをユーザーが分かりやすい形式に変換します。そのために、Dartの`DateFormat`クラスを使いました。

- **UIの見た目**：取得した地震情報は、Flutterの`ListView.builder`を使ってリストとして表示されます。各リストには、地震の日時、場所、マグニチュードが表示されます。


## アプリ制作の動機

なぜこのアプリを作ったのかなんですけど正直な話、2024年1月1日に石川県を中心とした大きな地震があって新年早々怖くなって。その時に「もっと手軽に地震情報を知りたいな」と思ったので、このアプリを作ってみることにしたんです。

災害時って、情報が大事だと思うんですよ。早く正確な情報を手に入れることが安全に繋がるし、みんなの役に立つんじゃないかなって思ってます。

https://qiita.com/squid-cat/items/e6bb159a3c2b30e3405f

この記事を読んでなにか作ってデプロイしたいと思ってたので作りました。



## 最後に

このアプリは、初心者が挑戦する場として、そして地震に関心を持つ人々に有益な情報を提供するツールとして作りました。一緒に開発してくれる仲間がいたら、より魅力的で使いやすいアプリ(webサイト)にしていけるかもしれません。もし興味を持ってくれたなら、このアプリのGitHubリポジトリも公開しています！[GitHub](https://github.com/linkalls/earthquake) からコードをチェックしてみてください。
また、このアプリは[地震.net](https://地震.net) というウェブサイトでも公開されています。
ウェブサイトでの情報をさらに詳しく知りたい方は、ぜひそちらも訪れてみてください。
開発に興味がある方は、ぜひadmin@linkall.ukに連絡してみてください！
最近ダウンロードしたファイルをlsで見つける

## 背景

最近ダウンロードしたフォルダを開きたいけどフォルダ名を覚えていなかった。

lsコマンドで確認しようとしたが、並び順はデフォルトで名前順になっているから探せない。

時間順にしたらわかるのにと思ったので調べてみた。

## 答え

`-t` 時間順（time）

`-r` 降順（reverse）

```zsh
ls -tr
```
【備忘録】本番環境での実行はGunicornを使うらしい。

# はじめに

仮想マシン（GCE）でFlaskアプリを実行するとき…、
な～んにも勉強していなかったので、以下のように実行していました。
```
python3 main.py
```
ですが、、本番環境では以下のように実行したほうがいいんですって。
```
gunicorn -w 4 main:app
```
その理由と、使い方だけ最低限まとめます。

# Gunicornを本番環境で使う理由
<b>ずばり、「ワーカープロセスを設定して、処理能力を向上させる」。</b>

ワーカープロセスの設定"ってのは、
「アクセスした人が入る部屋をいくつ設けますか」ってこと。
仮に"4"とした場合、4つの部屋が作られて、訪問者はその部屋のどこかに入る。

要は、訪問者の処理待ちを緩和できるんですね。

※：ワーカープロセスの設定は、マシンの性能に合わせて調整すべし。

# Gunicornの使い方
pipで簡単にインストールできます。

```
pip install gunicorn
```
そしたらあとはmain.py実行時に使うだけ
```
gunicorn -w 4 main:app
```
app.pyの場合は
```
gunicorn -w 4 app:app
```
でOK。

"4"というのはワーカープロセスの設定をしています。
この数値を変えることで、部屋の個数を設定できます。

デフォルトはポート番号8000で実行されるので、
nginx側のリバースプロキシを、8000で設定してあげればOK。

# おわりに
本番環境でアプリが動くことはうれしい。
【Laravel Sail】ubuntuでsail upコマンドが実行できない場合

## きっかけ
Laravel Sailで`sail up -d`というコマンドを実行すると、以下のようなエラーが出る。
```
docker is not running
```

## 対処法
**Windows**の場合、先に以下のコマンドを実行する。
```
sudo chmod 666 /var/run/docker.sock
```
※ubuntuにログインした後に、上記コマンドを実行する。
【AWS】ソリューションアーキテクト アソシエイト に首の皮一枚残って合格した話

# はじめに
「SAAに合格した暁にはQiitaに合格体験記を投稿するぞ！」という謎のモチベーションのもと、何とか合格することができました。
巷にはSAAの合格体験記やら勉強法やらがQiitaだけでなく個人ブログやYouTubeなど色々な媒体に溢れかえっており、そちらを参照したほうがみなさんの糧となるはずです。
それでも当記事を投稿するのは、タイトルにあるとおり「首の皮一枚残って」という合格ラインギリギリで生き残ったことが、もしかしたらこれから受験する方々の背中を1mmでも押せるのでは、という思いがあることが理由です。
お世辞にもみなさんのお手本にはなることはありません。その点を踏まえて、もしよければ読み進めていただけると幸いです。

### 私のスペック

:::note info
- 受験時点で芸歴21年。年数は重ねてるものの全てアプリケーションエンジニアとしてやってきておりインフラ系は全く経験なし。
    - Java, C# のアプリケーション開発経験を持ってる。DB は Oracle, PostgreSQL あたり。自称バッチ処理大好きおじさん。
- 過去の業務の中でAWSは登場したことはあるものの、あくまで「サーバールームやデータセンターにある筐体をクラウドに引っ越すぞ！」というクラウドリフト先が偶然AWSだった、という位置付けで各サービスをがっつり使った経験なし。
- 共働きの妻と、息子２人。週末の夕食は私の担当であり、もれなく主夫と化している。
- SAAを受験する前に、手始めにCLFを半年前に取得済。
:::

# 使った教材

- Udemy
[【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-knan/)
CLFを取得したとき、[【CLF-C02版】この問題だけで合格可能！AWS 認定クラウドプラクティショナー 模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-4260/)をひたすらやっていました。その流れで今回も利用。
正直に申しますと私には敷居が高かった。なので、後述のping-tに乗り換えました。
- Ping-t
[AWS ソリューションアーキテクト - アソシエイト(SAA-C03) 最強WEB問題集](https://mondai.ping-t.com/question_subjects/72)
基本的なことから試験レベルの問題まで揃っています。しかも無料。
とにかく最初は、各サービスの概要を知ることからやっていきました。
Ping-tのいいところは、ミスした問題をすぐに再挑戦できること。
誤った回答をしてしまう→解説を読む→ミスに再挑戦　というサイクルが回っていました。
そうして模擬試験を解いてみるものの、最後まで合格ラインに到達することはありませんでした。

# 試験前日までの状態
Ping-tの模擬試験でおおよそ６５％程度の正答率でした。。。
Udemyに戻って模擬試験を受けるとさらに悪くなり50%程度。
さすがに試験前日は「ダメだこりゃ・・・」と思わざるを得なくなるぐらいでした。

# 試験当日
特になにもしていません。
腹をくくってテストセンターに行きました。
まったくわからん問題は捨てました（たぶん点数に反映されない問題だったんだと思ってる）。

140分ある試験時間のうち、おおよそ60分程度で１周することができました。
残りの時間を２周目、見直しに使いました。２〜３問ぐらい、選択肢を変更した記憶があります。
残り１０分となったところでテストを終了しました。

# そんなこんなの結果
翌日にメールと確認すると、credy.comから１通のメールが届いていました。
![スクリーンショット 2024-01-02 22.53.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50320/c7460197-89c2-91ae-4d9c-b99103867f4d.png)

この時点でまだ半信半疑。AWS認定のCertMetricsへ。

![スクリーンショット 2024-01-02 22.36.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50320/2e19adf5-5a22-ae36-c4b7-ab11a6bf7527.png)

720点が合格ラインのところ、まさかの738点でした。
合格したことがわかり、ひとり半狂乱で大騒ぎ。家族から白い目で見られたのは言うまでもありません。

# 試験を通じて思ったこと
Ping-tで
> 誤った回答をしてしまう→解説を読む→ミスに再挑戦

というサイクルを回しているつもりが、いつの間にか理解したつもりになっていることに気づきました。
正誤の履歴が残っており、過去に正解だったものが不正解になったり、過去不正解だったものが今になっても不正解という状態でした。
結局のところ、解説を「読んで」理解した気になっていたのです。途中から、それこそ漢字ドリルで間違った問題の答えを１０回書く要領に移行しました。
iPad miniを持っているので書き込んでいましたが、面積が小さく俯瞰できないことがネックとなり、さらに途中からはA4ノートになりました。
結局、私にとってはアナログ最強だったって話です（というかそれしか知らない世代）。


# 最後に
色々な勉強法が紹介されていますが、自分にあったやり方を見つけたもん勝ちだと思います。
周囲から「何それ根性論？」と思われても結構。試験当日に自分を信じれる状態になってたらOKなんだと改めて思いました。
【Tips】旧Twitter(X)で検索時にアラビア語スパムアカウントを視界にいれない方法

「検索ワード near:兵庫県 within:2000km」で検索すると日本国外のアカウントは全て消え去ります、やったね
(一部表示されなくなる投稿もあるので、「検索ワード lang:ja」でも多少有効です)
【Laravel】変数の値を確認する方法

## dd関数を使用する
`dd(変数名);`と記述すると、ブラウザに変数の値が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/d5eda7ca-3593-0fd0-b3a5-f3e907947c0e.png)


## 参考サイト
https://biz.addisteria.com/laravel_debug/
SLACKにてRSSの利用

SLACKにて気になるニュースなどを取得しようと考え設定を始めた。

2024/1/2時点では以下を参考にRSSの設定をすることができた。
https://slack.com/intl/ja-jp/help/articles/218688467-Slack-%E3%81%AB-RSS-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B

URLの設定についてはRSSのボタンを押下ご、HTMLタグのtype="application/rss+xml" に設定されている情報を設定。
ITパスポート 脅威と情報を守る術を知る(テクノロジ)

・情報を奪う脅威にはどのようなものがあるか
・情報を守る仕組みはどのようなものか
を知る

# 攻撃手法
■ソーシャルエンジニアリング
情報通信技術を用いずに行う情報の盗み出し行為

・ショルダーハッキング
画面を盗み見る

・トラッシング
ゴミから情報を盗む

・なりすまし
電話などで情報を聞き出す

■マルウェア
有害な動作を行うソフトの総称

・マクロウイルス
マクロ機能を利用して広がる

・ワーム
単独で複製し感染を広める

・トロイの木馬
必要なプログラムであるように見せかけて実行を促す

・スパイウェア
ユーザの知らないところで情報を収集する

・ボット
コンピュータを遠隔に動かすためのプログラム

■ランサムウェア
ターゲットのデータを暗号化し
解除と引き換えに金銭を要求するソフトの総称

■サイバーキルチェーン
サイバー攻撃における攻撃の手順を詳細な7つのフェーズに表し
その連鎖を断ち切ることが必要であるとする考え方

1.偵察 Reconnaissance
→2.武器化 Weaponization
→3.デリバリー Delivery
→4.エクスプロイト Exploitation
→5.インストール Installation
→6.C&C Command & Control
→7.目的の実行 Actions on Objectives

# 認証
■認証(ID・パスワード)
コンピュータを操作している人物が適切な人物であることを確認する操作
「IDとパスワードの組を本人しか知らない」という前提で成り立つ認証方法

■多要素認証(多段階認証)
IDとパスワードの組以外の要素を加えて用いる認証方法
(認証コードやワンタイムパスワードなど)

■生体認証(バイオメトリクス認証)
人間の身体的特徴や行動的特徴を用いて行う認証
指紋や顔、虹彩などを利用する

・本人拒否率
本人を拒否する割合のこと

・他人受入率
他人を誤って認証してしまう確率のこと

# 情報を守る技術
■盗聴・改ざん・なりすまし
・盗聴
不正に通信の内容を盗み見る

・改ざん
不正に通信の内容を変更する
・なりすまし

自分を偽って通信を行う

■公開鍵暗号・共通鍵暗号(盗聴を防ぐ)
・共通鍵暗号
同じ鍵を使って暗号化と復号化を行う

・公開鍵暗号
異なる2つの鍵を使って暗号化と復号化を行う
(共通鍵暗号の弱点を克服するもの)

■SSL/TLS・WPA2(盗聴を防ぐ)
・SSL/TLS:Secure Sockets Layer/Transport Layer Security
HTTP通信に使用される暗号化プロトコル
通信データの暗号化や改ざんの検出ができる
(HTTPSのSのこと)(HTTPはWebページの転送ができるサービスプロトコル、HTTPSは暗号化されたHTTP)

・WPA2:Wi-Fi Protected Access
無線LAN通信における暗号化プロトコル

■ディジタル署名(改ざん・なりすましを防ぐ)
データに署名をつけることで
自らが送っているデータであることを証明する

■ディジタル証明書(なりすましを防ぐ)
通信をしている相手を確かめる仕組み

■S/MIME(エスマイム):Secure/Multipurpose Internet Mail Extensions
電子メールに暗号化とディジタル署名を行うプロトコル
送信者と受信者の双方がこれに対応している必要がある

■TPM:Trusted Platform Module
セキュリティ処理を専門に行うチップ
物理的に守られた部品として安全性を高められる

# セキュリティ対策
■脆弱性対策
OSなどのセキュリティパッチを常に最新にするなど
弱い部分をできるだけ少なくすること

■ファイアウォール
LANの内外を区切り、悪意のある通信をブロックする仕組み

■VPN:Virtual Private Network
インターネットにおいて専用の仮想的な通路を構築し
安全性の高い通信を行えるようにする技術

■コンテンツフィルタリング
あらかじめルールを指定し
そのルールをクリアするコンテンツのみを表示する
・ブラックリスト方式
ダメのことのリスト
・ホワイトリスト方式
OKなことのリスト

■ディジタルフォレンジック
ディジタルデータを分析して法的な証拠として使う手法
(ログイン履歴・アクセス履歴・削除されたデータの復元など)

■セキュリティバイデザイン
設計段階からセキュリティ対策を考えていくこと

■プライバシーバイデザイン
設計段階からプライバシー対策を考えていくこと

# 情報セキュリティマネジメント
■ISMS:Information Security Management System:情報セキュリティマネジメントシステム
情報セキュリティを高いレベルで保つための手法や事例が体系的にまとめられている

・セキュリティマネジメント3要素
ISMSにおける目標として達成すべき要素

1.機密性
情報の外部漏洩がない
2.完全性
情報が書き換えられることがない
3.可用性
利用者は必要なときに情報を使用できる

■情報セキュリティポリシ(基本方針・対策基準・実施手順)
組織や企業において実施するセキュリティ対策の行動指針
・基本方針:全体の目標や目的
・対策基準:大まかなルール
・実施手順:詳細なマニュアル

■CSIRT(シーサート):Computer Security Incident Response Team
コンピュータやネットワーク上での問題に対して迅速に対応するチームのこと

その他のセキュリティ基準
・PCI DSS:Payment Card Industry Data Security Standard
主要クレジットカード会社が策定したクレジットカードのセキュリティ基準

# リスクマネジメント
■リスク
目的に対する不確かさの影響
危険

・リスクマネジメント
リスクを適切に管理するための枠組み

リスク特定→リスク分析→リスク評価→リスク対応
↑一連の流れを「リスクアセスメント」という

回避:リスクの要因を排除すること
共有:リスクを分散すること
保有:意図的に対策を見送ること

■シャドーIT
組織において管理部門の許可なく使用されているIT機器やサービス

■レピュテーションリスク
ネガティブな評判が広まることによって受ける損失に関するリスク
近年ではSNSの普及により、このリスクが高まっているといえる
AWSのウォームアップについてわかりやすく具体例を用いて覚える備忘録

### AWSのウォームアップについての説明がよくわからなかったので調べて具体例を用いて説明

AWSの説明
-
インスタンスがウォームアップしている間、動的スケーリングポリシーは、ウォームアップしていないインスタンスのメトリクス値がポリシーのアラーム上限しきい値 (またはターゲット追跡スケーリングポリシーのターゲット利用率) より大きい場合にのみスケールアウトします。需要が高くなる場合は、アプリケーションの可用性を保護するためにスケールインを控えめに実行することがその目的になります。このブロックは、インスタンスのウォームアップが完了するまでスケールインして動的スケーリングを行います。


>これ一発でわかりませんでした。クールダウンとどう違うの？！



### 具体例を用いて理解する

#### ウォームアップ中のシナリオ

ある Auto Scaling グループがあり、動的スケーリングポリシーが設定されています。このポリシーでは、インスタンスの平均 CPU 使用率が70%を超えた場合に新しいインスタンスを起動するように構成されています。

#### ウォームアップが開始された時点

ウォームアップが設定された Auto Scaling グループに新しいインスタンスが追加される際、これらの新しいインスタンスはウォームアップ期間に入ります。ウォームアップ期間中は、これらの新しいインスタンスがトラフィックに対応し、正常に動作するまでの時間が確保されます。

#### 動的スケーリングポリシーの挙動

ウォームアップ中、動的スケーリングポリシーは新しいインスタンスがウォームアップしていない限り、スケールアウトしないようになっています。つまり、ウォームアップ中の新しいインスタンスのメトリクス（例：CPU使用率）がポリシーのアラーム上限しきい値（例：70%）よりも大きくても、スケールアウトは発生しません。

#### ウォームアップ完了後

ウォームアップが完了すると、新しいインスタンスはトラフィックを正常に処理できる状態になります。この時点で、動的スケーリングポリシーはウォームアップしていないインスタンスのメトリクスがアラーム上限しきい値を超えた場合にスケールアウトするように再び機能します。


### ウォームアップの具体例その2

初期状態 (3台のインスタンス)
A閾値：70%（インスタンス○台追加、合計で3台+○台)
B閾値：80%（インスタンス○台追加、合計で3台＋A閾値台数分＋B閾値台数分)


#### CPU使用率が70%を超える

ウォームアップが開始される。
動的スケーリングポリシーはウォームアップ中の新しいインスタンスに対してスケールアウトを抑制。

#### ウォームアップ中にCPU使用率が80%を超える

ウォームアップ中であるため、スケールアウトはまだ発生しない。


#### ウォームアップが完了

新しいインスタンスがトラフィックに対応し、ウォームアップが完了。
動的スケーリングポリシーが再び有効になり、閾値を超えた場合にスケールアウトが可能になる。



以上となります。
間違っている、それはこうじゃないかな？みたいなご指摘等等ございましたらコメントいただけますと幸いです。
最後までお読みいただきありがとうございました。
【React】Vitestの導入＋対象のテキストが画面上に存在する事を確認する

# はじめに
ReactのテストをVitestで試してみます。
本記事はVitestを用いてレンダリング後に対象のテキストが画面上に存在する事を
確認するテストを作成します。

# 環境
- vite：5.0.8
- typescript：5.2.2
- vitest：1.1.1

# 1.Viteプロジェクトの作成
今回はTypeScriptを選択しています。
```
npm create vite@latest
```
https://ja.vitejs.dev/guide/

# 2.Vitestのインストール
次のコマンドでvitestをインストールします。
```
npm install -D vitest
```
https://vitest.dev/guide/

# 3.React Testing Libraryのインストール
`React Testing Library`はUIコンポーネントをテストするためのライブラリです。
```
npm install --save-dev @testing-library/react
```
https://testing-library.com/docs/react-testing-library/intro/

# 4.@testing-library/jest-domのインストール
```
npm install --save-dev @testing-library/jest-dom
```
https://testing-library.com/docs/ecosystem-jest-dom/


# 5.コンポーネントの作成

```App.tsx
import './App.css'

function App() {

  return (
    <>
     <h1>hogesample ほげサンプル</h1>
     <p>こんにちは</p>
    </>
  )
}

export default App
```

`npm run dev`で起動して画面を確認すると、以下の画面のようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/9e8c8e67-66bd-53f2-52ce-5ae51b026fc3.png)

画面上にテキストが表示されている事が確認できたので、
テキストをチェックするためのコードを次のように作成します。
次のコードでは`getByText`メソッドで対象のテキストを指定し、
`expect`でアサーション（真であることが期待される条件をチェック）を作成しています。

```react:app.test.tsx
import '@testing-library/jest-dom/vitest';
import { render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';
import App from '../App';

test('check words', () => {
    // レンダリング
    render(<App />);

    // テキストを指定
    const checkTextElement = screen.getByText("hogesample ほげサンプル");
    const checkTextElement2 = screen.getByText("こんにちは");

    // 対象のテキストが画面上に存在することを確認
    expect(checkTextElement).toBeInTheDocument();
    expect(checkTextElement2).toBeInTheDocument();
});
```

# 6.実行
`npx vitest`コマンドを実行すると、
次のようにテストに通っている事（PASS）が確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/fc92fcba-35e6-924a-be95-2abc3f93605f.png)

あえて間違てみる（FAIL）と↓のように教えてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/e56bf849-71ac-0bba-af23-062aed2f2ffe.png)


最後にpackage.sjonに`"test":"npx vitest"`を追記し、
`npm run test`でテストを実行できるように修正します。

```diff_json
  "scripts": {
    ～～,
+    "test":"npx vitest"
  }
```

これで`npm run test`でテストができるようになりました。

# 参考
- https://zenn.dev/longbridge/articles/9d9ec773cb3814
- https://vitest.dev/guide/
- https://vitest.dev/api/expect
Reactで「Googleでログイン」ボタンを効果的に設置し、デザインをカスタマイズしよう！

Reactで「Googleでログイン」ボタンを複数設置し、Googleが推奨するデザインに合わせてカスタマイズする方法を見ていきます

## ステップ1: クライアントの初期化
`google.accounts.id.initialize` メソッドを使って「Googleでログイン」クライアントを初期化します。このメソッドはページ内で一度だけ呼び出せばOKです。コンポーネントのマウント時に以下のように実行します​​。

``` React
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });
  google.accounts.id.prompt();
};
```

## ステップ2: ボタンコンポーネントの作成
次に、カスタムReactコンポーネントを作成し、ボタンを設置します。ここで重要なのは、各ボタンに異なるスタイルや動作を指定することです。

``` React
const GoogleLoginButton = ({ id, buttonText, callback, style }) => {
  useEffect(() => {
    window.google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: callback,
    });

    window.google.accounts.id.renderButton(
      document.getElementById(id),
      style
    );
  }, [id, callback, style]);

  return (
    <div id={id}>{buttonText}</div>
  );
}
```

## ステップ3: デザインのカスタマイズ
ボタンのデザインはIdConfigurationデータ型を使用してカスタマイズします。この型には、Googleが提供するさまざまなフィールドが含まれています。たとえば​​:

`client_id` : アプリケーションのクライアントID。
`callback` : IDトークンを処理するJavaScript関数。
`ux_mode` : ボタンのUXフロー（popupまたはredirect）。
これらの設定を活用して、以下のようにボタンの見た目や挙動をカスタマイズできます。

``` React
<GoogleLoginButton 
  id="googleLoginButton1" 
  buttonText="Login with Google" 
  callback={handleCredentialResponse}
  style={{ theme: 'outline', size: 'large' }}
/>
```

# まとめ
この記事では、Reactで「Googleでログイン」ボタンを効果的に設置し、Googleが推奨するデザインフォーマットに沿ってカスタマイズする方法を解説しました。これらの手順を参考に、魅力的でユーザーフレンドリーなログイン体験を提供しましょう！
災害・被災地支援のためのサイト・アプリ開発の検討事項

災害時はウェブ制作者、システム開発者、デザイナー、アプリ開発者などが立ち上がって情報共有を支援しようという取り組みが生まれます。

そういった意志を持つことは大切ですが、似た取り組みが乱立しやすいです。これから何かしたい、と考えている方には一度読んでもらいたいと思います。

:::note info
本内容は高校時代に支援物資を集めて海外に寄付した経験、10年以上自治体の中間支援に関わり様々な社会起業家、NPO、NGOの活動を見てきた経験、東日本大震災の情報発信や寄付活動や実際に災害支援のウェブサービスを作った経験に基づき書いてます。
:::

## 要約（詳細は後述）

:::note warn
1. 被災地状況の共有マップはYahoo災害マップを使おう
1. 安否確認サービスは災害伝言板、Googleパーソンファインダーを使おう
1. XやLINEの代わりは今作っても普及するには時間かかるよ
1. どうしても作りたいなら、自治体やボランティアと必ず連携できる前提が大事
:::

## 被災状況マップを作りたいと思う方へ

過去の災害では被災状況マップが何度も誕生しています。

私も過去にWordPressを基盤としたシステムをノーコードで立ち上げたことがあります。この様な取り組みを展開する中での課題は、**同時期に複数のマップが作成されてしまい、情報の一元化が困難となる**ことです。

- 有志が独自に開発した被災状況マップ
- Googleマップに記録される被災状況マップ
- 自治体がGISを活用して公開する被災状況マップ

色々な角度から立ち上げられたマップが乱立します。

地図を作成しても、現地のボランティアや自治体がそこにアクセスして活用してくれるか？については未知数です。ネット上では注目されますが、情報は活用されなければ被災者を救うことはできません。

災害発生前から自治体や消防と協定を結び、災害時に特定のマップ情報を参考に支援活動を実施するという前提がないと、いくらサイトを立ち上げても100%情報を活用していただける状態にはなりません。

当時はありませんでしたが、今はYahoo!が災害マップを提供しています。運営会社の認知度、サーバー基盤や大量アクセス耐性、自治体との協定の可能性を踏まえると被災状況マップとして現状最も有効です。

https://weather-report.yahoo.co.jp/map/?lat=35&lon=139&z=4&popup=on&dosha=on&flood=on&hazard=off&evac=on&list_view=off&p_all=on&p_report_type=flood_disaster

## 安否確認サービスを立ち上げようと考えてる方へ

通信会社の災害伝言板、Googleの安否確認サービスが既にあるので、既存サービスへ誘導・集約するようにしてください。

https://www.web171.jp/web171app/topRedirect.do

https://www.docomo.ne.jp/info/disaster/disaster_board/

https://www.au.com/mobile/anti-disaster/saigai-dengon/

https://network.mobile.rakuten.co.jp/info/disaster/

https://www.google.org/personfinder/japan

### 公開前提の救助要請について

現状やはりXへの投稿が多いです。嘘の情報も混在しており判断が難しいですが、頑張って信頼できる情報を抽出するか、嘘の投稿を積極的に通報して検索結果から除外するしかないと現状では思います。

SNSでの救助要請の注意点などは、ググれば過去の事例や研究を見つけられます。

https://www.google.com/search?q=%E6%95%91%E5%8A%A9%E8%A6%81%E8%AB%8B+sns

## 災害向けのサービスを立ち上げたい方へ

これから災害向けサービスを展開したいと考える方には、下記への対応を考慮した上でサービス設計をしてほしいです。

### 情報管理
- 投稿された情報がバックアップされること
- 投稿された情報を精査する体制があること

### 情報共有
- 自治体の災害部署が参照できること
- 消防・警察などが参照できること
- 投稿されたデータは後日研究に使えるようにエクスポートできること

個人レベルの取り組みでは相当難しい部分だと思います。地元の消防団や自治会などと日頃から連絡を取り合い、ある程度信頼関係を築いていると地域単位では展開しやすいと思います。

### サイト維持
- 大量アクセスに対応できる仕組みであること
- サイト・サーバー維持に関わる費用を十分に賄う資金があること（または低価格で維持できる設計にする）

参考までに東日本大震災の際はUshahidiが活用されてました。こういったオープンソースを基盤としてシステム開発期間を短くするという方法もあります。

https://www.ushahidi.com/

https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%B7%E3%83%A3%E3%83%92%E3%83%87%E3%82%A3

## 誰でもできるベストな被災地支援方法

ずばり、**物資よりも寄付金**です。

物資は必ず現地で処理できない物量になりますので、先ずは現金を寄付して現地の状況に応じて支援団体に物資を調達してもらうのがベストです。

また寄付金については**支援金と義援金の違い**を理解しておきましょう。

![wha_pro_dis_inf_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431047/65066edc-ba23-e7be-0633-b03856ee90e5.jpeg)
（画像は日本財団の解説ページから）

https://www.nippon-foundation.or.jp/donation/disaster_fund/infographics

多くの方は義援金という意味での寄付をイメージされてますが、支援金は現地で活動するボランティアに対する寄付です。義援金は被災者に対する寄付です。
【SwiftUI】Viewをジェスチャーで回転させる（iOS17）

# はじめに
iOS17から`RotateGesture()`という機能が追加されました。
これを使用してジェスチャーでViewを回転させることができます。

# サンプルアプリ
![Simulator Screen Recording - iPhone 15 - 2024-01-02 at 21.29.58.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/86c8cd8a-9c13-0275-fbe1-295ffc44fa66.gif)

# 実装
公式ドキュメントにあるコードです。
```swift
import SwiftUI

struct ContentView: View {
    @State private var angle = Angle(degrees: 0.0)

    var rotation: some Gesture {
        RotateGesture()
            .onChanged { value in
                angle = value.rotation
            }
    }

    var body: some View {
        Rectangle()
            .frame(width: 200, height: 200, alignment: .center)
            .rotationEffect(angle)
            .gesture(rotation)
    }
}
```

# 解説
現在の角度を格納している変数です。
```swift
@State private var angle = Angle(degrees: 0.0)
```

現在の角度を`rotationEffect`でViewに反映させています。
```swift
Rectangle()
    .frame(width: 200, height: 200, alignment: .center)
    .rotationEffect(angle)
    .gesture(rotation)
```

上記コードの`gesture`で`rotation`を指定しています。
`rotation`は以下のようになっています。
`RotateGesture()`が変化すると`value`で値が流れてきます。
`value`内の`rotation`を取得して、現在の角度を更新しています。
```swift
var rotation: some Gesture {
    RotateGesture()
        .onChanged { value in
            angle = value.rotation
        }
}
```

# おわり
iOS17から使えるようになるのでちゃんと使われるようになるのはまだ先だと思いますが、SwiftUIが便利になってきてて嬉しいですね
データ分析コンペ　ゴールドメダル獲得まで

probspaceというデータ分析コンペに参加して上位10%に与えられるゴールドメダルを取得できたので振り返りも兼ねてノートにアプローチをまとめようと思います。

コンペ順位
https://comp.probspace.com/competitions/taxi_demand/ranking

背景
そもそもデータ分析コンペに参加したきっかけは昨年機械学習の一種であるLGBMを用いた予測モデルの担当になったことです。そこである程度書籍、OJTを通して体系的な知識を学ぶことができました。そこで得た知識、経験の社外でのレベル感が知りたかったのでkaggle、SIGNATEといったデータ分析コンペに参加するようになりました。

挑戦
過去のコンペは主に担当している分野と同じ予測問題で特に時系列予測を中心に参加しました。その時点の私のレベルはベースモデルは自作できるが、有効な特徴量やアンサンブルなどは知見がなく60〜70%辺りを推移していました。

対策
そこで今回実施した対策は過去のコンペで上位陣の解法で取り入れらる所を全て取り入れました。具体的には単純なラグ特徴量だけでなくdiff系、ドメイン知識がなければChatGPTと壁打ちしながらアイデア出し、簡単なアンサンブルモデルの作成です。これらを時間の限り実施することでスコアは地道にアップしました。

まとめ
私なりの結論としてはまずどのレベル感でも挑戦してみて上位陣の解法を学び自分の手札に取り入れられればメダルを獲得できると思います。
cURL を使って POST を実行する

# はじめに
よく忘れるので、備忘録として残しておきます。

:::note info
ちなみに、`cURL` を使った `GET` リクエストは以下でできます。
```bash:bash
curl http://localhost
```
:::

# 通常のリクエスト (送信データなし)
```bash:bash
curl -X POST http://localhost/test
```

# 送信データを付ける場合
`json` 形式で送信する場合。
```bash:bash
curl -X POST -H "Content-Type: application/json" -d '{"key1":"value1", "key2":"value2"}' http://localhost/test
```

## リクエストにポート番号を付ける場合
ポート番号は`8000`とした場合。
```bash:bash
curl -X POST -H "Content-Type: application/json" -d '{"key1":"value1", "key2":"value2"}' http://localhost:8000/test
```

## リクエストにヘッダーを付ける場合
ポート番号は`8000`とした場合。
```bash:bash
curl -X POST -H "Content-Type: application/json" -d '{"key1":"value1", "key2":"value2"}' http://localhost:8000/test
```

## リクエストに複数ヘッダーを付ける場合
`-H` オプションを複数回使用。
```bash:bash
curl -X POST -H "Content-Type: application/json" -d '{"key1":"value1", "key2":"value2"}' http://localhost/test
```

# おわりに
 `cURL` を使って `POST` 実行をする方法をまとめました。`XML` 形式やファイルデータを送信したい場合は、`-H` が `Content-Type: application/xml` や `Content-Type: image/jpeg` になりますので注意しましょう。
あるコレクション内のインスタンスをまとめて削除したい時

## はじめに
Laravelにおいて、レコードをすべて削除する方法を少し調べてみました。

## 環境
Laravel 9.52.16

## 問題
* マイグレーションファイルを修正した
* しかし既存のテスト用レコードとの整合性により、エラーが出る
* そこで既存のレコードを一旦まとめて削除したい

```php: 消したいレコード（一部略）
> $purchase_orders = PurchaseOrder::all();
= Illuminate\Database\Eloquent\Collection {#7242
    all: [
      App\Models\PurchaseOrder {#7259
        id: 2,
        title: "受注テスト",
        purchase_abstract: "受注テストです",
        user_id: 3,
      },
      App\Models\PurchaseOrder {#7260
        id: 3,
        title: "あいうえお",
        purchase_abstract: "あいうおえ",
        user_id: 3,
      },
      App\Models\PurchaseOrder {#7261
        id: 4,
        title: "others purchase orders",
        purchase_abstract: "others purchase orders",
        user_id: 1,
      },
```

## 解決法
今回のようなEloquentコレクションに対してはdeleteメソッドを使います。

コレクションとはモデルのインスタンスを格納するコンテナです。

今回の場合は、PurchaseOrderというモデルのインスタンスを複数格納しています。

* ①各レコードをループで削除する
* ②クエリビルダを使って一括削除する

:::note info
**全てのレコードを削除する時はバックアップしておきましょう**
:::




### ①各レコードをループで削除する
まず一つ目は、コレクション内の各インスタンスを一つずつ取り出し、deleteメソッドを使う方法です。
```php:
foreach($purchase_orders as $purchase_order) {
    $purchase_order->delete();
```

### ②クエリビルダで削除する
二つ目はクエリビルダを使用する方法です。
```php
PurchaseOrder::query()->delete();
```
ATOM Cam 2 / ATOM Cam Swing で atomcam_tools を試してみたメモ (Windows編 / SSHでログインするまで)

# はじめに

ATOM Cam 2 / ATOM Cam Swing で atomcam_tools をmacOSで試してみたメモを書きました。

https://qiita.com/kitazaki/items/85a506b9be8718c5b3c3

macOSではターミナル(Terminal)を使用してATOM CamへSSHログインしましたが、WindowsでSSHログインできないという質問を受けてTeraTermアプリを使用して試してみました。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/fbca88c1-de7e-2de4-ea43-7fb563b35c9b.png)

# 環境

- Windows 10 Pro
- Tera Term 5.1

https://github.com/TeraTermProject/teraterm

- ATOM Cam Swing (ファームウェア: 4.37.1.102)
- atomcam_tools 1.5.14

https://github.com/mnakada/atomcam_tools/

# Tera Term

Tera Termをダウンロードしてインストールします。

# SSHキーの作成

Tera Termを起動してSSHキーのペア(秘密鍵と公開鍵)を作成します。

Setup(設定) → SSH KeyGenerator(SSH鍵生成)を選択します。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d25e5103-b97a-a67d-f4cb-ffef2904bf74.png)

Key Type → RSAを選択します
Key Bits → 2048と入力します
Save public keyボタンを押して公開鍵を保存します。(id_rsa.pub)
Save private keyボタンを押して秘密鍵を保存します。(id_rsa)

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/9f9a30f6-c777-b94d-d155-f1d2319c6c2f.png)

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/23c35fda-4600-ac70-81b3-1c3d9ebcdbcb.png)

# authorized_keysにSSH公開鍵の情報を追記する

atomcam_toolsのzipファイルを解凍して、SDカードへコピーします。
解凍したファイルの中のauthorized_keysファイルにSSH公開鍵の情報(id_rsa.pub)を追記します。
id_rsa.pubをメモ帳アプリで開き、内容をauthorized_keysファイルへコピー&ペーストします。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/498b4da0-6c41-93cf-5f5a-d5c2ad157c29.png)

# Atom Cam Swingを起動する

SDカードをAtom Cam Swingへ挿入して起動します。

# IPアドレスを確認する

Atom Camアプリを開き、デバイス情報でAtom Cam SwingのIPアドレスを確認します。
以下の画面の場合、192.168.3.77がIPアドレスです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/05c12bd0-4bf8-f91b-b7a7-391f4269b427.png" width="33%">

# SSHログインする

Tera Termを起動し、IPアドレスを入力してOKボタンを押します。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/760a88fc-a854-e3a6-468f-655eaa605b1e.png)

初回接続時は警告画面が表示されます。Continueボタンを押します。

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/dec9e029-94d3-6399-9710-9bb3d5eb1da7.png)

User name → rootと入力します
Authentication methods → Use RSA/DSA/ECDSA/ED25519 key to log inを選択し、Private key fileに秘密鍵(id_rsaファイル)を選択します

OKボタンを押します。

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/d51b00b2-12c8-a717-fef7-d8640ade1638.png)

コマンドプロンプトが表示されれば成功です。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/7f667400-5404-2b93-3487-c25212113990.png)
Promiseを繰り返し呼び出して制御する

# Promiseを繰り返し呼び出して制御する

Promise を繰り返し呼び出しなんらかのフラグにより呼び出しを中止します

``` javascript
var loopCounter = 5;
function LoopPromise() {
    console.log("LoopPromise: ", loopCounter);
    if(loopCounter > 0) {
        new Promise(function(resolve) {
            setTimeout(function() {
                loopCounter -= 1;
                LoopPromise();
                resolve(true);
            }, 1000);
        });
    } else {
        // NOP
    }
}
```

## 想定される使い道
下記のような使い方を想定しています
* APIのポーリング　…　レスポンスが０の間は呼び出し続ける、１になったら次の処理へ遷移する
* 指定件数読み込むまで繰り返す　…　一度に読めるデータが１００件のAPIで１０００件読み込むまで繰り返す
DevOpsの理念SREの実践についてエンジニアはどう捉えるべきか

# はじめに
SREはDevOsの実践するにあたっての技術と理解しているが、その目的や理解して置くべき事についてエンジニア目線で論じてみる

# DevOpsとは
- デブオプスと読む
- 従来、開発部門はリリースするまでを役割と考えがちであり、運用部門は運用・保守のみを役割と考えがちである
    - 開発部門はリリース後の事は目をつむり勝ちである
        - 継続的に開発を行い、リリースを適宜実施したい
        - 新機能・新サービスを迅速にリリースし競合他社に打ち勝ちたい
    - 運用部門はサービスを停止したくないので、何も手を入れたくない傾向がある
        - 可用性、信頼性を保持したい
        - 一度機能するシステムでは何も変更したくない
        - リリースは控えたい
- 上記のように、開発部門と運用部門は対立的関係が発生しうる
- この対立的関係を解消するためには「迅速なリリース」と「可用性、信頼性」を満たす仕組みが求められる
- DevOpsとは開発部門と運用部門の対立を解消し各部門の要求を満たす事を目的とした考えである

# SREとは
- Site Reliability Engineering(サイト信頼性エンジニアリング)の略
- GoogleのVice President Engineeringを務めるBenjamin Treynor Slossが2004年に提唱したと言われる
- サイトの信頼性を高める方法論を定義している
- これは、DevOpsの活動と仕組みを持続させる為の理念を定義しているものと言える

# DevOpsとSREの関係性
``` class SRE implements interface DevOps ```
- クラスSREはインターフェースDevOpsを実装する
- Google公式サイトでは、この様にプログラミングになぞらえて表現されている
    - DevOpsはインターフェースであり、そのインターフェースを実現したものがクラスSREとなります
- 一般的な表現をするとDevOpsは理念で有り、SREはそれを実践する手法

# DevOpsの5つの領域と関係するSRE
| # | DevOps | SRE |
|:-----------|:-----------|:------------|
| 1       | 組織のサイロを削減する       | 開発者と所有権を共有する。職務や役職に関係なく、同じツールを使用する  |
| 2       | 失敗を普通のこととして受け入れる     | 新しいリリースに対する事故や失敗のバランスを取るための公式を用意する   |
| 3       | 段階的な変更を実施する       | 障害によるコストを削減して迅速な移行を促進する   |
| 4       | ツールと自動化を活用する         | 「今年の仕事を自動化する」ことを奨励し、手動のシステム作業を最小限に抑えて集中力を高めるシステムに長期的な価値をもたらす取り組み |
| 5       | すべてを測定する       | 運用はソフトウェアの問題であると信じており、規範的な測定方法を定義しています。可用性、稼働時間、停止、労力など。  |

# SREの指標/用語

## SLI(サービスレベル指標)
- Service Level Indicatorの略
- ユーザーが期待するサービス品質を測定するための指標で、通常はパフォーマンスや可用性といった側面を評価します
    - 例: ページ遷移した際にコンテンツが表示されるまでの時間で、ユーザーが許容できる表示時間が2秒の場合、
    - 一定期間(1日)のうち、成功したイベント数と全イベント数の比率が99%の場合、SLIは99%となる
## SLO(サービスレベル目標)
- Service Level Objectiveの略
- SLIが一定の期間で達成される目標のことであり、サービス提供者がサービス品質を維持するために設定する目標値
    - 例: SLOを1年間90%と設定した場合、サービス提供者は1年間のSLIが90%以上であることを目指す場合
    - SLOはサービス品質を保つための最低要件とも言える
## SLA（サービスレベル契約）
- Service Level Agreementの略
- サービス提供者と利用者との間で合意される契約
- サービス水準合意、サービス品質保証の意味合いで表現される
- SLOを達成できなかった場合に、ユーザーへ補償を約束する法的な契約

## toil(トイル)
- 労苦の意味
- SREにおいては、手作業や繰り返して行う単純作業、本来自動化できる作業を指す

## エラーバジェット(エラー予算)
- 一定期間中にエラーが許容される範囲を定義する事
- 例: 開発部門が新機能などリリース時に、ユーザーが許容できるエラー(サービス停止等)の許容時間をエラー予算として確保する事
- 16時間/年 のエラー予算を確保した場合、16時間エラーを発生した時点で、その年は新機能リリースは難しくなる

# どのようにDevOps, SREを捉えるべきか
- SREの実践方法/指標として、テスト自動化、エラー予算、指標(SLO, SLA, SLI, toil)が有るが、初期から全て完全に導入するのは難しいのではないか
- [公式サイト](https://sre.google/workbook/how-sre-relates/)でも触れているが、本格的な進歩を遂げるためには、実際に作業を行っている人々の議論、管理サポート、賛同が必要だと考える
- DevOpsは概念であり、受け入れられやすいので、DevOpsの理解をチーム内に提唱する事から始めるのが良いのでは
- また全てのプロジェクトで完全にSREを全て導入する事が可能とは限らないので、部分的導入から進めるのが良いと思う
- 開発エンジニア、運用エンジニアのサイロ化の解消に活かす
- サイロ化を是とする無理解の打破、開発／運用エンジニア同士がリスペクト・許容しあえる文化に活用する
- システム/サービスのライフサイクルをメンバー全員が意識する事で成長につなげていく

# 参考サイト
https://sre.google/sre-book/table-of-contents/
https://www.youtube.com/watch?v=ZcZtU_TiFEM
https://www.pagerduty.co.jp/blog/what-is-sre/
https://engineering.visional.inc/blog/_240/class_sre_implements_devops/
https://sreake.com/blog/sre-vs-devops/
コード中心型の新しい記事投稿サイトを作っている話。その具体的な使い方を解説

## はじめに

今回は新しい形の記事投稿サイト「PostCode」を作っているので、その作成背景や、作成中に感じたことをまとめていきます。

もしよろしければ、見ていっていただけると嬉しいです。

## PostCode

今回作成したのは「PostCode」というアプリケーションです。

PostCodeは、「コード中心型」のエンジニア向け記事投稿サイトになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/0e28b60f-a81a-d8f9-846c-e16ab6659872.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/539162fc-3e7f-be38-89e1-4bb80f5980f1.png)

特徴としては「コード」を記事に添付できるとことです。


## 何故作ったのか

Qiitaやzennといった、既存の発達した投稿サイトがある中、なぜPostCodeを作ったのか。

それは**コードで知りたい**という欲求が高まったからです。

というのも、普段から記事を読む際、抽象的な内容を読むと、「うーん、どうやるんだろ」と悩んで「身になったのか身になってないのか」よく分からない感覚に陥ることがあります。

「論より証拠」ではないですが、「解説よりコード」を見せて欲しい場面が多々あります。

「無いのなら作ってしまおう」

――の精神で、PostCodeを作りました。

PostCodeでは手軽にコードを添付して、その具体性をシェアできるようにしています。


実際にはどう利用されていくかは分かりませんが、具体性のある記事を中心に、シェアされていくことを想定しています。


――次に、PostCodeの具体的な使い方を見ていきます。

## PostCodeの使い方

PostCodeでは色々なパターンの書き方を想定しています。
ここではそれらのパターンを見ていきます。

### 【Good-Bad】パターン

まずは、単一責任の原則の記事をサンプルにGood-Badパターンを見ていきます。

次のようなbad.jsとgood.jsを書いて単一責任の具体例を示す記事です。

**bad.js**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/7bfe9955-7902-7119-7cfd-a606250ce867.png)

**good.js**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/a89a3b4e-44f4-98b2-04b3-b581138e5ab1.png)

Good-Badパターンでは、解説した記事の内容を元に「どうやって改善するか」を例示するパターンになります。

ポイントとしては改善された部分が理解しやすくなっていることです。

### 【連番（時間系列）】パターン

**ファイルに連番を振ってみる**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/01f9b2d2-8c2d-1329-c8fd-7163c053feac.png)

コード解説をフルに活用し他パターンです。
順番立てて見てもらいたい場合や、手順書を残したい場合にこのパターンを活用します。

### 【多言語】パターン

**多言語のハローワールド**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/b5ca80e9-50ad-b066-3bcb-9a03c5740776.png)

多言語の例を同じところに置いたパターンです。
静的コンパイラに依存しないので、ここで別言語をまとめる違和感が無いのがポイントです。

### 【他パターン】パターン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/b3223909-7ce6-5b85-e83b-145eb99fe1c9.png)

色々な人のパターンを乗せたり、自分で考える複数パターンを乗せるようなパターンです。

ここでは、議論枠を利用して、ユーザーのアイデアを募集したりもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551316/1b8f13a5-98c0-556d-ad70-b398a9e1ecb5.png)

こういう感じでアイデアを皆で膨らませることができます。

――以上が、現状想定している利用パターンです（まだまだあると思いますが）

次は、開発中に抱いた自問自答を乗せます。

## 自問自答

ここでは開発中に抱いた自問自答を乗せます。
（あるあるだとは思いますが、開発しきれない要因の一つですよね……）

## 既存の記事投稿サイトで十分では？

まったく別の利用用途だと思っているので、既存の投稿サイトとは別の立ち位置にいると思っています。

既存の記事投稿サイトは抽象よりのサイトで、PostCodeは具体よりのサイトです。

具体を集めて、その具体を議論し合えればいいな、と思っています。

## GitHubリンクを乗せればいいのでは？

即時性が段違いなので、個人的にはGitHubリンクを活用した記事は「大きなテーマ」でない限り、いらないと思っています。

PostCodeでは、手軽にアクセスできるコードをシェアできればいいな、と考えております。


## 最後に

以上が、PostCodeに関する解説や自問自答についてです。

最後になりますが、PostCodeリリースに向けて準備している段階です。

2024年1月内にリリース予定ですので、もしよろしければ「予約」をしていただくか、またはSNSでのリリース投稿を待っていただけると幸いです。


https://docs.google.com/forms/d/e/1FAIpQLSf3oaQ0-1M4xqzRSthRAmgY91dCEmysW5pklYEh7ZCUTZmt_Q/viewform?usp=sf_link

https://twitter.com/Marine765_


以上です！
Azureの音声テキスト変換の使い方あれこれ

Azureには音声テキスト変換のAPIがある。どの経路で呼び出すのが一番パッケージとしてノードが少ないかを検証してみた。

https://learn.microsoft.com/ja-jp/azure/ai-services/speech-service/get-started-speech-to-text?tabs=windows%2Cterminal&pivots=programming-language-python


- Python（を始めとするプログラミング言語）でAPI呼び出し
    - 良いところ
        - 呼び出し側の依存モジュールが少ない
    - 悪いところ
        - 大きなファイルを使うには別のAPIライセンスが必要（この段階で複雑で引き継ぐのが大変）
- curl
    - 良いところ
        - 全く依存モジュールがない
    - 悪いところ
        - 結局大きなファイル（数分以上）を処理したければ別のAPIライセンスが必要で複雑
- spx
    - 良いところ
        - コマンドだけでいける
    - 悪いところ
        - 依存モジュールがめちゃくちゃ多い
        - .net frameworkをバージョンダウンさせないと使えない（7が最新だが6に下げないと使えない）
            - .net frameworkをバージョンダウンさせるために、WSL上で処理すればWindows側の.net frameworkのことは無関係になるけど、そうなると今度はマイクにアクセスできない
            - docker 経由で使えばホストOSの.net frameworkのバージョンは気にしないでもいいということもあるけど、dockerの中だとやっぱりマイクが使えない

ということで、Azureの音声テキスト変換はどれもいまいち。

spxコマンドをwsl上に入れてマイクからのリアルタイムな変換は諦めるというのがいいのかも。
FourKeysを導入した良かったこと・悪かったこと

# はじめに
この記事は「[エンジニア組織の開発生産性・開発者体験向上の取り組みをシェアしよう！ by Findy Advent Calendar 2023](https://qiita.com/advent-calendar/2023/developer-productivity)」の25日目の記事になります。

私は、キネカという会社のCTOをしており、開発チームの生産性の可視化と最適化のために、3年前よりFour Keysへの取り組みを始めました。

本記事は、Four Keysへの取り組みと、それによる良かったこと・悪かったことを箇条書きで振り返りたいと思います。

## 良かったこと
- リリース増加による自己肯定感アップした
- PRが分割されてレビューしやすくなった
- 新規メンバーがオンボーディングしやすい
- フィーチャーフラグが整備された
- CI時間が高速化した（副次的効果）
- ダッシュボード作成など、可視化の取り組みが進んだ

## 悪かったこと
- リリースの定義が曖昧になり、ビジネス的に寄与しないリリースも増えた
- ビジネス的にうまくいっていないときも、なんとなくうまくいってる感でちゃう
- リリースできないメンバーが焦燥感を感じる

## 良かったこと考察
弊社では2020年頃から「LeanとDevOpsの科学」に触発されてFourKeysの取り組みを始めました。リリース数を計測し始めて、良かったのは、当時会社としてもスケールしていくなかで、定量的な指標を開発チームも持てるようになったことです。
そのおかげで、週次の全社MTGなどで、定量的に数値を共有することができ、チーム全体としての自己肯定感（役にたってる感）などが得られたのが良かったです。

また、FourKeysの指標に関しては、リリース数をあげ、リリース後の失敗を減らすという目的のもと、フィーチャーフラグやCI時間の高速化、ロールバックの仕組みの整備などが進んだのも良かったことの一つです。

新規メンバーのオンボーディングという面でも、常に何かリリースするタスクがあるため、すぐにリリースという形でバリューが出せるのも良かったです。何かしら、本番環境にコミットすることが、未経験、中途問わず、心理的安全性を高めることに有効だったと思っています。

最後に、社内の4K50型ディスプレイにリリースKPIの推移を乗せるなど、可視化の取り組みが行えたのも良かったです。dev発信で取り組んだことがビジ側の問い合わせ対応や流通目標の常時表示などに応用できたのが良かったと思っています。

※ちなみに今はTableau導入により、もっとクオリティ高いダッシュボードになってます。
※現在時刻が乗っているのはオフィスに時計がなかったから。
![Screenshot 2024-01-03 at 18.15.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/0640b12e-b830-4aec-ab34-7511607263f3.png)


## 悪かったこと
リリースを指標としたことで、チーム全体の肯定感や生産性は上がった認識ですが、PJが詰まってるときなど、リリースKPIが悪くなったタイミングで「これってリリース数としてカウントして良いのか？」というようなリリースがでることもありました。

「LeanとDevOpsの科学」には、生産性が高い企業はビジネスも成功していることを言及していたと思いますが、上記のようなリリースを繰り返していてはビジネス的には上手くいかんだろう、と思っています（その動きは是正しましたが、時たま、そういう引力が発生してる気もします）

また、リリース数を指標に置きすぎてるせいか、1〜2週間リリースできないと焦りを感じるメンバーが出てくることもありました。PJ的に、大きい施策、小さい施策はあるので、メンバー単位で見たときにリリースまでの期間が空いてしまうのはしょうがないとは思いますが、変わる指標も無いため、なんとも難しいとは思っています。


## 今後について
最近、悪かったなと思っている「リリースとして含めて良いのか？」というものまで、リリースに含めるという状況が、missreading chatの[#121](https://misreading.chat/2023/10/30/121-the-space-of-developer-productivity/)で言及されており、チームとしてもこのKPIを見直して良いかな？というタイミングがきたと思っています。
「LeanとDevOpsの科学」も原著が出てから5年以上たち、SPACEなど新しい指標が登場している中、
できれば来年、なにかしらアップデートしたものをアドベントカレンダーでかけると良いなー。
既存のプロジェクトをリモートリポジトリにpushするまで

## GitHubでリモートリポジトリを作成
①GitHubで「new」ボタンを押下。
②Create a new repositoryと書かれた画面から操作してください。
③Repository nameを入力、ラジオボタンでpublic or privateを選択。
④Create repositoryボタンを押下すれば作成可能です。

## ローカルリポジトリへ移動
①作業ディレクトリへ移動します。
作業ディレクトリとはsrcフォルダのある階層です。
（参考までにecliplceを使用していて、workspaceにあるプロジェクトファイルの一つ下です。）

②ここからはそのディレクトリ配下でCMDを起動する。
起動方法はエクスプローラを起動して、ディレクトリパスを入れるところを一度全て消して、「cmd」と打ち込んでEnterを押してください。

③以下のコマンドを実行する。

```ruby:3-1_gitディレクトリを作成

git init

```

```ruby:3-2_ローカルリポジトリへ登録

git add src ここからコメント：登録したいディレクトリ名を入力する。

```

```ruby:ローカルリポジトリへコミット

git commit -m 'test commit'

```

```ruby:リモートリポジトリへ登録

git remote add <GitHubの名前> <リモートリポジトリのURL>

```
```ruby:Git-push（リモートリポジトリへ更新内容を反映する）

git push --set-upstream <GitHubの名前> <branchの名前>

```

これで既存プロジェクトをGitHub上に反映することが出来ました。もしこれで出来ない場合や、やり方に間違いがあった場合にはコメントにて教えて下さい。
[解決できたよ] 症状，OMEN16-k0059TXで音が出ない

# 症状

OMEN by HP 16-k0059TXにUbuntuに入れたら音がでなかった．

SettingのSoundではOutputDeviceにDummy Outputしかない．

# 環境

| 属性     | 内容                   |
| -------- | --------------------- |
| OS       | Ubuntu 22.04          |
| カーネル | 6.2.0-39-generic      |
| PC       | OMEN by HP 16-k0059TX |

# 対処法

## 解決できた方法

Logにしたがった．

UbuntuにはありがたいことにLogというアプリケーションがあります．これを見てみると．．．

![Screenshot from 2024-01-02 18-17-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665043/36348569-ac9e-9747-2876-08c5ac804cf6.png)

こんな感じに起動時のログが見れます．このログに

```
sof-audio-pci-intel-tgl 0000:00:1f.3: you may need to download the firmware from https://github.com/thesofproject/sof-bin/
```

という一文が見えます．

あとは[リンク先](https://github.com/thesofproject/sof-bin/)にしたがってファームウェアを入れることで修正できました．

インストール方法はリンク先に書いてありますしバージョンごとに異なる可能性がありますが，一応ここにも書いておきます．

1. Githubの右のカラムにある[Releases](https://github.com/thesofproject/sof-bin/releases)を開く
2. 最新または動きそうなバージョンの「.tar.gz」をダウンロードする．（補足：.tar.gzファイルはターボールとよく呼ばれてます．）
3. ターボールの解凍先で次のコマンドを実行

```
sudo mv /lib/firmware/intel/sof* $(任意のバックアップ先1)/
sudo mv /usr/local/bin/sof-*     $(任意のバックアップ先2)/ # 任意．コピー元にsof-*が存在しないこともあります．
cd $(解凍後のフォルダ)
sudo ./install.sh
```

あとは再起動するとSettingのSoundにDummyOutputではなくSpeakerが表示されます．

ただし，自分の環境ではテストの音は出せませんでした．しかし，Youtubeの動画を見るとステレオでちゃんと再生されました．音質も問題ないように感じます．

## だめだった方法

- pulseaudioの再インストール
	- pulseaudioの再インストール前はBluetoothのヘッドフォンも使えなくなって困った．pulseaudio-module-bluetoothを再インストールして治った．
- カーネルのバージョン変更
	- linux-image-6.1.0-1027-oem, linux-image-6.5.0-14-generic, linux-image-6.5.0-1009-oem
Sassでカラーパレットを作る

Sassでカラーパレットを作りたくなったので自分用メモ．
ベースとなる色(3色+グレー)について，その明るさを変化させた色を，css変数として利用できるようにします．

(細かい用語などの間違いはご愛嬌ということで…)

## コード全体

``` global.scss
@use 'sass:color';
:root {
  // color palette
  // based on https://www.colordic.org/w

  // primary: AZUKI
  $primary: #96514d;
  // secondary: KOGANE
  $secondary: #e6b422;
  // tertiary: MOEGI
  $tertiary: #006e54;
  // neutral: gray
  $neutral: #808080;

  // create color palette
  $color-step: 0, 2, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 98, 100;
  @each $i in $color-step {
    --color-primary-#{$i}: #{color.scale($primary, $lightness: (($i - 50) * 2%))};
    --color-secondary-#{$i}: #{color.scale($secondary, $lightness: (($i - 50) * 2%))};
    --color-tertiary-#{$i}: #{color.scale($tertiary, $lightness: (($i - 50) * 2%))};
    --color-neutral-#{$i}: #{color.scale($neutral, $lightness: (($i - 50) * 2%))};
  } 
}
```

## やっていること

Sassには，色調を変化させる関数`scale()`が用意されているので，これを利用します．

### 1. `sass:color`の読み込み

`scale()`は，`sass:color`というビルトインモジュールを読み込むことで，利用可能になります．

``` scss
@use 'sass:color';
```

### 2. `scale()`関数の利用

`scale()`関数の引数はいくつかありますが，今回は明度(Lightness)のみを変化させます．

`scale()`関数の引数のうち，色(`$color`)のみは，引数名を指定する必要はありませんが，それ以外の引数は`$引数名: 値`の形式で記述する必要があります．

明度などの各パラメータは，-100%から100%までの値を設定することができます．今回は，パラメータを不等間隔で設定する都合上，あらかじめSass変数として数値の配列を作っておいて，`@each`で繰り返し処理を行います．

``` scss
@each $i in $color-step {
  --color-primary-#{$i}: #{color.scale($primary, $lightness: (($i - 50) * 2%))};
  --color-secondary-#{$i}: #{color.scale($secondary, $lightness: (($i - 50) * 2%))};
  --color-tertiary-#{$i}: #{color.scale($tertiary, $lightness: (($i - 50) * 2%))};
  --color-neutral-#{$i}: #{color.scale($neutral, $lightness: (($i - 50) * 2%))};
}
```

## 参考

公式ドキュメント: https://sass-lang.com/documentation/modules/color/#scale
TailwindとMUIで作るデザイン


# 囲みボタン
参考：[線で囲ったタイトルデザイン3](https://0forest.com/subtitle-frame-css/)

```css
<div style="position:relative;border:1px solid #efc4c0;border-radius:4px;padding:1.5em 1em;">
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#ffffff;border-radius:4px;color:#F6BCAC;line-height: 1em;">タイトル入力</div>
<div style="margin: 0; padding: 0;">テキスト入力</div>
</div>
```

これを tailwindとmuiで構成すると…
```react
                <div className="relative border-2 border-orange-200 rounded-md p-3">
                  <div className="absolute top-0 left-2 -mt-2.5 px-2 bg-white rounded-md text-cyan-950 font-semibold text-sm">
                    支払い方法
                  </div>
```
BlenderのPythonにおけるアクティブオブジェクトについて

## アクティブオブジェクとは

Blenderのアクティブオブジェクトは、処理対象あるいは処理結果のオブジェクトです。
Pythonでは、現在のコンテキスト（`bpy.context`）を使って、通常、下記の3通りの方法で取得できます。

| コード                                | 意味                       |
| :------------------------------------ | :------------------------- |
| bpy.context.active_object             | アクティブオブジェクト     |
| bpy.context.object                    | コンテキストのオブジェクト |
| bpy.context.view_layer.objects.active | アクティブオブジェクト     |

ここでは、この3つの違いを紹介します。

## 準備

Blenderを起動して、立方体（Cube）とUV球（Sphere）を作成し、Sphereを選択してください。
ワークスペースをScriptingにして、右下のプロパティ画面を「オブジェクトプロパティ」（オレンジの四角）にして、右上のピンをチェックしてください。
ピン止めすると、選択を変えてもプロパティ画面の対象のオブジェクトが固定されます。

![a](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/0e564f8d-e008-91bb-a65e-0a93c62e132b.jpeg)


## アクティブオブジェクトの設定

`context`をコンテキストとします。
アクティブオブジェクトを設定するには、`context.view_layer.objects.active`を使います。
他の方法では設定できません。下記で確認できます。

```python
import bpy

obj = bpy.data.objects["Cube"]

context = bpy.context
# アクティブオブジェクトの設定
context.view_layer.objects.active = obj

# 失敗することを確認
try:
    context.active_object = obj
except AttributeError as e:
    print(e)

try:
    context.object = obj
except AttributeError as e:
    print(e)
```

**出力**

```
bpy_struct: Context property "active_object" is read-only
bpy_struct: Context property "object" is read-only
```


出力から、`active_object`と`object`が、read-onlyということがわかります。
`context.view_layer.objects.active`はエラーになっていないので、アクティブオブジェクトはCubeになっています。

## コンテキストを変えて確認

厳密に言うと、`context.object`はコンテキストのオブジェクトです。コンテキストはパネルなどの画面ごとに異なるので、特殊な場合に`context.object`はアクティブオブジェクトではありません。
下記を実行して確認してみましょう。下記では一時的にコンテキストを変更しています。

```python
import bpy

# プロパティ画面の取得
area = [area for area in bpy.context.screen.areas if area.ui_type == "PROPERTIES"][0]
# プロパティ画面での3通りの方法の確認
with bpy.context.temp_override(area=area):
    context = bpy.context
    print(f"{context.active_object = }")
    print(f"{context.object = }")
    print(f"{context.view_layer.objects.active = }")
```

**出力**

```
context.active_object = bpy.data.objects['Cube']
context.object = bpy.data.objects['Sphere']
context.view_layer.objects.active = bpy.data.objects['Cube']
```

アクティブオブジェクトはCubeですが、`context.object`はSphereです。
理由は、`context`が、プロパティ画面のコンテキストだからです。
プロパティ画面は、準備でSphereをピン止めしたので、コンテキストのオブジェクトがSphereになっています。
Sphereはアクティブオブジェクトではありませんが、コンテキストのオブジェクトなのでこのようになります。

アドオン開発では、`bpy.context`ではなく、メソッドの引数である`context`を使うことが推奨されています。そして、`context`を使うと`context.object`がアクティブオブジェクトでない可能性があります。したがってアクティブオブジェクトを取得するには、`context.active_object`を使うのが無難です。

## まとめ

`context`を現在のコンテキストとします。

- アクティブオブジェクトの取得は、`context.active_object`を使う。
- アクティブオブジェクトの設定は、`context.view_layer.objects.active`を使う。

## 参考

https://blender.stackexchange.com/questions/204074/python-bpy-context-object-vs-bpy-context-active-object

以上
Tauri + Svelte + Viteでimportを絶対パスで行いたかった

## 先に結論
vite.config.jsの記述を以下の通りにする
```js:vite.config.js
import { fileURLToPath } from 'url';

export default defineConfig(async () => ({
  plugins: [svelte()],

  // 中略

  resolve: {
    alias: {
      '$lib': fileURLToPath(new URL('./src/lib', import.meta.url)),
    },
  },
}));
```

## 試した方法
普段のSvelteのノリでvite.config.js、及びtsconfig.jsonを以下のように記載していたのですがnot workingでした。
```js:vite.config.js
import path from 'path';

export default defineConfig(async () => ({
  plugins: [svelte()],

  // 中略

  resolve: {
    alias: {
      '$lib': path.resolve(__dirname, 'src/lib'),
    },
  },
}));
```

```json:tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "$lib/*": ["./src/lib/*"],
    }
  }
}
```

```:発生したエラー
[plugin:vite:import-analysis] Failed to resolve import "$lib/foo/bar.js" from "src\App.svelte". Does the file exist?
```

日本語の情報が調べた限りでは無かったため一応記事に残しておきます。。
理由までは調べられていない（というかそんな英語力がない）ので詳しい方がいましたらぜひ補足をば…

## 参考記事
https://stackoverflow.com/questions/73765270/typescript-intellisense-cannot-find-absolute-path-when-using-imports
PowerApps コンテナーについて

PowerAppsについて今まで学習してきましたけれど、まだまだ知らない機能があるので記事にします。
今回はコンテナーです。

## コンテナ－とは
複数のコントロールを配下にひとまとめで配置できるコントロールです。
コンテナーは３つあります。

- **コンテナー**
- **水平コンテナー**
- **垂直コンテナー**

## グループ化との違い
グループ化も複数のコントロールをひとまとめにできる機能ですが、コンテナーは**配下**にひとまとめにできる点がグループ化と違う点です。

グループ化の場合、下記のGroup2の中にコントロールを追加（この例ではLabel6）しようとしてもGroup2の外にコントロールが追加されてしまいますが、コンテナーでは**配下**に追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/8ee04f2b-c164-264e-bff0-3db0f3ccca03.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/5d5d0d5c-37e0-6df9-5807-1f4caf2f65e7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/028f4f38-5e0f-c999-397d-70fbf349a1fa.png)
上記はGropu2外にLabel6が追加されています。

## コンテナー
配下に自由にコントロールを追加できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/d2950aa0-7551-c205-7c11-4aeba0093059.png)

水平、垂直コンテナーは水平あるいは垂直方向にコントロールが配置されていきますが、コンテナーは自由な配置が可能です。
コンテナー自身にプロパティで色や罫線をつけられるので、上記のRectangle2を省略できた気もします。
また、ドロップシャドウのように影の濃さも設定できるので見栄えの良さも向上します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/bb923636-cd76-5964-1e15-ecdd1bbc4e76.png)

## 水平・垂直コンテナー
### 水平コンテナー
配下に水平方向にコントロールを追加できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/8fdb3af8-abab-49aa-c1be-7d44d58a0e67.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/ce770b1f-9412-c65e-bd31-aaf7d85a5713.png)

---

### 垂直コンテナー
配下に垂直方向にコントロールを追加できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/0b858ddb-7734-22f8-81f4-684ba5851f5c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/b929d29b-3c29-45da-cbb1-9d5ba4373535.png)

---

### 主なプロパティ（コンテナー）
プロパティもコンテナーは今までみてきたものと違いました。
コンテナー本体でよく使用するものを記載します。

- [x] **通信方法 ※LayoutDirection**
コンテナーの水平と垂直方向の切り替えが可能

- [x] **両端揃え(水平/垂直方向) ※LayoutJustifyContent**
配下のコントロールの並びを変更可能

- [x] **配置(水平/垂直方向) ※LayoutAlignItems**
配下のコントロールの並びを変更可能

- [x] **ギャップ ※LayoutGap**
配下のコントロールの間の間隔を指定

- [x] **ドロップシャドウ ※DropShadow**
影の濃さを指定（None、Light、Semilight、Regular、Semibold、Bold、ExtraBoldから選択）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/90d65cd6-1b40-35e8-541f-2116926eb568.png)

---

### 主なプロパティ（コンテナー配下のコントロール）
今まで見てきたコントロールもコンテナーに追加した場合は、プロパティが追加されているようです。

- [x] **コンテナー内に配置 ※AlignInContainer**
「コンテナー別に設定」は親のコンテナーのLayoutAlignItemsプロパティを継承
「カスタム」は左（または上）揃え、中央揃え、右（または下）揃え、拡大から選択

- [x] **幅(伸縮可能) ※FillPortions**
幅または高さを自動伸縮させる。オフの場合はFillPortionsが0（すなわち固定幅）オンにすると1（自動伸縮します）
- [x] **部分を塗りつぶす ※FillPortions**
他のコントロールの幅または高さのとの比率。

- [x] **最小幅/高さ ※LayoutMinWidth LayoutMinHeight**
コントロールの最小サイズ。最低限確保したいサイズ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532455/db1b0756-199c-0c7a-5719-a530b02564da.png)

---

今までグループ化して配置をまとめておりましたので、コンテナーはこんなにも便利と思えましたので記事にいたしました。
最後までお読みいただきありがとうございます。
Glideで項目・カテゴリーごとに表示内容を変更させたい

## 目指す形
- Google spreadsheetの、シート先頭の項目がアプリの先頭画面に並ぶ
- 1つの項目をタップすると、その項目に一致している内容が表示されている

![画面収録 2024-01-02 17.54.50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/aa1abca6-9704-26ec-bac3-d9336fe1a08b.gif)

## スプレッドシート準備
スプレッドシートを使用します。シートは2枚用意します。
- シート1：全項目が書かれたシート

![スクリーンショット 2024-01-02 17.34.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/0d08d331-ff8a-a7a8-faf3-c70aff9cfb3b.png)

- シート2：項目と内容がセットになっているシート

![スクリーンショット 2024-01-02 17.34.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/eae3be44-8aab-2e24-7957-1b0d9e4e01fa.png)


## Glideの操作
### 事前準備
- [Glide](https://www.glideapps.com/)へログインします
- `New app`から新しいアプリを作成します
- `Google Sheets`を選択し、先ほど準備したスプレッドシートと連結します

![スクリーンショット 2024-01-02 17.21.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/20dcdb32-8cb7-4e6d-6b5c-2054131121e1.png)

- すると既に下記のような状態になっています
![スクリーンショット 2024-01-02 17.23.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/983dc9ff-37ee-437f-c418-5d4fe6c4ac65.png)
- ただ、それぞれのタイプを押しても中身は空白です
![スクリーンショット 2024-01-02 17.25.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/bca0e3da-54cf-1955-9f3a-0501876c6a99.png)

### 【本題】 項目・カテゴリーごとに表示させる
- `Data`から`タイプ`シートを表示させ、新しい列を追加します

![スクリーンショット 2024-01-02 17.28.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/b682caa0-4109-a5a7-99d2-58b8d9b52710.png)

- 下記のとおりに設定します
    - Type: `Relatiom`
    - Relate to items where the value in: `タイプ`シート
    - Matches the value in: `詳細`シート > `タイプ`列

![スクリーンショット 2024-01-02 17.30.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/b805f3d0-f528-60a8-df3a-89aff0323809.png)

- `Match multiple`にチェックをいれ、`Save`ボタンを押します
- 下記画像のようになっていればうまくいっています

![スクリーンショット 2024-01-02 17.35.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/fa4a36ae-b0eb-57f0-1844-bc926df45426.png)

- 画面上方の`Layout`タブに戻り、`くさ`をタップします
- 画面左の`COMPONENTS`の右にあるプラスボタンを押し、任意のコンポーネントを追加します

![スクリーンショット 2024-01-02 17.43.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/b1ab3d93-f8aa-0e09-b20e-255402a81c0c.png)

- これで画面が画像のように変化しており、`ほのお`や`みず`も同様の設定になっていれば成功です

![画面収録 2024-01-02 17.45.39.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/a09c17d0-4231-0f13-2d44-0f7368a98d8d.gif)

## 参考サイト
https://qiita.com/rererere_25/items/8d71a7584f30ea642479

https://zukan.pokemon.co.jp/