OmniAICreator/Qiita-1.07M huggingface dataset:
フルリモートの報・連・相

フルリモート現場で有効な報・連・相の方法について、順を追って解説していきます。

**案件詳細**
- Laravelを使用したサイト作成
- Slackで連絡
- フルモート
- 現場リーダーとして中間管理を担当

**目次**
1. 稼働開始時
1. スケジューリング
1. 作業中報告
1. 定時報告
1. 進捗率定義
1. まとめ

# 1.稼働開始時
稼働開始時に1日の作業時間と内容をざっくりと記述しておきます。
記述内容としては、
- 挨拶
- 稼働時間
- 作業内容（優先度順）
- 期日


以上になります。下記はその例です。

```
おはようございます。
本日の作業内容をこちらのスレッドに記載いたします。

<稼働予定> 
稼働時間：9:00-12:00／13:00−18:00
作業内容：◯◯◯ タスク名(10％→50％)｜期日5/31, 社外定例 13:30-
```

# 2.スケジューリング
次に、上記の作業内容直下に1日のスケジュールを記載します。記載内容は、
- 細分化したタスク
- 各作業時間
- あれば注釈

以上です。下記はその例です。

```
■ 本日の予定
追加改修_保証情報登録
10:15-14:00｜追加実装
14:00-14:30｜テストデータ追加＆テストケース追加
14:30-14:45｜テスト
※14:45以降のタスクは進捗を見て相談予定
```

決めた時間内に作業が終わらなくても大丈夫です。最初は「スケジューリングを練習する」という気持ちで思ったままに計画していきましょう！

# 3.作業中報告
上記スケジューリングで決めたキリのいい時間（上記例なら14:00, 14:30, 14:45）に進捗状況を報告します。こちらは特にフォーマットを合わせる必要はありません。
ただし大事なこととして

**終わらなくても報告する**

ということを心がけましょう。よくやりがちな間違いとして「終わらなさそうだからちゃんとした成果をあげてから報告しよう！」というものがありますが、終わらないなら終わらないで、

**終わらなさそうなので◯◯時まで作業時間延ばします**

という形で報告するようにしましょう！時間内に正直な報告を上げることが大切です！

# 4.定時報告
毎日決まった時間に1日の進捗状況を報告します！これは少し余裕を持った方がいいです。例えば18:00終業であれば、17:00に報告をあげましょう。

記載内容は
- タスク名
- 進捗率（％）
- 期日
- タスク内容

以上です。
下記は報告例です。
```
お疲れ様です。
本日の進捗です！ご確認お願いします！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
本日の進捗報告　
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
タスク名１(70%)｜5/23
・タスク内容
タスク名２(50%)｜5/27
・タスク内容
```

# おまけ. 進捗率定義
進捗率を％で報告しろと言われても、経験の浅い人からしたらいまいちピンと来ません。リーダーの人はあらかじめ進捗率を定義し、作業員はわからなければ定義を確認しましょう。
以下は進捗率定義の一例です。
```
* 設計書の読み込み完了 20％
* 実装作業 21～70％
* テスト 71～85％
* PRレビュー, レビュー対応 86～100％
```

# まとめ
今回はフルリモートの報・連・相のやり方について解説していきました。
手順を順番に説明しましたが、何よりも大事なことは**自分の目上の立場の方（管理者）が不安にならないよう立ち回る**ことです。「何をやっているんだろう？」と思われないように程よいスパンで報告するよう心がけていきましょう！
[ruby]インスタンス変数とクラス間での引き渡し

<br>
今回はrubyのインスタンス変数とクラス間での引き渡しについて。<br>
今もよく躓くところだが、理解できた部分をアウトプットしていく！



## `initialize`メソッドとインスタンス変数に関して
<br>

```diff ruby
class Item
    attr_accessor :name, :price
  
    def initialize(name, price)
      @name = name
      @price = price
    end

    def display
        puts "#{@name}の値段は#{@price}です"
    end

end
  
item01 = Item.new("バナナ", 150)
item01.display
```
上記コード、`item01.display`の実行結果「`バナナの値段は150です`」が出力されるまで。

ここでは`initialize`メソッドとインスタンス変数に関して。

<br>

`item01 = Item.new("バナナ", 150)`
ここでItemクラスをインスタンス化して、その際に引数として「バナナ」と「150」を渡す。

インスタンス化と同時に`initialize`メソッドが実行され。引数(name, price)＝「バナナ」と「150」を受け取る。
そのあとに`@name`,`@price`にそれらの値を代入している動作。

これによりインスタンス変数`@name`,`@price`が出来上がるので、クラス内での呼び出しが可能となる。

`item01.display`メソッドにて、
`puts "#{@name}の値段は#{@price}です"`のように、インスタンス変数を値として呼び出し、
実行結果の`バナナの値段は150です`が出力される。


<br>

Itemクラスで使用している`attr_accessor :name, :price`に関して<br>

この`attr_accessor`、または`attr_reader`、`attr_writer`は、
本当にざっくり言うと、accessorは読み書き可能。readerは読み取りのみ。writerは書き込みのみ。
<br>
クラス間での変数＝値の受け渡しには重要なメソッドになるので、後述していく。


<br>
<br>

## クラス間でのインスタンス変数の呼び出しについて
<br>

```diff ruby
class Customer

    def initialize(item)
        @item = item
    end

    def item_display
        puts "#{@item.name}の値段は#{@item.price}です"
    end

end

customer = Customer.new(item01)
customer.item_display
```

上記のコードを使って、
Itemクラスからのインスタンス変数`@name,@price`を引き継いで出力させるまで。
（最終的な出力はItemクラスで出力した`バナナの値段は150です`と同じ）

<br>

`Customer.new(item01)`により、
Itemクラスのインスタンスである「バナナ＝＠name」と「150＝＠price」がCustomerクラスに引数として渡される。

その後、Customerクラスの`initialize(item)`が実行され、
渡された「バナナ＝＠name」と「150＝＠150」が`@item`の中に格納される。
（binding.irbで`@item`を確認すると、「`#<Item:0x00007fa7d0c42eb0 @name="バナナ", @price=150>`）

<br>
これによって、
インスタンス変数@itemが出来上がるので、クラス内のメソッド「item_display」で中の値を呼び出すことができる。

``puts "#{@item.name}の値段は#{@item.price}です"``=``バナナの値段は150です``

<br>

先ほど`attr_accessor`メソッドについて、読み書き可能。という形で記述した。
今回Itemクラスの変数をCustomerクラスに引き渡したが、
これがItemクラスにaccessorメソッドが無かった場合。

[``undefined method `name' for an instance of Item (NoMethodError)``]<br>

＝Customerクラスをインスタンス化する際に、
Itemクラスのインスタンスであるものを呼び出したいが、
アクセサが無いのでエラーが返ってくる。（`attr_reader`であれば読み取り可能となるので、今回のコードであればreaderだけでもokとなる）


##

以下は雑談。

クラスの中にメソッドを入れてクラスごとに独立化させ、
外から呼び出しするという構図の理解が難しい！！

且つ、クラス間での値の受け渡しなどになると、インスタンス化する際に何を渡せばいいのか、という点で混乱してしまう。

<br>
毎日一歩ずつ、少しでも前進できればと願う毎日！！


<br>
MySQLにて行サイズを無視してテーブル作成


```SQL
set session innodb_strict_mode = OFF;
```

ここでcreate文


```SQL
set session innodb_strict_mode = ON;
```

strict mode確認
```SQL
SHOW VARIABLES LIKE 'innodb_strict_mode';
```

※ 本来やらない作業だが前任者が無理やり無茶なテーブルをつくってしまい
引き継いだ私がカラムのAdd ,カラムのDropもできなくなった。

(Dropしたあとでも行サイズが制限超えるため Dropすらエラーになった。。。)

```
ERROR 1118 (42000): Row size too large. The maximum row size for the used table type, not coun
ting BLOBs, is 8126. This includes storage overhead, check the manual. You have to change some
 columns to TEXT or BLOBs
 ```
Earneasy24job

Users feedback about 𝐄𝐀𝐑𝐍𝐄𝐀𝐒𝐘𝟐𝟒.
.
𝐖𝐞𝐛𝐬𝐢𝐭𝐞 - https://earneasy24.com/
𝐀𝐩𝐩 𝐋𝐢𝐧𝐤 - https://play.google.com/store/apps/details... 
Follow the Earneasy24 channel on WhatsApp:
https://whatsapp.com/channel/0029Va6gT6NC1FuI1G5uiM3c
𝐄𝐚𝐫𝐧𝐞𝐚𝐬𝐲𝟐𝟒 𝐬𝐮𝐩𝐩𝐨𝐫𝐭 𝐝𝐞𝐭𝐚𝐢𝐥𝐬 👇
𝐄𝐦𝐚𝐢𝐥 𝐢𝐝. - help@earneasy24.com 
𝐌𝐨𝐛𝐢𝐥𝐞 𝐧𝐮𝐦𝐛𝐞𝐫. - 7397860379
#OnlineJobs 
#EarnFromCaptcha #CaptchaSolving #OnlineCaptchaWork #CaptchaEarnings
[AWS-IAM] Cognito User Poolについて


キムです。

約1年ぶりに技術ブログ投稿を再開しました！
不自然な日本語が出てくるかもしれませんが、その時はコメントで指摘いただければ大変助かります。

---
#### AWS Cognito
 →
 簡単に言えば、AWSサービスを外部サイト（Facebook、Appleなど）の他社サービスと会員登録またはログインを連携させるサービスです。
※User Login ID(Token)でユーザログインを連携させるのと同じ概念。

Cognitoは「ユーザプール」と「ID プールでの認証」の仕組
---
顧客が Amazon Cognito ユーザープールにサインインすると、アプリケーションは JSON ウェブトークン (JWTsを受け取ります。
ユーザーがユーザープールトークンまたは別のプロバイダーを使用して ID プールにサインインすると、アプリケーションは一時的な AWS 認証情報を受け取ります。
ユーザープールのサインインを使用すると、 AWS SDK を使用して認証と認可を完全に実装できます。 独自のユーザーインターフェイス (UI) コンポーネントを構築しない場合は、構築済みのウェブ UI (ホストされた UI) またはサードパーティー ID プロバイダー (IdP) のサインインページを呼び出すことができます。
このトピックでは、アプリケーションが Amazon Cognito とやり取りして ID トークンで認証し、アクセストークンで認証し、ID プール認証情報 AWS のサービス で にアクセスする方法の概要を説明します。
(Amazon 公式ドキュメントの解説)

---
#### ①ユーザプールとは
AWSにログインまたはユーザー管理できるユーザー情報が含まれているDBだと考えればOK.
例)
Aというユーザーがフェイスブックを通じてAWSにログインしようとしたが、そのログイン認証をしてくれるのか？ 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310719/f691226e-87b1-eaeb-e6cc-25fa5d71e50c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310719/9bf33296-10e3-82c6-edbc-6c43b50e557a.png)

他のサービスからAWS Cognitoを通じてログインすると、最終的にCognito Tokenを受け取ることになる。開発エンジニアは必要に応じて当該TokenをAWS API Gatewayなどに送ってサーバーまたはサービスに対する権限を受けることができる。

---
#### ②IDプールでの認証とは
→
AWSサーバーまたはサービスにアクセスできる仮資格証明を提供するサービス。
例）
AユーザのCognito Tokenが有効なとき、S3 BucketにAccessできる権限を付与するのか
※全体的なAWS Cognito サービスの事例 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310719/fab417bd-1575-eaa9-b28d-4ebcba7a2df4.png)
<br>

1. サービス提供者がAWS S3経由でウェブサービス(認証など)をホスティングしている状態。
2. ユーザーが該当S3に接続し、会員登録を行います。
3. Cognitoから会員登録に必要なメール認証などのコードを送信します。
4. ユーザーが認証コードを入力し、ログインするとCognito Tokenを受け取ります。
5. ユーザーはウェブにログイン後、次ページのリクエスト(S3 Bucket)または他のAPIサービス利用のためAWS API GatewayにCognito Tokenをヘッダーに入れてリクエストします。
6. AWS API Gatewayで該当Tokenの有効性をCognitoに質問します。
7. CognitoはこのTokenの有効性を回答してくれます。
8. Cognitoから受け取った有効性に基づいてAPIサービスの許可・拒否を行います。
 
最も重要なことは、会員登録/ログインする時にCognitoユーザプールからCognito Tokenを受け取り、S3またはAWSサービス利用の時該当Tokenの有効性を確認してサービスを提供することです。

----
#### まとめ

最近、改めてAWS資格勉強をしていますが、
認証のところで概念が曖昧でしたのでブログに内容をまとめて投稿しました。
(自分の勉強兼忘れないように、、)

以上です。
awdw

import pandas as pd

# dfmt_2 と dfmt_3 のデータフレームを読み込む想定です。
# ここで具体的な読み込み方は省略しますが、通常は pd.read_csv や pd.read_excel を使います。

# 各分位ごとの相関係数を格納するための辞書
correlations = {}

# 分位 'qua1' から 'qua5' までのループ
for qua in ['qua1', 'qua2', 'qua3', 'qua4', 'qua5']:
    # 分位でフィルタリング
    dfmt_2_filtered = dfmt_2[dfmt_2['分位'] == qua]
    dfmt_3_filtered = dfmt_3[dfmt_3['分位'] == qua]
    
    # TDATE でマージ
    merged_df = pd.merge(dfmt_2_filtered, dfmt_3_filtered, on='TDATE', suffixes=('_2', '_3'))
    
    # Excess_Return の列で相関係数を計算
    correlation = merged_df['Excess_Return_2'].corr(merged_df['Excess_Return_3'])
    correlations[qua] = correlation

# 結果を表示
for qua, corr in correlations.items():
    print(f'{qua}の相関係数: {corr}')
eclipseでの、サーバーエラーの対処法

こんにちは、へっぽこエンジニア見習いです。
この記事は、eclipseで課題アプリを作成時、サーバエラーが頻発するので、先輩の対処法を、
行う順にメモっておいたものです。
メモなのでめっちゃ短いです。
以下本文

・「クリーン」選択

・画面下部の窓マークを右クリックし「タスクマネージャー」→左欄下部「サービス」から見る。
ポート番号8080が他のプロジェクトのサーバーなどで使用していないか、コマンドプロンプトに「 netstat -nao | findstr 8080」と打ち込み確認

・eclipseを一度終了させ、再度開いた後にサーバーを起動できるか
・サーバーを右クリックして「追加および除去」から、
起動させたいプロジェクトは「構成済み」に入っているか?確認、
入っていない場合は追加

・次に、「web.xml」の値をすべて消してください。
なお、消す前にweb.xmlバックアップの作成を。
その後改めて起動を試みてください。
【Xcode】アセットカタログに独自のカラーセットを定義する方法

# この投稿は何？

Xcodeのセットカタログで、独自のカラーセットを定義する。

![スクリーンショット 2024-06-01 15.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70476/80f84d9d-d478-f074-1560-f868c7fcdcd8.png)

### 実行環境

- Xcode 15.4
- Swift 5.10
- macOS Sonoma 14.5

> Swiftを基礎から学ぶには
自著、工学社より発売中の「[まるごと分かるSwiftプログラミング](https://amzn.asia/d/7YPWJwl)」をお勧めします。変数、関数、フロー制御構文、データ構造はもちろん、構造体からクロージャ、エクステンション、プロトコル、クロージャまでを基礎からわかりやすく解説しています。
> また、Swiftプログラミングを基礎から動画で学びたい方には、Udemyコース「[今日からはじめるプログラミング](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwii1qTuj_2BAxV4hlYBHbj5BqEQFnoECBYQAQ&url=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fstart-programming-today%2F&usg=AOvVaw2vs4Sccq-bpfA4ZD2rCyNm&opi=89978449)」をお勧めします。

## 手順

1. ナビゲーターエリアの *Assets.xcassets* を選択する。
アセットカタログでは、左側にアセットの一覧が表示される。
どれかを選択すると、その詳細が右側のペインに表示される。

2. 新しいカラーセットを作成するために、アセットリストの下部にある[+]ボタンをクリックして、*Color Set* を選択する。
ここでは、カラーセットの名前を「GradientTop」にする。

3. ライトモードとダークモードで同じ色を使用するために、インスペクタエリアで *Appearances* で「None」を選択する。
すると、色見本は *Univarsal* だけになる。

4. 色見本の *Univarsal* を選択する。
インスペクタで、コントロールを使用して色を定義する。
例）Red: `0.852`、Green: `0.646`、Blue: `0.847`

5. もうひとつ、「GradientBottom」という名前のカラーセットを作成する。
例）Red: `0.954`、Green: `0.529`、Blue: `0.385`

6. ビューの背景に独自のカラーセットを適用する。

## 全体のコード

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
            Text("Awesome SwiftUI")
        }
        .font(.largeTitle)
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Gradient(colors: [.gradientTop, .gradientBottom]))
        // Xcodeは自動的に、独自に定義したカラーセットごとにカラー値（ロワーキャメルケース）を提供する。
    }
}
```
@testing-library/reactを使ってモーダル実装コードをテストする

## 概要
@testing-library/reactを使ってモーダル実装したコードのテストコードを書いてみました。

## 仕様
実装内容としては、1つのページにモーダルを開くリンクと、初期状態がdisabledのボタンがあり
モーダルを開くリンクを押し、モーダルを閉じる際にボタンのdisabledを解除しボタンが押せるようにするというのが
実装ないようになります。

## コード
```App.tsx
import React, { useState } from "react";
import { ModalItem } from "./components/ModalItem";

export const App: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [disabled, setDisabled] = useState(true);

  const handleOpenModal = () => {
    setIsOpen(!isOpen);
  };

  const handleCloseModal = () => {
    setDisabled(false);
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <p>ここはテスト用に作ったページです</p>

      <span onClick={handleOpenModal}>ここを押すとモーダルが開きます</span>
      <button disabled={disabled}>ここはボタンです</button>

      <ModalItem isOpen={isOpen} handleClose={handleCloseModal} />
    </div>
  );
};

```

```components/ModalItem.tsx
import React from "react";
import Modal from "@mui/material/Modal";
import "./index.css";
import { Box, Typography } from "@mui/material";

type Props = {
  isOpen: boolean;
  handleClose: () => void;
};

const style = {
  position: "absolute" as "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper",
  border: "2px solid #000",
  boxShadow: 24,
  p: 4,
};

export const ModalItem: React.FC<Props> = ({ isOpen, handleClose }) => {
  return (
    <div>
      <Modal open={isOpen} onClose={handleClose}>
        <Box sx={style}>
          <Typography>ここはモーダルです</Typography>
          <button onClick={handleClose}>閉じる</button>
        </Box>
      </Modal>
    </div>
  );
};

```

上の仕様通りに作りました。
次はテストです。

```App.test.tsx
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import { App } from "./App";

test("モーダルが表示されること", () => {
  render(<App />);

  // モーダルを開くリンクが存在していること
  const targetLink = screen.getByText("ここを押すとモーダルが開きます");
  expect(targetLink).toBeInTheDocument();

  // 初期状態のボタンがdisabledになっていること
  const targetButton = screen.getByText("ここはボタンです");
  expect((targetButton as HTMLButtonElement).disabled).toStrictEqual(true);

  // モーダルを開いて、モーダルが表示されていることを確認
  fireEvent.click(targetLink);
  expect(screen.getByText("ここはモーダルです")).toBeInTheDocument();

  // モーダルの閉じるボタンを押してモーダルが非表示になっていることを確認
  fireEvent.click(screen.getByText("閉じる"));
  expect(screen.queryByText("ここはモーダルです")).not.toBeInTheDocument();
  expect((targetButton as HTMLButtonElement).disabled).toStrictEqual(false);
});

```

## テストコードの解説
難しい部分はほとんどないのですが、
getByTextでアクションに必要な要素を取得しています。
queryByTextを使っている部分は、非表示の要素がないことを確認したい際に使用します。getByText.not.toBeInTheDocument()だと要素の取得ができないためテスト失敗します。

アクションしたい要素を取得したらfireEvent.click()でその要素をクリックすることができるので
そちらを使って簡単にテストができました。
ああああ

import pandas as pd

# dfmt_2 と dfmt_3 のデータフレームを読み込む想定です。
# ここで具体的な読み込み方は省略しますが、通常は pd.read_csv や pd.read_excel を使います。

# データフレームが TDATE と分位 (qua1～qua5) でインデックスされている場合、
# マージする前にリセットして普通のカラムに戻します。
dfmt_2_reset = dfmt_2.reset_index()
dfmt_3_reset = dfmt_3.reset_index()

# TDATE と分位でマージします。
merged_df = pd.merge(dfmt_2_reset, dfmt_3_reset, on=['TDATE', '分位'], suffixes=('_2', '_3'))

# Excess_Return の列で相関係数を計算します。
correlation = merged_df['Excess_Return_2'].corr(merged_df['Excess_Return_3'])

print(f'相関係数: {correlation}')
コード内のエラー箇所特定のための、原因切り分け法のメモ

こんにちは、へっぽこエンジニア見習いです。
この記事は、自分が500エラー（internal　サーバーエラー）に悩まされていた時に、部署内で一番伸びしろのある最若手の子が教えてくれたやり方をメモったものです。
あくまでもメモなのでめっちゃ短いです。
以下本文

１，原因切り分けの方法の一つとして、いったんプロジェクト内の、
たとえばJavaファイルをパッケージごとバックアップとった上、
一旦削除、

２，その後、「一つづつファイルを戻し、サーバ起動」を繰り返し、原因ファイルを特定する。

３，原因ファイルが特定出来たら、次は「ファイル内の怪しい部分（例えば＠（アノテーション部））を一旦コメントアウトし、
サーバ起動できるかか確認」、を繰り返す。

（→コメントアウトすると、正常に動く部分があれば、そこが原因と特定できる！）
新規プロダクト（サービス）のリリースタイミングはいつが最適か？

# 新規プロダクト（サービス）のリリースタイミングはいつが最適か？

新規サービスやアプリの更新をリリースするタイミングは、しばしば課題となることが多く、慎重な計画が必要です。特に、リリースのタイミングが自由に選べる場合は、金曜日、土曜日、日曜日、祝日、および祝前日は避けることを推奨いたします。

プロダクトのリリースにおいては、リリース直後の反応を注視する必要があります。サービスが安定して稼働しているか、エラーの発生によりエンドユーザーが正常に利用できているかなどを確認するためです。

ただし、プロダクトの種類、知名度、企業の特性により、リリース後にユーザーへ浸透するまでの時間には違いが生じるため、一概に最適なタイミングを断言することは難しい点も考慮する必要があります。

**■おすすめ曜日**

月〜木
※金曜日、土曜日・日曜日・祝日・祝前日はさける。

# 次におすすめのリリースする時間

リリース日が確定したら、次に決定すべきはリリースの時間です。リリース時間は勤務時間を考慮して決定する必要があります。勤務時間を9時から18時と仮定すると、17時直前にサービスを開始した場合、リリース後に問題が発生した際に対応が慌ただしくなる可能性があります。この慌ただしさがさらなる二次災害を引き起こす可能性もあるため、リリースは計画的に行うことが必須です。

**■おすすめ時刻**

就業時間終了まで3時間以上の余裕がある

# 仕向地が複数ある場合にどう考えるべきか？

仕向地（しむけち）とは、リリース対象の地域や国を指します。例えば、日本で開発されたアプリケーションをアメリカおよび日本でリリースする場合、仕向地は二か国となります。この際、リリースのタイミングが問題となります。前述の通り、就業時間終了までに最低でも3時間以上の余裕を持つことが望ましいですが、すべての仕向地でこの条件を満たすのは困難です。重大な不具合が発生した場合には、リリースのタイミングを分散させ、順次リリースを行うことも検討すべきです。
SAFe スクラムとスクラムガイドの用語の違い

## はじめに
こんにちは。SPC（SAFe® Practice Consultant）、認定スクラムマスター、PMP の資格を保持している者です。スクラムを実践している開発チームが SAFe® を導入するにあたり、用語の違いに迷わないように対応表を作ってみました。

## 用語の対応表
SAFe®のバージョンは 6.0、スクラムガイドはスクラム公式ガイド（日本語版 2020年11月）を基にしております。

|[SAFe スクラム](https://scaledagileframework.com/safe-scrum/)|[スクラムガイド](https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf)|
|:-|:-|
|チームバックログ|プロダクトバックログ|
|イテレーション|スプリント|
|イテレーションプランニング|スプリントプランニング|
|イテレーションゴール|スプリントゴール|
|イテレーションバックログ|スプリントバックログ|
|チームシンク|デイリースクラム|
|インクリメント|インクリメント|
|イテレーションレビュー|スプリントレビュー|
|イテレーションレトロスペクティブ|スプリントレトロスペクティブ|
|スクラムマスター / チームコーチ|スクラムマスター|
|プロダクトオーナー|プロダクトオーナー|

## 参考
* https://scaledagileframework.com/
* https://scrumguides.org/
* https://www.ricksoft.jp/safe/
【SAP CAP】actionで渡した値から複数エンティティの操作

# はじめに
Cloud Application Programming Model（以下 CAP）
を使用した複数エンティティの更新について調査していたところactionに渡したはずの引数が受け取れなかったので原因を調査しました。


# 実装
以下、環境情報です。
・CAP：Java
・Javaバージョン：17
・cdsバージョン：7.5.1
・ODataバージョン：v2


二つのテーブルを定義し簡易的な更新テストを行いました

```logictest.cds
namespace T;

// 1つ目のテーブルを定義する
entity Primary {
  key ID : Integer;
  name : String;
}

// 2つ目のテーブルを定義する
entity Secondary {
  key ID : Integer;
  name : String;
}
```
actionでイベントを定義します

```logictest-service.cds
using { T as db } from '../db/logictest';

service LogictestService {
    action logicTestAddData(id:Integer,name:String) returns String;
    entity Primary as projection on db.Primary;       
    entity Secondary as projection on db.Secondary;
}
```


上記actionで定義されたLogicTestAddDataContextが生成されていますので値を受け取り登録を行う簡易的なコードを記載

```LogictestService.java

@Component
@ServiceName("LogictestService")
public class LogictestService implements EventHandler {
    @Autowired
    CqnService LogictestService;

    // actionで定義したイベント
    @On(event = LogicTestAddDataContext.CDS_NAME)
    public void logicTestAddData(LogicTestAddDataContext context) {

        // パラメーターの値を取得
        Integer id = context.getId();
        String name = context.getName();

        // Return値
        String returnValue = "";

        // Secondaryにデータを挿入
        Map<String, Object> secondaryData = new HashMap<>();
        secondaryData.put("ID", id);
        secondaryData.put("name", name);
        CqnInsert insertSecondary = Insert.into("LogictestService.Secondary").entry(secondaryData);
        LogictestService.run(insertSecondary);
     
        // Primaryにデータを挿入
        Map<String, Object> primaryData = new HashMap<>();
        primaryData.put("ID", id);
        primaryData.put("name", name);
        CqnInsert insertPrimary = Insert.into("LogictestService.Primary").entry(primaryData);
        LogictestService.run(insertPrimary);
        
        returnValue = "データを登録しました。";

    }
}


```
# actionについて
ここで時間を使ってしまったのですが、、
ODate v2とOdata v4ではPOSTを行った際のactionへの値の引き渡し方法が違うようで
OData v4では、リクエストボディから渡すのですが
OData v2では、アクションパラメータはリクエストボディではなく**リクエストパラメータ**として渡されるようです。

``POST http://localhost:8080/odata/v2/LogictestService /LogicTestAddData?id=1&name='Test'``

上記を行うことで値の登録を確認することができました。


# 参考文献
https://cap.cloud.sap/docs/cds/cdl#actions
半導体とは

<br>

# はじめに

　朝にモーサテを見ていて「半導体」という文字列に出会ったので調べた。webエンジニアを志す上で「半導体」というものに対しての解像度が低いと感じたためリサーチした。

 <br>
 
# 記事の対象者
「半導体」について初学者


# 現代社会での使用例
　まずイメージしやすいように現代社会に使われている例を見ていく
<br>

1. 家電製品や電子機器　ex 冷蔵庫　スマホ　パソコン　wifiルーターなど
2. 自動車
3. 電車や医療機器

<br>
私たちの身の回りの様々なものに使われていて、生活になくてはならない物ですね。


# 厳密な「半導体」の定義
>半導体とは、電気を良く通す金属などの「導体」と電気をほとんど通さないゴムなどの「絶縁体」との、中間の性質を持つシリコンなどの物質や材料のことです。ただし、このような半導体を材料に用いたトランジスタや集積回路（多数のトランジスタなどを作り込み配線接続した回路）も、慣用的に"半導体"と呼ばれています。半導体は情報の記憶、数値計算や論理演算などの知的な情報処理機能を持っており、電子機器や装置の頭脳部分として中心的役割を果たしています

https://www.seaj.or.jp/semi/about_semi.html

整理すると

過去：半導体とは導体と絶縁体の間でできたシリコンなどの物質や材料のこと、　

現在：半導体を材料に含めたトランジスタや集積回路を含めたものの総称

# NVIDIAとは
最近よく目にする機会が増えたので調べました。
<br>
NVIDIA Corporation（エヌビディア[3]コーポレーション）は、アメリカ合衆国カリフォルニア州サンタクララにある半導体メーカーであり、日本法人は東京都港区赤坂にある。ロゴはnVIDIAに見えるが表記は全て大文字のNVIDIAが正しい

https://ja.wikipedia.org/wiki/NVIDIA

https://www.nikkei.com/article/DGXZQOGN23EFC0T20C24A5000000/


# まとめ
- 半導体は生活の至る所に使われていて私たちの生活になくてはならない。
- 過去と現在では「半導体」の捉え方が変化している
- NVIDIAは一人勝ちしてるらしい

# 参考文献
記事構成を参考にさせていただきました

https://qiita.com/KOtamagokake/items/10742f26c5c622860640
Databricks Repos 利用時におけるエラー対応:Cannot perform git operation due to conflicting names

## 概要

Databricks Repos 利用時にて、ブランチの切り替え、あるいは、 Repo の作成時に下記のエラーが発生した場合の対応方法を共有します。原因としては、Databricks ノートブック（`# Databricks notebook source`ではじまる python ファイル）と同名のフォルダを同一ディレクトリに配置できないことです。ファイル名を変更する対応が必要となります。

 > Error checking out branch
Cannot perform git operation due to conflicting names: paths ['test', 'test.py'] would all become 'test'; A folder cannot contain a notebook with the same name as another notebook, file, or folder (excluding file extensions). Please change the name of one of your notebooks, files, or folders.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/1368d62e-902f-2727-2d02-4b8add464d73.png)

Databricks Workspace 上でフォルダと同名のノートブックを作成しようとする下記のようなエラーが発生します。この制約は Databricks の仕様に基づくものであるため、 VS Code などでファイル操作をすることで同名のファイルを作成することができます。その場合に発生するエラーと言えます。

> Renaming the element failed: Node named 'test' already exists

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/e65c090f-7a64-13f3-7762-fba86c281695.png)


## エラーの再現方法

### 1. Git 上に`test/test.py`のファイルを作成。

空のファイルを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/58aec78a-35e3-df24-c889-38ff74d16344.png)

### 2. Git 上に`test.py`という名称のファイルを作成

下記のコードを記述した python ファイルを作成。

```pytohn
# Databricks notebook source
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/7c5c75fe-58d1-a7b5-2952-4038eab86a2c.png)

### 3. Databricks Repos にてレポジトリーを確認するとエラーが発生

Databricks にてブランチの切り替え操作などを実施すると下記のエラーが発生。

> Error checking out branch
Cannot perform git operation due to conflicting names: paths ['test', 'test.py'] would all become 'test'; A folder cannot contain a notebook with the same name as another notebook, file, or folder (excluding file extensions). Please change the name of one of your notebooks, files, or folders.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/1368d62e-902f-2727-2d02-4b8add464d73.png)

## 対応方法

### 1. `test.py`のファイル名を変更

`_test.py`に名称をを変更。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/471ee182-9342-b482-6060-1ba4df0740b3.png)

### 2. Git 操作を行い正常に動作することを確認

ブランチを切り替え等により Git のレポジトリーの最新化を実施できることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/1f764bac-ab80-d4c0-f3a7-caeda627f7f5.png)
Python文法まとめ【四則演算と型】

# はじめに
Pythonの基礎的なことをまとめています。
Google Colabで実行できます。
[Colabの使い方(Python.jp)](https://www.python.jp/train/experience/colab.html "Python.jp 入門講座")

# 四則演算
Pythonで四則演算+aを計算したい場合、以下の記述を利用します。
~~~Python:サンプル
a = 7
b = 3

print(a + b)	# 足し算
print(a - b)	# 引き算
print(a * b)	# 掛け算
print(a / b)	# 割り算
print(a // b)	# 割り算、小数点以下切り捨て
print(a % b)	# 割り算のあまり
print(a ** b)	# べき乗
~~~
~~~:実行結果
10
4
21
2.3333333333333335
2
1
343
~~~
# 型
Pythonで使われる代表的な型を以下に紹介します。
変数に代入する場合型の宣言は必要ありません。
型が違う場合、四則演算は組み合わせによってはエラーとなります。
~~~
int：整数型
~~~
前述の例が整数型の四則演算の結果の例です。
割り算は、小数点が発生します。

~~~
float：浮動小数点型
~~~
`2.1` `10.7`などの小数です。

~~~
str：文字列型
~~~
文字列の型です。
一文字も、二文字以上も使えます。
`""　(ダブルクォーテーション)`もしくは`''　(シングルクォーテーション)`で囲います。
+演算子は結合として利用できます。
~~~Python:サンプル
print('山田' + '一郎')
~~~
~~~:実行結果
山田一郎
~~~
*演算子は繰り返しに利用できます。
~~~Python:サンプル
print('だんご' * 3)
~~~
~~~:実行結果
だんごだんごだんご
~~~
上記以外にも、文字列を操作するための関数が用意されています。
~~~
bool：ブール型
~~~
`False`と`True`のいずれかが使えます。
先頭は`大文字`で記述します。
Falseは0、Trueは1として扱うため、四則演算の計算が可能です。
~~~Python:サンプル
f = False
t = True
print(f + t)
print(f - t)
print(f * t)
print(f / t)
~~~
~~~:実行結果
1
-1
0
0.0
~~~

# type関数
値の型を調べます。
~~~Python:サンプル
a = 12
b = 'lemon'
c = True
print(type(a))
print(type(b))
print(type(c))
~~~
~~~:実行結果
<class 'int'>
<class 'str'>
<class 'bool'>
~~~

# おわり
お役に立てたら幸いです。
PHPのヒアドキュメントで作成したSQLクエリが急に効かなくなった

# 環境
| 名称 | バージョン |
|:-:|:-:|
| PHP | 7.4.26 |

# 問題
フレームワークなしのPHPで作成されたWebシステムを機能改修している中で、ヒアドキュメントを使ってSQLクエリを作っていた箇所があった。
別の担当者がその部分のソースを触って、その人がPJから去った後に自分が動作確認したら、触ったソースが関与している処理が機能していなかった。

# 解決方法
誤入力で入れたのであろうインデント1個に不幸にされてた＼(＾o＾)／

```test.php
<?php
/* ====================
* 変更前のソース
* ====================
*/
$from = <<<SQL
	test_table
SQL;

$order = <<<SQL
	ORDER BY id ASC
SQL;

$limit = <<<SQL
	LIMIT 20
SQL;

var_dump("SELECT * FROM " .$from .$order .$limit);
// SELECT * FROM test_table ORDER BY id ASC LIMIT 20

/* ====================
* 変更後のソース
* ====================
*/
$from = <<<SQL
	test_table
SQL;

$order = <<<SQL
	ORDER BY id ASC
	SQL;

$limit = <<<SQL
	LIMIT 20
SQL;

var_dump("SELECT * FROM " .$from .$order .$limit);
// SELECT * FROM test_tableORDER BY id ASC LIMIT 20

?>
```
>終端IDのインデントした分が文字列本体の全ての行から削除されます。

https://qiita.com/dengzais8/items/cbe40f5228e03cc64faa

# 後書き
噂には聞いていたものの、インデントが動作に直結する場面に遭遇したのは初めてだったので「おぉ～ほんとうにあるんだ～」ってなりました。。
【PHP】ローカル変数とグローバル変数

# ローカル変数とグローバル変数
PHPの変数には**ローカル変数**と**グローバル変数**の2種類がある。
その2つの違いを解説していきたい。

## ローカル変数

**ローカル変数**とは、決められた範囲内（ローカルスコープ）でしか扱えない変数のことを言う。

```php:ローカル変数
<?php

function user() {
    $name = 'Qiita 太郎'; // ローカル変数
}

user();

echo $name; // エラー表示

?>
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2660506/c030a381-a4c7-5340-4001-954128f1fee8.png
">

Undefined variable という警告が表示されてしまった。
なぜかというと、関数user()内で定義されている変数nameと、関数外で定義されている変数nameは**全くの別物として扱われている**ためである。
関数user()内で定義されている変数nameのことを**ローカル変数**と呼ぶ。

## グローバル変数

**グローバル変数**とは、PHPのファイル全体（グローバルスコープ）で扱うことのできる変数のことを言う。
グローバル変数を定義し関数で使う際は、変数の前に**global**という宣言をしなければならない。また、関数の内部でグローバルとして宣言する必要がある。


```php:グローバル変数
<?php

$name = 'Qitta 太郎' // グローバル変数

function user(){
    global $name;
    echo $name;
}

user(); // 'Qitta 太郎'が表示される

?>
```

警告が出ることなく、変数の値を表示することができる。

## まとめ
グローバル変数とは、複数の関数から使用できる変数のことを言います(globalで宣言する)。 これに対して、ひとつの関数内でのみ使用できる変数のことをローカル変数といいます。 グローバル変数はどの関数のブロック内にも含まれない。 ローカル変数はある関数のブロック内で定義されます。




## 参照
+ [PHP:変数のスコープ 公式リファレンス](https://www.php.net/manual/ja/language.variables.scope.php)
+ [【PHP】ローカル変数とは？グローバル変数との違いや注意点は？](https://webukatu.com/wordpress/blog/17477/)

<br>
著者: E.R (株式会社ウィズツーワン)
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと


## 「HTML,CSSだって難しいよ！」
　初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。
『インプレス社　Web制作者のためのCSS設計の教科書　モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法　谷拓樹著　2022年発行第１版』

## 注意
　作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。

## 初め
### 壊れない完璧な設計を求めるのではなく、壊れた時に勇気を持って修復できる設計を
　サイトを作り始めた時って、どうしてもデザインカンプ通りにならなくて四苦八苦しますよね。しかも、これから先JavascriptやPHP、Wordpressも組み入れてより複雑化していく。ここでつまづいて僕ってエンジニアに向いてないのかなっと思っていました。しかし、そんなふうに感じる人ってたくさんいると思うんです。そんな方にこの言葉を送ります。

　この言葉はCSS設計に携わってきた方のものです。どんなベテランのエンジニアも完璧で壊れない設計をするのは難しいです。そんな先人たちは発想を変えてミスをなくすのではなく、ミスを減らし、またミスを見つけやすく修正しやすいような手法やルールを作ってきました。

 今回は初心者でも参考になりそうなものを参考文書から引っ張ってきてるのでご紹介させていただきます。

 ## より良いCSSにするために大切な４つのこと
  今はデザインカンプの通りにデザインするだけで苦労している方も多いのではないかと思います。しかし、これからはさまざまな機能や変更を考慮した上でコードをかく必要があります。しかも、本当の制作現場では複数人で作業したり、中長期的にメンテナンス作業や改修などがあり、また担当が変わったりすることも多々あります。だからこそこれから、下記の４つのことを意識して欲しいです。

 ### 予測しやすい
####  　記述したルールがこちらの想定通りに動いてくれること。また、追加したルールが他のルールに影響を及ばないようにすることです。

  JSやJavaのようにカプセル化できないため、どうしてもそれぞれのルールが影響する場合があります。そんな時に意識した方がいいのが要素の** 詳細度 **です。これはルールの優先度を表すものでインライン記述された要素、ID付与された要素、クラス付与された要素、何も付けられていない要素、ユニバーサル要素の順番で優先度が高くなっていきます。
　

### 再利用しやすい
#### 　同じ機能がいくつもコピー＆ペーストされて記述しているのは見栄え的にも良くないです。再利用できるように機能ごとに分離しておくといいでしょう。

　再利用するにはコンポーネント（機能を他にでも活用しやすくすること）させることが大切ですが、CSSは自由度が高い故に他からの影響を受けやすいため、分離させることが難しい言語であります。
 その対策としてさまざまな手法がありますがそれらの基礎として挙げられるのがオブジェクト思考の概念を取り入れて考えられた** OOCSS **です。
 OOCSSの原則として二つあり
  一つ目が「構造と見た目が分離してあること」で、見た目の似てる色が違うボタンがあるとして、見た目は一緒じゃなくても機能として共通部分があるなら一緒にして色など違う部分だけを後から追加しようぜという感じです。
　二つ目が「コンテナとコンテンツを分離」です。例えば
下記のコードを見てください。h１タグに対してどちらのCSSの書き方が望ましいでしょうか。
　答えは後者です。それは、もしHTML側に変更があった場合（h1→h2に変更）、CSS側も書き換えが必要になってきます。これはHTMLに依存していると言って好ましくないです。しかし、後者ならば変更はHTML側のみですみますし、もし同じ機能を別のところに追加したいとなればこのクラス名をそのまま使えます。
 ```
 HTML
 <h1 class="title">おまえを信じる俺を信じろ</h1>

 CSS
 //前者
 .h1 {
 color: red;
 }

 //後者
 .title {
 color: red;
 }
 ```
 
 ### 保守しやすい
#### 　既存のルールを損なわない、破壊しないように新しいルールを追加することをリファクタリングと言います。しかし、既存のコードがわかりにくいものだと機能を追加する側も大変です。なので要素のクラス名をわかりやすくすることが大切です。そのための命名規則がありますがその中でも有名なものの一つとして、** BEM **があります。

　BEMは、カテゴリー化してみたい　-　や　_　で使い分けており、さまざまな規則があるのでこちらの記事を参考にしてみてください。

 https://qiita.com/takahirocook/items/01fd723b934e3b38cbbc

 ### 拡張しやすい
 #### 機能を追加したり、既存のルールをさらに強くしていくこともよくあります。今までのBEMやコンポーネントなども大切ですが、その際にコードを整理しておくことも大切だと思います。

　その時に役立つのが** SMAOSS **です。これは機能の特徴などに合わせてカテゴリー化しルールづけすることでわかりやすくしています。
ハッシュテーブル＋補集合フラグ＝無限集合？

昔、ハッシュテーブルを自前で実装してみた時にふと思った。「これに補集合フラグを付与すれば無限集合が実装できないだろうか？」と。補集合というからには全体集合があるが、それはこの場合「すべての文字列」である。この集合はAnd、Or、Not、Xor、Diff等の演算をこなせる。仮にも無限集合を、プログラミング言語風情が扱ってみせるのだ。
しかしこれには落とし穴があった。例えば「5の倍数」といった無限集合だ。5の倍数は無限にある。そしてその補集合も無限だ。こういった「補集合も、もとの集合もどちらも無限集合」という場合に対してこのライブラリは無力である。
残念。
選択したディレクトリの配下にあるディレクトリのExcelファイルパスを全て取得


```vb

Sub GetAllExcelFiles()
    Dim folderPath As String
    Dim filePaths As Collection
    Set filePaths = New Collection

    ' フォルダダイアログを表示してフォルダを選択
    With Application.FileDialog(msoFileDialogFolderPicker)
        .Title = "フォルダを選択してください"
        If .Show = -1 Then
            folderPath = .SelectedItems(1)
        Else
            Exit Sub
        End If
    End With

    ' 指定したフォルダ以下のすべてのExcelファイルを取得
    GetExcelFilesInDirectory folderPath, filePaths

    ' 取得したファイルパスを出力
    Dim filePath As Variant
    For Each filePath In filePaths
        Debug.Print filePath
    Next filePath
End Sub

Sub GetExcelFilesInDirectory(ByVal folderPath As String, ByRef filePaths As Collection)
    Dim fso As Object
    Dim folder As Object
    Dim subFolder As Object
    Dim file As Object

    Set fso = CreateObject("Scripting.FileSystemObject")
    Set folder = fso.GetFolder(folderPath)

    ' 現在のフォルダ内のファイルを処理
    For Each file In folder.Files
        If InStr(1, file.Name, ".xls", vbTextCompare) > 0 Then
            filePaths.Add file.Path
        End If
    Next file

    ' サブフォルダ内のファイルを再帰的に処理
    For Each subFolder In folder.SubFolders
        GetExcelFilesInDirectory subFolder.Path, filePaths
    Next subFolder
End Sub
```
Apache2 Default Pageが表示された時の対処法

ローカル環境でLaravelを開こうとしてhttp://localhost/にアクセスした時に
Apache2 Default Pageが表示された時の対処法

環境は
・windows11
・WSL2
・Docker Laravel Sail

## 現象について
./vendor/bin/sail upしてからhttp://localhost/にアクセスすると
Laravelの画面が出ずに、Apache2 Default Pageが表示される。
127.0.0.1にアクセスするとLaravelの画面が表示される。

## 解決方法
原因はApache2が起動していること。
停止することで、問題が解決される。
コマンドは下記の通り↓
```
sudo systemctl stop apache2
```
ただ、これは一時的なので、PC再起動でapache2も起動してしまう。
システムの起動時にApache2が自動的に起動しないように設定する為の
コマンドは下記の通り↓
```
sudo systemctl disable apache2
```
上記のコマンドを実行しても上手くいかない場合は下記の方法を
試してみて。
https://qiita.com/abutatsu/items/4cf78e76890f877d7aa0

## なぜ発生したのか考察
色々設定の変更をしていて、chatGPTに言われるがまま色々コマンドを
打っていたので、どこかのタイミングでApacheが更新されて自動起動
の状態になっていたと考えられる。
環境構築ってほんっとに難しいなぁ。
AzureとAWSのオブジェクトストレージ比較

AWSの資格勉強で気になったので整理してみました。

## アベイラビリティゾーン(AZ)の使用数

### Azure Blob Storage

複数AZを使用することが可能（ZRS, GZRS等の使用時）です。

ちなみにAzureでゾーン冗長のストレージがGAしたのは2020年6月で、それまではリージョン冗長しか選べませんでした。

https://azure.microsoft.com/ja-jp/updates/storage-gzrs-ga/

AWSは2006年のサービス開始当初から複数のAZに保存する構成をとっています。

### AWS S3

基本的に複数AZ利用です。

`S3 1 ゾーン–IA` の選択時は単一のAZに保管します。

## 料金削減のためのオプション

### Azure Blob Storage

`ホットアクセス層`、`クールアクセス層`、`コールドアクセス層`、`アーカイブアクセス層` があり、層を移していくことでストレージコストを安く保つ代わりにアクセスコストが増加します。

### AWS S3

`S3標準-IA`、`S3 Glacier`、`S3 Glacier Deep Archive` を使用することでストレージコストを安く保つ代わりにアクセスコストが増加します。

前述の `S3 1 ゾーン–IA` の選択時は `S3標準-IA` と同等の性能で単一のAZに保管することで可用性を犠牲にして料金削減可能です。

## 自動的な料金削減方法の例

### Azure Blob Storage

[ライフサイクル管理ポリシー](https://learn.microsoft.com/ja-jp/azure/storage/blobs/lifecycle-management-policy-configure?tabs=azure-portal)を設定することで、最終更新日等をキーにアクセス層を変更できます。

### AWS S3

`S3 Intelligent-Tiering` を使用することで自動的にデータを最も費用対効果の高いストレージクラスに移動できます。
Next.jsでnext/font/を使ってみた

next/fontの使い方の備忘。
headタグ内でlinkをインポートするとかCSSでインポートしてフォントを使うよりnext/fontを使う方がフォントの読み込みが早くなってパフォーマンスが上がるらしい。

# ディレクトリ構成
```
src/
 |- app/
 |   |- layout.js
 |   |- page.js
 |   |-components
 |        |-Header.js
 |- style
 |   |- global
 |   |    |- _index.scss
 |   |    |- _mixin.scss
 |   |    |- _variables.scss
 |   |- layout
 |   |    |- _index.scss
 |   |    |- _header.scss
 |   |  ~ 省略 ~
 |   |- style.scss
 |- font
 |   |- Delogy-Regular.ttf　 //ローカルフォント
 |   |- font.js
```

# 書き方
font.js の設定
```font.js
import { Noto_Sans_JP, Barlow_Condensed } from "next/font/google";
import localFont from "next/font/local";

const fontNotoSansJp = Noto_Sans_JP({
  weight: ["400", "500"],
  subsets: ["latin"],
  variable: "--font-Noto-Sans-JP",
  display: "swap",
});

const fontBarlowCondensed = Barlow_Condensed({
  weight: ["400", "500", "600", "700"],
  subsets: ["latin"],
  variable: "--font-Barlow-Condensed",
  display: "swap",
});

const fontDelogy = localFont({
  src: "./Delogy-Regular.ttf",
  variable: "--font-Delogy",
  display: "swap",
});

export { fontNotoSansJp, fontBarlowCondensed, fontDelogy };
```

CSSの設定
```_variables.scss
// Googleフォント
$Noto-Sans-JP: var(--font-Noto-Sans-JP), sans-serif;
$Barlow-Condensed: var(--font-Barlow-Condensed), sans-serif;
// ローカルフォント
$Delogy: var(--font-Delogy), sans-serif;
```
```_base.scss
body {
  font-family: $Noto-Sans-JP;
}
```
```_header.scss
.l-header {
    &_logo {
        font-family: $Delogy;
    }
    &_menu {
        font-family: $Barlow-Condensed;
    }
}
```

使用するページでの設定
```layout.js
import { fontNotoSansJp } from "@/font/font";
import "../style/style.scss";
import { Header } from "./components/Header";

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body className={`${fontNotoSansJp.variable}`}>
        <Header />
        <div className="l-container">
          <main>{children}</main>
        </div>
      </body>
    </html>
  );
}
```
```Header.js
import { fontBarlowCondensed, fontDelogy } from "@/font/font";
import React from "react";

export const Header = () => {
  return (
    <header className="l-header">
        <h1 className={`l-header_logo　${fontDelogy.variable}`}>Logo</h1>
        <button className={`l-header_btn ${fontBarlowCondensed.variable}`}>ボタン</button>
    </header>
  );
};
```

# next/fontの使い方とは関係ないけど、display: "swap"ってなんの設定？
簡単にまとめるとフォントの読み込みが完了するまで文字が何も見えなくなってしまうのを防ぐ設定。

フォントを読み込むとき読み込まれるフォントが表示されるまでに３段階ある。
CSSでfont-display: swap;を指定することで②の代替フォントで描画の段階からにセットできるため文字が描画されない時間をなくせるということだ。

①ブロック期： フォントがローカルシステムにない場合、不可視代替フォントで描画する段階（文字が出てないため読めない）
↓
②スワップ期： ローカルにある代替フォントで描画する段階
↓
③読み込み完了: 代替フォントからWebフォントに切り替えて描画する

CSSのfont-display: swap;の設定をnext/fontで指定する書き方がdisplay: 'swap'になる。

# 参考サイト
next/font/について

https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

https://ja.next-community-docs.dev/docs/app-router/api-reference/components/font

https://zenn.dev/tsuyoshi/articles/894592ac677148

display: "swap",について

https://nextjs.org/docs/messages/google-font-display

https://t32k.me/mol/log/font-display-swap/

https://www.satoooh.org/posts/next-font-display/
関数を引数として渡す方法（Go言語）

Go言語では、関数を他の関数の引数として渡すことができます。これは高階関数（higher-order functions）と呼ばれ、関数型プログラミングの強力な機能の一つです。

### 基本的な使い方についての例

まず、関数を引数として渡す基本的な方法を見てみましょう。以下は、簡単な例です。

```go
package main

import (
    "fmt"
)

// 関数型の定義
type operation func(int, int) int

// 関数を引数に取る関数
func compute(a int, b int, op operation) int {
    return op(a, b)
}

// 足し算の関数
func add(x int, y int) int {
    return x + y
}

// 引き算の関数
func subtract(x int, y int) int {
    return x - y
}

func main() {
    a, b := 5, 3

    // 足し算を実行
    sum := compute(a, b, add)
    fmt.Printf("足し算: %d + %d = %d\n", a, b, sum)

    // 引き算を実行
    diff := compute(a, b, subtract)
    fmt.Printf("引き算: %d - %d = %d\n", a, b, diff)
}
```

上記のコード：
https://go.dev/play/p/ztv71ZaA3RP

上記のれとして説明します。

### 関数型の定義

上記のコードでは、operationという関数型を定義しています。この型は、2つの整数を引数に取り、整数を返す関数を表します。

```go
type operation func(int, int) int
```

### 関数を引数に取る関数
次に、computeという関数を定義しています。この関数は、2つの整数とoperation型の関数を引数に取り、その関数を実行して結果を返します。

```golang
func compute(a int, b int, op operation) int {
    return op(a, b)
}
```

### 操作を行う関数

addとsubtractは、それぞれ足し算と引き算を行う関数です。

```golang 
func add(x int, y int) int {
    return x + y
}

func subtract(x int, y int) int {
    return x - y
}
```

### まとめ

Go言語では、関数を引数として渡すことで、コードの柔軟性と再利用性を高めることができます。高階関数を使用することで、汎用的な操作を簡潔に記述することが可能です。ぜひ、実際のプロジェクトで試してみてください。
VS2017のツールウィンドウ拡張を作る（vsix）

自分用の拡張機能を諸事情あってVS2017で作りたかった。
少し手間取ったところの自分用まとめ過不足がありそうな気しかしない。
なにかあったら適宜更新

https://learn.microsoft.com/ja-jp/previous-versions/visualstudio/visual-studio-2017/extensibility/?view=vs-2017

## SDKをインストール
https://learn.microsoft.com/ja-jp/previous-versions/visualstudio/visual-studio-2017/extensibility/installing-the-visual-studio-sdk?view=vs-2017#install-the-visual-studio-sdk-after-installing-visual-studio
書いてあるとおり

## プロジェクトを作成
https://learn.microsoft.com/ja-jp/previous-versions/visualstudio/visual-studio-2017/extensibility/creating-an-extension-with-a-tool-window?view=vs-2017

1. プロジェクトテンプレートの検索で「vsix」で検索
1. vsixのC#を選択
1. 適当に名前を付けて作成
1. プロジェクトを右クリック→追加→新しい項目
1. VisualC#アイテム→Extensibility→Custom Tool Window
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467145/2b088386-6b65-36ec-9d2d-32454ef7db5d.png)
1. とりあえず一旦ビルド
1. 変なエラーが出る。
```
エラー		"VSCTCompiler" タスクが予期せずに失敗しました。
System.OutOfMemoryException: メモリが不足しています。
   場所 System.Drawing.Image.FromFile(String filename, Boolean useEmbeddedColorManagement)
   場所 Microsoft.VisualStudio.CommandTable.BitmapItem.Read(TextReadVSCTCStream s, XmlElement itemNode)
   場所 Microsoft.VisualStudio.CommandTable.ItemList.Read(TextReadVSCTCStream s, XmlElement listNode)
   場所 Microsoft.VisualStudio.CommandTable.CommandTable.ReadCMDSSection(TextReadVSCTCStream s, XmlElement listNode)
   場所 Microsoft.VisualStudio.CommandTable.CommandTable.Read(TextReadVSCTCStream s)
   場所 Microsoft.VisualStudio.CommandTable.CommandTable.Read(String fileName, ReadOptions ro, IMessageProcessor errorProcessor)
   場所 Microsoft.VisualStudio.CommandTable.CommandTable.Read(String fileName, IMessageProcessor errorProcessor)
   場所 Microsoft.VisualStudio.CommandTable.Compiler.Compile()
   場所 Microsoft.VisualStudio.CommandTable.VSCTCompiler.Execute()	VSIXProject1			
```
`＜プロジェクト＞\Resources\ToolWindow1Command.png`
を適当なpngファイルに置き換えればOK
https://tech.surviveplus.net/archives/1190

## ツールバーに表示
書いてあるとおりにやれば大丈夫だった。
とりあえずツールバーに追加するだけなら↓までやればOK
https://learn.microsoft.com/ja-jp/previous-versions/visualstudio/visual-studio-2017/extensibility/adding-a-tool-window?view=vs-2017#add-a-toolbar-to-the-tool-window


## 作った拡張機能のインストール
`\bin\Release`にあるvsixファイルをダブルクリック

## 拡張機能の更新
1. `source.extension.vsixmanifest`をダブルクリックして開く
1. Versionを更新
1. VS2017を閉じる
1. `\bin\Release`にあるvsixファイルをダブルクリック

## メモ
* XAMALでStackPanelに`VerticalAlignment="Stretch"`を追加しているのにサイズが固定のまま！なぜ！
　→デフォルトで置いてある`UserControl`の方に`VerticalAlignment="Stretch"`を付けないといけなかった
 これ必要なんだろうか…？後で確認する
* Styleにデフォルト値的なものを設定したい
　→XAMAL内<UserControl.Resources>内でStyleタグのx:Key=を外してTargetTypeだけ残せばOK
GitHub Actionsでコードレビュー依頼を自動化する [Auto Request Review]

## 実現したかったこと
プルリクエストを作成しレビュー依頼をする際、いつも特定の人にレビュー依頼をしている状況。
そのためプロジェクト内のdevelopブランチで、mainブランチ向けにプルリクエストが開かれた時には、いつもその特定の人を自動でレビュワーとして選択してくれるよう自動化したかった。

## やったこと
使用したactionとしては``necojackarc/auto-request-review``というものを使用した。
https://github.com/marketplace/actions/auto-request-review

### コード

``` .github/workflows/auto_request_review.yml
name: Auto Request Review

on:
  pull_request:
    branches:
      - main
    types: [opened, reopened]

permissions:
  id-token: write
  contents: read
  pull-requests: write

jobs:
  auto-request-review:
    name: Auto Request Review
    runs-on: ubuntu-latest
    steps:
      - name: Request review based on files changes and/or groups the author belongs to
        uses: necojackarc/auto-request-review@v0.13.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          config: .github/reviewers.yml # Config file location override
          # Look for config locally during run instead of in repo.
          # For instance, if you'd like to use a config file stored in external storage,
          # you can fetch it before you run this action, then let this action pick it up with `use_local: true`.
          # This defaults to false if not specified.
          # See https://github.com/necojackarc/auto-request-review/issues/76 for more details.
          use_local: false
```

jobsのあたりに関しては、[このactionのドキュメント](https://github.com/marketplace/actions/auto-request-review)に書いてある通りに記載した。

このactionのトリガー(動くタイミングのようなもの)は、以下のようにした。

``` yml
on:
  pull_request: ## プルリクエスト
    branches:  ## ここにはtarget_branchを記載する
      - main
    types: [opened, reopened] # openしたとき、もしくは、リオープンしたとき
```

:::note warn
注意
ここが意外とハマった点だった。プルリクエストを作成したブランチ名を記載するのではなく、プルリクエストをマージしたいブランチ名を記載する。(branchesはtarget_branchを書きましょう)
:::

あと、``config: .github/reviewers.yml``でレビュワーの設定ファイルを用意している。それが以下。

```.github/reviewers.yml
reviewers:
  # Reviewers per author.
  # Keys are reviewees, each of which has an array of reviewers.
  defaults:
    - gorira-san
files:
  # Keys are glob expressions.
  # You can assign groups defined above as well as GitHub usernames.
  '**':
    - gorira-san

options:
  ignore_draft: true
  ignored_keywords:
    - DO NOT REVIEW
```

これでいける。この``.github/reviewers.yml``に関しては結構細かくパターンやレビュワーのグループを指定したりすることができる。機会があったら色々やってみようと思う。

がんばろうぜ。
Nuitkaで発生したUnicodeDecoderErrorについて

## エラー内容
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629447/131d8fa4-5681-8d53-b685-e4cc15f74849.png)
- エラー文  
UnicodeDecodeError: 'cp932' codec can't decode byte 0x85 in position 5052759: illegal multibyte sequence  
Nuitka-Reports: Compilation crash report written to file 'nuitka-crash-report.xml'. Please include it in your bug report.
- 日本語訳  
ユニコードでコードエラー: 'cp932' コーデックが位置 5052759 のバイト 0x85 をデコードできません: 不正なマルチバイト列  
Nuitka-Reports： コンパイルのクラッシュレポートが 'nuitka-crash-report.xml' ファイルに書き込まれました。バグレポートに含めてください。

## 解決方法
コマンドプロンプトに
`chcp 932`と入力する。

## 経緯
PDFやExcelファイルを扱うデスクトップアプリをFletで作成しNuitkaでコンパイルしようとしたところ、上記のエラーが発生した。Pythonファイルとして実行した際はエラーも出ず文字化けもしていなかった。

## 原因
Excelの文字コードとしてデフォルトだとUTF-8が選択されてしまうため？Windows環境ではShift-JISが主流とのこと。  
なぜコンパイル時になって問題が発生したのかは不明。

## 余談
pandasのto_excelメソッドを使用していたが、その際に引数encoding="shift-jis"を設定していなかった。こちらの方法でもよかった……のかなあ。
  
読んでいただきありがとうございます！この記事を読んだ方のエラー解決がうまく行くことを願っています。

## 参考
[【Python】UnicodeDecodeError: 'cp932' codec can't decode byte 0x81...エラーの原因と解決方法](https://qiita.com/Ryo-0131/items/27829642d2f767507db0)
react ぬるっと動くアンカーリンクの実装（ページ内での遷移）

# はじめに
どうも！フリーエンジニアKeiです🐈

ヘッダーやボタンから別のページでなく、
「同じページの中で、ぬるっと目的の箇所を表示させたい！！」と思い、
探した結果、実装することできたのでまとめました。
（同じページ内でスムーズに目的のセクションに移動する
スムーススクロールの実装方法がわかる記事です）

# 問題
次の環境でページ内遷移を実装したいけど分からない方向け

環境は
React:18.2.0
tailwindcss:3.4.3


# 解決方法
① ```react-anchor-link-smooth-scroll``` のインストール
②App.jsx への追記

## ① ```react-anchor-link-smooth-scroll``` のインストール
実装したいディレクトリに対してターミナルにて下記を入力
```
npm install react-anchor-link-smooth-scroll 
```

起動
```
npm run dev
```

### ②App.jsx への追記
・App.jsxの頭に先ほどインストールしたAnchorLinkをimportする
・クリックしたいところにAnchorLink（funtion App/ divのような感じ）の記述する
・紐づけ（遷移）させたいところにidタグを追加する
・``Home``の部分を好きなように変更


```ruby:App.jsx
import AnchorLink from "react-anchor-link-smooth-scroll";

function App(){
 return(
   <div>
     <AnchorLink href="#Home" onClick={"Home"}>Home</AnchorLink>
   </div>

   <section id="Home">
   </seciton>
 );
}
```

# おわりに
セクションが1つだと分かりにくいので、
複数にコピーして動作確認を確認してみてください。

# 参考
https://zenn.dev/uraranbon/articles/3261283290ad1c
ボタンをゲーミング化

# ゲーミングなボタン
## 前置き
虹色に光るボタン。虹色といえば多様性の象徴…ではなくゲーミング！

## デモ
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="bGyeJjN" data-pen-title="Gaming Button" data-user="kelp-of-truth" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kelp-of-truth/pen/bGyeJjN">
  Gaming Button</a> by kelp of truth (<a href="https://codepen.io/kelp-of-truth">@kelp-of-truth</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## コード
~~CSSだけコピペしてbutton要素のclassにgamingを指定しておけば多分動くよ~~
```html
<body>
	<button class="gaming">
		Button
	</button>
</body>
```

classはわかりやすいように`gaming`にしておきます。

```css
body{
	background-color: #000;
	text-align: center;
}
.gaming{
	border: unset;
	outline: unset;
	border-radius: 99999px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 20px;
	position: relative;
	background-color: #000;
	color: #fff;
	font-weight: bold;
	transition: 250ms;
}
.gaming::after{
	content: "";
	position: absolute;
	left: -5px;
	top: -5px;
	z-index: -1;
	width: 100%;
	height: 100%;
	padding: 5px;
	background-color: transparent;
	border-radius: 99999px;
	animation: gaming 2000ms linear infinite;
  background: linear-gradient(to right, Magenta, Yellow, Cyan, Magenta) 0% center/200%;
}
@keyframes gaming{
  100%{
    background-position-x: 200%;
  }
}
```
`border-radius: 99999px;`ってどう思います？
    (追記: `border-radius: calc(infinity * 1px);`という方法もあるとコメントをもらいました。clientWidthで調べてみたところ33554428pxになってるらしいです)

## 仕組み
ボーダーにグラデーションは指定できないので、疑似要素の`::after`を使用してパチモンのボーダーを作ります。元の要素の`position`を`relative`にして疑似要素の`position`を`absolute`にします。そして`padding`で元の要素よりサイズを一回り大きくします。位置を合わせるために`left`と`top`をマイナス方向に動かしておきます。
疑似要素の背景色を Cyan, Yellow, Magent, Cyan の順にグラデーション。
最後に背景を動かすアニメーションを設定します。

_**〜 完成 〜**_

---

## 終わりに
アニメーションを早くすると目がチカチカします
では、良きゲーミングライフを . . .
WSL2 で dns の名前解決ができなくなって ネット接続できなくなった場合の対処方法 (ESET Internet Security使っている場合)

毎度、ググっても出てこない小ネタを取り扱っております。
本記事は個人的な見解であり、筆者の所属するいかなる団体にも関係ございません。

# 0. はじめに

WSL2を使っていて、DNSの正引きができなくなる状況になりました。
一時は、`/etc/wsl.conf`に
```
[network]
generateResolvConf = false
```
を書いて、`/etc/resolv.conf`にnameserverを書いて回避していたのですが、
これの問題点は、DNSの解決がnameserverで記載されているところにしか行かず、Windows側のhostsファイルのを使わないのでローカルで動かしているマシンのIPアドレスを/etc/hostsに書いても利用できない事です。

そこで、
/etc/wsl.confは`generateResolvConf = true`に戻し、`/etc/resolv.conf`は自動的にWSL2で生成させるように戻しました。

# 1. 対応方法

## 1-1. dnsTunnelingを有効にする

`C:\Users\<<ユーザ名>>\.wslconfig`

ファイルを作成して
```
[external]
dnsTunneling=true
```
の定義を入れる

## 2. ESETのInternet Securityのブロックを解除

### 2-1. ESET Internet Scurity画面を開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15176/f3e8cb52-9db3-cfe0-2527-83da34a0929e.png)

「ネットワーク保護」を選択

## 2-2. ネットワーク保護画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15176/f2b6b2d5-0163-b8df-dbb7-d223f99f4860.png)

「ブロックされた通信の解決」を選択

## 2-3. ブロックされた通信の解決画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15176/cbe9ad66-4183-7540-65c3-e6756e2e8194.png)

Internet Connection Sharingの「ブロック解除」をクリックする
上記画面はブロック解除された状態

## 2-4. テスト後にリフレッシュして問題が解決されているか確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15176/fa8a1450-3e42-cb9b-cc2e-837a578d4a0a.png)


# 3. 参考資料

ESET Internet Securityインストール環境のWSL2で名前解決ができない問題を解決する - succi0303 blog
https://blog.succi0303.com/entry/2023/11/19/221536

WSL2 で dns の名前解決ができなくなって ネット接続できなくなった場合の対処方法 #Network - Qiita
https://qiita.com/kkato233/items/1fc71bde5a6d94f1b982

# 4. 問題点

再起動すると再度「ブロック解除」しないといけなかったはず。
Jupyter Lab の Workspace 機能について

Jupyter Lab は複数人で使用するように作られていない。複数人で使用すると、ディレクトリ移動したり Notebook を開いたり閉じたりしたときに他の人の画面に影響を与えてしまうことがある。

とはいえ2,3人で使用したいだけだから Jupyter Hub をセットアップするのは面倒くさい。

というときに、Jupyter Lab の Workspaces という機能が使えることがあるのだけど、あまり言及されている記事を見たことがないのでここにメモしておく。

[JupyterLab documentation - Managing Workspaces (URL)](https://jupyterlab.readthedocs.io/en/latest/user/urls.html#managing-workspaces-url)

Jupyter Lab の URL `/lab` の後ろに `/workspace/{name}` をつけてアクセスするとワークスペースを作ることができる。

``` :使用例
http://example.com:8888/lab/workspaces/hoto
```

異なる名前のワークスペースで作業しているのであれば、ディレクトリ移動したり Notebook を開いたり閉じたりしても他のワークスペースに影響を与えることがない。同じ Notebook を同時に編集・実行するのは流石に無理そうだが。
Mbed StudioがUbuntuで動かない!!!

# Mbed StudioがUbuntuで動かない!!!
Mbed StudioをUbuntu22.04で動かすとき沼ったので書いておきます。
## Mbed studioのダウンロード＆インストール
1. [公式ページ](https://os.mbed.com/studio/)からLinux版をDLします
2. ダウンロードしたshの権限を変更して実行可能にします
    - `sudo chmod +x MbedStudio-....sh`しましょう
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1832609/73af431c-0ee3-16ed-12db-40b0169dc76a.png)
3.  動かしてみましょう！
    - `./MbedStudio-....sh`
    - 何か出てくるのでエンターをおし、ライセンスが出てきたらqキーを押しましょう
    - `Do you accept the license terms? [yes|no] >>>>yes` !!!
    - ダウンロードが始まるのでしばらく待ちます
    - 結構待ちます
    - 思ったよりも長く待ちます
    - `Do you want to get udev rules updated? >>>>yes` !!
    - パスワードを入れます
    - おわりです

## 起動！！！
- 起動する前に再起動します
    - `sudo reboot`
- `mbed-studio`できどうできる　はずですが。。。
  ```
  AppImages require FUSE to run.
  See https://github.com/AppImage/AppImageKit/wiki/FUSE
  ```
  とりあえずリンクを見に行きます。
- fuseをいれます。
```
sudo add-apt-repository universe
sudo apt install libfuse2
```
- 再チャレンジ！
```
  $ mbed-studio
Failed to start the backend application.
```
- わ、わぁ。。。
- 色々調べた結果
~~`mbed-studio --appimage-extract`で中身を展開？しましょう！~~
もしかしたら展開しなくてもいいかもです。
- さらに以下のコマンドでlibsecretをいれましょう
  ```
  sudo apt update
  sudo apt install libsecret-1-0
  ```
  - `mbed-studio`で起動できるはずです！！

# ~~依存関係くらい自分で解決しろ！！！！~~

追記

Ubuntu24.04用の令和最新版記事も投稿しました
https://qiita.com/kzs321kzs/items/4c054abd2b4d53694e86