OmniAICreator/Qiita-1.07M huggingface dataset:
もしかしたら世界で2番目に優れた「高度なピクチャ・イン・ピクチャプレイヤー」

# もしかしたら世界で2番目に優れた「高度なピクチャ・イン・ピクチャプレイヤー」

**高度なピクチャ・イン・ピクチャプレイヤー** は、ブラウザ拡張機能 **垂直タブバー（VertiTab）** のプレミアム機能です。  
ウェブ上の動画を独立したウィンドウで再生できるだけでなく、操作性を大幅に向上させることで、マルチタスクや快適な視聴体験を提供します。  

[Chrome ウェブストア](https://chrome.google.com/webstore/detail/chejfhdknideagdnddjpgamkchefjhoi) から最新バージョンをダウンロードまたは更新し、この素晴らしいプレミアム機能を体験しましょう！

---

### **動作デモ**

以下は、高度なピクチャ・イン・ピクチャプレイヤーの動作例です。直感的かつパワフルな機能をご覧ください👇：  
![高度なピクチャ・イン・ピクチャプレイヤー](https://static.rabbitpair.com/public/assets/guide/adv_pip.webp)

---

### **機能の魅力：動画視聴体験をさらに向上**

#### 🚀 **独立ウィンドウで快適に視聴**
- ウェブ動画をページから独立させ、別ウィンドウで再生可能。  
- ウィンドウを自由に移動・サイズ変更でき、作業環境に完璧にフィットします。  
- タブ切り替えから解放され、どんなシーンでも動画視聴を楽しめます。

#### 🎥 **プレビューサムネイルでスムーズな操作**
- **YouTube、Bilibili、Vimeo** の公式プレビューサムネイルをサポート。  
- その他のサイトでは動画のスクリーンショットを生成してプレビューを表示します。  
> **注意**：ネットワーク環境によっては、サムネイルの読み込みが遅れる場合があります。

#### 🖱️ **ワンクリックでピクチャ・イン・ピクチャを起動**
- 動画プレイヤーの左上に「PIP起動ボタン」を追加。一度のクリックでピクチャ・イン・ピクチャモードに切り替えられます。

#### 📸 **スクリーンショット機能を搭載**
- 内蔵のスクリーンショット機能で、学習や娯楽の大切な瞬間を簡単に保存できます。

---

### **操作がもっと簡単に：強力なショートカットキー対応**

**高度なピクチャ・イン・ピクチャプレイヤー** は、単なる動画再生ウィンドウにとどまりません。プロフェッショナルレベルのカスタムプレイヤーとして、以下の豊富なショートカット操作をサポートします：

- **再生/一時停止**：スペースキーまたは K キー。  
- **音量調整**：矢印キー（上下）で音量を調節、M キーでミュート/ミュート解除。  
- **時間ジャンプ**：  
  - 矢印キー（左右）で5秒進む/戻る。  
  - J キー/L キーで10秒進む/戻る。  
- **次/前の動画に切り替え**：  
  - Shift + N で次の動画。  
  - Shift + P で前の動画。  
- **字幕とコメント対応**：  
  - C キーで字幕を表示（YouTube、Vimeo など対応）。  
  - D キーでコメントを表示（Bilibili、Niconico など対応）。  
- **ウィンドウとビューの調整**：  
  - W キーでウィンドウサイズを動画に合わせる。  
  - Q キーで動画を非表示/表示切り替え。  
  - F キーでフルスクリーンに切り替え。  
- **再生速度調整**：> または < キーで再生速度を調節。  
- **特定位置へのジャンプと終了**：  
  - 数字キー 0-9 で動画の特定割合にジャンプ。  
  - Home/End キーで動画の冒頭または末尾にジャンプ。  
  - Esc キーでPIPモードを即座に終了。  



### **なぜ「高度なピクチャ・イン・ピクチャプレイヤー」を選ぶべきか？**

このプレイヤーは単なる便利ツールではなく、日常のブラウジング効率を向上させる強力なアシスタントです：  

- **柔軟で効率的**：マルチタスク操作が可能で、作業と視聴の両立がスムーズに。  
- **幅広い互換性**：主な動画サイトをカバーし、学習、娯楽、シリーズ視聴など幅広く対応。  
- **直感的操作**：豊富なショートカットキーとシンプルなUI設計で、操作ストレスゼロ。  
- **プレミアム向け設計**：プロユーザーの期待に応える充実した機能を搭載。  

---

今すぐ [Chrome ウェブストア](https://chrome.google.com/webstore/detail/chejfhdknideagdnddjpgamkchefjhoi) で **VertiTab** をダウンロードまたは更新し、「高度なピクチャ・イン・ピクチャプレイヤー」で新しい視聴体験をお楽しみください！
JavaScriptの比較関数について

数字の配列を昇順で並び替える必要があり、方法を検索すると、以下のコードがでてきました。

```
function compareFunc(a, b) {
  return a - b;
}

var num = [5, 3, 10, 6, 55];
num.sort(compareFunc);

console.log(num);
```

https://www.sejuku.net/blog/62904

これを見たとき、a - b をreturnしている関数の中身がどのような処理をしているかよくわかりませんでした。
それもそのはず、この関数は *比較関数* という少々特殊なものでした。

# 比較関数

比較関数は二つの引数をとります。数値を戻り値とし、数値の正負、または0かどうかでソートの順序が変わります。

| 戻り値 | ソート順 |
|:-----------|------------:|
| 正の数       | val1 → val2    |
| 負の数     | val2 → val1      |
| 0       | 変更なし       |
AirリザーブのURLパラメータから予約種別を判定し、予約種別ごとの計測をする

## 背景と目的
Airリザーブでの予約フローでは、URLパラメータ`schdlId`で予約種別を区別しています。このパラメータを利用して、予約種別ごとの計測を実現します。


## 実装の課題
1. URLパラメータは入り口ページにのみ存在
2. 予約フロー全体で予約種別を維持する必要性
3. 複数の分析会社での同時計測への対応


## 解決策：JavaScriptによる実装
```javascript
//airrsv_event_sender.js
(function() {
  function getReservationType() {
    try {
      //URLパラメータ取得
      var urlParams = new URLSearchParams(window.location.search);
      var airsvId = urlParams.get('schdlId');
      var airsvName;

      if (airsvId) {
        //予約種別の判定
        switch (airsvId) {
          case 's0000KA554':
            airsvName = 'kzinssie_guidance';
            break;
          case 's0000KBSA7':
            airsvName = 'kzinssie_onguide';
            break;
          //... 他の予約種別
        }
        
        //セッションストレージへ保存
        sessionStorage.setItem('st_airsvId', airsvId);
        sessionStorage.setItem('st_airsvName', airsvName);
      } else {
        //セッションストレージから読み取り
        airsvId = sessionStorage.getItem('st_airsvId');
        airsvName = sessionStorage.getItem('st_airsvName');
      }

      //GTM用データ送信
      if (airsvId && airsvName) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          'event': 'airrsv_data_ready',
          'dat_airsvId': airsvId,
          'dat_airsvName': airsvName
        });
      }
    } catch (error) {
      console.log('Error:', error);
    }
  }

  //DOM読み込み完了時に実行
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', getReservationType);
  } else {
    getReservationType();
  }
})();
```


## 実装のポイント
1. セッションストレージの活用
- 入り口ページで予約種別を判定
- フォーム全体で予約種別情報を維持

2. データレイヤー送信
- GTM用のデータを標準形式で送信
- カスタムイベントで発火タイミングを制御

3. 汎用性の確保
- 測定ID非依存の実装
- 複数社での同時計測に対応

## 導入手順
1. スクリプトファイルの作成
2. 全ページへの設置
3. デバッグモードでの動作確認



# スクリプトの機能と利点

## 主な機能
- 予約種別の判定と保持
- 全ページでのデータ送信
- GTMでの計測トリガー制御

## 各社での計測が可能な理由
- スクリプトは汎用的な実装（測定ID非依存）
- データレイヤーを介した標準的なデータ送信
- セッションストレージによるデータ維持

## カスタムイベントの必要性
1. 発火タイミングの制御
- ページ読み込み時には予約種別が未確定
- データ準備完了後に正確な値を送信

2. 計測の確実性
- 予約種別の判定完了を確認
- 誤った値での計測を防止

3. 複数社での同時計測
- イベントベースで個別にトリガー制御
- 各社のGTMで独立して計測設定が可能


この実装により、各分析会社は独自のGTMコンテナで予約種別ごとの計測が可能になります。
Playwright を使ってテストを作成する方法

以下の手順で、Playwright を使ってテストを作成していきます。
※使用言語はReactです。

## 内容の要約
1.Playwrightの公式サイトにアクセスします。
2.ページのタイトルが「Playwright」を含んでいることを確認します。
3.「Playwright」というテキストを含む最初の要素がページ上に表示されていることを確認します。

-----
## 1. Playwrightのインストール
まず、プロジェクトにPlaywrightをインストールします。
以下のコマンドをターミナルで実行してください。
```powershell
npm install -D @playwright/test
```

-----
## 2. Playwrightの初期設定
Playwrightを初期化し、必要なブラウザバイナリをダウンロードします。
以下のコマンドを実行してください。
```powershell
npx playwright install
```

-----
## 3. テストファイルの作成
次にテストファイルを作成します。例えば、`tests` フォルダー内に `example.spec.ts` という名前のファイルを作成します。
Playwrightはデフォルトで `.spec.ts` や `.test.ts` などの拡張子を持つファイルを認識します。
```
mkdir tests
touch tests/example.spec.ts
```
2行目のコードについて、PowerShellを使用する場合は、以下のコマンドを実行してください。
```powershell
New-Item -Path tests\example.spec.ts -ItemType File
```

-----
## 4. テストコードの作成
`example.spec.ts` にシンプルなテストケースを書きます。例えば、以下のようなコードを追加してみましょう。
```react
import { test, expect } from '@playwright/test';

test('should load the Playwright homepage', async ({ page }) => {
  // Playwrightのホームページにアクセスする
  await page.goto('https://playwright.dev');

  // ページタイトルを検証する
  await expect(page).toHaveTitle(/Playwright/);

  // 特定の要素がページに存在するか検証する
  // 最初の要素を選ぶ
  const headers = await page.locator('text=Playwright');
  await expect(headers.nth(0)).toBeVisible(); // 最初の要素を検証
});
```

```react
import { test, expect } from '@playwright/test';
```
`test` と `expect` をPlaywrightのテストライブラリからインポートしています。`test` はテストケースを定義するために使用し、`expect` はアサーション（検証）を行うために使用します。

```react
test('should load the Playwright homepage', async ({ page }) => {
```
test 関数はテストケースを定義します。ここでは `'should load the Playwright homepage'` という名前のテストケースを作成しています。また、テストの内容は非同期で実行されるため、async 関数として定義されています。

```react
  // Playwrightのホームページにアクセスする
  await page.goto('https://playwright.dev');
```
page.goto メソッドを使って、指定されたURL（ここでは Playwright の公式サイト）にブラウザが移動します。
この操作は非同期であり、await を使って完了するのを待ちます。

```react
  // ページタイトルを検証する
  await expect(page).toHaveTitle(/Playwright/);
```
`expect(page).toHaveTitle(/Playwright/)` は、ページのタイトルが「Playwright」というテキストを含むことを検証します。
`/Playwright/` は正規表現で、タイトルに「Playwright」が含まれていればテストは成功です。

```react
// 特定の要素がページに存在するか検証する
// 最初の要素を選ぶ
  const headers = await page.locator('text=Playwright');
  await expect(headers.nth(0)).toBeVisible(); // 最初の要素を検証
});
```
● `page.locator('text=Playwright')` は、ページ内の「Playwright」というテキストを含むすべての要素を選択しており、`headers.nth(0)` は、その中の最初の要素を選択します。
● `await expect(headers.nth(0)).toBeVisible();` は、その最初の要素がページ上で表示されていることを検証します。これにより、指定された要素がページに正しく表示されているかを確認できます。

-----
## 5. テストの実行
以下のコマンドでテストが実行されます。
```powershell
npx playwright test
```
Playwrightのテストが実行され、結果がターミナルに表示されるので確認してみましょう。
テストが成功した場合、緑色のメッセージが表示され、失敗した場合は赤色のエラーメッセージが表示されます。


以上で、Playwrightを使った基本的なテストケースの作成と実行が完了です。必要に応じて、より複雑なテストケースや設定を追加していってください。
【CSS】最後の子要素にスタイルを適用する方法

## `:last-child`

`:last-child`は、親要素の最後の子要素を選択します。任意の要素タイプに適用できます。

### 使用例

```css
/* 親要素の最後の子要素にスタイルを適用 */
.parent > :last-child {
  background-color: #f0f0f0;
}
```

```html
<div class="parent">
  <p>最初の段落</p>
  <p>最後の段落</p>
</div>
```

この例では、`div.parent`の最後の`<p>`要素に背景色が適用されます。

## `:last-of-type`

`:last-of-type`は、特定の要素タイプ内で最後の要素を選択します。これにより、同じタイプの要素の中で最後のものにスタイルを適用できます。

### 使用例

```css
/* 親要素内の最後の<div>要素にスタイルを適用 */
.container div:last-of-type {
  border: 2px solid #333;
}
```

```html
<div class="container">
  <div>最初のボックス</div>
  <div>最後のボックス</div>
  <span>スパン要素</span>
</div>
```

この例では、`.container`内の最後の`<div>`要素にボーダーが適用されますが、他の要素タイプ（例：`<span>`）には影響しません。

## `:last-child`と`:last-of-type`の違い

- **`:last-child`**: 親要素の最後の子要素であれば、どのタイプでも選択されます
- **`:last-of-type`**: 親要素内で指定したタイプの最後の要素のみを選択します

### 比較例

```css
/* :last-child */
.container > :last-child {
  color: blue;
}

/* :last-of-type */
.container > :last-of-type {
  color: red;
}
```

```html
<div class="container">
  <p>段落1</p>
  <p>段落2</p>
  <span>スパン</span>
</div>
```

- `:last-child`は`<span>スパン</span>`を選択し、テキストが青色になります
- `:last-of-type`は`<p>段落2</p>`要素に適用され、テキストが赤色になります
【React】 #4 カラーパレットアプリを作成

# はじめに
現在、Reactを習得するために、23種類のReactアプリ開発に取り組んでいます。
今回はその第４弾として、Reactでカラーパレットアプリを作成しました。

https://qiita.com/xYasi/items/0e223b8be80006ef9933

# 要件
今回は以下の要件を満たすことを目指しました。
+ サーバから色情報を取得すること
+ 取得した色情報をグリッド表示すること
+ 特定の色を選択すると背景色が変わること

# 作成したアプリのイメージ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3947973/8ad069ca-7dae-f5fe-5417-2b68f89a1825.jpeg" width=60%>

# アプリ紹介動画
<iframe width="200" height="400" src="https://www.youtube.com/embed/GmpwfBD5olI" title="Ract Color" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# 利用技術
+ React
+ TypeScript
+ Vite
+ Tailwind CSS
+ json-server

# 意識したポイント
## 色情報はjson-serverを利用してダミー電文を取得
```react:fetchColorData.tsx
const fetchColorData = async () => {
  const res = await fetch("http://localhost:3000/color");
  if (!res.ok) {
    throw new Error(`色彩情報の取得に失敗しました:${res.status}`);
  }
  const data = await res.json();
  return data;
};
export default fetchColorData;
```
色情報は`json-server`というAPIを利用してダミーのjsonデータを取得しています。
[json-server(npm)](https://www.npmjs.com/package/json-server)

# おわりに
今回はカラーパレットアプリの作成をしました。  
useEffect、データフェッチの理解が深めて良かったです。

`json-server`は初めて使いましたが、  
簡単にサーバサイドをモック化できて便利ですね。  

# Github
GitHubにコードをアップロードしていますので、よかったら確認してみてください。

https://github.com/yasi1989/react-color
ロードバランサーの基本③

# ロードバランサーの機能（基礎）
 前回に続き、ロードバランサーの基礎的な機能について説明します。
### ロードバランサー自身の冗長性
　オンプレミスでロードバランサーを使用する場合、ロードバランサーの冗長性にも気をつける必要があります。本番環境では、多くの場合ロードバランサーを冗長構成にして障害に備えます。アプライアンスやVM版の場合は、製品自体に冗長化機能がありますので、その機能を使います。また、障害時に待機系のロードバランサーに切り替わる際、既存のコネクション情報を引き継いでクライアントからサーバーへの接続が切断されないようにする機能を備えている製品もあります。
 　クラウドのロードバランサーの場合は、クラウドベンダー側で冗長性が確保されています。どの程度の可用性が確保されているかはクラウドベンダーの情報を参照してください。
### Sorry表示
　Web通信では、サーバーが全てダウンした場合などにSorry画面を表示する場合が多いです。ロードバランサーにはSorry画面表示が可能なものがあります。方式としては、優先度が低いサーバーとしてSorryサーバーを登録しておき通常のWebサーバーが全滅した際にSorryサーバーに負荷分散する方式、サーバーが全滅した際にSorryサーバーにリダイレクトする方式、ロードバランサー自身がSorry画面の情報を持っておりクライアントにSorry画面を返す方式、などがあります。
### その他の処理
　その他にも、主にHTTP/HTTPSの通信で以下のような処理が可能な場合があります。
 * HTTPヘッダーの追加、削除、書き換え
 * HTTPヘッダーやリクエストURLを読み取って割り振り先の制御などを行う
 * 接続されているクライアント数のカウントなどプログラム的な動作をし、その結果を割り振りなどに反映する
データベーススペシャリストの勉強方法

## 令和6年データベーススペシャリストに一発合格しました！
点数はこんな感じでした

![スクリーンショット 2024-12-26 20.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50474/9baea030-aab6-ee06-dff1-a5c7352e5036.png)

そこで、自分が勉強してきた内容を書こうと思います。

# 保持資格
基本情報、応用情報、ネットワークスペシャリスト

# 勉強期間と演習量
勉強期間は2ヶ月半。
過去問演習は、平成26年~令和5年までの11年分と、２周目の平成30年~令和5年の6年分
+基礎理論のため平成23~29年の午後1の問1
過去問道場での演習は744問

# 勉強の流れ
ここからは、実際の勉強の流れと、直面した問題についてです

## 参考書を購入して一通り読む
インプレスの参考書を買って、一通り読みました

https://book.impress.co.jp/books/1123101134

その後過去問演習をしていく中で、論理設計問題に課題があったため
論理設計問題に定評があった翔泳社の、通称みよ本を買って読みました。

https://www.shoeisha.co.jp/book/detail/9784798185675


## 問題傾向を分析する
参考書の初めのところを読み、出題傾向を把握しました
どこに力を入れればいいのかを把握することは、対策を考える上で重要です

## 基礎理論と正規化理論をマスターするまで午後1問1の過去問を解く
平成23~29年までの問1を解いて、部分関数従属や推移的関数従属、E-R図の書き方をマスターしました
時間は少しオーバー程度、5~6割の得点率
近年は基礎理論の出題は少ないですが、念の為勉強しました。

## 選択問題を決める
この試験では、午後2の選択で、物理設計か論理設計のどちらかを選んで解答します
両方の対策をするのは厳しいので、あらかじめどちらを選択するか決めた上で勉強を進めた方が効率的です。
論理設計問題は、出題パターンが固定されており、雑多な問題が出る物理設計より対策がしやすそうでしたので
論理設計でいくことにしました。

## SQLの演習をする
午後1では論理と物理に加えて、にSQL問題も高頻度で出題されるので、SQLの対策をしました
手を動かしてSQL文を書く練習をするため、
sqlzooというサイトで演習をしました

https://sqlzoo.net/wiki/SQL_Tutorial/ja

## 直近の問題傾向と難易度を知るために、直近のR5の過去問を解く
午後1問1,2を解きましたが、時間が全然足りませんでした、得点率は4~5割
評判通り、近年の出題傾向が変化しており、考えることも多く、時間短縮が必要なことに気づきました

午後　2の論理設計は全然解けない状態でした。

ここでみよ本を購入し、論理設計問題の解き方のコツを勉強し始めました
みよ本は最初から読んでも頭に入ってこなくて、問題を解いて、課題に直面してから読むと良いと思います


## 過去問をひたすら解く
1日少なくても1問は解くようにして、新しい問題から順に解きました
問題と回答用紙は印刷しました。
回答用紙はこちらから

https://www.itec.co.jp/learning_download


論理設計の問題はとても疲れるので、午後1と午後2を1日で解くのはまだまだ厳しかったです

## スキマ時間で過去問道場を回す
今年からデータベース過去問道場が有料になってしまいました
ちょうど1ヶ月前にメンバーシップに加入し、課金が1月で済むようにして勉強を開始しました

午前2は数年前の問題から再出題が多いので、直近8年は全網羅
データベース分野は平成21年から全網羅、コンピュータ要素は全部やってはいない状態まで

![スクリーンショット 2024-12-26 20.20.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50474/35a96a72-92da-a7a4-c6d2-af760ad29744.png)

## 午後1の論理設計問題、時間足りない問題
午後1は2題選択で、1問は論理設計を解く予定でしたが
問題文をじっくり読んで解くと、半分の45分で解き終わらなかったです
しかし過去問演習を繰り返すことで、徐々に所要時間が減っていきました
推移は
R5:58分　→ R4:59分　→ R3:58分　→R2:47分 H31: 45分　→ H30: 45分
と、5年程度午後1午後2の問題を解いたあたりから時間が足りるようになっていきました

過去問演習の解き始めのころは、時間をかけてでもいいので、解答方法を学び
慣れてきたら、時間を意識して解くのが良いかと思います


## 解答を一致させる練習
論理設計問題は、属性名を答えさせる問題が多いですが
答え合わせをしていると、概ねあってるが、微妙に異なるということが結構ありました
この辺りの採点基準が分からないため、減点を避けるため、できるだけ公式解答と同じ解答ができるようにする努力をしました。
具体的には、サブタイプの主キーの属性名は、スーパタイプの属性名と区別できるように変える
(これは昔の問題と新しい問題で傾向が異なるので、新しい問題の傾向である、区別できる属性名にした方が良さそうです)
他のエンティティで使っている属性名と同じ名前にしないこと
などです

## 本番と同じ状況で過去問を解く
データベーススペシャリスト試験は、特に午後の試験は集中力と精神力をとても使うため、疲れる試験です。
過去問演習で合格点が取れていても、試験本番で最後まで集中力が続かず、実力を出しきれないこともあるかもしれません。
なので、慣れてきたら、過去問演習を本番と同じ時間で実施することが大事だと思いました。
時間のある休日は、試験本番と同じスケジュールで問題を解くのを繰り返し、慣れるようにしました

## その他のテクニック
過去問を解いて、失敗した経験を元に、自分の試験テクニックを書いておきます

* まず問題の全体の構成を把握すること
    * 改修前、改修後みたいなパターンに気をつける
* 何を解凍すべきか、出題文をよく読む
    * ER図にリレーションの追加のみか、エンティティ追加があるのか
    * マスタ-トランザクション領域のリレーションは必要か
    * 属性の穴埋めは1つか複数か
    * 解答の候補はどこにあるのか　(図中、属性など)
* 問題文を読んで理解した関係性は、自分で図を書くこと
* 追加すべき属性名が問題文に登場したら、四角で囲うこと
    * 属性名を記載したら、丸をつける 
    * 見直しの時に丸がついてない属性がないか確認する
    * 追加忘れがないようにすること
* どのサブタイプとリレーションがあるのか確認する
    * スーパタイプではなく、可能ならできるだけサブタイプとリレーションがないか考える
* トランザクション領域の属性は、はっきり書いてないことが多い
    * 業務の内容を理解し、属性の充足、不足を考えること
Drupalのアクションで設定値を保存する

![test1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280639/21654d88-cc23-fc10-6d36-a4e35d6f1923.png)

アクションというのは一括で記事を削除したりとか、一括で選択した記事に対して何かする、機能になります。
ここにオリジナルのオプションをつけるカスタマイズは下記がよくまとまっているので参考にしてください

https://www.tothenew.com/blog/actions-plugin-in-drupal-10/

↑ちなみに、これもPlugin Apiを使うようです。
typeがnodeを指定しているのでユーザーなどでも、Actionアノテーションは使える気がします。
(これは確認できていませんが...)


# 本題
アクションの設定値を保存するに関しては「Actions UI」モジュールを有効化します。
Actionsを管理画面から管理できるモジュールみたいです。
「Views」モジュールでいう「Views UI」みたいなものだと思います。

参考のURLだと、「ActionBase」クラスを継承していますが、設定を保存する場合は、おそらく、「ConfigurableActionBase」クラスを継承したほうがいいのでこちらを継承するようにしてあげます。

```php:UpdateAlias.php
  /**
   * {@inheritdoc}
   */
  public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
    $form['path'] = [
      '#title' => 'パス変更',
      '#type' => 'textfield',
      '#required' => TRUE,
      '#default_value' => $this->configuration['path'] ?? 'node',
      '#element_validate' => [[$this, 'validatePath']],
    ];
    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
    $this->configuration['path'] = $form_state->getValue('path');
  }
```

「ConfigurableActionBase」を継承して、buildConfigurationFormとsubmitConfigurationFormメソッドを実装すると、Actions UIの管理ページに追加項目の設定値を入力できる項目が表示されるようになります。

![test2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280639/e184e86c-80c5-204a-6cde-d33ad09f4b68.png)


## 余談
今回は、コードによる追加からアクションを追加しました、
こちらは、試せていませんが、「Views Bulk Operations」というモジュールを使えば、管理画面上からアクションを追加できるようです。

コードからのアクション追加でも「Views Bulk Operations」モジュールでは、「ViewsBulkOperationsActionBase」というクラスが用意されているみたいです。

https://www.drupal.org/docs/8/modules/views-bulk-operations-vbo/configuring-an-action
初学者向け：VirtualBox上で構築したAlmaLinuxのホスト名を変更する方法

## はじめに
自宅のVirtualBox上に構築したAlmaLinuxなどのホスト名を設定することで、より愛着を持てるようになります（笑）。

:::note
***この記事では、ホスト名を設定する方法を簡潔にご紹介します。***
:::

まだホスト名を変更していない方は、この記事を参考にして、ご自身が構築したサーバーにさらに愛着を持てるよう、ぜひホスト名を設定してみてください！

## 前提条件

この記事では、VirtualBox上に構築したAlmaLinuxに対してホスト名を設定する手順をご紹介します。

***VirtualBoxやAlmaLinuxの基本的な内容については、過去の記事で詳しく解説しているので、必要に応じてそちらも参考にしてください！***

https://qiita.com/free-honda/items/ca757d6414a8ea344ea1

https://qiita.com/free-honda/items/835300a0a18b206352cc

## 事前準備

まず、サーバーにSSH接続を行います。この記事ではWindows PCを使用して設定を行うため、SSHクライアントとしてTera Termを使用します。

***Tera Termのインストールや設定方法については、過去の記事で詳しく解説していますので、そちらをご覧ください！***

https://qiita.com/free-honda/items/96a28eb26c02e596f908

## 実際に設定してみた

AlmaLinuxサーバーのホスト名を変更する手順をご紹介します。

:::note warn
***今回は、```/etc/hostname```ファイルを直接編集してホスト名を設定します。***
:::

まず、現在のホスト名を確認するには、以下のコマンドを実行します。

```bash
cat /etc/hostname
```

実行結果として、現在設定されているホスト名が表示されます。

```bash
[honda@HONDA-TEST ~]$ cat /etc/hostname
HONDA-TEST
```

```/etc/hostname```ファイルを編集して、新しいホスト名を設定します。以下のコマンドを実行してください。

```bash
sudo vi /etc/hostname
```

編集画面が表示されたら、新しいホスト名に変更してください。例として「```NEW-HOSTNAME```」に設定する場合、以下のように編集します。

```bash
NEW-HOSTNAME
```

編集後は、ファイルを保存して終了します（Viエディタの場合、:```wq```と入力）。

![スクリーンショット 2024-12-26 22.13.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/1df966c6-7c2c-f8ce-0271-711d065220ac.png)

変更を反映させるために、以下のコマンドでOSを再起動します。

```bash
sudo reboot
```

## 再起動後にホスト名を確認する

再起動後、新しいホスト名が適用されているかを確認します。以下のコマンドを再度実行してください。

```bash
cat /etc/hostname
```

新しいホスト名が正しく表示されていれば、変更は成功です。

この手順では、```/etc/hostname```を直接編集することで、手動でホスト名を変更しました。

:::note alert
この方法はシンプルで分かりやすいですが、```hostnamectl```コマンドを使用する方がシステム全体に適切な変更を反映できるため、推奨される場合があります。
:::


## まとめ

今回は、基本的なサーバーのホスト名を変更する方法をご紹介しました。***これにより、少しでもサーバーへの愛着が深まることを願っています！***

:::note warn
***ホスト名を変更する方法にはいくつかの選択肢がありますが、この記事でご紹介した方法は簡単で手軽に実行できるのが特徴です。***
:::

基本的な内容ではありますが、この記事が技術的な助けになれば幸いです！

## 関連記事

https://blog.mothule.com/linux/linux-hostnamectl

https://qiita.com/notakaos/items/d18ab37bce2b25b2d5b0
レトロPCのためのBASIC講座６　DISK BASICで起動する

# 前回のおさらい
前回は、データの型について説明しました。

[レトロPCのためのBASIC講座５](https://qiita.com/kawamo55/items/5cb863388d0e8a2c8efa)

# DISK BASIC
DISK BASICは、記憶メディアとしてフロッピーディスクが使えるBASICです。
この頃(1981年ごろ)のパソコンは記憶メディアとしてカセットテープが主流でした。
この頃のフロッピーディスクは片面１Dと呼ばれるもので、３６０KByteの記録が可能でした。

FILES　　　　　　　　ドライブに記録されているファイルが表示されます。
LOAD ”FILENAME"　　プログラムファイルをロードします。
SAVE ”FILENAME"　　プログラムファイルをセーブします。

DISK BASICでは、ディレクトリを作ることはできませんでした。

# 今回の動画
https://youtu.be/dsf5i-fZsSU
ragas でデバッグの仕方

# 背景

`ragas` で evaluate() してたら Timeout が出てどうにもならなかったのでその調査の為に、log 出力方法を調べた記録

https://docs.ragas.io/en/latest/

# で debug log 出力方法

- 環境変数で `RAGAS_DEBUG` に `True`
- `log_tenacity` に `True`

実際のコードはこんな感じ

```python: logging
import logging

from ragas import (
    evaluate,
    EvaluationDataset,
    RunConfig,
)

os.environ["RAGAS_DEBUG"] = str(True)  # ★ココ
logging.basicConfig(filename='debug.log', level=logging.DEBUG)

run_config = RunConfig(timeout=180, log_tenacity=True) # ★ココ
results = evaluate(dataset=eval_dataset, metrics=metrics, run_config=run_config)
```

以下で紹介されてました。

https://github.com/explodinggradients/ragas/issues/1247
        
        
コード上は、以下

https://github.com/explodinggradients/ragas/blob/main/src/ragas/utils.py#L35  

## 出力例

```log
INFO:azure.identity._internal.decorators:AzureCliCredential.get_token_info succeeded
DEBUG:azure.identity._internal.decorators:Failed to log the account information: 'utf-8' codec can't decode bytes in position 496-497: invalid continuation byte
Traceback (most recent call last):
  File           
```

# あとがき

ragas で動作がおかしい時に log で調査出来るのは大切ですよね :laughing:
【Qiita Bash】アドベントカレンダーお疲れ様会に参加してきました

せっかくなので Qiita で投稿しようと思います。

[【Qiita Bash】アドベントカレンダーお疲れ様会 - connpass](https://increments.connpass.com/event/338077/)

発表者情報は上記リンクから、資料も見つけたら適当に追記します。

ハッシュタグは [#QiitaBash](https://x.com/hashtag/QiitaBash?src=hashtag_click&f=live) でした

## メモ書き

- Qiita の中の人もアドベントカレンダーを頑張っている
    - ちゃんと25日完走できるくらい書いている
- SmartHR 企業LT
    - 内容が2本立てだった
    - 1本目
        - 課題 is 何 による、レトロスペクティブでの議論の発散のコントロールと優先度づけの話
            - 背景画像まで用意しているの面白かった
            - https://x.com/ampersand_xyz/status/1872224361496928603
        - 議論は発散していくのはいいけど、問題の質などの共有が大事
    - 2本目
        - カンファレンスに参加すると次のカンファレンスが見つかる良い循環がある
        - 楽しさを知ることができたので、来年も参加していきたい
-  「【伝統と】10年続いてるクソアプリアドベントカレンダーで発表された作品紹介【格式】」 
    - 話題になったものがいくつか紹介された（詳細はアドベントカレンダーを見る）
    - ハッカソンで受賞できなかったものを自虐っぽくしていたが、とりあえず雑でもいいのでなにか開発をやってみようという後押しになった
- OpenAIの(Chat以外の)機能検証してみた
    - 資料公開されていました
        - https://x.com/pawn_4_t/status/1872427209564225922
    - Embedding はベクトルのコサイン類似度を計算している
    - （Function Calling は理解が追いついてなかったので後で調べる）
    - 参照されていた記事はこのあたり
        - [SpringAIを利用してOpenAIのAPIと連携する方法 #Java - Qiita](https://qiita.com/ho-rai/items/38f084d436844a6547bb)
        - [OpenAIのEmbeddingは実際どのように解釈されているのか検証する #ChatGPT - Qiita](https://qiita.com/ho-rai/items/ad2b89adfa5ff67e708b)
- 完走賞を目指すためにやったこと
    - アウトプットをすることと、アウトプットし続けるはまた別
    - ネタをストックしておく、すでに2025年に向けて準備する
        - そのタイミングで書きたい記事もあるので、なにか折り合いをつける（記憶が曖昧なので資料公開後に確認する）
    - 気楽さがなくなると書くのが辛くなる
- 一人ぼっちアドベントカレンダー
    - 挑戦したけど完走できなかった、途中から参加してくれる人がいてぼっちではなかった
    - [Felo - 無料のAI検索エンジン](https://felo.ai/ja/search)
    - カレンダーのネタは興味と知識を活かす、過去の経験や学びをふりかえるなどをAIから教えてもらう
    - 25日に間に合っていれば誤差
        - そもそも社会人は業務が忙しい
- 2025アドベントカレンダーふりかえり(仮)
    - 資料公開されていました
        - https://x.com/beajourneyman/status/1872234599558021215
    - とにかく声かけまくってアーリーアダプターを作る
    - 「うちのポテンシャルはこんなものではない」と信じぬく
    - 一緒に仕事したり場を作った仲間は本当に頼りになる
- Unityと.NETでオニオンアーキテクチャ
    - きれいに作るとUI層はコンソール上と、UnityアプリでUI層を変えるだけにできる
        - テストしやすい、再利用性が高まる
    - DLL参照などでコード共有もできる
- プロダクトのみんなで取り組む アドベントカレンダー（仮）
    - 資料公開されていました
        - https://x.com/mixplace/status/1872239957324259535
    - アドベントカレンダーを何かを知る
    - メンバーが企画・推進する
        - not EMで協力的な同僚を頼る
    - みんなの心理的ハードルを下げる
        - 自分が書きたい、話したいテーマでかく
        - 力作は求めない、ハードルは低く
    - とにかく楽しむ、盛り上げる
- サポーター LT枠
    - レガシーシステムとの向き合いと改善についての話でした
    - （メモが長くなりすぎてごちゃごちゃなので追記予定）

懇親会はフワフワ話を聞いていたら終わりました。
25日達成している方や、カンファレンスの運営回りの話をしていたような気がしますが、テンションが上がったなーと思います。

運営の SmartHR さんのブログも公開されていました！
https://tech.smarthr.jp/entry/2024/12/27/202040

## まとめ

記事を書くモチベーションを上げるのに十分な活力を得られたなあと思います。
来年は25記事、と言いたいところですがまずはネタ集めを頑張ろうかと思います。

また組織で取り組まれているところでは書くハードルを下げる話が多かったように思います。
少しだけでも良いので自分が話したいテーマについて買いて出してもらえる環境、雰囲気作りが大事なポイントとなりそうです。

ちなみに自分は note とかにポエム記事をポツポツ書いていましたが、来年は少なくとも技術的な記事を2, 3個くらいは出したいです（本当は25日にいくつ書くつもりでしたが、力尽きてしまったので断念しました）
Vercelで個人アプリをデプロイしてみた

# デプロイする手順

## 1. Vercelアカウントの作成・ログイン

- [Vercel公式サイト](https://vercel.com/)にアクセスして、アカウントを作成またはログインします。
- GitHub、GitLab、Bitbucketのアカウントと連携できます。

## 2. Gitリポジトリの用意

- デプロイするReactアプリのソースコードが格納されているGitリポジトリを用意します。
- GitHubにプロジェクトをプッシュしておきましょう。

## 3. Vercelで新規プロジェクトを作成

1. Vercelのダッシュボードで「Add New Project」をクリックします。
![add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/fff3d7a2-4778-6176-c43c-f11808c29002.png)

    
2. GitHubリポジトリと連携し、「Import Project」を選択。
3. デプロイしたいリポジトリを選択して「Import」をクリックします。
   
    

## 4. デプロイの確認

- 設定が完了したら「Deploy」をクリックしてデプロイを開始します。
    
    
- すぐにデプロイが完了し、URLが発行されます。
お天気アプリ：https://weatherapp-bay-ten.vercel.app/

    ![スクリーンショット 2025-01-09 9.08.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/b99c2fd6-6ea4-dca6-7336-6c8d040a7ed8.png)

    その後、コードを変更してプッシュすると、自動的にVercelでデプロイされます。Botで確認することができます。

    ![bot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/14457249-c6ab-4e4a-a7d1-59f9b8b1ee40.png)


# 環境変数の設定

- アプリケーションで必要なAPIキーや環境変数がある場合は「Environment Variables」で設定します。Vercelのダッシュボードで「Settings」→「Environment Variables」に進み、以下のように変数を追加します。
    
![app setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/c328d89b-fa8d-8cf9-8a5b-297f60292af4.png)


# Web Analyticsの導入

アクセス解析を簡単に導入できます。

- プロジェクトのルートで以下のコマンドを実行し、必要なライブラリをインストールします。

```
npm i @vercel/analytics
```

- `App.tsx`などのファイルに以下を追加して、解析を有効にします。

```tsx
import { Analytics } from '@vercel/analytics/react';
 
export default function App() {
  return (
    <div>
      {/* ... */}
      <Analytics />
    </div>
  );
}
```

[Vercel Web Analyticsの詳細はこちら](https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app)

閲覧者の数やデバイスの種類などが確認できます。

![スクリーンショット 2024-12-26 20.59.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/1fb006f5-d00b-1011-3c8e-61bd593f0f6a.png)

![スクリーンショット 2024-12-26 20.59.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3461384/5f9880a6-2d72-5ee6-d1dd-00e4868734ec.png)
ロードバランサーの基本②

# ロードバランサーの機能（超基礎）
　ここでは、ロードバランサーの超基礎的な機能について説明します。
### 負荷分散
　ロードバランサーの一番基本的な機能になるのが負荷分散機能です。クライアントからのアクセスを配下のサーバーに分散します。実は負荷分散の方式にも種類があり、特にアプライアンスのロードバランサーでは多くの方式から選択可能です。ただし、特に要件がない場合は以下の2つのどちらかが無難だと思います。
#### ラウンドロビン
　各サーバーに順番に負荷分散していく方式です。①と②の2台のサーバーがあるとすると、①②①②①②と順番にアクセスを割り振ります。アクセスをサーバーに等分に割り振ることができます。ただし、ロードバランサーが内部的にいくつかのプロセスで処理を行っている場合などは、完全に順番通りには割り振られない場合もあります。あくまで、おおよそ等分の割り振りになると考えてください。
#### リーストコネクション
　接続中のクライアントが一番少ないサーバーに次のアクセスを割り振ります。アクセス毎に処理の時間が大幅に異なるような場合でも、一時点でサーバーに接続しているクライアント数が等しくなるように近づける分散方式です。
### HTTPS終端
　次にHTTPS終端機能について説明します。これはL7のロードバランサーで使用できる機能です。HTTPS終端をサーバーで行うと暗号化処理で負荷が高くなりますが、これをロードバランサーで終端する事でサーバー側の負荷を軽くする事ができます。この機能を使用する場合は、サーバー証明書はロードバランサーに設定する事になります。アプライアンスやVM版では暗号化方式も細かく設定できるようになっており、要件に沿って設定します。
 　なお、ロードバランサーとサーバーの間をさらにHTTPSで通信させる事も可能です。その場合は、サーバー側にも別途証明書を配置してHTTPS終端する必要があります。
### スティッキー（パーシステンス）
　負荷分散を行う際、同じクライアントからの通信は同じサーバーに割り振る必要がある場合があります。静的なコンテンツだけでなく、動的な処理をおこなうアプリケーションサーバーがある場合などが該当します。そこで使用するのがスティッキー機能になります。この機能を使用すると、同じクライアントからのアクセスは同じサーバーに割り振るようになります。スティッキーにもいくつか種類があり、主なものはクライアントIPを使用するスティッキーとクッキーを使用するスティッキーです。
#### クライアントIPアドレス
 ロードバランサーがクライアントのIPアドレスと割振り先のサーバーを記憶しておき、その情報に従って新しいアクセスを従来と同じサーバーに割り振ります。最も基本的な方式ですが、ロードバランサーの前にNAT機器がある場合は全てのアクセスのアクセス元IPアドレスが同じになってしまうため、全てのアクセスが同じサーバーに割り振られてしまいます。
#### クッキー
　ロードバランサーがHTTP/HTTPS通信にクッキーを挿入します。クライアントは次回の通信からはそのクッキーをヘッダーに入れてアクセスを行うため、ロードバランサーはその情報を元に前回と同じサーバーに割り振ります。クッキーを使用するため、HTTP/HTTPSをロードバランサーで終端している必要があります。
### ヘルスチェック
　配下のサーバーが正常に稼働しているかどうかを確認する機能です。正常に稼働していないと判断されたサーバーは負荷分散の対象から外されます。ヘルスチェックの方式には、ICMP、TCPコネクション、HTTP/HTTPSアクセスなどがあります。
　また、ヘルスチェックの間隔やタイムアウト、何回ヘルスチェックに失敗するとサーバーがダウンしていると判断するかといった設定値がある場合が多いです。早くダウンと判定するようにした方がサーバー障害時の切り替わりを早くできますが、あまり早くダウンと判断するような設定にしてしまうと、サーバーの負荷が高くヘルスチェックへの応答が遅れるような場面で、誤ってサーバーをダウン判定してしまう可能性があります。
【個人用】AWS Solution Architect Associate対策ノート(EC2編)

AWS CLFに受かったので、この勢いのままAWS SAAを勉強してみようと思う。
この記事ではEC2関連の内容をまとめる

## 長期契約のインスタンス購入オプションの比較
**リザーブドインスタンス**と**Savings Plans**の違い
どちらも1~3年の長期契約をするところは一緒

### リザーブドインスタンス
使用するEC2インスタンスのタイプやサイズが**あらかじめ確定している**なら、こっちを選ぶ

### Savings Plans
使用するEC2インスタンスのタイプやサイズが**途中で変更される可能性がある**なら、こっちを選ぶ



## ハードウェアを占有するインスタンス購入オプションについて
**ハードウェア占有インスタンス**と、**Dedicated Hosts(専有ホスト)** の違い

### ①ハードウェア占有インスタンス
他のAWSアカウントとは分離された専用のハードウェアで、EC2インスタンスを購入できる購入オプションのこと

特徴としては
・**インスタンス単位**で契約する
・物理的なCPUソケット、コア数、ホストIDは**確認することができない**
・物理ホスト単位で購入したソフトウェアライセンスの**BYOL(持ち込み)はサポートしない**
・同じAWSアカウントの他インスタンスと、ハードウェアを共有する可能性がある

※
物理的なCPUソケットとは、マザーボードにCPUを装着するためのスロットのこと
コア数とは、CPU内部にある独立して動く処理ユニットの数
ホストIDとは、物理サーバーや仮想マシンを識別するためのIDのこと
BYOL(Bring-Your-Own-Licence)とは、利用者があらかじめ購入済みのライセンスをAWSに持ち込んで使用すること

### ②Dedicated Hosts(専有ホスト)
他のEC2インスタンスとは分離された専用ハードウェアで利用できる購入オプション
EC2インスタンスの購入オプションの中では、**もっとも利用料金が高い**

特徴としては
・ホスト単位で契約する
・物理的なCPUソケット、コア数、ホストIDは**確認することができる**
・物理ホスト単位で購入したソフトウェアライセンスの**BYOL(持ち込み)をサポートする**

## インスタンスストアの特徴

・EC2インスタンスの内部ストレージとして利用できる、揮発性のブロックストレージ
・無料で利用できる
・ムチャクチャIOPSが高い。なんならEBSよりはるかに高い
・EC2インスタンスを停止・終了すると、保存したデータは削除される

## インスタンスファミリーについて
**インスタンスファミリー**とは、インスタンスタイプを用途別に分類したもの
ちなみにインスタンスタイプとは、インスタンスを作るときに選べるCPU、メモリ、ストレージ性能、ネットワークキャパシティの組み合わせのこと

それぞれ分類ごとに、アルファベット1文字で表す

### M(汎用)
リソースのバランスが取れた、比較的オーソドックスなインスタンスファミリー
迷ったらこれを使えばいいと思う

### T(汎用・CPUバースト機能)
Mと同じくオーソドックスなインスタンスファミリーだが、CPU処理のバースト(一定時間、制限以上にCPU処理を動かせる)が可能なので、一時的にCPUの高負荷が発生するようなサーバーに適している

### C(コンピューティング最適化)
高性能なCPUを提供してくれるインスタンスファミリー
常に高負荷のバッチ処理をしているようなサーバーや、アクセス頻度の高いWebサーバーなどに適している

### R、X(メモリ最適化)
大容量のメモリを提供してくれるインスタンスファミリー
ビッグデータを処理したり、やたらアクセスされるDBサーバーなど、大量にメモリを食いつぶす環境に適している

### P、G、F(高速コンピューティング)
高性能なGPU(CPUじゃないよ！)を提供してくれるインスタンスファミリー
機械学習やゲームなど、高速演算が求められる環境に適している

※
GPUとは、大量の計算を大量に処理してくれる装置のこと

### I、D、H(ストレージ最適化)
高性能なローカルストレージを提供してくれるインスタンスファミリー
大容量のローカルストレージが欲しい時に適している
もっともディスクパフォーマンス(データの読み書きの効率)が高いのはこれ

## インスタンスタイプの見方

たとえば、**「m5.xlarge」**と書いてあったら…

・m → インスタンスファミリーを表すアルファベット
・5 → インスタンスの世代のこと
・xlarge → インスタンスのサイズのこと

## スポットフリートとは
スポットインスタンスのオプションのこと

スポットインスタンスを動かしているときに、中断されて必要なインスタンス数を下回ってしまった場合、控えのインスタンスを自動的に補充してインスタンス数を維持してくれる

## プレイスメントグループの種類

### ①クラスタープレイスメントグループ

プレイスメントグループ内のEC2インスタンスを、一つのAZ内の物理的に近い距離に配置したもの
これにより、EC2どうしの通信のパフォーマンスがよくなる
ただし、同じAZに配置するので、AZが落ちたら利用不能になる。なので可用性は下がる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751890/af56b2af-9a5f-d141-4919-7071f7bba789.png)


### ②パーティションプレイスメントグループ

プレイスメントグループの中を、パーティションという論理グループにさらに細かく分け、それぞれのパーティションに**１つ以上のEC2インスタンス**が配置されたもの
パーティションごとに、それぞれ独立した電源とネットワークを持つラックがついている
なので、一つのパーティションが死んだとしても、他のパーティションは影響を受けない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751890/fe139748-b94e-95fd-b877-b7ccbf33bda6.png)


### ③スプレッドプレイスメントグループ

②と違い、ラックには１つしかEC2インスタンスが配置されない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751890/1361636b-a78e-c6a9-a69d-1649eb29d268.png)
Visual Studio 2022でIntelliSenseが動かんくなったけどなんか動いた

はじめて書く記事＆検証をまともにやっていないのでご参考までにお願いします

:::note warn
この記事は書きかけです。
自分の首を絞めるために記事だけ立てて細かいところはあとで修正します
:::
<font color="gray">~~少なくとも今はそのつもりです~~</font>

# 先に結論
* 原因（詳しく調査していないので確証無し）
    * ソースコードの文字コードがバラバラの状態でプロジェクト内に混在していた
* 行った対策
    * すべてのソースファイルを使用しているライブラリのヘッダーファイルも含めてUTF-8で保存しなおした
* するとどうなった
    * なぜか治った。素晴らしい

総括　Shift-JISはこれ以上存在してはいけない

授業のチーム制作中に起きて詰みかけた
Python/SQLインジェクション対策

・コードでSQL文を生成する際に、文字列をそのまま受け取り条件分として使用しない様注意する

※プレースホルダを使用しない場合の書き方

入力値のhoge=['111111','2222222'...]があるとして
この値をそのままWHERE句の条件に設定するのはNG

よくない例

```Ptyhon
hoge = ['111111', '22222222']
query = "SELECT * FROM testTable WHERE id IN ({});".format(
    ",".join(f"'{h}'" for h in hoge)
)
print(query)

```

出力結果

```
SELECT * FROM testTable WHERE id IN ('111111','22222222');
```

SQLインジェクションを考慮した安全な例（おそらく）

```Python

hoge = ['111111', '22222222']
query = "SELECT * FROM testTable WHERE id IN ({});".format(
    ",".join(str(int(h)) for h in hoge)
)
print(query)


```

出力結果

```
SELECT * FROM testTable WHERE id IN (111111,22222222);
```

strで受け取り、intに変換することで不正な文字列であればValueErrorで
落ちる為、不正なクエリ文の入力を弾くことができる
タスクスケジューラーにアプリの自動起動を設定する方法

Windowsでアプリの自動起動を設定する方法はいくつかありますが、ここでは、タスクスケジューラーを利用して実装してみます。
## タスクスケジューラー
こんなやつです。Windows管理ツールの中にいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105792/e7cc8627-6507-04b5-578c-da0901901be9.png)
毎日定刻とか、ユーザーのログインといったトリガーで起動して、指定された処理を実行したりするための、Windowsの中核的なサービスの一つです。
これのWin32 APIは、そのままではC#から利用することができないので、まずは、NuGetで公開されているラッパーライブラリをインストールします。
```powershell
 Install-Package TaskScheduler
 ```

 ## 自動起動の基本形
 これを一般ユーザー権限で実行すると、**そのユーザーがログインしたとき**に、**そのユーザーの権限**で自動起動するタスクが登録されます。
 このコードは、UACなしで、一般ユーザー権限で実行できます。
 ```csharp
string taskName = "MyTask";
string taskExeFile = "MyTask.exe"; // フルパスで
using ( TaskService ts = new TaskService() ) {
    TaskDefinition td = ts.NewTask();
    td.RegistrationInfo.Description = "Schedule to run " + taskName;
    td.Principal.RunLevel = TaskRunLevel.LUA;
    td.Principal.LogonType = TaskLogonType.InteractiveToken;
    td.Actions.Add( new ExecAction( taskExeFile ) );
    td.Triggers.Add( new LogonTrigger() { UserId = WindowsIdentity.GetCurrent().User.ToString() } );
    ts.RootFolder.RegisterTaskDefinition(
        taskName,
        td,
        TaskCreation.CreateOrUpdate,
        null,
        null,
        TaskLogonType.InteractiveToken,
        null );
}
 ```

 ## 管理者権限で起動
 6行目、RunLevelを書き換えると、**管理者権限で起動**するようになります。
 このコードは、実行するには**管理者権限が必要**です。
 ```diff_c_sharp
- td.Principal.RunLevel = TaskRunLevel.LUA;
+ td.Principal.RunLevel = TaskRunLevel.Highest;
```

## 誰がログインしても起動
9行目、LogonTriggerオブジェクトに何も指定しなければ、**誰がログインしても**自動起動するようになります。
このコードは、実行するには**管理者権限が必要**です。
```diff_c_sharp
- td.Triggers.Add( new LogonTrigger() { UserId = WindowsIdentity.GetCurrent().User.ToString() } );
+ td.Triggers.Add( new LogonTrigger() );
```

## 誰がログインしても管理者権限で起動
上記二つの合わせ技です。（ソースコードは省略）
このコードは、実行するには**管理者権限が必要**です。
ロードバランサーの基本①

# はじめに
　今のシステムではロードバランサーは欠かせない存在です。オンプレミスであれクアウドであれ、システムを構築する際には必ずと言っていいほどロードバランサーを使用すると思います。すでにロードバランサーについて詳しい方も多いと思いますが、いくつかの記事に分けて基本的な事をまとめて行こうと思います。
# ロードバランサーとは
　ロードバランサーの最も基本的な機能は、その名の通り負荷（ロード）を分散させる事です。最近のサーバーは高性能ですが、それでも1台で全てのクライアントからのアクセスに応答する事が難しい場合もあります。そこで複数のサーバーを用意するのですが、それらのサーバーにクライアントからのアクセスを割り振る事が必要になります。その役目を担うのがロードバランサーです。
# ロードバランサーの種類
　ロードバランサーにはいくつかの種類があります。ここでは、形態と処理レイヤーによる分類を説明します。
### 形態による分類（アプライアンス、VM版、クラウド）
　オンプレミス環境で使用する場合は、アプライアンス機器かVM版のロードバランサーを使用する場合が多いと思います。アプライアンス機器としては、F5社のBIG-IPシリーズなどが挙げられます。また、ソフトウェアのロードバランサーとしては、BIG-IPのVM版などが挙げられます。アプライアンスの特徴は高性能であり、SSL処理用のプロセッサーなどを搭載している機器も存在します。反面、価格は高価になっています。VM版は比較的安価ですが、性能ではアプライアンスに及びません。また、VM状で稼働するロードバランサーとVMを動かす基盤部分でサポートが分かれるため、トラブル対応時の原因究明に時間がかかる場合があります。
 一方、クラウド環境でロードバランサーを使用する場合は、クラウドベンダーが用意するものを使用する場合が多いです。AWSのALBやNLBなどが挙げられます。IaaS上のVMでVM版のロードバランサーを使用できる場合もあります。

### 処理レイヤーによる分類（L4 or L7）
　次に、処理を行うレイヤーによってロードバランサーを分類してみます。アプライアンスやVM版のロードバランサーでは、L4とL7のどちらの通信も処理できます。HTTP/HTTPS通信などをロードバランサーで終端したい場合はL7、そうでない場合はL4になるように設定します。（要件によりますので、違う場合もあると思います。）
 　クラウドベンダーが提供するロードバランサーはL4用、L7用で別れている事が多いです。AWSの場合はNLBがL4、ALBがL7を処理するロードバランサーになります。
【競技プログラミング】AtCoder Beginner Contest 168_D問題

# 問題
https://atcoder.jp/contests/abc168/tasks/abc168_d

## 要約
1. 洞窟には N 個の部屋と M 本の通路がある。
2. 部屋には1からNまで、通路には1からMまでの番号がついている。
3. 通路 i は部屋 A_i と部屋 B_i を双方向につないでいる。
4. 部屋1は洞窟の入り口で、特別な部屋である。
5. 部屋1以外の各部屋に1つずつ道しるべを設置する。
6. 道しるべは、その部屋と直接つながっている部屋の1つを指す。

1. 目標を達成できる道しるべの配置が存在するかどうかの判定
2. 存在する場合、そのような配置の1つを出力すること

# 既存投稿一覧ページへのリンク
[一覧ページ](https://qiita.com/o_chan_t/items/fc759695acfaef8df2cc)

# アプローチ

1. グラフを構築し、幅優先探索（BFS）を用いて部屋1から各部屋への最短経路を求める。
2. BFSの過程で、各部屋の親（最短経路で1つ前の部屋）を記録する。
3. 各部屋の道しるべを、その親を指すように設定する。


# 解法手順

1. 入力を受け取り、隣接リスト形式でグラフを構築する。
2. BFSのために必要なデータ構造を初期化する：
   - 訪問済みフラグ（visit）
   - 部屋1からの距離（D）
   - 親ノード（P）
   - キュー（Q）
3. 部屋1をキューに入れ、BFSを開始する。
4. キューが空になるまで以下を繰り返す：
   - キューから部屋を取り出す。
   - その部屋に隣接する未訪問の部屋について：
     - 訪問済みとマークする。
     - 部屋1からの距離を記録する。
     - 親ノードを記録する。
     - キューに追加する。
5. BFSが終了したら、"Yes"を出力する（必ず解が存在するため）。
6. 部屋2以降について、各部屋の親ノード（道しるべが指す部屋）を順に出力する。


# ACコード
```python:ac.py
from collections import deque

def io_func():
    # 部屋の数nと通路の数mを入力として受け取る
    n, m = map(int, input().split())
    # 通路の情報を入力として受け取る
    edges = [map(int, input().split()) for _ in range(m)]
    return n, m, edges

def solve(n, m, edges):
    # グラフを隣接リスト形式で構築
    G = [[] for _ in range(n+1)]
    for a, b in edges:
        G[a].append(b)
        G[b].append(a)

    # BFSのためのデータ構造を初期化
    visit = [False] * (n+1)  # 訪問済みフラグ
    D = [0] * (n+1)  # 部屋1からの距離
    P = [0] * (n+1)  # 親ノード
    Q = deque([(1, 0)])  # キュー（部屋番号, 距離）
    visit[1] = True  # 部屋1を訪問済みとマーク

    # BFSを実行
    while Q:
        u, d = Q.popleft()
        for v in G[u]:
            if not visit[v]:
                visit[v] = True
                D[v] = d + 1
                P[v] = u
                Q.append((v, d + 1))

    # 結果を出力
    print("Yes")
    for w in P[2:]:
        print(w)

# メイン処理
n, m, edges = io_func()
solve(n, m, edges)

###
# n: 部屋の数
# m: 通路の数
# edges: 通路の情報（各要素は [部屋A, 部屋B] の形式）
# G: グラフの隣接リスト表現
# visit: 各部屋の訪問フラグ
# D: 部屋1からの最短距離
# P: 各部屋の親（道しるべが指す部屋）
# Q: BFSで使用するキュー

# 1. io_func関数:
#    - 標準入力から部屋数、通路数、通路の情報を読み取る
# 2. solve関数:
#    - グラフを隣接リスト形式で構築
#    - BFSのためのデータ構造を初期化
#    - BFSを実行し、各部屋の最短経路と親を記録
#    - 結果を出力（"Yes"と各部屋の道しるべ）
# 3. メイン処理:
#    - io_func関数を呼び出してデータを取得
#    - solve関数を呼び出して問題を解決```
PHPカンファレンス2024に参加しました

## はじめに
先日[PHPカンファレンス2024](https://phpcon.php.gr.jp/2024/)に行ってきました。
参加して印象に残ったセッションや学びを簡単にまとめたいと思います。


## 印象に残っているセッション

### Beyond ORM
https://fortee.jp/phpcon-2024/proposal/213adfbd-1463-4e5b-8b6f-f590f4cdc0fa

便利なORMですが、時には使いづらさを感じることもあるかと思います。
例えば、次のような場合です。
>- ORMの機能を使うためにやたらと実装が複雑になるとき、やたらとメモリ使うとき、やたらとループしないといけないとき
>- 「これPHPでごちゃごちゃ書かずにSQL一発打たせてくれたらいいのに」と感じたとき

こうした状況では、アプリケーション内でORMを「便利に使える場面」と「使いづらい場面」を見極め、適切に使い分けることが重要という内容でした。
ほとんどのORMには生のSQLを直接実行できる仕組みが用意されているため、必要に応じて活用し、ORMの辛さを乗り越えていこうと思いました。

### 見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
https://fortee.jp/phpcon-2024/proposal/6dadacb3-51b7-4a71-910a-f5f71f75e1e3

タイムテーブルを見た時から気になっていたセッションでした。
PHPには見えないメモリ(PHPで管理できない)メモリがあり、大量データを取り扱う際に注意すべきことを知れました。
特に、状況によってはメモリが二重に消費されることがあるという話は驚きでした。
この仕組みを理解することで、大量データ処理時のパフォーマンス低下やメモリ不足によるエラーを未然に防ぐことができます。

### 終了の危機にあった15年続くWebサービスを全力で存続させる〜Twilog・Togetter統合の舞台裏
https://fortee.jp/phpcon-2024/proposal/6e4865d8-6876-414e-b7df-b4ecb76b2e05

TwitterがXになり、無料だったAPIが有料化されたことで、大きな影響を受けたTwilogとTogetter。サービス継続のため、両サービスが統合することになり、その際の舞台裏で起こっていた事をお話しいただきました。
15年間に渡り溜め込まれたデータの移行、RubyからPHPへの書き換えなど、様々な課題をどのように解決していったのかが詳しく紹介されました。
(15年間のうち1日分のデータだけ欠損していてデータ移行のやり直しなど..)



### 責務を分離するための例外設計
https://fortee.jp/phpcon-2024/proposal/ac2fa6f2-588f-4faa-a0e2-35e4d8d9f808

例外処理の設計について学びがあったセッションでした。
例外の型の使い分けに迷うことがあるので、その課題を解決するための具体的な指針を得られたのがよかったです。
例外処理の設計は単なるエラー対策にとどまらず、システム全体の品質にも関わる重要な部分だと再認識しました。

## さいごに
今回で2度目のPHPカンファレンス参加となりましたが、前回以上に多くの刺激と学びを得ることができました。
前回はあまり足を運べなかったスポンサーブースを積極的に回り、各企業がどのような技術やサービスを提供しているのかを直接知ることができて良かったです。
【競技プログラミング】AtCoder Beginner Contest 245_D問題

# 問題
https://atcoder.jp/contests/abc245/tasks/abc245_d

## 要約
1. N次多項式 $A(x) = A_N * x^N + A_(N-1) * x^(N-1) + ... + A_1 * x + A_0$
2. M次多項式 $B(x) = B_M * x^M + B_(M-1) * x^(M-1) + ... + B_1 * x + B_0$
3. これらの積 $C(x) = A(x) * B(x) = C_(N+M) * x^(N+M) + C_(N+M-1) * x^(N+M-1) + ... + C_1 * x + C_0$

条件：
- A(x)とB(x)の各係数は絶対値が100以下の整数
- A(x)とB(x)の最高次の係数は0ではない
- 入力として与えられる$A_0, A_1, ..., A_NとC_0, C_1, ..., C_(N+M)$に対して、条件を満たす$B_0, B_1, ..., B_M$はただ一つ存在する

$A_0, A_1, ..., A_N$と$C_0, C_1, ..., C_(N+M)$が与えられたとき、$B_0, B_1, ..., B_M$を求める。

- N: A(x)の次数
- M: B(x)の次数
- A_i (0 ≤ i ≤ N): A(x)の係数
- B_j (0 ≤ j ≤ M): B(x)の係数（求めるべき値）
- C_k (0 ≤ k ≤ N+M): C(x)の係数


# 既存投稿一覧ページへのリンク
[一覧ページ](https://qiita.com/o_chan_t/items/fc759695acfaef8df2cc)


# アプローチ
多項式の乗算を逆算することで未知の多項式B(x)の係数を順に求める。

# 解法手順

1. 入力からN, M, A(x)の係数、C(x)の係数を受け取る。

2. A(x)とC(x)の係数リストを逆順にする。これにより、低次の項から処理を行いやすくなる。

3. B(x)の係数を格納するリストBを初期化する。

4. 以下の手順をM+1回繰り返す（i = 0からMまで）：
   a. C[i]をA[0]で割った商を計算し、これをB[i]とする。
   b. 求めたB[i]を使って、C(x)からA(x)とB[i]の積を引く。具体的には：
      - j = 0からNまでの各jに対して、C[i+j]からA[j]*B[i]を引く。

5. 求めたB(x)の係数リストBを逆順にして出力する。


# ACコード
```python:ac.py
def io_func():
    # 標準入力から値を読み取る
    N, M = map(int, input().split())  # NとMを読み取る
    A = list(map(int, input().split()))  # A(x)の係数を読み取る
    C = list(map(int, input().split()))  # C(x)の係数を読み取る
    return N, M, A, C

def solve(N, M, A, C):
    A = A[::-1]  # A(x)の係数リストを逆順にする
    C = C[::-1]  # C(x)の係数リストを逆順にする

    B = []  # B(x)の係数を格納するリストを初期化

    for i in range(M + 1):
        v = C[i] // A[0]  # C[i]をA[0]で割った商を計算
        B.append(v)  # 計算した商をB(x)の係数としてリストに追加

        for j in range(N + 1):
            C[i + j] -= A[j] * v  # C(x)からA(x)とB[i]の積を引く

    return B[::-1]  # B(x)の係数リストを逆順にして返す

# メイン処理
if __name__ == "__main__":
    N, M, A, C = io_func()  # 入力を受け取る
    result = solve(N, M, A, C)  # 多項式の係数を計算
    print(*result)  # 結果を出力

###
# N: A(x)の次数
# M: B(x)の次数
# A: A(x)の係数リスト
# C: C(x)の係数リスト
# B: 求めるB(x)の係数リスト
# v: 各ステップで計算される B(x) の係数

# 1. io_func関数: 標準入力から必要なデータを読み取る
# 2. solve関数: 多項式の係数を計算する主要なロジックを実装
#    - A(x)とC(x)の係数リストを逆順にする
#    - B(x)の係数を低次から順に計算し、C(x)を更新していく
#    - 計算されたB(x)の係数リストを逆順にして返す
# 3. メイン処理: io_func関数とsolve関数を呼び出し、結果を出力する
```

# 覚書

A(x) = 2x + 1 と B(x) = 3x + 4 の積 C(x) を求め、A(x) と C(x) から B(x) を復元する。

## C(x) を計算する
C(x) = A(x) * B(x) = (2x + 1)(3x + 4)
     = 6x^2 + 8x + 3x + 4
     = 6x^2 + 11x + 4

## 係数を比較する
A(x) = 2x + 1 なので、A1 = 2, A0 = 1
C(x) = 6x^2 + 11x + 4 なので、C2 = 6, C1 = 11, C0 = 4

## B(x) の係数を求める
1. 最高次の係数: B1 = C2 / A1 = 6 / 2 = 3
2. 次の係数: (C1 - A1*B0) / A0 = (11 - 2*3) / 1 = 5
   しかし、B(x) = 3x + 4 なので、実際は B0 = 4

1. C(x) の係数は A(x) と B(x) の係数の積の和になる
2. B(x) の係数は C(x) と A(x) の係数を使って順に求められる
【desksetup】2024年買ってよかったものまとめ

![AEA40BBE-54B4-4EF4-B129-CCDC5CEEBC14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706631/f23a2d17-8b25-2917-3cc3-5635ea446299.jpeg)


霊夢「ねえ魔理沙、最近何か買ってよかったものとかある？」

魔理沙「ああ、霊夢。実は橋田至って人の話を聞いて、めっちゃ参考になったんだぜ。ちょっと彼の買ったものを紹介する感じで話してみようか？」

霊夢「いいわね。それじゃ、一つずつ教えてちょうだい。」

https://x.com/dall_develop

## 橋田至のプロフィール/やってること

- 受託開発の会社でエンジニアとして勤務
- 普段はリモートワーク
- 28歳独身男性
- ペットなし
- 趣味はピアノ

詳細はプロフィールサイトに載せています

https://my-dq-portfolio.vercel.app/


---

### スマートカーテン

https://amzn.to/49TA3dY

魔理沙「まずこれ、スマートカーテン。橋田さん曰く、リモートワークで生活リズムが乱れがちな人に超おすすめらしいんだ。」

霊夢「カーテンを自動で開けたり閉めたりしてくれるやつでしょ？それで生活リズムが整うの？」

魔理沙「そうそう。朝は太陽光で自然に目覚めて、夜は決まった時間に眠くなるんだって。橋田さんもこれのおかげで毎朝7:30に起きて朝活をするルーティンができたらしい。」

霊夢「健康的な生活には良さそうね。」

---

### 分割キーボード

![1733805768-aq6nhF4o7NeJyrE2IKx93DM5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706631/8bd7743b-7f42-c978-c437-946ead874cda.png)



霊夢「次は？」

魔理沙「分割キーボード！Dygma Raiseっていうやつなんだけど、これが人生変わるレベルだってさ。」

霊夢「へえ、自作じゃなくても良いものがあるのね。」

魔理沙「うん。肩こりや手首の負担軽減にもなるし、自分に合ったやつを探してみる価値があるって。」

詳細

https://qiita.com/app_js/items/88885c081e86f17409fa

---

### トラックボールマウス

https://amzn.to/3VX7eaR

霊夢「マウスも何か特別なの？」

魔理沙「ロジクールのMXTB2dっていうトラックボールマウスなんだ。滑らかさとか、静音性とか、Bluetooth接続の快適さがすごいらしい。」

霊夢「トラックボールって慣れるのが大変そうだけど…」

魔理沙「確かに。でも慣れれば手放せなくなるみたいだぜ。」

---

### サブディスプレイ

https://amzn.to/3PxjD1P

霊夢「サブディスプレイってそんなに必要？」

魔理沙「これが意外と効率アップに繋がるんだ。橋田さんはメインに加えて、縦置きの24インチと中央下に追加のディスプレイを使ってるんだって。」

霊夢「画面がいっぱいあると散らかりそうだけど、どう使ってるの？」

魔理沙「用途ごとに分けてて、例えばSlackやタスク管理、技術記事の調査を分けて表示してる。アプリ切り替えが苦手な人に特におすすめらしい。」

---

### カップウォーマー

https://amzn.to/3VSYrGM

霊夢「それで次は？」

魔理沙「カップウォーマー。USB接続でコーヒーを温かく保てるやつ。」

霊夢「冷めたコーヒーが苦手な人には良さそうね。」

---

### モニターライト

https://amzn.to/41S0Hlw

魔理沙「夜はモニターライトでデスク周りを少し暗くして、睡眠に備えるのもいいって。」

霊夢「無線リモコンで操作できるなら、いちいち動かなくて済むわね。」

---

### その他の便利グッズ

霊夢「他には何かある？」

魔理沙「細かいものだと、コードをまとめるやつとか、家具用クッションパッド、フット電気毛布とか。冬の寒さ対策にもなるし、地味に便利だってさ。」

---

### 今後買いたいもの

霊夢「ちなみに橋田さんが次に欲しいものって？」

魔理沙「ウルトラワイド歪曲ディスプレイとか、左手デバイス、マイクスタンドなんかを狙ってるらしい。仕事がもっと快適になるだろうなって。」

---

霊夢「なんだか聞いてると私も色々欲しくなってきたわ。」

魔理沙「だろ？霊夢も最近買ってよかったものとかあったら教えてくれよ。」

霊夢「それはまた別の機会に話すわ。でも、この記事を書いた橋田さんに感謝ね！」

魔理沙「そうだな。ちなみに橋田さんはX（旧Twitter）もやってるらしいから、気になる人はフォローしてみるといいかもな！」

https://x.com/dall_develop
lightning-datatableで参照関係のリンクをつける

ひとまず下書き的に書いておきます

```html:AccountListWithLinks.html
<template>
  <lightning-card title="Account List with Links" icon-name="custom:custom63">
      <lightning-datatable
          key-field="Id"
          data={data}
          columns={columns}
          hide-checkbox-column
      ></lightning-datatable>
  </lightning-card>
</template>
```

```javascript:AccountListWithLinks.js
import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

const COLUMNS = [
    { label: 'Account Name', fieldName: 'Name' },
    {
        label: 'Owner Name',
        fieldName: 'OwnerLink',
        type: 'url',
        typeAttributes: {
            label: { fieldName: 'OwnerName' }, 
            target: '_blank'
        }
    },
    { label: 'Industry', fieldName: 'Industry' },
];

export default class AccountListWithLinks extends LightningElement {
    data = [];
    columns = COLUMNS;

    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.data = data.map((record) => {
                const ownerId = record.OwnerId;
                const ownerName = record.Owner.Name

                return {
                    ...record,
                    OwnerLink: `/lightning/r/User/${ownerId}/view`, 
                    OwnerName: ownerName, 
                };
            });
        } else if (error) {
            console.error(error);
        }
    }
}
```

```java:AccountController.cls
public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [
            SELECT Id, Name, Industry, OwnerId, Owner.Name
            FROM Account
            LIMIT 10
        ];
    }
}
```

実行結果
![AccountListWithLinks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510376/fd0bca1c-93e2-dac2-185a-724692ba117e.png)
競プロ入門【バチャをやろう】

みなさん、競技プログラミングというものを知っていますか？

プログラミングの競技と聞くと難しく感じてしまう人もいいかもしれないですが、実はそんな初心者にこそおすすめしたいものが競技プログラミングです。

今回は初心者から上級者までやっている「バチャ」について紹介します。

# 競技プログラミングとは？
与えられた問題を解くプログラムを作る競技です。
中高生向けの大会だとAtCoderやJOIが有名です。

プログラミングを基礎から学び、上達とともに少しずつアルゴリズムを習得していくことができるので、プログラミングを始めてみたいという方はぜひ競技プログラミングをやってみてはいかがでしょうか。

AtCoderというサイトでは毎週土曜日の21:00～初級者向けのABC（AtCoder Begineer Contest）が開かれます。
コンテストの成績に応じてレートというものがつくのでモチベーションを保ちやすいです。
競技プログラミングの人は全員といっても差し支えないほどAtCoderをやっています。とりあえずAtCoderのアカウントを作ってみるといいと思います。
以降の内容はAtCoderのアカウントを持っていることを前提に話をすすめます。

# バチャとは
競技プログラミングで大切なのはたくさん問題を解くことです。
AtCoderやJOIのコンテストの過去問がたくさんあるので、それを解いていくことが上達のカギです。

過去問演習はAtCoder Problemsというサイトが便利です。

https://kenkoooo.com/atcoder/#/table/

左上にユーザー名を入れると、解いた問題を色付けしたり今までの統計情報を見られたりします。

さて、このように過去問演習をすることができるのですが、せっかくなら時間を測って本番のコンテストと同じようにやりたいですよね。それをできるのがバチャ（バーチャルコンテスト）です。

バチャはAtCoderにも機能としてあるのですが、これは開催されたコンテストを別の時間に行うものです。

一方で、AtCoder Problemsというサイトにもバチャの機能があります。
これは同じ回のコンテストの問題を解くのではなく、過去問から集めて一つのコンテストを作ることができる機能です。
自由に問題数を設定したり問題の難易度を設定したりすることができるのでとても便利です。

また、他の人と同じ時間に同じ問題を解くことができるというのは大きな魅力です。何事も仲間と一緒にやるとモチベーションを保ちやすいので、ぜひ友達を誘って一緒にやってみてはいかがでしょうか。

それでは実際にどのように使うのか解説します。

# AtCoder Problemsを使う準備

まずAtCoder Problemsにログインしましょう。GitHubでログインできると思います。

そしたらAccountを開き、AtCoderIDを入力してください。これでAtCoder ProblemsとAtCoderが連携されます。


# バチャを作る
自分でバチャを作る時にやることです。

Account > My Contests > Create New Contest からバチャを作れます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124670/f4f057ea-2b44-1683-81c7-f12483eeecf2.png)

するとこのような画面が開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124670/3af0033e-3714-aec9-2fa6-ff907695be06.png)

## Contest Information
### Contest Title
コンテストの題名を決めてください。何でもいいです。
### Description
コンテストの説明を書いてください。何でもいいです。
### Public State 
公開するならPublic、しないならPrivateです。Privateでもリンクを共有すれば複数人で参加でき安栖。
### Mode
Normal、Lockout、Trainingとありますが、基本的にはNormalがいいと思います。
詳しい説明ははてなマークを押すと見られます。
### Penalty
誤答したときのペナルティです。
AtCoderとそろえるなら300(5分)です。
### Start Time, End Time
コンテスト時間です。
### Expected Participants
ここに参加者のAtCoderIDを書いておくと、その人たちが解いていない問題を優先して選んでくれます。

## Contest Problemset / Bacha Gacha
ここで問題を選びます。
1つ1つ問題を手で選んでも良いのですが、この下にあるBacha Gacha（バチャガチャ）というのがおすすめです。
ここでdifficultyやcontest typeを指定すると、自動で問題を提案してくれます。
More problem...というところをクリックすると問題数を増やすことができ、Addボタンを押すとProblemsetに追加されます。


全部入力できたらCreate Contestを押して完了です。

一緒にやる人とリンクを共有しましょう。

# バチャに参加する
リンクをもらって開いたら、ログインしていることを確認してJoinを押します。
するとStandingsっていうところにアカウント名が表示されます。
これで登録完了です。
バチャの時間になるとProblemsというところに問題一覧が表示されるので、そこからAtCoderの問題リンクに飛んで問題を解きましょう。
回答を提出すると少し時間はかかりますが自動でAtCoder Problemsの方に反映されます。


# さいごに
よい競プロライフをお過ごしください。
Ubuntu 24.04 lts で　Arduino IDE であそぶ IDEの設定、Lチカ(成功)(UNO)


x 過去ログを見よ
x 細かいとろは、各自設定

目的　Arduino IDEがインストール出来たのでLチカまで

いろいろ
いろいろあって、期間が開いてしまったが、ま～～～いいか?
いちお、かなりムズイよ!!!



結果(成功)

![o_coq696.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/0e0fb5a4-03ca-effe-81ef-177a0e314e28.jpeg)

![o_coq695.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/42817bf8-3d21-8363-f3f9-856af36ac424.jpeg)


●(1) 日本語の設定とコンパイルログとライトログの設定
----

![o_coq691.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/c51c0b14-8d07-2eed-9f16-960d75a41104.jpeg)

●(2) ボードの設定とシリアルの設定
----

![o_coq692.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e9e57a0a-42b2-4ee4-5b88-af6dd5784aea.jpeg)

●(3) Lチカの例題
----

![o_coq693.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/f27829b4-3bd9-aa5b-e346-31858a9cf32f.jpeg)

●(4) コンパイルと転送
----

![o_coq694.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/7a1948aa-d6d5-8313-443f-ee04bd3b08af.jpeg)