OmniAICreator/Qiita-1.07M huggingface dataset:
AWS認定クラウドプラクティショナーの不合格から学んだこと

---
AWS認定クラウドプラクティショナーの不合格から学んだこと
---

**エジソン**

_“Many of life’s failures are people who did not realize how close they were to success when they gave up.”_

<br>

**目次**
- [1. はじめに](#1-はじめに)
- [2. 試験準備過程](#2-試験準備過程)
- [3. 試験結果と感想](#3-試験結果と感想)
- [4. おわらない](#4-おわらない)

## 1. はじめに

<font color="HotPink">**いちご100%**</font>


　私が誰かなんてのはどうでもいい。ただ、本日、試験に落ちた。

　試験は`AWS認定クラウドプラクティショナー（CLF-C02）`と呼ばれるものだ。

　AWS クラウド、サービス、用語の基礎的かつ高度な理解を持っていることを証明する曰ばAWS試験の登竜門。

　私は就活の為にこの試験を受けた。そしてそんなに難しくないだろうと思っていた。

　しかし私は思い知らされた。その考えは甘かった、ということを。
 
## 2. 試験準備過程
<font color="low blue">**愚者**</font>

　試験5日前、私は初めてUdemyの門を叩いた。彼は快く受け入れてくれた。

　私もこれさえやれば大丈夫だろうと思っていた。そう、あの時までは......。

　試験3日前、私は二度目のUdemyの門を叩いた。この二日間、何があったかは聞かないでくれ。

　とにかくそれから私は結構勉強した。しかし内容は難しく頭に入ってこない。

　とりあえず過去問をやりまくろうと解いてみるも、43%しか解けない。

　それでも繰り返しやればいける。そうして、ITパスポートと同じノリでやっていたら、気づいたら試験日当日だった。

　Udemyの模擬演習だけやり込み、授業は要点だけ聞く。

　結果はもう分かっているよな？

　あと二週間はUdemyの外へは出られないらしい。全く、寂しがり屋なんだから。


## 3. 試験結果と感想

　668。それが私の点数だ。残念ながらそれ以上でもそれ以下でもない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493200/49a94502-b738-e123-a2e8-6f7b4991ebc2.png)

　たった一度。
 
 　そう、一度だけでいい。
 
 　言い訳をさせてくれ。

　全部で65問。点数になるのは60問。私が好きなのはシナモン。それは今関係ない。

　1000 / 60 = (約)16.6点

　もちろん、すべての問題が均一な点ではないが、あと2問くらい合っていれば......。

　いや、よそう。過去は他人だ。

　変えることができない。

 今日は、あったかいハチミツミルクティーを飲んで寝る。


<br>

<font color="low blue">**これからのこと**</font>
 
　次の準備だ。諦めなければ、それは失敗ではない。ただの通過点だ。Udemyの授業をもう一度見直そう。


 ![Screenshot 2024-02-21 at 21.05.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3493200/cba408a2-b053-0656-dca2-d5708d2879e5.png)


　スコアの下にこんなものがあった。

　請求、料金、サポート以外、全部不合格の点数だったらしい。

 全然惜しくもなんともない。

　この試験だけに手を取られているわけにもいかない。

　それでも次は必ず合格する。

 再試験は二週間後から、いい準備期間だ。

 
## 4. おわらない

　まずはudemyの授業を全て見る。そして模擬試験の追加購入だ。

 　これは終わりでも、終わりの始まりでもない。

  始まりの始まりだ。

<br>
<br>
<br>

（追記）
　なんかこれおすすめとかあれば教えていただけるとありがたいです！

 　今の所、お金という拳でudemyの門を叩くしか思いついてないです。
 
　よろしくお願いします。
Angular 古いバージョンでの環境構築例

# 古いNode.jsを使うしかない事態
なぜ、大きいシステム開発に限って古いバージョンを使うのか…

### Node.js v8.11.3の環境にAngular環境を整える
ただし、ここではローカル環境を整えることとする
（グローバル環境は好きくない）

### １．プロジェクト用のフォルダを準備
ここでは「sample」プロジェクトフォルダを作成
~~~
mkdir sample
cd sample
~~~

### ２．@Angular/Cliをインストール
Node.jsと@Angular/Cliはバージョン同期をとっておく必要がある
（参考：ここで互換性が分かる）
https://angular.jp/guide/versions

今回は、v6.2.9のCLIをインストール
~~~
npm install @Angular/Cli@6.2.9
~~~

### ３．Angular環境を構築する
ここでひと手間加える
（他のやり方でも問題なし）

今回、やってみたのはこんな感じ

~~~
cd ..
./sample/node_modules/.bin/ng new sample
~~~

## 上記３．をやったのは何故？
### node_modulesを一つにまとめたかった
ng newを実行するとプロジェクト用のフォルダがもう一つできてしまうので、node_modulesが２つできてしまうことになる。
それを回避したかった。

本当は、
~~~
npx ng new sample --directory=./
~~~
みたいなことをやりたかったのだが、動かなかった。
なので、直接ngコマンドを実行した。
（node.jsのバージョンが低いと考慮がいろいろ不足したりするみたい）

## こんな感じの構成ができあがる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658170/54afcf2f-ffe3-dfb3-64b6-e3b6d58c4fd4.png)


## もし、動きが悪かったら
一度、node_modulesのフォルダをすべて削除してから
~~~
npm inistall
~~~
を実行すれば、もとに戻るかも

# 以上です
なあ？ドキュメントってわかりにくくね？読み方を教えてやろうか？


# 2パターンある



## 1.[この本](https://www.amazon.co.jp/%E3%80%8C%E6%8A%80%E8%A1%93%E6%9B%B8%E3%80%8D%E3%81%AE%E8%AA%AD%E6%9B%B8%E8%A1%93-%E9%81%94%E4%BA%BA%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B%E9%81%B8%E3%81%B3%E6%96%B9%E3%83%BB%E8%AA%AD%E3%81%BF%E6%96%B9%E3%83%BB%E6%83%85%E5%A0%B1%E7%99%BA%E4%BF%A1-%E5%85%B1%E6%9C%89%E3%81%AE%E3%82%B3%E3%83%84%E3%81%A8%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-IPUSIRON/dp/4798171549/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=1CNOYNP18MLYJ&dib=eyJ2IjoiMSJ9.nV2xu1mNb1qlddVl89P3m5S4GbKkn1dZ1ByCZ7KFaUo3p0kNVDPl5jzHWktqmkEpQQ4Gni4fWuJscgPlffaZr_Sv9P9T6az1KEtgEBRAZrvFHeskYqc_HyeaXBLo_VQFVj02k01Gbmhjwxv_ox1QAMjOFsPZqAjEv_3f6H78zXjcLf6yJkXCm0wWuJPD8lnnju6sK5W1AjMy07FyBvMSgB5j3H9NM9dPmknzs20GAtLYf355JyqfJIXLaR5E9P0sA-FEmA1mUbRmp8SRBomO5AWXrzqjmAxPcoODpz92YJQ.5IUdj-tA0XOZndmg9rsr2c6d4_0PmSjr0Sm65_eJz34&dib_tag=se&keywords=%E6%8A%80%E8%A1%93%E6%9B%B8%E3%81%AE%E8%AA%AD%E6%9B%B8%E8%A1%93&qid=1708519504&sprefix=%E6%8A%80%E8%A1%93%E6%9B%B8%E3%81%AE%E8%AA%AD%E6%9B%B8%E8%A1%93+%2Caps%2C296&sr=8-1)を参考にしよう

簡潔に言うと、

1. どっかの誰かが、ネット上に発表してくださっている、おすすめの本を１〜２冊読もう

2. 自分で本屋に行って、そのテーマの本でいいと思ったものを１〜２冊読もう

3. わからなかったテーマ内分野の書籍を探して読もう

4. ドキュメントと戦おう


## 2.根性で読む



時間を使って、ノートに書き起こして、しっかり全部理解していこう

焦ってては、できない

心して、かかろう
AngularでBrowerModuleの謎のIvy互換性エラー

# 環境
Node.js v8.11.3
Angular CLI 6.2.9 （@Angular/cli@6.2.9）

# Ng Newで新規にAngular環境を構築
しただけなのに…
### app.modules.tsを開くとエラーが発生している

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658170/495b0086-8ed3-c97a-f0a0-1d53307e0721.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658170/3c390fe9-b621-faa8-2cc6-09686d118d43.png)


### エラー内容を抜き出してみた
This likely means that the library (@angular/platform-browser) which declares BrowserModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

なにこれ？

# いきなり結論
### Angular Language Serviceが悪さをしていた
きっと、みんなこれ入れてるでしょ？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658170/4671af54-48eb-6922-651e-6cad6243bcd0.png)


### インストールバージョンを下げる
v12.0.0くらいにまで下げてみる
（下げたあと再起動を忘れずに）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658170/38b3c408-f376-04ca-009a-ba95506f8a45.png)


### エラー消えた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658170/5e863935-dc18-346f-9f41-a000c3a0e0e6.png)


# 終わり
Node.jsとAngualr CLIの互換性やら、Ivyとの互換性やら
散々調べまくって、何度npm installやng updateを実行したことか…
という感じでした。

古いバージョンを扱うときは拡張機能の方にも注意してください。
【Xcode】ブレイクポイントで止めずに音を鳴らす

# はじめに
ブレイクポイントを使って開発をしている際に、いちいち止まると面倒な場面ってありますよね。
だけども、ブレイクポイントを通ったことは知りたい。

そんな時は、ブレイクポイントで止めずに音を鳴らしましょう。

# やりかた
行番号をタップしてブレイクポイントを設置します。
![スクリーンショット 2024-02-21 21.32.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/0d70a111-09bb-f878-d8c5-8ded5e56d523.png)

ブレイクポイントを右クリックして「Edit Breakpoint...」を選択します。
![スクリーンショット 2024-02-21 21.34.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/fd98cab6-2be5-dc13-e1c0-fb6355ec726d.png)

「Add Action」を押します。
![スクリーンショット 2024-02-21 21.35.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/855fbd97-2cd1-d410-6407-5910dd76e1fb.png)

サウンドが設定できました。
![スクリーンショット 2024-02-21 21.36.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/94d14797-524c-6975-6396-f598a348bb67.png)

今のままではブレイクポイントで止まってしまうので、止まらないように設定します。

「Automatically continue after evaluating actions」にチェックを入れます。
![スクリーンショット 2024-02-21 21.37.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1b2f93c2-493e-6661-edc5-a25ff212ac21.png)

# おわり
これで、ブレイクポイントで止めずに音を鳴らすことができました。
Extract Food Delivery Data with Professional Web Scraping Services

how-to-extract-food-delivery-data-with-professional-web-scraping-services
The division of food delivery online is projected to reach $127 billion in 2021 end as well as the revenue is projected to grow at the market size of $192 billion by the year 2025. These apps as well as platforms have thousands of hotel listings as well as are used by millions of clients.

Hotels and food chains are helping analytics as well as big data to understand consumer tastes or preferences. Now, you may use web scraping services to get data from various food delivery applications for regulating prices, better marketing strategies, etc. In case, you wish to improve food delivery or hotel business, web scraping is the solution that can help you in achieving your goals.

Why Extract Food Delivery Data?
Why-Extract-Food-Delivery-Data
Data extraction is the procedure of extracting a big amount of data from any targeted websites or apps. As the competition in hotels, food delivery platforms, as well as related businesses, is continually increasing, food businesses would need to immediately take benefits of the data. Data including delivery routes, food making time, etc. could improve services as well as also help you in having a competitive advantage.

The mined data from different platforms might be utilized in various ways. Various aims why you require to keep thinking about mining food delivery data are provided below:

More Customer Usage
More-Customer-Usage
Focus on increasing customer retention first
Different food delivery platforms have become a go-to solution for clients who need to order food online. Although, because of COVID-19 limitations, at-home dining has got importance. The trend would continue very well in the future as people don’t want to risk spreading this virus even while the restaurants would be permitted to provide dine-in services.

Focus on increasing customer retention first
Modern-Restaurant-Menus-&-Types
Different food delivery platforms have become a go-to solution for clients who need to order food online. Although, because of COVID-19 limitations, at-home dining has got importance. The trend would continue very well in the future as people don’t want to risk spreading this virus even while the restaurants would be permitted to provide dine-in services.

sources >>> https://www.actowizsolutions.com/how-to-extract-food-delivery-data-with-professional-web-scraping-services.php
GoogleスプレッドシートからAPIを呼び出して結果をシートに反映させる

# 目的と背景
デイリーで報告する必要があるGoogleスプレッドシートで作成されているレポートにシステムが計測をしているデータを貼り付ける必要があるが、それを毎日人力でやるのは現実的でないのでシートを開いた時に自動で最新のデータを取得できるようにしようと思った

# 検討した案
CSVでデータを取得するAPIが既にシステムに実装されていたので、そのAPIをシートが開いた時に呼び出して、取得結果をシートに保存すればよいのでは、と考えた

# 手順
1. 該当のスプレッドシートで拡張機能 > App Scriptをクリックし、App Scriptのエディタを開く
1. 関数を実装する
1. コードを保存すると実行ボタンが有効化するのでクリックし、実行してみる。意図したシートにデータが反映されていることを確認する
1. トリガーで該当の関数を選択して、スプレッドシート起動をトリガーとして設定する（設定する時に権限の確認がある場合あり）

# 実装内容
```javascript
function updateSheet(){
  // CSVを取得する
  const api_url = 'APIのURL';
  const response = UrlFetchApp.fetch(api_url).getContentText();

  // CSVデータを変換
  const csv = Utilities.parseCSV(response);

  // 保存先のCSVを取得
  const spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
  const sheetName = '保存先のシート名';
  const sheet = spreadSheet.getSheetByName(sheetName);

  if(!sheet){
    // シートの内容を削除
    sheet.clear();    
  }
  else{
    // 該当シートが無い場合は作成する
    spreadSheet.insertSheet(sheetName);
  }

  // シートにデータを反映
  sheet.getRange(1, 1, csv.length, csv[0].length).setValues(csv);
}
```

# 結果
意図通りにシートを開いた時にデータが自動で更新されるようになった

# 注意点
## 数式を扱う場合
CSVのデータに加えて、そのデータを数式で加工した列がある場合、数式の中に範囲指定があると計算に時間がかかり、タイムアウトすることがあった。

例えば、
```
ArrayFormula(if(C2:C="","",datevalue(substitute(left(C2:C,10),"-","/"))))
```
これはC列にある日時データから年月日だけを取り出して、-を/にしてYYYY/MM/DD形式に変換する式だが、C2:Cのような範囲の指定が入っていると処理に時間がかかり、タイムアウトしてしまった。

この問題はおそらくCSVのデータが挿入されるたびに範囲内のデータの再計算が実行されてデータ量に応じて処理速度が低下するのはないかと思う。

これに関しては、下記のように範囲指定をやめることで解決した
```
ArrayFormula(if(C2="","",datevalue(substitute(left(C2,10),"-","/"))))
```
C2の部分は行によって変更する必要はあるが、単にコピペしていっても行数がちゃんと変更されるので、案外楽だった。

## ファイルを複製した場合の注意
ファイルを複製するとトリガーが外れるので、再設定する必要があった
IAMって？



# AWSクラウドエンジニアになりたい

### *"[愛してんぜ音色！](https://youtu.be/WRFwZY8Pm6w?si=hP5va0lTNgDq7L2n)"じゃなくて、"愛してんぜAWS!!"*


## IAMとは何か？


よく、IAMユーザーとか出てくると思います。

awsコンソールにログインするときなど。

## まず、IAMって？

結論：`awsで作成したユーザーやグループに対して、awsのサービスごとに、権限を設定できるもの`

数ある、awsのサービスの１つ

```
VPCやEC2などのサービスをAWSクラウドで立ち上げる。
それぞれのサービスに、多くの人が関与することは当たり前にできたほうが便利である。
そうなったら、肝心なのは？
そう。セキュリティ。
IAMでは、そのサービスにどの権限でアクセスしてもいいか。設定できるぞい。
```

難しそうで、とても簡単な話

## では、IAMユーザーは？

結論：`IAMサービスで、サービスにアクセスしてもいいと権限を付与されたアカウント`

一緒に目にするものとして、ルートユーザーがあると思う

### ルートユーザーとは？

全権限を持ってる自分専用のアカウント

IAMサービスを利用し、いくらでも、IAMアカウントを作成し、権限を与えられるぞ。

楽しい予感、、、
RealmとCocoaPods

ライブラリ
---
プログラムにおいてよく利用される機能を切り出して、再利用しやすいようにまとめたもの！
よく利用される機能を1から作らなくて済むので効率よく開発を行うことができます。

今回はライブラリのRealmと管理ツールのCocoaPodsについて記述します！

Realmのインストール
---
Realmを使用するにはCocoaPodsを使用してインストールを行います！
まずターミナルでインストールしたいアプリまで飛びます。
CocoaPodsのインストールは使用したいアプリまで飛んだ後に
```
sudo gem install cocoapods
```
と入力します。その後Passwordを求められるので、お使いの端末のPasswordを入力するとインストールが開始されます。
次にcocoapodsのset upをします
```
pod setup
```
次に、ライブラリを管理するためにcocoapodsの初期化を行います。
```
pod init
```
これでアプリプロジェクト内にcocoapodsに必要な設定ファイルが作成されていると思います！
lsコマンドでファイル内を確認すると Podfile があると思います。それがcocoapodsに必要なファイルになります。このファイルにライブラリー名などの情報を記載することでcocoapodsで管理することができるようになります。
```
open Podfile
```
上記の記述で、podfileを開けます！

次にpodfile内にrealmの情報を記載します。
use_frameworks!の下に
```
pod 'RealmSwift' '=10.1.4'
```
を記述し保存します。(comand s)

⚠️M1チップの場合は正常にビルドできない可能性があります。その際は、
pod 'RealmSwift' '=10.1.4'ではなく、pod 'RealmSwift'を記述してください。

記述後ターミナルに
```
pod install
```
を記述しインストール完了です。lsコマンドで確認すると、Realmのフォルダが存在していると思います。
以上RealmとCocoaPodsでした。
初サイト制作メモ1: VercelとNext.jsのセットアップ→サイト公開

※備忘録用。誤った記載があるかもしれません。コメントで教えていただければ嬉しいです

# 今回利用するもの
- [Vercel](https://vercel.com/)
Webホスティングサービス。CI/CDとWebサーバーが合わさったサービス。
無料で始めることができ、GitHubなどのリポジトリと連携することで手軽にアプリケーションをデプロイすることが可能。

- [Next.js](https://nextjs.org/)
ReactベースのフルスタックWebアプリケーションフレームワーク。
Reactはクライアントサイドのみをサポートするが、Next.jsはサーバサイド機能もサポートする。

# Next.jsの導入
1. githubでサイト制作用リポジトリを作成
1. create-next-appを用いてNextjsアプリを構築
    -  [こちら](https://qiita.com/kaba_san/items/302b8b731e7fbfa56367)を参考にさせていただきました
1. `yarn dev`でサイトが表示されることを確認

# サイトのデプロイ
後でドメインはちゃんと用意するとして、とりあえずデプロイしてみる。
1. [Vercel](https://vercel.com/)にアクセス
1. 今回作成のリポジトリをインポート
1. 「Deploy」ボタンを押下
1. サイトが公開されていることを確認
OSPF勉強中　

OSPFについて勉強したことをアウトプットすることが目的です。

DROTHERで障害が起きる
　DROTHERが224.0.0.6（DR,BDR宛）にLSUをマルチキャストする
　　DRは224.0.0.5（全てのOSPFルータ）にLSUをマルチキャスト
  　　他セグメントにも同じように送る→以下繰り返し。
※　同エリアの場合


エリアについて

1 バックボーンルータ
　1つ以上のinterfaceがバックボーンエリアに所属
2 内部ルータ　
　全てのinterfaceが同じエリアに所属
3 エリア境界ルータ　
　複数のエリアに所属するルータ　CPU消費量大
4 自律システム境界ルータ
　1つ以上のネットワーク以外に所属　CPU消費量大


LSAタイプについて

type1(ルータLSA）
生成するルータ　全OSPFルータ
情報　ルータID,ルータのIPアドレス,コスト情報,役割
自エリア内でフラッディングされる　
type1をもとにルーティングテーブルを作成

type2(ネットワークLSA)
生成するルータ DRルータ
情報　DRルータのIPアドレス,マルチアクセスネットワークのルータのリスト
自エリア内でフラッディングされる

type3（ネットワーク集約LSA）
生成するルータ　ABRルータ
情報　エリア内に存在するネットワークアドレス
所属するエリアとは違うエリアのルート情報を各エリアにフラッディングする

type4(ASBR集約LSA)
生成するルータ　ABRルータ
情報　ASBRの情報

type5（AS外部LSA)
生成するルータ　ASBRルータ
情報　非OSPFのネットワーク情報
AS全体に非OSPFの情報を伝える
【Python】エラー「/lib64/ld-linux-x86-64.so.2: No such file or directory」の解決方法

# 概要
Python数理最適化ライブラリ`pulp`を`docker-compose`上で利用したら以下のエラーになりました。

```
/lib64/ld-linux-x86-64.so.2: No such file or directory
```
```
'Pulp: Error while trying to execute, use msg=True for more details/usr/local/lib/python3.6/site-packages/pulp/solverdir/cbc/linux/64/cbc'
```


### 前提(Mac環境)
- 機種ID：MacBookPro18,3
- macOS：Monterey
- チップ：Apple M1 Pro
- メモリ：16GB

# 原因はホストOS
調べてみると、このエラーは、Docker環境下ではM1チップで実行不可能なソルバーが実行されているのではないか？とのこと。

参考：
[Pythonの最適化ライブラリPuLP をM1 Mac × Dockerで動かす](https://zenn.dev/monogotu_ds/articles/3b8609ac263621))


ということで、原因は、ホストOSのアーキテクチャにあることがわかりました。

```
$ uname -m
arm64
```

上記のように自分のホストOSでは`arm64`。
Dockerはデフォルトでホストのアーキテクチャに合わせたイメージを選択する。
つまり、`arm64`であればそれに合わせたイメージが作成されることになります。

しかし、`pulp`で利用されるソルバー（内部的にはC++で書かれている？）は特定のアーキテクチャに依存したバイナリを含んでいる可能性があるとのこと。ということで、Dockerイメージをエラーメッセージで表示されている`linux-x86-64`にて作成するようにすれば良いのです。

# 解決方法

```docker-compose.yaml
version: '3.3'

services:
    django:
      build: ./
      container_name: sample-django
      platform: linux/x86_64 ## これを追加する
      ports:
      ...
```

上記のように`linux/x86_64`を指定して再ビルドすることで、Dockerはそのサービスを`x86_64`アーキテクチャのLinuxで実行するようになります。

これにより、`/lib64/ld-linux-x86-64.so.2`ライブラリがコンテナ内に存在するようになり、エラーが解消されました。

参考
[/lib64/ld-linux-x86-64.so.2: No such file or directory error](https://stackoverflow.com/questions/68630526/lib64-ld-linux-x86-64-so-2-no-such-file-or-directory-error)
Pythonの基本⑤【dict型のメソッド】

dict型（辞書型）の操作を行うためのメソッドを備忘録的にまとめてみました。

## よく使うメソッド一覧
`keys()`: 辞書のキーのリストを返します。
```python
my_dict = {'a': 1, 'b': 2, 'c': 3}
keys = my_dict.keys()
print(keys)  # Output: dict_keys(['a', 'b', 'c'])
```

`values()`: 辞書の値のリストを返します。
```python
my_dict = {'a': 1, 'b': 2, 'c': 3}
values = my_dict.values()
print(values)  # Output: dict_values([1, 2, 3])
```

`items()`: 辞書のキーと値のペアをタプルで含むリストを返します。
```python
my_dict = {'a': 1, 'b': 2, 'c': 3}
items = my_dict.items()
print(items)  # Output: dict_items([('a', 1), ('b', 2), ('c', 3)])
```

`get()`: 指定したキーに対応する値を取得します。キーが存在しない場合はデフォルト値を返します。
```python
my_dict = {'a': 1, 'b': 2, 'c': 3}
value = my_dict.get('b')
print(value)  # Output: 2
```

`pop()`: 指定したキーと対応する値を削除し、その値を返します。
```python
my_dict = {'a': 1, 'b': 2, 'c': 3}
value = my_dict.pop('b')
print(value)  # Output: 2
print(my_dict)  # Output: {'a': 1, 'c': 3}
```

`popitem()`: 辞書から任意のキーとその値のペアを削除し、削除されたキーと値のペアを返します。
```python
my_dict = {'a': 1, 'b': 2, 'c': 3}
item = my_dict.popitem()
print(item)  # Output: ('c', 3)
```

`clear()`: 辞書のすべての要素を削除します。
```python
my_dict = {'a': 1, 'b': 2, 'c': 3}
my_dict.clear()
print(my_dict)  # Output: {}
```

`update()`: 別の辞書またはキーと値のペアからなる反復可能オブジェクトで辞書を更新します。
my_dict = {'a': 1, 'b': 2}
new_items = {'b': 3, 'c': 4}
my_dict.update(new_items)
print(my_dict)  # Output: {'a': 1, 'b': 3, 'c': 4}
```python
my_dict = {'a': 1, 'b': 2}
new_items = {'b': 3, 'c': 4}
my_dict.update(new_items)
print(my_dict)  # Output: {'a': 1, 'b': 3, 'c': 4}
```

`copy()`: 辞書の浅いコピーを作成します。
```python
my_dict = {'a': 1, 'b': 2}
my_dict_copy = my_dict.copy()
```

`fromkeys()`: 指定されたキーのリストから新しい辞書を作成し、各キーに対応する値を設定します。
```python
keys = ['a', 'b', 'c']
default_value = 0
my_dict = dict.fromkeys(keys, default_value)
print(my_dict)  # Output: {'a': 0, 'b': 0, 'c': 0}
```

`setdefault()`: 指定されたキーが存在する場合はその値を返し、存在しない場合は新しいキーとデフォルト値を追加します。
```python
my_dict = {'a': 1, 'b': 2}
value = my_dict.setdefault('c', 3)
print(value)  # Output: 3
print(my_dict)  # Output: {'a': 1, 'b': 2, 'c': 3}
```

## まとめ
dict型（辞書型）の操作メソッドについて紹介しました！
Streamlitのファイルアップローダーのサイズ制限の変更

# はじめに
Streamlitを使用してこのような場面に直面したことはないでしょうか？
私「よーし、ファイル読み込むぞ～」
st「無理っす。200MBが限界っすわ。」
私「(´・ω・｀)」

# サイズの制限を変更できるのか？
結論から言います。
**できます**。
私自身もいろいろと調べていて、全く見つけられず、会社の人から変更できないのか聞かれましたが役に立てず。。。
少しでも良いところを見せようと、調査を進めたところ…

https://ecoagi.ai/ja/topics/Streamlit/streamlit-upload-file

上記のページに以下のような内容が。

Q：Streamlitのアップロードサイズはどのくらいですか？

A：デフォルトでは、Streamlitは最大200MBまでのアップロードサイズを許可します。ただし、この制限はStreamlitの設定ファイルで変更することができます。

まじ(´・ω・｀)？
ということで、ドキュメントへレッツゴー。

https://docs.streamlit.io/

# 設定の変更はconfig.tomlファイルから
Streamlitではアプリケーションファイルと同じディレクトリ内に`.streamlit`というディレクトリを作成し、その中に設定ファイルである`config.toml`ファイルを作成することで、いろいろな設定を行うことができます。
詳細は以下をご覧下さい。

https://docs.streamlit.io/library/advanced-features/configuration

読み進めていくと次のような記載が。

```
# Max size, in megabytes, for files uploaded with the file_uploader.
# Default: 200
maxUploadSize = 200
```

デフォルトで200MBになっていますね。
MB表記でこちらの値を変更することでサイズの制限を変えることができます。


実際に変更してみた↓
```
[server]
maxUploadSize = 1000
```
![size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524375/fd3b952e-eb7e-c67e-c383-7f2a8c15ca07.png)

1GBに変更できていますね！

# まとめ
普通のファイルを読み込むだけならそこまで必要はないとは思いますが、ビッグデータや画像、動画ファイルを読み込むとなると、200MBでは足りなくなる可能性がありますからね。
また、複数のファイルを一気に読み込むこともできるので、そういったときにも有効かもしれませんね。
ちなみに、複数のファイルをアップロードする場合は、以下のように`st.file_uploader`関数の`accept_multiple_files`パラメータを`True`に設定すればOKです。

```python
st.file_uploader('', type=[''], accept_multiple_files=True)
```

ドキュメントを漁っていると、知らない機能がたくさんでてきますね！
Streamlitアプリ上でJupyterを使用したり、JupyterでStreamlitアプリを起動したり面白そうな情報もたくさんあります。
暇なときにまとめていこうと思います。
それでは！！！
【GitHubCLI】リモートリポジトリーをコマンドで作成してみた

## はじめに
技術記事を書いている際にサンプルコードを載せたいときがあります。その際に、プラウザ上でGitHubに毎回リモートリポジトリーを作成することにめんどくささを感じたので、コマンドで作成しました。実施方法について記しておきます。

公式ドキュメント

https://docs.github.com/ja/github-cli/github-cli/about-github-cli

## 内容

コマンドラインから作業しているときは、GitHub CLI を使用して時間を節約することができます。

GitHub CLI には、次のような GitHub 機能が含まれています。

- リポジトリの表示、作成、複製、フォーク
- Issue と pull request の作成、クローズ、編集、一覧表示
- プルリクエストのレビュー、diff、マージ
- ワークフローの実行、表示、一覧表示
- リリースの作成、一覧表示、表示、削除
- gist の作成、編集、一覧表示、表示、削除
- codespace の一覧表示、作成、削除、接続
- GitHub API から情報を取得します

沢山機能があり、使いこなすためには、時間を要します。今回はSetupとリモートリポジトリーの作成のみを実施します。

https://docs.github.com/ja/github-cli/github-cli/quickstart

こちらに則って実施していきます。

## Setup
### インストール
```
brew install gh
```


### ログイン

認証ログインの手続きを行います
```
gh auth login
```
以下から、質問に対して答えていきます

***
```
 What account do you want to log into?  [Use arrows to move, type to filter]
> GitHub.com
  GitHub Enterprise Server
```
GitHub.comを選択します
***


```
? What is your preferred protocol for Git operations on this host?  [Use arrows to move, type to filter]
> HTTPS
  SSH
```
HTTPSを選択します
***
```
? Authenticate Git with your GitHub credentials? (Y/n)
```
Yesを入力します
***
```
How would you like to authenticate GitHub CLI?  [Use arrows to move, type to filter]
> Login with a web browser
  Paste an authentication token
```
Login with a web browser　を選択し、ブラウザ画面で認証を行います
***
```
! First copy your one-time code: 〇〇
Press Enter to open github.com in your browser...
```
〇〇の部分にワンタイムパスワードが記載されます
Enterを押すと、ブラウザ画面に遷移します
***


```
✓ Authentication complete.
- gh config set -h github.com git_protocol https
✓ Configured git protocol
✓ Logged in as GitHubの名前
```
ブラウザ画面で認証手続きを実施すると、ログインが完了したと出力されます

*** 

上記の手続きにより、GitHubの操作をコマンドで行うことが可能になりました


## リモートリポジトリーをコマンドで作成

結論から伝えますと、リモートリポジトリーに保存したいディレクトリへ移動して、以下のコマンドを実行すると作成することができます。

```
gh repo create --public --source=.
```

### 詳細説明
```
gh repo create
```
リポジトリーを作成する際のコマンドです。
*** 
ロングオプションとして
```
--public
```
または、
```
--private
```
を書き加えることによって、privateかpublicを選択することができます。

*** 
もう一つのロングオプションとして
```
--source=.
```
`.`（現在のディレクトリ）を指定することにリモートリポジトリーの名前をフォルダ名に指定することができます。

*** 

詳細に関しては、公式ドキュメントでその他オプションについて知ることができます。

https://cli.github.com/manual/gh_repo_create



## 最後に
他にも良い方法があれば、コメントいただけると大変うれしいです。
良かったと思ったら、いいねやTwitterのフォローよろしくお願いいたします！

https://sites.google.com/view/muranakar

個人でアプリを作成しているので、良かったら覗いてみてください！
CakePHP5系でauthenticationを公式の言うとおりに導入してもできなかった話

## はじめに
4系の時の内容を修正し忘れてるせいで、動かないと思われる個所が二か所ありました。
2024/02/19現在での話なので、既に修正されているのかもしれません。
ついでに、自分用のアプリケーションに落とし込むときに躓いたポイントも残しておきます。

### 一つ目。authenticationのバージョンが合っていない。

公式には
```
composer require "cakephp/authentication:^2.0"
```
と書いてあるけど
```
composer require "cakephp/authentication:^3.0"
```
が正解でした。
authenticationの2系はCakePHP4系までで、
CakePHP5系には対応していないそうです。

### 二つ目。RequestHandlerComponentが見つからない。
公式の手順に従って AppControllerのinitializeで
```
$this->loadComponent('RequestHandler');
```
とするとエラーになります。
別にloadComponentしなくても問題なく動いたので
ここは削除しました。


## 自分のアプリ用に修正した箇所

ここからはたぶん蛇足になりますが
併せていろいろいじったことを備忘録として残しておきます。

### emailじゃないフィールド名でログインするようにしたい

公式に従っていればApplicationクラスにgetAuthenticationService()という関数を追加している筈です。
これの中に二か所ある
`'username' => 'email', `
を
`'username' => 'userid',`
のように、変更しました。
二か所とも変更しました。

テンプレートのほうも同じように userid をpostするようにします。

### セキュリティ用のソルトを変更する
app_local.phpに
```
    'Security' => [
        'salt' => env('SECURITY_SALT', 'f2330403d2698ca56933f479e1785b2a5d6efa268c9b472310d7b42d9dc93054'),
    ],
```
なんて値がデフォルトで設定されていると思いますが、
ここを変更しておかないとハッシュ化した意味がうすくなりそうなので
変更しておきました。

### 基本的にログインしないと使えないサイトにしたい

公式に従って追記した AppController::initialize()の中にある
`$this->Authentication->addUnauthenticatedActions(['index','view']);`
を削除しました。

非ログイン時に見せたいページはログインと会員登録とお知らせ的なページの3つくらいだったので
各コントローラにそれぞれ記述して対応しました。

### ログインページとログイン後のページを変更した

ログイン用のページは /login にしたかったので
LoginControllerを作成しindexアクションにUsers::login()の中身をそのまま持ってきました。
また、initializeに
```
$this->Authentication->addUnauthenticatedActions(['index']);
$this->Users = $this->fetchTable('Users');
```
を追加しました。
4系でController名に紐づかないTableの呼び出しで使われていた`$controller->loadModel()`は
廃止になったのでfetchTableを使用しています。

Application.phpのgetAuthenticationService() でログインページを指定しているので
そこも修正する必要があります。二か所あります。
```
        $authenticationService = new AuthenticationService([
            'unauthenticatedRedirect' => Router::url(['contorler'=>'Login']), //<=ココ
            'queryParam' => 'redirect',
        ]);
```
```
        $authenticationService->loadAuthenticator('Authentication.Form', [
            'fields' => [
                'username' => 'username',
                'password' => 'password',
            ],
            'loginUrl' => Router::url(['contorler'=>'Login']), //<=ココ
        ]);
```
特に、loadAuthenticatorのほうは、ログインページと一致していないとID/Passがあっていても、IDかPassが間違ってるんじゃね？
と言われてログインできなくなります。


そしてリダイレクト先を /home にしたかったので
リダイレクト先を下記のように修正。
```
$redirect = $this->request->getQuery('redirect', [
    'controller' => 'Home',
    'action' => 'index',
]);
```



ログアウトも /logout にしたかったので
LogoutControllerを作成し、indexアクションにUserd::logout()の中身を持ってきました。
Loginコントローラと同じく initializeに
`$this->Authentication->addUnauthenticatedActions(['index']);`
を追加し、ログアウトのメッセージをFlashに格納
$this->Flash->success('ログアウトしました');
ログアウト後のリダイレクト先を /login に変更
`return $this->redirect(['controller' => 'Login', 'action' => 'index']);`
というようにしました。


せっかくだから routes.php もいじってみよう
ドメイン/ でログインページを出せたほうが良いと思いたので
`$builder->connect('/', ['controller' => 'Login', 'action' => 'index']);`
としました。 (homeのほうがいいかな)
PagesControllerは使わないのでそれ関係の記述は削除しました。
Unity RuleTileでTilemap作成

# 記事の概要
Tilemapの勉強をしていたところ、Pipeline Tileという拡張機能を見つけるも使い方が分からなかった
→RuleTileという機能に置き換わっていたorz

この事実について言及のある記事が見当たらなかったので、それに触れつつRuleTileの使い方について説明します

# 開発環境
Unity 2021.3.11f1

# RuleTileについて
前述した通り、Pipeline TileはRuleTileという新しい機能に置き換わっています。
RuleTileのリファレンスがv2019にはじまっているのでそのあたりに追加されたのでしょうか。

RuleTileはUnity2DでTilemapの作成をする際に便利な拡張機能です。
あるマップチップに対して、地形の端や角では別のマップチップに置き換わるようなルールを設けて、TilePaletteからいちいちスプライトを持ってくる手間を減らすことができます。

以下のような地形を、Tilepaletteから1枚スプライトを選ぶだけで編集することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521797/e6ce301d-33e0-1733-db52-59eae7841c74.png)

# 使い方
Rule Tileの各種プロパティやオプションについては以下の公式リファレンスを参照してください。
https://docs.unity3d.com/ja/Packages/com.unity.2d.tilemap.extras@3.0/manual/RuleTile.html

## RuleTileの作成
Projectタブの+ボタンから
2D＞Tiles＞Rule Tileと選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521797/47cb0fe0-c356-ee0f-f0cc-81635b757054.png)


## 設定
Rule Tileのインスペクターはこんな感じです。
Number of Tiling Rulesプロパティに必要なルール数を入れるかTilingRuleプロパティ下部の+ボタンを押すことでルール設定用のリストを増減できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521797/5dfbe76d-3c2f-ae4c-90f5-9d134c5abfb2.png)


まずは基本となるスプライトをDefault Spriteにドラック&ドロップ(Selectから参照も可)します。
後ほど決めるルールに則らないものはすべてここへ設定したスプライトになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521797/6cde2f99-a730-5156-1a29-75fef5ef9810.png)

マス目状の項目をクリックすると矢印や×が出てきます。真ん中を基準に、その方向への画像の有無を矢印がtrue、×がfalseという具合にルール付けして、条件に合う場合右のSprite欄へ設定したスプライトに置き換わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521797/d077355b-fa66-e10f-3cab-0e22e5b1a21b.png)

各種ルール付けが終わったら、最後にRule TileをTile Paletteへドラック&ドロップします。
![RuleTileDragandDrop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521797/d034472b-a726-0e7f-fdfa-fc98d99be608.gif)


Tile Paletteの作成については以下の公式リファレンスを参照してください。
https://docs.unity3d.com/ja/2021.3/Manual/Tilemap-Palette.html

TilePaletteにはDefaultSpriteに設定したものだけが表示されます。

# 使ってみる
![RuleTile.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521797/ad730a01-3163-16aa-7ab5-9698dc615635.gif)


# さいごに
Qiitaでの初めての記事作成でした。
誤っている情報などありましたらご指摘いただけると幸いです。

# 参考
[Rule タイル](https://docs.unity3d.com/ja/Packages/com.unity.2d.tilemap.extras@3.0/manual/RuleTile.html)
[【Unity】2Dタイルマップ② 隣接するタイルを自動で繋ぐPipeline Tile](https://hiyotama.hatenablog.com/entry/2021/03/11/182511)
[タイルマップを使用して簡単にマップを作製しよう② ～ルールタイル(RuleTile)を用いたマップの作成～](https://active-role-works.com/p/tilemap_2/)

使用した素材
[ねくらマップチップ](https://silsec.sakura.ne.jp/WolfRPGEditor/MaterialList/html/tdv244.html)
GCP VMインスタンスへVSCodeからSSH接続する方法 (※Terraformを使用してGCPでVMインスタンスをデプロイする方法の続き)

![スクリーンショット 2024-02-22 091226.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364428/54bc64c5-da7c-1071-f9d1-21df2afe4cb5.png)

# はじめに
今回は前回の記事の続きとして、Terraformで立てたGoogle Cloud Platform（GCP）上の仮想マシン（VM）インスタンスに対して、VSCode を使用して SSH 接続する方法について説明します。
前回の記事はこちら：https://qiita.com/RyutoYoda/items/3948357eb4c063294830

# SSH 鍵の生成

1. まず、ターミナルを開き、以下のコマンドを入力します:
    
    ```bash
    ssh-keygen
    ```
    
2. コマンドを実行すると、次のようなプロンプトが表示されます:
    
    ```
    Generating public/private rsa key pair.
    Enter file in which to save the key (/Users/your_username/.ssh/id_rsa):
    ```
    
    ここで、SSH 鍵を保存するファイルパスを指定します。デフォルトでは、**`/Users/your_username/.ssh/id_rsa`** に保存されますが、必要に応じて変更できます。ファイルパスを入力し、Enter キーを押します。
    
3. 次に、パスフレーズを設定するかどうかを尋ねられます:
    
    ```
    Enter passphrase (empty for no passphrase):
    ```
    
    パスフレーズは、セキュリティ向上のために SSH 鍵に設定できる追加のパスワードです。パスフレーズを設定する場合は入力し、Enter キーを押します。パスフレーズを設定しない場合は、そのまま Enter キーを押してください。
    
4. パスフレーズを設定した場合は、もう一度入力するように求められます:
    
    ```
    Enter same passphrase again:
    ```
    
    先ほどと同じパスフレーズを入力し、Enter キーを押します。
    
5. これで SSH 鍵の生成が完了しました。秘密鍵は **`id_rsa`** という名前で保存され、公開鍵は **`id_rsa.pub`** という名前で保存されます。

## **SSH 接続の設定**

1. SSH 接続の設定を行うために、**`~/.ssh/config`** ファイルを開きます:

※codeコマンドが使えない場合はvscodeでコマンドパレット（⇧⌘P）を開きshell commandで検索、Shell Command: Install 'code' command in PATHを選択してインストールする。
    
```bash
code ~/.ssh/config
```
    
2. 上記コマンドを実行すると、VSCode が **`config`** ファイルを開きます。ファイルの内容を以下のように編集します:
    
    ```yaml
    Host **your_host_alias**（gcpのインスタンス名）
        HostName **your_vm_ip_address**（外部IPアドレス）
        User **your_username**（PCの名前）
        IdentityFile ~/.ssh/id_rsa
        PasswordAuthentication no
        IdentitiesOnly yes
    ```
    
    ここで、**`your_host_alias`** は任意のホスト名、**`your_vm_ip_address`** は対象の VM インスタンスの IP アドレス、**`your_username`** は VM にアクセスするためのユーザー名に置き換えてください。
    

## **SSH 鍵の確認**

最後にターミナルで、生成した SSH 鍵の内容を確認し、コピーします。

```bash
cat ~/.ssh/id_rsa.pub
```

インスタンス名をタップして、編集からSSH認証鍵をペーストします。

![スクリーンショット 2024-02-21 19.53.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364428/5d458556-a1f8-38b0-e46e-85dfe48c1dc8.png)


これで、GCP VM インスタンスへの SSH 接続の準備が整いました。 VSCode を使用して、リモートからSSHの＋マークでVM インスタンスにアクセスできます。
![スクリーンショット 2024-02-21 19.54.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364428/66a313cd-f293-f189-035b-738f282c7875.png)
左下を確認し、設定したインスタンス名になっていれば成功です。
![スクリーンショット 2024-02-21 19.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3364428/b3919565-b6cd-a567-063f-f85829bff7d4.png)


## まとめ

この記事では、Google Cloud Platform（GCP）上の仮想マシン（VM）インスタンスに対して、VSCode を使用して SSH 接続する手順を簡潔に説明しました。SSH 鍵の生成、接続情報の設定、そして SSH 鍵の確認という基本的な手順を通じて、VM インスタンスへの安全かつ効率的なアクセス方法を提供しました。これにより、開発者はVSCodeを活用して、GCP 上のリソースにスムーズにアクセスできるようになります。
【Rails】uninitialized constant Rack: :MiniProfiler の解決方法

# 概要
この記事は、Railsアプリケーションのrspec実行時や、本番デプロイの際に、時々起こる `uninitialized constant Rack: :MiniProfiler` の解決方法について言及していきます。

# エラー再現
エラーが起きる際の再現をしてみます。

:::note warn
**注意点**
よくあるパターンでやっているだけなので、違うパターンでも似たようなエラーを起きる可能性はあります。
:::

`development` の環境で開発をしている際、左上に出る計測表示を消したくなったとします。
「**rails 左上 数字消す**」みたいな感じで検索したとします。
その中で見つけた解決策を試してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524017/6000f393-b5b9-39ea-4b42-825f93c05012.png)

`config/initializers` 配下に `rack_profile.rb` を作成します。
```rb:rack_profile.rb
Rack::MiniProfiler.config.start_hidden = true
```
その後同じようにアプリを起動して左上を確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524017/07d0698a-4c3e-3fd0-cd75-f03c4db173b2.png)

「やったーー！！　邪魔者がいなくなったぞ！！！」

その後しばらく経って `rspec` を通そうとします。


```sh:Terminal
~ TodoApp $ bundle exec rspec spec/ --format documentation
```


そうすると下記のエラーが出て一個も `rspec` が通りません。

```sh:Terminal
NameError:
  uninitialized constant Rack::MiniProfiler
  Did you mean?  MiniMime
```





# エラー原因
これは、 `config/initializers` 配下に `rack_profile.rb` を作成し、下記の記述をしているのが原因です。
```rb:rack_profile.rb
Rack::MiniProfiler.config.start_hidden = true
```

`config` フォルダは、アプリケーション起動時に読み込まれるようになっているのですが、 `development` 環境でも、`test` 環境でも同様に `rack_profile.rb` を読み込みに行きます。
そして、railsアプリケーションの作成時の `Gemfile` の状態では、 `development` 環境でのみ `rack-mini-profiler` を追加するという設定にしていると思います。
下記のような感じです。
```rb:Gemfile
group :development do

  (省略)
  
  gem 'rack-mini-profiler', '~> 2.0'
  
  (省略)
  
end
```

そのせいで、test環境でアプリが起動されると、`rack_profile.rb` を読み込んだ際に、 `rack-mini-profiler` って知らないぞ！！ってエラーが出てると認識しています。(解釈間違ってたらすみません。)


# 解決方法
解決方法はいくつかあります。

## development環境でのみ読み込む。
作成してあった `rack_profile.rb` の記述を下記のように変更し、 `development` 環境でのみ設定が読み込まれるようにします。
```rb:rack_profile.rb
if Rails.env.development?
  Rack::MiniProfiler.config.start_hidden = true
end
```

## rack-mini-profilerをそもそも追加しない
まずは、作成してあった `rack_profile.rb` は必要なくなるので、削除してください。
その後、Gemfileから、`rack-mini-profiler`の記述を消して、 `bundle install`します。
```diff_ruby:Gemfile
group :development do

  (省略)
  
-  gem 'rack-mini-profiler', '~> 2.0'
  
  (省略)
  
end
```


# 参考文献

https://prograshi.com/framework/rails/remove-ms-by-rack-mini-profiler/

# おわりに

今回は、時々見るエラーについて解説をしました。
エラーを解決する際にその場の解決ではなく、恒久的な解決になるのかを意識するといいなと改めて感じました。
どこかの誰かのためになれば、幸いです。
余談ですが、Qiitaの記事にもできないようなしょうもない内容の記事を、自分のブログにあげていたりするので見ていただけると嬉しいです。

https://kt-tech.blog
RuboCop-airbnbの導入方法

## 環境構築の手順
### ①Gemの追加
```:Gemfile
group :development, :test do
  ...
  # 以下追加
  gem "rubocop-airbnb"
end
```

### ②rubocop-airbnb の設定
ルートディレクトリに以下の2ファイルを作成する
```:.rubocop.yml 
inherit_from:
  - .rubocop_airbnb.yml

# Rails用に最適化
Rails:
  Enabled: true

# 文字数の上限を８０文字から変更
LineLength:
  Max: 130
  
# rubocopで検証したくないフォルダを指定
AllCops:
  Exclude:
    - 'db/**/*'
    - 'config/**/*'
    - 'bin/*'
    - '**/Gemfile'
    - 'vendor/**/*'
    - '.git/**/*'
```
```:.rubocop_airbnb.yml 
require:
  - rubocop-airbnb
```
### ③テストを実行してみる
```
bundle exec rubocop --require rubocop-airbnb
```
自動修正するときは以下のコマンドを使用する
```
bundle exec rubocop --require rubocop-airbnb -a
```
scratchの勧め

# 自己紹介
こんちは　tetudo-meganeでございます。
今回リア友がこのサイトをやってたんでやってみようかなって始めました。
よろしくお願いします！
ところで…
やっぱりscratchって神ですよね
僕にとってプログラミングって難しいイメージがあります。
でもプログラミングサイト、scratchはめっちゃ簡単なんです。
ここではscratch主に中級者、上級者向けのことを紹介していきます。

## クローンでもターボモード使えるよ

最近よくクローンを使ったプログラミングを見かけます。なんですけど、ターボモード使えんかったり、使ってもバグったりします。そこでバグらないようにするためにある工夫をします。
まず、普通にクローンをする方法を教えますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712471/8ce34ffc-2cae-7d1c-2f64-19135d97b9c1.png)
こうやって作ります。（雑）
なんかおかしいなって思った人　正解！
拡張機能入れてるんで上のバーは青になってるし、猫のブロックができてます。

…そこじゃなくて（）
今やってるのはクローンをつくるブロックの中の指示するブロックを作る作業ですね。
これをすればスプライトの量もへらす事ができます。
めっちゃいいですね。（自画自賛）
スプライトを減らす利点っていうのがデータが軽くなるっていうこと以外にもあって作業がしやすくなることです。
この作業するのおすすめです。
んで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712471/d73287b9-b4e0-1bed-faed-75f452d43a3b.png)
こうやってもう片方の反応する側のブロックを作ります。
ここに出てる紫のブロックに関してはクローンそれぞれにしてもらいたい動きに置き換えてもらっておｋです。

ここまでは初級者でできてたらいいかな

ここからは上級者向け
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712471/8ce34ffc-2cae-7d1c-2f64-19135d97b9c1.png)
これは簡単に言えば時間で操作してるんじゃなくてパソコンの抵抗（？）というかなんというかで操作してる形になります。
なのでscratch自体の性能を上げるターボモードだとパソコンの性能で動きが大きく変わっちゃうんですよね。

そこでパソコンの性能での動きの差を小さくするために
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712471/a53f5050-89d9-6020-6169-0e8ed8097c31.png)
ってやって「0.1秒待つ」を入れます。
そうすることで変数を使った作品でもターボモードが使えます！

最後まで見てくれてありがとうございました！
これからよろしくお願いします～！
Windowsのbat（コマンドプロンプト）で『規定のブラウザーで特定URL開く』

# 概要

『ゲーム起動』と『ログインボーナスのサイトを開く』を同時にやるbatあると便利だなあって思いました。
さらに **規定のブラウザーで開く** って動作なら将来ブラウザーを変えた時などに変更不要にできて楽。

# やり方（start）

```bat:
start 開きたいURL
```

**開きたいURLをダブルクオテーションで囲んでしまうと失敗します。**

こんなふうにコマンドプロンプトが起動してうんともすんとも言わない状況に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/bcce5fdd-65a0-115a-dac3-922f591d8551.png)

# やり方（rundll32.exe）

```bat
rundll32.exe url.dll,FileProtocolHandler "開きたいURL"
```

この方法の場合、開きたいURLをダブルクオテーションで **囲んでも囲まなくても動作は同じです。**

# 参考サイトさん

http://piyopiyocs.blog115.fc2.com/blog-entry-758.html

# バージョン

Microsoft Windows [Version 10.0.19045.4046]
JavaScriptの正規表現と実例

## はじめに

初めてQiitaで記事を書くので、内容が分かりにくい・読みづらい等々あると思いますが、ご容赦ください。

今回の内容は**正規表現**です。最近使ったので、軽くまとめてみました。

## 身近な正規表現
今まで使ったことがなかったのですが、Visual Studio Code（VS Code）での検索機能（`Ctrl` + `F`）のところに、`Aa`や`ab`の右横に`.*`と表示されています。あのボタンを押すと、正規表現で検索ができるみたいですね。

### サンプルのソースコードで検索してみる

>試しに、下記のようなコードがあったとします。
>```js
>let変数名 = 1;
>```
><br>
> letと変数名の間に半角の空白がないことを正規表現で見つけたいと思います。


<br>

```sample.js

let a = 1;
letb = 2; //間違っている
let c = 3;
letd = 4; //間違っている
```



では、letの後に半角の空白がないものを正規表現で探してみましょう。
- `letb` や `letd`が該当します


### 探す方法
- letという文字の後に何らかのアルファベットがある
<br>

### 実際の正規表現

>``` js:正規表現
>let\w+ //ただし、LetやlEtとかにも反応します
>```
>
<br>
では、\w+は何を意味するのでしょうか？
<br>
<br>

| 記号 | 意味 | 備考 |
|:-:|:-:|:-:|
| \w | アルファベット（大・小文字）<br>・数字・_（アンダースコア） | \とwの間には空白はない  |
| +  | 「+」より直前に書いた文字・記号が1つ以上ある  | ここでは\w<br>つまり、アルファベットや数字、_が1個以上続く  |

<br>
<br>

ざっくりとまとめると表のような感じでしょうか。
<br>

>もう一度、正規表現に戻ると、
>
>```
>let\w+
>```

<br>

つまり、`let`の後に文字が続いているもの（1文字以上）を探せという意味になります。
<br>

因みに、`+`を外すと、
`letbb`などletの後に２回以上続くものには`let`直後の`b`までしか反応しません。



## 正規表現を使って文字を探すプログラム

では、次の文章があったとします。

``` js:文章
三角形の面積 = 底辺 × 高さ ÷ 2
長方形の面積= 縦 × 横
台形の面積 = (上底+下底) × 高さ ÷ ２
円の面積= 半径 × 半径 × π
```

`面積 =`：積と=の間に半角の**空白がある文章**を探すプログラムを書いてみます。

+ 三角形の面積 = 底辺 × 高さ ÷ 2
+ 台形の面積 = (上底+下底) × 高さ ÷ ２

この２つですね。

<br>

今回は、
+ 改行で文章を区切る
+ それぞれに対して、正規表現がマッチするかどうかを判定する
+ 該当する文章を出力する

ということをしてみます。


<br>

``` search.js
// 探したい文字列を/で囲みます
const regex =  /面積\s=/;  //regexは正規表現を意味するみたいです

// 入力テキスト
const text = `三角形の面積 = 底辺 × 高さ ÷ 2
長方形の面積= 縦 × 横
台形の面積 = (上底+下底) × 高さ ÷ ２
円の面積= 半径 × 半径 × π`;


// 改行で入力テキストを分割しました
const splitText = text.split("\n");

//splitは配列になっているので、今回はfor文で1つ1つ確認します
for(let i of splitText){

    //それぞれの文章が正規表現で指定した文字列と一致するか？    
    if(i.match(regex)){
        console.log(i);
    }
    
}
```

:::note warn
ご指摘いただいましたが、
単に一致だけを調べる場合、testを使います。
（一致したらtrueを返してくれます）

if(regex.test(i)){
　　console.log(i);
}

:::


``` :出力
三角形の面積 = 底辺 × 高さ ÷ 2
台形の面積 = (上底+下底) × 高さ ÷ ２
```

期待どおりの結果でした。

## 余談とおわりに
今回はシンプルな文章でご紹介しました。

例えば、{（2024/12/31）}を正規表現で、となると
```:日付
\{（\d{4}\/\d{2}\/\d{2}）\}
```

+ \dが数字
+ {4}数字が4つ続く、{2}数字が2つ続く



正規表現の中に、`{`とか`（`とか`/`とか入れて探したい！となると、混乱しますね:sweat_smile:

<br>
<br>
今回は以上です。

最後までお読みいただき、ありがとうございました！
SentryのProjectを移行する際はsentry.properitesファイルを更新する

## Sentry と Project について

Sentry はエラー監視ツールで、Project はアプリなどのエラーを監視する対象のことです。

## Project の移行について

以前、React Native で作られたアプリのエラー監視を行うために作成した Project を、他組織（アカウント登録時の Organization が異なる）の方に移行する機会がありました。移行方法は[公式ドキュメント](https://docs.sentry.io/product/accounts/membership/#transfer-a-project)に記載があり、簡単に行えました。

## アプリのビルドができなくなる

ところが Project を移行した数時間後、アプリのビルドができなくなっていることに気がつきました。原因は移行前の Organization 名と認証トークンをアプリ内で使用していたことでした。

## sentry.properties ファイルの更新

sentry.properties を使用している場合、default.org と auth.token（環境変数で使用する場合は SENTRY_AUTH_TOKEN）を移行後の Project の値に更新する必要があります。
default.org は組織の設定画面から確認できます。
auth.token は再作成する必要があります。これも組織の設定画面から作成可能です。

## まとめ

Project を移行するときは sentry.properties の更新を忘れない。
Numpy 使うなら，ちゃんと使おう

どうも，人工無脳はやたら長い変数名と，一時変数と，無駄なプログラミングを推してくるみたいですけど。

それに，結果をリストにして返すなんてもってのほか。

numpy を使うなら，ちゃんとベクトル計算をしましょう。

まさか，一文字当たりいくらという請負仕事なんでしょうか。

```python
import numpy as np

def calculate_deviation_scores(scores):
    average_score = np.average(scores)  # 平均値を計算
    standard_deviation = np.std(scores)  # 標準偏差を計算
    deviation_scores = []  # 偏差値を格納するためのリスト

    # 各学生の偏差値を計算
    for score in scores:
        deviation_score = 50 + 10 * (score - average_score) / standard_deviation
        deviation_scores.append(deviation_score)

    return deviation_scores

# 模擬データ
scores = [92, 87, 78, 85, 90, 88, 77, 81, 80, 76]
# 各学生の偏差値を計算
deviation_scores = calculate_deviation_scores(scores)
print(deviation_scores)

```

    [65.79644470496886, 56.6124652253358, 40.081302161996284, 52.93887343348257, 62.122852913115636, 58.44926112126241, 38.24450626606967, 45.59168984977612, 43.7548939538495, 36.40771037014306]
    

一行で書けるので，関数にするのも憚られます。


```python
def calculate_deviation_scores(scores):
    return (scores - np.mean(scores))/np.std(scores) * 10 + 50

# 模擬データ
scores = [92, 87, 78, 85, 90, 88, 77, 81, 80, 76]
# 各学生の偏差値を計算
deviation_scores = calculate_deviation_scores(scores)
print(deviation_scores)

```

    [65.7964447  56.61246523 40.08130216 52.93887343 62.12285291 58.44926112
     38.24450627 45.59168985 43.75489395 36.40771037]
    

更には scipy.stats には，z 得点を計算する zscore() があります。これを使うともっと簡単にかけます。


```python
from scipy.stats import zscore
```


```python
zscore(scores)*10+50
```




    array([65.7964447 , 56.61246523, 40.08130216, 52.93887343, 62.12285291,
           58.44926112, 38.24450627, 45.59168985, 43.75489395, 36.40771037])
JavaScriptのconcatを利用する

## はじめに
表題通り、JavaScriptのconcatを利用します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

```js:sample.js
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array1);
console.log(array2);
console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/2417089e-87e7-2116-b480-f1fdec842961.png)


:::note info
concat() は Array インスタンスのメソッドで、2 つ以上の配列を結合するために使用します。 このメソッドは既存の配列を変更せず、新しい配列を返します。
:::

なるほど。ちょっと勉強になりました。
Terraformの自動フォーマットをVSCodeに設定する方法


# はじめに
`terraform fmt`コマンドでtfファイルのコードをフォーマットすることができます。ただ、どうせならエディターの段階で自動フォーマットしてくれた方が楽なので、やり方を調べてみました。
自分でも使っており、人口も多そうなVSCodeでの設定方法をまとめます。

# プラグインインストール
こちらのHashiCorp TerraformプラグインをVS Codeにインストールします。

https://marketplace.visualstudio.com/items?itemName=hashicorp.terraform#formatting

# 設定ファイルにterraformの設定を追記
settings.jsonに下記の内容を追記します。私はユーザー設定の方に追記しました。

```json
"[terraform]": {
  "editor.defaultFormatter": "hashicorp.terraform",
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file"
},
"[terraform-vars]": {
  "editor.defaultFormatter": "hashicorp.terraform",
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file"
}

```

[terraform] が tfファイルへの設定で、[terraform-vars]がtfvarsファイルへの設定です。
設定内容はどちらも同じで下記のようになっています。
```
"editor.defaultFormatter": "hashicorp.terraform", // HashiCorpが提供するTerraform用のデフォルトフォーマッターを指定
"editor.formatOnSave": true, // ファイル保存時に自動でフォーマットを行うように設定
"editor.formatOnSaveMode": "file"
```

保存時の自動フォーマットにする場合、`editor.formatOnSaveMode`については現状`file`以外サポートされていないようなので、ここはほぼ固定になります。

>When using the editor.formatOnSaveMode setting, only file is currently supported. 


設定後は、保存時にフォーマットが修正されます。

![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2703223/5176d55b-4f83-5d1c-cdc7-9a8784857fc7.gif)


# 参考資料

https://marketplace.visualstudio.com/items?itemName=hashicorp.terraform#formatting
Vimを覚える【vimtutor Lesson 2】

# はじめに

前回の記事です。

https://qiita.com/kohki_takatama/items/89c0413a05322bd62324

他愛ない話なのですが、`vimtutor`タグの記事はQiitaに５件しかないようです。

みんな！`vimtutor`をやらないか！？

# Lesson 2.1

<font color="LimeGreen">`dw`で「単語単位」の削除！</font>ですね。

ノーマルモード（通常時）で使えるコマンドのようです。

`dd`と連打してしまうと行削除になるので注意ですね。
（その場合は`shift + p`でもとに戻ります。）

# Lesson 2.2

<font color="LimeGreen">`d$`で「今いる場所から行末まで」の削除！</font>ですね。

`$`は「文末」を表します。Vim以外でも正規表現などで使います。
知らなかった方は一石二鳥ですね！
# Lesson 2.3

`d` + `motion`で、様々な削除ができるよ！ということが説明されています。
`motion`というのは今までのLessonでやった`w`や`$`のことですね。

新しく学ぶのは、

<font color="LimeGreen">`w` / `e` / `$` 単体でも、それぞれコマンドだよ！該当する部分に移動するよ！</font>ですね。

簡単に
`w`は、次の単語の先頭へ
`e`は、次の単語の最後へ
`＄`は、行の最後へ移動します。

また、削除の新しいコマンドとして<font color="LimeGreen">`de`：単語の最後まで削除！</font>についても学びます。
## `dw`と`de`の違い

以下の例文を使って、`dw`との違いを明確にしましょう。

"exam<font color="LimeGreen">p</font>le text" という文があるとします。カーソルは`p`にあたっています。

ここで`dw`を実行すると、"examtext" になります。
削除されたのは、"ple "です。<font color="LimeGreen">区切り文字である" "（空白）も削除されていますね。</font>

一方、`de`を実行すると、"exam text" になります。
削除されたのは、"ple"です。<font color="LimeGreen">空白が残っていますね。</font>

このように、「次の単語の開始まで、その最初の文字を除く」削除が`dw`であり、
「現在の単語の終わりまで、最後の文字を含む」削除が`de`です。

# Lesson 2.4

<font color="LimeGreen">数字で`motion`を繰り返し！</font>です。

例えば、`2w`で`w`コマンド（上記の、単語単位の移動）を2回繰り返します。

# Lesson 2.5

削除の場合は、<font color="LimeGreen">`d`+`数字`+`コマンド`で繰り返し！</font>です。

例えば、`d2w`ですね。このコマンドは2つのワードを削除します。

# Lesson 2.6

<font color="LimeGreen">`dd`で列の削除！</font>ですね。

ちなみに、`dd`にも数字が使えます（`d2d`で2列削除）。

# Lesson 2.7

<font color="LimeGreen">`u`で操作の取り消し！</font>ですね。
いわゆる`ctrl + z`です。

大文字の`U`は「列全体の操作の取り消し」のようです。
私の`vimtutor`実行環境では操作が効きませんでした。

# Lesson 2 修了！

おつかれさまでした！！
# おわりに

今回もひとつひとつは簡単な内容でしたね！

このままいくのか、だんだんと難しくなるのか・・・

Lesson 3も記事上げました！

https://qiita.com/kohki_takatama/items/857bf1a3caeb52f0fab2
ネストってなんだったっけ？

# はじめに
社内勉強会で「ネストしている場合は〜」と普通にネストという単語が使われていたが、なんだったかパッと思い出せなかったので、書き記しておきます。

# ネストとは
入れ子のこと。
難しくいうと、プログラムの構造が再起的に繰り返されて記述されること

# 例えば、こういうこと！

下記のようにif文の中に、if文を書いている（入れ子になっている）場合のことをいいます。
```
if （条件式A）　{
 if (条件式B) {
  処理
 }
}
```

# おわりに
調べたらすぐに思い出せました。ネストは初学者でも分かっておかないと恥ずかしいので、しっかり覚えておきましょう！
firebaseで改行したテキストフィールドを登録する

# 目的
* 改行コードを処理して。。。という必要があるかと思っていたら、ほぼ何もしなくても実現できた
* この方法について検索して情報を見つけることができなかったため、残す

# サンプル
* 入力側

```javascript
          <TextField
            id="filled-multiline-flexible"
            fullWidth
            label="本文"
            onChange={(e) => setdiscription(() => e.target.value)}
            multiline
            maxRows={20}
            variant="standard"
            placeholder=""
            value={discription}
            error={discription == ""}
            helperText={discription == "" && "本文が未入力です"}
            sx={{ marginTop: 1 }}
          />

```

以下の部分で複数行を設定可能にする

```
            multiline
            maxRows={20}
            variant="standard"
 ```

このインプットで cloud storeへ登録すると、次のように登録される。一見、改行コードが飛んでしまったように見えるが、改行コードは入っている
![スクリーンショット 2024-02-21 19.03.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57455/6e703454-8921-acbe-2342-a0904f4fea9a.png)


* 出力側

```javascript
<div style={{ whiteSpace: 'pre-line' }}>
    {firebaseから取得した項目}
</div>

```

* 特に改行コードをいじる等の処理はなし


### 参考

https://qiita.com/suin/items/9178f304715b5fbaeca8

https://kazunaka.com/react-linefeed/
【VSCode+WSLからの移行者向け】RubyMineとWSLを接続、Remote Interpreterとして使ってみる

RubyMineの設定のついでに書き残しておきます。筆者の実行環境は以下の通りです。
* [RubyMine IDE:](https://www.jetbrains.com/ruby/) Version 2023.3
* [Ruby](https://www.ruby-lang.org/ja/): 3.2.3 (2024-01-18 revision 52bb2ac0a6) [x86_64-linux]
* [Rbenv](https://github.com/rbenv/rbenv): 1.2.0-87-ge8b7a27
* [WSL](https://learn.microsoft.com/ja-jp/windows/wsl/): 2.0.9.0
* [Ubuntu](https://jp.ubuntu.com/): 22.04.3 LTS

# 1. 動機
筆者は最初VSCodeでRubyを書いていたんですが、最近Rubyの一番標準的な拡張機能が非推奨化して、Shopify社製のRubyLSPを使うようにと公式から勧告がありました。しかし、その安定性の低さに発狂し学生特権を行使して無料でRubyMineに移行しました。（Rubyのエディタ周りって想像以上に貧弱…）

VScodeはMS謹製ということもあってWSLとの併用が手厚くサポートされていますが、RubyMineにはちゃんとした設定が必要です。ということでやっていきます。

# 2. 必要ツールのインストール
## 2.1 初めての人向け
Rubyが完全に初めてという方がいるかもしれないので、一応各々のツールのインストール方法を示しておきます。
最初にwslとubuntuは[WSL を使用して Windows に Linux をインストールする方法](https://learn.microsoft.com/ja-jp/windows/wsl/install)と[WSL 開発環境を設定するためのベスト プラクティス](https://learn.microsoft.com/ja-jp/windows/wsl/setup/environment#set-up-your-linux-username-and-password)を参考にしてください。日本語なので行けるはずです。

※（任意）最近のパソコンにはwindows terminalが標準でついてきているはずですが、インストールされてないという人はmicrosoft storeでインストールしてください。

次にRbenvは、コマンドラインに
```
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/HEAD/bin/rbenv-installer | bash
```
と打つとインストールが始まるのでしばらく待ってから
```
echo 'eval "$(~/.rbenv/bin/rbenv init - bash)"' >> ~/.bashrc
```
でパスを通して終わりです。`source ~/.bashrc`で変更を読み込んだら、`rbnenv install 3.2.3`でRuby3.2.3をインストール、`rbenv global 3.2.3`で既定のバージョンに設定しておきます。
ここまでの操作が正常に完了していたら、`ruby -v`で`ruby 3.2.3 [~~~]`みたいなのが出力されます。

## 2.2 RubyMineのインストール
https://www.jetbrains.com/ja-jp/ruby/download/#section=windows

普通にexeファイルを落としてインストールするか、toolboxというJetBrainsアプリを管理する…名前の通り道具箱経由でインストールします。有料（年契約37,570円）ですが、認定教育機関（高校、専門、大学）の生徒・学生もしくは教員なら全製品ただで使えます。僕は高専生ですがいけました。JetBrainsに一生ついていきます。

# 3. RubyInterpreterの指定
RubyMineを起動すると画像のような画面が表示されるかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2420671/f7b2a0ee-efee-7847-5e07-0e932b941e3d.png)
ウィンドウ左の「カスタマイズ」から「すべての設定」を選択すると設定ウィザードが出現します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2420671/be93f081-5789-ca62-42a3-1ab7f0d56bb0.png)
これまたウィンドウ左の「言語 & フレームワーク」から「Ruby SDK および Gem」を選択、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2420671/8a7d0024-dcce-84be-cc8e-295ce6a93840.png)
画像の通り「追加」を選択し、一番下に表示される「リモートインタプリターまたはバージョンマネージャー」を選択し、出現するウィンドウ上側のラジオボタンからWSLを選択します。
このとき、linux distroはUbuntuに…なっているはず、多分。なってなかったら言ってください。

下の欄、interpreterのpathには`/home/[ユーザー名]/.rbenv/bin/rbenv`を指定してください。
設定ができたら、右下の「適用」を選択してください。以上です。

# 4. 終わりに
enjoy programing!
xml(kml)をJquery $.ajax で取得できなかった際に、fetch + parseFromString で取得できた話

xmlファイル(kmlファイル)をjsで取得する際、Jquery $.ajaxで取得できず、fetch + parseFromStringで取得できたケースがあった。


jqueryを使った場合では取得できず、、（`res`にnullが入る）
```js:jqueryを使った場合
const res = await new Promise((resolve, reject) => {
  $.ajax({
     url: fileURL,
     cache: false,
     dataType: 'xml',
     success: function (data) {
        resolve(data);
     },
     error: function (err) {
       reject(err);
     },
  });
});
```

`parseFromString`で取得できた。
```js:fetch + parseFromStringを使った場合
const res = await new Promise((resolve, reject) => {
      fetch(fileURL).then(res => res.text()).then(async kmltext => {
      
        if (!kmltext) {
          reject("not kmltext");
          return;
        }

        const parser = new DOMParser();
        const kml = parser.parseFromString(kmltext, 'text/xml');
        resolve(kml);
      });
    });
```

### 読み込むファイル`fileURL`のどこが問題だったか

問題箇所は調査中です。。。