OmniAICreator/Qiita-1.07M huggingface dataset:
【メモ】UI設定関連

# Questions in UI configurations

## Section

### Page context設定について

以下4パターンから一つ設定できる。それぞれの使う場面について説明する。
  - Use clipboard page
  - Use current page context
  - Use page defined by property
  - Use data page


1. Use clipboard page
    任意のPage名を指定する。Section描画される際は、指定されたPegeのデータで画面描画を行う。気を付けるポイントは、Pageが空の場合メモリ(Clipboard)に作成されないので、画面描画前の初期化処理が必要です。  
    設定例:(Embedded sectionは`Data-xxx`配下で定義済)  
    P.S.Page名の形式は以下3パターンで設定できる。どれもPae&ClassesでPage定義を必要とする。
    - 今のContextでアクセスできるSingle Page型プロパティ`.MemberInfo`
    - pyWorkPageと同じ階層の`PageName`
    - 何階層か下の`PageName.subPage1.subPage2`
    ![pic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/9803decf-1b7b-9906-733e-0a45a652fb8d.png)

    ![202401282024.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/ebcf334f-38f3-d292-3e9b-ea58a97440ee.png)
    
    上記設定した状態でケース作成すると、以下通りEmbedded sectionは表示されない。
    ![202401282028.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/b4e533e6-49c5-ca5e-e763-45c0c9e96070.png)
    
    Clipboardを見るとPageが作成されてないのが分かる。
    ![202401282029.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/8d8827e4-45fb-30db-3533-06dd269e3f77.png)
    
    画面描写前にPage初期化させれば、sectionが表示されるようになるので、 
    ここではFlow ActionのPre-processing処理として、Data Transformで初期化処理を行う。
    ![202401282030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/2505af6e-9d67-0be2-f3f4-351d33174bd3.png)

    ![202401282034.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/8c2f3802-75fd-05aa-863d-38c06b373fb3.png)

    再度ケース作成すると、sectionが表示されるようになる。  
    ![202401282035.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/291f2658-38e7-b8fe-195f-f96ebd1f51a1.png)

    Pageも作成されているのをClipboardから確認できる。
    ![202401282036.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/b7fd9069-935f-4542-833a-b74fda1b51c6.png)

2. Use current page context  
    Use clipboard pageパターンで、Page名が「`pyWorkPage`」に指定されたと見なす。
    
3. Use page defined by property  
    Use clipboard pageパターンで、Page名が渡されたpropertyに格納される。
    
4. Use data page  
    通常のPageの代わりにData pageを使う。Sectionが描画されるタイミングでData Pageが更新される。

## Dynamic Layout Group

### Source設定について

PropertyとData Pageの2パターンを使える。  
Propertyは`.listPropName`でPage List型のproperty名を指定したうえ、中に当該Page Class配下のSectionを置く、App ExplorerからDrag&Drop可能。  
こちらもEmbedded sectionと同様、初期値がないと表示されない。  
Data Pageはまだ使ったことがないので割愛する。  
設定例：  
![202401282225.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/02f0d39d-f382-48cc-2fe0-eea616ecc377.png)

![202401282229.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/d4e5a86e-13c9-bfd1-397a-8537a89bb3f6.png)

Embedded sectionの設定画面：  
![202401282226.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/821b9b1e-e2ee-f0b8-c343-6987cf7c8f5c.png)

中のsection：  
![202401282227.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676604/de801576-33f1-963a-d73b-9b35a2a82605.png)
React開発を始める

# はじめに
React開発の始め方をアウトプットします．

# 1. Node.jsのインストール
ReactはJavaScriptのライブラリのため，JavaScriptを実行するための環境構築として，Node.jsをインストールする．
公式ページから奨励版をダウンロード．ダウンロードしたファイルを実行することで，インストールできる．

https://nodejs.org/en

# 2. npx create-react-app ディレクトリ名
ターミナル（windowsの場合はコマンドプロンプトやpowershell）で`npx create-react-app ディレクトリ名`と打つことで，指定したディレクトリ名のReact環境が構築される．
ディレクトリ内に生成されたApp.jsx内に，jsx記法で記述していく．

# 3. npm start
ターミナルでcdコマンドを使い，React開発ディレクトリに移動し，`npm start`コマンドを実行．プロジェクトが実行され，現在の状態を確認することができる．
認証局の階層構造について理解しよう

# 認証局の階層構造について理解しよう
認証局は階層構造になっており、下位の認証局は上位の認証局に証明書を発行してもらっている。

## 前提知識
そもそも認証局って？ => 認証局は電子文書のやり取りで重要な役割を果たす電子署名の信頼性を高めるための認証を行っている第三者機関であり、 具体的な役割は本人確認と電子証明書の発行と電子証明書の失効などが挙げられる。

認証局には「パブリック認証局」と「プライベート認証局」の2種類があります。パブリック認証局は社内に閉じられた範囲ではなく、 広い範囲で公に対して証明を行うことのできる認証曲で、監査法人による審査の上、規格に合格した信頼性の高い機関です。一方でプライベート認証局は、社内等閉じられた範囲で、 企業ポリシーに基づき運用される前提のものになります。

また最上位のルート認証局の配下の認証局を中間認証局といいます

[階層構造の前に、認証局の役割等はこちらを参照してください。](https://hrnote.jp/contents/roumu-denshikkeiyaku-ninsyokyoku/ "")

![認証局1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087483/dca5777c-0780-0d63-8f6f-a301bcbaa347.png)
上記画像のようにサーバはクライアントにサーバ証明書を送付します。この時に送られてきたサーバ証明書は認証局Dによって認証されています。つまり認証局Dの秘密鍵で暗号化されており、認証局Dの公開鍵で検証する必要があります。 クライアントは検証を行うために、認証局Dの公開鍵を取得するため認証局Dの公開鍵証明書を取得します。
<br>
![認証局2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087483/fbf3b56f-a6b4-cf8c-83c1-1a256826c1e3.png)
認証局Dの公開鍵証明書は認証局Cによって認証されています。つまり認証局Cの秘密鍵で暗号化されているため認証局Cの公開鍵が必要です。認証局Cの公開鍵を取得するためには認証局Cの公開鍵証明書を取得する必要があります。
<br>
![認証局3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087483/5967b826-9f0b-49d9-6db4-361f27a8819a.png)
<br>
![認証局4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087483/278066d9-1db6-cc2d-39cf-27c2966fd7fa.png)
認証局Bの公開鍵証明書はルート認証局によって認証されています。つまりルート認証局の秘密鍵で暗号化されているためルート認証局の公開鍵が必要です。このようなルート認証局までの道のことを認証パスといいます。 通常ルート認証局の公開鍵はPCに登録してあるので、ルート認証局の公開鍵を使用し、ルート認証局の直下の認証局Bの公開鍵証明書を検証して、認証局Bの公開鍵を取得します。
<br>
![認証局5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087483/76e9df19-0d0d-fa91-3c01-322da9f58bff.png)
ここで認証局Bの公開鍵を取得できたということは、の認証局Cの公開鍵証明書を検証することができるので認証局Cの公開鍵を取得できます。
<br>
![認証局6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087483/3b2714a2-ac33-401d-e726-055ba5344fb7.png)
さらに認証局Cの公開鍵を取得できたということは、の認証局Dの公開鍵証明書を検証することができるので認証局Dの公開鍵を取得できます。
<br>
![認証局7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087483/eece5335-ce51-a932-25af-3cba1f70b7b8.png)
上記の画像のように、認証局Dの公開鍵を取得出来たら、サーバ証明書を検証することでサーバの真正性を確認できてサーバの公開鍵を取得することが可能になります。これが一連の認証局の流れになります。

## ルート認証局の設定について
先ほどパブリック認証局に触れました。 あらかじめブラウザのベンダやOSのベンダがパブリック認証局のルート証明書情報を設定してくれてるので、そもそもルート認証局の証明書の偽装や、なりすまし等を疑わずに使用することができます。

一方で、プライベート認証局のルート証明書を使用する際は、利用するPCなどにルート証明書を登録する必要があります。例えばR社が自身のルート証明書を発行して、 それをもとに会社関係者とやり取りをする場合はクライアントPCなどにR社ルート証明書を安全に渡して登録する必要が出てきます。R社ルート証明書を登録し無かった場合は公開鍵を取り出せないのディジタル署名を検証することができなくなります。

<br>
ここで令和2年秋 情報処理安全確保支援士試験 午後1 問2の問題の一部を見てみます。

![支援士過去問.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087483/523871f9-c891-4387-6d96-242f172af329.png)
先ほど説明した通り、R社のプライベート認証局のルート証明書をクライアント先のPCに登録できない場合、R社の公開鍵を取得できないため、R社が自身の秘密鍵で作成したディジタル署名をクライアントは検証することが不可能になります。
よってd=ディジタル署名、e=検証 となります。
AWSのEC2でパルワールドのサーバを立ててみたときの備忘録

EC2でパルワールドのサーバを立て遊んだときの備忘録的なやつです
2024/01/26の夜に始めたところなのでなにかあれば随時書き込んで行こうと思います。

# インスタンスのスペック

| 項目 | 内容 |
|:-:|:-:|
|インスタンスタイプ|m7i.large → m7i.xlarge ※2|
|OS|Amazon Linux 2※1|
|vCPU|2|
|メモリ|8GB → 16GB ※2|
|ストレージ|50GB|

※1 Amazon Linux 2023を使おうと思ったのですが、パルワールドのサーバを立てるために利用するsteamcmdが32bit版しかなく、Amazon Linux 2023だと32bit版のgcc libとかを入れるのがめんどくさかったのでAmazon Linux2を使いました。
※2 拠点数2合計放逐パル30になったぐらいで8GBだとまともに動かなくなったので、
    マシンパワーをあげました。こういうのすぐあげられるところがクラウドのいいところですね。


# 設定ファイル

パルワールドの経験値増加量とか設定できるファイルがあります。
サーバ作りたてのときは設定ファイルそのものがないので以下のコマンドでまずはテンプレートをコピーする必要があります。
（サーバによってパスが違うかもなので適宜読み替えてください）

``` shell
cp -pf /home/steam/Steam/steamapps/common/PalServer/DefaultPalWorldSettings.ini /home/steam/Steam/steamapps/common/PalServer/Pal/Saved/Config/LinuxServer/PalWorldSettings.ini
```

# バックアップ

SaveGamesフォルダをバックアップしておけば各プレイヤーのレベルとか手持ちのパルとか拠点の状態とかは復旧できるっぽい。
しかし以下の情報はリセットされるためなにか他にバックアップする必要のあるファイルがありそう。

* ファストトラベルの登録フラグ
* マップの開放度合い
* チュートリアルの進行度

復旧に使ってるコマンドは以下の通り。
cronで「/home/steam/Steam/backup」にデータをバックしているので下記のコマンドで戻している。

``` shell
cp -r /home/steam/Steam/backup/SaveGames/0/<サーバのID?>/*  /home/steam/Steam/steamapps/common/PalServer/Pal/Saved/SaveGames/0/<サーバのID?>
```


# 参考にしたサイト

## パルサーバの建て方

基本はテックガイドを参照すればできました。

https://tech.palworldgame.com/dedicated-server-guide#linux

SteamCMDを入れる方法は以下を参照

https://developer.valvesoftware.com/wiki/SteamCMD#Linux

## SWAP領域の追加

~~公式が推奨するサーバのメモリは16GBなので8GBだとかなり心もとないです。 
というか4人ぐらいで遊び始めると3時間おきぐらいにOut of Memoryでクラッシュすることがありました。
もちろんメモリを増設（EC2だとインスタンスタイプの変更）してもよかったのですがお金をケチろうと思い今回はswapを入れて対応してみました。~~
拠点が２個になったあたりでスワップあっても8GBだとすぐにクラッシュするようになってしまったので、
マシンパワーをあげました。
とはいえスワップ領域は設定しておくにこしたことはないので下記を参考にしてスワップ領域を設定しておいたほうが無難です。

とりあえず参考にした下記のサイトでは1GBの追加ですがひとまず10GBのswap領域を設定してみました。
追加した後は今のところOut of Memoryではダウンしていないため有効な設定のようです。

https://www.digitalocean.com/community/tutorials/how-to-add-swap-space-on-ubuntu-20-04-ja
【Salesforce】Spring '24 リリースノート気になるまとめ

[Spring '24のリリースノート](https://help.salesforce.com/s/articleView?id=release-notes.salesforce_release_notes.htm&release=248&type=5)

ぴえ的に気になったトピックだけのまとめです(\*'ω'*)見出しはリンクになっています！

#### [2024 年 4 月から MFA がデフォルトでオンに](https://help.salesforce.com/s/articleView?id=release-notes.rn_general_mfa_default.htm&release=248&type=5)
2024 年 4 月 8 日以降に作成される本番組織はデフォルトでMFAがオンになるそうです。
MFA除外は権限セットで可能です！

https://qiita.com/piepie1231/items/f7b1e7a3c919b95dbabb

#### [公開リストビューの表示を編集するときに「ロールおよびロール階層を表示」権限を適用 (リリース更新)](https://help.salesforce.com/s/articleView?id=release-notes.rn_customization_general_roles_role_hierarchy_release_update.htm&release=248&type=5)

Spring '24から適用可能で Winter '25で適用開始のようです。
リストビューを特定のロールに表示するように設定できるようにするには、「ロールおよびロール階層を表示」権限を付与する必要があります。
ロールを多用している組織の方は要チェックかと思います。

#### [API パフォーマンスを改善するための最後に使用した項目の更新の削除](https://help.salesforce.com/s/articleView?id=release-notes.rn_customization_general_no_mru_updates.htm&release=248&type=5)

インテグレーションユーザの使用についてもまとめています↓

https://qiita.com/piepie1231/items/f141fc9d6d74e0321b0f

#### [Lightning レコードピッカーコンポーネントを使用したレコードの検索 (正式リリース)](https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_record_picker_ga.htm&release=248&type=5)

最大100レコードの検索ができるそうです。使ってみたい(\*'ω'*)


#### [DML のロールバックとセーブポイントの解放後のコールアウトの実行](https://help.salesforce.com/s/articleView?id=release-notes.rn_apex_SavepointCallouts.htm&release=248&type=5)

ご存知のとおり、同じトランザクション内でDML操作の後にコールアウトが実行できません。
がロールバックして Database.releaseSavepoin()した後なら可能になったそうです。

制約はまだあるものの今後活かせそうな機能改善かと思います！

#### [Apex での Zip ファイルの圧縮および抽出 (開発者プレビュー)](https://help.salesforce.com/s/articleView?id=release-notes.rn_apex_compression.htm&release=248&type=5)

開発者プレビュー中ではありますが、Apexでファイルを圧縮することができるようです。

#### [ [設定] からすべての Sandbox 組織へのログイン](https://help.salesforce.com/s/articleView?id=release-notes.rn_dev_environments_login_mydomain.htm&release=248&type=5)

地味に面倒だったので嬉しいです。

#### [Salesforce Functions の廃止](https://help.salesforce.com/s/articleView?id=release-notes.rn_functions_retired.htm&release=248&type=5)

これはリリースノート見る前にお知らせ見ていたので知っていましたが、
色んな可能性のある機能で期待していたのでまあ残念ですね。

#### [エクスペリエンスビルダーの新しい [変更履歴] パネルでサイトの更新を追跡](https://help.salesforce.com/s/articleView?id=release-notes.rn_experiences_change_history_panel.htm&release=248&type=5)

サイトの変更履歴が確認できるようになりました。
今までなかったのが謎ですね！

#### [2024 年 6 月に廃止される Salesforce for Outlook](https://help.salesforce.com/s/articleView?id=release-notes.rn_sales_sfo_retiring.htm&release=248&type=5)

代替機能としてOutlookインテグレーションとEinstein活動キャプチャがあるそうです。
Einstein活動キャプチャの設定は結構簡単だった覚えがあるのでおすすめですが、ライセンスは気をつけてください。

### あとがき

さっくり読み流したのですが、LWCもApexも良い感じなリリースがあって良かったです(\*'ω'*)

Spring '24のリリースは**2024/2/11**です！
バイオをかじったわたしがGPTsの連携にいのちのかがやきを感じた話

こんにちは。
ChatGPTの有料会員になって8か月目のYukiです。
レベル低いので、お気を付けください。
自己紹介は末尾に。

ここでは、noteに書いているものの中で
ここに載せても許されそうなものをご紹介します。

最新記事：自分の中で少しまとまった感覚になりました。

https://note.com/equity2050/n/n20302220da92

連携の詳細を具体例から紹介

https://note.com/equity2050/n/n57db45ca914a

2つ目の仕事の出し方としては、
Knowledgeにエニアグラムに合う職業について入力しています。
MBTIもそうですね。

これにより、個人情報を使わずに職業診断ができます。
占いみたいなものです。
もちろん、個人情報を入れてより深い診断も可能です。

調べ方を調べてくれるGPTsに連鎖させると、
それぞれの職業の調べ方を教えてくれます。

少ない経験ですが、就活の情報収集をうまくできている人は少ない印象です。
こういうものがあると、当事者も楽だし、わたしのヒアリングも短くて済みます。


自己紹介

https://note.com/equity2050/m/m326618d813b8
【Xcode】改行の目安を表示する

# はじめに
普段大きいモニターを使って開発をしているので1行の文字が200行とかになっても1行で表示されて見やすいのですが、モニターの接続を外してmacbook単体で開発してると折り返し表示されて見にくかったりします。

そこで、「1行〇〇文字になったら、改行しよう！」と決めても現在が何文字なのかパッと見でわかりません。

ある設定をするだけで、改行目安のところに線が表示されて一目でわかるようになります。

![スクリーンショット 2024-01-28 19.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/781ce963-342e-d432-58c2-233d93fb59a2.png)

# やりかた
① 「Xcode」を押します。
② 「Settings...」を押します。
![スクリーンショット 2024-01-28 19.59.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/2b12ae45-2d98-b482-3204-b42a5fffcdd2.png)

③ 「Text Editing」を押します。
④ 「Page guide at column:」にチェックを入れます。
![スクリーンショット 2024-01-28 20.02.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/944d2243-2096-3b34-f9e5-3ebc507b2a33.png)

⑤ 改行の目安の文字数を入力します。
![スクリーンショット 2024-01-28 20.04.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/f3bf5a94-bf6d-451f-306a-9bc55ad690f4.png)

# おわり
読みやすいコードが書ける！

# 参考記事
https://blog.code-candy.com/xcode_setting/
［Python/Colaboratory］Google Drive 上の CSV ファイルを読み込む

## この記事で書くこと
- Colaboratory で Google Drive 上の CSV ファイルを読み込む

## 前提条件
- ディレクトリの構成は次の通り
```
マイドライブ
└ Colab Notebooks 
    ├ MachineLearning_20240128.ipynb
    └ wine.csv
```
![スクリーンショット 2024-01-28 20.01.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/96fcc931-443e-ef1f-bd34-79d2139f744f.png)

## コード
```python
import pandas as pd
from google.colab import drive

drive.mount('/content/drive')
df = pd.read_csv('drive/My Drive/Colab Notebooks/wine.csv')
df.head()
```

## 出力結果
![スクリーンショット 2024-01-28 20.04.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199441/5b50d7cf-0e32-3955-feab-6dabf9769ce2.png)
【書評】世界一流エンジニアの思考法

## はじめに
投稿者の方でも多く書評が上がっている「世界一流エンジニアの思考法」を年明けから読んでいましたが、個人的に単なる自己啓発本という位置づけではなく、読み手のマインドや、ともすれば生き方についてきっかけを与えてくれる良書なのではないかと思いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317553/aec61cde-0a1a-897f-34d8-ef2559e9e064.png)

https://aoyamabc.jp/collections/book/products/engineersthink

## 良書と思った理由
「自分がモヤっと思っていたことや、ダメだったなと思うを言語化してくれたこと」だと思います。ネガティブなことや、自分がやってみてダメだったことって、どうしても言葉に落とすところが難しかったりするんですが、そこをきちんと拾い切れていて、明確なセンテンスにしてくれているところです。

## 目からうろこだったこと
僕もコーディングや設計をやっていたころから人よりも作業が遅く、理解にも時間がかかっていたので「才能がない」とか「この仕事向いてない」といつも思っていて、個人の嗜好は置いておいて、エンジニアを職業としてやっていくしかないのかな・・・と思っていたんですが、

::: note info
 - どんなに頭のいい人でも理解には時間がかかる。だから理解には時間をかけた方がいい。
 - 30分から1時間を割当てたら、そのこと「のみ」に取り組む。すぐに終わらないものは、人に問い合わせるなど、物事を進めておいて待ち状態にし、次のタスクに進む。
 - 一つのことをやっているときは、他のことは一切せずに集中する。
::: 

というできるひとこそ、自分が出来ることを最大限にやろうとしていて、そのやり方の問題なんだなというのが理解できたのがとても大きかったです。

## Be Lazyという考え方
エンジニアは怠惰であれ。これはこの本を読む前からは耳にしたことのあるキーワードですが、実際に今の日本で業務をしていると、怠惰でいるかな？というのが正直な思いですよね。いろんな作業がマルチタスクになって、納期厳守が第一で、少しでも品質に問題があると、途端に使えないエンジニアの烙印を押され、評価が下がる…。そんな思いを抱えながら業務を行っているのが、正直な気持ちなのかなと思います。

::: note info
ちなみにBe Lazyの考え方は以下の通り。
 - 望んでいる結果を達成するためには、最低限の努力をする
 - 不必要なものや付加価値のない仕事(過剰準備含む)をなくす。
 - 簡潔さを目指す。
 - 優先順をつける。
 - 時間や費やした努力より、アウトプットと生産性に重点をおく。
 - 長時間労働しないように推奨する。
 - 会議は会議の時間内で効率的かつ生産的に価値を提供する。
:::

Be Lazyの考え方では、優先順位はつけても、高いものをきめたらそれ「しか」しない。集中して取り組む。日本のように優先順位はつけるけど、結局は書かれていること全部やるという進め方を否定していることが理に適っているなと思いました。

やることを極力少なくして、より価値の高いことに集中する。

とても良い考え方と思う一方、単なる「作業」ではダメだということを示唆しているのかと思います。Be Lazyという考え方は、字面だけの良さそうな考え方でなく、「やることに集中する以上、単なる作業で時間を潰すのではなく、常に価値の高い業務を取捨選択し、効率を考えてアウトプットする」という、"小さなことからコツコツと"に慣れている日本人の考え方には実は結構ハードルの高いことではないのかなとも思う次第です。

それでも、エンジニアしてこの視点や考え方というのはとても重要。実際の業務とは完全にまではいかなくても折り合いをつけて取り組んでいきたいマインドだと思います。

## 「批判」の文化に対する警鐘
第7章 AI時代をどう生き残るか？という章で、筆者の牛尾さんは何故に日本にはChatGPTのようなサービスが生まれなかったのか、という問いに対して、「アメリカは専門性を高めるという蓄積に価値が置かれ、(品質が担保出来ないことがあるため)スピードは思ったよりも重要視されていない」ということと併せて、日本における「批判文化」について指摘と強い警鐘を鳴らしています。

2020年6月のCOVID-19におけるCOCOAのリリース後に沸き起こったアプリに対する批判をはじめ、ソフトウェアには常に不具合やバグがつきものなのにもかかわらず、日本では常に完璧なものを求められ、先陣を切って何かにトライする人に対して嫉妬にも似た粗探しや批判、冷笑、抽象が渦巻き、新しいチャレンジを阻害している、というものです。

これは個人的にもとても身に覚えがあり、僕も新しいサービスや提案をしたときに、実際には権限もないし、手も動かさない人たちから、口だけ出されて、この人たちのために提供するサービスって何なんだろ？と思ったこともありますし、今もいろんな部署の方々から「専門家なら出来て当たり前」「完璧なものが出来て当然」というマインドが多く、それによって心が潰れる温床がたくさんあるよな、と実感します。

もちろん批判する側も、彼らの立場があるから、と理解している面もありますが、結局批判する人たちって大体「何もしていない」人たちなんだな、と経験上思うわけです。

ここで牛尾さんは、大事なマインドとして

 - Contribute(貢献)する文化
 - 人に何かを期待するのではなく、まず「自分がどういう貢献ができるか？」という公共性をベースに考える
 - 常に「ありがとう」といえる感謝の気持ちを心がける。

ことの重要性を説いています。

これは、今すぐ働いている場所の環境や文化を変えることは出来なくても、今自分が出来ることって何だろう？というのを、会社基準ではなく世の中基準で考えたら、足りない部分や吸収しなくちゃいけない部分というのが見えてくるし、感謝して貢献するという気持ちを持ち続けて発信することによって、自分の仕事環境がちょっとでも変えて行けるのかな、と思います。

牛尾さんが見てきたこと、世界一流のエンジニアの皆さんがやっていることって、本当に「口で言うのは簡単だけど、実際にやるのは難しいこと」だし、彼らだって僕らとそこまで大差ないのだから、いますぐでなくても、心がけ一つで、ほんのちょっとは近づける存在なのではないか？と気づかされた一冊でした。

## 感謝の気持ちを込めて
牛尾さんにはとても良い書籍に出会わせて頂き、本当にありがとうございました。
書かれていることのすべてを今すぐできるわけではないし、現実と折り合わせる必要はあるけど、エンジニアとしてでなく、人として重要なマインドを気づかせてくれたのかなと思います。

あと、クラメソさんの書評も大変よかったので、リンク張らせて頂きます。
https://dev.classmethod.jp/articles/review-how-world-class-engineers-think-book/
SMACSS CSS 設計 覚書

# SMACSS とは何ぞや

```
Scalable and Modular Architecture for CSS
```

上記の略称を ``SMACSS`` と呼称する。
訳すならば「拡張性が高く、モジュール化された CSS 構造」といったところか。
目的に応じて CSS ルールを記述するファイル(モジュール)を使い分け、
保守性を高めようとする CSS 設計の考え方。

SMACSS では CSS ファイルを以下の単位で分割して管理する。

* [Base ルール](#base-ルール)
* [Layout ルール](#layout-ルール)
* [Module ルール](#module-ルール)
* [State ルール](#state-ルール)
* [Theme ルール](#theme-ルール)

# Base ルール
Web ページの土台となるルール群を記述する。
Class セレクタや ID セレクタを一切含まず、
個々の要素へ適用するデフォルト設定を記述する。

Base ルールとしてよく使用される CSS ルールセットを下記に例示する。

* [normalize.css](https://github.com/necolas/normalize.css)
  HTML 要素のブラウザ間のデフォルトスタイルの差異を吸収し、
  標準化しようと考える CSS ルールセット。
* [Reset CSS](https://meyerweb.com/eric/tools/css/reset/)
  HTML 要素のデフォルトスタイルを打ち消すことで
  ブラウザ間のデフォルトスタイルの差異を
  標準化しようと考える CSS ルールセット。

## より詳しく知りたい人
[Base Rules](http://smacss.com/book/type-base/) を参照。

# Layout ルール
レイアウトに関するルールを記述する。
ページ全体のレイアウトに関するルールか、
個別のコンポーネント内のレイアウトに関するルールかは問わない。

## より詳しく知りたい人
[Layout Rules](http://smacss.com/book/type-layout/) を参照。

# Module ルール
BEM の[Block](https://qiita.com/JhonnyBravo/items/7e4ce938459fa7f348a4#block) と同様の考え方。

## より詳しく知りたい人
[Module Rules](http://smacss.com/book/type-module/) を参照。

# State ルール
BEM の [Modifier](https://qiita.com/JhonnyBravo/items/7e4ce938459fa7f348a4#modifier) と同様の考え方。

## より詳しく知りたい人
[State Rules](http://smacss.com/book/type-state/) を参照。

# Theme ルール
ページ全体の配色やレイアウトをガラッと変化させたい場合に使用する。
Github を例に挙げると、画面を Day theme で表示させるか
Night theme で表示させるか選択できるようになっている。

## より詳しく知りたい人
[Theme Rules](http://smacss.com/book/type-theme/) を参照。

# 参考資料
* [ざっくりつかむ CSS 設計(高津戸壮 著、マイナビ出版)](https://honto.jp/ebook/pd_31436588.html)
* [SMACSS](http://smacss.com/)
MUIを使用して行ったカスタマイズ集

# tooltip
色変更
```jsx:theme.js
"use client";
import { createTheme } from "@mui/material/styles";
import type {} from "@mui/lab/themeAugmentation";


const theme = createTheme({
    components: {
        MuiTooltip: {
            styleOverrides: {
                tooltip: {
                    backgroundColor: "black",
                },
                arrow: {
                    color: "black",
                },
            },
        },
    },
},
```


# iconbutton
hover時の色変更
```jsx:theme.js
components: {
        MuiIconButton: {
            styleOverrides: {
                root: {
                    backgroundColor: "black",
                    "&:hover": {
                        color: "#fff",
                    },
                },
            },
        },
    },

```

# menu
css勝手に追加される問題
![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469454/2a63541e-ccef-281f-609f-1322c578268a.png)

これを無くす書き方をしたかったがどこでスタイリングされているのか突き止められなかった

同じ問題で困っていた人を発見しmenuが関係すると判明
https://github.com/mui/material-ui/issues/13594
打ち消すような書き方をすればいけるのでは？と書いてあったのでやってみたら無事解決
```jsx
body {
  padding: 0 !important; 
  overflow: auto !important; 
}
```

実際に使用したコード
```jsx
export default function Layout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="ja">
            <head>
               //省略
            </head>
            <body css={scrollBarStyle}>
               //省略
            </body>
        </html>
    );
}

//emotionでスタイリング
const scrollBarStyle = css`
    padding: 0 !important;
    overflow: auto !important;
    }
`;
```

# textfield
width,heightの変更
コンポーネントを使用するページファイルにて記述
emotion/reactで記述
```jsx
const textfieldStyle = css`
        width: ${width}px;
        & .MuiInputBase-root {
            height: ${height}px;
        }
    `;

```
【SwiftUI】 Xcode15での「sizeThatFits」について

# Xcode15での「sizeThatFits」について

Xcode14までは普通に動作していたはずの「sizeThatFits」が
Xcode15からは急に適用されななくなったみたいで色々調べたところ、
***`#Preview` Macro***を利用している際には、「sizeThatFits」が使えないようでした。

その代わりに`trait`を付けて、`.sizeThatFitsLayout`を書けば解決できるということで、実際に試してみることにしました。


## sizeThatFits/sizeThatFitsLayoutについて
そもそもsizeThatFitsとsizeThatFitsLayoutというのは一体何でしょう？
基本的にsizeThatFitsというのは、ContainerをPreviewに合わせて、Viewのみのpreviewにするためのメソッドです。
レファランスから調べたところ、sizeThatFitsとsizeThatFitsLayoutは全く同じ機能であり、
sizeThatFitsLayoutの方がiOS17.0のリリースで導入されたみたいです。

:::note info
[Apple公式レファランス: sizeThatFitsLayout](https://developer.apple.com/documentation/developertoolssupport/previewtrait/sizethatfitslayout)
:::


## コードへの適用
```swift:InfoView.swift
#Preview(traits: .sizeThatFitsLayout) {
    InfoView(text: "Hello World!", imageName: "your image")
}
```


## 結果
<img width="500" alt="eb8a2e5b-0cde-6b2d-e859-0734f9a7f31b.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2831547/eb8a2e5b-0cde-6b2d-e859-0734f9a7f31b.png">


上記画像の通り、正常に適用されていることが確認できました。
TypeScriptでメソッドチェーンを使って与えた文字列を次々に変換する方法

こちらの記事のコードを少し変えて、[文字列を変換する関数]を引数にとるメソッドを用いてメソッドチェーンを実現する方法を考えました

https://qiita.com/takahasinaoki/items/1dd0017c5c44819874d6

```typescript
class StringManipulator {
  private value: string;
  constructor(input: string) {
    this.value = input;
  }
  toString(): string {
    return this.value;
  }
  // [文字列を変換する関数]を引数にとるメソッド
  changeString(fn: (str: string) => string): this {
    this.value = fn(this.value);
    return this;
  }
}
```

実行例
```typescript
class StringManipulator {
  private value: string;
  constructor(input: string) {
    this.value = input;
  }
  toString(): string {
    return this.value;
  }
  // [文字列を変換する関数]を引数にとるメソッド
  changeString(fn: (str: string) => string): this {
    this.value = fn(this.value);
    return this;
  }
}

// ひらがな変換
function kanaToHira(str: string): string
{
  return str.replace(/[\u30a1-\u30f6]/g, (s) =>
    String.fromCharCode(s.charCodeAt(0) - 0x60)
  );
}

// 使用例
const str = new StringManipulator("アイウabc")
  .changeString(kanaToHira) //ひらがな変換
  .changeString(str => str.toUpperCase()) //大文字変換
  .changeString(str => str.split('').reverse().join('')) //文字列を逆順にする
  .toString()
console.log(str);  // "CBAういあ" 
```
M5Goを使ったサーボモータの駆動（忘備録）その1

## はじめに
M5GoでServo Kit 180'を駆動させた記録です。サーボのドライバには、M5Stack用8chサーボドライバユニットを使っています。

https://www.switch-science.com/products/6478

https://www.switch-science.com/products/9199

## サーボ駆動の方法
以下のサイトで、緑色の「<>code」をクリックしてDownload ZIPを実行します。

https://github.com/m5stack/M5Unit-8Servo/tree/main

ダウンロードしたら、Arduino IDEの「スケッチ」－「ライブラリをインクルード」－「.ZIP形式のライブラリをインストール」を実行します。そして、先ほどダウンロードしたファイルを指定して、ライブラリをインストールします。

次いで、zipファイル中のexamples\SERVO-CTLのフォルダをArduinoのファイルの保管場所にコピーします。そして、その中に入っているSERVO_CTLをArduinoIDEで開き、必要に応じて編集します。今回は次のように表示機能を省略した内容に変更しました。

```
#include "M5_UNIT_8SERVO.h"

M5_UNIT_8SERVO unit_8servo;

void setup() {
    while (!unit_8servo.begin(&Wire, 21, 22, M5_UNIT_8SERVO_DEFAULT_ADDR)) {
        Serial.println("extio Connect Error");
        delay(100);
    }
    unit_8servo.setAllPinMode(SERVO_CTL_MODE);
}

void loop() {

    for (uint8_t deg = 0; deg <= 180; deg += 20) {
      unit_8servo.setServoAngle(0, deg);
      unit_8servo.setServoAngle(1, 180-deg);
      vTaskDelay(500);
      delay(100);
    }
}
```
このプログラムでは、0と1チャンネルのサーボモータの回転角を制御するので、8chサーボドライバユニットの0と1チャンネルにサーボモータを接続する回路を次のように作成しました。

![20240128_173432.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/700c8677-2aee-05f9-016d-7265eb307d27.jpeg)

使用した部品です（LOGOブロックは除く）。
![20240128_173751.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/1555685b-4d05-2e0b-5d92-450a5907e42a.jpeg)

## 開発環境
マイコンボード：M5GO Ver.2.7
ボード情報：M5Stack by M5Stack, ver. 2.1.0
Ardiono IDE：ver. 2.2.1
OS：Windows11
STM32C011の割り込みタイマーで遊ぶ(STM32C011J4M7)


目的
割り込みタイマーのテスト
なんで動いたのかは、あまり理解していない
各自、勝手に調べてね!!


![o_cop906.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/4b53cf28-635a-157f-84a3-1d1b22d59bb0.jpeg)



```c++



//GPIO_timer_interrupt_C011_1


//ヘッダー
#include <Arduino.h>


//定義
#define LOOP_INTERVAL 150000
#define BOARD_LED_PIN PA8

HardwareTimer *timer2 = new HardwareTimer (TIM1);


//初期化
void setup() {

  //ポートの初期化
  pinMode(BOARD_LED_PIN, OUTPUT);

  //割り込みタイマーの設定
  timer2->setOverflow(LOOP_INTERVAL, MICROSEC_FORMAT);       // 125ms
  timer2->attachInterrupt(intTimer);
  timer2->resume();

} //setup


//メインループ
void loop() {

  delay(500); //0.5秒待つ

} //loop


//割り込み
void intTimer(void) {

  //LEDの反転
  static int LEDstate = 0;
  digitalWrite( BOARD_LED_PIN, LEDstate);
  if ( 0 < LEDstate )
  {
    LEDstate = 0;
  } else {
    LEDstate = 1;
  }

} //intTimer



```
エンジニア長期インターンシップのすゝめ

## 概要
こんにちは😄
最近の趣味はゴルフと読書です🏌️‍♂️

今回は私の人生を変えたエンジニア長期インターンを自信を持ってお勧めします。

## 自己紹介

- 福岡の大学院生
- 東京と福岡の事業会社で長期インターン中
- データ分析や機械学習モデルの構築などを担当

## こんな方におすすめ
- 独学でプログラミングを勉強している人
- 就活を有利に進めたい人
- バイトをやめたいと考えている大学生

## エンジニアインターンを薦める理由
僕が長期インターンを薦める理由は4つあります。

### 1. 知識の幅が広がる
インターンを通じて、AWSやGCPなど、様々なツールや言語に触れる機会が増えました。これが、私の技術知識の幅を格段に広げてくれました。

どうしても独学だと知識が偏ってしまったり、費用の問題から使用できないツールとかもありますよね...


### 2. 実務経験ができる
長期インターンに申し込む前に、フリーランスも検討しました。
しかしほとんどの案件では、実務経験が必要になってきます😅

それに比べて長期インターンは実務経験がなくても受かりやすいと思います。

また、現場とのコミュニケーションやプロジェクトマネジメントなど、ビジネスの経験も同時にすることができます。

### 3. 人とのつながりができる
インターンを通じて、多くのエンジニアや他のインターン生との繋がりを持つことができました。これらの人脈は、学習やキャリア形成において大きな支援となります。

最初からイベントやセミナーなどへの参加はハードルが高いです。
僕はインターンで知り合った人とイベントに一緒に参加させてもらったりしています。

### 4. 学びながらお金を稼ぐことができる
インターンをすることで、学びながら収入を得ることができます。
これは、特に学生にとって大きなメリットですよね！

僕のインターン先では技術書の購入補助が出るなど、単に時給だけでなくさまざまな補助もあります。
学びながら稼いでまさに一石二鳥！

## まとめ
長期インターンのメリットは僕の人生を変えました 😄
この経験のおかげもあり、外資系のデータサイエンティストとして来年の4月から働けることになりました。
ぜひみなさんも勇気を出して長期インターンに取り組んでみてください！

Xでも自身の経験をもとにしたインターンに関する発信をしていく予定です📢
質問相談などもお受けしてます。お気軽にご連絡ください！

[Xアカウント](https://twitter.com/ikutarou_ds)
SPA+AWSでメンテナンスモードをつくる

# 2024/08/05更新
2024年8月現在、WAFのカスタムレスポンスを使ってresponseを返し、axiosでエラー処理をした場合、catchしたレスポンスの中身を取ることができない事象が発生しており、**解決できない状況です。**
<a href="https://gyazo.com/106636fca26f60a5180273452eeb4d4a"><img src="https://i.gyazo.com/106636fca26f60a5180273452eeb4d4a.png" alt="Image from Gyazo" width="1919"/></a>

SPA(Single Page Application)構成でメンテナンスモードを構築する場合、CloudFront Functionを使った方法も有効ですので以下の記事もご参照ください。

https://qiita.com/lyd-ryotaro/items/e129763ed898d22dc830

# 概要
SPA(Single Page Application)において、メンテナンスモードを作ります。SPAでは長期間リロード処理が発生しないため、フロントエンド側のWAFにメンテナンスモードを設定しても、バックエンド側の通信が続いてしまいます。そのため、バックエンド側にメンテナンスモードを設定します。

# 要点
- バックエンド側でメンテナンス判定をします
- 必ず実行されるAPI（認証チェックなど）に仕込みます
- プリフライトを許可します。
- CORSエラーになるのでカスタムヘッダーを設定します。

# 構成
シンプルなSPA環境です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192137/fcebff4f-baa0-1e1c-413f-f27fd0ad7a71.png)

# WAFの設定
バックエンド側のWAFのルールを追加します。

## 必ず通るAPIに仕込みます
URI Pathを使って判定します。
[![Image from Gyazo](https://i.gyazo.com/e5563a8d36fe30d619f6cd7de9dbd312.png)](https://gyazo.com/e5563a8d36fe30d619f6cd7de9dbd312)

## プリフライトを許可します
NOTステートメントにし、HTTP Method OPTIONS以外を判定します。
プリフライトは必ずHTTPステータスがOK(200)で返す必要があるため、OPTIONSの通信はバックエンドまで到達するようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192137/76d56b4c-4a84-7074-1612-a136000f498e.png)

## CORSエラーを回避します。
通常の通信はバックエンド側でCORS処理をしますが、WAFで返す場合はヘッダーを付ける必要があります。Access-Control-Allow-Originを設定し許可しましょう。

[![Image from Gyazo](https://i.gyazo.com/0ed2f2c7490d0454771dee4a60442a4a.png)](https://gyazo.com/0ed2f2c7490d0454771dee4a60442a4a)

## カスタムボディーに好きなデータを入れる
今回はCustom Response Bodyにメンテナンス開始時間とメンテナンス終了時間をいれています。これでフロント側で503エラーを検知したときにリダイレクトするページ於いて、カスタムボディーに設定された値を表示しています。

ここで、Custome Response Headerに何かしら値を設定し、取得することもできますが、私の環境に置いて、axiosで以下のようにヘッダーを取得したときにheadersが取得できませんでした。カスタムレスポンスヘッダーは諦めてBodyにしました。
```javascript
    必ず通るAPI()
      .then(() => {
        next({ name: 'INDEX' })
      })
      .catch((error) => {
        // error.response.headersに何もデータが入らない
      
        if (error.response.status == 503) {
          next({ name: 'MAINTENANCE-INDEX', query: { start: error.response.data?.maintenance_start, end: error.response.data?.maintenance_end } })
        }

        next()
      })
```

カスタムレスポンスボディーのほうが、Allow -> Block と戻しても設定値が消えないし、AWS WAFのWEBコンソールタブのCustom response bodiesタブから値を変更できるので結果よかったです。

# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192137/782c3fdd-0bcc-648b-0dfe-d6bc5abfb6bc.png)
競技プログラミング

最近始めたのがAtCoderです。

C言語やC++は私には難解なのでPythonでやろうと思っています。

プログラミング初心者なのでかなり難しい……BeginnersコンテストのAとB、たまにCがギリギリ解けるかも…って感じ。
とりあえず目指すは茶色。
これから成長出来たらいいなぁ()
ファイル送信 リトライ付き

```
        private static bool RetryInProgress { get; set; } = false;

        public static async Task UploadFileWithRetryAsync()
        {
            Console.WriteLine($"Start UploadFileWithRetryAsync");

            if (RetryInProgress)
            {
                Console.WriteLine($"Retrying");

                return;
            }

            RetryInProgress = true;

            for (int i = 0; i < 7; i++)
            {
                if (i != 0)
                {
                    int waitTimeInSeconds = (int)Math.Pow(2, i - 1);

                    Console.WriteLine($"Waiting for {waitTimeInSeconds} seconds...");

                    await Task.Delay(TimeSpan.FromSeconds(waitTimeInSeconds));
                }

                try
                {
                    Console.WriteLine($"Trying {i + 1}");

                    using (var stream = new FileStream(LocalFilePath, FileMode.Open))
                    {
                        await UploadFileAsync(stream, RemoteFileName);

                        break;
                    }
                }
                catch (Exception ex)
                {
                    Console.WriteLine($"Error: {ex.Message}");
                }
            }

            RetryInProgress = false;

            Console.WriteLine($"End UploadFileWithRetryAsync");
        }
```
Node.Jsのアップデート不備の解消


# Astroを使ったブログを作ろうとした

外に向けたアウトプット&備忘用に自分のブログを作ろうとし、[ShincodeさんのYouTube動画](https://www.youtube.com/watch?v=0zvxvmQqoZ0)を元にブログ作成にかかりました。
WordPressでやるよりJSなどを学びたいということでReactで編集できるAstroを使うことにしました。単に早くできそうだったというのも大きいです。

# npm run devでつまづく(Node.jsのバージョンが古い)

[Astro](https://astro.build/themes/)から好みのテンプレートをgit cloneし、npm install、その後
```
$npm run -dev
```
したところで以下のエラー。

```
Node.js v14.21.3 is not supported by Astro!
Please upgrade Node.js to a supported version: ">=18.14.1"
```
上記のエラー文と他の行にWARN lifecycleのメッセージとかも含まれていたものの
要はNode.Jsのバージョンアップデートが必要なのかと考えました。

# brew updateでもエラー(brew tap repairが必要)

Node.Jsを更新し、
```
$nodebrew install-binary stable
```

```
$node -v
```
確認してもバージョン更新が反映されなかったため、
brew updateしてからNode.Jsを適したバージョンに更新しようとしました。

```
$brew update
```
ところがここで以下のエラー。
```
fatal: couldn't find remote ref refs/heads/master
Error: Fetching /usr/local/Homebrew/Library/Taps/heroku/homebrew-brew failed!
Installing from the API is now the default behaviour!
You can save space and time by running:
```
放置してたherokuに設定がつながっていた？ようなので(cursorのAIアドバイスより)
記事をググって以下のコードを実行。

```
$brew tap --repair
```
すると次のように解消したよう。
```
==> heroku/brew: changed default branch name from master to main!
```

# 解決

その後brew updateからの作業に戻り
```
$brew update
```
```
$nodebrew install-binary stable
```
```
$node -v
```
したところAstroに適応したNode.Jsのバージョンが反映しました。

# 環境

PC: M1 Mac (OS Ventura 13.5.1)
エディタ: Cursor

# 参考にさせていただいた記事・サイト

ありがとうございました。

[Astroを使って5分でWebサイトを公開](https://www.youtube.com/watch?v=0zvxvmQqoZ0) YouTube-プログラミングチュートリアル 
[Node.jsをアップデートできない問題を解決した (Apple M1)](https://qiita.com/abcya/items/2a44356b9549e005f25b) Qiita　@abcyaさん
[brew tapとは](https://qiita.com/sammrai/items/85ed5e914d424fbf9fd6) Qiita @sammraiさん
基底クラスのリストに派生クラスのオブジェクトを入れる時に気を付けたい点

独自クラスのオブジェクトをリストに入れたりする処理を実装してて、タイトルのように、基底クラスのリストに派生クラスのオブジェクトが入ることに気付きました。そこで、自分なりに注意したいと思ったことを軽くまとめてみました。

まず、名前だけを持つ`User`クラスと、これを継承して名前と住所を持つ派生クラスを用意します。
```csharp
class User
{
    internal string name { get; set; }
}

class User2 : User
{
    internal string address { get; set; }
}
```
そして、`User`クラスのリストを用意します。
```csharp
List<User> userList = new List<User>();
```

ここで用意した`userList`に`User`クラスのオブジェクトが入るのは、まぁそりゃそうだよねと言った感じですね。
```csharp
User user = new User
{
    name = "testName"
};
userList.Add(user);
Console.WriteLine(userList[0].name); // testName
```

それでもって、同じ`userList`に`User2`クラスのオブジェクトも入ってしまうということで、おやおや？と思った次第です。
```csharp
User2 user2 = new User2
{
    name = "testName2",
    address = "testAddress"
};
userList.Add(user2);
Console.WriteLine(userList[1].name); // testName2
```

ただ、`userList[1]`から`User2`クラスにしかない`address`を参照しようとすると、コンパイラエラーが発生してしまいます。
```csharp
Console.WriteLine(userList[1].address); // Compiler Error CS1061
```

基底クラスのオブジェクトと派生クラスのオブジェクト両方とも登場する可能性があるときは、型変換や型パターンマッチングを入れた方が良いと感じました。

## 型を変換する
使いたいオブジェクトのクラスが明確なら、キャスト式で変換する。
```csharp
// userList[1]は、User2クラス！
Console.WriteLine(((User2)userList[1]).address); // testAddress
```
もしも、`User`クラスのオブジェクトを`User2`クラスに変換しようとすると、`System.InvalidCastException`が発生してしまう。
そのため、どのクラスのオブジェクトが来るか分からない時は型パターンマッチングも入れるべきだと思いました。

## 型パターンマッチング
`User`クラスのオブジェクトは`name`だけ出力、`User2`クラスのオブジェクトは、`name`と`address`を表示させる。
```csharp
foreach (User user in userList)
{
    Console.WriteLine(user.name);

    if (user is User2)
    {
        Console.WriteLine(((User2)user).address); // ちゃんとキャスト式で変換してあげる
    }
}
```

※コメントで頂いた書き方をここに追記します。
```csharp
foreach (User user in userList)
{
    Console.WriteLine(user.name);

    if (user is User2 user2) // ここで変数名を決められる
    {
        Console.WriteLine(user2.address);
    }
}
```
何のクラスのオブジェクトなのか分かるような変数名にしてあげると、後の処理でどんなオブジェクトを扱ってるのか追いやすくなってイイ感じになりそうだなと思いました。

switchでも、`case User2 user2:`のように、変数名を決められるようです。

# 最後に
なるべくキャスト式を用いることで、実装者がどんなオブジェクトが来る想定で実装したのか明確になるのではないかと感じました。また、型パターンマッチングも用いることで、より安全な実装になるのではないかと感じました。

Qiita初投稿です。記事の質はまだまだですが、アドバイスや意見などあれば、コメントを頂けると助かります。
今年はアウトプットを意識してエンジニアライフを楽しもうと思います。
【Android】AndroidStudio HedgehogでDevice Explorerを表示する方法

# はじめに
Hedgehog、だいぶオシャレな感じのAndroidStudioになりましたよね。
ログなどの位置もこれまでと変わっており、違和感を感じる方も多いのではないでしょうか。
そんな中で今まではデフォルトで表示されていたDevice Explorerがデフォルト非表示になったようです。
今回はこのDevice Explorerをこれまで同様に表示する方法を備忘録的にまとめておこうと思います。

# Device Explorerの表示方法
アップデート後の表示は以下の状態になっています。

![スクリーンショット 2024-01-28 18.39.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/536e12ec-c756-4b92-c011-185591233a75.png)

見ての通り、Device Explorerは表示されていません。
AndroidStudioからデバイスにアクセスしディレクトリを操作できると便利な場面も多いと思いますので、表示するように調整します。

調整するには、View > Tool Windows > Device Explorerを選択することで表示可能です。

![スクリーンショット 2024-01-28 18.42.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/80a93990-7699-866f-36b4-51233b9694ce.png)

上記でDevice Explorerを選択すると、以下の赤枠の箇所にDevice Explorerが表示されるようになりますので、これまで通り使用可能です。

![スクリーンショット 2024-01-28 18.43.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/840609f9-2985-529f-9881-1cf009a1797f.png)

説明は以上になります。

# さいごに
来月以降はもう少し色々な方向性の記事を上げたいという想いだけ表明しておきます、、、。
Debian12 bookworm で韓国語キーボード(K380)を使えるようにする

# サマリー
+ ロジクールのキーボードのK380の韓国語バージョンを買ったのでlinuxで使えるようにしたときの手順をメモする
+ ペアリングはbluetoothctl経由でやった
+ IMEはibus-hangulを入れたあと再起動すると別の選択肢がでるようになるのでそれを使えばOK

# 1. ロジクールのキーボードのK380の韓国語バージョンを買う

+ Qoo10で韓国のショップから個人輸入する形で購入した
  + 初回購入のクーポンが使えたので5000円程度で買えた

# 2. キーボードのペアリングをする

+ bluetoothctlをまず入れる(bluezの中に入っている)

```
$ sudo apt install bluez
```

+ scanでキーボードを探す、見つかったらtrustする、trustしたらpairするをやる
  + K380の場合はpairコマンドを打つ前に、左上のbluetoothのボタン(1,2,3あるやつ)のどれかを押しっぱなしにしないと、ペアリングのための6桁の番号が出てくる前にエラーが出てしまう
  + ペアリングの6桁の番号が打ち終わったらエンターキーを押さないといけない 

```
$ bluetoothctl
$ scan on (scan onの前にキーボードの電源を入れて左上のbluetoothボタンを押しっぱなしにする)
$ trust xxxxx (KeyboardのMACアドレス)
$ pair xxxxx (KeyboardのMACアドレス)
```

# 3. ハングルが打てるようにする

+ iBusの設定 -> 入力メソッド -> 追加 で デフォルトで『朝鮮語 -> 朝鮮語、韓国語』と『Korean(101/104-key compatible)』が選べるのでこのうちのどれかなのかなと思ったが、この２つともハングル入力ができないという罠があった


+ ibus-hangul をインストールして、再起動しないといけない
```
$ sudo apt install ibus-hangul
$ sudo shutdown -r now
```

+ 再起動のあと、iBusの設定 -> 入力メソッド -> 追加 で朝鮮語を選択すると、第3の選択肢に新たに 陰陽太極図っぽいアイコン(ちょっとわからないです)の『Hungul』が出現するのでそれを選択する

+ システムトレイ(筆者はシナモンを入れているためシステムトレイがデフォルトで入っている)のIMEで『朝鮮語 - Hangul』を選択し、Hangul modeをクリックして有効化する

# 4. Mozcを入れている場合

+ layoutの"default"を"jp"に変更して再起動

```
$ sudo emacs ~/.config/mozc/ibus_config.textproto
$ ibus write-cache; ibus restart
```
STM32C011のPWMで遊ぶ(STM32C011J4M7)


STM32C011のPWMで遊ぶ(STM32C011J4M7)




目的
PWMのテスト


![o_cop905.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e6d4b7e4-e7dc-35aa-f5d9-7c73c5661aec.jpeg)



```c++



//SER_LB_9600_PWM_C011_1


//ヘッダー
#include <Arduino.h>


//定義
#define DD PA8    // potentiometer connected to analog pin x


//初期化
void setup() {

  pinMode(DD, OUTPUT);   // sets the LED pin as output
  analogWriteFrequency(50);   //周波数
  analogWriteResolution(16);  //分解能

}//setup


//メインループ
void loop() {


  for (int ii = 0; ii < 256; ii++) {


    analogWrite(DD, 1310 + (26 * ii) );   // analogRead values go from 0
                                          // to 4095, pwmWrite values
                                          // from 0 to 65535, so scale roughly



    delay(20); //20mS

  }//for

}//loop




```
RaspberryPi4、CUIで初期設定

# 初期設定

### 雑記
以前はUEFIをアップデートしなければUSB Bootができなかったようですが最近かったバージョンでは最初から起動に成功しました!
[SDカード不要？ 「Raspberry Pi 4」をUSBブートさせる方法について
](https://gadgetrip.jp/2021/05/raspberry_pi4_usb_boot/)
また古い設計だとType-C PDに対応していない(Adapterとの相性問題がある)との報告がありましたがそちらも問題ありませんでした!
[Raspberry Pi 4のUSB Type-Cポートが仕様通りでない話の詳細](https://hanpenblog.com/11049)

### イメージ
以下からイメージファイルをダウンロード
[Operating system images](https://www.raspberrypi.com/software/operating-systems/)

解凍してddコマンドで書き込む
```sh
dd if=(image file) of=(ex. /dev/sdb) -bs 4M
```

### ユーザー
boot(efiファイルのあるところ)にuserconf.txtを追加する

hashは以下で計算する
```sh
echo 'pass' | openssl passwd -6 -stdin
```

userconf.txt
```sh
user:hash(pass)
```
**注意**デフォルトではユーザーは用意されていない

[userconf.txtによる4GPi OSの初期ログインユーザー作成方法](https://qiita.com/maeda01/items/e9ced77f4e221c516e49)
[An update to Raspberry Pi OS Bullseye](https://www.raspberrypi.com/news/raspberry-pi-bullseye-update-april-2022/)
[LinuxでSHA-512のパスワードハッシュ作成方法まとめ](https://qiita.com/yumenomatayume/items/2c77ec52e7b2257f6800)

### ssh
bootに"ssh"というファイルを製作する(touchなどで)
[初期設定でSSHを使えるようにする](https://www.haljion.net/index.php/2019-11-13-03-27-18/2019-11-13-11-33-14/125-raspberry-pi/rpi-configuration/236-ssh)
[ディスプレイ，キーボードおよびマウス無しでRaspberry Piの初期設定(有線LAN経由のSSH)](https://www.haljion.net/index.php/2019-11-13-03-27-18/2019-11-13-11-33-14/110-raspberry-pi/237-raspberry-pi-lan-ssh)

### wifi
/etc/wpa_supplicant/wpa_supplicant.conf
に以下を追加する

```
country=JP

network={
        ssid="ssid"
        psk="pass"
}
```
[CUIでのラズパイのネットワーク設定](https://qiita.com/Toshiaki0315/items/8dbe2b56dada76d71abf)

nmcliからもできる
```sh
nmcli device wifi list
nmcli device wifi connect 'ssid' password 'pass' ifname wlan0
```
[【Linux】コマンドラインからネットワーク接続設定。](https://freefielder.jp/blog/2016/07/linux-wifi-command-line.html)

### おまけ
[ USB起動版Raspberry Pi OS 64ビットの初期設定 令和5年(2023年)1月版 ](https://denor.jp/usb%E8%B5%B7%E5%8B%95%E7%89%88raspberry-pi-os-64%E3%83%93%E3%83%83%E3%83%88%E3%81%AE%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A-%E4%BB%A4%E5%92%8C5%E5%B9%B42023%E5%B9%B41%E6%9C%88%E7%89%88)
[ラズパイをUSB-C以外で充電する(GPIO経由)](https://synrock-tech.com/hardware/single_board/raspberry-pi_power_supply_gpio/)
【デザイン】私がしているPower Appsのアプリを作るときのデザインをよくする工夫

こんにちは。

アプリを作成するにあたって、使いやすいデザイン、使いたくなる見た目はすごく大事だと思います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/540b78c9-1428-9b54-f81a-41db4d1c7a29.png" width=40%>

いろんなデザインの工夫の仕方や探し方、サイトがありますが、
今回は、私がPower Appsでアプリ作るときに使っている方法やサイトについてご紹介いたします！
あくまでも一つの参考としていただけましたら幸いです。

# 1. テーマの色を決める
私は最初にアプリのテーマの色を決めちゃいます。
最初に色を決めておくと便利なのは、Power Apps のテーマで一番近いテーマを選択しておいてあとで変更点を減らすことができることです。
最初にこれを設定しておくと、デフォルトの色をそのまま使うことができたり、色を変えられないコントロールがあったときもそんなに色の差がなく入れることができるのでお勧めです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/d7b21e9a-c088-1f11-6098-caf0a24cdecd.png)

カラーの参考にするのは以下のサイトです。RGB値などの取得ができるので、アプリ内や挿入する画像で色を指定するときに使いやすいです。

https://www.color-sample.com/

# 2. アプリデザインの参考にする画像を検索する
テーマの色を決めたら、イメージに近いアプリのデザインの参考を検索します。
どのようなデザインだといい感じになって、使いやすいのか、一番学ぶのに早いのが実際のデザイナーが作っているアプリの画面を参考にすることだと思います。
私は、[Pinterest](https://www.pinterest.jp/search/pins/?rs=ac&len=2&q=%E3%82%A2%E3%83%97%E3%83%AA%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3&eq=%E3%82%A2%E3%83%97%E3%83%AA&etslf=4270)で「🔍アプリデザイン」で検索します。
さらに、色が決まっているときは「🔍アプリデザイン 青」などで検索をかけます。


# 3. 2で見つけたデザインを参考にしながら、アプリを設計。画像を使う
次に2で見つけたデザインを参考にしながら、アプリを設計していきますが、ここでおすすめなのが、**画像をいっぱい入れること**です。
テキストで説明するよりも、イラストで直感的に使い方がわかるように設計するほうがユーザーに使いたいと思ってもらいやすいですし、おしゃれにもできます。
そこで、私がよく使うネット上のフリー素材のサイトについて以下にご紹介します。

https://storyset.com/

https://undraw.co/illustrations

https://loosedrawing.com/

https://icooon-mono.com/

::: note
これらのサイトではイラストの色を変えることができるので、1で決めたテーマの色に変更して使うことがおすすめです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/84a78932-35ca-ed43-b5e5-0e8c67065c30.png)

:::

また、Power Apps にはpngなどの画像ファイルだけでなく、GIFファイルも挿入できます。このGIFファイルを入れて簡単なアニメーションをアプリに入れ込むのが私的にとてもおすすめです！！
以下のサイトではかわいいGIF画像がゲットできるのでお気に入りです。

https://maplab-icon.com/blog-category-30.html

![cow1_animated_256.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/bb2c1f8b-5bc6-f596-3693-4424c77d12df.gif)


ほかにもたくさん素敵なサイトあると思います！今回は私がよく使うサイトをご紹介させていただきました。
私はこれらのよく使うサイトをブラウザのブックマークで保存して使っています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/6bc0805e-7045-2132-6275-b478741b9e51.png" width=40%>

# まとめ
いかがでしたでしょうか？
Power Apps でアプリを作るときに、デザインについて詳しくなくてもなんとなくそれっぽいアプリを作れる方法（多分）についてご紹介しました。
ぜひ使ってみてください！
ReactのJSX記法についてまとめてみる

https://ja.react.dev/learn

# JSXとは
Reactで使用する構文。


# データの表示

`{}`で囲むことによって変数を扱える
```javascript
return (
  <h1>
    {user.name}
  </h1>
);
```
属性の中にも使える
```javascript
return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);
```

# 条件付きレンダー
```javascript
<div>
  {変数(bool) ? (
    < trueだった時のコンポーネント />
  ) : (
    < falseだった時のコンポーネント />
  )}
</div>

// 使用例
<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>
```
まず`{}`を書き、
条件とする変数を書く。
`?`を記載。
`()`で表示したいコンポーネントを記載。
`:`でもってelseの場合のコンポーネントも書く。

### else節が不要な場合
```javascript
<div>
  {変数(bool) && <trueだった時のコンポーネント />}
</div>

// 使用例
<div>
  {isLoggedIn && <AdminPanel />}
</div>
```

# ループ処理
```javascript
const listItems = リストの変数.map(x =>
  <li key={x.id}>
    {x.title}
  </li>
);

// 使用例
const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);
```

辞書オブジェクトをループする場合
```javascript
Object.keys(辞書オブジェクト).map((k: string)=>{
    console.log(`key: ${k}, val: ${辞書オブジェクト[k]}`)
})
```
PLATEAUのモデル内をOculusで歩くためには

この記事ではPLATEAUの都市モデルをOculusで歩けるまでの工程を紹介する。

## 完成図

今回は新宿のドコモタワーを下から見上げてみる。


![Image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/9baef81c-e930-1c43-2da5-9b58203d78ed.jpeg)

# 必要なもの
- Unity (2022.3.18f1) 
- [Meta XR All-in-One SDK](https://assetstore.unity.com/packages/tools/integration/meta-xr-all-in-one-sdk-269657)
- [PLATEAU SDK for Unity](https://assetstore.unity.com/packages/tools/utilities/plateau-sdk-for-unity-245703)

# 事前準備
### エディタの再生環境
Oculusのアプリケーションを開発する際は、エディタの再生が可能になるように、PC接続のセットアップを済ませておく。

### プロジェクトの作成
3Dか3D(URP)、もしくは3D(HDRP)で作成する。PLATEAUはどのレンダーパイプラインにも対応しているため、目的に合わせて作成する。
※筆者はHDRP

### XR Plug-in Management のインストール
`Edit > Project Settings > XR Plug-in Management`の手順で進みインストールし、表示されるプラグインプロバイダーのOculus欄にチェックを入れる。
### アセットのインポート
事前準備欄のリンクから"Meta XR All-in-One SDK", "PLATEAU SDK for Unity"をインポートまで済ませておく。やり方がわからない場合は方法は他記事で多く取り上げられているのでそちらを参考にしてほしい。

# はじめよう
## ステップ1：モデルのインポート
- `PLATEAU > PLATEAU SDK`でタブを表示。
- インポート元をサーバーにして、`都道府県 > 東京都`、 `データセット > 東京都23区`に設定。
- 範囲選択へ進み、MeshCode；53394526内にある以下の個所を選択する。![スクリーンショット 2024-01-28 172703.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/c484fb35-5960-3748-168a-59c371a60004.png)
- 地物別設定では用途に応じて、チェックを調整するが今回は特になし。モデルをインポートする。(通信環境、PCのスペックなどパフォーマンスに依存するが、かなり時間がかかる。)
- 無事表示されれば完了。

## ステップ2：Prefabの設置
- `Packages/com.meta.xr.sdk.core/Prefabs/OVRPlayerController.prefab`を選択し、Scene内に設置。
※歩く必要がない場合は、`Packages/com.meta.xr.sdk.core/Prefabs/OVRCameraRig.prefab`を配置する。
![スクリーンショット 2024-01-28 175014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/0e4aae00-f905-2724-6869-791af39e45d7.png)

- 既存のMain Cameraを削除。
## ステップ3：再生
無事に見えましたね。
![スクリーンショット 2024-01-28 175247.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/df8caf86-21e0-6c3e-db7a-ad1014b5872f.png)

# まとめ
![スクリーンショット 2024-01-28 180008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551600/d07e0ad9-9842-7126-b70c-fbfa0ed4b8d2.png)
### ほぼ3ステップ
1. モデルのインポート
1. Prefabの配置
1. 再生

PLATEAUは実情報を用いられたリアリティあるモデルで、非常に簡単にセットアップできる。汎用性が高いので、使い方を覚えておくと便利でしょう。

注意点は、リアリティの反面、データ量が非常に大きいので目的に応じて範囲選択を制限、インポート内容を選択すべき。
DynamoDB上のデータをPythonで扱う方法

# 準備
- AWSアクセスキーを設定(こちらはPython上では行わない)
- boto3と使用とテーブルの接続
```
import boto3
dynamodb = boto3.resource("dynamodb")
table = dynamodb.Table("table_name")
```

# データの取得と更新
## 取得
- データの取得はget_itemを使用。引数に設定してあるプライマリーキーを使用することで特定のデータを参照できる
```
response = table.get_item(Key={"ID":"1"})
```
- 仮に全データを取得する場合はscanを使用するが、頻繁な読み書きをDynamoDBは推奨していないため、その場合はRedshift等別のテーブル設定をする必要ばある
```
response = table.scan()
```

## 書き込み
```
data = {"ID":"100"}
response = put_item(Item=data)
```

## ドキュメント
https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/dynamodb.html
[R+dplyr] データフレームの1行1行に関数を適用し、その結果を各行に展開する

普段オブジェクト指向言語で業務システムばかり書いていると、なかなかR言語やdplyr流のやり方というのが馴染めません。中々良いやり方を見つけられず苦労したことの一つに、下のように、**データフレームの各行に任意の関数を適用したい**というものがあります。

```plantuml
@startuml
state "**foo_df**" as foo_df
"foo_df" :  x: int [1:5] 1 2 3 4 5
"foo_df" :  y: int [1:5] 6 7 8 9 10

state "各行ごとに関数 process_row() を適用" as apply

state "**process_row**(\ndata.frame(x = 1, y = 6)\n)" as process_row1
process_row1 : sum_x_y = sum(c(x, y))
process_row1 : mean_x_y = mean(c(x, y))

state "**process_row**(\ndata.frame(x = 2, y = 7)\n)" as process_row2
process_row2 : (ditto)
state "..." as process_row3
process_row3 : ...

state "**result**" as result
result : $ sum_x_y : int [1:5] 7 9 11 13 15
result : $ mean_x_y: num [1:5] 3.5 4.5 5.5 6.5 7.5


foo_df --> apply
apply --> process_row3
apply --> process_row2
apply --> process_row1

process_row3 --> result
process_row2 --> result
process_row1 --> result

@enduml
```

`do()` はもう古い、 `purrr::map` を使う、nest/unnestを使う…など、様々な情報が混在しますが、自分として最もしっくりきた方法は下のものでした。

```R
require(tidyverse)

process_row <- function(df) {
  # df =
  #   tibble [1 × 2] (S3: tbl_df/tbl/data.frame)
  #   $ x: int 1
  #   $ y: int 6

  return(df %>% summarize(sum_x_y = sum(c(x, y)), mean_x_y = mean(c(x, y))))

  # (returned value) =
  #   tibble [1 × 2] (S3: tbl_df/tbl/data.frame)
  #     $ sum_x_y : int 7
  #     $ mean_x_y: num 3.5
}

df_foo <- tibble(x = 1:5, y = 6:10)

# df_foo =
#   tibble [5 × 2] (S3: tbl_df/tbl/data.frame)
#   $ x: int [1:5] 1 2 3 4 5
#   $ y: int [1:5] 6 7 8 9 10

result <- df_foo %>%
  # 1行1グループにする
  rowwise() %>%
  # 1行分のデータフレーム(`pick(everything())`)をprocess_row()に渡し、その結果をdataに格納する
  transmute(data = process_row(pick(everything()))) %>%
  # ネストされたデータフレームであるdataを展開する
  unnest(cols = data)

# result =
#   # A tibble: 5 × 2
#   sum_x_y mean_x_y
#   <int>    <dbl>
#   1       7      3.5
#   2       9      4.5
#   3      11      5.5
#   4      13      6.5
#   5      15      7.5
```

`rowwise()` と `transumute()` (元の列を残したいなら`mutate()`) を使って、行そのものをネストしたデータフレームとして扱い、最後に `unnest()` でネストを解除しています。
二次元配列の行ごとの和

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__row_sum

ここはCランクだったのですが
なかなか苦手な分野だったので
じっくりします
複数ループを使う場面なのですが
ここでリスト内包を複数使ってます
ここらへんがどういう仕組かわかってないので
確認します

```py
a = [[int(i) for i in input().split()] for _ in range(n)]

#　下と同じ
a = []
for _ in range(n):
    row_int = []  # 空のリストを作成して整数に変換した要素を追加
    for i in input().split():
        row_int.append(int(i))
    a.append(row_int)  # リストに追加
```
こういうことですね。
これもかけなくちゃ‐

ちなみに完全解はこちら

```py

n, k = map(int, input().split())
a = [[int(i) for i in input().split()] for _ in range(n)]

for i in range(n):
    sum_row = 0
    for j in range(k):
        sum_row += a[i][j]
    print(sum_row)
```

追加でこちらの問題も。
書くことが似ているので。

https://paiza.jp/works/mondai/double_roop_problems/double_roop_problems__various_row_sum

様々な長さの配列の和ですが、
コメントからのアドバイスをいただいて
書いてみました。

最初の文字と、リストにどう分けるかということですがアンパックを使ってなんとか。
そして、コメントでいただいたsum関数とmap関数を使ってなんとかいけました。

```py

n = int(input())

for i in range(n):
    K,*A = input().split()
    print(sum(map(int,A)))

```
ローカルではdeleteリクエストが飛ぶがHerokuではgetリクエストが飛んでしまう問題

環境：Rails 7.1.2　
　　　sorcery　0.16.3



- sorceryで認証機能（ログイン・ログアウト）を実装、ローカルで動作確認後herokuにpush。

- ログアウトボタンを押下すると404 not foundと表示される。
```
<%= link_to 'LogOut', logout_path, data: { turbo_method: :delete }, class: 'nav-link' %>
```

ログを確認すると、logoutになぜかgetリクエストが送られている:sweat:
```
No route matches [GET] "/logout"
```

検証ツールで、ローカルおよびheroku上でlogoutボタンを確認しても差異を発見できず。

# 対処
```
button_to 'LogOut', logout_path, data: { turbo_method: :delete }, class: 'nav-link', method: :delete
```

上記のように書き直したらheroku上でも問題なく動作するようになった。



# 参考
https://stackoverflow.com/questions/71895806/rails-7-0-2-3-link-to-turbo-method-delete-issues